html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* Self-hosted Inter: no visitor font request leaves VeriFlow. Variable files cover every
weight used by the public site and the Russian staff panels. License: fonts/OFL.txt. */
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
src: url('fonts/inter-cyrillic-ext-400-800.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
src: url('fonts/inter-cyrillic-400-800.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
src: url('fonts/inter-latin-ext-400-800.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;
}
@font-face {
font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
src: url('fonts/inter-latin-400-800.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;
}
/* Light is the default theme; dark is opt-in via data-theme="dark" on . */
:root {
/* One family for the whole project: the public site and both staff panels. It used to be
written two different ways, and form controls did not inherit it at all — see below. */
--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* Monospace only where characters are read one by one: passwords, codes, links. The stack was
written four different ways, including bare `monospace`, which the browser resolves to a
different face than the other three — two adjacent fields looked set in different fonts. */
--font-mono: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
--bg: #f7f8fb;
--bg-elevated: #ffffff;
--ink: #0d1117;
--muted: #5b6472;
--border: #e3e6ec;
--accent: #0f9488;
--accent-text: #0c7a70;
--accent-2: #2f6fed;
--glass-bg: rgba(13,17,23,0.03);
--glass-border: rgba(13,17,23,0.09);
--radius: 16px;
--shadow: 0 8px 30px rgba(13,17,23,0.08);
--shadow-lg: 0 24px 60px rgba(13,17,23,0.14);
/* Light theme's accent gradient is darker/more saturated, so white button text reads best. */
--btn-primary-ink: #ffffff;
--btn-primary-start: #0c7a70;
}
:root[data-theme="dark"] {
--bg: #0a0c12;
--bg-elevated: #12151d;
--ink: #f4f6f8;
--muted: #9aa3b2;
--border: rgba(255,255,255,0.09);
--accent: #7dd3c0;
--accent-text: #7dd3c0;
--accent-2: #5aa9e6;
--glass-bg: rgba(255,255,255,0.045);
--glass-border: rgba(255,255,255,0.1);
--shadow: 0 8px 30px rgba(0,0,0,0.35);
--shadow-lg: 0 24px 70px rgba(0,0,0,0.55);
/* Dark theme's accent gradient is light/pastel, so dark button text reads best. */
--btn-primary-ink: #0a0c12;
--btn-primary-start: #7dd3c0;
}
/* UtenteVero — the Italian brand. Same layout, its own colour: the palette is the fastest way to
tell two sites apart, and teal belongs to the other one. Every value below was measured, not
picked by eye — white on the button gradient is 5.45:1 at one end and 6.22:1 at the other, and
accent text on the page background is 5.89:1, all above the 4.5:1 minimum for small text. */
:root[data-brand="utentevero"] {
--accent: #c2572f;
--accent-text: #a3421f;
--accent-2: #a8385a;
--btn-primary-ink: #ffffff;
--btn-primary-start: #b04a24;
}
:root[data-brand="utentevero"][data-theme="dark"] {
--accent: #f0a06a;
--accent-text: #f0a06a;
--accent-2: #e8859c;
/* Dark ink on the pastel gradient: 9.25:1 and 7.7:1. */
--btn-primary-ink: #0a0c12;
--btn-primary-start: #f0a06a;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-ui);
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
transition: background 0.4s ease, color 0.4s ease;
}
/* Buttons, inputs and selects do NOT inherit the font — that is browser behaviour, not an
oversight in the stylesheet. The panels patched it one rule at a time (18 `font-family:
inherit` declarations in each), so every control added later by a shared module fell back to
the browser font again: measuring in real Chrome found six buttons on Arial and six fields on
monospace in the manager panel alone. One rule here closes the whole class.
Only the family is inherited: size and weight are per-control, and `font: inherit` would wipe
them. Deliberate monospace (passwords, codes) is set by a class and wins on specificity. */
button, input, select, textarea, optgroup { font-family: inherit; }
/* The `hidden` attribute has to beat any class that sets `display`. The browser's own
`[hidden] { display: none }` is a UA rule, so an author rule like `.pw-banner { display: flex }`
silently outranks it and the element never hides — that is exactly why the admin password
banner stayed on screen permanently no matter what the code set. Every `hidden` toggle in
this project depends on this line. */
[hidden] { display: none !important; }
/* Two rules that both staff panels use everywhere and only admin.html defined. manager.html rendered
17 native OS buttons and 16px black hint paragraphs inside a glass panel because of it — the panel
looked broken while nothing about it was. They are generic, so they live here, once. */
.mini-btn { padding: 5px 11px; font-size: 12.5px; border-radius: 6px; border: 1px solid var(--glass-border);
background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap; font-family: inherit; }
.mini-btn:hover { border-color: var(--accent); color: var(--accent); }
.mini-btn:disabled { opacity: .5; cursor: default; border-color: var(--glass-border); color: var(--muted); }
.hint { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
/* Status colours as tokens rather than one hardcoded hex per place. Every literal in the panels was
legible in exactly one theme: amber and coral fell to 1.8-2.3:1 on the light background the product
actually ships by default, brick and olive failed the same way in dark. */
:root {
--ok-ink: #0b6a60;
--warn-ink: #8a6516;
--bad-ink: #a8281c;
--info-ink: #1f4fb8;
}
:root[data-theme="dark"] {
--ok-ink: #7dd3c0;
--warn-ink: #e0a94b;
--bad-ink: #ff9b9b;
--info-ink: #8cc3f5;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ok-ink: #7dd3c0;
--warn-ink: #e0a94b;
--bad-ink: #ff9b9b;
--info-ink: #8cc3f5;
}
}
.container {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}
.bg-mesh {
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(650px circle at 12% 8%, rgba(125,211,192,0.12), transparent 60%),
radial-gradient(550px circle at 88% 20%, rgba(90,169,230,0.08), transparent 60%);
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 {
line-height: 1.14; margin: 0; font-weight: 700; letter-spacing: -0.015em;
font-family: var(--font-ui);
}
p { margin: 0; color: var(--muted); line-height: 1.65; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-text);
margin-bottom: 14px;
font-family: var(--font-ui);
}
.eyebrow::before {
content: '';
width: 22px; height: 1px;
background: var(--accent-text);
}
@media (max-width: 480px) {
.hero .eyebrow::before { display: none; }
}
.text-accent {
background: linear-gradient(120deg, var(--btn-primary-start), var(--accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 26px;
border-radius: 10px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
border: 1.5px solid transparent;
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
white-space: nowrap;
font-family: var(--font-ui);
}
.btn-primary {
background: linear-gradient(120deg, var(--btn-primary-start), var(--accent-2));
color: var(--btn-primary-ink);
box-shadow: 0 12px 26px rgba(125,211,192,0.22);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(125,211,192,0.32);
}
.btn-ghost {
background: var(--glass-bg);
color: var(--ink);
border: 1.5px solid var(--glass-border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn-lg { padding: 16px 32px; font-size: 16px; }
/* Nav */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 15px 0;
transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.nav.scrolled {
background: color-mix(in srgb, var(--bg) 86%, transparent);
backdrop-filter: blur(16px);
box-shadow: 0 1px 0 var(--border), 0 10px 30px rgba(13,17,23,0.05);
padding: 10px 0;
}
.nav-inner { display: flex; align-items: center; justify-content: flex-start; gap: 0; }
.logo { display: flex; align-items: center; gap: 11px; }
.logo-word {
font-family: var(--font-ui); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; color: var(--ink);
}
.logo-word .accent {
background: linear-gradient(120deg, var(--accent), var(--accent-2));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-links { display: flex; gap: 8px; margin-left: 68px; }
.nav-links a {
position: relative; padding: 9px 12px; border-radius: 8px;
font-weight: 550; font-size: 14px; color: var(--muted);
transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--ink); background: var(--glass-bg); }
.nav-links a.active { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.nav-links a.active::after {
content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
border-radius: 2px; background: var(--accent-text);
}
.btn-nav { padding: 11px 22px; font-size: 14px; }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* Log In is an outlined button sitting next to Apply Now, not a muted text link —
as a link it read as a footnote and returning testers missed it entirely. */
.nav-login { white-space: nowrap; padding-inline: 16px; color: var(--muted); background: transparent; border-color: var(--border); }
.nav-login:hover { color: var(--ink); background: var(--glass-bg); border-color: var(--border); transform: none; }
.theme-toggle {
width: 40px; height: 40px; border-radius: 10px;
background: transparent; border: 1px solid transparent;
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--ink); flex-shrink: 0;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.theme-toggle:hover { background: var(--glass-bg); border-color: var(--border); transform: none; }
.theme-toggle svg { display: block; }
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
/* Hero */
.hero { padding: 168px 0 100px; position: relative; }
.hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-copy h1 { font-size: 52px; }
.hero-sub { margin-top: 22px; font-size: 17.5px; max-width: 480px; }
.hero-facts { margin-top: 16px; max-width: 510px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.hero-facts strong { color: var(--accent-text); }
.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust {
margin-top: 26px; max-width: 500px; font-size: 14px; line-height: 1.6;
padding: 14px 16px; border-left: 2px solid var(--accent);
background: var(--glass-bg); border-radius: 8px; color: var(--ink);
}
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.badge-row-label { font-size: 12px; color: var(--muted); width: 100%; margin-bottom: 4px; letter-spacing: 0.03em; }
.badge-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--ink);
}
.badge-pill .dot-mini { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.hero-visual { position: relative; height: 400px; perspective: 1000px; }
.hero-glow {
position: absolute; width: 340px; height: 340px; border-radius: 50%;
background: radial-gradient(circle, rgba(125,211,192,0.28), transparent 70%);
top: 20px; right: 20px; filter: blur(14px);
}
.floating-card {
position: absolute;
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 14px;
padding: 17px 19px;
box-shadow: var(--shadow-lg);
width: 260px;
color: var(--ink);
animation: float 6s ease-in-out infinite;
}
.card-1 { top: 6px; left: 4px; animation-delay: 0s; }
.card-2 { top: 200px; left: 96px; width: 210px; animation-delay: 1.2s; }
.card-3 { top: 56px; left: 226px; animation-delay: 2.4s; }
/* Between phone and full desktop the cards kept their desktop coordinates, which assume a column of
roughly 500px. At 1024px the right-hand card ran 15px past the edge and gave the whole page a
horizontal scrollbar — on a tablet, and on a narrow laptop window. Below 900px the mobile rule
re-anchors them; this band belonged to no one. Pin the right card to the column edge instead of a
fixed offset from the left. */
@media (min-width: 901px) and (max-width: 1120px) {
.card-3 { left: auto; right: 0; }
.card-2 { left: 8%; }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
.fc-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; margin-bottom: 11px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-green { background: #3fbf7f; }
.dot-gold { background: var(--accent); }
.dot-amber { background: #e0a94b; }
.fc-progress { height: 5px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 11px; }
.fc-progress span { display: block; height: 100%; width: 78%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 4px; }
.fc-status { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.fc-amount { font-size: 25px; font-weight: 700; color: var(--accent); font-family: var(--font-ui); }
/* Stats */
.stats { padding: 44px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-num {
display: block; font-size: 42px; font-weight: 700; letter-spacing: -0.01em;
font-family: var(--font-ui);
background: linear-gradient(120deg, var(--accent), var(--accent-2));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-value {
display: block; font-size: 34px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25;
background: linear-gradient(120deg, var(--accent), var(--accent-2));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { font-size: 13.5px; color: var(--muted); font-weight: 500; }
/* Sections */
.section { padding: 108px 0; }
.section-alt { background: var(--bg-elevated); }
.section-head { max-width: 600px; margin: 0 auto 60px; text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head .eyebrow::before { display: none; }
.section-head h2 { font-size: 36px; margin: 6px 0 16px; }
.section-head p { font-size: 17px; }
/* Partner badges */
.partner-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.partner-badge {
display: flex; align-items: center; gap: 10px;
padding: 14px 22px; border-radius: 12px; background: var(--glass-bg); border: 1px solid var(--glass-border);
font-weight: 600; font-size: 14.5px; color: var(--ink);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.partner-badge:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); }
.partner-badge .p-icon { color: var(--accent); display: flex; }
.partner-note { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 20px; font-style: italic; }
/* Team */
#team { padding-block: 82px; }
#team .section-head { max-width: 760px; margin-bottom: 40px; }
#team .section-head h2 { font-size: clamp(32px, 3.5vw, 42px); letter-spacing: -0.025em; text-wrap: balance; }
#team .section-head p { max-width: 650px; margin-inline: auto; }
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.team-card {
display: grid; grid-template-columns: 116px 1fr; overflow: hidden;
min-height: 154px; background: var(--glass-bg); border: 1px solid var(--glass-border);
border-radius: var(--radius); backdrop-filter: blur(20px);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.team-photo { display: block; width: 116px; height: 100%; object-fit: cover; background: var(--bg-elevated); }
.team-card-body { align-self: center; padding: 18px 20px; }
.team-role {
margin-bottom: 5px; color: var(--accent); font-size: 10.5px; line-height: 1.35;
font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.team-card h3 { margin-bottom: 7px; font-size: 17px; line-height: 1.25; }
.team-card-body > p:last-child { font-size: 12.75px; line-height: 1.5; }
.team-note {
max-width: 700px; margin: 22px auto 0; text-align: center; color: var(--muted);
font-size: 13.5px; line-height: 1.6;
}
/* Low-pressure human-help CTA: deliberately no lead form, so it supports rather than competes
with the application. The named support person connects it to the public team above. */
.support-contact { padding-top: 18px; padding-bottom: 18px; }
.support-contact-card {
position: relative; overflow: hidden; display: grid;
grid-template-columns: 190px minmax(0, 1fr) auto; align-items: center; gap: 34px;
padding: 34px 38px; border: 1px solid var(--glass-border); border-radius: 26px;
background:
radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 34%),
radial-gradient(circle at 8% 90%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 38%),
var(--glass-bg);
box-shadow: var(--shadow-lg); backdrop-filter: blur(18px);
}
.support-contact-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.support-photo-wrap { position: relative; width: 92px; height: 92px; }
.support-photo-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid var(--bg-elevated); box-shadow: 0 10px 26px rgba(15,23,42,.16); }
.support-online-dot { position: absolute; right: 3px; bottom: 7px; width: 15px; height: 15px; border-radius: 50%; background: #22b573; border: 3px solid var(--bg-elevated); }
.support-contact-person strong { display: block; font-size: 13.5px; }
.support-contact-person span { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.support-contact-copy .eyebrow { margin-bottom: 8px; }
.support-contact-copy h2 { max-width: 600px; margin-bottom: 10px; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.025em; }
.support-contact-copy > p { max-width: 650px; font-size: 15px; line-height: 1.65; }
.support-topics { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.support-topics span { padding: 6px 10px; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--bg-elevated); color: var(--muted); font-size: 11.5px; font-weight: 600; }
.support-contact-action { min-width: 190px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.support-whatsapp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; }
.support-contact-action > span { color: var(--muted); font-size: 11px; }
/* Steps */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.step-line {
position: absolute; top: 27px; left: 12%; right: 12%; height: 1px;
background: repeating-linear-gradient(90deg, var(--accent) 0 8px, transparent 8px 18px);
opacity: 0.4;
z-index: 0;
}
.step { position: relative; z-index: 1; background: var(--bg); padding: 4px; }
.step-num {
width: 54px; height: 54px; border-radius: 12px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
color: var(--accent); display: flex; align-items: center; justify-content: center;
font-family: var(--font-ui); font-weight: 700; font-size: 17px; margin-bottom: 22px;
}
.step h3 { font-size: 21px; margin-bottom: 11px; font-weight: 700; }
.step p { font-size: 15px; }
/* Task grid */
.task-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.task-card {
background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius);
padding: 26px 28px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
backdrop-filter: blur(20px);
}
.task-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.task-step {
width: 42px; height: 34px; border-radius: 10px; background: rgba(125,211,192,0.12);
color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 17px;
font-size: 13px; font-weight: 800; letter-spacing: 0.08em;
}
.task-card h3 { font-size: 18.5px; margin-bottom: 8px; font-weight: 700; }
.task-card p { font-size: 14.5px; }
.task-assurance {
max-width: 760px; margin: 26px auto 0; text-align: center; color: var(--muted);
font-size: 14.5px; line-height: 1.65;
}
/* Payment */
.payment-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.payment-copy h2 { font-size: 34px; margin-bottom: 18px; }
.payment-copy p { font-size: 16px; margin-bottom: 16px; }
.payment-copy strong { color: var(--ink); font-weight: 700; }
.payment-note { font-size: 14.5px; margin-bottom: 24px; padding: 14px 16px; background: var(--glass-bg); border-left: 2px solid var(--accent); border-radius: 6px; }
.check-list { margin-bottom: 30px; }
.check-list li { position: relative; padding-left: 32px; margin-bottom: 14px; color: var(--ink); font-size: 15px; }
.check-list li::before {
content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
background: rgba(125,211,192,0.16);
}
.check-list li::after {
content: '✓'; position: absolute; left: 4px; top: 1px; color: var(--accent); font-size: 12px; font-weight: 800;
}
.payout-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
color: var(--ink); border-radius: 20px; padding: 30px; box-shadow: var(--shadow-lg);
border: 1px solid var(--glass-border);
}
.payout-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.payout-head span:first-child { opacity: 0.6; font-size: 13.5px; }
.payout-total { font-size: 27px; font-weight: 700; color: var(--accent); font-family: var(--font-ui); }
.payout-row { display: flex; justify-content: space-between; font-size: 14px; padding: 10px 0; opacity: 0.85; }
.payout-disclaimer { font-size: 11.5px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); opacity: 0.7; line-height: 1.5; }
/* FAQ */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
width: 100%; display: flex; justify-content: space-between; align-items: center;
background: none; border: none; padding: 24px 4px; font-size: 16px; font-weight: 600;
color: var(--ink); cursor: pointer; text-align: left; font-family: var(--font-ui);
}
.faq-icon { font-size: 20px; color: var(--accent); transition: transform 0.3s ease; flex-shrink: 0; margin-left: 16px; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-a p { padding: 0 4px 24px; font-size: 15px; }
/* Apply form */
.apply-section { background: var(--bg-elevated); }
.apply-inner { max-width: 580px; }
.apply-form {
background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 22px; padding: 40px;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
backdrop-filter: blur(20px);
}
.apply-form::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.form-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.fp-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.fp-step .fp-dot {
width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border);
display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); color: var(--muted);
transition: all 0.3s ease;
}
.fp-step.active .fp-dot, .fp-step.done .fp-dot { border-color: var(--accent); color: var(--accent); background: rgba(125,211,192,0.1); }
.fp-step.active { color: var(--ink); }
.fp-line { flex: 1; height: 1px; background: var(--border); }
.form-step { display: none; }
.form-step.active { display: block; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.form-row { margin-bottom: 19px; display: flex; flex-direction: column; gap: 7px; }
.form-row label { font-size: 12.5px; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.form-row-split { flex-direction: row; gap: 16px; }
.form-row-split > div { flex: 1; display: flex; flex-direction: column; gap: 7px; }
input, select {
padding: 13px 15px; border-radius: 10px; border: 1.5px solid var(--border);
font-size: 15px; font-family: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease;
background: var(--bg); color: var(--ink);
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(125,211,192,0.15); }
/* An optional field has to say so next to its label. Without it people stall on a code they were
never given, and the form looks like it is missing information. */
/* Referrals: three steps in a row on desktop, stacked on a phone. Same grid as The Work process,
so the reader already knows how to read this block and does not learn it twice. */
.invite-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 8px;
}
.invite-step {
border: 1px solid var(--border);
border-radius: 16px;
padding: 22px 22px 20px;
background: var(--glass-bg);
}
.invite-num {
display: block;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--accent);
margin-bottom: 10px;
}
.invite-step h3 { font-size: 16px; margin: 0 0 7px; }
.invite-step p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.invite-note {
margin: 20px auto 0;
max-width: 720px;
text-align: center;
font-size: 13.5px;
line-height: 1.65;
color: var(--muted);
}
@media (max-width: 900px) {
.invite-grid { grid-template-columns: 1fr; }
}
.field-optional {
font-weight: 500;
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
margin-left: 6px;
}
.field-hint.ok { color: var(--accent); }
.field-hint.bad { color: #d4645f; }
.field-hint { font-size: 12px; color: var(--muted); line-height: 1.45; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.checkbox-row input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.checkbox-row a { color: var(--accent); text-decoration: underline; }
.btn-submit, .btn-next { width: 100%; margin-top: 8px; }
.form-nav { display: flex; gap: 12px; margin-top: 8px; }
.form-nav .btn { flex: 1; }
.form-note { font-size: 13px; margin-top: 12px; text-align: center; min-height: 18px; }
.form-note.error { color: #ff6b6b; }
/* The labels here are sentences, and `.btn` is nowrap by default: on a phone the WhatsApp button
ran past the screen edge and took the whole page sideways with it. */
.apply-success .btn { white-space: normal; text-align: center; max-width: 100%; line-height: 1.35; }
/* Sign-in details shown once. Monospace on purpose: a generated password is read character by
character, and l/1/O/0 are indistinguishable in a proportional face. */
.login-card { margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; text-align: left;
border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.login-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.login-label { font-size: 12.5px; color: var(--muted); min-width: 74px; }
.login-card code { font-family: var(--font-mono); font-size: 14.5px; word-break: break-all; }
.login-copy { font-size: 12.5px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
border: 1px solid var(--glass-border); background: transparent; color: var(--ink); font-family: inherit; }
.login-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 6px 0 0; }
@media (max-width: 560px) { .login-copy { min-height: 44px; } }
.apply-success {
background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 22px; padding: 50px 38px;
text-align: center; box-shadow: var(--shadow-lg); backdrop-filter: blur(20px);
}
.success-icon {
width: 58px; height: 58px; border-radius: 50%; background: rgba(125,211,192,0.14); color: var(--accent);
display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}
.apply-success h3 { font-size: 23px; margin-bottom: 11px; }
/* Footer */
.footer { padding: 44px 0; border-top: 1px solid var(--border); background: var(--bg-elevated); color: var(--muted); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-links { display: flex; gap: 22px; font-size: 13px; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-links a:hover { color: var(--accent); }
.footer-copy { font-size: 12.5px; width: 100%; text-align: center; margin-top: 10px; opacity: 0.7; }
/* Shared legal and not-found pages */
.legal-page { padding: 120px 24px 80px; max-width: 800px; }
.legal-logo { margin-bottom: 26px; display: flex; width: fit-content; }
.legal-page > .eyebrow { display: flex; width: fit-content; margin-bottom: 20px; }
.legal-page > .eyebrow::before { display: none; }
.legal-page h1 { font-size: clamp(34px, 6vw, 48px); margin-bottom: 12px; }
.legal-page h2 { font-size: clamp(20px, 3vw, 24px); margin: 34px 0 10px; }
.legal-page p, .legal-page li { color: var(--muted); line-height: 1.7; font-size: 15px; }
.legal-page ul { list-style: disc; padding-left: 22px; }
.legal-page li { margin-bottom: 8px; }
.legal-updated { font-size: 13px !important; opacity: 0.75; margin-bottom: 20px; }
.legal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.not-found { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; max-width: 760px; padding-top: 80px; padding-bottom: 80px; }
.not-found-code { font-size: clamp(72px, 22vw, 150px); line-height: 0.9; font-weight: 800; letter-spacing: -0.06em; color: var(--accent-text); margin: 54px 0 24px; }
.not-found h1 { font-size: clamp(32px, 7vw, 52px); max-width: 650px; }
.not-found > p:not(.not-found-code) { font-size: clamp(15px, 2.5vw, 18px); margin-top: 18px; max-width: 570px; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* WhatsApp float */
.whatsapp-float {
position: fixed; bottom: 26px; right: 26px; z-index: 90;
width: 58px; height: 58px; border-radius: 50%;
background: #25D366; display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 24px rgba(37,211,102,0.4);
animation: pulse 2.4s ease-in-out infinite;
opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px);
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.whatsapp-float.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.dob-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.dob-fieldset legend { padding: 0; margin-bottom: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
/* minmax(0, …) rather than a bare fr: a bare fr is minmax(auto, …), so a select never becomes
narrower than its longest option — «September» pushed the Year control off the right edge of
the form on a phone. */
.dob-inputs { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.dob-inputs select { min-width: 0; }
@keyframes pulse {
0%, 100% { box-shadow: 0 10px 24px rgba(37,211,102,0.4); }
50% { box-shadow: 0 10px 24px rgba(37,211,102,0.4), 0 0 0 10px rgba(37,211,102,0.12); }
}
/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* Set by the reveal backstop in script.js. The fade is worth nothing once it has already failed to
run, and a half-faded block is worse than no animation at all. */
.reveal-now .reveal { opacity: 1; transform: none; transition: none; }
/* Responsive */
@media (max-width: 900px) {
.hero-inner, .payment-inner { grid-template-columns: 1fr; }
.hero-visual { height: 320px; margin-top: 24px; }
.steps, .stats-grid { grid-template-columns: repeat(2, 1fr); }
.team-grid { grid-template-columns: repeat(2, 1fr); }
.support-contact-card { grid-template-columns: 120px minmax(0,1fr); gap: 24px; padding: 30px; }
.support-contact-action { grid-column: 2; align-items: flex-start; }
.task-grid { grid-template-columns: 1fr; }
.nav { padding: 12px 0 11px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px); }
.nav-inner { position: relative; }
.nav-links {
display: flex; position: absolute; top: calc(100% + 12px); left: 0; right: 0;
margin-left: 0; gap: 8px; padding: 8px 24px 10px; overflow-x: auto; overscroll-behavior-inline: contain;
scrollbar-width: none; background: color-mix(in srgb, var(--bg) 94%, transparent);
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.nav-links a.active::after { display: none; }
.hero-copy h1 { font-size: clamp(32px, 8.7vw, 40px); }
/* The floating cards are absolutely positioned for a ~500px-wide desktop column.
Re-anchor them to the container's own width so nothing hangs off a phone screen. */
.hero-glow { width: 240px; height: 240px; right: 0; }
.floating-card { width: auto; }
.card-1 { top: 0; left: 0; right: 26%; }
.card-2 { top: 200px; left: 12%; right: 22%; }
.card-3 { top: 92px; left: 30%; right: 0; }
/* Eight badges at desktop size turn into an eight-row stack on a phone. */
.partner-row { gap: 8px; }
.partner-badge { padding: 10px 14px; font-size: 13px; gap: 7px; border-radius: 10px; }
.partner-badge svg { width: 16px; height: 16px; }
}
@media (max-width: 560px) {
/* Three controls plus the wordmark have to share ~330px, so tighten everything
rather than dropping Log In — returning testers need it most on mobile. */
.nav-inner { gap: 10px; }
.nav-actions { gap: 8px; }
.logo-word { font-size: 19px; }
.btn-nav { padding: 10px 14px; font-size: 13px; }
.theme-toggle { width: 44px; height: 44px; }
.steps, .stats-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: 1fr; }
.team-card { max-width: 460px; width: 100%; margin-inline: auto; }
.support-contact { padding-top: 8px; padding-bottom: 8px; }
.support-contact-card { grid-template-columns: 1fr; gap: 20px; padding: 26px 22px; text-align: center; }
.support-contact-person { flex-direction: row; justify-content: center; text-align: left; }
.support-photo-wrap { width: 64px; height: 64px; }
.support-contact-copy .eyebrow { justify-content: center; }
.support-contact-copy .eyebrow::before { display: none; }
.support-contact-copy h2 { font-size: 28px; }
.support-topics { justify-content: center; }
.support-contact-action { grid-column: 1; align-items: stretch; min-width: 0; }
#team { padding-block: 68px; }
#team .section-head { margin-bottom: 32px; }
#team .section-head h2 { font-size: 30px; }
.step-line { display: none; }
.form-row-split { flex-direction: column; }
.hero { padding: 142px 0 44px; }
.hero-inner { gap: 0; }
/* Tracking, not size, is the lever for fitting this on one line: the size was deliberately
raised from 10.5px to 12px for legibility and must not be walked back. */
.hero .eyebrow { font-size: 12px; letter-spacing: 0.04em; margin-bottom: 10px; }
.hero-copy h1 { line-height: 1.08; }
.hero-sub { margin-top: 14px; font-size: 15px; line-height: 1.5; }
.hero-facts { margin-top: 12px; font-size: 13.5px; }
.hero-actions { margin-top: 20px; gap: 10px; }
.hero-actions .btn { flex: 1 1 145px; padding: 13px 15px; }
.hero-trust, .badge-row, .hero-visual { display: none; }
.stats { padding: 30px 0; }
.dob-inputs { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.btn-nav { min-height: 44px; }
.nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-links { width: 100%; justify-content: center; flex-wrap: wrap; gap: 4px 18px; }
.footer-copy, .field-hint, .badge-row-label { font-size: 13px; }
.legal-page { padding-top: 80px; }
.apply-form { padding: 28px 22px; }
}
/* Touch and legibility floor for tablets as well as phones. The existing rules stopped at 560px, so
an iPad — a touch device by any measure — kept 34px controls and 11-12px helper text. Measured at
768px before this block: 7 controls under 44px and 16 texts under 12.5px. */
@media (max-width: 899px) {
.btn, .btn-nav, .nav-links a, .footer-links a, button, select,
input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; }
.field-hint, .footer-copy, .badge-row-label, .form-note, .hint,
.faq-a p, .stat-label, .step-num,
.team-role, .payout-disclaimer,
.hero .eyebrow, .support-topics span, .support-contact-action span,
.support-contact-copy .eyebrow,
.support-contact-person span, .fc-status { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
.reveal { opacity: 1; transform: none; }
.floating-card, .whatsapp-float { animation: none; }
}
/* Reveal control on password fields. A password typed blind and rejected tells you nothing about
which half was wrong — the field or the keyboard layout — and that is most of what a failed login
actually is. The button is inside the field's own row so it cannot drift out of alignment. */
.pw-field { position: relative; display: flex; }
.pw-field input { flex: 1 1 auto; width: 100%; min-width: 0; padding-right: 46px; }
.pw-reveal {
position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px; padding: 0;
background: none; border: 0; border-radius: 8px; cursor: pointer;
color: var(--muted); line-height: 1;
}
.pw-reveal:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.pw-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pw-reveal svg { width: 19px; height: 19px; display: block; }
.pw-reveal .pw-off { display: none; }
.pw-reveal[aria-pressed="true"] .pw-on { display: none; }
.pw-reveal[aria-pressed="true"] .pw-off { display: block; }
/* Dense staff tables scroll inside their section, never widen the whole account page. */
.table-scroll { width:100%; max-width:100%; min-width:0; overflow-x:auto; border-radius:16px; }
/* Translated drafts remain next to their composer even when the reply is several pages long. */
.admin-wrap .draft-ru, .wrap .draft-ru {
min-width:0; max-height:min(88px,14dvh); overflow:auto; overflow-wrap:anywhere;
}
dialog .modal-card :is(.form-group,.form-row) { min-width:0; }
dialog .modal-card :is(input,select,textarea) { min-width:0; max-width:100%; }
dialog .modal-card :is(.modal-actions,.row-actions) { flex-wrap:wrap; }
dialog .modal-card .script-review-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
dialog .modal-card button { white-space:normal; overflow-wrap:anywhere; }
dialog :is(input,select,textarea) { min-width:0; max-width:100%; box-sizing:border-box; }
/* Funnel editors used bare dialogs; give them the same card surface as the other account windows. */
dialog:not(:has(.modal-card)) {
background:var(--bg-elevated); color:var(--ink); border:1px solid var(--glass-border);
border-radius:20px; padding:clamp(18px,4vw,30px); width:min(540px,92vw);
max-height:90dvh; overflow:auto; box-shadow:var(--shadow-lg);
}
dialog:not(:has(.modal-card)) > label { display:block; font-size:13px; margin:10px 0 6px; }
dialog:not(:has(.modal-card)) > :is(input,select,textarea) {
font:inherit; padding:10px 12px; border-radius:10px; border:1px solid var(--glass-border);
background:var(--bg); color:var(--ink);
}
dialog .dlg-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:18px; }
html body form[data-file-context] {
display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:10px; min-width:0;
}
.chat-composer .composer-copy { min-width:0; max-width:100%; }
dialog .invite-link-box { flex-wrap:wrap; }
dialog .invite-link-box input { flex:1 1 180px; }
dialog .invite-link-box button { flex:0 1 auto; }
html dialog > :is(input,select,textarea) { width:100%; }
.feed-card .row-actions { flex-wrap:wrap; }
#feedDays, #feedGroups { flex-wrap:wrap; }
.feed-item > div { min-width:0; overflow-wrap:anywhere; }
dialog .task-grid, dialog .task-grid label { min-width:0; }
@media(max-width:620px) {
html dialog .task-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media(max-width:720px) {
html body form[data-file-context] { grid-template-columns:minmax(0,1fr); }
form[data-file-context] .composer-actions { flex-direction:row; flex-wrap:wrap; }
form[data-file-context] .composer-actions > * { flex:1 1 130px; }
html body.admin-chat-max #tabInbox .chat-layout { grid-template-columns:minmax(0,1fr); height:calc(100dvh - 54px); }
html body.admin-chat-max #tabInbox .thread-list { display:none; }
html body.chat-max #managerTabInbox .layout { grid-template-columns:minmax(0,1fr); }
html body.chat-max #managerTabInbox .list { display:none; }
}
@media(min-width:561px) and (max-width:1100px) {
html body .top-bar { position:static; flex-wrap:wrap; gap:12px; padding:12px 18px; }
html body .top-bar > :last-child { min-width:0; flex-wrap:wrap; justify-content:flex-end; gap:6px !important; }
html body .top-bar .btn { padding:7px 10px !important; font-size:12px !important; }
html body :is(.admin-wrap,.wrap,.portal-wrap) { padding-top:28px; }
}
/* --- Tracking consent ---------------------------------------------------------------------------
The Meta pixel is a non-essential tracker and the audience is Irish, so the ePrivacy Regulations
2011 require a choice before it loads.
Accept and Decline are deliberately the same class, size and weight. A bright Accept beside a
faint Decline is the exact pattern EU regulators single out, and the whole point of asking is lost
if refusing costs more effort than agreeing. If either button is ever restyled, restyle both. */
.consent {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 300;
padding: 16px;
background: var(--bg-elevated);
border-top: 1px solid var(--border);
box-shadow: var(--shadow-lg);
}
.consent-inner {
max-width: 1120px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.consent-text {
flex: 1 1 320px;
min-width: 0;
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--muted);
}
.consent-text a { color: var(--accent-text); }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-actions .btn { padding: 11px 22px; font-size: 14px; min-width: 130px; }
@media (max-width: 620px) {
.consent { padding: 14px; }
.consent-inner { gap: 14px; }
.consent-actions { width: 100%; }
.consent-actions .btn { flex: 1 1 0; min-width: 0; }
}
/* The floating WhatsApp button is fixed bottom-right and would sit underneath the banner. The offset
comes from the banner's measured height (script.js sets --consent-height), not from a number picked
by eye: the banner grows when its text wraps, and a constant would drift apart from it. */
body.has-consent .whatsapp-float { bottom: calc(var(--consent-height, 0px) + 20px); }