/** * Contact Page Styles — Egyptra Travel * * The page markup is built on the TTD design system (.ttd-* layout primitives, * .hg-* components, both shipped by hurghada-critical.css + hurghada-ausfluege.css). * This file owns only what is specific to the contact page: * 1. form internals + sidebar + success state (.ct-* ) * 2. a page-scoped fix layer that adapts shared TTD rules to this page, * always under .hg-contact-page so no other TTD page is affected * 3. the shared footer + cookie banner styles this page relies on * * Class prefix: ct- (contact). BEM-like: ct-block__element--modifier. * State classes: is-open, is-active, is-error, is-success, is-hidden, is-visible. * RTL overrides and responsive rules live at the bottom of each section. * * 2026-08-07 polish pass — the .ct-hero / .ct-trust / .ct-services / .ct-faq / * .ct-wa-float__btn / .ct-sidebar__item / .ct-sidebar__cta blocks were deleted: * the TTD rebuild removed those elements from the markup, so 44 of the 80 .ct- * classes this file targeted matched nothing at all. */ /* ========== DESIGN TOKENS ========== */ :root { --ct-navy: #284878; --ct-navy-dark: #1d3760; --ct-navy-light: #3a5c94; --ct-gold: #d4a96c; --ct-gold-dark: #c19c77; --ct-green: #059669; --ct-green-bg: #ecfdf5; --ct-red: #ef4444; --ct-red-bg: #fef2f2; --ct-text-primary: #0f172a; --ct-text-secondary: #475569; --ct-text-muted: #64748b; --ct-text-light: #94a3b8; --ct-bg-page: #fff; --ct-bg-secondary: #f8fafc; --ct-bg-tertiary: #f1f5f9; --ct-border: #e2e8f0; --ct-border-focus: #284878; --ct-radius-sm: 8px; --ct-radius: 12px; --ct-radius-lg: 16px; --ct-radius-xl: 20px; --ct-radius-full: 9999px; --ct-shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --ct-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --ct-shadow-md: 0 4px 12px rgba(0,0,0,0.08); --ct-shadow-lg: 0 8px 24px rgba(0,0,0,0.12); --ct-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --ct-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* --eg-* aliases for shared components (footer, cookie banner) */ --eg-font: var(--ct-font); --eg-navy: var(--ct-navy); --eg-navy-dark: var(--ct-navy-dark); --eg-text-primary: var(--ct-text-primary); --eg-text-secondary: var(--ct-text-secondary); --eg-text-muted: var(--ct-text-muted); --eg-text-light: var(--ct-text-light); --eg-bg-secondary: var(--ct-bg-secondary); --eg-bg-tertiary: var(--ct-bg-tertiary); --eg-border: var(--ct-border); --eg-border-light: #e8ecf1; --eg-green-icon: var(--ct-green); --eg-radius-xs: 6px; --eg-radius-sm: var(--ct-radius-sm); --eg-radius-full: var(--ct-radius-full); --z-modal: 500; } /* ========== BASE ========== */ .contact-page-body { font-family: var(--ct-font); color: var(--ct-text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ================================================================ PAGE-SCOPED TTD FIXES Everything here is namespaced to .hg-contact-page (set on ) so the shared TTD stylesheets stay untouched for other pages. ================================================================ */ /* --- Centred section heads ------------------------------------- .ttd-section-head h2::after is a gold rule pinned to left:0, which the shared system draws under LEFT-aligned headings. This page centres its section heads, so the rule has to be centred with them. */ .hg-contact-page .ttd-section-head { text-align: center; max-width: 62ch; margin-inline: auto; margin-bottom: 2rem; } .hg-contact-page .ttd-section-head h2::after { left: 50%; transform: translateX(-50%); } /* --- Cards ----------------------------------------------------- .hg-content-card:not(:has(> img)) > * zeroes horizontal padding on every direct child (it exists to let image cards run their photo edge to edge). Specificity (0,1,1) beats a bare .ct-* rule, so buttons inside cards lose their side padding and, being flex items, stretch full width with their label stuck to the inline start. Restore both. */ .hg-contact-page .hg-content-card > .hg-cta-primary, .hg-contact-page .hg-content-card > .hg-cta-secondary { padding-inline: 1.25rem; justify-content: center; text-align: center; } /* Filled and outlined CTAs sat 2px apart because only the outlined one had a border. Give both the same box so they line up across a row of cards. */ .hg-contact-page .hg-cta-primary { border: 1px solid transparent; } /* Channel + trust cards: centre the content column, and let the CTA sit on a consistent baseline no matter how long the description wraps. */ .hg-contact-page .ct-channel-card { text-align: center; align-items: stretch; } .hg-contact-page .ct-channel-card__icon { font-size: 2.25rem; line-height: 1; margin-bottom: 0.65rem; } .hg-contact-page .ct-channel-card h3 { margin: 0.25rem 0 0.35rem; } .hg-contact-page .ct-channel-card__desc { color: var(--ct-text-secondary); margin-bottom: auto; padding-bottom: 0.85rem; } .hg-contact-page .ct-channel-card .hg-cta-primary, .hg-contact-page .ct-channel-card .hg-cta-secondary { margin-top: 0.75rem; } .hg-contact-page .ct-channel-card--whatsapp .hg-cta-primary { background: #25D366; border-color: #25D366; color: #fff; box-shadow: 0 4px 14px rgba(37,211,102,0.28); } .hg-contact-page .ct-channel-card--whatsapp .hg-cta-primary:hover { background: #1fba59; border-color: #1fba59; color: #fff; } .hg-contact-page .ct-icon--whatsapp { color: #25D366; } .hg-contact-page .ct-icon--navy { color: var(--ct-navy); } .hg-contact-page .ct-icon--gold { color: var(--ct-gold); } /* Trust cards ("Why contact Egyptra?") */ .hg-contact-page .ct-trust-card__icon { font-size: 1.75rem; line-height: 1; margin-bottom: 0.6rem; } .hg-contact-page .ct-trust-card h3 { margin: 0.25rem 0 0.35rem; font-size: 1.05rem; } /* --- Hero ------------------------------------------------------ The photo lives here rather than in an inline style so phones can be sent a smaller source and so the URL can be preloaded from . Widths must stay inside img.php's whitelist. */ .hg-contact-page .ct-hero { background-image: linear-gradient(135deg, rgba(11,30,55,0.78), rgba(11,30,55,0.55)), url('/img.php?src=uploads%2Fphoto_library%2Fphoto_67bc308119c48.jpeg&w=1200'); background-size: cover; background-position: center; } @media (max-width: 640px) { .hg-contact-page .ct-hero { background-image: linear-gradient(135deg, rgba(11,30,55,0.80), rgba(11,30,55,0.58)), url('/img.php?src=uploads%2Fphoto_library%2Fphoto_67bc308119c48.jpeg&w=800'); } } /* .ttd-eyebrow is navy by default, which is invisible on a navy photo hero. */ .hg-contact-page .ct-hero__eyebrow { display: flex; align-items: center; gap: 0.5rem; color: #fff; opacity: 0.95; letter-spacing: 0.16em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); } .hg-contact-page .ct-hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,0.35); } .hg-contact-page .ct-hero-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 0; } .hg-contact-page .ttd-hero-meta { margin-top: 1.25rem; } /* The SSR used to force the stat numbers white inline, which overrode the design system's gold. Keep them gold — they are the hero's only accent. */ .hg-contact-page .ttd-hero-meta li strong { color: var(--ct-gold); font-size: 1.35rem; font-weight: 700; line-height: 1.15; } .hg-contact-page .ttd-hero-meta li span { font-size: 0.9rem; opacity: 0.92; } .hg-contact-page .ct-hero-availability { margin: 1.15rem 0 0; font-size: 0.9rem; color: #fff; opacity: 0.92; display: flex; align-items: center; gap: 0.45rem; } .hg-contact-page .ct-hero-availability::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.25); flex-shrink: 0; } /* --- Table of contents ----------------------------------------- */ .hg-contact-page .ct-toc-section { padding-block: 1rem; } .hg-contact-page .hg-toc > summary { list-style: none; display: flex; align-items: center; gap: 0.55rem; } .hg-contact-page .hg-toc > summary::-webkit-details-marker { display: none; } .hg-contact-page .hg-toc > summary::after { content: '\f078'; /* chevron-down */ font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; font-size: 0.7rem; margin-inline-start: auto; color: var(--ct-text-muted); transition: transform var(--ct-transition); } .hg-contact-page .hg-toc[open] > summary::after { transform: rotate(180deg); } .hg-contact-page .ct-toc__list { margin: 0.85rem 0 0.25rem; padding-inline-start: 1.35rem; color: var(--ct-text-secondary); line-height: 1.9; } .hg-contact-page .ct-toc__list a { color: inherit; text-decoration: none; } .hg-contact-page .ct-toc__list a:hover { color: var(--ct-navy); text-decoration: underline; } /* ========== FORM SECTION ========== */ .ct-form-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; } /* Form. This is the card. It used to be wrapped in a second .hg-content-card, which drew a bordered box inside a bordered box and — through the :not(:has()) rule above — flattened the form's own horizontal padding to 0. The wrapper is gone from the markup; .ct-form carries the card chrome by itself. */ .ct-form { background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-lg); padding: 32px; box-shadow: var(--ct-shadow-sm); } .ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .ct-form__group { margin-bottom: 18px; } /* Fields inside the two-up row already get their rhythm from the grid gap. */ .ct-form__row > .ct-form__group { margin-bottom: 0; } .ct-form__row { margin-bottom: 18px; } .ct-form__label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ct-text-primary); margin-bottom: 6px; } .ct-form__required { color: var(--ct-red); margin-inline-start: 2px; } .ct-form__optional { color: var(--ct-text-muted); font-weight: 400; font-size: 0.8rem; margin-inline-start: 4px; } .ct-form__input, .ct-form__select, .ct-form__textarea { width: 100%; /* 16px is deliberate: below it, iOS Safari zooms the whole page on focus. */ font-size: 1rem; min-height: 44px; padding: 11px 14px; font-family: var(--ct-font); color: var(--ct-text-primary); background: #fff; border: 1.5px solid var(--ct-border); border-radius: var(--ct-radius-sm); transition: border-color var(--ct-transition), box-shadow var(--ct-transition); outline: none; box-sizing: border-box; } .ct-form__input::placeholder, .ct-form__textarea::placeholder { color: var(--ct-text-light); } .ct-form__input:focus, .ct-form__select:focus, .ct-form__textarea:focus { border-color: var(--ct-border-focus); box-shadow: 0 0 0 3px rgba(40,72,120,0.1); } .ct-form__input.is-error, .ct-form__select.is-error, .ct-form__textarea.is-error { border-color: var(--ct-red); box-shadow: 0 0 0 3px rgba(239,68,68,0.08); } .ct-form__input.is-success, .ct-form__select.is-success, .ct-form__textarea.is-success { border-color: var(--ct-green); } .ct-form__select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } /* An unchosen select should read as a placeholder, not as an answer. */ .ct-form__select:invalid, .ct-form__select.is-placeholder { color: var(--ct-text-light); } .ct-form__textarea { resize: vertical; min-height: 132px; line-height: 1.55; } .ct-form__error { display: none; font-size: 0.78rem; color: var(--ct-red); margin-top: 5px; align-items: center; gap: 4px; } .ct-form__error.is-visible { display: flex; } .ct-form__error svg { width: 14px; height: 14px; flex-shrink: 0; } .ct-form__message-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 5px; } .ct-form__hint { font-size: 0.75rem; color: var(--ct-text-muted); } .ct-form__char-count { font-size: 0.75rem; color: var(--ct-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Honeypot. Hidden with the clip pattern, NOT left:-9999px. An off-screen inline offset is invisible in LTR but scrolls for real in RTL — it was adding ~10,000px of horizontal scroll to the Arabic page. */ .ct-form__hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Submit button */ .ct-form__submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 24px; font-size: 0.95rem; font-weight: 600; font-family: var(--ct-font); color: #fff; background: var(--ct-navy); border: 1px solid transparent; border-radius: var(--ct-radius-sm); cursor: pointer; transition: all var(--ct-transition); min-height: 48px; margin-top: 4px; } .ct-form__submit:hover:not(:disabled) { background: var(--ct-navy-dark); box-shadow: var(--ct-shadow-md); transform: translateY(-1px); } .ct-form__submit:active { transform: translateY(0); } .ct-form__submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: none; } /* Spinner — a single ring. The markup used to nest a Font Awesome fa-spin icon inside this element, so two spinners rotated at once inside an 18px box. */ .ct-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: ct-spin 0.6s linear infinite; flex-shrink: 0; } .ct-form__submit.is-loading .ct-spinner { display: block; } @keyframes ct-spin { to { transform: rotate(360deg); } } /* Trust badge */ .ct-form__trust-badge { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 0; font-size: 0.8rem; color: var(--ct-text-muted); } .ct-form__trust-badge i { color: var(--ct-gold); } /* ========== WHAT HAPPENS NEXT ========== */ .ct-what-happens { background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border: 1px solid #d1fae5; border-radius: var(--ct-radius); padding: 20px 24px; margin-top: 16px; } .ct-what-happens h3 { font-size: 1rem; font-weight: 600; color: var(--ct-text-primary); margin: 0 0 0.65rem; } /* An ordered list should show its numbers. list-style:none turned these into anonymous green dots, which read as three unrelated notes rather than steps. */ .ct-what-happens__list { list-style: decimal; margin: 0; padding-inline-start: 1.25rem; color: var(--ct-text-secondary); line-height: 1.7; } .ct-what-happens__list li { font-size: 0.9rem; padding: 2px 0; } .ct-what-happens__list li::marker { color: var(--ct-green); font-weight: 700; } /* ========== SUCCESS STATE ========== */ .ct-success { display: none; text-align: center; padding: 48px 24px; background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-lg); box-shadow: var(--ct-shadow-sm); } .ct-success.is-visible { display: block; } .ct-success__icon { font-size: 3rem; line-height: 1; color: var(--ct-green); margin-bottom: 0.75rem; animation: ct-check-pop 0.4s ease-out; } @keyframes ct-check-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } .ct-success__title { font-size: 1.4rem; font-weight: 700; color: var(--ct-text-primary); margin: 0 0 8px; } .ct-success__text { font-size: 0.95rem; color: var(--ct-text-secondary); margin: 0 0 24px; line-height: 1.5; } .ct-success__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 24px; font-size: 0.875rem; font-weight: 600; font-family: var(--ct-font); color: var(--ct-navy); background: var(--ct-bg-secondary); border: 1px solid var(--ct-border); border-radius: var(--ct-radius-sm); cursor: pointer; transition: all var(--ct-transition); } .ct-success__btn:hover { background: var(--ct-bg-tertiary); } /* ========== SIDEBAR ========== */ .ct-sidebar { background: #fff; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-lg); padding: 28px; box-shadow: var(--ct-shadow-sm); height: fit-content; } .ct-sidebar > h3 { font-size: 1.1rem; font-weight: 700; color: var(--ct-text-primary); margin: 0 0 20px; } .ct-sidebar__section { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--ct-border); } .ct-sidebar__section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .ct-sidebar__label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ct-text-muted); margin: 0 0 8px; } .ct-sidebar__value { font-size: 1rem; font-weight: 600; color: var(--ct-text-primary); text-decoration: none; word-break: break-word; } .ct-sidebar__value:hover { color: var(--ct-navy); text-decoration: underline; } .ct-sidebar__hours { color: var(--ct-text-secondary); font-size: 0.9rem; } .ct-sidebar__hours-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; } .ct-sidebar__hours-row span:last-child { font-weight: 600; color: var(--ct-text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; } .ct-sidebar .hg-cta-primary { display: flex; width: 100%; justify-content: center; padding-inline: 1.25rem; background: #25D366; border-color: #25D366; color: #fff; box-shadow: 0 4px 14px rgba(37,211,102,0.28); } .ct-sidebar .hg-cta-primary:hover { background: #1fba59; border-color: #1fba59; color: #fff; } /* ========== MAP (click-to-load facade) ========== The live Google iframe used to be embedded on every page load. That put a third-party frame on the page before the cookie banner was answered, and on a phone it swallowed vertical swipes so the page could not be scrolled past it. The facade below loads the real map only once the visitor asks for it. */ .ct-sidebar__map { margin-top: 10px; } .ct-map { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--ct-border); border-radius: var(--ct-radius-sm); overflow: hidden; background: #e8eef4; cursor: pointer; padding: 0; font-family: inherit; } .ct-map__img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; } .ct-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .ct-map__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 12px; background: linear-gradient(180deg, rgba(11,30,55,0.12), rgba(11,30,55,0.45)); color: #fff; transition: background var(--ct-transition); } .ct-map:hover .ct-map__overlay, .ct-map:focus-visible .ct-map__overlay { background: linear-gradient(180deg, rgba(11,30,55,0.2), rgba(11,30,55,0.55)); } .ct-map__pin { font-size: 1.6rem; line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,0.35); } .ct-map__label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 9px 16px; background: #fff; color: var(--ct-navy); border-radius: var(--ct-radius-full); font-size: 0.82rem; font-weight: 600; box-shadow: var(--ct-shadow-md); } .ct-map__hint { font-size: 0.72rem; opacity: 0.9; text-shadow: 0 1px 4px rgba(0,0,0,0.4); } .ct-map.is-loaded { cursor: default; } .ct-map.is-loaded .ct-map__overlay, .ct-map.is-loaded .ct-map__img { display: none; } .ct-sidebar__map-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; margin-top: 2px; color: var(--ct-navy); text-decoration: none; font-size: 0.85rem; font-weight: 600; } .ct-sidebar__map-link:hover { text-decoration: underline; } /* ========== DESTINATION CARDS ========== */ .hg-contact-page .ct-dest-card { display: block; padding: 0; overflow: hidden; text-decoration: none; color: inherit; } .hg-contact-page .ct-dest-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: #0b1e37; } .hg-contact-page .ct-dest-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .hg-contact-page .ct-dest-card:hover .ct-dest-card__media img { transform: scale(1.05); } .hg-contact-page .ct-dest-card__body { padding: 1rem 1.25rem 1.15rem; } .hg-contact-page .ct-dest-card__body h3 { margin: 0; font-size: 1.05rem; color: var(--ct-navy); } .hg-contact-page .ct-dest-card__body p { margin: 0.25rem 0 0; color: var(--ct-text-secondary); font-size: 0.9rem; } /* ========== FAQ ========== .hg-faq is max-width only; without an auto inline margin it hugs the start edge of the container while its section head is centred above it. */ .hg-contact-page .ct-faq { max-width: 820px; margin-inline: auto; } /* The shared system pins the +/- marker with physical `right` and reserves its room with physical `padding-right`. In Arabic that puts the marker at the reading start, overlapping the question text. Use logical properties. */ .hg-contact-page .ct-faq .hg-faq-item summary { padding-inline: 1.4rem 3rem; } .hg-contact-page .ct-faq .hg-faq-item summary::after { right: auto; inset-inline-end: 1.4rem; } /* ========== WHATSAPP FLOAT ========== */ .ct-wa-float { position: fixed; bottom: 1.25rem; inset-inline-end: 1.25rem; z-index: 600; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff; font-size: 1.6rem; text-decoration: none; box-shadow: 0 6px 20px rgba(37,211,102,0.45); transition: opacity var(--ct-transition), transform var(--ct-transition), bottom var(--ct-transition); } .ct-wa-float:hover { color: #fff; transform: scale(1.06); } .ct-wa-float.is-hidden { opacity: 0; transform: scale(0.8) translateY(10px); pointer-events: none; } /* Lift the float clear of the cookie banner while the banner is showing, instead of parking a 56px circle on top of its buttons. */ body:has(.np-cookie-banner.show) .ct-wa-float { bottom: calc(1.25rem + 92px); } /* ========== ALERT (inline errors) ========== */ .ct-alert { padding: 12px 16px; border-radius: var(--ct-radius-sm); font-size: 0.85rem; margin-bottom: 20px; display: none; } .ct-alert.is-visible { display: block; } .ct-alert--error { background: var(--ct-red-bg); color: #b91c1c; border: 1px solid rgba(239,68,68,0.2); } .ct-alert--success { background: var(--ct-green-bg); color: var(--ct-green); border: 1px solid rgba(5,150,105,0.15); } /* ========== RTL OVERRIDES ========== */ [dir="rtl"] .ct-form__select { background-position: left 12px center; padding-right: 14px; padding-left: 36px; } /* ========== RESPONSIVE ========== */ /* Tablet — the sidebar becomes a full-width panel below the form, so lay its blocks out in columns rather than one tall stretched stack. */ @media (min-width: 641px) and (max-width: 991px) { .ct-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; align-items: start; } .ct-sidebar > h3 { grid-column: 1 / -1; } .ct-sidebar__section:last-child { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--ct-border); } .ct-map { aspect-ratio: 21 / 9; } } /* Desktop */ @media (min-width: 992px) { .ct-form-grid { grid-template-columns: minmax(0, 1fr) 340px; } /* Sticky, but never taller than the space it can stick in — otherwise the panel's lower half (the map) stays below the fold for the whole pinned range and the stickiness buys the reader nothing. */ .ct-sidebar { position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; overscroll-behavior: contain; } } /* Mobile */ @media (max-width: 640px) { /* The hero used to occupy 699px of an 812px screen before a single line of content appeared. Tighten it and lay the stats out three-across. */ .hg-contact-page .ttd-hero--image { min-height: 0; padding-block: 2rem 2.25rem; } .hg-contact-page .ct-hero-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .hg-contact-page .ct-hero-cta-row > :first-child { grid-column: 1 / -1; } .hg-contact-page .ct-hero-cta-row .ttd-btn { width: 100%; padding-inline: 0.75rem; white-space: nowrap; } .hg-contact-page .ttd-hero-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.1rem; } .hg-contact-page .ttd-hero-meta li { flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0.5rem 0.35rem; text-align: center; } .hg-contact-page .ttd-hero-meta li strong { font-size: 1.05rem; } .hg-contact-page .ttd-hero-meta li span { font-size: 0.7rem; line-height: 1.25; } .ct-form-grid { gap: 20px; } .ct-form { padding: 20px 18px; } .ct-form__row { grid-template-columns: 1fr; } .ct-sidebar { padding: 20px 18px; } .ct-success { padding: 36px 20px; } } /* Small phones */ @media (max-width: 380px) { .hg-contact-page .ttd-hero-meta li strong { font-size: 0.95rem; } .hg-contact-page .ttd-hero-meta li span { font-size: 0.65rem; } } /* Motion */ @media (prefers-reduced-motion: reduce) { .ct-spinner { animation-duration: 1.4s; } .ct-success__icon { animation: none; } .hg-contact-page .ct-dest-card__media img, .ct-wa-float, .ct-form__submit { transition: none; } .hg-contact-page .ct-dest-card:hover .ct-dest-card__media img { transform: none; } } /* ============================================ SHARED FOOTER (from product-content.css) ============================================ */ .np-footer { background: var(--eg-bg-secondary); border-top: 1px solid var(--eg-border); padding: 2rem 0 1.5rem; font-family: var(--eg-font); color: var(--eg-text-secondary); } .np-footer .container { max-width: 1140px; margin: 0 auto; padding: 0 20px; } .np-footer__grid { display: grid; grid-template-columns: 1fr; gap: 0; } .np-footer__grid > div { padding: 1.25rem 0; border-bottom: 1px solid var(--eg-border-light); } .np-footer__grid > div:last-child { border-bottom: none; } @media (min-width: 768px) { .np-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; } .np-footer__grid > div { padding: 0; border-bottom: none; } } .np-footer__logo-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-bottom: 10px; transition: opacity 0.2s; } .np-footer__logo-link:hover { opacity: 0.8; } .np-footer__logo { width: 40px; height: auto; flex-shrink: 0; } .np-footer__brand-name { font-family: var(--eg-font); font-size: 1.2rem; font-weight: 700; color: var(--eg-text-primary); margin: 0; letter-spacing: -0.01em; } .np-footer__brand-desc { font-size: 0.82rem; color: var(--eg-text-muted); line-height: 1.55; margin: 0 0 12px; max-width: 320px; } .np-footer__social { display: flex; gap: 8px; } .np-footer__social a { width: 34px; height: 34px; border-radius: var(--eg-radius-full); background: var(--eg-bg-tertiary); color: var(--eg-text-muted); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; text-decoration: none; transition: all 0.2s; } .np-footer__social a:hover { background: var(--eg-navy); color: #fff; } .np-footer__col-title { font-family: var(--eg-font); font-size: 0.82rem; font-weight: 600; color: var(--eg-text-primary); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 10px; } .np-footer__links { list-style: none; padding: 0; margin: 0; } .np-footer__links li { margin-bottom: 6px; } .np-footer__links a { font-size: 0.82rem; color: var(--eg-text-muted); text-decoration: none; transition: color 0.15s; } .np-footer__links a:hover { color: var(--eg-navy); } .np-footer__bottom { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--eg-border); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; } .np-footer__copy { font-size: 0.78rem; color: var(--eg-text-light); margin: 0; } .np-footer__copy a { color: var(--eg-text-muted); text-decoration: none; } .np-footer__copy a:hover { color: var(--eg-navy); } .np-footer__payments { display: flex; gap: 10px; align-items: center; } .np-footer__secure-label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 600; color: var(--eg-green-icon); white-space: nowrap; } .np-footer__secure-label i { font-size: 0.65rem; color: var(--eg-green-icon); } .np-footer__payments i { font-size: 1.4rem; color: var(--eg-text-light); } .np-footer__cash-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; height: 18px; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 3px; font-size: 0.62rem; font-weight: 700; color: #475569; letter-spacing: 0.04em; white-space: nowrap; } @media (max-width: 767px) { .np-footer__bottom { flex-direction: column; text-align: center; } } /* ============================================ COOKIE BANNER (from product-content.css) ============================================ */ .np-cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--eg-border); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08); z-index: var(--z-modal); transform: translateY(100%); transition: transform 0.3s ease; padding: 16px 0; } .np-cookie-banner.show { transform: translateY(0); } .np-cookie-inner { max-width: 1140px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .np-cookie-text { font-family: var(--eg-font); font-size: 0.82rem; color: var(--eg-text-secondary); margin: 0; flex: 1; min-width: 200px; } .np-cookie-text a { color: var(--eg-navy); text-decoration: underline; } .np-cookie-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .np-cookie-manage { font-family: var(--eg-font); font-size: 0.75rem; color: var(--eg-text-secondary); text-decoration: underline; white-space: nowrap; cursor: pointer; padding: 2px 0; margin-right: 4px; } .np-cookie-manage:hover { color: var(--eg-navy); } .np-cookie-btn { font-family: var(--eg-font); font-size: 0.8rem; font-weight: 600; padding: 8px 16px; border-radius: var(--eg-radius-xs); border: none; cursor: pointer; transition: all 0.15s; } .np-cookie-btn--secondary { background: var(--eg-bg-tertiary); color: var(--eg-text-secondary); } .np-cookie-btn--secondary:hover { background: var(--eg-border); } .np-cookie-btn--primary { background: var(--eg-navy); color: #fff; } .np-cookie-btn--primary:hover { background: var(--eg-navy-dark); } /* == Arabic (RTL) chrome ============================================= Every np chrome rule reads var(--eg-font), so overriding the property moves footer, cookie banner and header nav together. The second rule is required because --eg-font is redefined ON .np-footer / .np-cookie-banner, which shadows the html-level value for that subtree. .np-header__logo-pro keeps DM Sans deliberately: it is the Latin wordmark, not Arabic copy. Gated on [dir="rtl"] -- the other 28 languages are untouched. ================================================================== */ html[dir="rtl"]{--eg-font:'Cairo','DM Sans','Segoe UI',Tahoma,Arial,sans-serif} html[dir="rtl"] .np-footer, html[dir="rtl"] .np-cookie-banner{--eg-font:'Cairo','DM Sans','Segoe UI',Tahoma,Arial,sans-serif} /* == Arabic (RTL) chrome children ==================================== main.css / header.css set font-family on the universal selector `*`. (0,0,0) is the lowest specificity there is, but a direct match beats INHERITANCE -- so footer and cookie-banner children took -apple-system while .np-footer itself was correctly Cairo. Re-assert the token on descendants. Icons excluded so an icon font can never be blanked. ================================================================== */ html[dir="rtl"] .np-footer *:not(i):not(svg):not([class*="fa-"]), html[dir="rtl"] .np-cookie-banner *:not(i):not(svg):not([class*="fa-"]){font-family:var(--eg-font)}