`apps/mobile/scripts/vshots/common.css`

42 lines
/* Homes on Spec — App Store virtual-screenshot chrome. Canvas = 1320x2868 (6.9"). */
* { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
:root{
  --brand:#1a3a6e; --accent:#e07b39;
  --green:#16a34a; --orange:#e07b39; --indigo:#6366f1;
  --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --bg:#f9fafb;
  --sf:-apple-system,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
}
html,body{ width:1320px; height:2868px; overflow:hidden; font-family:var(--sf); background:#fff; }
.frame{ position:relative; width:1320px; height:2868px; background:var(--bg); overflow:hidden; }

/* ---- iOS status bar (9:41, full signal/wifi/battery) ---- */
.status{ position:absolute; top:0; left:0; right:0; height:150px; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:52px 84px 0; color:#fff; }
.status.dark{ color:var(--ink); }
.status .time{ font-size:52px; font-weight:600; letter-spacing:1px; font-variant-numeric:tabular-nums; }
.status .right{ display:flex; align-items:center; gap:22px; }
.status .right svg{ display:block; }

/* ---- App header (navy) ---- */
.appbar{ position:absolute; top:0; left:0; right:0; height:262px; background:var(--brand); z-index:10; }
.appbar .title{ position:absolute; bottom:34px; left:0; right:0; text-align:center;
  color:#fff; font-size:60px; font-weight:800; letter-spacing:.3px; }

/* ---- Bottom tab bar (real labels/colors) ---- */
.tabbar{ position:absolute; bottom:0; left:0; right:0; height:252px; background:#fff;
  border-top:2px solid var(--line); display:flex; z-index:40; padding-bottom:66px; }
.tabbar .tab{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.tabbar .tab .ico{ font-size:66px; line-height:1; filter:grayscale(1) opacity(.55); }
.tabbar .tab .lbl{ font-size:33px; font-weight:700; color:#888; }
.tabbar .tab.active .ico{ filter:none; }
.tabbar .tab.active .lbl{ color:var(--accent); }
/* home indicator */
.home-ind{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:396px; height:15px; border-radius:8px; background:#111827; opacity:.9; z-index:60; }

/* ---- shared bits ---- */
.pill{ display:inline-block; color:#fff; font-weight:800; border-radius:999px; }
.price{ color:var(--brand); font-weight:800; }
.badge-green{ background:var(--green);} .badge-orange{ background:var(--orange);} .badge-indigo{ background:var(--indigo);}