/* GGreen global component CSS — extracted from common.js so it loads render-blocking-free in (no FOUC/CLS). Element id ggpl-global-css makes the JS injector no-op. */ :root { --font-ar: 'IBM Plex Sans Arabic', 'Public Sans', sans-serif; --ggpl-header-h: 64px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } .ggpl-skiplink { position: fixed; top: -60px; left: 12px; z-index: 1000; background: var(--palm-900); color: var(--sand-50); padding: 12px 20px; font: var(--text-label-sm); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); text-decoration: none; border-radius: 2px; transition: top 200ms ease; } .ggpl-skiplink:focus { top: 12px; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--terracotta-700); outline-offset: 2px; } .ggpl-reveal { animation: ggplReveal 700ms cubic-bezier(0.16,1,0.3,1) both; } @keyframes ggplReveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ggpl-reveal { animation: none; } } body { margin: 0; background: var(--surface-page); font-family: var(--font-body); color: var(--text-primary); overflow-x: hidden; } body.is-ar { font-family: var(--font-ar); } body.is-ar h1, body.is-ar h2, body.is-ar h3, body.is-ar .ggpl-wordmark span { font-family: 'Amiri', var(--font-ar); } a { color: var(--text-link); } a:hover { color: var(--text-link-hover); } ::selection { background: var(--terracotta-300); color: var(--palm-900); } .ggpl-container { max-width: 1320px; margin: 0 auto; padding-left: 48px; padding-right: 48px; width: 100%; } .ggpl-section { padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(72px, 9vw, 128px); } /* Header */ .ggpl-header { position: sticky; top: 0; z-index: 60; background: rgba(234,219,195,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); } .ggpl-header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--ggpl-header-h); gap: 24px; } .ggpl-wordmark { text-decoration: none; display: inline-flex; align-items: center; gap: 12px; } .ggpl-logo-img { height: 24px; width: auto; display: block; } .ggpl-logo-text { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1; letter-spacing: 0.03em; color: var(--palm-900); white-space: nowrap; } .ggpl-logo-text-light { color: var(--sand-50); } .ggpl-logo-text-footer { display: block; font-size: 2.05rem; } body.is-ar .ggpl-wordmark .ggpl-logo-text { font-family: var(--font-display); } .ggpl-logo-img-footer { height: 30px; margin-bottom: 4px; } .ggpl-nav { display: flex; gap: 36px; flex: 1; justify-content: center; } .ggpl-navlink { font: var(--text-label-sm); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); text-decoration: none; color: var(--stone-600); padding: 4px 0; position: relative; transition: color var(--duration-base,250ms) ease; } .ggpl-navlink:hover { color: var(--palm-900); } .ggpl-navlink.is-active { color: var(--terracotta-700); } .ggpl-navlink.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--terracotta-700); } .ggpl-header-actions { display: flex; align-items: center; gap: 20px; } .ggpl-burger { background: none; border: none; cursor: pointer; padding: 4px; display: none; } .ggpl-mobile-menu { display: flex; flex-direction: column; gap: 4px; padding: 16px 32px 28px; background: var(--surface-page); border-top: 1px solid var(--border-subtle); } .ggpl-mobile-link { font-family: var(--font-display); font-size: 1.6rem; text-decoration: none; color: var(--palm-900); padding: 10px 0; } .ggpl-mobile-link.is-active { color: var(--terracotta-700); font-style: italic; } /* Buttons */ .ggpl-btn { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; border: none; cursor: pointer; font: var(--text-label-sm); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); padding: 18px 26px; border-radius: 2px; transition: background var(--duration-base,250ms) ease, transform var(--duration-base,250ms) ease; white-space: nowrap; } .ggpl-btn-sm { padding: 12px 18px; } .ggpl-btn-arrow { display: inline-block; transition: transform var(--duration-base,250ms) ease; } .ggpl-btn:hover .ggpl-btn-arrow { transform: translateX(4px); } body.is-ar .ggpl-btn-arrow { transform: scaleX(-1); } body.is-ar .ggpl-btn:hover .ggpl-btn-arrow { transform: scaleX(-1) translateX(4px); } .ggpl-btn-dark { background: var(--palm-900); color: var(--sand-50); } .ggpl-btn-dark:hover { background: var(--palm-800); color: var(--sand-50); } .ggpl-btn-terracotta { background: var(--terracotta-700); color: var(--sand-50); } .ggpl-btn-terracotta:hover { background: color-mix(in srgb, var(--terracotta-700) 85%, black); color: var(--sand-50); } .ggpl-btn-light { background: var(--sand-50); color: var(--palm-900); } .ggpl-btn-light:hover { background: var(--sand-100); color: var(--palm-900); } .ggpl-btn-ghost { background: transparent; color: var(--sand-50); box-shadow: inset 0 0 0 1px var(--border-inverse); } .ggpl-btn-ghost:hover { background: rgba(251,248,243,0.08); color: var(--sand-50); } .ggpl-textlink { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: var(--text-label-sm); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); padding-bottom: 3px; border-bottom: 1px solid currentColor; transition: color var(--duration-base,250ms) ease; } .ggpl-textlink-dark { color: var(--palm-900); } .ggpl-textlink-dark:hover { color: var(--terracotta-700); } .ggpl-textlink-light { color: var(--sand-50); } .ggpl-textlink-light:hover { color: var(--terracotta-300); } .ggpl-textlink:hover .ggpl-btn-arrow { transform: translateX(4px); } /* Placeholder frame */ .ggpl-frame { position: relative; width: 100%; border: 1px dashed var(--stone-400); background-color: var(--sand-200); background-image: repeating-linear-gradient(135deg, transparent, transparent 9px, rgba(255,255,255,0.45) 9px, rgba(255,255,255,0.45) 10px); display: flex; align-items: center; justify-content: center; padding: 28px; overflow: hidden; } .ggpl-frame-label { position: absolute; top: 18px; left: 18px; font: var(--text-label-sm); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--terracotta-700); display: inline-flex; align-items: center; gap: 8px; } body.is-ar .ggpl-frame-label { left: auto; right: 18px; } .ggpl-frame-sq { width: 7px; height: 7px; background: var(--terracotta-700); display: inline-block; } .ggpl-frame-cap { font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; line-height: 1.5; color: var(--stone-600); text-align: center; max-width: 78%; margin: 0; } .ggpl-frame-tag { position: absolute; bottom: 16px; left: 18px; font: var(--text-label-sm); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--stone-400); } body.is-ar .ggpl-frame-tag { left: auto; right: 18px; } /* Frame with a real image */ .ggpl-frame-hasimg { border: 1px solid var(--border-subtle); background-image: none; padding: 0; } .ggpl-frame-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .ggpl-frame-hasimg .ggpl-frame-label { background: rgba(249,247,243,0.9); padding: 7px 12px; top: 12px; left: 12px; } body.is-ar .ggpl-frame-hasimg .ggpl-frame-label { left: auto; right: 12px; } .ggpl-frame-pending { position: absolute; bottom: 12px; right: 12px; z-index: 2; font: var(--text-label-sm); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: #fff; background: var(--terracotta-700); padding: 6px 12px; border-radius: var(--radius-pill,999px); box-shadow: 0 4px 12px rgba(38,36,32,0.28); } body.is-ar .ggpl-frame-pending { right: auto; left: 12px; } /* Footer */ .ggpl-footer { background: var(--palm-900); padding-top: 80px; padding-bottom: 32px; } .ggpl-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--border-inverse); } .ggpl-foot-h { font: var(--text-label-sm); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--palm-300); margin: 0 0 20px; } .ggpl-foot-link { font: var(--text-body-sm); color: var(--palm-100); text-decoration: none; transition: color var(--duration-base,250ms) ease; } .ggpl-foot-link:hover { color: var(--sand-50); } .ggpl-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 28px; font: var(--text-label-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--palm-300); } /* Sticky social icons — vertical bar on left */ .ggpl-sticky-socials { position: fixed; left: 20px; bottom: 20px; z-index: 55; display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; padding: 0; } .ggpl-sticky-social-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #fff; transition: color var(--duration-base,250ms) ease, transform var(--duration-base,250ms) ease; text-decoration: none; } .ggpl-sticky-social-link:hover { color: var(--terracotta-300); transform: scale(1.08); } body.is-ar .ggpl-sticky-socials { left: auto; right: 20px; } @media (max-width: 1180px) { .ggpl-sticky-socials { display: none; } } /* Sticky WhatsApp — round frosted-glass action */ .ggpl-sticky-wa { position: fixed; right: 20px; bottom: 20px; z-index: 55; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #7DA74B; color: #fff; text-decoration: none; box-shadow: 0 8px 24px rgba(38,36,32,0.24); opacity: 0.75; transition: background 250ms ease, transform 250ms ease, box-shadow 250ms ease, opacity 250ms ease; } .ggpl-sticky-wa:hover { background: #6B9040; transform: scale(1.06); opacity: 1; box-shadow: 0 12px 32px rgba(38,36,32,0.3); } .ggpl-wa-glyph { width: 30px; height: 30px; display: block; stroke-width: 1.1; } body.is-ar .ggpl-sticky-wa { right: auto; left: 20px; } /* Grids */ .ggpl-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 32px; } .ggpl-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; } .ggpl-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); } .hide-mobile { } .show-mobile { display: none; } /* Editorial FAQ */ .ggpl-faq { border-top: 1px solid var(--border-default); } .ggpl-marker + .ggpl-faq { border-top: none; } .ggpl-faq-row { border-bottom: 1px solid var(--border-default); } .ggpl-faq-q { width: 100%; display: grid; grid-template-columns: 32px 1fr auto; align-items: baseline; gap: 0 20px; background: none; border: none; cursor: pointer; text-align: left; padding: 26px 0; } body.is-ar .ggpl-faq-q { text-align: right; } .ggpl-faq-num { font-family: var(--font-display); font-style: italic; color: var(--terracotta-700); font-size: 0.95rem; } .ggpl-faq-qtext { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem,1.8vw,1.5rem); color: var(--palm-900); line-height: 1.3; } .ggpl-faq-sign { font-size: 1.4rem; color: var(--stone-400); line-height: 1; } .ggpl-faq-awrap { max-height: 0; overflow: hidden; transition: max-height 500ms cubic-bezier(0.16,1,0.3,1); } .ggpl-faq-row.is-open .ggpl-faq-awrap { max-height: 460px; } .ggpl-faq-a { padding: 0 0 30px 52px; font: var(--text-body-md); color: var(--text-secondary); max-width: 780px; } body.is-ar .ggpl-faq-a { padding: 0 52px 30px 0; } .ggpl-faq-light { border-top-color: var(--border-inverse); } .ggpl-faq-light .ggpl-faq-row { border-bottom-color: var(--border-inverse); } .ggpl-faq-light .ggpl-faq-qtext { color: var(--sand-50); } .ggpl-faq-light .ggpl-faq-num { color: var(--terracotta-300); } .ggpl-faq-light .ggpl-faq-a { color: var(--palm-100); } @media (max-width: 600px) { .ggpl-faq-a { padding-left: 0; } body.is-ar .ggpl-faq-a { padding-right: 0; } } @media (max-width: 1024px) { .ggpl-nav { gap: 22px; } } @media (max-width: 960px) { .hide-mobile { display: none !important; } .show-mobile { display: inline-flex !important; } .ggpl-burger { display: inline-flex; } .ggpl-nav { flex: none; } } @media (max-width: 900px) { .ggpl-container { padding-left: 28px; padding-right: 28px; } .ggpl-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } } @media (max-width: 720px) { .ggpl-footer-grid { grid-template-columns: 1fr; gap: 32px; } .ggpl-grid-2, .ggpl-grid-3, .ggpl-grid-4 { grid-template-columns: 1fr; } }