/* ============================================================ Ferrari Metals — design tokens ============================================================ */ /* ---------- Fonts ---------- */ @font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; 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: "Montserrat"; src: url("/fonts/montserrat-var-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; 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: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; 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: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-var-ext.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; 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; } /* ---------- Metric-matched fallbacks ---------- font-display: swap paints in a system face first, then swaps. Inter is ~6% wider per character than Helvetica and Montserrat ~13.6%, so the swap used to reflow every line. These faces are the same system fonts stretched to the real metrics — measured in the browser, not guessed — so the swap changes the shapes and nothing else. Only the shipped pair is covered; the panel's Lato and Roboto are a tuning tool, not what visitors get. */ @font-face { font-family: "Inter Fallback"; src: local("Helvetica Neue"), local("Helvetica"), local("Arial"); size-adjust: 106.01%; ascent-override: 91.5%; descent-override: 22.64%; line-gap-override: 0%; } @font-face { font-family: "Montserrat Fallback"; src: local("Helvetica Neue"), local("Helvetica"), local("Arial"); size-adjust: 113.57%; ascent-override: 85.41%; descent-override: 22.01%; line-gap-override: 0%; } /* ---------- Body-font alternates, switchable from the design panel ---------- */ @font-face { font-family: "Roboto"; src: url("/fonts/roboto-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; 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: "Roboto"; src: url("/fonts/roboto-var-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; 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: "Lato"; src: url("/fonts/lato-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lato"; src: url("/fonts/lato-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Lato"; src: url("/fonts/lato-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; 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: "Inter"; src: url("/fonts/inter-var-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; 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; } :root { /* ---------- Typography ---------- */ --font-heading: Montserrat, "Montserrat Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: Inter, "Inter Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --tracking-mono: 0.33em; --tracking-eyebrow: 0.14em; --tracking-ui: 0.115em; --tracking-wide: 0.08em; --tracking-label: 0.05em; /* ---------- Surfaces / backgrounds ---------- */ --bg-base: #0a0a0b; --bg-alt: #171a21; --bg-surface: #101113; --bg-surface-2: #16171a; --bg-surface-3: #1b1d20; --bg-surface-hover: #26282c; --bg-surface-raised: #32353b; --bg-header: rgba(10, 10, 11, 0.88); --bg-overlay: rgba(10, 10, 11, 0.92); /* ---------- Lines / borders (used sparingly) ---------- */ --border-subtle: #1e2023; --border-default: #26282c; --border-strong: #3a3d42; --border-metal-inset: #4a4e55; /* ---------- Text ---------- */ --text-primary: #f2f3f5; --text-body: #e6e8eb; --text-secondary: #c8ccd2; --text-muted: #8a8f98; --text-faint: #7b8089; --text-on-accent: #ffffff; --text-nav: #b9bdc4; /* ---------- Accent (red) ---------- */ --accent: #cc3529; --accent-hover: #a81420; --accent-strong: #ff5140; --accent-deep: #b0121b; --accent-text: var(--accent-strong); /* ---------- Buttons ---------- */ --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-hover); --btn-primary-border-hover: var(--accent-strong); --btn-primary-text: var(--text-on-accent); --btn-secondary-bg: var(--bg-surface-3); --btn-secondary-bg-hover: var(--bg-surface-hover); --btn-secondary-text: var(--text-body); --btn-outline-border: #5f6673; --btn-outline-border-hover: color-mix(in srgb, var(--btn-outline-border) 75%, var(--text-primary)); --btn-outline-text: var(--text-body); --btn-outline-bg-hover: rgb(255 255 255 / 7%); /* ---------- Links ---------- */ --link: var(--text-body); --link-hover: var(--accent-strong); --link-muted: var(--text-muted); --link-muted-hover: var(--text-primary); /* ---------- Emphasis ---------- */ --eyebrow: var(--accent-text); --rule-accent: var(--accent); /* ---------- Metal effects ---------- */ /* Brushed silver, not chrome. Two things were doing the damage before: a one-percent step from #ffffff to #cdd2d9 at mid-height, which drew a hard stripe across every letter, and a range that started at #8f959e — dark enough that the top of each glyph read as an embossed shadow. The ramp is now narrow and the specular is a wide, soft rise. */ /* One dial. --metal-strength collapses every stop toward --metal-mid at 0 and spreads it to the values below at 1; the stops sit where the glyphs are, not at the edges of the line box, because the gradient is sized to the line height and its 0%/100% fall in the leading where nothing paints. */ --metal-strength: 0.85; --metal-mid: #c8cfd9; /* Tone is a second axis: 0.5 leaves the ramp alone, above it a white veil lightens, below it a dark one deepens. It is a layer over the gradient rather than a shift of the stops, so it works at any strength — mixed into the stops it would vanish as strength approached 1. */ --metal-tone: 0.54; --metal-veil: color-mix(in srgb, #ffffff calc(max(0, (var(--metal-tone) - 0.5)) * 150%), transparent); --metal-shade: color-mix(in srgb, #7c8494 calc(max(0, (0.5 - var(--metal-tone))) * 100%), transparent); /* The first and last stops are the same colour on purpose. The gradient is one line-height tall and tiled with repeat-y, so a descender drops out of its tile into the top of the next one; when the ends differ the seam shows as a bright band across the tail of a g or a y. */ /* Where the specular sits, as a share of the line box. The stops around it ride along, so moving the highlight does not reshape the ramp. */ --metal-peak: 32%; /* Brushed striation. Fine horizontal lines rather than turbulence: the noise texture this replaces turned to visible dirt the moment the tone darkened. */ --metal-grain-amt: 0.51; --metal-grain: repeating-linear-gradient(-30deg, color-mix(in srgb, #ffffff calc(var(--metal-grain-amt) * 60%), transparent) 0px, color-mix(in srgb, #ffffff calc(var(--metal-grain-amt) * 60%), transparent) 1px, transparent 1px, transparent 3px, color-mix(in srgb, #0d1116 calc(var(--metal-grain-amt) * 40%), transparent) 3px, color-mix(in srgb, #0d1116 calc(var(--metal-grain-amt) * 40%), transparent) 4px, transparent 4px, transparent 7px, color-mix(in srgb, #ffffff calc(var(--metal-grain-amt) * 60%), transparent) 7px, color-mix(in srgb, #ffffff calc(var(--metal-grain-amt) * 60%), transparent) 8px, transparent 8px, transparent 12px, color-mix(in srgb, #0d1116 calc(var(--metal-grain-amt) * 40%), transparent) 12px, color-mix(in srgb, #0d1116 calc(var(--metal-grain-amt) * 40%), transparent) 13px, transparent 13px, transparent 19px); --metal-heading: linear-gradient(180deg, color-mix(in srgb, #6e7887 calc(var(--metal-strength) * 100%), var(--metal-mid)) 0%, color-mix(in srgb, #aab3c0 calc(var(--metal-strength) * 100%), var(--metal-mid)) calc(var(--metal-peak) - 18%), color-mix(in srgb, #f6f8fb calc(var(--metal-strength) * 100%), var(--metal-mid)) var(--metal-peak), color-mix(in srgb, #d6dde7 calc(var(--metal-strength) * 100%), var(--metal-mid)) calc(var(--metal-peak) + 18%), color-mix(in srgb, #98a2b1 calc(var(--metal-strength) * 100%), var(--metal-mid)) calc(var(--metal-peak) + 36%), color-mix(in srgb, #737d8c calc(var(--metal-strength) * 100%), var(--metal-mid)) 88%, color-mix(in srgb, #6e7887 calc(var(--metal-strength) * 100%), var(--metal-mid)) 100%); --metal-heading-media: linear-gradient(180deg, color-mix(in srgb, #616b7a calc(var(--metal-strength) * 100%), var(--metal-mid)) 0%, color-mix(in srgb, #a3adbb calc(var(--metal-strength) * 100%), var(--metal-mid)) calc(var(--metal-peak) - 18%), color-mix(in srgb, #fafbfd calc(var(--metal-strength) * 100%), var(--metal-mid)) var(--metal-peak), color-mix(in srgb, #d2dae5 calc(var(--metal-strength) * 100%), var(--metal-mid)) calc(var(--metal-peak) + 18%), color-mix(in srgb, #8e99a9 calc(var(--metal-strength) * 100%), var(--metal-mid)) calc(var(--metal-peak) + 36%), color-mix(in srgb, #69737f calc(var(--metal-strength) * 100%), var(--metal-mid)) 88%, color-mix(in srgb, #616b7a calc(var(--metal-strength) * 100%), var(--metal-mid)) 100%); --icon-lit-indigo: linear-gradient(155deg, #8fd6ff 0%, #7f8cf5 48%, #b06cf5 100%); --icon-lit-sky: linear-gradient(155deg, #6fe3d8 0%, #45a8f5 48%, #7b7cff 100%); --icon-lit-violet: linear-gradient(155deg, #ff9be0 0%, #c25cff 48%, #8a5cf5 100%); --metal-badge: linear-gradient(160deg, #3a3d42, #141517 55%, #26282c); --metal-card: linear-gradient(160deg, #16171a, #0e0f10); --band-fade: linear-gradient(180deg, #0e0f10, #0a0a0b); --metal-sweep: linear-gradient(100deg, color-mix(in srgb, #ffffff 0%, transparent) 22%, color-mix(in srgb, #ffffff 10%, transparent) 34%, color-mix(in srgb, #ffffff 26%, transparent) 44%, color-mix(in srgb, #ffffff 42%, transparent) 50%, color-mix(in srgb, #ffffff 26%, transparent) 56%, color-mix(in srgb, #ffffff 10%, transparent) 66%, color-mix(in srgb, #ffffff 0%, transparent) 78%); --metal-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='g' x='-30%' y='-30%' width='160%' height='160%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002 5' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.175' intercept='-0.0875'/%3E%3CfeFuncG type='linear' slope='1.175' intercept='-0.0875'/%3E%3CfeFuncB type='linear' slope='1.175' intercept='-0.0875'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cg transform='rotate(-30 300 150)'%3E%3Crect x='-600' y='-300' width='1800' height='900' filter='url(%23g)'/%3E%3C/g%3E%3C/svg%3E"); --shadow-text-media: 0 1px 14px rgba(10, 10, 11, 0.9); /* ---------- Scrims over photography and video ---------- */ --scrim-hero: rgba(10, 10, 11, 0.56); --scrim-banner: rgba(10, 10, 11, 0.66); --scrim-banner-left: linear-gradient(90deg, rgba(10, 10, 11, 0.90) 0%, rgba(10, 10, 11, 0.62) 42%, rgba(10, 10, 11, 0.28) 100%); --scrim-band: linear-gradient(180deg, rgba(10, 10, 11, 0.94) 0%, rgba(10, 10, 11, 0.80) 45%, rgba(10, 10, 11, 0.94) 100%); --scrim-caption: linear-gradient(to top, rgba(10, 10, 11, 0.88), transparent); --scrim-plate: linear-gradient(to top, rgba(10, 10, 11, 0.96) 0, rgba(10, 10, 11, 0.92) 38%, rgba(10, 10, 11, 0.74) 56%, rgba(10, 10, 11, 0.44) 72%, rgba(10, 10, 11, 0.18) 86%, rgba(10, 10, 11, 0) 100%); --scrim-tile: linear-gradient(to top, rgb(24 26 29 / 95%) 0%, rgb(20 22 25 / 72%) 52%, rgb(37 41 48 / 0%) 100%); --glass-plate: linear-gradient(180deg, rgba(30, 35, 47, 0.64) 0%, rgba(20, 24, 32, 0.84) 40%, rgba(17, 20, 27, 0.91) 68%, rgba(19, 22, 29, 0.94) 100%); --glass-plate-edge: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 16%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0.08) 84%, rgba(255, 255, 255, 0) 100%); --glass-film: rgba(10, 12, 16, 0.60); --glass-film-hover: rgba(20, 24, 31, 0.70); --glass-plate-edge-b: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.04) 22%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.04) 78%, rgba(255, 255, 255, 0) 100%); --scrim-lightbox: rgba(6, 6, 7, 0.94); --overlay-control: rgba(10, 10, 11, 0.55); --overlay-control-hover: rgba(10, 10, 11, 0.82); --rail-accent: color-mix(in srgb, var(--accent) 42%, transparent); /* ---------- Elevation ---------- */ --shadow-header: 0 6px 24px rgba(0, 0, 0, 0.6); --shadow-cta: 0 12px 34px rgba(0, 0, 0, 0.55); --shadow-menu: 0 8px 20px rgba(0, 0, 0, 0.6); --shadow-lightbox: 0 20px 60px rgba(0, 0, 0, 0.75); /* ---------- Radii ---------- */ /* One dial. The scale is derived from it, so the whole site rounds in proportion instead of every rule carrying its own number. Shipped at 0. */ --radius-base: 0px; --radius-sm: calc(var(--radius-base) * 0.4); --radius-btn: calc(var(--radius-base) * 0.5); --radius-md: calc(var(--radius-base) * 0.55); --radius-lg: var(--radius-base); --radius-photo: var(--radius-base); --radius-xl: calc(var(--radius-base) * 1.6); --radius-pill: calc(var(--radius-base) * 40); --radius-step: 50%; /* ---------- Type tuning (design panel) ---------- Every default here reproduces the shipped design exactly: the scales are 1, the offsets are 0. The panel only ever nudges away from this. */ --lh-body: 1.6; --body-weight: 400; --body-tracking: 0em; --head-scale: 1; --head-weight: 900; --head-lh-scale: 1; --head-tracking: 0em; /* Descender room. background-clip: text paints a glyph only from the element's own background box, so a j or a y hanging below the last line box is simply not drawn. The titles carry this much extra box and give the same amount back out of their margin, so nothing moves. */ --title-descender: 0.17em; /* ---------- Steel band ---------- */ --bg-steel: #0a0c10; --text-on-steel-muted: #a3aab8; --border-on-steel: #39435a; --border-on-steel-strong: #7a8cb6; --card-on-steel: #2c3444; --card-on-steel-hover: #354052; --card-translucent: color-mix(in srgb, #505087 23%, transparent); --card-translucent-hover: color-mix(in srgb, #505087 34%, transparent); --accent-on-steel: #ff6a4a; /* ---------- Motion ---------- */ --t-fast: .18s; --t-base: .2s; --t-slow: .45s; --t-sweep: 1.4s; /* ---------- Layout metrics ---------- */ --measure-prose: 68ch; --container-max: 1280px; --container-pad: clamp(16px, 2.5vw, 32px); --section-pad: 104px; --header-height: 84px; --header-height-scrolled: 60px; --header-scroll-range: 180px; --blur-header: 14px; --blur-plate: 18px; --blur-film: 10px; --logo-height: 60px; --logo-height-scrolled: 42px; /* ---------- Selection & focus ---------- */ --selection-bg: var(--accent); --selection-text: var(--text-on-accent); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent); } /* ---------- Font switches (design panel) ---------- Temporary, set by the panel on ; a reload returns the shipped pair. Headings are set at 900 and every face here reaches it, so the weight holds. */ :root[data-font="lato"] { --font-body: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; } :root[data-font="roboto"] { --font-body: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; } :root[data-head-font="inter"] { --font-heading: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; } :root[data-head-font="lato"] { --font-heading: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; } :root[data-head-font="roboto"] { --font-heading: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; }