/* ========================================================================== 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 { --a1: #ff2b2b; --a1-rgb: 255 43 43; --a2: #ff5c8a; --a3: #ffb400; --a1d: color-mix(in srgb, var(--a1) 72%, #000); --a1dd: color-mix(in srgb, var(--a1) 36%, #000); --a1l: color-mix(in srgb, var(--a1) 78%, #fff); --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: var(--a1d); --red-2: var(--a1); --red-3: var(--a1l); --red-deep: var(--a1dd); --red-glow: rgb(var(--a1-rgb) / .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%, rgb(var(--a1-rgb) / .14), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgb(var(--a1-rgb) / .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, var(--a1), var(--a1d)); 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, var(--a1), var(--a1d)); box-shadow: 0 18px 44px -12px rgb(var(--a1-rgb) / .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: rgb(var(--a1-rgb) / .14); border-color: rgb(var(--a1-rgb) / .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/kruuna.webp") center / 89.0625% 90.625% 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; } /* Kolikon kääntö (U.kolikkoKaanto): mikkipuoli edessä, TESLES-puoli takana */ .coin.coin--kaanto { position: relative; background: none; filter: none; transform-style: preserve-3d; } .coin__puoli { position: absolute; inset: 0; background: url("../assets/kolikko/kruuna.webp") center / 89.0625% 90.625% no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: drop-shadow(0 2px 4px rgba(150, 70, 0, .35)); } .coin__puoli--taka { background-image: url("../assets/kolikko/klaava.webp"); transform: rotateY(180deg); } .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 rgb(var(--a1-rgb) / .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, rgb(var(--a1-rgb) / .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, var(--a1), var(--a1dd)); } .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, var(--a1), var(--a1dd)); 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, var(--a1), var(--a1d)); 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, var(--a1)), var(--c3, var(--a1dd))); } .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, var(--a1), var(--a1dd)); } .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, rgb(var(--a1-rgb) / .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, rgb(var(--a1-rgb) / .42), rgb(var(--a1-rgb) / .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%, var(--a1) 0%, var(--a1d) 40%, var(--a1dd) 100%); border-color: rgb(var(--a1-rgb) / .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, var(--a1), var(--a1d)); 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: rgb(var(--a1-rgb) / .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%, var(--a1) 0%, var(--a1d) 35%, var(--a1dd) 80%, var(--a1dd) 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%, var(--a1), var(--a1d) 45%, var(--a1dd)); 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%, var(--a1), var(--a1d) 40%, var(--a1dd) 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: var(--a1d); 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: var(--a1d); 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%, var(--a1), var(--a1d) 50%, var(--a1dd)); border-color: rgb(var(--a1-rgb) / .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%, rgb(var(--a1-rgb) / .28), rgba(255,255,255,.02)); border-color: rgb(var(--a1-rgb) / .35); } .podium__item--1 .avatar { box-shadow: 0 0 0 3px var(--red-2), 0 0 30px rgb(var(--a1-rgb) / .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, var(--a1dd), 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 rgb(var(--a1-rgb) / .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: rgb(var(--a1-rgb) / .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%, rgb(var(--a1-rgb) / .22), transparent 60%), var(--bg-2); border-color: rgb(var(--a1-rgb) / .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(12px); transition: opacity .35s var(--ease), transform .35s var(--ease); transition-delay: calc(min(var(--d, 0), 3) * 40ms); } .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 rgb(var(--a1-rgb) / .6); } 70% { box-shadow: 0 0 0 8px rgb(var(--a1-rgb) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--a1-rgb) / 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; } /* Vanha koko ruudun kuva säilyy, uusi häivytetään sen päälle. */ ::view-transition-group(root) { animation: none; } ::view-transition-old(root) { animation: none; opacity: 1; mix-blend-mode: normal; } ::view-transition-new(root) { animation: vtIn .28s ease-out both; mix-blend-mode: normal; } @keyframes vtIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* Kaikki osat kuuluvat samaan kuvaan, eivät erillisiin siirtymäkerroksiin. */ #sisalto, .side, .top, .tabbar, .fx { view-transition-name: 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: var(--a1d); } /* ---------- Elävä tausta ---------- */ .fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 70% -10%, color-mix(in srgb, var(--a1) 12%, var(--bg)) 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, var(--a1), transparent); animation: blobA 22s ease-in-out infinite alternate; } html.tt-uusivuosi .fx__blob--a { display: none; } html.tt-uusivuosi .fx { background: var(--bg); } html.tt-tumma-tausta .fx { background: var(--bg); } html.tt-tumma-tausta .fx__blob { display: none; } .tt-volume { display:flex; align-items:center; gap:8px; flex-shrink:0; } .tt-volume button { padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.04); color:var(--text); font:inherit; font-size:12px; cursor:pointer; } .tt-volume input { width:72px; accent-color:var(--a1); cursor:pointer; } @media(max-width:600px) { .tt-volume { gap:4px; } .tt-volume input { width:48px; } .tt-volume button { font-size:11px; padding:6px; } } .fx__blob--b { width: 520px; height: 520px; left: 18%; top: 46%; background: radial-gradient(closest-side, var(--a2), 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, var(--a2), transparent); opacity: .2; animation: blobA 34s ease-in-out infinite alternate-reverse; } .fx__canvas { position: absolute; inset: 0; width: 100%; height: 100%; } html.tt-avaruus .fx__canvas { display: none; } .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, var(--a1), var(--a2), var(--a3)); box-shadow: 0 0 12px var(--a1); } /* ---------- 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, rgb(var(--a1-rgb) / .22), rgba(255, 255, 255, .03)); border: 1px solid rgb(var(--a1-rgb) / .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: 4px; } .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, rgb(var(--a1-rgb) / .2), rgb(var(--a1-rgb) / .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: var(--a1); box-shadow: 0 0 14px var(--a1); } .side__link[aria-current="page"] .side__ic { background: linear-gradient(180deg, var(--a1), var(--a1d)); box-shadow: 0 8px 20px -6px rgb(var(--a1-rgb) / .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, var(--a1), var(--a2)); 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, var(--a1) 0%, var(--a2) 45%, var(--a3) 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: var(--a2); } /* 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, rgb(var(--a1-rgb) / .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: var(--a1); 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 rgb(var(--a1-rgb) / .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%, var(--a1) 0%, var(--a1d) 42%, var(--a1dd) 100%); } .tile--white { background: #fff; backdrop-filter: none; } .kpi--red { background: radial-gradient(140% 140% at 100% 0%, var(--a1), var(--a1d) 50%, var(--a1dd)); } .rule--wide { background: radial-gradient(120% 140% at 100% 0%, rgb(var(--a1-rgb) / .26), transparent 60%), rgba(255, 255, 255, .03); } .podium__item--1 { background: radial-gradient(120% 100% at 50% 0%, rgb(var(--a1-rgb) / .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%), rgb(var(--a1-rgb) / .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: rgb(var(--a1-rgb) / .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 rgb(var(--a1-rgb) / .4); border-color: rgb(var(--a1-rgb) / .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%, var(--a2) 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 rgb(var(--a1-rgb) / .7); } .btn--red { background: linear-gradient(180deg, var(--a1), var(--a1d)); 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 rgb(var(--a1-rgb) / .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, var(--a1), var(--a2), var(--a3), var(--a1)); 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 rgb(var(--a1-rgb) / .15), 0 0 80px -20px rgb(var(--a1-rgb) / .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, rgb(var(--a1-rgb) / .22), rgb(var(--a1-rgb) / .04)); box-shadow: inset 3px 0 0 var(--a1); } .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: 4px; } .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: var(--a1); box-shadow: 0 0 14px var(--a1); } .tabbar [aria-current="page"] svg { color: var(--a1); } .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: var(--a2); } .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, var(--a1d), var(--a1)); } .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: 4px; } .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, var(--a1), var(--a1dd)); 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, rgb(var(--a1-rgb) / .2), rgb(var(--a1-rgb) / .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, var(--a1), var(--a1d)); } .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, var(--a1), var(--a1dd)); box-shadow: 0 16px 34px -14px rgb(var(--a1-rgb) / .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: rgb(var(--a1-rgb) / .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: var(--a1); } .f-vote__down:hover, .f-vote__down[aria-pressed="true"] { color: #6a8dff; } .f-vote[data-oma="1"] b { color: var(--a1); } .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%, rgb(var(--a1-rgb) / .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 rgb(var(--a1-rgb) / .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; } } /* ========================================================================== 19. PALSTAT 2: ROOLIT, PROFIILIT, TEEMAT, LOOTBOXIT (versio 8) ========================================================================== */ /* Etusivun Discord-malli: mobiilissa jäsenlista piiloon, viestit täyteen leveyteen */ .dc__body--showcase { grid-template-columns: minmax(0, 1fr) 230px; min-height: 0; } @media (max-width: 720px) { .dc__body--showcase { grid-template-columns: minmax(0, 1fr); } .dc__body--showcase .dc__side { display: none; } } .dc-msg__head { text-wrap: wrap; } .dc-msg__txt { text-wrap: wrap; overflow-wrap: anywhere; } /* Discord-painike */ .f-discord { background: #5865f2; color: #fff; border-color: #5865f2; } .f-discord:hover { background: #4752c4; transform: translateY(-1px); } .f-discord svg { width: 18px; height: 18px; } /* ---------- Roolimerkit ---------- */ .f-name { font-weight: 700; color: #fff; } a.f-name:hover { text-decoration: underline; text-underline-offset: 3px; } .f-role { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; background: rgba(255, 255, 255, .08); color: var(--text-2); border: 1px solid var(--line-2); vertical-align: middle; margin-left: 6px; } .f-role--owner { background: linear-gradient(90deg, #ffb400, #ff8a00); color: #1a0f00; border-color: transparent; box-shadow: 0 0 14px rgba(255, 180, 0, .45); } .f-role--admin { background: linear-gradient(90deg, #ff2b2b, #c00000); color: #fff; border-color: transparent; } .f-role--mod { background: rgba(35, 165, 90, .2); color: #5fe39a; border-color: rgba(35, 165, 90, .5); } .f-role--founder { background: rgba(88, 101, 242, .22); color: #aab2ff; border-color: rgba(88, 101, 242, .55); } .f-role--bmod { background: rgba(56, 189, 248, .16); color: #8ad8ff; border-color: rgba(56, 189, 248, .45); } .f-role--op { background: rgb(var(--a1-rgb) / .16); color: var(--a1l); border-color: rgb(var(--a1-rgb) / .45); } .f-role--pin { background: rgba(255, 180, 0, .14); color: #ffd780; border-color: rgba(255, 180, 0, .4); } .f-post__meta .f-role, .f-comment__meta .f-role { margin-left: 0; } /* ---------- Sivupalkin lisät ---------- */ .f-me__top { display: flex; align-items: center; gap: 12px; border-radius: 12px; transition: opacity .2s; } .f-me__top:hover { opacity: .85; } .f-me__top b { display: block; font-size: 16px; } .f-me__top span { font-size: 12.5px; } .f-me__top .f-role { margin-left: 0; } .f-me__links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; } .f-me__links a, .f-me__links button { display: grid; justify-items: center; gap: 5px; padding: 10px 2px 8px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 11.5px; font-weight: 700; color: var(--text-2); transition: background .2s, color .2s, border-color .2s; } .f-me__links a:hover, .f-me__links button:hover { background: var(--glass-2); color: #fff; border-color: var(--line-2); } .f-me__links svg { width: 17px; height: 17px; } .f-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; } .f-stats div { border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); padding: 10px 6px; text-align: center; } .f-stats b { display: block; font-size: 16px; font-weight: 800; } .f-stats span { font-size: 11.5px; color: var(--muted); } .f-sub { margin: 16px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .f-people { display: grid; gap: 6px; } .f-person { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; text-align: left; font-size: 14px; } .f-person .avatar { width: 28px; height: 28px; font-size: 12px; } .f-person > span { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; } button.f-person { padding: 6px 8px; border-radius: 10px; } button.f-person:hover { background: var(--glass-2); } .f-x { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); flex: none; } .f-x:hover { background: rgba(255, 255, 255, .1); color: #fff; } .f-x svg { width: 11px; height: 11px; } .f-addmod { margin-top: 10px; display: grid; gap: 6px; } .f-addmod .input { height: 40px; font-size: 14px; width: 100%; } .f-joined { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; } .f-boards__ic { font-size: 15px; } /* ---------- Syöte ---------- */ .f-head__ic { font-size: 28px; } .f-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; } .f-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); min-width: 0; transition: border-color .2s; } .f-search:focus-within { border-color: var(--a1); } .f-search svg { width: 16px; height: 16px; color: var(--muted); flex: none; } .f-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 14.5px; height: 100%; } .f-compose__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .f-compose__foot > span { display: flex; gap: 8px; margin-left: auto; } .f-form { border: 0; background: none; box-shadow: none; padding: clamp(24px, 4vw, 36px); margin: 0; backdrop-filter: none; } .f-row { display: flex; gap: 10px; } .f-post__text code, .f-comment__text code, .f-profile__bio code { font-family: var(--f-mono); font-size: .88em; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); white-space: pre-wrap; } .f-quote { display: block; border-left: 3px solid var(--line-2); padding-left: 12px; color: var(--muted); } .f-post { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px -40px #000; } .f-post:hover { transform: translateY(-2px); } .f-post .f-vote { background: rgba(0, 0, 0, .22); border-right: 1px solid var(--line); } /* ---------- Profiili ---------- */ .f-profile { border-radius: var(--r-xl); border: 1px solid var(--line-2); overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .016)); backdrop-filter: blur(14px); box-shadow: 0 50px 120px -60px var(--p1); } .f-profile__banner { height: clamp(110px, 16vw, 180px); background: radial-gradient(60% 140% at 85% 0%, var(--p3), transparent 60%), radial-gradient(70% 160% at 15% 100%, var(--p2), transparent 65%), linear-gradient(120deg, var(--p1), color-mix(in srgb, var(--p1) 40%, #000)); position: relative; } .f-profile__banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8, 8, 11, .55)); } .f-profile__body { padding: 0 clamp(18px, 3vw, 32px) clamp(20px, 3vw, 30px); } .f-profile__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: -52px; position: relative; } .f-profile__av { width: 112px; height: 112px; font-size: 44px; border: 5px solid #0d0d11; box-shadow: 0 0 0 2px var(--p1), 0 18px 40px -10px var(--p1); } .f-profile__actions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; } .f-profile__name { margin: 14px 0 6px; font-family: var(--f-display); font-weight: 900; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -.03em; line-height: 1.05; overflow-wrap: anywhere; } .f-profile__roles { display: flex; flex-wrap: wrap; gap: 6px; } .f-profile__roles .f-role { margin-left: 0; height: 24px; font-size: 11px; padding: 0 10px; } .f-profile__status { margin: 14px 0 0; font-family: var(--f-serif); font-style: italic; font-weight: 600; font-size: 17px; color: #fff; } .f-profile__bio { margin: 12px 0 0; color: var(--text-2); font-size: 15.5px; line-height: 1.6; max-width: 70ch; text-wrap: wrap; overflow-wrap: anywhere; } .f-profile__games { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .f-profile__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 20px; } .f-profile__stats div { border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); padding: 12px 10px; text-align: center; } .f-profile__stats b { display: flex; justify-content: center; align-items: center; gap: 6px; font-family: var(--f-display); font-weight: 850; font-size: 22px; font-variant-numeric: tabular-nums; } .f-profile__stats span { font-size: 12px; color: var(--muted); } .f-profile__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 16px; font-size: 13px; color: var(--muted); } .f-profile__meta a { color: var(--text-2); } .f-profile__meta a:hover { color: #fff; } .f-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .f-usercard { display: grid; justify-items: center; gap: 8px; padding: 18px 10px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .016)); text-align: center; transition: transform .25s var(--ease), border-color .25s; } .f-usercard:hover { transform: translateY(-3px); border-color: rgb(var(--a1-rgb) / .45); } .f-usercard b { font-size: 14.5px; overflow-wrap: anywhere; } .f-usercard .f-role { margin: 0; } /* ---------- Teemat ---------- */ .f-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .f-theme { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); transition: transform .25s var(--ease), border-color .25s, box-shadow .3s; } .f-theme:hover { transform: translateY(-3px); border-color: var(--p1); box-shadow: 0 30px 60px -30px var(--p1); } .f-theme.is-on { border-color: var(--p1); box-shadow: 0 0 0 2px var(--p1), 0 30px 60px -30px var(--p1); } .f-theme__art { position: relative; height: 104px; background: var(--pbg); overflow: hidden; display: grid; place-items: center; } .f-theme__art i { position: absolute; border-radius: 50%; filter: blur(22px); opacity: .85; } .f-theme__art i:nth-child(1) { width: 110px; height: 110px; right: -20px; top: -40px; background: var(--p1); } .f-theme__art i:nth-child(2) { width: 90px; height: 90px; left: -10px; bottom: -40px; background: var(--p2); } .f-theme__art i:nth-child(3) { width: 50px; height: 50px; left: 46%; top: 10px; background: var(--p3); opacity: .6; } .f-theme__art span { position: relative; font-family: var(--f-display); font-weight: 900; font-size: 34px; background: linear-gradient(100deg, var(--p1), var(--p2), var(--p3)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6)); } .f-theme__body { padding: 14px; display: grid; gap: 6px; } .f-theme__body b { font-size: 16px; } .f-theme__body .dim { font-size: 13px; } .f-theme__btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .f-custom { margin-top: 4px; } .f-colors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .f-colors label { display: grid; gap: 8px; justify-items: center; padding: 14px 8px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); font-size: 13px; font-weight: 700; cursor: pointer; } .f-colors input { width: 56px; height: 56px; border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; } .f-colors input::-webkit-color-swatch-wrapper { padding: 0; } .f-colors input::-webkit-color-swatch { border: 3px solid rgba(255, 255, 255, .25); border-radius: 50%; } /* ---------- Palvelimen salasana ---------- */ .srv__pass { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .srv__pass > span { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .srv__pass .mc__ip { height: 46px; font-size: 18px; } .srv__pass .mc__ip button { height: 34px; } /* ---------- Lootboxit ---------- */ .loot-hero { position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--line-2); min-height: clamp(280px, 34vw, 440px); display: flex; align-items: flex-end; isolation: isolate; box-shadow: 0 60px 140px -60px rgba(255, 170, 60, .5); } .loot-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); } .loot-hero:hover > img { transform: scale(1.04); } .loot-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 6, 9, .92) 0%, rgba(6, 6, 9, .6) 45%, transparent 80%), linear-gradient(0deg, rgba(6, 6, 9, .7), transparent 55%); } .loot-hero__txt { padding: clamp(24px, 4vw, 52px); display: grid; gap: 16px; justify-items: start; max-width: 620px; } .loot-hero__txt .kicker { margin: 0; } .loot { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .loot__card { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); border-top: 3px solid var(--c); background: radial-gradient(90% 60% at 50% 20%, color-mix(in srgb, var(--c) 28%, transparent), transparent 70%), rgba(255, 255, 255, .03); padding: 0 14px 16px; display: grid; gap: 4px; text-align: center; transition: transform .35s var(--ease), box-shadow .4s, border-color .3s; } .loot__card:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -30px var(--c); border-color: var(--c); } .loot__img { margin: 0 -14px 8px; aspect-ratio: 16 / 11; overflow: hidden; } .loot__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .loot__card:hover .loot__img img { transform: scale(1.08) rotate(-1.5deg); } .loot__name { font-family: var(--f-serif); font-style: italic; font-weight: 700; font-size: 18px; color: var(--c); } .loot__pct { font-family: var(--f-display); font-weight: 900; font-size: 30px; line-height: 1; } .loot__bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: 8px; } .loot__bar i { display: block; height: 100%; border-radius: inherit; background: var(--c); box-shadow: 0 0 12px var(--c); } @media (max-width: 1023px) { .loot { grid-template-columns: repeat(3, minmax(0, 1fr)); } .f-bar { grid-template-columns: minmax(0, 1fr) auto; } .f-bar .seg { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 720px) { .loot { grid-template-columns: repeat(2, minmax(0, 1fr)); } .f-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); } .f-profile__top { margin-top: -44px; } .f-profile__av { width: 88px; height: 88px; font-size: 34px; } .f-profile__actions { width: 100%; } .f-profile__actions .btn { flex: 1 1 auto; } .f-bar { grid-template-columns: minmax(0, 1fr); } .f-bar .btn { width: 100%; } .f-post .f-vote { border-right: 0; background: none; } .f-row { flex-direction: column; } .f-row label { flex: 1 1 auto !important; } } @media (max-width: 1023px) { .forum__side { order: 0; } } /* ========================================================================== 20. KASINON PELIT, K18-VAHVISTUS JA VÄRIVALITSIN (versio 10) ========================================================================== */ /* ---------- K18 ---------- */ .k18-lukittu { overflow: hidden; } .k18-lukittu main, .k18-lukittu [data-footer] { filter: blur(22px) saturate(.5); pointer-events: none; user-select: none; } .k18 { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 18px; background: radial-gradient(80% 60% at 50% 40%, rgb(var(--a1-rgb) / .16), transparent 70%), rgba(4, 4, 6, .78); backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s; overflow-y: auto; } .k18.is-open { opacity: 1; } .k18__win { width: min(540px, 100%); padding: clamp(26px, 5vw, 44px); border-radius: var(--r-xl); background: linear-gradient(180deg, #17171c, #0c0c10); border: 1px solid var(--line-2); box-shadow: 0 60px 160px -40px rgb(var(--a1-rgb) / .55), inset 0 1px 0 rgba(255, 255, 255, .08); display: grid; gap: 16px; justify-items: center; text-align: center; transform: translateY(18px) scale(.97); transition: transform .5s var(--ease); } .k18.is-open .k18__win { transform: none; } .k18__badge { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 900; font-size: 30px; letter-spacing: -.02em; color: #fff; border: 5px solid var(--a1); box-shadow: 0 0 0 6px rgb(var(--a1-rgb) / .14), 0 0 50px rgb(var(--a1-rgb) / .55), inset 0 0 24px rgb(var(--a1-rgb) / .35); } .k18__win h2 { margin: 6px 0 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(24px, 4.4vw, 32px); line-height: 1.1; text-wrap: balance; } .k18__win p { margin: 0; color: var(--text-2); font-size: 15.5px; text-wrap: balance; } .k18__list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; width: 100%; text-align: left; } .k18__list li { padding: 12px 16px; border-radius: var(--r); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-left: 3px solid var(--a1); font-size: 14.5px; color: var(--text-2); } .k18__list b { color: #fff; } .k18__win .k18__help { font-size: 13px; color: var(--muted); } .k18__btns { display: grid; gap: 10px; width: 100%; margin-top: 6px; } .k18__btns .btn { width: 100%; } /* ---------- pelikortin Pelaa-nappi ---------- */ .game[data-pelaa] { cursor: pointer; } .game__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; } .game__foot .game__bet { margin: 0; padding: 0; } .loot-hero__txt .btn { margin-top: 4px; } /* ---------- peli-ikkuna ---------- */ .kz-auki { overflow: hidden; } .kz { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 14px; background: rgba(4, 4, 6, .8); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; overflow-y: auto; } .kz.is-open { opacity: 1; visibility: visible; } .kz__win { position: relative; width: min(780px, 100%); border-radius: var(--r-xl); background: radial-gradient(120% 70% at 50% 0%, rgb(var(--a1-rgb) / .16), transparent 60%), linear-gradient(180deg, #16161b, #0b0b0e); border: 1px solid var(--line-2); box-shadow: 0 70px 180px -50px rgb(var(--a1-rgb) / .6), inset 0 1px 0 rgba(255, 255, 255, .08); padding: clamp(14px, 2.6vw, 24px); display: grid; gap: 14px; transform: translateY(24px) scale(.96); transition: transform .45s var(--ease); } .kz.is-open .kz__win { transform: none; } .kz__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; border-radius: inherit; } .kz__top { display: flex; align-items: center; gap: 12px; } .kz__emoji { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: rgb(var(--a1-rgb) / .16); border: 1px solid rgb(var(--a1-rgb) / .35); flex: none; } .kz__top h2 { margin: 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(20px, 3.4vw, 26px); flex: 1; min-width: 0; } .kz__saldo { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(0, 0, 0, .4); border: 1px solid var(--line-2); font-family: var(--f-mono); font-weight: 600; font-size: 15px; } .kz__saldo.is-pulse { animation: kz-pulse .6s var(--ease); } @keyframes kz-pulse { 30% { transform: scale(1.12); border-color: var(--gold); box-shadow: 0 0 24px rgba(255, 180, 0, .5); } } .kz__x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text-2); font-size: 15px; cursor: pointer; flex: none; transition: background .2s, color .2s, transform .3s var(--ease); } .kz__x:hover { background: rgba(255, 255, 255, .12); color: #fff; transform: rotate(90deg); } .kz__stage { position: relative; min-height: clamp(250px, 44vw, 330px); border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; background: radial-gradient(90% 90% at 50% 30%, rgba(255, 255, 255, .06), transparent 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 9px), #08080b; border: 1px solid var(--line); box-shadow: inset 0 0 80px rgba(0, 0, 0, .7); } .kz__msg { min-height: 46px; display: grid; place-items: center; text-align: center; padding: 0 16px; border-radius: 999px; font-weight: 800; font-size: 15.5px; border: 1px solid transparent; opacity: 0; text-wrap: balance; } .kz__msg.is-on { opacity: 1; animation: kz-pop .45s var(--ease); } .kz__msg.is-win { color: #7dffb0; background: rgba(35, 165, 90, .14); border-color: rgba(35, 165, 90, .5); box-shadow: 0 0 40px -8px rgba(35, 165, 90, .6); } .kz__msg.is-lose { color: #ff9d9d; background: rgba(255, 60, 60, .09); border-color: rgba(255, 60, 60, .3); } .kz__msg.is-tasa { color: var(--text-2); background: rgba(255, 255, 255, .05); border-color: var(--line-2); } @keyframes kz-pop { from { transform: scale(.9); opacity: 0; } 60% { transform: scale(1.03); } } .kz__ctl { display: grid; gap: 14px; transition: opacity .25s; } .kz.is-busy .kz__ctl { opacity: .5; pointer-events: none; } .kz__foot { margin: 0; text-align: center; font-size: 12.5px; color: var(--dim); } .kz-lbl { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .kz-lbl b { color: #fff; font-family: var(--f-mono); font-size: 14px; margin-left: 6px; letter-spacing: 0; } .kz-note { margin: 0; text-align: center; color: var(--muted); font-size: 14px; } .kz-note b { color: #fff; } .kz-bet { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: var(--r); background: rgba(0, 0, 0, .3); border: 1px solid var(--line); } .kz-bet__in { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); } .kz-bet__in button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: #fff; font-size: 19px; font-weight: 700; cursor: pointer; transition: background .2s; } .kz-bet__in button:hover { background: rgb(var(--a1-rgb) / .5); } .kz-bet__in input { width: 52px; border: 0; background: none; color: #fff; text-align: right; font-family: var(--f-mono); font-weight: 600; font-size: 18px; outline: none; -moz-appearance: textfield; appearance: textfield; } .kz-bet__in input::-webkit-outer-spin-button, .kz-bet__in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .kz-bet__chips { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; } .kz-opts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; } .kz-opt { display: grid; gap: 2px; justify-items: center; align-content: center; min-height: 56px; padding: 8px 10px; border-radius: var(--r); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text-2); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; transition: border-color .2s, background .2s, transform .25s var(--ease), box-shadow .25s; } .kz-opt small { font-family: var(--f-mono); font-weight: 600; font-size: 12px; color: var(--muted); } .kz-opt:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .35); color: #fff; } .kz-opt[aria-pressed="true"] { color: #fff; border-color: var(--a1); background: rgb(var(--a1-rgb) / .2); box-shadow: 0 0 0 1px var(--a1), 0 14px 34px -14px rgb(var(--a1-rgb) / .9); } .kz-opt--pun { background: rgba(230, 40, 50, .22); } .kz-opt--mus { background: rgba(0, 0, 0, .55); } .kz-opt--vih { background: rgba(35, 165, 90, .22); } .kz-opt--sq { min-height: 52px; padding: 6px; } .kz-opt--big { min-height: 68px; font-size: 16px; } .kz-go { width: 100%; --h: 58px; font-size: 16.5px; } .kz-go .coin, .kz-act .coin { margin-left: 2px; } .kz-go--cash { background: linear-gradient(180deg, #2fd27a, #178a4b); box-shadow: 0 16px 40px -12px rgba(35, 165, 90, .8), inset 0 1px 0 rgba(255, 255, 255, .25); animation: kz-cash 1s ease-in-out infinite; } .kz-go--cash:hover { background: linear-gradient(180deg, #3ae489, #178a4b); } .kz-go--cash[disabled] { animation: none; opacity: .45; } .kz-go--cash b { font-family: var(--f-mono); margin-left: 6px; } @keyframes kz-cash { 50% { transform: scale(1.015); box-shadow: 0 16px 54px -8px rgba(35, 165, 90, 1), inset 0 1px 0 rgba(255, 255, 255, .25); } } .kz-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .kz-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kz-act { width: 100%; --h: 54px; padding-inline: 10px; } .kz-act[disabled] { opacity: .4; pointer-events: none; } /* ---------- peli-ikkunan lisäosat ---------- */ .kz__win { width: min(820px, 100%); } .kz__sw { position: relative; } .kz__stage { min-height: clamp(280px, 48vw, 370px); } .kz__aani svg, .kz__x svg { width: 18px; height: 18px; display: block; margin: auto; } .kz__pelit { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -4px -2px; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); } .kz__pelit::-webkit-scrollbar { display: none; } .kz__pelit button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: color .2s, background .2s, border-color .2s, transform .25s var(--ease); } .kz__pelit button i { font-style: normal; font-size: 16px; line-height: 1; } .kz__pelit button:hover { color: #fff; background: rgba(255, 255, 255, .08); transform: translateY(-1px); } .kz__pelit button[aria-current="true"] { color: #fff; border-color: var(--a1); background: rgb(var(--a1-rgb) / .22); box-shadow: 0 8px 22px -12px rgb(var(--a1-rgb) / 1); } .kz__stage { animation: kz-vaihto .32s var(--ease); } @keyframes kz-vaihto { from { opacity: .0; transform: scale(.985); } } .kz__saldo.is-pulse { animation: kz-pulse .7s var(--ease); } .kz__saldo.is-plus.is-pulse b { color: #7dffb0; } .kz__flash { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 2px; pointer-events: none; opacity: 0; border-radius: var(--r-lg); background: radial-gradient(60% 60% at 50% 50%, rgba(0, 0, 0, .72), transparent 75%); } .kz__flash small { font-size: 13px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #ffe9a6; } .kz__flash b { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(54px, 12vw, 96px); line-height: 1; background: linear-gradient(180deg, #fff6c9, #ffc93c 55%, #ff9d00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 26px rgba(255, 170, 0, .65)); font-variant-numeric: tabular-nums; } .kz__flash.is-on { animation: kz-flash 2s var(--ease) forwards; } @keyframes kz-flash { 0% { opacity: 0; transform: scale(.6); } 14% { opacity: 1; transform: scale(1.06); } 22% { transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(1.04); } } .kz__hist { display: flex; align-items: center; gap: 6px; min-height: 26px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); } .kz__hist small { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-right: 4px; flex: none; } .hk { flex: none; font-style: normal; font-family: var(--f-mono); font-weight: 600; font-size: 12px; line-height: 1; padding: 6px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); background: rgba(255, 255, 255, .04); white-space: nowrap; } .hk:first-of-type { animation: kz-pop .4s var(--ease); } .hk--win { color: #7dffb0; border-color: rgba(35, 165, 90, .6); background: rgba(35, 165, 90, .12); } .hk--lose { color: #ff9d9d; border-color: rgba(255, 60, 60, .35); background: rgba(255, 60, 60, .08); } .hk--punainen { color: #fff; background: #c8141f; border-color: #ff6a72; } .hk--musta { color: #fff; background: #17171c; border-color: #55555f; } .hk--vihrea { color: #fff; background: #129a50; border-color: #5df0a0; } .hk--kruuna { color: #2a1800; background: linear-gradient(180deg, #ffe680, #ffb400); border-color: #ffd24a; } .hk--klaava { color: #2a1800; background: linear-gradient(180deg, #ffc27a, #e07a00); border-color: #ff9d3d; } .kz-bet { grid-template-columns: auto auto auto 1fr; } .kz-bet__nopeat { display: flex; gap: 5px; } .kz-bet__nopeat button { height: 32px; min-width: 38px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); color: var(--text-2); font-family: var(--f-mono); font-weight: 600; font-size: 12px; cursor: pointer; transition: background .2s, color .2s; } .kz-bet__nopeat button:hover { background: rgba(255, 255, 255, .14); color: #fff; } /* pelimerkit */ .pm { --pc: #8d8d97; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; padding: 0; color: #fff; font-style: normal; font-family: var(--f-mono); font-weight: 600; font-size: 12.5px; cursor: pointer; background: radial-gradient(circle, color-mix(in srgb, var(--pc) 70%, #000) 0 44%, #fff 45% 50%, transparent 51%), repeating-conic-gradient(#fff 0 14deg, var(--pc) 14deg 36deg); box-shadow: 0 5px 10px -3px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .35); transition: transform .25s var(--ease), box-shadow .25s; } .pm--1 { --pc: #e0262f; } .pm--2 { --pc: #2b7bff; } .pm--3 { --pc: #17a05a; } .pm--4 { --pc: #26262e; } .kz-bet__chips .pm { min-width: 0; border: 0; } .kz-bet__chips .pm:hover { transform: translateY(-4px) rotate(-10deg); box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .9), inset 0 0 0 2px rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .35); } .kz-opt--kuva { grid-auto-flow: column; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 10px; } .kz-opt--kuva img { width: 38px; height: 38px; grid-row: span 2; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); } .kz-opt--kuva small { grid-column: 2; justify-self: start; } .kz-auto { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--r); background: rgba(0, 0, 0, .3); border: 1px solid var(--line); } .kz-auto .kz-lbl { flex: 1; } .kz-auto input { width: 96px; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); color: #fff; font-family: var(--f-mono); font-weight: 600; font-size: 15px; text-align: right; outline: none; } .kz-auto input:focus { border-color: var(--a1); } .kz-auto em { font-style: normal; font-family: var(--f-mono); color: var(--muted); } .kz-kytkin { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14.5px; font-weight: 700; color: var(--text-2); user-select: none; } .kz-kytkin input { position: absolute; opacity: 0; pointer-events: none; } .kz-kytkin > i { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid var(--line-2); transition: background .25s, border-color .25s; } .kz-kytkin > i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); transition: transform .3s var(--ease); } .kz-kytkin input:checked + i { background: var(--a1); border-color: var(--a1); } .kz-kytkin input:checked + i::after { transform: translateX(20px); } .kz-kytkin input:focus-visible + i { outline: 2px solid #fff; outline-offset: 2px; } .kz-row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kz-note--iso { font-size: 15px; color: var(--text-2); text-wrap: balance; } /* pöytien verat */ .kz[data-peli="blackjack"] .kz__stage, .kz[data-peli="roulette"] .kz__stage, .kz[data-peli="updown"] .kz__stage { background: radial-gradient(90% 100% at 50% 20%, #17805a, #0b5238 55%, #05301f); box-shadow: inset 0 0 90px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .06); } .kz[data-peli="dice"] .kz__stage, .kz[data-peli="coinflip"] .kz__stage { background: radial-gradient(90% 100% at 50% 30%, color-mix(in srgb, var(--a1) 50%, #1a0606), color-mix(in srgb, var(--a1) 22%, #0a0406) 60%, #070305); box-shadow: inset 0 0 90px rgba(0, 0, 0, .7); } .kz[data-peli="crash"] .kz__stage { background: radial-gradient(120% 100% at 80% 0%, #1b2450, #0a0d22 55%, #05060f); } .kz[data-peli="lootbox"] .kz__stage { background: radial-gradient(70% 80% at 50% 50%, #1c1c26, #08080c 80%); } /* ---------- pelikortit ---------- */ .kortti { --kw: 84px; position: relative; width: var(--kw); height: calc(var(--kw) * 1.4); border-radius: calc(var(--kw) * .1); background: linear-gradient(160deg, #fff, #ececf2); color: #17171c; box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(0, 0, 0, .12); flex: none; display: grid; place-items: center; font-family: var(--f-display); font-stretch: 100%; } .kortti--pun { color: #d91e28; } .kortti b { position: absolute; top: 6%; left: 8%; display: grid; justify-items: center; font-weight: 900; font-size: calc(var(--kw) * .25); line-height: 1; } .kortti b i { font-style: normal; font-size: .82em; } .kortti .kortti__ala { top: auto; left: auto; bottom: 6%; right: 8%; transform: rotate(180deg); } .kortti > span { font-size: calc(var(--kw) * .5); line-height: 1; } .kortti--kuva > span { font-weight: 900; font-size: calc(var(--kw) * .5); } .kortti--pieni { --kw: 40px; } .kortti--pieni > span, .kortti--pieni .kortti__ala { display: none; } .kortti--pieni b { position: static; font-size: calc(var(--kw) * .36); } .kortti--pieni b i { font-size: 1em; } .kortti--iso { --kw: 132px; } .kortti--selka { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22) 0 12%, transparent 13%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .13) 0 4px, transparent 4px 9px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .12) 0 4px, transparent 4px 9px), linear-gradient(160deg, var(--a1), var(--a1dd)); box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .75), inset 0 0 0 calc(var(--kw) * .055) #fff, inset 0 0 0 calc(var(--kw) * .07) rgba(0, 0, 0, .25); } .kortti.is-uusi { animation: kortti-jako .42s var(--ease) backwards; animation-delay: calc(var(--i) * .28s); } .kortti.is-kaanto { animation: kortti-kaanto .5s ease-in-out backwards; } .kortti.is-kaanto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .13) 0 4px, transparent 4px 9px), linear-gradient(160deg, var(--a1), var(--a1dd)); box-shadow: inset 0 0 0 calc(var(--kw) * .055) #fff; animation: kortti-selka .5s steps(1) forwards; } .kortti.is-vaarin { box-shadow: 0 0 0 4px #ff3b3b, 0 0 50px rgba(255, 60, 60, .7); } @keyframes kortti-jako { from { transform: translate(180px, -190px) rotate(40deg) scale(.6); opacity: 0; } } @keyframes kortti-kaanto { from { transform: rotateY(180deg); } 50% { transform: rotateY(90deg) scale(1.1); } to { transform: none; } } @keyframes kortti-selka { 0% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ---------- CoinFlip: kolikko kolmesta kuvasta (kruuna, klaava, reuna) ---------- */ .kol, .nop { display: grid; justify-items: center; align-content: center; gap: 30px; perspective: 1000px; padding: 44px 0 20px; width: 100%; } .kol__lift.is-up { animation: kol-lift 2.35s cubic-bezier(.3, 0, .3, 1); } @keyframes kol-lift { 0%, 100% { transform: none; } 44% { transform: translateY(-110px) scale(1.22); } 86% { transform: translateY(0) scale(1); } 91% { transform: translateY(-12px); } 96% { transform: translateY(0); } } .kol__c { position: relative; width: 176px; height: 180px; transform-style: preserve-3d; transition: transform 2.3s cubic-bezier(.22, .6, .3, 1); } .kol__f { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; user-select: none; } .kol__f--a { transform: translateZ(11px); } .kol__f--b { transform: rotateY(180deg) translateZ(11px); } .kol__k { position: absolute; inset: 1.5% 1% 2.5%; border-radius: 50%; background: linear-gradient(180deg, #ffb400, #d86a00 60%, #9b2a00); border: 2px solid #8f2400; } .kol__r { display: none; position: absolute; left: .5%; right: .5%; top: 50%; height: 24px; margin-top: -12px; background: url("../assets/kolikko/reuna.webp") center / 100% 100% no-repeat; transform: rotateX(90deg); } .kol__varjo { width: 150px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); } .kol__varjo.is-up { animation: kol-varjo 2.35s cubic-bezier(.3, 0, .3, 1); } @keyframes kol-varjo { 44% { transform: scale(.5); opacity: .35; } 86% { transform: none; opacity: 1; } } /* ---------- Dice: umpinainen noppa (sisäkuutio täyttää pyöristetyt kulmat) ---------- */ .nop__lift.is-up { animation: kol-lift 1.9s cubic-bezier(.3, 0, .3, 1); } .nop__cube { --s: 120px; position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; transition: transform 1.9s cubic-bezier(.2, .7, .25, 1); } .nop__f { position: absolute; inset: 10px; border-radius: 14px; padding: 12px; background: none !important; box-shadow: none !important; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; place-items: center; background: radial-gradient(120% 120% at 30% 25%, #ffffff, #e4e4ec 70%, #cfcfda); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), inset 0 0 18px rgba(0, 0, 0, .1); backface-visibility: hidden; } .nop__f i, .dn i { width: 100%; aspect-ratio: 1; border-radius: 50%; } .nop__f i.on { background: radial-gradient(circle at 35% 30%, #4a4a52, #0c0c10); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .8); } .nop__f--1 i.on { background: radial-gradient(circle at 35% 30%, #ff7a7a, #c20f1a); transform: scale(1.55); } /* Sisäkuution sivut ovat täysikokoisia ja kaksi pikseliä pinnan alla, joten pyöristettyjen kulmien takaa näkyy aina nopan omaa pintaa eikä taustaa. */ .nop__s { position: absolute; inset: 0; background: #d3d3de; } .nop__f--1, .nop__s--1 { transform: translateZ(calc(var(--s) / 2 + .6px)); } .nop__f--2, .nop__s--2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2 + .6px)); } .nop__f--3, .nop__s--3 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2 + .6px)); } .nop__f--4, .nop__s--4 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2 + .6px)); } .nop__f--5, .nop__s--5 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2 + .6px)); } .nop__f--6, .nop__s--6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2 + .6px)); } .nop__s--1 { transform: translateZ(calc(var(--s) / 2 - 2px)); } .nop__s--2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2 - 2px)); } .nop__s--3 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2 - 2px)); } .nop__s--4 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2 - 2px)); } .nop__s--5 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2 - 2px)); } .nop__s--6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2 - 2px)); } .dn { width: 30px; height: 30px; padding: 5px; border-radius: 7px; background: #f1f1f6; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; place-items: center; box-shadow: 0 3px 6px rgba(0, 0, 0, .5); } .dn i.on { background: #17171c; } /* ---------- Roulette: pyörä ---------- */ .rw { position: relative; width: min(340px, 76vw); aspect-ratio: 1; margin: 16px auto; } .rw__pyora { position: absolute; inset: 0; will-change: transform; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .7)); } .rw__svg { display: block; width: 100%; height: 100%; } .rw__p { stroke: #e7c35a; stroke-width: .7; } .rw__p--punainen { fill: #c8141f; } .rw__p--musta { fill: #16161b; } .rw__p--vihrea { fill: #129a50; } .rw__p.is-hit { stroke: #fff; stroke-width: 3; filter: brightness(1.5); } .rw__n { fill: #fff; font: 800 11px Archivo, sans-serif; text-anchor: middle; } .rw__puola { fill: #d9a93a; opacity: .85; } .rw__pallo { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d9d9e2 55%, #8c8c98); box-shadow: 0 2px 5px rgba(0, 0, 0, .8); will-change: transform; z-index: 2; } .rw__tulos { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 3; } .rw__chip { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 30px; color: #fff; border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(0, 0, 0, .4), 0 0 50px rgba(255, 255, 255, .55); animation: kz-pop .5s var(--ease); } .rw__chip--punainen { background: #c8141f; } .rw__chip--musta { background: #16161b; } .rw__chip--vihrea { background: #129a50; } /* ---------- Slots ---------- */ .sl { display: grid; justify-items: center; gap: 16px; padding: 22px 12px 16px; width: 100%; } .sl__kone { position: relative; padding: 30px 18px 18px; border-radius: 30px; background: linear-gradient(180deg, color-mix(in srgb, var(--a1) 85%, #fff), var(--a1d) 45%, var(--a1dd)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -8px 20px rgba(0, 0, 0, .4), 0 34px 70px -28px rgb(var(--a1-rgb) / .9), 0 0 0 3px #ffc93c, 0 0 0 6px #8a5a0b; } .sl__valot { position: absolute; left: 22px; right: 22px; top: 10px; display: flex; justify-content: space-between; } .sl__valot i { width: 9px; height: 9px; border-radius: 50%; background: #ffe9a6; box-shadow: 0 0 10px #ffc93c; animation: sl-valo 1.2s steps(1) infinite; } .sl__valot i:nth-child(even) { animation-delay: -.6s; } .sl__kone.is-spin .sl__valot i { animation-duration: .24s; } .sl__kone.is-spin .sl__valot i:nth-child(even) { animation-delay: -.12s; } .sl__kone.is-win .sl__valot i { animation: none; background: #fff; box-shadow: 0 0 16px 3px #ffd24a; } @keyframes sl-valo { 50% { background: #6b4508; box-shadow: none; } } .sl__reels { --sh: 92px; position: relative; display: flex; gap: 10px; padding: 10px; border-radius: 18px; background: #050506; box-shadow: inset 0 0 0 2px #ffc93c, inset 0 6px 22px rgba(0, 0, 0, .9); } .sl__reel { width: calc(var(--sh) * 1.14); height: calc(var(--sh) * 3); overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, #b9b9c4, #ffffff 30%, #ffffff 70%, #b9b9c4); box-shadow: inset 0 14px 22px -8px rgba(0, 0, 0, .65), inset 0 -14px 22px -8px rgba(0, 0, 0, .65); transition: box-shadow .3s; } .sl__strip span { height: var(--sh); display: grid; place-items: center; font-size: calc(var(--sh) * .6); line-height: 1; } .sl__strip.is-blur { filter: blur(2.5px); } .sl__line { position: absolute; left: 2px; right: 2px; top: 50%; height: 3px; margin-top: -1.5px; background: linear-gradient(90deg, transparent, #ff2b2b 12%, #ff2b2b 88%, transparent); box-shadow: 0 0 12px #ff2b2b; opacity: .55; pointer-events: none; } .sl__reel.is-win { animation: sl-win .45s ease-in-out 5; } @keyframes sl-win { 50% { background: linear-gradient(180deg, #b9b9c4, #ffe680 30%, #ffc93c 70%, #b9b9c4); box-shadow: inset 0 0 0 3px #ffb400, 0 0 30px #ffb400; } } .sl__pay { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--text-2); } .sl__pay span { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); white-space: nowrap; } .sl__pay b { font-family: var(--f-mono); font-weight: 600; color: #fff; } /* ---------- Crash ---------- */ .cr { position: relative; width: 100%; height: clamp(280px, 48vw, 370px); align-self: stretch; overflow: hidden; } .cr canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .cr__rocket { position: absolute; left: 0; top: 0; font-size: 40px; line-height: 1; filter: drop-shadow(0 0 16px rgba(255, 170, 60, .9)); will-change: transform; transition: opacity .15s; } .cr__hud { position: absolute; left: 0; right: 0; top: 0; display: grid; justify-items: center; gap: 4px; pointer-events: none; text-align: center; padding: 22px 16px 0; } .cr__hud b { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(50px, 10vw, 84px); line-height: 1; text-shadow: 0 6px 40px rgba(0, 0, 0, .9); font-variant-numeric: tabular-nums; } .cr__hud small { font-size: 13.5px; font-weight: 700; color: var(--text-2); text-shadow: 0 2px 10px #000; min-height: 18px; } .cr.is-boom { animation: kz-shake .5s; } .cr.is-boom .cr__hud b { color: #ff4b4b; text-shadow: 0 0 50px rgba(255, 50, 50, .8); } .cr.is-boom .cr__rocket { opacity: 0; } .cr.is-cash .cr__hud b { color: #5dffa4; text-shadow: 0 0 50px rgba(35, 200, 110, .7); } @keyframes kz-shake { 15% { transform: translate(-9px, 4px); } 30% { transform: translate(8px, -5px); } 45% { transform: translate(-6px, 3px); } 60% { transform: translate(5px, -2px); } 80% { transform: translate(-2px, 1px); } } /* ---------- Chicken ---------- */ .kana { width: 100%; align-self: stretch; overflow-x: auto; scrollbar-width: none; } .kana::-webkit-scrollbar { display: none; } .kana.is-shake { animation: kz-shake .5s; } .kana__road { position: relative; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); min-width: 720px; height: clamp(280px, 48vw, 370px); background: #23232b; } .kana__col { position: relative; overflow: hidden; border-left: 4px dashed rgba(255, 255, 255, .28); transition: background .4s; } .kana__col small { position: absolute; left: 0; right: 0; top: 12px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .kana__col--start { border-left: 0; background: repeating-linear-gradient(0deg, #3a3a45 0 26px, #30303a 26px 28px); box-shadow: inset -6px 0 0 #55555f; } .kana__col--goal { background: repeating-conic-gradient(rgba(255, 255, 255, .12) 0 25%, transparent 0 50%) 0 0 / 30px 30px; } .kana__kerroin { position: absolute; left: 50%; top: 72%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 600; font-size: 13px; color: #d7d7de; background: radial-gradient(circle, #34343e 0 58%, #1b1b22 59% 70%, #4a4a56 71%); box-shadow: 0 3px 0 rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .08); z-index: 1; transition: color .3s, background .3s; } .kana__col--goal .kana__kerroin { color: #2a1800; background: radial-gradient(circle, #ffd24a 0 58%, #a86b00 59% 70%, #ffe680 71%); } .kana__col.is-done { background-color: rgba(35, 165, 90, .16); } .kana__col.is-done .kana__kerroin { color: #06301a; background: radial-gradient(circle, #5df0a0 0 58%, #128a4a 59% 70%, #8dffc0 71%); } .kana__este { position: absolute; left: 14%; right: 14%; top: 16%; height: 12px; border-radius: 4px; background: repeating-linear-gradient(45deg, #ffd24a 0 9px, #17171c 9px 18px); box-shadow: 0 4px 8px rgba(0, 0, 0, .6); transform: scaleX(0); transition: transform .3s var(--ease); z-index: 2; } .kana__col.is-done .kana__este { transform: none; } .auto { --c: #ff4b55; position: absolute; left: 50%; top: -80px; width: 34px; height: 62px; margin-left: -17px; border-radius: 10px 10px 13px 13px; background: radial-gradient(circle at 20% 97%, #fff7b0 0 3px, transparent 3.5px), radial-gradient(circle at 80% 97%, #fff7b0 0 3px, transparent 3.5px), linear-gradient(90deg, color-mix(in srgb, var(--c) 65%, #000), var(--c) 25%, color-mix(in srgb, var(--c) 80%, #fff) 50%, var(--c) 75%, color-mix(in srgb, var(--c) 65%, #000)); box-shadow: 0 8px 14px rgba(0, 0, 0, .55), 0 20px 26px 4px rgba(255, 240, 150, .1); animation: kana-auto var(--dur) linear var(--delay) infinite; transition: opacity .3s; } .auto::before { content: ""; position: absolute; left: 4px; right: 4px; bottom: 15px; height: 14px; border-radius: 3px 3px 7px 7px; background: linear-gradient(180deg, #0c1622, #33506b); } .auto::after { content: ""; position: absolute; left: 5px; right: 5px; top: 8px; height: 9px; border-radius: 5px 5px 2px 2px; background: #0c1622; } @keyframes kana-auto { from { top: -80px; } to { top: 108%; } } .kana__col.is-done .auto { opacity: 0; } .kana__col.is-hit { background-color: rgba(255, 50, 50, .26); } .kana__col.is-hit .auto { animation: kana-osuma .4s cubic-bezier(.5, 0, 1, .7) forwards; } @keyframes kana-osuma { from { top: -80px; } to { top: 30%; } } .kana__bird { position: absolute; left: calc((var(--i) + .5) * 10%); top: 44%; transform: translate(-50%, -50%); transition: left .36s var(--ease); z-index: 3; } .kana__bird > i { display: block; font-style: normal; font-size: 48px; line-height: 1; transform: scaleX(-1); filter: drop-shadow(0 10px 6px rgba(0, 0, 0, .55)); } .kana__bird.is-hop > i { animation: kana-hyppy .36s ease-out; } @keyframes kana-hyppy { 50% { transform: scaleX(-1) translateY(-30px) rotate(12deg); } } .kana__bird.is-osuma > i { transform: none; font-size: 60px; animation: kz-pop .35s var(--ease); } .kana__bird u { position: absolute; left: 50%; top: 50%; width: 9px; height: 15px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: #fff; text-decoration: none; animation: kana-hoyhen 1s ease-out forwards; } @keyframes kana-hoyhen { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } } /* ---------- Updown ---------- */ .ud { display: grid; justify-items: center; gap: 14px; padding: 18px 12px; width: 100%; } .ud__hist { display: flex; gap: 6px; min-height: 56px; align-items: center; opacity: .8; } .ud__poyta { display: flex; align-items: center; gap: 34px; perspective: 900px; } .ud__pakka { position: relative; width: 84px; height: 118px; } .ud__pakka .kortti { position: absolute; left: 0; top: 0; } .ud__pakka .kortti:nth-child(2) { transform: translate(3px, -3px); } .ud__pakka .kortti:nth-child(3) { transform: translate(6px, -6px); } .ud__info { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .ud__info span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .5); border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 600; color: var(--text-2); } .ud__info b { font-family: var(--f-mono); font-weight: 600; color: #fff; } .ud-btn { position: relative; overflow: hidden; } .ud-btn > i { position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 0 4px 4px 0; } .ud-btn--ylos { border-color: rgba(35, 165, 90, .5); background: rgba(35, 165, 90, .12); } .ud-btn--ylos > i { background: #3be08a; } .ud-btn--alas { border-color: rgba(255, 80, 80, .45); background: rgba(255, 60, 60, .1); } .ud-btn--alas > i { background: #ff5a5a; } /* ---------- Blackjack ---------- */ .bj { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 12px; justify-items: center; padding: 18px 12px 16px; width: 100%; align-self: stretch; min-height: 400px; } .bj__kenka { position: absolute; right: 18px; top: 16px; width: 46px; height: 64px; transform: rotate(8deg); } .bj__kenka .kortti { --kw: 46px; position: absolute; left: 0; top: 0; } .bj__kenka .kortti:nth-child(2) { transform: translate(-3px, 3px); } .bj__kenka .kortti:nth-child(3) { transform: translate(-6px, 6px); } .bj__jakaja { display: grid; gap: 8px; justify-items: center; } .bj__jakaja .kz-lbl { color: rgba(255, 255, 255, .7); } .bj__hand, .bjh__kortit { display: flex; justify-content: center; min-height: calc(var(--kw, 84px) * 1.4); perspective: 800px; } .bj__hand .kortti + .kortti, .bjh__kortit .kortti + .kortti { margin-left: calc(var(--kw) * -.42); } .bj__hand--tyhja { gap: 8px; } .bj__hand--tyhja i { width: 84px; height: 118px; border-radius: 9px; border: 2px dashed rgba(255, 255, 255, .25); } .bj__teksti { align-self: center; padding: 7px 22px; border-block: 1px solid rgba(255, 220, 130, .35); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 226, 150, .8); text-align: center; text-wrap: balance; } .bj__kadet { display: flex; flex-wrap: wrap; justify-content: center; align-items: start; gap: 8px 14px; align-self: end; } .bj__kadet--3 .kortti, .bj__kadet--4 .kortti { --kw: 62px; } .bj__kadet--2 .kortti { --kw: 76px; } .bjh { position: relative; display: grid; justify-items: center; gap: 7px; padding: 10px 12px 8px; border-radius: 18px; border: 2px solid transparent; transition: border-color .3s, background .3s, box-shadow .3s; } .bjh.is-nyk { border-color: #ffd24a; background: rgba(255, 210, 74, .1); box-shadow: 0 0 34px -6px rgba(255, 210, 74, .7); } .bjh.is-nyk::before { content: "▼"; position: absolute; top: -17px; left: 50%; margin-left: -7px; color: #ffd24a; font-size: 13px; animation: bj-nuoli .8s ease-in-out infinite; } @keyframes bj-nuoli { 50% { transform: translateY(4px); } } .bjh.is-yli .bjh__kortit, .bjh.is-lose .bjh__kortit { filter: brightness(.6) saturate(.6); transition: filter .4s .3s; } .bjh.is-win { border-color: rgba(93, 240, 160, .7); } .bjh__sum { display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(0, 0, 0, .62); border: 1px solid rgba(255, 255, 255, .25); font-family: var(--f-mono); font-weight: 600; font-size: 14px; color: #fff; animation: bj-ilmesty .3s var(--ease) both; animation-delay: var(--d, 0s); } @keyframes bj-ilmesty { from { opacity: 0; transform: scale(.7); } } .bjh__panos { display: inline-flex; align-items: end; gap: 8px; font-family: var(--f-mono); font-weight: 600; font-size: 13px; color: #ffe9a6; } .bjh__pino { position: relative; width: 26px; height: 26px; } .bjh__pino .pm { position: absolute; left: 0; bottom: calc(var(--k) * 4px); width: 26px; height: 26px; cursor: default; box-shadow: 0 2px 0 rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .25); } .bjh__tulos { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; background: rgba(0, 0, 0, .7); border: 1px solid var(--line-2); color: var(--text-2); animation: bj-ilmesty .35s var(--ease) both; animation-delay: var(--d, 0s); } .bjh.is-win .bjh__tulos { color: #06301a; background: linear-gradient(180deg, #8dffc0, #3be08a); border-color: #c9ffe0; } .bjh.is-lose .bjh__tulos, .bjh.is-yli .bjh__tulos { color: #ffb3b3; border-color: rgba(255, 80, 80, .55); } .bjh__tulos--info { color: #ffe9a6; border-color: rgba(255, 210, 74, .5); } .bj__vakuutus { position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .6); border: 1px dashed rgba(255, 220, 130, .6); font-size: 12px; font-weight: 700; color: #ffe9a6; } /* ---------- Lootbox ---------- */ .lb { position: relative; width: 100%; align-self: stretch; display: grid; align-content: center; padding: 26px 0; --c: #ffb400; min-height: clamp(280px, 48vw, 370px); overflow: hidden; } .lb::before { content: ""; position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 40%, transparent), transparent); opacity: .5; transition: opacity .4s; pointer-events: none; } .lb__win { position: relative; height: 226px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); } .lb__strip { position: absolute; left: 50%; top: 0; height: 100%; display: flex; align-items: center; gap: 12px; will-change: transform; } .lb__it { flex: none; width: 158px; height: 198px; border-radius: 18px; display: grid; justify-items: center; align-content: end; gap: 4px; padding: 0 9px 12px; overflow: hidden; background: radial-gradient(90% 70% at 50% 28%, color-mix(in srgb, var(--c) 50%, transparent), transparent 75%), linear-gradient(180deg, #17171e, #0c0c10); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); border-bottom: 5px solid var(--c); box-shadow: 0 16px 30px -14px #000; transition: transform .5s var(--ease), opacity .5s, box-shadow .5s, filter .5s; } .lb__it img { width: 140px; height: 140px; object-fit: cover; border-radius: 13px; margin-top: 9px; user-select: none; } .lb__it span { font-family: var(--f-serif); font-style: italic; font-weight: 700; font-size: 16px; color: var(--c); } .lb.is-spin .lb__win { filter: saturate(1.15); } .lb__mark { position: absolute; left: 50%; top: 14px; bottom: 14px; width: 4px; margin-left: -2px; border-radius: 4px; background: linear-gradient(180deg, #ffe680, #ff9d00); box-shadow: 0 0 22px #ffb400; pointer-events: none; z-index: 2; transition: opacity .3s; } .lb__mark::before, .lb__mark::after { content: ""; position: absolute; left: 50%; margin-left: -11px; border: 11px solid transparent; } .lb__mark::before { top: -4px; border-top-color: #ffd24a; } .lb__mark::after { bottom: -4px; border-bottom-color: #ffd24a; } .lb__mark.is-naks { animation: lb-naks .09s ease-out; } @keyframes lb-naks { 40% { transform: scaleY(1.05) translateX(1.5px); filter: brightness(1.5); } } .lb.is-done .lb__it { opacity: .22; filter: saturate(.4); } .lb.is-done .lb__it.is-voittaja { opacity: 1; filter: none; transform: scale(1.1); box-shadow: 0 0 0 2px var(--c), 0 0 70px var(--c); z-index: 1; } .lb.is-done .lb__mark { opacity: 0; } .lb__avaus { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 4px; opacity: 0; pointer-events: none; background: radial-gradient(70% 80% at 50% 50%, rgba(6, 6, 10, .93), rgba(6, 6, 10, .8)); transition: opacity .35s; overflow: hidden; } .lb.is-auki .lb__avaus { opacity: 1; } .lb__sateet { position: absolute; left: 50%; top: 46%; width: 760px; height: 760px; margin: -380px 0 0 -380px; background: repeating-conic-gradient(color-mix(in srgb, var(--c) 55%, transparent) 0 9deg, transparent 9deg 24deg); -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 75%); mask-image: radial-gradient(closest-side, #000 10%, transparent 75%); animation: lb-sateet 14s linear infinite; } @keyframes lb-sateet { to { transform: rotate(360deg); } } .lb__avaus img { position: relative; width: clamp(140px, 30vw, 190px); height: clamp(140px, 30vw, 190px); object-fit: cover; border-radius: 22px; border: 2px solid var(--c); box-shadow: 0 0 80px var(--c), 0 30px 50px -20px #000; } .lb.is-auki .lb__avaus img { animation: lb-pomppu .7s var(--ease); } @keyframes lb-pomppu { 0% { transform: scale(.3) rotate(-14deg); opacity: 0; } 55% { transform: scale(1.12) rotate(3deg); opacity: 1; } 75% { transform: scale(.96); } } .lb__avaus b { position: relative; margin-top: 10px; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(28px, 6vw, 40px); line-height: 1; color: var(--c); text-shadow: 0 0 34px var(--c); } .lb__avaus span { position: relative; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-weight: 600; font-size: 26px; } .lb__avaus em { font-style: normal; } .lb__odds { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; } .lb__odds span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--text-2); } .lb__odds i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); } .lb__odds b { font-family: var(--f-mono); font-weight: 600; color: #fff; } .lb__odds em { font-style: normal; font-family: var(--f-mono); font-size: 12px; color: var(--muted); padding-left: 7px; border-left: 1px solid var(--line-2); } /* ---------- Voittokierros ---------- */ .jackpot__side[data-vk] { gap: 16px; transition: opacity .2s; } .jackpot__side.is-busy { opacity: .6; pointer-events: none; } .vk__ots { display: flex; justify-content: space-between; align-items: start; gap: 14px; } .vk__ots h2 { margin: 0 0 6px; } .vk__ots p { margin: 0; font-size: 14.5px; } .vk__aika { flex: none; display: grid; justify-items: end; gap: 3px; padding: 9px 13px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); } .vk__aika small { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .vk__aika b { font-family: var(--f-mono); font-weight: 600; font-size: 15px; white-space: nowrap; } .vkp { display: inline-flex; gap: 10px; } .vkp b { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 21px; color: var(--a1d); background: radial-gradient(circle at 35% 30%, #fff, #e2e2e6 60%, #b9b9c0); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .7), inset 0 -4px 8px rgba(0, 0, 0, .14); } .vkp small { position: absolute; left: 0; right: 0; bottom: -17px; text-align: center; font-family: var(--f-mono); font-weight: 600; font-size: 10.5px; color: var(--muted); } .vkp b.is-tyhja { background: transparent; border: 2px dashed rgba(255, 255, 255, .32); box-shadow: none; } .vkp b.is-osuma { color: #fff; background: radial-gradient(circle at 35% 30%, #8dffc0, #23a55a 60%, #0f6b3a); box-shadow: 0 0 22px rgba(60, 230, 140, .8); } .vkp--valinta { margin-bottom: 16px; } .vkp--valinta b:not(.is-tyhja) { cursor: pointer; animation: ballIn .35s var(--ease) both; } .vkp--valinta b:not(.is-tyhja):hover { filter: brightness(.85); } .vkp--pieni { gap: 5px; } .vkp--pieni b { width: 34px; height: 34px; font-size: 13.5px; box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .7), inset 0 -2px 4px rgba(0, 0, 0, .14); } .vkp--pieni small { display: none; } .vkp--kulta b { color: #4a2600; background: radial-gradient(circle at 35% 30%, #fff6c9, #ffc93c 55%, #d98a00); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .7), 0 0 26px rgba(255, 200, 60, .5), inset 0 -4px 8px rgba(120, 60, 0, .25); } .vkp--kulta small { color: rgba(255, 255, 255, .75); } .vk__voitto { display: grid; gap: 12px; justify-items: start; margin-top: 26px; padding-bottom: 14px; } .vk__voitto .kz-lbl { color: rgba(255, 255, 255, .85); } .vk__voitto--ed { padding-bottom: 0; } .vk__valinta { display: flex; justify-content: space-between; align-items: start; gap: 12px; flex-wrap: wrap; } .vk__tyokalut { display: flex; gap: 6px; } .vk__ruudukko button.is-on { background: #fff; color: var(--a1d); border-color: #fff; font-weight: 800; } .vk__ruudukko[data-taysi] button { opacity: .4; pointer-events: none; } .vk__ruudukko[data-taysi] button.is-on { opacity: 1; } .vk__maara { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r); background: rgba(255, 255, 255, .03); border: 1px solid var(--line); } .vk__maara .kz-lbl { flex: 1; } .vk__maara input { width: 44px; text-align: center; } .vk__pikat { display: flex; gap: 6px; } .vk__pikat button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); color: var(--text-2); font-family: var(--f-mono); font-weight: 600; font-size: 13px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .vk__pikat button:hover, .vk__pikat button[aria-pressed="true"] { background: #fff; color: var(--a1d); border-color: #fff; } .vk__osta { --h: 56px; font-size: 16px; } .vk__osta[disabled] { opacity: .5; pointer-events: none; } .vk__vapaat { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r); background: rgba(255, 180, 0, .08); border: 1px solid rgba(255, 180, 0, .3); font-size: 14px; color: var(--text-2); } .vk__vapaat p { margin: 0; flex: 1; min-width: 180px; } .vk__vapaat b { color: #fff; } .vk__vapaat .btn[disabled] { opacity: .5; pointer-events: none; } .vk__omat { display: grid; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--line-2); } .vk__arvat { display: flex; flex-wrap: wrap; gap: 8px 12px; max-height: 132px; overflow-y: auto; padding: 2px; } .vk__tulos { display: grid; gap: 10px; } .vk__tulosots { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .vk__tulosots strong { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; } .vk__rivit { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; padding-right: 2px; } .vk__rivi { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); font-size: 13.5px; color: var(--muted); } .vk__rivi > b { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-weight: 600; color: var(--dim); white-space: nowrap; } .vk__rivi.is-voitto { border-color: rgba(60, 230, 140, .55); background: rgba(35, 165, 90, .1); color: #fff; } .vk__rivi.is-voitto > b { color: #7dffb0; } .vk__rivi.is-uusi { animation: vk-rivi .4s var(--ease) both; animation-delay: calc(min(var(--i), 12) * .26s); } @keyframes vk-rivi { from { opacity: 0; transform: translateX(26px); } } .vk__tyhja { padding: 18px; border-radius: var(--r); border: 1px dashed var(--line-2); color: var(--muted); font-size: 14.5px; text-align: center; text-wrap: balance; } .vk__huomio { margin: 0; } .vk__odotus { display: flex; gap: 12px; justify-content: center; padding: 26px 0; } .vk__odotus i { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c9, #ffc93c 55%, #d98a00); animation: vk-odotus .9s ease-in-out infinite; } .vk__odotus i:nth-child(2) { animation-delay: .15s; } .vk__odotus i:nth-child(3) { animation-delay: .3s; } @keyframes vk-odotus { 50% { transform: translateY(-16px); } } .vk-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 350; pointer-events: none; } /* ---------- värivalitsin (oma teema) ---------- */ .vp { display: grid; gap: 14px; margin-top: 14px; } .vp__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .vp__tab { display: grid; gap: 6px; justify-items: center; padding: 12px 6px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .2s, background .2s, transform .25s var(--ease); } .vp__tab i { width: 44px; height: 44px; border-radius: 50%; background: var(--v); border: 3px solid rgba(255, 255, 255, .22); box-shadow: 0 8px 22px -8px var(--v); } .vp__tab code { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); text-transform: uppercase; } .vp__tab:hover { transform: translateY(-2px); } .vp__tab[aria-pressed="true"] { color: #fff; border-color: var(--v); background: color-mix(in srgb, var(--v) 14%, rgba(0, 0, 0, .3)); box-shadow: 0 0 0 1px var(--v); } .vp__panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; padding: 14px; border-radius: var(--r); background: rgba(0, 0, 0, .3); border: 1px solid var(--line); } .vp__sv { position: relative; min-height: 190px; border-radius: 12px; cursor: crosshair; touch-action: none; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--h, 0) 100% 50%)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } .vp__dot { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .35); pointer-events: none; } .vp__side { display: grid; gap: 12px; align-content: start; min-width: 0; } .vp__hue { position: relative; height: 18px; border-radius: 999px; cursor: pointer; touch-action: none; background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); } .vp__hue .vp__dot { top: 50%; background: hsl(var(--h, 0) 100% 50%); } .vp__hex { display: flex; align-items: center; gap: 10px; } .vp__now { width: 44px; height: 44px; border-radius: 12px; flex: none; border: 1px solid var(--line-2); } .vp__hex input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); color: #fff; font-family: var(--f-mono); font-weight: 600; font-size: 15px; text-transform: uppercase; outline: none; } .vp__hex input:focus { border-color: var(--a1); } .vp__sw { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; } .vp__sw button { aspect-ratio: 1; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .18); background: var(--v); cursor: pointer; padding: 0; transition: transform .2s var(--ease), box-shadow .2s; } .vp__sw button:hover { transform: scale(1.14); box-shadow: 0 6px 16px -4px var(--v), 0 0 0 2px #fff; } @media (max-width: 640px) { .kz { padding: 0; place-items: stretch; } .kz__win { border-radius: 0; min-height: 100dvh; align-content: start; border: 0; } .kz-bet { grid-template-columns: auto 1fr; } .kz-bet__in { justify-self: end; } .kz-bet__nopeat { grid-column: 1; } .kz-bet__chips { justify-content: flex-end; gap: 5px; } .kz-bet__chips .pm { width: 38px; height: 38px; font-size: 11.5px; } .kz-row--4, .kz-row--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kz-row--5 > :first-child { grid-column: 1 / -1; } .kz-opt, .kz-opt--big { font-size: 14px; } .kz__top h2 { font-size: 19px; } .kz__saldo { padding: 0 10px; font-size: 14px; } .sl__reels { --sh: 72px; gap: 7px; padding: 8px; } .sl__kone { padding: 26px 12px 12px; } .kortti { --kw: 66px; } .kortti--iso { --kw: 110px; } .kortti--pieni { --kw: 34px; } .bj { min-height: 370px; padding-inline: 6px; } .bj__kadet--2 .kortti { --kw: 58px; } .bj__kadet--3 .kortti, .bj__kadet--4 .kortti { --kw: 46px; } .bj__kadet { gap: 6px; } .bjh { padding: 8px 6px 6px; } .bj__kenka { right: 8px; top: 8px; transform: rotate(8deg) scale(.8); } .bj__hand--tyhja i { width: 66px; height: 92px; } .bj__teksti { font-size: 9.5px; padding-inline: 8px; } .lb__it { width: 124px; height: 158px; } .lb__it img { width: 108px; height: 108px; } .lb__win { height: 184px; } .nop__cube { --s: 104px; } .kol__c { width: 150px; height: 153px; } .ud__poyta { gap: 18px; } .ud__pakka { width: 66px; height: 92px; } .vp__panel { grid-template-columns: 1fr; } .vp__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dn { width: 26px; height: 26px; padding: 4px; } .vkp b { width: 48px; height: 48px; font-size: 18px; } .vkp--pieni b { width: 30px; height: 30px; font-size: 12px; } .vk__ots { flex-direction: column; } .vk__aika { justify-items: start; grid-auto-flow: column; align-items: center; gap: 10px; } .vk__rivi { grid-template-columns: auto 1fr; } .vk__rivi > b { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { .kol__c, .nop__cube { transition-duration: .2s; } .auto { animation: none; top: 12%; } .lb__sateet { animation: none; } } /* ========================================================================== 21. KAUPAN OSTOT, PALVELINHAKU, PROFIILIT JA HALLINTA (versio 11) ========================================================================== */ /* ---------- kauppatorin ostot ---------- */ .kp { margin-top: 22px; padding: clamp(18px, 2.6vw, 28px); border-radius: var(--r-lg); background: linear-gradient(180deg, rgb(var(--a1-rgb) / .1), rgba(255, 255, 255, .02)); border: 1px solid rgb(var(--a1-rgb) / .28); display: grid; gap: 18px; } .kp__ots h3 { margin: 0 0 4px; font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: 22px; } .kp__ots p { margin: 0; font-size: 14.5px; max-width: 60ch; } .kp__huomio { margin: 0; } .kp__varit { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: start; } .kp__paletti { display: grid; gap: 7px; } .kp__rivi { display: grid; grid-template-columns: 132px repeat(4, 38px) 1fr; align-items: center; gap: 8px; } .kp__rivi > span { font-size: 13.5px; font-weight: 700; color: var(--text-2); } .kp__rivi em { font-style: normal; font-size: 12.5px; grid-column: span 4; } .kp__savy { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .14); background: var(--v); cursor: pointer; padding: 0; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; } .kp__savy:hover { transform: scale(1.14); } .kp__savy.is-on { border-color: #fff; box-shadow: 0 0 0 3px rgba(0, 0, 0, .5), 0 0 22px var(--v); transform: scale(1.1); } .kp__savy.is-oma { box-shadow: 0 0 0 3px #3be08a; } .kp__esikatselu { display: grid; gap: 14px; position: sticky; top: calc(var(--hdr) + 16px); } .kp__viesti { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 12px; background: #313338; border: 1px solid rgba(255, 255, 255, .06); } .kp__viesti > i { width: 44px; height: 44px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--a1), var(--a1dd)); } .kp__viesti b { font-size: 17px; font-weight: 700; } .kp__viesti p { margin: 2px 0 0; font-size: 14px; color: #dbdee1; } .kp__valinta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--r); background: rgba(0, 0, 0, .34); border: 1px solid var(--line-2); } .kp__valinta > div { display: grid; gap: 2px; } .kp__valinta b { font-size: 16px; } .kp__valinta > div span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-weight: 600; font-size: 14px; color: var(--text-2); } .kp__valinta--yksin { margin-top: 18px; max-width: 520px; } .kp__oma { pointer-events: none; color: #7dffb0; border-color: rgba(35, 165, 90, .5); gap: 7px; } .kp__oma svg { width: 16px; height: 16px; } .kp__tabs { flex-wrap: wrap; } .kp__merkit { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .kp__merkki { display: grid; justify-items: center; gap: 8px; padding: 14px 8px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .25s var(--ease), border-color .2s, background .2s; } .kp__merkki img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); transition: transform .3s var(--ease); } .kp__merkki:hover { transform: translateY(-3px); color: #fff; } .kp__merkki:hover img { transform: scale(1.12) rotate(-6deg); } .kp__merkki.is-on { color: #fff; border-color: var(--a1); background: rgb(var(--a1-rgb) / .18); box-shadow: 0 0 0 1px var(--a1); } .kp__merkki.is-oma { border-color: #3be08a; } .kp__oikeudet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .kp__oikeus { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 12px 14px; border-radius: var(--r); background: rgba(0, 0, 0, .3); border: 1px solid var(--line); } .kp__oikeus b { font-size: 14.5px; } .kp__oikeus > span:first-of-type { grid-column: 1; display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); } .kp__oikeus .btn, .kp__oikeus .kp__oma { grid-column: 2; grid-row: 1 / span 2; } .kp__oikeus.is-oma { border-color: rgba(35, 165, 90, .45); } .kp__oikeus .kp__oma { height: 34px; padding: 0 12px; font-size: 12.5px; } /* ---------- palvelinhaku ---------- */ .ph__tyokalut { display: grid; gap: 14px; margin-bottom: 22px; } .ph__ylarivi { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .ph__haku { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s; } .ph__haku:focus-within { border-color: var(--a1); box-shadow: 0 0 0 4px rgb(var(--a1-rgb) / .18); } .ph__haku svg { width: 19px; height: 19px; color: var(--muted); flex: none; } .ph__haku input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 16px; outline: none; } .ph__suodatin { display: flex; flex-wrap: wrap; gap: 6px; } .ph__suodatin button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .ph__suodatin button:hover { color: #fff; border-color: rgba(255, 255, 255, .4); } .ph__suodatin button[aria-pressed="true"] { background: #fff; color: #0b0b0d; border-color: #fff; } .ph__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ph__kortti { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s, box-shadow .4s; } .ph__kortti:hover { transform: translateY(-4px); border-color: rgb(var(--a1-rgb) / .45); box-shadow: 0 40px 80px -40px rgb(var(--a1-rgb) / .55); } .ph__kortti.is-rikki { opacity: .75; border-style: dashed; } .ph__paa { display: flex; gap: 14px; align-items: center; min-width: 0; } .ph__paa > div { min-width: 0; } .ph__kuvake { width: 64px; height: 64px; border-radius: 20px; flex: none; object-fit: cover; background: var(--bg-3); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .8); } .ph__kuvake--tyhja { display: grid; place-items: center; font-family: var(--f-display); font-weight: 900; font-size: 26px; background: linear-gradient(135deg, var(--a1), var(--a1dd)); } .ph__kortti h3 { margin: 0 0 4px; font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: 19px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ph__luvut { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); } .ph__luvut span { display: inline-flex; align-items: center; gap: 6px; } .ph__kuvaus { margin: 0; font-size: 14.5px; color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .ph__tagit { display: flex; flex-wrap: wrap; gap: 5px; } .ph__tagit span { padding: 4px 10px; border-radius: 999px; background: rgb(var(--a1-rgb) / .14); border: 1px solid rgb(var(--a1-rgb) / .3); font-size: 12px; font-weight: 700; color: var(--a1l); } .ph__arvio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-2); } .ph__arvio b { font-family: var(--f-mono); font-weight: 600; font-size: 15px; } .ph__arvio span { font-size: 13px; color: var(--muted); } .ph__tahdet { display: flex; } .ph__tahti { width: 28px; height: 30px; padding: 0 2px; border: 0; background: none; cursor: pointer; color: rgba(255, 255, 255, .18); transition: transform .2s var(--ease), color .15s; } .ph__tahti svg { width: 24px; height: 24px; fill: currentColor; display: block; } .ph__tahti.is-on { color: #ffc93c; filter: drop-shadow(0 0 6px rgba(255, 190, 40, .55)); } .ph__tahti.is-oma { color: #ff9d00; } .ph__tahti:not(:disabled):hover { transform: scale(1.25); } .ph__tahdet:hover .ph__tahti:not(:disabled) { color: #ffc93c; } .ph__tahdet .ph__tahti:not(:disabled):hover ~ .ph__tahti { color: rgba(255, 255, 255, .18); filter: none; } .ph__tahti:disabled { cursor: default; } .ph__ala { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ph__lisaaja { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--muted); } .ph__lisaaja img { width: 22px; height: 22px; border-radius: 50%; } .ph__lisaaja span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ph__lisaaja:hover { color: #fff; } .ph__omat { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); } .ph__omat .btn[disabled] { opacity: .5; pointer-events: none; } .ph__tyhja { grid-column: 1 / -1; padding: 60px 20px; } .ph__ikkuna { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 16px; background: rgba(4, 4, 6, .8); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; overflow-y: auto; } .ph__ikkuna.is-open { opacity: 1; visibility: visible; } .ph__lomake { width: min(560px, 100%); display: grid; gap: 16px; padding: clamp(20px, 4vw, 32px); border-radius: var(--r-xl); background: linear-gradient(180deg, #17171c, #0c0c10); border: 1px solid var(--line-2); box-shadow: 0 60px 160px -40px rgb(var(--a1-rgb) / .5); } .ph__lomake h2 { margin: 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 26px; } .ph__lomake p { margin: -8px 0 0; font-size: 14.5px; } .ph__lomake label, .ph__valinta { display: grid; gap: 7px; } .ph__lomake label > span, .ph__valinta > span { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .ph__lomake input, .ph__lomake textarea { width: 100%; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); color: #fff; font: inherit; font-size: 15.5px; outline: none; resize: vertical; } .ph__lomake input:focus, .ph__lomake textarea:focus { border-color: var(--a1); } .ph__napit { display: flex; justify-content: flex-end; gap: 8px; } @media (max-width: 1100px) { .ph__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kp__oikeudet { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .ph__lista { grid-template-columns: minmax(0, 1fr); } .kp__varit { grid-template-columns: minmax(0, 1fr); } .kp__esikatselu { position: static; } .kp__rivi { grid-template-columns: 104px repeat(4, 34px) 1fr; gap: 6px; } .kp__savy { width: 34px; height: 34px; } .kp__merkit { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kp__oikeudet { grid-template-columns: minmax(0, 1fr); } } /* ---------- profiilien kannet ---------- */ .kansi--aamu { background: linear-gradient(120deg, #ff9a5a, #ff5c8a 45%, #7b3bff) !important; } .kansi--yo { background: radial-gradient(60% 120% at 80% 10%, #3b4cff, transparent 60%), linear-gradient(160deg, #0a0d2a, #1c1147 60%, #050510) !important; } .kansi--metsa { background: radial-gradient(70% 140% at 20% 100%, #b6f36a, transparent 60%), linear-gradient(140deg, #0b3d2a, #17805a 60%, #0a2a1c) !important; } .kansi--meri { background: radial-gradient(60% 120% at 85% 0%, #7df3ff, transparent 60%), linear-gradient(150deg, #023e73, #0090ff 55%, #012a4a) !important; } .kansi--laava { background: radial-gradient(70% 140% at 50% 110%, #ffb400, transparent 60%), linear-gradient(160deg, #3a0606, #c8141f 60%, #1a0303) !important; } .kansi--hattara { background: linear-gradient(120deg, #ffd6f5, #f1acff 40%, #a8d8ff) !important; } .kansi--kulta { background: radial-gradient(60% 120% at 30% 0%, #fff6c9, transparent 60%), linear-gradient(150deg, #8a5a0b, #ffc93c 55%, #6b4508) !important; } .kansi--teras { background: radial-gradient(60% 120% at 80% 0%, #dfe5ee, transparent 60%), linear-gradient(150deg, #2a2f3a, #7d8493 55%, #1b1e26) !important; } .f-kannet { display: grid; gap: 8px; } .f-kannet > span { font-size: 14px; font-weight: 700; } .f-kannet > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .f-kannet button { height: 46px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; padding: 0; --p1: var(--a1); --p2: var(--a2); --p3: var(--a3); } .f-kannet button[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px rgb(var(--a1-rgb) / .45); } .f-role svg { width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; } .chip svg { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; } /* ---------- seinä ---------- */ .sn__lista { display: grid; gap: 12px; } .sn { display: grid; gap: 12px; padding: 18px 20px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .035); border: 1px solid var(--line); } .sn__paa { display: flex; align-items: center; gap: 12px; } .sn__kuka { flex: 1; min-width: 0; display: grid; } .sn__kuka time, .sn__kommentti time { font-size: 12.5px; color: var(--muted); } .sn__pois { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: var(--dim); cursor: pointer; display: grid; place-items: center; flex: none; transition: color .2s, background .2s; } .sn__pois svg { width: 16px; height: 16px; } .sn__pois:hover { color: #ff7a7a; background: rgba(255, 60, 60, .12); } .sn__teksti { font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; } .sn__ala { display: flex; gap: 8px; } .sn__nappi { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: color .2s, border-color .2s, background .2s, transform .2s var(--ease); } .sn__nappi svg { width: 17px; height: 17px; } .sn__nappi--tieto { cursor: default; } button.sn__nappi:hover { color: #fff; border-color: rgba(255, 255, 255, .35); } button.sn__nappi:active { transform: scale(.94); } .sn__nappi.is-on { color: #ff5c8a; border-color: rgba(255, 92, 138, .55); background: rgba(255, 92, 138, .12); } .sn__nappi.is-on svg { fill: currentColor; } .sn__kommentit { display: grid; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line-2); } .sn__kommentti { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; } .sn__kommentti > div { flex: 1; min-width: 0; } .sn__kommentti p { margin: 0 0 2px; } .sn__kommentti .avatar { width: 30px; height: 30px; } .sn__vastaa { display: flex; gap: 8px; } .sn__vastaa .input { flex: 1; min-width: 0; height: 38px; border-radius: 999px; padding: 0 16px; font-size: 14.5px; } .sn__uusi { grid-template-columns: auto 1fr; align-items: start; margin-bottom: 14px; border-color: rgb(var(--a1-rgb) / .3); } .sn__uusi > div { display: grid; gap: 10px; } .sn__uusi textarea { resize: vertical; } .sn__uusiala { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } /* ---------- ihmiset ---------- */ .ih__haku { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; } .ih__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .ih { position: relative; display: grid; justify-items: center; gap: 8px; padding: 0 16px 18px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .035); border: 1px solid var(--line); overflow: hidden; text-align: center; transition: transform .3s var(--ease), border-color .3s, box-shadow .4s; } .ih:hover { transform: translateY(-4px); border-color: rgb(var(--a1-rgb) / .45); box-shadow: 0 36px 70px -36px rgb(var(--a1-rgb) / .6); } .ih__kansi { display: block; width: calc(100% + 32px); height: 68px; margin: 0 -16px; background: radial-gradient(60% 140% at 85% 0%, var(--a3), transparent 60%), linear-gradient(120deg, var(--a1), var(--a2)); } .ih__av { margin-top: -38px; border-radius: 50%; border: 4px solid var(--bg-2); line-height: 0; } .ih__nimi { font-size: 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; } .ih__bio { margin: 0; font-size: 13.5px; color: var(--muted); min-height: 38px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .ih__luvut { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); } .ih__luvut b { color: #fff; font-family: var(--f-mono); font-weight: 600; } .ih .btn svg { width: 14px; height: 14px; } .seg a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: inherit; color: var(--text-2); font-weight: 700; font-size: 13.5px; } .seg a[aria-pressed="true"] { background: #fff; color: #0b0b0d; } /* ---------- hallinta ---------- */ .hl { display: grid; gap: 12px; margin-bottom: 14px; } .hl__lomake { display: grid; grid-template-columns: 1fr auto; gap: 8px; } .hl__lomake--kaksi { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; } .hl__lista { display: grid; gap: 6px; } .hl__rivi { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); } .hl__rivi > div { flex: 1; min-width: 0; } .hl__rivi p { margin: 0; font-size: 14.5px; } .hl__rivi small { display: block; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; } .hl__id { font-family: var(--f-mono); font-size: 11.5px; color: var(--dim); } .hl__napit { display: flex; flex-wrap: wrap; gap: 8px; } .hl--varoitukset { border-color: rgba(255, 180, 0, .4); background: rgba(255, 180, 0, .06); } .hl--tyokalut { border-style: dashed; } @media (max-width: 760px) { .hl__lomake, .hl__lomake--kaksi { grid-template-columns: minmax(0, 1fr); } .ih__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .perms li .em svg { width: 18px; height: 18px; color: var(--a1); display: block; margin: auto; } .shop > [data-kauppa] { grid-column: -2 / -1; min-width: 0; } /* ---------- versio 12: noppa viipaleista, oikea ruletti, pelien kannet ---------- */ .nop__v { position: absolute; background: linear-gradient(145deg, #ffffff, #e2e2ea); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .035); } .nop { padding: 54px 0 24px; } .nop__cube { transition: transform 1.9s cubic-bezier(.2, .7, .25, 1); } .kz[data-peli="roulette"] .kz__win { width: min(1040px, 100%); } .rl2 { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: center; width: 100%; padding: 16px; } .rl2 .rw { width: 100%; margin: 0; } .rt { display: grid; grid-template-columns: 1.1fr repeat(12, minmax(0, 1fr)) 1.1fr; grid-template-rows: repeat(3, 46px) 40px 40px; gap: 3px; padding: 8px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 2px solid rgba(231, 195, 90, .55); } .rt__c { position: relative; display: grid; place-items: center; min-width: 0; padding: 0; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .2); color: #fff; font-family: var(--f-display); font-stretch: 100%; font-weight: 800; font-size: 15px; cursor: pointer; transition: transform .15s var(--ease), filter .15s, box-shadow .2s; } .rt__c:hover { filter: brightness(1.3); transform: scale(1.06); z-index: 2; } .rt__c--punainen { background: #c8141f; } .rt__c--musta { background: #17171c; } .rt__c--vihrea { background: #129a50; } .rt__c--ulko { font-family: var(--f-body); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .rt__c--ulko.rt__c--punainen, .rt__c--ulko.rt__c--musta { font-size: 12.5px; } .rt__c--nolla { font-size: 20px; } .rt__pm { position: absolute; right: -5px; top: -7px; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-family: var(--f-mono); font-weight: 600; font-size: 11.5px; color: #2a1800; background: radial-gradient(circle at 35% 30%, #fff6c9, #ffc93c 60%, #d98a00); border: 2px dashed rgba(90, 50, 0, .6); box-shadow: 0 3px 8px rgba(0, 0, 0, .7); z-index: 3; animation: kz-pop .25s var(--ease); pointer-events: none; } .rt__c.is-osuma { box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(255, 255, 255, .8); z-index: 2; } .rt__c.is-voitto { animation: rt-voitto .5s ease-in-out 4; } @keyframes rt-voitto { 50% { box-shadow: 0 0 0 3px #ffd24a, 0 0 28px #ffb400; filter: brightness(1.5); } } .rt__ctl { grid-template-columns: auto auto 1fr auto; } .rt__ctl .pm.is-on { transform: translateY(-5px) scale(1.1); box-shadow: 0 0 0 3px #fff, 0 12px 18px -6px rgba(0, 0, 0, .9); } .rt__summa { display: grid; justify-items: end; gap: 2px; } .rt__summa b { font-family: var(--f-mono); font-weight: 600; font-size: 17px; } .kz-bet__nopeat button[disabled], .kz-go[disabled] { opacity: .45; pointer-events: none; } /* pelikorttien kannet */ .game__art.kn { position: relative; height: 132px; margin: -22px -22px 8px -22px; padding: 0 22px; border-radius: 16px 16px 0 0; display: flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; background: radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--kc, var(--a1)) 55%, transparent), transparent 70%), linear-gradient(160deg, #1b1b22, #0b0b0e); border-bottom: 1px solid var(--line); } .game__art.kn::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 10px); pointer-events: none; } .kn > * { position: relative; z-index: 1; transition: transform .45s var(--ease); } .kn--slots { --kc: #ff2b2b; } .kn--blackjack, .kn--roulette, .kn--updown { --kc: #17a05a; } .kn--crash { --kc: #3b4cff; } .kn--chicken { --kc: #ffb400; } .kn--coinflip { --kc: #ff9d00; } .kn--dice { --kc: #c8141f; } .kn__rullat { display: flex; gap: 6px; padding: 8px; border-radius: 14px; background: linear-gradient(180deg, var(--a1), var(--a1dd)); box-shadow: 0 0 0 2px #ffc93c, 0 14px 30px -10px rgba(0, 0, 0, .9); } .kn__rullat span { width: 42px; height: 54px; border-radius: 8px; display: grid; place-items: center; font-size: 28px; background: linear-gradient(180deg, #b9b9c4, #fff 35%, #fff 65%, #b9b9c4); } .kn .kortti { --kw: 62px; } .kn--blackjack .kortti:first-child { transform: rotate(-10deg) translateX(10px); } .kn--blackjack .kortti:last-child { transform: rotate(9deg) translateX(-10px); } .game:hover .kn--blackjack .kortti:first-child { transform: rotate(-16deg) translateX(4px); } .game:hover .kn--blackjack .kortti:last-child { transform: rotate(15deg) translateX(-4px); } .kn__pyora { width: 118px; height: 118px; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .7)); animation: kn-pyori 22s linear infinite; } .game:hover .kn__pyora { animation-duration: 4s; } @keyframes kn-pyori { to { transform: rotate(360deg); } } .kn__kayra { width: 170px; height: 96px; color: #7d8dff; filter: drop-shadow(0 0 10px #3b4cff); } .kn__raketti { position: absolute !important; right: 26%; top: 12px; font-style: normal; font-size: 34px; filter: drop-shadow(0 0 12px rgba(255, 170, 60, .9)); } .game:hover .kn__raketti { transform: translate(8px, -8px); } .kn__kana { font-style: normal; font-size: 52px; transform: scaleX(-1); filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .6)); } .game:hover .kn__kana { transform: scaleX(-1) translateY(-8px); } .kn .auto { position: relative; left: auto; top: auto; margin: 0; animation: none; transform: rotate(-90deg) scale(.85); } .kn--coinflip img { width: 88px; height: 90px; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .7)); } .kn--coinflip img:last-child { margin-left: -30px; } .game:hover .kn--coinflip img:first-child { transform: rotate(-12deg) translateX(-6px); } .game:hover .kn--coinflip img:last-child { transform: rotate(12deg) translateX(6px); } .kn .dn { width: 58px; height: 58px; padding: 9px; border-radius: 13px; gap: 3px; } .kn--dice .dn:first-child { transform: rotate(-10deg); } .kn--dice .dn:last-child { transform: rotate(12deg) translateY(8px); } .game:hover .kn--dice .dn:first-child { transform: rotate(-22deg); } .game:hover .kn--dice .dn:last-child { transform: rotate(26deg) translateY(4px); } .kn__nuolet { width: 38px; height: 76px; fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .game { border-left-width: 1px; } @media (max-width: 900px) { .rl2 { grid-template-columns: minmax(0, 1fr); justify-items: center; } .rl2 .rw { width: min(250px, 70vw); } .rt { width: 100%; } } @media (max-width: 640px) { .rt { grid-template-rows: repeat(3, 38px) 36px 36px; gap: 2px; padding: 5px; } .rt__c { font-size: 12px; border-radius: 4px; } .rt__c--ulko { font-size: 9.5px; letter-spacing: 0; } .rt__c--nolla { font-size: 15px; } .rt__pm { min-width: 19px; height: 19px; font-size: 9.5px; right: -4px; top: -6px; } .rt__ctl { grid-template-columns: auto 1fr; } .nop__cube { --s: 120px; } } /* ---------- versio 12: yleiset korjaukset ---------- */ /* Osioiden välissä ei ole enää viivaa eikä taustan porrasta */ .sec--panel { background: none; border-top: 0; } .shop { border-bottom: 0; } /* Tiiviimpi pystyrytmi: vähemmän tyhjää selattavaa osioiden välissä */ .sec { padding-block: clamp(44px, 5.5vw, 80px); } .shop { padding-block: clamp(36px, 4.5vw, 64px); } .stat-sec { padding-top: clamp(36px, 4.5vw, 60px); } .sec-head { margin-bottom: clamp(24px, 3vw, 40px); } .f-pik { display: inline-grid; place-items: center; font-style: normal; vertical-align: -3px; } .f-pik svg { width: 1.05em; height: 1.05em; } .f-boards__ic .f-pik svg, .f-head__ic .f-pik svg { width: 18px; height: 18px; } .puhe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: 13.5px; } .puhe__j { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(35, 165, 90, .12); border: 1px solid rgba(35, 165, 90, .4); } .puhe__j img { width: 24px; height: 24px; border-radius: 50%; } .puhe__j small { color: var(--muted); } /* ========================================================================== 22. KAUPPATORI 2, PALVELINHAKU 2 JA PELIKESKUS (versio 12) ========================================================================== */ /* ---------- kauppatori: osastopalkki ---------- */ .kt { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 14px; margin: clamp(20px, 3vw, 36px) 0 0; } .kt__saldo { display: grid; gap: 6px; align-content: center; justify-items: start; padding: 22px 24px; border-radius: var(--r-lg); background: radial-gradient(120% 140% at 0% 0%, rgba(255, 190, 40, .28), transparent 60%), linear-gradient(160deg, #1f1a0c, #0d0c08); border: 1px solid rgba(255, 190, 40, .4); box-shadow: 0 30px 70px -40px rgba(255, 180, 0, .8); } .kt__saldo small { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffd98a; } .kt__saldo b { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(26px, 3vw, 38px); line-height: 1; } .kt__saldo span { font-size: 13.5px; color: var(--text-2); } .kt__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; } .kt__nav a { position: relative; display: grid; gap: 4px; align-content: end; min-height: 108px; padding: 14px 16px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .035); border: 1px solid var(--line); overflow: hidden; transition: transform .3s var(--ease), border-color .3s, box-shadow .4s; } .kt__nav a i { position: absolute; right: -18px; top: -18px; width: 74px; height: 74px; border-radius: 50%; filter: blur(2px) saturate(1.2); opacity: .9; transition: transform .5s var(--ease); } .kt__nav a b { position: relative; font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: 16.5px; } .kt__nav a span { position: relative; display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-weight: 600; font-size: 12.5px; color: var(--muted); } .kt__nav a:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .3); box-shadow: 0 30px 60px -34px rgb(var(--a1-rgb) / .8); } .kt__nav a:hover i { transform: scale(1.5); } .kt__nav .coin { width: 14px; height: 14px; } /* ---------- kauppatori: ostolohkot ---------- */ .kauppa-on [data-families], .kauppa-on [data-collections], .kauppa-on [data-perms] { display: none; } .kp { margin-top: 0; padding: clamp(20px, 2.8vw, 32px); border-radius: var(--r-xl); background: radial-gradient(90% 70% at 100% 0%, rgb(var(--a1-rgb) / .16), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)); border: 1px solid var(--line-2); box-shadow: 0 50px 110px -70px rgb(var(--a1-rgb) / .9), inset 0 1px 0 rgba(255, 255, 255, .07); gap: 22px; } .kp__ots h3 { font-size: 24px; } .kp__varit { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; } .kp__rivi { grid-template-columns: 124px repeat(4, 42px) 1fr; padding: 3px 8px 3px 0; border-radius: 999px; transition: background .2s; } .kp__rivi:hover { background: rgba(255, 255, 255, .04); } .kp__savy { width: 42px; height: 42px; box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .2), inset 0 3px 6px rgba(255, 255, 255, .3); } .kp__savy.is-on { transform: scale(1.18); } .kp__esik { display: grid; gap: 8px; } .kp__viesti { gap: 14px; padding: 14px 16px; border-radius: 14px; background: #313338; border: 1px solid rgba(255, 255, 255, .06); align-items: center; } .kp__viesti > div { min-width: 0; } .kp__viesti--vaalea { background: #ffffff; border-color: #e3e5e8; } .kp__viesti--vaalea p { color: #313338; } .kp__av { width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: cover; background: linear-gradient(135deg, var(--a1), var(--a1dd)); } .kp__viesti b { font-size: 17px; font-weight: 700; vertical-align: middle; } .kp__vm { width: 20px; height: 20px; margin-left: 6px; vertical-align: middle; object-fit: contain; } .kp__valinta { padding: 16px 18px; border-radius: 18px; background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .3)); border: 1px solid var(--line-2); } .kp__valinta b { font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: 18px; } .kp__valinta .btn--red { --h: 46px; padding-inline: 26px; font-size: 15px; } .kp__merkit { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .kp__merkki { padding: 18px 8px 14px; border-radius: 18px; background: radial-gradient(80% 60% at 50% 20%, rgba(255, 255, 255, .07), transparent 70%), rgba(0, 0, 0, .3); } .kp__merkki img { width: 64px; height: 64px; } .kp__merkkiala { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: end; } .kp__oikeudet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .kp__oikeus { padding: 14px 16px; border-radius: 16px; transition: transform .25s var(--ease), border-color .25s; } .kp__oikeus:hover { transform: translateY(-2px); border-color: rgb(var(--a1-rgb) / .5); } .kp__valinta--yksin { margin-top: 20px; max-width: none; } /* studion ostolaatikko */ .so { display: grid; gap: 12px; border-color: rgb(var(--a1-rgb) / .45) !important; background: linear-gradient(180deg, rgb(var(--a1-rgb) / .12), transparent) !important; } .so__rivi { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); font-size: 14.5px; } .so__rivi span { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .so__rivi em { font-style: normal; display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 13px; color: var(--text-2); } .so__napit { display: flex; gap: 8px; flex-wrap: wrap; } .so__napit .btn { flex: 1; } /* ---------- palvelinhaku 2 ---------- */ .ph__luvut2 { display: flex; gap: 10px; flex-wrap: wrap; } .ph__luvut2 > div { min-width: 120px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid var(--line); display: grid; gap: 2px; } .ph__luvut2 b { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 26px; line-height: 1; } .ph__luvut2 span { font-size: 12.5px; color: var(--muted); } .ph__tyokalut { padding: 16px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .03); border: 1px solid var(--line); backdrop-filter: blur(14px); } .ph__pelisuodatin { display: inline-flex; align-items: center; gap: 6px; } .ph__pelisuodatin svg { width: 14px; height: 14px; } .ph__lista { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; } .ph__kortti { padding: 0 22px 22px; overflow: hidden; border-radius: var(--r-xl); background: linear-gradient(180deg, #17171d, #0d0d11); border: 1px solid var(--line-2); gap: 14px; box-shadow: 0 30px 60px -44px #000; } .ph__kansi { height: 92px; margin: 0 -22px; background: linear-gradient(120deg, var(--a1), var(--a1dd)) center / cover; position: relative; } .ph__kansi::before { content: ""; position: absolute; inset: -30px; background: inherit; filter: blur(26px) saturate(1.6); transform: scale(1.3); } .ph__kansi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 17, .1), #131318); } .ph__paa { margin-top: -50px; position: relative; align-items: flex-end; } .ph__kuvake { width: 76px; height: 76px; border-radius: 24px; border: 4px solid #131318; } .ph__kortti h3 { font-size: 21px; } .ph__tagit button { padding: 5px 11px; border-radius: 999px; background: rgb(var(--a1-rgb) / .14); border: 1px solid rgb(var(--a1-rgb) / .3); font: inherit; font-size: 12px; font-weight: 700; color: var(--a1l); cursor: pointer; transition: background .2s, color .2s; } .ph__tagit button:hover { background: var(--a1); color: #fff; } .ph__pelit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .ph__pelit > span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 2px; } .ph__pelit svg { width: 14px; height: 14px; } .ph__pelit a { padding: 5px 11px; border-radius: 9px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 700; color: var(--text-2); transition: background .2s, color .2s, transform .2s var(--ease); } .ph__pelit a:hover { background: #fff; color: #0b0b0d; transform: translateY(-1px); } .ph__arvio { margin-top: auto; } .ph__arvio .btn { margin-left: auto; } .ph__tr { display: inline-flex; gap: 1px; } .ph__t { width: 20px; height: 20px; color: rgba(255, 255, 255, .16); } .ph__t svg { width: 100%; height: 100%; fill: currentColor; display: block; } .ph__t.is-on { color: #ffc93c; filter: drop-shadow(0 0 5px rgba(255, 190, 40, .6)); } .ph__tr--pieni .ph__t { width: 13px; height: 13px; } .ph__kommentit { display: grid; gap: 8px; } .ph__kommentit blockquote { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border-left: 3px solid #ffc93c; display: grid; gap: 4px; } .ph__kommentit p { margin: 0; font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; } .ph__kommentit cite { font-style: normal; font-size: 12px; color: var(--muted); } .ph__sirut { display: flex; flex-wrap: wrap; gap: 6px; min-height: 8px; } .ph__siru { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; background: rgb(var(--a1-rgb) / .18); border: 1px solid rgb(var(--a1-rgb) / .4); font-size: 13px; font-weight: 700; } .ph__siru button { width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; } .ph__siru svg { width: 11px; height: 11px; } .ph__lisaarivi { display: flex; gap: 8px; } .ph__lisaarivi input { flex: 1; min-width: 0; } .ph__lomake--arvio .ph__tahdet { justify-content: center; } .ph__lomake--arvio .ph__tahti { width: 52px; height: 52px; } .ph__lomake--arvio .ph__tahti svg { width: 44px; height: 44px; } /* ---------- pelikeskus ---------- */ .pk__tyokalut { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .pk__tyokalut .ph__haku { max-width: 520px; } .pk__taide { width: 52px; height: 52px; border-radius: 16px; flex: none; display: grid; place-items: center; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 18px; color: #fff; background: linear-gradient(135deg, hsl(var(--h) 80% 52%), hsl(calc(var(--h) + 50) 80% 28%)); box-shadow: 0 10px 22px -10px hsl(var(--h) 80% 50%), inset 0 1px 0 rgba(255, 255, 255, .3); } .pk__taide--iso { width: 84px; height: 84px; border-radius: 26px; font-size: 30px; } .pk__nostot { display: grid; gap: 10px; margin-bottom: 24px; } .pk__nostot > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; } .pk__nosto { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: radial-gradient(120% 140% at 0% 0%, hsl(var(--h) 80% 45% / .28), transparent 65%), rgba(255, 255, 255, .035); border: 1px solid hsl(var(--h) 70% 55% / .4); transition: transform .3s var(--ease), box-shadow .4s; } .pk__nosto:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -34px hsl(var(--h) 80% 50%); } .pk__nosto div { display: grid; gap: 2px; min-width: 0; } .pk__nosto b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk__nosto span { font-size: 12.5px; color: var(--muted); } .pk__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .pk__peli { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); transition: transform .25s var(--ease), border-color .25s, background .25s; } .pk__peli:hover { transform: translateY(-2px); border-color: hsl(var(--h) 70% 60% / .6); background: hsl(var(--h) 70% 50% / .1); } .pk__peli.is-palvelimia { border-color: rgba(35, 165, 90, .45); } .pk__tiedot { display: grid; gap: 3px; min-width: 0; } .pk__tiedot b { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk__tiedot span { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; } .pk__tiedot em { font-style: normal; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } .pk__saatavuus { color: #7dffb0 !important; font-weight: 700; } .pk__takaisin { padding-left: 0; margin-bottom: 14px; } .pk__takaisin svg { transform: rotate(180deg); } .pk__sivu { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; } .pk__paa { display: grid; gap: 14px; min-width: 0; } .pk__otsikko { display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: var(--r-xl); background: radial-gradient(120% 160% at 0% 0%, hsl(var(--h) 80% 45% / .35), transparent 60%), rgba(255, 255, 255, .035); border: 1px solid hsl(var(--h) 70% 55% / .4); } .pk__otsikko h2 { margin: 0 0 4px; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.05; } .pk__otsikko p { margin: 0; font-size: 14.5px; } .pk__sivupalkki { display: grid; gap: 14px; position: sticky; top: calc(var(--hdr) + 16px); } .pk__laatikko { display: grid; gap: 12px; padding: 20px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .035); border: 1px solid var(--line); } .pk__laatikko h3 { margin: 0; font-size: 16px; font-weight: 800; } .pk__laatikko p { margin: 0; font-size: 14px; } .pk__laatikko--vinkki { border-style: dashed; } .pk__palvelin { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .pk__palvelin:last-child { border-bottom: 0; } .pk__palvelin img, .pk__palvelin > span { width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center; font-weight: 900; } .pk__palvelin div { flex: 1; min-width: 0; display: grid; gap: 2px; } .pk__palvelin b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk__palvelin div span { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } @media (max-width: 1100px) { .pk__sivu { grid-template-columns: minmax(0, 1fr); } .pk__sivupalkki { position: static; } .kt { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .kp__rivi { grid-template-columns: 96px repeat(4, 36px) 1fr; } .kp__savy { width: 36px; height: 36px; } .kp__merkkiala { grid-template-columns: minmax(0, 1fr); } .kp__merkit { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kp__oikeudet { grid-template-columns: minmax(0, 1fr); } .kt__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ph__lista { grid-template-columns: minmax(0, 1fr); } .pk__lista { grid-template-columns: minmax(0, 1fr); } .pk__otsikko { flex-direction: column; align-items: flex-start; } } /* ---------- versio 12: viimeistely ---------- */ .kp__vm { display: inline-block; } .kt__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ph__kansi { overflow: hidden; } .ph__paa > div { padding-top: 50px; } .nop__v { box-shadow: none; background: #f1f1f6; } .kol { padding-top: 84px; } .kol__lift.is-up { animation-name: kol-lift2; } @keyframes kol-lift2 { 0%, 100% { transform: none; } 44% { transform: translateY(-58px) scale(1.14); } 86% { transform: translateY(0) scale(1); } 91% { transform: translateY(-9px); } 96% { transform: translateY(0); } } .rt__c--ulko { font-size: 11px; letter-spacing: .02em; } @media (max-width: 760px) { .kt__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .kp, .kp__varit > *, .kp__esik, .kp__esikatselu, .kp__merkkiala > * { min-width: 0; } .kp__viesti p { overflow-wrap: anywhere; } @media (max-width: 900px) { .kp__varit { grid-template-columns: minmax(0, 1fr); } .kp__esikatselu { position: static; } } @media (max-width: 640px) { .rt__c--ulko { font-size: 8px; letter-spacing: 0; overflow: hidden; } } /* ========================================================================== 23. VERSIO 13: VAHVISTUSIKKUNAT, KAUPPATORIN RAKENNE, LEMMIKIT, KASINON KIINTEÄ ASETTELU JA LOOTBOX ========================================================================== */ .nb { white-space: nowrap; } .btn--vaara { background: linear-gradient(180deg, #ff4b55, #b3131d); color: #fff; } /* ---------- vahvistus- ja kysymysikkuna ---------- */ .dlg { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 18px; background: rgba(4, 4, 6, .72); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; } .dlg.is-open { opacity: 1; visibility: visible; } .dlg__box { width: min(440px, 100%); display: grid; gap: 14px; padding: 26px; border-radius: 24px; background: linear-gradient(180deg, #1a1a20, #0e0e12); border: 1px solid var(--line-2); box-shadow: 0 50px 120px -30px rgb(var(--a1-rgb) / .55), inset 0 1px 0 rgba(255, 255, 255, .08); transform: translateY(12px) scale(.97); transition: transform .3s var(--ease); } .dlg.is-open .dlg__box { transform: none; } .dlg__box h2 { margin: 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 22px; } .dlg__box p { margin: 0; color: var(--text-2); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; } .dlg__box .input { width: 100%; height: 48px; font-size: 16px; } .dlg__napit { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; } .dlg__napit .btn { min-width: 108px; } /* ---------- kauppatori: osastot ja täysleveät tuotelohkot ---------- */ [data-page="kauppatori"] .shop { display: block; padding-block: 0; margin-block: 12px; scroll-margin-top: calc(var(--hdr) + 60px); } [data-page="kauppatori"] .shop + .shop { margin-top: clamp(28px, 3vw, 40px); } [data-page="kauppatori"] .shop__side { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: end; margin-bottom: 18px; } [data-page="kauppatori"] .shop__side > * { grid-column: 1; } [data-page="kauppatori"] .shop__side .kicker { display: none; } [data-page="kauppatori"] .shop__side .h2 { font-size: clamp(22px, 2.4vw, 30px); } [data-page="kauppatori"] .shop__side p { max-width: 72ch; font-size: 15px; } [data-page="kauppatori"] .shop__side .shop__price, [data-page="kauppatori"] .shop__side > .btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; } [data-page="kauppatori"] .shop__side .notice { margin-top: 8px; } [data-page="kauppatori"] .shop > [data-kauppa] { grid-column: auto; } .kp { box-shadow: none; } .kp__ots { display: none; } /* Merkkien ostolohko: esikatselu ja ostopalkki pysyvät paikallaan valinnasta riippumatta */ .kp__merkkiala { align-items: stretch; } .kp__merkkiala .kp__valinta, .kp__esikatselu .kp__valinta { flex-wrap: nowrap; min-height: 84px; align-self: end; } .kp__valinta > div { min-width: 0; } .kp__valinta b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kp__valinta .btn, .kp__valinta .kp__oma { flex: none; min-width: 132px; justify-content: center; } .kp__viesti { min-height: 76px; } .kp__viesti p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kp__viesti > div { overflow: hidden; } .kp__merkki span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .kp__merkki { min-height: 124px; } /* ---------- lemmikkikauppa ---------- */ .lkk { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; } .lkk__lista { display: grid; gap: 18px; } .lkk__ryhma { display: grid; gap: 10px; } .lkk__harv { justify-self: start; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); } .lkk__lajit { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .lkk__laji { display: grid; justify-items: center; gap: 4px; padding: 12px 6px 12px; border-radius: 18px; border: 1px solid var(--line); background: radial-gradient(80% 60% at 50% 25%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), rgba(255, 255, 255, .03); color: var(--text-2); font: inherit; cursor: pointer; transition: transform .25s var(--ease), border-color .2s, box-shadow .3s; } .lkk__laji img { width: 84px; height: 84px; object-fit: contain; transition: transform .35s var(--ease); } .lkk__laji b { font-size: 14px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .lkk__laji span { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-weight: 600; font-size: 12px; color: var(--muted); } .lkk__laji:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 60%, transparent); } .lkk__laji:hover img { transform: scale(1.1); } .lkk__laji.is-on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 24px 44px -26px var(--c); } .lkk__esittely { position: sticky; top: calc(var(--hdr) + 70px); display: grid; gap: 12px; justify-items: center; text-align: center; padding: 22px; border-radius: var(--r-xl); background: radial-gradient(90% 50% at 50% 12%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%), linear-gradient(180deg, #17171d, #0d0d11); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); } .lkk__iso { width: 200px; height: 200px; display: grid; place-items: center; } .lkk__iso img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .6)); } .lkk__esittely h3 { margin: 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 28px; line-height: 1; height: 28px; } .lkk__vaiheet { display: flex; gap: 6px; } .lkk__vaiheet img { width: 58px; height: 58px; object-fit: contain; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); } .lkk__tiedot { width: 100%; margin: 0; display: grid; gap: 0; text-align: left; } .lkk__tiedot > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px dashed var(--line-2); font-size: 14px; } .lkk__tiedot dt { color: var(--muted); } .lkk__tiedot dd { margin: 0; font-family: var(--f-mono); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } /* ---------- lemmikin hoitokortti ---------- */ .lk { display: grid; gap: 18px; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--r-xl); background: linear-gradient(180deg, #17171d, #0d0d11); border: 1px solid var(--line-2); transition: opacity .2s; } [data-lemmikki].is-busy .lk { opacity: .6; pointer-events: none; } .lk__paa { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 18px; align-items: center; } .lk__kuva { position: relative; width: 148px; height: 148px; border-radius: 26px; background: radial-gradient(70% 70% at 50% 35%, rgba(255, 255, 255, .1), transparent 75%), rgba(0, 0, 0, .3); border: 1px solid var(--line); display: grid; place-items: center; } .lk__kuva img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .55)); } .lk.is-kuollut .lk__kuva img { filter: grayscale(.6) drop-shadow(0 14px 16px rgba(0, 0, 0, .55)); } .lk__huomio, .f-profile__huomio { position: absolute; right: -6px; top: -6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--f-display); font-weight: 900; font-size: 18px; color: #2a1800; background: #ffc93c; border: 3px solid #0d0d11; box-shadow: 0 0 18px rgba(255, 190, 40, .8); animation: lk-huomio 1.6s ease-in-out infinite; } @keyframes lk-huomio { 50% { transform: scale(1.14); } } .f-profile__huomio { left: 86px; top: 0; right: auto; text-decoration: none; } .lk__tiedot { display: grid; gap: 6px; min-width: 0; } .lk__tiedot h3 { margin: 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(24px, 3vw, 32px); line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lk__tiedot p { margin: 0; font-size: 14.5px; } .lk__harv { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); } .lk__kasvu { display: grid; gap: 5px; margin-top: 4px; } .lk__kasvu small, .lk__vihje { font-size: 12.5px; color: var(--muted); margin: 0; } .lk__varoitus { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border-radius: 10px; background: rgba(255, 190, 40, .12); border: 1px solid rgba(255, 190, 40, .45); color: #ffe9a6; font-size: 13px; font-weight: 700; } .lk__varoitus svg { width: 15px; height: 15px; flex: none; } .lk__rivit { display: grid; gap: 10px; } .lk__rivi { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; align-items: center; } .lk__otsake { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 14px; } .lk__otsake span { font-family: var(--f-mono); font-weight: 600; } .lk__otsake small { margin-left: auto; color: var(--muted); font-size: 12.5px; } .lk__ura { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; } .lk__ura i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #23a55a, #5df0a0); transition: width .6s var(--ease); } .lk__ura i[data-taso="1"] { background: linear-gradient(90deg, #d98a00, #ffc93c); } .lk__ura i[data-taso="2"] { background: linear-gradient(90deg, #b3131d, #ff5a5a); } .lk__kasvu .lk__ura i { background: linear-gradient(90deg, var(--a1d), var(--a1)); } .lk__nappi { width: 150px; justify-content: center; flex-direction: column; gap: 0; line-height: 1.1; --h: 46px; padding: 0 8px; } .lk__nappi small { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 11px; opacity: .8; } .lk__nappi small .coin { width: 11px; height: 11px; } .lk__nappi[disabled] { opacity: .35; pointer-events: none; } .lk__ala { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--line-2); } .lk--tyhja { justify-items: center; text-align: center; gap: 10px; padding-block: 34px; } .lk--tyhja h3 { margin: 0; font-size: 20px; } .lk--tyhja p { margin: 0 0 6px; max-width: 44ch; } .f-lemmikki:not(:empty) { margin-bottom: 14px; } .f-profile__top { position: relative; } /* ---------- kasino: kiinteä asettelu, jossa mikään ei siirry pelin tai tilanteen mukaan ---------- */ .kz__win, .kz[data-peli="roulette"] .kz__win { width: min(1180px, 100%); gap: 12px; } .kz__pelit { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; } .kz__pelit button { height: 40px; padding: 0 6px; justify-content: center; gap: 6px; min-width: 0; font-size: 12.5px; } .kz__pelit button:hover { transform: none; } .kz__stage { height: 380px; min-height: 0; } .kz__msg { height: 58px; min-height: 0; border-radius: 16px; font-size: 14.5px; line-height: 1.25; } .kz__hist { height: 26px; min-height: 0; } .cr, .kana, .lb, .bj, .rl2 { height: 100%; min-height: 0; } .kana__road { height: 100%; } .sl__reels { --sh: 78px; } .bj { grid-template-rows: auto 1fr; padding: 14px 12px; gap: 8px; } .bj__teksti { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); white-space: nowrap; opacity: .5; pointer-events: none; border: 0; } .bj .kortti { --kw: 70px; } .bj__kenka .kortti { --kw: 46px; } .bj__jakaja { grid-template-columns: auto auto; column-gap: 10px; align-items: center; justify-content: center; } .bj__jakaja .bj__hand { grid-column: 1 / -1; grid-row: 2; } .bj__jakaja .kz-lbl { justify-self: end; } .bj__jakaja .bjh__sum { justify-self: start; } .bjh { grid-template-columns: auto auto; column-gap: 8px; padding: 8px 10px 6px; gap: 5px 8px; } .bjh__kortit { grid-column: 1 / -1; } .bjh__tulos { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 3; box-shadow: 0 8px 20px rgba(0, 0, 0, .6); } .bjh__sum { justify-self: end; } .bjh__panos { justify-self: start; align-self: center; } .bj__hand--tyhja i { width: 70px; height: 98px; } .rl2 { grid-template-columns: minmax(0, 270px) minmax(0, 1fr); align-items: center; } @media (min-width: 1100px) { .kz__win { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto auto 58px 1fr 26px auto; grid-template-areas: "top top" "pelit pelit" "sw msg" "sw ctl" "hist ctl" "foot foot"; column-gap: 16px; } .kz__top { grid-area: top; } .kz__pelit { grid-area: pelit; } .kz__sw { grid-area: sw; } .kz__msg { grid-area: msg; } .kz__ctl { grid-area: ctl; align-content: end; } .kz__hist { grid-area: hist; } .kz__foot { grid-area: foot; } .kz__stage { height: clamp(380px, 100vh - 300px, 500px); } .kz__ctl .kz-row { grid-template-columns: minmax(0, 1fr); } .kz__ctl .kz-row--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kz__ctl .kz-row--5 > :first-child { grid-column: 1 / -1; } .kz__ctl .kz-bet, .kz__ctl .rt__ctl { grid-template-columns: auto minmax(0, 1fr); } .kz__ctl .kz-bet__in { justify-self: end; } .kz__ctl .kz-bet__chips { grid-column: 1 / -1; justify-content: space-between; } .kz__ctl .kz-bet__nopeat { grid-column: 1 / -1; } .kz__ctl .kz-bet__nopeat button { flex: 1; } .kz__ctl .rt__summa { justify-items: end; } .kz__msg:not(.is-on) { opacity: 1; border: 1px dashed var(--line); color: var(--dim); } .kz__msg:not(.is-on)::before { content: "Tulos näkyy tässä"; font-weight: 600; font-size: 13px; } } @media (max-width: 1099px) { .kz__win, .kz[data-peli="roulette"] .kz__win { width: min(820px, 100%); } .kz__ctl { min-height: 250px; align-content: end; } } @media (max-width: 640px) { .kz__pelit { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kz__pelit button { height: 36px; font-size: 0; gap: 0; } .kz__pelit button i { font-size: 18px; } .kz__stage { height: 330px; } .kz[data-peli="roulette"] .kz__stage, .kz[data-peli="blackjack"] .kz__stage { height: auto; min-height: 330px; } .rl2 { grid-template-columns: minmax(0, 1fr); height: auto; } .kz__ctl { min-height: 0; } .bj .kortti { --kw: 56px; } .bj__kadet--3 .kortti, .bj__kadet--4 .kortti { --kw: 44px; } .lk__paa { grid-template-columns: 104px minmax(0, 1fr); } .lk__kuva { width: 104px; height: 104px; } .lk__rivi { grid-template-columns: minmax(0, 1fr) 112px; } .lk__nappi { width: 112px; } [data-page="kauppatori"] .shop__side { grid-template-columns: minmax(0, 1fr); } [data-page="kauppatori"] .shop__side .shop__price, [data-page="kauppatori"] .shop__side > .btn { grid-column: 1; grid-row: auto; justify-self: start; } } @media (max-width: 1100px) { .lkk { grid-template-columns: minmax(0, 1fr); } .lkk__esittely { position: static; order: -1; } } /* ---------- lootbox: vitriinimäinen avaus ilman säteitä ja pomppuja ---------- */ .kz[data-peli="lootbox"] .kz__stage { background: linear-gradient(180deg, #14161a, #0b0c0f); } .lb { padding: 0; align-content: center; } .lb::before { display: none; } .lb__win { height: 210px; background: linear-gradient(180deg, #0a0b0d, #15171b 50%, #0a0b0d); border-block: 1px solid rgba(255, 255, 255, .09); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .lb__strip { gap: 6px; } .lb__it { width: 150px; height: 178px; border-radius: 4px; padding: 0; gap: 0; align-content: stretch; grid-template-rows: 1fr 30px; background: linear-gradient(180deg, #3a3f47, #23262c); border: 0; border-bottom: 0; box-shadow: none; } .lb__it img { width: 100%; height: 148px; margin: 0; border-radius: 0; object-fit: cover; } .lb__it span { display: grid; place-items: center; width: 100%; height: 30px; font-family: var(--f-body); font-style: normal; font-weight: 800; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #000), color-mix(in srgb, var(--c) 55%, #000)); border-top: 3px solid var(--c); } .lb__mark { top: 50%; bottom: auto; height: 226px; margin-top: -113px; width: 2px; margin-left: -1px; border-radius: 0; background: #e4ae39; box-shadow: 0 0 10px rgba(228, 174, 57, .9); } .lb__mark::before, .lb__mark::after { margin-left: -6px; border-width: 6px; } .lb__mark::before { top: 0; border-top-color: #e4ae39; } .lb__mark::after { bottom: 0; border-bottom-color: #e4ae39; } .lb__mark.is-naks { animation: none; } .lb.is-done .lb__it { opacity: .3; filter: none; } .lb.is-done .lb__it.is-voittaja { transform: none; box-shadow: 0 0 0 2px var(--c); } .lb__avaus { background: radial-gradient(60% 70% at 50% 45%, color-mix(in srgb, var(--c) 22%, #101216), #0b0c0f 75%); } .lb__tulos { display: grid; justify-items: center; gap: 0; width: 260px; background: linear-gradient(180deg, #3a3f47, #23262c); border-radius: 4px; overflow: hidden; box-shadow: 0 30px 60px -20px #000, 0 0 0 1px rgba(255, 255, 255, .08); animation: lb-esiin .35s ease-out; } @keyframes lb-esiin { from { opacity: 0; transform: scale(.94); } } .lb.is-auki .lb__avaus .lb__tulos img { width: 260px; height: 190px; border: 0; border-radius: 0; box-shadow: none; animation: none; object-fit: cover; } .lb__nimio { width: 100%; display: grid; gap: 2px; padding: 9px 14px; text-align: left; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #000), color-mix(in srgb, var(--c) 50%, #000)); border-top: 4px solid var(--c); } .lb__nimio small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .75); } .lb__avaus .lb__nimio b { margin: 0; font-family: var(--f-body); font-weight: 800; font-size: 19px; color: #fff; text-shadow: none; animation: none; } .lb__avaus .lb__tulos > span { width: 100%; justify-content: center; padding: 10px; font-size: 20px; background: #16181c; } .lb__odds span { border-radius: 4px; } .kz__sw, .kz__stage, .rl2, .rt { min-width: 0; } .rl2 { overflow: hidden; } .contrast { min-height: 46px; } [data-page="kauppatori"] .shop, [data-page="kauppatori"] .shop > *, .kp__merkkiala > *, .kp__esik, .kp__viesti { min-width: 0; max-width: 100%; } @media (max-width: 760px) { .kp { padding: 14px; } .kp__merkkiala .kp__valinta, .kp__esikatselu .kp__valinta { flex-wrap: wrap; } } @media (max-width: 640px) { .kz__ctl { align-content: start; min-height: 0; } .kz__win { grid-auto-rows: max-content; height: auto; } .kz { align-items: start; } .kz[data-peli="roulette"] .kz__sw, .kz[data-peli="blackjack"] .kz__sw { height: auto; } } /* ========================================================================== 24. VERSIO 14: LEMMIKKIRIVIT, STUDION ESIKATSELU, KASVUPALKIT, SOITIN, TUKIKORTIT, TERVETULOKORTTI JA VAHVISTETTU-MERKKI ========================================================================== */ /* lemmikkikauppa: jokainen harvinaisuus yhdellä rivillä */ .lkk__lajit { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } .lkk__laji { padding: 10px 4px; border-radius: 16px; } .lkk__laji img { width: 100%; max-width: 84px; height: auto; aspect-ratio: 1; } .lkk__laji b { font-size: 13px; } .lkk__laji span { font-size: 11.5px; } /* studio: teemavalinta ja varoitus esikatselun alareunassa, ei tyhjää väliä */ .contrast { min-height: 0; } .esik { border-radius: 22px; overflow: hidden; background: #2b2d31; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 50px 120px -40px rgb(var(--a1-rgb) / .45); } .esik > .dc { border-radius: 0; box-shadow: none; border: 0; } .esik__ala { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 14px; background: #1e1f22; border-top: 1px solid rgba(255, 255, 255, .06); } .esik__ala .contrast { flex: 1; min-width: 0; padding: 0; border: 0; background: none; font-size: 13px; line-height: 1.3; } .esik__ala .seg { flex: none; } /* kasvu: pystypalkit liittymisvuoden mukaan */ .vuodet { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(8px, 2vw, 22px); align-items: end; height: 280px; padding-top: 6px; } .vuodet__p { display: grid; grid-template-rows: auto 1fr auto; gap: 8px; height: 100%; justify-items: center; text-align: center; } .vuodet__p b { font-family: var(--f-mono); font-weight: 600; font-size: 14px; } .vuodet__ura { width: 100%; max-width: 64px; height: 100%; display: flex; align-items: flex-end; border-radius: 10px; background: rgba(255, 255, 255, .04); overflow: hidden; } .vuodet__ura i { display: block; width: 100%; height: 0; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, var(--a1), var(--a1d)); box-shadow: 0 0 24px rgb(var(--a1-rgb) / .35); transition: height 1s var(--ease); } .vuodet__p span { font-size: 13px; color: var(--muted); font-weight: 600; } /* ruletin kansi: pyörä pyörii keskipisteensä ympäri, varjo pysyy paikallaan */ .kn--roulette { justify-content: center; } .kn__pyora { animation: none; filter: none; width: 116px; height: 116px; border-radius: 50%; box-shadow: 0 14px 22px rgba(0, 0, 0, .7); transition: none; } .kn__pyora svg { display: block; width: 100%; height: 100%; transform-origin: 50% 50%; animation: kn-pyori 22s linear infinite; } .game:hover .kn__pyora svg { animation-duration: 4s; } /* musiikkisoitin */ .mp { display: grid; gap: 18px; padding: clamp(20px, 3vw, 30px); border-radius: var(--r-xl); background: radial-gradient(90% 60% at 0% 0%, rgb(var(--a1-rgb) / .22), transparent 65%), linear-gradient(180deg, #17171d, #0d0d11); border: 1px solid var(--line-2); box-shadow: 0 50px 110px -60px rgb(var(--a1-rgb) / .8); } .mp__ylä { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .mp__tila { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); } .mp__kanava { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); font-size: 13px; font-weight: 700; } .mp__kanava svg { width: 15px; height: 15px; } .mp__nyt { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 18px; align-items: center; } .mp__levy { width: 92px; height: 92px; border-radius: 50%; background: repeating-radial-gradient(circle, #101014 0 3px, #1c1c22 3px 5px); display: grid; place-items: center; box-shadow: 0 14px 30px -10px #000; animation: kn-pyori 6s linear infinite; } .mp__levy i { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: inset 0 0 0 5px #0d0d11; } .mp__nyt small { display: block; font-size: 13.5px; color: var(--muted); font-weight: 600; } .mp__nyt b { display: block; font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp__aika { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 12px; font-family: var(--f-mono); font-size: 12px; color: var(--muted); } .mp__aika div { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .1); overflow: hidden; } .mp__aika i { display: block; width: 44%; height: 100%; border-radius: inherit; background: var(--a1); } .mp__jono { display: grid; gap: 2px; } .mp__jono .kz-lbl { margin-bottom: 6px; } .mp__jono > div { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 9px 10px; border-radius: 12px; transition: background .2s; } .mp__jono > div:hover { background: rgba(255, 255, 255, .04); } .mp__jono em { grid-row: 1 / 3; font-style: normal; font-family: var(--f-mono); font-size: 13px; color: var(--dim); } .mp__jono b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mp__jono span { grid-column: 2; font-size: 12.5px; color: var(--muted); } .mp__jono time { grid-column: 3; grid-row: 1 / 3; font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); } .mp__ala { margin: 0; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: 13px; color: var(--muted); } /* tukikortit: nostatukset, bumppaukset ja kutsut */ .tuki { position: relative; display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--r-xl); background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 65%), linear-gradient(180deg, #17171d, #0d0d11); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); } .tuki__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: color-mix(in srgb, var(--c) 30%, #111); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); } .tuki__ic svg { width: 22px; height: 22px; } .tuki h3 { margin: 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: 22px; } .tuki p { margin: 0; color: var(--text-2); font-size: 14.5px; } .tuki__luku { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; } .tuki__luku b { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 46px; line-height: 1; color: var(--c); } .tuki__luku span { color: var(--muted); font-size: 14px; } /* etusivun tervetulokortti */ .tk { position: relative; display: grid; gap: 18px; padding: clamp(20px, 2.6vw, 28px); border-radius: var(--r-xl); background: radial-gradient(100% 60% at 100% 0%, rgb(var(--a1-rgb) / .3), transparent 65%), linear-gradient(180deg, rgba(26, 26, 32, .92), rgba(13, 13, 17, .96)); border: 1px solid var(--line-2); box-shadow: 0 60px 140px -50px rgb(var(--a1-rgb) / .8), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(16px); } .tk__ylä { display: flex; align-items: center; gap: 14px; } .tk__ylä img { width: 52px; height: 52px; border-radius: 16px; flex: none; box-shadow: 0 10px 24px -8px rgb(var(--a1-rgb) / .9); } .tk__ylä small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--a1l); } .tk__ylä b { display: block; font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: clamp(18px, 2vw, 23px); line-height: 1.2; text-wrap: balance; } .tk__luvut { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .tk__luvut > div { padding: 14px 12px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid var(--line); display: grid; gap: 4px; } .tk__luvut b { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(22px, 2.4vw, 28px); line-height: 1; } .tk__luvut span { font-size: 12px; color: var(--muted); line-height: 1.3; } .tk__askeleet { display: grid; gap: 6px; } .tk__askeleet a { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 14px; border: 1px solid transparent; transition: background .2s, border-color .2s, transform .25s var(--ease); } .tk__askeleet a:hover { background: rgba(255, 255, 255, .05); border-color: var(--line-2); transform: translateX(3px); } .tk__askeleet i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: var(--f-mono); font-weight: 600; font-size: 14px; background: rgb(var(--a1-rgb) / .18); border: 1px solid rgb(var(--a1-rgb) / .45); color: #fff; } .tk__askeleet b { display: block; font-size: 15px; } .tk__askeleet div span { display: block; font-size: 12.5px; color: var(--muted); } .tk__askeleet svg { width: 18px; height: 18px; color: var(--muted); } /* vahvistettu jäsen: punainen merkki, jonka yli liukuu kiilto */ .f-vahv { display: inline-grid; width: 1.15em; height: 1.15em; margin-left: .3em; vertical-align: -.18em; flex: none; filter: drop-shadow(0 0 6px rgba(255, 43, 43, .65)); } .f-vahv svg { width: 100%; height: 100%; display: block; overflow: visible; } .f-vahv__p { fill: #e0121b; } .f-vahv { position: relative; } @keyframes vahv-kiilto { 0%, 55% { background-position: 120% 0; } 100% { background-position: -60% 0; } } .f-profile__name .f-vahv { width: .8em; height: .8em; vertical-align: -.05em; } @media (max-width: 760px) { .lkk__lajit { grid-template-columns: repeat(4, minmax(0, 1fr)); } .esik__ala { flex-wrap: wrap; } .vuodet { height: 220px; } .tk__luvut b { font-size: 20px; } } .f-role--vahv { color: #fff; border-color: #ff5a5a; background: linear-gradient(115deg, #b3131d, #ff2b2b 40%, #ff8a8a 50%, #ff2b2b 60%, #b3131d) 0 0 / 250% 100%; animation: vahv-kiilto 3.2s ease-in-out infinite; } .mp__jono { grid-template-columns: minmax(0, 1fr); } .hero__visual .hero__float, .hero__visual .sticker--1, .hero__visual .sticker--2 { display: none; } /* hohtovärien osto */ .kauppa-on [data-glows] { display: none; } .hk2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .hk2__k { display: grid; grid-template-rows: 110px 1fr auto; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #17171d, #0d0d11); border: 1px solid color-mix(in srgb, var(--g1) 40%, transparent); transition: transform .3s var(--ease), box-shadow .4s; } .hk2__k:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -34px var(--g1); } .hk2__k.is-oma { box-shadow: 0 0 0 2px #3be08a; } .hk2__taide { display: grid; place-items: center; padding: 0 12px; background: radial-gradient(90% 120% at 30% 0%, color-mix(in srgb, var(--g1) 35%, transparent), transparent 70%), radial-gradient(90% 120% at 80% 100%, color-mix(in srgb, var(--g2) 30%, transparent), transparent 70%), #101014; } .hk2__taide b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24px; font-weight: 800; background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hk2-liuku 3s ease-in-out infinite alternate; } @keyframes hk2-liuku { to { background-position: 100% 0; } } .hk2__tiedot { padding: 14px 16px 0; } .hk2__tiedot h3 { margin: 0 0 4px; font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: 19px; } .hk2__tiedot p { margin: 0; font-size: 13.5px; color: var(--muted); } .hk2__ala { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 16px; } .hk2__ala > span:first-child { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-weight: 600; font-size: 14px; } .hk2__ala .btn, .hk2__ala .kp__oma { min-width: 96px; justify-content: center; } @media (max-width: 1100px) { .hk2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .hk2 { grid-template-columns: minmax(0, 1fr); } } /* ylläpidon myöntämät merkit nimen vieressä */ .f-badget { display: inline-flex; align-items: center; gap: .22em; margin-left: .35em; vertical-align: -.16em; } .f-badge { position: relative; display: inline-block; width: 1.15em; height: 1.15em; flex: none; transition: transform .2s var(--ease); } .f-badge img { display: block; width: 100%; height: 100%; } .f-badge:hover { transform: scale(1.25); } .f-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%) 130% 0 / 300% 100% no-repeat; -webkit-mask: var(--kuva) center / contain no-repeat; mask: var(--kuva) center / contain no-repeat; animation: badge-kiilto 3.6s ease-in-out infinite; pointer-events: none; } @keyframes badge-kiilto { 0%, 60% { background-position: 130% 0; } 100% { background-position: -40% 0; } } .f-profile__name .f-badget { vertical-align: -.02em; gap: .16em; } .f-profile__name .f-badge { width: .82em; height: .82em; } .hl__badget { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .hl__badge { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .hl__badge img { width: 26px; height: 26px; filter: grayscale(1) opacity(.45); transition: filter .2s; } .hl__badge[aria-pressed="true"] { color: #fff; border-color: #3be08a; background: rgba(35, 165, 90, .12); } .hl__badge[aria-pressed="true"] img { filter: none; } /* merkin nimikyltti hiiren alla */ .f-badge::before { content: attr(data-nimi); position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translate(-50%, 4px); padding: 6px 11px; border-radius: 9px; background: #111214; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 24px rgba(0, 0, 0, .6); color: #fff; font-family: var(--f-body); font-size: 13px; font-weight: 700; font-style: normal; line-height: 1.2; letter-spacing: 0; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .2s var(--ease); z-index: 20; } .f-badge:hover::before, .f-badge:focus-visible::before { opacity: 1; transform: translate(-50%, 0); } .f-badge:hover { transform: none; z-index: 20; } .f-badge:hover img { transform: scale(1.2); } .f-badge img { transition: transform .2s var(--ease); } .f-badge { outline: none; } /* ---------- pelikeskus: foorumirakenne ---------- */ .pk2 { display: grid; grid-template-columns: 290px minmax(0, 1fr) 330px; gap: 22px; align-items: start; } .pkl { position: sticky; top: calc(var(--hdr) + 14px); display: grid; gap: 12px; padding: 14px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .035); border: 1px solid var(--line); max-height: calc(100vh - var(--hdr) - 28px); grid-template-rows: auto auto auto minmax(0, 1fr); } .pkl .ph__haku { height: 44px; padding: 0 14px; min-width: 0; } .pkl .ph__haku input { font-size: 14.5px; } .pkl .kz-kytkin { font-size: 13px; } .pkl__lista { overflow-y: auto; display: grid; gap: 1px; align-content: start; margin-right: -6px; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; } .pkl__ots { padding: 10px 8px 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); } .pkl__peli { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; color: var(--text-2); font-size: 14px; min-width: 0; transition: background .15s, color .15s; } .pkl__peli b { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pkl__peli em { flex: none; min-width: 22px; padding: 2px 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); font-style: normal; font-family: var(--f-mono); font-size: 11px; text-align: center; color: var(--muted); } .pkl__peli em.pkl__palv { background: rgba(35, 165, 90, .18); color: #7dffb0; } .pkl__peli:hover { background: rgba(255, 255, 255, .06); color: #fff; } .pkl__peli.is-on { background: rgb(var(--a1-rgb) / .2); color: #fff; box-shadow: inset 3px 0 0 var(--a1); } .pkl__kaikki { padding: 10px; border: 1px solid var(--line); } .pkl__kaikki svg { width: 18px; height: 18px; flex: none; } .pkl__kaikki b { font-weight: 700; } .pkl__tyhja { margin: 8px; font-size: 13.5px; color: var(--muted); } .pk__taide--pieni { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; box-shadow: none; } .pk2__keski { display: grid; gap: 12px; min-width: 0; align-content: start; } .pk2__oikea { display: grid; gap: 12px; position: sticky; top: calc(var(--hdr) + 14px); } .pk__otsikko--etusivu { background: rgba(255, 255, 255, .035); border-color: var(--line); } .pk__polku { display: inline-block; margin-bottom: 4px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .pk__polku:hover { color: #fff; } .pk__pelisiru { flex: none; max-width: 40%; padding: 5px 11px; border-radius: 999px; background: hsl(var(--h) 70% 45% / .2); border: 1px solid hsl(var(--h) 70% 60% / .5); color: #fff; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1300px) { .pk2 { grid-template-columns: 260px minmax(0, 1fr); } .pk2__oikea { grid-column: 2; position: static; } } @media (max-width: 860px) { .pk2 { grid-template-columns: minmax(0, 1fr); } .pk2__oikea { grid-column: 1; } .pkl { position: static; max-height: 340px; } } /* ---------- palstan valvojalaatikko ---------- */ .f-people { gap: 8px; } .f-person { padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); } .f-person .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; } .f-person > span { flex: 1; gap: 4px 8px; } .f-addmod__haku { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; border: 1px dashed var(--line-2); color: var(--muted); transition: border-color .2s; } .f-addmod__haku:focus-within { border-style: solid; border-color: var(--a1); } .f-addmod__haku svg { width: 16px; height: 16px; flex: none; } .f-addmod__haku input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 14px; outline: none; } .f-ulos { margin-left: auto; color: var(--dim); display: grid; } .f-ulos svg { width: 14px; height: 14px; } /* ---------- FiveM- ja RedM-palvelinlista ---------- */ .cx { display: grid; gap: 8px; } .cx__rivi { border-radius: 18px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); overflow: hidden; transition: border-color .25s, background .25s; } .cx__rivi:hover, .cx__rivi.is-auki { border-color: rgb(var(--a1-rgb) / .45); background: rgba(255, 255, 255, .05); } .cx__paa { display: grid; grid-template-columns: 34px 48px minmax(0, 1fr) 130px 84px 96px 96px 174px; gap: 14px; column-gap: 24px; align-items: center; width: 100%; padding: 12px 18px 12px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .cx__sija { font-family: var(--f-mono); font-size: 13px; color: var(--dim); text-align: center; } .cx__kuvake { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--bg-3); } .cx__kuvake--tyhja { display: grid; place-items: center; font-weight: 900; background: linear-gradient(135deg, var(--a1), var(--a1dd)); } .cx__nimi { display: grid; gap: 2px; min-width: 0; } .cx__nimi b { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cx__nimi small, .cx__luku small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cx__kayra { display: block; height: 34px; } .cx__paa > :is(.cx__kayra, .cx__arv, .cx__luku, .cx__pelaajat) { position: relative; } .cx__paa > :is(.cx__kayra, .cx__arv, .cx__luku, .cx__pelaajat)::before { content: ""; position: absolute; left: -12px; top: 50%; width: 1px; height: 26px; transform: translateY(-50%); background: var(--line); pointer-events: none; } @media (min-width: 641px) and (max-width: 1100px) { .cx__paa { column-gap: 18px; } .cx__paa > :is(.cx__arv, .cx__luku, .cx__pelaajat)::before { left: -9px; } } @media (max-width: 640px) { .cx__paa > :is(.cx__arv, .cx__pelaajat)::before { left: -5px; height: 28px; } } .cx__kipina { display: block; width: 100%; height: 34px; } .cx__kipina polyline { fill: none; stroke: var(--a1); stroke-width: 1.6; vector-effect: non-scaling-stroke; } .cx__kipina polygon { fill: rgb(var(--a1-rgb) / .16); } .cx__kipina--tyhja { display: grid; place-items: center; font-size: 11px; color: var(--dim); border: 1px dashed var(--line); border-radius: 8px; } .cx__luku { display: grid; gap: 1px; text-align: center; } .cx__luku b { font-family: var(--f-mono); font-weight: 600; font-size: 15px; } .cx__pelaajat { display: grid; gap: 6px; padding-left: 24px; text-align: right; } .cx__pelaajat b { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 22px; line-height: 1; } .cx__pelaajat em { font-style: normal; font-family: var(--f-mono); font-weight: 500; font-size: 12px; color: var(--muted); } .cx__pelaajat i { display: block; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: hidden; } .cx__pelaajat u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #23a55a, #5df0a0); text-decoration: none; } .cx__lisa:empty { display: none; } .cx__lisa { padding: 0 18px 18px; } .cx__tiedot { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; padding-top: 14px; border-top: 1px dashed var(--line-2); } .cx__kaavioots { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; } .cx__sivu { display: grid; gap: 12px; align-content: start; } .cx__sivu p { margin: 0; font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; } .cx__sivu dl { margin: 0; display: grid; } .cx__sivu dl > div { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--line-2); font-size: 13.5px; } .cx__sivu dt { color: var(--muted); } .cx__sivu dd { margin: 0; font-family: var(--f-mono); font-weight: 600; } .cx__tyhja { padding: 60px 20px; } /* tähtiarviot palvelinlistassa */ .cx__arv { display: grid; gap: 1px; justify-items: center; text-align: center; } .cx__arv b { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-weight: 600; font-size: 15px; } .cx__arv svg { width: 15px; height: 15px; fill: #ffc93c; filter: drop-shadow(0 0 5px rgba(255, 190, 40, .6)); } .cx__arv small { font-size: 12px; color: var(--muted); white-space: nowrap; } .cx__arv.is-tyhja b { color: var(--dim); } .cx__arv.is-tyhja svg { fill: rgba(255, 255, 255, .16); filter: none; } .cx__arvio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cx__arvio b { font-family: var(--f-mono); font-weight: 600; font-size: 15px; } .cx__arvio span { font-size: 13px; color: var(--muted); } .cx__arvio .btn { margin-left: auto; } .cx__kommentit { margin-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1100px) { .cx__paa { grid-template-columns: 28px 44px minmax(0, 1fr) 84px 96px 154px; } .cx__kayra, .cx__luku--huippu { display: none; } .cx__tiedot { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .cx__paa { grid-template-columns: 40px minmax(0, 1fr) 62px 100px; gap: 10px; padding: 10px 12px; } .cx__sija, .cx__luku, .cx__arv small { display: none; } .cx__kuvake { width: 40px; height: 40px; } .cx__pelaajat { padding-left: 8px; } .cx__pelaajat b { font-size: 18px; } .cx__kommentit { grid-template-columns: minmax(0, 1fr); } } /* hohtokorttien kansikuvat */ .hk2__k { grid-template-rows: 132px 1fr auto; } .hk2__taide { position: relative; overflow: hidden; isolation: isolate; } .hk2__taide img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .hk2__taide::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 8, 12, .35), rgba(8, 8, 12, .62) 70%, #131318); } .hk2__k:hover .hk2__taide img { transform: scale(1.06); } .hk2__taide b { font-size: 26px; font-weight: 900; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .85)); } .cx__arvio .btn { margin-left: 0; flex: 0 0 100%; justify-content: center; } .hk2__taide b { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .45)) drop-shadow(0 2px 10px rgba(0, 0, 0, .85)); } .hk2__taide b { font-family: var(--f-display); font-stretch: 100%; font-size: 30px; } .hk2__tiedot p { font-size: 14px; } .hk2 { grid-auto-rows: 1fr; } .hk2__taide b { background-size: 200% 100%; background-repeat: repeat-x; animation: glowSlide 3.2s linear infinite; } /* Ihmiset: badget omalla rivillään nimen alla, rivi varataan aina, jotta kortit pysyvät samankorkuisina */ .ih__nimi { flex-direction: column; flex-wrap: nowrap; gap: 6px; } .ih__nimi .f-badget { margin-left: 0; justify-content: center; min-height: 22px; font-size: 18px; vertical-align: 0; } .hk2__oma { font-family: var(--f-body, inherit); font-size: 13px; font-weight: 700; color: #7df0ae; } /* Jäsenlistan pylväät pienempinä, eikä paneeli veny viereisen listan korkuiseksi */ .vuodet { height: 170px; gap: clamp(6px, 1.4vw, 16px); } .vuodet__ura { max-width: 34px; border-radius: 8px; } .vuodet__ura i { border-radius: 8px 8px 0 0; box-shadow: 0 0 14px rgb(var(--a1-rgb) / .28); } .vuodet__p b { font-size: 13px; } .vuodet__p span { font-size: 12px; } .panel:has(> .panel__body > .vuodet) { align-self: start; } @media (max-width: 640px) { .vuodet { height: 150px; } } /* arvion palkkiovihje ja valvonnan arvostelulista */ .ph__palkkio { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: -8px; font-size: 13px; color: var(--muted); } .ph__palkkio b { flex: none; min-width: 74px; text-align: right; font-family: var(--f-mono); font-weight: 600; color: var(--dim); } .ph__palkkio b.is-ok { color: #5df0a0; } .ph__kommentit p, .cx__kommentit p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; } .hl__rivi--arvio { align-items: start; } .hl__rivi--arvio small { display: block; overflow-wrap: anywhere; } .hl__vaara { border-color: rgba(255, 70, 70, .55); color: #ff8a8a; } .f-box.hl { color: var(--text, #fff); -webkit-background-clip: border-box; background-clip: border-box; animation: none; } /* etusivun kolme polkua */ .polut { padding: 0 0 clamp(28px, 4vw, 48px); } .polut__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .polku { display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; align-items: center; gap: 16px; padding: 20px 22px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: inherit; text-decoration: none; transition: transform .3s var(--ease), border-color .3s, background .3s; } .polku:hover { transform: translateY(-3px); border-color: rgb(var(--a1-rgb) / .55); background: rgba(255, 255, 255, .06); } .polku__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--a1), var(--a1d)); box-shadow: 0 12px 30px -12px rgb(var(--a1-rgb) / .8); } .polku__ic svg { width: 24px; height: 24px; } .polku b { display: block; font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: 19px; } .polku div span { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); } .polku__nuoli { color: var(--muted); transition: transform .3s var(--ease), color .3s; } .polku__nuoli svg { width: 20px; height: 20px; } .polku:hover .polku__nuoli { transform: translateX(4px); color: #fff; } @media (max-width: 980px) { .polut__lista { grid-template-columns: minmax(0, 1fr); } } .cx__vanha { margin-bottom: 12px; } .cx__vanha[hidden] { display: none; } /* ---------- tekstikentät: sisältö asettuu keskelle eikä kiinni yläreunaan ---------- */ textarea.input { height: auto; min-height: 50px; padding: 13px 16px; line-height: 1.45; font-family: inherit; } textarea.input[data-kasva] { resize: none; overflow-y: auto; } .sn__uusi { align-items: center; } .sn__uusi > .avatar, .sn__uusi > .f-av { align-self: start; margin-top: 5px; } /* ---------- kuvaliitteet ---------- */ .kl__vasen { display: flex; align-items: center; gap: 10px; min-width: 0; } .kl__nappi { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); color: var(--text-2); cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .kl__nappi svg { width: 19px; height: 19px; } .kl__nappi:hover:not(:disabled) { border-color: var(--a1); color: #fff; background: rgb(var(--a1-rgb) / .14); } .kl__nappi:disabled { opacity: .4; cursor: default; } .kl__rivi { display: flex; flex-wrap: wrap; gap: 8px; } .kl__rivi[hidden] { display: none; } .kl__kuva { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-2); background: #000; } .kl__kuva img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s; } .kl__kuva.is-kesken img { opacity: .35; } .kl__kuva.is-kesken::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: kl-pyori .8s linear infinite; } @keyframes kl-pyori { to { transform: rotate(360deg); } } .kl__kuva button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .75); color: #fff; cursor: pointer; } .kl__kuva button svg { width: 11px; height: 11px; } .kg { display: grid; gap: 4px; margin-top: 12px; border-radius: 14px; overflow: hidden; max-width: 640px; } .kg a { display: block; background: #000; overflow: hidden; } .kg img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .kg a:hover img { transform: scale(1.03); } .kg--1 img { max-height: 460px; object-fit: contain; } .kg--2 { grid-template-columns: 1fr 1fr; } .kg--2 a { aspect-ratio: 1; } .kg--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; } .kg--3 a:first-child { grid-row: span 2; } .kg--4 { grid-template-columns: 1fr 1fr; } .kg--4 a { aspect-ratio: 16 / 10; } .kg__iso { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px; background: rgba(3, 3, 5, .92); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; cursor: zoom-out; } .kg__iso.is-open { opacity: 1; visibility: visible; } .kg__iso img { max-width: 100%; max-height: calc(100vh - 48px); border-radius: 12px; cursor: default; } .kg__iso button { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; } .kg__iso button svg { width: 18px; height: 18px; } @media (max-width: 640px) { .kl__vasen small { display: none; } } .f-compose__foot > .kl__vasen { margin-left: 0; } .sn__uusiala { flex-wrap: nowrap; } .sn__uusiala .kl__vasen { flex: 1; } .kl__vasen small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sn__uusiala > .btn { flex: none; } .sn__uusi { grid-template-columns: 34px minmax(0, 1fr); } .sn__uusi > .avatar, .sn__uusi > .f-av { width: 34px; height: 34px; } .sn__uusi > div { min-width: 0; } .sn__uusi textarea { width: 100%; box-sizing: border-box; } .sn__uusi > div { grid-template-columns: minmax(0, 1fr); } .sn__uusiala, .sn__uusiala .kl__vasen { min-width: 0; } /* ---------- kirjoitin: muotoilurivi, GIF- ja tarravalitsin, spoilerit ---------- */ .mt { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); width: max-content; max-width: 100%; } .mt button { display: grid; place-items: center; width: 32px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: inherit; font-size: 15px; cursor: pointer; transition: background .15s, color .15s; } .mt button:hover { background: rgba(255, 255, 255, .1); color: #fff; } .mt button svg { width: 17px; height: 17px; } .mt button b { font-weight: 900; } .mt button i { font-family: Georgia, serif; font-style: italic; } .mt__vali { width: 1px; height: 18px; margin: 0 4px; background: var(--line-2); } .kl__vasen { gap: 6px; } .kl__nappi--gif svg { width: 24px; height: 24px; } .kl__nappi--gif { display: none; } .on-gif .kl__nappi--gif { display: grid; } .kl__nappi--spo { width: auto; padding: 0 12px 0 10px; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 700; } .kl__nappi--spo[aria-pressed="true"] { border-color: var(--a1); background: rgb(var(--a1-rgb) / .2); color: #fff; } .kl__kuva--tarra { background: none; border-style: dashed; } .kl__kuva--tarra img { object-fit: contain; } .kl__kuva--gif::before { content: "GIF"; position: absolute; left: 4px; bottom: 4px; z-index: 1; padding: 1px 5px; border-radius: 5px; background: rgba(0, 0, 0, .75); font-size: 10px; font-weight: 900; } .mv { position: fixed; z-index: 300; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-radius: 18px; background: #131317; border: 1px solid var(--line-2); box-shadow: 0 40px 100px -20px #000; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; } .mv.is-open { opacity: 1; visibility: visible; transform: none; } .mv__paa { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); } .mv__haku { flex: 1; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; background: #000; border: 1px solid var(--line-2); } .mv__haku svg { width: 16px; height: 16px; color: var(--muted); flex: none; } .mv__haku input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 15px; outline: none; } .mv__sis { overflow-y: auto; padding: 10px; overscroll-behavior: contain; } .mv__sis .empty { padding: 40px 16px; text-align: center; font-size: 14px; } .mv__ala { padding: 8px 12px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--dim); } .mv__gifit { columns: 2; column-gap: 6px; } .mv__gifit button { display: block; width: 100%; margin: 0 0 6px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .06); cursor: pointer; break-inside: avoid; } .mv__gifit img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s var(--ease); } .mv__gifit button:hover img { transform: scale(1.05); } .mv__tarrat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .mv__tarra { position: relative; aspect-ratio: 1; } .mv__tarra > button:first-child { width: 100%; height: 100%; padding: 6px; border: 1px solid transparent; border-radius: 12px; background: rgba(255, 255, 255, .04); cursor: pointer; transition: border-color .15s, background .15s, transform .2s var(--ease); } .mv__tarra > button:first-child:hover { border-color: var(--a1); background: rgb(var(--a1-rgb) / .12); transform: scale(1.04); } .mv__tarra img { width: 100%; height: 100%; object-fit: contain; display: block; } .mv__pois { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: #2a2a31; color: #fff; cursor: pointer; opacity: 0; transition: opacity .15s; } .mv__pois svg { width: 9px; height: 9px; } .mv__tarra:hover .mv__pois, .mv__pois:focus-visible { opacity: 1; } .mv__uusi { aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 12px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; cursor: pointer; transition: border-color .15s, color .15s; } .mv__uusi:hover { border-color: var(--a1); color: #fff; } .mv__uusi svg { width: 20px; height: 20px; } .mv__uusi.is-kesken { opacity: .5; pointer-events: none; } @media (hover: none) { .mv__pois { opacity: 1; } } .kg__gif { position: relative; display: block; max-width: 100%; margin-top: 12px; border-radius: 14px; overflow: hidden; background: #000; } .kg__gif img { display: block; width: 100%; height: 100%; object-fit: cover; } .kg__gif i { position: absolute; left: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .7); font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: .04em; } .tarra { display: block; width: 160px; height: 160px; margin-top: 10px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); } .f-comment .tarra, .sn__kommentti .tarra { width: 120px; height: 120px; } .f-comment .kg, .f-comment .kg__gif { max-width: 420px; } u { text-underline-offset: 3px; } .spo-t { border-radius: 5px; padding: 0 3px; background: #2a2a31; color: transparent; cursor: pointer; transition: background .2s, color .2s; -webkit-user-select: none; user-select: none; } .spo-t * { visibility: hidden; } .spo-t.is-auki { background: rgba(255, 255, 255, .08); color: inherit; cursor: text; -webkit-user-select: text; user-select: text; } .spo-t.is-auki * { visibility: visible; } .spo { position: relative; border-radius: 14px; overflow: hidden; } .spo__sis { filter: blur(22px) saturate(.6); pointer-events: none; -webkit-user-select: none; user-select: none; transition: filter .35s; min-height: 64px; } .spo__nappi { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; background: rgba(8, 8, 11, .45); color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; } .spo__nappi svg { width: 20px; height: 20px; } .spo__nappi span { padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, .7); border: 1px solid var(--line-2); } .spo.is-auki .spo__sis { filter: none; pointer-events: auto; -webkit-user-select: text; user-select: text; } .spo.is-auki .spo__nappi { display: none; } .f-compose .mt { margin-bottom: -4px; } @media (max-width: 640px) { .kl__nappi--spo span { display: none; } .kl__nappi--spo { width: 38px; padding: 0; justify-content: center; } .mt button { width: 30px; } } /* ---------- Kasvu: vasen sarake täyttää Nostattajat-listan korkeuden ---------- */ .kasvu__vasen { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 18px; min-width: 0; } .kasvu__vasen > .panel { align-self: stretch; } .kasvu__uudet { display: grid; grid-template-rows: auto minmax(0, 1fr); } .kasvu__uudet .panel__body { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; } .uj__luvut { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .uj__luvut div { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); } .uj__luvut b { display: block; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 26px; line-height: 1.1; } .uj__luvut span { font-size: 12.5px; color: var(--muted); } .uj__lista { display: grid; align-content: space-between; margin: 0; } @media (max-width: 640px) { .uj__luvut b { font-size: 21px; } .uj__luvut div { padding: 12px; } } /* ---------- kirjoitin: otsikon muotoilurivi ja sisällön työkalut tekstikentän alla ---------- */ .kl__nappi--gif, .on-gif .kl__nappi--gif { display: grid; } .mt--otsikko { margin-top: -4px; } .f-compose .mt { margin-bottom: 0; } .kl__vasen { flex-wrap: wrap; } .kl__vasen .mt { margin-right: 4px; } .sn__uusiala { flex-wrap: wrap; align-items: end; } .sn__uusiala > .btn { margin-left: auto; } .f-post__title u, .f-post__title s { text-decoration-thickness: 2px; } .mv__linkki { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); } .mv__linkki input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: #000; color: #fff; font: inherit; font-size: 14px; outline: none; } .mv__linkki input:focus { border-color: var(--a1); } .mv__paa[hidden] { display: none; } .mv__ohje { display: grid; gap: 8px; align-content: center; height: 100%; } .mv__ohje b { font-size: 16px; color: #fff; } .mv__ohje span { font-size: 13.5px; line-height: 1.5; color: var(--muted); } .mv--pieni { grid-template-rows: auto auto auto; } .mv--pieni .mv__sis .empty { padding: 26px 18px 22px; height: auto; } /* ---------- nimi ja merkit yhtenä tiiviinä ryhmänä, kuten Discordissa ---------- */ .f-kuka { display: inline-flex; align-items: center; gap: 5px; min-width: 0; vertical-align: middle; } .f-kuka .f-badget { margin-left: 0; gap: 3px; vertical-align: 0; } .f-kuka .f-name { min-width: 0; } .f-name.glowtext { color: transparent; font-weight: 800; } .f-badge--merkki::after { display: none; } .f-badge--merkki img { object-fit: contain; } .sn__kuka .f-kuka { justify-self: start; } .ih__nimi { min-height: 54px; align-content: start; } .ih__nimi .f-kuka { flex-direction: column; gap: 6px; } .ih__nimi .f-kuka .f-badget { font-size: 18px; min-height: 0; justify-content: center; } /* ---------- vastauskenttä: avautuu työkaluineen, kun siihen tartutaan ---------- */ .sn__vastaa { display: grid; gap: 8px; } .sn__vastaarivi { display: flex; align-items: end; gap: 8px; } .sn__vastaa textarea.input { flex: 1; min-width: 0; height: 38px; min-height: 38px; border-radius: 19px; padding: 8px 16px; font-size: 14.5px; line-height: 1.4; } .sn__vastaarivi .btn { height: 38px; flex: none; } .sn__vastaatyokalut { display: none; } .sn__vastaa.is-auki .sn__vastaatyokalut { display: flex; } .sn__kommentti .kg, .sn__kommentti .kg__gif { max-width: 320px; margin-top: 8px; } .sn__kommentti .spo { margin-top: 4px; } /* ---------- etusivu: tiiviimpi yläosa, jotta kolme polkua näkyvät heti ---------- */ [data-page="index"] .hero { padding-top: clamp(16px, 3.2vh, 44px); padding-bottom: clamp(20px, 3.6vh, 44px); } [data-page="index"] .display { font-size: clamp(44px, min(6.6vw, 11vh), 108px); } [data-page="index"] .hero__pill { margin-bottom: clamp(14px, 2.4vh, 26px); } [data-page="index"] .hero__tag { margin-top: clamp(14px, 2.6vh, 28px); margin-bottom: 10px; font-size: clamp(18px, min(1.7vw, 2.9vh), 24px); } [data-page="index"] .hero .lead { font-size: clamp(16px, min(1.25vw, 2.1vh), 19px); } [data-page="index"] .hero__ctas { margin-top: clamp(18px, 3vh, 32px); } [data-page="index"] .hero__trust { margin-top: clamp(14px, 2.4vh, 28px); } [data-page="index"] .polut { padding-bottom: clamp(20px, 3vh, 40px); } [data-page="index"] .polku { padding: clamp(14px, 2vh, 20px) 20px; } main { position: relative; z-index: 0; } /* ---------- etusivu: live-paneeli ---------- */ .nyt { position: relative; display: grid; gap: clamp(12px, 1.8vh, 18px); padding: clamp(18px, 2.2vw, 26px); border-radius: var(--r-xl); background: radial-gradient(100% 60% at 100% 0%, rgb(var(--a1-rgb) / .3), transparent 65%), linear-gradient(180deg, rgba(26, 26, 32, .92), rgba(13, 13, 17, .96)); border: 1px solid var(--line-2); box-shadow: 0 50px 120px -40px rgb(var(--a1-rgb) / .6); } .nyt__paa { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .nyt__live { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: clamp(17px, 1.5vw, 21px); } .nyt__paa small { font-size: 12px; color: var(--muted); white-space: nowrap; } .nyt__luvut { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .nyt__luvut > div { padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid var(--line); display: grid; gap: 3px; } .nyt__luvut b { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; font-variant-numeric: tabular-nums; } .nyt__luvut span { font-size: 12px; color: var(--muted); } .nyt__syote { min-height: 216px; } .nyt__syote .feed li { padding: 9px 0; font-size: 14px; } .nyt__syote .empty { padding: 80px 0; } .nyt__ala { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(120deg, rgba(255, 180, 0, .16), rgba(255, 180, 0, .04)); border: 1px solid rgba(255, 180, 0, .3); color: inherit; text-decoration: none; transition: transform .25s var(--ease), border-color .25s; } .nyt__ala:hover { transform: translateY(-2px); border-color: rgba(255, 190, 40, .7); } .nyt__ala small { display: block; font-size: 12px; color: #ffd98a; } .nyt__ala b { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 20px; font-variant-numeric: tabular-nums; } .nyt__ala svg { width: 18px; height: 18px; color: #ffd98a; } @media (max-height: 820px) and (min-width: 981px) { .nyt__syote { min-height: 162px; } .nyt__syote .feed li:nth-child(n+4) { display: none; } } /* ---------- taustan leijuvat kolikot ---------- */ .kolikot { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .kolikot img { position: absolute; left: 0; top: 0; will-change: transform; -webkit-user-drag: none; user-select: none; } /* ---------- hohtovärit: korkeat kuvakortit kahdessa sarakkeessa, viimeinen koko leveydellä ---------- */ .hk2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; grid-auto-rows: auto; } .hk2__k { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; min-height: 270px; padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line); border-left: 4px solid var(--g1); background: none; isolation: isolate; overflow: hidden; } .hk2__k:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 320px; } .hk2__k:hover { transform: translateY(-3px); box-shadow: 0 30px 70px -36px var(--g1); } .hk2__taide { position: absolute; inset: 0; z-index: -1; display: block; padding: 0; background: #101014; } .hk2__taide img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .hk2__taide::after { z-index: 1; background: linear-gradient(180deg, rgba(5, 5, 6, .05) 0%, rgba(5, 5, 6, .38) 45%, rgba(5, 5, 6, .92) 100%); } .hk2__tiedot { padding: 0; } .hk2__nimi { margin: 0; width: max-content; max-width: 100%; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(30px, 3.3vw, 46px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; background-size: 200% 100%; background-repeat: repeat-x; -webkit-background-clip: text; background-clip: text; color: transparent; animation: glowSlide 3.2s linear infinite; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .7)); } .hk2__tiedot p { margin-top: 8px; font-size: 14.5px; color: rgba(255, 255, 255, .9); text-shadow: 0 2px 10px rgba(0, 0, 0, .8); } .hk2__ala { padding: 0; } .hk2__ala > span:first-child { font-size: 18px; } .hk2__ala .kp__oma { background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px); } @media (max-width: 760px) { .hk2 { grid-template-columns: minmax(0, 1fr); } .hk2__k, .hk2__k:last-child:nth-child(odd) { min-height: 230px; } } /* etusivun otsikko kahdelle riville leveällä näytöllä: säästää korkeutta, jotta polut mahtuvat ensimmäiseen näkymään */ @media (min-width: 981px) { [data-page="index"] .display { font-size: clamp(40px, min(4.6vw, 9.4vh), 72px); line-height: 1; } [data-page="index"] .display .line { white-space: nowrap; } [data-page="index"] .display .line:nth-child(1), [data-page="index"] .display .line:nth-child(2) { display: inline-block; } [data-page="index"] .display .line:nth-child(1) { margin-right: .22em; } [data-page="index"] .display .line:nth-child(3) { display: block; } } .hk2__tiedot .hk2__nimi { margin: 0; font-size: clamp(30px, 3.3vw, 46px); font-weight: 900; } /* musiikkibotin paneelin napit siruina vierekkäin */ [data-music-cmds], .tile--white .tile__cmds { display: flex; flex-wrap: wrap; gap: 8px; } [data-music-cmds] code, .tile--white .tile__cmds code { padding: 7px 12px; border-radius: 999px; font-family: var(--f-body, inherit); font-size: 13.5px; font-weight: 700; } /* ---------- viestit kuten Discordissa: profiilikuva vasemmalla, sisältö suoraan nimen alla ---------- */ .f-comment__meta { align-items: flex-start; gap: 10px; min-height: 34px; } .f-comment__meta .avatar { width: 34px; height: 34px; font-size: 14px; } .f-comment__meta > .f-kuka, .f-comment__meta > span { line-height: 20px; } .f-comment__text { margin: -12px 0 2px 44px; } .f-comment > .kg, .f-comment > .kg__gif, .f-comment > .tarra, .f-comment > .spo { margin-left: 44px; margin-top: 6px; } .f-comment > .f-comment__text:empty + .kg, .f-comment > .f-comment__text:empty + .kg__gif, .f-comment > .f-comment__text:empty + .tarra { margin-top: -10px; } .f-comment .spo .f-comment__text { margin: 0 0 2px; } .f-comment .spo > .spo__sis > :not(.f-comment__text) { margin-left: 0; } .f-comment__foot { margin-left: 38px; margin-top: 4px; } .f-comment [data-vastaus] { margin-left: 44px; } .sn > .sn__teksti, .sn > .kg, .sn > .kg__gif, .sn > .tarra, .sn > .spo, .sn > .sn__ala { margin-left: 46px; } .sn > .sn__teksti { margin-top: -8px; } .sn > .kg, .sn > .kg__gif, .sn > .tarra { margin-top: -4px; } .kg__gif { border-radius: 10px; } .kg__gif i { display: none; } /* etusivun ensimmäinen näkymä: täyttää ruudun, merkkinauha vierii alareunassa eikä seuraava osio pilkota */ @media (min-width: 981px) { .ensinakyma { display: flex; flex-direction: column; min-height: calc(100vh - var(--eka-yla, 0px)); min-height: calc(100svh - var(--eka-yla, 0px)); } .ensinakyma > .hero { flex: 1 1 auto; display: flex; align-items: center; } .ensinakyma > .hero > .wrap { width: 100%; } .ensinakyma > .polut { padding-bottom: clamp(16px, 2.6vh, 32px); } .ensinakyma > .marquee { margin-top: auto; margin-bottom: 0; } } /* matalilla näytöillä (läppärit) ensimmäinen näkymä tiivistyy, jotta merkkinauha mahtuu mukaan */ @media (min-width: 981px) and (max-height: 840px) { [data-page="index"] .hero__trust { display: none; } [data-page="index"] .hero { padding-top: 10px; padding-bottom: 14px; } [data-page="index"] .hero__pill { margin-bottom: 10px; } [data-page="index"] .hero__tag { margin-top: 10px; } [data-page="index"] .hero__ctas { margin-top: 14px; } [data-page="index"] .nyt { gap: 10px; padding: 16px 20px; } [data-page="index"] .nyt__syote { min-height: 0; } [data-page="index"] .nyt__syote .feed li { padding: 6px 0; } [data-page="index"] .nyt__luvut > div { padding: 9px 12px; } [data-page="index"] .nyt__ala { padding: 8px 14px; } [data-page="index"] .polku { padding: 10px 18px; } [data-page="index"] .ensinakyma > .polut { padding-bottom: 10px; } [data-page="index"] .ensinakyma > .marquee { padding-block: 10px; } [data-page="index"] .ensinakyma > .marquee img { width: 34px; height: 34px; } } /* ---------- korostussana pysyy samalla rivillä (hallintalaatikoiden .hl ei saa vaikuttaa otsikoihin) ---------- */ span.hl { display: inline; margin: 0; } /* ---------- osiovalikko kuplana: ei koko sivun levyistä palkkia ---------- */ .subnav { position: sticky; top: calc(var(--hdr) + 10px); z-index: 50; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; margin-top: clamp(20px, 3vw, 36px); pointer-events: none; } .subnav .wrap { height: auto; } .subnav .wrap { display: flex; width: max-content; max-width: calc(100% - 2 * var(--pad, 20px)); padding: 6px; gap: 2px; border-radius: 999px; background: rgba(18, 18, 22, .78); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--line-2); box-shadow: 0 18px 40px -22px #000; pointer-events: auto; margin-inline: auto; } .subnav a { padding: 9px 16px; } .subnav a:hover { background: rgba(255, 255, 255, .06); } .subnav a.is-active { background: #fff; color: #000; } .subnav + .sec, .subnav + section, .subnav + div > .sec:first-child { padding-top: clamp(20px, 3vw, 36px); } /* ---------- palvelinhaku: Discordin banneri kortin kanteen, muuten oma värisävy ---------- */ .ph__kansi { height: 104px; background: linear-gradient(120deg, hsl(var(--h, 0) 70% 46%), hsl(calc(var(--h, 0) + 44) 72% 30%)); } .ph__kansi::before { display: none; } .ph__kansi::after { background: linear-gradient(180deg, rgba(13, 13, 17, 0) 35%, #151519); } .ph__kansi--kuva { height: 124px; background-size: cover; background-position: center; } /* ---------- palvelimet: ei vielä julkaistuja ---------- */ .srv-tyhja { display: grid; justify-items: center; gap: 16px; padding: clamp(36px, 6vw, 72px) clamp(20px, 4vw, 48px); border-radius: var(--r-xl); border: 1px dashed var(--line-2); background: rgba(255, 255, 255, .03); text-align: center; } .srv-tyhja__ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, var(--a1), var(--a1d)); box-shadow: 0 16px 40px -14px rgb(var(--a1-rgb) / .8); } .srv-tyhja__ic svg { width: 28px; height: 28px; } .srv-tyhja h2 { margin: 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: clamp(26px, 3.4vw, 40px); } .srv-tyhja .lead { max-width: 640px; margin: 0; } .srv-tyhja__napit { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; } [data-palvelinohje][hidden] { display: none; } /* ---------- lemmikki: nimen muokkaus ja paremmat toimintokortit ---------- */ .lk__nimi { display: flex; align-items: center; gap: 10px; min-width: 0; } .lk__nimi > span { min-width: 0; overflow-wrap: anywhere; } .lk__muokkaa { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .05); color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s, background .2s, transform .2s var(--ease); } .lk__muokkaa svg { width: 16px; height: 16px; } .lk__muokkaa:hover { color: #fff; border-color: var(--a1); background: rgb(var(--a1-rgb) / .16); transform: rotate(-8deg); } .lk__ala--kortit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .lk__toimi { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 18px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .035); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .25s var(--ease), border-color .25s, background .25s; } .lk__toimi > svg { width: 44px; height: 44px; padding: 11px; border-radius: 14px; box-sizing: border-box; } .lk__toimi b { display: block; font-size: 15.5px; } .lk__toimi small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); } .lk__toimi em { font-style: normal; font-family: var(--f-mono); font-weight: 600; font-size: 14.5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .lk__toimi--juoma > svg { background: rgba(160, 110, 255, .18); color: #c9a8ff; } .lk__toimi--juoma:hover:not(:disabled) { border-color: rgba(170, 120, 255, .7); background: rgba(160, 110, 255, .1); transform: translateY(-2px); } .lk__toimi--myy > svg { background: rgba(60, 220, 140, .15); color: #6ff0aa; } .lk__toimi--myy em { color: #6ff0aa; } .lk__toimi--myy:hover { border-color: rgba(60, 220, 140, .6); background: rgba(60, 220, 140, .08); transform: translateY(-2px); } .lk__toimi:disabled { opacity: .5; cursor: default; } @media (max-width: 720px) { .lk__ala--kortit { grid-template-columns: minmax(0, 1fr); } } /* ---------- FiveM- ja RedM-arvostelu osa-alueittain ---------- */ .ph__lomake.ao { width: min(680px, 100%); gap: 14px; max-height: calc(100vh - 32px); overflow-y: auto; } .ao__paa { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .ao__paa p { margin: 4px 0 0; } .ao__yht { text-align: right; flex: none; } .ao__yht b { display: block; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 30px; line-height: 1; color: #ffc93c; font-variant-numeric: tabular-nums; } .ao__yht b i { font-style: normal; font-size: 18px; opacity: .8; } .ao__yht span { font-size: 13px; color: var(--muted); } .ao__lista { display: grid; } .ao__rivi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 11px 0; border-bottom: 1px solid var(--line); } .ao__rivi:last-child { border-bottom: 0; } .ao__ots b { display: block; font-size: 15.5px; } .ao__ots span { display: block; font-size: 13px; color: var(--muted); } .ao__tahdet { display: flex; align-items: center; } .ao__tahdet .ph__tahti { width: 30px; height: 32px; } .ao__tahdet .ph__tahti svg { width: 24px; height: 24px; } .ao__nolla { width: 28px; height: 28px; margin-right: 6px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--muted); font: inherit; font-family: var(--f-mono); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .ao__nolla:hover { border-color: #ff6b6b; color: #fff; } .ao__nolla.is-on { border-color: #ff5252; background: rgba(255, 70, 70, .22); color: #fff; } .ao__perustele { display: grid; place-items: center; width: 34px; height: 34px; margin-left: 8px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; transition: color .15s, background .15s; } .ao__perustele svg { width: 21px; height: 21px; } .ao__perustele:hover, .ao__perustele.is-on { color: #fff; background: rgba(255, 255, 255, .08); } .ph__lomake .ao__teksti { grid-column: 1 / -1; font-size: 14.5px; padding: 10px 14px; min-height: 0; } .ao__ohje { display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); } .ao__ohje svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #ffc93c; } .ao .ph__palkkio { margin-top: 0; } @media (max-width: 600px) { .ao__rivi { grid-template-columns: minmax(0, 1fr); } .ao__tahdet { justify-content: space-between; } } .cx__osat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-2); } .cx__osa { display: grid; grid-template-columns: minmax(0, 1fr) 70px 30px; align-items: center; gap: 10px; font-size: 13.5px; } .cx__osa span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cx__osa i { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; } .cx__osa u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff9d00, #ffc93c); } .cx__osa b { font-family: var(--f-mono); font-weight: 600; text-align: right; } .cx__osa.is-tyhja { opacity: .45; } .cx__ryhmat { flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cx__ryhmat > div { padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); display: grid; gap: 1px; } .cx__ryhmat small { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .cx__ryhmat b { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 20px; } .cx__ryhmat span { font-size: 12px; color: var(--muted); } .cx__kommentit blockquote header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cx__kommentit blockquote header b { font-family: var(--f-mono); font-weight: 600; font-size: 13px; } .cx__kommentit blockquote p strong { color: #fff; } .cx__kommentit blockquote.is-kriitikko { border-left-color: var(--a1); background: rgb(var(--a1-rgb) / .08); } .cx__kriitikko { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: rgb(var(--a1-rgb) / .2); border: 1px solid rgb(var(--a1-rgb) / .5); font-size: 11.5px; font-weight: 800; color: #fff; } .cx__kriitikko svg { width: 12px; height: 12px; } @media (max-width: 700px) { .cx__osat { grid-template-columns: minmax(0, 1fr); } } .ao__rivi { padding: 9px 0; } /* ---------- palvelimen arvostelut: tiivis kortti, perustelut avataan erikseen ---------- */ .av__lista { display: grid; gap: 10px; margin-top: 16px; } .av { border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); overflow: hidden; } .av.is-kriitikko { border-color: rgb(var(--a1-rgb) / .5); background: rgb(var(--a1-rgb) / .07); } .av__paa { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; } .av__kuka { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-width: 0; } .av__kuka b { font-size: 15px; } .av__kuka small { flex: 0 0 100%; font-size: 12px; color: var(--muted); } .av__arvosana { display: flex; align-items: center; gap: 8px; } .av__arvosana b { font-family: var(--f-mono); font-weight: 600; font-size: 15px; } .av__avaa { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .18); color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; transition: background .2s, color .2s; } .av__avaa:hover { background: rgba(255, 255, 255, .05); color: #fff; } .av__avaa .dim { font-weight: 500; font-size: 12.5px; } .av__avaa i { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease); } .av.is-auki .av__avaa i { transform: rotate(-135deg) translate(-2px, -2px); } .av__erittely { display: grid; padding: 4px 14px 12px; border-top: 1px solid var(--line); } .av__osa { padding: 12px 0; border-bottom: 1px dashed var(--line-2); } .av__osa:last-child { border-bottom: 0; padding-bottom: 2px; } .av__osaots { display: flex; align-items: center; gap: 10px; } .av__osaots b { font-size: 14.5px; margin-right: auto; } .av__osaots em { font-style: normal; font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); min-width: 40px; text-align: right; } .av__teksti { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; text-wrap: pretty; max-width: 68ch; } @media (max-width: 560px) { .av__paa { grid-template-columns: 34px minmax(0, 1fr); } .av__arvosana { grid-column: 1 / -1; } } /* ========================================================================== PROFIILI Kansi, iso profiilikuva tilapisteellä, nimi merkkeineen, tilasirut ja kaksi palstaa: esittely vasemmalla, luvut oikealla. ========================================================================== */ .pf { position: relative; border-radius: var(--r-xl); border: 1px solid var(--line-2); overflow: hidden; background: linear-gradient(180deg, #17171d, #0e0e12); box-shadow: 0 60px 130px -70px var(--p1); } .pf__kansi { height: clamp(150px, 19vw, 230px); } .pf__kansi::after { background: linear-gradient(180deg, transparent 30%, rgba(14, 14, 18, .5) 75%, #15151a); } .pf__kansi::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 90% at 12% 110%, rgba(255, 255, 255, .22), transparent 70%); mix-blend-mode: overlay; } .pf__runko { padding: 0 clamp(18px, 3vw, 34px) clamp(22px, 3vw, 32px); } .pf__yla { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 6px 22px; margin-top: -64px; position: relative; } .pf__kuva { position: relative; width: 136px; height: 136px; flex: none; } .pf__kuva .f-profile__av { width: 136px; height: 136px; font-size: 52px; border: 6px solid #15151a; box-shadow: 0 0 0 2px var(--p1), 0 24px 50px -14px var(--p1); } .pf__piste { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; border: 5px solid #15151a; } .pf__kuva .f-profile__huomio { left: auto; right: -2px; top: 2px; } .pf__nimi { min-width: 0; padding-bottom: 8px; } .pf .f-profile__name { margin: 0; font-size: clamp(30px, 3.8vw, 48px); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; } .pf .f-profile__name .f-badget { margin-left: 0; gap: 6px; font-size: .62em; vertical-align: 0; } .pf .f-profile__name .f-badge { width: 1.15em; height: 1.15em; } .pf__ala { margin: 6px 0 0; font-size: 14px; color: var(--muted); } .pf__toimet { padding-bottom: 10px; justify-content: flex-end; } .pf__sirut { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } .pf__siru { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); font-size: 13px; font-weight: 700; color: var(--text-2); } .pf__siru i:not(.live-dot) { width: 9px; height: 9px; border-radius: 50%; } .pf__siru svg { width: 13px; height: 13px; } .pf__siru--puhe { border-color: rgba(59, 224, 138, .45); background: rgba(59, 224, 138, .1); color: #fff; } .pf__siru--nosto { border-color: rgba(255, 115, 250, .5); background: rgba(255, 115, 250, .12); color: #ffb3fb; } .pf__siru--kaveri { border-color: rgb(var(--a1-rgb) / .5); background: rgb(var(--a1-rgb) / .14); color: #fff; } .pf__sirut .f-role { margin-left: 0; height: 30px; padding: 0 12px; font-size: 12px; } .pf__sisus { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 18px; align-items: start; } .pf__tietoa { padding: 20px 22px; border-radius: 20px; background: rgba(0, 0, 0, .26); border: 1px solid var(--line); min-height: 100%; } .pf__tietoa .f-profile__status { margin: 0 0 12px; padding-left: 14px; border-left: 3px solid var(--p1); font-size: 18px; } .pf__tietoa .f-profile__bio { margin: 0; } .pf__pelit { margin-top: 18px; } .pf__pelit small, .pf__palstat span { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .pf__pelit .f-profile__games { margin-top: 8px; } .pf__palstat { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: 14px; } .pf__palstat a { color: #fff; font-weight: 700; } .pf__laatat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pf__laatta { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(0, 0, 0, .26); border: 1px solid var(--line); transition: border-color .25s, transform .25s var(--ease); } .pf__laatta:hover { border-color: color-mix(in srgb, var(--p1) 60%, transparent); transform: translateY(-2px); } .pf__laatta:first-child { grid-column: 1 / -1; background: linear-gradient(120deg, rgba(255, 180, 0, .16), rgba(255, 180, 0, .03)); border-color: rgba(255, 180, 0, .32); } .pf__ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--p1) 22%, transparent); color: #fff; } .pf__ic svg { width: 20px; height: 20px; } .pf__ic .coin { width: 24px; height: 24px; } .pf__laatta:first-child .pf__ic { background: rgba(255, 180, 0, .2); } .pf__laatta b { display: block; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; } .pf__laatta:first-child b { font-size: 28px; } .pf__laatta div span { font-size: 12.5px; color: var(--muted); } .pf__laatta em { position: absolute; top: 12px; right: 12px; font-style: normal; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--text-2); } .pf__laatta:first-child em { background: rgba(255, 180, 0, .22); color: #ffd98a; } @media (max-width: 900px) { .pf__sisus { grid-template-columns: minmax(0, 1fr); } .pf__yla { grid-template-columns: auto minmax(0, 1fr); } .pf__toimet { grid-column: 1 / -1; justify-content: flex-start; padding: 6px 0 0; } } @media (max-width: 560px) { .pf__yla { grid-template-columns: minmax(0, 1fr); margin-top: -54px; } .pf__kuva, .pf__kuva .f-profile__av { width: 108px; height: 108px; } .pf__piste { width: 22px; height: 22px; right: 5px; bottom: 5px; } .pf__nimi { padding-bottom: 0; } .pf__laatta em { position: static; grid-column: 2; justify-self: start; } } .pf__yla { grid-template-columns: auto minmax(0, 1fr); } .pf__toimet { position: absolute; right: 0; top: 8px; padding: 0; } .pf__toimet .btn--line { background: rgba(10, 10, 14, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .pf .f-profile__name { overflow-wrap: break-word; word-break: normal; } .pf .f-profile__name > span:first-child { min-width: 0; max-width: 100%; } .pf__sisus { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pf__laatta div span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf__laatta > div { min-width: 0; } @media (max-width: 900px) { .pf__sisus { grid-template-columns: minmax(0, 1fr); } .pf__toimet { position: static; grid-column: 1 / -1; padding-top: 8px; } } /* ---------- profiili: ei Palstat-sivun yläotsikkoa, oma bannerikuva, kolme lukua ---------- */ .on-profiili .p-hero { display: none; } .on-profiili main > .wrap:first-of-type, .on-profiili .p-hero + * { padding-top: clamp(16px, 2.4vw, 28px); } .pf__kansi--kuva { background-size: var(--banner-koko, cover) !important; background-position: var(--banner-paikka, center) !important; } .pf__kansi--kuva::before { display: none; } .pf__laatat { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pb { display: grid; gap: 8px; } .pb > span { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .pb__esi { height: 96px; border-radius: 14px; border: 1px solid var(--line-2); background-size: var(--banner-koko, cover); background-position: var(--banner-paikka, center); position: relative; overflow: hidden; } .pb__esi::after { display: none; } .pb__esi.is-kesken { opacity: .5; } .pb__napit { display: flex; flex-wrap: wrap; gap: 8px; } .pb__napit [hidden] { display: none; } .on-profiili .f-hero { display: none; } /* ---------- profiili: ei hohtoa kuvan alla, ei erillistä omaa laatikkoa sivupalkissa ---------- */ .pf__kuva .f-profile__av { box-shadow: none; border-color: #15151a; } .pf { box-shadow: none; } .on-profiili .f-me { display: none; } /* ---------- asetukset ---------- */ .f-head { position: relative; } .as__takaisin { margin-left: auto; align-self: center; flex: none; } .as { display: grid; gap: 14px; margin-bottom: 18px; } .as__lomake { padding: 0; border: 0; background: none; box-shadow: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; } .as__lomake > label:nth-of-type(2), .as__lomake > .pb, .as__lomake > .f-kannet, .as__lomake > .f-compose__foot { grid-column: 1 / -1; } .as__lomake .pb__esi { height: clamp(110px, 16vw, 170px); } .as__ots { margin: 26px 0 14px; } .as__ots h2 { margin: 0 0 4px; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 26px; } .as__ots p { margin: 0; } .as--tili { margin-top: 18px; } @media (max-width: 700px) { .as__lomake { grid-template-columns: minmax(0, 1fr); } .as__takaisin { display: none; } } .as__lomake { grid-template-columns: minmax(0, 1fr); } .as__lomake > * { grid-column: 1 / -1; } .as .pb__esi { --p1: var(--a1); --p2: var(--a2); --p3: var(--a3); } .as .f-kannet > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; } /* ---------- paikallaolopiste profiilikuvan kulmassa kaikkialla ---------- */ .av-w { position: relative; display: inline-flex; flex: none; line-height: 0; vertical-align: middle; } .av-p { position: absolute; right: -2px; bottom: -2px; width: 32%; height: 32%; min-width: 9px; min-height: 9px; max-width: 18px; max-height: 18px; border-radius: 50%; background: #6b6b76; border: 2px solid #121216; box-sizing: border-box; } .av-p.is-on { background: #3be08a; } .sn__uusi > .av-w { align-self: start; margin-top: 5px; } .f-comment__meta > .av-w .avatar, .f-comment__meta .av-w .avatar { width: 34px; height: 34px; } .ih__av .av-w { display: block; } /* ---------- profiili: asetusnappi välilehtirivillä, kiinnostukset avattavana valikkona ---------- */ .pf__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pf__asetukset { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: border-color .2s, background .2s; } .pf__asetukset svg { width: 17px; height: 17px; transition: transform .5s var(--ease); } .pf__asetukset:hover { border-color: var(--a1); background: rgb(var(--a1-rgb) / .14); } .pf__asetukset:hover svg { transform: rotate(60deg); } .pf__sirut:empty { display: none; } .pf__kiinn { margin-top: 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); overflow: hidden; } .pf__kiinn summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; transition: background .2s; } .pf__kiinn summary::-webkit-details-marker { display: none; } .pf__kiinn summary:hover { background: rgba(255, 255, 255, .05); } .pf__kiinn summary svg { width: 16px; height: 16px; color: var(--p1); } .pf__kiinn summary span { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 12px; color: var(--muted); } .pf__kiinn summary i { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease); } .pf__kiinn[open] summary i { transform: rotate(-135deg) translate(-2px, -2px); } .pf__kiinnsis { display: grid; gap: 14px; padding: 4px 14px 14px; } .pf__kiinnryhma small { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .pf__kiinnryhma .f-profile__games { margin: 0; } /* ---------- asetukset: pelit ja harrastukset siruina ---------- */ .ks { display: grid; gap: 8px; } .ks > span { font-size: 15px; font-weight: 700; } .ks__rivi { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; } .ks__rivi .btn { height: 50px; padding-inline: 16px; } .ks__rivi .btn svg { width: 15px; height: 15px; } .ks__sirut { display: flex; flex-wrap: wrap; gap: 6px; } .ks__sirut:empty { display: none; } /* ---------- profiili: luvut yhtenä rivinä, esittely ja kiinnostukset koko leveydellä sen alla ---------- */ .pf__sisus { grid-template-columns: minmax(0, 1fr); gap: 12px; } .pf__laatat { order: -1; grid-template-columns: 1.3fr 1fr 1fr; } .pf__laatta:first-child { grid-column: auto; } .pf__laatta:first-child b { font-size: 24px; } .pf__tietoa { min-height: 0; padding: 18px 20px; } .pf__tietoa .f-profile__status:last-child, .pf__tietoa .f-profile__bio:last-child { margin-bottom: 0; } .pf__kiinn { margin-top: 14px; } .pf__kiinnsis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; align-items: start; } .pf__kiinnryhma:only-child { grid-column: 1 / -1; } @media (max-width: 640px) { .pf__laatat { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf__laatta:first-child { grid-column: 1 / -1; } .pf__kiinnsis { grid-template-columns: minmax(0, 1fr); } } /* ---------- jäsensivut: oma sivupalkki, ei foorumin yläotsikkoa ---------- */ .sos__ulos { margin-top: 10px; padding-left: 12px; color: var(--muted); } .sos__ulos:hover { color: #fff; } /* ---------- jäsenet: löytämiseen suunniteltu yhteisönäkymä ---------- */ [data-page="jasenet"] .wrap { width: min(1480px, calc(100% - 40px)); } .sos-head { min-height: 126px; overflow: hidden; isolation: isolate; background: radial-gradient(75% 180% at 85% -50%, rgb(var(--a1-rgb) / .3), transparent 68%), linear-gradient(135deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018)); } .sos-head::after { content: ""; position: absolute; z-index: -1; width: 280px; height: 280px; right: -100px; top: -150px; border: 1px solid rgb(var(--a1-rgb) / .22); border-radius: 50%; box-shadow: 0 0 0 38px rgb(var(--a1-rgb) / .035), 0 0 0 76px rgb(var(--a1-rgb) / .025); } .sos-head > div { position: relative; z-index: 1; min-width: 0; } .sos-head__eyebrow { display: block; margin-bottom: 5px; color: var(--a1); font-size: 10.5px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; } .sos-head__deco { position: absolute; right: 22px; bottom: -12px; color: rgba(255, 255, 255, .025); font-family: var(--f-display); font-size: clamp(62px, 8vw, 112px); font-weight: 900; letter-spacing: -.08em; line-height: 1; pointer-events: none; user-select: none; } [data-page="jasenet"] .forum__main > .f-bar { margin-top: -4px; } [data-page="jasenet"] .forum__main > .f-bar .seg { background: rgba(7, 9, 12, .72); box-shadow: 0 12px 36px -26px #000; } .ih__tyokalut { display: grid; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(150deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055); } .ih__tyokalurivi { display: grid; grid-template-columns: minmax(230px, 1fr) auto; align-items: center; gap: 12px; } .ih__tyokalut .ph__haku { min-width: 0; height: 46px; background: rgba(0, 0, 0, .25); } .ih__jarjestys { flex-wrap: nowrap; } .ih__jarjestys button { white-space: nowrap; } .ih__meta { display: flex; justify-content: space-between; gap: 12px; padding-inline: 4px; color: var(--dim); font-size: 11.5px; font-weight: 700; } .ih__meta > span { display: inline-flex; align-items: center; gap: 7px; } .ih__meta .live-dot { position: static; width: 7px; height: 7px; } [data-page="jasenet"] .ih__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } [data-page="jasenet"] .ih { min-height: 304px; display: flex; flex-direction: column; justify-items: stretch; gap: 0; padding: 0; text-align: left; background: linear-gradient(155deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)); border-color: rgba(255, 255, 255, .105); } [data-page="jasenet"] .ih::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); pointer-events: none; } [data-page="jasenet"] .ih:hover { transform: translateY(-6px); border-color: rgb(var(--a1-rgb) / .5); box-shadow: 0 30px 70px -38px rgb(var(--a1-rgb) / .7); } [data-page="jasenet"] .ih__kansi { width: 100%; height: 88px; margin: 0; flex: none; background-size: cover; background-position: center; } .ih__profiili { display: grid; gap: 8px; align-content: start; flex: 1; min-width: 0; padding: 0 18px 14px; } [data-page="jasenet"] .ih__av { position: relative; justify-self: start; width: 64px; height: 64px; margin-top: -34px; border: 4px solid #10151a; box-shadow: 0 8px 22px -8px #000; } [data-page="jasenet"] .ih__av .avatar { width: 56px; height: 56px; } .ih__tila { position: absolute; right: -1px; bottom: 1px; width: 14px; height: 14px; border: 3px solid #10151a; border-radius: 50%; background: #666a75; } .ih__tila.is-online { background: #23ce72; box-shadow: 0 0 12px rgba(35, 206, 114, .65); } [data-page="jasenet"] .ih__nimi { justify-content: flex-start; font-size: 16.5px; font-weight: 800; } [data-page="jasenet"] .ih__bio { min-height: 40px; font-size: 13px; line-height: 1.5; } .ih__ala { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 13px 18px 16px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .13); } [data-page="jasenet"] .ih__luvut { gap: 16px; } [data-page="jasenet"] .ih__luvut span { display: grid; gap: 1px; } [data-page="jasenet"] .ih__luvut b { font-size: 14px; } [data-page="jasenet"] .ih__luvut small { color: var(--dim); font-size: 10px; font-weight: 700; } [data-page="jasenet"] .ih__ala .btn { position: relative; z-index: 1; min-width: 86px; justify-content: center; } @media (min-width: 1280px) { [data-page="jasenet"] .forum__side { top: calc(var(--hdr) + 22px); } } @media (max-width: 1180px) { [data-page="jasenet"] .ih__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1023px) { [data-page="jasenet"] .wrap { width: min(100% - 30px, 900px); } [data-page="jasenet"] .forum { grid-template-columns: minmax(0, 1fr); } [data-page="jasenet"] .forum__side { order: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { [data-page="jasenet"] .wrap { width: min(100% - 20px, 620px); } .sos-head { min-height: 112px; padding: 17px; } .sos-head__deco { display: none; } .ih__tyokalurivi { grid-template-columns: minmax(0, 1fr); } .ih__jarjestys { width: 100%; overflow-x: auto; scrollbar-width: none; } .ih__jarjestys button { flex: 1 0 auto; justify-content: center; } [data-page="jasenet"] .ih__lista { grid-template-columns: minmax(0, 1fr); } [data-page="jasenet"] .forum__side { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 420px) { .sos-head .f-head__ic { display: none; } .ih__ala { grid-template-columns: minmax(0, 1fr); } [data-page="jasenet"] .ih__ala .btn { width: 100%; } } /* ---------- profiili: yhteydet ja kiinnostukset avautuvat sivupaneeliin ---------- */ .pf__tietoa .f-profile__status b, .pf__tietoa .f-profile__bio b { color: #fff; } .pf__lisaa { display: grid; grid-template-columns: auto minmax(0, 1fr) 18px; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .035); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; } .pf__tietoa > .pf__lisaa:first-child { margin-top: 0; } .pf__lisaa:hover { border-color: var(--p1); background: rgba(255, 255, 255, .06); } .pf__lisaa b { display: block; font-size: 14.5px; } .pf__lisaa small { display: block; font-size: 12.5px; color: var(--muted); } .pf__lisaaic { display: flex; } .pf__lisaaic:empty { display: none; } .pf__lisaaic i { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -8px; border-radius: 50%; background: #1d1d23; border: 2px solid #121216; overflow: hidden; } .pf__lisaaic i:first-child { margin-left: 0; } .pf__lisaaic img { width: 20px; height: 20px; object-fit: contain; } .pf__lisaaic svg { width: 14px; height: 14px; } .pf__lisaa em { color: var(--muted); display: grid; } .pf__lisaa em svg { width: 18px; height: 18px; } .sp { position: fixed; inset: 0; z-index: 320; background: rgba(4, 4, 6, 0); visibility: hidden; transition: background .3s, visibility .3s; } .sp.is-open { background: rgba(4, 4, 6, .62); visibility: visible; } .sp__paneeli { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); display: grid; grid-template-rows: auto minmax(0, 1fr); background: linear-gradient(180deg, #18181d, #0e0e12); border-left: 1px solid var(--line-2); box-shadow: -40px 0 100px -30px #000; transform: translateX(100%); transition: transform .35s var(--ease); } .sp.is-open .sp__paneeli { transform: none; } .sp__paa { display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); } .sp__paa .avatar { width: 44px; height: 44px; } .sp__paa b { display: block; font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sp__paa small { color: var(--muted); font-size: 13px; } .sp__sulje { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; } .sp__sulje svg { width: 15px; height: 15px; } .sp__sis { overflow-y: auto; padding: 18px 20px 28px; display: grid; gap: 22px; align-content: start; overscroll-behavior: contain; } .sp__osio h3 { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .sp__osio .f-profile__games { margin: 0; } .sp__some { display: grid; gap: 6px; } .sm { display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: 12px; width: 100%; padding: 9px 12px 9px 9px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .035); color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease); } a.sm:hover, button.sm:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .07); transform: translateX(2px); } .sm__ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(0, 0, 0, .35); } .sm__ic img { width: 26px; height: 26px; object-fit: contain; } .sm__ic svg { width: 18px; height: 18px; } .sm__txt { min-width: 0; } .sm__txt small { display: block; font-size: 11.5px; color: var(--muted); } .sm__txt b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sm__ulos { color: var(--muted); display: grid; } .sm__ulos svg { width: 16px; height: 16px; } .sm--muokkaus { cursor: default; grid-template-columns: 38px minmax(0, 1fr) 28px; } .sm__pois { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; } .sm__pois svg { width: 10px; height: 10px; } .sp__tyhja { margin: 0; font-size: 14.5px; } /* asetukset: tyylirivit ja yhteyksien lisäys */ .as__kentta { display: grid; gap: 8px; } .as__kentta > span { font-size: 15px; font-weight: 700; } .ys__rivi { display: grid; grid-template-columns: auto 170px minmax(0, 1fr); gap: 8px; align-items: center; } .ys__rivi .btn { height: 50px; padding-inline: 16px; } .ys__rivi .btn svg { width: 15px; height: 15px; } .ys__rivi select.input { appearance: none; -webkit-appearance: none; padding-right: 30px; color: #fff; background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.500l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.800'/%3E%3C/svg%3E") no-repeat right 12px center / 11px; } .ys__rivi select.input option { background: #15151a; color: #fff; } .ys__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; } .ys__lista:empty { display: none; } @media (max-width: 640px) { .ys__rivi { grid-template-columns: auto minmax(0, 1fr); } .ys__rivi [data-ys-syote] { grid-column: 1 / -1; } } .pf__tietoa .f-profile__status b { font-weight: 900; } .pf__tietoa .f-profile__status { font-weight: 500; } /* ---------- profiilin tiedot oikeassa reunassa ---------- */ .sv { display: grid; gap: 16px; } .sv .f-box__head h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .sv .sp__osio h4 { margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .sv .sm { padding: 7px 10px 7px 7px; grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 10px; } .sv .sm__ic { width: 34px; height: 34px; } .sv .sm__ic img { width: 22px; height: 22px; } .sv .sp__tyhja { font-size: 14px; } /* ---------- profiili: esittely vasemmalla, oikealla kolikot ja niiden alla viestit ja puhetunnit ---------- */ .pf__sisus { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: stretch; } .pf__laatat { order: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; } .pf__laatta:first-child { grid-column: 1 / -1; } .pf__laatta:first-child b { font-size: 28px; } .pf__tietoa { min-height: 100%; box-sizing: border-box; } @media (max-width: 900px) { .pf__sisus { grid-template-columns: minmax(0, 1fr); } .pf__laatat { order: -1; } } /* ---------- profiilin välilehdet koko kortin levyisinä ---------- */ .pf__bar { display: block; } .pf__bar .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; } .pf__bar .seg button { justify-content: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 8px; } @media (max-width: 560px) { .pf__bar .seg { display: flex; overflow-x: auto; scrollbar-width: none; } .pf__bar .seg button { flex: none; padding-inline: 14px; overflow: visible; } } /* ---------- suora lähetys: Twitch-violetti hohto profiilin ympärillä ja soitin kortin alla ---------- */ .pf--live { border-color: #9146ff; box-shadow: 0 0 0 1px #9146ff, 0 0 46px -4px rgba(145, 70, 255, .75), 0 0 120px -20px rgba(145, 70, 255, .6); animation: st-hehku 2.800s ease-in-out infinite alternate; } @keyframes st-hehku { from { box-shadow: 0 0 0 1px #9146ff, 0 0 30px -6px rgba(145, 70, 255, .6), 0 0 90px -30px rgba(145, 70, 255, .45); } to { box-shadow: 0 0 0 1px #a970ff, 0 0 56px -2px rgba(145, 70, 255, .9), 0 0 140px -16px rgba(145, 70, 255, .7); } } .pf--live .pf__kuva .f-profile__av { border-color: #9146ff; box-shadow: 0 0 0 3px #15151a, 0 0 0 6px #9146ff, 0 0 34px rgba(145, 70, 255, .8); } .pf__live { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); z-index: 2; padding: 3px 10px; border-radius: 7px; background: #9146ff; border: 3px solid #15151a; color: #fff; font-size: 11.5px; font-weight: 900; letter-spacing: .08em; } .pf--live .pf__piste { display: none; } .st { margin-top: 14px; border-radius: var(--r-xl); border: 1px solid #9146ff; background: linear-gradient(180deg, #1a1326, #0f0c16); overflow: hidden; box-shadow: 0 0 60px -18px rgba(145, 70, 255, .8); } .st__paa { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 18px; } .st__merkki { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #9146ff; color: #fff; } .st__merkki svg { width: 22px; height: 22px; } .st__paa b { display: flex; align-items: center; gap: 9px; font-size: 16px; min-width: 0; } .st__paa small { color: #bfa3ff; font-size: 13px; } .st__live { flex: none; padding: 2px 8px; border-radius: 6px; background: #eb0400; font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: .08em; animation: st-vilkku 1.600s ease-in-out infinite; } @keyframes st-vilkku { 50% { opacity: .55; } } .st__nappi { background: #9146ff; color: #fff; border: 0; } .st__nappi:hover { background: #a970ff; } .st__ruutu { position: relative; aspect-ratio: 16 / 9; background: #000; } .st__ruutu iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .st__suostumus { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; } .st__suostumus small { max-width: 46ch; font-size: 12.5px; line-height: 1.45; color: #cbbdf0; } .st__suostumus a { color: inherit; text-decoration: underline; } .pf--live + .pf__bar, .pf--live ~ .pf__bar { margin-top: 14px; } @media (prefers-reduced-motion: reduce) { .pf--live, .st__live { animation: none; } } @media (max-width: 560px) { .st__paa { grid-template-columns: 42px minmax(0, 1fr); } .st__nappi { grid-column: 1 / -1; justify-content: center; } } /* ---------- striimaavan jäsenen profiilikuva: Twitch-violetti kehä kaikkialla ---------- */ .av-w--live .avatar { box-shadow: 0 0 0 2px #121216, 0 0 0 4px #9146ff, 0 0 14px 2px rgba(145, 70, 255, .75); animation: av-live 2.4s ease-in-out infinite alternate; } @keyframes av-live { from { box-shadow: 0 0 0 2px #121216, 0 0 0 4px #9146ff, 0 0 8px 1px rgba(145, 70, 255, .5); } to { box-shadow: 0 0 0 2px #121216, 0 0 0 4px #a970ff, 0 0 18px 3px rgba(145, 70, 255, .9); } } .top__user--live img, .top__user--live .f-av { box-shadow: 0 0 0 2px #121216, 0 0 0 4px #9146ff, 0 0 14px 2px rgba(145, 70, 255, .8); animation: av-live 2.4s ease-in-out infinite alternate; } .top__user--live { border-color: rgba(145, 70, 255, .7); } @media (prefers-reduced-motion: reduce) { .av-w--live .avatar, .top__user--live img { animation: none; } } .av-w--live .av-p { display: none; } .pf:not(.pf--live) .pf__piste { display: block; } /* jäsenkortin kansi: oma bannerikuva, jos sellainen on */ .ih__kansi--kuva { background-size: cover !important; background-position: center !important; } /* ---------- banneri aina suhteessa 3:1, jotta 1500 × 500 kuva sopii täsmälleen ---------- */ .pf__kansi { height: auto; aspect-ratio: 3 / 1; min-height: 130px; max-height: 280px; } .as .pb__esi, .as__lomake .pb__esi { height: auto; aspect-ratio: 3 / 1; } .bm { gap: 14px; } .bm__alue { position: relative; aspect-ratio: 3 / 1; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #000; cursor: grab; touch-action: none; } .bm__alue.is-veto { cursor: grabbing; } .bm__alue canvas { display: block; width: 100%; height: 100%; } .bm__alue::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(14, 14, 18, .5) 80%, rgba(21, 21, 26, .95)); pointer-events: none; } .bm__av { position: absolute; left: 4.5%; bottom: -14%; width: 18%; aspect-ratio: 1; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .55); z-index: 1; pointer-events: none; } .bm__liuku { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 14px; font-weight: 700; } .bm__liuku input { width: 100%; accent-color: var(--a1); } .bm .f-compose__foot > span:first-child { margin-left: 0; } /* ---------- asetukset osioina ---------- */ .f-boards button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: var(--text-2); font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; transition: background .2s, color .2s; } .f-boards button:hover { background: rgba(255, 255, 255, .05); color: #fff; } .f-boards button[aria-current="page"] { background: rgb(var(--a1-rgb) / .16); color: #fff; } .f-boards button[aria-current="page"] .f-boards__ic { background: var(--a1); color: #fff; } .as [hidden], [data-as-teema][hidden], [data-as-tili][hidden], [data-as-lomake][hidden] { display: none !important; } .as__kuva { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); } .as__kuva .avatar { width: 72px; height: 72px; font-size: 28px; } .as__kuva b { display: block; font-size: 16px; margin-bottom: 3px; } .as__kuva small { display: block; font-size: 13.5px; line-height: 1.45; } .as--tili { margin-top: 0; } /* kapealla näytöllä osiot valitaan sivun yläreunan vierivästä rivistä */ .as__mobi { display: none; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; padding-bottom: 2px; } .as__mobi::-webkit-scrollbar { display: none; } .as__mobi button { flex: none; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text-2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .as__mobi button[aria-current="page"] { background: #fff; color: #000; border-color: #fff; } @media (max-width: 1023px) { .as__mobi { display: flex; } } /* ---------- asetukset: osiot allekkain omina laatikoinaan ---------- */ .as[data-as-lomake] { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; background: none; } .forum__main:has(> [data-as-lomake]) { row-gap: 16px; } .as__lomake { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .as__osio { display: grid; gap: 16px; margin-bottom: 0; scroll-margin-top: 84px; } .as__lomake .as__osio { margin-bottom: 0; } .as__paa { padding-bottom: 12px; border-bottom: 1px solid var(--line); } .as__paa h2 { margin: 0 0 3px; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 22px; } .as__paa p { margin: 0; font-size: 14px; } .as__osio .f-themes { margin: 0; } .as__osio .f-custom { margin: 0; background: rgba(0, 0, 0, .22); } .as__lomake > .f-compose__foot { position: sticky; bottom: 12px; z-index: 5; padding: 10px 12px; border-radius: 16px; background: rgba(16, 16, 20, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line-2); margin-bottom: 16px; } .as__mobi { position: sticky; top: calc(var(--hdr) + 6px); z-index: 6; padding: 6px; border-radius: 999px; background: rgba(16, 16, 20, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } @media (max-width: 1023px) { .as__lomake > .f-compose__foot { bottom: 84px; } } /* tilin nollaus: selvästi erillään muista tilin toiminnoista */ .as__vaara { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 6px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(255, 70, 70, .4); background: rgba(255, 60, 60, .06); } .as__vaara b { display: block; font-size: 15.5px; margin-bottom: 4px; } .as__vaara p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); } @media (max-width: 640px) { .as__vaara { grid-template-columns: minmax(0, 1fr); } } /* Jäsenet: henkilökohtaiset kansikortit ja selkeä läsnäolo. */ [data-kansityyli="aamu"] { --kansi: radial-gradient(ellipse at 80% 15%, #ffd5a5, transparent 60%), linear-gradient(145deg, #482a52, #d66d58); } [data-kansityyli="yo"] { --kansi: radial-gradient(ellipse at 80% 10%, #6165b3, transparent 60%), linear-gradient(145deg, #11162d, #252650); } [data-kansityyli="metsa"] { --kansi: radial-gradient(ellipse at 85% 0%, #70bca0, transparent 65%), linear-gradient(145deg, #102e2b, #295348); } [data-kansityyli="meri"] { --kansi: radial-gradient(ellipse at 80% 10%, #83c9ef, transparent 60%), linear-gradient(145deg, #153047, #306390); } [data-kansityyli="laava"] { --kansi: radial-gradient(ellipse at 85% 0%, #f6a467, transparent 65%), linear-gradient(145deg, #431e26, #a24a38); } [data-kansityyli="hattara"] { --kansi: radial-gradient(ellipse at 80% 5%, #e9bcdf, transparent 60%), linear-gradient(145deg, #3a3159, #8565a7); } [data-kansityyli="kulta"] { --kansi: radial-gradient(ellipse at 85% 5%, #dcc69b, transparent 65%), linear-gradient(145deg, #382e20, #79623c); } [data-kansityyli="teras"] { --kansi: radial-gradient(ellipse at 85% 5%, #a2b5c6, transparent 65%), linear-gradient(145deg, #242f3d, #506075); } [data-page="jasenet"] .ih__lista { grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); gap: 22px; } [data-page="jasenet"] .ih { min-height: 370px; border-radius: 24px; isolation: isolate; border: 1px solid rgba(255,255,255,.11); background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--p1) 9%, transparent), transparent 70%), #101418; box-shadow: 0 18px 50px -28px #000; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } [data-page="jasenet"] .ih:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--p1) 48%, transparent); box-shadow: 0 28px 65px -32px color-mix(in srgb, var(--p1) 28%, #000); } [data-page="jasenet"] .ih__kansi { position: relative; height: 138px; border-radius: 0; background: var(--kansi, radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--p3) 58%, transparent), transparent 65%), linear-gradient(135deg, color-mix(in srgb, var(--p1) 24%, #131922), var(--p2))); background-size: cover; background-position: center; overflow: hidden; } [data-page="jasenet"] .ih__kansi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 45%, rgba(16,20,24,.72)); pointer-events: none; } .ih__kansimerkki { position: absolute; right: 16px; top: 16px; z-index: 1; font-size: 9px; font-weight: 750; letter-spacing: .15em; color: #fff; padding: 6px 9px; border-radius: 7px; background: rgba(0,0,0,.3); backdrop-filter: blur(12px); } [data-page="jasenet"] .ih__profiili { display: flex; flex-direction: column; gap: 12px; padding: 0 22px 22px; } .ih__identiteetti { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; position: relative; min-height: 46px; margin-bottom: 4px; } [data-page="jasenet"] .ih__av { width: 80px; height: 80px; margin-top: -42px; border: 0; box-shadow: 0 8px 24px rgba(0,0,0,.25); } [data-page="jasenet"] .ih__av .avatar { width: 80px; height: 80px; object-fit: cover; } [data-page="jasenet"] .ih__av .av-w { width: 80px; height: 80px; } .ih__lasna { padding-bottom: 3px; font-size: 11px; font-weight: 650; color: #9aa7b4; white-space: nowrap; } .ih__lasna.is-online { color: #72e6a7; } [data-page="jasenet"] .ih__nimi { display: block; min-height: 0; text-align: left; font-size: 21px; line-height: 1.2; letter-spacing: -.025em; } [data-page="jasenet"] .ih__nimi .f-kuka { align-items: flex-start; gap: 9px; } [data-page="jasenet"] .ih__nimi .f-badget, [data-page="jasenet"] .ih__nimi .f-kuka .f-badget { justify-content: flex-start; min-height: 0; font-size: 17px; } [data-page="jasenet"] .ih__bio { margin: 0; min-height: 44px; font-size: 13.5px; line-height: 1.65; color: #c2cbd4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-page="jasenet"] .ih__bio--tyhja { color: #8b99a6; } [data-page="jasenet"] .ih__ala { padding: 17px 22px; background: rgba(255,255,255,.025); border-top-color: rgba(255,255,255,.07); } [data-page="jasenet"] .ih__luvut { gap: 18px; } [data-page="jasenet"] .ih__luvut b { font-size: 17px; font-family: var(--f-body); } [data-page="jasenet"] .ih__luvut small { font-size: 10px; color: #9aa7b4; font-weight: 500; } [data-page="jasenet"] .ih__ala .btn { min-width: 96px; min-height: 34px; font-size: 11px; } /* Yksi piste kuvan kulmassa; ei kaksoispistettä eikä tummaa reunusta. */ .ih__av .av-p { right: 3px; bottom: 3px; width: 14px; height: 14px; min-width: 14px; min-height: 14px; border: 0; box-shadow: none; } .ih__av .av-w--live .av-p { display: block; } .pf__piste { right: 7px; bottom: 7px; width: 21px; height: 21px; border: 0; box-shadow: none; z-index: 3; } .pf--live .pf__piste { display: block; } .pf { border-radius: 28px; background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--p1) 10%, transparent), transparent 70%), #101418; border-color: color-mix(in srgb, var(--p1) 22%, rgba(255,255,255,.08)); box-shadow: 0 30px 80px -48px #000; } .pf__kansi { height: auto; aspect-ratio: 3 / 1; min-height: 0; max-height: none; } .pf__kansi:not(.pf__kansi--kuva) { background: var(--kansi, radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--p3) 70%, transparent), transparent 65%), linear-gradient(140deg, color-mix(in srgb, var(--p1) 30%, #131922), var(--p2))); } .pf__kansi::after { background: linear-gradient(180deg, transparent 40%, rgba(16,20,24,.4) 75%, #101418); } .pf__kuva .f-profile__av { border: 0; padding: 0; box-shadow: 0 12px 32px rgba(0,0,0,.28); } .pf__runko { padding-bottom: 30px; } .pf__yla { gap: 20px; margin-top: -62px; align-items: end; } .pf__nimi { padding-bottom: 4px; } .pf .f-profile__name { font-size: clamp(28px, 3.5vw, 44px); letter-spacing: -.035em; } .pf__tietoa, .pf__laatta { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.08); } .pf__sisus { margin-top: 28px; gap: 20px; } .as__kansivalinta { display: grid; gap: 9px; margin: 16px 0; font-size: 13px; font-weight: 650; } .pb__esi[data-kansityyli] { height: 142px; background: var(--kansi, linear-gradient(135deg,var(--p1,var(--a1)),var(--p2,var(--a2)))); background-size: cover; background-position: center; } @media (max-width: 560px) { .pf__yla { margin-top: -48px; gap: 15px; } .pf__piste { width: 18px; height: 18px; right: 5px; bottom: 5px; } [data-page="jasenet"] .ih__lista { grid-template-columns: minmax(0,1fr); } } @media (prefers-reduced-motion: reduce) { [data-page="jasenet"] .ih { transition: none; } [data-page="jasenet"] .ih:hover { transform: none; } } /* Sama 3:1-kuva kaikissa näkymissä: leveys määrittää korkeuden. */ [data-page="jasenet"] .ih__kansi, .pb__esi[data-kansityyli] { height: auto; aspect-ratio: 3 / 1; min-height: 0; max-height: none; background-size: cover; background-position: center; } [data-page="jasenet"] .ih__kansi--kuva::after, .pf__kansi--kuva::after { background: none; } [data-page="jasenet"] .ih { min-height: 330px; } [data-page="jasenet"] .ih__profiili { gap: 14px; } .ih__identiteetti { justify-content: flex-start; } .ih__av .av-p.is-on, .pf__piste.is-on { background: #3be08a !important; box-shadow: 0 0 5px rgba(59,224,138,.4), 0 0 13px rgba(59,224,138,.22); animation: jasenOnline 4s ease-in-out infinite; } @keyframes jasenOnline { 0%, 100% { box-shadow: 0 0 4px rgba(59,224,138,.35), 0 0 10px rgba(59,224,138,.18); } 50% { box-shadow: 0 0 7px rgba(59,224,138,.6), 0 0 19px rgba(59,224,138,.3); } } @media (prefers-reduced-motion: reduce) { .ih__av .av-p.is-on, .pf__piste.is-on { animation: none; } } /* Tekstin oletus on tavallinen; vain kirjoitettu Markdown muuttaa tyyliä. */ .pf__tietoa .f-profile__status { font-family: var(--f-body); font-style: normal; font-weight: 400; font-size: 15px; padding-left: 0; border-left: 0; line-height: 1.6; } [data-page="jasenet"] .ih__nimi .f-kuka { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 9px; } [data-page="jasenet"] .ih__nimi .f-badget, [data-page="jasenet"] .ih__nimi .f-kuka .f-badget { flex-shrink: 0; } .ih__status { font-size: 13.5px; line-height: 1.6; color: #e0e7ed; overflow-wrap: anywhere; } [data-page="jasenet"] .ih__bio { display: block; -webkit-line-clamp: unset; min-height: 0; max-height: 9.9em; overflow: auto; overflow-wrap: anywhere; } .ih__bio:empty { display: none !important; } .ih__status .f-quote, .ih__bio .f-quote, .f-profile__status .f-quote { display: block; border-left: 3px solid var(--p1,var(--a1)); padding: 2px 0 2px 11px; font-style: normal; } .f-code { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; padding: 12px; border-radius: 9px; background: rgba(0,0,0,.22); text-align: left; } .ih__av .av-p.is-on, .pf__piste.is-on { background: radial-gradient(circle at 42% 38%, #9cf5be 0%, #49e891 35%, #2bd37b 70%, #24c572 100%) !important; animation: jasenOnline 4.5s ease-in-out infinite; } @keyframes jasenOnline { 0%, 100% { box-shadow: 0 0 5px 1px rgba(59,224,138,.5), 0 0 13px 3px rgba(59,224,138,.24); } 50% { box-shadow: 0 0 9px 2px rgba(59,224,138,.7), 0 0 23px 6px rgba(59,224,138,.34); } } @media (prefers-reduced-motion: reduce) { .ih__av .av-p.is-on, .pf__piste.is-on { animation: none; } } /* Discord-tyyliset lohkot ovat span-elementtejä: toimivat myös vanhoissa p-kentissä. */ .md-heading { display: block; color: inherit; font-family: var(--f-body); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; margin: .35em 0 .2em; overflow-wrap: anywhere; } .md-heading--1 { font-size: 1.65em; } .md-heading--2 { font-size: 1.4em; } .md-heading--3 { font-size: 1.18em; } .md-heading:first-child { margin-top: 0; } .md-subtext { display: block; font-size: .8em; color: var(--muted); line-height: 1.5; } .md-list { display: block; margin: .3em 0; padding-left: 1em; text-align: left; } .md-list-item { display: flex; align-items: baseline; gap: .6em; margin: .15em 0; } .md-list-item > span:last-child { min-width: 0; } .md-list-marker { min-width: 1em; flex-shrink: 0; } .md-list .md-list { padding-left: 1em; } .md-code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; background: rgba(0,0,0,.24); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; margin: .5em 0; font-size: .9em; text-align: left; } .md-code code { background: none; padding: 0; color: inherit; white-space: inherit; font-family: var(--f-mono); } .md-inline-code { white-space: pre-wrap; } .f-quote { display: block; padding: 3px 0 3px 12px; border-left: 3px solid var(--p1,var(--a1)); font-style: normal; } .mt { flex-wrap: wrap; } /* Markdown-alleviivaus: hieman vahvempi viiva myös otsikoissa. */ u { text-decoration-thickness: 3px; text-underline-offset: .16em; text-decoration-skip-ink: none; } /* Kirjoittajan muotoiluopas. */ .md-ohje__kokeilu, .md-ohje__esimerkki { border: 1px solid var(--line-2); border-radius: 18px; background: rgba(255,255,255,.035); padding: 22px; } .md-ohje__kokeilu { margin-bottom: 20px; } .md-ohje__kokeilu h2, .md-ohje__esimerkki h2 { font-size: 18px; margin: 0 0 15px; } .md-ohje__kokeilu > p { margin-bottom: 18px; font-size: 13px; } .md-ohje__pari { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; } .md-ohje__pari > *, .md-ohje__pari label { min-width: 0; } .md-ohje__label, .md-ohje__pari label > span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; margin-bottom: 9px; } .md-ohje__lahde, .md-ohje__tulos { margin: 0; padding: 15px; border-radius: 12px; background: rgba(0,0,0,.24); overflow-wrap: anywhere; min-height: 64px; } .md-ohje__lahde { white-space: pre-wrap; font-size: 12px; line-height: 1.7; } .md-ohje__lahde code { background: none; padding: 0; color: var(--text-2); } .md-ohje__tulos { font-size: 14px; line-height: 1.65; } .md-ohje__pari textarea { width: 100%; resize: vertical; font-family: var(--f-mono); font-size: 12px; } .md-ohje__lista { display: grid; gap: 16px; } .md-ohje__vinkki { border-left: 3px solid var(--a1); padding: 8px 15px; margin: 22px 0; color: var(--text-2); font-size: 13px; line-height: 1.7; } @media (max-width: 680px) { .md-ohje__pari { grid-template-columns: minmax(0,1fr); gap: 16px; } .md-ohje__kokeilu, .md-ohje__esimerkki { padding: 17px; } } /* Tiivis muotoilun pikaopas. */ .md-ohje__lista { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; } .md-ohje__esimerkki { padding: 12px 14px; border-radius: 12px; } .md-ohje__esimerkki h2 { font-size: 12px; margin: 0 0 8px; } .md-ohje__esimerkki .md-ohje__pari { gap: 10px; } .md-ohje__esimerkki .md-ohje__label { font-size: 9px; margin-bottom: 4px; } .md-ohje__esimerkki .md-ohje__lahde, .md-ohje__esimerkki .md-ohje__tulos { min-height: 0; padding: 7px 9px; border-radius: 7px; font-size: 11px; line-height: 1.45; } .md-ohje__esimerkki .md-heading { margin: 0; } .md-ohje__esimerkki .md-list, .md-ohje__esimerkki .md-code { margin: 0; } .md-ohje__esimerkki .md-code { padding: 6px; } .md-ohje__vinkki { font-size: 12px; margin: 12px 0; padding: 4px 12px; } .md-ohje__kokeilu { padding: 12px 16px; margin-bottom: 12px; border-radius: 12px; } .md-ohje__kokeilu summary { cursor: pointer; font-size: 13px; font-weight: 700; } .md-ohje__kokeilu[open] summary { margin-bottom: 14px; } @media (max-width: 1100px) { .md-ohje__lista { grid-template-columns: minmax(0,1fr); } } @media (max-width: 680px) { .md-ohje__esimerkki .md-ohje__pari { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } } /* Yksi yhtenäinen taulukko, ei erillisiä esimerkkikortteja. */ .md-ohje__taulukko { overflow-x: auto; } .md-ohje__taulukko table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; line-height: 1.4; } .md-ohje__taulukko th, .md-ohje__taulukko td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; } .md-ohje__taulukko thead th { font-size: 11px; color: var(--muted); padding-bottom: 9px; } .md-ohje__taulukko th:first-child { width: 25%; } .md-ohje__taulukko tbody th { font-weight: 600; color: var(--text-2); } .md-ohje__merkinta { display: block; white-space: pre-wrap; font-size: 11px; background: none; padding: 0; color: var(--text-2); } .md-ohje__taulukko .md-heading, .md-ohje__taulukko .md-list, .md-ohje__taulukko .md-code { margin: 0; } .md-ohje__taulukko .md-code { padding: 4px 7px; } .md-ohje__taulukko .f-quote { padding-top: 0; padding-bottom: 0; } /* Ryhmitellyt rivit: pienemmät otsikot ja kapeampi nimisarake. */ .md-ohje__taulukko table { font-size: 13px; line-height: 1.5; } .md-ohje__taulukko th:first-child { width: 24%; } .md-ohje__taulukko th, .md-ohje__taulukko td { padding: 8px 12px; vertical-align: middle; } .md-ohje__merkinta { font-size: 12px; } .md-ohje__taulukko .md-heading { line-height: 1.15; } .md-ohje__taulukko .md-heading--1 { font-size: 1.3em; } .md-ohje__taulukko .md-heading--2 { font-size: 1.15em; } .md-ohje__taulukko .md-heading--3 { font-size: 1.05em; } .md-ohje__taulukko .md-code { padding: 2px 6px; border-radius: 6px; } .md-ohje__taulukko .md-list { padding-left: .9em; } @media (max-width: 560px) { .md-ohje__taulukko table { font-size: 11px; } .md-ohje__taulukko th, .md-ohje__taulukko td { padding: 5px; } .md-ohje__merkinta { font-size: 10px; } } /* ---------- Jäsenet: tiiviit jäsenrivit isojen korttien tilalla ---------- */ .jr__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .jr { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av teksti nappi" "av luvut nappi"; align-items: center; column-gap: 15px; row-gap: 5px; min-height: 92px; padding: 14px 18px 14px 16px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(100deg, color-mix(in srgb, var(--p1) 13%, #11151a), #0f1317 58%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 40px -30px #000; transition: transform .25s var(--ease), border-color .25s, box-shadow .3s; pointer-events: none; } .jr::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--p3), var(--p1)); box-shadow: 0 0 16px 1px color-mix(in srgb, var(--p1) 70%, transparent); z-index: 1; } .jr:hover, .jr:focus-within { transform: translateY(-2px); border-color: color-mix(in srgb, var(--p1) 55%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 50px -28px color-mix(in srgb, var(--p1) 55%, #000); } /* Banneri häivytettynä rivin oikeaan reunaan; koko rivi toimii linkkinä profiiliin. */ .jr__tausta { position: absolute; inset: 0; z-index: -1; pointer-events: auto; border-radius: inherit; } .jr__tausta::before { content: ""; position: absolute; inset: 0 0 0 38%; background: var(--kansi, radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--p3) 55%, transparent), transparent 65%), linear-gradient(135deg, color-mix(in srgb, var(--p1) 30%, #131922), var(--p2))); background-size: cover; background-position: center; opacity: .5; -webkit-mask-image: linear-gradient(90deg, transparent, #000 75%); mask-image: linear-gradient(90deg, transparent, #000 75%); transition: opacity .3s; } .jr__tausta--kuva::before { background-image: var(--kuva); opacity: .62; } .jr:hover .jr__tausta::before { opacity: .85; } .jr__tausta:focus-visible { outline: 2px solid var(--p1); outline-offset: -2px; } .jr__av { grid-area: av; pointer-events: auto; line-height: 0; border-radius: 50%; padding: 3px; background: linear-gradient(140deg, var(--p3), var(--p1) 55%, var(--p2)); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--p1) 80%, #000); } .jr__av .av-w { display: block; } .jr__av .avatar { width: 58px; height: 58px; border: 3px solid #10141a; box-sizing: border-box; } .jr__av .av-p { right: 1px; bottom: 1px; width: 15px; height: 15px; max-width: none; max-height: none; border: 3px solid #10141a; } .jr__av .av-p.is-on { background: radial-gradient(circle at 42% 38%, #9cf5be 0%, #49e891 35%, #2bd37b 70%, #24c572 100%) !important; box-shadow: 0 0 10px rgba(59,224,138,.55); } .jr__teksti { grid-area: teksti; min-width: 0; align-self: end; display: grid; gap: 2px; } .jr__nimi { min-width: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; } .jr__nimi a, .jr__nimi button { pointer-events: auto; } .jr__nimi .f-kuka { max-width: 100%; flex-wrap: nowrap; gap: 7px; } .jr__nimi .f-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jr__nimi .f-badget { flex-shrink: 0; font-size: 15px; } /* Tila yhdellä rivillä: otsikot, lainaukset ja listat näytetään tavallisena tekstinä. */ .jr__tila { min-width: 0; font-size: 12.5px; line-height: 1.45; color: #c5ced7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jr__tila--tyhja { color: #7f8c99; font-style: italic; } .jr__tila * { display: inline !important; font-size: inherit !important; font-weight: inherit; line-height: inherit; letter-spacing: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; white-space: nowrap !important; text-decoration-thickness: 1px; } .jr__tila br { display: none !important; } .jr__tila .md-list-marker { display: none !important; } .jr__tila .md-code, .jr__tila .f-quote { background: none !important; } .jr__tila .spo-t { padding: 0 3px !important; } .jr__tila a { pointer-events: none; color: inherit; } .jr__luvut { grid-area: luvut; align-self: start; display: flex; gap: 12px; min-width: 0; font-size: 11px; color: #8f9ca9; white-space: nowrap; } .jr__luvut b { color: #fff; font-weight: 700; } .jr__nappi { grid-area: nappi; pointer-events: auto; min-width: 92px; min-height: 34px; justify-content: center; font-size: 11px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .jr__nappi.btn--line { background: rgba(10,13,17,.55); } .jr__nappi svg { width: 14px; height: 14px; } @media (max-width: 1180px) { .jr__lista { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 480px) { .jr { column-gap: 12px; padding: 12px 13px 12px 14px; min-height: 80px; } .jr__av .avatar { width: 48px; height: 48px; } .jr__nimi { font-size: 15.5px; } .jr__nappi { min-width: 0; padding-inline: 12px; } .jr__luvut span:last-child { display: none; } } @media (prefers-reduced-motion: reduce) { .jr { transition: none; } .jr:hover, .jr:focus-within { transform: none; } } /* Profiilin asetukset: pieni bannerin esikatselu profiilikuvan tekstin vieressä. */ .as__kuva { grid-template-columns: auto minmax(0, 1fr) auto; } .as__banneri { display: grid; gap: 6px; width: clamp(180px, 24vw, 270px); } .as__banneri > span { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .as__banneri .pb__esi { width: 100%; border-radius: 10px; } @media (max-width: 760px) { .as__kuva { grid-template-columns: auto minmax(0, 1fr); } .as__banneri { grid-column: 1 / -1; width: min(100%, 330px); } } /* Rajaimen profiilikuvamerkki samassa kohdassa kuin ladattavassa mallipohjassa. */ .bm__av { left: 3%; width: 14%; bottom: -22%; } /* Bannerin vaihtonappi esikatselukuvan oikeassa alakulmassa. */ .as__vaihda { position: absolute; right: 6px; bottom: 6px; z-index: 1; min-height: 26px; padding: 0 10px; gap: 5px; font-size: 11px; color: #fff; background: rgba(8, 10, 14, .72); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .as__vaihda:hover { background: rgba(8, 10, 14, .9); border-color: rgba(255, 255, 255, .45); } .as__vaihda svg { width: 12px; height: 12px; } /* Bannerin omat liukuvärit: kaksi värivalitsinta, näkyvissä vain ilman bannerikuvaa. */ .as__varit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .as__varit[hidden] { display: none; } .as__varit > span { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .as__varit label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; } .as__varit input[type="color"] { width: 42px; height: 30px; padding: 2px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .3); cursor: pointer; } /* Profiilin asetukset: tiiviit teemalaatat ja oma teema yhdellä rivillä. */ .as__osio .f-themes { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; } .as__osio .f-theme { border-radius: 14px; } .as__osio .f-theme:hover { transform: translateY(-2px); } .as__osio .f-theme__art { height: 44px; } .as__osio .f-theme__art i { filter: blur(16px); } .as__osio .f-theme__art i:nth-child(1) { width: 80px; height: 80px; top: -44px; } .as__osio .f-theme__art i:nth-child(2) { width: 70px; height: 70px; bottom: -48px; } .as__osio .f-theme__art i:nth-child(3) { width: 34px; height: 34px; top: 4px; } .as__osio .f-theme__art span { font-size: 20px; } .as__osio .f-theme__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 9px 10px 10px; } .as__osio .f-theme__body b { font-size: 13.5px; } .as__osio .f-theme__body .dim, .as__osio .f-theme__body .price { font-size: 11px; } .as__osio .f-theme__body .f-theme__btns { flex-basis: 100%; flex-wrap: nowrap; gap: 4px; margin-top: 5px; } .as__osio .f-theme__body .f-theme__btns .btn { flex: 1 1 auto; min-width: 0; min-height: 0; height: 28px; padding: 0 7px; font-size: 10.5px; justify-content: center; white-space: nowrap; } .as__osio .f-theme__body .f-theme__btns .btn svg { width: 11px; height: 11px; } .as__osio .f-custom--tiivis { padding: 11px 14px; border-radius: 14px; } .f-custom--tiivis > summary, .f-custom--osto { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; } .f-custom--tiivis > summary { cursor: pointer; } .f-custom--tiivis[open] > summary { margin-bottom: 12px; } .f-custom--tiivis b { font-size: 14px; } .f-custom--tiivis .dim { font-size: 12px; } .f-custom--osto > div:first-child { flex: 1 1 220px; display: grid; gap: 2px; } .as__teemapalautus { margin-top: 0; justify-content: flex-end; } /* Bannerin värit: sivuston oma värivalitsin selaimen oletusvalitsimen tilalla. */ .as__varit { display: grid; gap: 10px; } .bv__napit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .bv__nappi { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 15px 0 7px; border-radius: 999px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color .2s, background .2s, transform .25s var(--ease); } .bv__nappi:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--v) 60%, transparent); } .bv__nappi i { width: 28px; height: 28px; border-radius: 50%; background: var(--v); border: 2px solid rgba(255, 255, 255, .26); box-shadow: 0 6px 16px -6px var(--v); } .bv__nappi code { font-family: var(--f-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; background: none; padding: 0; } .bv__nappi[aria-expanded="true"] { color: #fff; border-color: var(--v); background: color-mix(in srgb, var(--v) 14%, rgba(0, 0, 0, .3)); box-shadow: 0 0 0 1px var(--v); } .bv__paneeli { max-width: 560px; } .bv__paneeli[hidden] { display: none; } .bv__paneeli .vp__sv { min-height: 150px; } .bv__paneeli .vp__sw { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; } .bv__paneeli .vp__hex input, .bv__paneeli .vp__now { height: 38px; } .bv__paneeli .vp__now { width: 38px; } @media (max-width: 560px) { .bv__paneeli { grid-template-columns: minmax(0, 1fr); } .bv__paneeli .vp__sw { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* Teemat: yksi painettava laatta per teema. Hiiri päällä esikatselee, painallus ottaa käyttöön. */ .tl__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .tl { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 62px; padding: 9px 14px 9px 9px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(105deg, color-mix(in srgb, var(--p1) 16%, var(--pbg)), var(--pbg) 70%); color: #fff; font: inherit; text-align: left; cursor: pointer; transition: transform .25s var(--ease), border-color .25s, box-shadow .3s; } .tl::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 140% at 100% 0%, color-mix(in srgb, var(--p2) 40%, transparent), transparent 70%); opacity: .45; transition: opacity .3s; } .tl:hover, .tl:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--p1) 70%, transparent); box-shadow: 0 18px 40px -24px var(--p1); outline: none; } .tl:hover::before { opacity: .9; } .tl.is-on { cursor: default; border-color: var(--p1); box-shadow: 0 0 0 1px var(--p1), 0 18px 44px -26px var(--p1); } .tl:disabled { opacity: .6; cursor: wait; } .tl__vari { position: relative; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(140deg, var(--p1), var(--p2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 8px 18px -8px var(--p1); } .tl__vari i { position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; background: var(--p3); border: 3px solid var(--pbg); } .tl__teksti { display: grid; gap: 1px; min-width: 0; } .tl__teksti b { font-size: 14px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl__teksti small { font-size: 11px; color: rgba(255, 255, 255, .58); } .tl.is-on .tl__teksti small { color: var(--p3); font-weight: 700; } .tl__tila { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, .75); } .tl__tila svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--p1); color: #fff; box-sizing: content-box; } .tl:not(.is-on):not([data-osta-teema]) .tl__tila { display: none; } .tl__tila .price { font-size: 12px; } @media (max-width: 480px) { .tl__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl { gap: 9px; padding-right: 10px; } .tl__vari { width: 36px; height: 36px; } } @media (prefers-reduced-motion: reduce) { .tl { transition: none; } .tl:hover { transform: none; } } /* Automaattisen tallennuksen tila asetusten otsikossa. */ .as__tallennus { margin-left: auto; align-self: center; flex: none; font-size: 12px; font-weight: 650; color: var(--muted); white-space: nowrap; } .as__tallennus + .as__takaisin { margin-left: 14px; } .as__tallennus.is-ok { color: #72e6a7; } .as__tallennus.is-virhe { color: #ff8a8a; } @media (max-width: 700px) { .as__tallennus { flex-basis: 100%; margin: 6px 0 0; } } /* Mallipohjan latauslinkki bannerin esikatselun vasemmassa alakulmassa. */ .as__malli { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 3px 7px; border: 0; border-radius: 7px; background: rgba(8, 10, 14, .45); color: #fff; font: inherit; font-size: 10.5px; font-weight: 700; line-height: 1.5; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s; } .as__malli:hover, .as__malli:focus-visible { background: rgba(8, 10, 14, .85); } /* Tili: uloskirjautumisnappi otsikon oikeassa reunassa, pystysuunnassa otsikon ja selitteen keskellä. */ .as__paa--nappi { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .as__ulos { flex: none; gap: 8px; color: #fff; border-color: rgba(255, 255, 255, .22); } .as__ulos:hover, .sos__ulos.btn--line:hover { border-color: #ff6b6b; color: #ff9c9c; background: rgba(255, 80, 80, .08); } .as__ulos svg, .sos__ulos svg { width: 15px; height: 15px; } /* Jäsenet-laatikon uloskirjautuminen selkeänä nappina. */ .sos__ulos.btn--line { margin-top: 14px; padding-left: 0; gap: 8px; justify-content: center; color: var(--text-2); } /* Teemat ryhmissä: ilmaiset ja kolikoilla ostettavat erikseen, aina kolme rinnakkain. */ .tl__ryhmat { display: grid; gap: 16px; } .tl__ryhma { display: grid; gap: 8px; } .tl__ryhma > span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .tl__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 620px) { .tl__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Porttikielto: koko sivun peittävä ilmoitus, muu sisältö piilossa ---------- */ html.on-banni, html.on-banni body, html.on-banni-odota, html.on-banni-odota body, html.on-vapautus, html.on-vapautus body { overflow: hidden !important; } html.on-banni body > *:not(.banni) { display: none !important; } html.on-banni-odota body > *:not(.banni) { visibility: hidden !important; } .banni { --bh: 255 70 70; position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; overflow: hidden auto; } .banni__tausta { position: fixed; inset: 0; background: radial-gradient(90% 70% at 50% 42%, #17181d 0%, #0a0a0d 62%, #040405 100%); transition: opacity 1.1s ease .1s; } .banni__tausta::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 58px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 140px); -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent); } .banni__valo { position: fixed; left: 50%; top: -34vh; width: 120vmax; height: 78vh; transform: translateX(-50%); pointer-events: none; background: radial-gradient(closest-side, rgb(var(--bh) / .3), transparent); animation: banni-halytys 3.4s ease-in-out infinite; transition: opacity 1.1s ease; } .banni__portti { --s: 1; position: fixed; top: 0; bottom: 0; left: 0; width: 50%; pointer-events: none; filter: drop-shadow(0 0 9px rgba(0, 0, 0, .95)); } .banni__portti--o { --s: -1; left: auto; right: 0; } .banni__portti::before, .banni__portti::after { content: ""; position: absolute; inset: 0; } .banni__portti::before { background: linear-gradient(90deg, #121316, #8c94a0 45%, #23262b) right / 16px 100% no-repeat, repeating-linear-gradient(90deg, transparent 0, transparent 62px, #050506 62px, #2b2f36 64px, #7d8591 68px, #b9c0cb 70px, #5a616c 73px, #15171a 78px, transparent 78px, transparent 80px); } .banni__portti--o::before { transform: scaleX(-1); } .banni__portti::after { background: linear-gradient(180deg, #23262b, #8c94a0 40%, #121316) 0 9% / 100% 18px no-repeat, linear-gradient(180deg, #23262b, #8c94a0 40%, #121316) 0 91% / 100% 18px no-repeat; } .banni__laatikko { position: relative; z-index: 2; width: min(460px, 100%); display: grid; justify-items: center; gap: 12px; padding: 34px 28px 26px; border-radius: 18px; overflow: hidden; text-align: center; background: linear-gradient(180deg, #1d1e23, #0e0f12); border: 1px solid rgba(255, 255, 255, .13); box-shadow: 0 0 0 6px rgba(0, 0, 0, .45), 0 50px 120px -20px #000, 0 30px 110px -40px rgb(var(--bh) / .55), inset 0 1px 0 rgba(255, 255, 255, .09); } .banni__laatikko::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; background: repeating-linear-gradient(-45deg, rgb(var(--bh)) 0 12px, #15090a 12px 24px); transition: filter .5s; } .banni__niitti { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c3c9d2, #4b5059 55%, #15171a); box-shadow: 0 1px 2px rgba(0, 0, 0, .8); } .banni__niitti:nth-child(1) { left: 12px; top: 18px; } .banni__niitti:nth-child(2) { right: 12px; top: 18px; } .banni__niitti:nth-child(3) { left: 12px; bottom: 12px; } .banni__niitti:nth-child(4) { right: 12px; bottom: 12px; } .banni__lukko { display: grid; place-items: center; width: 72px; height: 72px; margin-top: 4px; border-radius: 50%; color: rgb(var(--bh)); background: rgb(var(--bh) / .12); border: 1px solid rgb(var(--bh) / .45); box-shadow: 0 0 34px -6px rgb(var(--bh) / .6); transition: color .5s, background .5s, border-color .5s, box-shadow .5s; } .banni__lukko svg { width: 38px; height: 38px; overflow: visible; } .banni__sanka { transform-origin: 33px 22px; transition: transform .55s cubic-bezier(.3, 1.6, .5, 1); } .banni__eyebrow { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--bh)); transition: color .5s; } .banni h1 { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: 32px; letter-spacing: .02em; text-transform: uppercase; color: #fff; } .banni__viesti { margin: 0; font-size: 14.5px; line-height: 1.6; color: #c9cad1; } .banni__kuka { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: #fff; } .banni__kuka img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .banni__kuka:not(:has(img)) { padding-left: 14px; } .banni__laskuri { width: 100%; display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .42); border: 1px solid rgb(var(--bh) / .22); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .6); transition: border-color .5s; } .banni__laskuri small { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #9a9ba4; } .banni__laskuri b { font-family: var(--f-mono); font-size: clamp(24px, 7vw, 32px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; text-transform: uppercase; color: #fff; } .banni__tiedot { width: 100%; margin: 0 0 4px; display: grid; gap: 1px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); text-align: left; } .banni__tiedot > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px 14px; background: rgba(255, 255, 255, .035); } .banni__tiedot dt { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #9a9ba4; padding-top: 2px; } .banni__tiedot dd { margin: 0; font-size: 14px; line-height: 1.5; color: #fff; overflow-wrap: anywhere; } .banni.is-vapaa { --bh: 61 220 132; } .banni.is-vapaa .banni__sanka { transform: translateY(-5px) rotate(26deg); } .banni.is-vapaa .banni__valo { animation: none; } .banni.is-vapaa .banni__tiedot, .banni.is-vapaa [data-banni-ulos] { opacity: .35; pointer-events: none; transition: opacity .4s; } .banni--tulo .banni__tausta { animation: banni-himmene .35s both; } .banni--tulo .banni__portti { animation: banni-kiinni .7s cubic-bezier(.6, 0, .9, .4) both; } .banni--tulo .banni__laatikko { animation: banni-tulo .6s .6s cubic-bezier(.2, .9, .3, 1.2) both; } .banni.is-pudota .banni__laatikko { animation: banni-alas .7s cubic-bezier(.55, -.25, .75, .3) forwards; } .banni.is-auki { pointer-events: none; } .banni.is-auki .banni__portti { animation: banni-auki 1.4s cubic-bezier(.65, 0, .25, 1) forwards; } .banni.is-auki .banni__tausta, .banni.is-auki .banni__valo { opacity: 0; } @keyframes banni-halytys { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } @keyframes banni-himmene { from { opacity: 0; } } @keyframes banni-kiinni { from { transform: translateX(calc(var(--s) * -104%)); } 72% { transform: none; } 84% { transform: translateX(calc(var(--s) * -1.4%)); } to { transform: none; } } @keyframes banni-tulo { from { opacity: 0; transform: translateY(-46px) scale(.95); } } @keyframes banni-alas { to { transform: translateY(115vh) rotate(4deg); } } @keyframes banni-auki { 0% { transform: none; } 14% { transform: translateX(calc(var(--s) * 1.2%)); } 100% { transform: translateX(calc(var(--s) * -104%)); } } @media (max-width: 520px) { .banni__laatikko { padding: 30px 20px 22px; } .banni h1 { font-size: 27px; } } html.on-banni-tulo, html.on-banni-tulo body { overflow: hidden !important; } .banni__tausta::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='92'%3E%3Cpath d='M0 .5H132M0 46.5H132M.5 0V46M66.5 46V92' stroke='%23fff' stroke-opacity='.055' fill='none'/%3E%3C/svg%3E"); -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent); } .banni__keila { position: fixed; top: -22vh; left: 50%; width: 52vmax; height: 160vh; margin-left: -26vmax; pointer-events: none; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 78%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); filter: blur(16px); mix-blend-mode: screen; animation: banni-keila 9s ease-in-out infinite alternate; transition: opacity 1s ease; } .banni__nurkka { position: fixed; bottom: 16px; z-index: 1; font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .3); text-shadow: 0 1px 6px #000; transition: opacity .6s ease; } .banni__nurkka--v { left: 22px; } .banni__nurkka--o { right: 22px; } .banni__kuva { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin: 6px 0 8px; } .banni__naama { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; background: #0e0f12; border: 2px solid rgba(255, 255, 255, .22); box-shadow: 0 6px 18px rgba(0, 0, 0, .6); filter: grayscale(.6) contrast(1.05); transition: filter 1s ease; } .banni__naama img { width: 100%; height: 100%; object-fit: cover; } .banni__naama b { font-family: var(--f-display); font-weight: 900; font-size: 34px; color: #d9dbe2; } .banni__kuva .banni__lukko { position: absolute; right: -12px; bottom: -8px; width: 48px; height: 48px; margin: 0; background: color-mix(in srgb, rgb(var(--bh)) 16%, #15161a); } .banni__kuva .banni__lukko svg { width: 26px; height: 26px; } .banni__kyltti { padding: 5px 16px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); } .banni__kyltti b { font-size: 14.5px; color: #fff; overflow-wrap: anywhere; } .banni__palkki { display: block; height: 5px; margin-top: 8px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .09); } .banni__palkki i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--bh) / .45), rgb(var(--bh))); transition: width .5s linear, background 1s; } .banni.is-vapaa .banni__naama { filter: none; } .banni.is-vapaa .banni__palkki i { width: 100% !important; } .banni--tulo { animation: banni-tarahdys .45s .52s; } .banni--tulo .banni__tausta { animation: banni-himmene 1s .25s both; } .banni--tulo .banni__valo { animation: banni-valahdys 1.2s .5s both, banni-halytys 3.4s 1.7s ease-in-out infinite; } .banni--tulo .banni__laatikko { animation: banni-tulo .7s .85s cubic-bezier(.2, .9, .3, 1.15) both; } .banni--tulo .banni__keila, .banni--tulo .banni__nurkka { animation: banni-himmene 1.2s 1.2s both, banni-keila 9s ease-in-out infinite alternate; } .banni--tulo .banni__nurkka { animation: banni-himmene 1.2s 1.2s both; } .banni.is-auki .banni__keila, .banni.is-auki .banni__nurkka, .banni.is-pudota .banni__nurkka { opacity: 0; } @keyframes banni-keila { from { transform: rotate(-30deg); } to { transform: rotate(30deg); } } @keyframes banni-tarahdys { 20% { transform: translate(-8px, 3px); } 40% { transform: translate(7px, -3px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(2px, 0); } } @keyframes banni-valahdys { 0% { opacity: 0; } 14% { opacity: 1; transform: translateX(-50%) scale(1.5); } 100% { opacity: .55; transform: translateX(-50%); } } @media (max-width: 520px) { .banni__nurkka { display: none; } .banni__kuva { width: 84px; height: 84px; } .banni__naama { width: 80px; height: 80px; } } @media (prefers-reduced-motion: reduce) { .banni *, .banni *::before { animation: none !important; transition: none !important; } .banni.is-auki, .banni.is-pudota .banni__laatikko { opacity: 0; } } /* ---------- Jäsenen hallinta: kilpikuvake profiilin vasemmassa yläkulmassa ja hallintavalikko ---------- */ .pf__hallinta { position: absolute; left: 14px; top: 14px; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; cursor: pointer; color: #fff; background: rgba(8, 10, 14, .62); border: 1px solid rgba(255, 255, 255, .24); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .25s var(--ease), border-color .2s, background .2s; } .pf__hallinta:hover, .pf__hallinta:focus-visible { transform: translateY(-1px); background: rgba(8, 10, 14, .88); border-color: #ffb400; color: #ffcf5c; outline: none; } .pf__hallinta svg { width: 19px; height: 19px; } .pf__hallinta.is-kielto { border-color: #ff6b6b; color: #ff8a8a; } .ad { display: grid; gap: 14px; } .ad__paa { display: flex; align-items: center; gap: 14px; padding-right: 34px; } .ad__paa .avatar { width: 56px; height: 56px; font-size: 22px; } .ad__paa h2 { margin: 1px 0 2px; font-family: var(--f-display); font-weight: 900; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; } .ad__eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffcf5c; } .ad__id { padding: 0; border: 0; background: none; color: var(--muted); font-family: var(--f-mono); font-size: 11.5px; cursor: pointer; } .ad__id:hover { color: #fff; } .ad__tilat { display: flex; flex-wrap: wrap; gap: 6px; } .ad__siru { padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 750; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); color: var(--text-2); } .ad__siru--ok { color: #72e6a7; border-color: rgba(114, 230, 167, .35); background: rgba(114, 230, 167, .08); } .ad__siru--varo { color: #ffcf5c; border-color: rgba(255, 207, 92, .35); background: rgba(255, 207, 92, .08); } .ad__siru--vaara { color: #ff8a8a; border-color: rgba(255, 107, 107, .45); background: rgba(255, 80, 80, .1); } .ad__osio { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); } .ad__osio h3 { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .ad__osio--vaara { border-color: rgba(255, 107, 107, .3); background: linear-gradient(160deg, rgba(255, 60, 60, .08), rgba(255, 255, 255, .02)); } .ad__osio--vaara h3 { color: #ff9c9c; } .ad__ohje { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .ad__lomake { display: grid; gap: 8px; } .ad__lomake textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 58px; } .ad__lomakeala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .ad__lomakeala select { width: auto; min-width: 140px; height: 38px; } .ad__kielto { padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); border-left: 3px solid #ff6b6b; } .ad__kielto p { margin: 0 0 3px; font-size: 14px; color: #fff; overflow-wrap: anywhere; } .ad__kielto small { font-size: 11.5px; color: var(--muted); } .ad__rivi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; } .ad__rivi + .ad__rivi { padding-top: 10px; border-top: 1px solid var(--line); } .ad__rivi b { display: block; font-size: 13.5px; } .ad__rivi small { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); } .ad__rivi .btn { min-width: 104px; justify-content: center; } .ad .hl__badget { margin: 0; } @media (max-width: 480px) { .ad__rivi { grid-template-columns: minmax(0, 1fr); } .ad__rivi .btn { justify-self: start; } } /* ---------- Syöte: kommentit sisennettynä ketjuna julkaisun alla ---------- */ .sn__ketju { display: grid; gap: 10px; margin-left: 16px; padding: 2px 0 2px 18px; border-left: 2px solid color-mix(in srgb, var(--a1) 45%, rgba(255, 255, 255, .12)); } .sn__ketjuots { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .sn__ketjuots svg { width: 13px; height: 13px; } .sn__ketju .sn__kommentit { padding-top: 0; border-top: 0; gap: 8px; } .sn__ketju .sn__kommentti { gap: 8px; font-size: 13.5px; } .sn__ketju .sn__kommentti .avatar { width: 26px; height: 26px; margin-top: 3px; } .sn__ketju .sn__kupla { flex: 0 1 auto; min-width: 0; max-width: 100%; padding: 7px 12px 8px; border-radius: 4px 14px 14px 14px; background: rgba(255, 255, 255, .045); border: 1px solid var(--line); } .sn__ketju .sn__kupla p { margin: 0 0 1px; font-size: 12.5px; } .sn__ketju .sn__kupla time { font-size: 11px; color: var(--dim); } .sn__ketju .sn__kommentti .kg, .sn__ketju .sn__kommentti .kg__gif { max-width: 240px; margin-top: 6px; } .sn__ketju .sn__kommentti .sn__pois { align-self: center; } @media (max-width: 560px) { .sn__ketju { margin-left: 4px; padding-left: 12px; } } /* ---------- Galleriajulkaisu: oma otsikko ja tasainen kuvaruudukko ---------- */ .gl__paa { display: flex; align-items: center; gap: 10px; min-width: 0; } .gl__paa svg { width: 20px; height: 20px; flex: none; color: var(--a1); } .gl__paa b { min-width: 0; font-family: var(--f-display); font-weight: 900; font-size: 19px; line-height: 1.25; overflow-wrap: anywhere; } .gl__paa small { flex: none; margin-left: auto; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--muted); background: rgba(255, 255, 255, .06); } .gl { margin-top: 10px; } .gl__kuvat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; border-radius: 14px; overflow: hidden; } .gl__kuvat--1 { grid-template-columns: minmax(0, 1fr); max-width: 640px; } .gl__kuvat--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gl__kuvat--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gl__kuvat a { display: block; aspect-ratio: 1; overflow: hidden; background: #000; } .gl__kuvat--1 a { aspect-ratio: auto; } .gl__kuvat img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .gl__kuvat--1 img { max-height: 460px; object-fit: contain; } .gl__kuvat a:hover img { transform: scale(1.04); } @media (max-width: 560px) { .gl__kuvat { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gl__kuvat--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gl__kuvat--1 { grid-template-columns: minmax(0, 1fr); } } .sn__galleriaots { width: 100%; box-sizing: border-box; font-weight: 700; } .sn__galleriaots[hidden] { display: none; } .sn__gallerianappi { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text-2); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .2s, background .2s, color .2s; } .sn__gallerianappi svg { width: 15px; height: 15px; } .sn__gallerianappi:hover { color: #fff; border-color: rgb(var(--a1-rgb) / .6); } .sn__gallerianappi[aria-pressed="true"] { color: #fff; border-color: var(--a1); background: rgb(var(--a1-rgb) / .16); } /* Galleria ja kommenttiketju samaan linjaan julkaisun tekstin kanssa. */ .sn > .gl__paa, .sn > .gl, .sn > .sn__ketju { margin-left: 46px; } .sn > .gl { margin-top: -2px; } @media (max-width: 560px) { .sn > .gl__paa, .sn > .gl { margin-left: 0; } .sn > .sn__ketju { margin-left: 4px; } } /* Hallintavalikon sisus tarvitsee oman reunatilan ikkunassa. */ .ad { padding: 24px 22px 22px; } /* ---------- Kirjoituskenttä: kuva, GIF, tarra ja spoileri kentän oikeassa reunassa ---------- */ .tkf { position: relative; min-width: 0; flex: 1; } .tkf > textarea.input { display: block; width: 100%; box-sizing: border-box; padding-right: 181px; } .tkf__media { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 1px; } .tkf__media .kl__nappi { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--muted); display: grid; place-items: center; } .tkf__media .kl__nappi svg { width: 18px; height: 18px; } .tkf__media .kl__nappi--gif svg { width: 23px; height: 23px; } .tkf__media .kl__nappi:hover:not(:disabled) { background: rgba(255, 255, 255, .09); color: #fff; } .tkf__media .kl__nappi--spo span { display: none; } .tkf__media .kl__nappi--spo[aria-pressed="true"] { background: rgb(var(--a1-rgb) / .22); color: #fff; } .sn__vastaarivi .tkf > textarea.input { padding-right: 173px; } /* Muotoilurivi tiiviimpänä, galleria sen oikealla puolella */ .mt { padding: 3px; gap: 1px; } .mt button { width: 30px; height: 28px; font-size: 14px; } .sn__uusiala .kl__vasen, .f-compose__foot .kl__vasen { gap: 8px; } @media (max-width: 480px) { .tkf > textarea.input, .sn__vastaarivi .tkf > textarea.input { padding-right: 146px; } .tkf__media .kl__nappi { width: 27px; height: 30px; } } /* Hallintavalikon jäähy: keltainen reunaviiva erottaa sen porttikiellosta. */ .ad__kielto--jaahy { border-left-color: #ffcf5c; } .ad__varot { display: grid; gap: 6px; } .ad__varo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); border-left: 3px solid #ffcf5c; } .ad__varo p { margin: 0 0 2px; font-size: 13.5px; color: #fff; overflow-wrap: anywhere; } .ad__varo small { font-size: 11.5px; color: var(--muted); } .ad__lomake > input.input { width: 100%; box-sizing: border-box; } /* Valvontailmoitus: kuittaus vaatii yhtäjaksoisen 10 sekunnin pidon. */ .valvonta-alert { --va: 255 180 0; position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 22px; overflow-y: auto; background: radial-gradient(60% 50% at 50% 30%, rgb(var(--va) / .16), transparent 70%), rgba(5, 6, 9, .86); backdrop-filter: blur(14px); animation: va-tausta .6s ease backwards; } .valvonta-alert--j { --va: 92 200 255; } .valvonta-alert--e, .valvonta-alert--a { --va: 255 107 107; } .valvonta-alert--ok, .valvonta-alert.is-kuitattu { --va: 61 220 132; } .valvonta-alert__card { position: relative; width: min(100%, 460px); display: grid; justify-items: center; gap: 12px; padding: 36px 28px 26px; border-radius: 22px; overflow: hidden; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, rgb(var(--va)) 8%, #16171b), #0d0e11); border: 1px solid rgb(var(--va) / .38); box-shadow: 0 40px 120px -30px rgb(var(--va) / .5), 0 30px 90px -20px #000, inset 0 1px 0 rgba(255, 255, 255, .07); animation: va-tulo .75s cubic-bezier(.16, 1, .3, 1) backwards; transition: border-color .6s, box-shadow .6s; } .valvonta-alert__nauha { position: absolute; inset: 0 0 auto; height: 8px; background: repeating-linear-gradient(-45deg, rgb(var(--va)) 0 12px, #17110a 12px 24px); background-size: 34px 100%; animation: va-nauha 1.2s linear infinite; } .valvonta-alert--j .valvonta-alert__nauha { background: linear-gradient(90deg, #2f9fe0, #dff5ff, #5cc8ff, #dff5ff, #2f9fe0); background-size: 200% 100%; animation: va-huurre 3s linear infinite; } .valvonta-alert--j .valvonta-alert__card::after { content: ""; position: absolute; inset: 8px 0 auto; height: 120px; pointer-events: none; background: radial-gradient(60% 100% at 50% 0%, rgb(var(--va) / .16), transparent); } .valvonta-alert.is-kuitattu .valvonta-alert__nauha, .valvonta-alert--ok .valvonta-alert__nauha { background: rgb(var(--va)); animation: none; } .valvonta-alert__ic { position: relative; z-index: 1; display: grid; place-items: center; width: 70px; height: 70px; margin-top: 6px; border-radius: 50%; color: rgb(var(--va)); background: rgb(var(--va) / .12); border: 1px solid rgb(var(--va) / .48); box-shadow: 0 0 34px -6px rgb(var(--va) / .65); transition: color .4s, background .4s, border-color .4s, box-shadow .4s; } .valvonta-alert__ic::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgb(var(--va) / .55); animation: va-pulssi 2.2s ease-out infinite; } .valvonta-alert__ic svg { grid-area: 1 / 1; width: 34px; height: 34px; transition: opacity .25s, transform .4s; } .valvonta-alert__check { opacity: 0; transform: scale(.5); } .valvonta-alert__check path { stroke-dasharray: 26; stroke-dashoffset: 26; } .valvonta-alert.is-kuitattu .valvonta-alert__ic svg:not(.valvonta-alert__check) { opacity: 0; transform: scale(.4) rotate(-40deg); } .valvonta-alert.is-kuitattu .valvonta-alert__check { opacity: 1; transform: none; } .valvonta-alert.is-kuitattu .valvonta-alert__check path { animation: va-piirra .45s .18s ease-out forwards; } .valvonta-alert.is-kuitattu .valvonta-alert__ic::after { animation: va-rengas .8s ease-out forwards; } .valvonta-alert__tag { position: relative; z-index: 1; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--va)); transition: color .4s; } .valvonta-alert h1 { position: relative; z-index: 1; margin: 0; font-family: var(--f-display); font-weight: 900; font-size: clamp(23px, 5vw, 28px); line-height: 1.2; color: #fff; } .valvonta-alert p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); } .valvonta-alert__reason { width: 100%; margin-top: 4px; padding: 13px 16px; border-radius: 12px; text-align: left; font-size: 15px; line-height: 1.5; color: #fff; background: rgba(255, 255, 255, .045); border-left: 3px solid rgb(var(--va)); overflow-wrap: anywhere; } .valvonta-alert .valvonta-alert__meta { font-size: 12px; color: var(--muted); } .valvonta-alert__kello { width: 100%; display: grid; gap: 2px; padding: 11px 14px; border-radius: 14px; background: rgba(0, 0, 0, .4); border: 1px solid rgb(var(--va) / .25); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .55); } .valvonta-alert__kello small { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .valvonta-alert__kello b { font-family: var(--f-mono); font-size: clamp(24px, 7vw, 30px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: #fff; } .valvonta-alert .valvonta-alert__help { font-size: 12px; color: var(--muted); margin-top: 6px; } .valvonta-alert__hold { --hold: 0%; width: 100%; min-height: 52px; padding: 12px 16px; position: relative; overflow: hidden; border: 1px solid rgb(var(--va) / .55); border-radius: 14px; background: rgb(var(--va) / .08); color: #fff; font-weight: 700; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; } .valvonta-alert__hold::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--hold); background: linear-gradient(90deg, rgb(var(--va) / .25), rgb(var(--va) / .5)); pointer-events: none; } .valvonta-alert__hold span { position: relative; z-index: 1; } .valvonta-alert__hold:focus-visible { outline: 2px solid rgb(var(--va)); outline-offset: 4px; } .valvonta-alert.is-kuitattu .valvonta-alert__reason, .valvonta-alert.is-kuitattu .valvonta-alert__meta, .valvonta-alert.is-kuitattu .valvonta-alert__kello, .valvonta-alert.is-kuitattu .valvonta-alert__help, .valvonta-alert.is-kuitattu .valvonta-alert__hold { overflow: hidden; pointer-events: none; animation: va-kutistu .6s cubic-bezier(.4, 0, .2, 1) forwards; } .valvonta-alert.is-kuitattu .valvonta-alert__card { animation: none; } .valvonta-alert.is-pois { overflow: hidden; pointer-events: none; animation: va-pois .85s ease .5s forwards; } .valvonta-alert.is-pois .valvonta-alert__card { animation: va-putoa .9s cubic-bezier(.5, 0, .8, .3) forwards; } @keyframes va-tausta { from { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } } @keyframes va-pois { to { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } } @keyframes va-putoa { 0% { transform: none; } 18% { transform: translateY(-10px); } 100% { transform: translateY(110vh) rotate(3deg); } } @keyframes va-kutistu { from { max-height: 240px; opacity: 1; } 45% { opacity: 0; } to { max-height: 0; min-height: 0; opacity: 0; margin-top: -12px; padding-top: 0; padding-bottom: 0; border-width: 0; } } @keyframes va-tulo { from { opacity: 0; transform: translateY(46px) scale(.97); } } @keyframes va-nauha { to { background-position: 34px 0; } } @keyframes va-huurre { to { background-position: -200% 0; } } @keyframes va-pulssi { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.55); opacity: 0; } } @keyframes va-rengas { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } } @keyframes va-piirra { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .valvonta-alert, .valvonta-alert *, .valvonta-alert *::after { animation: none !important; transition: none !important; } .valvonta-alert__check path { stroke-dashoffset: 0; } .valvonta-alert.is-pois { opacity: 0; } .valvonta-alert.is-kuitattu .valvonta-alert__reason, .valvonta-alert.is-kuitattu .valvonta-alert__meta, .valvonta-alert.is-kuitattu .valvonta-alert__kello, .valvonta-alert.is-kuitattu .valvonta-alert__help, .valvonta-alert.is-kuitattu .valvonta-alert__hold { display: none; } } .valvonta-alert::before, .valvonta-alert::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0; } .valvonta-alert__card { z-index: 1; } .valvonta-alert__lumi { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; animation: va-tausta 1.2s ease backwards; } .valvonta-alert__kuka { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgb(var(--va) / .3); font-size: 14px; color: #fff; transition: border-color .6s; } .valvonta-alert__kuka img, .valvonta-alert__kuka i { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .valvonta-alert__kuka i { display: grid; place-items: center; font-style: normal; font-weight: 800; color: rgb(var(--va)); background: rgb(var(--va) / .16); } .valvonta-alert__nauha--ala { display: none; inset: auto 0 0; } /* Varoitus: hälytysvalo reunoilla, välähdys ja heiluva kolmio */ .valvonta-alert--v::before { opacity: 1; box-shadow: inset 0 0 190px 34px rgb(var(--va) / .42); animation: va-halytys 1.5s ease-in-out infinite; transition: opacity .7s ease; } .valvonta-alert--v::after { background: rgb(var(--va)); animation: va-valahdys .9s ease-out; } .valvonta-alert--v .valvonta-alert__nauha { height: 12px; } .valvonta-alert--v .valvonta-alert__nauha--ala { display: block; animation-direction: reverse; } .valvonta-alert--v .valvonta-alert__card { padding-top: 42px; padding-bottom: 36px; border-width: 2px; animation: va-tulo .75s cubic-bezier(.16, 1, .3, 1) backwards, va-hehku 1.5s ease-in-out infinite; } .valvonta-alert--v .valvonta-alert__ic { width: 86px; height: 86px; border-width: 2px; animation: va-heilu 2.6s ease-in-out .8s infinite; } .valvonta-alert--v .valvonta-alert__ic svg { width: 44px; height: 44px; } .valvonta-alert--v .valvonta-alert__tag { font-size: 14px; letter-spacing: .26em; } .valvonta-alert--v.is-kuitattu::before { opacity: 0; animation: none; } .valvonta-alert--v.is-kuitattu .valvonta-alert__ic, .valvonta-alert--v.is-kuitattu:not(.is-pois) .valvonta-alert__card { animation: none; } .valvonta-alert--v.is-kuitattu .valvonta-alert__nauha--ala { animation: va-kutistu .6s cubic-bezier(.4, 0, .2, 1) forwards; } /* Jäähy: huurteinen lasi, lumisade ja kasvava penkka; päättyessä lumi sulaa ja valo lämpenee */ .valvonta-alert--j { background: radial-gradient(70% 55% at 50% 22%, rgba(150, 212, 255, .14), transparent 70%), linear-gradient(180deg, rgba(190, 228, 255, .05), rgba(120, 180, 230, .03)), rgba(6, 12, 20, .78); -webkit-backdrop-filter: blur(16px) saturate(.85); backdrop-filter: blur(16px) saturate(.85); } .valvonta-alert--j::before { opacity: .3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .86 0 0 0 0 .95 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), radial-gradient(ellipse at center, transparent 38%, rgba(205, 235, 255, .3) 100%); box-shadow: inset 0 0 120px 6px rgba(214, 240, 255, .35); transition: opacity 2.4s ease; } .valvonta-alert--j::after { background: radial-gradient(90% 75% at 50% 105%, rgba(255, 150, 60, .55), transparent 70%), radial-gradient(60% 45% at 50% 20%, rgba(255, 214, 140, .22), transparent 70%), linear-gradient(180deg, rgba(255, 190, 120, .1), rgba(255, 120, 40, .2)); transition: opacity 2.4s ease .3s; } .valvonta-alert--j .valvonta-alert__card { background: linear-gradient(180deg, rgba(120, 190, 240, .2), rgba(13, 24, 36, .9) 46%), #0c141c; border-color: rgba(190, 230, 255, .5); box-shadow: 0 40px 120px -30px rgb(var(--va) / .55), 0 30px 90px -20px #000, inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 40px rgba(170, 220, 255, .08); transition: border-color 1.6s, box-shadow 1.6s, background-color 1.6s; } .valvonta-alert--j .valvonta-alert__ic svg:first-child { animation: va-hiutale 14s linear infinite; } /* Jäähyn ajan koko sivusto on kylmän sävyinen ja taustalla sataa lunta */ html.on-jaahy { --a1: #4fb6ff !important; --a1-rgb: 79 182 255 !important; --a2: #9bdcff !important; --a3: #d6f1ff !important; --bg: #05090f !important; } /* Jäähyn aikana kirjoituskentät ja kirjoitusnapit ovat poissa; jäähyn päätyttyä ne liukuvat takaisin */ html.on-jaahy [data-uusi-kommentti], html.on-jaahy [data-uusi-posti], html.on-jaahy [data-seina-uusi], html.on-jaahy .sn__vastaa, html.on-jaahy [data-avaa-kirjoitus], html.on-jaahy [data-uusi-palsta], html.on-jaahy [data-vastaa], html.on-jaahy [data-muokkaa-kommentti], html.on-jaahy [data-muokkaa-posti] { display: none !important; } html.jaahy-palaa [data-uusi-kommentti], html.jaahy-palaa [data-uusi-posti], html.jaahy-palaa [data-seina-uusi], html.jaahy-palaa .sn__vastaa, html.jaahy-palaa [data-avaa-kirjoitus], html.jaahy-palaa [data-uusi-palsta], html.jaahy-palaa [data-vastaa], html.jaahy-palaa [data-muokkaa-kommentti], html.jaahy-palaa [data-muokkaa-posti] { overflow: hidden; animation: jaahy-palaa 1.2s cubic-bezier(.16, 1, .3, 1) backwards; } @keyframes jaahy-palaa { from { max-height: 0; opacity: 0; transform: translateY(-8px); } 60% { opacity: 1; } to { max-height: 420px; } } @media (prefers-reduced-motion: reduce) { html.jaahy-palaa [data-uusi-kommentti], html.jaahy-palaa [data-uusi-posti], html.jaahy-palaa [data-seina-uusi], html.jaahy-palaa .sn__vastaa, html.jaahy-palaa [data-avaa-kirjoitus], html.jaahy-palaa [data-uusi-palsta], html.jaahy-palaa [data-vastaa], html.jaahy-palaa [data-muokkaa-kommentti], html.jaahy-palaa [data-muokkaa-posti] { animation: none; } } .jaahy-ilmoitus { display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 13px 16px; border-radius: 16px; color: #eaf7ff; background: linear-gradient(135deg, rgba(79, 182, 255, .16), rgba(255, 255, 255, .03)); border: 1px solid rgba(155, 220, 255, .32); animation: va-tausta .6s ease backwards; transition: opacity .5s ease; } .jaahy-ilmoitus svg { flex: none; width: 24px; height: 24px; color: #9bdcff; animation: va-hiutale 14s linear infinite; } .jaahy-ilmoitus b { display: block; font-size: 14px; } .jaahy-ilmoitus span { display: block; font-size: 12.5px; color: #b9d6ea; font-variant-numeric: tabular-nums; } .jaahy-ilmoitus.is-pois { opacity: 0; } /* Tunnelmateemat: taustatehoste sisällön takana ja kokeilusivun asettelu */ .tunnelma { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; animation: va-tausta 1.2s ease backwards; } .tt { display: grid; gap: 14px; } .tt__auto { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 14px; color: var(--text-2); } .tt__auto b { color: #fff; } .tt__ots { margin: 10px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .tt__ruudukko { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .tt__laatta { display: grid; gap: 3px; padding: 8px 8px 10px; border-radius: 14px; text-align: left; color: #fff; background: rgba(8, 8, 11, .6); border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, transform .2s, background .2s; } .tt__laatta:hover { transform: translateY(-2px); border-color: var(--line-2); } .tt__laatta[aria-pressed="true"] { border-color: var(--a1); background: rgb(var(--a1-rgb) / .12); } .tt__varit { display: block; height: 44px; margin-bottom: 5px; border-radius: 9px; } .tt__laatta b { font-size: 14px; padding: 0 3px; } .tt__laatta small { font-size: 11.5px; color: var(--muted); padding: 0 3px; } .tt__malli { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: start; } .tt__napit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; } .tt__kalenteri { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; } .tt__rivi { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; color: var(--text-2); background: rgba(255, 255, 255, .035); border: 1px solid var(--line); font-size: 13px; cursor: pointer; } .tt__rivi:hover { border-color: var(--line-2); } .tt__rivi b { color: #fff; } .tt__piilo { position: fixed; right: 20px; bottom: 20px; z-index: 50; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(10, 10, 14, .72); border: 1px solid var(--line-2); backdrop-filter: blur(10px); cursor: pointer; } .tt__piilo:hover, .tt__piilo[aria-pressed="true"] { border-color: var(--a1); } .p-hero, .tt > * { transition: opacity .5s ease; } html.tt-vain-tausta .p-hero, html.tt-vain-tausta .tt > *:not(.tt__piilo), html.tt-vain-tausta footer { opacity: 0; pointer-events: none; } .jaahy-lumi { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(90% 60% at 50% 0%, rgba(120, 190, 255, .16), transparent 70%); animation: va-tausta 1.5s ease backwards; transition: opacity 1.6s ease; } .jaahy-lumi.is-pois { opacity: 0; } .valvonta-alert__aurinko { opacity: 0; transform: scale(.5) rotate(-60deg); } .valvonta-alert.is-kuitattu.is-lammin { --va: 255 176 92; } .valvonta-alert--j.is-lammin::before { opacity: 0; } .valvonta-alert--j.is-lammin::after { opacity: 1; } .valvonta-alert--j.is-lammin .valvonta-alert__card { border-color: rgb(var(--va) / .55); box-shadow: 0 40px 130px -24px rgb(var(--va) / .7), 0 30px 90px -20px #000, inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 60px rgba(255, 170, 80, .12); } .valvonta-alert--j.is-lammin .valvonta-alert__nauha { background: linear-gradient(90deg, #ff8a3c, #ffd98a, #ff8a3c); } .valvonta-alert.is-kuitattu.is-lammin .valvonta-alert__ic .valvonta-alert__check { opacity: 0; } .valvonta-alert.is-kuitattu.is-lammin .valvonta-alert__ic svg.valvonta-alert__aurinko { opacity: 1; transform: none; transition: opacity .8s .5s, transform 1.4s cubic-bezier(.2, .9, .3, 1) .5s; } @keyframes va-halytys { 0%, 100% { opacity: .3; } 50% { opacity: 1; } } @keyframes va-valahdys { from { opacity: .4; } to { opacity: 0; } } @keyframes va-hehku { 0%, 100% { box-shadow: 0 40px 120px -30px rgb(var(--va) / .5), 0 30px 90px -20px #000, 0 0 0 0 rgb(var(--va) / .0), inset 0 1px 0 rgba(255, 255, 255, .07); } 50% { box-shadow: 0 40px 130px -20px rgb(var(--va) / .8), 0 30px 90px -20px #000, 0 0 0 6px rgb(var(--va) / .16), inset 0 1px 0 rgba(255, 255, 255, .07); } } @keyframes va-heilu { 0%, 78%, 100% { transform: none; } 82% { transform: rotate(-11deg) scale(1.06); } 86% { transform: rotate(9deg) scale(1.06); } 90% { transform: rotate(-6deg); } 94% { transform: rotate(3deg); } } @keyframes va-hiutale { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .valvonta-alert::after { display: none; } .valvonta-alert--j.is-lammin::after { display: block; opacity: 1; } } /* Teemayllätysten kokeilu pysyy käytettävissä myös pelkän taustan näkymässä. */ .tt__yllatys { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:rgba(8,10,16,.88); } .tt__yllatys label { font-size:13px; font-weight:700; } .tt__valinta { max-width:100%; padding:8px 10px; color:#e5eaf4; background:#10141f; border:1px solid var(--line-2); border-radius:8px; font:inherit; font-size:13px; } .tt__yllatys [role="status"] { font-size:12px; color:var(--text-2); } html.tt-vain-tausta .tt > .tt__yllatys { opacity:1; pointer-events:auto; position:fixed; bottom:70px; right:20px; left:auto; max-width:calc(100vw - 40px); z-index:50; } /* Suosikkipelien ehdotukset: lista aukeaa kentän alle kirjoitettaessa */ .pehd__kentta { position: relative; min-width: 0; } .pehd__kentta .input { width: 100%; } .pehd { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; display: grid; gap: 2px; max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 14px; background: linear-gradient(180deg, #1a1a20, #111116); border: 1px solid var(--line-2); box-shadow: 0 24px 60px -20px #000; overscroll-behavior: contain; } .pehd[hidden] { display: none; } .pehd__rivi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer; } .pehd__rivi svg { flex: none; width: 16px; height: 16px; color: var(--muted); } .pehd__rivi:hover, .pehd__rivi[aria-selected="true"] { background: rgba(255, 255, 255, .07); color: #fff; } .pehd__rivi:hover svg, .pehd__rivi[aria-selected="true"] svg { color: var(--a1); } /* Ikä ja syntymäpäivä asetuksissa */ .ika { display: grid; gap: 10px; } .ika__valinta { display: grid; grid-template-columns: 96px minmax(0, 1fr) 112px auto; gap: 8px; align-items: center; } .ika__valinta .btn { height: 50px; padding-inline: 18px; } .ika__valinta select.input { appearance: none; -webkit-appearance: none; padding: 0 30px 0 14px; color: #fff; background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.500l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.800'/%3E%3C/svg%3E") no-repeat right 12px center / 11px; } .ika__valinta select.input option { background: #15151a; color: #fff; } .ika__arvo b { display: block; font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: 20px; } .ika__arvo small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.45; } .ika__kytkimet { display: grid; margin-top: 4px; } .ika__kytkin { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .ika__kytkin b { display: block; font-size: 15px; } .ika__kytkin small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; line-height: 1.4; } .ika__kytkin i { position: relative; width: 42px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, .14); transition: background .2s; } .ika__kytkin i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .2s var(--ease); } .ika__kytkin[aria-checked="true"] i { background: var(--a1); } .ika__kytkin[aria-checked="true"] i::after { transform: translateX(18px); } .ika__kytkin:focus-visible { outline: 2px solid var(--a1); outline-offset: 4px; border-radius: 6px; } @media (max-width: 560px) { .ika__valinta { grid-template-columns: 1fr 1fr; } .ika__valinta .btn { grid-column: 1 / -1; } } .ad__ikanapit { display: flex; gap: 6px; } .ad__ikanapit .btn { min-width: 0; } /* Profiili: ikä ja syntymäpäivä */ .pf__piiloika { opacity: .7; border-bottom: 1px dashed currentColor; cursor: help; } .pf__siru--synttarit { border-color: rgba(255, 77, 157, .55); background: linear-gradient(90deg, rgba(255, 77, 157, .18), rgba(255, 210, 63, .16)); color: #fff; } /* Sinua saattaisi kiinnostaa: profiilin sivupalkissa ja Palvelinhaussa */ .suos__lista { display: grid; gap: 4px; } .suos__rivi { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; padding: 8px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background .15s; } .suos__rivi:hover, .suos__rivi:focus-visible { background: rgba(255, 255, 255, .06); outline: none; } .suos__rivi img, .suos__kirjain { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; } .suos__kirjain { display: grid; place-items: center; background: rgb(var(--a1-rgb) / .2); color: #fff; font-weight: 800; } .suos__rivi b, .suos__rivi small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .suos__rivi b { font-size: 14px; } .suos__rivi small { color: var(--muted); font-size: 12.5px; } .suos--ph { margin: 0 0 18px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); } .suos__paa { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; } .suos__paa h2 { margin: 0; font-size: 16px; font-weight: 800; } .suos__paa a { font-size: 13px; } .suos--ph .suos__lista { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } /* Syntymäpäivälahja: paketti heiluu, avattaessa kansi lentää ja kolikot suihkuavat */ .lahja { position: fixed; inset: 0; z-index: 520; display: grid; place-items: center; padding: 18px; background: rgba(4, 4, 6, .74); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } .lahja.is-open { opacity: 1; visibility: visible; } .lahja__ikkuna { width: min(400px, 100%); display: grid; justify-items: center; gap: 12px; padding: 30px 26px 24px; border-radius: 26px; text-align: center; background: radial-gradient(120% 80% at 50% 0%, rgba(255, 77, 157, .2), transparent 60%), linear-gradient(180deg, #1c1a22, #0e0e12); border: 1px solid var(--line-2); box-shadow: 0 50px 120px -30px rgba(255, 77, 157, .5), inset 0 1px 0 rgba(255, 255, 255, .08); transform: translateY(14px) scale(.96); transition: transform .35s var(--ease); } .lahja.is-open .lahja__ikkuna { transform: none; } .lahja__ikkuna h2 { margin: 6px 0 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 24px; line-height: 1.15; } .lahja__ikkuna p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; } .lahja__napit { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 40px; margin-top: 6px; } .lahja__napit .btn { min-width: 112px; } .lahja__paketti { position: relative; width: 130px; height: 124px; cursor: pointer; animation: lahja-heilu 2.6s ease-in-out infinite; transform-origin: 50% 100%; } .lahja__paketti:focus-visible { outline: 2px solid var(--a1); outline-offset: 8px; border-radius: 16px; } .lahja__laatikko { position: absolute; left: 12px; right: 12px; bottom: 0; height: 76px; border-radius: 10px; background: linear-gradient(90deg, transparent 43%, #ffd23f 43%, #ffd23f 57%, transparent 57%), linear-gradient(160deg, #ff5ca8, #c2185b); box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .25), 0 18px 30px -12px rgba(255, 77, 157, .6); } .lahja__kansi { position: absolute; left: 4px; right: 4px; top: 22px; height: 28px; z-index: 2; border-radius: 8px; background: linear-gradient(90deg, transparent 42%, #ffe27a 42%, #ffe27a 58%, transparent 58%), linear-gradient(160deg, #ff7cbc, #e0337f); box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .45); transition: transform .55s var(--ease), opacity .55s; } .lahja__rusetti { position: absolute; left: 50%; top: -20px; width: 0; height: 0; } .lahja__rusetti::before, .lahja__rusetti::after { content: ""; position: absolute; top: 0; width: 28px; height: 20px; border: 6px solid #ffd23f; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } .lahja__rusetti::before { right: 0; transform: rotate(-24deg); transform-origin: 100% 100%; } .lahja__rusetti::after { left: 0; transform: rotate(24deg); transform-origin: 0 100%; } .lahja__kolikot { position: absolute; left: 50%; bottom: 40px; width: 0; height: 0; z-index: 1; } .lahja__kolikko { position: absolute; left: 0; top: 0; width: 26px; height: 26px; opacity: 0; transform: translate(-50%, 0) scale(.4); } .lahja.is-avattu .lahja__paketti { animation: none; cursor: default; } .lahja.is-avattu .lahja__kansi { transform: translate(-30px, -64px) rotate(-28deg); opacity: 0; } .lahja.is-avattu .lahja__kolikko { animation: lahja-suihku 1.2s cubic-bezier(.2, .8, .3, 1) forwards; animation-delay: calc(var(--i) * 45ms); } @keyframes lahja-heilu { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-6deg); } 82% { transform: rotate(5deg); } 88% { transform: rotate(-3deg); } 94% { transform: rotate(2deg); } } @keyframes lahja-suihku { 0% { opacity: 0; transform: translate(-50%, 0) scale(.4); } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), var(--y)) scale(1.05) rotate(300deg); } } @media (prefers-reduced-motion: reduce) { .lahja__paketti { animation: none; } .lahja.is-avattu .lahja__kolikko { animation: none; } } /* ========================================================================== PALVELINHAKU (phx): matala otsikkorivi, kiinteä työkalurivi, tiiviit kortit tai lista heti ensimmäisessä ruudussa ja tietopaneeli ========================================================================== */ .phx { padding-top: clamp(16px, 2.4vw, 28px); padding-bottom: clamp(48px, 7vw, 90px); } .wrap.phx { max-width: 1680px; } /* Yläosa: mistä on kyse, luvut ja oman palvelimen lisäys */ .phx-yla { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; margin-bottom: 22px; } .phx-yla__intro { display: grid; gap: 14px; align-content: center; min-width: 0; } .phx-yla__h1 { margin: 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: clamp(32px, 3.6vw, 54px); line-height: 1; letter-spacing: -.035em; } .phx-yla__lead { margin: 0; max-width: 58ch; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; color: var(--text-2); } .phx-yla__luvut { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; margin-top: 2px; } .phx-luku { display: grid; grid-template-columns: 30px auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 9px 14px 9px 10px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); animation: phx-nouse .4s var(--ease) both; } .phx-luku__ic { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgb(var(--a1-rgb) / .14); color: var(--a1l); } .phx-luku__ic svg { width: 15px; height: 15px; } .phx-luku b { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 19px; line-height: 1.1; } .phx-luku small { font-size: 12px; color: var(--muted); } .phx-luku--oma { border-style: dashed; } .phx-lisaa { position: relative; overflow: hidden; display: grid; gap: 14px; padding: 20px; border-radius: 22px; background: radial-gradient(120% 100% at 100% 0%, rgb(var(--a1-rgb) / .3), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); border: 1px solid rgb(var(--a1-rgb) / .38); box-shadow: 0 30px 70px -40px rgb(var(--a1-rgb) / .65), inset 0 1px 0 rgba(255, 255, 255, .06); } .phx-lisaa__paa { display: flex; align-items: center; gap: 12px; } .phx-lisaa__ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; box-shadow: 0 10px 24px -10px rgb(var(--a1-rgb) / .9); } .phx-lisaa__ic svg { width: 20px; height: 20px; } .phx-lisaa h2 { margin: 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 850; font-size: 19px; line-height: 1.15; } .phx-lisaa__paa p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); } .phx-lisaa__paa p b { color: #fff; } .phx-lisaa__askeleet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: phxa; } .phx-lisaa__askeleet li { counter-increment: phxa; display: grid; align-content: start; gap: 2px; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); } .phx-lisaa__askeleet li::before { content: counter(phxa); display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 6px; border-radius: 7px; background: rgb(var(--a1-rgb) / .24); color: #fff; font-size: 12px; font-weight: 800; } .phx-lisaa__askeleet b { font-size: 13.5px; } .phx-lisaa__askeleet span { font-size: 12px; line-height: 1.35; color: var(--muted); } .phx-lisaa__nappi { justify-content: center; height: 46px; } .phx-lisaa__nappi svg { width: 17px; height: 17px; } /* Työkalurivi pysyy näkyvissä vieritettäessä */ .phx-tyokalut { position: sticky; top: calc(var(--hdr) + 8px); z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px; border-radius: 16px; background: rgba(12, 12, 16, .86); border: 1px solid var(--line-2); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 20px 44px -30px #000; } .phx-haku { flex: 1 1 260px; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 8px 0 13px; border-radius: 11px; background: rgba(0, 0, 0, .45); border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s; } .phx-haku:focus-within { border-color: var(--a1); box-shadow: 0 0 0 3px rgb(var(--a1-rgb) / .16); } .phx-haku svg { flex: none; width: 16px; height: 16px; color: var(--muted); } .phx-haku input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 15px; outline: none; } .phx-haku kbd { flex: none; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line-2); font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); } .phx-haku:focus-within kbd { display: none; } .phx-seg, .phx-nakyma { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(0, 0, 0, .45); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .phx-seg::-webkit-scrollbar { display: none; } .phx-seg button { height: 32px; padding: 0 11px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; } .phx-seg button:hover { color: #fff; } .phx-seg button[aria-selected="true"] { background: #fff; color: #0b0b0d; } .phx-nakyma button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; } .phx-nakyma button svg { width: 16px; height: 16px; } .phx-nakyma button[aria-pressed="true"] { background: rgba(255, 255, 255, .12); color: #fff; } /* Peli- ja aihevalikot */ .phx-valikko { position: relative; flex: none; } .phx-valikko__nappi { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .45); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; } .phx-valikko__nappi > svg:first-child { flex: none; width: 15px; height: 15px; color: var(--muted); } .phx-valikko__nappi span { overflow: hidden; text-overflow: ellipsis; } .phx-valikko__nappi.is-on { background: rgb(var(--a1-rgb) / .2); border-color: rgb(var(--a1-rgb) / .6); } .phx-valikko__nappi.is-on > svg:first-child { color: var(--a1l); } .phx-valikko__nappi i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .16); } .phx-valikko__nappi i svg { width: 10px; height: 10px; } .phx-valikko__nuoli { flex: none; width: 10px; height: 8px; color: var(--muted); } .phx-valikko__ikkuna { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(300px, calc(100vw - 40px)); display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: linear-gradient(180deg, #1a1a20, #111116); border: 1px solid var(--line-2); box-shadow: 0 30px 70px -24px #000; } .phx-valikko__ikkuna[hidden] { display: none; } .phx-valikko__haku { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 11px; border-radius: 10px; background: #000; border: 1px solid var(--line-2); } .phx-valikko__haku svg { width: 15px; height: 15px; color: var(--muted); } .phx-valikko__haku input { flex: 1; min-width: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 14px; outline: none; } .phx-valikko__lista { display: grid; gap: 1px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; } .phx-valikko__rivi { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; } .phx-valikko__rivi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .phx-valikko__rivi small { flex: none; font-family: var(--f-mono); font-size: 12px; color: var(--muted); } .phx-valikko__rivi:hover { background: rgba(255, 255, 255, .07); color: #fff; } .phx-valikko__rivi[aria-selected="true"] { color: #fff; background: rgb(var(--a1-rgb) / .18); } .phx-valikko__tyhja { margin: 0; padding: 10px; font-size: 13.5px; color: var(--muted); } /* Palvelimen kuvake */ .phx-kuvake { flex: none; width: 46px; height: 46px; border-radius: 14px; object-fit: cover; background: #111; } .phx-kuvake--tyhja { display: grid; place-items: center; color: #fff; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 20px; background: linear-gradient(135deg, hsl(var(--h, 0) 70% 52%), hsl(calc(var(--h, 0) + 40) 70% 30%)); } .phx-kuvake--iso { width: 80px; height: 80px; border-radius: 24px; font-size: 32px; } .phx-kuvake--pieni { width: 38px; height: 38px; border-radius: 11px; font-size: 16px; } .phx-kuvake--mini { width: 26px; height: 26px; border-radius: 50%; font-size: 12px; } /* Tulosrivi */ .phx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 2px 10px; font-size: 13.5px; color: var(--muted); } .phx-meta b { color: #fff; } .phx-tyhjenna { border: 0; padding: 0; background: none; color: var(--a1l); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .phx-tyhjenna:hover { text-decoration: underline; text-underline-offset: 3px; } /* Ruudukko: tiiviit kortit, useampi rinnakkain */ .phx-ruudukko { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } .phx-kortti { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 0 14px 12px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #16161c, #0f0f13); border: 1px solid var(--line-2); cursor: pointer; contain: layout paint; transition: transform .2s var(--ease), border-color .2s, box-shadow .25s; animation: phx-nouse .35s var(--ease) both; animation-delay: calc(min(var(--i, 0), 12) * 25ms); } .phx-kortti:hover, .phx-kortti:focus-visible { transform: translateY(-3px); border-color: hsl(var(--h, 0) 70% 58% / .6); box-shadow: 0 26px 54px -30px hsl(var(--h, 0) 75% 48% / .7); outline: none; } .phx-kortti.is-rikki { opacity: .75; border-style: dashed; } .phx-kortti__kansi { position: relative; overflow: hidden; height: 78px; margin: 0 -14px; background: linear-gradient(120deg, hsl(var(--h, 0) 70% 46%), hsl(calc(var(--h, 0) + 44) 72% 26%)); background-size: cover; background-position: center; } .phx-kortti__kansi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 22, 28, 0) 20%, #16161c); } .phx-kortti__kansi--kuva { transition: transform .5s var(--ease); } .phx-merkit { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; gap: 4px; } .phx-merkit--rivi { position: static; flex-wrap: wrap; margin-top: 4px; } .phx-merkki { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; background: rgba(8, 8, 11, .74); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 10.5px; font-weight: 800; white-space: nowrap; } .phx-merkki svg { width: 11px; height: 11px; } .phx-merkki--karki { color: #ffcf5c; border-color: rgba(255, 190, 40, .5); } .phx-merkki--sinulle { color: #ff8fb8; border-color: rgba(255, 110, 160, .5); } .phx-merkki--suosittu { color: #ff9a6a; border-color: rgba(255, 120, 60, .5); } .phx-merkki--uusi { color: #7ef0b0; border-color: rgba(60, 220, 140, .45); } .phx-merkki--oma { color: var(--a1l); border-color: rgb(var(--a1-rgb) / .55); } .phx-kortti__paa { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 11px; margin-top: -30px; min-width: 0; } .phx-kortti__paa .phx-kuvake { width: 52px; height: 52px; border-radius: 16px; } .phx-kortti__paa .phx-kuvake { border: 3px solid #16161c; box-shadow: 0 8px 18px -10px #000; } .phx-kortti__paa > div { min-width: 0; } .phx-kortti h3 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .phx-kortti__luvut { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; font-size: 12.5px; color: var(--muted); } .phx-kortti__luvut span { display: inline-flex; align-items: center; gap: 5px; } .phx-kortti__luvut span:first-child { color: #fff; font-weight: 600; } .phx-kortti__luvut .live-dot { width: 7px; height: 7px; } .phx-kortti__kuvaus { margin: 0; min-height: 2.9em; font-size: 13px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .phx-kortti__sirut { display: flex; gap: 5px; min-height: 22px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } .phx-kortti__sirut--kaikki { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; } .phx-siru { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); color: var(--text-2); font: inherit; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .phx-siru svg { width: 12px; height: 12px; color: var(--muted); } button.phx-siru { border-radius: 999px; background: rgb(var(--a1-rgb) / .12); border-color: rgb(var(--a1-rgb) / .3); color: var(--a1l); cursor: pointer; transition: background .15s, color .15s; } button.phx-siru:hover { background: var(--a1); color: #fff; } .phx-kortti__ala { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line); } .phx-arvio { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); } .phx-arvio svg { width: 14px; height: 14px; fill: #ffc93c; } .phx-arvio b { font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: #fff; } .phx-liity svg { width: 14px; height: 14px; } .phx-kortti .phx-liity, .phx-rivi .phx-liity { height: 30px; padding: 0 12px; font-size: 13px; gap: 6px; } .phx-rikki { display: flex; align-items: center; gap: 6px; margin: 0; min-height: 2.9em; font-size: 12.5px; color: #ffb4b4; } .phx-rikki svg { width: 14px; height: 14px; } .phx-kortti--luuranko { min-height: 214px; gap: 10px; cursor: default; pointer-events: none; animation: none; } .phx-kortti--luuranko .phx-kortti__kansi, .phx-kortti--luuranko i { background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, .04) 75%); background-size: 300% 100%; animation: phx-hohde 1.4s linear infinite; } .phx-kortti--luuranko .phx-kortti__kansi::after { display: none; } .phx-kortti--luuranko i { display: block; height: 12px; border-radius: 6px; } .phx-kortti--luuranko i:nth-child(2) { width: 60%; height: 18px; margin-top: 6px; } .phx-kortti--luuranko i:nth-child(3) { width: 90%; } .phx-kortti--luuranko i:nth-child(4) { width: 70%; } /* Lista */ .phx-lista--lista { display: grid; gap: 4px; } .phx-otsakkeet, .phx-rivi { display: grid; grid-template-columns: 38px minmax(0, 2.2fr) minmax(0, 1.4fr) 80px 80px 92px 82px; align-items: center; gap: 14px; } .phx-otsakkeet { padding: 0 14px 2px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .phx-rivi { padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); cursor: pointer; transition: background .15s, border-color .15s; animation: phx-nouse .3s var(--ease) both; animation-delay: calc(min(var(--i, 0), 14) * 18ms); } .phx-rivi:hover, .phx-rivi:focus-visible { background: rgba(255, 255, 255, .06); border-color: rgb(var(--a1-rgb) / .45); outline: none; } .phx-rivi.is-rikki { opacity: .7; border-style: dashed; } .phx-rivi__nimi { min-width: 0; } .phx-rivi__nimi h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; } .phx-rivi__nimi h3 > span { overflow: hidden; text-overflow: ellipsis; } .phx-rivi__nimi p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .phx-rivi__pelit { display: flex; gap: 5px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } .phx-rivi__luku { display: grid; gap: 1px; } .phx-rivi__luku b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 13.5px; font-weight: 600; } .phx-rivi__luku b svg { width: 13px; height: 13px; fill: #ffc93c; } .phx-rivi__luku small { font-size: 11.5px; color: var(--muted); } .phx-rivi .phx-liity { justify-self: end; } /* Tyhjä tulos */ .phx-tyhja { display: grid; justify-items: center; gap: 6px; padding: clamp(32px, 6vw, 64px) 20px; text-align: center; border-radius: 18px; border: 1px dashed var(--line-2); background: rgba(255, 255, 255, .02); } .phx-tyhja__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: rgb(var(--a1-rgb) / .14); color: var(--a1l); } .phx-tyhja__ic svg { width: 22px; height: 22px; } .phx-tyhja h3 { margin: 4px 0 0; font-size: 18px; } .phx-tyhja p { margin: 0; } .phx-tyhja__napit { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; } /* Lisäysvinkki listan alla */ .phx-vinkki { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 22px 0 0; font-size: 13.5px; color: var(--muted); } .phx-vinkki > svg { width: 16px; height: 16px; flex: none; } .phx-vinkki__nappi { border: 0; padding: 0; background: none; color: var(--a1l); font: inherit; font-weight: 700; cursor: pointer; } .phx-vinkki__nappi:hover { text-decoration: underline; text-underline-offset: 3px; } /* Tietopaneeli */ .phx-paneeli { position: fixed; inset: 0; z-index: 250; visibility: hidden; pointer-events: none; } .phx-paneeli.is-open { visibility: visible; pointer-events: auto; } .phx-paneeli__tausta { position: absolute; inset: 0; background: rgba(4, 4, 6, .6); opacity: 0; transition: opacity .25s; } .phx-paneeli.is-open .phx-paneeli__tausta { opacity: 1; } .phx-paneeli__ikkuna { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%); overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, #17171d, #0c0c10); border-left: 1px solid var(--line-2); box-shadow: -40px 0 100px -30px #000; transform: translateX(100%); transition: transform .3s var(--ease); } .phx-paneeli.is-open .phx-paneeli__ikkuna { transform: none; } html.phx-paneeli-auki { overflow: hidden; } .phx-paneeli__kansi { position: relative; height: 150px; background: linear-gradient(120deg, hsl(var(--h, 0) 70% 46%), hsl(calc(var(--h, 0) + 44) 72% 26%)); background-size: cover; background-position: center; } .phx-paneeli__kansi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 23, 29, 0) 35%, #17171d); } .phx-paneeli__sulje { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(8, 8, 11, .72); color: #fff; cursor: pointer; } .phx-paneeli__sulje svg { width: 15px; height: 15px; } .phx-paneeli__sis { position: relative; display: grid; gap: 18px; margin-top: -46px; padding: 0 22px 26px; } .phx-paneeli__paa { display: flex; align-items: flex-end; gap: 14px; min-width: 0; } .phx-paneeli__paa .phx-kuvake { border: 4px solid #17171d; } .phx-paneeli__paa > div { min-width: 0; } .phx-paneeli h2 { margin: 0; font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 24px; line-height: 1.1; overflow-wrap: anywhere; } .phx-paneeli__napit { display: flex; flex-wrap: wrap; gap: 8px; } .phx-paneeli__napit .btn { height: 42px; } .phx-paneeli__napit .btn svg { width: 16px; height: 16px; } .phx-paneeli__napit .btn svg[viewBox="0 0 24 24"]:not([fill="none"]) { fill: currentColor; } .phx-tiedot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .phx-tieto { display: grid; gap: 2px; padding: 10px 11px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); min-width: 0; } .phx-tieto > span { display: flex; align-items: center; height: 16px; color: var(--muted); } .phx-tieto > span svg { width: 15px; height: 15px; } .phx-tieto > span svg:not([fill="none"]) { fill: #ffc93c; } .phx-tieto b { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .phx-tieto small { font-size: 11.5px; color: var(--muted); } .phx-tieto--pvm b { font-size: 14.5px; line-height: 22px; } .phx-osio h3 { margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .phx-paneeli__kuvaus { font-size: 14.5px; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; white-space: pre-line; } .phx-paneeli__kuvaus p { margin: 0 0 .6em; } .phx-pelilinkit { display: flex; flex-wrap: wrap; gap: 6px; } .phx-pelilinkit a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 9px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); font-size: 13px; font-weight: 700; color: #fff; transition: background .15s, color .15s; } .phx-pelilinkit a svg { width: 14px; height: 14px; } .phx-pelilinkit a:hover { background: #fff; color: #0b0b0d; } .phx-arvioyht { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .phx-arvioyht > b { font-family: var(--f-display); font-stretch: 100%; font-weight: 900; font-size: 40px; line-height: 1; } .phx-arvioyht > div { display: grid; gap: 3px; } .phx-arvioyht small { font-size: 12.5px; color: var(--muted); } .phx-paneeli__tyhja { margin: 0; font-size: 14px; } .phx-arviot { display: grid; gap: 8px; } .phx-arvioteksti { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); } .phx-arvioteksti header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .phx-arvioteksti .avatar { width: 24px; height: 24px; border-radius: 50%; font-size: 11px; } .phx-arvioteksti header b { font-size: 13px; } .phx-arvioteksti time { margin-left: auto; font-size: 11.5px; color: var(--muted); } .phx-arvioteksti p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); overflow-wrap: anywhere; } .phx-paneeli__ala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); } .phx-lisaaja { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-size: 13px; color: var(--muted); } .phx-lisaaja b { color: #fff; } .phx-lisaaja .avatar { width: 28px; height: 28px; border-radius: 50%; font-size: 12px; } .phx-omat { display: flex; flex-wrap: wrap; gap: 6px; } .phx-omat .btn svg { width: 14px; height: 14px; } .phx-omat .btn[disabled] { opacity: .5; pointer-events: none; } .phx-vaara:hover { color: #ff8a8a; } /* Lisäys- ja muokkauslomake */ .phx-lomake { max-height: calc(100vh - 32px); overflow-y: auto; } .phx-lomake__paa { display: flex; align-items: center; gap: 14px; } .phx-lomake__paa h2 { margin: 0; } .phx-lomake__paa p { margin: 4px 0 0; } .phx-lomake__ic svg { width: 26px; height: 26px; } .phx-lomake .pehd__kentta { flex: 1; min-width: 0; } .phx-lomake .pehd__kentta input { width: 100%; } .phx-laskuri { float: right; font-style: normal; font-family: var(--f-mono); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); } .phx-laskuri.is-vajaa { color: #ffb4b4; } @keyframes phx-nouse { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes phx-hohde { from { background-position: 100% 0; } to { background-position: -50% 0; } } @media (max-width: 1100px) { .phx-otsakkeet, .phx-rivi { grid-template-columns: 38px minmax(0, 1fr) 80px 92px 82px; } .phx-otsakkeet > :nth-child(3), .phx-otsakkeet > :nth-child(4), .phx-rivi__pelit, .phx-rivi__luku--jasenet { display: none; } } @media (max-width: 760px) { .phx-lisaa__askeleet { grid-template-columns: minmax(0, 1fr); } .phx-lisaa__askeleet li { grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; } .phx-lisaa__askeleet li::before { grid-row: span 2; margin: 0; } .phx-tyokalut { position: static; } .phx-haku { flex-basis: 100%; } .phx-haku kbd { display: none; } .phx-valikko { flex: 1 1 calc(50% - 4px); min-width: 0; } .phx-valikko__nappi { width: 100%; max-width: none; } .phx-seg { flex: 1 1 0; min-width: 0; } .phx-nakyma { flex: none; } .phx-tiedot { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .phx-ruudukko { grid-template-columns: minmax(0, 1fr); gap: 10px; } .phx-otsakkeet { display: none; } .phx-rivi { grid-template-columns: 38px minmax(0, 1fr) auto; } .phx-rivi > .phx-rivi__luku { display: none; } .phx-rivi__nimi .phx-merkki { display: none; } .phx-yla { gap: 14px; margin-bottom: 16px; } .phx-yla__luvut { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .phx-luku { grid-template-columns: minmax(0, 1fr); padding: 8px 10px; } .phx-luku__ic { display: none; } .phx-luku b { font-size: 17px; } .phx-luku small { font-size: 11px; } .phx-lisaa { padding: 14px; gap: 12px; } .phx-lisaa .phx-lisaa__askeleet { display: none; } .phx-paneeli__sis { padding: 0 16px 22px; } } @media (max-width: 1000px) { .phx-yla { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .phx-kortti, .phx-rivi, .phx-kortti--luuranko .phx-kortti__kansi, .phx-kortti--luuranko i { animation: none; } .phx-paneeli__ikkuna { transition: none; } } /* FiveM / RedM: aikavalinnat ja yhteenveto samassa tilastopaneelissa. */ .cxt .cxt__paa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .cxt__paa h3 { margin: 0; } .cxt__ohjaimet { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .cxt__menu { flex: none; } .cxt > .panel__body { transition: opacity .18s ease; } .cxt.is-vaihtuu > .panel__body { opacity: .6; } @media (prefers-reduced-motion: reduce) { .cxt > .panel__body { transition: none; } } .cxt__ohjaimet .seg { padding: 2px; } .cxt__ohjaimet .seg button { min-height: 30px; height: 30px; padding: 0 11px; font-size: 11px; } .cxt__menu[aria-pressed="true"] { border-color: var(--line-2); background: rgba(255,255,255,.08); color: var(--text); } .cxt button:focus-visible { outline: 2px solid var(--a1l); outline-offset: 3px; } .cxt__luvut { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .cxt__luvut:empty { display: none; } .cxt__luvut > div { display: grid; grid-template-columns: auto 1fr; gap: 4px 9px; align-items: baseline; min-width: 0; } .cxt__luvut > div > span { grid-column: 1 / -1; } .cxt__luvut > div + div { border-left: 1px solid var(--line); padding-left: 16px; } .cxt__luvut span, .cxt__kohta > span { color: var(--muted); font-size: 12px; font-weight: 700; } .cxt__luvut b { font-family: var(--f-display); font-size: clamp(20px,2vw,25px); line-height: 1.1; } .cxt__luvut small, .cxt__kohta small { color: var(--muted); font-size: 12px; } .cxt__sisalto { min-width: 0; } .cxt__sisalto .chart { height: 180px; min-height: 0; } .cxt__sisalto .chart > svg { width: 100%; height: 100%; display: block; } .cxt__sisalto .empty { padding: 28px 16px; min-height: 0; font-size: 13px; } .cxt__vihje { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; } .cxt__yv { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 20px; } .cxt__kohdat { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } .cxt__kohta { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); } .cxt__kohta b { overflow-wrap: anywhere; font-size: 16px; line-height: 1.3; } .cxt__kohta small { line-height: 1.5; } .cxt__top { min-width: 0; } .cxt__top > .kz-lbl { display: block; margin-bottom: 12px; } .cxt__rivi { display: grid; grid-template-columns: 18px 24px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); text-align: left; font: inherit; } button.cxt__rivi { cursor: pointer; } button.cxt__rivi:hover { color: var(--a1l); } .cxt__sija { color: var(--muted); font: 12px var(--f-mono); } .cxt__rivi img, .cxt__kirjain { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; } .cxt__kirjain { display: grid; place-items: center; background: rgb(var(--a1-rgb) / .15); font-size: 12px; font-style: normal; } .cxt__nimi { min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 700; } .cxt__nimi i { display: block; height: 3px; margin-top: 7px; background: rgba(255,255,255,.06); } .cxt__nimi u { display: block; height: 100%; background: var(--a1); text-decoration: none; } .cxt__rivi > b { display: grid; gap: 4px; text-align: right; font: 13px var(--f-mono); } .cxt__rivi small { color: var(--muted); font-size: 10px; } .cxt__paivat { grid-column: 1 / -1; min-width: 0; } .cxt__palkit { display: flex; align-items: stretch; gap: 4px; height: 108px; margin-top: 12px; padding-bottom: 24px; } .cxt__palkki { position: relative; display: flex; align-items: end; justify-content: center; flex: 1; min-width: 0; } .cxt__palkki > i { display: block; width: 80%; max-width: 52px; border-radius: 4px 4px 0 0; background: rgb(var(--a1-rgb) / .35); } .cxt__palkki.is-huippu > i { background: var(--a1); } .cxt__palkki small { position: absolute; top: calc(100% + 6px); color: var(--muted); white-space: nowrap; font-size: 10px; } @media (max-width: 800px) { .cxt__yv { grid-template-columns: minmax(0,1fr); gap: 22px; } .cxt__luvut { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; } .cxt__luvut > div:nth-child(3) { border-left: 0; padding-left: 0; } } @media (max-width: 480px) { .cxt__ohjaimet { width: 100%; justify-content: space-between; gap: 8px; } .cxt__ohjaimet .seg { min-width: 0; } .cxt__kohdat { grid-template-columns: repeat(2,minmax(0,1fr)); } .cxt__luvut > div { grid-template-columns: minmax(0,1fr); gap: 3px; } .cxt__sisalto .chart { height: 150px; } .cxt__kohta { padding: 10px; } .cxt__kohta b { font-size: 14px; } .cxt__menu { padding-inline: 10px; } .cxt__palkki small { font-size: 8px; } } /* ============================================================ TEEMASTUDIO (teematesti.html) – oikean reunan paneeli, ts- ============================================================ */ .ts { position: fixed; top: calc(var(--hdr) + 4px); right: 12px; bottom: 12px; z-index: 70; width: 404px; display: flex; flex-direction: column; color: var(--text); background: rgba(9, 10, 15, .9); border: 1px solid var(--line-2); border-radius: 20px; box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, .4); backdrop-filter: blur(18px) saturate(1.2); transform: translateX(calc(100% + 24px)); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; } html.ts-auki .ts { transform: none; visibility: visible; transition: transform .35s var(--ease); } html.ts-auki .tt__piilo { display: none; } @media (min-width: 1180px) { html.ts-auki #sisalto { padding-right: 424px; } } .ts svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } .ts__paa { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 14px 10px 16px; } .ts__otsikko { min-width: 0; } .ts__kicker { margin: 0 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .ts__teema { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 0; border: 0; font: inherit; font-size: 20px; font-weight: 850; letter-spacing: -.02em; text-align: left; cursor: pointer; color: transparent; background: linear-gradient(100deg, #fff 10%, var(--a1) 60%, var(--a2)); -webkit-background-clip: text; background-clip: text; overflow: hidden; white-space: nowrap; } .ts__teema::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); } .ts__tyokalut { display: flex; gap: 4px; flex: none; } .ts-ikoni { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--text-2); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .ts-ikoni:hover:not(:disabled) { background: rgba(255, 255, 255, .07); color: #fff; } .ts-ikoni[aria-pressed="true"] { color: #fff; border-color: rgb(var(--a1-rgb) / .6); background: rgb(var(--a1-rgb) / .14); } .ts-ikoni:disabled { opacity: .3; cursor: default; } .ts-ikoni--vaara:hover:not(:disabled) { color: #ff8a8a; } .ts__valilehdet { display: flex; gap: 4px; padding: 0 12px 10px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .ts__valilehdet button { flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid transparent; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .ts__valilehdet button:hover { color: #fff; } .ts__valilehdet button[aria-selected="true"] { color: #fff; border-color: rgb(var(--a1-rgb) / .55); background: rgb(var(--a1-rgb) / .15); } .ts__runko { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 18px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; overscroll-behavior: contain; } .ts__ala { display: flex; justify-content: space-between; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } .ts__ala .is-virhe { color: #ff8a8a; } .ts__ala button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--a3); cursor: pointer; } .ts-ots { margin: 18px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .ts-alaots { margin: 10px 0 5px; font-size: 11.5px; font-weight: 700; color: var(--dim); } .ts-rivi { display: grid; grid-template-columns: 104px minmax(0, 1fr) 70px; align-items: center; gap: 10px; min-height: 34px; } .ts-rivi > :nth-child(2):last-child, .ts-rivi > .ts-seg, .ts-rivi > .ts-valinta, .ts-rivi > .ts-teksti, .ts-rivi > .ts-vari { grid-column: 2 / -1; } .ts-rivi__nimi { position: relative; font-size: 13px; color: var(--text-2); } .ts-rivi__nimi[data-vihje] { cursor: help; text-decoration: underline dotted rgba(255, 255, 255, .25); text-underline-offset: 3px; } .ts-rivi__nimi[data-vihje]:hover::after, .ts-rivi__nimi[data-vihje]:focus-visible::after { content: attr(data-vihje); position: absolute; left: 0; top: calc(100% + 6px); z-index: 5; width: 250px; padding: 9px 11px; border-radius: 10px; background: #14161f; border: 1px solid var(--line-2); box-shadow: 0 14px 30px -10px #000; font-size: 12.5px; line-height: 1.45; color: var(--text); text-decoration: none; pointer-events: none; } .ts-liuku, .ts-kaksi input { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: none; cursor: pointer; } .ts-liuku::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--a1) var(--p, 0%), rgba(255, 255, 255, .12) var(--p, 0%)); } .ts-liuku::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--a1) var(--p, 0%), rgba(255, 255, 255, .12) var(--p, 0%)); } .ts-liuku::-webkit-slider-thumb, .ts-kaksi input::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; margin-top: -5.5px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 3px rgb(var(--a1-rgb) / .55), 0 2px 6px rgba(0, 0, 0, .6); } .ts-liuku::-moz-range-thumb, .ts-kaksi input::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 3px rgb(var(--a1-rgb) / .55), 0 2px 6px rgba(0, 0, 0, .6); } .ts-liuku:focus-visible, .ts-kaksi input:focus-visible { outline: none; } .ts-liuku:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--a1), 0 0 0 6px rgb(var(--a1-rgb) / .3); } .ts-kaksi { position: relative; height: 22px; } .ts-kaksi::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 255, 255, .12) var(--a), var(--a1) var(--a), var(--a1) var(--b), rgba(255, 255, 255, .12) var(--b)); } .ts-kaksi input { position: absolute; inset: 0; pointer-events: none; } .ts-kaksi input::-webkit-slider-runnable-track { height: 4px; background: none; } .ts-kaksi input::-moz-range-track { background: none; } .ts-kaksi input::-webkit-slider-thumb { pointer-events: auto; cursor: pointer; } .ts-kaksi input::-moz-range-thumb { pointer-events: auto; cursor: pointer; } .ts-arvo { display: flex; align-items: center; height: 28px; padding: 0 7px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); font-family: var(--f-mono); font-size: 12px; color: #fff; white-space: nowrap; overflow: hidden; } .ts-arvo:focus-within { border-color: var(--a1); } .ts-arvo input { width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: right; outline: none; } .ts-arvo i { margin-left: 3px; font-style: normal; color: var(--muted); font-size: 11px; } .ts-arvo--vali { justify-content: flex-end; font-size: 11px; } .ts-teksti { height: 34px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: #fff; font: inherit; font-size: 14px; outline: none; } .ts-teksti:focus { border-color: var(--a1); } .ts-kytkin { position: relative; justify-self: start; width: 38px; height: 22px; padding: 0; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .08); cursor: pointer; transition: background .2s, border-color .2s; } .ts-kytkin i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #c8c8cf; transition: transform .2s var(--ease), background .2s; } .ts-kytkin[aria-checked="true"] { background: var(--a1); border-color: var(--a1); } .ts-kytkin[aria-checked="true"] i { transform: translateX(16px); background: #fff; } .ts-seg { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); } .ts-seg button { flex: 1 1 auto; padding: 5px 8px; border-radius: 7px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; } .ts-seg button:hover { color: #fff; } .ts-seg button[aria-pressed="true"] { background: rgb(var(--a1-rgb) / .22); color: #fff; box-shadow: inset 0 0 0 1px rgb(var(--a1-rgb) / .6); } .ts-valinta { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: #fff; font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .ts-valinta::after { content: ""; width: 6px; height: 6px; margin: 0 2px 3px 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); } .ts-valinta:hover { border-color: rgba(255, 255, 255, .3); } .ts-vari { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 5px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; justify-self: start; } .ts-vari i { width: 24px; height: 24px; border-radius: 7px; background: var(--v); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); flex: none; } .ts-vari code { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); text-transform: uppercase; } .ts-vari span { color: #fff; font-weight: 700; } .ts-vari:hover { border-color: rgba(255, 255, 255, .3); } .ts-varit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; } .ts-varit .ts-vari { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 9px; align-content: center; width: 100%; height: 48px; text-align: left; } .ts-varit .ts-vari i { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 9px; } .ts-varilista { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .ts-varilista__vari { position: relative; } .ts-varilista__vari .ts-vari { padding-right: 8px; } .ts-varilista__vari > button:last-child:not(.ts-vari), .ts-kuvat__kuva button { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: #1a1c25; color: #fff; font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; } .ts-varilista__vari:hover > button, .ts-kuvat__kuva:hover button, .ts-varilista__vari > button:focus-visible, .ts-kuvat__kuva button:focus-visible { opacity: 1; } .ts-varilista__lisaa, .ts-kuvat__lisaa { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 9px; border: 1px dashed var(--line-2); background: none; color: var(--text-2); cursor: pointer; } .ts-varilista__lisaa:hover, .ts-kuvat__lisaa:hover { color: #fff; border-color: var(--a1); } .ts-napit { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; } .ts-napit--vaara { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .ts-nappi { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; } .ts-nappi:hover:not(:disabled) { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); } .ts-nappi:disabled { opacity: .45; cursor: default; } .ts-nappi--paa { border-color: transparent; background: linear-gradient(180deg, var(--a1), var(--a1d)); box-shadow: 0 10px 24px -12px var(--red-glow); } .ts-nappi--paa:hover:not(:disabled) { border-color: transparent; background: linear-gradient(180deg, var(--a1l), var(--a1)); } .ts-nappi--iso { height: 44px; padding: 0 20px; font-size: 14px; } .ts-nappi--vaara { color: #ffb0b0; } .ts-nappi--vaara:hover:not(:disabled), .ts-nappi.is-vahvista { border-color: #ff6b6b; background: rgba(255, 80, 80, .14); color: #fff; } .ts-sirut { display: flex; flex-wrap: wrap; gap: 5px; } .ts-siru { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .ts-siru:hover { color: #fff; border-color: rgba(255, 255, 255, .3); } .ts-siru[aria-pressed="true"] { color: #fff; border-color: var(--a1); background: rgb(var(--a1-rgb) / .18); } .ts-kortti { margin: 6px 0; border-radius: 13px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); } .ts-kortti.is-auki { border-color: var(--line-2); background: rgba(255, 255, 255, .04); } .ts-kortti__paa { display: flex; align-items: center; gap: 4px; padding: 5px 6px 5px 4px; } .ts-kortti__avaa { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 4px 6px; border: 0; background: none; color: #fff; font: inherit; text-align: left; cursor: pointer; } .ts-kortti__avaa b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ts-kortti__avaa small { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; } .ts-kortti__napit { display: flex; flex: none; } .ts-kortti__napit .ts-ikoni { width: 28px; height: 28px; } .ts-kortti__napit svg { width: 14px; height: 14px; } .ts-kortti__runko { padding: 2px 12px 12px; border-top: 1px solid var(--line); } .ts-kortti__runko .ts-ots { margin-top: 14px; } .ts-pallo { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--v); box-shadow: 0 0 12px -2px var(--v), inset 0 0 0 1px rgba(255, 255, 255, .25); } .ts-peukalo { width: 30px; height: 30px; flex: none; border-radius: 7px; object-fit: contain; background: repeating-conic-gradient(#20222b 0 25%, #171920 0 50%) 0 0 / 10px 10px; } .ts-pudotus { display: grid; justify-items: center; gap: 4px; padding: 18px 14px 12px; border-radius: 14px; border: 1.5px dashed var(--line-2); background: rgba(255, 255, 255, .02); text-align: center; transition: border-color .15s, background .15s; } .ts-pudotus > svg { width: 26px; height: 26px; color: var(--muted); margin-bottom: 4px; } .ts-pudotus b { font-size: 14px; } .ts-pudotus > span { font-size: 12px; color: var(--muted); } .ts-pudotus.is-yli, .ts-kuvat.is-yli { border-color: var(--a1); background: rgb(var(--a1-rgb) / .1); } .ts-kuvat { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; padding: 8px; border-radius: 11px; border: 1px dashed transparent; } .ts-kuvat__kuva { position: relative; } .ts-kuvat__kuva img { display: block; width: 44px; height: 44px; border-radius: 8px; object-fit: contain; background: repeating-conic-gradient(#20222b 0 25%, #171920 0 50%) 0 0 / 10px 10px; } .ts-kuvat__lisaa { width: 44px; height: 44px; } .ts-tyhja { display: grid; justify-items: start; gap: 6px; margin-top: 18px; padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); } .ts-tyhja span { font-size: 13px; color: var(--muted); } .ts-viesti { margin: 10px 0 4px; padding: 9px 12px; border-radius: 10px; font-size: 13px; background: rgb(var(--a1-rgb) / .12); border: 1px solid rgb(var(--a1-rgb) / .4); } .ts-viesti--virhe { background: rgba(255, 80, 80, .12); border-color: rgba(255, 110, 110, .5); } .ts-tila { display: grid; gap: 2px; margin-top: 14px; padding: 14px; border-radius: 14px; border: 1px solid rgba(70, 200, 120, .35); background: rgba(35, 165, 90, .1); } .ts-tila--muutos { border-color: rgb(var(--a1-rgb) / .45); background: rgb(var(--a1-rgb) / .1); } .ts-tila b { font-size: 15px; } .ts-tila span, .ts-vinkki { font-size: 12.5px; color: var(--muted); } .ts-vinkki { margin: 6px 0; line-height: 1.5; } .ts-askeleet { margin: 8px 0; padding-left: 20px; font-size: 13px; color: var(--text-2); line-height: 1.6; } .ts-askeleet code, .ts-vinkki code { font-family: var(--f-mono); font-size: 11.5px; color: #fff; } .ts-luettelo { display: grid; gap: 4px; } .ts-luettelo__rivi { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); color: #fff; font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .ts-luettelo__rivi:hover:not(:disabled) { border-color: var(--line-2); } .ts-luettelo__rivi small { color: var(--muted); font-size: 11.5px; } .ts-merkki { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--muted); background: rgba(255, 255, 255, .06); } .ts-merkki--uusi, .ts-merkki--muokattu { color: #fff; background: rgb(var(--a1-rgb) / .3); } .ts-merkki--poistuu { color: #ffb0b0; background: rgba(255, 80, 80, .16); } .ts-pop { position: fixed; z-index: 105; max-height: min(70vh, 560px); overflow-y: auto; padding: 8px; border-radius: 14px; background: #0f1118; border: 1px solid var(--line-2); box-shadow: 0 24px 60px -18px #000; scrollbar-width: thin; } .ts-pop svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ts-pop .ts-alaots { margin: 10px 6px 4px; } .ts-lista { display: grid; gap: 1px; } .ts-lista button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 8px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; } .ts-lista button:hover { background: rgba(255, 255, 255, .07); color: #fff; } .ts-lista button[aria-pressed="true"] { color: #fff; background: rgb(var(--a1-rgb) / .18); } .ts-lista small { margin-left: auto; color: var(--muted); font-size: 11px; } .ts-lista em { width: 7px; height: 7px; border-radius: 50%; background: var(--a1); flex: none; } .ts-lista small + em { margin-left: 6px; } .ts-lista button > .ts-pallo { width: 14px; height: 14px; } .ts-varipop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } .ts-pop { overflow-x: hidden; } .ts-varipop .vp__sv { min-height: 150px; } .ts-varipop .vp__hex input, .ts-varipop .vp__now { height: 36px; } .ts-varipop .vp__now { width: 36px; } .ts-varipop .vp__sw { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; } .ts-varipop .ts-alaots { margin: 0 0 -4px; } .ts-kirjasto__ruudukko { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding: 0 4px; } .ts-kirjasto__ruudukko button { aspect-ratio: 1; padding: 4px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); cursor: pointer; } .ts-kirjasto__ruudukko button:hover { border-color: var(--a1); } .ts-kirjasto__ruudukko button.is-lisatty { border-color: #3ddc84; background: rgba(61, 220, 132, .12); } .ts-kirjasto__ruudukko img { width: 100%; height: 100%; object-fit: contain; } .ts-avaaja { margin-left: auto; } @media (max-width: 720px) { .ts { left: 8px; right: 8px; top: auto; bottom: 82px; width: auto; height: min(72vh, calc(100vh - var(--hdr) - 96px)); border-radius: 18px; transform: translateY(calc(100% + 16px)); } .ts-rivi { grid-template-columns: 92px minmax(0, 1fr) 64px; } } @media (prefers-reduced-motion: reduce) { .ts { transition: none; } } /* ============================================================ SIVUJEN YLÄOSA: otsikkopalikka samalla mallilla kuin palstasivun .f-head punainen kuvaketiili · otsikko + kuvaus vasemmalla · napit, haku ja luvut oikealla väli seuraavaan laatikkoon = palstojen laatikkoväli (12 px) ============================================================ */ .p-hero { padding-top: clamp(14px, 1.8vw, 22px); } .p-hero .orb { display: none; } .p-hero__intro { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic otsikko toiminnot" "ic kuvaus toiminnot"; align-items: center; column-gap: 18px; row-gap: 4px; max-width: none; min-height: 0; margin: 0; padding: 20px 22px; 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); } .p-hero__intro:not(:has(.p-hero__toiminnot)) { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic otsikko" "ic kuvaus"; } .p-hero__intro > div:not(.p-hero__aside):not(.p-hero__toiminnot) { grid-area: otsikko; min-width: 0; align-self: end; } .p-hero__intro > .p-hero__aside { display: contents; } .p-hero__ic { grid-area: ic; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(160deg, var(--a1), var(--a1dd)); box-shadow: 0 16px 34px -14px rgb(var(--a1-rgb) / .7), inset 0 1px 0 rgba(255, 255, 255, .3); } .p-hero__ic { color: #fff; } .p-hero__ic svg { width: 28px; height: 28px; } .p-hero__ic--kuva svg { width: 62%; height: auto; filter: brightness(0) invert(1); } .p-hero__intro .kicker { display: none; } .p-hero__intro .h1 { margin: 0; font-family: var(--f-display); font-weight: 850; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -.02em; } .p-hero__intro .lead { grid-area: kuvaus; align-self: start; margin: 0; max-width: none; font-size: 14.5px; line-height: 1.5; color: var(--muted); } .p-hero__toiminnot { grid-area: toiminnot; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; max-width: min(460px, 42vw); } .p-hero__toiminnot > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px !important; } .p-hero__toiminnot .btn { --h: 42px; padding: 0 18px; font-size: 14px; } .p-hero__toiminnot .chip { font-size: 12.5px; } .p-hero__toiminnot .notice { margin: 0; padding: 10px 14px; font-size: 13px; max-width: 400px; } .p-hero__toiminnot .search { width: 300px !important; height: 44px !important; } .p-hero__toiminnot .ph__luvut2 { gap: 6px; } .p-hero__toiminnot .ph__luvut2 > div { min-width: 0; padding: 7px 12px; border-radius: 12px; gap: 0; } .p-hero__toiminnot .ph__luvut2 b { font-size: 18px; } .p-hero__toiminnot .ph__luvut2 span, .p-hero__toiminnot .ph__luvut2 small { font-size: 11.5px; } /* väli palikasta seuraavaan laatikkoon kuten palstoilla */ .p-hero .subnav { margin-top: 12px; } .p-hero + section { padding-top: 12px; } .p-hero + :not(section) { margin-top: 12px; } .p-hero:has(.subnav) + section { padding-top: clamp(24px, 2.6vw, 36px); } @media (max-width: 900px) { .p-hero__intro, .p-hero__intro:not(:has(.p-hero__toiminnot)) { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic otsikko" "ic kuvaus" "toiminnot toiminnot"; row-gap: 4px; } .p-hero__toiminnot { justify-content: flex-start; max-width: none; margin-top: 10px; } .p-hero__toiminnot > div { justify-content: flex-start; } .p-hero__toiminnot .search { width: 100% !important; } } @media (max-width: 560px) { .p-hero__intro { grid-template-areas: "ic otsikko" "kuvaus kuvaus" "toiminnot toiminnot"; column-gap: 14px; row-gap: 8px; padding: 16px; } .p-hero__intro:not(:has(.p-hero__toiminnot)) { grid-template-areas: "ic otsikko" "kuvaus kuvaus"; } .p-hero__ic { width: 48px; height: 48px; border-radius: 14px; } .p-hero__intro > div:not(.p-hero__aside):not(.p-hero__toiminnot) { align-self: center; } .p-hero__toiminnot { margin-top: 2px; } } /* Yhtenäiset välit: kaikilla palstatyyppisillä sivuilla sama sarakeväli (22 px) ja laatikkoväli (12 px) */ @media (min-width: 1024px) { [data-page="jasenet"] .forum { grid-template-columns: minmax(0, 1fr) 320px; } } .f-head__seg { margin-left: auto; flex: none; } @media (max-width: 640px) { .f-head:has(.f-head__seg) { flex-wrap: wrap; } .f-head__seg { margin-left: 0; } } /* Tilastot: osioiden otsikot samaksi otsikkopalikaksi kuin sivujen yläosassa ja palstoilla */ .stat-sec { padding-top: 12px; } .stat-sec + .stat-sec { padding-top: clamp(28px, 3vw, 40px); } .stat-sec__head { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 16px; margin-bottom: 12px; padding: 16px 20px; 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); } .stat-sec__head > div:not(.tabs) { flex: 1; min-width: 0; } .stat-sec__head .h3 { margin: 0; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.15; letter-spacing: -.02em; } .stat-sec__head p { margin: 3px 0 0; font-size: 14px; } .stat-sec__head .tabs { flex: none; margin: 0; flex-wrap: nowrap; } .stat-sec__ic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, var(--a1), var(--a1dd)); box-shadow: 0 14px 30px -14px rgb(var(--a1-rgb) / .7), inset 0 1px 0 rgba(255, 255, 255, .3); } .stat-sec__ic svg { width: 22px; height: 22px; } @media (max-width: 900px) { .stat-sec__head { flex-wrap: wrap; } .stat-sec__head .tabs { flex-basis: 100%; overflow-x: auto; } } @media (max-width: 560px) { .stat-sec__head { padding: 14px 16px; gap: 12px; } .stat-sec__ic { width: 40px; height: 40px; border-radius: 12px; } } /* Otsikon vakiokorkeus kaikilla sivuilla: palikka alkaa samasta kohdasta ja otsikko on aina palikan yläreunassa (ei pystykeskitystä, joka siirsi otsikkoa palikan sisällön mukaan) */ .f-wrap { padding-top: clamp(14px, 1.8vw, 22px); } .p-hero__intro { align-items: start; } .p-hero__intro > div:not(.p-hero__aside):not(.p-hero__toiminnot) { align-self: start; } .p-hero__toiminnot { align-self: center; } .p-hero__intro .lead { align-self: start; } .f-head { align-items: flex-start; } .f-head > div:not(.f-head__seg) { flex: 1 1 0; min-width: 0; } .f-head__seg { align-self: center; } @media (max-width: 640px) { .f-head { padding: 16px; gap: 14px; } .f-head__ic { width: 48px; height: 48px; border-radius: 14px; } .f-head__seg { flex-basis: 100%; } } @media (max-width: 560px) { .p-hero__intro { padding: 16px; } .p-hero__intro > div:not(.p-hero__aside):not(.p-hero__toiminnot) { align-self: start; } } /* Kauppatorin tuoteryhmien otsikot: yhteinen osio-otsikkokortti. */ [data-page="kauppatori"] .shop__side.stat-sec__head { display: flex; align-items: center; justify-items: stretch; gap: 16px; margin-bottom: 12px; } [data-page="kauppatori"] .shop__heading { flex: 1; min-width: 0; } [data-page="kauppatori"] .shop__heading p { font-size: 14px; margin-top: 3px; } [data-page="kauppatori"] .shop__side.stat-sec__head > .shop__price, [data-page="kauppatori"] .shop__side.stat-sec__head > .btn { flex: none; margin-left: auto; } @media (max-width: 560px) { [data-page="kauppatori"] .shop__side.stat-sec__head { gap: 12px; } [data-page="kauppatori"] .shop__heading { flex-basis: calc(100% - 52px); } [data-page="kauppatori"] .shop__side.stat-sec__head > .shop__price, [data-page="kauppatori"] .shop__side.stat-sec__head > .btn { margin-left: 52px; } } /* Pelikeskus: pelivalinta ja levea keskustelu, palvelimet keskustelun alla. */ .pk2 { grid-template-columns: 260px minmax(0, 1fr); gap: 22px; } .pk2__sisalto { display: grid; gap: 12px; min-width: 0; align-content: start; } .pk2 .pkl { grid-template-rows: auto auto auto auto minmax(0, 1fr); } .pkl__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 6px; } .pkl__head h2 { margin: 0; font-size: 17px; } .pkl__head > span { color: var(--muted); font-size: 12px; } .pk2 .pkl__kaikki { font-size: 12px; padding: 10px 8px; gap: 8px; } .pk2 .pkl__kaikki b { white-space: normal; overflow: visible; } .pk2 .pk__otsikko { padding: 18px 20px; gap: 14px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.016)); border-color: var(--line); } .pk2 .pk__otsikko > div { min-width: 0; } .pk2 .pk__otsikko h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; overflow-wrap: anywhere; } .pk2 .pk__taide--iso { width: 52px; height: 52px; border-radius: 16px; font-size: 20px; box-shadow: none; } .pk2 .pk__polku { display: block; font-size: 10px; line-height: 16px; letter-spacing: .08em; margin-bottom: 5px; } /* Pelikeskus-rivin 21 px tasataan pystypehmusteesta. */ .pk2 .pk__otsikko:not(.pk__otsikko--etusivu) { padding-block: 7.5px; } .pk2 .sn__uusi { margin: 0; padding: 20px; align-items: start; } .pk2 .sn__uusi .tkf > textarea { min-height: 96px; padding: 14px 16px 46px; border-radius: 14px; line-height: 1.5; } .pk2 .sn__uusi .tkf__media { top: auto; bottom: 7px; transform: none; } .pk2 .sn__uusiala { gap: 12px; } .pk2 .f-empty { padding: 28px 20px; } .pk2 .pk2__oikea { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: auto; position: static; gap: 12px; } .pk2__oikea > * { min-width: 0; } .pk2__oikea .pk__laatikko { align-content: start; gap: 12px; } .pk2__oikea .pk__laatikko > .btn { align-self: end; } .pk2__oikea .pk__laatikko:only-child { grid-column: 1 / -1; } .pk2 .pk__palvelin { flex-wrap: wrap; } .pk2 .pk__palvelin > div { flex-basis: 140px; } @media (max-width: 860px) { .pk2 { grid-template-columns: minmax(0, 1fr); gap: 12px; } .pk2 .pkl { position: static; max-height: 300px; } } @media (max-width: 640px) { .pk2 .pk2__oikea { grid-template-columns: minmax(0, 1fr); } .pk2 .pk__otsikko { flex-direction: row; align-items: center; padding: 16px; } .pk2 .pk__otsikko:not(.pk__otsikko--etusivu) { padding-block: 5.5px; } .pk2 .sn__uusi { padding: 16px; column-gap: 10px; } .pk2 .sn__uusi .sn__uusiala { flex-wrap: wrap; } } .pk2 .pk2__oikea:empty { display: none; } /* Pelihaku modaalissa; palvelimet pysyvat keskustelun vierella. */ .pk2 { grid-template-columns: minmax(0, 1fr) 320px; } .pk2__sivu { display: grid; gap: 12px; min-width: 0; position: sticky; top: calc(var(--hdr) + 14px); max-height: calc(100dvh - var(--hdr) - 28px); overflow-y: auto; scrollbar-width: thin; } .pk2 .pk2__oikea { grid-template-columns: minmax(0, 1fr); } .pk2__uusimmat { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; } .pk2__uusimmat:hover { color: var(--text); } .pk2__uusimmat svg { width: 16px; height: 16px; flex: none; } .pk-haku { color: var(--text); background: var(--bg, #101014); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 0; width: min(720px, calc(100% - 32px)); height: min(760px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); box-shadow: 0 32px 100px rgba(0,0,0,.6); } .pk-haku::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(8px); } .pk-haku[open] { display: flex; flex-direction: column; } .pk-haku__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); flex: none; } .pk-haku__head h2 { margin: 0 0 3px; font-size: 23px; } .pk-haku__head span { color: var(--muted); font-size: 13px; } .pk-haku__suodatus { display: grid; gap: 14px; padding: 18px 22px 12px; flex: none; } .pk-haku .ph__haku { min-width: 0; width: 100%; } .pk-haku .pkl__lista { flex: 1; scrollbar-gutter: stable; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; overflow-y: auto; min-height: 0; margin: 0; padding: 0 22px 20px; } .pk-haku .pkl__ots, .pk-haku .pkl__tyhja { grid-column: 1 / -1; } .pk-haku .pkl__peli { padding: 10px; } .pk-haku .pkl__peli b { white-space: normal; overflow-wrap: anywhere; } @media (max-width: 860px) { .pk2 { display: flex; flex-direction: column; } .pk2__keski, .pk2__sivu { width: 100%; } .pk2__sivu { order: -1; position: static; max-height: none; overflow: visible; } .pk2__sivu .pk2__oikea { max-height: 260px; overflow-y: auto; } } @media (max-width: 560px) { .pk-haku .pkl__lista { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; } .pk-haku__head, .pk-haku__suodatus { padding-inline: 16px; } } /* Pelikeskuksen otsikon pelivalinta ja sita selittava teksti. */ [data-page="pelikeskus"] .pk-pelivalinta { flex-direction: column; align-items: flex-end; } [data-page="pelikeskus"] .pk-pelivalinta p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; text-align: right; } @media (max-width: 900px) { [data-page="pelikeskus"] .pk-pelivalinta { align-items: flex-start; } [data-page="pelikeskus"] .pk-pelivalinta p { text-align: left; } } /* Pelikeskus: selkea pelitunniste ja profiilisyotteen kommenttiketju. */ [data-page="pelikeskus"] .pk-pelivalinta p.chip { color: var(--text-2); font-weight: 600; border-color: var(--line-2); background: rgba(255,255,255,.06); white-space: normal; } .pk-post__peli { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid rgb(var(--a1-rgb) / .3); border-radius: 12px; background: rgb(var(--a1-rgb) / .08); min-width: 0; } .pk-post__peli:hover { background: rgb(var(--a1-rgb) / .16); border-color: var(--a1); } .pk-post__peli > span:not(.pk__taide) { flex: 1; min-width: 0; display: grid; gap: 2px; } .pk-post__peli small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; } .pk-post__peli strong { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; } .pk-post__peli > svg { width: 18px; height: 18px; flex: none; color: var(--muted); } /* Pelipostauksen kommenttikentta lahemmas kortin vasenta reunaa. */ .pk-post > .sn__ketju { margin-left: 0; padding-left: 12px; } /* Alkuperainen pelipostaus ja siihen liittyva kommenttialue yhtenaiseksi kehykseksi. */ .pk-post { gap: 0; } .pk-post > .pk-post__peli { margin-bottom: 12px; } .pk-post__sisalto { display: grid; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line-2); border-left: 2px solid rgb(var(--a1-rgb) / .55); border-radius: 14px; background: rgba(255,255,255,.045); } .pk-post__sisalto:has(+ .sn__ketju) { border-bottom-left-radius: 0; } .pk-post__sisalto > .sn__teksti, .pk-post__sisalto > .sn__ala { margin-left: 46px; } .pk-post > .sn__ketju { margin: 0; padding: 14px 0 4px 12px; border: 0; border-left: 2px solid rgb(var(--a1-rgb) / .55); border-radius: 0; background: transparent; } @media (max-width: 560px) { .pk-post__sisalto { padding: 12px; } .pk-post__sisalto > .sn__teksti, .pk-post__sisalto > .sn__ala { margin-left: 0; } } /* Pelikommenttien avattavat vastaushaarat. */ .pk-comment { display: grid; gap: 8px; min-width: 0; } .pk-comment__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .pk-comment__actions .sn__nappi { height: 28px; padding: 0 8px; font-size: 12px; } .pk-comment__actions [aria-pressed="true"] { color: var(--a1); border-color: var(--a1); } .pk-comment__children { margin-left: 12px; padding-left: 12px; border-left: 2px solid var(--line-2); min-width: 0; } .pk-comment__children > .pk-comment, .pk-comments__more > .pk-comment { margin-top: 12px; } .pk-comment__children > summary, .pk-comments__more > summary { cursor: pointer; color: var(--text-2); font-size: 12px; font-weight: 600; padding: 6px 0; } .pk-comment__children > summary:hover, .pk-comments__more > summary:hover { color: var(--a1); } .pk-comment__form { padding-left: 12px; min-width: 0; } .pk-comment__form[hidden] { display: none; } .pk-comment .sn__kupla { flex: 1; } .pk-comment__children .pk-comment__children .pk-comment__children .pk-comment__children .pk-comment__children .pk-comment__children { margin-left: 0; padding-left: 0; border-left: 0; } @media (max-width: 560px) { .pk-comment__children { margin-left: 4px; padding-left: 8px; } .pk-comment__form { padding-left: 0; } } /* Discordin tapainen kohdeviite ja rauhalliset kommenttirivit. */ .pk-comment { position: relative; gap: 5px; padding-top: 5px; } .pk-replyref { position: relative; display: flex; align-items: center; gap: 7px; margin-left: 38px; min-width: 0; font-size: 12px; line-height: 1.5; color: var(--muted); } .pk-replyref::before { content: ""; position: absolute; right: calc(100% + 8px); top: 9px; width: 18px; height: 18px; border-left: 2px solid var(--line-2); border-top: 2px solid var(--line-2); border-top-left-radius: 7px; } .pk-replyref__label { flex: none; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; } .pk-replyref > a, .pk-replyref > .f-kuka { flex: 0 1 auto; min-width: 0; max-width: 40%; } .pk-replyref__quote { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk-comment .sn__kupla { border: 0; border-radius: 0; background: transparent; padding: 0; } .pk-comment .sn__kommentti { padding: 4px 0 8px; } .pk-comment .sn__kommentti .avatar { width: 28px; height: 28px; } .pk-comment__actions { margin-top: 7px; } .pk-comment__actions .sn__nappi { background: transparent; border-color: transparent; } .pk-comment__actions .btn { background: transparent; border-color: transparent; color: var(--muted); } .pk-comment__actions .btn:hover { color: var(--text); border-color: var(--line-2); } .pk-comment__replylabel { color: var(--muted); font-size: 12px; margin-bottom: 8px; } @media (max-width: 560px) { .pk-replyref { flex-wrap: wrap; gap: 3px 6px; } .pk-replyref__quote { flex-basis: 100%; } .pk-replyref > a, .pk-replyref > .f-kuka { max-width: 75%; } } /* ================================================================ TESLES DISCUSSION / v1: yhteinen julkaisu- ja vastauskomponentti. Toistaiseksi kaytossa vain Pelikeskuksessa (.discussion). ================================================================ */ .discussion { --discussion-edge: rgb(var(--a1-rgb) / .3); --discussion-surface: rgba(255,255,255,.035); border: 1px solid var(--line-2); border-radius: 18px; padding: 18px; background: linear-gradient(145deg, rgba(255,255,255,.04), transparent 65%), rgba(10,10,14,.46); box-shadow: 0 8px 28px -20px rgba(0,0,0,.7); gap: 0; overflow: visible; } .discussion > .pk-post__peli { padding: 0 2px 13px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; margin-bottom: 14px; } .discussion > .pk-post__peli:hover { background: transparent; color: var(--a1); } .discussion > .pk-post__peli .pk__taide { width: 30px; height: 30px; border-radius: 9px; } .discussion > .pk-post__peli small { font-size: 9px; letter-spacing: .1em; } .discussion > .pk-post__peli strong { font-size: 13px; } .discussion .discussion__message { padding: 16px 18px; gap: 12px; border: 1px solid var(--line-2); border-left: 3px solid var(--discussion-edge); border-radius: 14px; background: var(--discussion-surface); } .discussion .discussion__message:has(+ .discussion__thread) { border-radius: 14px; } .discussion__message .sn__paa { gap: 11px; align-items: center; } .discussion__message .sn__kuka { gap: 2px; } .discussion__message .sn__kuka time { font-size: 12px; color: var(--muted); } .discussion .discussion__message > .sn__teksti { margin: 0; font-size: 17px; line-height: 1.6; } .discussion .discussion__message > .sn__ala { margin: 0; gap: 8px; flex-wrap: wrap; padding-top: 3px; } .discussion__message .sn__nappi { height: 34px; padding: 0 12px; font-size: 13px; background: rgba(0,0,0,.12); } .discussion > .discussion__thread { margin: 0 0 0 12px; padding: 16px 0 0 16px; border-left: 3px solid rgb(var(--a1-rgb) / .45); gap: 12px; } .discussion__thread > .sn__ketjuots { color: var(--text-2); font-size: 13px; letter-spacing: 0; text-transform: none; } .discussion .discussion__highlight { color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .04em; margin-bottom: 5px; } .discussion .sn__kommentit { gap: 14px; } .discussion .discussion__comment { gap: 6px; padding-top: 0; } .discussion .discussion__comment > .sn__kommentti { padding: 5px 0 8px; gap: 10px; } .discussion .discussion__comment .sn__kupla { font-size: 15px; line-height: 1.55; background: transparent; border: 0; padding: 0; } .discussion .discussion__comment .sn__kupla > p { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; margin-bottom: 4px; } .discussion .discussion__comment .sn__kupla > p time { font-size: 12px; color: var(--muted); } .discussion .pk-replyref { font-size: 12px; opacity: 1; } .discussion .pk-replyref__label { font-size: 11px; text-transform: none; letter-spacing: 0; } :is(.discussion, .pk-puu) .pk-comment__actions { margin-top: 7px; gap: 4px; } :is(.discussion, .pk-puu) .pk-comment__actions .btn, :is(.discussion, .pk-puu) .pk-comment__actions .sn__nappi { min-height: 32px; font-size: 13px; padding-inline: 9px; border-radius: 8px; } .discussion .pk-comment__children { border-left: 2px solid rgb(var(--a1-rgb) / .35); padding-left: 16px; margin-left: 13px; } .discussion .pk-comment__children > summary, .discussion .pk-comments__more > summary { display: list-item; width: fit-content; padding: 9px 12px; margin-top: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.035); color: var(--text-2); font-size: 13px; } .discussion details > summary:hover { background: rgba(255,255,255,.05); color: var(--text); } .discussion details[open] > summary { color: var(--text-2); } .discussion .pk-comment__form { padding: 10px 0 8px 12px; } .discussion .pk-comment__replylabel { padding-left: 4px; font-size: 11px; } .discussion .sn__vastaa textarea.input { background: rgba(0,0,0,.26); border-color: var(--line-2); font-size: 14px; } .discussion .sn__vastaa textarea.input:focus { border-color: var(--a1); outline: 0; box-shadow: 0 0 0 2px rgb(var(--a1-rgb) / .1); } .discussion .sn__vastaarivi > .btn { height: 38px; font-size: 13px; } .discussion :is(button, a, summary):focus-visible { outline: 2px solid var(--a1); outline-offset: 3px; } .discussion .pk-comment__children .pk-comment__children .pk-comment__children .pk-comment__children .pk-comment__children { padding-left: 0; margin-left: 0; border-left: 0; } @media (max-width: 560px) { .discussion { border-radius: 16px; padding: 12px; } .discussion .discussion__message { padding: 14px; gap: 13px; } .discussion .discussion__message > .sn__teksti { font-size: 16px; } .discussion > .discussion__thread { margin-left: 5px; padding-left: 10px; } .discussion .pk-comment__children { margin-left: 5px; padding-left: 10px; } .discussion .pk-comment__form { padding-left: 0; } .discussion .sn__vastaarivi { flex-wrap: wrap; } .discussion .sn__vastaarivi > .tkf { flex-basis: 100%; } .discussion .sn__vastaarivi > .btn { margin-left: auto; } } .discussion-compose { border-color: var(--line-2); background: rgba(255,255,255,.035); } .discussion-compose__heading { font-size: 12px; color: var(--text-2); font-weight: 700; } .discussion-compose .tkf > textarea.input { line-height: 1.6; } .discussion-compose .sn__uusiala { padding-top: 2px; } .discussion .discussion__message .sn__kuka > a, .discussion .discussion__comment .sn__kupla > p > a { font-size: 14px; } :is(.discussion, .pk-puu) .pk-comment__actions .btn { color: var(--text-2); } :is(.discussion, .pk-puu) .pk-comment__actions .sn__nappi { border-color: var(--line); background: rgba(255,255,255,.025); } .discussion .sn__vastaa > .sn__vastaatyokalut { gap: 4px; } /* Tiivis julkaisulista; varsinainen keskustelu avataan omalle reitille. */ .discussion--compact { padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s; } .discussion--compact:hover { border-color: rgb(var(--a1-rgb) / .45); background: rgba(255,255,255,.055); } .discussion.discussion--compact > .pk-post__peli { padding: 0 0 8px; margin-bottom: 8px; border: 0; gap: 8px; } .discussion--compact > .pk-post__peli small { display: none; } .discussion--compact > .pk-post__peli .pk__taide { width: 22px; height: 22px; border-radius: 7px; font-size: 10px; } .discussion.discussion--compact .discussion__message { padding: 0; border: 0; background: transparent; gap: 10px; } .discussion--compact .sn__kuka { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; } .discussion--compact .sn__paa > .av-w, .discussion--compact .sn__paa > .avatar { width: 28px; height: 28px; } .discussion.discussion--compact .discussion__message > .sn__teksti { font-size: 15px; line-height: 1.55; max-height: 4.65em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .discussion--compact .kg img, .discussion--compact .kg__gif { max-height: 240px; object-fit: contain; } .discussion--compact .discussion__open { color: var(--text-2); } .discussion--compact .discussion__open:hover { border-color: var(--a1); color: var(--text); } @media (prefers-reduced-motion: reduce) { .discussion--compact { transition: none; } } /* Pelikeskus: selkeä poisto, näkyvämpi aika, paluu pelin etusivulle */ .discussion .discussion__message .sn__paa { position: relative; } .discussion .discussion__pois { width: auto; height: 30px; padding: 0 11px; gap: 6px; display: inline-flex; align-items: center; align-self: flex-start; border-radius: 999px; border: 1px solid rgba(255, 90, 90, .55); background: rgba(220, 40, 40, .16); color: #ff8a8a; font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; } .discussion .discussion__pois svg { width: 14px; height: 14px; } .discussion .discussion__pois:hover { background: #d93636; border-color: #d93636; color: #fff; } .discussion .discussion__message .sn__kuka time { font-size: 13px; font-weight: 600; color: var(--text-2); } .discussion .discussion__comment .sn__kupla > p time { font-size: 12.5px; font-weight: 600; color: var(--text-2); } :is(.discussion, .pk-puu) .pk-comment__actions .pk-comment__pois { color: #ff8a8a; } :is(.discussion, .pk-puu) .pk-comment__actions .pk-comment__pois:hover { color: #fff; background: #d93636; border-color: #d93636; } .pk2 .pk__otsikko > div { flex: 1; } .pk__kotiin { flex: none; margin-left: auto; align-self: center; } /* Pelikeskus: Reddit-tyyliset peukut, OP-merkki, kommentin pienennys ja isommat nimet/kuvat */ .discussion .discussion__message .sn__paa .avatar { width: 44px; height: 44px; } .discussion .discussion__message .sn__kuka > .f-kuka, .discussion .discussion__message .sn__kuka > a { font-size: 16.5px; } .discussion .discussion__message .sn__kuka .f-name { font-size: 16.5px; } .discussion .discussion__comment .sn__kommentti .avatar { width: 36px; height: 36px; } .discussion .discussion__comment .sn__kupla > p .f-name { font-size: 15px; } .discussion .discussion__comment .sn__kupla > p { align-items: center; } .discussion .discussion__comment .sn__kupla > p time::before { content: "•"; margin-right: 6px; color: var(--dim); } .discussion--compact .sn__paa > .av-w, .discussion--compact .sn__paa > .avatar, .discussion--compact .sn__paa .avatar { width: 38px; height: 38px; } .discussion .pk-replyref { margin-left: 46px; } .pk-vote { display: inline-flex; align-items: center; gap: 0; padding: 0; flex: none; height: 34px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); } .pk-vote .pk-vote__btn { width: 28px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--text-2); cursor: pointer; transition: color .15s, background .15s; } .pk-vote .pk-vote__btn svg { width: 17px; height: 17px; } .pk-vote__btn:disabled { cursor: progress; } .pk-vote .pk-vote__btn--ylos:hover { color: #4ade80; background: rgba(74,222,128,.14); } .pk-vote .pk-vote__btn--alas:hover { color: #f87171; background: rgba(248,113,113,.14); } .pk-vote__luku { min-width: 14px; padding: 0 1px; text-align: center; font-size: 13.5px; font-weight: 700; color: inherit; font-variant-numeric: tabular-nums; } .pk-vote[data-vote-tone="1"] { color: #4ade80; border-color: rgba(74,222,128,.6); background: rgba(74,222,128,.12); } .pk-vote[data-vote-tone="-1"] { color: #f87171; border-color: rgba(248,113,113,.6); background: rgba(248,113,113,.12); } .pk-vote[data-vote-tone="1"] .pk-vote__btn, .pk-vote[data-vote-tone="-1"] .pk-vote__btn { color: inherit; } .pk-vote .pk-vote__btn[aria-pressed="true"] svg, .f-vote button[aria-pressed="true"] svg { color: #4ade80; stroke: #4ade80; fill: #fff; fill-opacity: 1; } .pk-op { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: rgb(var(--a1-rgb) / .18); color: var(--a1); font-size: 11px; font-weight: 800; letter-spacing: .04em; } /* Pelikeskus: Reddit-tyylinen kommenttipuu (avattu postaus). */ .discussion, .pk-puu { --puu: color-mix(in srgb, var(--a1) 45%, #2a2a31); } .discussion > .discussion__thread { border-left: 0; margin-left: 0; padding-left: 0; } :is(.discussion, .pk-puu) .pk-c { --av: 36px; --vali: 12px; --yla: 14px; --r: calc(var(--av) / 2 - 2px); --x: calc(var(--r) - var(--av) - var(--vali)); position: relative; display: grid; grid-template-columns: var(--av) minmax(0, 1fr); column-gap: var(--vali); row-gap: 0; padding: 0; margin: 0; } :is(.discussion, .pk-puu) .pk-c__av { grid-column: 1; grid-row: 1; width: var(--av); height: var(--av); } :is(.discussion, .pk-puu) .pk-c__av .av-w, :is(.discussion, .pk-puu) .pk-c__av .avatar { width: var(--av); height: var(--av); margin: 0; } :is(.discussion, .pk-puu) .pk-c__paa { grid-column: 2; grid-row: 1; min-height: var(--av); display: flex; align-items: center; flex-wrap: wrap; gap: 2px 7px; min-width: 0; } :is(.discussion, .pk-puu) .pk-c__paa .f-name { font-size: 15px; } :is(.discussion, .pk-puu) .pk-c__paa time { font-size: 12.5px; font-weight: 600; color: var(--text-2); } :is(.discussion, .pk-puu) .pk-c__paa time::before { content: "•"; margin-right: 6px; color: var(--dim); } :is(.discussion, .pk-puu) .pk-c__teksti { grid-column: 2; grid-row: 2; font-size: 15px; line-height: 1.55; padding-top: 2px; min-width: 0; overflow-wrap: anywhere; } :is(.discussion, .pk-puu) .pk-c__toiminnot { grid-column: 2; grid-row: 3; margin: 4px 0 0; } :is(.discussion, .pk-puu) .pk-c > .pk-comment__form { grid-column: 2; grid-row: 4; padding: 8px 0 4px; } :is(.discussion, .pk-puu) .pk-c > .pk-comment__children { grid-column: 2; grid-row: 5; margin: 0; padding: 0; border: 0; } :is(.discussion, .pk-puu) .pk-c__viiva { grid-column: 1; grid-row: 2; justify-self: start; margin-left: var(--r); width: 0; border-left: 2px solid var(--puu); } :is(.discussion, .pk-puu) .pk-c__viiva--lomake { grid-row: 4; margin-top: 0; } :is(.discussion, .pk-puu) .pk-c__nappi { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; align-items: flex-start; } :is(.discussion, .pk-puu) .pk-c__nappi::before, :is(.discussion, .pk-puu) .pk-c__nappi::after { margin-left: var(--r); } :is(.discussion, .pk-puu) .pk-c__nappi > .pk-c__pienenna { margin-left: calc(var(--r) - 9px); } :is(.discussion, .pk-puu) .pk-c__nappi::before, :is(.discussion, .pk-puu) .pk-c__nappi::after { content: ""; flex: 1; width: 0; min-height: 4px; border-left: 2px solid var(--puu); } :is(.discussion, .pk-puu) .pk-c__pienenna { border: 0; background: none; padding: 0; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 700; } :is(.discussion, .pk-puu) .pk-c__pienenna svg { width: 20px; height: 20px; flex: none; display: block; } :is(.discussion, .pk-puu) .pk-c__pienenna { line-height: 0; } :is(.discussion, .pk-puu) .pk-c__kiinni, :is(.discussion, .pk-puu) .pk-c.is-pienennetty > .pk-c__nappi .pk-c__auki { display: none; } :is(.discussion, .pk-puu) .pk-c.is-pienennetty > .pk-c__nappi .pk-c__kiinni { display: block; } :is(.discussion, .pk-puu) .pk-c__pienenna:hover { color: var(--a1); } /* Vastaukset: kaari vanhemman viivasta lapsen kuvan keskelle; ei-viimeinen vastaus jatkaa viivaa alas */ :is(.discussion, .pk-puu) .pk-comment__children > .pk-c { padding-top: var(--yla); margin: 0; } :is(.discussion, .pk-puu) .pk-comment__children > .pk-c::after { content: ""; position: absolute; box-sizing: border-box; left: var(--x); top: 0; width: calc(-1 * var(--x)); height: calc(var(--yla) + var(--av) / 2 + 1px); border: 0 solid var(--puu); border-left-width: 2px; border-bottom-width: 2px; border-bottom-left-radius: 14px; pointer-events: none; } :is(.discussion, .pk-puu) .pk-comment__children > .pk-c:not(:last-child)::before { content: ""; position: absolute; left: var(--x); top: 0; bottom: 0; width: 0; border-left: 2px solid var(--puu); pointer-events: none; } /* Pienennetty: vain kuva, nimi ja "+ N vastausta" */ :is(.discussion, .pk-puu) .pk-c.is-pienennetty > .pk-comment__children, :is(.discussion, .pk-puu) .pk-c.is-pienennetty > .pk-comment__form, :is(.discussion, .pk-puu) .pk-c.is-pienennetty > .pk-c__viiva--lomake { display: none; } :is(.discussion, .pk-puu) .pk-c.is-pienennetty > .pk-c__nappi::after { visibility: hidden; } :is(.discussion, .pk-puu) .sn__kommentit:has(> .pk-c) { gap: 18px; } @media (max-width: 560px) { :is(.discussion, .pk-puu) .pk-c { --av: 30px; --vali: 10px; } } /* Pääkommenttien välissä ohut erotinviiva (vastausten välissä ei) */ :is(.discussion, .pk-puu) .sn__kommentit > .pk-c + .pk-c { border-top: 1px solid var(--line-2); padding-top: 18px; } /* Palstat: kommenttipuun lisät (vastauslomake omalle rivilleen, ei katkoviivaa) */ .pk-puu { margin-top: 18px; } .pk-puu > .sn__kommentit { border-top: 0; padding-top: 0; } :is(.discussion, .pk-puu) .pk-c > .pk-c__lomake { grid-column: 2; grid-row: 4; padding: 8px 0 4px; } :is(.discussion, .pk-puu) .pk-c > .pk-c__lomake:empty, :is(.discussion, .pk-puu) .pk-c.is-pienennetty > .pk-c__lomake { display: none; } .pk-puu .pk-c__teksti .f-comment__text { margin: 0; color: var(--text); font-size: 15px; } .pk-puu .pk-c__paa .f-role { margin-left: 0; } /* Palstat: postauskortti Pelikeskuksen tyyliin */ .f-post.f-post--pk { display: block; } .f-post--pk[data-avaa-posti] { cursor: pointer; } .f-post--pk .f-post__body { padding: 16px 18px 14px; display: grid; gap: 10px; } .f-post__paa { display: flex; align-items: center; gap: 11px; min-width: 0; } .f-post__paa > .avatar, .f-post__paa > .av-w, .f-post__paa > .av-w .avatar { width: 42px; height: 42px; flex: none; } .f-post__kuka { flex: 1; min-width: 0; display: grid; gap: 2px; } .f-post__nimi { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; } .f-post__nimi .f-name { font-size: 16px; } .f-post--pk .f-post__meta { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text-2); gap: 4px 8px; } .f-post--pk .f-post__meta > span:not(.f-role)::before { content: "•"; margin-right: 8px; color: var(--dim); } .f-post--pk .f-post__title { margin: 0; } .f-post--pk h1.f-post__title { font-size: clamp(22px, 2.4vw, 28px); } .f-post--pk .f-post__foot { margin: 2px 0 0; gap: 8px; align-items: center; } .f-post--pk .f-post__foot .pk-vote__btn { width: 28px; height: 32px; padding: 0; border-radius: 999px; gap: 0; justify-content: center; } .f-post--pk .f-post__foot .pk-vote__btn:hover { transform: none; } .f-post--pk .f-post__foot .f-post__kommentit { height: 34px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--text-2); } .f-post--pk .discussion__pois { width: auto; height: 30px; padding: 0 11px; gap: 6px; display: inline-flex; align-items: center; align-self: flex-start; border-radius: 999px; border: 1px solid rgba(255, 90, 90, .55); background: rgba(220, 40, 40, .16); color: #ff8a8a; font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; } .f-post--pk .discussion__pois svg { width: 14px; height: 14px; } .f-post--pk .discussion__pois:hover { background: #d93636; border-color: #d93636; color: #fff; } .f-comments .pk-comment__pois { color: #ff8a8a; } /* Avatun postauksen paluunappi oikeassa yläreunassa (Syöte, Palstat) */ .discussion__takaisin { --h: 30px; align-self: flex-start; flex: none; padding: 0 12px; font-size: 12.5px; } .discussion__takaisin svg { transform: rotate(180deg); width: 14px; height: 14px; } /* Julkaisun nimirivi (nimi • aika) ja aihe nimen alla: peli Pelikeskuksessa, Syöte jäsenillä */ .discussion .discussion__message .sn__kuka { display: grid; gap: 3px; } .discussion__kukarivi { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; } .discussion__kukarivi time { font-size: 12.5px; font-weight: 600; color: var(--text-2); } .discussion__kukarivi time::before { content: "•"; margin-right: 8px; color: var(--dim); } .discussion__aihe { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 12.5px; font-weight: 800; color: #fff; } .discussion__aihe:hover { color: var(--red-3); } .discussion .discussion__message .sn__kuka > .discussion__aihe { font-size: 12.5px; } .discussion__aihe svg { width: 14px; height: 14px; } /* Palstat: aika nimen oikealla puolella kuten Pelikeskuksessa ja Syötteessä */ .f-post__nimi time { font-size: 12.5px; font-weight: 600; color: var(--text-2); } .f-post__nimi time::before { content: "•"; margin-right: 8px; color: var(--dim); } /* Nimirivin piste (nimi • aika): piirretty pallo, ei fonttimerkkiä, jotta väli on molemmin puolin sama kaikissa näkymissä */ .discussion__kukarivi, .f-post__nimi, :is(.discussion, .pk-puu) .pk-c__paa { column-gap: 0; } .discussion__kukarivi time::before, .f-post__nimi time::before, :is(.discussion, .pk-puu) .pk-c__paa time::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); margin: 0 var(--piste-vali, 8px); vertical-align: middle; position: relative; top: -1px; } .discussion__kukarivi time, .f-post__nimi time, :is(.discussion, .pk-puu) .pk-c__paa time { font-variant-numeric: proportional-nums; } :is(.discussion, .pk-puu) .pk-c__paa > .pk-op, :is(.discussion, .pk-puu) .pk-c__paa > .f-role, .f-post__nimi > .f-role { margin-left: 8px; } /* Merkki, OP ja roolilaatta ulottuvat laatikon reunaan (kirjaimessa on pieni reunatila): puoli pikseliä lisää, jotta piste jää optisesti keskelle */ .discussion__kukarivi > .f-kuka:has(.f-badget) + time::before, .discussion__kukarivi > .pk-op + time::before, .discussion__kukarivi > .f-role + time::before, .f-post__nimi > .f-kuka:has(.f-badget) + time::before, .f-post__nimi > .pk-op + time::before, .f-post__nimi > .f-role + time::before, :is(.discussion, .pk-puu) .pk-c__paa > .f-kuka:has(.f-badget) + time::before, :is(.discussion, .pk-puu) .pk-c__paa > .pk-op + time::before, :is(.discussion, .pk-puu) .pk-c__paa > .f-role + time::before { margin-left: calc(var(--piste-vali, 8px) + .5px); } /* Yhteinen emojivalikko kirjoittimille. */ .emv { position: fixed; z-index: 310; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-2); border-radius: 14px; background: #131317; color: #fff; box-shadow: 0 16px 60px #0009; } .emv[hidden] { display: none; } .emv__paa { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); } .emv button { border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; min-width: 32px; min-height: 36px; } .emv__paa button { font-size: 24px; } .emv__ruudukko { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; padding: 8px; overflow-y: auto; overscroll-behavior: contain; } .emv__ruudukko button { padding: 0; font-size: 24px; font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; } .emv button:hover { background: rgb(var(--a1-rgb) / .22); } .emv button:focus-visible { outline: 2px solid var(--a1); outline-offset: -2px; background: rgb(var(--a1-rgb) / .22); } /* ---------- PROFIILI 2026-10: ikkunan levyinen kansi, kuva ja nimi vierekkäin, luvut ja merkit oikealla, mallin mukaiset julkaisut ja sivupalkki ---------- */ .pf { container-type: inline-size; } /* Kansi koko sisällön levyisenä heti yläpalkin alla. Kansi, otsikkokortti ja Tietoja-laatikko muodostavat yhden yhtenäisen laatikon kuten mallissa. */ .pfk { position: relative; z-index: 0; overflow: hidden; border-radius: 16px 16px 0 0; } .pfk .pf__kansi { position: relative; width: 100%; height: auto; aspect-ratio: 6.4 / 1; min-height: 140px; max-height: 320px; border-radius: 0; } .pfk .pf__kansi::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgba(6, 8, 12, .35)); } .f-wrap.f-wrap--pf { position: relative; z-index: 1; margin-top: 0; padding-top: 0; } @media (min-width: 1024px) { [data-page="jasenet"] .f-wrap--pf > .wrap { width: 100%; max-width: none; padding-inline: 16px; } [data-page="jasenet"] .forum.forum--pfk { grid-template-columns: minmax(0, 2.82fr) minmax(300px, 1fr); gap: 0 16px; } .forum--pfk .forum__side > .f-box:first-child { border-radius: 16px; } } @media (max-width: 1023px) { .pfk .pf__kansi { aspect-ratio: 3 / 1; min-height: 0; } } .forum--pfk .forum__side { position: static; gap: 12px; align-self: start; } .forum--pfk .sos__palstat { display: none; } .forum--pfk .forum__main { gap: 12px; } /* Yhteinen korttipinta kuten mallissa */ .pf--irti, .pf2__tabit, .forum--pfk .discussion--compact, .forum--pfk .sn__uusi, .forum--pfk .forum__side .f-box, .pf2__tietoja { background: #12161d; border: 1px solid rgba(255, 255, 255, .07); border-radius: 16px; box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .8); } .pf--irti { overflow: visible; border-top: 0; border-radius: 0 0 16px 16px; box-shadow: none; } /* Otsikkokortti */ .pf__runko.pf2 { display: grid; grid-template-columns: 150px minmax(0, 1fr) 290px; grid-template-areas: "kuva vasen oikea"; gap: 0 24px; align-items: start; padding: 0 24px 20px; } .pf2 > .pf__kuva { grid-area: kuva; width: 150px; height: 150px; margin-top: -58px; z-index: 2; } .pf--irti .pf2 > .pf__kuva { margin-top: -36px; } .pf2 > .pf__kuva .f-profile__av { width: 150px; height: 150px; font-size: 56px; box-shadow: 0 0 0 4px #12161d, 0 0 0 5px rgba(255, 255, 255, .12), 0 16px 36px rgba(0, 0, 0, .45); } .pf2 .pf__piste { right: 9px; bottom: 9px; width: 20px; height: 20px; box-shadow: 0 0 0 3px #12161d; } .pf2__vasen { grid-area: vasen; min-width: 0; padding-top: 22px; } .pf2 .f-profile__name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-family: var(--f-body); font-size: clamp(24px, 2.2vw, 31px); font-weight: 700; font-stretch: 100%; line-height: 1.2; letter-spacing: -.01em; } .pf2__vahv { display: inline-flex; width: 24px; height: 24px; color: #6d7cff; } .pf2__vahv svg { width: 100%; height: 100%; } .pf2__kahva { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; } .pf2__tunnus { font-size: 15.5px; color: var(--muted); } .pf2__kahva .pf__siru { height: 30px; padding: 0 12px; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); } .pf2__kahva .pf__siru svg { width: 14px; height: 14px; } .pf2__esittely { margin-top: 16px; max-width: 64ch; font-size: 14.5px; line-height: 1.55; color: var(--text-2); } .pf2__esittely p, .pf2__esittely .f-profile__bio { margin: 0; } /* Esittely enintään kaksi riviä kuten mallissa */ .pf2__bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 3.1em; } .pf2__bio .md-heading, .pf2__bio p, .pf2__bio div { display: inline; margin: 0; font-size: 1em; font-weight: inherit; letter-spacing: 0; } .pf2__iskulause { color: #e9e9ee; margin-bottom: 3px !important; } .pf2__iskulause i { margin: 0 9px; font-style: normal; color: var(--muted); } .pf2__esittely .md-heading { margin: 0 0 3px; font-size: 1em; font-weight: 600; letter-spacing: 0; } .pf2__esittely b { color: #fff; } .pf2__tiedot { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 18px; font-size: 14px; color: var(--text-2); } .pf2__tieto { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; } .pf2__tieto > svg { width: 17px; height: 17px; flex: none; color: var(--muted); } .pf2__oikea { grid-area: oikea; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 20px; min-width: 0; } .pf2__toimet { display: flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 10px; align-self: stretch; } .pf2__toimet .btn { --h: 42px; border-radius: 999px; white-space: nowrap; padding: 0 18px; font-size: 14px; } .pf2__toimet .btn--red { min-width: 104px; } .pf2__toimet .btn svg { width: 17px; height: 17px; } .pf2__lisa { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03); color: #fff; cursor: pointer; transition: border-color .2s, background .2s; } .pf2__lisa svg { width: 18px; height: 18px; } .pf2__lisa:hover, .pf2__lisa:focus-visible { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .07); outline: none; } .pf2__lisa.is-kielto { border-color: #ff6b6b; color: #ff8a8a; } .pf2__luvut { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-self: stretch; } .pf2__luku { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 8px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } .pf2__luku + .pf2__luku { border-left: 1px solid var(--line-2); } .pf2__luku b { font-size: 19px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; color: #fff; } .pf2__luku span { font-size: 13.5px; color: var(--muted); transition: color .2s; } .pf2__luku:hover span, .pf2__luku:focus-visible span { color: #fff; } .pf2__merkit { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; max-width: 100%; align-self: center; } .pf2__merkki { --mv: var(--p1); display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 64px; width: 64px; min-width: 64px; max-width: 64px; text-align: center; } .pf2__merkki i { position: relative; display: grid; place-items: center; width: 42px; height: 47px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--mv); transition: transform .25s var(--ease); } .pf2__merkki i::before { content: ""; position: absolute; inset: 2px; clip-path: inherit; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--mv) 42%, #141821), color-mix(in srgb, var(--mv) 14%, #10131a) 80%); } .pf2__merkki img { position: relative; width: 25px; height: 25px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); } .pf2__merkki:hover i { transform: translateY(-2px); } .pf2__merkki small { font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--text-2); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Välilehdet */ .pf2__tabit { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0; margin: 0; padding: 0 14px; overflow-x: auto; scrollbar-width: none; } .pf2__tabit button { position: relative; display: inline-flex; align-items: center; gap: 10px; flex: none; height: 50px; padding: 0 22px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; transition: color .2s; } .pf2__tabit button + button { margin-left: clamp(0px, 1vw, 18px); } .pf2__tabit button svg { width: 19px; height: 19px; } .pf2__tabit button:hover { color: #fff; } .pf2__tabit button[aria-pressed="true"] { color: var(--a1); font-weight: 600; } .pf2__tabit button[aria-pressed="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--a1); } .pf2__tabit small { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 12px; color: var(--text-2); } /* Välilehtipalkin oikea reuna: kolikot ja sija sekä lemmikin avausnappi */ .pf2__tabiloppu { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-left: 14px; flex: none; } .pf2__kolikot { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255, 180, 0, .08); border: 1px solid rgba(255, 180, 0, .25); font-size: 14px; white-space: nowrap; } .pf2__kolikot .coin { width: 17px; height: 17px; } .pf2__kolikot b { color: #ffd98a; font-variant-numeric: tabular-nums; } .pf2__kolikot small { color: var(--text-2); font-size: 12.5px; } .pf2__tabit .pf2__lemmikkinappi { position: relative; height: 36px; margin: 0 !important; padding: 0 14px 0 6px; gap: 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); font-size: 14px; font-weight: 600; color: #fff; } .pf2__tabit .pf2__lemmikkinappi[hidden] { display: none; } .pf2__tabit .pf2__lemmikkinappi svg { width: 17px; height: 17px; margin-left: 6px; } .pf2__lemmikkinappi img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .06); } .pf2__lemmikkinappi[aria-expanded="true"] { border-color: var(--a1); background: rgb(var(--a1-rgb) / .14); } .pf2__lemmikkinappi::after { content: none !important; } .pf2__lemmikkihuomio { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #ff4d4d; color: #fff; font-size: 11px; font-style: normal; font-weight: 900; } .pf2__lemmikki[hidden] { display: none; } .pf2__ots { margin: 6px 4px 0; font-family: var(--f-body); font-size: 18px; font-weight: 700; } /* Julkaisut mallin korttityylillä: kuva vasemmalla, sisältö sen vieressä, kuvat rivissä */ .forum--pfk .discussion.discussion--compact { padding: 20px 24px 16px; cursor: pointer; } .forum--pfk .discussion.discussion--compact:hover { border-color: rgba(255, 255, 255, .14); background: #141922; } .forum--pfk .discussion--compact .discussion__message { position: relative; padding-left: 74px !important; min-height: 58px; gap: 8px; } .forum--pfk .discussion.discussion--compact .discussion__message .sn__paa { position: static; min-height: 0; padding-right: 36px; } .forum--pfk .discussion--compact .sn__paa > .av-w, .forum--pfk .discussion--compact .sn__paa > .avatar { position: absolute; left: 0; top: 0; width: 58px !important; height: 58px !important; } .forum--pfk .discussion--compact .sn__paa > .av-w .avatar { width: 58px !important; height: 58px !important; } .forum--pfk .discussion--compact .discussion__kukarivi { font-size: 15.5px; } .forum--pfk .discussion--compact .discussion__kukarivi time { font-size: 13.5px; font-weight: 400; color: var(--muted); } .forum--pfk .discussion--compact .discussion__aihe { display: none; } .forum--pfk .discussion--compact .sn__pois { position: absolute; top: -4px; right: -6px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-2); } .forum--pfk .discussion--compact .sn__pois span { display: none; } .forum--pfk .discussion--compact .sn__pois:hover { background: rgba(255, 80, 80, .12); color: #ff8a8a; } .forum--pfk .discussion--compact .discussion__message > .sn__teksti, .forum--pfk .discussion--compact .discussion__message > .sn__ala, .forum--pfk .discussion--compact .discussion__message > .kg { margin-left: 0 !important; } .forum--pfk .discussion.discussion--compact .discussion__message > .sn__teksti { font-size: 15.5px; line-height: 1.5; color: #e9e9ee; -webkit-line-clamp: 4; max-height: 6em; } .forum--pfk .discussion--compact .kg { display: grid; max-width: none; margin-top: 4px; gap: 8px; border-radius: 0; overflow: visible; aspect-ratio: auto !important; grid-template-rows: none !important; } .forum--pfk .discussion--compact .kg--1 { grid-template-columns: minmax(0, 1fr); } .forum--pfk .discussion--compact .kg--2 { grid-template-columns: 1.45fr 1fr; } .forum--pfk .discussion--compact .kg--3 { grid-template-columns: 1.5fr .65fr 1fr; } .forum--pfk .discussion--compact .kg--4 { grid-template-columns: 1.3fr .7fr 1fr .8fr; } .forum--pfk .discussion--compact .kg a { grid-row: auto !important; height: clamp(150px, 15vw, 230px); border-radius: 12px; } .forum--pfk .discussion--compact .kg--1 a { height: clamp(170px, 14vw, 250px); } .forum--pfk .discussion--compact .kg img { max-height: none; height: 100%; object-fit: cover; } .forum--pfk .discussion--compact .discussion__message > .sn__ala { gap: 14px; padding-top: 6px; } .forum--pfk .discussion--compact .sn__ala .sn__nappi { border: 0; background: none; padding: 0; height: 32px; color: var(--text-2); } .forum--pfk .discussion--compact .sn__ala .sn__nappi svg { width: 19px; height: 19px; } .forum--pfk .gl__paa { margin-left: 74px; } .forum--pfk .sn__uusi { padding: 18px 22px; margin-bottom: 0; } /* Media- ja Tietoja-välilehdet */ .pf2__mediaruudukko { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .pf2__mediaruudukko a { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #0b0d12; } .pf2__mediaruudukko img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .pf2__mediaruudukko a:hover img { transform: scale(1.04); } .pf2__tietoja { padding: 22px 24px; } .pf2__tietoja .pfs__lainaus { margin: 0 0 16px; } .pf2__tietojabio { margin-bottom: 18px; font-size: 15px; line-height: 1.6; color: var(--text-2); } .pf2__tietojaots { margin: 22px 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* Sivupalkin laatikot: Tietoja, Kiinnostukset, Suosituin julkaisu, Galleria */ .forum--pfk .forum__side .f-box { padding: 18px 18px 20px; } .pfs__paa { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .pfs__paa h3 { margin: 0; font-family: var(--f-body); font-size: 17px; font-weight: 700; letter-spacing: 0; } .pfs__lisa { display: grid; place-items: center; width: 30px; height: 30px; margin: -4px -6px -4px 0; transform: translateY(-6px); border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; } .pfs__lisa:hover { background: rgba(255, 255, 255, .07); color: #fff; } .pfs__lisa svg { width: 18px; height: 18px; } .pfs__kaikki { border: 0; padding: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: color-mix(in srgb, var(--a1) 70%, #fff); cursor: pointer; text-decoration: none; } .pfs__kaikki:hover { text-decoration: underline; } .pfs__rivit { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; } .pfs__rivit li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 16px; font-size: 14px; line-height: 1.35; color: var(--text-2); } .pfs__rivit li > svg { width: 19px; height: 19px; color: var(--muted); } .pfs__rivit li > .coin { width: 18px; height: 18px; justify-self: center; } .pfs__rivit li > span { min-width: 0; overflow-wrap: anywhere; } .pfs__rivit a { color: #fff; } .pfs__palvelu { display: grid; place-items: center; width: 20px; height: 20px; } .pfs__palvelu img, .pfs__palvelu svg { width: 18px; height: 18px; object-fit: contain; } .pfs__linkki { padding: 0; border: 0; background: none; font: inherit; color: color-mix(in srgb, var(--a1) 62%, #fff) !important; cursor: pointer; text-align: left; text-decoration: none; } .pfs__linkki:hover { text-decoration: underline; } .pfs__lainaus { display: block; margin: 18px 0 0; padding: 16px 18px; border-radius: 12px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .08); font-family: var(--f-serif); font-style: italic; font-size: 16px; line-height: 1.5; color: #e2e2e8; } .pfs__lainaus::before { content: "\201C"; } .pfs__lainaus::after { content: "\201D"; } .pfs__lainaus .md-heading, .pfs__lainaus p, .pfs__lainaus div { display: inline; margin: 0; font-size: 1em; font-weight: 500; font-family: inherit; letter-spacing: 0; } .pfs__lainaus--tyhja { font-family: var(--f-body); font-style: normal; font-size: 13.5px; color: var(--muted); border-style: dashed; text-decoration: none; } .pfs__lainaus--tyhja::before, .pfs__lainaus--tyhja::after { content: none; } .pfs__tyhja { margin: 0; font-size: 13.5px; } .pfs__sirut { display: flex; flex-wrap: wrap; gap: 8px; } .pfs__siru { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); font-size: 13.5px; color: var(--text); } .pfs__siru[hidden], .pfs__osa[hidden] { display: none; } .pfs__osa + .pfs__osa { margin-top: 14px; } .pfs__ali { margin: 0 0 9px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } /* Some- ja pelitilit pelkkinä logoina */ .pfs__logot { display: flex; flex-wrap: wrap; gap: 8px; } .pfs__logo { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .04); cursor: pointer; transition: border-color .2s, transform .2s var(--ease); } .pfs__logo:hover { border-color: rgba(255, 255, 255, .3); transform: translateY(-1px); } .pfs__logo img, .pfs__logo svg { width: 18px; height: 18px; object-fit: contain; } .pfs__rivit li.pfs__logorivi { align-items: center; } /* Oman julkaisun nasta */ .forum--pfk .discussion--compact .sn__nasta { position: absolute; top: -4px; right: 30px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; } .forum--pfk .discussion--compact .sn__nasta:hover { background: rgba(255, 255, 255, .07); color: #fff; } .forum--pfk .discussion--compact .sn__nasta.is-on { color: var(--a1); } .sn__nasta svg { width: 18px; height: 18px; } /* Toiminta: postaukset ja kommentit Palstoilla ja Pelikeskuksessa */ .pft__lista { display: grid; gap: 12px; } .pft { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 20px; border-radius: 16px; background: #12161d; border: 1px solid rgba(255, 255, 255, .07); color: inherit; text-decoration: none; transition: border-color .2s, background .2s; } .pft:hover { border-color: rgba(255, 255, 255, .16); background: #141922; } .pft__ik { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgb(var(--a1-rgb) / .14); color: var(--a1); } .pft--kommentti .pft__ik { background: rgba(255, 255, 255, .06); color: var(--text-2); } .pft__ik svg { width: 19px; height: 19px; } .pft__sis { display: grid; gap: 4px; min-width: 0; } .pft__yla { display: flex; flex-wrap: wrap; align-items: center; min-height: 40px; gap: 4px 10px; font-size: 13.5px; color: var(--muted); } .pft__yla b { color: #fff; font-weight: 600; } .pft .f-kuka, .pft .f-kuka .f-name, .pft.discussion .discussion__message .sn__kuka .f-name { font-size: 15px; line-height: 20px; font-weight: 700; } .pft .f-kuka .f-badget { font-size: 15px; line-height: 20px; } .pft .f-kuka .f-badge { width: 18px; height: 18px; flex: 0 0 18px; } .pft__paikka { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); } .pft__paikka svg, .pft__paikka .f-pik svg { width: 15px; height: 15px; } .pft__ots { font-size: 15px; color: #fff; } .pft__teksti { font-size: 15.5px; line-height: 1.55; color: var(--text-2); overflow-wrap: anywhere; margin-top: 8px; } .pft__ik .avatar { width: 40px; height: 40px; } .pft__sis > .kg { margin-top: 8px; } .pft__polku { --puu: var(--a1); margin-top: 12px; overflow-x: auto; } .pft.pft--keskustelu { display: block; } .pft--keskustelu > .discussion__message { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; } .pft--keskustelu .discussion__message > .pft__ots { display: block; margin-top: 10px; } .pft__kommenttiosa { padding: 8px 0 16px; } .pft--keskustelu > .pft__avaa { margin-top: 0; } .pft__polku .pk-c { min-width: 160px; } .pft__yhteys { display: grid; gap: 8px; margin: 10px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .025); color: var(--text-2); font-size: 13.5px; overflow-wrap: anywhere; } .pft__kohdeots { font-size: 12px; color: var(--muted); } .pft__yhteys .pft__ots { font-size: 17px; line-height: 1.4; font-weight: 700; } .pft__kirjoittaja { color: var(--muted); } .pft__kirjoittaja b { color: var(--text-2); } .pft__vastaus { display: grid; gap: 6px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); } .pft__vastaus blockquote { margin: 0; padding: 0; border: 0; color: var(--muted); font-size: 14px; } .pft__avaa { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 0; font-size: 13px; font-weight: 700; } .pft__avaa svg { width: 15px; height: 15px; } .pft__luvut, .pft__luvut > span { display: inline-flex; align-items: center; gap: 7px; } .pft__luvut { gap: 14px; margin-top: 8px; flex-wrap: wrap; color: var(--text-2); font-size: 13.5px; } .pft__luvut svg { width: 17px; height: 17px; flex: none; } .pft__aanet { font-variant-numeric: tabular-nums; } .pft > img { width: 84px; height: 64px; border-radius: 10px; object-fit: cover; } .pfs__siru svg { width: 16px; height: 16px; flex: none; } .pfs__siru--peli svg { color: #a191ff; } .pfs__siru--harr svg { color: #62d98f; } .pfs__siru--kiin svg { color: #ff7fae; } .pfs__nosto { display: grid; grid-template-columns: 116px minmax(0, 1fr) 22px; gap: 14px; align-items: start; color: inherit; text-decoration: none; } .pfs__nosto > img, .pfs__nostokuva { width: 116px; height: 80px; border-radius: 10px; object-fit: cover; } .pfs__nostokuva { display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 70%, #1a1d26), color-mix(in srgb, var(--a2) 60%, #10131a)); color: #fff; } .pfs__nostokuva svg { width: 26px; height: 26px; } .pfs__nosto b, .pfs__nosto small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pfs__nosto b { font-size: 14px; line-height: 1.35; color: #fff; } .pfs__nosto small { margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--muted); } .pfs__nosto i { display: grid; color: var(--text-2); } .pfs__nosto i svg { width: 21px; height: 21px; } .pfs__nosto:hover b { text-decoration: underline; } .pfs__galleria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .pfs__galleria a { display: block; aspect-ratio: 1 / .85; border-radius: 10px; overflow: hidden; background: #0b0d12; } .pfs__galleria img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .pfs__galleria a:hover img { transform: scale(1.05); } @container (max-width: 860px) { .pf__runko.pf2 { grid-template-columns: 112px minmax(0, 1fr) 250px; grid-template-areas: "kuva toimet toimet" "kuva vasen luvut" "kuva vasen merkit"; grid-template-rows: auto auto 1fr; gap: 0 20px; padding-inline: 22px; } .pf2 > .pf__kuva, .pf2 > .pf__kuva .f-profile__av { width: 112px; height: 112px; font-size: 42px; } .pf2 > .pf__kuva, .pf--irti .pf2 > .pf__kuva { margin-top: -30px; } .pf2__oikea { display: contents; } .pf2__toimet { grid-area: toimet; justify-self: end; align-self: start; padding-top: 14px; } .pf2__vasen { padding-top: 4px; } .pf2__luvut { grid-area: luvut; align-self: start; margin-top: 8px; } .pf2__merkit { grid-area: merkit; align-self: start; justify-self: center; margin-top: 16px; } } @container (max-width: 700px) { .pf__runko.pf2 { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "kuva vasen" "oikea oikea"; gap: 0 18px; padding-inline: 20px; } .pf2__vasen { padding-top: 16px; } .pf2__oikea { display: flex; grid-area: oikea; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .07); } .pf2__toimet, .pf2__luvut, .pf2__merkit { grid-area: auto; margin-top: 0; padding-top: 0; justify-self: auto; align-self: auto; } .pf2__toimet { justify-content: center; flex-wrap: wrap; } .pf2__luvut { width: 100%; max-width: 420px; align-self: center; } } @container (max-width: 480px) { .pf__runko.pf2 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kuva" "vasen" "oikea"; } .pf2 > .pf__kuva, .pf2 > .pf__kuva .f-profile__av { width: 100px; height: 100px; font-size: 38px; } .pf2 > .pf__kuva, .pf--irti .pf2 > .pf__kuva { margin-top: -40px; } .pf2__vasen { padding-top: 10px; } .pf2__toimet .btn { flex: 1; } .pf2__tiedot { gap: 8px 16px; } } @media (max-width: 760px) { .pf2__kolikot small { display: none; } .pft { grid-template-columns: 34px minmax(0, 1fr); } .pft > img { display: none; } .pf2__tabit button { padding: 0 14px; } .pf2__tabit button + button { margin-left: 0; } .forum--pfk .discussion--compact .discussion__message { padding-left: 54px !important; } .forum--pfk .discussion--compact .sn__paa > .av-w, .forum--pfk .discussion--compact .sn__paa > .avatar, .forum--pfk .discussion--compact .sn__paa > .av-w .avatar { width: 42px !important; height: 42px !important; } .forum--pfk .gl__paa { margin-left: 54px; } .forum--pfk .discussion--compact .sn__ala { gap: 24px; } } @media (max-width: 1023px) { .f-wrap--pf > .wrap { width: 100%; max-width: none; padding-inline: 16px; } } @media (max-width: 760px) { .pf2__tabit { flex-wrap: wrap; overflow: visible; padding: 0 8px 8px; } .pf2__tabit > button { height: 44px; padding-inline: 10px; font-size: 13px; gap: 6px; } .pf2__tabiloppu { width: 100%; justify-content: flex-end; padding: 6px 4px 0; } } /* Profiilin oma merkki nimen vieressä; yhteisöbadget lukujen alla. */ .pf2__profiilimerkki { display: inline-flex; flex: none; width: 26px; height: 26px; align-items: center; justify-content: center; } .pf2__profiilimerkki img { display: block; width: 100%; height: 100%; object-fit: contain; } .pfs__mediat { margin: 0 0 18px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; background: rgba(255, 255, 255, .02); } .pfs__mediat .pfs__logo { background: transparent; border-color: transparent; } .pfs__mediat .pfs__logo:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .05); } /* v101: some-kanavat siruina kahdessa sarakkeessa ilman erillistä laatikkoa */ .pfs__mediat { margin: 0 0 16px; padding: 0; border: 0; background: none; } .pfs__mediat .pfs__logot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .pfs__mediat .pfs__logo { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: auto; height: 40px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: rgba(255, 255, 255, .035); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; } .pfs__mediat .pfs__logo:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); transform: translateY(-1px); } .pfs__mediat .pfs__logo img, .pfs__mediat .pfs__logo svg { flex: none; width: 18px; height: 18px; } .pfs__mediat .pfs__logo span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* v102: somelogot keskitettynä Tietoja-laatikon yläosaan */ /* Logot jaetaan tasaisesti koko leveydelle */ .pfs__mediat .pfs__logot { display: flex; flex-wrap: nowrap; justify-content: space-evenly; gap: 10px; } .pfs__mediat .pfs__logo { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 14px; } /* Logot ilman laatikoita, laatikon kokoisina */ .pfs__mediat .pfs__logo, .pfs__mediat .pfs__logo:hover { border: 0; background: none; box-shadow: none; } .pfs__mediat .pfs__logo { transition: transform .2s var(--ease), filter .2s; } .pfs__mediat .pfs__logo:hover { transform: translateY(-2px) scale(1.06); filter: brightness(1.12); } .pfs__mediat .pfs__logo img, .pfs__mediat .pfs__logo svg { width: 40px; height: 40px; } .pfs--yhteydet .pfs__mediat { margin: 0; } .pfs--yhteydet .pfs__logot { flex-wrap: wrap; } /* Discord-nappi: Discordin värinen siru, valkoinen logo ja teksti, käyttäjänimestä erotettu pienellä pisteellä */ .pf2__kahva .pf2__discord { display: inline-flex; align-items: center; gap: 5px; width: auto; height: 22px; padding: 0 9px 0 7px; border: 0; border-radius: 999px; background: #5865f2; color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; } .pf2__kahva .pf2__discord:hover { background: #4752c4; color: #fff; filter: none; } .pf2__erotin { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); opacity: .7; } .pf2__kahva .pf2__discord svg { width: 13px; height: 13px; color: #fff; } .pf2__kahva { gap: 6px 12px; } /* Discord-logo nimen oikealla puolella */ .pf2__discord { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: #5865f2; color: #fff; transition: transform .15s, filter .15s; } .pf2__discord:hover { transform: translateY(-1px); filter: brightness(1.1); } .pf2__discord svg { width: 18px; height: 18px; } a.pf2__lisa { text-decoration: none; } /* Kuusi tai useampi merkki mahtuu yhdelle riville */ .pf2__merkit--tiivis { gap: 3px; } .pf2__merkit--tiivis { flex-wrap: nowrap; } .pf2__merkit--tiivis .pf2__merkki { flex: 1 1 0; width: auto; min-width: 0; max-width: 46px; } .pf2__merkit--tiivis .pf2__merkki i { width: 33px; height: 37px; } .pf2__merkit--tiivis .pf2__merkki img { width: 20px; height: 20px; } .pf2__merkit--tiivis .pf2__merkki small { font-size: 9.5px; } /* Profiiliremaster: rauhallinen pinta, mallin mittasuhteet ja rajattu viestinäkymä. */ .forum--pfk { --profile-panel: color-mix(in srgb, var(--bg, #080b12) 90%, #7182a4); } .pf--irti, .pf2__tabit, .forum--pfk .discussion--compact, .forum--pfk .sn__uusi, .forum--pfk .forum__side .f-box, .pf2__tietoja { background: linear-gradient(145deg, rgba(130, 151, 190, .035), transparent 65%), var(--profile-panel, #10151e); border-color: color-mix(in srgb, var(--text, #fff) 9%, transparent); border-radius: 12px; } .pf--irti { border-color: color-mix(in srgb, var(--text, #fff) 9%, var(--profile-panel, #10151e)); border-radius: 0 0 12px 12px; } .pfk { border: 1px solid color-mix(in srgb, var(--text, #fff) 9%, var(--profile-panel, #10151e)); border-bottom: 0; border-radius: 12px 12px 0 0; } .pf2__bio { overflow-wrap: anywhere; } .pf2__tieto { white-space: normal; overflow-wrap: anywhere; min-width: 0; } .pf2__toimet .btn { --h: 38px; padding-inline: 16px; font-size: 13px; } .pf2__lisa { width: 38px; height: 38px; } .pf2__luku b { font-size: 18px; } .pf2__merkit { gap: 8px; } .pf2__tabit > button[aria-pressed="true"] { color: var(--p1); } .pf2__tabit > button:focus-visible, .pf2__luku:focus-visible, .vs button:focus-visible { outline: 2px solid var(--p1); outline-offset: -3px; } @media (min-width: 1024px) { .forum--pfk .forum__side { margin-top: -10px; position: relative; z-index: 1; } } /* Profiiliremaster v99: oikea sarake heti bannerin alla, otsikkokortti kolmessa sarakkeessa myös kapeammassa pääsarakkeessa, merkit yhdellä rivillä. */ .forum--pfk .forum__side { top: auto; } /* Banneri on pääsarakkeen levyinen, ja oikea sarake alkaa sivun yläreunasta bannerin vierestä */ .forum--pfk .forum__main > .pfk + .pf--irti { margin-top: -12px; } @media (min-width: 1024px) { .pfk .pf__kansi { aspect-ratio: 4.6 / 1; min-height: 150px; max-height: 260px; } .forum--pfk .forum__side { margin-top: 0; } } .pf2__vahv { width: 26px; height: 26px; } .pf2__vahv img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); } .pf2__merkit { gap: 5px; } .pf2__merkki { flex: 0 0 48px; width: 48px; min-width: 48px; max-width: 48px; gap: 5px; } .pf2__merkki i { width: 38px; height: 42px; } .pf2__merkki img { width: 22px; height: 22px; } .pf2__merkki small { font-size: 10.5px; } @container (min-width: 701px) and (max-width: 860px) { .pf__runko.pf2 { grid-template-columns: 128px minmax(0, 1fr) 262px; grid-template-areas: "kuva vasen oikea"; grid-template-rows: auto; gap: 0 20px; padding-inline: 22px; } .pf2 > .pf__kuva, .pf2 > .pf__kuva .f-profile__av { width: 128px; height: 128px; font-size: 46px; } .pf2 > .pf__kuva, .pf--irti .pf2 > .pf__kuva { margin-top: -40px; } .pf2__oikea { display: flex; padding-top: 18px; gap: 14px; } .pf2__toimet { grid-area: auto; padding-top: 0; justify-self: auto; align-self: stretch; gap: 8px; } .pf2__toimet .btn { padding-inline: 14px; } .pf2__vasen { padding-top: 20px; } .pf2__luvut, .pf2__merkit { grid-area: auto; margin-top: 0; justify-self: auto; } .pf2__luku { padding-inline: 4px; } } .pf2__tabit { padding: 0 8px; } .pf2__tabit > button { gap: 8px; padding: 0 clamp(10px, 1.15vw, 20px); } .pf2__tabit > button + button { margin-left: 0; } .pf2__tabiloppu { padding-left: 8px; padding-right: 6px; } .pf2__bio { -webkit-line-clamp: 2; height: 3.1em; min-height: 3.1em; max-height: 3.1em; } /* Kapeassa pääsarakkeessa välilehdet ilman kuvakkeita, jotta kolikot mahtuvat samalle riville */ .forum--pfk .forum__main { container: pfpaa / inline-size; } @container pfpaa (max-width: 880px) { .pf2__kolikot small, .pf2__tabit .pf2__lemmikkinappi span { display: none; } .pf2__tabit .pf2__lemmikkinappi { padding: 0 8px; } } @container pfpaa (max-width: 780px) { .pf2__tabit > button svg { display: none; } .pf2__tabit > button { padding-inline: 12px; } } /* Viestit-sivu: keskustelut vasemmalla, keskustelu oikealla. Sivuston omat pinnat ja korostusväri, kuplat kuten pikaviestimissä. */ .vs { --vs-pinta: color-mix(in srgb, var(--bg, #080b12) 90%, #7182a4); display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); height: max(540px, calc(100vh - var(--hdr, 64px) - 48px)); overflow: hidden; border: 1px solid color-mix(in srgb, var(--text, #fff) 9%, transparent); border-radius: 14px; background: linear-gradient(145deg, rgba(130, 151, 190, .035), transparent 65%), var(--vs-pinta); } .vs__sivu { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgba(255, 255, 255, .07); } .vs__ots { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 14px 12px 18px; } .vs__ots h1 { margin: 0; font-family: var(--f-body); font-size: 22px; font-weight: 800; letter-spacing: -.01em; } .vs__nappi { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 34px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .vs__nappi:hover, .vs__nappi[aria-expanded="true"] { border-color: rgb(var(--a1-rgb) / .5); background: rgb(var(--a1-rgb) / .1); color: #fff; } .vs__nappi svg { width: 16px; height: 16px; } .vs__nappi[hidden] { display: none; } .vs__yksityisyys { margin: 0 12px 10px; padding: 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .025); overflow-y: auto; max-height: 60%; } .vs__yksityisyys[hidden] { display: none; } .vs__kuka { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; } .vs__kuka legend, .vs__ali { margin: 0 0 8px; padding: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .vs__ali { margin-top: 16px; } .vs__valinta { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background .15s; } .vs__valinta:hover { background: rgba(255, 255, 255, .04); } .vs__valinta input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--a1); } .vs__valinta b { display: block; font-size: 14px; color: #fff; } .vs__valinta small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--muted); } .vs__valinta:has(input:checked) { background: rgb(var(--a1-rgb) / .1); } .vs__estetyt { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .vs__estetyt li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; } .vs__estetyt b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .vs__estetyt .avatar.vs__av { width: 32px; height: 32px; font-size: 13px; } .vs__lista { display: grid; align-content: start; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 8px 8px; } .vs__keskustelu { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: inherit; text-decoration: none; transition: background .15s; } .vs__keskustelu:hover { background: rgba(255, 255, 255, .045); } .vs__keskustelu.is-auki { background: rgb(var(--a1-rgb) / .12); box-shadow: inset 3px 0 0 var(--a1); } .vs .avatar.vs__av { width: 46px; height: 46px; } .vs__paa .avatar.vs__av { width: 40px; height: 40px; } .vs__kesk { min-width: 0; } .vs__kesk b { display: block; overflow: hidden; font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; color: #fff; } .vs__kesk small { display: block; overflow: hidden; margin-top: 2px; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); } .vs__tyhja { margin: 0; padding: 14px 10px; font-size: 13px; line-height: 1.5; color: var(--muted); } .vs__suoja { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 12px 18px 16px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 12px; line-height: 1.45; color: var(--muted); } .vs__suoja svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--a1); } .vs__chat { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .vs__paa { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); } .vs__takaisin { display: none; width: 34px; padding: 0; justify-content: center; } .vs__henkilo { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; } .vs__henkilo > span:last-child { min-width: 0; } .vs__nimi { display: block; overflow: hidden; font-size: 16px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; color: #fff; } .vs__henkilo small { font-size: 12px; color: var(--muted); } .vs__henkilo:hover .vs__nimi { text-decoration: underline; } .vs__esto:hover { border-color: rgba(255, 90, 90, .5); background: rgba(255, 90, 90, .1); color: #ff9b9b; } .vs__viestit { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 12px; } .vs__paiva { margin: 16px 0 6px; text-align: center; } .vs__paiva span { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); font-size: 11.5px; font-weight: 700; color: var(--muted); } .vs__ryhma { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 10px; } .vs__ryhma--oma { align-items: flex-end; } .vs__kupla { max-width: min(76%, 560px); margin: 0; padding: 9px 14px; border-radius: 18px 18px 18px 6px; background: rgba(255, 255, 255, .07); font-size: 15px; line-height: 1.45; color: #ececf1; white-space: pre-wrap; overflow-wrap: anywhere; } .vs__ryhma--oma .vs__kupla { border-radius: 18px 18px 6px 18px; background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; } .vs__kupla + .vs__kupla { border-top-left-radius: 6px; } .vs__ryhma--oma .vs__kupla + .vs__kupla { border-top-left-radius: 18px; border-top-right-radius: 6px; } .vs__aika { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 0; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .vs__aika svg { width: 11px; height: 11px; } .vs__valitse, .vs__alku { display: grid; justify-items: center; gap: 6px; margin: auto; padding: 30px; text-align: center; color: var(--muted); } .vs__valitse > svg, .vs__alku > svg { width: 44px; height: 44px; padding: 12px; margin-bottom: 4px; border-radius: 16px; background: rgb(var(--a1-rgb) / .12); color: var(--a1); box-sizing: content-box; } .vs__valitse b, .vs__alku b { font-size: 17px; color: #fff; } .vs__valitse span, .vs__alku span { max-width: 34ch; font-size: 13.5px; line-height: 1.5; } .vs__tila { min-height: 0; padding: 0 20px; font-size: 12.5px; color: var(--muted); } .vs__tila:not(:empty) { padding-bottom: 6px; } .vs__valitse + .vs__tila { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; } .vs__lomake { display: flex; align-items: flex-end; gap: 10px; padding: 4px 16px 16px; } .vs__lomake[hidden] { display: none; } .vs__kentta { flex: 1; min-width: 0; min-height: 46px; max-height: 160px; padding: 12px 18px; resize: none; border-radius: 23px; font-size: 15px; line-height: 1.4; } .vs__laheta { --h: 46px; width: 46px; padding: 0; border-radius: 50%; flex: none; } .vs__laheta svg { width: 20px; height: 20px; margin-left: -2px; } .vs__estetty { display: flex; align-items: center; gap: 10px; margin: 0 16px 16px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .03); font-size: 13.5px; color: var(--text-2); } .vs__estetty svg { flex: none; width: 18px; height: 18px; color: var(--muted); } @media (max-width: 760px) { .vs { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - var(--hdr, 64px) - 110px); min-height: 460px; } .vs--auki .vs__sivu, .vs:not(.vs--auki) .vs__chat { display: none; } .vs__sivu { border-right: 0; } .vs__takaisin { display: inline-flex; } .vs__viestit { padding-inline: 12px; } .vs__kupla { max-width: 85%; } } /* v109: merkit pieninä ison nimen perässä, somelogot lukujen alla */ /* Nimi, Vahvistettu ja muut merkit samalla 8 px välillä; merkit ovat suoraan otsikon riviä, joten ne rivittyvät yksitellen */ .pf2 .f-profile__name { gap: 4px 8px; } .pf2__nimimerkit { display: contents; } .pf2__nimimerkki { display: inline-flex; width: 26px; height: 26px; cursor: default; transition: transform .2s var(--ease); } .pf2__nimimerkki img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); } .pf2__nimimerkki:hover { transform: translateY(-1px); } .pf2__somet { display: flex; justify-content: space-evenly; align-items: center; gap: 12px; width: 100%; } .pf2__somet .pfs__logo, .pf2__somet .pfs__logo:hover { width: auto; height: auto; padding: 2px; border: 0; border-radius: 8px; background: none; box-shadow: none; } .pf2__somet .pfs__logo { transition: transform .2s var(--ease), filter .2s; } .pf2__somet .pfs__logo:hover { transform: translateY(-2px) scale(1.06); filter: brightness(1.12); } .pf2__somet .pfs__logo img, .pf2__somet .pfs__logo svg { width: 34px; height: 34px; } /* Profiilin asetukset: julkisen n?kym?n esikatselu ja omat k?yntim??r?t. */ .as__esikatselu, .as__analytiikka { padding: 16px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; } .as__esikatselu > summary, .as__analytiikka > summary { cursor: pointer; font-weight: 700; } .as__esikatselu iframe { display: block; width: 100%; height: 760px; border: 0; border-radius: 8px; background: var(--bg); } .as__kaynnit { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; } .as__kaynnit > div { display: grid; gap: 4px; padding: 12px; flex: 1; min-width: 90px; border: 1px solid var(--line); border-radius: 8px; } .as__kaynnit b { font-size: 24px; } .as__kaynnit span { color: var(--muted); font-size: 13px; } .as__merkkilista { display: grid; gap: 8px; } .as__merkkirivi { display: grid; grid-template-columns: 28px minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; } .as__merkkirivi > img { width: 26px; height: 26px; object-fit: contain; } .as__merkkirivi small { display: block; color: var(--muted); font-size: 12px; } .as__kaaviopaa { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .as__kaaviopaa .dim { font-size: 13px; } .as__kaavio { height: 220px; min-width: 0; margin-top: 12px; } .as__kaavio > svg { display: block; width: 100%; height: 100%; } .as__analytiikka table { width: 100%; text-align: left; margin-top: 12px; } .forum--pfk .discussion--compact .sn__pois { display: inline-flex; align-items: center; justify-content: center; gap: 0; line-height: 1; } .forum--pfk .discussion--compact .sn__pois svg { display: block; flex: none; margin: 0; } @media (max-width: 700px) { .forum--pfk .discussion--compact .discussion__message > .sn__ala { gap: 14px; } } .profiili-esikatselu .sn__pois, .profiili-esikatselu .sn__nasta { display: none !important; } .pf2__lisa.pf2__asetukset { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700; } .pf2__seuraajamerkit .pf2__nimimerkki { width: 38px; height: 38px; } .pf2__seuraajamerkit { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; width: 100%; } .as__merkkirivi { grid-template-columns: 28px minmax(0,1fr) auto auto auto; } @container (max-width: 860px) { .pf2__seuraajamerkit { grid-area: merkit; align-self: start; margin-top: 16px; } } @container (max-width: 700px) { .pf2__seuraajamerkit { grid-area: auto; margin-top: 0; } } @media (max-width: 480px) { .as__merkkirivi { gap: 6px; padding-inline: 8px; } } .pf2 .f-profile__name .pf2__nimimerkki { width: 24px; height: 24px; } .pfs--yhteydet .pfs__logot { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; } .pfs--yhteydet .pfs__mediat .pfs__logo { width: 100%; min-width: 0; border-radius: 0; justify-content: center; } .pfs--yhteydet .pfs__logo + .pfs__logo { border-left: 1px solid rgba(255,255,255,.09); } .pfs--yhteydet .pfs__mediat .pfs__logo--tyhja { color: var(--muted); opacity: .35; transform: none; filter: none; } .pfs--yhteydet .pfs__logo--tyhja svg { width: 26px; height: 26px; } .pk-vote .pk-vote__btn { font-size: 13.5px; gap: 0; flex: none; } .modal__box.pfs-asetus { width: min(600px, 100%); padding: 28px; } .pfs-asetus h2 { margin: 0 36px 12px 0; } .pfs-asetus .as__lomake > [hidden] { display: none; } .pf__kansi { position: relative; } .pf-ilmoituskello { position: absolute; top: 14px; right: 14px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; color: rgba(255, 255, 255, .88); background: rgba(10, 10, 13, .55); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease); } .pf-ilmoituskello svg { width: 20px; height: 20px; } .pf-ilmoituskello b { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid #0b0b0e; border-radius: 999px; background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .pf-ilmoituskello b[hidden] { display: none; } .pf-ilmoituskello.is-uusia { color: #fff; border-color: rgba(var(--a1-rgb) / .45); } .pf-ilmoituskello.is-uusia svg { transform-origin: 50% 10%; animation: pfKello 4s ease-in-out infinite; } @keyframes pfKello { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(13deg); } 94% { transform: rotate(-10deg); } 97% { transform: rotate(5deg); } } .pf-ilmoituskello:hover { background: rgba(22, 22, 27, .78); border-color: rgba(255, 255, 255, .26); color: #fff; transform: translateY(-1px); } .pf-ilmoituskello:focus-visible { outline: 2px solid var(--a1l); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .pf-ilmoituskello.is-uusia svg { animation: none; } } .modal__box.pf-ilmoitukset { width: min(560px, 100%); max-height: min(85dvh, 760px); padding: 24px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 22px; background: radial-gradient(120% 60% at 0 0, rgba(var(--a1-rgb) / .1), transparent 60%), linear-gradient(180deg, #121216, #0c0c0f); box-shadow: 0 30px 90px -20px #000d, inset 0 1px 0 rgba(255, 255, 255, .05); } .pf-ilmoitukset .modal__close { top: 20px; right: 20px; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .08); } .pf-ilmoitukset__otsikko { display: flex; gap: 14px; align-items: center; padding: 0 48px 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); } .pf-ilmoitukset__tunnus { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border: 1px solid rgba(var(--a1-rgb) / .3); border-radius: 14px; background: linear-gradient(135deg, rgba(var(--a1-rgb) / .22), rgba(var(--a1-rgb) / .06)); color: var(--a1l); box-shadow: 0 8px 24px -12px rgba(var(--a1-rgb) / .7); } .pf-ilmoitukset__tunnus svg { width: 21px; height: 21px; } .pf-ilmoitukset__otsikko > div { min-width: 0; flex: 1; } .pf-ilmoitukset__otsikko h2 { margin: 0 0 2px; font-size: 22px; line-height: 1.2; letter-spacing: -.03em; } .pf-ilmoitukset__otsikko p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); } .pf-ilmoitukset__maara { flex: none; padding: 5px 10px; border: 1px solid rgba(var(--a1-rgb) / .3); border-radius: 999px; background: rgba(var(--a1-rgb) / .12); color: var(--a1l); font-size: 11px; font-weight: 700; white-space: nowrap; } .pf-ilm__ryhma { display: flex; align-items: center; gap: 8px; margin: 18px 4px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .pf-ilm__ryhma::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .07); } .pf-ilm__ryhma span { padding: 2px 7px; border-radius: 999px; background: rgba(var(--a1-rgb) / .16); color: var(--a1l); letter-spacing: 0; } .pf-ilm__osio--uudet .pf-ilm__ryhma { color: #f1d3d3; } .pf-ilm__osio--vanhat { margin-top: 8px; } .pf-ilm__osio--vanhat .pf-ilm__kuva { filter: saturate(.55) brightness(.85); } .pf-ilm__osio--vanhat .pf-ilm__teksti { color: #9d9da7; } .pf-ilm__osio--vanhat .pf-ilm__teksti b { color: #d6d6dc; } .pf-ilm__lista { display: grid; gap: 2px; } .pf-ilm { position: relative; border-radius: 14px; transition: background .18s; } .pf-ilm:hover { background: rgba(255, 255, 255, .035); } .pf-ilm.is-uusi { background: linear-gradient(90deg, rgba(var(--a1-rgb) / .1), rgba(var(--a1-rgb) / .02) 70%); } .pf-ilm.is-uusi::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(var(--a1), var(--a2)); } .pf-ilm__linkki { display: flex; align-items: center; gap: 13px; padding: 11px 12px 11px 14px; color: inherit; text-decoration: none; border-radius: 14px; } .pf-ilm__linkki:focus-visible { outline: 2px solid var(--a1l); outline-offset: -2px; } .pf-ilm__kuva { position: relative; display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--savy) 55% 42%), hsl(calc(var(--savy) + 40) 50% 26%)); color: #fff; font-size: 16px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } .pf-ilm__laji { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border: 2.5px solid #0f0f12; border-radius: 50%; color: #fff; background: #55555f; } .pf-ilm__laji svg { width: 10px; height: 10px; } .pf-ilm--tykkays .pf-ilm__laji { background: linear-gradient(135deg, var(--a1), var(--a2)); } .pf-ilm--kommentti .pf-ilm__laji { background: #3b82f6; } .pf-ilm--seuraaja .pf-ilm__laji { background: #22b573; } .pf-ilm--pyynto .pf-ilm__laji { background: #e59a00; } .pf-ilm__teksti { display: grid; gap: 3px; min-width: 0; flex: 1; font-size: 13.5px; line-height: 1.45; color: #bdbdc6; overflow-wrap: anywhere; } .pf-ilm__teksti b { color: #f4f4f7; font-weight: 650; } .pf-ilm__teksti small { font-size: 11.5px; color: var(--muted); } .pf-ilm.is-uusi .pf-ilm__teksti small { color: #c9a5a5; } .pf-ilm__nuoli { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: rgba(255, 255, 255, .28); transition: color .18s, transform .18s; } .pf-ilm__nuoli svg { width: 16px; height: 16px; } .pf-ilm:hover .pf-ilm__nuoli { color: #fff; transform: translateX(2px); } .pf-ilm__toiminnot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 12px 13px 69px; } .pf-ilm__toiminnot .btn { min-height: 32px; padding: 6px 16px; border-radius: 10px; font-size: 12px; } .pf-ilm__toiminnot span { font-size: 11px; color: var(--muted); } .pf-ilmoitukset [data-ilmoituslista] > p.dim { margin: 14px 4px 0; } .pf-ilmoitukset__tyhja { padding: 40px 20px 28px; text-align: center; } .pf-ilmoitukset__tyhja > span { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; color: var(--muted); background: rgba(255, 255, 255, .03); } .pf-ilmoitukset__tyhja > span svg { width: 24px; height: 24px; } .pf-ilmoitukset__tyhja h3 { margin: 0 0 6px; font-size: 16px; } .pf-ilmoitukset__tyhja p { max-width: 320px; margin: auto; color: var(--muted); font-size: 13px; line-height: 1.7; } .pf-ilmoitukset__tyhja + .btn { display: flex; margin: 0 auto; } .pf-ilmoitukset__lataus { padding: 30px 18px; color: var(--muted); text-align: center; font-size: 13px; } @media (max-width: 520px) { .modal__box.pf-ilmoitukset { padding: 18px 12px; border-radius: 20px; } .pf-ilmoitukset__otsikko { gap: 11px; padding: 0 44px 14px 6px; } .pf-ilmoitukset__otsikko p { display: none; } .pf-ilmoitukset__tunnus { flex-basis: 38px; height: 38px; border-radius: 12px; } .pf-ilmoitukset__otsikko h2 { font-size: 20px; } .pf-ilm__linkki { gap: 11px; padding: 10px 8px 10px 11px; } .pf-ilm__kuva { flex-basis: 38px; height: 38px; font-size: 14px; } .pf-ilm__toiminnot { padding: 0 8px 12px 60px; } .pf-ilm__toiminnot span { flex-basis: 100%; } } .jr__nappi--odottaa { color: #f3c969; border-color: rgba(243, 201, 105, .35); background: rgba(243, 201, 105, .08); } .jr__nappi--odottaa svg { width: 13px; height: 13px; } .jr__nappi--odottaa:hover { color: #fff; border-color: rgba(255, 255, 255, .3); } /* ---------- raportointi ja estot (profiilin banneri, raportti-ikkuna, estetyt) ---------- */ .pf-kansinapit { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 8px; } .pf-kansinappi { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; color: rgba(255, 255, 255, .82); background: rgba(10, 10, 13, .55); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease); } .pf-kansinappi svg { width: 18px; height: 18px; } .pf-kansinappi:hover { background: rgba(22, 22, 27, .8); border-color: rgba(255, 255, 255, .28); color: #fff; transform: translateY(-1px); } .pf-kansinappi--lippu:hover { border-color: rgba(var(--a1-rgb) / .6); color: var(--a1l); } .pf-kansinappi:focus-visible { outline: 2px solid var(--a1l); outline-offset: 3px; } .modal__box.rp-ikkuna { width: min(560px, 100%); max-height: min(90dvh, 820px); padding: 24px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 22px; background: radial-gradient(120% 60% at 0 0, rgba(var(--a1-rgb) / .1), transparent 60%), linear-gradient(180deg, #121216, #0c0c0f); box-shadow: 0 30px 90px -20px #000d, inset 0 1px 0 rgba(255, 255, 255, .05); animation: rpSisaan .28s var(--ease) both; } @keyframes rpSisaan { from { opacity: 0; transform: translateY(8px) scale(.985); } } .rp-ikkuna .modal__close { top: 20px; right: 20px; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .08); } .rp-paa { display: flex; align-items: center; gap: 14px; padding: 0 48px 16px 0; } .rp-tunnus, .rp-takaisin { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 14px; } .rp-tunnus { border: 1px solid rgba(var(--a1-rgb) / .3); background: linear-gradient(135deg, rgba(var(--a1-rgb) / .22), rgba(var(--a1-rgb) / .06)); color: var(--a1l); box-shadow: 0 8px 24px -12px rgba(var(--a1-rgb) / .7); } .rp-tunnus--esto { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #fff; box-shadow: none; } .rp-takaisin { padding: 0; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer; } .rp-takaisin:hover { background: rgba(255, 255, 255, .08); } .rp-tunnus svg, .rp-takaisin svg { width: 21px; height: 21px; } .rp-kicker { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--a1l); } .rp-paa h2 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.03em; } .rp-kohderivi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; background: rgba(255, 255, 255, .025); font-size: 12px; color: var(--muted); } .rp-kohde { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 13.5px; } .rp-kohde .avatar { width: 26px; height: 26px; border-radius: 50%; } .rp-valittu { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px; border: 1px solid rgba(var(--a1-rgb) / .3); border-radius: 999px; background: rgba(var(--a1-rgb) / .1); color: var(--a1l); font-size: 11.5px; font-weight: 600; } .rp-valittu svg { width: 13px; height: 13px; } .rp-syyt { display: grid; gap: 6px; } .rp-syy { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; background: rgba(255, 255, 255, .02); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .18s, border-color .18s, transform .18s; } .rp-syy:hover, .rp-syy:focus-visible { border-color: rgba(var(--a1-rgb) / .45); background: rgba(var(--a1-rgb) / .07); outline: none; } .rp-syy.is-valittu { border-color: rgba(var(--a1-rgb) / .55); background: rgba(var(--a1-rgb) / .1); } .rp-syy__ik { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, .05); color: #e8e8ee; transition: color .18s, background .18s; } .rp-syy:hover .rp-syy__ik, .rp-syy.is-valittu .rp-syy__ik { background: rgba(var(--a1-rgb) / .16); color: var(--a1l); } .rp-syy__ik svg { width: 18px; height: 18px; } .rp-syy__teksti { display: grid; gap: 2px; min-width: 0; flex: 1; } .rp-syy__teksti b { font-size: 13.5px; font-weight: 650; color: #f4f4f7; } .rp-syy__teksti small { font-size: 11.5px; line-height: 1.4; color: var(--muted); } .rp-syy__nuoli { color: rgba(255, 255, 255, .25); transition: color .18s, transform .18s; } .rp-syy__nuoli svg { width: 16px; height: 16px; } .rp-syy:hover .rp-syy__nuoli { color: #fff; transform: translateX(2px); } .rp-alaviite { display: flex; align-items: flex-start; gap: 8px; margin: 14px 2px 0; font-size: 11.5px; line-height: 1.55; color: var(--muted); } .rp-alaviite svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: #7fd6a0; } .rp-kentta { display: grid; gap: 7px; } .rp-kentta > span { font-size: 12px; font-weight: 600; color: #cfcfd6; } .rp-kentta textarea { width: 100%; min-height: 140px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(0, 0, 0, .35); color: #fff; font: inherit; font-size: 14px; line-height: 1.55; resize: vertical; transition: border-color .18s, box-shadow .18s; } .rp-kentta textarea:focus { outline: none; border-color: rgba(var(--a1-rgb) / .55); box-shadow: 0 0 0 3px rgba(var(--a1-rgb) / .15); } .rp-laskuri { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); } .rp-laskuri .is-ok { color: #7fd6a0; } .rp-toiminnot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; } .rp-toiminnot > span { flex: 1; } .rp-toiminnot--keski { justify-content: center; } .rp-toiminnot .btn svg { width: 16px; height: 16px; margin-right: 6px; } .rp-toiminnot .btn.is-lataa { opacity: .7; pointer-events: none; } .rp-raportoikin { color: var(--muted); } .rp-raportoikin:hover { color: var(--a1l); } .rp-valmis { padding: 10px 8px 4px; text-align: center; } .rp-valmis__merkki { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; background: radial-gradient(circle, rgba(52, 211, 120, .28), rgba(52, 211, 120, .08)); color: #5be39a; box-shadow: 0 0 0 1px rgba(52, 211, 120, .35), 0 12px 32px -12px rgba(52, 211, 120, .6); animation: rpPop .45s var(--ease) both; } .rp-valmis__merkki--esto { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); } .rp-valmis__merkki svg { width: 28px; height: 28px; } @keyframes rpPop { from { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } } .rp-valmis h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.02em; } .rp-valmis p { max-width: 400px; margin: 0 auto; font-size: 13px; line-height: 1.6; color: var(--muted); } .rp-esto { margin-top: 20px; padding: 16px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; background: rgba(255, 255, 255, .025); } .rp-esto__paa { display: flex; gap: 12px; align-items: flex-start; } .rp-esto__ik { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff; } .rp-esto__ik svg { width: 19px; height: 19px; } .rp-esto h3 { margin: 0 0 3px; font-size: 15px; } .rp-esto p { margin: 0; font-size: 12px; color: var(--muted); } .rp-vaikutukset { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } .rp-vaikutukset li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: #bdbdc6; } .rp-vaikutukset li > svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--a1l); } .rp-vaikutukset b { color: #f4f4f7; font-weight: 650; } .pf--estetty { --p1: #3a3a44; } .pf--estetty .pf__kansi { background: linear-gradient(135deg, #1a1a20, #0e0e12); } .pf-estetty__tila { display: inline-flex; align-items: center; gap: 7px; margin: 4px 0 6px; padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; background: rgba(255, 255, 255, .04); font-size: 12.5px; font-weight: 600; color: #e6e6ec; } .pf-estetty__tila svg { width: 15px; height: 15px; } .pf-estetty__teksti { max-width: 420px; font-size: 13px; line-height: 1.55; } .as-estot { display: grid; gap: 6px; } .as-estot__rivi { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; background: rgba(255, 255, 255, .02); } .as-estot__rivi .avatar { width: 36px; height: 36px; border-radius: 50%; } .as-estot__rivi > span { display: grid; flex: 1; min-width: 0; } .as-estot__rivi small { font-size: 11.5px; color: var(--muted); } .as-estot__tyhja { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); } .as-estot__tyhja svg { width: 16px; height: 16px; color: #7fd6a0; } /* Ylläpidon viesti ilmoituksissa */ .pf-ilm--yllapito { border: 1px solid rgba(245, 179, 1, .28); background: linear-gradient(100deg, rgba(245, 179, 1, .1), rgba(var(--a1-rgb) / .05) 70%); margin-bottom: 4px; } .pf-ilm--yllapito.is-uusi { background: linear-gradient(100deg, rgba(245, 179, 1, .16), rgba(var(--a1-rgb) / .07) 70%); } .pf-ilm--yllapito.is-uusi::before { background: linear-gradient(#f5b301, var(--a1)); } .pf-ilm__kuva--yp { background: linear-gradient(135deg, #f5b301, #c2410c); color: #fff; box-shadow: 0 6px 18px -8px rgba(245, 179, 1, .8), inset 0 0 0 1px rgba(255, 255, 255, .25); } .pf-ilm__kuva--yp svg { width: 20px; height: 20px; } .pf-ilm__yp { display: flex; align-items: center; gap: 7px; } .pf-ilm__yp em { padding: 1px 7px; border-radius: 999px; background: rgba(245, 179, 1, .18); color: #f8cf5a; font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .pf-ilm--yllapito q { display: block; overflow: hidden; color: #d9d9e0; font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; quotes: "\201D" "\201D"; } .pf-ilm--yllapito .pf-ilm__teksti small { color: #d8b45a; } /* Jäsenen selvityskeskustelu ylläpidon kanssa */ .ysk { display: flex; flex-direction: column; min-height: min(78vh, 760px); border: 1px solid rgba(255, 255, 255, .08); border-radius: 22px; background: radial-gradient(120% 50% at 0 0, rgba(245, 179, 1, .08), transparent 60%), linear-gradient(180deg, rgba(18, 18, 22, .92), rgba(10, 10, 13, .92)); overflow: hidden; } .ysk-paa { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, .06); } .ysk-paa__tunnus { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 15px; background: linear-gradient(135deg, #f5b301, #c2410c); color: #fff; box-shadow: 0 10px 26px -12px rgba(245, 179, 1, .9), inset 0 0 0 1px rgba(255, 255, 255, .25); } .ysk-paa__tunnus svg { width: 24px; height: 24px; } .ysk-paa__teksti { flex: 1; min-width: 0; } .ysk-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #f8cf5a; } .ysk-paa h1 { margin: 1px 0 2px; font-size: 21px; letter-spacing: -.02em; } .ysk-paa p { margin: 0; overflow: hidden; color: var(--muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; } .ysk-tila { flex: none; padding: 5px 11px; border: 1px solid rgba(52, 211, 120, .35); border-radius: 999px; background: rgba(52, 211, 120, .1); color: #6be3a2; font-size: 11.5px; font-weight: 700; } .ysk-tila.is-suljettu { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: var(--muted); } .ysk-info { display: flex; gap: 10px; align-items: flex-start; margin: 14px 20px 0; padding: 11px 14px; border: 1px solid rgba(245, 179, 1, .2); border-radius: 14px; background: rgba(245, 179, 1, .06); } .ysk-info svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: #f8cf5a; } .ysk-info p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #cfcfd6; } .ysk-info b { color: #fff; } .ysk-lista { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 240px; max-height: 60vh; padding: 18px 20px; overflow-y: auto; } .ysk-viesti { display: flex; gap: 10px; max-width: 82%; } .ysk-viesti--oma { align-self: flex-end; flex-direction: row-reverse; } .ysk-viesti__kuva { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #f5b301, #c2410c); color: #fff; } .ysk-viesti__kuva svg { width: 17px; height: 17px; } .ysk-viesti__runko { display: grid; gap: 4px; min-width: 0; } .ysk-viesti--oma .ysk-viesti__runko { justify-items: end; } .ysk-viesti__nimi { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); } .ysk-viesti__nimi b { color: #fff; font-size: 12.5px; } .ysk-viesti__nimi em { padding: 1px 6px; border-radius: 999px; background: rgba(245, 179, 1, .16); color: #f8cf5a; font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .ysk-viesti__kupla { padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(245, 179, 1, .18); color: #ececf1; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; } .ysk-viesti--oma .ysk-viesti__kupla { border: 0; border-radius: 16px 4px 16px 16px; background: linear-gradient(135deg, var(--a1), color-mix(in srgb, var(--a1) 70%, #000)); color: #fff; } .ysk-viesti__kupla p { margin: 0 0 6px; } .ysk-viesti__kupla p:last-child { margin: 0; } .ysk-jarj { display: flex; justify-content: center; } .ysk-jarj span { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--muted); font-size: 11.5px; } .ysk-kirjoita { display: flex; align-items: flex-end; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid rgba(255, 255, 255, .06); background: rgba(0, 0, 0, .2); } .ysk-kirjoita textarea { flex: 1; min-height: 46px; max-height: 180px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; background: rgba(0, 0, 0, .35); color: #fff; font: inherit; font-size: 14px; line-height: 1.45; resize: none; } .ysk-kirjoita textarea:focus { outline: none; border-color: rgba(var(--a1-rgb) / .55); box-shadow: 0 0 0 3px rgba(var(--a1-rgb) / .15); } .ysk-kirjoita .btn { height: 46px; } .ysk-kirjoita .btn svg { width: 16px; height: 16px; margin-right: 6px; } .ysk-suljettu { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 16px 20px 20px; border-top: 1px solid rgba(255, 255, 255, .06); color: var(--muted); font-size: 13px; } .ysk-suljettu svg { width: 16px; height: 16px; color: #6be3a2; } @media (max-width: 600px) { .pf-kansinappi { width: 38px; height: 38px; } .modal__box.rp-ikkuna { padding: 18px 14px; border-radius: 20px; } .rp-paa h2 { font-size: 19px; } .rp-valittu { margin-left: 0; } .ysk { border-radius: 18px; min-height: 70vh; } .ysk-paa, .ysk-lista { padding-inline: 14px; } .ysk-info { margin-inline: 14px; } .ysk-kirjoita { padding: 12px 14px 14px; } .ysk-kirjoita .btn span { display: none; } .ysk-kirjoita .btn svg { margin: 0; } .ysk-viesti { max-width: 92%; } } @media (prefers-reduced-motion: reduce) { .modal__box.rp-ikkuna, .rp-valmis__merkki { animation: none; } } /* Tietosuojaseloste: osiot säännöt-sivun korteista */ .tsel-lyhyesti { margin: 18px 0 28px; } .tsel-osiot { align-items: stretch; } .tsel { gap: 12px; color: var(--text-2); font-size: 15px; line-height: 1.65; } .tsel > h2 { margin: 0; color: #fff; font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; } .tsel p, .tsel ul { margin: 0; } .tsel ul { padding-left: 18px; display: grid; gap: 7px; } .tsel li::marker { color: var(--red-2); } .tsel b { color: #fff; } .tsel a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .tsel code { font-family: var(--f-mono, "JetBrains Mono", monospace); font-size: .9em; color: #fff; } .tsel--laaja { grid-column: 1 / -1; } .tsel__osat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; } .tsel__osa { padding: 16px 18px; border-radius: var(--r); background: rgba(255, 255, 255, .025); border: 1px solid var(--line); } .tsel__osa h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; color: #fff; font-size: 15px; font-weight: 800; } .tsel__osa h3 svg { width: 17px; height: 17px; flex: none; color: var(--red-2); } .tsel__osa p { font-size: 14.5px; color: var(--muted); } .tsel__taulu { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: rgba(255, 255, 255, .02); } .tsel table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .tsel th, .tsel td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .tsel tr:last-child td { border-bottom: 0; } .tsel th { color: #fff; font-weight: 700; background: rgba(255, 255, 255, .03); } .tsel__sisallys { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; } .tsel__sisallys a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 7px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--text-2); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s, background .2s; } .tsel__sisallys a:hover, .tsel__sisallys a:focus-visible { border-color: rgb(var(--a1-rgb) / .5); background: rgb(var(--a1-rgb) / .1); color: #fff; } .tsel__sisallys b { min-width: 26px; padding: 2px 6px; border-radius: 999px; background: rgb(var(--a1-rgb) / .16); color: #ffb3b3; font-size: 11px; text-align: center; } .tsel { scroll-margin-top: calc(var(--hdr, 64px) + 16px); } .tsel__rivit { display: grid; border: 1px solid var(--line); border-radius: var(--r); background: rgba(255, 255, 255, .02); overflow: hidden; } .tsel__rivi { display: grid; grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); gap: 10px 28px; padding: 18px 20px; } .tsel__rivi + .tsel__rivi { border-top: 1px solid var(--line); } .tsel__rivinimi h3 { display: flex; align-items: center; gap: 9px; margin: 0; color: #fff; font-size: 15.5px; font-weight: 800; } .tsel__rivinimi h3 svg { width: 17px; height: 17px; flex: none; color: var(--red-2); } .tsel__rivinimi small { display: block; margin: 4px 0 0 26px; color: var(--muted); font-size: 12.5px; } .tsel__rivisisalto { display: grid; gap: 10px; align-content: start; } .tsel__rivisisalto p { font-size: 14.5px; color: var(--muted); } .tsel ul.tsel__tagit { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .tsel__tagit li { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: #fff; font-size: 13px; line-height: 1.5; } .tsel__tagit--oikeudet li { display: inline-flex; align-items: center; gap: 6px; padding-left: 8px; border-color: rgba(52, 199, 89, .3); background: rgba(52, 199, 89, .08); } .tsel__tagit--oikeudet svg { width: 14px; height: 14px; color: #4ade80; } .tsel ul.tsel__ajat { display: grid; gap: 8px; padding: 0; list-style: none; } .tsel__ajat li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 12px; border-radius: var(--r); background: rgba(255, 255, 255, .025); border: 1px solid var(--line); } .tsel__ajat b { padding: 6px 4px; border-radius: 10px; background: rgb(var(--a1-rgb) / .14); color: #ffb3b3; font-size: 13px; text-align: center; } .tsel__ajat span { font-size: 14.5px; line-height: 1.5; } @media (max-width: 720px) { .tsel__rivi { grid-template-columns: 1fr; padding: 16px; } .tsel__ajat li { grid-template-columns: 78px minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .tsel__sisallys a { transition: none; } } .ftr__sign a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }