/* ════════════════════════════════════════════════════════════ VITA DECORATION — style.css (EN / AR Bilingual) ════════════════════════════════════════════════════════════ */ :root { --cream: #F5F0E8; --cream-dark: #EDE6D6; --warm-white: #FAF8F4; --charcoal: #1C1C1A; --taupe: #8A7E6F; --taupe-light: #B8AFA3; --gold: #C49A3C; --gold-light: #D4B05A; --gold-pale: #EDD98B; --sage: #7C8C78; --accent-light: #EDD98B; --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', 'Helvetica Neue', sans-serif; --font-ar: 'Tajawal', 'Arial', sans-serif; --section-gap: 9rem; --container: 1280px; --r-sm: 4px; --r-md: 12px; --r-lg: 24px; --shadow-sm: 0 2px 12px rgba(28,28,26,.08); --shadow-md: 0 8px 40px rgba(28,28,26,.12); --shadow-lg: 0 24px 64px rgba(28,28,26,.18); --ease: cubic-bezier(.4,0,.2,1); } /* ── RESET ───────────────────────────────────────────────── */ *,*::before,*::after { box-sizing:border-box; margin:0; padding:0 } html { scroll-behavior:smooth; font-size:16px; -webkit-font-smoothing:antialiased } body { font-family:var(--font-body); background:var(--warm-white); color:var(--charcoal); overflow-x:hidden; cursor:none } body.menu-open { overflow:hidden } body.lang-fade * { opacity:.5; transition:opacity .15s ease !important } img { display:block; width:100%; height:100%; object-fit:cover } a { text-decoration:none; color:inherit } ul { list-style:none } button { cursor:none; border:none; background:none; font-family:inherit } ::selection { background:var(--gold); color:var(--charcoal) } /* ══════════════════════════════════════════════════════════ ARABIC — RTL overrides Applied when is set by JS ══════════════════════════════════════════════════════════ */ :lang(ar) { font-family: var(--font-ar); direction: rtl; } :lang(ar) body { font-family: var(--font-ar) } /* Typography resets for Arabic */ :lang(ar) .section-label, :lang(ar) .btn, :lang(ar) .navbar__link, :lang(ar) .service-card__list li, :lang(ar) .portfolio__filter-btn, :lang(ar) .service-card__link, :lang(ar) .portfolio__info span, :lang(ar) .contact__details strong, :lang(ar) .footer__col h4 { letter-spacing: 0; text-transform: none; } :lang(ar) .section-title, :lang(ar) .hero__title { font-family: var(--font-ar); font-weight: 700 } :lang(ar) .section-title em { font-style: normal; font-weight: 700 } :lang(ar) .hero__title-line--italic { font-style: normal; padding-left: 0; padding-right: 2rem } :lang(ar) .about__lead { border-left: none; border-right: 2px solid var(--gold); padding-left: 0; padding-right: 1.2rem; font-style: normal; font-family: var(--font-ar) } :lang(ar) .about__body, :lang(ar) .about__pillar p, :lang(ar) .about__pillar strong, :lang(ar) .service-card__desc, :lang(ar) .service-card__title, :lang(ar) .testimonial-card__quote, :lang(ar) .section-desc, :lang(ar) .contact__desc, :lang(ar) .contact__details span, :lang(ar) .footer__brand p, :lang(ar) .footer__col a, :lang(ar) .footer__bottom p, :lang(ar) .stat-item p, :lang(ar) .form__note { font-family: var(--font-ar) } :lang(ar) .testimonial-card__quote { font-style: normal } /* Layout mirroring */ :lang(ar) .navbar__link::after { left: auto; right: 0 } :lang(ar) .about__img-secondary { left: 0; right: auto } :lang(ar) .about__img-label { left: 0; right: auto } :lang(ar) .hero__badge { right: auto; left: 4rem } :lang(ar) .back-to-top { right: auto; left: 2rem } :lang(ar) .navbar__nav { /* slide from left on mobile */ } /* Marquee stays LTR always */ :lang(ar) .marquee__track { direction: ltr } /* Form text alignment */ :lang(ar) .form-group input, :lang(ar) .form-group select, :lang(ar) .form-group textarea { text-align: right; font-family: var(--font-ar) } :lang(ar) .form-group label { font-family: var(--font-ar) } /* Nav mobile panel flips to slide from left */ @media(max-width:900px) { :lang(ar) .hero__badge { display: none } } /* ── PRELOADER ───────────────────────────────────────────── */ .preloader { position:fixed; inset:0; z-index:9999; background:var(--charcoal); display:flex; align-items:center; justify-content:center; transition:opacity .6s var(--ease), visibility .6s } .preloader.done { opacity:0; visibility:hidden } .preloader__inner { text-align:center } .preloader__logo { font-family:var(--font-display); font-size:5rem; color:var(--gold); display:block; animation:pre-pulse 1.2s ease-in-out infinite alternate } .preloader__bar { width:120px; height:2px; background:rgba(255,255,255,.15); margin:1.5rem auto 0; overflow:hidden } .preloader__bar::after { content:''; display:block; height:100%; width:40%; background:var(--gold); animation:pre-bar 1.4s ease-in-out infinite } @keyframes pre-pulse { from{opacity:.3} to{opacity:1} } @keyframes pre-bar { 0%{transform:translateX(-100%)} 100%{transform:translateX(350%)} } /* ── CURSOR ──────────────────────────────────────────────── */ .cursor, .cursor-follower { position:fixed; pointer-events:none; z-index:9998; border-radius:50%; transform:translate(-50%,-50%) } .cursor { width:8px; height:8px; background:var(--gold) } .cursor-follower { width:36px; height:36px; border:1px solid rgba(196,154,60,.5); transition:width .3s,height .3s,opacity .3s,transform .18s var(--ease) } .cursor-follower.hover { width:56px; height:56px; border-color:var(--gold); opacity:.7 } /* ── NAVBAR RIGHT GROUP (lang toggle + burger) ───────────── */ .navbar__right { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; } /* ── LANGUAGE TOGGLE ─────────────────────────────────────── */ .lang-toggle { display: flex; align-items: center; gap: 0; background: rgba(245,240,232,.1); border: 1px solid rgba(196,154,60,.35); border-radius: 2rem; padding: 0; overflow: hidden; cursor: pointer; transition: border-color .3s var(--ease), box-shadow .3s, background .3s; flex-shrink: 0; } .lang-toggle:hover { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196,154,60,.12) } .lang-toggle__en, .lang-toggle__ar { padding: .38rem .75rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; color: rgba(245,240,232,.5); transition: all .25s var(--ease); user-select: none; white-space: nowrap; } .lang-toggle__ar { font-family: var(--font-ar); letter-spacing: 0; font-size: .82rem } .lang-toggle__divider { color: rgba(196,154,60,.3); font-size: .65rem; pointer-events: none; flex-shrink: 0 } /* Active pill */ .lang-toggle__en.active, .lang-toggle__ar.active { color: var(--charcoal); background: var(--gold); border-radius: 2rem; margin: 2px; } /* When navbar is scrolled */ .navbar.scrolled .lang-toggle { background: rgba(28,28,26,.06); border-color: var(--cream-dark); } .navbar.scrolled .lang-toggle .lang-toggle__divider { color: var(--cream-dark) } .navbar.scrolled .lang-toggle .lang-toggle__en, .navbar.scrolled .lang-toggle .lang-toggle__ar { color: var(--taupe) } .navbar.scrolled .lang-toggle .lang-toggle__en.active, .navbar.scrolled .lang-toggle .lang-toggle__ar.active { color: var(--charcoal) } /* ── UTILITY ─────────────────────────────────────────────── */ .container { max-width:var(--container); margin:0 auto; padding:0 2rem } .section { padding:var(--section-gap) 0 } .section-label { font-size:.75rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.75rem } .section-title { font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.4rem); font-weight:300; line-height:1.2; color:var(--charcoal) } .section-title em { font-style:italic; color:var(--gold) } .section-desc { color:var(--taupe); font-weight:300; font-size:1.05rem; line-height:1.8; max-width:540px; margin-top:.75rem } .section-header { margin-bottom:4rem } .section-header .section-desc { margin-top:1rem } /* ── BUTTONS ─────────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 2.2rem; font-size:.88rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; border-radius:2px; transition:all .35s var(--ease); white-space:nowrap } .btn--primary { background:var(--gold); color:var(--charcoal); border:1px solid var(--gold) } .btn--primary:hover { background:var(--charcoal); color:var(--gold); border-color:var(--charcoal); transform:translateY(-2px); box-shadow:var(--shadow-md) } .btn--ghost { background:transparent; color:var(--cream); border:1px solid rgba(255,255,255,.4) } .btn--ghost:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7); transform:translateY(-2px) } .btn--full { width:100%; justify-content:center } /* ── NAVBAR ──────────────────────────────────────────────── */ .navbar { position:fixed; top:0; left:0; right:0; z-index:1000; padding:1.25rem 0; transition:background .4s var(--ease),padding .4s,box-shadow .4s } .navbar.scrolled { background:rgba(250,248,244,.88); backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%); padding:.85rem 0; box-shadow:0 1px 0 rgba(28,28,26,.08) } .navbar__container { max-width:var(--container); margin:0 auto; padding:0 2rem; display:flex; align-items:center; justify-content:space-between } .navbar__logo { display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-size:1.2rem; font-weight:300; letter-spacing:.05em; color:var(--cream); transition:color .3s } .navbar.scrolled .navbar__logo { color:var(--charcoal) } .navbar__logo-img { height:32px; width:auto; object-fit:contain; flex-shrink:0 } .navbar__logo-mark { width:36px; height:36px; background:var(--gold); color:var(--charcoal); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:600; flex-shrink:0 } .navbar__list { display:flex; gap:2.5rem; align-items:center } .navbar__link { font-size:.82rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(245,240,232,.85); position:relative; padding-bottom:3px; transition:color .3s } .navbar__link::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--gold); transition:width .3s var(--ease) } .navbar__link:hover::after,.navbar__link.active::after { width:100% } .navbar__link:hover { color:var(--gold) } .navbar.scrolled .navbar__link { color:var(--taupe) } .navbar.scrolled .navbar__link:hover { color:var(--gold) } .navbar__link--cta { padding:.55rem 1.4rem!important; border:1px solid rgba(196,154,60,.5); border-radius:2px; color:var(--gold)!important } .navbar__link--cta:hover { background:var(--gold); color:var(--charcoal)!important } .navbar__link--cta::after { display:none } .navbar__burger { display:none; flex-direction:column; gap:6px; width:28px; padding:4px 0 } .navbar__burger span { display:block; height:1.5px; background:var(--cream); transition:all .3s var(--ease) } .navbar.scrolled .navbar__burger span { background:var(--charcoal) } .navbar__burger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) } .navbar__burger.open span:nth-child(2) { opacity:0; transform:scaleX(0) } .navbar__burger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) } /* ── HERO ────────────────────────────────────────────────── */ .hero { position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden } .hero__bg { position:absolute; inset:0 } .hero__bg-img { width:100%; height:100%; object-fit:cover; transform:scale(1.05); animation:hero-zoom 14s ease-out forwards } @keyframes hero-zoom { to{transform:scale(1)} } .hero__overlay { position:absolute; inset:0; background:linear-gradient(105deg,rgba(28,28,26,.82) 0%,rgba(28,28,26,.55) 55%,rgba(28,28,26,.25) 100%) } .hero__content { position:relative; z-index:2; max-width:var(--container); margin:0 auto; padding:0 2rem; padding-top:8rem } .hero__eyebrow { font-size:.75rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:1.5rem } .hero__title { font-family:var(--font-display); font-size:clamp(4rem,9vw,8.5rem); font-weight:300; line-height:1; color:var(--cream) } .hero__title-line { display:block; overflow:hidden } .hero__title-line--italic { font-style:italic; color:var(--gold); padding-left:2.5rem } .hero__sub { margin-top:1.8rem; font-weight:300; font-size:1.15rem; line-height:1.7; color:rgba(245,240,232,.75); max-width:480px } .hero__actions { display:flex; gap:1rem; margin-top:2.5rem; flex-wrap:wrap } .hero__scroll-hint { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.6rem; color:rgba(245,240,232,.5); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; animation:fade-up 1.4s 2s both } .hero__scroll-line { width:1px; height:50px; background:linear-gradient(to bottom,rgba(245,240,232,.5),transparent); animation:scroll-line 2s 2s infinite } @keyframes scroll-line { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} } .hero__badge { position:absolute; bottom:5rem; right:4rem; z-index:2; color:var(--gold-pale); opacity:.7; animation:spin-slow 20s linear infinite } .hero__badge-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--font-display); font-size:1.1rem; font-weight:600; color:var(--gold); animation:spin-slow 20s linear infinite reverse } @keyframes spin-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} } @keyframes fade-up { from{opacity:0;transform:translateX(-50%) translateY(20px)} to{opacity:1;transform:translateX(-50%) translateY(0)} } .reveal-text { opacity:0; transform:translateY(30px) } /* ── MARQUEE ─────────────────────────────────────────────── */ .marquee { background:var(--charcoal); padding:1.1rem 0; overflow:hidden; border-top:1px solid rgba(196,154,60,.2); border-bottom:1px solid rgba(196,154,60,.2) } .marquee__track { display:flex; gap:3rem; align-items:center; white-space:nowrap; animation:marquee-scroll 30s linear infinite; width:max-content } .marquee__track span { font-size:.8rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:rgba(245,240,232,.6) } .marquee__dot { color:var(--gold)!important; font-size:.6rem!important } @keyframes marquee-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ── ABOUT ───────────────────────────────────────────────── */ .about { background:var(--warm-white) } .about__grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center } .about__images { position:relative; min-height:560px } .about__img-main { width:75%; height:480px; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-lg) } .about__img-secondary { position:absolute; bottom:-3rem; right:0; width:52%; height:260px; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-lg); border:5px solid var(--warm-white) } .about__img-label { position:absolute; top:2rem; right:2rem; background:var(--gold); color:var(--charcoal); padding:1.2rem 1.5rem; border-radius:var(--r-sm); text-align:center; box-shadow:var(--shadow-md) } .about__img-label strong { font-family:var(--font-display); font-size:2.5rem; font-weight:600; display:block; line-height:1 } .about__img-label span { font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase } .about__lead { font-family:var(--font-display); font-size:1.35rem; font-weight:300; font-style:italic; line-height:1.6; color:var(--charcoal); margin:1.5rem 0 1rem; padding-left:1.2rem; border-left:2px solid var(--gold) } .about__body { font-weight:300; font-size:1rem; line-height:1.85; color:var(--taupe); margin-bottom:2rem } .about__pillars { display:flex; flex-direction:column; gap:1.5rem; margin-bottom:2.5rem } .about__pillar { display:flex; gap:1rem; align-items:flex-start } .about__pillar-icon { font-size:1.2rem; color:var(--gold); margin-top:.1rem; flex-shrink:0 } .about__pillar strong { display:block; font-size:.85rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal); margin-bottom:.35rem } .about__pillar p { font-weight:300; font-size:.95rem; line-height:1.7; color:var(--taupe) } /* ── SERVICES ────────────────────────────────────────────── */ .services { background:var(--cream) } .services__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem } .service-card { background:var(--warm-white); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--cream-dark); transition:transform .4s var(--ease),box-shadow .4s; display:grid; grid-template-rows:260px 1fr } .service-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg) } .service-card__img { position:relative; overflow:hidden } .service-card__img img { transition:transform .7s var(--ease) } .service-card:hover .service-card__img img { transform:scale(1.06) } .service-card__img-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(28,28,26,.4),transparent 60%) } .service-card__body { padding:2rem } .service-card__num { font-family:var(--font-display); font-size:3rem; font-weight:300; color:var(--cream-dark); line-height:1; display:block; margin-bottom:.5rem } .service-card__title { font-family:var(--font-display); font-size:1.55rem; font-weight:400; color:var(--charcoal); margin-bottom:.75rem } .service-card__desc { font-weight:300; font-size:.95rem; line-height:1.75; color:var(--taupe); margin-bottom:1rem } .service-card__list { display:flex; flex-wrap:wrap; gap:.4rem .8rem; margin-bottom:1.5rem } .service-card__list li { font-size:.75rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--taupe); padding:.25rem .6rem; border:1px solid var(--cream-dark); border-radius:2px } .service-card__link { font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:.4rem; transition:gap .3s var(--ease) } .service-card__link:hover { gap:.8rem } /* ── PORTFOLIO ───────────────────────────────────────────── */ .portfolio { background:var(--warm-white) } .portfolio__filter { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:3rem } .portfolio__filter-btn { padding:.5rem 1.4rem; font-size:.78rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--cream-dark); border-radius:2px; color:var(--taupe); transition:all .3s var(--ease); cursor:pointer } .portfolio__filter-btn:hover,.portfolio__filter-btn.active { background:var(--charcoal); color:var(--cream); border-color:var(--charcoal) } .portfolio__grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:280px; gap:1.2rem } .portfolio__item { position:relative; overflow:hidden; border-radius:var(--r-md); cursor:none } .portfolio__item--large { grid-column:span 2 } .portfolio__item img { transition:transform .7s var(--ease) } .portfolio__item:hover img { transform:scale(1.06) } .portfolio__info { position:absolute; bottom:0; left:0; right:0; padding:1.5rem; background:linear-gradient(to top,rgba(28,28,26,.85),transparent); transform:translateY(20px); opacity:0; transition:all .4s var(--ease) } .portfolio__item:hover .portfolio__info { transform:translateY(0); opacity:1 } .portfolio__info span { font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.3rem } .portfolio__info h3 { font-family:var(--font-display); font-size:1.2rem; font-weight:300; color:var(--cream) } .portfolio__item.hidden { display:none } /* ── STATS ───────────────────────────────────────────────── */ .stats { position:relative; overflow:hidden; padding:var(--section-gap) 0 } .stats__bg { position:absolute; inset:0 } .stats__overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(28,28,26,.93),rgba(28,28,26,.85)) } .stats__inner { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center } .stats__body { color:rgba(255,255,255,.7); font-size:1.05rem; line-height:1.8; margin-top:1.5rem } .stats__numbers { display:grid; grid-template-columns:1fr 1fr; gap:3rem } .stat-item__num { font-family:var(--font-display); font-size:clamp(3rem,5vw,4.5rem); font-weight:300; line-height:1; color:var(--gold) } .stat-item__plus { font-family:var(--font-display); font-size:2.5rem; color:var(--gold) } .stat-item p { font-size:.85rem; font-weight:400; letter-spacing:.05em; color:rgba(245,240,232,.55); margin-top:.4rem } /* ── TESTIMONIALS ────────────────────────────────────────── */ .testimonials { background:var(--cream) } .testimonials__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem } .testimonial-card { background:var(--warm-white); border:1px solid var(--cream-dark); border-radius:var(--r-md); padding:2.5rem; transition:transform .4s var(--ease),box-shadow .4s } .testimonial-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md) } .testimonial-card--accent { background:var(--charcoal); border-color:var(--charcoal) } .testimonial-card--accent .testimonial-card__quote { color:rgba(245,240,232,.8) } .testimonial-card--accent strong { color:var(--cream)!important } .testimonial-card--accent span { color:var(--taupe-light)!important } .testimonial-card__quote { font-family:var(--font-display); font-size:1.05rem; font-style:italic; font-weight:300; line-height:1.7; color:var(--taupe); margin-bottom:2rem } .testimonial-card__author { display:flex; align-items:center; gap:1rem } .testimonial-card__avatar { width:44px; height:44px; background:var(--gold); color:var(--charcoal); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:600; flex-shrink:0 } .testimonial-card__author strong { display:block; font-size:.9rem; font-weight:600; color:var(--charcoal) } .testimonial-card__author span { font-size:.8rem; color:var(--taupe) } /* ── CONTACT ─────────────────────────────────────────────── */ .contact { background:var(--warm-white) } .contact__grid { display:grid; grid-template-columns:1fr 1.2fr; gap:6rem; align-items:start } .contact__desc { font-weight:300; font-size:1rem; line-height:1.8; color:var(--taupe); margin:1.2rem 0 2rem } .contact__details { display:flex; flex-direction:column; gap:1.2rem; margin-bottom:2.5rem } .contact__details li { display:flex; gap:1rem; align-items:flex-start } .contact__detail-icon { color:var(--gold); font-size:1rem; margin-top:.15rem; flex-shrink:0 } .contact__details strong { display:block; font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--charcoal); margin-bottom:.15rem } .contact__details span { font-size:.95rem; font-weight:300; color:var(--taupe) } .contact__social { display:flex; gap:.8rem } .social-icon { width:44px; height:44px; border:1px solid var(--cream-dark); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--taupe); transition:all .3s var(--ease) } .social-icon:hover { background:var(--gold); color:var(--charcoal); border-color:var(--gold); transform:translateY(-3px) } .contact__form-wrap { background:var(--cream); border-radius:var(--r-lg); padding:3rem; border:1px solid var(--cream-dark) } .contact__form { display:flex; flex-direction:column; gap:1.2rem } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem } .form-group { display:flex; flex-direction:column; gap:.4rem } .form-group label { font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe) } .form-group input, .form-group select, .form-group textarea { padding: .8rem 1rem; border: 1px solid var(--cream-dark); border-radius: var(--r-sm); font-family: var(--font-body); font-size: .95rem; transition: all .3s var(--ease); background: white; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196,154,60,.1); } .form-group textarea { resize: vertical; min-height: 120px } .form__note { font-size: .85rem; color: var(--taupe); text-align: center; margin-top: 1rem; opacity: .8; } .form-success, .form-error { animation: slideIn 0.3s ease-out; } @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ── PROCESS ─────────────────────────────────────────────── */ .process { background:var(--cream) } .process__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; } .process__steps::before { content: ''; position: absolute; top: 2.6rem; left: 10%; right: 10%; height: 1px; background: linear-gradient(to right, transparent, var(--gold), var(--gold), var(--gold), transparent); opacity: .35; pointer-events: none; } .process__step { padding: 0 1.5rem; text-align: center; position: relative; } .process__step-num { font-family: var(--font-display); font-size: .75rem; font-weight: 600; letter-spacing: .15em; color: var(--gold); margin-bottom: .6rem; } .process__step-icon { width: 52px; height: 52px; border: 1.5px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--gold); margin: 0 auto 1.4rem; background: var(--cream); position: relative; z-index: 1; transition: background .3s, color .3s; } .process__step:hover .process__step-icon { background: var(--gold); color: var(--charcoal); } .process__step h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--charcoal); margin-bottom: .65rem; } .process__step p { font-size: .88rem; font-weight: 300; line-height: 1.75; color: var(--taupe); } :lang(ar) .process__step h3, :lang(ar) .process__step p { font-family: var(--font-ar) } :lang(ar) .process__step-num { letter-spacing: 0 } /* ── TEAM ────────────────────────────────────────────────── */ .team { background: var(--warm-white) } .team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .team__card { border-radius: var(--r-md); overflow: hidden; background: var(--cream); border: 1px solid var(--cream-dark); transition: transform .4s var(--ease), box-shadow .4s; } .team__card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg) } .team__card-img { position: relative; height: 300px; overflow: hidden; } .team__card-img img { transition: transform .7s var(--ease) } .team__card:hover .team__card-img img { transform: scale(1.06) } .team__card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,28,26,.7), transparent 50%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1.5rem; opacity: 0; transition: opacity .4s var(--ease); } .team__card:hover .team__card-overlay { opacity: 1 } .team__card-links { display: flex; gap: .6rem } .team__card-link { width: 38px; height: 38px; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--cream); transition: background .3s, border-color .3s; } .team__card-link:hover { background: var(--gold); border-color: var(--gold); color: var(--charcoal) } .team__card-body { padding: 1.6rem } .team__card-body h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; color: var(--charcoal); margin-bottom: .3rem; } .team__card-body span { font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .75rem; } .team__card-body p { font-size: .88rem; font-weight: 300; line-height: 1.7; color: var(--taupe); } :lang(ar) .team__card-body h3, :lang(ar) .team__card-body p { font-family: var(--font-ar) } :lang(ar) .team__card-body span { letter-spacing: 0; text-transform: none; font-family: var(--font-ar) } /* ── PARTNERS + AWARDS ───────────────────────────────────── */ .partners { background: var(--charcoal) } .partners .section-label { color: var(--accent-light) } .partners .section-title { color: #fff } .partners .section-title em { color: var(--gold) } .partners__strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; border: 1px solid rgba(196,154,60,.15); border-radius: var(--r-md); overflow: hidden; margin-bottom: 4rem; } .partners__logo { flex: 1 1 calc(100% / 7); min-width: 120px; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; border-right: 1px solid rgba(196,154,60,.12); transition: background .3s; } .partners__logo:last-child { border-right: none } .partners__logo:hover { background: rgba(196,154,60,.06) } .partners__logo span { font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .2em; color: rgba(245,240,232,.35); text-transform: uppercase; transition: color .3s; white-space: nowrap; } .partners__logo:hover span { color: var(--gold) } .awards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .award-item { text-align: center; padding: 2rem 1.5rem; border: 1px solid rgba(196,154,60,.15); border-radius: var(--r-md); transition: border-color .3s, background .3s; } .award-item:hover { border-color: rgba(196,154,60,.4); background: rgba(196,154,60,.04) } .award-item__icon { font-size: 1.6rem; color: var(--gold); margin-bottom: .9rem } .award-item strong { display: block; font-size: .9rem; font-weight: 600; color: rgba(245,240,232,.85); margin-bottom: .4rem; line-height: 1.4; } .award-item span { font-size: .8rem; color: rgba(245,240,232,.4); font-weight: 300 } :lang(ar) .award-item strong, :lang(ar) .award-item span, :lang(ar) .partners__logo span { font-family: var(--font-ar); letter-spacing: 0; text-transform: none } /* ── FAQ ─────────────────────────────────────────────────── */ .faq { background: var(--warm-white) } .faq__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 6rem; align-items: start; } .faq__items { display: flex; flex-direction: column; gap: 0 } .faq__item { border-bottom: 1px solid var(--cream-dark); } .faq__item:first-child { border-top: 1px solid var(--cream-dark) } .faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 0; text-align: left; cursor: pointer; transition: color .3s; } .faq__q span:first-child { font-size: 1rem; font-weight: 400; color: var(--charcoal); line-height: 1.5; transition: color .3s; font-family: var(--font-display); font-size: 1.1rem; } :lang(ar) .faq__q span:first-child { font-family: var(--font-ar); font-size: .95rem; text-align: right } .faq__q:hover span:first-child { color: var(--gold) } .faq__icon { width: 28px; height: 28px; flex-shrink: 0; border: 1px solid var(--cream-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 300; color: var(--gold); transition: transform .35s var(--ease), background .3s, border-color .3s; } .faq__item.open .faq__icon { transform: rotate(45deg); background: var(--gold); color: var(--charcoal); border-color: var(--gold); } .faq__a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease), padding .3s; } .faq__item.open .faq__a { max-height: 300px; padding-bottom: 1.2rem } .faq__a p { font-size: .95rem; font-weight: 300; line-height: 1.8; color: var(--taupe); } :lang(ar) .faq__a p { font-family: var(--font-ar); text-align: right } .footer { background:var(--charcoal); padding:5rem 0 2rem } .footer__top { display:grid; grid-template-columns:1.2fr 2fr; gap:4rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:2rem } .footer__brand .navbar__logo { color:var(--cream); margin-bottom:1rem; display:inline-flex } .footer__brand p { font-weight:300; font-size:.95rem; line-height:1.7; color:rgba(245,240,232,.45); max-width:280px } .footer__links { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem } .footer__col h4 { font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:1.2rem } .footer__col ul { display:flex; flex-direction:column; gap:.6rem } .footer__col a { font-weight:300; font-size:.9rem; color:rgba(245,240,232,.45); transition:color .3s } .footer__col a:hover { color:var(--cream) } .footer__bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem } .footer__bottom p { font-size:.8rem; color:rgba(245,240,232,.3) } /* ── BACK TO TOP ─────────────────────────────────────────── */ .back-to-top { position:fixed; bottom:2rem; right:2rem; z-index:500; width:44px; height:44px; background:var(--gold); color:var(--charcoal); border-radius:50%; font-size:1rem; font-weight:600; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); opacity:0; transform:translateY(20px); transition:all .4s var(--ease); pointer-events:none; cursor:pointer } .back-to-top.visible { opacity:1; transform:translateY(0); pointer-events:auto } .back-to-top:hover { background:var(--charcoal); color:var(--gold) } /* WHATSAPP BUTTON */ .whatsapp-button { position:fixed; bottom:2rem; left:2rem; z-index:1000; width:56px; height:56px; background:#25D366; color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(37,211,102,.3); transition:all .3s var(--ease); text-decoration:none; border:none; cursor:pointer } .whatsapp-button:hover { transform:scale(1.1); box-shadow:0 6px 20px rgba(37,211,102,.4); background:#128C7E } .whatsapp-button:active { transform:scale(.95) } .whatsapp-button svg { width:28px; height:28px; fill:currentColor } .whatsapp-tooltip { position:absolute; bottom:70px; left:50%; transform:translateX(-50%); background:var(--charcoal); color:white; padding:.5rem 1rem; border-radius:20px; font-size:.85rem; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .3s var(--ease); } .whatsapp-tooltip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--charcoal) } .whatsapp-button:hover .whatsapp-tooltip { opacity:1 } /* ══════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════ */ @media(max-width:1100px){ .services__grid { grid-template-columns:1fr 1fr } .about__grid { gap:3rem } .stats__inner { gap:3rem } } @media(max-width:900px){ :root { --section-gap:6rem } .navbar__nav { position:fixed; top:0; right:0; width:min(320px,100vw); height:100vh; background:var(--charcoal); padding:6rem 2.5rem 2rem; transform:translateX(100%); transition:transform .4s var(--ease); box-shadow:-8px 0 40px rgba(0,0,0,.3) } .navbar__nav.open { transform:translateX(0) } .navbar__list { flex-direction:column; align-items:flex-start; gap:1.8rem } .navbar__link { color:rgba(245,240,232,.8)!important; font-size:1rem } .navbar__burger { display:flex } .navbar__logo-img { height:28px } /* RTL mobile nav slides from left */ :lang(ar) .navbar__nav { right:auto; left:0; transform:translateX(-100%) } :lang(ar) .navbar__nav.open { transform:translateX(0) } .process__steps { grid-template-columns: 1fr 1fr; gap: 2.5rem } .process__steps::before { display: none } .team__grid { grid-template-columns: 1fr 1fr } .awards__grid { grid-template-columns: 1fr 1fr } .faq__grid { grid-template-columns: 1fr; gap: 3rem } .partners__logo { flex: 1 1 calc(100% / 4) } .about__images { min-height:400px } .about__img-main { width:85%; height:360px } .services__grid { grid-template-columns:1fr } .portfolio__grid { grid-template-columns:1fr 1fr } .portfolio__item--large { grid-column:span 2 } .stats__inner { grid-template-columns:1fr; gap:3.5rem } .testimonials__grid { grid-template-columns:1fr } .contact__grid { grid-template-columns:1fr; gap:3rem } .contact__form-wrap { padding:2rem } .footer__top { grid-template-columns:1fr; gap:2.5rem } .hero__badge { display:none } } @media(max-width:600px){ :root { --section-gap:4.5rem } .process__steps { grid-template-columns: 1fr } .team__grid { grid-template-columns: 1fr } .awards__grid { grid-template-columns: 1fr 1fr } .partners__logo { flex: 1 1 calc(100% / 3) } .hero__title-line--italic { padding-left:1rem } .portfolio__grid { grid-template-columns:1fr; grid-auto-rows:240px } .portfolio__item--large { grid-column:span 1 } .stats__numbers { grid-template-columns:1fr 1fr; gap:2rem } .form-row { grid-template-columns:1fr } .footer__links { grid-template-columns:1fr 1fr } .footer__bottom { flex-direction:column; text-align:center } .cursor,.cursor-follower { display:none } body { cursor:auto } button,a { cursor:pointer } /* Compact lang toggle on small screens */ .lang-toggle__en, .lang-toggle__ar { padding: .32rem .6rem; font-size: .7rem } .whatsapp-button { width:60px !important; height:60px !important; bottom:1.5rem !important; left:1.5rem !important; z-index:9999 !important; display:flex !important; visibility:visible !important; opacity:1 !important; } .whatsapp-button svg { width:30px !important; height:30px !important } .whatsapp-tooltip { display:none } }