128 lines
3.0 KiB
CSS
128 lines
3.0 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #ffffff;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.showcase-container {
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.showcase-card {
|
|
position: relative;
|
|
height: 100vh; /* Gives sections look consistent with vertical scrolling aspect ratio */
|
|
min-height: 450px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 4rem;
|
|
}
|
|
|
|
/* Image protection overlay for readability */
|
|
.showcase-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
z-index: 1;
|
|
}
|
|
|
|
.card-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
/* --- Alignment Switches --- */
|
|
.text-right {
|
|
justify-content: flex-end;
|
|
text-align: right;
|
|
}
|
|
|
|
.text-left {
|
|
justify-content: flex-start;
|
|
text-align: left;
|
|
}
|
|
|
|
/* --- Image Assignments --- */
|
|
/* --- Corrected Image Assignments --- */
|
|
.bg-inet-server { background-image: url('2026-06-20_14.33.12.png'); }
|
|
.bg-inetia { background-image: url('2026-06-20_14.53.31.png'); }
|
|
.bg-britannica { background-image: url('2026-06-20_14.54.00.png'); }
|
|
.bg-desertia { background-image: url('2026-06-20_14.54.16.png'); }
|
|
.bg-north-itlasia { background-image: url('2026-06-20_14.54.30.png'); }
|
|
.bg-south-itlasia { background-image: url('2026-06-20_14.54.54.png'); }
|
|
.bg-cittia { background-image: url('2026-06-20_14.55.12.png'); }
|
|
.bg-stevefield { background-image: url('2026-06-20_14.55.41.png'); }
|
|
/* --- Typography & Specific Colors --- */
|
|
h1, h2 {
|
|
font-size: 2.8rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.6rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
/* Color definitions perfectly matching layout elements */
|
|
.text-white { color: #ffffff; }
|
|
.text-red { color: #ff0000 ; }
|
|
.text-green { color: #00ff00; }
|
|
.text-yellow { color: #f1c40f; }
|
|
.text-light-red { color: #ff4d4d; }
|
|
.text-teal { color: #1abc9c; }
|
|
.text-blue { color: #0000ff; }
|
|
/* --- Footer / CTA Styles --- */
|
|
.footer-cta {
|
|
background-color: #ffffff;
|
|
text-align: center;
|
|
padding: 5rem 2rem;
|
|
}
|
|
|
|
.text-explore {
|
|
color: #000000;
|
|
font-size: 1.3rem;
|
|
font-weight: 400;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
.text-apply {
|
|
color: #000000;
|
|
font-size: 1.3rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* --- Mobile Responsiveness --- */
|
|
@media (max-width: 768px) {
|
|
.showcase-card {
|
|
height: 55vh;
|
|
padding: 2rem;
|
|
text-align: center !important;
|
|
justify-content: center !important;
|
|
align-items: center;
|
|
}
|
|
|
|
h1, h2 {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.3rem;
|
|
}
|
|
} |