:root { /* ====================================================================== CORE PALETTE THE SINGLE SOURCE OF TRUTH FOR COLOUR. Every one of these is overridable from Appearance > Customize > Theme Colours, which writes a later :root block and wins on cascade order. The same values are pushed into the block editor palette, so a colour changed here changes everywhere -- CSS, blocks and patterns alike. Do not reintroduce a second naming family. This file previously carried --aum-ss-* and --aum-pattern-* groups doing the same job, which meant two tokens could disagree and the losing one failed silently. ====================================================================== */ --aum-black: #000000; --aum-white: #ffffff; --aum-ink: #121212; --aum-gray: #9b9b9b; --aum-border: #e8e8e8; --aum-soft: #f7f7f7; --aum-warm: #f2ece4; --aum-accent: #d7c6b2; --aum-accent-deep: #7b6a58; --aum-text: #2b2b2b; --aum-text-muted: rgba(0, 0, 0, .62); --aum-line: rgba(0, 0, 0, .13); /* ---- Legacy aliases ------------------------------------------------- Kept so any stray rule or saved block content still resolves. They now point at the core tokens rather than holding their own values. --------------------------------------------------------------------- */ --aum-ss-black: var(--aum-black); --aum-ss-white: var(--aum-white); --aum-ss-ink: var(--aum-ink); --aum-ss-soft: var(--aum-soft); --aum-ss-paper: var(--aum-white); --aum-ss-border: var(--aum-line); --aum-ss-muted: var(--aum-text-muted); --aum-pattern-ink: var(--aum-ink); --aum-pattern-muted: var(--aum-text-muted); --aum-pattern-soft: var(--aum-warm); --aum-pattern-paper: var(--aum-white); --aum-pattern-line: var(--aum-line); --aum-pattern-dark: var(--aum-ink); --aum-pattern-accent: var(--aum-accent); --aum-bg-warm: var(--aum-warm); /* --- Typography ---------------------------------------------------- */ --aum-font: Lato, sans-serif; --aum-heading-font: Lato, sans-serif; --aum-wordmark-font: Lato, sans-serif; /* * Fluid type scale shared by Bootstrap, WordPress core blocks and AUM * blocks. Component styles should reference these roles instead of adding * one-off pixel sizes. The viewport math reaches its minimum near 360px and * its maximum near 1440px, so type does not keep growing on large screens. */ --aum-fs-3xs: 0.625rem; /* 10px */ --aum-fs-2xs: 0.6875rem; /* 11px */ --aum-fs-xs: 0.75rem; /* 12px */ --aum-fs-caption: 0.8125rem; /* 13px */ --aum-fs-small: 0.875rem; /* 14px */ --aum-fs-copy-small: 0.9375rem; /* 15px */ --aum-fs-body-sm: 1rem; /* 16px */ --aum-fs-body: clamp(1.0625rem, 1.0417rem + 0.0926vw, 1.125rem); --aum-fs-large: clamp(1.25rem, 1.1667rem + 0.3704vw, 1.5rem); --aum-fs-h6: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem); --aum-fs-h5: clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem); --aum-fs-h4: clamp(1.375rem, 1.25rem + 0.5556vw, 1.75rem); --aum-fs-h3: clamp(1.625rem, 1.4167rem + 0.9259vw, 2.25rem); --aum-fs-h2: clamp(2rem, 1.6667rem + 1.4815vw, 3rem); --aum-fs-h1: clamp(2.5rem, 2rem + 2.2222vw, 4rem); --aum-fs-display: clamp(3rem, 2.375rem + 2.7778vw, 4.875rem); --aum-fs-decorative: clamp(4.5rem, 3.6667rem + 3.7037vw, 7rem); --aum-lh-base: 1.6; --aum-lh-heading: 1.12; --aum-lh-tight: 1.05; --aum-lh-copy: 1.7; --aum-fw-normal: 400; --aum-fw-medium: 500; --aum-fw-bold: 600; --aum-tracking: 0.02em; /* --- Core palette (monochrome) -------------------------------------- */ /* Warm ground for CTA bands. Lighter than the sand accent so black text still meets contrast requirements over it. */ /* --- Style-sheet surface set ---------------------------------------- */ --aum-ss-radius: 0px; /* --- Pattern surface set (warm) ------------------------------------- */ --aum-pattern-max: 1180px; --aum-pattern-narrow: 820px; --aum-pattern-gutter: 24px; /* --- Semantic aliases ------------------------------------------------ Component CSS should reference THESE, not the raw palette above. --------------------------------------------------------------------- */ --aum-bg: var(--aum-white); --aum-bg-alt: var(--aum-soft); --aum-surface: var(--aum-white); --aum-text-invert: var(--aum-white); /* --- Masthead -------------------------------------------------------- Centred two-row header. Row 1 is the wordmark with BOOK + MENU pinned right; row 2 is the inline navigation. MENU opens the drawer at every breakpoint. --------------------------------------------------------------------- */ --aum-header-bg: #ffffff; --aum-header-text: #969696; --aum-header-border: #e7e3df; --aum-header-pad-y: 22px; --aum-header-pad-x: 24px; /* Wordmark */ --aum-wordmark-size: 44px; --aum-wordmark-tracking: 0.16em; --aum-wordmark-weight: 600; --aum-wordmark-color: #9b9b9b; --aum-wordmark-max-h: 56px; /* Logo image The mark is roughly 7.3:1, so it is sized by WIDTH. Height-only sizing on a wide logo makes it tiny before the height limit is ever reached. */ --aum-logo-w: 450px; --aum-logo-w-mobile: 240px; --aum-logo-hover-opacity: 0.72; /* Inline nav row */ /* Menu typography. Weight, transform, leading and colour used to be hardcoded in theme.css, so only size and tracking could be changed. These make the whole set addressable. */ --aum-nav-family: var(--aum-font); --aum-nav-weight: 400; --aum-nav-transform: uppercase; --aum-nav-leading: 1.2; --aum-nav-color: var(--aum-header-text); --aum-nav-hover: var(--aum-black); --aum-dropdown-family: var(--aum-font); --aum-dropdown-weight: 400; --aum-dropdown-tracking: var(--aum-nav-tracking); --aum-dropdown-transform: uppercase; --aum-dropdown-leading: 1.4; --aum-dropdown-color: var(--aum-header-text); --aum-dropdown-hover: var(--aum-black); --aum-offcanvas-family: var(--aum-font); --aum-offcanvas-weight: 400; --aum-offcanvas-tracking: -0.01em; --aum-offcanvas-transform: none; --aum-offcanvas-leading: 1.25; --aum-offcanvas-sub-family: var(--aum-font); --aum-offcanvas-sub-weight: 400; --aum-offcanvas-sub-tracking: 0em; --aum-offcanvas-sub-transform: none; --aum-offcanvas-sub-leading: 1.6; --aum-nav-size: 14px; --aum-nav-tracking: 0.11em; --aum-nav-gap: 26px; --aum-nav-row-pad-top: 20px; --aum-caret-color: #000000; --aum-caret-size: 9px; --aum-caret-gap: 6px; /* Mobile masthead Below 768px the layout stacks and centres, and the masthead itself becomes the sticky element because the nav row is hidden. */ --aum-header-mobile-pad-y: 20px; --aum-header-mobile-pad-x: 12px; --aum-header-mobile-gap: 14px; --aum-wordmark-mobile-size: 32px; --aum-wordmark-mobile-min: 20px; --aum-wordmark-mobile-tracking: 0.14em; --aum-wordmark-mobile-logo-h: 40px; --aum-btn-mobile-size: 15px; --aum-btn-mobile-pad-x: 28px; --aum-btn-mobile-pad-y: 16px; --aum-burger-mobile-hit: 40px; /* tap target */ --aum-burger-mobile-w: 24px; --aum-burger-mobile-gap: 6px; --aum-burger-mobile-line: 1px; /* Sticky nav row */ --aum-navrow-z: 1030; --aum-navrow-stuck-shadow: 0 1px 14px rgba(0, 0, 0, .07); --aum-navrow-stuck-pad-y: 12px; /* Nav row dropdowns */ --aum-dropdown-bg: #ffffff; --aum-dropdown-border: #e7e3df; --aum-dropdown-size: 13px; --aum-dropdown-pad-y: 10px; --aum-dropdown-pad-x: 18px; --aum-dropdown-min-w: 240px; /* BOOK and MENU buttons */ --aum-btn-size: 13px; --aum-btn-tracking: 0.09em; --aum-btn-pad-x: 20px; --aum-btn-pad-y: 13px; --aum-header-button-bg: #000000; --aum-header-button-text: #ffffff; /* --- Masthead mail icon (book button as icon) ---------------------- */ --aum-mail-size: 44px; /* circle */ --aum-mail-size-mobile: 40px; --aum-mail-icon: 20px; /* glyph */ --aum-mail-icon-mobile: 18px; --aum-mail-stroke: 1.5; --aum-mail-color: #ffffff; /* glyph, fixed */ --aum-mail-hover-bg: #9b9b9b; /* Circle colour cycle: two tones, one full loop per --aum-mail-cycle. */ --aum-mail-cycle: 18s; --aum-mail-bg-1: #edcf98; /* gold */ --aum-mail-bg-2: #9b9b9b; /* grey */ /* --- Offcanvas ------------------------------------------------------- */ /* The drawer had no colour tokens of its own -- background borrowed the header's and links used --aum-black directly, so neither could be changed without editing theme.css. These give it its own surface. */ --aum-offcanvas-bg: var(--aum-header-bg); --aum-offcanvas-color: var(--aum-black); --aum-offcanvas-hover: var(--aum-accent-deep); --aum-offcanvas-border: var(--aum-border); --aum-offcanvas-sub-color: var(--aum-gray); --aum-offcanvas-width: 520px; --aum-offcanvas-title-font-size: 18px; --aum-offcanvas-pad: 28px; /* Navigation */ --aum-offcanvas-nav-font-size: 34px; --aum-offcanvas-nav-font-min: 22px; --aum-offcanvas-sub-font-size: 16px; --aum-offcanvas-caret-size: 13px; --aum-offcanvas-caret-gap: 12px; /* Bordered parent rows */ --aum-offcanvas-item-border: #000000; --aum-offcanvas-item-border-w: 1px; --aum-offcanvas-item-pad-x: 16px; --aum-offcanvas-item-pad-y: 10px; --aum-offcanvas-item-gap: 6px; /* Logo */ /* Large centred drawer logo. Height is a cap rather than a fixed value, so a wordmark of any aspect ratio fits without being stretched. */ --aum-offcanvas-logo-h: 110px; --aum-offcanvas-logo-align: center; /* Drawer social row */ --aum-offcanvas-social-size: 40px; --aum-offcanvas-social-icon: 16px; --aum-offcanvas-social-gap: 14px; --aum-offcanvas-social-color: var(--aum-gray); --aum-offcanvas-social-hover-bg: var(--aum-black); --aum-offcanvas-social-top: 22px; --aum-offcanvas-logo-max-h: 40px; --aum-offcanvas-logo-w: 240px; /* Card block */ --aum-card-border: #e8e8e8; --aum-card-pad: 32px; --aum-card-pad-mobile: 24px; --aum-card-eyebrow-size: 13px; --aum-card-eyebrow-tracking: 0.14em; --aum-card-eyebrow-color: #9b9b9b; --aum-card-eyebrow-gap: 18px; --aum-card-title-size: 26px; --aum-card-title-size-mobile: 22px; --aum-card-title-weight: 400; --aum-card-title-tracking: 0.16em; --aum-card-title-color: #8a8a8a; --aum-card-title-hover: #7b6a58; --aum-card-title-gap: 18px; --aum-card-body-size: 18px; --aum-card-body-leading: 1.65; --aum-card-body-color: #2b2b2b; --aum-card-body-gap: 28px; --aum-card-btn-size: 12px; --aum-card-btn-tracking: 0.18em; --aum-card-btn-pad-y: 18px; --aum-card-btn-pad-x: 20px; --aum-card-btn-color: #8a8a8a; --aum-card-btn-border: #e0e0e0; --aum-card-hover-zoom: 1.03; --aum-card-hover-speed: .6s; /* --- Footer ---------------------------------------------------------- */ --aum-footer-bg: #9b9b9b; --aum-footer-text: #ffffff; --aum-footer-muted: #d6d6d6; --aum-footer-border: #2a2a2a; --aum-footer-overlay: rgba(0, 0, 0, 0.62); /* --- Panels ---------------------------------------------------------- */ --aum-panel-bg: rgba(255, 255, 255, 0.88); --aum-panel-text: #000000; --aum-panel-border: rgba(0, 0, 0, 0.12); /* --- Layout and shape ------------------------------------------------ */ --aum-container: 1140px; --aum-container-padding: 16px; --aum-prose: 820px; --aum-panel-padding: clamp(28px, 4vw, 56px); --aum-section-pad-y: clamp(64px, 8vw, 120px); --aum-section-pad-x: clamp(24px, 5vw, 72px); --aum-safe-mobile-x: 24px; --aum-radius: var(--aum-ss-radius); --aum-shadow-lift: 0 28px 90px rgba(0, 0, 0, .14); --aum-transition: 0.25s ease; /* ==================================================================== BOOTSTRAP MAPPING Brand tokens feed Bootstrap's variables. Never hardcode colour below. ==================================================================== */ --bs-primary: var(--aum-black); --bs-primary-rgb: 0, 0, 0; --bs-secondary: var(--aum-gray); --bs-secondary-rgb: 155, 155, 155; --bs-body-bg: var(--aum-bg); --bs-body-bg-rgb: 255, 255, 255; --bs-body-color: var(--aum-text); --bs-body-color-rgb: 0, 0, 0; --bs-secondary-color: var(--aum-text-muted); --bs-emphasis-color: var(--aum-text); --bs-body-font-family: var(--aum-font); --bs-body-font-size: var(--aum-fs-body); --bs-body-line-height: var(--aum-lh-base); --bs-body-font-weight: var(--aum-fw-normal); --bs-heading-color: var(--aum-text); --bs-border-color: var(--aum-line); --bs-border-color-translucent: var(--aum-ss-border); /* Sharp corners. The design uses no rounding anywhere. */ --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-2xl: 0; --bs-border-radius-pill: 0; --bs-link-color: var(--aum-text); --bs-link-color-rgb: 0, 0, 0; --bs-link-hover-color: var(--aum-accent-deep); --bs-code-color: var(--aum-ss-ink); }