/* ========================================================================== Local Egypt Travels — front-end stylesheet Visual language: passport stamps, torn paper, warm desert palette. Colour tokens are overridden per-site from the dashboard (Settings → Brand). ========================================================================== */ /* ---------------------------------------------------------------- tokens */ :root { --brown: #6B4A2F; --brown-deep: #4A3220; --brown-soft: #8B6A4A; --gold: #E3A21A; --gold-light: #F2C15C; --gold-pale: #FBEBC4; --sky: #5BB3D4; --sky-deep: #2F7FA0; --sand: #F6EFE3; --sand-deep: #EFE3CE; --paper: #FFFCF6; --ink: #2C2013; --ink-soft: #6B5C4A; --ink-faint: #92806B; --line: #E3D5BC; --line-soft: #EFE5D3; --success: #2F7A4A; --danger: #B3402F; --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --shadow-sm: 0 1px 2px rgba(44,32,19,.06), 0 2px 6px rgba(44,32,19,.05); --shadow: 0 2px 4px rgba(44,32,19,.05), 0 10px 28px rgba(44,32,19,.09); --shadow-lg: 0 4px 10px rgba(44,32,19,.07), 0 24px 60px rgba(44,32,19,.14); --font-display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --wrap: 1200px; --wrap-narrow: 820px; --gutter: clamp(18px, 4vw, 40px); --section-y: clamp(56px, 8vw, 104px); --hero-overlay-a: rgba(40,27,15,.88); --hero-overlay-b: rgba(53,36,20,.72); --hero-overlay-c: rgba(60,40,20,.28); /* Dark bands (hero, footer, CTA) and text that sits on brand colours. These stay dark in both themes, so the band reads as a band either way. */ --band: #4A3220; --band-ink: #F4E9D9; --band-ink-soft: rgba(244,233,217,.82); --band-line: rgba(244,233,217,.18); --on-brown: #FFF8EC; --on-gold: #3B2810; color-scheme: light; } /* ========================================================================== DARK MODE Every colour is redefined here, so nothing falls back to a light value. Two triggers: the visitor's system setting, and an explicit choice stored on . The explicit choice always wins. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --brown: #C89A6B; --brown-deep: #E8D5BC; --brown-soft: #A98457; --gold: #E9B443; --gold-light: #F3CE78; --gold-pale: #3A2B14; --sky: #6BC2E0; --sky-deep: #9AD6EC; --sand: #16100A; --sand-deep: #1E1610; --paper: #241A11; --ink: #F2E8DA; --ink-soft: #C3B4A1; --ink-faint: #9A8B79; --line: #3A2C1E; --line-soft: #2E2318; --success: #5FBE86; --danger: #E8836F; --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3); --shadow: 0 2px 4px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45); --shadow-lg: 0 4px 10px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.6); --hero-overlay-a: rgba(10,7,4,.92); --hero-overlay-b: rgba(16,11,6,.82); --hero-overlay-c: rgba(22,15,8,.52); --band: #120C07; --band-ink: #F2E8DA; --band-ink-soft: rgba(242,232,218,.78); --band-line: rgba(242,232,218,.14); --on-brown: #1A120B; --on-gold: #241A11; color-scheme: dark; } } :root[data-theme='dark'] { --brown: #C89A6B; --brown-deep: #E8D5BC; --brown-soft: #A98457; --gold: #E9B443; --gold-light: #F3CE78; --gold-pale: #3A2B14; --sky: #6BC2E0; --sky-deep: #9AD6EC; --sand: #16100A; --sand-deep: #1E1610; --paper: #241A11; --ink: #F2E8DA; --ink-soft: #C3B4A1; --ink-faint: #9A8B79; --line: #3A2C1E; --line-soft: #2E2318; --success: #5FBE86; --danger: #E8836F; --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3); --shadow: 0 2px 4px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45); --shadow-lg: 0 4px 10px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.6); --hero-overlay-a: rgba(10,7,4,.92); --hero-overlay-b: rgba(16,11,6,.82); --hero-overlay-c: rgba(22,15,8,.52); --band: #120C07; --band-ink: #F2E8DA; --band-ink-soft: rgba(242,232,218,.78); --band-line: rgba(242,232,218,.14); --on-brown: #1A120B; --on-gold: #241A11; color-scheme: dark; } /* ---------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--sand); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--brown); text-decoration-color: rgba(107,74,47,.3); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--gold); } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--gold-light); color: var(--ink); } :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; } /* -------------------------------------------------------------- headings */ h1, h2, h3, h4, h5, h6, .display { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: .005em; margin: 0 0 .5em; color: var(--brown-deep); text-wrap: balance; } h1, .h1 { font-size: clamp(2.1rem, 5vw, 3.7rem); letter-spacing: -.01em; } h2, .h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); } h3, .h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); } h4, .h4 { font-size: 1.1rem; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } .eyebrow { font-family: var(--font-display); font-size: .8rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; } .eyebrow::before { content: ''; width: 26px; height: 2px; background: currentColor; border-radius: 2px; flex: none; } .eyebrow--center::before { display: none; } .lead { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ink-soft); line-height: 1.75; } .muted { color: var(--ink-faint); } .small { font-size: .875rem; } .tiny { font-size: .78rem; } /* --------------------------------------------------------------- layout */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: var(--wrap-narrow); } .section { padding-block: var(--section-y); position: relative; } .section--tight { padding-block: clamp(40px, 5vw, 64px); } .section--sand { background: var(--sand); } .section--paper { background: var(--paper); } .section--deep { background: var(--band); color: var(--band-ink); } .section--deep h1, .section--deep h2, .section--deep h3 { color: var(--band-ink); } .section--deep .lead, .section--deep p { color: var(--band-ink-soft); } /* A section can carry its own background photo, chosen in the dashboard. The photo is laid over the band's own colour at low opacity rather than tinted, so whatever the owner uploads the text keeps its contrast — and it needs no separate treatment for dark mode. */ .section__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .section__bg img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .13; } .section--deep .section__bg img, .cta-band .section__bg img { opacity: .2; } .section > .wrap { position: relative; z-index: 1; } .section-head { max-width: 720px; margin-bottom: clamp(30px, 4vw, 52px); } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .eyebrow { justify-content: center; } .section-head p { margin-bottom: 0; } .section-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: none; } .section-head--split > div:first-child { max-width: 660px; } .grid { display: grid; gap: clamp(18px, 2.4vw, 28px); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .stack > * + * { margin-top: var(--stack-gap, 18px); } /* -------------------------------------------------------- decorative bits */ /* Torn paper edge, drawn as an SVG mask so it sits on any background. */ .torn-top, .torn-bottom { position: relative; } .torn-top::before, .torn-bottom::after { content: ''; position: absolute; left: 0; right: 0; height: 22px; background: inherit; z-index: 2; pointer-events: none; } .torn-top::before { top: -21px; -webkit-mask: var(--torn-mask) repeat-x bottom / 220px 22px; mask: var(--torn-mask) repeat-x bottom / 220px 22px; } .torn-bottom::after { bottom: -21px; -webkit-mask: var(--torn-mask-flip) repeat-x top / 220px 22px; mask: var(--torn-mask-flip) repeat-x top / 220px 22px; } :root { --torn-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='22' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 22V9c14-4 26 2 40-1s24-8 38-5 22 9 36 7 24-9 38-6 24 8 34 5 20-6 34-4v17z'/%3E%3C/svg%3E"); --torn-mask-flip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='22' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0v13c14 4 26-2 40 1s24 8 38 5 22-9 36-7 24 9 38 6 24-8 34-5 20 6 34 4V0z'/%3E%3C/svg%3E"); } /* Round passport-stamp badge */ .stamp { display: inline-grid; place-items: center; width: 108px; height: 108px; border: 2px dashed var(--brown); border-radius: 50%; color: var(--brown); font-family: var(--font-display); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-align: center; line-height: 1.25; transform: rotate(-9deg); opacity: .65; padding: 10px; } .stamp--gold { border-color: var(--gold); color: var(--gold); } .stamp--light { border-color: rgba(255,248,236,.45); color: rgba(255,248,236,.8); } .dotted-rule { height: 0; border: 0; border-top: 2px dotted var(--line); margin: 0; } /* ------------------------------------------------------------- buttons */ .btn { --btn-bg: var(--brown); --btn-fg: var(--on-brown); --btn-bd: var(--brown); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-bd); border-radius: 999px; font-family: var(--font-display); font-size: .95rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease; box-shadow: 0 2px 0 rgba(44,32,19,.14); text-align: center; line-height: 1.2; } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(44,32,19,.2); text-decoration: none; } .btn:active { transform: translateY(0); } .btn--gold { --btn-bg: var(--gold); --btn-bd: var(--gold); --btn-fg: var(--on-gold); } .btn--gold:hover { --btn-bg: #d0940f; --btn-bd: #d0940f; } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--brown); --btn-bd: var(--brown); box-shadow: none; } .btn--ghost:hover { --btn-bg: var(--brown); --btn-fg: var(--on-brown); } .btn--light { --btn-bg: transparent; --btn-fg: var(--band-ink); --btn-bd: rgba(255,248,236,.55); box-shadow: none; } .btn--light:hover { --btn-bg: var(--band-ink); --btn-fg: #241A11; --btn-bd: var(--band-ink); } .btn--paper { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--paper); } .btn--whatsapp { --btn-bg: #25D366; --btn-bd: #25D366; --btn-fg: #08331a; } .btn--whatsapp:hover { --btn-bg: #1fb955; --btn-bd: #1fb955; } .btn--sm { padding: 10px 18px; font-size: .82rem; } .btn--lg { padding: 17px 34px; font-size: 1rem; } .btn--block { display: flex; width: 100%; } .btn[disabled], .btn[aria-disabled='true'] { opacity: .55; pointer-events: none; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } .btn-row--center { justify-content: center; } .link-more { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brown); text-decoration: none; font-weight: 500; } .link-more::after { content: '→'; transition: transform .16s ease; } .link-more:hover::after { transform: translateX(4px); } /* --------------------------------------------------------------- header */ .topbar { background: var(--band); color: var(--band-ink-soft); font-size: .8rem; letter-spacing: .02em; } .topbar .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: space-between; min-height: 40px; padding-block: 7px; } .topbar a { color: inherit; text-decoration: none; } .topbar a:hover { color: var(--gold-light); } .topbar-contact { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; } .topbar-contact span, .topbar-contact a { display: inline-flex; align-items: center; gap: 7px; } .topbar-socials { display: flex; gap: 12px; align-items: center; } .topbar-socials a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; } .topbar-socials a:hover { background: rgba(255,248,236,.12); } .topbar-socials svg { width: 15px; height: 15px; fill: currentColor; } .site-header { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--line-soft); transition: box-shadow .2s ease; } .site-header.is-stuck { box-shadow: 0 6px 24px rgba(44,32,19,.12); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding-block: 10px; } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; } .brand img { height: 50px; width: auto; } .brand-text { display: none; } .brand-name { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brown-deep); line-height: 1.1; } .brand-tag { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); } .nav { display: none; } .nav ul { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); list-style: none; margin: 0; padding: 0; } .nav a { font-family: var(--font-display); font-size: .92rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--brown-deep); text-decoration: none; padding: 8px 0; display: inline-block; position: relative; white-space: nowrap; } .nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } .nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); } .nav a[aria-current='page'] { color: var(--brown); } .header-actions { display: flex; align-items: center; gap: 10px; flex: none; } .header-actions .btn { padding: 11px 20px; font-size: .82rem; } .header-quote { display: none; } .theme-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; background: transparent; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--brown-deep); transition: border-color .15s ease, color .15s ease, background-color .15s ease; } .theme-toggle:hover { border-color: var(--gold); color: var(--gold); } .theme-toggle svg { width: 19px; height: 19px; fill: currentColor; } .theme-toggle .icon-moon { display: none; } :root[data-theme='dark'] .theme-toggle .icon-sun { display: none; } :root[data-theme='dark'] .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .theme-toggle .icon-sun { display: none; } :root:not([data-theme='light']) .theme-toggle .icon-moon { display: block; } :root[data-theme='light'] .theme-toggle .icon-sun { display: block; } :root[data-theme='light'] .theme-toggle .icon-moon { display: none; } } /* WhatsApp shortcut in the mobile header bar */ .header-wa { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; background: #25D366; border-radius: 10px; color: #fff; text-decoration: none; transition: transform .15s ease; } .header-wa:hover { transform: scale(1.06); } .header-wa svg { width: 22px; height: 22px; fill: currentColor; } .nav-toggle { display: inline-grid; place-items: center; width: 46px; height: 46px; background: transparent; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--brown-deep); } .nav-toggle:hover { border-color: var(--brown); } .nav-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded='true'] .icon-open { display: none; } .nav-toggle[aria-expanded='true'] .icon-close { display: block; } /* mobile drawer */ .mobile-nav { position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); background: var(--paper); box-shadow: -20px 0 60px rgba(44,32,19,.28); transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 100; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 22px var(--gutter) 40px; } .mobile-nav.is-open { transform: translateX(0); } .mobile-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .mobile-nav ul { list-style: none; margin: 0 0 22px; padding: 0; } .mobile-nav li + li { border-top: 1px dotted var(--line); } .mobile-nav ul a { display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; text-decoration: none; font-family: var(--font-display); font-size: 1.06rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brown-deep); } .mobile-nav ul a[aria-current='page'] { color: var(--gold); } /* Buttons in the drawer keep their own centred layout. */ .mobile-nav .btn { justify-content: center; } .mobile-nav .btn { margin-bottom: 10px; } .mobile-nav__contact { margin-top: 24px; font-size: .9rem; color: var(--ink-soft); } .mobile-nav__contact a { display: block; padding: 5px 0; color: var(--brown); } .nav-backdrop { position: fixed; inset: 0; background: rgba(44,32,19,.5); opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s; z-index: 90; backdrop-filter: blur(2px); } .nav-backdrop.is-open { opacity: 1; visibility: visible; } .skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--band); color: var(--band-ink); padding: 12px 20px; border-radius: 0 0 8px 8px; text-decoration: none; transition: top .18s ease; } .skip-link:focus { top: 0; } /* ----------------------------------------------------------------- hero */ .hero { position: relative; background: var(--band); color: var(--band-ink); isolation: isolate; overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* How much of the screen the hero takes, chosen in the dashboard. The content is centred in whatever height is set, so a tall hero does not leave the headline stranded at the top. */ .hero { display: flex; align-items: center; } .hero__inner { flex: 1; } /* Where the words sit against the photograph, chosen in the dashboard. */ .hero--at-top { align-items: flex-start; } .hero--at-middle { align-items: center; } .hero--at-bottom { align-items: flex-end; } .hero--short { min-height: 52vh; } .hero--medium { min-height: 66vh; } .hero--tall { min-height: 82vh; } .hero--full { min-height: 100vh; min-height: 100svh; } .hero--auto { min-height: 0; } /* "Show the whole picture": on a wide screen the hero takes the photograph's own proportions, so nothing is cropped at all. Narrow screens keep their height — the text needs the room — and the band colour fills the rest. */ .hero--contain .hero__media img { object-fit: contain; } @media (min-width: 900px) { .hero--contain { aspect-ratio: var(--hero-ratio, 8 / 5); min-height: 0; } } @media (min-width: 900px) { .hero--auto { aspect-ratio: var(--hero-ratio, 8 / 5); } } .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, var(--hero-overlay-a) 0%, var(--hero-overlay-b) 42%, var(--hero-overlay-c) 100%); } .hero__inner { padding-block: clamp(64px, 11vw, 132px); position: relative; } .hero__content { max-width: 680px; } .hero h1 { color: var(--band-ink); margin-bottom: 20px; text-shadow: 0 2px 20px rgba(0,0,0,.28); } .hero .lead { color: var(--band-ink-soft); font-size: clamp(1.02rem, 1.7vw, 1.2rem); max-width: 620px; } .hero .eyebrow { color: var(--gold-light); } .hero .btn-row { margin-top: 30px; } .hero__points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 11px; } .hero__points li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; color: var(--band-ink-soft); } .hero__points li::before { content: ''; flex: none; width: 20px; height: 20px; margin-top: 3px; background: var(--gold); border-radius: 50%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat; } .hero__stamp { position: absolute; right: clamp(-30px, 2vw, 60px); top: 12%; width: clamp(120px, 15vw, 190px); height: clamp(120px, 15vw, 190px); opacity: .16; pointer-events: none; z-index: -1; filter: brightness(0) invert(1); } /* page hero (interior pages) */ .page-hero { position: relative; background: var(--band); color: var(--band-ink); padding-block: clamp(46px, 7vw, 86px); isolation: isolate; overflow: hidden; } .page-hero__media { position: absolute; inset: 0; z-index: -2; } .page-hero__media img { width: 100%; height: 100%; object-fit: cover; } .page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--hero-overlay-a), var(--hero-overlay-b) 55%, var(--hero-overlay-c)); } .page-hero h1 { color: var(--band-ink); margin-bottom: 14px; } .page-hero .lead { color: var(--band-ink-soft); max-width: 720px; } .page-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; font-size: .9rem; color: var(--band-ink-soft); } .page-hero__meta > * { display: inline-flex; align-items: center; gap: 8px; } /* ---------------------------------------------------------- breadcrumbs */ .breadcrumbs { background: var(--sand-deep); font-size: .82rem; } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 11px 0; } .breadcrumbs li { display: flex; align-items: center; gap: 8px; color: var(--ink-faint); } .breadcrumbs li + li::before { content: '/'; color: var(--line); } .breadcrumbs a { color: var(--brown); text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } .breadcrumbs [aria-current] { color: var(--ink-soft); } /* ---------------------------------------------------------------- cards */ .card { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; height: 100%; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold-light); } .card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-deep); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.6,.2,1); } .card:hover .card__media img { transform: scale(1.05); } .card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; gap: 10px; } .card__title { font-size: 1.16rem; margin: 0; line-height: 1.25; } .card__title a { color: inherit; text-decoration: none; } .card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; } .card__title a:hover { color: var(--brown); } .card__text { color: var(--ink-soft); font-size: .92rem; margin: 0; } .card__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--ink-faint); } .card__meta > * { display: inline-flex; align-items: center; gap: 6px; } .card__foot { margin-top: auto; padding-top: 14px; border-top: 1px dotted var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card__price { font-family: var(--font-display); font-size: 1.05rem; color: var(--brown-deep); line-height: 1.2; } .card__price small { display: block; font-family: var(--font-body); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } .card__price--quote { font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brown); } .card__cta { position: relative; z-index: 2; } .badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--gold); color: var(--on-gold); font-family: var(--font-display); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(44,32,19,.22); } .badge--right { left: auto; right: 12px; } .badge--brown { background: var(--band); color: var(--band-ink); } .badge--sky { background: var(--sky); color: #06303f; } .tag { display: inline-flex; align-items: center; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-display); padding: 4px 11px; border-radius: 999px; background: var(--sand-deep); color: var(--brown); border: 1px solid var(--line); text-decoration: none; } a.tag:hover { background: var(--gold-light); border-color: var(--gold); } .tag-row { display: flex; flex-wrap: wrap; gap: 8px; } /* destination card — taller, image-led */ .card--destination .card__media { aspect-ratio: 3 / 4; } .card--destination { border: none; box-shadow: var(--shadow); } .card--destination .card__body { position: absolute; inset: auto 0 0 0; background: linear-gradient(to top, rgba(32,21,11,.92) 12%, rgba(32,21,11,.6) 55%, transparent); color: #FFF8EC; padding: 44px 20px 20px; } .card--destination .card__title { color: #FFF8EC; } .card--destination .card__text { color: rgba(255,248,236,.8); } .card--destination .card__meta { color: rgba(255,248,236,.72); } /* programme card — horizontal on wide screens */ .card--program .card__media { aspect-ratio: 16 / 9; } .program-days { display: inline-flex; align-items: baseline; gap: 5px; font-family: var(--font-display); color: var(--brown-deep); } .program-days b { font-size: 1.5rem; line-height: 1; } .program-days span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } /* experience tile */ .tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; height: 100%; } .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); } .tile__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--gold-pale); color: var(--brown); border: 1px solid rgba(227,162,26,.35); } .tile__icon svg { width: 26px; height: 26px; } .tile h3 { font-size: 1.06rem; margin: 0; } .tile p { font-size: .9rem; color: var(--ink-soft); margin: 0; } /* feature (why us) */ .feature { display: flex; gap: 16px; align-items: flex-start; } .feature__icon { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--band); color: var(--gold-light); border: 2px dashed rgba(227,162,26,.5); } .feature__icon svg { width: 22px; height: 22px; } .feature h3 { font-size: 1.04rem; margin: 2px 0 6px; } .feature p { font-size: .92rem; color: var(--ink-soft); margin: 0; } .section--deep .feature__icon { background: rgba(255,248,236,.1); color: var(--gold-light); } .section--deep .feature p { color: rgba(244,233,217,.78); } /* --------------------------------------------------------------- panels */ .panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3.2vw, 38px); box-shadow: var(--shadow-sm); } .panel--sand { background: var(--sand-deep); border-color: var(--line); } .panel--gold { background: linear-gradient(135deg, var(--gold-pale), #FDF6E4); border-color: rgba(227,162,26,.4); } .panel--deep { background: var(--band); color: var(--band-ink); border: none; } .panel--deep h2, .panel--deep h3 { color: var(--band-ink); } .panel--outline { background: transparent; border: 2px dashed var(--line); box-shadow: none; } .sticky-panel { position: sticky; top: 96px; } /* ticket-style price box */ .price-box { text-align: center; } .price-box__amount { font-family: var(--font-display); font-size: 2.1rem; color: var(--brown-deep); line-height: 1.05; } .price-box__label { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); } .price-box__note { font-size: .82rem; color: var(--ink-soft); margin-top: 6px; } /* ------------------------------------------------------------ itinerary */ .itinerary { list-style: none; margin: 0; padding: 0; position: relative; } .itinerary::before { content: ''; position: absolute; left: 21px; top: 10px; bottom: 26px; width: 2px; border-left: 2px dotted var(--line); } .itinerary > li { position: relative; padding: 0 0 26px 62px; } .itinerary > li:last-child { padding-bottom: 0; } .itinerary__marker { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); border: 2px solid var(--gold); display: grid; place-items: center; font-family: var(--font-display); font-size: .78rem; font-weight: 600; color: var(--brown-deep); line-height: 1; text-align: center; } .itinerary__marker small { display: block; font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); } .itinerary h3 { font-size: 1.08rem; margin: 8px 0 6px; } .itinerary p { font-size: .94rem; color: var(--ink-soft); margin: 0 0 8px; } .itinerary__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--ink-faint); } .itinerary__meta b { font-weight: 600; color: var(--ink-soft); } /* ------------------------------------------------------------- includes */ .ticklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ticklist li { display: flex; gap: 11px; align-items: flex-start; font-size: .94rem; } .ticklist li::before { content: ''; flex: none; width: 19px; height: 19px; margin-top: 3px; border-radius: 50%; background: var(--success); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/15px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/15px no-repeat; } .ticklist--cross li::before { background: var(--danger); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E"); } .ticklist--star li::before { background: var(--gold); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 2 2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 2 2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17.3 5.9 20.6l1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E"); } /* ---------------------------------------------------------- accordion */ .accordion { border-top: 1px solid var(--line); } .accordion__item { border-bottom: 1px solid var(--line); } .accordion__btn { width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; background: none; border: 0; cursor: pointer; text-align: left; padding: 19px 2px; color: var(--brown-deep); font-family: var(--font-display); font-size: 1.04rem; font-weight: 500; line-height: 1.35; } .accordion__btn:hover { color: var(--brown); } .accordion__icon { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); position: relative; margin-top: 2px; transition: transform .22s ease, border-color .22s ease, background-color .22s ease; } .accordion__icon::before, .accordion__icon::after { content: ''; position: absolute; inset: 50% 25%; height: 2px; margin-top: -1px; background: var(--brown); border-radius: 2px; transition: transform .22s ease; } .accordion__icon::after { transform: rotate(90deg); } .accordion__btn[aria-expanded='true'] .accordion__icon { background: var(--gold); border-color: var(--gold); } .accordion__btn[aria-expanded='true'] .accordion__icon::after { transform: rotate(0); } .accordion__panel { display: none; padding: 0 2px 22px; color: var(--ink-soft); font-size: .95rem; max-width: 80ch; } .accordion__panel.is-open { display: block; } .accordion__panel > :last-child { margin-bottom: 0; } /* --------------------------------------------------------------- forms */ .field { margin-bottom: 18px; } .field label, .field > .field-label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brown-deep); margin-bottom: 7px; } .field .req { color: var(--danger); } .field-hint { display: block; font-size: .8rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-faint); margin-top: 4px; } .input, .field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=url], .field input[type=number], .field input[type=date], .field input[type=time], .field input[type=password], .field input[type=search], .field select, .field textarea { width: 100%; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .96rem; font-family: inherit; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; min-height: 46px; } .field textarea { min-height: 128px; resize: vertical; line-height: 1.6; } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236B4A2F' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 22px; padding-right: 38px; } .input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227,162,26,.22); } .field input::placeholder, .field textarea::placeholder { color: #B5A38C; } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); } .field-error { display: block; color: var(--danger); font-size: .82rem; margin-top: 5px; font-weight: 500; } .field-grid { display: grid; gap: 0 18px; grid-template-columns: 1fr; } @media (min-width: 620px) { .field-grid--2 { grid-template-columns: 1fr 1fr; } .field-grid--3 { grid-template-columns: repeat(3, 1fr); } } .choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; } /* Specificity has to beat `.field label` so these read as options, not labels. */ .field .choice, label.choice, .choice { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-size: .92rem; line-height: 1.45; transition: border-color .15s ease, background-color .15s ease; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); margin: 0; } .choice:hover { border-color: var(--gold); } .choice input { accent-color: var(--brown); width: 18px; height: 18px; flex: none; margin: 1px 0 0; } .choice > span { flex: 1; min-width: 0; } .choice:has(input:checked) { border-color: var(--gold); background: var(--gold-pale); } .choice input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .form-note { font-size: .82rem; color: var(--ink-faint); } fieldset { border: 0; padding: 0; margin: 0 0 8px; } legend { font-family: var(--font-display); font-size: 1.05rem; color: var(--brown-deep); padding: 0; margin-bottom: 14px; letter-spacing: .04em; } .form-step-title { display: flex; align-items: center; gap: 12px; margin: 30px 0 18px; padding-top: 22px; border-top: 2px dotted var(--line); } .form-step-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .form-step-title span { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--band); color: var(--gold-light); display: grid; place-items: center; font-family: var(--font-display); font-size: .9rem; } .form-step-title h2, .form-step-title h3 { margin: 0; font-size: 1.16rem; } .honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ---------------------------------------------------------------- alerts */ .alert { display: flex; gap: 12px; align-items: flex-start; padding: 15px 18px; border-radius: var(--radius-sm); border: 1px solid; font-size: .93rem; margin-bottom: 20px; } .alert--success { background: #EEF7F1; border-color: #BFE0CC; color: #1F5B36; } .alert--error { background: #FDF0ED; border-color: #F0C7BD; color: #8C2F20; } .alert--warning { background: #FDF6E4; border-color: #EBD9A8; color: #7A5B0E; } .alert--info { background: #EDF6FA; border-color: #BFDFEC; color: #205A72; } .alert p { margin: 0; } .alert svg { flex: none; width: 20px; height: 20px; margin-top: 1px; } /* ------------------------------------------------------------- filters */ .filters { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 28px; box-shadow: var(--shadow-sm); } .filters__row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; } .filters .field { margin-bottom: 0; } .filters__actions { display: flex; gap: 10px; } .filters__active { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dotted var(--line); align-items: center; } .chip { display: inline-flex; align-items: center; gap: 7px; background: var(--sand-deep); border: 1px solid var(--line); padding: 5px 8px 5px 12px; border-radius: 999px; font-size: .8rem; color: var(--brown-deep); text-decoration: none; } .chip:hover { border-color: var(--danger); color: var(--danger); } .chip span { font-weight: 600; } .result-count { font-size: .9rem; color: var(--ink-faint); margin-bottom: 18px; } /* ---------------------------------------------------------- pagination */ .pagination { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; align-items: center; margin-top: 44px; list-style: none; padding: 0; } .pagination a, .pagination span { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--brown-deep); text-decoration: none; font-family: var(--font-display); font-size: .92rem; } .pagination a:hover { border-color: var(--gold); background: var(--gold-pale); } .pagination [aria-current='page'] { background: var(--band); border-color: var(--band); color: var(--band-ink); } .pagination .is-disabled { opacity: .4; pointer-events: none; } /* ------------------------------------------------------------- article */ .prose { font-size: 1.02rem; line-height: 1.8; color: var(--ink); max-width: 72ch; } .prose > :first-child { margin-top: 0; } .prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin: 1.9em 0 .55em; } .prose h3 { font-size: 1.22rem; margin: 1.6em 0 .5em; } .prose h4 { font-size: 1.05rem; margin: 1.5em 0 .5em; } .prose p { margin: 0 0 1.25em; } .prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.3em; } .prose li { margin-bottom: .5em; } .prose li::marker { color: var(--gold); } .prose a { color: var(--brown); font-weight: 500; } .prose img { border-radius: var(--radius); margin: 1.6em 0; box-shadow: var(--shadow-sm); } .prose blockquote { margin: 1.8em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--gold); font-size: 1.08rem; color: var(--brown-deep); font-style: italic; } .prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .94rem; } .prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; } .prose th { background: var(--sand-deep); font-family: var(--font-display); font-weight: 500; letter-spacing: .04em; } .prose hr { border: 0; border-top: 2px dotted var(--line); margin: 2.2em 0; } .prose figure { margin: 1.8em 0; } .prose figcaption { font-size: .85rem; color: var(--ink-faint); margin-top: 8px; text-align: center; } .prose code { background: var(--sand-deep); padding: 2px 6px; border-radius: 4px; font-size: .9em; } .prose--wide { max-width: none; } .table-scroll { overflow-x: auto; } /* ------------------------------------------------------------- gallery */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } /* One photograph per screen is a lot of scrolling on a phone; two reads better. */ @media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; } } .gallery button { padding: 0; border: 0; background: var(--sand-deep); cursor: zoom-in; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; } .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .gallery button:hover img { transform: scale(1.06); } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(30,20,10,.94); display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px); } .lightbox.is-open { display: flex; } .lightbox img { max-width: 100%; max-height: 86vh; border-radius: var(--radius-sm); object-fit: contain; } .lightbox__close, .lightbox__nav { position: absolute; background: rgba(255,248,236,.14); border: 0; color: #FFF8EC; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 22px; } .lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,248,236,.3); } .lightbox__close { top: 18px; right: 18px; } .lightbox__nav--prev { left: 16px; top: 50%; transform: translateY(-50%); } .lightbox__nav--next { right: 16px; top: 50%; transform: translateY(-50%); } .lightbox__caption { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(255,248,236,.8); font-size: .85rem; } /* -------------------------------------------------------- testimonials */ .quote-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px 24px; position: relative; height: 100%; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-sm); } .quote-card::before { content: '"'; position: absolute; top: 4px; right: 20px; font-family: Georgia, serif; font-size: 5rem; line-height: 1; color: var(--gold); opacity: .22; } .quote-card blockquote { margin: 0; font-size: .98rem; color: var(--ink-soft); line-height: 1.7; } .quote-card__person { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px dotted var(--line); } .quote-card__person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; } .quote-card__name { font-family: var(--font-display); font-size: .98rem; color: var(--brown-deep); letter-spacing: .03em; } .quote-card__where { font-size: .78rem; color: var(--ink-faint); } .stars { display: inline-flex; gap: 2px; color: var(--gold); } .stars svg { width: 15px; height: 15px; fill: currentColor; } /* -------------------------------------------------------------- team */ .team-card { text-align: center; } .team-card__photo { width: 100%; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--sand-deep); margin-bottom: 14px; border: 1px solid var(--line); } .team-card__photo img { width: 100%; height: 100%; object-fit: cover; } .team-card h3 { font-size: 1.06rem; margin: 0 0 2px; } .team-card__role { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; } .team-card p { font-size: .9rem; color: var(--ink-soft); } .team-card__links { display: flex; gap: 10px; justify-content: center; margin-top: 10px; } .team-card__links a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--brown); } .team-card__links a:hover { background: var(--gold-pale); border-color: var(--gold); } .team-card__links svg { width: 15px; height: 15px; fill: currentColor; } /* ---------------------------------------------------------- stat strip */ .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2px; background: var(--line); border-radius: var(--radius); overflow: hidden; } .stat { background: var(--paper); padding: 22px 20px; text-align: center; } .stat b { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--brown-deep); line-height: 1.1; } .stat span { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } /* --------------------------------------------------------------- CTA */ .cta-band { background: var(--band); color: var(--band-ink); position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 12% 30%, rgba(227,162,26,.22), transparent 42%), radial-gradient(circle at 88% 70%, rgba(91,179,212,.18), transparent 46%); } .cta-band .wrap { position: relative; } .cta-band h2 { color: var(--band-ink); } .cta-band p { color: var(--band-ink-soft); } .cta-inner { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; } .cta-inner > div:first-child { max-width: 620px; } /* ------------------------------------------------------------ WhatsApp */ /* The cookie notice is pinned to the same corner. --cookie-bar-h is set by the script while that notice is on screen, so the button lifts above it rather than sitting underneath it, unclickable. */ .wa-launcher { position: fixed; bottom: calc(20px + var(--cookie-bar-h, 0px)); z-index: 96; transition: bottom .34s cubic-bezier(.2,.7,.2,1), transform .2s ease; width: 58px; height: 58px; border-radius: 50%; background: #25D366; border: 0; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 22px rgba(37,211,102,.45); transition: transform .2s ease; } .wa-launcher:hover { transform: scale(1.07); } .wa-launcher svg { width: 32px; height: 32px; fill: #fff; } .wa-launcher::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(37,211,102,.45); animation: waPulse 2.6s ease-out infinite; } @keyframes waPulse { 0% { transform: scale(.9); opacity: .9 } 70% { transform: scale(1.3); opacity: 0 } 100% { opacity: 0 } } .wa-right .wa-launcher, .wa-right .wa-popup { right: 20px; } .wa-left .wa-launcher, .wa-left .wa-popup { left: 20px; } .wa-launcher__badge { position: absolute; top: -3px; right: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 11px; display: grid; place-items: center; font-weight: 700; border: 2px solid var(--sand); } .wa-popup { position: fixed; bottom: calc(90px + var(--cookie-bar-h, 0px)); z-index: 97; transition: bottom .34s cubic-bezier(.2,.7,.2,1), opacity .2s ease, visibility .2s ease, transform .2s ease; width: min(330px, calc(100vw - 40px)); background: var(--paper); border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97); transition: opacity .24s ease, transform .24s ease, visibility .24s; border: 1px solid var(--line); } .wa-popup.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .wa-popup__head { background: #0f5c39; color: #fff; padding: 14px 16px; display: flex; gap: 11px; align-items: center; } .wa-popup__avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: none; overflow: hidden; } .wa-popup__avatar img { width: 100%; height: 100%; object-fit: cover; } .wa-popup__avatar svg { width: 22px; height: 22px; fill: #fff; } .wa-popup__name { font-weight: 600; font-size: .95rem; line-height: 1.2; } .wa-popup__status { font-size: .74rem; opacity: .85; display: flex; align-items: center; gap: 5px; } .wa-popup__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #55e08a; } .wa-popup__close { margin-left: auto; background: none; border: 0; color: #fff; cursor: pointer; font-size: 20px; line-height: 1; opacity: .8; padding: 4px; } .wa-popup__close:hover { opacity: 1; } .wa-popup__body { padding: 18px 16px; background: #EDE3D6; background-image: radial-gradient(rgba(107,74,47,.06) 1px, transparent 1px); background-size: 14px 14px; } .wa-popup__bubble { background: #fff; border-radius: 4px 14px 14px 14px; padding: 12px 14px; font-size: .9rem; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.1); position: relative; } .wa-popup__bubble strong { display: block; margin-bottom: 4px; color: var(--brown-deep); } .wa-popup__time { display: block; text-align: right; font-size: .68rem; color: #9b9b9b; margin-top: 4px; } .wa-popup__foot { padding: 14px 16px; } /* --------------------------------------------------------------- footer */ .site-footer { background: var(--band); color: var(--band-ink-soft); padding-block: clamp(46px, 6vw, 72px) 0; font-size: .92rem; } .footer-grid { display: grid; gap: 34px; grid-template-columns: 1fr; } @media (min-width: 720px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } } @media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; } } .site-footer h3 { color: var(--band-ink); font-size: .92rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; font-weight: 500; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .site-footer a { color: var(--band-ink-soft); text-decoration: none; } .site-footer a:hover { color: var(--gold-light); } .footer-brand img { height: 72px; width: auto; margin-bottom: 16px; filter: brightness(0) invert(1); opacity: .92; } .footer-brand p { color: var(--band-ink-soft); max-width: 44ch; } .footer-contact li { display: flex; gap: 10px; align-items: flex-start; } .footer-contact svg { width: 17px; height: 17px; fill: var(--gold); flex: none; margin-top: 3px; } .footer-socials { display: flex; gap: 10px; margin-top: 18px; } .footer-socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--band-line); display: grid; place-items: center; color: var(--band-ink-soft); } .footer-socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--on-gold); } .footer-socials svg { width: 17px; height: 17px; fill: currentColor; } .footer-bottom { margin-top: 44px; padding-block: 20px; border-top: 1px solid var(--band-line); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; font-size: .84rem; color: var(--band-ink-soft); } .footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 20px; } /* -------------------------------------------------------------- misc */ .empty-state { text-align: center; padding: clamp(40px, 7vw, 80px) 24px; border: 2px dashed var(--line); border-radius: var(--radius-lg); background: var(--paper); } .empty-state h3 { margin-bottom: 8px; } .empty-state p { color: var(--ink-soft); max-width: 46ch; margin-inline: auto; } .split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-left { grid-template-columns: 1.25fr 1fr; } .split--wide-right { grid-template-columns: 1fr 1.25fr; } } .split__media { position: relative; } .split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; } .split__media .stamp { position: absolute; bottom: -24px; right: -12px; background: var(--paper); } .detail-layout { display: grid; gap: clamp(28px, 3.6vw, 48px); } @media (min-width: 980px) { .detail-layout { grid-template-columns: minmax(0,1fr) 360px; align-items: start; } } .info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .info-list li { display: flex; gap: 14px; justify-content: space-between; padding: 11px 0; border-bottom: 1px dotted var(--line); font-size: .92rem; } .info-list li:last-child { border-bottom: 0; } .info-list dt, .info-list b { color: var(--ink-faint); font-weight: 500; } .info-list span:last-child, .info-list dd { color: var(--brown-deep); font-weight: 500; text-align: right; margin: 0; } .error-page { text-align: center; padding-block: clamp(60px, 10vw, 140px); } .error-page__code { font-family: var(--font-display); font-size: clamp(5rem, 16vw, 10rem); line-height: .9; color: var(--gold); opacity: .32; } .map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/10; background: var(--sand-deep); } .map-embed iframe { width: 100%; height: 100%; border: 0; display: block; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .text-center { text-align: center; } .mt-0 { margin-top: 0 } .mb-0 { margin-bottom: 0 } .mt-1 { margin-top: 10px } .mt-2 { margin-top: 20px } .mt-3 { margin-top: 30px } .mt-4 { margin-top: 44px } .mb-1 { margin-bottom: 10px } .mb-2 { margin-bottom: 20px } .mb-3 { margin-bottom: 30px } .flex-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ------------------------------------------------------ reveal on scroll Only ever hidden when JavaScript is running, so content is never lost to a blocked script, a crawler, or a reader with JS disabled. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------- breakpoints */ @media (min-width: 560px) { .brand-text { display: block; } } @media (min-width: 1040px) { .nav { display: block; } .nav-toggle { display: none; } .header-quote { display: inline-flex; } .header-wa { display: none; } } @media (max-width: 1039px) { .topbar-contact .topbar-hide-sm { display: none; } } @media (max-width: 719px) { .topbar { display: none; } .brand img { height: 42px; } .header-inner { min-height: 66px; } .wa-launcher { bottom: calc(16px + var(--cookie-bar-h, 0px)); width: 54px; height: 54px; } .wa-popup { bottom: calc(82px + var(--cookie-bar-h, 0px)); } .cta-inner { flex-direction: column; align-items: flex-start; } .sticky-panel { position: static; } } /* ------------------------------------------------------------- printing */ @media print { .site-header, .topbar, .site-footer, .wa-launcher, .wa-popup, .nav-toggle, .breadcrumbs, .btn { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .hero, .page-hero { background: #fff !important; color: #000 !important; padding-block: 12pt; } .hero h1, .page-hero h1, .hero .lead, .page-hero .lead { color: #000 !important; } .card, .panel { break-inside: avoid; box-shadow: none; } a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; } } /* ========================================================================== COOKIE BAR ========================================================================== */ .cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--paper); border-top: 2px solid var(--gold); box-shadow: 0 -8px 34px rgba(44,32,19,.22); padding: 16px var(--gutter); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(110%); transition: transform .34s cubic-bezier(.2,.7,.2,1); } .cookie-bar.is-open { transform: translateY(0); } .cookie-bar__inner { max-width: var(--wrap); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; } .cookie-bar__text { flex: 1 1 340px; min-width: 0; } .cookie-bar__text strong { display: block; font-family: var(--font-display); font-size: 1rem; letter-spacing: .05em; color: var(--brown-deep); margin-bottom: 3px; } .cookie-bar__text p { margin: 0; font-size: .88rem; color: var(--ink-soft); max-width: 72ch; } .cookie-bar__text a { color: var(--brown); font-weight: 500; } .cookie-bar__actions { display: flex; gap: 10px; flex-wrap: wrap; flex: none; } @media (max-width: 719px) { /* The 86px that used to be reserved here was an attempt to keep the WhatsApp button clear; the button now lifts itself, so the bar can be its own size. */ .cookie-bar { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .cookie-bar__actions { width: 100%; } .cookie-bar__actions .btn { flex: 1; } } /* A section's own picture, shown as a wide band above its heading. The height is capped in viewport units so a tall photograph cannot push the content off the screen, and object-position follows the focus point set in the library. */ .section__banner { margin: 0 0 clamp(26px, 3.5vw, 44px); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--sand); } .section__banner img { display: block; width: 100%; height: clamp(180px, 30vw, 380px); object-fit: cover; object-position: 50% 50%; } .section--deep .section__banner { box-shadow: none; background: rgba(0,0,0,.2); }