/* ========================================== FIRST IN SAFETY — MOBILE APP VIEW (HOME) Only activates when and the viewport is mobile. ========================================== */ :root{ --appbar-h: 62px; --tabbar-h: 74px; --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); } .appview-home{ display:none; /* default off */ } /* ========================================== APP VIEW — Primary action button (.reg) (works anywhere, not just inside .up-row) ========================================== */ @media (max-width: 900px){ body.is-appview-o2 .reg, body.is-appview-bls .reg, body.is-appview-basic .reg, body.is-appview-bleeding .reg-row, body.is-appview-babysitting .reg-row{ display:inline-flex; align-items:center; justify-content:center; gap: 8px; width: fit-content; background: linear-gradient(180deg, var(--red-2), var(--red)); color:#fff; text-decoration:none; font-weight: 900; padding: 10px 12px; border-radius: 14px; box-shadow: 0 12px 22px rgba(139,27,27,.22); white-space: nowrap; } /* full-width variant when placed in a grid column */ body.is-appview-o2 .reg.block, body.is-appview-bls .reg.block, body.is-appview-basic .reg.block, body.is-appview-bleeding .reg-block, body.is-appview-babysitting .reg-block{ width:100%; } } /* Turn on the app view when JS sets body.is-appview */ @media (max-width: 900px){ body.is-appview{ background: linear-gradient(180deg, var(--paper-2), #fff); } /* Hide the normal website chrome on app view */ body.is-appview .site-header, body.is-appview .site-footer, body.is-appview main{ display:none !important; } body.is-appview .appview-home{ display:block; min-height: 100dvh; padding-top: calc(var(--appbar-h) + var(--safe-top)); padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); } .appview-wrap{ max-width: 640px; margin: 0 auto; padding: 14px 14px 24px; } /* App Bar */ .appbar{ position: fixed; top:0; left:0; right:0; height: calc(var(--appbar-h) + var(--safe-top)); padding-top: var(--safe-top); background: radial-gradient(900px 240px at 20% 0%, rgba(255,255,255,.12), rgba(255,255,255,0)) , linear-gradient(180deg, #0a1f3b, #071a33); border-bottom: 1px solid rgba(255,255,255,.10); z-index: 50; } .appbar-inner{ height: var(--appbar-h); display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 0 14px; max-width: 640px; margin: 0 auto; } .appbrand{ display:flex; align-items:center; gap: 10px; text-decoration:none; } .appbrand img{ width: 34px; height: 34px; border-radius: 999px; box-shadow: 0 10px 22px rgba(0,0,0,.25); } .appbrand .title{ color:#fff; font-weight:900; letter-spacing:.6px; font-size: 18px; line-height: 1.1; } .appbar .appbar-cta{ display:flex; align-items:center; gap: 10px; } .appbar .cta-schedule{ background: linear-gradient(180deg, var(--red-2), var(--red)); color:#fff; border:0; border-radius: 14px; padding: 10px 14px; font-weight: 800; text-decoration:none; box-shadow: 0 12px 22px rgba(139,27,27,.25); } /* Hero card */ .app-hero{ background: linear-gradient(180deg, rgba(11,35,66,.96), rgba(11,35,66,.88)); border-radius: 18px; box-shadow: var(--shadow-soft); color:#fff; padding: 16px; overflow:hidden; position: relative; } .app-hero h1{ margin: 0 0 6px; font-size: 22px; line-height: 1.15; letter-spacing:.2px; } .app-hero p{ margin: 0 0 14px; color: rgba(255,255,255,.88); font-size: 14px; line-height: 1.35; } .app-hero-actions{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } .app-hero-actions a{ display:flex; justify-content:center; align-items:center; gap: 8px; padding: 12px 12px; border-radius: 14px; font-weight: 900; text-decoration:none; border: 1px solid rgba(255,255,255,.10); } .app-hero-actions .a-gold{ background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #102033; } .app-hero-actions .a-red{ background: linear-gradient(180deg, var(--red-2), var(--red)); color: #fff; } /* Section headings */ .app-section-title{ margin: 16px 4px 10px; font-weight: 950; color: var(--ink); font-size: 14px; letter-spacing: .3px; } /* Quick actions grid */ .quick-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } .quick-card{ background:#fff; border: 1px solid rgba(18,32,51,.10); border-radius: 16px; box-shadow: 0 10px 22px rgba(0,0,0,.06); padding: 14px 12px; text-decoration:none; color: var(--ink); display:flex; flex-direction:column; gap: 8px; min-height: 84px; } .quick-ic{ width: 34px; height: 34px; border-radius: 12px; display:grid; place-items:center; background: rgba(11,35,66,.08); font-size: 18px; } .quick-card .label{ font-weight: 900; line-height: 1.1; } .quick-card .sub{ font-size: 12px; color: var(--muted); line-height: 1.2; } /* Upcoming list */ .up-list{ display:flex; flex-direction:column; gap: 10px; } .up-row{ background:#fff; border: 1px solid rgba(18,32,51,.10); border-radius: 16px; box-shadow: 0 10px 22px rgba(0,0,0,.06); padding: 12px; display:flex; align-items:center; justify-content:space-between; gap: 12px; } .up-left{ min-width: 0; } .up-top{ display:flex; gap: 8px; flex-wrap: wrap; align-items: baseline; } .up-date{ font-weight: 950; color: var(--ink); } .up-title{ font-weight: 900; color: var(--ink); } .up-loc{ color: var(--muted); font-size: 12px; margin-top: 4px; } .up-seats{ margin-top: 6px; display:inline-flex; align-items:center; gap: 8px; font-size: 12px; } .up-seats .badge{ font-weight: 900; font-size: 11px; letter-spacing:.4px; padding: 4px 8px; border-radius: 999px; background: rgba(11,35,66,.08); color: var(--ink); } .up-seats .count{ font-weight: 900; color: var(--red); } .up-row .reg{ flex: 0 0 auto; background: linear-gradient(180deg, var(--red-2), var(--red)); color:#fff; text-decoration:none; font-weight: 900; padding: 10px 12px; border-radius: 14px; box-shadow: 0 12px 22px rgba(139,27,27,.22); white-space: nowrap; } /* Popular courses horizontal row */ .pop-row{ display:grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; } .pop-row::-webkit-scrollbar{height: 6px} .pop-row::-webkit-scrollbar-thumb{background: rgba(18,32,51,.18); border-radius:999px} .pop-card{ scroll-snap-align: start; background:#fff; border: 1px solid rgba(18,32,51,.10); border-radius: 16px; box-shadow: 0 10px 22px rgba(0,0,0,.06); padding: 12px; text-decoration:none; color: var(--ink); display:flex; flex-direction:column; gap: 10px; min-height: 92px; } .pop-ic{ width: 44px; height: 44px; border-radius: 14px; display:grid; place-items:center; background: rgba(201,162,77,.18); font-size: 20px; } .pop-card .label{ font-weight: 950; } /* Bottom Tab Bar */ .tabbar{ position: fixed; left: 0; right: 0; bottom: 0; padding-bottom: var(--safe-bottom); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-top: 1px solid rgba(18,32,51,.12); height: calc(var(--tabbar-h) + var(--safe-bottom)); z-index: 60; } .tabs{ height: var(--tabbar-h); display:grid; grid-template-columns: repeat(5, 1fr); align-items:center; max-width: 640px; margin: 0 auto; padding: 8px 10px 10px; gap: 4px; } .tab{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 6px; text-decoration:none; color: rgba(18,32,51,.70); font-size: 11px; font-weight: 800; padding: 8px 6px; border-radius: 14px; } .tab .ico{ width: 24px; height: 24px; display:grid; place-items:center; font-size: 18px; } .tab.is-active{ color: var(--red); background: rgba(139,27,27,.07); } /* More Sheet */ .more-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 80; } .more-sheet{ position: fixed; left: 0; right: 0; bottom: -60%; background: #fff; border-top-left-radius: 22px; border-top-right-radius: 22px; border: 1px solid rgba(18,32,51,.12); box-shadow: 0 -18px 40px rgba(0,0,0,.20); padding: 14px; padding-bottom: calc(14px + var(--safe-bottom)); transition: bottom .22s ease; z-index: 90; } .more-sheet h3{ margin: 6px 4px 10px; font-size: 14px; font-weight: 950; color: var(--ink); } .more-links{ display:grid; gap: 10px; } .more-links a{ display:flex; align-items:center; justify-content:space-between; gap: 12px; text-decoration:none; color: var(--ink); background: var(--paper-2); border: 1px solid rgba(18,32,51,.10); border-radius: 16px; padding: 12px 12px; font-weight: 900; } body.is-appview-more .more-backdrop{ opacity: 1; pointer-events: auto; } body.is-appview-more .more-sheet{ bottom: 0; } } /* ========================================== FIRST IN SAFETY — MOBILE APP VIEW (SCHEDULE) Activates when ========================================== */ .appview-schedule{ display:none; } @media (max-width: 900px){ body.is-appview-schedule{ background: linear-gradient(180deg, var(--paper-2), #fff); } /* Hide normal site chrome when in schedule app mode */ body.is-appview-schedule .site-header, body.is-appview-schedule .site-footer, body.is-appview-schedule main{ display:none !important; } /* Show schedule app container */ body.is-appview-schedule .appview-schedule{ display:block; min-height: 100dvh; padding-top: calc(var(--appbar-h) + var(--safe-top)); padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); } body.is-appview-schedule .appview-wrap{ max-width: 640px; margin: 0 auto; padding: 14px 14px 24px; } /* ✅ Your spacing request */ body.is-appview-schedule .appview-wrap > .app-hero{ margin-top: 20px; } body.is-appview-schedule .app-hero{ margin-bottom: 18px; } /* Filters layout */ body.is-appview-schedule .appfilters{ background:#fff; border: 1px solid rgba(18,32,51,.10); border-radius: 18px; box-shadow: 0 10px 22px rgba(0,0,0,.06); padding: 12px; display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } body.is-appview-schedule .chipfield{ display:flex; flex-direction:column; gap:6px; } body.is-appview-schedule .chiplabel{ font-size: 11px; font-weight: 950; letter-spacing: .3px; color: rgba(18,32,51,.70); text-transform: uppercase; } body.is-appview-schedule .chipselect{ border: 1px solid rgba(18,32,51,.14); border-radius: 14px; padding: 10px 10px; font-weight: 800; background: rgba(246,241,231,.65); } body.is-appview-schedule .chipcheck{ grid-column: 1 / -1; display:flex; align-items:center; gap:10px; padding: 10px 10px; border-radius: 14px; border: 1px solid rgba(18,32,51,.10); background: rgba(246,241,231,.55); font-weight: 900; color: rgba(18,32,51,.78); } body.is-appview-schedule .chipcheck input{ width:18px; height:18px; } body.is-appview-schedule .chipactions{ grid-column: 1 / -1; display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* App schedule list */ body.is-appview-schedule .appschedule-list{ display:flex; flex-direction:column; gap: 10px; } body.is-appview-schedule .appclass{ background:#fff; border: 1px solid rgba(18,32,51,.10); border-radius: 18px; box-shadow: 0 10px 22px rgba(0,0,0,.06); padding: 12px; display:flex; gap: 12px; align-items:flex-start; } body.is-appview-schedule .appclass-date{ flex:0 0 auto; width: 86px; border-right: 1px solid rgba(18,32,51,.10); padding-right: 10px; } body.is-appview-schedule .appclass-day{ font-weight: 1000; } body.is-appview-schedule .appclass-time{ font-size: 12px; font-weight: 900; color: rgba(18,32,51,.70); margin-top: 4px; } body.is-appview-schedule .appclass-main{ min-width: 0; flex:1 1 auto; } body.is-appview-schedule .appclass-title{ margin:0; font-weight: 1000; } body.is-appview-schedule .appclass-meta{ margin-top: 4px; font-size: 12px; font-weight: 800; color: rgba(18,32,51,.72); display:flex; flex-wrap:wrap; gap: 8px; } body.is-appview-schedule .appclass-actions{ margin-top: 10px; display:flex; gap: 10px; flex-wrap:wrap; } body.is-appview-schedule .appclass-actions a, body.is-appview-schedule .appclass-actions button{ text-decoration:none; } /* ✅ Pill readable on light backgrounds */ body.is-appview-schedule .pill{ display:inline-flex; align-items:center; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(18,32,51,.14); background: rgba(246,241,231,.65); color: var(--ink); font-weight: 950; font-size: 11px; letter-spacing: .25px; text-transform: uppercase; } body.is-appview-schedule .pill-full{ background: rgba(139,27,27,.08); border-color: rgba(139,27,27,.20); color: var(--red); } } /* ========================================================= APP HERO (Schedule tweaks) — same hero style as homepage ========================================================= */ @media (max-width: 900px){ body.is-appview-schedule .appview-wrap{ /* this gives breathing room under the appbar */ padding-top: 7px; } /* Space between header and hero */ body.is-appview-schedule .app-hero{ margin-top: 14px; } /* Space between hero and filters/search */ body.is-appview-schedule .app-hero{ margin-bottom: 18px; } /* Small footer line inside hero */ body.is-appview-schedule .app-hero .app-hero-foot{ margin: 12px 0 0; font-size: 12px; line-height: 1.3; color: rgba(255,255,255,.85); } } /* ========================================== FIRST IN SAFETY — MOBILE APP VIEW (TRAINING) Activates when ========================================== */ .appview-training{ display:none; } @media (max-width: 900px){ body.is-appview-training{ background: linear-gradient(180deg, var(--paper-2), #fff); } /* Hide normal site chrome */ body.is-appview-training .site-header, body.is-appview-training .site-footer, body.is-appview-training main{ display:none !important; } /* Show training app container */ body.is-appview-training .appview-training{ display:block; min-height: 100dvh; padding-top: calc(var(--appbar-h) + var(--safe-top)); padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); } /* slight breathing room below fixed header */ body.is-appview-training .appview-wrap > .app-hero{ margin-top: 14px; margin-bottom: 16px; } /* training hero note */ .app-hero--training .app-hero-note{ margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.82); line-height: 1.35; } /* Categories grid */ .apptrain-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } .apptrain-card{ background:#fff; border: 1px solid rgba(18,32,51,.10); border-radius: 16px; box-shadow: 0 10px 22px rgba(0,0,0,.06); padding: 12px; text-decoration:none; color: var(--ink); display:flex; flex-direction:column; gap: 8px; min-height: 98px; } .apptrain-ic{ width: 42px; height: 42px; border-radius: 14px; display:grid; place-items:center; background: rgba(201,162,77,.18); font-size: 20px; } .apptrain-label{ font-weight: 950; line-height: 1.1; font-size: 13px; } .apptrain-sub{ font-size: 12px; color: var(--muted); line-height: 1.2; } /* Compact format rows */ .appformat{ display:grid; gap: 10px; } .appformat-row{ background:#fff; border: 1px solid rgba(18,32,51,.10); border-radius: 16px; box-shadow: 0 10px 22px rgba(0,0,0,.06); padding: 12px; text-decoration:none; color: var(--ink); display:flex; align-items:center; justify-content:space-between; gap: 12px; } .appformat-row .t{ font-weight: 950; line-height: 1.1; } .appformat-row .s{ margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.2; } .appformat-row .chev{ font-weight: 950; color: rgba(18,32,51,.45); font-size: 18px; } } /* ========================================== FIRST IN SAFETY — MOBILE APP VIEW (BASIC) First Aid / CPR / AED course page Activates when ========================================== */ .appview-basic{ display:none; } @media (max-width: 900px){ body.is-appview-basic{ background: linear-gradient(180deg, var(--paper-2), #fff); } /* Hide normal site chrome */ body.is-appview-basic .site-header, body.is-appview-basic .site-footer, body.is-appview-basic main{ display:none !important; } /* Show basic course app container */ body.is-appview-basic .appview-basic{ display:block; min-height: 100dvh; padding-top: calc(var(--appbar-h) + var(--safe-top)); padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); } /* breathing room under appbar */ body.is-appview-basic .appview-wrap{ max-width: 640px; margin: 0 auto; padding: 14px 14px 24px; } /* Match schedule spacing pattern */ body.is-appview-basic .appview-wrap > .app-hero{ margin-top: 14px; } body.is-appview-basic .app-hero{ margin-bottom: 16px; } /* App buttons (used in your Basic app view HTML) */ body.is-appview-basic .appbtn{ border: 1px solid rgba(18,32,51,.12); border-radius: 14px; padding: 10px 12px; font-weight: 900; cursor: pointer; background: #fff; } body.is-appview-basic .appbtn:active{ transform: translateY(1px); } body.is-appview-basic .appbtn-red{ border: 0; color:#fff; background: linear-gradient(180deg, var(--red-2), var(--red)); box-shadow: 0 12px 22px rgba(139,27,27,.18); } body.is-appview-basic .appbtn-ghost{ background: transparent; border-color: rgba(18,32,51,.18); color: var(--ink); } /* At-a-glance card */ body.is-appview-basic .appnote{ background:#fff; border: 1px solid rgba(18,32,51,.10); border-radius: 16px; box-shadow: 0 10px 22px rgba(0,0,0,.06); padding: 12px; color: var(--ink); font-size: 13px; line-height: 1.35; } /* Make

accordions look like the app cards */ body.is-appview-basic details.faq-item, body.is-appview-bleeding details.faq-item{ background:#fff; border: 1px solid rgba(18,32,51,.10); border-radius: 16px; box-shadow: 0 10px 22px rgba(0,0,0,.06); padding: 0; overflow: hidden; } body.is-appview-basic details.faq-item + details.faq-item, body.is-appview-bleeding details.faq-item + details.faq-item{ margin-top: 10px; } body.is-appview-basic details.faq-item > summary, body.is-appview-bleeding details.faq-item > summary{ list-style: none; cursor: pointer; padding: 12px 12px; font-weight: 950; color: var(--ink); display:flex; align-items:center; justify-content:space-between; gap: 10px; } body.is-appview-basic details.faq-item > summary::-webkit-details-marker{ display:none; } body.is-appview-basic details.faq-item > summary::after{ content:"›"; transform: rotate(90deg); font-size: 18px; color: rgba(18,32,51,.45); transition: transform .15s ease; } body.is-appview-basic details.faq-item[open] > summary::after, body.is-appview-bleeding details.faq-item[open] > summary::after{ transform: rotate(-90deg); } body.is-appview-basic .faq-body body.is-appview-bleeding .faq-body{ padding: 0 12px 12px; color: rgba(18,32,51,.78); font-size: 13px; line-height: 1.4; } } /* ========================================== FIRST IN SAFETY — MOBILE APP VIEW (BLS) Activates when ========================================== */ .appview-bls{ display:none; } @media (max-width: 900px){ body.is-appview-bls{ background: linear-gradient(180deg, var(--paper-2), #fff); } body.is-appview-bls .site-header, body.is-appview-bls .site-footer, body.is-appview-bls main{ display:none !important; } body.is-appview-bls .appview-bls{ display:block; min-height: 100dvh; padding-top: calc(var(--appbar-h) + var(--safe-top)); padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); } body.is-appview-bls .appview-wrap{ max-width: 640px; margin: 0 auto; padding: 14px 14px 24px; } body.is-appview-bls .appview-wrap > .app-hero{ margin-top: 14px; } body.is-appview-bls .app-hero{ margin-bottom: 16px; } /* (Accordion styles already covered by your BASIC section if you kept it. If not, we can copy those rules here too.) */ } /* ========================================== BLS — Horizontal swipe option cards ========================================== */ @media (max-width: 900px){ body.is-appview-bls .appopt-row, body.is-appview-o2 .appopt-row, body.is-appview-bleeding .appopt-row, body.is-appview-babysitting .appopt-row, body.is-appview-group .appopt-row{ display:grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } body.is-appview-bls .appopt-row::-webkit-scrollbar, body.is-appview-o2 .appopt-row::-webkit-scrollbar, body.is-appview-bleeding .appopt-row::-webkit-scrollbar, body.is-appview-babysitting .appopt-row::-webkit-scrollbar, body.is-appview-group .appopt-row::-webkit-scrollbar{ height: 6px; } body.is-appview-bls .appopt-row::-webkit-scrollbar-thumb, body.is-appview-o2 .appopt-row::-webkit-scrollbar-thumb, body.is-appview-bleeding .appopt-row::-webkit-scrollbar-thumb, body.is-appview-babysitting .appopt-row::-webkit-scrollbar-thumb, body.is-appview-group .appopt-row::-webkit-scrollbar-thumb{ background: rgba(18,32,51,.18); border-radius: 999px; } body.is-appview-bls .appopt-card, body.is-appview-o2 .appopt-card, body.is-appview-bleeding .appopt-card, body.is-appview-babysitting .appopt-card, body.is-appview-group .appopt-card{ scroll-snap-align: start; background:#fff; border: 1px solid rgba(18,32,51,.10); border-radius: 16px; box-shadow: 0 10px 22px rgba(0,0,0,.06); padding: 12px; text-decoration:none; color: var(--ink); display:flex; flex-direction:column; justify-content:space-between; gap: 10px; min-height: 132px; } body.is-appview-bls .appopt-badge, body.is-appview-o2 .appopt-badge, body.is-appview-bleeding .appopt-badge, body.is-appview-babysitting .appopt-badge, body.is-appview-group .appopt-badge{ display:inline-flex; align-items:center; gap: 6px; font-size: 11px; font-weight: 950; letter-spacing: .3px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(18,32,51,.12); background: rgba(11,35,66,.06); width: fit-content; } body.is-appview-bls .appopt-title, body.is-appview-o2 .appopt-title, body.is-appview-bleeding .appopt-title, body.is-appview-babysitting .appopt-title, body.is-appview-group .appopt-title{ font-weight: 1000; font-size: 16px; line-height: 1.1; margin-top: 6px; } body.is-appview-bls .appopt-sub, body.is-appview-o2 .appopt-sub, body.is-appview-bleeding .appopt-sub, body.is-appview-babysitting .appopt-sub, body.is-appview-group .appopt-sub{ font-size: 12px; color: var(--muted); margin-top: 3px; font-weight: 800; } body.is-appview-bls .appopt-meta, body.is-appview-o2 .appopt-meta, body.is-appview-bleeding .appopt-meta, body.is-appview-babysitting .appopt-meta, body.is-appview-group .appopt-meta{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 2px; } body.is-appview-bls .appopt-meta .tag, body.is-appview-o2 .appopt-meta .tag, body.is-appview-bleeding .appopt-meta .tag, body.is-appview-babysitting .appopt-meta .tag, body.is-appview-group .appopt-meta .tag{ display:inline-flex; align-items:center; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(18,32,51,.12); background: rgba(246,241,231,.65); font-weight: 900; font-size: 11px; color: var(--ink); } body.is-appview-bls .appopt-cta, body.is-appview-o2 .appopt-cta, body.is-appview-bleeding .appopt-cta, body.is-appview-babysitting .appopt-cta, body.is-appview-group .appopt-cta{ font-weight: 950; font-size: 12px; color: rgba(139,27,27,.90); } } /* ========================================== FIRST IN SAFETY — MOBILE APP VIEW (O2) Activates when ========================================== */ .appview-o2{ display:none; } @media (max-width: 900px){ body.is-appview-o2{ background: linear-gradient(180deg, var(--paper-2), #fff); } body.is-appview-o2 .site-header, body.is-appview-o2 .site-footer, body.is-appview-o2 main{ display:none !important; } body.is-appview-o2 .appview-o2{ display:block; min-height: 100dvh; padding-top: calc(var(--appbar-h) + var(--safe-top)); padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); } body.is-appview-o2 .appview-wrap{ max-width: 640px; margin: 0 auto; padding: 14px 14px 24px; } /* breathing room under appbar */ body.is-appview-o2 .appview-wrap > .app-hero{ margin-top: 14px; margin-bottom: 16px; } } @media (max-width: 900px){ /* scrollbar styling should apply to O2 too */ body.is-appview-o2 .appopt-row::-webkit-scrollbar{ height: 6px; } body.is-appview-o2 .appopt-row::-webkit-scrollbar-thumb{ background: rgba(18,32,51,.18); border-radius: 999px; } /* featured card border should apply to O2 too */ body.is-appview-bls .appopt-card.is-featured, body.is-appview-o2 .appopt-card.is-featured, body.is-appview-bleeding .appopt-card.is-featured{ border-color: rgba(201,162,77,.45); box-shadow: 0 12px 26px rgba(0,0,0,.08); } /* gold badge styling should apply to O2 too */ body.is-appview-bls .appopt-badge.gold, body.is-appview-o2 .appopt-badge.gold, body.is-appview-bleeding .appopt-badge.gold{ border-color: rgba(201,162,77,.40); background: rgba(201,162,77,.16); } } @media (max-width: 900px){ body.is-appview-o2 .learn-grid, body.is-appview-bls .learn-grid, body.is-appview-basic .learn-grid{ display:grid; grid-template-columns: 1fr; gap: 10px; } } /* ========================================== FIRST IN SAFETY — MOBILE APP VIEW (BLEEDING) Activates when ========================================== */ .appview-bleeding{ display:none; } @media (max-width: 900px){ body.is-appview-bleeding{ background: linear-gradient(180deg, var(--paper-2), #fff); } body.is-appview-bleeding .site-header, body.is-appview-bleeding .site-footer, body.is-appview-bleeding main{ display:none !important; } body.is-appview-bleeding .appview-bleeding{ display:block; min-height: 100dvh; padding-top: calc(var(--appbar-h) + var(--safe-top)); padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); } body.is-appview-bleeding .appview-wrap{ max-width: 640px; margin: 0 auto; padding: 14px 14px 24px; } body.is-appview-bleeding .appview-wrap > .app-hero{ margin-top: 14px; margin-bottom: 16px; } /* enable the primary button styling inside this mode too */ body.is-appview-bleeding .reg{ display:inline-flex; align-items:center; justify-content:center; gap: 8px; width: fit-content; background: linear-gradient(180deg, var(--red-2), var(--red)); color:#fff; text-decoration:none; font-weight: 900; padding: 10px 12px; border-radius: 14px; box-shadow: 0 12px 22px rgba(139,27,27,.22); white-space: nowrap; } } /* ========================================== FIRST IN SAFETY — MOBILE APP VIEW (BABYSITTING) Activates when ========================================== */ .appview-babysitting{ display:none; } @media (max-width: 900px){ body.is-appview-babysitting{ background: linear-gradient(180deg, var(--paper-2), #fff); } body.is-appview-babysitting .site-header, body.is-appview-babysitting .site-footer, body.is-appview-babysitting main{ display:none !important; } body.is-appview-babysitting .appview-babysitting{ display:block; min-height: 100dvh; padding-top: calc(var(--appbar-h) + var(--safe-top)); padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); } body.is-appview-babysitting .appview-wrap{ max-width: 640px; margin: 0 auto; padding: 14px 14px 24px; } body.is-appview-babysitting .appview-wrap > .app-hero{ margin-top: 14px; margin-bottom: 16px; } /* enable primary .reg buttons inside this mode */ body.is-appview-babysitting .reg{ display:inline-flex; align-items:center; justify-content:center; gap: 8px; width: fit-content; background: linear-gradient(180deg, var(--red-2), var(--red)); color:#fff; text-decoration:none; font-weight: 900; padding: 10px 12px; border-radius: 14px; box-shadow: 0 12px 22px rgba(139,27,27,.22); white-space: nowrap; } } /* ========================================== FIRST IN SAFETY — MOBILE APP VIEW (GROUP) Activates when ========================================== */ .appview-group{ display:none; } @media (max-width: 900px){ body.is-appview-group{ background: linear-gradient(180deg, var(--paper-2), #fff); } body.is-appview-group .site-header, body.is-appview-group .site-footer, body.is-appview-group main{ display:none !important; } body.is-appview-group .appview-group{ display:block; min-height: 100dvh; padding-top: calc(var(--appbar-h) + var(--safe-top)); padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); } body.is-appview-group .appview-wrap{ max-width: 640px; margin: 0 auto; padding: 14px 14px 24px; } body.is-appview-group .appview-wrap > .app-hero{ margin-top: 14px; margin-bottom: 16px; } /* Make FAQ match app card style (same pattern as basic/bleeding) */ body.is-appview-group details.faq-item{ background:#fff; border: 1px solid rgba(18,32,51,.10); border-radius: 16px; box-shadow: 0 10px 22px rgba(0,0,0,.06); padding: 0; overflow: hidden; } body.is-appview-group details.faq-item + details.faq-item{ margin-top: 10px; } body.is-appview-group details.faq-item > summary{ list-style: none; cursor: pointer; padding: 12px 12px; font-weight: 950; color: var(--ink); display:flex; align-items:center; justify-content:space-between; gap: 10px; } body.is-appview-group details.faq-item > summary::-webkit-details-marker{ display:none; } body.is-appview-group details.faq-item > summary::after{ content:"›"; transform: rotate(90deg); font-size: 18px; color: rgba(18,32,51,.45); transition: transform .15s ease; } body.is-appview-group details.faq-item[open] > summary::after{ transform: rotate(-90deg); } body.is-appview-group .faq-body{ padding: 0 12px 12px; color: rgba(18,32,51,.78); font-size: 13px; line-height: 1.4; } /* Enable primary .reg buttons in group mode */ body.is-appview-group .reg{ display:inline-flex; align-items:center; justify-content:center; gap: 8px; width: fit-content; background: linear-gradient(180deg, var(--red-2), var(--red)); color:#fff; text-decoration:none; font-weight: 900; padding: 10px 12px; border-radius: 14px; box-shadow: 0 12px 22px rgba(139,27,27,.22); white-space: nowrap; } body.is-appview-group .reg.block{ width:100%; } } /* ========================================== FIRST IN SAFETY — MOBILE APP VIEW (REGISTER) Activates when ========================================== */ .appview-register{ display:none; } @media (max-width: 900px){ body.is-appview-register{ background: linear-gradient(180deg, var(--paper-2), #fff); } body.is-appview-register .site-header, body.is-appview-register .site-footer, body.is-appview-register main{ display:none !important; } body.is-appview-register .appview-register{ display:block; min-height: 100dvh; padding-top: calc(var(--appbar-h) + var(--safe-top)); padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); } body.is-appview-register .appview-wrap{ max-width: 640px; margin: 0 auto; padding: 14px 14px 24px; } /* Card containers (match your app cards) */ body.is-appview-register .appcard{ background:#fff; border: 1px solid rgba(18,32,51,.10); border-radius: 18px; box-shadow: 0 10px 22px rgba(0,0,0,.06); padding: 12px; margin-top: 10px; } body.is-appview-register .appcard-title{ margin: 2px 0 10px; font-weight: 950; color: var(--ink); font-size: 14px; letter-spacing: .3px; text-transform: uppercase; } body.is-appview-register .appcard-list{ margin:0; padding-left: 18px; color: rgba(18,32,51,.80); font-size: 13px; line-height: 1.35; } /* Force registration form into 1 column */ body.is-appview-register .form-grid{ display:grid; grid-template-columns: 1fr !important; gap: 10px !important; } /* Stripe + form touch targets */ body.is-appview-register .field-control{ padding: 12px 12px; border-radius: 14px; } body.is-appview-register .card-element{ border-radius: 14px; } /* Actions stack */ body.is-appview-register .reg-actions{ display:grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; } body.is-appview-register .reg-actions .btn{ width:100%; justify-content:center; } /* Summary lines */ body.is-appview-register .summary-lines .line{ display:flex; justify-content:space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(18,32,51,.08); } body.is-appview-register .summary-lines .line.total{ border-bottom: 0; padding-top: 10px; font-weight: 950; } } @media (max-width: 900px){ body.is-appview-schedule .appbtn{ border: 1px solid rgba(18,32,51,.12); border-radius: 14px; padding: 10px 12px; font-weight: 900; cursor: pointer; background: #fff; display:inline-flex; align-items:center; justify-content:center; gap:8px; } body.is-appview-schedule .appbtn:active{ transform: translateY(1px); } body.is-appview-schedule .appbtn-red{ border: 0; color:#fff; background: linear-gradient(180deg, var(--red-2), var(--red)); box-shadow: 0 12px 22px rgba(139,27,27,.18); } body.is-appview-schedule .appbtn-ghost{ background: transparent; border-color: rgba(18,32,51,.18); color: var(--ink); } }