/* MOBILE / NARROW-VIEWPORT OVERRIDES — homepage only (index.html). * * Canvas unlock and the mobile nav are shared with every other page and live * in styles/responsive.css, which index.html loads just before this sheet. * What is left here is the homepage's own section reflow. * * Two strategies, picked per section: * 1. KEEP THE ART where the content is short enough to scale with it — * aspect-ratio holds the PNG's shape and every offset/size inside is * expressed in vw, so the composition scales linearly (hero frame, * "Buy a Gecko" bar, FAQ header, social bar). * 2. DROP THE ART where reflowed text can't live inside a fixed aspect — * the slab is rebuilt in CSS (.mobile panel look below: slab fill, ink * outline, dashed inner rule) and the box grows with its content * (about, quote, story, factions, flight path, FAQ rows). * * Loaded LAST in so plain (non-!important) rules beat main.css and * responsive.css. * * Palette sampled from the bar PNGs: slab #a294a0, ink #17111b. */ /* The desktop composition is pinned to a 1440 canvas, so ANY viewport under 1440 needs the reflow — below 1200 it merely broke more obviously. */ @media (max-width: 1439px) { /* Ghost "fade_out" duplicate titles are pinned at px offsets to art that is gone at this width. */ span.title:after, #faq_header > span:after { display: none !important; } /* ---------- hero frame (art kept, scaled in vw) ---------- */ #top_box, #top_box.home-page { width: 100% !important; min-height: 0 !important; max-height: none !important; aspect-ratio: 1599 / 1048; } #top_box > .col-12 { width: 100% !important; margin: 0 !important; } /* px insets of the 1440x945 desktop box, as percentages of the frame. */ #hero-stage { top: 16.9%; right: 5.6%; bottom: 10.6%; left: 5.6%; } /* hero_drift/hero_jitter translate by FIXED px (x ±6, y −4/+8, ±1 jitter) while the slot above scales with the frame — so the smaller the viewport, the further the video walks relative to its slot, and the starfield shows through at the edge. Oversize the drifting box by more than the maximum excursion; #hero-stage's overflow:hidden clips the bleed. */ #hero-drift { width: calc(100% + 32px); height: calc(100% + 32px); margin: -16px; } /* 1vw == 1440px-canvas px / 14.4 — the wordmark scales with the signboard. */ #top_box #branding, #top_box.home-page #branding.home-page { height: 10.1vw; width: 30.9vw; background-size: 30.9vw; margin-top: 1.6vw; margin-left: 6.6vw; } span.ggsg-text { font-size: 6.25vw; line-height: 5.2vw; margin-top: 3.3vw; text-shadow: 0.17vw 0.28vw 0 #33002244; } span#ggsg-text-left { left: 12.5vw; } span#ggsg-text-right { right: 9.7vw; } /* ---------- "Buy a Galactic Gecko" bar (art kept) ---------- */ div#medium_header { min-height: 0 !important; max-height: none !important; aspect-ratio: 1282 / 270; background-size: 100% auto; background-position: center; } /* Whole bar becomes the tap target instead of just the text. */ div#medium_header > a { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } div#medium_header span.title { position: static; top: auto; font-size: min(4.8vw, 40px); /* main.css sets a flat 10px tracking against a 90px face — proportional here. */ letter-spacing: 0.12em; line-height: 1.2; padding: 0 7%; } /* ---------- rebuilt slab panels ---------- */ div#about, div#quote, div#story, div#factions, div#flight_path { min-height: 0 !important; max-height: none !important; background-image: none !important; background-color: #a294a0; border: 2px solid #17111b; border-radius: 4px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); padding: 26px 20px; /* float_xy is a horizontal jiggle tuned for a floating art bar; on a full-bleed panel it just shivers against the screen edge. */ animation: none !important; } /* Dashed inner rule, quoting the drawn one on the bar PNGs. */ div#about::before, div#quote::before, div#story::before, div#factions::before, div#flight_path::before { content: ''; position: absolute; inset: 6px; border: 1px dashed rgba(23, 17, 27, 0.45); border-radius: 2px; pointer-events: none; } div#about span#about_wrapper, div#quote span#quote_wrapper, div#story span#story_wrapper, div#factions span#factions_wrapper, div#flight_path span#flight_path_wrapper { position: static; float: none; display: block; width: 100%; top: auto; left: auto; } div#about span.title, div#story span.title, div#flight_path span.title, div#factions span#factions_wrapper span.title { position: static; float: none; display: block; width: 100%; text-align: center; font-size: clamp(26px, 6vw, 48px); line-height: 1.1; margin-bottom: 16px; padding-top: 0; } div#about span.text, div#story span.text, div#flight_path span.text { position: static; display: block; width: 100%; top: auto; left: auto; padding-top: 0; text-align: left; font-size: clamp(15px, 2.6vw, 19px); line-height: 1.6; } div#flight_path span.text { text-align: center; } /* LEDs are pinned at px offsets to the bar art; nothing to sit on now. */ span.LED { display: none !important; } /* quote */ div#quote span#quote_wrapper span#quote { position: static; display: block; width: 100%; padding-top: 0; font-size: clamp(19px, 4vw, 30px); line-height: 1.35; } div#quote span#quote_author { position: static; display: block; width: 100%; top: auto; left: auto; margin-top: 14px; padding-top: 0; text-align: right; font-size: clamp(14px, 2.8vw, 20px); } /* factions */ span.faction_row { position: relative; float: none; display: block; width: 100%; margin-bottom: 34px; text-align: center; } span.faction_row:last-child { margin-bottom: 0; } span.faction_row img { float: none; width: clamp(110px, 26vw, 200px); height: clamp(110px, 26vw, 200px); } span.faction_row span.faction_title { position: static; display: block; width: 100%; left: auto; text-align: center; font-size: clamp(22px, 5vw, 32px); margin: 12px 0 8px; } span.faction_row .faction_description { position: static; display: block; left: auto; top: auto; text-align: left; font-size: clamp(15px, 2.6vw, 19px); line-height: 1.6; } /* ---------- FAQ ---------- */ div#faq { min-height: 0 !important; animation: none !important; } div#faq div#faq_header { min-height: 0 !important; max-height: none !important; aspect-ratio: 1282 / 580; background-size: 100% auto; background-position: center; } div#faq div#faq_header span.title { bottom: 9%; left: 0; width: 100%; text-align: center; font-size: 6.5vw; } ul#accordion { width: 100% !important; margin: 0 !important; } ul#accordion li, ul#accordion li.open { height: auto !important; background-image: none !important; background-color: #a294a0; border: 2px solid #17111b; border-radius: 4px; margin-bottom: 10px !important; } ul#accordion li span.label { position: static; display: block; margin: 0 !important; padding: 14px 44px 14px 16px; font-size: clamp(15px, 3.2vw, 22px); line-height: 1.35; } /* Affordance the bar art used to carry. */ ul#accordion li span.label::after { content: '▾'; position: absolute; right: 16px; top: 14px; } ul#accordion li.open span.label::after { content: '▴'; } ul#accordion li span.slider, ul#accordion li span.slider.open { position: static; top: auto; width: auto !important; height: auto !important; background-image: none !important; border-top: 1px dashed rgba(23, 17, 27, 0.45); } ul#accordion li span.slider span.description { position: static; display: block; width: auto !important; left: auto; top: auto; padding: 12px 16px 16px; font-size: clamp(14px, 2.6vw, 18px); line-height: 1.6; } /* ---------- footer ---------- social_bar is a 1282x220 PNG with the two icons pinned at left/right 35% of a 1440 canvas. Pin the aspect and centre the pair instead. */ div#social.top_banner { min-height: 0 !important; max-height: none !important; aspect-ratio: 1282 / 220; background-size: 100% auto; background-position: center; animation: none !important; } div#social span#social_wrapper { /* ponytail: the plank art spans y 12-181 of the 220px canvas, so inset to it and let the icons centre + clamp against the plank, not the canvas */ inset: 6% 0 18%; float: none; display: flex; align-items: center; justify-content: center; gap: 22vw; } div#social a#x, div#social a#discord { position: static; left: auto; right: auto; top: auto; transform: none; height: min(max(44px, 9vw), 100%); width: auto; aspect-ratio: 1; } div#social a#x svg, div#social a#discord svg { width: 58%; height: 58%; } }