/* --------------------------------------------------------------------- */ /* Theme tokens. Default (untagged / data-theme="classic") is this app's */ /* original teal look; data-theme="isu" swaps every token below for a */ /* palette/typography match of isu-skating.com's figure skating pages. */ /* Applied by theme.js, which reads the management-chosen theme from */ /* /config/theme and sets data-theme on before first paint. */ /* Semantic/status colors (badges, on-track/needs-focus, progress fill) */ /* are deliberately NOT tokenized - green-means-good should read the */ /* same regardless of which brand skin is active. */ /* --------------------------------------------------------------------- */ :root { --font-body: "Inter", "Segoe UI", Arial, sans-serif; --font-display: "Inter", "Segoe UI", Arial, sans-serif; --heading-weight: 900; --heading-transform: none; --heading-letter-spacing: -0.04em; --btn-letter-spacing: normal; --btn-text-transform: none; --btn-weight: 800; --btn-radius: 999px; --btn-gradient-angle: 135deg; --btn-light-border: none; --color-text: #23313b; --color-text-muted: #667d82; --color-bg: #eef5f8; --login-bg-start: #d7edf2; --login-bg-end: #eef9fa; --color-brand-dark: #15313a; --color-brand-dark-2: #244b56; --color-accent: #69ccd9; --color-accent-2: #7ff1ed; --color-border: #d4edf2; --color-border-soft: #bedade; --card-bg: #ffffff; --input-bg: #faffff; --btn-primary-start: #cceef3; --btn-primary-end: #76b8bd; --btn-primary-text: #15313a; --btn-light-bg: #effaff; --btn-light-text: #15313a; --radius-xl: 28px; --radius-lg: 22px; --radius-md: 15px; --radius-sm: 11px; --hero-gradient-start: #173b41; --hero-gradient-end: #244d5a; } /* ISU Figure Skating look: Montserrat body copy, bold uppercase Jost headlines (Jost is an open, Futura-shaped substitute - isu-skating.com's actual "Futura PT" headline face is a commercial license we don't have), a sky-blue gradient in place of the teal brand color, and a tighter, sportier corner-radius scale. Buttons follow isu-skating.com's own button language exactly, sampled from their live site: a horizontal (90deg) three-stop blue gradient, no letter-spacing, and a distinctive asymmetric "cut corner" radius (rounded on one diagonal, square on the other) instead of a pill - used on both their primary CTAs ("VIEW MORE": border-radius 12px 0) and their outline category tags ("FIGURE SKATING": border-radius 2px 0, 1px solid border, no fill). theme.js injects the Jost/Montserrat Google Fonts link only when this theme is active. */ :root[data-theme="isu"] { --font-body: "Montserrat", "Segoe UI", Arial, sans-serif; --font-display: "Jost", "Century Gothic", "Futura", var(--font-body); --heading-weight: 700; --heading-transform: uppercase; --heading-letter-spacing: 0.01em; --btn-letter-spacing: normal; --btn-text-transform: uppercase; --btn-weight: 700; --btn-radius: 12px 0; --btn-gradient-angle: 90deg; --btn-light-border: 1px solid var(--color-accent); --color-text: #142334; --color-text-muted: #4f7396; --color-bg: #eaf3fb; --login-bg-start: #cfe8fb; --login-bg-end: #eef6fd; --color-brand-dark: #0b2b45; --color-brand-dark-2: #123a5c; --color-accent: #28abe2; --color-accent-2: #96cdeb; --color-border: #bfe0f5; --color-border-soft: #a9d4ee; --card-bg: #ffffff; --input-bg: #f5fbff; --btn-primary-start: #2e9cd7; --btn-primary-end: #7abde1; --btn-primary-text: #ffffff; --btn-light-bg: transparent; --btn-light-text: var(--color-accent); --radius-xl: 20px; --radius-lg: 16px; --radius-md: 12px; --radius-sm: 8px; --hero-gradient-start: #2e9cd7; --hero-gradient-end: #96cdeb; } * { box-sizing: border-box; } body { font-family: var(--font-body); margin: 0; color: var(--color-text); background: var(--color-bg); line-height: 1.55; } body.login-body { background: linear-gradient(135deg, var(--login-bg-start), var(--login-bg-end)); } img { max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-display); text-transform: var(--heading-transform); } .app-header { background: var(--color-brand-dark); color: white; } .nav-wrapper { width: min(1240px, calc(100% - 40px)); margin: auto; display: flex; align-items: center; justify-content: space-between; min-height: 78px; } .brand { display: flex; align-items: center; gap: 12px; } .logo-mark { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--color-accent), var(--color-brand-dark)); border: 1px solid rgba(255,255,255,.45); font-weight: 900; } .brand-title { font-family: var(--font-display); font-size: 24px; font-weight: var(--heading-weight); letter-spacing: var(--heading-letter-spacing); text-transform: var(--heading-transform); } .nav-links { display: flex; align-items: center; gap: 30px; font-size: 14px; color: #d2edf0; } .nav-links a:hover { color: white; } .nav-actions { display: flex; align-items: center; gap: 10px; } .btn { appearance: none; border: 0; border-radius: var(--btn-radius); padding: 11px 24px; font-size: 13px; font-weight: var(--btn-weight); font-family: var(--font-display); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); cursor: pointer; } .btn-primary { background: linear-gradient(var(--btn-gradient-angle), var(--btn-primary-start), var(--btn-primary-end)); color: var(--btn-primary-text); } .btn-secondary { background: transparent; border: 1px solid rgba(255,255,255,.6); color: white; } .btn-dark { background: var(--color-brand-dark); color: white; } .btn-light { background: var(--btn-light-bg); border: var(--btn-light-border); color: var(--btn-light-text); } .hero { background: linear-gradient(135deg, var(--hero-gradient-start), var(--hero-gradient-end)); color: white; } .hero-inner { width: min(1240px, calc(100% - 40px)); margin: auto; padding: 78px 0 88px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 54px; } .hero-copy { max-width: 620px; } .kicker { color: var(--color-accent-2); display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 900; letter-spacing: .16em; } .kicker:before { content: ""; width: 34px; height: 2px; background: var(--color-accent-2); } .hero h1 { font-weight: var(--heading-weight); font-size: clamp(45px, 6vw, 70px); line-height: .94; letter-spacing: var(--heading-letter-spacing); margin: 16px 0 20px; } .hero p { color: #d5eef1; font-size: 18px; max-width: 620px; } .hero-actions { display: flex; gap: 14px; margin-top: 28px; } .hero-panel { background: var(--card-bg); border-radius: var(--radius-lg); padding: 20px; color: #173b41; box-shadow: 0 30px 80px rgba(16, 52, 56, .22); } .hero-panel .panel-head { display: flex; align-items: center; justify-content: space-between; } .hero-panel .panel-title { font-family: var(--font-display); font-weight: var(--heading-weight); text-transform: var(--heading-transform); font-size: 24px; } .hero-panel .panel-subtitle { color: #587c84; font-size: 13px; margin-top: 5px; } .sample-card { background: var(--btn-light-bg); border-radius: var(--radius-md); padding: 16px; margin-top: 14px; border: 1px solid var(--color-border); } .sample-card .row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; margin-top: 8px; } .hero-stat-list { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 12px; margin-top: 15px; } .hero-stat-list .mini-stat { background: var(--hero-gradient-start); color: white; border-radius: var(--radius-sm); padding: 12px; } .hero-stat-list .mini-stat small { display: block; color: #acf6e8; } .section { padding: 54px 0; } .section .container { width: min(1240px, calc(100% - 40px)); margin: auto; } .section-title { display: flex; align-items: end; justify-content: space-between; margin-bottom: 30px; } .section-title h2 { margin: 0; font-weight: var(--heading-weight); font-size: clamp(28px, 4vw, 40px); line-height: 1.05; letter-spacing: var(--heading-letter-spacing); color: var(--color-accent); } .section-title p { margin: 0; color: #587d84; } .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 16px; } .metric-card { background: var(--card-bg); border-radius: var(--radius-lg); padding: 24px; border: 1px solid var(--color-border); } .metric-card.compact { padding: 20px; } .metric-label { color: #779198; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; } .metric-value { margin-top: 14px; font-family: var(--font-display); font-size: 34px; line-height: 1; color: #173b41; font-weight: var(--heading-weight); } .metric-trend { margin-top: 8px; color: #2f9a82; font-size: 13px; font-weight: 800; } .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 20px; } .feature-card { background: var(--card-bg); border-radius: var(--radius-lg); padding: 26px; border: 1px solid var(--color-border); } .feature-card h3 { margin: 10px 0 14px; font-weight: var(--heading-weight); font-size: 23px; line-height: 1.05; } .feature-card p { margin: 0 0 12px; color: #577276; } .icon-wrap { width: 44px; height: 44px; border-radius: var(--radius-sm); background: #d7f0e2; display: grid; place-items: center; font-weight: 900; color: #15313a; } .text-link { color: #245f67; font-size: 13px; font-weight: 800; } .log-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .login-shell { width: min(1040px, calc(100% - 40px)); background: var(--card-bg); display: grid; grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 20px 90px rgba(30, 83, 86, .22); } .login-side { background: linear-gradient(135deg, var(--color-brand-dark), var(--color-brand-dark-2)); color: white; padding: 54px 48px; } .login-side h1 { font-weight: var(--heading-weight); font-size: 40px; line-height: 1.08; letter-spacing: var(--heading-letter-spacing); margin: 20px 0 20px; } .login-side .lead { line-height: 1.8; color: #bce9e7; } .login-form-wrap { padding: 54px 48px; } .login-form-wrap h2 { font-weight: var(--heading-weight); font-size: 34px; margin-bottom: 10px; letter-spacing: var(--heading-letter-spacing); } .form-layout { display: flex; flex-direction: column; gap: 16px; margin-top: 25px; } .form-layout label { display: flex; flex-direction: column; gap: 10px; font-weight: 800; font-size: 13px; color: #536b71; } .form-layout input, .form-layout select, .form-layout textarea { border-radius: var(--radius-sm); border: 1px solid var(--color-border-soft); padding: 13px 14px; font: inherit; background: var(--input-bg); } .form-layout textarea { resize: vertical; } .form-row { display: flex; justify-content: space-between; align-items: center; } .form-row .small-link { font-size: 12px; color: #13434a; font-weight: 900; } .form-layout .btn { width: 100%; } .search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 4px; max-height: 220px; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); box-shadow: 0 8px 20px rgba(19, 67, 74, 0.12); } .search-results button { display: block; width: 100%; text-align: left; padding: 10px 14px; border: none; background: none; font: inherit; color: #13434a; cursor: pointer; } .search-results button:hover { background: #eefbfb; } .search-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: #eefbfb; border: 1px solid var(--color-border-soft); font-size: 12px; font-weight: 700; color: #13434a; } .search-chip button { border: none; background: none; color: #536b71; cursor: pointer; font-weight: 900; line-height: 1; padding: 0; } .dashboard-layout { width: min(1240px, calc(100% - 40px)); margin: auto; padding: 34px 0 60px; display: grid; grid-template-columns: 280px minmax(800px, 1fr); gap: 30px; } .sidebar { background: var(--color-brand-dark); color: white; border-radius: var(--radius-lg); padding: 28px 20px; min-height: 560px; } .sidebar .brand-title { font-size: 28px; } .sidebar nav { margin-top: 40px; } .sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: var(--radius-sm); color: #bce5e9; margin-bottom: 8px; font-size: 13px; } .sidebar nav a.active, .sidebar nav a:hover { background: var(--color-brand-dark-2); color: white; } .main-content { min-width: 0; } .dashboard-topbar { background: var(--card-bg); border-radius: var(--radius-lg); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--color-border); } .page-title h1 { margin: 0; font-weight: var(--heading-weight); font-size: 34px; line-height: 1; letter-spacing: var(--heading-letter-spacing); } .page-title span { color: #697e82; font-size: 12px; font-weight: 700; } .top-actions { display: flex; gap: 12px; } .content-panel { background: var(--card-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; margin-top: 18px; } .panel-title-line { display: flex; justify-content: space-between; align-items: center; } .panel-title-line h2 { margin: 0; font-weight: var(--heading-weight); font-size: 24px; } .panel-subtext { color: #607f83; font-size: 12px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .lesson-card { background: linear-gradient(135deg, #eafaff, #eef6ed); border-radius: var(--radius-lg); border: 1px solid #cce7ec; padding: 24px; } .lesson-card h3 { margin: 0 0 10px; font-weight: var(--heading-weight); } .lesson-details { display: flex; gap: 30px; margin-top: 12px; } .summary-label { display: block; font-size: 11px; font-weight: 900; text-transform: uppercase; color: #6c898d; } .focus-list { padding-left: 20px; color: #58787b; } .focus-list li { margin-bottom: 6px; } .table-wrap table { width: 100%; border-collapse: collapse; } .table-wrap th { text-align: left; padding: 12px 8px; font-size: 11px; text-transform: uppercase; color: #82979b; letter-spacing: .14em; } .table-wrap td { padding: 12px 8px; border-top: 1px solid #d9edf0; font-size: 13px; } .athlete-name { font-weight: 900; } .status { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; } .status-active, .status-on-track { background: #d3f1dd; color: #23613f; } .status-needs-focus { background: #ffe8cf; color: #956210; } .status-not-started { background: #dcecf1; color: #577a82; } .status-in-progress { background: #d4edf0; color: #305769; } .status-high { background: #ffd2d2; color: #a84444; } .status-normal { background: #e6f1e4; color: #2e7246; } .progress-bar { height: 8px; border-radius: 99px; background: #dcecef; overflow: hidden; width: 100%; } .progress-bar > div { height: 100%; background: linear-gradient(135deg, #55bd9c, #204a55); } .mini-progress { display: flex; align-items: center; gap: 10px; } .mini-progress .progress-bar { width: 120px; } .schedule-row { display: flex; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid #dbecef; } .schedule-row:last-child { border-bottom: none; } .schedule-time { font-weight: 900; color: #184b56; } .schedule-title { font-weight: 800; } .subtle-text { color: #667d82; font-size: 13px; } .rink-tag { margin-left: auto; color: #266878; background: #d6eef2; border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 900; } .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 900; } .badge-info { background: #d1edf3; color: #155a61; } .badge-alert { background: #ffe1d8; color: #a44a2b; } .two-column-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .list-stack { display: flex; flex-direction: column; gap: 14px; } .notice-card { border-radius: var(--radius-md); border: 1px solid var(--color-border); background: #fafffb; padding: 16px; } .notice-card small { display: block; color: #7c8a8f; margin-top: 4px; } .billing-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #dcecef; } .billing-row:last-child { border-bottom: none; } .login-page-link { color: white; } .pb-shell { width: min(1240px, calc(100% - 40px)); margin: 34px auto 60px; } .pb-toolbar { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; padding: 14px; background: #f2f9fb; border: 1px solid var(--color-border); border-radius: var(--radius-md); } .pb-tool-group { display: flex; align-items: center; gap: 8px; } .pb-tool { appearance: none; border: 1px solid var(--color-border-soft); background: var(--card-bg); color: var(--color-text); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; } .pb-tool.active { background: var(--color-brand-dark); color: white; border-color: var(--color-brand-dark); } .pb-inline-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #536b71; } .pb-editor-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; } .pb-canvas-wrap svg { width: 100%; height: auto; aspect-ratio: 2 / 1; display: block; background: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); touch-action: none; cursor: crosshair; } .pb-side textarea { width: 100%; min-height: 220px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-soft); padding: 12px; font: 12px/1.5 "SFMono-Regular", Consolas, monospace; background: var(--input-bg); resize: vertical; } .pb-modal-backdrop { position: fixed; inset: 0; background: rgba(21, 49, 58, .45); z-index: 100; display: flex; align-items: center; justify-content: center; } .pb-modal { background: var(--card-bg); border-radius: var(--radius-lg); padding: 24px; width: min(420px, calc(100% - 40px)); box-shadow: 0 20px 60px rgba(16, 52, 56, .3); } .pb-modal input[type="text"], .pb-modal input[type="number"] { border-radius: var(--radius-sm); border: 1px solid var(--color-border-soft); padding: 10px 12px; font: inherit; background: var(--input-bg); width: 100%; } .pb-edge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; } .pb-edge-btn { appearance: none; border: 1px solid var(--color-border-soft); background: #f2f9fb; color: var(--color-brand-dark); border-radius: var(--radius-sm); padding: 10px 4px; font-size: 13px; font-weight: 800; cursor: pointer; } .pb-edge-btn.active { background: var(--color-brand-dark); color: white; border-color: var(--color-brand-dark); } /* Management Console: theme picker + coaching-style library cards. Kept generic (not scoped to one panel) since both reuse the same "pick one of a few options" and "small tag chip" shapes. */ .style-option { border: 2px solid var(--color-border); border-radius: var(--radius-md); padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; background: var(--card-bg); } .style-option.selected { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent) inset; } .style-option-swatch { height: 54px; border-radius: var(--radius-sm); } .tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--color-border-soft); background: var(--btn-light-bg); font-size: 12px; font-weight: 800; color: var(--btn-light-text); } .tag-chip.toggle { appearance: none; cursor: pointer; font-family: inherit; } .tag-chip.toggle.selected { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: white; } /* Clickable drill-video / pose-overlay thumbnail - opens the desktop lightbox or hands off to native mobile fullscreen, see openVideoViewer in app.js. Native controls are intentionally left off the thumbnail so a click always expands instead of just toggling play in place. */ .video-thumb { position: relative; cursor: pointer; border-radius: 8px; overflow: hidden; background: #000; } .video-thumb video { width: 100%; display: block; border-radius: 8px; pointer-events: none; } .video-thumb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 13px; pointer-events: none; } .video-thumb-label { position: absolute; bottom: 6px; left: 6px; padding: 2px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; pointer-events: none; } /* Desktop "watch" layer: an enlarged in-page lightbox (mobile instead gets the browser's native fullscreen video player - see openVideoViewer in app.js, small inline players aren't usable for judging technique). */ #videoLightboxOverlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; } #videoLightboxOverlay.is-open { display: flex; } .video-lightbox-backdrop { position: absolute; inset: 0; background: rgba(10, 20, 24, 0.88); } .video-lightbox-content { position: relative; z-index: 1; width: min(90vw, 1100px); max-height: 90vh; overflow-y: auto; } /* width:auto with a height cap, not width:100%. Drill videos are shot on a phone and are usually portrait, so the binding constraint is height, not width. Forcing width:100% stretched the element across the box and the video letterboxed inside it - so making the box wider added black bars and nothing else. Sizing by height lets a portrait clip use the full height available and a landscape one still fill the width. --video-zoom is the Zoom -/+ factor, 1 by default. It multiplies the height cap rather than applying a transform: a transform does not affect layout, so the enlarged video would be clipped by the container instead of making it scrollable. */ .video-lightbox-player { width: auto; max-width: 100%; max-height: calc(var(--video-zoom, 1) * 80vh); margin: 0 auto; display: block; border-radius: 8px; background: #000; } .video-lightbox-zoom { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; } .video-lightbox-zoom:hover { background: rgba(255, 255, 255, 0.22); } .video-lightbox-zoom-value { color: #fff; font-size: 13px; min-width: 46px; display: inline-block; text-align: center; } .video-lightbox-close { position: absolute; top: -44px; right: 0; background: none; border: none; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; padding: 4px 8px; } /* Slow-motion speed slider + single-frame step buttons, sitting under the lightbox player - native video controls offer neither, and a coach reviewing technique needs both. */ .video-lightbox-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 10px; color: #fff; font-size: 13px; } .video-lightbox-step { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; } .video-lightbox-step:hover { background: rgba(255, 255, 255, 0.22); } .video-lightbox-speed { display: flex; align-items: center; gap: 8px; margin-left: auto; } .video-lightbox-speed-value { min-width: 34px; display: inline-block; } .video-lightbox-speed-input { width: 140px; } .video-lightbox-annotate-btn { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; } .video-lightbox-annotate-btn:hover { background: rgba(255, 255, 255, 0.22); } /* Small square thumbnails for a video's saved annotated frames, sitting to the right of the main video thumbnail in the drill-video list. */ .frame-thumb-strip { display: flex; flex-wrap: wrap; gap: 6px; width: 116px; flex-shrink: 0; align-content: flex-start; } .frame-thumb-cell { width: 55px; } .frame-thumb { /* The anchor for .frame-thumb-ink below, which is position: absolute. Without a positioned ancestor that overlay resolves against the initial containing block - the whole page - so a saved annotation rendered its strokes across the entire dashboard at full scale, on top of everything, and swallowed every click that landed on a stroke. overflow: hidden did not clip it, because the SVG was never inside this box to begin with. */ position: relative; width: 38px; height: 38px; border-radius: 6px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: #000; } .frame-thumb:hover { border-color: var(--color-accent, #69ccd9); } /* contain, not cover. cover crops to fill the square, and the annotation overlay laid on top is not cropped with it - the strokes would sit off the part of the frame they were drawn on. Letterboxing the thumbnail is the price of the overlay lining up. */ .frame-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Sits exactly on the image. The viewBox carries the drawing's own coordinate space, so the SVG scales itself to this box no matter what resolution the frame was captured at. */ .frame-thumb-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .frame-thumb-date { font-size: 9px; line-height: 1.2; margin-top: 2px; text-align: center; } /* Freeform frame-annotation editor, shown inside the video lightbox in place of the player once "Annotate this frame" is clicked (or opened directly from a .frame-thumb to view/edit an existing one). */ .frame-annotate-panel { color: #fff; } .frame-annotate-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .frame-annotate-tool { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; } .frame-annotate-tool.active { background: var(--color-accent, #69ccd9); color: #15313a; border-color: var(--color-accent, #69ccd9); } .frame-annotate-inline-label { display: flex; align-items: center; gap: 6px; font-size: 13px; } .frame-annotate-canvas-wrap { position: relative; /* Shrink-wraps to the image's own rendered box (see .frame-annotate-bg below) instead of always spanning the full width - a portrait/tall frame used to render taller than max-height and get silently clipped by overflow:hidden with no way to scroll down to the cropped part. */ width: fit-content; max-width: 100%; max-height: 70vh; margin: 0 auto; background: #000; border-radius: 8px; overflow: hidden; line-height: 0; } .frame-annotate-bg { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; } .frame-annotate-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; } .frame-annotate-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .frame-annotate-footer .frame-annotate-name { flex: 1; min-width: 160px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: #fff; padding: 8px 10px; font: inherit; } .frame-annotate-status { margin-top: 8px; color: #cfe9ee; } @media (max-width: 900px) { .hero-inner, .login-shell, .dashboard-layout, .grid-2, .two-column-lists, .feature-grid, .stats-grid, .pb-editor-grid { grid-template-columns: 1fr; } .dashboard-layout { padding-top: 12px; } .sidebar { min-height: auto; } .nav-wrapper { align-items: flex-start; flex-direction: column; padding: 16px 0; } .nav-links { flex-wrap: wrap; } }