/* Theme Name: Astra Child Theme URI: https://wpastra.com/ Template: astra Author: Brainstorm Force Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/ Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog Version: 4.12.4.1773482466 Updated: 2026-03-14 10:01:06 */ /* * ===================================================== * Astra Child Theme - Custom CSS * Site: Authentic Samurai * * CSS MAP (Top → Bottom on Page) * 1) Global Base Fixes * 2) Header / Navigation * 3) Hero Section * 4) Transition Buffer (dark section) * 5) Booking / Calendly * 6) Archive * 7) Utilities / Parallax * 8) Buttons * ===================================================== */ /* ===================================================== 1) Global Base Fixes Removes unexpected gaps and margins that WordPress and the block editor add by default to the top of the page content area. ===================================================== */ /* Remove unexpected top gap above first content */ .wp-site-blocks, .wp-site-blocks > main, .wp-site-blocks > main > .wp-block-post-content { padding-top: 0 !important; margin-top: 0 !important; } /* Prevent first block from adding a top margin gap */ .wp-block-post-content > :first-child { margin-top: 0 !important; } /* Full width page overrides Removes Astra's ast-container width restriction per page. To add a new full width page: 1. Open the page in your browser 2. Right-click → Inspect 3. Find the tag and look for class "page-id-X" 4. Add ".page-id-X .ast-container," as a new line below */ .page-id-REPLACE_WITH_ID .ast-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* ===================================================== 2) Header / Navigation HOW THIS WORKS: - Nav is position: fixed so it floats above all content independently, regardless of which group it sits in - Starts fully transparent so the hero image shows through - Once the user scrolls, the footer JS adds .scrolled to , which triggers the black background fade - .hero-bamboo has a padding-top and negative margin-top so its content clears the fixed nav while the background image extends up behind it - padding-left/right use !important to override the alignfull class on the nav block which resets padding TO ADJUST: - Change padding-left/right values to move nav items away from screen edges - Change rgba alpha value in .scrolled rule to adjust how opaque the black background becomes after scrolling - Change transition duration to adjust fade speed ===================================================== */ /* Fix nav to top of viewport, always visible */ .wp-block-navigation { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; box-sizing: border-box; padding-left: 2rem !important; padding-right: 2rem !important; background: rgba(0,0,0,0); transition: background 0.4s ease, padding 0.3s ease; z-index: 9999; } /* Fade nav to dark after scrolling */ /* .scrolled is toggled on by footer JS */ .scrolled .wp-block-navigation { background: rgba(0,0,0,0.85); } /* Mobile menu overlay background */ .wp-block-navigation__responsive-container.is-menu-open { background-color: rgba(0,0,0,0.95) !important; } /* ===================================================== 3) Hero Section (Bamboo Group) Visual-editor priority notes: - Hero height should be set in Block settings UI - padding-top on .hero-bamboo pushes content below the fixed nav. Adjust 70px if nav height changes. - negative margin-top pulls the hero background up behind the nav so no gap appears - CSS below handles effects the visual editor cannot: 1) Bottom fade overlay 2) Animated scroll cue ===================================================== */ /* Outer hero Group - content offset from fixed nav */ .hero-bamboo { padding-top: 70px; margin-top: -70px; position: relative; } /* Bottom fade overlay */ /* Adjust height: 14vh subtle, 24vh stronger */ .hero-bamboo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18vh; background: linear-gradient( to bottom, rgba(0,0,0,0), rgba(0,0,0,0.65), rgba(0,0,0,0.95) ); pointer-events: none; z-index: 2; } /* Keep hero content above the fade overlay */ .hero-bamboo > *:not(.wp-block-navigation):not(.scroll-cue) { position: relative; z-index: 3; } /* Scroll cue container - handles vertical bounce motion */ .hero-bamboo .scroll-cue { position: absolute; left: 50%; bottom: 10vh; width: 24px; height: 24px; display: block; margin: 0; padding: 0; opacity: 0.85; z-index: 4; pointer-events: none; transform: translateX(-50%); animation: scrollCueFloatY 1.6s ease-in-out infinite; } /* Scroll cue shape - rotated square makes a chevron arrow */ .hero-bamboo .scroll-cue::before { content: ""; position: absolute; inset: 0; box-sizing: border-box; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } /* Scroll cue bounce animation */ @keyframes scrollCueFloatY { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } /* Respect user's reduced motion preference */ @media (prefers-reduced-motion: reduce) { .hero-bamboo .scroll-cue { animation: none; } } /* Force hero fade overlay to stretch full viewport width */ /* Needed because ast-container constrains the ::after pseudo element */ .hero-bamboo::after { left: 50% !important; width: 100vw !important; transform: translateX(-50%) !important; } /* ===================================================== 4) Transition Buffer (Dark Section) Reserved for transition-buffer-specific styling. This is the dark band between the hero and the next section that acts as a visual conjunction. ===================================================== */ /* Add styles here if needed */ /* ===================================================== 5) Booking / Calendly Reserved for Calendly embed sizing and spacing fixes. ===================================================== */ /* Add styles here if needed */ /* ===================================================== 6) Archive Retired approaches kept here for reference only. Do not activate these without testing first. --- parallax-bg (retired) --- Old background-attachment: fixed approach for hero. Replaced by the parallax-sec JS system which works on mobile too. Kept here in case needed elsewhere. .parallax-bg { background-attachment: fixed; background-position: center; background-size: cover; } @media (max-width: 768px) { .parallax-bg { background-attachment: scroll; } } ===================================================== */ /* ===================================================== 7) Utilities / Parallax HOW THE PARALLAX SYSTEM WORKS: - Add class: parallax-sec to a Group block - Add as FIRST child inside that Group: - Set the background image on the Group in the editor UI - The footer JS automatically moves the background image to the __bg div and animates it with translate3d on scroll - This approach works on mobile unlike background-attachment: fixed hero-static CLASS: - Use this for hero sections where you want a fixed background WITHOUT parallax movement - Add class: hero-static to the Group block - Set background image in editor UI - Leave the Fixed Background toggle OFF in the editor (this CSS handles it including the mobile fallback) - Adjust background-position in the mobile rule to control the focal point on smaller screens ===================================================== */ /* Parallax section wrapper */ .parallax-sec { position: relative; overflow: hidden; } /* Parallax background layer */ /* inset: -20vh gives the JS room to move without revealing empty space at top or bottom during scroll */ .parallax-sec__bg { position: absolute; inset: -20vh 0; z-index: 0; background-repeat: no-repeat; background-size: cover; background-position: center; transform: translate3d(0,0,0); will-change: transform; } /* Keep all section content above the parallax background */ .parallax-sec > :not(.parallax-sec__bg) { position: relative; z-index: 1; } /* Static hero background - fixed on desktop, scroll on mobile */ /* Use class: hero-static on any hero Group block */ .hero-static { background-attachment: fixed; background-size: cover; } @media (max-width: 768px) { .hero-static { background-attachment: scroll; background-size: cover; background-position: center 70%; } } /* ===================================================== 8) Buttons Reserved for button hover animations and effects. ===================================================== */ /* Add styles here if needed */