599 lines
13 KiB
CSS
599 lines
13 KiB
CSS
/* ============================================================================
|
|
Magic Civilization: Age of Dwarves - Landing Site
|
|
Editorial typography, geological palette, strong vertical rhythm
|
|
============================================================================ */
|
|
|
|
:root {
|
|
/* Color palette: granite, rust, dwarven brass */
|
|
--color-bg: #1a1512;
|
|
--color-fg: #f5f1eb;
|
|
--color-accent: #c9a876;
|
|
--color-accent-dark: #8b6f47;
|
|
--color-stone: #3a3228;
|
|
--color-border: #4a4238;
|
|
|
|
/* Typography: EB Garamond (editorial), IBM Plex Mono (code/data) */
|
|
--font-serif: 'EB Garamond', serif;
|
|
--font-mono: 'IBM Plex Mono', monospace;
|
|
|
|
/* Spacing: 8px base unit for rhythm */
|
|
--spacing-unit: 8px;
|
|
--spacing-xs: calc(var(--spacing-unit) * 1); /* 8px */
|
|
--spacing-sm: calc(var(--spacing-unit) * 2); /* 16px */
|
|
--spacing-md: calc(var(--spacing-unit) * 3); /* 24px */
|
|
--spacing-lg: calc(var(--spacing-unit) * 4); /* 32px */
|
|
--spacing-xl: calc(var(--spacing-unit) * 6); /* 48px */
|
|
--spacing-2xl: calc(var(--spacing-unit) * 8); /* 64px */
|
|
|
|
/* Line height for editorial feel */
|
|
--lh-tight: 1.25;
|
|
--lh-body: 1.7;
|
|
--lh-loose: 1.9;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Global
|
|
============================================================================ */
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-serif);
|
|
font-size: 18px;
|
|
line-height: var(--lh-body);
|
|
color: var(--color-fg);
|
|
background-color: var(--color-bg);
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
a {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
a:hover {
|
|
color: #e6c89f;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Container & Layout
|
|
============================================================================ */
|
|
|
|
.container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 0 var(--spacing-lg);
|
|
}
|
|
|
|
/* ============================================================================
|
|
Hero
|
|
============================================================================ */
|
|
|
|
.hero {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-backdrop {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero-svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
text-align: center;
|
|
max-width: 720px;
|
|
padding: var(--spacing-xl);
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(2.5rem, 8vw, 4.5rem);
|
|
font-weight: 700;
|
|
line-height: var(--lh-tight);
|
|
margin-bottom: var(--spacing-lg);
|
|
letter-spacing: -0.02em;
|
|
color: #fff8ef;
|
|
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-size: clamp(1.1rem, 3vw, 1.35rem);
|
|
line-height: var(--lh-loose);
|
|
color: #e6d5c3;
|
|
margin-bottom: var(--spacing-xl);
|
|
font-weight: 400;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Buttons
|
|
============================================================================ */
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
font-family: var(--font-serif);
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
border: 2px solid var(--color-accent);
|
|
background-color: transparent;
|
|
color: var(--color-accent);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.btn:hover {
|
|
background-color: var(--color-accent);
|
|
color: var(--color-bg);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-primary {
|
|
border-color: #fff8ef;
|
|
color: #fff8ef;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #fff8ef;
|
|
color: var(--color-bg);
|
|
border-color: #fff8ef;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Sections
|
|
============================================================================ */
|
|
|
|
section {
|
|
padding: var(--spacing-2xl) 0;
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
section:first-of-type {
|
|
border-top: none;
|
|
}
|
|
|
|
h2 {
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
font-weight: 700;
|
|
line-height: var(--lh-tight);
|
|
margin-bottom: var(--spacing-md);
|
|
letter-spacing: -0.01em;
|
|
color: #fff8ef;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.35rem;
|
|
font-weight: 700;
|
|
line-height: var(--lh-tight);
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.section-intro {
|
|
font-size: 1.1rem;
|
|
line-height: var(--lh-loose);
|
|
color: #d4c4b9;
|
|
max-width: 650px;
|
|
margin-bottom: var(--spacing-2xl);
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* ============================================================================
|
|
World Layers Section
|
|
============================================================================ */
|
|
|
|
.world-layers {
|
|
background: linear-gradient(180deg, #1a1512 0%, #201c14 100%);
|
|
}
|
|
|
|
.layers-stack {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: var(--spacing-xl);
|
|
margin-top: var(--spacing-2xl);
|
|
}
|
|
|
|
.layer {
|
|
padding: var(--spacing-lg);
|
|
background-color: rgba(58, 50, 40, 0.5);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 3px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.layer:hover {
|
|
background-color: rgba(58, 50, 40, 0.8);
|
|
border-color: var(--color-accent);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.layer-number {
|
|
display: inline-block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: var(--color-accent);
|
|
margin-bottom: var(--spacing-sm);
|
|
padding: 4px 8px;
|
|
background-color: rgba(201, 168, 118, 0.1);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.layer h3 {
|
|
margin-bottom: var(--spacing-sm);
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.layer p {
|
|
font-size: 0.95rem;
|
|
line-height: var(--lh-loose);
|
|
color: #d4c4b9;
|
|
}
|
|
|
|
.layer-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-top: var(--spacing-md);
|
|
opacity: 0.8;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.layer:hover .layer-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Clans Section
|
|
============================================================================ */
|
|
|
|
.clans {
|
|
background: linear-gradient(180deg, #201c14 0%, #1a1512 100%);
|
|
}
|
|
|
|
.clans-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
margin-top: var(--spacing-2xl);
|
|
}
|
|
|
|
.clan-card {
|
|
padding: var(--spacing-lg);
|
|
border-left: 4px solid var(--clan-color);
|
|
background: linear-gradient(135deg,
|
|
rgba(58, 50, 40, 0.6) 0%,
|
|
rgba(42, 36, 32, 0.4) 100%);
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.clan-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: -100px;
|
|
width: 200px;
|
|
height: 200px;
|
|
background: radial-gradient(circle, var(--clan-color), transparent);
|
|
opacity: 0.05;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.clan-card:hover {
|
|
border-left-width: 6px;
|
|
background: linear-gradient(135deg,
|
|
rgba(58, 50, 40, 0.85) 0%,
|
|
rgba(42, 36, 32, 0.65) 100%);
|
|
}
|
|
|
|
.clan-card:hover::before {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.clan-header {
|
|
margin-bottom: var(--spacing-md);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.clan-header h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: var(--spacing-xs);
|
|
color: #fff8ef;
|
|
}
|
|
|
|
.clan-archetype {
|
|
display: inline-block;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.08em;
|
|
color: var(--color-accent);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.clan-card p {
|
|
position: relative;
|
|
z-index: 1;
|
|
font-size: 0.95rem;
|
|
line-height: var(--lh-loose);
|
|
color: #d4c4b9;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Future Ages Section
|
|
============================================================================ */
|
|
|
|
.future-ages {
|
|
background: linear-gradient(180deg, #1a1512 0%, #201c14 100%);
|
|
}
|
|
|
|
.ages-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: var(--spacing-xl);
|
|
margin-top: var(--spacing-2xl);
|
|
}
|
|
|
|
.age-card {
|
|
padding: var(--spacing-lg);
|
|
border: 2px solid var(--color-accent);
|
|
background-color: rgba(201, 168, 118, 0.08);
|
|
border-radius: 3px;
|
|
transition: all 0.3s ease;
|
|
text-align: center;
|
|
}
|
|
|
|
.age-card h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: var(--spacing-xs);
|
|
color: #fff8ef;
|
|
}
|
|
|
|
.age-status {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
color: var(--color-accent);
|
|
text-transform: uppercase;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.age-card p:last-child {
|
|
font-size: 0.95rem;
|
|
line-height: var(--lh-loose);
|
|
color: #d4c4b9;
|
|
}
|
|
|
|
.age-future {
|
|
opacity: 0.75;
|
|
border-color: rgba(201, 168, 118, 0.5);
|
|
background-color: rgba(201, 168, 118, 0.04);
|
|
}
|
|
|
|
.age-future:hover {
|
|
opacity: 1;
|
|
border-color: var(--color-accent);
|
|
background-color: rgba(201, 168, 118, 0.08);
|
|
}
|
|
|
|
/* ============================================================================
|
|
Footer
|
|
============================================================================ */
|
|
|
|
.footer {
|
|
background: linear-gradient(180deg, #0f0d0a 0%, #000 100%);
|
|
border-top: 2px solid var(--color-border);
|
|
padding: var(--spacing-2xl) 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer h3 {
|
|
font-size: 1.5rem;
|
|
color: #fff8ef;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.platforms {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--spacing-lg);
|
|
flex-wrap: wrap;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.platform-badge {
|
|
display: inline-block;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border: 1px solid var(--color-border);
|
|
background-color: rgba(58, 50, 40, 0.5);
|
|
color: var(--color-accent);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
border-radius: 3px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.platform-badge:hover {
|
|
background-color: rgba(201, 168, 118, 0.15);
|
|
border-color: var(--color-accent);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.footer-note {
|
|
font-size: 0.9rem;
|
|
color: #8b7355;
|
|
font-style: italic;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.copyright {
|
|
font-size: 0.85rem;
|
|
color: #6b5a4a;
|
|
font-family: var(--font-mono);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* ============================================================================
|
|
Responsive: Tablet (768px)
|
|
============================================================================ */
|
|
|
|
@media (max-width: 768px) {
|
|
:root {
|
|
font-size: 16px;
|
|
--spacing-lg: calc(var(--spacing-unit) * 3);
|
|
--spacing-xl: calc(var(--spacing-unit) * 5);
|
|
--spacing-2xl: calc(var(--spacing-unit) * 6);
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.layers-stack,
|
|
.clans-grid,
|
|
.ages-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.platforms {
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.clan-card {
|
|
border-left-width: 3px;
|
|
}
|
|
|
|
.clan-card:hover {
|
|
border-left-width: 4px;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Responsive: Mobile (480px)
|
|
============================================================================ */
|
|
|
|
@media (max-width: 480px) {
|
|
:root {
|
|
font-size: 15px;
|
|
--spacing-md: calc(var(--spacing-unit) * 2.5);
|
|
--spacing-lg: calc(var(--spacing-unit) * 2.5);
|
|
}
|
|
|
|
.container {
|
|
padding: 0 var(--spacing-md);
|
|
}
|
|
|
|
.hero-content {
|
|
padding: var(--spacing-lg) var(--spacing-md);
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-size: 0.95rem;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.35rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
section {
|
|
padding: var(--spacing-xl) 0;
|
|
}
|
|
|
|
.layer,
|
|
.clan-card,
|
|
.age-card {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.platforms {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.platform-badge {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.layer-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Print
|
|
============================================================================ */
|
|
|
|
@media print {
|
|
body {
|
|
background-color: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.hero-backdrop {
|
|
display: none;
|
|
}
|
|
|
|
section {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
a {
|
|
color: #000;
|
|
text-decoration: underline;
|
|
}
|
|
}
|