/* ============================================================ Catalyst•Wayfare — Pages stylesheet Shared section primitives for the non-home pages. Pulls the same navy/gold palette override the home page declares inline, so that methodology / work / careers / jd-* / contact all read off the same semantic tokens without re-declaring the palette inline. ============================================================ */ /* ===== NAVY/GOLD PALETTE OVERRIDE ===== Mirror of the home page's inline override block. Apply to by simply including this stylesheet — the override is in :root scope so it lands on the document. */ :root { /* Anchor: teal -> navy */ --cw-teal-900: #0E2240; --cw-teal-800: #163055; --cw-teal-700: #21436F; --cw-teal-100: #C5CFE0; /* Accent: sage/mint -> warm gold */ --cw-sage: #C4A04B; --cw-sage-soft: #D4B669; --cw-mint: #E2C97B; --cw-paper-blue: #EBDCAE; /* Page background: warmer cream */ --cw-paper: #F1ECDF; --cw-paper-soft: #E7E0CE; --cw-stone: #DCD3BC; --cw-stone-soft: #ECE5D2; /* Body ink stays as a deep navy */ --cw-ink: #0B1A30; --cw-fg: #0E2240; --cw-fg-muted: #3A4D6E; --cw-fg-soft: #7A85A0; --cw-fg-invert: #F1ECDF; --cw-fg-invert-muted: rgba(241,236,223,0.72); --cw-bg: var(--cw-paper); --cw-bg-invert: #0E2240; --cw-line: #0E2240; --cw-line-soft: rgba(14,34,64,0.18); --cw-line-invert: rgba(196,160,75,0.35); } /* ============================================================ PAGE HERO — the navy strip used on every non-home page. Slimmer than the home masthead. Same paper-texture wash. ============================================================ */ .cw-phero { background: var(--cw-teal-900); color: var(--cw-fg-invert); position: relative; overflow: hidden; } .cw-phero::before { content: ''; position: absolute; inset: 0; background-image: url('../assets/cw-paper-texture.png'); background-size: cover; background-position: center; opacity: 0.14; mix-blend-mode: screen; pointer-events: none; } .cw-phero__inner { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: 96px 56px 88px; } .cw-phero__back { font-family: var(--cw-sans); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cw-mint); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 40px; border-bottom: 1px solid transparent; transition: border-color 160ms ease; } .cw-phero__back:hover { border-bottom-color: var(--cw-mint); } .cw-phero__eyebrow { font-family: var(--cw-sans); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cw-mint); margin-bottom: 28px; display: flex; align-items: center; gap: 14px; } .cw-phero__eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--cw-mint); display: inline-block; } .cw-phero h1 { font-family: var(--cw-serif); font-weight: 400; font-size: clamp(40px, 5.2vw, 72px); line-height: 1.05; letter-spacing: -0.02em; color: var(--cw-paper); margin: 0 0 28px 0; text-wrap: balance; max-width: 22ch; } .cw-phero h1 em { font-style: italic; color: var(--cw-mint); } .cw-phero p.lede { font-family: var(--cw-serif); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--cw-fg-invert-muted); max-width: 56ch; margin: 0; } .cw-phero__ticker { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent, var(--cw-mint), transparent); background-size: 30% 100%; background-repeat: no-repeat; background-position: -30% 0; animation: cwp-ticker 6s linear infinite; opacity: 0.4; z-index: 3; } @keyframes cwp-ticker { 0% { background-position: -30% 0; } 100% { background-position: 130% 0; } } /* JD hero variant: tighter, with meta strip */ .cw-phero--jd h1 { font-size: clamp(36px, 4.4vw, 56px); margin-bottom: 36px; max-width: 24ch; } .cw-phero__meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 36px; border-top: 1px solid rgba(241,236,223,0.18); } .cw-phero__meta .label { font-family: var(--cw-sans); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cw-mint); margin-bottom: 8px; } .cw-phero__meta .value { font-family: var(--cw-serif); font-size: 17px; line-height: 1.35; color: var(--cw-paper); } @media (max-width: 880px) { .cw-phero__meta { grid-template-columns: 1fr 1fr; gap: 24px; } } /* ============================================================ GENERIC SECTION SCAFFOLD ============================================================ */ .cw-sec { padding: 112px 0; background: var(--cw-paper); } .cw-sec--soft { background: var(--cw-paper-soft); } .cw-sec--stone { background: var(--cw-stone-soft); } .cw-sec--mint { background: var(--cw-mint); } .cw-sec--blue { background: var(--cw-paper-blue); } .cw-sec--gold { background: var(--cw-sage); color: var(--cw-ink); } .cw-sec--navy { background: var(--cw-teal-900); color: var(--cw-fg-invert); position: relative; overflow: hidden; } .cw-sec--navy::before { content: ''; position: absolute; inset: 0; background-image: url('../assets/cw-paper-texture.png'); background-size: cover; background-position: center; opacity: 0.1; mix-blend-mode: screen; } .cw-sec--navy > * { position: relative; z-index: 2; } .cw-sec__head { max-width: 720px; margin-bottom: 64px; } .cw-sec__head .cw-eyebrow { margin-bottom: 18px; } .cw-sec__head h2 { font-family: var(--cw-serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.018em; margin: 0 0 18px 0; text-wrap: balance; } .cw-sec__head h2 em { font-style: italic; color: var(--cw-teal-700); } .cw-sec__head .lede { font-family: var(--cw-serif); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--cw-fg-muted); max-width: 60ch; margin: 0; } .cw-sec--navy .cw-sec__head h2 { color: var(--cw-paper); } .cw-sec--navy .cw-sec__head h2 em { color: var(--cw-mint); } .cw-sec--navy .cw-sec__head .lede { color: var(--cw-fg-invert-muted); } .cw-sec--navy .cw-sec__head .cw-eyebrow { color: var(--cw-mint); } .cw-sec--gold .cw-sec__head h2 em { color: var(--cw-paper); } /* ============================================================ LEAD-IN LIST — the signature "Bold lead-in. Short explanation." pattern. Each item is its own row with a hairline above. ============================================================ */ .cw-leadin-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--cw-line-soft); } .cw-leadin-list li { padding: 28px 0; border-bottom: 1px solid var(--cw-line-soft); display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: baseline; } .cw-leadin-list .marker { font-family: var(--cw-serif); font-style: italic; font-size: 20px; color: var(--cw-sage); line-height: 1; } .cw-leadin-list .body { font-family: var(--cw-sans); font-size: 17px; line-height: 1.55; color: var(--cw-fg); } .cw-leadin-list .body b, .cw-leadin-list .body strong { font-weight: 700; color: var(--cw-ink); } .cw-sec--navy .cw-leadin-list { border-top-color: rgba(241,236,223,0.2); } .cw-sec--navy .cw-leadin-list li { border-bottom-color: rgba(241,236,223,0.2); } .cw-sec--navy .cw-leadin-list .body { color: var(--cw-fg-invert-muted); } .cw-sec--navy .cw-leadin-list .body b, .cw-sec--navy .cw-leadin-list .body strong { color: var(--cw-paper); } .cw-sec--navy .cw-leadin-list .marker { color: var(--cw-mint); } /* Compact bullet list with bold leadin (no row dividers) */ .cw-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; } .cw-bullets li { font-family: var(--cw-sans); font-size: 16px; line-height: 1.55; color: var(--cw-fg); padding-left: 22px; position: relative; } .cw-bullets li::before { content: ''; position: absolute; left: 0; top: 11px; width: 10px; height: 1px; background: var(--cw-sage); } .cw-bullets li b, .cw-bullets li strong { font-weight: 700; color: var(--cw-ink); } .cw-sec--navy .cw-bullets li { color: var(--cw-fg-invert-muted); } .cw-sec--navy .cw-bullets li b, .cw-sec--navy .cw-bullets li strong { color: var(--cw-paper); } .cw-sec--navy .cw-bullets li::before { background: var(--cw-mint); } /* ============================================================ CLOSING CTA — reuses the home page's gold bar pattern ============================================================ */ .cw-closing { background: var(--cw-sage); padding: 112px 0; color: var(--cw-ink); position: relative; overflow: hidden; } .cw-closing__inner { max-width: 1320px; margin: 0 auto; padding: 0 56px; display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; } .cw-closing h2 { font-family: var(--cw-serif); font-weight: 400; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.018em; color: var(--cw-ink); margin: 0 0 20px 0; text-wrap: balance; } .cw-closing h2 em { font-style: italic; color: var(--cw-paper); } .cw-closing p { font-family: var(--cw-sans); font-size: 16px; line-height: 1.6; color: rgba(14,31,30,0.78); margin: 0; max-width: 52ch; } .cw-closing .cw-btn { background: var(--cw-ink); border-color: var(--cw-ink); color: var(--cw-paper); } .cw-closing .cw-btn:hover { background: var(--cw-paper); color: var(--cw-ink); border-color: var(--cw-paper); } @media (max-width: 880px) { .cw-closing__inner { grid-template-columns: 1fr; gap: 32px; align-items: start; } } /* ============================================================ GOLD SHORT-RULE ornament (sized for in-page use, not just inline) ============================================================ */ .cw-gold-rule-block { display: block; height: 3px; width: 56px; background: var(--cw-sage); border: 0; margin: 0 0 32px 0; } /* ============================================================ JD PAGE — shared scaffolding for jd-lead / jd-builder ============================================================ */ .jd-section { padding: 96px 0; background: var(--cw-paper); border-bottom: 1px solid var(--cw-line-soft); } .jd-section--alt { background: var(--cw-paper-soft); } .jd-section--stone { background: var(--cw-stone-soft); } .jd-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; } .jd-grid .label-col .cw-eyebrow { margin-bottom: 14px; } .jd-grid .label-col h2 { font-family: var(--cw-serif); font-weight: 400; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.012em; color: var(--cw-ink); margin: 0; text-wrap: balance; } .jd-grid .label-col h2 em { font-style: italic; color: var(--cw-teal-700); } .jd-grid .label-col .gold-rule { display: block; height: 3px; width: 56px; background: var(--cw-sage); margin: 24px 0 0; } .jd-grid .body-col { font-family: var(--cw-sans); font-size: 16px; line-height: 1.65; color: var(--cw-fg); } .jd-grid .body-col p { margin: 0 0 18px 0; max-width: 64ch; } .jd-grid .body-col p:last-child { margin-bottom: 0; } .jd-grid .body-col p strong { color: var(--cw-ink); font-weight: 700; } .jd-grid .body-col h3 { font-family: var(--cw-sans); font-weight: 700; font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cw-sage); margin: 36px 0 18px 0; } .jd-grid .body-col h3:first-child { margin-top: 0; } @media (max-width: 880px) { .jd-grid { grid-template-columns: 1fr; gap: 32px; } .jd-section { padding: 64px 0; } } .jd-apply { background: var(--cw-teal-900); color: var(--cw-fg-invert); padding: 96px 0; position: relative; overflow: hidden; } .jd-apply::before { content: ''; position: absolute; inset: 0; background-image: url('../assets/cw-paper-texture.png'); background-size: cover; background-position: center; opacity: 0.1; mix-blend-mode: screen; } .jd-apply > * { position: relative; z-index: 2; } .jd-apply h2 { font-family: var(--cw-serif); font-weight: 400; font-size: clamp(32px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -0.015em; color: var(--cw-paper); margin: 0 0 24px 0; text-wrap: balance; } .jd-apply h2 em { font-style: italic; color: var(--cw-mint); } .jd-apply p { font-family: var(--cw-sans); font-size: 16px; line-height: 1.65; color: var(--cw-paper); margin: 0 0 18px 0; max-width: 64ch; } .jd-apply p strong { color: var(--cw-paper); font-weight: 700; } .jd-apply .cw-eyebrow { color: var(--cw-mint); margin-bottom: 18px; } .jd-apply .cw-bullets li { color: var(--cw-fg-invert-muted); } .jd-apply .cw-bullets li b, .jd-apply .cw-bullets li strong { color: var(--cw-paper); } .jd-apply .cw-bullets li::before { background: var(--cw-mint); } .jd-apply .btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; } .jd-apply .cw-btn--paper { background: var(--cw-mint); border-color: var(--cw-mint); color: var(--cw-ink); } .jd-apply .cw-btn--paper:hover { background: var(--cw-paper); border-color: var(--cw-paper); } /* Override .jd-grid .label-col / .body-col color rules inside the dark .jd-apply section — selectors have higher specificity than .jd-apply h2 alone, so without these the headline and inline strongs fall through to ink-dark on dark teal (illegible). */ .jd-apply .jd-grid .label-col h2 { color: var(--cw-paper); } .jd-apply .jd-grid .label-col h2 em { color: var(--cw-mint); } .jd-apply .jd-grid .body-col p { color: var(--cw-paper); } .jd-apply .jd-grid .body-col p strong { color: var(--cw-mint); } .jd-apply .jd-grid .body-col p em { color: var(--cw-paper); font-style: italic; } /* ============================================================ RESPONSIVE FALLBACKS for grid sections ============================================================ */ @media (max-width: 880px) { .cw-phero__inner { padding: 72px 28px 64px; } .cw-sec { padding: 72px 0; } .cw-container { padding: 0 28px; } .cw-header__inner { padding: 16px 28px; gap: 16px; flex-wrap: wrap; } .cw-nav { gap: 18px; } .cw-footer { padding: 32px 28px 40px; } .cw-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; } }