/* --------------------------------------------------------------------------- pssc-crm.css — the committee area's own layer. Everything here hangs off .pssc-crm, a class put on by m_page_start and by nothing else. The public pages never carry it and never load this file, so nothing in here can reach them. It sits on top of style.css and pssc-pro.css and only changes what was getting in the way of the work. ------------------------------------------------------------------------- */ .pssc-crm{ /* Red stops being the house colour in here and starts meaning something. Anything filled red from now on is something you cannot simply undo. */ --crm-primary:#1049a9; --crm-primary-dark:#0d3d8f; --crm-danger:#c8102e; --crm-danger-soft:#fdf4f5; --crm-line:#e4e9f2; --crm-muted:#5b6b86; } /* --- one header, not two ------------------------------------------------- The public navigation bar was sitting above the members' bar on every page: sixty-five pixels of links that lead out of the job in hand, on a screen somebody is using to do that job. The way back to the website is still in the sidebar, where it belongs. */ .pssc-crm > header.site-header{ display:none } .pssc-crm .m-shell{ padding-top:0 } /* --- what a button is telling you ---------------------------------------- */ .pssc-crm .m-shell .cta{ background:var(--crm-primary); border-color:var(--crm-primary); min-height:44px; /* a thumb, not a cursor */ display:inline-flex; align-items:center; justify-content:center; } .pssc-crm .m-shell .cta:hover{ background:#0d3d8f; border-color:#0d3d8f } .pssc-crm .m-shell .cta.alt{ background:#fff; color:var(--crm-primary); border:1.5px solid rgba(16,73,169,.35); } .pssc-crm .m-shell .cta.alt:hover{ background:#f3f7fd; border-color:var(--crm-primary) } /* The one that takes money off the books does not get to look like the one that saves a typo. It is quiet until you mean it. */ .pssc-crm .m-shell .cta.danger{ background:#fff; color:var(--crm-danger); border:1.5px solid rgba(200,16,46,.45); } .pssc-crm .m-shell .cta.danger:hover, .pssc-crm .m-shell .cta.danger:focus-visible{ background:var(--crm-danger); border-color:var(--crm-danger); color:#fff; } /* --- the danger zone ----------------------------------------------------- Reversing a payment used to sit flush against saving a correction and emailing a receipt, three identical red bars in a stack. It now has a wall round it, so reaching it is a decision rather than an accident. */ .pssc-crm .m-shell .rowpanel form:has(.cta.danger), .pssc-crm .m-shell .panel-in form:has(.cta.danger){ margin-top:22px; padding:16px 16px 14px; border:1px solid rgba(200,16,46,.28); border-radius:12px; background:var(--crm-danger-soft); } .pssc-crm .m-shell form:has(.cta.danger)::before{ content:"Reversing this entry"; display:block; font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--crm-danger); margin-bottom:10px; } /* --- figures ------------------------------------------------------------ Every tile label was in alarm red, which left nothing louder to say with when a figure genuinely needed attention. */ .pssc-crm .m-shell .tile .k{ color:var(--crm-muted); letter-spacing:.1em } .pssc-crm .m-shell .tile.warn .k{ color:var(--crm-danger) } .pssc-crm .m-shell .tile.warn{ border-color:rgba(200,16,46,.3); background:var(--crm-danger-soft) } /* --- finding your way --------------------------------------------------- Six sections in six unrelated colours, with the selected one always purple, meant the colours could not be telling you where you were. Colour now says exactly one thing: you are here. */ .pssc-crm .m-shell .ctabs-sec, .pssc-crm .m-shell .ctab{ background:#fff; border:1px solid var(--crm-line); color:#33415c; min-height:44px; display:inline-flex; align-items:center; } .pssc-crm .m-shell .ctabs-sec:hover, .pssc-crm .m-shell .ctab:hover{ border-color:#c7d3e8; background:#f7f9fd } .pssc-crm .m-shell .ctabs-sec.on, .pssc-crm .m-shell .ctab.on{ background:var(--tint, var(--crm-primary)); border-color:var(--tint, var(--crm-primary)); color:#fff; font-weight:700; } /* every section keeps its colour: a dot on its chip, the full colour when open */ .pssc-crm .m-shell .ctabs-sec{ position:relative; padding-left:24px } .pssc-crm .m-shell .ctabs-sec::before{ content:""; position:absolute; left:11px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:var(--tint, var(--crm-line)); } .pssc-crm .m-shell .ctabs-sec.on::before{ background:#fff } /* the hub cards show which section a tool belongs to */ .pssc-crm .m-shell .qa{ border-left:3px solid var(--sec, transparent) } .pssc-crm .m-shell .ctabs-home{ min-height:44px; display:inline-flex; align-items:center } /* --- keyboard users can see where they are ------------------------------- */ .pssc-crm .m-shell a:focus-visible, .pssc-crm .m-shell button:focus-visible, .pssc-crm .m-shell input:focus-visible, .pssc-crm .m-shell select:focus-visible, .pssc-crm .m-shell textarea:focus-visible, .pssc-crm .m-shell summary:focus-visible{ outline:3px solid rgba(16,73,169,.45); outline-offset:2px; border-radius:8px; } /* --- a required field should say so before you submit -------------------- */ .pssc-crm .m-shell .req{ color:var(--crm-danger); font-weight:700 } .pssc-crm .m-shell input:required:invalid:not(:placeholder-shown){ border-color:rgba(200,16,46,.5); } /* --- wide tables on a narrow screen ------------------------------------- The table already scrolled sideways; nothing said so. */ .pssc-crm .m-shell .table-scroll{ position:relative } .pssc-crm .m-shell .table-scroll::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:26px; pointer-events:none; background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.95)); } /* --- touch ---------------------------------------------------------------- */ @media (max-width:620px){ .pssc-crm .m-shell .cta{ width:100%; } .pssc-crm .m-shell .form-actions .cta{ width:100% } /* the destructive one never sits under the thumb by default */ .pssc-crm .m-shell form:has(.cta.danger){ margin-top:28px } } /* --- the sticky furniture -------------------------------------------------- The section bar, the sidebar and the mobile topbar were all pinned 71 to 92 pixels down the screen, which is exactly the height of the public header that used to sit above them. With that header gone they were leaving a band of empty space, and anything scrolled to was landing underneath them. */ .pssc-crm{ --crm-sticky-top:12px } .pssc-crm .m-shell .ctabs{ top:var(--crm-sticky-top) } .pssc-crm .m-side{ top:16px } @media (max-width:1000px){ .pssc-crm{ --crm-sticky-top:60px } .pssc-crm .m-topbar{ top:0 } } /* Land clear of it when a link or a script scrolls somewhere. */ html:has(body.pssc-crm){ scroll-padding-top:210px } /* On a phone the bar was taking a third of the screen and following you down the page. The heading already says where you are. */ @media (max-width:620px){ .pssc-crm .m-shell .ctabs-note{ display:none } html:has(body.pssc-crm){ scroll-padding-top:150px } } /* The one remaining decorative red: the little MEMBERS AREA flag. */ .pssc-crm .m-shell .m-head .tag{ background:var(--crm-primary) } /* --- rows of figures ------------------------------------------------------ Fixed four-across columns left a fifth tile stranded on a row of its own, which reads as an afterthought rather than a figure of equal standing. The row now shares itself out among however many tiles there are, and folds down cleanly on a narrow screen without anybody choosing a breakpoint. */ .pssc-crm .m-shell .stat-grid, .pssc-crm .m-shell .tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px; } /* --- a quieter way of saying "take this off" ----------------------------- */ .pssc-crm .m-shell .linkbtn.danger{ color:var(--crm-danger) } .pssc-crm .m-shell .linkbtn.danger:hover{ text-decoration:underline } /* A ghost button is an outline, not a filled one. pssc-pro.css paints its words dark red for a white card, while the CRM's own rule fills the button navy - together that put red on navy, which nobody could read. This settles it: white card, navy words, quiet border. */ .pssc-crm .m-shell .cta.ghost{background:#fff;color:var(--crm-primary);border:1.5px solid #c7d3e6;box-shadow:none} .pssc-crm .m-shell .cta.ghost:hover{background:#f2f6fc;border-color:var(--crm-primary);color:var(--crm-primary)} /* The committee hub reads as one wall of cards unless each family of work is given its own colour. A bar above the heading, in the section's own tint, does that at a glance. */ .pssc-crm .m-shell .grp.tinted{position:relative;padding-top:16px;margin-top:28px} .pssc-crm .m-shell .grp.tinted::before{content:"";position:absolute;left:0;top:0;width:66px;height:5px;border-radius:99px;background:var(--tint,#475569)} .pssc-crm .m-shell .grp.tinted::after{content:"";position:absolute;left:76px;right:0;top:2px;height:1px;background:linear-gradient(to right,var(--tint,#cbd5e1),transparent);opacity:.5} .pssc-crm .m-shell .grp.tinted h2{margin:0 0 2px} .pssc-crm .m-shell .qa-grid{margin-top:10px} /* Sections roll up and down like a shutter, and stay how the committee left them. */ .pssc-crm .m-shell details.grp-fold{margin:0} .pssc-crm .m-shell details.grp-fold > summary{cursor:pointer;list-style:none;position:relative;padding-right:38px} .pssc-crm .m-shell details.grp-fold > summary::-webkit-details-marker{display:none} .pssc-crm .m-shell details.grp-fold > summary::marker{content:''} .pssc-crm .m-shell details.grp-fold > summary .fold-chev{position:absolute;right:6px;top:22px;width:11px;height:11px;border-right:2px solid var(--tint,#475569);border-bottom:2px solid var(--tint,#475569);transform:rotate(45deg);transition:transform .18s ease;opacity:.85} .pssc-crm .m-shell details.grp-fold[open] > summary .fold-chev{transform:rotate(-135deg)} .pssc-crm .m-shell details.grp-fold > summary:hover h2{text-decoration:underline;text-underline-offset:3px} .pssc-crm .m-shell details.grp-fold:not([open]) > summary{opacity:.82} /* ---- the committee hub, tidied ------------------------------------------ Two different things live on this page: doors that open a tool, and panels that do the work here. A card that only jumps down the page says so, so a panel and its card never read as two separate tools. */ .pssc-crm .m-shell .qa.qa-jump{position:relative} .pssc-crm .m-shell .qa.qa-jump::after{content:'on this page';position:absolute;right:12px;bottom:9px;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;font-weight:700} .pssc-crm .m-shell .qa.qa-jump:hover::after{color:var(--sec,#64748b)} /* smooth, unhurried movement between them */ html{scroll-behavior:smooth} .pssc-crm .m-shell [id]{scroll-margin-top:86px} /* the working panels sit apart from the launcher */ .pssc-crm .m-shell .m-card{border-radius:16px} .pssc-crm .m-shell .grp.tinted h2{letter-spacing:-.01em} .pssc-crm .m-shell .qa{transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease} .pssc-crm .m-shell .qa:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(15,23,42,.07)} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.pssc-crm .m-shell .qa:hover{transform:none}} /* =========================================================================== * FAMILY COLOURS THROUGH THE COMMITTEE PAGES * --------------------------------------------------------------------------- * The committee tools are grouped into seven families and each already has a * colour, but until now that colour appeared in only two places: the family * chip, and whichever tool tab you happened to be standing on. Everything else * was club blue, so a page gave you no clue which part of the club you were in * until you had read its heading. * * Carrying the colour into the second row of tabs, the page's own heading and * the buttons on it means the colour answers "where am I" before a word is * read. That is the entire point of having one. * * It all hangs off --tint, which m_page_start() sets on .m-shell for pages * that belong to a family. Pages that do not - a member's own account, their * certificates, the public site - carry no .fam class and stay club blue. * ======================================================================== */ /* --- the second row: every tab wears its family, not only the active one --- */ .pssc-crm .m-shell .ctab::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--tint, #5b6b86); margin-right:8px; vertical-align:1.5px; flex:0 0 auto; } .pssc-crm .m-shell .ctab.on::before{ background:#fff; opacity:.9 } /* --- the page you are standing on --- */ /* An inset bar rather than a border, so the card keeps its rounded corner. */ .pssc-crm .m-shell.fam .m-head{ box-shadow: inset 4px 0 0 var(--tint) } .pssc-crm .m-shell.fam .m-head .tag{ background:var(--tint); color:#fff; border-color:var(--tint) } .pssc-crm .m-shell.fam .section-head h2, .pssc-crm .m-shell.fam .section-head h3{ color:var(--tint) } /* --- what you press --- */ .pssc-crm .m-shell.fam .cta:not(.alt){ background:var(--tint); border-color:var(--tint); } .pssc-crm .m-shell.fam .cta:not(.alt):hover, .pssc-crm .m-shell.fam .cta:not(.alt):focus{ filter:brightness(.92) } .pssc-crm .m-shell.fam .cta.alt{ color:var(--tint); border-color:var(--tint) } /* Links inside the page body, but never the navigation chips, which carry their own state colours already. */ .pssc-crm .m-shell.fam .m-main a:not(.chip):not(.cta):not(.ctab):not(.ctabs-sec):not(.mini-btn), .pssc-crm .m-shell.fam .linkbtn{ color:var(--tint) } @media print{ .pssc-crm .m-shell.fam .m-head{ box-shadow:none } } /* =================================================================== crm refresh - the finish layer. Fixes the two chrome faults (the green strip through every page head; content bleeding past the sticky navigator) and carries the pager, filter and shutter styles that crm.js hangs off. Scoped to .pssc-crm throughout. =================================================================== */ /* the page head: the kicker pill stands alone - no strip through it */ .pssc-crm .m-head{ box-shadow:none !important; padding-left:0 } /* the tool navigator: pinned to the very top, always opaque, and it condenses to one row the moment you scroll so it never owns the screen */ .pssc-crm nav.ctabs{ position:sticky; top:0 !important; z-index:60; background:#f4f7fc; border-bottom:1px solid transparent; transition:box-shadow .2s ease, background .2s ease; } .pssc-crm nav.ctabs.is-stuck:not(.is-open){ padding-top:10px; padding-bottom:10px } .pssc-crm nav.ctabs.is-stuck{ background:rgba(255,255,255,.96); -webkit-backdrop-filter:saturate(160%) blur(10px); backdrop-filter:saturate(160%) blur(10px); border-bottom-color:#e4e9f2; box-shadow:0 8px 24px -18px rgba(13,35,80,.35); } .pssc-crm nav.ctabs .ctabs-tools, .pssc-crm nav.ctabs .ctabs-note{ overflow:hidden; max-height:400px; opacity:1; transition:max-height .28s ease, opacity .2s ease, margin .28s ease; } .pssc-crm nav.ctabs.is-stuck:not(.is-open) .ctabs-tools, .pssc-crm nav.ctabs.is-stuck:not(.is-open) .ctabs-note{ max-height:0; opacity:0; margin-top:0; margin-bottom:0; pointer-events:none; } .pssc-crm .crm-nav-open{ display:none } .pssc-crm nav.ctabs.is-stuck:not(.is-open) .crm-nav-open{ display:inline-flex; align-items:center; gap:6px; font:600 .78rem/1 inherit; font-family:inherit; color:#1049a9; background:#fff; border:1px solid #dce3ef; border-radius:999px; padding:7px 14px; cursor:pointer; margin:2px 0 6px; } .pssc-crm nav.ctabs.is-stuck:not(.is-open) .crm-nav-open::after{ content:'\2193'; font-size:.9em } /* pages and filtering - no list longer than ten */ .pssc-crm .crm-pager{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:14px 0 10px; } .pssc-crm .crm-pager-side{ display:flex; align-items:center; gap:8px; min-width:0 } .pssc-crm .crm-filter{ min-height:42px; min-width:min(320px, 72vw); border:1px solid #dce3ef; border-radius:10px; padding:8px 14px; font:inherit; font-size:.92rem; background:#fff; color:#0f1b33; } .pssc-crm .crm-filter:focus-visible{ outline:2px solid #1049a9; outline-offset:1px } .pssc-crm .crm-count{ font-size:.78rem; color:#5b6b86; font-variant-numeric:tabular-nums; white-space:nowrap; } .pssc-crm .crm-pg{ width:38px; height:38px; border-radius:10px; border:1px solid #dce3ef; background:#fff; color:#0d2350; font-size:1rem; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease; } .pssc-crm .crm-pg:hover:not(:disabled){ background:#eef2f9 } .pssc-crm .crm-pg:disabled{ opacity:.35; cursor:default } .pssc-crm .crm-pg:focus-visible{ outline:2px solid #1049a9; outline-offset:2px } /* shutters - any card can fold; crm.js and future pages use these */ .pssc-crm details.crm-shutter > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; } .pssc-crm details.crm-shutter > summary::-webkit-details-marker{ display:none } .pssc-crm details.crm-shutter > summary::after{ content:'\2304'; margin-left:auto; color:#5b6b86; transition:transform .2s ease; } .pssc-crm details.crm-shutter[open] > summary::after{ transform:rotate(180deg) } /* quiet, consistent chrome */ .pssc-crm{ overflow-x:clip } .pssc-crm img, .pssc-crm svg{ max-width:100% } .pssc-crm .mtable tbody tr:nth-child(even) td{ background:rgba(13,35,80,.025) } .pssc-crm :is(a,button,input,select,summary):focus-visible{ outline:2px solid #1049a9; outline-offset:2px; border-radius:4px; } @media (max-width:640px){ .pssc-crm .crm-filter{ width:100%; min-width:0; flex:1 } .pssc-crm .crm-pager{ gap:8px } } @media (prefers-reduced-motion:reduce){ .pssc-crm nav.ctabs, .pssc-crm nav.ctabs .ctabs-tools, .pssc-crm nav.ctabs .ctabs-note, .pssc-crm .crm-pg, .pssc-crm details.crm-shutter > summary::after{ transition:none } } /* ===== polish v144 ===== */ .pssc-crm h1,.pssc-crm h2,.pssc-crm h3{text-wrap:balance} .pssc-crm .m-card{transition:box-shadow .2s ease} .pssc-crm .m-card:hover{box-shadow:0 10px 26px rgba(15,26,60,.08)} .pssc-crm .btn,.pssc-crm button,.pssc-crm .mini-btn{transition:transform .15s ease,box-shadow .15s ease,filter .15s ease} .pssc-crm .btn:hover,.pssc-crm .mini-btn:hover{transform:translateY(-1px)} .pssc-crm .btn:active,.pssc-crm .mini-btn:active{transform:translateY(0);filter:brightness(.97)} .pssc-crm .mtable tbody tr{transition:background-color .12s ease} .pssc-crm .mtable tbody tr:hover{background:#eef3fc} .pssc-crm input:not([type=checkbox]):not([type=radio]):focus,.pssc-crm select:focus,.pssc-crm textarea:focus{border-color:#2456c9;box-shadow:0 0 0 3px rgba(36,86,201,.14);outline:none} .pssc-crm .tile{transition:transform .18s ease,box-shadow .18s ease} .pssc-crm .tile:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,26,60,.10)} .pssc-crm .crm-pg,.pssc-crm .crm-filter input{transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease} @media (prefers-reduced-motion:reduce){.pssc-crm .m-card,.pssc-crm .btn,.pssc-crm .mini-btn,.pssc-crm .tile{transition:none}} /* ===== calmer committee chrome - v148 ===== */ /* while you scroll, the tool navigator folds down to one slim bar */ .pssc-crm .ctabs-secs{max-height:480px;transition:max-height .25s ease,opacity .2s ease,margin .25s ease} .pssc-crm nav.ctabs.is-stuck:not(.is-open) .ctabs-secs{max-height:0;opacity:0;margin:0;padding:0;overflow:hidden;pointer-events:none} .pssc-crm nav.ctabs.is-stuck:not(.is-open){padding-top:8px;padding-bottom:8px} /* status badges never break into two lines */ .pssc-crm .ev-badge{white-space:nowrap} /* scroll anchoring fights the folding navigator - keep the scroll position literal */ .pssc-crm, .pssc-crm *{overflow-anchor:none} /* ============================================================ Committee tab row - one colour per tab (28 Aug 2026) ============================================================ */ body.pssc-crm .ctabs .ctab{ --tint:#15803d; transition:background-color .15s ease, border-color .15s ease, color .15s ease; } body.pssc-crm .ctabs .ctab[href*="events.php"] { --tint:#1d4ed8; } /* Events */ body.pssc-crm .ctabs .ctab[href*="volunteers.php"] { --tint:#0f766e; } /* Attendance sheet */ body.pssc-crm .ctabs .ctab[href*="jobtypes.php"] { --tint:#b45309; } /* Jobs we need doing */ body.pssc-crm .ctabs .ctab[href*="gplayers.php"] { --tint:#15803d; } /* Games desk */ body.pssc-crm .ctabs .ctab[href*="handouts.php"] { --tint:#6d28d9; } /* Event-day handouts */ body.pssc-crm .ctabs .ctab[href*="gcerts.php"] { --tint:#be185d; } /* Games certificates */ body.pssc-crm .ctabs .ctab[href*="kids.php"] { --tint:#0e7490; } /* Children's classes */ body.pssc-crm .ctabs .ctab[href*="athletics.php"] { --tint:#c2410c; } /* Children's athletics */ body.pssc-crm .ctabs .ctab[href*="duties.php"] { --tint:#4338ca; } /* Who is looking after what */ body.pssc-crm .ctabs .ctab[href*="tourn.php"] { --tint:#c8102e; } /* The Games */ body.pssc-crm .ctabs .ctab[href*="certs.php"]:not([href*="gcerts.php"]){ --tint:#475569; } /* Certificates issued */ body.pssc-crm .ctabs .ctab::before{ background:var(--tint); } body.pssc-crm .ctabs .ctab:hover, body.pssc-crm .ctabs .ctab:focus-visible{ background:#f6f8fc; background:color-mix(in srgb, var(--tint) 9%, #fff); border-color:#c9d3e4; border-color:color-mix(in srgb, var(--tint) 42%, #fff); color:var(--tint); } body.pssc-crm .ctabs .ctab:focus-visible{ outline:2px solid var(--tint); outline-offset:2px; } body.pssc-crm .ctabs .ctab.on, body.pssc-crm .ctabs .ctab[aria-current="page"]{ background:var(--tint); border-color:var(--tint); color:#fff; } body.pssc-crm .ctabs .ctab.on::before, body.pssc-crm .ctabs .ctab[aria-current="page"]::before{ background:#fff; } body.pssc-crm .ctabs .ctab .gd-n{ background:color-mix(in srgb, var(--tint) 14%, #fff); color:var(--tint); } body.pssc-crm .ctabs .ctab.on .gd-n{ background:#fff; color:var(--tint); } /* ============================================================ The page bar - one sticky strip on every members page ------------------------------------------------------------ The shell already prints .m-topbar with the page title for the phone layout; on a desktop it was hidden. Here it becomes the strip that stays put while the page scrolls, so the name of the tool you are in is always on screen. Because that strip now carries the title, the old .m-head block underneath it (the badge and the big heading) is only saying the same thing a third time, so it is hidden from view but left in the page for screen readers and for search. And with a strip that never moves, the tab row no longer has to stick and fold itself away. It sits still at the top of the page like an ordinary block, which is the end of the jumping, the half-faded tabs and the empty box that folding used to leave behind on a short page. None of this touches the phone layout. ============================================================ */ @media (min-width:1001px){ /* 1. the strip */ body.pssc-crm .m-col > .m-topbar{ display:flex !important; align-items:center; gap:12px; position:sticky; top:0; z-index:80; margin:-26px 0 18px; padding:12px 18px; background:#0d2350; border-radius:0 0 14px 14px; box-shadow:0 8px 20px -14px rgba(13,35,80,.6); } /* the sidebar is already on screen here, so the strip only needs the name */ body.pssc-crm .m-col > .m-topbar .m-burger, body.pssc-crm .m-col > .m-topbar .m-topbar-me, body.pssc-crm .m-col > .m-topbar .m-topbar-out{ display:none !important; } body.pssc-crm .m-col > .m-topbar .m-topbar-t{ font-weight:800; font-size:1.06rem; color:#fff; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 2. the old heading block, kept for screen readers only */ body.pssc-crm .m-col > .m-head{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* 3. the tab row stays where it is put */ body.pssc-crm .m-col > nav.ctabs, body.pssc-crm .m-col > nav.ctabs.is-stuck{ position:static !important; top:auto !important; background:#f4f7fc !important; box-shadow:none !important; } body.pssc-crm .m-col > nav.ctabs.is-stuck > .ctabs-secs, body.pssc-crm .m-col > nav.ctabs.is-stuck > .ctabs-tools, body.pssc-crm .m-col > nav.ctabs.is-stuck > .ctabs-note{ opacity:1 !important; height:auto !important; max-height:none !important; overflow:visible !important; visibility:visible !important; pointer-events:auto !important; transform:none !important; } body.pssc-crm .m-col > nav.ctabs .crm-nav-open{ display:none !important; } /* 4. jumping to an anchor should not land under the strip */ body.pssc-crm .m-col [id]{ scroll-margin-top:64px; } } @media print{ .pssc-crm .m-topbar{ display:none !important; } } /* ------------------------------------------------------------ The dashboard already greets you by name in its own box, and the sidebar card carries the name a second time, so the strip would be the third. On that one page the greeting box is the header, and the strip stands down. ------------------------------------------------------------ */ @media (min-width:1001px){ body.pssc-crm .m-col:has(> .px-hero) > .m-topbar, body.pssc-crm .m-col:has(> .dash-hero.is-pinned) > .m-topbar{ display:none !important; } /* and the greeting box itself stays put, so the dashboard always says who it is greeting */ body.pssc-crm .m-col > .px-hero, body.pssc-crm .m-col > .dash-hero.is-pinned{ position:sticky; top:0; z-index:75; margin-top:-26px; border-top-left-radius:0; border-top-right-radius:0; box-shadow:0 10px 24px -18px rgba(13,35,80,.55); } } /* ===== the club inbox page - v150: hero leads, six counters, then the tools ===== */ .pssc-crm .m-col:has(> form.eq-bar){display:flex; flex-direction:column} .pssc-crm .m-col:has(> form.eq-bar) > .m-topbar{order:-5} @media (min-width:1001px){ .pssc-crm .m-col:has(> form.eq-bar) > .m-topbar{display:none} } .pssc-crm .m-col:has(> form.eq-bar) > .dash-hero{order:-4; margin-top:0} .pssc-crm .m-col:has(> form.eq-bar) > .stat-grid{order:-3; grid-template-columns:repeat(6,minmax(0,1fr))} .pssc-crm .m-col:has(> form.eq-bar) > span[aria-hidden]{order:-2} .pssc-crm .m-col:has(> form.eq-bar) > nav.ctabs{order:-2} @media (max-width:1180px){ .pssc-crm .m-col:has(> form.eq-bar) > .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:640px){ .pssc-crm .m-col:has(> form.eq-bar) > .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:1000px){ .pssc-crm .m-col:has(> form.eq-bar) > nav.ctabs{top:53px !important} } /* Issue one certificate from the attendance sheet: a kind, and a button. */ .certone{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:7px} .certone select{font-size:.82rem;padding:5px 8px;border:1px solid #d7dfec;border-radius:9px; background:#fff;color:#0f1b33;max-width:210px} .certone .cta.sm{white-space:nowrap} /* --- how many are waiting behind a tab ----------------------------------- The queue on Committee tools already knows these numbers. Putting the same number on the tab means nobody has to open a page to discover it had nothing in it, and nothing new is counted anywhere else. */ .pssc-crm .m-shell .ctab-n{ display:inline-block; min-width:18px; height:18px; padding:0 5px; margin-left:7px; border-radius:9px; background:var(--tint, var(--crm-primary)); color:#fff; font-size:11px; line-height:18px; font-weight:700; text-align:center; } .pssc-crm .m-shell .ctabs-sec.on .ctab-n, .pssc-crm .m-shell .ctab.on .ctab-n{ background:#fff; color:var(--tint, var(--crm-primary)) } /* the same number on the tools menu, so a folded-up section still says whether there is anything inside it */ .pssc-crm .m-shell .grp-fold > summary .grp-n{ display:inline-block; min-width:20px; padding:0 6px; margin-left:8px; border-radius:10px; background:var(--tint, var(--crm-primary)); color:#fff; font-size:12px; line-height:20px; font-weight:700; text-align:center; vertical-align:2px; } /* ========================================================================= 2 Sep 2026 - the committee pages, audited on a desktop screen. Three things were wrong on nearly every page, and all three were the public site's styling leaking into a place it was never written for. ========================================================================= */ /* --- sub-headings inside a tool ------------------------------------------- .section-head belongs to the public site, where a 32px heading opens a whole section of a marketing page. Inside a committee tool it is the fourth or fifth heading on the screen, so it takes the size of a sub-heading and keeps the family colour as a bar down its left edge instead of as the text. */ .pssc-crm .m-shell .section-head{ margin:24px 0 10px } .pssc-crm .m-shell .section-head:first-child{ margin-top:0 } .pssc-crm .m-shell .section-head h2, .pssc-crm .m-shell .section-head h3{ font-size:1.15rem; line-height:1.3; letter-spacing:0; margin:0; color:#0d2350; padding-left:12px; border-left:4px solid var(--tint, var(--crm-primary)); display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .pssc-crm .m-shell .section-head h2 .pill{ font-size:.72rem; font-weight:700 } .pssc-crm .m-shell .section-head p{ margin:4px 0 0 16px; font-size:.93rem; color:#5b6b85 } /* --- tables: the name column is never the one to squeeze ------------------- Auto layout hands width to the column with the widest unbreakable content, and a cell that is allowed to break anywhere has none. So the identity column on the sign-ups page came out 78px wide with names broken mid-word and emails one character to a line, while an empty actions column took 190px. */ .pssc-crm .m-shell .mtable:not(.vtbl) td:first-child{ min-width:190px } .pssc-crm .m-shell .mtable td:first-child strong, .pssc-crm .m-shell .mtable td:first-child b{ white-space:nowrap } .pssc-crm .m-shell .mtable td:first-child .small, .pssc-crm .m-shell .mtable td:first-child .muted{ overflow-wrap:anywhere; word-break:normal } .pssc-crm .m-shell .mtable td.num, .pssc-crm .m-shell .mtable td .pill{ white-space:nowrap } .pssc-crm .m-shell .mtable td:last-child:empty{ width:1% } .pssc-crm .m-shell .mtable th, .pssc-crm .m-shell .mtable td{ padding:10px 12px; vertical-align:middle } /* three buttons stacked in a column made every account row three buttons tall */ .pssc-crm .m-shell .mtable td.pp-act{ min-width:0 !important } .pssc-crm .m-shell .mtable td.pp-act > div{ flex-direction:row !important; flex-wrap:wrap; gap:6px !important; align-items:center !important } /* the sign-ups page: actions sit in one row, the actions column hugs them */ .pssc-crm .m-shell .su-tbl td:last-child{ white-space:nowrap; width:1% } .pssc-crm .m-shell .su-acts{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center } .pssc-crm .m-shell .su-acts form{ display:inline; margin:0 } /* --- an empty section is one line, not a 150px card ------------------------ */ .pssc-crm .m-shell .empty-line{ display:flex; align-items:flex-start; gap:10px; padding:10px 14px; margin:0 0 16px; border:1px dashed var(--crm-line); border-radius:10px; background:#fff; color:#5b6b85; font-size:.93rem; line-height:1.45; } .pssc-crm .m-shell .empty-line .tick{ color:#15803d; font-weight:700; flex:none } /* pssc-pro.css forces white-space:normal !important on every cell inside .table-scroll so nothing overflows a phone. On a desktop that same rule broke PSSC-0009 at the hyphen, split dates over three lines and stacked every pill, which is most of why the account rows were 130px tall. Restore nowrap - desktop only - for the things that must not wrap. */ @media (min-width:900px){ body:has(main.m-shell) .table-scroll td.num, body:has(main.m-shell) .table-scroll td[style*="nowrap"], body:has(main.m-shell) .table-scroll td .pill, body:has(main.m-shell) .table-scroll td:first-child strong, body:has(main.m-shell) .table-scroll .su-tbl td:last-child, body:has(main.m-shell) .table-scroll td.tdv[style*="nowrap"], body:has(main.m-shell) .table-scroll .vtbl td:first-child{ white-space:nowrap !important } } /* the events table sits beside the calendar, so it is narrow. The title is the one column that must read; the date can take two lines, it already did. */ .pssc-crm .m-shell .ev-tw{ overflow-x:auto } .pssc-crm .m-shell .mtable td.ev-tbl-when.ev-tbl-when{ min-width:115px } .pssc-crm .m-shell .mtable td.ev-tbl-t{ min-width:160px } .pssc-crm .m-shell .mtable td.ev-tbl-do{ width:1%; white-space:nowrap } /* --- profile photographs --------------------------------------------------- */ .pssc-crm .avatar.has-photo{ background:#dfe6f2; overflow:hidden; padding:0 } .pssc-crm .avatar.has-photo img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block } .pssc-crm .avatar.big{ width:96px; height:96px; font-size:2rem; flex:none } .pssc-crm .avatar.pp{ width:32px; height:32px; font-size:.75rem; display:inline-flex; vertical-align:middle; margin-right:8px; flex:none } .pssc-crm .photo-card{ display:flex; gap:18px; align-items:center; flex-wrap:wrap } .pssc-crm .photo-card-t{ flex:1 1 260px; min-width:0 } .pssc-crm .photo-form{ display:flex; gap:10px; align-items:center; flex-wrap:wrap } .pssc-crm .photo-form .hint{ flex-basis:100%; margin-top:4px } .pssc-crm .photo-pick{ position:relative; overflow:hidden; cursor:pointer } .pssc-crm .photo-pick input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:0 } .pssc-crm .person-head{ display:flex; align-items:center; gap:14px }.pssc-crm .photo-form [hidden]{ display:none !important } /* ---- profile photo cropper (account.php) ---- */ .pssc-crm .crop-panel{display:flex;flex-wrap:wrap;gap:22px;margin:14px 0 4px;padding:16px;border:1px solid var(--line,#dfe3ea);border-radius:12px;background:#fff} .pssc-crm .crop-panel[hidden]{display:none!important} .pssc-crm .crop-stage{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%} .pssc-crm .crop-box{position:relative;width:min(300px,80vw);height:min(300px,80vw);overflow:hidden;border-radius:10px;background:#dfe6f2;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none} .pssc-crm .crop-box:active{cursor:grabbing} .pssc-crm #crop-img{position:absolute;top:0;left:0;max-width:none;max-height:none;transform-origin:0 0;user-select:none;-webkit-user-drag:none;pointer-events:none;display:block} .pssc-crm .crop-ring{position:absolute;inset:0;border-radius:10px;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 0,transparent calc(50% - 1px),rgba(15,23,42,.55) calc(50% + 1px))} .pssc-crm .crop-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.25)} .pssc-crm .crop-zoom{display:flex;align-items:center;gap:10px;width:min(300px,80vw);font-size:.85rem;color:var(--muted,#5b6472)} .pssc-crm .crop-zoom input[type=range]{flex:1;min-width:0;accent-color:var(--tint,#0d6b3f)} .pssc-crm .crop-hint{margin:0;text-align:center;max-width:300px} .pssc-crm .crop-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center} .pssc-crm .crop-spec{flex:1 1 260px;min-width:0} .pssc-crm .crop-spec h3{margin:0 0 8px;font-size:1rem} .pssc-crm .crop-spec ul{margin:0 0 10px;padding-left:18px;font-size:.92rem;line-height:1.45} .pssc-crm .crop-spec li{margin:0 0 6px} .pssc-crm .crop-spec .hint{margin:0} /* ---- polls: committee page ---- */ .pssc-crm .poll-facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0 0 16px;font-size:.93rem} .pssc-crm .poll-facts dt{color:var(--muted,#5b6472);font-weight:600;margin:0} .pssc-crm .poll-facts dd{margin:0} .pssc-crm .poll-bar{display:inline-block;vertical-align:middle;width:120px;height:8px;border-radius:4px;background:#e6ebf3;overflow:hidden;margin-right:6px} .pssc-crm .poll-bar i{display:block;height:100%;background:var(--tint,#0d6b3f);border-radius:4px} .pssc-crm .poll-more{margin-top:14px} .pssc-crm .poll-more summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none} .pssc-crm .poll-more summary::-webkit-details-marker{display:none} .pssc-crm .poll-more .panel-in{margin-top:10px} .pssc-crm .poll-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line,#e6eaf0)} .pssc-crm .chip.danger{color:#9b1c1c;border-color:#e7b4b4;background:#fff5f5} .pssc-crm .chip.danger:hover{background:#fde8e8} .pssc-crm .pill.ok{background:#e3f5ea;color:#0d6b3f} @media(max-width:560px){.pssc-crm .poll-facts{grid-template-columns:1fr;gap:2px 0}.pssc-crm .poll-facts dt{margin-top:8px}} /* ---- photograph viewer ---- */ .pssc-crm a.ph-zoom{cursor:zoom-in;text-decoration:none} .ph-lb{position:fixed;inset:0;z-index:9999;background:rgba(10,18,36,.82);display:flex;align-items:center;justify-content:center;padding:20px} .ph-lb-in{position:relative;background:#fff;border-radius:14px;padding:14px;max-width:min(92vw,560px);box-shadow:0 20px 60px rgba(0,0,0,.4);text-align:center} .ph-lb-in img{display:block;width:min(80vw,512px);height:auto;border-radius:10px;background:#dfe6f2} .ph-lb-n{margin-top:10px;font-weight:600;color:#0f1f3d} .ph-lb-x{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;border:0;background:#0f1f3d;color:#fff;font-size:22px;line-height:36px;cursor:pointer;padding:0} /* ---- person record: each section wears its group colour ---- */ .pssc-crm .m-shell .section-head.tone h2{border-left:4px solid var(--tint,#475569);color:var(--tint,#0f1f3d);background:color-mix(in srgb,var(--tint,#475569) 8%,#fff);padding:7px 12px;border-radius:0 8px 8px 0} .pssc-crm .m-shell .section-head.tone h2 .pill{background:var(--tint,#475569);color:#fff;border-color:transparent}