new tools modules & sass opti
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s
This commit is contained in:
parent
821e8e0a36
commit
9e275e0167
24 changed files with 3266 additions and 2372 deletions
238
website/src/styles/_home.scss
Normal file
238
website/src/styles/_home.scss
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
.hero,
|
||||
.game-hero {
|
||||
position: relative;
|
||||
display: grid;
|
||||
min-height: 360px;
|
||||
align-items: end;
|
||||
gap: var(--space-6);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-md);
|
||||
padding: var(--space-10);
|
||||
}
|
||||
|
||||
.hero::after,
|
||||
.game-hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 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%);
|
||||
}
|
||||
|
||||
.hero > *,
|
||||
.game-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;
|
||||
color: white;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
max-width: 820px;
|
||||
margin-bottom: 14px;
|
||||
font-size: clamp(2rem, 4vw, var(--font-size-4xl));
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 10px;
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
p,
|
||||
li,
|
||||
small,
|
||||
span {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin-bottom: 10px;
|
||||
color: var(--color-accent-cyan);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.actions,
|
||||
.card-actions,
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.toolbar-stack {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.toolbar-stack > div {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.hero-panel {
|
||||
padding: var(--space-5);
|
||||
border: 1px solid rgba(165, 180, 252, 0.14);
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(16, 20, 38, 0.72);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.hero-panel span {
|
||||
display: block;
|
||||
background: var(--gradient-brand);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-size: 56px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.home-visual {
|
||||
display: grid;
|
||||
align-self: center;
|
||||
justify-self: stretch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 320px;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.home-visual img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 520px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius-lg);
|
||||
filter: drop-shadow(0 22px 36px rgba(0, 0, 0, 0.34));
|
||||
}
|
||||
|
||||
.origin-section {
|
||||
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-radius: var(--radius-lg);
|
||||
background: rgba(16, 20, 38, 0.42);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.origin-copy {
|
||||
min-width: 0;
|
||||
padding-right: var(--space-6);
|
||||
border-right: 2px solid rgba(34, 211, 238, 0.66);
|
||||
}
|
||||
|
||||
.home-dialogue {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.dialogue-line {
|
||||
width: fit-content;
|
||||
max-width: min(74ch, 86%);
|
||||
margin: 0;
|
||||
padding: 8px 11px;
|
||||
border: 1px solid rgba(165, 180, 252, 0.14);
|
||||
border-radius: 8px;
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: 1.35;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.dialogue-line-user {
|
||||
justify-self: end;
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(37, 99, 235, 0.18));
|
||||
}
|
||||
|
||||
.dialogue-line-app {
|
||||
justify-self: start;
|
||||
max-width: min(62ch, 68%);
|
||||
background: rgba(7, 10, 24, 0.48);
|
||||
}
|
||||
|
||||
.dialogue-line i {
|
||||
color: var(--color-text-muted);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.dialogue-caption {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.home-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
align-self: center;
|
||||
justify-self: end;
|
||||
width: min(420px, 100%);
|
||||
}
|
||||
|
||||
.home-stats article {
|
||||
min-height: 118px;
|
||||
padding: var(--space-4);
|
||||
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%),
|
||||
rgba(7, 10, 24, 0.52);
|
||||
}
|
||||
|
||||
.home-stats strong {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
background: var(--gradient-brand);
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
font-size: 44px;
|
||||
font-weight: 900;
|
||||
line-height: 0.95;
|
||||
}
|
||||
|
||||
.home-stats span {
|
||||
display: block;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue