/* =====================================================================
* send.42ai.uk -- shared layout.
*
* Colour, type and radius all come from custom properties defined in
* /brand/42its.css and /brand/42live.css. This file must not hard-code a
* brand colour; if a value needs to differ per brand, add a token instead.
*
* Fonts are self-hosted, per the house rules -- nothing is requested from
* Google, so the pages work offline and send nothing to a third party.
*
* Montserrat is the variable woff2 copied from 42live-website/site/fonts/,
* the same files that site serves, split latin / latin-ext with the unicode
* ranges Google's own CSS uses so a page of plain English never downloads
* the 70KB extended file.
*
* INTER IS DELIBERATELY NOT SELF-HOSTED. The 42ITS house style names it for
* display headings, but 42its-website ships no font files at all and falls
* back to the system stack, so serving Inter here would make this tool look
* unlike the site it is branded as. It stays first in --font-display so that
* dropping inter-latin.woff2 into /fonts/ and adding a block here is all it
* would take to switch, should 42its.co.uk ever start serving it.
* ===================================================================== */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/montserrat-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/montserrat-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Defaults mirror 42ITS so an unbranded page is never unstyled. */
:root {
--bg: #000000;
--panel: #0e172d;
--panel-2: #141d33;
--line: rgba(255, 255, 255, 0.12);
--heading: #ffffff;
--text: #c4c4c4;
/* --muted is kept as part of the brand palette but is NOT used for text:
at 3.74:1 on black it fails WCAG AA, and the 42ITS house style limits it
to large text and decoration. Small labels use --label (8.83:1). */
--muted: #5e6782;
--label: #a8a8a8;
--accent: #b01818;
--accent-hover: #d92a2a;
--accent-fg: #ffffff;
--decor: #2957cb;
--decor-faint: rgba(41, 87, 203, 0.19);
--font-display: "Inter", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
--display-weight: 200;
--heading-weight: 400;
--radius: 30px;
--radius-panel: 4px;
--container: 1500px;
--ok: #2f9e5f;
--warn: #c98a1d;
--gutter: clamp(1rem, 4vw, 2.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
/* color-scheme on the document makes the browser use dark defaults for the
canvas, scrollbars and form controls, and is the main defence against a
white flash before this stylesheet loads. The pages also inline it in
so it applies even earlier. Backgrounding html as well as body
keeps the dark ground during overscroll. */
html {
-webkit-text-size-adjust: 100%;
color-scheme: dark;
background: var(--bg);
}
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 400 16px/1.7 var(--font-ui);
min-height: 100vh;
overflow-x: hidden;
}
a { color: var(--accent-hover); }
a:hover { color: var(--accent); }
:focus-visible {
outline: 3px solid var(--accent-hover);
outline-offset: 3px;
}
h1, h2, h3 {
color: var(--heading);
font-weight: var(--heading-weight);
line-height: 1.25;
margin: 0 0 0.6em;
}
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
.wrap {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ------------------------------------------------------------- buttons */
.btn {
display: inline-block;
padding: 1.1rem 2.5rem;
border: 1px solid transparent;
border-radius: var(--radius);
background: var(--accent);
color: var(--accent-fg);
font: 600 1rem/1 var(--font-ui);
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease;
}
.btn:hover, .btn:focus-visible { background: var(--accent-hover); color: var(--accent-fg); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn-ghost {
background: transparent;
border-color: rgba(255, 255, 255, 0.35);
color: var(--text);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
background: transparent; color: var(--accent); border-color: var(--accent);
}
.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.875rem; }
.btn-danger { background: transparent; border-color: var(--accent); color: var(--accent-hover); }
.btn-danger:hover { background: var(--accent); color: var(--accent-fg); }
.btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
/* --------------------------------------------------------------- forms */
label {
display: block;
margin-bottom: 0.35rem;
color: var(--heading);
font-size: 0.9375rem;
font-weight: 500;
}
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], select {
width: 100%;
padding: 0.8rem 1rem;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-panel);
color: var(--heading);
font: 400 1rem/1.4 var(--font-ui);
}
input:focus, select:focus { border-color: var(--accent); outline: none; }
.field { margin-bottom: 1.1rem; }
/* Instructional copy, so it must be readable: --text at 15px. The 42ITS
palette puts --muted at 3.7:1, which is sanctioned for short labels and
decoration but not for paragraphs, and --text must not go below 15px. */
.field-hint { margin: 0.3rem 0 0; font-size: 0.9375rem; color: var(--text); }
.checkline { display: flex; align-items: center; gap: 0.55rem; }
.checkline input { width: auto; }
.checkline label { margin: 0; font-weight: 400; }
fieldset { border: 0; margin: 0 0 1.1rem; padding: 0; }
legend {
padding: 0; margin-bottom: 0.5rem;
color: var(--heading); font-size: 0.9375rem; font-weight: 500;
}
/* Segmented radio group, used for the brand and retention pickers. */
.segmented { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.segmented > div { position: relative; }
.segmented input {
position: absolute; opacity: 0; inset: 0; width: 100%; margin: 0; cursor: pointer;
}
.segmented span {
display: block;
padding: 0.65rem 1.15rem;
border: 1px solid var(--line);
border-radius: var(--radius-panel);
color: var(--text);
font-size: 0.9375rem;
cursor: pointer;
}
/* The markup is , so the span is a
CHILD of the label and not a sibling of the input. An earlier version
targeted `input:checked + span`, which matched nothing: every option
rendered unselected and the whole control looked unclickable even though
the radios were registering clicks. Both forms are matched now so the
styling cannot silently detach from the markup again. */
.segmented input:checked + span,
.segmented input:checked + label span {
border-color: var(--accent); background: var(--accent); color: var(--accent-fg);
}
.segmented input:focus-visible + span,
.segmented input:focus-visible + label span {
outline: 3px solid var(--accent-hover); outline-offset: 2px;
}
.segmented input:disabled + span,
.segmented input:disabled + label span { opacity: 0.35; cursor: not-allowed; }
.segmented input:disabled:checked + span,
.segmented input:disabled:checked + label span { background: transparent; color: var(--text); }
/* -------------------------------------------------------------- panels */
.panel {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius-panel);
padding: clamp(1.25rem, 3vw, 2rem);
}
.panel + .panel { margin-top: 1.5rem; }
.notice {
padding: 0.85rem 1.1rem;
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: var(--radius-panel);
background: var(--panel);
color: var(--heading);
font-size: 0.9375rem;
}
.notice-ok { border-left-color: var(--ok); }
.notice-warn { border-left-color: var(--warn); }
.notice + * { margin-top: 1.25rem; }
/* ---------------------------------------------------------- app shell */
.app-header {
border-bottom: 1px solid var(--line);
background: var(--bg);
}
.app-header .wrap {
display: flex; align-items: center; gap: 1rem;
min-height: 72px; flex-wrap: wrap;
}
.wordmark {
font: var(--display-weight) 1.5rem/1 var(--font-display);
color: var(--heading);
text-decoration: none;
letter-spacing: 0.02em;
}
.wordmark-42 { color: var(--accent); }
.app-nav {
display: flex; gap: 1.25rem; margin-left: auto;
align-items: center; flex-wrap: wrap;
}
.app-nav a { color: var(--text); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.app-nav a:hover, .app-nav a[aria-current="page"] { color: var(--accent); }
.app-nav .who { color: var(--label); font-size: 0.875rem; font-weight: 400; }
main.app-main { padding-block: clamp(2rem, 6vw, 4rem); }
.page-head { margin-bottom: 2rem; }
.page-head h1 {
font: var(--display-weight) clamp(2rem, 5vw, 3rem)/1.1 var(--font-display);
margin-bottom: 0.4em;
}
.page-head p { margin: 0; max-width: 62ch; }
.layout-narrow { max-width: 34rem; margin-inline: auto; }
/* --------------------------------------------------------- dropzone */
.dropzone {
border: 1px dashed rgba(255, 255, 255, 0.28);
border-radius: var(--radius-panel);
padding: clamp(2rem, 7vw, 4rem) 1.5rem;
text-align: center;
background: var(--panel);
transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone.is-over { border-color: var(--accent); background: var(--panel-2); }
.dropzone h2 {
font: var(--display-weight) clamp(1.25rem, 3vw, 1.75rem)/1.2 var(--font-display);
}
.dropzone p { margin: 0 auto; max-width: 46ch; }
.dropzone .btn { margin-top: 1.25rem; }
.filecard { display: grid; gap: 0.25rem; margin-bottom: 1.5rem; }
.filecard .filename { color: var(--heading); font-weight: 600; word-break: break-word; }
.filecard .filesize { font-size: 0.9375rem; color: var(--label); }
/* --------------------------------------------------------- progress */
.progress {
height: 10px;
border: 1px solid var(--line);
border-radius: 999px;
overflow: hidden;
background: var(--bg);
}
.progress > i {
display: block; height: 100%; width: 0;
background: var(--accent);
transition: width 0.2s ease;
}
.progress-meta {
display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
margin-top: 0.5rem; font-size: 0.9375rem; color: var(--text);
}
/* ------------------------------------------------------------ result */
.result-url {
display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: stretch;
margin: 0.75rem 0 0;
}
.result-url input {
flex: 1 1 18rem;
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
font-size: 0.9375rem;
}
/* ------------------------------------------------------------- table */
.table-scroll { overflow-x: auto; }
table.data {
width: 100%;
border-collapse: collapse;
font-size: 0.9375rem;
}
table.data th, table.data td {
padding: 0.75rem 0.8rem;
text-align: left;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
table.data th {
color: var(--heading); font-weight: 600; white-space: nowrap;
font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em;
}
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .filename { color: var(--heading); word-break: break-word; }
table.data .row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tag {
display: inline-block; padding: 0.15rem 0.5rem;
border: 1px solid var(--line); border-radius: 999px;
font-size: 0.75rem; color: var(--text); white-space: nowrap;
}
.tag-42its { border-color: var(--accent); color: var(--accent-hover); }
.tag-42live { border-color: var(--decor); color: var(--decor); }
.tag-admin { border-color: var(--accent); color: var(--accent-hover); }
.tag-off { color: var(--label); }
.quota { margin-top: 1.25rem; max-width: 24rem; }
.quota .progress { height: 8px; }
.quota p { margin: 0 0 0.4rem; font-size: 0.875rem; }
.empty { padding: 2.5rem 1rem; text-align: center; color: var(--label); }
/* =============================================== public download page */
body.page-download { display: flex; flex-direction: column; min-height: 100vh; }
.dl-header {
padding: 1.75rem var(--gutter);
border-bottom: 1px solid var(--line);
}
/* The real logo from each brand's own site, at the width that site uses
(150px for 42ITS, 84px for 42Live) via the img width attribute. Both
artworks read correctly on a dark ground: 42ITS carries its own grey
panels, 42Live is light artwork on transparency. */
.dl-logo { display: inline-block; line-height: 0; }
.dl-logo img { display: block; height: auto; max-width: 100%; }
.dl-main {
position: relative;
flex: 1;
display: flex; align-items: center; justify-content: center;
padding: clamp(2.5rem, 9vw, 6rem) var(--gutter);
overflow: hidden;
}
.dl-card { position: relative; z-index: 1; width: 100%; max-width: 34rem; }
.dl-eyebrow {
margin: 0 0 1rem;
font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--label);
}
.dl-title {
font: var(--display-weight) clamp(1.75rem, 5.5vw, 2.75rem)/1.15 var(--font-display);
color: var(--heading);
margin: 0 0 1.5rem;
}
.dl-meta {
display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem;
margin: 0 0 2rem; padding: 1.25rem 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.dl-meta dt {
margin: 0 0 0.2rem;
font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--label);
}
.dl-meta dd { margin: 0; color: var(--heading); font-weight: 600; }
.dl-meta .dl-filename { word-break: break-word; }
/* Tabular figures so the ticking countdown doesn't shuffle sideways as the
digits change width.
Deliberately NOT nowrap: the full form is "30 days, 23 hours, 59 mins,
59 secs", which is far too long to hold on one line at phone width. It
wraps between units instead, and min-width keeps the column from being
squeezed into a ragged one-word-per-line stack. */
.dl-countdown {
font-variant-numeric: tabular-nums;
min-width: 11rem;
}
.btn-download { width: 100%; }
/* The expiry wording is something a recipient genuinely has to read, so it
gets --text at 15px rather than --muted small print. On the 42ITS palette
--muted is only 3.7:1, which is for labels and decoration, not prose. */
.dl-note { margin: 1.5rem 0 0; font-size: 0.9375rem; color: var(--text); }
.dl-detail { margin: 0; font-size: 1.0625rem; color: var(--text); }
.dl-footer {
padding: 1.5rem var(--gutter) 2.5rem;
border-top: 1px solid var(--line);
font-size: 0.9375rem; color: var(--text);
}
.dl-footer p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
@media (max-width: 620px) {
.btn { padding: 0.95rem 1.6rem; }
.app-nav { gap: 0.9rem; width: 100%; margin-left: 0; }
.dl-meta { gap: 1rem 1.75rem; }
}
/* ------------------------------------------------- app header logo */
/* The 42ai mark, then the word "send".
The sender pages are the tool itself, not a 42ITS or 42Live page, so they
carry the 42ai identity that matches the domain they run on. A company
logo here would mis-brand a tool that sends both brands' transfers and
personal files.
Sized by HEIGHT, not width: the artwork is near-square (1726x1518), so a
width-driven size would overflow the 72px app bar. The logo's own panel is
black, so on this black bar it reads as artwork floating on the page
rather than as a tile. */
.app-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.app-logo img { display: block; height: 54px; width: auto; }
.app-logo .app-logo-word {
font: var(--display-weight) 1.5rem/1 var(--font-display);
color: var(--heading);
letter-spacing: 0.02em;
}
.app-logo:hover .app-logo-word { color: var(--accent); }
@media (max-width: 620px) {
.app-logo img { height: 42px; }
.app-logo .app-logo-word { font-size: 1.25rem; }
}