/* ========================================================================= mobile.css — Phone mockup + in-app chrome (group: mobile) iDev Digital Library Portal — Wireframe Pack v2 ("refined institutional") Renders a precise hardware phone shell on a desktop page, with the app's own chrome inside .device-screen. Screen area is 390 × 844 CSS px (iPhone-class logical resolution), so native pt sizes read 1:1. Expected markup:
(or two devices in .device-set)
9:41 ← swappable text (i18n may retarget it if needed)
… … …
…
…

State name

v2 craft rules: - In-app chrome runs at native density (52px bars, 10–11px tab labels, 56px list rows) — a real app, not a shrunken website. - Weights via --fw-*, motion via --t-*, tracking only via --tracking-*. - Chassis colours are deliberate hard-coded literals: hardware does not re-skin with the tenant or the theme. RTL: everything below is logical-property only; the whole mock mirrors from alone. Status-bar glyphs are deliberately drawn with physical percentage background positions so they do NOT mirror (matching real OS status bars); this is a documented non-mirror. ========================================================================= */ /* ========================================================================= 1. DEVICE SHELL ========================================================================= */ .device { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); } /* Two adjacent states, side by side; wraps on narrow viewports. */ .device-set { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--sp-12); } /* Chassis: a slim 12px bezel, a machined edge highlight along the top arc, and soft grounded elevation. Fixed near-black regardless of the product theme — a phone body does not re-skin with the tenant. */ .device-frame { position: relative; inline-size: 414px; /* 390 screen + 2 × 12 bezel */ padding: 12px; border-radius: 56px; /* bezel 12 + screen radius 44 */ background: linear-gradient(to bottom, #1d2027, #12141a 40%, #101218); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(6, 8, 12, 0.30), 0 20px 48px -12px rgba(6, 8, 12, 0.40); flex-shrink: 0; } /* Dynamic-island style notch. Pinned to the frame (hardware), so it never scrolls with app content. Centred logically: inset-inline 0 + auto margins. Pure black with a faint lens ring so it reads as glass, not a blob. */ .device-notch { position: absolute; inset-block-start: 22px; inset-inline: 0; margin-inline: auto; inline-size: 120px; block-size: 32px; border-radius: 999px; background: #06070a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); z-index: 6; } /* Home indicator, also hardware-pinned. Adapts to the app theme underneath. */ .device-frame::after { content: ""; position: absolute; inset-block-end: 21px; inset-inline: 0; margin-inline: auto; inline-size: 120px; block-size: 5px; border-radius: 999px; background: color-mix(in srgb, var(--text) 40%, transparent); z-index: 6; pointer-events: none; } /* The scrollable app viewport. Flex column so the tab bar can pin to the bottom (margin-block-start:auto + sticky) even on short content. The inset hairline keeps the screen edge crisp against the bezel. */ .device-screen { position: relative; inline-size: 390px; block-size: 844px; border-radius: 44px; background: var(--bg); color: var(--text); font-size: var(--fs-md); /* mobile type runs larger than console */ line-height: var(--lh-body); /* token, not a literal: --lh-body re-derives 1.55 → 1.75 under [lang="ar"]/[dir="rtl"]. A literal here would sit on the root of every mobile viewport and block that re-derivation for all app content. */ box-shadow: inset 0 0 0 1px rgba(6, 8, 12, 0.55); /* crisp screen edge */ overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; isolation: isolate; /* own stacking context: sheet/fab z-index never leaks out into the page */ scrollbar-width: none; /* the frame is the affordance, not a bar */ } .device-screen::-webkit-scrollbar { display: none; } /* Caption naming the state ("Filters open", "Offline"). */ .device-label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-muted); text-align: center; max-inline-size: 390px; } /* ========================================================================= 2. STATUS BAR (fake OS chrome) ========================================================================= */ .device-statusbar { position: sticky; inset-block-start: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-block-size: 54px; padding-block-start: 10px; /* clears the island's arc */ padding-inline: 34px; background: var(--surface); flex-shrink: 0; } .device-time { font-size: var(--fs-md); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; } .device-status-cluster { display: flex; align-items: center; gap: 6px; color: var(--text); } /* Signal: four ascending bars via layered gradients. Physical percentage positions on purpose — status glyphs do not mirror in RTL (see header). */ .device-signal { display: inline-block; inline-size: 18px; block-size: 11px; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 3px 4px, 3px 6px, 3px 9px, 3px 11px; background-position: 0% 100%, 33% 100%, 66% 100%, 100% 100%; } /* Wi-Fi: two clipped arcs + a base dot. Approximate on purpose — wireframe. */ .device-wifi { position: relative; display: inline-block; inline-size: 16px; block-size: 11px; overflow: hidden; background-image: radial-gradient(circle at 50% 88%, currentColor 1.6px, transparent 1.9px); } .device-wifi::before, .device-wifi::after { content: ""; position: absolute; inset-inline: 0; margin-inline: auto; border: 1.5px solid currentColor; border-radius: 50%; } .device-wifi::before { inline-size: 14px; block-size: 14px; inset-block-start: 0; } .device-wifi::after { inline-size: 7px; block-size: 7px; inset-block-start: 4px; } /* Battery: outline, charge fill, terminal nub. */ .device-battery { position: relative; display: inline-block; inline-size: 24px; block-size: 12px; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 3px; } .device-battery::before { /* charge level */ content: ""; position: absolute; inset-block: 2px; inset-inline-start: 2px; inline-size: 14px; border-radius: 1.5px; background: currentColor; } .device-battery::after { /* terminal nub */ content: ""; position: absolute; inset-block: 3px; inset-inline-end: -4px; inline-size: 2px; border-start-end-radius: 2px; border-end-end-radius: 2px; background: color-mix(in srgb, currentColor 45%, transparent); } /* ========================================================================= 3. APP BAR ========================================================================= */ .app-appbar { position: sticky; inset-block-start: 54px; /* sits under the sticky status bar */ z-index: 4; display: flex; align-items: center; gap: var(--sp-1); min-block-size: 52px; /* native navigation-bar band */ padding-inline: var(--sp-1); background: var(--surface); border-block-end: var(--border-w) solid var(--border); flex-shrink: 0; } /* Equal-width leading/trailing slots keep the title optically centred. */ .app-appbar-lead, .app-appbar-trail { display: flex; align-items: center; gap: 2px; min-inline-size: 88px; flex-shrink: 0; } .app-appbar-trail { justify-content: flex-end; } /* Native nav-bar title voice: 17px semibold, gently tightened (the token collapses to normal for Arabic). */ .app-appbar-title { flex: 1; min-width: 0; text-align: center; font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Icon buttons inside the app bar get full touch targets, drawn as quiet ghosts — chrome buttons carry no border on a phone. */ .app-appbar .btn--icon, .app-appbar button { min-inline-size: 44px; min-block-size: 44px; } .app-appbar .btn { border-color: transparent; background: transparent; box-shadow: none; color: var(--primary-ink); } .app-appbar .btn:hover { background: var(--surface-2); } .app-appbar .btn:active { background: var(--bg-sunken); } /* ========================================================================= 4. BODY, TAB BAR, FAB ========================================================================= */ .app-body { padding-block: var(--sp-4) var(--sp-7); padding-inline: var(--sp-4); } .app-tabbar { position: sticky; inset-block-end: 0; z-index: 4; margin-block-start: auto; /* pins to bottom on short content */ display: flex; align-items: stretch; background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border-block-start: var(--border-w) solid var(--border); padding-block-end: 18px; /* clears the home indicator */ flex-shrink: 0; } /* Native tab density: a 22px glyph over a 10px-class label, faint at rest, brand ink when active (never --primary — that is a fill role). */ .app-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-block-size: 52px; padding-block: var(--sp-2) var(--sp-1); color: var(--text-faint); text-decoration: none; font-size: var(--fs-2xs); font-weight: var(--fw-medium); transition: color var(--t-fast); } .app-tab .icon { font-size: 22px; /* native tab glyph size */ } .app-tab:hover { color: var(--text-muted); text-decoration: none; } .app-tab:focus-visible { outline: 2px solid var(--focus-ring, var(--text)); outline-offset: -2px; border-radius: var(--r-sm); } .app-tab.is-active, .app-tab--active, .app-tab[aria-current="page"] { color: var(--primary-ink); font-weight: var(--fw-semibold); } /* Optional unread dot on a tab icon. */ .app-tab .badge { position: absolute; inset-block-start: 4px; inset-inline-end: calc(50% - 22px); } /* Floating action button. sticky + align-self keeps it pinned above the tab bar while remaining direction-aware (flex-end = inline-end in a column). Elevation: one crisp contact shadow + a restrained tinted bloom — the loud halo is gone. */ .app-fab { position: sticky; inset-block-end: 92px; z-index: 3; align-self: flex-end; margin-inline-end: var(--sp-4); margin-block-start: -56px; /* removes its slot from the flow */ inline-size: 56px; block-size: 56px; border-radius: var(--r-full); border: 0; background: var(--primary); color: var(--primary-fg); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(6, 8, 12, 0.20), 0 8px 20px -6px color-mix(in srgb, var(--primary) 50%, transparent); transition: background var(--t-fast), box-shadow var(--t-fast); } .app-fab:hover { background: var(--primary-hover); } .app-fab:active { background: var(--primary-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(6, 8, 12, 0.20); } .app-fab:focus-visible { outline: 2px solid var(--focus-ring, var(--text)); outline-offset: 2px; } /* ========================================================================= 5. BOTTOM SHEET ------------------------------------------------------------------------- Absolutely positioned against the screen. Note: inside a scrolled screen an absolute sheet travels with the content — show .is-open states on non-scrolling mock content (this is a static wireframe, not an app). ========================================================================= */ .app-sheet { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 8; max-block-size: 72%; display: flex; flex-direction: column; background: var(--surface); border-start-start-radius: 16px; border-start-end-radius: 16px; border-block-start: var(--border-w) solid var(--border); /* Upward elevation: fixed dark ink, never --text-derived (a text shadow becomes a white glow in dark mode). */ box-shadow: 0 -8px 32px -8px rgba(6, 8, 12, 0.35); transform: translateY(108%); /* vertical only — direction-safe */ visibility: hidden; transition: transform var(--t-slow), visibility var(--t-slow); } .app-sheet.is-open { transform: translateY(0); visibility: visible; } /* Grabber handle. */ .app-sheet::before { content: ""; inline-size: 36px; block-size: 4px; border-radius: 999px; background: var(--border-strong); margin-inline: auto; margin-block: var(--sp-2) var(--sp-1); flex-shrink: 0; } /* Optional structured sheet regions. */ .app-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-block: var(--sp-2) var(--sp-3); padding-inline: var(--sp-5); border-block-end: var(--border-w) solid var(--border); font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight-2); } .app-sheet-body { overflow-y: auto; padding-block: var(--sp-3) var(--sp-5); padding-inline: var(--sp-5); } .app-sheet-foot { padding-block: var(--sp-3) var(--sp-4); padding-inline: var(--sp-5); border-block-start: var(--border-w) solid var(--border); display: flex; gap: var(--sp-2); } /* ========================================================================= 6. LISTS & SEGMENTED CONTROL ========================================================================= */ /* Inset-grouped list card. */ .app-list { background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; } /* Leading media · two-line text · trailing chevron. The chevron is an icons.js glyph: — icon--dirflip mirrors it under RTL. Separator hairlines are inset to the text edge (native list treatment): a margin on the leading edge, drawn with border on the row itself would span full-bleed, so the divider lives on the row and the media column width + gap is its inset. */ .app-list-item { display: flex; align-items: center; gap: var(--sp-3); min-block-size: 56px; /* comfortably above the 44px minimum */ padding-block: var(--sp-2); padding-inline: var(--sp-4); color: var(--text); text-decoration: none; transition: background var(--t-fast); } .app-list-item + .app-list-item { border-block-start: var(--border-w) solid var(--border); } .app-list-item:hover { background: var(--surface-hover); text-decoration: none; } .app-list-item:active { background: var(--surface-2); } a.app-list-item:focus-visible { outline: 2px solid var(--focus-ring, var(--text)); outline-offset: -2px; } .app-list-media { inline-size: 44px; block-size: 44px; border-radius: var(--r-sm); background: var(--bg-sunken); border: var(--border-w) solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-faint); flex-shrink: 0; overflow: hidden; } /* Book covers keep a 2:3 ratio when the media slot carries .ph--cover. */ .app-list-media.ph--cover { block-size: 58px; inline-size: 40px; } .app-list-body { flex: 1; min-width: 0; } .app-list-title { display: block; font-weight: var(--fw-medium); font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-list-sub { display: block; margin-block-start: 1px; font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-list-item > .icon:last-child { color: var(--text-faint); flex-shrink: 0; } /* Segmented control (e.g. Favorites / Lists / Downloads). The active segment is a raised white pill: hairline ring + contact shadow. */ .app-segment { display: flex; background: var(--bg-sunken); border: var(--border-w) solid var(--border); border-radius: var(--r-full); padding: 3px; } .app-segment-btn { flex: 1; min-block-size: 36px; /* ≥44px total with container padding */ border: 0; border-radius: var(--r-full); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); } .app-segment-btn:hover { color: var(--text); } .app-segment-btn:focus-visible { outline: 2px solid var(--focus-ring, var(--text)); outline-offset: -2px; } .app-segment-btn.is-active { background: var(--surface); color: var(--text); font-weight: var(--fw-semibold); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-xs); } /* ========================================================================= 7. RESPONSIVE ========================================================================= */ @media (max-width: 760px) { .device-set { gap: var(--sp-10); } } /* Very narrow desktop windows: scale the whole shell down gently. transform:scale is symmetric, so it stays direction-safe. */ @media (max-width: 480px) { .device-frame { transform: scale(.86); transform-origin: top center; margin-block-end: -118px; /* reclaim the scaled-away height */ } }