/* =========================================================================== sinalib · Contribua — single stylesheet for the contribution app. Dark theme built from the sinalib brand book (sinalib-landing/aesthetic.html): azul-escuro surfaces, verde accent, Plus Jakarta Sans, pill buttons, soft blurred brand blobs. One file styles the shell + every view (home, category, detail, recorder). =========================================================================== */ /* ── tokens ── */ :root { --azul: #1A3A8F; --azul-esc: #0D2260; --navy: #091A4B; /* page base, one step below azul-esc */ --surface: rgba(255,255,255,.05); --surface-2: rgba(255,255,255,.09); --border: rgba(255,255,255,.11); --border-2: rgba(255,255,255,.22); --accent: #2DBD7E; --accent-strong: #1C9C63; --accent-mint: #6FE2B0; --accent-rgb: 45, 189, 126; --accent-soft: rgba(45,189,126,.14); --accent-bd: rgba(45,189,126,.42); --lilas: #B48FE8; --text: #EAF0FF; --muted: #9DB0D8; --faint: #6C7DA8; --ink: #06214d; --danger: #FF7A7A; --warn: #F2C14E; --rec: #E74C3C; --shadow-sm: 0 4px 16px rgba(3, 10, 34, .25); --shadow-md: 0 12px 32px rgba(3, 10, 34, .35); --shadow-lg: 0 24px 60px rgba(3, 10, 34, .45); --radius: 20px; --maxw: 76rem; } /* ── reset & base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* gradient lives on so it always spans the full document height. The root font size is fluid: 16px up to ~1290px viewports, then grows toward 21px on wide monitors — every rem-based size scales with it, so the app reads comfortably at 100% zoom on large screens. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; min-height: 100%; font-size: clamp(16px, 0.42vw + 10.6px, 21px); background: linear-gradient(180deg, var(--navy) 0%, var(--azul-esc) 100%); } body { font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif; background: transparent; color: var(--text); line-height: 1.6; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.4rem; } /* decorative brand blobs (fixed, behind everything) */ .bg-blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .blob { position: absolute; border-radius: 50%; filter: blur(110px); } .blob.b1 { width: 640px; height: 640px; background: #2D5BE8; top: -260px; right: -180px; opacity: .30; } .blob.b2 { width: 520px; height: 520px; background: rgba(var(--accent-rgb), .22); bottom: -220px; left: -160px; } .blob.b3 { width: 360px; height: 360px; background: rgba(180,143,232,.18); top: 46%; left: 42%; } .site-header, main, .site-footer, .status { position: relative; z-index: 1; } /* ── header (full-bleed, sticky) ── */ .site-header { position: sticky; top: 0; z-index: 60; width: 100%; background: rgba(9, 24, 74, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; gap: 1.2rem; min-height: 4.25rem; flex-wrap: wrap; padding-top: .5rem; padding-bottom: .5rem; } .brand { display: flex; align-items: center; gap: .7rem; } .brand img { height: 1.9rem; width: auto; } .brand-sub { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-mint); border: 1px solid var(--accent-bd); background: var(--accent-soft); padding: .18rem .6rem; border-radius: 100px; } .header-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; } .auth-slot { min-height: 40px; display: flex; align-items: center; } .auth-note { font-size: .78rem; color: var(--muted); max-width: 240px; line-height: 1.4; } .user-chip { display: inline-flex; align-items: center; gap: .55rem; background: var(--surface); border: 1px solid var(--border); border-radius: 100px; padding: .25rem .6rem .25rem .3rem; } .user-chip img, .user-chip .uc-ph { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .user-chip .uc-ph { display: grid; place-items: center; background: var(--accent); color: var(--ink); font-weight: 800; font-size: .9rem; } .uc-name { font-size: .86rem; font-weight: 700; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uc-level { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 100px; padding: .12rem .5rem; } .uc-out { color: var(--faint); font-size: .76rem; font-weight: 700; padding: .2rem .3rem; } .uc-out:hover { color: var(--danger); } /* ── buttons & pills ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.4rem; border-radius: 100px; font-size: .92rem; font-weight: 700; line-height: 1; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); transition: transform .18s ease, box-shadow .25s ease, background .2s, border-color .2s; white-space: nowrap; } .btn:hover { background: rgba(255,255,255,.14); border-color: var(--border-2); transform: translateY(-1px); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn-accent { background: var(--accent); color: var(--ink); border-color: transparent; box-shadow: 0 8px 22px rgba(var(--accent-rgb), .30); } .btn-accent:hover { background: var(--accent-strong); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--accent-rgb), .38); } .btn.ghost { background: transparent; color: var(--accent-mint); } .btn.ghost:hover { background: var(--accent-soft); border-color: var(--accent-bd); } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .22em; color: var(--accent); } /* ── generic cards & sections ── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; } .card-title { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .7rem; } .sec-title { display: flex; align-items: baseline; gap: .6rem; font-size: 1.1rem; font-weight: 800; margin: 2.2rem .1rem 1rem; } .sec-title .sec-sub { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--faint); } .muted { color: var(--faint); font-size: .85rem; } .view-error { padding: 3rem 1rem; text-align: center; color: var(--muted); font-weight: 600; } .crumb { margin: 1.2rem 0 1rem; } .crumb a { color: var(--accent-mint); font-weight: 700; font-size: .9rem; } .crumb a:hover { text-decoration: underline; } /* ── inputs / selects / segmented / switch ── */ .input, .select { width: 100%; background: rgba(6, 18, 52, .5); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: .55rem .7rem; font: inherit; font-size: .92rem; outline: none; } .input:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); } .input.small { width: 76px; padding: .45rem .5rem; } .input::placeholder { color: var(--faint); } .select { cursor: pointer; } .select option { color: var(--ink); } .mini { display: flex; flex-direction: column; gap: .3rem; font-size: .66rem; font-weight: 800; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; } .seg { display: flex; gap: .25rem; background: rgba(6, 18, 52, .5); padding: .25rem; border-radius: 12px; border: 1px solid var(--border); } .seg-btn { flex: 1; color: var(--muted); font-weight: 700; font-size: .88rem; padding: .5rem .4rem; border-radius: 9px; transition: background .15s, color .15s; } .seg-btn:hover { color: var(--text); } .seg-btn.active { background: var(--accent); color: var(--ink); } .switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; } .switch input { display: none; } .switch .slider { width: 40px; height: 22px; border-radius: 100px; background: rgba(6, 18, 52, .5); border: 1px solid var(--border); position: relative; transition: background .15s; flex-shrink: 0; } .switch .slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; } .switch input:checked + .slider { background: var(--accent); border-color: var(--accent); } .switch input:checked + .slider::after { transform: translateX(18px); background: #fff; } .switch-text { font-size: .86rem; font-weight: 700; } .row { display: flex; gap: .7rem; align-items: center; margin-top: .6rem; flex-wrap: wrap; } /* ── home: hero ── */ .hero { padding: 2.8rem 0 .6rem; } .hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; max-width: 720px; } .hero h1 .hl { color: var(--accent-mint); } .hero p { margin-top: .8rem; max-width: 640px; color: var(--muted); line-height: 1.7; font-size: 1.02rem; } .hero-you { margin-top: 1.2rem; display: inline-flex; align-items: center; gap: .5rem; background: var(--accent-soft); border: 1px solid var(--accent-bd); color: var(--accent-mint); font-weight: 700; padding: .5rem 1rem; border-radius: 100px; font-size: .9rem; } .hero-you.dim { background: var(--surface); border-color: var(--border); color: var(--muted); } /* ── home: leaderboard ── */ .board-list { display: flex; flex-direction: column; gap: .55rem; } .board-row { display: grid; grid-template-columns: 34px 42px minmax(0,1.3fr) minmax(0,1.6fr) auto; align-items: center; gap: .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: .65rem 1rem; transition: border-color .15s, background .15s; } .board-row.me { border-color: var(--accent-bd); background: var(--accent-soft); } .board-row .rank { font-size: 1.25rem; text-align: center; } .board-row .rank-n { font-size: .95rem; font-weight: 800; color: var(--faint); } .board-row .avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; } .board-row .avatar.ph { display: grid; place-items: center; background: var(--azul); color: #fff; font-weight: 800; } .who { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .who-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .who-name em { color: var(--accent-mint); font-style: normal; } .lvl-badge { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); } .cov { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .cov-bar { height: 7px; border-radius: 100px; background: rgba(6, 18, 52, .6); overflow: hidden; } .cov-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-strong), var(--accent)); border-radius: 100px; } .cov-num { font-size: .72rem; color: var(--muted); font-weight: 600; } .vids { text-align: right; font-weight: 800; font-size: 1.1rem; } .vids small { display: block; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); } .board-empty { background: var(--surface); border: 1px dashed var(--border-2); border-radius: 16px; padding: 1.8rem 1rem; text-align: center; color: var(--muted); font-weight: 600; } /* ── home: category grid ── */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; } .cat-card { display: flex; flex-direction: column; gap: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; transition: transform .18s ease, box-shadow .22s ease, border-color .18s, background .18s; } .cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent-bd); background: var(--surface-2); } .cc-top { display: flex; align-items: center; } .cc-emoji { font-size: 1.8rem; } .cc-chev { margin-left: auto; color: var(--faint); font-size: 1.3rem; transition: transform .18s, color .18s; } .cat-card:hover .cc-chev { transform: translateX(3px); color: var(--accent-mint); } .cc-title { font-weight: 800; font-size: 1.02rem; } .cc-count { font-size: .8rem; color: var(--muted); font-weight: 600; } .cc-count b { color: var(--accent-mint); } .cc-bar { height: 6px; border-radius: 100px; background: rgba(6, 18, 52, .6); overflow: hidden; } .cc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-strong), var(--accent)); } /* ── category: hero + sign grid ── */ .cat-hero { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1.1rem; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.4rem; } .ch-emoji { grid-row: span 2; font-size: 2.5rem; } .cat-hero h1 { font-size: 1.45rem; font-weight: 800; } .ch-sub { color: var(--muted); font-size: .86rem; font-weight: 600; } .ch-bar { grid-column: 1 / -1; height: 7px; border-radius: 100px; background: rgba(6, 18, 52, .6); overflow: hidden; margin-top: .4rem; } .ch-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-strong), var(--accent)); } .sign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .8rem; margin-top: 1.2rem; } .sign-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1rem .7rem .85rem; transition: transform .15s ease, box-shadow .2s ease, border-color .15s, background .15s; } .sign-cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-bd); } .sc-thumb { font-size: 2rem; line-height: 1.2; } /* alphabet cells show only the letter — bigger and bold, no term/scope rows */ .sc-thumb.sc-letter { font-size: 2.4rem; font-weight: 800; } .sc-term { font-weight: 700; text-align: center; font-size: .95rem; } .scope-mini { display: flex; gap: .3rem; font-size: .8rem; opacity: .85; } .sc-meta { width: 100%; display: flex; flex-direction: column; gap: .3rem; margin-top: .2rem; } .sc-bar { height: 5px; border-radius: 100px; background: rgba(6, 18, 52, .6); overflow: hidden; } .sc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-strong), var(--accent)); border-radius: 100px; } .sc-count { font-size: .72rem; font-weight: 700; color: var(--muted); text-align: center; } .sc-check { position: absolute; top: .55rem; right: .55rem; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-size: .8rem; font-weight: 800; } /* meta reached — unmistakably green */ .sign-cell.done { background: linear-gradient(160deg, rgba(45,189,126,.28) 0%, rgba(28,156,99,.16) 100%); border-color: var(--accent-bd); } .sign-cell.done .sc-count { color: var(--accent-mint); } .sign-cell.done .sc-bar i { background: var(--accent); } /* ── detail ── */ .detail { max-width: 760px; } .ref-stage { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius); overflow: hidden; background: linear-gradient(150deg, rgba(45,91,232,.25) 0%, rgba(45,189,126,.16) 100%); border: 1px solid var(--border); margin-bottom: 1.2rem; } .ref-media { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; } .ref-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; } .ref-play { width: 62px; height: 62px; border-radius: 50%; background: var(--accent); box-shadow: var(--shadow-md); display: grid; place-items: center; color: var(--ink); font-size: 1.4rem; padding-left: 4px; } .ref-soon { font-size: .84rem; font-weight: 700; color: var(--text); background: rgba(9,24,74,.6); border: 1px solid var(--border); padding: .35rem .9rem; border-radius: 100px; } .detail-cat { display: inline-block; font-size: .74rem; font-weight: 800; color: var(--accent-mint); background: var(--accent-soft); border: 1px solid var(--accent-bd); padding: .28rem .75rem; border-radius: 100px; } .detail-term { margin: .7rem 0 .4rem; font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; } .detail-desc { color: var(--muted); line-height: 1.7; } .detail-progress { margin-top: 1rem; display: inline-flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-weight: 700; font-size: .86rem; padding: .45rem .9rem; border-radius: 100px; } .detail-progress.done { background: var(--accent-soft); border-color: var(--accent-bd); color: var(--accent-mint); } .scope-card { margin-top: 1.3rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; } .scope-title { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); } .scope-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0; } .scope-chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 100px; padding: .4rem .85rem; font-weight: 700; font-size: .86rem; } .scope-note { font-size: .84rem; color: var(--muted); line-height: 1.6; } .steps-card { margin-top: 1.3rem; } .steps-card h2 { font-size: 1.05rem; font-weight: 800; margin-bottom: .8rem; } .steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: .65rem; } .steps li { counter-increment: step; position: relative; padding-left: 2.5rem; line-height: 1.55; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-bd); color: var(--accent-mint); font-weight: 800; display: grid; place-items: center; font-size: .82rem; } .review-flag { margin-top: 1.3rem; background: rgba(242,193,78,.12); border: 1px solid rgba(242,193,78,.4); color: #F2D695; border-radius: 12px; padding: .7rem 1rem; font-size: .84rem; font-weight: 600; } .detail-cta { margin: 1.8rem 0 1rem; } /* ── recorder ── */ .rec-scope { display: flex; align-items: center; gap: .7rem 1rem; flex-wrap: wrap; padding: .1rem 0 1rem; } .rs-term { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; } .rs-parts { display: flex; flex-wrap: wrap; gap: .4rem; } .rs-parts span { background: var(--surface); border: 1px solid var(--border); border-radius: 100px; padding: .3rem .8rem; font-size: .8rem; font-weight: 700; } .rec-main { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.1rem; align-items: start; } .stage { display: flex; flex-direction: column; min-width: 0; } /* explicit height (not flex-derived) so the JS fit never collapses to 0 */ .preview-area { height: min(64vh, 40rem); width: 100%; display: grid; place-items: center; } .preview-wrap { position: relative; max-width: 100%; max-height: 100%; background: #050f2b; border-radius: 18px; border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow-lg); } .cam-video, .overlay { position: absolute; inset: 0; width: 100%; height: 100%; } .cam-video { object-fit: cover; display: block; } .preview-wrap.mirror .cam-video, .preview-wrap.mirror .overlay { transform: scaleX(-1); } .cam-ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; color: var(--muted); font-size: 1.02rem; font-weight: 600; text-align: center; } .countdown { position: absolute; inset: 0; display: none; place-items: center; font-size: 7rem; font-weight: 800; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.6); } .countdown.show { display: grid; } .rec-badge { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: .4rem; background: rgba(231,76,60,.92); color: #fff; font-weight: 800; font-size: .85rem; padding: .3rem .75rem; border-radius: 100px; } .rec-badge[hidden] { display: none; } /* framing chips under the preview */ .chips { display: flex; align-items: center; gap: .5rem; padding: .8rem 0 .1rem; flex-wrap: wrap; } .chips-label { font-size: .66rem; font-weight: 800; letter-spacing: .16em; color: var(--faint); } .chip { padding: .34rem .85rem; border-radius: 100px; font-size: .8rem; font-weight: 700; background: var(--surface-2); color: var(--faint); border: 1px solid transparent; transition: background .15s, color .15s; } .chip.on { background: var(--accent); color: var(--ink); } .chip.warn { background: var(--warn); color: var(--ink); } .chip.off { background: var(--surface-2); color: var(--faint); } .chip.muted { opacity: .55; } /* right panel */ .panel { display: flex; flex-direction: column; gap: .8rem; min-width: 0; } .take-meter { display: flex; align-items: center; gap: .35rem; margin: .2rem 0 .5rem; flex-wrap: wrap; } .take-dot { width: 16px; height: 16px; border-radius: 50%; background: rgba(6, 18, 52, .6); border: 1px solid var(--border); } .take-dot.filled { background: var(--accent); border-color: var(--accent); } .take-dot.extra { background: var(--accent-mint); border-color: var(--accent-mint); } .take-label { font-size: .88rem; font-weight: 700; color: var(--muted); } .take-label b { color: var(--accent-mint); } .goal-done { display: inline-flex; align-items: center; gap: .45rem; margin-top: .2rem; background: var(--accent-soft); border: 1px solid var(--accent-bd); color: var(--accent-mint); font-size: .8rem; font-weight: 700; padding: .35rem .8rem; border-radius: 100px; } .btn.record { width: 100%; margin-top: .8rem; padding: .95rem; font-size: 1.08rem; font-weight: 800; border-radius: 14px; background: var(--accent); color: var(--ink); border: none; box-shadow: 0 8px 22px rgba(var(--accent-rgb), .30); } .btn.record:hover { background: var(--accent-strong); color: #fff; transform: translateY(-1px); } .btn.record.recording { background: var(--rec); color: #fff; box-shadow: 0 8px 22px rgba(231,76,60,.35); } .save-line { font-size: .8rem; color: var(--muted); line-height: 1.5; } .save-line .ok { color: var(--accent-mint); font-weight: 700; } #authHint { font-size: .8rem; color: var(--warn); line-height: 1.5; margin-top: .4rem; } #authHint:empty { display: none; } /* advanced settings, tucked away */ .advanced { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .advanced > summary { list-style: none; cursor: pointer; padding: .9rem 1.2rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; } .advanced > summary::-webkit-details-marker { display: none; } .advanced > summary::after { content: "▾"; margin-left: auto; transition: transform .2s; } .advanced[open] > summary::after { transform: rotate(180deg); } .advanced-body { padding: 0 1.2rem 1.1rem; display: flex; flex-direction: column; gap: .9rem; } .adv-group { display: flex; flex-direction: column; gap: .45rem; } .adv-group > .adv-lbl { font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } /* recent takes */ .takes { display: flex; flex-direction: column; gap: .3rem; max-height: 160px; overflow-y: auto; scrollbar-width: thin; } .take-row { display: flex; align-items: center; gap: .5rem; font-size: .84rem; } .take-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .take-row .tk-ok { color: var(--accent-mint); font-weight: 800; } .take-row .tk-del { background: none; border: none; cursor: pointer; color: var(--ink-dim, #8b93a7); font-size: .9rem; line-height: 1; padding: .15rem .3rem; } .take-row .tk-del:hover { color: #e05555; } .my-takes { margin-top: .7rem; } .my-takes summary { cursor: pointer; font-size: .82rem; color: var(--ink-dim, #8b93a7); } .my-takes .takes { margin-top: .5rem; max-height: 180px; overflow-y: auto; } /* ── login modal (demo sign-in) ── */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(4, 10, 32, .66); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 1rem; } .modal { width: min(26rem, 100%); background: linear-gradient(170deg, #13286B 0%, #0D2260 100%); border: 1px solid var(--border-2); border-radius: 22px; padding: 1.8rem; box-shadow: var(--shadow-lg); } .modal h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: .4rem; } .modal p { font-size: .88rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.1rem; } .modal .field { margin-bottom: .9rem; } .modal .field-lbl { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; } .modal .row-btns { display: flex; gap: .7rem; margin-top: 1.2rem; } .modal .row-btns .btn { flex: 1; } .modal .auth-err { color: var(--danger); font-size: .84rem; font-weight: 600; min-height: 1.2em; margin-top: .5rem; } .modal .auth-alt { margin-top: 1rem; text-align: center; font-size: .86rem; color: var(--muted); } .modal .auth-alt a { color: var(--accent-mint); font-weight: 700; cursor: pointer; } .modal .auth-alt a:hover { text-decoration: underline; } /* gated recorder — shown in place of the capture screen when signed out */ .lock-card { max-width: 30rem; margin: 3.5rem auto; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.6rem 2rem; } .lock-card .lk-emoji { font-size: 2.6rem; } .lock-card h2 { font-size: 1.3rem; font-weight: 800; margin: .6rem 0 .4rem; } .lock-card p { color: var(--muted); font-size: .92rem; line-height: 1.65; } .lock-card .btn { margin-top: 1.3rem; } /* ── status toast ── */ .status { position: fixed; left: 50%; bottom: 1.1rem; transform: translateX(-50%); z-index: 90; max-width: min(92vw, 640px); background: rgba(9, 24, 74, .92); border: 1px solid var(--border-2); color: var(--text); font-size: .84rem; font-weight: 600; padding: .55rem 1.1rem; border-radius: 100px; box-shadow: var(--shadow-md); text-align: center; } .status:empty { display: none; } .status.error { border-color: rgba(255,122,122,.55); color: var(--danger); } /* ── footer ── */ .site-footer { margin-top: 4rem; border-top: 1px solid var(--border); padding: 1.6rem 0 2rem; } .site-footer .foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .site-footer img { height: 22px; opacity: .8; } .site-footer p { font-size: .78rem; color: var(--faint); } .site-footer .foot-right { margin-left: auto; font-size: .78rem; color: var(--faint); } /* ── responsive ── */ @media (max-width: 980px) { .rec-main { grid-template-columns: 1fr; } .preview-area { height: min(52vh, 460px); } .board-row { grid-template-columns: 28px 36px minmax(0,1fr) auto; } .board-row .cov { display: none; } } @media (max-width: 640px) { .container { padding: 0 1rem; } .nav { gap: .7rem; } .brand img { height: 24px; } .brand-sub { display: none; } .hero { padding-top: 1.6rem; } .preview-area { height: 46vh; } .rs-term { font-size: 1.15rem; } .cat-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .7rem; } .sign-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .6rem; } .vids { display: none; } .modal { padding: 1.3rem; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } } /* ---- "Seus sinais" — the server-assigned recording batch on home ---- */ .missions { margin-top: 1.6rem; } .mission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; } .mission { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: .6rem; row-gap: .45rem; padding: .7rem .85rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; } .mission:hover { border-color: var(--accent); transform: translateY(-1px); } .mission .mi-emoji { font-size: 1.25rem; } .mission .mi-label { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mission .mi-count { font-size: .78rem; font-weight: 700; color: var(--faint); } .mission .mi-bar { grid-column: 1 / -1; } .sign-cell { position: relative; } .sign-cell .sc-assigned { position: absolute; top: .45rem; right: .5rem; font-size: .85rem; } /* ---- "Minhas gravações" — per-clip review + delete ---- */ .recordings h1 { margin-bottom: .3rem; } .rec-group { margin-top: 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .8rem .95rem; } .rec-head { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .5rem; } .rec-head .rg-label { font-weight: 800; } .rec-head .rg-count { font-size: .8rem; color: var(--faint); } .rec-head .rg-more { margin-left: auto; font-size: .8rem; text-decoration: none; } .rec-row { display: flex; align-items: center; gap: .5rem; } .rec-row .name { flex: 1; } .rec-play { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; padding: .15rem .55rem; color: inherit; } .rec-play:hover { border-color: var(--accent); } .rec-badge { margin-left: .45rem; font-size: .72rem; color: var(--faint); border: 1px dashed var(--border); border-radius: 100px; padding: .05rem .5rem; } .rec-player { margin: .4rem 0 .7rem; } .rec-player video { width: 100%; max-height: 320px; border-radius: 10px; background: #000; } .nav-link { text-decoration: none; font-size: .85rem; font-weight: 700; margin-right: .7rem; color: inherit; opacity: .9; } .nav-link:hover { opacity: 1; text-decoration: underline; } .rec-star { cursor: help; font-size: .95rem; padding: .15rem .3rem; }