/* ========================================================================== TESLES.FI – TYYLIT (versio 4) -------------------------------------------------------------------------- Ilme on johdettu suoraan Discord-palvelimen omasta visuaalisesta kielestä: Tesles™ Systemsin bannerit (valkoinen ikonialue, punainen vinoviiva, tumma otsikkoalue), upotukset punaisella reunalla, "≫—— Otsikko ———➤"-erottimet ja kursivoidut kanavanimet. 1. Muuttujat 6. Bannerit ja sivujen yläosat 11. Tilastot 2. Perusta 7. Kortit, upotukset, hinnat 12. Pelikeskus, UKK 3. Typografia 8. Discord-mallit 13. Lemmikit 4. Painikkeet 9. Etusivu 14. Animaatiot 5. Yläpalkki/ala 10. Kauppatori, studio, kasino 15. Responsiivisuus ========================================================================== */ /* ---------- 1. MUUTTUJAT ---------- */ :root { --bg: #050506; --bg-2: #0b0b0d; --bg-3: #121215; --bg-4: #1a1a1e; --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14); --text: #f4f4f5; --text-2: #c8c8cf; --muted: #8d8d97; --dim: #5f5f69; --red: #cb0000; --red-2: #ff2b2b; --red-3: #ff5c5c; --red-deep: #5a0000; --red-glow: rgba(255, 30, 30, .35); --gold: #ffb400; --green: #23a55a; --amber: #f0b232; --blurple: #5865f2; --pink: #ff2fc8; --f-display: "Archivo", "Arial Black", system-ui, sans-serif; --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --f-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --r-xl: 28px; --r-lg: 20px; --r: 14px; --r-sm: 10px; --wrap: 1240px; --pad: clamp(20px, 4vw, 40px); --hdr: 72px; --ease: cubic-bezier(.2, .7, .2, 1); --shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); } /* ---------- 2. PERUSTA ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 64px); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: 16px; line-height: 1.6; font-stretch: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } ::selection { background: var(--red); color: #fff; } :focus-visible { outline: 2px solid var(--red-2); outline-offset: 3px; border-radius: 6px; } [hidden] { display: none !important; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); } .wrap--narrow { max-width: 880px; } .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; background: #fff; color: #000; padding: 10px 16px; border-radius: 10px; font-weight: 700; transition: top .2s; } .skip-link:focus { top: 12px; } main { display: block; } .sec { padding-block: clamp(72px, 10vw, 136px); position: relative; } .sec--tight { padding-block: clamp(44px, 6vw, 80px); } .sec--top0 { padding-top: 0; } .sec--line { border-top: 1px solid var(--line); } .sec--panel { background: linear-gradient(180deg, var(--bg-2), var(--bg) 85%); border-top: 1px solid var(--line); } /* Hienovarainen kohina koko sivulle */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background: radial-gradient(1200px 600px at 85% -10%, rgba(203, 0, 0, .14), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(203, 0, 0, .06), transparent 60%); } /* ---------- 3. TYPOGRAFIA ---------- */ .display, .h1, .h2, .h3 { font-family: var(--f-display); margin: 0; letter-spacing: -.01em; } .display { font-stretch: 100%; font-weight: 900; text-transform: uppercase; font-size: clamp(44px, 8.4vw, 124px); line-height: .9; letter-spacing: -.035em; } .h1 { font-stretch: 100%; font-weight: 850; text-transform: uppercase; font-size: clamp(34px, 4.9vw, 74px); line-height: .94; letter-spacing: -.03em; } .h2 { font-stretch: 100%; font-weight: 800; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -.025em; } .h3 { font-stretch: 100%; font-weight: 750; font-size: clamp(20px, 2vw, 26px); line-height: 1.15; } .h4 { font-family: var(--f-display); font-stretch: 100%; font-weight: 700; font-size: 18px; line-height: 1.25; margin: 0; } .lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--text-2); margin: 0; max-width: 62ch; } .muted { color: var(--muted); } .dim { color: var(--dim); } .red { color: var(--red-2); } .serif { font-family: var(--f-serif); font-style: italic; font-weight: 700; letter-spacing: 0; } .mono { font-family: var(--f-mono); font-size: .92em; } .stroke { -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85); color: transparent; } .hl { color: var(--red-2); } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } /* Discordin "≫—— Otsikko ———➤" -erotin */ .kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-family: var(--f-serif); font-style: italic; font-weight: 700; font-size: 17px; color: var(--text-2); white-space: nowrap; } .kicker::before { content: "≫—"; font-style: normal; font-family: var(--f-body); color: var(--muted); letter-spacing: -.15em; white-space: nowrap; flex: none; } .kicker::after { content: ""; flex: 0 1 120px; min-width: 28px; height: 10px; background: linear-gradient(currentColor, currentColor) left center / calc(100% - 9px) 1.5px no-repeat, conic-gradient(from -116deg at 100% 50%, currentColor 52deg, transparent 0) right center / 10px 10px no-repeat; color: var(--muted); opacity: .8; } .kicker--red::after { color: var(--red-2); } .kicker b { color: var(--text); font-weight: 700; } .kicker--center { justify-content: center; } .feature__txt .kicker, .p-hero__aside .kicker, .shop__side .kicker { justify-self: stretch; } .sec-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px 64px; align-items: start; margin-bottom: clamp(36px, 5vw, 64px); } .sec-head--stack { grid-template-columns: 1fr; max-width: 820px; } .sec-head--center { grid-template-columns: 1fr; text-align: center; justify-items: center; max-width: 860px; margin-inline: auto; } .sec-head .lead { justify-self: start; } .sec-head:not(.sec-head--center):not(.sec-head--stack) > :nth-child(2) { padding-top: 46px; } @media (max-width: 1023px) { .sec-head:not(.sec-head--center):not(.sec-head--stack) > :nth-child(2) { padding-top: 0; } } .sec-head--center .lead { justify-self: center; } /* ---------- 4. PAINIKKEET JA PIENET OSAT ---------- */ .btn { --h: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 15px; letter-spacing: .005em; white-space: nowrap; transition: transform .25s var(--ease), background .25s, box-shadow .25s, border-color .25s, color .25s; border: 1px solid transparent; position: relative; isolation: isolate; } .btn svg { width: 19px; height: 19px; flex: none; } .btn:active { transform: translateY(1px) scale(.98); } .btn--red { background: linear-gradient(180deg, #e10a0a, #b40000); color: #fff; box-shadow: 0 12px 34px -12px var(--red-glow), inset 0 1px 0 rgba(255, 255, 255, .22); } .btn--red:hover { background: linear-gradient(180deg, #ff1d1d, #c80000); box-shadow: 0 18px 44px -12px rgba(255, 30, 30, .55), inset 0 1px 0 rgba(255, 255, 255, .25); transform: translateY(-1px); } .btn--white { background: #fff; color: #0b0b0d; } .btn--white:hover { background: #ffecec; transform: translateY(-1px); } .btn--line { border-color: var(--line-2); background: rgba(255, 255, 255, .03); } .btn--line:hover { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .07); } .btn--ghost { color: var(--text-2); padding-inline: 14px; } .btn--ghost:hover { color: #fff; } .btn--sm { --h: 40px; padding: 0 18px; font-size: 14px; } .btn--xs { --h: 34px; padding: 0 14px; font-size: 13px; gap: 7px; } .btn--xs svg { width: 15px; height: 15px; } .btn--lg { --h: 60px; padding: 0 34px; font-size: 16.5px; } .btn--block { width: 100%; } .btn .arrow { transition: transform .25s var(--ease); } .btn:hover .arrow { transform: translateX(3px); } .chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; } .chip--red { background: rgba(203, 0, 0, .14); border-color: rgba(255, 43, 43, .35); color: #ffb3b3; } .chip--gold { background: rgba(255, 180, 0, .1); border-color: rgba(255, 180, 0, .3); color: #ffd780; } .chip svg { width: 14px; height: 14px; } .coin { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.16em; background: url("../assets/kolikko-128.png") center / contain no-repeat; flex: none; filter: drop-shadow(0 2px 4px rgba(150, 70, 0, .35)); } .coin--lg { width: 1.2em; height: 1.2em; vertical-align: -.22em; } .price { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--f-display); font-stretch: 100%; } .price small { font-family: var(--f-body); font-stretch: 100%; font-weight: 500; color: var(--muted); font-size: .8em; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; flex: none; position: relative; box-shadow: 0 0 0 0 rgba(35, 165, 90, .6); animation: livePulse 2.2s infinite; } .live-dot[data-state="warn"] { background: var(--amber); animation: none; } .live-dot[data-state="off"] { background: var(--dim); animation: none; } .live-dot--red { background: var(--red-2); box-shadow: 0 0 0 0 rgba(255, 43, 43, .6); animation-name: livePulseRed; } .skeleton { color: transparent !important; background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.11), rgba(255,255,255,.05)); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; border-radius: 8px; } .ico { width: 22px; height: 22px; flex: none; } /* Valintapainikeryhmä */ .seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); flex-wrap: wrap; } .seg button { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; transition: background .2s, color .2s; } .seg button svg { width: 15px; height: 15px; } .seg button:hover { color: #fff; } .seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: #fff; color: #0b0b0d; } /* ---------- 5. YLÄPALKKI JA ALATUNNISTE ---------- */ .hdr { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--hdr); transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; } .hdr.is-scrolled, body.menu-open .hdr { background: rgba(5, 5, 6, .78); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-color: var(--line); } .hdr__in { height: 100%; display: flex; align-items: center; gap: 28px; } .brand { display: flex; align-items: center; flex: none; } .brand img { width: 118px; height: auto; } .nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; } .nav a { position: relative; padding: 8px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--text-2); transition: color .2s, background .2s; } .nav a:hover { color: #fff; background: rgba(255, 255, 255, .05); } .nav a[aria-current="page"] { color: #fff; } .nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 16px; height: 2px; margin-left: -8px; background: var(--red-2); border-radius: 2px; } .hdr__end { display: flex; align-items: center; gap: 12px; flex: none; } .live-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; } .live-pill b { color: #fff; } .menu-btn { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); position: relative; } .menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); } .menu-btn span:first-child { top: 16px; } .menu-btn span:last-child { top: 25px; } body.menu-open .menu-btn span:first-child { top: 21px; transform: rotate(45deg); } body.menu-open .menu-btn span:last-child { top: 21px; transform: rotate(-45deg); } .mnav { position: fixed; inset: var(--hdr) 0 0; z-index: 99; background: rgba(5, 5, 6, .97); backdrop-filter: blur(20px); padding: 18px var(--pad) 40px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .3s var(--ease), visibility .3s; } body.menu-open { overflow: hidden; } body.menu-open .mnav { opacity: 1; visibility: visible; transform: none; } .mnav a:not(.btn) { display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-stretch: 100%; font-weight: 800; font-size: 24px; text-transform: uppercase; letter-spacing: -.01em; } .mnav a[aria-current="page"] { color: var(--red-2); } .mnav a svg { width: 22px; height: 22px; color: var(--muted); } .mnav .btn { margin-top: 26px; } .ftr { position: relative; border-top: 1px solid var(--line); background: #000; padding: clamp(64px, 8vw, 104px) 0 32px; overflow: hidden; } .ftr__glow { position: absolute; left: 50%; bottom: -320px; width: 1100px; height: 520px; margin-left: -550px; background: radial-gradient(closest-side, rgba(203, 0, 0, .35), transparent); pointer-events: none; } .ftr__top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; position: relative; } .ftr__brand img { width: 190px; margin-bottom: 22px; } .ftr__brand p { color: var(--muted); max-width: 36ch; margin-bottom: 26px; } .ftr h4 { margin: 4px 0 16px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 700; } .ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .ftr ul a { color: var(--text-2); transition: color .2s; } .ftr ul a:hover { color: #fff; } .ftr__sign { position: relative; margin-top: clamp(56px, 7vw, 90px); padding-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px; font-size: 13.5px; color: var(--muted); } .ftr__sign::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #e00000, #8c0000); } .ftr__sign .serif { color: var(--text); font-size: 17px; display: block; margin-top: 2px; } .ftr__mega { position: relative; margin-top: 54px; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; font-size: clamp(46px, 13.5vw, 196px); line-height: .8; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .12); user-select: none; white-space: nowrap; } /* ---------- 6. BANNERIT JA SIVUJEN YLÄOSAT ---------- */ /* Tesles™ Systems -bannerin uudelleentulkinta: valkoinen ikonialue | punainen vinoviiva | tumma otsikkoalue */ .banner { --cut: 33%; position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; display: grid; grid-template-columns: var(--cut) 1fr; align-items: center; aspect-ratio: 3.6 / 1; min-width: 0; border-radius: var(--r-xl); background: radial-gradient(60% 90% at 78% 20%, rgba(255, 255, 255, .14), transparent 60%), radial-gradient(70% 120% at 70% 110%, rgba(110, 110, 120, .5), transparent 60%), linear-gradient(100deg, #170000 30%, #3a0303 55%, #51151a 75%, #6b6b72 120%); box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .06); } .banner::before { /* valkoinen alue vinolla reunalla */ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, #ffffff, #ececef); clip-path: polygon(0 0, calc(var(--cut) + 6%) 0, calc(var(--cut) - 6%) 100%, 0 100%); } .banner::after { /* punainen vinoviiva */ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #ff1a1a, #9c0000); clip-path: polygon(calc(var(--cut) + 6%) 0, calc(var(--cut) + 9.5%) 0, calc(var(--cut) - 2.5%) 100%, calc(var(--cut) - 6%) 100%); box-shadow: 0 0 40px red; } .banner__shape { position: absolute; z-index: -1; right: -4%; top: -30%; width: 46%; aspect-ratio: 1; border-radius: 40px; border: 28px solid rgba(255, 255, 255, .06); transform: rotate(18deg); filter: blur(6px); } .banner__icon { display: grid; place-items: center; padding: 22px 12% 22px 8%; } .banner__icon svg { width: clamp(30px, 15cqi, 168px); height: auto; filter: drop-shadow(0 10px 14px rgba(120, 0, 0, .35)); } .banner__txt { text-align: center; padding: 4cqi 4cqi 4cqi 7cqi; display: grid; justify-items: center; gap: 0; min-width: 0; } .banner__logo { width: clamp(36px, 11cqi, 128px); margin-bottom: 1cqi; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); } .banner__title { margin: 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; text-transform: uppercase; color: #fff; letter-spacing: -.02em; line-height: .92; white-space: nowrap; font-size: clamp(14px, min(8.4cqi, calc(66cqi / var(--len, 10))), 104px); text-shadow: 0 4px 0 rgba(0, 0, 0, .3), 0 14px 30px rgba(0, 0, 0, .45); } .banner__sub { white-space: nowrap; margin: 1.2cqi 0 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 800; text-transform: uppercase; color: #fff; letter-spacing: .02em; font-size: clamp(7px, min(2.4cqi, calc(52cqi / var(--slen, 20))), 26px); text-shadow: 0 3px 10px rgba(0, 0, 0, .5); } .banner--purple { background: radial-gradient(60% 90% at 78% 20%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(100deg, #1d0018 30%, #4a0444 60%, #6f6f78 120%); } .banner--purple::after { background: linear-gradient(180deg, #ff2fc8, #8e0a8a); } .p-hero { padding: calc(var(--hdr) + clamp(20px, 3vw, 36px)) 0 0; position: relative; } .p-hero__intro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 64px; align-items: start; padding: clamp(40px, 5.5vw, 76px) 0 clamp(16px, 2vw, 24px); } .p-hero__intro .h1 { max-width: 13ch; } .p-hero__aside { display: grid; gap: 22px; justify-items: start; padding-top: 6px; } .p-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; } /* Sivun sisäinen navigaatio */ .subnav { position: sticky; top: var(--hdr); z-index: 50; background: rgba(5, 5, 6, .86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-block: 1px solid var(--line); margin-top: clamp(28px, 4vw, 48px); } .subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; height: 56px; align-items: center; } .subnav .wrap::-webkit-scrollbar { display: none; } .subnav a { flex: none; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); transition: color .2s, background .2s; } .subnav a:hover { color: #fff; } .subnav a.is-active { color: #fff; background: rgba(255, 255, 255, .08); } /* ---------- 7. KORTIT, UPOTUKSET, HINNAT ---------- */ .card { position: relative; border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 32px); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015)); border: 1px solid var(--line); transition: border-color .3s, transform .35s var(--ease), background .3s; } a.card:hover, .card--hover:hover { border-color: rgba(255, 255, 255, .2); transform: translateY(-3px); } .card__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(180deg, #e10a0a, #a00000); color: #fff; box-shadow: 0 14px 28px -12px var(--red-glow), inset 0 1px 0 rgba(255,255,255,.25); margin-bottom: 20px; } .card__ic svg { width: 24px; height: 24px; } .card h3 { margin: 0 0 8px; } .card p { color: var(--muted); margin: 0; } /* Discord-upotus: punainen vasen reuna ja Tesles-allekirjoitus */ .embed { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-left: 4px solid var(--c, var(--red)); border-radius: 8px var(--r) var(--r) 8px; padding: clamp(20px, 2.4vw, 30px); } .embed__title { font-family: var(--f-display); font-stretch: 100%; font-weight: 800; font-size: clamp(20px, 2vw, 26px); margin: 0 0 14px; line-height: 1.15; } .embed__h { font-weight: 800; font-size: 16px; margin: 20px 0 8px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .embed__h:first-child { margin-top: 0; } .quote { border-left: 4px solid #4e5058; padding: 2px 0 2px 14px; color: var(--text-2); border-radius: 2px; margin: 0; } .quote + .quote { margin-top: 10px; } .embed__foot { margin-top: 22px; padding-top: 16px; position: relative; font-size: 13px; color: var(--text-2); } .embed__foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--c2, #e00000), var(--c3, #8c0000)); } .embed__foot .serif { display: block; color: #fff; font-size: 14.5px; } /* Ruudukot */ .grid { display: grid; gap: clamp(14px, 1.6vw, 22px); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } /* Hinnasto-rivit */ .pricelist { list-style: none; margin: 0; padding: 0; } .pricelist li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px dashed var(--line-2); } .pricelist li:last-child { border-bottom: 0; } .pricelist li span:first-child { color: var(--text-2); } .notice { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r); background: rgba(255, 255, 255, .03); border: 1px solid var(--line); color: var(--text-2); font-size: 14.5px; } .notice svg { width: 20px; height: 20px; flex: none; color: var(--red-2); margin-top: 2px; } .notice strong { color: #fff; } .empty { padding: 28px 8px; text-align: center; color: var(--muted); font-size: 14.5px; } .toast { position: fixed; left: 50%; bottom: 28px; z-index: 300; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #fff; color: #0b0b0d; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 14.5px; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .7); transition: opacity .3s, transform .35s var(--ease); } .toast.is-on { opacity: 1; transform: translate(-50%, 0); } .avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--bg-4); flex: none; } .avatar--lg { width: 64px; height: 64px; } .avatar--xl { width: 84px; height: 84px; } /* ---------- 8. DISCORD-MALLIT ---------- */ .dc { --dc-bg: #313338; --dc-side: #2b2d31; --dc-text: #dbdee1; --dc-muted: #949ba4; --dc-head: #f2f3f5; --dc-line: #3f4147; border-radius: var(--r-lg); overflow: hidden; background: var(--dc-bg); color: var(--dc-text); font-family: "gg sans", "Noto Sans", var(--f-body); box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, .06); } .dc--black { --dc-bg: #000; --dc-side: #0a0a0b; --dc-line: #1e1f22; } .dc--light { --dc-bg: #ffffff; --dc-side: #f2f3f5; --dc-text: #313338; --dc-muted: #5c5e66; --dc-head: #060607; --dc-line: #e3e5e8; } .dc__bar { height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--dc-line); font-weight: 700; color: var(--dc-head); font-size: 15px; } .dc__bar .hash { color: var(--dc-muted); font-size: 22px; font-weight: 400; margin-right: 2px; } .dc__bar .serif { font-size: 15.5px; } .dc__body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; min-height: 300px; } .dc__chat { padding: 16px 6px 18px 0; } .dc__side { background: var(--dc-side); padding: 18px 10px; } .dc__group { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--dc-muted); padding: 0 8px 6px; } .dc__day { display: flex; align-items: center; gap: 8px; margin: 0 16px 10px; font-size: 12px; font-weight: 600; color: var(--dc-muted); } .dc__day::before, .dc__day::after { content: ""; flex: 1; height: 1px; background: var(--dc-line); } .dc-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 6px 16px; } .dc-msg:hover { background: rgba(0, 0, 0, .06); } .dc-msg__av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .dc-msg__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.3; } .dc-name { font-weight: 600; color: var(--dc-head); font-size: 16px; } .dc-name--glow { background: linear-gradient(90deg, var(--g1), var(--g2), var(--g1)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: glowSlide 3.2s linear infinite; } .dc-name--serif { font-family: var(--f-serif); font-style: italic; font-weight: 700; } .dc-badge { width: 20px; height: 20px; object-fit: contain; } .dc-app { background: var(--blurple); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 4px; line-height: 1.4; } .dc-time { color: var(--dc-muted); font-size: 12px; margin-left: 2px; } .dc-msg__txt { color: var(--dc-text); font-size: 15.5px; line-height: 1.45; } .dc-mention { background: rgba(88, 101, 242, .3); color: #c9cdfb; padding: 0 3px; border-radius: 4px; font-weight: 500; } .dc--light .dc-mention { color: #3c45c5; background: rgba(88, 101, 242, .15); } .dc-member { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; min-width: 0; } .dc-member img:first-child { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; } .dc-member .dc-name { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dc-member--you { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .dc--light .dc-member--you { background: rgba(0, 0, 0, .05); } .dc-member--dim { opacity: .45; } .dc-embed { margin-top: 6px; max-width: 460px; background: #111214; border-left: 4px solid var(--red); border-radius: 4px; padding: 12px 14px 14px; display: grid; gap: 8px; } .dc--black .dc-embed { background: #0d0d0f; border-top: 1px solid #1e1f22; border-right: 1px solid #1e1f22; border-bottom: 1px solid #1e1f22; } .dc-embed__banner { display: block; border-radius: 6px; overflow: hidden; } .dc-embed__banner .banner { border-radius: 6px; min-height: 0; aspect-ratio: 4.8 / 1; box-shadow: none; } .dc-embed__banner .banner__icon { padding: 6px 10% 6px 6%; } .dc-embed h5 { margin: 4px 0 0; font-size: 19px; font-weight: 800; color: #fff; } .dc-embed h6 { margin: 6px 0 0; font-size: 14.5px; font-weight: 800; color: #fff; text-decoration: underline; text-underline-offset: 3px; } .dc-embed .quote { font-size: 14px; border-left-color: #4e5058; padding-left: 10px; } .dc-embed__foot { padding-top: 10px; margin-top: 4px; position: relative; font-size: 12px; color: #dbdee1; } .dc-embed__foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #e00000, #8c0000); } .dc-embed__foot .serif { display: block; font-size: 12.5px; color: #fff; } .dc-button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 8px; background: #1e1f22; border: 1px solid #2e3035; font-size: 14px; font-weight: 500; color: #dbdee1; } .dc-button--green { background: #248046; border-color: #248046; color: #fff; } .dc-button--red { background: #da373c; border-color: #da373c; color: #fff; } /* Kanavaselain (Discordin sivupalkki) */ .chbrowser { display: grid; grid-template-columns: 320px minmax(0, 1fr); border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: #000; box-shadow: var(--shadow); min-height: 620px; } .chlist { background: #000; border-right: 1px solid #1e1f22; max-height: 680px; overflow-y: auto; padding: 0 10px 18px; scrollbar-width: thin; scrollbar-color: #2b2d31 transparent; } .chlist__srv { position: sticky; top: 0; z-index: 2; margin: 0 -10px 8px; padding: 14px 16px; background: linear-gradient(180deg, #000 70%, rgba(0,0,0,0)); display: flex; align-items: center; gap: 10px; font-weight: 700; } .chlist__srv img { width: 28px; height: 28px; border-radius: 8px; } .chcat { margin-top: 14px; } .chcat__name { display: flex; align-items: center; gap: 6px; padding: 6px 6px; font-family: var(--f-serif); font-style: italic; font-weight: 700; font-size: 13px; color: #949ba4; white-space: nowrap; overflow: hidden; } .chcat__name::before { content: "≫—"; font-family: var(--f-body); font-style: normal; letter-spacing: -.15em; margin-right: 2px; } .chcat__name::after { content: "———————————➤"; letter-spacing: -.12em; font-style: normal; opacity: .9; overflow: hidden; } .ch { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 6px; color: #80848e; text-align: left; transition: background .15s, color .15s; } .ch:hover { background: #1a1b1e; color: #dbdee1; } .ch[aria-selected="true"] { background: #232428; color: #fff; } .ch__type { width: 20px; flex: none; color: #80848e; display: grid; place-items: center; } .ch__type svg { width: 18px; height: 18px; } .ch__emoji { width: 20px; text-align: center; flex: none; font-size: 15px; } .ch__name { font-family: var(--f-serif); font-style: italic; font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ch__name::before { content: "|"; font-style: normal; margin-right: 2px; opacity: .8; } .chview { padding: clamp(24px, 3vw, 44px); display: grid; align-content: start; gap: 22px; background: radial-gradient(700px 400px at 100% 0, rgba(203, 0, 0, .12), transparent 60%), #050506; } .chview__head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #1e1f22; } .chview__head .ch__name { font-size: 22px; color: #fff; } .chview__head .ch__emoji { font-size: 22px; width: auto; } .chview__cat { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 700; } .chview__desc { font-size: 18px; color: var(--text-2); max-width: 56ch; } .chview__facts { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------- 9. ETUSIVU ---------- */ .hero { position: relative; padding: calc(var(--hdr) + clamp(40px, 7vw, 90px)) 0 clamp(64px, 8vw, 110px); overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero__bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%); } .hero__glow { position: absolute; right: -10%; top: -20%; width: 70vw; max-width: 1000px; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(220, 0, 0, .42), rgba(203, 0, 0, .1) 55%, transparent); filter: blur(10px); animation: heroGlow 12s ease-in-out infinite alternate; } .hero__banner { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s; mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 75%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 75%); filter: saturate(.9) brightness(.55); } .hero__banner.is-on { opacity: .55; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .hero__pill { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); font-size: 14px; color: var(--text-2); margin-bottom: 30px; font-variant-numeric: tabular-nums; } .hero__pill b { color: #fff; } .hero__pill .sep { width: 1px; height: 14px; background: var(--line-2); } .hero h1 { margin-bottom: 28px; } .hero h1 { font-stretch: 100%; font-size: clamp(44px, 6.1vw, 96px); } .hero h1 .line { display: block; overflow: hidden; padding: .14em 0 .04em; margin-top: -.14em; } .hero h1 .line > span { display: inline-block; } .hero__tag { font-family: var(--f-serif); font-style: italic; font-weight: 700; font-size: clamp(19px, 1.9vw, 25px); color: #fff; margin: 0 0 14px; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .hero__trust { display: flex; align-items: center; gap: 14px; margin-top: 34px; color: var(--muted); font-size: 14px; } .avstack { display: flex; } .avstack img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -10px; object-fit: cover; background: var(--bg-3); } .avstack img:first-child { margin-left: 0; } .hero__visual { position: relative; } .hero__visual .dc { transform: perspective(1600px) rotateY(-9deg) rotateX(3deg); transform-origin: left center; transition: transform .8s var(--ease); } .hero__visual:hover .dc { transform: perspective(1600px) rotateY(-3deg) rotateX(1deg); } .hero__float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(18, 18, 21, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-2); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .8); font-size: 13.5px; animation: floatY 6s ease-in-out infinite; } .hero__float img { width: 40px; height: 40px; object-fit: contain; } .hero__float b { display: block; font-size: 14.5px; } .hero__float span { color: var(--muted); font-size: 12.5px; } .hero__float--a { left: -34px; bottom: -22px; } .hero__float--b { right: -18px; top: -26px; animation-delay: -3s; } /* Merkkinauha */ .marquee { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: #000; padding: 18px 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee__track { display: flex; gap: 34px; width: max-content; animation: marquee 70s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__track img { width: 44px; height: 44px; object-fit: contain; transition: transform .3s var(--ease); } .marquee__track img:hover { transform: scale(1.35) rotate(-6deg); } /* Väitelause */ .statement { font-family: var(--f-display); font-stretch: 100%; font-weight: 800; font-size: clamp(28px, 4.4vw, 62px); line-height: 1.08; letter-spacing: -.025em; margin: 0; max-width: 22ch; } .statement .w { color: rgba(255, 255, 255, .14); transition: color .4s; } .statement .w.on { color: #fff; } .statement .w--red.on { color: var(--red-2); } /* Bento-ruudukko */ .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); grid-auto-rows: minmax(150px, auto); } .tile { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(24px, 2.6vw, 36px); background: linear-gradient(180deg, #101013, #0a0a0c); border: 1px solid var(--line); display: flex; flex-direction: column; isolation: isolate; transition: border-color .35s, transform .45s var(--ease); } .tile:hover { border-color: rgba(255, 255, 255, .18); } a.tile:hover { transform: translateY(-4px); } .tile__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--red-3); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } .tile h3 { font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 12px; } .tile p { color: var(--muted); margin: 0; max-width: 46ch; } .tile__more { margin-top: auto; padding-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; color: #fff; } .tile__more svg { width: 18px; height: 18px; transition: transform .25s var(--ease); } .tile:hover .tile__more svg { transform: translateX(4px); } .tile--red { background: radial-gradient(120% 120% at 100% 0%, #ff2020 0%, #b80000 40%, #5a0000 100%); border-color: rgba(255, 80, 80, .35); } .tile--red p, .tile--red .tile__label { color: rgba(255, 255, 255, .82); } .tile--white { background: #fff; color: #0b0b0d; border-color: #fff; } .tile--white p { color: #4a4a52; } .tile--white .tile__label { color: var(--red); } .tile--white .tile__more { color: #0b0b0d; } .c-7 { grid-column: span 7; } .c-5 { grid-column: span 5; } .c-6 { grid-column: span 6; } .c-4 { grid-column: span 4; } .c-8 { grid-column: span 8; } .c-12 { grid-column: span 12; } .c-3 { grid-column: span 3; } .r-2 { grid-row: span 2; } .tile__pets { position: absolute; right: -10px; bottom: -14px; display: flex; z-index: -1; } .tile__pets img { width: clamp(110px, 12vw, 170px); margin-left: -44px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); transition: transform .5s var(--ease); } .tile:hover .tile__pets img:nth-child(1) { transform: translateY(-6px) rotate(-4deg); } .tile:hover .tile__pets img:nth-child(2) { transform: translateY(-12px); } .tile:hover .tile__pets img:nth-child(3) { transform: translateY(-6px) rotate(4deg); } .tile__big { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(60px, 7vw, 108px); line-height: .85; letter-spacing: -.04em; margin: 4px 0 10px; } .tile__coin { position: absolute; right: -40px; top: -30px; width: 220px; z-index: -1; opacity: .95; animation: coinSpin 9s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(120, 50, 0, .5)); } .tile__games { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; } .tile__games span { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--text-2); } .tile__cmds { margin-top: 18px; display: grid; gap: 6px; font-family: var(--f-mono); font-size: 12.5px; } .tile__cmds code { display: inline-block; justify-self: start; background: #1e1f22; border: 1px solid #2b2d31; padding: 3px 8px; border-radius: 5px; color: #dbdee1; } /* Ansaintataulukko */ .earn { container-type: inline-size; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--line); gap: 1px; } .earn__item { background: var(--bg-2); padding: clamp(24px, 2.6vw, 34px); display: grid; gap: 6px; align-content: start; transition: background .3s; } .earn__item:hover { background: #101013; } .earn__val { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(28px, 4.4cqi, 54px); line-height: 1; letter-spacing: -.03em; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .earn__val small { font-family: var(--f-body); font-stretch: 100%; font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; white-space: nowrap; } .earn__item h3 { margin: 12px 0 2px; font-size: 17px; } .earn__item p { color: var(--muted); font-size: 14.5px; margin: 0; } /* Live-luvut */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); } .stat { padding: 30px 26px 6px 0; border-right: 1px solid var(--line); } .stat + .stat { padding-left: 26px; } .stat:last-child { border-right: 0; } .stat__num { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(42px, 5.4vw, 80px); line-height: 1; letter-spacing: -.04em; display: block; font-variant-numeric: tabular-nums; } .stat__label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14.5px; margin-top: 10px; } .goalbar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); margin-top: 14px; overflow: hidden; max-width: 220px; } .goalbar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ff2b2b, #cb0000); transition: width 1.4s var(--ease); } .goalbar--purple i { background: linear-gradient(90deg, #ff6bdc, #9b2bd9); } /* Odometri */ .odo { display: inline-flex; overflow: hidden; line-height: 1; height: 1em; vertical-align: top; } .odo__d { display: inline-block; height: 1em; overflow: hidden; } .odo__d > span { display: flex; flex-direction: column; transition: transform 1.6s cubic-bezier(.16, .9, .2, 1); } .odo__d > span > span, .odo__s { height: 1em; line-height: 1; display: block; } /* Askeleet */ .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: s; } .step { counter-increment: s; position: relative; padding: 26px 22px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); transition: border-color .3s, transform .35s var(--ease); } .step:hover { border-color: rgba(255, 43, 43, .45); transform: translateY(-3px); } .step::before { content: counter(s, decimal-leading-zero); display: block; font-family: var(--f-mono); font-size: 13px; color: var(--red-2); margin-bottom: 26px; } .step h3 { font-size: 17px; margin: 0 0 6px; } .step p { color: var(--muted); font-size: 14.5px; margin: 0; } .step .chtag { margin-top: 14px; } .chtag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 5px; background: rgba(88, 101, 242, .2); color: #c9cdfb; font-family: var(--f-serif); font-style: italic; font-weight: 700; font-size: 14px; white-space: nowrap; } .chtag::before { content: "#"; font-family: var(--f-body); font-style: normal; font-weight: 500; opacity: .8; } /* Loppukehotus */ .final { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(48px, 7vw, 100px) clamp(24px, 5vw, 80px); text-align: center; background: radial-gradient(90% 120% at 50% 0%, #ff1e1e 0%, #c00000 35%, #520000 80%, #2a0000 100%); isolation: isolate; } .final::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("../assets/favicon.png"); background-repeat: no-repeat; background-size: 520px; background-position: 115% 140%; opacity: .1; filter: grayscale(1) brightness(3); mix-blend-mode: overlay; } .final .h1 { margin: 0 auto 20px; max-width: 14ch; } .final .lead { margin: 0 auto; color: rgba(255, 255, 255, .85); } .final__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 36px; } .invite { display: inline-flex; align-items: center; gap: 4px; height: 50px; padding: 0 6px 0 20px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .25); font-family: var(--f-mono); font-size: 14.5px; } .invite button { height: 38px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-family: var(--f-body); font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; transition: background .2s; } .invite button:hover { background: rgba(255, 255, 255, .26); } .invite button svg { width: 15px; height: 15px; } /* ---------- 10. KAUPPATORI, STUDIO, KASINO ---------- */ .shop { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); padding-block: clamp(64px, 8vw, 110px); border-bottom: 1px solid var(--line); } .shop:last-of-type { border-bottom: 0; } .shop__side { position: sticky; top: calc(var(--hdr) + 92px); align-self: start; display: grid; gap: 16px; justify-items: start; } .shop__side .h2 { font-size: clamp(30px, 3.4vw, 44px); } .shop__side p { color: var(--muted); margin: 0; } .shop__price { display: flex; align-items: baseline; gap: 8px; font-size: 28px; } .shop__price small { font-size: 14px; color: var(--muted); font-weight: 500; } .perms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .perms li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); font-size: 14.5px; font-weight: 600; color: var(--text-2); } .perms li .em { font-size: 20px; width: 26px; text-align: center; flex: none; } /* Väriperheet */ .families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .fam { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); border-left: 4px solid var(--c1); transition: transform .35s var(--ease), border-color .3s; display: block; } .fam:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.2); border-left-color: var(--c1); } .fam__art { height: 120px; background: radial-gradient(60% 90% at 30% 110%, var(--c1), transparent 70%), radial-gradient(50% 80% at 80% 0%, var(--c3), transparent 70%), radial-gradient(40% 60% at 60% 60%, var(--c2), transparent 70%), linear-gradient(160deg, #0d0d10, #050506); position: relative; } .fam__art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.8), transparent), radial-gradient(1.5px 1.5px at 70% 40%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 50% 70%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,.5), transparent); } .fam__body { padding: 16px 18px 18px; display: grid; gap: 12px; } .fam__name { font-weight: 800; font-size: 17px; display: flex; justify-content: space-between; align-items: center; } .fam__name small { font-weight: 600; font-size: 12.5px; color: var(--muted); } .fam__shades { display: flex; gap: 6px; } .fam__shades i { flex: 1; height: 30px; border-radius: 8px; background: #1e1f22; border: 1px solid #2b2d31; display: grid; place-items: center; } .fam__shades i::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--s); } /* Hohtovärit */ .glows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .glow { container-type: inline-size; position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: 210px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; border: 1px solid var(--line); border-left: 4px solid var(--g1); isolation: isolate; transition: transform .35s var(--ease); } .glow:hover { transform: translateY(-3px); } .glow::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art); } .glow::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,5,6,.15), rgba(5,5,6,.82)); } .glow--wide { grid-column: 1 / -1; } .glow__name { filter: drop-shadow(0 0 14px rgba(255,255,255,.18)); font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: min(46px, 10.5cqi); text-transform: uppercase; line-height: 1; letter-spacing: -.02em; } .glowtext { background: linear-gradient(90deg, var(--g1), var(--g2), var(--g1)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: glowSlide 3.2s linear infinite; } .glow__desc { color: rgba(255,255,255,.75); font-size: 14.5px; margin-top: 6px; } .glow__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 20px; } /* Profiilimerkit */ .collections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .coll { border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); padding: 20px; } .coll__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; } .coll__head h3 { margin: 0; font-size: 17px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .coll__head small { color: var(--muted); font-size: 13px; } .coll__items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .coll__items a { aspect-ratio: 1; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid transparent; display: grid; place-items: center; transition: background .2s, border-color .2s, transform .25s var(--ease); position: relative; } .coll__items a:hover { background: rgba(255,255,255,.08); border-color: var(--line-2); transform: scale(1.06); z-index: 1; } .coll__items img { width: 66%; height: 66%; object-fit: contain; } .coll__items a::after { content: attr(data-name); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px); background: #fff; color: #0b0b0d; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; } .coll__items a:hover::after { opacity: 1; transform: translateX(-50%); } /* Vahvistus */ .verify { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; background: radial-gradient(100% 140% at 100% 0%, #ff2020, #b30000 45%, #3a0000); isolation: isolate; } .verify svg { width: clamp(90px, 10vw, 140px); filter: drop-shadow(0 20px 30px rgba(0,0,0,.4)); } .verify__big { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(44px, 5.4vw, 80px); line-height: .9; text-transform: uppercase; letter-spacing: -.03em; } /* Lemmikkitasot (kauppatori) */ .tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .tier { border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); padding: 22px; display: grid; gap: 14px; align-content: start; } .tier__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .tier__head h3 { margin: 0; font-size: 19px; font-weight: 800; } .tier__pips { display: flex; gap: 4px; } .tier__pips i { width: 18px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); } .tier__pips i.on { background: var(--red-2); } .tier p { color: var(--muted); margin: 0; font-size: 14.5px; } .tier__pets { display: flex; flex-wrap: wrap; gap: 4px; } .tier__pets img { width: 52px; height: 52px; object-fit: contain; transition: transform .25s var(--ease); } .tier__pets img:hover { transform: scale(1.2) translateY(-3px); } /* Studio */ .studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; } .studio__panel { display: grid; gap: 16px; } .studio__preview { position: sticky; top: calc(var(--hdr) + 20px); display: grid; gap: 16px; } .box { border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); padding: clamp(18px, 2vw, 24px); } .box__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .box__head h2 { margin: 0; font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 10px; } .box__head .n { width: 26px; height: 26px; border-radius: 8px; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 13px; font-family: var(--f-mono); } .field { display: flex; gap: 10px; } .input { flex: 1; min-width: 0; height: 50px; padding: 0 16px; border-radius: 12px; background: #000; border: 1px solid var(--line-2); font-size: 16px; transition: border-color .2s; } .input:focus { outline: none; border-color: var(--red-2); } .upload { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px 0 8px; border-radius: 12px; border: 1px solid var(--line-2); cursor: pointer; font-weight: 600; font-size: 14px; transition: border-color .2s; } .upload:hover { border-color: rgba(255,255,255,.35); } .upload img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .upload input { position: absolute; opacity: 0; width: 1px; height: 1px; } .none-btn { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px dashed var(--line-2); font-size: 13px; font-weight: 600; color: var(--muted); } .none-btn:hover { color: #fff; border-color: rgba(255,255,255,.4); } .swgroups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; } .swgroup__name { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; } .swrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .sw-btn { aspect-ratio: 1; border-radius: 9px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); transition: transform .15s, border-color .15s; } .sw-btn:hover { transform: scale(1.1); } .sw-btn[aria-pressed="true"] { border-color: #fff; transform: scale(1.08); box-shadow: 0 0 0 3px rgba(255,255,255,.15); } .glowpick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .glow-btn { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 12px; background: #000; border: 1px solid var(--line); text-align: left; transition: border-color .2s; } .glow-btn b { font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: 18px; text-transform: uppercase; } .glow-btn .price { font-size: 13px; } .glow-btn:hover { border-color: var(--line-2); } .glow-btn[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.12); } .coltabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .coltabs button { height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); transition: all .2s; } .coltabs button:hover { color: #fff; border-color: var(--line-2); } .coltabs button[aria-selected="true"] { background: #fff; color: #0b0b0d; border-color: #fff; } .badgegrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .badge-btn { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 12px; border: 1px solid var(--line); background: #000; font-size: 11.5px; font-weight: 600; color: var(--muted); transition: all .2s; } .badge-btn img { width: 40px; height: 40px; object-fit: contain; transition: transform .25s var(--ease); } .badge-btn:hover { color: #fff; border-color: var(--line-2); } .badge-btn:hover img { transform: scale(1.12); } .badge-btn[aria-pressed="true"] { border-color: #fff; color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.12); } .receipt__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line-2); font-size: 14.5px; } .receipt__row span:first-child { display: flex; align-items: center; gap: 10px; } .receipt__row img { width: 22px; height: 22px; } .receipt__total { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; font-weight: 800; font-size: 20px; } .dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; flex: none; } .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .contrast { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(240, 178, 50, .1); border: 1px solid rgba(240, 178, 50, .3); color: #ffd98a; font-size: 14px; } .contrast svg { flex: none; } .favs { display: flex; flex-wrap: wrap; gap: 8px; } .fav { display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; border-radius: 999px; background: #000; border: 1px solid var(--line); font-size: 13px; font-weight: 600; } .fav img { width: 18px; height: 18px; } .fav .x { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); } .fav .x:hover { background: rgba(255,255,255,.1); color: #fff; } .fav .x svg { width: 12px; height: 12px; } /* Kasino */ .jackpot { position: relative; overflow: hidden; border-radius: var(--r-xl); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: #000; border: 1px solid var(--line); box-shadow: var(--shadow); } .jackpot__main { position: relative; padding: clamp(28px, 4vw, 56px); background: radial-gradient(120% 120% at 0% 0%, #ff1e1e, #b30000 40%, #400000 90%); isolation: isolate; overflow: hidden; } .jackpot__main::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 340px; height: 340px; z-index: -1; background: url("../assets/kolikko.png") center / contain no-repeat; opacity: .9; animation: coinSpin 10s ease-in-out infinite; filter: drop-shadow(0 30px 50px rgba(0,0,0,.5)); } .jackpot__label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.8); } .jackpot__amount { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(56px, 8vw, 120px); line-height: .95; letter-spacing: -.04em; margin: 12px 0 14px; display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; } .jackpot__side { padding: clamp(28px, 4vw, 48px); display: grid; gap: 22px; align-content: start; } .ballot { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; } .ballot button { aspect-ratio: 1; border-radius: 50%; font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--text-2); background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: all .2s var(--ease); } .ballot button:hover:not(:disabled) { border-color: rgba(255,255,255,.4); color: #fff; } .ballot button[aria-pressed="true"] { background: #fff; color: #b30000; border-color: #fff; transform: scale(1.08); font-weight: 800; box-shadow: 0 6px 16px -6px rgba(255,255,255,.5); } .ballot button:disabled { opacity: .35; cursor: default; } .picked { display: flex; gap: 10px; align-items: center; min-height: 52px; } .picked span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 20px; background: radial-gradient(circle at 35% 30%, #fff, #e2e2e6 60%, #b9b9c0); color: #b30000; box-shadow: 0 10px 20px -8px rgba(0,0,0,.6), inset 0 -4px 8px rgba(0,0,0,.12); animation: ballIn .5s var(--ease) both; } .picked span.empty-ball { background: transparent; border: 2px dashed rgba(255,255,255,.35); box-shadow: none; animation: none; color: transparent; } .prizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .prizes div { border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); padding: 12px 14px; } .prizes small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 4px; } .prizes b { font-size: 17px; display: inline-flex; gap: 6px; align-items: center; } .games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .game { position: relative; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); border-left: 4px solid var(--red); padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: transform .35s var(--ease), border-color .3s; overflow: hidden; } .game:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.18); border-left-color: var(--red-2); } .game__art { height: 92px; display: flex; align-items: center; color: #fff; margin-bottom: 6px; } .game__art svg { height: 84px; width: auto; } .game__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 8px; } .game h3 { margin: 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: 22px; } .game__max { font-family: var(--f-mono); font-size: 12px; color: var(--red-3); white-space: nowrap; } .game p { color: var(--muted); margin: 0; font-size: 14.5px; } .game ul { list-style: none; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--line-2); display: grid; gap: 5px; font-size: 13.5px; color: var(--text-2); } .game ul li { display: flex; gap: 8px; } .game ul li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red-2); margin-top: 8px; flex: none; } .game__bet { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; margin-top: auto; padding-top: 10px; } .slots-table { display: grid; gap: 4px; margin-top: 4px; } .slots-table div { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-2); } .slots-table b { font-family: var(--f-mono); color: #fff; } .odds { display: grid; gap: 22px; } .odds__bar { display: flex; height: 18px; border-radius: 999px; overflow: hidden; gap: 3px; } .odds__bar i { display: block; height: 100%; transition: flex .6s; } .odds__legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .rarity { border-radius: var(--r); padding: 16px 18px; background: var(--bg-2); border: 1px solid var(--line); border-top: 3px solid var(--c); } .rarity b { display: block; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 30px; line-height: 1; } .rarity span { font-family: var(--f-serif); font-style: italic; font-weight: 700; color: var(--c); font-size: 16px; } .chests { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 320px; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 60%, rgba(255,170,60,.25), transparent 70%), radial-gradient(40% 40% at 30% 70%, rgba(170,60,255,.25), transparent 70%), radial-gradient(40% 40% at 72% 72%, rgba(0,140,255,.22), transparent 70%), linear-gradient(180deg, #120d08, #050403); border: 1px solid var(--line); } .chests svg { width: min(78%, 420px); filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); } /* ---------- 11. TILASTOT ---------- */ .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .kpi { border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); padding: 22px 22px 20px; display: grid; gap: 8px; align-content: start; } .kpi--red { background: radial-gradient(140% 140% at 100% 0%, #ff2020, #a80000 50%, #3a0000); border-color: rgba(255, 80, 80, .35); } .kpi__label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); } .kpi--red .kpi__label, .kpi--red .kpi__sub { color: rgba(255,255,255,.8); } .kpi .odo, .kpi__num { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .kpi__sub { font-size: 13px; color: var(--dim); } .panel { border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; } .panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); } .panel__head h3 { margin: 0; font-size: 16px; font-weight: 800; } .panel__head .dim { font-size: 13px; } .panel__body { padding: 18px 22px; } .stat-sec { padding-top: clamp(56px, 7vw, 90px); } .stat-sec__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; } .stat-sec__head p { color: var(--muted); margin: 6px 0 0; } .tabs { display: flex; flex-wrap: wrap; gap: 6px; } .tabs button { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--muted); transition: all .2s; } .tabs button:hover { color: #fff; border-color: var(--line-2); } .tabs button[aria-selected="true"] { background: #fff; color: #0b0b0d; border-color: #fff; } .podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; align-items: end; margin-bottom: 18px; } .podium__item { position: relative; border-radius: var(--r-lg); padding: 26px 16px 20px; text-align: center; background: rgba(255,255,255,.03); border: 1px solid var(--line); display: grid; justify-items: center; gap: 10px; } .podium__item:nth-child(2) { order: -1; } .podium__item--1 { order: 0 !important; padding-top: 36px; background: radial-gradient(120% 100% at 50% 0%, rgba(255, 43, 43, .28), rgba(255,255,255,.02)); border-color: rgba(255, 80, 80, .35); } .podium__item--1 .avatar { box-shadow: 0 0 0 3px var(--red-2), 0 0 30px rgba(255,43,43,.5); } .podium__rank { position: absolute; top: 12px; left: 14px; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 22px; color: var(--dim); } .podium__item--1 .podium__rank { color: var(--red-3); } .podium__name { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .podium__val { font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: 22px; display: inline-flex; align-items: center; gap: 6px; } .board { list-style: none; margin: 0; padding: 0; } .board li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .board li:last-child { border-bottom: 0; } .board__rank { font-family: var(--f-mono); font-size: 13px; color: var(--dim); } .who { display: flex; align-items: center; gap: 12px; min-width: 0; } .who__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .board__val { font-weight: 800; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; } .board__val .dim { font-weight: 500; } .chart { position: relative; } .chart svg { width: 100%; height: auto; overflow: visible; } .chart .grid-line { stroke: rgba(255,255,255,.07); } .chart .axis { fill: var(--dim); font-size: 12px; font-family: var(--f-body); } .chart .stroke { fill: none; stroke: var(--red-2); stroke-width: 2.5; } .chart__cursor { stroke: rgba(255,255,255,.3); stroke-dasharray: 3 4; opacity: 0; } .chart__dot { fill: #fff; stroke: var(--red-2); stroke-width: 3; opacity: 0; } .chart__tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); background: #fff; color: #0b0b0d; font-size: 12.5px; font-weight: 700; padding: 6px 10px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; } .chart__tip.is-on { opacity: 1; } .donut-wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; } .donut { width: 190px; height: 190px; } .donut circle { fill: none; stroke-width: 18; transition: stroke-dasharray 1s var(--ease); } .legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 180px; } .legend li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text-2); } .legend li i { width: 10px; height: 10px; border-radius: 50%; } .legend li b { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; } .cohorts { display: grid; gap: 4px; } .cohort { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; } .cohort__name { font-family: var(--f-serif); font-style: italic; font-weight: 700; color: var(--text-2); white-space: nowrap; overflow: hidden; display: flex; align-items: center; gap: 8px; } .cohort__name::before { content: "≫—"; font-family: var(--f-body); font-style: normal; letter-spacing: -.15em; color: var(--muted); } .cohort__bar { flex: 1; height: 8px; border-radius: 8px; background: rgba(255,255,255,.06); overflow: hidden; min-width: 40px; } .cohort__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8c0000, var(--red-2)); border-radius: inherit; transition: width 1.2s var(--ease); } .cohort b { font-variant-numeric: tabular-nums; font-size: 14.5px; } .feed { list-style: none; margin: 0; padding: 0; } .feed li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; animation: feedIn .5s var(--ease) both; } .feed li:last-child { border-bottom: 0; } .feed__txt { color: var(--text-2); min-width: 0; } .feed__txt strong { color: #fff; } .feed__time { color: var(--dim); font-size: 12.5px; white-space: nowrap; } .pos { color: #3ddc84; font-weight: 700; } .neg { color: var(--red-3); font-weight: 700; } .status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .status__item { border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); padding: 14px 16px; } .status__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .status__name { font-family: var(--f-mono); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .status__meta { color: var(--muted); font-size: 13px; margin-top: 4px; } /* ---------- 12. PELIKESKUS, UKK, SÄÄNNÖT ---------- */ .search { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 20px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s; } .search:focus-within { border-color: var(--red-2); box-shadow: 0 0 0 4px rgba(255, 43, 43, .15); } .search svg { width: 22px; height: 22px; color: var(--muted); flex: none; } .search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; font-size: 17px; outline: none; } .search input::placeholder { color: var(--dim); } .search__count { font-family: var(--f-mono); font-size: 13px; color: var(--muted); white-space: nowrap; } .alpha { display: flex; flex-wrap: wrap; gap: 4px; margin: 18px 0 40px; } .alpha button { width: 36px; height: 36px; border-radius: 10px; font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--text-2); border: 1px solid transparent; transition: all .2s; } .alpha button:hover:not(:disabled) { border-color: var(--line-2); color: #fff; } .alpha button[aria-pressed="true"] { background: var(--red); color: #fff; } .alpha button:disabled { color: var(--dim); opacity: .4; cursor: default; } .gamegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; } .gtile { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); font-weight: 600; font-size: 14.5px; transition: border-color .2s, transform .25s var(--ease), background .2s; min-width: 0; animation: feedIn .4s var(--ease) both; } .gtile:hover { border-color: var(--line-2); transform: translateY(-2px); background: #101013; } .gtile__mono { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 15px; color: #fff; background: hsl(var(--h) 70% 38%); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); } .gtile__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gtile mark { background: rgba(255, 43, 43, .3); color: #fff; border-radius: 3px; padding: 0 1px; } .gletter { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin: 18px 0 4px; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 28px; color: var(--red-2); } .gletter::after { content: ""; flex: 1; height: 1px; background: var(--line); } .gletter:first-child { margin-top: 0; } .faq-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; } .faq-nav { position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 2px; } .faq-nav a { padding: 10px 14px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: 15px; transition: all .2s; display: flex; justify-content: space-between; } .faq-nav a small { font-family: var(--f-mono); color: var(--dim); } .faq-nav a:hover, .faq-nav a.is-active { color: #fff; background: rgba(255,255,255,.05); } .faq-group + .faq-group { margin-top: 56px; } .faq-group h2 { margin-bottom: 14px; } .qa { border-bottom: 1px solid var(--line); } .qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: clamp(16px, 1.4vw, 19px); font-weight: 700; transition: color .2s; } .qa summary::-webkit-details-marker { display: none; } .qa summary:hover { color: var(--red-3); } .qa__icon { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; flex: none; transition: transform .35s var(--ease), background .25s, border-color .25s; } .qa__icon svg { width: 14px; height: 14px; } .qa[open] .qa__icon { transform: rotate(45deg); background: var(--red); border-color: var(--red); } .qa__a { padding: 0 52px 24px 0; color: var(--text-2); font-size: 16px; animation: feedIn .35s var(--ease); } .rules { counter-reset: r; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .rule { position: relative; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); padding: 22px 24px; display: grid; gap: 8px; align-content: start; } .rule__n { font-size: 15px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; color: #fff; } .rule h3 { margin: 0; font-size: 16px; font-weight: 800; } .rule .quote { font-size: 14.5px; color: var(--muted); } .rule--wide { grid-column: 1 / -1; background: radial-gradient(120% 140% at 100% 0%, rgba(255,43,43,.22), transparent 60%), var(--bg-2); border-color: rgba(255, 80, 80, .3); } .values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .value { border-top: 2px solid var(--red-2); padding-top: 22px; } .value h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; } .value p { color: var(--muted); margin: 0; font-size: 15px; } .modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .module { border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line); padding: 22px; transition: border-color .3s; } .module:hover { border-color: var(--line-2); } .module__grp { font-family: var(--f-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--red-3); } .module h3 { margin: 8px 0 6px; font-size: 18px; font-weight: 800; } .module p { color: var(--muted); margin: 0; font-size: 14.5px; } .feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; } .feature + .feature { margin-top: clamp(80px, 10vw, 140px); } .feature--flip > :first-child { order: 2; } .feature__txt { display: grid; gap: 18px; justify-items: start; } .feature__txt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .feature__txt li { display: flex; gap: 12px; color: var(--text-2); } .feature__txt li svg { width: 20px; height: 20px; color: var(--red-2); flex: none; margin-top: 3px; } .reward { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .reward__card { border-radius: var(--r-lg); padding: 22px; background: var(--bg-2); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; } .reward__role { display: inline-flex; align-self: start; justify-self: start; padding: 2px 8px; border-radius: 5px; font-family: var(--f-serif); font-style: italic; font-weight: 700; font-size: 17px; } .reward__card ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--text-2); } .reward__card li { display: flex; align-items: center; gap: 10px; } .reward__card li img { width: 22px; height: 22px; } .nostalgia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .show { border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); padding: 14px 16px; display: grid; gap: 4px; } .show__by { font-family: var(--f-serif); font-style: italic; font-weight: 700; font-size: 13px; color: var(--gold); } .show b { font-size: 14.5px; line-height: 1.3; } .show span { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; } /* ---------- 13. LEMMIKIT ---------- */ .petfilter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 26px; } .pets { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .pet { position: relative; border-radius: var(--r-lg); background: radial-gradient(90% 70% at 50% 35%, var(--tc, rgba(255,255,255,.07)), transparent 70%), var(--bg-2); border: 1px solid var(--line); padding: 16px 16px 18px; text-align: center; display: grid; gap: 4px; transition: transform .35s var(--ease), border-color .3s; animation: feedIn .5s var(--ease) both; } .pet:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.2); } .pet__img { aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 6px; } .pet__img img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(0,0,0,.5)); transition: transform .45s var(--ease); } .pet:hover .pet__img img { transform: scale(1.07) rotate(-2deg); } .pet h3 { margin: 0; font-size: 18px; font-weight: 800; } .pet__tier { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tcol, var(--muted)); } .pet .price { justify-content: center; font-size: 15px; margin-top: 6px; } .pet__btn { position: absolute; inset: 0; border-radius: inherit; } .modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .modal.is-open { opacity: 1; visibility: visible; } .modal__box { position: relative; width: min(980px, 100%); min-width: 0; max-height: calc(100vh - 40px); overflow-y: auto; border-radius: var(--r-xl); background: #0b0b0d; border: 1px solid var(--line-2); box-shadow: 0 40px 120px -20px #000; transform: translateY(20px) scale(.98); transition: transform .4s var(--ease); } .modal.is-open .modal__box { transform: none; } .modal__close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; } .modal__close:hover { background: rgba(255,255,255,.16); } .modal__close svg { width: 16px; height: 16px; } .pd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pd__stage { position: relative; display: grid; place-items: center; padding: 40px; min-height: 420px; background: radial-gradient(70% 60% at 50% 45%, var(--tc, rgba(255,255,255,.08)), transparent 70%), #050506; border-right: 1px solid var(--line); } .pd__stage img { width: min(100%, 340px); filter: drop-shadow(0 26px 30px rgba(0,0,0,.6)); animation: petIn .5s var(--ease); } .pd__info { padding: clamp(26px, 3.4vw, 44px); display: grid; gap: 20px; align-content: start; } .pd__stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .pd__stages button { border-radius: 12px; border: 1px solid var(--line); padding: 8px 4px 6px; display: grid; justify-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); background: #000; transition: all .2s; } .pd__stages button img { width: 52px; height: 52px; object-fit: contain; } .pd__stages button[aria-pressed="true"] { border-color: #fff; color: #fff; } .meters { display: grid; gap: 12px; } .meter { display: grid; grid-template-columns: 110px 1fr 40px; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); } .meter__bar { height: 8px; border-radius: 8px; background: rgba(255,255,255,.07); overflow: hidden; } .meter__bar i { display: block; height: 100%; border-radius: inherit; background: var(--mc); transition: width .6s var(--ease); } .meter b { text-align: right; font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); } .care { display: flex; flex-wrap: wrap; gap: 8px; } .lifecycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; } .lifecycle::before { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px); } .lc { position: relative; text-align: center; display: grid; justify-items: center; gap: 8px; } .lc img { width: min(170px, 90%); filter: drop-shadow(0 18px 20px rgba(0,0,0,.55)); } .lc b { font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: 18px; } .lc span { color: var(--muted); font-size: 13.5px; } /* ---------- 14. ANIMAATIOT ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); } .reveal.is-in { opacity: 1; transform: none; } .hero .rise { opacity: 0; transform: translateY(105%); animation: rise 1s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 110ms + 100ms); } .hero .fade { opacity: 0; animation: fadeUp .9s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 110ms + 200ms); } @keyframes rise { to { opacity: 1; transform: none; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes feedIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(35,165,90,.6); } 70% { box-shadow: 0 0 0 8px rgba(35,165,90,0); } 100% { box-shadow: 0 0 0 0 rgba(35,165,90,0); } } @keyframes livePulseRed { 0% { box-shadow: 0 0 0 0 rgba(255,43,43,.6); } 70% { box-shadow: 0 0 0 8px rgba(255,43,43,0); } 100% { box-shadow: 0 0 0 0 rgba(255,43,43,0); } } @keyframes shimmer { to { background-position: -200% 0; } } @keyframes glowSlide { to { background-position: -200% 0; } } @keyframes marquee { to { transform: translateX(-50%); } } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes coinSpin { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-12px); } } @keyframes heroGlow { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6%, 8%) scale(1.1); } } @keyframes ballIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes petIn { from { transform: scale(.9) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal, .hero .rise, .hero .fade { opacity: 1; transform: none; } } /* ---------- 15. RESPONSIIVISUUS ---------- */ @media (max-width: 1180px) { .nav a { padding: 8px 9px; font-size: 14px; } .live-pill { display: none; } .games { grid-template-columns: repeat(2, minmax(0, 1fr)); } .perms { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1023px) { :root { --hdr: 64px; } .nav, .hdr__end .btn { display: none; } .menu-btn { display: block; } .hdr__end { margin-left: auto; } .hero__grid, .p-hero__intro, .sec-head, .grid--split, .feature, .jackpot, .studio, .shop, .faq-layout, .pd { grid-template-columns: minmax(0, 1fr); } .feature--flip > :first-child { order: 0; } .hero__visual { max-width: 640px; } .hero__visual .dc { transform: none; } .bento > * { grid-column: span 6; } .bento > .c-12, .bento > .c-8, .bento > .c-7 { grid-column: span 12; } .r-2 { grid-row: auto; } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(3) { padding-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line); } .earn { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis, .status { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3, .modules, .values, .nostalgia { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop__side, .studio__preview, .faq-nav { position: static; } .faq-nav { display: flex; flex-wrap: wrap; } .chbrowser { grid-template-columns: 1fr; } .chlist { max-height: 360px; border-right: 0; border-bottom: 1px solid #1e1f22; } .ftr__top { grid-template-columns: 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; } .pd__stage { border-right: 0; border-bottom: 1px solid var(--line); min-height: 300px; } .odds__legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero__float--a { left: 10px; } .hero__float--b { right: 10px; } } @media (max-width: 720px) { .banner { --cut: 30%; border-radius: var(--r-lg); aspect-ratio: 2.5 / 1; } .dc-embed__banner .banner { aspect-ratio: 3.4 / 1; } .kicker { white-space: normal; } .banner__icon { padding: 14px 10% 14px 4%; } .bento > * { grid-column: span 12 !important; } .families { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .fam__art { height: 70px; } .fam__body { padding: 12px; } .fam__name small { display: none; } .grid--2, .grid--3, .grid--4, .modules, .values, .nostalgia, .rules, .glows, .collections, .tiers, .reward, .perms, .steps, .earn { grid-template-columns: 1fr; } .games { grid-template-columns: 1fr; } .kpis, .status { grid-template-columns: 1fr 1fr; } .swgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .badgegrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .glowpick { grid-template-columns: 1fr; } .dc__body { grid-template-columns: 1fr; } .dc__side { display: none; } .podium { grid-template-columns: 1fr; } .podium__item:nth-child(2) { order: 0; } .lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } .lifecycle::before { display: none; } .verify { grid-template-columns: 1fr; } .odds__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prizes { grid-template-columns: 1fr; } .ballot { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; } .ballot button { font-size: 10px; } .meter { grid-template-columns: 90px 1fr 36px; } .ftr__top { grid-template-columns: 1fr; } .hero__float { display: none; } .qa__a { padding-right: 0; } .stat { padding-right: 12px; } .stat + .stat { padding-left: 12px; } } /* ========================================================================== 16. SOVELLUSKEHYS JA WOW-KERROS (versio 5) -------------------------------------------------------------------------- Kiinteä sivuvalikko vasemmalla, yläpalkki, mobiilin alapalkki, elävä tausta, lasipinnat, valokeilat, 3D-kallistus, sivusiirtymät ja komentopaletti. ========================================================================== */ :root { --side: 276px; --hdr: 64px; --bg: #060609; --glass: rgba(255, 255, 255, .038); --glass-2: rgba(255, 255, 255, .07); } @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vtOut .22s ease both; } ::view-transition-new(root) { animation: vtIn .38s var(--ease) both; } @keyframes vtOut { to { opacity: 0; transform: translateY(-8px) scale(.995); } } @keyframes vtIn { from { opacity: 0; transform: translateY(14px) scale(.995); } } .side { view-transition-name: side; } .top { view-transition-name: top; } .tabbar { view-transition-name: tabbar; } .fx { view-transition-name: fx; } ::view-transition-group(side), ::view-transition-group(top), ::view-transition-group(tabbar), ::view-transition-group(fx) { animation: none; } ::view-transition-old(side), ::view-transition-old(top), ::view-transition-old(tabbar), ::view-transition-old(fx) { display: none; } ::view-transition-new(side), ::view-transition-new(top), ::view-transition-new(tabbar), ::view-transition-new(fx) { animation: none; } body { padding-left: var(--side); background: var(--bg); } body::before { display: none; } html { scroll-padding-top: calc(var(--hdr) + 72px); scrollbar-color: #2a2a31 transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #26262d; border-radius: 10px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: #cb0000; } /* ---------- Elävä tausta ---------- */ .fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 70% -10%, #1a0508 0%, var(--bg) 55%); } .fx__blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; } .fx__blob--a { width: 620px; height: 620px; right: -120px; top: -220px; background: radial-gradient(closest-side, #ff1f1f, transparent); animation: blobA 22s ease-in-out infinite alternate; } .fx__blob--b { width: 520px; height: 520px; left: 18%; top: 46%; background: radial-gradient(closest-side, #7a0cff, transparent); opacity: .22; animation: blobB 28s ease-in-out infinite alternate; } .fx__blob--c { width: 560px; height: 560px; right: 8%; bottom: -260px; background: radial-gradient(closest-side, #ff3d7f, transparent); opacity: .2; animation: blobA 34s ease-in-out infinite alternate-reverse; } .fx__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .fx__grain { position: absolute; inset: 0; opacity: .06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E"); } @keyframes blobA { to { transform: translate(-160px, 120px) scale(1.25); } } @keyframes blobB { to { transform: translate(180px, -140px) scale(1.3); } } .progress { position: fixed; left: var(--side); right: 0; top: 0; height: 2px; z-index: 120; pointer-events: none; } .progress i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #ff2b2b, #ff5c8a, #ffb400); box-shadow: 0 0 12px #ff2b2b; } /* ---------- Sivuvalikko ---------- */ .side { position: fixed; left: 0; top: 0; bottom: 0; width: var(--side); z-index: 110; display: flex; flex-direction: column; gap: 14px; padding: 20px 14px 16px; background: linear-gradient(180deg, rgba(14, 14, 18, .82), rgba(8, 8, 11, .9)); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none; } .side::-webkit-scrollbar { display: none; } .side__brand { display: flex; align-items: center; padding: 4px 10px 6px; } .side__logo { width: 132px; } .side__mark { display: none; width: 36px; border-radius: 10px; } .side__search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 10px 0 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); color: var(--muted); font-size: 14px; transition: border-color .2s, color .2s, background .2s; flex: none; } .side__search:hover { border-color: var(--line-2); color: #fff; background: var(--glass-2); } .side__search svg { width: 17px; height: 17px; flex: none; } .side__search span { flex: 1; text-align: left; } kbd { font-family: var(--f-mono); font-size: 10.5px; padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; } .side__srv { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(203, 0, 0, .22), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 80, 80, .22); flex: none; } .side__srvimg { position: relative; flex: none; } .side__srvimg img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; } .side__srvimg .live-dot { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border: 2.5px solid #14090b; } .side__srv b { display: block; font-size: 14px; line-height: 1.2; } .side__srv span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .side__srv span b { display: inline; font-size: 12px; color: var(--text-2); } .side__nav { display: grid; gap: 14px; } .side__label { font-family: var(--f-serif); font-style: italic; font-weight: 700; font-size: 12.5px; color: var(--dim); padding: 0 12px 6px; display: flex; align-items: center; gap: 8px; } .side__label::before { content: "≫—"; font-family: var(--f-body); font-style: normal; letter-spacing: -.15em; } .side__label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); } .side__link { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 12px; color: var(--text-2); font-weight: 600; font-size: 14.5px; transition: background .2s, color .2s, transform .25s var(--ease); } .side__link:hover { background: var(--glass-2); color: #fff; transform: translateX(3px); } .side__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); flex: none; transition: background .25s, color .25s, box-shadow .25s; } .side__ic svg { width: 17px; height: 17px; } .side__link[aria-current="page"] { color: #fff; background: linear-gradient(90deg, rgba(255, 43, 43, .2), rgba(255, 43, 43, .02)); } .side__link[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: #ff2b2b; box-shadow: 0 0 14px #ff2b2b; } .side__link[aria-current="page"] .side__ic { background: linear-gradient(180deg, #ff2b2b, #a80000); box-shadow: 0 8px 20px -6px rgba(255, 43, 43, .7), inset 0 1px 0 rgba(255, 255, 255, .3); } .side__tag { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: linear-gradient(90deg, #ff2b2b, #ff5c8a); color: #fff; } .side__dot { margin-left: auto; } .side__jackpot { margin-top: auto; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 10px 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 180, 0, .16), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 180, 0, .25); transition: transform .3s var(--ease), border-color .3s; flex: none; } .side__jackpot:hover { transform: translateY(-2px); border-color: rgba(255, 180, 0, .55); } .side__jackpot small { display: block; font-size: 11.5px; color: #ffd98a; font-weight: 600; } .side__jackpot b { font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: 20px; display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; } .side__jackpot img { width: 46px; height: 46px; animation: coinSpin 6s ease-in-out infinite; filter: drop-shadow(0 8px 12px rgba(160, 80, 0, .5)); } .side__cta { flex: none; } .side__foot { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--muted); padding: 0 6px; flex: none; } .side__veil { display: none; } /* ---------- Yläpalkki ---------- */ .top { position: sticky; top: 0; z-index: 100; height: var(--hdr); display: flex; align-items: center; gap: 16px; padding: 0 var(--pad); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; } .top.is-scrolled { background: rgba(6, 6, 9, .72); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-color: var(--line); } .top__brand { display: none; } .top__crumb { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); } .top__crumb a:hover { color: #fff; } .top__crumb span { color: var(--dim); } .top__crumb b { color: #fff; font-weight: 700; } .top__end { margin-left: auto; display: flex; align-items: center; gap: 10px; } .top__search { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 8px 0 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); color: var(--muted); font-size: 13.5px; transition: border-color .2s, color .2s; } .top__search:hover { color: #fff; border-color: var(--line-2); } .top__search svg { width: 15px; height: 15px; } .top .menu-btn { display: none; } .live-pill { display: inline-flex; } .tabbar { display: none; } /* ---------- Sisältöalue ---------- */ .hero { padding-top: clamp(28px, 4vw, 56px); overflow: visible; } .hero__bg { display: none; } .p-hero { position: relative; padding-top: clamp(20px, 3vw, 40px); } .p-hero > .wrap { position: relative; } .p-hero__intro { padding-top: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1fr); max-width: 720px; gap: 22px; position: relative; z-index: 1; min-height: clamp(220px, 24vw, 330px); align-content: center; } .p-hero__intro .h1 { max-width: none; } .p-hero__aside { padding-top: 0; } .subnav { background: rgba(6, 6, 9, .7); } .sec--panel { background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 70%); } .marquee { background: rgba(0, 0, 0, .35); } /* Otsikot: hillitympi, sovellusmainen */ .display { text-transform: none; font-stretch: 100%; font-weight: 850; letter-spacing: -.045em; line-height: .96; } .hero h1 { font-size: clamp(42px, calc((100vw - var(--side)) * .062), 92px); } .h1 { text-transform: none; font-stretch: 100%; font-weight: 850; font-size: clamp(36px, calc((100vw - var(--side)) * .05), 68px); letter-spacing: -.04em; line-height: 1; } .h2 { font-stretch: 100%; letter-spacing: -.035em; } .grad, .hl { background: linear-gradient(100deg, #ff2b2b 0%, #ff5c8a 45%, #ffb400 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradMove 7s ease-in-out infinite alternate; } @keyframes gradMove { to { background-position: 100% 0; } } .kicker--red::after { color: #ff5c8a; } /* Kuvituspallo sivun yläosassa */ .orb { position: absolute; right: clamp(0px, 5vw, 110px); top: clamp(30px, 5vw, 70px); width: clamp(220px, 27vw, 380px); aspect-ratio: 1; display: grid; place-items: center; pointer-events: none; z-index: 0; } .orb__glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 43, 43, .55), rgba(255, 60, 130, .18) 55%, transparent); filter: blur(24px); animation: orbPulse 5s ease-in-out infinite alternate; } .orb__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); border-top-color: #ff2b2b; border-right-color: rgba(255, 92, 138, .5); animation: spin 14s linear infinite; } .orb__ring--2 { inset: 13%; border-style: dashed; border-color: rgba(255, 255, 255, .14); animation-duration: 30s; animation-direction: reverse; } .orb__core { position: relative; width: 54%; aspect-ratio: 1; border-radius: 30%; display: grid; place-items: center; background: linear-gradient(160deg, rgba(255, 255, 255, .97), #e2e2e8); box-shadow: 0 40px 80px -20px rgba(255, 30, 30, .65), inset 0 -10px 30px rgba(0, 0, 0, .12), 0 0 0 1px rgba(255, 255, 255, .5); animation: floatY 6s ease-in-out infinite; rotate: -6deg; } .orb__core svg { width: 62%; height: auto; filter: drop-shadow(0 10px 12px rgba(120, 0, 0, .35)); } @keyframes spin { to { transform: rotate(360deg); } } @keyframes orbPulse { to { transform: scale(1.12); opacity: .75; } } /* ---------- Lasipinnat ja valokeilat ---------- */ .card, .tile, .kpi, .panel, .game, .module, .rule, .coll, .step, .box, .tier, .reward__card, .show, .gtile, .status__item, .embed, .rarity, .perms li { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .016)); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px -34px rgba(0, 0, 0, .9); } .pet { backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); background: radial-gradient(90% 70% at 50% 35%, var(--tc, rgba(255,255,255,.07)), transparent 70%), rgba(255, 255, 255, .03); } .notice, .search, .podium__item, .fam { backdrop-filter: blur(14px); } .earn { background: var(--line); } .earn__item { position: relative; background: rgba(10, 10, 13, .86); } .tile--red { background: radial-gradient(120% 120% at 100% 0%, #ff2a2a 0%, #c00000 42%, #4a0000 100%); } .tile--white { background: #fff; backdrop-filter: none; } .kpi--red { background: radial-gradient(140% 140% at 100% 0%, #ff2a2a, #a80000 50%, #3a0000); } .rule--wide { background: radial-gradient(120% 140% at 100% 0%, rgba(255, 43, 43, .26), transparent 60%), rgba(255, 255, 255, .03); } .podium__item--1 { background: radial-gradient(120% 100% at 50% 0%, rgba(255, 43, 43, .3), rgba(255, 255, 255, .02)); } .card::after, .tile::after, .kpi::after, .panel::after, .game::after, .pet::after, .module::after, .rule::after, .coll::after, .step::after, .box::after, .tier::after, .reward__card::after, .show::after, .gtile::after, .status__item::after, .embed::after, .rarity::after, .earn__item::after, .perms li::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 70, 70, .17), transparent 62%); } .card:hover::after, .tile:hover::after, .kpi:hover::after, .panel:hover::after, .game:hover::after, .pet:hover::after, .module:hover::after, .rule:hover::after, .coll:hover::after, .step:hover::after, .box:hover::after, .tier:hover::after, .reward__card:hover::after, .show:hover::after, .gtile:hover::after, .status__item:hover::after, .embed:hover::after, .rarity:hover::after, .earn__item:hover::after, .perms li:hover::after { opacity: 1; } .card:hover, .kpi:hover, .panel:hover, .module:hover, .rule:hover, .coll:hover, .box:hover, .tier:hover, .reward__card:hover, .show:hover, .status__item:hover, .perms li:hover { border-color: rgba(255, 110, 110, .32); } .tile, .pet, .game, .glow, .fam, .jackpot, .verify, .final { transition: transform .25s var(--ease), border-color .3s, box-shadow .4s; will-change: transform; } .tile:hover, .game:hover, .pet:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -30px rgba(255, 30, 30, .4); border-color: rgba(255, 110, 110, .4); } .pet__btn { z-index: 2; } /* Kiertävä liukuvärireunus tärkeimmille pinnoille */ @property --kulma { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes kulma { to { --kulma: 360deg; } } .final::after, .jackpot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2; background: conic-gradient(from var(--kulma), transparent 0 55%, #ffb400 70%, #ff5c8a 82%, #fff 90%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: kulma 6s linear infinite; } .final { box-shadow: 0 60px 140px -50px rgba(255, 20, 20, .7); } .btn--red { background: linear-gradient(180deg, #ff2424, #b80000); overflow: hidden; } .btn--red::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease); } .btn--red:hover::before { transform: translateX(120%); } .dc { box-shadow: 0 50px 120px -40px rgba(255, 20, 20, .45), 0 0 0 1px rgba(255, 255, 255, .08); } /* ---------- Etusivun hero ---------- */ .hero__pill { background: var(--glass); backdrop-filter: blur(12px); } .hero__visual { perspective: 1600px; } .hero__visual::before { content: ""; position: absolute; inset: -8% -6%; z-index: -1; border-radius: 50%; background: conic-gradient(from 0deg, #ff2b2b, #ff5c8a, #7a0cff, #ffb400, #ff2b2b); filter: blur(70px); opacity: .4; animation: spin 18s linear infinite; } .hero__visual .dc { transform: rotateY(-11deg) rotateX(4deg); transform-origin: center; } .hero__visual:hover .dc { transform: rotateY(-2deg) rotateX(1deg); } .hero__float { background: rgba(16, 16, 20, .7); } .sticker { position: absolute; z-index: 4; pointer-events: none; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .6)); animation: floatY 7s ease-in-out infinite; } .sticker--1 { width: 118px; left: -64px; top: 20%; animation-delay: -1s; } .sticker--2 { width: 100px; right: -30px; bottom: 16%; animation-delay: -3s; } .sticker--3 { width: 52px; left: 40%; bottom: -34px; animation-delay: -5s; } .sticker--4 { width: 46px; right: 52%; top: -38px; animation-delay: -2s; } /* ---------- Alatunniste ---------- */ .ftr { background: transparent; padding: 48px 0 28px; overflow: visible; } .ftr__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; } .ftr__brand img { width: 150px; margin-bottom: 12px; } .ftr__brand p { margin: 0; max-width: 34ch; font-family: var(--f-serif); font-style: italic; font-weight: 600; color: var(--text-2); } .ftr__links { display: flex; flex-wrap: wrap; gap: 6px 22px; max-width: 520px; justify-content: flex-end; } .ftr__links a { color: var(--muted); font-size: 14px; transition: color .2s; } .ftr__links a:hover { color: #fff; } .ftr__sign { margin-top: 36px; } /* ---------- Komentopaletti ---------- */ .cmdk { position: fixed; inset: 0; z-index: 300; display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; background: rgba(0, 0, 0, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; } .cmdk.is-open { opacity: 1; visibility: visible; } .cmdk__box { width: min(640px, 100%); border-radius: 20px; overflow: hidden; background: rgba(16, 16, 21, .94); border: 1px solid var(--line-2); box-shadow: 0 60px 140px -30px #000, 0 0 0 1px rgba(255, 43, 43, .15), 0 0 80px -20px rgba(255, 43, 43, .4); transform: translateY(-14px) scale(.97); transition: transform .3s var(--ease); } .cmdk.is-open .cmdk__box { transform: none; } .cmdk__in { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 60px; border-bottom: 1px solid var(--line); } .cmdk__in svg { width: 20px; height: 20px; color: var(--muted); flex: none; } .cmdk__in input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; font-size: 17px; } .cmdk__list { max-height: min(52vh, 440px); overflow-y: auto; padding: 8px; scrollbar-width: thin; } .cmdk__item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; } .cmdk__item[aria-selected="true"] { background: linear-gradient(90deg, rgba(255, 43, 43, .22), rgba(255, 43, 43, .04)); box-shadow: inset 3px 0 0 #ff2b2b; } .cmdk__ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .06); display: grid; place-items: center; color: var(--text-2); } .cmdk__ic svg { width: 17px; height: 17px; } .cmdk__ic img { width: 28px; height: 28px; object-fit: contain; } .cmdk__em { font-size: 18px; } .cmdk__t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmdk__a { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .cmdk__foot { display: flex; gap: 18px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } .cmdk__foot span { display: inline-flex; gap: 5px; align-items: center; } .cmdk__count { margin-left: auto; } /* ---------- Kapea sivuvalikko (ikonikisko) ---------- */ @media (max-width: 1320px) and (min-width: 1024px) { :root { --side: 78px; } .side { padding: 16px 12px; align-items: center; } .side__txt, .side__label, .side__tag, .side__dot, .side__logo, .side__jackpot img { display: none; } .side__mark { display: block; } .side__brand { padding: 0; } .side__search, .side__link { width: 48px; height: 48px; padding: 0; justify-content: center; } .side__srv { padding: 6px; } .side__nav { gap: 10px; } .side__group { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); } .side__link:hover { transform: none; } .side__link[aria-current="page"]::before { left: -12px; } .side__jackpot { padding: 0; width: 48px; height: 48px; justify-content: center; } .side__jackpot::after { content: "🎫"; font-size: 20px; } .side__cta { width: 48px; height: 48px; padding: 0; } } /* ---------- Mobiili: laatikkovalikko + alapalkki ---------- */ @media (max-width: 1023px) { :root { --side: 0px; --hdr: 58px; } body { padding-left: 0; padding-bottom: 76px; } .progress { left: 0; } .side { width: min(300px, 86vw); transform: translateX(-102%); transition: transform .4s var(--ease); z-index: 210; } body.menu-open .side { transform: none; } .side__veil { display: block; position: fixed; inset: 0; z-index: 205; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } body.menu-open .side__veil { opacity: 1; visibility: visible; } .top { background: rgba(6, 6, 9, .75); backdrop-filter: blur(18px); border-color: var(--line); gap: 12px; } .top .menu-btn { display: block; width: 40px; height: 40px; flex: none; } .top .menu-btn span { left: 10px; right: 10px; } .top .menu-btn span:first-child { top: 14px; } .top .menu-btn span:last-child { top: 23px; } body.menu-open .top .menu-btn span { top: 19px; } .top__brand { display: block; } .top__crumb, .top__search span, .top__search kbd, .live-pill { display: none; } .top__search { width: 38px; padding: 0; justify-content: center; } .hdr__end .btn, .top__cta { display: inline-flex; } .tabbar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 150; display: grid; grid-template-columns: repeat(5, 1fr); height: 62px; border-radius: 22px; background: rgba(16, 16, 21, .82); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -10px #000; } .tabbar a, .tabbar button { display: grid; justify-items: center; align-content: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--muted); position: relative; } .tabbar svg { width: 21px; height: 21px; } .tabbar [aria-current="page"] { color: #fff; } .tabbar [aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 4px 4px; background: #ff2b2b; box-shadow: 0 0 14px #ff2b2b; } .tabbar [aria-current="page"] svg { color: #ff4a4a; } .orb { width: 180px; right: -40px; top: 0; opacity: .45; } .p-hero__intro { min-height: 0; } .hero h1 { font-size: clamp(42px, 12.5vw, 84px); } .h1 { font-size: clamp(34px, 9.4vw, 60px); } .sticker { display: none; } .hero__visual .dc { transform: none; } .ftr__links { justify-content: flex-start; } .toast { bottom: 92px; } } @media (prefers-reduced-motion: reduce) { .fx__blob, .orb__ring, .hero__visual::before { animation: none; } } main { overflow-x: clip; } .hero, .p-hero > .wrap { overflow-x: clip; overflow-y: visible; } /* ========================================================================== 17. HIONTA (versio 6) -------------------------------------------------------------------------- Tasapainoiset tekstirivit, tasamittaiset erottimet, ei venytettyjä kirjaimia tai numeroita, omat väri- ja hohtoväribannerit, lemmikkipaneeli. ========================================================================== */ /* Rivit jakautuvat tasaisesti, eikä viimeiselle riville jää yksinäistä sanaa */ h1, h2, h3, h4, h5, p, li, blockquote, summary, .lead, .quote, .statement, .chview__desc, .hero__tag, .glow__desc, .kpi__sub, .stat__label, .feed__txt, .qa__a, .notice > div, .lc span, .dim, .muted { text-wrap: balance; } .mono, code, kbd { white-space: nowrap; } .lead { max-width: 58ch; } /* Numerot: ei päällekkäisiä tai leikkautuvia merkkejä */ .odo, .jackpot__amount, .stat__num, .kpi .odo, .kpi__num, .tile__big, .earn__val, .price, .verify__big, .side__jackpot b { letter-spacing: 0; } .odo__d { text-align: center; } .display, .h1 { letter-spacing: -.03em; } .h2 { letter-spacing: -.025em; } .jackpot__amount { font-size: clamp(52px, 6.6vw, 104px); } /* "≫── Otsikko ─────────➤": teksti alkaa aina samasta kohdasta ja nuolen kärki päättyy samaan kohtaan */ .kicker { display: flex; width: min(100%, 320px); white-space: nowrap; gap: 10px; color: #e6e6ea; font-size: 17px; } .kicker::before { content: "≫──"; letter-spacing: -.12em; color: #a9a9b3; flex: none; } .kicker::after { flex: 1 1 0; min-width: 22px; color: #a9a9b3; opacity: 1; } .kicker--center { margin-inline: auto; } .kicker--red::after { color: #ff5c8a; } .final .kicker, .final .kicker::before, .final .kicker::after { color: rgba(255, 255, 255, .9); } /* Sivuvalikon kategoriat: sama rakenne kuin Discordin kanavalistassa, selvästi luettavina */ .side__label { font-size: 14.5px; color: #dcdce2; padding: 2px 8px 8px 10px; gap: 8px; white-space: nowrap; } .side__label::before { content: "≫──"; letter-spacing: -.12em; color: #a9a9b3; } .side__label::after { content: ""; flex: 1 1 0; min-width: 20px; height: 10px; color: #a9a9b3; background: linear-gradient(currentColor, currentColor) left center / calc(100% - 9px) 1.5px no-repeat, conic-gradient(from -116deg at 100% 50%, currentColor 52deg, transparent 0) right center / 10px 10px no-repeat; } .side__link { font-size: 15px; } /* Kanavaselaimen kategoriat samalla tavalla */ .chcat__name { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #c9c9d1; padding: 6px 8px 6px 6px; overflow: visible; } .chcat__name::before { content: "≫──"; letter-spacing: -.12em; margin: 0; color: #9a9aa5; } .chcat__name::after { content: ""; flex: 1 1 0; min-width: 20px; height: 10px; color: #9a9aa5; letter-spacing: 0; opacity: 1; background: linear-gradient(currentColor, currentColor) left center / calc(100% - 9px) 1.5px no-repeat, conic-gradient(from -116deg at 100% 50%, currentColor 52deg, transparent 0) right center / 10px 10px no-repeat; } .cohort__name::before { content: "≫──"; letter-spacing: -.12em; } /* Nimivärien omat kansikuvat */ .fam { border-left-width: 4px; } .fam__art { height: auto; aspect-ratio: 3 / 1.55; background: #0d0d10; overflow: hidden; } .fam__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .fam:hover .fam__art img { transform: scale(1.07); } .fam__art::after { background: linear-gradient(180deg, transparent 55%, rgba(8, 8, 11, .85)); } .fam:hover .fam__art { filter: saturate(1.15) brightness(1.06); } .fam__art { transition: filter .4s; } /* Hohtovärien omat kansikuvat */ .glow { min-height: 250px; border-left-width: 4px; } .glow::before { display: none; } .glow__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .glow:hover .glow__bg { transform: scale(1.06); } .glow::after { background: linear-gradient(180deg, rgba(5, 5, 6, .05) 0%, rgba(5, 5, 6, .35) 45%, rgba(5, 5, 6, .9) 100%); } .glow > div:first-child { margin-top: auto; } .glow { justify-content: flex-end; } .glow__name { text-shadow: none; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .7)); } .glow__desc { color: rgba(255, 255, 255, .9); text-shadow: 0 2px 10px rgba(0, 0, 0, .8); } .glow--wide { min-height: 300px; } .glow-btn { position: relative; overflow: hidden; min-height: 74px; background-size: cover; background-position: center; } /* Voittokierros: tekstit eivät katkea kesken */ .jackpot__side p { max-width: 46ch; } .jackpot__main > p { max-width: 30ch; } /* Lemmikkipaneeli (sama rakenne kuin Discordin /lemmikit) */ .ppanel__top { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 16px; align-items: start; } .ppanel__top img { width: 120px; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5)); } .ppanel__name { font-size: 24px; font-weight: 800; margin: 0 0 8px; } .ppanel__facts { display: grid; gap: 3px; font-weight: 700; font-size: 15px; } .ppanel__facts span { color: var(--text-2); font-weight: 600; } .ppanel__rows { display: grid; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; } .prow__label { font-weight: 700; font-size: 15px; margin-bottom: 6px; } .prow__label small { font-weight: 600; font-size: 12.5px; color: var(--muted); background: rgba(255, 255, 255, .06); padding: 2px 7px; border-radius: 6px; margin-left: 6px; } .prow__bar { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: center; } .prow__bar b { font-family: var(--f-mono); font-size: 12.5px; text-align: right; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); } .prow__track { height: 18px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; } .prow__track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #12b83a, #2fe05c); transition: width .7s var(--ease), background .4s; } .prow__track i[data-low="1"] { background: linear-gradient(90deg, #d98a00, #ffb400); } .prow__track i[data-low="2"] { background: linear-gradient(90deg, #b80000, #ff2b2b); } .pbtn { height: 44px; min-width: 132px; padding: 0 16px; border-radius: 10px; font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #1e1f22; border: 1px solid #2e3035; color: #dbdee1; transition: transform .2s var(--ease), filter .2s, opacity .2s; } .pbtn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.15); } .pbtn:disabled { opacity: .4; cursor: default; } .pbtn--green { background: #248046; border-color: #248046; color: #fff; } .pbtn--blue { background: #3b3f96; border-color: #3b3f96; color: #fff; } .pbtn--red { background: #da373c; border-color: #da373c; color: #fff; } .ppanel__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); } .ppanel__foot .pbtn { min-width: 0; } .pfacts { display: grid; gap: 14px; } .pfacts h4 { margin: 0 0 6px; font-size: 16px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .pfacts .quote { display: grid; gap: 2px; font-weight: 600; font-size: 14.5px; } .pd__desc { border-left: 4px solid #4e5058; padding-left: 12px; color: var(--text-2); font-weight: 600; } .pd__traits { display: grid; gap: 4px; font-size: 14.5px; color: var(--text-2); } .pd__traits b { color: #fff; } /* Minecraft-kortti */ .mc { position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--line-2); padding: clamp(26px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; background: radial-gradient(90% 120% at 100% 0%, rgba(255, 120, 170, .28), transparent 60%), radial-gradient(80% 100% at 0% 100%, rgba(70, 200, 110, .2), transparent 60%), rgba(255, 255, 255, .03); backdrop-filter: blur(14px); } .mc__ip { display: inline-flex; align-items: center; gap: 6px; height: 54px; padding: 0 6px 0 18px; border-radius: 14px; background: rgba(0, 0, 0, .45); border: 1px solid var(--line-2); font-family: var(--f-mono); font-size: 17px; font-weight: 600; } .mc__ip button { height: 40px; padding: 0 14px; border-radius: 10px; background: #fff; color: #0b0b0d; font-family: var(--f-body); font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; } .mc__ip button svg { width: 15px; height: 15px; } .mc__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mc__facts div { border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); padding: 14px 16px; } .mc__facts small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 600; margin-bottom: 2px; } .mc__facts b { font-size: 18px; } @media (max-width: 1023px) { .mc { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .kicker { width: min(100%, 300px); white-space: nowrap; } .prow { grid-template-columns: minmax(0, 1fr); } .pbtn { width: 100%; } .ppanel__foot .pbtn { width: auto; flex: 1 1 40%; } .ppanel__top { grid-template-columns: minmax(0, 1fr) 84px; } .ppanel__top img { width: 84px; } .glow { min-height: 210px; } } /* ========================================================================== 18. PALSTAT, PALVELIMET JA KIRJAUTUNUT KÄYTTÄJÄ (versio 7) ========================================================================== */ .side { gap: 12px; } .side__nav { gap: 12px; } .side__link { height: 40px; } @media (max-height: 900px) and (min-width: 1321px) { .side__link { height: 36px; } .side__ic { width: 28px; height: 28px; } .side__label { padding-bottom: 4px; } .side { gap: 10px; padding-top: 16px; } } .top__user { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 4px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line-2); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; transition: border-color .2s, transform .2s var(--ease); } .top__user:hover { border-color: rgba(255, 180, 0, .6); transform: translateY(-1px); } .top__user img, .top__user .f-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .f-av { display: inline-grid; place-items: center; background: linear-gradient(160deg, #ff2b2b, #8c0000); color: #fff; font-weight: 800; font-size: 14px; } /* ---------- Palstat ---------- */ .f-wrap { padding: clamp(16px, 2.4vw, 32px) 0 clamp(64px, 8vw, 110px); } .f-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin-bottom: clamp(24px, 3vw, 40px); } .f-hero .kicker { margin-bottom: 14px; } .forum { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; } .forum__main { display: grid; gap: 12px; min-width: 0; } .forum__side { position: sticky; top: calc(var(--hdr) + 16px); display: grid; gap: 12px; } .f-box, .f-post, .f-head, .f-compose, .f-comments, .f-empty { border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .016)); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); } .f-box { padding: 18px; } .f-box h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; } .f-box p { margin: 0; font-size: 14.5px; } .f-box__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; } .f-box__head h3 { margin: 0; } .f-me__top { display: flex; align-items: center; gap: 12px; } .f-me__top .avatar { width: 46px; height: 46px; } .f-me__top b { display: flex; align-items: center; gap: 6px; font-size: 16px; } .f-me__top span.muted { font-size: 12.5px; } .f-me__coins { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 180, 0, .18), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 180, 0, .28); } .f-me__coins small { display: block; font-size: 12px; color: #ffd98a; font-weight: 600; } .f-me__coins b { font-family: var(--f-display); font-weight: 850; font-size: 28px; display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; } .f-boards { display: grid; gap: 2px; max-height: 420px; overflow-y: auto; scrollbar-width: thin; margin: 0 -6px; } .f-boards a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-weight: 600; font-size: 14.5px; color: var(--text-2); transition: background .2s, color .2s; min-width: 0; } .f-boards a:hover { background: var(--glass-2); color: #fff; } .f-boards a[aria-current="page"] { background: linear-gradient(90deg, rgba(255, 43, 43, .2), rgba(255, 43, 43, .02)); color: #fff; } .f-boards a span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .f-boards small { font-family: var(--f-mono); font-size: 11.5px; color: var(--dim); } .f-boards__ic { width: 28px; height: 28px; border-radius: 9px; flex: none; display: grid; place-items: center; background: rgba(255, 255, 255, .07); font-weight: 800; font-size: 13px; color: #fff; } .f-boards__ic svg { width: 15px; height: 15px; } .f-boards a[aria-current="page"] .f-boards__ic { background: linear-gradient(180deg, #ff2b2b, #a80000); } .f-head { display: flex; align-items: center; gap: 18px; padding: 20px 22px; } .f-head__ic { width: 60px; height: 60px; border-radius: 18px; flex: none; display: grid; place-items: center; font-family: var(--f-display); font-weight: 900; font-size: 26px; color: #fff; background: linear-gradient(160deg, #ff2b2b, #8c0000); box-shadow: 0 16px 34px -14px rgba(255, 43, 43, .7), inset 0 1px 0 rgba(255, 255, 255, .3); } .f-head__ic svg { width: 28px; height: 28px; } .f-head h1 { margin: 0; font-family: var(--f-display); font-weight: 850; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; line-height: 1.1; } .f-head p { margin: 4px 0 2px; font-size: 14.5px; } .f-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .f-post { display: grid; grid-template-columns: 52px minmax(0, 1fr); transition: border-color .25s, transform .25s var(--ease); overflow: hidden; } .f-post:hover { border-color: rgba(255, 110, 110, .35); } .f-post.is-pinned { border-color: rgba(255, 180, 0, .35); } .f-post__body { padding: 16px 18px 12px 6px; min-width: 0; } .f-post__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--muted); margin-bottom: 8px; } .f-post__meta .avatar { width: 22px; height: 22px; font-size: 11px; } .f-post__board { font-weight: 800; color: #fff; } .f-post__board:hover { color: var(--red-3); } .f-post__title { display: block; margin: 0 0 6px; font-family: var(--f-display); font-weight: 800; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; } h1.f-post__title { font-size: clamp(22px, 2.4vw, 30px); } a.f-post__title:hover { color: var(--red-3); } .f-post__text { color: var(--text-2); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; text-wrap: wrap; } .f-post__text a, .f-comment__text a { color: #7fb4ff; text-decoration: underline; text-underline-offset: 3px; } .f-post__foot { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; margin-left: -8px; } .f-post__foot a, .f-post__foot button, .f-comment__foot button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--muted); transition: background .2s, color .2s; } .f-post__foot a:hover, .f-post__foot button:hover, .f-comment__foot button:hover { background: var(--glass-2); color: #fff; } .f-post__foot svg { width: 16px; height: 16px; } .f-vote { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 14px 0; } .f-vote b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; } .f-vote button { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); transition: background .2s, color .2s, transform .2s var(--ease); } .f-vote button svg { width: 17px; height: 17px; } .f-vote__down svg { transform: rotate(180deg); } .f-vote button:hover { background: var(--glass-2); transform: scale(1.12); } .f-vote__up:hover, .f-vote__up[aria-pressed="true"] { color: #ff4a4a; } .f-vote__down:hover, .f-vote__down[aria-pressed="true"] { color: #6a8dff; } .f-vote[data-oma="1"] b { color: #ff4a4a; } .f-vote[data-oma="-1"] b { color: #6a8dff; } .f-compose { display: grid; gap: 10px; padding: 16px; } .f-compose .input { width: 100%; height: auto; min-height: 46px; padding: 12px 14px; font-size: 15px; resize: vertical; font-family: inherit; } .f-compose select.input { appearance: none; } .f-compose label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; } .f-compose--small { margin-top: 8px; } .f-slug { display: flex; align-items: center; border-radius: 12px; background: #000; border: 1px solid var(--line-2); overflow: hidden; } .f-slug span { padding-left: 12px; color: var(--dim); font-family: var(--f-mono); font-size: 12.5px; white-space: nowrap; } .f-slug .input { border: 0; background: none; padding-left: 2px; font-family: var(--f-mono); } .f-empty { padding: 44px 24px; display: grid; justify-items: center; gap: 10px; text-align: center; color: var(--muted); } .f-empty b { color: #fff; font-size: 18px; } .f-comments { padding: 20px 22px 24px; } .f-comments h2 { margin: 0 0 12px; font-size: 17px; font-weight: 800; } .f-comment { margin-top: 18px; } .f-comment__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .f-comment__meta .avatar { width: 26px; height: 26px; font-size: 12px; } .f-comment__meta b { color: #fff; font-size: 14px; } .f-comment__text { margin: 6px 0 2px 34px; font-size: 15px; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; text-wrap: wrap; } .f-comment__foot { display: flex; align-items: center; gap: 4px; margin-left: 26px; } .f-comment__foot .f-vote { display: flex; align-items: center; padding: 0; gap: 2px; } .f-comment__foot .f-vote button { width: 28px; height: 28px; } .f-comment__kids { margin-left: 12px; padding-left: 20px; border-left: 2px solid var(--line-2); } .f-comment [data-vastaus] { margin-left: 34px; } /* ---------- Palvelimet ---------- */ .srv { position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--line-2); padding: clamp(26px, 4vw, 52px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: center; background: radial-gradient(90% 130% at 100% 0%, rgba(255, 43, 43, .3), transparent 60%), radial-gradient(70% 100% at 0% 100%, rgba(255, 180, 0, .12), transparent 60%), rgba(255, 255, 255, .03); backdrop-filter: blur(14px); box-shadow: 0 50px 120px -50px rgba(255, 20, 20, .5); } .srv + .srv { margin-top: 18px; } .srv__main { display: grid; gap: 18px; justify-items: start; } .srv__top { display: flex; gap: 8px; flex-wrap: wrap; } .srv__name { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(48px, 7vw, 104px); line-height: .9; letter-spacing: -.03em; } .srv__steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; } .srv__steps li { counter-increment: s; display: flex; gap: 12px; align-items: baseline; color: var(--text-2); } .srv__steps li::before { content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); font-family: var(--f-mono); font-size: 12px; color: #fff; } @media (max-width: 1023px) { .forum, .f-hero, .srv { grid-template-columns: minmax(0, 1fr); } .forum__side { position: static; order: -1; } .f-boards { max-height: 220px; } .top__user b { display: none; } .top__user .coin { display: none; } .top__user { padding: 0 4px; } } @media (max-width: 720px) { .f-post { grid-template-columns: 42px minmax(0, 1fr); } .f-post__body { padding-right: 14px; } .f-comment__kids { margin-left: 4px; padding-left: 12px; } .f-comment__text, .f-comment [data-vastaus] { margin-left: 0; } .f-comment__foot { margin-left: -8px; } .f-head { padding: 16px; gap: 14px; } .f-head__ic { width: 48px; height: 48px; font-size: 20px; } } /* Kirjaudu-painike yläpalkissa ja sivuvalikossa */ .top__user--login { padding: 0 16px 0 12px; gap: 8px; background: #5865f2; border-color: #5865f2; color: #fff; } .top__user--login:hover { border-color: #fff; background: #4752c4; } .top__user--login svg { width: 18px; height: 18px; } .side__login { flex: none; height: 44px; } .side__login svg { width: 18px; height: 18px; } @media (max-width: 1320px) and (min-width: 1024px) { .side__login { width: 48px; padding: 0; } } @media (max-width: 1023px) { .top__user--login b { display: inline; } .top__user--login { padding: 0 12px 0 10px; } .top__cta { display: none !important; } }