/* * css/theme.css — gismc Portfolio Theme (project-owned) * * Project-specific theme overrides for the gismc portfolio public site. * CSS variable DEFINITIONS now live in cms-core/css/theme-vars.css (framework-owned). * This file contains only: theme transitions and Tailwind dark mode override rules. * * Load order in HTML : * 1. /cms-core/css/theme-vars.css (framework — variable definitions) * 2. /css/theme.css (this file — project-specific rules) * 3. Tailwind CDN script * * To customize colors for this project, override --gismc-color-* variables * in a :root block in this file AFTER loading theme-vars.css. */ /* ============================================================================= PHASE 2: THEME TRANSITIONS Smooth background/color transitions on theme change for major structural elements. These are portfolio-specific selectors — project-owned. ============================================================================= */ html { transition: background-color 0.2s ease; } body, header, #mobile-menu { transition: background-color 0.2s ease, color 0.2s ease; } /* ============================================================================= PHASE 2: GLOBAL DARK MODE TAILWIND OVERRIDES Override hardcoded Tailwind color utilities so existing templates adapt to dark mode without requiring a full migration to th-* semantic classes. Specificity: [data-theme="dark"] .class = (0,2,0) — beats Tailwind's (0,1,0). Variables reference --gismc-color-* from cms-core/css/theme-vars.css. Decision notes (Phase 2): - Dark page-header banners (bg-gray-900, blog/work/contact) → kept dark in both themes. They are branded hero sections with overlaid photography. - Footer (bg-blue-950) → kept identical in both themes. Brand anchor. - Images → natural colors; no brightness filter applied. ============================================================================= */ /* --- Backgrounds --- */ [data-theme="dark"] .bg-white { background-color: var(--gismc-color-bg-surface); } [data-theme="dark"] .bg-white\/80 { background-color: rgba(30, 41, 59, 0.85); } [data-theme="dark"] .bg-gray-50 { background-color: var(--gismc-color-bg-page); } [data-theme="dark"] .bg-gray-100 { background-color: var(--gismc-color-bg-surface-alt); } [data-theme="dark"] .bg-gray-200 { background-color: var(--gismc-color-bg-surface-alt); } [data-theme="dark"] .bg-blue-100 { background-color: var(--gismc-color-primary-light); } /* --- Text --- */ [data-theme="dark"] .text-gray-900 { color: var(--gismc-color-text-primary); } [data-theme="dark"] .text-gray-800 { color: var(--gismc-color-text-primary); } [data-theme="dark"] .text-gray-700 { color: var(--gismc-color-text-secondary); } [data-theme="dark"] .text-gray-600 { color: var(--gismc-color-text-secondary); } [data-theme="dark"] .text-blue-950 { color: var(--gismc-color-text-heading); } [data-theme="dark"] .text-blue-900 { color: var(--gismc-color-text-heading); } [data-theme="dark"] .text-blue-800 { color: var(--gismc-color-primary-text); } [data-theme="dark"] .text-blue-700 { color: var(--gismc-color-primary-text); } [data-theme="dark"] .text-blue-600 { color: var(--gismc-color-primary); } /* --- Borders --- */ [data-theme="dark"] .border-gray-100 { border-color: var(--gismc-color-border); } [data-theme="dark"] .border-gray-200 { border-color: var(--gismc-color-border); } [data-theme="dark"] .border-gray-300 { border-color: var(--gismc-color-border); } /* --- Shadows --- */ [data-theme="dark"] .shadow-md { box-shadow: var(--gismc-shadow-md); } [data-theme="dark"] .shadow-lg { box-shadow: var(--gismc-shadow-lg); } [data-theme="dark"] .shadow-xl { box-shadow: var(--gismc-shadow-lg); } [data-theme="dark"] .shadow-2xl { box-shadow: var(--gismc-shadow-lg); } /* --- Form elements --- */ [data-theme="dark"] input:not([type="submit"]):not([type="button"]):not([type="reset"]), [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--gismc-color-bg-surface); color: var(--gismc-color-text-primary); border-color: var(--gismc-color-border); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--gismc-color-text-muted); opacity: 1; } /* --- Hover state overrides --- */ [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--gismc-color-bg-surface-alt); } [data-theme="dark"] .hover\:text-blue-900:hover { color: var(--gismc-color-text-primary); } [data-theme="dark"] .hover\:text-blue-800:hover { color: var(--gismc-color-primary); } [data-theme="dark"] .hover\:text-blue-700:hover { color: var(--gismc-color-primary); } [data-theme="dark"] .hover\:text-blue-600:hover { color: var(--gismc-color-primary); } [data-theme="dark"] .hover\:border-blue-600:hover { border-color: var(--gismc-color-primary); }