/* --------------------------------------------------------------------------- MTG Mock Draft, landing page Self-contained: redeclares the app's design tokens so the landing page is themed identically without pulling in (or disturbing) the app's own styles. The signature is the pick-score panel inside a breathing gold glow, the one memorable element; everything around it stays quiet. --------------------------------------------------------------------------- */ :root { --bg: #131120; --bg-deep: #0e0c1a; --panel: #1c1930; --panel-2: #242040; --ink: #ece7db; --muted: #a49bb4; --line: #322d4d; --line-soft: #282344; --gold: #d9ab4a; --gold-soft: #e8c87e; --gold-deep: #8f6c1e; --danger: #e0685a; --mana-w: #f7f1cf; --mana-u: #2f7fe0; --mana-b: #4c4058; --mana-r: #d93a2b; --mana-g: #2f9e4f; --font-display: "Fraunces", "Georgia", serif; --font-body: "IBM Plex Sans", "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", monospace; --wrap: 1080px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* The glow halo is meant to bleed past the layout as ambient atmosphere; clip its horizontal spill so it never opens a sideways scroll on mobile. `clip` (not `hidden`) avoids creating a scroll container, so the sticky header keeps working. Applied at the root because body-level overflow propagates to the viewport and wouldn't reliably catch it. */ overflow-x: clip; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background-color: var(--bg); /* Gold halo cresting the top of the table, the app's own backdrop. */ background-image: radial-gradient(1100px 560px at 50% -280px, #2a2450 0%, rgba(42, 36, 80, 0) 70%); background-repeat: no-repeat; line-height: 1.55; -webkit-font-smoothing: antialiased; /* Paired with the same rule on : both are needed so the glow's horizontal bleed is clipped rather than propagated up as page scroll. */ overflow-x: clip; } a { color: inherit; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } /* ---- Header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: rgba(19, 17, 32, 0.82); backdrop-filter: blur(10px); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; } .brand-logo { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 0 8px rgba(217, 171, 74, 0.28)); } .brand-text { display: flex; flex-direction: column; gap: 1px; } .brand-kicker { font-family: var(--font-mono); font-weight: 600; font-size: 0.56rem; letter-spacing: 0.34em; color: var(--gold); line-height: 1; } .brand-name { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.16rem; color: var(--ink); line-height: 1.1; } .header-cta { display: flex; align-items: center; gap: 20px; } .header-nav { display: flex; align-items: center; gap: 26px; font-size: 0.98rem; font-weight: 600; color: var(--ink); } .header-nav a { text-decoration: none; transition: color 140ms ease; } .header-nav a:hover { color: var(--gold); } /* ---- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; text-decoration: none; border-radius: 9px; padding: 10px 18px; border: 1px solid transparent; cursor: pointer; transition: transform 120ms ease, box-shadow 160ms ease, border-color 140ms ease, background 140ms ease; } .btn-primary { background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #241a06; box-shadow: 0 0 0 1px rgba(217, 171, 74, 0.4), 0 8px 24px -10px rgba(217, 171, 74, 0.7); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--gold), 0 12px 30px -10px rgba(217, 171, 74, 0.85); } .btn-ghost { background: var(--panel-2); color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--gold); } .btn-sm { padding: 8px 14px; font-size: 0.82rem; } .btn-lg { padding: 13px 26px; font-size: 1rem; } .btn .arrow { transition: transform 140ms ease; } .btn:hover .arrow { transform: translateX(3px); } /* ---- Section scaffolding ------------------------------------------------ */ section { padding: 74px 0; } .section-eyebrow { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; } .section-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2.15rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 14px; } .section-lede { max-width: 60ch; color: var(--muted); font-size: 1.02rem; margin: 0; } /* ---- Hero --------------------------------------------------------------- */ .hero { padding: 68px 0 60px; } .hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero-eyebrow { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin: 0 0 20px; } .hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.1rem, 4.8vw, 3.35rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 20px; } .hero h1 em { font-style: italic; color: var(--gold-soft); } .hero-sub { font-size: 1.08rem; color: var(--muted); max-width: 46ch; margin: 0 0 30px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .hero-note { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--muted); margin: 22px 0 0; } /* ---- Signature: the pick-score panel inside a breathing gold glow ------- */ .hero-glow { position: relative; display: grid; place-items: center; padding: 26px; } /* The glow ring, the aesthetic risk. A slow-breathing gold halo behind the score panel that makes the brand's warmth literal. */ .hero-glow::before { content: ""; position: absolute; inset: -8%; border-radius: 50%; background: conic-gradient(from 200deg, rgba(217,171,74,0) 0deg, rgba(217,171,74,0.5) 90deg, rgba(232,200,126,0.85) 150deg, rgba(217,171,74,0.5) 210deg, rgba(217,171,74,0) 300deg); filter: blur(26px); opacity: 0.6; z-index: 0; animation: hero-glow-rotate 22s linear infinite; } .hero-glow::after { content: ""; position: absolute; inset: 4%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(217, 171, 74, 0.22); z-index: 0; pointer-events: none; } @keyframes hero-glow-rotate { to { transform: rotate(360deg); } } .score-card { position: relative; z-index: 1; width: 100%; max-width: 340px; background: linear-gradient(180deg, var(--panel), var(--bg-deep)); border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8); } .score-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 14px; } .sc-cardname { font-weight: 700; font-size: 1.02rem; } .sc-cardmeta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); margin-top: 3px; } .sc-score { font-family: var(--font-mono); font-weight: 600; font-size: 2.1rem; line-height: 1; color: var(--gold); text-align: right; } .sc-score small { display: block; font-size: 0.5rem; letter-spacing: 0.24em; color: var(--muted); margin-top: 5px; } .sc-rows { display: flex; flex-direction: column; gap: 9px; } .sc-row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 10px; } .sc-label { font-size: 0.72rem; color: var(--muted); } .sc-bar { height: 6px; border-radius: 4px; background: var(--line-soft); overflow: hidden; } .sc-bar > i { display: block; height: 100%; border-radius: 4px; width: var(--w, 40%); background: var(--c, var(--gold)); transform-origin: left; animation: barfill 900ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes barfill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .sc-val { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink); } .sc-lane { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .sc-lane .band { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 15px; height: 100%; } .sc-lane .band i { flex: 1; width: 100%; border-radius: 3px; background: linear-gradient(to top, var(--bc, var(--muted)) calc(var(--f, 0) * 100%), transparent calc(var(--f, 0) * 100%)), var(--line-soft); opacity: 0.5; } .sc-lane .band b { font-family: var(--font-mono); font-weight: 600; font-size: 0.52rem; color: var(--muted); line-height: 1; } .sc-lane .band[data-c="W"] { --bc: var(--mana-w); } .sc-lane .band[data-c="U"] { --bc: var(--mana-u); } .sc-lane .band[data-c="B"] { --bc: var(--mana-b); } .sc-lane .band[data-c="R"] { --bc: var(--mana-r); } .sc-lane .band[data-c="G"] { --bc: var(--mana-g); } .sc-lane .band[data-c="B"] i { box-shadow: inset 0 0 0 1px rgba(236, 231, 219, 0.22); } .sc-lane .band.on i { opacity: 1; box-shadow: 0 0 8px rgba(217, 171, 74, 0.25); } .sc-lane .band.on b { color: var(--ink); } /* ---- About -------------------------------------------------------------- */ .about { border-top: 1px solid var(--line-soft); } .about .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; } .about-stats { display: flex; flex-direction: column; gap: 18px; } .about-stat { border-left: 2px solid var(--gold-deep); padding-left: 16px; } .about-stat b { display: block; font-family: var(--font-mono); font-size: 1.15rem; color: var(--gold-soft); font-weight: 600; } .about-stat span { font-size: 0.86rem; color: var(--muted); } /* ---- How it works: one continuous flow, three stages -------------------- Each stage shares the same header treatment (.step-num, h3, p); stages 02 and 03 add a full-width visual underneath. Stacked (not side-by-side) so the section reads top-to-bottom as a single sequence, 01 -> 02 -> 03. */ .how { border-top: 1px solid var(--line-soft); } .stage { margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--line-soft); } .stage:first-of-type { margin-top: 40px; padding-top: 0; border-top: 0; } .stage-copy { max-width: 62ch; } .step-num { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; color: var(--gold); margin: 0 0 14px; } .stage-copy h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.4rem); margin: 0 0 10px; } .stage-copy p { margin: 0; color: var(--muted); font-size: 0.94rem; } /* Stage visuals: the raw-stats/contextual-score contrast (stage 02) and the built-deck panel (stage 03), sibling to the hero's score-card. Reuses .score-card / .sc-cardname / .sc-cardmeta / .sc-score for the deck-card shell and header so the two signature panels read as one family; only the body (curve, mana base, cumulative stats, castability) is deck-specific. */ .stage-with-visual .stage-visual { margin-top: 32px; } .stage-visual.contrast { margin-top: 32px; } .stage-with-visual .stage-visual:not(.contrast) { display: grid; place-items: center; } .deck-card { max-width: 360px; } .dc-curve { margin: 18px 0 16px; } .dc-curve-label { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; } .dc-curve-bars { display: flex; align-items: flex-end; gap: 6px; height: 46px; } .dc-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; } .dc-bar i { flex: 1; width: 100%; border-radius: 3px 3px 2px 2px; background: linear-gradient(to top, var(--gold) calc(var(--f, 0) * 100%), var(--line-soft) calc(var(--f, 0) * 100%)); } .dc-bar b { font-family: var(--font-mono); font-weight: 600; font-size: 0.58rem; color: var(--muted); line-height: 1; } .dc-mana { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .dc-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink); } .dc-chip i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .dc-chip[data-c="G"] i { background: var(--mana-g); } .dc-chip[data-c="U"] i { background: var(--mana-u); } .dc-chip[data-c="W"] i { background: var(--mana-w); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28); } .dc-chip-note { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); margin-left: auto; } /* Compact stat pair: cumulative influence + cumulative base rating. Kept to two numbers so the panel stays scannable alongside curve/mana/castability. */ .dc-cumulative { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .dc-stat { display: flex; flex-direction: column; gap: 2px; } .dc-stat b { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; color: var(--gold); line-height: 1; } .dc-stat span { font-size: 0.7rem; color: var(--muted); } /* Second, lighter-weight stat row: removal/fixers/nonbasics count, secondary to the cumulative influence/base-rating duo above. */ .dc-substats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; } .dc-substat { display: flex; flex-direction: column; gap: 2px; } .dc-substat b { font-family: var(--font-mono); font-weight: 700; font-size: 0.82rem; color: var(--ink); line-height: 1; } .dc-substat span { font-size: 0.62rem; color: var(--muted); } .dc-castability { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .dc-castability b { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; color: var(--mana-g); flex: none; } .dc-castability span { font-size: 0.8rem; color: var(--muted); } /* Desktop: the built-deck panel goes wide and two-column so it fills the stage instead of sitting as a narrow portrait card. Header + castability span the full width; curve/mana on the left, the two stat blocks on the right. Mobile keeps the single-column stack (the base .deck-card rules above). */ @media (min-width: 720px) { .deck-card { max-width: 780px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 4px; align-items: start; } .deck-card > .score-card-top { grid-column: 1 / -1; } .deck-card > .dc-castability { grid-column: 1 / -1; } .deck-card > .dc-curve { margin: 4px 0 0; } .deck-card > .dc-mana { border-top: 0; padding-top: 4px; margin-top: 12px; } .deck-card > .dc-cumulative { border-top: 0; padding-top: 4px; margin-top: 4px; } .deck-card > .dc-substats { margin-top: 16px; } } /* ---- How it's different: the contrast device ---------------------------- */ .different { border-top: 1px solid var(--line-soft); } .contrast { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; margin-top: 40px; } .contrast-col { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; } .contrast-col.them { opacity: 0.92; } .contrast-col.us { border-color: rgba(217, 171, 74, 0.45); box-shadow: 0 0 0 1px rgba(217, 171, 74, 0.18), 0 20px 50px -30px rgba(217, 171, 74, 0.35); } .contrast-tag { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 4px; } .contrast-col.them .contrast-tag { color: var(--muted); } .contrast-col.us .contrast-tag { color: var(--gold); } .contrast-h { font-weight: 700; font-size: 0.98rem; margin: 0 0 16px; } /* faux raw-stats table, the 17lands-style aggregate-stats paradigm */ .stat-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.72rem; } .stat-table th { text-align: right; color: var(--muted); font-weight: 500; padding: 4px 6px; border-bottom: 1px solid var(--line); font-size: 0.6rem; letter-spacing: 0.05em; } .stat-table th:first-child { text-align: left; } .stat-table td { text-align: right; padding: 5px 6px; border-bottom: 1px solid var(--line-soft); color: var(--muted); } .stat-table td:first-child { text-align: left; color: var(--ink); } .stat-caption { font-size: 0.95rem; font-weight: 600; color: var(--ink); margin: 16px 0 0; } /* the single contextual pick score, echoing the hero */ .us-score { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } .us-score b { font-family: var(--font-mono); font-weight: 600; font-size: 2rem; color: var(--gold); line-height: 1; } .us-score span { color: var(--ink); font-weight: 600; } .us-rows { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; } .us-rows li { list-style: none; display: flex; justify-content: space-between; font-size: 0.78rem; } .us-rows { padding: 0; margin: 0 0 14px; } .us-rows .lbl { color: var(--muted); } .us-rows .amt { font-family: var(--font-mono); color: var(--ink); } .us-rows .amt.plus { color: var(--mana-g); } .us-caption { font-size: 0.95rem; font-weight: 600; color: var(--gold); margin: 0; } .contrast-mid { display: grid; place-items: center; color: var(--muted); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; } .contrast-mid span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 0; } /* differentiator grid */ .diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 40px; } .diff { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 22px 20px; } .diff-icon { width: 26px; height: 26px; color: var(--gold); margin-bottom: 14px; } .diff h3 { font-size: 0.98rem; font-weight: 700; margin: 0 0 7px; } .diff p { margin: 0; color: var(--muted); font-size: 0.88rem; } /* ---- Draft guides teaser ------------------------------------------------- Reuses the .guide-card look from guides.css (art + title + hook + link) with its own grid (up to 4 columns; guides.css's own grid is 2-column, sized for the /guides index rather than a landing teaser). */ .guides-teaser { border-top: 1px solid var(--line-soft); } .guides-teaser-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; /* equal-height rows so all cards match at every breakpoint */ gap: 18px; margin-top: 36px; } .guides-teaser-grid .guide-card h3 { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; margin: 0; line-height: 1.3; } .guides-teaser-grid .guide-card h3 a { color: var(--ink); text-decoration: none; } .guides-teaser-grid .guide-card h3 a:hover { color: var(--gold-soft); } .guides-teaser-cta { margin: 28px 0 0; } /* ---- Tier list teaser ----------------------------------------------------- Sibling to the hero/stage visuals: copy on one side, a product artifact on the other. The artifact here is the tier list's own "eclipse ramp" (see tierlist.css) in miniature, brightest at S and fading to black at F, so the teaser reads as a real sample rather than decoration. */ .tier-teaser { border-top: 1px solid var(--line-soft); } .tier-teaser-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .tier-teaser-copy .section-lede { margin-bottom: 26px; } .tier-teaser-sets { margin: 18px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.7; } .tier-teaser-sets a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); } .tier-teaser-sets a:hover { color: var(--gold-soft); border-bottom-color: var(--gold); } .tier-teaser-panel { background: linear-gradient(180deg, var(--panel), var(--bg-deep)); border: 1px solid var(--line); border-radius: 16px; padding: 24px 26px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8); } .tier-teaser-rows { display: flex; flex-direction: column; gap: 13px; } .tier-teaser-row { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 14px; } .tier-teaser-letter { font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-align: center; /* Letters stay legible ink, matching the real tier list (only the bar below carries the ramp color); D/F fade slightly rather than losing contrast entirely. */ color: var(--ink); } .tier-teaser-letter-dim { opacity: 0.62; } .tier-teaser-bar { height: 10px; border-radius: 5px; background: var(--line-soft); overflow: hidden; } .tier-teaser-bar i { display: block; height: 100%; width: var(--tw, 40%); border-radius: 5px; background: var(--tc, var(--gold)); transform-origin: left; animation: barfill 900ms cubic-bezier(0.22, 1, 0.36, 1) both; } .tier-teaser-caption { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 0.82rem; color: var(--muted); } /* ---- Closing CTA -------------------------------------------------------- */ .cta-band { border-top: 1px solid var(--line-soft); text-align: center; } .cta-band .section-title { margin-bottom: 10px; } .cta-band p { color: var(--muted); max-width: 52ch; margin: 0 auto 28px; } .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ---- Footer ------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); padding: 26px 0; color: var(--muted); font-size: 0.8rem; } .site-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .site-footer .sets { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; } /* ---- Focus / a11y ------------------------------------------------------- */ a:focus-visible, .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; } .skip-link { position: fixed; left: 12px; top: 12px; background: var(--gold); color: #241a06; padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; z-index: 100; transform: translateY(-160%); transition: transform 140ms ease; } .skip-link:focus { transform: translateY(0); } /* ---- Responsive --------------------------------------------------------- */ @media (max-width: 880px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; } .hero-glow { order: 2; } .about .wrap { grid-template-columns: 1fr; gap: 28px; } .contrast { grid-template-columns: 1fr; } .contrast-mid span { writing-mode: initial; transform: none; } .diff-grid { grid-template-columns: 1fr 1fr; } .guides-teaser-grid { grid-template-columns: 1fr 1fr; } .tier-teaser-wrap { grid-template-columns: 1fr; gap: 32px; } .tier-teaser-panel { max-width: 420px; } /* Keep the nav (Tier list, Methodology, ...) on mobile: wrap the header onto a second row instead of hiding it. */ .site-header .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; } .header-cta { width: 100%; justify-content: space-between; } .header-nav { gap: 14px; } } @media (max-width: 560px) { section { padding: 54px 0; } .hero { padding: 46px 0 40px; } .wrap { padding: 0 18px; } .diff-grid { grid-template-columns: 1fr; } .guides-teaser-grid { grid-template-columns: 1fr; } .hero-actions { gap: 10px; } .dc-chip-note { margin-left: 0; } .header-nav { gap: 11px; font-size: 0.78rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero-glow::before { animation: none; } .sc-bar > i { animation: none; } .btn, .btn:hover { transform: none; } } /* ---- Methodology triggers ----------------------------------------------- */ .header-nav-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; transition: color 140ms ease; } .header-nav-btn:hover { color: var(--gold); } .footer-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .footer-link { font: inherit; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: color 140ms ease; } .footer-link:hover { color: var(--ink); } .footer-socials { display: inline-flex; align-items: center; gap: 14px; } .footer-social { color: var(--muted); display: inline-flex; transition: color 140ms ease, transform 140ms ease; } .footer-social:hover { color: var(--gold); transform: translateY(-1px); } .footer-social svg { display: block; } /* ---- How-it-works methodology callout ----------------------------------- */ .how-methodology { margin-top: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .how-methodology p { margin: 0; max-width: 44ch; color: var(--ink); font-size: 1.02rem; } .how-methodology .btn { flex: none; } /* ---- Legal pages (privacy, terms) --------------------------------------- */ .legal { padding: 56px 0 72px; } .legal .wrap { max-width: 760px; } .legal h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.1; color: var(--ink); margin: 0 0 10px; } .legal .legal-updated { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 28px; } .legal h2 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--ink); margin: 34px 0 10px; } .legal p, .legal li { color: var(--muted); line-height: 1.6; font-size: 0.96rem; } .legal ul { margin: 10px 0; padding-left: 20px; } .legal li { margin: 6px 0; } .legal a { color: var(--gold); text-underline-offset: 3px; } .legal .legal-note { margin-top: 36px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 0.9rem; } /* ---- Methodology modal (ported from the app's info-modal) --------------- */ .info-modal { position: fixed; inset: 0; background: rgba(8, 6, 16, 0.72); z-index: 50000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; overscroll-behavior: contain; } .info-modal[hidden] { display: none; } .info-modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px 32px; max-width: 680px; width: 100%; position: relative; } .info-modal-box h2 { margin: 0 0 16px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); } .info-modal-box h3 { margin: 20px 0 8px; font-size: 0.78rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em; } .info-modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 1rem; line-height: 1; font-weight: 700; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; } .info-modal-close:hover { border-color: var(--gold); } .method-intro { font-size: 0.88rem; color: var(--muted); margin: 0 0 10px; } .method-provenance { margin: 0 0 20px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); font-size: 0.9rem; color: var(--muted); line-height: 1.5; } .method-provenance strong { color: var(--ink); font-weight: 700; } .method-kicker { margin: 20px 0 0; padding: 13px 15px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 10px; background: var(--panel-2); font-size: 0.9rem; color: var(--ink); line-height: 1.5; } .method-kicker a { color: var(--gold-soft); } .method-list { margin: 0; font-size: 0.88rem; } .method-list dt { font-weight: 700; margin-top: 10px; } .method-list dd { margin: 2px 0 0 0; color: var(--muted); line-height: 1.45; } /* ---- Feedback form (in the modal) --------------------------------------- */ .feedback-modal-box { max-width: 480px; } .feedback-form { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .feedback-label { font-size: 0.85rem; font-weight: 700; color: var(--muted); margin-bottom: -6px; } .feedback-input, .feedback-textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 0.9rem; color: var(--ink); background: var(--bg-deep); resize: vertical; } .feedback-input::placeholder, .feedback-textarea::placeholder { color: #9088a6; } .feedback-input:focus-visible, .feedback-textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); } .feedback-error { font-size: 0.85rem; color: #f1a49b; padding: 6px 10px; border: 1px solid rgba(224, 104, 90, 0.4); border-radius: 8px; background: rgba(224, 104, 90, 0.08); } .feedback-actions { display: flex; justify-content: flex-end; margin-top: 4px; }