/* ========================================================================== Troys Squad — design system v1 Stage 1 of the rebuild. Loaded site-wide but scoped: nothing applies until an element (or ) carries .ts-dark. Safe to ship live. Accent note: the store's legacy brand red #FF3F3F reads salmon/orange on a near-black ground — high lightness plus a warm glow does that. The on-dark accent is shifted to a crimson-leaning #FF3B4A, which reads unmistakably red at size. #FF3F3F is kept as --ts-red-brand for the light surfaces where it already lives. ========================================================================== */ .ts-dark{ /* ---- ground ---- */ --ts-ground:#0A0A12; --ts-ground-2:#12121C; --ts-ground-3:#1A1A26; /* ---- glass ---- */ --ts-glass:rgba(255,255,255,.055); --ts-glass-2:rgba(255,255,255,.09); --ts-glass-3:rgba(255,255,255,.14); --ts-edge:rgba(255,255,255,.14); --ts-edge-lit:rgba(255,255,255,.34); /* ---- accent: TWO reds, because one cannot do both jobs ---- Measured against the ground and against white: #A20403 2.40:1 on dark | 8.22:1 white on it #FF3B4A 5.61:1 on dark | 3.51:1 white on it Dark reds vanish as text on black; bright reds make white text weak. So: fills are deep (white sits on them), ink is bright (it sits on black). --ts-red-fill is the red from the boxing poster. */ --ts-red-ink:#FF3B4A; /* headings, labels, links, icons ON dark */ --ts-red-fill:#A20403; /* button + badge fills, WHITE text on top */ --ts-red-fill-lit:#C8101C; /* top of the fill gradient, hover */ --ts-red-fill-deep:#7A0202; /* pressed */ --ts-red-brand:#FF3F3F; /* legacy, light surfaces only */ --ts-red-glow:rgba(162,4,3,.5); --ts-on-red:#1A0004; /* the only text colour allowed on the ink */ /* aliases kept so nothing already written breaks */ --ts-red:var(--ts-red-ink); --ts-red-lit:#FF6470; --ts-red-deep:var(--ts-red-fill); /* ---- fenced accent: league + predictor only ---- */ --ts-navy:#1B44E5; --ts-navy-deep:#071A6E; /* ---- ink ---- */ --ts-white:#FFFFFF; --ts-mute:#9AA0BA; --ts-mute-2:#6E7490; /* ---- semantic ---- */ --ts-ok:#39D98A; --ts-warn:#FFC850; --ts-bad:#FF6470; /* ---- geometry ---- */ --ts-r-lg:22px; --ts-r-md:16px; --ts-r-sm:12px; --ts-r-pill:999px; --ts-blur:22px; /* ---- motion: iOS spring easing ---- */ --ts-ease:cubic-bezier(.32,.72,0,1); --ts-fast:.09s; --ts-base:.22s; --ts-slow:.34s; /* ---- type ---- */ --ts-display:"Barlow Semi Condensed","Arial Narrow",Helvetica,sans-serif; --ts-body:"Barlow",Helvetica,Arial,sans-serif; color:var(--ts-white); font-family:var(--ts-body); } /* Mobile: halve the blur. Forty blurred panels on a mid-range Android is the difference between smooth scroll and stutter. */ @media (max-width:900px){ .ts-dark{ --ts-blur:12px } } /* No backdrop-filter (older Android Chrome, Firefox with it disabled): fall back to an opaque fill so nothing turns unreadable. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .ts-dark{ --ts-glass:rgba(26,26,38,.94); --ts-glass-2:rgba(32,32,46,.96) } } /* Opted-in pages get the dark ground. Header and footer are the theme's, so they are left alone until stage 4. */ body.ts-dark{ background: radial-gradient(760px 480px at 82% 2%, rgba(162,4,3,.20), transparent 62%), radial-gradient(620px 460px at 6% 38%, rgba(27,68,229,.10), transparent 62%), var(--ts-ground); background-attachment:fixed; color:var(--ts-white); } body.ts-dark .main-page-wrapper, body.ts-dark .site-content, body.ts-dark .content-layout-wrapper{background:transparent} body.ts-dark .page-title, body.ts-dark .title-size-small{display:none} /* ========================================================================== TYPE ========================================================================== */ .ts-dark h1,.ts-dark h2,.ts-dark h3,.ts-dark h4,.ts-dark h5, .ts-dark .ts-display{ font-family:var(--ts-display);font-weight:700;text-wrap:balance } .ts-h1{font-size:clamp(38px,7vw,74px);line-height:.96;text-transform:uppercase;margin:0} .ts-h2{font-size:clamp(25px,4vw,40px);line-height:1.04;text-transform:uppercase;margin:0} .ts-h3{font-size:19px;text-transform:uppercase;letter-spacing:.02em;margin:0} .ts-eyebrow{font-family:var(--ts-display);font-weight:600;font-size:13px; letter-spacing:.22em;text-transform:uppercase;color:var(--ts-red);margin:0 0 12px} .ts-lede{color:var(--ts-mute);font-size:17px;max-width:62ch;margin:16px 0 0} .ts-muted{color:var(--ts-mute)} .ts-num{font-variant-numeric:tabular-nums} /* ========================================================================== SURFACES .ts-panel glass, for chrome — nav, drawers, sticky bars, feature blocks .ts-card flat translucent, NO blur — for product grids and long lists ========================================================================== */ .ts-panel{ position:relative; background:linear-gradient(160deg,var(--ts-glass-2),var(--ts-glass)); backdrop-filter:blur(var(--ts-blur)) saturate(150%); -webkit-backdrop-filter:blur(var(--ts-blur)) saturate(150%); border:1px solid var(--ts-edge); border-radius:var(--ts-r-lg); box-shadow:0 18px 44px rgba(0,0,0,.5), inset 0 1px 0 var(--ts-edge-lit); } .ts-card{ background:var(--ts-ground-2); border:1px solid var(--ts-edge); border-radius:var(--ts-r-md); transition:border-color var(--ts-base) var(--ts-ease), transform var(--ts-base) var(--ts-ease), box-shadow var(--ts-base) var(--ts-ease); } .ts-card:hover{border-color:rgba(255,59,74,.45);transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.5)} /* ========================================================================== BUTTONS — iOS behaviour: soft lift on hover, quick press, spring easing ========================================================================== */ .ts-btn{ --ts-lift:0px; display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--ts-display);font-weight:600;font-size:16px;letter-spacing:.04em; line-height:1;padding:14px 26px; border-radius:var(--ts-r-pill);border:1px solid var(--ts-edge); color:var(--ts-white);text-decoration:none;cursor:pointer; background:linear-gradient(165deg,var(--ts-glass-2),var(--ts-glass)); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); box-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 var(--ts-edge-lit); transform:translateY(var(--ts-lift)); transition:transform var(--ts-base) var(--ts-ease), box-shadow var(--ts-base) var(--ts-ease), background var(--ts-base) ease; } .ts-btn:hover{--ts-lift:-2px; background:linear-gradient(165deg,var(--ts-glass-3),rgba(255,255,255,.07)); box-shadow:0 14px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.42); color:var(--ts-white)} .ts-btn:active{--ts-lift:1px;transition-duration:var(--ts-fast); box-shadow:0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 var(--ts-edge)} .ts-btn:focus-visible{outline:2px solid var(--ts-red-lit);outline-offset:3px} .ts-btn[disabled],.ts-btn.is-disabled{opacity:.45;pointer-events:none} /* Primary: the poster red, white text. White on it measures 8.2:1 — the most readable button in the whole system. It sits quieter against the ground than the bright red would (2.4:1 vs 5.6:1), so the edge and the glow are pushed harder to keep it obviously a button rather than a dark rectangle. */ .ts-btn.is-primary{ border-color:rgba(255,59,74,.62);color:#fff; background:linear-gradient(165deg,var(--ts-red-fill-lit),var(--ts-red-fill)); box-shadow:0 10px 32px rgba(162,4,3,.62), 0 0 0 1px rgba(255,59,74,.14), inset 0 1px 0 rgba(255,255,255,.32); } .ts-btn.is-primary:hover{ color:#fff;border-color:rgba(255,90,104,.85); background:linear-gradient(165deg,#E01523,var(--ts-red-fill-lit)); box-shadow:0 16px 42px rgba(162,4,3,.78), 0 0 0 1px rgba(255,90,104,.24), inset 0 1px 0 rgba(255,255,255,.42)} .ts-btn.is-primary:active{ background:linear-gradient(165deg,var(--ts-red-fill),var(--ts-red-fill-deep))} /* Loud variant: the bright red with near-black text. Kept in the system in case a single screen ever needs a louder call than the poster red gives. */ .ts-btn.is-loud{ border-color:rgba(255,120,130,.5);color:var(--ts-on-red); background:linear-gradient(165deg,#FF5260,var(--ts-red-ink)); box-shadow:0 10px 30px rgba(255,59,74,.32), inset 0 1px 0 rgba(255,255,255,.45); } .ts-btn.is-loud:hover{color:var(--ts-on-red);border-color:rgba(255,150,158,.62); background:linear-gradient(165deg,#FF6672,#FF4655); box-shadow:0 16px 40px rgba(255,59,74,.44), inset 0 1px 0 rgba(255,255,255,.55)} /* is-deep kept as an alias so anything already marked up still works */ .ts-btn.is-deep{border-color:rgba(255,59,74,.62);color:#fff; background:linear-gradient(165deg,var(--ts-red-fill-lit),var(--ts-red-fill)); box-shadow:0 10px 32px rgba(162,4,3,.62), inset 0 1px 0 rgba(255,255,255,.32)} .ts-btn.is-deep:hover{color:#fff; background:linear-gradient(165deg,#E01523,var(--ts-red-fill-lit))} .ts-btn.is-tint{border-color:rgba(255,59,74,.42);color:var(--ts-red-ink); background:linear-gradient(165deg,rgba(162,4,3,.34),rgba(162,4,3,.14))} .ts-btn.is-tint:hover{color:var(--ts-red-ink); background:linear-gradient(165deg,rgba(162,4,3,.46),rgba(162,4,3,.2))} .ts-btn.is-sm{padding:9px 18px;font-size:14px} .ts-btn.is-lg{padding:17px 32px;font-size:18px} .ts-btn.is-icon{padding:0;width:50px;height:50px;border-radius:var(--ts-r-md)} .ts-btn.is-wide{width:100%} /* ========================================================================== SEGMENTED CONTROL ========================================================================== */ .ts-seg{display:inline-flex;padding:5px;gap:4px;border-radius:var(--ts-r-pill); background:rgba(0,0,0,.34);border:1px solid var(--ts-edge); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)} .ts-seg button{border:0;background:transparent;color:var(--ts-mute);cursor:pointer; font-family:var(--ts-display);font-weight:600;font-size:14.5px;letter-spacing:.04em; padding:9px 20px;border-radius:var(--ts-r-pill); transition:color var(--ts-base) ease, background var(--ts-slow) var(--ts-ease), box-shadow var(--ts-slow) ease} .ts-seg button:hover{color:var(--ts-white)} .ts-seg button[aria-pressed="true"]{color:#fff; background:linear-gradient(165deg,var(--ts-red-fill-lit),var(--ts-red-fill)); box-shadow:0 6px 20px rgba(162,4,3,.6), inset 0 1px 0 rgba(255,255,255,.3)} .ts-seg button:focus-visible{outline:2px solid var(--ts-red-lit);outline-offset:2px} /* ========================================================================== TOGGLE ========================================================================== */ .ts-toggle{width:64px;height:36px;border-radius:var(--ts-r-pill); border:1px solid var(--ts-edge);background:rgba(0,0,0,.4);position:relative; cursor:pointer;padding:0;flex:0 0 auto; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); transition:background var(--ts-slow) var(--ts-ease),border-color var(--ts-slow) ease} .ts-toggle::after{content:"";position:absolute;top:3px;left:3px;width:28px;height:28px; border-radius:50%;background:linear-gradient(165deg,#fff,#D7D9E6); box-shadow:0 3px 10px rgba(0,0,0,.5); transition:transform var(--ts-slow) var(--ts-ease)} .ts-toggle[aria-pressed="true"]{ background:linear-gradient(165deg,var(--ts-red-fill-lit),var(--ts-red-fill)); border-color:rgba(255,59,74,.7)} .ts-toggle[aria-pressed="true"]::after{transform:translateX(28px)} .ts-toggle:focus-visible{outline:2px solid var(--ts-red-lit);outline-offset:3px} /* ========================================================================== PILLS / BADGES ========================================================================== */ .ts-pill{display:inline-flex;align-items:center;gap:7px; font-family:var(--ts-display);font-weight:600;font-size:12px; letter-spacing:.12em;text-transform:uppercase; padding:6px 13px;border-radius:var(--ts-r-pill); border:1px solid var(--ts-edge);color:var(--ts-mute); background:var(--ts-glass);white-space:nowrap} .ts-pill.is-accent{color:var(--ts-red-lit);border-color:rgba(255,59,74,.5)} .ts-pill.is-ok{color:var(--ts-ok);border-color:rgba(57,217,138,.45)} .ts-pill.is-live::before{content:"";width:7px;height:7px;border-radius:50%; background:var(--ts-ok);box-shadow:0 0 10px var(--ts-ok)} /* ========================================================================== FIELDS ========================================================================== */ .ts-field{ font-family:var(--ts-body);font-size:16px;color:var(--ts-white); background:rgba(0,0,0,.34);border:1px solid var(--ts-edge); border-radius:var(--ts-r-sm);padding:13px 16px;width:100%; backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); transition:border-color var(--ts-base) ease, box-shadow var(--ts-base) ease} .ts-field::placeholder{color:var(--ts-mute-2)} .ts-field:focus{outline:none;border-color:var(--ts-red); box-shadow:0 0 0 3px rgba(255,59,74,.2)} /* ========================================================================== TABLE ========================================================================== */ .ts-tablewrap{overflow-x:auto} .ts-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} .ts-table th{font-family:var(--ts-display);font-weight:600;font-size:12px; letter-spacing:.14em;text-transform:uppercase;color:var(--ts-mute); text-align:left;padding:0 14px 11px;border-bottom:1px solid var(--ts-edge)} .ts-table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07);font-size:14.5px} .ts-table tr:last-child td{border-bottom:0} .ts-table th:last-child,.ts-table td:last-child{text-align:right} /* ========================================================================== LAYOUT HELPERS ========================================================================== */ .ts-wrap{max-width:1180px;margin:0 auto;padding:0 20px} .ts-stack{display:flex;flex-direction:column} .ts-row{display:flex;flex-wrap:wrap;align-items:center} .ts-gap-sm{gap:8px}.ts-gap{gap:14px}.ts-gap-lg{gap:24px} .ts-grid{display:grid;gap:20px} .ts-grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .ts-grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .ts-grid-4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} /* ========================================================================== FENCED ZONE — league + predictor keep a navy night behind the same red UI ========================================================================== */ .ts-dark.ts-pitch{ --ts-ground:#050B2E; --ts-ground-2:#0A1447; --ts-ground-3:#0F1C63; } @media (prefers-reduced-motion:reduce){ .ts-dark *{animation:none !important;transition:none !important} }