shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

design refacto
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s
Details

Browse source
This commit is contained in:
Shinuwa 2026-07-22 16:07:10 +02:00
parent b8d1829bc7
commit d359fd0a35
25 changed files with 1340 additions and 1023 deletions
Download patch file Download diff file Expand all files Collapse all files

130
website/src/styles/_home.scss
View file

@ -1,46 +1,105 @@
.hero,
.game-hero {
.game-hero,
.page-hero {
position: relative;
isolation: isolate;
display: grid;
min-height: 360px;
align-items: end;
gap: var(--space-6);
overflow: hidden;
border: 1px solid var(--color-border);
border: 1px solid transparent;
border-radius: var(--radius-xl);
background:
var(--gradient-nebula),
radial-gradient(circle at 86% 18%, rgba(246, 196, 83, 0.1), transparent 28%),
linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(5, 7, 17, 0.96));
box-shadow: var(--shadow-md);
padding: var(--space-10);
}
.hero::after,
.game-hero::after {
.hero::before,
.game-hero::before,
.page-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
padding: 1px;
border-radius: inherit;
background:
radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.5), transparent 26%),
linear-gradient(135deg, rgba(246, 196, 83, 0.38), rgba(139, 92, 246, 0.22) 48%, rgba(196, 181, 253, 0.3));
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
pointer-events: none;
}
.hero::after,
.game-hero::after,
.page-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(135deg, rgba(5, 7, 17, 0.1), rgba(5, 7, 17, 0.52)),
radial-gradient(circle at 82% 16%, rgba(34, 211, 238, 0.18), transparent 30%);
radial-gradient(circle at 82% 16%, rgba(246, 196, 83, 0.18), transparent 30%);
}
.hero > *,
.game-hero > * {
.game-hero > *,
.page-hero > * {
position: relative;
z-index: 1;
}
.hero {
grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
background:
var(--gradient-nebula),
linear-gradient(135deg, rgba(16, 20, 38, 0.98), rgba(5, 7, 17, 0.96));
}
.game-hero {
grid-template-columns: 1fr auto;
--game-hero-image: none;
color: white;
}
.game-hero::after {
left: 35%;
opacity: 0.72;
background:
linear-gradient(90deg, rgba(5, 7, 17, 0.04), rgba(5, 7, 17, 0.2) 58%, rgba(5, 7, 17, 0.62) 100%),
var(--game-hero-image);
background-position:
center,
right center;
background-repeat: no-repeat;
background-size:
cover,
cover;
mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.06) 34%, rgba(0, 0, 0, 0.34) 58%, #000 88%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.06) 34%, rgba(0, 0, 0, 0.34) 58%, #000 88%);
}
.page-hero {
min-height: 180px;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
padding: var(--space-6);
}
.page-hero p:last-child {
max-width: 720px;
margin-bottom: 0;
}
h1,
h2,
p {
@ -68,7 +127,7 @@ span {
.eyebrow {
margin-bottom: 10px;
color: var(--color-accent-cyan);
color: var(--color-accent-gold);
font-size: var(--font-size-xs);
font-weight: 800;
letter-spacing: 0;
@ -133,21 +192,66 @@ span {
}
.origin-section {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.65fr);
gap: var(--space-6);
margin-top: var(--space-6);
padding: var(--space-6);
border: 1px solid rgba(165, 180, 252, 0.14);
border: 1px solid transparent;
border-radius: var(--radius-lg);
background: rgba(16, 20, 38, 0.42);
box-shadow: var(--shadow-sm);
}
.origin-section::before {
content: "";
position: absolute;
inset: -1px;
padding: 1px;
border-radius: inherit;
background: rgba(165, 180, 252, 0.14);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
pointer-events: none;
}
.origin-section::after {
content: "";
position: absolute;
inset: -1px;
padding: 1px;
border-radius: inherit;
background:
radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(246, 196, 83, 0.9) 0 18px, transparent 27px),
linear-gradient(90deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%),
linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
pointer-events: none;
}
.origin-section > * {
position: relative;
z-index: 1;
}
.origin-copy {
min-width: 0;
padding-right: var(--space-6);
border-right: 2px solid rgba(34, 211, 238, 0.66);
border-right: 2px solid rgba(246, 196, 83, 0.66);
}
.home-dialogue {
@ -214,7 +318,7 @@ span {
border: 1px solid rgba(165, 180, 252, 0.14);
border-radius: var(--radius-md);
background:
linear-gradient(145deg, rgba(34, 211, 238, 0.08), transparent 52%),
linear-gradient(145deg, rgba(246, 196, 83, 0.08), transparent 52%),
rgba(7, 10, 24, 0.52);
}