/* ==========================================================================
Qemmah — site footer (layoutmodule::components.footercomponent) for layouts
that don't load premium.css (masterseller3: seller landing, seller sign-in /
sign-up, seller help). Copied from premium.css — keep the two in step.
========================================================================== */
footer {
--qm-gold-1: #f6e3c8;
--qm-gold-2: #e2c19c;
--qm-gold-3: #c79a72;
--qm-gold-4: #a1785c;
--qm-brown: #6b3e2e;
--qm-ink: #1a1210;
--qm-ease: cubic-bezier(.22, .8, .24, 1);
--qm-gloss-gold: linear-gradient(180deg, #ecd0ad 0%, #cfa47b 42%, #a1785c 56%, #7d5238 100%);
}
/* Gold-foil logo: the logo PNG masks a moving gold gradient.
Usage:
(or set --qm-logo, plus --qm-logo-ratio when it isn't the 2084/863 logo.png) */
.qm-logo-foil {
display: block;
aspect-ratio: var(--qm-logo-ratio, 2084 / 863);
background: linear-gradient(100deg, #c79a72 0%, #f6e3c8 30%, #fffaf2 42%, #e2c19c 55%, #a1785c 80%, #e2c19c 100%);
background-size: 250% 100%;
-webkit-mask: var(--qm-logo) center / contain no-repeat;
mask: var(--qm-logo) center / contain no-repeat;
animation: qm-gold-flow 5s linear infinite;
}
@keyframes qm-gold-flow {
0% { background-position: 0% 50%; }
100% { background-position: 220% 50%; }
}
/* --------------------------------------------------------------------------
Footer — dark bronze with gold accents and glass details
(payment logos are left untouched: mada branding rules require the white
artwork on a dark background, first in the row, never boxed or shrunk)
-------------------------------------------------------------------------- */
footer {
position: relative;
overflow: hidden;
isolation: isolate;
color: rgba(255, 255, 255, .74);
background:
radial-gradient(900px 380px at 88% 0%, rgba(226, 193, 156, .2), transparent 60%),
radial-gradient(700px 360px at 8% 100%, rgba(161, 120, 92, .3), transparent 60%),
linear-gradient(160deg, #1a1210 0%, #2b1a14 45%, #3d2519 100%) !important;
box-shadow: none !important;
}
/* faint diamond lattice, fading out towards the edges */
footer::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: .05;
background-image:
linear-gradient(45deg, #fff 1px, transparent 1px),
linear-gradient(-45deg, #fff 1px, transparent 1px);
background-size: 38px 38px;
-webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
pointer-events: none;
}
/* gold hairline along the top edge */
footer::after {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--qm-gold-3) 25%, var(--qm-gold-1) 50%, var(--qm-gold-3) 75%, transparent);
pointer-events: none;
}
/* ----- Brand strip ----- */
footer .qm-footer-brand {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 44px;
padding-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
footer .qm-footer-brand__logo .qm-logo-foil {
/* sized by height so the wide English mark gets the same weight as the Arabic one */
height: 52px;
width: auto;
filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45));
}
footer .qm-footer-brand__tagline {
font-size: 15px;
font-weight: 700;
color: var(--qm-gold-1);
opacity: .85;
}
/* ----- Link columns ----- */
footer .footer_links {
padding-top: 40px;
border-top: 0 !important;
}
footer .footer_links h6 {
position: relative;
display: inline-block;
padding-bottom: 12px;
margin-bottom: 22px !important;
font-size: 18px;
font-weight: 800;
background: linear-gradient(90deg, #f6e3c8 0%, #e2c19c 50%, #c79a72 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
footer .footer_links h6::after {
content: "";
position: absolute;
bottom: 0;
inset-inline-start: 0;
width: 32px;
height: 3px;
border-radius: 3px;
background: var(--qm-gloss-gold);
box-shadow: 0 2px 10px rgba(226, 193, 156, .45);
}
footer .footer_links p {
margin-bottom: 14px !important;
font-size: 15px;
}
footer .footer_links p a {
display: inline-block;
color: rgba(255, 255, 255, .72) !important;
transition: color .3s, transform .3s var(--qm-ease);
}
footer .footer_links p a:hover {
color: var(--qm-gold-1) !important;
transform: translateX(-4px);
}
/* ----- Contact: glass chips ----- */
footer .responsive_footeer > a,
footer .responsive_footeer > p {
flex: none !important;
display: inline-flex !important;
align-items: center;
gap: 6px;
width: fit-content;
max-width: 100%;
margin: 0 0 10px !important;
padding: 9px 14px !important;
border-radius: 14px;
background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
border: 1px solid rgba(255, 255, 255, .12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
transition: border-color .3s, background .3s;
}
footer .responsive_footeer > a:hover,
footer .responsive_footeer > p:hover {
border-color: rgba(226, 193, 156, .45);
background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
}
footer .responsive_footeer span { font-size: 14px !important; color: #fff !important; }
footer .responsive_footeer:has(> a, > p) { flex-direction: column; align-items: flex-start; }
/* ----- Social: round glass buttons ----- */
footer .footer_icons {
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 4px;
}
footer .footer_icons a {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
border: 1px solid rgba(255, 255, 255, .14);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
transition: transform .35s var(--qm-ease), border-color .3s, box-shadow .3s, background .3s;
}
footer .footer_icons a:hover {
transform: translateY(-3px);
border-color: rgba(226, 193, 156, .7);
background: linear-gradient(180deg, rgba(226, 193, 156, .35), rgba(161, 120, 92, .15));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -10px rgba(226, 193, 156, .6);
}
/*