/* ============================================================================ circuit.css — ⏱️ The Circuit engine styling (.cir-*) Shared across the workout pickers; per-page accent via --cir-grad-a / --cir-grad-b set inline on . A self-contained dark gym scoreboard. ============================================================================ */ .cir-board { --cir-grad-a: #4ade80; --cir-grad-b: #16a34a; position: relative; border-radius: 16px; padding: 22px; box-sizing: border-box; background: radial-gradient(120% 130% at 50% 0%, #0f1a14 0%, #0a1110 55%, #060a08 100%); border: 1px solid #1c3a2a; box-shadow: inset 0 0 80px rgba(0, 0, 0, .5), 0 22px 55px -20px rgba(34, 197, 94, .30); } .cir-timer { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; min-height: 68px; } .cir-clock { font-family: 'Consolas', 'SF Mono', ui-monospace, monospace; font-weight: 800; letter-spacing: 2px; line-height: 1; } .cir-clock.cir-ready { font-size: 30px; color: #4d6b5b; letter-spacing: 4px; } .cir-clock.cir-count { font-size: 66px; color: #eafff2; text-shadow: 0 0 24px rgba(74, 222, 128, .5); } .cir-clock.cir-golit { font-size: 66px; font-weight: 900; letter-spacing: 4px; color: #22c55e; text-shadow: 0 0 34px rgba(34, 197, 94, .8); animation: cirPop .3s ease; } @keyframes cirPop { 0% { transform: scale(.6); opacity: .3; } 100% { transform: scale(1); opacity: 1; } } .cir-lights { display: flex; gap: 8px; } .cir-lights i { width: 14px; height: 14px; border-radius: 50%; background: #1c3a2a; display: block; transition: background .12s, box-shadow .12s; } .cir-lights i.on { background: #22c55e; box-shadow: 0 0 12px #22c55e; } .cir-stations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; } .cir-st { position: relative; border-radius: 12px; padding: 16px 10px; min-height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #0e1713; border: 1px solid #1d3327; color: #5f7d6d; font-weight: 700; font-size: 13.5px; text-align: center; opacity: .62; transition: opacity .25s, transform .3s cubic-bezier(.34, 1.4, .5, 1), box-shadow .3s, background .3s, border-color .25s; } .cir-st .cir-em { font-size: 20px; filter: grayscale(.5) brightness(.85); transition: filter .25s; } .cir-st .cir-rx { position: absolute; top: -10px; right: -8px; font-size: 11px; font-weight: 800; letter-spacing: .3px; color: #06140c; background: #eafff2; padding: 3px 9px; border-radius: 20px; box-shadow: 0 3px 10px rgba(0, 0, 0, .4); white-space: nowrap; opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s; } .cir-st .cir-rx:empty { display: none; } .cir-st.cir-pulse { opacity: .95; border-color: #2f6b48; box-shadow: 0 0 16px rgba(34, 197, 94, .25); } .cir-st.cir-pulse .cir-em { filter: none; } .cir-st.cir-win { opacity: 1; transform: scale(1.09); z-index: 3; border: 2px solid #4ade80; color: #fff; background: linear-gradient(150deg, var(--cir-grad-b, #16a34a) 0%, #0d7a3a 100%); box-shadow: 0 0 0 3px rgba(34, 197, 94, .2), 0 0 42px 6px rgba(34, 197, 94, .55); } .cir-st.cir-win .cir-em { filter: none; } .cir-st.cir-win .cir-rx { opacity: 1; transform: scale(1); } .cir-callout { margin-top: 18px; text-align: center; color: #8fb9a2; font-size: 14px; letter-spacing: .3px; min-height: 22px; } .cir-callout b { color: #cff5df; } .cir-callout .cir-rec { color: #22c55e; font-weight: 900; letter-spacing: 1px; } .cir-callout .cir-lbl { color: #eafff2; font-weight: 800; font-size: 18px; } .cir-callout .cir-dose { color: #4ade80; font-weight: 800; } /* start button + intensity */ .cir-startbtn-wrap { text-align: center; } .cir-startbtn-main { display: inline-flex; align-items: center; gap: 8px; margin: 16px auto 0; font-size: 15px; font-weight: 800; color: #06140c; padding: 12px 34px; border-radius: 11px; border: 0; cursor: pointer; letter-spacing: 1px; background: linear-gradient(135deg, var(--cir-grad-a, #4ade80), var(--cir-grad-b, #16a34a)); box-shadow: 0 8px 22px -6px rgba(34, 197, 94, .7); } .cir-intensity-row { margin-top: 16px; } .cir-intensity-row label { font-size: 13px; font-weight: 600; color: var(--theme-text, #1a1a2e); display: flex; align-items: center; gap: 8px; } .cir-intensity-row .cir-intensity-val { color: #16a34a; font-weight: 800; } .cir-intensity-row input[type=range] { width: 100%; margin-top: 8px; accent-color: #16a34a; } .cir-effects { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 13px; color: var(--theme-text, #1a1a2e); } .cir-effects label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .cir-items-ta { width: 100%; min-height: 220px; font-family: monospace; font-size: .9rem; border-radius: 10px; border: 1px solid var(--theme-border, #d7dbe0); background: var(--theme-bg, #fff); color: var(--theme-text, #1a1a2e); padding: 10px 12px; resize: vertical; } .page-cir-scope { --wsp-result-accent: #16a34a; --wsp-result-grad: linear-gradient(135deg, #4ade80, #16a34a); --wsp-result-plate: rgba(22, 163, 74, .10); } @media (max-width: 575.98px) { .cir-stations { grid-template-columns: repeat(2, 1fr) !important; } .cir-clock.cir-count, .cir-clock.cir-golit { font-size: 48px; } .cir-board { padding: 16px; } } /* ── SEO content (.cir-content) — type scale from .content-guide; colour only ── */ .cir-content { color: var(--theme-text, #1a1a2e); background: var(--theme-bg, #fff); padding: 3.25rem 0 3.5rem; margin-top: 1rem; border-top: 1px solid var(--theme-border, #e9ecef); } .cir-inner { max-width: 860px; margin: 0 auto; padding: 0 1rem; } .cir-content h2, .cir-content h3 { color: var(--theme-text, #1a1a2e); } .cir-content p, .cir-content li { color: var(--theme-muted, #5b6470); } .cir-content strong { color: var(--theme-text, #1a1a2e); } .cir-content a { color: #15803d; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } .cir-kicker { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #06140c; background: linear-gradient(135deg, #4ade80, #16a34a); border-radius: 999px; padding: .3rem .85rem; margin-bottom: .95rem; } .cir-content .cir-lead { font-size: 1.2rem; line-height: 1.7; color: var(--theme-text, #1a1a2e); margin-bottom: 1.25rem; } .cir-section { margin-top: 2.9rem; } .cir-content .table { font-size: 1rem; } .cir-content .table thead th { text-transform: uppercase; letter-spacing: .05em; font-size: .74rem; font-weight: 800; color: #fff; background: #16a34a; padding: .7rem 1rem; } .cir-content .table tbody td { padding: .6rem 1rem; border-bottom: 1px solid var(--theme-border, #e9ecef); vertical-align: top; } .cir-content .table tbody td:first-child { font-weight: 700; color: var(--theme-text, #1a1a2e); white-space: nowrap; } .cir-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; } .cir-pair-card { background: var(--theme-surface, #f8f9fa); border: 1px solid var(--theme-border, #e9ecef); border-radius: 12px; padding: 1rem 1.1rem; border-top: 3px solid #16a34a; } .cir-pair-card h3 { margin-top: 0 !important; font-size: 1.02rem !important; } .cir-pair-card p:last-child { margin-bottom: 0; font-size: .92rem; } .cir-faq { margin-top: 1.4rem; } .cir-faq .accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--theme-border, #e9ecef); } .cir-faq .accordion-button { background: transparent; color: var(--theme-text, #1a1a2e); font-weight: 600; padding-left: 0; padding-right: 2.5rem; box-shadow: none; } .cir-faq .accordion-button:not(.collapsed) { color: #15803d; background: transparent; } .cir-faq .accordion-button:focus { box-shadow: none; } .cir-faq .accordion-body { padding-left: 0; color: var(--theme-muted, #5b6470); } @media (max-width: 767.98px) { .cir-pair { grid-template-columns: 1fr; } } body[data-theme="high-contrast"] .cir-content p, body[data-theme="high-contrast"] .cir-content li, body[data-theme="high-contrast"] .cir-content .cir-lead { color: rgba(255,255,255,.84); } body[data-theme="high-contrast"] .cir-content h2, body[data-theme="high-contrast"] .cir-content h3 { color: #fff; }