/* Storyleap — mobile layer. The pages ship with a correct viewport meta but no @media rules at all, so multi-column grids and fixed min-widths overflow on phones. These rules only apply below 640px and never touch the desktop layout. */ @media (max-width: 640px) { /* Nothing may push the page wider than the screen. */ html, body { max-width: 100%; overflow-x: hidden; } /* Collapse every multi-column grid to a single column. The inline styles the pages use are high specificity, hence !important here. */ [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* Fixed minimums are what actually force the horizontal scrollbar. */ [style*="min-width"] { min-width: 0 !important; } /* Form controls: full width, and 16px so iOS does not zoom on focus. */ input, select, textarea, button { max-width: 100% !important; box-sizing: border-box; } input, select, textarea { width: 100% !important; font-size: 16px !important; } /* Side-by-side rows become stacked. */ [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap !important; } /* Media and tables stay inside the viewport. */ img, svg, video, canvas, iframe { max-width: 100% !important; height: auto; } /* A wide table should scroll inside its own box, not move the page. */ table { display: block; width: 100%; overflow-x: auto; } /* Trim oversized desktop padding so content is not squeezed into a column. */ [style*="padding:48px"], [style*="padding: 48px"], [style*="padding:40px"], [style*="padding: 40px"] { padding: 20px !important; } /* Headings set in large fixed px shrink to fit. */ h1 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; } h2 { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; } } /* The curriculum handbook renders real A4 pages (210mm ≈ 794px). On a phone that is roughly twice the viewport width, which is why only half a page was visible. `zoom` is used rather than `transform: scale()` because zoom reflows the surrounding layout — a transform would leave a tall blank gap below each page where the untransformed box used to be. */ @media (max-width: 900px) { doc-page { zoom: 0.86; } } @media (max-width: 780px) { doc-page { zoom: 0.66; } } @media (max-width: 640px) { doc-page { zoom: 0.72; } /* The authored page padding is sized for print; trim it once scaled. */ doc-page .page { padding: 40px 34px !important; } } @media (max-width: 430px) { doc-page { zoom: 0.475; } } @media (max-width: 380px) { doc-page { zoom: 0.46; } } /* The landing page deliberately hides the "Storyleap" wordmark on small screens ([data-r="brandtext"]{display:none}), leaving just the cube logo. The brand name should stay visible, so bring it back and size it to fit beside the mark. */ @media (max-width: 640px) { [data-r="brandtext"] { display: inline-block !important; font-size: 1.05rem !important; letter-spacing: -0.02em; white-space: nowrap; } /* Give the wordmark room: trim nav gaps rather than let it wrap. */ [data-r="navlinks"] { gap: 1rem !important; } } @media (max-width: 430px) { [data-r="brandtext"] { font-size: 0.95rem !important; } } /* ------------------------------------------------------------ side menu Shown only where the page hides its own nav (below 1120px). */ /* All three live on , so they must be hidden by default — otherwise at desktop width they inherit no styles and render as loose content. */ #sl-menu-btn, #sl-drawer, #sl-backdrop { display: none; } @media (max-width: 1120px) { #sl-menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; position: fixed; top: max(env(safe-area-inset-top), 10px); right: 12px; z-index: 1000; width: 44px; height: 44px; /* 44px: a comfortable touch target */ padding: 10px; color: #FFF4E2; background: rgba(20, 18, 56, .72); backdrop-filter: blur(6px); border-radius: 12px; background: transparent; border: 0; cursor: pointer; } #sl-menu-btn .sl-bar { display: block; height: 2px; width: 22px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease; } body.sl-menu-open #sl-menu-btn .sl-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.sl-menu-open #sl-menu-btn .sl-bar:nth-child(2) { opacity: 0; } body.sl-menu-open #sl-menu-btn .sl-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } #sl-backdrop { display: block; position: fixed; inset: 0; z-index: 998; background: rgba(11, 10, 36, .6); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .25s ease; } body.sl-menu-open #sl-backdrop { opacity: 1; pointer-events: auto; } #sl-drawer { display: flex; position: fixed; top: 0; right: 0; bottom: 0; z-index: 999; width: min(82vw, 320px); background: #141238; color: #FFF4E2; box-shadow: -18px 0 46px rgba(0, 0, 0, .45); transform: translateX(100%); transition: transform .28s cubic-bezier(.22, 1, .36, 1); display: flex; flex-direction: column; padding: max(env(safe-area-inset-top), 14px) 0 max(env(safe-area-inset-bottom), 14px); overflow-y: auto; } body.sl-menu-open #sl-drawer { transform: none; } .sl-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 20px 16px; border-bottom: 1px solid rgba(255, 244, 226, .12); } .sl-drawer-title { font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; } .sl-close { background: none; border: 0; color: inherit; font-size: 30px; line-height: 1; cursor: pointer; width: 44px; height: 44px; } .sl-links { display: flex; flex-direction: column; padding: 8px 12px; } .sl-links a { display: block; padding: 15px 12px; border-radius: 10px; color: #FFF4E2 !important; font-size: 1rem; font-weight: 500; text-decoration: none; } .sl-links a:active { background: rgba(255, 244, 226, .09); } .sl-links .sl-cta { margin-top: 10px; text-align: center; font-weight: 700; background: #FFB020; color: #0B0A24 !important; } } @media (prefers-reduced-motion: reduce) { #sl-drawer, #sl-backdrop, #sl-menu-btn .sl-bar { transition: none !important; } } /* ------------------------------------------------- one page, full width doc-page lays its pages in a row; at a small zoom the page sat narrow and the next page showed in the leftover gap, which read as "half the book". Centre each page and clip the neighbour. */ @media (max-width: 640px) { doc-page { display: block; margin-inline: auto; overflow-x: hidden; } doc-page .page { margin-inline: auto !important; } } /* ---------------------------------------------- wrapped flex card rows The trial form lays programme and day cards in `display:flex;flex-wrap:wrap`. With no basis they squeezed four across and the labels broke mid-word. Two per row keeps every label on one line. */ @media (max-width: 640px) { [style*="flex-wrap: wrap"] > *, [style*="flex-wrap:wrap"] > * { flex: 1 1 44% !important; min-width: 0 !important; } /* Day chips are short — three fit comfortably. */ [style*="flex-wrap: wrap"] > [style*="text-align:center"] { flex-basis: 28% !important; } } /* The "sliver of the next page" was actually the second column of grids INSIDE each handbook page overflowing the scaled page box and being clipped by doc-page's overflow:hidden. The earlier [style*=grid-template-columns] rule sits outside doc-page's cascade for these, so target them within .page. */ @media (max-width: 640px) { doc-page .page [style*="grid-template-columns"], doc-page .page [style*="display:grid"], doc-page .page [style*="display: grid"] { grid-template-columns: 1fr !important; } doc-page .page * { max-width: 100% !important; } doc-page .page { overflow-x: hidden; } }