/* ══════════════════════════════════════════════════════════════════ PROGRAM PAGES — shared layout, three identities game-field.css · used by game-field, return-to-37, alchemy-container ── Identity tokens ── One layout, three voices. Each page names its own on , and every accent below reads from these tokens rather than hardcoding a colour. The hues themselves are defined once in styles.css :root (--gf-a, --r37-a, --alc-a) and shared with the doorway cards on the homepage, so a program's colour is stated in exactly one place. Gold stays the shared spine — the CTA, the brand furniture — which is what keeps the three harmonious rather than merely different. ══════════════════════════════════════════════════════════════════ */ body { --pa: var(--gold-hi); /* the accent */ --pa-hi: var(--gold-bright); /* its highlight */ --pa-deep: var(--gold-lo); /* its shadow, for gradients */ --pa-rgb: 234, 201, 90; /* same accent, for rgba() mixes */ --pa-spin: 0deg; /* hue-rotate applied to gold artwork */ --pa-ground: #141472; /* section ground */ --pa-ground-alt: #0f0f64; /* alternating section ground */ --pa-ground-deep:#0d0d58; /* the darkest band */ } /* THE GAME FIELD — sapphire. Cool, structural, strategic: the board. */ body.prog-gamefield { --pa: var(--gf-a); --pa-hi: var(--gf-a-hi); --pa-deep: var(--gf-a-deep); --pa-rgb: var(--gf-a-rgb); --pa-spin: var(--gf-a-spin); --pa-ground: #101058; --pa-ground-alt: #0C0C4A; --pa-ground-deep:#09093E; } /* RETURN TO 37 — sunrise rose. Warmth returning: dawn, not daylight. */ body.prog-return37 { --pa: var(--r37-a); --pa-hi: var(--r37-a-hi); --pa-deep: var(--r37-a-deep); --pa-rgb: var(--r37-a-rgb); --pa-spin: var(--r37-a-spin); --pa-ground: #151055; --pa-ground-alt: #130C46; --pa-ground-deep:#100939; --pa-hero-op: .12; } /* THE ALCHEMY CONTAINER — amethyst. The crucible: depth, transmutation. */ body.prog-alchemy { --pa: var(--alc-a); --pa-hi: var(--alc-a-hi); --pa-deep: var(--alc-a-deep); --pa-rgb: var(--alc-a-rgb); --pa-spin: var(--alc-a-spin); --pa-ground: #150F52; --pa-ground-alt: #120A44; --pa-ground-deep:#0E0736; } /* ── Back link (fixed, top-left) ── */ .gf-back-fixed { position: fixed; top: 1.4rem; left: 1.6rem; z-index: 1001; display: inline-flex; align-items: center; gap: .5rem; font-size: .52rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.45); text-decoration: none; transition: color .3s, gap .3s; } .gf-back-fixed:hover { color: var(--pa); gap: .75rem; } /* ══ HERO ══ */ .gf-hero { min-height: 100vh; background: var(--deep); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 0 2rem; } .gf-hero-bg { position: absolute; inset: 0; z-index: 0; } .gf-hero-bg img { width: 100%; height: 100%; object-fit: cover; /* per-page: three-paths is a much lighter image than the other two grounds */ opacity: var(--pa-hero-op, .17); filter: saturate(.75) brightness(.8); } /* large spinning symbol — right half */ .gf-sym-hero { width: clamp(320px, 46vw, 580px); right: -2%; top: 50%; transform: translateY(-50%); z-index: 1; opacity: .22; filter: hue-rotate(var(--pa-spin)) saturate(1.3) drop-shadow(0 0 28px rgba(var(--pa-rgb), .45)) drop-shadow(0 0 70px rgba(var(--pa-rgb), .18)); } .gf-hero-content { position: relative; z-index: 2; max-width: 600px; display: flex; flex-direction: column; align-items: flex-start; } .gf-badge { font-size: .52rem; font-weight: 600; letter-spacing: .38em; text-transform: uppercase; color: var(--pa); border: 1px solid rgba(var(--pa-rgb), .35); padding: .4rem 1.2rem; border-radius: 2rem; margin-bottom: 2rem; display: inline-block; } .gf-hero-title { font-family: var(--serif); font-size: clamp(3.6rem, 9vw, 7.5rem); font-weight: 300; line-height: 1.0; color: #fff; margin: 0 0 .5rem; } .gf-hero-title em { font-style: italic; background: linear-gradient(135deg, var(--pa-deep) 0%, var(--pa) 45%, var(--pa-hi) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: goldShimmer 4s ease infinite; display: block; } .gf-hero-line { width: 120px; margin: 1rem 0 !important; } .gf-hero-line.in { width: 120px; } .gf-hero-kicker { font-size: .58rem; font-weight: 400; letter-spacing: .30em; text-transform: uppercase; color: rgba(255,255,255,.40); margin-bottom: 1rem; } .gf-hero-body { font-size: .98rem; line-height: 1.9; color: rgba(255,255,255,.65); font-weight: 300; margin-bottom: 1.8rem; } .gf-hero-body strong { color: #fff; font-weight: 400; } /* ── Scroll indicator ── */ .gf-hero-scroll { position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%); z-index: 2; transition: opacity .4s; } .gf-hero-scroll span { display: block; width: 1px; height: 52px; background: linear-gradient(to bottom, var(--pa), transparent); animation: scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse { 0%,100% { opacity: .3; transform: scaleY(1); } 50% { opacity: .9; transform: scaleY(1.15); } } /* ══ CTA BUTTONS ══ */ .gf-cta-btn { display: inline-flex; align-items: center; gap: .6rem; font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; padding: 1rem 2.6rem; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 38%, var(--gold-lo) 62%, var(--gold-hi) 100%); background-size: 200% auto; color: #141472; border-radius: 2px; transition: background-position .5s, transform .3s, box-shadow .3s; } .gf-cta-btn:hover { background-position: right center; transform: translateY(-2px); box-shadow: 0 12px 40px rgba(var(--pa-rgb), .40); } .gf-cta-btn--lg { padding: 1.2rem 3.4rem; font-size: .65rem; } /* ══ SHARED SECTION ══ */ .gf-section { background: var(--pa-ground); padding: 4.5rem 2rem; position: relative; overflow: hidden; } .gf-section--alt { background: var(--pa-ground-alt); } .gf-section--outcomes { background: var(--pa-ground-deep); padding: 4.5rem 2rem; } /* full-bleed subtle bg image */ .gf-section-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .08; pointer-events: none; filter: saturate(.55); } /* ── Floating symbols ── */ .gf-sym-right { width: clamp(220px, 30vw, 420px); position: absolute; right: -40px; top: 50%; transform: translateY(-50%); opacity: .18; filter: hue-rotate(var(--pa-spin)) saturate(1.3) drop-shadow(0 0 20px rgba(var(--pa-rgb), .35)); pointer-events: none; mix-blend-mode: screen; } .gf-sym-left { width: clamp(200px, 28vw, 380px); position: absolute; left: -40px; top: 50%; transform: translateY(-50%); opacity: .16; filter: hue-rotate(var(--pa-spin)) saturate(1.3) drop-shadow(0 0 20px rgba(var(--pa-rgb), .30)); pointer-events: none; mix-blend-mode: screen; } .gf-sym-center { width: clamp(280px, 50vw, 560px); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: .08; filter: hue-rotate(var(--pa-spin)) saturate(1.3) drop-shadow(0 0 40px rgba(var(--pa-rgb), .50)); pointer-events: none; mix-blend-mode: screen; } /* ── Inner containers ── */ .gf-inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; } .gf-inner--wide { max-width: 1080px; margin: 0 auto; position: relative; z-index: 1; } /* ── Section headings ── */ .gf-h2 { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 300; line-height: 1.15; color: #fff; margin: .4rem 0 0; } .gf-h2 em { font-style: italic; color: var(--pa); } /* ── Body text ── */ .gf-body { font-size: .96rem; line-height: 1.9; color: rgba(255,255,255,.65); font-weight: 300; margin-bottom: 1rem; position: relative; z-index: 1; } .gf-body strong { color: #fff; font-weight: 400; } .gf-body em { font-style: italic; color: var(--pa); } /* ── Pull quote ── */ .gf-pull { border-left: 2px solid var(--pa); padding: 1.1rem 1.6rem; margin: 1.6rem 0; background: rgba(var(--pa-rgb), .06); border-radius: 0 6px 6px 0; position: relative; z-index: 1; } .gf-pull::before { content: '\201C'; font-family: var(--serif); font-size: 5rem; line-height: 1; color: rgba(var(--pa-rgb), .18); position: absolute; top: -.6rem; left: .6rem; pointer-events: none; } .gf-pull p { font-family: var(--serif); font-size: clamp(1.25rem, 2.8vw, 1.85rem); font-weight: 300; font-style: italic; line-height: 1.65; color: rgba(255,255,255,.88); margin: 0; } .gf-pull p em { font-style: italic; color: var(--pa); } /* ══ OUTCOME CARDS ══ */ .gf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-top: 2rem; } .gf-card { border: 1px solid rgba(var(--pa-rgb), .20); border-top: 2px solid var(--pa); padding: 1.6rem 1.6rem 1.4rem; border-radius: 2px; position: relative; overflow: hidden; transition: border-color .4s, transform .4s, box-shadow .4s; animation: goldPulseCard 5s ease-in-out infinite; background: rgba(20,20,114,.55); backdrop-filter: blur(4px); } .gf-card:nth-child(2) { animation-delay: -1.25s; } .gf-card:nth-child(3) { animation-delay: -2.5s; } .gf-card:nth-child(4) { animation-delay: -3.75s; } .gf-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(var(--pa-rgb), .12), transparent 70%); opacity: 0; transition: opacity .4s; } .gf-card:hover { border-color: rgba(var(--pa-rgb), .55); transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,40,.65); } .gf-card:hover::before { opacity: 1; } .gf-card-num { font-family: var(--serif); font-size: 3.2rem; font-weight: 300; line-height: 1; color: rgba(var(--pa-rgb), .22); margin-bottom: .6rem; } .gf-card-sym { width: 52px; height: 52px; object-fit: contain; position: absolute; bottom: 1.2rem; right: 1.2rem; opacity: .24; mix-blend-mode: screen; filter: hue-rotate(var(--pa-spin)) saturate(1.3) drop-shadow(0 0 8px rgba(var(--pa-rgb), .60)); animation: geoSpin 90s linear infinite; } .gf-card h3 { font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--pa); margin-bottom: .8rem; } .gf-card p { font-size: .82rem; line-height: 1.85; color: rgba(255,255,255,.58); font-weight: 300; } /* ══ CHECKLIST ══ */ .gf-checklist { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-direction: column; gap: 0; } .gf-checklist li { display: flex; align-items: flex-start; gap: 1.2rem; font-size: .92rem; line-height: 1.8; color: rgba(255,255,255,.62); font-weight: 300; padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.06); transition: color .3s; } .gf-checklist li:first-child { border-top: 1px solid rgba(255,255,255,.06); } .gf-checklist li:hover { color: rgba(255,255,255,.88); } .gf-checklist li::before { content: '—'; color: var(--pa); font-weight: 400; flex-shrink: 0; margin-top: .05em; } /* ══ INVESTMENT CTA ══ */ .gf-invest { background: var(--pa-ground); padding: 5.5rem 2rem; text-align: center; position: relative; overflow: hidden; } .gf-invest::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, rgba(var(--pa-rgb), .14), transparent 65%); pointer-events: none; } .gf-sym-cta { width: clamp(300px, 55vw, 640px); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: .10; filter: hue-rotate(var(--pa-spin)) saturate(1.3) drop-shadow(0 0 50px rgba(var(--pa-rgb), .55)); pointer-events: none; mix-blend-mode: screen; } .gf-invest-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .gf-invest-title { font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 300; line-height: 1.1; color: #fff; margin: .4rem 0 0; } .gf-invest-title em { font-style: italic; background: linear-gradient(135deg, var(--pa-deep) 0%, var(--pa) 45%, var(--pa-hi) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: goldShimmer 4s ease infinite; display: block; } .gf-invest-body { font-size: .93rem; line-height: 1.9; color: rgba(255,255,255,.55); font-weight: 300; margin-bottom: 1.8rem; } .gf-back-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .52rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.30); text-decoration: none; margin-top: 1.2rem; transition: color .3s; } .gf-back-link:hover { color: var(--pa); } /* ══ FOOTER ══ */ .gf-footer { background: var(--deep); border-top: 1px solid rgba(var(--pa-rgb), .12); padding: 2.4rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .gf-footer-logo { height: 32px; opacity: .55; filter: brightness(1.2); } .gf-footer p { font-size: .52rem; letter-spacing: .2em; color: rgba(255,255,255,.25); text-transform: uppercase; } .gf-footer a { color: var(--pa); text-decoration: none; } .gf-footer a:hover { opacity: .75; } /* ══ RESPONSIVE ══ */ @media (max-width: 768px) { .gf-hero-content { align-items: center; text-align: center; } .gf-hero-body br { display: none; } .gf-sym-hero { opacity: .10; width: 260px; } .gf-section { padding: 3.5rem 1.4rem; } .gf-invest { padding: 4rem 1.4rem; } .gf-cards { grid-template-columns: 1fr; } .gf-pull { padding: 1rem 1.2rem; } .gf-sym-right, .gf-sym-left { display: none; } }