/* tokens.css */
/* ============================================================
TOKENS: one palette for the whole site, word for word.
No page invents a palette of its own: it is the same house.
============================================================ */
/* ============================================================
THE DISPLAY TYPEFACE
============================================================
Gunship, by Daniel Zadorozny (Iconian Fonts). Squared, all caps in
the way we use it: titles and headings, NEVER running text. Five
thousand words of the safeguarding document set this way would not
be readable.
IT IS OURS AND IT LIVES IN HERE: no typeface comes from outside,
just as no script and no map does. 37 KB that travel as 14, and they
download only if something really uses them.
THE LICENCE IS FOR NON COMMERCIAL USE and the club is a non profit
ASD (confirmed by the club, 18 August 2026). The licence text
travels next to the file, in assets/font/, because that is what the
licence itself asks.
swap: text shows AT ONCE in the system typeface and changes when the
file arrives. The alternative is half a second of invisible titles
on a slow connection in a gym. */
@font-face{
font-family:"Gunship";
/* The CONDENSED cut and not the round one: round, in caps and
letterspaced, pulls words wide until they look stretched. This
says the same thing in less room. */
src:url("/font/gunship-cond.147f7ded.ttf") format("truetype");
font-weight:400;
font-style:normal;
font-display:swap;
}
:root{
/* The display typeface is named HERE and used by name: the day it
changes, it changes in one place. The fallback is not "some sans
or other" but the system stack the site already uses, so until the
file arrives the page stays the same. */
--titoli:"Gunship",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
/* THE HEADER HEIGHT AND THE CREST HEIGHT, in one place only.
The drawer MUST be as tall as the strip it covers, or opening the
menu makes the mark jump. One number instead of several kept in
agreement by hand, each one an occasion to get it wrong.
The crest sits seven pixels below the top edge and seven above the
bottom one, and that air is what makes it read as a mark rather
than a plug forced between two edges. Seven and not fourteen: at
fourteen the strip becomes a tall header, and a tall header takes
a band of page away from every screen of every page.
ONE MEASURE FOR BOTH SCREENS, with no phone exception: an
exception that distinguishes nothing is just one more place to
remember to look.
The width comes from the height: 1.356 is the proportion of the
file as the pipeline produces it, white rule included. */
--testa:70px;
--stemma:56px;
/* --pad IS THE PAGE MARGIN, --gap THE STEP BETWEEN PANELS, and they
are the same number. Equal, the page reads as filled instead of
framed, and the width goes back to the content, which is what the
dense pages need: home, calendar, results.
TWO TOKENS AND NOT ONE because they say two different things: the
day the page margin has to be wider than the step, this one
changes and the other does not. */
--pad:13px;
--gap:13px;
--ground:#D3E4EF;
--head:#FFFFFF;
--head-fg:#0B1A22;
--head-dim:#54697A;
--head-line:#C2D8E5;
--menu-line:#E2ECF2;
--chrome-btn:rgba(4,26,40,.06);
--chrome-btn-h:rgba(4,26,40,.13);
--brand-dim:#02629B;
/* THE CHROME AMBER: the menu item that stands apart (safeguarding).
Not a highlight. A bright colour at the end of the row would read
as the main button, the opposite of what this is. It is picked as
LIGHT as the other items (--head-dim) and differs only in tint: it
shows as belonging to another group, not as shouting. */
--head-nota:#7A5F1E;
/* The veil of that same item when its page is open. It is the amber
itself, barely laid on the ground: "you are here" said with the
colour that item already has, instead of borrowing the blue of all
the others, which would fold it back into the group it stays out
of the rest of the time.
In rgba and not in hex because there are two grounds, the white
header and the black one, and one veil follows both. */
--head-nota-fill:rgba(122,95,30,.15);
--chrome-sel:#DCEDF7;
--chrome-sel-fg:#0377BD;
--panel:#FFFFFF;
--bar:#E8F2F8;
--bar-fg:#0B1A22;
--bar-dim:#54697A;
--bar-line:#CFE0EB;
--zebra:#EBF2F7;
--sunken:#DCE7EF;
--line:#B7CBD9;
/* THE COUNTDOWN BOXES, one tone for both screens. The phone sheet
redefines --line and --zebra to something much softer: right for
its own furniture, wrong here, since these four boxes are the same
object on both and would come out outlined in fog on the phone and
drawn on the desk. Declared here and NOT overridden in
tel/tokens.css, which is what makes them match. */
--cd-fill:#EBF2F7;
--cd-line:#B7CBD9;
--tratteggio:#B7CBD9;
--line-2:#95B0C3;
--edge:#8FADC0;
--ink:#020909;
--ink-2:#2B3C45;
--muted:#475965;
--faint:#647987;
--brand:#0377BD;
--brand-2:#02547F;
--accent:#52B2D0;
--on-brand:#FFFFFF;
/* Won / lost: the only two "semantic" colours of the house. They do
not flip between the two themes. Green and red hold on both
grounds, and changing them would look like two different clubs. */
--up:#12885A;
--down:#C6412F;
/* THE LIGHT GREEN AND RED. They are --up and --down thinned into the
ground, and they serve where the outcome is a PATCH and not a thin
word: the block of a calendar cell and the win/loss label in the
match card. The saturated full shouts there. In a grid of forty
cells it turns into a green and red chessboard, and next to two
lines of text it pulls the eye off the names. Full --up or --down
goes on top and stays the semantic colour of the house: the tone
changes, the meaning does not.
WRITTEN IN HEX AND NOT IN rgba(): a transparent veil leans on
whatever is under it, and here there are three different grounds
(panel, weekday cell, weekend cell). With a solid colour the
contrast is a single number and can be measured, and tests/theme.js
does measure it, in both themes: 3,4:1 green and 3,7:1 red in the
light, 3,4:1 and 3,3:1 in the dark.
A DRAW has no token of its own: it is neutral, and the neutral is
already there (--line-2). A third colour for "neither one nor the
other" would say something happened, and nothing did. */
--up-fill:#C9E7D8;
--down-fill:#F6D6D0;
/* THE AMBER: neither won nor lost, but "look here". It serves in one
place only: the list of warning signs in the safeguarding
document, which neither forbids nor obliges but asks to notice.
Like green and red it does not flip between the two themes. It is
a semantic colour, and changing it in the dark would mean two
meanings for the same sign. */
--warn:#A8730A;
/* The veil that marks Silea: in the table, in the match list row, in
the chosen item of the selector. Always this one, never a solid
brand fill: in the dark, white text over light cyan sits at 2,3:1
and does not read. */
--me-fill:rgba(164,210,230,.46);
/* The neutral twin of --me-fill: where --me-fill says "this is
ours", this one says "this is not". It grounds the left half of a
calendar cell, which for an away match cannot be brand. Not a new
colour but --muted veiled, so it follows the theme without chasing
it, and it stays transparent: a solid ground would disappear over
the weekend cell, which already has a ground of its own. */
--via-fill:rgba(71,89,101,.14);
--scrim:rgba(2,9,9,.55);
/* Height of the result panel body: FIXED, the same for a played
match, a countdown and a bye. One number, and one only: without
it the panel changes size at every change of matchday and the
whole column flickers. */
--hero-h:270px;
--shadow:0 16px 40px -18px rgba(6,30,46,.28);
--bird-op:.40;
/* THE SPARROW HAS TWO VERSIONS, one for light grounds and one for
dark, and the choice happens HERE because it appears in three
different sheets (the three shapes of the result card) and
choosing in three places means forgetting in one.
On light goes the DARK version and the other way round: the file
name says what colour the drawing is, not what ground it goes on.
Two files and not a filter computed on screen: the sparrow is made
of thin strokes, the open wing is all feathers, and any tint
inversion smears them. These two were drawn by whoever made the
mark. */
--passero:url("/icona-dark.1a2459a0.png");
/* THE 5x1000 SHAPES, watermarked inside the panel.
The file is white on nothing (three solid shapes, not a line
drawing) and white as a watermark works only on the dark: on the
light board the panel lets the pale blue of the page through, and
on the phone it has the paper ground, where white on white is
nothing. So the file is used not as an image but as a MASK: it
gives the shape, this line gives the colour, and one single file
tints the watermark as needed on any ground.
The alpha sits inside the colour instead of in a separate opacity:
one thing to tune, not two.
Lower than the sparrow (--bird-op, .40) because these are solid
surfaces and not feathers: at the same opacity they would not be a
watermark, they would be an illustration behind the text. */
--sagome:rgba(3,119,189,.11);
/* THE VEIL. A ground that lightens what sits under it instead of
covering it: for where a panel rests over a watermark and must not
erase it. White and not a solid tone, because it has to work over
whatever ends up behind it. */
--velo:rgba(255,255,255,.34);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--ground:#010506; --panel:#04090C; --bar:#0E1D26; --bar-fg:#E6F1F7;
--bar-dim:#8CA3B0; --zebra:#0A141A; --sunken:#0F1E27; --line:#182831;
--line-2:#2A404E; --tratteggio:#425768; --cd-fill:#0A141A; --cd-line:#22343E; --edge:#395666; --ink:#F4FAFC; --ink-2:#BFCFD8;
--muted:#90A5B1; --faint:#6E8490; --brand:#52B2D0; --brand-2:#8AD0E4;
--on-brand:#03151C;
/* --up and --down never flip, but the ground they are thinned into
does: in the dark "light" means a very dark green and red, or a
light theme patch inside a black page turns into a lightbulb.
Declared in all three states, or at night they would sit at the
light value by accident and not by choice. */
--up-fill:#0E2A20;
--down-fill:#33170F;
--me-fill:rgba(82,178,208,.16);
--via-fill:rgba(144,165,177,.14);
/* in the dark the scrim and the shadow go strong: on a dark ground
the soft ones of the light theme would not show */
--scrim:rgba(0,0,0,.66);
--shadow:0 24px 60px -18px rgba(0,0,0,.6);
--head:#020909; --head-fg:#FFFFFF; --head-dim:#9FB1BC; --head-line:#122029;
--menu-line:#16232A;
--chrome-btn:rgba(255,255,255,.10); --chrome-btn-h:rgba(255,255,255,.22);
--chrome-sel:rgba(255,255,255,.14); --chrome-sel-fg:#FFFFFF;
--brand-dim:#75C1D9;
/* In the dark the amber lightens like everything else: dim gold,
at the same lightness as --head-dim. */
--head-nota:#BFA671;
--head-nota-fill:rgba(191,166,113,.17);
--bar-line:#16262F;
--bird-op:.10;
--passero:url("/icona.e2a83984.png");
--sagome:rgba(255,255,255,.06);
--velo:rgba(255,255,255,.04);
}
}
:root[data-theme="dark"]{
--ground:#010506; --panel:#04090C; --bar:#0E1D26; --bar-fg:#E6F1F7;
--bar-dim:#8CA3B0; --zebra:#0A141A; --sunken:#0F1E27; --line:#182831;
--line-2:#2A404E; --tratteggio:#425768; --cd-fill:#0A141A; --cd-line:#22343E; --edge:#395666; --ink:#F4FAFC; --ink-2:#BFCFD8;
--muted:#90A5B1; --faint:#6E8490; --brand:#52B2D0; --brand-2:#8AD0E4;
--on-brand:#03151C;
--up-fill:#0E2A20;
--down-fill:#33170F;
--me-fill:rgba(82,178,208,.16);
--via-fill:rgba(144,165,177,.14);
--scrim:rgba(0,0,0,.66);
--shadow:0 24px 60px -18px rgba(0,0,0,.6);
--head:#020909; --head-fg:#FFFFFF; --head-dim:#9FB1BC; --head-line:#122029;
--menu-line:#16232A;
--chrome-btn:rgba(255,255,255,.10); --chrome-btn-h:rgba(255,255,255,.22);
--chrome-sel:rgba(255,255,255,.14); --chrome-sel-fg:#FFFFFF;
--brand-dim:#75C1D9;
/* In the dark the amber lightens like everything else: dim gold,
at the same lightness as --head-dim. */
--head-nota:#BFA671;
--head-nota-fill:rgba(191,166,113,.17);
--bar-line:#16262F;
--bird-op:.10;
--passero:url("/icona.e2a83984.png");
--sagome:rgba(255,255,255,.06);
--velo:rgba(255,255,255,.04);
}
/* scorrimento.css */
/* ============================================================
SCROLLBARS, ONCE AND FOR EVERYTHING
============================================================
No selector list here: the bare pseudo-element covers everything
that scrolls, the page included. A new panel has nothing to
remember, which is the only way this stays consistent.
The trap that rules a list out: with a LIST of selectors the
pseudo-element attaches only to the last one.
The phone wants it thinner (tel/base.css): 8 pixels instead of 10,
because there the screen is 390 wide and a 10 pixel bar takes a
hundredth of the usable width.
============================================================ */
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
background:var(--line-2);border-radius:6px;
border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
/* app/base.css */
@media (min-width:900px){
/* ============================================================
THE GROUND OF THE BOARD
This is not base.css: that one is the ground of the pages that
SCROLL, where the body has automatic height and the focus ring is
the brand one. Here the page does not scroll, it is a screen fixed
inside the window, and the body is a flexible column. Two pages of
two different natures: putting both things in the same stylesheet
means switching scrolling off on the sponsor page too.
============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
/* The container of the layout: the place where either the board or
the phone screen is mounted. It has to be INVISIBLE to the
geometry: it takes what is left over under the header and hands it
to its children identical, so .shell behaves as if it were still a
child of the body. */
#schermo{flex:1;min-height:0;display:flex;flex-direction:column}
body{
display:flex;flex-direction:column;
background:var(--ground);color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size:17px;line-height:1.5;font-weight:400;
-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
}
/* With the match list behind a button, the fixed-screen board holds
down to much smaller windows. */
button,a{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
.u-num{font-variant-numeric:tabular-nums}
/* The scrollbars live in styles/scorrimento.css, with no lists of
classes: they hold for everything that scrolls. */
}
/* header.css */
/* ============================================================
HEADER: stitched to the top, full width, as on the other pages.
The --gap/--pad rhythm starts here and runs downward.
============================================================ */
/* THE HEADER HEIGHT IS --testa, RULE INCLUDED, and it is written here
because this is where the header is defined. A correction living in
the sheet of an accessory component only covers the pages that have
that component.
box-sizing is already border-box from the reset: the height contains
the rule instead of adding to it. */
.top{background:var(--head);border-bottom:1px solid var(--head-line);
height:var(--testa);
position:sticky;top:0;z-index:20}
.top-in{max-width:1840px;margin:0 auto;height:100%;padding:0 var(--pad);
display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;flex:none;color:inherit;text-decoration:none}
/* THE WHOLE CREST, AND THE SAME ONE ON EVERY SCREEN.
The crest settles the balance between bird and lettering inside
itself, which is what makes a crest a crest. So there is ONE of it,
identical everywhere, and only its size changes between board and
phone. 48px tall inside a 64px header: the lettering inside the
crest stays readable and there is air above and below, so it reads
as a mark and not as a plug.
Background and not : see chrome.js. */
.brand .mark{display:block;flex:none;
height:var(--stemma);width:calc(var(--stemma) * 1.356);
background:url("/logo-volley-silea.ff7b3ca6.png") center/contain no-repeat}
/* The written name stays in the markup and off the screen: the crest
already carries it, and the link aria-label says it to anyone who
cannot see. */
.brand .wm{display:none}
/* Between 900 and ~1050px the eight items do not fit next to the mark:
instead of breaking the page they scroll inside their own strip.
min-width:0 because a flex container, left alone, will not be
squeezed below its own content. */
.nav{display:flex;gap:3px;margin-left:auto;min-width:0;
overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:9px 15px;border-radius:8px;font-size:15px;font-weight:400;
color:var(--head-dim);white-space:nowrap;transition:color .15s,background .15s}
.nav a:hover{color:var(--head-fg);background:var(--chrome-btn)}
.nav a.on{color:var(--chrome-sel-fg);font-weight:600;background:var(--chrome-sel)}
/* AN ITEM APART, NOT AN ITEM SINGLED OUT: safeguarding.
A document the law requires to be published. It sits at the end and
reads as "another thing", not as the most important one: whoever
comes for the results does not need the eye pulled over there.
NO FRAME. In a row of links a frame is an invitation to press, and
it would make this look like the header main button.
A RULE IN THE GAP instead: the mark a navigation bar has always used
to say "from here on it is another group", and it asks nothing of
anyone. It sits in the margin and not on the link, so the hover veil
stays one whole shape.
DIM AMBER, as light as the other items. The tint alone says another
family; raising the brightness too would be shouting. In the dark it
lightens along with everything else (--head-nota).
THE RULE IS THE SAME AMBER and stays one pixel. The frame grey
(--head-line) is made to detach from a white header and vanishes on
a black one, while amber shows on both and says the same thing as
the word it divides. One pixel because it is a mark of separation:
thicker, it becomes a bar that calls. */
.nav a.bordata{position:relative;margin-left:20px;color:var(--head-nota)}
.nav a.bordata::before{content:"";position:absolute;left:-11px;top:50%;
transform:translateY(-50%);width:1px;height:18px;
background:var(--head-nota)}
.nav a.bordata:hover{color:var(--head-nota);background:var(--chrome-btn)}
/* ON ITS OWN PAGE IT STAYS AMBER. "You are here" is the same pill as
every other item, tinted with the colour this item already has:
borrowing the blue would fold it back into the group it stays out of
the rest of the time, exactly while it is open.
AND THE RULE STAYS. It divides two groups, and the two groups are
there even from inside the second one. */
.nav a.bordata.on{background:var(--head-nota-fill);color:var(--head-nota);font-weight:600}
.tema{flex:none;width:38px;height:38px;border-radius:9px;border:0;cursor:pointer;
display:grid;place-items:center;color:var(--head-dim);background:transparent;
transition:color .15s,background .15s}
.tema:hover{color:var(--head-fg);background:var(--chrome-btn)}
.tema svg{grid-area:1/1;width:19px;height:19px;transition:opacity .2s,transform .2s}
.tema .ico-sole{opacity:0;transform:rotate(-60deg) scale(.7)}
.tema.scuro .ico-sole{opacity:1;transform:none}
.tema.scuro .ico-luna{opacity:0;transform:rotate(60deg) scale(.7)}
/* The hamburger exists only on the narrow layout */
.ham{display:none;width:44px;height:44px;place-items:center;border:0;cursor:pointer;
background:transparent;color:var(--head-dim);transition:color .15s}
.ham:active{color:var(--head-fg)}
.ham svg{width:20px;height:20px;display:block}
/* Below 900px the header becomes the app one: hamburger on the left,
mark in the middle, theme on the right. It is the same point where
the phone shell drops its frame, so moving from page to page the top
does NOT change under the fingers. */
@media (max-width:899px){
.top-in{padding:0 4px;gap:0;
display:grid;grid-template-columns:44px 1fr 44px;align-items:center}
.ham{display:grid}
.nav{display:none}
/* On the phone the WHOLE crest and no lettering: the name is inside
it, and in a 56px header between hamburger and theme button the
bird alone with the lettering beside it does not fit without
shrinking both below the size where they read.
The crest is THE SAME as the board one, same size: here it just
sits between two 44px buttons instead of left of a menu. --stemma
states that size once for both.
The last pixels at the top and bottom of the crest are the white
rule the file carries with it (pipeline/tools/trasparenza.js). It
is part of how the mark is made, and on the near black header it
is also the only thing detaching its shape from the ground. */
.brand{justify-content:center}
.tema{width:44px;height:44px;border-radius:0}
}
/* drawer.css */
/* --- drawer menu, the same one on every page -----------------
Same measures, weights and wording throughout. Two different menus
would make moving from one page to another feel like changing
site. */
.menu{position:fixed;inset:0;z-index:80;
background:var(--head);color:var(--head-fg);
display:flex;flex-direction:column;
opacity:0;pointer-events:none;transition:opacity .2s;
padding-bottom:env(safe-area-inset-bottom,0px)}
.menu.on{opacity:1;pointer-events:auto}
.menu-top{height:var(--testa);flex:none;display:flex;align-items:center;
justify-content:space-between;padding:0 4px 0 16px}
/* The whole crest, as in the header this drawer covers: the menu
opens and the mark stays where it was, at the same size. */
.menu-top .marchio{display:block;flex:none;
height:var(--stemma);width:calc(var(--stemma) * 1.356);
background:url("/logo-volley-silea.ff7b3ca6.png") center/contain no-repeat}
.menu .icon{width:44px;height:44px;display:grid;place-items:center;border:0;
cursor:pointer;background:transparent;color:var(--head-dim)}
.menu .icon svg{width:20px;height:20px;display:block}
/* THE ITEMS ARE THE SCROLLING PART, and flex:1 with min-height:0 is
what makes that true. Without them a child with overflow does not
shrink inside a flex column: it grows and spills past its container,
and on a short screen the footer rule cuts the last item in half. */
/* THE ITEMS SIT IN TWO COLUMNS. Eleven items fit in six rows and all
land on screen together: the drawer opens and the whole site is
there, with nothing to drag to reach Contatti.
EVERY ITEM IS A CELL, all the same size. The grid makes them equally
wide by construction, and align-items:stretch (the default, so it is
not written) makes them as tall as the tallest of their row. The
minimum is sixty-four pixels, above the forty-four a finger needs.
THE TYPE IS 17. At half the screen width "Calendario" does not fit
at 24 bold, and a word wrapping inside a cell undoes the grid the
cell is there to build. */
.menu nav{flex:1;min-height:0;
padding:18px;overflow-y:auto;
display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.menu nav a{color:var(--head-fg);
font-size:17px;font-weight:700;letter-spacing:-.02em;
min-height:64px;padding:12px 14px;
border:1px solid var(--menu-line);border-radius:12px;
display:flex;align-items:center;gap:10px}
/* THE ITEM OF THE OPEN PAGE is tinted in three places: text, border
and a veil of background. Among eleven identical cells one blue word
between ten white ones is a detail that gets lost, while a tinted
cell is found without looking for it. */
.menu nav a.on{color:var(--brand);border-color:var(--brand);
background:color-mix(in srgb, var(--brand) 13%, transparent)}
.menu nav a small{font-size:9px;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:var(--head-dim);
border:1px solid var(--menu-line);border-radius:4px;padding:2px 5px}
/* THE DRAWER FOOTER: who this club is.
On the board it sits in a strip at the bottom of the screen. Here it
cannot: below 900px the bottom belongs to the sponsor bar and the
page does not scroll. So it sits where people look for what the
screen does not show.
TRULY AT THE BOTTOM: margin-top:auto pushes it to the last row of
the column even when few items would leave it hanging halfway. The
rule separates it from the items, which are large and made to be
touched; this text is small and made to be read, and with no line
between them it would read as the last menu item.
The bottom safe margin already belongs to .menu. */
.menu-piede{
margin-top:auto;flex:none;
padding:10px 22px 12px;
border-top:1px solid var(--menu-line);
font-size:10.5px;line-height:1.45;color:var(--head-dim);
}
.menu-piede p{margin:0}
.menu-piede p + p{margin-top:3px}
.menu-piede .sep{margin:0 .5em;opacity:.5}
/* SHORT SCREENS. On a 360x640, still around, six rows plus header plus
footer overflow by twenty pixels and the drawer starts scrolling.
Everything tightens: shorter cells, less air between them, one pixel
less type. Fifty-six pixels of cell remain, above the forty-four a
finger needs. */
@media (max-height:700px){
.menu nav{padding:14px;gap:8px}
.menu nav a{min-height:56px;padding:10px 12px;font-size:16px}
}
/* One step further down for the shortest of all: a 360x560, or an
ordinary phone turned sideways. Fifty pixels are still above the
forty-four of a finger. It goes no lower: if more room is ever
needed it scrolls, which by then is the right answer. */
@media (max-height:600px){
.menu nav{padding:12px;gap:7px}
.menu nav a{min-height:50px;padding:8px 12px;font-size:15.5px}
}
@media (min-width:900px){ .menu{display:none} }
.toast{position:fixed;left:50%;bottom:30px;z-index:90;
transform:translate(-50%,10px);
background:var(--ink);color:var(--panel);
font-size:13px;font-weight:500;padding:10px 16px;border-radius:10px;
opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* Safeguarding stands apart down here too, in the dim amber of the
header. It takes the whole grid width, and its weight stays that of
the other items: a different item, not a more important one.
AMBER, not the grey of the chrome: that grey is made to detach from
a light ground and disappears on the black drawer.
ON ITS OWN PAGE IT STAYS AMBER: the other selected items turn brand,
this one already has its colour. */
.menu nav a.bordata{grid-column:1 / -1;
color:var(--head-nota);border-color:var(--head-nota)}
.menu nav a.bordata.on{color:var(--head-nota);border-color:var(--head-nota);
background:color-mix(in srgb, var(--head-nota) 13%, transparent)}
/* piede.css */
/* ============================================================
THE FOOTER: ONE LINE, AT THE BOTTOM OF THE SCREEN
============================================================
Who this club is, by law and by manners: full name, registered
office, tax code, VAT number and federation code. On one line, in
small type, in a grey that does not call. This is not text to read,
it is text to find when looked for: catching the eye would steal
attention from what the page exists for.
IT IS FIXED, and that is not an aesthetic choice. On the board most
pages are window-tall screens that do not scroll (app/base.css:
html,body{overflow:hidden}), so "the bottom of the page" is not a
place there. The only page that really scrolls is sponsor, and a
fixed bar is what that one needs anyway: the footer is not a reward
for reaching the end of fifteen brands.
THE BODY GIVES UP THE SPACE, not the footer. A fixed element leaves
the flow and would pass OVER the content, so the body shortens by
the same amount and both cases hold: the fixed screen tightens, the
scrolling page ends higher up. The height lives in a token because
the footer declares it and the body uses it. Written twice, a change
to the type size would show up as a covered line or a finger of
emptiness.
ON THE PHONE IT IS NOT THERE. Down here the bottom of the screen
already belongs to the sponsor bar, and a second strip under the
first would eat screen from a view that has little. The phone footer
is still to be decided: see the note at the end.
============================================================ */
:root{ --piede-h:30px; }
.piede{
position:fixed;left:0;right:0;bottom:0;z-index:6;
height:var(--piede-h);
display:flex;align-items:center;justify-content:center;
padding:0 16px;
background:var(--bar);
border-top:1px solid var(--bar-line);
/* Not text to read: text to find. Small, in a grey that stays back,
and never wrapping. One line that on a narrow window shortens with
an ellipsis instead of becoming two and breaking the strip. */
/* LINE HEIGHT CANNOT BE 1. At line height one the line is as tall as
the type, and the descenders (the p of "Sportiva", the g, the q)
fall OUTSIDE the line: with overflow:hidden above, they get cut in
half. A comfortable line height keeps them in, and centring the
line in the strip is the job of align-items, not of the text
height. */
font-size:11.5px;line-height:1.45;letter-spacing:.01em;
color:var(--bar-dim);
white-space:nowrap;overflow:hidden;
}
.piede p{
max-width:100%;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The separator dots: lighter than the text, because all they do is
separate. The space around them comes from margins, not from two
spaces written in the markup, which at the end of a line would add
themselves to the ellipsis. */
.piede .sep{margin:0 .55em;opacity:.5}
/* The body shortens by the height of the footer.
On fixed screens this tightens the column and nothing ends up under
the strip; on the scrolling page it is the last piece of document
that stops higher up. */
body{padding-bottom:var(--piede-h)}
/* ------------------------------------------------------------------
ON THE PHONE, FOR NOW, NOTHING.
The bottom of the screen belongs to the sponsor bar, and below 900px
the page does not scroll (tel/base.css says so in words: "niente
scorre a livello di pagina"), so there is no "bottom" to put a
footer in flow. It would go at the end of the scrolling strip,
inside .scroll, and that strip is mounted by the phone layouts one
by one: a job to do calmly and in one pass.
Meanwhile the footer does not show and steals no room: absent beats
wrong. The natural exception is the sponsor page, a document that
below 900 really scrolls, where a trailing footer would work on its
own. Keeping it on one page and not the others would be the worst of
the three.
------------------------------------------------------------------ */
@media (max-width:899px){
.piede{display:none}
body{padding-bottom:0}
}
/* THE ONLY ITEM THAT LEADS ANYWHERE. It sits among text nobody
touches, so it must not shout but must still be recognisable: same
colour as the rest, underlined on hover. */
.piede a{color:inherit;text-decoration:none}
.piede a:hover,.piede a:focus-visible{text-decoration:underline}
/* app/rail.css */
@media (min-width:900px){
/* ============================================================
THE HEADER (the two corrections) + THE SPONSOR BAR
============================================================ */
/* The header is drawn by header.css, which belongs to every page. On
this one, though, it has to behave in two ways different from
there, and neither difference is a matter of taste:
1. IT IS NOT STUCK. The board is a fixed screen: nothing scrolls
and a sticky has nothing to follow. Below 960px, however, the
page really does scroll again (flow mode, at the bottom of
pages/risultati.css) and there a sticky shows: the header stays
glued to the top while the rest scrolls away.
2. IT IS --testa TALL IN FULL, border included. header.css puts the
min-height on the CONTENT and the border adds to it: one pixel
more across the whole width, which pushes down everything that
comes after. With box-sizing:border-box the height on the band
includes the hairline, and the content stays one pixel lower.
The min-height has to go off along with it, otherwise it wins:
half a pixel, but it is half a pixel on the mark, the entries
and the theme button, that is on the whole top of the page.
THE HEIGHT IS SPOKEN BY THE TOKEN and not by a number typed
here. This sheet arrives after header.css, so a number typed
here wins over the token: the crest is left with four pixels
above and four below, wedged between the two borders. A second
place where the same measure is written is a second place to
remember.
It sits here and no higher up because it has to arrive AFTER
header.css. */
.top{position:static;flex:none;height:var(--testa)}
.top-in{height:100%;min-height:0}
/* THE BAR HANGS FROM THE HEADER, it does not float below it.
The two do the same job (staying at the top and not scrolling)
and set apart they read as two bands of navigation, one inside the
other.
So they touch: no gap above, the top border of the bar is the
bottom border of the header, and the corners go square where the
two meet. It is the same way a round's cards attach to the day bar
on the phone (tel/gara.css): the piece above acts as the border of
the piece below.
Below, instead, the gap stays: that is where the content of the
page begins, and that is another matter. */
.railwrap{flex:none;max-width:1840px;width:100%;margin:0 auto;
padding:0 var(--pad)}
/* A padding of 5, and the ten pixels it spares all go to the plate:
the bar stands 68px tall and the logo takes the largest share of
it. Horizontal room is not scarce, so the gap stays 10. */
.rail{background:var(--panel);border:1px solid var(--edge);
border-top:0;border-radius:0 0 14px 14px;
padding:5px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
--h:48px} /* usable height of the logo inside the plate */
/* The plate stays white at night too. The sponsors' files carry a
white background baked in (none of them has an alpha channel): on a
dark panel that shows as fifteen white rectangles. A plate fixed to
white = the file's background disappears into the plate. */
.slot{height:56px;border-radius:9px;background:#fff;border:1px solid var(--line);
display:grid;place-items:center;overflow:hidden;padding:0 12px;
transition:border-color .16s,box-shadow .16s}
.slot:hover{border-color:var(--brand);box-shadow:0 1px 7px rgba(3,119,189,.18)}
/* --k evens out the AREA between logos of very different proportions:
left alone, a 4:1 wordmark as tall as a square logo weighs three
times as much. object-fit scales back when the logo is wider than
the plate, so the proportion is never distorted. */
.slot img{display:block;width:100%;height:calc(var(--h) * var(--k,1));
object-fit:contain;object-position:center;transition:opacity .42s ease}
.slot img.out{opacity:0}
.slot img.scuro{border-radius:3px} /* logos with a dark plate keep clear of the corners */
}
/* app/griglia.css */
@media (min-width:900px){
/* ============================================================
THE GRID
============================================================ */
.shell{
flex:1;min-height:0;overflow:hidden;
max-width:1840px;width:100%;margin:0 auto;
/* above it is a gap between panels, below it is the frame of the
page: this way the bottom margin matches the side ones */
padding:var(--gap) var(--pad) var(--pad);
display:grid;grid-template-columns:284px minmax(0,1fr) 400px;gap:var(--gap);
}
.side{min-height:0;min-width:0;display:flex;flex-direction:column}
.side .panel{flex:1}
/* the hero is as tall as its content (constant), the rest goes to the list */
.centre{display:grid;grid-template-rows:auto minmax(0,1fr);gap:20px;min-height:0;min-width:0}
.aside{display:grid;grid-template-rows:minmax(0,1fr);min-height:0;min-width:0}
/* Below 1400px the centre would drop under the ~594px the box score
needs, and the names would break one letter at a time. Better to
take the table away and call it back from a button in the bar. */
@media (max-width:1399px){
.shell{grid-template-columns:284px minmax(0,1fr)}
.aside{display:none}
.side-links .side-tbl{display:flex}
}
@media (max-width:960px){
.shell{grid-template-columns:minmax(0,1fr);padding-bottom:26px}
.aside{display:grid} /* in a single column there is room for it again */
.side-links .side-tbl{display:none}
}
.panel{background:var(--panel);border:1px solid var(--edge);border-radius:14px;
display:flex;flex-direction:column;min-height:0;overflow:hidden}
/* dark bar */
/* THE BAR IS 38 HIGH, everywhere. Every extra pixel of dark band is
paid four times over on a board with four panels: sixteen more each
are sixty pixels of screen spent on frame instead of on content.
It is a MINIMUM, not a height: a bar with something taller inside
(the matchday buttons, which are 38 round) grows by itself. */
.p-head{flex:none;background:var(--bar);color:var(--bar-fg);
border-bottom:1px solid var(--bar-line);
padding:0 20px;min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:14px}
/* THE PANEL TITLE IS IN THE SAME FACE AS EVERYTHING ELSE. The brand
face looks good on a sign, but at 13px in spaced uppercase its
squared letters read one character at a time instead of one word at
a time, and a panel title is read in passing: it is the thing that
says WHERE YOU ARE, and if it costs attention it has already
failed.
The brand face, on this site, lives inside the crest. */
.p-head .t{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.p-head .t.dim{color:var(--bar-dim);font-weight:400}
}
/* app/contatti.css */
@media (min-width:900px){
/* ============================================================
CONTACTS: THE BOARD
============================================================
ONE SINGLE PANEL, the width of the sign-up one: 950 across,
centred.
INSIDE, THREE BANDS:
[ SEGRETERIA ] [ PRESIDENTE ] the two with a name and
several ways to reach them
[ ISCRIZIONI ] [ PRIVACY ] the two with one mailbox and
nothing else
[ the association, at full width ]
THE PAIRING GOES BY WEIGHT, not by hierarchy. Mixed (a full one
beside a short one) every row closes at the height of the tallest
and under the short one a two-line hole is left. Pairing the ones
that weigh the same, every row closes by itself.
============================================================ */
.app{flex:1;min-height:0;display:flex;flex-direction:column}
/* This page carries no logos anywhere, like the sign-up one: the
strip is not in the markup, so there is nothing to hide. */
.shell.ct{display:flex;align-items:center;justify-content:center;
padding:var(--gap) var(--pad) var(--pad)}
/* NEVER MORE THAN 85vh, AND NEVER MORE THAN WHAT IS LEFT.
============================================================
On a short screen (a 1366x620 laptop, a window that is not full
screen) a panel 560 tall plus the header plus the bar of logos do
not fit: the panel breaks out below and above, ending up behind the
menu bar.
THREE MEASURES, AND THE SMALLEST WINS. Each covers a case the other
two do not see:
560px what the panel wants when there is room;
85vh the ceiling asked for: never more than five sixths of the
screen;
100% what is REALLY left inside the board, that is the screen
minus header, bar of logos and foot.
The 100% is not a duplicate of the 85vh: at a height of 620 the
85vh is worth 527, but there are 440 free, and a panel of 527
centred in 440 spills 43 above and 43 below. With the 85vh alone
the measure comes out "within the rules" and the panel is cut all
the same.
NO MINIMUM HEIGHT. A minimum taller than the content opens all of
its spare pixels in one single place, between the row of cards and
the association band, because the band leans on the bottom. A panel
that closes on its own content has no gaps to hand out. The width
instead stays that of the sign-up panel: that is where the two
panels have to resemble each other. */
.ct-scheda-grande{width:100%;max-width:950px;margin:0 auto;
max-height:min(85vh, 100%);
display:flex;flex-direction:column}
.ct-corpo{flex:1;min-height:0;overflow:auto;
padding:26px 28px 22px;display:flex;flex-direction:column;gap:20px}
/* --- the cards --- */
/* TWO ROWS, TWO STEPS: two columns above, three below.
They are two grids and not a single six-column one with the cards
taking three or two each: that one holds as long as the cards are
two plus three, and falls out of order in silence at the first one
added. Two separate grids widen by themselves.
Inside each row the cards close at the same height, which is the
grid's default behaviour, which is why it is not written. */
.ct-schede{display:flex;flex-direction:column;gap:16px}
.ct-fila{display:grid;gap:16px}
.ct-alte {grid-template-columns:repeat(2,1fr)}
.ct-basse{grid-template-columns:repeat(3,1fr)}
/* ONE SINGLE COLOUR FOR ALL OF THEM: the blue of the mark.
Four colours on four cards side by side distinguish nothing: they
make the cards look like four things of a different nature, when
they are the same thing four times over. Colour here serves to hold
them together, not to separate them: the titles are enough to tell
them apart.
The --tinta variable stays because the bar, the plate, the signs
and the hover all use it: changing it in one place changes them
all. */
.ct-scheda{
--tinta:var(--brand);
position:relative;
display:flex;flex-direction:column;
padding:18px 20px 18px 22px;
border:1px solid var(--line-2);border-radius:12px;
background:var(--velo);
overflow:hidden;
}
.ct-scheda::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
background:var(--tinta);
}
/* The title is a small plate, like the tags of the safeguarding
policy: one word in small caps inside a ground of its own tint. */
.ct-scheda h2{
/* align-self, not inline-block: the card is a flex column, so a
child spreads across the whole row unless it is told to stay
narrow, and the plate becomes a band from one end of the card to
the other. */
align-self:flex-start;margin:0;
padding:3px 10px;border-radius:999px;
background:color-mix(in srgb, var(--tinta) 13%, transparent);
color:var(--tinta);
font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.ct-chi{margin:10px 0 0;font-size:19px;font-weight:600;color:var(--ink);line-height:1.2}
/* The contact lines lean on the bottom of the card: margin-top:auto
eats up the space left over. This way the lines of two cards side
by side line up with each other even when the texts above are of
different lengths, and the place one taps is always the same. */
.ct-righe{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:1px}
/* --- one contact line --- */
/* THE WHOLE LINE IS THE LINK, the sign included: a target as wide as
the card is hit without aiming. */
.ct-riga{
display:flex;align-items:center;gap:10px;
margin:0 -6px;padding:7px 6px;border-radius:8px;
color:var(--ink-2);text-decoration:none;font-size:14.5px;
transition:background .12s,color .12s;
}
.ct-riga:hover{background:color-mix(in srgb, var(--tinta) 9%, transparent);color:var(--tinta)}
.ct-riga:focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}
/* The sign takes the tint of the card: it is the thread that ties the
bar on the left to the contact lines, instead of leaving the colour
to act as a piping and no more. */
.ct-segno{flex:none;display:grid;place-items:center;width:18px;height:18px;color:var(--tinta)}
.ct-segno svg{width:18px;height:18px;display:block}
.ct-testo{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* --- the association, the band at the foot --------------------------
On a sunken ground rather than a light one: it is a block of a
different nature from the ones above (one does not write to a tax
code) and the change of ground says so without needing a heading
to announce it.
ONE SINGLE ROW: who we are on the left, the codes on the right.
Wrapped onto two lines, with the identity above and the codes
below, the band doubles in height to say the same six things.
-------------------------------------------------------------------- */
/* TWO PIXELS, AND OF THE DARKER HAIRLINE. With one of --line, which
is the lighter of the two hairline tokens, under five cards bordered
in --line-2 the band comes out lighter than what stands above it,
and on the light theme it nearly disappears. It is the block that
closes the page and carries the data the association identifies
itself with: its border has to weigh more than theirs, not less. */
.ct-ente{
margin-top:auto;
padding:15px 19px;border-radius:12px;
background:var(--sunken);border:2px solid var(--line-2);
display:grid;grid-template-columns:auto 1fr;align-items:center;
column-gap:24px;row-gap:5px;
}
.ct-ente-nome{grid-column:1;grid-row:1;margin:0;
font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.ct-ente-sede{grid-column:1;grid-row:2;margin:0;
font-size:13px;color:var(--muted);white-space:nowrap}
/* FIVE COLUMNS OF EQUAL WIDTH, all aligned to the left, and the PEC
is the fifth of them and not a block on its own at the other end of
the band.
repeat(5,1fr) and not a flex that hands out the space: with flex
every entry is as wide as its content and the labels do not line
up, so there is no grid for the eye to run down. The 1fr are equal
by construction, and they stay equal the day a code grows
longer. */
.ct-codici{grid-column:2;grid-row:1 / span 2;margin:0;
display:grid;grid-template-columns:repeat(5,1fr)}
/* A HAIRLINE BEFORE EVERY CELL, the first one included: the one in
front of the tax code is the cut between who we are and the numbers
we identify ourselves with, the other four divide one number from
the next. An empty space does not say where one ends and the other
begins: two long numbers side by side read as a single number.
The hairline sits on the left and not on the right, so the last
cell does not carry a line that divides nothing. */
.ct-codici > div{display:flex;flex-direction:column;gap:2px;min-width:0;
padding-left:16px;border-left:1px solid var(--line-2)}
.ct-codici dt{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--faint)}
.ct-eti-lunga{display:none} /* up here the short form is the one shown */
.ct-codici dd{margin:0;font-size:13px;color:var(--ink);
font-variant-numeric:tabular-nums;letter-spacing:.01em;min-width:0}
.ct-codici dd a{color:var(--brand);text-decoration:none}
.ct-codici dd a:hover{text-decoration:underline}
/* --- short screens --------------------------------------------------
Below a certain height the panel no longer fits: instead of making
the page scroll, the cards tighten up, and if that is not enough
the body scrolls inside the panel. */
@media (max-height:780px){
.ct-scheda{padding:14px 16px 14px 18px}
.ct-chi{font-size:17px}
.ct-corpo{padding:18px 20px 16px;gap:14px}
.ct-schede{gap:12px}
}
}
/* tel/tokens.css */
@media (max-width:899px){
/* ============================================================
THE PHONE PALETTE: the one for showing, not another house.
============================================================
These values are NOT the ones in tokens.css. The two screens tune
their greys differently: the board keeps rules and secondary text
stronger (--line #B7CBD9) because it has to carry large panels and
dense tables, while the phone keeps them much fainter
(--line #E2ECF2) because at 390px a dark rule becomes a cage.
Tipping one onto the other is not a tidy up, it is a redesign.
The WAY the ground is named changes too. The board says --panel and
--ground, the phone says --paper and --surface. Different names for
the same idea, listed in docs/DIVERGENZE.md: until the club picks
one, both stay.
THREE STATES, as everywhere: bare :root is the light one, the block
inside prefers-color-scheme is for whoever has a dark system and has
not chosen, :root[data-theme="dark"] is for whoever has chosen. A
token declared in the light and forgotten in one of the two darks
stays light at night, which is the classic unreadable page defect:
tests/css.js checks this sheet too.
The (max-width:899px) band is not written here: build/build.js adds
it, together with the order. */
:root{
--ink: #020909;
--ink-2: #40525C;
--brand: #0377BD;
--on-brand: #FFFFFF;
--accent: #52B2D0;
--paper: #FFFFFF;
--surface: #F4F8FB;
--sunken: #EAF1F6;
--line: #E2ECF2;
--line-2: #D3E1EA;
/* THE TONE OF THE DOTTED RULE. A dotted rule does not show like a
solid one: fewer than half its pixels are lit, so at equal colour
it comes out lighter than it is. This tone is one step stronger
than --line-2 in both themes, which is the amount that makes a
dotted line weigh as much as a solid --line-2 one. */
--tratteggio: #BACDDA;
/* DARK ENOUGH TO READ: --faint stays above 4.5:1 and --muted above
7:1, the two AA thresholds for text. A grey under 3:1 on light
paper is not "readable with effort", it is not there at all, and
the phone is the screen that needs more contrast and not less:
outdoors, with the display dimming itself. */
--muted: #4C5E6A;
--faint: #5F7280;
/* Header and drawer follow the theme like everything else. The rule
under the header is lighter than on the board: there it separates
two panels, here it only separates the top from the content. */
--head: #FFFFFF;
--head-fg: #0B1A22;
--head-dim: #54697A;
--head-line: #DCE8F0;
--menu-line: #E2ECF2;
--up: #12885A;
--down: #C6412F;
/* The LIGHT green and red, for the win/loss label in the agenda
card. Same idea as the board (styles/tokens.css), and in the light
theme the same values too, because the starting green and red are
the same here. In the dark they are not: there the phone lightens
--up and --down and the patch under them has to follow. Solid and
not veiled, since a veil leans on what is under it and here there
are two different grounds (the paper and the day strip).
Measured contrast of the text on top: 3,4:1 green and 3,7:1 red in
the light, 5,4:1 and 4,7:1 in the dark, better in the dark because
there the phone lightens --up and --down.
CAREFUL: tests/theme.js resolves the tokens from the BOARD
palette, so nothing measures these four lines on its own. They are
computed by hand, and have to be redone by hand if anyone touches
--up or --down above. */
--up-fill: #C9E7D8;
--down-fill: #F6D6D0;
--silea-fill: rgba(164,210,230,.16);
--set-win: rgba(164,210,230,.55);
--bird-op: .40;
/* MINIMUM height of the Silea card: the same with a result, with a
countdown and with a bye. Left to itself the card comes out ~206px
with a result, ~187px waiting and ~150px on a bye, so changing
matchday makes it dance and the whole list below with it. On the
board the same number is 270px, because the five column box score
fits in there as well. */
--hero-h: 212px;
--scrim: rgba(2,9,9,.45);
/* The ground the app rests on. It never shows, since the screen
covers all of it, but if one day something did not reach the
bottom, what lies under is this and not the white of the
browser. */
--stage: #DCE7EE;
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--ink: #EFF6F9;
--ink-2: #BCCAD2;
--brand: #52B2D0;
--on-brand: #03151C;
--accent: #52B2D0;
--paper: #0B1317;
--surface: #050C0F;
--sunken: #101B21;
--line: #182831;
--line-2: #22343E;
--tratteggio: #3E525F;
--muted: #7F949F;
--faint: #5D717C;
--head: #020909;
--head-fg: #FFFFFF;
--head-dim: #7E939F;
--head-line: #122029;
--menu-line: #16232A;
/* In the dark the green and red of the board would disappear into
the ground: here they gain brightness. It is the only point
where the two layouts disagree even on semantic colours. */
--up: #2AAE74;
--down: #E0604D;
/* In the dark "light" means dark: the patch has to stay under the
green and red lightened above, not over them. */
--up-fill: #0F2A21;
--down-fill: #2E1A15;
--silea-fill: rgba(82,178,208,.10);
--set-win: rgba(82,178,208,.20);
--bird-op: .10;
--scrim: rgba(0,0,0,.62);
--stage: #04090C;
}
}
:root[data-theme="dark"]{
--ink: #EFF6F9;
--ink-2: #BCCAD2;
--brand: #52B2D0;
--on-brand: #03151C;
--accent: #52B2D0;
--paper: #0B1317;
--surface: #050C0F;
--sunken: #101B21;
--line: #182831;
--line-2: #22343E;
--tratteggio: #3E525F;
--muted: #7F949F;
--faint: #5D717C;
--head: #020909;
--head-fg: #FFFFFF;
--head-dim: #7E939F;
--head-line: #122029;
--menu-line: #16232A;
--up: #2AAE74;
--down: #E0604D;
--up-fill: #0F2A21;
--down-fill: #2E1A15;
--silea-fill: rgba(82,178,208,.10);
--set-win: rgba(82,178,208,.20);
--bird-op: .10;
--scrim: rgba(0,0,0,.62);
--stage: #04090C;
}
}
/* tel/base.css */
@media (max-width:899px){
/* ============================================================
THE GROUND OF THE PHONE SCREEN
============================================================
There is no frame around the screen: the ground and the clipping are
shared between the body of the page and #schermo.
NOTHING SCROLLS AT PAGE LEVEL. Only the middle strip scrolls, inside
the app, and that is what makes the screen feel like an application
and not a document. With a scrolling body the sheets rising from the
bottom would drag the page along under them, and the sponsor bar at
the foot would slide away.
This sheet also redoes the reset (*, button, :focus-visible):
app/base.css does it for the board and is bounded above 900px, so it
does not reach down here. The four lines are not identical to the
board ones: the type is 16px at line height 1,4, not 17 and 1,5. */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{height:100%;overflow:hidden}
body{
display:flex;flex-direction:column;
background:var(--stage);
color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size:16px;
line-height:1.4;
-webkit-font-smoothing:antialiased;
-webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.u-num{font-variant-numeric:tabular-nums}
.lbl{
font-size:10px;font-weight:700;letter-spacing:.09em;
text-transform:uppercase;color:var(--muted);
}
/* #schermo takes whatever is left under the header and passes it on
unchanged to the app. overflow:hidden: a panel that overflows
overflows inside its own strip and does not lengthen the page. The
sheets rising from the bottom are untouched, being fixed, so the
clipping of an ancestor does not reach them. */
#schermo{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.app{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--surface)}
.scroll{
flex:1;min-height:0;
overflow-y:auto;overflow-x:hidden;
overscroll-behavior-y:contain;
-webkit-overflow-scrolling:touch;
scroll-behavior:smooth;
}
/* One pixel tall and at the top of the scrolling strip: when it leaves
the view, the header recomposes. One pixel and not zero, because an
element with no height never intersects anything. */
#sentinel{height:1px}
/* The scrollbar, thinner than on the board: here the screen is 390 and
ten pixels are a fortieth of the usable width. The rest (colours,
radius, transparent frame) comes from styles/scorrimento.css and is
not repeated. */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{border-radius:5px;border-width:2px}
}
/* tel/testata.css */
@media (max-width:899px){
/* ============================================================
THE HEADER, ON THE PHONE: corrections and the name that recomposes
============================================================
The header is drawn by header.css, which belongs to every page, and
below 900px it already draws it nearly as the phone wants: hammer on
the left, brand in the middle, theme on the right, three columns
44 · 1fr · 44. Four differences are left, and none of them is taste.
1. --testa TALL IN ALL, hairline included, and with no padding.
header.css puts min-height on the CONTENT and 4px of side
padding: the hairline adds to it (one pixel across the width that
pushes everything down) and the two icons slide 4px towards the
middle. With box-sizing:border-box the height on the band takes
in the hairline and the content stays a pixel lower. The
min-height goes off with it, or it wins.
2. NOT sticky. The page does not scroll here, only the middle strip
does: a sticky would have nothing to follow.
3. THE WEIGHTS. The shared chrome works on the board scale, where
the highest declared is 600; the phone writes brand and watermark
at 800. It is one of the catalogued divergences
(docs/DIVERGENZE.md): it is not unified, it is reproduced.
4. The theme button carries the 20px icon like the other two, not
the 19 of the board. Half a pixel a side, but it is half a pixel
in the top right corner of every screen.
The colour is declared on .top so the children inherit it: the
competition name below sets none of its own, and without this line
it would inherit --ink, which on the light theme is darker than
--head-fg. */
.top{position:static;flex:none;height:var(--testa);color:var(--head-fg);overflow:hidden}
.top-in{height:100%;min-height:0;padding:0;position:relative}
.tema svg{width:20px;height:20px}
/* HALF A PIXEL, AND IT SHOWS.
THE LINK IS AS BIG AS THE CREST, not as the column. .brand leads to
the home page and is the middle cell of a 44 · 1fr · 44 grid: as a
grid item it stretches across the whole middle column and takes the
full height of the band, so a finger landing anywhere at the top (to
scroll, or by mistake) leaves the page. A brand is tapped where the
brand is seen: justify-self tightens it onto the content and the
height drops to that of the crest. That leaves 76 by 56 pixels of
target, well over the 44 a tappable thing has to measure.
The two measurements are EVEN and so is the band: the brand centres
on a whole pixel and its edges keep their colour. With odd
measurements it would redraw half a pixel higher, and that is the
difference the test finds first. */
.brand{height:var(--stemma);justify-self:center}
/* ------------------------------------------------------------------
THE HEADER THAT RECOMPOSES
Scrolling, the competition bar leaves the stage and its name
recomposes in the middle of the header: whoever looks never loses
sight of what is being read, and the matchday stays stuck below.
The middle column here is .brand, which comes from the shared
chrome: wrapping it would change it for the sponsor page too, for a
piece one page needs. So the second layer overlaps instead, and
left/right at 44px are exactly the two edges of the middle column.
The class "collapsed" sits on the BODY: the header is outside
#schermo, and lighting both layers with a single class takes a
common ancestor.
------------------------------------------------------------------ */
.hdr-comp{
/* The full height and not "top to bottom": it is the same box, and
it overruns the content of the band by a pixel. With bottom:0 the
box would be a pixel shorter and the name would centre half a
pixel above the brand it replaces. */
position:absolute;left:44px;right:44px;top:0;height:var(--testa);
display:flex;align-items:center;justify-content:center;gap:6px;
opacity:0;transform:translateY(8px);pointer-events:none;
font-size:13.5px;font-weight:600;letter-spacing:-.005em;
max-width:100%;padding:0 4px;
transition:opacity .22s ease, transform .22s ease;
}
/* NEVER wrapping and never wider than the column: the FIPAV names
carry the sponsor inside, and "3ª Divisione U16 · 25/26" at 13,5px
barely fits. */
.hdr-comp .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-comp .chev{color:var(--head-dim);font-size:11px}
.brand{transition:opacity .22s ease, transform .22s ease}
body.collapsed .brand{opacity:0;transform:translateY(-8px)}
body.collapsed .hdr-comp{opacity:1;transform:none;pointer-events:auto}
}
/* tel/piede.css */
@media (max-width:899px){
/* ============================================================
AT THE BOTTOM: SWITCH AND SPONSOR BAR
============================================================
The Results/Table switch sits at the bottom and not at the top
because the thumb reaches the bottom. For the same reason it is not
in the drawer: it is the most frequent gesture of the screen. */
.tabs{
flex:none;
background:var(--paper);
border-top:1px solid var(--line);
padding:7px 12px;
}
.seg{
display:grid;grid-template-columns:1fr 1fr;
background:var(--sunken);border-radius:10px;padding:3px;
position:relative;
}
/* The pill slides, the two words stay still: it reads as a switch and
not as two buttons. It sits below (implicit z-index) with the
buttons above, or it would cover the words. */
.seg .thumb{
position:absolute;top:3px;left:3px;
width:calc(50% - 3px);height:calc(100% - 6px);
background:var(--paper);border-radius:8px;
border:1px solid var(--line);
transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.seg button{
position:relative;z-index:1;
padding:9px 0;border-radius:8px;
font-size:12.5px;font-weight:700;letter-spacing:.02em;
color:var(--muted);transition:color .18s;
}
.seg button.on{color:var(--ink)}
.seg[data-tab="table"] .thumb{transform:translateX(100%)}
/* The sponsor bar: three plates, two below 340px. The layout decides
the number (shells/phone.js) and writes the columns only when that
number really changes: rewriting them at every jolt of the window
would restart the rotation from the beginning. */
.sponsors{
flex:none;
background:var(--paper);
border-top:1px solid var(--line);
padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px));
display:grid;gap:8px;
--h:34px; /* usable height of the mark inside the plate */
}
/* Plate white at night too: the mark files have a white ground baked
in (none of them has an alpha channel), and on a dark ground they
would be fifteen white rectangles. Fixed white means the ground of
the file disappears into the plate. */
.slot{
height:40px;border-radius:7px;
background:#fff;border:1px solid var(--line);
display:grid;place-items:center;
overflow:hidden;padding:0 7px;
}
/* --k evens out the AREA between marks of different proportions (here
from 0.91 to 4.10): without it a long wordmark as tall as a square
mark would weigh three times as much. object-fit rescales the marks
wider than the plate, so the proportion never distorts. */
.slot img{
display:block;width:100%;height:calc(var(--h) * var(--k,1));
object-fit:contain;object-position:center;
transition:opacity .42s ease;
}
.slot img.out{opacity:0}
.slot img.scuro{border-radius:3px}
}
/* tel/tendina.css */
@media (max-width:899px){
/* ============================================================
DRAWER AND TOAST: the two corrections to the shared chrome
============================================================
The drawer is drawn by drawer.css, which belongs to every page:
measures, weights and wording come from there. Two differences
remain, both of them measurable.
1. THE CLOSE BUTTON SITS WHERE THE THEME BUTTON SITS. It is the same
gesture in the same corner (the menu opens with the hamburger on
the left and closes with the cross on the right) and the header
already owns that place: 44px of target against the edge, with
the icon falling twelve pixels inside. The header wins here,
being the frame common to every page.
2. THE UNDERLINE. On the board app/base.css takes it off with a
reset on a, which does not reach down here (it is bounded above
900px). Down here it comes off the item instead. */
.menu-top{padding-right:0}
.menu .icon{width:44px;height:48px}
.menu nav a{text-decoration:none}
/* THE TOAST.
120px from the bottom, which is above the sponsor bar and above the
switch, where it covers nothing of what is being looked at. On the
pages that scroll it sits at 30px, because down there is nothing.
The colour: --paper is the white of the phone, --panel that of the
board; at night the two are not the same black. */
.toast{
position:fixed;bottom:120px;
background:var(--ink);color:var(--paper);
padding:10px 16px;border-radius:9px;
font-size:12.5px;font-weight:600;
max-width:78%;text-align:center;
}
/* The privacy line inside the drawer: it gets tapped, so it needs a
target tall enough for a thumb. */
.menu-piede a{display:inline-block;padding:6px 0;color:inherit;text-decoration:underline}
}
/* tel/contatti.css */
@media (max-width:899px){
/* ============================================================
CONTACTS: THE PHONE
============================================================
THIS SHEET DRESSES, IT DOES NOT RETOUCH. The build bounds
app/contatti.css to (min-width:900px): down here NOTHING of what is
written in there exists. So everything is here: panels, cards, rows,
marks, registry data. From outside come only the colour tokens and
the .panel frame.
The marks on the contact rows are