/* * Outfitter Listings — layout only. * * Colour, type, radius, and spacing all come from the theme's design tokens * (--color-*, --font-*, --radius, --space-*). Nothing here sets a palette, so a * skin swap on reskins listings automatically. */ /* Grid -------------------------------------------------------------------- */ .ofl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-lg, 32px); } .ofl-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ofl-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Equal-height cards with the action row pinned to the bottom. */ .ofl-card { height: 100%; } .ofl-card .card__body { flex: 1 1 auto; } .ofl-card .card__actions { margin-top: auto; } /* List mode — media beside the body. */ .ofl-grid--list { display: flex; flex-direction: column; gap: var(--space-md, 24px); } .ofl-grid--list .ofl-card { flex-direction: row; } .ofl-grid--list .ofl-card .card__media { flex: 0 0 38%; aspect-ratio: 4 / 3; } .ofl-grid--list .ofl-card .card__body { flex: 1 1 auto; } /* Responsive ------------------------------------------------------------- */ @media (max-width: 900px) { .ofl-grid--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .ofl-grid, .ofl-grid--cols-2, .ofl-grid--cols-3 { grid-template-columns: 1fr; } .ofl-grid--list .ofl-card { flex-direction: column; } .ofl-grid--list .ofl-card .card__media { flex-basis: auto; aspect-ratio: 3 / 2; } } /* Single + archive ------------------------------------------------------- */ .ofl-single__body, .ofl-archive { padding-block: var(--space-2xl, 56px); } .ofl-single__media { margin: 0 0 var(--space-lg, 32px); } .ofl-single__lead { display: block; width: 100%; height: auto; border-radius: var(--radius, 2px); } .ofl-single__content { max-width: 70ch; } .ofl-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm, 16px); margin: var(--space-xl, 48px) 0 0; } .ofl-gallery-grid__item { margin: 0; } .ofl-gallery-grid img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius, 2px); } .ofl-related { padding-bottom: var(--space-3xl, 64px); } .ofl-archive__empty { padding-block: var(--space-2xl, 56px); text-align: center; font-family: var(--font-body); font-size: 1.125rem; line-height: 1.6; color: var(--color-text); opacity: 0.72; } @media (max-width: 700px) { .ofl-gallery-grid { grid-template-columns: repeat(2, 1fr); } } /* Book Now modal -------------------------------------------------------- */ body.ofl-modal-open { overflow: hidden; } .ofl-modal { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: var(--space-md, 24px); } .ofl-modal.is-open { display: flex; } .ofl-modal__overlay { position: absolute; inset: 0; /* Neutral scrim (not a brand colour); keeps the dialog legible on any skin. */ background: rgba(0, 0, 0, 0.55); } .ofl-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 520px; max-height: calc(100vh - 2 * var(--space-md, 24px)); overflow: auto; background: var(--color-bg); color: var(--color-text); border: var(--border, 1px) solid var(--color-line); border-radius: var(--radius, 2px); } .ofl-modal__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-primary); } .ofl-modal__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .ofl-modal__body { display: flex; flex-direction: column; gap: var(--space-xs, 8px); padding: var(--space-lg, 32px); } .ofl-modal__title { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-title); } .ofl-modal__price { margin: 0; font-family: var(--font-mono); font-size: var(--fs-price); font-weight: 600; letter-spacing: var(--ls-price); } .ofl-modal__excerpt, .ofl-modal__note { margin: 0; font-family: var(--font-body); font-size: var(--fs-meta); } .ofl-modal__note { opacity: 0.7; } .ofl-modal__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm, 16px); margin-top: var(--space-sm, 16px); } .ofl-modal__close { position: absolute; top: var(--space-xs, 8px); right: var(--space-xs, 8px); z-index: 2; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius, 2px); background: var(--color-bg); color: var(--color-text); font-size: 24px; line-height: 1; cursor: pointer; } .ofl-modal__close:hover, .ofl-modal__close:focus-visible { color: var(--color-accent); } /* Style templates (Expeditions Grid / Seasons List) ---------------------- * The widget renders plain HTML carrying the Design Pack classes (.exp-card, * .season-row …). These resets give the headings/paragraphs the same baseline * the Elementor-widget markup had (margin:0), using :where() so the per-variant * Design Pack rules always win. Skin + Style-tab overrides do the rest. */ .ofl-listings :where(h2, h3, h4, p, div) { margin: 0; } .ofl-listings .exp-name a, .ofl-listings .sname-t a { color: inherit; text-decoration: none; } .ofl-listings .exp-arrow, .ofl-listings .sgo { text-decoration: none; }