, so it
never touched them — but these are
![]()
, and .lp-ph is only
calc(375px * var(--s)) wide. Without this the image width collapsed to the
container (322.5px at --s:.86) while height stayed 812px, i.e. every phone
rendered ~14% too narrow and visibly stretched: 0.397 aspect instead of
375/812 = 0.462. The transform below is what does the scaling; the box
itself must stay a true 375x812. */
max-width:none}
/* Official Apple "Download on the App Store" badge, used as a standalone
element — NOT nested inside the design's own button, which produced a
black badge sitting inside a white pill (a button within a button).
Apple supplies both variants, so each sits on a background it was drawn
for: the black badge on light sections, the white one on dark sections
(.light). Neither is recoloured or re-drawn, which their guidelines
require. Height matches the adjacent "Web app" button so the pair still
reads as one row. */
.asb{display:inline-flex;align-items:center;justify-content:center;
min-height:54px;padding:0;background:none;border:0;line-height:0}
.asb:hover{background:none}
/* Also needs max-width:none — same blanket img rule would squash the badge
whenever the flex row gets tight. */
.asb img{height:54px;width:auto;display:block;max-width:none}
@media (max-width:600px){.asb{flex:1;min-width:0}.asb img{height:50px}}
/* Tap targets. The README asks for everything clickable to be at least 44px
tall; measured on the preview, the nav links were 22px, the "or start on the
web" link 23px and the footer link 21px — they are small text by design.
Rather than pad them (which would move things in a hifi layout that is
final), each gets an invisible 44px-tall overlay centred on the text. The
text stays exactly where the designer put it; only the hit area grows. */
.lp-nav .links a,.lp-foot nav a,.pcard .alt{position:relative}
.lp-nav .links a::after,.lp-foot nav a::after,.pcard .alt::after{
content:"";position:absolute;left:0;right:0;top:50%;height:44px;
transform:translateY(-50%)}