/* Bussola: the one stylesheet of bussola.company. Layers, from weakest to strongest. Colours are OKLCH tokens that follow the theme through light-dark(): the system's, or the one pinned with the header's switch (data-theme on , set by theme.js and by the inline script in ). A browser without light-dark() gets the light theme in plain hex, and no switch. Everything newer than Baseline "widely available" is an enhancement: the page reads and works without it. */ @layer reset, tokens, base, layout, components, pages, utilities; /* Fraunces (SIL Open Font License, assets/fonts/OFL.txt): roman with its weight and optical-size axes, SOFT and WONK pinned at 0; the italic is one static cut (weight 380, optical size 110) because only headlines use it. */ @font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-roman.f0b45b9cc0.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-italic.0c8bdacec5.woff2") format("woff2"); font-weight: 380; font-style: italic; font-display: swap; } /* Georgia, resized to Fraunces's measurements, so the headline doesn't jump when the font arrives. */ @font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 94.52%; ascent-override: 103.47%; descent-override: 26.98%; line-gap-override: 0%; } @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-block-size: 100svh; line-height: 1.55; -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-inline-size: 100%; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } p, h1, h2, h3, li, dt, dd { overflow-wrap: break-word; } :where(ul, ol)[role="list"] { list-style: none; padding: 0; } fieldset { border: 0; padding: 0; min-inline-size: 0; } legend { padding: 0; } [hidden] { display: none !important; } } @layer tokens { :root { color-scheme: light dark; --paper: light-dark(oklch(0.972 0.010 75), oklch(0.195 0.012 55)); --paper-2: light-dark(oklch(0.948 0.015 72), oklch(0.228 0.014 55)); --surface: light-dark(oklch(0.99 0.005 80), oklch(0.245 0.016 55)); --ink: light-dark(oklch(0.27 0.032 52), oklch(0.935 0.014 78)); --ink-2: light-dark(oklch(0.435 0.036 55), oklch(0.77 0.022 70)); --brand: light-dark(oklch(0.43 0.075 50), oklch(0.785 0.085 66)); --brand-hover: light-dark(oklch(0.37 0.068 48), oklch(0.845 0.075 70)); --on-brand: light-dark(oklch(0.985 0.008 80), oklch(0.2 0.015 55)); --accent: light-dark(oklch(0.47 0.095 52), oklch(0.8 0.095 64)); --needle: light-dark(oklch(0.585 0.145 38), oklch(0.7 0.13 40)); --error: light-dark(oklch(0.49 0.17 29), oklch(0.74 0.14 29)); --ok: light-dark(oklch(0.47 0.1 150), oklch(0.78 0.12 150)); --line: color-mix(in oklch, var(--ink) 14%, transparent); --line-strong: color-mix(in oklch, var(--ink) 28%, transparent); --field-border: color-mix(in oklch, var(--ink) 58%, var(--surface)); --field-bg: color-mix(in oklch, var(--surface) 55%, var(--paper)); --focus: var(--accent); --shadow: 0 1px 2px oklch(0.3 0.04 50 / 0.06), 0 14px 36px -14px oklch(0.3 0.04 50 / 0.2); --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --step-1: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem); --step-2: clamp(1.4375rem, 1.25rem + 0.9vw, 1.9375rem); --step-3: clamp(1.875rem, 1.45rem + 2vw, 3.125rem); --step-4: clamp(2.5rem, 1.6rem + 4.4vw, 5.25rem); --wrap: 76rem; --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); --radius-s: 0.625rem; --radius-m: 1rem; --radius-l: 1.625rem; --header-h: 4.25rem; /* A damped spring from 0 to 1 (overshoot 37 %), sampled for linear(): the needle finding north. */ --spring: linear(0, 0.069 2.5%, 0.246 5%, 0.487 7.5%, 0.745 10%, 0.984 12.5%, 1.175 15%, 1.304 17.5%, 1.365 20%, 1.366 22.5%, 1.318 25%, 1.238 27.5%, 1.143 30%, 1.049 32.5%, 0.968 35%, 0.908 37.5%, 0.872 40%, 0.861 42.5%, 0.871 45%, 0.896 47.5%, 0.929 50%, 0.965 52.5%, 0.998 55%, 1.024 57.5%, 1.042 60%, 1.051 62.5%, 1.051 65%, 1.044 67.5%, 1.033 70%, 1.02 72.5%, 1.007 75%, 0.995 77.5%, 0.987 80%, 0.982 82.5%, 0.981 85%, 0.982 87.5%, 0.986 90%, 0.99 92.5%, 0.995 95%, 1 97.5%, 1); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); } @media (prefers-contrast: more) { :root { --ink-2: var(--ink); --line: color-mix(in oklch, var(--ink) 45%, transparent); --line-strong: color-mix(in oklch, var(--ink) 70%, transparent); --field-border: var(--ink); } } /* A theme pinned with the switch: light-dark() follows color-scheme, so this is all it takes. */ @supports (color: light-dark(#000, #fff)) { :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } } @supports not (color: light-dark(#000, #fff)) { :root { color-scheme: light; --paper: #faf5ef; --paper-2: #f4ece3; --surface: #fefbf8; --ink: #332218; --ink-2: #5f4a3d; --brand: #704328; --brand-hover: #5d341e; --on-brand: #fdfaf4; --accent: #844a23; --needle: #c15735; --error: #ac281e; --ok: #296a3b; --line: rgb(51 34 24 / 0.14); --line-strong: rgb(51 34 24 / 0.28); --field-border: #7d6a5e; --field-bg: #fcf8f3; } } } @layer base { html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + 1rem); scrollbar-gutter: stable; hanging-punctuation: first last; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); font-kerning: normal; } h1, h2, h3 { font-family: var(--font-display); font-weight: 420; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; font-synthesis: none; font-optical-sizing: auto; } p, li, dd { text-wrap: pretty; } a { color: var(--accent); text-decoration-thickness: from-font; text-underline-offset: 0.2em; &:hover { color: var(--ink); } } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } ::selection { background: color-mix(in oklch, var(--accent) 26%, transparent); } strong { font-weight: 650; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* A short window (a phone on its side, or text zoomed): the header scrolls away instead of covering the page. */ @media (max-height: 30rem) { html { scroll-padding-block-start: 1rem; } } } @layer layout { .wrap { inline-size: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; } main:focus { outline: none; } .section { padding-block: clamp(4rem, 3rem + 5vw, 7.5rem); } .section--band { background: var(--paper-2); border-block: 1px solid var(--line); } .section__head { max-inline-size: 46rem; margin-block-end: clamp(2rem, 1.5rem + 2.5vw, 3.75rem); } .section__title { font-size: var(--step-3); font-weight: 400; letter-spacing: -0.02em; } .section__intro { margin-block-start: 1rem; font-size: var(--step-1); color: var(--ink-2); max-inline-size: 38rem; } } @layer components { /* ── Skip link ─────────────────────────────────────────────── */ .skip-link { position: absolute; inset-inline-start: 1rem; inset-block-start: 0.75rem; z-index: 100; padding: 0.75rem 1.1rem; border-radius: var(--radius-s); background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; translate: 0 -250%; &:focus { translate: 0 0; } } /* ── Icons ─────────────────────────────────────────────────── */ .icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* A filled drawing (the translate mark on the language button): ink, no line. */ .icon--filled { fill: currentColor; stroke: none; } /* ── The compass mark ──────────────────────────────────────── */ .mark__disc, .mark__pivot { fill: var(--brand); } .mark__ticks { fill: none; stroke: var(--on-brand); stroke-opacity: 0.5; stroke-width: 3; stroke-linecap: round; } .mark__north { fill: var(--on-brand); } .mark__south { fill: var(--on-brand); fill-opacity: 0.4; } .mark__needle { transform-box: view-box; transform-origin: 32px 32px; } /* ── Header ────────────────────────────────────────────────── */ .site-header { position: sticky; inset-block-start: 0; z-index: 10; container: header / inline-size; container: header / inline-size scroll-state; background: color-mix(in oklch, var(--paper) 84%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); view-transition-name: site-header; @media (max-height: 30rem) { position: relative; } } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-block-size: var(--header-h); border-block-end: 1px solid transparent; transition: border-color 0.25s; } /* A hairline only once the header is stuck over the page (scroll-state queries; elsewhere: no line). */ @container header scroll-state(stuck: top) { .site-header__inner { border-block-end-color: var(--line); } } .brand { display: inline-flex; align-items: center; gap: 0.6rem; min-block-size: 2.75rem; color: var(--ink); text-decoration: none; border-radius: var(--radius-s); &:hover { color: var(--ink); } } .brand__mark { inline-size: 2.125rem; block-size: 2.125rem; flex: none; } .brand__name { font-family: var(--font-display); font-size: 1.4375rem; font-weight: 520; letter-spacing: -0.01em; line-height: 1; } .brand--small .brand__mark { inline-size: 1.75rem; block-size: 1.75rem; } .brand--small .brand__name { font-size: 1.25rem; } .site-nav { display: flex; align-items: center; gap: 0.35rem; } /* The language button and the light/dark switch: quiet round buttons, 44 px. */ .lang-button, .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-block-size: 2.75rem; min-inline-size: 2.75rem; padding: 0 0.65rem; border: 0; border-radius: 999px; background: none; color: var(--ink); font-size: 0.9375rem; font-weight: 600; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; /* Only where there's a real pointer: after a tap, a touch screen keeps :hover, and the switch would look held. */ @media (hover: hover) { &:hover { background: color-mix(in oklch, var(--ink) 7%, transparent); } } .icon { inline-size: 1.15rem; block-size: 1.15rem; } } .theme-toggle { padding: 0; .icon { inline-size: 1.3rem; block-size: 1.3rem; } } /* The switch shows the theme the page is in: the sun in light, the moon in dark. */ .theme-toggle__moon { display: none; } :root[data-theme="dark"] .theme-toggle { .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle { .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } } } /* No switch where it can't work: without JavaScript, or without light-dark() (forced colours: at the end). */ @media (scripting: none) { .theme-toggle { display: none; } } @supports not (color: light-dark(#000, #fff)) { .theme-toggle { display: none; } } /* The language menu: a popover under its button where anchor positioning exists, elsewhere dropping from the header's right edge. Without popovers the button and the menu go, and the footer's links remain. */ .lang-menu { position: fixed; inset: calc(var(--header-h) - 0.25rem) max(var(--gutter), (100% - var(--wrap)) / 2) auto auto; margin: 0; min-inline-size: 12.5rem; padding: 0.375rem; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } /* Right-aligned under the button, at least 1rem from the screen's left edge; where there's no room for that (a narrow screen), centred under it (--lang-centred, at the end of the file). */ @supports (position-anchor: --lang) { .lang-button { anchor-name: --lang; } .lang-menu { position-anchor: --lang; position-area: bottom span-left; position-try-fallbacks: --lang-centred, flip-inline; inset: auto; margin: 0.375rem 0 0 1rem; } } @supports selector(:popover-open) { .lang-button:has(+ .lang-menu:popover-open) { background: color-mix(in oklch, var(--ink) 7%, transparent); } } @supports not selector(:popover-open) { .lang-button, .lang-menu { display: none; } } .lang-menu__list { display: grid; gap: 0.125rem; } /* Each language: its round flag (decorative: the name says it), its name, and a check on the current one. */ .lang-menu__link { display: flex; align-items: center; gap: 0.7rem; min-block-size: 2.75rem; padding: 0.5rem 0.75rem 0.5rem 0.85rem; border-radius: var(--radius-s); color: var(--ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; &:hover { color: var(--ink); } @media (hover: hover) { &:hover { background: color-mix(in oklch, var(--ink) 7%, transparent); } } &:focus-visible { outline-offset: -3px; } &[aria-current] { color: var(--accent); } > span { flex: 1; } .icon { inline-size: 1.1rem; block-size: 1.1rem; margin-inline-start: 0.3rem; stroke-width: 2.2; } } .lang-menu__flag { inline-size: 1.25rem; block-size: 1.25rem; flex: none; border-radius: 50%; } .site-nav .button { white-space: nowrap; } /* a two-line pill looks broken: better a little tighter */ /* Narrower headers (thresholds measured with the longest words, in every language): the language code goes (the translate mark stays: "IT" alone reads as a service), then the name and the button get smaller, then only the mark is left (its link keeps the name for screen readers). */ @container header (width < 25rem) { .lang-button { padding: 0; } .lang-button__code { display: none; } } @container header (width < 24rem) { .brand__name { font-size: 1.3125rem; } .site-nav .button--small { padding-inline: 0.85rem; } } @container header (width < 22.5rem) { .site-header__inner:has(.site-nav .button) .brand__name { display: none; } /* the contact page has no button */ } /* ── Buttons ───────────────────────────────────────────────── */ .button { --button-bg: transparent; --button-fg: var(--ink); --button-border: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-block-size: 2.75rem; padding: 0.6rem 1.25rem; border: 1.5px solid var(--button-border); border-radius: 999px; background: var(--button-bg); color: var(--button-fg); font-size: 1rem; font-weight: 600; line-height: 1.15; text-decoration: none; text-align: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s, scale 0.15s; &:hover { color: var(--button-fg); } &:active { scale: 0.98; } .icon { inline-size: 1.15em; block-size: 1.15em; transition: translate 0.2s var(--ease-out); } } .button--primary { --button-bg: var(--brand); --button-fg: var(--on-brand); &:hover { --button-bg: var(--brand-hover); } &:hover .icon { translate: 0.18em 0; } } .button--quiet { --button-border: var(--line-strong); &:hover { --button-bg: color-mix(in oklch, var(--ink) 6%, transparent); } } .button--link { --button-fg: var(--accent); padding-inline: 0.5rem; text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 0.2em; } .button--small { padding: 0.5rem 1.05rem; font-size: 0.9375rem; } .button--large { min-block-size: 3.25rem; padding: 0.8rem 1.6rem; font-size: 1.0625rem; } /* ── Eyebrow (the small line above a title) ────────────────── */ .eyebrow { display: flex; align-items: center; gap: 0.75rem; margin-block-end: 1.1rem; color: var(--accent); font-size: var(--step--1); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; &::before { content: ""; inline-size: 1.75rem; block-size: 1.5px; background: currentColor; flex: none; } } /* ── Cards with the Apple-style continuous corner, where supported ── */ @supports (corner-shape: squircle) { .service, .client__tile, .form, .form-success, .cta__inner, .toggletip { corner-shape: squircle; border-radius: calc(var(--radius-l) * 1.7); } } } @layer pages { /* ── Home: hero ────────────────────────────────────────────── */ .hero { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 1.5rem + 5vw, 6.5rem) clamp(3.5rem, 2rem + 5vw, 7rem); @media (width >= 62rem) { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); } } .hero__title { font-size: var(--step-4); font-weight: 380; line-height: 1.02; letter-spacing: -0.028em; & em { font-style: italic; color: var(--accent); } } .hero__lead { margin-block-start: 1.5rem; max-inline-size: 36rem; color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 2.25rem; /* On a phone the two buttons stack at full width rather than wrapping at two different widths. */ @media (width < 30rem) { flex-direction: column; } } .hero__proof { display: flex; align-items: center; gap: 0.55rem; margin-block-start: 1.75rem; color: var(--ink-2); font-size: var(--step--1); .icon { color: var(--accent); inline-size: 1.2rem; block-size: 1.2rem; } } .hero__art { justify-self: center; inline-size: min(84%, 23rem); @media (width >= 62rem) { inline-size: min(100%, 33rem); } } /* The compass rose (compass.mjs draws it; here it gets its colours and its motion). */ .rose { inline-size: 100%; block-size: auto; aspect-ratio: 1; overflow: visible; } .rose__rhumbs { fill: none; stroke: color-mix(in oklch, var(--ink) 11%, transparent); stroke-width: 1; } .rose__ring { fill: none; stroke: color-mix(in oklch, var(--ink) 38%, transparent); stroke-width: 1.25; } .rose__ring--inner { stroke: color-mix(in oklch, var(--ink) 16%, transparent); } .rose__ticks { fill: none; stroke: color-mix(in oklch, var(--ink) 42%, transparent); stroke-width: 1.25; } .rose__dark { fill: var(--brand); } .rose__light { fill: var(--paper); stroke: color-mix(in oklch, var(--brand) 60%, transparent); stroke-width: 1.25; stroke-linejoin: round; } .rose__letters text { fill: var(--ink-2); font-family: var(--font-display); font-size: 26px; font-weight: 500; text-anchor: middle; dominant-baseline: central; } .rose__needle-n { fill: var(--needle); } .rose__needle-s { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; } .rose__cap { fill: var(--brand); } .rose__pin { fill: var(--paper); } .rose__dial, .rose__needle { transform-box: view-box; transform-origin: 320px 320px; } /* ── Home: services ────────────────────────────────────────── */ .services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; } .service { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.9rem; align-content: start; padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); } .service__icon { inline-size: 2.875rem; block-size: 2.875rem; padding: 0.65rem; border-radius: 50%; background: color-mix(in oklch, var(--accent) 12%, transparent); color: var(--accent); } .service__title { font-size: var(--step-2); } .service__text { color: var(--ink-2); } .service__points { display: grid; gap: 0.5rem; align-content: start; padding-block-start: 1.1rem; border-block-start: 1px solid var(--line); font-size: var(--step--1); & li { display: flex; gap: 0.65rem; align-items: baseline; } & li::before { content: ""; inline-size: 0.4rem; block-size: 0.4rem; flex: none; border-radius: 50%; background: var(--accent); translate: 0 -0.12em; } } /* ── Home: principles (N, E, S, W) ─────────────────────────── */ .principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(2rem, 1rem + 4vw, 5rem); } .principle__title { display: flex; align-items: center; gap: 1rem; font-family: var(--font-display); font-size: var(--step-2); font-weight: 420; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; } .principle__point { display: grid; place-items: center; flex: none; inline-size: 2.75rem; block-size: 2.75rem; border: 1.5px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 1.125rem; font-weight: 520; letter-spacing: 0; } .principle__text { margin-block-start: 0.6rem; margin-inline-start: 3.75rem; color: var(--ink-2); } /* ── Home: clients ─────────────────────────────────────────── */ #clients { container: clients / inline-size; } .clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 2.75rem 1.5rem; } .client { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.35rem; } .client__tile { display: grid; place-items: center; aspect-ratio: 2 / 1; margin-block-end: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--paper-2); overflow: hidden; } /* Each logo is a one-colour SVG used as a mask, painted in the text colour: it follows the theme on its own. */ /* The box the logo fits in: a share of the tile, capped, so a wider tile doesn't mean a bigger logo. */ .client__logo { inline-size: min(var(--logo-w, 60%), var(--logo-max, 14rem)); block-size: var(--logo-h, 46%); background: var(--ink); opacity: 0.88; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; } .client--marinella { --logo: url("/assets/clients/marinella.6d8537239a.svg"); --logo-w: 68%; --logo-max: 15rem; --logo-h: 44%; } .client--nataamilano { --logo: url("/assets/clients/nataamilano.b327bcc143.svg"); --logo-h: 68%; } .client--orion57 { --logo: url("/assets/clients/orion57.0f42e7fd0e.svg"); --logo-h: 64%; } .client--sapiens { --logo: url("/assets/clients/sapiens.915f89a017.svg"); --logo-w: 54%; --logo-max: 12rem; } .client--bureau-it { --logo: url("/assets/clients/bureau-it.5cdd9a8a21.svg"); --logo-w: 74%; --logo-max: 16.5rem; } .client__name { font-size: var(--step-1); font-weight: 460; } .client__sector { color: var(--accent); font-size: var(--step--1); font-weight: 650; } .client__work { color: var(--ink-2); } /* Wide (after the base rules, which it overrides): three cards, then two wider ones, so no row is left half-empty. */ @container clients (width >= 58rem) { .clients { grid-template-columns: repeat(6, minmax(0, 1fr)); } .client { grid-column: span 2; } .client:nth-child(n + 4) { grid-column: span 3; } .client__tile { aspect-ratio: auto; block-size: 13rem; } /* one height for both rows */ } /* ── Home: closing call to action ──────────────────────────── */ .cta { padding-block-end: clamp(4rem, 3rem + 5vw, 7.5rem); } .cta__inner { --focus: var(--on-brand); display: grid; justify-items: center; gap: 1.25rem; padding: clamp(2.75rem, 2rem + 4vw, 5.5rem) clamp(1.5rem, 1rem + 4vw, 5rem); border-radius: calc(var(--radius-l) * 1.25); background: var(--brand); color: var(--on-brand); text-align: center; .button--primary { --button-bg: var(--on-brand); --button-fg: var(--brand); } .button--primary:hover { --button-bg: color-mix(in oklch, var(--on-brand) 88%, var(--brand)); } } .cta__mark { inline-size: 3.25rem; block-size: 3.25rem; .mark__disc, .mark__pivot { fill: var(--on-brand); } .mark__ticks { stroke: var(--brand); } .mark__north { fill: var(--brand); } .mark__south { fill: var(--brand); } } .cta__title { max-inline-size: 22ch; font-size: var(--step-3); font-weight: 380; letter-spacing: -0.02em; } .cta__text { max-inline-size: 36rem; font-size: var(--step-1); } /* ── Footer ────────────────────────────────────────────────── */ .site-footer { padding-block: 2.75rem 3rem; border-block-start: 1px solid var(--line); color: var(--ink-2); font-size: var(--step--1); } .site-footer__inner { display: grid; gap: 1.25rem 3rem; @media (width >= 48rem) { grid-template-columns: 1fr auto; align-items: start; } } .site-footer__brand { display: grid; gap: 0.35rem; justify-items: start; } .site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; } .site-footer__nav a { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--ink); font-weight: 600; &[aria-current="page"] { text-decoration-thickness: 2px; } } .site-footer__legal { grid-column: 1 / -1; } /* ── Contact page ──────────────────────────────────────────── */ .contact { display: grid; grid-template-areas: "intro" "panel" "next"; gap: clamp(2rem, 1.5rem + 3vw, 3.5rem); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(4rem, 3rem + 5vw, 7.5rem); @media (width >= 62rem) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "intro panel" "next panel"; grid-template-rows: auto 1fr; column-gap: clamp(3rem, 6vw, 6rem); align-items: start; } } .contact__intro { grid-area: intro; } .contact__panel { grid-area: panel; } .contact__next { grid-area: next; } .contact__title { font-size: var(--step-4); font-weight: 380; letter-spacing: -0.028em; line-height: 1.02; } .contact__lead { margin-block-start: 1.25rem; max-inline-size: 32rem; color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; } .contact__email { margin-block-start: 0.75rem; max-inline-size: 32rem; color: var(--ink-2); line-height: 1.5; } .contact__next-title { font-size: var(--step-1); font-weight: 460; } .steps { display: grid; gap: 1rem; margin-block-start: 1.25rem; counter-reset: step; & li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; align-items: center; color: var(--ink-2); counter-increment: step; } & li::before { content: counter(step); display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border: 1.5px solid var(--line-strong); border-radius: 50%; color: var(--accent); font-family: var(--font-display); font-size: 1.125rem; } } /* The form. Errors show in text and in the border, never in colour alone. */ .form, .form-success { padding: clamp(1.5rem, 1rem + 2.2vw, 2.75rem); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow); } .form { display: grid; gap: 1.5rem; } .form__title { font-size: var(--step-2); } .field { display: grid; gap: 0.45rem; } .field__label { font-weight: 650; } .field__optional { color: var(--ink-2); font-weight: 400; } .field__hint { color: var(--ink-2); font-size: var(--step--1); } .field__error { color: var(--error); font-size: var(--step--1); font-weight: 650; &:empty { display: none; } } .field__input { inline-size: 100%; min-block-size: 3rem; padding: 0.7rem 0.95rem; border: 1.5px solid var(--field-border); border-radius: var(--radius-s); background: var(--field-bg); color: var(--ink); font-size: max(1rem, 16px); line-height: 1.4; transition: border-color 0.15s, box-shadow 0.15s; &:hover { border-color: var(--ink); } &:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink); } &:user-invalid { border-color: var(--error); } &[aria-invalid="true"] { border-color: var(--error); border-width: 2px; } } .field__input--area { min-block-size: 9.5rem; max-block-size: 32rem; resize: vertical; field-sizing: content; } .field:has([aria-invalid="true"]) { padding-inline-start: 0.9rem; border-inline-start: 3px solid var(--error); } .chips__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.2rem; } .chip { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 2.75rem; padding: 0.5rem 1rem; border: 1.5px solid var(--field-border); border-radius: 999px; background: var(--field-bg); font-size: 0.9375rem; cursor: pointer; user-select: none; transition: background-color 0.15s, border-color 0.15s, color 0.15s; &:hover { border-color: var(--ink); } &:has(:checked) { border-color: var(--brand); background: var(--brand); color: var(--on-brand); } &:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } } .chip__input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .chip__check { display: none; inline-size: 1rem; block-size: 1rem; stroke-width: 2.4; } .chip:has(:checked) .chip__check { display: block; } .hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Always in the page (a live region must exist before it speaks); empty, it gives back the gap it would add. */ .form__alert { color: var(--error); font-weight: 650; &:empty { margin-block-end: -1.5rem; } &:not(:empty) { padding: 0.9rem 1rem; border: 1.5px solid color-mix(in oklch, var(--error) 45%, transparent); border-radius: var(--radius-s); background: color-mix(in oklch, var(--error) 8%, var(--surface)); } } .form__submit { inline-size: 100%; } .form.is-busy .form__submit { cursor: progress; .icon { display: none; } &::after { content: ""; inline-size: 1.1rem; block-size: 1.1rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; } } .form__privacy, .form__noscript { color: var(--ink-2); font-size: var(--step--1); } .form__noscript { color: var(--ink); font-weight: 650; } .shield-toggle { display: inline-flex; align-items: center; gap: 0.45rem; min-block-size: 2.75rem; padding: 0.25rem 0.1rem; border: 0; background: none; color: var(--accent); font-size: var(--step--1); font-weight: 650; text-decoration: underline dotted; text-underline-offset: 0.25em; cursor: pointer; anchor-name: --shield; &:hover { color: var(--ink); } .icon { inline-size: 1.15rem; block-size: 1.15rem; } } .toggletip { max-inline-size: min(23rem, calc(100vw - 2rem)); padding: 1.15rem 1.25rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-size: var(--step--1); } .toggletip__title { font-weight: 650; } .toggletip__text { margin-block: 0.4rem 0.75rem; color: var(--ink-2); } /* Above its button where anchor positioning exists, starting at the button and shrinking to the space left before the screen's edge (or below it, if there's no room above); elsewhere it sits in the middle of the screen. */ @supports (position-anchor: --shield) { .toggletip { position-anchor: --shield; position-area: top span-right; position-try-fallbacks: flip-block; inset: auto; margin: 0 1rem 0.5rem 0; } } @supports selector(:popover-open) { .toggletip { opacity: 0; translate: 0 0.4rem; transition: opacity 0.18s, translate 0.18s var(--ease-out), overlay 0.18s allow-discrete, display 0.18s allow-discrete; &:popover-open { opacity: 1; translate: 0 0; } } @starting-style { .toggletip:popover-open { opacity: 0; translate: 0 0.4rem; } } } .form-success { display: grid; justify-items: start; gap: 1rem; &:focus:not(:focus-visible) { outline: none; } } .form-success__icon { inline-size: 3.25rem; block-size: 3.25rem; padding: 0.75rem; border-radius: 50%; background: color-mix(in oklch, var(--ok) 14%, transparent); color: var(--ok); stroke-width: 2.2; } .form-success__title { font-size: var(--step-2); } .form-success__text { color: var(--ink-2); } .form-success__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.5rem; } /* ── Privacy page ──────────────────────────────────────────── */ .prose { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(4rem, 3rem + 5vw, 7.5rem); & > * { max-inline-size: 44rem; } & h2 { margin-block: 2.5rem 0.75rem; font-size: var(--step-2); } & p + p, & p + ul { margin-block-start: 0.9rem; } & ul { display: grid; gap: 0.6rem; padding-inline-start: 1.25rem; } & li::marker { color: var(--accent); } } .prose__title { font-size: var(--step-4); font-weight: 380; letter-spacing: -0.028em; line-height: 1.02; } .prose__updated { margin-block: 1rem 1rem; color: var(--ink-2); } /* The switch "count my visits or not" (stats.js shows it; hidden without JavaScript, where nothing is counted). */ .stats-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-block-start: 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); } .stats-choice__status { flex: 1 1 16rem; font-weight: 600; } .stats-choice__noscript { margin-block-start: 1rem; color: var(--ink-2); } /* ── 404 ───────────────────────────────────────────────────── */ .not-found { display: grid; justify-items: start; gap: 1.1rem; padding-block: clamp(4rem, 3rem + 6vw, 9rem); } .not-found__mark { inline-size: 4.5rem; block-size: 4.5rem; } .not-found__title { font-family: var(--font-display); font-size: var(--step-4); font-weight: 380; line-height: 1.02; letter-spacing: -0.028em; } .not-found__title--small { font-size: var(--step-2); } /* The same words in the other languages: side by side where there's room. */ .not-found__others { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem 3rem; justify-self: stretch; max-inline-size: 48rem; margin-block-start: 2rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); color: var(--ink-2); } .not-found__other { display: grid; gap: 0.6rem; align-content: start; } } @layer utilities { .visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } } /* ── Motion: only for those who haven't asked for less ─────── */ @media (prefers-reduced-motion: no-preference) { /* Cross-document view transitions between pages (Chrome, Edge, Safari): the header stays put, the rest fades. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; } /* The needle swings and settles on north when the page opens. */ .rose__needle { animation: needle-settle 2.4s var(--ease-out) 0.25s both; animation-timing-function: var(--spring); } @keyframes needle-settle { from { rotate: 58deg; } to { rotate: 0deg; } } /* As you scroll, the dial turns and the needle keeps pointing north, as on a real compass. */ @supports (animation-timeline: scroll()) { .rose__dial { animation: dial-turn linear both; animation-timeline: scroll(root block); animation-range: 0 90vh; } @keyframes dial-turn { to { rotate: -40deg; } } } /* The language menu slides down a touch as it opens. */ @supports selector(:popover-open) { .lang-menu { opacity: 0; translate: 0 -0.3rem; transition: opacity 0.16s, translate 0.16s var(--ease-out), overlay 0.16s allow-discrete, display 0.16s allow-discrete; &:popover-open { opacity: 1; translate: 0 0; } } @starting-style { .lang-menu:popover-open { opacity: 0; translate: 0 -0.3rem; } } } /* The logo's needle gives a little swing on hover. */ .brand:hover .mark__needle { animation: needle-wiggle 0.9s var(--ease-out); } @keyframes needle-wiggle { 25% { rotate: 22deg; } 50% { rotate: -12deg; } 75% { rotate: 5deg; } } /* 404: the needle hunts for north twice, then gives up at an odd angle (under five seconds in all). */ .not-found__mark .mark__needle { animation: needle-lost 2.2s ease-in-out 2 both; } @keyframes needle-lost { 30% { rotate: 150deg; } 55% { rotate: 95deg; } 80% { rotate: 215deg; } to { rotate: 200deg; } } } @keyframes spin { to { rotate: 1turn; } } /* The language menu's second place (components: .lang-menu), centred under its button. */ @position-try --lang-centred { position-area: bottom; margin: 0.375rem 0 0; } @media (prefers-reduced-motion: reduce) { .form.is-busy .form__submit::after { animation-duration: 2.4s; } } @media (forced-colors: active) { .theme-toggle { display: none; } /* the system's colours win anyway: the switch would change nothing */ .client__logo { forced-color-adjust: none; background: CanvasText; } .chip:has(:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; } .mark__disc, .mark__pivot { fill: CanvasText; } .mark__north, .mark__south { fill: Canvas; } .mark__ticks { stroke: Canvas; } .button { border-color: ButtonText; } } @media print { :root { color-scheme: light; } /* paper is light, whatever the screen's theme: every light-dark() follows */ .site-header, .skip-link, .hero__art, .cta, .form__shield, .site-footer__nav { display: none !important; } body { background: #fff; color: #000; } * { animation: none !important; } }