:root { --background: #ffffff; --surface: #f3f6fc; --surface-alt: #e7effd; --outline: #e3e8f2; --primary: #2563eb; --primary-dark: #1e3fae; --pink: #f06fa8; --text: #161c2d; --muted: #8a93a8; --column: 62rem; --radius: 1.25rem; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--background); color: var(--text); font: 500 1rem/1.65 Quicksand, "Trebuchet MS", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-weight: 700; line-height: 1.15; margin: 0; } p { margin: 0; } a { color: var(--primary); } .bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: var(--column); margin: 0 auto; padding: 1.5rem 1.5rem 0; } .bar__mark { display: block; line-height: 0; } .bar__mark img { width: 9.5rem; height: auto; } .bar__nav { display: flex; gap: 1.5rem; } .bar__nav a { color: var(--muted); text-decoration: none; font-size: 0.95rem; } .bar__nav a:hover { color: var(--text); } @media (max-width: 30rem) { .bar__nav { display: none; } } .hero { max-width: var(--column); margin: 0 auto; padding: 4rem 1.5rem 3.5rem; text-align: center; } .hero__title { font-size: clamp(2.25rem, 7vw, 3.75rem); letter-spacing: -0.02em; } .hero__line { max-width: 34rem; margin: 1.25rem auto 0; color: var(--muted); font-size: 1.1rem; } .cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2.5rem; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; border-radius: 999px; font-weight: 700; text-decoration: none; transition: transform 0.12s ease, background-color 0.12s ease; } .button:hover { transform: translateY(-1px); } .button--store { background: var(--text); color: #ffffff; padding: 0.7rem 1.75rem; font-size: 1.05rem; text-align: left; } .button--store span { display: flex; flex-direction: column; line-height: 1.25; } .button--store small { font-weight: 500; font-size: 0.7rem; opacity: 0.75; } .button--play { display: flex; width: fit-content; margin: 1.75rem auto 0; background: var(--primary); color: #ffffff; padding: 1rem 2.25rem; font-size: 1.15rem; } .button--play:hover { background: var(--primary-dark); } .button[data-soon] { background: var(--surface-alt); color: var(--muted); pointer-events: none; } .cta__note { margin-top: 0.9rem; color: var(--muted); font-size: 0.85rem; } .steps, .marks, .games, .faq { max-width: var(--column); margin: 0 auto; padding: 3.5rem 1.5rem; } .steps h2, .games h2, .faq h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); text-align: center; margin-bottom: 2.5rem; } .steps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: step; } .steps__list li { background: var(--surface); border-radius: var(--radius); padding: 1.75rem; } .steps__number { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--primary); color: #ffffff; font-weight: 700; } .steps__list li:nth-child(2) .steps__number { background: var(--pink); } .steps__list h3 { margin: 1rem 0 0.5rem; font-size: 1.15rem; } .steps__list p { color: var(--muted); } .marks { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; padding-top: 0; } .mark { border: 1px solid var(--outline); border-radius: var(--radius); padding: 1.5rem; } .mark h3 { font-size: 1.05rem; margin-bottom: 0.4rem; } .mark p { color: var(--muted); font-size: 0.95rem; } .faq details { border-bottom: 1px solid var(--outline); padding: 1.15rem 0; } .faq details:first-of-type { border-top: 1px solid var(--outline); } .faq summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--primary); font-size: 1.4rem; line-height: 1; flex: none; } .faq details[open] summary::after { content: "\2013"; } .faq details p { color: var(--muted); margin-top: 0.7rem; max-width: 44rem; } .foot { border-top: 1px solid var(--outline); padding: 2.5rem 1.5rem 3rem; text-align: center; color: var(--muted); font-size: 0.9rem; } .foot__mark { display: block; margin: 0 auto 0.9rem; } .foot__fine { margin-top: 0.5rem; font-size: 0.8rem; } .games__line { text-align: center; color: var(--muted); margin: -1.75rem 0 2.5rem; } .games__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.5rem 1.25rem; } .game__art { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--surface); } .game__art img { display: block; width: 100%; height: 100%; object-fit: cover; } .game__art--tint { background: var(--tint); -webkit-mask: url(cover.png) center / cover; mask: url(cover.png) center / cover; } .game h3 { margin: 0.9rem 0 0.15rem; font-size: 1.1rem; } .game__players { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.5rem; } .game__body { color: var(--muted); font-size: 0.95rem; } .game__body + .game__body { margin-top: 0.5rem; } .foot__langs { display: flex; justify-content: center; gap: 1rem; margin-top: 1rem; } .foot__langs a { color: var(--muted); text-decoration: none; } .foot__langs a:hover { color: var(--text); } .foot__langs [aria-current] { color: var(--text); font-weight: 700; } .foot__contact { margin-top: 1rem; } .foot__mail { color: var(--muted); text-decoration: none; } .foot__mail:hover { color: var(--text); } .foot__legal { display: flex; justify-content: center; gap: 1rem; margin-top: 0.6rem; } .foot__legal a { color: var(--muted); text-decoration: none; } .foot__legal a:hover { color: var(--text); } .legal { max-width: 42rem; margin: 0 auto; padding: 3rem 1.5rem 4rem; } .legal h1 { font-size: 2rem; margin-bottom: 0.5rem; } .legal__date { color: var(--muted); margin-bottom: 2.5rem; } .legal h2 { font-size: 1.15rem; margin: 2.25rem 0 0.75rem; } .legal p, .legal li { margin-bottom: 0.9rem; line-height: 1.7; } .legal ul { padding-left: 1.25rem; } .legal a { color: var(--primary); }