/* * SaigonHouse Theme — Design Tokens & Custom Styles * * CSS Custom Properties for the full color system. * Three naming conventions supported: * --color-* : brand/semantic colors (legacy, Tailwind origin) * --sh-* : surface/text/border (legacy theme tokens) * --pi-* : unified namespace (matches Pi ColorProvider) * * Dark mode: toggle .dark class on . * On admin pages, Pi ColorProvider overrides --pi-* via admin_head. */ /* Preflight Reset (replaces Tailwind's) */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; } body { line-height: inherit; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } img, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; } svg { max-width: 100%; } img, video { height: auto; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; appearance: button; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Restore list styles inside post content */ .entry-content ol { list-style: decimal; padding-left: 1.5em; } .entry-content ul { list-style: disc; padding-left: 1.5em; } .entry-content ol ol { list-style: lower-alpha; } .entry-content ul ul { list-style: circle; } .entry-content li { margin-bottom: 0.5em; } table { border-collapse: collapse; border-spacing: 0; } hr { height: 0; color: inherit; border-top-width: 1px; } b, strong { font-weight: bolder; } /* Base body colors */ body { background-color: var(--sh-bg, #f8fafc); color: var(--sh-text, #0f172a); overflow-x: hidden; } .dark body { background-color: var(--sh-bg, #0f172a); color: var(--sh-text, #f1f5f9); } /* Override WordPress Global Styles underline on links */ a:where(:not(.wp-element-button)) { text-decoration: none; } a { text-decoration-line: none; } /* ========================================================= * LIGHT THEME (Default) * ========================================================= */ :root { /* ── Brand Colors ── */ --color-primary: #007d3d; --color-primary-dark: #004d26; --color-primary-light: #00a84d; --color-primary-50: #f0fdf4; --color-primary-100: #dcfce7; --color-secondary: #ffb703; --color-secondary-dark: #fb8500; --color-secondary-light:#ffecd1; --color-accent: #f59e0b; --color-accent-dark: #d97706; --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; --color-info: #2563eb; --color-dark: #1a1a1a; /* ── Surface / Background (--sh-*) ── */ --sh-bg: #f8fafc; --sh-bg-alt: #f1f5f9; --sh-bg-card: #ffffff; --sh-bg-elevated: #f8fafc; --sh-bg-input: #f1f5f9; /* ── Text (--sh-*) ── */ --sh-text: #0f172a; --sh-text-2: #334155; --sh-text-3: #64748b; --sh-text-muted: #94a3b8; --sh-logo-slogan: #475569; /* ── Border (--sh-*) ── */ --sh-border: #e2e8f0; --sh-border-light: #f1f5f9; /* ── Status Colors (light shades) ── */ --color-success-light: #22c55e; --color-info-light: #60a5fa; --color-indigo: #6366f1; --color-purple: #8b5cf6; /* ── Social Brand Colors ── */ --sh-color-facebook: #1877F2; --sh-color-youtube: #FF0000; --sh-color-zalo: #0068FF; /* ── Effects ── */ --sh-shadow: rgba(0, 0, 0, 0.04) 0px 2px 8px, rgba(0, 0, 0, 0.06) 0px 8px 24px; --sh-overlay: rgba(255,255,255,0.95); /* ── Z-Index Scale ── */ --z-mobile-nav: 9990; --z-floating-btns: 9991; --z-cookie-consent: 9995; --z-chatbot: 9998; /* ── Radius ── */ --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; --radius-xl: 2rem; --radius-full: 9999px; /* ── Pi Unified Namespace (light) ── Matches ColorProvider output — works on frontend without plugin. */ --pi-primary: #007d3d; --pi-primary-dark: #004d26; --pi-primary-light: #00a84d; --pi-primary-50: #f0fdf4; --pi-primary-100: #dcfce7; --pi-secondary: #ffb703; --pi-secondary-dark: #fb8500; --pi-secondary-light: #ffecd1; --pi-accent: #f59e0b; --pi-accent-dark: #d97706; --pi-accent-light: #fef3c7; --pi-success: #16a34a; --pi-warning: #d97706; --pi-danger: #dc2626; --pi-info: #2563eb; --pi-bg: #f8fafc; --pi-bg-alt: #f1f5f9; --pi-bg-card: #ffffff; --pi-bg-elevated: #f8fafc; --pi-bg-input: #f1f5f9; --pi-text: #0f172a; --pi-text-2: #334155; --pi-text-3: #64748b; --pi-text-muted: #94a3b8; --pi-border: #e2e8f0; --pi-border-light: #f1f5f9; --pi-shadow: rgba(0, 0, 0, 0.04) 0px 2px 8px, rgba(0, 0, 0, 0.06) 0px 8px 24px; --pi-overlay: rgba(255,255,255,0.95); --pi-radius: 0.75rem; } /* ========================================================= * DARK THEME * ========================================================= */ .dark, .sgh-dark, .sgh-admin-dark { /* ── Surface / Background ── */ --sh-bg: #0f172a; --sh-bg-alt: #1e293b; --sh-bg-card: #1e293b; --sh-bg-elevated: #334155; --sh-bg-input: #0f172a; /* ── Text ── */ --sh-text: #f1f5f9; --sh-text-2: #e2e8f0; --sh-text-3: #94a3b8; --sh-text-muted: #475569; --sh-logo-slogan: #ffffff; /* ── Border ── */ --sh-border: #334155; --sh-border-light: #1e293b; /* ── Effects ── */ --sh-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px, rgba(0, 0, 0, 0.2) 0px 8px 24px; --sh-overlay: rgba(15,23,42,0.92); /* ── Brand colors (brighter for dark backgrounds) ── */ --color-primary-50: #064e3b; --color-primary-100: #065f46; --color-secondary: #fcd34d; --color-secondary-dark: #fbbf24; --color-accent: #fbbf24; --color-accent-dark: #f59e0b; /* ── Semantic colors (brighter for dark) ── */ --color-success: #007d3d; --color-warning: #fbbf24; --color-danger: #f87171; --color-info: #60a5fa; --color-success-light: #007d3d; --color-info-light: #93c5fd; /* ── Pi Unified Namespace (dark) ── */ --pi-primary: #007d3d; --pi-primary-dark: #004d26; --pi-primary-light: #00a84d; --pi-primary-50: #064e3b; --pi-primary-100: #065f46; --pi-secondary: #fcd34d; --pi-secondary-dark: #fbbf24; --pi-secondary-light: #92400e; --pi-accent: #fbbf24; --pi-accent-dark: #f59e0b; --pi-accent-light: #92400e; --pi-success: #007d3d; --pi-warning: #fbbf24; --pi-danger: #f87171; --pi-info: #60a5fa; --pi-bg: #0f172a; --pi-bg-alt: #1e293b; --pi-bg-card: #1e293b; --pi-bg-elevated: #334155; --pi-bg-input: #0f172a; --pi-text: #f1f5f9; --pi-text-2: #e2e8f0; --pi-text-3: #94a3b8; --pi-text-muted: #475569; --pi-border: #334155; --pi-border-light: #1e293b; --pi-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px, rgba(0, 0, 0, 0.2) 0px 8px 24px; --pi-overlay: rgba(15,23,42,0.92); --pi-radius: 0.75rem; color-scheme: dark; } /* ========================================================= * CUSTOM ANIMATIONS & INTERACTION EFFECTS * ========================================================= */ /* Card lift on hover */ .sgh-card-hover { transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s; } .sgh-card-hover:hover { transform: translateY(-6px); box-shadow: 0 16px 40px color-mix(in srgb, var(--color-primary) 12%, transparent); } /* Image zoom on hover */ .sgh-img-zoom { overflow: hidden; border-radius: inherit; } .sgh-img-zoom img { transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); } .sgh-img-zoom:hover img { transform: scale(1.06); } /* Text underline slide from left */ .sgh-underline-hover { position: relative; display: inline-block; } .sgh-underline-hover::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--color-primary); transition: width 0.35s cubic-bezier(0.16,1,0.3,1); } .sgh-underline-hover:hover::after { width: 100%; } /* CTA button glow pulse */ .sgh-glow-btn { animation: sgh-glow 3s ease-in-out infinite; } @keyframes sgh-glow { 0%, 100% { box-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 20%, transparent); } 50% { box-shadow: 0 0 40px color-mix(in srgb, var(--color-primary) 40%, transparent); } } /* Floating decoration */ .sgh-float { animation: sgh-float 4s ease-in-out infinite; } @keyframes sgh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Parallax subtle */ .sgh-parallax-slow { will-change: transform; } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { .sgh-card-hover, .sgh-img-zoom img, .sgh-underline-hover::after { transition: none !important; animation: none !important; } } /* Glassmorphism Class (SKILL) */ .sgh-glass { background: color-mix(in srgb, var(--pi-bg-card) 75%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid color-mix(in srgb, var(--pi-border), transparent 40%); box-shadow: 0 4px 24px color-mix(in srgb, var(--pi-shadow) 20%, transparent); } .dark .sgh-glass, .sgh-dark .sgh-glass, .sgh-admin-dark .sgh-glass { border-top-color: rgba(255, 255, 255, 0.08); /* Highlight upper edge */ }