/* =========================================
Global heading case baseline (front-end)
Show headings exactly as written.
========================================= */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .wp-block-heading {
text-transform: none !important;
}
/* H2 — reduce size & improve elegance */
body h2,
body .wp-block-heading h2 {
font-size: clamp(1.45rem, 2.4vw, 1.85rem);
line-height: 1.25;
letter-spacing: -0.01em;
font-weight: 600; /* or 500 for softer */
margin-top: 1.4rem;
margin-bottom: 0.6rem;
color: inherit; /* keeps theme colour */
}
/* =========================================================
DESTINATIONS — Tier tokens, Hero, Badge, Panel (clean)
Requires body classes: tier-romi / tier-duo / (fallback) tier-generic
========================================================= */
/* ---------- 1) DESIGN TOKENS ---------- */
:root{
/* layout */
--rd-container: 1290px;
--rd-edge: 1.5rem;
--panel-gap-side: calc(max(var(--rd-edge), (100vw - var(--rd-container)) / 2));
--panel-gap-top: clamp(1.75rem, 3vw, 2rem);
/* hero height */
--rd-hero-h-desktop: 56vh;
--rd-hero-h-tablet: 50vh;
--rd-hero-h-mobile: 44vh;
/* badge sizing */
--rd-badge-w: 150px;
--rd-badge-r: 1.16; /* 580 / 500 */
--rd-badge-overhang: 14px;
/* default accent (overridden by tier classes below) */
--tier-accent: #6A7786;
/* title/intro readability shadows (hero only) */
--heading-shadow: 0 2px 12px rgba(0,0,0,.22);
--text-shadow: 0 2px 12px rgba(0,0,0,.12);
/* PANEL knobs (separate for solid vs soft) */
--panel-radius: 12px;
--panel-pad-y: clamp(0rem, 0vw, 0rem);
--panel-pad-x: clamp(1rem, 3vw, 2rem);
/* solid */
--panel-solid-tint: 32%; /* how much tier colour to mix into black */
--panel-solid-edge: 36%; /* border tint strength */
/* soft / frosted */
--panel-soft-alpha: .22; /* base darkness of the blur layer */
--panel-soft-tint: 22%; /* how much tier colour to mix into blur */
--panel-soft-edge: 28%; /* border tint strength */
--panel-max: 820px; /* cap for very wide screens (tweak 720–960px) */
}
/* ---------- 1.1 TIER ACCENTS ---------- */
body.single-destination.tier-romi { --tier-accent:#344E5A; }
body.single-destination.tier-duo { --tier-accent:#F09530; }
body.single-destination.tier-generic { --tier-accent:#6A7786; }
/* Do NOT force site-wide body text colour anymore.
Headings inside the hero are styled below; normal content stays theme-driven. */
/* =========================================================
2) HERO
Structure inside the Kadence row (.rd-hero):
[romiduo_img_abs class="rd-hero-img" base="hero"]
(optional) .rd-hero-body (can hold .rd-hero-intro)
core Post Title block
[romiduo_badge class="rd-badge rd-pos-bl|rd-pos-br"]
(optional) .rd-hero-panel (is-solid / is-soft)
========================================================= */
.rd-hero{
position: relative;
overflow: visible;
background: transparent;
z-index: 0;
}
/* background image */
.rd-hero .rd-hero-img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
z-index: 0;
}
/* overlay (tier-tinted very lightly) */
.rd-hero::before{
content:"";
position:absolute; inset:0;
background: linear-gradient(
to top,
color-mix(in srgb, #000 70%, var(--tier-accent) 30%) 0%,
transparent 60%
);
pointer-events:none;
z-index:1;
}
/* kill Kadence inner gutters on this row */
.rd-hero > .kt-row-layout-inner,
.rd-hero > .kt-row-column-wrap{ padding-left:0; padding-right:0; }
/* hero body (drives height; keep even if empty) */
.rd-hero-body{
position: relative; z-index: 2;
margin: 0 auto; width: 100%;
background: transparent;
min-height: var(--rd-hero-h-desktop);
display: flex; align-items: flex-start;
overflow: visible;
}
/* ---------- Title & Intro (outside any panel) ---------- */
.rd-hero .wp-block-post-title{
/* prevent vertical stacking & keep consistent left alignment */
display: block;
width: 100%;
max-width: 900px;
writing-mode: horizontal-tb;
white-space: normal; word-break: normal; overflow-wrap: break-word;
position: relative; z-index: 2;
margin: 0;
padding-top: clamp(24px, 6vw, 48px); /* top rhythm only when NOT in a panel */
margin-left: var(--panel-gap-side);
margin-right: var(--panel-gap-side);
color: #fff; text-align: left;
text-shadow: var(--heading-shadow);
font-size: clamp(28px, 6vw, 56px);
}
/* Ensure hero headings stay white regardless of global heading colour */
.rd-hero h1,
.rd-hero h2,
.rd-hero h3,
.rd-hero .wp-block-heading,
.rd-hero .wp-block-post-title,
.rd-hero-panel h1,
.rd-hero-panel h2,
.rd-hero-panel h3,
.rd-hero-panel .wp-block-heading,
.rd-hero-panel .wp-block-post-title {
color: #ffffff !important;
}
.rd-hero .rd-hero-intro{
position: relative; z-index: 2; display: block;
margin: .60rem 0 0;
margin-left: var(--panel-gap-side);
margin-right: var(--panel-gap-side);
max-width: 60ch; color: #fff; line-height: 1.35;
text-shadow: var(--text-shadow);
}
body.home .rd-hero .rd-hero-intro {
margin-top: .90rem; /* slightly larger gap under the title */
}
/* ---------- Badge ---------- */
.rd-hero .rd-badge{
position: absolute; z-index: 3;
bottom: calc(-1 * var(--rd-badge-overhang));
width: var(--rd-badge-w);
height: calc(var(--rd-badge-w) * var(--rd-badge-r));
filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
pointer-events: none;
}
.rd-hero .rd-pos-bl{ left: var(--panel-gap-side); }
.rd-hero .rd-pos-br{ right: var(--panel-gap-side); }
/* gentle fade-up for title/intro */
@media (prefers-reduced-motion: no-preference){
.rd-hero .wp-block-post-title,
.rd-hero .rd-hero-intro{
opacity:0; transform: translateY(8px);
animation: rd-fade-up .6s ease-out .05s forwards;
will-change: opacity, transform;
}
.rd-hero .rd-hero-intro{ animation-delay:.12s; }
}
@keyframes rd-fade-up{ to{ opacity:1; transform: translateY(0); } }
/* badge “stamp” */
@media (prefers-reduced-motion: no-preference){
.rd-hero .rd-badge{
opacity:0;
transform: scale(1.25) rotate(-8deg);
transform-origin: center bottom;
animation: rd-badge-stamp .7s cubic-bezier(.28,1.4,.36,1) 2.2s forwards;
will-change: opacity, transform;
}
}
@keyframes rd-badge-stamp{
0% { opacity:0; transform:scale(1.25) rotate(-8deg); }
55% { opacity:1; transform:scale(0.92) rotate( 2deg); }
75% { transform:scale(1.05) rotate(-1deg); }
100% { opacity:1; transform:scale(1) rotate( 0deg); }
}
@media (prefers-reduced-motion: reduce){
.rd-hero .rd-badge{ opacity:1; transform:none; animation:none; }
}
/* never clip the overhang/content */
.rd-hero,
.rd-hero .kt-row-layout-inner,
.rd-hero .kt-row-column-wrap{ overflow: visible !important; }
/* responsive height + badge */
@media (max-width:1024px){
.rd-hero-body{ min-height: var(--rd-hero-h-tablet); }
}
@media (max-width:767px){
.rd-hero-body{ min-height: var(--rd-hero-h-mobile); }
:root{
--rd-badge-w: 120px;
--rd-badge-overhang: 10px;
}
.rd-hero .rd-hero-img{ object-position: center 40%; }
}
/* =========================================================
3) HERO PANEL (optional)
Add class "rd-hero-panel" to any Kadence Row/Section inside the hero,
then choose ONE of: "is-solid" or "is-soft"
========================================================= */
.rd-hero-panel{
position: relative;
z-index: 3;
display: block;
/* fixed: responsive width that respects side margins */
max-width: clamp(320px, calc(100% - (2 * var(--panel-gap-side))), 1100px);
margin: var(--panel-gap-top) var(--panel-gap-side) 0;
padding: var(--panel-pad-y) var(--panel-pad-x);
border-radius: var(--panel-radius);
box-shadow: 0 4px 24px rgba(0,0,0,.25);
text-align: left;
color:#fff;
}
/* Cap the panel on wide screens, keep it left-aligned */
@media (min-width: 1025px){
.rd-hero-panel{
width: min(
calc(100% - (2 * var(--panel-gap-side))), /* respect content edges */
var(--panel-max) /* stop getting too wide */
);
margin-right: auto; /* keeps the panel hugged left */
}
}
/* =========================================
HERO PANEL — refined premium typography
========================================= */
/* HERO PANEL — Tight, balanced spacing */
.rd-hero-panel .wp-block-post-title {
font-size: clamp(28px, 5vw, 42px);
line-height: 1.18;
letter-spacing: -0.015em;
font-weight: 700;
/* spacing */
margin-top: 0 !important;
margin-bottom: 0.35rem;
margin-left: 0;
margin-right: 0;
padding-top: 0;
max-width: 24ch;
color: #fff;
text-shadow: 0 1px 6px rgba(0,0,0,0.14);
}
.rd-hero-panel .rd-hero-intro,
.rd-hero-panel p {
font-size: clamp(17px, 2.4vw, 20px);
line-height: 1.45;
letter-spacing: -0.01em;
font-weight: 400;
/* spacing */
margin-top: 0 !important;
margin-bottom: 0.35rem;
margin-left: 0;
margin-right: 0;
max-width: 40ch;
color: #fff;
text-shadow: 0 1px 6px rgba(0,0,0,0.14);
}
/* FINAL line spacing fix */
.rd-hero-panel p:last-child {
margin-bottom: 0.15rem;
}
/* solid — colour-forward, no heavy black */
.rd-hero-panel.is-solid{
background: color-mix(
in srgb,
#000 calc(100% - var(--panel-solid-tint)),
var(--tier-accent) var(--panel-solid-tint)
);
border: 1px solid color-mix(in srgb, var(--tier-accent) var(--panel-solid-edge), transparent);
}
/* soft — frosted with a hint of tier */
.rd-hero-panel.is-soft{
background: color-mix(
in srgb,
rgba(0,0,0,var(--panel-soft-alpha)) calc(100% - var(--panel-soft-tint)),
var(--tier-accent) var(--panel-soft-tint)
);
backdrop-filter: blur(8px);
border: 1px solid color-mix(in srgb, var(--tier-accent) var(--panel-soft-edge), transparent);
}
/* subtle inner edge */
.rd-hero-panel::before{
content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
border: 2px solid color-mix(in srgb, var(--tier-accent) 28%, transparent);
opacity: .9;
}
/* =========================================
Destination intro & body typography
Premium editorial style (lead + main)
========================================= */
/* Shared wrapper for both blocks */
.rd-text-lead,
.rd-text-main {
max-width: 64ch;
margin-left: auto;
margin-right: auto;
}
/* =========================================
LEAD PARAGRAPH (summary_long)
Premium, larger, softer intro paragraph
========================================= */
.rd-text-lead,
.rd-text-lead p {
font-size: clamp(1.25rem, 2.7vw, 1.65rem); /* ~20–26px */
line-height: 1.45;
font-weight: 400;
letter-spacing: -0.012em;
color: #1e293b; /* slate-dark premium grey */
margin-top: 1.5rem;
margin-bottom: 1.25rem; /* space before main content */
}
/* Removes WP auto spacing */
.rd-text-lead p:first-child {
margin-top: 0;
}
.rd-text-lead p:last-child {
margin-bottom: 0;
}
/* =========================================
MAIN CONTENT (body copy)
Clean, readable, balanced with lead
========================================= */
.rd-text-main,
.rd-text-main p {
font-size: 1rem; /* ~16px */
line-height: 1.55;
font-weight: 400;
letter-spacing: -0.005em;
color: #1b1f24; /* slightly stronger than lead */
margin-top: 0;
margin-bottom: 1rem;
}
.rd-text-main p:last-child {
margin-bottom: 0;
}
/* =========================================
SMALL SCREEN TUNING
========================================= */
@media (max-width: 640px) {
.rd-text-lead,
.rd-text-main {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.rd-text-lead,
.rd-text-lead p {
font-size: clamp(1.15rem, 4vw, 1.45rem);
line-height: 1.48;
}
.rd-text-main,
.rd-text-main p {
font-size: 0.97rem;
line-height: 1.52;
}
}
/* =========================================================
4) QUICK TUNING (what to tweak)
---------------------------------------------------------
• Panel top spacing: --panel-gap-top
• Panel left/right align: --panel-gap-side (auto-aligned to content gutter)
• Panel internal padding: --panel-pad-x / --panel-pad-y
• Solid intensity: --panel-solid-tint (higher = more tier colour)
• Soft transparency: --panel-soft-alpha (lower = more transparent)
• Soft tint: --panel-soft-tint
--------------------------------------------------------- */
/* Destinations Duo/Romi strip */
.tier-strip {
padding: 0.75rem 1rem;
margin: 0 0 1.75rem 0;
border-radius: 0 0 12px 12px;
font-size: 0.95rem;
line-height: 1.45;
border-left: 4px solid transparent;
}
.tier-strip strong {
font-weight: 600;
}
/* Duo styling */
body.tier-duo .tier-strip {
background: rgba(255, 140, 0, 0.14);
border-left-color: #FF8C00;
color: #442E00;
}
/* ROMI – brand-authentic with a clear blue background */
body.single-destination.tier-romi .tier-strip {
/* Light blue wash (not derived from the dark slate accent) */
background: rgba(80, 140, 255, 0.15);
/* LEFT EDGE = exact Romi accent blue #344E5A */
border-left-color: #344E5A;
/* Text: readable, slightly blue-grey, harmonious */
color: #2B3F48; /* deepened version of the accent family */
}
@media (max-width: 767px) {
.tier-strip {
margin-bottom: 1.25rem;
font-size: 0.92rem;
}
}
/* ============= Romi sidebar panel ============= */
/* Outer wrapper = the right-hand Kadence column */
.romi-panel-wrap {
position: relative;
margin: 2rem 0; /* breathing room from neighbours */
}
.romi-panel h4 {
text-transform: uppercase !important;
}
/* The actual blue info box */
.romi-panel {
position: relative;
background: #F6F8FC; /* light cool grey/blue */
border-left: 4px solid #344E5A; /* Romi blue */
border-radius: 16px;
padding: 2.5rem 1.5rem 1.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,.06);
overflow: visible;
color: #2B3F48; /* readable blue-grey */
}
/* Romi image “peeking” over the top */
.romi-panel__romi {
position: absolute;
top: -38px;
left: 1.5rem;
width: 90px;
height: auto;
pointer-events: none;
z-index: 3;
}
/* Panel title: "What I discovered" */
.romi-panel__title {
margin: 0 0 0.75rem;
padding-top: 1.75rem; /* ensures text clears Romi’s head */
font-size: 1.05rem;
font-weight: 600;
color: #1F3541;
}
/* Section headings: Local fact / What's popular / Local flavours */
.romi-panel__subheading,
.romi-panel h4 {
margin: 1.1rem 0 0.25rem;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #344E5A;
}
.romi-panel__text,
.romi-panel p {
margin: 0 0 0.5rem;
font-size: 0.93rem;
line-height: 1.45;
}
.romi-panel p:last-child {
margin-bottom: 0;
}
@media (max-width: 767px) {
.romi-panel {
padding: 2.25rem 1.25rem 1.5rem;
}
.romi-panel__romi {
top: -32px;
width: 78px;
}
.romi-panel__title {
padding-top: 1.5rem;
}
}
/* =========================
Romi & Duo — Card Grid
========================= */
/* Optional: brand colours */
:root {
--romi-blue: #344E5A; /* adjust to your exact Romi blue */
--duo-orange: #F09530; /* adjust to your exact Duo orange */
}
/* Container: cards wrapper (grid OR strip) */
.rd-cards {
margin: 24px 0;
}
/* Default layout = GRID (matches existing behaviour) */
.rd-cards--layout-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
/* ---------------------------------
Layout: Card STRIP (1-row card carousel)
--------------------------------- */
.rd-cards--layout-strip {
position: relative; /* for scroll indicator line */
display: flex;
gap: 12px;
overflow-x: auto;
padding-bottom: 4px; /* small buffer for iOS scrollbar */
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
/* Strip tiles: each card is a “slide” */
.rd-cards--layout-strip .rd-card {
flex: 0 0 clamp(260px, 72vw, 360px); /* desktop clamp + mobile-friendly width */
scroll-snap-align: start;
}
/* On small screens, make the next card peek in */
@media (max-width: 640px) {
.rd-cards--layout-strip .rd-card {
flex-basis: 70vw; /* similar feel to gallery strip, but a bit wider for text */
}
}
/* Hide default scrollbar styling (optional) */
.rd-cards--layout-strip::-webkit-scrollbar {
height: 6px;
}
.rd-cards--layout-strip::-webkit-scrollbar-track {
background: transparent;
}
.rd-cards--layout-strip::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.5);
border-radius: 999px;
}
/* ---------------------------------------------
Card strip – subtle scroll line (mobile only)
--------------------------------------------- */
@media (max-width: 768px) {
.rd-cards--layout-strip::before {
content: "";
position: absolute;
left: 0; /* left aligned like the gallery version */
bottom: 4px; /* same vertical as the gallery indicator */
width: 30vw; /* same width as gallery indicator */
height: 3px;
background: rgba(0, 0, 0, 0.10);
border-radius: 999px;
pointer-events: none;
opacity: 1;
transition: none; /* hide instantly when scrolling begins */
z-index: 2;
}
/* Hidden while JS adds .rd-cards--scrolling during user scroll */
.rd-cards--layout-strip.rd-cards--scrolling::before {
opacity: 0;
}
}
/* Variant hook (card vs compact) */
.rd-cards--card .rd-card__body {
padding: 1rem 1.1rem 1.05rem;
}
.rd-cards--compact .rd-card__body {
padding: 0.75rem 0.9rem 0.85rem;
}
/* Individual card */
.rd-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
background: #ffffff;
border-radius: 16px;
border: 1px solid rgba(15, 23, 42, 0.06);
overflow: hidden;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
transition:
box-shadow 0.25s ease,
transform 0.25s ease,
border-color 0.25s ease,
background 0.25s ease;
}
/* Hover lift */
.rd-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}
/* Tier highlighting
These rely on cards.php outputting:
rd-card rd-card--tier-romi / rd-card--tier-duo / rd-card--tier-none
*/
.rd-card {
border-top: 4px solid transparent;
}
/* Romi tier – blue accent + subtle tint */
.rd-card--tier-romi {
border-top-color: var(--romi-blue);
background: linear-gradient(
to bottom,
rgba(23, 117, 200, 0.05),
#ffffff
);
}
/* Duo tier – orange accent + subtle tint */
.rd-card--tier-duo {
border-top-color: var(--duo-orange);
background: linear-gradient(
to bottom,
rgba(255, 122, 47, 0.07),
#ffffff
);
}
/* Optional: unknown / no tier */
.rd-card--tier-none,
.rd-card--tier-unknown {
border-top-color: rgba(148, 163, 184, 0.6);
}
/* Media (card image) */
.rd-card__media {
display: block;
overflow: hidden;
}
.rd-card__media img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 0.35s ease;
}
/* Gentle zoom on hover */
.rd-card:hover .rd-card__media img {
transform: scale(1.04);
}
/* Body */
.rd-card__body {
display: flex;
flex-direction: column;
}
/* Title */
.rd-card__title {
margin: 0 0 0.35rem;
font-size: 1rem;
line-height: 1.25;
font-weight: 600;
}
.rd-card__title a {
color: #0f172a;
text-decoration: none;
}
.rd-card__title a:hover {
text-decoration: underline;
}
/* Caption (summary_short / excerpt)
Only appears when show_caption="1" is passed in the shortcode.
*/
.rd-card__caption {
margin-top: 0.25rem;
font-size: 0.9rem;
line-height: 1.4;
color: #475569;
max-height: 4.2em; /* ≈3 lines */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* Chips row (place type, group, price, mood) */
.rd-card__chips {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0.15rem 0 0.25rem;
}
/* Base chip */
.rd-chip {
display: inline-flex;
align-items: center;
padding: 0.15rem 0.45rem;
border-radius: 999px;
font-size: 0.75rem;
line-height: 1.2;
border: 1px solid rgba(148, 163, 184, 0.5);
color: #475569;
background-color: rgba(248, 250, 252, 0.9);
}
/* Variants */
.rd-chip--group {
border-color: rgba(56, 189, 248, 0.6);
background-color: rgba(56, 189, 248, 0.06);
}
.rd-chip--type {
border-color: rgba(129, 140, 248, 0.6);
background-color: rgba(129, 140, 248, 0.06);
}
.rd-chip--price {
border-color: rgba(248, 181, 82, 0.8);
background-color: rgba(248, 181, 82, 0.08);
}
.rd-chip--mood {
border-color: rgba(94, 234, 212, 0.7);
background-color: rgba(94, 234, 212, 0.10);
}
/* Inherited mood (coming from parent city / country etc.) */
.rd-chip--mood.is-inherited {
opacity: 0.85;
font-style: italic;
}
/* Badge overlay
cards.php wraps [romiduo_badge] as:
…
*/
.rd-card__badge {
position: absolute;
top: 0.75rem;
right: 0.75rem;
z-index: 2;
pointer-events: none; /* keep entire card clickable */
}
.rd-card__badge img {
display: block;
width: 64px;
height: auto;
}
@media (max-width: 640px) {
.rd-card__badge img {
width: 52px;
}
}
/* Card summary (short caption under title) */
.rd-card__summary {
margin: 6px 0 10px;
font-size: 0.95rem;
line-height: 1.4;
color: #404040; /* or whatever your body text colour is */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* =========================
Breadcrumb
========================= */
.rd-breadcrumbs {
font-size: 0.85rem;
margin-bottom: 1.5rem;
}
.rd-breadcrumbs__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
align-items: center;
}
.rd-breadcrumbs__item {
display: inline-flex;
align-items: center;
}
.rd-breadcrumbs__sep {
margin: 0 0.25rem;
opacity: 0.6;
}
.rd-breadcrumbs__chip,
.rd-breadcrumbs__current {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
border-radius: 999px; /* pill */
line-height: 1.2;
white-space: nowrap;
}
/* Ancestor chips (clickable) */
.rd-breadcrumbs__chip {
background: rgba(0,0,0,0.04);
text-decoration: none;
color: inherit;
transition: background 0.15s ease, color 0.15s ease;
}
.rd-breadcrumbs__chip:hover,
.rd-breadcrumbs__chip:focus-visible {
background: rgba(0,0,0,0.08);
text-decoration: none;
}
/* Current node */
.rd-breadcrumbs__item--current .rd-breadcrumbs__current {
font-weight: 600;
background: transparent; /* or a very subtle tint if you want */
}
/* Mobile tweaks */
@media (max-width: 640px) {
.rd-breadcrumbs {
font-size: 0.8rem;
}
.rd-breadcrumbs__list {
row-gap: 0.2rem;
}
}
/* =========================================
Romi & Duo — Gallery (Grid / Strip / Hero)
========================================= */
/* Base container */
.romiduo-gallery {
margin: 24px 0;
}
/* Reset figure */
.romiduo-gallery__item {
margin: 0;
position: relative;
overflow: hidden;
}
/* Clickable area */
.romiduo-gallery__link {
display: block;
text-decoration: none;
}
/* Square thumbnail tiles (1:1) */
.romiduo-gallery__thumb {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 1 / 1; /* square tiles */
object-fit: cover; /* crop nicely */
border-radius: 12px; /* match card visuals */
transition:
transform 0.25s ease,
opacity 0.25s ease,
filter 0.25s ease;
}
/* Hover effect — desktop only */
@media (hover: hover) and (pointer: fine) {
.romiduo-gallery__item:hover .romiduo-gallery__thumb {
transform: scale(1.03);
opacity: 0.96;
filter: saturate(1.05);
}
}
/* -------------------------
Layout: Gallery GRID (default)
------------------------- */
.romiduo-gallery--layout-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
/* Slightly larger tiles on wider screens */
@media (min-width: 768px) {
.romiduo-gallery--layout-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
}
@media (min-width: 1024px) {
.romiduo-gallery--layout-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
}
/* Optional “hero” first tile inside grid on large screens */
@media (min-width: 1024px) {
.romiduo-gallery--layout-grid .romiduo-gallery__item:first-child {
grid-column: span 2;
grid-row: span 2;
}
}
/* -------------------------
Layout: Gallery STRIP (1-row)
------------------------- */
.romiduo-gallery--layout-strip {
position: relative; /* needed for scroll indicator overlay */
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 4px; /* small buffer for iOS scrollbar */
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
/* Hide ugly browser scrollbar without removing scrollability */
.romiduo-gallery--layout-strip::-webkit-scrollbar {
height: 6px;
}
.romiduo-gallery--layout-strip::-webkit-scrollbar-track {
background: transparent;
}
.romiduo-gallery--layout-strip::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.5); /* subtle and optional */
border-radius: 999px;
}
/* Tiles in the strip */
.romiduo-gallery--layout-strip .romiduo-gallery__item {
flex: 0 0 clamp(220px, 70vw, 360px);
scroll-snap-align: start;
}
/* On small screens, make each tile smaller so the next tile peeks in */
@media (max-width: 640px) {
.romiduo-gallery--layout-strip .romiduo-gallery__item {
flex-basis: 60vw; /* your mobile tile size */
}
}
/* -----------------------------------------------
Persistent subtle scroll line indicator (mobile)
----------------------------------------------- */
@media (max-width: 768px) {
.romiduo-gallery--layout-strip::before {
content: "";
position: absolute;
left: 0; /* left aligned */
bottom: 4px; /* raised by ~2px from previous position */
width: 30vw;
height: 3px; /* thin, subtle bar */
background: rgba(0, 0, 0, 0.10); /* light neutral scroll indicator */
border-radius: 999px; /* fully rounded ends */
pointer-events: none;
opacity: 1;
transition: none; /* hide instantly when scrolling begins */
z-index: 2;
}
/* Hidden while scrolling so only native iOS scrollbar is visible */
.romiduo-gallery--layout-strip.romiduo-gallery--scrolling::before {
opacity: 0;
}
}
/* -------------------------
Layout: Gallery HERO (stub)
------------------------- */
/* This gives you a future option like:
[romiduo_gallery layout="hero"]
and you can refine later.
*/
.romiduo-gallery--layout-hero {
display: grid;
gap: 12px;
}
@media (min-width: 768px) {
.romiduo-gallery--layout-hero {
grid-template-columns: 2fr 1.2fr;
}
.romiduo-gallery--layout-hero .romiduo-gallery__item:first-child {
grid-row: span 2;
}
}
/* =========================
Romi & Duo — Gallery Modal
========================= */
.romiduo-gallery-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: none; /* toggled via JS */
align-items: center;
justify-content: center;
padding: 16px;
color: #e5e7eb; /* light text */
}
/* Open state */
.romiduo-gallery-modal--open {
display: flex;
}
/* Backdrop */
.romiduo-gallery-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.88); /* slate-ish */
backdrop-filter: blur(10px); /* modern glass blur */
}
/* Modal inner shell */
.romiduo-gallery-modal__inner {
position: relative;
z-index: 1;
max-width: 96vw;
max-height: 90vh;
display: flex;
flex-direction: column;
gap: 12px;
}
/* Stage: image + nav arrows */
.romiduo-gallery-modal__stage-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Main image */
.romiduo-gallery-modal__image {
max-width: 90vw;
max-height: 80vh;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.8);
background: #020617;
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
/* Navigation arrows */
.romiduo-gallery-modal__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: none;
background: rgba(15, 23, 42, 0.85);
color: inherit;
border-radius: 999px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 20px;
line-height: 1;
}
.romiduo-gallery-modal__nav--prev {
left: 8px;
}
.romiduo-gallery-modal__nav--next {
right: 8px;
}
@media (hover: hover) and (pointer: fine) {
.romiduo-gallery-modal__nav:hover {
background: rgba(15, 23, 42, 0.95);
}
}
/* Close button */
.romiduo-gallery-modal__close {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
border: none;
background: rgba(15, 23, 42, 0.85);
color: inherit;
border-radius: 999px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
.romiduo-gallery-modal__close:hover {
background: rgba(15, 23, 42, 0.95);
}
}
/* Meta line (index, optional caption) */
.romiduo-gallery-modal__meta {
display: flex;
justify-content: space-between;
font-size: 13px;
opacity: 0.8;
}
/* Index text: "3 / 10" */
.romiduo-gallery-modal__index {
white-space: nowrap;
}
/* Optional thumbstrip inside modal (can be wired later) */
.romiduo-gallery-modal__thumbstrip {
display: flex;
gap: 6px;
overflow-x: auto;
margin-top: 4px;
}
.romiduo-gallery-modal__thumbstrip img {
width: 52px;
height: 52px;
border-radius: 8px;
object-fit: cover;
opacity: 0.6;
cursor: pointer;
}
.romiduo-gallery-modal__thumbstrip img.is-active {
opacity: 1;
outline: 2px solid #38bdf8; /* cyan-ish highlight */
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.romiduo-gallery-modal__image {
transition: none;
}
}
/* =========================
Signature - Rosie & Aaron
========================= */
.rd-duo-signoff img {
display: block;
height: auto;
margin-top: 1.5rem;
width: 140px; /* default: small mobiles */
}
/* ≥ 480px (bigger phones) */
@media (min-width: 480px) {
.rd-duo-signoff img {
width: 160px;
}
}
/* ≥ 768px (tablets) */
@media (min-width: 768px) {
.rd-duo-signoff img {
width: 190px;
}
}
/* ≥ 1024px (desktops) */
@media (min-width: 1024px) {
.rd-duo-signoff img {
width: 220px;
}
}
/* =========================================
"Aaron / Rosie / Romi says" section
========================================= */
/* Hide the wrapper entirely if there are no cards inside */
.rd-says:not(:has(.rd-says__card)) {
display: none;
margin: 0;
padding: 0;
border: none;
}
/* Outer wrapper */
.rd-says {
max-width: 72rem;
margin: 2.5rem auto 2.25rem;
padding: 1.75rem 1.5rem;
border-radius: 18px;
background: #f9fafb;
border: 1px solid rgba(148, 163, 184, 0.35);
}
/* Grid for 1–3 cards */
.rd-says__grid {
display: grid;
gap: 1.25rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* Base card */
.rd-says__card {
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
padding: 1.1rem 1.2rem 1.15rem;
border-radius: 14px;
background: #ffffff;
border: 1px solid rgba(148, 163, 184, 0.4);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}
/* Label row: "Aaron says", etc. */
.rd-says__label {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.78rem;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #4b5563;
margin-bottom: 0.4rem;
}
/* Small coloured dot */
.rd-says__dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: #94a3b8; /* default, overridden below per person */
}
/* Quote text block */
.rd-says__quote {
position: relative;
font-size: 0.98rem;
line-height: 1.6;
color: #111827;
letter-spacing: -0.01em;
margin: 0;
padding-left: 1.3rem; /* space for decorative quote mark */
}
/* Strong text inside quote (if used) */
.rd-says__quote strong {
font-weight: 600;
}
/* Decorative opening quote mark */
.rd-says__quote::before {
content: "“";
position: absolute;
left: 0;
top: -0.2rem;
font-size: 1.8rem;
line-height: 1;
color: rgba(148, 163, 184, 0.7);
font-weight: 500;
}
/* Person-specific accents */
.rd-says__card--aaron .rd-says__dot {
background: #0f766e; /* teal-ish */
}
.rd-says__card--aaron {
border-color: rgba(45, 212, 191, 0.55);
}
.rd-says__card--rosie .rd-says__dot {
background: #db2777; /* pink */
}
.rd-says__card--rosie {
border-color: rgba(244, 114, 182, 0.55);
}
.rd-says__card--romi .rd-says__dot {
background: #344E5A; /* Romi blue */
}
.rd-says__card--romi {
border-color: rgba(52, 78, 90, 0.6);
}
/* Subtle hover lift on desktop */
@media (hover: hover) and (pointer: fine) {
.rd-says__card {
transition:
box-shadow 0.22s ease,
transform 0.22s ease,
border-color 0.22s ease,
background-color 0.22s ease;
}
.rd-says__card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10);
background-color: #ffffff;
}
}
/* Mobile polish */
@media (max-width: 640px) {
.rd-says {
padding: 1.5rem 1.1rem;
margin: 2rem auto 2rem;
}
.rd-says__quote {
font-size: 0.96rem;
padding-left: 1.15rem;
}
.rd-says__quote::before {
font-size: 1.6rem;
}
}
//* =========================
Map - explore (v1.5)
========================= */
/* Wrapper: clips map corners cleanly */
.romiduo-explore-map{
border-radius:12px;
overflow:hidden; /* tiles clip to rounded corners */
}
/* -------------------------------------------------
Breadcrumb bar (reuse rd-breadcrumbs styling)
------------------------------------------------- */
/* Kill the default breadcrumb margin when used as a toolbar */
.romiduo-explore-map .rd-breadcrumbs{
margin:0;
}
/* Bar “skin” */
.romiduo-explore-map__bar{
padding:10px 12px;
border:1px solid rgba(0,0,0,.08);
border-bottom:none;
background:#fff;
box-shadow:0 6px 18px rgba(0,0,0,.06);
}
/* Ensure header row can wrap nicely */
.romiduo-explore-map__bar .rd-breadcrumbs__list{
width:100%;
}
/* Spacer pushes count to the right */
.romiduo-explore-map__spacer{
flex:1 1 auto;
}
/* Count: subtle */
.romiduo-explore-map__count{
opacity:.75;
white-space:nowrap;
}
/* -------------------------------------------------
Fix: chip hover turning text white
(Kadence/theme often forces a hover color on buttons/links)
------------------------------------------------- */
/* Force chip text to stay the same on hover/focus */
.romiduo-explore-map .rd-breadcrumbs__chip,
.romiduo-explore-map .rd-breadcrumbs__chip:hover,
.romiduo-explore-map .rd-breadcrumbs__chip:focus-visible{
color: inherit !important;
text-decoration:none;
}
/* Ensure our button “chip” behaves like the breadcrumb chip */
.romiduo-explore-map .romiduo-explore-map__reset,
.romiduo-explore-map .romiduo-explore-map__reset:hover,
.romiduo-explore-map .romiduo-explore-map__reset:focus-visible{
color: inherit !important;
background: rgba(0,0,0,0.04); /* match rd-breadcrumbs__chip */
border:0;
appearance:none;
-webkit-appearance:none;
cursor:pointer;
}
/* Background behaviour identical to destination breadcrumb */
.romiduo-explore-map .rd-breadcrumbs__chip:hover,
.romiduo-explore-map .rd-breadcrumbs__chip:focus-visible,
.romiduo-explore-map .romiduo-explore-map__reset:hover,
.romiduo-explore-map .romiduo-explore-map__reset:focus-visible{
background: rgba(0,0,0,0.08);
}
/* Optional: focus ring consistent */
.romiduo-explore-map .rd-breadcrumbs__chip:focus-visible,
.romiduo-explore-map .romiduo-explore-map__reset:focus-visible{
outline:2px solid rgba(0,0,0,.25);
outline-offset:2px;
}
/* -------------------------------------------------
Map canvas
------------------------------------------------- */
.romiduo-explore-map__canvas{
width:100%;
}
/* -------------------------------------------------
Markers
------------------------------------------------- */
/* Region marker: “navigation chip” */
.romiduo-region-marker{
background:transparent;
border:none;
}
.romiduo-region-marker__label{
display:inline-block;
padding:7px 12px;
border-radius:999px;
font-weight:700;
font-size:14px;
background:rgba(255,255,255,.92);
border:1px solid rgba(0,0,0,.14);
box-shadow:0 10px 24px rgba(0,0,0,.12);
white-space:nowrap;
backdrop-filter:saturate(180%) blur(10px);
}
/* Dot marker (country/city when JS uses dots) */
.romiduo-country-marker{
background:transparent;
border:none;
}
.romiduo-country-marker__dot{
display:block;
width:12px;
height:12px;
border-radius:50%;
background:rgba(0,0,0,.78);
border:2px solid #fff;
box-shadow:0 6px 16px rgba(0,0,0,.18);
}
/* -------------------------------------------------
Leaflet popup polish
------------------------------------------------- */
.leaflet-popup-content-wrapper{
border-radius:12px;
}
.leaflet-popup-content{
margin:10px 12px;
}
/* -------------------------
Mobile refinements
------------------------- */
@media (max-width: 480px){
.romiduo-explore-map__bar{
padding:8px 10px;
}
.romiduo-explore-map__count{
font-size:12px;
}
}