SplendidBear-Websites/MineSeeker
Private
Public Access
1
0
Fork 0
Code Pull Requests 1 Releases Activity

chg: usr: improve the gfx on homepage - implement login/register and activation for authentication - and add the first version of profile page #4

Browse Source
This commit is contained in:
László Lang
2026-04-11 20:45:51 +02:00
parent eff849549b
commit 6b3e19b063
43 changed files with 3375 additions and 1806 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
assets/css/homepage/_animations.scss Normal file
View File

@@ -0,0 +1,9 @@
@keyframes appear {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
@keyframes rise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}

80
assets/css/homepage/_auth-bar.scss Normal file
View File

@@ -0,0 +1,80 @@
.hero-auth {
position: absolute;
top: 28px;
right: 36px;
display: flex;
align-items: center;
gap: 10px;
z-index: 10;
}
.hero-auth-user {
font: 600 13px 'Rajdhani', sans-serif;
color: rgba(149, 207, 245, 0.75);
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 6px;
i { font-size: 15px; }
}
.hero-auth-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font: 600 12px 'Rajdhani', sans-serif;
text-transform: uppercase;
letter-spacing: 1.5px;
text-decoration: none;
color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 4px;
padding: 7px 14px;
cursor: pointer;
transition: all 200ms ease;
&:hover {
color: #fff;
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
}
&--register {
color: rgba(149, 207, 245, 0.8);
border-color: rgba(35, 111, 135, 0.4);
background: rgba(35, 111, 135, 0.12);
&:hover {
color: #fff;
background: rgba(35, 111, 135, 0.28);
border-color: rgba(149, 207, 245, 0.5);
}
}
&--out {
background: transparent;
border-color: rgba(173, 10, 5, 0.3);
color: rgba(246, 125, 82, 0.7);
&:hover {
background: rgba(173, 10, 5, 0.15);
border-color: rgba(246, 125, 82, 0.5);
color: #f67d52;
}
}
&--profile {
color: rgba(149, 207, 245, 0.8);
border-color: rgba(35, 111, 135, 0.35);
background: rgba(35, 111, 135, 0.08);
text-decoration: none;
&:hover {
color: #fff;
background: rgba(35, 111, 135, 0.22);
border-color: rgba(149, 207, 245, 0.5);
}
}
}

219
assets/css/homepage/_auth.scss Normal file
View File

@@ -0,0 +1,219 @@
.auth-page {
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px 80px;
}
.auth-flash {
width: 100%;
max-width: 420px;
padding: 12px 18px;
border-radius: 5px;
font: 600 14px 'Rajdhani', sans-serif;
letter-spacing: 0.5px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 8px;
&--success {
background: rgba(26, 104, 68, 0.25);
border: 1px solid rgba(42, 158, 96, 0.4);
color: #a0f0c0;
}
&--error {
background: rgba(173, 10, 5, 0.18);
border: 1px solid rgba(173, 10, 5, 0.4);
color: #f6a090;
}
}
// "Check your inbox" confirmation card
.auth-card--sent {
text-align: center;
padding: 48px 40px;
}
.auth-sent-icon {
font-size: 52px;
color: rgba(149, 207, 245, 0.6);
margin-bottom: 20px;
filter: drop-shadow(0 0 16px rgba(35, 111, 135, 0.4));
}
.auth-sent-email {
font: 700 16px 'Rajdhani', sans-serif;
color: #95cff5;
letter-spacing: 0.5px;
margin: 0 0 20px;
word-break: break-all;
}
.auth-sent-note {
font: 400 14px 'Rajdhani', sans-serif;
color: rgba(255, 255, 255, 0.5);
line-height: 1.7;
margin-bottom: 0;
strong { color: rgba(255, 255, 255, 0.75); }
}
.auth-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(35, 111, 135, 0.2);
border-radius: 10px;
padding: 44px 48px 40px;
width: 100%;
max-width: 420px;
backdrop-filter: blur(4px);
box-shadow: 0 8px 48px rgba(0, 0, 0, 0.5);
}
.auth-title {
font: 800 30px 'Rajdhani', sans-serif;
color: #ffffff;
letter-spacing: 1px;
margin-bottom: 6px;
}
.auth-sub {
font: 400 14px 'Rajdhani', sans-serif;
color: rgba(149, 207, 245, 0.6);
letter-spacing: 0.5px;
margin-bottom: 32px;
}
.auth-error {
background: rgba(173, 10, 5, 0.18);
border: 1px solid rgba(173, 10, 5, 0.4);
border-radius: 5px;
padding: 10px 14px;
font: 600 13px 'Rajdhani', sans-serif;
color: #f6a090;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 8px;
}
.auth-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.auth-field {
display: flex;
flex-direction: column;
gap: 7px;
}
.auth-label {
font: 700 11px 'Rajdhani', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.45);
}
.auth-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.auth-input-icon {
position: absolute;
left: 11px;
color: rgba(149, 207, 245, 0.4);
font-size: 13px;
pointer-events: none;
}
.auth-input {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(35, 111, 135, 0.3);
border-radius: 5px;
padding: 11px 14px 11px 34px;
font: 500 15px 'Rajdhani', sans-serif;
color: #ffffff;
letter-spacing: 0.5px;
transition: border-color 200ms ease, background 200ms ease;
&::placeholder { color: rgba(255, 255, 255, 0.2); }
&:focus {
outline: none;
background: rgba(35, 111, 135, 0.1);
border-color: rgba(149, 207, 245, 0.5);
}
&--error {
border-color: rgba(173, 10, 5, 0.6) !important;
}
}
.auth-field-error {
font: 500 12px 'Rajdhani', sans-serif;
color: #f6a090;
letter-spacing: 0.3px;
}
.auth-remember {
display: flex;
align-items: center;
gap: 8px;
font: 500 13px 'Rajdhani', sans-serif;
color: rgba(255, 255, 255, 0.45);
cursor: pointer;
user-select: none;
margin-top: -4px;
input[type="checkbox"] { accent-color: #236f87; }
}
.auth-submit {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(to bottom, #ad0a05 0%, #d4401a 55%, #f67d52 100%);
border: 1px solid rgba(246, 125, 82, 0.3);
border-radius: 5px;
color: #ffffff;
font: 700 16px 'Rajdhani', sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
padding: 14px;
cursor: pointer;
margin-top: 6px;
box-shadow: 0 4px 20px rgba(173, 10, 5, 0.35);
transition: all 220ms ease;
&:hover {
background: linear-gradient(to bottom, #c91008 0%, #e5521e 55%, #ff8c61 100%);
box-shadow: 0 6px 28px rgba(173, 10, 5, 0.6);
transform: translateY(-2px);
}
&:active { transform: translateY(0); }
}
.auth-switch {
font: 400 13px 'Rajdhani', sans-serif;
color: rgba(255, 255, 255, 0.35);
text-align: center;
margin-top: 24px;
letter-spacing: 0.3px;
a {
color: #95cff5;
text-decoration: none;
font-weight: 600;
transition: color 180ms;
&:hover { color: #c5e8ff; }
}
}

35
assets/css/homepage/_content.scss Normal file
View File

@@ -0,0 +1,35 @@
main div.txt {
color: rgba(255, 255, 255, 0.85);
max-width: 900px;
margin: 0 auto;
padding: 60px 40px 80px;
}
main div.txt h2 {
font: bold 28px 'Rajdhani', sans-serif;
color: #ffffff;
margin-bottom: 30px;
letter-spacing: 1px;
}
main div.txt h3 {
font: bold 17px 'Rajdhani', sans-serif;
color: rgba(149, 207, 245, 0.9);
margin: 28px 0 10px;
letter-spacing: 0.5px;
}
main div.txt p,
main div.txt li {
font: 400 15px 'Rajdhani', sans-serif;
color: rgba(255, 255, 255, 0.72);
line-height: 1.75;
}
main div.txt a {
color: #95cff5;
text-decoration: none;
transition: color 180ms;
&:hover { color: #c5e8ff; }
}

75
assets/css/homepage/_cta.scss Normal file
View File

@@ -0,0 +1,75 @@
.hero-cta {
position: relative;
display: inline-block;
font: 800 28px 'Rajdhani', sans-serif;
text-transform: uppercase;
letter-spacing: 6px;
text-decoration: none;
color: #ffffff;
padding: 22px 100px 20px;
border-radius: 4px;
border: 1px solid rgba(246, 125, 82, 0.25);
background: linear-gradient(to bottom, #b30c06 0%, #d63d15 50%, #f67d52 100%);
box-shadow:
0 0 0 1px rgba(173, 10, 5, 0.2),
0 0 30px rgba(173, 10, 5, 0.35),
0 6px 24px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
transition: transform 220ms ease, box-shadow 220ms ease, letter-spacing 220ms ease;
animation: rise 0.8s 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
// Outer glow layer (blurred duplicate, always visible)
.hero-cta::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 7px;
background: linear-gradient(to bottom, #ad0a05, #f67d52);
filter: blur(18px);
opacity: 0.3;
z-index: -1;
transition: opacity 220ms ease;
}
.hero-cta:hover {
transform: translateY(-4px);
letter-spacing: 8px;
box-shadow:
0 0 0 1px rgba(246, 125, 82, 0.3),
0 0 50px rgba(173, 10, 5, 0.65),
0 10px 32px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.hero-cta:hover::before {
opacity: 0.55;
}
.hero-cta:active {
transform: translateY(-1px);
}
// Version / copyright line
.hero-meta {
position: relative;
z-index: 1;
font: 400 12px 'Rajdhani', sans-serif;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.5px;
margin-top: 58px;
animation: rise 0.8s 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-meta a {
color: rgba(149, 207, 245, 0.65);
text-decoration: none;
transition: color 180ms;
}
.hero-meta a:hover {
color: #95cff5;
}

202
assets/css/homepage/_features.scss Normal file
View File

@@ -0,0 +1,202 @@
.feature-block {
width: 100%;
padding: 80px 40px;
position: relative;
&:first-of-type {
border-top: 1px solid rgba(35, 111, 135, 0.12);
}
& + & {
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
}
.feature-block__inner {
display: flex;
align-items: center;
gap: 80px;
max-width: 1100px;
margin: 0 auto;
}
.feature-block--reverse .feature-block__inner {
flex-direction: row-reverse;
}
// Visual side
.feature-block__visual {
flex: 0 0 340px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
// Stats icons cluster
.feature-block__visual--stats {
height: 260px;
gap: 0;
i {
position: absolute;
color: rgba(35, 111, 135, 0.5);
transition: color 300ms ease;
}
// Bar chart — large, centre
i.fa-bar-chart {
font-size: 140px;
color: rgba(35, 111, 135, 0.35);
filter: drop-shadow(0 0 30px rgba(35, 111, 135, 0.3));
}
// Trophy — top right
i.fa-trophy {
font-size: 64px;
top: 12px;
right: 30px;
color: rgba(246, 125, 82, 0.5);
filter: drop-shadow(0 0 16px rgba(246, 125, 82, 0.25));
}
// History — bottom left
i.fa-history {
font-size: 52px;
bottom: 18px;
left: 30px;
color: rgba(149, 207, 245, 0.4);
filter: drop-shadow(0 0 12px rgba(149, 207, 245, 0.2));
}
&:hover i.fa-bar-chart { color: rgba(35, 111, 135, 0.6); }
&:hover i.fa-trophy { color: rgba(246, 125, 82, 0.75); }
&:hover i.fa-history { color: rgba(149, 207, 245, 0.65); }
}
// MSN visual
.feature-block__visual--msn {
flex-direction: column;
align-items: center;
gap: 20px;
position: relative;
}
.msn-logo {
width: 90px;
height: 90px;
object-fit: contain;
filter: drop-shadow(0 0 18px rgba(149, 207, 245, 0.3)) brightness(1.1);
flex-shrink: 0;
z-index: 1;
}
.msn-screenshot {
width: 340px;
max-width: 100%;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 8px 40px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(35, 111, 135, 0.12);
filter: saturate(0.85) brightness(0.9);
transition: filter 300ms ease;
&:hover {
filter: saturate(1) brightness(1);
}
}
// Text side
.feature-block__text {
flex: 1;
min-width: 0;
}
.feature-block__label {
font: 700 11px 'Rajdhani', sans-serif;
text-transform: uppercase;
letter-spacing: 4px;
color: rgba(149, 207, 245, 0.55);
margin-bottom: 12px;
}
.feature-block__title {
font: 800 40px 'Rajdhani', sans-serif;
color: #ffffff;
line-height: 1.1;
letter-spacing: 0.5px;
margin-bottom: 18px;
}
.feature-block__body {
font: 400 16px 'Rajdhani', sans-serif;
color: rgba(255, 255, 255, 0.62);
line-height: 1.8;
margin-bottom: 0;
}
.feature-block__cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 28px;
font: 700 14px 'Rajdhani', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
color: rgba(149, 207, 245, 0.85);
border: 1px solid rgba(35, 111, 135, 0.4);
background: rgba(35, 111, 135, 0.1);
padding: 11px 24px;
border-radius: 4px;
transition: all 200ms ease;
&:hover {
background: rgba(35, 111, 135, 0.25);
border-color: rgba(149, 207, 245, 0.55);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(35, 111, 135, 0.25);
}
}
@media screen and (max-width: 900px) {
.feature-block__inner,
.feature-block--reverse .feature-block__inner {
flex-direction: column;
gap: 48px;
text-align: center;
}
.feature-block__visual {
flex: none;
width: 100%;
}
.feature-block__visual--stats {
height: 200px;
}
.feature-block__visual--msn {
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.msn-screenshot {
width: 100%;
}
.feature-block__label,
.feature-block__cta {
margin-left: auto;
margin-right: auto;
}
.feature-block__title { font-size: 32px; }
.feature-block {
padding: 60px 24px;
}
}

115
assets/css/homepage/_footer.scss Normal file
View File

@@ -0,0 +1,115 @@
footer {
background: #040608;
border-top: 1px solid rgba(35, 111, 135, 0.12);
width: 100%;
}
.footer-inner {
display: flex;
align-items: flex-start;
justify-content: space-between;
max-width: 1100px;
margin: 0 auto;
padding: 60px 60px 52px;
gap: 40px;
}
// Left: brand block
.footer-brand {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.footer-logo {
width: 72px;
height: 72px;
opacity: 0.55;
filter:
drop-shadow(0 0 12px rgba(35, 111, 135, 0.4))
brightness(1.1);
transition: opacity 250ms ease, filter 250ms ease;
&:hover {
opacity: 0.9;
filter:
drop-shadow(0 0 20px rgba(35, 111, 135, 0.65))
brightness(1.2);
}
}
.footer-name {
font: 700 22px 'Rajdhani', sans-serif;
color: rgba(255, 255, 255, 0.75);
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 4px;
}
.footer-tagline {
font: 400 13px 'Rajdhani', sans-serif;
color: rgba(149, 207, 245, 0.7);
letter-spacing: 0.5px;
max-width: 240px;
line-height: 1.5;
}
// Right: navigation
.footer-nav-label {
font: 700 11px 'Rajdhani', sans-serif;
text-transform: uppercase;
letter-spacing: 4px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 18px;
text-align: left;
}
.footer-nav ul {
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
min-width: 180px;
}
.footer-nav ul li a {
display: block;
font: 500 15px 'Rajdhani', sans-serif;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.5px;
white-space: nowrap;
padding: 6px 0;
transition: color 180ms ease, letter-spacing 180ms ease;
&:hover {
color: #95cff5;
letter-spacing: 2px;
}
}
// Bottom copyright bar
.footer-copy {
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding: 16px 60px;
max-width: 1100px;
margin: 0 auto;
p {
font: 400 11px 'Rajdhani', sans-serif;
color: rgba(255, 255, 255, 0.45);
letter-spacing: 0.5px;
text-align: center;
}
a {
color: rgba(149, 207, 245, 0.6);
text-decoration: none;
transition: color 180ms;
&:hover { color: #95cff5; }
}
}

39
assets/css/homepage/_header.scss Normal file
View File

@@ -0,0 +1,39 @@
header {
position: relative;
width: 100%;
overflow: hidden;
// Minesweeper grid texture
background-color: #07090d;
background-image:
linear-gradient(rgba(35, 111, 135, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(35, 111, 135, 0.1) 1px, transparent 1px);
background-size: 46px 46px;
}
// Deep radial vignette – grid fades toward the centre
header::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 85% 75% at 50% 50%,
#07090d 10%,
transparent 75%
);
z-index: 0;
pointer-events: none;
}
// Smoke at the bottom so header bleeds into body
header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 160px;
background: linear-gradient(to bottom, transparent, #07090d);
z-index: 1;
pointer-events: none;
}

49
assets/css/homepage/_hero-compact.scss Normal file
View File

@@ -0,0 +1,49 @@
.hero--compact {
min-height: unset;
padding: 36px 60px 48px;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: left;
gap: 52px;
&::before, &::after { display: none; }
.hero-logo {
flex-shrink: 0;
margin-bottom: 0;
img { width: 180px; }
}
.hero-body {
align-items: flex-start;
}
.hero-sub {
font-size: 14px;
letter-spacing: 2px;
margin-bottom: 10px;
}
h1 {
font-size: 26px;
margin-bottom: 24px;
letter-spacing: 0;
}
.hero-cta {
padding: 12px 52px 10px;
font-size: 18px;
letter-spacing: 4px;
}
.hero-meta {
margin-top: 20px;
}
}
// Also shrink the bottom fade on sub-pages
header:has(.hero--compact)::after {
height: 60px;
}

90
assets/css/homepage/_hero.scss Normal file
View File

@@ -0,0 +1,90 @@
.hero {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 100vh;
padding: 80px 40px 160px;
gap: 0;
}
// Decorative glow blobs in opposite corners
.hero::before {
content: '';
position: absolute;
top: -60px;
left: -60px;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(circle, rgba(173, 10, 5, 0.09) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
.hero::after {
content: '';
position: absolute;
bottom: 100px;
right: -60px;
width: 380px;
height: 380px;
border-radius: 50%;
background: radial-gradient(circle, rgba(35, 111, 135, 0.1) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
// Logo
.hero-logo {
display: block;
margin-bottom: 72px;
position: relative;
z-index: 1;
animation: appear 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-logo img {
width: 400px;
max-width: 82vw;
filter:
drop-shadow(0 0 40px rgba(35, 111, 135, 0.35))
drop-shadow(0 6px 20px rgba(0, 0, 0, 0.8));
}
// Body text block
.hero-body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.hero-sub {
font: 300 17px 'Rajdhani', sans-serif;
color: rgba(149, 207, 245, 0.9);
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 18px;
animation: rise 0.8s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-sub strong {
font-weight: 600;
color: #95cff5;
}
.hero h1 {
font: 800 58px 'Rajdhani', sans-serif;
color: #ffffff;
line-height: 1.1;
letter-spacing: 1px;
margin-bottom: 56px;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
animation: rise 0.8s 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

266
assets/css/homepage/_profile.scss Normal file
View File

@@ -0,0 +1,266 @@
.profile-page {
max-width: 760px;
margin: 0 auto;
padding: 48px 24px 80px;
display: flex;
flex-direction: column;
gap: 32px;
}
.profile-header {
display: flex;
align-items: center;
gap: 28px;
padding: 32px 36px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(35, 111, 135, 0.2);
border-radius: 10px;
backdrop-filter: blur(4px);
box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4);
}
.profile-avatar {
width: 80px;
height: 80px;
flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(135deg, rgba(35, 111, 135, 0.45) 0%, rgba(173, 10, 5, 0.3) 100%);
border: 2px solid rgba(35, 111, 135, 0.45);
display: flex;
align-items: center;
justify-content: center;
font: 800 28px 'Rajdhani', sans-serif;
color: rgba(149, 207, 245, 0.9);
letter-spacing: 2px;
box-shadow:
0 0 0 4px rgba(35, 111, 135, 0.08),
0 0 24px rgba(35, 111, 135, 0.2);
}
.profile-info {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.profile-name {
font: 800 32px 'Rajdhani', sans-serif;
color: #ffffff;
letter-spacing: 1px;
line-height: 1;
}
.profile-email {
font: 400 14px 'Rajdhani', sans-serif;
color: rgba(149, 207, 245, 0.6);
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 7px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
i { font-size: 11px; opacity: 0.7; }
}
.profile-role {
font: 600 11px 'Rajdhani', sans-serif;
text-transform: uppercase;
letter-spacing: 2.5px;
color: rgba(255, 255, 255, 0.25);
display: flex;
align-items: center;
gap: 6px;
i { font-size: 10px; }
}
.profile-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.profile-stat {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 8px;
padding: 24px 16px 20px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
transition: border-color 200ms ease, background 200ms ease;
&:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(35, 111, 135, 0.3);
}
&--win {
border-color: rgba(42, 158, 96, 0.18);
&:hover { border-color: rgba(42, 158, 96, 0.45); }
}
&--loss {
border-color: rgba(173, 10, 5, 0.18);
&:hover { border-color: rgba(173, 10, 5, 0.45); }
}
&--bomb {
border-color: rgba(246, 125, 82, 0.18);
&:hover { border-color: rgba(246, 125, 82, 0.45); }
}
}
.profile-stat__icon {
font-size: 18px;
color: rgba(255, 255, 255, 0.15);
margin-bottom: 2px;
.profile-stat--win & { color: rgba(94, 232, 154, 0.3); }
.profile-stat--loss & { color: rgba(246, 125, 82, 0.3); }
.profile-stat--bomb & { color: rgba(246, 125, 82, 0.25); }
}
.profile-stat__value {
display: block;
font: 800 40px 'Rajdhani', sans-serif;
color: #ffffff;
line-height: 1;
.profile-stat--win & { color: #5ee89a; }
.profile-stat--loss & { color: #f67d52; }
.profile-stat--bomb & { color: rgba(246, 125, 82, 0.8); }
}
.profile-stat__label {
font: 600 10px 'Rajdhani', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.3);
}
.profile-section {
display: flex;
flex-direction: column;
gap: 14px;
}
.profile-section__title {
font: 700 11px 'Rajdhani', sans-serif;
text-transform: uppercase;
letter-spacing: 4px;
color: rgba(149, 207, 245, 0.45);
display: flex;
align-items: center;
gap: 8px;
i { opacity: 0.7; }
}
.profile-games {
display: flex;
flex-direction: column;
gap: 6px;
}
.profile-game {
display: grid;
grid-template-columns: 26px 76px 22px 1fr 18px auto;
align-items: center;
gap: 10px;
padding: 11px 16px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.055);
border-left-width: 3px;
font: 500 14px 'Rajdhani', sans-serif;
transition: background 180ms ease;
&:hover { background: rgba(255, 255, 255, 0.045); }
&--win { border-left-color: rgba(42, 158, 96, 0.55); }
&--loss { border-left-color: rgba(173, 10, 5, 0.55); }
&--draw { border-left-color: rgba(149, 207, 245, 0.25); }
}
.profile-game__badge {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 4px;
font: 800 10px 'Rajdhani', sans-serif;
letter-spacing: 0;
.profile-game--win & { background: rgba(42, 158, 96, 0.18); color: #5ee89a; }
.profile-game--loss & { background: rgba(173, 10, 5, 0.18); color: #f67d52; }
.profile-game--draw & { background: rgba(149, 207, 245, 0.1); color: rgba(149, 207, 245, 0.65); }
}
.profile-game__score {
font: 700 14px 'Rajdhani', sans-serif;
color: #fff;
letter-spacing: 1px;
}
.profile-game__vs {
font: 400 10px 'Rajdhani', sans-serif;
color: rgba(255, 255, 255, 0.22);
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.profile-game__opponent {
color: rgba(149, 207, 245, 0.7);
letter-spacing: 0.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-game__color {
font-size: 10px;
opacity: 0.6;
}
.profile-game__date {
font: 400 11px 'Rajdhani', sans-serif;
color: rgba(255, 255, 255, 0.25);
letter-spacing: 0.5px;
text-align: right;
white-space: nowrap;
}
.profile-empty {
text-align: center;
padding: 48px 20px;
color: rgba(255, 255, 255, 0.25);
i {
font-size: 40px;
display: block;
margin-bottom: 16px;
opacity: 0.4;
}
p {
font: 400 15px 'Rajdhani', sans-serif;
letter-spacing: 0.5px;
}
a {
color: #95cff5;
text-decoration: none;
font-weight: 600;
transition: color 180ms;
&:hover { color: #c5e8ff; }
}
}

23
assets/css/homepage/_reset.scss Normal file
View File

@@ -0,0 +1,23 @@
* {
outline: none;
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
// Grid lives on html so it tiles across all pages including content pages
background-color: #07090d;
background-image:
linear-gradient(rgba(35, 111, 135, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(35, 111, 135, 0.1) 1px, transparent 1px);
background-size: 46px 46px;
width: 100%;
height: 100%;
}
body {
background: transparent;
width: 100%;
height: 100%;
}

100
assets/css/homepage/_responsive.scss Normal file
View File

@@ -0,0 +1,100 @@
@media screen and (max-width: 900px) {
.hero h1 {
font-size: 44px;
}
.hero-cta {
padding: 20px 72px 18px;
font-size: 24px;
letter-spacing: 5px;
}
}
@media screen and (max-width: 768px) {
.hero--compact {
flex-direction: column;
text-align: center;
padding: 36px 24px 44px;
gap: 28px;
.hero-body { align-items: center; }
}
.profile-stats {
grid-template-columns: repeat(2, 1fr);
}
.profile-header {
flex-direction: column;
text-align: center;
padding: 28px 24px;
}
.profile-email,
.profile-role {
justify-content: center;
}
.profile-game {
grid-template-columns: 26px 64px 18px 1fr 14px;
.profile-game__date { display: none; }
}
.footer-inner {
flex-direction: column;
align-items: center;
text-align: center;
padding: 48px 30px 36px;
}
.footer-brand {
align-items: center;
}
.footer-tagline {
text-align: center;
}
.footer-nav-label {
text-align: center;
}
.footer-nav ul {
align-items: center;
}
.footer-copy {
padding: 16px 30px;
}
}
@media screen and (max-width: 550px) {
.hero {
padding: 60px 24px 140px;
}
.hero-logo img {
width: 260px;
}
.hero-logo {
margin-bottom: 52px;
}
.hero h1 {
font-size: 32px;
margin-bottom: 40px;
}
.hero-sub {
font-size: 14px;
letter-spacing: 2px;
}
.hero-cta {
padding: 18px 48px 16px;
font-size: 20px;
letter-spacing: 4px;
}
}

60
assets/css/homepage/_tech.scss Normal file
View File

@@ -0,0 +1,60 @@
main {
background: #07090d;
}
.tech-section {
padding: 48px 20px 72px;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.tech-label {
font: 600 11px 'Rajdhani', sans-serif;
text-transform: uppercase;
letter-spacing: 6px;
color: rgba(255, 255, 255, 0.14);
margin-bottom: 28px;
}
.tech-link {
display: inline-block;
line-height: 0;
}
.tech-logos img {
display: inline-block;
width: 52px;
height: 52px;
object-fit: contain;
margin: 8px 24px;
// Force all logos to white, then tint with the game's blue on hover
filter: brightness(0) invert(1) opacity(0.35);
transition: filter 220ms ease, transform 220ms ease;
}
.tech-logos img:hover {
filter:
brightness(0) invert(1)
sepia(1) saturate(3) hue-rotate(175deg) brightness(1.1)
opacity(0.9);
transform: translateY(-4px);
}
.tech-oss {
margin-top: 36px;
font: 400 15px 'Rajdhani', sans-serif;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.5px;
max-width: 680px;
margin-left: auto;
margin-right: auto;
padding: 0 24px;
line-height: 1.7;
text-align: center;
i {
color: rgba(220, 60, 50, 0.85);
margin-right: 6px;
font-size: 13px;
}
}