ᚱ ᛉ ᚨ ᛟ ᚦ
ᛏ ᛃ ᚲ ᛞ ᛇ
✦
✦
✦
✦
✦ ᛉ ✦
✦ ᛉ ✦
ZERQON REALM // ONLINE
✦ ᚱ ✦ ᚨ ✦ ᛉ ✦
DARK FANTASY REALM

ZERQON

✦

Wszystkie moje sociale, profile, gamingowe konta oraz kontakt zebrane w jednym mrocznym wymiarze.

ENTER THE REALM
04 / GAMING REALMS

Game
Profiles

Wszystkie moje najważniejsze profile gamingowe. Każda karta reprezentuje osobny świat.

ᛉ
── ✦ ──
ROBLOX

Roblox

Profil użytkownika Roblox.

Otwórz profil
ᚱ
── ✦ ──
EPIC GAMES

Epic

Nazwa konta Epic Games.

Zerqonik
ᛟ
── ✦ ──
RIOT

Riot

Riot ID dla League of Legends oraz VALORANT.

Zerqon#FIT
05 / DARK MESSENGER

Wyślij
Zapytanie

Zostaw wiadomość. Podaj nick oraz treść zapytania, a wiadomość zostanie przekazana bezpośrednio do naszego Discorda.

── ✦ ᛉ ✦ ──
Wiadomość zostanie wysłana jako embed do Discorda.
Wysyłanie...
Skopiowano
der:1px solid var(--purple2); } .nav-indicator::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; } .nav-indicator::after{ right:-1px; bottom:-1px; border-left:none; border-top:none; } /* ========================================================= PAGES ========================================================= */ .page{ position:relative; z-index:2; width:100vw; min-width:100vw; min-height:100vh; flex-shrink:0; scroll-snap-align:start; display:flex; align-items:center; justify-content:center; padding:50px 6vw; isolation:isolate; } /* ========================================================= SHARED FANTASY ORNAMENT ========================================================= */ .fantasy-line{ height:1px; background: linear-gradient( 90deg, transparent, var(--line2) 20%, rgba(129,101,161,.5) 50%, var(--line2) 80%, transparent ); } .corner{ position:absolute; width:26px; height:26px; pointer-events:none; } .corner::before, .corner::after{ content:""; position:absolute; background:var(--purple); opacity:.5; } .corner::before{ width:26px; height:1px; } .corner::after{ width:1px; height:26px; } .corner.tl{ top:12px; left:12px; } .corner.tr{ top:12px; right:12px; transform:scaleX(-1); } .corner.bl{ bottom:12px; left:12px; transform:scaleY(-1); } .corner.br{ right:12px; bottom:12px; transform:scale(-1); } /* ========================================================= HERO ========================================================= */ .hero{ flex-direction:column; text-align:center; } .hero-inner{ position:relative; width:min(1000px,100%); display:flex; flex-direction:column; align-items:center; gap:22px; transform:translateY(50px); opacity:0; filter:blur(10px); transition: transform 1.2s cubic-bezier(.16,1,.3,1), opacity 1s, filter 1s; } .active-in .hero-inner{ transform:none; opacity:1; filter:blur(0); } /* ========================================================= HERO FRAME ========================================================= */ .hero-inner::before{ content:""; position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); width:min(850px,95vw); height:470px; border-top:1px solid rgba(94,90,102,.35); border-bottom:1px solid rgba(94,90,102,.35); pointer-events:none; } .hero-inner::after{ content:""; position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); width:min(710px,84vw); height:400px; border-left:1px solid rgba(109,66,184,.12); border-right:1px solid rgba(109,66,184,.12); pointer-events:none; } /* logo */ .hero-logo-wrap{ position:relative; width:155px; height:155px; transition: transform .2s ease-out; } .hero-logo{ width:100%; height:100%; object-fit:cover; image-rendering:auto; border:1px solid #4b4651; background:#111; box-shadow: 0 25px 70px rgba(0,0,0,.9); clip-path:polygon( 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px ); } .hero-logo-wrap::before{ content:""; position:absolute; inset:-12px; border:1px solid rgba(109,66,184,.25); transform:rotate(45deg) scale(.82); animation: fantasyRotate 18s linear infinite; } .hero-logo-wrap::after{ content:""; position:absolute; inset:-20px; background: radial-gradient( circle, rgba(109,66,184,.12), transparent 68% ); filter:blur(15px); z-index:-1; } @keyframes fantasyRotate{ from{ transform:rotate(45deg) scale(.82); } to{ transform:rotate(405deg) scale(.82); } } /* kicker */ .kicker{ position:relative; font-family:var(--pixel-font); font-size:10px; letter-spacing:3px; color:#8f8998; text-transform:uppercase; display:flex; align-items:center; gap:14px; } .kicker::before, .kicker::after{ content:""; width:55px; height:1px; background: linear-gradient( 90deg, transparent, #4c4852 ); } .kicker::after{ background: linear-gradient( 90deg, #4c4852, transparent ); } /* MAIN TITLE */ .hero h1{ position:relative; z-index:2; font-family:var(--fantasy-font); font-weight:400; font-size: clamp( 90px, 14vw, 180px ); line-height:.75; letter-spacing:2px; color:#d9d6dc; text-shadow: 0 8px 0 #161419, 0 16px 35px rgba(0,0,0,.9); transition: transform .15s ease-out; } .hero h1 span{ color:var(--purple3); text-shadow: 0 0 25px rgba(141,97,225,.2), 0 8px 0 #261d30; } .hero-copy{ position:relative; z-index:3; max-width:620px; color:#7b7781; font-size:18px; font-weight:500; letter-spacing:.4px; line-height:1.7; } .scroll-cue{ position:relative; z-index:3; margin-top:20px; font-family:var(--pixel-font); font-size:9px; letter-spacing:2px; color:#68646d; display:flex; align-items:center; gap:8px; animation: scrollFloat 2s ease-in-out infinite; } .scroll-cue i{ color:var(--purple2); } @keyframes scrollFloat{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(8px); } } /* ========================================================= CONTENT ========================================================= */ .content{ width:min(1300px,100%); } /* section title */ .section-number{ display:flex; align-items:center; gap:12px; margin-bottom:24px; color:#64616a; font-family:var(--pixel-font); font-size:9px; letter-spacing:2px; } .section-number span{ color:var(--purple2); } .section-number::after{ content:""; height:1px; flex:1; background: linear-gradient( 90deg, #3c3941, transparent ); } /* ========================================================= MAIN PANEL ========================================================= */ .panel{ position:relative; min-height:min(70vh,700px); background: linear-gradient( 135deg, rgba(24,24,29,.97), rgba(9,9,12,.98) ); border:1px solid #393640; box-shadow:var(--shadow); overflow:hidden; transform: translateX(100px) scale(.94); opacity:0; filter:blur(15px); transition: transform 1.2s cubic-bezier(.16,1,.3,1), opacity 1s ease, filter 1s ease, box-shadow .4s ease, border-color .3s ease; clip-path:polygon( 0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px) ); } .active-in .panel{ transform: perspective(2200px) rotateX(var(--rx)) rotateY(var(--ry)); opacity:1; filter:blur(0); } .panel:hover{ border-color:#5b5265; box-shadow: 0 50px 130px rgba(0,0,0,.95), 0 0 50px rgba(109,66,184,.12); } /* inner frame */ .panel::before{ content:""; position:absolute; inset:10px; border:1px solid rgba(87,82,94,.28); pointer-events:none; z-index:5; } /* second inner line */ .panel::after{ content:""; position:absolute; inset:15px; border: 1px solid rgba(109,66,184,.09); pointer-events:none; z-index:5; } /* top/bottom fantasy lines */ .panel-grid{ position:absolute; inset:0; pointer-events:none; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,.012) 50%, transparent 100% ); opacity:.6; } .panel-grid::before, .panel-grid::after{ content:""; position:absolute; left:0; right:0; height:1px; background: linear-gradient( 90deg, transparent, rgba(109,66,184,.25), transparent ); } .panel-grid::before{ top:24%; } .panel-grid::after{ bottom:24%; } /* glowing center */ .panel-glow{ position:absolute; inset:0; pointer-events:none; opacity:0; background: radial-gradient( circle at var(--mx,50%) var(--my,50%), rgba(109,66,184,.12), transparent 38% ); transition:opacity .4s ease; } .panel:hover .panel-glow{ opacity:1; } /* image */ .bg-image{ position:absolute; inset:-40px; z-index:-2; background-size:cover; background-position:center; opacity:.09; filter: grayscale(1) contrast(1.3) brightness(.35) blur(3px); transform: scale(1.08) translate( calc(var(--px,0) * -18px), calc(var(--py,0) * -18px) ); transition: transform .15s ease-out, opacity .5s ease; } .panel:hover .bg-image{ opacity:.16; } /* purple aura */ .panel-icon-bg{ position:absolute; right:65px; top:55px; color:rgba(140,105,182,.09); font-size:92px; transition: color .4s ease, transform .4s ease; } .panel:hover .panel-icon-bg{ color:rgba(140,105,182,.17); transform: translateY(-8px) rotate(-4deg); } /* ========================================================= PANEL CONTENT ========================================================= */ .panel-content{ position:relative; z-index:7; width:100%; padding: clamp(55px,7vw,95px); display:flex; align-items:center; justify-content:space-between; gap:55px; } .copy{ max-width:720px; transform:translateX(50px); opacity:0; transition: transform 1s .2s cubic-bezier(.16,1,.3,1), opacity .8s .2s; } .active-in .copy{ transform:none; opacity:1; } .eyebrow{ display:flex; align-items:center; gap:10px; color:#8d8993; font-family:var(--pixel-font); font-size:9px; letter-spacing:1px; margin-bottom:18px; } .eyebrow i{ color:var(--purple2); font-size:17px; } .title{ font-family:var(--fantasy-font); font-size: clamp( 65px, 8vw, 110px ); font-weight:400; line-height:.8; letter-spacing:1px; color:#dcd9e0; text-shadow: 0 7px 0 #17151a, 0 22px 55px rgba(0,0,0,.8); } .desc{ max-width:610px; margin-top:28px; color:#85818b; font-size:18px; line-height:1.8; } .desc b{ color:#d5d0db; } /* ========================================================= CTA ========================================================= */ .cta{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:16px; margin-top:35px; min-width:235px; padding:18px 24px; text-decoration:none; color:#dcd9df; font-family:var(--pixel-font); font-size:9px; letter-spacing:1px; background: linear-gradient( 180deg, #1b1920, #0e0d10 ); border:1px solid #4a4550; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 12px 30px rgba(0,0,0,.5); clip-path:polygon( 7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px ); transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease; } .cta::before{ content:""; position:absolute; inset:3px; border:1px solid rgba(109,66,184,.12); pointer-events:none; } .cta:hover{ color:#fff; background: linear-gradient( 180deg, #372653, #17121f ); border-color:#7755a5; transform: translateY(-5px); box-shadow: 0 25px 50px rgba(0,0,0,.75), 0 0 35px rgba(109,66,184,.18); } .arrow{ color:var(--purple2); transition: transform .25s ease; } .cta:hover .arrow{ transform: translate(4px,-4px); } /* ========================================================= BADGE ========================================================= */ .badge-wrap{ position:relative; flex-shrink:0; opacity:0; transform: translateX(40px) rotate(6deg); transition: transform 1s .4s cubic-bezier(.16,1,.3,1), opacity .8s .4s; } .active-in .badge-wrap{ opacity:1; transform:none; } .badge-wrap::before{ content:""; position:absolute; inset:-28px; border: 1px solid rgba(109,66,184,.22); transform:rotate(45deg); animation: slowSpin 22s linear infinite; } .badge-wrap::after{ content:""; position:absolute; inset:-50px; background: radial-gradient( circle, rgba(109,66,184,.13), transparent 70% ); z-index:-1; filter:blur(10px); } @keyframes slowSpin{ to{ transform: rotate(405deg); } } .badge{ width:175px; height:175px; object-fit:cover; background:#111; border:1px solid #514b59; box-shadow: 0 35px 70px rgba(0,0,0,.9); clip-path:polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px ); transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease; } .panel:hover .badge{ transform: translateY(-12px) scale(1.04) rotate(-3deg); border-color:#8066a1; box-shadow: 0 45px 90px rgba(0,0,0,.95), 0 0 45px rgba(109,66,184,.16); } /* ========================================================= GAME SECTION ========================================================= */ .games{ align-items:center; } .games-shell{ width:min(1400px,100%); } .games-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:38px; transform:translateY(40px); opacity:0; transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .8s; } .active-in .games-head{ transform:none; opacity:1; } .games-head h2{ font-family:var(--fantasy-font); font-size: clamp( 58px, 7vw, 100px ); line-height:.8; font-weight:400; color:#dad7de; text-shadow: 0 7px 0 #161419, 0 18px 40px rgba(0,0,0,.8); } .games-head p{ max-width:540px; color:#7d7983; line-height:1.7; font-size:16px; } /* ========================================================= GAME GRID ========================================================= */ .game-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; } .game{ position:relative; min-height:340px; padding:30px; background: linear-gradient( 155deg, rgba(24,23,28,.98), rgba(10,10,12,.98) ); border:1px solid #35323a; box-shadow: 0 22px 45px rgba(0,0,0,.65); overflow:hidden; transform: translateY(50px) scale(.94); opacity:0; transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .8s ease, border-color .3s ease, box-shadow .4s ease; } .active-in .game{ transform:none; opacity:1; } .active-in .game:nth-child(1){ transition-delay:.12s; } .active-in .game:nth-child(2){ transition-delay:.22s; } .active-in .game:nth-child(3){ transition-delay:.32s; } .active-in .game:nth-child(4){ transition-delay:.42s; } /* corners */ .game::before, .game::after{ content:""; position:absolute; width:24px; height:24px; border-color:#635b6c; border-style:solid; opacity:.75; } .game::before{ top:9px; left:9px; border-width:1px 0 0 1px; } .game::after{ right:9px; bottom:9px; border-width:0 1px 1px 0; } /* glow line */ .game-shine{ position:absolute; left:-120%; top:0; width:60%; height:100%; background: linear-gradient( 90deg, transparent, rgba(145,108,194,.06), transparent ); transform:skewX(-20deg); transition: left 1s ease; } .game:hover .game-shine{ left:140%; } .game:hover{ border-color:#514963; box-shadow: 0 40px 80px rgba(0,0,0,.85), 0 0 30px rgba(109,66,184,.12); transform: translateY(-10px) scale(1.025); } /* card top */ .game-top{ position:relative; z-index:2; } .no{ display:flex; align-items:center; gap:8px; color:#77727d; font-family:var(--pixel-font); font-size:8px; letter-spacing:1px; } .no i{ font-size:16px; color:var(--purple2); } .game h3{ margin-top:25px; font-family:var(--fantasy-font); font-size:43px; font-weight:400; line-height:.9; color:#d4d0d8; text-shadow: 0 5px 0 #17151a; } .game p{ margin-top:18px; font-size:15px; line-height:1.6; color:#7b7780; } /* handle */ .handle{ display:inline-block; margin-top:22px; padding:11px 14px; color:#aaa4b0; font-family:var(--pixel-font); font-size:8px; letter-spacing:.5px; background:#0b0b0e; border:1px solid #312e36; } /* bottom */ .game-bottom{ position:relative; z-index:2; margin-top:auto; } .game-btn{ position:relative; width:100%; display:flex; align-items:center; justify-content:center; gap:12px; padding:15px 18px; color:#c7c3ca; font-family:var(--pixel-font); font-size:8px; letter-spacing:.7px; background: linear-gradient( 180deg, #1a181d, #0d0d10 ); border:1px solid #413d47; cursor:pointer; transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; } .game-btn:hover{ background: linear-gradient( 180deg, #302340, #15111c ); color:#fff; border-color:#76579e; transform:translateY(-4px); } .game-btn i{ color:var(--purple2); } /* ========================================================= PARTICLES ========================================================= */ .trail-dot{ position:fixed; width:4px; height:4px; background:var(--purple2); box-shadow: 0 0 12px rgba(141,97,225,.8); pointer-events:none; z-index:20; transform:translate(-50%,-50%); animation: trailFade .7s forwards; } @keyframes trailFade{ to{ opacity:0; transform: translate(-50%,-50%) scale(.05); } } /* click */ .click-burst{ position:fixed; width:12px; height:12px; border:1px solid rgba(165,130,208,.8); pointer-events:none; z-index:70; transform:translate(-50%,-50%); animation: burst .7s cubic-bezier(.19,1,.22,1) forwards; } @keyframes burst{ to{ width:170px; height:170px; opacity:0; border-color:rgba(109,66,184,0); } } /* panel ripple */ .panel-ripple{ position:absolute; width:10px; height:10px; border:1px solid rgba(175,143,220,.5); transform:translate(-50%,-50%); pointer-events:none; z-index:20; animation: panelRipple .9s cubic-bezier(.19,1,.22,1) forwards; } @keyframes panelRipple{ to{ width:850px; height:850px; opacity:0; border-color:rgba(109,66,184,0); } } /* ========================================================= TOAST ========================================================= */ .toast{ position:fixed; right:28px; bottom:28px; z-index:100; display:flex; align-items:center; gap:12px; min-width:220px; padding:16px 20px; background: linear-gradient( 180deg, #19171d, #0d0c0f ); border:1px solid #4c4653; color:#dcd8df; font-family:var(--pixel-font); font-size:8px; box-shadow: 0 20px 50px rgba(0,0,0,.85); transform: translateY(25px) scale(.94); opacity:0; pointer-events:none; transition: transform .35s ease, opacity .35s ease; } .toast i{ color:var(--purple2); font-size:20px; } .toast.show{ transform:none; opacity:1; } /* ========================================================= ORNAMENTS IN PANEL ========================================================= */ .panel-orna{ position:absolute; left:50%; top:22px; transform:translateX(-50%); font-family:var(--fantasy-font); color:#4b4551; font-size:24px; letter-spacing:10px; white-space:nowrap; } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1200px){ .game-grid{ grid-template-columns: repeat(2,1fr); } .panel-content{ flex-direction:column; align-items:flex-start; justify-content:center; } .badge-wrap{ position:absolute; right:60px; top:60px; } .games-head{ display:block; } .games-head p{ margin-top:20px; } } @media(max-width:768px){ .page{ padding: 35px 7vw; } .hero h1{ font-size: 19vw; } .hero-logo-wrap{ width:125px; height:125px; } .hero-inner::before, .hero-inner::after{ display:none; } .panel{ min-height:66vh; } .panel-content{ padding:40px 32px; } .title{ font-size: clamp( 56px, 16vw, 85px ); } .badge-wrap{ display:none; } .game-grid{ grid-template-columns:1fr; } .game{ min-height:260px; } .games-head h2{ font-size:64px; } .nav-dock{ bottom:15px; } .nav-item{ width:40px; height:40px; } .nav-indicator{ width:40px; height:40px; } .cursor-glow, .cursor-ring, .cursor-dot{ display:none; } }
DARK FANTASY PROFILE

ZERQON

Wszystkie moje sociale, profile oraz konta zebrane w jednym mrocznym miejscu.

EXPLORE THE REALM
04 / GAMING REALMS

Game
Profiles

Wszystkie moje najważniejsze profile gamingowe. Każdy z nich ma własną kartę i oddzielną identyfikację.

EPIC GAMES

Epic

Nazwa mojego konta Epic Games.

Zerqonik
RIOT

Riot

Riot ID dla League of Legends oraz VALORANT.

Zerqon#FIT
Skopiowano