/* My Game — taken from design/mygame/my-game-prototyp.html, not rewritten. * * THREE CHANGES, and only these, each forced by putting the prototype on a real WordPress page: * 1. every selector is scoped under .sch-mygame. `.wrap`, `.cover`, `.note` and `.series` * are words a theme uses too, and unscoped they would restyle the rest of the site. * 2. body{} became .sch-mygame{} — the block owns its own type and background; the document's * belong to the theme. * 3. html{-webkit-text-size-adjust} was dropped for the same reason: not ours to set. * Nothing else was touched: the same colours, the same measures, the same breakpoints. * * The two extra rules at the end are markup this page has and the prototype did not — the panel is * rendered for every series and hidden with [hidden], and the no-GUID state is a real element rather * than an inline style written by the script. */ .sch-mygame{ --paper:#F4F5F2; /* studený papier, nie krémová */ --paper-2:#FFFFFF; --ink:#16222E; --ink-soft:#5D6B78; --line:#D8DCD6; --pitch:#227F77; /* SCH akcent */ --pitch-dim:rgba(34,127,119,.10); --chalk:#2A3746; --focus:#0E5FA8; --r:10px; } .sch-mygame *{box-sizing:border-box} /* html{-webkit-text-size-adjust} dropped: the document is not ours to set */ .sch-mygame{ margin:0;background:var(--paper);color:var(--ink); font:400 16px/1.55 "Instrument Sans",system-ui,sans-serif; -webkit-font-smoothing:antialiased; } .sch-mygame .wrap{max-width:1180px;margin:0 auto;padding:0 28px} .sch-mygame /* ---------- hlavička ---------- */ /* --- lišta lôg --- */ .brandbar{border-bottom:1px solid var(--line);background:var(--paper-2)} .sch-mygame .brandbar .wrap{display:flex;align-items:center;gap:26px;height:66px} .sch-mygame .brandbar img{height:30px;width:auto;display:block} .sch-mygame .brandbar .sep{width:1px;height:24px;background:var(--line)} .sch-mygame .brandbar .spacer{flex:1} .sch-mygame .brandbar .note{font-size:12.5px;color:var(--ink-soft)} .sch-mygame /* --- hero: chalkboard pás s názvom --- */ .masthead{position:relative;overflow:hidden;border-bottom:1px solid var(--line); /* the colour, the optional photograph and the ink are settings; with nothing set these resolve to the design's own chalkboard, no image, white type — see section 15 */ background-color:var(--mg-hero-bg);color:var(--mg-hero-ink); background-image:var(--mg-hero-img);background-size:cover;background-position:50% 50%; background-repeat:no-repeat} .sch-mygame .masthead::before{content:"";position:absolute;inset:0;opacity:.5; background: radial-gradient(circle at 50% 118%, rgba(255,255,255,.14) 0 1px, transparent 1px) 0 0/100% 100%, radial-gradient(circle at 22% 40%, rgba(255,255,255,.10) 0 118px, transparent 119px), linear-gradient(115deg, transparent 0 46%, rgba(255,255,255,.07) 46% 46.4%, transparent 46.4%), linear-gradient(115deg, transparent 0 62%, rgba(255,255,255,.05) 62% 62.3%, transparent 62.3%)} .sch-mygame .masthead-inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:52px;align-items:end;padding:66px 0 54px} .sch-mygame .wordmark{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300; font-size:clamp(62px,10vw,132px);line-height:.86;letter-spacing:.005em;margin:0; color:var(--mg-hero-ink)} .sch-mygame .wordmark em{display:block;font-style:normal;font-weight:600} .sch-mygame .kicker{font:500 12.5px/1 "Instrument Sans",sans-serif;letter-spacing:.14em; color:rgba(255,255,255,.55);margin:0 0 20px} .sch-mygame .lede{color:rgba(255,255,255,.78);font-size:16px;max-width:46ch;margin:0 0 4px} .sch-mygame .lede strong{color:#fff;font-weight:600} /* the two quieter lines follow the ink rather than staying white — the same .55 and .78 the design chose, mixed into whatever colour the hero is set to. Declared after the rules above so a browser without color-mix() keeps the original white and nothing looks broken. */ @supports (color:color-mix(in srgb, #fff 50%, transparent)){ .sch-mygame .kicker{color:color-mix(in srgb, var(--mg-hero-ink) 55%, transparent)} .sch-mygame .lede{color:color-mix(in srgb, var(--mg-hero-ink) 78%, transparent)} .sch-mygame .lede strong{color:var(--mg-hero-ink)} } .sch-mygame /* ---------- prepínač sérií ---------- */ .navwrap{background:var(--paper-2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20} .sch-mygame .series-nav{display:flex;gap:6px;padding:14px 0;flex-wrap:wrap} .sch-mygame .series-btn{ appearance:none;background:transparent;border:1px solid var(--line); border-radius:999px;padding:9px 18px;cursor:pointer; font:500 14.5px/1 "Instrument Sans",sans-serif;color:var(--ink-soft); } .sch-mygame .series-btn:hover{border-color:var(--pitch);color:var(--pitch)} .sch-mygame .series-btn[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff} .sch-mygame .series-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .sch-mygame /* ---------- panel série ---------- */ .series{padding:30px 0 60px} .sch-mygame .series-head{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:46px;align-items:center;margin-bottom:36px} .sch-mygame .cover{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden; background:var(--chalk);border:1px solid var(--line)} .sch-mygame .cover img{width:100%;height:100%;object-fit:cover;display:block} .sch-mygame .cover .ph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.9); font-family:"Cormorant Garamond",Georgia,serif;font-size:34px;letter-spacing:.04em} .sch-mygame .series-title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500; font-size:clamp(32px,4.4vw,50px);line-height:1.02;letter-spacing:.005em;margin:0 0 8px} .sch-mygame .series-meta{color:var(--ink-soft);font-size:14px;margin:0} .sch-mygame .series-body{color:var(--ink-soft);font-size:15.5px;max-width:66ch} .sch-mygame .series-body p{margin:0 0 12px} .sch-mygame .series-body p:last-child{margin:0} .sch-mygame /* ---------- súpiska ---------- */ .roster{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .sch-mygame .ep{ appearance:none;text-align:left;padding:0;cursor:pointer; background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;display:flex;flex-direction:column; transition:border-color .18s, transform .18s; } .sch-mygame .ep:hover{border-color:var(--pitch);transform:translateY(-2px)} .sch-mygame .ep:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .sch-mygame .ep-thumb{position:relative;aspect-ratio:16/10;background:var(--chalk);overflow:hidden} .sch-mygame .ep-thumb img{width:100%;height:100%;object-fit:cover;display:block} .sch-mygame .ep-thumb .lines{position:absolute;inset:0;opacity:.30; background: radial-gradient(circle at 50% 50%, transparent 46px, rgba(255,255,255,.22) 46px, transparent 47px), linear-gradient(to right, transparent calc(50% - .5px), rgba(255,255,255,.22) 50%, transparent calc(50% + .5px)), linear-gradient(to bottom, rgba(255,255,255,.16) 0 1px, transparent 1px) 0 12px/100% calc(100% - 24px)} .sch-mygame .ep-thumb .nm{position:absolute;left:12px;bottom:10px;right:12px;color:#fff; font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:15px;line-height:1.15; letter-spacing:-.01em;text-shadow:0 1px 12px rgba(0,0,0,.55)} .sch-mygame .ep-play{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%; background:rgba(255,255,255,.92);display:grid;place-items:center} .sch-mygame .ep-play svg{width:11px;height:11px;fill:var(--ink);margin-left:2px} .sch-mygame .ep-txt{padding:13px 14px 15px} .sch-mygame .ep-name{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:22px; line-height:1.1;letter-spacing:.005em;margin:0 0 2px;display:block} .sch-mygame .ep-role{margin:0;font-size:13px;color:var(--ink-soft);display:block} .sch-mygame .ep-hint{display:block;font-size:13px;color:var(--pitch);margin-top:8px; max-height:0;overflow:hidden;opacity:0;transition:max-height .22s,opacity .22s} .sch-mygame .ep:hover .ep-hint, .sch-mygame .ep:focus-visible .ep-hint{max-height:40px;opacity:1} /* ---------- modál ---------- */ .sch-mygame dialog.viewer{ padding:0;border:0;border-radius:14px;width:min(940px,calc(100vw - 32px)); background:var(--paper-2);color:var(--ink);box-shadow:0 30px 80px rgba(22,34,46,.28) } .sch-mygame dialog.viewer::backdrop{background:rgba(22,34,46,.62)} .sch-mygame .v-frame{position:relative;aspect-ratio:16/9;background:#000} .sch-mygame .v-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .sch-mygame .v-body{padding:22px 26px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto; gap:26px;align-items:start} .sch-mygame .v-name{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500; font-size:34px;line-height:1.05;letter-spacing:.005em;margin:0 0 4px} .sch-mygame .v-role{margin:0 0 10px;color:var(--ink-soft);font-size:13.5px} .sch-mygame .v-desc{margin:0;font-size:15.5px;color:var(--ink-soft);max-width:62ch} .sch-mygame .v-nav{display:flex;gap:8px;align-items:center} .sch-mygame .v-btn{appearance:none;background:transparent;border:1px solid var(--line);border-radius:999px; width:38px;height:38px;display:grid;place-items:center;cursor:pointer} .sch-mygame .v-btn:hover:not(:disabled){border-color:var(--pitch)} .sch-mygame .v-btn:disabled{opacity:.35;cursor:default} .sch-mygame .v-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .sch-mygame .v-btn svg{width:13px;height:13px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .sch-mygame .v-close{position:absolute;right:12px;top:12px;z-index:2;width:36px;height:36px;border-radius:50%; border:0;background:rgba(255,255,255,.92);cursor:pointer;display:grid;place-items:center} .sch-mygame .v-close svg{width:14px;height:14px;stroke:var(--ink);stroke-width:2;stroke-linecap:round} .sch-mygame .v-close:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .sch-mygame .v-counter{font-size:13px;color:var(--ink-soft);margin-right:4px;white-space:nowrap} .sch-mygame /* ---------- päta ---------- */ .foot{border-top:1px solid var(--line);padding:26px 0 60px;color:var(--ink-soft);font-size:13.5px} @media(max-width:960px){.sch-mygame .masthead-inner{grid-template-columns:1fr;gap:24px;padding:46px 0 40px} .sch-mygame .series-head{grid-template-columns:1fr;gap:22px} .sch-mygame .roster{grid-template-columns:repeat(3,1fr)}} @media(max-width:620px){.sch-mygame .wrap{padding:0 18px} .sch-mygame .roster{grid-template-columns:repeat(2,1fr);gap:10px} .sch-mygame .v-body{grid-template-columns:1fr;padding:18px} .sch-mygame .v-nav{justify-content:flex-start}} @media(prefers-reduced-motion:reduce){ /* scoped: unscoped this `*` would stop every transition on the page, ours and the theme's */ .sch-mygame, .sch-mygame *{transition:none!important;animation:none!important}} /* every series panel is server-rendered; the script shows one. [hidden] must beat display:grid. */ .sch-mygame .series[hidden]{display:none} /* the placeholder for an episode with no GUID — the prototype wrote this inline from JS */ .sch-mygame .v-soon-in{position:absolute;inset:0;display:grid;place-items:center;color:#fff; font:500 14px "Instrument Sans",sans-serif;text-align:center;padding:24px;line-height:1.6} /* ══════════════════════════════════════════════════════════════════════════ THE REVIEW: full width, sticky bars, a stable card. Everything below is an addition to the prototype's rules above, not a change to them — the typography, the palette, the hero and the modal are approved and untouched. ══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · EDGE TO EDGE ───────────────────────────────────────────────────── The page is a full-screen template, but the block sits inside the theme's measured column. It breaks out to the viewport; only .wrap, which every band already uses for its reading content, keeps the measure. */ .sch-mygame{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);padding-block-start:0} /* 100vw is the viewport INCLUDING the scrollbar gutter, so on a platform that reserves one this would otherwise scroll a few pixels sideways. This USED to be handled with `body:has(.sch-mygame){overflow-x:hidden}` — see section 13: that rule is gone, because overflow on the body is one of the two or three things that stop position:sticky working, and it was ours. The script now sets an exact pixel width from documentElement.clientWidth, which excludes the scrollbar, so nothing overflows and nothing has to be clipped. */ /* the template's own title block is the top offset — the catalogue hides its own the same way */ body:has(.sch-mygame) .entry-header{display:none} /* ── 3 · THE TWO BARS STICK, ONE UNDER THE OTHER ────────────────────────── --mg-bar is the brand bar's measured height, written by the script on load and on resize: the bar's height depends on the theme's menu and the reader's font size, so it is measured rather than assumed. The series bar parks at exactly that offset, and the lower z-index is what makes it park UNDER the brand bar rather than over it. */ .sch-mygame{ --mg-bar:89px; /* the brand bar's height before the script measures the real one */ --mg-top:0px; /* a theme header pinned above us, measured by the script */ /* ── THE SETTINGS' DEFAULTS. Each is overridden by a custom property on the wrapper when the matching field is filled in, and only then — so an empty field is the design's own value rather than a second copy of it stored in the database. ── */ --mg-bar-h:88px; --mg-hero-bg:var(--chalk); --mg-hero-ink:#fff; --mg-hero-img:none } .sch-mygame .brandbar{position:sticky;top:var(--mg-top);z-index:30} .sch-mygame .navwrap{position:sticky;top:calc(var(--mg-top) + var(--mg-bar));z-index:20} /* the theme's menu and the language switcher, sitting in our bar */ .sch-mygame .brandbar .wrap{gap:18px} .sch-mygame .mg-home{display:flex;align-items:center} .sch-mygame .mg-nav{min-width:0} .sch-mygame .mg-menu{display:flex;flex-wrap:wrap;align-items:center;gap:18px;list-style:none;margin:0;padding:0} .sch-mygame .mg-menu li{margin:0} .sch-mygame .mg-menu a{font-size:14px;color:var(--ink-soft);text-decoration:none} .sch-mygame .mg-menu a:hover{color:var(--pitch)} /* .sub-menu is NOT hidden here any more — see section 10 */ .sch-mygame .mg-lang{display:flex;align-items:center} .sch-mygame .mg-lang ul{display:flex;gap:10px;list-style:none;margin:0;padding:0} .sch-mygame .mg-lang a{font-size:13px;color:var(--ink-soft);text-decoration:none} .sch-mygame .mg-lang a:hover{color:var(--pitch)} /* the 860px rule that hid the menu on a phone is gone — see section 16. It assumed the theme would provide a menu; on this template the theme renders no header at all, so hiding ours left a reader on a phone with no way off the page. */ /* ── 5 · A CARD THAT DOES NOT MOVE ──────────────────────────────────────── Every card in the row is the same height regardless of how long a name is. The grid stretches the cards; the text block is a fixed two lines with the hint pinned to the bottom, so "Donnarumma" and "Rodri" end level. */ .sch-mygame .roster{align-items:stretch} .sch-mygame .ep{height:100%} .sch-mygame .ep-txt{flex:1 1 auto;display:flex;flex-direction:column;padding:14px 14px 15px} .sch-mygame .ep-name{ font-size:26px;line-height:1.12;margin:0; /* TWO LINES, ALWAYS: a name that fits one still reserves the second, which is what keeps the row level. A longer one wraps into it and is clipped. The height and the clipping are plain CSS on purpose — a page optimiser that strips the unknown -webkit-box-orient cannot change what is read. */ min-block-size:calc(2 * 1.12em);max-block-size:calc(2 * 1.12em); display:block;overflow:hidden} @supports (-webkit-line-clamp:2){ /* only the ellipsis on the clipped line is the prefixed property's job */ .sch-mygame .ep-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} } .sch-mygame .ep-hint{margin-block-start:auto;padding-block-start:8px} /* the name is out of the thumbnail; the drawn placeholder keeps the pitch lines only */ .sch-mygame .ep-thumb .nm{display:none} /* ── 6 · THE DESCRIPTION IS WHOLE ─────────────────────────────────────── There was a fixed box here that scrolled inside itself, and a "Show more" to open it, both to stop the row of cards moving down when the text opened. The cure was worse than the complaint: some series showed everything and some three lines, and a scrolling box inside a paragraph reads as broken. The text is printed in full and the row sits below it. Nothing clamps, nothing scrolls, nothing collapses. */ /* ══════════════════════════════════════════════════════════════════════════ ROUND TWO. Everything below is a fix to something that was wrong on the LIVE page and right in the prototype — which is the tell: each of these is a place where this file left a property for somebody else to decide, and on soccercoacheshub.com the theme decided it. ══════════════════════════════════════════════════════════════════════════ */ /* ── 7 · THE NAME ON THE CARD WAS WHITE ON WHITE ────────────────────────── .ep is a