/* ========================================= TOKENOMICS PAGE – RESPONSIVE OVERRIDES Applies only to Desktop ( > 991px ) uses Webflow defaults ========================================= */ /* ---------- 0. Global: tablet & below (≤ 991px) ---------- */ @media screen and (max-width: 991px) { .body-4, .body-4 .page-wrap, .body-4 section { height: auto !important; min-height: auto !important; overflow: visible !important; } /* Hero spacing + centering */ .body-4 .section-12 .hero { padding-top: 5rem; padding-bottom: 3rem; } .body-4 .hero-heading { font-size: 2.1rem; line-height: 1.2; text-align: center; } .body-4 .subheading--hero { max-width: 640px; margin: 1rem auto 0; text-align: center; font-size: 0.98rem; line-height: 1.6; } .body-4 .cta-button { margin-left: auto; margin-right: auto; } /* Governance title block */ .body-4 .section-23 .hero-header { text-align: center; } } /* ---------- 1. TABLET (768px – 991px) ---------- */ @media screen and (min-width: 768px) and (max-width: 991px) { /* 1.1 Two main token flip cards (EDIX / GOVX) */ .body-4 .section-23 .features-grid-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; row-gap: 0; align-items: stretch; justify-items: center; width: 100%; } .body-4 .section-23 .edix-token-card-wrapper, .body-4 .section-23 .gov-token-card-wrapper { width: 100%; max-width: 380px; } /* 1.2 Governance pie chart */ .body-4 .section-23 .div-block-26 { max-width: 700px; margin: 2.5rem auto 0; height: 300px; } .body-4 .section-23 .div-block-26 img { width: 100%; height: auto; display: block; } /* 1.3 EDIX utility stack next to GOVX background image */ .body-4 .climate-hunger-section .edix-token-utility { display: flex; align-items: flex-start; justify-content: center; gap: 2.5rem; padding: 3rem 0; } /* Left: GOVX background / ring image */ .body-4 .climate-hunger-section .div-block-29 { position: relative !important; flex: 0 0 40%; max-width: 360px; } .body-4 .climate-hunger-section .div-block-29 img { width: 100%; height: auto; display: block; } /* Right: vertical stack of EDIX utility cards */ .body-4 .climate-hunger-section .div-block-11 { position: relative !important; flex: 0 0 45%; max-width: 420px; } /* Each blue card row – icon + text in one line */ .body-4 .climate-hunger-section .div-block-11 > div { float: none !important; width: 100%; margin: 0; box-sizing: border-box; display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; } /* Slight overlap to mimic “stacked” feeling */ .body-4 .climate-hunger-section .div-block-11 > div + div { margin-top: 0rem; } /* Icon column */ .body-4 .climate-hunger-section .transaction-fuel-img { flex: 0 0 80px; max-width: 80px; margin: 0; width: auto; max-width: none; margin-left: -2rem; } .body-4 .climate-hunger-section .div-block-4-copy { flex: 0 0 80px; max-width: 80px; margin: 1rem; } /* Text wrapper – reset float/top/left so text stays inside card */ .body-4 .climate-hunger-section .did-you-know-content-wrap { float: none !important; width: auto; height: auto; margin: 0; position: static !important; top: auto; left: auto; padding-right: 0.5rem; } /* 1.4 “Next Generation Utilities” section */ .body-4 .content-section { padding-top: 3rem; padding-bottom: 10rem; height: auto !important; min-height: auto !important; overflow: visible !important; } /* Two clear columns: LEFT = heading + mini cards, RIGHT = EX image */ .body-4 .content-section .container-small { display: flex !important; flex-direction: row; align-items: flex-start; /* top-align both columns */ justify-content: space-between; /* push left/right apart */ column-gap: 1.5rem; row-gap: 0; } /* Reset any old positioning */ .body-4 .content-section .content-wrap, .body-4 .content-section .content-rap2 { margin: 0; position: static !important; } /* LEFT column */ .body-4 .content-section .content-wrap { flex: 0 0 55%; max-width: none; } .body-4 .content-section .div-block-39 { margin-bottom: 1.75rem; /* gap between title and cards */ } /* Mini cards: 1 per row on tablet (left column) */ .body-4 .content-section .cards-block { display: grid !important; grid-template-columns: 1fr; row-gap: 1rem; } .body-4 .content-section .cards-block > div { position: static !important; transform: none !important; left: auto !important; right: auto !important; margin: 0; width: 100%; max-width: 420px; justify-self: stretch; } /* RIGHT column (EX vertical card) */ .body-4 .content-section .content-rap2 { flex: 0 0 35%; display: flex; justify-content: center; flex-shrink: 0; /* don’t let it squish into the cards */ } .body-4 .content-section .content-image { max-width: 380px; /* pull it a bit in so it doesn’t feel too huge */ width: 90%; height: auto; display: block; } } /* ---------- 2. MOBILE (≤ 767px) – ONLY MOBILE CHANGES ---------- */ @media screen and (max-width: 767px) { /* Global safety on this page */ .body-4, .body-4 .page-wrap, .body-4 section, .body-4 .climate-hunger-section, .body-4 .content-section { height: auto !important; min-height: auto !important; overflow: visible !important; } /* Section spacing */ .body-4 .page-wrap > section, .body-4 .climate-hunger-section, .body-4 .content-section { padding-top: 2.25rem; padding-bottom: 2.5rem; } /* ================= HERO ================= */ .body-4 .section-12 .hero { padding-top: 3.5rem; padding-bottom: 2.5rem; text-align: center; } .body-4 .hero-heading { font-size: 1.7rem; line-height: 1.25; } .body-4 .subheading--hero { font-size: 0.95rem; line-height: 1.6; padding: 0 0.75rem; max-width: 90%; margin: 0.75rem auto 0; } .body-4 .cta-button { margin: 1.25rem auto 0; } /* ========== SECTION: TWO MAIN TOKEN CARDS (EDIX / GOVX) ========== */ .body-4 .section-23 { padding-top: 2.25rem; padding-bottom: 2.75rem; } /* Stack EDIX then GOVX, both centered and equal width */ .body-4 .section-23 .features-grid-2 { display: flex !important; flex-direction: column; /* EDIX on top, GOVX below */ align-items: center; justify-content: flex-start; gap: 1.75rem; width: 100%; max-width: 420px; margin: 0 auto; } .body-4 .section-23 .edix-token-card-wrapper, .body-4 .section-23 .gov-token-card-wrapper { width: 100%; max-width: 360px; height: 400px; /* preserve original card height */ display: flex; align-items: stretch; justify-content: center; position: relative; margin: 0 auto; } .body-4 .section-23 .edix-token, .body-4 .section-23 .gov-token { width: 100%; height: 100%; } /* Make card faces fill the wrapper cleanly */ .body-4 .section-23 .edix-card-front, .body-4 .section-23 .edix-card-back, .body-4 .section-23 .card-front, .body-4 .section-23 .gov-token-card-back { width: 100%; height: 100%; } .body-4 .section-23 .image-36, .body-4 .section-23 .image-35 { width: 100%; height: 100%; display: block; object-fit: cover; } /* Community-driven governance chart under the two cards */ .body-4 .section-23 .div-block-26 { max-width: 340px; width: 90%; margin: 1.75rem auto -30rem; } .body-4 .section-23 .div-block-26 img { width: 100%; height: auto; display: block; } /* ========== SECTION: EDIX UTILITY STACK (blue tall cards) ========== */ .body-4 .climate-hunger-section { position: relative; margin: 0 !important; overflow: visible !important; } .body-4 .climate-hunger-section .edix-token-utility { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; padding: 0; } /* GOVX big circle/background image */ .body-4 .climate-hunger-section .div-block-29 { width: 80%; max-width: 320px; margin: 0 auto; position: relative; top: auto; } .body-4 .climate-hunger-section .div-block-29 img { width: 100%; height: auto; display: block; } /* Stack of utility cards */ .body-4 .climate-hunger-section .div-block-11 { width: 90%; max-width: 360px; margin: 0 auto; position: relative; } /* ALLOW SHUFFLING */ .body-4 .climate-hunger-section .div-block-11 > div { float: none !important; width: 100%; margin-bottom: 0rem; box-sizing: border-box; opacity: 1 !important; display: flex !important; flex-direction: row; align-items: center; gap: 1rem; padding: 0rem; } /* Icon column – first + other cards */ .body-4 .climate-hunger-section .transaction-fuel-img, .body-4 .climate-hunger-section .div-block-4-copy { flex-shrink: 0; max-width: 72px; margin: 0; } /* Text wrapper – clear float/top/left so text doesn't drift out of card */ .body-4 .climate-hunger-section .did-you-know-content-wrap { float: none !important; width: auto; height: auto; margin: 0; position: static !important; top: auto; left: auto; } /* ========== SECTION: NEXT GENERATION UTILITIES ========== */ .body-4 .content-section { z-index: 2; overflow: visible !important; position: relative; /* Extra bottom padding to help push footer */ padding-bottom: 5rem !important; } /* Ensure Container is full width to hold content */ .body-4 .content-section .container-small { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: column; align-items: center; gap: 2.5rem; position: relative; margin-bottom: 1200px; } /* Text/Cards block */ .body-4 .content-section .content-wrap { order: 1 !important; width: 90%; max-width: 360px; margin: 0 auto; position: relative; z-index: 2; margin-top: 1200px; } /* Image (Bottom) */ .body-4 .content-section .content-rap2 { order: 2 !important; width: 90%; max-width: 360px; margin: 3rem auto 5rem !important; position: relative; z-index: 1; } .body-4 .content-section .div-block-39 { margin-bottom: 1.5rem; } /* mini cards container */ .body-4 .content-section .cards-block { display: flex !important; flex-direction: column; gap: 1rem; width: 100%; position: relative; } /* ALLOW SHUFFLING here too */ .body-4 .content-section .cards-block > div { width: 100%; margin: 0; opacity: 1 !important; } /* Mini-card widths – all share same sizing */ .body-4 .content-section .green-edix-card { width: 100%; max-width: 360px; margin: 0 auto; } .body-4 .content-section .green-edix-front, .body-4 .content-section .green-edix-back { min-width: 0; width: 90%; /* ✅ slightly smaller than full card width */ margin: 0 auto; /* ✅ keep it centered inside the card wrapper */ } /* EX vertical image under mini cards */ .body-4 .content-section .content-image { width: 100%; max-width: 280px; height: auto; display: block; margin: 0 auto; } /* ========== FOOTER (Explicit clearance) ========== */ .body-4 .footer-section1 { margin-top: 0 !important; padding-top: 3rem; position: relative; z-index: 10; clear: both; } } /* ---------- 3. VERY SMALL PHONES (≤ 479px) ---------- */ @media screen and (max-width: 479px) { .body-4 .edix-token-card-wrapper .image-36, .body-4 .gov-token-card-wrapper .image-35, .body-4 .edix-token-utility .div-block-11 > div { border-radius: 16px; } .image-18 { top: 11px !important; } .body-4 .climate-hunger-section .did-you-know-content-wrap .text-block-38 { color: #182031; font-family: Poppins, sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.25; margin: 0 0 0.35rem; width: 100%; } /* Paragraphs */ .body-4 .climate-hunger-section .did-you-know-content-wrap .text-block-39 { color: #182031; font-family: Poppins, sans-serif; font-size: 0.82rem; font-weight: 500; line-height: 1.45; margin: 0; width: 100%; } } /* ===== EDIX utility card text – MOBILE (≤ 767px) ===== */ @media screen and (max-width: 767px) { /* Titles */ .body-4 .climate-hunger-section .did-you-know-content-wrap .text-block-38 { color: #182031; font-family: Poppins, sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.25; margin: 0 0 0.35rem; width: 100%; } /* Paragraphs */ .body-4 .climate-hunger-section .did-you-know-content-wrap .text-block-39 { color: #182031; font-family: Poppins, sans-serif; font-size: 0.82rem; font-weight: 500; line-height: 1.45; margin: 0; width: 100%; } } /* ICON SIZE + ALIGNMENT – MOBILE (≤ 767px) */ @media screen and (max-width: 767px) { /* icon wrapper inside each blue card */ .body-4 .climate-hunger-section .transaction-fuel-img, .body-4 .climate-hunger-section .div-block-4-copy { flex: 0 0 56px; /* smaller than previous 68/72 */ max-width: 56px; height: 56px; margin: 0; display: flex; align-items: center; justify-content: center; /* center icon in box */ } /* actual icon image */ .body-4 .climate-hunger-section .transaction-fuel-img img, .body-4 .climate-hunger-section .div-block-4-copy img { width: 44px; height: 44px; max-width: 100%; object-fit: contain; display: block; } } /* ICON SIZE + ALIGNMENT – TABLET (768px–991px) */ @media screen and (min-width: 768px) and (max-width: 991px) { .body-4 .climate-hunger-section .transaction-fuel-img, .body-4 .climate-hunger-section .div-block-4-copy { flex: 0 0 64px; max-width: 64px; height: 64px; margin: 0; display: flex; align-items: center; justify-content: center; } .body-4 .climate-hunger-section .transaction-fuel-img img, .body-4 .climate-hunger-section .div-block-4-copy img { width: 50px; height: 50px; max-width: 100%; object-fit: contain; display: block; } } @media screen and (min-width: 768px) and (max-width: 991px) { .text-size-small.text-weight-bold { text-shadow: 0 1px 1px #000000b5; font-family: Poppins, sans-serif; font-size: 1rem; font-weight: 500; line-height: 2.5; position: relative; } } @media screen and (max-width: 479px) { .text-size-small.text-weight-bold { text-shadow: 0 1px 1px #000000b5; font-family: Poppins, sans-serif; font-size: 1rem; font-weight: 500; line-height: 2.5; position: relative; } }