/*------------------------------------------------------------------/* Theme Name: AZTheme Theme URI: Description: WordPress Theme by AZ-Theme Author URI: https://az-theme.net Author: AZ-Theme Version: 2.1.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text domain: aztheme Tested up to: 5.5 Requires PHP: 7.0 Tags: blog, e-commerce */ :root { /* Text */ --primary-color: #1a1a1a; /* headings — unchanged, ~15.7:1 on bg, excellent */ --body-color: #454545; /* body copy — unchanged, ~8.6:1 on bg, excellent */ --muted-color: #6b6b6b; /* NEW — secondary/meta text (dates, tags, captions). ~4.5:1 on bg, passes AA. Use this instead of --meta-color whenever the color sits on TEXT. */ /* Accent (brand terracotta) */ --accent-color: #b56651; /* unchanged — for buttons, icons, borders, large text. ~3.8:1, meets AA for non-text/large elements. */ --accent-dark: #a85f4b; /* NEW — accent as a button background under WHITE text, and for hover/active states. ~4.76:1 with white text, passes AA. */ --accent-text: #9a5745; /* NEW — use when the accent color itself IS the text color (inline links, small labels). ~4.95:1 on bg, passes AA for normal-size text. */ /* Surfaces */ --bg-color: #f3f3f3; /* page background — unchanged */ --surface-color: #ffffff; /* NEW — card/panel background, for contrast against --bg-color */ --border-color: #dddddd; /* renamed intent, same value as old --meta-color — decorative dividers/borders ONLY, never text */ } body { font-size: 1em; color: var(--body-color); line-height: 1.5; background: var(--bg-color); } /* Scope transitions to interactive elements instead of the whole — a body-level transition fires on any color/background change anywhere that inherits without its own transition, which can cause unintended lag on unrelated style changes (e.g. JS-driven class toggles). */ a, button, .button { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } iframe { max-width: 100%; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-bottom: 1.2rem; font-weight: 600; margin-top: 1.2rem; line-height: 1.2; color: var(--primary-color); font-weight: bold; } hr { opacity: 0.5; } a{ color: var(--accent-color); text-decoration: none; } a:hover { text-decoration: none; color: var(--accent-color); } img{ max-width: 100%; height: auto; } ul,ol{margin: 0;} article ul { margin-bottom: 15px; } ul ul, ol ol, ul ol, ol ul{padding-left: 20px;} input, button{ height: 55px; transition: 0.5s; } input[type="checkbox"] { height: inherit; } strong { font-weight: bold; color: var(--primary-color); } button, input[type="submit"], .button, .wp-block-button__link { text-align: center; background: #000; color: #fff; display: inline-block; border: 1px solid transparent; padding: 12px 30px 14px; transition: 0.6s; border-radius: 100px; text-transform: uppercase; font-size: 16px; letter-spacing: 1px; } input[type="text"]:hover, input[type="email"]:hover, input[type="phone"]:hover, input[type="tel"]:hover, input[type="password"]:hover { /**border: 1px solid var(--accent-color);*/ } input[type="text"]:focus, input[type="email"]:focus, input[type="phone"]:focus, input[type="tel"]:focus, input[type="password"]:focus { outline: none; border: 1px solid var(--accent-color); } button:hover, input[type="submit"]:hover, .button:hover{ cursor: pointer; color: var(--accent-color); border-color: var(--accent-color); background-color: transparent; } input, textarea { border: 1px solid #ddd; background: #f5f5f5; color: #888; padding: 0 10px; } textarea{min-height: 200px;} table{ width: 100%; } table, td{ border: 1px solid #ddd; } td,th{ padding: 1rem; } .azt-display-flex{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } /* ------------------------------------ WordPress Core -----------------------------------------*/ .alignnone { margin: 5px 20px 20px 0; } .gallery-caption, .bypostauthor { color: inherit; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float:right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #eee; clip: auto !important; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* ------------------------------------ Header -----------------------------------------*/ .site-header{ background: #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05); z-index: 6; position: relative; } .header-brand a { font-size: 1.2rem; font-family: var(--heading-font); font-weight: 500; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; color: var(--primary-color); } .site-logo img { max-height: 90px; width: auto; border: 1px solid #f7f7f7; border-radius: 100%; } .azt-nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; } .azt-nav ul ul{ position: absolute; min-width: 250px; top: 100%; left: 0; } .azt-nav ul ul ul{ top: 0; left: 100%; } .azt-nav li{ float: left; margin-left: 30px; } .azt-nav li a { padding: 36px 0; display: block; color: var(--body-color); } .mini-cart{ position: relative; } .mini-cart .cart-icon { background: url('assets/images/shopping-cart.svg'); display: block; width: 28px; height: 28px; background-repeat: no-repeat; background-size: contain; } .mini-cart .edd-cart-quantity { position: absolute; top: 22px; right: -10px; background: var(--accent-color); width: 23px; height: 22px; line-height: 22px; text-align: center; color: #fff; border-radius: 100%; font-size: 0.875rem; letter-spacing: 0; } .azt-hero-section, .azt-hero-section-small { margin: 0 0 30px; background: #e6e0e0; } .azt-hero-section { margin-top: 30px; } /* ------------------------------------ Main Content -----------------------------------------*/ .error404 .archive-box.main-blog { padding: 150px; } main.content { background: #fff; padding: 2rem; border: 1px solid #dfdfdf; border-radius: 16px; margin-bottom: 3rem; } .page-template-page-home #main-content, .page-template-downloads #main-content{ margin: 0; } .section-header { text-align: center; } .section-header p { color: #686868; font-size: 1rem; } .azt-parallax { min-height: 30rem; background-size: cover; background-repeat: no-repeat; background-position: center; } .inner-content ul { padding: 0 0 0 25px; margin-bottom: 1.2rem; } /* ------------------------------------ Latest Themes -----------------------------------------*/ .azt-latest-themes { padding: 50px 0; text-align: center; } .azt-latest-themes .theme-items { padding: 25px 0; } .theme-items .theme-item { margin-bottom: 50px; border: 1px solid #eee; padding-bottom: 15px; background: #fff; overflow: hidden; border-radius: 16px; box-shadow: 0 3px 6px rgba(0,0,0,0.036); } .theme-items .theme-item img{ border-radius: 3px; } .theme-item h3 a { color: inherit; } .theme-items .theme-item .intro-text-left p { color: #333; margin: 0; font-size: 1rem; } .theme-items .theme-item .intro-text { padding: 5px 15px; text-align: left; } .theme-items .theme-item .intro-text-right { text-align: right; } /* ------------------------------------ Free Themes -----------------------------------------*/ .azt-free-themes { background: #fff2eb; padding-bottom: 0; } .azt-free-themes .theme-items .theme-item:last-child { margin-right: 0; } /* ------------------------------------ Features -----------------------------------------*/ .azt-features { padding: 50px 0; text-align: center; background: linear-gradient(103deg, #e9e6e6 0%, #e3dadd 48.44%, #ebd2e1 100%); } .azt-features h3{ margin-bottom: 30px; } .azt-features .azt-display-flex { align-items: inherit; margin-left: -3rem; margin-right: -3rem; } .azt-features .feature-item { width: 25%; padding: 0 2rem; } .azt-features .feature-item span { display: inline-block; width: 60px; } .azt-features .feature-item p { color: #333; font-size: 1rem; } /* ------------------------------------ Testimonials -----------------------------------------*/ .azt-testimonial { border-top: 1px solid #eee; padding: 50px 0px; display: flex; } .azt-testimonial-items { padding: 60px 0 0; } .testimonial-item { width: 30%; padding: 2rem; margin-bottom: 30px; background: #fff; float: left; margin-right: 5%; min-height: 18rem; border-radius: 16px; } .testimonial-item:nth-child(3n) { margin-right: 0; } .testimonial-item:nth-child(3n+1) { clear: both; } .testimonial-item .bio { float: left; margin-left: 1rem; text-align: left; margin-top: 0.2rem; } .testimonial-item .header-item img { float: left; width: 60px; border-radius: 100px; height: 60px; } .testimonial-item .header-item .bio span { display: block; color: var(--primary-color); } .testimonial-item .header-item .bio span.text{ font-size: 0.9rem; color: #333; font-style: italic; } .testimonial-item .quote { clear: both; padding-top: 1rem; font-size: 1rem; } /* ------------------------------------ Footer -----------------------------------------*/ .azt-footer { background: #111; padding: 100px 0; text-align: center; } .azt-footer, .azt-footer a{ color: #fff; } .azt-footer ul { list-style: none; margin: 0; padding: 0; } .azt-footer ul li { display: inline-block; margin: 0 20px; } .footer-nav a { text-transform: uppercase; font-size: 0.9rem; letter-spacing: 2px; } .social-networks, .footer-nav{ margin-bottom: 2.5rem; } .social-networks { display: flex; justify-content: center; align-items: center; } .social-networks .social-icon { margin: 0 1rem; display: inline-block; } .social-networks .social-icon svg { max-width: 100%; width: 30px; } .social-networks .social-icon svg path { fill: #fff; } .text-copyright { margin-bottom: 0; color: #999; font-style: italic; } /* ------------------------------------ Single Download -----------------------------------------*/ .download-hero-wrapper { padding: 70px 0; background: #f9d2bc; } .download-hero-wrapper .download-image { border-radius: 32px; overflow: hidden; } .download-hero-wrapper .download-details{ padding-left: 3rem; } .download-hero-wrapper .download-excerpt { padding-top: 50px; } .download-content .inner-content { padding: 80px 0; } .theme-buttons.azt-display-flex{ justify-content: inherit; } .edd_download_purchase_form, .edd_download_quantity_wrapper, .edd_purchase_submit_wrapper, .theme-buttons .demo-url { display: inline-block; } .edd_download_quantity_wrapper .edd-item-quantity { width: 60px; height: 50px; background: #fff; } .theme-buttons .demo-url { margin-left: 5px; background: var(--primary-color); } .theme-buttons .demo-url:hover { background-color: transparent; color: var(--primary-color); border-color: var(--primary-color); } .download-content .inner-content .edd_download_purchase_form { margin-top: 2.5rem; } .download-content .inner-content a{ color: var(--accent-color); } .download-content .inner-content a.button{ color: #fff; } .download-content .inner-content a.button:hover{ color: var(--primary-color); } .azt-related-themes { padding: 5rem 0 2.5rem; background: #fffaf6; } .azt-related-themes .section-header h3{ margin-bottom: 50px } /* ------------------------------------ Page -----------------------------------------*/ .blog #main-content, .single-post #main-content, .archive:not(.tax-download_category) #main-content { margin: 3rem 0; } .page-header { padding: 3.5rem 0; background: #f5f5f5; } .inner-page { padding: 15px 0; } legend { color: var(--primary-color); } #edd_checkout_form_wrap { border: 1px solid #ddd; margin-top: 3rem; padding: 1rem; border-radius: 2px; } #edd_checkout_form_wrap .edd-input { width: 100%; } #edd_checkout_form_wrap .edd-description { font-size: 0.8rem; font-style: italic; color: #888; margin-left: 0.5rem; } #edd_checkout_cart .edd_cart_item_name { display: flex; align-items: center; } #edd_checkout_cart .edd_cart_item_name img{ width: 60px; } .edd_checkout_cart_item_title{ padding-left: 1rem; } #edd_purchase_receipt { margin-bottom: 3rem; } #edd_purchase_receipt_products ul { padding-left: 15px; } #edd_profile_editor_form .edd-input { width: 100%; } #edd_profile_editor_form fieldset { margin-top: 2rem; padding: 0; } .wpcf7-form input, .wpcf7-form label, .wpcf7-form textarea { width: 100%; } .wpcf7-form input, .wpcf7-form textarea { margin-bottom: 1rem; margin-top: 1rem; background: #f5f5f5; } .wpcf7-form input[type="submit"] { background: var(--primary-color); margin-bottom: 0; } .wpcf7-form input[type="submit"]:hover{ background: transparent; color: var(--primary-color); border-color: var(--primary-color); } .wpcf7-form textarea { padding: 1rem; line-height: 1rem; } .wpcf7-form { padding-top: 1rem; } .wpcf7-response-output { margin: 0.6em 0 0; padding: 0.5rem; border: 2px solid #ff0000; } #edd_register_form .edd-input, #edd_login_form .edd-input { width: 100%; margin-bottom: 1rem; } article.page { border-radius: 32px; overflow: hidden; border: 1px solid #ddd; box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.05); } .page .entry-content { background: #fff; padding: 2rem; } .edd-discount-code-field-wrap { display: flex; margin-bottom: 1rem; align-items: center; } .edd-apply-discount.edd-submit.white.button { padding: 10px 35px; height: auto; margin-left: 10px; border: none; } #edd_checkout_form_wrap #edd-discount.edd-input { width: 60%; height: 50px; } .edd-payment-icons { padding-left: 0.5rem; margin-bottom: 1rem; } .sale-off { background: #2E8539; color: #fff; text-align: center; padding: 1rem; font-size: 1.5rem; display: none; } .edd-input.edd-item-quantity { width: 60px; text-align: center; padding: 5px; } /* ------------------------------------ Widgets -----------------------------------------*/ .widget { border: 1px solid #eee; padding: 25px 30px 30px; margin-bottom: 50px; background: #fff; overflow: hidden; border-radius: 10px; box-shadow: 0 3px 6px rgba(0,0,0,0.036); } .widget_mc4wp_form_widget input { width: 100%; margin-top: 0.75rem; margin-bottom: 0; } .widget_mc4wp_form_widget p { margin: 0; } .widgettitle { margin-bottom: 1.5rem; font-size: 1.3rem; } .single-download-sidebar .widget ul{ margin: 0; } .theme-content { background: #fff; padding: 2rem; border: 1px solid #eee; overflow: hidden; border-radius: 10px; box-shadow: 0 3px 6px rgba(0,0,0,0.036); } .single-download .theme-content, .single-download .download-excerpt { font-size: 1.5rem; } .single-download .download-excerpt { font-size: 1.4rem; } .share-icons { margin-top: 3rem; text-transform: uppercase; letter-spacing: 1px; } .share-icons a { margin-left: 1rem; } .share-icons a svg { width: 30px; } .share-icons a svg path { fill: var(--accent-color); } .edd_success.edd-alert.edd-alert-success { margin: 2rem 0 0; } fieldset p:last-child { margin-bottom: 0; } .azt-themes-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 5rem; } .azt-themes-pagination .page-numbers { display: flex; height: 46px; min-width: 50px; border: 1px solid var(--accent-color); text-align: center; line-height: 46px; margin: 0 5px; color: var(--accent-color); transition: 0.6s; text-decoration: none; border-radius: 3px; font-size: 1.1rem; align-items: center; justify-content: center; padding: 0 10px; } .azt-themes-pagination .page-numbers:hover, .azt-themes-pagination .page-numbers.current { color: #fff; background: var(--accent-color); } /* ------------------------------------ Single Post --------------------------------------- */ .main-single-post .entry-header h1 { margin: 0 0 0.3rem; } .main-single-post .entry-content h4 { margin: 1.2rem 0; } .entry-title { color: var(--primary-color); margin: 0; } .entry-title a { color: inherit; text-decoration: none; } .singlepostinfo { color: #999; margin: 1rem 0 1.5rem; } .social-buttons { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin: 2rem 0; padding: 1rem 0; display: flex; align-items: center; } .social-buttons .sharertitle { margin-right: 1rem; } .social-buttons a { min-width: 10%; text-align: center; color: #fff; margin-left: 8px; min-height: 2.2rem; line-height: 2.2rem; border-radius: 3px; } .social-buttons .facebook{ background: #3b5998; } .social-buttons .twitter{ background: #55acee; } .social-buttons .linkedin{ background: #0077b5; } .social-buttons .pinterest{ background: #bd081c; } .singlethumb { margin-bottom: 2rem; } #respond { margin-top: 2.5rem; } #commentform .input-form, #commentform textarea { margin-bottom: 15px; line-height: 1.5em; padding: 10px; width: 100%; border-radius: 16px; } #commentform .comment-form-cookies-consent { margin-bottom: 10px; } #commentform .comment-form-cookies-consent label { margin-left: 6px; } #comments { margin-top: 3rem; } #comments .comment-list{ margin-bottom: 50px; padding: 0; } #comments ol.comment-list, #comments .comment > ol.children{list-style: none;} .comment-list .comment-body { border-bottom: 1px dashed #ddd; margin-bottom: 0; padding: 25px 25px 25px 0; overflow: hidden; } .comment-list li:last-child .comment-body { border-bottom: none; padding-bottom: 0; } .comment-body .comment-author{ float: left; margin-right: 22px; } .comment-body .comment-author img { max-width: 90px; border-radius: 100%; } .comment-body .comment-content{overflow: hidden;} .comment-body .comment-content .author-name { color: var(--primary-color); display: inline-block; font-size: 0.8rem; letter-spacing: 1px; margin-bottom: 0; margin-right: 1rem; text-transform: uppercase; } .comment-body .comment-content .author-name a{ color: inherit; } .comment-body .date-comment { font-size: 0.8rem; color: #999999; display: inline-block; font-style: italic; } .comment-body .date-comment a{ color: inherit; } .comment-body .comment-content .reply{ float: right; } .comment-body .comment-content .reply a { background: #eeeeee none repeat scroll 0 0; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; color: var(--primary-color); font-size: 0.8rem; font-weight: normal; letter-spacing: 0; margin-left: 10px; padding: 5px 10px; } .comment-body .comment-content .reply a:hover{ text-decoration: none; } .comment-body .comment-content .comment-text { margin-top: 5px; } .comment-body .comment-content .comment-text p { margin-bottom: 10px; } #cerber-recaptcha { margin-bottom: 2rem; } /* ------------------------------------ Sidebar ---------------------------------------- */ .widget { margin-bottom: 3rem; border-bottom: 1px solid #ddd; padding-bottom: 3rem; margin-bottom: 3rem; } .widget .widget-title { font-size: 1rem; text-align: center; border: 1px solid #d66; padding: 0.8rem 0; margin-bottom: 2.5rem; } .widget ul { padding: 0; margin: 0; list-style: none; } .widget ul ul { padding-left: 1rem; padding-top: 0.6rem; border-top: 1px dashed #ccc; margin-top: 0.6rem; } .widget li { border-bottom: 1px dashed #ccc; padding: 0.6rem 0; } .widget li:first-child { padding-top: 0; } .widget li:last-child { border-bottom: none; padding-bottom: 0; } .widget li li:last-child{ padding-bottom: 0; } .widget select { width: 100%; } .widget select option { width: 50%; } .widget_archive li, .widget_categories li{ color: #999; } cite { color: #999; } .widget_tag_cloud a { font-size: 0.9rem !important; border: 1px solid #ccc; padding: 0.2rem; display: inline-block; margin: 0 0.5rem 0.5rem 0; padding: 0 8px; } .widget_tag_cloud a:hover { font-size: 0.9rem !important; background-color: #000; color: #fff; border-color: transparent; } .searchform input{ width: 100%; } .azt-hosting-banner { display: block; background-size: cover; background-position: center; } .wpcf7-form textarea { line-height: 1.8; } body .WgT3g2QMG2EkONNZMDzzNDwIYUuyMjx{ display: none; } .azt-blog-posts { padding: 60px 0; background: #fff; } .blog-posts .post-item { margin-bottom: 40px; } .blog-posts .post-item img { margin-bottom: 15px; height: 200px; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); } .blog-posts .post-title { font-size: 20px; } .blog-posts .post-title a { color: var(--primary-color); } .az-blog .post { border-bottom: 1px solid #ddd; padding-bottom: 35px; margin-bottom: 50px; } .az-blog .post:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .single-post-related { border-top: 2px solid #000; padding: 30px 0; margin-top: 30px; border-bottom: 2px solid #000; } .post-title a { color: inherit; } .azt-hero-section-small .inner-hero-section h1 { display: flex; margin: 0; padding: 20px 0; } /* ========================================================= Hero section — design tokens Colors now reference the site's real root variables (see aztheme-root-colors.css) instead of a separate palette, so the hero matches the rest of the site. ========================================================= */ :root { --azt-gold: #D9A464; /* warm sand accent — complements --accent-color, used only inside the mockup card for a second color note (chrome dot, one content block) */ } /* ========================================================= Layout ========================================================= */ .azt-hero-section { position: relative; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: clamp(28px, 4vw, 64px); padding: 30px; background: #e6e0e0; overflow: hidden; border-radius: 3px; } /* subtle ambient depth, tinted with the brand accent instead of an unrelated color */ .azt-hero-section::before { content: ""; position: absolute; top: -120px; right: -160px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(181, 102, 81, 0.10) 0%, rgba(181, 102, 81, 0) 70%); pointer-events: none; } .inner-hero-section { position: relative; z-index: 1; max-width: 560px; flex: 1 1 320px; /* lower basis so it can shrink gracefully on mid-size desktop widths (992–1199px container ranges) instead of forcing the row to wrap */ min-width: 0; /* allow the flex item to shrink below its content's natural width so long words/paragraphs wrap normally instead of pushing the row wider than the container */ text-align: left; } /* Override in case the theme's base styles set text-align: center on .container / .inner-hero-section or its children with equal or higher specificity — this is the actual cause of the centered look. */ .inner-hero-section, .inner-hero-section h1, .inner-hero-section .hero-lead, .inner-hero-section .hero-eyebrow, .inner-hero-section .hero-cta { text-align: left !important; } /* ========================================================= Eyebrow label ========================================================= */ .hero-eyebrow { display: inline-block; font-size: 13px; letter-spacing: 0.02em; color: var(--accent-text); /* darker accent shade — passes AA as text */ background: #fff; border: 1px solid rgba(181, 102, 81, 0.18); border-radius: 6px; padding: 5px 10px; margin-bottom: 20px; } /* ========================================================= Headline & lead ========================================================= */ .inner-hero-section h1 { font-weight: 600; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.12; letter-spacing: -0.01em; color: var(--primary-color); margin: 0 0 20px; } .hero-lead { font-size: 18px; line-height: 1.6; color: var(--body-color); max-width: 480px; margin: 0 0 36px; } /* ========================================================= CTA button ========================================================= */ .hero-cta { display: flex; justify-content: flex-start; gap: 16px; } .hero-cta .button { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; color: #FFFFFF; background: var(--accent-dark); /* passes AA (~4.76:1) with white text — plain --accent-color does not */ padding: 15px 26px; border-radius: 8px; text-decoration: none; box-shadow: 0 1px 2px rgba(26, 26, 26, 0.08); transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .hero-cta .button:hover { background: #8f4d3b; /* one step darker than --accent-dark for hover */ box-shadow: 0 6px 16px rgba(181, 102, 81, 0.32); } .hero-cta .button:active { transform: translateY(1px); } .hero-cta .button:focus-visible { outline: 2px solid var(--azt-gold); outline-offset: 3px; } .button-icon { transition: transform 0.18s ease; } .hero-cta .button:hover .button-icon { transform: translateX(3px); } /* ========================================================= Signature visual — stacked theme-preview cards ========================================================= */ .hero-visual { position: relative; z-index: 1; flex: 0 0 clamp(220px, 26vw, 340px); /* scales down smoothly instead of wrapping when the container narrows (e.g. 992–1199px range) */ width: clamp(220px, 26vw, 340px); height: clamp(200px, 20vw, 300px); } .theme-card { position: absolute; width: 88%; border-radius: 14px; background: var(--surface-color); border: 1px solid var(--border-color); box-shadow: 0 20px 40px -20px rgba(26, 26, 26, 0.25); } .card-1 { top: 3%; left: 6%; z-index: 3; transform: rotate(-2deg); overflow: hidden; } .card-2 { top: 13%; left: 16%; height: 74%; z-index: 2; transform: rotate(4deg); background: #F3EAE6; /* pale terracotta tint, replaces the old cool-blue tint */ } .card-3 { top: 22%; left: 25%; height: 67%; z-index: 1; transform: rotate(9deg); background: #F6EEDD; /* pale gold tint */ border-color: rgba(217, 164, 100, 0.35); } .card-chrome { display: flex; gap: 5px; padding: 10px 12px; border-bottom: 1px solid var(--border-color); } .chrome-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-color); } .chrome-dot:first-child { background: var(--azt-gold); } .card-body { padding: 14px; } .card-hero-bar { height: 34px; border-radius: 6px; background: linear-gradient(120deg, var(--accent-color), var(--accent-dark)); margin-bottom: 10px; } .card-row { display: flex; gap: 8px; margin-bottom: 10px; } .card-block { flex: 1; height: 46px; border-radius: 6px; } .block-a { background: #F3EAE6; } .block-b { background: #F6DCB8; } .card-lines { display: flex; flex-direction: column; gap: 6px; } .card-lines span { display: block; height: 6px; border-radius: 3px; background: var(--border-color); } .card-lines span:nth-child(1) { width: 90%; } .card-lines span:nth-child(2) { width: 75%; } .card-lines span:nth-child(3) { width: 55%; } .wp-block-quote { box-sizing: border-box; overflow-wrap: break-word; border: 1px dashed var(--accent-color); padding: 15px 15px 0px 15px; border-radius: 3px; background: #f9f9f9; } /* gentle entrance, respects reduced-motion */ @media (prefers-reduced-motion: no-preference) { .theme-card { animation: azt-card-in 0.6s ease both; } .card-1 { animation-delay: 0.05s; } .card-2 { animation-delay: 0.15s; } .card-3 { animation-delay: 0.25s; } @keyframes azt-card-in { from { opacity: 0; transform: translateY(16px) rotate(var(--rot, 0deg)); } to { opacity: 1; } } } /* ========================================================= Responsive ========================================================= */ /* Below 768px: deliberate stacked layout (text only — hero-visual hidden). One clean, intentional breakpoint — not a side effect of the theme's own container width steps at 992/1200px, which is what caused the visual to drop onto its own line unpredictably before. */ @media (max-width: 767px) { .azt-hero-section { flex-direction: column; align-items: flex-start; gap: 40px; padding: 15px; } .inner-hero-section { max-width: 100%; flex-basis: auto; } .inner-hero-section h1 { font-size: 30px; } .hero-lead { font-size: 16px; } .hero-cta .button { width: 100%; justify-content: center; } .hero-visual { display: none; } } .single-post-related .post-category { margin: 10px 0 0; } .single-post-related .post-title { margin: 10px 0; } .category .content .post { border-bottom: 1px solid; margin-bottom: 35px; padding-bottom: 20px; } .category .content .post:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* ------------------------------------ Responsive ---------------------------------------- */ @media( min-width: 576px ) { .blog-posts .post-item img { height: 290px; } } @media( min-width: 768px ) { .blog-posts .post-item img { height: 180px; } } @media( min-width: 992px ) { .inner-page { max-width: 80%; margin: 0 auto; } .blog-posts .post-item img { height: 150px; } } @media( min-width: 1200px ) { .container { max-width: 1270px; } .blog-posts .post-item img { height: 200px; } } @media( min-width: 1400px ) { .blog-posts .post-item img { height: 225px; } } @media( max-width: 991.98px ) { .testimonial-item:nth-child(3n+1) { clear: inherit; } .testimonial-item:nth-child(3n) { margin-right: 10%; } .testimonial-item:nth-child(2n) { margin-right: 0; } .testimonial-item:nth-child(2n+1) { clear: both; } .testimonial-item { width: 45%; margin-right: 10%; } .azt-features .feature-item { width: 50%; } .theme-content { margin-bottom: 3rem; } .mc4wp-form label { width: 100%; } .download-hero-wrapper .download-details { padding: 0 3rem; } .azt-hero-section .hero-title { font-size: 2.875rem; } .azt-hero-section .small-text { font-size: 20px; } .azt-hero-section { min-height: 450px; } .azt-hero-section {margin: 20px 0 0;} .azt-latest-themes,.azt-blog-posts,.azt-testimonial {padding: 15px 0;} } @media ( max-width: 767.98px ) { .inner-header.azt-display-flex { display: block; } .header-brand { text-align: center; padding-top: 15px; } .azt-nav li { margin: 0 10px; } .azt-hero-section { min-height: 390px; } .azt-hero-section .small-text { font-size: 16px; } .azt-hero-section .hero-title { font-size: 2rem; } .inner-hero-section .discount-code { font-size: 24px; margin: 0 0 0.5rem; } .section-header p { font-size: 18px; line-height: 24px; max-width: 80%; margin: 0 auto; } .azt-features .feature-item p { font-size: 18px; line-height: 24px; } .testimonial-item .quote { font-size: 18px; } .azt-blog-posts .section-header {margin-bottom: 20px;} .theme-items .theme-item {margin-bottom: 20px;} } @media( max-width: 575.98px ) { .header-brand { width: 100%; text-align: center; } .azt-nav { width: 100%; text-align: center; padding-bottom: 15px; } .testimonial-item { width: 100%; margin-right: 0; margin-bottom: 1.5rem; } .azt-features .feature-item { width: 100%; } .azt-free-themes .theme-items .theme-item { margin-right: 10%; width: 100%; margin: 0 0 3rem; } .theme-buttons .demo-url { margin-left: 0; text-transform: capitalize; letter-spacing: 0; } .download-hero-wrapper .download-details { padding: 0 1rem; } .azt-hero-section .hero-title { font-size: 24px; } .inner-hero-section .discount-code { font-size: 20px; margin-bottom: 25px; max-width: 90%; line-height: 30px; } .azt-hero-section { min-height: 280px; } .azt-hero-section .small-text { letter-spacing: 1px; } .edd_download_purchase_form, .edd_download_quantity_wrapper, .edd_purchase_submit_wrapper, .theme-buttons .demo-url { display: block; width: 100%; } .edd_download_quantity_wrapper .edd-item-quantity { width: 100%; text-align: center; } .theme-buttons .edd-add-to-cart, .theme-buttons .demo-url { width: 100%; margin-top: 8px; } .azt-hero-section-small { min-height: 200px; } .azt-nav li a { padding: 0; } }