/* Eph Cycle — the phone layer (≤430px). The design handoff wrote these overrides as attribute selectors against the prototype's inline styles (`[style*="padding:44px 0 32px"]`). Production can name things, so every rule below hangs off a class the markup carries. The values are the handoff's; only the selectors differ. Desktop is untouched: everything except the two back-to-top rules lives inside the media query. */ /* Back-to-top is a phone-only control, so it stays hidden at every width and only appears once the page has scrolled past 180px (js/ui.js puts the `scrolled` class on ). */ .to-top { display: none; } /* The hamburger replaces the nav link row, which only happens on a phone. */ .nav-menu-btn { display: none; } @media (max-width: 430px) { /* — page frame — */ /* Gutters: 40px → 16px. The wrappers keep their max-width for the desktop case, so only the padding moves. */ .page-wrap { padding-left: 16px !important; padding-right: 16px !important; } /* Nothing may exceed the viewport. The design tool bakes pixel widths into exported paragraphs ("width: 877px"); those get handed back to the flow. */ .page-wrap p, .page-wrap h1, .page-wrap h2, .page-wrap h3, .page-wrap section { width: auto !important; height: auto !important; max-width: 100% !important; } html, body { scrollbar-width: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; } body { overflow-x: clip; } /* — header — */ /* Sticky and transparent, so the page colour runs behind it. */ .nav { position: sticky; top: 0; z-index: 30; background: transparent; padding: 12px 16px !important; gap: 10px; } /* The bicycle mark goes; the wordmark alone holds the upper left. */ .nav-brand svg { display: none; } .nav-brand span { font-size: 17px !important; } /* The link row is replaced by the menu sheet. */ .nav-links { display: none !important; } .nav-menu-btn { display: inline-flex; } /* Signed in: avatar only, never the display name. */ .nav-name { display: none !important; } /* — page headers — */ /* The titles sit just under the header now that the link row is gone. */ .page-head { padding-top: 8px !important; } .hero-section { padding-top: 12px !important; } .profile-head { padding-top: 8px !important; } /* — home — */ /* Flat backdrop on a phone: no animated gradient, no parallax. */ .hero-bg-glow { background: #f1e6fa; animation: none; } /* The italic subhead holds one line at phone width. */ .hero-sub { white-space: nowrap; font-size: 3.5vw !important; } /* The "still part of the team" note centres in a fixed band. */ .team-band { height: 162px; box-sizing: border-box; display: flex; align-items: center; padding: 0 16px !important; } .team-note { padding: 0 !important; } .team-note h3 { margin-top: 0 !important; } .team-note p { margin-bottom: 0 !important; } /* — grids and media — */ /* 4-up grids become 2-up: the home stats row and the compose dialogs' photo thumbnails. */ .stats-row, .photo-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Grouped form fields stack. */ .form-pair, .form-trio { grid-template-columns: 1fr !important; } /* Masonry feeds run as a single column (css/site.css already does this at 860px; repeated here so the phone case is stated where it is read). */ .board-masonry { column-count: 1; } /* Embedded maps get a phone-friendly height. */ .map-embed { height: 300px !important; } /* — touch targets — */ /* 44px minimum on a phone; 16px input text so iOS does not zoom on focus. */ .btn { min-height: 44px; } .input { font-size: 16px !important; min-height: 46px; } textarea.input { min-height: 56px; } /* — cards — */ .card { padding: 16px !important; } /* The masonry boards zero the card's own padding so the photo can bleed; the rule above must not put it back. */ .card[style*="padding:0"] { padding: 0 !important; } .card-title { font-size: 19px !important; line-height: 1.25; } .card-meta { flex-wrap: wrap; row-gap: 6px; } /* — dialogs become bottom sheets — */ .dialog-backdrop { align-items: end !important; justify-items: stretch !important; padding: 0 !important; } .dialog { width: 100% !important; max-width: 100% !important; max-height: 94vh !important; overflow-y: auto !important; border-radius: 14px 14px 0 0 !important; padding: 14px 14px calc(12px + env(safe-area-inset-bottom)) !important; gap: 7px; } .dialog-title { font-size: 18px !important; } .dialog-body { font-size: 13px !important; } .dialog .field { gap: 3px; } .dialog .field > label { font-size: 11.5px; } .dialog .input { min-height: 38px; padding-top: 6px; padding-bottom: 6px; } .dialog textarea.input { min-height: 56px; } /* Helper and error lines under the fields. */ .dialog > p { font-size: 10.5px !important; } .dialog-actions { flex-wrap: wrap; gap: 8px; margin-top: 2px; } .dialog-actions .btn, .dialog-actions a.btn { flex: 1 1 140px; } /* — back to top — */ .scrolled .to-top { display: inline-flex; align-items: center; gap: 7px; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; min-height: 44px; padding: 0 14px; font-size: 14px; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-md); } /* — footer — */ /* Only the wordmark and the copyright line survive; the link row and the Invite/Log in pair are reachable from the menu sheet instead. */ .hide-mobile { display: none !important; } .site-footer > div { padding: 28px 16px 24px !important; } /* iOS rubber-band scrolling paints the canvas, and the canvas takes its colour from — not from whatever element happens to be at the bottom of the page. Pulling up past the footer therefore flashed the page's own colour instead of the footer's purple. Painting the last 2px of the html background purple gives the rubber band purple to stretch downwards, while the top of the gradient keeps the page colour for an overscroll at the other end. The 2px sliver sits behind the footer, which is that same purple, so nothing shows in normal scrolling. Only the two pages that actually end in a footer get this. */ html:has(body.page-home) { background: linear-gradient(to bottom, #f1e6fa calc(100% - 2px), var(--color-accent-900) calc(100% - 2px)); } html:has(body.page-faq) { background: linear-gradient(to bottom, #f3f2f2 calc(100% - 2px), var(--color-accent-900) calc(100% - 2px)); } }