/* ========================================================================== SAHARA NIGHT CAMP — Main Stylesheet Brand: Deep Navy #0D1B2A | Gold #C8912F | Cormorant Garamond + Raleway ========================================================================== */ /* -------------------------------------------------------------------------- DESIGN TOKENS -------------------------------------------------------------------------- */ :root { /* Brand Colors — extracted from official logo */ --navy: #0D1B2A; --navy-deep: #081320; --navy-mid: #122233; --navy-light: #1A2E42; --gold: #C8912F; --gold-light: #D4A843; --gold-pale: #E8C87A; --gold-dark: #A07224; --gold-glow: rgba(200, 145, 47, 0.20); /* Neutrals */ --white: #FFFFFF; --cream: #FAF6EE; --linen: #F2EAD8; --sand: #E8DCC8; --warm-gray: #9E9080; --text-dark: #1C1410; --text-mid: #4A3F35; --text-light: #6B5D4F; --text-muted: #7D6E5D; /* Shadows */ --shadow-sm: 0 4px 16px rgba(13, 27, 42, 0.08); --shadow-md: 0 12px 40px rgba(13, 27, 42, 0.12); --shadow-lg: 0 24px 70px rgba(13, 27, 42, 0.18); --shadow-gold: 0 8px 40px rgba(200, 145, 47, 0.25); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06); /* Typography */ --font-heading: 'Cormorant Garamond', 'Georgia', serif; --font-display: 'Playfair Display', 'Georgia', serif; --font-body: 'Raleway', 'Helvetica Neue', Arial, sans-serif; --font-label: 'Raleway', sans-serif; /* Type Scale */ --text-xs: 0.65rem; --text-sm: 0.82rem; --text-base: 1rem; --text-lg: 1.15rem; --text-xl: 1.4rem; --text-2xl: 1.8rem; --text-3xl: 2.4rem; --text-4xl: 3.2rem; --text-5xl: 4.2rem; --text-6xl: 5.5rem; --text-hero: clamp(3rem, 7vw, 5.8rem); /* Spacing */ --sp-xs: 0.5rem; --sp-sm: 1rem; --sp-md: 2rem; --sp-lg: 3.5rem; --sp-xl: 6rem; --sp-2xl: 9rem; --sp-3xl: 12rem; /* Borders */ --border-gold: 1px solid rgba(200, 145, 47, 0.3); --border-light: 1px solid rgba(13, 27, 42, 0.08); --border-white: 1px solid rgba(255, 255, 255, 0.12); /* Radii */ --radius-none: 0; /* Transitions */ --ease-luxury: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --t-fast: 0.2s var(--ease-luxury); --t-base: 0.4s var(--ease-luxury); --t-slow: 0.7s var(--ease-luxury); /* Layout */ --container: 1380px; --header-h: 90px; } /* -------------------------------------------------------------------------- RESET & BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; /* #header is position:fixed and transparent until scrolled (see #header / #header.scrolled below), and it fades+slides in on load via the headerEntrance animation. Neither nor previously declared a background, so the browser's default white canvas was whatever sat behind the header for that split second — visible as a thin white bar above/behind it during load and during fast scroll-to-top. Matching the canvas to the site's darkest surface means any such gap reads as dark, never white; body's own section backgrounds always paint over this everywhere else, so it's invisible in normal use. */ background-color: var(--navy-deep); } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: 1.75; color: var(--text-dark); background-color: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; filter: saturate(1.08) contrast(1.03) brightness(0.99); } .header-logo img, .footer-brand-logo { filter: none; } a { color: var(--gold); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--gold-light); } ul, ol { list-style: none; } button { font-family: var(--font-body); cursor: pointer; border: none; background: none; } input, textarea, select { font-family: var(--font-body); } /* -------------------------------------------------------------------------- GLOBAL POLISH — selection, focus, scrollbar -------------------------------------------------------------------------- */ ::selection { background: var(--gold); color: var(--navy); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .btn:focus-visible, .social-link:focus-visible, .contact-method-icon:focus-visible { outline-offset: 4px; } /* -------------------------------------------------------------------------- SKIP LINK — hidden until keyboard-focused, lets keyboard/screen-reader users bypass the header nav and jump straight to page content. -------------------------------------------------------------------------- */ .skip-link { position: fixed; top: -60px; left: 1rem; z-index: 10000; background: var(--navy); color: var(--gold) !important; font-family: var(--font-label); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.9rem 1.6rem; border: 1px solid rgba(200,145,47,0.4); transition: top var(--t-fast); } .skip-link:focus { top: 1rem; } html { scrollbar-width: thin; scrollbar-color: var(--gold) var(--cream); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--cream); } ::-webkit-scrollbar-thumb { background: var(--gold); border: 2px solid var(--cream); } ::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); } /* -------------------------------------------------------------------------- TYPOGRAPHY -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; line-height: 1.15; letter-spacing: 0.01em; color: var(--navy); } h1 { font-size: clamp(2.8rem, 5.5vw, 5rem); } h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); } h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); } h4 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); } p { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.85; color: var(--text-mid); } .label { display: inline-block; font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); } .lead { font-size: var(--text-lg); line-height: 1.7; color: var(--text-mid); font-weight: 300; } /* -------------------------------------------------------------------------- LAYOUT UTILITIES -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: 2.5rem; padding-right: 2.5rem; } .section { position: relative; overflow: hidden; } /* -------------------------------------------------------------------------- GOLD DIVIDER -------------------------------------------------------------------------- */ .gold-divider { display: flex; align-items: center; gap: 1rem; margin: 1rem 0; } .gold-divider--center { justify-content: center; } .gold-divider--left { justify-content: flex-start; } .gold-divider::before, .gold-divider::after { content: ''; flex: 1; max-width: 70px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); } .gold-divider::after { background: linear-gradient(90deg, var(--gold), transparent); } .gold-divider--left::before { display: none; } .gold-divider--left::after { background: linear-gradient(90deg, var(--gold), transparent); } .gold-divider-dot { color: var(--gold); font-size: 0.55rem; letter-spacing: 3px; } /* -------------------------------------------------------------------------- SECTION HEADER -------------------------------------------------------------------------- */ .section-header { text-align: center; margin-bottom: 4.5rem; } .section-header .label { margin-bottom: 1.2rem; } .section-header h2 { margin-bottom: 0; } .section-header .gold-divider { margin: 1.2rem auto 1.5rem; } .section-header p { max-width: 580px; margin: 0 auto; } /* -------------------------------------------------------------------------- BUTTONS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; padding: 1.05rem 2.6rem; border: 1.5px solid transparent; position: relative; overflow: hidden; transition: all var(--t-base), letter-spacing var(--t-base); white-space: nowrap; cursor: pointer; } .btn:hover { letter-spacing: 0.26em; } .btn::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.07); opacity: 0; transition: opacity var(--t-fast); } .btn:hover::after { opacity: 1; } .btn--gold { background: var(--gold); color: var(--navy) !important; border-color: var(--gold); } .btn--gold:hover { background: var(--gold-light); border-color: var(--gold-light); box-shadow: var(--shadow-gold); transform: translateY(-2px); color: var(--navy) !important; } .btn--outline-gold { background: transparent; color: var(--gold) !important; border-color: var(--gold); } .btn--outline-gold:hover { background: var(--gold); color: var(--navy) !important; box-shadow: var(--shadow-gold); transform: translateY(-2px); } .btn--outline-white { background: transparent; color: var(--white) !important; border-color: rgba(255,255,255,0.55); } .btn--outline-white:hover { border-color: var(--white); background: rgba(255,255,255,0.08); transform: translateY(-2px); color: var(--white) !important; } .btn i { font-size: 0.85em; } /* -------------------------------------------------------------------------- HEADER -------------------------------------------------------------------------- */ #header { position: fixed; top: 0; left: 0; right: 0; z-index: 9000; height: var(--header-h); transition: all var(--t-base); /* Always paint something here, even before .scrolled is toggled by JS. A fully transparent (rgba(0,0,0,0)) header has nothing of its own to show, so it depends entirely on the hero/page-hero behind it already being painted at the exact same instant — any gap in that timing (load, animation, caching of an older stylesheet) exposes bare canvas above the header instead. This gradient is subtle enough to preserve the "transparent over the hero" look while guaranteeing the header is never literally empty. */ background: linear-gradient(to bottom, rgba(8, 19, 32, 0.55) 0%, rgba(8, 19, 32, 0) 100%); } #header.scrolled { height: 72px; background: rgba(8, 19, 32, 0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 2px 50px rgba(0,0,0,0.35); } .header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } /* Logo */ .header-logo { flex-shrink: 0; display: flex; align-items: center; } .header-logo img { height: 72px; width: auto; transition: height var(--t-base); } #header.scrolled .header-logo img { height: 52px; } /* Primary Nav */ .header-nav { display: flex; align-items: center; gap: 3rem; } .nav-links { display: flex; align-items: center; gap: 2.8rem; } .nav-link { font-family: var(--font-label); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.78); position: relative; padding-bottom: 4px; transition: color var(--t-fast); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.35s var(--ease-luxury); } .nav-link:hover, .nav-link.active { color: var(--gold); } .nav-link:hover::after, .nav-link.active::after { width: 100%; } /* Language switcher */ .lang-switcher { display: flex; align-items: center; gap: 4px; } .lang-btn { font-family: var(--font-label); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.45); padding: 4px 6px; border: none; background: none; cursor: pointer; transition: color var(--t-fast); line-height: 1; } .lang-btn.active, .lang-btn:hover { color: var(--gold); } .lang-sep { color: rgba(255,255,255,0.2); font-size: 0.6rem; line-height: 1; } /* Header CTA */ .header-cta { flex-shrink: 0; } /* Hamburger */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 9002; } .hamburger span { display: block; width: 24px; height: 1.5px; background: var(--white); transition: all 0.4s var(--ease-luxury); transform-origin: center; } .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile menu overlay */ .mobile-menu { display: none; position: fixed; inset: 0; z-index: 8999; background: var(--navy-deep); flex-direction: column; align-items: center; justify-content: center; gap: 0; opacity: 0; transform: translateX(100%); transition: opacity 0.45s var(--ease-luxury), transform 0.45s var(--ease-luxury); } .mobile-menu.open { opacity: 1; transform: translateX(0); } .mobile-menu.is-active { display: flex; } .mobile-nav-links { text-align: center; margin-bottom: 3rem; } .mobile-nav-links li { margin-bottom: 2rem; } .mobile-nav-link { font-family: var(--font-heading); font-size: clamp(2.2rem, 6vw, 3rem); font-weight: 300; color: var(--white); letter-spacing: 0.03em; display: block; transition: color var(--t-fast); } .mobile-nav-link:hover { color: var(--gold); } .mobile-lang { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2.5rem; } .mobile-lang a { font-family: var(--font-label); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45); transition: color var(--t-fast); } .mobile-lang a:hover, .mobile-lang a.active { color: var(--gold); } .mobile-lang-sep { color: rgba(255,255,255,0.2); font-size: 0.7rem; } /* -------------------------------------------------------------------------- HERO SECTION -------------------------------------------------------------------------- */ .hero { position: relative; height: 100vh; min-height: 680px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-bg { position: absolute; inset: -3%; background-size: cover; background-position: center center; background-repeat: no-repeat; will-change: transform; animation: heroKenBurns 22s ease-out infinite alternate; } /* Per-hero focal points — each source photo frames its subject differently, so a single "center center" clips the actual subject on wide/short or narrow/tall crops. .hero is height:100vh at every breakpoint, but the container's ASPECT RATIO still swings hugely: wide+short on desktop (crops the image's top/bottom) vs. narrow+tall on mobile (crops its left/right) — so for this near-centered aerial shot, desktop framing is mostly a vertical-position problem and mobile framing is mostly a horizontal one. Breakpoint overrides for mobile/small-mobile are in responsive.css. */ .hero-bg--home { background-position: 51% 49%; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 160deg, rgba(8, 19, 32, 0.78) 0%, rgba(13, 27, 42, 0.72) 45%, rgba(8, 19, 32, 0.88) 100% ); } .hero-content { position: relative; z-index: 2; text-align: center; padding: 0 2rem; max-width: 960px; } .hero-badge { display: inline-flex; align-items: center; gap: 0.8rem; font-family: var(--font-label); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(200,145,47,0.35); background: rgba(200,145,47,0.07); padding: 0.55rem 1.6rem; margin-bottom: 2.2rem; } .hero-badge::before, .hero-badge::after { content: '✦'; font-size: 0.45rem; color: var(--gold-pale); } .hero h1 { font-family: var(--font-heading); font-size: var(--text-hero); font-weight: 300; color: var(--white); line-height: 1.08; letter-spacing: 0.02em; margin-bottom: 1.5rem; text-shadow: 0 4px 40px rgba(0,0,0,0.3); } .hero h1 em { font-style: italic; color: var(--gold-pale); display: block; } .hero-lead { font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 300; color: rgba(255,255,255,0.75); max-width: 580px; margin: 0 auto 2.8rem; line-height: 1.8; } .hero-actions { display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap; } /* Scroll indicator */ .hero-scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; z-index: 2; cursor: pointer; } .hero-scroll-text { font-family: var(--font-label); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.4); } .hero-scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--gold), transparent); animation: scrollLine 1.8s ease-in-out infinite; } /* -------------------------------------------------------------------------- STRIP / MARQUEE SECTION -------------------------------------------------------------------------- */ .strip { background: var(--navy-deep); padding: 1.3rem 0; overflow: hidden; position: relative; border-top: 1px solid rgba(200,145,47,0.25); border-bottom: 1px solid rgba(200,145,47,0.25); } .strip::before, .strip::after { content: ''; position: absolute; top: 0; bottom: 0; width: 8%; min-width: 60px; z-index: 2; pointer-events: none; } .strip::before { left: 0; background: linear-gradient(to right, var(--navy-deep), transparent); } .strip::after { right: 0; background: linear-gradient(to left, var(--navy-deep), transparent); } .strip-inner { display: flex; align-items: center; gap: 3rem; white-space: nowrap; animation: marquee 42s linear infinite; } .strip-item { display: inline-flex; align-items: center; gap: 1.2rem; font-family: var(--font-label); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-pale); flex-shrink: 0; } .strip-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); opacity: 0.6; flex-shrink: 0; } /* -------------------------------------------------------------------------- ABOUT PREVIEW -------------------------------------------------------------------------- */ .about-preview { padding: var(--sp-2xl) 0; background: var(--cream); } .about-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7rem; align-items: center; } /* Image stack */ .about-images { position: relative; padding-bottom: 5rem; } .about-img-main { width: 78%; aspect-ratio: 3/4; object-fit: cover; position: relative; z-index: 1; } .about-img-secondary { position: absolute; bottom: 0; right: 0; width: 60%; aspect-ratio: 4/3; object-fit: cover; border: 8px solid var(--cream); z-index: 2; box-shadow: var(--shadow-lg); } .about-years-badge { position: absolute; top: 2rem; right: 4.5rem; z-index: 3; width: 110px; height: 110px; background: var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .about-years-num { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 600; color: var(--navy); line-height: 1; } .about-years-label { font-family: var(--font-label); font-size: 0.48rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); margin-top: 3px; } /* About Content */ .about-content h2 { margin: 0.8rem 0 1.6rem; line-height: 1.1; } .about-content p { margin-bottom: 1.5rem; } .about-content p:last-of-type { margin-bottom: 0; } /* Stats row */ .about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; padding: 2.5rem 0; margin: 2.5rem 0; border-top: var(--border-light); border-bottom: var(--border-light); } .stat-num { font-family: var(--font-heading); font-size: 2.8rem; font-weight: 600; color: var(--gold); line-height: 1; display: block; } .stat-label { font-family: var(--font-label); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-light); display: block; margin-top: 0.5rem; } /* -------------------------------------------------------------------------- ACCOMMODATION SECTION — Room Cards -------------------------------------------------------------------------- */ .accommodation { padding: var(--sp-2xl) 0; background: var(--navy); } .accommodation .section-header h2 { color: var(--white); } .accommodation .section-header p { color: rgba(255,255,255,0.55); } .room-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.2rem; } .room-card { position: relative; background: var(--navy-mid); border: 1px solid rgba(200,145,47,0.14); overflow: hidden; transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); flex: 1 1 300px; max-width: calc(33.333% - 1.47rem); } .room-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: rgba(200,145,47,0.4); } .room-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; } .room-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-luxury); } .room-card:hover .room-img { transform: scale(1.08); } .room-img-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,19,32,0.85) 0%, transparent 45%); } .room-content { padding: 2rem 2rem 2.4rem; } .room-title { font-family: var(--font-heading); font-size: clamp(1.5rem, 2vw, 1.9rem); font-weight: 400; color: var(--white); margin-bottom: 0.9rem; } .room-desc { font-size: 0.9rem; color: rgba(255,255,255,0.62); line-height: 1.7; margin: 0; } .room-divider { width: 36px; height: 1px; background: var(--gold); margin: 1.2rem 0; transition: width var(--t-base); } .room-card:hover .room-divider { width: 64px; } /* Room Configurations — available room types, presented as a clean, professional list rather than the per-photo capacity badges used previously. Room categories live here and in the booking form only. */ .room-types { margin-top: 4rem; padding-top: 3.5rem; border-top: 1px solid rgba(200,145,47,0.14); text-align: center; } .room-types-heading { font-family: var(--font-heading); font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 400; color: var(--white); margin-bottom: 0.8rem; } .room-types-intro { max-width: 620px; margin: 0 auto 2.2rem; color: rgba(255,255,255,0.55); font-size: 0.95rem; line-height: 1.75; } .room-types-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .room-types-item { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; border: 1px solid rgba(200,145,47,0.25); padding: 1.1rem 1.6rem; min-width: 150px; transition: border-color var(--t-base), background var(--t-base); } .room-types-item:hover { border-color: rgba(200,145,47,0.5); background: rgba(255,255,255,0.03); } .room-types-name { font-family: var(--font-label); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } .room-types-note { font-size: 0.82rem; color: rgba(255,255,255,0.55); } /* -------------------------------------------------------------------------- FEATURES / WHY US -------------------------------------------------------------------------- */ .features { padding: var(--sp-2xl) 0; background: var(--white); } .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } .feature-card { padding: 3rem 2rem 2.5rem; border: 1px solid rgba(200,145,47,0.13); text-align: center; position: relative; transition: all var(--t-base); overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform 0.4s var(--ease-luxury); } .feature-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(200,145,47,0.04) 0%, transparent 60%); opacity: 0; transition: opacity var(--t-base); } .feature-card:hover { transform: translateY(-10px); border-color: rgba(200,145,47,0.3); box-shadow: var(--shadow-md); } .feature-card:hover::before { transform: scaleX(1); } .feature-card:hover::after { opacity: 1; } .feature-icon-wrap { width: 70px; height: 70px; background: rgba(200,145,47,0.07); border: 1px solid rgba(200,145,47,0.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.8rem; font-size: 1.5rem; color: var(--gold); position: relative; z-index: 1; transition: all var(--t-base); } .feature-card:hover .feature-icon-wrap { background: var(--gold); color: var(--navy); box-shadow: var(--shadow-gold); transform: scale(1.1); } .feature-card h3 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 400; color: var(--navy); margin-bottom: 1rem; position: relative; z-index: 1; } .feature-card p { font-size: 0.88rem; color: var(--text-light); line-height: 1.7; margin: 0; position: relative; z-index: 1; } /* -------------------------------------------------------------------------- GALLERY PREVIEW -------------------------------------------------------------------------- */ .gallery-preview { padding: var(--sp-2xl) 0; background: var(--linen); } .gallery-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 280px 280px; gap: 12px; margin-bottom: 3rem; } .gallery-mosaic-item { overflow: hidden; position: relative; cursor: pointer; } .gallery-mosaic-item:nth-child(1) { grid-column: 1 / 6; grid-row: 1 / 3; } .gallery-mosaic-item:nth-child(2) { grid-column: 6 / 10; grid-row: 1 / 2; } .gallery-mosaic-item:nth-child(3) { grid-column: 10 / 13;grid-row: 1 / 2; } .gallery-mosaic-item:nth-child(4) { grid-column: 6 / 9; grid-row: 2 / 3; } .gallery-mosaic-item:nth-child(5) { grid-column: 9 / 13; grid-row: 2 / 3; } .gallery-mosaic-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-luxury); } .gallery-mosaic-item:hover img { transform: scale(1.06); } .gallery-mosaic-overlay { position: absolute; inset: 0; background: rgba(13,27,42,0); transition: background var(--t-base); display: flex; align-items: center; justify-content: center; } .gallery-mosaic-item:hover .gallery-mosaic-overlay { background: rgba(13,27,42,0.42); } .gallery-zoom-btn { width: 56px; height: 56px; background: var(--gold); color: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; opacity: 0; transform: scale(0.5) rotate(-15deg); transition: all 0.35s var(--ease-spring); } .gallery-mosaic-item:hover .gallery-zoom-btn { opacity: 1; transform: scale(1) rotate(0deg); } /* -------------------------------------------------------------------------- TRUST SECTION — Why Choose Sahara Night Camp -------------------------------------------------------------------------- */ .trust { padding: var(--sp-2xl) 0; background: var(--navy-deep); position: relative; overflow: hidden; } .trust::before { content: '✦'; position: absolute; top: -3rem; left: 3%; font-family: var(--font-heading); font-size: 22rem; color: rgba(200,145,47,0.035); line-height: 1; pointer-events: none; user-select: none; } .trust .section-header h2 { color: var(--white); } .trust .section-header p { color: rgba(255,255,255,0.45); } .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .trust-card { background: rgba(255,255,255,0.035); border: 1px solid rgba(200,145,47,0.12); padding: 2.6rem 2.2rem; transition: all var(--t-base); position: relative; } .trust-card::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--gold); opacity: 0; transition: opacity var(--t-base); } .trust-card:hover { background: rgba(255,255,255,0.06); box-shadow: var(--shadow-gold); transform: translateY(-6px); } .trust-card:hover::before { opacity: 0.25; } .trust-icon { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(200,145,47,0.3); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--gold); margin-bottom: 1.6rem; transition: all var(--t-base); } .trust-card:hover .trust-icon { background: var(--gold); color: var(--navy); box-shadow: var(--shadow-gold); } .trust-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 500; color: var(--white); margin-bottom: 0.9rem; } .trust-text { font-size: 0.9rem; color: rgba(255,255,255,0.55); line-height: 1.75; margin: 0; } /* -------------------------------------------------------------------------- LOCATION SECTION -------------------------------------------------------------------------- */ .location { padding: var(--sp-2xl) 0; background: var(--white); } .location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; } /* Map, location tag and "Get Directions" button are laid out as a normal top-to-bottom flex stack with a single shared gap — not an absolutely positioned badge overlaid on the map. That absolute-positioning approach was the root cause of the tag overlapping the button: an absolutely positioned element is placed relative to its nearest positioned ancestor's full box, which here included the button below the map, not just the map image — so "bottom: 1.5rem" measured from the bottom of the whole block (button included) rather than the bottom of the map. align-items: flex-start keeps the tag and button shrink-to-fit instead of being stretched to the map's full width by the default flex cross-axis stretch. */ .location-map-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; } .location-map-frame { width: 100%; aspect-ratio: 4/3; overflow: hidden; } .location-map-frame iframe { width: 100%; height: 100%; border: none; display: block; } .location-tag { background: var(--navy); color: var(--gold); font-family: var(--font-label); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.7rem 1.2rem; display: flex; align-items: center; gap: 0.5rem; } .location-info h2 { margin: 0.8rem 0 1.5rem; } .location-info > p { margin-bottom: 2.5rem; } .location-details { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; } .location-item { display: flex; align-items: flex-start; gap: 1.2rem; } .location-item-icon { width: 44px; height: 44px; background: rgba(200,145,47,0.08); border: 1px solid rgba(200,145,47,0.2); display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; font-size: 0.95rem; transition: all var(--t-fast); } .location-item:hover .location-item-icon { background: var(--gold); color: var(--navy); } .location-item-text strong { font-family: var(--font-label); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); display: block; margin-bottom: 0.3rem; } .location-item-text span { font-size: 0.9rem; color: var(--text-light); line-height: 1.5; } /* -------------------------------------------------------------------------- CTA BANNER -------------------------------------------------------------------------- */ .cta-banner { padding: 9rem 0; position: relative; text-align: center; overflow: hidden; } .cta-banner-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-attachment: fixed; } .cta-banner-bg--home { /* Camp Life 8: bonfire/dining scene sits in the lower half under a tall dark sky. */ background-position: center 75%; } .cta-banner-bg--about { /* Camp Life 9: subject already fills most of the frame; a small downward nudge keeps it off the strip of empty sky at the very top. */ background-position: center 58%; } .cta-banner-overlay { position: absolute; inset: 0; background: rgba(8,19,32,0.82); } .cta-banner-content { position: relative; z-index: 1; } .cta-banner h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); color: var(--white); margin: 1rem 0 1.5rem; } .cta-banner p { color: rgba(255,255,255,0.62); max-width: 520px; margin: 0 auto 3rem; font-size: var(--text-lg); } .cta-banner-actions { display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap; } /* -------------------------------------------------------------------------- FOOTER -------------------------------------------------------------------------- */ #footer { background: var(--navy-deep); border-top: 1px solid rgba(200,145,47,0.12); padding: 6rem 0 0; } .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.4fr; gap: 4rem; padding-bottom: 5rem; border-bottom: 1px solid rgba(255,255,255,0.05); } .footer-brand-logo { height: 68px; width: auto; margin-bottom: 1.8rem; display: block; } .footer-brand p { font-size: 0.88rem; color: rgba(255,255,255,0.45); line-height: 1.85; max-width: 300px; margin-bottom: 2rem; } .social-links { display: flex; gap: 0.8rem; } .social-link { width: 38px; height: 38px; border: 1px solid rgba(200,145,47,0.22); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.45); font-size: 0.85rem; transition: all var(--t-fast); } .social-link:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); } .footer-col h3 { font-family: var(--font-label); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.8rem; } .footer-links li { margin-bottom: 0.9rem; } .footer-links a { font-size: 0.88rem; color: rgba(255,255,255,0.45); transition: all var(--t-fast); display: inline-block; } .footer-links a:hover { color: var(--gold); padding-left: 5px; } .footer-contact-item { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 1.2rem; } .footer-contact-icon { color: var(--gold); font-size: 0.85rem; flex-shrink: 0; margin-top: 2px; } .footer-contact-item span, .footer-contact-item a { font-size: 0.86rem; color: rgba(255,255,255,0.45); line-height: 1.5; transition: color var(--t-fast); } .footer-contact-item a:hover { color: var(--gold); } .footer-bottom { padding: 1.8rem 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-copy { font-size: 0.78rem; color: rgba(255,255,255,0.25); } .footer-copy a { color: var(--gold); opacity: 0.8; } .footer-bottom-lang { display: flex; align-items: center; gap: 0.6rem; } /* -------------------------------------------------------------------------- WHATSAPP FLOAT -------------------------------------------------------------------------- */ .whatsapp-float { position: fixed; bottom: 2.2rem; right: 2.2rem; width: 58px; height: 58px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.55rem; z-index: 8888; box-shadow: 0 6px 25px rgba(37,211,102,0.45); transition: all 0.3s var(--ease-spring); text-decoration: none; } .whatsapp-float:hover { transform: scale(1.12) translateY(-3px); box-shadow: 0 10px 35px rgba(37,211,102,0.6); color: var(--white); } .whatsapp-float .tooltip { position: absolute; right: 70px; background: var(--navy); color: var(--white); font-family: var(--font-label); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.5rem 1rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--t-fast); } .whatsapp-float:hover .tooltip { opacity: 1; } /* -------------------------------------------------------------------------- PAGE HERO (Interior Pages) -------------------------------------------------------------------------- */ .page-hero { position: relative; height: 56vh; min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; padding-top: var(--header-h); } .page-hero-bg { position: absolute; inset: -3%; background-size: cover; background-position: center; animation: heroKenBurns 26s ease-out infinite alternate; } /* Per-page focal points — see .hero-bg--home note above for why these aren't all "center". */ .page-hero-bg--about { /* Desert (55): tall night shot, the lit tent + palm sit low in the frame under a large starry sky — bias down or the crop shows empty sky. */ background-position: center 78%; } .page-hero-bg--gallery { /* Desert (62): aerial that fills the whole frame edge-to-edge; nudge slightly up to favor the lounge courtyard over the foreground palms. */ background-position: center 45%; } .page-hero-bg--contact { /* Desert (24): ~85% night sky, tents form a low band near the bottom — bias down hard or the crop shows nothing but blue sky. */ background-position: center 88%; } .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(8,19,32,0.9) 0%, rgba(13,27,42,0.5) 60%, rgba(8,19,32,0.3) 100% ); } /* -------------------------------------------------------------------------- GALLERY PAGE -------------------------------------------------------------------------- */ .gallery-section { padding: var(--sp-xl) 0 var(--sp-2xl); background: var(--cream); } .gallery-filters { display: flex; align-items: center; justify-content: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 3.5rem; } .filter-btn { font-family: var(--font-label); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-light); background: transparent; border: 1px solid rgba(200,145,47,0.25); padding: 0.65rem 1.6rem; cursor: pointer; transition: all var(--t-fast); } .filter-btn.active, .filter-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); } /* Masonry Layout */ .masonry-grid { columns: 3; column-gap: 14px; } .masonry-item { break-inside: avoid; margin-bottom: 14px; overflow: hidden; position: relative; cursor: pointer; display: block; } .masonry-item img { width: 100%; height: auto; display: block; transition: transform 0.7s var(--ease-luxury); } .masonry-item:hover img { transform: scale(1.06); } .masonry-overlay { position: absolute; inset: 0; background: rgba(13,27,42,0); display: flex; align-items: center; justify-content: center; transition: background var(--t-base); } .masonry-item:hover .masonry-overlay { background: rgba(13,27,42,0.45); } .masonry-item.hidden { display: none; } /* -------------------------------------------------------------------------- LIGHTBOX -------------------------------------------------------------------------- */ .lightbox { display: none; position: fixed; inset: 0; z-index: 99000; background: rgba(4,10,17,0.96); align-items: center; justify-content: center; animation: fadeIn 0.3s ease; } .lightbox.open { display: flex; } .lightbox-track { position: relative; max-width: 90vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; } .lightbox-img { max-width: 88vw; max-height: 86vh; object-fit: contain; display: block; animation: zoomIn 0.35s var(--ease-luxury); } .lightbox-close { position: absolute; top: 1.5rem; right: 2rem; width: 44px; height: 44px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); color: var(--white); font-size: 1.2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--t-fast); z-index: 2; } .lightbox-close:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); } .lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(200,145,47,0.1); border: 1px solid rgba(200,145,47,0.3); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; transition: all var(--t-fast); z-index: 2; } .lightbox-prev { left: -70px; } .lightbox-next { right: -70px; } .lightbox-prev:hover, .lightbox-next:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); } .lightbox-caption { position: absolute; bottom: -3rem; left: 0; right: 0; text-align: center; font-family: var(--font-label); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.4); } .lightbox-counter { position: absolute; top: 1.5rem; left: 2rem; font-family: var(--font-label); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; color: rgba(255,255,255,0.4); } /* -------------------------------------------------------------------------- CONTACT PAGE -------------------------------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 6rem; align-items: start; } .contact-methods { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 3rem; } .contact-method { display: flex; align-items: center; gap: 1.4rem; padding: 1.6rem 1.8rem; background: var(--white); border: 1px solid rgba(200,145,47,0.1); text-decoration: none; transition: all var(--t-base); } .contact-method:hover { border-color: rgba(200,145,47,0.35); box-shadow: var(--shadow-md); transform: translateX(4px); color: inherit; } .contact-method-icon { width: 52px; height: 52px; background: rgba(200,145,47,0.07); border: 1px solid rgba(200,145,47,0.2); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.15rem; flex-shrink: 0; transition: all var(--t-fast); } .contact-method:hover .contact-method-icon { background: var(--gold); color: var(--navy); } /* Contact Form */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .form-group { margin-bottom: 1.5rem; } /* Honeypot — off-screen rather than display:none/visibility:hidden, since unsophisticated bots specifically skip fields hidden that way. Real users never see or reach it (no visible position, removed from tab order). */ .form-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-input, .form-select, .form-textarea { width: 100%; padding: 1rem 1.2rem; background: var(--cream); border: 1px solid rgba(13,27,42,0.12); font-family: var(--font-body); font-size: 0.92rem; color: var(--navy); outline: none; transition: all var(--t-fast); -webkit-appearance: none; appearance: none; } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); font-size: 0.88rem; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--gold); background: var(--white); box-shadow: 0 0 0 3px rgba(200,145,47,0.1); } .form-input.error, .form-textarea.error { border-color: #C0392B; } .form-error-msg { display: block; min-height: 1.1em; margin-top: 0.4rem; font-size: 0.78rem; color: #C0392B; } .form-textarea { height: 155px; resize: vertical; } .form-submit { width: 100%; padding: 1.2rem; background: var(--navy); color: var(--gold); font-family: var(--font-label); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; border: 2px solid var(--navy); cursor: pointer; transition: all var(--t-base); display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 0.5rem; } .form-submit:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); } .form-privacy { font-size: 0.76rem; color: var(--text-muted); text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(13,27,42,0.07); } .form-privacy i { color: var(--gold); } /* -------------------------------------------------------------------------- BACK TO TOP BUTTON -------------------------------------------------------------------------- */ .back-to-top { position: fixed; bottom: 6.5rem; right: 2.2rem; width: 44px; height: 44px; background: var(--navy); border: 1px solid rgba(200,145,47,0.3); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; cursor: pointer; opacity: 0; transform: translateY(16px); transition: all 0.35s var(--ease-luxury); z-index: 8000; text-decoration: none; } .back-to-top.visible { opacity: 1; transform: translateY(0); } .back-to-top:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); } /* -------------------------------------------------------------------------- PAGE HERO — Additional Elements -------------------------------------------------------------------------- */ .page-hero-label { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; } .page-hero-label span { font-family: var(--font-label); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); } .page-hero-label i { color: var(--gold); font-size: 0.5rem; opacity: 0.7; } .page-hero-content { padding: 0 0 5rem; } .page-hero-content h1 { font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 300; color: var(--white); margin: 0 0 1rem; line-height: 1.08; letter-spacing: 0.02em; } .page-hero-content p { font-size: 1.05rem; color: rgba(255,255,255,0.55); font-weight: 300; max-width: 520px; margin: 0; } .page-hero-breadcrumb { position: absolute; bottom: 2rem; left: 0; right: 0; padding: 0 calc((100% - min(100%, 1380px)) / 2 + 2rem); display: flex; align-items: center; gap: 0.6rem; z-index: 2; } .page-hero-breadcrumb a, .page-hero-breadcrumb span { font-family: var(--font-label); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.38); text-decoration: none; transition: color var(--t-fast); } .page-hero-breadcrumb a:hover { color: var(--gold); } .page-hero-breadcrumb span[aria-current] { color: rgba(255,255,255,0.65); } .page-hero-breadcrumb i { color: var(--gold); font-size: 0.45rem; opacity: 0.5; } /* -------------------------------------------------------------------------- ABOUT PAGE — Story Section -------------------------------------------------------------------------- */ .story { background: var(--cream); } .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .story-images { position: relative; } .story-img-main { width: 100%; height: 620px; object-fit: cover; display: block; } .story-img-accent { position: absolute; bottom: -3rem; right: -3rem; width: 260px; height: 200px; object-fit: cover; border: 6px solid var(--white); box-shadow: var(--shadow-lg); } .story-content { } .story-content h2 { margin-bottom: 1.5rem; } .story-content p { margin-bottom: 1.2rem; color: var(--text-body); } .story-quote { margin-top: 2.5rem; padding: 2rem 2.2rem; border-left: 3px solid var(--gold); background: rgba(200,145,47,0.04); } .story-quote blockquote { margin: 0; } .story-quote blockquote p { font-family: var(--font-heading); font-size: 1.35rem; font-style: italic; color: var(--navy); margin: 0 0 0.8rem; line-height: 1.55; } .story-quote cite { font-family: var(--font-label); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-style: normal; } /* -------------------------------------------------------------------------- STATS BAND -------------------------------------------------------------------------- */ .stats-band { background: var(--navy); padding: 5rem 0; } .stats-band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; } .stats-band-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem; border: 1px solid rgba(200,145,47,0.1); transition: border-color var(--t-base); } .stats-band-item:hover { border-color: rgba(200,145,47,0.35); } .stats-band-item .stat-num { display: inline; font-family: var(--font-heading); font-size: 3.2rem; font-weight: 400; color: var(--gold); line-height: 1; } .stats-band-item .stat-unit { font-family: var(--font-heading); font-size: 2rem; color: var(--gold); vertical-align: super; line-height: 1; } .stats-band-item .stat-label { font-family: var(--font-label); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 0.5rem; } /* -------------------------------------------------------------------------- MISSION & VISION -------------------------------------------------------------------------- */ .mv { background: var(--white); } .mv .mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 1rem; } .mv-card { padding: 4rem 3.5rem; border-top: 3px solid var(--gold); } .mv-card--dark { background: var(--navy); } .mv-card--dark h3 { color: var(--white); } .mv-card--dark p { color: rgba(255,255,255,0.6); } .mv-card--light { background: var(--cream); } .mv-card h3 { font-size: 1.7rem; margin: 1rem 0 1.2rem; font-weight: 400; } .mv-card p { margin: 0; line-height: 1.75; } .mv-card-icon { width: 60px; height: 60px; border: 1px solid rgba(200,145,47,0.3); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.4rem; margin-bottom: 0.5rem; } /* -------------------------------------------------------------------------- VALUES -------------------------------------------------------------------------- */ /* Override .section's overflow:hidden — the last row's cards start translateY(45px) (from [data-reveal="up"]) before their scroll-reveal animation resolves. .section clips anything past its (untransformed) auto-height, so a not-yet-revealed card can get its bottom edge cut off here; with 6 cards this is the very last row, which is exactly the "last two disappear" symptom. Values has no decorative bleed content that needs clipping, so it's safe to allow overflow here. */ .values { background: var(--navy); overflow: visible; } .values .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .values .value-card { padding: 3rem 2.5rem; border: 1px solid rgba(200,145,47,0.12); text-align: left; transition: all var(--t-base); } .values .value-card:hover { border-color: rgba(200,145,47,0.4); background: rgba(255,255,255,0.03); transform: translateY(-4px); } .value-card-icon { width: 52px; height: 52px; background: rgba(200,145,47,0.1); border: 1px solid rgba(200,145,47,0.2); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.1rem; margin-bottom: 1.5rem; } .values .value-card h3 { font-family: var(--font-heading); color: var(--white); font-size: 1.15rem; margin-bottom: 0.8rem; font-weight: 500; } .values .value-card p { color: rgba(255,255,255,0.48); font-size: 0.9rem; margin: 0; line-height: 1.7; } /* -------------------------------------------------------------------------- TEAM -------------------------------------------------------------------------- */ .team { background: var(--cream); } /* -------------------------------------------------------------------------- OWNER SPOTLIGHT -------------------------------------------------------------------------- */ .owner-spotlight { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4.5rem; align-items: center; background: var(--white); box-shadow: var(--shadow-lg); } .owner-photo-wrap { height: 100%; min-height: 420px; overflow: hidden; } .owner-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } .owner-content { padding: 3rem 3.5rem 3rem 0; } .owner-role { display: block; font-family: var(--font-label); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem; } .owner-name { font-family: var(--font-heading); font-size: clamp(1.8rem, 2.4vw, 2.4rem); font-weight: 400; color: var(--navy); margin-bottom: 1.2rem; } .owner-bio { font-size: 0.95rem; color: var(--text-light); line-height: 1.8; margin-bottom: 1rem; } .owner-contact { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; } .owner-contact-btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-label); font-size: 0.78rem; font-weight: 600; color: var(--navy); border: var(--border-gold); padding: 0.85rem 1.4rem; transition: all var(--t-fast); } .owner-contact-btn i { color: var(--gold); } .owner-contact-btn:hover { background: var(--gold); color: var(--white); border-color: var(--gold); } .owner-contact-btn:hover i { color: var(--white); } /* -------------------------------------------------------------------------- ABOUT PAGE — Erg Chebbi Location Band -------------------------------------------------------------------------- */ .about-location { position: relative; padding: 10rem 0; overflow: hidden; } .about-location-bg { position: absolute; inset: 0; background-size: cover; /* Desert (52): camp sits in a mid-height band with dune horizon above and empty foreground sand below — nudge down slightly off the horizon. */ background-position: 48% 56%; } .about-location-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(8,19,32,0.88) 0%, rgba(8,19,32,0.55) 100% ); } .about-location-content { position: relative; z-index: 1; max-width: 740px; } .about-location-content h2 { color: var(--white); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; margin-bottom: 1.5rem; } .about-location-content > p { color: rgba(255,255,255,0.6); margin-bottom: 3rem; font-size: 1rem; line-height: 1.8; } .about-location-facts { display: flex; gap: 3rem; flex-wrap: wrap; } .about-location-fact { display: flex; flex-direction: column; gap: 0.4rem; } .about-location-fact-num { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 400; color: var(--gold); line-height: 1; } .about-location-fact-label { font-family: var(--font-label); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.4); } /* -------------------------------------------------------------------------- GALLERY PAGE — Masonry Caption & CTA -------------------------------------------------------------------------- */ .masonry-overlay { flex-direction: column; justify-content: center; gap: 1rem; } .masonry-caption { font-family: var(--font-label); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.75); opacity: 0; transform: translateY(6px); transition: all 0.3s ease 0.05s; } .masonry-item:hover .masonry-caption { opacity: 1; transform: translateY(0); } .masonry-item:hover .gallery-zoom-btn { opacity: 1; transform: scale(1) rotate(0deg); } .gallery-cta-text { font-family: var(--font-heading); font-size: 1.35rem; font-style: italic; color: var(--text-body); margin-bottom: 1.8rem; } /* -------------------------------------------------------------------------- CONTACT PAGE — Extra Styles -------------------------------------------------------------------------- */ .contact { background: var(--cream); } .contact-info-col { } .contact-methods h3 { font-size: 1.5rem; font-weight: 400; color: var(--navy); margin: 0 0 1.5rem; } .contact-method-text { display: flex; flex-direction: column; flex: 1; gap: 0.2rem; } .contact-method-text strong { font-family: var(--font-label); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy); } .contact-method-text span { font-size: 0.9rem; color: var(--text-light); } .contact-method--whatsapp .contact-method-icon { background: rgba(37,211,102,0.1); border-color: rgba(37,211,102,0.25); color: #25d366; } .contact-method--whatsapp:hover .contact-method-icon { background: #25d366; color: var(--white); border-color: #25d366; } .contact-method--static { pointer-events: none; } .contact-method--static:hover { transform: none; box-shadow: none; } .contact-method-arrow { color: var(--gold); font-size: 0.75rem; opacity: 0.5; transition: all var(--t-fast); flex-shrink: 0; } .contact-method:hover .contact-method-arrow { opacity: 1; transform: translateX(4px); } .contact-hours { background: var(--navy); padding: 2.5rem; margin-top: 2rem; } .contact-hours h4 { font-family: var(--font-label); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.5rem; } .contact-hours-grid { display: flex; flex-direction: column; gap: 0; } .contact-hours-grid > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); } .contact-hours-grid > div:last-child { border-bottom: none; } .hours-day { font-size: 0.83rem; color: rgba(255,255,255,0.45); flex: 1; } .hours-time { font-size: 0.83rem; color: var(--white); font-weight: 500; text-align: right; } .contact-social { margin-top: 2rem; } .contact-social h4 { font-family: var(--font-label); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy); margin: 0 0 1rem; } .contact-social-links { display: flex; gap: 0.8rem; } .contact-social-btn { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1.2rem; border: 1px solid rgba(200,145,47,0.2); font-family: var(--font-label); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-body); text-decoration: none; transition: all var(--t-fast); } .contact-social-btn:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); } .contact-social-btn i { font-size: 0.9rem; } /* Contact form header */ .contact-form-wrap { background: var(--white); box-shadow: var(--shadow-lg); border-top: 3px solid var(--gold); padding: 3.5rem; } .contact-form-header { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(13,27,42,0.07); } .contact-form-header h3 { font-size: 2rem; font-weight: 400; color: var(--navy); margin: 0 0 0.5rem; } .contact-form-header p { font-size: 0.9rem; color: var(--text-light); margin: 0; } .form-label { display: block; font-family: var(--font-label); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.6rem; } .form-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C8912F' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.2rem center; padding-right: 2.5rem; } /* Map Section */ .map-section { background: var(--white); padding-bottom: var(--sp-2xl); } .contact-map-frame { width: 100%; height: 480px; border: none; overflow: hidden; margin-bottom: 0; } .contact-map-frame iframe { width: 100%; height: 100%; border: none; display: block; } /* Getting Here */ .getting-here { padding: 5rem 0 0; } .getting-here h3 { font-size: 1.8rem; font-weight: 400; color: var(--navy); margin: 0 0 2.5rem; text-align: center; } .getting-here-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .getting-here-item { padding: 2.5rem 1.5rem; border: 1px solid rgba(13,27,42,0.08); transition: all var(--t-base); } .getting-here-item:hover { border-color: rgba(200,145,47,0.3); box-shadow: var(--shadow-md); } .getting-here-icon { width: 52px; height: 52px; background: rgba(200,145,47,0.07); border: 1px solid rgba(200,145,47,0.2); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.1rem; margin-bottom: 1.3rem; } .getting-here-item h4 { font-size: 1rem; color: var(--navy); margin: 0 0 0.8rem; font-weight: 600; } .getting-here-item p { font-size: 0.87rem; color: var(--text-light); margin: 0; line-height: 1.7; } /* FAQ */ .faq { background: var(--cream); } .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .faq-item { background: var(--white); border: 1px solid rgba(13,27,42,0.08); transition: all var(--t-fast); } .faq-item[open] { border-color: rgba(200,145,47,0.3); } .faq-question { list-style: none; padding: 1.6rem 2rem; cursor: pointer; font-family: var(--font-heading); font-size: 1.15rem; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 1rem; user-select: none; } .faq-question::-webkit-details-marker { display: none; } .faq-question::after { content: '+'; font-family: var(--font-body); font-size: 1.5rem; font-weight: 300; color: var(--gold); flex-shrink: 0; transition: transform var(--t-fast); } .faq-item[open] .faq-question::after { transform: rotate(45deg); } .faq-answer { padding: 0 2rem 1.8rem; border-top: 1px solid rgba(13,27,42,0.06); } .faq-answer p { font-size: 0.92rem; color: var(--text-light); margin: 1.2rem 0 0; line-height: 1.8; }