/* Mike Peacock nautical concept. Shared WordPress token names retained. Palette, type and spacing are adjusted below; structural variants live in identity-overrides.css. Compatibility aliases support the existing theme. */ :root { /* --------------------------------------------------------------------- LAYER 1 - RAW PALETTE (the identity) --------------------------------------------------------------------- */ /* Navy. Carries action and emphasis: buttons, links, headings, footer. */ --color-navy: #122a3c; --color-navy-deep: #0c1e2c; --color-navy-mid: #2c5a7a; --color-navy-soft: #5b89a8; --color-navy-tint: #dce7ef; /* Sage. Carries decoration and tinted surfaces: rules, chart marks. */ --color-sage: #90b0a8; --color-sage-deep: #6a958a; --color-sage-soft: #b3cac4; --color-sage-tint: #dfeae6; /* Surfaces, light to tinted. */ --color-paper: #f3f7f6; --color-paper-deep: #e9f1ef; --color-mist: #dde9e5; --color-mist-deep: #cbdcd6; --color-card: #ffffff; --color-card-cool: #fafcfb; --color-surround: #e4edea; --color-footer-bg: #122a3c; /* Text. */ --color-ink: #14232e; --color-ink-soft: #3e505b; --color-ink-muted: #6a7881; /* --------------------------------------------------------------------- LAYER 2 - ACCENT ROLES The blueprint's single "gold" family was doing three distinct jobs. Naming them makes the split explicit and lets a two-colour palette satisfy all three without either colour being asked to do the wrong one. --------------------------------------------------------------------- */ --color-accent-strong: var(--color-navy); /* buttons, links, eyebrows */ --color-accent: var(--color-navy-mid); /* focus rings, hover borders */ --color-decor: var(--color-sage); /* strokes and chart marks */ --color-decor-soft: var(--color-sage-soft); /* faint decorative fills */ --color-decor-tint: var(--color-sage-tint); /* pale surface washes */ /* --------------------------------------------------------------------- LAYER 3 - SEMANTIC ROLES (names unchanged from the blueprint) --------------------------------------------------------------------- */ --color-primary-100: var(--color-navy-tint); --color-primary-500: var(--color-accent-strong); --color-primary-700: var(--color-navy-deep); --color-neutral-0: #ffffff; --color-neutral-50: var(--color-card-cool); --color-neutral-100: var(--color-paper-deep); --color-neutral-200: var(--color-mist-deep); --color-neutral-500: var(--color-ink-muted); --color-neutral-800: var(--color-ink-soft); --color-neutral-900: var(--color-ink); --color-text: var(--color-ink-soft); --color-text-muted: var(--color-ink-muted); --color-heading: var(--color-ink); --color-surface: var(--color-card); --color-surface-alt: var(--color-paper-deep); --color-surface-warm: var(--color-card-cool); --color-surface-accent-soft: var(--color-decor-tint); --color-surface-accent-hover: var(--color-mist); --color-border: color-mix(in srgb, var(--color-decor) 48%, transparent); --color-link: var(--color-accent-strong); --color-link-hover: var(--color-accent); --color-selection-bg: var(--color-accent); --color-selection-bg-link: var(--color-accent-strong); --color-selection-text: #ffffff; --color-error: #9d2f2f; --site-bg-outer: var(--color-navy-deep); --site-bg-inner: var(--color-paper); --site-shell-shadow: 0 0 60px -10px color-mix(in srgb, var(--color-navy) 16%, transparent); /* --------------------------------------------------------------------- LAYER 4 - COMPATIBILITY ALIASES The copied component CSS still references the blueprint's warm-palette names in ~200 places. These aliases re-point those names at this identity so no component file needs editing. They are a migration shim, not a second palette: author new rules against LAYER 2 and 3. --------------------------------------------------------------------- */ --color-gold: var(--color-accent); --color-gold-deep: var(--color-accent-strong); --color-gold-soft: var(--color-decor); --color-gold-tint: var(--color-decor-tint); --color-cream: var(--color-paper); --color-cream-deep: var(--color-paper-deep); --color-blush: var(--color-mist); --color-blush-deep: var(--color-mist-deep); --color-card-warm: var(--color-card-cool); --color-footer: var(--color-footer-bg); /* --------------------------------------------------------------------- LAYOUT - unchanged from the blueprint --------------------------------------------------------------------- */ /* Lets height transitions run to and from intrinsic sizes. */ interpolate-size: allow-keywords; --site-max-width: 120rem; --container-width: 73.75rem; --content-width-reading: 48rem; --content-width-s: 34rem; --content-width-m: 42rem; --content-width-l: 58rem; --header-container-width: 77rem; --footer-container-width: var(--container-width); --viewport-min: 360; --viewport-max: 1200; --section-padding-x: clamp(1.25rem, 4vw, 2.5rem); --section-padding-y: clamp(4rem, 8vw, 7.5rem); --header-height: 5.25rem; --admin-bar-offset: 0px; /* --------------------------------------------------------------------- TYPOGRAPHY PROVISIONAL PAIRING. These are the sibling site's faces, present only so the mockup has correct metrics. Mike Peacock's site must not ship them: the two sites share the component system and deliberately do not share a typographic voice. Replace both families and the matching @font-face blocks in base/fonts.css once the specification names the pairing. --------------------------------------------------------------------- */ --font-family-body: "DM Sans", system-ui, sans-serif; --font-family-heading: "EB Garamond", Georgia, serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-heading: var(--font-weight-regular); --text-2xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem); --text-xs: clamp(0.875rem, 0.84rem + 0.16vw, 1rem); --text-s: clamp(0.95rem, 0.91rem + 0.17vw, 1.0625rem); --text-m: clamp(1rem, 0.94rem + 0.25vw, 1.125rem); --text-l: clamp(1.125rem, 1.03rem + 0.4vw, 1.25rem); --text-xl: clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem); --heading-1: clamp(2.25rem, 1.7rem + 2.3vw, 3.75rem); --heading-2: clamp(1.7rem, 1.45rem + 1.1vw, 2.4rem); --heading-3: clamp(1.35rem, 1.15rem + 0.75vw, 1.7rem); --heading-4: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); --heading-5: 1.125rem; --heading-6: 1rem; --line-height-body: 1.72; --line-height-body-tight: 1.5; --line-height-heading: 1.25; --line-height-heading-tight: 1.12; /* --------------------------------------------------------------------- SPACING - unchanged from the blueprint --------------------------------------------------------------------- */ --space-2xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem); --space-xs: clamp(0.5rem, 0.4rem + 0.25vw, 0.625rem); --space-s: clamp(0.75rem, 0.6rem + 0.35vw, 1rem); --space-m: clamp(1rem, 0.8rem + 0.5vw, 1.25rem); --space-l: clamp(1.5rem, 1.15rem + 0.9vw, 2rem); --space-xl: clamp(2rem, 1.45rem + 1.5vw, 3rem); --space-2xl: clamp(3rem, 2rem + 2.8vw, 5rem); --space-3xl: clamp(4rem, 2.5rem + 4vw, 7rem); --flow-space: var(--space-s); --paragraph-space: var(--space-s); --heading-space: var(--space-l); --list-indent-space: var(--space-m); --list-item-space: var(--space-xs); --figure-space: var(--space-l); --blockquote-space: var(--space-l); --content-gap: var(--space-l); --grid-gap: var(--space-l); --page-stack-space: var(--space-l); --page-content-stack-space: var(--space-m); --front-page-content-stack-space: 0; /* --------------------------------------------------------------------- DERIVED LINES, WASHES, AND SURFACES Every alpha value is mixed from a palette token so a palette change carries through. Lines and washes take the decorative colour; shadows take the navy so they read as depth rather than as a tint. --------------------------------------------------------------------- */ --color-white: #ffffff; --color-shade: var(--color-navy-deep); --color-line-hairline: color-mix(in srgb, var(--color-ink) 9%, transparent); --color-line-soft: color-mix(in srgb, var(--color-decor) 25%, transparent); --color-line-medium: color-mix(in srgb, var(--color-decor) 40%, transparent); --color-line-strong: color-mix(in srgb, var(--color-decor) 62%, transparent); --color-wash-gold: color-mix(in srgb, var(--color-decor-soft) 20%, transparent); --color-wash-blush: color-mix(in srgb, var(--color-mist-deep) 46%, transparent); --color-scrim: color-mix(in srgb, var(--color-ink) 14%, transparent); --surface-card: linear-gradient(180deg, var(--color-white) 55%, var(--color-card-cool) 100%); --surface-panel: linear-gradient(178deg, var(--color-white) 0%, var(--color-card-cool) 100%); --surface-accent-panel: linear-gradient(180deg, var(--color-decor-tint) 0%, var(--color-card-cool) 100%); /* --------------------------------------------------------------------- MOTION - unchanged from the blueprint --------------------------------------------------------------------- */ --duration-fast: 180ms; --duration-base: 250ms; --duration-card: 300ms; --duration-media: 600ms; --duration-reveal: 700ms; --easing-standard: ease; --easing-emphasized: cubic-bezier(0.22, 0.61, 0.36, 1); /* --------------------------------------------------------------------- COMPONENT SCALE - unchanged from the blueprint --------------------------------------------------------------------- */ --text-card-title: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem); --text-card-body: calc(var(--text-m) * 0.94); --text-meta: calc(var(--text-2xs) * 0.86); --line-height-meta: 1.4; --letter-spacing-meta: 0.1em; --letter-spacing-eyebrow: 0.22em; --card-padding: clamp(1.35rem, 3vw, 1.75rem); --card-media-height: clamp(10.5rem, 17vw, 13.125rem); --card-lift: -0.375rem; --header-phone-line-gap: 3px; --avatar-size-l: 8.5rem; --section-heading-avatar: clamp(5rem, 8vw, 6.5rem); --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'/%3E%3C/svg%3E"); --section-overlap: clamp(2.25rem, 5vw, 4rem); --radius-s: 0.625rem; --radius-m: 1rem; --radius-l: 1.5rem; --radius-xl: 2.125rem; --radius-pill: 999px; --border-width-thin: 1px; --border-width-accent: 3px; --shadow-small: 0 2px 8px color-mix(in srgb, var(--color-navy) 7%, transparent); --shadow-soft: 0 14px 40px -18px color-mix(in srgb, var(--color-navy) 30%, transparent); --shadow-large: 0 30px 70px -30px color-mix(in srgb, var(--color-ink) 40%, transparent); --shadow-card: 0 1px 2px color-mix(in srgb, var(--color-navy) 6%, transparent), 0 10px 26px -16px color-mix(in srgb, var(--color-navy) 35%, transparent); --shadow-card-hover: 0 1px 2px color-mix(in srgb, var(--color-navy) 6%, transparent), 0 26px 46px -22px color-mix(in srgb, var(--color-navy) 45%, transparent); --transition-standard: var(--duration-base) var(--easing-standard); --translate-interactive-hover: -2px; /* --------------------------------------------------------------------- BUTTONS --------------------------------------------------------------------- */ --button-padding-y: 0.9rem; --button-padding-x: 1.75rem; --button-font-size: 1rem; --button-font-weight: 600; --button-radius: var(--radius-pill); --button-bg: var(--color-accent-strong); --button-bg-hover: color-mix(in srgb, var(--color-accent-strong) 82%, var(--color-ink)); --button-text: #ffffff; --button-border-width: 1.5px; --button-border: var(--button-border-width) solid var(--color-accent-strong); --button-border-hover: var(--button-border-width) solid color-mix(in srgb, var(--color-accent-strong) 82%, var(--color-ink)); --button-outline-bg: transparent; --button-outline-text: var(--color-accent-strong); --button-outline-text-hover: var(--color-accent-strong); --object-fit: cover; --object-position: 50% 50%; } /* Nautical concept. Retains the WordPress token contract. */ :root { --color-paper: #f7f8f4; --color-paper-deep: #edf2ee; --color-mist: #dce9e3; --color-mist-deep: #cbded6; --color-sage-deep: #426c60; --color-ink: #122a3c; --color-ink-soft: #405953; --color-ink-muted: #546c65; --container-width: 75rem; --header-container-width: 82rem; --header-height: 6.25rem; --section-padding-x: clamp(1.5rem, 5.5vw, 6rem); --section-padding-y: clamp(4.5rem, 7vw, 7rem); --heading-1: clamp(3.25rem, 4.8vw, 4.5rem); --heading-2: clamp(2.125rem, 3vw, 2.875rem); --heading-3: clamp(1.6rem, 2.1vw, 2rem); --line-height-heading-tight: 1.08; --line-height-body: 1.75; --text-card-title: var(--heading-3); --text-card-body: var(--text-m); --card-padding: clamp(1.5rem, 2.4vw, 2rem); --card-media-height: auto; --card-lift: -0.2rem; --button-radius: var(--radius-pill); --button-font-weight: 500; --button-padding-y: 1rem; --button-padding-x: 1.5rem; --button-bg-hover: var(--color-sage-deep); --button-border-hover: var(--button-border-width) solid var(--color-sage-deep); --site-shell-shadow: none; --nautical-label-size: .8125rem; --nautical-brand-size: 2.2rem; --nautical-hairline: 1px solid var(--color-line-medium); --nautical-hero-padding: clamp(3.5rem, 5.5vw, 5.5rem); --nautical-portrait-width: 22rem; --nautical-quote-size: clamp(1.4rem, 2vw, 1.75rem); --nautical-curve-height: clamp(2.5rem, 5vw, 5rem); --nautical-gallery-border: .35rem; --nautical-portrait-offset: 1rem; --nautical-panel-radius: 2rem; --nautical-hero-mark-size: min(42rem, 50vw); --nautical-hero-mark-size-small: min(30rem, 68vw); --nautical-hero-mark-opacity: .6; --nautical-hero-mark-opacity-corner: .4; --nautical-internal-hero-media-ratio: 4 / 5; --nautical-card-media-ratio: 3 / 2; /* Water surface texture. Opacity is the tuning knob: below .25 the ripple disappears, above .5 it starts competing with the copy. */ --nautical-water-opacity: .38; --nautical-water-fade: 16%; } /* Phone type scale. Declared after the nautical block so it wins the cascade; every section heading takes these instead of a local size. */ @media (max-width: 43rem) { :root { --heading-1: clamp(2.25rem, 9vw, 2.625rem); --heading-2: clamp(1.875rem, 7.5vw, 2.125rem); } }