/* ============================================================================ native-kit.css - styles for the reusable native-feel primitives in src/shared/native-kit.js (Proposal 5). ---------------------------------------------------------------------------- Every selector is scoped under a kit class - .bb-skeleton, .bb-sheet, .bb-segmented, .bb-ptr (plus their backdrop / handle children) - so these rules NEVER clash with existing tour / live-tour / info-weetjes / shared stylesheets. There are no naked generic selectors. Tokens: prefers the shared --bb-* tokens from styles/shared-prototype.css when that sheet is loaded, with a literal fallback baked in so the kit also renders correctly standalone. Follows the project Colour Rule: soft tint backgrounds, navy/blue/cyan/red brand tokens, dark-glass for overlays, white text only on dark surfaces. Light + dark: theme overrides live under :root[data-theme="dark"] (the element). Reduced motion: a single guard near the bottom drops transitions + the shimmer/spin animations. ============================================================================ */ :root{ /* Kit-local tokens. Each falls back to a shared --bb-* token, then a literal, so the kit works with OR without shared-prototype.css. */ --bbk-navy: var(--bb-navy, #091C35); --bbk-blue: var(--bb-blue, #3366FF); --bbk-cyan: var(--bb-cyan, #69FEFF); --bbk-card: var(--bb-bg-card, #FFFFFF); --bbk-page: var(--bb-bg-page, #F3F6F9); --bbk-fg: var(--bb-fg-default, #091C35); --bbk-muted: var(--bb-fg-muted, rgba(9,28,53,0.65)); --bbk-border: var(--bb-border, rgba(9,28,53,0.08)); --bbk-tint: var(--bb-accent-blue-tint, #E5EBFF); --bbk-safe-bottom: var(--bb-safe-bottom, env(safe-area-inset-bottom, 0px)); /* Glass surface for overlays (sheet). Dark-on-light backdrop with blur. */ --bbk-glass: rgba(255,255,255,0.72); --bbk-glass-border: 1px solid rgba(255,255,255,0.45); --bbk-glass-blur: blur(22px) saturate(180%); --bbk-glass-shadow: 0 -10px 40px rgba(9,28,53,0.22), inset 0 1px 0 rgba(255,255,255,0.7); /* Shimmer base + sheen for skeletons (light). */ --bbk-skel-base: #EEF1F4; --bbk-skel-sheen: #F8F9FB; --bbk-spring: var(--bb-ease, cubic-bezier(.32,.72,0,1)); --bbk-spring-snap: var(--bb-spring, cubic-bezier(.34,1.56,.64,1)); --bbk-t-fast: 180ms; --bbk-t-base: 260ms; --bbk-t-slow: 380ms; } :root[data-theme="dark"]{ --bbk-card: var(--bb-bg-card, #0E2240); --bbk-page: var(--bb-bg-page, #05080F); --bbk-fg: var(--bb-fg-default, #F3F6F9); --bbk-muted: var(--bb-fg-muted, rgba(243,246,249,0.72)); --bbk-border: var(--bb-border, rgba(243,246,249,0.12)); --bbk-glass: rgba(9,28,53,0.62); --bbk-glass-border: 1px solid rgba(105,254,255,0.20); --bbk-glass-shadow: 0 -10px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08); --bbk-skel-base: rgba(243,246,249,0.06); --bbk-skel-sheen: rgba(243,246,249,0.13); } /* ════════════════════════════════════════════════════════════════════════ 1. SKELETON SHIMMER ════════════════════════════════════════════════════════════════════════ */ .bb-skeleton{ display:grid;gap:10px; grid-template-columns:1fr; } @media (min-width:600px){ .bb-skeleton{grid-template-columns:1fr 1fr} } .bb-skeleton-card{ display:flex; background:var(--bbk-card); border:1px solid var(--bbk-border); border-radius:14px;overflow:hidden; box-shadow:0 1px 3px rgba(6,18,35,0.06); } .bb-skeleton-card--list{display:block;padding:12px 14px} .bb-skeleton-img{ flex-shrink:0;width:120px;aspect-ratio:1; background:linear-gradient(90deg, var(--bbk-skel-base) 0%, var(--bbk-skel-sheen) 50%, var(--bbk-skel-base) 100%); background-size:200% 100%; animation:bbk-shimmer 1.4s linear infinite; } .bb-skeleton-body{ flex:1;padding:12px 14px; display:flex;flex-direction:column;gap:8px; } .bb-skeleton-card--list .bb-skeleton-body{padding:0} .bb-skeleton-line{ height:10px;border-radius:5px; background:linear-gradient(90deg, var(--bbk-skel-base) 0%, var(--bbk-skel-sheen) 50%, var(--bbk-skel-base) 100%); background-size:200% 100%; animation:bbk-shimmer 1.4s linear infinite; } .bb-skeleton-line:nth-child(1){width:35%;height:8px} .bb-skeleton-line:nth-child(2){width:85%} .bb-skeleton-line:nth-child(3){width:60%} @keyframes bbk-shimmer{ from{background-position:200% 0} to{background-position:-200% 0} } /* Fade real content in when the page calls .fill(). The .bb-skeleton-enter class is added then removed on the next frame; the start state is the transparent/offset one. */ .bb-skeleton-enter{ opacity:0; transform:translateY(6px); } .bb-skeleton{ transition:opacity var(--bbk-t-base) var(--bbk-spring), transform var(--bbk-t-base) var(--bbk-spring); opacity:1;transform:none; } /* ════════════════════════════════════════════════════════════════════════ 2. iOS BOTTOM SHEET ════════════════════════════════════════════════════════════════════════ */ .bb-sheet-backdrop{ position:fixed;inset:0;z-index:1000; background:rgba(9,28,53,0.38); opacity:0; transition:opacity var(--bbk-t-base) var(--bbk-spring); -webkit-tap-highlight-color:transparent; } .bb-sheet-backdrop.is-open{opacity:1} :root[data-theme="dark"] .bb-sheet-backdrop{background:rgba(0,0,0,0.55)} .bb-sheet{ position:fixed;left:0;right:0;bottom:0;z-index:1001; display:flex;flex-direction:column; background:var(--bbk-glass); -webkit-backdrop-filter:var(--bbk-glass-blur); backdrop-filter:var(--bbk-glass-blur); border:var(--bbk-glass-border); border-bottom:none; border-radius:24px 24px 0 0; box-shadow:var(--bbk-glass-shadow); /* Off-screen when closed; the .is-open class slides it up. */ transform:translateY(100%); transition:transform var(--bbk-t-slow) var(--bbk-spring), height var(--bbk-t-slow) var(--bbk-spring); touch-action:none; will-change:transform,height; overflow:hidden; /* Clear the home indicator. */ padding-bottom:var(--bbk-safe-bottom); max-height:calc(100% - 36px - var(--bb-safe-top, env(safe-area-inset-top,0px))); } .bb-sheet.is-open{transform:translateY(0)} /* Detents. The kit toggles exactly one of these while open. */ .bb-sheet--peek{height:calc(120px + var(--bbk-safe-bottom))} .bb-sheet--half{height:60%} .bb-sheet--full{height:calc(100% - 36px - var(--bb-safe-top, env(safe-area-inset-top,0px)))} .bb-sheet-handle{ flex-shrink:0; display:flex;justify-content:center;align-items:center; padding:10px 0 6px;cursor:grab;touch-action:none; } .bb-sheet-handle:active{cursor:grabbing} .bb-sheet-grip{ width:38px;height:5px;border-radius:3px; background:rgba(9,28,53,0.22); } :root[data-theme="dark"] .bb-sheet-grip{background:rgba(243,246,249,0.3)} .bb-sheet-body{ flex:1;overflow-y:auto; padding:4px 18px 16px; color:var(--bbk-fg); overscroll-behavior:contain; } .bb-sheet--peek .bb-sheet-body{overflow:hidden} /* Optional in-sheet snap chips. */ .bb-sheet-snapchips{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap} .bb-sheet [data-bb-snap]{ padding:6px 12px;border-radius:999px;border:none; background:rgba(255,255,255,0.55); border:1px solid rgba(9,28,53,0.12); font:inherit;font-size:0.75rem;font-weight:500;color:var(--bbk-navy); cursor:pointer; transition:transform var(--bbk-t-fast) var(--bbk-spring-snap), background var(--bbk-t-fast) var(--bbk-spring); } .bb-sheet [data-bb-snap]:active{transform:scale(0.96)} .bb-sheet [data-bb-snap].is-on{ background:var(--bbk-blue);color:#fff;border-color:var(--bbk-blue); box-shadow:0 6px 16px rgba(51,102,255,0.4); } :root[data-theme="dark"] .bb-sheet [data-bb-snap]{ background:rgba(255,255,255,0.06);color:var(--bbk-fg); border-color:rgba(243,246,249,0.16); } /* Lock the page scroll behind an open sheet. */ :root.bb-sheet-open, :root.bb-sheet-open body{ overflow:hidden; overscroll-behavior:none; } /* ════════════════════════════════════════════════════════════════════════ 3. SEGMENTED CONTROL ════════════════════════════════════════════════════════════════════════ */ .bb-segmented{ position:relative; display:inline-flex; background:rgba(9,28,53,0.07); border-radius:12px;padding:3px; font-size:0.85rem; -webkit-tap-highlight-color:transparent; } :root[data-theme="dark"] .bb-segmented{background:rgba(243,246,249,0.08)} .bb-segmented-track{ position:absolute;top:3px;bottom:3px;left:3px; width:0; background:var(--bbk-card); border-radius:9px; box-shadow:0 1px 4px rgba(9,28,53,0.15), 0 1px 0 rgba(255,255,255,0.6) inset; transition:left var(--bbk-t-base) var(--bbk-spring), width var(--bbk-t-base) var(--bbk-spring); z-index:0;pointer-events:none; } :root[data-theme="dark"] .bb-segmented-track{ box-shadow:0 1px 4px rgba(0,0,0,0.4); } .bb-segmented-option{ position:relative;z-index:1; flex:1;padding:8px 16px;border:none;background:none; font:inherit;text-align:center;font-weight:500; color:var(--bbk-muted);cursor:pointer;white-space:nowrap; transition:color var(--bbk-t-fast) var(--bbk-spring); } .bb-segmented-option.is-on{color:var(--bbk-navy);font-weight:600} :root[data-theme="dark"] .bb-segmented-option.is-on{color:var(--bbk-fg)} .bb-segmented-option:focus-visible{ outline:2px solid var(--bbk-cyan);outline-offset:2px;border-radius:9px; } /* ════════════════════════════════════════════════════════════════════════ 4. PULL-TO-REFRESH ════════════════════════════════════════════════════════════════════════ */ .bb-ptr{ position:relative; overflow-y:auto; /* Critical (audit): contain so the gesture never bubbles to body PTR. */ overscroll-behavior:contain; } .bb-ptr-indicator{ display:flex;align-items:center;justify-content:center;gap:8px; height:0;overflow:hidden; color:var(--bbk-muted);font-size:0.78rem; transition:height var(--bbk-t-base) var(--bbk-spring), opacity var(--bbk-t-fast) var(--bbk-spring); opacity:0; } .bb-ptr.is-arming .bb-ptr-indicator{height:50px;opacity:0.75} .bb-ptr.is-loading .bb-ptr-indicator{height:50px;opacity:1} .bb-ptr-spinner{ width:20px;height:20px;border:2px solid var(--bbk-blue); border-top-color:transparent;border-radius:50%; display:none; } .bb-ptr.is-loading .bb-ptr-spinner{display:block;animation:bbk-spin 0.9s linear infinite} .bb-ptr-arrow{ width:18px;height:18px;color:var(--bbk-blue); transition:transform var(--bbk-t-fast) var(--bbk-spring); } .bb-ptr.is-loading .bb-ptr-arrow{display:none} .bb-ptr.is-armed .bb-ptr-arrow{transform:rotate(180deg)} @keyframes bbk-spin{to{transform:rotate(360deg)}} /* ════════════════════════════════════════════════════════════════════════ Fallback: no backdrop-filter -> solid surfaces so glass never reads as transparent grey on old engines. ════════════════════════════════════════════════════════════════════════ */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .bb-sheet{background:rgba(255,255,255,0.97)} :root[data-theme="dark"] .bb-sheet{background:rgba(9,28,53,0.97)} } /* ════════════════════════════════════════════════════════════════════════ Reduced motion: kill shimmer/spin + drop transitions, keep states usable. ════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .bb-skeleton-img, .bb-skeleton-line{animation:none;background:var(--bbk-skel-base)} .bb-ptr.is-loading .bb-ptr-spinner{animation:none} .bb-sheet, .bb-sheet-backdrop, .bb-segmented-track, .bb-ptr-indicator, .bb-ptr-arrow, .bb-skeleton{transition-duration:0.01ms !important} .bb-skeleton-enter{opacity:1;transform:none} }