/* =================================================================== Global styles — loaded asynchronously (non-blocking) after critical.css. BaseLayout preloads this file and css-swap.js promotes it to a real stylesheet after parse (CSP forbids inline onload handlers). CSS custom properties, theme overrides, resets, and above-the-fold component styles (header, hero) live in critical.css, which loads render-blocking in . =================================================================== */ /* Extra theme-toggle state not covered by critical.css */ #theme-toggle-btn[aria-pressed='true'] { background: rgba(255,255,255,0.04); } /* Extend transition to below-the-fold elements (critical.css covers html, body, .sv-header) */ .sv-footer, .sv-section, .ref-card { transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease; } /* Sections */ .sv-section { padding: 56px 0; border-top: 1px solid #1f2530; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 60%); } .sv-section h2 { margin: 0 0 12px; font-size: 28px; } .sv-section p { margin: 0; color: var(--muted); max-width: 72ch; } /* Logo Bar — social proof strip */ .logo-bar { padding: 40px 0; border-top: 1px solid #1f2530; } .logo-bar-heading { text-align: center; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 28px; } .logo-bar-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px 48px; } .logo-bar-item img { height: 64px; width: auto; object-fit: contain; opacity: 0.55; filter: grayscale(100%) invert(1) brightness(1.2); transition: opacity 0.2s ease, filter 0.2s ease; } .logo-bar-item img:hover { opacity: 1; filter: grayscale(0%); } @media (prefers-color-scheme: light) { .logo-bar-item img { filter: grayscale(100%) brightness(0.3); opacity: 0.5; } .logo-bar-item img:hover { filter: grayscale(0%) brightness(1); opacity: 1; } } /* Featured Case Studies — compact cards on homepage */ .featured-studies { padding: 0 0 56px; } .featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .featured-card { display: flex; flex-direction: column; padding: 28px 24px; background: var(--panel); border: 1px solid #1f2530; border-radius: var(--radius); text-decoration: none; color: var(--text); transition: transform 0.2s ease, box-shadow 0.2s ease; } .featured-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); text-decoration: none; } .featured-metric { font-size: 20px; font-weight: 700; background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 8px; } .featured-name { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--text); } .featured-outcome { font-size: 14px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; flex: 1; } .featured-cta { font-size: 14px; font-weight: 600; color: var(--brand-2); margin-top: auto; } .featured-all { text-align: center; margin-top: 24px; } .featured-all a { font-size: 15px; font-weight: 600; color: var(--brand-2); } @media (max-width: 900px) { .featured-grid { grid-template-columns: 1fr; } } /* Services section — merged What + How */ .services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; } .services-media { aspect-ratio: 16 / 10; overflow: hidden; } .services-media picture { display: block; height: 100%; } .services-media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius); border: 1px solid #1f2530; } @media (min-width: 901px) { .services-media { aspect-ratio: auto; } } .services-copy > p { margin: 0 0 24px; color: var(--muted); font-size: 16px; } .services-offerings { display: flex; flex-direction: column; gap: 20px; } .offering { display: flex; align-items: flex-start; gap: 14px; } .offering-body { min-width: 0; } .offering h3 { margin: 0 0 4px; font-size: 16px; color: var(--text); } .offering p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; } @media (max-width: 900px) { .services-grid { grid-template-columns: 1fr; } } /* References */ .refs-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0,1fr)); } @media (max-width: 1100px) { .sv-hero .container { grid-template-columns: 1fr; } .refs-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .work-grid { grid-template-columns: 1fr; } .team-grid { grid-template-columns: 1fr; } .method-grid { grid-template-columns: 1fr; } .services-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .refs-grid { grid-template-columns: 1fr; } } .ref-card { padding: 0; background: var(--panel); border: 1px solid #1f2530; border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .ref-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); } .ref-card-header { padding: 24px; display: flex; align-items: center; justify-content: center; min-height: 140px; background: rgba(255,255,255,0.02); border-bottom: 1px solid #1f2530; } .ref-logo { width: auto; max-width: 160px; height: auto; max-height: 90px; object-fit: contain; display: block; } .ref-card-content { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .ref-card-title { font-size: 16px; font-weight: 700; margin: 0; color: var(--text); line-height: 1.3; } .ref-segment { font-size: 13px; color: var(--brand); margin: 0; font-weight: 500; } .ref-engagement { font-size: 13px; color: var(--muted); margin: 0; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); } .ref-challenge, .ref-outcome { font-size: 13px; line-height: 1.5; color: var(--text); margin: 0; } .ref-challenge strong, .ref-outcome strong { color: var(--brand-2); font-weight: 600; } .ref-metrics { list-style: none; padding: 0; margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; } .ref-metrics li { padding-left: 16px; position: relative; } .ref-metrics li:before { content: "→"; position: absolute; left: 0; color: var(--brand); } .ref-cta { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--brand-2); text-decoration: none; margin-top: auto; padding-top: 12px; transition: color 0.2s ease; } .ref-cta:hover { color: var(--brand); text-decoration: none; } /* Make the link fill the card and center the image */ .ref-link { display: block; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .ref-card img, .ref-img { /* Larger, centered logos that preserve their aspect ratio */ width: 70%; height: 70%; object-fit: contain; display: block; filter: none; } .ref-placeholder { width: 70%; height: 70%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.02); border-radius: 6px; color: var(--muted); font-size: 12px; } .ref-name { font-weight: 700; } .ref-tags { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; } /* Post / article styles (apply to markdown pages) */ .post { padding: 48px 24px; background: transparent; color: var(--text); } .post .container { max-width: 820px; padding: 0; } .post h1, .post h2, .post h3 { color: var(--text); margin-top: 1.2em; margin-bottom: 0.4em; } .post h1 { font-size: 36px; } .post { position: relative; } .client-logo { position: absolute; top: 24px; right: 24px; opacity: 0.9; } .client-logo img { max-width: 160px; height: auto; display: block; } .post h2 { font-size: 26px; } .post p { color: var(--muted); line-height: 1.7; font-size: 18px; } .post a { color: var(--brand-2); } .post img { max-width: 100%; border-radius: 10px; border: 1px solid #1f2530; display: block; margin: 18px 0; } .post pre { background: #0b0f14; padding: 12px; border-radius: 8px; overflow: auto; color: #cfe8ff; } .post code { background: rgba(255,255,255,0.03); padding: 2px 6px; border-radius: 6px; } .post blockquote { border-left: 4px solid rgba(107,230,117,0.25); padding: 12px 16px; background: rgba(255,255,255,0.01); color: var(--muted); margin: 18px 0; } .post ul, .post ol { color: var(--muted); margin-left: 1.2em; } .post .meta { color: var(--muted); font-size: 14px; margin-bottom: 12px; } /* Tables (policy pages, case studies) — fixed layout so cells wrap instead of forcing horizontal overflow on narrow screens. */ .post table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 20px 0; font-size: 14px; } .post th, .post td { padding: 10px 12px; text-align: left; vertical-align: top; line-height: 1.5; border: 1px solid rgba(128,140,160,0.25); overflow-wrap: anywhere; word-break: break-word; } .post th { color: var(--text); font-weight: 700; font-size: 13px; background: rgba(128,140,160,0.08); } .post td { color: var(--muted); } .post td code { font-size: 13px; word-break: break-all; } /* Mobile adjustments for case study layout */ @media (max-width: 768px) { .post h1 { padding-top: 80px; /* Make room for the logo above */ font-size: 28px; /* Slightly smaller on mobile */ } .client-logo { top: 12px; right: 12px; } .client-logo img { max-width: 120px; /* Slightly smaller logo on mobile */ } /* Tighten table cells so narrow columns fit short headers ("Duration", "Provider") without breaking mid-word. */ .post th, .post td { padding: 8px 8px; } .post th { font-size: 12px; } } /* Post CTA — end-of-case-study call to action */ .post-cta { margin-top: 48px; padding: 40px 32px; text-align: center; background: var(--panel); border: 1px solid #1f2530; border-radius: var(--radius); } .post-cta h3 { margin: 0 0 8px 0; font-size: 24px; color: var(--text); } .post-cta p { margin: 0 0 18px 0; color: var(--muted); font-size: 16px; } .post-cta .btn { display: inline-block; padding: 12px 18px; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #062b21; font-weight: 700; text-decoration: none; } .post-cta .btn:hover { opacity: 0.9; transform: translateY(-1px); } /* Cookie settings button (privacy page) */ button[data-cookie-settings] { font: inherit; cursor: pointer; padding: 8px 18px; border-radius: 8px; background: transparent; color: var(--text); border: 1px solid rgba(128, 140, 160, .4); } button[data-cookie-settings]:hover { border-color: var(--brand-2); color: var(--brand-2); } /* Contact */ .contact a { font-weight: 700; } .contact .btn { display: inline-block; margin-top: 18px; padding: 12px 18px; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #062b21; font-weight: 700; text-decoration: none; } .contact .btn:hover { opacity: 0.9; transform: translateY(-1px); } /* Footer */ .sv-footer { border-top: 1px solid #1f2530; padding: 32px 0; } .sv-footer .container { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; } .footer-brand { display: flex; gap: 10px; align-items: center; } .footer-brand img { height: 22px; width: auto; } .footer-social { display: flex; gap: 14px; } @media (max-width: 800px) { .sv-footer .container { grid-template-columns: 1fr; } } /* Sticky CTA */ .cta-sticky { display: none; position: fixed; bottom: 24px; right: 24px; z-index: 50; padding: 12px 20px; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #062b21; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 4px 16px rgba(0,0,0,0.3); transform: translateY(80px); transition: transform .3s ease, opacity .3s ease; opacity: 0; } .cta-sticky-visible { display: inline-block; transform: translateY(0); opacity: 1; } /* About Page Styles */ .about-hero { padding-top: 72px; } .about-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; } .about-media { position: relative; } .about-media img { border-radius: var(--radius); width: 100%; aspect-ratio: 1; object-fit: cover; } .about-copy h1 { margin: 0 0 8px 0; font-size: 36px; } .founder-title { color: var(--brand); font-size: 18px; font-weight: 600; margin: 0 0 24px 0; } .bio { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0 0 16px 0; } @media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } } /* Philosophy Section */ .philosophy-content { max-width: 800px; } .philosophy-quote { font-size: 20px; font-style: italic; color: var(--text); border-left: 4px solid var(--brand); padding: 16px 24px; margin: 24px 0; background: rgba(255,255,255,0.02); } .philosophy-content p { color: var(--muted); line-height: 1.7; margin: 16px 0; } /* Experience Timeline */ .experience-timeline { max-width: 800px; position: relative; padding-left: 32px; } .experience-timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--brand), var(--brand-2)); } .timeline-item { position: relative; margin-bottom: 32px; } .timeline-marker { position: absolute; left: -32px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); border: 3px solid var(--brand); } .timeline-content h3 { margin: 0 0 4px 0; font-size: 20px; color: var(--text); } .timeline-role { color: var(--brand-2); font-size: 14px; font-weight: 600; margin: 0 0 12px 0; } .timeline-content p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; } /* Differentiators Grid */ .differentiators-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 32px; } .differentiator-card { background: var(--panel); border: 1px solid #1f2530; border-radius: var(--radius); padding: 24px; flex: 0 1 320px; } .differentiator-card h3 { margin: 0 0 12px 0; font-size: 18px; color: var(--text); } .differentiator-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } /* Results Page Styles */ .results-hero { padding-top: 72px; } .results-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 48px; } .results-hero-content h1 { margin: 0 0 16px 0; font-size: 44px; } .results-subtitle { color: var(--muted); font-size: 18px; margin: 0; } .speaking-banner { text-align: center; } .speaking-banner .results-subtitle { margin: 0 auto; } .results-hero-media { border-radius: var(--radius); overflow: hidden; } .results-hero-media img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid #1f2530; } @media (max-width: 800px) { .results-hero-grid { grid-template-columns: 1fr; text-align: center; } } .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; margin: 48px 0; } .metric-card { background: var(--panel); border: 1px solid #1f2530; border-radius: var(--radius); padding: 32px; text-align: center; } .metric-value { display: block; font-size: 48px; font-weight: 700; background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .metric-label { display: block; color: var(--muted); margin-top: 8px; font-size: 14px; } /* Impact Grid */ .impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; margin-top: 32px; } .impact-card { background: var(--panel); border: 1px solid #1f2530; border-radius: var(--radius); padding: 24px; } .impact-metric { font-size: 32px; font-weight: 700; color: var(--brand); margin-bottom: 8px; } .impact-card h3 { margin: 0 0 12px 0; font-size: 18px; color: var(--text); } .impact-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } /* Methodology Grid */ .methodology-content { max-width: 900px; } .methodology-content > p { color: var(--muted); line-height: 1.7; margin: 0 0 32px 0; } .methodology-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; } .methodology-item h3 { margin: 0 0 8px 0; font-size: 16px; color: var(--text); } .methodology-item p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; } /* Industries Section (on Results page, merged from /industries/) */ .industries-lede { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0; max-width: 68ch; } .industry-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 24px; margin-top: 32px; } .impact-card .industry-cases { margin-top: 20px; } .industry-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 14px; color: var(--brand); background: rgba(107,230,117,0.08); border: 1px solid rgba(107,230,117,0.2); border-radius: 10px; } .industry-icon svg { width: 20px; height: 20px; } /* Accent icon badges (blog cards, service heroes) */ .accent-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; color: var(--brand); background: rgba(107,230,117,0.08); border: 1px solid rgba(107,230,117,0.2); border-radius: 10px; } .accent-icon svg { width: 20px; height: 20px; } .accent-icon-lg { width: 48px; height: 48px; border-radius: 12px; margin-bottom: 14px; } .accent-icon-lg svg { width: 24px; height: 24px; } /* Case-study bridge CTA secondary line */ .post-cta-secondary { margin-top: 14px; color: var(--muted); font-size: 14px; } /* Trellis Pulse Check */ .pulse-form { max-width: 720px; } .pulse-form .btn, .pulse-results .btn { display: inline-block; cursor: pointer; font: inherit; border: 0; margin-top: 8px; padding: 12px 18px; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #062b21; font-weight: 700; text-decoration: none; } .pulse-form .btn:hover, .pulse-results .btn:hover { opacity: 0.9; transform: translateY(-1px); } .pulse-scale input { accent-color: var(--brand); } .pulse-scale-caption { color: var(--muted); font-size: 14px; margin: 0 0 24px; } .pulse-item { border: 1px solid #1f2530; border-radius: var(--radius); background: var(--panel); padding: 20px; margin: 0 0 16px; } .pulse-item legend { font-size: 15px; color: var(--text); line-height: 1.5; padding: 0 6px; } .pulse-item.pulse-missing { border-color: #e6a23c; } .pulse-scale { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; } .pulse-scale label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; cursor: pointer; } #pulse-warning { color: #e6a23c; font-size: 14px; margin: 0 0 16px; } .pulse-results { max-width: 720px; margin-top: 48px; } .pulse-result { border: 1px solid #1f2530; border-left: 4px solid #1f2530; border-radius: var(--radius); background: var(--panel); padding: 16px 20px; margin: 0 0 12px; } .pulse-result[data-band="anchored"] { border-left-color: var(--brand); } .pulse-result[data-band="climbing"] { border-left-color: var(--brand-2); } .pulse-result[data-band="exposed"] { border-left-color: #e6a23c; } .pulse-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pulse-result h3 { margin: 0; font-size: 16px; color: var(--text); } .pulse-chip { font-size: 13px; padding: 4px 10px; border-radius: 6px; border: 1px solid #1f2530; color: var(--text); white-space: nowrap; } .pulse-result[data-band="anchored"] .pulse-chip { background: rgba(107,230,117,0.08); border-color: rgba(107,230,117,0.2); } .pulse-result[data-band="climbing"] .pulse-chip { background: rgba(34,211,238,0.08); border-color: rgba(34,211,238,0.2); } .pulse-result[data-band="exposed"] .pulse-chip { background: rgba(230,162,60,0.08); border-color: rgba(230,162,60,0.3); } .pulse-result.pulse-lowest { box-shadow: 0 0 0 2px rgba(230,162,60,0.3); } .pulse-note { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; } #pulse-lowest-line { color: var(--text); font-size: 15px; line-height: 1.6; margin: 20px 0 0; } .pulse-disclaimer { color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 16px; max-width: 68ch; } .pulse-results .cta-group { margin-top: 24px; } .industry-capabilities { margin-top: 24px; } .industry-capabilities h4 { margin: 0 0 12px 0; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .industry-capabilities ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .industry-capabilities li { font-size: 13px; color: var(--text); background: rgba(107,230,117,0.08); border: 1px solid rgba(107,230,117,0.2); padding: 6px 12px; border-radius: 6px; } /* Contact Page */ .contact-page { padding-top: 72px; } .contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px; align-items: start; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } } .contact-intro h1 { margin: 0 0 16px; font-size: 40px; } .contact-intro > p { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0 0 32px; } .contact-options { display: flex; flex-direction: column; gap: 16px; } .contact-option { padding: 18px 20px; background: var(--panel); border: 1px solid #1f2530; border-radius: var(--radius); } .contact-option strong { display: block; font-size: 12px; font-weight: 700; color: var(--brand-2); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; } .contact-option p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; } .contact-option a { color: var(--brand-2); } /* Contact Form */ .contact-form { display: flex; flex-direction: column; gap: 20px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { font-size: 14px; font-weight: 600; color: var(--text); } .form-group input, .form-group select, .form-group textarea { padding: 12px 14px; background: var(--panel); border: 1px solid #2a3140; border-radius: 8px; color: var(--text); font-size: 15px; font-family: inherit; width: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(107,230,117,0.12); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted); opacity: 0.6; } .form-group textarea { resize: vertical; min-height: 128px; line-height: 1.6; } .form-group select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b8c5d0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; } .form-optional { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 4px; } .form-submit { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .form-submit button.btn { display: inline-block; padding: 12px 24px; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #062b21; font-weight: 700; font-size: 15px; border: none; cursor: pointer; font-family: inherit; transition: opacity 0.2s ease, transform 0.2s ease; } .form-submit button.btn:hover { opacity: 0.9; transform: translateY(-1px); } .form-note { font-size: 12px; color: var(--muted); margin: 0; } .form-note a { color: var(--brand-2); } /* Thank-you page improvements */ .thank-you-page { text-align: center; padding: 80px 24px 64px; min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .thank-you-page h1 { margin: 0 0 12px; font-size: 40px; } .thank-you-page > p { max-width: 520px; margin: 0 auto 32px; color: var(--muted); font-size: 17px; line-height: 1.6; } .thank-you-expect { max-width: 640px; width: 100%; text-align: left; } .thank-you-expect h2 { font-size: 18px; color: var(--muted); font-weight: 500; margin: 0 0 16px; text-align: center; } .thank-you-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 16px; } .thank-you-card { padding: 18px 20px; background: var(--panel); border: 1px solid #1f2530; border-radius: var(--radius); text-align: left; } .thank-you-card strong { display: block; font-size: 13px; font-weight: 700; color: var(--brand-2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .thank-you-card p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; } .thank-you-card a { color: var(--brand-2); } .thank-you-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 32px; } /* Blog Index */ .blog-index-hero { padding-top: 72px; } .blog-index-hero h1 { margin: 0 0 8px; font-size: 44px; } .blog-index-subtitle { color: var(--muted); font-size: 18px; margin: 0; } .blog-index-posts { padding-top: 0; } .blog-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 24px; } .blog-list-item { display: block; } .blog-card { display: flex; flex-direction: row; align-items: flex-start; gap: 20px; padding: 28px 32px; background: var(--panel); border: 1px solid #1f2530; border-radius: var(--radius); text-decoration: none; color: var(--text); transition: transform 0.2s ease, box-shadow 0.2s ease; } .blog-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); text-decoration: none; } .blog-card-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .blog-card-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .blog-card-date { font-size: 13px; color: var(--muted); } .blog-card-tags { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; } .blog-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand); background: rgba(107,230,117,0.08); border: 1px solid rgba(107,230,117,0.2); border-radius: 4px; padding: 2px 8px; } .blog-card-title { font-size: 22px; font-weight: 700; margin: 0; color: var(--text); line-height: 1.3; overflow-wrap: break-word; } .blog-card-desc { font-size: 15px; color: var(--muted); margin: 0; line-height: 1.6; overflow-wrap: break-word; } .blog-card-cta { font-size: 14px; font-weight: 600; color: var(--brand-2); margin-top: 4px; } /* Small phones: tighten blog cards so long titles fit without breaking words */ @media (max-width: 600px) { .blog-card { padding: 24px 22px; } .blog-card-title { font-size: 20px; } } /* Blog Post meta (used in BlogPostLayout) */ .blog-post-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; } .blog-post-date { font-size: 14px; color: var(--muted); } .blog-post-tags { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; } /* Series navigation — links the parts of a multi-part blog series */ .series-nav { margin: 0 0 36px; padding: 18px 22px; background: var(--panel); border: 1px solid rgba(127, 127, 127, 0.18); border-left: 3px solid var(--brand); border-radius: var(--radius); } .series-nav__label { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--brand); } .series-nav__list { list-style: none; margin: 0; padding: 0; counter-reset: series; display: grid; gap: 8px; } .series-nav__list li { counter-increment: series; position: relative; padding-left: 30px; font-size: 15px; line-height: 1.5; color: var(--muted); } .series-nav__list li::before { content: counter(series); position: absolute; left: 0; top: 1px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 12px; font-weight: 700; color: var(--brand-2); border: 1px solid rgba(127, 127, 127, 0.28); border-radius: 50%; } .series-nav__list a { color: var(--text); text-decoration: none; } .series-nav__list a:hover { color: var(--brand-2); text-decoration: underline; } .series-nav__list li[aria-current="true"] { color: var(--text); font-weight: 600; } .series-nav__current-tag { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--brand); } /* ---------- Coaching pages (/coaching/, diagnostic, programs, worksheet) ---------- */ .method-list { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; } .method-item h3 { margin: 0 0 4px; font-size: 17px; color: var(--text); } .method-item p { margin: 0 0 8px; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 72ch; } .method-head { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; } .method-head h3 { margin: 0; } .worked-example { border-left: 4px solid rgba(107, 230, 117, 0.25); padding: 12px 16px; margin: 14px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 72ch; } .cred-bar { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--text); font-weight: 600; font-size: 15px; } .coaching-prose p { margin: 0 0 14px; color: var(--muted); line-height: 1.65; max-width: 72ch; } .coaching-prose h3 { margin: 26px 0 8px; font-size: 18px; color: var(--text); } .coaching-prose ol, .coaching-prose ul { color: var(--muted); line-height: 1.7; padding-left: 22px; max-width: 72ch; margin: 0 0 14px; } .coaching-prose li { margin: 6px 0; } .price-line { font-size: 22px; font-weight: 700; color: var(--brand); margin: 18px 0 6px; } .faq-list { margin-top: 20px; display: flex; flex-direction: column; gap: 20px; } .faq-item h3 { margin: 0 0 6px; font-size: 16px; color: var(--text); } .faq-item p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 72ch; } .gate-form, .report-gate-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; max-width: 560px; } .gate-form input[type="email"], .report-gate-form input[type="email"] { flex: 1 1 240px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(127, 127, 127, 0.28); background: var(--panel); color: var(--text); font-size: 15px; } .gate-form input[type="email"]:focus, .report-gate-form input[type="email"]:focus { outline: 2px solid var(--brand-2); outline-offset: 1px; } /* Honeypot field (spam trap): hidden from humans, tempting to bots */ .gate-hp { display: none !important; } .gate-form button.btn, .report-gate-form button.btn { flex: 0 0 auto; display: inline-block; padding: 12px 24px; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #062b21; font-weight: 700; font-size: 15px; border: none; cursor: pointer; font-family: inherit; transition: opacity 0.2s ease, transform 0.2s ease; } .gate-form button.btn:hover, .report-gate-form button.btn:hover { opacity: 0.9; transform: translateY(-1px); } /* ---------- Homepage Field Notes banner ---------- */ .report-banner-card { position: relative; border: 1px solid rgba(127, 127, 127, 0.28); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: 26px 120px 26px 28px; } .report-card-icon { position: absolute; top: 26px; right: 28px; width: 68px; height: 68px; } @media (max-width: 600px) { .report-banner-card { padding-right: 28px; } .report-card-icon { display: none; } } .report-banner-card h2 { font-size: 24px; } .report-banner-card h2 a { color: var(--text); text-decoration: none; } .report-banner-card h2 a:hover { color: var(--brand-2); } .report-banner-card .report-kicker { margin-bottom: 6px; } .report-banner-card .report-banner-cta { margin-top: 18px; } /* ---------- Report landing pages (/field-notes/*) ---------- */ .report-hero { position: relative; } .report-page-icon { position: absolute; top: 24px; right: 24px; width: 88px; height: 88px; } .report-hero h1 { max-width: calc(100% - 130px); } @media (max-width: 720px) { .report-page-icon { display: none; } .report-hero h1 { max-width: none; } } .report-kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); margin: 0 0 10px; } .report-byline { font-size: 14px; color: var(--muted); margin: 4px 0 22px; } .report-gate-form .form-note { flex-basis: 100%; } .report-gate-error { flex-basis: 100%; margin: 0; color: #e5484d; font-size: 14px; } .report-gate-done { margin-top: 16px; } .report-gate-done p { color: var(--text); max-width: 72ch; line-height: 1.6; } .report-gate-done a { color: var(--brand-2); } /* Worksheet (print-friendly one-pager) */ .worksheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; } .worksheet-box { border: 1px solid rgba(127, 127, 127, 0.28); border-radius: var(--radius); padding: 16px 18px 96px; } .worksheet-box h3 { margin: 0 0 10px; font-size: 14px; color: var(--brand); text-transform: uppercase; letter-spacing: 0.06em; } .worksheet-box p { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.5; } .worksheet-rule { margin-top: 22px; font-size: 15px; color: var(--text); max-width: 72ch; line-height: 1.6; } .worksheet-footer { margin-top: 18px; font-size: 13px; color: var(--muted); max-width: 72ch; } @media (max-width: 720px) { .worksheet-grid { grid-template-columns: 1fr; } } @media print { .sv-header, .sv-footer, #sticky-cta, .no-print, #theme-toggle-btn { display: none !important; } .sv-section { padding: 0; border: none; background: none; } body { background: #ffffff; color: #111111; } .worksheet-box { min-height: 220px; } } /* Trellis diagnostic (/trellis/diagnostic). Type, numbers, whitespace only; band colors validated for CVD separation and contrast on both surfaces. */ :root { --band-anchored: #3a8551; --band-climbing: #bb8c38; --band-exposed: #a04a3e; } @media (prefers-color-scheme: light) { :root { --band-anchored: #1f7a40; --band-climbing: #ac7f26; --band-exposed: #9c3f30; } } .band-anchored { background: var(--band-anchored); } .band-climbing { background: var(--band-climbing); } .band-exposed { background: var(--band-exposed); } .trellis-landing-cta { margin-top: 24px; } .trellis-landing-cta .btn { display: inline-block; padding: 12px 18px; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #062b21; font-weight: 700; text-decoration: none; } .trellis-landing-cta .btn:hover { opacity: 0.9; transform: translateY(-1px); } .trellis-dims { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 36px; margin: 24px 0 0; } .trellis-dims-item dt { margin: 0 0 4px; font-weight: 600; color: var(--text); font-size: 16px; } .trellis-dims-item dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; } @media (max-width: 720px) { .trellis-dims { grid-template-columns: 1fr; } } .trellis-instrument .container { max-width: 760px; } .trellis-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--brand); letter-spacing: 0.1em; text-transform: uppercase; } .trellis-instrument h1 { margin: 0 0 4px; font-size: 32px; color: var(--text); } .trellis-progress { margin: 0 0 32px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; } .trellis-screen h2 { margin: 0 0 20px; font-size: 22px; color: var(--text); } .trellis-screen h2:focus { outline: none; } .trellis-instrument :focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; } .trellis-item { margin: 0 0 26px; padding: 0; border: none; } .trellis-item legend { padding: 0; margin: 0 0 12px; font-size: 17px; line-height: 1.55; color: var(--text); } .likert { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; } .likert-opt { position: relative; display: block; } .likert-opt input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .likert-opt span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 8px 6px; font-size: 13px; line-height: 1.3; color: var(--muted); border: 1px solid rgba(127, 127, 127, 0.35); border-radius: 4px; cursor: pointer; } .likert-opt input:checked + span { color: var(--text); border-color: var(--brand); font-weight: 600; background: rgba(127, 127, 127, 0.12); box-shadow: inset 0 0 0 1px var(--brand); } .likert-opt input:focus-visible + span { outline: 2px solid var(--brand-2); outline-offset: 2px; } .trellis-open { display: block; margin: 4px 0 8px; } .trellis-open-label { display: block; margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--text); } .trellis-open-label em { display: block; margin-top: 4px; font-style: normal; font-size: 13px; color: var(--muted); } .trellis-open textarea, .trellis-fields input { width: 100%; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--text); background: transparent; border: 1px solid rgba(127, 127, 127, 0.35); border-radius: 4px; } .trellis-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; } .trellis-nav .btn { margin-left: auto; } .trellis-back { padding: 10px 4px; font: inherit; font-size: 15px; color: var(--muted); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .trellis-back:hover { color: var(--text); } .trellis-screen-error { margin: 16px 0 0; color: #e5484d; font-size: 14px; } @media (prefers-color-scheme: light) { .trellis-screen-error { color: #b3261e; } } .trellis-fields { display: grid; gap: 16px; max-width: 420px; } .trellis-fields label, .trellis-consent { font-size: 14px; color: var(--muted); } .trellis-fields input { margin-top: 6px; display: block; } .trellis-consent { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; max-width: 56ch; line-height: 1.5; } .trellis-consent input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--brand); } .trellis-final > p { margin: 0 0 24px; } .trellis-loading p { margin: 32px 0; font-size: 16px; color: var(--text); } .trellis-results h2 { margin: 8px 0 4px; font-size: 26px; line-height: 1.3; color: var(--text); } .trellis-results h2:focus { outline: none; } .trellis-emailed { margin: 0 0 32px; font-size: 14px; color: var(--muted); } .trellis-plot { position: relative; } .trellis-rule { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(127, 127, 127, 0.45); z-index: 2; } .trellis-row { position: relative; z-index: 1; margin: 0 0 18px; } .trellis-row-head { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 6px; font-size: 14px; } .trellis-row-dim { color: var(--text); font-weight: 600; } .trellis-row-val { color: var(--muted); font-variant-numeric: tabular-nums; } .trellis-track { height: 14px; background: rgba(127, 127, 127, 0.14); border-radius: 0 4px 4px 0; } .trellis-bar { height: 100%; width: 0; border-radius: 0 4px 4px 0; transition: width 600ms ease; } @media (prefers-reduced-motion: reduce) { .trellis-bar { transition: none; } } .trellis-axis { position: relative; height: 20px; margin-top: 2px; } .trellis-axis span { position: absolute; transform: translateX(-50%); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .trellis-axis span:first-child { transform: none; } .trellis-axis span:last-child { transform: translateX(-100%); } .trellis-bands-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px 0 0; font-size: 13px; color: var(--muted); } .trellis-key-item { display: inline-flex; align-items: center; gap: 7px; } .trellis-chip { width: 10px; height: 10px; border-radius: 2px; flex: none; } .trellis-overview { margin: 36px 0 0; } .trellis-overview p, .trellis-dim-report p { margin: 0 0 16px; color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 72ch; } .trellis-dim-report { margin: 36px 0 0; } .trellis-dim-report h3 { margin: 0 0 14px; font-size: 18px; color: var(--text); } .trellis-dim-report .trellis-row { max-width: 560px; } .trellis-priority { margin: 44px 0 0; padding: 22px 24px; border-left: 3px solid var(--brand); background: rgba(127, 127, 127, 0.08); } .trellis-priority h3 { margin: 0 0 10px; font-size: 14px; color: var(--brand); text-transform: uppercase; letter-spacing: 0.06em; } .trellis-priority p { margin: 0; color: var(--text); font-size: 16px; line-height: 1.7; max-width: 72ch; } .trellis-cta { margin: 44px 0 0; padding-top: 28px; border-top: 1px solid rgba(127, 127, 127, 0.28); } .trellis-cta p { margin: 0 0 18px; color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 72ch; } @media (max-width: 620px) { .likert { grid-template-columns: 1fr; } .likert-opt span { min-height: 44px; justify-content: flex-start; text-align: left; padding: 8px 12px; } }