/* Landing-page hero only. Requires tokens-parchment.css (loaded first) and the .ag-parchment body class. Replaces assets/css/home.css's hero/reveal-stage/ particle rules — .section-divider/.features*/.how*/.cta-band* below the hero are untouched and still come from home.css. */ @property --flame-op { syntax:''; inherits:false; initial-value:0; } .ag-parchment{ overflow-x:hidden } /* The fixed nav (lib/partials/nav.php, styled by site.css) sits on top of the hero. Re-theme it per chapter via a plain descendant selector on — landing-intro.js sets body[data-chapter] — rather than editing nav.php/site.css. */ .ag-parchment .site-nav{ background:transparent!important; backdrop-filter:none!important; border-bottom-color:transparent!important; transition:border-color var(--dur-slow) linear; } /* site.css sets the nav to the display serif (Cinzel) everywhere else; on this page it's swapped for the plain UI sans — persistent chrome read on every visit should prioritise legibility over the display face's flourish. */ .ag-parchment .nav-logo,.ag-parchment .nav-links a,.ag-parchment .nav-actions a, .ag-parchment .nav-user,.ag-parchment .nav-logout{ font-family:var(--font-ui); } .ag-parchment[data-chapter="0"] .nav-logo,.ag-parchment[data-chapter="1"] .nav-logo, .ag-parchment[data-chapter="0"] .nav-links a,.ag-parchment[data-chapter="1"] .nav-links a, .ag-parchment[data-chapter="0"] .nav-actions a:not(.nav-cta),.ag-parchment[data-chapter="1"] .nav-actions a:not(.nav-cta), .ag-parchment[data-chapter="0"] .nav-user,.ag-parchment[data-chapter="1"] .nav-user, .ag-parchment[data-chapter="0"] .nav-logout,.ag-parchment[data-chapter="1"] .nav-logout{ color:var(--gold-300);transition:color var(--dur-slow) linear; } .ag-parchment[data-chapter="2"] .site-nav{ border-bottom-color:var(--border-hairline)!important } /* The mobile shell over the night hero. Without these the name is #1C1A14 on #17130D — 1.08:1, which is not dim, it is absent. */ .ag-parchment[data-chapter="0"] .nav-me-name,.ag-parchment[data-chapter="1"] .nav-me-name{ color:var(--gold-300) } .ag-parchment[data-chapter="0"] .nav-me-meta,.ag-parchment[data-chapter="1"] .nav-me-meta{ color:var(--parchment-400) } .ag-parchment[data-chapter="0"] .nav-me-crest,.ag-parchment[data-chapter="1"] .nav-me-crest{ border-color:var(--gold-500);color:var(--gold-300);background:rgba(184,134,11,0.14); } .ag-parchment[data-chapter="0"] .nav-more,.ag-parchment[data-chapter="1"] .nav-more{ border-color:rgba(184,134,11,0.42);color:var(--gold-300); } .ag-parchment[data-chapter="2"] .nav-me-name{ color:var(--text-strong) } .ag-parchment[data-chapter="2"] .nav-me-meta{ color:var(--text-muted) } .ag-parchment[data-chapter="2"] .nav-logo{ color:var(--text-accent) } .ag-parchment[data-chapter="2"] .nav-links a,.ag-parchment[data-chapter="2"] .nav-actions a:not(.nav-cta), .ag-parchment[data-chapter="2"] .nav-user,.ag-parchment[data-chapter="2"] .nav-logout{ color:var(--text-muted) } .ag-parchment .nav-cta{ background:var(--accent-primary);color:var(--text-on-accent);border-color:var(--accent-primary) } .ag-parchment .nav-cta:hover{ background:var(--accent-primary-hover) } /* --- Hero shell --- */ .ag-hero{ position:relative;width:100%;height:100dvh;min-height:520px;overflow:hidden; background:var(--night-900); transition:background 1200ms linear; cursor:pointer; } .ag-parchment[data-chapter="2"] .ag-hero{ background:var(--surface-page) } .ag-hero-bg{ position:absolute;inset:0;z-index:1;pointer-events:none; background:var(--night-900); opacity:1;transition:opacity 1200ms var(--ease-out),background 900ms linear; } .ag-parchment[data-chapter="1"] .ag-hero-bg{ background:#0E0B07 } .ag-parchment[data-chapter="2"] .ag-hero-bg{ background:radial-gradient(ellipse 95% 60% at 50% 116%,rgba(166,50,31,0.20) 0%,rgba(184,134,11,0.13) 45%,transparent 76%),var(--surface-page); opacity:0; } .ag-flame-halo,.ag-flame-core{ position:absolute;left:50%;z-index:1;pointer-events:none;transform-origin:50% 100%; transition:width 2200ms var(--ease-out) 200ms,height 2200ms var(--ease-out) 200ms, opacity 2200ms var(--ease-out) 200ms,background-image 900ms linear; } .ag-flame-halo{ bottom:-14%;width:clamp(180px,34vw,420px);height:clamp(110px,22vh,240px);filter:blur(14px); background-image:radial-gradient(ellipse 50% 50% at 50% 100%,rgba(214,110,40,0.34) 0%,rgba(166,50,31,0.24) 38%,transparent 72%); --flame-op:0.28;opacity:var(--flame-op); animation:ag-flame-flicker-slow 7s ease-in-out infinite; } .ag-flame-core{ bottom:-6%;width:clamp(90px,16vw,190px);height:clamp(70px,12vh,130px);filter:blur(7px); background-image:radial-gradient(ellipse 46% 52% at 50% 100%,rgba(255,196,110,0.72) 0%,rgba(230,120,44,0.44) 32%,rgba(166,50,31,0.22) 58%,transparent 78%); --flame-op:0.4;opacity:var(--flame-op); animation:ag-flame-flicker 4.6s ease-in-out infinite; } .ag-parchment[data-chapter="1"] .ag-flame-halo{ width:clamp(320px,62vw,760px);height:clamp(200px,42vh,440px);--flame-op:0.95;animation-duration:5.2s } .ag-parchment[data-chapter="1"] .ag-flame-core{ width:clamp(150px,26vw,320px);height:clamp(130px,24vh,250px);--flame-op:1;animation-duration:3.1s } .ag-parchment[data-chapter="2"] .ag-flame-halo{ width:clamp(320px,62vw,760px);height:clamp(200px,42vh,440px);--flame-op:0.7;animation-duration:5.2s; background-image:radial-gradient(ellipse 50% 50% at 50% 100%,rgba(184,134,11,0.20) 0%,rgba(166,50,31,0.12) 40%,transparent 74%); } .ag-parchment[data-chapter="2"] .ag-flame-core{ width:clamp(190px,32vw,400px);height:clamp(160px,28vh,300px);--flame-op:1;animation-duration:3.6s; background-image:radial-gradient(ellipse 46% 52% at 50% 100%,rgba(255,206,132,0.42) 0%,rgba(200,120,50,0.22) 34%,rgba(166,50,31,0.10) 60%,transparent 80%); } @keyframes ag-flame-flicker{ 0%{transform:translateX(-50%) scaleY(1) scaleX(1);opacity:calc(var(--flame-op) * .82)} 22%{transform:translateX(-50%) scaleY(1.09) scaleX(.97);opacity:var(--flame-op)} 46%{transform:translateX(-50%) scaleY(.97) scaleX(1.03);opacity:calc(var(--flame-op) * .88)} 68%{transform:translateX(-50%) scaleY(1.06) scaleX(.99);opacity:calc(var(--flame-op) * .97)} 100%{transform:translateX(-50%) scaleY(1) scaleX(1);opacity:calc(var(--flame-op) * .82)} } @keyframes ag-flame-flicker-slow{ 0%{transform:translateX(-50%) scaleY(1);opacity:calc(var(--flame-op) * .66)} 35%{transform:translateX(-50%) scaleY(1.12);opacity:var(--flame-op)} 70%{transform:translateX(-50%) scaleY(.95);opacity:calc(var(--flame-op) * .75)} 100%{transform:translateX(-50%) scaleY(1);opacity:calc(var(--flame-op) * .66)} } /* --- Embers --- */ .ag-embers{ position:absolute;inset:0;z-index:1;pointer-events:none } .ag-ember{ position:absolute;bottom:2%;border-radius:999px; background:rgba(184,134,11,0.85);box-shadow:0 0 6px rgba(255,170,80,0.55);filter:blur(0.3px); animation-name:ag-ember-rise;animation-timing-function:linear;animation-iteration-count:infinite; } .ag-ember:nth-child(3n){ background:rgba(255,196,110,0.95) } .ag-parchment[data-chapter="2"] .ag-ember{ background:rgba(184,134,11,0.45);box-shadow:none } .ag-parchment[data-chapter="2"] .ag-ember:nth-child(3n){ background:rgba(214,130,44,0.55) } @keyframes ag-ember-rise{ 0%{opacity:0;transform:translate3d(0,0,0) scale(1)} 12%{opacity:1} 62%{opacity:.75} 100%{opacity:0;transform:translate3d(var(--dx,10px),calc(-1 * var(--dy,42vh)),0) scale(.4)} } /* --- Chapter content --- */ .ag-hero-body{ position:absolute;inset:0;z-index:2;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:var(--space-8); /* Symmetric top/bottom padding (rather than nav-height on top only) so the centered content's true vertical middle lands on the viewport's, instead of being pushed down by half the nav's height. */ padding:var(--nav-height) var(--gutter-page);text-align:center; } /* display:flex only applies to the un-hidden panel — an unconditional `display` on .ag-chapter would beat the browser's [hidden]{display:none} default (author rules always win over UA rules, regardless of specificity), leaving every panel stacked in the flex column at once. With three panels all present (just opacity:0 for the inactive ones), the visible one's position among them depends on its DOM order, so each chapter rendered further down the centered stack than the last. */ .ag-chapter:not([hidden]){ display:flex;flex-direction:column;align-items:center;gap:var(--space-6); max-width:600px;opacity:0;transform:translateY(8px); transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out); } .ag-chapter.is-visible{ opacity:1;transform:none } .ag-hero-glyph{ opacity:.6;color:var(--gold-500);font-size:26px;line-height:1 } .ag-parchment[data-chapter="0"] .ag-section-label,.ag-parchment[data-chapter="1"] .ag-section-label{ color:var(--gold-300) } .ag-hero-title{ margin:0;font-family:'Cinzel',serif;font-weight:500; font-size:clamp(30px,6.2vw,64px);line-height:1.08;letter-spacing:var(--track-title); color:#E8CC80;text-wrap:pretty; } .ag-parchment[data-chapter="2"] .ag-hero-title{ color:var(--text-strong) } .ag-hero-rule{ width:48px;height:1px;background:var(--gold-500);opacity:.5 } .ag-hero-flavour{ margin:0;font:var(--type-flavour);font-size:var(--fs-lg);color:#9A8A64;max-width:44ch } .ag-parchment[data-chapter="2"] .ag-hero-flavour{ color:var(--text-muted) } .ag-hero-cta{ margin-top:var(--space-6);width:min(100%,320px) } .ag-hero-nav{ position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:16px; } .ag-hero-pips{ display:flex;align-items:center;gap:8px } .ag-parchment[data-chapter="0"] .ag-pip,.ag-parchment[data-chapter="1"] .ag-pip{ border-color:rgba(184,134,11,0.30) } .ag-hero-arrow{ border:1px solid var(--border-default);background:transparent;border-radius:var(--radius-sm); width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center; color:var(--gold-500);font-size:14px;line-height:1;cursor:pointer; transition:border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard); } .ag-hero-arrow:hover{ border-color:var(--gold-500) } .ag-parchment[data-chapter="0"] .ag-hero-arrow,.ag-parchment[data-chapter="1"] .ag-hero-arrow{ border-color:rgba(184,134,11,0.30) } .ag-parchment[data-chapter="2"] .ag-hero-arrow{ color:var(--text-accent) } @media(max-width:560px){ .ag-hero-title{ font-size:26px } }