Spaces:
Sleeping
Sleeping
| @import "tailwindcss"; | |
| /* ========================================================================== | |
| CivillySimplified — Professional News Site Theme | |
| ========================================================================== | |
| A clean, modern news-site design with: | |
| - Light/dark mode support (system preference + manual toggle) | |
| - Professional typography inspired by NYT/WaPo | |
| - City-branded accent colors | |
| - Responsive grid layouts | |
| ========================================================================== */ | |
| :root { | |
| /* Core palette */ | |
| --background: #ffffff; | |
| --background-secondary: #f8f9fa; | |
| --foreground: #111827; | |
| --foreground-secondary: #4b5563; | |
| --border: #e5e7eb; | |
| --border-light: #f3f4f6; | |
| /* Brand — default blue (overridden per city) */ | |
| --brand: #1a73e8; | |
| --brand-light: #e8f0fe; | |
| --brand-dark: #1557b0; | |
| --brand-muted: #6b93d6; | |
| /* Accents */ | |
| --accent-green: #059669; | |
| --accent-yellow: #d97706; | |
| --accent-red: #dc2626; | |
| --accent-purple: #7c3aed; | |
| /* Surfaces */ | |
| --card-bg: #ffffff; | |
| --card-border: #e5e7eb; | |
| --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); | |
| --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12); | |
| /* Typography */ | |
| --font-serif: 'Georgia', 'Times New Roman', serif; | |
| --font-sans: 'Inter', system-ui, -apple-system, sans-serif; | |
| --font-mono: 'JetBrains Mono', 'Fira Code', monospace; | |
| /* Sizes */ | |
| --max-width: 1280px; | |
| --header-height: 56px; | |
| } | |
| /* Dark mode */ | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --background: #0f172a; | |
| --background-secondary: #1e293b; | |
| --foreground: #f1f5f9; | |
| --foreground-secondary: #94a3b8; | |
| --border: #334155; | |
| --border-light: #1e293b; | |
| --card-bg: #1e293b; | |
| --card-border: #334155; | |
| --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); | |
| --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4); | |
| --brand-light: #1e3a5f; | |
| } | |
| } | |
| /* Force light mode */ | |
| :root.light-mode { | |
| --background: #ffffff; | |
| --background-secondary: #f8f9fa; | |
| --foreground: #111827; | |
| --foreground-secondary: #4b5563; | |
| --border: #e5e7eb; | |
| --border-light: #f3f4f6; | |
| --card-bg: #ffffff; | |
| --card-border: #e5e7eb; | |
| --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); | |
| --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12); | |
| --brand-light: #e8f0fe; | |
| } | |
| /* Force dark mode */ | |
| :root.dark-mode { | |
| --background: #0f172a; | |
| --background-secondary: #1e293b; | |
| --foreground: #f1f5f9; | |
| --foreground-secondary: #94a3b8; | |
| --border: #334155; | |
| --border-light: #1e293b; | |
| --card-bg: #1e293b; | |
| --card-border: #334155; | |
| --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); | |
| --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4); | |
| --brand-light: #1e3a5f; | |
| } | |
| /* ========================================================================== | |
| Base Styles | |
| ========================================================================== */ | |
| body { | |
| background-color: var(--background); | |
| color: var(--foreground); | |
| font-family: var(--font-sans); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* ========================================================================== | |
| Typography — News Site Style | |
| ========================================================================== */ | |
| .news-headline { | |
| font-family: var(--font-serif); | |
| font-weight: 700; | |
| line-height: 1.15; | |
| letter-spacing: -0.02em; | |
| } | |
| .news-headline-xl { | |
| font-family: var(--font-serif); | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| line-height: 1.1; | |
| letter-spacing: -0.03em; | |
| } | |
| .news-headline-lg { | |
| font-family: var(--font-serif); | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| line-height: 1.2; | |
| letter-spacing: -0.02em; | |
| } | |
| .news-headline-md { | |
| font-family: var(--font-serif); | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| line-height: 1.3; | |
| } | |
| .news-body { | |
| font-family: var(--font-serif); | |
| font-size: 1.0625rem; | |
| line-height: 1.7; | |
| color: var(--foreground-secondary); | |
| } | |
| .news-byline { | |
| font-size: 0.8125rem; | |
| color: var(--foreground-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .news-section-tag { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--brand); | |
| } | |
| /* ========================================================================== | |
| Components | |
| ========================================================================== */ | |
| /* Article Card */ | |
| .article-card { | |
| background: var(--card-bg); | |
| border: 1px solid var(--card-border); | |
| border-radius: 0.5rem; | |
| overflow: hidden; | |
| transition: box-shadow 0.2s, transform 0.2s; | |
| cursor: pointer; | |
| } | |
| .article-card:hover { | |
| box-shadow: var(--card-shadow-hover); | |
| transform: translateY(-1px); | |
| } | |
| .article-card-featured { | |
| border-left: 4px solid var(--brand); | |
| } | |
| /* Divider */ | |
| .news-divider { | |
| border: none; | |
| border-top: 1px solid var(--border); | |
| margin: 2rem 0; | |
| } | |
| .news-divider-thick { | |
| border: none; | |
| border-top: 3px solid var(--foreground); | |
| margin: 1.5rem 0; | |
| } | |
| /* Section Header */ | |
| .section-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| margin-bottom: 1.25rem; | |
| } | |
| .section-header::after { | |
| content: ''; | |
| flex: 1; | |
| height: 1px; | |
| background: var(--border); | |
| } | |
| /* Button */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.5rem 1rem; | |
| border-radius: 0.375rem; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| transition: all 0.15s; | |
| cursor: pointer; | |
| border: none; | |
| } | |
| .btn-primary { | |
| background: var(--brand); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background: var(--brand-dark); | |
| } | |
| .btn-secondary { | |
| background: var(--background-secondary); | |
| color: var(--foreground); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--brand); | |
| color: var(--brand); | |
| } | |
| /* Badge */ | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 0.125rem 0.5rem; | |
| border-radius: 9999px; | |
| font-size: 0.6875rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .badge-green { | |
| background: rgba(5, 150, 105, 0.1); | |
| color: var(--accent-green); | |
| border: 1px solid rgba(5, 150, 105, 0.2); | |
| } | |
| .badge-yellow { | |
| background: rgba(217, 119, 6, 0.1); | |
| color: var(--accent-yellow); | |
| border: 1px solid rgba(217, 119, 6, 0.2); | |
| } | |
| .badge-red { | |
| background: rgba(220, 38, 38, 0.1); | |
| color: var(--accent-red); | |
| border: 1px solid rgba(220, 38, 38, 0.2); | |
| } | |
| .badge-purple { | |
| background: rgba(124, 58, 237, 0.1); | |
| color: var(--accent-purple); | |
| border: 1px solid rgba(124, 58, 237, 0.2); | |
| } | |
| .badge-blue { | |
| background: rgba(37, 99, 235, 0.1); | |
| color: #3b82f6; | |
| border: 1px solid rgba(37, 99, 235, 0.2); | |
| } | |
| .badge-brand { | |
| background: var(--brand-light); | |
| color: var(--brand); | |
| border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent); | |
| } | |
| .badge-warning { | |
| background: rgba(217, 119, 6, 0.1); | |
| color: var(--accent-yellow); | |
| border: 1px solid rgba(217, 119, 6, 0.2); | |
| } | |
| /* Skeleton loading */ | |
| @keyframes shimmer { | |
| 0% { background-position: -200% 0; } | |
| 100% { background-position: 200% 0; } | |
| } | |
| .skeleton { | |
| background: linear-gradient(90deg, var(--background-secondary) 25%, var(--border) 50%, var(--background-secondary) 75%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| border-radius: 0.25rem; | |
| } | |
| /* City selector dropdown */ | |
| .city-selector { | |
| position: relative; | |
| } | |
| .city-selector select { | |
| appearance: none; | |
| background: var(--background-secondary); | |
| border: 1px solid var(--border); | |
| border-radius: 0.375rem; | |
| padding: 0.375rem 2rem 0.375rem 0.75rem; | |
| font-size: 0.8125rem; | |
| color: var(--foreground); | |
| cursor: pointer; | |
| transition: border-color 0.15s; | |
| } | |
| .city-selector select:hover { | |
| border-color: var(--brand); | |
| } | |
| .city-selector::after { | |
| content: '▾'; | |
| position: absolute; | |
| right: 0.625rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| font-size: 0.75rem; | |
| color: var(--foreground-secondary); | |
| pointer-events: none; | |
| } | |
| /* Theme toggle */ | |
| .theme-toggle { | |
| background: none; | |
| border: 1px solid var(--border); | |
| border-radius: 0.375rem; | |
| padding: 0.375rem; | |
| cursor: pointer; | |
| color: var(--foreground-secondary); | |
| transition: all 0.15s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 32px; | |
| height: 32px; | |
| } | |
| .theme-toggle:hover { | |
| border-color: var(--brand); | |
| color: var(--brand); | |
| } | |
| /* Responsive grid */ | |
| .news-grid { | |
| display: grid; | |
| gap: 1.5rem; | |
| } | |
| .news-grid-2 { | |
| grid-template-columns: 1fr; | |
| } | |
| @media (min-width: 768px) { | |
| .news-grid-2 { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| .news-grid-3 { | |
| grid-template-columns: 1fr; | |
| } | |
| @media (min-width: 768px) { | |
| .news-grid-3 { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .news-grid-3 { | |
| grid-template-columns: 1fr 1fr 1fr; | |
| } | |
| } | |
| /* Layout */ | |
| .news-layout { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| @media (min-width: 1024px) { | |
| .news-layout { | |
| grid-template-columns: 1fr 320px; | |
| } | |
| } | |
| /* Sidebar */ | |
| .sidebar-card { | |
| background: var(--background-secondary); | |
| border: 1px solid var(--border); | |
| border-radius: 0.5rem; | |
| padding: 1.25rem; | |
| } | |
| .sidebar-card h3 { | |
| font-size: 0.8125rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.06em; | |
| color: var(--foreground-secondary); | |
| margin-bottom: 0.75rem; | |
| padding-bottom: 0.5rem; | |
| border-bottom: 2px solid var(--brand); | |
| } | |