/* ══════════════════════════════════════════════════════════════════
* app-mobile.css — HoneyWay mobile-app-mode stylesheet.
*
* Applied on top of pages-mobile.css to turn the mobile portrait
* experience into something that looks and behaves like a native app:
*
* • Safe-area insets so content clears the notch/home-indicator
* • 48px+ tap targets, no tap-highlight flash
* • Momentum scroll + contained overscroll
* • Sticky bottom action bar utility (.app-bottom-bar)
* • Slide-up bottom-sheet utility (.app-sheet)
* • Compact app-shell header (via .app-shell)
* • Standalone-mode adjustments (.is-pwa-standalone)
*
* Rules only apply on phone-portrait viewports so desktop is untouched.
* ══════════════════════════════════════════════════════════════════ */
/* ── Base safe-area variables — usable anywhere on the site. ── */
:root {
--safe-top: env(safe-area-inset-top, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--app-bar-h: 64px; /* bottom-bar target height */
--app-header-h: 56px; /* compact header on mobile */
}
/* ══════════════════════════════════════════════════════════════════
PHONE PORTRAIT — the "feels like an app" media query
══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) and (orientation: portrait) {
/* ── System-level touch behavior. ── */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
overscroll-behavior-y: contain; /* no white flash on pull-to-refresh */
}
body {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
touch-action: manipulation; /* removes 300ms tap delay + double-tap zoom */
}
/* Selection stays on typographic content but not on chrome. */
button, a, nav, header, footer, .btn, .app-bottom-bar, .app-sheet-handle {
-webkit-user-select: none;
user-select: none;
}
/* ── Prevent iOS auto-zoom on input focus.
Inputs must be ≥ 16px to skip the zoom. ── */
input, select, textarea {
font-size: 16px;
}
/* ── Minimum 48px tap targets on all interactive controls. ── */
button, a.btn, input[type="submit"], input[type="button"],
.ls-strip-iconbtn, .ls-anchornav a, .ls-hero-nav {
min-height: 48px;
}
/* ── Momentum scroll on any horizontally scrolling strip. ── */
.ls-anchornav, .hp-pills, .ls-hero-strip, .ls-strip-stats,
.ls-hero-carousel, [class*="scroll-x"] {
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ls-anchornav::-webkit-scrollbar,
.hp-pills::-webkit-scrollbar { display: none; }
/* ── Body & main pick up safe-area padding so the notch/home
indicator never overlaps content. Individual sticky bars
re-apply safe-bottom themselves. ── */
body {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
main { padding-bottom: calc(var(--safe-bottom) + 12px); }
/* When a page uses the sticky bottom bar, main must clear it. */
body:has(.app-bottom-bar) main {
padding-bottom: calc(var(--app-bar-h) + var(--safe-bottom) + 12px);
}
}
/* ══════════════════════════════════════════════════════════════════
STICKY BOTTOM ACTION BAR — reusable app-style CTA dock
Structure:
══════════════════════════════════════════════════════════════════ */
.app-bottom-bar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 90;
display: none; /* mobile portrait only */
gap: 8px;
padding: 10px 12px calc(10px + var(--safe-bottom));
background: rgba(255, 255, 255, .96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid var(--color-line, #E8E3D3);
transform: translateY(0);
transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
/* When the site footer enters the viewport the bar tucks away so it
never covers the footer links or legal text. JS toggles this class. */
.app-bottom-bar.is-tucked {
transform: translateY(100%);
pointer-events: none;
}
.app-bottom-bar a,
.app-bottom-bar button {
flex: 1 1 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: var(--app-bar-h);
padding: 0 16px;
font-family: var(--font-body, system-ui);
font-size: .96rem;
font-weight: 500;
border-radius: 14px;
text-decoration: none;
line-height: 1.2;
border: 0;
cursor: pointer;
}
.app-bottom-bar-primary {
background: var(--color-honey, #D4A04A);
color: #251B07;
}
.app-bottom-bar-secondary {
background: var(--color-cream, #FAF6EE);
color: var(--color-ink, #1A1A1A);
flex: 0 0 auto;
min-width: 56px;
}
.app-bottom-bar svg { width: 20px; height: 20px; }
/* Turn the bar on for phone portrait */
@media (max-width: 640px) and (orientation: portrait) {
.app-bottom-bar { display: flex; }
}
/* ══════════════════════════════════════════════════════════════════
BOTTOM SHEET — slide-up modal for forms/actions
Structure:
══════════════════════════════════════════════════════════════════ */
.app-sheet {
position: fixed;
inset: auto 0 0 0;
max-width: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #fff;
border: 0;
border-radius: 20px 20px 0 0;
max-height: 90dvh;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 -8px 40px rgba(0,0,0,.25);
transform: translateY(100%);
transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.app-sheet[open] {
transform: translateY(0);
}
.app-sheet::backdrop {
background: rgba(0,0,0,.4);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.app-sheet-handle {
width: 40px; height: 4px;
background: var(--color-line, #E8E3D3);
border-radius: 999px;
margin: 10px auto 6px;
}
.app-sheet-title {
padding: 6px 20px 12px;
font-family: var(--font-display, Georgia, serif);
font-size: 1.1rem;
font-weight: 500;
letter-spacing: -.012em;
color: var(--color-ink, #1A1A1A);
border-bottom: 1px solid var(--color-line, #E8E3D3);
}
.app-sheet-body {
padding: 18px 20px calc(20px + var(--safe-bottom));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
max-height: calc(90vh - 80px);
}
.app-sheet-close {
position: absolute;
top: 8px; right: 12px;
width: 40px; height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: var(--color-mute, #7A7261);
cursor: pointer;
border-radius: 50%;
}
.app-sheet-close:hover { background: var(--color-cream, #FAF6EE); }
/* ══════════════════════════════════════════════════════════════════
COMPACT APP-STYLE HEADER (mobile portrait)
The site header stays functional; on phone portrait it becomes a
thin app bar that hugs the top with safe-area padding.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) and (orientation: portrait) {
.site-header {
position: sticky;
top: 0;
z-index: 80;
padding-top: var(--safe-top);
background: rgba(255,255,255,.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-line, #E8E3D3);
}
/* Bar row itself */
.site-header .site-header-inner,
.site-header > .container {
min-height: var(--app-header-h);
padding-top: 6px;
padding-bottom: 6px;
}
/* Hide the utility bar (phone + email row) on mobile portrait —
the sticky action bar carries those actions instead. */
.util-bar { display: none; }
}
/* ══════════════════════════════════════════════════════════════════
INSTALLED (STANDALONE) MODE tweaks
Added by head.php inline script when the page is opened from the
home-screen icon rather than the browser tab.
══════════════════════════════════════════════════════════════════ */
.is-pwa-standalone body { padding-top: var(--safe-top); }
.is-pwa-standalone .site-header {
/* Extra top padding since there's no browser chrome */
padding-top: max(env(safe-area-inset-top), 12px);
}
/* Hide "install this app" prompts once already installed */
.is-pwa-standalone .app-install-prompt { display: none !important; }
/* ══════════════════════════════════════════════════════════════════
MISC — cleaner focus rings on touch, keep on keyboard
══════════════════════════════════════════════════════════════════ */
@media (hover: none) {
:focus:not(:focus-visible) { outline: none; }
}