/* ---------- Fonts ---------- */ /* New Spirit is licensed through Adobe Fonts and must be served from their CDN — see the to use.typekit.net in each page's . Headings want weight 600 (SemiBold); until that weight is added to the Adobe web project the browser falls back to 700. */ /* Lato — latin-ext */ @font-face { font-family: "Lato"; src: url("/assets/fonts/lato-300-latinext.woff2") format("woff2"); font-weight: 300; 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("/assets/fonts/lato-400-latinext.woff2") format("woff2"); font-weight: 400; 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("/assets/fonts/lato-700-latinext.woff2") format("woff2"); font-weight: 700; 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("/assets/fonts/lato-900-latinext.woff2") format("woff2"); font-weight: 900; 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; } /* Lato — latin */ @font-face { font-family: "Lato"; src: url("/assets/fonts/lato-300-latin.woff2") format("woff2"); font-weight: 300; 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: "Lato"; src: url("/assets/fonts/lato-400-latin.woff2") format("woff2"); font-weight: 400; 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: "Lato"; src: url("/assets/fonts/lato-700-latin.woff2") format("woff2"); font-weight: 700; 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: "Lato"; src: url("/assets/fonts/lato-900-latin.woff2") format("woff2"); font-weight: 900; 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; } /* ---------- Tokens ---------- */ :root { --cream: #fbf3e1; --ink: #000; /* Label on the cream button. Stays brown on every location, including the green one — it is not derived from --bg. */ --ink-on-cream: #403634; --card-fill: rgba(251, 243, 225, 0.07); --card-line: rgba(251, 243, 225, 0.16); --content-width: 300px; --wide-width: 310px; } /* Per-location background. Set the matching class on , and keep the page's in sync with it. */ .loc-santasofia { --bg: #403634; } .loc-monza241 { --bg: #265542; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--cream); font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } /* ---------- Layout ---------- */ .page { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 62px 20px calc(90px + env(safe-area-inset-bottom)); } /* Only the negative page still carries a review card, so it is the only one that needs the tighter rhythm. */ .page--negative { padding: 56px 20px calc(44px + env(safe-area-inset-bottom)); } .logo { width: var(--content-width); height: auto; flex: none; } /* Optically balanced block: centred in the space under the logo, biased upward by the container's larger bottom padding. */ .content { width: 100%; max-width: var(--wide-width); margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; } /* ---------- Type ---------- */ .title { margin: 0; max-width: var(--content-width); font-family: "new-spirit", Georgia, "Times New Roman", serif; font-weight: 600; font-size: 33px; line-height: 1; letter-spacing: 0; } .eyebrow { margin: 34px 0 0; max-width: var(--content-width); font-size: 14px; font-weight: 900; line-height: 1.2; text-transform: uppercase; } .body { margin: 9px 0 0; max-width: var(--content-width); font-size: 14px; font-weight: 400; line-height: 1.2; } .title + .body { margin-top: 14px; } /* ---------- Primary button ---------- */ .btn { margin-top: 32px; width: 100%; min-height: 85px; display: flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 8px; background: var(--cream); color: var(--ink-on-cream); font-size: 18px; font-weight: 900; line-height: 1.2; text-transform: uppercase; text-decoration: none; transition: transform 0.15s ease, opacity 0.15s ease; } .page--negative .btn { margin-top: 26px; } .btn:active { transform: scale(0.975); opacity: 0.9; } .btn-mark { margin-top: 10px; width: 73px; height: auto; } /* ---------- Choice pair (landing) ---------- */ .choices { margin-top: 61px; width: 100%; display: flex; justify-content: center; gap: 65px; } .choice { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: inherit; transition: transform 0.15s ease; } .choice:active { transform: scale(0.95); } .choice-circle { position: relative; width: 122px; height: 122px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; } .choice-circle::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--ink); border-radius: 50%; } .choice-circle img { width: 68px; height: 68px; } .choice-label { font-size: 18px; font-weight: 700; line-height: 1.2; text-transform: uppercase; } /* ---------- Footer note ---------- */ .note { margin: 18px 0 0; font-size: 10px; font-weight: 300; line-height: 1.7; letter-spacing: 0.3px; opacity: 0.45; } .note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* ---------- Review card (negative page only) ---------- */ .rc { margin-top: 24px; width: 100%; padding: 15px 16px 13px; border: 1px solid var(--card-line); border-radius: 12px; background: var(--card-fill); display: flex; flex-direction: column; gap: 11px; text-align: left; } .rc-label { margin: 0; font-size: 10px; font-weight: 900; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.5; } .rc-body { display: flex; flex-direction: column; gap: 11px; } .rc-head { display: flex; align-items: center; gap: 10px; } .rc-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(251, 243, 225, 0.16); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: 0.2px; } .rc-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rc-name { font-size: 12px; font-weight: 700; line-height: 1.1; } .rc-stars { font: 400 11px/1 system-ui, sans-serif; letter-spacing: 1.2px; } /* Clamped so a long review cannot push the page past one viewport. */ .rc-quote { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.45; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rc-mark { margin-left: auto; width: 38px; height: auto; opacity: 0.6; } /* ---------- Small screens ---------- */ @media (max-height: 700px) { .page { padding-top: 40px; padding-bottom: 40px; } .choices { margin-top: 40px; } .rc { margin-top: 18px; } .rc-label { display: none; } } /* Below this the card cannot fit without the page scrolling, and the funnel choice matters more than the social proof. */ @media (max-height: 620px) { .rc { display: none; } } @media (max-width: 359px) { .choices { gap: 40px; } .choice-circle { width: 108px; height: 108px; } .choice-circle img { width: 60px; height: 60px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }