/* Ringmarrow identity. The corner between rounds and the round clock. Loaded after styles.css and refinement.css so the boxing tokens below are the ones that actually ship. Self-hosted OFL faces; nothing is fetched from a font service at runtime. */ @font-face { font-family: "Barlow Condensed"; src: url("./assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Tight"; src: url("./assets/fonts/inter-tight-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Tight"; src: url("./assets/fonts/inter-tight-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Two schemes, one token block. The light value is written first as the fallback; light-dark() then picks a side from the document's colour scheme: the system preference by default, or the visitor's own choice, which app.mjs and a hashed one-line script on every page put on as data-scheme. The corner stays a dark card in both schemes; in the dark scheme the ground goes to ink and the card keeps a bone hairline. */ html { color-scheme: light dark; } html[data-scheme="light"] { color-scheme: light; } html[data-scheme="dark"] { color-scheme: dark; } body[data-theme="boxing"] { --bg: #f4f2ec; --bg: light-dark(#f4f2ec, #121110); --paper: #fbfaf6; --paper: light-dark(#fbfaf6, #1c1a18); --ink: #121110; --ink: light-dark(#121110, #f4f2ec); --muted: #55524c; --muted: light-dark(#55524c, #b2aea5); --line: #d8d5cc; --line: light-dark(#d8d5cc, #3a3834); --accent: #121110; --accent: light-dark(#121110, #f4f2ec); --accent-ink: #fbfaf6; --accent-ink: light-dark(#fbfaf6, #121110); --danger: #a82424; --danger: light-dark(#a82424, #ff8f80); --radius: 0px; --heading: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; /* The bell. One colour, two jobs: the round marker and the live control. */ --bell: #d6f24a; --bell-ink: #121110; --corner: #121110; --corner: light-dark(#121110, #0a0a09); --corner-ink: #f4f2ec; --corner-muted: #9d9a92; --corner-muted: light-dark(#9d9a92, #aca89f); --corner-line: #34322e; --corner-line: light-dark(#34322e, #3a3834); font-family: "Inter Tight", system-ui, Arial, sans-serif; } body[data-theme="boxing"] h1, body[data-theme="boxing"] h2, body[data-theme="boxing"] h3 { font-family: var(--heading); text-transform: uppercase; letter-spacing: 0.005em; font-weight: 700; line-height: 0.94; } body[data-theme="boxing"] .brand { font-family: var(--heading); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } body[data-theme="boxing"] h1 { font-size: clamp(40px, 6vw, 82px); } .corner-card h1 { font-size: clamp(34px, 4vw, 56px); margin: 0; } body[data-theme="boxing"] h2 { font-size: clamp(26px, 3.2vw, 40px); } /* Focus stays visible on both grounds. */ body[data-theme="boxing"] button:focus-visible, body[data-theme="boxing"] a:focus-visible, body[data-theme="boxing"] input:focus-visible, body[data-theme="boxing"] select:focus-visible, body[data-theme="boxing"] textarea:focus-visible, body[data-theme="boxing"] summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } body[data-theme="boxing"] .on-corner :focus-visible, body[data-theme="boxing"] .corner-card :focus-visible { outline: 3px solid var(--bell); outline-offset: 3px; } /* ---------- The corner: hero ---------- */ .corner { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 0; border: 1px solid var(--ink); margin: 0 0 56px; } .corner-card { background: var(--corner); color: var(--corner-ink); padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0; } .corner-card .round-line { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--corner-muted); } .bell-mark { width: 11px; height: 11px; border-radius: 50%; background: var(--bell); flex: none; } .round-clock { font-family: "Inter Tight", system-ui, Arial, sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-weight: 700; font-size: clamp(68px, 9vw, 104px); line-height: 0.86; letter-spacing: -0.05em; color: var(--corner-ink); margin: 0; } .round-plan { color: var(--corner-ink); font-size: 15px; line-height: 1.45; margin: 0; } .round-plan b { font-weight: 700; } .round-meta { color: var(--corner-muted); font-size: 14px; font-variant-numeric: tabular-nums; margin: 0; } .corner-card .button.primary { background: var(--bell); color: var(--bell-ink); border: 0; font-weight: 700; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; } .corner-card .button.primary:hover { background: #e4ff63; } .corner-card .text-link { color: var(--corner-ink); text-decoration: underline; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; } .corner-local { color: var(--corner-muted); font-size: 13px; line-height: 1.5; margin: 0; } .corner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: auto; } /* The phase strip: real rendered frames from the shipped jab clip. */ .phase-strip { border-left: 1px solid var(--ink); background: var(--paper); padding: 24px 24px 20px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; } .phase-strip > p { margin: 0; font-size: 15px; color: var(--muted); max-width: 60ch; } .phase-strip-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; } .phase-strip-head h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 0; } .phase-frames { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .phase-frames li { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; } .phase-frames img { width: 100%; height: auto; display: block; background: #22251e; border: 1px solid var(--line); } .phase-frames b { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; } .phase-frames small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .phase-frames li:last-child b { color: var(--muted); } .strip-open { align-self: flex-start; margin-top: 4px; min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; border-bottom: 2px solid var(--bell); } @media (max-width: 900px) { .corner { grid-template-columns: minmax(0, 1fr); } .phase-strip { border-left: 0; border-top: 1px solid var(--ink); } } @media (max-width: 560px) { .phase-frames { grid-template-columns: repeat(3, minmax(0, 1fr)); } .phase-frames li:nth-child(n + 4) { display: none; } } /* ---------- The fight card: studies as numbered rows ---------- */ .card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 0 0 14px; } .card-head h2 { margin: 0; } .card-head p { margin: 0; color: var(--muted); font-size: 15px; } .fight-card { border-top: 2px solid var(--ink); margin: 0 0 56px; } .fight-card a.bout { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); min-height: 60px; } .fight-card a.bout:hover { background: var(--paper); } .fight-card .bout-no { font-family: var(--heading); font-size: 24px; color: var(--muted); font-variant-numeric: tabular-nums; } .fight-card .bout-main { min-width: 0; } .fight-card .bout-main b { font-family: var(--heading); text-transform: uppercase; font-size: 22px; letter-spacing: 0.01em; line-height: 1.05; display: block; } .fight-card .bout-main span { color: var(--muted); font-size: 14px; line-height: 1.45; display: block; margin-top: 2px; } .fight-card .bout-meta { text-align: right; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .fight-card a.bout[data-live="true"] .bout-no { color: var(--ink); } .fight-card a.bout[data-live="true"] { box-shadow: inset 3px 0 0 var(--bell); } @media (max-width: 560px) { .fight-card a.bout { grid-template-columns: 32px minmax(0, 1fr); } .fight-card .bout-meta { grid-column: 2; text-align: left; } } /* ---------- Corner notes ---------- */ .corner-notes { border-top: 2px solid var(--ink); padding-top: 18px; margin: 0 0 56px; } .note-rows { display: flex; flex-direction: column; gap: 0; margin: 0 0 14px; } .note-rows article { padding: 12px 0; border-bottom: 1px solid var(--line); } .note-rows h3 { font-size: 19px; margin: 0 0 2px; } .note-rows p { margin: 0; color: var(--muted); font-size: 14px; } .note-rows .when { font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; } .next-move { border: 1px solid var(--line); background: var(--paper); padding: 20px; } .next-move h3 { margin: 0 0 6px; font-size: 22px; } .next-move p { margin: 0 0 14px; color: var(--muted); font-size: 15px; max-width: 62ch; } .next-move .button, .corner-notes .button { min-height: 44px; display: inline-flex; align-items: center; } /* ---------- Player chrome: black bar, chartreuse scrub head ---------- */ body[data-theme="boxing"] .transport { background: var(--corner); color: var(--corner-ink); padding: 14px 16px; border: 0; align-items: center; } body[data-theme="boxing"] .transport label, body[data-theme="boxing"] .transport .scrub-label { color: var(--corner-ink); } body[data-theme="boxing"] .transport .button.primary { background: var(--bell); color: var(--bell-ink); min-height: 44px; } body[data-theme="boxing"] .transport select { background: #23211d; color: var(--corner-ink); border: 1px solid var(--corner-line); min-height: 44px; } body[data-theme="boxing"] #study-scrub { -webkit-appearance: none; appearance: none; background: transparent; height: 32px; width: 100%; } body[data-theme="boxing"] #study-scrub::-webkit-slider-runnable-track { height: 4px; background: var(--corner-line); } body[data-theme="boxing"] #study-scrub::-moz-range-track { height: 4px; background: var(--corner-line); } body[data-theme="boxing"] #study-scrub::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--bell); border: 0; } body[data-theme="boxing"] #study-scrub::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--bell); border: 0; } body[data-theme="boxing"] #study-scrub:focus-visible { outline: 3px solid var(--bell); outline-offset: 3px; } /* The live round marker in the session player. */ body[data-theme="boxing"] .player-state .status-dot { background: var(--bell); } body[data-theme="boxing"] #player-clock { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.04em; } /* ---------- Touch targets ---------- */ @media (max-width: 900px) { body[data-theme="boxing"] .site-header nav a, body[data-theme="boxing"] .chip, body[data-theme="boxing"] .beat, body[data-theme="boxing"] .phase-tabs button, body[data-theme="boxing"] .text-link, body[data-theme="boxing"] .icon-button, body[data-theme="boxing"] .card-link, body[data-theme="boxing"] .human-toolbar button, body[data-theme="boxing"] footer a { min-height: 45px; display: inline-flex; align-items: center; } /* Remaining touch targets: the brand link, the block reorder row, inline prose links and the scrubber. */ body[data-theme="boxing"] .brand, body[data-theme="boxing"] .block button, body[data-theme="boxing"] .study-notes a, body[data-theme="boxing"] .panel a, body[data-theme="boxing"] .reference-link, body[data-theme="boxing"] .source-note a { min-height: 44px; display: inline-flex; align-items: center; } body[data-theme="boxing"] .block button { justify-content: center; min-width: 44px; } body[data-theme="boxing"] #study-scrub { height: 44px; } body[data-theme="boxing"] #study-scrub::-webkit-slider-thumb { margin-top: -7px; } body[data-theme="boxing"] .view-options label, body[data-theme="boxing"] .check-label, body[data-theme="boxing"] .toggle-row { min-height: 44px; } body[data-theme="boxing"] .view-options input[type="checkbox"], body[data-theme="boxing"] .check-label input[type="checkbox"] { width: 24px; height: 24px; } body[data-theme="boxing"] input, body[data-theme="boxing"] select, body[data-theme="boxing"] textarea { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Wave five: the curriculum on every study, the tiers on the fight card, the reference pages and the four-week progression sheets. Tokens are the ones defined on body[data-theme="boxing"] above; nothing new is introduced. */ .tier-head { grid-column: 1 / -1; padding: 26px 0 8px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; } .tier-head h3 { font-size: 1.35rem; margin: 0 0 2px; } .tier-head p { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: 62ch; } .curriculum { border-top: 2px solid var(--ink); padding-top: 14px; margin-top: 18px; } .curriculum .tier-line { font-family: var(--heading); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9rem; margin: 0 0 8px; color: var(--muted); } .curriculum h3 { font-size: 1.1rem; margin: 16px 0 6px; } .curriculum p { margin: 0 0 6px; line-height: 1.5; } .curriculum .walk, .curriculum .faults { margin: 0; padding: 0; list-style: none; counter-reset: walk; } .curriculum .walk li, .curriculum .faults li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 4px 10px; padding: 7px 0; border-top: 1px solid var(--line); line-height: 1.4; } .curriculum .walk li::before { counter-increment: walk; content: counter(walk, decimal-leading-zero); font-family: var(--heading); font-size: 1.15rem; line-height: 1.1; color: var(--ink); } .curriculum .faults li::before { content: "!"; font-family: var(--heading); font-size: 1.15rem; line-height: 1.1; color: var(--bell-ink); background: var(--bell); width: 1.6rem; height: 1.6rem; display: grid; place-items: center; } .curriculum li b { display: block; } .curriculum li span { grid-column: 2; color: var(--muted); font-size: 0.94rem; } .curriculum .prescription b { display: block; } .curriculum .scope { color: var(--muted); font-size: 0.9rem; border-left: 3px solid var(--bell); padding-left: 10px; } .partner-note { margin: 8px 0 0; border-left: 3px solid var(--bell); padding-left: 10px; } .progressions { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin: 8px 0 28px; } .progression { background: var(--paper); border: 1px solid var(--line); padding: 18px; min-width: 0; } .progression h3 { font-size: 1.5rem; margin: 8px 0 4px; } .progression > p { color: var(--muted); margin: 0 0 10px; } .progression .weeks { list-style: none; margin: 0; padding: 0; } .progression .weeks > li { border-top: 2px solid var(--ink); padding: 10px 0 6px; } .progression h4 { margin: 0 0 2px; font-family: var(--heading); text-transform: uppercase; font-size: 1.1rem; } .progression .week-note { margin: 0 0 6px; color: var(--muted); font-size: 0.92rem; } .progression .week-sessions { list-style: none; margin: 0; padding: 0; } .progression .week-sessions li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); min-height: 44px; } .progression .day, .progression .mins { color: var(--muted); font-size: 0.88rem; white-space: nowrap; } .progression .week-sessions .text-link { min-height: 44px; min-width: 44px; display: inline-grid; place-items: center; padding: 0 10px; } .progression .card-top .button { min-height: 44px; } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 18px; padding: 0; font-size: 0.9rem; color: var(--muted); } .breadcrumbs li + li::before { content: "/"; margin-right: 6px; } .breadcrumbs a { min-height: 44px; display: inline-flex; align-items: center; } .policy .glossary dt, .policy .faq dt { font-family: var(--heading); text-transform: uppercase; font-size: 1.15rem; margin: 18px 0 2px; } .policy .glossary dd, .policy .faq dd { margin: 0; line-height: 1.55; } .policy .study-frames { margin: 18px 0; } .policy .study-frames img { width: 100%; height: auto; max-width: 560px; display: block; border: 1px solid var(--line); } .policy .study-frames figcaption { font-size: 0.88rem; color: var(--muted); margin-top: 6px; } .policy .movement-list li { margin-bottom: 8px; } .policy .movement-list span { display: block; color: var(--muted); font-size: 0.92rem; } .reference-links { flex-basis: 100%; margin-bottom: 12px; } .reference-links h2 { font-size: 1rem; margin: 0 0 6px; } .reference-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; } .reference-links a { min-height: 44px; display: inline-flex; align-items: center; } @media (max-width: 700px) { .progression .week-sessions li { grid-template-columns: 3rem minmax(0, 1fr) auto auto; } .progression .mins { grid-column: 2; grid-row: 2; } } /* The wall sheet. One progression, one page per week, no chrome, the studies and their phase cues under each session, black on white so it reads in monochrome at A4 and Letter. body[data-print] names the sheet. */ @page { margin: 14mm 14mm 16mm; } .print-cues { display: none; } @media print { body[data-print] main > *:not(.progressions), body[data-print] .progressions .progression { display: none !important; } body[data-print="beginner"] #progression-beginner, body[data-print="intermediate"] #progression-intermediate, body[data-print="competition"] #progression-competition { display: block !important; border: 0; padding: 0; background: #fff; color: #000; } body[data-print] .progressions { display: block; margin: 0; } .progression .card-top, .progression .week-sessions .text-link, .progression .mins, .breadcrumbs, .reference-links, .sheet-actions { display: none !important; } .progression h3 { font-size: 22pt; margin: 0 0 4pt; } .progression > p { color: #000; font-size: 10.5pt; margin: 0 0 10pt; } .progression .weeks > li { border-top: 2pt solid #000; padding: 8pt 0 0; } .progression .weeks > li + li { break-before: page; } .progression h4 { font-size: 18pt; margin: 0 0 2pt; } .progression .week-note { color: #000; font-size: 10.5pt; margin: 0 0 8pt; } .progression .week-sessions li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 2pt 8pt; align-items: start; padding: 6pt 0 8pt; border-top: 1pt solid #000; box-shadow: none; break-inside: avoid; min-height: 0; } .progression .week-sessions li b { font-family: var(--heading); text-transform: uppercase; font-size: 13pt; } .progression .day { color: #000; font-size: 10pt; padding-top: 2pt; } .progression .tick { color: #000; } .print-cues { display: block; grid-column: 2; font-size: 9pt; line-height: 1.3; } .print-cues p { margin: 2pt 0; } .print-cues .print-blocks { font-weight: 700; margin-bottom: 4pt; } .print-cues b { text-transform: none; font-family: inherit; font-size: 9pt; } .progression .fine { font-size: 9pt; color: #000; margin-top: 8pt; } .curriculum, .tier-head { break-inside: avoid; } } /* Prose links on the built reference and study pages keep their place in the line but carry a 44 px hit area, through padding paid back by a negative margin. The brand in the static header gets the same height. */ .policy p a:not(.button), .policy li a:not(.button), .policy dd a:not(.button), .policy figcaption a, .premium-page p a:not(.button), .premium-page li a:not(.button) { display: inline-block; box-sizing: border-box; min-height: 44px; min-width: 44px; padding: 10px 4px; margin: -10px -4px; line-height: 24px; text-align: center; vertical-align: baseline; } body[data-theme="boxing"] .site-header .brand { min-height: 44px; display: inline-flex; align-items: center; } /* ---------- Gym mode: the clock across the room ---------- */ body[data-page="gym"] .site-header, body[data-page="gym"] footer { display: none; } body[data-page="gym"] { background: var(--corner); } body[data-page="gym"] main { max-width: none; padding: 0; margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--corner-ink); } .gym { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: clamp(12px, 2vw, 28px) clamp(16px, 3vw, 40px); gap: clamp(8px, 1.5vw, 20px); background: var(--corner); color: var(--corner-ink); } .gym .round-line { display: flex; align-items: center; gap: 10px; font-size: clamp(13px, 1.4vw, 20px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--corner-muted); } .gym-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; } .gym-session { font-family: var(--heading); text-transform: uppercase; font-size: clamp(18px, 2vw, 28px); color: var(--corner-ink); } .gym-exit { color: var(--corner-ink); border: 1px solid var(--corner-line); padding: 10px 18px; min-height: 45px; display: inline-flex; align-items: center; text-decoration: none; font-weight: 700; } .gym-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); align-items: center; min-height: 0; } .gym-clock { font-family: "Inter Tight", system-ui, Arial, sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-weight: 700; font-size: clamp(96px, 16vw, 320px); line-height: 0.86; letter-spacing: -0.06em; color: var(--corner-ink); margin: 0 0 12px -0.03em; } .gym-clock-wrap { min-width: 0; } /* Across the room nobody drives the camera; the cue caption stays. */ body[data-page="gym"] .human-toolbar, body[data-page="gym"] .human-status { display: none; } .gym-drill { font-size: clamp(32px, 5vw, 84px); line-height: 0.95; margin: 0 0 8px; color: var(--bell); } .gym-cue { font-size: clamp(18px, 2.4vw, 40px); line-height: 1.3; margin: 0 0 16px; max-width: 24ch; color: var(--corner-ink); } .gym progress { width: 100%; height: 8px; accent-color: var(--bell); } .gym-visual .motion-stage { border: 1px solid var(--corner-line); } .gym-action { font-family: var(--heading); text-transform: uppercase; font-size: clamp(20px, 2.4vw, 36px); margin: 12px 0 4px; color: var(--corner-ink); } .gym-next { font-size: clamp(16px, 1.8vw, 28px); margin: 0; color: var(--corner-ink); } .gym-next-label { font-size: clamp(14px, 1.5vw, 24px); margin: 4px 0 0; color: var(--corner-muted); } .gym-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .gym-controls .button { min-height: 48px; font-size: clamp(14px, 1.3vw, 20px); } .gym-controls .button.secondary, .gym-controls .button.quiet { color: var(--corner-ink); border-color: var(--corner-line); background: transparent; } .gym-controls .button.primary { background: var(--bell); color: var(--bell-ink); border-color: var(--bell); } .gym-keys { font-size: clamp(12px, 1.1vw, 16px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--corner-muted); } body[data-theme="boxing"] .gym :focus-visible { outline: 3px solid var(--bell); outline-offset: 3px; } @media (max-width: 900px), (orientation: portrait) { .gym-main { grid-template-columns: minmax(0, 1fr); align-content: start; } .gym-clock { font-size: clamp(96px, 30vw, 260px); } } @media (prefers-reduced-motion: reduce) { .gym .button { transition: none; } } /* ---------- Training records ---------- */ .records { border-top: 2px solid var(--ink); padding-top: 12px; margin: 0 0 40px; } .records .section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } .records-actions { display: flex; flex-wrap: wrap; gap: 8px; } .records-actions .file-label { display: inline-flex; align-items: center; cursor: pointer; position: relative; overflow: hidden; } /* The native file control stays focusable and labelled but takes no room: WebKit gives it a 92 px scroll width that pushed the journal sideways. */ .records-actions .file-label input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .records-actions .file-label:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; } .week-line { max-width: 70ch; margin: 8px 0 16px; } .record-list { list-style: none; margin: 0; padding: 0; } .record-list li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); } .record-list .when { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .record-list .record-main b { font-family: var(--heading); text-transform: uppercase; font-size: 18px; display: block; } .record-list .record-main > span { font-size: 14px; color: var(--muted); } .record-list .record-main .text-link { padding: 10px 0; min-height: 44px; } .log-study { border: 1px solid var(--line); padding: 0 16px 12px; margin: 16px 0 0; background: var(--paper); } .log-study summary { font-family: var(--heading); text-transform: uppercase; font-size: 20px; padding: 12px 0; cursor: pointer; min-height: 44px; } .log-study form { display: grid; gap: 12px; } .rating-set { border: 0; padding: 0; margin: 0; display: grid; gap: 4px; } .rating-set legend { font-weight: 700; font-size: 14px; margin-bottom: 4px; } .rating-set label { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 500; } .rating-set input[type="radio"] { width: 19px; height: 19px; min-height: 19px; margin: 0; accent-color: var(--ink); flex: none; } .summary-log { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; } .summary-log > span { font-size: 14px; color: var(--muted); margin-right: 4px; } .progression .week-sessions li[data-done="true"] { box-shadow: inset 3px 0 0 var(--bell); padding-left: 8px; } .progression .tick { display: inline-block; margin-left: 8px; color: var(--ink); } .clip-video { width: 100%; max-height: 60vh; background: #000; display: block; margin: 12px 0; } @media (max-width: 600px) { .record-list li { grid-template-columns: minmax(0, 1fr) auto; } .record-list .when { grid-column: 1 / -1; } } .sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; } .calendar-form .form-row { margin: 12px 0 0; } .program-card .card-calendar { display: inline-block; padding: 10px 0; min-height: 44px; margin-top: 2px; } /* ---------- Compare with camera ---------- */ .camera-open-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 20px; border-bottom: 1px solid var(--line); } .camera-open-row .fine { margin: 0; padding: 0; } .camera-panel { border-bottom: 1px solid var(--line); background: var(--paper); } .camera-frame { position: relative; aspect-ratio: 4 / 3; background: #141d20; overflow: hidden; } .camera-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #141d20; } .camera-video.mirrored { transform: scaleX(-1); } .camera-ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0.42; pointer-events: none; mix-blend-mode: screen; } .camera-ghost.off { display: none; } .camera-status { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 8px 12px; background: #141d20d9; color: #eef3f3; font-size: 13px; line-height: 1.4; } .camera-timer { position: absolute; top: 12px; right: 12px; padding: 6px 10px; background: var(--bell); color: var(--bell-ink); font-weight: 700; font-variant-numeric: tabular-nums; } .camera-panel[data-state="recording"] .camera-timer::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #b3261e; margin-right: 6px; } .camera-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 20px; } .camera-controls .button { min-height: 45px; } /* .button sets display, so the hidden attribute needs help inside the panel. */ .camera-panel [hidden] { display: none !important; } .camera-note { margin: 0; padding: 0 20px 14px; } /* Tablet landscape and up: the model and the camera side by side, the rest of the canvas underneath both. */ @media (min-width: 900px) { .study-canvas[data-camera="on"] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .study-canvas[data-camera="on"] > * { grid-column: 1 / -1; } .study-canvas[data-camera="on"] > #motion-stage { grid-column: 1; grid-row: 2; } .study-canvas[data-camera="on"] > .camera-panel { grid-column: 2; grid-row: 2; border-left: 1px solid var(--line); border-bottom: 0; align-self: stretch; } .study-canvas[data-camera="on"] .camera-frame { aspect-ratio: 640 / 440; } } @media (prefers-reduced-motion: reduce) { .camera-video, .camera-ghost { transition: none; } } @media (forced-colors: active) { .camera-status, .camera-timer { border: 1px solid CanvasText; background: Canvas; color: CanvasText; } } /* Touch widths: the header links and the favourite mark are 45 px wide too. */ @media (max-width: 900px) { body[data-theme="boxing"] .site-header nav a { min-width: 45px; justify-content: center; } body[data-theme="boxing"] .favorite { min-width: 45px; } } .home-lede { max-width: 68ch; margin: 0 0 20px; font-size: 17px; line-height: 1.55; }