/* ===================================================================== KPM homepage — compact phone layout Link on index.html ONLY, directly after styles.css: Bump ?v= when you change it. Everything sits inside phone-only media queries (640px and under), so tablet and desktop do not change. The header, footer, gutter and heading rules would also hit other pages if linked site-wide. Each numbered block matches one homepage section; delete a block to undo that change. ===================================================================== */ @media (max-width: 640px) { /* ---------- 0. Site-wide rhythm on the homepage ---------- */ main .wrap { padding-left: 16px; padding-right: 16px; } #recognition, #pros, #founder, #can-do, #programs, #results, #therapy, #app, #gear, #floor, #questions, #cta { padding-top: 44px; padding-bottom: 44px; } main section h2 { font-size: 30px; } main .sec-note { font-size: 14.5px; line-height: 1.5; margin-top: 10px; } main .head-row { gap: 6px 16px; margin-bottom: 18px; } main .man-eyebrow { margin-bottom: 12px; } /* ---------- 1. Header: slimmer bar ---------- */ header.nav .nav-inner { height: 62px; } header.nav .brand-logo { height: 30px; width: auto; } header.nav .nav-cta .btn-accent { min-height: 40px; padding: 0 14px; font-size: 11.5px; letter-spacing: .04em; } /* ---------- 2. Hero: fits one screen, stats 2 x 2 ---------- */ #top { padding-top: 36px; } #top h1 { font-size: 54px; } #top .hero-sub { font-size: 15px; line-height: 1.5; margin-top: 14px; } #top .hero-actions { gap: 10px; margin-top: 22px; } #top .hero-actions .btn { padding-top: 13px; padding-bottom: 13px; } #statrail { margin-top: 32px; grid-template-columns: 1fr 1fr; column-gap: 16px; } #statrail .stat { padding: 14px 0 12px; } #statrail .stat .k { font-size: 32px; } #statrail .stat .u { font-size: 11px; } #statrail .stat .cyc { font-size: 10px; } #top .statrail-note { font-size: 10px; line-height: 1.5; padding-bottom: 28px; } /* ---------- 3. Hometown Heroes: 2 cards per row ---------- */ #proof-top .split-col { padding: 44px 16px; } #proof-top .hh-grid { grid-template-columns: 1fr 1fr; gap: 10px; } #proof-top .hh-body { padding: 9px 10px 11px; } #proof-top .hh-name { font-size: 10px; } #proof-top .hh-accolade { font-size: 16px; line-height: 1; margin-top: 3px; } #proof-top .hh-school { font-size: 10.5px; margin-top: 4px; } #proof-top .hh-town { font-size: 9px; left: 7px; bottom: 7px; padding: 3px 7px; } /* Teams: 2 per row, league line hidden */ #proof-top .navy-photo { margin-top: 14px; } #proof-top .navy-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; margin-top: 6px; } #proof-top .navy-list li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 0; } #proof-top .navy-list .team-logo { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px; } #proof-top .navy-list .team-logo img { inset: 0; width: 100%; height: 100%; padding: 4px; } #proof-top .navy-list .team-logo i { display: none; } #proof-top .navy-list .team-txt { width: auto; } #proof-top .navy-list .team-txt b { font-size: 13px; line-height: 1.25; } #proof-top .navy-list .team-role { font-size: 11px; line-height: 1.35; margin-top: 3px; } #proof-top .navy-list .team-acc { display: none; } /* ---------- 4. Testimonials: photo left, quote right ---------- */ #recognition .pros-grid { gap: 12px; } #recognition .pro-card { display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; padding: 14px; } #recognition .pro-photo { display: contents; } #recognition .pro-photo::after { display: none; } #recognition .pro-photo .photo-slot { grid-column: 1; grid-row: 1 / span 2; width: 84px; height: 105px; border-radius: 6px; overflow: hidden; align-self: start; } #recognition .pro-photo .photo-slot img { width: 100%; height: 100%; object-fit: cover; object-position: top; } #recognition .pro-cred { display: none; } #recognition .pro-id { position: static; grid-column: 2; grid-row: 1; font-size: 15px; } #recognition .pro-id span { font-size: 11px; } #recognition .pro-body { grid-column: 2; grid-row: 2; padding: 6px 0 0; } #recognition .pro-mark { display: none; } #recognition .pro-body p { font-size: 14px; line-height: 1.5; } #recognition .pro-body p.pro-note { font-size: 11.5px; line-height: 1.45; padding-top: 6px; margin-top: 6px; } /* ---------- 5. The pros train here: 2 cards per row ---------- */ #pros .roster { grid-template-columns: 1fr 1fr; gap: 10px; } #pros .rtxt { padding: 9px 10px 11px; } #pros .rtxt .sport { font-size: 9px; } #pros .rtxt b { font-size: 16px; line-height: 1.1; } #pros .rtxt .acc { font-size: 11px; line-height: 1.35; margin-top: 3px; } #pros .rtxt .tie { font-size: 10px; margin-top: 6px; } /* ---------- 6. Founder: small photo beside the story ---------- */ #founder .founder-grid { grid-template-columns: 112px 1fr; gap: 16px; align-items: start; } #founder .founder-photo { width: 112px; height: 140px; } #founder .fdr-glow, #founder .founder-badge { display: none; } #founder .fastest { padding: 8px 12px; margin-bottom: 10px; } #founder .founder-grid h2 { font-size: 26px; } #founder .story { font-size: 14px; line-height: 1.5; margin-top: 10px; } #founder .founder-grid .sec-link { margin-top: 12px !important; } /* Career timeline: 5 logos in one row */ #founder .ftl { grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 28px; } #founder .ftl li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; text-align: center; } #founder .ftl .ftl-mark { width: 44px; height: 44px; } #founder .ftl b { font-size: 10px; line-height: 1.2; } #founder .ftl .ftl-sub { display: none; } /* College record: 4 numbers in one row, honours 2 per row */ #founder .fdr-rec { padding-top: 22px; } #founder .fdr-rec-top { gap: 10px; } #founder .fdr-nums { grid-template-columns: repeat(4, 1fr); margin-top: 14px; } #founder .fdr-nums li { padding: 10px 4px; } #founder .fdr-nums b { font-size: 22px; } #founder .fdr-nums span { font-size: 9.5px; line-height: 1.25; } #founder .fdr-nums i { font-size: 8.5px; } #founder .fdr-hon { grid-template-columns: 1fr 1fr; column-gap: 14px; margin-top: 10px; } #founder .fdr-hon li { padding: 10px 0; } #founder .fdr-hon b { font-size: 12px; line-height: 1.3; } #founder .fdr-hon span { font-size: 10.5px; line-height: 1.4; } /* ---------- 7. Coaches' bests: photo left, numbers right ---------- */ #can-do .cdo-head { margin-bottom: 18px; } #can-do .cdo-grid { gap: 12px; } #can-do .cdo-card { display: grid; grid-template-columns: 108px 1fr; grid-template-rows: auto 1fr; } #can-do .cdo-shot { display: contents; } #can-do .cdo-shot img { grid-column: 1; grid-row: 1 / span 2; width: 108px; height: 100%; min-height: 150px; object-fit: cover; object-position: top; aspect-ratio: auto; } #can-do .cdo-shot figcaption { position: static; grid-column: 2; grid-row: 1; padding: 12px 14px 2px; background: none; } #can-do .cdo-role { font-size: 9.5px; } #can-do .cdo-name { font-size: 18px; } #can-do .cdo-prs { grid-column: 2; grid-row: 2; padding: 2px 14px 10px; } #can-do .cdo-prs li { padding: 6px 0; gap: 10px; } #can-do .cdo-prs b { font-size: 18px; } #can-do .cdo-prs span { font-size: 11px; } #can-do .cdo-note { font-size: 11px; margin-top: 12px; } /* ---------- 8. Programs: 2 tiles per row ---------- */ #programs .pgm-grid { grid-template-columns: 1fr 1fr; gap: 10px; } #programs .pgm { min-height: 172px; padding: 14px 12px; } #programs .pgm-no, #programs .pgm-desc, #programs .pgm-entry { display: none; } #programs .pgm-who { font-size: 9.5px; } #programs .pgm h3 { font-size: 22px; line-height: 1; } #programs .pgm-go { font-size: 10.5px; margin-top: 8px; } #programs .pgm:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 130px; } /* ---------- 9. The Method: pillars 2 x 2 ---------- */ #method { padding-top: 52px; } #method .mtn-head h2 { font-size: 34px; } #method .mtn-lead { font-size: 14.5px; line-height: 1.5; margin-top: 12px; } #method .mtn-head { padding-bottom: 20px; } #method .mtn-head .sec-head { margin-bottom: 4px; } #method .mtn-lanes { grid-template-columns: 1fr 1fr; } #method .mtn-lane { min-height: 196px; padding: 14px 12px; } #method .mtn-no { font-size: 26px; } #method .mtn-inner h3 { font-size: 20px; line-height: 1; } #method .mtn-give { padding-top: 8px; } #method .mtn-lab { font-size: 9px; } #method .mtn-give ul { gap: 4px; } #method .mtn-give li { font-size: 11.5px; line-height: 1.3; } #method .acs { padding: 20px 18px; gap: 12px; margin-top: 20px; } #method .acs h3 { font-size: 26px; } #method .acs p { font-size: 14px; line-height: 1.5; } #method .mtn-foot { padding: 20px 16px 44px; } /* ---------- 10. Mid-page booking strip ---------- */ main .ctastrip { padding: 30px 0; } main .ctastrip .cs-inner { gap: 16px; } /* ---------- 11. Results ---------- */ #results .xgrid { gap: 12px; } #results .xgroup { margin-top: 10px; } /* Headline case (Damari): wide photo, numbers 2 x 2 */ #results .xform.feature { gap: 0; } #results .xform.feature .fmedia { min-height: 0; height: 190px; } #results .fbody { padding: 16px 14px; } #results .xform.feature .xstats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } #results .xform.feature .xstat { padding: 10px 10px 10px; } #results .xform.feature .xstat .val { font-size: 13px; } #results .xform.feature .xstat .aft { font-size: 20px; } /* College commits: photo left, one row per number */ #results .xform.xphoto { display: grid; grid-template-columns: 88px 1fr; } #results .xform.xphoto .xmedia { aspect-ratio: auto; height: 100%; min-height: 160px; } #results .xform.xphoto .xmedia .photo-slot, #results .xform.xphoto .xmedia img { height: 100%; } #results .xform.xphoto .xmedia img { object-fit: cover; } #results .xform.xphoto .xbody { padding: 12px 12px 12px 14px; } #results .xform.xphoto h3 { font-size: 20px; margin-top: 4px; } #results .xform.xphoto .badge-tag { font-size: 9px; } #results .xform.xphoto .xstats { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 8px; } #results .xform.xphoto .xstat { min-width: 0; width: auto; display: grid; grid-template-columns: 1fr auto; column-gap: 6px; align-items: center; padding: 7px 9px; } #results .xform.xphoto .xstat .lab { grid-column: 1; grid-row: 1; } #results .xform.xphoto .xstat .val { grid-column: 1; grid-row: 2; } #results .xform.xphoto .xstat .aft { font-size: 17px; } #results .xform.xphoto .xstat .dlt { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; } #results .xform.xphoto .xstat .dbar { display: none; } #results .xstat .lab { font-size: 9.5px; } #results .xstat .val { font-size: 13px; } #results .xstat .dlt { margin-top: 4px; } #results .xstat .dgain, #results .xstat .dpct { font-size: 10.5px; } #results .xform .note { font-size: 11px; margin-top: 8px; } #results .xform.coachform .xstats { grid-template-columns: 1fr 1fr; } /* ---------- 12. Photo strip: 4 photos in one row ---------- */ main .lifestrip .life-grid { grid-template-columns: repeat(4, 1fr); } main .lifestrip .life-cap { padding: 14px 16px 36px; } main .lifestrip .life-cap p { font-size: 13.5px; line-height: 1.5; } /* ---------- 13. Rehab: photos side by side, tighter steps ---------- */ #therapy .rx-head { margin-bottom: 0; } #therapy .rx-grid { gap: 14px; margin-top: 18px; } #therapy .rx-media { grid-template-columns: 1fr 1fr; gap: 8px; } #therapy .rx-shot, #therapy .rx-shot img { height: 120px; } #therapy .rx-shot img { width: 100%; object-fit: cover; } #therapy .rx-panel { padding: 20px 16px 16px; } #therapy .rx-partner { padding-bottom: 14px; } #therapy .rx-proto li { padding: 10px 0; column-gap: 12px; } #therapy .rx-proto b { font-size: 15px; } #therapy .rx-proto p { font-size: 13px; line-height: 1.45; } #therapy .rx-cta { margin-top: 10px; } #therapy .rx-note { font-size: 12px; line-height: 1.5; margin-top: 14px; } /* ---------- 14. App: features 2 per row, smaller screenshots ---------- */ #app .apx-grid { gap: 22px; } #app .apx-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; margin-top: 14px; } #app .apx-list li { padding: 10px 0 10px 16px; } #app .apx-list b { font-size: 13px; line-height: 1.3; } #app .apx-list span { font-size: 11.5px; line-height: 1.4; } #app .apx-actions { gap: 10px; margin-top: 16px; } #app .apx-device { justify-content: center; gap: 14px; height: auto; } #app .apx-ph, #app .apx-ph img { width: auto; height: 230px; } /* ---------- 15. Shoe: 2 per row, compact logo + shoe ---------- */ #gear .ant-grid { gap: 18px; } #gear .ant-why { font-size: 14px; line-height: 1.55; } #gear .ant-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; } #gear .ant-list li { padding: 10px 0 10px 16px; } #gear .ant-list b { font-size: 13px; line-height: 1.3; } #gear .ant-list span { font-size: 11px; line-height: 1.4; } #gear .ant-code { padding: 10px 14px; } #gear .ant-media { flex-direction: row; align-items: center; gap: 12px; } #gear .ant-mark { width: 92px; height: auto; flex: 0 0 92px; } #gear .ant-shoe img { width: 100%; height: auto; } #gear .ant-foot { padding-top: 22px; margin-top: 24px; } #gear .ant-stats { grid-template-columns: repeat(4, 1fr); gap: 10px; } #gear .ant-stats b { font-size: 22px; } #gear .ant-stats span { font-size: 10px; line-height: 1.3; } #gear .ant-note { font-size: 12px; line-height: 1.5; } /* ---------- 16. The floor: shorter photo ---------- */ #floor .floor-grid { gap: 18px; } #floor .floor-photo { aspect-ratio: 16 / 10; height: auto; } #floor .floor-txt h2 { font-size: 28px; } #floor .floor-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 16px; } /* ---------- 17. FAQ: tighter rows ---------- */ #questions .faq summary { padding-top: 16px; padding-bottom: 16px; font-size: 15px; } #questions .faq-more { gap: 12px; margin-top: 18px; } /* ---------- 18. Closing call to action ---------- */ #cta h2 { font-size: 40px; } #cta .cta-inner { gap: 12px; } /* ---------- 19. Footer: link columns side by side ---------- */ footer { padding: 44px 0 28px; } footer .foot-top { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding-bottom: 24px; } footer .foot-brand, footer .foot-col:last-child { grid-column: 1 / -1; } footer .foot-col h4 { margin-bottom: 6px; } footer .foot-col a { display: block; margin-bottom: 0; padding: 7px 0; min-height: 0; font-size: 13.5px; } footer .foot-col:last-child { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; } footer .foot-col:last-child > h4, footer .foot-col:last-child > .foot-hours, footer .foot-col:last-child > a:first-of-type { grid-column: 1 / -1; } footer .foot-col:last-child > .foot-hours { margin: 8px 0; } } /* ---------- Small phones ---------- */ @media (max-width: 380px) { #results .xform.xphoto { grid-template-columns: 76px 1fr; } } @media (max-width: 340px) { #results .xform.feature .xstats { grid-template-columns: 1fr; } #results .xform.xphoto { grid-template-columns: 1fr; } #results .xform.xphoto .xmedia { height: 170px; min-height: 0; } #results .xform.xphoto .xstat .aft { font-size: 16px; } }