. Components consume CSS variables (--primary, --accent, --bg-tint) so the entire page recolors instantly when variant class is swapped. ========================================================================== */ /* -------------------------------------------------------------------------- VARIANT TOKENS -------------------------------------------------------------------------- */ /* Variant A — Blue / Cyan (master pages: hub, disque-dur, urgence-light) */ .recovery-variant-a { --primary: #1d6dff; --primary-dark: #1d4ed8; --accent: #00bcd4; --bg-tint: #f8f9ff; --text-strong: #0f2544; --text-soft: #4b5563; --card-bg: #ffffff; --border-soft: #e0e7ff; } /* Variant B — Green / Emerald (Rive-Sud + Rive-Nord cities) */ .recovery-variant-b { --primary: #059669; --primary-dark: #047857; --accent: #10b981; --bg-tint: #ecfdf5; --text-strong: #064e3b; --text-soft: #4b5563; --card-bg: #ffffff; --border-soft: #d1fae5; } /* Variant C — Purple / Indigo (Ouest-Île + Montréal quartiers) */ .recovery-variant-c { --primary: #7c3aed; --primary-dark: #5b21b6; --accent: #a78bfa; --bg-tint: #f5f3ff; --text-strong: #1e1b4b; --text-soft: #4b5563; --card-bg: #ffffff; --border-soft: #ddd6fe; } /* Variant D — Orange / Amber (EN hub + EN service pages) */ .recovery-variant-d { --primary: #ea580c; --primary-dark: #c2410c; --accent: #fb923c; --bg-tint: #fff7ed; --text-strong: #7c2d12; --text-soft: #4b5563; --card-bg: #ffffff; --border-soft: #fed7aa; } /* Variant E — Teal / Slate (EN geo Canada) */ .recovery-variant-e { --primary: #0d9488; --primary-dark: #0f766e; --accent: #14b8a6; --bg-tint: #f0fdfa; --text-strong: #134e4a; --text-soft: #4b5563; --card-bg: #ffffff; --border-soft: #99f6e4; } /* Variant F — Red / Rose (urgence + ransomware pages) */ .recovery-variant-f { --primary: #dc2626; --primary-dark: #991b1b; --accent: #f87171; --bg-tint: #fef2f2; --text-strong: #7f1d1d; --text-soft: #4b5563; --card-bg: #ffffff; --border-soft: #fecaca; } /* Variant G — Dark mode (RAID / NAS / Mac service pack) */ .recovery-variant-g { --primary: #1d6dff; --primary-dark: #1d4ed8; --accent: #38bdf8; --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tint: #1e293b; --text-strong: #f1f5f9; --text-soft: #cbd5e1; --card-bg: #1e293b; --border-soft: #334155; } .recovery-variant-g { background: var(--bg-primary); color: var(--text-soft); } /* -------------------------------------------------------------------------- HERO DUAL-CARD PRICING ($49 standard / $99 express) -------------------------------------------------------------------------- */ .hero-pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 560px; margin: 24px 0 12px; } .price-card { position: relative; background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; padding: 22px 18px 20px; text-align: center; color: #fff; transition: transform 0.25s ease, box-shadow 0.25s ease; } .price-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); } .price-card--popular { background: rgba(255, 255, 255, 0.04); border: 2px solid var(--accent, #60a5fa); box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.12); } .popular-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--primary, #1d6dff), var(--primary-dark, #1d4ed8)); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.8px; padding: 5px 14px; border-radius: 999px; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 12px rgba(29, 109, 255, 0.35); } .price-card .price-amount { font-size: 2.4rem; font-weight: 900; line-height: 1; margin-bottom: 4px; background: linear-gradient(135deg, #fff, #cbd5e1); -webkit-background-clip: text; background-clip: text; color: transparent; } .price-card .price-duration { font-size: 0.82rem; font-weight: 600; color: #94a3b8; margin-bottom: 8px; } .price-card .price-label { font-size: 0.95rem; font-weight: 700; color: #e2e8f0; margin-bottom: 14px; } .price-card .price-cta { display: inline-block; background: linear-gradient(135deg, var(--primary, #1d6dff), var(--primary-dark, #1d4ed8)); color: #fff; border: 0; font-weight: 700; font-size: 0.92rem; padding: 10px 22px; border-radius: 10px; text-decoration: none; cursor: pointer; transition: transform 0.2s ease; } .price-card .price-cta:hover { transform: scale(1.04); } .hero-rating-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.92); color: #0f172a; font-weight: 600; font-size: 0.85rem; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .hero-rating-badge .stars { color: #f59e0b; letter-spacing: 1px; } @media (max-width: 640px) { .hero-pricing-cards { grid-template-columns: 1fr; max-width: 100%; } } /* -------------------------------------------------------------------------- TL;DR BLOCK (AEO — top-of-page direct answer, speakable) -------------------------------------------------------------------------- */ .tldr-block { background: var(--bg-tint, #f8f9ff); border-left: 5px solid var(--primary, #1d6dff); border-radius: 0 14px 14px 0; padding: 22px 26px; margin: 28px auto; max-width: 920px; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04); } .tldr-block .tldr-inner { display: flex; flex-direction: column; gap: 10px; } .tldr-block .tldr-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--primary, #1d6dff); width: fit-content; } .tldr-block .tldr-text { font-size: 1.02rem; line-height: 1.65; color: var(--text-strong, #0f2544); margin: 0; font-weight: 500; } .tldr-block .tldr-text strong { color: var(--primary-dark, #1d4ed8); font-weight: 700; } /* Variant F (red urgency) TL;DR override */ .recovery-variant-f .tldr-block { background: #fef2f2; border-left-color: #dc2626; } .recovery-variant-f .tldr-block .tldr-label { color: #dc2626; } .recovery-variant-f .tldr-block .tldr-text strong { color: #991b1b; } /* -------------------------------------------------------------------------- 4-TIER PRICING GRID (Diagnostic / Logicielle / Mécanique / Complexe) -------------------------------------------------------------------------- */ .recovery-pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 30px 0; } .recovery-pricing-grid .recovery-tier { position: relative; background: var(--card-bg, #ffffff); border: 2px solid var(--border-soft, #e5e7eb); border-radius: 16px; padding: 26px 20px 22px; text-align: center; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .recovery-pricing-grid .recovery-tier:hover { transform: translateY(-6px); border-color: var(--primary, #1d6dff); box-shadow: 0 12px 30px rgba(29, 109, 255, 0.12); } .recovery-pricing-grid .recovery-tier--popular { border-color: var(--primary, #1d6dff); background: linear-gradient(180deg, var(--bg-tint, #f8f9ff) 0%, #ffffff 100%); transform: scale(1.02); } .recovery-pricing-grid .recovery-tier .tier-icon { font-size: 2rem; color: var(--primary, #1d6dff); margin-bottom: 10px; } .recovery-pricing-grid .recovery-tier h3 { font-size: 1.05rem; color: var(--text-strong, #0f2544); margin: 0 0 10px; font-weight: 800; } .recovery-pricing-grid .recovery-tier .tier-price { font-size: 2rem; font-weight: 900; color: var(--primary, #1d6dff); line-height: 1; margin-bottom: 4px; } .recovery-pricing-grid .recovery-tier .tier-price sup { font-size: 0.85rem; font-weight: 700; color: var(--text-soft); margin-left: 4px; } .recovery-pricing-grid .recovery-tier .tier-desc { font-size: 0.88rem; color: var(--text-soft, #4b5563); line-height: 1.55; margin-top: 12px; } .recovery-pricing-grid .recovery-tier .tier-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--primary, #1d6dff), var(--primary-dark, #1d4ed8)); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; white-space: nowrap; } @media (max-width: 960px) { .recovery-pricing-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .recovery-pricing-grid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- PROCESS STEPS (5-step HowTo visual) -------------------------------------------------------------------------- */ .recovery-process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 30px 0; counter-reset: step; } .recovery-process-steps .step { background: var(--card-bg, #fff); border: 1px solid var(--border-soft, #e5e7eb); border-radius: 14px; padding: 24px 20px 20px; position: relative; counter-increment: step; transition: transform 0.2s ease, box-shadow 0.2s ease; } .recovery-process-steps .step::before { content: counter(step); position: absolute; top: -16px; left: 20px; width: 36px; height: 36px; background: linear-gradient(135deg, var(--primary, #1d6dff), var(--primary-dark, #1d4ed8)); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.1rem; box-shadow: 0 4px 12px rgba(29, 109, 255, 0.3); } .recovery-process-steps .step:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); } .recovery-process-steps .step h3 { margin: 10px 0 8px; font-size: 1.02rem; font-weight: 800; color: var(--text-strong, #0f2544); } .recovery-process-steps .step p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-soft, #4b5563); } /* -------------------------------------------------------------------------- FAQ ACCORDION (shared across variants) -------------------------------------------------------------------------- */ .faq-accordion { max-width: 880px; margin: 24px auto 0; } .faq-accordion .faq-item-accordion { background: var(--card-bg, #fff); border: 1px solid var(--border-soft, #e5e7eb); border-radius: 12px; margin-bottom: 12px; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .faq-accordion .faq-item-accordion.open { border-color: var(--primary, #1d6dff); box-shadow: 0 4px 18px rgba(29, 109, 255, 0.08); } .faq-accordion .faq-question { padding: 18px 22px; font-weight: 700; color: var(--text-strong, #0f2544); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 1rem; line-height: 1.45; } .faq-accordion .faq-question i { color: var(--primary, #1d6dff); transition: transform 0.2s ease; flex-shrink: 0; } .faq-accordion .faq-item-accordion.open .faq-question i { transform: rotate(45deg); } .faq-accordion .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; color: var(--text-soft, #4b5563); line-height: 1.7; font-size: 0.95rem; } .faq-accordion .faq-item-accordion.open .faq-answer { max-height: 800px; padding: 0 22px 18px; } /* -------------------------------------------------------------------------- IMAGE GALLERY (process + equipment shots) -------------------------------------------------------------------------- */ .recovery-image-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 30px 0; } .recovery-image-gallery figure { margin: 0; background: var(--card-bg, #fff); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); border: 1px solid var(--border-soft, #e5e7eb); } .recovery-image-gallery img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform 0.4s ease; } .recovery-image-gallery figure:hover img { transform: scale(1.04); } .recovery-image-gallery figcaption { padding: 10px 14px; font-size: 0.82rem; color: var(--text-soft, #4b5563); text-align: center; font-weight: 600; } /* -------------------------------------------------------------------------- CROSS-LINK SECTION (related pages grid) -------------------------------------------------------------------------- */ .recovery-crosslinks { background: var(--bg-tint, #f8f9ff); padding: 50px 0; border-top: 1px solid var(--border-soft, #e5e7eb); } .recovery-crosslinks h2 { text-align: center; font-size: 1.6rem; font-weight: 800; color: var(--text-strong, #0f2544); margin-bottom: 6px; } .recovery-crosslinks .crosslink-subtitle { text-align: center; color: var(--text-soft, #4b5563); margin-bottom: 28px; font-size: 0.95rem; } .recovery-crosslinks .crosslink-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; max-width: 1100px; margin: 0 auto; } .recovery-crosslinks .crosslink-card { background: #fff; border-radius: 12px; padding: 16px 18px; text-decoration: none; border-left: 4px solid var(--primary, #1d6dff); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; display: flex; align-items: flex-start; gap: 12px; } .recovery-crosslinks .crosslink-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(29, 109, 255, 0.12); } .recovery-crosslinks .crosslink-card .icon { font-size: 1.4rem; color: var(--primary, #1d6dff); flex-shrink: 0; } .recovery-crosslinks .crosslink-card .label { color: var(--text-strong, #0f2544); font-weight: 700; font-size: 0.92rem; line-height: 1.35; margin-bottom: 4px; } .recovery-crosslinks .crosslink-card .desc { color: var(--text-soft, #4b5563); font-size: 0.82rem; line-height: 1.45; } /* -------------------------------------------------------------------------- URGENCY BANNER (Variant F only) -------------------------------------------------------------------------- */ .recovery-variant-f .urgency-banner { background: linear-gradient(90deg, #dc2626, #b91c1c); color: #fff; padding: 10px 0; text-align: center; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.3px; box-shadow: 0 2px 12px rgba(220, 38, 38, 0.25); } .recovery-variant-f .urgency-banner i { margin-right: 8px; animation: pulse 1.6s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* -------------------------------------------------------------------------- SPEAKABLE HELPER (Google voice search hint — visually neutral) -------------------------------------------------------------------------- */ .speakable-answer { /* No visual change — class is used purely by Schema.org Speakable. Keep selector exposed for crawlers; styling preserved by tldr-text. */ }