commit 3e845444223dadb96ec8bd51316f05d97d0108d8 Author: Harwinder Sekhon Date: Sat Jul 11 18:16:16 2026 -0400 Initial commit — XAU signals site Co-Authored-By: Claude Opus 4.6 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4c5f206 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.claude/ diff --git a/README.md b/README.md new file mode 100644 index 0000000..a1280d6 --- /dev/null +++ b/README.md @@ -0,0 +1,33 @@ +# ForexSignalz — landing page + +Static one-page site for the paid Telegram signal channel. No build step, no dependencies — `index.html` + `style.css`. + +## Before publishing — 2 required edits + +1. **Paid invite link** — in `index.html`, near the bottom inside ` + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..95ebafc --- /dev/null +++ b/style.css @@ -0,0 +1,713 @@ +/* ── XAU/USD Signals — midnight desk aesthetic ──────────────── + Deep navy ground, gold as the metal itself, candlelight marks. + Up-candles: hollow gold. Down-candles: filled slate (CVD-safe, + shape-encoded). Red reserved for risk only. */ + +:root { + --navy-deep: #081226; + --navy: #0B1830; + --panel: #0F2040; + --panel-2: #0A162E; + --text: #E9EDF6; + --dim: #93A3C0; + --dim-2: #6B7C9C; + --gold: #D9AE52; + --gold-bright:#F2CD6E; + --gold-deep: #A87F35; + --slate: #5B7BB0; + --risk: #D4604C; + --risk-soft: #E08A7A; + --rule: rgba(217, 174, 82, 0.16); + --rule-blue: rgba(91, 123, 176, 0.22); +} + +* { margin: 0; padding: 0; box-sizing: border-box; } + +html { scroll-behavior: smooth; } +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } +} + +body { + background: var(--navy-deep); + background-image: + radial-gradient(ellipse 90% 50% at 50% -5%, rgba(217, 174, 82, 0.08), transparent 60%), + radial-gradient(ellipse 70% 40% at 85% 100%, rgba(91, 123, 176, 0.06), transparent 70%); + color: var(--text); + font-family: "Source Serif 4", Georgia, serif; + font-size: 17px; + line-height: 1.65; + -webkit-font-smoothing: antialiased; +} + +.mono, code { font-family: "IBM Plex Mono", ui-monospace, monospace; } + +a { color: var(--gold-bright); } +a:focus-visible, button:focus-visible { + outline: 2px solid var(--gold-bright); + outline-offset: 3px; +} + +/* ── Top bar ─────────────────────────────────────────────── */ + +.topbar { + display: flex; + align-items: baseline; + gap: 1rem; + padding: 1rem 1.5rem; + border-bottom: 1px solid var(--rule); +} + +.topbar-brand { + font-family: "Archivo", sans-serif; + font-weight: 800; + font-stretch: 80%; + letter-spacing: 0.14em; + font-size: 0.85rem; + color: var(--gold); +} + +.topbar-note { + font-family: "IBM Plex Mono", monospace; + font-size: 0.72rem; + color: var(--dim-2); + flex: 1; +} + +.topbar-join { + font-family: "IBM Plex Mono", monospace; + font-size: 0.8rem; + text-decoration: none; + border: 1px solid var(--gold-deep); + border-radius: 3px; + padding: 0.3rem 0.9rem; + color: var(--gold-bright); + transition: background 0.15s, color 0.15s; +} +.topbar-join:hover { background: var(--gold); color: var(--navy-deep); } + +/* ── Hero ────────────────────────────────────────────────── */ + +.hero { + position: relative; + overflow: hidden; + padding: clamp(3.5rem, 9vw, 7rem) 1.25rem clamp(11rem, 24vw, 15rem); + text-align: center; + border-bottom: 1px solid var(--rule); +} + +.hero-chart { + position: absolute; + left: 50%; + bottom: -8px; + transform: translateX(-50%); + width: max(100%, 1100px); + height: auto; + opacity: 0.85; + pointer-events: none; + -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%); + mask-image: linear-gradient(180deg, transparent 0%, #000 35%); +} + +.hero-inner { position: relative; max-width: 760px; margin: 0 auto; } + +.hero-eyebrow { + font-family: "IBM Plex Mono", monospace; + font-size: 0.72rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--dim); + margin-bottom: 1.5rem; +} + +.hero h1 { + font-family: "Archivo", sans-serif; + font-weight: 900; + font-stretch: 78%; + font-size: clamp(2.8rem, 9vw, 5rem); + line-height: 0.98; + letter-spacing: 0.04em; + margin-bottom: 1.25rem; + color: var(--text); +} + +.hero h1 .gold-line { + display: block; + background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold-bright) 45%, var(--gold) 80%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.hero-fineness { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 0.4rem 1.6rem; + font-family: "IBM Plex Mono", monospace; + font-size: 0.74rem; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--gold); + border-top: 1px solid var(--rule); + border-bottom: 1px solid var(--rule); + padding: 0.6rem 0; + margin-bottom: 1.75rem; +} + +.hero-thesis { + font-size: 1.08rem; + max-width: 33em; + margin: 0 auto 2rem; + color: var(--dim); +} + +.btn-join { + display: inline-block; + font-family: "Archivo", sans-serif; + font-weight: 700; + font-stretch: 85%; + letter-spacing: 0.05em; + font-size: 0.95rem; + text-decoration: none; + color: var(--navy-deep); + background: linear-gradient(180deg, var(--gold-bright), var(--gold)); + border: 1px solid var(--gold-deep); + border-radius: 4px; + padding: 0.85rem 1.8rem; + transition: transform 0.15s, box-shadow 0.15s; + box-shadow: 0 2px 14px rgba(217, 174, 82, 0.35); +} +.btn-join:hover { transform: translateY(-1px); box-shadow: 0 4px 22px rgba(217, 174, 82, 0.5); } +.btn-join:active { transform: translateY(0); } + +.cta-fine { + font-family: "IBM Plex Mono", monospace; + font-size: 0.7rem; + color: var(--dim-2); + margin-top: 0.8rem; +} + +/* ── Motion: hero load sequence ──────────────────────────── */ + +.cndl { transform-box: fill-box; transform-origin: 50% 100%; } + +.hero-chart .cndl { + animation: cndl-rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; + animation-delay: calc(var(--i) * 45ms); +} +@keyframes cndl-rise { + from { transform: scaleY(0); opacity: 0; } + to { transform: none; opacity: 1; } +} + +/* price line draws itself once the candles are mostly up */ +.hero-line { + stroke-dasharray: 100; + stroke-dashoffset: 100; + animation: draw-line 1.8s ease 0.9s forwards; +} +@keyframes draw-line { to { stroke-dashoffset: 0; } } + +/* text cascade */ +.hero-eyebrow, .hero h1, .hero-fineness, .hero-thesis, .hero-cta { + animation: fade-up 0.65s cubic-bezier(0.2, 0.7, 0.3, 1) both; +} +.hero h1 { animation-delay: 0.12s; } +.hero-fineness { animation-delay: 0.28s; } +.hero-thesis { animation-delay: 0.42s; } +.hero-cta { animation-delay: 0.58s; } +@keyframes fade-up { + from { opacity: 0; transform: translateY(16px); } + to { opacity: 1; transform: none; } +} + +/* slow shimmer across the gold gradients */ +.hero h1 .gold-line, .join-stars { + background-size: 220% 100%; + animation: shimmer 6s ease-in-out 2s infinite; +} +@keyframes shimmer { + 0%, 100% { background-position: 0% 0; } + 50% { background-position: 100% 0; } +} + +/* breathing glow on the CTAs */ +.btn-join { animation: glow-pulse 3.2s ease-in-out 2s infinite; } +@keyframes glow-pulse { + 0%, 100% { box-shadow: 0 2px 14px rgba(217, 174, 82, 0.35); } + 50% { box-shadow: 0 5px 28px rgba(217, 174, 82, 0.6); } +} + +/* ── Sections ────────────────────────────────────────────── */ + +.section { + max-width: 900px; + margin: 0 auto; + padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem; +} + +.section-head { margin-bottom: 2rem; } + +.eyebrow { + font-family: "IBM Plex Mono", monospace; + font-size: 0.72rem; + letter-spacing: 0.14em; + text-transform: uppercase; + color: var(--gold); + margin-bottom: 0.6rem; +} + +.section h2 { + font-family: "Archivo", sans-serif; + font-weight: 800; + font-stretch: 82%; + font-size: clamp(1.6rem, 4vw, 2.2rem); + letter-spacing: 0.02em; + color: var(--text); + margin-bottom: 0.75rem; +} + +.lede { color: var(--dim); max-width: 42em; } + +/* ── Sample: message + anatomy side by side ──────────────── */ + +.sample-grid { + display: grid; + grid-template-columns: minmax(0, 420px) minmax(0, 1fr); + gap: 2rem; + align-items: start; +} + +.signal-card { + background: var(--panel); + border-radius: 8px; + border: 1px solid var(--rule); + overflow: hidden; + box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4); +} + +.signal-body { + font-family: "IBM Plex Mono", monospace; + font-size: 0.76rem; + line-height: 1.75; + padding: 1.4rem 1.5rem; + color: var(--text); +} +.signal-body hr { border: 0; border-top: 1px solid var(--rule-blue); margin: 0.7rem 0; } +.signal-body .dim { color: var(--dim-2); } +.signal-body code { + background: var(--panel-2); + border-radius: 3px; + padding: 0.05em 0.35em; + color: var(--gold-bright); +} + +.signal-card figcaption { + font-family: "IBM Plex Mono", monospace; + font-size: 0.68rem; + color: var(--navy-deep); + background: var(--gold-deep); + padding: 0.5rem 1.5rem; +} + +.anat-fig { min-width: 0; } + +.anat-chart { + width: 100%; + height: auto; + display: block; +} + +.anat-lbl { + font-family: "IBM Plex Mono", monospace; + font-size: 12px; + font-weight: 600; +} +.anat-lbl.gold { fill: var(--gold-bright); } +.anat-lbl.gold-b { fill: #F7DD9A; } +.anat-lbl.red { fill: var(--risk-soft); } + +.anat-zone { + font-family: "IBM Plex Mono", monospace; + font-size: 11px; + opacity: 0.85; +} +.anat-zone.gold { fill: var(--gold); } +.anat-zone.red { fill: var(--risk-soft); } + +.anat-fig figcaption { + font-family: "IBM Plex Mono", monospace; + font-size: 0.7rem; + color: var(--dim-2); + margin-top: 0.75rem; + line-height: 1.6; +} + +.grade-note { + margin-top: 2rem; + max-width: 42em; + color: var(--dim); +} +.grade-note .mono { color: var(--gold-bright); font-size: 0.9em; } + +/* ── Ledger rows ─────────────────────────────────────────── */ + +.ledger { border-top: 1px solid var(--rule); } + +.ledger-row { + display: grid; + grid-template-columns: 210px 1fr; + gap: 1.5rem; + padding: 1.3rem 0; + border-bottom: 1px solid var(--rule); +} + +.ledger-key { + font-family: "Archivo", sans-serif; + font-weight: 700; + font-stretch: 85%; + font-size: 0.95rem; + letter-spacing: 0.03em; + color: var(--gold-bright); +} + +.ledger-row p { color: var(--dim); font-size: 0.98rem; } + +.ledger-row.loss .ledger-key { color: var(--risk-soft); } + +/* ── Week strip ──────────────────────────────────────────── */ + +.weekstrip { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 6px; + margin: 0 0 2.5rem; +} + +.day { + border: 1px solid var(--rule-blue); + border-radius: 4px; + padding: 0.7rem 0.35rem 0.6rem; + text-align: center; + background: rgba(15, 32, 64, 0.5); +} + +.day-name { + display: block; + font-family: "Archivo", sans-serif; + font-weight: 800; + font-stretch: 80%; + letter-spacing: 0.1em; + text-transform: uppercase; + font-size: 0.8rem; +} + +.day-state { + display: block; + font-family: "IBM Plex Mono", monospace; + font-size: 0.58rem; + margin-top: 0.35rem; + color: var(--dim-2); +} + +.day.on .day-name { color: var(--gold-bright); } +.day.on { border-color: rgba(217, 174, 82, 0.35); background: rgba(217, 174, 82, 0.06); } + +.day.off { + background: repeating-linear-gradient( + -45deg, + rgba(212, 96, 76, 0.12), + rgba(212, 96, 76, 0.12) 6px, + transparent 6px, + transparent 12px + ); + border-color: rgba(212, 96, 76, 0.35); +} +.day.off .day-name { color: var(--risk-soft); text-decoration: line-through; } + +/* ── Never list ──────────────────────────────────────────── */ + +.never-list { + list-style: none; + border-top: 1px solid var(--rule); + max-width: 42em; +} + +.never-list li { + padding: 0.85rem 0 0.85rem 2rem; + border-bottom: 1px solid var(--rule); + color: var(--text); + position: relative; +} + +.never-list li::before { + content: "✕"; + position: absolute; + left: 0.25rem; + color: var(--risk-soft); + font-family: "IBM Plex Mono", monospace; + font-weight: 600; +} + +.never-note { + margin-top: 1.25rem; + color: var(--dim); + font-size: 0.95rem; + max-width: 42em; +} + +/* ── Join section ────────────────────────────────────────── */ + +.steps { list-style: none; margin-bottom: 2.5rem; } + +.step { + display: flex; + gap: 1.25rem; + padding: 1.1rem 0; + border-bottom: 1px solid var(--rule); +} + +.step-n { + font-family: "IBM Plex Mono", monospace; + font-size: 0.85rem; + color: var(--navy-deep); + background: var(--gold); + min-width: 1.9rem; + height: 1.9rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-top: 0.2rem; +} + +.step h3 { + font-family: "Archivo", sans-serif; + font-weight: 700; + font-stretch: 85%; + font-size: 1.02rem; + color: var(--text); + margin-bottom: 0.25rem; +} + +.step p { color: var(--dim); font-size: 0.95rem; } + +.join-panel { + background: var(--panel); + border-radius: 8px; + border: 1px solid rgba(217, 174, 82, 0.4); + padding: 2rem 1.5rem 1.75rem; + text-align: center; + box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(242, 205, 110, 0.15); +} + +.join-price { margin-bottom: 1.25rem; } + +.join-stars { + font-family: "Archivo", sans-serif; + font-weight: 900; + font-stretch: 80%; + font-size: 2.6rem; + display: block; + line-height: 1.1; + background: linear-gradient(100deg, var(--gold-deep), var(--gold-bright) 55%, var(--gold)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.join-per { + font-family: "IBM Plex Mono", monospace; + font-size: 0.78rem; + color: var(--dim); +} + +.btn-join-lg { font-size: 1.05rem; padding: 1rem 2.6rem; } + +.join-panel .cta-fine { color: var(--dim-2); } + +/* ── Legal ───────────────────────────────────────────────── */ + +.section-legal { border-top: 1px solid var(--rule); } + +.legal-head { + font-family: "Archivo", sans-serif; + font-weight: 800; + font-stretch: 82%; + font-size: 1.2rem; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--risk-soft); + margin-bottom: 1.5rem; +} + +.legal-body p { + font-family: "IBM Plex Mono", monospace; + font-size: 0.72rem; + line-height: 1.8; + color: var(--dim); + margin-bottom: 1rem; + max-width: 80em; +} + +.legal-body strong { color: var(--text); } + +.legal-accept { + border-top: 1px solid var(--rule); + padding-top: 1rem; + color: var(--text) !important; +} + +/* ── Footer ──────────────────────────────────────────────── */ + +.footer { + background: var(--navy); + border-top: 1px solid var(--rule); + padding: 2rem 1.5rem 2.5rem; + display: flex; + flex-direction: column; + gap: 0.35rem; + align-items: center; + text-align: center; +} + +.footer-brand { + font-family: "Archivo", sans-serif; + font-weight: 800; + font-stretch: 80%; + letter-spacing: 0.14em; + font-size: 0.8rem; + color: var(--gold); +} + +.footer-line { + font-family: "IBM Plex Mono", monospace; + font-size: 0.68rem; + color: var(--dim-2); +} + +/* ── Reveal animation (JS-gated so no-JS renders visible) ── */ + +html.js .reveal { + opacity: 0; + transform: translateY(14px); + transition: opacity 0.55s ease, transform 0.55s ease; +} +html.js .reveal.in { opacity: 1; transform: none; } + +/* Blocks whose children stagger individually skip the block-level hide */ +html.js .anat-fig.reveal, +html.js .weekstrip.reveal, +html.js .ledger.reveal, +html.js .steps.reveal, +html.js .never-list.reveal { opacity: 1; transform: none; } + +/* ── Motion: scroll-triggered staggers ───────────────────── */ + +/* anatomy chart: zones fade → lines sweep in → candles rise → labels */ +html.js .anat-fig .anat-zonefill, +html.js .anat-fig .anat-lbl, +html.js .anat-fig .anat-zone, +html.js .anat-fig .anat-note { opacity: 0; transition: opacity 0.6s ease; } + +html.js .anat-fig .anat-line { + transform-box: fill-box; + transform-origin: 0 50%; + transform: scaleX(0); +} +html.js .anat-fig.in .anat-line { + transform: scaleX(1); + transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1); +} +html.js .anat-fig.in .anat-line.entry { transition-delay: 0.15s; } +html.js .anat-fig.in .anat-line.tp { transition-delay: 0.35s; } +html.js .anat-fig.in .anat-line.sl { transition-delay: 0.5s; } + +html.js .anat-fig .cndl { opacity: 0; } +html.js .anat-fig.in .cndl { + animation: cndl-rise 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both; + animation-delay: calc(0.45s + var(--i) * 55ms); +} + +html.js .anat-fig.in .anat-zonefill { opacity: 1; transition-delay: 0.55s; } +html.js .anat-fig.in .anat-lbl, +html.js .anat-fig.in .anat-zone, +html.js .anat-fig.in .anat-note { opacity: 1; transition-delay: 1.15s; } + +/* week strip: days pop in left to right */ +html.js .weekstrip .day { opacity: 0; transform: translateY(10px) scale(0.96); } +html.js .weekstrip.in .day { + opacity: 1; + transform: none; + transition: opacity 0.45s ease, transform 0.45s ease; + transition-delay: calc(var(--i) * 70ms); +} + +/* ledgers, steps, never-list: rows cascade */ +html.js .ledger .ledger-row, +html.js .steps .step, +html.js .never-list li { opacity: 0; transform: translateY(12px); } + +html.js .ledger.in .ledger-row, +html.js .steps.in .step, +html.js .never-list.in li { + opacity: 1; + transform: none; + transition: opacity 0.5s ease, transform 0.5s ease; +} + +html.js .ledger.in .ledger-row:nth-child(1), +html.js .steps.in .step:nth-child(1), +html.js .never-list.in li:nth-child(1) { transition-delay: 0.05s; } +html.js .ledger.in .ledger-row:nth-child(2), +html.js .steps.in .step:nth-child(2), +html.js .never-list.in li:nth-child(2) { transition-delay: 0.15s; } +html.js .ledger.in .ledger-row:nth-child(3), +html.js .steps.in .step:nth-child(3), +html.js .never-list.in li:nth-child(3) { transition-delay: 0.25s; } +html.js .ledger.in .ledger-row:nth-child(4), +html.js .never-list.in li:nth-child(4) { transition-delay: 0.35s; } +html.js .ledger.in .ledger-row:nth-child(5), +html.js .never-list.in li:nth-child(5) { transition-delay: 0.45s; } + +/* ── Reduced motion: everything static, everything visible ─ */ + +@media (prefers-reduced-motion: reduce) { + html.js .reveal { opacity: 1; transform: none; transition: none; } + + .hero-chart .cndl, .hero-line, + .hero-eyebrow, .hero h1, .hero-fineness, .hero-thesis, .hero-cta, + .hero h1 .gold-line, .join-stars, .btn-join { animation: none; } + + .hero-line { stroke-dashoffset: 0; } + + html.js .anat-fig .anat-zonefill, + html.js .anat-fig .anat-lbl, + html.js .anat-fig .anat-zone, + html.js .anat-fig .anat-note, + html.js .anat-fig .cndl, + html.js .weekstrip .day, + html.js .ledger .ledger-row, + html.js .steps .step, + html.js .never-list li { opacity: 1; transform: none; transition: none; animation: none; } + + html.js .anat-fig .anat-line { transform: none; transition: none; } +} + +/* ── Responsive ──────────────────────────────────────────── */ + +@media (max-width: 760px) { + .sample-grid { grid-template-columns: 1fr; } +} + +@media (max-width: 640px) { + .ledger-row { grid-template-columns: 1fr; gap: 0.35rem; padding: 1.1rem 0; } + .weekstrip { gap: 3px; } + .day { padding: 0.5rem 0.15rem 0.45rem; } + .day-state { font-size: 0.48rem; } + .topbar-note { display: none; } + .hero-fineness { flex-direction: column; gap: 0.3rem; } + .hero { padding-bottom: 9rem; } +}