573 lines
9.5 KiB
CSS
573 lines
9.5 KiB
CSS
/* === GLOBAL DARK THEME ===================================== */
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #000000;
|
|
color: #e6e6e6;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
"Helvetica Neue", Arial, sans-serif;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
a {
|
|
color: #ffcc66;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
color: #ffe299;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* === GLOBAL SHELL FADE-IN ================================= */
|
|
|
|
.cd-header,
|
|
.cd-main,
|
|
.cd-footer {
|
|
opacity: 0;
|
|
transform: translateY(4px);
|
|
transition:
|
|
opacity 1.0s ease-out,
|
|
transform 1.0s ease-out;
|
|
}
|
|
|
|
body.cd-ready .cd-header,
|
|
body.cd-ready .cd-main,
|
|
body.cd-ready .cd-footer {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
|
|
/* === HEADER (desktop) ===================================== */
|
|
|
|
.cd-header {
|
|
background: #ffffff;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
position: relative;
|
|
z-index: 500; /* ensure dropdown is above hero image */
|
|
}
|
|
|
|
.cd-header-inner {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0.75rem 1.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.cd-logo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.cd-logo-image {
|
|
height: 72px;
|
|
width: auto;
|
|
display: block;
|
|
}
|
|
|
|
.cd-site-title {
|
|
display: none;
|
|
}
|
|
|
|
.cd-nav { }
|
|
|
|
.cd-nav-list {
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 1.8rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.cd-nav-item a {
|
|
color: #444;
|
|
text-decoration: none;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.cd-nav-item a:hover {
|
|
color: #000;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.cd-nav-active a {
|
|
color: #000;
|
|
border-bottom: 2px solid #000;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* === DESKTOP "Mehr" DROPDOWN =============================== */
|
|
|
|
.cd-nav-more {
|
|
position: relative;
|
|
}
|
|
|
|
.cd-nav-more-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font: inherit;
|
|
color: #444;
|
|
cursor: default;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.cd-nav-more-label::after {
|
|
content: "▾";
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
.cd-nav-more-menu {
|
|
position: absolute;
|
|
top: 120%;
|
|
right: 0;
|
|
min-width: 260px;
|
|
background: #ffffff;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 6px;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
|
|
margin: 0;
|
|
padding: 0.35rem 0;
|
|
list-style: none;
|
|
display: none;
|
|
z-index: 200;
|
|
}
|
|
|
|
.cd-nav-more-menu .cd-nav-item a {
|
|
display: block;
|
|
padding: 0.35rem 0.75rem;
|
|
font-size: 0.9rem;
|
|
color: #333;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.cd-nav-more-menu .cd-nav-item a:hover {
|
|
background: #f4f4f4;
|
|
color: #000;
|
|
}
|
|
|
|
/* Show dropdown on hover (desktop) */
|
|
.cd-nav-more:hover .cd-nav-more-menu {
|
|
display: block;
|
|
}
|
|
|
|
/* Hamburger (desktop hidden) */
|
|
|
|
.cd-nav-toggle {
|
|
display: none;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
.cd-nav-toggle-bar {
|
|
display: block;
|
|
width: 20px;
|
|
height: 2px;
|
|
margin: 3px 0;
|
|
background: #333;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* === MAIN LAYOUT ========================================== */
|
|
|
|
.cd-main {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 2.5rem 1.25rem 3.5rem;
|
|
}
|
|
|
|
.cd-main h1,
|
|
.cd-main h2,
|
|
.cd-main h3,
|
|
.cd-main h4 {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.cd-main p {
|
|
color: #e0e0e0;
|
|
margin: 0 0 0.9rem;
|
|
}
|
|
|
|
/* === FOOTER =============================================== */
|
|
|
|
.cd-footer {
|
|
border-top: 1px solid #222;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.cd-footer-inner {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
padding: 1rem 1.25rem;
|
|
font-size: 0.85rem;
|
|
color: #aaaaaa;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.cd-footer-links {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.cd-footer-inner a {
|
|
color: #ffcc66;
|
|
}
|
|
.cd-footer-inner a:hover {
|
|
color: #ffe299;
|
|
}
|
|
|
|
/* Shared link transitions */
|
|
.cd-nav-item a,
|
|
.cd-footer-inner a {
|
|
transition:
|
|
color 0.18s ease-out,
|
|
border-color 0.18s ease-out,
|
|
background-color 0.18s ease-out;
|
|
}
|
|
|
|
/* === BLOCKS BASE ========================================== */
|
|
|
|
.block {
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
/* Hero block (title + subtitle) */
|
|
|
|
.block-hero {
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-text h1 {
|
|
margin: 0 0 0.75rem;
|
|
font-size: 2.4rem;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
margin: 0;
|
|
font-size: 1.05rem;
|
|
color: #d0d0d0;
|
|
}
|
|
|
|
/* Prose */
|
|
|
|
.block-prose h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 0.75rem;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.prose-content p {
|
|
margin: 0 0 0.9rem;
|
|
}
|
|
|
|
/* Prose lists */
|
|
|
|
.prose-content ul,
|
|
.prose-content ol {
|
|
margin: 0 0 0.9rem 0;
|
|
padding-left: 1.3rem;
|
|
}
|
|
|
|
.prose-content li {
|
|
margin: 0.1rem 0 0.1rem 0;
|
|
}
|
|
|
|
/* === FULL-WIDTH IMAGE BLOCK (Option D) ==================== */
|
|
|
|
.block-full-width-image {
|
|
position: relative;
|
|
margin-bottom: 2.7rem;
|
|
overflow: hidden; /* keep vignette & shadow inside block */
|
|
}
|
|
|
|
.block-full-width-image .cd-figure {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Image itself: inset, rounded, border, shadow, base state */
|
|
.block-full-width-image img {
|
|
max-width: 860px;
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
margin: 0 auto;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
box-shadow: 0 0 40px rgba(0, 0, 0, 0.55);
|
|
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
transition:
|
|
opacity var(--fade-speed, 0.8s) ease,
|
|
transform var(--fade-speed, 0.8s) ease;
|
|
}
|
|
|
|
/* Vignette overlay */
|
|
.block-full-width-image::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
width: 100%;
|
|
max-width: 860px;
|
|
height: 100%;
|
|
border-radius: 14px;
|
|
pointer-events: none;
|
|
box-shadow:
|
|
inset 0 0 calc(60px * var(--vignette-strength, 0.75))
|
|
rgba(0, 0, 0, 1);
|
|
}
|
|
|
|
/* Caption */
|
|
.block-full-width-image figcaption {
|
|
text-align: center;
|
|
margin-top: 0.55rem;
|
|
color: #aaaaaa;
|
|
font-size: 0.9rem;
|
|
font-style: italic;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* Fade-in activated */
|
|
.block-full-width-image.cd-visible img {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* === CARD GRID ============================================ */
|
|
|
|
.block-card-grid h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.card-grid {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
align-items: stretch; /* equal-height rows */
|
|
}
|
|
|
|
.card-grid-cols-2 {
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
}
|
|
.card-grid-cols-3 {
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
}
|
|
.card-grid-cols-4 {
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
}
|
|
|
|
/* Card shell */
|
|
|
|
.card {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: #111111;
|
|
border: 1px solid #333333;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
|
|
transition:
|
|
box-shadow 0.22s ease-out,
|
|
transform 0.18s ease-out,
|
|
border-color 0.18s ease-out;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow:
|
|
0 8px 28px rgba(0, 0, 0, 0.6),
|
|
0 0 12px rgba(255, 204, 102, 0.15);
|
|
border-color: #555555;
|
|
}
|
|
|
|
/* Card image: uniform heights */
|
|
|
|
.card-image {
|
|
height: 260px;
|
|
overflow: hidden;
|
|
background: #000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.card-image img {
|
|
height: 100%;
|
|
width: auto;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
/* Card body & text */
|
|
|
|
.card-body {
|
|
padding: 1rem 1.1rem 1.1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
.card-title {
|
|
margin: 0 0 0.5rem;
|
|
font-size: 1.05rem;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.card-text {
|
|
font-size: 0.95rem;
|
|
color: #d2d2d2;
|
|
}
|
|
|
|
/* Lists inside cards */
|
|
|
|
.card-text ul,
|
|
.card-text ol {
|
|
margin: 0.5rem 0 0.9rem 0;
|
|
padding-left: 1.4rem;
|
|
}
|
|
|
|
.card-text li {
|
|
margin: 0.25rem 0;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.card-text ul li::marker {
|
|
color: #ffcc66;
|
|
font-size: 1.05em;
|
|
}
|
|
|
|
/* Card actions: button at bottom, centered */
|
|
|
|
.card-actions {
|
|
margin-top: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Frosted-glass button */
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 0.45rem 1.2rem;
|
|
border-radius: 24px;
|
|
|
|
background: rgba(255, 255, 255, 0.12);
|
|
backdrop-filter: blur(4px);
|
|
|
|
color: #ffffff;
|
|
border: 1px solid rgba(255, 255, 255, 0.28);
|
|
text-decoration: none;
|
|
font-size: 0.92rem;
|
|
|
|
transition:
|
|
background-color 0.22s ease,
|
|
border-color 0.22s ease,
|
|
box-shadow 0.25s ease,
|
|
transform 0.18s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: rgba(255, 255, 255, 0.22);
|
|
border-color: rgba(255, 255, 255, 0.45);
|
|
box-shadow:
|
|
0 0 18px rgba(255, 255, 255, 0.25),
|
|
0 0 8px rgba(255, 204, 102, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Optional subtle divider under big grids */
|
|
.card-grid::after {
|
|
content: "";
|
|
display: block;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(255,255,255,0.05) 0%,
|
|
rgba(255,255,255,0.18) 50%,
|
|
rgba(255,255,255,0.05) 100%
|
|
);
|
|
margin: 2.5rem 0;
|
|
}
|
|
|
|
/* === MOBILE HEADER / NAV ================================= */
|
|
|
|
@media (max-width: 800px) {
|
|
.cd-header-inner {
|
|
padding: 0.5rem 0.9rem;
|
|
}
|
|
|
|
.cd-logo-image {
|
|
height: 54px;
|
|
}
|
|
|
|
.cd-nav-toggle {
|
|
display: inline-block;
|
|
}
|
|
|
|
.cd-nav {
|
|
position: fixed;
|
|
top: 64px;
|
|
left: 0;
|
|
right: 0;
|
|
background: #ffffff;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
transform: translateY(-110%);
|
|
transition: transform 0.18s ease-out;
|
|
z-index: 100;
|
|
}
|
|
|
|
body.cd-nav-open .cd-nav {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.cd-nav-list {
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: 0.5rem 1rem 0.75rem;
|
|
}
|
|
|
|
.cd-nav-item a {
|
|
display: block;
|
|
padding: 0.3rem 0;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* Mobile: Mehr becomes inline list items */
|
|
|
|
.cd-nav-more {
|
|
position: static;
|
|
}
|
|
|
|
.cd-nav-more-label {
|
|
display: none;
|
|
}
|
|
|
|
.cd-nav-more-menu {
|
|
position: static;
|
|
border: none;
|
|
box-shadow: none;
|
|
display: block !important;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.cd-nav-more-menu .cd-nav-item a {
|
|
padding-left: 0;
|
|
}
|
|
}
|