/* ========================================================================== Aroma of Italy — design system Brand carried over from the original shop: stark black/white, the boxed "AROMA of ITALY" wordmark, and the antique gold sampled from the jar labels. Modernised with warm paper tones, a fluid type scale and an editorial grid. ========================================================================== */ /* ---------- tokens ------------------------------------------------------- */ :root { /* colour */ --paper: #faf8f4; --paper-sunk: #f2eee5; --paper-deep: #e9e3d6; --ink: #14110f; --ink-soft: #5b5348; --ink-faint: #8b8275; --line: #e2dbcd; --line-strong: #cfc5b2; --gold: #8a6220; --gold-bright: #b4894a; --gold-wash: #f0e7d6; --forest: #3d4a34; --danger: #9d2f22; --danger-wash: #f8ecea; --success: #3f6b45; /* type */ --font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: Fraunces, ui-serif, Georgia, "Times New Roman", serif; --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem); --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem); --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.09rem); --step-1: clamp(1.20rem, 1.13rem + 0.35vw, 1.42rem); --step-2: clamp(1.44rem, 1.32rem + 0.60vw, 1.85rem); --step-3: clamp(1.73rem, 1.53rem + 1.00vw, 2.40rem); --step-4: clamp(2.07rem, 1.75rem + 1.60vw, 3.13rem); --step-5: clamp(2.49rem, 1.99rem + 2.50vw, 4.07rem); --step-6: clamp(2.99rem, 2.22rem + 3.85vw, 5.29rem); /* space */ --sp-3xs: 0.25rem; --sp-2xs: 0.5rem; --sp-xs: 0.75rem; --sp-s: 1rem; --sp-m: 1.5rem; --sp-l: 2.25rem; --sp-xl: 3.5rem; --sp-2xl: 5rem; --sp-3xl: 7.5rem; /* structure */ --measure: 68ch; --shell: 78rem; --shell-wide: 92rem; --gutter: clamp(1.15rem, 4vw, 3rem); --radius: 4px; --radius-lg: 10px; /* motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 260ms; --dur-slow: 520ms; /* elevation */ --shadow-s: 0 1px 2px rgba(20, 17, 15, 0.05), 0 2px 8px rgba(20, 17, 15, 0.04); --shadow-m: 0 2px 6px rgba(20, 17, 15, 0.06), 0 12px 28px rgba(20, 17, 15, 0.08); --shadow-l: 0 6px 16px rgba(20, 17, 15, 0.08), 0 30px 70px rgba(20, 17, 15, 0.14); --header-h: 4.5rem; } @font-face { font-family: Inter; src: url("/fonts/inter-variable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: Fraunces; src: url("/fonts/fraunces-variable.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; } /* ---------- reset -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; min-height: 100svh; display: flex; flex-direction: column; /* `clip` contains stray horizontal overflow without turning into a scroll container the way `hidden` would (which breaks position:sticky descendants). */ overflow-x: clip; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; font-variation-settings: "opsz" 96; } p { text-wrap: pretty; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--gold-wash); color: var(--ink); } /* ---------- layout primitives -------------------------------------------- */ .shell { width: min(100% - var(--gutter) * 2, var(--shell)); margin-inline: auto; } .shell--wide { width: min(100% - var(--gutter) * 2, var(--shell-wide)); } .shell--narrow { width: min(100% - var(--gutter) * 2, 46rem); } main { flex: 1; } .section { padding-block: var(--sp-2xl); } .section--tight { padding-block: var(--sp-xl); } .section--sunk { background: var(--paper-sunk); } .stack > * + * { margin-block-start: var(--flow, var(--sp-s)); } .eyebrow { font-size: var(--step--2); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); } .section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sp-s); margin-block-end: var(--sp-l); } .section-head h2 { font-size: var(--step-3); } .section-head p { color: var(--ink-soft); max-width: 46ch; } .rule { border: 0; border-block-start: 1px solid var(--line); } /* Small utilities. These exist so no template needs a `style` attribute: the CSP sets `style-src 'self'`, which blocks inline styles as well as inline