/* ===================================================================== SCRIPTUREREF — Native-only styles These rules ONLY take effect inside the Capacitor app (root has .is-native). Plain web users see no changes to the existing design. ===================================================================== */ /* Safe-area insets for notched devices */ :root { --sr-tabbar-h: 68px; /* visual height of the bar (excl. safe-area) */ --sr-tabbar-cushion: 16px; /* breathing room above the bar */ --sr-safe-bottom: env(safe-area-inset-bottom, 0px); --sr-safe-top: env(safe-area-inset-top, 0px); /* Total clearance any in-app page must reserve at the bottom so its last interactive control is never hidden behind the tab bar. */ --sr-bottom-clearance: calc(var(--sr-tabbar-h) + var(--sr-safe-bottom) + var(--sr-tabbar-cushion)); } /* Push in-app content above the bottom tab bar. Note: carries `.is-native` and carries `.has-native-tabbar`, so the selector targets a body that is the descendant of an .is-native html. */ html.is-native body.has-native-tabbar { padding-bottom: var(--sr-bottom-clearance); } /* Defensive: even if the body padding ever fails (e.g. an inner element becomes the scroll root), pad the main content region directly. */ html.is-native .app-main { padding-bottom: var(--sr-bottom-clearance); } /* Quiz view — the action row ("Exit quiz" / "Next question") and the feedback panel above it must always clear the tab bar. The card lives inside .app-main which is already padded, but we add an extra cushion on the card itself so the gold "Next question" button is comfortably above the bar even on shorter devices. */ html.is-native .quiz-card { scroll-margin-bottom: var(--sr-bottom-clearance); } html.is-native .quiz-footer { margin-bottom: 8px; /* tiny extra so it doesn't kiss the padding edge */ } /* ---------- Android WebView outline-button stability ---------- On accelerated scroll, a 1px hairline border on a 999px-radius pill ("Explore the series", and any other .btn-outline) flickers because the curved edge re-rasterizes at sub-pixel positions every frame. Two layered fixes: 1. Replace the border with an inset box-shadow — rasterizes more stably along curved edges. 2. Promote the button to its own compositor layer so it doesn't get repainted every scroll tick. Visual result is identical to the original outlined button. */ html.is-native .btn-outline { border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; /* will-change is intentionally narrow — only transform — so the compositor promotion is cheap and only kicks in on these buttons. */ will-change: transform; } html.is-native .btn-outline:hover, html.is-native .btn-outline:active { /* Keep the inset on the hover/active state so the outline doesn't pop on/off with state changes. */ box-shadow: inset 0 0 0 1.5px var(--ink); } /* .btn-light has the same hairline pattern (1px var(--line) border) — apply the same treatment so it's consistent throughout the app. */ html.is-native .btn-light { border-color: transparent; box-shadow: inset 0 0 0 1px var(--line); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } html.is-native .btn-light:hover { box-shadow: inset 0 0 0 1px var(--ink-3); } /* Respect the iOS notch / Android cutout for the top header */ .is-native .site-header { padding-top: var(--sr-safe-top); } /* Hide the website's "Sign in" CTA and footer in-app — the bottom tab bar plus Settings handles those flows for app users */ .is-native .site-footer { display: none; } /* App-feel scrolling: no over-scroll bounce stray-touch zooming */ .is-native, .is-native body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; } /* ---------- Bottom tab bar ---------- */ .native-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 8px 4px calc(8px + var(--sr-safe-bottom)); background: rgba(15, 23, 42, 0.96); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-top: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18); } .native-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px; text-decoration: none; color: rgba(255, 255, 255, 0.62); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; border-radius: 12px; transition: color 160ms ease, transform 120ms ease, background 160ms ease; -webkit-touch-callout: none; user-select: none; } .native-tab svg { display: block; } .native-tab:active { transform: scale(0.96); background: rgba(255, 255, 255, 0.06); } .native-tab.is-active { color: #f59e0b; /* gold accent — matches the brand mark */ } .native-tab.is-active svg path, .native-tab.is-active svg circle { stroke: #f59e0b; } /* ---------- Settings view extras (used by SR.viewSettings) ---------- */ .settings-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; } .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: var(--surface, #ffffff); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 14px; } .settings-row .settings-label { display: flex; flex-direction: column; gap: 2px; } .settings-row .settings-label strong { font-size: 15px; color: var(--ink, #0f172a); } .settings-row .settings-label span { font-size: 13px; color: var(--ink-3, #64748b); } .settings-toggle { appearance: none; width: 46px; height: 28px; border-radius: 999px; background: rgba(15, 23, 42, 0.16); position: relative; cursor: pointer; transition: background 160ms ease; border: 0; flex: none; } .settings-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 180ms ease; } .settings-toggle[aria-pressed="true"] { background: #f59e0b; } .settings-toggle[aria-pressed="true"]::after { transform: translateX(18px); }