/* FFF — mobile (≤767px) overrides replicating the Figma "Final" frame (#0:1571, 360px). * Loaded after app.css so these win; !important only where an inline style or a * compiled Tailwind class would otherwise outrank a plain override. */ @media (max-width: 767px) { /* Section gutters: Figma mobile frames pin content at x=20 (320px wide), but the compiled Tailwind uses px-10 (40px). Collapse it to 20px everywhere on mobile. */ .px-10 { padding-left: 20px; padding-right: 20px; } /* ============ HERO ============ */ .fff-hero { min-height: 0 !important; } .fff-hero .fff-hero-content { padding: 94px 20px 40px !important; } /* title moves to the top (above date/countdown), 55px — Figma #0:1671 */ .fff-hero .fff-hero-title { order: -1; margin-top: 0 !important; font-size: 55px !important; line-height: 0.8 !important; letter-spacing: -0.05em !important; } .fff-hero .fff-hero-grid { gap: 30px !important; } /* middle column (eyebrow) — 22px */ .fff-hero .fff-hero-grid > div:nth-child(2) p { font-size: 22px !important; } /* sponsor column becomes a row (logo left, "Kiti rėmėjai" right) — Figma #0:1646 */ .fff-hero .fff-hero-grid > div:nth-child(3) { flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; } .fff-hero .fff-hero-grid > div:nth-child(3) img { height: 32px !important; } /* in-flow FB/IG (horizontal circles) — Figma #0:1651 */ .fff-hero-social-m { display: flex; flex-direction: row; align-items: center; gap: 15px; } .fff-hero-social-m a { width: 40px; height: 40px; } /* Scroll-hint pill, bottom-right (Figma #0:1664) — dropped at the client's request; the markup stays put (Tailwind `hidden` keeps it out) so it can be switched back on by restoring `display: flex` here. */ .fff-scroll-hint { display: none !important; } /* ============ NAV (hamburger) ============ */ .fff-nav { padding-left: 20px; padding-right: 20px; } .fff-burger { display: inline-flex !important; } .fff-mobile-menu { display: none; flex-direction: column; gap: 4px; position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; padding: 12px; border-radius: 16px; background: rgba(2,10,40,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.4); } .fff-mobile-menu.open { display: flex; } .fff-mobile-menu a { display: flex; align-items: center; padding: 12px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.5); color: #fff; font-family: var(--font-montserrat), sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; } /* ============ STATS ("Kodėl verta?") — static, no 240vh zoom ============ */ [data-stats] { height: auto !important; } [data-stats] > div { position: static !important; height: auto !important; display: block !important; overflow: visible !important; padding-bottom: 90px !important; } [data-stats-content] { opacity: 1 !important; display: block !important; padding: 70px 20px 0 !important; } [data-stats-content] h2 { font-size: 40px !important; line-height: 0.8 !important; } [data-stats-content] .mt-14 { margin-top: 64px !important; } /* stat rows: value left, label right-aligned at Figma's staggered row widths (170/216/260/302px — #0:1674). space-between reproduces the diagonal so "dalyvių" (last row) hugs the right edge instead of a fixed gap. */ [data-stats-content] .fff-stat-row .flex.items-start { justify-content: space-between; } [data-stats-content] .fff-stat-row .flex.items-start span:first-child { font-size: 55px !important; line-height: 0.8 !important; } /* label text right-aligned; the + is a separate 24px marker anchored just past the label's right edge (Figma positions it 3px left / 21px right of the label) */ [data-stats-content] .fff-stat-row .flex.items-start span:last-child { position: relative; margin-left: 0 !important; } [data-stats-content] .fff-stat-row .flex.items-start span:last-child svg { position: absolute; top: 50%; right: -21px; transform: translateY(-50%); width: 24px; height: 24px; } [data-stats-content] .fff-stat-row:nth-child(1) .flex.items-start { max-width: 170px; } [data-stats-content] .fff-stat-row:nth-child(2) .flex.items-start { max-width: 216px; } [data-stats-content] .fff-stat-row:nth-child(3) .flex.items-start { max-width: 260px; } [data-stats-content] .fff-stat-row:nth-child(4) .flex.items-start { max-width: 302px; } /* video: 320×320 square, 42px below rows, 70px bottom — Figma #0:1716 */ [data-stats-video] { position: relative !important; /* anchors the absolute play button to the video (NOT the section) */ left: auto !important; top: auto !important; width: 320px !important; height: 320px !important; max-width: 100%; margin: 42px auto 0 !important; border-radius: 8px; } /* play button: white thin-bordered circle — Figma #0:1718 (not the gold 2px) */ [data-stats-video] button { width: 80px; height: 80px; border-width: 1px; border-color: rgba(255,255,255,0.5); background: transparent; } /* ============ SPEAKERS ============ */ .fff-speakers { padding-top: 70px; padding-bottom: 70px; } .fff-speakers .fff-speakers-title { font-size: 40px !important; } .fff-speakers .fff-speakers-grid { gap: 10px; } /* ============ CTA band ============ */ .fff-cta-band { padding-top: 70px; padding-bottom: 70px; } /* ============ ABOUT ============ */ .fff-about .fff-about-intro { font-size: 22px !important; } .fff-about .fff-about-row { grid-template-columns: 108px 1fr; gap: 0; } .fff-about .fff-about-row > span:last-child { max-width: none; } /* ============ AUDIENCE ============ */ .fff-audience .fff-audience-img { max-width: 313px; } .fff-audience .fff-audience-img img { height: 374px; } .fff-audience .fff-audience-title { font-size: 40px !important; } /* ============ PRICING ============ */ .fff-pricing .fff-pricing-head { flex-direction: column; align-items: flex-start; gap: 16px; } .fff-pricing .fff-pricing-title { font-size: 40px !important; } .fff-pricing .fff-pricing-note { align-self: flex-end; text-align: right; } .fff-pricing .fff-tier { min-width: 0; } .fff-pricing .fff-tier > div { min-height: 0 !important; } /* Card heights must match Figma mobile (343/348/363/390). Figma's spacing is tighter than the desktop port: feature gap 5px, head pb 10px, body 18/16. */ .fff-pricing .fff-tier-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-top: 20px; padding-bottom: 10px; } .fff-pricing .fff-price-wrap { text-align: right; } .fff-pricing .fff-name { font-size: 14px !important; } .fff-pricing .fff-price { font-size: 35px !important; line-height: 1 !important; margin-top: 0 !important; } .fff-pricing .fff-price-note { margin-top: 0 !important; font-size: 12px !important; } .fff-pricing .fff-body { padding-top: 18px; padding-bottom: 21px; } /* Figma subtitle is UPPERCASE with line-height 1.1 (not browser default 1.5). */ .fff-pricing .fff-body > span { text-transform: uppercase; line-height: 1.1; } .fff-pricing .fff-body ul { margin-top: 15px !important; gap: 5px !important; } /* CTA flows after the features (15px gap), NOT pinned to the card bottom — the empty space sits BELOW the CTA in Figma, not above it. */ .fff-pricing .fff-cta { margin-top: 15px !important; } /* "Populiariausias" strip — in-flow ABOVE the card (Figma #0:1971: 30px visible, the card starts below it), not an overlay. Adds to the card's total height. */ .fff-pricing .fff-badge { position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; transform: none !important; border-radius: 5px 5px 0 0 !important; padding: 0 !important; height: 30px; display: flex; align-items: center; justify-content: center; font-family: var(--font-open-sans), sans-serif; font-size: 14px !important; } /* The popular card's TOP corners must be square so the flush badge above flows straight into the card — the default rounded-[5px] top corners otherwise poke out under the badge. Bottom corners stay rounded. */ .fff-pricing .fff-tier.is-popular > div { border-radius: 0 0 5px 5px !important; } /* ============ SPONSORS ============ */ .fff-sponsors .fff-sponsors-featured { grid-template-columns: 1fr; } .fff-sponsors .fff-sponsors-featured > div { aspect-ratio: auto !important; height: 150px; } .fff-sponsors .fff-sponsors-logos { grid-template-columns: repeat(2, 1fr); gap: 10px; } .fff-sponsors .fff-sponsors-logos > div { height: 85px; } /* ============ LEARN ============ */ .fff-learn .fff-learn-title { font-size: 40px !important; } /* ============ FOOTER ============ */ .fff-footer-cols { grid-template-columns: 1fr; gap: 30px; } /* ============ RAIL (papildomas meniu) — bottom bar on mobile ============ */ /* Desktop hides the rail below xl (Tailwind `hidden xl:flex`) and pins it to the right edge; on phones it becomes a horizontal bar docked to the bottom. NOTE: Tailwind v4 compiles -translate-y-1/2 to the `translate` property (not `transform`), so that is the one that has to be cancelled here. */ [data-rail] { display: flex !important; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; translate: none !important; transform: none !important; align-items: center; justify-content: center; padding: 0 16px; z-index: 40; } [data-rail] > div { flex-direction: row !important; gap: 20px !important; padding: 12px 18px !important; } /* Phone panel: a normal card with a margin all round, vertically centred, that can never grow past the screen. The