/** * Child Theme Custom Styles - Additional customizations beyond colors and typography * * ===== CASCADE PRIORITY ===== * 1. Parent theme styles (loaded first) * 2. Child style.css * 3. Child colors.css * 4. Child typography.css * 5. THIS FILE (custom-styles.css) - loads LAST for component-specific overrides * 6. WordPress Customizer "Additional CSS" (highest priority) * * ===== USAGE ===== * Use this file for: * - Layout adjustments * - Spacing/padding modifications * - Border styles and shadows * - Component-specific styling * - Hover states and animations * - Responsive design overrides * * ===== BEST PRACTICES ===== * - Group related styles together with comments * - Use CSS custom properties (variables) when possible * - Be specific with selectors to avoid unintended overrides * - Test on mobile, tablet, and desktop * - Keep `!important` usage minimal * * @package HS_Helix_Child * @author Healthcare Success * @since 1.0.0 */ /* ========================================================================== REM BASE SIZE (Root Element Font Size) ========================================================================== */ /** * CHANGING THE REM BASE * * The rem unit is calculated from the root element's font-size. * Browser default is 16px, so 1rem = 16px by default. * * To change the base calculation for ALL rem values site-wide: * - Use PERCENTAGE (recommended for accessibility) * - Percentage is relative to browser default (16px) * * EXAMPLES: * html { font-size: 100%; } → 1rem = 16px (browser default) * html { font-size: 87.5%; } → 1rem = 14px (87.5% of 16px) * html { font-size: 75%; } → 1rem = 12px (75% of 16px) * html { font-size: 62.5%; } → 1rem = 10px (62.5% of 16px) * * WHY PERCENTAGE? * - Respects user's browser font size preferences (accessibility) * - Easier to calculate (62.5% makes 1.6rem = 16px) * - Recommended by WCAG accessibility guidelines * * NOTE: Changing this affects ALL rem values throughout the site: * - Typography sizes * - Spacing/padding * - Element dimensions * - Media query breakpoints using rem * * Uncomment to set a custom rem base: */ /* html { font-size: 100%; // Default: 1rem = 16px } */ /* ========================================================================== LAYOUT & SPACING ADJUSTMENTS ========================================================================== */ /** * Global spacing adjustments * * Customize if you need different spacing from parent theme * Parent uses 24px default block gap */ /* :root { --wp--style--block-gap: 24px; } */ /** * Container width adjustments * * Parent defaults: * - Content width: 1272px * - Wide width: 1440px */ /* :root { --wp--style--global--content-size: 1272px; --wp--style--global--wide-size: 1440px; } */ /* ========================================================================== HEADER CUSTOMIZATIONS ========================================================================== */ /** * Header background and spacing * * Example: Change header background color */ /* .site-header-outer { background-color: var(--wp--preset--color--gray-10); } */ /** * Navigation menu styling * * Example: Adjust navigation link appearance */ /* .wp-block-navigation a { font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } */ /* ========================================================================== BUTTON CUSTOMIZATIONS ========================================================================== */ /** * Primary button overrides * * Parent uses gradient background - uncomment to customize */ /* .wp-block-button__link:not(.is-style-outline), .wp-element-button:not(.is-style-outline) { border-radius: 8px; padding: 1rem 2rem; font-weight: 600; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .wp-block-button__link:not(.is-style-outline):hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } */ /** * Secondary button (outline style) overrides */ /* .wp-block-button.is-style-outline .wp-block-button__link { border-width: 2px; border-radius: 8px; padding: calc(1rem - 2px) calc(2rem - 2px); } */ /* ========================================================================== FORM & INPUT CUSTOMIZATIONS ========================================================================== */ /** * Form input styling * * Example: Round corners on inputs */ /* input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], textarea, select { border-radius: 4px; padding: 0.75rem 1rem; transition: border-color 0.2s ease; } input:focus, textarea:focus, select:focus { border-width: 2px; outline: none; } */ /* ========================================================================== CARD & MODULE CUSTOMIZATIONS ========================================================================== */ /** * Card styling for blog posts, services, etc. * * Example: Add shadow to cards */ /* .blog-post-card, .card-item, .testimonial-card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: box-shadow 0.3s ease, transform 0.3s ease; } .blog-post-card:hover, .card-item:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); transform: translateY(-4px); } */ /* ========================================================================== FOOTER CUSTOMIZATIONS ========================================================================== */ /** * Footer styling overrides * * Example: Change footer background and text color */ /* .hs-helix-footer-dynamic { background-color: var(--wp--preset--color--dark); color: var(--wp--preset--color--background); } .hs-helix-footer-dynamic a { color: var(--wp--preset--color--primary-20); } .hs-helix-footer-dynamic a:hover { color: var(--wp--preset--color--accent); } */ /* ========================================================================== PATTERN & BLOCK CUSTOMIZATIONS ========================================================================== */ /** * Hero section customizations */ /* .hero-split-block { min-height: 500px; } .hero-split-content { padding: 4rem 5rem; } */ /** * Feature grid customizations */ /* .feature-grid-3-section { padding: 5rem 0; } .feature-grid-3-icon img { max-width: 64px; filter: brightness(0) invert(1); } */ /** * Testimonial customizations */ /* .testimonial-card { border-radius: 12px; padding: 2rem; } .testimonial-text { font-style: italic; } */ /* ========================================================================== RESPONSIVE DESIGN OVERRIDES ========================================================================== */ /** * Tablet breakpoint (max-width: 1024px) */ @media (max-width: 1024px) { /* Add tablet-specific overrides here */ /* .hero-split-content { padding: 3rem 2rem; } */ } /** * Mobile breakpoint (max-width: 768px) */ @media (max-width: 768px) { /* Add mobile-specific overrides here */ /* .hero-split-content { padding: 2rem 1.5rem; } .blog-posts-grid { grid-template-columns: 1fr; } */ } /* ========================================================================== UTILITY CLASSES ========================================================================== */ /** * Reusable utility classes * * Add custom utilities here for quick styling */ /* .custom-shadow { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .custom-rounded { border-radius: 12px; } .custom-gradient-overlay { position: relative; } .custom-gradient-overlay::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 100%); pointer-events: none; } */ /* ========================================================================== END OF CUSTOM STYLES ========================================================================== */