/* ============================================================ PROVUS.COM.AU — Shared design system v1.0 · Production candidate ============================================================ Reference docs: PROVUS_Logo_System.html — marks, wordmark, volume tones, paper temperatures PROVUS_Design_System.html — typography, components, Summit cultural exception Visual_System_Reference.docx — locked decisions Page structure expected: : link to /css/provus.css, page-specific meta : .skip-link, header.site-header, main, footer.site-footer ============================================================ */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { /* Brand */ --navy-900: #1A2547; --navy-700: #2E3D63; --navy-500: #5A6584; --navy-300: #A4ABBE; --navy-100: #E5E8EF; --navy-50: #F5F6F9; --green: #4DAE7C; --green-soft: rgba(77, 174, 124, 0.08); /* Paper temperatures (per Logo System) */ --paper: #FAFAF7; /* Warm cream — default page surface */ --paper-elevated: #FFFFFF; /* Pure white — elevated cards, panels */ --paper-subtle: #F1F0EC; /* Cool stone — library shelf, recessed */ --rule: #E8E6DF; /* Volume tones — each lives inside its volume only */ --axis-tone: #1A2547; --guild-tone: #3D6E66; --rise-tone: #8C6F5C; --summit-tone: #D04A3F; --summit-tone-dark: #6B1F2C; /* Typography */ --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "JetBrains Mono", "SF Mono", Menlo, monospace; /* Spacing (4-point system) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Layout */ --container-max: 1120px; --container-pad: 32px; /* Motion */ --transition-fast: 150ms ease; --transition-base: 200ms ease; /* Z-index */ --z-skip: 200; --z-header: 100; --z-content: 2; --z-paper-noise: 1; } /* ============================================================ 2. RESET + BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); font-size: 17px; line-height: 1.6; background: var(--paper); color: var(--navy-900); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; min-height: 100vh; } /* Paper noise overlay — per Logo System (opacity 0.025 light) */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-paper-noise); opacity: 0.025; background-image: url("data:image/svg+xml;utf8,"); } header, main, footer { position: relative; z-index: var(--z-content); } img, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; } a { color: inherit; } /* ============================================================ 3. ACCESSIBILITY ============================================================ */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--navy-900); color: var(--paper-elevated); padding: 12px 20px; font-family: var(--sans); font-weight: 600; text-decoration: none; z-index: var(--z-skip); border-radius: 0 0 3px 0; } .skip-link:focus { top: 0; } :focus-visible { outline: 2px solid var(--navy-900); outline-offset: 2px; border-radius: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ 4. TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--serif); color: var(--navy-900); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; } h1 em, h2 em, h3 em, h4 em { font-style: italic; font-weight: 300; color: var(--navy-500); } .display { font-size: clamp(2.6rem, 5.5vw, 4.2rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; } .h1 { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 400; } .h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 400; } .h3 { font-size: 1.35rem; font-weight: 500; } .h4 { font-size: 1.1rem; font-weight: 600; } p { margin-bottom: var(--space-4); } p:last-child { margin-bottom: 0; } .body-l { font-size: 1.18rem; line-height: 1.6; color: var(--navy-700); } .body { font-size: 1rem; line-height: 1.6; color: var(--navy-700); } .body-s { font-size: 0.9rem; line-height: 1.55; color: var(--navy-500); } .micro { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-500); font-weight: 500; } strong, b { font-weight: 600; color: var(--navy-900); } em { font-style: italic; } .green-period { color: var(--green); } .serif { font-family: var(--serif); } .sans { font-family: var(--sans); } a.text-link { color: var(--navy-900); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--transition-fast); } a.text-link:hover { color: var(--green); } /* ============================================================ 5. LAYOUT ============================================================ */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } section { padding: var(--space-24) 0; } .section-tight { padding: var(--space-16) 0; } .section-loose { padding: var(--space-32) 0; } .section-subtle { background: var(--paper-subtle); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .divider { height: 1px; background: var(--rule); border: 0; } /* ============================================================ 6. SITE HEADER (shared across all pages) ============================================================ */ .site-header { background: var(--paper); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: var(--z-header); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .site-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--container-pad); max-width: var(--container-max); margin: 0 auto; gap: var(--space-6); } .site-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; } .site-brand-mark { width: 28px; height: 28px; flex-shrink: 0; } .site-brand-wordmark { font-family: var(--sans); font-weight: 800; font-size: 1rem; letter-spacing: 0.18em; color: var(--navy-900); } .site-brand-wordmark::after { content: "."; color: var(--green); } .site-nav { display: flex; align-items: center; gap: var(--space-6); } .site-nav a { font-family: var(--sans); font-size: 0.92rem; font-weight: 500; color: var(--navy-700); text-decoration: none; padding: 6px 0; transition: color var(--transition-fast); } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--navy-900); } .site-nav a[aria-current="page"] { border-bottom: 2px solid var(--green); } .site-cta { font-family: var(--sans); font-size: 0.92rem; font-weight: 600; color: var(--navy-900); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; white-space: nowrap; } .site-cta:hover { color: var(--green); } .site-nav-toggle { display: none; background: none; border: 1px solid var(--rule); border-radius: 3px; padding: 8px 10px; color: var(--navy-900); } /* Mobile header */ @media (max-width: 880px) { .site-nav, .site-cta { display: none; } .site-nav-toggle { display: inline-flex; align-items: center; gap: 8px; } .site-header.menu-open .site-nav, .site-header.menu-open .site-cta { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: var(--space-4) var(--container-pad) var(--space-6); gap: var(--space-4); background: var(--paper); border-top: 1px solid var(--rule); } .site-header.menu-open .site-header-inner { flex-wrap: wrap; } .site-header.menu-open .site-nav a { padding: 4px 0; } } /* ============================================================ 7. SITE FOOTER (shared) ============================================================ */ .site-footer { background: var(--navy-900); color: var(--paper); padding: var(--space-20) 0 var(--space-12); margin-top: var(--space-24); } .site-footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-12); margin-bottom: var(--space-12); } .site-footer-col h4 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); margin-bottom: var(--space-4); font-weight: 500; } .site-footer-col p, .site-footer-col a { font-size: 0.9rem; color: var(--navy-300); text-decoration: none; display: block; margin-bottom: var(--space-2); line-height: 1.5; } .site-footer-col a:hover { color: var(--paper); } .site-footer-fineprint { border-top: 1px solid var(--navy-700); padding-top: var(--space-8); font-family: var(--serif); font-style: italic; font-size: 0.92rem; color: var(--navy-300); max-width: 70ch; } .site-footer-legal { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-6); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-500); } .site-footer-legal a { color: var(--navy-500); text-decoration: none; } .site-footer-legal a:hover { color: var(--navy-300); } @media (max-width: 800px) { .site-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } } @media (max-width: 480px) { .site-footer-grid { grid-template-columns: 1fr; } } /* ============================================================ 8. BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: var(--space-3); background: var(--navy-900); color: var(--paper-elevated); padding: 14px 26px; border: none; border-radius: 3px; font-family: var(--sans); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; text-decoration: none; transition: background var(--transition-base), transform var(--transition-fast); } .btn:hover { background: var(--navy-700); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-arrow { font-size: 1.05rem; line-height: 1; } .btn-secondary { background: transparent; color: var(--navy-900); border: 1px solid var(--navy-300); } .btn-secondary:hover { background: var(--navy-50); border-color: var(--navy-700); transform: translateY(-1px); } .btn-summit { background: var(--summit-tone); } .btn-summit:hover { background: var(--summit-tone-dark); } /* White-pill CTA used inside the coral Summit hero — inverse of .btn-summit */ .summit-hero-cta { display: inline-flex; align-items: center; gap: var(--space-3); background: var(--paper-elevated); color: var(--summit-tone-dark); padding: var(--space-4) var(--space-6); border-radius: 3px; font-family: var(--sans); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; text-decoration: none; transition: transform var(--transition-fast); } .summit-hero-cta:hover { transform: translateY(-1px); } /* ============================================================ 9. AUDIENCE DOORS (homepage + reusable) ============================================================ */ .doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } .door { background: var(--paper-elevated); border: 1px solid var(--rule); padding: 28px 24px; border-radius: 3px; text-decoration: none; position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 200px; transition: border-color var(--transition-base), transform var(--transition-base); } .door::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--door-tone, var(--navy-700)); } .door.axis-door { --door-tone: var(--axis-tone); } .door.guild-door { --door-tone: var(--guild-tone); } .door.rise-door { --door-tone: var(--rise-tone); } .door.summit-door { --door-tone: var(--summit-tone); } .door:hover { border-color: var(--navy-700); transform: translateY(-2px); } .door-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-500); margin-bottom: var(--space-3); } .door-q { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--navy-900); line-height: 1.35; margin-bottom: var(--space-4); letter-spacing: -0.01em; } .door-arrow { font-family: var(--sans); font-size: 0.85rem; color: var(--navy-700); font-weight: 600; margin-top: auto; } .door:hover .door-arrow { color: var(--navy-900); } @media (max-width: 900px) { .doors { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .doors { grid-template-columns: 1fr; } } /* ============================================================ 10. VOLUME CARDS ============================================================ */ .volumes { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .vol { padding: var(--space-8) var(--space-6); border-right: 1px solid var(--rule); position: relative; } .vol:last-child { border-right: none; } .vol::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--vol-tone, var(--navy-900)); } .vol.axis-vol { --vol-tone: var(--axis-tone); } .vol.guild-vol { --vol-tone: var(--guild-tone); } .vol.rise-vol { --vol-tone: var(--rise-tone); } .vol.summit-vol { --vol-tone: var(--summit-tone); } .vol-mark { width: 44px; height: 44px; margin-bottom: var(--space-5, 20px); display: block; } .vol-name { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; color: var(--navy-900); margin-bottom: 4px; letter-spacing: -0.015em; } .vol-name .period { color: var(--green); } .vol-role { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-500); margin-bottom: var(--space-4); } .vol.summit-vol .vol-role { color: var(--summit-tone); } .vol-body { font-size: 0.93rem; line-height: 1.55; color: var(--navy-700); } @media (max-width: 800px) { .volumes { grid-template-columns: 1fr 1fr; } .vol { border-right: none; border-bottom: 1px solid var(--rule); } .vol:nth-child(odd) { border-right: 1px solid var(--rule); } .vol:nth-last-child(-n+2):not(:nth-child(odd)) { border-bottom: none; } } @media (max-width: 480px) { .volumes { grid-template-columns: 1fr; } .vol { border-right: none; } .vol:not(:last-child) { border-bottom: 1px solid var(--rule); } } /* ============================================================ 11. PRINCIPLES ============================================================ */ .principle-list { list-style: none; padding: 0; margin: 0; } .principle { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-6); align-items: baseline; padding: var(--space-6) 0; border-bottom: 1px solid var(--rule); } .principle:last-child { border-bottom: none; } .principle-anchor { font-family: var(--sans); font-weight: 700; font-size: 1rem; color: var(--green); } .principle-text { font-size: 1rem; line-height: 1.6; color: var(--navy-700); } .principle-text strong { color: var(--navy-900); font-weight: 700; } @media (max-width: 600px) { .principle { grid-template-columns: 50px 1fr; gap: var(--space-4); } } /* Long-form variant — used on principles.html for the deep-read view. .principle-list is the compact form for in-flow contexts (homepage). .full-principle is the long-form sibling for dedicated principle reads. */ .full-principle { padding: var(--space-12) 0; border-bottom: 1px solid var(--rule); } .full-principle:last-child { border-bottom: none; } .full-principle-header { display: flex; align-items: baseline; gap: var(--space-6); margin-bottom: var(--space-6); } .full-principle-num { font-family: var(--serif); font-weight: 400; font-size: 4rem; line-height: 1; color: var(--green); letter-spacing: -0.02em; flex-shrink: 0; } .full-principle-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.015em; line-height: 1.1; } .full-principle-body { max-width: 64ch; margin-left: var(--space-24); } .full-principle-body p { font-size: 1.02rem; color: var(--navy-700); line-height: 1.65; margin-bottom: var(--space-4); } .full-principle-body p:last-of-type { margin-bottom: 0; } .full-principle-body .principle-implication { font-family: var(--serif); font-style: italic; color: var(--navy-500); margin-top: var(--space-4); } @media (max-width: 700px) { .full-principle-header { flex-direction: column; gap: var(--space-3); } .full-principle-body { margin-left: 0; } } /* ============================================================ 11a. REFUSALS (manifesto + inline forms) ============================================================ Two patterns express the platform's refusals across the site: 1. MANIFESTO (.home-not-section + .home-not-grid OR .home-not-list) Dark-navy section, green accents, used at site-wide manifesto level. Use only on the homepage (compact .home-not-grid) and on principles.html (long-form .home-not-list). 2. INLINE (.refusals-inline) — lightweight in-flow list on a .section-subtle background. Used on audience pages for 2-3 audience-specific items. Each item: Lead. Body. ============================================================ */ .home-not-section { padding: var(--space-24) 0; background: var(--navy-900); color: var(--paper); } .home-not-section .h1 { color: var(--paper); } .home-not-section .body-l { color: var(--navy-300); max-width: 60ch; margin-bottom: var(--space-12); } .home-not-marker { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin-bottom: var(--space-3); display: block; } /* Compact 2-col grid — short title + 1-sentence description. */ .home-not-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--navy-700); } .home-not-item { background: var(--navy-900); padding: var(--space-8); } .home-not-item h3 { color: var(--paper); font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin-bottom: var(--space-3); letter-spacing: -0.015em; } .home-not-item p { color: var(--navy-300); font-size: 0.92rem; line-height: 1.55; } /* Long-form list — full-sentence refusals (principles.html). */ .home-not-list { list-style: none; padding: 0; margin: var(--space-8) 0 0; max-width: 75ch; } .home-not-list > li { padding: var(--space-4) 0; border-bottom: 1px solid var(--navy-700); font-size: 1rem; color: var(--paper); line-height: 1.55; } .home-not-list > li:last-child { border-bottom: none; } .home-not-list > li strong { color: var(--green); font-weight: 600; } .home-not-list > li span { color: var(--navy-300); } /* Lightweight inline pattern — audience pages on a .section-subtle slab. */ .refusals-inline { list-style: none; padding: 0; margin: var(--space-8) 0 0; max-width: 70ch; } .refusals-inline > li { padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); font-size: 1rem; color: var(--navy-700); line-height: 1.55; } .refusals-inline > li:last-child { border-bottom: none; } .refusals-inline > li strong { color: var(--navy-900); font-weight: 600; } @media (max-width: 700px) { .home-not-grid { grid-template-columns: 1fr; } } /* ============================================================ 12. CALLOUT / QUIET PANEL ============================================================ */ .callout { padding: var(--space-6) var(--space-8); border-left: 3px solid var(--green); background: var(--paper-subtle); font-family: var(--serif); font-style: italic; color: var(--navy-700); line-height: 1.55; } .callout strong { font-style: normal; } .callout.summit-callout { border-left-color: var(--summit-tone); } /* ============================================================ 13. ELIGIBILITY / FINEPRINT BAR ============================================================ */ .fineprint-bar { background: var(--paper-subtle); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--space-3) 0; font-family: var(--serif); font-style: italic; font-size: 0.88rem; color: var(--navy-500); text-align: center; } /* ============================================================ 14. FORMS (audience register forms) ============================================================ */ .form-block { background: var(--paper-elevated); border: 1px solid var(--rule); border-radius: 4px; padding: var(--space-12); } .form-block.summit-form { border-top: 4px solid var(--summit-tone); } .form-header { padding-bottom: var(--space-6); border-bottom: 1px solid var(--rule); margin-bottom: var(--space-8); } .form-eyebrow { margin-bottom: var(--space-2); } .form-summit-eyebrow { color: var(--summit-tone); } .form-title { font-family: var(--serif); font-weight: 400; font-size: 1.85rem; color: var(--navy-900); letter-spacing: -0.015em; line-height: 1.15; margin-bottom: var(--space-3); } .form-deck { font-size: 0.98rem; color: var(--navy-700); line-height: 1.55; max-width: 62ch; } .form-field { margin-bottom: var(--space-6); } .form-label { display: block; font-family: var(--sans); font-weight: 600; font-size: 0.88rem; color: var(--navy-900); margin-bottom: 6px; } .form-label .req { color: var(--navy-500); font-weight: 400; font-size: 0.78rem; margin-left: 6px; } .form-helper { font-size: 0.8rem; color: var(--navy-500); margin-bottom: 10px; line-height: 1.4; font-style: italic; } .form-input, .form-select, .form-textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--navy-300); border-radius: 3px; font-family: var(--sans); font-size: 0.95rem; color: var(--navy-900); background: var(--paper-elevated); transition: border-color var(--transition-fast); } .form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--navy-700); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--navy-900); box-shadow: 0 0 0 2px var(--green-soft); } .form-input::placeholder, .form-textarea::placeholder { color: var(--navy-300); } .form-textarea { min-height: 96px; resize: vertical; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } @media (max-width: 700px) { .form-grid-2 { grid-template-columns: 1fr; gap: 0; } } .form-radio-group { display: flex; flex-direction: column; gap: 10px; } .form-radio { display: flex; align-items: flex-start; gap: var(--space-3); padding: 12px 14px; border: 1px solid var(--navy-300); border-radius: 3px; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); } .form-radio:hover { border-color: var(--navy-700); background: var(--navy-50); } .form-radio input { margin-top: 4px; flex-shrink: 0; accent-color: var(--navy-900); } .form-radio-text { font-family: var(--sans); font-size: 0.92rem; color: var(--navy-700); line-height: 1.45; } .form-radio-text strong { color: var(--navy-900); font-weight: 600; } .form-consent { display: flex; align-items: flex-start; gap: var(--space-3); padding: 18px; background: var(--paper-subtle); border-radius: 3px; margin: var(--space-6) 0; } .form-consent input { margin-top: 4px; flex-shrink: 0; accent-color: var(--navy-900); width: 20px; height: 20px; } .form-consent label { font-size: 0.85rem; color: var(--navy-700); line-height: 1.5; cursor: pointer; } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); } .form-actions .alt-path { font-size: 0.88rem; color: var(--navy-500); font-style: italic; } .form-actions .alt-path a { color: var(--navy-700); font-style: normal; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Back-to-top link — sits below each long form section, returning the reader to the audience-jump cards at the top of the page. */ .form-back-to-top { margin-top: var(--space-8); text-align: center; } .back-to-top { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-500); text-decoration: none; padding: var(--space-3) var(--space-5); border: 1px solid var(--rule); border-radius: 100px; background: var(--paper-elevated); transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .back-to-top:hover { color: var(--navy-900); border-color: var(--navy-700); transform: translateY(-2px); } .back-to-top-arrow { font-size: 0.95rem; line-height: 1; } /* ============================================================ 15. PAGE HERO (audience pages) ============================================================ */ .page-hero { padding: var(--space-24) 0 var(--space-16); position: relative; } .page-hero-eyebrow { margin-bottom: var(--space-6); display: inline-flex; align-items: center; gap: var(--space-3); } .page-hero-volume-marker { display: inline-block; width: 24px; height: 3px; background: var(--page-tone, var(--navy-700)); } .page-hero h1 { font-size: clamp(2.4rem, 4.8vw, 3.6rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: var(--space-6); max-width: 22ch; } .page-hero-deck { font-size: 1.2rem; line-height: 1.55; color: var(--navy-700); max-width: 60ch; } /* Page tone applied per audience page */ .page-axis { --page-tone: var(--axis-tone); } .page-guild { --page-tone: var(--guild-tone); } .page-rise { --page-tone: var(--rise-tone); } .page-summit { --page-tone: var(--summit-tone); } /* ============================================================ 16. UTILITY ============================================================ */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-12 { margin-top: var(--space-12); } .mt-16 { margin-top: var(--space-16); } .mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mb-12 { margin-bottom: var(--space-12); } .max-prose { max-width: 70ch; } /* ============================================================ 17. BRAND HEARTBEAT ============================================================ Slow ambient pulse on the green dot in the PROVUS logo. A slight scale + green glow gives the mark a sense of breath without demanding attention. Scoped to the persistent header mark (.site-brand-mark) and the homepage hero mark (.home-hero-mark) — the two places the full logo appears. The selector targets the SVG circle by its fill colour, so the animation attaches without any HTML changes. The colour stop 77,174,124 is var(--green) in RGB; kept inline because rgba() does not accept var() pre-modern-color-syntax. Disabled automatically for users with prefers-reduced-motion via the global rule in §3. */ @keyframes brand-pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(77, 174, 124, 0)); } 50% { transform: scale(1.08); filter: drop-shadow(0 0 3px rgba(77, 174, 124, 0.65)); } } .site-brand-mark, .home-hero-mark { overflow: visible; } .site-brand-mark circle[fill="#4DAE7C"], .home-hero-mark circle[fill="#4DAE7C"] { animation: brand-pulse 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }