/* AI Angels page: QA Correction Pass 4 C1 — light champagne/cream theme from rendered live site. Scoped under .page-ai-angels. Activates with . */ /* ---- Token alignment (light champagne overrides) ---- */ .page-ai-angels { background: var(--bg, #FAF3E4); color: var(--cream, #1F1612); } .page-ai-angels .container { width: min(var(--max, 1320px), calc(100% - var(--pad-x-tight, 24px) * 2)); margin: 0 auto; } .page-ai-angels main { background: var(--bg, #FAF3E4); } /* ---- Buttons (production light pattern) ---- */ .page-ai-angels .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 16px 28px; border-radius: 8px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: all .35s var(--ease, cubic-bezier(0.22,0.61,0.36,1)); } .page-ai-angels .btn:hover { transform: translateY(-2px); } .page-ai-angels .btn-primary { background: var(--gold, #9C7B1A); color: #FAF3E4; border: 1px solid var(--gold, #9C7B1A); box-shadow: 0 12px 28px rgba(31,22,18,.12); } .page-ai-angels .btn-primary:hover { background: var(--gold-soft, #C4A23F); border-color: var(--gold-soft, #C4A23F); box-shadow: 0 0 28px rgba(156,123,26,.25); } .page-ai-angels .btn-secondary { background: transparent; color: var(--gold, #9C7B1A); border: 1px solid var(--gold, #9C7B1A); } .page-ai-angels .btn-secondary:hover { background: var(--gold, #9C7B1A); color: #FAF3E4; box-shadow: 0 0 24px rgba(156,123,26,.20); } /* ---- HERO ---- */ .ai-angels-hero { position: relative; overflow: hidden; min-height: 760px; padding: 138px 0 84px; background: #0A0E0F; } .ai-angels-hero__fade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(10,14,15,.90) 0%, rgba(10,14,15,.76) 24%, rgba(10,14,15,.38) 47%, rgba(10,14,15,.08) 68%, rgba(10,14,15,0) 100%), linear-gradient(180deg, rgba(10,14,15,.76) 0%, rgba(10,14,15,.22) 36%, rgba(250,243,228,.88) 100%); } .ai-angels-hero__grid { position: static; min-height: 538px; display: block; } .ai-angels-hero__copy { position: relative; z-index: 3; max-width: 600px; padding-top: 18px; text-align: left; } .ai-angels-hero__visual { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .ai-angels-hero__art { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; } .ai-angels-hero__art::after { display: none; } .ai-angels-hero__art img { display: block; width: 100%; height: 100%; min-height: 760px; object-fit: cover; object-position: center center; } .ai-angels-crumbs { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin-bottom: 24px; color: rgba(245,239,230,.72); font-size: 12px; } .ai-angels-crumbs a { color: rgba(245,239,230,.88); text-decoration: none; } .ai-angels-crumbs a:hover { color: #E8C547; } .ai-angels-eyebrow { margin: 0 0 12px; color: #E8C547; font-size: var(--f-eyebrow, 11px); line-height: 1.2; letter-spacing: .22em; text-transform: uppercase; font-weight: 800; } .ai-angels-hero h1, .ai-angels-intro h2, .ai-angels-section-head h2, .ai-angels-voting h2, .ai-angels-next h2 { font-family: 'Cormorant Garamond', Georgia, serif; margin: 0; color: var(--cream, #1F1612); font-weight: 700; letter-spacing: .01em; } .ai-angels-hero h1 { max-width: 590px; margin: 0; color: #F5EFE6; text-shadow: 0 3px 34px rgba(0,0,0,.56); font-size: clamp(46px, 6.1vw, 82px); line-height: .96; } .ai-angels-lead { max-width: 560px; margin: 22px 0 0; color: rgba(245,239,230,.86); text-shadow: 0 2px 22px rgba(0,0,0,.42); font-size: var(--f-lead, 22px); line-height: 1.55; } .ai-angels-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px; margin-top: 30px; } .ai-angels-hero .btn-primary { box-shadow: 0 10px 34px rgba(0,0,0,.22); } .ai-angels-hero .btn-secondary { color: #F5EFE6; border-color: rgba(245,239,230,.72); background: rgba(10,14,15,.18); backdrop-filter: blur(8px); } .ai-angels-hero .btn-secondary:hover { color: #0A0E0F; background: #F5EFE6; border-color: #F5EFE6; } @media (max-width: 900px) { .ai-angels-hero { min-height: 720px; padding: 126px 0 70px; } .ai-angels-hero__art img { min-height: 720px; object-position: 58% center; } .ai-angels-hero__fade { background: linear-gradient(90deg, rgba(10,14,15,.88) 0%, rgba(10,14,15,.58) 46%, rgba(10,14,15,.14) 100%), linear-gradient(180deg, rgba(10,14,15,.80) 0%, rgba(10,14,15,.22) 42%, rgba(250,243,228,.92) 100%); } .ai-angels-hero__copy { max-width: 520px; } } @media (max-width: 640px) { .ai-angels-hero { min-height: 700px; } .ai-angels-hero__art img { object-position: 64% center; } .ai-angels-hero__copy { max-width: 92%; } .ai-angels-hero h1 { font-size: clamp(38px, 12vw, 58px); } .ai-angels-lead { font-size: 18px; } } /* ---- INTRO ---- */ .ai-angels-intro, .ai-angels-roster, .ai-angels-voting, .ai-angels-next { padding: 120px 0; } .ai-angels-intro { background: var(--surface, #FFFAEC); border-top: 1px solid var(--line, rgba(31,22,18,0.18)); border-bottom: 1px solid var(--line, rgba(31,22,18,0.18)); } .ai-angels-intro__inner { text-align: center; } .ai-angels-intro h2 { font-size: var(--f-h2, clamp(2.2rem,3.6vw,3.2rem)); line-height: 1.08; max-width: 760px; margin: 0 auto; } .ai-angels-intro__lead { max-width: 720px; margin: 18px auto 0; color: var(--cream-dim, #5A4636); font-size: var(--f-body, 17px); line-height: 1.7; } .ai-angels-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; } .ai-angels-lane { padding: 34px 28px; border: 1px solid var(--line, rgba(31,22,18,0.18)); border-radius: 12px; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(156,123,26,.08), transparent 60%), linear-gradient(160deg, var(--surface-2, #F6EBD0), var(--surface, #FFFAEC)); box-shadow: 0 18px 44px rgba(31,22,18,.10); transition: transform .35s var(--ease, cubic-bezier(0.22,0.61,0.36,1)), border-color .35s var(--ease, cubic-bezier(0.22,0.61,0.36,1)), box-shadow .35s var(--ease, cubic-bezier(0.22,0.61,0.36,1)); } .ai-angels-lane:hover { transform: translateY(-4px); border-color: rgba(156,123,26,.42); box-shadow: 0 26px 54px rgba(31,22,18,.16); } .ai-angels-lane h3 { margin: 0 0 10px; color: var(--gold, #9C7B1A); font-size: var(--f-meta, 12px); letter-spacing: .18em; text-transform: uppercase; font-weight: 700; } .ai-angels-lane p { margin: 0; color: var(--cream-dim, #5A4636); font-size: var(--f-body, 17px); line-height: 1.6; } /* ---- ROSTER ---- */ .ai-angels-roster { background: radial-gradient(circle at 20% 0%, rgba(156,123,26,.12), transparent 30%), linear-gradient(180deg, var(--bg, #FAF3E4), var(--surface-2, #F6EBD0)); } .ai-angels-section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; } .ai-angels-section-head h2 { font-size: var(--f-h2, clamp(2.2rem,3.6vw,3.2rem)); line-height: 1.08; } .ai-angels-section-head p { color: var(--cream-dim, #5A4636); margin: 16px 0 0; font-size: var(--f-body, 17px); line-height: 1.7; } .ai-angels-card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; } .ai-angel-card { flex: 1 1 300px; max-width: 360px; min-width: 260px; padding: 28px; border: 1px solid rgba(156,123,26,.28); border-radius: 12px; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(156,123,26,.08), transparent 60%), linear-gradient(160deg, var(--surface, #FFFAEC), var(--surface-2, #F6EBD0)); box-shadow: 0 24px 60px rgba(31,22,18,.12); text-align: center; transition: transform .35s var(--ease, cubic-bezier(0.22,0.61,0.36,1)), border-color .35s var(--ease, cubic-bezier(0.22,0.61,0.36,1)), box-shadow .35s var(--ease, cubic-bezier(0.22,0.61,0.36,1)); } .ai-angel-card:hover { transform: translateY(-4px); border-color: rgba(156,123,26,.48); box-shadow: 0 30px 60px rgba(31,22,18,.18); } .ai-angel-card img { width: 150px; height: 150px; border-radius: 50%; display: block; margin: 0 auto 18px; border: 3px solid rgba(156,123,26,.40); background: var(--surface-2, #F6EBD0); box-shadow: 0 14px 30px rgba(31,22,18,.14); object-fit: cover; } .ai-angel-card h3 { margin: 0 0 9px; color: var(--cream, #1F1612); font-size: 22px; } .ai-angel-card p { margin: 0; color: var(--cream-dim, #5A4636); line-height: 1.62; font-size: 15px; } /* ---- VOTING ---- */ .ai-angels-voting { background: radial-gradient(circle at 50% 0%, rgba(156,123,26,.10), transparent 30%), linear-gradient(180deg, var(--surface-2, #F6EBD0), var(--bg, #FAF3E4)); border-top: 1px solid var(--line, rgba(31,22,18,0.18)); } .ai-angels-voting__inner { text-align: center; } .ai-angels-voting__head { max-width: 760px; margin: 0 auto 38px; } .ai-angels-voting h2 { font-size: var(--f-h2, clamp(2.2rem,3.6vw,3.2rem)); line-height: 1.08; } .ai-angels-voting__head p { color: var(--cream-dim, #5A4636); margin: 16px 0 0; font-size: var(--f-body, 17px); line-height: 1.7; } .ai-angels-vote-panel { max-width: 860px; margin: 0 auto; padding: 32px; border-radius: 12px; border: 1px solid rgba(156,123,26,.28); background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(156,123,26,.08), transparent 60%), linear-gradient(160deg, var(--surface, #FFFAEC), var(--surface-2, #F6EBD0)); box-shadow: 0 24px 60px rgba(31,22,18,.12); text-align: left; } .ai-angels-vote-form fieldset { border: 0; margin: 0; padding: 0; } .ai-angels-vote-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; } .ai-angels-vote-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(156,123,26,.30); background: var(--surface, #FFFAEC); cursor: pointer; transition: background .18s, border-color .18s, box-shadow .18s; } .ai-angels-vote-card:hover { border-color: rgba(156,123,26,.60); background: var(--surface-2, #F6EBD0); } .ai-angels-vote-card input[type="radio"] { width: 18px; height: 18px; accent-color: var(--gold, #9C7B1A); flex-shrink: 0; margin: 0; } .ai-angels-vote-card:has(input:checked) { border-color: var(--gold, #9C7B1A); background: rgba(156,123,26,.14); box-shadow: 0 0 18px rgba(156,123,26,.10); } .vote-card__name { font-weight: 700; color: var(--cream, #1F1612); } .vote-status { margin-bottom: 18px; padding: 14px 16px; border-radius: 8px; font-weight: 700; } .vote-status.is-success { background: rgba(123,156,26,.14); border: 1px solid rgba(123,156,26,.40); color: var(--cream, #1F1612); } .vote-status.is-error { background: rgba(139,42,26,.10); border: 1px solid rgba(139,42,26,.35); color: var(--cream, #1F1612); } .ai-angels-scoreboard { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(156,123,26,.22); } .ai-angels-scoreboard h3 { margin: 0 0 16px; color: var(--cream, #1F1612); font-size: 24px; } .scoreboard-total { margin: 0 0 18px; color: var(--cream-dim, #5A4636); font-size: 15px; } .scoreboard-total strong { color: var(--gold, #9C7B1A); } .scoreboard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .scoreboard-list li { position: relative; display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--surface, #FFFAEC); border: 1px solid var(--line-soft, rgba(31,22,18,0.08)); overflow: hidden; } .scoreboard-bar { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--score, 0) * 100%); background: rgba(156,123,26,.16); pointer-events: none; z-index: 0; transition: width .35s ease; } .scoreboard-rank { position: relative; z-index: 1; color: var(--gold, #9C7B1A); font-weight: 800; } .scoreboard-name { position: relative; z-index: 1; color: var(--cream, #1F1612); font-weight: 600; } .scoreboard-count { position: relative; z-index: 1; color: var(--cream-dim, #5A4636); font-weight: 800; } .scoreboard-note { margin: 18px 0 0; padding: 12px 14px; border-radius: 8px; background: rgba(156,123,26,.10); border: 1px solid rgba(156,123,26,.18); color: var(--cream-dim, #5A4636); font-size: 13px; line-height: 1.5; } /* ---- NEXT CTA ---- */ .ai-angels-next { background: radial-gradient(circle at 50% 0%, rgba(156,123,26,.16), transparent 34%), var(--bg, #FAF3E4); } .ai-angels-next__box { text-align: center; max-width: 860px; } .ai-angels-next p { color: var(--cream-dim, #5A4636); margin: 18px auto 28px; max-width: 760px; font-size: var(--f-body, 17px); line-height: 1.7; } /* ---- ABOUT PAGE CALLOUT (light theme) ---- */ .about-ai-angels-callout { margin: 0; padding: 54px 0; background: var(--surface, #FFFAEC); color: var(--cream, #1F1612); } .about-ai-angels-callout__box { width: min(1060px, calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 28px; border-radius: 12px; border: 1px solid rgba(156,123,26,.28); background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(156,123,26,.08), transparent 60%), linear-gradient(160deg, var(--surface, #FFFAEC), var(--surface-2, #F6EBD0)); } .about-ai-angels-callout h2 { margin: 0 0 10px; font-family: 'Cormorant Garamond', Georgia, serif; color: var(--cream, #1F1612); font-size: var(--f-h2, clamp(2.2rem,3.6vw,3.2rem)); } .about-ai-angels-callout p { margin: 0; color: var(--cream-dim, #5A4636); line-height: 1.65; } .about-ai-angels-callout a { display: inline-flex; align-items: center; justify-content: center; padding: 16px 28px; border-radius: 8px; background: var(--gold, #9C7B1A); color: #FAF3E4; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; transition: all .35s var(--ease, cubic-bezier(0.22,0.61,0.36,1)); } .about-ai-angels-callout a:hover { background: var(--gold-soft, #C4A23F); box-shadow: 0 0 28px rgba(156,123,26,.22); } .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; } @media (max-width: 980px) { .ai-angels-hero__grid { grid-template-columns: 1fr; gap: 34px; } .ai-angels-hero { min-height: auto; padding-top: 126px; } .ai-angels-lanes { grid-template-columns: 1fr; } .ai-angels-vote-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-ai-angels-callout__box { grid-template-columns: 1fr; text-align: center; } } @media (max-width: 640px) { .page-ai-angels .container { width: min(100% - 28px, 1320px); } .ai-angels-hero { padding: 116px 0 64px; } .ai-angels-hero h1 { font-size: clamp(38px, 12vw, 54px); } .ai-angels-card-grid { gap: 16px; } .ai-angel-card { flex: 1 1 100%; max-width: 100%; min-width: 100%; padding: 24px; } .ai-angel-card img { width: 120px; height: 120px; } .ai-angels-intro, .ai-angels-roster, .ai-angels-voting, .ai-angels-next { padding: 84px 0; } .ai-angels-vote-options { grid-template-columns: 1fr; } .ai-angels-vote-panel { padding: 22px; } } /* 2026-06-29: force supplied Angels image to behave like the normal site hero, not a floating panel. */ .ai-angels-hero { position: relative; overflow: hidden; } .ai-angels-hero .container.ai-angels-hero__grid { position: static; } .ai-angels-hero__visual { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .ai-angels-hero__art { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; } .ai-angels-hero__art img { width: 100%; height: 100%; min-height: 760px; object-fit: cover; object-position: center center; } .ai-angels-hero__copy { position: relative; z-index: 3; } .ai-angels-hero__fade { z-index: 1; } /* 2026-06-29 John correction: supplied hero is already light with dark nav top. Remove agent-added shading/fog, use champagne-theme dark text, and stop pushing Becky down/right. */ .ai-angels-hero { min-height: 760px; padding: 118px 0 70px; background: #FAF3E4; } .ai-angels-hero__fade { display: none !important; } .ai-angels-hero__grid { min-height: 560px; } .ai-angels-hero__copy { position: relative; z-index: 3; max-width: 560px; padding-top: 0; text-align: left; } .ai-angels-hero__art img { min-height: 760px; object-fit: cover; object-position: 44% top; } .ai-angels-crumbs, .ai-angels-crumbs a { color: rgba(31,22,18,.72); text-shadow: none; } .ai-angels-crumbs a:hover { color: #9C7B1A; } .ai-angels-hero .ai-angels-eyebrow { color: #9C7B1A; text-shadow: none; } .ai-angels-hero h1 { color: #1F1612; text-shadow: none; } .ai-angels-hero .ai-angels-lead { color: #5A4636; text-shadow: none; } .ai-angels-hero .btn-secondary { color: #1F1612; border-color: rgba(31,22,18,.40); background: rgba(255,250,236,.52); backdrop-filter: none; } .ai-angels-hero .btn-secondary:hover { color: #FAF3E4; background: #9C7B1A; border-color: #9C7B1A; } @media (max-width: 900px) { .ai-angels-hero { min-height: 720px; padding-top: 112px; } .ai-angels-hero__art img { min-height: 720px; object-position: 52% top; } } @media (max-width: 640px) { .ai-angels-hero { min-height: 690px; padding-top: 104px; } .ai-angels-hero__art img { object-position: 58% top; } } /* 2026-06-29 fold/composition tightening: move hero up, keep above fold, pull Becky left, widen copy without covering her. */ .ai-angels-hero { min-height: 660px; padding: 82px 0 48px; } .ai-angels-hero__grid { min-height: 510px; } .ai-angels-hero__copy { max-width: 660px; padding-top: 0; } .ai-angels-hero h1 { max-width: 650px; font-size: clamp(42px, 5.5vw, 72px); } .ai-angels-hero .ai-angels-lead { max-width: 620px; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.48; } .ai-angels-hero__art img { min-height: 660px; object-position: 36% top; } .ai-angels-actions { margin-top: 24px; } .ai-angels-crumbs { margin-bottom: 16px; } @media (max-width: 900px) { .ai-angels-hero { min-height: 650px; padding-top: 82px; padding-bottom: 44px; } .ai-angels-hero__grid { min-height: 500px; } .ai-angels-hero__art img { min-height: 650px; object-position: 46% top; } .ai-angels-hero__copy { max-width: 600px; } } @media (max-width: 640px) { .ai-angels-hero { min-height: 640px; padding-top: 78px; padding-bottom: 38px; } .ai-angels-hero__grid { min-height: 500px; } .ai-angels-hero__art img { min-height: 640px; object-position: 52% top; } .ai-angels-hero__copy { max-width: 94%; } } /* 2026-06-29 correction: zero padding belongs to the hero image/art layer, not the whole hero section. */ .ai-angels-hero { padding: 82px 0 48px; } .ai-angels-hero__visual, .ai-angels-hero__art { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; margin: 0 !important; padding: 0 !important; } .ai-angels-hero__art img { margin: 0 !important; padding: 0 !important; display: block; object-position: 36% top; } @media (max-width: 900px) { .ai-angels-hero { padding: 82px 0 44px; } .ai-angels-hero__art img { object-position: 46% top; } } @media (max-width: 640px) { .ai-angels-hero { padding: 78px 0 38px; } .ai-angels-hero__art img { object-position: 52% top; } } /* 2026-06-29 John request: bold Angel title lines under names. */ .ai-angel-title, .ai-angel-card .ai-angel-title, .ai-angels-card-grid .ai-angel-title { font-weight: 800 !important; } /* 2026-06-30 John request: bold Angel title lines under names. */ .ai-angel-card__title { font-weight: 800 !important; }