/* ============================================================ THE GATE INVESTMENTS — footer-accordion.css (V226 base + V226-fix1c/d + V226-fix3 + V226-fix5 i18n + V226-fix5b + V226-fix6) Mobile-only (≤540 px) horizontal 3-tab footer accordion. ------------------------------------------------------------ V226-fix6 design intent (owner-approved horizontal restore): - 3 section divs (Explore / Services / Contact) render as 3 SIDE-BY-SIDE TABS in a single row beneath the brand block. The previous V226-fix5 vertical-stack was rejected (too tall, settings-list feel, not luxury real-estate). - Each tab: label CENTER, chevron beside it, both on the SAME LINE. Hardened via V226-fix5b row contract. - Indicator: FontAwesome fa-chevron-down (\f078 solid), gold, 13 px. Rotates 180° on open. The previous V226-fix5 "+" / "−" was rejected (generic, not brand-aligned). - All panels collapsed by default. - Tap a tab → its panel expands BELOW the tab row; siblings collapse. Tap the active tab again → collapse it. - Desktop ≥541 px is UNTOUCHED — no rule fires there. Same-row hardening (V226-fix5b carry-over) — guarantees the chevron NEVER drops to a new line below the label across all browser engines: - h5: display:flex + flex-direction:row + flex-wrap:nowrap + white-space:nowrap + justify-content:center + align- items:center. - h5::after: flex:0 0 auto (explicit no-grow/no-shrink/ auto-basis). Width math @ 320 EN (3 tabs × ~90 px each): - Tab cell: 90 px (320 ÷ 3, less micro-padding from grid) - Padding: 14 px vertical, 4 px horizontal (tap target ≥ 44) - Content area: 82 px - "Services" @ 11 px / letter-spacing 1.0 px ≈ 60 px - Gap (gold chevron from label): 4 px - Chevron (FA solid) @ 13 px ≈ 11 px - TOTAL: 60 + 4 + 11 = 75 px → fits 82 px (7 px headroom ✓) `!important` policy (V226 condition 2): - Used ONLY to defeat the V213 force-show rules in site.css at the same @media(max-width:540px) breakpoint that set `max-height:none / opacity:1 / cursor:default` on every section. Without `!important`, V213's tied-specificity rules win (load order: site.css → footer-accordion.css, same specificity → footer-accordion.css would normally win, but V213's `cursor:default` etc. were authored as baseline rules and we need our state rules to override both V213 baseline AND ensure cascade safety regardless of load order). Each !important usage is selector- scoped to the smallest reasonable target — never `*`. Markup contract (V226 condition 1): - Uses the EXISTING .footer-grid > div:not(.footer-brand) structure. No new wrappers, no element promotion, no link reordering. The 3 section divs become the tab+panel composite via CSS-only layout. ============================================================ */ @media (max-width:540px){ /* ===== HORIZONTAL 3-TAB LAYOUT (V226-fix6) ================ CSS Grid: brand on row 1 (spans all columns), 3 tabs in row 2. V226-fix4 adaptive: if there are only 2 sections (legal pages terms.html / privacy-policy.html), switch to 2-col so no empty third cell. */ footer .footer-grid{ display:grid !important; /* override V213's 1fr single-column rule */ grid-template-columns:1fr 1fr 1fr !important; /* V226-fix6: restore 3-col horizontal tabs (was 1fr in V226-fix5) */ grid-template-rows:auto auto !important; /* row 1 = brand (spans 3); row 2 = tabs */ grid-auto-flow:row !important; gap:0 !important; padding:0 !important; } /* V226-fix4 adaptive 2-col grid for legal-page footers (2 sections instead of 3). :has(> div:nth-of-type(4)) is true ONLY when there are ≥3 sections (brand + 3 = 4 divs). :not(:has(...)) inverts → only matches 2-section footers. */ footer .footer-grid:not(:has(> div:nth-of-type(4))){ grid-template-columns:1fr 1fr !important; } footer .footer-grid > .footer-brand{ grid-column:1 / -1 !important; /* brand block spans all tab columns */ grid-row:1 !important; padding:0 0 18px !important; border-bottom:1px solid rgba(255,255,255,.08) !important; margin-bottom:0 !important; } /* V226-fix6: each section is a tab cell in row 2. align-self:start keeps closed tabs anchored to the top of row 2 when one tab's panel expands the row height (V226-fix1 contract). min-width:0 lets text wrap (defensive — V226-fix5b white-space: nowrap prevents label wrapping). */ footer .footer-grid > div:not(.footer-brand){ grid-row:2 !important; /* V226-fix6: tabs all in row 2 (was auto in V226-fix5) */ position:relative !important; /* kept — no longer anchors ::before (V226-fix8 removed), but harmless for stacking-context safety */ padding:0 !important; border-top:none !important; /* drop V213 hairline */ background:transparent; text-align:center !important; /* V226-fix6: tab label centered (was start in V226-fix5) */ align-self:start !important; /* V226-fix6: closed tabs stay top-aligned (V226-fix1 contract) */ min-width:0 !important; /* defensive overflow guard */ } /* V226-fix6: vertical hairline divider between horizontal tabs (was V226-fix5 horizontal border-top). Alpha .15 (V226-fix4 premium-visible value). */ footer .footer-grid > div:not(.footer-brand):not(:last-child){ border-inline-end:1px solid rgba(255,255,255,.15); /* V226-fix6: vertical divider — restored from V226-fix4 */ } /* ===== TAB BUTTON (h5) — V226-fix7 Option B ============== Horizontal 3-tab layout RETAINED. Within each tab, the label sits ABOVE a centered chevron — both horizontally centered. Stops the geometric-vs-optical alignment battle that recurred through V226-fix5b/fix6 (FontAwesome chevron-down has visual mass in its bottom half → looked "below the label" even when geometrically centered in flex-row). Two-row stack INSIDE the tab cell makes the chevron its own deliberate visual element. */ footer .footer-grid > div:not(.footer-brand) > h5{ margin:0 !important; display:flex !important; flex-direction:column !important; /* V226-fix7: column stack (was row) — label top, chevron below */ flex-wrap:nowrap !important; /* V226-fix5b carry: defensive */ align-items:center !important; justify-content:center !important; gap:6px; /* V226-fix7: 4→6 (between label and stacked chevron) */ padding:12px 4px 10px !important; /* V226-fix7: 14px 4px → 12px 4px 10px (slightly tighter, asymmetric bottom — visual balance for column stack) */ cursor:pointer !important; /* override V213 cursor:default */ font-size:12px !important; /* V226-fix7: 11→12 — column layout removes the horizontal width constraint, label can grow back to luxury size */ letter-spacing:1.2px !important; /* V226-fix7: 1.0→1.2 — back toward V226-fix4 luxury rhythm */ text-transform:uppercase; color:var(--gold) !important; /* reaffirm gold over V213 */ white-space:nowrap !important; /* V226-fix5b carry: label never wraps */ user-select:none; -webkit-tap-highlight-color:transparent; background:transparent; } /* V226-fix8 Issue 3: chevron ::after hidden — owner-rejected the visible indicator. The disclosure affordance is now carried by the ::before bottom underline (subtle gold pulse on closed tabs, solid 2 px on open). Setting both content:none and display:none defeats inherited or browser- cache fallbacks; the rest of the V226-fix6 chevron rule is intentionally left out of this CSS so there's no glyph to render. */ footer .footer-grid > div:not(.footer-brand) > h5::after{ content:none !important; /* V226-fix8: was "\f078" */ display:none !important; /* V226-fix8: was inline-block */ } /* V226-fix9 — Pattern 1 (Cartier / Hermès press-down + open-gradient). ALL permanent decorations removed: no chevron, no underline pulse, no dots, no hairline. Resting state = pure typography. The disclosure affordance is communicated through: (1) press-down feedback when tapped (h5:active scale .97) (2) open-state gold gradient + label flip to white (carried by the existing V226-fix3 block lower in this file) This is the highest-restraint luxury pattern — used by Cartier mobile, Hermès digital boutique, Burberry e-commerce. */ footer .footer-grid > div:not(.footer-brand) > h5{ transition:transform 80ms cubic-bezier(.22,.61,.36,1); /* V226-fix9: brief press response */ } footer .footer-grid > div:not(.footer-brand) > h5:active{ transform:scale(.97); /* V226-fix9: tap press-down — luxury elevator-button feel */ } /* Hover/active polish on tab — purely color, no layout shift */ footer .footer-grid > div:not(.footer-brand) > h5:hover{ color:#fff !important; } /* Open-state row — V226-fix3 (preserved) + V226-fix5 softening. Three signals so the active row is unmistakable: (a) gold gradient wash (10% top → 4% bottom — V226-fix5 softened from .16/.05 because a full-row gradient at higher alpha reads heavier than a 90 px tab cell) (b) gold inset underline (2 px box-shadow) (c) label color switches to white (V226-fix3 preserved) */ footer .footer-grid > div:not(.footer-brand)[data-foot-state="open"]{ background:linear-gradient(180deg, rgba(201,169,97,.10) 0%, rgba(201,169,97,.04) 100%); /* V226-fix8: V226-fix3 box-shadow underline REMOVED — the ::before bottom indicator now carries the gold underline (solid 2px on open). One indicator system instead of two competing ones. */ } footer .footer-grid > div:not(.footer-brand)[data-foot-state="open"] > h5{ color:#fff !important; /* V226-fix3: white label on gold wash */ } /* ===== PANEL (collapsed default + open state) ============ V226-fix1: Panels are IN-FLOW inside the section
. When opened, they expand the section div's height, which expands grid row 2, which pushes the entire footer-bottom region (Get-The-App + legal-links + copyright) DOWN naturally. No more absolute-positioned overlap. */ /* V226-fix1c: deterministic CSS-variable cascade. The section div carries --foot-mh / --foot-op / --foot-ov / --foot-pad / --foot-bg / --foot-bt. Default values = collapsed. The [data-foot-state="open"] selector on the SAME div overrides them to the open values. The panel ul / .contact-line then consume those vars. This sidesteps the same- specificity/!important fight between the prior two flat selectors (which produced computed max-height:0 even when the open rule had !important — observed live) and gives the engine a single, predictable state-machine surface. */ footer .footer-grid > div:not(.footer-brand){ --foot-mh: 0; --foot-op: 0; --foot-ov: hidden; --foot-pad: 0; --foot-pe: none; --foot-bg: transparent; --foot-bt: 0 solid transparent; --foot-pos: relative; } footer .footer-grid > div:not(.footer-brand)[data-foot-state="open"]{ --foot-mh: 800px; --foot-op: 1; --foot-ov: visible; --foot-pad: 12px 4px 14px; /* V226-fix6: tight 4px horizontal (was 28px in V226-fix5 wide row, was 6px in V226-fix4). Panel sits in narrow 1/3-of-viewport column at 320 EN; tight padding maximizes content area for link labels. */ --foot-pe: auto; --foot-bg: rgba(6,21,51,.95); /* V226-fix7 Path A: .45 → .95 — opaque navy blocks gold-gradient bleed through the panel (Contact rows were showing inconsistent gold tint because the .10/.04 gradient on the section div leaked through the .45-alpha panel). Underline + tab gradient still visible; panel body is unified navy. */ --foot-bt: 1px solid rgba(255,255,255,.08); --foot-pos: static; } /* V226-fix1c: panel reads the cascaded vars. No selector-fight. */ footer .footer-grid > div:not(.footer-brand) > ul, footer .footer-grid > div:not(.footer-brand) > .contact-line{ position: var(--foot-pos) !important; max-height: var(--foot-mh) !important; opacity: var(--foot-op) !important; overflow: var(--foot-ov) !important; margin: 0 !important; padding: var(--foot-pad) !important; pointer-events: var(--foot-pe); background: var(--foot-bg); border-top: var(--foot-bt); text-align: start; } /* Ensure the section div has enough height to anchor the absolute panel */ footer .footer-grid > div:not(.footer-brand){ isolation:isolate; } /* V226-fix7 Issue 2: tighter dropdown list rhythm. Was: margin-bottom:12px (V226-fix4 carryover) — felt loose with wrapped long labels at 320 EN narrow panel column. Now: 6px between li, explicit 12px font-size + 1.4 line-height on link text to defeat the inherited V213 ~13.5px / 1.5 baseline. */ footer .footer-grid > div[data-foot-state="open"] > ul > li{ margin-bottom:6px !important; /* V226-fix7: 12 → 6 */ } footer .footer-grid > div[data-foot-state="open"] > ul > li > a, footer .footer-grid > div[data-foot-state="open"] > .contact-line > a, footer .footer-grid > div[data-foot-state="open"] > .contact-line{ font-size:12px !important; /* V226-fix7: explicit override (was inherited ~13.5) */ line-height:1.4 !important; /* V226-fix7: tighter vertical rhythm (was inherited ~1.5) */ } footer .footer-grid > div[data-foot-state="open"] > .contact-line{ /* Contact column has multiple .contact-line siblings; their open-state block treats each one as a stacked entry. We need them all visible (the engine adds [data-foot-state="open"] to the parent
, not to each line). */ display:block; } /* When Contact is open, render each .contact-line as its own row inside the same absolute panel — they all share the same parent
so this rule applies to every .contact-line within. The above selector already opens the FIRST .contact-line; the rest need the same treatment via sibling override. */ /* V226-fix8 Issue 1: Contact panel — flush-stack unified treatment. ALL .contact-line rows touch (margin:0 — no gaps that show the section-div gradient through). Internal padding 8px 4px provides per-row rhythm. First/last rows get extra edge padding (12px) so the panel doesn't crowd the tab control above or the bottom of the section div below. Replaces the V226-fix7 ~/:not(:first-of-type) rules that produced 8 px transparent gaps which exposed the gold gradient → "ugly cuts". */ footer .footer-grid > div[data-foot-state="open"] > .contact-line{ position:static !important; max-height:none !important; opacity:1 !important; margin:0 !important; /* V226-fix8 Issue 1: was 8px gap between siblings → caused gradient bleed */ padding:8px 4px !important; /* V226-fix8 Issue 1: internal rhythm replaces margin */ background:var(--foot-bg) !important; /* V226-fix7 carry: opaque navy */ border-top:none; } footer .footer-grid > div[data-foot-state="open"] > .contact-line:first-of-type{ padding-top:12px !important; /* V226-fix8 Issue 1: edge padding at panel top */ } footer .footer-grid > div[data-foot-state="open"] > .contact-line:last-of-type{ padding-bottom:12px !important; /* V226-fix8 Issue 1: edge padding at panel bottom */ } /* V226-fix8 Issue 2: center Explore / Services dropdown link text. Contact intentionally excluded (icons + multi-line addresses look natural left/right-aligned, not centered). */ footer .footer-grid > div[data-foot-state="open"] > ul, footer .footer-grid > div[data-foot-state="open"] > ul > li, footer .footer-grid > div[data-foot-state="open"] > ul > li > a{ text-align:center !important; /* V226-fix8 Issue 2: was inherited start (LTR-left/RTL-right) */ } /* ===== TRANSITIONS ===================================== CSS-only animation. JS does NOT animate anything. V226-fix1d: max-height AND opacity removed from the transition list. CSS transitions don't interpolate properties whose value comes from var() when the variable's value changes — browsers see the property text as "still var(--foot-mh)" / "still var(--foot-op)" and short-circuit the transition, leaving the rendered value stuck at the start value (observed live: rectH stayed at 27px = padding only AND opacity stayed at 0, but both jumped to correct values the instant transitions were disabled). Chevron rotation still transitions (concrete value, no var). Panel open/close now snaps — appropriate for a tap- responsive accordion. */ footer .footer-grid > div:not(.footer-brand) > ul, footer .footer-grid > div:not(.footer-brand) > .contact-line{ /* no transition — see V226-fix1d note above */ } /* ===== FOCUS RING (a11y) =============================== Visible focus indicator on the tab h5 — gold, 2 px, 2 px offset. Inset shape mirrors the tab cell shape. */ footer .footer-grid > div:not(.footer-brand) > h5:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; } } /* ===== REDUCED MOTION ==================================== V226-fix5 / V226-fix9: honor user / OS preference. The press-down transform on h5:active is disabled — the active gradient + label color flip on open still provide the affordance signal. */ @media (max-width:540px) and (prefers-reduced-motion: reduce){ footer .footer-grid > div:not(.footer-brand) > ul, footer .footer-grid > div:not(.footer-brand) > .contact-line, footer .footer-grid > div:not(.footer-brand) > h5::after{ transition:none !important; } footer .footer-grid > div:not(.footer-brand) > h5{ transition:none !important; /* V226-fix9: no press-down animation */ } footer .footer-grid > div:not(.footer-brand) > h5:active{ transform:none !important; /* V226-fix9: no scale on press */ } }