:root { --bg: #f6f7f5; --panel: #ffffff; --ink: #1b2320; --muted: #6b7a72; --line: #e2e7e3; --brand: #2f7d5d; --brand-dark: #24634a; --free: #e8f5ee; --free-ink: #1f6b4c; --mine: #2f7d5d; --taken: #eceeed; --taken-ink: #8a9691; --block: #fdeceb; --block-ink: #b0453c; --danger: #c0392b; --radius: 10px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif; /* No overflow-x here on purpose: giving any non-visible overflow is a well-known trigger for iOS Safari to stop treating position:fixed elements as relative to the viewport - the fixed bottom selection bar would then render relative to the full document instead, off past the visible page and effectively invisible. Anything that could scroll sideways (the day strip, the booking grid) already scrolls inside its own container. */ } a { color: var(--brand-dark); } /* * Mobile-first base: this file's unqualified rules target a phone in one hand. * `min-width` queries layer on room for wider screens - nothing here relies on * a `max-width` query to become usable, only to get roomier once there's space. */ .wrap { width: min(1100px, 94vw); margin: 0 auto; } /* Form controls default to 16px so focusing one never triggers iOS's auto-zoom - the classic mobile-web papercut of a page suddenly zooming in the moment you tap a date or text field. */ input, select, button, textarea { font-size: 16px; } /* ---- top bar ---- Mobile-first: brand on its own row, nav links wrap into a second row of generously-tappable pills below it. From 640px up there is room for the original single-row layout, brand and nav sharing the line. */ .topbar { background: var(--panel); border-bottom: 1px solid var(--line); } .topbar-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 0; } .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; } .brand-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--brand); box-shadow: inset -3px -3px 0 rgba(0,0,0,.12); } .nav { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; width: 100%; } .nav a, .nav-user { padding: 6px 4px; } .nav a { color: var(--muted); text-decoration: none; font-weight: 500; } .nav a:hover { color: var(--ink); } .nav-user { color: var(--ink); font-weight: 600; } .inline { display: inline; } /* The generic nav-link padding has higher specificity than .btn. Restore the Join link's button dimensions so it remains a clear, thumb-sized CTA. */ .nav a.nav-join { min-height: 44px; padding: 8px 14px; white-space: nowrap; color: white } @media (min-width: 640px) { .topbar-inner { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 0; } .nav { width: auto; gap: 14px; } .nav a, .nav-user { padding: 0; } .nav a.nav-join { min-height: 38px; padding: 6px 10px; } } /* ---- shared bits ---- */ /* The extra bottom room is for the fixed bottom-sheet selection bar (below) - generous on mobile where it wraps onto two lines, tightened once it becomes a small floating pill instead. */ main.wrap { padding: 26px 0 110px; } h1 { font-size: 26px; margin: 0 0 4px; } h2.section-title { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 30px 0 10px; } .muted { color: var(--muted); margin: 0; } .right { text-align: right; } /* Mobile-first: the title and its controls (a date picker, a "back" link...) stack as two full-width rows, so neither is squeezed fighting the other for space. From 640px up there is room to sit them side by side instead. */ .page-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .page-head > :last-child { width: 100%; } @media (min-width: 640px) { .page-head { flex-direction: row; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .page-head > :last-child { width: auto; } } /* min-height rather than a bigger padding value keeps a one-line button from growing too, while still guaranteeing a thumb-sized tap target on phones. */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 8px 14px; border-radius: var(--radius); font: inherit; text-decoration: none; cursor: pointer; } .btn:hover { border-color: #cfd8d3; } .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; } .btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); } .btn-sm { min-height: 38px; padding: 6px 10px; font-size: 14px; } .btn-quiet { color: var(--muted); } .is-disabled { pointer-events: none; opacity: .35; } .link-danger { background: none; border: 0; color: var(--danger); font: inherit; font-size: 12px; cursor: pointer; padding: 2px 0 0; text-decoration: underline; } .flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; border: 1px solid; } .flash-success { background: #eaf6ef; border-color: #bfe3cd; color: #1d6a49; } .flash-error { background: #fdecea; border-color: #f5c6c2; color: #99342b; } .notice { background: var(--panel); border: 1px dashed var(--line); padding: 12px 14px; border-radius: var(--radius); margin-bottom: 16px; color: var(--muted); } .empty { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; text-align: center; color: var(--muted); } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .card-form { max-width: 420px; margin: 10px auto; } .card-form label { display: block; margin: 12px 0; font-weight: 600; font-size: 14px; } .card-form input { width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fbfcfb; } .card-form .btn { width: 100%; margin-top: 8px; } /* ---- date pickers ---- */ /* * The date field first, full width, with the ‹/› day-flip buttons sharing a * row underneath - a native date control's own internal layout claims more * width than a phone screen has room for beside anything else, so this does * not try to fit all three in one row until there is real space for it (see * the min-width query below). */ .datepick { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "date date" "prev next"; gap: 6px; } .datepick input, .blockrow input, .blockrow select { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; background: var(--panel); /* 16px: the field iOS is most eager to zoom into */ } .datepick input { grid-area: date; width: 100%; } .datepick > :first-child { grid-area: prev; } .datepick > :last-child { grid-area: next; } @media (min-width: 400px) { .datepick { grid-template-columns: auto 1fr auto; grid-template-areas: "prev date next"; align-items: center; } } .daystrip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .day { flex: 0 0 auto; width: 52px; min-height: 44px; text-align: center; padding: 8px 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--muted); scroll-snap-align: start; } .day-dow { display: block; font-size: 11px; text-transform: uppercase; } .day-num { display: block; font-size: 17px; font-weight: 700; color: var(--ink); } .day.is-on { background: var(--brand); border-color: var(--brand); color: #dff0e7; } .day.is-on .day-num { color: #fff; } /* ---- tables ---- Base sizing fits two courts on a narrow phone with no horizontal scroll at all; .grid-scroll's overflow-x is a safety net for a font size the visitor has bumped up, or a club that adds a third court later, not the norm. */ .grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); } table { border-collapse: collapse; width: 100%; } .grid th, .grid td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: center; } .grid thead th { background: #f0f3f1; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .grid thead th small, .col-time small { display: block; font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; } .col-time { text-align: left; white-space: nowrap; font-weight: 600; min-width: 88px; font-size: 13px; } .row-past { opacity: .5; } .cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 44px; border: 1px solid transparent; border-radius: 8px; padding: 8px 4px; font: inherit; font-size: 13px; text-decoration: none; text-align: center; } .cell small { font-size: 11px; opacity: .8; } @media (min-width: 480px) { .grid th, .grid td { padding: 8px; } .grid thead th { font-size: 13px; } .col-time { min-width: 116px; font-size: 14px; } .cell { padding: 9px 6px; font-size: 14px; } } .cell-free { background: var(--free); color: var(--free-ink); border-color: #cbe6d8; font-weight: 600; cursor: pointer; touch-action: manipulation; } .cell-free:hover { background: var(--brand); color: #fff; border-color: var(--brand); } .cell-mine { background: var(--mine); color: #fff; font-weight: 600; } .cell-cont { font-size: 12px; opacity: .75; } .cell-mine .link-danger { color: #d9f0e3; } .cell-taken { background: var(--taken); color: var(--taken-ink); } .cell-block { background: var(--block); color: var(--block-ink); } .cell-past { color: #c7cfcb; } /* ---- legend ---- */ .legend { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 13px; margin-top: 14px; } .sw { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 4px; font-size: 10px; font-style: normal; font-weight: 700; } .sw-free { background: var(--free); border: 1px solid #cbe6d8; } .sw-mine { background: var(--mine); } .sw-taken { background: var(--taken); } .sw-block { background: var(--block); } /* ---- lists ---- */ .list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .list th, .list td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; } .list thead th { background: #f0f3f1; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .list tbody tr:last-child td { border-bottom: 0; } .list-muted { color: var(--muted); } /* My Bookings: each reservation becomes a readable card on a phone instead of squeezing seven table columns into a narrow viewport. */ .booking-list { background: transparent; border: 0; border-radius: 0; overflow: visible; } .booking-list thead { display: none; } .booking-list, .booking-list tbody, .booking-list tr, .booking-list td { display: block; width: 100%; } .booking-list tbody { display: grid; gap: 12px; } .booking-list tr { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; } .booking-list td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; border: 0; text-align: right; } .booking-list td::before { content: attr(data-label); flex: 0 0 82px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-align: left; text-transform: uppercase; } .booking-list .booking-action { border-top: 1px solid var(--line); justify-content: stretch; margin-top: 5px; padding-top: 12px; } .booking-list .booking-action::before { display: none; } .booking-list .booking-action .btn { width: 100%; } @media (min-width: 640px) { .booking-list { display: table; width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .booking-list thead { display: table-header-group; } .booking-list tbody { display: table-row-group; } .booking-list tr { display: table-row; background: transparent; border: 0; border-radius: 0; padding: 0; } .booking-list td { display: table-cell; width: auto; padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; } .booking-list td::before { display: none; } .booking-list .booking-action { display: table-cell; border-top: 0; margin: 0; padding: 11px 14px; text-align: right; } .booking-list .booking-action .btn { width: auto; } } /* ---- admin ---- */ .stats { display: flex; gap: 12px; flex-wrap: wrap; } .stat { flex: 1 1 160px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; color: var(--muted); font-size: 13px; } .stat-num { display: block; font-size: 26px; font-weight: 700; color: var(--ink); } .blockrow { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; } .blockrow label { font-size: 13px; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; gap: 5px; } .slotpick { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 14px 0; } .slotpick legend { font-size: 12px; text-transform: uppercase; color: var(--muted); } .slotbox { display: inline-flex; align-items: center; gap: 5px; margin: 4px 12px 4px 0; font-size: 14px; } /* ---- range selection ---- Placed after the base cell rules so a selected cell beats :hover. */ .howto { color: var(--muted); font-size: 14px; margin: 0 0 12px; } .cell-free.is-sel, .cell-free.is-preview { background: var(--brand); color: #fff; border-color: var(--brand); } .cell-free.is-preview { background: #4d9a79; } .cell-free.is-anchor { box-shadow: inset 0 0 0 2px var(--brand-dark); } /* * Mobile-first: an edge-to-edge bottom sheet, safe-area-aware for the iPhone * home indicator. From 640px up there is room to float it as a smaller, * centered pill instead, which is where this pattern started. * * --selbar-gap (set by select-range.js from window.visualViewport, 0 until * then) is added on top of the resting `bottom` value below, never in place * of it: `position: fixed; bottom: 0` docks to the LAYOUT viewport, but a * mobile browser's own toolbar - and the keyboard - shrink the VISUAL one * without shrinking the layout one, which on some Android Chrome builds * leaves a plain fixed-bottom bar sitting below the toolbar, off the bottom * of what is actually on screen. The gap corrects for exactly that. */ .selbar { position: fixed; left: 0; right: 0; bottom: var(--selbar-gap, 0px); z-index: 30; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: var(--ink); color: #fff; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(0,0,0,.2); } .selbar[hidden] { display: none; } .selbar-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; } .selbar-text strong { font-size: 14px; } .selbar-text span { font-size: 13px; opacity: .85; } .selbar-text em { font-size: 12px; opacity: .65; font-style: normal; } .selbar-actions { display: flex; gap: 8px; flex: 0 0 auto; } .selbar .btn { min-height: 40px; } .selbar .btn-quiet { background: transparent; border-color: rgba(255,255,255,.28); color: #cfdad4; } .selbar .btn-quiet:hover { border-color: rgba(255,255,255,.6); } @media (min-width: 640px) { main.wrap { padding-bottom: 50px; } .selbar { left: 50%; right: auto; bottom: calc(20px + var(--selbar-gap, 0px)); transform: translateX(-50%); gap: 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 12px 16px; max-width: 94vw; } } /* ---- status badges ---- */ .badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .badge-awaiting_payment { background: #fdf3e3; color: #8a5a12; } .badge-receipt_submitted { background: #e7f0fb; color: #245b96; } .badge-confirmed { background: var(--free); color: var(--free-ink); } .badge-cancelled { background: var(--taken); color: var(--taken-ink); } .badge-expired { background: var(--taken); color: var(--taken-ink); } .badge-block { background: var(--block); color: var(--block-ink); } .overdue { display: block; font-size: 11px; color: var(--danger); } .list td small { display: block; font-size: 11px; } /* ---- payment page ---- */ .paycols { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; } .card-title { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 8px; } .card-title + .list { margin-bottom: 22px; } .list-flat { border: 0; border-radius: 0; } .list-flat td { padding: 8px 0; } .total-row td { border-top: 2px solid var(--line); border-bottom: 0; font-size: 16px; } .rate-note { font-size: 12px; } .pay-card { background: #fbfdfc; } .countdown { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; background: #eaf6ef; border: 1px solid #bfe3cd; color: #1d6a49; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; } .countdown-label { font-size: 13px; font-weight: 600; } .countdown-clock { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .countdown-note { font-size: 12px; opacity: .8; } .countdown.is-urgent { background: #fdf3e3; border-color: #f3d9a4; color: #8a5a12; } .countdown.is-overdue { background: #fdecea; border-color: #f5c6c2; color: #99342b; } .paysteps { margin: 0 0 14px; padding-left: 20px; } .paysteps li { margin-bottom: 8px; } .gcash { font-size: 18px; letter-spacing: .04em; color: var(--brand-dark); } .paid { background: var(--free); color: var(--free-ink); padding: 12px 14px; border-radius: var(--radius); font-weight: 600; } .uploadform { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 6px; } .uploadform label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; } .uploadform input[type=file] { display: block; margin-top: 6px; font: inherit; } .uploadform .muted { font-size: 12px; margin-bottom: 10px; } .cancelrow { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 13px; } .reviewform { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .reviewform input[type=text] { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; width: 150px; } .actions-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .pwdetails { position: relative; } .pwdetails summary { list-style: none; cursor: pointer; } .pwdetails summary::-webkit-details-marker { display: none; } .pwform { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; display: flex; flex-direction: column; gap: 8px; width: 200px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); } .pwform label { font-size: 12px; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; gap: 4px; } .pwform input { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; } .cell-ref { display: block; font-size: 11px; color: #dff0e7; text-decoration: underline; } .cell-mine.is-unpaid { background: #b8863a; } @media (min-width: 720px) { .paycols { grid-template-columns: 1fr 1fr; } } /* ---- footer ---- */ .footer { border-top: 1px solid var(--line); background: var(--panel); padding: 16px 0; color: var(--muted); font-size: 13px; }