/* ========================================================================== edits.css — manual CSS overrides ========================================================================== Ormina Tours / astra-child WHY THIS FILE EXISTS The rest of this theme's CSS is COMPILED from SCSS (css/*.scss -> css/*.css). Hand-editing a compiled .css file gets silently wiped the next time someone recompiles the SCSS. This file is plain CSS, has no SCSS source, and is never part of a build — so anything written here is safe. HOW IT LOADS Enqueued in inc/ot-assets.php (handle: 'ot-edits') on wp_enqueue_scripts at priority 999, so it prints AFTER style.css and after every page-specific stylesheet. Versioned with filemtime(), so changes appear immediately with no cache-bust needed. Because it loads last, a selector of EQUAL specificity will win. Match the original selector and you rarely need !important. Reach for !important only against inline styles or third-party CSS (Swiper, Flatpickr, CF7, Woo). HOUSE RULES - Date and describe every block. Say what it fixes, not what it does. - Keep entries under the right heading so this doesn't become a dumping ground. - Anything here is technically debt. When a fix proves permanent, move it into the matching SCSS partial and delete it from this file. - Never paste a whole compiled ruleset in — override only the properties that need to change. TEMPLATE -- 2026-07-31 - Ticket/who - what was wrong ------------------------------ .selector { property: value; } ========================================================================== */ /* ========================================================================== 1. Global / tokens Custom properties live in style.css :root. Redeclare here to retheme without recompiling, e.g. :root { --brand-navy: #00345a; } ========================================================================== */ /* ========================================================================== 2. Layout — header, nav, footer Source: css/layout/_site-header.scss, _site-footer.scss, _base.scss ========================================================================== */ /* ========================================================================== 3. Components — buttons, cards, forms, tabs, modal, star rating Source: css/components/*.scss ========================================================================== */ /* Known bug worth overriding here rather than in PHP: inc/class-content-section.php:239 outputs class="button button- primary" (stray space), so .button-primary never matches on ACF section buttons. Target .render_button_acf until the PHP is fixed. */ /* -- 2026-07-31 - Collapsible / FAQ titles were using the body font --------- Spotted on /destination/spain/andalusia/ — "Thoughtful, Tailored Travel Design" rendered in Inter while the H2 above it ("Journeys in Andalusia, Designed for Luxury") and every other heading used hypatia-sans-pro. Cause: in css/components/_collapsible.scss the font-family and font-weight declarations are commented out (lines 16-17), so .collapsible-items__title inherits the body font instead of the heading font: .collapsible-items__title { font-size: var(--h4-font-size); // font-family: var(--heading-font-family); // font-weight: 600; } Fixed here rather than in the SCSS so this doesn't require recompiling and re-uploading the 128 KB style.css (which would also need CHILD_THEME_ASTRA_CHILD_VERSION bumped to clear caches). Family only — weight deliberately left at its inherited 300 to match the H2 in the same section. The commented-out SCSS also wanted 600; that was not restored. Applies everywhere this class is rendered: - inc/class-content-section.php:260 ACF section collapsibles - template-parts/sections/section-faqs.php:10 FAQ accordions - woocommerce/content-ot-single-product.php:173 tour collapsibles - woocommerce/template-parts/content-switching-layout-main.php:445,470 - woocommerce/template-parts/content-version-layout.php:502,527 If _collapsible.scss is ever uncommented and recompiled, delete this block. */ .collapsible-items__title { font-family: var(--heading-font-family); } /* -- 2026-07-31 - Collapsible / FAQ title size 18px -> 22px ----------------- The SCSS sets font-size: var(--h4-font-size), which is 18px. Overridden to a literal 22px here rather than changing --h4-font-size, because that variable is shared with other h4-sized elements elsewhere in style.css. Site-wide, matching the font-family fix above — same 5 render locations. */ .collapsible-items__title { font-size: 22px; } /* -- 2026-07-31 - Smooth slide on collapsible open / close ------------------ The accordions snapped open and shut. They are native
elements and the theme toggles the panel with display: none -> display: block (css/components/_collapsible.scss), which cannot be transitioned — there is no JS involved at all. Fixed with the ::details-content pseudo-element, which targets the panel the browser generates for a
. Two modern CSS features make it work: interpolate-size: allow-keywords lets block-size animate to/from `auto`, so the panel sizes itself to whatever content the editor puts in it — no hardcoded max-height to maintain. transition-behavior: allow-discrete flips content-visibility at the right end of each direction, so the closing panel stays visible while it shrinks instead of vanishing on frame one. The theme's display: none / block toggle has to be neutralised, otherwise the panel has no height to animate. Specificity is matched deliberately: `details.collapsible-item > .collapsible-item__content` is (0,2,1), equal to the theme's `details[open] .collapsible-item__content`, and wins on load order because edits.css is enqueued last. Graceful degradation: browsers without ::details-content ignore these rules entirely and keep today's instant open/close. Nothing breaks. Site-wide, matching the other collapsible edits — same 5 render locations. Verified by sampling block-size frame by frame in both directions: open 0 -> 43 -> 129 -> 199 -> 244 -> 271 -> 287 -> 295px close 272 -> 195 -> 116 -> 64 -> 31 -> 12 -> 3 -> 0px */ details.collapsible-item { interpolate-size: allow-keywords; } details.collapsible-item > .collapsible-item__content { display: block; } details.collapsible-item::details-content { block-size: 0; overflow: hidden; transition: block-size 350ms cubic-bezier(.25, .1, .25, 1), content-visibility 350ms allow-discrete; } details.collapsible-item[open]::details-content { block-size: auto; } /* Respect the OS "reduce motion" setting — keep the behaviour, drop the slide. */ @media (prefers-reduced-motion: reduce) { details.collapsible-item::details-content { transition: none; } } /* ========================================================================== 4. Sections — the ACF page-builder blocks (.ot-section, .g--*) Source: css/sections/*.scss Each ACF section renders as .ot-section.g--{slug} ========================================================================== */ /* -- 2026-07-31 - Text-media image zoomed when an accordion opened ---------- Reported on /destination/spain/barcelona/ ("Explore the Beautiful Barcelona through a Luxe Lens"): the left-hand image appeared to zoom in and out as the accordions were opened and closed. Cause: css/sections/_section-text-media.scss (min-width: 990px) sizes the image column off its neighbour — .ot-section__media { height: 100%; max-height: 800px; } .ot-section__media img { height: 100%; width: 100%; object-fit: cover; } The section is a 2-column grid, so the row height is set by whichever column is taller. Opening an accordion grows the text column, which grows the row, which grows the media's height: 100%. Because the image is object-fit: cover, a taller box means a different crop — which reads as a zoom. This pre-dates the slide animation above, but that animation amplified it: the height used to jump in one frame, and now scales over 350ms, so what was a barely-noticeable snap became an obvious zoom. Fix: give the media a fixed aspect ratio so its height no longer depends on the text column at all. 3 / 4 reproduces the design's existing 600 x 800 maximum, so the intended portrait crop is preserved. Measured on Barcelona before this change — image heights varied per section because each followed its own text column: 498px, 566px, 721px, 800px -> all now 800px Site-wide on .text-media sections, chosen over a narrower :has() scope so every text-media section is consistent rather than only the ones that zoom. Note: height: auto is required. Without it the theme's height: 100% still wins over aspect-ratio, because a definite height beats an aspect ratio. :not(.ot-section__media--video) matters. The same media slot can hold a video instead of an image (e.g. /about/), and the theme gives that variant max-height: 600px and a 16/9 ratio on mobile. Without the exclusion this rule squeezed the About page video into a 450x600 portrait box. Verified. */ @media (min-width: 990px) { .ot-section.text-media .ot-section__media:not(.ot-section__media--video) { height: auto; aspect-ratio: 3 / 4; } } /* -- 2026-07-31 - Pasted in ACF copy -------- Body copy in ACF section content and collapsible content contained inline wrappers, making that text render heavier than the surrounding 300-weight copy. Origin: content pasted from Google Docs / Word into the ACF WYSIWYG fields. The markup is stored in the database, not in any theme file. The template prints it via wp_kses_post() (inc/class-content-section.php:262), which permits inline style attributes, so it renders as-is. Scope when found — 74 spans across 9 destination pages, all Spanish: barcelona 17, san-sebastian 12, madrid-central-spain 10, bilbao 8, la-rioja 7, galicia 6, andalusia 6, castilla-y-leon 4, basque 4 All other destinations, tours, hotels and blog posts were clean. !important is required here and nowhere else would do: an inline style attribute outranks every stylesheet selector regardless of specificity. Deliberately scoped to editorial copy containers only, so it can never interfere with inline font-weight set by a plugin or by JS elsewhere. Also acts as a guard against future pastes. If the content is ever cleaned at source, this block can be removed. */ .ot-section__content [style*="font-weight"], .collapsible-item__content [style*="font-weight"] { font-weight: inherit !important; } /* ========================================================================== 5. Pages Home / About / Contact / Inspiration / Insiders / Itineraries / Blog Source: css/pages/*.scss ========================================================================== */ /* ========================================================================== 6. Tours (WooCommerce products) + itinerary template parts Source: css/woocommerce/single-product.scss + _itinerary-*.scss ========================================================================== */ /* ========================================================================== 7. CPT singles & archives Destinations / Hotels / Points of Interest / Themed Travel / Travel Guides ========================================================================== */ /* ========================================================================== 8. Third-party overrides Swiper, Flatpickr, Contact Form 7, WooCommerce, Instagram Feed. !important is usually justified in this section only. ========================================================================== */ /* ========================================================================== 9. Responsive Breakpoints used by the theme: 989px (tablet/down), 990px (desktop/up). Keep media queries with their component above where practical; use this section only for cross-cutting responsive fixes. ========================================================================== */