ui(site-b): 💄 Enhance visual styling and interactivity in Site B with updated CSS and JavaScript
Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
This commit is contained in:
autocommit
parent
5dfca4fdca
commit
dc6ceb1ad7
2 changed files with 683 additions and 0 deletions
84
drafts/site-b/script.js
Normal file
84
drafts/site-b/script.js
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
// Magic Civilization: Age of Dwarves - Landing Site
|
||||
// Minimal interactive enhancements
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Smooth scroll behavior for internal links (fallback for older browsers)
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
const href = this.getAttribute('href');
|
||||
if (href !== '#') {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(href);
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Lazy-load intersection observer for subtle fade-in on scroll
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.animation = 'fadeInUp 0.6s ease forwards';
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe all major content blocks
|
||||
document.querySelectorAll('.layer, .clan-card, .age-card').forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Add animation keyframes if not present
|
||||
if (!document.getElementById('anim-styles')) {
|
||||
const style = document.createElement('style');
|
||||
style.id = 'anim-styles';
|
||||
style.textContent = `
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
// Simple analytics event tracking (stub for future integration)
|
||||
window.trackEvent = function(eventName, eventData) {
|
||||
console.log('Event:', eventName, eventData);
|
||||
// Replace with actual analytics call when ready
|
||||
};
|
||||
|
||||
// Track button clicks
|
||||
document.querySelectorAll('a.btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const label = this.textContent.trim();
|
||||
window.trackEvent('cta_click', { label: label });
|
||||
});
|
||||
});
|
||||
|
||||
// Track platform badge clicks
|
||||
document.querySelectorAll('.platform-badge').forEach(badge => {
|
||||
badge.addEventListener('click', function() {
|
||||
const platform = this.textContent.trim();
|
||||
window.trackEvent('platform_click', { platform: platform });
|
||||
});
|
||||
});
|
||||
|
||||
console.log('Age of Dwarves landing site initialized.');
|
||||
})();
|
||||
599
drafts/site-b/styles.css
Normal file
599
drafts/site-b/styles.css
Normal file
|
|
@ -0,0 +1,599 @@
|
|||
/* ============================================================================
|
||||
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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue