/* 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/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/iscriviti.css */
@media (min-width:900px){
/* ============================================================
THE SIGN-UP: the board
============================================================
Two columns like /safeguarding/: on the left where you are, on the
right what you have to do. It is the same shape because it is the
same problem (a long document to be crossed in order) and using
two different grammars for the same thing is like changing language
halfway through a sentence.
THE FORM COLUMN IS NOT AS WIDE AS THE SHEET. A text field a
thousand pixels long does not help in writing a name: it helps in
losing the thread between the label and the box. It stops where it
reads, and the rest is air.
============================================================ */
/* THE HEIGHT OF THE WINDOW, as on every other board. The body is a
flexible column as tall as the screen (app/base.css), but the .app
in between is not declared anywhere in common: every page writes it
in its own tail (palasilea.css, safeguarding.css) and without
this line the chain breaks there, the two panels stop at the height
of the content and half a screen of bare page ground is left
below. */
.app{flex:1;min-height:0;display:flex;flex-direction:column}
/* flex:1 and min-height:0 come with .shell from app/griglia.css, and
declaring display:grid here does not wipe them out: they stay. What
is needed on top of that is for the grid to take the whole height,
otherwise the two panels stop at the height of the content and the
bare page ground is left below. */
.shell.isc{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--gap);
align-items:stretch;align-content:stretch;min-height:0}
/* THE CHOICE AND THE DOOR HAVE NO INDEX: there is no path to show,
there is one single question. With the two-column grid they end up
squashed into the index column, three hundred pixels wide in the
middle of an empty screen.
AND THEY STAND IN THE MIDDLE OF THE SCREEN. One single question
propped up at the top left, with half a metre of emptiness below
it, looks like a piece of page that has not finished loading. In
the middle it reads as what it is: the only thing there is to do on
this screen.
CENTRED LIKE THE CONTACTS ONE, and with the same line. The optical
centre (a minimum height worked out by hand and a bottom padding
as tall as the header, to raise the panel above the centre of the
usable area) is a theory that applied to one page alone sets two
twin panels twenty-eight pixels out of step: the same shape, in the
same frame, one entry apart in the menu. Between twins that gap
shows; the optical centre of one of the two does not.
If one day the optical centre is wanted, it goes to both together,
and it is written in one single place. */
.shell.isc.sola{display:flex;align-items:center;justify-content:center;
padding:var(--gap) var(--pad) var(--pad)}
/* A HIDDEN STEP HAS TO DISAPPEAR FOR REAL. The hidden attribute is
worth display:none, but it is an author rule with specificity zero:
any display declared in a stylesheet beats it. The parent stage has
display:flex, so it stays in the list even for an athlete of age:
visible in the row with the others while the counter says "1 di
5". */
/* HIDDEN MEANS HIDDEN, and here it takes !important.
The hidden attribute is worth display:none with specificity zero,
so it loses against any stylesheet rule; but even rewritten as
.is-passo[hidden] it weighs (0,2,0), exactly as much as
.is-passo[data-passo="dati"] below it, which wins on position. The
result: the data step never hides and the athlete's form appears
under the first question.
So it is closed with the one declaration that no order and no
specificity can overturn. */
.is-tappa[hidden],.is-passo[hidden],.bl[hidden]{display:none !important}
/* ---- the index, which is also the progress ---- */
.is-lato{display:flex;flex-direction:column;min-height:0}
.is-tappe{flex:1;min-height:0;overflow-y:auto;padding:12px 12px 6px;
display:flex;flex-direction:column;gap:2px}
.is-tappa{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;
border-radius:10px;text-align:left;font-size:14.5px;color:var(--ink-2);
background:none;border:0;cursor:pointer;transition:background .14s,color .14s}
.is-tappa:hover:not([disabled]){background:var(--zebra)}
/* The stage reached lights up like the chosen entry in the tree of
competitions: a faint veil, a bar on the left, brand-coloured
text. */
.is-tappa.on{background-image:linear-gradient(var(--me-fill),var(--me-fill));
box-shadow:inset 3px 0 0 var(--brand);color:var(--brand-2);font-weight:600}
.is-tappa[disabled]{color:var(--faint);cursor:default}
.is-tappa .n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;
place-items:center;background:var(--sunken);color:var(--muted);
font-size:11px;font-weight:600}
.is-tappa.on .n{background:var(--brand);color:var(--on-brand)}
/* THE TICK: what is settled already. It serves to know how far one
has got without having to go back over it to check. */
.is-tappa.fatto .n{background:var(--up-fill);color:var(--up)}
.is-tappa.fatto{color:var(--ink-2)}
.is-tappa[disabled] .n{background:transparent;border:1px solid var(--line)}
.is-nota{flex:none;padding:14px 16px 16px;border-top:1px solid var(--line);
font-size:12px;line-height:1.5;color:var(--muted)}
.is-nota b{color:var(--ink-2)}
/* ---- the form column ---- */
.is-corpo{display:flex;flex-direction:column;min-height:0}
.is-scorre{flex:1;min-height:0;overflow-y:auto;padding:22px 28px 24px;
scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
/* The step that is READ stays narrow (a line of text a thousand
pixels long cannot be followed) but the step that is FILLED IN
does not: there the width is needed, because fourteen fields set
two by two make seven rows and half a screen of scrolling exactly
when one would like to see how much is left. */
/* THE FORM TAKES THE WHOLE COLUMN. A text to be read is kept narrow,
but a form is not: choked to a thousand pixels inside a panel of
fifteen hundred it leaves half a metre of emptiness on the right
and in exchange pushes the last field under the border. The
emptiness on the right and the scrolling at the bottom are the same
mistake seen from two sides. */
/* EVERY SCREEN TAKES THE WIDTH, except the first question, which is
two buttons and a line of text. A width ceiling meant for text,
applied to the forms and to the documents as well, is where the
emptiness on the right comes from. */
.is-passo{max-width:none}
.is-passo[data-passo="chi"]{max-width:680px}
.is-passo h2{font-size:23px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.is-guida{margin:8px 0 22px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.is-guida b{color:var(--ink-2);font-weight:600}
/* ---- the fields ---- */
/* THE THREE GROUPS. They are not decoration: they are the three
questions the fields answer (who you are, where you live, how you
are reached) and a form that keeps them apart is filled in without
rereading the labels. The box is barely hinted at, the heading sits
on its own hairline: it has to divide, not to frame. */
.gr{border:0;padding:0;margin:11px 0 0}
.gr legend{padding:0 0 7px;font-size:11px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--brand-2)}
.gr + .gr{margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
/* TWO GROUPS ON THE SAME ROW: Recapiti takes eight columns and
Certificato medico the four that are left, on the same twelve-column
grid as the fields.
THE HAIRLINE SITS ON THE TWO GROUPS, NOT ON THE ROW THAT HOLDS
THEM, and it is not a detail: the legend of a fieldset is drawn
INSIDE its top border and opens a gap in it, and that is why
ANAGRAFICA and RESIDENZA sit on their line instead of under it.
With the border moved onto the container, the two legends have
nothing left to fit into and fall under a whole line, unlike every
other one in the form. Two hairlines, one per group, are also the
right drawing: they are two sections, and each carries its own
title. */
.gr-riga{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
gap:0 16px;margin-top:13px}
.gr-riga > .gr{margin:0;padding-top:13px;border-top:1px solid var(--line)}
.gr-riga .gr-come{grid-column:span 8}
.gr-riga .gr-salute{grid-column:span 4}
/* TWELVE COLUMNS, AND EVERY ROW CLOSES EXACTLY ON THE TWELVE. Added
up at random, every row ends wherever it happens to and the form
reads like a spilled glass.
anagrafica cognome 4 · nome 4 · nascita 4 (the parent: 3+3+3+3)
luogo 4 · cittadinanza 4 · codice 4
residenza via 5 · n. 1 · comune 4 · CAP 2 ALL ON ONE ROW
recapiti telefono 6 · e-mail 6
The residence stands on a single row because it is ONE piece of
data: street, number, town and postcode are one address broken into
four boxes for the convenience of whoever writes it. On two rows
they read as two different pieces of information. */
.campi{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
gap:12px 16px;align-content:start}
/* EVERYTHING IN ANAGRAFICA MEASURES THE SAME: a third of a row. Two
forms that ask for the same things set out in two different ways
read as two forms from two different offices, so the athlete and
the parent share the widths even though the parent has one field
more. The parent's extra field wraps, and that is perfectly
fine. */
.cmp{grid-column:span 4}
/* THE SECOND ROW OF THE ATHLETE'S ANAGRAFICA IS OF FOUR. The identity
card number sits beside the tax code, which is where whoever checks
looks for it: they are the two codes of the same person, and the
only way the second row keeps them together is with four boxes of
three columns. The first row stays of three and the two rows do not
line up with each other: they both close exactly on the twelve,
which is the rule that counts.
The parent's card has no such field and stays of three: the number
is needed for the CAMP3, and it is the athletes who go on the
CAMP3. */
[data-blocco="atleta"] .gr-chi .f-luogoNato,
[data-blocco="atleta"] .gr-chi .f-cittadinanza,
[data-blocco="atleta"] .gr-chi .f-cf,
[data-blocco="atleta"] .gr-chi .f-documento{grid-column:span 3}
.f-via{grid-column:span 4}
/* Two columns and not one: a street number is "12/B", not "12". */
.f-civico{grid-column:span 2}
.f-comune{grid-column:span 4}
.f-cap{grid-column:span 2}
.f-cell,.f-cellAtleta,.f-email{grid-column:span 6}
/* The expiry date is alone inside its group, and the group is narrow
already: it takes all twelve columns of its own grid, which are the
four of the row. With the standard span it would take a third of
them and the box would come out as wide as "gg/n". */
.f-scadCert{grid-column:span 12}
/* BIGGER THAN IT LOOKS RIGHT TO WHOEVER WRITES THE CODE. This form is
filled in by a parent, often in the evening, often without the
glasses they should be wearing.
THE LABEL IS INK: in uppercase and small, the grey of the subtitles
disappears. The faint tone stays on "facoltativo". */
.cmp label{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;
text-transform:uppercase;color:var(--ink-2)}
.cmp label small{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--muted)}
/* THE BOX HAS TO BE SEEN. With the hairline of the separators on a
ground the same colour as the panel, the boxes disappear: barely
so on the light theme, entirely on the dark one. A box is a hole in
the sheet: a sunken ground and a stronger outline, like every other
surface this site asks anybody to write on. */
.cmp input{width:100%;margin-top:5px;padding:11px 13px;border-radius:9px;
border:1px solid var(--line-2);background:var(--sunken);color:var(--ink);
font-size:17px;font-family:inherit;transition:border-color .14s,box-shadow .14s}
.cmp input:hover{border-color:var(--brand-dim)}
.cmp input:focus{outline:0;border-color:var(--brand);background:var(--panel);
box-shadow:0 0 0 3px var(--me-fill)}
.cmp input.male{border-color:var(--down)}
/* THE PLACE FOR THE ERROR IS ALWAYS THERE, empty too: appearing only
when needed, it would make the row below jump while somebody is
typing. */
.err{min-height:14px;margin-top:2px;font-size:12.5px;line-height:1.2;color:var(--down)}
/* ---- the blocks: athlete, parent, second parent ----
SIDE BY SIDE AS LONG AS THEY FIT. Athlete and parent are two forms
of twelve fields: stacked they make twelve hundred pixels and there
is no choice but to scroll, side by side they make six hundred and
both fit in the window. Below 560 pixels per column they go back
into a file, which is the point where setting them side by side
would mean boxes of a hundred and twenty pixels.
The third block (the second parent, when there is one) wraps on
its own: at that point one scrolls, but one scrolls because there
really is a lot of data, not because the space was wasted. */
/* THE PARENTS' STEP: two blocks side by side if they fit, in a file
if they do not. The athlete's step has one single block and takes
the whole width. */
.bl{min-width:0}
.bl h2{display:flex;align-items:center;gap:0;font-size:20px;font-weight:600;
letter-spacing:-.015em;color:var(--brand-2);margin-bottom:2px}
.bl h2 .t{flex:none}
/* THE ROLE SITS INSIDE THE TITLE, on the same line. Put underneath it
is one more grid row, eighty-six pixels. Here it costs nothing:
the title takes that row anyway.
The label stays in the document for whoever reads by voice, and
disappears to the eyes: beside the word "genitore" a box with
"Madre" inside it needs no explaining. */
.bl-testa{display:inline-flex;margin-left:14px}
.bl-testa .cmp{margin:0}
.bl-testa label{position:absolute;width:1px;height:1px;overflow:hidden;
clip-path:inset(50%);white-space:nowrap}
.bl-testa select{margin:0;width:200px;padding:7px 30px 7px 12px;font-size:14.5px;
border-radius:8px;border:1px solid var(--line-2);background:var(--sunken);
color:var(--ink);font-family:inherit;cursor:pointer;
/* THE STYLESHEET DRAWS THE ARROW ITSELF. Left to the system, a
dropdown is indistinguishable from a text box on half the
browsers: and that is exactly what hides this field, which sits
in a title row and not in the middle of the form. */
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%230377BD%27 stroke-width=%272.4%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 9px center;background-size:15px}
.bl-testa select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--me-fill)}
/* WHEN IT IS MISSING IT SHOWS FROM A DISTANCE. It sits in a title
row, where the eye does not look for fields to fill in: without a
strong mark one reaches the end of the form without having noticed
it. */
.bl-testa select.male{border-color:var(--down);background-color:var(--down-fill);
box-shadow:0 0 0 3px var(--down-fill)}
.bl-testa .err{display:none}
.bl-via{margin-left:auto;padding:10px 16px;border-radius:10px;cursor:pointer;
border:1px solid var(--line-2);background:transparent;font-family:inherit;
font-size:14.5px;font-weight:500;color:var(--muted)}
.bl-via:hover{border-color:var(--down);color:var(--down)}
/* ---- the field that searches a long list ---- */
/* The box is the same as all the others: the arrow sits inside it,
not alongside, otherwise the field narrows and no longer adds up in
the grid. */
.combo{position:relative}
.combo input{padding-right:38px}
.combo-giu{position:absolute;right:1px;top:5px;bottom:1px;width:34px;
display:grid;place-items:center;border:0;border-radius:0 8px 8px 0;
background:transparent;color:var(--brand);cursor:pointer}
.combo-giu svg{width:17px;height:17px}
.combo-giu:hover{color:var(--brand-2)}
/* THE LIST FLOATS ABOVE EVERYTHING. Inside the flow it would push the
row below down at every letter typed, and the form would dance
under the fingers. */
/* Above everything and in window coordinates: inside the form, which
scrolls, the border of the panel cuts it off. */
.combo-lista{position:fixed;z-index:60;
overflow-y:auto;overscroll-behavior:contain;
/* Scrolling with the finger is driven by combo.js: the gesture is
taken away from the browser, because it is the same
preventDefault that keeps the focus in the box. The mouse wheel
has nothing to do with it and works. */
touch-action:none;margin:0;padding:5px;list-style:none;
background:var(--panel);border:1px solid var(--line-2);border-radius:10px;
box-shadow:var(--shadow)}
.combo-lista[hidden]{display:none}
.combo-lista li{display:flex;align-items:baseline;gap:9px;padding:9px 11px;
border-radius:7px;font-size:15.5px;color:var(--ink);cursor:pointer}
.combo-lista li:hover,.combo-lista li.su{background:var(--me-fill);color:var(--brand-2)}
/* The short form of the province tells the four Cavallino and the
three San Donato apart: without it the list asks one to guess. */
.combo-piu{margin-left:auto;font-size:12px;font-weight:600;letter-spacing:.06em;
color:var(--muted)}
.combo-lista li.su .combo-piu{color:var(--brand)}
.combo-vuoto{color:var(--muted);font-size:13.5px;cursor:default}
.combo-vuoto:hover{background:none;color:var(--muted)}
/* The "abroad" tick, in the label row of its own field */
.cmp label{display:flex;align-items:center;gap:7px}
/* ATTACHED TO THE NAME OF THE FIELD, not pushed to the right: "Luogo
di nascita [x] estero" reads as one single sentence, and it is one
single sentence. Pushed to the other end of the row it looks as if
it belonged to the field alongside.
No pill: the outline makes it look like a button, and it is not a
button: it is one more word in the label, with its own box. */
.eti-estero{display:inline-flex;align-items:center;gap:5px;margin-left:2px;
font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
color:var(--muted);cursor:pointer}
.eti-estero:hover{color:var(--brand)}
.eti-estero input{width:14px;height:14px;margin:0;accent-color:var(--brand);cursor:pointer}
.eti-estero:has(input:checked){color:var(--brand-2)}
/* ---- the two choices, never one alone ---- */
.is-due{display:flex;gap:10px;flex-wrap:wrap}
.is-due button{flex:1 1 220px;display:flex;align-items:center;gap:10px;
padding:13px 15px;border-radius:11px;border:1px solid var(--line);
background:var(--panel);color:var(--ink-2);font-size:14.5px;font-family:inherit;
text-align:left;cursor:pointer;transition:border-color .14s,background .14s}
.is-due.grande button{padding:18px;font-size:16px}
.is-due button:hover{border-color:var(--line-2);background:var(--zebra)}
/* The round mark is empty until a choice is made: neither of the two
starts lit, because a consent already given on somebody's behalf is
not a consent. */
.is-due .seg{flex:none;width:18px;height:18px;border-radius:50%;
border:2px solid var(--line-2);transition:border-color .14s,box-shadow .14s}
.is-due button.on{border-color:var(--brand);background:var(--me-fill);
color:var(--brand-2);font-weight:600}
.is-due button.on .seg{border-color:var(--brand);box-shadow:inset 0 0 0 4px var(--brand)}
/* ---- the notices ---- */
/* THREE DOCUMENTS, THREE PANELS, side by side as long as they fit:
they are three distinct acts (one to be read, two to be consented
to) and stacked at full width they make a page where it is no
longer clear where one ends and the next begins. */
/* ONE SINGLE SCROLLBAR, and it is the panel's. A text inside a little
window of its own, scrolling inside a page that scrolls in turn,
makes two nested bars, and the finger or the wheel never knows
which of the two it is moving. The document is as long as it is,
and what scrolls it is the panel that holds it, like every other
page of this site. */
/* The document is not a box: it is the content of the panel. */
.is-doc{min-width:0}
.is-doc.male{border-color:var(--down)}
.is-doc-cima{padding:0 0 14px;border-bottom:1px solid var(--line)}
.is-doc-cima h3{font-size:16px;font-weight:600;line-height:1.3;color:var(--brand-2)}
.is-norma{margin-top:4px;font-size:11.5px;color:var(--faint)}
/* THE TEXT IS SCROLLED INSIDE ITS OWN PANEL and does not lengthen the
page: three notices in full in a single flow make a page of twelve
screens, and whoever only has to tick two boxes never crosses it.
Held in a window as tall as a screen, the document stays readable
and it also stays evident that it is readable. */
.is-testo{padding:16px 0 0}
.is-sez + .is-sez{margin-top:14px}
.is-sez h4{display:flex;gap:8px;font-size:13px;font-weight:600;color:var(--brand-2)}
.is-sez h4 .n{color:var(--brand)}
.is-sez p{margin-top:5px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.is-elenco{margin-top:5px;padding-left:18px;list-style:disc}
.is-elenco li{font-size:13px;line-height:1.6;color:var(--ink-2);margin-top:3px}
.is-elenco li::marker{color:var(--brand)}
/* THE BAND THAT STAYS STILL AT THE BOTTOM. It sits between the part
that scrolls and the buttons, so the question is always under the
eyes while one reads, and not at the end of ten screens, where
only whoever scrolls to the last line finds it. */
.is-fisso{flex:none;border-top:1px solid var(--line);background:var(--zebra)}
.is-consenso{padding:14px 28px}
.is-consenso[hidden]{display:none !important}
/* The two answers side by side: they are a choice between two, and
set in a column the second one ends up under the border of the
panel. */
.is-scelte{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:9px}
/* THE TWO COLUMNS LINE UP AT THE BOTTOM. The a) and b) labels are of
different lengths (one wraps, the other does not) and with the
buttons stuck under the text the two files end at two different
heights. Pushed to the foot of the column, the four buttons stand
on a single line whatever the labels above them say. */
.is-scelta{flex:1 1 320px;min-width:0;display:flex;flex-direction:column}
.is-scelta .is-due{margin-top:auto;padding-top:6px}
.is-scelta .err{min-height:0}
.is-formula{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.is-eti{margin:14px 0 8px;font-size:13.5px;font-weight:600;color:var(--ink)}
.is-scelta + .is-scelta{margin-top:6px}
.is-scelta .is-due{margin-top:8px}
.is-visto{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.is-visto input{flex:none;width:19px;height:19px;margin-top:1px;accent-color:var(--brand)}
/* ---- review: the data on the left, the document on the right ----
THE PDF STAYS, because here it really is seen: it is the real
document, composed now with the signature lines still empty, that
is exactly what is about to be signed.
BESIDE IT THERE ARE THE DATA AS WRITTEN: the document in a panel
six hundred pixels tall reads badly, and correcting a postcode
means hunting for it inside eight pages. This way one checks on the
left and corrects from the button of its own section, with the
document under the eye all the while. The column of data sits where
the emptiness would otherwise be: the board is wide, the PDF has
the proportions of an A4 sheet and past a certain point it does not
widen. */
.is-passo[data-passo="rivedi"]{display:flex;flex-direction:column;height:100%}
.is-passo[data-passo="rivedi"] h2{margin-bottom:0}
#riepilogo{flex:1;min-height:0;display:grid;margin-top:12px;gap:14px;
grid-template-columns:minmax(280px,360px) 1fr;
grid-template-rows:auto minmax(0,1fr)}
.ri-testa{grid-column:1/-1;display:flex;align-items:center;gap:16px}
.ri-testa p{margin:0;flex:1;font-size:13px;line-height:1.5;color:var(--ink-2)}
.ri-apri{flex:none;display:inline-flex;align-items:center;gap:8px;
padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);
background:var(--panel);color:var(--brand);font-size:13px;font-weight:700;
cursor:pointer}
.ri-apri:hover{border-color:var(--brand);background:var(--zebra)}
.ri-apri svg{width:15px;height:15px}
.ri-dati{min-height:0;overflow-y:auto;padding-right:4px;
display:flex;flex-direction:column;gap:10px}
.ri-sez{border:1px solid var(--line);border-radius:11px;background:var(--velo)}
.ri-sez h3{display:flex;align-items:center;justify-content:space-between;gap:8px;
margin:0;padding:9px 11px;border-bottom:1px solid var(--line);
font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-2)}
.ri-sez h3 button{flex:none;padding:4px 10px;border-radius:999px;cursor:pointer;
border:1px solid var(--line-2);background:var(--panel);color:var(--brand);
font-family:inherit;font-size:11.5px;font-weight:700;text-transform:none;
letter-spacing:0}
.ri-sez h3 button:hover{border-color:var(--brand);background:var(--zebra)}
.ri-sez dl{margin:0;padding:3px 11px 9px}
.ri-sez dl > div{display:flex;gap:10px;padding:5px 0;border-top:1px solid var(--line)}
.ri-sez dl > div:first-child{border-top:0}
.ri-sez dt{flex:none;width:42%;font-size:12px;color:var(--muted)}
.ri-sez dd{flex:1;margin:0;font-size:13px;font-weight:600;color:var(--ink);
word-break:break-word}
.ri-pdf{min-height:0;width:100%;height:100%;border:1px solid var(--line);
border-radius:12px;background:var(--sunken)}
/* ---- the signature ---- */
.is-firme{margin-top:20px;display:flex;flex-direction:column;gap:16px;max-width:640px}
.fi-box{border:1px solid var(--line);border-radius:12px;background:var(--panel);
overflow:hidden}
.fi-cima{display:flex;align-items:center;justify-content:space-between;
padding:10px 14px;border-bottom:1px solid var(--line);
font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted)}
.fi-pulisci{border:0;background:none;cursor:pointer;font-family:inherit;
font-size:12px;color:var(--brand);letter-spacing:0;text-transform:none}
/* touch-action:none, or the finger that signs scrolls the page
instead of leaving a mark. */
.fi-tela{display:block;width:100%;height:150px;touch-action:none;cursor:crosshair}
.fi-riga{height:1px;margin:0 22px 18px;background:var(--line-2)}
.is-invio{margin-top:22px}
.is-invia{padding:14px 26px;border:0;border-radius:11px;cursor:pointer;
background:var(--brand);color:var(--on-brand);font-family:inherit;
font-size:16px;font-weight:600;transition:background .14s,opacity .14s}
.is-invia:hover:not([disabled]){background:var(--brand-2)}
.is-invia[disabled]{opacity:.45;cursor:default}
/* THE WHOLE WIDTH OF THE PANEL. A ceiling of 640px comes from the
readability rule for long prose, but here there are two lines of
prose: what it gives is a thin column of text in a panel twice as
wide, with half the panel empty on the right. */
.is-fatto{max-width:none}
.is-fatto h2{font-size:23px;font-weight:600;color:var(--up)}
.is-fatto p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.is-scarica{display:inline-block;margin-top:18px;padding:11px 18px;border-radius:10px;
border:1px solid var(--brand);color:var(--brand);font-size:14.5px;
text-decoration:none}
/* WHEN THE SENDING FAILS. The green title of "iscrizione inviata"
becomes an ordinary title and this panel appears: the same red as
the warnings about the fees, because it says the same thing: read
this before closing the page.
Two roads, not one: trying again (a home connection drops and comes
back) and sending it by mail (if the service is down, trying again
is no use at all). With one road only, whoever finds it closed is
stuck. */
.is-guaio{margin-top:16px;padding:14px 16px;border-radius:11px;
border:1px solid var(--down);background:var(--down-fill)}
.is-guaio p{margin:0;color:var(--ink);font-size:15px;line-height:1.5}
.is-guaio p + p{margin-top:7px}
.is-guaio-tasti{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.is-riprova{padding:10px 18px;border-radius:10px;border:0;cursor:pointer;
background:var(--brand);color:var(--on-brand);
font-family:inherit;font-size:14.5px;font-weight:600}
.is-riprova:disabled{opacity:.6;cursor:default}
.is-perposta{padding:10px 18px;border-radius:10px;
border:1px solid var(--line);color:var(--ink-2);
font-size:14.5px;text-decoration:none}
/* ---- the foot, which leads forward and back ---- */
.is-piede{flex:none;display:flex;align-items:center;gap:16px;
padding:14px 28px;border-top:1px solid var(--line);background:var(--panel)}
.is-piede .err{flex:1;min-height:0;text-align:center}
.is-indietro,.is-avanti{padding:11px 22px;border-radius:10px;cursor:pointer;
font-family:inherit;font-size:15px;font-weight:600;transition:background .14s}
.is-indietro{border:1px solid var(--line);background:transparent;color:var(--ink-2)}
.is-indietro:hover{background:var(--zebra)}
.is-avanti{border:0;background:var(--brand);color:var(--on-brand);margin-left:auto}
.is-avanti:hover{background:var(--brand-2)}
/* ---- the date: an ordinary box, a calendar on request ----
On the board too the date is typed: it is faster than any calendar,
and whoever wants the calendar has the icon. The real picker sits
under the button, invisible, and opens only from there. */
.cal{position:relative}
.cal input[type="text"]{padding-right:44px}
.cal-apri{position:absolute;right:4px;top:calc(50% + 2.5px);transform:translateY(-50%);
display:grid;place-items:center;width:34px;height:34px;padding:0;cursor:pointer;
border:0;border-radius:8px;background:transparent;color:var(--muted)}
.cal-apri:hover{background:var(--zebra);color:var(--brand)}
.cal-apri svg{width:18px;height:18px}
.cal-vero{position:absolute;right:4px;top:calc(50% + 2.5px);transform:translateY(-50%);
width:34px;height:34px;opacity:0;pointer-events:none}
/* ---- the browser's autofill ----
The browser paints the boxes it fills in itself, and its light
ground knows nothing of the dark theme. The ground cannot be
changed, but an inner shadow as tall as the box covers it. */
.cmp input:-webkit-autofill,
.cmp input:-webkit-autofill:hover{
-webkit-text-fill-color:var(--ink);caret-color:var(--ink);
-webkit-box-shadow:0 0 0 60px var(--sunken) inset;
box-shadow:0 0 0 60px var(--sunken) inset;
transition:background-color 9999s ease-in-out 0s}
.cmp input:-webkit-autofill:focus{
-webkit-box-shadow:0 0 0 60px var(--panel) inset;
box-shadow:0 0 0 60px var(--panel) inset}
/* ---- the list of what is missing, on the send button ---- */
.err-elenco{margin:6px 0 0;padding:0;list-style:none;text-align:left}
.err-elenco li{padding:5px 0;border-top:1px solid var(--line);
font-size:12.5px;line-height:1.45}
.err-elenco li:first-child{border-top:0}
.err-elenco button{padding:2px 9px;margin-right:2px;border-radius:999px;cursor:pointer;
border:1px solid var(--down);background:transparent;color:var(--down);
font-family:inherit;font-size:11.5px;font-weight:700}
/* ---- the Avanti button switched off ----
Opacity is not enough: a button switched off has to stop looking
pressable, so it also loses the solid colour and the cursor. */
.is-avanti:disabled{background:var(--line-2);color:var(--muted);
cursor:not-allowed;box-shadow:none}
.is-avanti:disabled:hover{background:var(--line-2)}
/* ---- the question about the second parent ----
IT IS WRITTEN OUT IN FULL, including the things a