/* ==================================================================
Collector's Key — Mobile Shell
==================================================================
App-shell layer for screens at or below 640px. Adds:
• Persistent bottom-tab nav on "app" pages (Collection / Albums /
+ FAB / Hunt / Me) so users have one-thumb access to the daily
loop. Body must carry `has-bottom-nav` for it to render — set
in templates/tpl_collectorskey_b/index.php based on the active
URL path.
• Body padding so content scrolls clear of the fixed bottom nav,
with iOS safe-area-inset compensation.
• Coin-page header polish: long series titles ellipsis instead
of pushing the prev/next arrows off-screen; prev/next links
hit 44×44 touch targets per WCAG.
• Hooks (.ck-bsheet, .ck-bsheet-handle) for the bottom-sheet
primitive used in Phase 2 to replace right-drawer modals.
Everything is gated under `@media (max-width: 640px)` so desktop
layout is untouched. Themed via the existing template tokens
(--brand, --brand2, --card, --line, --muted, --text) so dark mode
inherits automatically.
Mounted in index.php via after the rest
of the template CSS so its rules win on cascade.
================================================================== */
/* ── Desktop default: hide every mobile-shell element ───────────────
Every shell component (.ck-bnav, .ck-fab-backdrop, .ck-fab-sheet)
ships its display rules inside the @media (max-width: 640px) block
below, which means desktop has no display rule at all and the raw
HTML falls back to native block layout — which is why the bottom
nav was leaking into desktop footers as plain text links. Force-
hide here, then the @media block selectively re-shows on mobile. */
.ck-bnav,
.ck-fab-backdrop,
.ck-fab-sheet { display: none !important; }
@media (max-width: 640px) {
/* ── Body padding when bottom nav is visible ─────────────────── */
body.has-bottom-nav {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
/* ── Bottom nav container ────────────────────────────────────── */
/* Re-display only on app pages — the desktop-default `display:none`
above is gated by a `body.has-bottom-nav` selector here so non-
app pages stay hidden even at mobile widths. !important is needed
to override the desktop default's !important. */
body.has-bottom-nav .ck-bnav {
display: flex !important;
position: fixed;
inset: auto 0 0 0;
z-index: 95;
background: var(--card, #fff);
border-top: 1px solid var(--line, #e0ddd4);
box-shadow: 0 -4px 16px rgba(26, 26, 46, .06);
padding: 8px 6px calc(14px + env(safe-area-inset-bottom, 0px));
gap: 2px;
/* Ensure children align to top so the FAB can poke up
without distorting flex sizing on its neighbors. */
align-items: flex-start;
}
/* ── Bottom-nav items ────────────────────────────────────────── */
.ck-bnav .item {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 3px;
padding: 6px 2px;
border-radius: 8px;
color: var(--muted, #777);
font-size: 10.5px;
font-weight: 600;
text-decoration: none;
transition: background .12s ease;
-webkit-tap-highlight-color: transparent;
/* WCAG touch target — at least 44x44 in the visible row */
min-height: 44px;
}
.ck-bnav .item .ico {
width: 26px;
height: 26px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--muted, #777);
font-family: Georgia, "Times New Roman", serif;
font-weight: 700;
font-size: 13px;
line-height: 1;
transition: background .15s ease, color .15s ease;
}
.ck-bnav .item.on { color: var(--text, #1a1a2e); }
.ck-bnav .item.on .ico {
background: var(--brand2, #c5a356);
color: #2a2206;
}
/* Press feedback — tap-highlight is suppressed above so we add
our own subtle press state. */
.ck-bnav .item:active:not(.on) {
background: rgba(26, 26, 46, .05);
}
/* ── Center FAB slot ─────────────────────────────────────────── */
.ck-bnav .center-add {
flex: 1.1;
display: flex;
justify-content: center;
align-items: flex-start;
/* Slot itself needs no min-height; the FAB pokes up over it. */
min-width: 0;
}
.ck-bnav .center-add .fab {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand2, #c5a356), #8a6b20);
color: #2a2206;
border: 4px solid var(--card, #fff);
font-size: 26px;
font-weight: 300;
line-height: 1;
box-shadow: 0 4px 12px rgba(197, 163, 86, .4);
margin-top: -14px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform .12s ease, box-shadow .12s ease;
}
.ck-bnav .center-add .fab:active {
transform: translateY(1px);
box-shadow: 0 2px 8px rgba(197, 163, 86, .5);
}
.ck-bnav .center-add .fab .fab-icon {
/* Use a real "+" character; it kerns better than + */
display: block;
margin-top: -2px; /* visual centering for the cap-height of "+" */
transition: transform .25s cubic-bezier(.4, 1.4, .5, 1);
}
/* When the action sheet is open, rotate the "+" into an "×" so the
FAB visually communicates "tap to close". The 45° rotation
happens to land the plus exactly on the close-icon glyph. */
.ck-bnav .center-add .fab.on .fab-icon {
transform: rotate(45deg);
}
/* ── FAB action sheet ───────────────────────────────────────── */
/* Floats just above the bottom nav; backdrop dims the rest of the
page. Items are simple anchor/button rows with a coloured badge,
a label/sub line, and a chevron. Tap a row → navigate (or run
the row's JS handler) and the sheet closes itself.
Visibility is keyed off body.ck-fab-open (set by the toggle JS),
not the [hidden] attribute, because the desktop default rule
above uses !important to keep the sheet hidden — only an
equally-strong selector can re-show it on mobile. */
body.ck-fab-open .ck-fab-backdrop {
display: block !important;
position: fixed; inset: 0;
background: rgba(20, 26, 46, .45);
z-index: 96; /* above nav (95), below sheet (97) */
animation: ckFabFade .15s ease;
}
body.ck-fab-open .ck-fab-sheet {
display: block !important;
position: fixed;
/* Sit just above the bottom nav (~78px including safe area). */
bottom: calc(86px + env(safe-area-inset-bottom, 0px));
left: 16px;
right: 16px;
z-index: 97;
background: var(--card, #fff);
border: 1px solid var(--line, #e0ddd4);
border-radius: 14px;
padding: 8px;
box-shadow: 0 12px 30px rgba(20, 26, 46, .25);
animation: ckFabPop .25s cubic-bezier(.2, .9, .3, 1.05);
/* Make sure long lists don't push us off the top of the screen. */
max-height: calc(100vh - 200px);
overflow-y: auto;
}
@keyframes ckFabFade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ckFabPop {
from { opacity: 0; transform: translateY(8px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.ck-fab-sheet .item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
background: transparent;
border: 0;
width: 100%;
text-align: left;
color: var(--text, #1a1a2e);
text-decoration: none;
cursor: pointer;
font: inherit;
-webkit-tap-highlight-color: transparent;
transition: background .12s ease;
}
.ck-fab-sheet .item:hover,
.ck-fab-sheet .item:focus-visible {
background: var(--surface, #f4f3ed);
outline: none;
}
.ck-fab-sheet .item:active {
background: rgba(26, 26, 46, .08);
}
.ck-fab-sheet hr {
border: 0;
height: 1px;
background: var(--line, #e0ddd4);
margin: 4px 10px;
opacity: .8;
}
.ck-fab-sheet .badge {
flex-shrink: 0;
width: 36px; height: 28px;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-size: 10px;
font-weight: 700;
font-family: Georgia, "Times New Roman", serif;
line-height: 1;
}
.ck-fab-sheet .badge.us { background: #dde6fb; color: #1e3a7a; }
.ck-fab-sheet .badge.ww { background: #d6ecdd; color: #2a7054; }
.ck-fab-sheet .badge.ck { background: var(--surface, #f4f3ed); color: var(--muted, #6b6f80); }
.ck-fab-sheet .badge.hunt { background: var(--brand2, #c5a356); color: #2a2206; font-size: 16px; }
.ck-fab-sheet .info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.ck-fab-sheet .info b {
font-weight: 700;
font-size: 13px;
color: var(--text, #1a1a2e);
line-height: 1.3;
}
.ck-fab-sheet .info i {
font-style: normal;
font-size: 11px;
color: var(--muted, #6b6f80);
line-height: 1.3;
}
.ck-fab-sheet .caret {
color: var(--muted, #6b6f80);
font-size: 14px;
flex-shrink: 0;
}
/* When the sheet is open, prevent body scroll behind it.
`position: fixed` would lose scroll position; overflow:hidden
keeps the user where they were when they tapped the FAB. */
body.ck-fab-open { overflow: hidden; }
/* ── Coin-page header polish ─────────────────────────────────── */
/* Goal: long series titles (e.g. "Saint-Gaudens Double Eagles •
1907–1933") shouldn't push the prev/next arrows off the row.
The .subnav is rendered by components/com_uscoin/tmpl/coin/
default.php at line ~106 with grid-template-columns:1fr auto 1fr;
forcing `auto` to `minmax(0,auto)` lets the badge truncate. */
.subnav { grid-template-columns: 44px minmax(0, 1fr) 44px !important; }
.subnav .badge {
display: block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
margin: 0 8px;
}
.subnav .link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
/* Big tap target without the visible border that would clash. */
}
.subnav .link:active { background: rgba(26, 26, 46, .06); }
/* h1 coin-title — ellipsis when there's no room. The wrap fallback
is fine for shorter titles. */
.coin-title {
overflow-wrap: anywhere;
word-break: break-word;
}
/* ── Bottom-sheet primitive (Phase 2 hook) ───────────────────── */
/* Pages opt into a bottom-sheet UX by marking up:
and toggling [hidden]. CSS handles the slide-up animation +
the visual handle bar; JS in Phase 2 wires the swipe-to-dismiss. */
.ck-bsheet-backdrop {
position: fixed; inset: 0;
background: rgba(20, 26, 46, .5);
z-index: 90;
animation: ckBsheetFade .2s ease;
}
.ck-bsheet {
position: fixed; left: 0; right: 0; bottom: 0;
background: var(--card, #fff);
border-radius: 16px 16px 0 0;
max-height: 88vh;
overflow-y: auto;
z-index: 91;
box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
animation: ckBsheetSlide .3s cubic-bezier(.2, .9, .3, 1);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ck-bsheet-handle {
width: 36px; height: 4px;
background: var(--line, #d8d4c5);
border-radius: 2px;
margin: 10px auto;
}
@keyframes ckBsheetFade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ckBsheetSlide {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* ── Reduced-motion respect ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.ck-bsheet, .ck-bsheet-backdrop {
animation-duration: 0.01ms !important;
}
.ck-bnav .center-add .fab {
transition: none;
}
}
} /* /max-width:640px */
/* ── Dark theme tweaks ─────────────────────────────────────────── */
/* Variables already do most of the work; only the shadow needs
tightening since rgba blacks vanish on a dark card. */
[data-theme="dark"] .ck-bnav {
box-shadow: 0 -4px 16px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .ck-bnav .center-add .fab {
border-color: var(--card);
}
/* ── Touch-device adjustments (any width) ──────────────────────── */
/* Hover-revealed UI like the bank-card delete button is invisible
on touch devices because they have no hover. Force visibility
wherever a hover-only affordance leaves an action unreachable. */
@media (hover: none) {
.bank-card .bank-delete-btn { opacity: .55; }
}
/* ==================================================================
PHASE 2 — page-level mobile polish
==================================================================
Each block targets a specific app surface. CSS-only — no template
changes — so deploy is just this one file. Existing mobile rules
in warmstone.css already handle most of the layout reflow at
<=640px; what's added here is:
- removing desktop-era clutter that the bottom nav + FAB +
drawer make redundant on mobile
- tightening typography/spacing for thumb-reach
- giving sections an "app screen" rhythm
Everything stays inside @media (max-width: 640px) so desktop is
untouched.
================================================================== */
@media (max-width: 640px) {
/* ── Dashboard (/coins/my-collection) ──────────────────────── */
/* The dashboard's top action cluster is — on mobile — a duplicate
of UI you can already reach faster:
• "AlbumView" → bottom-nav "Albums" slot
• "Edit Sets" → drawer (full nav)
• "Add Coins" → bottom-nav "+" FAB
• "Export" → drawer › Settings (rare action; hide on phone)
Hiding them gives the stat cards back as the first interactive
surface and removes ~80–120 vertical pixels of wrap-clutter.
The notification bell stays — different class (.ck-bell-btn),
and it's a useful glance-able status indicator. */
.ck-dashboard .ck-dash-head .actions > a.ck-btn,
.ck-dashboard .ck-dash-head .actions > .ck-splitbtn {
display: none !important;
}
/* Tighten the dashboard heading line. The desktop H1 is bold-32px
and the sub line wraps over 2-3 lines on a phone. Drop both. */
.ck-dashboard .ck-dash-head { margin-bottom: 12px; gap: 4px; }
.ck-dashboard .ck-dash-head h1 {
font-size: 22px;
line-height: 1.2;
margin: 0 0 2px;
}
.ck-dashboard .ck-dash-head .sub {
font-size: 12.5px;
line-height: 1.5;
color: var(--muted, #6b6f80);
}
/* The notification bell on the right needs to stay aligned with
the heading column even after the action buttons are gone. */
.ck-dashboard .ck-dash-head .actions {
justify-content: flex-end;
flex: 0 0 auto;
}
/* ── Public profile (/u/) ────────────────────────── */
/* The hero pattern + overlapping card pattern is dense on mobile.
Trim the hero pattern down so the card has room, and rebalance
typography for narrow widths. */
.ck-profile-hero {
padding-bottom: 40px; /* less hero so the card overlaps less awkwardly */
}
.ck-profile-hero .inner h1 {
font-size: 24px;
line-height: 1.15;
}
.ck-profile-hero .eyebrow {
font-size: 10.5px;
letter-spacing: .12em;
}
.ck-profile-hero .pills {
gap: 6px;
margin-top: 10px;
}
.ck-profile-hero .pills .pill {
font-size: 11px;
padding: 4px 9px;
}
/* Profile card — stack avatar/info/actions on mobile.
The card already wraps in flex; just enforce single-column +
center-aligned look. */
.ck-profile-card {
flex-direction: column;
align-items: center;
text-align: center;
padding: 16px 14px 14px;
gap: 10px;
}
.ck-profile-card .avatar-big {
width: 80px;
height: 80px;
margin: -40px 0 0; /* deeper overlap with the (now shorter) hero */
}
.ck-profile-card .info { width: 100%; }
.ck-profile-card .info h2 {
font-size: 19px;
margin: 4px 0 6px;
}
.ck-profile-card .meta-row {
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.ck-profile-card .actions {
width: 100%;
flex-direction: column;
gap: 8px;
}
.ck-profile-card .actions .ck-btn {
width: 100%;
justify-content: center;
}
/* Profile stats — the 4-card grid stacks 2x2 like the dashboard. */
.ck-profile-stats {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px;
}
.ck-profile-stats .s {
padding: 12px 14px;
}
.ck-profile-stats .s .n { font-size: 22px; }
.ck-profile-stats .s .d { font-size: 10.5px; }
/* Profile sections (Achievements / Shared albums) — tighter heads */
.ck-profile-section { padding: 14px 14px 16px; }
.ck-profile-section .sec-head {
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.ck-profile-section .sec-head h3 {
font-size: 15px;
}
.ck-profile-section .sec-head-actions {
flex-wrap: wrap;
gap: 6px;
}
.ck-profile-section .album-style-seg button {
padding: 6px 10px;
font-size: 11.5px;
}
/* Album tabs — horizontal scroll on narrow screens so a long list
doesn't break to multiple lines. */
.ck-profile-section .album-tabs {
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.ck-profile-section .album-tabs::-webkit-scrollbar { display: none; }
.ck-profile-section .album-tabs .tab { flex-shrink: 0; }
/* Owner banner ("This is your public page…") — stack content +
button on mobile so the CTA is reachable. */
.ck-profile-owner-banner {
flex-wrap: wrap;
gap: 8px;
padding: 10px 12px;
font-size: 12px;
}
.ck-profile-owner-banner .ck-btn { width: auto; flex-shrink: 0; }
/* ── Roll hunting (/coins/roll-hunting) ────────────────────── */
/* Unlike the dashboard's top-action cluster (which duplicated
bottom-nav + drawer + FAB destinations), the roll-hunting head
buttons are the page's actual primary actions:
• + New session — opens a modal here (FAB sheet's "Start
roll hunting" only navigates to this page; you still need
the modal trigger once you arrive)
• Manage banks — sub-page only reachable via this button
• Export — useful but rare; keep visible on mobile
since hiding it makes "where did Export go" a support tap
So instead of hiding, stack them as full-width primary
buttons under the heading. */
.ck-rollhunting .ck-dash-head .actions {
flex-direction: column;
gap: 8px;
width: 100%;
margin-top: 4px;
}
.ck-rollhunting .ck-dash-head .actions > .ck-btn,
.ck-rollhunting .ck-dash-head .actions > .ck-splitbtn,
.ck-rollhunting .ck-dash-head .actions > button {
width: 100%;
justify-content: center;
}
.ck-rollhunting .ck-dash-head .actions > .ck-splitbtn .ck-btn {
width: 100%;
justify-content: center;
}
/* Surface the most-used action ('+ New session') first by reordering
the inline button to the top of the column, regardless of source
order. */
.ck-rollhunting .ck-dash-head .actions > button.ck-btn.primary { order: -1; }
/* Tighten heading + breadcrumbs */
.ck-rollhunting .ck-crumbs {
font-size: 11.5px;
margin-bottom: 4px;
}
.ck-rollhunting .ck-dash-head { margin-bottom: 12px; }
.ck-rollhunting .ck-dash-head h1 {
font-size: 22px;
line-height: 1.2;
margin: 0 0 2px;
}
.ck-rollhunting .ck-dash-head .sub {
font-size: 12.5px;
line-height: 1.5;
}
/* Live-session card — already has area-grid reflow in warmstone;
just slim the inner padding so it fits the mobile rhythm. */
.ck-live-session {
padding: 12px 14px;
gap: 8px;
}
.ck-live-session h2 {
font-size: 16px;
line-height: 1.25;
/* Long bank-chain names ("Wells Fargo — Downtown Branch · 2nd
Ave") need to wrap, not push. */
overflow-wrap: anywhere;
}
.ck-live-session .meta { font-size: 11.5px; }
.ck-live-session .ls-stats { gap: 12px; }
.ck-live-session .ls-stat .n { font-size: 18px; }
.ck-live-session .ls-actions .ck-btn { width: 100%; justify-content: center; }
/* ── FAB action sheet — inline CK# input row ───────────────── */
/* Polish over the v1 prompt(): the trigger swaps to an input
field in place. Visual rhythm matches a regular .item row so
the sheet doesn't jump in size.
`:not([hidden])` is critical — without it, `display: flex`
would override the [hidden] attribute's UA `display: none`,
and the input row would render alongside the trigger row by
default. We only want to show it after the trigger is tapped
(JS removes [hidden]). */
.ck-fab-sheet .ck-input-row:not([hidden]) {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
margin: 0; /* override default