/* ============================================================ SHIG HOOPS - mobile + tablet only. EVERY rule lives inside a max-width media query, so desktop renders byte-for-byte as it did. Nothing here applies above 1024px. ⚠️ SELECTORS MUST NOT MATCH ON INLINE STYLE TEXT. The first version of this file used [style*="position:sticky"] and friends. That worked only while support.js was broken. The DesignCraft runtime REWRITES inline styles when it renders (it adds a space after each colon), so every one of those selectors stopped matching the moment the runtime was fixed - the stylesheet loaded and did precisely nothing. Use the data-shig hooks instead; they are stamped into the markup by scripts/... (see NOTES.md) and the runtime leaves attributes alone. data-shig="header" the sticky site header data-shig="marquee" the value-prop strip data-shig="motion" an infinite/long animation in style= data-shig="hovercard" an animation in style-hover=, which a TAP triggers on touch and can leave running data-shig="stickycol" a second sticky element in the content column Breakpoints <= 1024px tablet and below <= 640px phones ============================================================ */ /* ── TABLET AND BELOW ─────────────────────────────────────── */ @media (max-width: 1024px) { /* ── NO MOTION AT ALL below 1024px ────────────────────── Everything animated or transitioned is collapsed to an instant. This is the blanket rule; the specific rules further down handle the LAYOUT that motion was hiding (a stopped marquee still needs to wrap). Why duration and not `animation: none`: an entrance animation that runs from opacity 0 to opacity 1 would be stuck INVISIBLE if the animation were simply removed. Collapsing the duration lets it finish instantly, so the element lands in its final, visible state. Same reasoning for transitions, which on touch fire on tap and make cards jump under the finger. Desktop keeps every effect: nothing here applies above 1024px. */ *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; } html { scroll-behavior: auto !important; } /* ONE EXCEPTION, on request: the value strip keeps scrolling on mobile and tablet. It has to be re-granted explicitly, because the blanket rule above would otherwise collapse it to a single frame. Restated in full rather than relying on the inline style, since a duration of 1ms would still win. */ [data-shig="marquee"] { animation-name: marquee !important; animation-duration: 32s !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; will-change: transform !important; } /* The step indicator reads as a progress bar, and its connectors are empty 26x1px spans. Once the four step labels wrap on a narrow screen those dashes strand themselves mid-row and the whole thing looks broken. The labels and their state dots carry the meaning, so only the dashes go. */ [data-shig="stepline"] { display: none !important; } /* Motion off. Each of these is infinite or long-running: it drifts the layout, softens a hero, or burns battery on a phone. kenburns slow zoom on hero photos marquee 32s infinite horizontal crawl ballpulse infinite glow pulse scrollcue looping scroll hint pulsering infinite ring pulse on the funnel confirmation The page honours prefers-reduced-motion for some of these already; this makes it unconditional on small screens. NOT the rev* reveals (revUp/revLeft/revRight/revPop): those start at opacity 0 and animate in with fill "both", so killing them would leave the content permanently invisible. */ [data-shig="motion"] { animation: none !important; will-change: auto !important; } /* borderrun lives in style-hover, so the runtime applies it as an inline style on hover - and a TAP counts as hover on a touch screen, leaving the card mid-animation with a lifted transform. !important in a stylesheet beats a plain inline style, which is what makes this work. */ [data-shig="hovercard"] { animation: none !important; transform: none !important; } /* THE VALUE STRIP, kept scrolling but made thin and small. Structure that has to be preserved for the loop to be seamless: an outer width:max-content row that translates to -50%, holding TWO identical nowrap rows. Wrapping it (an earlier attempt, when the animation was off) is what made the band show a phrase cut off mid-word, so everything here keeps the single-line form and shrinks it instead. */ [data-shig="marqueebar"] { padding-top: 5px !important; padding-bottom: 5px !important; } [data-shig="marquee"] { width: max-content !important; flex-wrap: nowrap !important; } [data-shig="marquee"] > div { white-space: nowrap !important; flex-wrap: nowrap !important; width: auto !important; /* Small but still legible: 12px uppercase with tracking reads fine at arm's length, and line-height 1 is what actually makes the bar thin. */ font-size: 12px !important; line-height: 1 !important; letter-spacing: .1em !important; gap: 18px !important; padding-right: 18px !important; } /* Nothing should be able to push the page sideways. */ img, video, svg, iframe { max-width: 100% !important; } /* A second sticky element inside the content column fights the sticky header on a short viewport and can strand a block off-screen. */ [data-shig="stickycol"] { position: static !important; } /* Long unbroken strings (emails, URLs) must not widen the page. */ p, li, a, span, div { overflow-wrap: anywhere; } } /* ── PHONES ───────────────────────────────────────────────── */ @media (max-width: 640px) { /* Frosted glass is the most expensive thing on these pages: 24 backdrop-filter layers, one on the sticky header, repainting on every scroll frame. Phones show it as banding or dropped frames, so it becomes a solid panel. Kept on tablet, which handles it. */ [style*="backdrop-filter"], [data-shig="header"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } [data-shig="header"] { background: #0A0B0D !important; } /* Touch targets: anything tappable gets a finger-sized hit area. */ a[style*="padding"], button, [role="button"], input[type="submit"] { min-height: 44px; } /* ── Header ────────────────────────────────────────────── The desktop header is one flex row: logo, nav, Free Trial button. At 390px it wrapped into a ragged three-line block with CONTACT orphaned on its own line next to the logo. Reflowed into two deliberate rows: logo left and button right, then the nav centred underneath at a smaller size so all four links sit on one line. Same markup, no JavaScript, no hamburger to mis-tap. */ [data-shig="header"] > div { row-gap: 0 !important; } /* Do NOT reorder the logo. The funnel pages use the same header shell with two children (logo, then the mailto), so giving a[aria-label] an order pushed the LOGO behind the email address. Ordering the nav alone is enough: with the nav at order 3 and everything else at the default 0, the DOM order (logo, nav, button) renders as logo, button, then nav on its own row. */ [data-shig="header"] > div > div { order: 2; margin-left: auto !important; } [data-shig="header"] nav { order: 3; flex: 1 1 100% !important; justify-content: center !important; gap: 15px !important; margin-top: 10px; padding-top: 9px; border-top: 1px solid #1B1E24; } [data-shig="header"] nav a { font-size: 11.5px !important; letter-spacing: .07em !important; padding: 2px 0 !important; } /* ── Form controls ─────────────────────────────────────── An carries an intrinsic width of about 20 characters and none of these are width:100%. Inside a grid narrower than that, the field runs past the edge of its card instead of shrinking: the CVC box on the payment step was cut off by the screen edge and the ZIP box sat ragged. min-width:0 is the other half, because a grid item will not shrink below its content size without it. */ input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100% !important; min-width: 0 !important; } label { min-width: 0; } /* ── The home page, looked at rather than assumed ────── Everything below was found by rendering the live page at a true 390px and reading down all 11,000 pixels of it. */ /* 1. THE VERTICAL RULES. The philosophy section is a centred timeline on desktop, with a faint spine and a blue progress spine at left:50%. On a phone the layout is a single column but the spines stay at 50%, so two vertical lines run straight down the middle THROUGH the text for several screens. Purely decorative, so they go. */ [data-shig="vrule"] { display: none !important; } /* Same for the scroll-cue tick under the hero: once its animation is off it is just a stray 1px mark. Note the DIV: the hero PHOTO also carries data-shig="motion" (it is the kenburns image), and a selector without the element name blanked the entire hero. */ [data-shig="hero"] div[data-shig="motion"] { display: none !important; } /* 2. THE HERO CROP. The photo's subject sits low in the frame, so a phone-shaped crop shows mostly empty gym ceiling above the headline. Only the focal point moves; the height is left alone, because a hero measured in vh is already the right height on a real phone. */ [data-shig="hero"] img { object-position: center 40% !important; } /* 2b. THE HERO EYEBROW. "Hacienda Heights, CA - Ages 8-18 - 1-on-1" at 12px with .22em tracking is far too wide for 390px, and the line breaks inside "1-ON-1" leaving "ON-1" orphaned under a floating dot. Tighter tracking and a slightly smaller size fit it on one line. */ [data-shig="eyebrow"] { font-size: 10.5px !important; letter-spacing: .05em !important; } /* 3. THE VALUE STRIP on a phone: smaller again, and the diamond separators stay (they are what keeps the items apart while it scrolls as one line; they only looked like stray marks back when the strip was wrapped and static). */ [data-shig="marquee"] > div { font-size: 11px !important; letter-spacing: .09em !important; gap: 14px !important; padding-right: 14px !important; } /* 4. THE COMPARISON TABLE. Three columns (measure, blocked drilling, representative practice) collapsed to one column loses the mapping between a row and its two values: you get nine unlabelled statements in a vertical list. Keep the columns and let the table be swiped instead. */ [data-shig="tablewrap"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } [data-shig="tablegrid"] { min-width: 540px; grid-template-columns: 1.1fr 1fr 1fr !important; } /* 5. THE ONE-HOUR TIMELINE. An auto-fit grid with a 150px minimum lands on two ~175px columns at 390px, far too narrow for a heading plus a sentence. */ [data-shig="onehour"] { grid-template-columns: 1fr !important; } /* 6. THE PRICING ROWS. Plan name and the MOST CHOSEN badge share a flex row, so at 390px "COMMITTED" broke across two lines mid-word. Let the badge drop to its own line instead of squeezing the name. */ [data-shig="planname"] { flex-wrap: wrap !important; } }