/* ========================================================================== Generic Multi-Supplier E-Commerce — core stylesheet Phase 0 — Foundation ========================================================================== */ /* -------------------------------------------------------------------------- Theme variables All UI colors come from these variables — never hard-code colors in templates. The active theme is selected via . -------------------------------------------------------------------------- */ :root, [data-bs-theme="light"] { --brand-primary: #14B8A6; --brand-primary-dark: #0F766E; --bg-body: #FFFFFF; --bg-surface: #F8FAFC; --text-primary: #0F172A; --text-secondary: #475569; --border-color: #E2E8F0; color-scheme: light; } [data-bs-theme="dark"] { --brand-primary: #2DD4BF; --brand-primary-dark: #14B8A6; --bg-body: #000000; --bg-surface: #0F0F0F; --text-primary: #F8FAFC; --text-secondary: #CBD5E1; --border-color: #262626; color-scheme: dark; } /* -------------------------------------------------------------------------- Base / typography -------------------------------------------------------------------------- */ body { font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif; background-color: var(--bg-body); color: var(--text-primary); } a { color: var(--brand-primary); } /* -------------------------------------------------------------------------- Theme-aware surfaces -------------------------------------------------------------------------- */ .navbar, footer { background-color: var(--bg-surface); border-bottom-color: var(--border-color); border-top-color: var(--border-color); } .navbar-brand { color: var(--brand-primary); } .card { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-primary); } .btn-outline-secondary { border-color: var(--border-color); color: var(--text-primary); } .text-muted { color: var(--text-secondary); } /* -------------------------------------------------------------------------- Responsive helpers -------------------------------------------------------------------------- */ @media (max-width: 575.98px) { .container { padding-inline: 1rem; } } /* -------------------------------------------------------------------------- Catalog (Phase 2) — all colors come from the theme variables above -------------------------------------------------------------------------- */ .product-card__image { aspect-ratio: 1 / 1; object-fit: cover; background-color: var(--bg-body); } .product-card__placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; font-size: 2rem; color: var(--text-secondary); background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color); } .product-card__placeholder--lg { aspect-ratio: 1 / 1; border: 1px solid var(--border-color); border-radius: 0.5rem; } .product-detail__main { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background-color: var(--bg-surface); } .price { font-weight: 700; color: var(--text-primary); } .price-old { color: var(--text-secondary); text-decoration: line-through; font-size: 0.9em; } .pagination .page-link { background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-primary); } .pagination .page-item.active .page-link { background-color: var(--brand-primary); border-color: var(--brand-primary); color: #ffffff; } .pagination .page-item.disabled .page-link { background-color: var(--bg-body); color: var(--text-secondary); } .breadcrumb { font-size: 0.875rem; } .breadcrumb a { color: var(--brand-primary); text-decoration: none; } .breadcrumb-item.active { color: var(--text-secondary); } /* -------------------------------------------------------------------------- Product gallery — clickable main image, thumbnails and zoom hint. Colors come from the theme variables above; logical properties keep RTL. -------------------------------------------------------------------------- */ .product-gallery__zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } /* Block display removes the inline-baseline gap, but keeps alt text visible. */ .product-gallery__zoom img { display: block; } .product-gallery__hint { position: absolute; inset-block-end: 0.5rem; inset-inline-end: 0.5rem; padding: 0.1rem 0.35rem; border: 1px solid var(--border-color); border-radius: 0.375rem; font-size: 0.9rem; line-height: 1.4; color: var(--text-primary); background-color: var(--bg-body); } /* The strip hugs its tiles instead of stretching them over a rigid 25% grid cell, so the gaps stay even and any number of pictures wraps tidily. Scoped to the gallery container; the Bootstrap gutter still provides the spacing, and the tiles keep their own bounded size (see below). */ [data-product-gallery] .row.g-2 { margin-inline: 0; margin-block-start: 0.5rem; } [data-product-gallery] .row.g-2 > .col-3 { flex: 0 0 auto; inline-size: auto; } .product-gallery__thumb { display: block; /* The tile owns its size: a small square on every breakpoint instead of whatever width the surrounding column happens to have. */ inline-size: clamp(4.5rem, 20vw, 5.5rem); max-inline-size: 100%; aspect-ratio: 1 / 1; padding: 0.125rem; border: 2px solid var(--border-color); border-radius: 0.5rem; background-color: var(--bg-surface); cursor: pointer; } .product-gallery__thumb img { display: block; inline-size: 100%; block-size: 100%; /* Contain (not cover): the product must never be cropped. */ object-fit: contain; border-radius: 0.375rem; } .product-gallery__thumb:hover, .product-gallery__thumb:focus-visible { border-color: var(--brand-primary-dark); } .product-gallery__thumb[aria-current="true"] { border-color: var(--brand-primary); } .product-gallery__modal-image { max-height: 75vh; width: auto; height: auto; object-fit: contain; } /* -------------------------------------------------------------------------- Kalanology UI shell (Phase 9-B) — branding, header, footer, contact page. Colors come from the theme variables above; logical properties keep RTL. -------------------------------------------------------------------------- */ /* JPEG logo has no transparency, so it sits on a fixed light surface that works identically in light and dark themes. Height only — never stretched. */ .brand-logo { display: block; block-size: 2.75rem; inline-size: auto; padding: 0.125rem 0.25rem; border-radius: 0.5rem; background-color: #F8FAFC; object-fit: contain; } .brand-logo--footer { block-size: 3.25rem; } .contact-list li + li { margin-block-start: 0.375rem; } .contact-list a { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; } .contact-list a:hover, .contact-list a:focus-visible { color: var(--brand-primary-dark); } .footer-divider { border-color: var(--border-color); opacity: 1; } /* Long Persian phone numbers stay LTR and never wrap awkwardly. */ .user-phone { font-variant-numeric: tabular-nums; white-space: nowrap; } /* -------------------------------------------------------------------------- Phase 9-C — UI/UX polish. All colors come from the theme variables; logical properties keep RTL; nothing here touches business markup. -------------------------------------------------------------------------- */ /* One radius for cards, buttons, inputs and thumbnails. */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-border-radius: 0.5rem; } /* Typography hierarchy (Vazirmatn stays untouched). */ body { line-height: 1.8; } h1, h2, h3 { font-weight: 700; } /* Brand-consistent primary buttons (was Bootstrap's default blue). */ .btn-primary { --bs-btn-color: #ffffff; --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--brand-primary-dark); --bs-btn-hover-border-color: var(--brand-primary-dark); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: var(--brand-primary-dark); --bs-btn-active-border-color: var(--brand-primary-dark); } /* Clear keyboard focus everywhere, using the brand color. */ a:focus-visible, .btn:focus-visible, .form-control:focus-visible, .navbar-toggler:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } /* Navbar depth: a whisper of shadow separates it from the page when sticky. */ .navbar { box-shadow: 0 1px 4px rgb(0 0 0 / 6%); } /* Product cards: unified surface, soft shadow, subtle hover lift. */ .product-card { transition: transform 150ms ease, box-shadow 150ms ease; } .product-card:hover, .product-card:focus-within { transform: translateY(-2px); box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 8%); } /* Price hierarchy: current price in brand color; old price demoted. */ .price { color: var(--brand-primary-dark); font-weight: 700; } .price-old { opacity: 0.75; font-size: 0.875em; } /* Product detail: a quiet block that anchors price + availability. */ .product-detail__price-block { display: inline-block; padding: 0.75rem 1rem; border: 1px solid var(--border-color); border-radius: 0.5rem; background-color: var(--bg-surface); } .product-detail__price-block .price { font-size: 1.5rem; } /* Cart: the payable total outranks everything around it. */ .cart-summary-total { font-size: 1.4rem; color: var(--brand-primary-dark); } /* Cart line image keeps a tidy square; the product is never distorted. */ .cart-item__image { inline-size: 100%; aspect-ratio: 1 / 1; object-fit: contain; background-color: var(--bg-surface); } /* Floating theme toggle (same button, same id — placement only). */ .theme-fab { position: fixed; inset-inline-end: 1rem; inset-block-end: 1rem; z-index: 1030; /* above content, below Bootstrap modals (1055). */ } .theme-fab .btn { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; /* 44px touch target */ block-size: 2.75rem; padding: 0; font-size: 1.25rem; border-radius: 50%; background-color: var(--bg-surface); border-color: var(--border-color); color: var(--text-primary); box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 12%); } .theme-fab .btn:hover { color: var(--brand-primary-dark); border-color: var(--brand-primary-dark); } /* Footer: clearer separation between stacked sections on mobile. */ @media (max-width: 767.98px) { footer .col-12 + .col-12 { padding-block-start: 0.75rem; margin-block-start: 0.75rem; border-block-start: 1px solid var(--border-color); } } /* ===== Phase 10 — Product user reviews ===== */ .review-list { display: grid; gap: 0.75rem; } .review-item { padding: 0.75rem 1rem; background-color: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 0.5rem; } /* The visitor's own review stands out slightly from the other reviews. */ .review-item--own { border-color: var(--brand-primary); } .review-body { white-space: pre-line; /* plain newlines stay visible; text is escaped */ overflow-wrap: anywhere; /* long payloads can never widen the page */ } .review-badge { --bs-badge-color: var(--brand-primary-dark); } .review-form textarea { min-block-size: 6rem; } /* ========================================================================== Phase 12A — homepage storefront polish. Colors come from the theme variables above; logical properties keep RTL; no !important anywhere. ========================================================================== */ /* Hero logo: reuses the shared .brand-logo plate (the JPEG has no transparency, so it keeps a fixed light plate in both themes) but is sized by the viewport instead of the bar height. Width only, height left automatic — the aspect ratio can therefore never be stretched. */ .brand-logo--hero { block-size: auto; inline-size: min(100%, 32rem); padding: 0.75rem 1rem; } @media (min-width: 768px) { .brand-logo--hero { inline-size: min(100%, 44rem); } } /* Brand name under the logo. Sized up from body copy so it reads as the brand, and colored from an existing theme variable (the same one the price and cart totals already use) — so Light/Dark/System all follow automatically. */ .home-hero__brand { margin-block: 1rem 0; font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: 700; color: var(--brand-primary-dark); } /* Trust card claim marks: a quiet ring on the page surface, so the three approved claims read as one row on desktop and stack cleanly on mobile. */ .trust-mark { display: inline-flex; align-items: center; justify-content: center; inline-size: 3rem; block-size: 3rem; margin-block-end: 0.5rem; font-size: 1.375rem; color: var(--brand-primary-dark); background-color: var(--bg-body); border: 1px solid var(--border-color); border-radius: 50%; } /* Category cards share the product card's quiet lift, so the homepage reads as one storefront. Border and shadow only — nothing here moves the layout. */ .home-category { transition: border-color 150ms ease, box-shadow 150ms ease; } .home-category:hover, .home-category:focus-within { border-color: var(--brand-primary); box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 8%); } /* Child-category badges become light chips instead of solid blocks, so a card can hold several without shouting. Scoped to the homepage category card, so the catalog's own badges are untouched. */ .home-category .badge { --bs-badge-color: var(--text-secondary); background-color: var(--bg-body); border: 1px solid var(--border-color); font-weight: 500; }