/* * VELOURS — Organic design tokens. * --------------------------------------------------------------------------- * The single source of values for the redesign: every colour, font, radius and * shadow a section uses comes from here as a var(), never as a literal. * Copied from design_handoff_velours_redesign/design_system/styles.css — retune * a value here and the page follows. * * Linked from before the section stylesheets, so a section can override * it and mobile.css still wins the last word. * * On purpose this file declares no element selectors: while the redesign is * landing section by section, the sections still on the old dark Tilda styles * must be left exactly as they were. Everything below is either a custom * property or a class a section opts into. */ /* ------------------------------------------------------------- typefaces -- */ /* Self-hosted, like every other face on the site: no request leaves the page to load them. Caprasimo is static, Figtree is one variable file for 400–700. */ /* latin-ext */ @font-face { font-family: 'Caprasimo'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/esDT31JQOPuXIUGBp72UnJ8DOJKuGPLB-f1bd51.woff2") format('woff2'); 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; } /* latin */ @font-face { font-family: 'Caprasimo'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/esDT31JQOPuXIUGBp72Ukp8DOJKuGA-27f96c.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; } /* latin-ext */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/_Xms-HUzqDCFdgfMm4q9DaRvziissg-00c371.woff2") format('woff2'); 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; } /* latin */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/_Xms-HUzqDCFdgfMm4S9DaRvzig-eddba2.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; } /* ---------------------------------------------------------------- tokens -- */ :root { --color-bg: #f5ead8; --color-surface: #ebddc5; --color-text: #201e1d; --color-accent: #c67139; --color-accent-2: #7a8a5e; --color-divider: color-mix(in srgb, #201e1d 16%, transparent); /* Tonal ramps — one shared lightness scale, so the same step of any role matches the others in visual value. 100–300 tint a fill or a border, 500 is the role itself, 700–900 is text on a tinted fill and pressed. */ --color-neutral-100: #f9f4ed; --color-neutral-200: #eee7db; --color-neutral-300: #dcd3c4; --color-neutral-400: #c0b6a5; --color-neutral-500: #a19786; --color-neutral-600: #82796a; --color-neutral-700: #645c50; --color-neutral-800: #474238; --color-neutral-900: #2e2b25; --color-accent-100: #fff2eb; --color-accent-200: #ffe1d0; --color-accent-300: #ffc6a5; --color-accent-400: #f6a06b; --color-accent-500: #d67f48; --color-accent-600: #b2622d; --color-accent-700: #8c491a; --color-accent-800: #643312; --color-accent-900: #402310; --color-accent-2-100: #f0fae1; --color-accent-2-200: #e1eecc; --color-accent-2-300: #ccdbb2; --color-accent-2-400: #aebf92; --color-accent-2-500: #8fa073; --color-accent-2-600: #728157; --color-accent-2-700: #56633f; --color-accent-2-800: #3d472b; --color-accent-2-900: #272e1b; /* Caprasimo is the only display voice, and it is never set in capitals. */ --font-heading: "Caprasimo", Georgia, serif; --font-heading-weight: 400; --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --space-1: 4.4px; --space-2: 8.8px; --space-3: 13.2px; --space-4: 17.6px; --space-6: 26.4px; --space-8: 35.2px; /* Nothing on the page has a sharp corner: controls go to 999px, panels to one of these three. */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent); /* The page column every redesigned section lines up on. */ --vp-page: min(1240px, calc(100% - 48px)); } /* ------------------------------------------------------------- utilities -- */ /* Every content photograph goes through this. The rooms were shot dark and contrasty; without it the frame sits *on* the cream page instead of in it. */ .washed { filter: saturate(.6) contrast(.85) brightness(1.1) opacity(.94); } /* Keyboard focus, everywhere inside the page. Scoped to #allrecords rather than left global so the rule outranks Tilda's own :where(.t-records) one, which paints a blue ring the design system does not have. */ #allrecords :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } #allrecords ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } /* The two labels that recur above a heading and above a control. */ .vp-eyebrow { margin: 0 0 16px; color: var(--color-accent-700); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .vp-label { margin: 0 0 10px; color: color-mix(in srgb, var(--color-text) 58%, transparent); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } /* --------------------------------------------------------------- controls -- */ /* Buttons, chips and steppers are the same three shapes everywhere on the site, so they live here rather than in six section files. Each use sets its own padding and size; the shape, the colour and the states come from here. Caprasimo is the label voice — it is what the design system sets a button in. */ .vp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 999px; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; } .vp-btn--primary { background: var(--color-accent); color: var(--color-bg); } .vp-btn--primary:hover { background: var(--color-accent-600); color: var(--color-bg); } .vp-btn--primary:active { background: var(--color-accent-700); color: var(--color-bg); } .vp-btn--secondary { border-color: var(--color-divider); color: var(--color-text); } .vp-btn--secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); } .vp-btn--secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } .vp-btn:disabled, .vp-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } /* `white-space: nowrap` is not decoration: without it "À deux" breaks over two lines and the row of chips loses its baseline. */ .vp-chip { min-height: 46px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-divider); border-radius: 999px; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; } .vp-chip:hover { border-color: var(--color-accent-400); } .vp-chip.is-active { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-bg); } .vp-stepper { height: 46px; display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--color-divider); border-radius: 999px; background: var(--color-bg); } .vp-stepper button { width: 48px; height: 100%; flex: none; padding: 0; border: 0; background: transparent; color: var(--color-text); font-family: var(--font-body); font-size: 20px; font-weight: 700; cursor: pointer; } .vp-stepper button:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .vp-stepper button:disabled { opacity: .35; cursor: not-allowed; background: transparent; } .vp-stepper .vp-stepper__value { min-width: 52px; text-align: center; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; }