/* Theme Name: Organic Millet Theme URI: https://example.com/organic-millet Author: Your Studio Name Author URI: https://example.com Description: A modern, lightweight, fully responsive WordPress theme built for organic food and millet powder stores. Deep WooCommerce integration, Gutenberg + Elementor compatible, WCAG 2.1 AA accessible, translation-ready, and built with performance and SEO best practices in mind. No content is hardcoded — every product, category, page and menu is managed from wp-admin. Version: 1.0.0 Requires at least: 6.4 Tested up to: 6.6 Requires PHP: 7.4 WC requires at least: 8.0 WC tested up to: 9.0 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: organic-millet Tags: e-commerce, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, translation-ready, accessibility-ready, block-patterns, wide-blocks */ /* ========================================================= TABLE OF CONTENTS 1.0 CSS Custom Properties (Design Tokens) 2.0 Reset & Base 3.0 Accessibility 4.0 Typography 5.0 Layout / Containers / Grid 6.0 Buttons & Forms 7.0 Header & Navigation 8.0 Footer 9.0 Cards / Badges / Price 10.0 Widgets & Sidebar 11.0 Blog / Single Post 12.0 Page-specific (About / Contact) 13.0 Utilities 14.0 Responsive (WooCommerce-specific rules live in css/woocommerce.css) ========================================================= */ /* 1.0 CSS Custom Properties ------------------------------- */ :root{ --color-primary: #0048A8; --color-primary-dark: #003580; --color-primary-light: #e7edf8; --color-secondary: #ECB449; --color-secondary-dark: #d69f34; --color-neutral: #C8D0D8; --color-neutral-light: #F4F6F8; --color-white: #FFFFFF; --color-text: #23282E; --color-text-muted: #5B6670; --color-border: #C8D0D8; --color-success: #2E7D32; --color-error: #C62828; --font-heading: "Lato", "Segoe UI", system-ui, sans-serif; --font-accent: "Lato", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, sans-serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --shadow-sm: 0 1px 3px rgba(0,24,64,0.08); --shadow-md: 0 6px 20px rgba(0,24,64,0.10); --shadow-lg: 0 16px 40px rgba(0,24,64,0.14); --container-width: 1240px; --gutter: clamp(1rem, 4vw, 2.5rem); --carousel-gap: clamp(1rem, 2.5vw, 1.75rem); --transition: 200ms ease; } /* 2.0 Reset & Base ------------------------------------------ */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; /* Definitive safety net against any stray horizontal overflow (e.g. from the product carousels) reaching the page level. Applied to specifically, not — this clips at the true root scrolling box without changing body's own overflow behavior, so .site-header's `position: sticky` (which resolves against body/viewport, since body has no overflow of its own) is completely unaffected. */ overflow-x: hidden; } body{ margin:0; max-width:100%; font-family: var(--font-body); color: var(--color-text); background: var(--color-white); font-size: 14px; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* Headings/buttons/prices use rem units sized against the root element (still 16px), so they're unaffected by the 14px body base and stay legible at every breakpoint — only body copy shrinks. */ img{ max-width:100%; height:auto; display:block; } ul, ol{ padding-left: 1.25rem; } a{ color: var(--color-primary); text-decoration:none; transition: color var(--transition); } a:hover, a:focus{ color: var(--color-secondary-dark); } figure{ margin:0; } table{ width:100%; border-collapse: collapse; } /* 3.0 Accessibility ------------------------------------------ */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:100000; background: var(--color-primary); color:#fff; padding: 0.85rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0; font-weight:600; } .skip-link:focus{ left:0; } :focus-visible{ outline: 3px solid var(--color-secondary); outline-offset: 2px; } .screen-reader-text{ border:0; clip:rect(1px,1px,1px,1px); clip-path: inset(50%); height:1px; width:1px; overflow:hidden; position:absolute; word-wrap:normal !important; margin:-1px; padding:0; } .screen-reader-text:focus{ background:#fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); clip:auto !important; clip-path:none; color:var(--color-text); display:block; height:auto; left:5px; top:5px; padding:1rem; width:auto; z-index:100000; } [aria-hidden="true"]{ pointer-events:none; } /* 4.0 Typography ------------------------------------------ */ h1,h2,h3,h4,h5,h6{ font-family: var(--font-heading); font-weight: 700; color: var(--color-text); line-height:1.25; margin: 0 0 0.6em; } h1{ font-size: clamp(2rem, 4vw, 3rem); } h2{ font-size: clamp(1.6rem, 3vw, 2.25rem); } h3{ font-size: clamp(1.25rem, 2.2vw, 1.6rem); } p{ margin: 0 0 1.2em; color: var(--color-text); } .eyebrow{ display:inline-block; text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:700; color: var(--color-primary); background: var(--color-primary-light); padding:.35rem .85rem; border-radius: 999px; margin-bottom:.75rem; } /* 5.0 Layout ------------------------------------------ */ .container{ width:100%; max-width: var(--container-width); margin-inline:auto; padding-inline: var(--gutter); } .section{ padding-block: clamp(2.5rem, 6vw, 5rem); } .section--muted{ background: var(--color-neutral-light); } .grid{ display:grid; gap: clamp(1.25rem, 3vw, 2rem); } .grid--2{ grid-template-columns: repeat(2, 1fr); } .grid--3{ grid-template-columns: repeat(3, 1fr); } .grid--4{ grid-template-columns: repeat(4, 1fr); } .content-sidebar-wrap{ display:grid; grid-template-columns: 1fr; gap: 2.5rem; } @media(min-width: 960px){ .content-sidebar-wrap{ grid-template-columns: minmax(0,2.2fr) minmax(0,1fr); } } /* WooCommerce shop/category/single-product pages have no sidebar — the main content simply takes the full container width. */ .woocommerce-full-width{ width:100%; } /* 6.0 Buttons & Forms ------------------------------------------ */ .btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .wp-block-button__link{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family: var(--font-accent); font-weight:600; font-size:.95rem; padding: .85rem 1.75rem; border-radius: var(--radius-sm); border: 2px solid transparent; cursor:pointer; transition: all var(--transition); line-height:1.2; text-align:center; } .btn-primary, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .wp-block-button__link{ background: var(--color-primary) !important; color:#fff !important; border-color: var(--color-primary) !important; } .btn-primary:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .wp-block-button__link:hover{ background: var(--color-primary-dark) !important; border-color: var(--color-primary-dark) !important; color:#fff !important; } .btn-secondary, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit.alt, .woocommerce-cart .checkout-button{ background: var(--color-secondary) !important; color: var(--color-text) !important; border-color: var(--color-secondary) !important; } .btn-secondary:hover, .woocommerce a.button.alt:hover, .woocommerce #respond input#submit.alt:hover{ background: var(--color-secondary-dark) !important; border-color: var(--color-secondary-dark) !important; } .btn-outline{ background:transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn-outline:hover{ background: var(--color-primary); color:#fff; } .btn-block{ width:100%; } input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=tel], input[type=number], textarea, select{ width:100%; padding:.75rem 1rem; border:1px solid var(--color-border); border-radius: var(--radius-sm); background:#fff; font-family: var(--font-body); font-size:1rem; transition: border-color var(--transition), box-shadow var(--transition); } input:focus, textarea:focus, select:focus{ border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,72,168,.15); outline:none; } label{ font-weight:600; display:block; margin-bottom:.4rem; } /* 7.0 Header & Navigation ------------------------------------------ */ .site-header{ border-bottom:1px solid var(--color-border); background:#fff; position:sticky; top:0; z-index:999; } /* --- 7.1 Top bar --- */ .top-bar{ background: var(--color-primary); color:#fff; font-size:.8rem; } .top-bar-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:.4rem; min-height:34px; } .top-bar-social{ display:flex; align-items:center; gap:.5rem; } .top-bar-social a{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; transition: background var(--transition), color var(--transition); } .top-bar-social a:hover, .top-bar-social a:focus-visible{ background: var(--color-secondary); color: var(--color-text); } .top-bar-social svg{ width:14px; height:14px; } .top-bar-links{ display:flex; align-items:center; gap:1.25rem; } .top-bar-links a{ color:#fff; font-weight:600; } .top-bar-links a:hover, .top-bar-links a:focus-visible{ color: var(--color-secondary); } @media(max-width:767px){ .top-bar{ display:none; } /* Mobile header keeps only logo, search, account, cart, hamburger — see 7.3 */ } /* --- 7.2 Main header (logo / search / actions) --- */ .main-header{ padding-block: 1rem; } .main-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:nowrap; } .site-branding{ display:flex; align-items:center; gap:.75rem; flex-shrink:1; min-width:0; overflow:hidden; } .site-title{ margin:0; font-size:1.4rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .site-title a{ color: var(--color-text); font-family: var(--font-heading); font-weight:700; } /* Custom logo — fixed 100x100 display box regardless of the source image's own dimensions (object-fit keeps it from stretching/distorting). The surrounding .site-branding flex rules (flex-shrink, min-width:0) keep the rest of the header from breaking on narrow screens. */ .custom-logo-link{ display:inline-flex; flex-shrink:0; } .custom-logo-link img.custom-logo{ width:100px; height:100px; max-width:100px; max-height:100px; object-fit:contain; display:block; } @media(max-width:359px){ /* Extra-narrow phones only: shrink the logo box slightly so it never forces the header icons off-screen; still square, still proportional. */ .custom-logo-link img.custom-logo{ width:72px; height:72px; max-width:72px; max-height:72px; } } .site-description{ margin:0; font-size:.8rem; color: var(--color-text-muted); } .main-header-search{ flex:1; max-width:640px; margin-inline:2rem; display:none; } .main-header-search form.woocommerce-product-search, .main-header-search form.search-form{ display:flex; align-items:stretch; height:48px; border:2px solid var(--color-border); border-radius: var(--radius-sm); overflow:hidden; background:#fff; box-sizing:border-box; } .main-header-search input[type="search"]{ border:none; border-radius:0; flex:1; height:100%; padding:0 1rem; box-sizing:border-box; font-family:inherit; font-size:.95rem; line-height:normal; } .main-header-search input[type="search"]:focus{ box-shadow:none; outline:none; } .main-header-search button, .main-header-search input[type="submit"]{ background: var(--color-primary); color:#fff; border:none; padding:0 1.1rem; cursor:pointer; height:100%; box-sizing:border-box; margin:0; display:flex; align-items:center; justify-content:center; transition: background var(--transition); } .main-header-search button.search-icon-submit{ width:48px; padding:0; flex-shrink:0; } .main-header-search button:hover{ background: var(--color-primary-dark); } @media(min-width:768px){ .main-header-search{ display:block; } } .header-actions{ display:flex; align-items:center; gap:1rem; flex-shrink:0; } .header-icon-link{ position:relative; color: var(--color-text); display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; transition: background var(--transition), color var(--transition); } .header-icon-link:hover, .header-icon-link:focus-visible{ background: var(--color-primary-light); color: var(--color-primary); } .header-icon-link .icon-label{ display:none; } /* Login/Register link gets extra width to hold its text label on desktop; cart icon (no label span) keeps the compact circular look. */ .header-account-link{ width:auto; height:auto; padding:.5rem .75rem; border-radius: var(--radius-sm); gap:.4rem; } .header-account-link .icon-label, .header-account-toggle .icon-label{ display:none; font-size:.85rem; font-weight:600; white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; } @media(min-width:960px){ .header-account-link .icon-label, .header-account-toggle .icon-label{ display:inline; } } .cart-count{ position:absolute; top:2px; right:2px; background: var(--color-secondary); color: var(--color-text); font-size:.65rem; font-weight:700; border-radius:999px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 4px; line-height:1; } /* Account: logged-out shows text link, logged-in shows icon w/ dropdown */ .header-account{ position:relative; } .header-account-toggle{ display:flex; align-items:center; gap:.4rem; color: var(--color-text); font-weight:600; font-size:.9rem; background:none; border:none; cursor:pointer; padding:.4rem .5rem; border-radius: var(--radius-sm); } .header-account-toggle:hover, .header-account-toggle:focus-visible{ color: var(--color-primary); background: var(--color-primary-light); } .header-account-menu{ display:none; position:absolute; right:0; top: calc(100% + 8px); background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); min-width:180px; padding:.5rem; z-index:60; } .header-account.is-open .header-account-menu{ display:block; } .header-account-menu a{ display:block; padding:.55rem .75rem; border-radius: var(--radius-sm); color: var(--color-text); font-weight:500; font-size:.9rem; } .header-account-menu a:hover{ background: var(--color-primary-light); color: var(--color-primary); } /* Mobile-only icon toggles */ .mobile-search-toggle, .menu-toggle{ background:none; border:2px solid var(--color-border); border-radius: var(--radius-sm); padding:.5rem .65rem; cursor:pointer; align-items:center; justify-content:center; } .mobile-search-toggle{ display:inline-flex; } .menu-toggle .bar{ display:block; width:22px; height:2px; background: var(--color-text); margin:4px 0; transition: transform var(--transition), opacity var(--transition); } .menu-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(6px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; } .menu-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); } @media(min-width:768px){ .mobile-search-toggle{ display:none; } } /* Mobile search panel (slides below header) */ .mobile-search-panel{ display:none; padding: .85rem var(--gutter); border-top:1px solid var(--color-border); background:#fff; } .mobile-search-panel.is-open{ display:block; } .mobile-search-panel form{ display:flex; align-items:stretch; height:44px; border:2px solid var(--color-border); border-radius: var(--radius-sm); overflow:hidden; box-sizing:border-box; } .mobile-search-panel input[type="search"]{ border:none; flex:1; height:100%; padding:0 1rem; box-sizing:border-box; font-family:inherit; font-size:.95rem; line-height:normal; } .mobile-search-panel button{ background: var(--color-primary); color:#fff; border:none; padding:0 1.1rem; height:100%; box-sizing:border-box; margin:0; display:flex; align-items:center; justify-content:center; cursor:pointer; } .mobile-search-panel button.search-icon-submit{ width:44px; padding:0; flex-shrink:0; } @media(min-width:768px){ .mobile-search-panel{ display:none !important; } } /* --- 7.3 Primary navigation --- */ /* .nav-bar spans the full viewport width (like .top-bar / .main-header) so its top border reaches edge-to-edge; the constrained .container inside it keeps the actual menu content aligned with the rest of the page. Per-item left borders stay on .main-navigation itself (inside the container). .main-navigation no longer has its own bottom border. */ .nav-bar{ border-top: 1px solid #e8e8e8; } .main-navigation{ display:block; } .main-navigation ul{ list-style:none; margin:0; padding:0; display:flex; gap:0; align-items:stretch; } .main-navigation > ul > li{ border-left: 1px solid #e8e8e8; } .main-navigation > ul > li:first-child{ border-left: none; } .main-navigation > ul > li:last-child{ border-right: none; } .main-navigation a{ display: inline-block; color: var(--color-text); font-weight:600; font-size:.95rem; padding:.85rem 1.5rem; position:relative; } .main-navigation a::after{ content:""; position:absolute; left:1.5rem; right:1.5rem; bottom:0; height:2px; width:auto; transform: scaleX(0); transform-origin:left; background: var(--color-secondary); transition: transform var(--transition); } .main-navigation a:hover::after, .main-navigation .current-menu-item > a::after{ transform: scaleX(1); } .main-navigation ul ul{ display:none; position:absolute; background:#fff; box-shadow: var(--shadow-md); border-radius: var(--radius-sm); padding:.5rem; min-width:200px; flex-direction:column; gap:0; z-index:50; } .main-navigation li{ position:relative; } .main-navigation li:hover > ul, .main-navigation li:focus-within > ul{ display:flex; } .main-navigation ul ul a{ padding:.6rem .75rem; display:block; } .main-navigation ul ul li{ border-left:none; } .submenu-toggle{ background:none; border:none; position:absolute; right:0; top:0; padding:.4rem .6rem; cursor:pointer; color: var(--color-text); font-size:1rem; display:none; } @media(min-width:960px){ .menu-toggle{ display:none; } } /* Mobile/tablet nav drawer (fixes the previous bug where the nav container itself stayed display:none and only the inner