/* ============================================================================= LOUP GAROU — Landing Page Styles Dark mystical theme | French card game ============================================================================= */ /* ── Google Fonts ─────────────────────────────────────────────────────────── */ /* Loaded via page-loup-garou.php — Cinzel + Crimson Pro + Inter */ /* ── CSS Variables ────────────────────────────────────────────────────────── */ :root { --lg-bg: #06060e; --lg-bg-2: #0c0b19; --lg-bg-3: #0f0e1e; --lg-gold: #e2bc45; --lg-gold-light: #fde87a; --lg-gold-dark: #b89030; --lg-red: #9b1f1f; --lg-red-light: #d44030; --lg-white: #ffffff; --lg-muted: #c4bad8; --lg-border: rgba(226, 188, 69, 0.28); --lg-radius: 12px; --lg-radius-lg: 20px; --lg-shadow: 0 24px 80px rgba(0, 0, 0, 0.8); --lg-glow: 0 0 48px rgba(226, 188, 69, 0.5); --lg-font-title: 'Cinzel', Georgia, serif; --lg-font-body: 'Cinzel', Georgia, serif; --lg-font-prose: 'Crimson Pro', Georgia, serif; --lg-font-ui: 'Inter', system-ui, sans-serif; --lg-ease: 0.3s ease; --lg-max-w: 1140px; } /* ── Reset ────────────────────────────────────────────────────────────────── */ .lg-page *, .lg-page *::before, .lg-page *::after { box-sizing: border-box; margin: 0; padding: 0; } .lg-page { font-family: var(--lg-font-title); background-color: var(--lg-bg); color: var(--lg-white); line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; } /* Cinzel looks best with a touch of letter-spacing at normal sizes */ .lg-page { letter-spacing: 0.02em; } /* Long-form body text: Crimson Pro for readability */ .lg-page p, .lg-page li, .lg-page blockquote { font-family: var(--lg-font-prose); letter-spacing: 0; } /* Form inputs stay legible with Inter */ .lg-page input, .lg-page select, .lg-page textarea, .lg-page label { font-family: var(--lg-font-ui); letter-spacing: 0; } .lg-page img { max-width: 100%; display: block; } .lg-page a { text-decoration: none; color: inherit; } .lg-page ul { list-style: none; } .lg-page button { font-family: var(--lg-font-title); } html { scroll-behavior: smooth; } /* ── Layout ───────────────────────────────────────────────────────────────── */ .lg-container { max-width: var(--lg-max-w); margin: 0 auto; padding: 0 24px; } /* ── Keyframe Animations ──────────────────────────────────────────────────── */ @keyframes lg-fade-up { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } } @keyframes lg-hero-title { from { opacity: 0; transform: translateY(64px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes lg-pulse-glow { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.45); } 50% { transform: scale(1.03); box-shadow: 0 0 0 14px rgba(212, 175, 55, 0); } } @keyframes lg-moon-breathe { 0%, 100% { box-shadow: 0 0 80px rgba(226,188,69,0.7), 0 0 160px rgba(226,188,69,0.35), 0 0 300px rgba(226,188,69,0.12); } 50% { box-shadow: 0 0 130px rgba(226,188,69,0.9), 0 0 260px rgba(226,188,69,0.5), 0 0 400px rgba(226,188,69,0.2); } } @keyframes lg-gold-glow { 0%, 100% { text-shadow: 0 0 30px rgba(226,188,69,0.7), 0 0 60px rgba(226,188,69,0.35); } 50% { text-shadow: 0 0 50px rgba(226,188,69,1), 0 0 100px rgba(226,188,69,0.6); } } @keyframes lg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @keyframes lg-scroll-drop { 0%, 100% { opacity: 0.8; transform: translateY(0); } 50% { opacity: 0.3; transform: translateY(10px); } } @keyframes lg-ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Scroll Reveal ────────────────────────────────────────────────────────── */ .lg-reveal { opacity: 0; transform: translateY(44px); transition: opacity 0.75s ease, transform 0.75s ease; transition-delay: var(--delay, 0s); } .lg-reveal.lg-visible { opacity: 1; transform: translateY(0); } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .lg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: var(--lg-radius); font-family: var(--lg-font-title); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: none; transition: all var(--lg-ease); white-space: nowrap; } .lg-btn--primary { background: linear-gradient(135deg, var(--lg-gold) 0%, var(--lg-gold-dark) 100%); color: #000; } .lg-btn--primary:hover { background: linear-gradient(135deg, var(--lg-gold-light) 0%, var(--lg-gold) 100%); transform: translateY(-2px); box-shadow: var(--lg-glow); } .lg-btn--secondary { background: transparent; color: var(--lg-gold); border: 2px solid var(--lg-gold); } .lg-btn--secondary:hover { background: rgba(212, 175, 55, 0.1); transform: translateY(-2px); } .lg-btn--ghost { background: rgba(255,255,255,0.08); color: #ffffff; border: 1.5px solid rgba(255, 255, 255, 0.55); } .lg-btn--ghost:hover { background: rgba(226,188,69,0.12); border-color: var(--lg-gold); color: var(--lg-gold); } .lg-btn--large { padding: 18px 40px; font-size: 1rem; } .lg-btn--pulse { animation: lg-pulse-glow 2.6s ease-in-out infinite; } /* ── Section Base ─────────────────────────────────────────────────────────── */ .lg-section { padding: 100px 0; position: relative; } .lg-section__header { text-align: center; margin-bottom: 64px; } .lg-eyebrow { display: inline-block; font-family: var(--lg-font-title); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lg-gold); padding: 6px 18px; border: 1px solid var(--lg-border); border-radius: 20px; background: rgba(212, 175, 55, 0.06); margin-bottom: 18px; } .lg-section__title { font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; color: var(--lg-white); line-height: 1.15; margin-bottom: 18px; } .lg-section__lead { font-family: var(--lg-font-prose); font-size: 1.2rem; color: rgba(255,255,255,0.82); max-width: 600px; margin: 0 auto; line-height: 1.75; } /* ============================================================================= NAVIGATION ============================================================================= */ .lg-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 18px 0; transition: background var(--lg-ease), padding var(--lg-ease), border-color var(--lg-ease); border-bottom: 1px solid transparent; } .lg-nav.lg-nav--scrolled { background: rgba(7, 7, 15, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 12px 0; border-bottom-color: var(--lg-border); } .lg-nav__inner { max-width: var(--lg-max-w); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .lg-nav__logo img { height: 80px; width: auto; object-fit: contain; filter: drop-shadow(0 0 8px rgba(212,175,55,0.3)); } .lg-nav__links { display: flex; align-items: center; gap: 36px; } .lg-nav__links a { font-family: var(--lg-font-title); font-size: 0.8rem; letter-spacing: 0.07em; color: rgba(255,255,255,0.88); transition: color var(--lg-ease); } .lg-nav__links a:hover { color: var(--lg-gold); } .lg-nav__cta { background: var(--lg-gold) !important; color: #000 !important; padding: 8px 20px !important; border-radius: 8px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; transition: background var(--lg-ease), transform var(--lg-ease) !important; } .lg-nav__cta:hover { background: var(--lg-gold-light) !important; transform: translateY(-1px) !important; color: #000 !important; } /* Hamburger */ .lg-nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .lg-nav__burger span { display: block; width: 24px; height: 2px; background: var(--lg-white); border-radius: 2px; transition: all 0.3s; } .lg-nav__burger.lg-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .lg-nav__burger.lg-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .lg-nav__burger.lg-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================================= HERO ============================================================================= */ .lg-hero { position: relative; min-height: 100vh; padding-bottom: 100px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; border-radius: 0 0 50% 50% / 0 0 90px 90px; box-shadow: 0 0 80px rgba(226, 188, 69, 0.18); background: radial-gradient(ellipse 90% 70% at 50% 0%, #3d1460 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 80% 15%, #1e0a40 0%, transparent 55%), radial-gradient(ellipse 40% 30% at 10% 80%, #180838 0%, transparent 50%), linear-gradient(180deg, #0c0920 0%, #0e0c20 100%); } #lg-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .lg-hero::after, .lg-hero::before { display: none; } /* Moon */ .lg-hero__moon { position: absolute; top: 7%; right: 9%; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 32% 32%, #fffde7, #f0d060 45%, #c9a227 72%, #7a5a08); animation: lg-moon-breathe 5s ease-in-out infinite; z-index: 1; } /* Forest trees */ .lg-hero__trees { position: absolute; bottom: 0; left: 0; right: 0; height: 38%; z-index: 1; pointer-events: none; } .lg-tree { position: absolute; bottom: 0; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: #05040d; } .lg-tree--1 { left: -2%; width: 150px; height: 300px; } .lg-tree--2 { left: 7%; width: 110px; height: 230px; } .lg-tree--3 { left: 16%; width: 80px; height: 180px; } .lg-tree--4 { right: 6%; width: 130px; height: 270px; } .lg-tree--5 { right: -1%; width: 160px; height: 310px; } /* Hero content — two-column */ .lg-hero__content { position: relative; z-index: 3; width: 100%; max-width: 1100px; padding: 0 32px; margin-top: 96px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; } .lg-hero__left { text-align: left; } .lg-hero__logo { width: 110px; height: auto; margin: 0 0 28px; object-fit: contain; animation: lg-float 7s ease-in-out infinite; filter: drop-shadow(0 0 36px rgba(226, 188, 69, 0.85)) drop-shadow(0 0 70px rgba(226,188,69,0.4)); } .lg-hero__title { font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif; font-size: clamp(3.2rem, 8vw, 6.5rem); font-weight: 900; line-height: 0.92; letter-spacing: 0.04em; margin-bottom: 24px; animation: lg-hero-title 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; } .lg-hero__title-line { display: block; color: var(--lg-white); } .lg-hero__title-line--accent { color: var(--lg-gold); animation: lg-gold-glow 3.5s ease-in-out infinite; } .lg-hero__tagline { font-family: var(--lg-font-body); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lg-gold); margin-bottom: 16px; animation: lg-fade-up 1s ease 0.45s both; opacity: 0.9; } .lg-hero__subtitle { font-family: var(--lg-font-prose); font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255, 255, 255, 0.92); margin-bottom: 32px; animation: lg-fade-up 1s ease 0.6s both; text-shadow: 0 2px 20px rgba(0,0,0,0.5); line-height: 1.6; } .lg-hero__subtitle span { color: rgba(255,255,255,0.72); font-size: 0.95em; } .lg-hero__badges { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 40px; animation: lg-fade-up 1s ease 0.8s both; } .lg-badge { font-family: var(--lg-font-title); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--lg-gold); border: 1px solid var(--lg-border); background: rgba(226, 188, 69, 0.09); padding: 7px 16px; border-radius: 20px; backdrop-filter: blur(6px); } .lg-hero__actions { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; animation: lg-fade-up 1s ease 1s both; } /* Product image column */ .lg-hero__right { display: flex; align-items: center; justify-content: center; animation: lg-fade-up 1.2s ease 0.3s both; } .lg-hero__product-wrap { position: relative; display: inline-block; } .lg-hero__product { width: 100%; max-width: 340px !important; height: auto; object-fit: contain; filter: drop-shadow(0 20px 60px rgba(0,0,0,0.8)) drop-shadow(0 0 40px rgba(180,30,30,0.4)); animation: lg-float 6s ease-in-out infinite; position: relative; z-index: 1; border-radius: 8px; } .lg-hero__product-glow { position: absolute; inset: -20px; background: radial-gradient(ellipse at center, rgba(180,30,30,0.35) 0%, rgba(226,188,69,0.15) 40%, transparent 70%); filter: blur(30px); z-index: 0; animation: lg-moon-breathe 4s ease-in-out infinite; } /* Scroll indicator */ .lg-hero__scroll { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; } .lg-scroll-arrow { width: 2px; height: 52px; background: linear-gradient(to bottom, transparent, var(--lg-gold)); position: relative; animation: lg-scroll-drop 2.2s ease-in-out infinite; } .lg-scroll-arrow::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; border-right: 2px solid var(--lg-gold); border-bottom: 2px solid var(--lg-gold); } /* ============================================================================= PRÉSENTATION ============================================================================= */ .lg-presentation { padding-top: 80px; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(61,20,96,0.3) 0%, transparent 60%), linear-gradient(180deg, #06060e 0%, #0c0b19 100%); } .lg-presentation__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .lg-presentation__text p { font-family: var(--lg-font-prose); font-size: 1.18rem; color: rgba(255, 255, 255, 0.92); line-height: 1.85; margin-bottom: 22px; } .lg-presentation__text strong { color: var(--lg-gold); font-weight: 600; } .lg-features-list { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; } .lg-features-list li { font-family: var(--lg-font-title); font-size: 0.85rem; letter-spacing: 0.04em; color: rgba(240, 236, 228, 0.9); padding-left: 4px; } /* Stats grid */ .lg-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 44px; } .lg-stat { background: linear-gradient(145deg, rgba(226,188,69,0.08) 0%, rgba(226,188,69,0.03) 100%); border: 1px solid var(--lg-border); border-radius: var(--lg-radius); padding: 28px 20px; text-align: center; transition: all 0.4s ease; cursor: default; box-shadow: inset 0 1px 0 rgba(226,188,69,0.1); } .lg-stat:hover { background: linear-gradient(145deg, rgba(226,188,69,0.18) 0%, rgba(226,188,69,0.06) 100%); border-color: rgba(226, 188, 69, 0.6); transform: translateY(-6px); box-shadow: var(--lg-glow), inset 0 1px 0 rgba(226,188,69,0.2); } .lg-stat__number { display: block; font-family: var(--lg-font-title); font-size: 2.6rem; font-weight: 900; color: var(--lg-gold); line-height: 1; } .lg-stat__unit { font-family: var(--lg-font-title); font-size: 0.9rem; color: rgba(255,255,255,0.7); } .lg-stat__label { display: block; font-size: 0.75rem; color: rgba(255,255,255,0.75); margin-top: 7px; text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--lg-font-title); } /* Wolf emblem */ .lg-wolf-emblem { position: relative; width: 180px; height: 180px; margin: 0 auto; } .lg-wolf-emblem__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(212, 175, 55, 0.3); animation: lg-ring-spin 20s linear infinite; } .lg-wolf-emblem__ring::before { content: ''; position: absolute; inset: 12px; border-radius: 50%; border: 1px solid rgba(212, 175, 55, 0.15); } .lg-wolf-emblem__icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 5rem; animation: lg-float 6s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.4)); } /* ============================================================================= CARTES ============================================================================= */ .lg-cards { background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(226,188,69,0.06) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 20% 80%, rgba(138,60,200,0.06) 0%, transparent 60%), var(--lg-bg-3); } .lg-cards::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 10%, rgba(226, 188, 69, 0.07) 0%, transparent 70%); pointer-events: none; } .lg-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .lg-card-item { cursor: pointer; border-radius: var(--lg-radius); overflow: hidden; background: rgba(12,11,25,0.9); border: 1px solid rgba(226,188,69,0.22); transition: all 0.4s ease; box-shadow: 0 8px 32px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 10px; min-height: 300px; } .lg-card-item:hover, .lg-card-item:focus-visible { transform: translateY(-12px) scale(1.04); border-color: rgba(226, 188, 69, 0.8); box-shadow: 0 28px 60px rgba(0,0,0,0.7), 0 0 40px rgba(226,188,69,0.45); outline: none; background: rgba(20,18,40,0.95); } .lg-card-item__inner { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; } .lg-card-item__img { width: 100%; height: auto; max-height: 340px; object-fit: contain; border-radius: 8px; transition: filter 0.3s ease; display: block; } .lg-card-item:hover .lg-card-item__img, .lg-card-item:focus-visible .lg-card-item__img { filter: brightness(0.85) saturate(1.15); } .lg-card-item__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; background: rgba(0, 0, 0, 0.28); } .lg-card-item:hover .lg-card-item__overlay, .lg-card-item:focus-visible .lg-card-item__overlay { opacity: 1; } .lg-card-item__zoom { font-size: 2.2rem; } /* Lightbox */ .lg-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; } .lg-lightbox[hidden] { display: none; } .lg-lightbox__backdrop { position: fixed; inset: 0; background: rgba(2, 2, 8, 0.93); z-index: 9998; cursor: pointer; } .lg-lightbox__backdrop[hidden] { display: none; } .lg-lightbox__img-wrap { position: relative; z-index: 9999; max-width: 88vw; max-height: 88vh; display: flex; align-items: center; justify-content: center; } .lg-lightbox__img-wrap img { max-width: 80vw; max-height: 84vh; object-fit: contain; border-radius: var(--lg-radius); box-shadow: var(--lg-shadow); } .lg-lightbox__close, .lg-lightbox__prev, .lg-lightbox__next { position: fixed; z-index: 10000; background: rgba(212, 175, 55, 0.12); border: 1px solid var(--lg-border); color: var(--lg-white); cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all var(--lg-ease); font-size: 1.3rem; line-height: 1; } .lg-lightbox__close { top: 20px; right: 20px; width: 46px; height: 46px; } .lg-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; } .lg-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; } .lg-lightbox__close:hover, .lg-lightbox__prev:hover, .lg-lightbox__next:hover { background: rgba(212, 175, 55, 0.28); border-color: var(--lg-gold); transform: translateY(-50%) scale(1.05); } .lg-lightbox__close:hover { transform: scale(1.05); } /* ============================================================================= COMMENT JOUER ============================================================================= */ .lg-howto { background: var(--lg-bg); } .lg-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; } /* Connector dots between steps instead of a line */ .lg-steps::before { display: none; } .lg-step { position: relative; z-index: 1; background: linear-gradient(160deg, rgba(226,188,69,0.08) 0%, rgba(12,11,25,0.95) 100%); border: 1px solid var(--lg-border); border-radius: var(--lg-radius-lg); padding: 44px 28px 36px; text-align: center; transition: all 0.4s ease; box-shadow: 0 8px 40px rgba(0,0,0,0.4); overflow: visible; } /* Arrow connector between steps */ .lg-step:not(:last-child)::after { content: '›'; position: absolute; right: -18px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; color: rgba(226,188,69,0.4); z-index: 2; pointer-events: none; } .lg-step:hover { border-color: rgba(226, 188, 69, 0.65); box-shadow: 0 20px 60px rgba(0,0,0,0.6), var(--lg-glow); transform: translateY(-10px); background: linear-gradient(160deg, rgba(226,188,69,0.16) 0%, rgba(12,11,25,1) 100%); } .lg-step__number { display: inline-block; font-family: var(--lg-font-title); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--lg-gold); background: rgba(212, 175, 55, 0.08); border: 1px solid var(--lg-border); padding: 4px 14px; border-radius: 20px; margin-bottom: 18px; } .lg-step__icon { font-size: 2.8rem; margin-bottom: 18px; display: block; } .lg-step__title { font-family: var(--lg-font-title); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.03em; color: var(--lg-white); margin-bottom: 14px; } .lg-step__desc { font-family: var(--lg-font-prose); font-size: 1.05rem; color: rgba(255,255,255,0.85); line-height: 1.7; } /* ============================================================================= OFFRE ============================================================================= */ .lg-offer { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(226,188,69,0.1) 0%, transparent 65%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(155,31,31,0.1) 0%, transparent 60%), linear-gradient(180deg, var(--lg-bg-3) 0%, var(--lg-bg-2) 100%); } .lg-offer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 35% at 50% 50%, rgba(226, 188, 69, 0.06) 0%, transparent 70%); pointer-events: none; } .lg-offer__box { max-width: 880px; margin: 0 auto; position: relative; z-index: 1; background: linear-gradient( 145deg, rgba(226, 188, 69, 0.1) 0%, rgba(15, 14, 30, 0.95) 50%, rgba(155, 31, 31, 0.06) 100% ); border: 1px solid rgba(226, 188, 69, 0.4); border-radius: 28px; padding: 64px 56px; text-align: center; box-shadow: 0 0 120px rgba(226, 188, 69, 0.12), 0 40px 100px rgba(0,0,0,0.6); } .lg-offer__badge { display: inline-block; background: linear-gradient(135deg, var(--lg-red), var(--lg-red-light)); color: #fff; font-family: var(--lg-font-title); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 22px; border-radius: 20px; margin-bottom: 36px; animation: lg-pulse-glow 2.2s ease-in-out infinite; } .lg-offer__logo { width: 88px; height: auto; margin: 0 auto 20px; object-fit: contain; filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.45)); } .lg-offer__title { font-family: var(--lg-font-title); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: var(--lg-white); margin-bottom: 10px; } .lg-offer__subtitle { font-family: var(--lg-font-prose); font-size: 1.15rem; color: rgba(255,255,255,0.8); margin-bottom: 48px; } .lg-offer__content { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; text-align: left; align-items: start; } .lg-offer__features h3 { font-family: var(--lg-font-title); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--lg-gold); margin-bottom: 22px; text-transform: uppercase; } .lg-offer__features ul { display: flex; flex-direction: column; gap: 14px; } .lg-offer__features li { font-family: var(--lg-font-prose); font-size: 1.05rem; color: var(--lg-white); line-height: 1.5; } .lg-offer__pricing { text-align: center; } .lg-offer__price { font-family: var(--lg-font-title); font-size: 3.4rem; font-weight: 900; color: var(--lg-gold); line-height: 1; margin-bottom: 14px; } /* WooCommerce price override */ .lg-offer__price .amount { color: var(--lg-gold); } .lg-offer__price .woocommerce-Price-currencySymbol { font-size: 2rem; } .lg-price-placeholder { font-size: 1.2rem; color: var(--lg-muted); } .lg-offer__shipping { font-size: 0.9rem; color: rgba(255,255,255,0.8); margin-bottom: 28px; } .lg-offer__cart { display: flex; flex-direction: column; gap: 12px; } .lg-offer__guarantees { display: flex; flex-direction: column; gap: 9px; margin-top: 24px; font-family: var(--lg-font-title); font-size: 0.78rem; letter-spacing: 0.05em; color: rgba(255,255,255,0.8); } /* ============================================================================= FAQ ============================================================================= */ .lg-faq { background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(100,40,180,0.06) 0%, transparent 70%), var(--lg-bg); } .lg-faq__list { max-width: 740px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .lg-faq__item { background: linear-gradient(145deg, rgba(226,188,69,0.05) 0%, rgba(12,11,25,0.95) 100%); border: 1px solid var(--lg-border); border-radius: var(--lg-radius); overflow: hidden; transition: border-color var(--lg-ease), box-shadow var(--lg-ease); } .lg-faq__item.lg-open { border-color: rgba(226, 188, 69, 0.55); box-shadow: 0 8px 40px rgba(226,188,69,0.08); } .lg-faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px 26px; background: none; border: none; cursor: pointer; color: var(--lg-white); font-family: var(--lg-font-title); font-size: 0.9rem; letter-spacing: 0.03em; text-align: left; gap: 16px; transition: color var(--lg-ease); } .lg-faq__question:hover { color: var(--lg-gold); } .lg-faq__icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(212, 175, 55, 0.08); border: 1px solid var(--lg-border); font-size: 1.3rem; line-height: 1; flex-shrink: 0; color: var(--lg-gold); transition: all 0.35s ease; } .lg-faq__item.lg-open .lg-faq__icon { background: var(--lg-gold); color: #000; border-color: var(--lg-gold); transform: rotate(45deg); } .lg-faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .lg-faq__answer[hidden] { display: block; max-height: 0; } .lg-faq__item.lg-open .lg-faq__answer { max-height: 400px; display: block; } .lg-faq__answer p { padding: 0 26px 24px; font-family: var(--lg-font-prose); font-size: 1.08rem; color: rgba(255,255,255,0.88); line-height: 1.75; } /* ============================================================================= FOOTER ============================================================================= */ .lg-footer { background: linear-gradient(180deg, var(--lg-bg-2) 0%, #050410 100%); border-top: 1px solid var(--lg-border); padding: 64px 0 32px; } .lg-footer__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; flex-wrap: wrap; margin-bottom: 44px; } .lg-footer__logo { height: 54px; width: auto; object-fit: contain; margin-bottom: 14px; filter: drop-shadow(0 0 10px rgba(212,175,55,0.25)); } .lg-footer__brand p { font-family: var(--lg-font-prose); font-size: 0.95rem; color: rgba(255,255,255,0.7); max-width: 200px; line-height: 1.6; } .lg-footer__links, .lg-footer__legal { display: flex; flex-direction: column; gap: 14px; } .lg-footer__links a, .lg-footer__legal a { font-family: var(--lg-font-title); font-size: 0.8rem; letter-spacing: 0.06em; color: rgba(255,255,255,0.85); transition: color var(--lg-ease); } .lg-footer__links a:hover, .lg-footer__legal a:hover { color: var(--lg-gold); } .lg-footer__bottom { border-top: 1px solid var(--lg-border); padding-top: 26px; text-align: center; } .lg-footer__bottom p { font-family: var(--lg-font-title); font-size: 0.78rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.75); } /* ============================================================================= RESPONSIVE — Tablet (≤1024px) ============================================================================= */ @media (max-width: 1024px) { .lg-steps { grid-template-columns: repeat(2, 1fr); } .lg-steps::before { display: none; } .lg-presentation__grid { grid-template-columns: 1fr; gap: 48px; } .lg-presentation__right { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; } } /* ============================================================================= RESPONSIVE — Mobile (≤768px) ============================================================================= */ @media (max-width: 768px) { .lg-section { padding: 72px 0; } .lg-section__header { margin-bottom: 44px; } /* ── Nav mobile ── */ .lg-nav { /* transparent at top — blends with hero gradient */ background: transparent !important; border-bottom-color: transparent !important; padding: 12px 0; } /* Solid once scrolled (not open) */ .lg-nav.lg-nav--scrolled:not(.lg-nav--open) { background: rgba(6, 6, 14, 0.96) !important; border-bottom-color: rgba(226,188,69,0.15) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* When menu is open: expand nav to full viewport, solid bg */ .lg-nav.lg-nav--open { bottom: 0; background: #06060e !important; border-bottom-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Compact logo on mobile */ .lg-nav__logo img { height: 40px; } /* Nav inner: tighter padding */ .lg-nav__inner { padding: 0 16px; } .lg-nav__links { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #06060e; flex-direction: column; align-items: center; justify-content: center; gap: 36px; padding-top: 80px; } .lg-nav__links.lg-open { display: flex; } .lg-nav__links a { font-size: 1.1rem; font-weight: 600; color: rgba(255,255,255,0.88); letter-spacing: 0.16em; text-transform: uppercase; padding: 10px 0; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .lg-nav__links a:hover, .lg-nav__links a:active { color: var(--lg-gold); border-bottom-color: rgba(226,188,69,0.35); } /* "Commander" CTA in menu — styled as gold pill */ .lg-nav__cta { background: var(--lg-gold) !important; color: #000 !important; border: none !important; border-bottom: none !important; padding: 13px 36px !important; border-radius: 8px !important; font-size: 0.82rem !important; letter-spacing: 0.12em !important; margin-top: 8px; } .lg-nav__cta:hover, .lg-nav__cta:active { background: var(--lg-gold-light) !important; color: #000 !important; border-bottom-color: transparent !important; } /* Burger button */ .lg-nav__burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; z-index: 10; position: relative; background: none; border: none; outline: none; padding: 8px; cursor: pointer; } .lg-nav__burger span { display: block; width: 24px; height: 2px; background: #ffffff; border-radius: 2px; transition: all 0.3s ease; } /* ── Hero mobile ── */ .lg-hero { border-radius: 0 0 50% 50% / 0 0 50px 50px; padding-bottom: 70px; } .lg-hero__moon { width: 70px; height: 70px; top: 6%; right: 4%; } .lg-hero__content { grid-template-columns: 1fr; gap: 28px; margin-top: 90px; padding: 0 20px 20px; text-align: center; } .lg-hero__left { text-align: center; order: 2; } .lg-hero__right { order: 1; } .lg-hero__logo { margin: 0 auto 20px; width: 80px; } .lg-hero__title { font-size: clamp(2.8rem, 13vw, 4.5rem); } .lg-hero__subtitle { font-size: 1rem; } .lg-hero__badges { justify-content: center; gap: 8px; } .lg-hero__badge { font-size: 0.7rem; padding: 6px 12px; } .lg-hero__product { max-width: 220px; } .lg-hero__actions { flex-direction: column; align-items: center; gap: 12px; width: 100%; } .lg-hero__actions .lg-btn { width: 100%; max-width: 300px; } /* ── Steps ── */ .lg-steps { grid-template-columns: 1fr; gap: 16px; } .lg-step:not(:last-child)::after { display: none; } /* ── Offer ── */ .lg-offer__box { padding: 36px 20px; } .lg-offer__content { grid-template-columns: 1fr; gap: 36px; } .lg-offer__pricing { text-align: center; } /* ── Cards ── */ .lg-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .lg-card-item { min-height: 220px; padding: 8px; } /* ── Footer ── */ .lg-footer__inner { flex-direction: column; align-items: center; text-align: center; } .lg-footer__brand p { max-width: 100%; } /* ── Presentation ── */ .lg-presentation__right { grid-template-columns: 1fr; } .lg-wolf-emblem { display: none; } .lg-stats-grid { max-width: 400px; margin-left: auto; margin-right: auto; } /* Popup mobile */ .lg-popup { width: 94%; max-height: 95vh; } .lg-popup__inner { padding: 36px 20px 28px; } .lg-form-row { grid-template-columns: 1fr; } } /* ============================================================================= RESPONSIVE — Small mobile (≤480px) ============================================================================= */ @media (max-width: 480px) { .lg-offer__box { padding: 28px 16px; } .lg-offer__price { font-size: 2.6rem; } .lg-cards-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .lg-card-item { min-height: 200px; } .lg-hero__title { font-size: clamp(3rem, 16vw, 4.5rem); } .lg-stats-grid { grid-template-columns: 1fr 1fr; } } /* ============================================================================= WOOCOMMERCE OVERRIDES ============================================================================= */ .lg-page .woocommerce-message, .lg-page .woocommerce-error, .lg-page .woocommerce-info { background: var(--lg-bg-2); border-top-color: var(--lg-gold); color: var(--lg-white); position: fixed; top: 80px; right: 20px; z-index: 9000; border-radius: var(--lg-radius); max-width: 360px; box-shadow: var(--lg-shadow); } /* ============================================================================= POPUP COMMANDE ============================================================================= */ .lg-popup__backdrop { position: fixed; inset: 0; background: rgba(2, 2, 10, 0.88); z-index: 10000; backdrop-filter: blur(6px); } .lg-popup__backdrop[hidden] { display: none; } .lg-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); z-index: 10001; width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; background: linear-gradient(160deg, #171430 0%, #0d0c1a 60%, #100d22 100%); border: 1px solid rgba(226, 188, 69, 0.45); border-radius: 24px; box-shadow: 0 40px 100px rgba(0,0,0,0.9), 0 0 80px rgba(226,188,69,0.12), inset 0 1px 0 rgba(226,188,69,0.15); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; } .lg-popup[hidden] { display: none; } .lg-popup.lg-popup--open { opacity: 1; transform: translate(-50%, -50%) scale(1); } .lg-popup__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--lg-white); cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: all var(--lg-ease); } .lg-popup__close:hover { background: rgba(212,175,55,0.2); border-color: var(--lg-gold); } .lg-popup__inner { padding: 44px 36px 36px; display: flex; flex-direction: column; gap: 0; } /* Each step fills the inner — hidden must win */ #lg-popup-step1[hidden], #lg-popup-step2[hidden], #lg-popup-step3[hidden] { display: none !important; } #lg-popup-step1, #lg-popup-step2, #lg-popup-step3 { display: flex; flex-direction: column; gap: 20px; } .lg-popup__header { text-align: center; } .lg-popup__logo { width: 70px; height: auto; margin: 0 auto 14px; filter: drop-shadow(0 0 14px rgba(212,175,55,0.45)); } .lg-popup__title { font-family: var(--lg-font-title); font-size: 1.4rem; font-weight: 700; color: var(--lg-white); margin-bottom: 6px; } .lg-popup__subtitle { font-family: var(--lg-font-prose); font-size: 1rem; color: var(--lg-muted); } .lg-popup__price-block { text-align: center; background: linear-gradient(135deg, rgba(226,188,69,0.12) 0%, rgba(226,188,69,0.04) 100%); border: 1px solid rgba(226,188,69,0.4); border-radius: var(--lg-radius); padding: 20px; box-shadow: inset 0 1px 0 rgba(226,188,69,0.2); } .lg-popup__price { display: block; font-family: var(--lg-font-title); font-size: 2.6rem; font-weight: 900; color: var(--lg-gold); line-height: 1; margin-bottom: 8px; } .lg-popup__shipping { font-size: 0.85rem; color: rgba(255,255,255,0.8); } .lg-popup__features { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lg-popup__features span { font-family: var(--lg-font-prose); font-size: 0.95rem; color: var(--lg-white); } .lg-popup__qty { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--lg-border); border-radius: var(--lg-radius); padding: 12px 18px; } .lg-popup__qty label { font-family: var(--lg-font-title); font-size: 0.85rem; letter-spacing: 0.05em; color: rgba(255,255,255,0.85); } .lg-qty-control { display: flex; align-items: center; gap: 0; border: 1px solid var(--lg-border); border-radius: var(--lg-radius); overflow: hidden; } .lg-qty-btn { width: 40px; height: 40px; background: rgba(212,175,55,0.08); border: none; color: var(--lg-gold); font-size: 1.4rem; cursor: pointer; transition: background var(--lg-ease); display: flex; align-items: center; justify-content: center; line-height: 1; } .lg-qty-btn:hover { background: rgba(212,175,55,0.2); } .lg-qty-input { width: 56px; height: 40px; background: transparent; border: none; border-left: 1px solid var(--lg-border); border-right: 1px solid var(--lg-border); color: var(--lg-white); font-family: var(--lg-font-title); font-size: 1rem; text-align: center; -moz-appearance: textfield; } .lg-qty-input::-webkit-outer-spin-button, .lg-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; } .lg-qty-input:focus { outline: none; } .lg-popup__actions { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 8px; } .lg-popup__guarantees { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; font-family: var(--lg-font-title); font-size: 0.75rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.75); } /* ── Step 2: COD checkout form ── */ .lg-popup__back { background: none; border: none; color: var(--lg-muted); cursor: pointer; font-size: 0.9rem; padding: 0 0 12px; display: flex; align-items: center; gap: 6px; transition: color var(--lg-ease); } .lg-popup__back:hover { color: var(--lg-gold); } .lg-cod-badge { display: inline-block; background: rgba(212,175,55,0.12); border: 1px solid rgba(212,175,55,0.4); color: var(--lg-gold); font-family: var(--lg-font-title); font-size: 0.8rem; letter-spacing: 0.06em; padding: 6px 16px; border-radius: 999px; margin-bottom: 20px; } .lg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .lg-form-group { margin-bottom: 14px; } .lg-form-group label { display: block; font-family: var(--lg-font-title); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--lg-gold); margin-bottom: 6px; } .lg-form-input { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--lg-border) !important; border-radius: var(--lg-radius) !important; color: var(--lg-white) !important; padding: 10px 14px !important; font-size: 0.95rem; font-family: var(--lg-font-body); outline: none; transition: border-color var(--lg-ease), background var(--lg-ease); box-sizing: border-box; } .lg-form-input::placeholder { color: rgba(255,255,255,0.25); } .lg-form-input:focus { border-color: var(--lg-gold); background: rgba(212,175,55,0.06); } .lg-form-input--error { border-color: #ef4444 !important; background: rgba(239,68,68,0.07) !important; } /* ── Step 3: Success ── */ .lg-popup__success { text-align: center; padding: 24px 8px 16px; } .lg-popup__success-icon { display: block; font-size: 4rem; margin-bottom: 16px; animation: lg-pop 0.45s cubic-bezier(0.34,1.56,0.64,1); } @keyframes lg-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } .lg-popup__success h3 { font-family: var(--lg-font-title); color: var(--lg-gold); font-size: 1.5rem; margin: 0 0 12px; } .lg-popup__success p { color: rgba(255,255,255,0.7); font-size: 0.95rem; margin: 6px 0; } .lg-popup__order-num { color: var(--lg-gold); } .lg-popup__success-note { margin-top: 12px !important; font-size: 0.85rem !important; color: rgba(212,175,55,0.7) !important; } @media (max-width: 480px) { .lg-popup__inner { padding: 32px 20px 24px; } .lg-popup__title { font-size: 1.2rem; } .lg-popup__price { font-size: 2rem; } .lg-popup__features { grid-template-columns: 1fr; } .lg-popup__guarantees { gap: 12px; } .lg-form-row { grid-template-columns: 1fr; } }