/* ========================================== 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 */ } /* 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); } }