Spaces:
Running
Running
| /* ============================================================================ | |
| FORGE — landing page specific styles. Layered on top of styles.css | |
| ============================================================================ */ | |
| .lp { | |
| min-height: 100vh; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .lp-shell { | |
| max-width: 1180px; | |
| margin: 0 auto; | |
| padding: 0 32px; | |
| } | |
| /* ── Sticky top nav ───────────────────────────────────────────────────── */ | |
| .lp-nav { | |
| position: sticky; top: 0; | |
| z-index: 20; | |
| background: linear-gradient(180deg, rgba(15,10,5,0.92) 0%, rgba(15,10,5,0.75) 100%); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid rgba(212, 164, 68, 0.18); | |
| box-shadow: 0 4px 16px rgba(0,0,0,0.5); | |
| } | |
| .lp-nav-inner { | |
| max-width: 1180px; | |
| margin: 0 auto; | |
| padding: 14px 32px; | |
| display: flex; align-items: center; gap: 24px; | |
| } | |
| .lp-nav .brand { | |
| display: flex; align-items: center; gap: 12px; | |
| } | |
| .lp-nav .brand .mark { | |
| width: 32px; height: 32px; | |
| display: grid; place-items: center; | |
| background: radial-gradient(circle at 50% 65%, #4a1c0a 0%, #0f0805 70%); | |
| border: 1px solid #5a3010; | |
| box-shadow: inset 0 0 12px rgba(255, 106, 31, 0.55), 0 0 10px rgba(255,106,31,0.20); | |
| } | |
| .lp-nav .brand .name { | |
| font-family: var(--f-display); | |
| font-size: 22px; | |
| font-weight: 600; | |
| letter-spacing: 0.18em; | |
| color: #f6e4c8; | |
| text-shadow: 0 1px 0 #000, 0 0 8px rgba(255, 138, 61, 0.25); | |
| } | |
| .lp-nav .links { | |
| margin-left: auto; | |
| display: flex; align-items: center; gap: 24px; | |
| font-family: var(--f-display); | |
| font-size: 11px; | |
| letter-spacing: 0.22em; | |
| text-transform: uppercase; | |
| } | |
| .lp-nav .links a { | |
| color: var(--bone-3); | |
| text-decoration: none; | |
| padding: 6px 0; | |
| border-bottom: 1px solid transparent; | |
| transition: color 160ms ease, border 160ms ease; | |
| } | |
| .lp-nav .links a:hover { color: var(--brass-1); border-bottom-color: var(--brass-1); } | |
| .lp-nav .cta-mini { | |
| font-family: var(--f-display); | |
| font-size: 11px; | |
| letter-spacing: 0.22em; | |
| text-transform: uppercase; | |
| padding: 8px 16px; | |
| color: #fff5e8; | |
| background: linear-gradient(180deg, #ff8a3d 0%, #c46822 100%); | |
| border: 1px solid #6a2a08; | |
| text-decoration: none; | |
| box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 2px 6px rgba(0,0,0,0.5), 0 0 8px var(--ember-glow); | |
| } | |
| .lp-nav .cta-mini:hover { | |
| background: linear-gradient(180deg, #ffba5e 0%, #ff8a3d 100%); | |
| box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 8px rgba(0,0,0,0.6), 0 0 16px var(--ember-1); | |
| } | |
| /* ── Hero ─────────────────────────────────────────────────────────────── */ | |
| .lp-hero { | |
| padding: 90px 0 100px; | |
| position: relative; | |
| display: grid; | |
| grid-template-columns: 1.15fr 1fr; | |
| gap: 60px; | |
| align-items: center; | |
| } | |
| .lp-hero::before { | |
| /* ember bloom under the hero */ | |
| content: ""; | |
| position: absolute; left: 50%; bottom: -40px; | |
| width: 80%; height: 220px; | |
| transform: translateX(-50%); | |
| background: radial-gradient(ellipse at 50% 100%, rgba(255, 106, 31, 0.18), transparent 60%); | |
| pointer-events: none; | |
| } | |
| .lp-eyebrow { | |
| font-family: var(--f-mono); | |
| font-size: 11px; | |
| letter-spacing: 0.30em; | |
| text-transform: uppercase; | |
| color: var(--brass-2); | |
| margin-bottom: 22px; | |
| display: inline-flex; align-items: center; gap: 12px; | |
| } | |
| .lp-eyebrow::before, .lp-eyebrow::after { | |
| content: ""; | |
| display: inline-block; | |
| width: 28px; height: 1px; | |
| background: linear-gradient(90deg, transparent, var(--brass-2)); | |
| } | |
| .lp-eyebrow::after { background: linear-gradient(90deg, var(--brass-2), transparent); } | |
| .lp-title { | |
| font-family: var(--f-display); | |
| font-size: 92px; | |
| font-weight: 600; | |
| line-height: 0.92; | |
| letter-spacing: 0.04em; | |
| color: #f6e4c8; | |
| margin: 0 0 28px; | |
| text-shadow: | |
| 0 1px 0 #000, | |
| 0 2px 0 #000, | |
| 0 0 24px rgba(255, 138, 61, 0.25); | |
| } | |
| .lp-title em { | |
| font-style: normal; | |
| background: linear-gradient(180deg, #ffba5e 0%, #ff6a1f 70%, #8a3010 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| display: inline-block; | |
| } | |
| .lp-subtitle { | |
| font-family: var(--f-serif); | |
| font-style: italic; | |
| font-size: 22px; | |
| line-height: 1.45; | |
| color: var(--bone-2); | |
| margin: 0 0 38px; | |
| max-width: 540px; | |
| letter-spacing: 0.005em; | |
| } | |
| .lp-subtitle strong { | |
| color: var(--brass-1); | |
| font-style: normal; | |
| font-weight: 500; | |
| letter-spacing: 0.02em; | |
| } | |
| .lp-cta-row { | |
| display: flex; align-items: center; gap: 18px; | |
| margin-top: 8px; | |
| } | |
| .lp-cta-primary { | |
| font-family: var(--f-display); | |
| font-size: 13px; | |
| letter-spacing: 0.26em; | |
| text-transform: uppercase; | |
| padding: 16px 28px; | |
| color: #fff5e8; | |
| background: linear-gradient(180deg, #ff8a3d 0%, #c46822 100%); | |
| border: 1px solid #2a1a08; | |
| text-decoration: none; | |
| box-shadow: | |
| inset 0 1px 0 rgba(255,255,255,0.30), | |
| inset 0 -2px 0 rgba(0,0,0,0.30), | |
| 0 4px 14px rgba(0,0,0,0.5), | |
| 0 0 16px var(--ember-glow); | |
| position: relative; | |
| transition: transform 120ms ease, box-shadow 200ms ease; | |
| cursor: pointer; | |
| display: inline-flex; align-items: center; gap: 12px; | |
| } | |
| .lp-cta-primary::before, .lp-cta-primary::after { | |
| content: ""; | |
| position: absolute; top: 50%; transform: translateY(-50%); | |
| width: 6px; height: 6px; | |
| background: #ffba5e; | |
| box-shadow: 0 0 6px #ffba5e; | |
| } | |
| .lp-cta-primary::before { left: -3px; } | |
| .lp-cta-primary::after { right: -3px; } | |
| .lp-cta-primary:hover { | |
| transform: translateY(-1px); | |
| box-shadow: | |
| inset 0 1px 0 rgba(255,255,255,0.40), | |
| inset 0 -2px 0 rgba(0,0,0,0.30), | |
| 0 6px 18px rgba(0,0,0,0.55), | |
| 0 0 28px var(--ember-1); | |
| } | |
| .lp-cta-secondary { | |
| font-family: var(--f-display); | |
| font-size: 12px; | |
| letter-spacing: 0.22em; | |
| text-transform: uppercase; | |
| padding: 16px 22px; | |
| color: var(--bone-2); | |
| background: transparent; | |
| border: 1px solid var(--steel-2); | |
| text-decoration: none; | |
| } | |
| .lp-cta-secondary:hover { color: var(--bone-1); border-color: var(--brass-2); } | |
| /* ── Hero right: floating anvil + mini graph demo ────────────────────── */ | |
| .lp-hero-art { | |
| position: relative; | |
| min-height: 480px; | |
| display: grid; | |
| place-items: center; | |
| } | |
| .lp-hero-art::before { | |
| /* glowing forge ring behind the demo */ | |
| content: ""; | |
| position: absolute; | |
| width: 480px; height: 480px; | |
| border-radius: 50%; | |
| background: | |
| radial-gradient(circle at 50% 60%, rgba(255, 106, 31, 0.18) 0%, transparent 60%); | |
| pointer-events: none; | |
| } | |
| .lp-hero-art::after { | |
| content: ""; | |
| position: absolute; | |
| width: 360px; height: 360px; | |
| border-radius: 50%; | |
| border: 1px dashed rgba(212, 164, 68, 0.18); | |
| animation: gentle-rotate 60s linear infinite; | |
| } | |
| .demo-svg { | |
| position: relative; | |
| width: 460px; height: 460px; | |
| display: block; | |
| } | |
| /* ── Sections ─────────────────────────────────────────────────────────── */ | |
| section.lp-section { padding: 80px 0; position: relative; scroll-margin-top: 80px; } | |
| .lp-section + .lp-section { border-top: 1px solid rgba(212, 164, 68, 0.08); } | |
| .lp-section-head { | |
| text-align: center; | |
| margin-bottom: 56px; | |
| } | |
| .lp-section-eyebrow { | |
| font-family: var(--f-mono); | |
| font-size: 11px; | |
| letter-spacing: 0.30em; | |
| text-transform: uppercase; | |
| color: var(--brass-1); | |
| margin-bottom: 14px; | |
| } | |
| .lp-section-title { | |
| font-family: var(--f-display); | |
| font-size: 44px; | |
| font-weight: 500; | |
| letter-spacing: 0.03em; | |
| color: #f6e4c8; | |
| margin: 0 0 14px; | |
| text-shadow: 0 1px 0 #000; | |
| } | |
| .lp-section-sub { | |
| font-family: var(--f-serif); | |
| font-style: italic; | |
| font-size: 17px; | |
| line-height: 1.5; | |
| color: var(--bone-3); | |
| max-width: 620px; | |
| margin: 0 auto; | |
| } | |
| /* What it does — three carved tablets */ | |
| .lp-tablets { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 24px; | |
| } | |
| .lp-tablet { | |
| position: relative; | |
| padding: 38px 28px 32px; | |
| background: | |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0.30 0 0 0 0 0.22 0 0 0 0 0.12 0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"), | |
| linear-gradient(180deg, rgba(40,30,18,0.45) 0%, rgba(15,12,8,0.85) 100%); | |
| background-blend-mode: overlay, normal; | |
| border: 1px solid rgba(70, 50, 28, 0.7); | |
| border-top: 2px solid var(--brass-2); | |
| box-shadow: | |
| inset 0 1px 0 rgba(255,255,255,0.04), | |
| 0 8px 24px rgba(0,0,0,0.5); | |
| } | |
| .lp-tablet::before, .lp-tablet::after { | |
| /* brass corner ornaments top-left + top-right */ | |
| content: ""; | |
| position: absolute; top: -1px; | |
| width: 8px; height: 8px; | |
| border: 2px solid var(--brass-2); | |
| } | |
| .lp-tablet::before { left: -1px; border-right: none; border-bottom: none; } | |
| .lp-tablet::after { right: -1px; border-left: none; border-bottom: none; } | |
| .lp-tablet-icon { | |
| width: 56px; height: 56px; | |
| margin-bottom: 22px; | |
| display: grid; place-items: center; | |
| border: 1px solid rgba(212, 164, 68, 0.30); | |
| background: | |
| radial-gradient(circle at 50% 35%, rgba(255, 138, 61, 0.18) 0%, rgba(0,0,0,0) 70%), | |
| #0a0805; | |
| color: var(--brass-1); | |
| position: relative; | |
| } | |
| .lp-tablet-icon::before, .lp-tablet-icon::after { | |
| /* corner ornaments */ | |
| content: ""; | |
| position: absolute; | |
| width: 4px; height: 4px; | |
| border: 1px solid var(--brass-2); | |
| } | |
| .lp-tablet-icon::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } | |
| .lp-tablet-icon::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } | |
| .lp-tablet-num { | |
| position: absolute; top: 18px; right: 22px; | |
| font-family: var(--f-display); | |
| font-size: 38px; | |
| font-weight: 600; | |
| color: rgba(212, 164, 68, 0.20); | |
| letter-spacing: 0.02em; | |
| line-height: 1; | |
| } | |
| .lp-tablet h3 { | |
| font-family: var(--f-display); | |
| font-size: 22px; | |
| font-weight: 500; | |
| letter-spacing: 0.02em; | |
| margin: 0 0 12px; | |
| color: #fff5e8; | |
| } | |
| .lp-tablet p { | |
| font-family: var(--f-serif); | |
| font-size: 15px; | |
| line-height: 1.55; | |
| color: var(--bone-2); | |
| margin: 0; | |
| } | |
| .lp-tablet p em { | |
| color: var(--brass-1); | |
| font-style: italic; | |
| } | |
| /* How to use — alternating numbered rows */ | |
| .lp-steps { display: flex; flex-direction: column; gap: 60px; } | |
| .lp-step { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 60px; | |
| align-items: center; | |
| } | |
| .lp-step:nth-child(even) .lp-step-text { order: 2; } | |
| .lp-step:nth-child(even) .lp-step-art { order: 1; } | |
| .lp-step-num { | |
| display: inline-block; | |
| font-family: var(--f-display); | |
| font-size: 13px; | |
| letter-spacing: 0.30em; | |
| text-transform: uppercase; | |
| color: var(--brass-1); | |
| padding-bottom: 8px; | |
| margin-bottom: 14px; | |
| border-bottom: 1px solid var(--brass-2); | |
| } | |
| .lp-step h3 { | |
| font-family: var(--f-display); | |
| font-size: 36px; | |
| font-weight: 500; | |
| letter-spacing: 0.02em; | |
| margin: 0 0 18px; | |
| color: #fff5e8; | |
| line-height: 1.05; | |
| } | |
| .lp-step p { | |
| font-family: var(--f-serif); | |
| font-size: 16.5px; | |
| line-height: 1.6; | |
| color: var(--bone-2); | |
| margin: 0 0 14px; | |
| max-width: 460px; | |
| } | |
| .lp-step .quote { | |
| font-family: var(--f-serif); | |
| font-style: italic; | |
| font-size: 13px; | |
| color: var(--bone-3); | |
| border-left: 2px solid var(--brass-2); | |
| padding-left: 14px; | |
| margin: 18px 0 0; | |
| max-width: 460px; | |
| } | |
| .lp-step-art { | |
| position: relative; | |
| min-height: 320px; | |
| display: grid; place-items: center; | |
| background: | |
| url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.20 0 0 0 0 0.10 0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>"), | |
| linear-gradient(180deg, rgba(20,14,10,0.6) 0%, rgba(8,6,4,0.85) 100%); | |
| background-blend-mode: overlay, normal; | |
| border: 1px solid rgba(60, 42, 22, 0.6); | |
| padding: 32px; | |
| } | |
| /* Tier system explainer */ | |
| .lp-tiers { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 22px; | |
| } | |
| .lp-tier { | |
| padding: 30px 26px; | |
| background: linear-gradient(180deg, rgba(20,14,10,0.5) 0%, rgba(8,6,4,0.8) 100%); | |
| border: 1px solid rgba(60, 42, 22, 0.7); | |
| border-left: 3px solid var(--lp-tier-color, var(--brass-2)); | |
| position: relative; | |
| } | |
| .lp-tier-1 { --lp-tier-color: var(--brass-1); } | |
| .lp-tier-2 { --lp-tier-color: var(--brass-2); } | |
| .lp-tier-3 { --lp-tier-color: var(--brass-3); } | |
| .lp-tier-coin { | |
| width: 48px; height: 48px; | |
| border-radius: 50%; | |
| margin-bottom: 18px; | |
| border: 1px solid rgba(0,0,0,0.5); | |
| box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 3px rgba(0,0,0,0.6); | |
| display: grid; place-items: center; | |
| font-family: var(--f-display); | |
| font-size: 17px; | |
| font-weight: 700; | |
| color: var(--coal-0); | |
| letter-spacing: 0.02em; | |
| } | |
| .lp-tier-1 .lp-tier-coin { background: radial-gradient(circle at 35% 30%, #ffd09a, #ff8a3d 50%, #6a2a08); box-shadow: 0 0 14px var(--tier1-glow), inset 0 1px 0 rgba(255,255,255,0.25); } | |
| .lp-tier-2 .lp-tier-coin { background: radial-gradient(circle at 35% 30%, #b8d4f0, #5b9bd8 50%, #1c3a5a); box-shadow: 0 0 8px var(--tier2-glow), inset 0 1px 0 rgba(255,255,255,0.22); } | |
| .lp-tier-3 .lp-tier-coin { background: radial-gradient(circle at 35% 30%, #cac4b6, #9a9285 50%, #3a3528); box-shadow: 0 0 4px var(--tier3-glow), inset 0 1px 0 rgba(255,255,255,0.18); } | |
| .lp-tier-label { | |
| font-family: var(--f-display); | |
| font-size: 13px; | |
| letter-spacing: 0.24em; | |
| text-transform: uppercase; | |
| color: var(--lp-tier-color); | |
| margin-bottom: 6px; | |
| } | |
| .lp-tier h4 { | |
| font-family: var(--f-display); | |
| font-size: 22px; | |
| font-weight: 500; | |
| margin: 0 0 14px; | |
| color: #fff5e8; | |
| letter-spacing: 0.01em; | |
| } | |
| .lp-tier p { | |
| font-family: var(--f-serif); | |
| font-size: 14.5px; | |
| line-height: 1.55; | |
| color: var(--bone-2); | |
| margin: 0 0 14px; | |
| } | |
| .lp-tier .example { | |
| font-family: var(--f-mono); | |
| font-size: 10.5px; | |
| letter-spacing: 0.02em; | |
| color: var(--bone-4); | |
| padding: 8px 10px; | |
| background: var(--coal-0); | |
| border-left: 2px solid var(--lp-tier-color); | |
| } | |
| /* Scraper / live data section */ | |
| .lp-scraper { | |
| display: grid; | |
| grid-template-columns: 1.1fr 1fr; | |
| gap: 60px; | |
| align-items: center; | |
| } | |
| .lp-scraper p { font-family: var(--f-serif); font-size: 16px; line-height: 1.6; color: var(--bone-2); max-width: 520px; } | |
| .lp-scraper p em { font-style: italic; color: var(--brass-2); } | |
| .lp-pipeline { | |
| display: flex; flex-direction: column; gap: 10px; | |
| padding: 24px; | |
| background: var(--coal-0); | |
| border: 1px solid rgba(60, 42, 22, 0.6); | |
| font-family: var(--f-mono); | |
| font-size: 11.5px; | |
| position: relative; | |
| } | |
| .lp-pipeline::before { | |
| content: "scraper.log"; | |
| position: absolute; top: -10px; left: 16px; | |
| background: var(--coal-0); | |
| padding: 0 8px; | |
| font-family: var(--f-display); | |
| font-size: 10px; | |
| letter-spacing: 0.20em; | |
| text-transform: uppercase; | |
| color: var(--brass-2); | |
| } | |
| .lp-pipeline-step { | |
| display: grid; | |
| grid-template-columns: auto 1fr auto; | |
| gap: 12px; | |
| padding: 8px 0; | |
| border-bottom: 1px solid rgba(60,42,22,0.4); | |
| color: var(--bone-2); | |
| } | |
| .lp-pipeline-step:last-child { border-bottom: none; } | |
| .lp-pipeline-step .arrow { color: var(--ember-2); } | |
| .lp-pipeline-step .src { color: var(--brass-2); } | |
| .lp-pipeline-step .tier { | |
| font-family: var(--f-display); | |
| font-size: 9px; | |
| padding: 1px 5px; | |
| letter-spacing: 0.12em; | |
| color: var(--coal-0); | |
| text-transform: uppercase; | |
| font-weight: 600; | |
| } | |
| .lp-pipeline-step .tier.t1 { background: var(--brass-1); } | |
| .lp-pipeline-step .tier.t2 { background: var(--brass-2); color: #fff; } | |
| .lp-pipeline-step .tier.t3 { background: var(--brass-3); } | |
| /* Final CTA strip */ | |
| .lp-finale { | |
| padding: 120px 0; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .lp-finale::before { | |
| content: ""; | |
| position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); | |
| width: 700px; height: 200px; | |
| background: radial-gradient(ellipse, rgba(255, 106, 31, 0.18) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .lp-finale-title { | |
| font-family: var(--f-display); | |
| font-size: 64px; | |
| font-weight: 500; | |
| letter-spacing: 0.04em; | |
| margin: 0 0 14px; | |
| color: #f6e4c8; | |
| position: relative; | |
| text-shadow: 0 2px 0 #000, 0 0 22px rgba(255, 138, 61, 0.30); | |
| } | |
| .lp-finale-sub { | |
| font-family: var(--f-serif); | |
| font-style: italic; | |
| font-size: 18px; | |
| color: var(--bone-3); | |
| margin: 0 0 38px; | |
| position: relative; | |
| } | |
| .lp-finale .lp-cta-primary { font-size: 14px; padding: 18px 36px; } | |
| .lp-foot { | |
| border-top: 1px solid rgba(212, 164, 68, 0.10); | |
| padding: 28px 0 40px; | |
| text-align: center; | |
| font-family: var(--f-mono); | |
| font-size: 10.5px; | |
| letter-spacing: 0.12em; | |
| color: var(--bone-4); | |
| } | |
| .lp-foot a { color: var(--bone-3); text-decoration: none; border-bottom: 1px dotted var(--bone-4); } | |
| /* ── Hero mini demo: 5 nodes, cyclic state animation ─────────────────── */ | |
| .demo-svg .lp-node { cursor: default; } | |
| .demo-svg .lp-aura { fill: none; stroke: none; opacity: 0; } | |
| .demo-svg .lp-frame-outer { fill: none; stroke: #2a2017; stroke-width: 2.2; } | |
| .demo-svg .lp-plate { fill: var(--coal-2); stroke: rgba(0,0,0,0.5); stroke-width: 1.5; } | |
| .demo-svg .lp-gem { fill: var(--type-color, #5fb3d4); opacity: 0.18; } | |
| .demo-svg .lp-frame { fill: none; stroke: #6b5026; stroke-width: 1.2; } | |
| .demo-svg .lp-stud { fill: #8a6a32; stroke: #2a2017; stroke-width: 0.6; } | |
| .demo-svg .lp-icon { transition: stroke 240ms ease, opacity 240ms ease; opacity: 0.9; } | |
| .demo-svg .lp-ribbon { fill: rgba(11,14,19,0.85); stroke: rgba(107, 80, 38, 0.7); stroke-width: 0.7; } | |
| .demo-svg .lp-name { | |
| fill: var(--bone-1); | |
| font-family: var(--f-display); | |
| font-size: 11.5px; | |
| font-weight: 500; | |
| letter-spacing: 0.04em; | |
| } | |
| .demo-svg .lp-lock { opacity: 0; transition: opacity 320ms ease; } | |
| .demo-svg .lp-chip { opacity: 0; transition: opacity 320ms ease; } | |
| /* type-color slots per node */ | |
| .demo-svg .lp-center { --type-color: var(--t-technique); } | |
| .demo-svg .lp-outer-1 { --type-color: var(--t-technique); } | |
| .demo-svg .lp-outer-2 { --type-color: var(--t-quantization); } | |
| .demo-svg .lp-outer-3 { --type-color: var(--t-technique); } | |
| .demo-svg .lp-outer-4 { --type-color: var(--t-architecture); } | |
| .demo-svg .lp-outer-5 { --type-color: var(--t-technique); } | |
| /* edges: base curves */ | |
| .demo-svg .lp-edge { fill: none; stroke-linecap: round; } | |
| .demo-svg .lp-edge-breaks { stroke: rgba(200,64,60,0.4); stroke-width: 1.4; } | |
| .demo-svg .lp-edge-requires, | |
| .demo-svg .lp-edge-requires-2 { stroke: rgba(255,160,60,0.35); stroke-width: 1.4; } | |
| .demo-svg .lp-edge-compatible, | |
| .demo-svg .lp-edge-compatible-2 { stroke: rgba(212,164,68,0.20); stroke-width: 1.0; } | |
| /* center → selected (red-hot) */ | |
| .demo-svg .lp-center .lp-plate { animation: lp-plate-select 8s ease-in-out infinite; } | |
| .demo-svg .lp-center .lp-frame { animation: lp-frame-select 8s ease-in-out infinite; } | |
| .demo-svg .lp-center .lp-frame-outer { animation: lp-frame-outer-select 8s ease-in-out infinite; } | |
| .demo-svg .lp-center .lp-aura { animation: lp-aura-select 8s ease-in-out infinite; } | |
| .demo-svg .lp-center .lp-stud { animation: lp-stud-select 8s ease-in-out infinite; } | |
| .demo-svg .lp-center .lp-gem { animation: lp-gem-select 8s ease-in-out infinite; } | |
| .demo-svg .lp-center .lp-icon { animation: lp-icon-select 8s ease-in-out infinite; } | |
| .demo-svg .lp-center .lp-name { animation: lp-name-select 8s ease-in-out infinite; } | |
| .demo-svg .lp-center .lp-ribbon { animation: lp-ribbon-select 8s ease-in-out infinite; } | |
| @keyframes lp-plate-select { | |
| 0%, 12%, 92%, 100% { fill: var(--coal-2); filter: none; } | |
| 18%, 86% { fill: url(#lp-molten); filter: url(#lp-ember); } | |
| } | |
| @keyframes lp-frame-select { | |
| 0%, 12%, 92%, 100% { stroke: #6b5026; stroke-width: 1.2; } | |
| 18%, 86% { stroke: #d4a049; stroke-width: 1.5; } | |
| } | |
| @keyframes lp-frame-outer-select { | |
| 0%, 12%, 92%, 100% { stroke: #2a2017; } | |
| 18%, 86% { stroke: #3a1a08; } | |
| } | |
| @keyframes lp-aura-select { | |
| 0%, 12%, 92%, 100% { opacity: 0; stroke: var(--ember-1); stroke-width: 1.5; fill: none; } | |
| 18% { opacity: 1; stroke: var(--ember-1); stroke-width: 2; fill: none; } | |
| 50% { opacity: 0.4; stroke: var(--ember-1); stroke-width: 4; fill: none; } | |
| 86% { opacity: 1; stroke: var(--ember-1); stroke-width: 2; fill: none; } | |
| } | |
| @keyframes lp-stud-select { | |
| 0%, 12%, 92%, 100% { fill: #8a6a32; stroke: #2a2017; } | |
| 18%, 86% { fill: #d4a049; stroke: #3a1a08; } | |
| } | |
| @keyframes lp-gem-select { | |
| 0%, 12%, 92%, 100% { fill: var(--type-color); opacity: 0.18; } | |
| 18%, 86% { fill: var(--ember-1); opacity: 0.55; } | |
| } | |
| @keyframes lp-icon-select { | |
| 0%, 12%, 92%, 100% { stroke: var(--type-color); opacity: 0.9; } | |
| 18%, 86% { stroke: #fff5e8; opacity: 1; } | |
| } | |
| @keyframes lp-name-select { | |
| 0%, 12%, 92%, 100% { fill: var(--bone-1); } | |
| 18%, 86% { fill: #fff5e8; } | |
| } | |
| @keyframes lp-ribbon-select { | |
| 0%, 12%, 92%, 100% { fill: rgba(11,14,19,0.85); stroke: rgba(107, 80, 38, 0.7); } | |
| 18%, 86% { fill: rgba(40,15,5,0.92); stroke: #d4a049; } | |
| } | |
| /* outer-1: BLOCKED */ | |
| .demo-svg .lp-outer-1 .lp-plate { animation: lp-plate-block 8s ease-in-out infinite; } | |
| .demo-svg .lp-outer-1 .lp-frame { animation: lp-frame-block 8s ease-in-out infinite; } | |
| .demo-svg .lp-outer-1 .lp-icon { animation: lp-icon-block 8s ease-in-out infinite; } | |
| .demo-svg .lp-outer-1 .lp-aura { animation: lp-aura-block 8s ease-in-out infinite; } | |
| .demo-svg .lp-outer-1 .lp-stud { animation: lp-stud-block 8s ease-in-out infinite; } | |
| .demo-svg .lp-outer-1 .lp-gem { animation: lp-gem-fade 8s ease-in-out infinite; } | |
| .demo-svg .lp-outer-1 .lp-name { animation: lp-name-block 8s ease-in-out infinite; } | |
| .demo-svg .lp-outer-1 .lp-lock { animation: lp-lock-show 8s ease-in-out infinite; } | |
| @keyframes lp-plate-block { | |
| 0%, 12%, 92%, 100% { fill: var(--coal-2); filter: none; opacity: 1; } | |
| 18%, 86% { fill: var(--coal-1); filter: grayscale(100%) brightness(0.55); opacity: 0.55; } | |
| } | |
| @keyframes lp-frame-block { | |
| 0%, 12%, 92%, 100% { stroke: #6b5026; } | |
| 18%, 86% { stroke: var(--rust-2); } | |
| } | |
| @keyframes lp-icon-block { | |
| 0%, 12%, 92%, 100% { stroke: var(--type-color); opacity: 0.9; } | |
| 18%, 86% { stroke: var(--rust); opacity: 0.45; } | |
| } | |
| @keyframes lp-aura-block { | |
| 0%, 12%, 92%, 100% { opacity: 0; } | |
| 18%, 86% { opacity: 0.85; stroke: var(--rust); stroke-width: 1.2; fill: none; } | |
| } | |
| @keyframes lp-stud-block { | |
| 0%, 12%, 92%, 100% { fill: #8a6a32; } | |
| 18%, 86% { fill: var(--rust-2); } | |
| } | |
| @keyframes lp-gem-fade { | |
| 0%, 12%, 92%, 100% { opacity: 0.18; } | |
| 18%, 86% { opacity: 0; } | |
| } | |
| @keyframes lp-name-block { | |
| 0%, 12%, 92%, 100% { fill: var(--bone-1); } | |
| 18%, 86% { fill: var(--rust); opacity: 0.7; } | |
| } | |
| @keyframes lp-lock-show { | |
| 0%, 14%, 92%, 100% { opacity: 0; } | |
| 20%, 86% { opacity: 1; } | |
| } | |
| /* outer-2: CONDITIONAL ("needs · add") */ | |
| .demo-svg .lp-outer-2 .lp-plate { animation: lp-plate-cond 8s ease-in-out infinite; } | |
| .demo-svg .lp-outer-2 .lp-frame { animation: lp-frame-cond 8s ease-in-out infinite; } | |
| .demo-svg .lp-outer-2 .lp-icon { animation: lp-icon-cond 8s ease-in-out infinite; } | |
| .demo-svg .lp-outer-2 .lp-aura { animation: lp-aura-cond 8s ease-in-out infinite; } | |
| .demo-svg .lp-outer-2 .lp-stud { animation: lp-stud-cond 8s ease-in-out infinite; } | |
| .demo-svg .lp-outer-2 .lp-gem { animation: lp-gem-fade 8s ease-in-out infinite; } | |
| .demo-svg .lp-outer-2 .lp-name { animation: lp-name-cond 8s ease-in-out infinite; } | |
| .demo-svg .lp-outer-2 .lp-chip { animation: lp-chip-show 8s ease-in-out infinite; } | |
| @keyframes lp-plate-cond { | |
| 0%, 12%, 92%, 100% { fill: var(--coal-2); filter: none; opacity: 1; } | |
| 18%, 86% { fill: var(--coal-1); filter: grayscale(85%) brightness(0.7); opacity: 0.55; } | |
| } | |
| @keyframes lp-frame-cond { | |
| 0%, 12%, 92%, 100% { stroke: #6b5026; } | |
| 18%, 86% { stroke: #3a2f1c; } | |
| } | |
| @keyframes lp-icon-cond { | |
| 0%, 12%, 92%, 100% { stroke: var(--type-color); opacity: 0.9; } | |
| 18%, 86% { stroke: var(--bone-4); opacity: 0.5; } | |
| } | |
| @keyframes lp-aura-cond { | |
| 0%, 12%, 92%, 100% { opacity: 0; } | |
| 18%, 86% { opacity: 0.7; stroke: var(--amber); stroke-width: 1; fill: none; stroke-dasharray: 3 4; } | |
| } | |
| @keyframes lp-stud-cond { | |
| 0%, 12%, 92%, 100% { fill: #8a6a32; } | |
| 18%, 86% { fill: #3a2f1c; } | |
| } | |
| @keyframes lp-name-cond { | |
| 0%, 12%, 92%, 100% { fill: var(--bone-1); } | |
| 18%, 86% { fill: var(--bone-3); } | |
| } | |
| @keyframes lp-chip-show { | |
| 0%, 14%, 92%, 100% { opacity: 0; } | |
| 22%, 86% { opacity: 1; } | |
| } | |
| /* Edges: glow during the selected window */ | |
| .demo-svg .lp-edge-breaks { animation: lp-edge-breaks-anim 8s ease-in-out infinite; } | |
| .demo-svg .lp-edge-requires { animation: lp-edge-requires-anim 8s ease-in-out infinite; } | |
| .demo-svg .lp-edge-requires-2 { animation: lp-edge-requires-anim 8s ease-in-out infinite; } | |
| .demo-svg .lp-edge-compatible, | |
| .demo-svg .lp-edge-compatible-2 { animation: lp-edge-compat-anim 8s ease-in-out infinite; } | |
| @keyframes lp-edge-breaks-anim { | |
| 0%, 12%, 92%, 100% { stroke: rgba(200,64,60,0.4); stroke-width: 1.4; filter: none; } | |
| 18%, 86% { stroke: var(--rust); stroke-width: 2.4; filter: drop-shadow(0 0 7px rgba(200,64,60,1)); } | |
| } | |
| @keyframes lp-edge-requires-anim { | |
| 0%, 12%, 92%, 100% { stroke: rgba(255,160,60,0.35); stroke-width: 1.4; filter: none; } | |
| 18%, 86% { stroke: var(--ember-2); stroke-width: 2.2; filter: drop-shadow(0 0 6px var(--ember-glow)); } | |
| } | |
| @keyframes lp-edge-compat-anim { | |
| 0%, 12%, 92%, 100% { stroke: rgba(212,164,68,0.20); stroke-width: 1.0; } | |
| 18%, 86% { stroke: rgba(255,191,90,0.65); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgba(255,138,61,0.4)); } | |
| } | |
| /* ── Responsive ──────────────────────────────────────────────────────── */ | |
| @media (max-width: 920px) { | |
| .lp-shell { padding: 0 22px; } | |
| .lp-hero { grid-template-columns: 1fr; gap: 30px; padding: 60px 0 70px; } | |
| .lp-hero-art { min-height: 320px; } | |
| .lp-title { font-size: 60px; } | |
| .lp-section-title { font-size: 32px; } | |
| .lp-tablets { grid-template-columns: 1fr; } | |
| .lp-step { grid-template-columns: 1fr; gap: 20px; } | |
| .lp-step:nth-child(even) .lp-step-text { order: 1; } | |
| .lp-step:nth-child(even) .lp-step-art { order: 2; } | |
| .lp-tiers { grid-template-columns: 1fr; } | |
| .lp-scraper { grid-template-columns: 1fr; } | |
| .lp-finale-title { font-size: 42px; } | |
| } | |