/* ============================================ smartgordon.css — Shared Design System For the Smart-Gordon family of sites. Sites: - dereksmartgordon.com (professional, light) - couldbe.cool (experiments, dark/playful) - bellabotgordon.wpcomstaging.com (AI, dark/warm) Usage: ============================================ */ /* --- Fonts --- */ @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap'); /* --- CSS Custom Properties --- */ :root { /* Typography */ --sg-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --sg-font-mono: 'Space Mono', 'SF Mono', 'Consolas', monospace; /* Spacing scale */ --sg-space-xs: 4px; --sg-space-sm: 8px; --sg-space-md: 16px; --sg-space-lg: 24px; --sg-space-xl: 32px; --sg-space-2xl: 48px; --sg-space-3xl: 64px; --sg-space-4xl: 80px; /* Content width */ --sg-content-width: 680px; --sg-wide-width: 1100px; /* Transitions */ --sg-transition: 0.2s ease; /* Border radius */ --sg-radius-sm: 4px; --sg-radius-md: 8px; --sg-radius-lg: 12px; } /* --- Theme: Light (dereksmartgordon.com) --- */ [data-sg-theme="light"], :root { --sg-bg: #fafaf8; --sg-bg-subtle: #f0efed; --sg-bg-surface: #ffffff; --sg-text: #2a2a28; --sg-text-muted: #6b6965; --sg-text-faint: #9b9790; --sg-accent: #2563eb; --sg-accent-hover: #1d4ed8; --sg-border: #e5e4e1; --sg-border-subtle: #ededeb; } /* --- Theme: Dark (base for bella & cool) --- */ [data-sg-theme="dark"] { --sg-bg: #0d0d0d; --sg-bg-subtle: #1a1a1a; --sg-bg-surface: #161616; --sg-text: #e0d8cf; --sg-text-muted: #b0a898; --sg-text-faint: #555555; --sg-accent: #e8a849; --sg-accent-hover: #f0c060; --sg-border: #2a2520; --sg-border-subtle: #1f1c18; } /* --- Theme: Bella (bellabotgordon) --- */ [data-sg-theme="bella"] { --sg-bg: #0d0d0d; --sg-bg-subtle: #1a1a1a; --sg-bg-surface: #161616; --sg-text: #e0d8cf; --sg-text-muted: #b0a898; --sg-text-faint: #555555; --sg-accent: #e8a849; --sg-accent-hover: #f0c060; --sg-border: #2a2520; --sg-border-subtle: #1f1c18; } /* --- Theme: Cool (couldbe.cool) --- */ [data-sg-theme="cool"] { --sg-bg: #0a0a0f; --sg-bg-subtle: #14141f; --sg-bg-surface: #1a1a28; --sg-text: #e0e0ea; --sg-text-muted: #9898b0; --sg-text-faint: #555568; --sg-accent: #7c5cff; --sg-accent-hover: #9b80ff; --sg-border: #252535; --sg-border-subtle: #1c1c2a; } /* --- Reset & Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--sg-font-sans); font-size: 17px; line-height: 1.75; color: var(--sg-text-muted); background: var(--sg-bg); } /* --- Typography --- */ h1, h2, h3, h4, h5, h6 { color: var(--sg-text); font-family: var(--sg-font-sans); line-height: 1.25; margin-bottom: var(--sg-space-md); } h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 300; letter-spacing: -1.5px; line-height: 1.15; } h2 { font-family: var(--sg-font-mono); font-size: clamp(20px, 3vw, 24px); font-weight: 400; color: var(--sg-accent); letter-spacing: -0.5px; text-transform: lowercase; } h3 { font-family: var(--sg-font-mono); font-size: 18px; font-weight: 700; } p { margin-bottom: var(--sg-space-md); max-width: var(--sg-content-width); } strong { color: var(--sg-text); font-weight: 600; } em { font-style: italic; } small, .sg-small { font-size: 14px; color: var(--sg-text-faint); } .sg-mono { font-family: var(--sg-font-mono); } /* --- Links --- */ a { color: var(--sg-accent); text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0); transition: color var(--sg-transition), border-color var(--sg-transition); } a:hover { color: var(--sg-accent-hover); border-bottom-color: var(--sg-accent-hover); } /* Underline links in body text, not in nav */ p a, li a { border-bottom-color: color-mix(in srgb, var(--sg-accent) 30%, transparent); } /* --- Layout --- */ .sg-container { max-width: var(--sg-content-width); margin: 0 auto; padding: 0 var(--sg-space-xl); } .sg-container-wide { max-width: var(--sg-wide-width); margin: 0 auto; padding: 0 var(--sg-space-xl); } /* --- Header --- */ .sg-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sg-space-lg) var(--sg-space-xl); border-bottom: 1px solid var(--sg-border-subtle); } .sg-site-title { font-family: var(--sg-font-mono); font-weight: 700; font-size: 18px; letter-spacing: -0.5px; color: var(--sg-text); } .sg-site-title a { color: var(--sg-text); border-bottom: none; } .sg-site-title a:hover { color: var(--sg-accent); } /* --- Nav --- */ .sg-nav { display: flex; gap: var(--sg-space-lg); align-items: center; } .sg-nav a { font-family: var(--sg-font-mono); font-size: 14px; color: var(--sg-text-muted); border-bottom: none; } .sg-nav a:hover { color: var(--sg-accent); } /* --- Footer --- */ .sg-footer { padding: var(--sg-space-2xl) var(--sg-space-xl); border-top: 1px solid var(--sg-border-subtle); text-align: center; font-family: var(--sg-font-mono); font-size: 13px; color: var(--sg-text-faint); } .sg-footer a { color: var(--sg-text-faint); border-bottom: none; } .sg-footer a:hover { color: var(--sg-accent); } /* --- Main Content --- */ .sg-main { padding: var(--sg-space-4xl) var(--sg-space-xl) var(--sg-space-3xl); max-width: var(--sg-content-width); margin: 0 auto; } /* --- Separator --- */ hr, .sg-separator { border: none; border-top: 1px solid var(--sg-border); margin: var(--sg-space-2xl) 0; } /* --- Lists --- */ ul, ol { padding-left: var(--sg-space-lg); margin-bottom: var(--sg-space-md); } li { margin-bottom: var(--sg-space-sm); } li strong { color: var(--sg-text); } /* --- Code --- */ code { font-family: var(--sg-font-mono); font-size: 0.9em; background: var(--sg-bg-subtle); padding: 2px 6px; border-radius: var(--sg-radius-sm); } pre { font-family: var(--sg-font-mono); font-size: 14px; background: var(--sg-bg-subtle); padding: var(--sg-space-lg); border-radius: var(--sg-radius-md); overflow-x: auto; margin-bottom: var(--sg-space-md); } pre code { background: none; padding: 0; } /* --- Cards (for couldbe.cool project grid) --- */ .sg-card { background: var(--sg-bg-surface); border: 1px solid var(--sg-border-subtle); border-radius: var(--sg-radius-lg); padding: var(--sg-space-lg); transition: border-color var(--sg-transition), transform var(--sg-transition); } .sg-card:hover { border-color: var(--sg-accent); transform: translateY(-2px); } .sg-card-title { font-family: var(--sg-font-mono); font-size: 16px; font-weight: 700; color: var(--sg-text); margin-bottom: var(--sg-space-sm); } .sg-card-desc { font-size: 15px; color: var(--sg-text-muted); line-height: 1.5; } .sg-card-tag { display: inline-block; font-family: var(--sg-font-mono); font-size: 12px; color: var(--sg-accent); background: color-mix(in srgb, var(--sg-accent) 10%, transparent); padding: 2px 8px; border-radius: var(--sg-radius-sm); margin-top: var(--sg-space-sm); } /* --- Grid --- */ .sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sg-space-lg); } /* --- Selection --- */ ::selection { background: var(--sg-accent); color: var(--sg-bg); } /* --- Scrollbar (dark themes) --- */ [data-sg-theme="dark"] ::-webkit-scrollbar, [data-sg-theme="bella"] ::-webkit-scrollbar, [data-sg-theme="cool"] ::-webkit-scrollbar { width: 6px; } [data-sg-theme="dark"] ::-webkit-scrollbar-track, [data-sg-theme="bella"] ::-webkit-scrollbar-track, [data-sg-theme="cool"] ::-webkit-scrollbar-track { background: var(--sg-bg); } [data-sg-theme="dark"] ::-webkit-scrollbar-thumb, [data-sg-theme="bella"] ::-webkit-scrollbar-thumb, [data-sg-theme="cool"] ::-webkit-scrollbar-thumb { background: var(--sg-border); border-radius: 3px; } /* --- Responsive --- */ @media (max-width: 600px) { h1 { font-size: 32px; } body { font-size: 16px; } .sg-header { padding: var(--sg-space-md); } .sg-main { padding: var(--sg-space-2xl) var(--sg-space-md); } .sg-grid { grid-template-columns: 1fr; } .sg-nav { gap: var(--sg-space-md); } }