/* ========================================================================== Base — all colors from CSS variables (set per-brand in the layout ). Uses LOGICAL properties only (inline/block, start/end) so RTL flips for free. ========================================================================== */ /* Vazirmatn (variable, OFL) — proper Arabic/Kurdish glyphs; subsets load only for the ranges the page actually uses (unicode-range). */ @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/vazirmatn-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08E3-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; } @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/vazirmatn-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+2020, U+20A0-20C0; } @font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/vazirmatn-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212, U+FEFF, U+FFFD; } *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; color: var(--color-ink); background: var(--color-background); line-height: 1.6; } /* RTL locales (Arabic/Kurdish) render with Vazirmatn for clean Arabic-script shaping; line-height a touch taller for the taller glyphs. */ body.dir-rtl { font-family: 'Vazirmatn', "Segoe UI", Tahoma, system-ui, sans-serif; line-height: 1.75; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } h1, h2, h3 { line-height: 1.25; } .container { width: min(1120px, 100% - 2rem); margin-inline: auto; } main.container { padding-block: 2rem; } /* Skip link (a11y) */ .skip-link { position: absolute; inset-block-start: -48px; inset-inline-start: 0; background: var(--color-primary); color: #fff; padding: .5rem 1rem; z-index: 100; transition: inset-block-start .15s; } .skip-link:focus { inset-block-start: 0; } /* Header */ .site-header { background: var(--color-surface); border-block-end: 1px solid var(--color-border); } .header-inner { display: flex; align-items: center; gap: 1.5rem; padding-block: 1rem; flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; gap: .6rem; } .brand-logo { height: 40px; width: auto; display: block; } .brand-name { font-weight: 700; font-size: 1.25rem; color: var(--color-primary); } .main-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; } .main-nav a { color: var(--color-ink); } .main-nav a:hover { color: var(--color-primary); text-decoration: none; } /* Hamburger toggle (mobile only) */ .nav-toggle { display: none; margin-inline-start: auto; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; cursor: pointer; background: transparent; border: 1px solid var(--color-border); border-radius: 10px; } .nav-toggle-bar { display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--color-ink); transition: transform .2s ease, opacity .2s ease; } .header-inner.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .header-inner.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; } .header-inner.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Language switcher */ .lang-switcher { margin-inline-start: auto; position: relative; } .lang-btn { display: inline-flex; align-items: center; gap: .5rem; background: transparent; border: 1px solid var(--color-border); border-radius: 999px; padding: .4rem .75rem; cursor: pointer; color: var(--color-ink); font: inherit; } .lang-btn:hover { border-color: var(--color-primary); } .lang-flag { font-size: 1.15rem; line-height: 1; } .lang-caret { font-size: .7rem; color: var(--color-muted); } .lang-switcher.open .lang-caret { transform: rotate(180deg); } .lang-menu { list-style: none; margin: 0; padding: .3rem; position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; min-width: 170px; display: none; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.12); } .lang-switcher.open .lang-menu { display: block; } .lang-menu a { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; color: var(--color-ink); border-radius: 8px; } .lang-menu a:hover { background: var(--color-background); text-decoration: none; } .lang-menu a.is-current { background: var(--color-background); font-weight: 600; } .lang-menu a.is-current::after { content: '✓'; margin-inline-start: auto; color: var(--color-primary); } /* Buttons */ .btn { display: inline-block; padding: .7rem 1.3rem; border-radius: 10px; font-weight: 600; cursor: pointer; border: 1px solid transparent; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:hover { filter: brightness(.95); } .btn-outline { border-color: var(--color-primary); color: var(--color-primary); background: transparent; } .btn-outline:hover { background: var(--color-primary); color: #fff; } /* Glowing primary (hero) */ .btn-glow { box-shadow: 0 8px 26px rgba(11,95,255,.55); } .btn-glow:hover { box-shadow: 0 10px 30px rgba(11,95,255,.7); } /* Frosted button on photos/gradients */ .btn-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.75); backdrop-filter: blur(6px); } .btn-ghost:hover { background: #fff; color: var(--color-ink); } /* Solid white button on the blue promo */ .btn-white { background: #fff; color: var(--color-ink); box-shadow: 0 6px 18px rgba(0,0,0,.18); } .btn-white:hover { filter: brightness(.97); } /* Flash */ .flash-stack { margin-block-start: 1rem; display: grid; gap: .5rem; } .flash { padding: .75rem 1rem; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); } .flash-error { border-color: #dc2626; color: #dc2626; } .flash-success { border-color: #16a34a; color: #16a34a; } /* Hero — rounded showcase card; the factory cover photo sits behind the text */ .hero { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; margin-block: 1.25rem 0; padding: clamp(3rem, 9vw, 6rem) 1.5rem; text-align: center; color: #fff; background: linear-gradient(135deg, var(--color-panel), var(--color-primary)); box-shadow: 0 18px 50px rgba(14,23,38,.22); } /* With a cover photo: image + dark scrim so the text always stays readable */ .hero.has-cover::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: var(--hero-img); background-size: cover; background-position: center; } .hero.has-cover::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,12,24,.30), rgba(6,12,24,.62)); } .hero-inner { max-width: 46rem; margin-inline: auto; } .hero h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); margin-block: 0 .6rem; letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(0,0,0,.35); } .hero-tagline { color: rgba(255,255,255,.92); font-size: clamp(1rem, 2vw, 1.2rem); margin-block: 0 1.75rem; text-shadow: 0 1px 10px rgba(0,0,0,.35); } .hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* KPI cards — elevated, soft gradient, icon in the corner */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; margin-block: 2rem 2.5rem; } .kpi { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-surface), var(--color-background)); border: 1px solid var(--color-border); border-radius: 18px; padding: 1.6rem 1.5rem; text-align: start; box-shadow: 0 10px 26px rgba(14,23,38,.08); transition: transform .18s ease, box-shadow .18s ease; } .kpi:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(14,23,38,.14); } .kpi-num { display: block; font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.1; color: var(--color-ink); } .kpi-label { color: var(--color-muted); font-size: .95rem; } .kpi-icon { position: absolute; inset-block-start: 1.25rem; inset-inline-end: 1.25rem; width: 22px; height: 22px; color: var(--color-muted); opacity: .75; } /* Demo price */ .demo-price { text-align: center; margin-block: 2rem; } .price-demo { font-size: 1.5rem; font-weight: 700; color: var(--color-accent); } /* Content pages */ .content-page { max-width: 720px; } .contact-list { list-style: none; padding: 0; } .contact-list li { padding-block: .5rem; border-block-end: 1px solid var(--color-border); } /* Footer — dark rounded slab: brand block + contact rows with icon badges */ .site-footer { background: linear-gradient(160deg, #101a2e, #0a101f); color: #fff; margin-block-start: 3rem; padding-block: 2rem 1.25rem; border-start-start-radius: 22px; border-start-end-radius: 22px; } .footer-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.5rem; align-items: center; } .footer-brand-block { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 1.5rem; } .footer-brand { font-weight: 700; font-size: 1.35rem; margin-block: 0 .3rem; } .footer-tagline { color: rgba(255,255,255,.62); margin: 0; font-size: .92rem; } .footer-contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; } .footer-contacts li { display: flex; align-items: center; gap: .85rem; } .footer-contacts a, .footer-contacts span:not(.footer-icon) { color: rgba(255,255,255,.9); font-size: .95rem; } .footer-contacts a:hover { color: #fff; } .footer-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(60,120,255,.18); color: #7ea6ff; border: 1px solid rgba(126,166,255,.25); } .footer-icon svg { width: 17px; height: 17px; } .footer-copy { color: rgba(255,255,255,.45); font-size: .82rem; margin-block-start: 1.5rem; text-align: end; border-block-start: 1px solid rgba(255,255,255,.07); padding-block-start: 1rem; } @media (max-width: 720px) { .footer-card { grid-template-columns: 1fr; } .footer-copy { text-align: center; } } /* Floating WhatsApp */ .wa-float { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; background: #25D366; color: #fff; padding: .8rem 1rem; border-radius: 50px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,.2); z-index: 50; } .wa-float:hover { text-decoration: none; filter: brightness(.95); } /* Header actions (account/login/logout) */ .header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 1rem; } .header-account { color: var(--color-ink); font-weight: 600; } .link-button { background: none; border: 0; color: var(--color-muted); cursor: pointer; font: inherit; padding: 0; } .link-button:hover { color: var(--color-primary); } .header-logout { display: inline; } .lang-switcher { margin-inline-start: 0; } /* Mobile header: hamburger reveals the nav + actions as a dropdown panel */ @media (max-width: 820px) { .header-inner { flex-wrap: wrap; gap: 1rem; } .brand { margin-inline-end: auto; order: 1; } .nav-toggle { display: flex; margin-inline-start: 0; order: 2; } .main-nav, .header-actions { order: 4; flex-basis: 100%; display: none; flex-direction: column; align-items: stretch; gap: .25rem; margin-inline-start: 0; } .header-inner.nav-open .main-nav, .header-inner.nav-open .header-actions { display: flex; } .main-nav { padding-block: .5rem; border-block-start: 1px solid var(--color-border); } .main-nav a { padding: .6rem .25rem; } .header-actions { padding-block-end: .5rem; border-block-end: 1px solid var(--color-border); } /* Language switcher: show the full flag list inline, no toggle button needed */ .lang-switcher { width: 100%; } .lang-btn { display: none; } .lang-menu { position: static; display: block; box-shadow: none; border: 0; min-width: 0; padding: 0; margin-block-start: .25rem; } } /* Auth / forms */ .auth-card { max-width: 640px; margin-inline: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 2rem; } .auth-card-narrow { max-width: 420px; } .auth-card h1 { margin-block: 0 .25rem; } .auth-sub { color: var(--color-muted); margin-block: 0 1.5rem; } .form { display: grid; gap: 1rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } } .form-group { display: grid; gap: .35rem; } .form-group > span { font-weight: 600; font-size: .9rem; } .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), .form-group select, .form-group textarea { width: 100%; padding: .65rem .75rem; border: 1px solid var(--color-border); border-radius: 9px; font: inherit; background: var(--color-background); color: var(--color-ink); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); } .field-error { color: #dc2626; font-size: .85rem; margin: 0; } .checkbox { display: flex; align-items: flex-start; gap: .5rem; font-size: .95rem; } .checkbox input { margin-block-start: .2rem; } .form-inline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .link-muted { color: var(--color-muted); font-size: .9rem; } .btn-block { width: 100%; text-align: center; } .auth-alt { text-align: center; margin-block-start: 1.25rem; color: var(--color-muted); } /* Account / status */ .account-dash, .status-body { max-width: 640px; } .account-links { display: flex; gap: 1rem; flex-wrap: wrap; margin-block: 1.5rem; } .account-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1rem 1.5rem; font-weight: 600; color: var(--color-ink); } .status-contact { margin-block: 1.5rem; } .mt { margin-block-start: 1.5rem; } /* Home sections */ .home-section { margin-block: 2.5rem; } .home-section h2 { margin-block: 0 1rem; } .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; } .category-chip { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 1rem; color: var(--color-ink); font-weight: 600; } .category-chip:hover { border-color: var(--color-primary); text-decoration: none; } .category-count { background: var(--color-background); border-radius: 20px; padding: .1rem .6rem; font-size: .85rem; color: var(--color-muted); } /* Promo band — blue gradient slab with a faint molecule pattern + inset frame */ .promo-band { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(120deg, #1e5eff 0%, var(--color-primary) 55%, #0a3fd1 100%); color: #fff; border-radius: 22px; padding: .75rem; margin-block: 2.5rem; box-shadow: 0 16px 40px rgba(11,95,255,.30); } /* Molecule/network texture (inline SVG — no external file) */ .promo-band::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.18' stroke-width='1.2'%3E%3Cpath d='M20 40 60 20 100 44 140 24M20 40 24 92M60 20 64 76M100 44 96 104M140 24 144 84M24 92 64 76 96 104 144 84M24 92 28 140M64 76 68 132M96 104 100 150M144 84 148 136'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.22'%3E%3Ccircle cx='20' cy='40' r='3.5'/%3E%3Ccircle cx='60' cy='20' r='3.5'/%3E%3Ccircle cx='100' cy='44' r='3.5'/%3E%3Ccircle cx='140' cy='24' r='3.5'/%3E%3Ccircle cx='24' cy='92' r='3.5'/%3E%3Ccircle cx='64' cy='76' r='3.5'/%3E%3Ccircle cx='96' cy='104' r='3.5'/%3E%3Ccircle cx='144' cy='84' r='3.5'/%3E%3C/g%3E%3C/svg%3E"); background-size: 200px; } .promo-inner { border: 1px solid rgba(255,255,255,.28); border-radius: 16px; padding: 2rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } .promo-inner p { margin: 0; font-size: clamp(1.05rem, 2.2vw, 1.45rem); font-weight: 600; max-width: 34rem; line-height: 1.5; } /* Product grid + cards */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; } .gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; } .product-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .product-card-media { position: relative; display: block; aspect-ratio: 1; background: var(--color-background); } .product-card-media img { width: 100%; height: 100%; object-fit: cover; } .product-placeholder, .placeholder-lg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 2.5rem; font-weight: 700; color: var(--color-muted); background: var(--color-background); } .badge { position: absolute; inset-block-start: .5rem; inset-inline-start: .5rem; font-size: .7rem; font-weight: 700; padding: .2rem .5rem; border-radius: 6px; } .badge-featured { background: var(--color-accent); color: #1a1a1a; } .product-card-body { padding: .85rem; display: flex; flex-direction: column; gap: .3rem; position: relative; } .product-card-title { font-size: .95rem; margin: 0; } .product-card-title a { color: var(--color-ink); } .product-card-price { color: var(--color-primary); font-weight: 700; margin: 0; } .wish-form { position: absolute; inset-block-start: .6rem; inset-inline-end: .6rem; margin: 0; } .wish-btn { background: none; border: 0; font-size: 1.3rem; cursor: pointer; color: var(--color-muted); line-height: 1; } .wish-btn.is-active { color: #e23b3b; } /* Catalog list + filters */ .catalog { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; } @media (max-width: 780px) { .catalog { grid-template-columns: 1fr; } } .catalog-filters { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.25rem; } .filter-form { display: grid; gap: 1rem; } .clear-all { display: block; text-align: center; margin-block-start: .5rem; } .results-count { color: var(--color-muted); margin-block: 0 1rem; } .empty-state { color: var(--color-muted); padding-block: 2rem; } /* Pagination */ .pagination { display: flex; gap: .35rem; flex-wrap: wrap; margin-block-start: 2rem; } .page-link { padding: .5rem .8rem; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-ink); } .page-link.is-current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* Product detail */ .breadcrumb { color: var(--color-muted); margin-block: 0 1.25rem; font-size: .9rem; } .breadcrumb a { color: var(--color-muted); } .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; } @media (max-width: 780px) { .product-detail { grid-template-columns: 1fr; } } .gallery-main { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--color-background); } .gallery-thumbs { display: flex; gap: .5rem; margin-block-start: .75rem; flex-wrap: wrap; } .thumb { border: 1px solid var(--color-border); border-radius: 8px; padding: 0; width: 64px; height: 64px; overflow: hidden; cursor: pointer; background: none; } .thumb img { width: 100%; height: 100%; object-fit: cover; } .product-info h1 { margin-block: 0 .5rem; } .rating { color: var(--color-accent); font-size: 1.1rem; margin: 0 0 .5rem; } .rating-num { color: var(--color-muted); font-size: .85rem; margin-inline-start: .4rem; } .sku { color: var(--color-muted); font-size: .85rem; margin-block: 0 1rem; } .price-box { display: flex; align-items: center; gap: .75rem; margin-block: 0 1.25rem; } .price-label { color: var(--color-muted); font-size: .9rem; } .price-value { font-size: 1.6rem; font-weight: 700; color: var(--color-primary); } .savings-badge { background: #16a34a; color: #fff; border-radius: 6px; padding: .15rem .5rem; font-weight: 700; font-size: .85rem; } .variant-group, .qty-row { margin-block: 1rem; } .variant-label { display: block; font-weight: 600; margin-block-end: .4rem; } .swatches { display: flex; gap: .5rem; } .swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--color-border); background: var(--sw); cursor: pointer; } .swatch.is-active { outline: 2px solid var(--color-primary); outline-offset: 2px; } .size-pills { display: flex; gap: .5rem; flex-wrap: wrap; } .size-pill { padding: .4rem .9rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); cursor: pointer; } .size-pill.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: 9px; overflow: hidden; } .step-btn { background: var(--color-background); border: 0; width: 42px; height: 42px; font-size: 1.2rem; cursor: pointer; } .stepper input { width: 80px; text-align: center; border: 0; border-inline: 1px solid var(--color-border); height: 42px; } .tier-table { width: 100%; border-collapse: collapse; margin-block: 1.25rem; } .tier-table caption { text-align: start; font-weight: 700; margin-block-end: .5rem; } .tier-table th, .tier-table td { border: 1px solid var(--color-border); padding: .5rem .75rem; text-align: start; } .tier-table th { background: var(--color-background); } .tier-table .tier-row.is-current { background: color-mix(in srgb, var(--color-primary) 10%, transparent); font-weight: 700; } .tier-table .tier-row.is-current td { border-color: var(--color-primary); } .tier-hint { margin-block: -.5rem 1.25rem; color: #16a34a; font-weight: 600; font-size: .92rem; } .wholesale-nudge { background: var(--color-background); border: 1px dashed var(--color-border); border-radius: 10px; padding: 1rem; margin-block: 1.25rem; } .cta-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-block: 1.25rem; } .btn-cta { flex: 1; text-align: center; } .short-desc { color: var(--color-muted); } .product-section { margin-block: 2.5rem; } .review-list { list-style: none; padding: 0; display: grid; gap: 1rem; } .review { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 1rem; } .review-head { display: flex; justify-content: space-between; } .review-stars { color: var(--color-accent); } .review-reply { background: var(--color-background); border-radius: 8px; padding: .5rem .75rem; margin-block-start: .5rem; } .review-title { font-weight: 600; margin-block: .25rem; } /* Buyer review form + star rating input */ .review-form { margin-block-start: 1.5rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--color-border); display: grid; gap: .75rem; max-width: 520px; } .star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .1rem; font-size: 1.6rem; line-height: 1; } .star-input input { position: absolute; opacity: 0; width: 0; height: 0; } .star-input label { color: var(--color-border); cursor: pointer; transition: color .1s; } .star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--color-accent); } .star-input input:focus-visible + label { outline: 2px solid var(--color-accent); outline-offset: 2px; } .category-header { margin-block: 0 1.5rem; } .category-desc { color: var(--color-muted); } /* Basket header link */ .basket-link { position: relative; font-size: 1.3rem; text-decoration: none; } .basket-badge { position: absolute; inset-block-start: -6px; inset-inline-end: -8px; background: var(--color-accent); color: #1a1a1a; border-radius: 20px; font-size: .7rem; font-weight: 700; padding: 0 .35rem; } /* Account area */ .account-area { max-width: 860px; } .muted { color: var(--color-muted); font-size: .88rem; } .d-block { display: block; } .add-basket-form { display: flex; gap: .5rem; margin-block: 1.25rem; flex-wrap: wrap; } .basket-instructions { flex: 1; min-width: 180px; padding: .6rem .7rem; border: 1px solid var(--color-border); border-radius: 9px; } /* Basket + items tables */ .basket-table, .items-table { width: 100%; border-collapse: collapse; margin-block: 1rem; } .basket-table th, .basket-table td, .items-table th, .items-table td { border-block-end: 1px solid var(--color-border); padding: .6rem .5rem; text-align: start; vertical-align: top; } .qty-inline { display: flex; gap: .4rem; align-items: center; } .qty-mini { width: 64px; padding: .35rem; border: 1px solid var(--color-border); border-radius: 7px; } .basket-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-block: 1rem; } .basket-total { font-size: 1.1rem; } /* Status pills + tabs */ .status-pill { display: inline-block; padding: .1rem .55rem; border-radius: 20px; font-size: .78rem; font-weight: 700; } .status-new { background: #e0edff; color: #1e40af; } .status-contacted { background: #fef3c7; color: #92400e; } .status-negotiating { background: #ede9fe; color: #6d28d9; } .status-converted { background: #dcfce7; color: #166534; } .status-rejected { background: #fee2e2; color: #991b1b; } .status-closed { background: #e5e7eb; color: #374151; } .status-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-block: 1rem; } .status-tabs a { padding: .4rem .8rem; border: 1px solid var(--color-border); border-radius: 20px; color: var(--color-ink); font-size: .85rem; } .status-tabs a.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* Request lists */ .request-list { list-style: none; padding: 0; display: grid; gap: .5rem; } .request-list a { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: .8rem 1rem; color: var(--color-ink); } .request-head { display: flex; align-items: center; gap: 1rem; } .inline-actions { display: flex; gap: .4rem; } .btn-sm { padding: .35rem .7rem; font-size: .85rem; border-radius: 8px; } .quote-badge { padding: .15rem .5rem; border-radius: 6px; font-size: .8rem; font-weight: 700; } .quote-accepted { background: #dcfce7; color: #166534; } .quote-declined { background: #fee2e2; color: #991b1b; } .admin-note { background: var(--color-background); border-inline-start: 3px solid var(--color-primary); padding: .75rem 1rem; margin-block: 1rem; border-radius: 8px; } /* Message thread */ .thread { display: grid; gap: .75rem; margin-block: 1rem; } .msg { max-width: 80%; padding: .7rem .9rem; border-radius: 12px; } .msg p { margin: 0 0 .35rem; } .msg-buyer { margin-inline-start: auto; background: var(--color-primary); color: #fff; } .msg-buyer .msg-time, .msg-buyer .attachment { color: rgba(255,255,255,.85); } .msg-admin { margin-inline-end: auto; background: var(--color-surface); border: 1px solid var(--color-border); } .msg-time { font-size: .72rem; opacity: .8; display: block; } .attachment { display: inline-block; font-size: .85rem; } .message-form { display: grid; gap: .5rem; margin-block-start: 1rem; } .message-form textarea { width: 100%; padding: .7rem; border: 1px solid var(--color-border); border-radius: 9px; font: inherit; } .message-actions { display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; } /* Error pages */ .error-page { text-align: center; padding-block: 4rem; } .error-page h1 { font-size: 4rem; color: var(--color-primary); margin: 0; } /* ── Phase 10: announcement ticker, browse-only banner, buyer bell ── */ .site-ticker { background: var(--color-panel); color: #fff; font-size: .9rem; } .site-ticker .container { padding-block: .45rem; text-align: center; } .site-banner { margin-block: .75rem; padding: .6rem .9rem; border-radius: 8px; background: color-mix(in srgb, var(--color-accent) 18%, transparent); border: 1px solid var(--color-accent); color: var(--color-ink); font-size: .92rem; } .notif-link { position: relative; text-decoration: none; font-size: 1.15rem; margin-inline: .35rem; } .notif-link .basket-badge, .basket-link .basket-badge { position: absolute; inset-block-start: -.4rem; inset-inline-end: -.5rem; background: var(--color-accent); color: #fff; border-radius: 999px; min-width: 1.1rem; height: 1.1rem; font-size: .7rem; line-height: 1.1rem; text-align: center; padding-inline: .2rem; }