/* CL Narrowcast - stijl Canvas: 1920x1080 tv fullscreen, vw/vh-units. Navy #0a1230 sterrenveld (Ruben's Strijdplan) + Moving-In leaf green #C7D300. */ /* Titillium Web lokaal meegeleverd (latin-subset) zodat het scherm niet afhankelijk is van Google Fonts tijdens onbeheerd casten. */ @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/titillium-web-300.woff2') format('woff2'); } @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/titillium-web-400.woff2') format('woff2'); } @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/titillium-web-600.woff2') format('woff2'); } @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/titillium-web-700.woff2') format('woff2'); } @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/titillium-web-900.woff2') format('woff2'); } :root { --navy: #0a1230; --navy-licht: #131d45; --leaf: #C7D300; --wit: #ffffff; --wit-zacht: rgba(255, 255, 255, 0.72); --wit-dof: rgba(255, 255, 255, 0.45); --groen: #C7D300; --oranje: #f5a623; --rood: #e5484d; --goud: #e8c34a; --zilver: #c0c8d4; --brons: #c98a5a; --paneel: rgba(255, 255, 255, 0.05); --paneel-rand: rgba(255, 255, 255, 0.10); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100vw; height: 100vh; overflow: hidden; } /* Onbeheerd cast-scherm: geen muiscursor in beeld. */ html, body { cursor: none; } /* Kleine statusstip: alleen zichtbaar als data ouder is dan 24 uur. Standaard verborgen; app.js zet .is-stale op wanneer nodig. */ .stale-dot { position: fixed; right: 1.2vh; bottom: 1.2vh; width: 1.4vh; height: 1.4vh; border-radius: 50%; background: var(--rood); box-shadow: 0 0 1.6vh rgba(229, 72, 77, 0.7); opacity: 0; pointer-events: none; transition: opacity 0.6s ease; z-index: 50; } body.is-stale .stale-dot { opacity: 0.9; } body { font-family: 'Titillium Web', 'Segoe UI', sans-serif; color: var(--wit); background-color: var(--navy); background-image: /* lichtbeam */ radial-gradient(ellipse 70vw 90vh at 75% -10%, rgba(199, 211, 0, 0.10), transparent 60%), radial-gradient(ellipse 90vw 70vh at 20% 110%, rgba(60, 90, 200, 0.18), transparent 65%), /* sterrenveld */ radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,0.9), transparent 100%), radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,0.7), transparent 100%), radial-gradient(2px 2px at 41% 12%, rgba(255,255,255,0.8), transparent 100%), radial-gradient(1px 1px at 55% 41%, rgba(255,255,255,0.6), transparent 100%), radial-gradient(1.5px 1.5px at 63% 78%, rgba(255,255,255,0.85), transparent 100%), radial-gradient(1px 1px at 71% 25%, rgba(255,255,255,0.65), transparent 100%), radial-gradient(2px 2px at 83% 56%, rgba(255,255,255,0.75), transparent 100%), radial-gradient(1px 1px at 91% 15%, rgba(255,255,255,0.7), transparent 100%), radial-gradient(1.5px 1.5px at 7% 84%, rgba(255,255,255,0.8), transparent 100%), radial-gradient(1px 1px at 18% 45%, rgba(255,255,255,0.55), transparent 100%), radial-gradient(1px 1px at 35% 88%, rgba(255,255,255,0.6), transparent 100%), radial-gradient(1.5px 1.5px at 48% 58%, rgba(255,255,255,0.7), transparent 100%), radial-gradient(1px 1px at 60% 8%, rgba(255,255,255,0.6), transparent 100%), radial-gradient(1px 1px at 77% 90%, rgba(255,255,255,0.65), transparent 100%), radial-gradient(1.5px 1.5px at 88% 74%, rgba(255,255,255,0.75), transparent 100%), radial-gradient(1px 1px at 96% 38%, rgba(255,255,255,0.6), transparent 100%), radial-gradient(1px 1px at 4% 55%, rgba(255,255,255,0.5), transparent 100%), radial-gradient(1px 1px at 24% 5%, rgba(255,255,255,0.6), transparent 100%), radial-gradient(1px 1px at 45% 33%, rgba(255,255,255,0.45), transparent 100%), radial-gradient(1px 1px at 68% 52%, rgba(255,255,255,0.5), transparent 100%), linear-gradient(180deg, #0c1538 0%, var(--navy) 45%, #060b20 100%); display: flex; flex-direction: column; } h1 { text-transform: uppercase; } /* Groene streep links uitgelijnd onder titels, offset 0.6em */ .slide-titel, .blok-titel { position: relative; text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 0.6em; } .slide-titel::after, .blok-titel::after { content: ""; position: absolute; left: 0; bottom: 0.28em; width: 2.2em; height: 0.12em; background: var(--leaf); } /* ---------- Vaste bovenbalk ---------- */ .topbar { flex: 0 0 14vh; display: flex; align-items: center; gap: 2.5vw; padding: 0 3vw; background: rgba(4, 8, 24, 0.55); border-bottom: 0.3vh solid rgba(199, 211, 0, 0.35); backdrop-filter: blur(2px); } .topbar__logo { height: 6.5vh; width: auto; } .topbar__titel { font-size: 3.2vh; font-weight: 900; letter-spacing: 0.14em; white-space: nowrap; } .topbar__titel .accent { color: var(--leaf); } .topbar__score { display: flex; align-items: baseline; gap: 1vw; margin-left: auto; } .topbar__score-getal { font-size: 9.5vh; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; } .kleur-groen .topbar__score-getal, .kleur-groen .scorebord__getal { color: var(--groen); } .kleur-oranje .topbar__score-getal, .kleur-oranje .scorebord__getal { color: var(--oranje); } .kleur-rood .topbar__score-getal, .kleur-rood .scorebord__getal { color: var(--rood); } .voortgang__vulling.kleur-groen { background: var(--groen); } .voortgang__vulling.kleur-oranje { background: var(--oranje); } .voortgang__vulling.kleur-rood { background: var(--rood); } .topbar__score-label { display: flex; flex-direction: column; font-size: 2.2vh; text-transform: uppercase; letter-spacing: 0.12em; color: var(--wit-zacht); line-height: 1.25; } .topbar__score-doel { font-size: 1.8vh; color: var(--wit-dof); text-transform: none; letter-spacing: 0.04em; } .topbar__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4vh; font-variant-numeric: tabular-nums; } .topbar__week { font-size: 2.2vh; text-transform: uppercase; letter-spacing: 0.14em; color: var(--wit-zacht); } .topbar__klok { font-size: 4vh; font-weight: 700; line-height: 1; } /* ---------- Roterend ondervlak ---------- */ .slides { position: relative; flex: 1 1 auto; overflow: hidden; } .slide { position: absolute; inset: 0; padding: 5vh 3vw 4vh; opacity: 0; transform: translateY(4vh); transition: opacity 0.8s ease, transform 0.8s ease; pointer-events: none; visibility: hidden; } .slide.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; } /* ---------- Slide 1: scorebord ---------- */ .scorebord { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3vw; height: 100%; } .scorebord__hoofd { display: flex; flex-direction: column; justify-content: center; } .slide-titel { font-size: 3.4vh; font-weight: 700; color: var(--wit-zacht); margin-bottom: 2vh; } .scorebord__doelpunten { display: flex; align-items: baseline; gap: 1.5vw; } .scorebord__getal { font-size: 34vh; line-height: 0.95; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 0 6vh rgba(199, 211, 0, 0.15); } .scorebord__van { font-size: 3.6vh; color: var(--wit-zacht); text-transform: uppercase; letter-spacing: 0.1em; max-width: 12vw; line-height: 1.3; } .voortgang { margin-top: 4vh; } .voortgang__balk { height: 3.6vh; border-radius: 1.8vh; background: rgba(255, 255, 255, 0.10); border: 1px solid var(--paneel-rand); overflow: hidden; } .voortgang__vulling { height: 100%; min-width: 1vh; border-radius: 1.8vh; transition: width 1s ease; } .voortgang__labels { display: flex; justify-content: space-between; margin-top: 1vh; font-size: 2.2vh; color: var(--wit-dof); text-transform: uppercase; letter-spacing: 0.1em; } .voortgang__doel { color: var(--leaf); font-weight: 700; } .scorebord__voetnoot { margin-top: 2.5vh; font-size: 2vh; color: var(--wit-dof); } /* ---------- Zijkolom: critical numbers, perfect weeks, reward ---------- */ .scorebord__zij { display: flex; flex-direction: column; justify-content: center; gap: 2vh; } .blok-titel { font-size: 2.4vh; font-weight: 700; letter-spacing: 0.12em; color: var(--wit-zacht); margin-bottom: 1vh; } .critical-numbers { display: flex; flex-direction: column; gap: 1.2vh; } .critical-number { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: baseline; column-gap: 1vw; padding: 1.6vh 1.4vw; background: var(--paneel); border: 1px solid var(--paneel-rand); border-left: 0.4vw solid var(--leaf); border-radius: 0.8vh; } .critical-number__label { font-size: 2.1vh; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wit-zacht); } .critical-number__waarde { grid-row: span 2; font-size: 4.6vh; font-weight: 900; font-variant-numeric: tabular-nums; text-align: right; } .critical-number__doel { font-size: 1.9vh; color: var(--wit-dof); } .perfect-weeks__stand { display: flex; align-items: baseline; gap: 0.8vw; } .perfect-weeks__getal { font-size: 7vh; font-weight: 900; line-height: 1; color: var(--leaf); font-variant-numeric: tabular-nums; } .perfect-weeks__van { font-size: 2.6vh; color: var(--wit-zacht); text-transform: uppercase; letter-spacing: 0.1em; } .perfect-weeks__tiers { display: flex; gap: 0.8vw; margin-top: 1.2vh; } .tier { display: inline-flex; align-items: center; justify-content: center; min-width: 4.6vh; height: 4.6vh; padding: 0 1vh; border-radius: 50%; font-size: 2.4vh; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; } .tier--goud { background: var(--goud); box-shadow: 0 0 2vh rgba(232, 195, 74, 0.45); } .tier--zilver { background: var(--zilver); } .tier--brons { background: var(--brons); } .reward { display: flex; align-items: center; gap: 1vw; padding: 1.8vh 1.4vw; background: linear-gradient(90deg, rgba(232, 195, 74, 0.14), rgba(232, 195, 74, 0.03)); border: 1px solid rgba(232, 195, 74, 0.4); border-radius: 0.8vh; } .reward__icoon { font-size: 4vh; line-height: 1; } .reward__tekst { font-size: 2.4vh; font-weight: 600; color: var(--goud); } /* ---------- Gouden owner-badge ---------- */ .owner-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.7vh 1.3vw; border-radius: 99vh; background: linear-gradient(135deg, #f2d778 0%, var(--goud) 55%, #bb9130 100%); color: var(--navy); font-size: 2vh; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; box-shadow: 0 0 2vh rgba(232, 195, 74, 0.35); white-space: nowrap; } .owner-badge--groot { font-size: 2.8vh; padding: 1vh 1.8vw; } /* ---------- Slide: Close the gap (rocks-overzicht) ---------- */ .rocks-overzicht { display: flex; flex-direction: column; height: 100%; } .rocks-rij { flex: 1 1 auto; display: flex; align-items: center; gap: 1.5vw; } .rock-kaart { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1.4vh; padding: 2.6vh 1vw; background: var(--paneel); border: 1px solid var(--paneel-rand); border-radius: 1.2vh; text-align: center; } .rock-kaart__logo { width: 100%; max-width: 12vw; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 1vh; border: 1px solid var(--paneel-rand); } .rock-kaart__nr { font-size: 1.8vh; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--leaf); } .rock-kaart__titel { font-size: 2.5vh; font-weight: 700; line-height: 1.2; min-height: 6vh; display: flex; align-items: center; justify-content: center; } .rock-kaart__voortgang { width: 100%; display: flex; align-items: center; gap: 0.7vw; margin-top: auto; } .rock-kaart__voortgang .voortgang__balk { flex: 1 1 auto; height: 2vh; border-radius: 1vh; } .rock-kaart__voortgang .voortgang__vulling { border-radius: 1vh; } .rock-kaart__pct { font-size: 2.2vh; font-weight: 700; font-variant-numeric: tabular-nums; } /* ---------- Slides: rock-detail ---------- */ .rock-detail { height: 100%; display: grid; grid-template-columns: auto 1fr; gap: 3.5vw; align-items: center; } .rock-detail__logo-kolom { display: flex; flex-direction: column; align-items: center; gap: 3vh; } .rock-detail__logo { width: 24vw; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 1.6vh; border: 1px solid var(--paneel-rand); box-shadow: 0 1vh 5vh rgba(0, 0, 0, 0.45); } .rock-detail__kicker { font-size: 2.2vh; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--leaf); margin-bottom: 0.6vh; } .rock-detail__inhoud .slide-titel { font-size: 5vh; color: var(--wit); margin-bottom: 1vh; } .rock-bullets { list-style: none; display: flex; flex-direction: column; gap: 1.6vh; margin-bottom: 4vh; } .rock-bullets li { position: relative; padding-left: 2vw; font-size: 3vh; font-weight: 600; color: var(--wit-zacht); line-height: 1.3; } .rock-bullets li::before { content: ""; position: absolute; left: 0; top: 1.4vh; width: 1.1vh; height: 1.1vh; background: var(--leaf); transform: rotate(45deg); } .rock-detail__voortgang { display: flex; align-items: center; gap: 1.2vw; max-width: 46vw; } .rock-detail__voortgang .voortgang__balk { flex: 1 1 auto; } .rock-detail__pct { font-size: 4.2vh; font-weight: 900; font-variant-numeric: tabular-nums; } .rock-detail__meta { display: flex; align-items: center; gap: 1.5vw; margin-top: 2.6vh; } .status-badge { display: inline-flex; align-items: center; padding: 0.8vh 1.5vw; border-radius: 99vh; border: 1px solid; font-size: 2.2vh; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .status-badge--groen { color: var(--groen); border-color: rgba(199, 211, 0, 0.5); background: rgba(199, 211, 0, 0.08); } .status-badge--oranje { color: var(--oranje); border-color: rgba(245, 166, 35, 0.5); background: rgba(245, 166, 35, 0.08); } .status-badge--rood { color: var(--rood); border-color: rgba(229, 72, 77, 0.5); background: rgba(229, 72, 77, 0.08); } .rock-detail__update { margin-top: 2.4vh; max-width: 46vw; padding: 1.6vh 1.4vw; background: var(--paneel); border: 1px solid var(--paneel-rand); border-left: 0.4vw solid var(--goud); border-radius: 0.8vh; } .rock-detail__update-label { display: block; font-size: 1.8vh; text-transform: uppercase; letter-spacing: 0.12em; color: var(--wit-dof); margin-bottom: 0.5vh; } .rock-detail__update-tekst { font-size: 2.4vh; line-height: 1.4; } /* ---------- Slide: Trainingsscore + 12:00-run ---------- */ .training { display: flex; flex-direction: column; height: 100%; } .training__grid { flex: 1 1 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 3.5vw; min-height: 0; } .training__weken, .training__run { display: flex; flex-direction: column; min-height: 0; } .week-staven { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: space-around; gap: 1.4vw; padding-top: 2vh; } .week-staaf { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1vh; } .week-staaf__pct { font-size: 2.6vh; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wit-zacht); } .week-staaf__baan { position: relative; width: 100%; max-width: 7vw; flex: 1 1 auto; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--paneel-rand); border-radius: 1vh; overflow: hidden; } .week-staaf__vulling { position: absolute; left: 0; right: 0; bottom: 0; min-height: 0.6vh; background: rgba(255, 255, 255, 0.26); border-radius: 1vh 1vh 0 0; transition: height 1s ease; } .week-staaf--nu .week-staaf__vulling { background: var(--leaf); box-shadow: 0 0 3vh rgba(199, 211, 0, 0.4); } .week-staaf--nu .week-staaf__pct { color: var(--leaf); } .week-staaf__week { font-size: 2vh; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wit-dof); } .training__run-inhoud { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .run-teams { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1.4vh; padding-top: 2vh; } .run-team { display: flex; align-items: center; gap: 1.2vw; padding: 1.5vh 1.4vw; background: var(--paneel); border: 1px solid var(--paneel-rand); border-left: 0.4vw solid var(--wit-dof); border-radius: 0.8vh; } .run-team--daily { border-left-color: var(--leaf); background: rgba(199, 211, 0, 0.08); } .run-team__icoon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 4.6vh; height: 4.6vh; border-radius: 50%; font-size: 2.6vh; font-weight: 700; background: rgba(255, 255, 255, 0.12); color: var(--wit-dof); } .run-team--daily .run-team__icoon { background: var(--leaf); color: var(--navy); box-shadow: 0 0 2vh rgba(199, 211, 0, 0.35); } .run-team__naam { font-size: 3vh; font-weight: 600; color: var(--wit-zacht); } .run-team--daily .run-team__naam { color: var(--wit); } .run-leeg { flex: 1 1 auto; display: flex; align-items: center; padding-top: 2vh; font-size: 2.8vh; color: var(--wit-dof); } /* ---------- Slide: Weekupdate ---------- */ .weekupdate { display: flex; flex-direction: column; justify-content: center; height: 100%; } .weekupdate__kicker { font-size: 2.2vh; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--leaf); margin-bottom: 0.6vh; } .weekupdate__kicker:empty { display: none; } .weekupdate .slide-titel { font-size: 5vh; color: var(--wit); margin-bottom: 3vh; } .weekupdate-bullets { list-style: none; display: flex; flex-direction: column; gap: 2.4vh; max-width: 80vw; } .weekupdate-bullets li { position: relative; padding-left: 2.2vw; font-size: 3.4vh; font-weight: 600; color: var(--wit-zacht); line-height: 1.3; } .weekupdate-bullets li::before { content: ""; position: absolute; left: 0; top: 1.7vh; width: 1.2vh; height: 1.2vh; background: var(--leaf); transform: rotate(45deg); } /* ---------- Slide: Man of the match ---------- */ .motm { display: flex; flex-direction: column; justify-content: center; height: 100%; } .motm__kicker { font-size: 2.2vh; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--leaf); margin-bottom: 0.6vh; } .motm .slide-titel { font-size: 4vh; color: var(--wit-zacht); margin-bottom: 2vh; } .motm__naam { font-size: 11vh; font-weight: 900; line-height: 1; color: var(--goud); text-shadow: 0 0 5vh rgba(232, 195, 74, 0.3); margin-bottom: 2.5vh; } .motm__reden { font-size: 3.4vh; font-weight: 600; color: var(--wit-zacht); line-height: 1.35; max-width: 70vw; margin-bottom: 4vh; } .motm__reward { align-self: flex-start; } /* ---------- Inlogpagina ---------- */ .inlogpagina { display: grid; place-items: center; min-height: 100vh; cursor: auto; } .inlog { width: min(28rem, 90vw); text-align: left; } .inlog__titel { margin: 0 0 0.5rem; font-size: 2rem; text-transform: uppercase; letter-spacing: 0.02em; } .inlog__uitleg { margin: 0 0 1.5rem; opacity: 0.75; line-height: 1.5; } .inlog__fout { margin: 0 0 1rem; padding: 0.75rem 1rem; border-left: 4px solid #e2564a; background: rgba(226, 86, 74, 0.12); } .inlog__form { display: grid; gap: 0.5rem; } .inlog__label { font-weight: 600; } .inlog__veld { padding: 0.75rem 1rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 4px; background: rgba(255, 255, 255, 0.06); color: inherit; font: inherit; } .inlog__veld:focus { outline: 2px solid #C7D300; outline-offset: 2px; } .inlog__knop { margin-top: 0.5rem; padding: 0.75rem 1.5rem; border: 0; border-radius: 4px; background: #C7D300; color: #0a1230; font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; } /* ---------- Happiness ---------- */ .happiness { display: flex; flex-direction: column; height: 100%; } .happiness__week { margin: 0 0 1.5rem; font-size: 1.5rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; } .happiness__grid { display: grid; grid-template-columns: 22rem 1fr; gap: 4rem; align-items: stretch; flex: 1; min-height: 0; } .happiness__bedrijf { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; border-radius: 8px; background: rgba(199, 211, 0, 0.08); border: 1px solid rgba(199, 211, 0, 0.25); } .happiness__getal { font-size: clamp(5rem, 11vh, 9rem); line-height: 1; font-weight: 700; color: #C7D300; } .happiness__label { margin-top: 0.5rem; font-size: 1.25rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; } /* De rijen verdelen de beschikbare hoogte. Bij weinig teams vullen ze het vlak, bij een team erbij krimpen ze mee in plaats van onder de onderrand te vallen. */ .happiness__stand { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; min-height: 0; grid-auto-rows: minmax(0, 1fr); } .happy-rij { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: 1.5rem; padding: 0.5rem 1.5rem; border-radius: 6px; background: rgba(255, 255, 255, 0.05); font-size: clamp(1.1rem, 2.2vh, 1.75rem); min-height: 0; } .happy-rij--top { background: rgba(199, 211, 0, 0.14); border-left: 4px solid #C7D300; } .happy-rij__positie { font-weight: 700; opacity: 0.5; } .happy-rij__score { font-weight: 700; font-variant-numeric: tabular-nums; } .happy-rij--top .happy-rij__score { color: #C7D300; } .veld-uitleg { margin: 0.25rem 0 0; font-size: 0.85rem; opacity: 0.65; }