/** * Kelid Sazi - Main Stylesheet * * Non-critical styles loaded deferred. * Critical styles are in critical.css (inlined in ). * * @package KelidSazi * @since 1.0.0 */ /* ============================================ TABLE OF CONTENTS ============================================ 1. Layout 2. Header 3. Navigation 4. Footer 5. Posts & Archives 6. Single Post/Page 7. Components 8. Forms 9. WooCommerce (basic, extended in woocommerce.css) 10. Utilities ============================================ */ /* 1. Layout ============================================ */ .site-main { min-height: 60vh; padding-block: var(--space-6); } @media (min-width: 768px) { .site-main { padding-block: var(--space-10); } } .container--narrow { max-width: var(--container-narrow); } /* Sidebar layout */ .content-area { width: 100%; } @media (min-width: 1024px) { .has-sidebar .content-area { width: calc(100% - var(--sidebar-width) - var(--space-8)); float: inline-start; } .sidebar { width: var(--sidebar-width); float: inline-end; } } /* 2. Header ============================================ */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); background-color: var(--color-white); border-bottom: var(--border-width) solid var(--border-color); box-shadow: var(--shadow-sm); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--header-height-mobile); } @media (min-width: 768px) { .site-header__inner { height: var(--header-height); } } .site-branding { flex-shrink: 0; } .site-branding__logo img { max-height: 48px; width: auto; } .site-title { font-size: var(--text-xl); font-weight: var(--font-bold); margin: 0; } .site-title a { color: var(--color-gray-900); text-decoration: none; } .site-description { font-size: var(--text-sm); color: var(--color-gray-500); margin: var(--space-1) 0 0; } /* 3. Navigation ============================================ */ .primary-navigation { display: flex; align-items: center; } .primary-navigation__toggle { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); color: var(--color-gray-700); background: none; border: none; cursor: pointer; font-size: var(--text-base); } .primary-navigation__toggle-icon { display: flex; flex-direction: column; gap: 4px; } .primary-navigation__toggle-icon span { display: block; width: 24px; height: 2px; background-color: currentColor; transition: transform var(--transition-fast); } .primary-navigation__menu { display: none; list-style: none; margin: 0; padding: 0; } @media (min-width: 1024px) { .primary-navigation__toggle { display: none; } .primary-navigation__menu { display: flex; gap: var(--space-1); } } .primary-navigation__menu a { display: block; padding: var(--space-2) var(--space-3); color: var(--color-gray-700); text-decoration: none; border-radius: var(--radius-md); font-weight: var(--font-medium); transition: background-color var(--transition-fast), color var(--transition-fast); } .primary-navigation__menu a:hover, .primary-navigation__menu a:focus-visible, .primary-navigation__menu .current-menu-item > a { color: var(--color-primary); background-color: var(--color-primary-50); } /* Mobile panel */ .mobile-navigation { position: fixed; inset: 0; z-index: var(--z-overlay); background-color: var(--color-white); transform: translateX(-100%); transition: transform var(--transition-base); } html[dir="rtl"] .mobile-navigation { transform: translateX(100%); } .mobile-navigation.is-open { transform: translateX(0); } .mobile-navigation__inner { padding: var(--space-16) var(--space-4); overflow-y: auto; max-height: 100vh; } .mobile-navigation__menu { list-style: none; margin: 0; padding: 0; } .mobile-navigation__menu a { display: block; padding: var(--space-3) 0; font-size: var(--text-lg); color: var(--color-gray-900); text-decoration: none; border-bottom: var(--border-width) solid var(--border-color); } /* 4. Footer ============================================ */ .site-footer { background-color: var(--color-gray-900); color: var(--color-gray-300); padding-block: var(--space-12) var(--space-6); } .site-footer a { color: var(--color-gray-300); text-decoration: none; } .site-footer a:hover { color: var(--color-white); } .site-footer__widgets { display: grid; grid-template-columns: 1fr; gap: var(--space-8); margin-bottom: var(--space-8); } @media (min-width: 768px) { .site-footer__widgets { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .site-footer__widgets { grid-template-columns: repeat(4, 1fr); } } .site-footer__bottom { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding-top: var(--space-6); border-top: var(--border-width) solid var(--color-gray-700); text-align: center; } @media (min-width: 768px) { .site-footer__bottom { flex-direction: row; justify-content: space-between; text-align: start; } } .site-footer__legal-menu { display: flex; gap: var(--space-4); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .site-footer__copyright { font-size: var(--text-sm); margin: 0; } /* 5. Posts & Archives ============================================ */ .page-header { margin-bottom: var(--space-8); } .page-title { font-size: var(--text-3xl); margin-bottom: var(--space-2); } .archive-description { color: var(--color-gray-600); max-width: 800px; } .posts-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 600px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } } .post-card { border: var(--border-width) solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition-fast); background-color: var(--color-white); } .post-card:hover { box-shadow: var(--shadow-md); } .post-card__image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--color-gray-100); } .post-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); } .post-card:hover .post-card__image img { transform: scale(1.05); } .post-card__content { padding: var(--space-4); } .post-card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); } .post-card__title a { color: var(--color-gray-900); text-decoration: none; } .post-card__title a:hover { color: var(--color-primary); } .post-card__meta { font-size: var(--text-sm); color: var(--color-gray-500); margin-bottom: var(--space-2); } .post-card__excerpt { font-size: var(--text-sm); color: var(--color-gray-600); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* 6. Single Post/Page ============================================ */ .single-post__header, .single-page__header { margin-bottom: var(--space-6); } .single-post__title, .single-page__title { font-size: var(--text-4xl); margin-bottom: var(--space-4); } .single-post__meta { display: flex; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-gray-500); flex-wrap: wrap; } .single-post__featured-image { margin-bottom: var(--space-6); border-radius: var(--radius-lg); overflow: hidden; } .single-post__featured-image img { width: 100%; height: auto; } .single-post__content, .single-page__content { font-size: var(--text-lg); line-height: var(--leading-relaxed); } .single-post__footer { margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--border-width) solid var(--border-color); } .single-post__label { font-weight: var(--font-semibold); margin-inline-end: var(--space-2); } /* 7. Components ============================================ */ /* Pagination */ .pagination { margin-top: var(--space-8); display: flex; justify-content: center; gap: var(--space-2); } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: var(--space-2); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-md); color: var(--color-gray-700); text-decoration: none; font-size: var(--text-sm); transition: all var(--transition-fast); } .pagination .page-numbers.current { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } .pagination .page-numbers:hover:not(.current) { border-color: var(--color-primary); color: var(--color-primary); } /* Search form */ .search-form { display: flex; gap: var(--space-2); } .search-form input[type="search"] { flex: 1; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-md); font-size: var(--text-base); } .search-form button { padding: var(--space-2) var(--space-4); background-color: var(--color-primary); color: var(--color-white); border-radius: var(--radius-md); font-weight: var(--font-medium); white-space: nowrap; } /* 8. Forms ============================================ */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], textarea, select { width: 100%; padding: var(--space-3); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-md); background-color: var(--color-white); font-size: var(--text-base); transition: border-color var(--transition-fast); } input:focus, textarea:focus, select:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px var(--color-primary-100); } label { display: block; margin-bottom: var(--space-1); font-weight: var(--font-medium); font-size: var(--text-sm); } /* 9. No Results / 404 ============================================ */ .no-results { text-align: center; padding: var(--space-12) 0; } .no-results h1 { margin-bottom: var(--space-4); } .not-found__links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); list-style: none; padding: 0; } .not-found__links a { display: inline-block; padding: var(--space-2) var(--space-4); background-color: var(--color-primary-50); border-radius: var(--radius-md); text-decoration: none; } /* 10. Utilities ============================================ */ .text-center { text-align: center; } .text-start { text-align: start; } .text-end { text-align: end; } html[dir="rtl"] .text-start { text-align: right; } html[dir="rtl"] .text-end { text-align: left; } .hidden { display: none !important; } @media (min-width: 768px) { .hidden-desktop { display: none !important; } } @media (max-width: 767px) { .hidden-mobile { display: none !important; } } /* ============================================ HOMEPAGE SECTIONS ============================================ */ .home-section { padding-block: var(--space-12); } .section-title { font-size: var(--text-3xl); text-align: center; margin-bottom: var(--space-8); } /* Hero */ .hero { position: relative; padding-block: var(--space-16); background-color: var(--color-gray-900); color: var(--color-white); overflow: hidden; } .hero__background { position: absolute; inset: 0; z-index: 0; } .hero__bg-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.3)); } .hero__content { position: relative; z-index: 1; text-align: center; max-width: 700px; margin-inline: auto; } .hero__title { font-size: var(--text-4xl); font-weight: var(--font-bold); color: var(--color-white); margin-bottom: var(--space-4); } @media (min-width: 768px) { .hero__title { font-size: var(--text-5xl); } } .hero__subtitle { font-size: var(--text-lg); color: var(--color-gray-300); margin-bottom: var(--space-8); } .hero__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-6); } .hero__cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); font-weight: var(--font-semibold); text-decoration: none; transition: all var(--transition-fast); } .hero__cta--primary { background-color: var(--color-primary); color: var(--color-white); } .hero__cta--primary:hover { background-color: var(--color-primary-dark); color: var(--color-white); } .hero__cta--secondary { background-color: transparent; color: var(--color-white); border: 2px solid var(--color-white); } .hero__cta--secondary:hover { background-color: var(--color-white); color: var(--color-gray-900); } .hero__search { max-width: 500px; margin-inline: auto; } .hero__search-form { display: flex; background-color: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; } .hero__search-input { flex: 1; padding: var(--space-3) var(--space-4); border: none; font-size: var(--text-base); color: var(--color-gray-900); } .hero__search-input:focus { outline: none; } .hero__search-submit { padding: var(--space-3) var(--space-5); background-color: var(--color-primary); color: var(--color-white); border: none; cursor: pointer; } /* Featured Categories */ .featured-categories__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (min-width: 600px) { .featured-categories__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .featured-categories__grid { grid-template-columns: repeat(6, 1fr); } } .featured-category-card { text-decoration: none; color: inherit; border: var(--border-width) solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition-fast); } .featured-category-card:hover { box-shadow: var(--shadow-md); } .featured-category-card__image { aspect-ratio: 4/3; overflow: hidden; background-color: var(--color-gray-100); } .featured-category-card__image img { width: 100%; height: 100%; object-fit: cover; } .featured-category-card__image--placeholder { display: flex; align-items: center; justify-content: center; color: var(--color-gray-400); } .featured-category-card__content { padding: var(--space-3); text-align: center; } .featured-category-card__title { font-size: var(--text-sm); font-weight: var(--font-semibold); margin-bottom: var(--space-1); color: var(--color-gray-900); } .featured-category-card__count { font-size: var(--text-xs); color: var(--color-gray-500); } /* Section CTA */ .section-cta { text-align: center; margin-top: var(--space-8); } /* CTA Section */ .cta-section { background-color: var(--color-gray-50); } .cta-section__content { text-align: center; max-width: 600px; margin-inline: auto; margin-bottom: var(--space-10); } .cta-section__title { font-size: var(--text-3xl); margin-bottom: var(--space-4); } .cta-section__text { font-size: var(--text-lg); color: var(--color-gray-600); margin-bottom: var(--space-6); } .cta-section__highlights { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (min-width: 768px) { .cta-section__highlights { grid-template-columns: repeat(4, 1fr); } } .cta-highlight { text-align: center; padding: var(--space-4); } .cta-highlight__icon { display: inline-block; margin-bottom: var(--space-3); color: var(--color-primary); } .cta-highlight__title { font-size: var(--text-base); font-weight: var(--font-semibold); margin-bottom: var(--space-1); } .cta-highlight__text { font-size: var(--text-sm); color: var(--color-gray-500); } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); font-weight: var(--font-semibold); border-radius: var(--radius-md); text-decoration: none; transition: all var(--transition-fast); cursor: pointer; } .btn--primary { background-color: var(--color-primary); color: var(--color-white); } .btn--primary:hover { background-color: var(--color-primary-dark); color: var(--color-white); } .btn--secondary { background-color: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); } .btn--secondary:hover { background-color: var(--color-primary); color: var(--color-white); } .btn--lg { padding: var(--space-3) var(--space-8); font-size: var(--text-lg); } /* ============================================ SINGLE POST ENHANCEMENTS ============================================ */ /* Author Bio */ .author-bio { margin-top: var(--space-8); padding: var(--space-6); background-color: var(--color-gray-50); border-radius: var(--radius-lg); border: var(--border-width) solid var(--border-color); } .author-bio__header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); } .author-bio__avatar { border-radius: var(--radius-full); width: 64px; height: 64px; } .author-bio__name { font-weight: var(--font-bold); color: var(--color-gray-900); text-decoration: none; font-size: var(--text-lg); } .author-bio__description { font-size: var(--text-sm); color: var(--color-gray-600); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); } .author-bio__more { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-primary); text-decoration: none; } /* Table of Contents */ .table-of-contents { margin-bottom: var(--space-8); padding: var(--space-4); background-color: var(--color-gray-50); border-radius: var(--radius-md); border: var(--border-width) solid var(--border-color); } .table-of-contents__heading { font-size: var(--text-lg); margin-bottom: var(--space-3); } .table-of-contents__list { list-style: none; margin: 0; padding: 0; } .table-of-contents__item { padding-block: var(--space-1); } .table-of-contents__item--sub { padding-inline-start: var(--space-4); } .table-of-contents__link { color: var(--color-gray-700); text-decoration: none; font-size: var(--text-sm); transition: color var(--transition-fast); } .table-of-contents__link:hover { color: var(--color-primary); } /* Post Navigation */ .post-navigation { margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--border-width) solid var(--border-color); } .post-navigation__links { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 600px) { .post-navigation__links { grid-template-columns: 1fr 1fr; } } .post-navigation__link { text-decoration: none; color: var(--color-gray-700); padding: var(--space-4); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-md); transition: border-color var(--transition-fast); } .post-navigation__link:hover { border-color: var(--color-primary); } .post-navigation__link--next { text-align: end; } .post-navigation__direction { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-gray-500); margin-bottom: var(--space-2); } .post-navigation__link--next .post-navigation__direction { justify-content: flex-end; } /* Related Posts */ .related-posts { margin-top: var(--space-10); } .related-posts__heading { font-size: var(--text-2xl); margin-bottom: var(--space-6); } /* 404 Page */ .error-404 { text-align: center; padding-block: var(--space-12); } .error-404__code { display: block; font-size: 8rem; font-weight: var(--font-bold); color: var(--color-gray-200); line-height: 1; } .error-404__title { font-size: var(--text-3xl); margin-bottom: var(--space-4); } .error-404__search { max-width: 400px; margin-inline: auto; margin-bottom: var(--space-8); } .error-404__links { display: grid; grid-template-columns: 1fr; gap: var(--space-6); text-align: start; max-width: 600px; margin-inline: auto; } @media (min-width: 600px) { .error-404__links { grid-template-columns: 1fr 1fr; } } .error-404__links h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); } .error-404__links ul { list-style: none; padding: 0; margin: 0; } .error-404__links li { margin-bottom: var(--space-2); } /* Subcategories Grid */ .subcategories-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); } .subcategory-card { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background-color: var(--color-gray-100); border-radius: var(--radius-full); text-decoration: none; font-size: var(--text-sm); color: var(--color-gray-700); transition: background-color var(--transition-fast); } .subcategory-card:hover { background-color: var(--color-primary-100); color: var(--color-primary); } .subcategory-card__count { font-size: var(--text-xs); color: var(--color-gray-500); } /* ============================================ RESPONSIVE FIXES ============================================ */ /* Prevent horizontal scroll */ html, body { max-width: 100%; overflow-x: clip; } /* Ensure tables don't overflow on mobile */ table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Responsive embeds */ iframe, embed, object, video { max-width: 100%; } /* Fix for 100vw scrollbar issue */ .full-width { width: 100vw; max-width: 100vw; margin-inline-start: calc(-50vw + 50%); } /* Mobile menu body lock */ body.mobile-menu-open { overflow: hidden; position: fixed; width: 100%; } /* Ensure sticky header doesn't overlap anchors */ [id] { scroll-margin-top: var(--header-height-mobile); } @media (min-width: 768px) { [id] { scroll-margin-top: var(--header-height); } } /* ============================================ BREAKPOINT AUDIT FIXES ============================================ */ /* 320px - 479px (Small Mobile) */ @media (max-width: 479px) { h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } .single-post__title, .single-page__title, .product_title { font-size: var(--text-2xl); } .container { padding-inline: var(--space-3); } .posts-grid, .woocommerce-products-grid, .services-grid { grid-template-columns: 1fr; gap: var(--space-3); } .post-card__content, .product-card__content, .service-card__content { padding: var(--space-3); } .hero { padding-block: var(--space-10); } .hero__title { font-size: var(--text-2xl); } .page-contact__layout, .single-product-layout, .checkout-layout { grid-template-columns: 1fr; } } /* 480px - 767px (Large Mobile) */ @media (min-width: 480px) and (max-width: 767px) { .posts-grid, .woocommerce-products-grid, .services-grid { grid-template-columns: repeat(2, 1fr); } } /* 768px - 1023px (Tablet) */ @media (min-width: 768px) and (max-width: 1023px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } .woocommerce-products-grid { grid-template-columns: repeat(3, 1fr); } .services-grid { grid-template-columns: repeat(2, 1fr); } .site-footer__widgets { grid-template-columns: repeat(2, 1fr); } .page-contact__layout { grid-template-columns: 1fr; } .checkout-layout { grid-template-columns: 1fr; } } /* ============================================ KEYBOARD NAVIGATION FIXES ============================================ */ /* Make all interactive elements tabbable and visible */ a[href]:not([tabindex="-1"]), area[href]:not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]) { /* These are already focusable; styles above handle visibility */ } /* Fix for dropdown menus appearing behind content */ .primary-navigation__menu .sub-menu { z-index: var(--z-dropdown); } /* Ensure modal dialogs have proper stacking */ .mobile-navigation { z-index: var(--z-overlay); } .mobile-navigation__overlay { z-index: calc(var(--z-overlay) - 1); } /* ============================================ LAYOUT SHIFT FIXES ============================================ */ /* Reserve space for images */ img:not([width]):not([height]) { aspect-ratio: auto; } img[width][height] { aspect-ratio: attr(width) / attr(height); } /* Sticky header space reservation */ .has-sticky-header .site-main { padding-top: 0; } /* Prevent CLS from dynamic content */ .woocommerce-notices-wrapper:empty { display: none; } /* Reserve space for admin bar */ @media (min-width: 601px) { .admin-bar .site-header { top: 32px; } } @media (max-width: 600px) { .admin-bar .site-header { top: 46px; } } .admin-bar [id] { scroll-margin-top: calc(var(--header-height-mobile) + 46px); } @media (min-width: 601px) { .admin-bar [id] { scroll-margin-top: calc(var(--header-height) + 32px); } }