/* ═══════════════════════════════════════════════════════════ GEO GATEWAY — The Digital Atelier Built from Stitch source + polished against DESIGN.md ═══════════════════════════════════════════════════════════ */ :root { --gw-primary: #002d27; --gw-primary-container: #13443d; --gw-on-primary: #ffffff; --gw-on-primary-container: #82b1a7; --gw-secondary: #785a00; --gw-secondary-container: #fdc425; --gw-on-secondary-container: #6d5200; --gw-secondary-fixed-dim: #f7be1d; --gw-surface: #fbfbe2; --gw-surface-container-low: #f5f5dc; --gw-on-surface: #1b1d0e; --gw-on-surface-variant: #404846; --gw-shadow-tint: rgba(19, 68, 61, 0.08); } /* ══════════════════════════════════════ CRITICAL: Hide ALL site content when gateway is active. The gateway JS adds this class to . ══════════════════════════════════════ */ body.ad-gw-active > *:not(.ad-geo-gateway) { display: none !important; } /* ══════════════════════════════════════ ROOT — full viewport, scrollable ══════════════════════════════════════ */ .ad-geo-gateway { position: fixed; inset: 0; z-index: 2147483647; /* max 32-bit — beats everything */ display: flex !important; flex-direction: column; background: var(--gw-surface); opacity: 0; transition: opacity 0.5s ease; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; color: var(--gw-on-surface); font-family: 'Inter', sans-serif; } .ad-geo-gateway--visible { opacity: 1; } /* ══════════════════════════════════════ NAV ══════════════════════════════════════ */ .ad-gw-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; min-height: 72px; background: rgba(2, 44, 34, 0.80); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-shrink: 0; box-shadow: 0px 20px 40px var(--gw-shadow-tint); } .ad-gw-nav__brand { font-family: 'Manrope', sans-serif; font-size: 1.5rem; font-weight: 900; color: #eab308; letter-spacing: -0.03em; text-transform: uppercase; } .ad-gw-nav__center { font-family: 'Inter', sans-serif; font-size: 0.875rem; color: rgba(250, 245, 235, 0.70); letter-spacing: 0.025em; } .ad-gw-nav__icons { display: flex; gap: 1rem; align-items: center; } .ad-gw-nav__icons .material-symbols-outlined { color: #eab308; font-size: 24px; cursor: pointer; transition: transform 0.3s ease; } .ad-gw-nav__icons .material-symbols-outlined:hover { transform: scale(1.05); } /* ══════════════════════════════════════ SPLIT — desktop side-by-side ══════════════════════════════════════ */ .ad-gw-main { flex: 1 0 auto; display: flex; flex-direction: column; } .ad-gw-split { flex: 1 0 auto; display: flex; min-height: 500px; } /* ══════════════════════════════════════ KENYA — 60% ══════════════════════════════════════ */ .ad-gw-kenya { width: 60%; background: var(--gw-primary-container); position: relative; overflow: hidden; cursor: pointer; display: flex; } .ad-gw-kenya::before { content: ''; position: absolute; inset: 0; opacity: 0.10; background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png'); pointer-events: none; } .ad-gw-kenya__inner { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 3rem 4rem; z-index: 1; width: 100%; } .ad-gw-kenya__content { max-width: 36rem; } /* Image */ .ad-gw-kenya__image { border-top-left-radius: 4rem; border-top-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0; overflow: hidden; margin-bottom: 1.5rem; box-shadow: 0 25px 50px -12px rgba(19, 68, 61, 0.30); transition: transform 0.7s ease; position: relative; } .ad-gw-kenya__image::after { content: ''; position: absolute; inset: 0; background: var(--gw-primary); opacity: 0.05; pointer-events: none; } .ad-gw-kenya:hover .ad-gw-kenya__image { transform: scale(1.02); } .ad-gw-kenya__image img { width: 100%; height: 18rem; object-fit: cover; display: block; } /* Title */ .ad-gw-kenya__title { font-family: 'Manrope', sans-serif; font-size: 3.5rem; font-weight: 800; color: var(--gw-on-primary) !important; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 0.75rem; } /* Desc */ .ad-gw-kenya__desc { font-family: 'Inter', sans-serif; font-size: 1.15rem; color: var(--gw-on-primary-container) !important; line-height: 1.5; margin-bottom: 1.5rem; max-width: 28rem; } /* Trust */ .ad-gw-kenya__trust { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; } .ad-gw-kenya__trust-item { display: flex; align-items: center; gap: 0.75rem; color: var(--gw-secondary-fixed-dim) !important; } .ad-gw-kenya__trust-item .material-symbols-outlined { font-size: 20px; color: inherit !important; } .ad-gw-kenya__trust-item span:last-child { font-family: 'Inter', sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: inherit !important; } /* CTA */ .ad-gw-kenya__cta, .ad-gw-kenya__cta:link, .ad-gw-kenya__cta:visited, .ad-gw-kenya__cta:hover, .ad-gw-kenya__cta:active { display: inline-block; background: var(--gw-secondary-container) !important; color: var(--gw-on-secondary-container) !important; padding: 1.1rem 2.5rem; border-radius: 0.375rem; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.1rem; text-decoration: none !important; border: none; cursor: pointer; box-shadow: 0 20px 40px var(--gw-shadow-tint); transition: transform 0.2s ease, box-shadow 0.3s ease; line-height: 1.4; } .ad-gw-kenya__cta:hover { transform: scale(1.02); } /* ══════════════════════════════════════ INTERNATIONAL — 40% ══════════════════════════════════════ */ .ad-gw-intl { width: 40%; background: var(--gw-surface); position: relative; overflow: hidden; cursor: pointer; display: flex; } .ad-gw-intl__inner { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 3rem 3rem; z-index: 1; width: 100%; } .ad-gw-intl__content { max-width: 28rem; } /* Image */ .ad-gw-intl__image { border-radius: 0.75rem; overflow: hidden; margin-bottom: 1.5rem; box-shadow: 0 10px 30px rgba(19, 68, 61, 0.08); transition: filter 0.7s ease; filter: grayscale(0.2); position: relative; } .ad-gw-intl__image::after { content: ''; position: absolute; inset: 0; background: var(--gw-primary); opacity: 0.05; pointer-events: none; } .ad-gw-intl:hover .ad-gw-intl__image { filter: grayscale(0); } .ad-gw-intl__image img { width: 100%; height: 14rem; object-fit: cover; display: block; } /* Title */ .ad-gw-intl__title { font-family: 'Manrope', sans-serif; font-size: 2rem; font-weight: 700; color: var(--gw-primary) !important; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 0.75rem; } /* Desc */ .ad-gw-intl__desc { font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--gw-on-surface-variant) !important; line-height: 1.5; margin-bottom: 1.5rem; } /* Trust */ .ad-gw-intl__trust { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; } .ad-gw-intl__trust-item { display: flex; align-items: center; gap: 0.75rem; color: rgba(0, 45, 39, 0.70) !important; } .ad-gw-intl__trust-item .material-symbols-outlined { font-size: 20px; color: inherit !important; } .ad-gw-intl__trust-item span:last-child { font-family: 'Inter', sans-serif; font-size: 0.875rem; letter-spacing: 0.10em; text-transform: uppercase; color: inherit !important; } /* CTA */ .ad-gw-intl__cta, .ad-gw-intl__cta:link, .ad-gw-intl__cta:visited, .ad-gw-intl__cta:hover, .ad-gw-intl__cta:active { display: inline-block; background: var(--gw-primary) !important; color: var(--gw-on-primary) !important; padding: 1rem 2rem; border-radius: 0.375rem; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1rem; text-decoration: none !important; border: none; cursor: pointer; box-shadow: 0 10px 30px rgba(19, 68, 61, 0.10); transition: transform 0.2s ease, box-shadow 0.3s ease; line-height: 1.4; } .ad-gw-intl__cta:hover { transform: scale(1.02); } /* ══════════════════════════════════════ SWITCH NOTE ══════════════════════════════════════ */ .ad-gw-switch { background: var(--gw-surface-container-low); padding: 1rem; text-align: center; flex-shrink: 0; } .ad-gw-switch p { font-family: 'Inter', sans-serif; font-size: 0.75rem; color: var(--gw-on-surface-variant) !important; letter-spacing: 0.10em; text-transform: uppercase; margin: 0; } /* ══════════════════════════════════════ FOOTER ══════════════════════════════════════ */ .ad-gw-footer { background: #fafaf5; padding: 2.5rem 2rem; flex-shrink: 0; } .ad-gw-footer__inner { display: flex; align-items: center; gap: 1.5rem; max-width: 80rem; margin: 0 auto; flex-wrap: wrap; justify-content: space-between; } .ad-gw-footer__brand { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.25rem; color: #064e3b !important; } .ad-gw-footer__links { display: flex; flex-wrap: wrap; gap: 2rem; } .ad-gw-footer__links a, .ad-gw-footer__links a:link, .ad-gw-footer__links a:visited { font-family: 'Inter', sans-serif; font-size: 0.875rem; color: rgba(6, 78, 59, 0.60) !important; text-decoration: none !important; letter-spacing: 0.025em; transition: color 0.2s ease; } .ad-gw-footer__links a:hover { color: #ca8a04 !important; } .ad-gw-footer__copy { font-family: 'Inter', sans-serif; font-size: 0.75rem; color: rgba(6, 78, 59, 0.60) !important; } /* ══════════════════════════════════════ MOBILE ══════════════════════════════════════ */ @media (max-width: 768px) { .ad-gw-nav { padding: 0 1.25rem; min-height: 56px; } .ad-gw-nav__center { display: none; } .ad-gw-nav__brand { font-size: 1.15rem; } .ad-gw-split { flex-direction: column; min-height: auto; } .ad-gw-kenya, .ad-gw-intl { width: 100%; } /* Kenya mobile — centered */ .ad-gw-kenya__inner { padding: 2rem 1.5rem 2.5rem; align-items: center; } .ad-gw-kenya__content { text-align: center; display: flex; flex-direction: column; align-items: center; } .ad-gw-kenya__image img { height: 12rem; } .ad-gw-kenya__title { font-size: 2.2rem; } .ad-gw-kenya__desc { font-size: 0.95rem; margin-bottom: 1.2rem; } .ad-gw-kenya__trust { align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; } .ad-gw-kenya__trust-item span:last-child { font-size: 0.75rem; } .ad-gw-kenya__cta, .ad-gw-kenya__cta:link, .ad-gw-kenya__cta:visited, .ad-gw-kenya__cta:hover { width: 100%; max-width: 18rem; text-align: center; padding: 0.9rem 1.5rem; font-size: 0.95rem; } /* Intl mobile — centered */ .ad-gw-intl__inner { padding: 2rem 1.5rem 2.5rem; align-items: center; } .ad-gw-intl__content { text-align: center; display: flex; flex-direction: column; align-items: center; } .ad-gw-intl__image img { height: 12rem; } .ad-gw-intl__title { font-size: 1.8rem; } .ad-gw-intl__desc { font-size: 0.95rem; margin-bottom: 1.2rem; } .ad-gw-intl__trust { align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; } .ad-gw-intl__cta, .ad-gw-intl__cta:link, .ad-gw-intl__cta:visited, .ad-gw-intl__cta:hover { width: 100%; max-width: 18rem; text-align: center; padding: 0.9rem 1.5rem; font-size: 0.95rem; } /* Footer mobile */ .ad-gw-footer { padding: 1.5rem 1.25rem; } .ad-gw-footer__inner { flex-direction: column; gap: 0.8rem; text-align: center; justify-content: center; } .ad-gw-footer__links { gap: 1rem; justify-content: center; } .ad-gw-footer__links a, .ad-gw-footer__links a:link { font-size: 0.78rem; } } /* ── Fade out ── */ .ad-geo-gateway--leaving { opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }