/* ========================================================================== Adovvy V4 — design tokens Warm, light and editorial. One restrained ground and one accent, which is the pattern every competitor we looked at shares (Fin, Unitepulse, Ada, Kore, Gorgias): the product and the proof carry the colour, the page does not. Indigo is the brand; green appears only where something is live, connected or done, and nowhere else. Every text colour below was contrast-checked on every ground it sits on. The weakest pairing is muted on sand at 4.99:1. ========================================================================== */ @font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/jakarta-latin.woff2') format('woff2'); font-weight: 200 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: 'Plus Jakarta Sans'; src: url('../fonts/jakarta-latin-ext.woff2') format('woff2'); font-weight: 200 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; } :root { /* --- Grounds ------------------------------------------------------- */ --white: #FFFFFF; /* the page */ --sand: #F6F7F9; /* the lightest grey-white: alternate sections */ --paper: #F5F6F8; /* wells and inner surfaces inside white cards */ --sand-2: #ECEEF2; /* deeper wells, placeholder gradients */ --card: #FFFFFF; --deep: #15142B; /* the two dark bands: case study, final ask */ --deep-2: #1E1C3B; --deep-3: #28264C; --night: #0B0B17; /* the footer: darker than the deep bands above it */ /* --- Ink ------------------------------------------------------------ */ --ink: #17172B; /* 17.2:1 on white */ --ink-2: #3E3F4D; --body: #555665; /* 7.3:1 on white, 6.8:1 on grey */ --muted: #6B6B78; /* 5.3:1 on white, 4.9:1 on grey */ --on-deep: #FFFFFF; --on-deep-2: #B9B7BF; /* 9.1:1 on deep */ --on-deep-3: #9794A3; /* 6.1:1 */ /* --- Lines ---------------------------------------------------------- */ --line: rgba(23, 23, 43, .08); --line-2: rgba(23, 23, 43, .12); --line-strong: rgba(23, 23, 43, .2); --line-deep: rgba(255, 255, 255, .12); /* --- Brand ---------------------------------------------------------- */ --accent: #4857C2; /* 5.8:1 on paper; white on it 6.1:1 */ --accent-ink: #3A47A8; --accent-lift: #8E9BFF; /* accent that reads on deep, 7.1:1 */ --accent-tint: #EEF0FB; --accent-soft: #C9CEF0; --green: #4DE581; /* the signal: live, connected, done */ --green-ink: #167947; --green-tint: #E3F7EA; --green-glow: rgba(77, 229, 129, .38); /* Aliases so the components carried over from V3 keep working. */ --surface: var(--card); --surface-alt: var(--sand); --surface-lift: #FAFBFC; --surface-quiet: var(--paper); --border: var(--line-2); --border-soft: var(--line); --border-quiet: var(--line); --border-strong: var(--line-strong); --border-interactive: var(--accent-soft); --accent-soft-2: var(--accent-tint); --deep-node: var(--accent-lift); --on-deep-4: var(--on-deep-3); --e-accent-lg: 0 18px 40px -18px rgba(72, 87, 194, .55); /* --- Hues for tiles and ticks (white text clears 4.5:1 on each) ------ */ --c-indigo: #4857C2; --t-indigo: #EEF0FB; --i-indigo: #3A47A8; --c-violet: #6A46C8; --t-violet: #F1ECFB; --i-violet: #57369F; --c-blue: #2F6BD4; --t-blue: #EAF1FC; --i-blue: #245AB4; --c-teal: #10827C; --t-teal: #E4F4F3; --i-teal: #0C6D68; --c-green: #1B864F; --t-green: #E6F5EC; --i-green: #167947; --c-sky: #0B6E99; --t-sky: #E6F3F9; --i-sky: #095E83; --c-plum: #6D3560; --t-plum: #F6ECF4; --i-plum: #57294D; --c-navy: #2B3566; --t-navy: #ECEEF5; --i-navy: #2B3566; --c-coral: #C4314B; --t-coral: #FDECEF; --i-coral: #A8263D; /* --- Type ------------------------------------------------------------ One family. Headlines sit at 600 with the letters drawn together, which is what makes big sans type read as designed rather than just large; emphasis is colour, never italic (the family has no italic cut, and a synthesised one looks broken). */ --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --display: var(--font); --w-display: 600; --ls-display: -.035em; --fs-hero: clamp(36px, 5vw, 76px); --fs-h2: clamp(32px, 3.9vw, 56px); --fs-h3: clamp(19px, 1.55vw, 23px); --fs-lede: clamp(16px, 1.25vw, 18px); --fs-p: var(--fs-lede); /* every body paragraph on the homepage */ --fs-body: 16px; --fs-small: 14px; --fs-kicker: 12px; /* --- Space and shape ------------------------------------------------ */ --shell: 1280px; --gutter: clamp(20px, 5vw, 64px); --section: clamp(88px, 12vh, 160px); --header-h: 72px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-2xl: 32px; --r-pill: 999px; --e-1: 0 1px 2px rgba(23, 23, 43, .05); --e-2: 0 10px 28px -14px rgba(23, 23, 43, .18); --e-3: 0 24px 56px -28px rgba(23, 23, 43, .26); --e-4: 0 40px 90px -40px rgba(23, 23, 43, .32); /* --- Cards (20 Oct) --------------------------------------------------- One card system on every page: white #fff + --card-shadow (the AI Workforce cards), on sand or on white; one shadow everywhere grey var(--sand), flat, where a set was designed grey on white colour pastel tint (--t-*), flat, only where each card is its own category or option Product screens (chats, dashboards, phones) are not cards. */ --card-r: 28px; --card-shadow: 0 1px 2px rgba(23, 23, 43, .05), 0 30px 60px -44px rgba(23, 23, 43, .4); --card-shadow-hover: 0 1px 2px rgba(23, 23, 43, .05), 0 36px 64px -40px rgba(23, 23, 43, .48); /* --- Motion ---------------------------------------------------------- */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-soft: cubic-bezier(.34, 1.4, .64, 1); --t-fast: .2s; --t-med: .42s; --t-slow: .9s; } @media (max-width: 900px) { :root { --header-h: 64px; } }