mirror of
https://github.com/artemium428/428th-website-2026.git
synced 2026-11-14 08:56:20 +00:00
836 lines
No EOL
22 KiB
CSS
836 lines
No EOL
22 KiB
CSS
:root{
|
|
--bg:#000000;
|
|
--accent:#C4622A;
|
|
--heading:#F2F1EE;
|
|
--logo:#FFFFFF;
|
|
--text:#B4B2AC;
|
|
--border: rgba(255,255,255,0.14);
|
|
--card-bg: rgba(255,255,255,0.04);
|
|
--metal-fill: linear-gradient(180deg,
|
|
#ffffff 0%,
|
|
#f7f7f7 12%,
|
|
#ececec 24%,
|
|
#e0e0e0 38%,
|
|
#d2d2d2 52%,
|
|
#c8c8c8 66%,
|
|
#d0d0d0 80%,
|
|
#bdbdbd 100%
|
|
);
|
|
--transition: 0.35s ease;
|
|
|
|
/* Hero animation tuning — see comments in .hero block below */
|
|
--hero-logo-size: clamp(64px, 12vw, 140px);
|
|
--hero-tagline-ratio: calc(15 / 140);
|
|
--hero-tagline-fit: 1;
|
|
--hero-max-scale: 2.2;
|
|
--hero-max-scale-mobile: 1.6;
|
|
--hero-active-scale: var(--hero-max-scale);
|
|
--hero-scroll-runway-multiplier: 12;
|
|
--hero-brand-gap: 48px;
|
|
--hero-stage-offset: 28px;
|
|
--hero-bottom-gap: 80px;
|
|
--site-header-height: 57px;
|
|
}
|
|
|
|
*{box-sizing:border-box;}
|
|
html,body{margin:0;padding:0;background:var(--bg);}
|
|
|
|
body{
|
|
font-family:'Inter', -apple-system, sans-serif;
|
|
font-size:16px;
|
|
font-weight:300;
|
|
line-height:1.6;
|
|
background:var(--bg);
|
|
color:var(--text);
|
|
-webkit-font-smoothing:antialiased;
|
|
-moz-osx-font-smoothing:grayscale;
|
|
transition: background var(--transition), color var(--transition);
|
|
overflow-x:hidden;
|
|
}
|
|
|
|
.ambient{
|
|
position:fixed;
|
|
inset:0;
|
|
z-index:0;
|
|
pointer-events:none;
|
|
overflow:hidden;
|
|
}
|
|
.ambient::after{
|
|
content:'';
|
|
position:absolute;
|
|
inset:0;
|
|
opacity:0.045;
|
|
mix-blend-mode:overlay;
|
|
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
}
|
|
.ambient-glow{
|
|
/* Hollow ring centered off-canvas past the top-right corner.
|
|
The circle itself never enters the viewport; only the inner
|
|
falloff of the rim clips the upper-right. */
|
|
position:absolute;
|
|
inset:0;
|
|
filter:blur(48px);
|
|
transform-origin:118% -8%;
|
|
background:radial-gradient(circle 120vmax at 45% 50%,
|
|
transparent 0%,
|
|
transparent 22%,
|
|
rgba(255,255,255,0.035) 32%,
|
|
rgba(255,255,255,0.08) 42%,
|
|
rgba(255,255,255,0.15) 52%,
|
|
rgba(255,255,255,0.07) 62%,
|
|
transparent 74%
|
|
);
|
|
animation:ambient-breathe 8s ease-in-out infinite;
|
|
}
|
|
.ambient-orb{
|
|
display:none;
|
|
}
|
|
@keyframes ambient-breathe{
|
|
0%,100%{opacity:0.78; transform:scale(1);}
|
|
50%{opacity:1; transform:scale(1.018);}
|
|
}
|
|
@keyframes metal-sheen{
|
|
0%,100%{background-position:0% 0%;}
|
|
50%{background-position:0% 100%;}
|
|
}
|
|
@keyframes idle-float{
|
|
0%,100%{transform:translateY(0);}
|
|
50%{transform:translateY(-6px);}
|
|
}
|
|
|
|
.container {
|
|
max-width: 1120px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
width: 100%;
|
|
}
|
|
|
|
h1,h3,h5{
|
|
color:var(--heading);
|
|
font-weight:600;
|
|
margin:0 0 16px;
|
|
}
|
|
|
|
h2{
|
|
color:var(--heading);
|
|
font-size:clamp(36px, 5vw, 56px);
|
|
font-weight:200;
|
|
line-height:1.18;
|
|
letter-spacing:-0.005em;
|
|
margin:0 0 28px;
|
|
}
|
|
|
|
h4{
|
|
color:var(--text);
|
|
font-weight:400;
|
|
margin:0 0 16px;
|
|
}
|
|
|
|
a{color:var(--accent); text-decoration:none; transition:opacity var(--transition);}
|
|
a:hover{opacity:0.7;}
|
|
|
|
.fw-400{font-weight:400;}
|
|
|
|
/* Header */
|
|
.site-header{
|
|
position:sticky; top:0; z-index:50;
|
|
background:rgba(0,0,0,0.35);
|
|
backdrop-filter:blur(16px);
|
|
-webkit-backdrop-filter:blur(16px);
|
|
border-bottom:1px solid rgba(255,255,255,0.08);
|
|
}
|
|
main, .site-footer{
|
|
position:relative;
|
|
z-index:1;
|
|
}
|
|
.header-inner{
|
|
display:flex; justify-content:space-between; align-items:center;
|
|
padding-top:16px;
|
|
padding-bottom:16px;
|
|
}
|
|
.lang-switch{font-size:13px; letter-spacing:0.05em; display:flex; align-items:center; gap:6px; line-height:1; transform:translateY(1px);}
|
|
.lang-switch a{
|
|
background:none; border:none; cursor:pointer; padding:0; margin:0;
|
|
color:var(--text); font-family:inherit; font-size:13px; font-weight:inherit;
|
|
line-height:1; display:inline-flex; align-items:center;
|
|
text-decoration:none;
|
|
transition: color var(--transition);
|
|
}
|
|
.lang-switch a.active{color:var(--accent); font-weight:500;}
|
|
|
|
.header-actions{
|
|
display:flex; align-items:center; gap:28px; line-height:1;
|
|
}
|
|
.home-link{
|
|
font-size:13px; letter-spacing:0.05em; line-height:1;
|
|
color:var(--text); text-decoration:none;
|
|
font-family:inherit; font-weight:400;
|
|
display:inline-flex; align-items:center;
|
|
transform:translateY(1px);
|
|
transition: color var(--transition);
|
|
}
|
|
.home-link:hover{color:var(--accent);}
|
|
|
|
/* Hero
|
|
Size: --hero-logo-size, --hero-active-scale (max render → scale down on scroll)
|
|
Motion: --hero-scroll-runway-multiplier — во сколько раз дольше скроллить (1 = как было)
|
|
Spacing: --hero-brand-gap — отступ под логотипом
|
|
--hero-stage-offset — отступ hero-stage от site-header
|
|
--hero-bottom-gap — отступ hero до следующей секции
|
|
Sticky: --site-header-height — высота шапки (JS) */
|
|
.hero{
|
|
--hero-max-scale:1.95;
|
|
--hero-active-scale:var(--hero-max-scale);
|
|
--hero-logo-size:clamp(60px, 11vw, 128px);
|
|
position:relative;
|
|
padding-top:var(--hero-stage-offset);
|
|
padding-bottom:var(--hero-bottom-gap);
|
|
text-align:left;
|
|
}
|
|
.hero-stage{
|
|
position:sticky;
|
|
top:calc(var(--site-header-height) + var(--hero-stage-offset));
|
|
z-index:1;
|
|
contain:layout style;
|
|
height:var(--hero-stage-height, auto);
|
|
}
|
|
.hero-brand{
|
|
position:relative;
|
|
left:0;
|
|
padding-bottom:var(--hero-brand-gap);
|
|
overflow:hidden;
|
|
contain:layout style;
|
|
height:var(--hero-brand-height, auto);
|
|
}
|
|
.hero-brand-inner{
|
|
position:absolute;
|
|
left:0;
|
|
top:0;
|
|
transform-origin:left top;
|
|
transform:translate3d(0, 0, 0) scale(var(--hero-scale, 1));
|
|
will-change:transform;
|
|
backface-visibility:hidden;
|
|
-webkit-backface-visibility:hidden;
|
|
}
|
|
.hero-brand-lockup{
|
|
display:inline-grid;
|
|
grid-template-columns:max-content;
|
|
}
|
|
.logo{
|
|
position:relative;
|
|
font-size:var(--hero-logo-size);
|
|
font-weight:600;
|
|
letter-spacing:-0.03em;
|
|
line-height:0.9;
|
|
margin:0 0 8px -0.022em;
|
|
color:transparent;
|
|
background-image:var(--metal-fill);
|
|
background-size:100% 180%;
|
|
background-position:0% 0%;
|
|
-webkit-background-clip:text;
|
|
background-clip:text;
|
|
filter:drop-shadow(0 0 0.35px rgba(210,210,210,0.55));
|
|
animation:metal-sheen 10s ease-in-out infinite;
|
|
}
|
|
.tagline{
|
|
font-size:calc(var(--hero-logo-size) * var(--hero-tagline-ratio) * var(--hero-tagline-fit, 1));
|
|
letter-spacing:0.08em;
|
|
text-transform:uppercase;
|
|
color:var(--text);
|
|
margin:0;
|
|
white-space:nowrap;
|
|
width:0;
|
|
min-width:100%;
|
|
}
|
|
@media (prefers-reduced-motion: no-preference){
|
|
.hero-brand-inner .logo{
|
|
font-size:calc(var(--hero-logo-size) * var(--hero-active-scale));
|
|
margin-bottom:calc(8px * var(--hero-active-scale));
|
|
}
|
|
.hero-brand-inner .tagline{
|
|
font-size:calc(var(--hero-logo-size) * var(--hero-tagline-ratio) * var(--hero-active-scale) * var(--hero-tagline-fit, 1));
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) and (max-width:600px){
|
|
.hero-brand-inner .logo{
|
|
font-size:var(--hero-logo-size);
|
|
margin-bottom:8px;
|
|
}
|
|
.hero-brand-inner .tagline{
|
|
font-size:calc(var(--hero-logo-size) * var(--hero-tagline-ratio) * var(--hero-tagline-fit, 1));
|
|
}
|
|
}
|
|
.main-nav{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content:stretch;
|
|
gap:12px 16px;
|
|
width:100%;
|
|
border:none;
|
|
padding:0;
|
|
overflow:visible;
|
|
}
|
|
.main-nav a{
|
|
position:relative;
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
flex:1 1 calc(25% - 12px);
|
|
max-width:none;
|
|
box-sizing:border-box;
|
|
min-height:48px;
|
|
padding:0 12px;
|
|
font-size:15px;
|
|
line-height:1;
|
|
color:var(--text);
|
|
letter-spacing:0.03em;
|
|
text-align:center;
|
|
border-radius:999px;
|
|
border:1px solid rgba(255,255,255,0.09);
|
|
background:linear-gradient(165deg, rgba(255,255,255,0.028) 0%, rgba(255,255,255,0.006) 42%, rgba(255,255,255,0.014) 100%);
|
|
backdrop-filter:blur(22px) saturate(1.35);
|
|
-webkit-backdrop-filter:blur(22px) saturate(1.35);
|
|
box-shadow:inset 0 1px 0 rgba(255,255,255,0.07);
|
|
overflow:visible;
|
|
will-change:transform;
|
|
transition: background var(--transition), color var(--transition), border-color var(--transition);
|
|
}
|
|
.main-nav a:hover,
|
|
.main-nav a:focus-visible{
|
|
z-index:2;
|
|
background:linear-gradient(165deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
|
|
color:var(--heading);
|
|
border-color:rgba(255,255,255,0.18);
|
|
opacity:1;
|
|
}
|
|
.main-nav a:focus-visible{
|
|
outline:none;
|
|
box-shadow:inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 2px #000, 0 0 0 4px rgba(255,255,255,0.28);
|
|
}
|
|
.main-nav .nav-cta{
|
|
color:var(--accent);
|
|
overflow:hidden;
|
|
}
|
|
.main-nav .nav-cta > span:first-child{
|
|
display:inline-block;
|
|
transition:transform 0.3s ease;
|
|
}
|
|
.main-nav .nav-cta .btn-arrow{
|
|
position:absolute;
|
|
right:14px;
|
|
opacity:0;
|
|
transform:translateX(18px);
|
|
transition:transform 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
.main-nav .nav-cta:hover,
|
|
.main-nav .nav-cta:focus-visible{
|
|
background:var(--accent);
|
|
color:#fff;
|
|
border-color:var(--accent);
|
|
}
|
|
.main-nav .nav-cta:hover > span:first-child,
|
|
.main-nav .nav-cta:focus-visible > span:first-child{transform:translateX(-8px);}
|
|
.main-nav .nav-cta:hover .btn-arrow,
|
|
.main-nav .nav-cta:focus-visible .btn-arrow{opacity:1; transform:translateX(0);}
|
|
|
|
/* Sections */
|
|
.section{
|
|
--section-padding-y:80px;
|
|
padding:var(--section-padding-y) 0;
|
|
border-top:1px solid var(--border);
|
|
scroll-margin-top:calc(var(--site-header-height) + 24px + var(--section-padding-y));
|
|
}
|
|
.eyebrow{
|
|
display:inline-block; font-size:17px; font-weight:400;
|
|
letter-spacing:0.1em;
|
|
color:var(--accent); text-transform:uppercase;
|
|
vertical-align:middle; margin-bottom:16px;
|
|
}
|
|
.section-labels{
|
|
display:flex; align-items:center; flex-wrap:wrap;
|
|
gap:12px; margin-bottom:16px;
|
|
}
|
|
.section-labels .eyebrow{margin-bottom:0;}
|
|
.section-labels .badge{margin-left:0;}
|
|
.badge{
|
|
display:inline-block; vertical-align:middle;
|
|
margin-left:12px; padding:4px 10px;
|
|
font-size:12px; border:1px solid var(--border); border-radius:4px;
|
|
color:var(--text);
|
|
}
|
|
.lead{
|
|
width:100%;
|
|
max-width:none;
|
|
margin-bottom:40px;
|
|
}
|
|
|
|
.numbered-list{list-style:none; margin:0 0 32px; padding:0;}
|
|
.numbered-list li{
|
|
display:grid;
|
|
grid-template-columns:28px 20px 1px 20px minmax(0, 1fr);
|
|
align-items:center;
|
|
padding:20px 0;
|
|
border-top:1px solid var(--border);
|
|
}
|
|
.numbered-list li::before{
|
|
content:'';
|
|
grid-column:3;
|
|
grid-row:1;
|
|
width:1px;
|
|
background:var(--border);
|
|
align-self:stretch;
|
|
}
|
|
.numbered-list li:first-child{border-top:none;}
|
|
.num{
|
|
grid-column:1;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
color:var(--accent);
|
|
font-weight:500;
|
|
}
|
|
.numbered-list p{grid-column:5; margin:0; line-height:1.7;}
|
|
|
|
.dash-list{list-style:none; padding:0; margin:0;}
|
|
.dash-list--block{margin-bottom:32px;}
|
|
.dash-list li{
|
|
position:relative; padding-left:28px; margin-bottom:14px;
|
|
}
|
|
.dash-list li::before{
|
|
content:"—"; position:absolute; left:0; color:var(--accent);
|
|
}
|
|
|
|
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:32px;}
|
|
.two-col h4{
|
|
font-size:15px; font-weight:600; color:var(--text);
|
|
line-height:1.3; margin-bottom:16px;
|
|
text-transform:uppercase; letter-spacing:0.05em;
|
|
}
|
|
|
|
.note-box,
|
|
.two-col > div,
|
|
.team-card,
|
|
.entry-options{
|
|
border:1px solid rgba(255,255,255,0.09);
|
|
border-radius:18px;
|
|
background:linear-gradient(165deg, rgba(255,255,255,0.028) 0%, rgba(255,255,255,0.006) 42%, rgba(255,255,255,0.014) 100%);
|
|
backdrop-filter:blur(22px) saturate(1.35);
|
|
-webkit-backdrop-filter:blur(22px) saturate(1.35);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255,255,255,0.07),
|
|
inset 0 -1px 0 rgba(255,255,255,0.02);
|
|
}
|
|
.note-box{
|
|
border-left:2px solid var(--accent);
|
|
padding:24px 28px;
|
|
}
|
|
.two-col > div{
|
|
padding:24px 26px;
|
|
}
|
|
.note-box:not(:last-child){margin-bottom:32px;}
|
|
.note-box p{margin:0 0 8px; line-height:1.6;}
|
|
.note-box p:last-child{margin:0;}
|
|
|
|
.numbered-list + .lead{margin-top:40px;}
|
|
|
|
.team-grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(4, minmax(0, 1fr));
|
|
justify-content:stretch;
|
|
align-items:stretch;
|
|
gap:16px;
|
|
width:100%;
|
|
max-width:100%;
|
|
margin-top:32px;
|
|
box-sizing:border-box;
|
|
}
|
|
.team-card{
|
|
position:relative;
|
|
text-align:left;
|
|
padding:22px 16px;
|
|
min-width:0;
|
|
}
|
|
.team-card h3{
|
|
font-size:16px;
|
|
line-height:1.2;
|
|
margin-bottom:16px;
|
|
white-space:nowrap;
|
|
}
|
|
.team-card ul{list-style:none; padding:0; margin:0;}
|
|
.team-card li{
|
|
margin-bottom:6px;
|
|
color:var(--text);
|
|
font-size:14px;
|
|
white-space:nowrap;
|
|
}
|
|
.team-card .dash-list li{padding-left:20px;}
|
|
|
|
.entry-options{
|
|
margin-top:8px;
|
|
padding:24px 28px;
|
|
}
|
|
.entry-options .dash-list li:last-child{margin-bottom:0;}
|
|
.sublabel{
|
|
font-size:13px; text-transform:uppercase;
|
|
letter-spacing:0.05em; color:var(--text);
|
|
font-weight:600; display:block; margin-bottom:16px;
|
|
}
|
|
.sublabel-note{color:#9A9A94; font-weight:600;}
|
|
|
|
.more-link{font-size:inherit;}
|
|
|
|
.contact-section{text-align:center;}
|
|
.contact-section .eyebrow{margin-bottom:36px;}
|
|
.center{
|
|
display:flex; flex-direction:column; align-items:center;
|
|
gap:0;
|
|
}
|
|
.contact-section .center > p:first-of-type{margin:0 0 16px;}
|
|
.contact-section .center > p:nth-of-type(2){margin:0 0 36px;}
|
|
.btn-outline{
|
|
position:relative;
|
|
display:inline-flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
overflow:hidden;
|
|
border:1px solid var(--accent); color:var(--accent);
|
|
padding:12px 28px; border-radius:999px; font-size:14px; font-weight:400;
|
|
margin-bottom:28px;
|
|
transition: background var(--transition), color var(--transition);
|
|
animation:idle-float 8s ease-in-out infinite;
|
|
animation-delay:-2.5s;
|
|
}
|
|
.btn-outline > span:first-child{
|
|
display:inline-block;
|
|
transition:transform 0.3s ease;
|
|
}
|
|
.btn-outline .btn-arrow{
|
|
position:absolute;
|
|
right:14px;
|
|
opacity:0;
|
|
transform:translateX(18px);
|
|
transition:transform 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
.btn-outline:hover,
|
|
.btn-outline:focus-visible{background:var(--accent); color:#fff; opacity:1;}
|
|
.btn-outline:hover > span:first-child,
|
|
.btn-outline:focus-visible > span:first-child{transform:translateX(-8px);}
|
|
.btn-outline:hover .btn-arrow,
|
|
.btn-outline:focus-visible .btn-arrow{opacity:1; transform:translateX(0);}
|
|
.link-underline{
|
|
background:none; border:none; cursor:pointer;
|
|
color:var(--text); text-decoration:underline; font-family:inherit; font-size:13px;
|
|
}
|
|
|
|
/* Footer */
|
|
.site-footer{
|
|
border-top:1px solid var(--border);
|
|
padding:48px 0 24px;
|
|
font-size:13px;
|
|
}
|
|
.site-footer h5{
|
|
font-size:12px; text-transform:uppercase;
|
|
letter-spacing:0.05em; color:var(--text);
|
|
}
|
|
.site-footer .dash-list{margin-top:8px;}
|
|
.footer-bottom{
|
|
display:flex; justify-content:space-between; align-items:center;
|
|
margin-top:40px; padding-top:24px;
|
|
border-top:1px solid var(--border);
|
|
font-size:12px; color:var(--text);
|
|
}
|
|
.footer-wolf{
|
|
font-size:1.5em;
|
|
line-height:1;
|
|
opacity:1;
|
|
}
|
|
.footer-copy{opacity:0.7;}
|
|
|
|
/* Modal */
|
|
.modal-overlay{
|
|
position:fixed; inset:0; background:rgba(0,0,0,0.5);
|
|
display:flex; align-items:center; justify-content:center;
|
|
opacity:0; visibility:hidden; transition: opacity var(--transition);
|
|
z-index:100;
|
|
}
|
|
.modal-overlay.open{opacity:1; visibility:visible;}
|
|
.modal-box{
|
|
background:var(--bg);
|
|
border:1px solid rgba(255,255,255,0.28);
|
|
border-radius:8px; padding:32px;
|
|
max-width:420px; width:90%; position:relative;
|
|
transform:translateY(20px); transition:transform var(--transition);
|
|
}
|
|
.modal-overlay.open .modal-box{transform:translateY(0);}
|
|
.modal-close{
|
|
position:absolute; top:12px; right:16px; background:none; border:none;
|
|
font-size:22px; cursor:pointer; color:var(--text);
|
|
}
|
|
#contactForm label{display:block; margin-bottom:20px; font-size:13px; color:var(--text);}
|
|
#contactForm .hp-field{
|
|
position:absolute !important;
|
|
left:-10000px !important;
|
|
top:auto !important;
|
|
width:1px !important;
|
|
height:1px !important;
|
|
margin:0 !important;
|
|
padding:0 !important;
|
|
overflow:hidden !important;
|
|
clip:rect(0,0,0,0) !important;
|
|
border:0 !important;
|
|
opacity:0 !important;
|
|
pointer-events:none !important;
|
|
}
|
|
#contactForm .hp-field input{
|
|
width:1px !important;
|
|
height:1px !important;
|
|
margin:0 !important;
|
|
padding:0 !important;
|
|
border:0 !important;
|
|
}
|
|
#contactForm input, #contactForm textarea{
|
|
width:100%; margin-top:6px; padding:10px; border:1px solid var(--border);
|
|
border-radius:4px; background:transparent; color:var(--heading); font-family:inherit;
|
|
font-size:14px; font-weight:400;
|
|
}
|
|
.btn-solid{
|
|
background:var(--accent); color:#fff; border:none;
|
|
padding:12px 24px; border-radius:999px; cursor:pointer; width:100%;
|
|
}
|
|
.form-status{font-size:13px; margin-top:12px; min-height:16px;}
|
|
|
|
/* Reveal animation */
|
|
.reveal{opacity:0; transform:translateY(18px); transition: opacity 0.8s ease, transform 0.8s ease;}
|
|
.reveal.visible{opacity:1; transform:translateY(0);}
|
|
|
|
@media (prefers-reduced-motion: reduce){
|
|
.hero-stage,
|
|
.terminal-stage{position:static; height:auto !important;}
|
|
.hero-brand,
|
|
.terminal-brand{height:auto !important;}
|
|
.hero-brand-inner,
|
|
.terminal-brand-inner{position:static; transform:none !important; will-change:auto; animation:none !important;}
|
|
.hero--mobile-anim .main-nav,
|
|
.terminal--mobile-anim .main-nav{transform:none !important; animation:none !important;}
|
|
.ambient-glow,
|
|
.ambient-orb,
|
|
.logo,
|
|
.terminal-logo-main,
|
|
.btn-outline{animation:none !important; filter:none;}
|
|
.main-nav a{transform:none !important; will-change:auto;}
|
|
}
|
|
|
|
/* Mobile: compositor-only hero animation (no height changes while scrolling) */
|
|
@media (max-width:600px){
|
|
.hero--mobile-anim .hero-stage,
|
|
.hero--mobile-anim .hero-brand{
|
|
contain:none;
|
|
}
|
|
.hero--mobile-anim .main-nav{
|
|
transform:translate3d(0, var(--hero-nav-shift, 0), 0);
|
|
will-change:transform;
|
|
backface-visibility:hidden;
|
|
-webkit-backface-visibility:hidden;
|
|
}
|
|
.post-hero-lift{
|
|
will-change:transform;
|
|
backface-visibility:hidden;
|
|
-webkit-backface-visibility:hidden;
|
|
}
|
|
}
|
|
|
|
@media (max-width:600px){
|
|
.terminal--mobile-anim .terminal-stage,
|
|
.terminal--mobile-anim .terminal-brand{
|
|
contain:none;
|
|
}
|
|
.terminal--mobile-anim .main-nav{
|
|
transform:translate3d(0, var(--hero-nav-shift, 0), 0);
|
|
will-change:transform;
|
|
backface-visibility:hidden;
|
|
-webkit-backface-visibility:hidden;
|
|
}
|
|
}
|
|
|
|
@supports (animation-timeline: scroll(root)){
|
|
@media (prefers-reduced-motion: no-preference) and (max-width:600px){
|
|
.hero--scroll-driven .hero-brand-inner{
|
|
will-change:transform;
|
|
}
|
|
.hero--scroll-driven .main-nav{
|
|
will-change:transform;
|
|
}
|
|
.hero--scroll-driven + .post-hero-lift{
|
|
will-change:transform;
|
|
}
|
|
.terminal--scroll-driven .terminal-brand-inner,
|
|
.terminal--scroll-driven .main-nav{
|
|
will-change:transform;
|
|
}
|
|
.terminal--scroll-driven + .post-hero-lift{
|
|
will-change:transform;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes hero-brand-scale{
|
|
from{transform:translate3d(0, 0, 0) scale(var(--hero-max-scale-mobile));}
|
|
to{transform:translate3d(0, 0, 0) scale(1);}
|
|
}
|
|
@keyframes terminal-brand-scale{
|
|
from{transform:translate3d(-50%, 0, 0) scale(var(--hero-max-scale-mobile));}
|
|
to{transform:translate3d(-50%, 0, 0) scale(1);}
|
|
}
|
|
@keyframes hero-nav-lift{
|
|
from{transform:translate3d(0, 0, 0);}
|
|
to{transform:translate3d(0, var(--hero-nav-shift-max), 0);}
|
|
}
|
|
@keyframes hero-content-lift{
|
|
from{transform:translate3d(0, 0, 0);}
|
|
to{transform:translate3d(0, var(--hero-nav-shift-max), 0);}
|
|
}
|
|
|
|
/* Terminal landing page — hero + 3-col nav */
|
|
.terminal-hero{
|
|
--hero-max-scale:2.55;
|
|
--hero-active-scale:var(--hero-max-scale);
|
|
--hero-logo-size:clamp(72px, 13.5vw, 158px);
|
|
--hero-terminal-overflow:1.14;
|
|
--hero-brand-gap:var(--hero-bottom-gap);
|
|
position:relative;
|
|
padding-top:var(--hero-stage-offset);
|
|
padding-bottom:var(--hero-bottom-gap);
|
|
text-align:center;
|
|
overflow:visible;
|
|
}
|
|
.terminal-stage{
|
|
position:sticky;
|
|
top:calc(var(--site-header-height) + var(--hero-stage-offset));
|
|
z-index:1;
|
|
contain:layout style;
|
|
height:var(--hero-stage-height, auto);
|
|
}
|
|
.terminal-brand{
|
|
position:relative;
|
|
padding-bottom:var(--hero-brand-gap);
|
|
overflow:visible;
|
|
contain:layout style;
|
|
height:var(--hero-brand-height, auto);
|
|
}
|
|
.terminal-brand-inner{
|
|
position:absolute;
|
|
left:50%;
|
|
top:0;
|
|
transform-origin:center top;
|
|
transform:translate3d(-50%, 0, 0) scale(var(--hero-scale, 1));
|
|
will-change:transform;
|
|
backface-visibility:hidden;
|
|
-webkit-backface-visibility:hidden;
|
|
}
|
|
.terminal-logo{
|
|
display:inline-flex;
|
|
align-items:baseline;
|
|
gap:0.06em;
|
|
font-size:var(--hero-logo-size);
|
|
font-weight:600;
|
|
letter-spacing:-0.03em;
|
|
line-height:0.9;
|
|
color:var(--logo);
|
|
margin:0;
|
|
}
|
|
.terminal-logo .accent{
|
|
color:var(--accent);
|
|
font-size:0.62em;
|
|
}
|
|
.terminal-logo-main{
|
|
position:relative;
|
|
color:transparent;
|
|
background-image:var(--metal-fill);
|
|
background-size:100% 180%;
|
|
background-position:0% 0%;
|
|
-webkit-background-clip:text;
|
|
background-clip:text;
|
|
filter:drop-shadow(0 0 0.35px rgba(210,210,210,0.55));
|
|
animation:metal-sheen 10s ease-in-out infinite;
|
|
}
|
|
@media (prefers-reduced-motion: no-preference){
|
|
.terminal-brand-inner .terminal-logo{
|
|
font-size:calc(var(--hero-logo-size) * var(--hero-active-scale) * var(--hero-terminal-fit, 1));
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) and (max-width:600px){
|
|
.terminal-brand-inner .terminal-logo{
|
|
font-size:calc(var(--hero-logo-size) * var(--hero-terminal-fit, 1));
|
|
}
|
|
}
|
|
.terminal-nav{
|
|
justify-content:center;
|
|
width:100%;
|
|
}
|
|
.terminal-nav a{
|
|
flex:1 1 calc(33.333% - 11px);
|
|
max-width:none;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width:900px){
|
|
.section{--section-padding-y:64px;}
|
|
.main-nav:not(.terminal-nav) a{
|
|
flex:1 1 calc(50% - 8px);
|
|
max-width:none;
|
|
}
|
|
.two-col{grid-template-columns:1fr;}
|
|
}
|
|
@media (max-width:600px){
|
|
.header-inner{
|
|
padding-top:12px;
|
|
padding-bottom:12px;
|
|
}
|
|
.hero{
|
|
padding-top:var(--hero-stage-offset);
|
|
padding-bottom:var(--hero-bottom-gap);
|
|
}
|
|
.terminal-hero{
|
|
--hero-terminal-overflow:1;
|
|
}
|
|
:root{
|
|
--site-header-height: 49px;
|
|
--hero-logo-size: clamp(72px, 18vw, 120px);
|
|
--hero-brand-gap: 24px;
|
|
--hero-bottom-gap: 24px;
|
|
--hero-max-scale-mobile: 2;
|
|
--hero-active-scale: 1;
|
|
}
|
|
.section{--section-padding-y:48px;}
|
|
.main-nav:not(.terminal-nav) a{
|
|
flex:1 1 calc(50% - 8px);
|
|
max-width:none;
|
|
min-height:44px;
|
|
padding:0 12px;
|
|
font-size:14px;
|
|
}
|
|
.terminal-nav,
|
|
.terminal-nav a{
|
|
width:100%;
|
|
}
|
|
.terminal-nav a{
|
|
flex:1 1 100%;
|
|
max-width:100%;
|
|
min-height:44px;
|
|
padding:0 12px;
|
|
font-size:14px;
|
|
}
|
|
h2{font-size:clamp(28px, 8vw, 40px);}
|
|
.team-grid{
|
|
grid-template-columns:1fr;
|
|
justify-content:stretch;
|
|
gap:24px;
|
|
}
|
|
.team-card,
|
|
.team-card--ivan,
|
|
.team-card--andrey,
|
|
.team-card--danylo{
|
|
padding:20px 16px;
|
|
text-align:left;
|
|
}
|
|
} |