:root {
--scp-bg-dark: #0d0d0d;
--scp-bg-card: #1a1a1a;
--scp-bg-card-hover: #222222;
--scp-bg-surface: #141414;
--scp-red: #e31837;
--scp-red-hover: #ff2244;
--scp-red-dark: #b8142d;
--scp-white: #ffffff;
--scp-gray-100: #f5f5f5;
--scp-gray-200: #e0e0e0;
--scp-gray-300: #bdbdbd;
--scp-gray-400: #9e9e9e;
--scp-gray-500: #757575;
--scp-gray-600: #616161;
--scp-gray-700: #424242;
--scp-gray-800: #303030;
--scp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--scp-radius: 8px;
--scp-radius-lg: 12px;
--scp-shadow: 0 2px 8px rgba(0,0,0,0.3);
--scp-shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
--scp-transition: 0.2s ease;
} .scp-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
} .scp-homepage {
background: var(--scp-bg-dark);
color: var(--scp-gray-200);
font-family: var(--scp-font);
line-height: 1.6;
} .scp-hero-image {
position: relative;
min-height: 500px;
background-size: cover;
background-position: center;
background-color: var(--scp-bg-surface);
display: flex;
align-items: center;
}
.scp-hero-no-image {
background: linear-gradient(135deg, var(--scp-bg-dark) 0%, var(--scp-gray-800) 100%);
}
.scp-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.75) 100%);
display: flex;
align-items: center;
}
.scp-hero-inner {
max-width: 1200px;
margin: 0 auto;
padding: 80px 24px;
width: 100%;
}
.scp-hero-heading {
font-size: 3.2rem;
font-weight: 800;
color: var(--scp-white);
margin: 0 0 8px;
text-transform: uppercase;
letter-spacing: 1px;
}
.scp-hero-title {
font-size: 1.6rem;
font-weight: 600;
color: var(--scp-red);
margin: 0 0 20px;
}
.scp-hero-intro {
font-size: 1.15rem;
color: var(--scp-gray-200);
max-width: 680px;
margin-bottom: 28px;
}
.scp-hero-ctas {
display: flex;
gap: 16px;
flex-wrap: wrap;
} .scp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
font-size: 1rem;
font-weight: 600;
border-radius: var(--scp-radius);
text-decoration: none;
transition: all var(--scp-transition);
cursor: pointer;
border: 2px solid transparent;
font-family: var(--scp-font);
}
.scp-btn-primary {
background: var(--scp-red);
color: var(--scp-white);
border-color: var(--scp-red);
}
.scp-btn-primary:hover {
background: var(--scp-red-hover);
border-color: var(--scp-red-hover);
color: var(--scp-white);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(227,24,55,0.4);
}
.scp-btn-secondary {
background: transparent;
color: var(--scp-white);
border-color: var(--scp-white);
}
.scp-btn-secondary:hover {
background: var(--scp-white);
color: var(--scp-bg-dark);
} .scp-mission {
padding: 64px 0;
background: var(--scp-bg-surface);
border-top: 3px solid var(--scp-red);
}
.scp-mission-content {
font-size: 1.2rem;
line-height: 1.8;
color: var(--scp-gray-200);
max-width: 800px;
margin: 0 auto;
text-align: center;
} .scp-gallery {
padding: 64px 0;
background: var(--scp-bg-dark);
}
.scp-gallery-grid {
display: grid;
gap: 20px;
}
.scp-gallery-1 { grid-template-columns: 1fr; }
.scp-gallery-2 { grid-template-columns: repeat(2, 1fr); }
.scp-gallery-3 { grid-template-columns: repeat(3, 1fr); }
.scp-gallery-item {
border-radius: var(--scp-radius-lg);
overflow: hidden;
box-shadow: var(--scp-shadow);
}
.scp-gallery-img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
transition: transform var(--scp-transition);
}
.scp-gallery-item:hover .scp-gallery-img {
transform: scale(1.03);
} .scp-section-heading {
font-size: 2rem;
font-weight: 700;
color: var(--scp-white);
margin: 0 0 32px;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
padding-bottom: 12px;
}
.scp-section-heading::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: var(--scp-red);
border-radius: 2px;
} .scp-latest-news {
padding: 64px 0 80px;
background: var(--scp-bg-dark);
}
.scp-news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 28px;
}
.scp-news-card {
background: var(--scp-bg-card);
border-radius: var(--scp-radius-lg);
overflow: hidden;
box-shadow: var(--scp-shadow);
transition: transform var(--scp-transition), box-shadow var(--scp-transition);
}
.scp-news-card:hover {
transform: translateY(-4px);
box-shadow: var(--scp-shadow-lg);
}
.scp-news-card-image {
display: block;
height: 200px;
overflow: hidden;
}
.scp-news-thumb {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--scp-transition);
}
.scp-news-card:hover .scp-news-thumb {
transform: scale(1.05);
}
.scp-news-no-thumb {
background: linear-gradient(135deg, var(--scp-gray-800), var(--scp-gray-700));
}
.scp-news-placeholder {
width: 100%;
height: 100%;
}
.scp-news-card-body {
padding: 24px;
}
.scp-news-date {
font-size: 0.8rem;
color: var(--scp-red);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.scp-news-card-title {
font-size: 1.2rem;
font-weight: 700;
margin: 8px 0 12px;
}
.scp-news-card-title a {
color: var(--scp-white);
text-decoration: none;
transition: color var(--scp-transition);
}
.scp-news-card-title a:hover {
color: var(--scp-red);
}
.scp-news-card-excerpt {
color: var(--scp-gray-400);
font-size: 0.95rem;
line-height: 1.6;
margin: 0 0 16px;
}
.scp-news-read-more {
color: var(--scp-red);
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: color var(--scp-transition);
}
.scp-news-read-more:hover {
color: var(--scp-red-hover);
}
.scp-news-view-all {
text-align: center;
margin-top: 40px;
} .scp-page-heading {
font-size: 2.4rem;
font-weight: 800;
color: var(--scp-white);
margin: 40px 0 36px;
text-transform: uppercase;
} .scp-news-archive {
background: var(--scp-bg-dark);
color: var(--scp-gray-200);
font-family: var(--scp-font);
padding: 0 0 80px;
min-height: 60vh;
} .scp-single-news {
background: var(--scp-bg-dark);
color: var(--scp-gray-200);
font-family: var(--scp-font);
padding: 40px 0 80px;
min-height: 60vh;
}
.scp-back-link {
display: inline-block;
color: var(--scp-red);
text-decoration: none;
font-weight: 600;
margin-bottom: 28px;
transition: color var(--scp-transition);
}
.scp-back-link:hover {
color: var(--scp-red-hover);
}
.scp-single-featured-image {
border-radius: var(--scp-radius-lg);
overflow: hidden;
margin-bottom: 32px;
box-shadow: var(--scp-shadow-lg);
}
.scp-single-thumb {
width: 100%;
max-height: 480px;
object-fit: cover;
display: block;
}
.scp-single-title {
font-size: 2.4rem;
font-weight: 800;
color: var(--scp-white);
margin: 0 0 16px;
}
.scp-single-meta {
color: var(--scp-gray-400);
font-size: 0.9rem;
margin-bottom: 32px;
}
.scp-meta-divider {
margin: 0 8px;
}
.scp-single-content {
font-size: 1.05rem;
line-height: 1.8;
color: var(--scp-gray-200);
max-width: 800px;
}
.scp-single-content p {
margin-bottom: 20px;
}
.scp-single-content img {
max-width: 100%;
height: auto;
border-radius: var(--scp-radius);
}
.scp-single-footer {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--scp-gray-800);
} .scp-pagination {
text-align: center;
margin-top: 48px;
}
.scp-pagination a,
.scp-pagination span {
display: inline-block;
padding: 8px 16px;
margin: 0 4px;
border-radius: var(--scp-radius);
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
color: var(--scp-gray-300);
background: var(--scp-bg-card);
transition: all var(--scp-transition);
}
.scp-pagination .current,
.scp-pagination a:hover {
background: var(--scp-red);
color: var(--scp-white);
} .scp-empty-state {
text-align: center;
padding: 80px 24px;
}
.scp-empty-state h2 {
font-size: 1.6rem;
color: var(--scp-white);
margin-bottom: 8px;
}
.scp-empty-state p {
color: var(--scp-gray-400);
margin-bottom: 24px;
} .scp-login-prompt {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
background: var(--scp-bg-dark);
font-family: var(--scp-font);
padding: 40px 24px;
}
.scp-login-card {
background: var(--scp-bg-card);
border-radius: var(--scp-radius-lg);
padding: 48px;
max-width: 420px;
width: 100%;
text-align: center;
box-shadow: var(--scp-shadow-lg);
}
.scp-login-logo {
width: 80px;
height: auto;
margin-bottom: 20px;
}
.scp-login-card h2 {
font-size: 1.6rem;
font-weight: 700;
color: var(--scp-white);
margin-bottom: 8px;
}
.scp-login-card p {
color: var(--scp-gray-400);
margin-bottom: 24px;
}
.scp-login-card label {
display: block;
text-align: left;
color: var(--scp-gray-300);
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 6px;
}
.scp-login-card input[type="text"],
.scp-login-card input[type="password"] {
width: 100%;
padding: 12px 16px;
background: var(--scp-bg-surface);
border: 1px solid var(--scp-gray-700);
border-radius: var(--scp-radius);
color: var(--scp-white);
font-size: 1rem;
margin-bottom: 16px;
box-sizing: border-box;
transition: border-color var(--scp-transition);
}
.scp-login-card input:focus {
outline: none;
border-color: var(--scp-red);
}
.scp-login-card input[type="submit"] {
width: 100%;
padding: 14px;
background: var(--scp-red);
color: var(--scp-white);
border: none;
border-radius: var(--scp-radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background var(--scp-transition);
}
.scp-login-card input[type="submit"]:hover {
background: var(--scp-red-hover);
}
.scp-login-card .login-remember {
text-align: left;
margin-bottom: 16px;
color: var(--scp-gray-400);
} .scp-access-denied {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
background: var(--scp-bg-dark);
font-family: var(--scp-font);
padding: 40px 24px;
}
.scp-access-denied-card {
background: var(--scp-bg-card);
border-radius: var(--scp-radius-lg);
padding: 48px;
max-width: 420px;
width: 100%;
text-align: center;
box-shadow: var(--scp-shadow-lg);
}
.scp-denied-logo {
width: 80px;
height: auto;
margin-bottom: 20px;
}
.scp-access-denied-card h2 {
font-size: 1.6rem;
font-weight: 700;
color: var(--scp-red);
margin-bottom: 12px;
}
.scp-access-denied-card p {
color: var(--scp-gray-400);
margin-bottom: 12px;
}  .scp-standalone {
margin: 0;
padding: 0;
background: var(--scp-bg-dark);
color: var(--scp-gray-200);
font-family: var(--scp-font);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.scp-standalone *,
.scp-standalone *::before,
.scp-standalone *::after {
box-sizing: border-box;
} .scp-site-header {
background: var(--scp-bg-surface);
border-bottom: 3px solid var(--scp-red);
position: sticky;
top: 0;
z-index: 1000;
}
.scp-site-header-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.scp-site-brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
flex-shrink: 0;
}
.scp-site-logo {
width: 44px;
height: 44px;
object-fit: contain;
border-radius: 50%;
}
.scp-site-name {
font-size: 1.2rem;
font-weight: 800;
color: var(--scp-white);
text-transform: uppercase;
letter-spacing: 0.5px;
} .scp-site-nav {
display: flex;
align-items: center;
gap: 4px;
}
.scp-site-nav-link {
padding: 8px 18px;
color: var(--scp-gray-300);
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
border-radius: var(--scp-radius);
transition: all var(--scp-transition);
white-space: nowrap;
}
.scp-site-nav-link:hover {
background: var(--scp-bg-card);
color: var(--scp-white);
}
.scp-site-nav-link.scp-nav-current {
background: var(--scp-red);
color: var(--scp-white);
}
.scp-site-nav-link.scp-nav-back {
color: var(--scp-gray-500);
font-size: 0.8rem;
margin-left: 8px;
border: 1px solid var(--scp-gray-700);
}
.scp-site-nav-link.scp-nav-back:hover {
border-color: var(--scp-gray-500);
color: var(--scp-white);
background: var(--scp-bg-card);
} .scp-mobile-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.scp-mobile-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--scp-white);
border-radius: 2px;
transition: all 0.25s ease;
}
.scp-toggle-active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.scp-toggle-active span:nth-child(2) {
opacity: 0;
}
.scp-toggle-active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
} .scp-site-main {
min-height: calc(100vh - 72px - 200px);
}
.scp-site-main-portal {
min-height: calc(100vh - 72px);
} .scp-site-footer {
background: var(--scp-bg-surface);
border-top: 1px solid var(--scp-gray-800);
padding: 48px 0 32px;
margin-top: 0;
}
.scp-site-footer-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
text-align: center;
}
.scp-footer-brand {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 20px;
}
.scp-footer-logo {
width: 36px;
height: 36px;
object-fit: contain;
border-radius: 50%;
opacity: 0.8;
}
.scp-footer-name {
font-size: 1rem;
font-weight: 700;
color: var(--scp-gray-300);
}
.scp-footer-links {
display: flex;
justify-content: center;
gap: 24px;
margin-bottom: 20px;
}
.scp-footer-links a {
color: var(--scp-gray-400);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
transition: color var(--scp-transition);
}
.scp-footer-links a:hover {
color: var(--scp-red);
}
.scp-footer-copy {
color: var(--scp-gray-600);
font-size: 0.8rem;
margin: 0;
} @media (max-width: 768px) {
.scp-hero-heading {
font-size: 2.2rem;
}
.scp-hero-title {
font-size: 1.2rem;
}
.scp-hero-image {
min-height: 400px;
}
.scp-hero-inner {
padding: 48px 20px;
}
.scp-news-grid {
grid-template-columns: 1fr;
}
.scp-gallery-2,
.scp-gallery-3 {
grid-template-columns: 1fr;
}
.scp-single-title {
font-size: 1.8rem;
}
.scp-page-heading {
font-size: 1.8rem;
} .scp-site-name {
font-size: 1rem;
}
.scp-mobile-toggle {
display: flex;
}
.scp-site-nav {
display: none;
position: absolute;
top: 72px;
left: 0;
right: 0;
background: var(--scp-bg-surface);
flex-direction: column;
padding: 16px 24px 24px;
border-bottom: 3px solid var(--scp-red);
box-shadow: var(--scp-shadow-lg);
z-index: 999;
}
.scp-site-nav.scp-nav-open {
display: flex;
}
.scp-site-nav-link {
padding: 12px 16px;
font-size: 1rem;
border-radius: var(--scp-radius);
}
.scp-site-nav-link.scp-nav-back {
margin-left: 0;
margin-top: 8px;
} .scp-footer-links {
flex-direction: column;
gap: 12px;
}
.scp-footer-brand {
flex-direction: column;
gap: 8px;
}
}