/* ============================================================ * Offres landing — fully self-contained. * Does NOT depend on core.css. The page is intentionally * isolated from the main site theme to optimize for conversion. * RTL is the default visual direction; LTR overrides apply when * is set. * ============================================================ */ :root { --c-ink: #0D1117; --c-ink-2: #1a2230; --c-teal: #04484E; --c-teal-mid: #066068; --c-teal-lt: #0d8a98; --c-gold: #F7C948; --c-gold-dk: #d4a820; --c-cream: #FFFCF5; --c-line: rgba(4,72,78,.10); --c-slate: #4A5568; --c-success: #04484E; --c-error: #dc2626; --c-wa: #25D366; --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-pill: 100px; --s-sm: 0 2px 8px rgba(13,17,23,.06); --s-md: 0 8px 24px rgba(13,17,23,.10); --s-lg: 0 20px 60px rgba(13,17,23,.18); --header-h: 64px; } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body.offers-page { font-family: 'Instrument Sans', system-ui, -apple-system, "Segoe UI", sans-serif; background: #fff; color: var(--c-ink); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Lock horizontal scroll — prevents the page being swiped sideways even if a decorative element overflows */ overflow-x: hidden; } html { overflow-x: hidden; } body.lang-ar { font-family: 'Cairo', 'Tajawal', system-ui, sans-serif; font-weight: 400; } body.lang-ar h1, body.lang-ar h2, body.lang-ar h3, body.lang-ar h4 { font-family: 'Cairo', 'Tajawal', sans-serif; font-weight: 800; line-height: 1.3; } body.lang-fr h1, body.lang-fr h2, body.lang-fr h3, body.lang-fr h4 { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; line-height: 1.1; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; border-radius: 4px; } [hidden] { display: none !important; } .op-container { max-width: 1180px; margin-inline: auto; padding-inline: 22px; } /* ── HEADER ─────────────────────────────────────────── */ .op-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-block-end: 1px solid var(--c-line); } .op-header-inner { max-width: 1180px; margin-inline: auto; padding: 12px 22px; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .op-logo { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 900; font-size: 22px; letter-spacing: -.03em; color: var(--c-teal); } .op-logo span { color: var(--c-gold); } .op-header-actions { display: flex; gap: 8px; align-items: center; } .op-wa-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--c-wa); color: #fff; font-weight: 700; font-size: 14px; transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 14px rgba(37,211,102,.35); } .op-wa-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(37,211,102,.5); } .op-wa-btn i { font-size: 18px; } .op-lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--r-pill); background: rgba(4,72,78,.08); color: var(--c-teal); font-weight: 700; font-size: 13px; transition: background .2s; } .op-lang-btn:hover { background: rgba(4,72,78,.14); } /* Hide WA phone number on small screens (icon only) */ @media (max-width: 560px) { .op-wa-btn span { display: none; } .op-wa-btn { padding: 10px 12px; } } /* ── HERO ───────────────────────────────────────────── */ .op-hero { position: relative; overflow: hidden; background: var(--c-ink); color: #fff; padding-block: 56px 56px; text-align: center; } .op-hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 80% at 50% 30%, rgba(4,72,78,.55) 0%, transparent 65%), radial-gradient(ellipse 50% 60% at 80% 80%, rgba(247,201,72,.10) 0%, transparent 60%); } .op-hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; /* Static — no animated movement. Decorative only. */ } .orb-a { width: 480px; height: 480px; background: rgba(4,72,78,.35); top: -120px; inset-inline-end: -120px; } .orb-b { width: 280px; height: 280px; background: rgba(247,201,72,.10); bottom: -60px; inset-inline-start: 5%; } .op-hero-content { position: relative; z-index: 2; /* Center everything inside the hero so timer + CTA stack cleanly */ display: flex; flex-direction: column; align-items: center; text-align: center; } .op-urgency { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: var(--r-pill); background: linear-gradient(135deg, rgba(220,38,38,.18), rgba(247,201,72,.18)); border: 1px solid rgba(247,201,72,.4); color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 26px; } .op-pulse { width: 9px; height: 9px; border-radius: 50%; background: #f87171; box-shadow: 0 0 0 0 rgba(248,113,113,.7); animation: opPulse 1.6s infinite; flex-shrink: 0; } @keyframes opPulse { 0% { box-shadow: 0 0 0 0 rgba(248,113,113,.7); } 70% { box-shadow: 0 0 0 12px rgba(248,113,113,0); } 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); } } .op-hero-title { font-size: clamp(34px, 6.5vw, 64px); font-weight: 900; margin-bottom: 16px; max-width: 900px; margin-inline: auto; } .op-gold { background: linear-gradient(135deg, var(--c-gold), #f0a030); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .op-hero-sub { font-size: clamp(16px, 2.2vw, 19px); color: rgba(255,255,255,.82); max-width: 620px; margin: 0 auto 36px; line-height: 1.7; } /* Big visible countdown — sits on its own row, centered */ .op-countdown { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 28px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin: 6px auto 28px; /* Numbers should always read LTR even in RTL pages */ direction: ltr; } .op-cd-cell { display: flex; flex-direction: column; align-items: center; min-width: 64px; } .op-cd-num { font-family: 'Bricolage Grotesque', monospace; font-size: clamp(28px, 5vw, 42px); font-weight: 900; color: var(--c-gold); font-variant-numeric: tabular-nums; line-height: 1; } .op-cd-lbl { margin-top: 6px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .12em; } .op-cd-sep { font-size: clamp(28px, 5vw, 42px); font-weight: 900; color: rgba(255,255,255,.25); line-height: 1; padding-bottom: 18px; } .op-countdown.is-expired .op-cd-num { color: rgba(255,255,255,.35); } .op-hero-cta { display: inline-flex; align-items: center; gap: 12px; padding: 18px 36px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--c-gold), var(--c-gold-dk)); color: var(--c-ink); font-size: 17px; font-weight: 800; box-shadow: 0 12px 36px rgba(247,201,72,.45); transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; /* Sits on its own row, directly below the countdown */ margin-top: 4px; align-self: center; } .op-hero-cta:hover { transform: translateY(-3px); box-shadow: 0 18px 48px rgba(247,201,72,.6); } .op-hero-cta:active { transform: scale(.97); } [dir="rtl"] .op-hero-cta i { transform: scaleX(-1); } /* ── TRUST STRIP ───────────────────────────────────── */ .op-trust-strip { background: var(--c-cream); border-block-end: 1px solid var(--c-line); padding-block: 28px; } .op-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; } .op-trust-item { padding: 6px; border-inline-end: 1px solid var(--c-line); } .op-trust-item:last-child { border-inline-end: none; } .op-trust-num { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(24px, 4vw, 34px); font-weight: 900; color: var(--c-teal); line-height: 1; font-variant-numeric: tabular-nums; } .op-trust-lbl { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--c-slate); } @media (max-width: 720px) { .op-trust-grid { grid-template-columns: 1fr 1fr; gap: 18px 8px; } .op-trust-item { border: none; border-block-end: 1px solid var(--c-line); padding-block: 12px; } .op-trust-item:nth-last-child(-n+2) { border-block-end: none; } } /* ── SECTION HEADERS ───────────────────────────────── */ .op-section-head { text-align: center; max-width: 720px; margin: 0 auto 44px; } .op-section-label { display: inline-block; font-size: 12px; font-weight: 700; color: var(--c-teal); text-transform: uppercase; letter-spacing: .14em; padding: 6px 14px; border-radius: var(--r-pill); background: rgba(4,72,78,.08); margin-bottom: 14px; } .op-section-title { font-size: clamp(26px, 4vw, 40px); color: var(--c-ink); margin-bottom: 14px; } .op-section-sub { font-size: 16px; color: var(--c-slate); line-height: 1.7; } /* ── PACKS ─────────────────────────────────────────── */ .op-packs { padding-block: 80px; background: linear-gradient(180deg, #fff 0%, var(--c-cream) 100%); } .op-packs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; } .op-pack { position: relative; display: flex; flex-direction: column; background: #fff; border: 2px solid var(--c-line); border-radius: var(--r-lg); padding: 36px 26px 28px; transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, border-color .25s; box-shadow: var(--s-sm); } .op-pack:hover { transform: translateY(-8px); box-shadow: var(--s-lg); border-color: rgba(4,72,78,.25); } .op-pack--hot { border-color: var(--c-gold); background: linear-gradient(180deg, #fff 0%, #fffaeb 100%); transform: scale(1.04); box-shadow: 0 24px 60px rgba(247,201,72,.22); z-index: 2; } .op-pack--hot:hover { transform: scale(1.04) translateY(-8px); } .op-pack-ribbon { position: absolute; top: -16px; inset-inline-start: 50%; transform: translateX(-50%); padding: 7px 18px; border-radius: var(--r-pill); background: linear-gradient(135deg, #ef4444, #f97316); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .04em; white-space: nowrap; box-shadow: 0 8px 20px rgba(239,68,68,.45); display: inline-flex; align-items: center; gap: 6px; } .op-pack-icon-wrap { width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: rgba(4,72,78,.08); color: var(--c-teal); font-size: 26px; margin-inline: auto; margin-bottom: 18px; } .op-pack--hot .op-pack-icon-wrap { background: rgba(247,201,72,.20); color: var(--c-gold-dk); } .op-pack-name { text-align: center; font-size: 24px; color: var(--c-ink); margin-bottom: 4px; } .op-pack-sub { text-align: center; font-size: 14px; color: var(--c-slate); margin-bottom: 22px; } .op-pack-price { text-align: center; padding-block: 18px; border-block: 1px dashed var(--c-line); margin-bottom: 22px; } .op-pack-from { display: block; font-size: 11px; color: var(--c-slate); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 4px; } .op-pack-amount { display: inline-flex; align-items: baseline; gap: 6px; direction: ltr; } .op-pack-value { font-family: 'Bricolage Grotesque', sans-serif; font-size: 46px; font-weight: 900; color: var(--c-teal); line-height: 1; font-variant-numeric: tabular-nums; } /* Pro pack price: was gold-dark on cream (2.14:1 — failed WCAG AA). Now uses teal for 10:1 contrast. The card stays visually distinct via its gold border, ribbon, and gold icon background. */ .op-pack--hot .op-pack-value { color: var(--c-teal); } .op-pack-currency { font-size: 16px; font-weight: 700; color: var(--c-slate); } .op-pack-who { background: rgba(4,72,78,.04); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 22px; font-size: 13px; line-height: 1.55; } .op-pack-who-lbl { font-weight: 800; color: var(--c-teal); margin-inline-end: 4px; } .op-pack-who-text { color: var(--c-slate); } .op-pack-features { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 11px; flex: 1; } .op-pack-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--c-ink); } .op-pack-features li i { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(4,72,78,.08); color: var(--c-teal); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; margin-top: 3px; } .op-pack--hot .op-pack-features li i { background: rgba(247,201,72,.20); color: var(--c-gold-dk); } .op-pack-cta { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 24px; background: var(--c-ink); color: #fff; border: none; border-radius: 12px; font-weight: 800; font-size: 15px; transition: background .2s, transform .2s, box-shadow .2s; width: 100%; } .op-pack-cta:hover { background: var(--c-teal); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(4,72,78,.3); } .op-pack--hot .op-pack-cta { background: linear-gradient(135deg, var(--c-gold), var(--c-gold-dk)); color: var(--c-ink); box-shadow: 0 8px 24px rgba(247,201,72,.4); } .op-pack--hot .op-pack-cta:hover { box-shadow: 0 14px 36px rgba(247,201,72,.6); background: linear-gradient(135deg, var(--c-gold), var(--c-gold-dk)); } [dir="rtl"] .op-pack-cta i { transform: scaleX(-1); } /* ── TESTIMONIALS ─────────────────────────────────── */ .op-testimonials { padding-block: 80px; background: #fff; } .op-tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .op-tst-card { background: var(--c-cream); border: 1px solid var(--c-line); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 16px; transition: transform .25s, box-shadow .25s; } .op-tst-card:hover { transform: translateY(-4px); box-shadow: var(--s-md); } .op-tst-stars { color: var(--c-gold); font-size: 14px; letter-spacing: 2px; } .op-tst-quote { font-size: 15px; line-height: 1.7; color: var(--c-ink); font-style: italic; flex: 1; } .op-tst-meta { display: flex; align-items: center; gap: 12px; } .op-tst-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--c-teal), var(--c-teal-mid)); color: #fff; font-weight: 900; font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .op-tst-name { font-weight: 800; font-size: 14px; color: var(--c-ink); } .op-tst-role { font-size: 12px; color: var(--c-slate); } /* ── FORM SECTION ─────────────────────────────────── */ .op-form-section { padding-block: 80px; background: var(--c-cream); } .op-form-shell { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; max-width: 980px; margin-inline: auto; position: relative; } .op-form { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 36px; box-shadow: var(--s-md); position: relative; } .op-selected-pack { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(135deg, rgba(247,201,72,.12), rgba(247,201,72,.04)); border: 1.5px dashed var(--c-gold); border-radius: var(--r); padding: 16px 20px; margin-bottom: 24px; } .op-selected-pack-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .op-selected-pack-lbl { font-size: 11px; font-weight: 700; color: var(--c-slate); text-transform: uppercase; letter-spacing: .1em; } .op-selected-pack-name { font-size: 18px; font-weight: 800; color: var(--c-teal); } .op-selected-pack-price { font-size: 13px; color: var(--c-slate); font-weight: 600; } .op-selected-pack-change { background: transparent; border: 1.5px solid var(--c-teal); color: var(--c-teal); padding: 8px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; transition: background .2s, color .2s; flex-shrink: 0; } .op-selected-pack-change:hover { background: var(--c-teal); color: #fff; } .op-pack-radios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; } .op-pack-radio { position: relative; cursor: pointer; } .op-pack-radio input { position: absolute; opacity: 0; pointer-events: none; } .op-pack-radio-card { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 16px 10px; border: 2px solid var(--c-line); border-radius: 12px; background: #fff; text-align: center; transition: all .2s; } .op-pack-radio:hover .op-pack-radio-card { border-color: var(--c-teal); background: rgba(4,72,78,.03); } .op-pack-radio input:checked + .op-pack-radio-card { border-color: var(--c-gold); background: linear-gradient(180deg, rgba(247,201,72,.10), rgba(247,201,72,.02)); box-shadow: 0 0 0 4px rgba(247,201,72,.18); } .op-pack-radio-name { font-weight: 800; font-size: 14px; color: var(--c-ink); } .op-pack-radio-price { font-size: 12px; color: var(--c-slate); font-weight: 600; } /* Big inputs */ .op-field { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; } .op-field label { font-weight: 700; font-size: 14px; color: var(--c-teal); } .op-req { color: var(--c-error); font-weight: 700; } .op-input { width: 100%; padding: 16px 18px; font-size: 16px; font-family: inherit; background: #fff; border: 2px solid var(--c-line); border-radius: 12px; transition: border-color .2s, box-shadow .2s; color: var(--c-ink); } .op-input::placeholder { color: rgba(74,85,104,.55); } .op-input:focus { outline: none; border-color: var(--c-teal); box-shadow: 0 0 0 4px rgba(4,72,78,.10); } textarea.op-input { resize: vertical; min-height: 100px; line-height: 1.55; } select.op-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2304484E' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 18px) center; padding-inline-end: 44px; } [dir="rtl"] select.op-input { background-position: 18px center; } .op-details { margin-bottom: 20px; border: 1.5px dashed var(--c-line); border-radius: 12px; overflow: hidden; } .op-details-toggle { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-size: 14px; font-weight: 700; color: var(--c-teal); cursor: pointer; list-style: none; user-select: none; background: rgba(4,72,78,.03); } .op-details-toggle::-webkit-details-marker { display: none; } .op-details-toggle i { transition: transform .25s; } .op-details[open] .op-details-toggle i { transform: rotate(45deg); } .op-details-body { padding: 20px 18px 8px; } .op-submit { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 18px 24px; background: linear-gradient(135deg, var(--c-teal), var(--c-teal-mid)); color: #fff; border: none; border-radius: 14px; font-size: 17px; font-weight: 800; box-shadow: 0 12px 28px rgba(4,72,78,.4); transition: transform .2s, box-shadow .2s, opacity .15s; margin-top: 10px; } .op-submit:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(4,72,78,.55); } .op-submit:active { transform: scale(.98); } .op-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; } .op-loading { text-align: center; padding-block: 14px; color: var(--c-teal); font-weight: 600; } .op-message { margin-top: 14px; padding: 14px 18px; border-radius: 12px; font-weight: 600; } .op-message.success { background: rgba(4,72,78,.08); border: 1px solid rgba(4,72,78,.2); color: var(--c-teal); } .op-message.error { background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.25); color: var(--c-error); } .op-message i { margin-inline-end: 8px; } .op-fineprint { margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--c-slate); text-align: center; } /* Side cards */ .op-form-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--header-h) + 16px); } .op-side-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); padding: 20px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; box-shadow: var(--s-sm); } .op-side-icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(37,211,102,.12); color: var(--c-wa); font-size: 22px; } .op-side-guarantee .op-side-icon { background: rgba(4,72,78,.08); color: var(--c-teal); } .op-side-text { display: flex; flex-direction: column; gap: 4px; } .op-side-text strong { font-weight: 800; color: var(--c-ink); font-size: 15px; } .op-side-text span { font-size: 13px; color: var(--c-slate); line-height: 1.55; } .op-side-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 16px; background: var(--c-wa); color: #fff; border-radius: var(--r-pill); font-weight: 700; font-size: 14px; transition: transform .2s, box-shadow .2s; } .op-side-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,211,102,.45); } /* ── THANK YOU ─────────────────────────────────────── */ .op-thanks { grid-column: 1 / -1; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 50px 30px; text-align: center; box-shadow: var(--s-md); animation: opFadeIn .5s ease both; } @keyframes opFadeIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } } .op-thanks-emoji { font-size: 72px; line-height: 1; animation: opPop .5s cubic-bezier(.34,1.56,.64,1); margin-bottom: 12px; } @keyframes opPop { from { transform:scale(0); } to { transform:scale(1); } } .op-thanks h2 { font-size: clamp(28px, 5vw, 38px); color: var(--c-teal); margin-bottom: 14px; } .op-thanks-check { font-size: 18px; font-weight: 700; color: var(--c-ink); margin-bottom: 14px; } .op-thanks-body { font-size: 16px; color: var(--c-slate); line-height: 1.7; max-width: 480px; margin: 0 auto 28px; } .op-thanks-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .op-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: var(--r-pill); font-weight: 800; font-size: 15px; transition: transform .2s, box-shadow .2s; } .op-btn-wa { background: var(--c-wa); color: #fff; box-shadow: 0 8px 22px rgba(37,211,102,.4); } .op-btn-wa:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37,211,102,.55); } .op-btn-ghost { background: transparent; border: 2px solid var(--c-teal); color: var(--c-teal); } .op-btn-ghost:hover { background: var(--c-teal); color: #fff; } /* ── FAQ ───────────────────────────────────────────── */ .op-faq { padding-block: 80px; background: #fff; } .op-faq-list { max-width: 760px; margin-inline: auto; } .op-faq-item { background: var(--c-cream); border: 1px solid var(--c-line); border-radius: var(--r); margin-bottom: 12px; overflow: hidden; transition: box-shadow .2s; } .op-faq-item[open] { box-shadow: var(--s-sm); } .op-faq-q { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer; font-weight: 700; color: var(--c-ink); font-size: 16px; list-style: none; user-select: none; } .op-faq-q::-webkit-details-marker { display: none; } .op-faq-q i { width: 32px; height: 32px; border-radius: 50%; background: rgba(4,72,78,.06); color: var(--c-teal); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; transition: transform .25s, background .2s; flex-shrink: 0; } .op-faq-item[open] .op-faq-q i { transform: rotate(45deg); background: var(--c-gold); color: var(--c-ink); } .op-faq-a { padding: 0 22px 20px; color: var(--c-slate); font-size: 14px; line-height: 1.75; } /* ── FOOTER ────────────────────────────────────────── */ .op-footer { background: var(--c-ink); color: rgba(255,255,255,.6); padding-block: 28px 100px; /* extra bottom for sticky CTA */ } .op-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .op-footer-brand { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 900; font-size: 20px; color: #fff; } .op-footer-brand span { color: var(--c-gold); } .op-footer-copy { font-size: 12px; margin-top: 4px; color: rgba(255,255,255,.5); } .op-footer-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .op-footer-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.7); font-weight: 600; transition: color .15s; } .op-footer-link:hover { color: var(--c-gold); } /* ── STICKY MOBILE CTA ─────────────────────────────── */ .op-sticky-cta { position: fixed; bottom: 16px; inset-inline-start: 16px; inset-inline-end: 16px; z-index: 60; display: none; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; background: linear-gradient(135deg, var(--c-gold), var(--c-gold-dk)); color: var(--c-ink); border-radius: var(--r-pill); font-weight: 800; font-size: 15px; box-shadow: 0 12px 32px rgba(247,201,72,.5); } @media (max-width: 720px) { .op-sticky-cta { display: inline-flex; } .op-footer { padding-bottom: 100px; } } /* ═══════════════════════════════════════════════════════════ LANGUAGE PICKER MODAL — shown only on first visit ═══════════════════════════════════════════════════════════ */ .op-lang-picker { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(135deg, rgba(4,36,40,.85) 0%, rgba(7,55,60,.85) 100%); backdrop-filter: blur(10px); animation: opFadeIn .35s ease-out; } @keyframes opFadeIn { from { opacity: 0; } to { opacity: 1; } } .op-lang-picker-card { background: #fff; width: min(540px, 100%); border-radius: 24px; padding: 40px 36px 32px; box-shadow: 0 30px 80px rgba(0,0,0,.4); text-align: center; animation: opSlideUp .4s cubic-bezier(.2,.7,.2,1); } @keyframes opSlideUp { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .op-lang-picker-logo { font-family: 'Bricolage Grotesque', 'Cairo', sans-serif; font-weight: 900; font-size: 28px; color: var(--c-ink, #04484E); letter-spacing: -.025em; margin-bottom: 24px; } .op-lang-picker-logo span { color: var(--c-gold, #F7C948); } .op-lang-picker-title { font-family: 'Bricolage Grotesque', 'Cairo', sans-serif; font-size: clamp(22px, 3vw, 28px); font-weight: 800; color: var(--c-ink, #04484E); margin: 0 0 6px; letter-spacing: -.02em; } .op-lang-picker-sub { font-size: 14px; color: rgba(4,72,78,.65); margin: 0 0 28px; } .op-lang-picker-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } .op-lang-pick { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: #fff; border: 2px solid rgba(4,72,78,.12); border-radius: 16px; text-decoration: none; color: var(--c-ink, #04484E); transition: border-color .2s, transform .2s, background .2s, box-shadow .2s; cursor: pointer; } .op-lang-pick:hover, .op-lang-pick:focus-visible { border-color: var(--c-gold, #F7C948); background: rgba(247,201,72,.06); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(4,72,78,.12); outline: none; } .op-lang-flag { font-size: 32px; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.1)); } .op-lang-pick-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; } .op-lang-name { font-family: 'Bricolage Grotesque', 'Cairo', sans-serif; font-size: 18px; font-weight: 800; } .op-lang-en { font-size: 12px; color: rgba(4,72,78,.55); text-transform: uppercase; letter-spacing: .08em; } .op-lang-pick > i { color: rgba(4,72,78,.35); font-size: 14px; transition: color .2s, transform .2s; } .op-lang-pick:hover > i { color: var(--c-gold, #F7C948); transform: translateX(4px); } .op-lang-pick[dir="rtl"]:hover > i { transform: translateX(-4px); } .op-lang-picker-foot { font-size: 12px; color: rgba(4,72,78,.55); margin: 0; display: inline-flex; align-items: center; gap: 6px; justify-content: center; } .op-lang-picker-foot i { color: var(--c-gold, #F7C948); } /* Lock scroll while modal open */ body:has(.op-lang-picker) { overflow: hidden; } /* ═══════════════════════════════════════════════════════════ HOW IT WORKS — 4-step process ═══════════════════════════════════════════════════════════ */ .op-how { padding: 70px 0 50px; background: #fff; } .op-how-grid { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; } .op-how-step { background: #fff; border: 1.5px solid rgba(4,72,78,.1); border-radius: 18px; padding: 24px 22px; position: relative; transition: transform .25s cubic-bezier(.34,1.56,.64,1), border-color .25s, box-shadow .25s; } .op-how-step:hover { transform: translateY(-6px); border-color: rgba(247,201,72,.5); box-shadow: 0 18px 40px rgba(4,72,78,.12); } .op-how-step-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .op-how-step-num { font-family: 'Bricolage Grotesque', 'Cairo', sans-serif; font-size: 42px; font-weight: 900; line-height: 1; background: linear-gradient(135deg, var(--c-gold, #F7C948), #d99c1e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; letter-spacing: -.04em; } .op-how-step-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(4,72,78,.08); color: var(--c-teal, #04484E); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; } .op-how-step-title { font-family: 'Bricolage Grotesque', 'Cairo', sans-serif; font-size: 18px; font-weight: 800; color: var(--c-ink, #04484E); margin: 0 0 8px; letter-spacing: -.015em; } .op-how-step-desc { font-size: 14px; line-height: 1.65; color: rgba(4,72,78,.7); margin: 0; } @media (max-width: 980px) { .op-how-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .op-how-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════ PACK FEATURE ICONS — branded + generic ═══════════════════════════════════════════════════════════ */ .op-pack-feature-icon { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px; background: rgba(4,72,78,.06); color: var(--c-teal, #04484E); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: background .2s, color .2s; } .op-pack-feature-text { flex: 1; font-size: 14px; line-height: 1.5; } /* Override the old default check icon — let real icons shine */ .op-pack-features li { display: flex !important; align-items: flex-start; gap: 12px; padding: 6px 0; } .op-pack-features li > .op-pack-feature-icon i { color: inherit; } /* Brand-specific tinting for recognizable services */ .op-pack-feature-icon:has(.fa-google) { background: rgba(66,133,244,.1); color: #4285F4; } .op-pack-feature-icon:has(.fa-whatsapp) { background: rgba(37,211,102,.12); color: #25D366; } .op-pack-feature-icon:has(.fa-instagram) { background: linear-gradient(135deg, rgba(225,48,108,.12), rgba(247,154,55,.12)); color: #E4405F; } .op-pack-feature-icon:has(.fa-facebook) { background: rgba(24,119,242,.1); color: #1877F2; } .op-pack-feature-icon:has(.fa-meta) { background: rgba(0,99,235,.1); color: #0063EB; } .op-pack-feature-icon:has(.fa-crown) { background: rgba(247,201,72,.15); color: #b8860b; } /* Inside the highlighted pack, lift contrast slightly */ .op-pack--hot .op-pack-feature-icon { background: rgba(247,201,72,.14); } /* ── FLOATING WHATSAPP BUTTON (same pattern as the rest of the site) ── */ .op-wa-float { position: fixed; bottom: 22px; inset-inline-end: 18px; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(37,211,102,.5); border: 3px solid rgba(255,255,255,.4); z-index: 70; text-decoration: none; transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; } .op-wa-float:hover { transform: scale(1.1); box-shadow: 0 10px 32px rgba(37,211,102,.65); } /* Push above the mobile sticky CTA on small screens */ @media (max-width: 720px) { .op-wa-float { bottom: 92px; } } /* ── RESPONSIVE ────────────────────────────────────── */ @media (max-width: 980px) { /* Pack grid stacks; cheapest → most expensive ON ALL screen sizes (no reorder) */ .op-packs-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; gap: 18px; } .op-pack--hot { transform: none; } .op-pack--hot:hover { transform: translateY(-8px); } .op-tst-grid { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; } .op-form-shell { grid-template-columns: 1fr; } .op-form-side { position: static; flex-direction: row; flex-wrap: wrap; } .op-form-side .op-side-card { flex: 1 1 240px; } } @media (max-width: 640px) { .op-form { padding: 26px 20px; } .op-pack-radios { grid-template-columns: 1fr; } .op-pack { padding: 28px 20px 22px; } .op-countdown { gap: 4px; padding: 14px 16px; } .op-cd-cell { min-width: 50px; } .op-cd-sep { padding-bottom: 14px; } .op-hero { padding-block: 36px 48px; } .op-hero-cta { padding: 16px 28px; font-size: 15px; } .op-thanks { padding: 36px 20px; } } /* Honeypot input — visually & semantically hidden but still submitted */ .honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; overflow: hidden; pointer-events: none; } /* ── Expandable pack details (FAQ-style) ──────────────────── */ .op-pack-toggle { margin: 0 0 22px; border-block: 1px solid var(--c-line); width: 100%; } .op-pack-toggle-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; cursor: pointer; font-weight: 700; color: var(--c-teal); font-size: 14px; list-style: none; /* hide default disclosure triangle */ user-select: none; min-height: 48px; /* comfortable touch target */ } .op-pack-toggle-summary::-webkit-details-marker { display: none; } .op-pack-toggle-summary::marker { display: none; content: ''; } .op-pack-toggle-summary:hover { color: var(--c-ink); } .op-pack-toggle-summary:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; border-radius: 6px; } .op-pack-toggle-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(4,72,78,.08); color: var(--c-teal); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; transition: transform .25s cubic-bezier(.4,0,.2,1), background .2s, color .2s; } .op-pack-toggle[open] .op-pack-toggle-icon { transform: rotate(45deg); background: var(--c-gold); color: var(--c-ink); } .op-pack--hot .op-pack-toggle-icon { background: rgba(247,201,72,.18); color: var(--c-gold-dk); } .op-pack--hot .op-pack-toggle[open] .op-pack-toggle-icon { background: var(--c-gold); color: var(--c-ink); } .op-pack-toggle-body { padding: 4px 0 16px; } /* — Reset margin on the elements that lived outside the toggle before — */ .op-pack-toggle-body .op-pack-who { margin-bottom: 18px; } .op-pack-toggle-body .op-pack-features { margin-bottom: 0; } /* Push CTA to the bottom regardless of whether details are open */ .op-pack { justify-content: flex-start; } .op-pack-cta { margin-top: auto; } /* — Subtle expand animation (modern browsers) — * max-height must comfortably exceed the tallest pack's content, * including 15+ feature rows on the Premium plan. 2400px gives * generous headroom without affecting animation feel. */ @supports (transition-behavior: allow-discrete) { .op-pack-toggle-body { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .4s ease, opacity .25s ease, padding .25s ease, content-visibility .4s allow-discrete; } .op-pack-toggle[open] .op-pack-toggle-body { max-height: 2400px; opacity: 1; } } /* ── Honor user preference for reduced motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Skip-to-content link — accessibility (a11y) */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--c-ink); color: #fff; padding: 10px 18px; z-index: 9999; font-weight: 700; font-size: 14px; border-radius: 0 0 8px 0; transition: top .15s; text-decoration: none; } .skip-link:focus { top: 0; }