/* =====================================================================
DigiDollar - Header / Navigation redesign (dd-header.css)
---------------------------------------------------------------------
- Desktop (>=1201px): a single floating glass "capsule" navbar -
translucent, backdrop-blurred, gold hairline, rich nav links
(.ddn-*: gold icon chip + title + subtitle, the drawer's lockup
brought to desktop; markup via child partials/header/navigation.php),
ghost LOGIN + gold-gradient SIGN-UP CTA. Re-glasses on sticky/pinned.
1201-1439px gets a compact tier so all five lockups always fit.
- Mobile (<=1200px): glass hamburger button, blurred scrim, and a
premium frosted side-drawer that slides in from the RTL start edge
(right), with a gold top ribbon, staggered link reveal, leading
gold accent bars, and full-width auth buttons.
Additive + reversible. Consumes the site's --dd-* tokens
(dd-widgets.css) with safe fallbacks. RTL-first. Auto dark-mode via
html[data-dracula-scheme="dark"]. Breakpoints match the wavy theme.
===================================================================== */
:root {
--ddh-bar-bg: rgba(255, 255, 255, 0.72);
--ddh-bar-brd: rgba(224, 190, 0, 0.30);
--ddh-bar-shadow: 0 18px 50px -24px rgba(25, 22, 50, 0.30);
/* Self-contained ink/muted - NOT var(--dd-ink): that token gets flipped to a
dark-mode value by a prefers-color-scheme path while the drawer background
stays light, so text + bg disagreed. Key these on data-dracula-scheme only
(same trigger as --ddh-drawer-bg) -> text always matches the panel. */
--ddh-ink: #1c1c22;
--ddh-muted: #6a6a76;
--ddh-gold: var(--dd-gold, #e0be00);
--ddh-gold-deep: var(--dd-gold-deep, #9a7d00);
--ddh-grad: var(--dd-grad, linear-gradient(135deg, #fdb837 0%, #ffbf2f 45%, #e0be00 100%));
--ddh-tint: rgba(224, 190, 0, 0.12);
--ddh-tint-2: rgba(224, 190, 0, 0.18);
--ddh-cta-ink: #3a2c00;
--ddh-drawer-bg: rgba(255, 255, 255, 0.92);
--ddh-panel-bg: #fffdf7; /* desktop hover panels - near-solid warm white */
/* sparkle glyph for the SIGN-UP CTA (inline data-URI -> zero extra requests) */
--ddh-spark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M12%203C12.7%208%2016%2011.3%2021%2012C16%2012.7%2012.7%2016%2012%2021C11.3%2016%208%2012.7%203%2012C8%2011.3%2011.3%208%2012%203Z'/%3E%3C/svg%3E");
/* mobile drawer row glyphs (alpha-masked -> tinted via background-color) */
--ddh-ico-buy: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M8.5%203a5.5%205.5%200%20100%2011%205.5%205.5%200%20000-11zm6%204a5.5%205.5%200%2000-1.7.27%207%207%200%20010%209.46A5.5%205.5%200%201014.5%207z'/%3E%3C/svg%3E");
--ddh-ico-mag: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M6%202h12a1%201%200%20011%201v18.2a.8.8%200%2001-1.2.7L12%2019l-5.8%202.9A.8.8%200%20015%2021.2V3a1%201%200%20011-1z'/%3E%3C/svg%3E");
--ddh-ico-contact: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M6.6%2010.8c1.4%202.8%203.8%205.2%206.6%206.6l2.2-2.2c.3-.3.7-.4%201-.2%201.1.4%202.3.6%203.6.6a1%201%200%20011%201V20a1%201%200%2001-1%201A17%2017%200%20013%204a1%201%200%20011-1h3.5a1%201%200%20011%201c0%201.3.2%202.5.6%203.6.1.4%200%20.8-.3%201.1l-2.2%202.1z'/%3E%3C/svg%3E");
--ddh-ico-default: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M5%205h6v6H5zM13%205h6v6h-6zM5%2013h6v6H5zM13%2013h6v6h-6z'/%3E%3C/svg%3E");
/* drawer v2 chip glyphs */
--ddm-ico-coins: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M12%202.8c4.6%200%208%201.4%208%203.2s-3.4%203.2-8%203.2-8-1.4-8-3.2%203.4-3.2%208-3.2zM4%208.6c1.7%201.5%204.6%202.4%208%202.4s6.3-.9%208-2.4v3.2c0%201.8-3.4%203.2-8%203.2s-8-1.4-8-3.2V8.6zM4%2014.4c1.7%201.5%204.6%202.4%208%202.4s6.3-.9%208-2.4V18c0%201.8-3.4%203.2-8%203.2S4%2019.8%204%2018v-3.6z'/%3E%3C/svg%3E");
--ddm-ico-home: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M12%203l9%208h-2.5v9a1%201%200%2001-1%201H14v-6h-4v6H6.5a1%201%200%2001-1-1v-9H3z'/%3E%3C/svg%3E");
--ddm-ico-blog: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M3%2017.2V21h3.8L17.8%209.9l-3.7-3.7L3%2017.2zM20.7%207a1%201%200%20000-1.4l-2.3-2.3a1%201%200%2000-1.4%200l-1.8%201.8%203.7%203.7L20.7%207z'/%3E%3C/svg%3E");
--ddm-ico-voucher: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M20%2012c0-1.1.9-2%202-2V6c0-1.1-.9-2-2-2H4c-1.1%200-1.99.9-1.99%202v4c1.1%200%201.99.9%201.99%202s-.89%202-2%202v4c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2v-4c-1.1%200-2-.9-2-2zm-7%205.5h-2v-2h2v2zm0-4.5h-2v-2h2v2zm0-4.5h-2v-2h2v2z'/%3E%3C/svg%3E");
--ddm-ico-gift: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M20%206h-2.18c.11-.31.18-.65.18-1%200-1.66-1.34-3-3-3-1.05%200-1.96.54-2.5%201.35l-.5.67-.5-.68C10.96%202.54%2010.05%202%209%202%207.34%202%206%203.34%206%205c0%20.35.07.69.18%201H4c-1.11%200-1.99.89-1.99%202L2%2019c0%201.11.89%202%202%202h16c1.11%200%202-.89%202-2V8c0-1.11-.89-2-2-2zm-5-2c.55%200%201%20.45%201%201s-.45%201-1%201-1-.45-1-1%20.45-1%201-1zM9%204c.55%200%201%20.45%201%201s-.45%201-1%201-1-.45-1-1%20.45-1%201-1zm11%2015H4v-2h16v2zm0-5H4V8h5.08L7%2010.83%208.62%2012%2011%208.76l1-1.36%201%201.36L15.38%2012%2017%2010.83%2014.92%208H20v6z'/%3E%3C/svg%3E");
--ddh-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M14.7%205.3a1%201%200%20010%201.4L9.4%2012l5.3%205.3a1%201%200%2001-1.4%201.4l-6-6a1%201%200%20010-1.4l6-6a1%201%200%20011.4%200z'/%3E%3C/svg%3E");
}
html[data-dracula-scheme="dark"] {
--ddh-bar-bg: rgba(26, 26, 32, 0.60);
--ddh-bar-brd: rgba(255, 191, 47, 0.28);
--ddh-bar-shadow: 0 22px 60px -26px rgba(0, 0, 0, 0.72);
--ddh-ink: #f4f1e8;
--ddh-muted: #a0a0ae;
--ddh-gold-deep: #ffbf2f;
--ddh-tint: rgba(255, 191, 47, 0.13);
--ddh-tint-2: rgba(255, 191, 47, 0.20);
--ddh-drawer-bg: rgba(20, 20, 26, 0.93);
--ddh-panel-bg: #17171d;
}
/* Neutralise the theme's cyan (#AEF3FF) underline-effect inside the header
so our gold pill / accent styling reads clean in both nav contexts. */
#header .underline-effect a:not(.epcl-button),
#header .main-nav ul.menu li a,
nav.mobile.main-nav ul.menu li a {
background-image: none !important;
}
/* =====================================================================
DESKTOP - floating glass capsule (>= 1201px)
===================================================================== */
@media screen and (min-width: 1201px) {
/* float the bar just below the top edge, with side breathing room */
#header.minimalist .grid-container { padding: 20px 16px 0 !important; }
/* ---- the capsule shell ---- */
#header .epcl-flex {
display: flex !important;
align-items: center;
gap: clamp(6px, 1.2vw, 16px);
padding: 9px 12px 9px 14px;
/* theme sets width:100% with content-box -> capsule = 100% + padding,
which poked past the viewport on narrow desktops (same trap as the
≤1200 bar). border-box keeps it inside the container. */
box-sizing: border-box;
max-width: 100%;
border-radius: 999px;
background: var(--ddh-bar-bg);
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
border: 1px solid var(--ddh-bar-brd);
box-shadow: var(--ddh-bar-shadow);
position: relative;
transition: box-shadow .35s ease, background .35s ease;
}
/* soft top-rim sheen */
#header .epcl-flex::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: .7;
}
#header .epcl-flex > .clear { display: none; }
/* ---- logo (RTL start = right) ---- */
#header .logo { margin: 0 !important; padding: 0 6px !important; flex: 0 0 auto; line-height: 0; }
#header .logo a { margin: 0 !important; display: inline-flex; transition: transform .3s ease; }
#header .logo img {
width: auto; height: 46px; border-radius: 50%;
transition: box-shadow .3s ease, transform .3s ease;
}
#header .logo a:hover { transform: translateY(-1px); }
#header .logo a:hover img { box-shadow: 0 0 0 3px var(--ddh-tint), 0 10px 22px -10px var(--ddh-gold); }
/* ---- nav row ---- */
#header nav.main-nav { flex: 1 1 auto; margin: 0 !important; text-align: inherit; }
#header nav.main-nav ul.menu {
display: flex !important;
align-items: center;
gap: 4px;
width: 100%;
margin: 0;
padding: 0 !important;
font-size: initial !important;
}
#header nav.main-nav ul.menu > li {
display: flex;
align-items: center;
margin: 0 !important;
padding: 0 !important;
position: relative;
}
/* tidy any future dropdown caret inside the flex row */
#header nav.main-nav ul.menu > li.menu-item-has-children { margin: 0 !important; padding-inline-end: 0 !important; }
#header nav.main-nav ul.menu > li.menu-item-has-children::after {
position: static; transform: none; margin-inline-start: -4px; opacity: .55;
}
/* ---------- rich links: icon chip + title/subtitle lockup (.ddn) ----------
The mobile drawer's icon-chip row, tuned for a horizontal capsule.
Markup injected by the child navigation.php partial. */
#header nav.main-nav ul.menu > li > a {
display: flex;
align-items: center;
gap: 8px;
line-height: 1;
color: var(--ddh-ink) !important;
padding: 7px 12px;
border-radius: 16px;
white-space: nowrap;
transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}
#header nav.main-nav ul.menu > li > a:hover {
background: var(--ddh-tint);
}
#header nav.main-nav ul.menu > li.current-menu-item > a {
background: var(--ddh-tint);
box-shadow: inset 0 0 0 1px var(--ddh-bar-brd);
}
/* icon chip - QUIET at rest (translucent tint + gold glyph, hugging the
text) so the eye goes to the gold auth CTAs, not the nav. The full
gold-gradient chip only ignites on hover / current page. */
#header nav.main-nav .ddn-ico {
flex: 0 0 auto;
position: relative;
width: 28px; height: 28px;
border-radius: 9px;
background: var(--ddh-tint);
box-shadow: inset 0 0 0 1px var(--ddh-bar-brd);
transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .25s ease, box-shadow .25s ease;
}
#header nav.main-nav .ddn-ico::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 15px; height: 15px;
background-color: var(--ddh-gold-deep);
opacity: .8;
-webkit-mask: var(--ddm-glyph, var(--ddh-ico-default)) center / contain no-repeat;
mask: var(--ddm-glyph, var(--ddh-ico-default)) center / contain no-repeat;
transition: background-color .25s ease, opacity .25s ease;
}
#header nav.main-nav ul.menu > li > a:hover .ddn-ico,
#header nav.main-nav ul.menu > li.current-menu-item > a .ddn-ico {
transform: scale(1.1) rotate(-4deg);
background: var(--ddm-chip, linear-gradient(135deg, #ffd25c 0%, #fdb837 55%, #e0a300 100%));
box-shadow:
inset 0 1px 1.5px rgba(255, 255, 255, .6),
inset 0 -1.5px 3px rgba(122, 85, 0, .35),
0 6px 14px -7px rgba(224, 163, 0, .7);
}
#header nav.main-nav ul.menu > li > a:hover .ddn-ico::before,
#header nav.main-nav ul.menu > li.current-menu-item > a .ddn-ico::before {
background-color: #3a2c00;
opacity: 1;
}
/* per-item glyph + chip shade - same URL keys as the drawer */
#header nav.main-nav ul.menu > li.menu-item-home > a { --ddm-glyph: var(--ddm-ico-home); }
#header nav.main-nav ul.menu > li > a[href*="/coins"] {
--ddm-glyph: var(--ddm-ico-coins);
--ddm-chip: linear-gradient(135deg, #ffdd7a 0%, #ffbf2f 55%, #dd9500 100%);
}
#header nav.main-nav ul.menu > li > a[href*="/voucher"] {
--ddm-glyph: var(--ddm-ico-voucher);
--ddm-chip: linear-gradient(135deg, #ffd98f 0%, #f5ac2a 55%, #cf7d00 100%);
}
#header nav.main-nav ul.menu > li > a[href*="/giftcard"] {
--ddm-glyph: var(--ddm-ico-gift);
--ddm-chip: linear-gradient(135deg, #ffe3a0 0%, #f9b825 55%, #d59200 100%);
}
#header nav.main-nav ul.menu > li > a[href*="/blog"],
#header nav.main-nav ul.menu > li > a[href*="/mag"] {
--ddm-glyph: var(--ddm-ico-blog);
--ddm-chip: linear-gradient(135deg, #ffcf66 0%, #f2a71b 55%, #c98200 100%);
}
#header nav.main-nav ul.menu > li > a[href*="/contact"] {
--ddm-glyph: var(--ddh-ico-contact);
--ddm-chip: linear-gradient(135deg, #ffe08d 0%, #f7b733 55%, #d98e04 100%);
}
/* title + subtitle stack */
#header nav.main-nav .ddn-txt {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
#header nav.main-nav .ddn-title {
font-size: 14.5px;
font-weight: 700;
line-height: 1.15;
color: var(--ddh-ink);
transition: color .2s ease;
}
#header nav.main-nav .ddn-sub {
font-size: 10.5px;
font-weight: 500;
line-height: 1.2;
color: var(--ddh-muted);
letter-spacing: .1px;
}
#header nav.main-nav ul.menu > li > a:hover .ddn-title,
#header nav.main-nav ul.menu > li.current-menu-item > a .ddn-title {
color: var(--ddh-gold-deep);
}
/* caret affordance on items that carry a hover panel (chevron token
points RTL-left; rotate -90° -> points down) */
#header nav.main-nav ul.menu > li.ddn-has-panel > a::after {
content: "";
flex: 0 0 auto;
width: 10px; height: 10px;
margin-inline-start: 1px;
background-color: var(--ddh-muted);
-webkit-mask: var(--ddh-chevron) center / contain no-repeat;
mask: var(--ddh-chevron) center / contain no-repeat;
transform: rotate(-90deg);
opacity: .5;
transition: transform .25s ease, opacity .25s ease, background-color .25s ease;
}
#header nav.main-nav ul.menu > li.ddn-has-panel:hover > a::after {
background-color: var(--ddh-gold-deep);
opacity: .9;
transform: rotate(-90deg) translateX(-2px);
}
/* ---------- hover panels (.ddn-drop) ----------
Glass card floating under the item. Child of the -> pure CSS
reveal on li:hover / li:focus-within; the padding-top strip bridges
the gap so the pointer never falls out on the way down. */
#header nav.main-nav ul.menu > li > .ddn-drop {
position: absolute;
top: 100%;
inset-inline-start: -6px;
padding-top: 14px;
z-index: 90;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(10px);
transition:
opacity .28s ease,
transform .28s cubic-bezier(.2, .7, .2, 1),
visibility 0s linear .28s;
}
#header nav.main-nav ul.menu > li:hover > .ddn-drop,
#header nav.main-nav ul.menu > li:focus-within > .ddn-drop {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition:
opacity .28s ease,
transform .28s cubic-bezier(.2, .7, .2, 1),
visibility 0s;
}
#header nav.main-nav .ddn-panel {
position: relative;
min-width: 210px;
padding: 9px;
border-radius: 20px;
/* near-solid (NOT the .92 drawer token): the panel floats over busy
hero content and must stay readable even without backdrop-filter */
background: var(--ddh-panel-bg, #fffdf7);
-webkit-backdrop-filter: blur(22px) saturate(160%);
backdrop-filter: blur(22px) saturate(160%);
border: 1px solid var(--ddh-bar-brd);
box-shadow: 0 26px 60px -24px rgba(25, 22, 50, .45);
display: flex;
flex-direction: column;
gap: 3px;
}
/* soft top-rim sheen, same recipe as the capsule shell */
#header nav.main-nav .ddn-panel::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 40%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: .6;
}
/* panel rows - text-only (no thumbnails, per owner) */
#header nav.main-nav .ddn-p-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 13px;
color: var(--ddh-ink) !important;
text-decoration: none !important;
background-image: none !important;
transition: background .2s ease;
}
#header nav.main-nav .ddn-p-item:hover { background: var(--ddh-tint); }
#header nav.main-nav .ddn-p-txt {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
#header nav.main-nav .ddn-p-txt strong {
font-size: 13.5px;
font-weight: 700;
line-height: 1.35;
color: var(--ddh-ink);
transition: color .2s ease;
}
#header nav.main-nav .ddn-p-txt em {
font-style: normal;
font-size: 10.5px;
font-weight: 500;
line-height: 1.3;
color: var(--ddh-muted);
}
#header nav.main-nav .ddn-p-item:hover .ddn-p-txt strong { color: var(--ddh-gold-deep); }
/* «مشاهدهٔ همه» footer row */
#header nav.main-nav .ddn-p-all {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 4px;
padding: 9px 10px;
border-radius: 13px;
font-size: 12.5px;
font-weight: 700;
color: var(--ddh-gold-deep) !important;
background: var(--ddh-tint);
text-decoration: none !important;
background-image: none !important;
transition: background .2s ease;
}
#header nav.main-nav .ddn-p-all:hover { background: var(--ddh-tint-2); }
#header nav.main-nav .ddn-p-all svg { transition: transform .2s ease; }
#header nav.main-nav .ddn-p-all:hover svg { transform: translateX(-3px); }
/* gift-card flavour: the «مشاهده همه» row is longer than the coin one */
#header nav.main-nav .ddn-drop--giftcard .ddn-panel { min-width: 232px; }
/* blog flavour: wider card, 2-line titles */
#header nav.main-nav .ddn-drop--blog .ddn-panel { min-width: 300px; }
#header nav.main-nav .ddn-drop--blog .ddn-p-txt strong {
font-size: 12.5px;
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Now that the always-visible auth pair (.dd-auth) anchors the RTL end
(left) of the capsule, the nav links hug the RTL start (right) - a
balanced, intentional ends-anchored header (links right - CTAs left). */
#header nav.main-nav ul.menu { justify-content: flex-start; gap: 6px; }
#header nav.main-nav ul.menu > li { margin: 0 !important; }
/* ---------- LOGIN - gradient-outline "ghost" pill ---------- */
#header nav.main-nav ul.menu a[href*="/login"] {
position: relative;
isolation: isolate;
color: var(--ddh-gold-deep) !important;
background: transparent !important;
border: 0 !important;
padding: 10px 22px;
transition: color .25s ease, transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
}
/* gold gradient border (masked ring -> crisp on the pill radius) */
#header nav.main-nav ul.menu a[href*="/login"]::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.6px;
background: var(--ddh-grad);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: .8;
pointer-events: none;
transition: opacity .25s ease;
}
/* soft gold tint that fades in behind the label on hover */
#header nav.main-nav ul.menu a[href*="/login"]::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--ddh-tint);
opacity: 0;
z-index: -1;
transition: opacity .25s ease;
}
#header nav.main-nav ul.menu a[href*="/login"]:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px -14px var(--ddh-gold);
}
#header nav.main-nav ul.menu a[href*="/login"]:hover::before { opacity: 1; }
#header nav.main-nav ul.menu a[href*="/login"]:hover::after { opacity: 1; }
#header nav.main-nav ul.menu a[href*="/login"]:active { transform: translateY(0) scale(.97); }
/* ---------- SIGN-UP - living gold CTA (shimmer + sparkle + sheen) ---------- */
#header nav.main-nav ul.menu a[href*="/register"] {
position: relative;
overflow: hidden;
isolation: isolate;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ddh-cta-ink) !important;
font-weight: 700;
padding: 10px 22px;
background: linear-gradient(110deg, #fdb837 0%, #ffd25c 26%, #ffbf2f 50%, #e0a300 76%, #fdb837 100%) !important;
background-size: 220% 100%;
box-shadow: 0 10px 24px -10px rgba(224, 190, 0, .75);
animation: ddhGoldFlow 6s linear infinite;
transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
}
/* leading sparkle that gently twinkles */
#header nav.main-nav ul.menu a[href*="/register"]::before {
content: "";
flex: 0 0 auto;
width: 15px;
height: 15px;
background-color: var(--ddh-cta-ink);
-webkit-mask: var(--ddh-spark) center / contain no-repeat;
mask: var(--ddh-spark) center / contain no-repeat;
animation: ddhTwinkle 2.6s ease-in-out infinite;
}
/* diagonal light sheen that sweeps across on hover */
#header nav.main-nav ul.menu a[href*="/register"]::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -65%;
width: 55%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
transform: skewX(-18deg);
opacity: 0;
z-index: 2;
pointer-events: none;
}
#header nav.main-nav ul.menu a[href*="/register"]:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px -10px rgba(224, 190, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .28);
}
#header nav.main-nav ul.menu a[href*="/register"]:hover::after { animation: ddhSheen .9s ease; }
#header nav.main-nav ul.menu a[href*="/register"]:active { transform: translateY(0) scale(.97); }
/* ---- pinned / sticky: keep the capsule, drop the white wrapper ---- */
#header[data-stuck] .menu-wrapper {
background: transparent !important;
box-shadow: none !important;
padding: 10px 0 !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
#header[data-stuck] .grid-container { padding: 0 16px !important; }
#header[data-stuck] .epcl-flex {
background: var(--ddh-bar-bg);
box-shadow: var(--ddh-bar-shadow), 0 0 0 1px var(--ddh-bar-brd);
animation: ddhPinDown .45s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes ddhPinDown {
from { transform: translateY(-8px); opacity: .55; }
to { transform: none; opacity: 1; }
}
}
/* compact tier - narrow desktops (1201-1439px): the capsule can shrink to
~1140px inside, so tighten the lockups instead of letting them wrap/clip. */
@media screen and (min-width: 1201px) and (max-width: 1439px) {
#header nav.main-nav ul.menu { gap: 2px; }
#header nav.main-nav ul.menu > li > a { gap: 7px; padding: 6px 9px; }
#header nav.main-nav .ddn-ico { width: 25px; height: 25px; border-radius: 8px; }
#header nav.main-nav .ddn-ico::before { width: 13px; height: 13px; }
#header nav.main-nav .ddn-txt { gap: 2px; }
#header nav.main-nav .ddn-title { font-size: 13.5px; }
#header nav.main-nav .ddn-sub { font-size: 10px; }
#header nav.main-nav ul.menu > li.ddn-has-panel > a::after { width: 9px; height: 9px; }
}
/* shared CTA motion - used by the desktop capsule + the mobile drawer.
All transform/opacity/background-position only -> GPU-friendly, no layout. */
@keyframes ddhGoldFlow { 0% { background-position: 0% 50%; } 100% { background-position: -220% 50%; } }
@keyframes ddhTwinkle { 0%, 100% { opacity: .6; transform: scale(.82) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }
@keyframes ddhSheen { 0% { opacity: 0; transform: skewX(-18deg) translateX(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: skewX(-18deg) translateX(320%); } }
/* drawer v2: medallion breathing glow + live-dot sonar ping */
@keyframes ddmMedalGlow {
0%, 100% { box-shadow: inset 0 1px 2px rgba(255, 255, 255, .65), inset 0 -2px 4px rgba(122, 85, 0, .45), 0 10px 24px -10px rgba(224, 163, 0, .85); }
50% { box-shadow: inset 0 1px 2px rgba(255, 255, 255, .65), inset 0 -2px 4px rgba(122, 85, 0, .45), 0 12px 30px -8px rgba(224, 163, 0, 1), 0 0 18px -2px rgba(255, 201, 56, .55); }
}
/* =====================================================================
MOBILE / TABLET - glass drawer (<= 1200px)
===================================================================== */
@media screen and (max-width: 1200px) {
/* ---- top-bar logo: keep the natural 1:1 ratio on mobile too ----
The desktop rule (min-width:1201px) sets height/width:auto; without a
mobile counterpart the bar logo fell back to its raw width=50 height=140
HTML attributes and rendered squished (Lighthouse: wrong aspect ratio).
width:auto lets the browser derive width from the real 140x140 image. */
#header .logo img {
width: auto !important;
height: 40px;
border-radius: 50%;
}
/* ---- hamburger -> glass button ---- */
#header .menu-mobile {
width: 46px; height: 46px;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 14px;
background: var(--ddh-bar-bg);
-webkit-backdrop-filter: blur(12px) saturate(150%);
backdrop-filter: blur(12px) saturate(150%);
border: 1px solid var(--ddh-bar-brd);
box-shadow: var(--ddh-bar-shadow);
transition: transform .25s ease, box-shadow .25s ease;
}
#header .menu-mobile:active { transform: scale(.93); }
#header .menu-mobile svg {
width: 24px !important; height: 24px !important;
fill: var(--ddh-gold-deep) !important;
filter: none !important;
}
/* ---- overlay -> blurred scrim ---- */
div.menu-overlay {
background: rgba(8, 8, 16, .50) !important;
-webkit-backdrop-filter: blur(7px) saturate(120%);
backdrop-filter: blur(7px) saturate(120%);
z-index: 2147483640 !important;
}
body.menu-open div.menu-overlay { opacity: 1 !important; }
body.menu-open { overflow: hidden; }
/* While the drawer is open, get the floating CTAs out of the way - the panel
FAB (#dd-panel-fab, z 9990), the occasion badge (#ddcel-badge) and the
dark-mode toggle (.dracula-toggle-wrap, z 9999999999) otherwise punch
through and cover the drawer's account buttons. Hide + de-pointer them. */
body.menu-open #dd-panel-fab,
body.menu-open #ddcel-badge,
body.menu-open .dracula-toggle-wrap {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity .2s ease, visibility .2s ease;
}
/* =================================================================
DRAWER v2 - "gold vault" (.ddm)
Markup: child partials/header/navigation-mobile.php. Layered
aurora glass panel, animated gold ribbon, brand-medallion hero,
icon-chip nav rows (glyph + title + subtitle + chevron), pinned
living-gold CTA + ghost login + support strip. All motion is
transform/opacity/background-position (composited).
================================================================= */
/* ---- drawer panel (slides from the RTL start edge = right) ---- */
nav.mobile.main-nav {
left: auto !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
height: 100% !important;
width: min(88vw, 372px) !important;
padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px)) !important;
box-sizing: border-box;
background:
radial-gradient(120% 46% at 85% -6%, var(--ddh-tint-2), transparent 62%),
radial-gradient(110% 40% at 8% 108%, var(--ddh-tint), transparent 60%),
var(--ddh-drawer-bg) !important;
-webkit-backdrop-filter: blur(26px) saturate(160%);
backdrop-filter: blur(26px) saturate(160%);
border-inline-start: 1px solid var(--ddh-bar-brd);
border-radius: 26px 0 0 26px;
box-shadow: -30px 0 60px -30px rgba(8, 8, 20, .5);
transform: translateX(110%) !important;
transition: transform .42s cubic-bezier(.22, .8, .26, 1), opacity .3s ease !important;
overflow-y: auto;
overscroll-behavior: contain;
text-align: right !important;
display: flex !important;
flex-direction: column;
z-index: 2147483646 !important;
}
body.menu-open nav.mobile.main-nav {
transform: translateX(0) !important;
opacity: 1 !important;
visibility: visible !important;
}
/* ---- HERO - brand medallion + lockup + live pill + close ---- */
nav.mobile.main-nav .ddm-hero {
position: relative;
flex: 0 0 auto;
margin: 0 0 4px;
padding: 22px 22px 18px;
background:
radial-gradient(140% 130% at 88% 0%, rgba(255, 210, 92, .30), transparent 58%),
linear-gradient(200deg, var(--ddh-tint) 0%, transparent 70%);
border-bottom: 1px solid var(--ddh-bar-brd);
overflow: hidden;
}
/* faint oversized coin watermark behind the lockup */
nav.mobile.main-nav .ddm-hero::after {
content: "";
position: absolute;
left: -46px; bottom: -58px;
width: 158px; height: 158px;
border-radius: 50%;
border: 10px solid var(--ddh-gold);
opacity: .08;
pointer-events: none;
}
nav.mobile.main-nav .ddm-brand {
display: inline-flex !important;
align-items: center;
gap: 13px;
text-decoration: none !important;
background-image: none !important;
}
/* brand-logo medallion - real DigiDollar coin logo in a gold ring;
spins in on open, slow breathing glow after */
nav.mobile.main-nav .ddm-medal {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 54px; height: 54px;
padding: 2.5px;
box-sizing: border-box;
border-radius: 50%;
background:
radial-gradient(120% 120% at 30% 22%, #ffe28a 0%, #fdb837 38%, #e0a300 78%, #b98700 100%);
box-shadow:
inset 0 1px 2px rgba(255, 255, 255, .65),
0 10px 24px -10px rgba(224, 163, 0, .85);
animation: ddmMedalGlow 3.6s ease-in-out infinite;
transform: rotate(-100deg) scale(.5);
transition: transform .55s cubic-bezier(.22, .8, .26, 1) .08s;
}
body.menu-open nav.mobile.main-nav .ddm-medal { transform: none; }
/* the logo image itself (height:100%!important beats the theme's global
img{height:auto} - same trap as the coins bubbles page) */
nav.mobile.main-nav .ddm-medal img {
display: block;
width: 100% !important;
height: 100% !important;
border-radius: 50%;
object-fit: cover;
}
nav.mobile.main-nav .ddm-brand-txt {
display: flex;
flex-direction: column;
gap: 3px;
}
nav.mobile.main-nav .ddm-brand-txt strong {
font-size: 21px;
font-weight: 800;
line-height: 1.1;
letter-spacing: .2px;
/* gold gradient wordmark */
background: linear-gradient(120deg, var(--ddh-ink) 0%, var(--ddh-ink) 55%, var(--ddh-gold-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
nav.mobile.main-nav .ddm-brand-txt em {
font-style: normal;
font-size: 12px;
font-weight: 500;
color: var(--ddh-muted);
line-height: 1.3;
}
/* glass close button (top-left = RTL end) */
nav.mobile.main-nav .ddm-close {
position: absolute;
top: 18px;
left: 18px;
width: 38px; height: 38px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--ddh-bar-brd);
border-radius: 50%;
background: var(--ddh-bar-bg);
color: var(--ddh-gold-deep);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform .3s ease, background .2s ease;
}
nav.mobile.main-nav .ddm-close:hover { transform: rotate(90deg); }
nav.mobile.main-nav .ddm-close:active { transform: rotate(90deg) scale(.9); background: var(--ddh-tint); }
/* ---- nav rows: icon-chip cards ---- */
nav.mobile.main-nav ul.menu {
flex: 0 0 auto;
display: flex !important;
flex-direction: column;
gap: 7px;
margin: 18px 16px 0;
padding: 0;
font-size: initial !important;
}
nav.mobile.main-nav ul.menu > li {
display: block !important;
margin: 0 !important;
padding: 0 !important;
/* slide-only entrance (NO opacity fade - a fade caught later rows
mid-animation and made dark text read as faint gray). */
transform: translateX(16px);
transition: transform .42s cubic-bezier(.22, .8, .26, 1);
}
body.menu-open nav.mobile.main-nav ul.menu > li { transform: none; }
body.menu-open nav.mobile.main-nav ul.menu > li:nth-child(1) { transition-delay: .07s; }
body.menu-open nav.mobile.main-nav ul.menu > li:nth-child(2) { transition-delay: .13s; }
body.menu-open nav.mobile.main-nav ul.menu > li:nth-child(3) { transition-delay: .19s; }
body.menu-open nav.mobile.main-nav ul.menu > li:nth-child(4) { transition-delay: .25s; }
body.menu-open nav.mobile.main-nav ul.menu > li:nth-child(5) { transition-delay: .31s; }
body.menu-open nav.mobile.main-nav ul.menu > li:nth-child(6) { transition-delay: .37s; }
nav.mobile.main-nav ul.menu > li > a {
display: flex;
align-items: center;
gap: 13px;
padding: 11px 12px;
border-radius: 17px;
background: var(--ddh-bar-bg);
box-shadow: inset 0 0 0 1px var(--ddh-bar-brd), 0 8px 20px -16px rgba(25, 22, 50, .5);
transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
nav.mobile.main-nav ul.menu > li > a:active { transform: scale(.975); }
/* icon chip - rounded gold-gradient tile, dark glyph via mask */
nav.mobile.main-nav .ddm-ico {
flex: 0 0 auto;
position: relative;
width: 42px; height: 42px;
border-radius: 13px;
background: var(--ddm-chip, linear-gradient(135deg, #ffd25c 0%, #fdb837 55%, #e0a300 100%));
box-shadow:
inset 0 1px 1.5px rgba(255, 255, 255, .6),
inset 0 -1.5px 3px rgba(122, 85, 0, .35),
0 8px 16px -8px rgba(224, 163, 0, .75);
transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
nav.mobile.main-nav .ddm-ico::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 22px; height: 22px;
background-color: #3a2c00;
-webkit-mask: var(--ddm-glyph, var(--ddh-ico-default)) center / contain no-repeat;
mask: var(--ddm-glyph, var(--ddh-ico-default)) center / contain no-repeat;
}
nav.mobile.main-nav ul.menu > li > a:hover .ddm-ico,
nav.mobile.main-nav ul.menu > li.current-menu-item > a .ddm-ico { transform: scale(1.08) rotate(-4deg); }
/* per-item glyph + chip shade (graceful: no match -> apps grid, base gold) */
nav.mobile.main-nav ul.menu > li.menu-item-home > a,
nav.mobile.main-nav ul.menu > li.current_page_item > a { --ddm-glyph: var(--ddm-ico-home); }
nav.mobile.main-nav ul.menu > li > a[href*="/coins"] {
--ddm-glyph: var(--ddm-ico-coins);
--ddm-chip: linear-gradient(135deg, #ffdd7a 0%, #ffbf2f 55%, #dd9500 100%);
}
nav.mobile.main-nav ul.menu > li > a[href*="/voucher"] {
--ddm-glyph: var(--ddm-ico-voucher);
--ddm-chip: linear-gradient(135deg, #ffd98f 0%, #f5ac2a 55%, #cf7d00 100%);
}
nav.mobile.main-nav ul.menu > li > a[href*="/giftcard"] {
--ddm-glyph: var(--ddm-ico-gift);
--ddm-chip: linear-gradient(135deg, #ffe3a0 0%, #f9b825 55%, #d59200 100%);
}
nav.mobile.main-nav ul.menu > li > a[href*="/blog"],
nav.mobile.main-nav ul.menu > li > a[href*="/mag"] {
--ddm-glyph: var(--ddm-ico-blog);
--ddm-chip: linear-gradient(135deg, #ffcf66 0%, #f2a71b 55%, #c98200 100%);
}
nav.mobile.main-nav ul.menu > li > a[href*="/contact"] {
--ddm-glyph: var(--ddh-ico-contact);
--ddm-chip: linear-gradient(135deg, #ffe08d 0%, #f7b733 55%, #d98e04 100%);
}
/* title + subtitle stack */
nav.mobile.main-nav .ddm-txt {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
html nav.mobile.main-nav .ddm-title {
font-size: 15.5px;
font-weight: 700;
line-height: 1.25;
color: var(--ddh-ink);
transition: color .2s ease;
}
html nav.mobile.main-nav .ddm-sub {
font-size: 11.5px;
font-weight: 500;
line-height: 1.35;
color: var(--ddh-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* trailing chevron (points RTL-forward = left) */
nav.mobile.main-nav .ddm-go {
flex: 0 0 auto;
margin-inline-start: auto;
width: 15px; height: 15px;
background-color: var(--ddh-muted);
-webkit-mask: var(--ddh-chevron) center / contain no-repeat;
mask: var(--ddh-chevron) center / contain no-repeat;
opacity: .45;
transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}
nav.mobile.main-nav ul.menu > li > a:hover,
nav.mobile.main-nav ul.menu > li.current-menu-item > a {
background: var(--ddh-tint);
box-shadow: inset 0 0 0 1.5px var(--ddh-bar-brd);
}
html nav.mobile.main-nav ul.menu > li > a:hover .ddm-title,
html nav.mobile.main-nav ul.menu > li.current-menu-item > a .ddm-title { color: var(--ddh-gold-deep); }
nav.mobile.main-nav ul.menu > li > a:hover .ddm-go,
nav.mobile.main-nav ul.menu > li.current-menu-item > a .ddm-go {
opacity: .9;
background-color: var(--ddh-gold-deep);
transform: translateX(-3px);
}
/* ---- pinned footer: CTA + ghost login + support strip ---- */
nav.mobile.main-nav .ddm-foot {
flex: 0 0 auto;
margin-top: auto;
padding: 18px 16px 0;
display: flex;
flex-direction: column;
gap: 10px;
}
nav.mobile.main-nav .ddm-foot::before {
content: "";
height: 1px;
margin: 0 6px 4px;
background: linear-gradient(to left, transparent, var(--ddh-bar-brd), transparent);
}
/* living-gold SIGN-UP */
nav.mobile.main-nav .ddm-cta {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 15px 18px;
border-radius: 16px;
font-size: 16px;
font-weight: 800;
text-decoration: none !important;
background-image: none;
color: var(--ddh-cta-ink) !important;
background: linear-gradient(110deg, #fdb837 0%, #ffd25c 26%, #ffbf2f 50%, #e0a300 76%, #fdb837 100%) !important;
background-size: 220% 100%;
box-shadow: 0 12px 26px -12px rgba(224, 190, 0, .8);
animation: ddhGoldFlow 6s linear infinite;
transition: transform .2s ease;
}
nav.mobile.main-nav .ddm-cta:active { transform: scale(.98); }
nav.mobile.main-nav .ddm-cta-spark {
flex: 0 0 auto;
width: 16px; height: 16px;
background-color: var(--ddh-cta-ink);
-webkit-mask: var(--ddh-spark) center / contain no-repeat;
mask: var(--ddh-spark) center / contain no-repeat;
animation: ddhTwinkle 2.6s ease-in-out infinite;
}
/* ghost LOGIN */
nav.mobile.main-nav .ddm-ghost {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 18px;
border-radius: 16px;
font-size: 15px;
font-weight: 700;
text-decoration: none !important;
background-image: none !important;
color: var(--ddh-gold-deep) !important;
border: 1.5px solid var(--ddh-bar-brd);
background: transparent !important;
transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
nav.mobile.main-nav .ddm-ghost:active {
transform: scale(.98);
border-color: var(--ddh-gold);
background: var(--ddh-tint) !important;
}
/* support: ONE full-width card = [gold phone chip - label+number] ... [tg - ig]
The container itself is the tinted card; the call link fills the row,
the social circles sit at the RTL end. Number is LTR + nowrap so it can
never wrap/mangle, and the card is wide enough that it never clips. */
nav.mobile.main-nav .ddm-support {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 2px;
}
/* phone gets its OWN full-width card row - the number can never clip */
nav.mobile.main-nav .ddm-support-call {
flex: 1 1 100%;
min-width: 0;
display: flex;
align-items: center;
gap: 11px;
padding: 9px 11px;
border-radius: 16px;
background: var(--ddh-tint);
box-shadow: inset 0 0 0 1px var(--ddh-bar-brd);
text-decoration: none !important;
background-image: none !important;
transition: transform .2s ease, background .2s ease;
}
nav.mobile.main-nav .ddm-support-call:active { background: var(--ddh-tint-2); }
nav.mobile.main-nav .ddm-support-call:active { transform: scale(.98); }
nav.mobile.main-nav .ddm-support-ic {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
border-radius: 12px;
color: #3a2c00;
background: linear-gradient(135deg, #ffd25c 0%, #fdb837 55%, #e0a300 100%);
box-shadow:
inset 0 1px 1.5px rgba(255, 255, 255, .6),
inset 0 -1.5px 3px rgba(122, 85, 0, .35),
0 8px 16px -8px rgba(224, 163, 0, .75);
}
nav.mobile.main-nav .ddm-support-meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
overflow: hidden;
}
nav.mobile.main-nav .ddm-support-meta em {
font-style: normal;
font-size: 10.5px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
color: var(--ddh-muted);
}
html nav.mobile.main-nav .ddm-support-meta strong {
display: block;
font-size: 16px;
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
font-variant-numeric: tabular-nums;
text-align: left;
color: var(--ddh-gold-deep) !important;
}
nav.mobile.main-nav .ddm-support-soc {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
border-radius: 50%;
color: var(--ddh-gold-deep) !important;
background: var(--ddh-bar-bg);
box-shadow: inset 0 0 0 1px var(--ddh-bar-brd);
text-decoration: none !important;
background-image: none !important;
transition: transform .2s ease, background .2s ease;
}
nav.mobile.main-nav .ddm-support-soc:active { transform: scale(.9); background: var(--ddh-tint-2); }
/* ---- quick-buy chips under the coins + voucher rows (.ddm-quick) ----
Markup appended inside the after the row card by the drawer
partial's walker filter - top sellers, one tap, straight to the page. */
nav.mobile.main-nav .ddm-quick {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 7px 3px 1px;
}
nav.mobile.main-nav .ddm-quick a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 11px;
border-radius: 999px;
background: var(--ddh-bar-bg);
box-shadow: inset 0 0 0 1px var(--ddh-bar-brd);
font-size: 12px;
font-weight: 600;
line-height: 1;
text-decoration: none !important;
background-image: none !important;
transition: background .2s ease, transform .15s ease;
}
nav.mobile.main-nav .ddm-quick a:active {
transform: scale(.94);
background: var(--ddh-tint);
}
/* THE white-text guard. The theme ships `nav.mobile.main-nav ul.menu li a{
color:#fff!important}` - the html prefix outranks it so drawer text
always uses our ink/gold. */
html nav.mobile.main-nav ul.menu > li > a { color: var(--ddh-ink) !important; }
/* same guard for the quick chips (they are also `ul.menu li a`) */
html nav.mobile.main-nav ul.menu .ddm-quick a { color: var(--ddh-ink) !important; }
}
/* =====================================================================
AUTH CTAs - always-visible LOGIN + SIGN-UP (.dd-auth)
---------------------------------------------------------------------
Printed into .epcl-flex by the child partials/header/navigation.php, so
the pair shows in BOTH the desktop glass capsule AND the mobile top bar
(OUTSIDE the hamburger). Returning visitors tap the «ورود» gradient-ghost
pill; new visitors tap the living-gold «ثبت نام رایگان» CTA - gold-flow
shimmer + breathing glow + twinkling sparkle + a slow auto-glint sheen +
a forward-nudging chevron. The deliberate loud/quiet contrast (one filled
CTA, one ghost) builds visual hierarchy that funnels clicks to sign-up.
100% CSS, no images/JS/network; every motion is composited (transform /
opacity / background-position) bar one tiny breathing box-shadow. Colours
key on the same --ddh-* tokens -> perfect in light AND dark automatically.
===================================================================== */
.dd-auth {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
line-height: 1;
}
.dd-auth__btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
font-size: 15px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
text-decoration: none !important;
border-radius: 999px;
background-image: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, color .25s ease, background .25s ease;
}
.dd-auth__btn:active { transform: translateY(0) scale(.95); }
.dd-auth__label { display: inline-flex; align-items: baseline; }
.dd-auth__ic { display: block; }
/* ---------- LOGIN - gradient-outline "ghost" pill ---------- */
.dd-auth__login {
isolation: isolate;
color: var(--ddh-gold-deep) !important;
background: transparent !important;
padding: 10px 17px;
}
.dd-auth__login .dd-auth__ic { color: var(--ddh-gold-deep); transition: transform .25s ease; }
.dd-auth__login::before { /* crisp gold gradient ring */
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.5px;
background: var(--ddh-grad);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: .72;
pointer-events: none;
transition: opacity .25s ease;
}
.dd-auth__login::after { /* soft tint that fades in on hover */
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--ddh-tint);
opacity: 0;
z-index: -1;
transition: opacity .25s ease;
}
.dd-auth__login:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px -14px var(--ddh-gold);
}
.dd-auth__login:hover::before { opacity: 1; }
.dd-auth__login:hover::after { opacity: 1; }
.dd-auth__login:hover .dd-auth__ic { transform: scale(1.08); }
/* ---------- SIGN-UP - living gold CTA ---------- */
.dd-auth__signup {
overflow: hidden; /* clips the sheen to the pill */
isolation: isolate;
color: var(--ddh-cta-ink) !important;
padding: 10px 19px;
background: linear-gradient(110deg, #fdb837 0%, #ffd25c 26%, #ffbf2f 50%, #e0a300 76%, #fdb837 100%);
background-size: 220% 100%;
animation: ddhGoldFlow 6s linear infinite, ddhAuthBreathe 3.4s ease-in-out infinite;
}
.dd-auth__signup .dd-auth__spark { /* leading twinkling sparkle */
flex: 0 0 auto;
width: 15px;
height: 15px;
background-color: var(--ddh-cta-ink);
-webkit-mask: var(--ddh-spark) center / contain no-repeat;
mask: var(--ddh-spark) center / contain no-repeat;
animation: ddhTwinkle 2.6s ease-in-out infinite;
}
.dd-auth__signup .dd-auth__arrow { /* RTL-forward chevron, nudges on hover */
flex: 0 0 auto;
color: var(--ddh-cta-ink);
opacity: .9;
transition: transform .25s cubic-bezier(.2, .7, .2, 1), opacity .25s ease;
}
.dd-auth__signup .dd-auth__sheen { /* diagonal glint (auto + on hover) */
position: absolute;
top: 0;
bottom: 0;
left: -60%;
width: 48%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent);
transform: skewX(-18deg);
opacity: 0;
pointer-events: none;
z-index: 2;
animation: ddhAuthGlint 7.5s ease-in-out 2.4s infinite;
}
.dd-auth__signup:hover { transform: translateY(-2px); }
.dd-auth__signup:hover .dd-auth__arrow { transform: translateX(-4px); opacity: 1; }
.dd-auth__signup:hover .dd-auth__sheen { animation: ddhAuthSheen .85s ease; }
@keyframes ddhAuthBreathe {
0%, 100% { box-shadow: 0 8px 20px -10px rgba(224, 190, 0, .7); }
50% { box-shadow: 0 14px 30px -8px rgba(224, 190, 0, .95), 0 0 16px -2px rgba(255, 201, 56, .55); }
}
@keyframes ddhAuthGlint {
0%, 84%, 100% { opacity: 0; transform: skewX(-18deg) translateX(0); }
88% { opacity: 1; }
99% { opacity: 0; transform: skewX(-18deg) translateX(360%); }
}
@keyframes ddhAuthSheen {
0% { opacity: 0; transform: skewX(-18deg) translateX(0); }
12% { opacity: 1; }
100% { opacity: 0; transform: skewX(-18deg) translateX(360%); }
}
/* ---- desktop: anchor the pair to the RTL end (left) of the capsule ---- */
@media screen and (min-width: 1201px) {
#header .epcl-flex > .dd-auth { margin-inline-start: auto; }
.dd-auth { gap: 9px; }
}
/* ---- mobile / tablet: always-visible in the top bar (NOT in the drawer) ----
The desktop menu (a duplicate of the drawer's menu) is hidden here so the
bar reads cleanly: hamburger anchors the RTL start (right), the auth pair
the RTL end (left) - mirroring the desktop layout. Scoped to the capsule's
own nav so it can never touch the off-canvas drawer (nav.mobile.main-nav,
which lives outside #header). */
@media screen and (max-width: 1200px) {
#header .epcl-flex {
position: relative;
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
min-height: 58px;
padding: 9px 16px !important;
margin-bottom: 0 !important;
/* the theme sets width:100% but box-sizing is NOT global -> content-box
padding made the bar 100%+padding wide -> it overflowed and clipped the
left-pushed sign-up pill. border-box keeps it inside the viewport. */
box-sizing: border-box !important;
max-width: 100% !important;
}
#header .epcl-flex > nav.main-nav { display: none !important; }
#header .epcl-flex > .clear { display: none !important; }
/* pin the hamburger top-right & vertically centred (aligns with the pills) */
#header .menu-mobile {
position: absolute !important;
top: 50% !important;
right: 16px !important;
left: auto !important;
transform: translateY(-50%) !important;
margin: 0 !important;
}
#header .menu-mobile:active { transform: translateY(-50%) scale(.93) !important; }
/* push the pair to the RTL end (left); the absolute hamburger sits at the
opposite (right) edge, so the two never collide at realistic widths. */
.dd-auth {
margin-inline-start: auto;
gap: 8px;
}
.dd-auth__btn { font-size: 14px; }
.dd-auth__login { padding: 9px 13px; }
.dd-auth__signup { padding: 9px 15px; }
.dd-auth__free { display: none; } /* «ثبت نام» (drop «رایگان» for width) */
.dd-auth__signup .dd-auth__spark { width: 13px; height: 13px; }
}
/* =====================================================================
A11y + motion
===================================================================== */
#header .menu-mobile:focus-visible,
#header nav.main-nav ul.menu a:focus-visible,
nav.mobile.main-nav ul.menu a:focus-visible,
.dd-auth__btn:focus-visible {
outline: 2px solid var(--ddh-gold);
outline-offset: 2px;
border-radius: 12px;
}
.dd-auth__btn:focus-visible { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
#header .epcl-flex,
#header[data-stuck] .epcl-flex,
#header nav.main-nav ul.menu > li > .ddn-drop,
#header nav.main-nav .ddn-ico,
nav.mobile.main-nav,
nav.mobile.main-nav ul.menu > li,
nav.mobile.main-nav ul.menu > li > a::before,
#header nav.main-nav ul.menu a[href*="/register"],
#header nav.main-nav ul.menu a[href*="/register"]::before,
#header nav.main-nav ul.menu a[href*="/register"]::after,
nav.mobile.main-nav ul.menu a[href*="/register"],
nav.mobile.main-nav ul.menu a[href*="/register"]::before,
nav.mobile.main-nav ul.menu a[href*="/register"]::after,
.dd-auth__signup,
.dd-auth__signup .dd-auth__spark,
.dd-auth__signup .dd-auth__sheen,
nav.mobile.main-nav .ddm-medal,
nav.mobile.main-nav .ddm-cta,
nav.mobile.main-nav .ddm-cta-spark,
nav.mobile.main-nav .ddm-close {
animation: none !important;
transition: none !important;
}
/* drawer v2: land on final poses, freeze gold on a flattering frame */
nav.mobile.main-nav .ddm-medal { transform: none !important; }
nav.mobile.main-nav .ddm-cta { background-position: 30% 50% !important; }
/* hold the shimmer on a flattering frame + show the static sparkle */
#header nav.main-nav ul.menu a[href*="/register"],
nav.mobile.main-nav ul.menu a[href*="/register"] { background-position: 30% 50% !important; }
#header nav.main-nav ul.menu a[href*="/register"]::before,
nav.mobile.main-nav ul.menu a[href*="/register"]::before { opacity: 1; transform: none; }
nav.mobile.main-nav ul.menu > li { opacity: 1; transform: none; }
/* .dd-auth: freeze gold on a flattering frame, keep the static glow + sparkle */
.dd-auth__signup { background-position: 30% 50% !important; box-shadow: 0 10px 24px -10px rgba(224, 190, 0, .85) !important; }
.dd-auth__signup .dd-auth__spark { opacity: 1; }
.dd-auth__signup .dd-auth__sheen { opacity: 0; }
}