/* ============================================================================= MY SAINT STORY — MOBILE / SMALL-SCREEN OVERRIDES ============================================================================= Loaded AFTER desktop.css, so these rules win at their breakpoints thanks to source order. Everything here only ever narrows/stacks layout that desktop.css already defined — no new components are introduced. Breakpoints ----------- 960px — tablet/phone: hero stacks, steps go 2-up, nav links hide 560px — phone: base font shrinks, single-column grids, modal goes full-bleed ============================================================================= */ /* ----------------------------------------------------------------------------- 960px — TABLET & BELOW ----------------------------------------------------------------------------- */ @media (max-width: 960px){ /* Title-on-photo shadow scheme (see :root in desktop.css) reads worse at mobile's smaller headline size, so bump the shadow strength here without touching the colors. */ :root{ --shadow-title-lg:0 3px 22px rgba(20,40,70,.65), 0 1px 4px rgba(20,40,70,.6); --shadow-title-eyebrow:0 2px 10px rgba(20,40,70,.6), 0 1px 3px rgba(20,40,70,.55); --shadow-title-em:0 1px 3px rgba(255,255,255,.45); /* Book-stage nudge handles — mobile's OWN copy of desktop.css's stage/photo/ clip vars (§16 there). Kept separate on purpose: this section's crop/ position needs differ a lot between the stacked mobile layout and the side-by-side desktop one, so the two should always be tuned independently. --m-stage-x / --m-stage-y / --m-stage-scale : whole book group --m-photo-x / --m-photo-y : photo only --m-clip-x / --m-clip-y : clip only */ --m-stage-x:0px; --m-stage-y:0px; --m-stage-scale:1; --m-photo-x:70px; --m-photo-y:20px; --m-clip-x:40px; --m-clip-y:35px; /* Sizes — mobile's OWN values, never inherited from desktop's §8: --m-book-size : cap on the book/stage width --m-photo-size : paperclipped photo width --m-clip-size : clip width --m-anchor-right : right edge both photo and clip hang off, so moving one knob keeps the pair together --m-clip-offset : how far left of that anchor the clip sits --m-photo-top / --m-clip-top : vertical anchors for the pair These are the ONLY declarations of these names — the 560px block does not re-declare them, so editing here changes every mobile width. */ --m-book-size:340px; --m-photo-size:80px; --m-clip-size:26px; --m-anchor-right:20%; --m-clip-offset:22px; --m-photo-top:-10px; --m-clip-top:-33px; /* Same nudge pattern, carousel's own copy (mobile sizes/positions differ a lot from desktop's, so tune independently — see desktop.css §10b). Position nudges: */ --m-car-photo-x:1px; --m-car-photo-y:8px; --m-car-clip-x:-18px; --m-car-clip-y:9px; /* Sizes — mobile's OWN values, never inherited from desktop's §10b: --m-car-visible : how many covers fit across the viewport (drives each book's width, so this IS the book size knob) --m-car-gap : gap between covers --m-car-size : hard cap on one cover's width ("none" = off) --m-car-photo-size : paperclipped photo width, % of the cover --m-car-clip-size : clip width, % of the cover */ --m-car-visible:2.1; --m-car-gap:12px; --m-car-size:none; --m-car-photo-size:30%; --m-car-clip-size:10%; /* Section/element spacing toggles — mobile only. Change these instead of hunting through every rule below; each one drives a single gap. */ --m-sec-gap:64px; /* vertical padding around each full section (.sec-pad) */ --m-hero-el-gap:12px; /* space between hero photo / headline / copy blocks */ --m-steps-gap:26px; /* gap between how-it-works step cards */ --m-promise-gap:34px; /* gap between stacked promise-band items */ --m-foot-gap:40px; /* gap between footer columns */ --m-need-gap:14px; /* gap between "what you'll need" rows */ } /* Hero: photo on top, then headline, then copy — was a 2-column grid */ .hero-inner{grid-template-columns:1fr;row-gap:0;grid-template-areas:"photo" "top" "copy"} .hero-top{margin:var(--m-hero-el-gap) 0 12px} .hero-copy{padding:32px 34px} .book-stage{margin:0 auto;max-width:var(--m-book-size);padding-top:20px; transform:translate(var(--m-stage-x),var(--m-stage-y)) scale(var(--m-stage-scale))} .hero-photo{width:var(--m-photo-size);right:var(--m-anchor-right);top:var(--m-photo-top); transform:translate(var(--m-photo-x),var(--m-photo-y)) rotate(-4deg)} .hero-photo:hover{transform:translate(var(--m-photo-x),var(--m-photo-y)) rotate(0deg)} .hero-clip{width:var(--m-clip-size);right:calc(var(--m-anchor-right) + var(--m-clip-offset));top:var(--m-clip-top); transform:translate(var(--m-clip-x),var(--m-clip-y)) rotate(-8deg)} .book-tag{top:auto;bottom:18px;right:-4px} /* (The old .book-stage.reveal.in override lived here. The hero book group no longer carries .reveal — it fades in from CSS via .hero-in, which animates opacity only — so the .book-stage rule above is never overridden and the re-application is not needed.) */ /* Nav: links collapse (no mobile menu yet — brand + order button only) */ .nav-links{display:none} /* Section rhythm */ .sec-pad{padding:var(--m-sec-gap) 0} /* How-it-works: 3 steps, each with a screenshot/illustration above the title, read better stacked than squeezed 2-up at tablet width. */ .steps-3{grid-template-columns:1fr;gap:var(--m-steps-gap)} /* Promise band: 3 columns -> stacked */ .promise{grid-template-columns:1fr;gap:var(--m-promise-gap)} /* Footer: 3 columns -> 2 columns */ .foot-grid{grid-template-columns:1fr 1fr;gap:var(--m-foot-gap)} /* Create panel: 2-column need list -> stacked */ .need-list{grid-template-columns:1fr;gap:var(--m-need-gap)} /* Example-book reader: desktop's 584px iframe height is sized for the wide spread; on a narrow viewport the pages shrink to fit the width instead, leaving a tall empty gap below the book. Shrink the iframe to match. */ .book-embed iframe{height:320px} /* These two blurbs are desktop-only copy — too long for a phone screen next to the book itself. */ #exLede,#exCaption{display:none} /* The example/book section was carrying the same big desktop spacing (heading margin, section padding) that made sense next to the long blurb text above — now that the blurb is gone on mobile, tighten it way down so heading/book/next-section sit close together instead of leaving empty gaps. Before-book spacing (heading margin + section top-padding + embed top-margin) and after-book spacing (section bottom-padding) are tuned separately. */ #example .sec-head.center{margin-bottom:6px} #example{padding-top:7px;padding-bottom:4px} .book-embed{margin-top:5px} /* Book carousel: ~2.4 covers in frame while the strip drifts by itself. */ .book-carousel-sec{ --car-visible:var(--m-car-visible); --car-gap:var(--m-car-gap); --car-size:var(--m-car-size); --car-photo-size:var(--m-car-photo-size); --car-clip-size:var(--m-car-clip-size); padding:14px 0 4px} .carousel-lede{display:none} .carousel-track{padding:4px 0 10px} .carousel-rail>li{ flex:0 0 calc((100vw - 40px - (var(--car-visible) - 1) * var(--car-gap)) / var(--car-visible)); max-width:var(--car-size); } .carousel-name{font-size:.86rem;margin-top:7px} .carousel-photo{width:var(--car-photo-size); transform:translate(var(--m-car-photo-x),var(--m-car-photo-y)) rotate(-4deg)} .carousel-item:hover .carousel-photo{ transform:translate(var(--m-car-photo-x),var(--m-car-photo-y)) rotate(0deg)} .carousel-clip{width:var(--car-clip-size); transform:translate(var(--m-car-clip-x),var(--m-car-clip-y)) rotate(-8deg)} /* Edge-to-edge on mobile: break the book out of .wrap's side padding so it spans the full viewport width instead of sitting inset. */ .book-embed{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } .book-embed iframe{border-radius:0} } /* ----------------------------------------------------------------------------- 560px — PHONE ----------------------------------------------------------------------------- */ @media (max-width: 560px){ body{font-size:16px} .wrap{padding:0 20px} .hero-copy{padding:26px 22px} .sec-pad{padding:var(--m-sec-gap) 0} .steps{grid-template-columns:1fr} .nav-price{display:none} .foot-grid{grid-template-columns:1fr} .hero-trust{gap:14px} .create-panel{padding:32px 24px} /* "Meet " + carousel arrows can wrap awkwardly at phone width */ .ex-heading{gap:8px} .ex-nav svg{width:20px;height:20px} /* Buy popup goes full-bleed, no rounded corners, single-column form rows */ .modal-overlay{padding:0;align-items:stretch} .modal{width:100%;max-width:none;max-height:100vh;border-radius:0;justify-content:flex-start} .modal-head{padding:22px 20px 0} /* Short steps (name+birthday, empty photo drop) shouldn't stretch the CTA to the bottom of the screen — only grow/scroll when content actually needs it. */ .modal-body{padding:18px 20px;flex:0 1 auto;min-height:0} .modal-foot{padding:0 20px 20px} .modal-err{margin:0 20px 12px} .modal h3{font-size:1.45rem} .fld-row,.fld-row.thirds{grid-template-columns:1fr} /* NOTE: the hero book group's size/anchor knobs live ONCE, in the 960px block's :root above — edit them there and the change applies at every mobile width. Re-declaring them here would silently win at phone width and make those edits look like they do nothing. The phone-specific values this block used to force are kept below, commented out; uncomment only if the phone really needs to diverge. :root{ --m-photo-size:60px; --m-clip-size:22px; --m-anchor-right:6%; --m-clip-offset:18px; --m-photo-top:-2px; --m-clip-top:-24px; } */ .hero-video{border-radius:18px;margin-bottom:20px} .btn.btn-wide{padding:17px 22px;font-size:1.02rem} }