:root { --bg:#0b0d12; --card:#141720; --raise:#1b1f2a; --line:rgba(255,255,255,0.09); --line2:rgba(255,255,255,0.17); --t1:#f3f4f6; --t2:rgba(243,244,246,0.64); --t3:rgba(243,244,246,0.40); --go:#fff101; --ok:#3fa66a; --bad:#e04b4b; --warn:#e0a325; --font:'Archivo',-apple-system,'Segoe UI',system-ui,sans-serif; --display:'Saira Condensed','Arial Narrow',sans-serif; --side:236px; --tabs:62px; } * { box-sizing:border-box; margin:0; padding:0; } html { -webkit-text-size-adjust:100%; } /* SCROLLBARS, and they are part of the design rather than something the browser is allowed to decide. Windows Chromium draws its own: a 17px light-grey trough with arrow buttons at each end, which on a dark page is a bright strip down the sidebar and a grey plank under every horizontal strip. Reported as "why this scroll bar on desktop", twice, about two different scrollers -- which is what a default looks like when nobody has said otherwise. Thin, no buttons, no trough, and the thumb only as loud as a rule on this page: a scrollbar is there to say how much more there is, not to be looked at. It brightens on hover, because a scrollbar nobody can grab is the other failure. Firefox gets the two-value `scrollbar-*` properties; Chromium and Safari get the pseudos. */ * { scrollbar-width:thin; scrollbar-color:var(--line2) transparent; } ::-webkit-scrollbar { width:9px; height:9px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-corner { background:transparent; } ::-webkit-scrollbar-thumb { background:rgba(243,244,246,0.16); border-radius:99px; border:2px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover { background:rgba(243,244,246,0.30); background-clip:padding-box; border:2px solid transparent; } /* the buttons at the ends of a Windows scrollbar. `display:none` on the pseudo is the only way to be rid of them. */ ::-webkit-scrollbar-button { display:none; } body { background:var(--bg); color:var(--t1); font-family:var(--font); font-size:14px; line-height:1.45; min-height:100vh; } button, input, textarea, select { font:inherit; color:inherit; } a { color:inherit; } img { max-width:100%; } ::selection { background:rgba(255,241,1,0.35); } /* ---------- the frame: a sidebar on a laptop, a tab bar on a phone ---- */ .side { position:fixed; left:0; top:0; bottom:0; width:var(--side); background:var(--card); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:18px 14px 16px; overflow-y:auto; z-index:6; } /* the mark itself is in brand.WORDMARK_CSS, which the login page shares. This is only where the sidebar puts it. */ .brand { font-size:27px; padding:4px 8px 18px; color:var(--t1); } .who { display:flex; align-items:center; gap:10px; padding:10px 10px; border:1px solid var(--line); border-radius:12px; background:var(--bg); margin-bottom:10px; text-decoration:none; min-width:0; } .who img { width:26px; height:30px; object-fit:contain; flex:none; } .who .mark { width:26px; height:26px; border-radius:7px; flex:none; } .who b { display:block; font-size:13.5px; font-weight:700; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .who span { display:block; font-size:11px; color:var(--t3); margin-top:2px; } .who > div { min-width:0; } .newpost { display:flex; align-items:center; justify-content:center; gap:8px; background:var(--go); color:#111; font-weight:800; border-radius:10px; padding:11px 12px; text-decoration:none; font-size:14px; margin-bottom:12px; } .newpost:hover { background:#fff44d; } .newpost svg { width:16px; height:16px; stroke:#111; fill:none; stroke-width:2.6; stroke-linecap:round; } .nav { display:flex; flex-direction:column; flex:1; } .nav a { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px; text-decoration:none; color:var(--t2); font-size:13.5px; font-weight:500; } .nav a svg, .tabs svg, .sheet svg { width:17px; height:17px; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.85; } .nav a:hover { color:var(--t1); background:rgba(255,255,255,0.04); } .nav a.on { color:var(--t1); background:rgba(255,255,255,0.08); font-weight:700; } .nav a.on svg { opacity:1; } .nav .dot { width:9px; height:9px; border-radius:50%; flex:none; margin:0 4px; } .n { margin-left:auto; background:var(--go); color:#111; font-size:11px; font-weight:800; padding:2px 7px; border-radius:999px; min-width:20px; text-align:center; line-height:1.4; } .nav h6 { font-size:10.5px; letter-spacing:1.3px; text-transform:uppercase; color:var(--t3); font-weight:700; padding:16px 10px 6px; } .nav .grow { flex:1; min-height:12px; } .fine { color:var(--t3); font-size:11.5px; line-height:1.5; padding:12px 10px 0; } .top, .tabs, #more, #whichclub { display:none; } .main { margin-left:var(--side); min-height:100vh; } .wrap { max-width:960px; margin:0 auto; padding:30px 32px 60px; } @media (max-width:900px) { .side { display:none; } .main { margin-left:0; padding-bottom:calc(var(--tabs) + 16px); } .wrap { padding:18px 16px 40px; } /* OPAQUE. This bar was once rgba(0,0,0,0.25) and the page scrolled straight through it; a sticky bar has to be opaque or it is a window. */ .top { display:flex; position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--line); align-items:center; gap:10px; padding:0 16px; height:54px; } .top .brand { padding:0; font-size:22px; } .top .club { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; text-decoration:none; color:var(--t1); min-width:0; background:none; border:none; cursor:pointer; padding:6px 8px; margin-right:-8px; font-family:inherit; } .top .club img { width:20px; height:24px; object-fit:contain; } .top .club svg { width:15px; height:15px; stroke:var(--t3); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; } .top .club span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tabs { display:flex; position:fixed; left:0; right:0; bottom:0; height:calc(var(--tabs) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:var(--card); border-top:1px solid var(--line); z-index:6; } .tabs a, .tabs button { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; position:relative; text-decoration:none; color:var(--t3); font-size:10.5px; font-weight:600; background:none; border:none; cursor:pointer; } .tabs svg { width:22px; height:22px; } .tabs .on { color:var(--t1); } .tabs .on svg { opacity:1; } .tabs .n { position:absolute; top:7px; left:calc(50% + 6px); margin:0; font-size:10px; padding:1px 5px; min-width:17px; } .tabs .post { color:var(--t1); } .tabs .post .ic { width:46px; height:46px; border-radius:14px; background:var(--go); display:flex; align-items:center; justify-content:center; margin-top:-20px; box-shadow:0 8px 20px rgba(255,241,1,0.22); } .tabs .post .ic svg { stroke:#111; stroke-width:2.6; opacity:1; width:22px; height:22px; } #more, #whichclub { position:fixed; inset:0; z-index:40; background:rgba(6,7,10,0.62); } #more.on, #whichclub.on { display:block; } /* the switcher's rows carry a badge where More's carry an icon */ #whichclub .sheet img { width:22px; height:26px; object-fit:contain; flex:none; } #whichclub .sheet a.on { background:rgba(255,241,1,0.08); } #whichclub .sheet i { font-style:normal; font-weight:500; color:var(--t3); font-size:12.5px; margin-left:6px; } #whichclub .sheet h6 { font-size:10.5px; letter-spacing:1.3px; text-transform:uppercase; color:var(--t3); font-weight:700; padding:4px 10px 8px; margin:0; } /* A DEPLOYMENT WITH TWENTY CLUBS IS THE POINT OF THIS CONTROL. The sheet is pinned to the bottom of the screen, so without a limit the twentieth club is above the top of it and cannot be reached at all. */ #whichclub .sheet .scroll { max-height:56vh; overflow-y:auto; -webkit-overflow-scrolling:touch; } .sheet { position:absolute; left:0; right:0; bottom:0; background:var(--card); border-radius:18px 18px 0 0; border-top:1px solid var(--line2); padding:12px 12px calc(18px + env(safe-area-inset-bottom)); } .sheet .grab { width:36px; height:4px; border-radius:99px; background:var(--line2); margin:0 auto 10px; } .sheet a { display:flex; align-items:center; gap:12px; padding:13px 10px; border-radius:10px; text-decoration:none; color:var(--t1); font-size:15px; font-weight:600; } .sheet a svg { width:19px; height:19px; color:var(--t2); } .sheet a.on { background:rgba(255,255,255,0.07); } .sheet a .dot { width:9px; height:9px; border-radius:50%; flex:none; margin:0 5px; } .sheet .fine { padding:10px 10px 0; } } /* ---------- the words on every page ---------------------------------- */ .page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px; } .page-title { font-size:26px; font-weight:800; letter-spacing:-.3px; line-height:1.15; } .lede { color:var(--t2); font-size:14px; line-height:1.55; margin-top:6px; max-width:64ch; } .lede a { color:var(--go); } h2 { font-size:11.5px; letter-spacing:1.3px; text-transform:uppercase; color:var(--t3); font-weight:700; margin:30px 0 12px; } h2 i { text-transform:none; letter-spacing:0; font-style:normal; font-weight:500; } .eyebrow { color:var(--t3); font-size:11px; letter-spacing:1.2px; text-transform:uppercase; font-weight:700; margin-bottom:8px; } .hint { color:var(--t3); font-size:12.5px; line-height:1.5; } .hint a, .hint button.link { color:var(--go); } .err { color:var(--bad); font-size:13.5px; line-height:1.5; } .err:empty { display:none; } .warn { color:var(--warn); font-size:13px; line-height:1.5; } .empty { color:var(--t3); font-style:italic; padding:22px 0; font-size:14px; } code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; background:rgba(255,255,255,0.06); padding:1px 5px; border-radius:5px; } /* ---------- surfaces ------------------------------------------------- */ .card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:12px; } .card.hot { border-color:var(--bad); } .card.lit { border-color:var(--go); } .card.warned { border-color:var(--warn); } .row { display:flex; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px; flex-wrap:wrap; } .row.hot { border-color:var(--bad); } .lrow { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); font-size:13.5px; text-decoration:none; color:var(--t1); } .lrow > span:first-child { flex:1; min-width:0; } .lrow i { font-style:normal; color:var(--t3); } .lrow .sp { margin-left:auto; } .lrow.hot { color:var(--bad); } .capbox { background:rgba(0,0,0,0.28); border:1px dashed var(--line2); border-radius:10px; padding:12px 14px; font-size:13.5px; color:var(--t2); white-space:pre-wrap; line-height:1.55; } .thumbs .leave { display:inline-flex; flex-direction:column; gap:6px; flex:none; } .thumbs { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; } .thumbs img { height:150px; border-radius:9px; border:1px solid var(--line); flex:none; background:#000; } /* ---------- controls ------------------------------------------------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid transparent; border-radius:10px; padding:10px 18px; font-weight:700; font-size:14px; cursor:pointer; text-decoration:none; line-height:1.2; white-space:nowrap; background:rgba(255,255,255,0.08); color:var(--t1); } .btn:hover { background:rgba(255,255,255,0.12); } .btn.go { background:var(--go); color:#111; } .btn.go:hover { background:#fff44d; } .btn.ghost { background:transparent; border-color:var(--line2); } .btn.ghost:hover { background:rgba(255,255,255,0.05); } /* QUIET, NOT DISABLED. At --t3 on the faintest border Skip read as a button that could not be pressed; it is a lesser choice, not no choice */ .btn.quiet { background:transparent; color:var(--t2); border-color:var(--line2); } .btn.quiet:hover { color:var(--t1); background:transparent; } .btn.sm { padding:7px 13px; font-size:13px; border-radius:8px; } .btn.xs { padding:5px 10px; font-size:12px; border-radius:7px; } .btn.link { background:none; border:none; padding:0; color:var(--t2); text-decoration:underline; font-weight:500; } .btn.link:hover { color:var(--t1); } .btn:disabled { opacity:.45; cursor:default; } .btn.go:disabled { background:var(--line2); color:var(--t1); } .actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line2); background:transparent; color:var(--t1); border-radius:999px; padding:8px 15px; font-weight:600; font-size:13.5px; cursor:pointer; text-decoration:none; line-height:1.2; } .chip:hover { background:rgba(255,255,255,0.05); } .chip.on { background:var(--go); border-color:var(--go); color:#111; font-weight:700; } .chip.sm { padding:6px 12px; font-size:12.5px; } .chip:disabled { opacity:.4; cursor:default; } .chips { display:flex; gap:8px; flex-wrap:wrap; } .input { width:100%; background:rgba(0,0,0,0.32); color:var(--t1); border:1px solid var(--line2); border-radius:10px; padding:11px 13px; font-size:16px; outline:none; } .input:focus { border-color:rgba(255,241,1,0.6); box-shadow:0 0 0 3px rgba(255,241,1,0.12); } textarea.input { min-height:96px; resize:vertical; line-height:1.45; } input[type=range] { accent-color:var(--go); } /* A DATE FIELD ON A DARK PAGE IS A HIDDEN DATE FIELD. Chromium draws the calendar button in near-black, so on #0b0d12 the one thing that opens the picker is invisible, and the only way in is to type into three little segments -- on a phone, with a thumb. `color-scheme` makes the browser draw its own control for a dark page, which also gives us a dark calendar popover instead of a white flash. The icon is then brightened and given a real target, and `openPicker` below makes the whole field one. */ input[type=date] { color-scheme:dark; cursor:pointer; } input[type=date]::-webkit-calendar-picker-indicator { filter:invert(1) opacity(.62); cursor:pointer; padding:4px; margin-left:4px; } input[type=date]:hover::-webkit-calendar-picker-indicator { filter:invert(1) opacity(1); } /* the day, and the two the operator almost always wants */ .when-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .when-row .input { max-width:190px; } .label { display:flex; justify-content:space-between; color:var(--t2); font-size:12.5px; font-weight:600; margin-bottom:6px; } .label i { font-style:normal; font-weight:400; color:var(--t3); } .field { margin-bottom:14px; } .tot { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; } .pill { background:var(--card); border:1px solid var(--line); border-radius:999px; padding:6px 13px; font-size:12.5px; color:var(--t2); } .pill b { color:var(--t1); font-size:13.5px; } .pill.hot { border-color:var(--bad); } .tag { font-size:10.5px; letter-spacing:1.1px; text-transform:uppercase; font-weight:800; padding:4px 9px; border-radius:999px; flex:none; } .tag.draft { background:rgba(255,255,255,0.10); color:var(--t1); } .tag.ok { background:var(--go); color:#111; } .tag.warn { background:rgba(224,163,37,0.20); color:var(--warn); } .tag.bad { background:var(--bad); color:#fff; } .tag.muted { background:rgba(255,255,255,0.05); color:var(--t3); } a.plain { color:inherit; text-decoration:none; } /* THE NUMBERS. Set in the cards' display face, because a number that says "2 waiting for you" is the one thing on the home page the operator came to read and it should be readable from across a kitchen. */ .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:22px; } .stat { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px 13px; text-decoration:none; color:inherit; } .stat b { display:block; font-family:var(--display); font-weight:800; font-size:40px; line-height:1; letter-spacing:.3px; } .stat span { display:block; color:var(--t2); font-size:12.5px; margin-top:6px; } /* A card that lifts under the cursor is a card you can tap. `.flat` is the one that cannot, and it says so by being a panel rather than a card: no border, no hover, nothing to aim at. Only the "clubs" counter is flat now -- see the note by `stat()` about where the others go. */ a.stat:hover { border-color:var(--line2); background:var(--raise); } a.stat:hover span { color:var(--t1); } .stat.flat { background:transparent; border-style:dashed; } .stat.lit b { color:var(--go); } .stat.hot { border-color:var(--bad); } .stat.hot b { color:var(--bad); } .stat.zero b { color:var(--t3); } @media (max-width:560px) { .stats { grid-template-columns:repeat(3,1fr); gap:8px; } .stat { padding:12px 12px 11px; } .stat b { font-size:32px; } .stat span { font-size:11.5px; } } /* THE CLUB LIST IS AN ANCHOR. The home page's counters jump here when there is more than one club, and `.top` is 54px of sticky bar, so without this the first club card lands underneath it and the jump looks like it did nothing. */ #clubs { scroll-margin-top:70px; } .clubhead { display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .clubhead img { width:30px; height:34px; object-fit:contain; flex:none; } .clubhead b { font-size:18px; font-weight:800; display:block; line-height:1.2; } .clubhead span { color:var(--t2); font-size:13px; display:block; margin-top:3px; } .clubhead .tags { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; } /* A FOLDED GROUP OF CLUBS on Home. Quieter than a card on purpose: the row is a lid, and what a lid must not do is compete with the clubs above it for the eye. */ .fold { margin-top:14px; } .foldbar { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; color:var(--t1); cursor:pointer; border:1px dashed var(--line2); border-radius:12px; padding:13px 34px 13px 14px; font-family:inherit; position:relative; flex-wrap:wrap; } .foldbar:hover { border-color:var(--t3); } .fold.on .foldbar { border-style:solid; border-radius:12px 12px 0 0; border-bottom-color:transparent; } .foldbar .tw { min-width:0; flex:1; } .foldbar .tw b { display:block; font-weight:800; font-size:14.5px; } /* `> span` AND NOT `span`. The count chip is a span too, inside the , and `.foldbar .tw span` is a class-class-element selector which beats `.foldbar .ct` at two classes: the chip came out as a 308px grey block on its own line. Same trap as the league table's header row and the archive tile before it. */ .foldbar .tw > span { display:block; font-size:12.5px; margin-top:3px; color:var(--t2); } .foldbar .ct { display:inline-block; background:var(--line2); color:var(--t1); font-size:11.5px; font-weight:800; border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:1px; } /* THE CHEVRON IS PINNED, not a flex item. As a sibling it is the last thing on the row, so the moment the words or the tags wrapped it went with them and ended up alone at the bottom right of the bar, reading as a stray character rather than as the thing that opens the group. Pinned, it is in the same place at every width and the padding-right above is the room it needs. */ .foldbar .chev { color:var(--t3); font-size:12px; position:absolute; right:14px; top:50%; transform:translateY(-50%); } .foldin { border:1px solid var(--line2); border-top:none; border-radius:0 0 12px 12px; padding:4px 12px 12px; } .foldin > .card:first-child { margin-top:8px; } @media (max-width:560px) { /* the tags go under the words rather than squeezing the name */ .foldbar .tw { flex:1 1 100%; } .foldin { padding:4px 8px 10px; } } /* the ON/OFF switch on the Clubs screen, which owns the rule because it owns the control. CHROME is not an f-string -- it is nothing but braces -- so it is spliced rather than interpolated. */ .opt .sw { flex:none; width:42px; height:24px; border-radius:999px; background:var(--line2); position:relative; transition:background .15s; } .opt .sw i { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--t2); transition:left .15s, background .15s; } .opt .sw.on { background:var(--go); } .opt .sw.on i { left:21px; background:#111; } /* a row whose club is put away: the badge and the words go quiet, the switch does not, because the switch is the thing to aim at */ .clubrow.away img, .clubrow.away .tx { opacity:.45; } /* a picker tile: a picture and a name, the picture being the point */ /* ---- the queue at scale: a day heading and a closed row ---- A queue with a week on it is two dozen cards, each one a title, a strip of thumbnails, a caption and five buttons. These two are what the rest of it looks like: a heading per day, and one line per post that is not asking for anything. */ .qday { display:flex; align-items:center; gap:10px; margin:20px 0 8px; font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.10em; text-transform:uppercase; color:var(--t2); } .qday:first-child { margin-top:0; } .qday span { font-family:var(--font); font-size:11.5px; font-weight:800; letter-spacing:0; color:var(--t3); background:rgba(255,255,255,0.06); border-radius:99px; padding:1px 8px; } .qday.hot { color:var(--warn); } .qday.hot span { background:rgba(224,163,37,0.16); color:var(--warn); } .qrow { display:flex; align-items:center; gap:12px; cursor:pointer; background:var(--card); border:1.5px solid var(--line); border-radius:10px; padding:8px 12px; margin-bottom:8px; } .qrow:hover { border-color:var(--line2); } .qrow img, .qrow .none { width:40px; height:40px; flex:none; border-radius:6px; object-fit:cover; background:#000; } .qrow .none { background:rgba(255,255,255,0.05); } .qrow .said { min-width:0; flex:1; } .qrow .said b { display:block; font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .qrow .said span { display:block; font-size:11.5px; color:var(--t3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tiles { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); } /* FLEX COLUMN, AND IT IS NOT A STYLE CHOICE. Every screen builds a tile as a template literal, so the markup is `` and those newlines are text nodes. In a BLOCK button they can form a line box above the picture -- 8px of it -- and whether they do depends on the state of the image, so it happened on two tiles of four and not the other two, which read as "black line at the top of two of them making the rest out of alignment". Measured, not guessed: imgTop was 10, 2, 2, 10 down one row. In a flex container a run of whitespace between two elements generates no anonymous item at all, by specification, so this is the fix rather than trimming the newlines out of a dozen template literals and hoping nobody puts one back. */ .tile { text-align:left; padding:0; overflow:hidden; cursor:pointer; background:var(--card); border:2px solid var(--line); border-radius:12px; color:var(--t1); display:flex; flex-direction:column; width:100%; } .tile.on { border-color:var(--go); } .tile img, .tile .ph { display:block; width:100%; aspect-ratio:1; object-fit:cover; background:#000; flex:none; } .tile .tx { flex:1; } /* THE TILE BEFORE ITS PICTURE ARRIVES, and it has to look like a card rather than like a hole. The first call to the examples endpoint renders ten cards, which is a few seconds, and a club with no photographs never gets a picture for the photo layouts at all -- so this is not a flash, it is what the operator is looking at while they decide. It was an empty ``, which Chromium draws as its broken-image icon on a black square: reported as "can we have templates whilst the images load". A card-shaped skeleton in the club's own furniture, with the same header band and copy block every one of these layouts has, and a slow sweep across it so it reads as working rather than failed. */ .tile .ph { background:var(--raise); display:flex; flex-direction:column; justify-content:space-between; padding:0; position:relative; overflow:hidden; color:var(--t3); font-size:11.5px; } .tile .ph::before { content:""; display:block; height:22%; background:rgba(255,255,255,0.07); border-bottom:2px solid rgba(255,241,1,0.28); } .tile .ph::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 70%); background-size:250% 100%; animation:shim 1.5s ease-in-out infinite; } .tile .ph i { display:block; font-style:normal; margin:0 12% 26%; height:14%; border-radius:3px; background:rgba(255,255,255,0.10); box-shadow:0 26px 0 -4px rgba(255,255,255,0.06); } @keyframes shim { from { background-position:120% 0 } to { background-position:-40% 0 } } @media (prefers-reduced-motion: reduce) { .tile .ph::after { animation:none } } .tile .tx { padding:8px 10px 10px; } .tile .tx b { display:block; font-weight:800; font-size:13.5px; line-height:1.25; } .tile .tx span { display:block; font-size:11.5px; line-height:1.35; margin-top:3px; color:var(--t2); } .tile.on .tx { background:var(--go); color:#111; } .tile.on .tx span { color:rgba(0,0,0,.66); } /* Home's "Finish setting up": the one thing on a new club's card that is not an everyday action, so it is lit rather than another .opt row */ .setup-nudge { display:flex; align-items:center; gap:12px; margin-top:16px; padding:12px 14px; border-radius:12px; text-decoration:none; color:var(--t1); background:rgba(255,241,1,0.07); border:1px solid var(--go); } .setup-nudge > span:first-child { flex:1; min-width:0; } .setup-nudge b { display:block; font-weight:800; font-size:14.5px; } .setup-nudge span span { display:block; font-size:12.5px; color:var(--t2); margin-top:2px; } .setup-nudge .btn { flex:none; } /* an option laid out as a row: an icon or a word, a name, what it is for */ /* text-decoration:none because `.opt` is a