/* ============================================================ MOBILE PASS — loaded last, after responsive.css. Goal: one logical vertical order, nothing clipped, nothing shrunk below a readable size on phones. ============================================================ */ /* --------------------------------------------------------------- 01 · HERO Desktop pins the section to 100vh and absolutely positions the copy. On phones that combination clipped the lead paragraph and let the copy sit under the telemetry rail. Here the hero grows with its content instead, and stays ≈ one screen tall. --------------------------------------------------------------- */ @media (max-width:760px){ .sec01{height:auto !important; min-height:100svh; overflow:visible !important} /* the stage alone fills the first screen, so the telemetry rail below it is only reached on scroll */ .sec01 .stage{height:auto !important; min-height:100svh !important; overflow:visible !important} /* nav always paints above the head */ .sec01 header{position:relative !important; z-index:6 !important} .sec01 .hero{flex:0 0 auto !important; overflow:visible !important} /* the head is the hero's backdrop, not a stacked block — big, centred, with the copy sitting over its lower half */ .sec01 .hero{flex:1 1 auto !important; display:flex !important; flex-direction:column !important; justify-content:flex-end !important; overflow:visible !important} .sec01 .headwrap{position:absolute !important; left:50% !important; top:47% !important; transform:translate(-50%,-50%) !important; width:min(132vw,560px) !important; height:auto !important; aspect-ratio:1/1 !important; margin:0 !important; z-index:1 !important} /* looser mask so the whole face reads instead of a cropped blob */ .sec01 .head,.sec01 .headreveal{ -webkit-mask-image:radial-gradient(60% 60% at 50% 46%,#000 62%,transparent 93%) !important; mask-image:radial-gradient(60% 60% at 50% 46%,#000 62%,transparent 93%) !important} .sec01 .herofoot{position:relative !important; z-index:4 !important; margin-top:0 !important; padding:0 20px 20px !important; gap:10px !important} /* scrim keeps the copy legible over the head */ .sec01 .herofoot::before{content:"" !important; position:absolute !important; inset:-56px -20px -1px !important; z-index:-1 !important; pointer-events:none !important; background:linear-gradient(180deg, rgba(4,4,8,0) 0%, rgba(4,4,8,.62) 34%, rgba(4,4,8,.9) 68%, rgba(4,4,8,.96) 100%) !important} .sec01 .lead-sub{font-size:1.24rem !important; line-height:1.2 !important; margin-bottom:10px !important} .sec01 .wordmark{font-size:12vw !important; margin-top:6px !important} /* flex-basis:46ch was inherited into a COLUMN flex container, so it became a 478px height reservation — that was the empty gap. */ .sec01 .lead-stack{flex:0 0 auto !important; max-width:40ch !important; margin-top:2px !important} .sec01 .lead-body{font-size:.95rem !important; line-height:1.5 !important} /* telemetry rail: 4 cramped columns → 2×2, labels no longer cut */ .sec01 .rail{grid-template-columns:1fr 1fr !important} .sec01 .rail .seg{padding:17px 12px !important; border-left:none !important; animation:none !important; opacity:1 !important} .sec01 .rail .seg:nth-child(2n){border-left:1px solid #161617 !important} .sec01 .rail .seg:nth-child(n+3){border-top:1px solid #161617 !important} .sec01 .rail .seg .lb{font-size:.7rem !important; letter-spacing:.16em !important} .sec01 .rail .seg .val{font-size:1.32rem !important} /* nav CTAs a notch smaller */ .sec01 .nav .iqf-btn{padding:10px 15px !important; font-size:10px !important; letter-spacing:.05em !important; min-height:0 !important} } /* --------------------------------------------------------------- 02 · CHOOSE THE SIDE Two 195px columns on a phone left both blocks cramped and the sentences clipped. Stacked full-width, each side reads properly. --------------------------------------------------------------- */ @media (max-width:560px){ .sec02 .versus{flex-direction:column !important; height:auto !important; max-height:none !important} .sec02 .side{flex:0 0 auto !important; width:100% !important; padding:36px 22px !important} .sec02 .side.burn{border-left:none !important; border-top:1px solid rgba(255,255,255,.16) !important} .sec02 .side .who{font-size:.66rem !important; letter-spacing:.24em !important} .sec02 .side .word{font-size:13.2vw !important} .sec02 .side .line{font-size:.95rem !important} /* pre-reveal slide becomes vertical, matching the stacked layout */ .sec02 .side.hold{transform:translateY(-18px) !important} .sec02 .side.burn{transform:translateY(18px) !important} .sec02.rv .side.hold,.sec02.rv .side.burn{transform:translateY(0) !important} /* seam label sits flat on the divider between the two blocks */ .sec02 .seam{left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important} .sec02 .seam .badge .lbl{transform:none !important; font-size:.58rem !important; letter-spacing:.22em !important; padding:7px 13px !important; border-radius:9px !important; background:linear-gradient(158deg,rgba(82,82,88,.94) 0%,rgba(40,40,46,.96) 46%,rgba(15,15,19,.98) 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.16), 0 5px 12px rgba(0,0,0,.5)} } /* --------------------------------------------------------------- 04 · CORE MINING SYSTEM The header stayed a 2-column grid at 165px per column. --------------------------------------------------------------- */ @media (max-width:760px){ /* flex column instead of fighting the desktop grid — guarantees full width */ .sec04 .s4-head{display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:22px !important; padding-top:26px !important; margin-bottom:38px !important} .sec04 .s4-head-l,.sec04 .s4-head-r{align-self:stretch !important; width:100% !important} .sec04 .headline{font-size:clamp(30px,8.4vw,40px) !important} .sec04 #s4CablesV2,.sec04 #mkCables{display:none !important} /* console tab label must never wrap, and sits against the left edge */ /* tighter gap between each tile and its OWN MINER / MINE IQF heading */ .sec04 .market .mk-item{gap:7px !important} /* console tab label must never wrap, and sits against the left edge */ .sec04 .cTab{white-space:nowrap !important; font-size:12px !important; letter-spacing:.02em !important; gap:7px !important; left:19px !important; transform:none !important} /* miners under the console: full-width row so each one centres on 25%/75%, which is exactly where sec04.css draws the two vertical cables */ .sec04 .s4-right .s4-miner-row{width:100% !important; justify-content:space-around !important; gap:0 !important; margin-top:72px !important} .sec04 .s4-miner-row .miner{width:clamp(70px,20vw,92px) !important} /* the light pulse in the two cables runs the other way */ .sec04 .s4-miner-row::before, .sec04 .s4-miner-row::after{animation-direction:reverse !important} /* left miner mirrors the right one instead of sitting flat */ .sec04 .s4-miner-row .miner.m1 img{transform:scaleX(-1) rotate(7deg) !important} /* miners had shrunk to 84px next to a full-width console */ .sec04 .s4-right{gap:0 !important} } @media (max-width:560px){ /* console log lines ran 70px past the screen edge */ .sec04 .cBody .log .note{display:none !important} .sec04 .cBody{height:186px !important} .sec04 .row,.sec04 .log{font-size:10px !important} .sec04 .mk-big{font-size:20px !important} } /* --------------------------------------------------------------- 04b · DIP REWARDS white-space:nowrap forced the title to 403px inside a 358px box, so "Twice" fell off the screen. --------------------------------------------------------------- */ @media (max-width:760px){ #dip .dip-title{white-space:normal !important; font-size:clamp(19px,5.9vw,27px) !important; line-height:1.3 !important; text-align:center !important} #dip .dip-head{gap:26px !important} /* the title belongs to the TRIGGER block below it, not to the copy above */ #dip .dip-head-bleed{margin-bottom:14px !important; padding-bottom:18px !important} /* straight seam under TRIGGER − responsive.css was rounding the ribbon */ #dip .dip-grid{border-radius:0 !important} #dip .dip-ribbon{border-radius:0 !important} /* the chart column sits flush under the seam above it */ #dip .dip-grid{gap:0 !important} #dip .dip-grid > div:last-of-type{padding-top:0 !important} #dip effective-mining-v7{display:block !important; margin:0 !important} /* single column: the divider moves from the side to underneath */ #dip .dip-grid > div:first-child{border-right:none !important; border-bottom:1px solid rgba(255,255,255,.16) !important} } @media (max-width:560px){ #dip .dip-ribbon{height:auto !important; min-height:68px !important; gap:14px !important; justify-content:space-between !important} #dip .dip-r1,#dip .dip-grid > div:first-child > div{padding-left:18px !important; padding-right:18px !important} } /* --------------------------------------------------------------- 07 · LIVE NETWORK — ledger table Heads used `auto 72px 108px` while rows used a different template, so "24h" / "Burned" never sat above their own numbers. One shared template for heads + rows, in both columns, right-aligned figures. --------------------------------------------------------------- */ @media (max-width:760px){ .sec07 .col-heads, .sec07 .ledger-body .row{grid-template-columns:minmax(0,1fr) 52px 70px !important; gap:0 8px !important; align-items:center !important} /* the desktop min-widths (72/108px) were forcing the tracks past the panel */ .sec07 .col-heads .h24,.sec07 .col-heads .hburn, .sec07 .ledger-body .row .d,.sec07 .ledger-body .row .b{min-width:0 !important; text-align:right !important; justify-self:stretch !important} .sec07 .col-heads .h24,.sec07 .col-heads .hburn{font-size:10.5px !important; letter-spacing:.1em !important} .sec07 .col-heads .hname{font-size:11.5px !important; letter-spacing:.16em !important} .sec07 .ledger-body .row .d,.sec07 .ledger-body .row .b{font-size:11.5px !important} .sec07 .col-heads .hname,.sec07 .ledger-body .row .name{ min-width:0 !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important} /* IQF Token / Mining metric cells were squeezed: 1px between label and value, 9px of vertical air. Give them room to breathe. */ .sec07 .mgrid .cell{padding:14px 20px 13px !important; gap:6px !important} .sec07 .strip{padding:9px 19px 8px !important} } /* --------------------------------------------------------------- 09 · FOOTER Wrapping left the contract chip stranded on its own line with the address cut to a few characters, and the two legal lines collided. Order on a phone: contract first (the thing people tap), then socials + whitepaper, then the legal lines centred. --------------------------------------------------------------- */ @media (max-width:640px){ .iqf-footer > div:last-of-type{padding:26px 16px !important; gap:16px !important} /* row 1 */ .iqf-footer > div:last-of-type > div:first-of-type{gap:14px !important; align-items:center !important} /* the contract chip: first, full width, address gets the room */ .iqf-footer > div:last-of-type > div:first-of-type > div:last-of-type{ order:-1 !important; width:100% !important; gap:10px !important; padding:8px 8px 8px 12px !important} .iqf-footer .addr{max-width:none !important; flex:1 1 auto !important; font-size:11px !important} /* the flex spacer is meaningless once things wrap; whitepaper goes hard right */ .iqf-footer > div:last-of-type > div:first-of-type > *:nth-child(3){display:none !important} .iqf-footer > div:last-of-type > div:first-of-type > *:nth-child(2){ margin-left:auto !important; margin-right:0 !important; font-size:13px !important; color:#ffffff !important} /* row 2 — legal, stacked and centred */ .iqf-footer > div:last-of-type > div:last-of-type{ flex-direction:column !important; align-items:center !important; text-align:center !important; gap:6px !important; padding-top:16px !important} .iqf-footer > div:last-of-type > div:last-of-type > span{font-size:10px !important; line-height:1.5 !important} } /* --------------------------------------------------------------- 04c · GET A MINER — stack and centre the three blocks --------------------------------------------------------------- */ @media (max-width:760px){ #get-miner .secCta > div:last-of-type > div{ flex-direction:column !important; align-items:center !important; flex-wrap:nowrap !important} /* flex:1 1 320px resolves as a 320px HEIGHT once the row becomes a column, leaving 242px of dead space under the paragraph */ #get-miner .secCta > div:last-of-type > div > div{flex:0 0 auto !important} /* Claim Now sits as far from the copy as the miner above the heading */ #get-miner .secCta > div:last-of-type > div > div:last-of-type{margin-top:0 !important} } /* --------------------------------------------------------------- 06b · ROBO ARMS — bigger arms, same distance from the coin (scale grows outward; the extra width runs off-screen) --------------------------------------------------------------- */ @media (max-width:760px){ [data-arm="left"]{transform:translateX(-19%) scale(1.5) !important} [data-arm="right"]{transform:translateX(19%) scale(1.5) !important} } /* --------------------------------------------------------------- 09 · FOOTER type colours --------------------------------------------------------------- */ @media (max-width:640px){ .iqf-footer > div:last-of-type > div:first-of-type > *:nth-child(2){color:#d5d6dc !important} .iqf-footer > div:last-of-type > div:last-of-type > span{color:#a8acb6 !important} } /* --------------------------------------------------------------- generic guards --------------------------------------------------------------- */ @media (max-width:760px){ .dao .panel__glow{max-width:100% !important} }