935 lines
21 KiB
CSS
935 lines
21 KiB
CSS
/* ───────── css/styles.css ───────── */
|
||
:root{
|
||
--gutter-x: 24px; /* (adjusts margins) */
|
||
--vh:1vh;
|
||
/* Safety net for JS-less browsers */
|
||
--header-h: 64px;
|
||
font-family:'Roboto Condensed',sans-serif;
|
||
color-scheme:dark;
|
||
--acid:#ffffff;
|
||
--slate:#000000;
|
||
--graphite:#0e0e0e;
|
||
--hot:#ffffff;
|
||
--ghost:#777;
|
||
/* ====== THEME ====== */
|
||
--accent:#dbdbdb; /* neon-cyan accent */
|
||
--glass:rgba(14,14,14,.55);/* translucent card surface */
|
||
--blur:12px; /* backdrop blur strength */
|
||
}
|
||
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
|
||
@media (max-width: 767px){
|
||
:root{ --gutter-x: 12px; } /* tighter on phones */
|
||
}
|
||
|
||
@font-face{
|
||
font-family:"BiohazardHead";
|
||
src:url("../fonts/BebasNeue-Regular.woff2") format("woff2"),
|
||
url("../fonts/BebasNeue-Regular.woff") format("woff");
|
||
font-weight:400; font-style:normal;
|
||
}
|
||
@font-face{
|
||
font-family:"Machina";
|
||
src:url("../fonts/Bebas_Neue/BebasNeue-Regular.ttf") format("opentype");
|
||
font-weight:700;
|
||
}
|
||
@font-face{
|
||
font-family:"ArchiveCond";
|
||
src:url("..//fonts/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-Bold.woff2") format("woff2");
|
||
font-weight:500;
|
||
}
|
||
@font-face{
|
||
font-family:"SpaceMono";
|
||
src:url("../fonts/Space_Mono/SpaceMono-Regular.ttf") format("opentype");
|
||
font-weight:400;
|
||
}
|
||
|
||
body{
|
||
|
||
background:var(--slate);color:var(--acid);
|
||
padding-top: calc(var(--header-h) + 2vh);
|
||
|
||
}
|
||
|
||
/* Add horizontal padding only to main content blocks, not header */
|
||
.content-block, .section, main.grid {
|
||
padding-left: var(--gutter-x);
|
||
padding-right: var(--gutter-x);
|
||
}
|
||
|
||
a{text-decoration:none;color:inherit}
|
||
img{max-width:100%;display:block}
|
||
|
||
/* Fix 100 vh on mobile */
|
||
@media(max-width:767px){
|
||
body,html{height:calc(var(--vh)*100)}
|
||
}
|
||
|
||
header.nav{
|
||
position:fixed;top:0;left:0;width:100vw;/* Ensure full viewport width */
|
||
z-index:100;
|
||
display:flex;flex-direction:column;align-items:center;
|
||
background:linear-gradient(to bottom, rgba(11,11,12,0.6) 0%, rgba(11,11,12,0) 100%);
|
||
text-shadow:0 0 4px var(--acid);
|
||
mix-blend-mode:normal;
|
||
font-size:clamp(14px,1.1vw,20px);
|
||
margin:0;
|
||
box-sizing:border-box;
|
||
padding: 8px 0;
|
||
}
|
||
|
||
header.nav nav{
|
||
display:flex; gap:24px;
|
||
font-family:'ArchiveCond',sans-serif;
|
||
}
|
||
header.nav .logo{
|
||
font-family:"Machina",sans-serif;
|
||
font-weight:700; /* bold blocky */
|
||
font-size:clamp(40.5px,5.6vw,72px); /* 1.125× larger */
|
||
color:var(--acid);
|
||
transform:scale(.95);
|
||
transition:transform .3s, filter .1s;
|
||
letter-spacing:.07em;
|
||
text-transform:uppercase;
|
||
margin-bottom:2px;
|
||
position:relative; /* for underline */
|
||
}
|
||
|
||
header.nav .logo:hover{
|
||
transform:scale(1);
|
||
}
|
||
|
||
/* Fancy underline animation for logo */
|
||
header.nav .logo::after{
|
||
content:"";
|
||
position:absolute;left:0;right:0;bottom:0;
|
||
height:3px;
|
||
background:var(--accent);
|
||
transform:scaleX(0);
|
||
transform-origin:center center;
|
||
transition:transform .25s;
|
||
}
|
||
header.nav .logo:hover::after{
|
||
transform:scaleX(1);
|
||
}
|
||
|
||
header.social{
|
||
display:flex; gap:24px;
|
||
font-family:'ArchiveCond',sans-serif;
|
||
text-shadow:0 0 2px var(--acid);
|
||
top:0; left:0; width:100%;
|
||
z-index:100; padding:8px 0 0;
|
||
display:flex; flex-direction:column; /* stack logo + nav */
|
||
align-items:center; /* center horizontally */
|
||
mix-blend-mode:normal;
|
||
font-size:clamp(14px,1.1vw,20px);
|
||
}
|
||
|
||
footer{
|
||
text-align:center;
|
||
padding:3rem 1rem;
|
||
font-size:.95rem;
|
||
opacity:.7;
|
||
font-family:"SpaceMono",monospace;
|
||
}
|
||
|
||
#contact {
|
||
font-family:"SpaceMono",monospace;
|
||
max-width:1300px;
|
||
margin:0 auto;
|
||
padding:9vh var(--gutter-x) 4vh;
|
||
line-height:1.4;
|
||
color:var(--acid);
|
||
text-shadow:0 0 2px var(--acid);
|
||
border-bottom:1px solid var(--graphite);
|
||
}
|
||
#contact form{
|
||
font-family:"SpaceMono",monospace;
|
||
max-width:520px;
|
||
margin:0 auto;
|
||
display:flex;flex-direction:column;gap:1.5rem;
|
||
color:var(--acid);
|
||
background:var(--glass);
|
||
border:1px solid rgba(255,255,255,.06);
|
||
box-shadow:0 4px 18px rgba(0,0,0,.4);
|
||
backdrop-filter:blur(var(--blur));
|
||
-webkit-backdrop-filter:blur(var(--blur));
|
||
padding:2rem 1.5rem 1.5rem;
|
||
border-radius:10px;
|
||
}
|
||
#contact label{
|
||
font-family:"ArchiveCond",sans-serif;
|
||
margin-bottom:.4rem;
|
||
font-weight:500;
|
||
font-size:1rem;
|
||
text-align:left;
|
||
color:var(--accent);
|
||
letter-spacing:.04em;
|
||
text-transform:uppercase;
|
||
}
|
||
#contact input,
|
||
#contact textarea{
|
||
font-family:"SpaceMono",monospace;
|
||
padding:.75rem 1rem;
|
||
margin-bottom:.5rem;
|
||
border:1px solid rgba(255,255,255,.12);
|
||
background:rgba(0,0,0,.35);
|
||
color:var(--acid);
|
||
border-radius:4px;
|
||
font-size:1rem;
|
||
transition:border-color .2s, box-shadow .2s;
|
||
resize:vertical;
|
||
}
|
||
#contact input:focus,
|
||
#contact textarea:focus{
|
||
border-color:var(--accent);
|
||
box-shadow:0 0 6px var(--accent);
|
||
outline:none;
|
||
}
|
||
#contact input[type="submit"]{
|
||
font-family:"ArchiveCond",sans-serif;
|
||
cursor:pointer;
|
||
background:var(--accent);
|
||
color:var(--slate);
|
||
font-weight:700;
|
||
text-transform:uppercase;
|
||
letter-spacing:.07em;
|
||
border:none;
|
||
border-radius:4px;
|
||
padding:.85rem 1.5rem;
|
||
transition:background .2s,color .2s,box-shadow .2s;
|
||
margin-top:.5rem;
|
||
}
|
||
#contact input[type="submit"]:hover{
|
||
background:var(--acid);
|
||
color:var(--graphite);
|
||
box-shadow:0 2px 12px rgba(0,0,0,.25);
|
||
}
|
||
#contact button[type="submit"]{
|
||
font-family:"ArchiveCond",sans-serif;
|
||
cursor:pointer;
|
||
background:var(--accent);
|
||
color:var(--slate);
|
||
font-weight:700;
|
||
text-transform:uppercase;
|
||
letter-spacing:.07em;
|
||
border:none;
|
||
border-radius:4px;
|
||
padding:.85rem 1.5rem;
|
||
transition:background .2s,color .2s,box-shadow .2s;
|
||
margin-top:.5rem;
|
||
}
|
||
#contact button[type="submit"]:hover{
|
||
background:var(--acid);
|
||
color:var(--graphite);
|
||
box-shadow:0 2px 12px rgba(0,0,0,.25);
|
||
}
|
||
|
||
|
||
|
||
header.nav a{
|
||
transition:opacity .3s
|
||
}
|
||
|
||
header.nav a:hover{
|
||
opacity:.8
|
||
}
|
||
|
||
/* underline kicker */
|
||
header.nav nav a::after{
|
||
content:"";
|
||
display:block;
|
||
height:2px;
|
||
background:var(--accent);
|
||
transform:scaleX(0);transition:transform .25s;
|
||
}
|
||
header.nav nav a:hover::after{transform:scaleX(1);}
|
||
@media(max-width:767px){
|
||
header.nav{top:8px;justify-content:space-between;padding:0 var(--gutter);font-size:12px}
|
||
header.nav .logo{margin:0;font-weight:bold}
|
||
header.nav nav{gap:16px}
|
||
}
|
||
|
||
/* GRID */
|
||
.grid{
|
||
--cols:4;
|
||
display:grid;
|
||
grid-template-columns:repeat(var(--cols),1fr);
|
||
gap:24px;
|
||
padding-top: calc(var(--header-h)*.5 + 2vh);
|
||
counter-reset: item; /* Reset Project counter */
|
||
}
|
||
|
||
@media(max-width:1024px){.grid{--cols:3}}
|
||
@media(max-width:767px){.grid{--cols:2;gap:12px;padding:calc(var(--vh)*5) var(--gutter)}}
|
||
|
||
.item:not(.hidden) h2::before{ /* only real cards */
|
||
counter-increment:item;
|
||
}
|
||
|
||
.item{
|
||
position:relative;
|
||
counter-increment:item;
|
||
overflow:hidden;cursor:pointer;
|
||
opacity:0;transform:translateY(40px);
|
||
transition:opacity .6s,transform .6s;
|
||
}
|
||
.item.loaded{opacity:1;transform:none}
|
||
|
||
|
||
/* Item Spans */
|
||
|
||
.item[data-span="banner"] { grid-column: span 3; }
|
||
.item[data-span="portrait-xl"]{ grid-row: span 3; }
|
||
.item[data-span="wide"] { grid-column: span 2; }
|
||
.item[data-span="tall"] { grid-row: span 2; }
|
||
.item[data-span="big"] { grid-column: span 2; grid-row: span 2; }
|
||
|
||
@media(max-width:767px){
|
||
.item[data-span="wide"],
|
||
.item[data-span="tall"],
|
||
.item[data-span="big"]{ grid-column: span 2; grid-row: span 1; }
|
||
}
|
||
|
||
small,code,.mono{font-family:"SpaceMono",monospace}
|
||
|
||
.item h2{
|
||
font-family:"ArchiveCond",sans-serif;
|
||
letter-spacing:.04em;
|
||
font-size:clamp(12px,.9vw,18px);
|
||
text-transform:uppercase;
|
||
margin-bottom:8px;
|
||
line-height:1.1;
|
||
display:inline-block; /* so the counter sits inline */
|
||
position:relative;
|
||
transition:opacity .5s; /* Only opacity transitions */
|
||
}
|
||
|
||
.item h2::before{
|
||
counter-increment:item;
|
||
content: counter(item,decimal-leading-zero) " ";
|
||
font-family:'Roboto Mono',monospace;
|
||
margin-right:.75em;
|
||
}
|
||
|
||
/* Underline kicker for item h2, styled like nav */
|
||
.item h2::after {
|
||
content: "";
|
||
display: block;
|
||
height: 2px;
|
||
background: var(--accent);
|
||
transform: scaleX(0);
|
||
transition: transform .25s;
|
||
margin-top: 3px;
|
||
}
|
||
.item:hover h2::after {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.thumb{
|
||
background-size:cover;background-position:center;
|
||
padding-bottom:62.5%;
|
||
transition:opacity .5s,transform .5s
|
||
}
|
||
.item:hover .thumb {
|
||
opacity:.8;
|
||
transform:scale(1.04);
|
||
}
|
||
.item:hover h2{
|
||
opacity:.8;
|
||
}
|
||
|
||
.content-block{
|
||
max-width:800px;
|
||
margin:0 auto;
|
||
padding:20vh var(--gutter);
|
||
font-family:'Roboto Mono',monospace;
|
||
line-height:1.5;
|
||
}
|
||
|
||
#about{
|
||
font-family:"ArchiveCond",sans-serif;
|
||
max-width:1300px;
|
||
margin:0 auto;
|
||
padding:4vh var(--gutter-x) 1vh;
|
||
line-height:1.2;
|
||
color:var(--acid);
|
||
text-shadow:0 0 2px var(--acid);
|
||
border-bottom:1px solid var(--graphite);
|
||
}
|
||
|
||
#crew{
|
||
font-family:"ArchiveCond",sans-serif;
|
||
max-width:1300px;
|
||
margin:0 auto;
|
||
padding:4vh var(--gutter-x) 4vh;
|
||
line-height:1.2;
|
||
color:var(--acid);
|
||
text-shadow:0 0 2px var(--acid);
|
||
border-bottom:1px solid var(--graphite);
|
||
}
|
||
|
||
/* PIPELINE SECTION */
|
||
.section h2{
|
||
font-family:"ArchiveCond",sans-serif;
|
||
font-size:clamp(1.1rem,1.5vw + .5rem,2rem);
|
||
text-transform:uppercase;
|
||
letter-spacing:.05em;
|
||
color:var(--accent);
|
||
margin:0 0 2.2rem;
|
||
position:relative;
|
||
}
|
||
.section h2::after{
|
||
content:"";
|
||
position:absolute;left:0;bottom:-6px;
|
||
width:40px;height:2px;
|
||
background:var(--accent);
|
||
}
|
||
|
||
#pipeline{
|
||
font-family:"ArchiveCond",sans-serif;
|
||
padding:4vh var(--gutter-x) 1vh;
|
||
line-height:1.2;
|
||
}
|
||
.pipeline-steps{
|
||
gap:var(--gutter-x);
|
||
}
|
||
.pipeline-step{
|
||
border-radius:10px;
|
||
}
|
||
|
||
.pipeline-step {
|
||
background: var(--glass);
|
||
color: var(--acid);
|
||
border-radius: 8px;
|
||
box-shadow: 0 4px 18px rgba(0,0,0,.4);
|
||
padding: 2rem 1.5rem 1.5rem;
|
||
min-width: 220px;
|
||
max-width: 320px;
|
||
flex: 1 1 220px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
opacity: 0.97;
|
||
transition: transform .25s, box-shadow .25s, opacity .25s;
|
||
text-align: center;
|
||
}
|
||
|
||
.pipeline-step:hover {
|
||
transform: translateY(-4px) scale(1.028);
|
||
box-shadow: 0 10px 32px rgba(0,0,0,.55);
|
||
opacity: 1;
|
||
}
|
||
|
||
.pipeline-step h3 {
|
||
font-family: "ArchiveCond", sans-serif;
|
||
font-size: 1.05rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
margin-bottom: 0.5rem;
|
||
margin-top: 0;
|
||
color: var(--hot);
|
||
text-shadow: 0 0 2px var(--acid);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.pipeline-step p,
|
||
.pipeline-step small {
|
||
font-family: "SpaceMono", monospace;
|
||
font-size: 0.92rem;
|
||
color: var(--acid);
|
||
opacity: 0.85;
|
||
margin: 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.pipeline-steps {
|
||
gap: 1.2rem;
|
||
}
|
||
.pipeline-step {
|
||
padding: 1.2rem 0.7rem 1rem;
|
||
min-width: 160px;
|
||
max-width: 240px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
#pipeline {
|
||
padding: 6vh var(--gutter-x) 2vh;
|
||
}
|
||
.pipeline-steps {
|
||
gap: 0.7rem;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.pipeline-step {
|
||
min-width: 0;
|
||
max-width: 320px;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
padding: 1rem 0.5rem 1rem;
|
||
}
|
||
}
|
||
|
||
/* TEAM SECTION */
|
||
#team {
|
||
font-family:"ArchiveCond",sans-serif;
|
||
max-width: 1300px;
|
||
margin: 0 auto;
|
||
padding: 4vh var(--gutter-x) 2.5vh; /* ↓ tighter bottom gap */
|
||
line-height: 1.2;
|
||
color: var(--acid);
|
||
text-shadow: 0 0 2px var(--acid);
|
||
border-bottom: 1px solid var(--graphite);
|
||
}
|
||
|
||
.team-container {
|
||
display: flex;
|
||
gap: var(--gutter-x);
|
||
margin: 3rem 0; /* slightly more spacing between heading and founder images */
|
||
padding: 0;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.portrait {
|
||
width: clamp(200px, 22vw, 300px);
|
||
padding: 0 0 1.25rem;
|
||
overflow: hidden; /* allow image to bleed */
|
||
background:var(--glass);
|
||
color: var(--acid);
|
||
border-radius: 10px;
|
||
/* glass-card behaviour */
|
||
/* duplicate here to avoid extra class */
|
||
border:1px solid rgba(255,255,255,.06);
|
||
box-shadow:0 4px 18px rgba(0,0,0,.35);
|
||
backdrop-filter:blur(var(--blur));
|
||
-webkit-backdrop-filter:blur(var(--blur));
|
||
transition:transform .25s, box-shadow .25s, opacity .25s;
|
||
text-decoration: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
opacity: 0.96;
|
||
}
|
||
.portrait:hover {
|
||
transform:translateY(-4px) scale(1.03);
|
||
box-shadow:0 10px 32px rgba(0,0,0,.55);
|
||
opacity: 1;
|
||
}
|
||
.portrait img {
|
||
width: 100%;
|
||
height: auto;
|
||
border-radius: 0;
|
||
object-fit: cover;
|
||
margin: 0;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
|
||
background: var(--slate);
|
||
display: block;
|
||
}
|
||
.portrait h3 {
|
||
font-family: "ArchiveCond", sans-serif;
|
||
font-size: 1.3rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
margin-bottom: 0.25rem;
|
||
margin-top: 0;
|
||
color: var(--hot);
|
||
text-shadow: 0 0 2px var(--acid);
|
||
font-weight: 500;
|
||
text-align: center;
|
||
}
|
||
.portrait p {
|
||
font-family:"ArchiveCond",sans-serif;
|
||
font-size: 1rem;
|
||
color: var(--acid);
|
||
opacity: 0.85;
|
||
text-align: center;
|
||
margin: 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.team-container {
|
||
gap: 1.5rem;
|
||
}
|
||
.portrait {
|
||
width: 180px;
|
||
padding: 1rem 0.5rem 1rem;
|
||
}
|
||
.portrait img {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
#team {
|
||
padding: 6vh var(--gutter-x) 2vh;
|
||
}
|
||
.team-container {
|
||
gap: 1rem;
|
||
}
|
||
.portrait {
|
||
width: 100%;
|
||
max-width: 320px;
|
||
margin: 0 auto;
|
||
padding: 1rem 0.5rem 1rem;
|
||
}
|
||
.portrait img {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
}
|
||
|
||
header.social social a {
|
||
position: relative;
|
||
display: inline-block;
|
||
transition: opacity .3s;
|
||
}
|
||
header.social social a::after {
|
||
content: "";
|
||
display: block;
|
||
height: 2px;
|
||
background: var(--acid);
|
||
transform: scaleX(0);
|
||
transition: transform 0.25s cubic-bezier(.4,0,.2,1);
|
||
margin-top: 2px;
|
||
}
|
||
header.social social a:hover::after {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
/* -------- GLOBAL GLASS CARD -------- */
|
||
.glass-card{
|
||
background:var(--glass);
|
||
border:1px solid rgba(255,255,255,.06);
|
||
box-shadow:0 4px 18px rgba(0,0,0,.4);
|
||
backdrop-filter:blur(var(--blur));
|
||
-webkit-backdrop-filter:blur(var(--blur));
|
||
transition:transform .25s, box-shadow .25s, opacity .25s;
|
||
}
|
||
.glass-card:hover{
|
||
transform:translateY(-4px) scale(1.025);
|
||
box-shadow:0 10px 32px rgba(0,0,0,.55);
|
||
}
|
||
|
||
/* -------- SECTION HEADING -------- */
|
||
.content-block h2{
|
||
font-family:"ArchiveCond",sans-serif;
|
||
font-size:clamp(1.1rem,1.5vw + .5rem,2rem);
|
||
text-transform:uppercase;
|
||
letter-spacing:.05em;
|
||
color:var(--accent);
|
||
margin:0 0 2.2rem;
|
||
position:relative;
|
||
}
|
||
.content-block h2::after{
|
||
content:"";
|
||
position:absolute;left:0;bottom:-6px;
|
||
width:40px;height:2px;
|
||
background:var(--accent);
|
||
}
|
||
|
||
/* ===== NAV accent underline ===== */
|
||
header.nav nav a::after{
|
||
background:var(--accent);
|
||
}
|
||
|
||
/* ===== GRID card underline ===== */
|
||
.item h2::after {
|
||
background: var(--accent);
|
||
}
|
||
|
||
/* ===== PORTRAITS ===== */
|
||
.portrait {
|
||
width: clamp(200px, 22vw, 300px);
|
||
padding: 0 0 1.25rem;
|
||
overflow: hidden; /* allow image to bleed */
|
||
background:var(--glass);
|
||
color: var(--acid);
|
||
border-radius: 10px;
|
||
/* glass-card behaviour */
|
||
/* duplicate here to avoid extra class */
|
||
border:1px solid rgba(255,255,255,.06);
|
||
box-shadow:0 4px 18px rgba(0,0,0,.35);
|
||
backdrop-filter:blur(var(--blur));
|
||
-webkit-backdrop-filter:blur(var(--blur));
|
||
transition:transform .25s, box-shadow .25s, opacity .25s;
|
||
text-decoration: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
opacity: 0.96;
|
||
}
|
||
.portrait:hover {
|
||
transform:translateY(-4px) scale(1.03);
|
||
box-shadow:0 10px 32px rgba(0,0,0,.55);
|
||
opacity: 1;
|
||
}
|
||
.portrait img {
|
||
width: 100%;
|
||
height: auto;
|
||
border-radius: 0;
|
||
object-fit: cover;
|
||
margin: 0;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.18);
|
||
background: var(--slate);
|
||
display: block;
|
||
}
|
||
.portrait h3 {
|
||
font-family: "ArchiveCond", sans-serif;
|
||
font-size: 1.3rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.04em;
|
||
margin-bottom: 0.25rem;
|
||
margin-top: 0;
|
||
color: var(--hot);
|
||
text-shadow: 0 0 2px var(--acid);
|
||
font-weight: 500;
|
||
text-align: center;
|
||
}
|
||
.portrait p {
|
||
font-family:"ArchiveCond",sans-serif;
|
||
font-size: 1rem;
|
||
color: var(--acid);
|
||
opacity: 0.85;
|
||
text-align: center;
|
||
margin: 0;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.team-container {
|
||
gap: 1.5rem;
|
||
}
|
||
.portrait {
|
||
width: 180px;
|
||
padding: 1rem 0.5rem 1rem;
|
||
}
|
||
.portrait img {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
#team {
|
||
padding: 6vh var(--gutter-x) 2vh;
|
||
}
|
||
.team-container {
|
||
gap: 1rem;
|
||
}
|
||
.portrait {
|
||
width: 100%;
|
||
max-width: 320px;
|
||
margin: 0 auto;
|
||
padding: 1rem 0.5rem 1rem;
|
||
}
|
||
.portrait img {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
}
|
||
|
||
header.social social a {
|
||
position: relative;
|
||
display: inline-block;
|
||
transition: opacity .3s;
|
||
}
|
||
header.social social a::after {
|
||
content: "";
|
||
display: block;
|
||
height: 2px;
|
||
background: var(--acid);
|
||
transform: scaleX(0);
|
||
transition: transform 0.25s cubic-bezier(.4,0,.2,1);
|
||
margin-top: 2px;
|
||
}
|
||
header.social social a:hover::after {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
/* ===== PIPELINE, FAQ, PROJECT GLASS ===== */
|
||
.faq-list details,
|
||
.project-section{
|
||
background:var(--glass);
|
||
border:1px solid rgba(255,255,255,.06);
|
||
box-shadow:0 4px 18px rgba(0,0,0,.38);
|
||
backdrop-filter:blur(var(--blur));
|
||
-webkit-backdrop-filter:blur(var(--blur));
|
||
}
|
||
|
||
/* Contact info */
|
||
.contact-info{
|
||
margin:2em 0 4vh;text-align:center;font-size:1rem;opacity:.7;
|
||
font-family:"SpaceMono",monospace;
|
||
}
|
||
.contact-info a{color:var(--accent);}
|
||
|
||
/* === BACK TO TOP BUTTON === */
|
||
.back-to-top {
|
||
position: fixed;
|
||
bottom: 2rem;
|
||
right: 2rem;
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transform: translateY(20px);
|
||
transition: opacity .3s, transform .3s, background .3s;
|
||
|
||
/* Glass card style */
|
||
background: var(--glass);
|
||
border: 1px solid rgba(255,255,255,.06);
|
||
backdrop-filter: blur(var(--blur));
|
||
-webkit-backdrop-filter: blur(var(--blur));
|
||
}
|
||
|
||
.back-to-top.visible {
|
||
opacity: .8;
|
||
pointer-events: auto;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.back-to-top:hover {
|
||
opacity: 1;
|
||
background: var(--accent);
|
||
}
|
||
|
||
.back-to-top svg {
|
||
width: 24px;
|
||
height: 24px;
|
||
stroke: var(--accent);
|
||
transition: stroke .3s;
|
||
}
|
||
|
||
.back-to-top:hover svg {
|
||
stroke: var(--slate);
|
||
}
|
||
|
||
/* === PAGE LOADER === */
|
||
#loader-overlay{
|
||
position:fixed;inset:0;
|
||
background:rgba(0,0,0,.85);
|
||
backdrop-filter:blur(6px);
|
||
display:flex;align-items:center;justify-content:center;
|
||
z-index:9999;
|
||
transition:opacity .6s;
|
||
}
|
||
#loader-overlay.hide{opacity:0;pointer-events:none;}
|
||
.spinner{
|
||
width:72px;height:72px;
|
||
border:6px solid rgba(255,255,255,.15);
|
||
border-top-color:var(--accent);
|
||
border-radius:50%;
|
||
animation:spin 1s linear infinite;
|
||
}
|
||
@keyframes spin{to{transform:rotate(360deg);}}
|
||
|
||
/* ===== HERO PARALLAX REFINEMENT ===== */
|
||
.hero{
|
||
position:relative;
|
||
height:100vh;
|
||
margin-top:-15vh; /* Remove negative margin to bring video to top */
|
||
overflow:hidden;
|
||
z-index:1;
|
||
}
|
||
/* Video as moveable box that behaves as background */
|
||
.hero video{
|
||
position:absolute;
|
||
top:0;
|
||
left:0;
|
||
width:100%;
|
||
height:120vh;
|
||
object-fit:cover;
|
||
z-index:-2;
|
||
pointer-events:none;
|
||
transform:translateY(-100vh);
|
||
transition:transform 0.1s ease-out;
|
||
}
|
||
/* Gradient overlay - separate from video, controlled by scroll */
|
||
.hero::after{
|
||
content:"";
|
||
position:absolute;
|
||
top:0;
|
||
left:0;
|
||
width:100%;
|
||
height:200vh; /* further extend to mask bottom edge even during video movement */
|
||
pointer-events:none;
|
||
background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,1) 100%);
|
||
z-index:-1;
|
||
opacity:var(--gradient-opacity,100%);
|
||
transition:opacity 0.3s;
|
||
}
|
||
|
||
/* Dynamic about section padding */
|
||
#about.content-block {
|
||
margin-top: 15vh; /* Start with large padding */
|
||
max-width: 2000px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
transition: margin-top 0.5s ease-out;
|
||
}
|
||
|
||
/* When about reaches top, reduce padding */
|
||
#about.content-block.reduced-padding {
|
||
margin-top: -50rem;
|
||
}
|
||
|
||
/* Projects grid spacing */
|
||
#projects.grid {
|
||
margin-bottom: 4.5rem;
|
||
transition: margin-top 0.5s ease-out;
|
||
}
|
||
|
||
/* Content that scrolls over the video */
|
||
.content-wrapper {
|
||
position: relative;
|
||
z-index: 2;
|
||
background: transparent;
|
||
}
|
||
|
||
/* Remove black background from content sections */
|
||
.content-block, .section, main.grid {
|
||
background: transparent;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* ===== CONTACT FORM REFINEMENTS ===== */
|
||
.form-message{
|
||
margin-top:1em;
|
||
padding:1em;
|
||
border-radius:6px;
|
||
font-family:"SpaceMono",monospace;
|
||
font-size:1.1em;
|
||
text-align:center;
|
||
display:none; /* initially hidden */
|
||
}
|
||
.form-message.success{background:#1a3d1a;color:#b6ffb6;border:1px solid #3c6;}
|
||
.form-message.error {background:#3d1a1a;color:#ffb6b6;border:1px solid #c66;}
|
||
.honeypot{display:none;}
|
||
|
||
/* Form layout helpers */
|
||
.form-row{display:flex;gap:1em;flex-wrap:wrap;}
|
||
.form-col{flex:1 1 120px;min-width:120px;}
|
||
|
||
@media(max-width:600px){
|
||
#contact{padding:4vh 8px 2vh;font-size:1rem;}
|
||
#contact form label,
|
||
#contact form input,
|
||
#contact form textarea{font-size:1em;}
|
||
}
|
||
|
||
|
||
|