/* ═══════════════════════════════════════════════════════════════ Amanda Fitch's Blog — Base CSS Design tokens, reset, and typography ═══════════════════════════════════════════════════════════════ */ /* ─── Fonts ─── Self-hosted in css/fonts.css, loaded via before this file in each page's . Not @import-ed here: an @import inside a stylesheet is render-blocking and serializes an extra round-trip before any text paints. */ /* ─── Design Tokens ─── */ :root { /* Colors — Aveyond Misty Forest Palette */ --col-bg: hsl(283, 22%, 93%); /* misty lavender — main bg */ --col-bg-warm: hsl(276, 20%, 96%); /* warm off-white for sections */ --col-surface: hsl(280, 18%, 88%); /* card/panel background */ --col-surface-light: hsl(280, 16%, 94%); /* slightly lighter background for post cards */ --col-surface-2: hsl(278, 22%, 82%); /* deeper panel / borders */ --col-purple: hsl(278, 42%, 52%); /* medium purple — primary */ --col-purple-deep: hsl(272, 38%, 38%); /* deep purple — headings */ --col-purple-light: hsl(284, 45%, 72%); /* light purple — hover states */ --col-purple-glow: hsl(280, 60%, 80%); /* glow for accents */ --col-green: hsl(158, 28%, 32%); /* forest green — secondary */ --col-green-sage: hsl(155, 22%, 52%); /* sage green — lighter */ --col-green-light: hsl(150, 25%, 70%); /* mint — highlights */ --col-yellow: hsl(44, 88%, 58%); /* warm gold — accent */ --col-yellow-light: hsl(46, 90%, 76%); /* light gold */ --col-yellow-dim: hsl(42, 60%, 75%); /* muted gold for tags */ --col-gray: hsl(270, 12%, 58%); /* lavender gray */ --col-gray-light: hsl(270, 15%, 78%); /* light gray */ --col-gray-deep: hsl(268, 16%, 42%); /* deep gray */ --col-text: hsl(272, 28%, 22%); /* dark purple-gray — body text */ --col-text-muted: hsl(270, 18%, 48%); /* muted text */ --col-text-light: hsl(280, 25%, 35%); /* medium text */ /* Category accent colors */ --col-ai: hsl(278, 42%, 52%); /* purple */ --col-pixel: hsl(44, 88%, 58%); /* gold */ --col-science: hsl(158, 28%, 32%); /* forest green */ --col-recipes: hsl(22, 65%, 52%); /* warm amber */ /* Typography */ --font-logo: 'Press Start 2P', monospace; --font-heading: 'VT323', monospace; --font-body: 'Lora', Georgia, serif; --size-xs: 0.75rem; --size-sm: 0.875rem; --size-base: 1rem; --size-lg: 1.125rem; --size-xl: 1.25rem; --size-2xl: 1.5rem; --size-3xl: 2rem; --size-4xl: 2.5rem; --size-5xl: 3rem; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Layout */ --max-width: 1100px; --max-width-post: 720px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* RPG Panel border */ --panel-border: 3px solid var(--col-purple-deep); --panel-shadow: 4px 4px 0 0 var(--col-purple-deep), inset 0 0 0 2px var(--col-purple-light); /* Shadows */ --shadow-sm: 2px 2px 0 0 var(--col-purple-deep); --shadow-md: 4px 4px 0 0 var(--col-purple-deep); --shadow-lg: 6px 6px 0 0 var(--col-purple-deep); --shadow-glow: 0 0 20px var(--col-purple-glow); /* Transitions */ --trans-fast: 120ms ease; --trans-normal: 240ms ease; --trans-slow: 360ms ease; } /* ─── CSS Reset ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Ensure [hidden] always beats component display rules */ [hidden] { display: none !important; } html { scroll-behavior: smooth; font-size: 16px; overflow-y: scroll; } body { background-color: var(--col-bg); color: var(--col-text); font-family: var(--font-body); font-size: var(--size-base); line-height: 1.7; min-height: 100vh; } img, svg { display: block; max-width: 100%; } a { color: var(--col-purple); text-decoration: underline; text-underline-offset: 3px; transition: color var(--trans-fast), opacity var(--trans-fast); } a:hover { color: var(--col-purple-deep); } ul, ol { padding-left: var(--space-6); } /* ─── Typography ─── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--col-purple-deep); line-height: 1.2; letter-spacing: 0.02em; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); } h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); } h4 { font-size: 1.4rem; } h5 { font-size: 1.2rem; } h6 { font-size: 1rem; } p { margin-bottom: var(--space-4); max-width: 70ch; } strong { font-weight: 600; color: var(--col-purple-deep); } code { font-family: 'Courier New', monospace; font-size: 0.9em; background: var(--col-surface); padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid var(--col-surface-2); color: var(--col-purple-deep); } pre { background: var(--col-surface); border: var(--panel-border); border-radius: var(--radius-md); padding: var(--space-6); overflow-x: auto; margin: var(--space-6) 0; } pre code { background: none; border: none; padding: 0; font-size: var(--size-sm); } hr { border: none; border-top: 2px dashed var(--col-surface-2); margin: var(--space-8) 0; } blockquote { border-left: 4px solid var(--col-purple); margin: var(--space-6) 0; padding: var(--space-4) var(--space-6); background: var(--col-surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; } /* ─── Utility Classes ─── */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-6); } .section { padding: var(--space-16) 0; } .section--alt { background: var(--col-bg-warm); } .text-center { text-align: center; } .text-muted { color: var(--col-text-muted); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ─── Pixel Art Panel (RPG Dialog Box) ─── */ .panel { background: var(--col-surface); border: var(--panel-border); border-radius: var(--radius-sm); box-shadow: var(--panel-shadow); padding: var(--space-6); position: relative; } .panel::before { content: '◆'; position: absolute; top: -14px; left: 12px; font-size: 0.75rem; color: var(--col-yellow); background: var(--col-surface); padding: 0 var(--space-2); } /* ─── Buttons ─── */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: 1.25rem; letter-spacing: 0.05em; padding: var(--space-3) var(--space-6); border: 3px solid currentColor; border-radius: var(--radius-sm); cursor: pointer; transition: transform var(--trans-fast), box-shadow var(--trans-fast); text-decoration: none; line-height: 1; background: none; } .btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 currentColor; text-decoration: none; } .btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 currentColor; } .btn--primary { background: var(--col-purple); color: white; border-color: var(--col-purple-deep); } .btn--primary:hover { color: white; background: var(--col-purple-deep); } .btn--secondary { background: var(--col-surface); color: var(--col-purple-deep); border-color: var(--col-purple-deep); } .btn--ghost { color: var(--col-purple); border-color: var(--col-purple); } .btn--green { background: var(--col-green); color: white; border-color: hsl(158, 32%, 22%); } .btn--small { font-size: 1rem; padding: var(--space-2) var(--space-4); } /* ─── Tags ─── */ .tag { display: inline-flex; align-items: center; font-family: var(--font-heading); font-size: 1rem; letter-spacing: 0.04em; padding: 2px var(--space-3); border-radius: 2px; border: 2px solid currentColor; text-decoration: none; transition: transform var(--trans-fast), box-shadow var(--trans-fast); line-height: 1.4; } .tag:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 0 currentColor; text-decoration: none; } .tag--ai { color: var(--col-ai); background: hsl(278, 42%, 92%); } .tag--imagination { color: hsl(220, 70%, 38%); background: hsl(220, 80%, 93%); } .tag--science { color: var(--col-green); background: hsl(158, 28%, 90%); } .tag--recipes { color: var(--col-recipes); background: hsl(22, 60%, 92%); } /* ─── Scrollbar ─── */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--col-surface); } ::-webkit-scrollbar-thumb { background: var(--col-purple); border-radius: 0; border: 2px solid var(--col-purple-deep); } ::-webkit-scrollbar-thumb:hover { background: var(--col-purple-deep); } /* ─── Selection ─── */ ::selection { background: var(--col-purple-glow); color: var(--col-purple-deep); } /* ─── Focus styles ─── */ :focus-visible { outline: 3px solid var(--col-yellow); outline-offset: 2px; }