/* ========================================================= PSH — Gold & Jewellery | Design System Warm black + classic gold, with gemstone accent colors used consistently for status badges and product tags. NOTE: variable NAMES below are kept identical to the old theme (--gold, --dark2, --gold-dark, etc.) on purpose — dozens of existing templates already reference them via inline styles. Only the hex VALUES were refined, so every old page instantly inherits the new palette with zero edits. New variables (gemstone tones, radii) were added alongside. ========================================================= */ :root{ /* --- base surfaces: pure black + smoky charcoal --- */ --black: #050505; --dark: #161616; --dark2: #1F1F1F; --dark3: #2A2A2A; /* hover / elevated surface */ /* --- gold family — reserved mainly for text/typography now --- */ --gold: #C9A227; --gold-light: #E8C766; --gold-dark: #8A6F28; /* --- text --- */ --text-light: #F2F0EA; --text-muted: #94908A; /* neutral smoky grey, not warm brown anymore */ /* --- gemstone accents — used for badges & tags --- */ --ruby: #7A2E2E; --ruby-light: #C97373; --emerald: #2F5D44; --emerald-light: #6FAE8B; --sapphire: #2E4A6B; --sapphire-light: #7FA8CE; --amethyst: #5B3E73; --amethyst-light: #B091C7; --danger: #E25C56; /* --- shape & spacing tokens --- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; --line: rgba(201,162,39,0.16); /* --- layout --- */ --sidebar-w: 260px; --navbar-h: 65px; } /* ========================================================= PAGE THEME VARIANTS Apply one of these classes to (e.g. {% block body_class %}theme-emerald{% endblock %}) to give a specific page a different accent color while keeping the same black/charcoal base — breaks visual monotony between sections without touching any HTML besides the class name. Only --gold/--gold-light/ --gold-dark/--line move. ========================================================= */ body.theme-emerald{ --gold: #3E7A5C; --gold-light: #6FAE8B; --gold-dark: #28503C; --line: rgba(62,122,92,0.22); } body.theme-sapphire{ --gold: #3E649A; --gold-light: #7FA8CE; --gold-dark: #233E5E; --line: rgba(62,100,154,0.22); } body.theme-amethyst{ --gold: #7A5497; --gold-light: #B091C7; --gold-dark: #4A3360; --line: rgba(122,84,151,0.22); } body.theme-ruby{ --gold: #9A3F3F; --gold-light: #C97373; --gold-dark: #5C2424; --line: rgba(154,63,63,0.22); } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; overflow-x:hidden; } body{ overflow-x:hidden; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; } } body{ font-family:'Vazirmatn', sans-serif; background-color:var(--black); color:var(--text-light); min-height:100vh; position:relative; } /* Optional background image (set via {% block body_class %} + page_bg_image context var — see base.html). A dark scrim sits on top so gold text and form fields stay readable regardless of what the photo looks like. */ body.has-bg-image{ background-image: linear-gradient(180deg, rgba(5,5,5,0.88), rgba(5,5,5,0.94)), var(--bg-image); background-size:cover; background-position:center; background-attachment:fixed; } @media (max-width:768px){ body.has-bg-image{ background-attachment:scroll; } /* fixed bg is choppy on mobile */ } a{ color:inherit; } :focus-visible{ outline:2px solid var(--gold-light); outline-offset:2px; } /* ========================================================= SIDEBAR ========================================================= */ .sidebar{ width:min(var(--sidebar-w), 85vw); min-height:100vh; height:100vh; background:rgba(20,20,20,0.5); backdrop-filter:blur(10px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); border-left:1px solid rgba(201,162,39,0.28); display:flex; flex-direction:column; position:fixed; right:0; top:0; z-index:120; padding:20px 0; overflow-y:auto; transition:transform .3s ease; } .sidebar::-webkit-scrollbar{ width:4px; } .sidebar::-webkit-scrollbar-track{ background:var(--dark); } .sidebar::-webkit-scrollbar-thumb{ background:var(--gold-dark); border-radius:10px; } .sidebar::-webkit-scrollbar-thumb:hover{ background:var(--gold); } .sidebar-logo{ text-align:center; padding:20px; border-bottom:1px solid var(--gold-dark); margin-bottom:10px; } .sidebar-logo .mark{ width:54px; height:54px; margin:0 auto 10px; background:linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-dark)); clip-path:polygon(50% 0%, 100% 38%, 80% 100%, 20% 100%, 0% 38%); } .sidebar-logo img{ max-width:64px; max-height:64px; object-fit:contain; margin:0 auto 10px; display:block; } .sidebar-logo h4{ color:var(--gold); font-weight:700; font-size:16px; letter-spacing:.5px; } .sidebar-logo span{ color:var(--text-muted); font-size:11px; } .sidebar-profile{ padding:15px 20px; border-bottom:1px solid var(--dark2); margin-bottom:5px; } .sidebar-profile .profile-name{ color:var(--gold-light); font-weight:600; font-size:14px; } .sidebar-profile .profile-phone{ color:var(--text-muted); font-size:12px; margin-top:3px; } .sidebar-nav{ display:flex; flex-direction:column; flex:1; } .sidebar-nav a{ display:flex; align-items:center; gap:12px; padding:13px 20px; min-height:44px; color:var(--text-muted); text-decoration:none; font-size:14px; transition:all .2s; border-right:3px solid transparent; } .sidebar-nav a:hover, .sidebar-nav a.active{ color:var(--gold); background:rgba(201,162,39,0.08); border-right-color:var(--gold); } .sidebar-nav a i{ font-size:20px; color:var(--gold-dark); } .sidebar-nav a:hover i, .sidebar-nav a.active i{ color:var(--gold); } .sidebar-nav .logout-link{ margin-top:auto; color:var(--danger); } .sidebar-nav .logout-link:hover{ background:rgba(226,92,86,0.08); border-right-color:var(--danger); color:var(--danger); } /* gold price shown inside the sidebar */ .sidebar-gold-price{ padding:6px 20px 16px; border-bottom:1px solid var(--dark2); margin-bottom:6px; } .sidebar-gold-price .label{ color:var(--text-muted); font-size:11px; margin-bottom:4px; } .sidebar-gold-price .value{ color:var(--gold-light); font-size:15px; font-weight:700; } /* collapsible category list under "محصولات" */ .cat-toggle-row{ display:flex; align-items:stretch; } .cat-toggle-row a{ flex:1; } .cat-arrow-btn{ background:none; border:none; color:var(--gold-dark); cursor:pointer; padding:0 18px; display:flex; align-items:center; justify-content:center; font-size:18px; min-width:44px; transition:transform .25s ease, color .2s; } .cat-arrow-btn:hover{ color:var(--gold); } .cat-arrow-btn.open{ transform:rotate(180deg); } .categories-submenu{ max-height:0; overflow:hidden; transition:max-height .3s ease; display:flex; flex-direction:column; } .categories-submenu.open{ max-height:640px; } .categories-submenu a{ padding:10px 20px 10px 16px; padding-right:35px; font-size:13px; color:var(--text-muted); text-decoration:none; min-height:38px; display:flex; align-items:center; } .categories-submenu a:hover, .categories-submenu a.active{ color:var(--gold); background:rgba(201,162,39,0.06); } /* sidebar drawer state — see breakpoints below */ #menu-btn{ position:fixed; top:15px; right:20px; z-index:130; background:transparent; border:none; color:var(--gold); font-size:30px; cursor:pointer; padding:6px; transition:transform .2s ease, color .2s ease; line-height:1; } #menu-btn:hover{ transform:scale(1.1); color:var(--gold-light); } .drawer-overlay{ position:fixed; inset:0; z-index:110; background:rgba(0, 0, 0, 0.288); opacity:0; pointer-events:none; transition:opacity .25s ease; } /* ========================================================= TOP NAVBAR ========================================================= */ .top-navbar{ position:fixed; top:0; right:0; left:0; height:var(--navbar-h); background:var(--dark); border-bottom:1px solid var(--gold-dark); display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 16px 0 16px; padding-right:70px; /* room for #menu-btn */ z-index:100; transition:right .3s ease; } .search-box{ display:flex; align-items:center; gap:8px; background:var(--dark2); border:1px solid var(--gold-dark); border-radius:var(--radius-sm); padding:8px 12px; flex:1 1 auto; min-width:0; max-width:300px; } .search-box input{ background:transparent; border:none; outline:none; color:var(--text-light); font-family:'Vazirmatn',sans-serif; width:100%; font-size:13px; } .search-box i{ color:var(--gold-dark); flex-shrink:0; } .navbar-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; } .btn-compare{ display:flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--gold-dark); border-radius:var(--radius-sm); padding:8px 14px; color:var(--gold); cursor:pointer; font-family:'Vazirmatn',sans-serif; font-size:13px; min-height:38px; } .btn-compare:hover{ border-color:var(--gold); } @media (max-width:480px){ .btn-compare span.label{ display:none; } .btn-compare{ padding:8px 10px; } } .navbar-icon-btn{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); color:var(--gold-light); background:none; font-size:17px; position:relative; text-decoration:none; } .navbar-icon-btn .count{ position:absolute; top:-3px; left:-3px; background:var(--emerald); color:#fff; font-size:9px; width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .navbar-user{ display:flex; align-items:center; gap:10px; color:var(--text-muted); font-size:13px; } .navbar-user span.name{ color:var(--gold); } .navbar-user a.logout{ color:var(--danger); text-decoration:none; font-size:13px; } /* ========================================================= PAGE LAYOUT (content, footer) — the sidebar is now always an overlay drawer (glass panel), on every screen size, so no page ever reserves space for it. ========================================================= */ .page-wrap{ transition:padding-right .3s ease; } .main-content{ padding:30px; max-width:960px; margin-inline:auto; min-height:60vh; } .main-footer{ background:var(--dark); border-top:1px solid var(--gold-dark); color:var(--text-muted); text-align:center; padding:22px 16px; font-size:13px; } .main-footer a{ color:var(--gold-dark); text-decoration:none; } .main-footer a:hover{ color:var(--gold); } .footer-links{ display:flex; justify-content:center; gap:18px; margin-bottom:10px; flex-wrap:wrap; } /* sidebar: always a drawer, on every breakpoint */ .sidebar{ transform:translateX(100%); } body.sidebar-toggled .sidebar{ transform:translateX(0); } body.sidebar-toggled .drawer-overlay{ opacity:1; pointer-events:auto; } @media (max-width:991px){ .main-content{ padding:22px 18px; } } @media (max-width:600px){ #menu-btn{ font-size:26px; right:12px; } .main-content{ padding:18px 14px; } } @media (max-width:420px){ .navbar-actions .navbar-icon-btn:nth-child(n+3){ display:none; } /* keep only the 2 most essential */ } /* ========================================================= REUSABLE COMPONENTS (use these instead of one-off inline styles in new/updated pages) ========================================================= */ /* generic panel/card replacing the repeated inline "background:var(--dark2); border:1px solid var(--gold-dark); border-radius:16px; padding:20px" */ .card{ background:var(--dark2); border:1px solid var(--gold-dark); border-radius:var(--radius-lg); padding:24px; } @media (max-width:600px){ .card{ padding:18px; } } .section-heading{ display:flex; align-items:center; gap:10px; color:var(--gold); font-size:19px; font-weight:700; margin-bottom:20px; } .section-heading i{ font-size:20px; } /* buttons */ .btn-gold{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg, var(--gold-dark), var(--gold)); color:var(--black); border:none; border-radius:var(--radius-sm); padding:12px 22px; font-family:inherit; font-weight:700; font-size:14px; text-decoration:none; cursor:pointer; transition:opacity .2s, transform .15s; min-height:44px; } .btn-gold:hover{ opacity:.92; } .btn-gold:active{ transform:scale(.98); } .btn-gold.block{ display:flex; width:100%; } .btn-outline{ display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--dark); border:1px solid var(--gold-dark); color:var(--gold); border-radius:var(--radius-sm); padding:10px 18px; font-size:13px; text-decoration:none; min-height:40px; font-family:inherit; } .btn-outline:hover{ border-color:var(--gold); } .btn-danger-outline{ display:inline-flex; align-items:center; justify-content:center; gap:6px; background:transparent; border:1px solid var(--danger); color:var(--danger); border-radius:var(--radius-sm); padding:10px 16px; font-size:13px; min-height:40px; text-decoration:none; cursor:pointer; font-family:inherit; } /* forms */ .auth-container{ display:flex; justify-content:center; align-items:center; min-height:80vh; padding:20px 0; } .auth-card{ background:var(--dark2); border:1px solid var(--gold-dark); border-radius:var(--radius-lg); padding:40px; width:100%; max-width:400px; text-align:center; } @media (max-width:480px){ .auth-card{ padding:28px 20px; } } .auth-card h2{ color:var(--gold); margin-bottom:8px; } .auth-card p{ color:var(--text-muted); margin-bottom:25px; font-size:14px; } .form-group{ margin-bottom:15px; text-align:right; } .form-group label{ color:var(--text-muted); font-size:13px; display:block; margin-bottom:6px; } .auth-input{ width:100%; background:var(--dark); border:1px solid var(--gold-dark); border-radius:var(--radius-sm); padding:12px 15px; color:var(--text-light); font-family:'Vazirmatn', sans-serif; font-size:14px; margin-bottom:15px; outline:none; transition:border-color .2s; min-height:44px; } .auth-input:focus{ border-color:var(--gold); } .auth-btn{ width:100%; background:linear-gradient(135deg, var(--gold-dark), var(--gold)); border:none; border-radius:var(--radius-sm); padding:13px; color:var(--black); font-family:'Vazirmatn', sans-serif; font-weight:700; font-size:15px; cursor:pointer; transition:opacity .2s; margin-top:5px; min-height:46px; } .auth-btn:hover{ opacity:.9; } .auth-card a{ color:var(--gold-dark); font-size:13px; display:block; margin-top:15px; } /* responsive grids — auto-fit/auto-fill so they adapt without extra breakpoints. Use these instead of inline grid-template-columns */ .grid-products{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:18px; } .grid-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(110px,1fr)); gap:12px; } .grid-2-fixed{ display:grid; grid-template-columns:repeat(2,1fr); gap:15px; } @media (max-width:480px){ .grid-2-fixed{ grid-template-columns:1fr; } } .product-layout{ display:grid; grid-template-columns:1fr 1fr; gap:25px; } @media (max-width:700px){ .product-layout{ grid-template-columns:1fr; } } /* a sidebar-by-content layout (e.g. cart items + summary) that stacks on tablet/phone */ .split-layout{ display:grid; grid-template-columns:1fr 340px; gap:25px; align-items:start; } @media (max-width:900px){ .split-layout{ grid-template-columns:1fr; } } .split-layout .summary-sticky{ position:sticky; top:85px; } @media (max-width:900px){ .split-layout .summary-sticky{ position:static; } } /* product / price-stat cards */ .product-card{ background:var(--dark2); border:1px solid var(--gold-dark); border-radius:var(--radius-lg); overflow:hidden; transition:transform .2s, border-color .2s; } .product-card:hover{ transform:translateY(-4px); border-color:var(--gold); } .product-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; } .product-card .body{ padding:15px; } .product-card h4{ color:var(--text-light); margin-bottom:5px; font-size:14px; } .product-card .meta{ color:var(--text-muted); font-size:12px; margin-bottom:12px; } .stat-card{ background:var(--dark2); border:1px solid var(--gold-dark); border-radius:var(--radius-md); padding:16px 10px; text-align:center; } .stat-card i{ font-size:20px; color:var(--gold-dark); margin-bottom:6px; display:block; } .stat-card .label{ color:var(--text-muted); font-size:11px; margin-bottom:6px; } .stat-card .value{ color:var(--gold); font-weight:700; font-size:13px; } .stat-card .unit{ color:var(--text-muted); font-size:10px; margin-top:4px; } /* tag / badge — used for product tags AND order status pills, sharing one gemstone-toned vocabulary across the whole site */ .badge{ display:inline-flex; align-items:center; gap:4px; padding:5px 13px; border-radius:var(--radius-pill); font-size:11.5px; font-weight:700; white-space:nowrap; } .badge-gold{ background:rgba(201,162,39,0.16); color:var(--gold-light); } .badge-sapphire{ background:rgba(46,74,107,0.35); color:var(--sapphire-light); } .badge-emerald{ background:rgba(47,93,68,0.35); color:var(--emerald-light); } .badge-ruby{ background:rgba(122,46,46,0.35); color:var(--ruby-light); } .badge-amethyst{ background:rgba(91,62,115,0.35); color:var(--amethyst-light); } .badge-muted{ background:rgba(168,156,138,0.15); color:var(--text-muted); } /* product tag pinned to a card corner */ .tag-pin{ position:absolute; top:10px; right:10px; } /* tables (invoices etc.) — wrap in .table-wrap so wide tables scroll horizontally on phones instead of breaking the layout */ .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .table-wrap table{ width:100%; min-width:560px; border-collapse:collapse; font-size:13px; } .table-wrap th{ padding:10px; text-align:right; color:var(--gold); border-bottom:1px solid var(--gold-dark); white-space:nowrap; } .table-wrap td{ padding:10px; color:var(--text-light); border-bottom:1px solid var(--dark); white-space:nowrap; } /* empty states */ .empty-state{ text-align:center; padding:60px 20px; color:var(--text-muted); } .empty-state i{ font-size:60px; color:var(--gold-dark); } .empty-state p{ margin-top:15px; font-size:15px; } /* alerts (messages framework) */ .alert{ border-radius:var(--radius-sm); font-size:14px; padding:13px 16px; margin-bottom:16px; border:1px solid transparent; display:flex; align-items:center; justify-content:space-between; gap:10px; } .alert { transition: opacity 0.5s ease; } .alert.hide { opacity: 0; } .alert-success{ background:rgba(47,93,68,0.18); border-color:var(--emerald); color:var(--emerald-light); } .alert-error, .alert-danger{ background:rgba(122,46,46,0.18); border-color:var(--ruby); color:var(--ruby-light); } .alert-warning{ background:rgba(201,162,39,0.14); border-color:var(--gold-dark); color:var(--gold-light); } .alert-info{ background:rgba(46,74,107,0.18); border-color:var(--sapphire); color:var(--sapphire-light); } .alert .close-alert{ background:none; border:none; color:inherit; opacity:.7; cursor:pointer; font-size:16px; } .alert .close-alert:hover{ opacity:1; } .hero-header{ display:grid; grid-template-columns:70px 1fr auto; align-items:center; gap:12px; padding:18px 5% 18px clamp(16px,5%,80px); border-bottom:1px solid var(--line); } .hero-header .brand{ text-align:center; } .hero-header .brand .name{ font-weight:800; font-size:18px; color:var(--gold-light); letter-spacing:.5px; } .hero-header .brand .tag{ font-size:11px; color:var(--text-muted); } .top-icon-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; } .top-icon-row .navbar-icon-btn{ width:36px; height:36px; } .top-icon-row .auth-link{ font-size:13px; color:var(--gold-light); text-decoration:none; white-space:nowrap; } .top-icon-row .user-chip{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); white-space:nowrap; } .top-icon-row .user-chip .name{ color:var(--gold); } .top-icon-row .user-chip button{ background:none; border:none; color:var(--danger); cursor:pointer; font-family:inherit; font-size:13px; } @media (max-width:760px){ .hero-header{ grid-template-columns:1fr; padding:16px 5%; gap:14px; text-align:center; } .top-icon-row{ justify-content:center; } } .hero-section{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px; padding:50px 5% 70px; overflow:hidden; } .hero-section::after{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 50% 0%, rgba(201,162,39,0.08), transparent 55%); } .hero-logo-img{ max-width:260px; max-height:160px; object-fit:contain; } .hero-logo-fallback{ font-size:clamp(38px,6vw,64px); font-weight:900; letter-spacing:2px; color:var(--gold-light); } .hero-logo-fallback small{ display:block; font-size:13px; letter-spacing:3px; color:var(--text-muted); font-weight:400; margin-top:6px; text-transform:uppercase; } .hero-search{ width:min(420px,86vw); display:flex; align-items:center; gap:10px; background:var(--dark2); border:1px solid var(--line); border-radius:var(--radius-pill); padding:12px 20px; } .hero-search input{ flex:1; background:none; border:none; outline:none; color:var(--text-light); font-family:inherit; font-size:14px; } .hero-search input::placeholder{ color:var(--text-muted); } .hero-search i{ color:var(--gold-light); } .hero-price{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-muted); background:var(--dark2); border:1px solid var(--line); border-radius:var(--radius-pill); padding:10px 22px; } .hero-price b{ color:var(--gold-light); font-weight:800; font-size:16px; } .hero-social{ display:flex; gap:14px; } .hero-social a{ width:36px; height:36px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold-light); } .hero-social a:hover{ border-color:var(--gold-light); } .hero-social svg{ width:16px; height:16px; } /* numbered section nav, right edge, desktop only */ .eyebrow-nav{ position:fixed; left:24px; top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; } .eyebrow-nav a{ position:relative; display:flex; align-items:center; gap:10px; font-size:11px; color:var(--text-muted); padding:10px 0; text-decoration:none; } .eyebrow-nav a::before{ content:""; width:1px; height:22px; background:var(--line); } .eyebrow-nav a:first-child::before{ display:none; } .eyebrow-nav a span.num{ font-weight:700; color:var(--gold-dark); } .eyebrow-nav a.active span.num, .eyebrow-nav a:hover span.num{ color:var(--gold-light); } .eyebrow-nav a.active{ color:var(--text-light); } @media (max-width:1100px){ .eyebrow-nav{ position:static; transform:none; flex-direction:row; justify-content:center; gap:18px; padding:14px 5% 6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .eyebrow-nav::-webkit-scrollbar{ display:none; } .eyebrow-nav a{ white-space:nowrap; } .eyebrow-nav a::before{ width:1px; height:14px; } } .home-section{ padding:60px 5%; max-width:1200px; margin:0 auto; } #gold-prices{ padding-top:30px; } .home-section.alt{ background:linear-gradient(180deg, transparent, rgba(255,255,255,0.015), transparent); } .home-divider{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:34px; } .home-divider .line{ width:60px; height:1px; background:var(--line); } .home-divider .gem-sm{ width:8px; height:8px; background:var(--gold); clip-path:polygon(50% 0%,100% 38%,80% 100%,20% 100%,0% 38%); } .about-excerpt{ max-width:680px; margin:0 auto; text-align:center; color:var(--text-muted); line-height:2; } .about-excerpt a{ color:var(--gold-light); } .branch-mini-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:30px; } /* ========================================================= CARTIER-STYLE HEADER (used on every page) Thin utility row → centered logo → horizontal category nav ========================================================= */ .cartier-topbar{ display:flex; justify-content:flex-end; align-items:center; padding:12px 70px 10px 5%; border-bottom:1px solid var(--line); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .cartier-topbar::-webkit-scrollbar{ display:none; } .util-row{ display:flex; align-items:flex-start; gap:22px; flex-shrink:0; } .util-row a, .util-row button{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--text-muted); font-size:10px; white-space:nowrap; background:none; border:none; text-decoration:none; cursor:pointer; font-family:inherit; position:relative; min-width:40px; } .util-row a:hover, .util-row button:hover{ color:var(--gold-light); } .util-row .icon-wrap{ position:relative; display:flex; } .util-row i{ font-size:19px; } .util-row .count{ position:absolute; top:-6px; left:-8px; background:var(--gold); color:var(--black); font-size:9px; font-weight:700; width:14px; height:14px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .util-row .name{ color:var(--gold-light); font-size:11px; flex-direction:row; gap:8px; } @media (max-width:600px){ .util-row{ gap:16px; } } @media (max-width:680px){ .cartier-topbar{ flex-wrap:wrap; justify-content:center; overflow-x:visible; padding:10px 55px 10px 10px; } .util-row{ flex-wrap:wrap; justify-content:center; gap:10px 14px; width:100%; } .cartier-search-mini{ order:-1; width:100% !important; margin-bottom:8px; } .cartier-search-mini:focus-within{ width:100% !important; } .util-row a, .util-row button{ font-size:9px; min-width:34px; } .util-row i{ font-size:16px; } .util-row .name{ flex-direction:column; gap:2px; font-size:10px; } .util-row .name span{ white-space:nowrap; } } .cartier-logo-row{ text-align:center; padding:05px 5% 05px; } .cartier-logo-row img{ max-height:64px; max-width:220px; object-fit:contain; } .cartier-logo-row .wordmark{ font-size:clamp(20px,3vw,30px); letter-spacing:5px; color:var(--gold-light); font-weight:800; } .cartier-logo-row .sub{ font-size:11px; letter-spacing:2.5px; color:var(--text-muted); text-transform:uppercase; margin-top:6px; } .cartier-logo-row .sub2{ font-size:clamp(15px,2vw,20px); letter-spacing:0px; color:var(--gold-light); font-weight:800; } .cartier-cat-nav{ display:flex; justify-content:center; align-items:center; gap:34px; padding:14px 5%; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .cartier-cat-nav::-webkit-scrollbar{ display:none; } .cartier-cat-nav a{ color:var(--text-light); font-size:13px; letter-spacing:1.5px; text-decoration:none; white-space:nowrap; padding:6px 0 8px; border-bottom:2px solid transparent; } .cartier-cat-nav a:hover, .cartier-cat-nav a.active{ color:var(--gold-light); border-bottom-color:var(--gold); } @media (max-width:760px){ .cartier-cat-nav{ justify-content:flex-start; gap:22px; } } /* ========================================================= HOMEPAGE HERO SLIDER Full-bleed slides that fade between each other, with a scroll-down chevron that takes the visitor to the gold prices section below. ========================================================= */ .hero-slider{ position:relative; min-height:150px; /* به‌جای height:78vh */ overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:00px 0; } .hero-slide{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:18px; padding:0 6%; background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease; pointer-events:none; } .hero-slide.active{ opacity:1; pointer-events:auto; } .hero-slide::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,5,5,0.45), rgba(5,5,5,0.75) 70%, var(--black)); z-index:0; } .hero-slide-content{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:16px; } .hero-slide h2{ font-size:clamp(26px,4.2vw,46px); font-weight:800; color:var(--gold-light); letter-spacing:1px; } .hero-slide p{ color:var(--text-muted); font-size:14px; max-width:520px; line-height:1.9; } .hero-slide .btn-gold{ margin-top:6px; } .hero-dots{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:2; } .hero-dots button{ width:8px; height:8px; border-radius:50%; border:none; background:rgba(255,255,255,0.3); cursor:pointer; padding:0; transition:background .2s, width .2s; } .hero-dots button.active{ background:var(--gold-light); width:22px; border-radius:5px; } .hero-scroll-down{ position:absolute; bottom:18px; right:50%; transform:translateX(50%); z-index:2; background:none; border:none; cursor:pointer; color:var(--gold-light); display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; opacity:.85; } .hero-scroll-down i{ font-size:22px; animation:bounce-down 1.8s ease-in-out infinite; } @keyframes bounce-down{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } } @media (prefers-reduced-motion: reduce){ .hero-scroll-down i{ animation:none; } } @media (max-width:600px){ .hero-scroll-down{ bottom:46px; } } .cartier-search-row{ display:flex; justify-content:center; padding:34px 5% 8px; } .cartier-search{ width:min(540px,90vw); display:flex; align-items:center; gap:10px; background:var(--dark2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 20px; } .cartier-search input{ flex:1; background:none; border:none; outline:none; color:var(--text-light); font-family:inherit; font-size:14px; } .cartier-search input::placeholder{ color:var(--text-muted); } .cartier-search i{ color:var(--gold-light); } .cartier-search-mini{ display:flex; align-items:center; gap:6px; background:var(--dark2); border:1px solid var(--line); border-radius:20px; padding:6px 12px; width:250px; flex-shrink:0; align-self:center; transition:width .25s ease, border-color .2s ease; } .cartier-search-mini:focus-within{ width:300px; border-color:var(--gold-dark); } .cartier-search-mini input{ flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text-light); font-family:inherit; font-size:12px; } .cartier-search-mini input::placeholder{ color:var(--text-muted); } .cartier-search-mini i{ color:var(--gold-light); font-size:15px; flex-shrink:0; } .closing-band{ display:flex; flex-wrap:wrap; justify-content:center; gap:28px; padding:46px 5%; border-top:1px solid var(--line); margin-top:30px; } .closing-band a{ color:var(--gold-light); font-size:13px; letter-spacing:1px; text-decoration:none; border-bottom:1px solid var(--gold-dark); padding-bottom:3px; } .closing-band a:hover{ border-bottom-color:var(--gold-light); } /* ===== EYEBROW NAV (numbered section nav, fixed right side) ===== */ .eyebrow-nav{ position:fixed; left:20px; top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; } .eyebrow-nav a{ position:relative; display:flex; align-items:center; gap:10px; font-size:11px; color:var(--text-muted); padding:10px 0; text-decoration:none; white-space:nowrap; transition:color .2s; } .eyebrow-nav a::before{ content:""; width:1px; height:22px; background:var(--line); flex-shrink:0; } .eyebrow-nav a:first-child::before{ display:none; } .eyebrow-nav a .num{ font-weight:700; color:var(--gold-dark); font-size:12px; transition:color .2s; } .eyebrow-nav a.active .num, .eyebrow-nav a:hover .num{ color:var(--gold-light); } .eyebrow-nav a.active{ color:var(--text-light); } @media (max-width:1100px){ .eyebrow-nav{ position:static; transform:none; flex-direction:row; justify-content:center; gap:18px; padding:14px 5% 6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .eyebrow-nav::-webkit-scrollbar{ display:none; } .eyebrow-nav a{ white-space:nowrap; } .eyebrow-nav a::before{ width:1px; height:14px; } }