/** * Critical CSS — Above-the-fold styles inlined in * * Contains only what's needed for first paint: font-face (body subset), * reset, minimal tokens, container, header utility bar, skip links. * Keep under 14 KB. */ /* Font-face — solo Inter Tight latin + DM Serif Display latin (above-the-fold) */ @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/inter-tight-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: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/dm-serif-display-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; } /* Design Tokens — minimal set above-the-fold (palette Warm Mediterranean, allineata al logo) */ :root { --ess-ink: #161512; --ess-ink-soft: #3a362f; --ess-sea: #0e4d64; --ess-sea-dark: #083444; --ess-terra: #c5552d; --ess-terra-dark: #9e4323; --ess-terra-strong: #7d3419; --ess-limone: #e8c341; --ess-ulivo: #6b7a3a; --ess-red: #b33018; --ess-carta: #f6f1e7; --ess-muted: #7a7469; --ess-muted-aa: #686459; /* WCAG AA per body muted (5.91:1) */ --ess-line: #e5dfd1; --ess-line-strong: #d6cfbd; --ess-surface: #f5f1e8; --ess-bg: #ffffff; /* Alias Marina/Logo → Warm Mediterranean (retrocompat) */ --ess-navy: var(--ess-ink); --ess-navy-soft: var(--ess-ink-soft); --ess-orange: var(--ess-terra); --ess-orange-dark: var(--ess-terra-dark); --ess-orange-strong: var(--ess-terra-dark); --ess-wave: var(--ess-ulivo); --ess-gold: var(--ess-limone); --ess-color-orange: var(--ess-terra); --ess-color-blue: var(--ess-ink); --ess-color-primary: var(--ess-ink); --ess-color-accent: var(--ess-terra); --ess-color-text: var(--ess-ink); --ess-color-text-sec: var(--ess-ink-soft); --ess-color-bg: #ffffff; --ess-color-bg-sec: var(--ess-surface); --ess-color-border: var(--ess-line); --ess-color-white: #ffffff; --ess-color-body-bg: #ffffff; --ess-color-body-text: var(--ess-ink); --ess-color-heading: var(--ess-ink); --ess-color-link: var(--ess-ink); --ess-color-neutral-50: var(--ess-surface); --ess-color-neutral-200: var(--ess-line); --ess-font-body: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif; --ess-font-serif: 'DM Serif Display', Georgia, serif; --ess-font-heading: var(--ess-font-serif); --ess-font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; --ess-text-xs: 0.6875rem; --ess-text-sm: 0.8125rem; --ess-text-base: 0.9375rem; --ess-text-lg: 1.125rem; --ess-text-xl: 1.25rem; --ess-weight-bold: 600; --ess-weight-semibold: 600; --ess-leading-normal: 1.55; --ess-leading-tight: 1.05; --ess-tracking-wider: 1.2px; --ess-space-2: 0.5rem; --ess-space-4: 1rem; --ess-space-5: 1.25rem; --ess-space-6: 1.5rem; --ess-space-8: 2rem; --ess-container-max: 1440px; --ess-container-padding: 1.5rem; --ess-radius-full: 999px; --ess-radius-md: 2px; --ess-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --ess-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08); --ess-transition-fast: 150ms cubic-bezier(.2,.7,.3,1); --ess-z-sticky: 200; --ess-z-skip: 9999; } /* Minimal reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: none; text-size-adjust: none; } body { min-height: 100vh; line-height: var(--ess-leading-normal); font-family: var(--ess-font-body); font-size: var(--ess-text-base); color: var(--ess-color-body-text); background-color: var(--ess-color-body-bg); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; height: auto; } ul, ol { list-style: none; } a { color: var(--ess-color-link); text-decoration-skip-ink: auto; } /* Skip links */ .ess-skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--ess-z-skip); padding: var(--ess-space-2) var(--ess-space-4); background: var(--ess-ink); color: #ffffff; font-weight: 500; } .ess-skip-link:focus { left: 0; } /* Container */ .ess-container { width: 100%; max-width: var(--ess-container-max); margin-inline: auto; padding-inline: var(--ess-container-padding); } @media (min-width: 1024px) { .ess-container { padding-inline: 3rem; } } /* Utility bar (topbar — sea blue da handoff, padding 8px) */ .ess-topbar { background: var(--ess-sea); color: #e8eef7; font-size: var(--ess-text-xs); padding: var(--ess-space-2) 0; letter-spacing: 0.3px; } .ess-topbar a { color: #e8eef7; text-decoration: none; opacity: 0.85; } .ess-topbar a:hover { opacity: 1; } /* Header */ .ess-header { background: #ffffff; border-bottom: 1px solid var(--ess-line); position: relative; z-index: var(--ess-z-sticky); } .ess-header__row { min-height: 64px; display: flex; align-items: center; gap: 1.75rem; padding-block: 14px; } @media (min-width: 1024px) { .ess-header__row { min-height: 72px; } } .ess-header__logo { flex-shrink: 0; } .ess-header__logo a { display: inline-flex; align-items: center; text-decoration: none; } .ess-header__logo img { height: 46px; width: auto; } /* Visibility helpers */ .ess-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; }