/* ========================================================================== ARAB GUIDE SPAIN — Design System Luxury Andalusian-Gulf travel brand Signature motif: 8-point zellige star lattice, drawn in thin gold strokes ========================================================================== */ /* ---------- 1. Design tokens ---------- */ :root{ /* Brand palette — navy / gold / white (per client's ad-poster identity) */ --forest: #0B1E3D; /* navy marine (primary) */ --forest-deep: #061024; /* deep navy (gradients, footer) */ --gold: #D4AF37; --gold-soft: #B8933F; --ivory: #FFFFFF; /* white */ /* Supporting neutrals — cool tones to suit navy/gold/white */ --ink: #101826; /* body text on white */ --stone: #EEF1F6; /* card / section backgrounds */ --stone-line: #DEE3EB; /* hairline borders */ --white: #FFFFFF; /* Semantic */ --bg: var(--ivory); --bg-alt: var(--stone); --text: var(--ink); --text-invert: var(--ivory); --accent: var(--gold); --accent-hover: var(--gold-soft); --surface-dark: var(--forest); --surface-dark-2: var(--forest-deep); /* Type */ --font-display: "Cormorant Garamond", "Amiri", serif; --font-body: "Jost", "Tajawal", sans-serif; --font-arabic-display: "Aref Ruqaa", "Cormorant Garamond", serif; --font-arabic-body: "Tajawal", "Jost", sans-serif; --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.95rem); --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.1rem); --step-3: clamp(2.1rem, 1.8rem + 1.5vw, 3rem); --step-4: clamp(2.8rem, 2.2rem + 3vw, 4.5rem); --step-5: clamp(3.4rem, 2.6rem + 4vw, 5.8rem); --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6.5rem; --radius-sm: 2px; --radius-md: 4px; --container: 1240px; --ease: cubic-bezier(.4,0,.2,1); } /* Respect saved user preference for reduced motion */ @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; } } /* ---------- 2. Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:var(--step-0); line-height:1.65; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } button{ font-family:inherit; cursor:pointer; } input,textarea,select{ font-family:inherit; font-size:1em; } /* RTL support — applied via */ [dir="rtl"] body{ font-family:var(--font-arabic-body); } [dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .display{ font-family:var(--font-arabic-display); } /* Letter-spacing breaks Arabic's cursive glyph-joining — always reset to normal in RTL */ [dir="rtl"] .eyebrow, [dir="rtl"] .nav a, [dir="rtl"] .dropdown-toggle, [dir="rtl"] .brand small, [dir="rtl"] .btn, [dir="rtl"] .lede, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3{ letter-spacing:normal; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.15; margin:0 0 var(--space-2); color:var(--forest); letter-spacing:0.01em; } h1{ font-size:var(--step-5); font-weight:400; } h2{ font-size:var(--step-4); font-weight:400; } h3{ font-size:var(--step-2); } p{ margin:0 0 var(--space-2); } .eyebrow{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-body); font-size:var(--step--1); letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft); font-weight:500; margin-bottom:var(--space-2); } .eyebrow::before{ content:""; width:28px; height:1px; background:var(--gold-soft); } [dir="rtl"] .eyebrow::before{ order:2; } .lede{ font-size:var(--step-1); color:var(--forest); max-width:60ch; } .muted{ color:#4B5348; } /* ---------- 3. Layout ---------- */ .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--space-3); } .section{ padding-block:var(--space-6); } .section--tight{ padding-block:var(--space-5); } .section--dark{ background:var(--surface-dark); color:var(--text-invert); } .section--dark h1,.section--dark h2,.section--dark h3{ color:var(--ivory); } .section--alt{ background:var(--bg-alt); } .grid{ display:grid; gap:var(--space-3); } @media(min-width:560px) and (max-width:759px){ .grid--3, .grid--4{ grid-template-columns:repeat(2,1fr); } } @media(min-width:760px){ .grid--2{ grid-template-columns:repeat(2,1fr); } .grid--3{ grid-template-columns:repeat(3,1fr); } .grid--4{ grid-template-columns:repeat(4,1fr); } } .stack{ display:flex; flex-direction:column; } .cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); } .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; } /* ---------- 4. Signature motif: zellige star divider ---------- */ /* An 8-point star lattice line-drawing — the recurring "Andalusia meets the Gulf" signature. Used as section divider, hero backdrop and quote watermark. */ .zellige-divider{ width:100%; display:flex; justify-content:center; align-items:center; padding-block:var(--space-3); color:var(--gold-soft); } .zellige-divider svg{ width:120px; height:32px; overflow:visible; } .zellige-divider path{ fill:none; stroke:currentColor; stroke-width:1; stroke-dasharray:300; stroke-dashoffset:300; animation:draw 1.6s var(--ease) forwards; } @keyframes draw{ to{ stroke-dashoffset:0; } } .star-watermark{ position:absolute; inset:0; pointer-events:none; opacity:.06; z-index:0; background-repeat:repeat; background-size:140px 140px; } /* ---------- 5. Header / Nav ---------- */ .site-header{ position:sticky; top:0; z-index:100; background:rgba(247,243,236,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--stone-line); } .site-header__bar{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--space-2); } .brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-size:var(--step-1); color:var(--forest); } .brand small{ display:block; font-family:var(--font-body); font-size:.55rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); } .nav{ display:none; } @media(min-width:960px){ .nav{ display:flex; gap:var(--space-3); } .nav a{ font-size:var(--step--1); letter-spacing:.03em; color:var(--forest); position:relative; padding-block:.3em; } .nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease); } .nav a:hover::after, .nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; } } .has-dropdown{ position:relative; } .dropdown-toggle{ background:none; border:0; font:inherit; color:var(--forest); font-size:var(--step--1); letter-spacing:.03em; padding-block:.3em; display:inline-flex; align-items:center; gap:.3em; } .dropdown-toggle::after{ content:"▾"; font-size:.7em; color:var(--gold-soft); } .dropdown{ position:absolute; top:100%; inset-inline-start:0; min-width:220px; background:var(--white); border:1px solid var(--stone-line); box-shadow:0 20px 40px -20px rgba(10,31,20,.3); padding:.5rem 0; opacity:0; visibility:hidden; transform:translateY(6px); transition:all .25s var(--ease); z-index:50; } .has-dropdown:hover .dropdown, .has-dropdown.is-open .dropdown{ opacity:1; visibility:visible; transform:none; } .dropdown li a{ display:block; padding:.55rem 1.1rem; font-size:var(--step--1); color:var(--forest); } .dropdown li a:hover{ background:var(--bg-alt); color:var(--gold-soft); } .header-actions{ display:flex; align-items:center; gap:var(--space-2); } .mobile-nav__lang{ margin-top:var(--space-2); margin-bottom:var(--space-2); padding-bottom:var(--space-2); border-bottom:1px solid rgba(247,243,236,.15); } .mobile-nav__lang .btn{ padding:.5em 1em; font-size:var(--step--1); } /* ---- Mobile header hardening (320px–768px) ---- */ @media(max-width:700px){ .site-header__bar{ flex-wrap:nowrap; gap:.4rem; } .header-actions{ gap:.4rem; } .header-actions .lang-switch{ display:none; } /* full switcher lives in the mobile-nav drawer */ .brand small{ display:none; } .header-actions > .btn--gold{ display:none; } .brand{ font-size:var(--step-0); gap:.4rem; min-width:0; } .brand span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:44vw; } } @media(max-width:480px){ .btn--gold{ padding:.65em 1em; font-size:.78rem; } } @media(max-width:640px){ .section{ padding-block:var(--space-4); } .section--tight{ padding-block:var(--space-3); } .btn{ white-space:normal; text-align:center; } h1{ font-size:clamp(2.1rem, 8vw, 3rem); } h2{ font-size:clamp(1.7rem, 7vw, 2.4rem); } .hero__cta{ flex-direction:column; align-items:stretch; } .hero__cta .btn{ width:100%; } } .lang-switch{ display:flex; gap:.4rem; font-size:var(--step--1); } .lang-switch a{ padding:.2rem .5rem; border:1px solid var(--stone-line); border-radius:var(--radius-sm); color:var(--forest); } .lang-switch a[aria-current="true"]{ background:var(--forest); color:var(--ivory); border-color:var(--forest); } .nav-toggle{ display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; padding:10px; min-width:44px; min-height:44px; align-items:center; justify-content:center; } .nav-toggle span{ width:22px; height:1.5px; background:var(--forest); } @media(min-width:960px){ .nav-toggle{ display:none; } } .mobile-nav{ display:none; position:fixed; inset:0; z-index:200; background:var(--forest); color:var(--ivory); padding:var(--space-4) var(--space-3); overflow-y:auto; -webkit-overflow-scrolling:touch; } .mobile-nav.is-open{ display:block; } .mobile-nav a{ display:block; padding:.8rem 0; font-family:var(--font-display); font-size:var(--step-2); border-bottom:1px solid rgba(247,243,236,.15); } .mobile-nav__close{ background:none; border:0; color:var(--ivory); font-size:1.8rem; position:absolute; top:1.2rem; inset-inline-end:1.2rem; } /* ---------- 6. Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:.6em; justify-content:center; padding:.85em 1.9em; font-size:var(--step--1); letter-spacing:.04em; border-radius:var(--radius-sm); border:1px solid transparent; transition:all .3s var(--ease); white-space:nowrap; } .btn--primary{ background:var(--forest); color:var(--ivory); border-color:var(--forest); } .btn--primary:hover{ background:var(--forest-deep); } .btn--gold{ background:var(--gold); color:var(--forest-deep); border-color:var(--gold); font-weight:600; } .btn--gold:hover{ background:var(--gold-soft); } .btn--outline{ background:transparent; border-color:var(--forest); color:var(--forest); } .btn--outline:hover{ background:var(--forest); color:var(--ivory); } .btn--ghost-invert{ background:transparent; border-color:rgba(247,243,236,.5); color:var(--ivory); } .btn--ghost-invert:hover{ border-color:var(--gold); color:var(--gold); } /* ---------- 7. Hero ---------- */ .hero{ position:relative; min-height:88svh; display:flex; align-items:flex-end; color:var(--ivory); overflow:hidden; background:var(--forest); } .hero__media{ position:absolute; inset:0; z-index:0; overflow:hidden; } .hero__media img{ width:100%; height:100%; object-fit:cover; animation:heroZoom 22s ease-in-out infinite alternate; } .hero-video{ width:100%; height:100%; object-fit:cover; animation:heroZoom 30s ease-in-out infinite alternate; background:var(--forest-deep); } @keyframes heroZoom{ from{ transform:scale(1); } to{ transform:scale(1.08); } } /* ---------- Photo band (full-width real-photo showcase between sections) ---------- */ .photo-band{ max-width:var(--container); margin:0 auto; padding-inline:var(--space-3); } .photo-band img{ width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:var(--radius-md); box-shadow:0 30px 60px -30px rgba(11,30,61,.35); } @media(max-width:640px){ .photo-band img{ aspect-ratio:4/3; } } .hero__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(6,19,9,.55) 0%, rgba(6,19,9,.35) 40%, rgba(6,19,9,.92) 100%); } .hero__content{ position:relative; z-index:2; padding-block:var(--space-5); } .hero h1{ color:var(--ivory); max-width:16ch; } .hero .lede{ color:var(--stone); max-width:52ch; } .hero__cta{ margin-top:var(--space-3); } .hero__scroll-hint{ position:absolute; bottom:var(--space-2); inset-inline-start:50%; transform:translateX(-50%); z-index:2; width:1px; height:44px; background:linear-gradient(var(--gold), transparent); } /* ---------- 8. Cards ---------- */ .card{ background:var(--white); border:1px solid var(--stone-line); padding:var(--space-3); transition:transform .35s var(--ease), box-shadow .35s var(--ease); } .card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(10,31,20,.25); } .card__icon{ width:40px; height:40px; margin-bottom:var(--space-2); color:var(--gold-soft); } .service-hero-icon{ width:56px; height:56px; color:var(--gold); padding:14px; border:1px solid rgba(212,175,55,.4); border-radius:50%; margin-bottom:var(--space-2); } .card--city{ position:relative; overflow:hidden; aspect-ratio:4/5; border:0; } .card--city img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .card--city:hover img{ transform:scale(1.06); } .card--city .card__label{ position:absolute; inset-inline:0; bottom:0; padding:var(--space-3); background:linear-gradient(0deg, rgba(6,19,9,.85), transparent); color:var(--ivory); } .card--city .card__label span{ font-size:var(--step--1); color:var(--gold); letter-spacing:.08em; text-transform:uppercase; } /* Horizontal city gallery — boutique brochure feel, not a static grid */ .city-scroll{ display:flex; gap:var(--space-3); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:var(--space-2); -webkit-overflow-scrolling:touch; } .city-scroll .card--city{ flex:0 0 78%; scroll-snap-align:start; } @media(min-width:700px){ .city-scroll .card--city{ flex-basis:32%; } } /* ---------- 9. Social proof (honest — no fabricated reviews) ---------- */ .social-proof{ display:grid; gap:var(--space-4); align-items:center; } @media(min-width:820px){ .social-proof{ grid-template-columns:1.1fr 1fr; gap:var(--space-5); } } .social-proof__stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-2); background:var(--white); border:1px solid var(--stone-line); border-radius:var(--radius-md); padding:var(--space-3); } @media(min-width:480px){ .social-proof__stats{ grid-template-columns:repeat(4,1fr); } } .stat-block{ text-align:center; } .stat-block__num{ font-family:var(--font-display); font-size:var(--step-3); color:var(--forest); } .stat-block__label{ font-size:var(--step--1); color:#5B6472; margin-top:.25rem; } /* ---------- 10. FAQ accordion ---------- */ .faq-item{ border-bottom:1px solid var(--stone-line); } .faq-item__q{ width:100%; text-align:start; background:none; border:0; padding:var(--space-2) 0; display:flex; justify-content:space-between; align-items:center; gap:var(--space-2); font-family:var(--font-display); font-size:var(--step-1); color:var(--forest); } .faq-item__q .plus{ font-size:1.4em; color:var(--gold-soft); transition:transform .3s var(--ease); flex-shrink:0; } .faq-item[open] .plus{ transform:rotate(45deg); } .faq-item__a{ padding-bottom:var(--space-2); color:#4B5348; max-width:65ch; } /* ---------- 11. Forms ---------- */ .form{ display:grid; gap:var(--space-2); } .form__row{ display:grid; gap:var(--space-2); } @media(min-width:640px){ .form__row--2{ grid-template-columns:1fr 1fr; } } .field{ display:flex; flex-direction:column; gap:.4rem; } .field label{ font-size:var(--step--1); letter-spacing:.03em; color:var(--forest); } .field input, .field select, .field textarea{ border:1px solid var(--stone-line); background:var(--white); padding:.8em .9em; border-radius:var(--radius-sm); color:var(--ink); } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold-soft); } .field textarea{ resize:vertical; min-height:110px; } .form__status{ font-size:var(--step--1); margin-top:.5rem; } .form__status[data-state="success"]{ color:#2E6B3E; } .form__status[data-state="error"]{ color:#9C3B3B; } .form__status[data-state="sending"]{ color:var(--gold-soft); } /* ---------- 12. Footer ---------- */ .site-footer{ background:var(--surface-dark); color:var(--stone); padding-block:var(--space-5) var(--space-3); } .site-footer a:hover{ color:var(--gold); } .site-footer h4{ color:var(--ivory); font-size:var(--step-0); margin-bottom:var(--space-2); } .footer-grid{ display:grid; gap:var(--space-4); } @media(min-width:760px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr; } } .footer-bottom{ border-top:1px solid rgba(247,243,236,.12); margin-top:var(--space-4); padding-top:var(--space-3); display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:space-between; font-size:var(--step--1); color:#8FA093; } /* ---------- 13. WhatsApp floating action ---------- */ .wa-float{ position:fixed; z-index:300; bottom:18px; inset-inline-end:18px; width:56px; height:56px; border-radius:50%; background:#1FAF52; display:flex; align-items:center; justify-content:center; gap:.5rem; box-shadow:0 10px 25px -8px rgba(0,0,0,.4); animation:pulse 2.6s ease-in-out infinite; text-decoration:none; overflow:hidden; transition:width .3s var(--ease), border-radius .3s var(--ease); } .wa-float svg{ width:28px; height:28px; flex-shrink:0; } .wa-float__label{ display:none; color:#fff; font-size:.85rem; font-weight:600; white-space:nowrap; padding-inline-end:.3rem; } @media(min-width:820px){ .wa-float{ width:auto; padding-inline:18px; border-radius:32px; } .wa-float__label{ display:inline-block; } } @keyframes pulse{ 0%,100%{ box-shadow:0 10px 25px -8px rgba(31,175,82,.5);} 50%{ box-shadow:0 10px 30px -6px rgba(31,175,82,.75);} } /* ---------- 14. Breadcrumbs ---------- */ .breadcrumb{ font-size:var(--step--1); color:#4B5348; padding-block:var(--space-2); } .breadcrumb a{ color:var(--gold-soft); } .breadcrumb span[aria-hidden]{ margin-inline:.5em; } /* ---------- 15. Utility ---------- */ .mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)} .mb-0{margin-bottom:0} .text-center{ text-align:center; } .center-col{ max-width:70ch; margin-inline:auto; text-align:center; } [data-lazy]{ background:var(--stone); } /* Lazy-load fade-in handled by js/main.js toggling this class */ img.is-loaded{ animation:fadeIn .5s var(--ease); } @keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } } /* Scroll reveal */ [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); } [data-reveal].is-visible{ opacity:1; transform:none; }