/**
* Q8tly — Homepage scaffold styles (Module 6 C1 — D-122; spec §3.4 + §14.2)
*
* Scope: every rule is keyed to .q8-home-section / .q8-strip--snap, so this
* sitewide handle is inert off page 311 until [q8tly_home_section] blocks
* render content (conditional absence — pending blocks emit comments only).
*
* Contents (C1 = shared primitives ONLY — per-block card/layout CSS ships
* with its own chunk, C2–C7):
* 1. §14.2 — the 29 Module 6 tokens (verbatim from the spec).
* 2. §3.4.2/3.4.3 — block rhythm: 96/72/56 gaps split as half-padding on
* each section; full-bleed tonal backgrounds; 1240px contained inner.
* 3. §3.4.4 — shared section-header shape (kicker + see-link / title / rule).
* 4. .q8-strip--snap — the shared horizontal scroll-snap strip (§6/§8).
*
* RTL: logical properties throughout (Part H item 7 — the AR fence must be
* cheap to lift); anything direction-specific later rides [dir="rtl"].
* Breakpoints per §12.1: desktop ≥1025 / tablet 641–1024 / mobile ≤640.
*/
/* ------------------------------------------------------------------ *
* 1. §14.2 tokens
* ------------------------------------------------------------------ */
:root {
/* Hero */
--ekg-hero-min-height-desktop: 560px;
--ekg-hero-max-height-desktop: 640px;
--ekg-hero-min-height-tablet: 480px;
--ekg-hero-top-padding: 80px;
--ekg-hero-bottom-padding: 96px;
--ekg-hero-column-gap: 64px;
--ekg-hero-grid: 3fr 2fr;
--ekg-browse-card-max-width: 440px;
--ekg-browse-card-padding: 32px;
/* Block rhythm */
--ekg-block-gap-desktop: 96px;
--ekg-block-gap-tablet: 72px;
--ekg-block-gap-mobile: 56px;
--ekg-section-title-size: 40px;
--ekg-section-rule-width: 48px;
/* Area cards (§6) */
--ekg-area-card-width-desktop: 184px;
--ekg-area-card-width-tablet: 220px;
--ekg-area-card-width-mobile: 240px;
--ekg-area-photo-aspect: 3 / 4;
/* Branded no-photo fallback (area-cards brief §2.2). Brand tokens (advisor
call 2026-06-22) so the plates match the site exactly + auto-track any
palette change — supersedes the brief's approximate #1F2D4E/#E0503A. */
--ekg-area-fallback-bg: var(--ink);
--ekg-area-fallback-accent: var(--accent);
/* Category cards (§7) */
--ekg-cat-card-width-desktop: 280px;
--ekg-cat-card-width-tablet: 260px;
--ekg-cat-card-width-mobile: 240px;
--ekg-cat-photo-aspect: 4 / 3;
/* Trending (§8) — M3 archive card reuse, scroll-strip widths */
--ekg-trending-card-width-desktop: 184px;
--ekg-trending-card-width-tablet: 220px;
--ekg-trending-card-width-mobile: 240px;
/* Photo aspect inherited from the M3 archive card (4:3) — no new token */
/* Recently added strip (concept C, 2026-09-25) — 3:4 listing-photo tiles;
≥1025 is a 6-up grid inside the 1240 container, below that a snap strip */
--ekg-recent-tile-width-tablet: 176px;
--ekg-recent-tile-width-mobile: 150px;
--ekg-recent-photo-aspect: 3 / 4;
/* Latest (§9) */
--ekg-latest-card-width: 576px;
--ekg-latest-photo-aspect: 16 / 9;
--ekg-latest-photo-aspect-mobile: 3 / 2;
/* Seasonal (§10) */
--ekg-seasonal-bg: var(--accent-soft);
--ekg-seasonal-photo-aspect-desktop: 3 / 4;
--ekg-seasonal-photo-aspect-tablet: 4 / 3;
--ekg-seasonal-photo-aspect-mobile: 3 / 2;
/* v5.1 correction 7 (C7): §10.4.1's --accent kicker on the --accent-soft
band is rust-on-rust — the same surface-relative class as correction 1;
the rust band takes paper-tone. Bader confirms at M8 light-up. */
--ekg-seasonal-kicker-ink: var(--accent-ink); /* reskin §2.2: deep coral on the light --accent-soft band (a white kicker would vanish there) */
/* For Business (§11) */
--ekg-forbiz-bg: var(--ink);
--ekg-forbiz-ink: var(--paper);
/* v5.1 correction 1 (Bader, C3 eyeball): S2-16's --ink-soft kicker maps to
LIGHT surfaces; the dark band takes the inverse — faint cream. */
--ekg-forbiz-kicker-ink: rgba(255, 255, 255, 0.55); /* reskin §2.2: white @ 55% on the --ink navy band */
--ekg-forbiz-padding-desktop: 64px;
--ekg-forbiz-padding-tablet: 48px;
--ekg-forbiz-padding-mobile: 40px;
/* Featured Guide (§5 — M8-02) */
--ekg-feat-photo-aspect-a: 2 / 1; /* §5.4.2 Mode A */
--ekg-feat-photo-aspect-b: 3 / 4; /* §5.4.2 Mode B */
--ekg-feat-photo-aspect-b-tablet: 4 / 3; /* §5.6 tablet collapse */
--ekg-feat-title-size: 48px; /* §5.4.1 */
--ekg-feat-title-size-mobile: 32px; /* §5.6 mobile */
}
/* ------------------------------------------------------------------ *
* 2. Block rhythm + tonal backgrounds (§3.4.1–3.4.3)
* 96/72/56 gaps split evenly: half as padding-bottom on the preceding
* section, half as padding-top on the following (§3.4.2).
* ------------------------------------------------------------------ */
.q8-home-section {
padding-block: calc(var(--ekg-block-gap-desktop) / 2);
}
.q8-home-section__inner {
max-width: 1240px;
margin-inline: auto;
padding-inline: 40px;
}
/* Tones (§3.4.1). Full-bleed: the section itself carries the background;
the Elementor container per block is full-width (placement contract). */
.q8-home-section--tone-paper { background: var(--paper); }
.q8-home-section--tone-paper-dark { background: var(--paper-dark); }
.q8-home-section--tone-accent-soft { background: var(--ekg-seasonal-bg); }
.q8-home-section--tone-ink {
background: var(--ekg-forbiz-bg);
color: var(--ekg-forbiz-ink);
}
/* §3.4.2 exception + §11.3.2 (C3) — For Business: the strip's 64/48/40
internal band padding is ALL it has. No half-gap of its own above (the gap
above the strip = the preceding block's half only) and the ink band meets
the footer flush below (no paper gap — internal padding is inside the ink).
Supersedes the C1 placeholder 48/0 reading. */
.q8-home-section--flush-bottom {
padding-block: var(--ekg-forbiz-padding-desktop);
}
@media (max-width: 1024px) {
.q8-home-section {
padding-block: calc(var(--ekg-block-gap-tablet) / 2);
}
.q8-home-section__inner {
padding-inline: 28px;
}
/* After the generic rule — equal specificity, source order decides. */
.q8-home-section--flush-bottom {
padding-block: var(--ekg-forbiz-padding-tablet);
}
}
@media (max-width: 640px) {
.q8-home-section {
padding-block: calc(var(--ekg-block-gap-mobile) / 2);
}
.q8-home-section__inner {
padding-inline: 20px;
}
.q8-home-section--flush-bottom {
padding-block: var(--ekg-forbiz-padding-mobile);
}
}
/* ------------------------------------------------------------------ *
* 3. Section header (§3.4.4 — blocks 2–7 share this shape)
* ------------------------------------------------------------------ */
.q8-home-section__header {
margin-block-end: 40px;
}
.q8-home-section__kicker {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin: 0 0 12px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
}
/* Editorial sections get the rust kicker (S2-16). */
.q8-home-section__kicker--rust {
color: var(--accent);
}
/* The brand token keeps its mixed case inside every uppercase mono kicker /
byline (owner ruling 2026-09-25 — "Q8tly", never "Q8TLY"): the section
kickers here and the guides' "By Q8tly Editorial" byline (home cards,
featured guide, hub hero, guide single — guide.css rides this sitewide
handle). Emitted by q8tly_brand_token_html(). text-transform is not
inherited past a child that sets its own, so no specificity contest.
In the flex kicker the text rides .q8-home-section__kicker-text so the
token stays inside the one text item (1.14.505). */
.q8-brand-token {
text-transform: none;
}
.q8-home-section__kicker-text {
display: inline;
min-width: 0;
}
.q8-home-section__see {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
text-decoration: none;
}
.q8-home-section--tone-ink .q8-home-section__see {
color: var(--ekg-forbiz-ink);
}
.q8-home-section__see:hover {
color: var(--accent);
text-decoration: none;
}
.q8-home-section__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--ekg-section-title-size);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
}
.q8-home-section--tone-ink .q8-home-section__title {
color: var(--ekg-forbiz-ink);
}
/* 48px 1px rule under the title (blocks 3–6 use it; renderers may omit). */
.q8-home-section__rule {
display: block;
width: var(--ekg-section-rule-width);
height: 1px;
margin-block-start: 20px;
background: var(--rule-soft);
}
@media (max-width: 1024px) {
.q8-home-section__title {
font-size: 34px;
}
}
@media (max-width: 640px) {
.q8-home-section__title {
font-size: 28px;
}
.q8-home-section__header {
margin-block-end: 28px;
}
}
/* ------------------------------------------------------------------ *
* 4. Horizontal scroll-snap strip (shared by §6 Area + §8 Trending;
* card widths come from the per-block tokens at their chunk)
* ------------------------------------------------------------------ */
.q8-strip--snap {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
padding-block-end: 8px; /* keep card shadows un-clipped above the scrollbar */
}
.q8-strip--snap > * {
flex: 0 0 auto;
scroll-snap-align: start;
}
@media (prefers-reduced-motion: reduce) {
.q8-strip--snap {
scroll-behavior: auto;
}
}
/* ------------------------------------------------------------------ *
* 5. §4 Hero (C2) — 60/40 editorial + browse card
* §4.3 geometry / §4.4.2 type scale / §4.6 card anatomy.
* The hero owns its own §4.3 padding (80 top / 96 bottom via the
* unsuffixed §14.2 tokens — they carry across breakpoints), overriding
* the §3.4.2 half-gap rhythm the shell paints on every other block.
* ------------------------------------------------------------------ */
.q8-home-section--hero {
padding-block-start: var(--ekg-hero-top-padding);
padding-block-end: var(--ekg-hero-bottom-padding);
}
.q8-home-hero {
display: flex;
justify-content: center;
align-items: center;
min-height: var(--ekg-hero-min-height-desktop);
/* D-149: search-led centered hero. The §4 editorial + 60/40 browse-card
grid is retired — the hero now leads with the search bar over a single
centered column. */
}
.q8-home-hero__editorial {
width: 100%;
max-width: 760px;
margin-inline: auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* --- Editorial half (§4.4.2 / §4.9.1) --- */
.q8-home-hero__kicker {
margin: 0 0 10px; /* was 24px; eyebrow pulled ~14px closer to the h1 (Bader 2026-07-30). No spacing token in this system — hero spacing is literal px throughout. */
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
}
.q8-home-hero__title {
margin: 0 0 24px;
font-family: var(--font-serif);
font-size: 60px;
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.015em;
color: var(--ink);
}
.q8-home-hero__title em {
font-style: italic;
}
.q8-home-hero__deck {
margin: 0 auto 8px;
font-family: var(--font-body);
font-size: 18px;
line-height: 1.55;
color: var(--ink-soft);
max-width: 56ch;
}
.q8-home-hero__ctas {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
}
.q8-home-hero__cta {
display: inline-block;
padding: 14px 22px;
border: 1px solid var(--ekg-cta-outline-border);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
}
.q8-home-hero__cta:hover {
border-color: var(--accent);
color: var(--accent);
text-decoration: none;
}
/* --- Search bar (D-150) — a STRUCTURED two-zone INLINE picker: Area select +
Category select + Search submit, a single GET form to /search/ on GD's proven
facet contract (city= + spost_category[]). Native selects styled to the
on-brand rectangle; appearance reset + border-radius:0 + a custom CSS chevron
beat Astra's global select skin (D-050, !important per the established pattern).
Logical props so it mirrors in RTL. Distinct from the header keyword overlay. --- */
.q8-home-hero__searchbar {
display: flex;
align-items: stretch;
width: 100%;
max-width: 620px;
margin: 8px auto 32px;
border: 1px solid var(--ink);
background: var(--paper);
}
.q8-home-hero__field {
position: relative;
display: flex;
align-items: stretch;
min-width: 0;
}
.q8-home-hero__field--area {
flex: 0 0 34%;
border-inline-end: 1px solid var(--ink);
}
.q8-home-hero__field--cat {
flex: 1 1 auto;
}
/* Custom chevron (native arrow hidden by appearance:none); inline-end = RTL-safe. */
.q8-home-hero__field::after {
content: "";
position: absolute;
inset-inline-end: 16px;
top: 50%;
width: 8px;
height: 8px;
margin-top: -6px;
border-right: 1.5px solid var(--ink-soft);
border-bottom: 1.5px solid var(--ink-soft);
transform: rotate(45deg);
pointer-events: none;
}
.q8-home-hero__select {
flex: 1 1 auto;
width: 100%;
min-width: 0;
padding-block: 16px;
padding-inline: 18px 38px;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
/* The theme (Astra) forces height:40px on selects; with our 16px padding-block
+ border-box that leaves only 8px for ~19px text → the option label clips at
the bottom. min-height overrides a smaller height even when the theme height
is !important (the theme sets no min-height), and height:auto frees the box
where our !important wins — together they give a clean ~52px field (D-150). */
height: auto !important;
min-height: 52px;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.2;
color: var(--ink);
cursor: pointer;
text-overflow: ellipsis;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
.q8-home-hero__select:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.q8-home-hero__search-submit {
flex: 0 0 auto;
display: flex;
align-items: center;
padding: 0 32px; /* was 28px — modest width for balance (Bader 2026-07-30, hero-only class) */
border: 0 !important;
border-radius: 0 !important;
background: var(--ink);
color: var(--paper);
font-family: var(--font-mono);
font-size: 13px; /* was 12px — primary action marginally clearer */
font-weight: 500;
letter-spacing: 0.06em; /* was 0.08em — less extreme, stays editorial */
text-transform: uppercase;
cursor: pointer;
-webkit-appearance: none !important;
appearance: none !important;
}
.q8-home-hero__search-submit:hover {
background: var(--accent);
}
.q8-home-hero__search-submit:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* --- Tablet (§4.3 / §3.5): centered search-led column --- */
@media (max-width: 1024px) {
.q8-home-section--hero .q8-home-section__inner {
padding-inline: 32px; /* §4.3 tablet — overrides the 28px shell value */
}
.q8-home-hero {
min-height: var(--ekg-hero-min-height-tablet);
}
/* Desktop-only controlled h1 break (Bader 2026-07-30): the
breaks the
line at ≥1025px so line 1 ends on "ask"; suppressed here so tablet + mobile
wrap naturally (never forced at 375). */
.q8-home-hero__title-break {
display: none;
}
.q8-home-hero__editorial {
max-width: 640px;
}
.q8-home-hero__title {
font-size: 48px;
}
.q8-home-hero__deck {
font-size: 17px;
}
}
/* --- Mobile (§4.3 / §3.6) --- */
@media (max-width: 640px) {
.q8-home-section--hero .q8-home-section__inner {
padding-inline: 20px;
}
.q8-home-hero {
min-height: 0;
}
.q8-home-hero__kicker {
font-size: 10px;
}
.q8-home-hero__title {
font-size: 36px;
}
.q8-home-hero__deck {
font-size: 16px;
}
/* D-150: stack the two-zone bar vertically on phones (three horizontal zones
are too cramped ≤640px); the area/category divider becomes a bottom rule. */
.q8-home-hero__searchbar {
flex-direction: column;
max-width: 100%;
}
.q8-home-hero__field--area {
flex: 0 0 auto;
border-inline-end: 0;
border-block-end: 1px solid var(--ink);
}
.q8-home-hero__select {
padding-block: 14px;
}
.q8-home-hero__search-submit {
justify-content: center;
padding: 15px 18px;
}
.q8-home-hero__cta {
padding: 12px 18px;
font-size: 11px;
}
}
/* ------------------------------------------------------------------ *
* 6. §11 For-Business strip (C3) — commercial band on the --ink tone
* (band bg/ink + 64/48/40 padding ride the C1 shell: tone-ink +
* flush-bottom rules above). §11.4 typography; S2-16 kicker.
* ------------------------------------------------------------------ */
.q8-forbiz {
display: grid;
grid-template-columns: auto 1fr auto; /* copy | spacer | CTA (§11.3.2) */
column-gap: 48px;
align-items: center;
}
.q8-forbiz__copy {
grid-column: 1;
}
.q8-forbiz__kicker {
margin: 0 0 12px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
/* v5.1 correction 1: S2-16's quiet commercial register on a DARK band =
faint cream, not --ink-soft (#4a4a4a on #1a1a1a was near-invisible —
legibility FAIL at the C3 eyeball). Same register, inverse mapping. */
color: var(--ekg-forbiz-kicker-ink);
}
.q8-forbiz__headline {
margin: 0;
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--ekg-forbiz-ink);
}
/* §11.4.3 outlined pill — functional CTA, echoes the M5 nav pill. */
.q8-forbiz__cta {
grid-column: 3;
justify-self: end;
display: inline-block;
padding: 14px 22px;
border: 1px solid var(--ekg-forbiz-ink);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ekg-forbiz-ink);
text-decoration: none;
}
.q8-forbiz__cta:hover {
background: var(--ekg-forbiz-ink);
color: var(--ekg-forbiz-bg);
text-decoration: none;
}
/* §11.3.3 — stacks centered ≤1024. */
@media (max-width: 1024px) {
.q8-forbiz {
grid-template-columns: 1fr;
row-gap: 24px;
justify-items: center;
text-align: center;
}
.q8-forbiz__copy,
.q8-forbiz__cta {
grid-column: auto;
justify-self: center;
}
}
/* §11.3.3 — 32px horizontal padding mobile (overrides the 20px shell value). */
@media (max-width: 640px) {
.q8-home-section--for-business .q8-home-section__inner {
padding-inline: 32px;
}
}
/* ------------------------------------------------------------------ *
* 7. §6 Area Spotlights (C4) — six district cards into the M4 hubs.
* Mobile/tablet ride the .q8-strip--snap primitive (§6.6 h-scroll,
* fixed card widths); ≥1025 flips to the 6-up grid. §6.4 anatomy.
* ------------------------------------------------------------------ */
/* Strip: snap widths below 1025 (after section 4 — source order wins ties). */
.q8-area-strip > .q8-area-card {
width: var(--ekg-area-card-width-mobile);
}
@media (min-width: 641px) and (max-width: 1024px) {
.q8-area-strip > .q8-area-card {
width: var(--ekg-area-card-width-tablet);
}
}
@media (min-width: 1025px) {
.q8-area-strip {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
overflow-x: visible;
padding-block-end: 0;
}
.q8-area-strip > .q8-area-card {
width: auto;
}
}
/* §6.4.2 card wrapper: --paper plate (reads as a card on the --paper-dark
band), no border, the WHOLE card one . */
.q8-area-card {
display: block;
background: var(--paper);
color: var(--ink);
text-decoration: none;
}
.q8-area-card:hover {
text-decoration: none;
}
/* §6.8.2 focus ring. */
.q8-area-card:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
/* §6.4.1 photo: 3:4, sharp corners, cover; §6.4.5 hover brightness. */
.q8-area-card__photo {
display: block;
width: 100%;
aspect-ratio: var(--ekg-area-photo-aspect);
object-fit: cover;
transition: filter 200ms ease;
}
.q8-area-card:hover .q8-area-card__photo {
filter: brightness(1.05);
}
/* Branded no-photo fallback (area-cards brief §2.2): navy plate, area name
EN + AR, coral top accent. Same 3:4 box as a real photo so the strip stays
uniform; replaces the old flat grey "Q8tly" plate. */
.q8-area-card__photo--empty {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 12px;
overflow: hidden;
text-align: center;
background: var(--ekg-area-fallback-bg);
}
.q8-area-card__fallback-accent {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100%;
block-size: 4px;
background: var(--ekg-area-fallback-accent);
}
.q8-area-card__fallback-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
line-height: 1.15;
letter-spacing: -0.01em;
color: #fff;
}
.q8-area-card__fallback-name-ar {
font-size: 13px;
line-height: 1.3;
color: rgba(255, 255, 255, 0.74);
}
.q8-area-card__body {
display: block;
padding: 16px 16px 18px;
}
/* §6.4.2 district name — Fraunces 22/500, hover -> --accent (§6.4.5). */
.q8-area-card__name {
display: block;
margin-block-end: 2px;
font-family: var(--font-display);
font-size: 22px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--ink);
transition: color 150ms ease;
}
.q8-area-card:hover .q8-area-card__name {
color: var(--accent);
}
/* §6.4.2 governorate — Mono 10 uppercase, S2-08 canonical text. */
.q8-area-card__gov {
display: block;
margin-block-end: 10px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* §6.4.2 listing meta — "{N} places · {M} categories", live-queried. */
.q8-area-card__meta {
display: block;
margin-block-end: 14px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-soft);
}
/* §6.4.2 CTA — Mono 11 uppercase; §6.4.5 underline fills inline-start ->
inline-end on hover (origin flips under [dir="rtl"]). */
.q8-area-card__cta {
position: relative;
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
transition: color 150ms ease;
}
.q8-area-card__cta::after {
content: '';
position: absolute;
inset-inline: 0;
inset-block-end: -2px;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 150ms ease;
}
[dir="rtl"] .q8-area-card__cta::after {
transform-origin: right;
}
.q8-area-card:hover .q8-area-card__cta {
color: var(--accent);
}
.q8-area-card:hover .q8-area-card__cta::after {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
.q8-area-card__photo,
.q8-area-card__name,
.q8-area-card__cta,
.q8-area-card__cta::after {
transition: none;
}
}
/* ------------------------------------------------------------------ *
* 8. §7 Category Spotlights (C5) — category cards onto the GD-native
* archives (D-113). Mobile/tablet ride .q8-strip--snap (§7.7
* h-scroll, fixed card widths); ≥1025 flips to the §7.7/§7-Q4
* 2×4 grid (a six-card Phase-A slate renders 4+2). §7.4 anatomy —
* wide 4:3 vs §6's tall 3:4, --paper card on the --paper band so
* the 1px --rule-soft border carries the card edge (§7.4.2).
* ------------------------------------------------------------------ */
/* Strip: snap widths below 1025 (after section 4 — source order wins ties). */
.q8-cat-grid > .q8-cat-card {
width: var(--ekg-cat-card-width-mobile);
}
@media (min-width: 641px) and (max-width: 1024px) {
.q8-cat-grid > .q8-cat-card {
width: var(--ekg-cat-card-width-tablet);
}
}
@media (min-width: 1025px) {
.q8-cat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 24px;
row-gap: 32px;
overflow-x: visible;
padding-block-end: 0;
}
.q8-cat-grid > .q8-cat-card {
width: auto;
}
}
/* §7.4.2 card wrapper: --paper + 1px --rule-soft border (paper-on-paper —
the border is the card edge), the WHOLE card one . */
.q8-cat-card {
display: block;
background: var(--paper);
border: 1px solid var(--rule-soft);
color: var(--ink);
text-decoration: none;
}
.q8-cat-card:hover {
text-decoration: none;
}
/* §7.9 focus ring (identical pattern to §6.8). */
.q8-cat-card:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
/* §7.4.1 photo: 4:3, sharp corners, cover; §7.4.6 hover brightness. */
.q8-cat-card__photo {
display: block;
width: 100%;
aspect-ratio: var(--ekg-cat-photo-aspect);
object-fit: cover;
transition: filter 200ms ease;
}
.q8-cat-card:hover .q8-cat-card__photo {
filter: brightness(1.05);
}
/* Phase-A no-photo plate (C4 ruling extended to §7.4.5 — v5.1 class). */
.q8-cat-card__photo--empty {
display: flex;
align-items: center;
justify-content: center;
background: var(--paper-darker);
font-family: var(--font-display);
font-style: italic;
font-size: 20px;
color: var(--ink-faint);
}
.q8-cat-card__body {
display: block;
padding: 16px 16px 18px;
}
/* §7.4.2 pillar label — Mono 10 uppercase, --accent rust (§7.4.3 exception;
§7-Q1 designer-pass may fall back to --ink-soft). Unchanged on hover. */
.q8-cat-card__pillar {
display: block;
margin-block-end: 6px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
/* §7.4.2 category name — Fraunces 24/500, hover -> --accent (§7.4.6). */
.q8-cat-card__name {
display: block;
margin-block-end: 8px;
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--ink);
transition: color 150ms ease;
}
.q8-cat-card:hover .q8-cat-card__name {
color: var(--accent);
}
/* §7.4.2 listing meta — "{N} places Kuwait-wide" (§7-Q5), live-queried. */
.q8-cat-card__meta {
display: block;
margin-block-end: 14px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-soft);
}
/* §7.4.2 CTA — Mono 11 uppercase; §7.4.6 underline fills inline-start ->
inline-end on hover (origin flips under [dir="rtl"]). */
.q8-cat-card__cta {
position: relative;
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
transition: color 150ms ease;
}
.q8-cat-card__cta::after {
content: '';
position: absolute;
inset-inline: 0;
inset-block-end: -2px;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 150ms ease;
}
[dir="rtl"] .q8-cat-card__cta::after {
transform-origin: right;
}
.q8-cat-card:hover .q8-cat-card__cta {
color: var(--accent);
}
.q8-cat-card:hover .q8-cat-card__cta::after {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
.q8-cat-card__photo,
.q8-cat-card__name,
.q8-cat-card__cta,
.q8-cat-card__cta::after {
transition: none;
}
}
/* ------------------------------------------------------------------ *
* 9. §9 Latest from Guide (C7) — conditional-absence shell; nothing
* renders until M8 registers guide_article + ≥2 published articles
* (§9.4.6 collapse). 2×2 grid of article cards (§9.3); inert until
* then (the renderer returns '' — these rules match no markup).
* ------------------------------------------------------------------ */
/* §9.3.1 grid. v5.1 correction 6: the block tone is --paper (§3.4.1's v4
flip — §9.3.1's --paper-dark line is stale v3), so the card takes the
§7.4.2 paper-on-paper treatment: 1px --rule-soft border. */
.q8-latest-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
}
@media (min-width: 641px) and (max-width: 1024px) {
.q8-latest-grid {
gap: 32px; /* §9.3.3 */
}
}
@media (max-width: 640px) {
.q8-latest-grid {
grid-template-columns: 1fr; /* §9.3.4: stacks to 1 column */
gap: 24px;
}
}
/* §9.4.2 card wrapper — the WHOLE card one (§9.7). */
.q8-latest-card {
display: block;
background: var(--paper);
border: 1px solid var(--rule-soft);
padding: 24px;
color: var(--ink);
text-decoration: none;
}
.q8-latest-card:hover {
text-decoration: none;
}
/* §14.8 focus ring — large-area anchor, 4px offset. */
.q8-latest-card:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 4px;
}
/* §9.4.2 photo: 16:9, sharp corners, cover; 3:2 at mobile (§9.4.4);
§9.4.5 hover brightness. */
.q8-latest-card__photo {
display: block;
width: 100%;
aspect-ratio: var(--ekg-latest-photo-aspect);
object-fit: cover;
margin-block-end: 16px;
transition: filter 150ms ease;
}
.q8-latest-card:hover .q8-latest-card__photo {
filter: brightness(1.05);
}
/* Phase-A no-photo plate (the C4/C5 ruling class). */
.q8-latest-card__photo--empty {
display: flex;
align-items: center;
justify-content: center;
background: var(--paper-darker);
font-family: var(--font-display);
font-style: italic;
font-size: 20px;
color: var(--ink-faint);
}
.q8-latest-card__body {
display: block;
}
/* §9.4.2 topic kicker — Mono 10 uppercase, --accent rust. */
.q8-latest-card__kicker {
display: block;
margin-block-end: 8px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
/* §9.4.2 title — Fraunces 24/500, 2-line cap; hover -> rust (§9.4.5). */
.q8-latest-card__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-block-end: 12px;
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.015em;
color: var(--ink);
transition: color 150ms ease;
}
.q8-latest-card:hover .q8-latest-card__title {
color: var(--accent);
}
/* §9.4.2 byline — Mono 10 uppercase, --ink-faint. */
.q8-latest-card__byline {
display: block;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
}
@media (max-width: 640px) {
/* §9.4.4 mobile card. */
.q8-latest-card {
padding: 16px;
}
.q8-latest-card__photo {
aspect-ratio: var(--ekg-latest-photo-aspect-mobile);
}
.q8-latest-card__title {
font-size: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.q8-latest-card__photo,
.q8-latest-card__title {
transition: none;
}
}
/* ------------------------------------------------------------------ *
* 10. §10 Seasonal Strip (C7) — conditional-absence shell, DOUBLY gated
* (M8 exists AND ≥1 homepage_seasonal_active article — §10.2);
* inert until then. One wraps the whole 50/50 band (§10.7);
* the --accent-soft background rides the C1 tone class.
* ------------------------------------------------------------------ */
/* §10.3.2 layout: 50/50, photo inline-start. */
.q8-seasonal {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 48px;
align-items: center;
color: var(--ink);
text-decoration: none;
}
.q8-seasonal:hover {
text-decoration: none;
}
/* §14.8 focus ring — large-area anchor, 4px offset. */
.q8-seasonal:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 4px;
}
/* §10.3.1 photo: 3:4 desktop / 4:3 tablet / 3:2 mobile (§10.3.4),
sharp corners, cover; hover brightness (§5.8.2 register). */
.q8-seasonal__photo {
display: block;
width: 100%;
aspect-ratio: var(--ekg-seasonal-photo-aspect-desktop);
object-fit: cover;
transition: filter 150ms ease;
}
.q8-seasonal:hover .q8-seasonal__photo {
filter: brightness(1.05);
}
/* Phase-A no-photo plate (the C4/C5 ruling class). */
.q8-seasonal__photo--empty {
display: flex;
align-items: center;
justify-content: center;
background: var(--paper-darker);
font-family: var(--font-display);
font-style: italic;
font-size: 24px;
color: var(--ink-faint);
}
.q8-seasonal__body {
display: block;
}
/* §10.4.1 kicker — Mono 11 uppercase, 0.18em; paper-tone on the rust band
(v5.1 correction 7 — §10.4.1's --accent is rust-on-rust). §10.5: the
kicker IS the section header. */
.q8-seasonal__kicker {
display: block;
margin-block-end: 16px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ekg-seasonal-kicker-ink);
}
/* §10.4.1/§10.4.3 title — Fraunces 32/500, subordinate to §5's 48. */
.q8-seasonal__title {
display: block;
margin-block-end: 16px;
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
}
/* §10.4.1 deck — Inter 17, --ink-soft, 52ch cap. */
.q8-seasonal__deck {
display: block;
max-width: 52ch;
margin-block-end: 20px;
font-size: 17px;
line-height: 1.55;
color: var(--ink-soft);
}
/* §10.4.1 byline — Mono 11 uppercase, --ink-faint. */
.q8-seasonal__byline {
display: block;
margin-block-end: 24px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* §10.4.1 CTA — Mono 12 uppercase; underline fills on hover (house
pattern); hover -> --accent. */
.q8-seasonal__cta {
position: relative;
display: inline-block;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
transition: color 150ms ease;
}
.q8-seasonal__cta::after {
content: '';
position: absolute;
inset-inline: 0;
inset-block-end: -2px;
height: 1px;
background: var(--ink);
transform: scaleX(0);
transform-origin: left;
transition: transform 150ms ease;
}
[dir="rtl"] .q8-seasonal__cta::after {
transform-origin: right;
}
.q8-seasonal:hover .q8-seasonal__cta {
color: var(--accent);
}
.q8-seasonal:hover .q8-seasonal__cta::after {
transform: scaleX(1);
}
/* §10.3.4 tablet + mobile: stack, photo above copy. */
@media (max-width: 1024px) {
.q8-seasonal {
grid-template-columns: 1fr;
row-gap: 32px;
align-items: start;
}
.q8-seasonal__photo {
aspect-ratio: var(--ekg-seasonal-photo-aspect-tablet);
}
}
@media (max-width: 640px) {
.q8-seasonal__photo {
aspect-ratio: var(--ekg-seasonal-photo-aspect-mobile);
}
.q8-seasonal__title {
font-size: 26px;
}
}
@media (prefers-reduced-motion: reduce) {
.q8-seasonal__photo,
.q8-seasonal__cta,
.q8-seasonal__cta::after {
transition: none;
}
}
/* ------------------------------------------------------------------ *
* 10b. §5 Featured Guide (M8-02) — the homepage's loudest editorial
* moment; lit now M8-01 registered guide_article. Two modes:
* Mode A photo_dominant (2:1 hero on top, copy below) / Mode B
* split (3:4 photo beside the copy). Conditional-absence: the
* renderer returns '' at zero published articles, so these rules
* match no markup until content lands. AR fenced (renderer ''
* off-EN). Placed after §9/§10 in the file (append order), though
* §5 in the page; the section--featured-guide tone is --paper.
* ------------------------------------------------------------------ */
/* D-149: the relocated hero poetic line, now the editorial-cluster tagline
sitting above the featured guide. Serif display, subordinate to the §5
title; the keeps the original italic emphasis. */
.q8-feat-guide__tagline {
margin: 0 0 32px;
font-family: var(--font-serif);
font-size: 28px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--ink);
max-width: 24ch;
}
.q8-feat-guide__tagline em {
font-style: italic;
}
@media (max-width: 640px) {
.q8-feat-guide__tagline {
font-size: 22px;
margin-bottom: 24px;
}
}
/* §5.3 block — relative for the absolute §5.5 see-link; flex column so the
see-link can reflow below the copy on mobile (§5.6). */
.q8-feat-guide {
position: relative;
display: flex;
flex-direction: column;
}
/* §5.8.1 the large main tap target wrapping photo + copy. */
.q8-feat-guide__main {
display: block;
color: var(--ink);
text-decoration: none;
}
.q8-feat-guide__main:hover {
text-decoration: none;
}
/* §5.8.3 focus ring — large-area anchor, 4px offset. */
.q8-feat-guide__main:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 4px;
}
/* §5.4.2 photo — sharp corners, cover, no shadow; aspect per mode; hover
brightness (§5.8.2). */
.q8-feat-guide__photo {
display: block;
width: 100%;
object-fit: cover;
transition: filter 150ms ease;
}
.q8-feat-guide--mode-a .q8-feat-guide__photo {
aspect-ratio: var(--ekg-feat-photo-aspect-a); /* 2:1 */
}
.q8-feat-guide--mode-b .q8-feat-guide__photo {
aspect-ratio: var(--ekg-feat-photo-aspect-b); /* 3:4 */
}
.q8-feat-guide__main:hover .q8-feat-guide__photo {
filter: brightness(1.05);
}
/* Phase-A no-photo plate (the C4/C5 ruling class). */
.q8-feat-guide__photo--empty {
display: flex;
align-items: center;
justify-content: center;
background: var(--paper-darker);
font-family: var(--font-display);
font-style: italic;
font-size: 28px;
color: var(--ink-faint);
}
/* §5.6 Mode A — photo full width, copy below (60ch), 48px top padding. */
.q8-feat-guide--mode-a .q8-feat-guide__body {
display: block;
max-width: 60ch;
padding-block-start: 48px;
}
/* §5.6 Mode B — 50/50 grid, photo inline-start, copy inline-end (RTL flips
via the logical grid — §5.8.4). */
.q8-feat-guide--mode-b .q8-feat-guide__main {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 48px;
align-items: center;
}
.q8-feat-guide--mode-b .q8-feat-guide__body {
display: block;
}
/* §5.4.1 topic kicker — Mono 11 uppercase, 0.18em, --accent rust. */
.q8-feat-guide__kicker {
display: block;
margin-block-end: 16px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
/* §5.4.1 title — Fraunces 48/500, line-height 1.15, -0.01em, 2-line cap;
hover -> rust (§5.8.2). */
.q8-feat-guide__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-block-end: 20px;
font-family: var(--font-display);
font-size: var(--ekg-feat-title-size);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink);
transition: color 150ms ease;
}
.q8-feat-guide__main:hover .q8-feat-guide__title {
color: var(--accent);
}
/* §5.4.1 deck — Inter 18, --ink-soft, 60ch cap. */
.q8-feat-guide__deck {
display: block;
max-width: 60ch;
margin-block-end: 24px;
font-size: 18px;
line-height: 1.55;
color: var(--ink-soft);
}
/* §5.4.1 byline — Mono 11 uppercase, --ink-faint. */
.q8-feat-guide__byline {
display: block;
margin-block-end: 24px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* §5.4.1 CTA — Mono 12 uppercase; underline fills on hover (house pattern). */
.q8-feat-guide__cta {
position: relative;
display: inline-block;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
transition: color 150ms ease;
}
.q8-feat-guide__cta::after {
content: '';
position: absolute;
inset-inline: 0;
inset-block-end: -2px;
height: 1px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 150ms ease;
}
[dir="rtl"] .q8-feat-guide__cta::after {
transform-origin: right;
}
.q8-feat-guide__main:hover .q8-feat-guide__cta {
color: var(--accent);
}
.q8-feat-guide__main:hover .q8-feat-guide__cta::after {
transform: scaleX(1);
}
/* §5.5 see-link — Mono 12 uppercase, absolute top-right (top-left in RTL via
the logical inset); --ink-soft -> --accent + underline on hover (§5.8.2).
NOTE: Mode A overlays the photo top-right — flag legibility at the eyeball
(no backing chip is specced). */
.q8-feat-guide__see-all {
position: absolute;
inset-block-start: 24px;
inset-inline-end: 24px;
z-index: 1;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-soft);
text-decoration: none;
transition: color 150ms ease;
}
.q8-feat-guide__see-all:hover {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
}
.q8-feat-guide__see-all:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 4px;
}
/* §5.6 tablet — Mode B stacks to single column, photo collapses to 4:3
(Mode A photo stays 2:1). */
@media (max-width: 1024px) {
.q8-feat-guide--mode-b .q8-feat-guide__main {
grid-template-columns: 1fr;
row-gap: 32px;
align-items: start;
}
.q8-feat-guide--mode-b .q8-feat-guide__photo {
aspect-ratio: var(--ekg-feat-photo-aspect-b-tablet); /* 4:3 */
}
}
/* §5.6 mobile — title 48->32 + 3-line cap, deck 18->16; the see-link moves
below the CTA, right-aligned (the flex order flip). */
@media (max-width: 640px) {
.q8-feat-guide--mode-a .q8-feat-guide__body {
padding-block-start: 32px;
}
.q8-feat-guide__title {
-webkit-line-clamp: 3;
font-size: var(--ekg-feat-title-size-mobile);
}
.q8-feat-guide__deck {
font-size: 16px;
}
.q8-feat-guide__see-all {
position: static;
order: 1;
align-self: flex-end;
margin-block-start: 16px;
inset: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.q8-feat-guide__photo,
.q8-feat-guide__title,
.q8-feat-guide__cta,
.q8-feat-guide__cta::after,
.q8-feat-guide__see-all {
transition: none;
}
}
/* ------------------------------------------------------------------ *
* 11. AR-fence prep (C8 — §13.3.2). INERT while the AR homepage is
* fenced (page 1675 carries no C1 shells, so nothing matches on
* /ar/). Hero H1 only: AR renders at 90% of Latin (72→65, 56→50,
* 40→36) with line-height 1.05 (Latin 0.95 + 10%). All other
* blocks render at Latin size per §13.3.2. The §13.3.1 AR type
* stacks are NOT shipped — AR faces are pending the §4-Q3
* designer choice; they ride the AR-unfence pass.
* ------------------------------------------------------------------ */
html[lang^="ar"] .q8-home-hero__title {
font-size: 65px;
line-height: 1.05;
}
@media (max-width: 1024px) {
html[lang^="ar"] .q8-home-hero__title {
font-size: 50px;
}
}
@media (max-width: 640px) {
html[lang^="ar"] .q8-home-hero__title {
font-size: 36px;
}
}
/* ---------------------------------------------------------------------------- *
* Native AR homepage (D-160) — code-rendered via template_include, NOT Elementor.
* The EN home gets full-bleed section backgrounds from its full-width Elementor
* container; the code-rendered AR home has no such parent, so each section
* self-breaks-out to the viewport width. overflow-x:clip on the main contains the
* 100vw breakout (no horizontal scrollbar). margin-inline → RTL-symmetric.
* ---------------------------------------------------------------------------- */
.q8-home-ar__main {
overflow-x: clip;
}
.q8-home-ar__main .q8-home-section {
width: 100vw;
max-width: 100vw;
margin-inline: calc(50% - 50vw);
}
/* ------------------------------------------------------------------ *
* 13. "Recently added" strip (homepage photo concept C — owner ruling
* 2026-09-25; includes/home-recent.php). Rides the HERO shell: sits
* after .q8-home-hero inside the hero section's 1240 inner, so it
* lands directly under the search bar as drawn. Six 3:4 tiles of the
* listings' OWN photos; one per tile; ≥1025 a 6-up grid, below
* that the shared .q8-strip--snap scroll strip (mobile 150 / tablet
* 176 px). Logical properties throughout — mirrors under [dir=rtl].
* ------------------------------------------------------------------ */
.q8-recent {
width: 100%;
margin-block-start: 56px;
}
.q8-recent .q8-home-section__header {
margin-block-end: 28px;
}
.q8-recent__strip {
align-items: flex-start;
gap: 20px;
}
.q8-recent__strip > .q8-recent-tile {
width: var(--ekg-recent-tile-width-mobile);
}
@media (min-width: 641px) and (max-width: 1024px) {
.q8-recent__strip > .q8-recent-tile {
width: var(--ekg-recent-tile-width-tablet);
}
}
@media (min-width: 1025px) {
.q8-recent__strip {
display: grid;
/* minmax(0, 1fr): a plain 1fr floors at min-content, so one tile's long
nowrap area line ("Hessa Plaza, Hessa Al Mubarak") widened its column
(measured 1.14.500: 186 vs 175 px). Equal columns, the text ellipsises. */
grid-template-columns: repeat(6, minmax(0, 1fr));
column-gap: 20px;
overflow-x: visible;
padding-block-end: 0;
}
.q8-recent__strip > .q8-recent-tile {
width: auto;
}
}
.q8-recent-tile {
display: block;
min-width: 0;
color: var(--ink);
text-decoration: none;
}
.q8-recent-tile:hover {
text-decoration: none;
}
.q8-recent-tile:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
/* 3:4 photo, sharp corners (the site's card idiom), cover; hover brightness
as the §7 cards. The box holds its ratio before the lazy image arrives. */
.q8-recent-tile__photo {
display: block;
width: 100%;
height: auto;
aspect-ratio: var(--ekg-recent-photo-aspect);
object-fit: cover;
background: var(--paper-darker);
transition: filter 200ms ease;
}
.q8-recent-tile:hover .q8-recent-tile__photo {
filter: brightness(1.05);
}
.q8-recent-tile__name {
display: block;
margin-block-start: 10px;
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 150ms ease;
}
.q8-recent-tile:hover .q8-recent-tile__name {
color: var(--accent);
}
.q8-recent-tile__area {
display: block;
margin-block-start: 3px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.04em;
color: var(--ink-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 640px) {
.q8-recent {
margin-block-start: 40px;
}
.q8-recent .q8-home-section__header {
margin-block-end: 20px;
}
}
/* ------------------------------------------------------------------ *
* Release 2 (D-243) — the reservations strip: a quiet card on paper
* after the hero («Recently added») and before the featured guide.
* The question in bold, the text, the header's filled pill
* (header.css, .q8tly-resv-pill). One column on a phone (< 768,
* the header's phone width), the button under the text.
* ------------------------------------------------------------------ */
.q8-home-resv {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px 40px;
padding: 28px 32px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--ekg-card-radius);
}
.q8-home-resv__copy {
min-width: 0;
}
.q8-home .q8-home-resv__question {
margin: 0 0 6px;
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
text-transform: none;
color: var(--ink);
}
.q8-home .q8-home-resv__text {
max-width: 62ch;
margin: 0;
font-family: var(--font-body);
font-size: 16px;
font-weight: 400;
line-height: 1.55;
color: var(--ink-soft);
}
.q8-home-resv .q8-home-resv__cta {
flex: 0 0 auto;
}
html[lang^="ar"] .q8-home .q8-home-resv__question {
letter-spacing: 0;
}
@media (max-width: 767px) {
.q8-home-resv {
flex-direction: column;
align-items: flex-start;
padding: 22px 20px;
}
.q8-home-resv .q8-home-resv__cta {
white-space: normal;
text-align: center;
}
}