/* Mu Shelter — landing page demo (Cloudflare Pages). Memorial direction extraída do site Blazor — versão self-contained. Sem dependência de bundler, sem variáveis fora deste arquivo. Tipografia carregada via Google Fonts no . */ :root{ --bg:#000; --bg-soft:#070707; --bg-card:#0c0c0c; --rule:#1a1a1a; --rule-hi:#2c2c2c; --text:#f4f0e8; --text-dim:#8a8680; --text-mute:#54514c; --blood:#c8281e; --blood-hi:#e83a2e; --blood-dim:#82211a; --ember:#c69147; --bone:#f4f0e8; --display:"Anton", Impact, "Arial Narrow", sans-serif; --serif:"Cormorant Garamond", Georgia, serif; --mono:"JetBrains Mono", "SF Mono", Consolas, monospace; } *{box-sizing:border-box;margin:0;padding:0} html,body{ background:var(--bg);color:var(--text); font-family:var(--mono);font-size:14px;line-height:1.55; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;background:none;border:none;color:inherit} ::selection{background:var(--blood);color:var(--bg)} html{scroll-behavior:smooth} /* ─── header ────────────────────────────────────────────────── */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:50; display:flex;justify-content:space-between;align-items:center; padding:1.3rem 2.4rem; background:linear-gradient(180deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.75) 70%, rgba(0,0,0,0) 100%); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .brand{display:flex;align-items:baseline;gap:.7rem} .brand__mark{font-family:var(--serif);font-style:italic;font-size:1.7rem;line-height:1;color:var(--blood)} .brand__name{font-family:var(--display);font-size:1.05rem;letter-spacing:.32em;text-transform:uppercase;color:var(--bone)} .brand__pill{ margin-left:.6rem;padding:.18rem .55rem; font-family:var(--mono);font-size:.6rem; letter-spacing:.18em;text-transform:uppercase; color:var(--blood);border:1px solid var(--blood-dim); } .site-nav{display:flex;gap:1.6rem;align-items:center} .site-nav a{ font-family:var(--mono);font-size:.7rem; letter-spacing:.22em;text-transform:uppercase; color:var(--text-dim);padding:.3rem 0; border-bottom:1px solid transparent; transition:color .12s, border-color .12s; } .site-nav a:hover{color:var(--text);border-color:var(--blood)} .site-nav .cta{ margin-left:.6rem;padding:.55rem 1.1rem; color:var(--blood);border:1px solid var(--blood-dim); letter-spacing:.18em; } .site-nav .cta:hover{background:var(--blood);color:var(--bg);border-color:var(--blood)} .site-nav .cta--secondary{ color:var(--text-dim);border-color:var(--rule-hi); } .site-nav .cta--secondary:hover{ background:transparent;color:var(--text);border-color:var(--text-dim); } main, body > section, body > footer { padding-top:0 } .hero{padding-top:108px} /* ─── hero ─────────────────────────────────────────────────── */ .hero{ min-height:100vh;position:relative;overflow:hidden; display:flex;flex-direction:column;justify-content:center; padding:5rem 2.4rem 4rem; } .hero::before{ content:"";position:absolute;inset:0;z-index:0; background: radial-gradient(ellipse at 22% 38%, rgba(200,40,30,.16) 0%, transparent 50%), radial-gradient(ellipse at 78% 78%, rgba(60,30,20,.45) 0%, transparent 55%), linear-gradient(180deg, #000 0%, #050505 100%); } .hero__inner{position:relative;z-index:2;max-width:1480px;margin:0 auto;width:100%} .hero__overline{ font-family:var(--mono);font-size:.74rem; color:var(--blood);letter-spacing:.4em;text-transform:uppercase; margin-bottom:2.6rem; display:flex;align-items:center;gap:1.2rem; } .hero__overline::after{ content:"";flex:1;height:1px; background:linear-gradient(90deg, var(--blood), transparent);max-width:320px; } .hero__rank{ font-family:var(--display);font-size:1.05rem; color:var(--text-mute);letter-spacing:.6em; margin-bottom:.4rem;text-transform:uppercase; } .hero__name{ font-family:var(--display); font-size:clamp(4.6rem, 16vw, 16rem); line-height:.84;letter-spacing:-.014em; color:var(--bone);text-transform:uppercase; margin-bottom:2.4rem; text-shadow:0 0 80px rgba(200,40,30,.08); } .hero__reign{ font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(1.3rem, 2.2vw, 2rem); color:var(--text-dim);max-width:62ch; margin-bottom:2.8rem;line-height:1.55; } .hero__reign em{color:var(--blood);font-style:italic} .hero__reign strong{color:var(--bone);font-weight:500;font-style:italic} .hero__stats{ display:grid;grid-template-columns:repeat(4,auto);gap:0; border-top:1px solid var(--rule); padding-top:1.4rem;max-width:840px; margin-bottom:2.6rem; } .hero__stat{padding-right:3rem} .hero__stat dt{ font-family:var(--mono);font-size:.62rem; color:var(--text-mute);letter-spacing:.18em;text-transform:uppercase; margin-bottom:.4rem; } .hero__stat dd{ font-family:var(--display);font-size:1.8rem; letter-spacing:.02em;color:var(--bone);line-height:1; } .hero__stat dd.blood{color:var(--blood)} .hero__cta{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem} .btn{ display:inline-block;padding:.85rem 1.6rem; font-family:var(--mono);font-size:.78rem; letter-spacing:.2em;text-transform:uppercase; color:var(--blood);border:1px solid var(--blood-dim); background:transparent;transition:all .12s; cursor:pointer; } .btn:hover{background:var(--blood);color:var(--bg);border-color:var(--blood)} .btn--primary{ background:var(--blood);color:var(--bg); border-color:var(--blood); padding:.95rem 1.8rem;font-size:.82rem; } .btn--primary:hover{background:var(--blood-hi);border-color:var(--blood-hi);color:var(--bg)} .btn--ghost{color:var(--text-dim);border-color:var(--rule-hi)} .btn--ghost:hover{color:var(--text);border-color:var(--text);background:transparent} .btn--block{width:100%} .hero__legal{ font-family:var(--serif);font-style:italic; color:var(--text-mute);font-size:.95rem; max-width:62ch; } /* ─── seções genéricas ─────────────────────────────────────── */ section.block{ padding:7rem 2.4rem; border-top:1px solid var(--rule); background:var(--bg); } section.block.alt{background:var(--bg-soft)} .block__head{max-width:1480px;margin:0 auto 4rem} .block__eyebrow{ font-family:var(--mono);font-size:.74rem; color:var(--blood);letter-spacing:.4em;text-transform:uppercase; margin-bottom:1.4rem; } .block__title{ font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(2.2rem, 4vw, 3.4rem); color:var(--text);margin-bottom:1rem;letter-spacing:-.005em;line-height:1.05; } .block__sub{ font-family:var(--serif);font-style:italic; color:var(--text-dim);font-size:1.15rem; max-width:72ch;line-height:1.55; } .block__sub em{color:var(--blood);font-style:italic} .block__sub strong{color:var(--bone);font-weight:500} /* ─── mecânicas grid ───────────────────────────────────────── */ .mechanics-grid{ max-width:1480px;margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:0; border:1px solid var(--rule); } .mech{ padding:2.2rem 2rem 1.8rem; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--bg); transition:background .15s; } .mech:hover{background:var(--bg-soft)} .mech__num{ font-family:var(--display);font-size:.85rem; color:var(--blood);letter-spacing:.4em; display:block;margin-bottom:.8rem; } .mech__title{ font-family:var(--display);font-size:1.7rem; line-height:1;text-transform:uppercase;color:var(--bone); margin-bottom:1rem;letter-spacing:-.005em; } .mech__pitch{ font-family:var(--serif);font-size:1.02rem; color:var(--text);line-height:1.55;margin-bottom:1rem; } .mech__pitch em{color:var(--blood);font-style:italic} .mech__pitch strong{color:var(--bone);font-weight:500;font-style:normal} .mech__pitch code{ font-family:var(--mono);font-size:.88em; color:var(--ember);background:var(--bg-card); padding:.05em .35em;border:1px solid var(--rule); } .mech__how{ font-family:var(--mono);font-size:.74rem; color:var(--text-mute);letter-spacing:.06em; border-top:1px solid var(--rule);padding-top:.8rem; } .mech__how code{font-family:var(--mono);color:var(--ember)} /* ─── regras ───────────────────────────────────────────────── */ .rules{ max-width:1480px;margin:0 auto; display:grid;grid-template-columns:repeat(3, 1fr);gap:0; border:1px solid var(--rule); } .rule{ padding:3rem 2.4rem; border-right:1px solid var(--rule); background:var(--bg); text-align:center; } .rule:last-child{border-right:none} .rule__num{ font-family:var(--display);font-size:1rem; color:var(--blood);letter-spacing:.5em; display:block;margin-bottom:1.2rem; } .rule__title{ font-family:var(--display);font-size:2.2rem; line-height:1;text-transform:uppercase;color:var(--bone); margin-bottom:1.2rem; } .rule__body{ font-family:var(--serif);font-style:italic; font-size:1.08rem;color:var(--text-dim); line-height:1.6; } .rule__body em{color:var(--blood);font-style:italic;font-weight:500} /* ─── compare table ────────────────────────────────────────── */ .compare{max-width:1080px;margin:0 auto;overflow-x:auto} .compare__table{ width:100%;border-collapse:collapse; font-family:var(--mono); } .compare__table thead th{ font-family:var(--mono);font-size:.7rem; color:var(--text-mute);letter-spacing:.18em;text-transform:uppercase; padding:1rem 1.2rem;text-align:left; border-bottom:1px solid var(--rule-hi); background:var(--bg-soft); } .compare__table thead th.ours{color:var(--blood)} .compare__table thead th.dim{color:var(--text-mute)} .compare__table tbody td{ padding:1rem 1.2rem; border-bottom:1px solid var(--rule); font-size:.92rem; vertical-align:top; } .compare__table tbody td:first-child{ font-family:var(--mono);color:var(--text); font-weight:500;width:24%; } .compare__table tbody td.dim{color:var(--text-mute);font-family:var(--serif);font-style:italic} .compare__table tbody td.ours{color:var(--bone);font-family:var(--serif)} /* ─── signup ────────────────────────────────────────────────── */ .signup{ max-width:680px;margin:0 auto; display:flex;flex-direction:column;gap:2rem; } .signup__form{ padding:2rem 2rem;background:var(--bg-card); border:1px solid var(--rule); } .signup__lbl{ display:block;font-family:var(--mono);font-size:.66rem; color:var(--text-mute);letter-spacing:.22em;text-transform:uppercase; margin-bottom:.7rem; } .signup__row{display:flex;gap:.6rem;flex-wrap:wrap} .signup__input{ flex:1;min-width:240px; background:var(--bg); border:1px solid var(--rule-hi); color:var(--text); font-family:var(--mono);font-size:.95rem; padding:.85rem 1rem; transition:border-color .12s; } .signup__input:focus{outline:none;border-color:var(--blood);box-shadow:0 0 0 1px var(--blood)} .signup__help{ margin-top:1rem; font-family:var(--serif);font-style:italic; color:var(--text-dim);font-size:.95rem;line-height:1.55; } .signup__help strong{color:var(--bone);font-weight:500;font-style:normal} .signup__alt{ display:flex;flex-direction:column;gap:.8rem;align-items:flex-start; } /* ─── manifesto ────────────────────────────────────────────── */ .manifesto{max-width:1080px;margin:0 auto;text-align:center} .manifesto__rule{ font-family:var(--mono);font-size:.74rem; color:var(--text-mute);letter-spacing:.32em;text-transform:uppercase; margin-bottom:3rem; } .manifesto__verse{ font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(1.7rem, 3vw, 2.6rem); line-height:1.3;color:var(--text); margin-bottom:2rem;letter-spacing:-.005em; } .manifesto__verse em{color:var(--blood);font-style:italic} .manifesto__sig{ font-family:var(--serif);font-style:italic; color:var(--text-dim);font-size:1rem; margin-top:3rem;letter-spacing:.04em; } /* ─── footer ───────────────────────────────────────────────── */ footer.site{ padding:3rem 2.4rem;background:var(--bg); border-top:1px solid var(--rule); display:grid;grid-template-columns:1fr 1fr 1fr;gap:3rem; max-width:1480px;margin:0 auto; } footer.site .col h4{ font-family:var(--mono);font-size:.66rem; color:var(--blood);letter-spacing:.22em;text-transform:uppercase; margin-bottom:1rem; } footer.site .col a, footer.site .col span{ display:block;font-family:var(--mono);font-size:.78rem; color:var(--text-dim);padding:.25rem 0; letter-spacing:.04em; } footer.site .col a:hover{color:var(--text)} footer.site .col span.dim{color:var(--text-mute);margin-top:.5rem} footer.site .colofon{ grid-column:1/-1;padding-top:2rem;margin-top:1rem; border-top:1px solid var(--rule); display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; font-family:var(--mono);font-size:.66rem; color:var(--text-mute);letter-spacing:.16em;text-transform:uppercase; } footer.site .colofon .blood{color:var(--blood-dim)} /* ─── responsivo ───────────────────────────────────────────── */ @media (max-width:900px){ .site-header{padding:1rem 1.4rem;flex-wrap:wrap;gap:.8rem} .site-nav{display:none} /* simples: nav some no mobile, hero CTAs viram entry point */ .hero{padding:6rem 1.4rem 3rem;min-height:auto} .hero__name{font-size:clamp(2.6rem,14vw,5rem)} .hero__stats{grid-template-columns:repeat(2,1fr);gap:.6rem 1rem} .hero__stat{padding-right:0} section.block{padding:4rem 1.4rem} .mechanics-grid{grid-template-columns:1fr;border:none} .mech{ border:1px solid var(--rule); margin-bottom:1rem; } .rules{grid-template-columns:1fr;border:none} .rule{ border:1px solid var(--rule); margin-bottom:1rem;border-right:1px solid var(--rule); } .compare__table thead th, .compare__table tbody td{padding:.7rem .8rem;font-size:.85rem} footer.site{grid-template-columns:1fr;gap:2rem;padding:2rem 1.4rem} }