/* ========================================================================== MEGA campaign — integrated into the front-page hero (inc/mega-banner.php) -------------------------------------------------------------------------- The campaign is NOT a separate island: it borrows the hero's dark canvas, grid pattern and green glow, so the top of the homepage reads as one composition — brand statement (left) + campaign lockup (right), with the product strip closing the block. Only the poster punch is kept from the original design: the Anton headline, the pulsing percent circle and the white product cards. NB: the Anton @font-face is printed INLINE in by inc/mega-banner.php with an ABSOLUTE URL (W3TC-minify-safe, same as the theme's own fonts). ========================================================================== */ /* --- Hero rhythm when the campaign is on (strip closes the section) ------ */ .home-hero--mega .home-hero__inner { padding-block: 76px 0; } .home-hero--mega .home-hero__grid { align-items: center; } @media (min-width: 1024px) { .home-hero--mega .home-hero__grid { grid-template-columns: 1.02fr .98fr; gap: 40px; } } /* ========================== Campaign lockup ============================ */ /* A hairline ties the two halves together as ONE composition instead of two unrelated blocks: a rule between the columns on desktop, above the campaign once they stack. */ .ogmb-offer { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } @media (min-width: 1024px) { .ogmb-offer { border-left: 1px solid rgba(255,255,255,.09); padding-left: 40px; } } @media (max-width: 1023px) { .ogmb-offer { border-top: 1px solid rgba(255,255,255,.09); padding-top: 28px; } } .ogmb-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display, 'Space Grotesk'), sans-serif; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--green-bright, #34d399); } .ogmb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger, #ef4444); animation: ogmbBlink 1.4s ease-in-out infinite; flex: none; } .ogmb-lockup { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .ogmb-h { /* flex-shrink:0 is load-bearing: "ALLAHINDLUS" is one unbreakable word, so a shrinking flex box would let the letters spill UNDER the percent circle. Held at its natural width, the circle simply wraps to the next line when space runs out (narrow phones) instead of colliding. */ flex: 0 0 auto; max-width: 100%; margin: 0; color: #fff; text-transform: uppercase; font-family: Anton, var(--font-display, 'Space Grotesk'), Impact, sans-serif; font-weight: 400; font-size: clamp(34px, 4.2vw, 58px); line-height: .86; letter-spacing: .01em; } .ogmb-h span { color: var(--green-bright, #34d399); display: inline-block; } .ogmb-circle { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: clamp(96px, 9.5vw, 130px); height: clamp(96px, 9.5vw, 130px); border-radius: 50%; background: linear-gradient(150deg, var(--danger, #ef4444), var(--danger-dark, #b91c1c)); box-shadow: 0 18px 38px -16px rgba(185, 28, 28, .75); animation: ogmbPulse 2s ease-in-out infinite; } .ogmb-circle b { font-size: 11px; line-height: 1; font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.85); } .ogmb-circle i { font-family: Anton, var(--font-display, 'Space Grotesk'), Impact, sans-serif; font-weight: 400; font-style: normal; font-size: clamp(32px, 3.4vw, 46px); line-height: 1; color: #fff; margin-top: 3px; } .ogmb-sub { margin: 0; max-width: 460px; color: #cbd5e1; font-size: 15px; line-height: 1.55; } .ogmb-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; padding: 17px 30px; border-radius: var(--radius, 12px); background: var(--green-bright, #34d399); color: #052e1c !important; font-family: var(--font-display, 'Space Grotesk'), sans-serif; font-size: 17px; font-weight: 700; line-height: 1; text-decoration: none !important; animation: ogmbRing 2.6s ease-out infinite; transition: background .18s ease, transform .18s ease; } .ogmb-cta:hover { background: #5eead4; color: #04241a !important; transform: translateY(-2px); } .ogmb-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .ogmb-cta > span { position: absolute; top: 0; left: 0; width: 40px; height: 100%; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0)); animation: ogmbSheen 3s ease-in-out infinite; } /* ========================== Product strip ============================== */ .ogmb-strip { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; padding-bottom: 64px; } .ogmb-strip[data-count="2"] { grid-template-columns: repeat(2, 1fr); } .ogmb-strip[data-count="3"] { grid-template-columns: repeat(3, 1fr); } .ogmb-card { position: relative; display: flex; flex-direction: column; gap: 11px; background: #fff; border-radius: var(--radius-lg, 16px); padding: 16px; text-decoration: none !important; box-shadow: 0 26px 50px -30px rgba(2, 8, 20, .9); transition: transform .18s ease, box-shadow .18s ease; } .ogmb-card:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -28px rgba(2, 8, 20, .95); } .ogmb-card:focus-visible { outline: 2px solid var(--green-bright, #34d399); outline-offset: 3px; } .ogmb-flag { position: absolute; top: -11px; right: -7px; z-index: 2; font-family: Anton, var(--font-display, 'Space Grotesk'), Impact, sans-serif; font-weight: 400; font-size: 24px; line-height: 1; color: #fff; background: linear-gradient(140deg, var(--danger, #ef4444), var(--danger-dark, #b91c1c)); padding: 9px 13px; border-radius: 12px; box-shadow: 0 14px 26px -12px rgba(185, 28, 28, .9); animation: ogmbTilt 2.4s ease-in-out infinite; } .ogmb-card:nth-child(2) .ogmb-flag { animation-delay: .3s; } .ogmb-card:nth-child(3) .ogmb-flag { animation-delay: .6s; } .ogmb-card:nth-child(4) .ogmb-flag { animation-delay: .9s; } .ogmb-img { height: 158px; display: flex; align-items: center; justify-content: center; background: var(--muted, #f1f5f9); border-radius: 14px; overflow: hidden; } .ogmb-img img { max-width: 90%; max-height: 90%; width: auto; height: auto; object-fit: contain; display: block; animation: ogmbFloat 5.5s ease-in-out infinite; } .ogmb-card:nth-child(2) .ogmb-img img { animation-delay: .4s; } .ogmb-card:nth-child(3) .ogmb-img img { animation-delay: .8s; } .ogmb-card:nth-child(4) .ogmb-img img { animation-delay: 1.2s; } .ogmb-name { font-size: 14.5px; line-height: 1.35; font-weight: 700; color: var(--slate-dark, #1e293b); min-height: 39px; } .ogmb-price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .ogmb-old { font-size: 14px; line-height: 1; font-weight: 600; color: var(--slate-500, #64748b); text-decoration: line-through; } .ogmb-new { font-family: var(--font-display, 'Space Grotesk'), sans-serif; font-size: 27px; line-height: 1; font-weight: 700; color: var(--slate-dark, #1e293b); } .ogmb-save { align-self: flex-start; font-size: 12.5px; line-height: 1; font-weight: 700; color: #065f46; background: #d1fae5; padding: 7px 11px; border-radius: 999px; } /* ============================== Tablet ================================= */ @media (max-width: 1023px) { .home-hero--mega .home-hero__inner { padding-block: 60px 0; } .ogmb-offer { align-items: flex-start; } .ogmb-strip { grid-template-columns: repeat(2, 1fr); margin-top: 36px; padding-bottom: 52px; } .ogmb-strip[data-count="3"] { grid-template-columns: repeat(2, 1fr); } } /* ============================== Phone ================================== */ @media (max-width: 640px) { .home-hero--mega .home-hero__inner { padding-block: 44px 0; } .ogmb-offer { gap: 12px; } .ogmb-lockup { gap: 16px; } .ogmb-h { font-size: clamp(30px, 9.2vw, 42px); } .ogmb-circle { width: 82px; height: 82px; } .ogmb-circle i { font-size: 28px; } .ogmb-circle b { font-size: 10px; } .ogmb-sub { font-size: 14px; } .ogmb-cta { width: 100%; justify-content: center; font-size: 16px; padding: 16px 22px; } .ogmb-strip { gap: 11px; margin-top: 30px; padding-bottom: 40px; } .ogmb-card { padding: 11px; border-radius: 14px; gap: 9px; } .ogmb-img { height: 108px; } .ogmb-name { font-size: 12.5px; min-height: 34px; } .ogmb-new { font-size: 21px; } .ogmb-old { font-size: 12.5px; } .ogmb-save { font-size: 11px; padding: 6px 9px; } .ogmb-flag { font-size: 18px; padding: 6px 10px; top: -8px; right: -4px; } } /* ========================= Motion safety =============================== */ @media (prefers-reduced-motion: reduce) { .ogmb-offer *, .ogmb-strip * { animation: none !important; } .ogmb-card:hover { transform: none; } } @keyframes ogmbPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } @keyframes ogmbTilt { 0%, 100% { transform: rotate(-9deg) scale(1); } 50% { transform: rotate(-5deg) scale(1.06); } } @keyframes ogmbRing { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.5); } 70% { box-shadow: 0 0 0 22px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } } @keyframes ogmbSheen { 0% { transform: translateX(-140%) skewX(-20deg); } 55%, 100% { transform: translateX(520%) skewX(-20deg); } } @keyframes ogmbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes ogmbBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }