/* ========================================================================== ADA BIOTECH — Design tokens Colours sampled directly from assets/mockups/*.png, so the built site matches the reference rather than approximating it. ========================================================================== */ :root { /* --------------------------------------------------------------------- Brand greens — #223D13 is the dominant colour across every reference page (20–36% of pixels) and is the primary brand green. --------------------------------------------------------------------- */ --green-900: #16260c; --green-800: #1d3111; --green-700: #203912; --green-600: #223d13; /* PRIMARY */ --green-500: #2a441c; --green-400: #334c26; --green-300: #4a6039; --green-200: #718267; --green-100: #aab3a4; --green-050: #dde1dc; --olive-700: #3c4534; /* Petcare nav button, muted dark surfaces */ /* Neutrals */ --white: #ffffff; --cream: #fffcf0; /* oversized footer wordmark, warm accents */ --grey-050: #f6f6f6; /* default page background */ --grey-100: #f3f3f3; --grey-200: #eaeaea; --grey-300: #d4d4d4; --grey-400: #bebebe; /* nav pill */ --grey-500: #9a9a9a; --grey-600: #707070; --ink: #131111; /* body copy */ --ink-soft: #3f3d3d; /* --------------------------------------------------------------------- Semantic tokens — components reference these, never a raw hex. --------------------------------------------------------------------- */ --color-bg: var(--grey-050); --color-bg-alt: var(--white); --color-surface: var(--white); --color-surface-sunken: var(--grey-100); --color-surface-inverse: var(--green-600); --color-text: var(--ink); --color-text-muted: var(--ink-soft); --color-text-inverse: var(--white); --color-text-on-dark-muted: var(--green-050); --color-primary: var(--green-600); --color-primary-hover: var(--green-400); --color-primary-active: var(--green-800); --color-on-primary: var(--white); --color-accent: var(--cream); --color-border: var(--grey-300); --color-border-strong: var(--grey-400); --color-focus: #7cc242; /* 3:1+ against both cream and deep green */ --color-danger: #b3261e; --color-danger-bg: #fdecea; --color-success: #1e6b3a; --color-success-bg: #e7f4ec; /* --------------------------------------------------------------------- Typography NOTE: the reference mockups were set in a geometric sans with a single-storey 'a' (Poppins family). The supplied brand fonts in assets/fonts/ are DM Sans, Comfortaa and Fredoka. --font-display and --font-body are the single swap points if the Poppins files are added. --------------------------------------------------------------------- */ --font-display: "DM Sans", "Poppins", ui-sans-serif, system-ui, sans-serif; --font-body: "DM Sans", "Poppins", ui-sans-serif, system-ui, sans-serif; --font-brand: "Comfortaa", var(--font-display); --font-playful: "Fredoka", var(--font-display); /* Fluid type scale — min at 375px, max at 1440px */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-md: clamp(1.0625rem, 0.28vw + 1rem, 1.125rem); /* 17→18 */ --text-lg: clamp(1.125rem, 0.5vw + 1rem, 1.375rem); /* 18→22 */ --text-xl: clamp(1.375rem, 1vw + 1.1rem, 1.75rem); /* 22→28 */ --text-2xl: clamp(1.625rem, 1.7vw + 1.2rem, 2.25rem); /* 26→36 */ --text-3xl: clamp(2rem, 3vw + 1.3rem, 3rem); /* 32→48 */ --text-4xl: clamp(2.5rem, 5vw + 1.2rem, 4.5rem); /* 40→72 */ --text-5xl: clamp(3rem, 8vw + 1rem, 7rem); /* 48→112 */ --text-hero: clamp(3.25rem, 11vw, 10rem); /* oversized display */ --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --weight-black: 900; /* Comfortable measure: 60–75 characters on desktop */ --measure: 68ch; --measure-narrow: 46ch; /* --------------------------------------------------------------------- Spacing — 4px base rhythm --------------------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 6rem; --space-12: 8rem; /* Vertical rhythm between page sections */ --section-y: clamp(3.5rem, 7vw, 7rem); --section-y-tight: clamp(2.5rem, 4.5vw, 4rem); /* Layout */ --container: 75rem; /* 1200px */ --container-wide: 87.5rem; /* 1400px */ --container-narrow: 52rem; /* 832px */ --gutter: clamp(1.25rem, 4vw, 3rem); /* Radii — the reference leans heavily on pills and soft cards */ --radius-sm: 0.5rem; --radius-md: 0.875rem; --radius-lg: 1.25rem; --radius-xl: 1.75rem; --radius-2xl: 2.25rem; --radius-pill: 999px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(19, 17, 17, 0.06), 0 1px 3px rgba(19, 17, 17, 0.05); --shadow-md: 0 4px 10px rgba(19, 17, 17, 0.06), 0 2px 6px rgba(19, 17, 17, 0.04); --shadow-lg: 0 12px 28px rgba(19, 17, 17, 0.10), 0 4px 10px rgba(19, 17, 17, 0.05); --shadow-xl: 0 24px 56px rgba(19, 17, 17, 0.14), 0 8px 18px rgba(19, 17, 17, 0.06); /* --------------------------------------------------------------------- Motion Durations follow the brief: micro-interactions 150–250ms, section entrances 300–500ms, hero 500–700ms. Exits run at ~65% of their enter duration so dismissal feels responsive. --------------------------------------------------------------------- */ --duration-micro: 200ms; --duration-micro-in: 150ms; --duration-section: 420ms; --duration-hero: 620ms; --duration-exit: 140ms; /* Deceleration on arrival, acceleration on departure */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-soft: cubic-bezier(0.33, 1, 0.68, 1); /* Distance travelled by entrance animations */ --reveal-shift: 24px; --stagger-step: 70ms; /* Z-index scale */ --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-header: 100; --z-overlay: 500; --z-modal: 1000; } /* ========================================================================== Petcare sub-brand Applied via . Overrides the semantic tokens only, so every shared component adopts the pink/orange identity without any component-level branching. ========================================================================== */ .theme-petcare { /* The reference pinks are decorative weights: #ff99ae measures 1.97:1 and #ff6484 measures 2.83:1 against the cream page, so neither can carry text. They stay for fills and surfaces; two deeper roses are added for type. --pink-700 5.8:1 on cream — safe for body copy and controls --pink-650 3.7:1 on cream — large display headings only */ --pink-700: #b3325c; --pink-650: #e8447a; --pink-600: #ff6484; --pink-500: #ff99ae; --pink-400: #e680a1; --pink-300: #f3c6d0; /* #ff9900 and #ef8a00 measure 2.1:1 and 2.5:1 on the cream page, so neither can carry text. They stay for fills; --orange-700 is the text weight (3.8:1 — clears the 3:1 large-text floor while holding the same hue). */ --orange-700: #cc6600; --orange-600: #ef8a00; --orange-500: #ff9900; --orange-300: #feb95d; --petcare-bg: #fdfdf5; --color-bg: var(--petcare-bg); --color-bg-alt: var(--white); --color-surface: var(--white); --color-surface-sunken: #fff4f7; --color-surface-inverse: var(--pink-500); /* Deep plum-brown reads as "warm dark" against pink and clears 4.5:1 on both the cream page background and the pink surfaces. */ --color-text: #43242c; --color-text-muted: #6b4550; --color-text-inverse: #43242c; --color-primary: var(--pink-700); --color-primary-hover: #9c2a4f; --color-primary-active: #852343; --color-on-primary: var(--white); --color-accent: var(--orange-500); --color-border: var(--pink-300); --color-focus: #8c2350; --font-display: "Fredoka", "DM Sans", ui-sans-serif, system-ui, sans-serif; }