/* * site.css — redesign-specific utilities that sit above aecons.css. * Owns: page-level decorative bands, button variants used in new homepage * sections, eyebrow labels, the savanna-sunset gradient, and a couple of * keyframes used only on the homepage. * * Tailwind utilities (and aecons.css motifs) cover most of what we need. * Everything here exists because it can't be expressed in a single class. */ /* Clip horizontal overflow site-wide so the off-canvas mobile drawer (fixed, translated +100% off-screen) cannot extend the document width and create a phantom sideways scroll. We use `clip` (not `hidden`) so `position: sticky` on the detail-page sidebars still works — `hidden` would establish a scroll container and break sticky. Applied to only — putting it on too breaks iOS Safari momentum scroll and can lock vertical scrolling on touch devices. */ html { overflow-x: clip; } @supports not (overflow-x: clip) { html { overflow-x: hidden; } } /* Horizontal scroll rails (snap carousels) must let vertical pan pass through on touch — otherwise the page feels stuck whenever a finger lands inside one. `pan-x pan-y` keeps swipe-scroll inside the rail working while letting the page scroll vertically; `overscroll-behavior-x: contain` keeps rail overscroll from leaking to the page. */ .snap-x, .overflow-x-auto { touch-action: pan-x pan-y; overscroll-behavior-x: contain; } /* ---------- Page-header / section-header (centered editorial block) -- */ /* Wraps an eyebrow, a big title, and a lead paragraph into a centered, max-width-constrained, beautifully-spaced header. Use on inner browse pages and homepage section intros. */ .page-header, .section-header { text-align: center; margin-left: auto; margin-right: auto; max-width: 56rem; /* keeps headlines from running too wide on desktop */ } .page-header { padding: 1.5rem 0 2rem; } .section-header { padding: 0 0 1.75rem; } /* The eyebrow's `::before` bar is a flex item — centering inline-flex inside a text-align:center parent already works. Just add a tiny gap above. */ .page-header > .section-eyebrow, .section-header > .section-eyebrow { margin-bottom: 1.1rem; } /* Title — uses Fraunces, scales fluidly, extra-bold. Overrides any inline tailwind text-Xxl utilities that may also be on the element. */ .page-header > h1, .page-header > .aec-h1, .section-header > h1, .section-header > h2, .section-header > .aec-h1, .section-header > .aec-h2 { font-family: "Fraunces", Georgia, serif; font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; margin-top: 0; margin-bottom: 0; text-wrap: balance; font-variation-settings: "opsz" 144, "SOFT" 100; } .page-header > h1, .page-header > .aec-h1 { font-size: clamp(2.75rem, 6.5vw, 5rem); } .section-header > h2, .section-header > .aec-h2 { font-size: clamp(2.25rem, 4.8vw, 3.75rem); } /* Lead / subtitle — centered, narrow column, larger than body text. */ .page-header > p, .page-header > .lead, .section-header > p, .section-header > .lead { margin: 1.1rem auto 0; max-width: 42rem; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; color: #2c2316; /* ebony-600 */ text-wrap: balance; } /* Optional decorative shuka strip just below the lead. */ .page-header::after, .section-header.with-shuka::after { content: ""; display: block; width: 88px; height: 4px; margin: 1.5rem auto 0; border-radius: 999px; background: linear-gradient(90deg, #7a1f18 0 22%, #fdfbf5 22% 24%, #0e2818 24% 38%, #c7972a 38% 42%, #9c2a20 42% 60%, #205536 60% 76%, #c7972a 76% 80%, #7a1f18 80% 100%); } /* Dark variant for hero-on-image / dark-section headers. */ .page-header.on-dark > p, .page-header.on-dark > .lead, .section-header.on-dark > p, .section-header.on-dark > .lead { color: rgba(253,251,245,0.9); } .page-header.on-dark > h1, .page-header.on-dark > .aec-h1, .section-header.on-dark > h1, .section-header.on-dark > h2, .section-header.on-dark > .aec-h1, .section-header.on-dark > .aec-h2 { color: #fdfbf5; } @media (max-width: 639px) { .page-header { padding: 1rem 0 1.5rem; } .section-header { padding: 0 0 1.25rem; } } /* ---------- Eyebrow label (used above section headings) -------------- */ .section-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #7a1f18; /* maasai-700, default for light surfaces */ } .section-eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #c0392b 0 30%, #c7972a 30% 60%, #2c7048 60% 100%); flex: 0 0 auto; } /* Dark-section variant — used on Countries, Videos, CTA where the bg is dark. Both the text and the bar lighten so the label is visible against ebony/acacia. */ .section-eyebrow.on-dark { color: #f5dd92; } /* savanna-200 */ .section-eyebrow.on-dark::before { background: linear-gradient(90deg, #f08d8d 0 30%, #f5dd92 30% 60%, #aedcb9 60% 100%); } /* ---------- Buttons --------------------------------------------------- */ /* Warm gradient CTA (terracotta → maasai) — used on hero + closing CTA. */ .btn-warm { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.6rem; border-radius: 9999px; font-weight: 700; color: #fdfbf5; background-image: linear-gradient(135deg, #c4582b 0%, #9c2a20 100%); box-shadow: 0 10px 28px -12px rgba(122, 31, 24, 0.55); transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms, filter 220ms; } .btn-warm:hover { transform: translateY(-1px); filter: saturate(1.08) brightness(1.04); box-shadow: 0 16px 38px -12px rgba(122, 31, 24, 0.55); } .btn-warm:active { transform: translateY(0); } /* Ghost (used as secondary on dark sections). */ .btn-ghost { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.5rem; border-radius: 9999px; font-weight: 600; color: #fdfbf5; background: rgba(253,251,245,0.08); border: 1px solid rgba(253,251,245,0.32); backdrop-filter: blur(2px); transition: background 200ms, border-color 200ms; } .btn-ghost:hover { background: rgba(253,251,245,0.16); border-color: rgba(253,251,245,0.55); } /* ---------- Background gradients ------------------------------------- */ .bg-savanna-sunset { /* Solid fallback in case the gradient fails or the rule is stale. */ background-color: #205536; background-image: radial-gradient(ellipse at top right, rgba(224,177,58,0.22), transparent 55%), linear-gradient(135deg, #2c7048 0%, #205536 45%, #1d160d 100%); } .bg-ivory-warm { background-image: radial-gradient(ellipse at top left, rgba(245,221,146,0.30), transparent 55%), linear-gradient(180deg, #fdfbf5 0%, #f6f1e3 100%); } /* ---------- Beadwork dot pattern (card-accent variant) --------------- */ .bg-beadwork { background-image: radial-gradient(circle at 4px 4px, rgba(122,31,24,0.16) 1.6px, transparent 1.6px), radial-gradient(circle at 14px 14px, rgba(199,151,42,0.14) 1.2px, transparent 1.2px); background-size: 20px 20px; } /* ---------- Shuka stripe divider (between sections) ------------------ */ .divider-shuka { height: 6px; width: 100%; background-image: linear-gradient(90deg, #7a1f18 0 14%, #fdfbf5 14% 16%, #0e2818 16% 30%, #c7972a 30% 34%, #9c2a20 34% 50%, #205536 50% 64%, #c7972a 64% 68%, #7a1f18 68% 84%, #fdfbf5 84% 86%, #0e2818 86% 100%); background-size: 280px 100%; background-repeat: repeat-x; } /* ---------- Sun pulse — homepage hero corner ornament ---------------- */ @keyframes aec-sun-pulse { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.42; } 50% { transform: scale(1.04) rotate(2deg); opacity: 0.55; } } .aec-sun-pulse { animation: aec-sun-pulse 9s ease-in-out infinite; transform-origin: center; } /* ---------- Soft fade-in for once-only intro sections ---------------- */ @keyframes aec-fade-in-up { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .aec-on-load { animation: aec-fade-in-up 700ms cubic-bezier(.2,.8,.2,1) both; } /* ---------- Reduced motion ------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .aec-sun-pulse { animation: none !important; } .aec-on-load { animation: none !important; } .btn-warm:hover { transform: none !important; } } /* ==================================================================== DETAIL PAGE SYSTEM — uniform 2-col layout with sticky right sidebar. Used by tours/destinations/country/blog/guides/gallery detail pages. ==================================================================== */ .detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } @media (min-width: 1024px) { .detail-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; } } .detail-main { min-width: 0; } .detail-aside { min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; } @media (min-width: 1024px) { .detail-aside { position: sticky; top: 5.5rem; align-self: start; max-height: calc(100vh - 6rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #e5dccb transparent; } .detail-aside::-webkit-scrollbar { width: 6px; } .detail-aside::-webkit-scrollbar-thumb { background: #e5dccb; border-radius: 3px; } } /* Middle content card — wraps the main column on detail pages so it reads as a distinct surface against the page background, mirroring the sidebar card chrome. Padding eases down on small screens. */ .detail-main-card { background: #fdfbf5; border: 1px solid #f0e7d0; border-radius: 1.25rem; padding: 1.25rem; box-shadow: 0 1px 0 rgba(20, 14, 6, 0.02), 0 10px 32px -18px rgba(20, 14, 6, 0.12); } @media (min-width: 640px) { .detail-main-card { padding: 1.75rem; } } @media (min-width: 1024px) { .detail-main-card { padding: 2.25rem; } } /* Uniform card chrome — every sidebar block uses this. */ .detail-card { background: #fdfbf5; border: 1px solid #f0e7d0; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 1px 0 rgba(20, 14, 6, 0.02), 0 4px 18px -10px rgba(20, 14, 6, 0.08); } .detail-card-title { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #7a1f18; margin: 0 0 0.75rem 0; display: flex; align-items: center; gap: 0.4rem; } .detail-card-title::before { content: ""; display: inline-block; width: 14px; height: 2px; background: linear-gradient(90deg, #c7972a, #7a1f18); border-radius: 2px; } /* Dark CTA card — savanna sunset gradient */ .detail-card-dark { background-color: #205536; background-image: radial-gradient(ellipse at top right, rgba(224,177,58,0.22), transparent 55%), linear-gradient(135deg, #2c7048 0%, #205536 60%, #14110a 100%); color: #fdfbf5; border: 1px solid rgba(253,251,245,0.08); border-radius: 1rem; padding: 1.25rem; box-shadow: 0 16px 38px -16px rgba(20, 14, 6, 0.45); } .detail-card-dark .detail-card-title { color: #f5dd92; } .detail-card-dark .detail-card-title::before { background: linear-gradient(90deg, #f5dd92, #fdfbf5); } /* Quick-fact list inside any card. */ .detail-facts { margin: 0; display: flex; flex-direction: column; font-size: 0.875rem; } .detail-facts > div { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0; border-top: 1px dashed #f0e7d0; } .detail-facts > div:first-child { border-top: 0; padding-top: 0; } .detail-facts dt { color: #6b5d44; font-weight: 500; flex: 0 0 auto; min-width: 0; } .detail-facts dd { color: #1b1612; font-weight: 700; text-align: right; margin: 0; flex: 1 1 auto; min-width: 0; word-break: break-word; } .detail-card-dark .detail-facts > div { border-color: rgba(253,251,245,0.12); } .detail-card-dark .detail-facts dt { color: rgba(253,251,245,0.7); } .detail-card-dark .detail-facts dd { color: #fdfbf5; } /* "On this page" TOC + scroll-spy */ .detail-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.875rem; } .detail-toc a { display: block; padding: 0.45rem 0.75rem; border-radius: 0.5rem; color: #4d4232; text-decoration: none; border-left: 2px solid transparent; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; line-height: 1.4; } .detail-toc a:hover { background: #faf3df; color: #7a1f18; border-left-color: #c7972a; } .detail-toc a.is-active { background: linear-gradient(90deg, rgba(199,151,42,0.16), transparent 70%); color: #205536; font-weight: 700; border-left-color: #205536; } /* Related-items list (in sidebar) */ .detail-related { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .detail-related a { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem; border-radius: 0.65rem; color: #1b1612; text-decoration: none; transition: background 160ms ease; } .detail-related a:hover { background: #faf3df; } .detail-related .thumb { width: 56px; height: 56px; flex-shrink: 0; border-radius: 0.5rem; overflow: hidden; background: #f0e7d0; border: 1px solid #f0e7d0; } .detail-related .thumb img { width: 100%; height: 100%; object-fit: cover; } .detail-related .meta { display: flex; flex-direction: column; min-width: 0; } .detail-related .meta strong { font-size: 0.875rem; font-weight: 700; color: #1b1612; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .detail-related .meta span { font-size: 0.72rem; color: #7a6b50; margin-top: 0.15rem; } /* Quick-info strip (under hero) */ .detail-quickinfo { border-top: 1px solid #f0e7d0; border-bottom: 1px solid #f0e7d0; background: #fdfbf5; } .detail-quickinfo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; padding: 1.1rem 0; } @media (min-width: 640px) { .detail-quickinfo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .detail-quickinfo-cell .label { font-size: 0.625rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #7a6b50; } .detail-quickinfo-cell .value { margin-top: 0.2rem; font-weight: 700; color: #1b1612; }