/* Theme Name: Diwan Theme URI: https://example.com/diwan Author: Your Name Author URI: https://example.com Description: A reusable, luxury-leaning WooCommerce theme for Kuwait & Gulf eCommerce stores. Full Arabic (RTL) and English (LTR) support, fully responsive for mobile, iPad and desktop. Built to be installed quickly across multiple client projects and rebranded via the Customizer. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: diwan Tags: e-commerce, rtl-language-support, translation-ready, custom-logo, custom-menu, featured-images, responsive-layout, woocommerce WC requires at least: 6.0 WC tested up to: 10.7 */ /* ========================================================= DESIGN TOKENS Re-skin per client by overriding these in the Customizer (Appearance > Customize > Colors) or here. ========================================================= */ :root { /* Color palette — warm luxury neutral */ --color-bg: #faf8f5; --color-surface: #ffffff; --color-surface-alt: #f3efe8; --color-text: #1a1714; --color-muted: #6b6259; --color-accent: #b08d57; /* antique gold / brass */ --color-accent-dark: #8a6d3f; --color-accent-contrast: #ffffff; --color-border: #e7e1d8; --color-sale: #9c2c2c; --color-success: #2e7d52; /* Typography */ --font-heading: "Cormorant Garamond", "El Messiri", Georgia, serif; --font-body: "Jost", "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fs-base: 16px; --lh-base: 1.65; /* Layout */ --container: 1280px; --container-narrow: 880px; --radius: 4px; --radius-lg: 10px; --gap: 1.5rem; --header-h: 84px; /* Effects */ --shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.06); --shadow-md: 0 8px 30px rgba(26, 23, 20, 0.08); --shadow-lg: 0 20px 60px rgba(26, 23, 20, 0.12); --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* Arabic / RTL typography swap (applied when ) */ [dir="rtl"] { --font-heading: "El Messiri", "Cormorant Garamond", "Times New Roman", serif; --font-body: "Tajawal", "Jost", "Segoe UI", Tahoma, sans-serif; } /* ========================================================= RESET & BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } a { color: var(--color-accent-dark); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-accent); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.18; color: var(--color-text); letter-spacing: 0.01em; } h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); } h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); } h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); } h4 { font-size: 1.2rem; } p { margin-block: 0 1rem; } ul, ol { padding-inline-start: 1.25rem; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; } .skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999; background: var(--color-text); color: #fff; padding: 0.75rem 1.25rem; } .skip-link:focus { inset-inline-start: 0; }