/* ========================================================================== MOBILE-ONLY POLISH : 20percent.law homepage -------------------------------------------------------------------------- ISOLATION CONTRACT (why desktop and tablet cannot be touched): Query A: @media (max-width: 639.98px) 639.98px is one pixel under Tailwind's `sm:` breakpoint (640px). Every `sm:` / `md:` / `lg:` utility in this page is INACTIVE below 640px, so a rule in here can only ever override a BASE utility that phones already use. It is structurally incapable of changing a tablet or desktop render. Query B: @media (orientation: landscape) and (max-height: 480px) Landscape phones are 667-932px WIDE, so Query A misses them. They are all under 481px TALL. The shortest tablet in landscape is iPad mini at 744px tall. So max-height:480px + landscape = phones only, never a tablet. Query C: @media (max-width: 359.98px) Sub-360 hardware (iPhone SE 1st gen era). Deliberately placed LAST in this file: it carries equal specificity to Query A, so source order is what lets it win. Do not move it above Query A. Nothing here changes content, copy, images, links, or behaviour. Pure CSS: no Tailwind rebuild required (tailwind.css is pre-compiled). VERIFIED against a pixel-exact harness on 2026-08-07: portrait 430 / 393 / 390 / 375 / 360 / 344 / 320 -> all pass desktop+tablet 1440 / 1280 / 1180 / 1024 / 900 / 834 / 768 / 700 / 640 -> 0 of 508 elements moved or resized. Byte-identical geometry. ========================================================================== */ /* ========================================================================== A. PORTRAIT PHONES (<= 639.98px) ========================================================================== */ @media (max-width: 639.98px) { /* --------------------------------------------------------------- A1 [BLOCKER] Kill the page's horizontal scroll. The footer link row is a non-wrapping flex: 449px of links inside a 390px viewport, centred, so it bleeds off BOTH edges. First link sits at x=-29 (unreachable), last ends at x=419. Measured overflow: 9px @430 -> 29px @390 -> 44px @360 -> 64px @320. --------------------------------------------------------------- */ footer .mt-4.flex { flex-wrap: wrap; column-gap: 1.25rem; row-gap: .25rem; padding-inline: .25rem; } /* NOTE: an `html, body { overflow-x: hidden }` safety net was considered here and deliberately REJECTED. On html/body it does not merely suppress a scrollbar, it CLIPS the overflowing content and leaves it unreachable, because there is no scroll left to reach it with. This footer carries the attorney-advertising disclaimers and the bar number, so silently clipping is a worse failure than a visible scrollbar. The cause above is fixed and measured at 0px overflow across 320/344/360/375/390/393/430, so the net would only ever fire on a FUTURE regression, which is exactly the case where it should stay visible. */ /* --------------------------------------------------------------- A2 [BLOCKER] Nav CTA bursts out of the 56px bar at <=375px. "Free Case Review" wraps to 3 lines -> a 76px gold block spilling above and below a 56px navy bar. Hits iPhone SE/13 mini (375) and every mainstream Android (360). Values below are MEASURED, not guessed. The bar has to seat three groups (brand + EN|ES + CTA) on one 56px line, and the brand span must clear the EN|ES switcher. Verified clearance at 430/393/390/375/360/344/320 is 54/29/27/17/7/16/0 px, with the CTA right edge inside the viewport at all seven widths. --------------------------------------------------------------- */ nav > div { padding-left: 9px !important; padding-right: 9px !important; gap: 4px; } nav a[data-open-chat] { white-space: nowrap; font-size: 10.5px; line-height: 1; padding: 14px 9px; /* ~39px tall: as close to 44 as a 56px bar allows */ text-align: center; } /* Brand also wrapped to 2 lines at 360px; hold it on one line. `flex: none` + `min-width: auto` matter: with `min-width:0` flexbox shrinks this anchor BELOW its content, and the nowrap span then paints outside its box and overlaps the EN|ES switcher by 15px at 360. */ nav a.group { gap: 4px; flex: none; min-width: auto; } nav a.group > span { font-size: clamp(11.5px, 3.4vw, 15px); white-space: nowrap; } nav a.group svg { width: 24px; height: 24px; flex: none; } /* EN / ES were 35x28 and 34x28: under the 44px minimum, and adjacent. */ nav .items-center.text-sm.font-semibold > a { padding: 13px 3px; } } @media (max-width: 639.98px) { /* --------------------------------------------------------------- A3 [HIGH] Hero H1 loses the author's intended line breaks. "We Take 20%." needs 347px at 48px/900. Available is viewport-32: 390 -> 358 fits | 375 -> 343 FAILS | 360 -> 328 FAILS | 320 -> 288 FAILS So at <=375px it re-wraps to 4-5 lines and orphans "20%.": the single most important word on the page: onto a line of its own. Solved by scaling type to the measured fit, NOT by editing the markup. Derivation: width ~= 7.229 * font-size, so font <= (100vw-38)/7.229. --------------------------------------------------------------- */ /* Specificity note: Tailwind's `.text-5xl` is a CLASS (0,1,0) and outranks a bare `h1` (0,0,1), so the element selector alone is silently ignored. `#top + section h1` is (1,0,2) and wins without needing !important. */ #top + section h1 { font-size: clamp(33px, 13.2vw - 5px, 48px); line-height: 1.12; } /* --------------------------------------------------------------- A4 [HIGH] Fee tables hide the payoff column. Both tables are 426px/420px wide inside a 326px container: 23% and 22% is off-screen, and the hidden part is the green "You Keep: $6,500 more" column, i.e. the entire argument of the page. `overflow-x-auto` scrolls but paints NO affordance, so it reads as a 3-column table that simply ends. Cell padding is the culprit: 40px per cell x 4 = 160px of the 426. SCOPE NOTE: the two English tables carry `.fee-table`, but es/index.html has a THIRD comparison table ("Tu Veredicto") built as a plain `table.w-full.text-sm` with no such class. Scoping to `.fee-table` alone left it hiding 77px, including its "Tu Conservas" column, which is the same defect this whole rule exists to fix. Targeting the scroll container as well catches every comparison table on every page, present and future. --------------------------------------------------------------- */ .fee-table th, .fee-table td, .overflow-x-auto table th, .overflow-x-auto table td { padding-left: 6px; padding-right: 6px; padding-top: 12px; padding-bottom: 12px; font-size: 13px; line-height: 1.35; } .fee-table thead th, .overflow-x-auto table thead th { font-size: 12px; letter-spacing: -.01em; } /* A money table must never break inside a word. Without this the generic `overflow-wrap: break-word` below splits "$100,000" into "$100,00 / 0" and "Your Settlement" into "Your Settlemen / t". Auto layout + breaking only at spaces gives "Your / Settlement" and keeps every figure intact. */ .fee-table, .overflow-x-auto table { table-layout: auto; width: 100%; } .fee-table th, .fee-table td, .overflow-x-auto table th, .overflow-x-auto table td { overflow-wrap: normal; word-break: normal; hyphens: none; } /* ⛔ DO NOT give the payoff column a larger font-size than the other three. An earlier revision set the last column to 15px against 12px elsewhere, to keep the "You Keep" figure legible. Matt rejected it on sight: in a table whose whole job is comparing four numbers, different type sizes read as a rendering fault, and they quietly distort the comparison itself. Emphasis on that column comes from weight and colour, which the page already gives it (font-weight 800, #15803D on #F0FDF4). 13px uniform is the largest size at which BOTH tables still fit whole at 360px, which is the binding width. */ .fee-table tbody td:last-child, .overflow-x-auto table tbody td:last-child { font-size: 13px; } /* Safety net for <=320px, where 4 columns genuinely cannot fit: a right-edge fade that makes the scroll discoverable instead of invisible. */ .overflow-x-auto { -webkit-overflow-scrolling: touch; scrollbar-width: thin; } /* --------------------------------------------------------------- A5 [HIGH] Anchor jumps park the heading behind the fixed nav. Every section has scroll-margin-top:0 and html has scroll-padding-top: auto, while the nav is 57px and fixed. Tapping Contact/FAQ/Technology/ Referrals in the footer, or the hero CTA, hides the heading you asked for. --------------------------------------------------------------- */ section[id], div[id="top"] { scroll-margin-top: 68px; } /* --------------------------------------------------------------- A6 [HIGH] Tap targets under the 44px minimum. Referral consent boxes measured 13x13 and are REQUIRED fields; the SMS consent box is 16x16. (Labels wrap the inputs so the text is tappable: but the control is hard to hit and hard to read state from.) --------------------------------------------------------------- */ #referralForm input[type="checkbox"], #sms_consent { width: 22px; height: 22px; min-width: 22px; margin-top: 1px; } #referralForm input[type="checkbox"] { accent-color: #0A0F1E; } /* Grow the hit area without moving anything visually. */ #referralForm label.flex, label[for="sms_consent"] { padding-block: 6px; } /* Footer links were 32px tall; 14px of block padding takes the 16px line box to a full 44px row without altering the visible gaps. */ footer .mt-4.flex a { padding-block: 14px; } /* Social icons 40px -> 44px. */ footer .mt-3.flex a { width: 44px; height: 44px; } /* The bar-number block is `text-right`, which is correct on the desktop two-column row but wrong once the row stacks: the block shrinks to the width of "Indiana Bar No. 34393-49" and centres, so the shorter "Licensed 2017" hangs off its RIGHT edge with a ragged left. Left-align it below 640px so the two lines start on the same vertical. Doing this with `sm:text-right` in the HTML is not available: that utility is not in the compiled tailwind.css, so it would render as nothing and left-align the desktop footer too. */ footer .text-right.text-sm { text-align: left; } /* The phone and email links in the contact card are the highest-intent targets on the page for an injury firm and measured only 34px tall. */ #contact a[href^="tel:"], #contact a[href^="mailto:"] { display: inline-block; padding-block: 8px; } /* Chat send control was 38x38. */ #kil-send { width: 44px !important; height: 44px !important; } /* NOT changed, deliberately: inline links inside a sentence (the mailto in the FAQ/Technology prose, "SMS Terms" and "Privacy Policy" inside the consent paragraph, the disclaimer link in the footer). WCAG 2.5.8 exempts targets "in a sentence or block of text", and padding them out would wreck the line spacing of the paragraph they sit in. */ /* --------------------------------------------------------------- A7 [MEDIUM] Reclaim horizontal room inside cards. Section px-4 (16px) + card p-8 (32px) = 48px of gutter per side on a 390px screen: a quarter of the width is padding before any content. --------------------------------------------------------------- */ #referral-form, #contact .rounded-2xl, #referral .bg-navyLight { padding: 1.375rem 1.125rem; } #how .rounded-xl, #app .rounded-xl, #technology .rounded-xl, #fee .rounded-xl { padding: 1.25rem; } #trial .rounded-xl { padding: 1.125rem 1.25rem; } /* --------------------------------------------------------------- A8 [MEDIUM] Vertical rhythm. Every one of the 13 sections uses py-20 (80px top AND bottom): spacing drawn for a ~900px desktop viewport, applied unchanged to an 800px phone. The hero adds pt-20 + pb-24, so 176px of dead navy sits between the stats bar and the next heading. NOTE: this tightens rhythm; it does not meaningfully shorten the page (~600px off ~20,100px). The page is long because of copy, not padding. --------------------------------------------------------------- */ section { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; } #top + section { padding-top: 2.5rem !important; padding-bottom: 3rem !important; } #technology { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; } /* The stats bar sat 64px below the CTA. */ #top + section .max-w-3xl.mt-16 { margin-top: 2.25rem; } /* Headings: 30px is a lot of a 360px line. Tighten leading, not size, so hierarchy is unchanged. (`.text-3xl` also sets line-height, so this needs to outrank a class: hence `section h2`, which is (0,1,2).) */ section h2.text-3xl, section h2 { line-height: 1.15; } section > div > p.text-lg, section > div > p.text-center { line-height: 1.55; } /* --------------------------------------------------------------- A9 [MEDIUM] Stats bar reads ragged: the three labels are 1, 2 and 3 lines tall ("Fee: Always" vs "Years of Litigation Experience"), so the middle column's border-x runs past its neighbours and the bar looks unaligned. Equalise the label block and pull the dividers full-height. --------------------------------------------------------------- */ #top + section .grid.grid-cols-3 { gap: 0; align-items: stretch; } #top + section .grid.grid-cols-3 > div { padding-inline: 6px; } #top + section .grid.grid-cols-3 > div > div:first-child { font-size: 26px; line-height: 1.1; } #top + section .grid.grid-cols-3 > div > div:last-child { font-size: 11.5px; line-height: 1.3; margin-top: .3rem; } #top + section .max-w-3xl.mt-16 { padding: 1.125rem .5rem; } /* --------------------------------------------------------------- A10 [MEDIUM] Buttons that wrap into blobs. "Submit Referral: Get Co-Counsel Agreement Instantly" renders 3 lines / 116px tall at 18px. Drop to 15px so it reads as a button, not a panel. --------------------------------------------------------------- */ #referralForm button[type="submit"] { font-size: 15px; line-height: 1.3; padding: 15px 12px; } #contactForm button[type="submit"] { font-size: 16.5px; padding-block: 15px; } /* App Store / Google Play were 226px and 181px: ragged when they wrap. */ #app .flex.flex-wrap { flex-direction: column; align-items: stretch; } #app .flex.flex-wrap > a { text-align: center; } /* --------------------------------------------------------------- A11 [MEDIUM] Numbered process steps: a 56px circle + 24px gap leaves ~214px for text on a 360px screen. --------------------------------------------------------------- */ #process .flex.gap-6 { gap: .875rem; } #process .w-14.h-14 { width: 44px; height: 44px; } #process .w-14.h-14 span { font-size: 17px; } #process .pt-2 { padding-top: .125rem; } #referral .flex.items-start.gap-4 { gap: .625rem; } /* --------------------------------------------------------------- A12 [MEDIUM] Chat widget overruns narrow screens. The window is a hard 350px + 24px right offset = 374px minimum, so at 360px (and every phone below it) its left edge lands off-screen at -14px. The 60px bubble also owns x=276-336: the right 23% of a 360px screen , and EVERY primary CTA on the page extends past x=276. --------------------------------------------------------------- */ #kil-chat-window { width: calc(100vw - 24px) !important; max-width: 350px; height: min(70vh, 500px) !important; } #kil-chat-bubble { bottom: 14px !important; right: 14px !important; } #kil-chat-toggle { width: 52px !important; height: 52px !important; } /* Let the last CTA clear the bubble instead of sitting under it. */ #contactForm button[type="submit"], #referralForm button[type="submit"] { margin-bottom: 4px; } /* --------------------------------------------------------------- A13 [LOW] Finish. --------------------------------------------------------------- */ /* iOS was free to inflate type on rotate. */ html { -webkit-text-size-adjust: 100%; } /* Long unbroken strings (email, bar number) must never widen a row. */ body { overflow-wrap: break-word; } /* Grey tap flash over branded gold/navy looks like a rendering fault. */ a, button, summary, label { -webkit-tap-highlight-color: rgba(201,168,76,.22); } /* FAQ rows: make the whole 56px+ summary comfortable and the +/x obvious. */ #faq summary { padding: 16px 18px; gap: 14px; align-items: flex-start; } #faq summary > span { line-height: 1; padding-top: 2px; } #faq .px-6.pb-5 { padding: 0 18px 16px; } /* Blockquote: 24px of left padding on a 360px screen is a lot. */ #trial blockquote { padding-left: 1rem; } /* text-wrap:balance on a ~40-char line can leave a 1-word last line. */ .text-balance { text-wrap: pretty; } } /* ========================================================================== B. LANDSCAPE PHONES (667-932px wide, all <= 480px tall) -------------------------------------------------------------------------- These viewports are >=640px WIDE, so they receive the full sm:/md: desktop treatment: including py-20 (80px top AND bottom) on a 390px-TALL screen. Measured at 844x390: 136px of empty space before the eyebrow, and the subhead (384), body (456) and CTA (580) are ALL below the fold. The whole first screen is a headline floating in a void. ========================================================================== */ @media (orientation: landscape) and (max-height: 480px) { section { padding-top: 2rem !important; padding-bottom: 2rem !important; } #top + section { padding-top: 1.5rem !important; padding-bottom: 2rem !important; } /* 48-60px type costs 3 lines of a 390px-tall screen. */ h1 { font-size: 38px !important; line-height: 1.1; } h2 { font-size: 26px !important; line-height: 1.15; } /* Pull the supporting copy and the CTA above the fold. */ #top + section h1 { margin-bottom: .75rem; } #top + section p.text-xl { margin-bottom: 1rem; font-size: 17px; } #top + section p.text-gray-400 { margin-bottom: 1rem; } #top + section .max-w-3xl.mt-16 { margin-top: 1.5rem; padding-block: 1rem; } /* Heading-to-body gaps drawn for a tall screen. */ .mb-12 { margin-bottom: 1.5rem !important; } .mb-14 { margin-bottom: 1.75rem !important; } .mb-10 { margin-bottom: 1.25rem !important; } /* A 500px-tall chat window does not fit a 390px-tall screen. */ #kil-chat-window { height: calc(100vh - 88px) !important; } #kil-chat-bubble { bottom: 12px !important; right: 12px !important; } #kil-chat-toggle { width: 46px !important; height: 46px !important; } section[id], div[id="top"] { scroll-margin-top: 62px; } } /* --------------------------------------------------------------- A2b [BLOCKER] Sub-360px graceful degradation. Below 360px the three nav groups cannot share one line at legible type: even at 12px the row needs 325px of a 320px viewport. So the CTA is allowed to wrap again here, but with the line-height and padding tuned so TWO lines measure 32px and still sit inside the 56px bar. Measured at 320px: CTA 82x32, right edge 312 of 320. (iPhone SE 3rd gen is 375px; this tier is 2016-era hardware only.) --------------------------------------------------------------- */ @media (max-width: 359.98px) { nav > div { padding-left: 8px !important; padding-right: 8px !important; } nav a.group svg { width: 22px; height: 22px; } nav a[data-open-chat] { white-space: normal; line-height: 1.12; padding: 10px 8px; /* 32px on one line, 43px on two: both clear the 56px bar */ } /* The trial table ("Typical Trial Firm (40%)" + $100,000 figures) is the widest content on the page and still clips 37px at 320px on the tier-A sizing. 5px/11px is the measured point where BOTH tables fit whole. */ .fee-table th, .fee-table td, .overflow-x-auto table th, .overflow-x-auto table td { padding-left: 4px; padding-right: 4px; font-size: 11px; } .fee-table thead th, .overflow-x-auto table thead th { font-size: 10px; } /* Uniform here too, for the reason in tier A. 11px is the largest size at which both tables fit whole at 320px. */ .fee-table tbody td:last-child, .overflow-x-auto table tbody td:last-child { font-size: 11px; } }