/* ========================================================================= THE MINDGAMER — Founder Carrega depois de styles.css (tokens e moldura) e de painel.css (painel, avatar, itens do Founder, interruptor). Aqui só vive o que é desta tela. Dois estados, escolhidos por data-state no (ver founder.html): "founder" personaliza, "venda" mostra a oferta. ========================================================================= */ body[data-state="founder"] [data-show="venda"], body[data-state="venda"] [data-show="founder"] { display: none; } /* ================================================================ grade ===== */ /* coluna da esquerda um pouco mais estreita: é o destaque, ocupa as duas linhas */ .fpage { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } .fpage__main { grid-row: span 2; } /* ======================================================== seu Founder ===== */ .fnum { margin: calc(18 * var(--u)) 0 0; font-family: var(--font-brand); font-weight: 600; font-size: calc(112 * var(--u)); line-height: 1; letter-spacing: 0.03em; color: var(--founder); text-shadow: 0 0 calc(40 * var(--u)) rgb(226 196 141 / 0.22); } .fnum__caption { margin: calc(14 * var(--u)) 0 0; font-size: calc(20 * var(--u)); line-height: 1.3; color: var(--ink-2); } .flabel { margin: auto 0 calc(14 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); } .fstats { display: flex; gap: calc(56 * var(--u)); margin: calc(40 * var(--u)) 0 0; } .fstats dt { font-size: calc(40 * var(--u)); line-height: 1; color: var(--ink-0); font-variant-numeric: tabular-nums; } .fstats dd { margin: calc(8 * var(--u)) 0 0; font-size: calc(16 * var(--u)); line-height: 1.3; color: var(--ink-3); } /* a prévia: o verso na mesa e você numa lista */ .preview { display: flex; align-items: center; gap: calc(44 * var(--u)); padding: calc(30 * var(--u)) calc(34 * var(--u)); border: 1px solid rgb(170 195 255 / 0.14); border-radius: calc(10 * var(--u)); background: rgb(5 8 20 / 0.45); } .cardback--lg { width: calc(168 * var(--u)); height: calc(236 * var(--u)); border-radius: calc(12 * var(--u)); } .cardback--lg::before { inset: calc(8 * var(--u)); border-radius: calc(7 * var(--u)); } .cardback--lg .cardback__num { bottom: calc(20 * var(--u)); font-size: calc(17 * var(--u)); } .preview__who { display: flex; flex-direction: column; align-items: flex-start; gap: calc(16 * var(--u)); min-width: 0; } .preview__name { max-width: 100%; font-size: calc(40 * var(--u)); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-0); } /* ============================================================ escolhas ===== */ .choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(18 * var(--u)); } .choice { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); border: 1px solid rgb(170 195 255 / 0.16); border-radius: calc(10 * var(--u)); background: rgb(5 8 20 / 0.35); cursor: pointer; transition: border-color .18s var(--ease); } .choice:hover { border-color: rgb(170 195 255 / 0.4); } /* o rádio de verdade fica invisível; o cartão inteiro é o alvo do clique */ .choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; } .choice:has(input:checked) { border-color: rgb(226 196 141 / 0.7); background: rgb(226 196 141 / 0.05); } .choice__name { font-size: calc(21 * var(--u)); line-height: 1; color: var(--ink-0); } .choice__state { font-size: calc(13 * var(--u)); line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: var(--founder); visibility: hidden; } .choice:has(input:checked) .choice__state { visibility: visible; } /* moldura: escolha em linha, avatar ao lado do nome */ .choices--row .choice { flex-direction: row; justify-content: flex-start; gap: calc(16 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); } .choices--row .choice__state { margin-left: auto; } .choices--row + .setting { margin-top: calc(10 * var(--u)); border-top: 0; } /* =============================================================== oferta ===== */ .offer__title { margin: calc(12 * var(--u)) 0 calc(18 * var(--u)); font-family: var(--font-serif); font-weight: 400; font-size: calc(66 * var(--u)); line-height: 1; letter-spacing: -0.01em; color: var(--ink-0); } .offer__text { max-width: calc(560 * var(--u)); margin: 0; font-size: calc(21 * var(--u)); line-height: 1.45; color: var(--ink-2); } .offer__count { margin-top: calc(34 * var(--u)); } .offer__countrow { display: flex; justify-content: space-between; gap: calc(16 * var(--u)); margin: 0 0 calc(12 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1; color: var(--ink-2); } .offer__countrow strong { font-weight: 500; color: var(--ink-0); } .offer__countrow .gold { color: var(--founder); } .meter--gold { display: block; height: calc(14 * var(--u)); box-shadow: inset 0 0 0 1px rgb(226 196 141 / 0.3); } .meter--gold i { background: linear-gradient(90deg, #8c6b3c, var(--founder) 75%, #f5e7c8); box-shadow: 0 0 calc(10 * var(--u)) rgb(226 196 141 / 0.45); } .offer__buy { margin-top: auto; } .offer__price { margin: 0 0 calc(18 * var(--u)); font-size: calc(54 * var(--u)); line-height: 1; color: var(--ink-0); } .offer__price span { margin-left: calc(12 * var(--u)); font-size: calc(19 * var(--u)); color: var(--ink-3); } /* mesmo formato do JOGAR da Home, em ouro */ .buy { display: block; width: 100%; height: calc(74 * var(--u)); border: calc(1.5 * var(--u)) solid rgb(226 196 141 / 0.85); border-radius: calc(10 * var(--u)); background: radial-gradient(80% 90% at 50% 0%, rgb(226 196 141 / 0.14), transparent 70%), linear-gradient(180deg, rgb(34 30 30 / 0.7), rgb(14 14 24 / 0.85)); color: var(--founder); font: 400 calc(22 * var(--u))/1 var(--font-serif); letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 0 calc(24 * var(--u)) rgb(226 196 141 / 0.1); transition: border-color .18s var(--ease); } .buy:hover, .buy:focus-visible { border-color: #f1ddb4; } .offer__fine { margin: calc(14 * var(--u)) 0 0; font-size: calc(16 * var(--u)); line-height: 1; text-align: center; color: var(--ink-3); } /* últimos Founders */ .flabel--recent { margin-top: calc(38 * var(--u)); } .recent { margin: 0; padding: 0; list-style: none; } .recent li { display: grid; grid-template-columns: calc(96 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(16 * var(--u)); height: calc(44 * var(--u)); border-top: 1px solid rgb(170 195 255 / 0.10); } .recent li:first-child { border-top: 0; } .recent .founder--sm { justify-self: start; } .recent__name { font-size: calc(19 * var(--u)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-1); } .recent__when { font-size: calc(15 * var(--u)); line-height: 1; color: var(--ink-3); } /* ------------------------------------------------------------- itens ----- */ .perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(20 * var(--u)); height: 100%; margin: 0; padding: 0; list-style: none; } .perks li { display: flex; flex-direction: column; align-items: center; text-align: center; } .perks__visual { display: grid; place-items: center; height: calc(170 * var(--u)); margin-bottom: calc(14 * var(--u)); } .perks__text { display: flex; flex-direction: column; align-items: center; } .perks__name { margin-bottom: calc(8 * var(--u)); font-size: calc(22 * var(--u)); line-height: 1.1; color: var(--ink-0); } .perks__where { font-size: calc(16 * var(--u)); line-height: 1.35; color: var(--ink-3); } /* ------------------------------------------------------------ regras ----- */ .rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(22 * var(--u)) calc(34 * var(--u)); margin: calc(8 * var(--u)) 0 0; padding: 0; list-style: none; } .rules li { display: flex; gap: calc(12 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.4; color: var(--ink-2); } .rules .founder__star { margin-top: calc(6 * var(--u)); color: var(--founder); } .rules b { font-weight: 500; color: var(--ink-0); } /* ==================================================== telas estreitas ===== */ @media (max-width: 900px), (max-aspect-ratio: 1/1) { .fpage { grid-template-columns: minmax(0, 1fr); } .fpage__main { grid-row: auto; } .fnum { font-size: calc(96 * var(--u)); } .fnum__caption, .offer__text, .offer__countrow { font-size: max(13px, calc(20 * var(--u))); } .flabel { margin-top: calc(34 * var(--u)); } .preview { gap: calc(28 * var(--u)); padding: calc(22 * var(--u)); } .cardback--lg { width: calc(130 * var(--u)); height: calc(182 * var(--u)); } .offer__buy { margin-top: calc(40 * var(--u)); } .offer__fine, .perks__where, .choice__state { font-size: max(11px, calc(16 * var(--u))); } .perks__name, .choice__name { font-size: max(14px, calc(22 * var(--u))); } .fstats dd, .recent__when { font-size: max(11px, calc(16 * var(--u))); } .recent__name { font-size: max(13px, calc(19 * var(--u))); } .recent li { grid-template-columns: auto minmax(0, 1fr) auto; height: auto; padding: calc(10 * var(--u)) 0; } /* uma coluna só, cada item centralizado como no desktop */ .perks { grid-template-columns: minmax(0, 1fr); gap: calc(40 * var(--u)); } .perks__visual { height: auto; min-height: calc(120 * var(--u)); } .choices--row { grid-template-columns: minmax(0, 1fr); gap: calc(12 * var(--u)); } .offer__title { font-size: calc(58 * var(--u)); } .rules { grid-template-columns: minmax(0, 1fr); } .rules li { font-size: max(13px, calc(19 * var(--u))); } }