/** * File: assets/css/page-styles.css * Description: Styles that load only on WordPress pages (not posts) * Version: 1.0.4 * Last Modified: 2025-09-28 * * This file loads on: * - WordPress pages (is_page()) * - Excludes WooCommerce pages when WooCommerce is active * * Use this file for landing page layouts, about/contact page styles, service page designs, * page-specific hero sections, custom page templates, and page builder overrides. */ /* =========================================== * Table of Contents: * =========================================== * 1. Light Theme Cards (Light Background) * 2. Dark Theme Cards - Light Card Background * 3. Dark Theme Cards - Dark Card Background * 4. GenerateBlocks Fixes * 5. Pricing Card Components */ /* =========================================== * 1. Light Theme Cards (Light Background) * =========================================== */ /* These cards are for use on light/white page backgrounds. * They have white card backgrounds with dark shadows. */ /* * Light Theme Card - Enhanced Shadow & Hover Elevation * White card background for light page backgrounds * More prominent than subtle shadows, without looking harsh */ .card-shadow-elevation { background-color: #fff; border-radius: 10px; padding: 2rem; border: 1px solid #ccc; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.05), 0 20px 25px rgba(0, 0, 0, 0.04); transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; } .card-shadow-elevation:hover { transform: translateY(-1px); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.06), 0 14px 20px rgba(0, 0, 0, 0.05), 0 24px 38px rgba(0, 0, 0, 0.04); } /* * Light Theme Card - Enhanced Shadow (No Hover Elevation) * White card background for light page backgrounds * More prominent than subtle shadows for promotional or pricing cards */ .card-shadow { background-color: #fff; border-radius: 10px; padding: 2rem; border: 1px solid #d0d7de; box-shadow: 0 2px 4px rgba(27, 31, 35, 0.08), 0 6px 12px rgba(27, 31, 35, 0.10), 0 16px 32px rgba(27, 31, 35, 0.12); transition: box-shadow 0.2s ease, transform 0.2s ease; } /* * Light Theme Card - Subtle Shadow & Hover Elevation * White card background for light page backgrounds * A subtle multi-layer shadow for promotional or pricing cards */ .card-shadow-subtle { background-color: #fff; border-radius: 8px; padding: 2rem; border: 1px solid #d0d7de; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04), 0 8px 12px rgba(0, 0, 0, 0.03), 0 12px 24px rgba(0, 0, 0, 0.03); transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; } .card-shadow-subtle:hover { transform: translateY(-1px); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.04); } /* =========================================== * 2. Dark Theme Cards - Light Card Background * =========================================== */ /* These cards are for use on dark page backgrounds. * They have light/white card backgrounds with dark shadows. * Shadows use #16181d color for visibility on dark backgrounds. */ /* * Dark Theme Card (Light Background) - Enhanced Shadow & Hover Elevation * Light card background for dark page backgrounds * Uses dark shadows visible on dark backgrounds */ .card-shadow-elevation-dark { border-radius: 10px; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 6px #16181d, 0 10px 15px #16181d, 0 20px 25px #16181d; transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out, background-color 0.2s ease-in-out; } .card-shadow-elevation-dark:hover { transform: translateY(-1px); background-color: #fcfcfd; box-shadow: 0 6px 10px #16181d, 0 14px 20px #16181d, 0 24px 38px #16181d; } /* * Dark Theme Card (Light Background) - Enhanced Shadow (No Hover Elevation) * Light card background for dark page backgrounds * For promotional or pricing cards on dark backgrounds */ .card-shadow-dark { border-radius: 10px; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 2px 4px #16181d, 0 6px 12px #16181d, 0 16px 32px #16181d; transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } /* * Dark Theme Card (Light Background) - Subtle Shadow & Hover Elevation * Light card background for dark page backgrounds * Subtle shadows for dark theme cards */ .card-shadow-subtle-dark { border-radius: 8px; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 #16181d, 0 1px 3px #16181d, 0 4px 6px #16181d, 0 8px 12px #16181d, 0 12px 24px #16181d; transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out, background-color 0.2s ease-in-out; } .card-shadow-subtle-dark:hover { transform: translateY(-1px); background-color: #fcfcfd; box-shadow: 0 1px 1px #16181d, 0 2px 4px #16181d, 0 8px 16px #16181d; } /* =========================================== * 3. Dark Theme Cards - Dark Card Background * =========================================== */ /* These cards are for use on dark page backgrounds. * They have dark card backgrounds (#16181d) with darker borders. * Hover state changes background to #434651. */ /* * Dark Theme Card (Dark Background) - Enhanced Shadow & Hover Elevation * Dark card background (#16181d) for dark page backgrounds * Hover changes background to #1b1d22 */ .card-dark-bg-elevation { background-color: #16181d; border-radius: 10px; border: 1px solid #434651; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 10px 15px rgba(0, 0, 0, 0.25), 0 20px 25px rgba(0, 0, 0, 0.2); transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out, background-color 0.2s ease-in-out; } .card-dark-bg-elevation:hover { transform: translateY(-1px); background-color: #1b1d22; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.35), 0 14px 20px rgba(0, 0, 0, 0.3), 0 24px 38px rgba(0, 0, 0, 0.25); } /* * Dark Theme Card (Dark Background) - Enhanced Shadow (No Hover Elevation) * Dark card background (#16181d) for dark page backgrounds * For promotional or pricing cards */ .card-dark-bg { background-color: #16181d; border-radius: 10px; border: 1px solid #434651; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 6px 12px rgba(0, 0, 0, 0.2), 0 16px 32px rgba(0, 0, 0, 0.15); transition: box-shadow 0.2s ease, background-color 0.2s ease; } .card-dark-bg:hover { background-color: #1b1d22; } /* * Dark Theme Card (Dark Background) - Subtle Shadow & Hover Elevation * Dark card background (#16181d) for dark page backgrounds * Subtle shadows for dark theme cards */ .card-dark-bg-subtle { background-color: #16181d; border-radius: 8px; border: 1px solid #434651; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.18), 0 4px 6px rgba(0, 0, 0, 0.15), 0 8px 12px rgba(0, 0, 0, 0.12), 0 12px 24px rgba(0, 0, 0, 0.1); transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out, background-color 0.2s ease-in-out; } .card-dark-bg-subtle:hover { transform: translateY(-1px); background-color: #1b1d22; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.15); } /* =========================================== * 4. GenerateBlocks Fixes * =========================================== */ /* * In GenerateBlocks sometimes we have a bug, where the global style underline links. */ .gb-text a { text-decoration: none !important; } .gb-text a:hover { text-decoration: underline !important; } /* =========================================== * 5. Pricing Card Components * =========================================== */ /* =========================================== * 5.1 Base Pricing Cards * =========================================== */ /* * Pricing Card Base - Standard styling for all pricing cards (distraction-free) * Reusable across themes with clean design and editor control * Usage: Add 'pricing-card' as Additional CSS class in GenerateBlocks */ .pricing-card { background-color: #fff; border-radius: 10px !important; border: 1px solid #d0d7de !important; box-shadow: 0 2px 4px rgba(27, 31, 35, 0.08), 0 6px 12px rgba(27, 31, 35, 0.10), 0 16px 32px rgba(27, 31, 35, 0.12) !important; } /* =========================================== * 5.2 Popular Pricing Cards * =========================================== */ /* * Pricing Card Popular - Enhanced styling for "Most Popular" pricing cards * Adds theme colors and stronger effects while preserving editor control * Usage: Add 'pricing-card-popular' as Additional CSS class in GenerateBlocks */ .pricing-card-popular { background-color: var(--contrast-2) !important; border-radius: 12px !important; box-shadow: 0 2px 4px rgba(27, 31, 35, 0.08), 0 6px 12px rgba(27, 31, 35, 0.10), 0 16px 32px rgba(27, 31, 35, 0.12) !important; } /* =========================================== * 5.3 Optional Hover Effects * =========================================== */ /* * Pricing Card Hover - Optional hover effects for base pricing cards * Add alongside pricing-card when hover interaction is desired * Usage: Add 'pricing-card pricing-card-hover' as Additional CSS classes */ .pricing-card-hover { transition: box-shadow 0.2s ease, transform 0.2s ease !important; } .pricing-card-hover:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 8px rgba(27, 31, 35, 0.10), 0 8px 16px rgba(27, 31, 35, 0.12), 0 20px 40px rgba(27, 31, 35, 0.14) !important; } /* * Pricing Card Popular Hover - Optional hover effects for popular pricing cards * Add alongside pricing-card-popular when hover interaction is desired * Usage: Add 'pricing-card-popular pricing-card-popular-hover' as Additional CSS classes */ .pricing-card-popular-hover { transition: box-shadow 0.2s ease, transform 0.2s ease !important; } .pricing-card-popular-hover:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.06), 0 14px 20px rgba(0, 0, 0, 0.05), 0 24px 38px rgba(0, 0, 0, 0.04) !important; } /* =========================================== * 5.4 Dark Theme Pricing Cards * =========================================== */ /* * Dark Theme Pricing Card Base - Shadow styling for dark backgrounds * Usage: Add 'pricing-card-dark' as Additional CSS class in GenerateBlocks */ .pricing-card-dark { border-radius: 10px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 2px 4px #16181d, 0 6px 12px #16181d, 0 16px 32px #16181d !important; } /* * Dark Theme Pricing Card Popular - Enhanced shadow for dark backgrounds * Usage: Add 'pricing-card-popular-dark' as Additional CSS class in GenerateBlocks */ .pricing-card-popular-dark { border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 2px 4px #16181d, 0 6px 12px #16181d, 0 16px 32px #16181d, 0 0 0 2px rgba(255, 255, 255, 0.1) !important; } /* * Dark Theme Pricing Card Hover - Optional hover effects for dark theme pricing cards * Usage: Add 'pricing-card-dark pricing-card-hover-dark' as Additional CSS classes */ .pricing-card-hover-dark { transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease !important; } .pricing-card-hover-dark:hover { transform: translateY(-1px) !important; background-color: #fcfcfd !important; box-shadow: 0 4px 8px #16181d, 0 8px 16px #16181d, 0 20px 40px #16181d !important; } /* * Dark Theme Pricing Card Popular Hover - Optional hover effects for dark theme popular cards * Usage: Add 'pricing-card-popular-dark pricing-card-popular-hover-dark' as Additional CSS classes */ .pricing-card-popular-hover-dark { transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease !important; } .pricing-card-popular-hover-dark:hover { transform: translateY(-1px) !important; background-color: #fcfcfd !important; box-shadow: 0 6px 10px #16181d, 0 14px 20px #16181d, 0 24px 38px #16181d, 0 0 0 2px rgba(255, 255, 255, 0.12) !important; }