html { color-scheme: only light !important; }
:root{
/* Alrayyan Arts — Black + Gold theme */
--primary:#0a0a0a; /* dominant black */
--accent:#C9A84C; /* gold highlight */
--ink:#0a0a0a;--deep:#141414;
--teal:#C9A84C; /* legacy alias → gold */
--teal-light:#e6c971; /* legacy alias → light gold */
--teal-dim:#8a6f28; /* legacy alias → dark gold */
--parchment:#f5efe0;--off-white:#efe7d4;
--muted:#8b8576;--t:0.3s cubic-bezier(0.4,0,0.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',sans-serif;background:var(--ink);color:var(--parchment);overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:var(--teal);border-radius:2px;}
/* Prevent dark-mode extensions from filtering logo/nav images */
.nav-logo img,
.nav-brand img,
.footer-brand img,
.contact-logo,
img[src*="logo"] {
filter: none !important;
-webkit-filter: none !important;
mix-blend-mode: normal !important;
isolation: isolate;
}
/* NAV */
nav{
position:fixed;top:0;left:0;right:0;z-index:900;
padding:0 5%;height:72px;
display:flex;align-items:center;justify-content:space-between;
background:rgba(4,8,10,0.96);backdrop-filter:blur(20px);
border-bottom:1px solid rgba(63,168,154,0.1);transition:var(--t);
}
nav.scrolled{height:58px;}
.nav-left{display:flex;flex-direction:column;gap:2px;}
.nav-brand{font-family:'IM Fell English',serif;font-size:1.25rem;letter-spacing:2px;}
.nav-brand em{font-style:italic;color:var(--teal-light);}
.nav-sub{font-size:0.54rem;letter-spacing:4px;color:var(--muted);text-transform:uppercase;}
.nav-center{display:flex;gap:2rem;list-style:none;align-items:center;}
.nav-center a{font-size:0.7rem;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);transition:color var(--t);}
.nav-center a:hover{color:var(--teal-light);}
.nav-right{display:flex;align-items:center;gap:10px;}
.nav-icon-btn{background:none;border:none;cursor:pointer;color:var(--muted);font-size:0.68rem;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;display:flex;align-items:center;gap:5px;transition:color var(--t);padding:6px 10px;font-family:'DM Sans',sans-serif;}
.nav-icon-btn:hover{color:var(--teal-light);}
.cart-btn{position:relative;}
.cart-badge{position:absolute;top:-5px;right:-2px;background:var(--teal);color:var(--ink);font-size:0.52rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;padding:0 4px;display:none;align-items:center;justify-content:center;}
.cart-badge.show{display:flex;}
.nav-sep{width:1px;height:18px;background:rgba(63,168,154,0.15);}
.nav-back{font-size:0.66rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);border:1px solid rgba(63,168,154,0.3);padding:6px 14px;border-radius:2px;transition:var(--t);}
.nav-back:hover{background:rgba(63,168,154,0.1);}
/* HERO */
#hero{
min-height:100vh;position:relative;overflow:hidden;
display:flex;align-items:flex-end;padding:0 5% 100px;background:var(--ink);
}
.hero-bg-mosaic{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;opacity:0.22;}
.hero-bg-mosaic div{overflow:hidden;}
.hero-bg-mosaic div img{width:100%;height:100%;object-fit:cover;filter:saturate(0.4);}
.hero-bg-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,8,10,0.97) 35%,rgba(4,8,10,0.55) 70%,rgba(4,8,10,0.28) 100%);}
.hero-content{position:relative;z-index:2;max-width:680px;animation:fadeUp 1.2s ease forwards;opacity:0;transform:translateY(30px);}
@keyframes fadeUp{to{opacity:1;transform:translateY(0);}}
.hero-eyebrow{font-size:0.63rem;letter-spacing:5px;text-transform:uppercase;color:var(--teal);margin-bottom:18px;display:flex;align-items:center;gap:12px;}
.hero-eyebrow::before{content:'';width:28px;height:1px;background:var(--teal);}
.hero-title{font-family:'IM Fell English',serif;font-size:clamp(3rem,5.5vw,5rem);line-height:1.0;color:var(--parchment);margin-bottom:18px;}
.hero-title em{font-style:italic;color:var(--teal-light);}
.hero-desc{font-size:0.9rem;color:var(--muted);line-height:1.9;max-width:460px;margin-bottom:38px;}
.btn-teal{background:linear-gradient(135deg,var(--teal-dim),var(--teal),var(--teal-light));color:var(--ink);font-family:'DM Sans',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:13px 32px;border:none;border-radius:1px;cursor:pointer;transition:transform var(--t),box-shadow var(--t);}
.btn-teal:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(63,168,154,0.35);}
.btn-outline-t{background:transparent;color:var(--teal);font-family:'DM Sans',sans-serif;font-size:0.7rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:12px 32px;border:1px solid rgba(63,168,154,0.4);border-radius:1px;cursor:pointer;transition:var(--t);}
.btn-outline-t:hover{background:rgba(63,168,154,0.08);}
.btn-ig-a{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff;font-family:'DM Sans',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:13px 32px;border:none;border-radius:1px;cursor:pointer;transition:transform var(--t),box-shadow var(--t);}
.btn-ig-a:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(220,39,67,0.35);}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
/* SECTIONS */
section{padding:90px 5%;}
.sec-eyebrow{font-size:0.62rem;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--teal);margin-bottom:12px;}
.sec-title{font-family:'IM Fell English',serif;font-size:clamp(1.8rem,3.2vw,2.8rem);color:var(--parchment);line-height:1.2;margin-bottom:14px;}
.sec-title em{font-style:italic;color:var(--teal-light);}
.teal-line{width:40px;height:2px;background:linear-gradient(90deg,var(--teal),transparent);margin:14px 0 36px;}
.fade-in{opacity:0;transform:translateY(22px);transition:opacity 0.7s ease,transform 0.7s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}
/* SHOP */
#shop{background:var(--deep);}
.shop-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px;flex-wrap:wrap;gap:20px;}
.shop-filters{display:flex;gap:6px;flex-wrap:wrap;}
.filter-btn{background:none;border:1px solid rgba(63,168,154,0.15);color:var(--muted);font-family:'DM Sans',sans-serif;font-size:0.64rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:7px 15px;border-radius:1px;cursor:pointer;transition:var(--t);}
.filter-btn:hover,.filter-btn.active{border-color:var(--teal);color:var(--teal-light);background:rgba(63,168,154,0.05);}
/* ARTWORK PRODUCT GRID */
.product-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:0;background:rgba(63,168,154,0.05);
border:1px solid rgba(63,168,154,0.05);
}
.product-card{background:#060e10;position:relative;cursor:pointer;transition:background var(--t);border:1px solid rgba(63,168,154,0.04);}
.product-card:hover{background:#09141a;}
.product-img-wrap{position:relative;overflow:hidden;background:#0a1218;}
.product-img-wrap img{width:100%;height:380px;object-fit:cover;display:block;transition:transform 0.55s ease;filter:brightness(0.88);}
.product-card:hover .product-img-wrap img{transform:scale(1.04);filter:brightness(1);}
/* + button top right */
.prod-plus-btn{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.88);border:none;color:#111;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--t);opacity:0;box-shadow:0 2px 8px rgba(0,0,0,0.2);}
.product-card:hover .prod-plus-btn{opacity:1;}
.prod-plus-btn:hover{background:var(--teal);color:var(--ink);}
/* Medium type label */
.prod-medium{position:absolute;top:14px;left:14px;font-size:0.58rem;letter-spacing:2px;text-transform:uppercase;color:var(--teal-light);background:rgba(4,8,10,0.72);padding:4px 10px;border-radius:1px;opacity:0;transition:opacity var(--t);}
.product-card:hover .prod-medium{opacity:1;}
.prod-quick-bar{position:absolute;bottom:0;left:0;right:0;background:rgba(4,8,10,0.9);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;opacity:0;transform:translateY(6px);transition:opacity var(--t),transform var(--t);}
.product-card:hover .prod-quick-bar{opacity:1;transform:translateY(0);}
.quick-add-btn{background:var(--teal);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:0.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:8px 16px;border:none;border-radius:1px;cursor:pointer;transition:var(--t);}
.quick-add-btn:hover{background:var(--teal-light);}
.wishlist-icon{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;color:white;font-size:0.85rem;cursor:pointer;transition:var(--t);}
.wishlist-icon:hover{background:rgba(63,168,154,0.3);}
.product-info{padding:14px 14px 18px;background:#060e10;border-top:1px solid rgba(63,168,154,0.06);display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.product-meta{flex:1;}
.product-name{font-family:'IM Fell English',serif;font-size:0.95rem;color:var(--parchment);margin-bottom:4px;line-height:1.3;}
.product-artist{font-size:0.62rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.product-price{font-size:0.8rem;font-weight:500;color:var(--muted);}
.prod-info-add{width:26px;height:26px;border-radius:50%;background:none;border:1px solid rgba(63,168,154,0.2);color:var(--teal);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--t);flex-shrink:0;margin-top:2px;}
.prod-info-add:hover{background:var(--teal);color:var(--ink);border-color:var(--teal);}
/* SERVICES */
#services{background:var(--ink);}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(63,168,154,0.06);}
.srv-card{background:var(--ink);padding:36px 30px;transition:var(--t);}
.srv-card:hover{background:#060e10;}
.srv-icon{font-size:1.8rem;margin-bottom:14px;}
.srv-title{font-family:'IM Fell English',serif;font-size:1.2rem;color:var(--parchment);margin-bottom:10px;}
.srv-desc{font-size:0.8rem;color:var(--muted);line-height:1.8;}
.srv-tag{display:inline-block;margin-top:14px;font-size:0.62rem;letter-spacing:2px;text-transform:uppercase;color:var(--teal);border-bottom:1px solid rgba(63,168,154,0.3);padding-bottom:2px;}
/* CONTACT */
#contact-a{background:var(--deep);text-align:center;}
.c-cards-a{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:40px 0;}
.c-chip-a{background:rgba(255,255,255,0.02);border:1px solid rgba(63,168,154,0.14);border-radius:3px;padding:20px 22px;min-width:128px;transition:var(--t);}
.c-chip-a:hover{border-color:var(--teal);transform:translateY(-4px);}
.c-chip-a .ico{font-size:1.3rem;margin-bottom:8px;}
.c-chip-a h5{font-size:0.58rem;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:5px;}
.c-chip-a p{font-size:0.8rem;color:var(--off-white);}
footer{background:#030608;border-top:1px solid rgba(63,168,154,0.07);padding:40px 5% 22px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.f-brand{font-family:'IM Fell English',serif;font-size:1.05rem;letter-spacing:2px;}
.f-brand em{font-style:italic;color:var(--teal-light);}
.f-parent{font-size:0.68rem;color:var(--muted);}
.f-parent a{color:var(--teal);}
.f-copy{font-size:0.68rem;color:rgba(255,255,255,0.18);}
/* CART DRAWER */
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:2000;opacity:0;pointer-events:none;transition:opacity var(--t);}
.cart-overlay.open{opacity:1;pointer-events:all;}
.cart-drawer{position:fixed;top:0;right:-430px;width:420px;max-width:100vw;height:100vh;background:#07121a;border-left:1px solid rgba(63,168,154,0.15);z-index:2001;transition:right 0.4s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column;}
.cart-drawer.open{right:0;}
.cart-head{padding:22px 22px 18px;border-bottom:1px solid rgba(63,168,154,0.1);display:flex;align-items:center;justify-content:space-between;}
.cart-head h3{font-family:'IM Fell English',serif;font-size:1.2rem;color:var(--parchment);}
.cart-close{background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer;transition:color var(--t);}
.cart-close:hover{color:var(--teal-light);}
.cart-body{flex:1;overflow-y:auto;padding:18px 22px;}
.cart-empty{text-align:center;padding:56px 0;color:var(--muted);font-size:0.82rem;letter-spacing:1px;}
.cart-empty .ico{font-size:2.5rem;margin-bottom:14px;}
.cart-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid rgba(63,168,154,0.07);}
.cart-item-img{width:68px;height:68px;object-fit:cover;border-radius:1px;flex-shrink:0;}
.cart-item-info{flex:1;}
.cart-item-name{font-family:'IM Fell English',serif;font-size:0.92rem;color:var(--parchment);margin-bottom:3px;}
.cart-item-artist{font-size:0.62rem;color:var(--muted);letter-spacing:1px;margin-bottom:6px;}
.cart-item-price{font-size:0.8rem;color:var(--teal-light);font-weight:600;}
.cart-item-row{display:flex;align-items:center;gap:8px;margin-top:8px;}
.qty-btn{width:22px;height:22px;background:rgba(63,168,154,0.1);border:1px solid rgba(63,168,154,0.2);color:var(--parchment);border-radius:1px;cursor:pointer;font-size:0.88rem;display:flex;align-items:center;justify-content:center;transition:var(--t);}
.qty-btn:hover{background:var(--teal);border-color:var(--teal);color:var(--ink);}
.qty-num{font-size:0.78rem;color:var(--parchment);min-width:14px;text-align:center;}
.cart-item-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:0.68rem;margin-left:auto;align-self:flex-start;transition:color var(--t);}
.cart-item-remove:hover{color:var(--teal);}
.cart-foot{padding:18px 22px 26px;border-top:1px solid rgba(63,168,154,0.1);}
.cart-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.cart-total-row span{font-size:0.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);}
.cart-total-row strong{font-family:'IM Fell English',serif;font-size:1.25rem;color:var(--teal-light);}
/* AUTH MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:3000;opacity:0;pointer-events:none;transition:opacity var(--t);display:flex;align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:#071012;border:1px solid rgba(63,168,154,0.22);border-radius:4px;width:100%;max-width:400px;padding:38px 34px;position:relative;transform:translateY(20px);transition:transform 0.35s ease;}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer;transition:color var(--t);}
.modal-close:hover{color:var(--teal-light);}
.modal-logo{font-family:'IM Fell English',serif;font-size:1.15rem;letter-spacing:2px;margin-bottom:4px;}
.modal-logo em{font-style:italic;color:var(--teal-light);}
.modal-sub{font-size:0.62rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:26px;}
.modal-tabs{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid rgba(63,168,154,0.1);}
.modal-tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-family:'DM Sans',sans-serif;font-size:0.68rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:9px 18px 9px 0;cursor:pointer;transition:var(--t);margin-bottom:-1px;}
.modal-tab.active{color:var(--teal-light);border-bottom-color:var(--teal);}
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:0.62rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.form-group input{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(63,168,154,0.16);color:var(--parchment);font-family:'DM Sans',sans-serif;font-size:0.84rem;padding:10px 13px;border-radius:2px;outline:none;transition:var(--t);}
.form-group input:focus{border-color:var(--teal);}
.form-group input::placeholder{color:rgba(122,144,152,0.45);}
.form-panel{display:none;}
.form-panel.active{display:block;}
.forgot{font-size:0.62rem;color:var(--teal);text-align:right;display:block;margin-top:5px;cursor:pointer;}
.forgot:hover{color:var(--teal-light);}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(16px);background:#071318;border:1px solid rgba(63,168,154,0.3);color:var(--parchment);font-size:0.72rem;padding:11px 22px;border-radius:2px;z-index:9999;opacity:0;transition:opacity 0.3s,transform 0.3s;pointer-events:none;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media(max-width:900px){
.product-grid{grid-template-columns:repeat(2,1fr);}
.services-grid{grid-template-columns:1fr 1fr;}
.nav-center{display:none;}
#hero{padding:0 5% 80px;}
}
@media(max-width:560px){
.product-grid{grid-template-columns:1fr 1fr;}
.product-img-wrap img{height:220px;}
.services-grid{grid-template-columns:1fr;}
.cart-drawer{width:100vw;}
}
.lang-sw{display:flex;align-items:center;gap:0;margin-right:10px;}
.lang-btn{background:none;border:1px solid rgba(63,168,154,0.25);color:var(--muted);font-family:'DM Sans',sans-serif;font-size:0.58rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:4px 8px;cursor:pointer;transition:var(--t);}
.lang-btn:first-child{border-radius:2px 0 0 2px;border-right:none;}
.lang-btn:last-child{border-radius:0 2px 2px 0;}
.lang-btn.active{background:var(--teal);color:var(--ink);border-color:var(--teal);}
.lang-btn:hover:not(.active){color:var(--teal-light);border-color:var(--teal);}
html[dir="rtl"] body{direction:rtl;text-align:right;}
html[dir="rtl"] .teal-line{background:linear-gradient(270deg,var(--teal),transparent);}
html[dir="rtl"] .hero-eyebrow::before{display:none;}
html[dir="rtl"] .c-chip-a p{direction:ltr;}
/* --- responsive image fixes (appended) --- */
img { max-width: 100%; height: auto; }
@media (max-width: 1024px) { /* tablet fixes */
.hero img, .banner img, [class*="hero"] img, [class*="banner"] img {
width: 100%; height: auto; object-fit: cover;
}
}
@media (max-width: 640px) {
.hero, .banner, [class*="hero"], [class*="banner"] { min-height: auto; }
img { display: block !important; }
}
/* ── Logo: always render in original colors, defeat any dark-mode / auto-darken / extension filters ── */
html img.brand-logo-img, body img.brand-logo-img,
html img[src*="logo/logo.png"], body img[src*="logo/logo.png"],
html.dark img.brand-logo-img, html[data-theme="dark"] img.brand-logo-img, body.dark img.brand-logo-img,
html.dark img[src*="logo/logo.png"], html[data-theme="dark"] img[src*="logo/logo.png"], body.dark img[src*="logo/logo.png"] {
filter: none !important;
-webkit-filter: none !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
forced-color-adjust: none !important;
color-scheme: dark !important;
background: transparent !important;
isolation: isolate;
}
@media (prefers-color-scheme: light), (prefers-color-scheme: dark) {
.brand-logo-img, img[src*="logo/logo.png"] {
filter: none !important;
-webkit-filter: none !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
}
}
/* ── Mobile navbar row-safe ── */
#navbar { background: rgba(5,5,5,0.98) !important; }
.nav-brand { display: inline-flex; align-items: center; white-space: nowrap; min-width: 0; }
@media (max-width: 480px) {
nav { padding: 0 3%; }
.nav-brand { font-size: 0.95rem; letter-spacing: 1px; }
}