/* manta: theme-mobile (agent-owned) — phone (<=767px) and tablet (768-1023px) layout corrections. * Pure CSS. Loads after the bundle CSS and after inject/theme.css. NOTE: Nuxt re-appends the /_nuxt/*.css * chunks to at hydration, so every property the bundle also sets carries !important here. */ /* ===================================================================================================== * A. <= 1023px (phone + tablet) * ===================================================================================================== */ @media (max-width: 1023px) { /* --- A1. header: the burger header is used up to 1023px (theme-header.css). Its unconditioned * ".header-main nav.header-nav-desktop{display:flex}" is written after its <=1023 "display:none" at equal * specificity, so the desktop menu still rendered next to the burger (768px: both navs, header 41px too * wide). Defensive hide; drop once theme-header.css orders those two rules. */ .header-main nav.header-nav-desktop { display: none !important; } /* --- A2. announcement bar, static (non-ticker) mode: >=768px the bundle keeps the message on one nowrap line * (922px) inside overflow:hidden, so both ends were cut ("...Swap is launching on Robinhood Chain. Contract * address: TBA, announced on X first. Fo"). Let the static item wrap and centre. The ticker (<=767px) wraps * items in li.ticker-item, so the direct-child selector leaves it alone. */ .header-announcement-bar .header-announcement-bar-inner > .header-announcement-bar-item { display: block !important; text-align: center; max-width: 100%; padding: 0 4.4rem; white-space: normal !important; } .header-announcement-bar .header-announcement-bar-inner > .header-announcement-bar-item .header-announcement-bar-text { white-space: normal !important; } /* as inline flow the link follows the sentence (2 lines, 76px < the bar's 10rem cap); the .6rem flex gap becomes a margin */ .header-announcement-bar .header-announcement-bar-inner > .header-announcement-bar-item .header-announcement-bar-link { margin-left: .6rem; } /* the link gets a 44px-tall hit box via ::before (its ::after is the donor's arrow). Padding + negative margin * was tried first: inside the baseline-aligned inline-flex item it grew the bar 58 -> 82px. */ .header-announcement-bar .header-announcement-bar-link { position: relative; } .header-announcement-bar .header-announcement-bar-link::before { content: ""; position: absolute; left: 0; right: 0; top: -1.2rem; bottom: -1.2rem; } /* --- A3. tap targets (donor: 38px blue CTAs, 21px text links). Blue CTAs grow 6px, text links get an * invisible hit box; the underline (::before) is re-pinned so nothing moves visually. */ .section-hero .section-hero-inner .section-hero-cta, .section-text-card .section-text-card-inner [class$="-cta"], .section-logoCards .section-logoCards-header [class$="-cta"], .section-wordCloud .section-wordCloud-header [class$="-cta"], .section-imgCards .section-imgCards-header [class$="-cta"] { padding-top: 1.3em !important; padding-bottom: 1.3em !important; } .section-text-card-side .cta-group .section-text-card-side-cta { padding: 1.2rem 0 !important; margin: -1.2rem 0 !important; } /* last child of a card with no background: keep the bottom padding inside the card (a negative bottom margin left * 7px of vertical scroll inside the overflow-x:auto carousel) */ .section-imgCards .section-imgCards-cards .section-imgCards-card .cta-group .section-imgCards-card-cta { padding: 1.2rem 0 !important; margin: -1.2rem 0 0 !important; } .section-logoCards .section-logoCards-cards .section-logoCards-card .cta-group .section-logoCards-card-cta { padding: 1.2rem 0 !important; margin: -1.2rem 0 calc(var(--gutter-large, 4rem) - 1.2rem) !important; } .section-text-card-side .cta-group .section-text-card-side-cta:before, .section-logoCards .section-logoCards-cards .section-logoCards-card .cta-group .section-logoCards-card-cta:before, .section-imgCards .section-imgCards-cards .section-imgCards-card .cta-group .section-imgCards-card-cta:before { bottom: calc(1.2rem - .0625em) !important; } .footer-main .footer-inner .footer-content .footer-links .footer-link-group-list { gap: .9rem !important; } .footer-main .footer-inner .footer-content .footer-links .footer-link a { display: inline-block; padding: .7rem 0 !important; margin: -.7rem 0; } } /* ===================================================================================================== * B. 768-1023px (tablet) * ===================================================================================================== */ @media (min-width: 768px) and (max-width: 1023px) { /* --- B1. footer made the document 809px wide at 768px (mobile Chrome then zooms the whole page out): * .footer-logo 65% + nowrap wordmark + .footer-content{min-width:35rem} cannot share 688px. */ .footer-main .footer-inner .footer-logo { width: auto !important; flex: 1 1 0; min-width: 0; padding-right: 3rem !important; } .footer-main .footer-inner .footer-content { width: auto !important; flex: 0 0 auto; min-width: 30rem !important; } .footer-logo::before { font-size: clamp(3.2rem, 6.4vw, 13rem) !important; } /* --- B2. product blocks (Routing / Dark Orders / Cashback / Token): white mono text sat on the bright cubes with * no panel between 768 and 1023 (theme.css only panels <=767, theme-desktop only >=1024). Same panel. */ .section-text-card-side .section-text-card-side-inner { position: relative; padding: 2.4rem 2.4rem 2.6rem; border-radius: 1.2rem; background: radial-gradient(120% 120% at 20% 20%, rgba(0,0,0,.62), rgba(0,0,0,.38) 60%, rgba(0,0,0,.18)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } } /* ===================================================================================================== * C. <= 767px (phone) * ===================================================================================================== */ @media (max-width: 767px) { /* --- C1. sections 2 & 3 ("Liquidity can't be private...", "One private route..."): the centred / bottom-aligned * text block sits on the cube. theme.css tried font-size:3rem (already the bundle's value at this width) and * padding-top:10vh (moves the ellipse off the text; no effect on the bottom-aligned block). Instead: * tighter block that clears the cube on 812px-tall phones, plus a soft vignette (same device as * theme-desktop.css uses >=1024) for 667px-tall phones where the heading has to overlap it. */ .section-text-card .section-text-card-inner { position: relative; isolation: isolate; padding-top: 0 !important; gap: 3rem !important; } .section-text-card[data-step-index="1"] { padding-bottom: 3rem !important; } .section-text-card .section-text-card-inner::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 50%; width: calc(100% + 6rem); height: calc(100% + 7rem); transform: translate(-50%, -50%); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.82) 0%, rgba(0,0,0,.62) 40%, rgba(0,0,0,.3) 70%, rgba(0,0,0,0) 100%); } .section-text-card .section-text-card-heading, .section-text-card .section-text-card-text { text-shadow: 0 .1rem .3rem rgba(0,0,0,.8), 0 0 1.6rem rgba(0,0,0,.7); } /* --- C2. footer wordmark: clamp() bottomed out at 3.2rem (193px in a 315px column) — the donor's SVG fills the * column on phones. 12vw = 45px at 375 (~270px), 38px at 320 (~232px); nowrap, no overflow either way. */ .footer-logo::before { font-size: clamp(3.2rem, 12vw, 13rem) !important; } } /* ===================================================================================================== * D. landscape phones (<= 1023px wide, <= 500px tall): 667x375 etc. * 100lvh story sections are 375px tall; the fixed header (bar + logo row) eats the top 52-109px. * ===================================================================================================== */ @media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) { /* hero: title started at y=76, under bar 58 + logo row (X / App buttons reach y=121). Now: title from 130, * 2 lines of 44px, CTA ends ~351 < 375 */ :root { --size-xxlarge: 4.4rem; } .section-hero .section-hero-inner { justify-content: flex-start !important; padding-top: 13rem !important; } .section-hero .section-hero-inner .section-hero-body { margin-top: 1.4em !important; } /* sections 2 & 3: block top was at y=18 / y=49 (nav row bottom 52) */ .section-text-card { padding-top: 6rem !important; } .section-text-card[data-step-index="1"] { padding-bottom: 2rem !important; } .section-text-card .section-text-card-inner { gap: 2rem !important; } .section-text-card .section-text-card-inner [class$="-text"] { max-width: 34em !important; } /* product blocks: 8-9 short mono lines made a 301px block in a 375px viewport; widen the column instead */ .section-text-card-side { padding-top: 5.5rem !important; padding-bottom: 2rem !important; } .section-text-card-side .section-text-card-side-inner { gap: 1.4rem !important; } .section-text-card-side .section-text-card-side-text { max-width: 34em !important; } /* carousels: 80vw x aspect-ratio .8 gave 534x667px cards on a 375px-tall screen */ .section-logoCards .section-logoCards-cards .section-logoCards-card { min-width: 46vw !important; max-width: 46vw !important; aspect-ratio: auto !important; } .section-imgCards .section-imgCards-cards > .section-imgCards-card { min-width: 46vw !important; width: 46vw !important; } }