“`

/* =========================================================
PROJECTS // WORDPRESS SAFE VERSION
========================================================= */

.projects-page {
–black: #050505;
–dark: #151515;
–silver-dark: #333333;
–silver: #d9d9d9;
–silver-light: #eeeeee;
–white: #ffffff;
–gray: #777777;
–font-mono: “Courier New”, Courier, monospace;

box-sizing: border-box;
min-height: 100vh;
background:
repeating-linear-gradient(
90deg,
rgba(255,255,255,0.08) 0px,
rgba(255,255,255,0.02) 1px,
rgba(0,0,0,0.04) 2px,
transparent 4px
),
linear-gradient(
135deg,
#333333 0%,
#d9d9d9 48%,
#ffffff 50%,
#d9d9d9 52%,
#333333 100%
);
background-attachment: fixed;
color: #111;
font-family: var(–font-mono);
overflow-x: hidden;
}

.projects-page *,
.projects-page *::before,
.projects-page *::after {
box-sizing: border-box;
}

/* =========================================================
FUTURISTIC GRID
========================================================= */

.projects-page::before {
content: “”;
position: fixed;
inset: 0;
background:
linear-gradient(
rgba(0,0,0,0.06) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(0,0,0,0.06) 1px,
transparent 1px
);
background-size: 40px 40px;
pointer-events: none;
z-index: 9998;
opacity: 0.35;
}

/* =========================================================
HEADER
========================================================= */

.projects-page .projects-header {
max-width: 1200px;
margin: 0 auto;
padding: 50px 20px 35px;
position: relative;
}

.projects-page .projects-header::after {
content: “”;
position: absolute;
bottom: 0;
left: 20px;
width: 220px;
height: 4px;
background:
linear-gradient(
90deg,
#111,
#fff,
#555,
transparent
);
box-shadow:
0 0 15px rgba(255,255,255,0.8);
}

.projects-page h1 {
font-family: var(–font-mono);
font-size: clamp(3rem, 9vw, 7rem);
line-height: 0.8;
letter-spacing: -6px;
font-weight: 900;
margin: 0;
padding: 0;
background:
linear-gradient(
180deg,
#111111 0%,
#eeeeee 25%,
#555555 42%,
#ffffff 50%,
#777777 62%,
#eeeeee 78%,
#222222 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow:
0 3px 15px rgba(0,0,0,0.25);
}

.projects-page .projects-header p {
margin: 25px 0 0;
padding: 0;
font-size: 0.75rem;
letter-spacing: 5px;
font-weight: bold;
color: #222;
}

/* =========================================================
MAIN
========================================================= */

.projects-page .projects-main {
max-width: 1200px;
margin: 0 auto;
padding: 60px 20px;
}

.projects-page .section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
margin-bottom: 30px;
}

.projects-page .section-label {
font-size: 0.7rem;
letter-spacing: 4px;
font-weight: bold;
color: #222;
}

.projects-page .project-count {
font-size: 0.65rem;
letter-spacing: 2px;
color: #333;
}

/* =========================================================
PROJECT GRID
========================================================= */

.projects-page .project-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}

/* =========================================================
PROJECT CARD
========================================================= */

.projects-page .project-card {
position: relative;
min-height: 340px;
overflow: hidden;
text-decoration: none;
color: #111;
border: 1px solid #222;
background:
linear-gradient(
145deg,
#ffffff 0%,
#d9d9d9 42%,
#777777 50%,
#eeeeee 62%,
#888888 100%
);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.9),
inset 0 -1px 0 rgba(0,0,0,0.5),
0 15px 35px rgba(0,0,0,0.35);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}

.projects-page .project-card:hover {
transform: translateY(-6px);
box-shadow:
inset 0 1px 0 #fff,
0 25px 50px rgba(0,0,0,0.5),
0 0 30px rgba(255,255,255,0.5);
}

/* =========================================================
METAL TEXTURE
========================================================= */

.projects-page .project-card::before {
content: “”;
position: absolute;
inset: 0;
background:
repeating-linear-gradient(
90deg,
rgba(255,255,255,0.14) 0px,
rgba(255,255,255,0.03) 1px,
rgba(0,0,0,0.04) 2px,
transparent 5px
);
pointer-events: none;
z-index: 4;
}

/* =========================================================
SHINE
========================================================= */

.projects-page .project-card::after {
content: “”;
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.45),
transparent
);
transform: skewX(-20deg);
transition: left 0.7s ease;
pointer-events: none;
z-index: 5;
}

.projects-page .project-card:hover::after {
left: 130%;
}

/* =========================================================
CARD CONTENT
========================================================= */

.projects-page .card-top {
position: relative;
z-index: 3;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 18px;
}

.projects-page .card-number {
font-size: 0.65rem;
letter-spacing: 2px;
font-weight: bold;
}

.projects-page .card-type {
font-size: 0.6rem;
letter-spacing: 2px;
border: 1px solid #222;
padding: 5px 8px;
background: rgba(255,255,255,0.35);
}

.projects-page .card-content {
position: absolute;
z-index: 3;
left: 20px;
right: 20px;
bottom: 20px;
}

.projects-page .card-title {
font-family: var(–font-mono);
font-size: clamp(2rem, 5vw, 4rem);
line-height: 0.85;
letter-spacing: -3px;
font-weight: 900;
margin: 0 0 12px;
padding: 0;
background:
linear-gradient(
180deg,
#111,
#fff 35%,
#444 50%,
#ddd 65%,
#111
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow:
0 2px 5px rgba(0,0,0,0.25);
}

.projects-page .card-description {
max-width: 600px;
font-size: 0.72rem;
line-height: 1.5;
font-weight: bold;
color: #222;
margin: 0;
}

.projects-page .card-arrow {
display: inline-block;
margin-top: 15px;
font-size: 1.2rem;
transition: transform 0.3s ease;
}

.projects-page .project-card:hover .card-arrow {
transform: translateX(8px);
}

/* =========================================================
FEATURED
========================================================= */

.projects-page .featured {
grid-column: span 2;
min-height: 520px;
}

/* =========================================================
VIDEO
========================================================= */

.projects-page .video-preview {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
opacity: 0.72;
transition: opacity 0.3s ease;
}

.projects-page .project-card:hover .video-preview {
opacity: 0.9;
}

.projects-page .video-preview iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
border: 0;
pointer-events: none;
}

.projects-page .video-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
to bottom,
rgba(0,0,0,0.05),
rgba(0,0,0,0.1) 35%,
rgba(0,0,0,0.8) 100%
);
pointer-events: none;
}

/* =========================================================
VIDEO TEXT
========================================================= */

.projects-page .video-card .card-title {
color: white;
background: none;
-webkit-text-fill-color: white;
text-shadow:
0 2px 8px rgba(0,0,0,0.7);
}

.projects-page .video-card .card-description {
color: #eee;
text-shadow:
0 1px 5px rgba(0,0,0,0.7);
}

.projects-page .video-card .card-number,
.projects-page .video-card .card-type {
color: white;
}

.projects-page .video-card .card-type {
border-color: rgba(255,255,255,0.7);
background: rgba(0,0,0,0.35);
}

.projects-page .video-card .card-arrow {
color: white;
}

/* =========================================================
DIVIDER
========================================================= */

.projects-page .chrome-line {
height: 3px;
margin: 80px 0;
background:
linear-gradient(
90deg,
transparent,
#111,
#fff,
#555,
#fff,
#111,
transparent
);
box-shadow:
0 0 12px rgba(255,255,255,0.7);
}

/* =========================================================
ABOUT / UPCOMING
========================================================= */

.projects-page .about {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.projects-page .about-box {
padding: 30px;
min-height: 250px;
border: 1px solid #222;
background:
linear-gradient(
145deg,
#f5f5f5,
#aaa 48%,
#eee 50%,
#777
);
box-shadow:
inset 0 1px 0 #fff,
0 15px 35px rgba(0,0,0,0.3);
}

.projects-page .about-box h3 {
font-family: var(–font-mono);
font-size: 1.5rem;
margin: 15px 0 20px;
padding: 0;
letter-spacing: -1px;
color: #111;
}

.projects-page .about-box p {
font-size: 0.75rem;
line-height: 1.7;
max-width: 600px;
margin: 0;
}

/* =========================================================
FOOTER
========================================================= */

.projects-page .projects-footer {
max-width: 1200px;
margin: 0 auto;
padding: 30px 20px 50px;
border-top: 1px solid rgba(0,0,0,0.4);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
font-size: 0.65rem;
letter-spacing: 2px;
font-weight: bold;
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

.projects-page .projects-header {
padding: 35px 18px 25px;
}

.projects-page .projects-header::after {
left: 18px;
}

.projects-page .projects-main {
padding: 40px 18px;
}

.projects-page .project-grid {
grid-template-columns: 1fr;
}

.projects-page .featured {
grid-column: span 1;
min-height: 400px;
}

.projects-page .project-card {
min-height: 300px;
}

.projects-page .about {
grid-template-columns: 1fr;
}

.projects-page .section-header {
display: block;
}

.projects-page .project-count {
display: block;
margin-top: 15px;
}

.projects-page .projects-footer {
padding-left: 18px;
padding-right: 18px;
}
}

“`