diff options
Diffstat (limited to 'dwalker.xyz/wwwroot/css/site.css')
| -rw-r--r-- | dwalker.xyz/wwwroot/css/site.css | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/dwalker.xyz/wwwroot/css/site.css b/dwalker.xyz/wwwroot/css/site.css new file mode 100644 index 0000000..93b6fd5 --- /dev/null +++ b/dwalker.xyz/wwwroot/css/site.css @@ -0,0 +1,84 @@ +:root { + color-scheme: light; + --bg: #f4f1ea; + --bg-accent: #e8dfd1; + --surface: rgba(255, 255, 255, 0.72); + --surface-border: rgba(34, 34, 34, 0.08); + --text: #171513; + --muted: #61584d; + --accent: #0e776d; +} + +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + margin: 0; + min-height: 100vh; + color: var(--text); + background: + radial-gradient(circle at top left, rgba(14, 119, 109, 0.18), transparent 32%), + radial-gradient(circle at bottom right, rgba(184, 129, 74, 0.18), transparent 28%), + linear-gradient(180deg, var(--bg) 0%, #fbfaf7 100%); + font-family: "Space Grotesk", "Segoe UI", sans-serif; +} + +a { + color: inherit; +} + +.app-shell { + min-height: 100vh; + display: grid; + place-items: center; + padding: 2rem; +} + +.hero { + width: min(100%, 48rem); + padding: clamp(2rem, 5vw, 4rem); + border: 1px solid var(--surface-border); + border-radius: 2rem; + background: var(--surface); + backdrop-filter: blur(18px); + box-shadow: 0 30px 80px rgba(34, 21, 9, 0.08); +} + +.eyebrow { + margin: 0 0 1rem; + color: var(--accent); + font-size: 0.9rem; + font-weight: 700; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.hero h1 { + margin: 0; + font-size: clamp(3rem, 8vw, 5.75rem); + line-height: 0.95; + letter-spacing: -0.05em; +} + +.lede { + max-width: 34rem; + margin: 1.5rem 0 0; + color: var(--muted); + font-size: clamp(1rem, 2vw, 1.15rem); + line-height: 1.7; +} + +@media (max-width: 640px) { + .app-shell { + padding: 1rem; + } + + .hero { + border-radius: 1.5rem; + } +} |
