/* ===================================================================== Phone and small-tablet layer. Loaded only when the viewport is 980px or narrower (see the media attribute on the in index.html), so desktop never downloads or applies any of this. style.css already handles the basics (stacked layout, drawer menu); this file tunes the experience for touch and small screens. ===================================================================== */ html { -webkit-text-size-adjust: 100%; } /* no rubber-banding past the ends of the page, and nothing can poke out sideways. The clip goes on .app rather than html/body: overflow on the root would turn into a scroll box and break the sticky header. */ html { overflow-x: hidden; overscroll-behavior: none; } body { overflow-x: visible; overscroll-behavior: none; touch-action: pan-y pinch-zoom; } /* no sideways finger panning at all */ .app { overflow-x: clip; } .tier-cells, .tagged-row, .search-results { touch-action: auto; } /* these may scroll on their own */ /* ---------- header: must never be wider than the screen ---------- */ .topbar { padding: calc(8px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) 8px calc(10px + env(safe-area-inset-left, 0px)); gap: 8px; max-width: 100%; box-sizing: border-box; } .brand { min-width: 0; flex: 1 1 auto; gap: 8px; } .brand-emblem { height: 28px; flex: none; } .brand-text { min-width: 0; } .brand-text b { font-size: .72rem; letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; display: block; } .topbar-actions { flex: none; gap: 4px; } .icon-btn { width: 38px; height: 38px; } /* ---------- menu: full-screen sheet under the header, so it is always where the button is ---------- */ .sidenav { top: 0; bottom: 0; height: auto; max-height: none; align-self: stretch; padding-top: calc(var(--topbar-h, 61px) + 14px); z-index: 15; overscroll-behavior: contain; transition: opacity .3s var(--ease), transform .3s var(--ease); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } .layout { padding: 12px; gap: 12px; } .panel { padding: 14px; } /* ---------- touch targets ---------- */ .nav-link { padding: 13px 14px; } .chip { padding: 8px 13px; min-height: 36px; } .btn { min-height: 40px; } .filter-input { min-height: 40px; font-size: 16px; } /* 16px stops iOS zooming into the field */ /* ---------- no decorative motion on phones ---------- */ .card, .feed-item, .tier-row, .tile { animation: none; } .detail-art img.float, .detail-art .emblem, .card:hover .card-art img, .card:hover .card-art .emblem { animation: none; transform: none; } /* ---------- cards: one per row with the thumbnail beside the text ---------- */ @media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; gap: 10px; } .card { display: flex; flex-direction: row; align-items: stretch; } .card-art { width: 112px; min-width: 112px; aspect-ratio: 1 / 1; height: auto; border-radius: 0; } .card-body { padding: 10px 12px; justify-content: center; min-width: 0; } .card-body h3 { font-size: .86rem; letter-spacing: .05em; } .card-body .sub { font-size: .72rem; } .card-body .summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .78rem; margin-top: 4px; } .card-status { margin-top: 2px; } } /* ---------- home ---------- */ @media (max-width: 640px) { .stat-row { grid-template-columns: 1fr 1fr; gap: 8px; } .tile-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .tile p { display: none; } .hero p.lead { font-size: .95rem; } } /* ---------- card page ---------- */ @media (max-width: 640px) { .detail-art, .gallery { max-width: 100%; } .shots { grid-template-columns: 1fr 1fr; gap: 8px; } .trailer-grid { grid-template-columns: 1fr; } .tagged-tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } .pager .btn { max-width: 100%; width: 100%; justify-content: center; } } /* ---------- news feed ---------- */ @media (max-width: 640px) { .feed-item { padding: 12px; } .feed-body h3 { font-size: .95rem; } } /* ---------- search fills the screen ---------- */ @media (max-width: 640px) { .search-overlay { padding: 0; place-items: stretch; } .search-box { width: 100%; height: 100%; max-height: 100dvh; border-radius: 0; border: 0; display: flex; flex-direction: column; padding: 12px; } .search-box input { font-size: 16px; min-height: 44px; } .search-results { flex: 1; overflow: auto; max-height: none; } .search-results a { padding: 12px; } }