/* BetTurtle turtle theme — design tokens and shell. * * Loaded outside {% compress %} because COMPRESS_OFFLINE cannot enumerate a conditional * block. Everything is scoped to .tt-wrap.fc so it cannot reach the existing UI; the only * unscoped rules are the :root scale/size tokens, which no other stylesheet reads. * * The authority for these values is .claude/skills/turtle-ui-design/SKILL.md. */ :root{ --fc-scale:1.15; } :root[data-fc-size="compact"]{ --fc-scale:1; } :root[data-fc-size="large"]{ --fc-scale:1.32; } /* Tokens live on :root, not on the wrapper, so anything Bootstrap renders into -- popovers, tooltips -- inherits them too. Declaring a custom property costs nothing where it is never referenced, and only turtle selectors reference these. */ :root{ --fc-ink:#ffffff; --fc-ink-2:#e6f0e7; --fc-ink-3:#c0d3c4; /* Toned down from #b9dc4e (Kenny, 2 Sep): the accent is on 213 rules and read as glaring on the dark ground at 11.2:1, which is two and a half times what it needs. 9.2:1 here, and `--fc-accent-ink` on a filled one falls from 7.9 to 6.5. */ --fc-accent:#a5c93f; --fc-accent-ink:#0a3d1f; --fc-surface:rgba(0,0,0,.24); --fc-pop-bg:#0e3b21; --fc-band-bg:#0e3b21; /* elements whose colour is fixed against a dark ground need a light-mode pair */ --fc-tile-line:#eaf6ea; --fc-draw-line:#16351f; --fc-chip-bg:#0f5a2c; --fc-chip-ink:#ffffff; --fc-chip-line:#ffffff; --fc-warn:#ffd479; --fc-warn-line:rgba(255,212,121,.5); --fc-medal-1:#f2c75c; --fc-medal-2:#cfd6de; --fc-medal-3:#f0b98d; /* cell tints are derived from the good/fair/poor tokens, not the prototype's older pair */ /* Rating VALUES are small text on the chip ground, so they need their own pair per theme: the good/fair/poor tokens are tuned for large glyphs and fail AA here. */ /* val-r was #ffc9cc: 89% lightness at 6.66:1, bleached far past the 4.5 it needed, which read as pink beside the --fc-poor horseshoe red. 80% clears 4.75:1 on the worst ground (zebra over the lightest gradient stop) at the same hue 355. */ /* The tables inside a sheet -- Race statistics, Summary statistics -- colour their horseshoes through these, not through --fc-good/fair/poor. The amber was BRIGHTER than the green here too (.65 against .62), which is 1.05:1: one colour, in effect. The same orange as the row takes it to 1.47. */ --fc-val-g:#b0dc6b; --fc-val-a:#ff8c1a; --fc-val-r:#ff5347; --fc-move-out:#ff7f75; /* Small bold text on a saturated ground: accent-ink measures 3.89:1 on val-r. */ --fc-pill-ink:#10261a; /* A badge sits on its own tint, so it needs a step more contrast than a value on the bare row does. */ --fc-badge-g:#9ed62f; --fc-badge-a:#ffcd29; --fc-badge-r:#ffadb4; --fc-badge-bg-g:rgba(141,198,63,.16); --fc-badge-bg-a:rgba(242,197,49,.16); --fc-badge-bg-r:rgba(240,97,109,.16); --fc-cell-g:rgba(141,198,63,.16); --fc-cell-a:rgba(242,197,49,.16); --fc-cell-r:rgba(240,97,109,.18); /* Used by .tt-check; previously undefined, so both themes fell back to these dark values and light rendered pale lime on pale lime. */ --fc-check-bg:rgba(166,206,57,.16); --fc-check-ink:#cfe9a8; /* Darker than the page ground, not lighter (Kenny, 30 Aug 2026). It used to be a 5% white wash, which put panels ABOVE the gradient in luminance and left red text nowhere to read: a true red measured 2.8 there and the only way up was to lighten it into pink. At 28% black the same panels sit near #0f1c14, where a real red reads 5.5 and the body ink improves from 12.4 to about 15. */ --fc-surface-2:rgba(0,0,0,.28); --fc-line:rgba(255,255,255,.14); --fc-line-2:rgba(165,201,63,.34); --fc-head-bg:rgba(11,107,50,.45); --fc-thead:#0a4423; /* The performance key: star good, thumb-up moderate, thumb-down poor. They sit on a pale chip in a green head, so both themes use the values that read on white. */ --fc-perf-good:#a37a00; --fc-perf-mid:#127500; --fc-perf-poor:#d10011; /* A star is always yellow (Kenny, 31 Aug). Bright, because on a dark ground it can be: #ffd23f is 10.7:1 on the row and 8.7:1 on the drawer panel. */ --fc-star:#ffd23f; --fc-star-edge:none; /* Layer DARK surfaces with black, not white. A stripe on a row inside a sheet stacked two 7% whites to #3b5847, which is what forced val-r to a near-white pink to stay legible. */ --fc-zebra:rgba(0,0,0,.16); --fc-hover:rgba(185,220,78,.12); --fc-inset:rgba(0,0,0,.22); --fc-well:rgba(0,0,0,.28); --fc-hair:rgba(255,255,255,.16); /* gold vs crimson, kept far apart in hue and lightness */ /* A ladder, brightest to darkest: good, then fair, then poor. The amber used to be BRIGHTER than the green (.59 against .46), so the middling grade out-shone the good one and the two read as one colour -- 1.25:1 apart, which is hue alone (profiler, 1 Sep). Now 1.46 and 1.39 between neighbours, 2.03 end to end, all still clear of AA on the row ground (9.9, 6.8, 4.9). This is close to the ceiling: three inks that must each pass AA on one ground cannot be spread much further without one of them turning white. */ /* Toned from #a8e05f (Kenny, 2 Sep). 10.4:1 on the row, and the gap to the amber falls from 1.50 to 1.38 -- level with the amber-to-red gap this ladder already accepts, and clear of the 1.25 that read as hue alone. Any calmer means moving the amber and red too, and the red has the least room. */ --fc-good:#a0d854; --fc-fair:#ff8c1a; --fc-poor:#f0616d; /* the card's shoe palette follows the same separation */ --shoe-green:var(--fc-good); --shoe-amber:var(--fc-fair); --shoe-red:var(--fc-poor); /* hot is a positive signal, so it is not the poor-red */ --fc-hot:#ff9d80; --fc-cold:#9ac6e2; } /* Why the light inks did not move, 30 Aug 2026. Measured against the sheet (#f4f8f4): --fc-val-g at #127500 is 5.48; one step brighter (#0f8a00) is 4.21 and fails AA. The green and amber GLYPHS are the same story at the 3:1 non-text floor -- #00a828 reads 2.95 and #c08400 2.99. On a near-white ground, brighter and readable pull against each other, so what carries the colour in light mode is the AREA: the cell and badge tints go to .24-.26 where they were .16-.20 -- .24 is the ceiling for the badges, measured: at .28 the green and red inks fall to 4.42 and 4.36 and the card's WIN TIP and STRONG FAV badges failed. The cells sit behind ICONS, so they answer to the 3:1 non-text floor instead; .26 holds the red at 3.3 where .30 took it to 3.13. The DARK theme was measured and left alone. Brightening its inks reads fine against the card surface -- #ff7b87 is 6.91 there -- but those values also sit on the cell tints and on pale reused fragments, where the same change took eight items under AA (3.59 and 4.31) on Search Today's Runners and My Shortlisted Runners. Raising its tints instead did the same thing from the other side. A single-ground calculation says there is headroom; the audit across real pages says there is not, and the audit is the authority. */ :root:not([data-fc-theme="dark"]){ --fc-ink:#10261a; --fc-ink-2:#12241a; --fc-ink-3:#38513f; /* was #1c6b33 at 59% saturation. The accent is on every chip, tab, link and panel border; a dark low-chroma green recedes on a light ground where dark's lime advances. Full saturation, still 4.92:1. */ --fc-accent:#007521; --fc-accent-ink:#ffffff; --fc-surface:#ffffff; --fc-pop-bg:#ffffff; --fc-band-bg:#e8f2e9; --fc-tile-line:#0b4522; --fc-draw-line:#ffffff; --fc-chip-bg:#0f5a2c; --fc-chip-ink:#ffffff; --fc-chip-line:#0b4522; --fc-warn:#7a4a00; --fc-warn-line:rgba(122,74,0,.45); --fc-medal-1:#7a5c00; --fc-medal-2:#44505c; --fc-medal-3:#7a3c1a; /* Full saturation at the highest lightness that still clears 4.5:1. */ --fc-val-g:#127500; --fc-val-a:#946200; --fc-val-r:#d10011; --fc-move-out:#d10011; --fc-pill-ink:#ffffff; --fc-badge-g:#0f6600; --fc-badge-a:#755200; --fc-badge-r:#ad000e; --fc-badge-bg-g:rgba(28,107,51,.24); --fc-badge-bg-a:rgba(150,105,0,.24); --fc-badge-bg-r:rgba(176,32,44,.24); /* Tints were .13-.14 against dark's .16-.18, so the horseshoe grid lost its at-a-glance colour block on white. .20 is the most the glyph on top can carry and still clear 3.3:1 against its own tint. */ --fc-cell-g:rgba(28,107,51,.26); --fc-cell-a:rgba(216,160,23,.26); --fc-cell-r:rgba(176,32,44,.26); --fc-check-bg:rgba(28,107,51,.12); --fc-check-ink:#14512a; --fc-surface-2:#f4f8f4; /* Pale sage on near-white gave light no structure, where dark carries its accent hue into every border. Stronger, and line-2 picks the accent up. */ --fc-line:#bcd0c2; --fc-line-2:#5f9a72; --fc-head-bg:#e8f2e9; --fc-thead:#1c6b33; --fc-perf-good:#a37a00; --fc-perf-mid:#127500; --fc-perf-poor:#d10011; /* Light cannot have a bright yellow as a flat ink -- the brightest that clears 3:1 on white is a mustard, which is the dull one. So the fill stays yellow and the SHAPE carries the contrast: a hairline dark edge, which is what an icon is measured on. */ --fc-star:#f0b400; --fc-star-edge:0 0 1px rgba(58,38,0,.95), 0 0 2px rgba(58,38,0,.45); --fc-zebra:#e4ede6; --fc-hover:#dcecdf; --fc-inset:#eef4ef; --fc-well:#eef4ef; --fc-hair:#b7cdbe; /* The large horseshoe glyphs sat at 57-82% saturation inside a 27-39% lightness band, so green/amber/red differed by hue alone. Full saturation, each clearing 3.3:1. */ --fc-good:#008a20; /* Orange, not gold (Kenny, 1 Sep). Deeper as well as oranger: 4.95:1 on the sheet where the old gold was 4.14 and short of AA. */ --fc-fair:#946200; --fc-poor:#f5001a; --fc-hot:#9a3412; --fc-cold:#2a6f97; --shoe-green:var(--fc-good); --shoe-amber:var(--fc-fair); --shoe-red:var(--fc-poor); } :root:not([data-fc-theme="dark"]) .tt-wrap.fc{ background:linear-gradient(180deg,#f7faf7 0%,#eef4ef 60%,#e9f0ea 100%) !important; } /* ---- shell ---- */ .tt-wrap.fc{ background:linear-gradient(180deg,#1c3d2a 0%,#0d1f16 60%,#070f0a 100%); min-height:100vh; /* The wrap owns its inherited ink. Without this, every element the theme does not paint explicitly took `html[data-bs-theme="dark"] body`'s #E8E8E8 from the classic shell -- harmless while that value sits 3% from `--fc-ink-2`, and the same borrowed-ink dependency that painted a turtle popover with a colour chosen for a white ground (2 Sep 2026). */ color:var(--fc-ink-2); } /* The shell paints the ground and nothing else. * * It must NOT restyle text inside unmigrated bodies: those are Bootstrap/Hyper surfaces -- * white cards, white accordions -- and giving them the shell's light-on-dark ink makes them * unreadable. Found on the FAQs page in Phase 0. Text colour arrives with a migrated * component, never from the shell. * * Only elements that opt in with a .tt-* class take turtle ink. */ .tt-wrap.fc > .tt-viewbar a, .tt-wrap.fc .tt-ink{ color:var(--fc-accent); } .tt-wrap.fc .tt-h1,.tt-wrap.fc .tt-h2,.tt-wrap.fc .tt-h3,.tt-wrap.fc .tt-h4{ color:var(--fc-ink); font-family:Oswald,system-ui,sans-serif; font-weight:600; letter-spacing:.01em; } .tt-wrap.fc .tt-body{ color:var(--fc-ink-2); } /* dark-on-light renders visually thinner than light-on-dark */ :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-body, :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-h1, :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-h2, :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-h3, :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-h4{ font-weight:500; color:var(--fc-ink); } /* Dark-on-light renders visually thinner than light-on-dark, so light needs more weight -- the rule above already does that for prose. The coloured values, bands and badges are where "pop" is actually read, and they were left at the inherited weight. */ :root:not([data-fc-theme="dark"]) .tt-wrap.fc .v-g, :root:not([data-fc-theme="dark"]) .tt-wrap.fc .v-a, :root:not([data-fc-theme="dark"]) .tt-wrap.fc .v-r, :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-band-g, :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-band-a, :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-band-r, :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-tags .badge, :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-sheet .text-success, :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-sheet .text-warning, :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-sheet .text-danger{ font-weight:600; } /* ---- theme and text-size control ---- */ .tt-viewctl{ display:inline-flex; gap:3px; } .tt-seg{ min-width:32px; padding:5px 8px; line-height:1; background:var(--fc-inset); border:1px solid var(--fc-hair); color:var(--fc-ink-2); border-radius:4px; cursor:pointer; font-size:max(11px, calc(12px * var(--fc-scale))); } .tt-seg:hover{ border-color:var(--fc-accent); color:var(--fc-ink); } .tt-seg[aria-pressed="true"]{ background:var(--fc-accent); border-color:var(--fc-accent); color:var(--fc-accent-ink); font-weight:700; } .tt-viewbar{ display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:6px 0; } @media print{ .tt-viewbar{ display:none !important; } } /* ---- runner row ---- * Mobile-first: a stack at 360px, two columns from 768px, one row from 992px. Named grid * areas on every child, because a bare column count silently collides when a child is * conditionally absent. Structure mirrors /betturtle/preview/fullcard/. */ .tt-runner{ background:var(--fc-surface-2); border:1px solid var(--fc-hair); border-radius:6px; padding:8px 10px; margin-bottom:6px; } .tt-runner:nth-of-type(even){ background:var(--fc-zebra); } .tt-runner.is-won{ box-shadow:inset 4px 0 0 var(--fc-accent); } .tt-runner.is-top{ border-color:var(--fc-accent); box-shadow:0 0 0 2px var(--fc-line-2); } /* The horseshoes, the pick number and MORE share the last line on a phone rather than taking two (Kenny, 31 Aug). Six columns so `pick`, `pos` and `act` each keep a cell of their own while the shoes span the rest; the tiles shrink below to pay for it. */ .tt-r1{ display:grid; gap:8px 10px; align-items:center; grid-template-columns:44px 40px 1fr 30px 30px auto; grid-template-areas: "cloth silk name name name odds" "people people people people people people" "rates rates rates rates rates rates" "shoes shoes shoes pick pos act"; } /* The number sits INSIDE the tile so it tilts with it; the draw badge sits outside. */ .tt-cloth{ position:relative; width:44px; height:44px; flex:0 0 44px; } .tt-tile{ position:absolute; left:2px; top:2px; right:2px; bottom:2px; display:flex; align-items:center; justify-content:center; transform:rotate(-6deg); border-radius:5px; background:var(--fc-accent); color:var(--fc-accent-ink); border:2px solid var(--fc-tile-line); box-shadow:2px 3px 6px rgba(0,0,0,.45); } .tt-tile b{ font-weight:800; line-height:1; font-size:max(13px, calc(19px * var(--fc-scale))); } .tt-draw{ position:absolute; right:-6px; top:-6px; z-index:2; min-width:18px; height:18px; padding:0 4px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--fc-accent); color:var(--fc-accent-ink); border:2px solid var(--fc-draw-line); line-height:1; font-style:normal; font-size:max(10px, calc(10px * var(--fc-scale))); font-weight:700; } /* The BADGE keeps the accent whatever the record says (Kenny, 1 Sep). The colour lives in the tooltip instead: on the row, red already means a trainer is in form, and a red draw pill beside it would have meant the opposite thing an inch away. `is-g`/`is-a`/`is-r` stay on the element because the tooltip is drawn from it. */ .tt-silk-slot{ display:flex; width:38px; height:38px; align-items:center; justify-content:center; background:var(--fc-inset); border:1px solid var(--fc-hair); border-radius:3px; } /* No silk, no box: the slot held the row's alignment and drew an empty bordered square for every runner without an image. `:not(:has(img))` keeps the space and drops the frame. */ .tt-silk-slot:not(:has(img)){ border-color:transparent !important; background:none !important; } .tt-silk{ width:38px; height:38px; object-fit:contain; display:block; border-radius:3px; } .tt-name{ display:block; font-family:Oswald,system-ui,sans-serif; font-weight:600; color:var(--fc-ink) !important; text-decoration:none !important; line-height:1.1; font-size:max(14px, calc(17px * var(--fc-scale))); cursor:pointer; } .tt-name:hover{ color:var(--fc-accent) !important; } .tt-sub{ display:block; color:var(--fc-ink-3); font-family:var(--ct-font-monospace, monospace); letter-spacing:.04em; font-size:max(11px, calc(12px * var(--fc-scale))); } .tt-tags{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px; } .tt-tag{ border:1px solid var(--fc-line-2); border-radius:3px; padding:1px 6px; color:var(--fc-accent); text-transform:uppercase; letter-spacing:.04em; font-weight:600; font-size:max(10px, calc(10px * var(--fc-scale))); } .tt-tag-fit{ color:var(--fc-accent-ink); background:var(--fc-accent); border-color:var(--fc-accent); } .tt-tag-warn{ color:var(--fc-warn); border-color:var(--fc-warn-line); } .tt-people{ display:flex; flex-wrap:wrap; gap:2px 14px; color:var(--fc-ink-3); margin-top:6px; font-size:max(11px, calc(12.5px * var(--fc-scale))); } .tt-conn b{ color:var(--fc-ink-2); font-weight:500; } /* Wrap rather than cut. A trainer or jockey whose name does not fit its column was being sliced mid-word; a second line costs nothing here because the row is as tall as the horseshoes beside it either way. */ .tt-connline{ display:block; min-width:0; overflow-wrap:anywhere; } /* OR / FORM / SPEED. The value carries the colour; the rank is a superscript. */ /* Three equal columns at a fixed width: the chips were free-flowing, so OR/FORM/SPEED never lined up between rows. Narrower too, which is the other half of the ask. */ /* minmax(0,1fr), not 1fr: a bare 1fr is minmax(AUTO,1fr), so a wide SPEED value pushed its track past its share and the whole strip overflowed its grid column onto the horseshoes. */ .tt-rates{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px; align-items:stretch; margin-bottom:4px; width:100%; min-width:0; } /* The widest case is a three-figure SPEED carrying an improvement superscript -- "SPEED 104 11" needs 67px where an equal third of the strip gave 57. The value is the data and keeps its size; the label is a caption and gives up the letter-spacing and a little of its width, and the chip gives up two pixels of padding. `min-width:0` alone only stops the strip overflowing its grid column -- inside the track the text was still being cut. */ .tt-rate{ display:flex; align-items:baseline; justify-content:center; gap:2px; min-width:0; background:var(--fc-inset); border:1px solid transparent; border-radius:3px; padding:2px 2px; white-space:nowrap; cursor:pointer; color:var(--fc-ink); font-family:var(--ct-font-monospace, monospace); font-size:max(11px, calc(14px * var(--fc-scale))); } .tt-rate:hover{ border-color:var(--fc-accent); } .tt-rate span:not(.tt-ratefig){ color:var(--fc-ink-3); letter-spacing:0; font-size:max(9px, calc(8.5px * var(--fc-scale))); } .tt-rate sup{ color:var(--fc-accent); font-size:max(10px, calc(9px * var(--fc-scale))); } .tt-rate b{ font-weight:700; } .tt-wrap.fc .v-g{ color:var(--fc-val-g); } .tt-wrap.fc .v-a{ color:var(--fc-val-a); } .tt-wrap.fc .v-r{ color:var(--fc-val-r); } .tt-wrap.fc .v-n{ color:var(--fc-ink); } /* Trainer and jockey flags. Each carries its own word, never colour alone. */ .tt-flags{ display:inline-flex; flex-wrap:wrap; gap:4px; margin-left:6px; vertical-align:middle; } .tt-flag{ display:inline-flex; align-items:center; gap:3px; border-radius:3px; padding:0 5px; border:1px solid currentColor; text-transform:uppercase; letter-spacing:.03em; font-weight:600; font-size:max(10px, calc(9.5px * var(--fc-scale))); } .tt-flag em{ font-style:normal; } .tt-flag-hot{ color:var(--fc-hot); } .tt-flag-cold{ color:var(--fc-cold); } .tt-flag-mark{ color:var(--fc-accent); } .tt-r3{ margin-top:8px; } .tt-shoes{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px; } .tt-cellwrap{ text-align:center; background:none; border:0; padding:0; cursor:pointer; } .tt-cellwrap small{ display:block; margin-top:2px; color:var(--fc-ink-3); text-transform:uppercase; letter-spacing:.05em; font-size:max(10px, calc(9px * var(--fc-scale))); } .tt-cell{ display:flex; align-items:center; justify-content:center; position:relative; height:42px; border-radius:3px; background:var(--fc-inset); } .tt-cell.g{ background:var(--fc-cell-g); } .tt-cell.a{ background:var(--fc-cell-a); } .tt-cell.r{ background:var(--fc-cell-r); } .tt-cell.n{ background:var(--fc-inset); } .tt-cell i{ font-size:max(16px, calc(22px * var(--fc-scale))); filter:drop-shadow(1px 2px 2px rgba(0,0,0,.5)); } .tt-cell.g i{ color:var(--fc-good); } .tt-cell.a i{ color:var(--fc-fair); } .tt-cell.r i{ color:var(--fc-poor); } .tt-cell.n i{ color:var(--fc-ink-3); opacity:.35; } /* The letter stands in for the horseshoe, so it takes the horseshoe's size and the band's own ink. A 9px mark laid over a 22px glyph was the affordance without the legibility. */ .tt-letter{ font-weight:800; line-height:1; font-family:Oswald,system-ui,sans-serif; font-size:max(15px, calc(20px * var(--fc-scale))); } .tt-cell.g .tt-letter{ color:var(--fc-val-g); } .tt-cell.a .tt-letter{ color:var(--fc-val-a); } .tt-cell.r .tt-letter{ color:var(--fc-val-r); } .tt-cell.n .tt-letter{ color:var(--fc-ink-3); } .tt-odds{ display:inline-block; border:2px solid var(--fc-chip-line); border-radius:3px; background:var(--fc-chip-bg); color:var(--fc-chip-ink); padding:1px 9px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; font-size:max(12px, calc(15px * var(--fc-scale))); } /* Pick rank is a bare number in a box, as the prototype has it. */ .tt-pick{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; padding:1px 6px; border-radius:3px; border:2px solid var(--fc-hair); background:var(--fc-inset); color:var(--fc-ink); font-weight:700; font-variant-numeric:tabular-nums; font-size:max(12px, calc(14px * var(--fc-scale))); } .tt-place{ display:inline-flex; flex-direction:column; align-items:center; gap:1px; } .tt-rosette{ width:42px; height:42px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); } .tt-pos{ color:var(--fc-ink); letter-spacing:.01em; font-weight:600; font-size:max(12px, calc(13px * var(--fc-scale))); } .tt-place .tt-pos{ line-height:1; } /* `.tt-wrap.fc .tt-pos` carries three classes and these carried two, so NONE of the three placings had ever taken its colour -- the silver and bronze were dead on arrival too. */ .tt-wrap.fc .tt-place.is-1 .tt-pos{ color:var(--fc-first-ink); } .tt-wrap.fc .tt-place.is-2 .tt-pos{ color:var(--fc-medal-2); } .tt-wrap.fc .tt-place.is-3 .tt-pos{ color:var(--fc-medal-3); } .tt-actcell{ display:flex; align-items:center; justify-content:center; gap:6px; } .tt-heart .btn{ color:var(--fc-ink-3) !important; } .tt-heart:has(.fas) .btn{ color:var(--fc-poor) !important; } /* The bin, like the heart. Without this it keeps Hyper's #313a46 in both themes, which on the dark row ground is dark on dark. */ .tt-a-hide .btn{ color:var(--fc-ink-3) !important; } .tt-more{ background:transparent; border:0; color:var(--fc-accent); cursor:pointer; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:6px 0 0; font-size:max(11px, calc(12px * var(--fc-scale))); } @media (min-width:768px) and (max-width:991.98px){ .tt-r1{ grid-template-columns:46px 42px minmax(0,1fr) 118px 126px; grid-template-areas: "cloth silk name odds pos" "people people people people act" "rates rates rates rates act" "shoes shoes shoes shoes pick"; } } @media (min-width:992px){ .tt-runner{ border-radius:0; border-left:0; border-right:0; border-top:0; margin-bottom:0; } /* `rates` is a FIXED width of three equal columns, so OR/FORM/SPEED line up as columns down the whole card. Trainer and jockey sit to their left in `people`, which is where the reading eye expects the horse's connections. One row only above 1400px. The widest chip is a three-figure SPEED carrying an improvement superscript, and a strip wide enough for it does not fit beside everything else below that -- squeezing it clipped the figure, and widening it pushed the row past its own width. Under 1400 the strip takes a line of its own instead, which is the only arrangement where nothing is cut. */ .tt-r1{ grid-template-columns:46px 42px minmax(150px,1.3fr) minmax(150px,1fr) 290px 46px 118px 62px 86px; grid-template-areas: "cloth silk name people shoes pick odds pos act" "rates rates rates rates shoes pick odds pos act"; } .tt-rates{ margin-bottom:0; } } @media (min-width:1400px){ .tt-r1{ grid-template-columns:46px 42px minmax(170px,1.4fr) minmax(160px,1fr) minmax(212px,232px) 270px 46px 118px 62px 86px; grid-template-areas:"cloth silk name people rates shoes pick odds pos act"; } .tt-rates{ margin-bottom:4px; } .tt-people{ flex-direction:column; flex-wrap:nowrap; gap:2px; margin-top:0; } .tt-r3{ margin-top:0; } .tt-cellwrap small{ display:none; } /* Across, not down. Stacked, the heart, bin and menu made every row a line taller than its content needed -- eighteen runners paying for it. More wraps underneath. */ .tt-actcell{ flex-direction:row; flex-wrap:wrap; gap:2px 6px; } .tt-actcell .tt-more{ flex:0 0 100%; text-align:center; } } /* ---- race header ---- */ .tt-card{ padding:8px 0 24px; } .tt-head{ background:var(--fc-head-bg); border:2px solid var(--fc-hair); border-radius:6px; padding:12px 14px; margin-bottom:10px; } .tt-head .tt-h1{ margin:0; font-size:max(20px, calc(26px * var(--fc-scale))); } /* The race name and the control that folds everything under it. The arrow is on the left, so it reads as belonging to the whole block rather than to the last thing on the line. */ .tt-headline{ display:flex; align-items:center; gap:8px; } .tt-headtoggle{ appearance:none; cursor:pointer; flex:0 0 auto; line-height:1; background:transparent; border:1px solid var(--fc-hair); border-radius:4px; color:var(--fc-ink-2); padding:3px 7px; font-size:max(11px, calc(12px * var(--fc-scale))); } .tt-headtoggle:hover{ border-color:var(--fc-accent); color:var(--fc-ink); } .tt-headtoggle i{ display:block; transition:transform .12s ease; } .tt-headtoggle[aria-expanded="false"] i{ transform:rotate(-90deg); } .tt-head.is-shut .tt-headbody{ display:none; } /* The whole thing is on the printed page whatever the screen was doing. */ @media print{ .tt-headtoggle{ display:none; } .tt-head.is-shut .tt-headbody{ display:block; } } .tt-title{ margin:2px 0 8px; font-size:max(13px, calc(15px * var(--fc-scale))); } .tt-chips{ display:flex; flex-wrap:wrap; gap:6px; } .tt-chip{ border:2px solid var(--fc-hair); border-radius:4px; padding:2px 8px; background:var(--fc-inset); color:var(--fc-ink-2); font-weight:600; font-size:max(11px, calc(12px * var(--fc-scale))); } /* ---- drawer ---- */ .tt-drawer{ display:none; margin-top:10px; padding-top:10px; border-top:1px solid var(--fc-hair); } .tt-runner.is-open .tt-drawer{ display:block; } .tt-more{ background:transparent; border:0; cursor:pointer; color:var(--fc-accent); font-size:max(11px, calc(12px * var(--fc-scale))); padding:2px 4px; } .tt-more:hover{ text-decoration:underline; } .tt-dtabs{ display:flex; flex-wrap:wrap; gap:4px; margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--fc-hair); } .tt-dtab{ background:transparent; border:1px solid var(--fc-hair); border-radius:4px; color:var(--fc-ink-3); padding:4px 10px; cursor:pointer; font-family:Oswald,system-ui,sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:max(11px, calc(11.5px * var(--fc-scale))); } .tt-dtab:hover{ border-color:var(--fc-accent); color:var(--fc-ink); } .tt-dtab[aria-selected="true"]{ background:var(--fc-accent); border-color:var(--fc-accent); color:var(--fc-accent-ink); font-weight:700; } .tt-dpane[hidden]{ display:none; } .tt-why-row{ display:grid; grid-template-columns:38px 1fr; gap:10px; align-items:start; padding:6px 0; border-bottom:1px solid var(--fc-hair); } .tt-why-h{ margin:0 0 3px; color:var(--fc-accent); text-transform:uppercase; letter-spacing:.06em; font-family:Oswald,system-ui,sans-serif; font-size:max(11px, calc(12px * var(--fc-scale))); } .tt-why-p{ margin:0; line-height:1.55; font-size:max(12px, calc(13px * var(--fc-scale))); } .tt-sixline{ padding:3px 0; color:var(--fc-ink-2); font-size:max(11px, calc(12.5px * var(--fc-scale))); } .tt-sixline b{ color:var(--fc-ink-3); font-weight:600; margin-right:6px; } .tt-facts{ display:grid; grid-template-columns:auto 1fr; gap:3px 14px; margin:6px 0 0; font-size:max(11px, calc(12.5px * var(--fc-scale))); } .tt-facts dt{ color:var(--fc-ink-3); font-weight:500; } .tt-facts dd{ color:var(--fc-ink); font-weight:600; margin:0; font-variant-numeric:tabular-nums; } @media (min-width:700px){ .tt-facts{ grid-template-columns:auto minmax(70px,1fr) auto minmax(70px,1fr); column-gap:22px; } } /* Connections sit under the five factors in the Why tab, so they need a rule between them: one pane, two subjects. */ .tt-connections{ margin-top:12px; padding-top:10px; border-top:1px solid var(--fc-hair); } .tt-connections .tt-subnav{ margin-top:10px; } .tt-people{ display:grid; gap:8px; } @media (min-width:768px){ .tt-people{ grid-template-columns:1fr 1fr; } } .tt-person{ background:var(--fc-inset); border-radius:5px; padding:8px 10px; } .tt-person-head{ color:var(--fc-ink); font-size:max(12px, calc(13px * var(--fc-scale))); } .tt-person-head b{ color:var(--fc-accent); } .tt-flag{ display:inline-flex; align-items:center; gap:3px; margin-left:5px; border:1px solid currentColor; border-radius:3px; padding:0 4px; font-size:max(10px, calc(10.5px * var(--fc-scale))); font-weight:600; text-transform:uppercase; letter-spacing:.03em; } .tt-flag-hot{ color:var(--fc-hot); } .tt-flag-cold{ color:var(--fc-cold); } .tt-flag-mark{ color:var(--fc-accent); } /* Red in form, blue out of form: the pair the classic card has always used, white on both, so it reads the same in either theme -- 6.9:1 and 5.5:1. Read by `.tt-connname` and `.tt-hcname`. */ :root{ --fc-hc-hot-bg:#b0202c; --fc-hc-cold-bg:#2a6f97; --fc-hc-ink:#ffffff; } .tt-comment{ margin:8px 0 0; line-height:1.55; font-size:max(12px, calc(13px * var(--fc-scale))); } .tt-statnote{ color:var(--fc-ink-3); margin:4px 0 0; font-size:max(11px, calc(11.5px * var(--fc-scale))); } /* ---- stat packs ---- */ .tt-subnav{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:10px; } .tt-subbtn{ display:inline-flex; align-items:center; gap:5px; background:var(--fc-inset); border:1px solid var(--fc-hair); border-radius:4px; color:var(--fc-ink-2); padding:4px 9px; cursor:pointer; font-size:max(11px, calc(11.5px * var(--fc-scale))); } .tt-subbtn i{ color:var(--fc-ink-3); } .tt-subbtn:hover:not(:disabled){ border-color:var(--fc-accent); color:var(--fc-ink); } /* Disabled says "nothing recorded for this runner", so it still has to be readable: .35 opacity measured 2.8:1. The dashed border and the cursor carry the state instead. */ .tt-subbtn:disabled{ opacity:1; color:var(--fc-ink-3); border-style:dashed; cursor:default; } .tt-subbtn:disabled i{ color:var(--fc-ink-3); } .tt-subbtn.is-lit{ background:var(--fc-accent); border-color:var(--fc-accent); color:var(--fc-accent-ink); font-weight:600; } .tt-subbtn.is-lit i{ color:var(--fc-accent-ink); } .tt-statpack{ display:none; background:var(--fc-surface); border-left:3px solid var(--fc-accent); border-radius:0 5px 5px 0; padding:8px 12px; } .tt-statpack.is-open{ display:block; } /* The VALUE inks, not the glyph ones. --fc-good/fair/poor are tuned for the large horseshoe and fail AA as ~14px text; --fc-val-* exist for exactly this size and are tuned per theme. */ .tt-band{ font-variant-numeric:tabular-nums; } .tt-band-g{ color:var(--fc-val-g); } .tt-band-a{ color:var(--fc-val-a); } .tt-band-r{ color:var(--fc-val-r); } .qs-off-stat_colour .tt-band{ color:var(--fc-ink) !important; } /* ---- charts ---- */ .tt-chart{ margin:0 0 10px; } .tt-chart figcaption{ color:var(--fc-ink-3); margin-bottom:4px; font-size:max(11px, calc(11px * var(--fc-scale))); } .tt-chart svg{ display:block; overflow:visible; } .tt-chart-line{ fill:none; stroke-width:1.6; opacity:.85; vector-effect:non-scaling-stroke; stroke-linejoin:round; } .tt-chart-dot{ vector-effect:non-scaling-stroke; } .tt-chart-win{ fill:none; stroke:var(--fc-ink); stroke-width:1.6; vector-effect:non-scaling-stroke; } .tt-chart-key{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:5px; color:var(--fc-ink-3); font-size:max(10px, calc(11px * var(--fc-scale))); } .tt-chart-key i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:4px; } .tt-chart-key b{ color:var(--fc-ink-2); } @media print{ .tt-dtabs, .tt-subnav, .tt-more{ display:none !important; } .tt-drawer, .tt-dpane, .tt-statpack{ display:block !important; } } /* ---- race brief ---- */ .tt-briefbar{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; } .tt-brief-chip{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; background:var(--fc-surface); border:1px solid var(--fc-line-2); border-radius:6px; padding:7px 12px; color:var(--fc-ink-2); font-family:Oswald,system-ui,sans-serif; text-transform:uppercase; letter-spacing:.04em; font-size:max(11px, calc(12.5px * var(--fc-scale))); } .tt-brief-chip i{ color:var(--fc-accent); } .tt-brief-chip em{ font-style:normal; text-transform:none; letter-spacing:0; color:var(--fc-ink-3); font-size:max(10px, calc(11px * var(--fc-scale))); } .tt-brief-chip:hover{ border-color:var(--fc-accent); color:var(--fc-ink); } .tt-brief-chip[aria-expanded="true"]{ background:var(--fc-accent); border-color:var(--fc-accent); color:var(--fc-accent-ink); font-weight:700; } .tt-brief-chip[aria-expanded="true"] i, .tt-brief-chip[aria-expanded="true"] em{ color:var(--fc-accent-ink); } .tt-brief [data-tt-briefpane]{ display:none; } .tt-brief [data-tt-briefpane].is-open{ display:block; } .tt-panel{ background:var(--fc-surface); border-left:4px solid var(--fc-accent); border-radius:0 6px 6px 0; padding:12px 14px; margin-bottom:10px; } .tt-panel-h{ display:flex; align-items:center; gap:7px; margin:0 0 8px; color:var(--fc-accent); text-transform:uppercase; letter-spacing:.05em; font-family:Oswald,system-ui,sans-serif; font-size:max(12px, calc(15px * var(--fc-scale))); } .tt-verdict{ border-top:1px solid var(--fc-hair); padding-top:8px; margin-top:8px; } .tt-notes{ display:grid; gap:5px; margin-top:8px; } .tt-note{ color:var(--fc-ink-2); font-size:max(11px, calc(12.5px * var(--fc-scale))); } .tt-note b{ color:var(--fc-accent); font-weight:600; } .tt-rp-grid{ display:grid; gap:8px; grid-template-columns:1fr; margin:8px 0; } @media (min-width:640px){ .tt-rp-grid{ grid-template-columns:repeat(3,1fr); } } .tt-rp-stat{ background:var(--fc-inset); border-radius:5px; padding:8px 10px; } .tt-rp-stat b{ display:block; color:var(--fc-ink); font-family:Oswald,system-ui,sans-serif; font-size:max(16px, calc(20px * var(--fc-scale))); } .tt-rp-stat span{ color:var(--fc-ink-3); text-transform:uppercase; letter-spacing:.05em; font-size:max(10px, calc(10.5px * var(--fc-scale))); } /* Settings as a grid of options rather than a wrapped line of checkboxes. Crispy emits `.row > .col-auto > .mb-3 > .form-check`, so the grid goes on the row and each option becomes a card: tick, name, and the help text that was already there but read as a footnote to whatever sat beside it. Scoped to the two places settings are rendered, not to `.tt-sheet`, so no other reused Bootstrap form is restyled by accident. */ .tt-wrap.fc .tt-quicksettings .accordion-body .row, .tt-wrap.fc .tt-settings .accordion-body .row, .tt-wrap.fc .tt-quicksettings .accordion-body, .tt-wrap.fc .tt-settings .accordion-body{ display:grid; gap:6px; margin:0; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); } /* Crispy emits several Rows per section. Dissolving them lets every option in a section flow into ONE grid, instead of each Row being its own and leaving a section ragged. */ .tt-wrap.fc .tt-quicksettings .accordion-body > .row, .tt-wrap.fc .tt-settings .accordion-body > .row{ display:contents; } /* Flex the whole way down so every card fills its cell: without it a two-line help text makes one card taller than the row and the grid reads as ragged. */ .tt-wrap.fc .tt-quicksettings .accordion-body .row > [class*="col"], .tt-wrap.fc .tt-settings .accordion-body .row > [class*="col"]{ width:auto; max-width:none; padding:0; display:flex; } .tt-wrap.fc .tt-quicksettings .accordion-body .row .mb-3, .tt-wrap.fc .tt-settings .accordion-body .row .mb-3{ margin-bottom:0 !important; display:flex; flex:1; } .tt-wrap.fc .tt-quicksettings .form-check, .tt-wrap.fc .tt-settings .form-check{ display:grid; grid-template-columns:auto 1fr; gap:2px 9px; align-content:start; align-items:baseline; flex:1; padding:8px 10px; margin:0; background:var(--fc-inset); border:1px solid var(--fc-hair); border-radius:5px; } .tt-wrap.fc .tt-quicksettings .form-check:hover, .tt-wrap.fc .tt-settings .form-check:hover{ background:var(--fc-hover); } /* The box is there at rest in BOTH themes -- an unticked option on the dark ground had only a 5%-white tint to show for itself and read as having no box at all. Ticked brightens it. */ .tt-wrap.fc .tt-quicksettings .form-check:has(:checked), .tt-wrap.fc .tt-settings .form-check:has(:checked){ border-color:var(--fc-line-2); } .tt-wrap.fc .tt-quicksettings .form-check .form-check-input, .tt-wrap.fc .tt-settings .form-check .form-check-input{ margin:0; float:none; } .tt-wrap.fc .tt-quicksettings .form-check-label, .tt-wrap.fc .tt-settings .form-check-label{ color:var(--fc-ink); font-weight:600; cursor:pointer; font-size:max(12px, calc(13px * var(--fc-scale))); } /* The help text sits under the name, in the name's column -- not under the tick. */ .tt-wrap.fc .tt-quicksettings .form-check .form-text, .tt-wrap.fc .tt-settings .form-check .form-text{ grid-column:2; margin:2px 0 0; color:var(--fc-ink-3); font-size:max(11px, calc(11.5px * var(--fc-scale))); line-height:1.4; } /* A toolbar item that states a fact rather than offering an action. */ .tt-wrap.fc .tt-tool.is-inert{ cursor:default; color:var(--fc-ink-3); border-style:dashed; background:transparent; } .tt-wrap.fc .tt-tool.is-inert:hover{ background:transparent; border-color:var(--fc-hair); } /* View modes. Cards rather than a select, because each one has to say what it will switch off before the customer presses it. */ .tt-wrap.fc .tt-viewmodes{ margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--fc-hair); } .tt-wrap.fc .tt-modegrid, .tt-wrap.fc .tt-settings .tt-modegrid{ display:grid; gap:6px; margin-top:8px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); } .tt-wrap.fc .tt-mode{ display:flex; flex-direction:column; gap:3px; text-align:left; background:var(--fc-inset); border:1px solid var(--fc-hair); border-radius:5px; padding:9px 11px; cursor:pointer; color:var(--fc-ink-2); font-size:max(12px, calc(12.5px * var(--fc-scale))); } .tt-wrap.fc .tt-mode:hover{ background:var(--fc-hover); border-color:var(--fc-accent); } /* Where the customer is now. Marked by a border and a word, never colour alone. */ .tt-wrap.fc .tt-mode.is-current{ border-color:var(--fc-accent); background:var(--fc-hover); } /* The accent on the is-current ground is 4.46:1 at 12.65px -- under the floor. The border and the tinted background already say which mode this is; the text does not have to. */ .tt-wrap.fc .tt-mode.is-current em{ color:var(--fc-ink); font-weight:600; } .tt-wrap.fc .tt-modenow{ margin-top:6px; } .tt-wrap.fc .tt-mode b{ color:var(--fc-ink); font-size:max(12px, calc(13px * var(--fc-scale))); } /* ink-3 is the faintest of the three and measured 4.46:1 here in dark -- under the floor by four hundredths, at 12.7px and semibold, which is small enough that it has to clear it. */ .tt-wrap.fc .tt-mode em{ color:var(--fc-ink-2); font-style:normal; font-size:max(10px, calc(11px * var(--fc-scale))); } /* Filter chips above the run-by-run tables. Reuses the stat-pack sub-nav so it reads as the same kind of control, with the count of what is left beside it. */ .tt-wrap.fc .tt-formfilter{ margin:10px 0 6px; align-items:center; } .tt-wrap.fc .tt-formfilter-count{ margin-left:4px; white-space:nowrap; } /* The customer's own comment on a horse. The label follows the tag's own icon state -- a solid message means one is already written -- exactly as the heart and bin labels do. */ .tt-wrap.fc .tt-a-comment .fa-message{ color:var(--fc-ink-3); } /* Test the MESSAGE icon, not any solid glyph in the subtree: the panel's own close button is a fa-solid xmark, so a bare :has(.fa-solid) matched it the moment the panel opened -- both halves of the label hid and the icon sat there unnamed. */ .tt-wrap.fc .tt-a-comment:has(.fa-message.fa-solid) .fa-message{ color:var(--fc-accent); } .tt-wrap.fc .tt-a-comment:has(.fa-message.fa-solid) .tt-off, .tt-wrap.fc .tt-a-comment:has(.fa-message.fa-regular) .tt-on{ display:none; } /* The tag's own collapse panel is written for a white card in a Bootstrap column: a giant white slab with a Bootstrap-primary Submit. It opens on its own line under the actions, at a readable width, with the controls carrying the theme's own tokens. flex-wrap belongs on the CONTAINER. Setting it on the item -- which is what this did first -- wraps that item's own children and leaves the panel squeezed alongside the buttons, which is exactly how it shipped. */ .tt-wrap.fc .tt-commentacts{ flex-wrap:wrap; } /* `display:contents` when open, so the span's children become items of the actions row itself: the icon and its label stay exactly where they were and only the panel wraps. Making the SPAN full-width instead -- which is what this did first -- moved the button down a line the moment it was pressed, which is a control running away from the cursor. The span's own styling has to be re-applied to the children, since it no longer has a box. */ .tt-wrap.fc .tt-a-comment:has(.collapse.show){ display:contents; } .tt-wrap.fc .tt-a-comment:has(.collapse.show) > a, .tt-wrap.fc .tt-a-comment:has(.collapse.show) > .tt-actlbl{ color:var(--fc-ink-3); font-size:max(11px, calc(12.5px * var(--fc-scale))); } .tt-wrap.fc .tt-a-comment .collapse{ flex:1 0 100%; width:100%; order:2; } /* The tag emits the icon, then the panel, then our label -- so once the span wraps, the label lands UNDER the panel, away from the icon it names. Visual order only; the DOM order is the shared template's and stays as it is. */ .tt-wrap.fc .tt-a-comment .tt-actlbl{ order:1; } .tt-wrap.fc .tt-a-comment .card{ background:var(--fc-inset) !important; border:1px solid var(--fc-hair) !important; border-radius:8px; margin-top:8px; box-shadow:none !important; max-width:560px; } .tt-wrap.fc .tt-a-comment .card-body{ padding:10px 12px; position:relative; } .tt-wrap.fc .tt-a-comment .card-title{ color:var(--fc-ink) !important; margin:0 0 8px; font-size:max(12px, calc(13px * var(--fc-scale))); font-weight:600; } /* The controls. Crispy renders `form-control` and `btn btn-primary`, both written for a white page -- on this ground that is a white slab and an indigo button. */ /* The field needs its own token, because neither existing one works in both themes: in dark --fc-surface is rgba(0,0,0,.24) against a .22 card, two per cent apart, so the input reads as a bordered gap; in light --fc-well and --fc-inset are the SAME colour, so the input disappears into the card. Declared dark-first like the rest of this file, with the light value in the :not([data-fc-theme="dark"]) override. */ .tt-wrap.fc .tt-a-comment{ --tt-field:var(--fc-well); } :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-a-comment{ --tt-field:var(--fc-surface); } .tt-wrap.fc .tt-a-comment textarea.form-control{ width:100%; height:104px; resize:vertical; background:var(--tt-field) !important; color:var(--fc-ink) !important; border:1px solid var(--fc-line) !important; border-radius:6px; padding:8px 10px; font-size:max(12px, calc(13px * var(--fc-scale))); line-height:1.5; box-shadow:none !important; } .tt-wrap.fc .tt-a-comment textarea.form-control::placeholder{ color:var(--fc-ink-3); } .tt-wrap.fc .tt-a-comment textarea.form-control:focus{ border-color:var(--fc-accent) !important; outline:2px solid color-mix(in srgb, var(--fc-accent) 40%, transparent); outline-offset:1px; } .tt-wrap.fc .tt-a-comment .btn{ border-radius:6px; padding:6px 14px; box-shadow:none; font-size:max(11px, calc(12.5px * var(--fc-scale))); font-weight:600; } .tt-wrap.fc .tt-a-comment .btn-primary{ background:var(--fc-accent) !important; border-color:var(--fc-accent) !important; color:var(--fc-accent-ink) !important; } .tt-wrap.fc .tt-a-comment .btn-danger{ background:transparent !important; border-color:var(--fc-line) !important; color:var(--fc-val-r) !important; } .tt-wrap.fc .tt-a-comment .btn + .btn{ margin-left:8px; } .tt-wrap.fc .tt-a-comment .messages{ margin-top:8px; color:var(--fc-ink-2); font-size:max(11px, calc(12px * var(--fc-scale))); } /* Beside the heading, not off at the far edge of a full-width panel. */ .tt-wrap.fc .tt-commentclose{ position:absolute; top:8px; right:10px; z-index:1; border:1px solid var(--fc-hair); background:var(--fc-surface); cursor:pointer; color:var(--fc-ink-2); border-radius:6px; line-height:1; padding:4px 7px; font-size:max(11px, calc(12px * var(--fc-scale))); } .tt-wrap.fc .tt-commentclose:hover{ color:var(--fc-ink); border-color:var(--fc-line); } /* Form sections. Native

, so the disclosure is the browser's and works without script; the marker is ours because the default triangle sits oddly against a heading. */ .tt-wrap.fc .tt-fsec{ border-top:1px solid var(--fc-hair); } .tt-wrap.fc .tt-fsec:first-of-type{ border-top:0; } .tt-wrap.fc .tt-fsec > summary{ display:flex; align-items:center; gap:8px; cursor:pointer; padding:9px 2px; color:var(--fc-ink); font-weight:600; list-style:none; font-size:max(12px, calc(13px * var(--fc-scale))); } .tt-wrap.fc .tt-fsec > summary::-webkit-details-marker{ display:none; } .tt-wrap.fc .tt-fsec > summary > i{ color:var(--fc-ink-3); width:1.1em; text-align:center; } /* A real , not a pseudo-element with a hard-coded glyph: the family name was "Font Awesome 6 Pro" and this project self-hosts 7, so the chevron rendered as a tofu square. An element cannot drift from the font the rest of the card uses. */ /* A right-pointing chevron that swings down when the section opens: the shape people read as "there is more behind this". It sat at the far right of the row in --fc-ink-3, a muted green-grey, and it was pointing DOWN when closed -- so it read as decoration on the heading rather than a control, and Kenny asked for an arrow that had been there all along. It sits beside the label now, in the accent, at the size of the text. */ /* `> summary > i` two rules up is (0,3,2) and this was (0,3,0), so the caret kept the muted ink meant for the section's leading icon. Matched on the element as well, for the same reason the sheet's link default now uses :where(): a rule has to be able to lose. */ .tt-wrap.fc .tt-fsec > summary > i.tt-fsec-caret{ color:var(--fc-accent); font-size:.9em; transition:transform .15s ease; } .tt-wrap.fc .tt-fsec[open] > summary .tt-fsec-caret{ transform:rotate(90deg); } .tt-wrap.fc .tt-fsec > summary:hover{ color:var(--fc-accent); } .tt-wrap.fc .tt-fsec-body{ padding-bottom:10px; } /* The Horse Intel fragment is written for the white popover it used to live in: a 340px box with Bootstrap `.small` throughout. In a drawer section it is body copy, so it reads at the size everything around it does. */ .tt-wrap.fc .tt-hintel .bg-light{ background:var(--fc-inset) !important; } .tt-wrap.fc .tt-hintel > div{ max-width:none !important; } .tt-wrap.fc .tt-hintel h5{ font-size:max(13px, calc(14px * var(--fc-scale))); } .tt-wrap.fc .tt-hintel, .tt-wrap.fc .tt-hintel .small, .tt-wrap.fc .tt-hintel small{ font-size:max(12px, calc(13px * var(--fc-scale))); } /* Weather chip in the race header. It opens the racecourse guide, where the Open-Meteo attribution is written out in full. */ .tt-wrap.fc .tt-chip-weather{ display:inline-flex; align-items:baseline; gap:5px; } .tt-wrap.fc .tt-chip-weather .tt-sub{ color:var(--fc-ink-3); } .tt-wrap.fc .tt-chip-rain{ display:inline-flex; align-items:baseline; gap:3px; color:var(--fc-val-a); font-weight:600; } /* An icon inside a settings label, so the toggle shows the marker it controls. */ .tt-wrap.fc .bt-optionicon{ color:var(--fc-ink-3); margin-right:2px; width:1.1em; text-align:center; } .tt-wrap.fc .form-check:has(:checked) .bt-optionicon{ color:var(--fc-accent); } /* Winner traits. The arrow and the lift both carry the direction, so the colour is not the only encoding. "Against" means winners showed it LESS often than the field. */ .tt-traits{ list-style:none; margin:6px 0 4px; padding:0; display:grid; gap:5px; } .tt-trait{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:baseline; background:var(--fc-inset); border-radius:5px; padding:6px 9px; font-size:max(12px, calc(13px * var(--fc-scale))); } .tt-trait > i{ color:var(--fc-val-g); } .tt-trait.is-against > i{ color:var(--fc-val-r); } .tt-trait-say{ color:var(--fc-ink-2); } .tt-trait-say b{ color:var(--fc-ink); font-variant-numeric:tabular-nums; } .tt-trait-lift{ color:var(--fc-ink-3); font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; } .tt-trait.is-against .tt-trait-lift{ color:var(--fc-val-r); } .tt-checkrow{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } .tt-check{ display:inline-flex; align-items:center; gap:5px; background:var(--fc-check-bg, rgba(166,206,57,.16)); color:var(--fc-check-ink, #cfe9a8); border-radius:4px; padding:3px 8px; font-size:max(11px, calc(12px * var(--fc-scale))); } /* ---- tables ---- */ .tt-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--fc-line-2); border-radius:6px; } .tt-table{ width:100%; border-collapse:collapse; white-space:nowrap; font-size:max(11px, calc(12.5px * var(--fc-scale))); } .tt-table th{ position:sticky; top:0; background:var(--fc-thead); color:var(--fc-on-thead, var(--fc-accent)); padding:6px 8px; text-align:center; text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:max(10px, calc(10.5px * var(--fc-scale))); } .tt-table td{ padding:6px 8px; text-align:center; font-weight:500; color:var(--fc-ink-2); border-top:1px solid var(--fc-hair); } .tt-table th.l, .tt-table td.l{ text-align:left; } .tt-table tbody tr:nth-child(odd){ background:var(--fc-zebra); } .tt-year{ font-weight:700; color:var(--fc-ink); } :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-table th{ color:#fff; } :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-table td{ color:#12241a; } @media print{ .tt-briefbar{ display:none !important; } .tt-brief [data-tt-briefpane]{ display:block !important; } } /* ---- toolbar and filters ---- */ .tt-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 10px; } /* Two groups: what the runner list shows, and the utilities. The gap between them is the only thing saying they do different jobs, so it has to survive a narrow viewport. */ .tt-bargroup{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .tt-barutils{ margin-left:auto; } @media (max-width:720px){ .tt-barutils{ margin-left:0; } } /* !important on the ink: .tt-tool is often an , and the classic sheet's html[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) is (0,4,2), which beat this and rendered the filter bar's link at 1.15:1 on its own ground. */ .tt-tool{ background:var(--fc-inset); border:1px solid var(--fc-hair); border-radius:4px; color:var(--fc-ink-2) !important; padding:6px 12px; cursor:pointer; font-size:max(11px, calc(12.5px * var(--fc-scale))); } .tt-tool:hover{ border-color:var(--fc-accent); color:var(--fc-ink) !important; } .tt-tool.is-on{ background:var(--fc-accent); border-color:var(--fc-accent); color:var(--fc-accent-ink) !important; font-weight:700; } .tt-tool.is-go{ background:var(--fc-accent); border-color:var(--fc-accent); color:var(--fc-accent-ink) !important; font-weight:700; } .tt-filters{ background:var(--fc-well); border:1px solid var(--fc-line-2); border-radius:6px; padding:14px 16px; margin-bottom:12px; } .tt-filters[hidden]{ display:none; } .tt-filter-grid{ display:grid; gap:10px; grid-template-columns:1fr; } @media (min-width:576px){ .tt-filter-grid{ grid-template-columns:repeat(2,1fr); } } @media (min-width:992px){ .tt-filter-grid{ grid-template-columns:repeat(4,1fr); } } .tt-filter{ display:flex; flex-direction:column; gap:5px; padding:8px 10px; background:var(--fc-inset); border:1px solid var(--fc-hair); border-radius:5px; } .tt-filter:focus-within{ border-color:var(--fc-accent); } .tt-filter-label{ color:var(--fc-ink-2); font-weight:600; text-transform:uppercase; letter-spacing:.05em; line-height:1.2; font-size:max(11px, calc(11px * var(--fc-scale))); } .tt-filter-pair{ display:grid; grid-template-columns:1fr 1fr; gap:6px; } .tt-filter input{ width:100%; background:var(--fc-surface); border:1px solid var(--fc-hair); border-radius:3px; color:var(--fc-ink); padding:3px 6px; font-family:var(--ct-font-monospace, monospace); font-size:max(11px, calc(12px * var(--fc-scale))); } .tt-filter input:focus{ outline:2px solid var(--fc-accent); outline-offset:0; } :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-filter input{ background:#fff; border-color:#9dbfa6; } :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-filter input::placeholder{ color:#5c7364; } .tt-filter-foot{ display:flex; align-items:center; gap:8px; margin-top:12px; } .tt-filter-count{ color:var(--fc-ink-3); font-size:max(11px, calc(12px * var(--fc-scale))); } .tt-runner[hidden]{ display:none; } @media print{ .tt-bar, .tt-filters{ display:none !important; } } /* ---- pick rank + runner actions ---- */ .tt-wrap.fc .tt-acts{ position:relative; } .tt-wrap.fc .tt-acts > summary{ list-style:none; cursor:pointer; } .tt-wrap.fc .tt-acts > summary::-webkit-details-marker{ display:none; } .tt-wrap.fc .tt-actbtn{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; min-height:32px; border:2px solid var(--fc-hair); border-radius:4px; background:var(--fc-inset); color:var(--fc-ink-2); } .tt-wrap.fc .tt-acts[open] .tt-actbtn{ border-color:var(--fc-accent); color:var(--fc-ink); } .tt-wrap.fc .tt-actmenu{ position:absolute; right:0; top:calc(100% + 4px); z-index:30; min-width:196px; padding:4px; text-align:left; background:var(--fc-pop-bg); border:2px solid var(--fc-hair); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.28); } .tt-wrap.fc .tt-actrow{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:4px; } .tt-wrap.fc .tt-actrow:hover{ background:var(--fc-inset); } .tt-wrap.fc .tt-actrow .btn{ flex:0 0 auto; min-width:20px; } .tt-wrap.fc .tt-actlbl{ color:var(--fc-ink); font-weight:500; font-size:max(12px, calc(13px * var(--fc-scale))); } /* An empty row means the tier gate emitted no button -- do not leave a bare label. */ .tt-wrap.fc .tt-actrow:not(:has(button)){ display:none; } /* The label follows the icon class the shared click handler toggles, so the two cannot drift apart. Shortlist and notebook swap far/fas; hide swaps the glyph. */ .tt-wrap.fc .tt-a-like:has(.far) .tt-on, .tt-wrap.fc .tt-a-like:has(.fas) .tt-off, .tt-wrap.fc .tt-a-note:has(.far) .tt-on, .tt-wrap.fc .tt-a-note:has(.fas) .tt-off, .tt-wrap.fc .tt-a-hide:has(.fa-trash) .tt-on, .tt-wrap.fc .tt-a-hide:has(.fa-trash-restore) .tt-off{ display:none; } @media (min-width:992px){ } /* Hidden state is read from the icon class the shared handler toggles, not from the handler's own row lookup: betturtle-base.js and its .min twin have diverged, and the unminified build only finds a classic . Reading the icon works on either build. */ /* A binned runner says so in a word and carries a marked edge. Fading the horse's NAME was the whole signal before, which is both easy to miss and the contrast problem the non-runner row already had -- opacity drags ink toward its ground and the audit reads the token, not the result. The silk fades because it is decoration; the name does not. */ /* Scoped to the HIDE BUTTON's own icon, not to the glyph anywhere in the runner. A bare `:has(.fa-trash-restore)` matches the class being present in the DOM whether or not it is displayed -- so the ribbon's always-rendered Binned label, which carries that glyph, made every runner match and every row paint itself as binned (Kenny, 2 Sep). */ .tt-wrap.fc .tt-hidden-tag{ display:none; } .tt-wrap.fc .tt-runner:has(i[class*="hide-"].fa-trash-restore) .tt-hidden-tag{ display:inline-block; border-color:var(--fc-poor); color:var(--fc-poor); font-weight:600; } .tt-wrap.fc .tt-runner:has(i[class*="hide-"].fa-trash-restore){ background:var(--fc-well); border-left:3px solid var(--fc-poor); } /* `!important` because .tt-name carries `color` and `text-decoration` as !important itself -- it is an anchor, and Bootstrap's link styling had to be beaten. Without matching that, a rule here is written and silently does nothing. */ .tt-wrap.fc .tt-runner:has(i[class*="hide-"].fa-trash-restore) .tt-name{ color:var(--fc-ink-3) !important; text-decoration:line-through !important; text-decoration-thickness:1px; } .tt-wrap.fc .tt-runner:has(i[class*="hide-"].fa-trash-restore) .tt-silk{ opacity:.5; } /* Bin beside the heart rather than inside the actions menu: it is a common action and a menu made it two clicks. */ .tt-wrap.fc .tt-binbtn{ display:inline-flex; align-items:center; } /* Grid children default to min-width:auto and so refuse to shrink below their content, which pushed the row past 360px once the pick chip and actions button were added. */ .tt-wrap.fc .tt-r1 > *{ min-width:0; } .tt-wrap.fc .tt-people{ min-width:0; flex-wrap:wrap; } .tt-wrap.fc .tt-conn > span{ min-width:0; } /* The shared button templates hardcode Bootstrap text-dark/danger/warning, and text-dark is near-black on the dark popover. Colour the icons from the tokens instead. */ .tt-wrap.fc .tt-actmenu .btn{ color:var(--fc-ink-3) !important; } .tt-wrap.fc .tt-a-like:has(.fas) .btn{ color:var(--fc-poor) !important; } .tt-wrap.fc .tt-a-note:has(.fas) .btn{ color:var(--fc-fair) !important; } .tt-wrap.fc .tt-a-hide:has(.fa-trash-restore) .btn{ color:var(--fc-accent) !important; } .tt-wrap.fc .tt-actmenu .btn i{ width:1.1em; text-align:center; } /* The count is how many customers have shortlisted the horse, and the icon legend documents it, so it stays on the row -- but not duplicated inside the menu. */ .tt-wrap.fc .tt-actmenu sup{ display:none; } /* The shortlist count is a number to read, not a warning: the amber value ink is 3.5:1 on the row in dark and 4.2:1 in light at 10.8px. The body ink clears both. */ .tt-wrap.fc .tt-heart sup, .tt-wrap.fc .tt-commentact sup, .tt-wrap.fc .tt-actrow sup, .tt-wrap.fc .tt-whymarks sup{ color:var(--fc-ink-2) !important; font-weight:700; } /* The rosette artwork is drawn against a dark ground. */ :root:not([data-fc-theme="dark"]) .tt-wrap.fc .tt-rosette{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)) saturate(1.15) contrast(1.08); } /* ---- meeting navigation ---- */ .tt-wrap.fc .tt-nav{ padding:12px 0 4px; } .tt-wrap.fc .tt-nav-course{ color:var(--fc-ink); font-weight:600; text-transform:uppercase; font-size:max(13px, calc(17px * var(--fc-scale))); } .tt-wrap.fc .tt-nav-course i{ color:var(--fc-poor); } .tt-wrap.fc .tt-nav-date{ color:var(--fc-ink-3); text-transform:none; margin-left:6px; font-size:max(11px, calc(12px * var(--fc-scale))); } .tt-wrap.fc .tt-nav-times{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; } .tt-wrap.fc .tt-time-pill{ border:2px solid var(--fc-hair); border-radius:4px; padding:3px 9px; background:var(--fc-inset); color:var(--fc-ink) !important; text-decoration:none !important; font-weight:600; font-variant-numeric:tabular-nums; font-size:max(12px, calc(13px * var(--fc-scale))); } .tt-wrap.fc .tt-time-pill:hover{ border-color:var(--fc-accent); } .tt-wrap.fc .tt-time-pill.is-now{ background:var(--fc-accent); color:var(--fc-accent-ink) !important; border-color:var(--fc-accent); } .tt-wrap.fc .tt-time-pill.is-group{ border-color:var(--fc-fair); } .tt-wrap.fc .tt-nav-other{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; color:var(--fc-ink-3); font-size:max(11px, calc(12px * var(--fc-scale))); } .tt-wrap.fc .tt-course-pill{ border:1px solid var(--fc-hair); border-radius:3px; padding:1px 7px; color:var(--fc-ink-2) !important; text-decoration:none !important; } .tt-wrap.fc .tt-course-pill:hover{ border-color:var(--fc-accent); color:var(--fc-ink) !important; } /* ---- icon help drawer ---- */ .tt-wrap.fc .tt-iscrim{ position:fixed; inset:0; z-index:1040; background:rgba(0,0,0,.5); } .tt-wrap.fc .tt-idrawer{ position:fixed; top:0; right:0; bottom:0; z-index:1050; width:min(420px,92vw); display:flex; flex-direction:column; background:var(--fc-pop-bg); border-left:2px solid var(--fc-hair); box-shadow:-8px 0 24px rgba(0,0,0,.4); } .tt-wrap.fc .tt-ihead{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:2px solid var(--fc-hair); } .tt-wrap.fc .tt-ihead .tt-h3{ margin:0; font-size:max(14px, calc(16px * var(--fc-scale))); } .tt-wrap.fc .tt-iclose{ background:none; border:0; color:var(--fc-ink-2); cursor:pointer; min-width:36px; min-height:36px; font-size:18px; } .tt-wrap.fc .tt-iclose:hover{ color:var(--fc-ink); } .tt-wrap.fc .tt-isearchwrap{ position:relative; padding:10px 14px; } .tt-wrap.fc .tt-isearchwrap i{ position:absolute; left:24px; top:50%; transform:translateY(-50%); color:var(--fc-ink-3); pointer-events:none; } .tt-wrap.fc .tt-isearch{ width:100%; padding:7px 10px 7px 30px; border-radius:4px; border:2px solid var(--fc-hair); background:var(--fc-inset); color:var(--fc-ink); font-size:max(12px, calc(13px * var(--fc-scale))); } .tt-wrap.fc .tt-isearch:focus{ outline:2px solid var(--fc-accent); outline-offset:1px; } .tt-wrap.fc .tt-inone{ margin:0; padding:0 14px 10px; color:var(--fc-ink-3); } .tt-wrap.fc .tt-ibody{ overflow-y:auto; padding:0 14px 16px; } .tt-wrap.fc .tt-isec .tt-h4{ position:sticky; top:0; margin:10px 0 6px; padding:4px 0; color:var(--fc-accent); text-transform:uppercase; letter-spacing:.05em; background:var(--fc-pop-bg); font-size:max(11px, calc(12px * var(--fc-scale))); } .tt-wrap.fc .tt-irow{ display:grid; grid-template-columns:46px 1fr; gap:10px; align-items:start; padding:7px 0; border-bottom:1px solid var(--fc-hair); } .tt-wrap.fc .tt-iglyph{ display:flex; align-items:center; justify-content:center; min-height:26px; color:var(--fc-ink-2); } .tt-wrap.fc .tt-itext b{ color:var(--fc-ink); font-weight:600; font-size:max(12px, calc(13px * var(--fc-scale))); } .tt-wrap.fc .tt-itier{ margin-left:6px; border:1px solid var(--fc-line-2); border-radius:3px; padding:0 5px; color:var(--fc-accent); text-transform:uppercase; font-size:max(10px, calc(10px * var(--fc-scale))); } .tt-wrap.fc .tt-idesc{ display:block; margin-top:2px; color:var(--fc-ink-3); font-size:max(11px, calc(12px * var(--fc-scale))); } /* ---- print chooser ---- */ .tt-wrap.fc .tt-pmodal{ position:fixed; inset:0; z-index:1060; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.5); } .tt-wrap.fc .tt-pbox{ width:min(420px,96vw); background:var(--fc-pop-bg); border:2px solid var(--fc-hair); border-radius:6px; box-shadow:0 10px 30px rgba(0,0,0,.45); } .tt-wrap.fc .tt-pbody{ padding:12px 14px; } .tt-wrap.fc .tt-pintro{ margin:0 0 10px; color:var(--fc-ink-3); font-size:max(11px, calc(12px * var(--fc-scale))); } .tt-wrap.fc .tt-popt{ display:flex; align-items:center; gap:8px; padding:5px 0; color:var(--fc-ink); font-size:max(12px, calc(13px * var(--fc-scale))); cursor:pointer; } .tt-wrap.fc .tt-pfoot{ display:flex; justify-content:flex-end; gap:8px; padding:10px 14px; border-top:2px solid var(--fc-hair); } .tt-wrap.fc .tt-tool.is-go, .tt-wrap.fc .tt-tool.is-hint{ background:var(--fc-accent); color:var(--fc-accent-ink); border-color:var(--fc-accent); } /* ---- print ---- * The chooser writes pr-no-* on :root; each rule below reads one of them. Collapsed * panes are forced open so what is on screen is what comes out of the printer. */ @media print{ .tt-wrap.fc .tt-nav, .tt-wrap.fc .tt-bar, .tt-wrap.fc .tt-filters, .tt-wrap.fc .tt-idrawer, .tt-wrap.fc .tt-iscrim, .tt-wrap.fc .tt-pmodal, .tt-wrap.fc .tt-actcell, .tt-wrap.fc .tt-more{ display:none !important; } .tt-wrap.fc, .tt-wrap.fc .tt-runner, .tt-wrap.fc .tt-head{ background:#fff !important; color:#000 !important; box-shadow:none !important; } .tt-wrap.fc .tt-name, .tt-wrap.fc .tt-sub, .tt-wrap.fc .tt-conn, .tt-wrap.fc .tt-connline, .tt-wrap.fc .tt-pos{ color:#000 !important; } .tt-wrap.fc .tt-runner{ break-inside:avoid; border-bottom:1px solid #999 !important; } /* greyscale keeps the horseshoe state as border weight, since the tint will not survive */ .tt-wrap.fc .tt-cell{ background:#fff !important; border:1px solid #999; } .tt-wrap.fc .tt-cell.g{ border-width:3px; } .tt-wrap.fc .tt-cell.a{ border-width:2px; } .tt-wrap.fc .tt-cell.r{ border-style:dotted; } :root.pr-no-runners .tt-wrap.fc .tt-runners{ display:none !important; } :root.pr-no-analysis .tt-wrap.fc [data-tt-briefpane="analysis"]{ display:none !important; } :root.pr-no-rp .tt-wrap.fc [data-tt-briefpane="rp"]{ display:none !important; } :root.pr-no-trends .tt-wrap.fc [data-tt-briefpane="trends"]{ display:none !important; } :root.pr-no-stats .tt-wrap.fc [data-tt-statpane], :root.pr-no-stats .tt-wrap.fc .tt-table{ display:none !important; } :root.pr-no-comments .tt-wrap.fc .tt-comment{ display:none !important; } } /* The legend's sample glyphs were written for the white Bootstrap help page: bg-warning with white text is 1.59:1 anywhere, and text-success/danger/warning fail on one ground or the other. Restyle the samples inside the drawer so they stay legible while still reading as their colour family; the label beside each one carries the meaning. */ .tt-wrap.fc .tt-iglyph .badge{ color:#fff; font-weight:700; } .tt-wrap.fc .tt-iglyph .badge.bg-danger{ background:#b0202c !important; } .tt-wrap.fc .tt-iglyph .badge.bg-primary{ background:var(--fc-first-bg) !important; } .tt-wrap.fc .tt-iglyph .badge.bg-success{ background:#1f6b12 !important; } .tt-wrap.fc .tt-iglyph .badge.bg-warning{ background:#7a5300 !important; color:#fff !important; } .tt-wrap.fc .tt-iglyph .text-success, .tt-wrap.fc .tt-idesc .text-success{ color:var(--fc-val-g) !important; } .tt-wrap.fc .tt-iglyph .text-danger, .tt-wrap.fc .tt-idesc .text-danger{ color:var(--fc-val-r) !important; } .tt-wrap.fc .tt-iglyph .text-warning, .tt-wrap.fc .tt-idesc .text-warning{ color:var(--fc-val-a) !important; } .tt-wrap.fc .tt-iglyph .text-dark{ color:var(--fc-ink) !important; } /* ---- meeting summary and today's racing ---- */ /* .tt-sub is monospace for form figures and stats; a sentence of prose is not that. */ .tt-wrap.fc .tt-body.tt-sub{ font-family:inherit; letter-spacing:normal; } .tt-wrap.fc .tt-coursedesc{ margin:6px 0 0; font-family:inherit; letter-spacing:normal; } .tt-wrap.fc .tt-seclbl{ margin:16px 0 8px; color:var(--fc-accent); text-transform:uppercase; letter-spacing:.05em; font-size:max(12px, calc(13px * var(--fc-scale))); } .tt-wrap.fc .tt-meetrace, .tt-wrap.fc .tt-meeting{ background:var(--fc-surface-2); border:1px solid var(--fc-hair); border-radius:6px; padding:10px 12px; margin-bottom:8px; } .tt-wrap.fc .tt-meetrace.is-now{ border-color:var(--fc-accent); box-shadow:0 0 0 2px var(--fc-line-2); } .tt-wrap.fc .tt-meeting.is-quiet{ border-style:dashed; } .tt-wrap.fc .tt-meethead{ display:flex; gap:10px; align-items:flex-start; } .tt-wrap.fc .tt-meettime{ flex:0 0 auto; border:2px solid var(--fc-chip-line); border-radius:4px; background:var(--fc-chip-bg); color:var(--fc-chip-ink) !important; text-decoration:none !important; padding:2px 9px; font-weight:700; font-variant-numeric:tabular-nums; font-size:max(13px, calc(16px * var(--fc-scale))); } .tt-wrap.fc .tt-meettitle{ min-width:0; } .tt-wrap.fc .tt-meettitle a{ color:var(--fc-ink) !important; text-decoration:none !important; font-weight:600; font-size:max(13px, calc(15px * var(--fc-scale))); } .tt-wrap.fc .tt-meettitle a:hover{ color:var(--fc-accent) !important; } .tt-wrap.fc .tt-meetchips{ margin-top:5px; } .tt-wrap.fc .tt-chip-prize{ color:var(--fc-val-g); } .tt-wrap.fc .tt-chip-tv{ color:var(--fc-val-a); } .tt-wrap.fc .tt-meettop{ margin-top:9px; padding-top:8px; border-top:1px solid var(--fc-hair); } .tt-wrap.fc .tt-meetlbl{ display:block; margin-bottom:5px; color:var(--fc-ink-3); text-transform:uppercase; letter-spacing:.05em; font-size:max(10px, calc(10.5px * var(--fc-scale))); } .tt-wrap.fc .tt-pickrow{ display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:4px; text-decoration:none !important; color:var(--fc-ink) !important; } .tt-wrap.fc .tt-pickrow:hover{ background:var(--fc-inset); } .tt-wrap.fc .tt-picksaddle{ min-width:22px; text-align:center; color:var(--fc-ink-3); font-variant-numeric:tabular-nums; font-size:max(11px, calc(12px * var(--fc-scale))); } .tt-wrap.fc .tt-pickname{ flex:1 1 auto; min-width:0; font-weight:600; font-size:max(12px, calc(13.5px * var(--fc-scale))); } .tt-wrap.fc .tt-pickshoes{ display:inline-flex; gap:3px; flex:0 0 auto; } /* the five factors as dots: the row is a summary, not the card */ .tt-wrap.fc .tt-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; background:var(--fc-ink-3); opacity:.35; } .tt-wrap.fc .tt-dot.g{ background:var(--fc-good); opacity:1; } .tt-wrap.fc .tt-dot.a{ background:var(--fc-fair); opacity:1; } .tt-wrap.fc .tt-dot.r{ background:var(--fc-poor); opacity:1; } .tt-wrap.fc .tt-meetlocked{ margin:9px 0 0; padding-top:8px; border-top:1px solid var(--fc-hair); color:var(--fc-ink-3); font-size:max(11px, calc(12px * var(--fc-scale))); } .tt-wrap.fc .tt-meetingtop{ display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; margin-bottom:8px; } .tt-wrap.fc .tt-meetingname{ color:var(--fc-ink) !important; text-decoration:none !important; font-weight:600; text-transform:uppercase; letter-spacing:.02em; font-size:max(14px, calc(17px * var(--fc-scale))); } .tt-wrap.fc .tt-meetingname:hover{ color:var(--fc-accent) !important; } .tt-wrap.fc .tt-meetlink{ display:inline-block; margin-top:8px; color:var(--fc-accent) !important; text-decoration:none !important; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:max(11px, calc(11.5px * var(--fc-scale))); } .tt-wrap.fc .tt-meetlink:hover{ text-decoration:underline !important; } /* a race already run is dimmed, but keeps its border so it stays a target */ /* De-emphasise with colour, not opacity: fading text is the same as lowering its contrast, and .55 put this pill at 3.58:1. */ .tt-wrap.fc .tt-time-pill.is-done{ color:var(--fc-ink-3); border-style:dashed; } .tt-wrap.fc .tt-nextrow{ display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } .tt-wrap.fc .tt-nextcard{ display:flex; flex-direction:column; gap:2px; padding:9px 11px; border:2px solid var(--fc-hair); border-radius:6px; background:var(--fc-inset); text-decoration:none !important; color:var(--fc-ink) !important; } .tt-wrap.fc .tt-nextcard:hover{ border-color:var(--fc-accent); } .tt-wrap.fc .tt-nexttime{ font-weight:700; font-variant-numeric:tabular-nums; font-size:max(15px, calc(19px * var(--fc-scale))); } .tt-wrap.fc .tt-nextcourse{ text-transform:uppercase; letter-spacing:.03em; font-weight:600; font-size:max(11px, calc(12.5px * var(--fc-scale))); } /* ---- course index and hub ---- */ .tt-wrap.fc .tt-coursegrid{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); } .tt-wrap.fc .tt-coursecard{ display:flex; flex-direction:column; gap:2px; padding:9px 11px; border:1px solid var(--fc-hair); border-radius:6px; background:var(--fc-surface-2); text-decoration:none !important; color:var(--fc-ink) !important; } .tt-wrap.fc .tt-coursecard:hover{ border-color:var(--fc-accent); } .tt-wrap.fc .tt-coursename{ font-weight:600; font-size:max(13px, calc(14.5px * var(--fc-scale))); } .tt-wrap.fc .tt-coursefacts{ display:flex; flex-wrap:wrap; gap:6px; } .tt-wrap.fc .tt-recordgrid{ display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .tt-wrap.fc .tt-recrow{ display:flex; align-items:baseline; gap:8px; padding:4px 0; border-bottom:1px solid var(--fc-hair); } .tt-wrap.fc .tt-recrow:last-child{ border-bottom:0; } .tt-wrap.fc .tt-recname{ flex:1 1 auto; min-width:0; color:var(--fc-ink); font-size:max(12px, calc(13px * var(--fc-scale))); } .tt-wrap.fc .tt-recstrike{ flex:0 0 auto; font-weight:700; color:var(--fc-ink); font-variant-numeric:tabular-nums; font-size:max(12px, calc(13px * var(--fc-scale))); } .tt-wrap.fc .tt-recnote{ margin:6px 0 0; font-family:inherit; letter-spacing:normal; } /* ---- shared chrome: navbar and footer ---- * Scoped to .tt-wrap.fc so only the turtle theme sees it; the classic shell keeps the * Hyper look. Component classes only -- never bare p/li/td, which made unmigrated * Bootstrap panels unreadable when the shell was first built. */ .tt-wrap.fc .navbar-custom, .tt-wrap.fc .topnav, .tt-wrap.fc .footer{ background:var(--fc-band-bg) !important; border-color:var(--fc-hair) !important; } .tt-wrap.fc .navbar-custom{ border-bottom:2px solid var(--fc-hair); } .tt-wrap.fc .topnav{ border-bottom:2px solid var(--fc-hair); } .tt-wrap.fc .topbar{ background:transparent !important; } .tt-wrap.fc .navbar-custom .nav-link, .tt-wrap.fc .topnav .nav-link, .tt-wrap.fc .footer a{ color:var(--fc-ink-2) !important; } .tt-wrap.fc .navbar-custom .nav-link:hover, .tt-wrap.fc .topnav .nav-link:hover, .tt-wrap.fc .topnav .nav-link.active, .tt-wrap.fc .footer a:hover{ color:var(--fc-accent) !important; } /* Bootstrap fills .nav-link.active with the brand green, and the rule above paints its text the accent green -- so the nav item for the page you are ON rendered as a solid green block with the word inside it invisible. The top nav marks the current page by colour and weight; it is not a pill. */ .tt-wrap.fc .topnav .nav-link.active, .tt-wrap.fc .navbar-custom .nav-link.active, .tt-wrap.fc .topnav .nav-link.dropdown-toggle.show, .tt-wrap.fc .navbar-custom .nav-link.dropdown-toggle.show{ background-color:transparent !important; border-color:transparent !important; font-weight:700; } /* An OPEN dropdown takes the same fill from Bootstrap and was the same 1.00:1 -- the word `RACES` measured rgb(0,117,33) on rgb(0,117,33) while its menu was down. */ .tt-wrap.fc .topnav .nav-link.dropdown-toggle.show, .tt-wrap.fc .navbar-custom .nav-link.dropdown-toggle.show{ color:var(--fc-accent) !important; } .tt-wrap.fc .navbar-custom .nav-user, .tt-wrap.fc .topbar-menu .nav-link small, .tt-wrap.fc .footer, .tt-wrap.fc .footer .header-title{ color:var(--fc-ink-2) !important; } /* dropdowns are popovers: they must be opaque or the page shows through */ .tt-wrap.fc .navbar-custom .dropdown-menu, .tt-wrap.fc .topnav .dropdown-menu{ background:var(--fc-pop-bg) !important; border:2px solid var(--fc-hair) !important; box-shadow:0 6px 18px rgba(0,0,0,.35); } .tt-wrap.fc .dropdown-item{ color:var(--fc-ink-2) !important; } .tt-wrap.fc .dropdown-item:hover, .tt-wrap.fc .dropdown-item:focus{ background:var(--fc-inset) !important; color:var(--fc-ink) !important; } .tt-wrap.fc .dropdown-divider{ border-color:var(--fc-hair) !important; } /* The pre-footer "About Us" band is a section.bg-light-lighten sitting directly inside .content-page. Match it by that position: the same class is used INSIDE racehead.html and summary.html, and restyling those would wreck an unmigrated card. */ /* not transparent: the white sheet below sits inside .content-page too, and this band carries light turtle ink */ .tt-wrap.fc .content-page > .bg-light-lighten{ background:var(--fc-band-bg) !important; } .tt-wrap.fc .content-page > .bg-light-lighten address, .tt-wrap.fc .content-page > .bg-light-lighten p, .tt-wrap.fc .content-page > .bg-light-lighten li, .tt-wrap.fc .content-page > .bg-light-lighten .header-title{ color:var(--fc-ink-2) !important; } .tt-wrap.fc .content-page > .bg-light-lighten a{ color:var(--fc-accent) !important; } .tt-wrap.fc .footer .border-top, .tt-wrap.fc .footer .border-bottom{ border-color:var(--fc-hair) !important; } /* betturtle-base.css pairs the two logos to Hyper's data-bs-theme, which the turtle theme does not set. Pair them to data-fc-theme instead. Both carry d-lg-inline-block, so only re-show them at the width where they were meant to appear. */ @media (min-width:992px){ .tt-wrap.fc .bt-logo-light{ display:none !important; } .tt-wrap.fc .bt-logo-dark{ display:inline-block !important; } :root:not([data-fc-theme="dark"]) .tt-wrap.fc .bt-logo-light{ display:inline-block !important; } :root:not([data-fc-theme="dark"]) .tt-wrap.fc .bt-logo-dark{ display:none !important; } } /* the signed-in card is a white Hyper panel */ .tt-wrap.fc .navbar-custom .nav-user{ background:var(--fc-inset) !important; border:1px solid var(--fc-hair) !important; border-radius:5px; } .tt-wrap.fc .navbar-custom .nav-user .badge{ background:var(--fc-accent) !important; color:var(--fc-accent-ink) !important; } /* Pre-existing: topbar-menu overflows the viewport at 390px and clips the Profile icon. Let it wrap rather than run off the edge. */ .tt-wrap.fc .topbar-menu{ flex-wrap:wrap; justify-content:flex-end; } /* Text inside the chrome that still carries a Hyper grey chosen for a white page. Scoped to the navbar and footer components, never to bare elements. */ .tt-wrap.fc .navbar-custom .account-user-name{ color:var(--fc-ink) !important; } .tt-wrap.fc .navbar-custom .text-muted, .tt-wrap.fc .footer .text-muted{ color:var(--fc-ink-3) !important; } .tt-wrap.fc .footer .header-title{ color:var(--fc-ink) !important; } .tt-wrap.fc .footer address, .tt-wrap.fc .footer p, .tt-wrap.fc .footer li{ color:var(--fc-ink-2) !important; } .tt-wrap.fc .footer a{ color:var(--fc-accent) !important; } /* ---- unmigrated bodies keep a white sheet ---- * The shell paints a dark ground, but an unmigrated body is Bootstrap/Hyper markup whose * colours assume white. Rather than restyle that markup -- which is what made the FAQ * accordions unreadable when the shell was first built -- give any page without migrated * content its own light sheet, and let the turtle ground show only behind turtle content. * A page becomes turtle simply by containing .tt-card. */ .tt-wrap.fc .content-page:not(:has(.tt-card)){ background:#ffffff; } .tt-wrap.fc .content-page:not(:has(.tt-card)) > .container-fluid, .tt-wrap.fc .content-page:not(:has(.tt-card)) > .container{ background:#ffffff; } /* ---- migrated Bootstrap surfaces ---- * A page that has been migrated but keeps its existing Bootstrap markup -- pointer reports, * tips pages -- opts in by wrapping its content in .tt-card.tt-sheet. The page keeps its * DataTables machinery, cards and tier gating; only the surface is restyled. Nothing here * reaches an unmigrated page, which keeps its white sheet instead. */ /* A card that names a semantic colour keeps it. My Shortlisted Runners states its big-priced winners as red, green, amber and blue cards; repainting every card to the sheet surface took those colours away and left white text on a pale ground. `bg-light` and `bg-white` are NOT exempt -- those name a colour that does not survive a dark theme, and the sheet surface is the right answer for them. */ .tt-wrap.fc .tt-sheet .card:not(:where(.bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-dark)), .tt-wrap.fc .tt-sheet .card-body{ background:var(--fc-surface-2) !important; border-color:var(--fc-hair) !important; color:var(--fc-ink-2); } /* Its body must not paint over it either -- same reason the landing pages' CTA needed this. */ .tt-wrap.fc .tt-sheet .card:is(.bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-dark) .card-body{ background:transparent !important; } /* A card that paints its OWN ground owns its body as well. Repainting the body to the sheet surface left the landing pages' final CTA as white text on a pale panel at 1.07, inside a card that was still green -- the ground and the text had different owners. */ .tt-wrap.fc .tt-sheet .card:is(.bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-info, .bg-dark) > .card-body{ background:transparent !important; } /* These card headers were bg-primary with white text, so the header ground must stay dark in BOTH themes -- the same treatment the table thead gets. */ .tt-wrap.fc .tt-sheet .card-header{ background:var(--fc-thead) !important; border-color:var(--fc-hair) !important; color:#ffffff !important; } /* The generic link rule below carries two :not()s, so it out-specifies a plain `.card-header a`. In light mode the accent equals the header ground: a ratio of 1. */ .tt-wrap.fc .tt-sheet .card-header .card-title, .tt-wrap.fc .tt-sheet .card-header h1, .tt-wrap.fc .tt-sheet .card-header h2, .tt-wrap.fc .tt-sheet .card-header h3, .tt-wrap.fc .tt-sheet .card-header h4, .tt-wrap.fc .tt-sheet .card-header h5, .tt-wrap.fc .tt-sheet .card-header h6, .tt-wrap.fc .tt-sheet .card-header p, .tt-wrap.fc .tt-sheet .card-header .text-dark, .tt-wrap.fc .tt-sheet .card-header span, .tt-wrap.fc .tt-sheet .card-header a:not(.btn):not(.tt-chip), .tt-wrap.fc .tt-sheet .card-header a:not(.btn):not(.tt-chip) span{ color:#ffffff !important; } .tt-wrap.fc .tt-sheet .text-white-50{ color:rgba(255,255,255,.85) !important; } .tt-wrap.fc .tt-sheet h1{ color:var(--fc-ink); } .tt-wrap.fc .tt-sheet .form-text, /* `.text-body-secondary` is Bootstrap 5.3's name for the same thing, and reused fragments carry both. Without it the AI-insights note stayed Bootstrap's grey, 2.83:1 on the light sheet. */ .tt-wrap.fc .tt-sheet .text-muted, .tt-wrap.fc .tt-sheet .text-body-secondary, .tt-wrap.fc .tt-sheet .text-secondary{ color:var(--fc-ink-2) !important; } /* Bootstrap 5.3 drives table colour through its own variables and applies the striped and hover states as a colour PAIR. Overriding background on td alone leaves the striped rows carrying Bootstrap's dark stripe ink on a dark ground. Set the variables. */ .tt-wrap.fc .tt-sheet table.table{ --bs-table-color:var(--fc-ink-2); --bs-table-bg:transparent; --bs-table-border-color:var(--fc-hair); --bs-table-striped-color:var(--fc-ink-2); --bs-table-striped-bg:var(--fc-zebra); --bs-table-hover-color:var(--fc-ink); --bs-table-hover-bg:var(--fc-hover); --bs-table-active-color:var(--fc-ink); --bs-table-active-bg:var(--fc-inset); color:var(--fc-ink-2); border-color:var(--fc-hair); } /* This Bootstrap build stripes with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)` rather than the 5.3 variables, so the stripe has to be cancelled at the cell and repainted. */ .tt-wrap.fc .tt-sheet table.table > :not(caption) > * > *{ box-shadow:none !important; background-color:transparent !important; color:var(--fc-ink-2) !important; border-color:var(--fc-hair) !important; } .tt-wrap.fc .tt-sheet table.table-striped > tbody > tr:nth-of-type(odd) > *{ background-color:var(--fc-zebra) !important; } .tt-wrap.fc .tt-sheet table.table > tbody > tr:hover > *{ background-color:var(--fc-hover) !important; } .tt-wrap.fc .tt-sheet table.table > thead th{ background-color:var(--fc-thead) !important; color:#ffffff !important; border-color:var(--fc-hair) !important; box-shadow:none !important; text-transform:uppercase; letter-spacing:.03em; } /* Every reused table follows the A/A/A control, not a fixed px. The size is declared on the CONTAINER and inherited, so a sheet that wants its own can restate it on a nested element and win by proximity rather than by out-specifying a rule somewhere else in this file -- which is how the career form and this rule would otherwise fight. The header carries `!important` because Hyper's `table.dataTable thead th` does. 14px and 11px are today's 16px and 12.48px divided by the default scale, so the default setting looks exactly as it does now and only the other two settings move. */ .tt-wrap.fc .tt-sheet{ --tt-tsize:max(12px, calc(14px * var(--fc-scale))); --tt-thsize:max(11px, calc(11px * var(--fc-scale))); } .tt-wrap.fc .tt-sheet table.table, .tt-wrap.fc .tt-sheet table.table > tbody > tr > td{ font-size:var(--tt-tsize) !important; } .tt-wrap.fc .tt-sheet table.table > thead > tr > th{ font-size:var(--tt-thsize) !important; } .tt-wrap.fc .tt-sheet table.table a{ color:var(--fc-ink) !important; } .tt-wrap.fc .tt-sheet table.table a:hover{ color:var(--fc-accent) !important; } /* The head paints itself green two rules above, so a link in it takes the head's ink, not the body's. Most stats tables wrap each column name in an to hang a tooltip on, and the rule above is more specific than a `thead a` rule written elsewhere -- so the Odds table read as having no headings. The ground and the ink on it are decided in one place now. */ .tt-wrap.fc .tt-sheet table.table > thead a{ color:#ffffff !important; } .tt-wrap.fc .tt-sheet table.table > thead a:hover{ color:#ffffff !important; } /* And the icons in it. A column headed by a star or a key carried `text-warning`, which is amber on the head's green -- 1.17:1, the icons Kenny could not make out. The SHAPE is what distinguishes those columns (star, key, trophy) and each carries a tooltip naming it, so the head's own ink is right; the legend above the table keeps the amber, where it reads. */ /* DataTables' own controls */ .tt-wrap.fc .tt-sheet .dataTables_wrapper, .tt-wrap.fc .tt-sheet .dataTables_info, .tt-wrap.fc .tt-sheet .dataTables_length, .tt-wrap.fc .tt-sheet .dataTables_filter{ color:var(--fc-ink-2); } .tt-wrap.fc .tt-sheet .dataTables_filter input, .tt-wrap.fc .tt-sheet .dataTables_length select, .tt-wrap.fc .tt-sheet .form-control, .tt-wrap.fc .tt-sheet .form-select{ background:var(--fc-inset) !important; border:2px solid var(--fc-hair) !important; color:var(--fc-ink) !important; } .tt-wrap.fc .tt-sheet .page-link{ background:var(--fc-inset) !important; border-color:var(--fc-hair) !important; color:var(--fc-ink-2) !important; } .tt-wrap.fc .tt-sheet .page-item.active .page-link{ background:var(--fc-accent) !important; border-color:var(--fc-accent) !important; color:var(--fc-accent-ink) !important; } /* the date radios and the guide/help strips these pages carry */ .tt-wrap.fc .tt-sheet .alert{ background:var(--fc-inset) !important; border-color:var(--fc-hair) !important; color:var(--fc-ink-2) !important; } .tt-wrap.fc .tt-sheet .btn-outline-secondary{ color:var(--fc-ink-2) !important; border-color:var(--fc-hair) !important; } /* the guide strip and the DataTables buttons these pages carry */ .tt-wrap.fc .tt-sheet .alert-info, .tt-wrap.fc .tt-sheet .bg-info, .tt-wrap.fc .tt-sheet .bg-light, .tt-wrap.fc .tt-sheet .bg-white{ background:var(--fc-inset) !important; color:var(--fc-ink-2) !important; border-color:var(--fc-hair) !important; } .tt-wrap.fc .tt-sheet .btn-primary{ background:var(--fc-accent) !important; border-color:var(--fc-accent) !important; color:var(--fc-accent-ink) !important; } .tt-wrap.fc .tt-sheet .btn-secondary{ background:var(--fc-inset) !important; border-color:var(--fc-hair) !important; color:var(--fc-ink-2) !important; } /* Rating values in a report carry the same Bootstrap classes the classic card uses, chosen against white. Map them to the value tokens, which are AA-tested per theme -- the same fix the runner row's OR/FORM/SPEED chips needed. */ /* Bootstrap's semantic inks are chosen against white. `.tt-sheet` covers the reused fragments; `.tt-panel` and `.tt-analysis` are turtle-native surfaces that also receive them -- convert_analysis emits exactly these three classes. */ .tt-wrap.fc .tt-sheet .text-success, .tt-wrap.fc .tt-panel .text-success, .tt-wrap.fc .tt-analysis .text-success{ color:var(--fc-val-g) !important; } .tt-wrap.fc .tt-sheet .text-warning, .tt-wrap.fc .tt-panel .text-warning, .tt-wrap.fc .tt-analysis .text-warning{ color:var(--fc-val-a) !important; } .tt-wrap.fc .tt-sheet .text-danger, .tt-wrap.fc .tt-panel .text-danger, .tt-wrap.fc .tt-analysis .text-danger{ color:var(--fc-val-r) !important; } /* convert_analysis upper-cases its bold run; keep the weight with it. */ .tt-wrap.fc .tt-analysis .text-success{ font-weight:700; } .tt-wrap.fc .tt-sheet .text-primary{ color:var(--fc-accent) !important; } .tt-wrap.fc .tt-sheet .text-dark, .tt-wrap.fc .tt-sheet .text-body{ color:var(--fc-ink) !important; } /* The stripe reset names the cell, so it outranks the rules above and flattens a whole cell that carries a colour class -- a profit and a loss come out the same ink. Re-assert them where the class is on the cell itself. `.text-muted` and its two aliases already resolve to the same ink the reset uses, so they need no entry. */ .tt-wrap.fc .tt-sheet table.table > :not(caption) > * > *.text-success{ color:var(--fc-val-g) !important; } .tt-wrap.fc .tt-sheet table.table > :not(caption) > * > *.text-warning{ color:var(--fc-val-a) !important; } .tt-wrap.fc .tt-sheet table.table > :not(caption) > * > *.text-danger{ color:var(--fc-val-r) !important; } .tt-wrap.fc .tt-sheet table.table > :not(caption) > * > *.text-primary{ color:var(--fc-accent) !important; } .tt-wrap.fc .tt-sheet table.table > :not(caption) > * > *.text-dark, .tt-wrap.fc .tt-sheet table.table > :not(caption) > * > *.text-body{ color:var(--fc-ink) !important; } /* small pill badges are white-on-tint and unreadable at 8.6px on any ground */ .tt-wrap.fc .tt-sheet .badge.bg-danger{ background:#b0202c !important; color:#fff !important; } .tt-wrap.fc .tt-sheet .badge.bg-primary{ background:var(--fc-first-bg) !important; color:#fff !important; } .tt-wrap.fc .tt-sheet .badge.bg-success{ background:#1f6b12 !important; color:#fff !important; } .tt-wrap.fc .tt-sheet .badge.bg-warning{ background:#7a5300 !important; color:#fff !important; } .tt-wrap.fc .tt-sheet .badge.bg-info{ background:#155e75 !important; color:#fff !important; } .tt-wrap.fc .tt-sheet .badge.bg-secondary{ background:#3f5a48 !important; color:#fff !important; } /* The report page body is migrated content now (it carries .tt-card), so its prose should inherit turtle ink rather than Bootstrap's dark default. Set it once at the root of the report and let inheritance do the rest -- elements with their own colour keep it. */ .tt-wrap.fc .tt-sheet{ color:var(--fc-ink-2); } .tt-wrap.fc .tt-sheet .badge-outline-primary{ color:var(--fc-accent) !important; border:1px solid var(--fc-accent) !important; } .tt-wrap.fc .tt-sheet .badge-outline-danger{ color:var(--fc-val-r) !important; border:1px solid var(--fc-val-r) !important; } .tt-wrap.fc .tt-sheet .badge-outline-success{ color:var(--fc-val-g) !important; border:1px solid var(--fc-val-g) !important; } .tt-wrap.fc .tt-sheet .badge-outline-warning{ color:var(--fc-val-a) !important; border:1px solid var(--fc-val-a) !important; } /* Bare links inside a report carry Bootstrap's indigo/rose, so they take the accent. This is a DEFAULT and has to lose to anything that paints its own ground. The exclusions sit inside `:where()`, which contributes no specificity, so the whole selector is three classes and one element -- below every rule that owns a link family. Written as a chain of `:not(.x)` it counted as eight classes and beat all of them: a selected tab was the accent ON the accent, 1.00:1, a green box with the tab's name invisible inside it, and the table heads below had gone the same way. Adding an exclusion to a `:not()` chain RAISES the very priority the exclusion is trying to give away, which is why this reads as it does. Anything with a selected or coloured ground is therefore owned elsewhere and not repeated here: `.nav-link` by the nav rules below, `.dropdown-item.active` by the `body:has()` rule further down, table heads by the rule immediately after this one. */ .tt-wrap.fc .tt-sheet a:not(:where(.btn, .tt-chip, .tt-time-pill, .nav-link, .dropdown-item)){ color:var(--fc-accent) !important; } /* Every outline button: Bootstrap's outline colours are chosen against white and fail on both turtle grounds. The accent reads on either, and the semantic ones use the value tokens, which are AA-tested per theme. */ .tt-wrap.fc .tt-sheet .btn-outline-primary, .tt-wrap.fc .tt-sheet .btn-outline-success, .tt-wrap.fc .tt-sheet .btn-outline-info, .tt-wrap.fc .tt-sheet .btn-outline-secondary, .tt-wrap.fc .tt-sheet .btn-outline-dark, .tt-wrap.fc .tt-sheet .btn-outline-light{ color:var(--fc-accent) !important; border-color:var(--fc-accent) !important; background:transparent !important; } .tt-wrap.fc .tt-sheet .btn-outline-danger{ color:var(--fc-val-r) !important; border-color:var(--fc-val-r) !important; background:transparent !important; } .tt-wrap.fc .tt-sheet .btn-outline-warning{ color:var(--fc-val-a) !important; border-color:var(--fc-val-a) !important; background:transparent !important; } .tt-wrap.fc .tt-sheet [class*="btn-outline-"]:hover{ background:var(--fc-inset) !important; } /* Bootstrap gives .accordion-button an expanded state with its own colour pair */ .tt-wrap.fc .tt-sheet .accordion-button, .tt-wrap.fc .tt-sheet .accordion-button:not(.collapsed), .tt-wrap.fc .tt-sheet .accordion-item, .tt-wrap.fc .tt-sheet .accordion-body{ background:var(--fc-inset) !important; color:var(--fc-ink) !important; box-shadow:none !important; } .tt-wrap.fc .tt-sheet .accordion-button::after{ filter:invert(1) brightness(1.6); } /* tabs and the solid Bootstrap buttons these pages use as category filters */ .tt-wrap.fc .tt-sheet .nav-link{ color:var(--fc-ink-2) !important; } .tt-wrap.fc .tt-sheet .nav-link.active{ color:var(--fc-accent) !important; } .tt-wrap.fc .tt-sheet .btn-warning, .tt-wrap.fc .tt-sheet .btn-info, .tt-wrap.fc .tt-sheet .btn-light, .tt-wrap.fc .tt-sheet .btn-success, .tt-wrap.fc .tt-sheet .btn-danger{ color:#ffffff !important; border-color:var(--fc-hair) !important; } .tt-wrap.fc .tt-sheet .btn-warning{ background:#7a5300 !important; } .tt-wrap.fc .tt-sheet .btn-info{ background:#155e75 !important; } .tt-wrap.fc .tt-sheet .btn-light{ background:var(--fc-inset) !important; color:var(--fc-ink) !important; } .tt-wrap.fc .tt-sheet .btn-success{ background:#1f6b12 !important; } .tt-wrap.fc .tt-sheet .btn-danger{ background:#b0202c !important; } /* Form controls on a migrated sheet. The runners filter uses bare inputs rather than .form-control, so target the elements as well as the Bootstrap classes. */ .tt-wrap.fc .tt-sheet input[type="text"], .tt-wrap.fc .tt-sheet input[type="number"], .tt-wrap.fc .tt-sheet input[type="search"], .tt-wrap.fc .tt-sheet input[type="date"], .tt-wrap.fc .tt-sheet select, .tt-wrap.fc .tt-sheet textarea{ background:var(--fc-inset) !important; border:2px solid var(--fc-hair) !important; border-radius:4px; color:var(--fc-ink) !important; } .tt-wrap.fc .tt-sheet input::placeholder, .tt-wrap.fc .tt-sheet textarea::placeholder{ color:var(--fc-ink-3) !important; } .tt-wrap.fc .tt-sheet input:focus, .tt-wrap.fc .tt-sheet select:focus{ outline:2px solid var(--fc-accent); outline-offset:1px; } /* Bootstrap's indigo tick is off-palette; accent-color themes the native control */ .tt-wrap.fc .tt-sheet input[type="checkbox"], .tt-wrap.fc .tt-sheet input[type="radio"]{ accent-color:var(--fc-accent); } .tt-wrap.fc .tt-sheet .form-check-input:checked{ background-color:var(--fc-accent) !important; border-color:var(--fc-accent) !important; } .tt-wrap.fc .tt-sheet label, .tt-wrap.fc .tt-sheet legend, .tt-wrap.fc .tt-sheet .form-label{ color:var(--fc-ink-2); } /* List groups are white by default and carry the icon-key panels, which are collapsed at rest -- so the contrast audit never sees them. Found only by force-expanding them. */ .tt-wrap.fc .tt-sheet .list-group, .tt-wrap.fc .tt-sheet .list-group-item{ background:transparent !important; color:var(--fc-ink-2) !important; border-color:var(--fc-hair) !important; } .tt-wrap.fc .tt-sheet .border, .tt-wrap.fc .tt-sheet .border-top, .tt-wrap.fc .tt-sheet .border-bottom, .tt-wrap.fc .tt-sheet .border-start, .tt-wrap.fc .tt-sheet .border-end{ border-color:var(--fc-hair) !important; } .tt-wrap.fc .tt-sheet .table-responsive{ background:transparent !important; } /* Nested cards each add their own translucent layer, so three deep the ground is light enough to pull accent-coloured links under AA. Flatten: only the outermost surface paints. A nested card that carries a SEMANTIC ground is exempt. My Shortlisted Runners states its big-priced winners as red, green, amber and blue cards with white text, nested inside the Tipping Summary card -- flattening took the colour away and left white text on the light sheet. Three of the four were invisible; the fourth read only because `bg-warning` is excluded from the rule that keeps white ink, so it had been repainted dark. The lesson is the flatten rule's own: only the outermost surface paints -- unless the inner one was asked to. A class that names a colour is asking. */ .tt-wrap.fc .tt-sheet .card .card:not([class*="bg-"]), .tt-wrap.fc .tt-sheet .card-body .card-body:not([class*="bg-"]), .tt-wrap.fc .tt-sheet .card .card-body .card:not([class*="bg-"]){ background:transparent !important; } /* An active .nav-tabs tab gets a solid white background from Bootstrap -- the "selected" look -- so accent text on it is 1.57 whatever the page ground is. */ .tt-wrap.fc .tt-sheet .nav-tabs{ border-bottom-color:var(--fc-hair) !important; } .tt-wrap.fc .tt-sheet .nav-tabs .nav-link{ color:var(--fc-ink-2) !important; background:transparent !important; border-color:transparent !important; } .tt-wrap.fc .tt-sheet .nav-tabs .nav-link:hover{ border-color:var(--fc-hair) !important; } .tt-wrap.fc .tt-sheet .nav-tabs .nav-link.active{ background:var(--fc-inset) !important; color:var(--fc-accent) !important; border-color:var(--fc-hair) var(--fc-hair) transparent !important; } /* ---- system builder ---- * The builder ships its own #filterform stylesheet written for a white page. Those rules * carry an id, so only !important reaches them. Nothing here changes layout: the field set, * the accordion structure and the .filter-section-header sibling-walk are untouched. */ .tt-wrap.fc .tt-sheet .filter-section-header, .tt-wrap.fc .tt-sheet .filter-section-header a{ color:var(--fc-ink) !important; } .tt-wrap.fc .tt-sheet .band-count{ color:var(--fc-ink-3) !important; } .tt-wrap.fc .tt-sheet .band-count.has-active{ color:var(--fc-accent) !important; } /* a .badge with no bg-* class keeps Bootstrap's grey ink and no ground */ .tt-wrap.fc .tt-sheet .badge:not([class*="bg-"]):not([class*="badge-outline"]){ color:var(--fc-ink-2) !important; } .tt-wrap.fc .tt-sheet .btn-link{ color:var(--fc-accent) !important; } /* Select2 renders its own widget, white by default */ .tt-wrap.fc .tt-sheet .select2-container--default .select2-selection, .tt-wrap.fc .tt-sheet .select2-container--default .select2-selection--multiple, .tt-wrap.fc .tt-sheet .select2-dropdown{ background:var(--fc-inset) !important; border-color:var(--fc-hair) !important; color:var(--fc-ink) !important; } .tt-wrap.fc .tt-sheet .select2-selection__rendered, .tt-wrap.fc .tt-sheet .select2-results__option{ color:var(--fc-ink) !important; } .tt-wrap.fc .tt-sheet .select2-selection__choice{ background:var(--fc-accent) !important; color:var(--fc-accent-ink) !important; border-color:var(--fc-accent) !important; } .tt-wrap.fc .tt-sheet .select2-results__option--highlighted{ background:var(--fc-hover) !important; color:var(--fc-ink) !important; } .tt-wrap.fc .tt-sheet .select2-search__field{ color:var(--fc-ink) !important; } /* the credits page's promo panels */ .tt-wrap.fc .tt-sheet .bg-success.bg-opacity-10, .tt-wrap.fc .tt-sheet .bg-primary.bg-opacity-10, .tt-wrap.fc .tt-sheet [class*="bg-opacity-"]{ background:var(--fc-inset) !important; } /* The builder's sticky action bar paints itself white (--ct-secondary-bg fallback), and it carries the live count, Rule by rule and Test the number. */ .tt-wrap.fc .tt-sheet #filteractions{ background:var(--fc-band-bg) !important; border-top:2px solid var(--fc-hair) !important; } .tt-wrap.fc .tt-sheet #filteractions .btn-outline-primary, .tt-wrap.fc .tt-sheet #filteractions .btn-outline-secondary{ color:var(--fc-accent) !important; border-color:var(--fc-accent) !important; } /* a .bg-light panel's prose inherits Bootstrap's secondary grey from an ancestor, so the panel's own colour is not enough to reach it */ .tt-wrap.fc .tt-sheet .bg-light, .tt-wrap.fc .tt-sheet .bg-light p, .tt-wrap.fc .tt-sheet .bg-light li, .tt-wrap.fc .tt-sheet .bg-light small{ color:var(--fc-ink-2) !important; } /* the active breadcrumb crumb keeps Bootstrap's muted grey */ .tt-wrap.fc .tt-sheet .breadcrumb-item, .tt-wrap.fc .tt-sheet .breadcrumb-item.active{ color:var(--fc-ink-2) !important; } .tt-wrap.fc .tt-sheet .breadcrumb-item + .breadcrumb-item::before{ color:var(--fc-ink-3) !important; } /* The preset gallery paints its own cards from --ct-secondary-bg, which is white. */ .tt-wrap.fc .tt-sheet .preset-card{ background:var(--fc-surface-2) !important; border-color:var(--fc-hair) !important; color:var(--fc-ink-2) !important; } .tt-wrap.fc .tt-sheet .preset-card h2, .tt-wrap.fc .tt-sheet .preset-card h3{ color:var(--fc-ink) !important; } .tt-wrap.fc .tt-sheet .preset-card p, .tt-wrap.fc .tt-sheet .preset-card li, .tt-wrap.fc .tt-sheet .preset-card span{ color:var(--fc-ink-2) !important; } .tt-wrap.fc .tt-sheet .preset-card .text-muted{ color:var(--fc-ink-3) !important; } .tt-wrap.fc .tt-sheet .preset-needs{ color:var(--fc-accent) !important; border-color:var(--fc-accent) !important; } .tt-wrap.fc .tt-sheet .preset-filter-list li.is-locked{ color:var(--fc-ink-3) !important; } /* ionRangeSlider ships its own blue skin */ .tt-wrap.fc .tt-sheet .irs--flat .irs-bar, .tt-wrap.fc .tt-sheet .irs .irs-bar{ background:var(--fc-accent) !important; } .tt-wrap.fc .tt-sheet .irs--flat .irs-handle > i:first-child, .tt-wrap.fc .tt-sheet .irs .irs-handle > i:first-child{ background:var(--fc-accent) !important; } .tt-wrap.fc .tt-sheet .irs--flat .irs-from, .tt-wrap.fc .tt-sheet .irs--flat .irs-to, .tt-wrap.fc .tt-sheet .irs--flat .irs-single, .tt-wrap.fc .tt-sheet .irs .irs-from, .tt-wrap.fc .tt-sheet .irs .irs-to, .tt-wrap.fc .tt-sheet .irs .irs-single{ background:var(--fc-accent) !important; color:var(--fc-accent-ink) !important; } .tt-wrap.fc .tt-sheet .irs--flat .irs-from:before, .tt-wrap.fc .tt-sheet .irs--flat .irs-to:before, .tt-wrap.fc .tt-sheet .irs--flat .irs-single:before{ border-top-color:var(--fc-accent) !important; } .tt-wrap.fc .tt-sheet .irs--flat .irs-line, .tt-wrap.fc .tt-sheet .irs .irs-line{ background:var(--fc-inset) !important; } .tt-wrap.fc .tt-sheet .irs-min, .tt-wrap.fc .tt-sheet .irs-max{ background:var(--fc-inset) !important; color:var(--fc-ink-3) !important; } /* The System Builder's band counter and its active-filter banner take the accent. Scoped to THEM: this used to claim every `.badge.bg-primary` in a sheet, and the finishing-position badge is one -- so a winner came out lime while the same badge is blue everywhere else (Kenny, 1 Sep). Two rules for one selector, the later winning silently. */ .tt-wrap.fc .tt-sheet .badge.bg-primary.filter-count-badge, .tt-wrap.fc .tt-sheet #filterform .badge.bg-primary, .tt-wrap.fc .tt-sheet #filteractions .badge.bg-primary{ background:var(--fc-accent) !important; color:var(--fc-accent-ink) !important; } .tt-wrap.fc .tt-sheet .border-primary{ border-color:var(--fc-accent) !important; } /* The pricing page hard-codes Bootstrap's success green (#198754) and an emerald inline, both chosen against white. Map them to the value tokens, which are AA-tested per theme. Colour only -- no price, plan or claim on this page is touched. */ .tt-wrap.fc .tt-sheet .bt-noauto, .tt-wrap.fc .tt-sheet .bt-renewal-price, .tt-wrap.fc .tt-sheet [style*="#10b981"]{ color:var(--fc-val-g) !important; } .tt-wrap.fc .tt-sheet .bt-hero{ border-color:var(--fc-accent) !important; } .tt-wrap.fc .tt-sheet .bt-hero-head{ background:var(--fc-thead) !important; color:#fff !important; } /* An active .nav-pills link paints itself Bootstrap indigo and keeps its own ink; and the *-subtle badge family is a pale tint with matching pale text, both chosen against white. */ .tt-wrap.fc .tt-sheet .nav-pills .nav-link.active, .tt-wrap.fc .tt-sheet .nav-link.active[class*="text-"]{ background:var(--fc-accent) !important; color:var(--fc-accent-ink) !important; } .tt-wrap.fc .tt-sheet [class*="-subtle"]{ background:var(--fc-inset) !important; } .tt-wrap.fc .tt-sheet .bg-success-subtle{ color:var(--fc-val-g) !important; } .tt-wrap.fc .tt-sheet .bg-warning-subtle{ color:var(--fc-val-a) !important; } .tt-wrap.fc .tt-sheet .bg-danger-subtle{ color:var(--fc-val-r) !important; } .tt-wrap.fc .tt-sheet .bg-primary-subtle, .tt-wrap.fc .tt-sheet .bg-info-subtle{ color:var(--fc-accent) !important; } /* The card-header ground is dark in both themes, so a button sitting on it must be white -- the accent is the same green as that ground in light mode. */ .tt-wrap.fc .tt-sheet .card-header .btn, .tt-wrap.fc .tt-sheet .card-header [class*="btn-outline-"]{ color:#ffffff !important; border-color:rgba(255,255,255,.6) !important; background:transparent !important; } .tt-wrap.fc .tt-sheet .card-header .btn:hover{ background:rgba(255,255,255,.14) !important; } /* ---- icon fonts the turtle theme does not need ---- * app.min.css @imports three icon stylesheets from CDNs: Material Design Icons, Remix Icon * and Unicons -- 966k and six render-blocking third-party files per page. Across every * turtle page measured, Remix Icon is used ZERO times and Unicons only draws two elements that * carry .bt-icon-ghost, so they are zero-width alignment spacers in BOTH themes and were * never visible. Material Design Icons exists solely for the fourteen navbar dropdown carets, * redrawn below as a CSS triangle. That lets the turtle branch load a derived stylesheet with * those imports stripped -- see manage.py build_turtle_css. */ .tt-wrap.fc .arrow-down::before{ content:"" !important; font-family:inherit !important; display:inline-block; width:0; height:0; vertical-align:middle; border-left:.3em solid transparent; border-right:.3em solid transparent; border-top:.34em solid currentColor; } /* The factor row a customer asked about. Set by showWhy() and cleared by every other highlight, so only one thing on a row is ever marked. */ .tt-wrap.fc .tt-why-row.is-focus{ background:var(--fc-hover); border-radius:4px; box-shadow:inset 3px 0 0 var(--fc-accent); } /* Stands in for content the customer's plan does not include. */ .tt-wrap.fc .tt-locked{ color:var(--fc-ink-3); font-style:italic; } .tt-wrap.fc .tt-locked i{ margin-right:6px; opacity:.75; } /* Card-level banner: free-card count, filtered field. */ .tt-wrap.fc .tt-notice{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px; padding:8px 12px; border:1px solid var(--fc-line); border-radius:8px; background:var(--fc-surface-2); font-size:calc(13px * var(--fc-scale)); color:var(--fc-ink-2); } .tt-wrap.fc .tt-notice > i{ color:var(--fc-accent); } .tt-wrap.fc .tt-notice p{ margin:0; flex:1 1 260px; } .tt-wrap.fc .tt-notice b{ color:var(--fc-ink); } .tt-wrap.fc .tt-notice-sub{ color:var(--fc-ink-3); } .tt-wrap.fc .tt-notice.is-good{ border-color:var(--fc-cell-g); } .tt-wrap.fc .tt-notice.is-warn{ border-color:var(--fc-warn-line); background:var(--fc-warn); } /* Also used on a