/* ============================================================================= NAMS Frisco — Design Tokens (Creative Energy) ----------------------------------------------------------------------------- Single source of truth for colors, typography, spacing, and radii. Change a value here and it propagates everywhere it's used. Extracted from the live Creative Energy preview at: https://kaleidoscopic-trifle-873fb4.netlify.app/examples/1/?system=creative-energy Date: 2026-05-13 Mustard yellow value is estimated from the design-system palette swatch (it is not actively used on the Example 1 page). Adjust if you have the exact hex from the design source. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. RAW PALETTE — name colors by hue. Do NOT reference these directly in component CSS. Reference the SEMANTIC tokens below instead. ----------------------------------------------------------------------------- */ :root { /* Navy / surface ramp (dark mode base) */ --palette-navy-900: #111a1e; /* darkest — page background */ --palette-navy-800: #1a272d; /* default surface */ --palette-navy-700: #21323a; /* elevated surface (cards, tiles) */ --palette-navy-600: #2a3e48; /* hairline border */ /* Coral / brand red */ --palette-coral-500: #c8402f; /* primary brand red (CTA, eyebrow, accent) */ /* Slate blue — accent text */ --palette-slate-500: #4e7a8a; /* Mustard yellow — secondary accent (estimated from palette swatch) */ --palette-mustard-500: #d4a82a; /* Cream / warm neutrals */ --palette-cream-100: #f7f3ea; /* lightest — light-mode body bg */ --palette-cream-200: #ede6d8; /* default text on dark bg */ --palette-warm-400: #b09e8e; /* muted warm border / divider */ --palette-warm-900: #17201d; /* near-black text on light bg */ /* Pure white (for borders on coral surfaces) */ --palette-white: #ffffff; } /* ----------------------------------------------------------------------------- 2. SEMANTIC TOKENS — describe purpose, not hue. These are what component CSS should reference. Re-skinning the site = changing only this block. ----------------------------------------------------------------------------- */ :root { /* Surfaces */ --color-bg: var(--palette-navy-900); --color-surface: var(--palette-navy-800); --color-surface-elevated: var(--palette-navy-700); --color-surface-inverse: var(--palette-cream-100); /* Text */ --color-text: var(--palette-cream-200); --color-text-muted: var(--palette-warm-400); --color-text-inverse: var(--palette-warm-900); --color-text-on-accent: var(--palette-white); /* Brand accents */ --color-accent: var(--palette-coral-500); --color-accent-hover: #b13724; /* coral darkened ~8% */ --color-accent-secondary: var(--palette-slate-500); --color-accent-tertiary: var(--palette-mustard-500); /* Borders & dividers */ --color-border: var(--palette-navy-600); --color-border-strong: var(--palette-cream-200); --color-border-warm: var(--palette-warm-400); /* Interactive */ --color-link: var(--palette-coral-500); --color-link-hover: #b13724; --color-focus-ring: var(--palette-slate-500); } /* ----------------------------------------------------------------------------- 3. TYPOGRAPHY Body uses Inter (loaded on the live preview). Display headings use Inter at black weight (950). Pin to Inter via Google Fonts in the site rather than relying on system-ui fallback. ----------------------------------------------------------------------------- */ :root { --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type scale (matches preview) */ --font-size-eyebrow: 0.78rem; /* 12.48px — uppercase kicker */ --font-size-body: 1rem; /* 16px */ --font-size-lead: 1.125rem; /* 18px */ --font-size-h3: 1.5rem; /* 24px */ --font-size-h2: 2.75rem; /* 44px */ --font-size-h1: 4rem; /* 64px */ /* Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-weight-heavy: 800; --font-weight-black: 950; /* Line heights */ --line-height-tight: 1.05; --line-height-snug: 1.1; --line-height-body: 1.5; /* Letter spacing */ --tracking-tight: -0.03em; /* hero headlines */ --tracking-normal: 0; --tracking-wide: 0.08em; /* eyebrows / uppercase labels */ } /* ----------------------------------------------------------------------------- 4. SPACING, RADII, SHADOWS ----------------------------------------------------------------------------- */ :root { --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --radius-sm: 4px; --radius-md: 8px; /* buttons, chips */ --radius-lg: 16px; --radius-xl: 24px; /* hero image frames */ --radius-pill: 9999px; --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.45); } /* ----------------------------------------------------------------------------- 5. BASE RESET — apply tokens to the document so the rest of the CSS can rely on them. Drop this last so nothing else has to know about the token names. ----------------------------------------------------------------------------- */ html { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--font-size-body); line-height: var(--line-height-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3 { font-family: var(--font-display); font-weight: var(--font-weight-black); line-height: var(--line-height-tight); letter-spacing: var(--tracking-tight); color: var(--color-text); } h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } a { color: var(--color-link); } a:hover { color: var(--color-link-hover); } /* Eyebrow / kicker label pattern */ .eyebrow { color: var(--color-accent); font-size: var(--font-size-eyebrow); font-weight: var(--font-weight-heavy); letter-spacing: var(--tracking-wide); text-transform: uppercase; } /* Primary CTA button pattern */ .btn-primary { background: var(--color-accent); color: var(--color-text-on-accent); border: none; border-radius: var(--radius-md); font-family: var(--font-display); font-weight: var(--font-weight-heavy); padding: var(--space-3) var(--space-5); cursor: pointer; transition: background 0.15s ease; } .btn-primary:hover { background: var(--color-accent-hover); } /* ============================================================================= NAMS scoped polish pass: 2026-05-16 CSS-only fixes for audit items 1-4. ============================================================================= */ @media (min-width: 768px) { body.wp-theme-twentytwentyfour header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container-open { display: none !important; } } /* Tablet-only header compaction keeps one horizontal nav mode at 768px; desktop header rules resume above 900px. */ @media (min-width: 768px) and (max-width: 900px) { body.wp-theme-twentytwentyfour header.wp-block-template-part > .wp-block-group { padding: var(--space-5) var(--space-6) !important; gap: 0 !important; } body.wp-theme-twentytwentyfour header.wp-block-template-part > .wp-block-group > .wp-block-group { width: 100% !important; max-width: 100% !important; padding: 0 !important; gap: var(--space-3) !important; flex-wrap: nowrap !important; } /* 120px / 0.875rem are tablet-only fit values so the approved desktop nav fits at 768px. */ body.wp-theme-twentytwentyfour header.wp-block-template-part figure, body.wp-theme-twentytwentyfour header.wp-block-template-part .wp-block-site-logo, body.wp-theme-twentytwentyfour header.wp-block-template-part img { max-width: 120px !important; max-height: 42px !important; } body.wp-theme-twentytwentyfour header.wp-block-template-part .wp-block-navigation { width: auto !important; max-width: calc(100% - 132px) !important; margin-left: auto !important; font-size: 0.875rem !important; gap: var(--space-2) !important; } body.wp-theme-twentytwentyfour header.wp-block-template-part .wp-block-navigation__responsive-container, body.wp-theme-twentytwentyfour header.wp-block-template-part .wp-block-navigation__responsive-container-content, body.wp-theme-twentytwentyfour header.wp-block-template-part .wp-block-navigation__container { width: auto !important; max-width: 100% !important; gap: var(--space-2) !important; flex-wrap: nowrap !important; } } @media (min-width: 1024px) { body.wp-theme-twentytwentyfour.page-id-13 main > .wp-block-group:first-child { display: none !important; } body.wp-theme-twentytwentyfour.page-id-13 .entry-content.wp-block-post-content { padding-top: clamp(2.16rem, 3vw, 2.625rem) !important; } body.wp-theme-twentytwentyfour.page-id-70 .nams-contact-page { padding-top: var(--space-6) !important; } } body.wp-theme-twentytwentyfour.page-id-32 .entry-content.wp-block-post-content { padding-top: clamp(2.16rem, 3vw, 2.625rem) !important; padding-bottom: var(--space-8) !important; } body.wp-theme-twentytwentyfour.page-id-32 .nams-blog-wrap { padding-top: 0 !important; padding-bottom: var(--space-8) !important; }