/* Theme Name: Flatsome Child Description: This is a child theme for Flatsome Theme Author: UX Themes Template: flatsome Version: 3.2 */ /* === BRAND CSS VARIABLES === */ /* Note: tokens.css (loaded globally at priority 20) is the authoritative source for all design tokens. The declarations below are critical-CSS fallbacks — they ensure the variables resolve to brand-correct values even before tokens.css loads (e.g. critical CSS inlining, FOUC race). Keep these values in sync with tokens.css. */ :root { /* Brand primitives (canonical names) */ --color-primary-dark: #393968; --color-primary: #444794; --color-secondary: #524c9f; --color-secondary-light: #8065ab; --color-accent: #ffffff; --color-bg-light: #e3dff4; --color-white: #ffffff; /* Backwards-compatible aliases */ --color-navy: #393968; --color-indigo: #444794; --color-purple: #524c9f; --color-soft: #8065ab; --color-pale: #e3dff4; --color-gold: #a8812d; --color-violet: #a8812d; /* Critical text fallbacks */ --text-main: #393968; --text-primary: #393968; --text-inverse: #ffffff; --text-link: #444794; --text-link-hover: #393968; --font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-arabic: 'Cairo', 'GE SS Two', Arial, sans-serif; --font-english: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Attai navbar height — used for scroll-padding and section offsets */ --attai-navbar-height: 64px; } /* Override Flatsome's scroll-padding-top to account for the attai sticky navbar */ html { scroll-padding-top: var(--attai-navbar-height); overflow-x: clip; } /* Global responsive layout guards */ body { overflow-x: clip; } /* Keep major wrappers inside viewport and centered */ .attai-container, .home-container, .attai-pdp__container, .attai-cart-wrap, .attai-wishlist-page, .attai-shop-wrapper, .attai-footer__inner { width: min(var(--container-max), calc(100% - var(--container-pad))); margin-inline: auto; } /* Prevent flex/grid children from forcing horizontal overflow */ .attai-shop-content, .attai-pdp__grid > *, .attai-cart__item > *, .attai-footer__column, .home-product-grid > *, .home-category-grid > * { min-width: 0; } @media (max-width: 767px) { .attai-container, .home-container, .attai-pdp__container, .attai-cart-wrap, .attai-wishlist-page, .attai-shop-wrapper, .attai-footer__inner { width: min(var(--container-max), calc(100% - 1.5rem)); } } /* === SKIP LINK === */ .attai-skip-link { position: absolute; top: -100%; left: 1rem; z-index: 9999; padding: 0.5rem 1.25rem; background: var(--color-indigo, #444794); color: #fff; font-weight: 600; border-radius: 0 0 8px 8px; text-decoration: none; transition: top 0.2s ease; } .attai-skip-link:focus { top: 0; outline: 3px solid var(--color-pale, #e3dff4); outline-offset: 2px; } /* === GLOBAL BASE === */ body { background-color: var(--color-white); color: var(--text-primary); font-family: var(--font-primary); font-size: var(--fs-base, 0.95rem); line-height: var(--lh-base, 1.5); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { color: var(--text-primary); } a { color: var(--text-link); text-decoration: none; transition: color 0.2s ease; } a:hover, a:focus-visible { color: var(--text-link-hover); text-decoration: underline; outline: none; } ::selection { background: var(--color-pale); color: var(--color-navy); } /* === RTL / ARABIC SUPPORT === When Polylang activates Arabic, WordPress outputs: The selectors below key off dir="rtl" so they fire on ANY RTL language, not just Arabic — future-proof for Hebrew, Persian, etc. --font-base is injected dynamically per-language via attai_output_lang_css_vars() in inc/multilingual.php (priority 8 on wp_head). ============================================================ */ /* Base direction + font for RTL */ html[dir="rtl"] { direction: rtl; } [dir="rtl"], [dir="rtl"] body, body.is-rtl { font-family: var(--font-base, var(--font-arabic)); text-align: right; } /* LTR body — explicit reset so switching languages doesn't bleed over */ [dir="ltr"] body, body.is-ltr { font-family: var(--font-base, var(--font-english)); text-align: left; } /* Apply --font-base to body globally (Polylang injects the correct value) */ body { font-family: var(--font-base, var(--font-primary)); } /* RTL: reverse horizontal padding / margin where direction doesn't auto-flip */ [dir="rtl"] .home-container, [dir="rtl"] .attai-navbar__inner { padding-right: var(--container-pad); padding-left: var(--container-pad); } /* Arabic-specific heading sizing (tighter tracking, slightly larger) */ html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3, html[lang^="ar"] h4 { letter-spacing: 0; line-height: 1.4; } /* Arabic body text: slightly larger base size for readability */ html[lang^="ar"] body { font-size: 1rem; line-height: 1.7; } /* === NAVIGATION === */ /* Hide Flatsome's native header entirely — replaced by #attai-navbar on all pages */ #header { display: none !important; } /* Remove wrapper padding-top that Flatsome's sticky JS injects */ #wrapper { padding-top: 0 !important; } /* Hide top bar above navbar globally */ .header-top, #top-bar, .top-divider, .header-wrapper .header-top { display: none !important; } .header-wrapper, .header-bg, .nav-dark, .header-bottom, #masthead { background-color: var(--color-navy) !important; } .header-nav .nav > li > a, .header-bottom-nav .nav > li > a, .nav-dark .nav > li > a, #masthead a { color: var(--color-white) !important; } .header-nav .nav > li > a:hover, .header-nav .nav > li.active > a, .header-nav .nav > li.current > a, .header-nav .nav > li.current-menu-item > a { color: var(--color-pale) !important; } /* === HERO / HEADER GRADIENT — hide Flatsome page-title bar === */ .page-title, .shop-page-title, .category-page-title { display: none !important; } /* === BUTTONS — PRIMARY === */ .button.primary, .button.checkout, .button.alt, button[type="submit"], .wc-forward, input[type="submit"], .wp-block-button__link { background-color: var(--color-indigo) !important; color: var(--color-white) !important; border-radius: 8px; padding: 12px 24px; border: none; transition: background-color 0.2s ease, transform 0.15s ease; } .button.primary:hover, .button.checkout:hover, .button.alt:hover, button[type="submit"]:hover, .wc-forward:hover, input[type="submit"]:hover, .wp-block-button__link:hover { background-color: var(--color-navy) !important; color: var(--color-white) !important; } /* === BUTTONS — SECONDARY === */ .button.secondary, .button.is-outline { background-color: var(--color-soft) !important; color: var(--color-white) !important; border-radius: 8px; padding: 12px 24px; border: none; } .button.secondary:hover, .button.is-outline:hover { background-color: var(--color-purple) !important; } /* === CARDS & SECTIONS === */ .col-inner, .box { border-radius: 12px; transition: box-shadow 0.25s ease, transform 0.25s ease; } .product-small .col-inner, .product .col-inner { border: 1px solid var(--color-pale); border-radius: 12px; overflow: hidden; background: var(--color-white); box-shadow: 0 2px 8px rgba(57, 57, 104, 0.06); } .product-small .col-inner:hover, .product .col-inner:hover { border-color: var(--color-indigo); box-shadow: 0 8px 28px rgba(68, 71, 148, 0.15); transform: translateY(-4px); } .product-small .box-image, .product .box-image { border-radius: 12px 12px 0 0; overflow: hidden; } .col-inner:hover, .box:hover { box-shadow: 0 4px 20px rgba(68, 71, 148, 0.12); } /* Quick view button */ .quick-view, .quick-view-button, .product .quick-view { background: var(--color-indigo) !important; color: var(--color-white) !important; border-radius: 8px !important; border: none !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; padding: 8px 16px !important; transition: background 0.2s; } .quick-view:hover, .quick-view-button:hover { background: var(--color-navy) !important; } .section-bg-light, section[class*="bg-light"], .row-light { background-color: var(--color-pale) !important; } /* === FORMS === */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], textarea, select, .select2-container .select2-selection { border: 1px solid var(--color-purple) !important; border-radius: 8px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } input:focus, textarea:focus, select:focus, .select2-container--focus .select2-selection { border-color: var(--color-indigo) !important; box-shadow: 0 0 0 3px rgba(68, 71, 148, 0.15) !important; outline: none; } label { color: var(--text-primary); font-weight: 600; } /* === WOOCOMMERCE === */ .woocommerce .price, .woocommerce-Price-amount, .product-info .price, .price ins, .price .amount { color: var(--color-gold) !important; } .woocommerce .onsale, .badge-inner .onsale, .callout .inner { background-color: var(--color-soft) !important; color: var(--color-white) !important; } .single_add_to_cart_button, .add_to_cart_button { background-color: var(--color-indigo) !important; color: var(--color-white) !important; border-radius: 8px; } .single_add_to_cart_button:hover, .add_to_cart_button:hover { background-color: var(--color-navy) !important; } /* ═══════════════════════════════════════════════════════════ FLATSOME OVERRIDES — Social Icons, Image Tools, Nav Arrows ═══════════════════════════════════════════════════════════ */ /* Social share icons (product page, etc.) */ .social-icons a, .share-icons a, .social-icons li a { width: 42px !important; height: 42px !important; min-width: 42px; min-height: 42px; border-radius: 50% !important; background: var(--color-soft) !important; color: var(--color-white) !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; line-height: 1 !important; font-size: 16px !important; transition: background 0.2s, transform 0.2s; border: none !important; } .social-icons a:hover, .share-icons a:hover, .social-icons li a:hover { background: var(--color-indigo) !important; color: var(--color-white) !important; transform: scale(1.1); } /* Product image tools (zoom, lightbox, etc.) */ .image-tools a, .image-tools .zoom-button, .image-tools > a, .has-image-tools .image-tools a { width: 42px !important; height: 42px !important; min-width: 42px; min-height: 42px; border-radius: 50% !important; background: var(--color-soft) !important; color: var(--color-white) !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; line-height: 1 !important; font-size: 16px !important; transition: background 0.2s, transform 0.2s; border: none !important; } .image-tools a:hover, .image-tools .zoom-button:hover { background: var(--color-indigo) !important; transform: scale(1.1); } /* Next/prev navigation arrows (product slider, carousel) */ .next-prev-nav a, .flickity-prev-next-button, .slider-nav-circle a, .button.is-outline.circle { width: 42px !important; height: 42px !important; min-width: 42px; min-height: 42px; border-radius: 50% !important; background: var(--color-soft) !important; color: var(--color-white) !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; line-height: 1 !important; transition: background 0.2s, transform 0.2s; border: none !important; } .next-prev-nav a:hover, .flickity-prev-next-button:hover, .slider-nav-circle a:hover, .button.is-outline.circle:hover { background: var(--color-indigo) !important; transform: scale(1.1); } .flickity-prev-next-button .arrow, .next-prev-nav a i { color: var(--color-white) !important; } /* Flatsome slider dots — force perfect circles */ .flickity-page-dots .dot, .slider-nav-dots .dot, .slider-pagination .dot, .flickity-page-dots .flickity-page-dot, .banner-dot, .slider .dot, button.home-hero-dot, .home-hero-dot { width: 10px !important; height: 10px !important; min-width: 10px !important; min-height: 10px !important; max-width: 10px !important; max-height: 10px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.4) !important; opacity: 1 !important; border: none !important; padding: 0 !important; margin: 0 4px !important; -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; transition: background 0.25s, transform 0.25s; } .flickity-page-dots .dot.is-selected, .slider-nav-dots .dot.is-selected, .slider-pagination .dot.is-selected, .flickity-page-dots .flickity-page-dot.is-selected, .banner-dot.is-active, .slider .dot.is-selected, button.home-hero-dot.is-active, .home-hero-dot.is-active { background: var(--color-white, #fff) !important; transform: scale(1.35); } /* ═══════════════════════════════════════════════════════════ ATTAI NAVBAR + MEGA MENU ═══════════════════════════════════════════════════════════ */ /* ── Logo ── */ .attai-navbar__brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .attai-navbar__logo-img { height: 42px; width: auto; } .attai-navbar__site-name { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; } /* ── Main Menu ── */ .attai-menu { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0; } .attai-menu__item { position: relative; } .attai-menu__link { display: inline-flex; align-items: center; gap: 6px; padding: 0 1.1rem; height: 64px; line-height: 64px; text-decoration: none; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em; transition: color 0.2s, background 0.2s; white-space: nowrap; } /* ── SVG Icons in menu ── */ .attai-icon { width: 18px; height: 18px; flex-shrink: 0; } .attai-caret { width: 10px; height: 10px; flex-shrink: 0; transition: transform 0.25s ease; } .attai-menu__item:hover > .attai-menu__link .attai-caret, .attai-menu__item.is-active > .attai-menu__link .attai-caret { transform: rotate(180deg); } /* ── Mega Menu Panel ── */ .attai-mega { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: min(40rem, calc(100vw - 2rem)); background: var(--color-white); border-radius: 0 0 12px 12px; box-shadow: 0 12px 36px rgba(57, 57, 104, 0.18); border-top: 3px solid var(--color-indigo); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; pointer-events: none; padding: 0; } .attai-menu__item--has-mega:hover > .attai-mega, .attai-menu__item--has-mega:focus-within > .attai-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; } .attai-mega__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 1.5rem 2rem 1.8rem; } .attai-mega__col { padding: 0 1rem; } .attai-mega__col:not(:last-child) { border-right: 1px solid var(--color-pale); } [dir="rtl"] .attai-mega__col:not(:last-child) { border-right: none; border-left: 1px solid var(--color-pale); } .attai-mega__col-heading { display: block; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-navy) !important; padding-bottom: 0.55rem; margin-bottom: 0.65rem; border-bottom: 2px solid var(--color-indigo); text-decoration: none; transition: color 0.2s; } .attai-mega__col-heading:hover { color: var(--color-indigo) !important; } .attai-mega__list { list-style: none; margin: 0; padding: 0; } .attai-mega__list-item { margin: 0; } .attai-mega__list-link { display: block; padding: 0.35rem 0; color: var(--color-navy) !important; text-decoration: none; font-size: 0.9rem; transition: color 0.15s, padding-inline-start 0.2s; } .attai-mega__list-link:hover { color: var(--color-indigo) !important; background: var(--color-pale); padding-inline-start: 6px; } /* Kill Flatsome/WooCommerce current-cat marker & pink hover */ .attai-mega .current-cat > a, .attai-mega .current-cat-parent > a, .attai-mega li.current-cat > a::before, .attai-mega li a::before { color: var(--color-indigo) !important; background: none !important; content: none !important; } .attai-mega li:hover, .attai-mega li a:hover { background-color: var(--color-pale) !important; color: var(--color-indigo) !important; } /* ── Standard Dropdown ── */ .attai-dropdown { position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--color-white); border-radius: 0 0 10px 10px; box-shadow: 0 10px 30px rgba(57, 57, 104, 0.15); border-top: 3px solid var(--color-indigo); list-style: none; margin: 0; padding: 0.5rem 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; pointer-events: none; } [dir="rtl"] .attai-dropdown { left: auto; right: 0; } .attai-menu__item--has-dropdown:hover > .attai-dropdown, .attai-menu__item--has-dropdown:focus-within > .attai-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .attai-dropdown__link { display: block; padding: 0.5rem 1.2rem; color: var(--color-navy) !important; text-decoration: none; font-size: 0.9rem; transition: background 0.15s, color 0.15s; } .attai-dropdown__link:hover { background: var(--color-pale); color: var(--color-indigo) !important; } /* ── No-link span (e.g. Digital Marketing Service — unclickable parent) ── */ .attai-dropdown__link--no-link { cursor: default; color: var(--color-navy); } .attai-dropdown__link--no-link:hover { background: var(--color-pale); color: var(--color-navy) !important; } /* ── Nested Sub-dropdown (e.g. Digital Marketing Service under About) ── */ .attai-dropdown__item--has-submenu { position: relative; } .attai-dropdown__link--caret { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .attai-caret--sub { width: 10px; height: 6px; flex-shrink: 0; transform: rotate(-90deg); transition: transform 0.2s ease; } [dir="rtl"] .attai-caret--sub { transform: rotate(90deg); } .attai-dropdown--sub { top: 0; left: 100%; border-top: none; border-left: 3px solid var(--color-indigo); border-radius: 0 10px 10px 10px; margin-left: 2px; transform: translateX(8px); } [dir="rtl"] .attai-dropdown--sub { left: auto; right: 100%; border-left: none; border-right: 3px solid var(--color-indigo); border-radius: 10px 0 10px 10px; margin-left: 0; margin-right: 2px; transform: translateX(-8px); } .attai-dropdown__item--has-submenu:hover > .attai-dropdown--sub, .attai-dropdown__item--has-submenu:focus-within > .attai-dropdown--sub { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; } /* ── Action Buttons (wishlist, cart) ── */ .attai-navbar__actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; } .attai-wishlist-btn, .attai-cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--color-white) !important; text-decoration: none; transition: background 0.2s, transform 0.15s; } .attai-wishlist-btn:hover, .attai-cart-btn:hover { background: rgba(68, 71, 148, 0.35); transform: scale(1.08); color: var(--color-pale) !important; } .attai-wishlist-btn svg, .attai-cart-btn svg { width: 22px; height: 22px; } .attai-wishlist-btn__count, .attai-cart-btn__count, .attai-wishlist-badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; border-radius: 9px; background: var(--color-indigo); color: var(--color-white); font-size: 0.7rem; font-weight: 700; line-height: 18px; text-align: center; padding: 0 4px; } /* ── Hamburger (mobile) ── */ .attai-hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; background: none; border: none; cursor: pointer; z-index: 10; } .attai-hamburger__line { display: block; width: 24px; height: 2.5px; background: var(--color-white); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } /* Hamburger X animation */ .attai-hamburger[aria-expanded="true"] .attai-hamburger__line:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .attai-hamburger[aria-expanded="true"] .attai-hamburger__line:nth-child(2) { opacity: 0; } .attai-hamburger[aria-expanded="true"] .attai-hamburger__line:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ═══════════════════════════════════════════ NAVBAR — MOBILE (≤ 768px) ═══════════════════════════════════════════ */ @media (max-width: 767px) { .attai-hamburger { display: flex; } .attai-navbar__inner { flex-wrap: wrap; height: auto; padding: 0.6rem 1rem; } .attai-menu { display: none; flex-direction: column; width: 100%; order: 3; padding: 0.5rem 0 1rem; gap: 0; } .attai-menu.is-open { display: flex; } .attai-menu__link { height: auto; line-height: 1.4; padding: 0.7rem 0.5rem; width: 100%; } /* Stack mega/dropdown below on mobile */ .attai-mega, .attai-dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: none; border-radius: 0; pointer-events: auto; min-width: 0; display: none; background: rgba(57, 57, 104, 0.08); } .attai-menu__item--has-mega.is-open > .attai-mega, .attai-menu__item--has-dropdown.is-open > .attai-dropdown { display: block; } /* Nested sub-dropdown on mobile: stacked + indented, click-to-toggle. */ .attai-dropdown--sub { position: static; margin: 0; padding-left: 1rem; border-left: 2px solid var(--color-pale); border-right: none; border-radius: 0; background: rgba(57, 57, 104, 0.04); transform: none; } [dir="rtl"] .attai-dropdown--sub { padding-left: 0; padding-right: 1rem; border-left: none; border-right: 2px solid var(--color-pale); transform: none; } .attai-dropdown__item--has-submenu.is-open > .attai-dropdown--sub { display: block; } .attai-dropdown__item--has-submenu.is-open > .attai-dropdown__link--caret .attai-caret--sub { transform: rotate(0deg); } .attai-mega__inner { grid-template-columns: 1fr; padding: 0.8rem 1rem; gap: 1rem; } .attai-mega__col { padding: 0; } .attai-mega__col:not(:last-child) { border-right: none; border-left: none; border-bottom: 1px solid var(--color-pale); padding-bottom: 0.8rem; } } /*************** ATTAI FOOTER ***************/ .attai-footer { background: var(--color-navy); color: var(--color-pale); padding: 2.8rem 0 2.2rem; border-top: 3px solid var(--color-purple); } .attai-footer__container { width: min(1240px, calc(100% - 2rem)); margin: 0 auto; } .attai-footer__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 1rem; } .attai-footer__social { padding-bottom: 0.6rem; } .attai-footer h3 { margin: 0 0 0.65rem; color: var(--color-white); font-size: 1.04rem; line-height: 1.3; } .attai-footer p, .attai-footer li { margin: 0; color: var(--color-pale); line-height: 1.75; font-size: 0.95rem; } .attai-footer ol, .attai-footer ul { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: 0.38rem; } .attai-footer a { color: var(--color-secondary-light); text-decoration: underline; text-underline-offset: 2px; } .attai-footer a:hover { color: var(--color-white); } .attai-footer__line { height: 1px; background: linear-gradient(90deg, rgba(82, 76, 159, 0.05), rgba(82, 76, 159, 0.75), rgba(82, 76, 159, 0.05)); margin: 1rem 0 1.2rem; } .attai-social-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; } .attai-social-row a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; min-width: 42px; min-height: 42px; border-radius: 50%; background: var(--color-soft); border: none; text-decoration: none; color: var(--color-white); padding: 0; line-height: 1; transition: background 0.2s, transform 0.2s; } .attai-social-row a:hover { background: var(--color-indigo); color: var(--color-white); transform: scale(1.12); } .attai-social-svg { width: 1.2rem; height: 1.2rem; } @media (max-width: 767px) { /*************** ADD MOBILE ONLY CSS HERE ***************/ .attai-footer { padding: 2rem 0 2.2rem; } .attai-footer__grid { grid-template-columns: 1fr; gap: 1rem; } }