/* ============================================================ ACE LAND — main.css Design system: DM Serif Display + DM Sans, orange #F15A29 accent Supports light/dark mode via [data-theme] on ============================================================ */ /* ── 0. Custom Properties ───────────────────────────────── */ :root { /* Brand */ --accent: #F15A29; --accent-dim: #c94820; --accent-glow: rgba(241, 90, 41, 0.12); /* Light palette */ --bg: #FAFAF8; --bg-surface: #FFFFFF; --bg-subtle: #F3F2EF; --border: rgba(0, 0, 0, 0.08); --text-primary: #111110; --text-secondary: #5C5B57; --text-muted: #9C9B96; --navbar-bg: rgba(250, 250, 248, 0.88); --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); /* Type scale */ --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; /* Spacing */ --space-xs: 0.375rem; --space-sm: 0.75rem; --space-md: 1.25rem; --space-lg: 2rem; --space-xl: 3.5rem; --space-2xl: 6rem; /* Layout */ --navbar-h: 68px; --max-w: 1120px; --max-w-text: 720px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur-base: 250ms; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; } [data-theme="dark"] { --bg: #0E0E0D; --bg-surface: #171716; --bg-subtle: #1E1E1C; --border: rgba(255, 255, 255, 0.08); --text-primary: #F0EFEB; --text-secondary: #A8A79F; --text-muted: #6B6A64; --navbar-bg: rgba(14, 14, 13, 0.88); --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 20px rgba(0,0,0,0.4); --accent-glow: rgba(241, 90, 41, 0.18); } /* ── 1. Reset & Base ────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.7; color: var(--text-primary); background-color: var(--bg); transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); padding-top: var(--navbar-h); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* Focus visible */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* ── 2. Navbar ──────────────────────────────────────────── */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--navbar-h); background: var(--navbar-bg); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .navbar.is-scrolled { box-shadow: var(--shadow-md); } .navbar__inner { display: flex; align-items: center; gap: var(--space-lg); height: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-lg); } /* Logo */ .navbar__logo { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; transition: opacity var(--dur-fast) var(--ease); } .navbar__logo:hover { opacity: 0.82; } .navbar__wordmark { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1; } .navbar__wordmark-accent { color: var(--accent); } /* Nav list */ .navbar__nav { margin-left: auto; } .navbar__list { display: flex; align-items: center; gap: var(--space-xs); } .navbar__link { position: relative; display: inline-block; padding: var(--space-xs) var(--space-sm); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; color: var(--text-secondary); border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } /* Underline hover indicator */ .navbar__link::after { content: ''; position: absolute; bottom: 2px; left: var(--space-sm); right: var(--space-sm); height: 1.5px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease); } .navbar__link:hover { color: var(--text-primary); background: var(--bg-subtle); } .navbar__link:hover::after, .navbar__link--active::after { transform: scaleX(1); } .navbar__link--active { color: var(--text-primary); font-weight: 500; } /* Theme toggle */ .navbar__toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text-secondary); border: 1px solid var(--border); flex-shrink: 0; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .navbar__toggle:hover { color: var(--accent); background: var(--accent-glow); border-color: var(--accent); transform: rotate(20deg); } /* Show/hide sun vs moon based on theme */ [data-theme="light"] .navbar__toggle-icon--moon { display: none; } [data-theme="dark"] .navbar__toggle-icon--sun { display: none; } /* Mobile burger */ .navbar__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 4px; color: var(--text-primary); flex-shrink: 0; } .navbar__burger span { display: block; width: 100%; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease); } .navbar__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .navbar__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .navbar__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ── 3. Hero ────────────────────────────────────────────── */ .hero { position: relative; min-height: calc(92vh - var(--navbar-h)); display: flex; align-items: center; overflow: hidden; padding: var(--space-2xl) var(--space-lg); } .hero__inner { position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto; width: 100%; } .hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-lg); } .hero__eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--accent); } .hero__headline { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 6rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-lg); max-width: 14ch; } .hero__sub { font-size: 1.125rem; color: var(--text-secondary); max-width: 48ch; margin-bottom: var(--space-xl); font-weight: 300; line-height: 1.65; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); } /* Decorative accent blob */ .hero__accent { position: absolute; right: -10%; top: 50%; transform: translateY(-50%); width: clamp(300px, 45vw, 600px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at center, var(--accent-glow) 0%, transparent 70%); pointer-events: none; } /* ── 4. Buttons ─────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0.7rem 1.6rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); cursor: pointer; } .btn--primary { background: var(--accent); color: #FFFFFF; box-shadow: 0 1px 2px rgba(241,90,41,0.2); } .btn--primary:hover { background: var(--accent-dim); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(241,90,41,0.3); } .btn--ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border); } .btn--ghost:hover { background: var(--bg-subtle); border-color: var(--text-muted); transform: translateY(-1px); } /* ── 5. Page Layout ─────────────────────────────────────── */ .page__header { background: var(--bg-surface); border-bottom: 1px solid var(--border); padding: var(--space-2xl) var(--space-lg) var(--space-xl); } .page__header-inner { max-width: var(--max-w-text); margin: 0 auto; } .page__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--text-primary); } .page__subtitle { margin-top: var(--space-md); font-size: 1.1rem; color: var(--text-secondary); font-weight: 300; } .page__body { padding: var(--space-2xl) var(--space-lg); } .page__body-inner { max-width: var(--max-w-text); margin: 0 auto; } /* ── 6. Content / List Page ─────────────────────────────── */ .content-section { padding: var(--space-2xl) var(--space-lg); } .content-section__inner { max-width: var(--max-w-text); margin: 0 auto; } .list-page__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg); max-width: var(--max-w); margin: var(--space-xl) auto 0; padding: 0 var(--space-lg) var(--space-2xl); } /* ── 7. Card ────────────────────────────────────────────── */ .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); } .card__link { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-xl); height: 100%; } .card__date { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .card__title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.25; color: var(--text-primary); transition: color var(--dur-fast) var(--ease); } .card:hover .card__title { color: var(--accent); } .card__summary { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; } .card__cta { margin-top: auto; font-size: 0.85rem; font-weight: 500; color: var(--accent); letter-spacing: 0.01em; } /* ── 8. Prose ───────────────────────────────────────────── */ .prose { color: var(--text-secondary); } .prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--font-display); color: var(--text-primary); line-height: 1.2; letter-spacing: -0.015em; } .prose h2 { font-size: 1.9rem; margin: var(--space-xl) 0 var(--space-md); } .prose h3 { font-size: 1.4rem; margin: var(--space-lg) 0 var(--space-sm); } .prose p { margin-bottom: var(--space-md); } .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; transition: opacity var(--dur-fast); } .prose a:hover { opacity: 0.75; } .prose ul, .prose ol { margin: var(--space-md) 0; padding-left: 1.4em; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-bottom: var(--space-xs); } .prose blockquote { border-left: 3px solid var(--accent); padding: var(--space-sm) var(--space-lg); margin: var(--space-lg) 0; color: var(--text-muted); font-style: italic; } .prose hr { border: none; border-top: 1px solid var(--border); margin: var(--space-xl) 0; } .prose code { font-size: 0.875em; background: var(--bg-subtle); border-radius: var(--radius-sm); padding: 0.15em 0.4em; font-family: 'Courier New', monospace; } .prose pre { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-lg); overflow-x: auto; margin: var(--space-lg) 0; } .prose pre code { background: none; padding: 0; } /* ── 9. Footer ──────────────────────────────────────────── */ .footer { border-top: 1px solid var(--border); padding: var(--space-xl) var(--space-lg); background: var(--bg-surface); } .footer__inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; } .footer__copy { font-size: 0.85rem; color: var(--text-muted); } .footer__nav { display: flex; gap: var(--space-lg); } .footer__link { font-size: 0.85rem; color: var(--text-muted); transition: color var(--dur-fast) var(--ease); } .footer__link:hover { color: var(--accent); } /* ── 10. Mobile Responsive ──────────────────────────────── */ @media (max-width: 768px) { .navbar__nav { display: none; position: fixed; top: var(--navbar-h); left: 0; right: 0; background: var(--bg-surface); border-bottom: 1px solid var(--border); padding: var(--space-lg); box-shadow: var(--shadow-md); } .navbar__nav.is-open { display: block; } .navbar__list { flex-direction: column; align-items: flex-start; gap: var(--space-xs); } .navbar__link { display: block; padding: var(--space-sm) var(--space-md); width: 100%; } .navbar__burger { display: flex; } .navbar__toggle { margin-left: auto; } .hero { min-height: auto; padding: var(--space-xl) var(--space-md); } .list-page__grid { grid-template-columns: 1fr; padding: 0 var(--space-md) var(--space-xl); } .footer__inner { flex-direction: column; text-align: center; } } /* ── 11. Reduced Motion ─────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ── PNG Logo: light/dark switching ────────────────────────── */ .navbar__logo-img { height: 36px; width: auto; display: block; transition: opacity var(--dur-fast) var(--ease); } /* Light mode: show color, hide white */ [data-theme="light"] .navbar__logo-img--color { display: block; } [data-theme="light"] .navbar__logo-img--white { display: none; } /* Dark mode: show white, hide color */ [data-theme="dark"] .navbar__logo-img--color { display: none; } [data-theme="dark"] .navbar__logo-img--white { display: block; } /* Remove old wordmark styles now that logo is an image */ .navbar__wordmark { display: none; }