/* ========================================================================== ALFAREED FLY TRAVEL & TOURS — Design System / Additional CSS This whole file is written to be portable: paste it into WordPress Customizer → Additional CSS after the Elementor rebuild. Tailwind (via CDN, see of each page) handles layout/spacing; this file holds brand tokens + the handful of components Tailwind utilities alone can't express cleanly (pill nav, floating badges, placeholder images, etc). ========================================================================== */ :root{ --color-bg: #F7F1E8; /* cream page background */ --color-bg-soft: #EFE6D8; /* slightly deeper cream for banded sections */ --color-dark: #1E1710; /* espresso brown — header/footer/dark bands */ --color-dark-2: #2A2015; --color-gold: #A9752F; /* primary accent */ --color-gold-light:#C79A5D; /* secondary accent */ --color-gold-soft: #EADFC9; /* icon chip backgrounds */ --text-dark: #2B2118; --text-muted: #7A6F62; --white: #FFFFFF; --radius-lg: 28px; --radius-md: 20px; --radius-sm: 14px; --shadow-card: 0 12px 30px rgba(30,23,16,0.10); --shadow-float: 0 10px 24px rgba(30,23,16,0.18); --font-serif: 'Playfair Display', 'Georgia', serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; } html{ scroll-behavior:smooth; } body{ background: var(--color-bg); color: var(--text-dark); font-family: var(--font-sans); } h1,h2,h3,h4,.font-serif{ font-family: var(--font-serif); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } } /* ---------- Eyebrow label ---------- */ .eyebrow{ display:inline-block; font-family: var(--font-sans); font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color: var(--color-gold); margin-bottom:0.6rem; } /* ---------- Buttons (pill) ---------- */ .btn-pill{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.85rem 1.9rem; border-radius:999px; font-size:0.9rem; font-weight:600; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; white-space:nowrap; } .btn-pill:hover{ transform: translateY(-2px); box-shadow: var(--shadow-float); } .btn-gold{ background: var(--color-gold); color:#fff; } .btn-gold:hover{ background:#96652A; } .btn-white{ background:#fff; color: var(--text-dark); } .btn-outline{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.6); } .btn-outline-dark{ background:transparent; color: var(--text-dark); border:1.5px solid rgba(43,33,24,0.25); } .btn-sm{ padding:0.55rem 1.3rem; font-size:0.8rem; } /* ---------- Sticky pill header ---------- */ .site-header-bar{ background: var(--color-dark); border-radius:999px; box-shadow: var(--shadow-card); position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .site-brand{ display:inline-flex; align-items:center; gap:0.75rem; min-width:0; z-index:1; } .site-logo-mark{ width:52px; height:52px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,0.04); box-shadow: 0 8px 18px rgba(0,0,0,0.14); flex-shrink:0; display:block; } .site-brand-text{ line-height:1.1; } .footer-logo-mark{ width:42px; height:42px; border-radius:50%; object-fit:cover; background: rgba(255,255,255,0.06); box-shadow: 0 8px 18px rgba(0,0,0,0.14); } nav { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:2rem; z-index:2; } .nav-link{ color: rgba(255,255,255,0.75); font-size:0.88rem; font-weight:500; padding-bottom:4px; border-bottom:2px solid transparent; transition: color .15s ease, border-color .15s ease; white-space:nowrap; } .nav-link:hover, .nav-link.active{ color:#fff; border-color: var(--color-gold); } .icon-btn-gold{ width:42px; height:42px; border-radius:999px; background: var(--color-gold); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; } /* ---------- Cards ---------- */ .card{ background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .icon-chip{ width:56px; height:56px; border-radius:999px; background: var(--color-gold-soft); color: var(--color-gold); display:flex; align-items:center; justify-content:center; } /* ---------- Checklist ---------- */ .check-item{ display:flex; align-items:flex-start; gap:0.7rem; } .check-dot{ width:22px; height:22px; border-radius:999px; flex-shrink:0; margin-top:2px; background: var(--color-gold-soft); color: var(--color-gold); display:flex; align-items:center; justify-content:center; } /* ---------- Floating badge tags over images ---------- */ .badge-float{ position:absolute; background:#fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-float); padding:0.6rem 1rem; font-size:0.78rem; font-weight:600; color: var(--text-dark); display:flex; align-items:center; gap:0.5rem; } /* ---------- Dark stat band ---------- */ .stat-band{ background: var(--color-dark); color:#fff; border-radius: var(--radius-lg); } .stat-icon{ width:60px; height:60px; border-radius:999px; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; color: var(--color-gold-light); margin:0 auto 0.75rem; } /* ---------- Booking / search widget ---------- */ .booking-widget{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-float); } .booking-panel{ display:none; } .booking-panel.active{ display:block; } .booking-field{ border-right:1px solid rgba(43,33,24,0.08); min-height:72px; } .booking-field:last-of-type{ border-right:none; } .booking-field label{ display:block; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--text-muted); margin-bottom:0.15rem; } .booking-input{ width:100%; border:none; background:transparent; color: var(--text-dark); font-size:0.9rem; font-weight:600; padding:0.2rem 0; outline:none; appearance:none; -webkit-appearance:none; } .booking-input option{ color: var(--text-dark); } .booking-input::-webkit-calendar-picker-indicator { cursor:pointer; opacity:0.7; } .tab-pill{ padding:0.5rem 1.1rem; border-radius:999px; font-size:0.82rem; font-weight:600; color: var(--text-muted); } .tab-pill.active{ background: var(--color-dark); color:#fff; } /* ---------- Image placeholders (swap for real photography later) ---------- */ .img-ph{ position:relative; background: linear-gradient(135deg, #3A2E1E 0%, #1E1710 100%); display:flex; align-items:flex-end; overflow:hidden; color:#fff; } .img-ph.light{ background: linear-gradient(135deg, #E7DCC7 0%, #D8C7A6 100%); color: var(--text-dark); } .img-ph::before{ content:attr(data-label); font-size:0.72rem; letter-spacing:0.05em; font-weight:600; background: rgba(30,23,16,0.55); color:#fff; padding:0.5rem 0.8rem; border-radius: var(--radius-sm) 0 var(--radius-sm) 0; } .img-ph.light::before{ background: rgba(43,33,24,0.15); color: var(--text-dark); } /* ---------- Accordion (FAQ) ---------- */ .accordion-item{ background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .accordion-btn[aria-expanded="true"] .accordion-chevron{ transform: rotate(45deg); } .accordion-chevron{ transition: transform .2s ease; } .accordion-panel{ display:none; } .accordion-panel.open{ display:block; } /* ---------- Steps timeline ---------- */ .step-num{ width:46px; height:46px; border-radius:999px; background: var(--color-gold); color:#fff; display:flex; align-items:center; justify-content:center; font-family: var(--font-serif); font-weight:700; } /* ---------- Mobile nav drawer ---------- */ #mobile-menu{ display:none; } #mobile-menu.open{ display:block; } /* ---------- Utility ---------- */ .text-muted{ color: var(--text-muted); } .bg-cream-soft{ background: var(--color-bg-soft); } /* ===== Hosting-safe header fallback ===== */ .site-header-bar{min-height:70px !important;padding:9px 24px !important;background:#1E1710 !important;border-radius:999px !important;display:flex !important;align-items:center !important;} .site-brand{display:inline-flex !important;align-items:center !important;gap:12px !important;flex-shrink:0 !important;} .site-logo-mark{width:52px !important;height:52px !important;max-width:52px !important;min-width:52px !important;max-height:52px !important;object-fit:cover !important;border-radius:50% !important;display:block !important;} .site-brand-text{display:block !important;} @media (max-width:767px){.site-header-bar{min-height:58px !important;padding:8px 14px !important}.site-logo-mark{width:42px !important;height:42px !important;max-width:42px !important;min-width:42px !important;max-height:42px !important}}