accordions. They are now a plain
- of always-open
blocks: the itinerary is the page's primary content, so there is no
disclosure state, no summary, and nothing to click. Do not reintroduce a
collapsed default here — with CSS or JS off the days must still read top to
bottom, and a display:none anywhere in this block would break that. */
.ato-days {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
counter-reset: none;
}
.ato-day {
border: 1px solid var(--ato-border-color);
border-radius: var(--ato-radius-md);
background: var(--ato-bg-white);
overflow: hidden;
transition: var(--ato-transition);
}
/* Flow variant: every day is open, so it carries the emphasis that used to be
reserved for [open]. */
.ato-days--flow > .ato-day {
border-color: color-mix(in srgb, var(--ato-primary) 28%, var(--ato-border-color));
box-shadow: var(--ato-shadow-sm);
}
.ato-days--flow > .ato-day + .ato-day {
margin-top: 6px;
}
.ato-day__head {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px 10px;
}
/* .ato-day-badge is reused from ato-public.css; only the radius and size are
brought into line with the theme's restrained radius scale. */
.ato-day .ato-day-badge {
flex: 0 0 auto;
border-radius: var(--ato-radius-sm);
min-width: 66px;
padding: 6px 10px;
font-size: 10.5px;
letter-spacing: 0.14em;
color: var(--ato-bg-light);
}
.ato-day__title {
flex: 1 1 auto;
min-width: 0;
font-family: var(--ato-font-heading);
font-size: 21px;
font-weight: 600;
line-height: 1.25;
color: var(--ato-title-color);
margin: 0;
}
/* .ato-day-content is reused; it is a grid in the admin builder, reset here. */
.ato-day .ato-day-content {
display: block;
padding: 0 18px 20px 18px;
}
.ato-day .ato-day-content p {
margin: 0 0 14px;
font-size: var(--ato-fs-base);
line-height: 1.75;
color: var(--ato-text-main);
}
.ato-day .ato-day-content p:last-child {
margin-bottom: 0;
}
.ato-day__img {
display: block;
width: 100%;
height: auto;
border-radius: var(--ato-radius-sm);
margin: 0 0 14px;
}
@media (max-width: 600px) {
.ato-day__head {
flex-wrap: wrap;
gap: 9px;
}
.ato-day__title {
flex: 1 0 100%;
font-size: 19px;
}
}
/* --- Photo gallery -------------------------------------------------------
Rendered from validated `_ato_gallery` attachment IDs. Every tile is a real
pair, so the section is fully usable with both JS
and CSS switched off; the lightbox below is an enhancement layered on top.
Images below the fold carry loading="lazy" from the template. */
.ato-safari-gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.ato-safari-gallery__item {
margin: 0;
min-width: 0;
}
.ato-safari-gallery__link {
display: block;
position: relative;
overflow: hidden;
border-radius: var(--ato-radius-md);
border: 1px solid var(--ato-border-color);
background: var(--ato-bg-light);
aspect-ratio: 4 / 3;
text-decoration: none;
}
.ato-safari-gallery__link:focus-visible {
outline: 2px solid var(--ato-primary);
outline-offset: 2px;
}
.ato-safari-gallery__img,
.ato-safari-gallery__link img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.ato-safari-gallery__link:hover img {
transform: scale(1.045);
}
@media (max-width: 900px) {
.ato-safari-gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
}
@media (max-width: 520px) {
.ato-safari-gallery {
grid-template-columns: minmax(0, 1fr);
}
.ato-safari-gallery__link {
aspect-ratio: 3 / 2;
}
}
/* --- Lightbox ------------------------------------------------------------
Built in JS on first use, so none of this markup exists without scripts;
the gallery anchors then simply open the full-size file. No library. */
.ato-lb {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 48px 20px;
background: rgba(var(--shadow), 0.93);
}
.ato-lb[hidden] {
display: none;
}
html.ato-lb-open {
overflow: hidden;
}
.ato-lb__frame {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: 100%;
max-height: 100%;
}
.ato-lb__img {
display: block;
max-width: 100%;
max-height: 78vh;
width: auto;
height: auto;
border-radius: var(--ato-radius-md);
background: var(--ato-bg-light);
}
.ato-lb__cap {
margin: 0;
max-width: 60ch;
text-align: center;
font-family: var(--ato-font-body);
font-size: var(--ato-fs-small);
line-height: 1.5;
color: var(--ato-on-dark);
}
.ato-lb__cap[hidden] {
display: none;
}
.ato-lb__btn {
position: absolute;
background: rgba(var(--shadow), 0.55);
border: 1px solid var(--ato-on-dark);
border-radius: var(--ato-radius-full);
width: 44px;
height: 44px;
line-height: 1;
font-size: 26px;
font-family: var(--ato-font-body);
color: var(--ato-bg-light);
cursor: pointer;
transition: var(--ato-transition);
}
.ato-lb__btn:hover {
background: var(--ato-primary);
}
.ato-lb__btn:focus-visible {
outline: 2px solid var(--ato-secondary);
outline-offset: 2px;
}
.ato-lb__close {
top: 14px;
right: 16px;
}
.ato-lb__prev {
left: 16px;
top: 50%;
transform: translateY(-50%);
}
.ato-lb__next {
right: 16px;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 600px) {
.ato-lb {
padding: 60px 10px;
}
.ato-lb__prev {
left: 8px;
}
.ato-lb__next {
right: 8px;
}
}
/* --- FAQs ---------------------------------------------------------------- */
.ato-faqs {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
}
.ato-faq {
border-bottom: 1px solid var(--ato-border-color);
}
.ato-faq__q {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 15px 2px;
cursor: pointer;
list-style: none;
font-family: var(--ato-font-body);
font-size: var(--ato-fs-base);
font-weight: 600;
color: var(--ato-title-color);
}
.ato-faq__q::-webkit-details-marker {
display: none;
}
.ato-faq__q:focus-visible {
outline: 2px solid var(--ato-primary);
outline-offset: -2px;
}
.ato-faq__mark {
flex: 0 0 auto;
color: var(--ato-secondary);
font-family: var(--ato-font-body);
font-size: 20px;
line-height: 1.2;
transition: transform 0.25s ease;
}
.ato-faq[open] .ato-faq__mark {
transform: rotate(45deg);
}
.ato-faq__a {
max-width: var(--ato-measure, 700px);
padding: 0 2px 18px;
font-size: var(--ato-fs-base);
line-height: 1.75;
color: var(--ato-text-main);
}
.ato-faq__a p {
margin: 0 0 12px;
}
.ato-faq__a p:last-child {
margin-bottom: 0;
}
/* --- Closing call to action ---------------------------------------------- */
/*
* The band between the end of the itinerary and Related Safaris.
*
* Two columns: the argument on the left, the action on the right in its own
* card so the button never has to compete with body text for attention. Tracks
* are minmax(0, …) rather than 1fr, because a 1fr track floors at min-content
* and the destination line would then push the action card narrower on the
* safaris that list three long park names.
*
* It collapses to one column at 860px, which is where the two columns stop
* being wide enough to read: the action card goes underneath, still full width,
* still the last thing before the related grid.
*
* Colours are tints of the existing tokens via color-mix(), as everywhere else
* in this sheet. There is no new colour value in here.
*/
.ato-safari-cta {
margin: 56px 0 0;
padding: 34px 36px;
border: 1px solid color-mix(in srgb, var(--ato-primary) 18%, var(--ato-border-color));
border-radius: var(--ato-radius-lg);
background: color-mix(in srgb, var(--ato-primary) 5%, var(--ato-bg-white));
}
.ato-safari-cta__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
gap: 34px;
align-items: center;
}
/* The no-operator band carries no facts row and no operator mark, so it needs
less vertical room and a narrower action column than the main one. */
.ato-safari-cta--noop {
padding: 28px 36px;
}
.ato-safari-cta__inner--single {
grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
}
.ato-safari-cta__lead {
min-width: 0;
}
.ato-safari-cta__eyebrow {
font-family: var(--ato-font-label);
font-size: var(--ato-fs-label);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--ato-text-muted);
margin: 0 0 8px;
}
.ato-safari-cta__h {
font-family: var(--ato-font-heading);
font-size: 27px;
font-weight: 600;
line-height: 1.2;
color: var(--ato-title-color);
margin: 0 0 12px;
}
.ato-safari-cta__body {
font-family: var(--ato-font-body);
font-size: var(--ato-fs-reading);
line-height: 1.7;
color: var(--ato-text-main);
max-width: var(--ato-measure, 700px);
margin: 0;
}
/* The three facts the reader is holding in their head at this point. A plain
list, reset: it is data, not decoration. */
.ato-safari-cta__facts {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
list-style: none;
margin: 18px 0 0;
padding: 0;
}
.ato-safari-cta__fact {
padding: 6px 13px;
border: 1px solid var(--ato-border-color);
border-radius: var(--ato-radius-full);
background: var(--ato-bg-white);
font-family: var(--ato-font-label);
font-size: var(--ato-fs-small);
font-weight: 600;
color: var(--ato-title-color);
}
.ato-safari-cta__act {
min-width: 0;
padding: 22px;
border: 1px solid var(--ato-border-color);
border-radius: var(--ato-radius-md);
background: var(--ato-bg-white);
text-align: center;
}
.ato-safari-cta__op {
display: flex;
align-items: center;
gap: 12px;
text-align: left;
margin: 0 0 16px;
}
.ato-safari-cta__logo {
flex: 0 0 52px;
width: 52px;
height: 52px;
border-radius: var(--ato-radius-sm);
border: 1px solid var(--ato-border-color);
background: var(--ato-bg-white);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.ato-safari-cta__logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ato-safari-cta__initial {
font-family: var(--ato-font-heading);
font-size: 24px;
font-weight: 600;
color: var(--ato-primary);
line-height: 1;
}
.ato-safari-cta__op-body {
min-width: 0;
}
.ato-safari-cta__op-prefix {
display: block;
font-family: var(--ato-font-label);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
color: var(--ato-text-muted);
margin: 0 0 2px;
}
.ato-safari-cta__op-name {
font-family: var(--ato-font-body);
font-size: 16px;
font-weight: 600;
color: var(--ato-title-color);
}
.ato-safari-cta__op-name:hover,
.ato-safari-cta__op-name:focus-visible {
color: var(--ato-primary);
}
.ato-safari-cta__btn {
width: 100%;
padding: 15px 22px;
}
.ato-safari-cta__note {
font-family: var(--ato-font-body);
font-size: var(--ato-fs-small);
line-height: 1.55;
color: var(--ato-text-muted);
margin: 12px 0 0;
}
.ato-safari-cta__more {
display: inline-block;
margin: 14px 0 0;
font-family: var(--ato-font-label);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ato-primary);
border-bottom: 1px solid var(--ato-secondary-light);
transition: var(--ato-transition);
}
.ato-safari-cta__more:hover,
.ato-safari-cta__more:focus-visible {
color: var(--ato-primary-hover);
border-bottom-color: var(--ato-primary);
}
@media (max-width: 860px) {
.ato-safari-cta__inner,
.ato-safari-cta__inner--single {
grid-template-columns: minmax(0, 1fr);
gap: 26px;
}
}
@media (max-width: 599px) {
.ato-safari-cta {
margin-top: 44px;
padding: 24px 18px;
border-radius: var(--ato-radius-md);
}
.ato-safari-cta__h {
font-size: 22px;
}
.ato-safari-cta__body {
font-size: var(--ato-fs-base);
}
.ato-safari-cta__act {
padding: 18px 16px;
}
/* Measured at 375px: the destinations chip wraps to two lines, and a
two-line pill at the full 999px radius reads as a lozenge rather than a
chip. Ordinary corners below 600px. */
.ato-safari-cta__fact {
border-radius: var(--ato-radius-md);
}
.ato-safari-cta__more {
letter-spacing: 0.1em;
}
}
/* --- Related safaris (3-up) ---------------------------------------------- */
.ato-safari-related {
margin: 64px 0 0;
padding: 44px 0 0;
border-top: 1px solid var(--ato-border-color);
}
.ato-safari-related__h {
font-family: var(--ato-font-heading);
font-size: 29px;
font-weight: 600;
line-height: 1.2;
color: var(--ato-title-color);
text-align: center;
margin: 0 0 6px;
}
.ato-safari-related__sub {
font-family: var(--ato-font-label);
font-size: var(--ato-fs-label);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--ato-text-muted);
text-align: center;
margin: 0 0 32px;
}
/* The card (a.at-tour.ato-tour-card, styled in ato-marketplace.css) is built
for a 3-up grid: below roughly 300px of column it starts wrapping its meta
row onto three lines and clipping the activity chip. This grid therefore
mirrors `.ato-mk .ato-tours-grid` breakpoints exactly, so a related card
looks identical to the same card on the archive and homepage.
Equal heights: the card already declares `height: 100%` and pushes
`.at-tour-foot` down with `margin-top: auto`, so all it needs from the grid
is a stretched row. `grid-auto-rows: 1fr` keeps that true on the second row
as well, if the related query ever returns more than one row's worth. */
.ato-safari-related-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: 1fr;
gap: var(--ato-grid-gap);
align-items: stretch;
}
.ato-safari-related-grid > * {
min-width: 0;
height: 100%;
}
@media (max-width: 1079px) {
.ato-safari-related-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 699px) {
.ato-safari-related-grid {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
}
/* --- Utilities ----------------------------------------------------------- */
.ato-safari-single .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (prefers-reduced-motion: reduce) {
.ato-safari-single *,
.ato-safari-single *::before,
.ato-safari-single *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* "From" qualifier ahead of a scraped starting price. */
.ato-safari-price__lead {
display: inline-block;
margin-right: .25rem;
font-size: .8em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
opacity: .75;
}
/* --- Tab strip -----------------------------------------------------------
No-JS default: the nav is hidden and every panel renders stacked and visible,
so the page is complete without script. The inline tab script adds
.is-enhanced, which reveals the nav and hides all panels but the selected one.
The day-by-day itinerary is NOT a panel. It lives outside .ato-safari-tabs and
carries no [role=tabpanel], so nothing in this block can reach it — which is
exactly the point: it must never be hidden behind a tab again.
------------------------------------------------------------------------- */
.ato-safari-tabs {
margin: 56px 0 0;
border-top: 1px solid var(--ato-border-color);
padding-top: 40px;
}
.ato-safari-tabs__nav {
display: none;
}
.ato-safari-tabs.is-enhanced .ato-safari-tabs__nav {
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: thin;
border-bottom: 1px solid var(--ato-border-color);
margin: 0 0 34px;
}
.ato-safari-tabs__btn {
flex: 0 0 auto;
background: none;
border: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
padding: 13px 18px;
cursor: pointer;
white-space: nowrap;
font-family: var(--ato-font-label);
font-size: var(--ato-fs-label);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ato-text-muted);
transition: var(--ato-transition);
}
.ato-safari-tabs__btn:hover {
color: var(--ato-title-color);
}
.ato-safari-tabs__btn:focus-visible {
outline: 2px solid var(--ato-primary);
outline-offset: -2px;
}
.ato-safari-tabs__btn[aria-selected="true"] {
color: var(--ato-primary);
border-bottom-color: var(--ato-secondary);
}
/* Panels are .ato-safari-section elements carrying role="tabpanel". Stacked and
spaced apart without JS; flush and one-at-a-time with it. */
.ato-safari-tabs .ato-safari-section {
margin: 0 0 48px;
border-top: 0;
padding-top: 0;
}
.ato-safari-tabs.is-enhanced .ato-safari-section {
margin: 0;
}
.ato-safari-tabs.is-enhanced [role="tabpanel"][hidden] {
display: none;
}
/* Once the nav is showing, the panel heading only repeats the tab label, so it
is taken out of the visual flow but left for screen readers. */
.ato-safari-tabs.is-enhanced .ato-safari-section__h {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* The itinerary follows the tab strip and needs its own separation. */
.ato-safari-section--itinerary {
margin-top: 48px;
}
/* =====================================================================
PHOTOGRAPHER CREDITS
=====================================================================
This page rendered no credit at all until now, so its CC BY-SA hero and
every CC-licensed gallery and itinerary photograph were published with
the attribution stripped. There is room here, so each credit sits with
the photograph it belongs to and keeps its links to the source and the
licence deed.
ato-guides.css holds the base .ato-img-credit rules but does not load on
a safari page, so each placement is styled in full.
===================================================================== */
.ato-safari-media__cap {
display: block;
margin-top: 8px;
}
/* The featured photograph is credited in the same figcaption but is usually not
one of the images above it — it is what Yoast emits as og:image and what every
card linking here displays. It gets a label so a reader can tell which
photograph the credit under it belongs to. */
.ato-safari-media__caplabel {
display: block;
margin-top: 10px;
font-size: 0.6875rem;
line-height: 1.55;
font-weight: 600;
color: var(--ato-text-muted);
}
.ato-safari-media__caplabel + .ato-safari-media__credit {
margin-top: 2px;
}
.ato-safari-media__credit,
.ato-safari-gallery__credit,
.ato-day__credit {
margin: 6px 0 0;
font-size: 0.6875rem;
line-height: 1.55;
color: var(--ato-text-muted);
text-align: left;
overflow-wrap: anywhere;
}
.ato-safari-media__credit a,
.ato-safari-gallery__credit a,
.ato-day__credit a {
color: inherit;
text-decoration: underline;
}
.ato-safari-media__credit a:hover,
.ato-safari-gallery__credit a:hover,
.ato-day__credit a:hover {
color: var(--ato-primary);
}
/* The gallery is a grid of equal cells; the credit must not push its own
cell taller than its neighbours' images, so it sits under the link in
the flow and the cell simply grows. Nothing is clipped and nothing is
hidden. */
.ato-safari-gallery__item .ato-safari-gallery__credit {
padding: 0 2px;
}
.ato-day__credit {
margin-bottom: 10px;
}