/* ========================================================================== LIVE CAMERA PAGE BACKGROUND Full-bleed live shot behind the page. See includes/livecam_bg.php for the bandwidth gate and the 16:9 arithmetic. ========================================================================== */ /* ── Making the page see through ──────────────────────────────────────────── The supplied version put the camera at z-index:-2 and stopped there, which renders it invisible on this site: carries an OPAQUE background from the active theme (#f7f9f6 on the current one), and a negatively-stacked element paints BEHIND that, not in front of it. So the page has to be made transparent for the camera to exist at all: - html keeps a solid dark base, so any pixel the camera does not cover - during load, or if the stream drops - is black rather than white. - body goes transparent, which lets the fixed layer show through. Both are scoped to .has-livecam so no other page is touched. */ html.has-livecam-root { background: #06080a; } body.has-livecam { background: transparent; } .livecam-bg { position: fixed; inset: 0; z-index: -1; /* above the root canvas, below every bit of content */ overflow: hidden; background: #06080a; /* what shows while the first frame is still arriving */ pointer-events: none; /* the camera is scenery and never takes a click */ } .livecam-bg iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; display: block; /* The cover box. Smallest 16:9 rectangle that still covers the viewport, so the player's own object-fit:contain has nothing left to letterbox - which is what "no black areas" actually requires. 177.78vh = 16/9 of the height; 56.25vw = 9/16 of the width; max() takes whichever axis is short. vh first, lvh second: lvh is the LARGEST viewport height, so a phone that retracts its address bar mid-scroll finds the iframe already big enough instead of flashing a black strip along the bottom. Browsers without lvh simply keep the vh line. */ width: max(100vw, 177.78vh); height: max(100vh, 56.25vw); width: max(100vw, 177.78lvh); height: max(100lvh, 56.25vw); } /* NO SCRIM. There was a full-viewport rgba(0,0,0,.52) veil here. It is gone deliberately: the translucent scoreboard panels below already darken everything sitting behind the text, so the veil was darkening the camera a second time and buying nothing - the shot came through muddy for no legibility gain. Darkening belongs where the text is, not across the whole picture. If a bright midday shot ever does start washing out copy, the panel alphas in the block below are the place to fix it - not a blanket veil over the camera. */ /* Everything in the normal flow already paints above a z-index:-1 layer, so almost nothing is needed here. .nav IS DELIBERATELY ABSENT. An earlier version listed it, which set `position: relative; z-index: 1` on an element site.css makes `position: sticky; z-index: 100` - so the bar stopped sticking to the top of the viewport AND dropped below every panel that outranks z-index 1. A sticky bar at z-index 100 was already comfortably above a z-index:-1 background and never needed help. Do not add it back. */ .has-livecam main, .has-livecam .site-footer { position: relative; z-index: 1; } /* ── Letting the camera through the scores ────────────────────────────────── A background layer is only ever as visible as the holes in what sits on top, and this page has none by default: EVERY section paints its own opaque gradient. The camera was rendering correctly the whole time, at the right size, streaming - and completely hidden behind .ll-scores-anchor linear-gradient(#070d18 -> ...) .fb-scores-section linear-gradient(#010610 -> ...) which are flat dark navy, not translucent. Clearing those two is what actually puts the camera on screen, and it is scoped to the scores because that is the section the camera was asked for. The rest of the page keeps its own backgrounds deliberately: the player, the chat and the schedule are not improved by a live shot behind them, and the contrast behind the player in particular is doing real work. */ /* .ll-scores-anchor is OnWard's wrapper, .rds-scores is Red Devil's. Listing both keeps one file serving both sites; the selector that does not exist on a given page simply never matches. */ .has-livecam .ll-scores-anchor, .has-livecam .rds-scores, .has-livecam .fb-scores-section { background-image: none; background-color: transparent; } /* ── Letting the camera through the boards themselves ─────────────────────── Clearing the section gradients above only opened the margins. The boards are built from their own solid panels, and the biggest of them - .fb-day-block, the THURSDAY / FRIDAY NIGHT container - is flat #060c1a with no alpha at all, so the scores still sat on an opaque slab. Every one of these keeps its ORIGINAL HUE and only loses opacity, so the board still reads as the same component rather than as a different design that happens to be see-through. The blur is doing real work, not decoration. Text over a LIVE scene has no stable contrast - a cloud crossing the frame changes the backdrop under a score - and blurring what shows through turns a moving image into a calm wash while keeping the sense that something is behind it. It is one backdrop-filtered element, not one per row. */ /* The tints are variables, not literals, because the two sites do not share a palette: OnWard's board is navy (#060c1a) and Red Devil's is near-black (#101014). Hard-coding OnWard's blue here would have quietly restyled the Red Devil board, which is the one thing this was not allowed to do. Each site sets its own values; these defaults are OnWard's. */ .has-livecam { --lc-panel: rgba(6, 12, 26, .46); --lc-bar: rgba(1, 5, 16, .46); --lc-row: rgba(2, 7, 20, .34); --lc-row-alt: rgba(4, 10, 28, .20); } .has-livecam .fb-day-block { background: var(--lc-panel); backdrop-filter: blur(7px) saturate(115%); -webkit-backdrop-filter: blur(7px) saturate(115%); } .has-livecam .fb-refresh-bar { background: var(--lc-bar); } /* Rows keep their alternating banding - the pattern is what makes a long fixture list scannable - just at lower opacity. */ .has-livecam .fb-scores-tbl thead th, .has-livecam .fb-scores-tbl tbody tr { background: var(--lc-row); } .has-livecam .fb-scores-tbl tbody tr:nth-child(even) { background: var(--lc-row-alt); } .has-livecam .fb-game-card { background: var(--lc-row); } .has-livecam .fb-game-card:nth-child(even) { background: var(--lc-row-alt); } /* Numbers and team names carry a shadow now that what is behind them moves. Cheap, static, and the difference between "legible" and "legible until a bright sky drifts past". */ .has-livecam .fb-scores-tbl, .has-livecam .fb-mobile-scores { text-shadow: 0 1px 3px rgba(0, 0, 0, .85); } /* The section heading and its sub-line sit OUTSIDE the boards, straight on top of the camera - and the top of this shot is sky, which is the brightest thing in frame. The panels below cannot help them. A shadow rather than a panel or a veil: the whole point of dropping the full-screen scrim was to stop darkening the picture, so the fix has to be local to the glyphs. Two stacked shadows - a tight dark one for edge definition and a wide soft one to lift the text off whatever is behind it - hold up over both a bright sky and dark treeline without putting a box around the heading. */ .has-livecam .fb-sb-head__title, .has-livecam .fb-sb-head__sub, .has-livecam .fb-refresh-bar { text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 2px 12px rgba(0, 0, 0, .75); } /* The sub-line is the weakest text on the page - small, grey and low contrast by design against a flat panel. Over a live sky it needs to be brighter. */ .has-livecam .fb-sb-head__sub { color: rgba(255, 255, 255, .88); } /* ── Board text over a live scene ─────────────────────────────────────────── The board's own palette assumes a flat near-black panel. On that, a LOSING row is meant to recede, so football-scores.css paints it in colours barely above the background: .cell-team.fb-l #263a50 .fb-gc-team (loser) #1e3050 .cell-final.fb-l #0d1c32 .fb-gc-final (loser) #0a1628 .cell-q.fb-l #0d1c32 .fb-gc-quarters #1e3048 Those measure barely 1.5:1 against their own panel. Over a camera they are simply gone - which is what the losing scores looked like: dark grey mush. So over the camera the whole board goes light and OPAQUE. Every colour here is a solid hex, never rgba: alpha on TEXT is what makes glyphs sit in the picture instead of on top of it, and it is the first thing to fail when a bright cloud drifts behind the row. The panels keep their transparency - the camera still shows through the board - but the letters do not. WINNERS ARE NOT TOUCHED. The gold #ffd700 score and white team name are the whole visual grammar of the board: gold means won. Only the losing side and the quarter-by-quarter columns are lifted, so the contrast between the two is still obvious - it is now bright-white versus gold rather than invisible versus gold. */ /* Desktop table -------------------------------------------------------- */ .has-livecam .fb-scores-tbl td { color: #eef3f8; } /* base cell */ .has-livecam .fb-scores-tbl .cell-team { color: #ffffff; } /* team names */ .has-livecam .fb-scores-tbl .cell-vs { color: #dbe4ee; } /* the AT / VS */ .has-livecam .fb-scores-tbl th { color: #cfdae6; } /* column heads */ .has-livecam .fb-scores-tbl th.col-final { color: #ffd700; } /* keeps gold */ /* The losing side: lifted from near-black to plain white. */ .has-livecam .fb-scores-tbl .cell-team.fb-l { color: #ffffff; } .has-livecam .fb-scores-tbl .cell-final.fb-l { color: #f2f6fa; text-shadow: 0 2px 6px rgba(0,0,0,.9); } .has-livecam .fb-scores-tbl td.cell-q.fb-l { color: #e6edf5; } /* Winners: untouched on purpose, restated so nothing above can dim them. */ .has-livecam .fb-scores-tbl .cell-team.fb-w { color: #ffffff; } .has-livecam .fb-scores-tbl .cell-final.fb-w { color: #ffd700; } /* Mobile cards - same rules, same reasoning ----------------------------- */ .has-livecam .fb-gc-team { color: #ffffff; } .has-livecam .fb-gc-quarters { color: #e6edf5; } .has-livecam .fb-gc-loser .fb-gc-team { color: #ffffff; } .has-livecam .fb-gc-loser .fb-gc-final { color: #f2f6fa; text-shadow: 0 2px 6px rgba(0,0,0,.9); } .has-livecam .fb-gc-winner .fb-gc-team { color: #ffffff; } .has-livecam .fb-gc-winner .fb-gc-final { color: #ffd700; } /* The day heading (FRIDAY NIGHT) and anything else in the block. */ .has-livecam .fb-day-block > *:not(.fb-scores-tbl):not(.fb-mobile-scores) { color: #f2f6fa; } /* Pause Motion removes the element in JS; this is the belt-and-braces half so nothing can flash before the script runs. */ html.acc-pause-motion .livecam-bg { display: none; }