Files
azionelab/frontend/src/styles.css

131 lines
2.6 KiB
CSS

:root {
--azionelab-bg: #f5efe6;
--azionelab-bg-strong: #efe4d4;
--azionelab-surface: rgba(255, 251, 246, 0.84);
--azionelab-surface-strong: rgba(255, 252, 248, 0.96);
--azionelab-surface-dark: #342924;
--azionelab-ink: #221c18;
--azionelab-ink-soft: #3a302a;
--azionelab-muted: #6f6258;
--azionelab-accent: #8f332d;
--azionelab-accent-strong: #6e251f;
--azionelab-accent-soft: #c88f64;
--azionelab-highlight: #c6a768;
--azionelab-border: rgba(34, 28, 24, 0.11);
--azionelab-border-strong: rgba(34, 28, 24, 0.18);
--azionelab-shadow: 0 18px 48px rgba(46, 28, 18, 0.10);
--azionelab-shadow-strong: 0 26px 64px rgba(46, 28, 18, 0.16);
--azionelab-radius-sm: 10px;
--azionelab-radius-md: 16px;
--azionelab-radius-lg: 24px;
--azionelab-shell-width: 1180px;
--azionelab-copy-width: 64ch;
--azionelab-section-gap: 28px;
--azionelab-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
--azionelab-serif: "Fraunces", Georgia, "Times New Roman", serif;
--azionelab-success-bg: #edf7ef;
--azionelab-success-ink: #1f5f2b;
--azionelab-success-border: rgba(46, 125, 50, 0.18);
--azionelab-error-bg: #fff3f1;
--azionelab-error-ink: #8b2a20;
--azionelab-error-border: rgba(179, 38, 30, 0.16);
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
min-height: 100%;
font-family: var(--azionelab-sans);
font-weight: 500;
color: var(--azionelab-ink);
background:
linear-gradient(180deg, rgba(143, 51, 45, 0.06), transparent 140px),
linear-gradient(180deg, #faf5ee 0%, var(--azionelab-bg) 52%, #efe4d6 100%);
}
body {
min-height: 100vh;
}
h1, h2, h3 {
font-family: var(--azionelab-serif);
font-weight: 600;
letter-spacing: 0;
color: var(--azionelab-ink);
}
h1 {
font-size: 2.65rem;
line-height: 1.04;
}
h2 {
font-size: 1.7rem;
line-height: 1.16;
}
h3 {
font-size: 1.2rem;
line-height: 1.24;
}
button, input, textarea {
font: inherit;
}
a {
color: var(--azionelab-accent-strong);
}
img {
max-width: 100%;
}
code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
.page {
width: min(100%, var(--azionelab-shell-width));
margin: 0 auto;
}
.eyebrow {
margin: 0 0 12px;
color: var(--azionelab-accent);
text-transform: uppercase;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.12em;
}
.supporting {
color: var(--azionelab-muted);
font-size: 1.02rem;
line-height: 1.72;
max-width: var(--azionelab-copy-width);
}
@media (max-width: 900px) {
h1 {
font-size: 2.15rem;
}
h2 {
font-size: 1.45rem;
}
}
@media (max-width: 640px) {
h1 {
font-size: 1.9rem;
}
h2 {
font-size: 1.3rem;
}
}