/* ========================================================================== BAR3AM — Reset, layout primitives & shared components Loaded AFTER tokens.css and BEFORE every section stylesheet. Section files must reuse these classes instead of redefining them. ========================================================================== */ /* ---- Fonts -------------------------------------------------------------- Tajawal is loaded from Google Fonts in index.html . Do NOT declare a local-only @font-face here: it would match all weights, fail to resolve on machines without Tajawal installed, and shadow the Google-hosted faces. -------------------------------------------------------------------------- */ /* ---- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* In RTL the document's inline overflow spills to the RIGHT. Off-canvas decorations would otherwise widen the scroll area and shove the whole page sideways on small screens. `clip` (not `hidden`) contains it WITHOUT turning into a scroll container, so `position: sticky` still works. */ overflow-x: clip; } body { font-family: var(--font); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--c-text); background: var(--c-card); direction: rtl; overflow-x: clip; -webkit-font-smoothing: antialiased; } /* Every top-level band clips its own decorative bleed, so no single section can widen the page. `clip` keeps sticky/`position: fixed` descendants working. */ .header, .hero, .dev, .trust, .cambridge, .skills, .kifayat, .testimonials, .steps, .cta, .footer { overflow-x: clip; } /* `.wa` is deliberately absent: it is `position: fixed` and must not be clipped by, or contained inside, any band above. build.ps1 appends it last, as a direct child of . */ img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 3px; border-radius: 4px; } /* ---- Layout ------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; } .section { padding-block: 64px; } .section--tight { padding-block: 44px; } .section--bg { background: var(--c-bg); } /* ---- Section heading pattern (eyebrow + title + subtitle) --------------- */ .sec-head { text-align: center; margin-bottom: 40px; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-green); margin-bottom: 10px; } .eyebrow::after { content: ""; width: 24px; height: 2px; background: var(--c-green); border-radius: 2px; } .sec-title { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--c-primary); } .sec-title--dark { color: var(--c-text); } .sec-sub { margin-top: 12px; font-size: var(--fs-sm); color: var(--c-text-2); max-width: 730px; margin-inline: auto; line-height: var(--lh-normal); } /* ---- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding-inline: 26px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn svg, .btn img { width: 20px; height: 20px; flex: none; } .btn--primary { background: var(--c-primary); color: #fff; box-shadow: var(--sh-btn); } .btn--primary:hover { background: var(--c-primary-dark); } .btn--green { background: var(--c-green); color: #fff; box-shadow: 0 8px 20px rgba(99, 162, 79, 0.28); } .btn--green:hover { background: #55913f; } .btn--yellow { background: var(--c-yellow); color: var(--c-navy-deep); box-shadow: 0 8px 20px rgba(230, 174, 11, 0.3); } .btn--yellow:hover { background: #d1a00a; } .btn--ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.55); } .btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); } .btn--sm { height: 45px; padding-inline: 22px; } /* ---- Chips / badges ----------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding-inline: 16px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); } /* ---- Decorative shapes -------------------------------------------------- */ .deco { position: absolute; border-radius: 50%; pointer-events: none; } /* ---- Scroll reveal (driven by js/main.js) ------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 0.08s; } .reveal[data-delay="2"] { transition-delay: 0.16s; } .reveal[data-delay="3"] { transition-delay: 0.24s; } .reveal[data-delay="4"] { transition-delay: 0.32s; } .reveal[data-delay="5"] { transition-delay: 0.40s; } /* ---- Utilities ---------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }