sergey_v/iqon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Kazakhstan AI page and old brand assets

Browse Source
This commit is contained in:
Sergei Vasilev
2026-06-17 23:34:33 +03:00
parent 6158c101a7
commit 010914c696
17 changed files with 902 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles.css
+308 -15
View File
@@ -103,31 +103,24 @@ body::after {
.brand {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.28rem 0.36rem;
border-radius: 0.35rem;
background: rgba(255, 255, 255, 0.9);
text-decoration: none;
color: var(--ink);
}
.brand-mark {
width: 2rem;
height: 2rem;
width: 2.6rem;
height: auto;
display: block;
flex: 0 0 auto;
filter: drop-shadow(0 0 8px var(--accent-glow));
transition: filter var(--transition-fast);
transition: filter var(--transition-fast), opacity var(--transition-fast);
}
.brand:hover .brand-mark {
filter: drop-shadow(0 0 14px var(--accent-glow-strong));
}
.brand-name {
font-family: "Sora", sans-serif;
font-size: 1.7rem;
font-weight: 700;
text-transform: lowercase;
line-height: 1;
letter-spacing: -0.01em;
filter: drop-shadow(0 0 10px var(--accent-glow));
opacity: 0.92;
}
.main-nav {
@@ -634,6 +627,218 @@ h1 {
font-weight: 700;
}
.kz-page .reveal {
opacity: 1;
transform: none;
}
.kz-page {
background:
linear-gradient(180deg, rgba(18, 18, 20, 0.92) 0%, var(--bg) 48%),
var(--bg);
}
.kz-page::before,
.kz-page::after {
opacity: 0.62;
}
.kz-hero {
min-height: auto;
padding: 8.5rem 2.5rem 4rem;
grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.68fr);
gap: 2.5rem;
align-items: stretch;
max-width: 1320px;
margin: 0 auto;
}
.kz-hero-copy {
padding: 2.5rem 0;
justify-content: center;
}
.kz-page h1 {
max-width: 13ch;
font-size: clamp(2.25rem, 4.2vw, 5.4rem);
line-height: 0.98;
}
.kz-page .lead {
max-width: 58ch;
font-size: 1.08rem;
}
.kz-decision-panel {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 520px;
padding: 1.4rem;
border: 1px solid var(--line-strong);
border-radius: var(--radius-md);
background:
linear-gradient(145deg, rgba(255, 208, 0, 0.08), transparent 35%),
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
#101013;
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
position: relative;
overflow: hidden;
}
.kz-decision-panel::before {
content: "";
position: absolute;
inset: 5rem 1.4rem 7rem;
border: 1px solid rgba(255, 208, 0, 0.18);
border-radius: var(--radius-sm);
background:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 34px 34px;
pointer-events: none;
}
.kz-panel-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
position: relative;
z-index: 1;
}
.kz-panel-head span,
.kz-panel-note span {
color: var(--accent);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.kz-panel-head strong {
display: grid;
place-items: center;
width: 3.25rem;
height: 3.25rem;
border: 1px solid rgba(255, 208, 0, 0.38);
border-radius: 50%;
color: var(--accent);
font-family: "Sora", sans-serif;
}
.kz-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
align-content: center;
margin: 0;
position: relative;
z-index: 1;
}
.kz-metrics div {
min-height: 128px;
padding: 1rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: rgba(9, 9, 11, 0.72);
}
.kz-metrics dt {
margin-bottom: 1.6rem;
color: rgba(255, 208, 0, 0.72);
font-family: "Sora", sans-serif;
font-size: 1.7rem;
font-weight: 800;
line-height: 1;
}
.kz-metrics dd {
margin: 0;
color: var(--ink);
font-size: 0.96rem;
line-height: 1.35;
}
.kz-panel-note {
padding: 1rem;
border-left: 2px solid var(--accent);
background: rgba(255, 208, 0, 0.06);
position: relative;
z-index: 1;
}
.kz-panel-note p {
margin: 0.45rem 0 0;
color: var(--ink-secondary);
font-size: 0.94rem;
line-height: 1.55;
}
.kz-service-board {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1px;
max-width: 1320px;
margin: 0 auto;
padding: 0 2.5rem 5rem;
position: relative;
z-index: 1;
}
.kz-service-card {
min-height: 250px;
padding: 1.45rem;
border: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
}
.kz-service-card .service-num {
display: block;
margin-bottom: 2.2rem;
color: rgba(255, 208, 0, 0.58);
font-family: "Sora", sans-serif;
font-size: 1.7rem;
font-weight: 800;
line-height: 1;
}
.kz-service-card h2 {
margin: 0 0 0.8rem;
color: var(--ink);
font-family: "Sora", sans-serif;
font-size: 1rem;
line-height: 1.25;
text-transform: uppercase;
}
.kz-service-card p {
margin: 0;
color: var(--ink-secondary);
font-size: 0.9rem;
line-height: 1.6;
}
.ai-case-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ai-case-grid .case-copy {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 1.5rem;
}
.ai-case-grid h4 {
margin: 0 0 0.8rem;
color: var(--ink);
font-family: "Sora", sans-serif;
font-size: 1.05rem;
line-height: 1.25;
text-transform: uppercase;
}
/* ===== CTA BAND ===== */
.cta-band {
padding: 5.5rem 2.5rem;
@@ -813,18 +1018,35 @@ main::before {
grid-template-columns: 1fr;
}
.kz-hero {
grid-template-columns: 1fr;
padding-top: 7rem;
}
.hero-copy {
padding: 7rem 2.5rem 3rem;
}
.kz-hero-copy {
padding: 1rem 0 0;
}
.hero-cloud {
min-height: 260px;
}
.kz-decision-panel {
min-height: 420px;
}
.service-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kz-service-board {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -832,6 +1054,10 @@ main::before {
.case-grid {
grid-template-columns: 1fr;
}
.ai-case-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
@@ -852,6 +1078,68 @@ main::before {
padding: 6rem 1.2rem 2.5rem;
}
.kz-hero {
padding: 6.25rem 1.2rem 3rem;
gap: 1.4rem;
overflow: hidden;
}
.kz-page h1 {
max-width: 100%;
font-size: clamp(2rem, 8vw, 2.35rem);
overflow-wrap: anywhere;
}
.kz-page .topbar {
grid-template-columns: 1fr;
gap: 0.45rem;
}
.kz-page .main-nav {
justify-content: flex-start;
}
.kz-page .main-nav a {
font-size: 0.62rem;
padding: 0.38rem 0.42rem;
}
.kz-page .main-nav a[href="#contacts"] {
display: none;
}
.kz-page .hero-actions {
display: grid;
grid-template-columns: 1fr;
max-width: 240px;
}
.kz-page .btn {
justify-content: center;
width: 100%;
}
.kz-decision-panel {
min-height: 0;
width: 100%;
max-width: 100%;
padding: 1rem;
}
.kz-decision-panel::before {
inset: 4.6rem 1rem 6.5rem;
background-size: 26px 26px;
}
.kz-metrics {
grid-template-columns: 1fr;
margin: 2rem 0;
}
.kz-metrics div {
min-height: 104px;
}
.method,
.cases,
.cta-band,
@@ -864,6 +1152,11 @@ main::before {
grid-template-columns: 1fr;
}
.kz-service-board {
grid-template-columns: 1fr;
padding: 0 1.2rem 4rem;
}
.service-tile {
border-right: none;
border-bottom: 1px solid var(--line);