/* Shared styling for the partnership pitch content - used by both the admin "kit" (/admin/collab.html, tabs + export chrome) and the public single-document pages (/partners/*.html, one URL per audience, no chrome). Chrome-specific styles (login gate, tabs, topbar) live in their own pages, not here. */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #0b0d10; --ink: #0b0d10; --panel: #14171c; --panel-line: #262b33; --crimson: #7d1228; --glow: rgba(125, 18, 40, 0.55); --gold: #d4af37; --parchment: #ece4d3; --steel: #8a94a6; --offer-tint: rgba(212, 175, 55, 0.08); --chrome-bg: rgba(11, 13, 16, 0.92); --display: "Bebas Neue", "Segoe UI", sans-serif; --body: "Source Serif 4", Georgia, serif; --mono: "JetBrains Mono", monospace; } /* Light/print-friendly theme - toggled via data-theme="light" on (see partnerTheme.js). Crisp white/near-black, with the brand's crimson (not a darkened gold, which reads muddy/brown on a light background) as the accent. --ink is deliberately left unchanged: it's the dark text placed on top of accent fills in the dark theme, not the page background (that's --bg). */ :root[data-theme="light"] { --bg: #fafaf8; --panel: #ffffff; --panel-line: #e4e0d8; --glow: rgba(157, 20, 40, 0.08); --gold: #a3132a; --parchment: #17181b; --steel: #5c6068; --offer-tint: rgba(163, 19, 42, 0.06); --chrome-bg: rgba(255, 255, 255, 0.92); } body { font-family: var(--body); background: var(--bg); color: var(--parchment); } /* --- Group content --- */ .group-view { display: none; } .group-view.active { display: block; } .hero { position: relative; overflow: hidden; padding: 90px 8vw 70px; border-bottom: 1px solid var(--panel-line); } .hero::before { /* the same red radial-glow treatment used for broken_crown.png on the public portal (amber in light theme) */ content: ""; position: absolute; inset: -20%; background: radial-gradient(var(--glow) 0%, transparent 62%); z-index: 0; } .hero__crown { position: absolute; right: -40px; top: 50%; transform: translateY(-50%) rotate(-6deg); width: min(46vw, 620px); opacity: 0.24; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6)); z-index: 0; pointer-events: none; } :root[data-theme="light"] .hero__crown { opacity: 0.32; } .hero__content { position: relative; z-index: 1; max-width: 640px; } .eyebrow { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .hero h1 { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4.4rem); letter-spacing: 0.01em; line-height: 0.98; color: var(--parchment); } .hero h2 { font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.5rem); letter-spacing: 0.02em; color: var(--gold); margin-top: 10px; } .hero p { font-size: 1.05rem; line-height: 1.6; color: var(--steel); margin-top: 22px; } .hero strong { color: var(--parchment); } /* --- Card grid --- */ .section { padding: 56px 8vw; } .section-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); margin-bottom: 20px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .collab-card { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px; padding: 26px 24px; break-inside: avoid; } .collab-card .icon { font-size: 1.7rem; display: block; margin-bottom: 12px; } .collab-card h3 { font-family: var(--display); font-size: 1.35rem; letter-spacing: 0.02em; color: var(--parchment); margin-bottom: 10px; } .collab-card p, .collab-card li { font-size: 0.95rem; line-height: 1.55; color: var(--steel); } .collab-card ul { margin: 10px 0 0 1.1em; } .collab-card .note { margin-top: 12px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--gold); } /* --- Offer sheet (highlight panel) --- */ .offer-panel { background: linear-gradient(160deg, var(--offer-tint), transparent 60%), var(--panel); border: 1px solid var(--gold); border-radius: 6px; padding: 34px 8vw; margin: 0 8vw; } .offer-panel h2 { font-family: var(--display); font-size: 2rem; letter-spacing: 0.02em; color: var(--gold); margin-bottom: 6px; } .offer-panel > p { color: var(--steel); margin-bottom: 20px; max-width: 60ch; } .offer-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 24px; } .offer-list li { position: relative; padding-left: 22px; font-size: 0.95rem; line-height: 1.5; color: var(--parchment); } .offer-list li::before { content: "\2726"; position: absolute; left: 0; top: 0.05em; color: var(--gold); font-size: 0.85em; } .offer-panel .legacy { margin-top: 22px; font-style: italic; color: var(--steel); max-width: 62ch; } /* --- CTA band --- */ .cta-band { margin: 70px 8vw 90px; text-align: center; padding: 48px 20px; border-top: 1px solid var(--panel-line); border-bottom: 1px solid var(--panel-line); } .cta-band .eyebrow { margin-bottom: 10px; } .cta-band h2 { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: 0.02em; color: var(--parchment); margin-bottom: 22px; } .cta-band a.cta-link { display: inline-block; font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 14px 30px; border-radius: 4px; text-decoration: none; } .cta-band a.cta-link:hover { filter: brightness(1.1); } :root[data-theme="light"] .cta-band a.cta-link { /* light theme's accent is a crimson fill, not a bright gold - needs light text, not the dark --ink used for the gold button in the dark theme */ color: #fdf6ee; } .cta-band .url { display: block; margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--steel); } /* --- Print (follows whichever theme - dark or light - is currently active, via the same CSS vars) --- */ @media print { html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .group-view { display: none !important; } .group-view.active { display: block !important; } /* Each major block gets its own page instead of letting the browser split wherever content happens to overflow - that produces mid-card cuts. */ .hero { padding: 40px 6vw 34px; border-bottom: none; min-height: 100vh; display: flex; align-items: center; break-after: page; } .hero__crown { opacity: 0.2; } .section { padding: 22px 6vw; break-before: page; break-after: page; } .card-grid { grid-template-columns: 1fr; } .offer-panel { margin: 0 6vw; break-before: page; } .collab-card, .offer-panel { break-inside: avoid; } .cta-band { margin: 30px 6vw 0; break-before: page; break-inside: avoid; min-height: 40vh; display: flex; flex-direction: column; justify-content: center; } @page { margin: 0.5in; } }