/* ========= Below-hero sections styling ========= */ .below-hero { background: #060606; color: #fff; font-family: 'General Sans', 'Schibsted Grotesk', sans-serif; } /* Beige theme override — applied via [data-lower-theme="beige"] on . Keep the user "white text on beige" while ensuring small/secondary text stays legible. */ html[data-lower-theme="beige"] .below-hero { background: #e6e1d6; color: #1a1408; } html[data-lower-theme="beige"] .launch-cards, html[data-lower-theme="beige"] .why-mookh, html[data-lower-theme="beige"] .faq { background: #e6e1d6; } html[data-lower-theme="beige"] .section-title, html[data-lower-theme="beige"] .why-copy h3, html[data-lower-theme="beige"] .why-copy p, html[data-lower-theme="beige"] .faq-head span, html[data-lower-theme="beige"] .faq-body p, html[data-lower-theme="beige"] .cta-sub, html[data-lower-theme="beige"] .cta .section-title { color: #1a1408; } html[data-lower-theme="beige"] .why-copy p, html[data-lower-theme="beige"] .faq-body p, html[data-lower-theme="beige"] .cta-sub { opacity: 0.78; } html[data-lower-theme="beige"] .why-kicker { color: rgba(26,20,8,0.72); } html[data-lower-theme="beige"] .section-eyebrow { color: rgba(26,20,8,0.55); } html[data-lower-theme="beige"] .why-tabs { background: rgba(26,20,8,0.08); } html[data-lower-theme="beige"] .why-tab { color: rgba(26,20,8,0.7); } html[data-lower-theme="beige"] .why-tab:hover { color: #1a1408; } html[data-lower-theme="beige"] .why-tab.on { background: #1a1408; color: #f2e09d; } html[data-lower-theme="beige"] .faq-row { background: rgba(26,20,8,0.06); } html[data-lower-theme="beige"] .faq-row:hover { background: rgba(26,20,8,0.1); } html[data-lower-theme="beige"] .faq-icon { color: #1a1408; } html[data-lower-theme="beige"] .cta { background: #d6cab3; } html[data-lower-theme="beige"] .cta-btn { background: #1a1408; color: #f2e09d; } .section-title { margin: 0; font-family: 'Cabinet Grotesk', sans-serif; font-weight: 500; font-size: 42px; line-height: 1.05; letter-spacing: -0.02em; text-align: center; color: #fff; } /* ========= Launch Cards ========= */ .launch-cards { padding: 40px 64px 60px; background: #060606; position: relative; } .launch-cards .section-title { font-size: 54px; line-height: 1.05; } .cards-stage { position: relative; margin-top: 64px; min-height: 360px; display: flex; align-items: center; justify-content: center; } .cards-row { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: nowrap; position: relative; z-index: 2; perspective: 1400px; } @keyframes cloud-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(12px); } } .cloud-drift { animation: cloud-drift 7s ease-in-out infinite; will-change: transform; } /* SLOT: handles entry + idle float (only animates the wrapper) */ .lc-slot { position: relative; width: 190px; height: 260px; /* Pre-entry pose */ opacity: 0; transform: translateY(120px) rotate(-22deg) scale(0.78); will-change: transform, opacity; } .cards-stage.played .lc-slot { animation: slot-enter 950ms cubic-bezier(.22,.9,.28,1.05) var(--delay) forwards, slot-float 5.5s ease-in-out calc(var(--delay) + 1100ms + var(--floatDelay)) infinite; } @keyframes slot-enter { 0% { opacity: 0; transform: translateY(120px) rotate(-22deg) scale(0.78); } 60% { opacity: 1; transform: translateY(calc(var(--y) - 12px)) rotate(calc(var(--rot) * 0.7)) scale(1.03); } 100% { opacity: 1; transform: translateY(var(--y)) rotate(var(--rot)) scale(1); } } @keyframes slot-float { 0%, 100% { transform: translateY(var(--y)) rotate(var(--rot)) scale(1); } 50% { transform: translateY(calc(var(--y) - 7px)) rotate(calc(var(--rot) + 0.6deg)) scale(1); } } /* CARD: handles hover lift only — never conflicts with slot animation */ .lc-card { position: relative; width: 100%; height: 100%; border-radius: 10px; padding: 14px 18px; box-shadow: -11px 4px 28px rgba(0,0,0,0.55), inset 0 1px 1px rgba(255,255,255,0.45); display: flex; flex-direction: column; justify-content: space-between; transform: translateZ(0); transition: transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 320ms ease, opacity 240ms ease, filter 240ms ease; will-change: transform; } .lc-slot.hover { z-index: 50; } .lc-slot.hover .lc-card { transform: translateY(-18px) scale(1.06); box-shadow: -18px 22px 54px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.55); } .lc-slot.dim .lc-card { /* no dimming — focused card comes forward via z-index + scale */ } .lc-card h3 { margin: 0; font-family: 'Cabinet Grotesk', sans-serif; font-weight: 500; font-size: 18px; line-height: 1.05; letter-spacing: -0.04em; } .lc-card p { margin: 0; font-family: 'General Sans', sans-serif; font-weight: 500; font-size: 11px; line-height: 1.25; letter-spacing: -0.02em; opacity: 0.75; } /* ========= Why Mookh ========= */ .why-mookh { padding: 56px 64px 100px; background: #060606; } .why-kicker { max-width: 760px; margin: 24px auto 36px; text-align: center; font-family: 'General Sans', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.5; letter-spacing: -0.01em; color: rgba(255,255,255,0.7); text-wrap: pretty; } .section-eyebrow { text-align: center; font-family: 'General Sans', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 14px; } .why-tabs { margin: 0 auto 0; width: max-content; background: rgba(255,255,255,0.06); border-radius: 20px; padding: 8px; display: flex; gap: 8px; } .why-tab { background: transparent; border: 0; color: rgba(255,255,255,0.75); font-family: 'General Sans', sans-serif; font-weight: 500; font-size: 16px; letter-spacing: -0.02em; padding: 8px 16px; border-radius: 12px; cursor: pointer; transition: background 240ms ease, color 240ms ease; } .why-tab:hover { color: #fff; } .why-tab.on { background: #f2e09d; color: #000; } .why-rows { margin-top: 44px; display: flex; flex-direction: column; gap: 32px; animation: fade-in 420ms ease; } @keyframes fade-in { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform: none;} } .why-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; } .why-row.flip .why-copy { order: 2; } .why-row.flip .why-mock-wrap { order: 1; } /* Screenshot rows: give the browser frame more room so the UI reads */ .why-row.shot-row { grid-template-columns: 0.78fr 1.22fr; gap: 56px; } .why-row.shot-row.flip { grid-template-columns: 1.22fr 0.78fr; } .why-row.shot-row .mockup-frame.discovery { max-width: 100%; } .why-copy h3 { margin: 12px 0 12px; font-family: 'General Sans', sans-serif; font-weight: 500; font-size: 24px; line-height: 1.35; letter-spacing: 0.01em; color: #fff; } .why-copy p { margin: 0; font-family: 'General Sans', sans-serif; font-weight: 500; font-size: 16px; line-height: 1.4; letter-spacing: -0.02em; color: #fff; opacity: 0.7; max-width: 520px; } .why-mock-wrap { display: flex; justify-content: center; } /* Mockup frame shared */ .mockup-frame { width: 100%; max-width: 560px; aspect-ratio: 634 / 280; border-radius: 20px; padding: 18px; display: flex; gap: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); overflow: hidden; position: relative; } .mock-left, .mock-right { flex: 1; background: #fff; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; color: #111; font-size: 10px; font-family: 'General Sans', sans-serif; } .mock-left { flex: 0.9; } .mock-chip { background: #f4f4f4; border-radius: 6px; padding: 5px 8px; font-size: 9px; color: #333; } .mock-chip.muted { color: #999; } .mock-item { font-size: 9px; padding: 3px 4px; color: #444; } .mock-head { display: flex; justify-content: space-between; gap: 8px; } .mock-h1 { font-weight: 600; font-size: 10px; flex:1; } .mock-h2 { font-size: 10px; } .mock-line { background: #f4f4f4; border-radius: 6px; padding: 5px 8px; font-size: 9px; } .mock-toggle { align-self: flex-end; width: 26px; height: 14px; background: #111; border-radius: 999px; position: relative; } .mock-toggle .knob { position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; background: #fff; border-radius: 999px; } .mock-promo { display: flex; gap: 6px; } .mock-promo input { flex: 1; border: 1px solid #e6e6e6; border-radius: 6px; padding: 4px 6px; font-size: 9px; outline: 0; } .mock-promo button { border: 0; background: #111; color: #fff; border-radius: 6px; padding: 4px 10px; font-size: 9px; cursor: pointer; } .mock-foot { display: flex; justify-content: space-between; font-size: 9px; color: #555; margin-top: auto; } /* Page mockup */ .mock-page { flex: 1; background: #fff; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; } /* Discovery mockup — real screenshot in a browser frame */ .mockup-frame.discovery { padding: 0; background: transparent !important; box-shadow: none; max-width: 720px; aspect-ratio: 16 / 11; } .mock-browser { flex: 1; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: #e8e2d6; box-shadow: 0 18px 50px rgba(0,0,0,0.35); border: 1px solid rgba(0,0,0,0.08); } .mock-browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #d8d2c6; flex-shrink: 0; } .mock-browser-bar .dot { width: 9px; height: 9px; border-radius: 999px; background: rgba(0,0,0,0.22); } .mock-browser-url { margin-left: 12px; flex: 1; background: rgba(255,255,255,0.7); border-radius: 999px; padding: 4px 12px; font-family: 'General Sans', sans-serif; font-size: 11px; color: #4a463d; letter-spacing: -0.01em; } .mock-browser-shot { flex: 1; overflow: hidden; position: relative; background: #e6e1d6; } .mock-browser-shot img { width: 100%; height: 100%; object-fit: contain; object-position: top center; display: block; } .mockup-frame.discovery.is-on .mock-browser-shot img { object-position: top center; } /* Mobile screenshot — centered "phone" with no browser chrome */ .mockup-frame.discovery.is-mobile { background: #e6e1d6 !important; border-radius: 20px; display: flex; align-items: center; justify-content: center; padding: 22px; aspect-ratio: auto; height: 540px; } .mockup-frame.discovery.is-mobile .mock-phone { height: 100%; display: flex; align-items: center; justify-content: center; } .mockup-frame.discovery.is-mobile .mock-phone img { height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 26px; box-shadow: 0 18px 50px rgba(0,0,0,0.35); display: block; } .mock-banner { height: 62px; border-radius: 6px; background: linear-gradient(120deg, #111 0%, #444 100%); } .mock-stack { display: flex; flex-direction: column; gap: 6px; } .mock-row { height: 8px; background: #eee; border-radius: 4px; } .mock-row.short { width: 40%; } .mock-row.med { width: 70%; } .mock-cta { align-self: flex-start; background: #111; color: #fff; font-size: 9px; border-radius: 6px; padding: 4px 8px; } /* Insights mockup */ .mock-insights { flex: 1; background: #fff; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; } .mock-stats { display: flex; gap: 16px; } .mock-stats > div { display: flex; flex-direction: column; } .mock-stats b { font-size: 13px; color: #111; } .mock-stats span { font-size: 9px; color: #777; } .mock-chart { flex: 1; display: flex; align-items: flex-end; gap: 6px; } .mock-chart > div { flex: 1; background: linear-gradient(#111, #444); border-radius: 4px 4px 0 0; min-height: 10px; } /* Payouts mockup */ .mock-payouts { flex: 1; background: #fff; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .mock-card-row { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 6px; background: #f5f5f5; font-size: 11px; } .mock-card-row b { color: #111; } .mock-card-row span { color: #777; font-size: 10px; } .mock-bar { margin-top: auto; background: #111; color: #fff; text-align: center; padding: 7px; border-radius: 6px; font-size: 10px; } /* ==== In-card animations ==== */ /* Content is visible by default; the is-on class adds an entrance animation as enhancement */ .mockup-frame.is-on .mock-anim-in { animation: mock-in 520ms cubic-bezier(.2,.8,.2,1) both; } @media (prefers-reduced-motion: reduce) { .mockup-frame.is-on .mock-anim-in { animation: none; } } @keyframes mock-in { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } /* Pulse dots in doors */ .pulse-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: middle; } .pulse-dot.diamond { background: #22c55e; transform: rotate(45deg); border-radius: 1px; animation: dot-pulse 2s ease-in-out infinite; } .pulse-dot.square { background: #d1d5db; animation: dot-pulse 2s ease-in-out 0.3s infinite; } .pulse-dot.full { background: #ef4444; border-radius: 999px; animation: dot-pulse 2s ease-in-out 0.6s infinite; } .pulse-dot.ring { width: 6px; height: 6px; border: 1.5px solid #9ca3af; border-radius: 999px; animation: dot-pulse 2s ease-in-out 0.9s infinite; } @keyframes dot-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* Counter flip */ .counter-num { display: inline-block; font-variant-numeric: tabular-nums; font-weight: 700; animation: count-bump 420ms ease; animation-iteration-count: 1; } .mockup-frame.is-on .counter-num { animation: count-bump 420ms ease infinite alternate; animation-duration: 1.4s; } @keyframes count-bump { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-2px); opacity: 0.85; } 100% { transform: translateY(0); opacity: 1; } } /* Toggle on/off */ .mock-toggle { transition: background 260ms ease; } .mock-toggle.on { background: #22c55e; } .mock-toggle.off { background: #d1d5db; } .mock-toggle .knob { transition: right 260ms cubic-bezier(.2,.8,.2,1), left 260ms cubic-bezier(.2,.8,.2,1); } .mock-toggle.on .knob { right: 2px; left: auto; } .mock-toggle.off .knob { right: auto; left: 2px; } /* Page mockup: banner shimmer + CTA pulse */ .mock-banner { position: relative; overflow: hidden; } .mock-banner .shimmer { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%); transform: translateX(-100%); } .mockup-frame.is-on .mock-banner .shimmer { animation: shimmer 2.6s ease-in-out 0.4s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 55% { transform: translateX(120%); } 100% { transform: translateX(120%); } } .pulse-cta { position: relative; } .mockup-frame.is-on .pulse-cta { animation: mock-in 520ms cubic-bezier(.2,.8,.2,1) both, cta-pulse 2.6s ease-in-out 0.8s infinite; } @keyframes cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(17,17,17,0.45); } 50% { box-shadow: 0 0 0 6px rgba(17,17,17,0); } } /* Chart bar pop */ .mockup-frame .mock-chart > div { transform-origin: bottom; } /* ========= FAQ ========= */ .faq { padding: 40px 64px 100px; background: #060606; } .faq-list { margin: 47px auto 0; max-width: 1384px; display: flex; flex-direction: column; gap: 12px; } .faq-row { background: rgb(22,22,22); border-radius: 20px; overflow: hidden; transition: background 240ms ease; } .faq-row:hover { background: rgb(30,30,30); } .faq-head { width: 100%; background: transparent; border: 0; display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; font-family: 'General Sans', sans-serif; font-weight: 500; font-size: 18px; letter-spacing: -0.02em; color: rgb(221,217,210); cursor: pointer; text-align: left; } .faq-icon { color: #fff; display: inline-flex; align-items: center; transition: transform 240ms ease; } .faq-row.open .faq-icon { transform: rotate(180deg); } .faq-body { overflow: hidden; transition: max-height 320ms cubic-bezier(.2,.8,.2,1); } .faq-body p { margin: 0; padding: 0 24px 20px 24px; color: rgba(255,255,255,0.7); font-size: 15px; line-height: 1.5; max-width: 900px; } /* ========= Explore Sellers Dashboard band ========= */ .explore-band { padding: 20px 64px 80px; background: #060606; } .explore-band-inner { max-width: 1384px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 40px 48px; border-radius: 24px; background: linear-gradient(120deg, #1a1408 0%, #2a2410 100%); border: 1px solid rgba(255,255,255,0.08); } .explore-band-copy h3 { margin: 0 0 8px; font-family: 'Cabinet Grotesk', sans-serif; font-weight: 500; font-size: 30px; letter-spacing: -0.02em; color: #fff; } .explore-band-copy p { margin: 0; font-family: 'General Sans', sans-serif; font-size: 17px; line-height: 1.45; color: rgba(255,255,255,0.7); max-width: 520px; text-wrap: pretty; } .explore-band-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; font-family: 'General Sans', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: #1a1408; background: #f2e09d; border: 0; border-radius: 999px; height: 52px; padding: 0 26px; cursor: pointer; white-space: nowrap; transition: transform 120ms ease, filter 160ms ease, box-shadow 160ms ease; } .explore-band-btn svg { width: 17px; height: 17px; } .explore-band-btn:hover { filter: brightness(1.04); box-shadow: 0 12px 30px rgba(0,0,0,0.3); } .explore-band-btn:active { transform: translateY(1px); } html[data-lower-theme="beige"] .explore-band { background: #e6e1d6; } html[data-lower-theme="beige"] .explore-band-inner { background: linear-gradient(120deg, #1a1408 0%, #33291a 100%); } /* ========= CTA ========= */ .cta { background: rgb(22,22,22); padding: 80px 64px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .cta-sub { max-width: 462px; margin: 0; opacity: 0.7; font-family: 'General Sans', sans-serif; font-size: 16px; line-height: 1.4; letter-spacing: -0.02em; color: #fff; } .cta-actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; } .cta-btn { display: inline-flex; align-items: center; gap: 10px; background: rgb(250,232,167); color: #000; text-decoration: none; border: 0; padding: 12px 22px; border-radius: 12px; font-family: 'General Sans', sans-serif; font-weight: 500; font-size: 17px; letter-spacing: -0.02em; cursor: pointer; transition: transform 140ms ease, filter 160ms ease; } .cta-btn svg { width: 20px; height: 20px; flex-shrink: 0; } .cta-btn-wa { background: #25D366; color: #06310f; } .cta-btn:hover { filter: brightness(1.05); } .cta-btn:active { transform: translateY(1px); } /* Responsive safety */ @media (max-width: 1100px) { .launch-cards, .why-mookh, .faq, .cta { padding-left: 32px; padding-right: 32px; } .explore-band { padding-left: 32px; padding-right: 32px; } .explore-band-inner { padding: 32px; gap: 24px; } .explore-band-btn { width: 100%; justify-content: center; } .cards-row { flex-wrap: wrap; justify-content: center; } .why-row { grid-template-columns: 1fr; gap: 24px; } .why-row.shot-row, .why-row.shot-row.flip { grid-template-columns: 1fr; } .why-row.flip .why-copy { order: 1; } .why-row.flip .why-mock-wrap { order: 2; } .section-title, .launch-cards .section-title { font-size: 34px; } .explore-band-copy h3 { font-size: 24px; } }