/* ============================================================ Fazila Mulla — InteleTravel UAE SHARED STYLESHEET (assets/css/styles.css) ------------------------------------------------------------ One stylesheet for the whole site. Design tokens, base resets, typography, buttons, section shells, the shared header/footer, and the sticky mobile WhatsApp button all live here. Values are pulled verbatim from the approved reference files in /Screens so the site matches them exactly. Page-specific styles (hero, stats, pricing cards, accordions, etc.) belong with each page as it is built — NOT here. ============================================================ */ /* ---------- FONTS ---------------------------------------------------------- Core fonts (used on every page) are loaded here so a single stylesheet link brings them in. The script-specific fonts for the language pages (Cairo / Noto Nastaliq Urdu / Noto Sans Devanagari) are ALSO listed here and are activated per page by the shared script via . --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Mulish:wght@300;400;500;600;700&display=swap'); /* Language-page fonts (loaded on demand by site.js when data-lang is set): Cairo (Arabic), Noto Nastaliq Urdu (Urdu), Noto Sans Devanagari (Hindi). They are requested here too so they are cached and ready; site.js also injects a matching as a belt-and-braces fallback. */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@300;400;500;600&display=swap'); /* ---------- DESIGN TOKENS -------------------------------------------------- */ :root{ --bg:#FAF7F2; --navy:#1C2B4A; --navy-2:#22314F; --navy-deep:#151F35; --warm-white:#F5F0EB; --gold:#C9A96E; --ink:#3A3A38; --muted:#6B6A65; --line:rgba(28,43,74,0.14); --font-display:'Cormorant Garamond',Georgia,serif; --font-body:'Mulish',-apple-system,BlinkMacSystemFont,sans-serif; } /* ---------- BASE RESET ----------------------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--font-body); background:var(--bg); color:var(--ink); line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; } a{text-decoration:none;color:inherit} img{max-width:100%;display:block} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} /* ---------- TYPOGRAPHY SCALE ----------------------------------------------- */ h1,h2,h3{font-family:var(--font-display);color:var(--navy);font-weight:500;line-height:1.15} h1{font-size:clamp(34px,6vw,60px);line-height:1.12;letter-spacing:0.3px} h2{font-size:clamp(26px,4vw,38px)} h3{font-size:22px;font-weight:600} p{line-height:1.6} .eyebrow,.kicker{ color:var(--gold);font-size:11.5px;letter-spacing:2px; text-transform:uppercase;font-weight:600; } /* ---------- BUTTONS -------------------------------------------------------- .btn is the shared base. Variants: .btn-gold gold fill, navy text (primary CTA) .btn-ghost transparent, warm-white text (for use ON navy backgrounds) .btn-outline transparent, navy text (for use on light backgrounds) .btn-navy navy fill, warm-white text .btn-wa WhatsApp green fill, white text --------------------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--font-body);font-size:15px;font-weight:600; padding:14px 30px;border-radius:6px; letter-spacing:0.3px;cursor:pointer;transition:all .2s; border:1px solid transparent; } .btn svg{width:16px;height:16px} .btn-gold{background:var(--gold);color:var(--navy)} .btn-gold:hover{background:#d4b782;transform:translateY(-1px)} .btn-ghost{background:transparent;color:var(--warm-white);border-color:rgba(201,169,110,0.55)} .btn-ghost:hover{background:rgba(201,169,110,0.1)} .btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)} .btn-outline:hover{background:var(--navy);color:var(--warm-white)} .btn-navy{background:var(--navy);color:var(--warm-white)} .btn-navy:hover{background:#24365c} .btn-wa{background:#25D366;color:#fff} .btn-wa:hover{background:#1eb658} /* ---------- SECTION SHELLS ------------------------------------------------- Alternating navy / white / off-white section backgrounds give the long pages rhythm. Individual pages may nudge padding; these are the defaults. --------------------------------------------------------------------------- */ .section{padding:64px 24px} .section.white{background:#FFFFFF} .section.cream{background:var(--bg)} .section.navy{background:var(--navy)} .section-head{text-align:center;max-width:640px;margin:0 auto 40px} .section-head .kicker{margin-bottom:12px} .section-head h2{font-size:clamp(26px,4vw,38px);font-weight:500;line-height:1.15} .section-head p{color:var(--muted);font-size:15px;margin-top:12px} .section.navy .section-head h2{color:var(--warm-white)} .section.navy .section-head p{color:rgba(245,240,235,0.75)} /* ---------- INLINE TEXT LINK (shared utility) ---------- */ .text-link{color:var(--navy);font-size:14px;font-weight:600;border-bottom:1px solid var(--gold);padding-bottom:2px} .text-link:hover{color:var(--gold)} /* ---------- HEADER (shared) ------------------------------------------------ */ header{ background:var(--navy); position:sticky;top:0;z-index:50; } .header-inner{ display:flex;align-items:center;justify-content:space-between; padding:14px 24px;max-width:1120px;margin:0 auto; } .brand{ font-family:var(--font-display); color:var(--warm-white); font-size:22px;letter-spacing:0.5px;font-weight:500; } .header-right{display:flex;align-items:center;gap:18px} .lang-switch{display:flex;gap:10px} .lang-switch a,.lang-switch .active{ color:rgba(245,240,235,0.65);font-size:12px;letter-spacing:0.5px; font-weight:600;transition:color .2s; } .lang-switch a:hover,.lang-switch a.active,.lang-switch .active{color:var(--gold)} .lang-switch .active{cursor:default} .wa-icon{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%; border:1px solid rgba(201,169,110,0.5);color:var(--gold); transition:background .2s; } .wa-icon:hover{background:rgba(201,169,110,0.12)} .wa-icon svg{width:17px;height:17px} /* ---------- FOOTER (shared) ------------------------------------------------ */ footer{background:var(--navy-deep);padding:38px 24px 30px} .footer-inner{max-width:1120px;margin:0 auto;text-align:center} .footer-inner .disc{ color:rgba(245,240,235,0.6);font-size:12px;line-height:1.6; max-width:620px;margin:0 auto 20px;font-weight:300; } .footer-inner .disc a{color:var(--gold);border-bottom:1px solid rgba(201,169,110,0.4)} .footer-tools{ border-top:1px solid rgba(201,169,110,0.2); padding-top:18px; display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap; } .country-sel{ display:inline-flex;align-items:center;gap:7px; color:var(--gold);font-size:12.5px;font-weight:500;cursor:pointer; } .country-sel svg{width:13px;height:13px} .footer-links{display:flex;gap:16px} .footer-links a{color:rgba(245,240,235,0.55);font-size:12px} .footer-links a:hover,.footer-links a.active{color:var(--gold)} .footer-markets{ color:rgba(245,240,235,0.4);font-size:10.5px; margin-top:16px;letter-spacing:0.5px; } /* ---------- STICKY MOBILE WHATSAPP ----------------------------------------- */ .wa-sticky{ position:fixed;right:18px;bottom:18px;z-index:60; width:54px;height:54px;border-radius:50%; background:#25D366;color:#fff; display:none;align-items:center;justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.22); } .wa-sticky svg{width:28px;height:28px} /* ---------- RTL (Arabic / Urdu) -------------------------------------------- dir="rtl" on mirrors the whole layout automatically. These are the few things that must NOT simply mirror: the sticky WhatsApp button moves to the bottom-left, and numbers/prices stay left-to-right. --------------------------------------------------------------------------- */ html[dir="rtl"] .wa-sticky{left:18px;right:auto} .ltr{direction:ltr;unicode-bidi:embed} /* ---------- LANGUAGE BODY FONTS ------------------------------------------- Applied via on the language pages. Palette and layout stay identical; only the body typeface changes. --------------------------------------------------------------------------- */ /* Language pages set their own body line-height (Nastaliq needs a large one); each page also overrides --font-body, so these are a font fallback only. */ body[data-lang="ar"]{font-family:'Cairo',var(--font-body)} body[data-lang="ur"]{font-family:'Noto Nastaliq Urdu',var(--font-body)} body[data-lang="hi"]{font-family:'Noto Sans Devanagari',var(--font-body)} /* ---------- RESPONSIVE (shared shells) ------------------------------------- */ @media (max-width:600px){ .section{padding:50px 22px} .header-right{gap:12px} .lang-switch{gap:8px} .wa-sticky{display:flex} .footer-tools{flex-direction:column;gap:14px} }