161 lines
4.5 KiB
CSS
161 lines
4.5 KiB
CSS
*{box-sizing:border-box;margin:0;padding:0}
|
|
html,body{
|
|
background:#0a0c10;
|
|
color:#e8eaed;
|
|
font-family:'Inter',system-ui,-apple-system,sans-serif;
|
|
font-weight:400;
|
|
line-height:1.5;
|
|
min-height:100vh;
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
|
|
/* Subtle grid background across whole page */
|
|
body::before{
|
|
content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
|
|
background:
|
|
linear-gradient(rgba(0,229,255,.035) 1px,transparent 1px) 0 0/48px 48px,
|
|
linear-gradient(90deg,rgba(0,229,255,.035) 1px,transparent 1px) 0 0/48px 48px,
|
|
radial-gradient(ellipse at 50% 0%,#0f141c 0%,#06080b 70%);
|
|
}
|
|
body::after{
|
|
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
|
|
box-shadow:inset 0 0 220px 60px rgba(0,0,0,.9);
|
|
}
|
|
|
|
/* HEADER with soldier image banner */
|
|
.site-header{
|
|
position:relative;
|
|
border-bottom:1px solid #1a2230;
|
|
padding:4.5rem 1.5rem 4rem;
|
|
overflow:hidden;
|
|
isolation:isolate;
|
|
}
|
|
.site-header::before{
|
|
content:"";position:absolute;inset:0;z-index:-2;
|
|
background:url('../images/TeamGattaca1.png') center/cover no-repeat;
|
|
filter:brightness(.32) contrast(1.1) saturate(.85) hue-rotate(-10deg);
|
|
transform:scale(1.05);
|
|
}
|
|
.site-header::after{
|
|
content:"";position:absolute;inset:0;z-index:-1;
|
|
background:
|
|
linear-gradient(180deg,rgba(10,12,16,.5) 0%,rgba(10,12,16,.85) 70%,#0a0c10 100%),
|
|
linear-gradient(90deg,rgba(10,12,16,.6) 0%,transparent 50%,rgba(10,12,16,.6) 100%);
|
|
}
|
|
.header-inner{
|
|
max-width:1100px;margin:0 auto;
|
|
display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.2rem;
|
|
position:relative;
|
|
}
|
|
.logo{
|
|
height:150px;width:auto;
|
|
filter:drop-shadow(0 8px 24px rgba(0,0,0,.7));
|
|
}
|
|
.tagline{background:linear-gradient(180deg,#ffffff 0%,#7fdfff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
|
|
font-family:'Chakra Petch','Inter',sans-serif;
|
|
font-size:clamp(2rem,4.5vw,3.4rem);
|
|
font-weight:700;letter-spacing:.005em;line-height:1.1;
|
|
color:#cfe8f5;
|
|
text-shadow:0 2px 18px rgba(0,0,0,.65);
|
|
text-transform:uppercase;
|
|
position:relative;
|
|
padding-bottom:.9rem;
|
|
}
|
|
.tagline::after{
|
|
content:"";
|
|
position:absolute;left:50%;bottom:0;
|
|
transform:translateX(-50%) skewX(-20deg);
|
|
width:90px;height:3px;
|
|
background:linear-gradient(90deg,transparent,#00e5ff,transparent);
|
|
box-shadow:0 0 14px rgba(0,229,255,.6);
|
|
}
|
|
.sub{
|
|
color:#a8b0bc;font-size:1.1rem;max-width:540px;font-weight:500;
|
|
letter-spacing:.01em;
|
|
}
|
|
|
|
/* MAIN */
|
|
.container{
|
|
max-width:1200px;margin:0 auto;padding:3.5rem 1.5rem 4rem;
|
|
}
|
|
.section-label{
|
|
display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem;
|
|
}
|
|
.section-label span{
|
|
font-family:'Chakra Petch','Inter',sans-serif;
|
|
font-size:.85rem;font-weight:700;letter-spacing:.32em;
|
|
text-transform:uppercase;color:#00e5ff;
|
|
text-shadow:0 0 12px rgba(0,229,255,.35);
|
|
}
|
|
.section-label .line{
|
|
flex:1;height:1px;background:linear-gradient(90deg,rgba(0,229,255,.4),transparent);
|
|
}
|
|
|
|
/* GRID */
|
|
.grid{
|
|
display:grid;
|
|
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
|
|
gap:1.25rem;
|
|
}
|
|
.tile{
|
|
position:relative;
|
|
background:#11141b;
|
|
border:1px solid #1f2530;
|
|
border-radius:10px;
|
|
overflow:hidden;
|
|
text-decoration:none;color:inherit;
|
|
display:flex;flex-direction:column;
|
|
transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
|
|
}
|
|
.tile::before{
|
|
content:"";position:absolute;top:0;left:0;right:0;height:2px;
|
|
background:linear-gradient(90deg,transparent,#00e5ff,transparent);
|
|
opacity:0;transition:opacity .25s ease;
|
|
}
|
|
.tile:hover{
|
|
transform:translateY(-4px);
|
|
border-color:#2a3848;
|
|
background:#151923;
|
|
box-shadow:0 8px 28px rgba(0,0,0,.55), 0 0 22px rgba(0,229,255,.08);
|
|
}
|
|
.tile:hover::before{opacity:1}
|
|
.tile-cover{
|
|
height:130px;
|
|
border-bottom:1px solid #1f2530;
|
|
position:relative;
|
|
}
|
|
.tile-cover::after{
|
|
content:"";position:absolute;inset:0;
|
|
background:repeating-linear-gradient(45deg,transparent 0 12px,rgba(0,229,255,.04) 12px 24px);
|
|
}
|
|
.tile-body{
|
|
padding:1.1rem 1.2rem 1.3rem;
|
|
}
|
|
.tile-body h2{
|
|
font-family:'Chakra Petch','Inter',sans-serif;
|
|
font-size:1.3rem;font-weight:700;letter-spacing:.01em;
|
|
margin-bottom:.3rem;color:#cfe8f5;
|
|
text-transform:uppercase;
|
|
}
|
|
.tile-body p{
|
|
font-size:.92rem;color:#9aa0a8;font-weight:500;
|
|
}
|
|
.tile-soon{
|
|
opacity:.55;pointer-events:none;
|
|
}
|
|
|
|
/* FOOTER */
|
|
.site-footer{
|
|
border-top:1px solid #1a2230;
|
|
padding:1.5rem;
|
|
text-align:center;
|
|
color:#6b7079;font-size:.85rem;
|
|
font-family:'Chakra Petch','Inter',sans-serif;
|
|
letter-spacing:.08em;
|
|
}
|
|
|
|
@media (max-width:520px){
|
|
.logo{height:110px}
|
|
.site-header{padding:3rem 1.5rem 2.5rem}
|
|
}
|