/* The Red Giant — homepage styles Built 19 Aug 2026 from the approved Claude Design mock (memory/project/red-giant-decisions/design-mock-2026-08-19/). Palette and tokens from the Rufus Curnow design system. */ /* Self-hosted fonts: the same woff2 subsets the live site serves (final-build step of the 19 Aug fonts decision; done 20 Aug). */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/source-serif-4-var-latin.woff2') format('woff2'); } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('/fonts/source-serif-4-italic-var-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/inter-var-latin.woff2') format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/space-grotesk-var-latin.woff2') format('woff2'); } :root { --rc-rust: #8C2F1E; --rc-rust-dark: #732818; --rc-clay: #C65A3A; --rc-terracotta: #E2A07B; --rc-sand: #FAF4EA; --rc-sand-line: #EFE7D9; --rc-charcoal: #2E2E2E; --rc-stone: #D9D2C7; --rc-white: #FFFFFF; --rc-ink-1: #3a3a3a; --rc-ink-2: #4a4a4a; --rc-ink-3: #5a5a5a; --rc-ink-muted: #6b645a; --rc-max-width: 1140px; --rc-radius-sm: 4px; --rc-radius-md: 6px; --rc-ease: cubic-bezier(0.4, 0, 0.2, 1); --rc-dur: 220ms; /* Fonts: DECIDED 19 Aug 2026 (Rufus, option A) — Source Serif 4 display, Inter body, Space Grotesk labels/stats. */ --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-label: 'Space Grotesk', 'Inter', sans-serif; } /* ---------- Design variant: alternating sand/white bands ---------- Toggled via data-design="bands" on (preview toggle, bottom right). Flat (default) = every section on sand, hairline borders between. Bands = alternate white bands like rufuscurnow.com. */ [data-design="bands"] .band-white { background: var(--rc-white); } [data-design="bands"] .band-white .card, [data-design="bands"] .band-white .quote-grid blockquote { border-color: var(--rc-stone); box-shadow: 0 1px 3px rgba(46, 46, 46, 0.05); } [data-design="bands"] .section-bordered { border-top: none; } [data-design="bands"] .stats-band { border-top: none; border-bottom: none; } [data-design="bands"] .cta { padding-top: 5rem; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; color: var(--rc-charcoal); background: var(--rc-sand); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; } a { color: var(--rc-rust); } a:hover { color: var(--rc-clay); } :focus-visible { outline: 3px solid var(--rc-rust); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--rc-rust); color: var(--rc-white); font-family: var(--font-body); font-size: 15px; font-weight: 500; padding: 12px 20px; border-radius: 0 0 4px 0; } .skip-link:focus { left: 0; color: var(--rc-white); } .container { max-width: var(--rc-max-width); margin: 0 auto; padding: 0 1.5rem; } /* ---------- Nav ---------- */ .site-nav { position: sticky; top: 0; z-index: 50; background: rgba(250, 244, 234, 0.92); border-bottom: 1px solid var(--rc-stone); backdrop-filter: blur(6px); transition: box-shadow var(--rc-dur) var(--rc-ease); } .site-nav.scrolled { box-shadow: 0 2px 8px rgba(46, 46, 46, 0.06); } .nav-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--rc-charcoal); } .brand img { display: block; border-radius: 999px; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .wordmark { font-family: var(--font-label); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.01em; color: var(--rc-charcoal); } .byline { font-family: var(--font-body); font-size: 12px; color: var(--rc-ink-muted); } .nav-links { display: flex; align-items: center; gap: 1.75rem; font-family: var(--font-body); font-size: 15px; } .nav-links a:not(.btn) { color: var(--rc-charcoal); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: color var(--rc-dur) var(--rc-ease), border-color var(--rc-dur) var(--rc-ease); } .nav-links a:not(.btn):hover { color: var(--rc-rust); border-bottom-color: var(--rc-rust); } .nav-links .btn { padding: 0.55rem 1.2rem; font-size: 14px; } .nav-toggle { display: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 15px; font-weight: 500; padding: 0.75rem 1.75rem; border-radius: var(--rc-radius-sm); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; line-height: 1; transition: background-color var(--rc-dur) var(--rc-ease), border-color var(--rc-dur) var(--rc-ease), color var(--rc-dur) var(--rc-ease); } .btn-primary { background: var(--rc-rust); color: var(--rc-white); border-color: var(--rc-rust); } .btn-primary:hover { background: var(--rc-rust-dark); border-color: var(--rc-rust-dark); color: var(--rc-white); } .btn-outline { background: transparent; color: var(--rc-charcoal); border-color: var(--rc-stone); } .btn-outline:hover { border-color: var(--rc-rust); color: var(--rc-rust); } .btn-lg { font-size: 16px; padding: 0.9rem 2rem; } /* ---------- Hero ---------- */ .hero { padding: 1.75rem 0 1rem; background-color: var(--rc-sand); background-image: linear-gradient(var(--rc-sand-line) 1px, transparent 1px), linear-gradient(90deg, var(--rc-sand-line) 1px, transparent 1px); background-size: 58px 58px; } .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: center; } .hero-copy { text-align: center; position: relative; } .hero h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; color: var(--rc-charcoal); margin: 0 0 1.5rem; } .hero-line-1 { display: block; font-size: clamp(3rem, 8vw, 6.75rem); line-height: 1.05; letter-spacing: -0.02em; } .hero-line-2 { display: block; margin-top: 0.4em; font-size: clamp(1.9rem, 3.5vw, 3.5rem); line-height: 1.1; color: var(--rc-clay); letter-spacing: -0.02em; } .hero-underline { position: relative; white-space: nowrap; display: inline-block; } .hero-underline svg { position: absolute; left: 0; right: 0; bottom: -18px; width: 100%; height: 27px; overflow: visible; } .hero-strands { display: flex; align-items: center; justify-content: center; gap: 0.9rem; font-family: var(--font-body); font-size: 20px; font-weight: 600; letter-spacing: 0.02em; color: var(--rc-charcoal); margin-top: 1.75rem; flex-wrap: wrap; } .hero-strands .dot { color: var(--rc-clay); font-size: 10px; } .hero-cta { margin-top: 2.25rem; } .hero-figure { position: relative; justify-self: center; width: 100%; max-width: 290px; } .hero-figure img { display: block; width: 100%; max-width: 300px; margin: 0 auto; } /* ---------- Sections ---------- */ .section { padding: 5rem 0; } .section-tight { padding: 4rem 0 5rem; } .section-bordered { border-top: 1px solid var(--rc-stone); } h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.25rem); color: var(--rc-charcoal); margin: 0; text-wrap: pretty; } h3 { text-wrap: pretty; } .divider { border: 0; width: 3rem; height: 2px; background: var(--rc-terracotta); margin: 1.25rem 0 1.75rem; } /* Services section: intro paragraph left, outcomes bullets right (Rufus, 19 Aug) */ .services-intro-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: start; margin-top: 2rem; } .outcomes-box { background: var(--rc-sand); border: 1px solid var(--rc-sand-line); border-radius: var(--rc-radius-md); padding: 1.6rem 1.9rem; transform: rotate(-1.5deg); box-shadow: 0 2px 10px rgba(46, 46, 46, 0.07); } .outcomes-list { margin: 0; padding-left: 0; list-style: none; font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--rc-ink-1); display: flex; flex-direction: column; gap: 0.5rem; } .outcomes-list li { position: relative; padding-left: 1.6rem; } .outcomes-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--rc-clay); font-weight: 700; } /* Stats */ .stats-band { border-top: 1px solid var(--rc-stone); border-bottom: 1px solid var(--rc-stone); padding: 2.75rem 0; } .stats-grid { max-width: var(--rc-max-width); margin: 0 auto; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; } .stats-grid > div { margin: 0; } .stats-grid > div + div { border-left: 1px solid var(--rc-stone); } .stat-value { margin: 0; font-family: var(--font-label); font-weight: 700; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; color: var(--rc-rust); letter-spacing: -0.02em; } .stat-label { font-family: var(--font-body); font-size: 15px; color: var(--rc-ink-2); margin-top: 0.5rem; } /* Beyond the tools */ .beyond-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 3rem; align-items: center; } .beyond-grid ul { margin: 0; padding-left: 1.1rem; font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--rc-ink-1); display: flex; flex-direction: column; gap: 0.5rem; } .beyond-grid img { width: 100%; max-width: 520px; justify-self: center; border-radius: var(--rc-radius-md); mix-blend-mode: multiply; } /* 4 Rs — one row at full width (Rufus, 19 Aug), stacking at narrower widths */ .rs-heading { font-size: clamp(1.5rem, 2.5vw, 1.9rem); } .rs-grid { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .card { background: var(--rc-white); border: 1px solid var(--rc-stone); border-radius: var(--rc-radius-md); padding: 1.75rem; transition: border-color var(--rc-dur) var(--rc-ease), transform var(--rc-dur) var(--rc-ease); } .card:hover { border-color: var(--rc-terracotta); transform: translateY(-2px); } .r-card { margin: 0; position: relative; } .r-card svg { display: block; position: absolute; top: 1.75rem; right: 1.75rem; width: 33px; height: 33px; } .r-card h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--rc-clay); text-transform: uppercase; margin: 0 0 0.35rem; } .r-card p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--rc-ink-2); margin: 0; } /* Services page hero */ .page-hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; align-items: center; } .page-hero-figure img { display: block; width: 100%; max-width: 400px; margin-left: auto; } /* Training tabs (services) */ .svc-grid.svc-align-top { align-items: start; } .svc-tabs { margin-top: 0; background: var(--rc-sand); border: 1px solid var(--rc-stone); border-radius: var(--rc-radius-md); padding: 1.5rem 1.5rem 1.75rem; } .tabs-heading { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--rc-charcoal); margin: 0 0 1rem; } .tab-row { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tab-row + .tab-row { margin-top: 0.5rem; } .tab-bar [role="tab"] { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--rc-ink-1); background: var(--rc-white); border: 1px solid var(--rc-stone); border-radius: 999px; padding: 0.35rem 0.85rem; cursor: pointer; transition: color var(--rc-dur) var(--rc-ease), border-color var(--rc-dur) var(--rc-ease), background-color var(--rc-dur) var(--rc-ease); } .tab-bar [role="tab"]:hover { border-color: var(--rc-terracotta); color: var(--rc-rust); } .tab-bar [role="tab"][aria-selected="true"] { background: var(--rc-rust); border-color: var(--rc-rust); color: #fff; } .tab-panel { padding-top: 1.25rem; } .tab-panel > p { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--rc-ink-1); margin: 0 0 0.75rem; } .partners-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2rem; } .partner-card { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; } .partner-card img { display: block; height: 60px; width: auto; } .partner-card p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--rc-ink-2); margin: 0; } .services-merge { margin-top: 2rem; } .wid-intro { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--rc-ink-1); margin: 0; max-width: 62ch; } .wid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2rem; } .wid-grid svg { display: block; margin-bottom: 0.85rem; } .wid-grid h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--rc-charcoal); margin: 0 0 0.75rem; } .wid-grid p { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--rc-ink-2); margin: 0; } /* Testimonials */ .quote-carousel { position: relative; margin-top: 2rem; } .quote-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc(50% - 0.75rem); gap: 1.5rem; align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.75rem 2px 1rem; scrollbar-width: none; } .quote-grid::-webkit-scrollbar { display: none; } .quote-grid blockquote { scroll-snap-align: start; } .quote-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: var(--rc-white); border: 1px solid var(--rc-stone); color: var(--rc-rust); font-size: 1.1rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px rgba(46, 46, 46, 0.10); transition: background-color var(--rc-dur) var(--rc-ease), color var(--rc-dur) var(--rc-ease); } .quote-nav:hover { background: var(--rc-rust); color: var(--rc-white); } .quote-prev { left: -18px; } .quote-next { right: -18px; } .quote-grid blockquote { margin: 0; background: var(--rc-sand); border: 1px solid var(--rc-stone); border-radius: var(--rc-radius-md); padding: 2rem; } .quote-grid blockquote:nth-child(1) { transform: rotate(-0.6deg); } .quote-grid blockquote:nth-child(2) { transform: rotate(0.7deg) translateY(10px); } .quote-grid blockquote:nth-child(3) { transform: rotate(-0.5deg); } .quote-grid blockquote:nth-child(4) { transform: rotate(0.6deg) translateY(6px); } .quote-mark { display: block; font-family: var(--font-display); font-size: 3rem; line-height: 0.6; color: var(--rc-terracotta); margin-bottom: 0.75rem; } .quote-grid p { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--rc-charcoal); margin: 0; } .quote-grid cite { display: block; margin-top: 1rem; font-family: var(--font-body); font-style: normal; font-size: 14px; color: var(--rc-ink-3); } /* About */ .about-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 0 3.5rem; align-items: center; grid-template-areas: "intro image" "career image"; } .about-intro { grid-area: intro; } .about-career { grid-area: career; } .about-image { grid-area: image; position: relative; justify-self: center; width: 100%; max-width: 380px; } .about-grid img { display: block; width: 100%; max-width: 360px; margin: 0 auto; mix-blend-mode: multiply; } .about-copy p { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--rc-ink-1); margin: 0; } .about-copy .career-lede { margin: 2.75rem 0 1rem; } .about-copy ul.career { margin: 0; padding-left: 1.1rem; font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--rc-ink-1); display: flex; flex-direction: column; gap: 0.5rem; } .why-box { position: relative; margin-top: 2.75rem; background: var(--rc-white); border: 2px dashed var(--rc-clay); border-radius: var(--rc-radius-md); padding: 2rem 2.25rem; transform: rotate(-1.2deg); overflow: hidden; max-width: 34rem; margin-left: auto; margin-right: auto; } .why-box .spark { position: absolute; right: -34px; bottom: -34px; width: 150px; height: 150px; } .why-box h3 { font-family: var(--font-label); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rc-rust); margin: 0 0 1.1rem; } .why-box ul { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 0.85rem; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.45; color: var(--rc-charcoal); } .why-box .dash { color: var(--rc-terracotta); } /* Closing CTA */ .cta { padding: 0 0 6rem; } .cta-white { background: var(--rc-white); padding-top: 5rem; } .cta-inner { max-width: 820px; margin: 0 auto; padding: 0 1.5rem; text-align: center; } .cta h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin: 0 0 1rem; } .cta p { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--rc-ink-1); margin: 0 0 2rem; text-wrap: balance; } .cta-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } /* Footer */ .site-footer { border-top: 1px solid var(--rc-stone); padding: 2.5rem 0; } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .footer-brand { display: flex; align-items: center; gap: 0.75rem; } .footer-brand .wordmark { font-size: 1.05rem; } .footer-links { display: flex; gap: 1.5rem; font-family: var(--font-body); font-size: 14px; } .footer-links a { color: var(--rc-ink-muted); text-decoration: none; border-bottom: 1px solid transparent; } .footer-links a:hover { color: var(--rc-rust); border-bottom-color: var(--rc-rust); } .footer-legal { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rc-sand-line); } .trading-line { font-family: var(--font-body); font-size: 14px; color: var(--rc-ink-muted); margin: 0; } [data-design="bands"] .footer-legal { border-top-color: var(--rc-stone); } /* ---------- Inner pages ---------- */ .page-header { padding: 3.5rem 0 2.5rem; background-color: var(--rc-sand); background-image: linear-gradient(var(--rc-sand-line) 1px, transparent 1px), linear-gradient(90deg, var(--rc-sand-line) 1px, transparent 1px); background-size: 58px 58px; } .page-header h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.1; color: var(--rc-charcoal); margin: 0; } /* Writing page */ .writing-intro-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: start; } .writing-intro p { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--rc-ink-1); margin: 0 0 1.25rem; } .writing-intro p:last-child { margin-bottom: 0; } .subscribe-inline { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem; } .latest-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-decoration: none; color: inherit; } .latest-card .article-card-label { display: block; background: var(--rc-rust); color: var(--rc-white); font-family: var(--font-label); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; padding: 0.4rem 1.5rem; } .latest-card img { width: 100%; aspect-ratio: 1200 / 675; object-fit: cover; display: block; } .article-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .article-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; color: inherit; text-decoration: none; } .article-card img { width: 100%; aspect-ratio: 1200 / 675; object-fit: cover; display: block; } .article-card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; } .article-topic { align-self: flex-start; font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--rc-rust); background: var(--rc-sand); border: 1px solid var(--rc-stone); border-radius: 999px; padding: 0.1rem 0.6rem; } .article-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--rc-charcoal); margin: 0; } .article-card p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--rc-ink-2); margin: 0; } .article-date { font-family: var(--font-body); font-size: 13px; color: var(--rc-ink-muted); margin-top: auto; } .arrow-link { font-family: var(--font-body); font-size: 15px; font-weight: 500; } /* Article pages */ .article-col { max-width: 820px; margin-left: auto; margin-right: auto; } .article-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .article-header h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; margin-top: 0.75rem; text-wrap: pretty; } .article-header .article-meta { font-family: var(--font-body); font-size: 14px; color: var(--rc-ink-3); margin: 0; display: flex; align-items: center; gap: 0.75rem; } .article-hero-image img { width: 100%; height: auto; border-radius: var(--rc-radius-md); display: block; } .article-body { font-family: var(--font-body); font-size: 17px; line-height: 1.75; color: var(--rc-ink-1); margin-top: 2rem; } .article-body p { margin: 0 0 1.4rem; } .article-body h2 { font-size: clamp(1.4rem, 2.5vw, 1.75rem); margin: 2.5rem 0 1rem; } .article-body h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--rc-charcoal); margin: 2rem 0 0.75rem; } .article-body ul, .article-body ol { margin: 0 0 1.4rem; padding-left: 1.3rem; } .article-body li { margin-bottom: 0.5rem; } .article-body a { color: var(--rc-rust); } .article-body img { max-width: 100%; height: auto; border-radius: var(--rc-radius-sm); } .article-body figure { margin: 2rem 0; } .article-body figcaption { font-size: 14px; color: var(--rc-ink-3); margin-top: 0.6rem; } .article-body blockquote { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.5; color: var(--rc-charcoal); border-left: 2px solid var(--rc-rust); margin: 2rem 0; padding: 0.25rem 0 0.25rem 1.25rem; } .article-body pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; line-height: 1.65; color: var(--rc-charcoal); background: var(--rc-sand); border: 1px solid var(--rc-stone); border-radius: var(--rc-radius-sm); padding: 1rem 1.25rem; margin: 0 0 1.5rem; white-space: pre-wrap; overflow-wrap: anywhere; } .article-body hr { border: 0; height: 1px; background: var(--rc-stone); margin: 2.5rem 0; } .article-back { margin-top: 3rem; font-family: var(--font-body); font-size: 15px; } [data-design="bands"] .article-reading { background: var(--rc-white); } /* Speaking page */ .speaking-hero h1 em { font-style: italic; color: var(--rc-clay); } .topics-list { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; max-width: 62ch; } .topics-list li { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--rc-ink-1); border-top: 2px solid var(--rc-terracotta); padding-top: 1rem; } .topics-list strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--rc-charcoal); display: block; margin-bottom: 0.2rem; } .speak-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } .svc-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; align-items: center; margin-top: 2rem; } .svc-copy p { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--rc-ink-1); margin: 0 0 1.25rem; } .svc-copy p:last-child { margin-bottom: 0; } .svc-covers-lede { margin-top: 2rem; } .svc-list { margin: 0; padding-left: 1.1rem; font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--rc-ink-1); display: flex; flex-direction: column; gap: 0.5rem; } .svc-price { font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--rc-charcoal); margin: 2rem 0 0; padding-top: 1rem; border-top: 2px solid var(--rc-terracotta); } .svc-price span { font-weight: 400; color: var(--rc-ink-2); } .svc-figure img { display: block; width: 100%; mix-blend-mode: multiply; } .speak-panel { background: var(--rc-white); border: 1px solid var(--rc-stone); border-radius: var(--rc-radius-sm); padding: 2.25rem 2rem; } .speak-panel .panel-heading { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--rc-charcoal); margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--rc-charcoal); } .speak-panel ul { list-style: none; margin: 0; padding: 0; } .speak-panel li { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--rc-ink-2); padding: 0.75rem 0; border-bottom: 1px solid var(--rc-stone); } .speak-panel li:last-child { border-bottom: none; padding-bottom: 0; } .speak-panel li strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--rc-charcoal); display: block; margin-bottom: 0.15rem; } .talks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; } .talk-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; } .talk-card-body { padding: 1.5rem 1.75rem 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; } .talk-card h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--rc-charcoal); margin: 0; text-wrap: pretty; } .talk-card p { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--rc-ink-2); margin: 0; } .talk-card blockquote { margin: 0.25rem 0 0; border-left: 2px solid var(--rc-terracotta); padding-left: 1rem; } .talk-card blockquote p { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--rc-charcoal); } .talk-card cite { display: block; margin-top: 0.5rem; font-family: var(--font-body); font-style: normal; font-size: 13px; color: var(--rc-ink-3); } .photo-placeholder { aspect-ratio: 3 / 2; background: #E7E1D7; border-bottom: 1px solid var(--rc-stone); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 14px; letter-spacing: 0.04em; color: var(--rc-ink-muted); } .talk-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-bottom: 1px solid var(--rc-stone); } .copy-placeholder { color: #9a6a2f; background: #FBF3E2; border: 1px dashed #D9B98A; border-radius: 3px; padding: 0.1rem 0.4rem; font-size: 0.9em; } .bio-block { background: var(--rc-white); border: 1px solid var(--rc-stone); border-radius: var(--rc-radius-md); padding: 1.75rem 2rem; margin-top: 1.5rem; } .bio-block p { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--rc-ink-1); margin: 0; } .bio-label { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--rc-ink-3); margin: 0 0 0.5rem; } @media (max-width: 760px) { .talks-grid { grid-template-columns: 1fr; } } /* Contact page */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; } .contact-intro p { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--rc-ink-1); margin: 0 0 1.25rem; } .contact-email { font-family: var(--font-body); font-size: 16px; color: var(--rc-ink-1); } .contact-section { background: var(--rc-white); } .contact-form-card { background: var(--rc-sand); border: 1px solid var(--rc-stone); border-radius: var(--rc-radius-sm); padding: 2.5rem; } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--rc-charcoal); margin-bottom: 0.4rem; } .form-group input, .form-group textarea { width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--rc-charcoal); background: var(--rc-white); border: 1px solid var(--rc-stone); border-radius: var(--rc-radius-sm); padding: 0.7rem 0.9rem; } .form-group textarea { min-height: 140px; resize: vertical; } .form-group input:focus, .form-group textarea:focus { outline: 2px solid var(--rc-rust); outline-offset: 1px; } .thank-you { display: none; font-family: var(--font-body); font-size: 17px; color: var(--rc-ink-1); background: var(--rc-white); border: 1px solid var(--rc-terracotta); border-radius: var(--rc-radius-md); padding: 1.5rem; } .thank-you.visible { display: block; } @media (max-width: 900px) { .writing-intro-grid { grid-template-columns: 1fr; } .article-list { grid-template-columns: 1fr 1fr; } .contact-grid { grid-template-columns: 1fr; } .speak-cols { grid-template-columns: 1fr; gap: 3rem; } .svc-grid { grid-template-columns: 1fr; gap: 2.5rem; } } @media (max-width: 640px) { .article-list { grid-template-columns: 1fr; } } /* ---------- Scroll reveal ---------- */ .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--rc-ease), transform 600ms var(--rc-ease); } .js .reveal.in { opacity: 1; transform: none; } .js .quote-grid blockquote.reveal.in:nth-child(1) { transform: rotate(-0.6deg); } .js .quote-grid blockquote.reveal.in:nth-child(2) { transform: rotate(0.7deg) translateY(10px); } .js .quote-grid blockquote.reveal.in:nth-child(3) { transform: rotate(-0.5deg); } .js .quote-grid blockquote.reveal.in:nth-child(4) { transform: rotate(0.6deg) translateY(6px); } .js .quote-grid blockquote.reveal.in { transition: opacity 600ms var(--rc-ease), transform 250ms var(--rc-ease), box-shadow 250ms var(--rc-ease); } .js .quote-grid blockquote.reveal.in:nth-child(1):hover { transform: rotate(-0.6deg) translateY(-6px); } .js .quote-grid blockquote.reveal.in:nth-child(2):hover { transform: rotate(0.7deg) translateY(4px); } .js .quote-grid blockquote.reveal.in:nth-child(3):hover { transform: rotate(-0.5deg) translateY(-6px); } .js .quote-grid blockquote.reveal.in:nth-child(4):hover { transform: rotate(0.6deg) translateY(0); } .quote-grid blockquote:hover { box-shadow: 0 8px 20px rgba(46, 46, 46, 0.10); } .js .why-box.reveal.in { transform: rotate(-1.2deg); } .js .outcomes-box.reveal.in { transform: rotate(-1.5deg); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 2rem; } .hero-figure { max-width: 220px; } .services-intro-grid { grid-template-columns: 1fr; gap: 1.5rem; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } .stats-grid > div + div { border-left: none; } .beyond-grid { grid-template-columns: 1fr; } .rs-grid { grid-template-columns: 1fr 1fr; } .wid-grid { grid-template-columns: 1fr; } .page-hero-grid { grid-template-columns: 1fr; gap: 2rem; } .page-hero-figure img { max-width: 280px; margin-left: 0; } .partners-grid { grid-template-columns: 1fr; } .quote-grid { grid-auto-columns: 88%; } .quote-nav { display: none; } .about-grid { grid-template-columns: 1fr; grid-template-areas: none; gap: 2.5rem; } .about-intro, .about-image, .about-career { grid-area: auto; } .about-career .career-lede { margin-top: 0; } } @media (max-width: 760px) { .nav-toggle { display: block; background: none; border: none; cursor: pointer; padding: 0.5rem; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--rc-charcoal); margin: 5px 0; transition: transform var(--rc-dur) var(--rc-ease), opacity var(--rc-dur) var(--rc-ease); } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--rc-sand); border-bottom: 1px solid var(--rc-stone); padding: 0.5rem 1.5rem 1rem; } .nav-links.open { display: flex; } .nav-links a { padding: 0.75rem 0; } .nav-links .btn { margin-top: 0.5rem; } } /* ---------- Reduced motion ---------- */ @media (max-width: 560px) { .rs-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } .js .reveal { opacity: 1; transform: none; } }