/* ========================================================================== Shayna Jack — Teal & Sand colour system SINGLE SOURCE OF TRUTH for every authored colour on this website. Five colours, six functional roles. Change a value here and it changes everywhere: palette.css and components.css are written entirely in terms of these tokens, and no authored rule hard-codes a colour. ========================================================================== */ :root { /* ---- the six approved colours ---- */ --sj-white: #FFFFFF; /* main page background; text on Deep teal (was Chalk until 19 Oct) */ --sj-seafoam: #E9F2EF; /* alternate sections, supporting surfaces, cards */ --sj-teal: #285B60; /* hero, authority, footer, links, icons */ --sj-sand: #DFD1B8; /* primary CTA and selective accents */ --sj-ink: #303B3C; /* headings and body text on light backgrounds */ --sj-blush: #F3E7E3; /* testimonials (from 20 Oct) */ /* ---- semantic roles (all resolve to the six above) ---- */ --sj-bg-page: var(--sj-white); --sj-bg-surface: var(--sj-seafoam); /* cards and supporting surfaces */ --sj-bg-authority: var(--sj-teal); /* hero, authority bands, footer */ --sj-bg-cta: var(--sj-sand); /* primary action */ --sj-bg-testimonial: var(--sj-blush); /* testimonial cards */ --sj-text-body: var(--sj-ink); /* on chalk / seafoam / sand */ --sj-text-heading: var(--sj-ink); --sj-text-on-teal: var(--sj-white); --sj-text-link: var(--sj-teal); --sj-text-on-cta: var(--sj-ink); --sj-line: var(--sj-seafoam); /* functional dividers on light */ --sj-line-on-teal: var(--sj-teal); /* keeps layout, no decoration */ --sj-control-border: var(--sj-teal); /* inputs, buttons, focus */ /* ---- one rounded-corner system ---- */ --sj-radius: 16px; /* buttons, cards, form fields, image containers */ --sj-radius-pill: 999px; /* pills, dots, avatars */ /* ---- control boundaries ---- */ --sj-border-width: 2px; --sj-focus-width: 3px; --sj-focus-offset: 3px; --sj-control-min-height: 48px; /* ---- type families: two, both self-hosted ---- */ --sj-font-heading: 'Outfit', Arial, sans-serif; /* headings, wordmark */ --sj-font-body: 'DM Sans', Arial, sans-serif; /* everything else */ /* ---- type scale (16 October brief; sizes from the 21 October design consistency brief) ---- Sizes in rem with the root left at 100%. Fluid sizes run from the mobile value at a 390px viewport to the desktop maximum at 1440px: clamp(mobile, rem + vw, desktop). Below 390px they hold the mobile value. */ --sj-h1-hero: clamp(2.25rem, 1.8786rem + 1.5238vw, 3.25rem); /* 36 -> 52 banner H1 */ --sj-h1: clamp(2.125rem, 1.8rem + 1.3333vw, 3rem); /* 34 -> 48 standard H1 */ --sj-h2: clamp(1.75rem, 1.5643rem + .7619vw, 2.25rem); /* 28 -> 36 */ --sj-h3: clamp(1.375rem, 1.2821rem + .381vw, 1.625rem); /* 22 -> 26 */ --sj-h4: clamp(1.1875rem, 1.1411rem + .1905vw, 1.3125rem);/* 19 -> 21 */ --sj-h5: clamp(1.0625rem, 1.0393rem + .0952vw, 1.125rem); /* 17 -> 18 */ --sj-h6: 1rem; /* 16 */ --sj-sub: clamp(1.0625rem, 1.0393rem + .0952vw, 1.125rem); /* 17 -> 18 band line */ --sj-intro: clamp(1rem, .9536rem + .1905vw, 1.125rem); /* 16 -> 18 introductory text, banner standfirst */ --sj-body: 1rem; /* 16 body copy */ --sj-testimonial: clamp(1.125rem, 1.0321rem + .381vw, 1.375rem); /* 18 -> 22 testimonials */ --sj-quote: clamp(1.0625rem, 1.0393rem + .0952vw, 1.125rem); /* 17 -> 18 names set in a row */ --sj-secondary: clamp(.875rem, .8518rem + .0952vw, .9375rem); /* 14 -> 15 supporting lines */ --sj-caption: .875rem; /* 14 captions, small print */ --sj-label: .75rem; /* 12 eyebrows, short labels */ --sj-nav: .875rem; /* 14 desktop navigation */ --sj-nav-menu: 1rem; /* 16 mobile menu: kept larger for touch */ --sj-button: .9375rem; /* 15 buttons and action links */ --sj-ui: 1rem; /* 16 form inputs (no zoom on phones) */ --sj-figure: clamp(1.75rem, 1.6571rem + .381vw, 2rem); /* 28 -> 32 timeline years */ --sj-mark: clamp(1.25rem, 1.0643rem + .7619vw, 1.75rem); /* 20 -> 28 text wordmark */ --sj-footer-head: 1rem; /* 16 footer column headings */ --sj-lh-h1: 1.15; --sj-lh-h2: 1.2; --sj-lh-h3: 1.3; --sj-lh-sub: 1.4; --sj-lh-body: 1.6; --sj-lh-caption: 1.5; --sj-lh-label: 1.4; --sj-lh-ui: 1.3; --sj-lh-figure: 1.2; --sj-lh-mark: 1.1; --sj-track-head: -0.02em; /* H1, H2 */ --sj-track-h3: -0.01em; --sj-track-label: 0.08em; /* uppercase eyebrows */ --sj-track-nav: 0.04em; /* uppercase navigation */ --sj-track-mark: 0.12em; /* wordmark */ /* ---- layout and spacing scale ---- */ --sj-content-max: 1200px; --sj-gutter: 32px; --sj-gutter-mobile: 20px; --sj-panel-inset: 12px; /* a seafoam panel keeps at least this clear of the screen edge */ --sj-space-1: 8px; --sj-space-2: 16px; --sj-space-3: 24px; --sj-space-4: 32px; --sj-space-6: 48px; --sj-space-8: 64px; --sj-space-10: 80px; --sj-space-12: 96px; /* ---- vertical rhythm (21 October design consistency brief; section padding from the 22 October spacing brief, which tightens only the boundaries between sections) ---- Desktop and tablet values here; phones (below 768px) take the second set further down. Equivalent elements use the same token. */ --sj-section-y: 48px; /* standard section padding, top and bottom */ --sj-section-y-compact: 32px; /* a section holding only a quote */ --sj-hero-y: 96px; /* banner copy padding */ --sj-cta-y: 72px; /* below the closing call to action, above the footer */ --sj-gap-label: 12px; /* eyebrow to its heading */ --sj-gap-heading: 20px; /* heading to its description */ --sj-gap-para: 20px; /* paragraph to paragraph, text to action */ --sj-gap-content: 40px; /* section heading block to its content */ --sj-card-pad: 28px; /* card internal padding */ --sj-card-gap: 16px; /* label, title, text and action in a card */ --sj-grid-gap: 24px; /* gap between cards in a grid */ /* Long-form paragraphs: about 60-70 characters a line, 65 on average. The brief's 60-65ch assumes letters as wide as a zero (the ch unit); DM Sans letters average about 0.72ch, so 47ch is what sets ~65. */ --sj-measure: 47ch; } @media (max-width: 767px) { :root { --sj-section-y: 32px; --sj-section-y-compact: 24px; --sj-hero-y: 56px; --sj-cta-y: 48px; --sj-gap-heading: 16px; --sj-gap-para: 16px; --sj-gap-content: 28px; --sj-card-pad: 20px; --sj-grid-gap: 16px; } } /* From 1024px the banner copy sits beside the photograph in a narrower column, so the banner heading scales with the screen to reach 52px at 1440 rather than arriving early and breaking its designed lines. */ @media (min-width: 1024px) { :root { --sj-h1-hero: clamp(2.25rem, 3.6111vw, 3.25rem); } } /* -------------------------------------------------------------------------- styles.css is a pre-compiled Tailwind build that ships its own design tokens from the superseded navy/gold palette. Anything inheriting them — notably the default border colour applied by the framework's base layer — would otherwise reintroduce an old colour. This file loads after it, so redefining them here brings the whole framework onto the approved palette. -------------------------------------------------------------------------- */ :root { --background: var(--sj-white); --foreground: var(--sj-ink); --card: var(--sj-seafoam); --card-foreground: var(--sj-ink); --popover: var(--sj-white); --popover-foreground: var(--sj-ink); --primary: var(--sj-teal); --primary-foreground: var(--sj-white); --secondary: var(--sj-seafoam); --secondary-foreground: var(--sj-ink); --muted: var(--sj-seafoam); --muted-foreground: var(--sj-ink); --accent: var(--sj-sand); --accent-foreground: var(--sj-ink); --destructive: var(--sj-teal); --destructive-foreground:var(--sj-white); --border: var(--sj-seafoam); --input: var(--sj-teal); --ring: var(--sj-teal); --color-border: var(--sj-seafoam); --radius: var(--sj-radius); }