/* The Trend Line — football sites. Design system copied from trendline.hockey (league/index.html + league/team.html): same custom properties, typefaces, panel/card radius and shadows, gold kicker labels, "trend" pills. */ :root { --ink: #0a0d18; --panel: #10142a; --panel-2: #141936; --line: #232a52; --ice: #f2efe6; --ice-dim: #b9bdce; --muted: #7b81a0; --rouge: #af1e2d; --rouge-bright: #ff3b4d; --bleu: #192168; --gold: #d8b365; --green: #5fce7b; --radius: 14px; /* per-club theme vars (team pages set these inline in , before first paint) */ --accent: #af1e2d; --t-bright: #ff3b4d; --t-secondary: #192168; --t-chrome: #d8b365; --t-mast: #f2efe6; --t-strip: #af1e2d; --font-display: 'Anton', 'Arial Narrow', sans-serif; --font-body: 'Newsreader', Georgia, serif; --font-ui: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-mono: 'IBM Plex Mono', monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--ink); color: var(--ice); font-family: var(--font-body); font-size: 17px; line-height: 1.6; overflow-x: hidden; } body.team { background: linear-gradient(180deg, color-mix(in srgb, var(--rouge) 16%, var(--ink)) 0%, var(--ink) 60%) fixed, var(--ink); } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); } a { color: var(--rouge-bright); text-decoration: none; } body.team a { color: var(--t-bright); } a:hover { text-decoration: underline; } .fixture-banner { background: var(--gold); color: var(--ink); font-family: var(--font-mono); font-size: .78rem; text-align: center; padding: .45rem 1rem; position: relative; z-index: 60; } /* ----- top bar ----- */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 1.2rem; padding: .55rem 1.4rem; background: color-mix(in srgb, var(--ink) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); font-family: var(--font-ui); letter-spacing: .06em; text-transform: uppercase; font-size: .95rem; } .topbar .brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: 1.05rem; color: var(--ice); letter-spacing: .02em; white-space: nowrap; } .topbar .brand:hover { text-decoration: none; } .topbar .brand b { color: var(--rouge-bright); font-weight: 400; } .topbar .brand .flag { width: 27px; height: 18px; border-radius: 3px; overflow: hidden; flex: none; box-shadow: 0 1px 4px rgba(0,0,0,.6), 0 0 0 1px rgba(242,239,230,.35); } .topbar .brand .flag svg { display: block; width: 100%; height: 100%; } .topbar .brand .lg { font-family: var(--font-ui); font-weight: 600; font-size: .8rem; letter-spacing: .18em; color: var(--gold); margin-left: .2rem; } .topbar nav { display: flex; gap: 1rem; flex-wrap: nowrap; min-width: 0; } .topbar nav a { white-space: nowrap; } /* progressive tightening: the nav gives up letter-spacing, then gap, then size, before it gives up a row */ @media (max-width: 1180px) { .topbar { gap: .9rem; padding-inline: 1rem; } .topbar nav { gap: .78rem; } .topbar nav a { letter-spacing: .06em; } } @media (max-width: 1060px) { .topbar nav { gap: .62rem; font-size: .92em; } .topbar .brand .lg { display: none; } } .topbar nav a { color: var(--ice-dim); } .topbar nav a:hover { color: var(--ice); text-decoration: none; } .topbar select { margin-left: auto; background: var(--panel); color: var(--ice); border: 1px solid var(--line); border-radius: 8px; padding: .3rem .5rem; font-family: var(--font-ui); max-width: 15rem; } .topbar .nav-toggle { display: none; } @media (max-width: 1000px) { .topbar { flex-wrap: wrap; gap: .5rem .55rem; padding: .5rem .85rem; } .topbar nav { display: none; order: 10; flex-basis: 100%; } .topbar.nav-open nav { display: flex; flex-direction: column; gap: .1rem; margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--line); } .topbar nav a { margin-right: 0; padding: .6rem .25rem; } .topbar .nav-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--panel); color: var(--ice); border: 1px solid var(--line); border-radius: 8px; padding: .3rem .6rem; font-size: 1.15rem; line-height: 1; cursor: pointer; } .topbar.nav-open .nav-toggle { background: var(--rouge); color: #fff; border-color: var(--rouge); } .topbar select { margin-left: 0; flex: 1 1 8rem; min-width: 0; } } /* ----- video hero: the ball drop, brand lands on the ball (same geometry as the puck) ----- */ header.hero { position: relative; height: 92vh; min-height: 560px; overflow: hidden; padding: 0; background: #06080f; } .hero video, .hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero .poster { background: url('assets/video/ball-final.jpg') center/cover no-repeat; display: none; } /* soft ink scrim behind the lockup — the ball is white/black, the puck was black */ .hero .scrim { position: absolute; left: 50%; top: 50%; width: calc(var(--pr, 300px) * 2.3); height: calc(var(--pr, 300px) * 2.3); transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; z-index: 1; background: radial-gradient(circle, rgba(10,13,24,.78) 0%, rgba(10,13,24,.66) 42%, rgba(10,13,24,.28) 62%, rgba(10,13,24,0) 72%); } .on-ball, .on-ball-lower { position: absolute; left: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; opacity: 0; } .settled .scrim { animation: revealscrim .7s ease both; } .settled .on-ball { animation: revealball .9s ease .1s both; } .settled .on-ball-lower { animation: revealball .9s ease .4s both; } @keyframes revealscrim { from { opacity: 0; } to { opacity: 1; } } @keyframes revealball { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* the lockup — lifted from logo-.html (--pr = ball radius on screen) */ h1.masthead { font-family: var(--font-display); font-size: calc(var(--pr, 300px) * .27); line-height: .95; text-transform: uppercase; color: var(--ice); text-shadow: 0 2px 22px rgba(0,0,0,.6); margin: 0; } .masthead .red { color: var(--rouge-bright); } .masthead .logo2 { display: inline-block; filter: drop-shadow(0 2px 18px rgba(0,0,0,.7)); } .masthead .the { display: block; font-size: .37em; line-height: 1; letter-spacing: .54em; margin-left: .54em; margin-bottom: .32em; } .masthead .big2 { display: block; font-size: 1em; line-height: .9; letter-spacing: .01em; transform: scaleX(1.02); } .masthead .tl { display: block; width: 120%; margin: .02em 0 0 -3%; } .masthead .tl svg { display: block; width: 100%; height: auto; } .country { display: flex; align-items: center; justify-content: center; gap: calc(var(--pr, 300px) * .06); margin-top: calc(var(--pr, 300px) * .09); font-family: var(--font-ui); font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); font-size: calc(var(--pr, 300px) * .1); text-shadow: 0 1px 12px rgba(0,0,0,.8); } .country .flag { width: calc(var(--pr, 300px) * .30); height: calc(var(--pr, 300px) * .20); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.7), 0 0 0 1.5px rgba(242,239,230,.55); flex: none; } .country .flag svg { display: block; width: 100%; height: 100%; } .country span { transform: translateX(.17em); } .sous-titre { font-family: var(--font-ui); color: #c9cdda; letter-spacing: .22em; text-transform: uppercase; font-size: calc(var(--pr, 300px) * .065); margin-top: calc(var(--pr, 300px) * .07); text-shadow: 0 1px 12px rgba(0,0,0,.8); transform: translateX(.11em); } .hero-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; } .btn { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .12em; font-size: .95rem; border: none; border-radius: 8px; padding: .75rem 1.5rem; cursor: pointer; transition: transform .15s; display: inline-block; } .btn:hover { transform: translateY(-2px); text-decoration: none; } .btn-red { background: var(--rouge); color: #fff; box-shadow: 0 8px 26px rgba(175,30,45,.4); } .btn-ghost { background: transparent; color: var(--ice); border: 1px solid var(--line); } @media (prefers-reduced-motion: reduce) { .hero video { display: none; } .hero .poster { display: block; } .hero .scrim, .on-ball, .on-ball-lower { opacity: 1; animation: none !important; } } @media (max-width: 760px) { header.hero { height: 88vh; min-height: 480px; } .hero-cta { gap: .55rem; } .btn { font-size: .78rem; padding: .6rem 1rem; } } /* ----- page body ----- */ main { max-width: 1120px; margin: 0 auto; padding: 0 1.4rem 5rem; } .dek { color: var(--ice-dim); font-style: italic; font-size: 1.12rem; max-width: 820px; margin: 2.6rem 0 -1rem; } .dek b { color: var(--ice); font-style: normal; } .sec-head { display: flex; align-items: baseline; gap: 1rem; border-bottom: 2px solid var(--rouge); padding-bottom: .55rem; margin: 3.6rem 0 1.4rem; } .sec-num { font-family: var(--font-mono); color: var(--rouge-bright); font-size: .85rem; } body.team .sec-num { color: var(--t-bright); } .sec-head h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.4rem, 3.4vw, 2.1rem); font-weight: 400; letter-spacing: .03em; } .sec-head .asof { margin-left: auto; font-family: var(--font-mono); color: var(--muted); font-size: .75rem; text-align: right; } .sec-note { color: var(--ice-dim); font-size: 1rem; max-width: 760px; margin: -.6rem 0 1.2rem; } .kicker { font-family: var(--font-ui); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); font-size: .8rem; } .panel { background: linear-gradient(165deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.2rem 1rem; box-shadow: 0 18px 50px rgba(0,0,0,.35); } .chart-wrap { position: relative; height: 410px; } .chart-wrap.short { height: 330px; } .legend-hint { font-family: var(--font-ui); color: var(--muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; text-align: right; margin-top: .6rem; } .toggle-row { display: flex; gap: .5rem; margin-bottom: .9rem; flex-wrap: wrap; } .toggle-row button { font-family: var(--font-ui); letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; background: transparent; border: 1px solid var(--line); color: var(--ice-dim); padding: .42rem .95rem; border-radius: 999px; cursor: pointer; transition: all .18s; } .toggle-row button:hover { border-color: var(--rouge); color: var(--ice); } .toggle-row button.active { background: var(--rouge); border-color: var(--rouge); color: #fff; } /* season-by-season player charts: the "+ Add a player…" picker sits in the toggle row */ .add-player { font-family: var(--font-ui); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; background: transparent; border: 1px solid var(--line); color: var(--ice-dim); padding: .42rem .8rem; border-radius: 999px; cursor: pointer; margin-left: auto; max-width: 15rem; } .add-player:hover { border-color: var(--rouge); color: var(--ice); } .add-player option { background: var(--ink); color: var(--ice); text-transform: none; letter-spacing: normal; } .sub-block { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); } /* a section head one level down: same rule and Share button, smaller type */ .sec-head.sub { margin: 0 0 1rem; border-bottom-width: 1px; border-bottom-color: var(--line); padding-bottom: .4rem; } .sec-head.sub h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; letter-spacing: .04em; font-size: 1.15rem; color: var(--ice); margin: 0; } /* definitions, guards and caveats: under the chart, out of the reader's way */ .chart-foot { font-family: var(--font-mono); font-size: .64rem; color: var(--muted); margin: .9rem 0 0; line-height: 1.65; max-width: 900px; } .empty { color: var(--muted); font-family: var(--font-ui); letter-spacing: .04em; padding: 1rem 0; } /* "trend" pills — never "change" */ .chip { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .06em; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap; display: inline-block; } .chip.up { background: rgba(95,206,123,.15); color: var(--green); } .chip.down { background: rgba(255,59,77,.13); color: var(--rouge-bright); } .chip.even { background: rgba(216,179,101,.14); color: var(--gold); } .chip.none { background: rgba(123,129,160,.15); color: var(--ice-dim); } /* form strip: five squares, oldest → newest */ .form { display: inline-flex; gap: 3px; vertical-align: middle; } .form i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; background: var(--line); } .form i.W { background: var(--green); } .form i.D { background: var(--gold); } .form i.L { background: var(--rouge-bright); } .form.big i { width: 22px; height: 22px; border-radius: 5px; } /* ----- league table (the board) ----- */ .board-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(165deg, var(--panel-2), var(--panel)); box-shadow: 0 18px 50px rgba(0,0,0,.35); } table.board { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: .95rem; letter-spacing: .03em; min-width: 860px; } .board th { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 400; padding: .7rem .55rem .45rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; } .board th.l, .board td.l { text-align: left; } .board th button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; letter-spacing: inherit; text-transform: inherit; padding: 0; } .board th button:hover { color: var(--ice-dim); } .board th button.on { color: var(--rouge-bright); text-decoration: none; } .board th button.on::after { content: " \25BE"; } .board td { padding: .38rem .55rem; text-align: right; border-bottom: 1px solid rgba(35,42,82,.5); font-family: var(--font-mono); font-size: .8rem; color: var(--ice-dim); white-space: nowrap; } .board tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel) 60%, transparent); } .board tbody tr:hover { background: var(--panel-2); } .board td.pos { color: var(--muted); font-size: .7rem; width: 2rem; } .board td.club { font-family: var(--font-ui); font-size: 1rem; color: var(--ice); text-transform: uppercase; letter-spacing: .04em; } .board td.club a { color: var(--ice); } .board td.club a:hover { color: var(--rouge-bright); text-decoration: none; } .board td.club .sw { display: inline-block; width: 8px; height: 16px; border-radius: 2px; margin-right: .55rem; vertical-align: -3px; } .board td.pts { color: var(--ice); font-weight: 500; } .board td.pace { color: var(--gold); } .board-note { font-family: var(--font-mono); font-size: .64rem; color: var(--muted); margin-top: .8rem; line-height: 1.6; } /* ----- team grid cards ----- */ .cards { display: grid; gap: .8rem; grid-template-columns: repeat(4, 1fr); } @media (max-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .cards { grid-template-columns: 1fr; } } .card { display: block; background: linear-gradient(165deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem .95rem .8rem; color: var(--ice); min-width: 0; transition: border-color .15s, transform .15s; } .card:hover { border-color: var(--rouge); text-decoration: none; transform: translateY(-2px); } .card .bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; margin-bottom: .6rem; border: 1px solid rgba(242,239,230,.12); } .card .bar i { flex: 1; display: block; } .card .nm { display: block; font-family: var(--font-ui); font-size: 1.08rem; line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card .rec { display: block; font-family: var(--font-mono); font-size: .64rem; color: var(--muted); margin-top: .15rem; } .card svg.spk { display: block; width: 100%; height: 40px; margin: .55rem 0 .45rem; } .card .foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; } .card .foot .cap { font-family: var(--font-mono); font-size: .58rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; } .spark-note { font-family: var(--font-mono); font-size: .64rem; color: var(--muted); margin-top: .8rem; line-height: 1.6; } /* ----- movers ----- */ .movers-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 760px){ .movers-grid { grid-template-columns: 1fr 1fr; } } .mcol { background: linear-gradient(165deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.3rem; } .mcol h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.05rem; } .mhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .7rem; } .mhead .since { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; } .up-h { color: var(--green); } .down-h { color: var(--rouge-bright); } .mcol ol { list-style: none; counter-reset: mv; } .mcol li { counter-increment: mv; padding: .5rem 0; border-bottom: 1px solid rgba(35,42,82,.6); display: flex; align-items: flex-start; gap: .6rem; } .mcol li:last-child { border-bottom: none; } .mcol li::before { content: counter(mv, decimal-leading-zero); font-family: var(--font-mono); color: var(--muted); font-size: .72rem; padding-top: .35rem; } .mcol .mrow { flex: 1; display: block; color: inherit; border-radius: 8px; padding: .2rem .5rem; transition: background .15s; } .mcol .mrow:hover { background: rgba(175,30,45,.12); text-decoration: none; } .mcol .nm2 { font-family: var(--font-ui); font-size: 1.05rem; letter-spacing: .03em; color: var(--ice); } .mcol .delta { float: right; font-family: var(--font-display); font-size: 1.05rem; } .mcol .delta.up { color: var(--green); } .mcol .delta.down { color: var(--rouge-bright); } .mcol .ln2 { display: block; font-family: var(--font-mono); font-size: .7rem; color: var(--muted); margin-top: .15rem; } .movers-note { font-family: var(--font-ui); color: var(--muted); font-size: .88rem; letter-spacing: .04em; margin-top: .8rem; max-width: 860px; } /* ----- about / methodology prose ----- */ .about { display: grid; gap: 2rem; grid-template-columns: 1fr; max-width: 1080px; } @media (min-width: 820px){ .about { grid-template-columns: 1.4fr 1fr; } } .about h3, .prose h3 { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: 1.25rem; margin: 1.6rem 0 .6rem; } .about p, .prose p, .prose li { color: var(--ice-dim); margin-bottom: .9rem; } .prose { max-width: 820px; } .prose ul { padding-left: 1.3rem; } .prose li { margin-bottom: .4rem; } .prose code { font-family: var(--font-mono); font-size: .85rem; color: var(--ice); } .method { font-family: var(--font-ui); font-size: .95rem; color: var(--muted); border-left: 3px solid var(--bleu); padding-left: 1rem; } /* ----- team page hero ----- */ body.team header.hero { position: relative; height: auto; min-height: 0; padding: 4.5rem 1.5rem 3.5rem; text-align: center; overflow: hidden; background: radial-gradient(1150px 480px at 50% -120px, color-mix(in srgb, var(--rouge) 42%, transparent), transparent 62%), radial-gradient(950px 560px at 88% 112%, color-mix(in srgb, var(--t-secondary) 52%, transparent), transparent 60%); } body.team .kicker { color: var(--t-chrome); letter-spacing: .35em; margin-bottom: 1.1rem; } body.team h1.masthead { font-size: clamp(2.4rem, 7.5vw, 5.4rem); line-height: .98; color: var(--t-mast); text-shadow: none; } body.team .sous-titre { color: var(--muted); letter-spacing: .25em; font-size: .8rem; margin-top: .8rem; transform: none; } .status-note { max-width: 660px; margin: 1.8rem auto 0; text-align: left; background: linear-gradient(165deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-left: 4px solid var(--t-strip); border-radius: var(--radius); padding: 1.1rem 1.4rem; color: var(--ice-dim); font-size: 1.06rem; } .status-note .lbl { font-family: var(--font-ui); letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; color: var(--t-chrome); display: block; margin-bottom: .4rem; } .climb { display: flex; justify-content: center; align-items: flex-end; gap: clamp(.6rem,2.5vw,2rem); margin-top: 2.4rem; flex-wrap: wrap; } .climb .step { text-align: center; } .climb .pts { font-family: var(--font-display); font-size: clamp(1.5rem, 4.5vw, 3rem); line-height: 1; color: var(--ice); } .climb .pts.t2 { font-family: var(--font-ui); font-size: .8rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; padding-bottom: .4rem; } .climb .yr { font-family: var(--font-mono); font-size: .66rem; color: var(--muted); margin-top: .35rem; } .climb .step.now .pts { color: var(--t-bright); text-shadow: 0 0 34px color-mix(in srgb, var(--t-bright) 50%, transparent); } .climb .arrow { font-family: var(--font-ui); color: var(--muted); font-size: 1.3rem; padding-bottom: 1.2rem; } .trend-row { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.6rem; } .trend-row .chip { font-size: .86rem; padding: .25rem .8rem; } .tier-note { font-family: var(--font-ui); color: var(--muted); font-size: .85rem; letter-spacing: .04em; margin-top: .7rem; } .tier-note b { color: var(--ice-dim); font-weight: 400; } /* ----- split / match-log tables ----- */ table.tbl { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .8rem; } .tbl th { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 400; padding: .5rem .5rem .4rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; } .tbl td { padding: .38rem .5rem; text-align: right; border-bottom: 1px solid rgba(35,42,82,.5); color: var(--ice-dim); white-space: nowrap; } .tbl th.l, .tbl td.l { text-align: left; } .tbl tr.now td { color: var(--ice); } .tbl td.t2 { color: var(--muted); font-style: italic; font-family: var(--font-ui); text-align: left; } .tbl td.W { color: var(--green); } .tbl td.D { color: var(--gold); } .tbl td.L { color: var(--rouge-bright); } .tbl td.opp { font-family: var(--font-ui); font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; } .tbl td.opp a { color: var(--ice); } .tbl-wrap { overflow-x: auto; } .split-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 820px) { .split-grid { grid-template-columns: 1fr 1fr; } } .split-grid h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: .95rem; color: var(--gold); margin-bottom: .4rem; } /* ----- England club pages: player sections (carrying / ball-winners / playing time) ----- */ .chart-wrap.auto { min-height: 180px; } .caption-p { color: var(--ice-dim); font-size: 1.02rem; line-height: 1.55; margin: 1rem 0 .2rem; max-width: 860px; } .pl-tbl { margin-top: 1rem; } .tbl td.name { font-family: var(--font-ui); font-size: .98rem; text-transform: uppercase; letter-spacing: .03em; } .tbl td.name a { color: var(--ice); } .tbl td.name a:hover { color: var(--t-bright); text-decoration: none; } .tbl th[title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; } .tbl td .chip { font-size: .72rem; } /* ----- footer ----- */ footer { border-top: 1px solid var(--line); margin-top: 4rem; padding: 2.2rem 1.4rem 3rem; text-align: center; font-family: var(--font-ui); color: var(--muted); font-size: .92rem; letter-spacing: .05em; } footer .sig { font-family: var(--font-mono); font-size: .75rem; margin-top: .8rem; line-height: 1.7; } footer a { color: var(--gold); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* language toggle (EN ⇄ ES / IT), static editions in /es/ and /it/ */ .lang-toggle { font-family: var(--font-ui); font-weight: 600; letter-spacing: .18em; font-size: .72rem; color: var(--gold); border: 1px solid rgba(216,179,101,.55); border-radius: 999px; padding: .28rem .7rem; margin-right: .8rem; white-space: nowrap; text-decoration: none; } .lang-toggle:hover { background: rgba(216,179,101,.14); text-decoration: none; } .topbar .brand .wm { white-space: nowrap; } /* club photo credit (Wikimedia Commons; the credit line is a licence condition) */ .climb-lbl { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .04em; color: var(--muted); text-align: center; max-width: 62ch; margin: .5rem auto 0; line-height: 1.5; } body.team .photo-credit { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .06em; color: var(--muted); margin: 1.6rem auto 0; max-width: 60ch; } body.team .photo-credit a { color: var(--ice-dim); }