/* LOBEE.CA — Shared Design System ════════════════════════════════ All pages import this one file. Never hardcode colours or spacing directly in a page — use the CSS custom properties defined here. TO UPDATE THE COLOUR SCHEME: edit the variables in :root / [data-theme="dark"] TO UPDATE FONTS: edit --font-body and --font-display TO UPDATE SPACING / RADIUS: edit the --space-* and --radius-* tokens TO ADD A NEW PAGE: copy template.html, update the title/content, the header/footer are identical across every page. TABLE OF CONTENTS ───────────────── 1. Design tokens (colours, type scale, spacing, radius, transitions) 2. Dark-mode overrides 3. Base reset 4. Layout helpers 5. Header 6. Hero / page-header section 7. Card blocks 8. Tag pills 9. Back button 10. Article / content 11. Continue section 12. Footer 13. Theme toggle button 14. Utility classes */ /* ───────────────────────────────────────────────────── 1. DESIGN TOKENS — light mode (day) defaults ───────────────────────────────────────────────────── */ :root { /* Surfaces */ --color-bg: #f5f4ef; --color-surface: #ffffff; --color-surface-2: #f0efe9; --color-border: rgba(0, 0, 0, 0.08); --color-divider: rgba(0, 0, 0, 0.06); /* Text */ --color-text: #1a1916; --color-text-muted: #5a5854; --color-text-faint: #9a9894; /* Accent — orange brand */ --color-accent: #ea6f1a; --color-accent-hover:#c95a10; --color-accent-bg: rgba(234, 111, 26, 0.08); --color-accent-border: rgba(234, 111, 26, 0.22); /* Header */ --color-header-bg: rgba(245, 244, 239, 0.85); --color-header-border: rgba(0,0,0,0.08); /* Card */ --color-card-bg: #ffffff; --color-card-hover: #faf9f5; --color-card-border: rgba(0,0,0,0.07); --color-card-hover-border: rgba(234,111,26,0.30); --color-card-hover-shadow: 0 0 0 1px rgba(234,111,26,0.12), 0 8px 28px rgba(0,0,0,0.10); /* Footer */ --color-footer-bg: #eeede7; --color-footer-border: rgba(0,0,0,0.07); /* Type scale */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); /* Spacing (4 px base) */ --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; /* Border radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-full: 9999px; /* Transitions */ --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.07); --shadow-md: 0 4px 14px rgba(0,0,0,0.09); --shadow-lg: 0 12px 32px rgba(0,0,0,0.12); /* Fonts — loaded via Google Fonts in each HTML */ --font-body: 'Inter', system-ui, sans-serif; --font-display: 'Inter', system-ui, sans-serif; /* Layout widths */ --content-narrow: 640px; --content-default: 960px; --content-wide: 1200px; } /* ───────────────────────────────────────────────────── 2. DARK MODE OVERRIDES ───────────────────────────────────────────────────── */ [data-theme="dark"] { --color-bg: rgb(11, 19, 43); --color-surface: rgb(22, 30, 54); --color-surface-2: rgb(17, 25, 48); --color-border: rgba(255,255,255,0.07); --color-divider: rgba(255,255,255,0.05); --color-text: #e8e6e1; --color-text-muted: rgba(209,213,219,0.65); --color-text-faint: rgba(209,213,219,0.35); --color-accent: #fb923c; --color-accent-hover:#fba55a; --color-accent-bg: rgba(251,146,60,0.10); --color-accent-border: rgba(251,146,60,0.25); --color-header-bg: rgba(11, 19, 43, 0.85); --color-header-border: rgba(255,255,255,0.07); --color-card-bg: rgb(22, 30, 54); --color-card-hover: rgb(28, 38, 66); --color-card-border: rgba(255,255,255,0.08); --color-card-hover-border: rgba(251,146,60,0.35); --color-card-hover-shadow: 0 0 0 1px rgba(251,146,60,0.15), 0 8px 28px rgba(0,0,0,0.35); --color-footer-bg: rgba(5, 10, 24, 0.95); --color-footer-border: rgba(255,255,255,0.06); --shadow-sm: 0 1px 3px rgba(0,0,0,0.25); --shadow-md: 0 4px 14px rgba(0,0,0,0.35); --shadow-lg: 0 12px 32px rgba(0,0,0,0.45); } /* System preference fallback — no manual toggle yet */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: rgb(11, 19, 43); --color-surface: rgb(22, 30, 54); --color-surface-2: rgb(17, 25, 48); --color-border: rgba(255,255,255,0.07); --color-divider: rgba(255,255,255,0.05); --color-text: #e8e6e1; --color-text-muted: rgba(209,213,219,0.65); --color-text-faint: rgba(209,213,219,0.35); --color-accent: #fb923c; --color-accent-hover:#fba55a; --color-accent-bg: rgba(251,146,60,0.10); --color-accent-border: rgba(251,146,60,0.25); --color-header-bg: rgba(11, 19, 43, 0.85); --color-header-border: rgba(255,255,255,0.07); --color-card-bg: rgb(22, 30, 54); --color-card-hover: rgb(28, 38, 66); --color-card-border: rgba(255,255,255,0.08); --color-card-hover-border: rgba(251,146,60,0.35); --color-card-hover-shadow: 0 0 0 1px rgba(251,146,60,0.15), 0 8px 28px rgba(0,0,0,0.35); --color-footer-bg: rgba(5, 10, 24, 0.95); --color-footer-border: rgba(255,255,255,0.06); --shadow-sm: 0 1px 3px rgba(0,0,0,0.25); --shadow-md: 0 4px 14px rgba(0,0,0,0.35); --shadow-lg: 0 12px 32px rgba(0,0,0,0.45); } } /* ───────────────────────────────────────────────────── 3. BASE RESET ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: var(--space-16); } body { min-height: 100dvh; line-height: 1.65; font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background-color: var(--color-bg); transition: background-color 250ms ease, color 250ms ease; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } ul[role="list"], ol[role="list"] { list-style: none; } input, button, textarea, select { font: inherit; color: inherit; } h1,h2,h3,h4,h5,h6 { text-wrap: balance; line-height: 1.2; } p, li { text-wrap: pretty; } ::selection { background: var(--color-accent-bg); color: var(--color-text); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } button { cursor: pointer; background: none; border: none; } a, button, [role="button"] { transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition); } /* ───────────────────────────────────────────────────── 4. LAYOUT HELPERS ───────────────────────────────────────────────────── */ .container { max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-6); } .container--narrow { max-width: var(--content-narrow); margin-inline: auto; padding-inline: var(--space-6); } .container--default { max-width: var(--content-default); margin-inline: auto; padding-inline: var(--space-6); } @media (min-width: 640px) { .container, .container--narrow, .container--default { padding-inline: var(--space-8); } } /* ───────────────────────────────────────────────────── 5. HEADER ───────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-header-border); background: var(--color-header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); gap: var(--space-3); transition: background var(--transition), border-color var(--transition); } .site-header__brand { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); text-decoration: none; letter-spacing: -0.01em; } .site-header__right { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .site-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); font-weight: 500; } .site-nav a { color: var(--color-text-muted); text-decoration: none; } .site-nav a:hover { color: var(--color-accent); } .site-nav a[aria-current="page"] { color: var(--color-accent); font-weight: 600; } @media (min-width: 640px) { .site-header { padding-inline: var(--space-10); } } /* ───────────────────────────────────────────────────── 6. PAGE HEADER SECTION ───────────────────────────────────────────────────── */ .page-header { text-align: center; padding-block: var(--space-16); border-bottom: 1px solid var(--color-border); padding-inline: var(--space-4); } .page-header__title { font-size: var(--text-xl); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-2); } /* ───────────────────────────────────────────────────── 7. CARD BLOCKS ───────────────────────────────────────────────────── */ .card-block { display: block; border: 1px solid var(--color-card-border); background: var(--color-card-bg); padding: var(--space-8); border-radius: var(--radius-lg); text-decoration: none; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); position: relative; overflow: hidden; } .card-block:hover { background: var(--color-card-hover); border-color: var(--color-card-hover-border); box-shadow: var(--color-card-hover-shadow); transform: translateY(-2px); } .card-block:active { transform: translateY(0); box-shadow: none; } .card-block h4 { font-size: var(--text-base); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-2); } .card-block p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); line-height: 1.55; } .card-cta { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); letter-spacing: 0.01em; transition: gap var(--transition); } .card-block:hover .card-cta { gap: 0.55rem; } /* Card grid layouts */ .card-grid { display: grid; gap: var(--space-8); } @media (min-width: 640px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 640px) { .card-grid--3 { grid-template-columns: repeat(2, 1fr); } } /* ───────────────────────────────────────────────────── 8. TAG PILLS ───────────────────────────────────────────────────── */ .tag-pill { display: inline-block; font-size: var(--text-xs); font-weight: 500; background: var(--color-accent-bg); color: var(--color-accent); border: 1px solid var(--color-accent-border); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); text-decoration: none; transition: background var(--transition), border-color var(--transition); } .tag-pill:hover { background: rgba(234,111,26,0.16); border-color: rgba(234,111,26,0.45); } [data-theme="dark"] .tag-pill:hover { background: rgba(251,146,60,0.18); border-color: rgba(251,146,60,0.50); } /* ───────────────────────────────────────────────────── 9. BACK BUTTON ───────────────────────────────────────────────────── */ .btn-back { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 500; color: var(--color-accent); border: 1px solid var(--color-accent-border); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); text-decoration: none; margin-bottom: var(--space-6); transition: background var(--transition), border-color var(--transition); } .btn-back:hover { background: var(--color-accent-bg); border-color: rgba(234,111,26,0.50); } [data-theme="dark"] .btn-back:hover { border-color: rgba(251,146,60,0.55); } /* ───────────────────────────────────────────────────── 10. ARTICLE / CONTENT ───────────────────────────────────────────────────── */ .prose { max-width: var(--content-narrow); margin-inline: auto; padding-block: var(--space-16); padding-inline: var(--space-6); line-height: 1.7; color: var(--color-text); } @media (min-width: 640px) { .prose { padding-inline: var(--space-8); } } .prose h3 { font-size: var(--text-lg); font-weight: 600; color: var(--color-text); margin-top: var(--space-10); margin-bottom: var(--space-3); } .prose p { color: var(--color-text-muted); margin-bottom: var(--space-4); max-width: 68ch; } .prose ul { list-style: disc; padding-left: var(--space-5); margin-bottom: var(--space-4); color: var(--color-text-muted); } .prose li { margin-bottom: var(--space-2); } .prose img { border-radius: var(--radius-md); border: 1px solid var(--color-border); margin-block: var(--space-10); width: 100%; box-shadow: var(--shadow-md); } .prose-tags { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--color-divider); display: flex; flex-wrap: wrap; gap: var(--space-3); } .prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; } .prose a:hover { color: var(--color-accent-hover); } .prose .italic-note { font-style: italic; font-size: var(--text-sm); color: var(--color-text-faint); margin-bottom: var(--space-2); } /* ───────────────────────────────────────────────────── 11. CONTINUE / SECTION BLOCKS ───────────────────────────────────────────────────── */ .section-block { padding-bottom: var(--space-20); } .section-block h3 { font-size: var(--text-lg); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-6); } /* ───────────────────────────────────────────────────── 12. FOOTER ───────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--color-footer-border); background: var(--color-footer-bg); padding-block: var(--space-6); font-size: var(--text-sm); color: var(--color-text-faint); transition: background var(--transition), border-color var(--transition); } .site-footer__inner { max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); text-align: center; } @media (min-width: 640px) { .site-footer__inner { flex-direction: row; justify-content: space-between; text-align: left; padding-inline: var(--space-8); } } .site-footer__links { display: flex; gap: var(--space-6); justify-content: center; } @media (min-width: 640px) { .site-footer__links { justify-content: flex-end; } } .site-footer__links a { color: var(--color-text-faint); text-decoration: none; } .site-footer__links a:hover { color: var(--color-accent); } /* ───────────────────────────────────────────────────── 13. THEME TOGGLE ───────────────────────────────────────────────────── */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition); flex-shrink: 0; } .theme-toggle:hover { background: var(--color-surface-2); color: var(--color-accent); border-color: var(--color-accent-border); } .theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ───────────────────────────────────────────────────── 14. UTILITY CLASSES ───────────────────────────────────────────────────── */ .text-accent { color: var(--color-accent); } .text-muted { color: var(--color-text-muted); } .text-faint { color: var(--color-text-faint); } .space-y > * + * { margin-top: var(--space-4); } /* Hero image frame (home page) */ .hero-frame { display: block; width: 100%; max-width: 900px; margin-inline: auto; margin-top: var(--space-6); border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .hero-frame img { display: block; width: 100%; height: auto; border-radius: inherit; }