/* Risen: simple, calm, phone first. One color per athlete, flat surfaces, system font. */ /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); overscroll-behavior-y: none; } body { margin: 0; min-height: 100dvh; overscroll-behavior-y: none; background: var(--ground); color: var(--ink); font: 400 16px/1.45 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } /* content never scrolls under the iPhone status bar */ body::before { content: ''; position: fixed; z-index: 30; inset: 0 0 auto; height: env(safe-area-inset-top); background: var(--ground); } h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; } ul, ol { list-style: none; } img { display: block; max-width: 100%; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } /* iPhone app: screen recorded or mirrored (GymBros plugin sets the class) → people's photos are blurred */ .gb-captured img[src*="/api/photo/"] { filter: blur(24px) brightness(.7); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: inherit; } :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 8px; } [hidden] { display: none !important; } .num { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1; } .cond { font-weight: 700; } .muted { color: var(--ink-2); } .good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); } .small { font-size: 14px; } .ic { width: 22px; height: 22px; flex: none; } /* ---------- shell ---------- */ #app { max-width: 600px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 8px) 16px calc(env(safe-area-inset-bottom) + 160px); } .boot { min-height: 80dvh; display: grid; place-items: center; } .top { display: flex; align-items: center; gap: 10px; min-height: 48px; } .brand { font-weight: 700; font-size: 17px; letter-spacing: -.01em; text-decoration: none; } .top .grow { flex: 1; } .avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ground-3); color: var(--ink); font-weight: 700; font-size: 13px; text-decoration: none; } .sync { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--ground-3); color: var(--warn); font-size: 13px; font-weight: 600; text-decoration: none; } .sync .ic { width: 15px; height: 15px; } .hello { margin-top: 8px; } .hello h1 { font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance; } .hello p { margin-top: 6px; color: var(--ink-2); font-size: 15px; } .sec { margin-top: 32px; } .sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .sec-h h2 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; } .sec-h a, .sec-h .link { border: 0; background: none; padding: 8px 0; color: var(--accent-text); font-size: 15px; font-weight: 600; text-decoration: none; } .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .ring circle { fill: none; stroke-width: 5; stroke-linecap: round; } .me-in.gabriell { background: var(--a-gab); } .standing { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-top: 22px; } .rank { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; background: var(--accent); color: var(--accent-ink); font-size: 28px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .pts p + p { margin-top: 4px; color: var(--ink-2); font-size: 15px; } .pts b { color: var(--ink); font-weight: 600; } .rows { display: grid; gap: 10px; margin-top: 22px; } .row-card { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--ground-2); text-align: left; } .row-card .grow { flex: 1; min-width: 0; } .row-card b { display: block; font-size: 16px; font-weight: 600; } .row-card small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 13px; } .row-card > .ic { color: var(--ink-2); } .row-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, var(--ground-2)); color: var(--accent-text); } .row-ic .ic { width: 20px; height: 20px; } .row-card:active, .stat:active, .hero:active { transform: scale(.98); } .stat { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 14px; border: 0; border-radius: 22px; background: var(--ground-2); color: var(--ink); text-align: left; text-decoration: none; } .stat small { display: block; color: var(--ink-2); font-size: 13px; font-weight: 600; } .stat b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .hero { display: grid; justify-items: center; gap: 10px; margin-top: 10px; padding: 26px 20px 22px; border-radius: 26px; text-align: center; text-decoration: none; background: linear-gradient(150deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #000) 100%); color: var(--accent-ink); } .week { margin-top: 10px; padding: 16px; border-radius: 22px; background: var(--ground-2); } .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .day { display: grid; place-items: center; aspect-ratio: 1; max-height: 44px; border-radius: 999px; background: var(--ground-3); color: var(--ink-2); font-size: 13px; font-weight: 600; transition: background-color .25s ease, color .25s ease; } .day.on { background: var(--accent); color: var(--accent-ink); } .day.pend { background: color-mix(in srgb, var(--accent) 35%, var(--ground-3)); color: var(--ink); } .day.food { background: linear-gradient(to top, var(--accent) 50%, var(--ground-3) 50%); color: var(--ink); } /* trained, food missing */ .day.today { box-shadow: inset 0 0 0 2px var(--accent-text); } .day.out { background: transparent; opacity: .4; } .week .hint { margin-top: 12px; } .food-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .food-opt { display: grid; justify-items: start; gap: 2px; min-height: 72px; padding: 12px; border: 0; border-radius: 16px; background: var(--ground-3); text-align: left; } .food-opt b { font-size: 16px; font-weight: 700; } .food-opt small { color: var(--ink-2); font-size: 12px; } .food-opt[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } .food-opt[aria-pressed="true"] small { color: inherit; opacity: .85; } .food-opt.busy { opacity: .6; pointer-events: none; } /* ---------- controls ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--ground-3); color: var(--ink); font-size: 16px; font-weight: 600; text-decoration: none; transition: transform .1s ease-out, opacity .15s ease; } .btn:active { transform: scale(.97); } .btn.primary { background: var(--accent); color: var(--accent-ink); } .btn.big { width: 100%; min-height: 56px; font-size: 17px; } .btn.danger { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); } .btn.slim { min-height: 44px; padding: 0 14px; font-size: 15px; } .btn:disabled { background: var(--ground-3); color: var(--ink-2); cursor: not-allowed; transform: none; } .btn.busy { pointer-events: none; opacity: .6; } .row { display: flex; gap: 10px; align-items: center; } .row.wrap { flex-wrap: wrap; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ground-3); font-size: 15px; font-weight: 600; } .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } .chip.sm { min-height: 40px; padding: 0 14px; font-size: 14px; } .field { display: grid; gap: 6px; } .field > span { font-size: 14px; font-weight: 600; color: var(--ink-2); } .field small { font-size: 13px; color: var(--ink-2); } .input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--ground-3); font-size: 17px; } textarea.input { min-height: 110px; padding: 12px 14px; resize: vertical; line-height: 1.45; } select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 32px; } .input:focus { outline: none; border-color: var(--accent-text); } .form { display: grid; gap: 16px; } .err { color: var(--bad); font-size: 14px; font-weight: 600; } .hint { color: var(--ink-2); font-size: 14px; } .toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; font-weight: 500; } .toggle input { appearance: none; position: relative; flex: none; width: 51px; height: 31px; border-radius: 999px; background: var(--ground-3); transition: background-color .2s; } .toggle input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform .2s cubic-bezier(.2, .8, .2, 1); } .toggle input:checked { background: var(--accent); } .toggle input:checked::after { transform: translateX(20px); } .seg { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .seg button { flex: 1 0 auto; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 15px; font-weight: 600; white-space: nowrap; transition: background-color .2s, color .2s; } .seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); } /* ---------- lists: each list is one rounded card ---------- */ .feed, .quotes, .agenda, .wlist, .ex, .kv, .pending-list, .table, .compare { border-radius: 22px; background: var(--ground-2); } .feed, .quotes, .agenda, .wlist, .ex, .pending-list { padding: 2px 16px; } .kv { padding: 0 16px; } .kv dt:nth-last-child(2), .kv dd:last-child { border-bottom: 0; } .table, .compare { border-collapse: separate; border-spacing: 0; overflow: hidden; } .table th:first-child, .table td:first-child, .compare th:first-child, .compare td:first-child { padding-left: 16px; } .table th:last-child, .table td:last-child, .compare th:last-child, .compare td:last-child { padding-right: 16px; } .table tr:last-child td, .compare tr:last-child td { border-bottom: 0; } .sheet :is(.feed, .quotes, .agenda, .wlist, .ex, .kv, .pending-list, .table) { background: var(--ground-3); } .daily .quotes { padding: 2px 16px; } .feed li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; padding: 14px 0; align-items: start; } .feed li + li, .quotes li + li, .agenda li + li, .wlist li + li, .ex li + li { border-top: 1px solid var(--line); } .feed .t { font-weight: 600; line-height: 1.3; } .feed .d { margin-top: 2px; color: var(--ink-2); font-size: 14px; } .feed .when { color: var(--ink-2); font-size: 13px; white-space: nowrap; } .thumb { width: 56px; height: 56px; border: 0; padding: 0; border-radius: 10px; object-fit: cover; background: var(--ground-3); } .reacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .react { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 48px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--ground-3); font-size: 15px; } .react b { font-size: 13px; font-weight: 600; } .react[aria-pressed="true"] { background: color-mix(in srgb, var(--accent-text) 22%, var(--ground-3)); } .quotes li { padding: 14px 0; } .quote-text { font-size: 18px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; } .quote-by { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--ink-2); font-size: 14px; } .quote-by .grow { flex: 1; } .sec .verse, .card-empty { padding: 16px; border-radius: 22px; background: var(--ground-2); } .verse p { max-width: 62ch; font-size: 17px; line-height: 1.55; } .verse cite { display: block; margin-top: 10px; color: var(--ink-2); font-size: 14px; font-style: normal; font-weight: 600; } .agenda li { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 6px 0; } .agenda .ic { color: var(--ink-2); } .agenda b { font-weight: 600; } .empty { display: grid; justify-items: start; gap: 12px; padding: 20px 0; color: var(--ink-2); } .wlist li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 14px 0; } .wlist .thumb { width: 64px; height: 64px; } .wlist .t { font-weight: 600; } .wlist .d { color: var(--ink-2); font-size: 14px; } .pts-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 14px; } .pts-line b { font-weight: 700; } .tag { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 9px; border-radius: 999px; background: var(--ground-3); color: var(--ink-2); font-size: 13px; font-weight: 600; } .tag .ic { width: 14px; height: 14px; } .tag.good { color: var(--good); } .tag.bad { color: var(--bad); } .tag.warn, .tag.pend { color: var(--warn); } /* ---------- ranking ---------- */ .podium { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: 8px; margin-top: 24px; } .step { display: grid; justify-items: center; gap: 4px; text-align: center; } .step .who { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; } .step.p1 .who { font-size: 20px; font-weight: 800; } .step > .num { font-size: 26px; } .step.p1 > .num { font-size: 32px; } .step .num small { margin-left: 2px; color: var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: 0; } .step .sub { color: var(--ink-2); font-size: 13px; } .block { position: relative; display: grid; place-items: center; width: 100%; margin-top: 6px; overflow: hidden; border-radius: 18px 18px 6px 6px; background: var(--solid); } .block .num { color: var(--a-ink); font-size: 40px; } .step.p1 .block { height: 150px; box-shadow: inset 0 3px 0 var(--gold), 0 0 28px color-mix(in srgb, var(--gold) 28%, transparent); } .step.p1 .block .num { font-size: 56px; } .step.p2 .block { height: 100px; } .step.p3 .block { height: 72px; } .step.tx { --solid: var(--a-tx); } .step.gabriell { --solid: var(--a-gab); } .step.rafael { --solid: var(--a-raf); } .block::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,230,160,.55) 50%, transparent 70%); transform: translateX(-120%); } .podium.enter .step.p1 .block { animation: rise .7s cubic-bezier(.2,.9,.3,1.15) both; transform-origin: bottom; } .podium.enter .step.p1 .block::after { animation: shine 1s ease-in-out 1s; } @keyframes rise { from { transform: scaleY(.3); } } @keyframes drop { from { opacity: 0; transform: translateY(-80px) rotate(-25deg) scale(1.4); } } @keyframes shine { to { transform: translateX(120%); } } .talk { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: var(--ground-2); font-size: 16px; font-weight: 600; line-height: 1.4; text-align: center; } .rank-list { display: grid; gap: 8px; } .rank-list li { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 16px; border-radius: 20px; background: var(--ground-2); } .rank-list li.me { box-shadow: inset 0 0 0 2px var(--accent); } .rank-list .rk { width: 26px; color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; } .rank-list .mini { width: 36px; height: 36px; font-size: 13px; } .rank-list .grow { flex: 1; min-width: 0; } .rank-list .grow b { display: block; font-weight: 700; } .rank-list small { display: block; color: var(--ink-2); font-size: 13px; } .rank-list .r { text-align: right; font-variant-numeric: tabular-nums; } .rank-list .r b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; } .table { width: 100%; border-collapse: collapse; font-size: 15px; } .table th { padding: 8px 6px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 600; text-align: left; } .table td { padding: 12px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; } .table .r { text-align: right; font-variant-numeric: tabular-nums; } .mini { position: relative; display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; color: var(--a-ink); font-size: 11px; font-weight: 700; } .mini .md { position: absolute; top: -8px; right: -7px; font-size: 13px; font-style: normal; line-height: 1; } .mini.tx { background: var(--a-tx); } .mini.gabriell { background: var(--a-gab); } .mini.rafael { background: var(--a-raf); } /* ---------- body screen ---------- */ .delta { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; white-space: nowrap; } .delta .ic { width: 16px; height: 16px; } .bar { height: 8px; margin-top: 10px; border-radius: 999px; background: var(--ground-3); overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .bar.thin { height: 6px; } .parts { display: grid; gap: 14px; margin-top: 18px; } .part-h { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; } .part-h b { color: var(--ink-2); font-weight: 500; } .kv { display: grid; grid-template-columns: 1fr auto; } .kv dt, .kv dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); } .kv dt { color: var(--ink-2); } .kv dd { padding-left: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } .kv dd small { color: var(--ink-2); font-weight: 400; } .goal-card { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .goal-card .num { font-size: 40px; } .goal-card .sep { color: var(--ink-2); font-size: 24px; } .est { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 999px; background: var(--ground-3); color: var(--ink-2); font-size: 12px; font-weight: 600; vertical-align: middle; } .est.real { background: color-mix(in srgb, var(--good) 20%, var(--ground-3)); color: var(--ink); } .note { margin-top: 12px; color: var(--ink-2); font-size: 14px; line-height: 1.5; } .chart { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; } .chart .grid { stroke: var(--line); } .chart .ln { fill: none; stroke: var(--accent-text); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .chart .goal-ln { stroke: var(--ink-2); stroke-dasharray: 5 5; stroke-width: 1.5; } .chart .dot { fill: var(--ground); stroke: var(--accent-text); stroke-width: 2.5; } .chart text { fill: var(--ink-2); font: 600 20px -apple-system, system-ui, sans-serif; } /* viewBox units: ≈12px on a phone */ .ex li { padding: 14px 0; } .ex .ex-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .ex .ex-h b { font-weight: 600; } .ex .ex-h span { color: var(--ink-2); font-size: 14px; white-space: nowrap; } .ex .hist { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 13px; } .ex .hist span { padding: 3px 8px; border-radius: 999px; background: var(--ground-3); font-variant-numeric: tabular-nums; } .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 14px; } .gallery button { position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 4px; overflow: hidden; background: var(--ground-3); } .gallery img { width: 100%; height: 100%; object-fit: cover; } .gallery .mini { position: absolute !important; left: 6px; bottom: 6px; width: 24px; height: 24px; font-size: 10px; } /* ---------- sheet ---------- */ .sheet { width: 100%; max-width: 600px; max-height: 94dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: 20px 20px 0 0; background: var(--ground-2); color: var(--ink); box-shadow: var(--shadow); overflow: auto; overscroll-behavior: contain; } .sheet[open] { animation: up var(--dur-slow) var(--ease-out); } .sheet::backdrop { background: rgba(0, 0, 0, .45); } .sheet[open]::backdrop { animation: fade-bd var(--dur-base) ease-out; } @keyframes up { from { transform: translateY(60px); opacity: .4; } } @keyframes fade-bd { from { opacity: 0; } } .sheet-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px; background: var(--ground-2); } .sheet-h h2 { flex: 1; font-size: 20px; font-weight: 700; letter-spacing: -.015em; } .icon-btn { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--ground-3); color: var(--ink-2); } .icon-btn .ic { width: 18px; height: 18px; } .sheet-b { padding: 4px 16px calc(env(safe-area-inset-bottom) + 20px); } .sheet-f { position: sticky; bottom: 0; padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px); background: var(--ground-2); border-top: 1px solid var(--line); } /* ---------- daily card: first open of the day ---------- */ .daily { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ground); color: var(--ink); } .daily[open] { display: flex; flex-direction: column; animation: fade .35s ease-out; } @keyframes fade { from { opacity: 0; transform: scale(.98); } } .daily-b:focus { outline: none; } .daily-b { flex: 1; display: flex; overflow-y: auto; overscroll-behavior: contain; padding: calc(env(safe-area-inset-top) + 40px) 24px 24px; } .daily-in { width: 100%; max-width: 560px; margin: auto; } .daily-k { margin-bottom: 12px; color: var(--ink-2); font-size: 14px; font-weight: 600; } .daily-m { margin-top: 40px; margin-bottom: 0; } .daily .verse p { font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; } .daily .verse cite { margin-top: 14px; font-size: 15px; } .daily-f { width: 100%; max-width: 560px; margin: 0 auto; padding: 12px 24px calc(env(safe-area-inset-bottom) + 16px); } /* ---------- podium scenes: forced, played by Web Animations in app.js ---------- */ .scene { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: #07080a; color: #fff; } .scene[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .sc-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; } .sc-stage { position: relative; } .sc-av { position: absolute; display: grid; place-items: center; border-radius: 50%; color: var(--a-ink); font-weight: 800; box-shadow: 0 0 0 4px #07080a, 0 0 0 6px rgba(255,255,255,.15); } .sc-av.tx { background: var(--a-tx); } .sc-av.gabriell { background: var(--a-gab); } .sc-av.rafael { background: var(--a-raf); } .sc-av.lost { filter: grayscale(1) brightness(.55); transform: scale(.86); } .sc-av.won { box-shadow: 0 0 0 4px #07080a, 0 0 0 6px var(--gold); } .sc-md { position: absolute; right: -6px; bottom: -6px; font-size: 30px; font-style: normal; } .sc-vs { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); font-size: 64px; font-weight: 900; font-style: italic; letter-spacing: -.04em; color: var(--gold); opacity: 0; } .sc-item b { display: block; font-weight: 400; } .sc-item { position: absolute; left: 0; top: 0; line-height: 1; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--gold) 85%, transparent)); } .sc-spark { position: absolute; left: 50%; top: 55%; width: 7px; height: 7px; margin: -3px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); opacity: 0; } .sc-title { padding: 0 16px; font-size: 32px; font-weight: 900; letter-spacing: -.03em; line-height: 1.05; text-align: center; text-transform: uppercase; color: var(--gold); opacity: 0; } .sc-line { max-width: 320px; padding: 0 16px; text-align: center; font-size: 17px; line-height: 1.4; color: rgba(255,255,255,.85); opacity: 0; } .photo-pick { position: relative; display: grid; place-items: center; align-content: center; gap: 6px; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--ground-3); color: var(--ink-2); font-weight: 600; } .photo-pick .ic { width: 36px; height: 36px; } .photo-pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .photo-pick .swap { position: absolute; right: 10px; bottom: 10px; z-index: 1; } .photo-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .photo-full { width: 100%; max-height: 72dvh; object-fit: contain; border-radius: 12px; background: #000; } .set-row { display: grid; grid-template-columns: 1fr 84px 76px 36px; gap: 8px; align-items: end; } .set-row .input { padding: 0 10px; font-size: 16px; } .set-row .icon-btn { margin-bottom: 7px; } .details summary { display: flex; align-items: center; justify-content: space-between; min-height: 50px; font-weight: 600; list-style: none; cursor: pointer; } .details summary::-webkit-details-marker { display: none; } .details summary::after { content: '+'; color: var(--ink-2); font-size: 24px; font-weight: 400; } .details[open] summary::after { content: '−'; } /* ---------- tab bar ---------- */ /* floating pill, icons close together (no labels); sits just above the iPhone home indicator */ .nav { position: fixed; z-index: 10; left: 50%; bottom: max(10px, env(safe-area-inset-bottom) - 12px); transform: translateX(-50%); display: flex; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); background: color-mix(in srgb, var(--ground-2) 86%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); } .nav a { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--ink-2); text-decoration: none; } .nav a .ic { width: 24px; height: 24px; } .nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); } .nav a { transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast); } .nav a:active { transform: scale(.9); } .nav a.pop { animation: tab-pop var(--dur-slow) var(--ease-spring); } @keyframes tab-pop { from { transform: scale(.75); } } /* ---------- toast ---------- */ .toast { position: fixed; z-index: 40; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 84px); width: max-content; max-width: min(92vw, 520px); padding: 13px 16px; border-radius: 14px; background: var(--ink); color: var(--ground); font-size: 15px; font-weight: 500; line-height: 1.4; opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .2s, transform .3s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); } .toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .toast.err { background: var(--bad); color: #fff; } .toast.win { background: var(--accent); color: var(--accent-ink); } /* ---------- login ---------- */ .login { display: grid; align-content: center; gap: 22px; min-height: calc(100dvh - 40px); padding-bottom: 20px; } .login-hero { justify-self: center; width: min(52vw, 210px); aspect-ratio: 120 / 130; } .login-hero .m-svg { width: 100%; height: 100%; } .login h1 { font-size: 40px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; text-align: center; } .login h1 small { display: block; margin-top: 8px; color: var(--ink-2); font-size: 16px; font-weight: 400; letter-spacing: 0; } .admin-link { justify-self: center; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ink-2); font-size: 15px; } /* ---------- final ---------- */ .final-hero { position: relative; margin-top: 8px; padding: 24px 0 6px; overflow: hidden; text-align: center; } .final-hero h1 { position: relative; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; } .final-hero p { position: relative; margin-top: 8px; color: var(--ink-2); } .champion { position: relative; margin-top: 20px; } .patch { display: inline-grid; place-items: center; padding: 16px 24px; border-radius: 20px; background: var(--accent); color: var(--accent-ink); } .champion .who { font-size: 32px; font-weight: 800; letter-spacing: -.02em; } .final-wait { display: grid; justify-items: start; gap: 12px; padding: 24px 0; } .final-wait .compare { width: 100%; border-collapse: collapse; } .compare th, .compare td { padding: 12px 6px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; } .compare th:first-child, .compare td:first-child { color: var(--ink-2); font-weight: 400; text-align: left; } .compare thead th { color: var(--ink-2); font-size: 13px; font-weight: 600; } .banner { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 22px; background: var(--ground-2); text-decoration: none; } .banner b { display: block; } .banner .grow { flex: 1; } .pending-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; } .pending-list li + li { border-top: 1px solid var(--line); } /* ---------- larger screens: rail on the left ---------- */ @media (min-width: 960px) { #app { max-width: 1080px; padding: 24px 40px 60px 140px; } .nav { left: 24px; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; } .toast { bottom: 28px; } .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; align-items: start; } .cols > .col-b > .sec:first-child { margin-top: 16px; } .narrow { max-width: 720px; } .sheet { margin: auto; border-radius: 20px; max-height: 88dvh; } .gallery { grid-template-columns: repeat(5, 1fr); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- people outside the first three: one neutral color; athlete colors follow the theme ---------- */ .mini, .sc-av { background: var(--a-other); color: var(--a-ink); } .step { --solid: var(--a-other); } /* ---------- calendar (Treinos): week cards, each day shows its workout photo ---------- */ .cal-week { display: grid; gap: 10px; padding: 14px 12px; margin-bottom: 12px; border-radius: 22px; background: var(--ground-2); } .cal-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 16px; } .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .cal-day { position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; align-content: start; min-height: 86px; padding: 6px 2px; border: 0; border-radius: 14px; background: var(--ground-3); color: var(--ink); } .cal-day img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .cal-day.pic { color: #fff; } .cal-day.pic::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.1) 45%, rgba(0,0,0,.7)); } .cal-day.today { box-shadow: inset 0 0 0 2.5px var(--accent); } .cal-day.done:not(.pic) { background: var(--accent); color: var(--accent-ink); } .cal-day.out { opacity: .35; cursor: default; } .cd-w { font-size: 11px; font-weight: 700; opacity: .85; } .cd-n { font-size: 17px; font-weight: 800; line-height: 1.2; } .cd-k { font-size: 10px; font-weight: 700; line-height: 1.2; text-align: center; word-break: break-word; } .cd-f { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 5px; border-radius: 9px; background: #fff; color: #111; white-space: nowrap; } /* ---------- + button: everything that gets logged ---------- */ .fab { position: fixed; z-index: 11; right: 18px; bottom: calc(max(10px, env(safe-area-inset-bottom) - 12px) + 76px); display: grid; place-items: center; width: 62px; height: 62px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); } .fab .ic { width: 30px; height: 30px; stroke-width: 2.5; } .fab i { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--bad); color: #fff; font-size: 12px; font-weight: 800; font-style: normal; line-height: 22px; } .fab:active { transform: scale(.94); } .toast { bottom: calc(env(safe-area-inset-bottom) + 150px); } @media (min-width: 960px) { .fab { right: 40px; bottom: 40px; } .toast { bottom: 28px; } } /* ---------- home: clean summary with rings ---------- */ .hi { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; } .hi h1 { font-size: 28px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; } .pos { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--ground-2); text-decoration: none; } .pos b { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 15px; } .pos span { font-weight: 700; font-variant-numeric: tabular-nums; } .summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 20px 16px 20px 20px; border-radius: 28px; background: var(--ground-2); } .sum-list { display: grid; gap: 16px; } .sum-list li { display: flex; align-items: center; gap: 12px; } .sum-list small { display: block; color: var(--ink-2); font-size: 13px; font-weight: 600; } .sum-list b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .sum-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ground-3); } .sum-ic .ic { width: 19px; height: 19px; } .sum-ic.c1 { color: var(--r1); } .sum-ic.c2 { color: var(--r2); } .sum-ic.c3 { color: var(--r3); } .rings { display: block; width: 100%; height: auto; transform: rotate(-90deg); } .rings circle { fill: none; stroke-width: var(--sw, 13); stroke-linecap: round; } .rings .rg-bg { stroke: var(--ground-3); } .rings .c1 { stroke: var(--r1); } .rings .c2 { stroke: var(--r2); } .rings .c3 { stroke: var(--r3); } /* rings fill once when the screen opens, not on every 40 s refresh */ @media (prefers-reduced-motion: no-preference) { .screen-in .rings .rg { animation: rg-in .9s var(--ease-out) calc(120ms - var(--t0, 0ms)) both; } } @keyframes rg-in { from { stroke-dasharray: 0 999; } } /* ---------- progress ---------- */ .goal-ring { display: grid; justify-items: center; gap: 10px; margin-top: 18px; } .gr-ring { position: relative; width: min(62vw, 220px); } .gr-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; } .gr-in b { font-size: 48px; } .gr-in span { color: var(--ink-2); font-size: 14px; font-weight: 600; } .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; } .tile { display: grid; gap: 2px; padding: 14px 12px; border-radius: 20px; background: var(--ground-2); } .tile small { color: var(--ink-2); font-size: 13px; font-weight: 600; } .tile b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; } .tile span { color: var(--ink-2); font-size: 12px; } .tile-dot { width: 10px; height: 10px; margin-bottom: 4px; border-radius: 50%; } .tile-dot.c1 { background: var(--r1); } .tile-dot.c2 { background: var(--r2); } .tile-dot.c3 { background: var(--r3); } /* year of dots: one column per week, one dot per day, colored by the day's grade */ .year { margin-top: 22px; padding: 18px 16px 16px; border-radius: 24px; background: var(--ground-2); color: var(--ink); } .year-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .year-h h2 { font-size: 24px; font-weight: 400; letter-spacing: -.02em; } .year-h span { color: var(--ink-2); font-size: 14px; } .yd-scroll { margin-top: 12px; overflow-x: auto; } .yd-months, .yd-grid { display: grid; gap: 4px; justify-content: space-between; min-width: max-content; } .yd-scroll { scrollbar-width: none; } .yd-scroll::-webkit-scrollbar { display: none; } .yd-months { margin-bottom: 6px; color: var(--ink-2); font-size: 11px; } .yd-months span { white-space: nowrap; } .yd-col { display: grid; gap: 4px; } .yd { display: block; width: 15px; height: 15px; border-radius: 50%; } /* full = trained and ate well, half = only one, red = none */ .yd.g1 { background: var(--dot-no); } .yd.g2 { background: linear-gradient(90deg, var(--dot-ok) 50%, transparent 50%); box-shadow: inset 0 0 0 2px var(--dot-ok); } .yd.g3 { background: var(--dot-ok); } .yd.f, .yd.t { box-shadow: inset 0 0 0 1.5px var(--ground-3); } .yd.t { box-shadow: inset 0 0 0 2px var(--ink); } .yd.x { visibility: hidden; } .yd-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; color: var(--ink-2); font-size: 13px; } .yd-leg span { display: inline-flex; align-items: center; gap: 6px; } .yd-leg .yd { width: 11px; height: 11px; } /* ---------- theme menu (Perfil, sign-up): swipe sideways, each card is a live preview ---------- */ .tp-row { display: flex; gap: 12px; margin: 0 -16px; padding: 4px 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; } .tp-row::-webkit-scrollbar { display: none; } .tp { flex: none; display: grid; justify-items: center; gap: 12px; width: 148px; padding: 18px 12px 14px; border: 0; border-radius: 24px; background: var(--ground); color: var(--ink); scroll-snap-align: start; box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--dur-press) var(--ease-out); } .tp:active { transform: scale(.96); } .tp[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--accent); } .tp .rings { width: 104px; } .tp .rings circle { stroke-width: 9; } .tp-sum { display: flex; gap: 6px; padding: 6px 8px; border-radius: 14px; background: var(--ground-2); } .tp-sum .sum-ic { width: 28px; height: 28px; } .tp-sum .ic { width: 15px; height: 15px; } .tp b { font-size: 15px; font-weight: 700; } /* ---------- Garra (white energy-drink mood, claws and bites) and Gatinho (cats and flowers): own fonts, patterns, motion ---------- */ @font-face { font-family: 'Rubik Distressed'; src: url(/fonts/rubik-distressed.woff2) format('woff2'); font-display: swap; } @font-face { font-family: 'Rubik'; src: url(/fonts/rubik.woff2) format('woff2'); font-weight: 300 900; font-display: swap; } @font-face { font-family: 'Fredoka'; src: url(/fonts/fredoka.woff2) format('woff2'); font-weight: 300 700; font-display: swap; } [data-theme="garra"] { --ground: #050506; --ground-2: #111215; --ground-3: #1e2024; --ink: #f4f6f8; --ink-2: #9aa1aa; --line: rgba(255, 255, 255, .09); --accent: #f4f6f8; --accent-ink: #0b0c0e; --accent-text: #ffffff; --good: #9fd8ff; --bad: #ff6b6b; --warn: #e5c07b; --r1: #f4f6f8; --r2: #9fd8ff; --r3: #8a919b; --a-gab: #f4f6f8; --a-tx: #9fd8ff; --a-raf: #8a919b; --a-other: #c9ced5; --a-ink: #0b0c0e; --gold: #9fd8ff; --dot-ok: #f4f6f8; --dot-no: #3a3e45; --shadow: 0 -8px 32px rgba(0, 0, 0, .6); --font: 'Rubik', -apple-system, system-ui, sans-serif; --font-display: 'Rubik Distressed', 'Rubik', system-ui, sans-serif; --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='420' viewBox='0 0 300 420'%3E%3Cg fill='%23ffffff' fill-opacity='.09'%3E%3Cg transform='translate(190 0) rotate(28) scale(.95)'%3E%3Cpath d='M14 2 L20 6 L23 40 L21 44 L25 70 L22 112 L17 128 L18 96 L15 64 L18 58 L13 30 Z'/%3E%3Cpath d='M44 0 L51 5 L54 44 L51 49 L55 80 L51 124 L45 142 L47 104 L44 72 L47 66 L42 32 Z'/%3E%3Cpath d='M74 8 L80 12 L82 44 L79 48 L83 72 L80 108 L75 122 L76 92 L73 64 L76 58 L72 34 Z'/%3E%3C/g%3E%3Cg transform='translate(10 220) rotate(-22) scale(.8)'%3E%3Cpath d='M14 2 L20 6 L23 40 L21 44 L25 70 L22 112 L17 128 L18 96 L15 64 L18 58 L13 30 Z'/%3E%3Cpath d='M44 0 L51 5 L54 44 L51 49 L55 80 L51 124 L45 142 L47 104 L44 72 L47 66 L42 32 Z'/%3E%3Cpath d='M74 8 L80 12 L82 44 L79 48 L83 72 L80 108 L75 122 L76 92 L73 64 L76 58 L72 34 Z'/%3E%3C/g%3E%3Cg transform='translate(250 300) rotate(60) scale(.4)'%3E%3Cpath d='M14 2 L20 6 L23 40 L21 44 L25 70 L22 112 L17 128 L18 96 L15 64 L18 58 L13 30 Z'/%3E%3Cpath d='M44 0 L51 5 L54 44 L51 49 L55 80 L51 124 L45 142 L47 104 L44 72 L47 66 L42 32 Z'/%3E%3Cpath d='M74 8 L80 12 L82 44 L79 48 L83 72 L80 108 L75 122 L76 92 L73 64 L76 58 L72 34 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 120% 90% at 50% 35%, transparent 45%, rgba(0, 0, 0, .75)); color-scheme: dark; } [data-theme="garra"][data-mode="light"] { --ground: #f4f5f7; --ground-2: #ffffff; --ground-3: #e3e6ea; --ink: #0b0c0e; --ink-2: #5b616a; --line: rgba(0, 0, 0, .08); --accent: #0b0c0e; --accent-ink: #ffffff; --accent-text: #0b0c0e; --good: #1f7ab8; --bad: #b3261e; --warn: #8a5a00; --r1: #0b0c0e; --r2: #3aa6e8; --r3: #8a919b; --a-gab: #0b0c0e; --a-tx: #3aa6e8; --a-raf: #8a919b; --a-other: #5b616a; --a-ink: #ffffff; --gold: #3aa6e8; --dot-ok: #0b0c0e; --dot-no: #d5d9de; --shadow: 0 -8px 32px rgba(0, 0, 0, .1); --font: 'Rubik', -apple-system, system-ui, sans-serif; --font-display: 'Rubik Distressed', 'Rubik', system-ui, sans-serif; --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='420' viewBox='0 0 300 420'%3E%3Cg fill='%23000000' fill-opacity='.09'%3E%3Cg transform='translate(190 0) rotate(28) scale(.95)'%3E%3Cpath d='M14 2 L20 6 L23 40 L21 44 L25 70 L22 112 L17 128 L18 96 L15 64 L18 58 L13 30 Z'/%3E%3Cpath d='M44 0 L51 5 L54 44 L51 49 L55 80 L51 124 L45 142 L47 104 L44 72 L47 66 L42 32 Z'/%3E%3Cpath d='M74 8 L80 12 L82 44 L79 48 L83 72 L80 108 L75 122 L76 92 L73 64 L76 58 L72 34 Z'/%3E%3C/g%3E%3Cg transform='translate(10 220) rotate(-22) scale(.8)'%3E%3Cpath d='M14 2 L20 6 L23 40 L21 44 L25 70 L22 112 L17 128 L18 96 L15 64 L18 58 L13 30 Z'/%3E%3Cpath d='M44 0 L51 5 L54 44 L51 49 L55 80 L51 124 L45 142 L47 104 L44 72 L47 66 L42 32 Z'/%3E%3Cpath d='M74 8 L80 12 L82 44 L79 48 L83 72 L80 108 L75 122 L76 92 L73 64 L76 58 L72 34 Z'/%3E%3C/g%3E%3Cg transform='translate(250 300) rotate(60) scale(.4)'%3E%3Cpath d='M14 2 L20 6 L23 40 L21 44 L25 70 L22 112 L17 128 L18 96 L15 64 L18 58 L13 30 Z'/%3E%3Cpath d='M44 0 L51 5 L54 44 L51 49 L55 80 L51 124 L45 142 L47 104 L44 72 L47 66 L42 32 Z'/%3E%3Cpath d='M74 8 L80 12 L82 44 L79 48 L83 72 L80 108 L75 122 L76 92 L73 64 L76 58 L72 34 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse 120% 90% at 50% 35%, transparent 50%, rgba(0, 0, 0, .12)); color-scheme: light; } [data-theme="gatinho"] { --ground: #140c2b; --ground-2: #1f1440; --ground-3: #2c1e55; --ink: #f3ecff; --ink-2: #b3a3d6; --line: rgba(255, 255, 255, .08); --accent: #f2a7d8; --accent-ink: #140c2b; --accent-text: #f7b8e0; --good: #8fe3d0; --bad: #ff8fb0; --warn: #f6d28b; --r1: #f2a7d8; --r2: #b9a6ff; --r3: #8fe3d0; --a-gab: #f2a7d8; --a-tx: #b9a6ff; --a-raf: #8fe3d0; --a-other: #f6d28b; --a-ink: #140c2b; --gold: #f6d28b; --dot-ok: #f2a7d8; --dot-no: #33255e; --shadow: 0 -8px 32px rgba(0, 0, 0, .55); --font: 'Fredoka', -apple-system, system-ui, sans-serif; --font-display: 'Fredoka', -apple-system, system-ui, sans-serif; --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill-opacity='.22'%3E%3Cg transform='translate(40 40) scale(1)' fill='%23f48fb1'%3E%3Ccircle cx='0' cy='-7' r='6'/%3E%3Ccircle cx='6.7' cy='-2.2' r='6'/%3E%3Ccircle cx='4.1' cy='5.7' r='6'/%3E%3Ccircle cx='-4.1' cy='5.7' r='6'/%3E%3Ccircle cx='-6.7' cy='-2.2' r='6'/%3E%3Ccircle r='4' fill='%23ffd98a'/%3E%3C/g%3E%3Cg transform='translate(170 70)' fill='%23c9b2ea'%3E%3Cpath d='M-14 -2 L-12 -18 L-4 -10 Q0 -11 4 -10 L12 -18 L14 -2 Q14 12 0 12 Q-14 12 -14 -2 Z'/%3E%3Cg fill='%234a3640' fill-opacity='.55'%3E%3Ccircle cx='-5' cy='0' r='1.6'/%3E%3Ccircle cx='5' cy='0' r='1.6'/%3E%3Cpath d='M-1.5 4 L1.5 4 L0 5.6 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(110 140) rotate(-20)' fill='%23a8d8c8'%3E%3Cellipse cx='0' cy='3' rx='5' ry='4'/%3E%3Ccircle cx='-5' cy='-3' r='2'/%3E%3Ccircle cx='-1.7' cy='-5.5' r='2'/%3E%3Ccircle cx='1.7' cy='-5.5' r='2'/%3E%3Ccircle cx='5' cy='-3' r='2'/%3E%3C/g%3E%3Cg transform='translate(200 180) scale(0.8)' fill='%23c9b2ea'%3E%3Ccircle cx='0' cy='-7' r='6'/%3E%3Ccircle cx='6.7' cy='-2.2' r='6'/%3E%3Ccircle cx='4.1' cy='5.7' r='6'/%3E%3Ccircle cx='-4.1' cy='5.7' r='6'/%3E%3Ccircle cx='-6.7' cy='-2.2' r='6'/%3E%3Ccircle r='4' fill='%23ffd98a'/%3E%3C/g%3E%3Cg transform='translate(60 200) scale(0.7)' fill='%23a8d8c8'%3E%3Ccircle cx='0' cy='-7' r='6'/%3E%3Ccircle cx='6.7' cy='-2.2' r='6'/%3E%3Ccircle cx='4.1' cy='5.7' r='6'/%3E%3Ccircle cx='-4.1' cy='5.7' r='6'/%3E%3Ccircle cx='-6.7' cy='-2.2' r='6'/%3E%3Ccircle r='4' fill='%23ffd98a'/%3E%3C/g%3E%3Cg transform='translate(140 30) rotate(25)' fill='%23f48fb1'%3E%3Cellipse cx='0' cy='3' rx='5' ry='4'/%3E%3Ccircle cx='-5' cy='-3' r='2'/%3E%3Ccircle cx='-1.7' cy='-5.5' r='2'/%3E%3Ccircle cx='1.7' cy='-5.5' r='2'/%3E%3Ccircle cx='5' cy='-3' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); color-scheme: dark; } [data-theme="gatinho"][data-mode="light"] { --ground: #f4effc; --ground-2: #fdfbff; --ground-3: #e7ddf7; --ink: #2a1b4d; --ink-2: #75679a; --line: rgba(42, 27, 77, .08); --accent: #7b4fd6; --accent-ink: #ffffff; --accent-text: #6a3fc4; --good: #2f8f7a; --bad: #c43d6e; --warn: #9a6a10; --r1: #7b4fd6; --r2: #e07bb8; --r3: #4fb8a0; --a-gab: #7b4fd6; --a-tx: #e07bb8; --a-raf: #4fb8a0; --a-other: #a99cc7; --a-ink: #ffffff; --gold: #e0a93e; --dot-ok: #7b4fd6; --dot-no: #ddd2ee; --shadow: 0 -8px 32px rgba(42, 27, 77, .1); --font: 'Fredoka', -apple-system, system-ui, sans-serif; --font-display: 'Fredoka', -apple-system, system-ui, sans-serif; --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill-opacity='.26'%3E%3Cg transform='translate(40 40) scale(1)' fill='%23f48fb1'%3E%3Ccircle cx='0' cy='-7' r='6'/%3E%3Ccircle cx='6.7' cy='-2.2' r='6'/%3E%3Ccircle cx='4.1' cy='5.7' r='6'/%3E%3Ccircle cx='-4.1' cy='5.7' r='6'/%3E%3Ccircle cx='-6.7' cy='-2.2' r='6'/%3E%3Ccircle r='4' fill='%23ffd98a'/%3E%3C/g%3E%3Cg transform='translate(170 70)' fill='%23c9b2ea'%3E%3Cpath d='M-14 -2 L-12 -18 L-4 -10 Q0 -11 4 -10 L12 -18 L14 -2 Q14 12 0 12 Q-14 12 -14 -2 Z'/%3E%3Cg fill='%234a3640' fill-opacity='.55'%3E%3Ccircle cx='-5' cy='0' r='1.6'/%3E%3Ccircle cx='5' cy='0' r='1.6'/%3E%3Cpath d='M-1.5 4 L1.5 4 L0 5.6 Z'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(110 140) rotate(-20)' fill='%23a8d8c8'%3E%3Cellipse cx='0' cy='3' rx='5' ry='4'/%3E%3Ccircle cx='-5' cy='-3' r='2'/%3E%3Ccircle cx='-1.7' cy='-5.5' r='2'/%3E%3Ccircle cx='1.7' cy='-5.5' r='2'/%3E%3Ccircle cx='5' cy='-3' r='2'/%3E%3C/g%3E%3Cg transform='translate(200 180) scale(0.8)' fill='%23c9b2ea'%3E%3Ccircle cx='0' cy='-7' r='6'/%3E%3Ccircle cx='6.7' cy='-2.2' r='6'/%3E%3Ccircle cx='4.1' cy='5.7' r='6'/%3E%3Ccircle cx='-4.1' cy='5.7' r='6'/%3E%3Ccircle cx='-6.7' cy='-2.2' r='6'/%3E%3Ccircle r='4' fill='%23ffd98a'/%3E%3C/g%3E%3Cg transform='translate(60 200) scale(0.7)' fill='%23a8d8c8'%3E%3Ccircle cx='0' cy='-7' r='6'/%3E%3Ccircle cx='6.7' cy='-2.2' r='6'/%3E%3Ccircle cx='4.1' cy='5.7' r='6'/%3E%3Ccircle cx='-4.1' cy='5.7' r='6'/%3E%3Ccircle cx='-6.7' cy='-2.2' r='6'/%3E%3Ccircle r='4' fill='%23ffd98a'/%3E%3C/g%3E%3Cg transform='translate(140 30) rotate(25)' fill='%23f48fb1'%3E%3Cellipse cx='0' cy='3' rx='5' ry='4'/%3E%3Ccircle cx='-5' cy='-3' r='2'/%3E%3Ccircle cx='-1.7' cy='-5.5' r='2'/%3E%3Ccircle cx='1.7' cy='-5.5' r='2'/%3E%3Ccircle cx='5' cy='-3' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); color-scheme: light; } body { background-image: var(--pattern, none); background-size: 320px auto; } [data-theme="gatinho"] body { background-size: 240px; } [data-theme="garra"] body { background-size: 300px auto, 100% 100%; background-attachment: scroll, fixed; } .tp { background-image: var(--pattern, none); background-size: 160px; } /* fonts follow the theme (also inside the preview cards) */ body, .tp { font-family: var(--font); } :is(h1, h2, .num, .big-rings .pos b, .tp b, .block .num, .sc-title) { font-family: var(--font-display); } [data-theme="garra"] :is(h1, h2, .big-rings .pos b, .block .num) { letter-spacing: 0; } [data-theme="garra"] .big-rings .pos b { font-size: 22cqw; text-shadow: 0 0 22px color-mix(in srgb, var(--r2) 45%, transparent); } [data-theme="garra"] .big-rings .rings { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--r2) 30%, transparent)); } [data-theme="gatinho"] :is(.summary, .row-card, .stat, .cal-week, .tp) { border-radius: 30px; } /* Garra: a bite out of the corner of the main cards, claw tears through them */ [data-theme="garra"] :is(.summary, .row-card, .ch-card), .tp[data-theme="garra"] { -webkit-mask: radial-gradient(circle 20px at calc(100% - 2px) 6px, #0000 96%, #000), radial-gradient(circle 13px at calc(100% - 33px) -4px, #0000 96%, #000), radial-gradient(circle 13px at calc(100% + 4px) 37px, #0000 96%, #000), radial-gradient(circle 6px at calc(100% - 52px) 1px, #0000 96%, #000), radial-gradient(circle 6px at calc(100% - 1px) 56px, #0000 96%, #000); mask: radial-gradient(circle 20px at calc(100% - 2px) 6px, #0000 96%, #000), radial-gradient(circle 13px at calc(100% - 33px) -4px, #0000 96%, #000), radial-gradient(circle 13px at calc(100% + 4px) 37px, #0000 96%, #000), radial-gradient(circle 6px at calc(100% - 52px) 1px, #0000 96%, #000), radial-gradient(circle 6px at calc(100% - 1px) 56px, #0000 96%, #000); -webkit-mask-composite: source-in; mask-composite: intersect; } [data-theme="garra"] .summary { position: relative; } [data-theme="garra"] .summary::after { content: ''; position: absolute; left: 14px; bottom: -6px; width: 46px; height: 70px; background: var(--ground); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 150'%3E%3Cg fill='black'%3E%3Cpath d='M14 2 L20 6 L23 40 L21 44 L25 70 L22 112 L17 128 L18 96 L15 64 L18 58 L13 30 Z'/%3E%3Cpath d='M44 0 L51 5 L54 44 L51 49 L55 80 L51 124 L45 142 L47 104 L44 72 L47 66 L42 32 Z'/%3E%3Cpath d='M74 8 L80 12 L82 44 L79 48 L83 72 L80 108 L75 122 L76 92 L73 64 L76 58 L72 34 Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 150'%3E%3Cg fill='black'%3E%3Cpath d='M14 2 L20 6 L23 40 L21 44 L25 70 L22 112 L17 128 L18 96 L15 64 L18 58 L13 30 Z'/%3E%3Cpath d='M44 0 L51 5 L54 44 L51 49 L55 80 L51 124 L45 142 L47 104 L44 72 L47 66 L42 32 Z'/%3E%3Cpath d='M74 8 L80 12 L82 44 L79 48 L83 72 L80 108 L75 122 L76 92 L73 64 L76 58 L72 34 Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(-24deg); pointer-events: none; } /* decorations layer (index.html #deco): only the active theme shows its part */ #app { position: relative; z-index: 1; } .deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .deco > * { display: none; } [data-theme="garra"] .d-claw, [data-theme="garra"] .d-slash, [data-theme="gatinho"] .d-cat, [data-theme="gatinho"] .d-petal { display: block; } .d-claw { position: absolute; top: calc(env(safe-area-inset-top) + 20px); right: -30px; width: 230px; color: var(--ink); opacity: .2; transform: rotate(18deg); } .d-slash { position: absolute; z-index: 3; top: 18%; left: -10%; width: 120%; color: var(--ink); transform: rotate(-32deg); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--r2) 70%, transparent)); animation: slash-out 1.6s .3s var(--ease-in) both; } .d-slash path { animation: claw-once .28s var(--ease-out) both; } .d-slash path:nth-child(2) { animation-delay: .06s; } .d-slash path:nth-child(3) { animation-delay: .12s; } @keyframes claw-once { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } @keyframes slash-out { 0%, 40% { opacity: .9; } 100% { opacity: 0; } } .d-claw path { animation: claw 22s var(--ease-out) infinite; } .d-claw path:nth-child(2) { animation-delay: .08s; } .d-claw path:nth-child(3) { animation-delay: .16s; } @keyframes claw { 0% { clip-path: inset(0 0 100% 0); } 3% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); } } .d-cat { position: absolute; z-index: 2; left: 0; bottom: calc(env(safe-area-inset-bottom) + 84px); width: 64px; color: var(--accent); animation: cat-walk 30s linear infinite; } .d-cat .lg-a { animation: leg .5s ease-in-out infinite alternate; transform-origin: 50% 0; transform-box: fill-box; } .d-cat .lg-b { animation: leg .5s ease-in-out infinite alternate-reverse; transform-origin: 50% 0; transform-box: fill-box; } .d-cat .tail { animation: tail 1.2s ease-in-out infinite alternate; transform-origin: 0 100%; transform-box: fill-box; } @keyframes cat-walk { 0% { transform: translateX(-80px); } 45% { transform: translateX(calc(100vw + 20px)); } 100% { transform: translateX(calc(100vw + 20px)); } } @keyframes leg { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } } @keyframes tail { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } } .d-petal { position: absolute; top: -30px; width: 22px; color: var(--r1); opacity: .7; animation: petal 16s linear infinite; } .d-petal.p2 { left: 70%; color: var(--r3); animation-duration: 21s; animation-delay: -8s; } .d-petal.p1 { left: 18%; } @keyframes petal { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-60px, 110vh) rotate(360deg); } } /* ---------- touch and motion (06/10/2026 design pass) ---------- */ /* every tappable thing answers the finger */ :is(.chip, .react, .food-opt, .seg button, .icon-btn, .pos, .avatar, .sync, .link, .sec-h a, .cal-day:not(:disabled), .gallery button, .thumb-btn, .banner) { transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast), color var(--dur-fast); } :is(.chip, .react, .food-opt, .seg button, .icon-btn, .pos, .avatar, .cal-day:not(:disabled), .gallery button, .thumb-btn, .banner):active { transform: scale(.94); } /* small round buttons keep their look but get a 44 px touch area */ .icon-btn, .avatar { position: relative; } .icon-btn::after, .avatar::after { content: ''; position: absolute; inset: -4px; } /* a screen you open comes in once: content rises a little, cards one after another */ @media (prefers-reduced-motion: no-preference) { .screen-in > * { animation: rise var(--dur-base) var(--ease-out) calc(0ms - var(--t0, 0ms)) both; } .screen-in > :nth-child(2) { animation-delay: calc(var(--stagger) * 1 - var(--t0, 0ms)); } .screen-in > :nth-child(3) { animation-delay: calc(var(--stagger) * 2 - var(--t0, 0ms)); } .screen-in > :nth-child(4) { animation-delay: calc(var(--stagger) * 3 - var(--t0, 0ms)); } .screen-in > :nth-child(5) { animation-delay: calc(var(--stagger) * 4 - var(--t0, 0ms)); } .screen-in > :nth-child(n+6) { animation-delay: calc(var(--stagger) * 5 - var(--t0, 0ms)); } .react.pop { animation: like-pop var(--dur-slow) var(--ease-spring); } .pos.up { animation: pts-up .9s var(--ease-out); } .toast.win.show { animation: win-pop var(--dur-slow) var(--ease-spring); } } @keyframes rise { from { opacity: 0; transform: translateY(10px); } } @keyframes like-pop { 40% { transform: scale(1.25); } } @keyframes pts-up { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } } @keyframes win-pop { from { transform: translate(-50%, 0) scale(.85); } } /* ---------- year view (Treinos → Calendário → Ano) and the plain "what is a dot" line ---------- */ .yd-what { margin-top: 4px; color: var(--ink-2); font-size: 14px; } .yc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; margin-top: 16px; } .yc-m b { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: 13px; font-weight: 600; } .yc-m.now b { color: var(--ink); } .yc-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; } .yc-g .yd { width: 100%; height: auto; aspect-ratio: 1; } .yd.o { background: var(--line); transform: scale(.55); } .yc-g .yd.f { box-shadow: inset 0 0 0 1px var(--ground-3); } /* home: big rings with the position in the middle, summary row under it */ .big-rings { position: relative; container-type: inline-size; width: min(100%, 300px); margin: 16px auto 0; } .big-rings .pos { position: absolute; inset: 23%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; border-radius: 50%; background: none; text-align: center; } .big-rings .pos b { position: relative; min-width: 0; height: auto; padding: 0; background: none; color: var(--ink); font-size: 18.5cqw; font-weight: 800; letter-spacing: -.04em; line-height: 1; } .big-rings .pos > b { display: inline-flex; align-items: center; gap: 1.5cqw; } .big-rings .pos b i { position: static; flex: none; width: 8cqw; font-size: 8cqw; font-style: normal; line-height: 1; } /* beside the number, so it never touches the rings */ .big-rings .pos b i > * { position: static; display: block; width: 100%; height: auto; margin: 0; transform: none; } .big-rings .pos span { font-size: 6cqw; } .big-rings .pos small { color: var(--ink-2); font-size: 4cqw; line-height: 1.25; max-width: 100%; text-wrap: balance; } .big-rings .pos small b { all: unset; color: var(--ink); font-weight: 700; } a.summary { text-decoration: none; color: inherit; padding: 16px; } .summary .sum-list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; gap: 8px; } .summary .sum-list li { flex-direction: column; text-align: center; gap: 6px; } .summary .sum-list b { font-size: 18px; } /* desafios */ .ch-list { display: grid; gap: 10px; } .ch-card { padding: 16px; border-radius: 22px; background: var(--ground-2); } .ch-card .t { display: flex; align-items: center; gap: 8px; } .ch-card .t .ic { width: 18px; height: 18px; color: var(--accent-text); flex: none; } .ch-card .quote-text { margin: 8px 0 4px; } /* iOS draws date inputs wider than their box */ .grid2 > * { min-width: 0; } input.input[type=date] { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; text-align: left; } .rank-list li[data-a] { cursor: pointer; transition: transform var(--dur, .15s) ease; } .rank-list li[data-a]:active { transform: scale(.97); } .sec-h small.hint { font-size: 13px; } .recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; } .recs li { display: grid; gap: 6px; padding: 14px 12px; border-radius: 20px; background: var(--ground-2); color: var(--ink-2); font-size: 12px; } .recs li > svg { width: 18px; height: 18px; color: var(--accent-text); } .recs b { color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .recs small { display: block; margin-top: 2px; font-size: 12px; } .tile .good { color: var(--good); } .tile .bad { color: var(--bad); } /* ---------- pickers: weight ruler (sideways) and height wheel (iOS style); colors from the theme ---------- */ .picker { position: relative; display: grid; justify-items: center; gap: 4px; } .pk-val { color: var(--ink-2); font-size: 17px; font-weight: 600; } .pk-val b { color: var(--ink); font-size: 46px; font-weight: 800; } .ru-track { display: flex; width: 100%; padding-top: 4px; overflow-x: scroll; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x; border-radius: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); } .ru-track::-webkit-scrollbar, .wh-list::-webkit-scrollbar { display: none; } .ru-track::before, .ru-track::after { content: ''; flex: 0 0 calc(50% - 5px); } .ru-strip { display: flex; flex: none; } .ru-strip i { position: relative; flex: none; width: 10px; height: 64px; scroll-snap-align: center; } .ru-strip i::before { content: ''; position: absolute; top: 0; left: 50%; width: 1.5px; height: 16px; margin-left: -.75px; border-radius: 1px; background: var(--ink-2); opacity: .5; } .ru-strip i:nth-child(10n + 6)::before { height: 24px; } .ru-strip i.big::before { width: 2px; height: 34px; margin-left: -1px; opacity: 1; } .ru-strip i.big::after { content: attr(data-l); position: absolute; top: 40px; left: 50%; transform: translateX(-50%); color: var(--ink-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .ru-mark { position: absolute; bottom: 18px; left: 50%; width: 4px; height: 46px; margin-left: -2px; border-radius: 2px; background: var(--accent); pointer-events: none; } .wheel { width: min(100%, 260px); justify-self: center; } .wh-band { position: absolute; top: 50%; left: 0; right: 0; height: 44px; margin-top: -22px; border-radius: 14px; pointer-events: none; background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 50%, transparent); } .wh-list { position: relative; width: 100%; height: 220px; overflow-y: scroll; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); } .wh-list::before, .wh-list::after { content: ''; display: block; height: 88px; } .wh-list span { display: block; height: 44px; color: var(--ink-2); font-size: 20px; font-weight: 600; line-height: 44px; text-align: center; font-variant-numeric: tabular-nums; scroll-snap-align: center; transition: color var(--dur-fast), font-size var(--dur-fast); } .wh-list span.on { color: var(--ink); font-size: 24px; font-weight: 800; } :is(.ru-track, .wh-list):focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } /* ---------- Criar grupo: welcome + wizard (one question per screen) ---------- */ .cg-hero { justify-self: center; width: 140px; height: 150px; } /* the page already starts below the status bar (#app padding): stick right under it instead of adding it twice */ .cg-top { position: sticky; top: env(safe-area-inset-top); z-index: 2; display: flex; align-items: center; gap: 12px; min-height: 60px; background: var(--ground); } .cg-top .icon-btn { width: 44px; height: 44px; } .cg-dots { display: flex; flex: 1; justify-content: center; gap: 6px; padding-right: 56px; } .cg-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--ground-3); transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base); } .cg-dots i.done { background: color-mix(in srgb, var(--accent) 45%, var(--ground-3)); } .cg-dots i.on { width: 24px; background: var(--accent); } .cg h1 { margin-top: 18px; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; } .cg-lead { margin-top: 8px; color: var(--ink-2); font-size: 15px; } .cg-name { min-height: 60px; font-size: 22px; font-weight: 700; } .cg-opts { display: grid; gap: 10px; margin-top: 22px; } .cg-opt { display: grid; gap: 6px; width: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--ground-2); color: var(--ink); text-align: left; transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-fast); } .cg-opt b { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; } .cg-opt small { color: var(--ink-2); font-size: 14px; line-height: 1.45; } .cg-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); } .cg-opt:active { transform: scale(.98); } .cg-note { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--ground-2); color: var(--ink-2); font-size: 14px; line-height: 1.45; } .cg-rules { display: grid; gap: 10px; margin-top: 14px; padding: 14px 16px 14px 34px; list-style: disc; border-radius: 18px; background: var(--ground-2); color: var(--ink-2); font-size: 14px; line-height: 1.45; } .cg-rules li::marker { color: var(--accent-text); } .cg-foot { display: grid; gap: 10px; margin-top: 24px; } .cg-ok { display: grid; place-items: center; justify-self: center; width: 84px; height: 84px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); } .cg-ok .ic { width: 42px; height: 42px; stroke-width: 2.6; } .cg-done .input { text-align: center; font-size: 15px; } @media (prefers-reduced-motion: no-preference) { .cg-step { animation: cg-in var(--dur-slow) var(--ease-out); } .cg-ok { animation: cg-pop .5s var(--ease-spring); } } @keyframes cg-in { from { opacity: 0; transform: translateX(18px); } } @keyframes cg-pop { from { transform: scale(.4); opacity: 0; } } /* Nação: TX's club "Nação Inconformada" — black, paper, one yellow; Anton titles, tilted yellow sticker, mountain peak with a flag */ @font-face { font-family: 'Anton'; src: url(/fonts/anton.woff2) format('woff2'); font-display: swap; } @font-face { font-family: 'Poppins'; src: url(/fonts/poppins-400.woff2) format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Poppins'; src: url(/fonts/poppins-800.woff2) format('woff2'); font-weight: 600 900; font-display: swap; } [data-theme="nacao"] { --ground: #000000; --ground-2: #0d0d0b; --ground-3: #232320; --ink: #f6f4ef; --ink-2: #b6b2a8; --line: rgba(246, 244, 239, .16); --accent: #fac345; --accent-ink: #000000; --accent-text: #ffd668; --good: #fac345; --bad: #ff6b5a; --warn: #ffd668; --r1: #fac345; --r2: #f6f4ef; --r3: #948f84; --a-gab: #fac345; --a-tx: #f6f4ef; --a-raf: #948f84; --a-other: #d99c12; --a-ink: #000000; --gold: #fac345; --dot-ok: #fac345; --dot-no: #2a2a26; --shadow: 0 -8px 32px rgba(0, 0, 0, .6); --font: 'Poppins', -apple-system, system-ui, sans-serif; --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif; --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='160' viewBox='0 0 280 160'%3E%3Cg fill='none' stroke='%23f6f4ef' stroke-opacity='.07' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M10 120 L60 50 L80 76 L110 34 L160 120'/%3E%3Cpath d='M150 150 L190 96 L206 116 L230 84 L270 150'/%3E%3C/g%3E%3Cpath d='M110 34 L110 18 L124 23 L110 28' fill='%23FAC345' fill-opacity='0.15'/%3E%3C/svg%3E"); color-scheme: dark; } [data-theme="nacao"][data-mode="light"] { --ground: #f6f4ef; --ground-2: #ffffff; --ground-3: #edeae2; --ink: #0d0d0b; --ink-2: #63605a; --line: rgba(13, 13, 11, .12); --accent: #0d0d0b; --accent-ink: #fac345; --accent-text: #0d0d0b; --good: #8a6200; --bad: #b3261e; --warn: #8a6200; --r1: #fac345; --r2: #0d0d0b; --r3: #948f84; --a-gab: #d99c12; --a-tx: #0d0d0b; --a-raf: #948f84; --a-other: #63605a; --a-ink: #ffffff; --gold: #d99c12; --dot-ok: #d99c12; --dot-no: #d6d3cb; --shadow: 0 -8px 32px rgba(0, 0, 0, .1); --font: 'Poppins', -apple-system, system-ui, sans-serif; --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif; --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='160' viewBox='0 0 280 160'%3E%3Cg fill='none' stroke='%230d0d0b' stroke-opacity='.08' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M10 120 L60 50 L80 76 L110 34 L160 120'/%3E%3Cpath d='M150 150 L190 96 L206 116 L230 84 L270 150'/%3E%3C/g%3E%3Cpath d='M110 34 L110 18 L124 23 L110 28' fill='%23FAC345' fill-opacity='0.18'/%3E%3C/svg%3E"); color-scheme: light; } [data-theme="nacao"] body { background-size: 280px auto; } [data-theme="nacao"] :is(h1, h2, .tp b, .sc-title) { text-transform: uppercase; letter-spacing: .01em; font-weight: 400; } [data-theme="nacao"] .big-rings .pos b { font-family: var(--font); font-weight: 800; letter-spacing: -.03em; } [data-theme="nacao"] :is(.summary, .row-card, .stat, .cal-week, .tp, .ch-card) { border-radius: 6px; } [data-theme="nacao"] :is(.btn, .chip, .fab) { text-transform: uppercase; letter-spacing: .04em; font-weight: 800; } [data-theme="nacao"] .fab { border-radius: 8px; transform: rotate(-4deg); } /* the three words of the club over the rings */ [data-theme="nacao"] .big-rings { position: relative; } [data-theme="nacao"] .big-rings::before { content: 'Propósito · Processo · Progresso'; display: block; margin-bottom: 10px; text-align: center; color: var(--accent-text); font: 800 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; } [data-theme="nacao"][data-mode="light"] .big-rings::before { color: #8a6200; } /* tilted yellow sticker on the week card, like the club's price tag */ [data-theme="nacao"] .summary { position: relative; overflow: visible; } [data-theme="nacao"] .summary::after { content: 'Inconformado'; position: absolute; top: -12px; right: 12px; padding: 5px 10px; background: #fac345; color: #000; font: 400 13px/1 'Anton', Impact, sans-serif; letter-spacing: .06em; text-transform: uppercase; transform: rotate(4deg); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); pointer-events: none; } .tp[data-theme="nacao"] { position: relative; } .tp[data-theme="nacao"]::after { content: 'TX'; position: absolute; top: 8px; right: 8px; padding: 3px 6px; background: #fac345; color: #000; font: 400 11px/1 'Anton', Impact, sans-serif; transform: rotate(5deg); } [data-theme="nacao"] .d-mtn { display: block; } .d-mtn { position: absolute; left: -6%; right: -6%; bottom: calc(env(safe-area-inset-bottom) + 70px); width: 112%; color: var(--ink); opacity: .1; } .d-mtn .flag { color: #fac345; opacity: 1; transform-origin: 0 50%; transform-box: fill-box; animation: flag 2.4s ease-in-out infinite alternate; } @keyframes flag { from { transform: skewY(-6deg) scaleX(.9); } to { transform: skewY(5deg) scaleX(1); } } @media (prefers-reduced-motion: reduce) { .d-mtn .flag { animation: none; } } [data-theme="nacao"] h1 small { font-family: var(--font); text-transform: none; letter-spacing: 0; } /* ---------- loading: the mascot hops (GPU-only transforms, never blocks taps) ---------- */ .loader { display: grid; justify-items: center; gap: 6px; padding: 18px; color: var(--ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent; } .loader .ld-m { width: 96px; height: 104px; display: block; transform-origin: 50% 100%; animation: ld-hop .9s cubic-bezier(.3, 0, .3, 1) infinite; will-change: transform; } .loader .ld-m .m-svg { width: 100%; height: 100%; } .loader .ld-sh { width: 54px; height: 8px; margin-top: -4px; border-radius: 50%; background: currentColor; opacity: .18; animation: ld-sh .9s cubic-bezier(.3, 0, .3, 1) infinite; } .loader .ld-t { font-weight: 600; font-size: 15px; } .loader .ld-t::after { content: '…'; display: inline-block; width: 1.1em; text-align: left; animation: ld-dots 1.2s steps(4) infinite; clip-path: inset(0 100% 0 0); } .loader.flip .ld-m { animation: ld-flip .6s cubic-bezier(.2, .8, .2, 1), ld-hop .9s cubic-bezier(.3, 0, .3, 1) .6s infinite; } .loader.mini { grid-auto-flow: column; align-items: center; padding: 0; gap: 8px; cursor: default; white-space: nowrap; } .loader.mini .ld-m { width: 40px; height: 44px; } .loader.mini .ld-sh { display: none; } @keyframes ld-hop { 0%, 100% { transform: translateY(0) scale(1.06, .94); } 15% { transform: translateY(0) scale(.96, 1.05); } 50% { transform: translateY(-22px) scale(1, 1); } 85% { transform: translateY(0) scale(1.02, .98); } } @keyframes ld-sh { 0%, 100% { transform: scale(1); opacity: .2; } 50% { transform: scale(.6); opacity: .08; } } @keyframes ld-dots { to { clip-path: inset(0 -10% 0 0); } } @keyframes ld-flip { 0% { transform: translateY(0); } 50% { transform: translateY(-40px) rotate(-180deg); } 100% { transform: translateY(0) rotate(-360deg); } } @media (prefers-reduced-motion: reduce) { .loader .ld-m { animation: none !important; } .loader .ld-t::after { animation: none !important; clip-path: none; } } .btn.busy { position: relative; } .btn.busy::after { content: ''; position: absolute; right: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ld-spin .7s linear infinite; } @keyframes ld-spin { to { transform: rotate(1turn); } } /* ---------- App Store: Apple button, checkboxes, community rules ---------- */ .btn.apple { gap: 10px; background: #000; color: #fff; border: 1px solid #000; } [data-mode="light"] .btn.apple, :root:not([data-mode]) .btn.apple { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); } .check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; font-size: 15px; line-height: 1.4; color: var(--ink); } .check input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--accent); } .check a, .rules-list a { color: inherit; text-decoration: underline; } .rules-list { display: grid; gap: 12px; margin: 8px 0 18px; padding: 0 0 0 20px; text-align: left; font-size: 16px; line-height: 1.45; } .btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); margin-top: 4px; } /* group code: big, spaced, easy to read aloud */ .join-code { margin: 14px 0 6px; font: 800 30px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; text-align: center; color: var(--accent-text); user-select: all; } .seg .ic { width: 16px; height: 16px; vertical-align: -3px; } /* fourth ring: sleep. Its color comes from the theme's own ring colors, so it always matches. */ :root, [data-theme] { --r4: color-mix(in oklab, var(--r1) 55%, var(--r3)); } .rings .c4 { stroke: var(--r4); } .sum-ic.c4 { color: var(--r4); } .big-rings.four .pos { inset: 27%; } .big-rings.four .pos b { font-size: 46px; } .big-rings.four .pos span { font-size: 16px; } .big-rings.four .pos b i { top: -26px; font-size: 21px; } /* sleep */ .sleep-total { font-size: 20px; font-weight: 700; text-align: center; margin: 4px 0; } .sleep-card { display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: var(--ground-2); } .sleep-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .sleep-row small { display: block; color: var(--ink-2); font-size: 13px; } .sleep-row b { font-size: 22px; font-variant-numeric: tabular-nums; } .sleep-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .sleep-week button, .sleep-week span { border: 0; font-family: inherit; cursor: pointer; display: grid; place-items: center; min-height: 36px; border-radius: 10px; font-size: 11px; font-weight: 600; background: var(--ground-3, rgba(127,127,127,.12)); color: var(--ink-2); font-variant-numeric: tabular-nums; } .sleep-week .on { background: color-mix(in srgb, var(--r4) 28%, transparent); color: var(--ink); } .sleep-week .off { outline: 1px dashed var(--ink-2); outline-offset: -1px; } /* Perfil antes do login: same look as Criar grupo, with the chosen mascot riding along at the top */ .pf-chips { margin-top: 22px; gap: 10px; } .pf-chips .chip { min-height: 48px; padding: 0 18px; font-size: 16px; } .pf-pick { margin-top: 26px; } .pf-auth { display: grid; gap: 12px; margin-top: 26px; } .pf .mp-row, .pf .tp-row { margin-top: 22px; } /* no group yet */ .solo-cta { display: grid; justify-items: center; gap: 10px; margin-top: 24px; padding: 28px 20px; border-radius: 28px; background: var(--ground-2); text-align: center; } .solo-cta .m-svg { width: 110px; height: 120px; } .solo-cta h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; } .solo-cta p { color: var(--ink-2); font-size: 15px; line-height: 1.45; max-width: 32ch; } .solo-cta .btn { width: 100%; margin-top: 6px; } .big-rings .pos.solo b em { font-style: normal; font-size: .5em; color: var(--ink-2); font-weight: 700; } .big-rings .pos.solo span { font-size: 15px; color: var(--ink-2); } /* the Continuar button sits at the bottom, where the thumb is */ /* fills the screen exactly: minus #app's top padding, so the Continuar button is never pushed off the bottom */ .pf { display: flex; flex-direction: column; min-height: calc(100dvh - env(safe-area-inset-top) - 8px); } .pf .cg-step { flex: 1; display: flex; flex-direction: column; padding-bottom: calc(20px + env(safe-area-inset-bottom)); } .pf .cg-foot { margin-top: auto; padding-top: 24px; } .big-rings .pos.solo b { display: flex; align-items: baseline; justify-content: center; } /* ---- Perfil: the mascot guide ---- */ .pf .cg-top { gap: 16px; } .pf-bar { flex: 1; height: 6px; margin-right: 8px; border-radius: 3px; background: var(--ground-3); overflow: hidden; } .pf-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(var(--to)); } .pf-guide { position: relative; display: grid; grid-template-columns: 76px 1fr; align-items: end; gap: 10px; margin-top: 34px; } .pf-m { width: 76px; height: 82px; transform-origin: 50% 100%; } .pf-m .m-svg { width: 100%; height: 100%; } .pf .cg-step h1.pf-say { position: relative; margin: 0 0 18px; padding: 14px 16px; border-radius: 20px 20px 20px 6px; background: var(--ground-2); font-size: 22px; line-height: 1.2; letter-spacing: -.02em; } .pf-say::before { content: ''; position: absolute; left: -7px; bottom: 0; width: 14px; height: 14px; background: inherit; clip-path: polygon(100% 0, 100% 100%, 0 100%); } .pf-pop { position: absolute; left: 0; top: -32px; z-index: 1; padding: 6px 11px; border-radius: 14px 14px 14px 4px; background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 800; white-space: nowrap; opacity: 0; pointer-events: none; } .pf-pop:empty { display: none; } /* summary card at the end */ .pf-card { display: grid; justify-items: center; gap: 10px; padding: 20px 18px; border-radius: 28px; background: var(--ground-2); text-align: center; } .pf-card-m { width: 110px; height: 120px; } .pf-card-m .m-svg { width: 100%; height: 100%; } .pf-card-name { font-size: 26px; font-weight: 800; letter-spacing: -.03em; } .pf-card-sports { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .pf-card-sports span { padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); font-size: 13px; font-weight: 700; } .pf-card-stats dd small { display: block; color: var(--ink-2); font-size: 12px; font-weight: 600; } .pf-guide.only-say { grid-template-columns: 1fr; margin-top: 16px; } .pf-guide.only-say .pf-m { display: none; } .pf-guide.only-say .pf-say { border-radius: 20px; text-align: center; } .pf-guide.only-say .pf-say::before { display: none; } .pf-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin: 4px 0 0; } .pf-card-stats div { padding: 10px 6px; border-radius: 16px; background: var(--ground-3); } .pf-card-stats dt { color: var(--ink-2); font-size: 12px; font-weight: 600; } .pf-card-stats dd { margin: 2px 0 0; font-size: 14px; font-weight: 800; line-height: 1.25; } .pf .pf-card + .pf-auth { margin-top: 18px; } @media (prefers-reduced-motion: no-preference) { .pf .cg-step.still { animation: none; } .pf .cg-step.pf-go-next { animation: pf-next var(--dur-slow) var(--ease-out); } .pf .cg-step.pf-go-back { animation: pf-back var(--dur-slow) var(--ease-out); } .pf-bar i { animation: pf-bar var(--dur-slow) var(--ease-out) both; } .pf-go-next .pf-m, .pf-go-back .pf-m { animation: pf-land .6s var(--ease-spring) both; } .pf-go-next .pf-say, .pf-go-back .pf-say { animation: pf-say var(--dur-slow) var(--ease-spring) 80ms both; } .pf-m.go { animation: pf-hop .55s var(--ease-out); } .pf-pop.go { animation: pf-pop 1.6s var(--ease-out) both; } .pf-chips .chip.pop { animation: like-pop var(--dur-base) var(--ease-spring); } .pf-wave { animation: pf-wave 2.4s ease-in-out infinite; transform-origin: 50% 100%; } .pf-card { animation: pf-card .6s var(--ease-spring) 120ms both; } .pf-card > * { animation: rise var(--dur-base) var(--ease-out) both; } .pf-card > :nth-child(2) { animation-delay: 260ms; } .pf-card > :nth-child(3) { animation-delay: 340ms; } .pf-card > :nth-child(4) { animation-delay: 420ms; } .pf-card + .pf-auth { animation: rise var(--dur-base) var(--ease-out) 520ms both; } } @keyframes pf-next { from { opacity: 0; transform: translateX(36px); } } @keyframes pf-back { from { opacity: 0; transform: translateX(-36px); } } @keyframes pf-bar { from { transform: scaleX(var(--from)); } } @keyframes pf-land { from { opacity: 0; transform: translateY(14px) scale(.85); } } @keyframes pf-say { from { opacity: 0; transform: scale(.9); transform-origin: 0 100%; } } @keyframes pf-hop { 30% { transform: translateY(-14px) scaleY(1.05); } 55% { transform: translateY(0) scaleY(.94); } 75% { transform: scaleY(1.02); } } @keyframes pf-pop { 0% { opacity: 0; transform: translateY(8px) scale(.7); } 14% { opacity: 1; transform: translateY(0) scale(1.06); } 22% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } } @keyframes pf-wave { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-4deg) translateY(-4px); } 20% { transform: rotate(3deg); } 30% { transform: none; } } @keyframes pf-card { from { opacity: 0; transform: translateY(24px) scale(.94); } } @media (prefers-reduced-motion: reduce) { .pf-pop:not(:empty) { opacity: 1; } } /* ---- Estatísticas ---- */ .st-area { margin-top: 14px; } .st-chart { margin-top: 16px; padding: 16px; border-radius: 24px; background: var(--ground-2); } .st-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .st-head .num { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .st-head select, .st-sel select { appearance: none; border: 0; background: none; color: var(--ink-2); font: 600 14px var(--font); padding: 4px 18px 4px 0; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 6px center, right 1px center; background-size: 5px 5px; background-repeat: no-repeat; } .st-ghost { display: grid; place-items: center; height: 150px; color: var(--ink-2); font-size: 14px; background: repeating-linear-gradient(to right, transparent 0 6px, color-mix(in srgb, var(--ink-2) 18%, transparent) 6px 8px) center 75% / 100% 1px no-repeat; } .st-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .st-sel { display: block; min-width: 0; } .st-sel select { width: 100%; min-height: 48px; padding: 0 34px 0 16px; border: 1px solid var(--line); border-radius: 999px; background-color: var(--ground-2); color: var(--ink); font-size: 15px; background-position: right 20px center, right 15px center; text-overflow: ellipsis; } .st-range { margin-top: 14px; } .st-range .chips { justify-content: flex-end; gap: 6px; } .st-range .chip { min-width: 52px; justify-content: center; } .st-dates { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; } .st-dates .icon-btn { width: 40px; height: 40px; background: none; } .st-dates .st-next .ic { transform: scaleX(-1); } .st-dates .icon-btn:disabled { opacity: .25; } .st-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .st-card { position: relative; display: grid; align-content: start; gap: 12px; min-height: 170px; padding: 14px; border-radius: 24px; background: var(--ground-2); overflow: hidden; } .st-card-h { display: grid; gap: 2px; } .st-card-h b { color: var(--ink-2); font-weight: 600; } .st-card-h b { font-size: 15px; } .st-card-h span { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .st-empty { position: absolute; left: 14px; bottom: 12px; color: var(--ink-2); font-size: 12px; } .st-card:has(.st-empty) .st-bars, .st-card:has(.st-empty) .bm, .st-card:has(.st-empty) .st-grid { opacity: .35; } .st-grid { display: grid; grid-template-rows: repeat(7, auto); grid-template-columns: repeat(var(--cols), minmax(0, 16px)); grid-auto-flow: column; gap: 3px; } .st-grid i { aspect-ratio: 1; border-radius: 4px; background: var(--ground-3); } .st-grid i.pad { background: none; } .st-grid i.on { background: var(--accent); } .st-grid i.fut { opacity: .35; } .st-grid.tiny { gap: 1px; } .st-grid.tiny i { border-radius: 1px; } .st-bars { width: 100%; height: 80px; } .st-bars rect { fill: var(--accent); } .bm { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; } .bm svg { width: 100%; height: auto; } .bm-base > * { fill: var(--ground-3); } .bm-part > * { fill: var(--ground-3); } .bm-part.on > * { fill: color-mix(in srgb, var(--accent) calc(var(--a) * 100%), var(--ground-3)); } .st-top { color: var(--ink-2); font-size: 12px; } .st-levels { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; font-size: 13px; } .st-levels li { display: grid; grid-template-columns: 1fr auto; gap: 4px; } .st-levels i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: linear-gradient(var(--accent), var(--accent)) 0 / calc(var(--p) * 100%) 100% no-repeat, var(--ground-3); } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } @media (max-width: 340px) { .st-cards, .st-filters { grid-template-columns: 1fr; } } .st-chart .st-bars { height: 120px; margin-top: 8px; } .st-axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; } .seg-4 button { padding: 0 11px; font-size: 14px; } .st-card.wide { grid-column: 1 / -1; } .st-card.wide .bm { max-width: 300px; justify-self: center; width: 100%; gap: 24px; } .st-card.wide .st-top { text-align: center; } /* Meu treino */ .plan-row { display: grid; gap: 8px; margin-bottom: 12px; } .plan-row .chip .ic { width: 14px; height: 14px; } .chip.ghost { background: none; border: 1px dashed var(--line); color: var(--ink-2); } .plan-line { display: grid; grid-template-columns: 1fr 70px 76px 40px; gap: 8px; align-items: end; } .plan-line .field > span { font-size: 12px; } /* Conquistas */ .ach-h { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 0 8px; } .ach-h h3 { font-size: 15px; font-weight: 700; } .ach-h small { color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; } .ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .ach { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink-2); text-align: center; } .ach b { font-size: 11px; font-weight: 600; line-height: 1.2; } .ach-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--ground-2); font-size: 28px; filter: grayscale(1); opacity: .45; transition: transform var(--dur-press) var(--ease-out); } .ach:active .ach-ic { transform: scale(.92); } .ach.on { color: var(--ink); } .ach.on .ach-ic { filter: none; opacity: 1; background: color-mix(in srgb, var(--accent) 18%, var(--ground-2)); } .ach.hard.on .ach-ic { background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--gold, var(--accent)) 55%, transparent), var(--ground-2) 70%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold, var(--accent)) 60%, transparent); } .ach-sheet { display: grid; justify-items: center; gap: 10px; text-align: center; padding-bottom: 6px; } .ach-big { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; background: var(--ground-2); font-size: 56px; filter: grayscale(1); opacity: .5; } .ach-sheet.on .ach-big { filter: none; opacity: 1; } .ach-desc { font-size: 17px; font-weight: 600; } .ach-when { color: var(--ink-2); font-size: 14px; } .ach-when .ic { width: 14px; height: 14px; vertical-align: -2px; } .ach-fact { display: grid; gap: 6px; width: 100%; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--accent) 12%, var(--ground-2)); text-align: left; } .ach-fact b { font-size: 16px; line-height: 1.35; } .ach-fact small { color: var(--ink-2); font-size: 12px; line-height: 1.4; } @media (prefers-reduced-motion: no-preference) { .ach-sheet.on .ach-big { animation: pf-card .6s var(--ease-spring) both; } } /* Retrospectiva */ .rc-row { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; scrollbar-width: none; overscroll-behavior-x: contain; } .rc-row::-webkit-scrollbar { display: none; } .rc { display: grid; align-content: center; justify-items: start; gap: 8px; min-height: 340px; padding: 26px 22px; border-radius: 28px; scroll-snap-align: center; background: var(--ground-2); } .rc.c1 { background: color-mix(in srgb, var(--r1) 26%, var(--ground-2)); } .rc.c2 { background: color-mix(in srgb, var(--r2) 26%, var(--ground-2)); } .rc.c3 { background: color-mix(in srgb, var(--r3) 26%, var(--ground-2)); } .rc.c4 { background: color-mix(in srgb, var(--accent) 26%, var(--ground-2)); } .rc.c5 { background: color-mix(in srgb, var(--r4) 30%, var(--ground-2)); } .rc.c6 { background: color-mix(in srgb, var(--good) 22%, var(--ground-2)); } .rc-hi { justify-items: center; text-align: center; background: color-mix(in srgb, var(--accent) 18%, var(--ground-2)); } .rc-hi .m-svg { width: 130px; height: 140px; } .rc-big { font-size: 52px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; text-wrap: balance; } .rc-hi .rc-big { font-size: 32px; letter-spacing: -.03em; } .rc p { font-size: 18px; font-weight: 600; line-height: 1.3; } .rc small { color: var(--ink-2); font-size: 14px; } .rc-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; } .rc-nav .btn { text-transform: capitalize; } .rc-fwd .ic { transform: scaleX(-1); } .rc-open { width: 100%; margin-top: 18px; } button.banner { width: 100%; border: 0; font: inherit; color: inherit; text-align: left; } @media (prefers-reduced-motion: no-preference) { .rc { animation: rise var(--dur-base) var(--ease-out) both; } .rc:nth-child(2) { animation-delay: 80ms; } } #app:has(> .pf), #app:has(> .cg) { padding-bottom: 0; } /* ================= Risen Club (18/10/2026) ================= */ /* Brand: lime #d0d851 on night indigo #352c55, cream paper. Light is the default; Escuro = indigo night. */ [data-theme="risen"] { --ground: #f1ede5; --ground-2: #fbf9f4; --ground-3: #e5e0d6; --ink: #241d3d; --ink-2: #645d7d; --line: rgba(53, 44, 85, .1); --accent: #352c55; --accent-ink: #d0d851; --accent-text: #352c55; --good: #4f7a1f; --bad: #b8443a; --warn: #8a5a00; --r1: #352c55; --r2: #b7bf2e; --r3: #d57565; --a-gab: #352c55; --a-tx: #d57565; --a-raf: #5f9aa0; --a-other: #8a83a3; --a-ink: #fbf9f4; --gold: #b7bf2e; --dot-ok: #352c55; --dot-no: #d9d3c7; --shadow: 0 -8px 32px rgba(53, 44, 85, .12); color-scheme: light; } [data-theme="risen"][data-mode="dark"] { --ground: #231d3b; --ground-2: #2e2650; --ground-3: #3b3262; --ink: #f1ede5; --ink-2: #b3acc9; --line: rgba(255, 255, 255, .09); --accent: #d0d851; --accent-ink: #231d3b; --accent-text: #d0d851; --good: #d0d851; --bad: #ff8a7a; --warn: #f0c060; --r1: #d0d851; --r2: #f1ede5; --r3: #d57565; --a-gab: #d0d851; --a-tx: #d57565; --a-raf: #7fb3b8; --a-other: #b3acc9; --a-ink: #231d3b; --gold: #d0d851; --dot-ok: #d0d851; --dot-no: #4a4070; --shadow: 0 -8px 32px rgba(0, 0, 0, .5); color-scheme: dark; } /* wordmark: the R monogram + "isen" */ .rmark { display: block; } .wm { display: inline-flex; align-items: baseline; gap: .04em; color: var(--accent-text); font: 500 26px/1 'Fredoka', var(--font); letter-spacing: -.01em; } .wm .rmark { width: .78em; height: .76em; align-self: center; transform: translateY(.04em); } .brand { display: inline-flex; align-items: center; } .g-chip { padding: 4px 10px; border-radius: 999px; background: var(--ground-3); color: var(--ink-2); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; } .menu-btn { background: transparent; color: var(--ink); width: 40px; height: 40px; margin-left: -6px; } .menu-btn .ic { width: 22px; height: 22px; } .icon-btn.ghost { visibility: hidden; } /* ☰ side menu */ .drawer { width: min(84vw, 340px); max-width: none; height: 100dvh; max-height: none; margin: 0 auto 0 0; padding: 0; border: 0; border-radius: 0 24px 24px 0; background: var(--ground-2); color: var(--ink); box-shadow: 0 0 40px rgba(0, 0, 0, .25); } .drawer::backdrop { background: rgba(20, 16, 36, .45); } .drawer[open] { animation: dr-in var(--dur-slow) var(--ease-out); } .drawer[open]::backdrop { animation: fade-bd var(--dur-base) ease-out; } @keyframes dr-in { from { transform: translateX(-100%); } } .dr-in { display: flex; flex-direction: column; min-height: 100%; padding: calc(env(safe-area-inset-top) + 22px) 14px calc(env(safe-area-inset-bottom) + 18px); } .dr-me { display: flex; align-items: center; gap: 12px; padding: 8px 8px 18px; border-bottom: 1px solid var(--line); text-decoration: none; } .dr-m { width: 52px; height: 52px; flex: none; } .dr-m svg { width: 100%; height: 100%; } .dr-me b { display: block; font-size: 18px; letter-spacing: -.01em; } .dr-me small { color: var(--ink-2); font-size: 14px; } .dr-list { display: grid; gap: 2px; padding: 12px 0; } .dr-bottom { margin-top: auto; border-top: 1px solid var(--line); } .dr-row { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 10px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font-size: 16px; font-weight: 500; text-decoration: none; text-align: left; transition: background-color var(--dur-fast); } .dr-row .ic { width: 20px; height: 20px; color: var(--ink-2); } .dr-row:active { background: var(--ground-3); } /* sub screens (Perfil, Configurações, Notificações, Editar) */ .sub-top { justify-content: space-between; } .sub-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; } .sub-top .icon-btn { background: transparent; color: var(--ink); } .set-group { margin-top: 26px; } .set-group > h2 { margin: 0 4px 10px; color: var(--ink-2); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .set-list { border-radius: 20px; background: var(--ground-2); overflow: hidden; } .set-item { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 16px; text-decoration: none; } .set-item + .set-item { border-top: 1px solid var(--line); } .set-item > .ic:first-child { width: 20px; height: 20px; color: var(--ink-2); } .set-item small { color: var(--ink-2); font-size: 14px; } .set-item > .ic:last-child { width: 16px; height: 16px; color: var(--ink-2); } .set-item:active { background: var(--ground-3); } .danger-zone .btn { width: 100%; } .me-card { display: grid; justify-items: center; gap: 8px; margin-top: 10px; padding: 22px 16px; border-radius: 26px; background: var(--ground-2); text-align: center; } .me-m { width: 96px; height: 96px; } .me-m svg { width: 100%; height: 100%; } .me-card h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; } .me-card .grid2 { width: 100%; } .ig-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: 600; text-decoration: none; } .ig-link .ic { width: 18px; height: 18px; } .ig-input { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; } .ig-input .input { flex: 1; min-width: 0; } /* Como você quer treinar? */ .start { justify-items: center; } .start-m { width: 120px; height: 120px; } .start-m svg { width: 100%; height: 100%; } .start .row-card { text-align: left; } .start > .btn { width: 100%; } /* verse of the day: brand colors on every theme */ .daily { position: fixed; background: #352c55; color: #f1ede5; overflow: hidden; } .daily-r { position: absolute; z-index: 0; right: max(25vw, calc(50vw - 190px)); top: -5dvh; height: 108dvh; width: auto; color: #d0d851; pointer-events: none; } .daily-b, .daily-f { position: relative; z-index: 1; } .daily-card { padding: 22px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 28px; background: rgba(53, 44, 85, .46); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 10px 30px rgba(20, 16, 36, .25); } .daily-card + .daily-card { margin-top: 14px; } .daily .daily-k { color: rgba(241, 237, 229, .85); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } .daily .verse p { color: #f7f4ee; font-size: 22px; font-weight: 600; text-wrap: pretty; text-shadow: 0 1px 12px rgba(20, 16, 36, .35); } .daily .verse cite { color: rgba(241, 237, 229, .85); font-weight: 500; letter-spacing: .06em; } .daily .quotes { background: rgba(255, 255, 255, .08); color: #f1ede5; } .daily .quote-by { color: rgba(241, 237, 229, .75); } .daily-f { display: flex; justify-content: flex-end; } .daily-go { display: grid; place-items: center; width: 84px; height: 60px; border: 1px solid rgba(53, 44, 85, .15); border-radius: 999px; background: #d0d851; color: #352c55; box-shadow: 0 6px 18px rgba(20, 16, 36, .3); transition: transform var(--dur-press) var(--ease-out); } .daily-go .ic { width: 30px; height: 30px; stroke-width: 2.4; } .daily-go:active { transform: scale(.94); } @media (prefers-reduced-motion: no-preference) { .daily[open] .daily-r { animation: dr-r 1.1s var(--ease-out) both; } .daily[open] .daily-card { animation: rise .6s var(--ease-out) .25s both; } .daily[open] .daily-go { animation: rise .5s var(--ease-out) .5s both; } } @keyframes dr-r { from { opacity: 0; transform: translateX(-12%) scale(1.05); } } /* loading: motion-graphics intro of the full logo (RISEN rises, the E bar shoots in, CLUB drops), then a curtain up */ .splash { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; align-content: center; gap: 34px; background: #352c55; color: #d0d851; } .sp-logo { width: min(62vw, 260px); height: auto; overflow: visible; } .sp-logo .l { transform-box: fill-box; } .sp-bar { width: 64px; height: 4px; border-radius: 4px; background: rgba(208, 216, 81, .22); overflow: hidden; opacity: 0; position: relative; } .sp-bar::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: #d0d851; } @media (prefers-reduced-motion: no-preference) { .r1 .l { animation: sp-rise .62s cubic-bezier(.2, 1.35, .35, 1) calc(120ms + var(--i) * 70ms) both; transform-origin: 50% 100%; } .r1 .bar { animation: sp-bar .38s cubic-bezier(.2, .9, .2, 1) 640ms both; transform-origin: 0 50%; } .r2 .l { animation: sp-drop .56s cubic-bezier(.2, 1.3, .35, 1) calc(620ms + var(--i) * 70ms) both; transform-origin: 50% 0; } .sp-logo { animation: sp-pop .45s ease-out 1.15s both; } .sp-bar { animation: sp-show .3s ease-out 1.7s forwards; } .sp-bar::after { animation: sp-load 1s ease-in-out 1.7s infinite; } .splash.out { animation: sp-curtain .6s cubic-bezier(.7, 0, .3, 1) forwards; } .splash.out .sp-logo { animation: sp-away .45s cubic-bezier(.5, 0, .75, 0) forwards; } .splash.out + #app main { animation: sp-reveal .7s var(--ease-out) .1s both; } } @media (prefers-reduced-motion: reduce) { .splash.out { opacity: 0; transition: opacity .3s; } } .splash.out { pointer-events: none; } @keyframes sp-rise { from { transform: translateY(115%) rotate(-6deg); } } @keyframes sp-drop { from { transform: translateY(-115%) rotate(4deg); } } @keyframes sp-bar { from { transform: translateX(-160%) scaleX(.2); opacity: 0; } 60% { transform: translateX(6%) scaleX(1.08); } } @keyframes sp-pop { 40% { transform: scale(1.05); filter: drop-shadow(0 0 18px rgba(208, 216, 81, .45)); } } @keyframes sp-show { to { opacity: 1; } } @keyframes sp-load { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } @keyframes sp-curtain { to { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 18% 18%; } } @keyframes sp-away { to { transform: translateY(-40px) scale(.9); opacity: 0; } } @keyframes sp-reveal { from { transform: translateY(40px) scale(.97); opacity: 0; } } /* full logo inside the app: one color (follows the theme) through a mask */ .logo-full { display: block; width: min(64vw, 260px); aspect-ratio: 916 / 427; margin: 0 auto; background: var(--accent-text); -webkit-mask: url(/img/risen-club.svg) center / contain no-repeat; mask: url(/img/risen-club.svg) center / contain no-repeat; } /* screens slide in from the side they live on (tab order; menu screens are to the right) */ @media (prefers-reduced-motion: no-preference) { main.screen-in.from-r { animation: from-r var(--dur-slow) var(--ease-out); } main.screen-in.from-l { animation: from-l var(--dur-slow) var(--ease-out); } } @keyframes from-r { from { transform: translateX(28px); opacity: .3; } } @keyframes from-l { from { transform: translateX(-28px); opacity: .3; } } /* every tap answers: buttons and rows press in a little */ @media (prefers-reduced-motion: no-preference) { .btn, .row-card, .chip, .set-item, .dr-row, .icon-btn { transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast); } .btn:active, .row-card:active, .chip:active, .set-item:active, .dr-row:active, .icon-btn:active { transform: scale(.97); } } body { overflow-x: clip; } .login-wm { display: grid; justify-items: center; gap: 2px; } .login-wm .wm { font-size: 64px; } .login-wm small { margin: 0 !important; font: 500 18px/1 'Fredoka', var(--font) !important; letter-spacing: .5em !important; text-indent: .5em; color: var(--ink-2); text-transform: uppercase; } .set-item .grow, .dr-row span { flex: 1; } .me-card .btn { padding: 0 12px; font-size: 15px; white-space: nowrap; } a.row-card { text-decoration: none; color: inherit; } /* Risen bottom bar (PDF): a long lime pill for the tabs and a lime pill "+" beside it, same line */ @media (max-width: 959px) { [data-theme="risen"] .nav { left: 16px; right: 100px; transform: none; justify-content: space-between; gap: 2px; border: 0; background: #d0d851; box-shadow: 0 8px 24px rgba(53, 44, 85, .22); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-theme="risen"] .nav a { flex: 1; width: auto; max-width: 64px; border-radius: 999px; color: rgba(53, 44, 85, .62); } [data-theme="risen"] .nav a[aria-current="page"] { background: #352c55; color: #d0d851; } [data-theme="risen"] .fab { right: 16px; bottom: max(10px, env(safe-area-inset-bottom) - 12px); width: 76px; height: 64px; border-radius: 999px; background: #d0d851; color: #352c55; box-shadow: 0 8px 24px rgba(53, 44, 85, .22); } [data-theme="risen"] .fab .ic { stroke-width: 3; } } /* bigger home rings with thinner strokes: the place, the medal and the points fit inside the middle */ .big-rings { width: min(100%, 340px); } .big-rings .pos { inset: 19%; } .big-rings.four .pos { inset: 22%; } .big-rings .pos b i, .big-rings.four .pos b i { top: -34px; font-size: 30px; } /* medals (SVG): sized by the font size of where they sit */ .medal { display: block; width: .8em; height: 1em; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); } .mini .md { top: -10px; right: -8px; font-size: 18px; } .sc-md { font-size: 34px; } .sc-item .medal { width: 1em; height: 1.25em; } @media (prefers-reduced-motion: no-preference) { .medal.m1 .md-shine { animation: md-shine 3.2s ease-in-out infinite; } } @keyframes md-shine { 0%, 70%, 100% { stroke-opacity: .7; } 80% { stroke-opacity: 1; filter: drop-shadow(0 0 2px #fff); } } .big-rings .pos b i, .big-rings.four .pos b i { top: -40px; font-size: 36px; } .big-rings .pos, .big-rings.four .pos { padding-top: 14px; } /* inactive tab icons: one solid color (a see-through stroke darkens where lines cross) */ @media (max-width: 959px) { [data-theme="risen"] .nav a { color: #352c55; } [data-theme="risen"] .nav a[aria-current="page"] { color: #d0d851; } } /* photo without a date (screenshot, chat app): visible to the group */ .tag.nodate { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); font-size: 13px; font-weight: 600; } .tag.nodate .ic { width: 15px; height: 15px; } .nodate-dot { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--warn); color: #fff; font-style: normal; } .nodate-dot .ic { width: 13px; height: 13px; } /* the big moment is always in the middle of what is on screen */ .buddy.big { position: fixed; } /* week goal (someone without a group): 1–7 in one row */ .wg-pick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 14px; } .wg-pick .cg-opt { place-items: center; aspect-ratio: 1; padding: 0; border-radius: 14px; } .wg-pick .cg-opt b { justify-content: center; } .wg-card { margin-top: 16px; } /* days with 2+ workouts: the square splits, a badge says how many */ .cd-pics { position: absolute; inset: 0; z-index: -2; display: grid; gap: 2px; } .cd-pics.n2 { grid-template-columns: 1fr 1fr; } .cd-pics img { position: static; width: 100%; height: 100%; object-fit: cover; } .cd-many { position: absolute; right: 4px; bottom: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font: 700 11px/18px inherit; font-style: normal; } .day-pics { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -4px 10px; padding: 0 4px; } .day-pics button { flex: 0 0 86%; scroll-snap-align: center; display: grid; gap: 4px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; } .day-pics img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; } .day-pics small { color: var(--muted); } /* month view */ .cal-day.mon { min-height: 0; aspect-ratio: 1; padding: 4px 2px; border-radius: 10px; } .cal-days.mon-h span { text-align: center; font-size: 11px; color: var(--muted); } .cal-h .icon-btn:disabled { opacity: .3; } /* comments under a photo */ .cmts { margin-top: 18px; } .cmt-h { font-size: 15px; margin: 0 0 8px; } .cmt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .cmt { display: flex; gap: 10px; align-items: flex-start; } .cmt.reply { margin-left: 28px; } .cmt-b { flex: 1; min-width: 0; } .cmt-b p { margin: 0; overflow-wrap: anywhere; } .cmt-a { display: flex; gap: 14px; margin-top: 3px; font-size: 12px; color: var(--muted); } .cmt-a .link { font-size: 12px; padding: 0; border: 0; background: none; color: var(--muted); font-weight: 600; } .cmt-like { display: grid; justify-items: center; min-width: 32px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; } .cmt-like[aria-pressed="true"] { color: var(--bad, #e5484d); } .cmt-like b { font-size: 11px; } .cmt-form { display: flex; gap: 8px; width: 100%; } .cmt-form .input { flex: 1; min-width: 0; } .cmt-reply { margin-top: 6px; } .cmt-reply .link { padding: 0; border: 0; background: none; color: var(--accent); font-weight: 600; } .cmt-n { margin-top: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink); font-size: 13px; } /* Risen app: Club | Pro switch in the header (only for people using both modes) */ .mode-sw { display: flex; padding: 3px; border-radius: 999px; background: var(--ground-3); font-weight: 700; font-size: 12px; } .mode-sw > * { padding: 5px 11px; border-radius: 999px; color: var(--muted); text-decoration: none; } .mode-sw [aria-current] { background: var(--accent); color: var(--accent-ink); } /* Club ↔ Pro switch: the splash is only the R, no logo animation */ .sp-r { display: none; width: 64px; height: auto; } .switch .sp-r { display: block; } .switch .sp-logo, .switch .sp-bar { display: none; } .switch .splash.out { animation: none; opacity: 0; transition: opacity .35s ease-out; } @media (prefers-reduced-motion: no-preference) { .switch .sp-r { animation: sp-r-in .45s cubic-bezier(.2, 1.3, .35, 1) both; } } @keyframes sp-r-in { from { transform: scale(.6); opacity: 0; } } /* first screen: pick Club, Pro or both */ .pf-modes { align-content: center; gap: 16px; } .pf-modes-wm { display: flex; justify-content: center; margin: 0; } .pf-modes-wm .wm { font-size: 56px; } .pf-modes-q { margin: 0; text-align: center; font-size: 20px; font-weight: 700; } .pf-modes .cg-opts { margin-top: 4px; } /* profile photo: round crop wherever an initial or the mascot used to be */ .mini.pic img, .avatar.pic img, .dr-m.pic img, .me-pic img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .avatar.pic, .mini.pic { overflow: visible; padding: 0; } .dr-m.pic { border-radius: 50%; overflow: hidden; } .me-pic { width: 104px; height: 104px; border-radius: 50%; box-shadow: 0 0 0 3px var(--accent); } .w-acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } /* profile photo: the photo is the button */ .av-pick { position: relative; display: block; width: max-content; margin: 0 auto; cursor: pointer; border-radius: 50%; } .av-pick:active { transform: scale(.97); } .av-cam { position: absolute; right: -2px; bottom: -2px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 3px var(--ground); } .av-cam svg { width: 18px; height: 18px; } .av-hint { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); text-align: center; } .av-del { display: block; margin: 2px auto 0; background: none; border: 0; color: var(--ink-2); min-height: 40px; font-size: 13px; text-decoration: underline; } .ed-pic { margin-top: 12px; } .ed-h { font-size: 15px; margin: 0 0 12px; } /* Progresso by period */ .prog-card { margin-top: 12px; padding: 18px; } .prog-top { display: flex; justify-content: space-between; align-items: flex-end; } .prog-top small { display: block; color: var(--ink-2); font-size: 13px; font-weight: 600; } .prog-top b { font-size: 34px; line-height: 1.1; } .prog-top b span { font-size: 17px; color: var(--ink-2); } .prog-bars { display: flex; gap: 6px; align-items: flex-end; margin-top: 18px; height: 110px; } .prog-bars > div { flex: 1; display: grid; grid-template-rows: 1fr auto; gap: 4px; height: 100%; min-width: 0; text-align: center; } .prog-bars .pb { display: flex; align-items: flex-end; height: 100%; border-radius: 8px; background: var(--ground-3, var(--ground-2)); overflow: hidden; } .prog-bars .pb i { display: block; width: 100%; border-radius: 8px; background: color-mix(in srgb, var(--accent) 45%, transparent); transition: height .5s cubic-bezier(.2,.8,.2,1); } .prog-bars .pb i.ok { background: var(--accent); } .prog-bars small { font-size: 10px; color: var(--ink-2); white-space: nowrap; overflow: hidden; } .prog-tips { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; } .prog-tips li { padding-left: 14px; position: relative; } .prog-tips li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .av-pick .me-m { width: 104px; height: 104px; border-radius: 50%; background: var(--ground-3, var(--ground-2)); box-shadow: 0 0 0 3px var(--accent); display: grid; place-items: center; overflow: hidden; } .av-pick .me-m svg { width: 86%; height: 86%; margin-top: 10%; } /* computer: Progresso and Treinos also split in two (phones keep one column) */ @media (min-width: 960px) { .cols > .col-b > .sec:first-child, .cols > .col-b > section:first-child { margin-top: 0; } .cols .cal-day.mon { min-height: 64px; } } .mo-cap { margin: 8px 0 -4px; text-align: center; color: var(--ink-2); font-size: 14px; font-weight: 700; }