/* ============================================================ Local Zanzibar Tours — base.css Design tokens, reset, typography, nav, footer ============================================================ */ :root { /* Primary palette */ --cream: #F8F4ED; --cream-dark: #ECE5D6; --teal: #1F7F87; --teal-dark: #155E66; --saffron: #F5A623; --saffron-dark: #D4901B; --navy: #0F1A2E; --navy-soft: #3A4561; /* Spacing */ --space-xs: 0.4rem; --space-sm: 0.8rem; --space-md: 1.5rem; --space-lg: 3rem; --space-xl: 5rem; --space-2xl: 8rem; /* Shadows */ --shadow-card: 0 6px 28px rgba(15,26,46,0.07); --shadow-hover: 0 12px 32px rgba(15,26,46,0.10); --shadow-photo: 0 30px 60px -12px rgba(15,26,46,0.22), 0 12px 24px rgba(15,26,46,0.06); --shadow-modal: 0 30px 80px rgba(15,26,46,0.35); /* Radius */ --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; /* Motion: strong custom curves, never default easings */ --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); /* Typography: editorial serif for display, warm sans for body */ --font-display: 'Newsreader', 'Fraunces', Georgia, serif; --font-body: 'Figtree', 'DM Sans', sans-serif; } /* Soft cross-fade between pages (browsers that support it) */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--cream); color: var(--navy); line-height: 1.6; min-height: 100vh; overflow-x: hidden; position: relative; } /* Subtle grain texture */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 99; opacity: 0.06; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img { max-width: 100%; height: auto; } a { color: var(--teal); text-underline-offset: 3px; } /* Saffron text selection: a detail almost nobody notices, everybody feels */ ::selection { background: rgba(245, 166, 35, 0.35); color: var(--navy); } /* House-style scrollbar */ html { scrollbar-width: thin; scrollbar-color: var(--cream-dark) transparent; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--cream-dark); border-radius: 6px; border: 3px solid var(--cream); } ::-webkit-scrollbar-thumb:hover { background: var(--saffron); } /* ---------- Island-time ambience ---------- site.js sets data-island-time on from Zanzibar's clock (EAT). A faint wash of light follows the island's day: gold at dawn, clear teal daylight, amber at dusk, a deep veil at night. Visitors who return at another hour see a different island. */ html::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 2s ease; } html[data-island-time]::before { opacity: 1; } html[data-island-time="dawn"]::before { background: radial-gradient(120% 70% at 50% -10%, rgba(245, 166, 35, 0.10), transparent 60%); } html[data-island-time="day"]::before { background: radial-gradient(120% 70% at 50% -10%, rgba(31, 127, 135, 0.06), transparent 60%); } html[data-island-time="dusk"]::before { background: radial-gradient(120% 70% at 50% -10%, rgba(245, 166, 35, 0.14), transparent 60%), radial-gradient(80% 50% at 85% 10%, rgba(212, 144, 27, 0.07), transparent 55%); } html[data-island-time="night"]::before { background: linear-gradient(rgba(15, 26, 46, 0.08), rgba(15, 26, 46, 0.03) 40%, transparent 70%); } :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: var(--radius-sm); } .container { max-width: 1080px; margin: 0 auto; padding: 1.5rem 2rem 2rem; position: relative; z-index: 1; } /* ---------- Typography helpers ---------- */ .hero-display { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1.02; letter-spacing: -0.025em; color: var(--navy); margin-bottom: 1.8rem; } .hero-display em { font-style: italic; color: var(--teal); font-weight: 400; } .page-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 5.5vw, 3.8rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--navy); margin-bottom: 1.2rem; } .page-title em { font-style: italic; color: var(--teal); font-weight: 400; } .section-title { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; color: var(--navy); letter-spacing: -0.01em; } .subhead { font-size: 1.08rem; color: var(--navy-soft); line-height: 1.65; max-width: 580px; } .label { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--teal); font-weight: 600; } /* ---------- Pre-launch banner (injected by site.js when PRELAUNCH) ---------- */ .prelaunch-banner { background: var(--navy); color: var(--cream); text-align: center; padding: 0.55rem 2.5rem; font-size: 0.78rem; letter-spacing: 0.06em; position: relative; z-index: 501; } .prelaunch-banner em { font-family: var(--font-display); font-style: italic; color: var(--saffron); letter-spacing: 0; font-size: 0.92rem; } .prelaunch-banner a { color: var(--cream); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .prelaunch-banner a:hover { color: var(--saffron); } /* ---------- Site nav ---------- */ .site-nav { position: sticky; top: 0; z-index: 500; background: rgba(248, 244, 237, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cream-dark); } .site-nav-inner { max-width: 1080px; margin: 0 auto; padding: 0.8rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .nav-logo { display: inline-flex; align-items: center; } .nav-logo img { height: 44px; width: auto; display: block; } .nav-links { display: flex; align-items: center; gap: 1.8rem; list-style: none; } .nav-links a { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy); text-decoration: none; transition: color 0.25s ease; } .nav-links a:hover { color: var(--saffron-dark); } .nav-links a.active { color: var(--teal); } .nav-cta { background: var(--navy); color: var(--cream) !important; padding: 0.65rem 1.3rem; border-radius: var(--radius-md); transition: background-color 0.25s ease, color 0.25s ease, transform 160ms var(--ease-out-strong); } .nav-cta:hover { background: var(--saffron); color: var(--navy) !important; } .nav-cta:active { transform: scale(0.97); } /* Mobile nav */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.4rem; color: var(--navy); } .nav-toggle svg { width: 26px; height: 26px; display: block; } @media (max-width: 840px) { .nav-toggle { display: block; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--cream); border-bottom: 1px solid var(--cream-dark); box-shadow: var(--shadow-hover); padding: 0.5rem 0; } .nav-links.open { display: flex; } .nav-links li { width: 100%; } .nav-links a { display: block; padding: 0.9rem 2rem; } .nav-cta { margin: 0.5rem 2rem 0.8rem; display: inline-block; padding: 0.65rem 1.3rem; } } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--cream-dark); margin-top: var(--space-2xl); padding: 3.5rem 2rem 1.8rem; text-align: center; position: relative; z-index: 1; } /* Kanga ribbon along the footer's top edge */ .site-footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 8 L7 1.5 L14 8 Z' fill='%231F7F87'/%3E%3Cpath d='M14 0 L21 6.5 L28 0 Z' fill='%23F5A623'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 28px 8px; opacity: 0.4; } .footer-karibu { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--navy-soft); margin-bottom: 1.6rem; } .footer-karibu strong { font-style: normal; font-weight: 500; color: var(--saffron-dark); } .footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.6rem; margin-bottom: 1.8rem; list-style: none; } .footer-nav a { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy); text-decoration: none; transition: color 0.25s ease; } .footer-nav a:hover { color: var(--saffron-dark); } .socials { display: flex; justify-content: center; gap: 1.4rem; margin-bottom: 1.5rem; } .socials a { color: var(--navy); transition: color 0.25s ease, transform 0.25s ease; display: inline-flex; } .socials a:hover { color: var(--saffron-dark); transform: translateY(-2px); } .socials svg { width: 20px; height: 20px; } .contact { font-size: 0.92rem; color: var(--navy-soft); margin-bottom: 1rem; font-family: var(--font-display); } .contact a { color: var(--teal); text-decoration: none; font-weight: 500; border-bottom: 1px solid transparent; transition: border-color 0.3s ease; } .contact a:hover { border-color: var(--teal); } .copy { font-size: 0.7rem; color: var(--navy-soft); letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.55; } .copy a { color: inherit; } /* ---------- Animations ---------- */ @keyframes fadeIn { to { opacity: 1; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-up { opacity: 0; animation: fadeUp 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; } /* ---------- Scroll reveal (driven by site.js IntersectionObserver) ---------- */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-out-strong), transform 0.6s var(--ease-out-strong); } .reveal.revealed { opacity: 1; transform: translateY(0); } /* No JS? Show everything. */ .no-observer .reveal { opacity: 1; transform: none; } /* ---------- Horizon divider with dhow ---------- */ .horizon { display: flex; align-items: center; gap: 1.4rem; max-width: 720px; margin: 4.5rem auto; padding: 0 2rem; position: relative; z-index: 1; } .horizon .line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--cream-dark) 18%, var(--cream-dark) 82%, transparent); } .horizon .dhow { width: 58px; height: auto; color: var(--navy); opacity: 0.7; flex-shrink: 0; animation: dhowBob 7s var(--ease-in-out-strong) infinite; } .horizon .dhow .sail { color: var(--teal); } @keyframes dhowBob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-3px) rotate(1.5deg); } } /* ---------- Kanga strip: East African textile accent ---------- */ .kanga-strip { height: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 8 L7 1.5 L14 8 Z' fill='%231F7F87'/%3E%3Cpath d='M14 0 L21 6.5 L28 0 Z' fill='%23F5A623'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 28px 8px; opacity: 0.5; } .pillars-dark .kanga-strip, .kanga-strip.on-dark { opacity: 0.65; } /* ---------- "Right now on Zanzibar" live line ---------- */ .island-now { font-family: var(--font-display); font-size: 1rem; color: var(--navy-soft); margin-top: 1.6rem; display: block; min-height: 1.6em; } .island-now::before { content: ''; display: inline-block; width: 26px; height: 1.5px; background: var(--saffron); vertical-align: middle; margin-right: 0.75rem; } .island-now em { font-style: italic; color: var(--teal); } .island-now .t { color: var(--saffron-dark); font-style: italic; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }