/* Ossly · BJJ academy app */ :root { --bg: #0a0908; --bg-raised: #100e0c; --card: #14110e; --card-2: #181410; --border: #2b2620; --border-soft: #1e1a15; --gold: #d3a94f; --gold-dim: #8a7340; --gold-soft: rgba(211, 169, 79, 0.12); --silver: #c6cbd4; --silver-edge: #9aa0aa; --bronze: #ca894f; --bronze-edge: #a06b3b; --text: #f0ece3; --muted: #aca38f; --faint: #857e6e; --green: #6fbf73; --red: #cf6f5f; --violet: #8a6fd8; --belt-blu: #1e56d6; --belt-viola: #7c53c4; --belt-marrone: #6d4426; --belt-bianca: #ece8dd; --belt-nera: #131313; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --sans: 'Archivo', -apple-system, 'Helvetica Neue', sans-serif; } /* Light theme: same warm palette on paper tones. Activated by data-theme="light" on ; the per-user choice lives in users.theme on the server. */ :root[data-theme='light'] { --bg: #f1ede4; --bg-raised: #f8f5ee; --card: #faf8f2; --card-2: #f0ebe0; --border: #d8d1c0; --border-soft: #e5dfd1; --gold: #96721f; --gold-dim: #b89b57; --gold-soft: rgba(150, 114, 31, 0.14); --silver: #8f96a2; --silver-edge: #767d89; --bronze: #a06a37; --bronze-edge: #855626; --text: #211d16; --muted: #6e6759; --faint: #99917f; --green: #3f8a45; --red: #b04c3c; --violet: #6b4ec2; } /* dark-hardcoded surfaces that don't come from the variables above */ :root[data-theme='light'] body { background: #e9e4d8; } :root[data-theme='light'] body::before { background: rgba(241, 237, 228, 0.82); } :root[data-theme='light'] #app { box-shadow: 0 0 60px rgba(70, 58, 35, 0.18); border-left-color: #ddd6c6; border-right-color: #ddd6c6; } :root[data-theme='light'] .tabbar { background: rgba(248, 245, 238, 0.96); } :root[data-theme='light'] .toast { background: #fbf9f3; } :root[data-theme='light'] .product .img { background: repeating-linear-gradient(45deg, #eae5d8 0px, #eae5d8 7px, #e3ddce 7px, #e3ddce 14px); } /* media viewers stay dark in both themes; restore light-on-dark controls */ :root[data-theme='light'] .video-overlay { --text: #f0ece3; --card: #14110e; --card-2: #181410; --border: #2b2620; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } /* pan only: kills double-tap zoom, and pinch-zoom on browsers that honor touch-action */ html { touch-action: pan-x pan-y; } /* In a browser tab, dragging down from the top is pull-to-refresh — an accidental reload mid-form. The installed PWA never had the gesture; this is for tab users. */ html, body { overscroll-behavior-y: none; } /* Long-pressing a control on a touch screen selects its label text. Controls only: content (names, notes, payments, the changelog) stays copyable. */ button, .btn, .tab, .chip, .card.tappable, .row-list .row, .level-row, .lesson-card, .tech-row .box, .avatar, .wheel, .ig-cell { -webkit-user-select: none; user-select: none; } body { background: #050403; color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; } /* Standalone PWA: keep the iOS status bar readable while content scrolls under it. env(safe-area-inset-top) is 0 in the in-browser version, so this renders nothing there. */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: rgba(5, 4, 3, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 60; pointer-events: none; } #app { max-width: 430px; margin: 0 auto; min-height: 100dvh; background: var(--bg); position: relative; box-shadow: 0 0 60px rgba(0, 0, 0, 0.8); } @media (min-width: 470px) { #app { border-left: 1px solid #171410; border-right: 1px solid #171410; } } .view { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); min-height: 100dvh; } .view.no-tabs { padding-bottom: 24px; } .hidden { display: none !important; } /* ------------------------------------------------ typography helpers */ .mono { font-family: var(--mono); } .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .label.gold { color: var(--gold); } h1.page-title { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); } /* ------------------------------------------------ logo */ .logo { display: flex; align-items: center; gap: 10px; } .logo .kanji { display: flex; flex-direction: column; justify-content: center; line-height: 1.05; font-size: 15px; font-weight: 600; color: var(--text); } /* "Subscribe" / "Pay" inside a plan card — full width, sitting at the bottom */ .plan-card .plbuy { margin-top: 12px; width: 100%; padding: 11px 12px; font-size: 14px; } .plan-card > .plbuy:only-child { margin-top: 0; } /* The academy's uploaded logo, in place of the drawn monogram */ .logo .brandlogo { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; display: block; } /* Same mark, big, on the academy settings screen */ .brandpreview { width: 72px; height: 72px; border-radius: 14px; border: 1px solid var(--border); background: var(--card-2); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; font-family: var(--mono); font-size: 20px; letter-spacing: 0.06em; color: var(--gold); } .brandpreview img { width: 100%; height: 100%; object-fit: cover; display: block; } .logo .wordmark { font-family: var(--sans); font-weight: 700; font-size: 21px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); white-space: nowrap; } /* ------------------------------------------------ header */ .page-head { position: sticky; top: 0; z-index: 45; padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px; background: var(--bg-raised); border-bottom: 1px solid var(--border-soft); } .page-head .head-row { display: flex; align-items: center; justify-content: space-between; min-height: 36px; } .page-head h1 { margin-top: 6px; } .page-head .page-title { font-size: 22px; } .page-head.slim .head-row { position: relative; justify-content: space-between; gap: 13px; } .page-head.slim .page-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 62%; margin: 0; font-size: 18px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Non-sticky hero block right under the sticky header (home greeting): the team photo behind the greeting, scrolls away with the content. The gradient over it is what keeps the text readable — dark enough at the bottom, where the title sits, to hold contrast against the white gis. */ .page-hero { padding: 46px 20px 20px; background: linear-gradient(180deg, rgba(10, 9, 8, 0.55) 0%, rgba(10, 9, 8, 0.68) 42%, rgba(10, 9, 8, 0.9) 100%), var(--hero-image, linear-gradient(160deg, #191410 0%, #0a0908 55%, #1c1611 100%)) center 28% / cover no-repeat; border-bottom: 1px solid var(--border-soft); } /* The photo stays dark under both themes, so the greeting keeps its light ink instead of following --text. */ .page-hero .label { color: #d5ccb8; } .page-hero .page-title { color: #f7f4ed; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.55); } .icon-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 6px; cursor: pointer; font-size: 16px; } .icon-btn:active { background: var(--card-2); } /* ------------------------------------------------ content sections */ .content { padding: 20px; display: flex; flex-direction: column; gap: 22px; } .section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } .section-head .num { font-family: var(--mono); font-size: 10px; color: var(--gold); letter-spacing: 0.15em; } .section-head .title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; } .section-head .line { flex: 1 0 12px; height: 1px; background: var(--border-soft); } .section-head .action { flex-shrink: 0; } .section-head .end { font-family: var(--mono); font-size: 10px; color: var(--faint); } .section-head .action { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: var(--gold); cursor: pointer; background:none; border:none; } .section-head.collapsible { cursor: pointer; } .section-head .collapse-caret { flex-shrink: 0; font-size: 15px; line-height: 1; color: var(--gold); transition: transform .18s ease; } .section-head .collapse-caret.collapsed { transform: rotate(-90deg); } /* Payments KPI list: one stat per line, label ↔ value */ .kpi-card { padding: 4px 16px; } .kpi-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; } .kpi-row + .kpi-row { border-top: 1px solid var(--border-soft); } .kpi-row .kpi-val { font-family: var(--mono); font-size: 17px; font-weight: 600; } .kpi-row .kpi-val.gold { color: var(--gold); } .kpi-row .kpi-val.green { color: var(--green); } .kpi-row .kpi-val.red { color: var(--red); } /* Custom-payment "is a subscription" checkbox row */ .field.check-field { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; cursor: pointer; } /* Custom box so it follows the app theme (the global color-scheme:dark on field inputs would otherwise render a dark checkbox on the light theme). */ .field.check-field input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; flex-shrink: 0; margin: 0; border: 1.5px solid var(--border); border-radius: 5px; background: var(--card); cursor: pointer; position: relative; } .field.check-field input[type="checkbox"]:checked { background: var(--gold); border-color: var(--gold); } .field.check-field input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 9px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg); } .field.check-field span { font-size: 13.5px; color: var(--text); } /* Transactions date range: two pickers side by side */ .tx-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ------------------------------------------------ cards */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; } .card.pad { padding: 16px; } .card.dashed { border-style: dashed; background: transparent; } .card.tappable { cursor: pointer; } .card.tappable:active { background: var(--card-2); } .empty-card { border: 1px dashed var(--border); border-radius: 6px; padding: 22px; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; color: var(--faint); } /* ------------------------------------------------ chips */ .chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--border); color: var(--muted); border-radius: 3px; white-space: nowrap; } .chip.gold { border-color: var(--gold-dim); color: var(--gold); } .chip.fill { background: var(--gold); border-color: var(--gold); color: #171204; font-weight: 700; } .chip.tu { color: var(--text); border-color: var(--muted); } .chip.green { border-color: rgba(107, 176, 122, 0.5); color: var(--green); } .chip.red { border-color: rgba(199, 94, 94, 0.5); color: var(--red); } .chip.cancelled { border-color: rgba(199, 94, 94, 0.5); background: rgba(199, 94, 94, 0.12); color: var(--red); font-weight: 700; } /* filter row */ .filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .filters::-webkit-scrollbar { display: none; } .filter-btn { flex: 1; font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; padding: 10px 12px; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 4px; cursor: pointer; white-space: nowrap; } .filter-btn.active { background: var(--gold); border-color: var(--gold); color: #171204; font-weight: 700; } /* ------------------------------------------------ buttons */ .btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px; border-radius: 5px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: pointer; } .btn:active { background: var(--card-2); } .btn.gold { border-color: var(--gold-dim); color: var(--gold); background: transparent; } .btn.solid { background: var(--gold); border-color: var(--gold); color: #171204; } .btn.danger { color: var(--red); } .btn:disabled { opacity: 0.45; cursor: default; } .btn-row { display: flex; gap: 10px; } .btn-row .btn { flex: 1; } /* ------------------------------------------------ avatar */ .avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; color: rgba(10, 8, 5, 0.85); border: 3px solid rgba(240, 236, 227, 0.25); box-shadow: 0 0 0 1px rgba(240, 236, 227, 0.22); flex-shrink: 0; position: relative; } .avatar.sm { width: 36px; height: 36px; font-size: 12px; } .avatar.md { width: 44px; height: 44px; font-size: 14px; } .avatar.lg { width: 72px; height: 72px; font-size: 24px; border-width: 4px; } .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } /* ------------------------------------------------ belt bar */ .belt { display: flex; height: 26px; border-radius: 3px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .belt.thin { height: 14px; } .belt .body { flex: 1; position: relative; } .belt .body.bianca { background: linear-gradient(180deg, #f4f1e8, #dcd7ca); } .belt .body.blu { background: linear-gradient(180deg, #2a63e8, #1848b8); } .belt .body.viola { background: linear-gradient(180deg, #8a5fd6, #6a43ab); } .belt .body.marrone { background: linear-gradient(180deg, #7d5130, #59391f); } .belt .body.nera { background: linear-gradient(180deg, #262626, #0e0e0e); } /* kids track */ .belt .body.grigia { background: linear-gradient(180deg, #a3a8ae, #7f858c); } .belt .body.gialla { background: linear-gradient(180deg, #f0c236, #cf9d14); } .belt .body.arancio { background: linear-gradient(180deg, #f0912e, #d06d12); } .belt .body.verde { background: linear-gradient(180deg, #4aa85c, #2f7d3f); } .belt .rank-bar { width: 26%; background: #111; display: flex; align-items: stretch; justify-content: center; gap: 4px; padding: 3px 4px; } .belt .rank-bar.red { background: #8f1f1f; } .belt .stripe { width: 5px; background: #f4f1e8; border-radius: 1px; } .belt .tail { width: 6%; } .belt .tail.bianca { background: #e8e4d9; } .belt .tail.blu { background: #1f55cc; } .belt .tail.viola { background: #7a4fc4; } .belt .tail.marrone { background: #6b4226; } .belt .tail.nera { background: #181818; } .belt .tail.grigia { background: #90959b; } .belt .tail.gialla { background: #dcae1e; } .belt .tail.arancio { background: #de7f1e; } .belt .tail.verde { background: #3d9450; } /* ------------------------------------------------ progress bar */ .progress { height: 4px; border-radius: 2px; background: var(--border-soft); overflow: hidden; } .progress > div { height: 100%; background: var(--gold); border-radius: 2px; } .progress.gray > div { background: var(--faint); } /* ------------------------------------------------ stat blocks */ .stats-row { display: flex; } .stats-row .stat { flex: 1; padding: 4px 0; } .stats-row .stat + .stat { border-left: 1px solid var(--border-soft); padding-left: 16px; } .stat .value { font-family: var(--mono); font-size: 30px; font-weight: 500; letter-spacing: -0.02em; } .stat .value.sm { font-size: 24px; } .stat .name { margin-top: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } /* ------------------------------------------------ bar charts */ .week-chart { display: flex; gap: 8px; align-items: flex-end; margin-top: 16px; } .week-chart .col { flex: 1; display: flex; flex-direction: column; gap: 6px; align-items: center; } .week-chart .bar-area { width: 100%; height: 44px; display: flex; align-items: flex-end; } .week-chart .bar { width: 100%; background: var(--gold); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .9; } .week-chart .bar.zero { background: var(--border); height: 2px; } .week-chart .day { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--faint); } .week-chart .day.today { color: var(--gold); } /* 12-month variant: tighter columns, smaller labels */ .week-chart.months { gap: 5px; } .week-chart.months .day { font-size: 7.5px; letter-spacing: 0.03em; } /* ------------------------------------------------ list rows */ .row-list { display: flex; flex-direction: column; } .row-list .row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; } .row-list .row:last-child { border-bottom: none; } .row-list .row:active { background: var(--card-2); } .row .grow { flex: 1; min-width: 0; } .row .name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row .sub { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 3px; letter-spacing: 0.05em; } .row .chev { color: var(--faint); font-size: 16px; } /* A row whose feature is built but not live yet: dimmed, inert, "soon" chip. Specificity beats the .row-list .row:hover rule further down. */ .row-list .row.soon { cursor: default; opacity: 0.4; } .row-list .row.soon:active, .row-list .row.soon:hover { background: transparent; } /* ------------------------------------------------ schedule cards */ .day-sep { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 12px; } .day-sep .dname { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .day-sep .line { flex: 1; height: 1px; background: var(--border-soft); } .day-sep.today .dname { color: var(--gold); } .day-sep.today .line { background: var(--gold); opacity: 0.4; } .day-past .lesson-card { opacity: 0.5; } .day-past .day-sep .dname { color: var(--faint); } .past-toggle { display: flex; gap: 18px; margin: -6px 0 -4px; } .past-btn { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; color: var(--gold); background: none; border: none; cursor: pointer; padding: 0; } .past-btn.dim { color: var(--muted); } .filter-hint { display: block; width: 100%; text-align: left; border: 1px dashed var(--gold); border-radius: 6px; padding: 11px 14px; background: color-mix(in srgb, var(--gold) 8%, transparent); color: var(--gold); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; cursor: pointer; } .lesson-card { display: flex; align-items: stretch; background: var(--card); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; cursor: pointer; margin-bottom: 10px; } .lesson-card:active { background: var(--card-2); } /* A cancelled lesson stays on the schedule — struck through and faded, so it reads as "this is off" rather than quietly disappearing from the week. */ .lesson-card.is-cancelled { opacity: 0.62; } .lesson-card.is-cancelled .time .start, .lesson-card.is-cancelled .coach { text-decoration: line-through; } .card.is-cancelled { opacity: 0.72; } .cancel-banner { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-align: center; padding: 11px 14px; margin-bottom: 12px; border: 1px solid rgba(199, 94, 94, 0.5); background: rgba(199, 94, 94, 0.12); color: var(--red); border-radius: 6px; } .lesson-card .time { width: 86px; padding: 14px 0 14px 16px; flex-shrink: 0; } .lesson-card .time .start { font-family: var(--mono); font-size: 21px; font-weight: 500; } .lesson-card .time .end { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 3px; } .lesson-card .info { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; justify-content: center; } .lesson-card .info .chips { display: flex; gap: 6px; flex-wrap: wrap; } .lesson-card .info .coach { font-size: 13.5px; color: var(--muted); } .lesson-card .accent { width: 3px; flex-shrink: 0; } .lesson-card .accent.gold { background: var(--gold); } .lesson-card .accent.violet { background: var(--violet); } /* ------------------------------------------------ attendance register */ /* A slim one-line lesson card: the day, the hour the class started, and what it was. Years of history scroll past at ~42px a row instead of the ~70px a full schedule card takes, and every row still opens its lesson. */ .att-row { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 9px 18px 9px 14px; margin-bottom: 7px; cursor: pointer; overflow: hidden; } .att-row:active { background: var(--card-2); } .att-row .when { display: flex; align-items: baseline; gap: 6px; width: 60px; flex-shrink: 0; } .att-row .when .d { font-family: var(--mono); font-size: 17px; font-weight: 500; } .att-row .when .wd { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } .att-row .hour { font-family: var(--mono); font-size: 13.5px; color: var(--gold); flex-shrink: 0; } .att-row .hour.dim { color: var(--faint); } .att-row .accent { position: absolute; top: 0; right: 0; bottom: 0; width: 3px; } .att-row .accent.gold { background: var(--gold); } .att-row .accent.violet { background: var(--violet); } /* Nothing to open when the lesson behind the presence is gone: no pointer, no tap feedback, and the stripe fades to say the row is just a date. */ .att-row.plain { cursor: default; } .att-row.plain:active { background: var(--card); } .att-row.plain .accent { opacity: 0.25; } /* ------------------------------------------------ photo lightbox */ .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6, 5, 4, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; cursor: pointer; animation: fadeIn 0.18s ease; } .lightbox img { width: min(82vw, 380px); height: min(82vw, 380px); object-fit: cover; border-radius: 12px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); } /* ------------------------------------------------ confirmation modal Same backdrop treatment as the lightbox, with a centered card. Used for irreversible actions that ask the admin to type a word before confirming. */ .modal-back { position: fixed; inset: 0; z-index: 210; background: rgba(6, 5, 4, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px)); animation: fadeIn 0.18s ease; } .modal { width: 100%; max-width: 380px; max-height: 100%; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); } .modal-title { font-size: 19px; font-weight: 600; } .modal-body { display: flex; flex-direction: column; gap: 11px; } .modal-body p { font-size: 13.5px; line-height: 1.55; color: var(--muted); } .modal-body b { color: var(--text); font-weight: 600; } .modal-warn { color: var(--red); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; } /* Only the type-to-confirm dialog shouts: the word to type is uppercase, while a form modal (editing your name) keeps whatever you actually type. */ .modal.confirm-word .field input { text-transform: uppercase; } /* ------------------------------------------------ tabbar */ .tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; display: flex; background: rgba(13, 11, 9, 0.96); backdrop-filter: blur(14px); border-top: 1px solid var(--border-soft); padding: 8px 6px max(env(safe-area-inset-bottom, 0px), 10px); z-index: 50; } .tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--faint); text-decoration: none; padding: 4px 0; } .tab svg { width: 21px; height: 21px; } .tab span { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase; } .tab.active { color: var(--gold); } /* ------------------------------------------------ notification badges Same pill everywhere: floating over the tab icon, and inline in list rows and section heads. */ .count-badge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-family: var(--mono); font-size: 10px; font-style: normal; font-weight: 700; line-height: 18px; text-align: center; letter-spacing: 0; } .tab-badge { position: absolute; top: 0; left: 50%; margin-left: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--red); color: #fff; font-family: var(--mono); font-size: 9.5px; font-style: normal; font-weight: 700; line-height: 16px; text-align: center; } [hidden] { display: none !important; } /* ------------------------------------------------ login */ .login-wrap { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: calc(32px + env(safe-area-inset-top, 0px)) 26px calc(32px + env(safe-area-inset-bottom, 0px)); gap: 26px; } .login-wrap .brand { font-family: var(--mono); font-size: 12px; letter-spacing: 0.3em; color: var(--gold); } .login-wrap h1 { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; } .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } /* margin-top:auto pins the input to the cell bottom, so two fields sharing a grid row stay aligned even when one label wraps to a second line */ .field input, .field select { width: 100%; min-width: 0; box-sizing: border-box; margin-top: auto; } .field label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .field input { background: var(--card); border: 1px solid var(--border); border-radius: 5px; padding: 14px; color: var(--text); font-family: var(--mono); font-size: 15px; outline: none; } .field input:focus { border-color: var(--gold-dim); } .field input, .field select { color-scheme: dark; } /* iOS gives date/time inputs UA styling: intrinsic width that overflows the form grid, centered value text, and a collapsed height when empty. Normalize them to render exactly like the text inputs around them. */ .field input[type='date'], .field input[type='time'], .field input[type='month'] { -webkit-appearance: none; appearance: none; display: block; height: 50px; /* = text inputs: 14px padding ×2 + 20px line + 1px border ×2 */ text-align: left; } input::-webkit-date-and-time-value { text-align: left; } .form-error { color: var(--red); font-size: 13px; font-family: var(--mono); min-height: 16px; } /* inside a "video da registrare" row it only takes space when it has something to say — 47 rows of reserved error space is a lot of empty page */ .classify-row .form-error.rec-err { min-height: 0; font-size: 12px; } .classify-row .form-error.rec-err:empty { display: none; } .login-toggle { text-align: center; color: var(--muted); font-size: 13.5px; cursor: pointer; } .login-toggle b { color: var(--gold); font-weight: 600; } .demo-box { font-family: var(--mono); font-size: 11px; line-height: 1.9; color: var(--muted); } .demo-box b { color: var(--text); font-weight: 500; } /* ------------------------------------------------ misc */ .kv-card .kv { padding: 13px 16px; border-bottom: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .kv-card .kv:last-child { border-bottom: none; } /* Inline row action (e.g. MODIFICA on a promotion) */ .kv .kv-btn { background: none; border: none; cursor: pointer; font-size: 10px; letter-spacing: 0.12em; color: var(--gold); flex-shrink: 0; } /* A promotion row expanded into its date editor: full width, gold-lit */ .kv-card .kv.promo-edit { align-items: stretch; background: var(--card-2); } .kv-card .kv.promo-edit .k { color: var(--gold); margin-bottom: 10px; } .kv .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; } .kv .v { font-size: 15px; } .kv .edit { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--gold); cursor: pointer; white-space: nowrap; background:none; border:none; } .credit-card { border: 1px solid var(--gold-dim); border-radius: 8px; padding: 18px; background: linear-gradient(135deg, rgba(211, 169, 79, 0.10), rgba(211, 169, 79, 0.02) 55%, transparent); } .credit-card .amount { display: flex; align-items: baseline; gap: 8px; margin: 10px 0; } .credit-card .cur { font-size: 30px; font-weight: 700; color: var(--text); } .credit-card .num { font-family: var(--mono); font-size: 46px; font-weight: 500; color: var(--gold); letter-spacing: -0.03em; } .credit-card .dec { font-family: var(--mono); font-size: 15px; color: var(--gold-dim); } .credit-card .desc { font-family: var(--mono); font-size: 10.5px; line-height: 1.7; color: var(--muted); } .plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .plan-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; } .plan-card.best { border-color: var(--gold-dim); background: var(--gold-soft); } .plan-card .plname { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.15em; color: var(--muted); text-transform: uppercase; } .plan-card .plprice { font-size: 21px; font-weight: 700; margin-top: 7px; } .plan-card .plprice small { font-size: 11px; font-weight: 500; color: var(--muted); } .plan-card .plnote { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--faint); margin-top: 6px; text-transform: uppercase; line-height: 1.6; } .plan-card .badge { position: absolute; top: -9px; right: 10px; background: var(--gold); color: #171204; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; padding: 3px 7px; border-radius: 4px; } .note-box { border: 1px dashed var(--border); border-radius: 5px; padding: 13px 14px; font-family: var(--mono); font-size: 10.5px; line-height: 1.7; color: var(--muted); margin-bottom: 12px; } /* podium */ .podium { display: flex; align-items: flex-end; gap: 10px; padding: 10px 0 4px; } .podium .place { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; } .podium .place .pname { font-size: 13px; font-weight: 600; } .podium .place .pscore { font-family: var(--mono); font-size: 12px; color: var(--muted); } .podium .block { width: 100%; border-radius: 4px 4px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; font-family: var(--mono); font-size: 20px; background: var(--card-2); color: var(--faint); border: 1px solid var(--border-soft); border-bottom: none; } .podium .p1 .block { height: 96px; background: var(--gold); color: #171204; font-weight: 700; border-color: var(--gold); } .podium .p2 .block { height: 64px; background: linear-gradient(180deg, var(--silver), var(--silver-edge)); border-color: var(--silver-edge); color: #1b1d21; } .podium .p3 .block { height: 46px; background: linear-gradient(180deg, var(--bronze), var(--bronze-edge)); border-color: var(--bronze-edge); color: #1e1206; } .rank-row .pos { font-family: var(--mono); font-size: 11px; color: var(--faint); width: 22px; } .rank-row .pos.top { color: var(--gold); } /* Your own row: findable at a glance while scrolling a long ranking */ .rank-row.me { /* literal rgba, not color-mix(): that needs iOS 16.2+ and this must degrade */ background: rgba(211, 169, 79, .13); box-shadow: inset 3px 0 0 var(--gold); } .rank-row.me .name { font-weight: 700; } .rank-row.me .pos { color: var(--gold); } .rank-you { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: #171204; background: var(--gold); border-radius: 3px; padding: 1px 5px; margin-left: 7px; vertical-align: 1px; } .rank-row .score { font-family: var(--mono); font-size: 19px; } .rank-row .bar-wrap { margin-top: 7px; } /* curriculum */ .level-row { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; } .level-row:active { background: var(--card-2); } .level-row.current { border-color: var(--gold-dim); box-shadow: 0 0 0 1px var(--gold-dim); } .level-row .lnum { font-family: var(--mono); font-size: 11px; color: var(--muted); width: 22px; } .level-row.current .lnum { color: var(--gold); } .level-row .lmain { flex: 1; } .level-row .lmeta { display: flex; justify-content: space-between; margin-top: 8px; align-items: baseline; } .level-row .lname { font-size: 13.5px; font-weight: 600; } .level-row .lcount { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: 0.08em; } .level-row .lstatus { width: 18px; text-align: center; } .level-row .check { color: var(--gold); font-size: 14px; } .level-row .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); } .tech-row { display: flex; align-items: center; gap: 13px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 13px 15px; margin-bottom: 9px; } .tech-row .box { width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } .tech-row .box.done { background: var(--gold); border-color: var(--gold); color: #171204; font-weight: 700; } .tech-row .box.tickable { cursor: pointer; } .tech-row .box.tickable:not(.done):hover { border-color: var(--gold); } .tech-row .tmain { flex: 1; } .tech-row .tname { font-size: 14.5px; font-weight: 600; } .tech-row.has-video { cursor: pointer; } .tech-row.has-video:active { background: var(--card-2); } .tech-row .play { width: 26px; height: 26px; border: 1px solid var(--gold-dim); border-radius: 50%; background: var(--gold-soft); color: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tech-row .play svg { margin-left: 1px; } /* Generic exam requirement ("10 chokes, min. 4 positions"): no single video to play, so the row opens the library page of that type instead. */ .tech-row.has-link { cursor: pointer; } .tech-row.has-link:active { background: var(--card-2); } .tech-row .tlink { font-size: 11.5px; color: var(--gold); margin-top: 4px; } .tech-row .go { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tech-row .go svg { margin-left: 1px; } /* fullscreen technique video (Google Drive embed) */ .video-overlay { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; flex-direction: column; } .video-top { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; } .video-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .video-close { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--text); font-size: 15px; cursor: pointer; flex-shrink: 0; } .video-stage { flex: 1; min-height: 0; padding-bottom: env(safe-area-inset-bottom); } .video-stage iframe { width: 100%; height: 100%; border: 0; display: block; } /* Instagram embeds are a portrait card (reel + account header) on a white background: centre them and cap the width so they don't stretch on desktop. */ .video-stage.portrait { display: flex; justify-content: center; } .video-stage.portrait iframe { width: min(100%, 420px); } /* The Instagram card cannot play in place, so the way out is the main action here rather than a footnote hidden under the frame. */ .video-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; } .video-foot .btn { display: block; width: 100%; max-width: 420px; text-align: center; text-decoration: none; } .video-foot .label { color: var(--faint); text-align: center; } .video-stage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; } /* sparring timer (Altro → Timer sparring) */ /* iPhone-style duration picker: two scroll-snap wheels (minutes / seconds). The value is whichever row rests in the centre band; the fade at the edges comes from a mask so it works on any card background, light theme included. */ .timer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .timer-col-title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; color: var(--gold); text-align: center; margin-bottom: 2px; } .timer-picker { display: flex; flex-direction: column; align-items: center; } .wheel-head { display: flex; gap: 42px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; color: var(--faint); margin-bottom: 4px; } .wheel-row { position: relative; display: flex; align-items: center; gap: 6px; } .wheel { height: 108px; width: 60px; overflow-y: scroll; padding: 36px 0; /* (108 − 36) / 2: lets the first and last row reach the band */ scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); overscroll-behavior: contain; } .wheel::-webkit-scrollbar { display: none; } /* snap is enabled by JS after the page's fade-in: a mandatory snap container re-snaps while an ancestor transform animates, corrupting the start row */ .wheel.snap { scroll-snap-type: y mandatory; } .wheel-item { height: 36px; line-height: 36px; text-align: center; scroll-snap-align: center; font-family: var(--mono); font-size: 19px; color: var(--faint); cursor: pointer; } .wheel-item.sel { color: var(--gold); font-weight: 700; } .wheel-colon { font-size: 19px; color: var(--faint); } .wheel-band { position: absolute; left: 0; right: 0; top: 50%; height: 36px; transform: translateY(-50%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); pointer-events: none; } /* sound theme picker (bell / beep / Combate! / Hajime!) */ .sound-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .sound-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 4px 8px; border-radius: 10px; border: 1px solid var(--border); background: transparent; cursor: pointer; } .sound-btn .s-emoji { font-size: 20px; line-height: 1; } .sound-btn .s-name { font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; } .sound-btn.active { border-color: var(--gold); background: var(--gold-soft); } .sound-btn.active .s-name { color: var(--gold); } /* The running timer owns the whole screen and is always dark, whatever the theme — it is read from across the tatami. When the platform won't rotate for real (iOS has no orientation lock), .rotated turns the stage 90° so the timer reads landscape with the phone still held in portrait: the stage swaps its box to 100vh × 100vw and rotates around the viewport centre. */ .timer-overlay { position: fixed; inset: 0; z-index: 300; background: #050403; color: #f0ece3; } .timer-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vmin; } .timer-overlay.rotated .timer-stage { inset: auto; top: 50%; left: 50%; width: 100vh; height: 100vw; transform: translate(-50%, -50%) rotate(90deg); } /* The pulsing edge glow says the phase at a glance from across the mat: green = sparring, red = rest, gold = the 3-2-1 run-up. */ .timer-overlay::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; } .timer-overlay[data-phase='prep']::after { box-shadow: inset 0 0 24vmin 3vmin rgba(211, 169, 79, 0.5); opacity: 0.7; } .timer-overlay[data-phase='round']::after { box-shadow: inset 0 0 26vmin 4vmin rgba(40, 200, 105, 0.55); animation: timer-glow 2.4s ease-in-out infinite; } .timer-overlay[data-phase='rest']::after { box-shadow: inset 0 0 26vmin 4vmin rgba(235, 60, 45, 0.6); animation: timer-glow 1.6s ease-in-out infinite; } @keyframes timer-glow { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .timer-overlay::after { animation: none !important; opacity: 0.7; } } .timer-meta { display: flex; align-items: baseline; gap: 22px; } .timer-phase { font-family: var(--mono); font-size: 18px; letter-spacing: 0.35em; color: #d3a94f; } .timer-overlay[data-phase='round'] .timer-phase { color: #35d178; } .timer-overlay[data-phase='rest'] .timer-phase { color: #f0554a; } .timer-roundno { font-size: 18px; letter-spacing: 0.2em; color: #857e6e; } /* Readable from the far side of the tatami: the clock owns the screen */ .timer-clock { font-size: clamp(96px, 44vmin, 360px); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .timer-overlay.paused .timer-clock { opacity: 0.4; } .timer-ctrl { display: flex; align-items: center; gap: 18px; } .timer-toggle { width: 74px; height: 74px; border-radius: 50%; border: none; background: #d3a94f; color: #171204; display: flex; align-items: center; justify-content: center; cursor: pointer; } .timer-toggle:active { background: #b8923f; } /* Exit sits next to pause, mid-screen — a corner button ends up under the notch once the stage rotates or goes fullscreen */ .timer-exit { width: 56px; height: 56px; border-radius: 50%; border: 1px solid #2b2620; background: #14110e; color: #f0ece3; font-size: 18px; cursor: pointer; } .timer-exit:active { background: #221d18; } /* language picker (Altro → Preferenze) */ .lang-picker { display: flex; gap: 6px; } .lang-btn { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; padding: 7px 9px; border-radius: 5px; border: 1px solid var(--border); background: var(--card); color: var(--muted); cursor: pointer; } .lang-btn.active { background: var(--gold); border-color: var(--gold); color: #171204; font-weight: 700; } /* technique library (Tecniche → Per tipo) */ .tech-body { display: flex; flex-direction: column; gap: 22px; } .type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .type-card { padding: 15px 14px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; } .type-card:active { background: var(--card-2); } .type-card.dim { opacity: 0.45; } .type-card .temoji { font-size: 24px; line-height: 1.3; } .type-card .tname { font-size: 13.5px; font-weight: 600; margin-top: 5px; } .type-card .tcount { font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.08em; } .classify-row { padding: 14px 15px; display: flex; flex-direction: column; gap: 12px; } .classify-row .crow-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .classify-row .cname { font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 9px; } .classify-row .cname .play { width: 26px; height: 26px; border: 1px solid var(--gold-dim); border-radius: 50%; background: var(--gold-soft); color: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .classify-row .cstatus { color: var(--gold); font-weight: 700; } .classify-row .crow-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* shop */ .shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .product .img { aspect-ratio: 0.92; border: 1px solid var(--border); border-radius: 6px; background: repeating-linear-gradient(45deg, #16130f 0px, #16130f 7px, #120f0c 7px, #120f0c 14px); position: relative; display: flex; align-items: flex-end; padding: 10px; } .product .img .tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.2em; color: var(--muted); position: relative; z-index: 1; } .product .img .photo { position: absolute; inset: 12px 8px 26px; width: calc(100% - 16px); height: calc(100% - 38px); object-fit: contain; } .product .img.flippable { cursor: pointer; } .product .img .flip-hint { position: absolute; top: 8px; right: 10px; font-size: 12px; color: var(--muted); } .product .pname { font-size: 13.5px; font-weight: 600; margin-top: 9px; } .product .pprice { font-family: var(--mono); font-size: 12px; color: var(--gold); margin-top: 4px; } .product .pnote { font-size: 11px; color: var(--faint); margin-top: 3px; } /* rules */ .rule-row { display: flex; gap: 16px; background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 16px; margin-bottom: 10px; align-items: baseline; } .rule-row .rnum { font-family: var(--mono); font-size: 19px; color: var(--gold); } .rule-row .rtext { font-size: 14.5px; line-height: 1.5; } /* weekly plan template cards (coach): fixed two-row layout so chips, coach name and actions never wrap into inconsistent positions */ .tpl-card { padding: 12px 14px; margin-bottom: 8px; } .tpl-card .tpl-row { display: flex; align-items: center; gap: 10px; min-width: 0; } .tpl-card .tpl-row + .tpl-row { margin-top: 10px; } .tpl-card .tpl-time { font-size: 15px; white-space: nowrap; } .tpl-card .tpl-coach { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tpl-card .tpl-btn { background: none; border: none; cursor: pointer; font-size: 10px; letter-spacing: 0.12em; color: var(--gold); flex-shrink: 0; } .tpl-card .tpl-btn.danger { color: var(--red); } /* toast */ .toast { position: fixed; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: #1d1913; border: 1px solid var(--gold-dim); color: var(--text); font-family: var(--mono); font-size: 12px; padding: 11px 18px; border-radius: 6px; z-index: 100; max-width: 85%; text-align: center; } /* transactions */ .tx-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); } .tx-row:last-child { border-bottom: none; } .tx-row .tinfo { flex: 1; min-width: 0; } .tx-row .tlabel { font-size: 13.5px; font-weight: 500; line-height: 1.35; } .tx-row .tstudent { font-size: 13px; color: var(--faint); line-height: 1.35; margin-top: 1px; } .tx-row .tdate { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 3px; line-height: 1.4; } .tx-row .tamt-wrap { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .tx-row .tamt { font-family: var(--mono); font-size: 14px; white-space: nowrap; } .tx-row .tamt.pos { color: var(--green); } .tx-row .tamt.neg { color: var(--muted); } select.inline-select, input.inline-select { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 12px; font-family: var(--mono); font-size: 13px; width: 100%; } /* match the 50px text/date/time inputs they sit next to in form grids */ .field select.inline-select { height: 50px; } /* ------------------------------------------------ promotion history */ /* Slim rows: the rank drawn as a belt on the left, the date on the right. Stacked they read as the person's progression without any text scanning. */ .promo-card { padding: 4px 0; } .promo-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--border-soft); } .promo-row:last-child { border-bottom: none; } .promo-row.editing { display: block; padding: 14px; } /* Wide enough that four stripes are countable: the shared .belt gives its rank bar 26% of the width, which is too little at this scale, so it's widened and the stripes slimmed down here only. */ .promo-belt { width: 92px; flex: none; } .promo-belt .rank-bar { width: 40%; gap: 3px; padding: 2px 4px; } .promo-belt .stripe { width: 3px; } .promo-date { flex: 1; text-align: right; /* hugs the right edge, or the MODIFICA button beside it */ font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; } /* ------------------------------------------------ certificate page */ .cert-head { margin-bottom: 14px; } .cert-name { font-size: 17px; font-weight: 700; letter-spacing: .01em; } .cert-rank { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 4px; } /* The certificate is a light document on a dark app, so it gets a white mat rather than sitting edge-to-edge on the background. */ .cert-frame { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; aspect-ratio: 842.25 / 595.5; /* the page's own proportions: no letterboxing */ } .cert-doc { width: 100%; height: 100%; border: 0; display: block; } .cert-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } .cert-actions .btn { text-align: center; text-decoration: none; } /* The belt doubles as the certificate link where there is one. */ .promo-belt-link { flex: none; display: block; } /* Certificate download. Muted so a long history reads as a list of ranks, not a column of buttons; the tap target stays 30px either way. */ .promo-cert { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: -6px -4px -6px 0; border-radius: 4px; color: var(--muted); } .promo-cert:focus-visible { color: var(--gold); background: var(--card-2); } /* Hover highlights only where there is a real pointer. On a touch screen :hover sticks after a tap and lights up while scrolling past, which reads as the row having been selected. */ @media (hover: hover) { .promo-cert { transition: color .15s, background .15s; } .promo-cert:hover { color: var(--gold); background: var(--card-2); } /* Anywhere on the belt lights the icon, so the row reads as one target. */ .promo-row:hover .promo-cert { color: var(--gold); } } .promo-edit-btn { flex: none; background: none; border: 1px solid var(--border); color: var(--gold); border-radius: 4px; padding: 5px 8px; font-size: 9.5px; letter-spacing: .08em; cursor: pointer; } /* ------------------------------------------------ instagram grid */ .ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .ig-cell { position: relative; display: block; aspect-ratio: 1 / 1; /* square tiles, like the Instagram profile grid */ overflow: hidden; border-radius: 4px; background: var(--card-2); -webkit-tap-highlight-color: transparent; } .ig-cell img { width: 100%; height: 100%; object-fit: cover; display: block; /* Fade in once decoded so the grid doesn't flash grey boxes */ animation: ig-fade .35s ease both; } @keyframes ig-fade { from { opacity: 0 } to { opacity: 1 } } .ig-cell:active img { transform: scale(.97); transition: transform .12s ease; } /* Coach's list: thumbnail + shortcode + remove, rows past the Home limit dimmed */ .ig-admin-list { display: flex; flex-direction: column; gap: 8px; } .ig-admin-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; } .ig-admin-row.dim { opacity: .45; } .ig-admin-row .ig-cell { width: 46px; height: 46px; aspect-ratio: auto; flex: none; } .ig-profile { display: block; margin-top: 10px; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--gold); text-decoration: none; } /* ------------------------------------------------ birthdays */ /* Birthday greeting: centred, warmer than the confirm dialogs */ .bday-modal { text-align: center; border-color: var(--gold-dim); } .bday-modal .modal-title { font-size: 20px; } .bday-modal .modal-body p { font-size: 14px; line-height: 1.55; } .bday-emoji { font-size: 52px; line-height: 1; margin-bottom: 6px; animation: bday-pop .5s cubic-bezier(.2, 1.5, .4, 1) both; } @keyframes bday-pop { from { transform: scale(0) rotate(-25deg) } to { transform: scale(1) rotate(0) } } /* Podium celebration: same rules as the confetti canvas */ #emoji-canvas { position: fixed; inset: 0; z-index: 9998; pointer-events: none; } /* Confetti sits above everything (modals included) but never eats a tap */ #confetti-canvas { position: fixed; inset: 0; z-index: 9999; pointer-events: none; } /* Sits inline after a name in the ranking / lesson roster, on the day itself */ .bday-tag { font-size: .95em; } /* Right-hand column of the Compleanni list: big number over its unit */ .bday-dist { text-align: right; min-width: 62px; } .bday-num { font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1.1; } .bday-num.gold { color: var(--gold); font-size: 15px; letter-spacing: .06em; } .bday-num.past { color: var(--muted); } .bday-unit { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 2px; } /* Manage-roster: search input and Aggiungi button share one 44px height */ .add-row { display: flex; gap: 10px; align-items: stretch; } .add-row .inline-select { height: 44px; } .add-row .btn { width: 120px; height: 44px; padding: 0 12px; } /* Guest form: name spans both columns, belt/stripes/weight/button fill a 2-col grid */ .guest-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .guest-form .full { grid-column: 1 / -1; } .guest-form .inline-select { height: 44px; } .guest-form .btn { height: 44px; padding: 0 12px; } .combo { position: relative; } .combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 244px; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 6px; z-index: 40; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); } .combo-opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--border-soft); } .combo-opt:last-child { border-bottom: none; } .combo-opt:hover { background: var(--card-2); } .combo-belt { color: var(--muted); font-family: var(--mono); font-size: 11px; white-space: nowrap; } .combo-empty { padding: 12px; color: var(--muted); font-size: 13px; } /* ------------------------------------------------ switch (theme toggle) */ .switch { width: 40px; height: 23px; border-radius: 12px; background: var(--border); position: relative; flex-shrink: 0; transition: background 0.15s ease; } .switch .knob { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--muted); transition: transform 0.15s ease, background 0.15s ease; } .switch.on { background: var(--gold); } .switch.on .knob { transform: translateX(17px); background: #fff; } .fade-in { animation: fadeIn 0.18s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* ================================================================ desktop (≥900px) Mobile keeps the app-frame layout; desktop gets a left sidebar + multi-column grids. */ @media (min-width: 900px) { body { background: #050403; } #app { max-width: none; box-shadow: none; padding-left: 232px; /* sidebar */ border: none !important; } #app:has(.tabbar.hidden) { padding-left: 0; } /* login screen: no sidebar */ .view { padding-bottom: 40px; } /* --- tabbar becomes a fixed left sidebar */ .tabbar { left: 0; top: 0; bottom: 0; transform: none; width: 232px; max-width: none; flex-direction: column; justify-content: flex-start; gap: 2px; padding: 88px 14px 24px; border-top: none; border-right: 1px solid var(--border-soft); background: var(--bg-raised); } .tabbar::before { content: var(--academy-name, 'OSSLY'); position: absolute; top: 34px; left: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.28em; color: var(--gold); } .tab { flex: none; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 12px 14px; border-radius: 6px; } .tab:hover { background: var(--card); color: var(--muted); } .tab.active { background: var(--gold-soft); } .tab.active:hover { color: var(--gold); } .tab svg { width: 19px; height: 19px; } .tab span { font-size: 10px; } /* sidebar rows: the badge moves from over-the-icon to the end of the row */ .tab-badge { position: static; order: 3; margin: 0 0 0 auto; } /* --- page structure Headers scroll away with the page: the sticky app-bar pattern is mobile-only, and a transparent sticky title would float over the content. */ .page-head { position: static; background: transparent; border-bottom: none; max-width: 720px; margin: 0 auto; padding: 44px 40px 10px; } h1.page-title { font-size: 44px; } /* home greeting: the cover photo stays, framed as a banner card that lines up with the content column instead of a full-bleed band. */ .page-hero { max-width: min(640px, calc(100% - 80px)); margin: 32px auto 0; padding: 84px 28px 22px; border-radius: 12px; border: 1px solid var(--border-soft); } .page-hero br { display: none; } /* one line: wide screens don't need the break */ /* One readable column everywhere: sections have uneven heights, so two columns never align and read as clutter. Only the shop needs more width. */ .content { max-width: 720px; margin: 0 auto; padding: 24px 40px 60px; gap: 26px; } .content > .filters .filter-btn { flex: none; padding: 10px 26px; } [data-view='shop'] .content, [data-view='shop'] .page-head { max-width: 1080px; } [data-view='shop'] .shop-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } /* hover affordances on pointer devices */ .card.tappable:hover, .lesson-card:hover, .row-list .row:hover, .level-row:hover { background: var(--card-2); } .btn { max-width: 100%; } /* login centered card */ .login-wrap { max-width: 460px; margin: 0 auto; } .toast { left: calc(50% + 116px); } .week-chart .bar-area { height: 64px; } } @media (min-width: 1280px) { .content { gap: 32px; } }