/* Source: css/site-final-v2.css */
:root{--bondok-gold:#E0B84F;--bondok-gold-hi:#FFE59A;--bondok-gold-deep:#93681E}
/* Keep one continuous visual background across homepage sections and dividers. */
body#top{background:#080808}
body#top .collection,body#top .gallery,body#top #reviews,body#top .reviews,body#top .story,body#top .contact,body#top .bondok-section-divider{
background-image:linear-gradient(rgba(8,8,8,.88),rgba(8,8,8,.88)),url('/assets/images/sections-bg.jpg')!important;
background-size:cover!important;background-position:center!important;background-attachment:fixed!important;background-color:#080808!important;
}
body#top .bondok-section-divider{height:34px!important;border:0!important;box-shadow:none!important}
body#top .bondok-section-divider::before,body#top .bondok-section-divider::after{background:linear-gradient(90deg,transparent,rgba(224,184,79,.72),transparent)!important;width:120px!important}
body#top #reviews,body#top #reviews::before,body#top #reviews::after{box-shadow:none!important;border:0!important}
/* Contact: open premium layout, no large boxed split panel. */
body#top #contact.bondok-contact-luxury{padding:58px 6vw 62px!important}
body#top #contact .contact-luxury-shell{width:min(1080px,100%)!important;margin:0 auto!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;display:block!important;overflow:visible!important}
body#top #contact .contact-luxury-shell::before,body#top #contact .contact-luxury-shell::after{display:none!important}
body#top #contact .contact-luxury-copy{padding:0!important;border:0!important;background:transparent!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px 16px!important}
body#top #contact .contact-eyebrow,body#top #contact .contact-luxury-copy>h2,body#top #contact .contact-luxury-copy>p{grid-column:1/-1!important}
body#top #contact .contact-eyebrow{margin:0!important;color:var(--bondok-gold)!important;font-size:9px!important;letter-spacing:.22em!important}
body#top #contact .contact-luxury-copy>h2{font-size:clamp(29px,3vw,43px)!important;margin:2px 0 0!important;line-height:1.08!important}
body#top #contact .contact-luxury-copy>p{max-width:650px!important;margin:0 0 12px!important;color:#aaa49a!important;font-size:11px!important;line-height:1.75!important}
body#top #contact .contact-primary-cta{margin:0!important;max-width:none!important;min-height:68px!important;border:1px solid rgba(224,184,79,.38)!important;border-radius:15px!important;background:linear-gradient(135deg,rgba(224,184,79,.105),rgba(255,255,255,.018))!important;padding:0 18px!important;box-shadow:none!important}
body#top #contact .contact-app-download{margin:0!important;max-width:none!important;display:flex!important;flex-direction:column!important;gap:7px!important}
body#top #contact .contact-app-kicker{font-size:8px!important;margin:0 0 1px!important;color:var(--bondok-gold)!important;letter-spacing:.18em!important}
body#top #contact .contact-app-cta{min-height:68px!important;border:1px solid rgba(224,184,79,.22)!important;border-radius:15px!important;background:rgba(255,255,255,.018)!important;box-shadow:none!important}
body#top #contact .contact-luxury-social{margin-top:22px!important;padding:18px 0 0!important;border:0!important;border-top:1px solid rgba(224,184,79,.17)!important;background:transparent!important;display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important;gap:18px!important}
body#top #contact .contact-social-label{font-size:8px!important;color:var(--bondok-gold)!important;letter-spacing:.2em!important;white-space:nowrap!important}
body#top #contact .contact-social-grid{display:flex!important;gap:8px!important;margin:0!important}
body#top #contact .contact-social-grid a{width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;border-radius:50%!important;border:1px solid rgba(255,255,255,.09)!important;background:rgba(255,255,255,.018)!important;display:grid!important;place-items:center!important}
body#top #contact .contact-social-grid a span{display:none!important}
body#top #contact .contact-social-grid i{color:#d7d2c8!important;font-size:14px!important}
body#top #contact .contact-social-grid a:hover{border-color:var(--bondok-gold)!important;background:rgba(224,184,79,.09)!important;transform:translateY(-2px)!important}
body#top #contact .contact-social-grid a:hover i{color:var(--bondok-gold-hi)!important}
body#top #contact .contact-signature{margin:0!important;padding:0!important;border:0!important;text-align:right!important}
body#top #contact .contact-signature strong{font-size:17px!important;letter-spacing:.26em!important}
body#top #contact .contact-signature span{font-size:7px!important;letter-spacing:.3em!important;color:#777!important}
@media(max-width:720px){
body#top .collection,body#top .gallery,body#top #reviews,body#top .story,body#top .contact,body#top .bondok-section-divider{background-attachment:scroll!important}
body#top #contact .contact-luxury-copy{grid-template-columns:1fr!important}
body#top #contact .contact-primary-cta,body#top #contact .contact-app-download{grid-column:1!important}
body#top #contact .contact-luxury-social{grid-template-columns:1fr!important;gap:12px!important}
body#top #contact .contact-signature{text-align:left!important}
}
/* ===== Contact social cluster review fix ===== */
body#top #contact .contact-luxury-social{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:18px!important;width:100%!important;padding-top:16px!important;margin-top:16px!important}
body#top #contact .contact-social-label{margin:0!important;flex:0 0 auto!important}
body#top #contact .contact-social-grid{flex:0 0 auto!important}
body#top #contact .contact-signature{flex:0 0 auto!important;margin-left:18px!important;padding-left:22px!important;border-left:1px solid rgba(224,184,79,.16)!important;text-align:left!important;min-width:150px!important}
body#top #contact .contact-signature strong{font-size:15px!important;letter-spacing:.24em!important}
body#top #contact .contact-signature span{font-size:6px!important;letter-spacing:.27em!important}
@media(max-width:720px){
body#top #contact .contact-luxury-social{justify-content:flex-start!important;flex-wrap:wrap!important;gap:12px 14px!important}
body#top #contact .contact-signature{width:100%!important;margin:4px 0 0!important;padding:12px 0 0!important;border-left:0!important;border-top:1px solid rgba(224,184,79,.14)!important;text-align:left!important}
}
/* ===== V5 exact contact social centering ===== */
body#top #contact .contact-luxury-social{
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex-wrap:nowrap!important;
gap:20px!important;
width:100%!important;
margin:20px auto 0!important;
padding:22px 0 0!important;
text-align:center!important;
}
body#top #contact .contact-social-label{
flex:0 0 auto!important;
margin:0!important;
font-size:11px!important;
line-height:1!important;
letter-spacing:.22em!important;
}
body#top #contact .contact-social-grid{
display:flex!important;
flex:0 0 auto!important;
align-items:center!important;
justify-content:center!important;
gap:10px!important;
margin:0!important;
}
body#top #contact .contact-social-grid a{
width:46px!important;
height:46px!important;
min-height:46px!important;
}
body#top #contact .contact-social-grid i{font-size:16px!important}
body#top #contact .contact-signature{
flex:0 0 auto!important;
min-width:0!important;
margin:0!important;
padding:1px 0 1px 24px!important;
border:0!important;
border-left:1px solid rgba(224,184,79,.22)!important;
text-align:center!important;
}
body#top #contact .contact-signature strong{
font-size:21px!important;
line-height:1.05!important;
letter-spacing:.27em!important;
}
body#top #contact .contact-signature span{
display:block!important;
margin-top:7px!important;
font-size:8px!important;
letter-spacing:.29em!important;
}
@media(max-width:720px){
body#top #contact .contact-luxury-social{flex-wrap:wrap!important;gap:14px!important}
body#top #contact .contact-social-label{flex-basis:100%!important}
body#top #contact .contact-signature{padding-left:16px!important}
}
/* ===== V6 SOFT FRENCH GOLD — dimensional metallic system ===== */
:root{
--bondok-gold-deep:#93681E;
--bondok-gold-mid:#C9952E;
--bondok-gold:#E0B84F;
--bondok-gold-light:#FFE59A;
--bondok-gold-cream:#FFF2C2;
--bondok-metal:linear-gradient(105deg,#93681E 0%,#C9952E 20%,#E0B84F 42%,#FFE59A 57%,#E0B84F 72%,#A97920 100%);
--bondok-metal-bright:linear-gradient(105deg,#A87A22 0%,#E0B84F 28%,#FFF2C2 49%,#FFE59A 58%,#C9952E 82%,#93681E 100%);
}
/* Brand mark: soft living glow, not a flat gold */
body:not(.admin-page) .logo-main{
color:#F3E8D0!important;
text-shadow:0 0 8px rgba(255,229,154,.12),0 0 22px rgba(224,184,79,.10)!important;
animation:bondokLogoGlow 4.8s ease-in-out infinite!important;
}
body:not(.admin-page) .logo-main::first-letter{color:#FFE59A!important}
body:not(.admin-page) .logo-sub{
color:#E0B84F!important;
letter-spacing:7px!important;
text-shadow:0 0 8px rgba(255,229,154,.20),0 0 18px rgba(224,184,79,.14)!important;
animation:bondokLogoSubGlow 4.8s ease-in-out infinite!important;
}
@keyframes bondokLogoGlow{
0%,100%{filter:brightness(1);text-shadow:0 0 7px rgba(255,229,154,.10),0 0 18px rgba(224,184,79,.08)}
50%{filter:brightness(1.14);text-shadow:0 0 10px rgba(255,243,214,.30),0 0 26px rgba(255,229,154,.20),0 0 44px rgba(224,184,79,.12)}
}
@keyframes bondokLogoSubGlow{
0%,100%{filter:brightness(1);text-shadow:0 0 7px rgba(224,184,79,.14)}
50%{filter:brightness(1.18);text-shadow:0 0 9px rgba(255,243,214,.34),0 0 24px rgba(224,184,79,.22)}
}
/* Metallic treatment for primary gold CTAs */
body:not(.admin-page) .btn-primary,
body:not(.admin-page) .hero-btn.primary,
body:not(.admin-page) .hero-btn:first-child,
body:not(.admin-page) .contact-primary-cta,
body:not(.admin-page) button[type="submit"]:not(.menu-toggle){
background-image:var(--bondok-metal)!important;
background-size:220% 100%!important;
color:#100d08!important;
border-color:rgba(255,229,154,.58)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 8px 28px rgba(147,104,30,.15)!important;
transition:background-position .75s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1),box-shadow .35s ease!important;
}
@media (hover:hover) and (pointer:fine){
body:not(.admin-page) .btn-primary:hover,
body:not(.admin-page) .hero-btn.primary:hover,
body:not(.admin-page) .hero-btn:first-child:hover,
body:not(.admin-page) .contact-primary-cta:hover,
body:not(.admin-page) button[type="submit"]:not(.menu-toggle):hover{
background-image:var(--bondok-metal-bright)!important;
background-position:100% 0!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 10px 34px rgba(224,184,79,.22),0 0 24px rgba(255,229,154,.10)!important;
}
}
/* Elegant glow for gold headings/icons, restrained so the site doesn't look neon */
body:not(.admin-page) .section-title,
body:not(.admin-page) .contact-social-label,
body:not(.admin-page) .contact-signature strong{
text-shadow:0 0 16px rgba(224,184,79,.10)!important;
}
@media (prefers-reduced-motion:reduce){
body:not(.admin-page) .logo-main,body:not(.admin-page) .logo-sub{animation:none!important}
}
/* ===== V7 LUMINOUS YELLOW GOLD + BONDOK GLOW ===== */
:root{
--bondok-gold-deep:#93681E;--bondok-gold-mid:#C9952E;--bondok-gold:#E0B84F;
--bondok-gold-light:#FFE59A;--bondok-gold-cream:#FFF2C2;
--bondok-metal:linear-gradient(105deg,#93681E 0%,#C9952E 20%,#E0B84F 40%,#FFE59A 55%,#E0B84F 70%,#B98522 100%);
--bondok-metal-bright:linear-gradient(105deg,#A87A22 0%,#E0B84F 28%,#FFF2C2 48%,#FFE59A 59%,#D7A735 80%,#93681E 100%);
}
body:not(.admin-page) .logo-main,
body#top .hero #heroTitle{
color:#E0B84F!important;
-webkit-text-fill-color:#E0B84F!important;
text-shadow:0 0 7px rgba(255,229,154,.36),0 0 18px rgba(224,184,79,.32),0 0 38px rgba(201,149,46,.18)!important;
animation:bondokYellowGlow 3.6s ease-in-out infinite!important;
}
body:not(.admin-page) .logo-main::first-letter{color:#FFE59A!important;-webkit-text-fill-color:#FFE59A!important}
body:not(.admin-page) .logo-sub{
color:#FFE59A!important;
text-shadow:0 0 7px rgba(255,229,154,.42),0 0 18px rgba(224,184,79,.28)!important;
animation:bondokYellowGlow 3.6s ease-in-out infinite!important;
}
@keyframes bondokYellowGlow{
0%,100%{filter:brightness(1);text-shadow:0 0 6px rgba(255,229,154,.28),0 0 16px rgba(224,184,79,.25),0 0 32px rgba(201,149,46,.12)}
50%{filter:brightness(1.24);text-shadow:0 0 9px rgba(255,242,194,.66),0 0 24px rgba(255,229,154,.48),0 0 48px rgba(224,184,79,.28),0 0 70px rgba(201,149,46,.12)}
}
body#top .hero #heroSubtitle,body#top .hero #heroDescription{color:#FFE59A!important;text-shadow:0 0 12px rgba(224,184,79,.22)!important}
@media(prefers-reduced-motion:reduce){body:not(.admin-page) .logo-main,body:not(.admin-page) .logo-sub,body#top .hero #heroTitle{animation:none!important}}
/* ===== V9 HEADER BRAND + TRUE 100% TYPOGRAPHY SCALE ===== */
/* The old global .88 zoom made the whole public site look artificially reduced at browser 100%. */
:root{--site-scale:1!important}
body:not(.admin-page){zoom:1!important}
/* Header: BONDOK only, no wasted left gutter, compact luxury lockup. */
body:not(.admin-page) header.navbar,
body:not(.admin-page) .navbar{
padding-left:3.25%!important;
padding-right:3.25%!important;
}
body:not(.admin-page) .logo{
flex:0 0 auto!important;
width:auto!important;
min-width:0!important;
margin:0!important;
padding:0!important;
align-items:flex-start!important;
}
body:not(.admin-page) .logo-sub{display:none!important}
body:not(.admin-page) .logo-main{
font-size:clamp(28px,2.15vw,36px)!important;
letter-spacing:.16em!important;
line-height:1!important;
white-space:nowrap!important;
}
/* Comfortable desktop reading scale: keep hierarchy, stop micro-text. */
@media (min-width:769px){
body:not(.admin-page) .navbar nav a{font-size:12px!important}
body:not(.admin-page) .language-toggle{font-size:11px!important}
body#top #contact .contact-eyebrow,
body#top #contact .contact-social-label{font-size:11px!important;line-height:1.45!important}
body#top #contact .contact-luxury-copy>p{font-size:14px!important;line-height:1.75!important}
body#top #contact .contact-primary-cta span{font-size:14px!important}
body#top #contact .contact-primary-cta small{font-size:11px!important;line-height:1.55!important}
body#top #contact .contact-app-kicker{font-size:10px!important}
body#top #contact .contact-app-copy strong{font-size:14px!important}
body#top #contact .contact-app-copy small{font-size:11px!important}
body#top #contact .contact-signature strong{font-size:20px!important}
body#top #contact .contact-signature span{font-size:9px!important}
body:not(.admin-page) footer,
body:not(.admin-page) .footer{font-size:11px!important}
}
@media (max-width:768px){
body:not(.admin-page) header.navbar,
body:not(.admin-page) .navbar{padding-left:16px!important;padding-right:16px!important}
body:not(.admin-page) .logo-main{font-size:25px!important;letter-spacing:.13em!important}
}
/* ===== V10 HERO STABLE FIRST PAINT + FOOTER LEGIBILITY / BOND STUDIO MOTION ===== */
/* Reserve the final two-line hero lockup before Firebase returns, preventing BONDOK -> BONDOK PERFUME layout shift. */
body#top .hero #heroTitle{
min-height:1.92em!important;
display:block!important;
text-wrap:balance!important;
}
/* Footer: readable at browser 100%, still compact. */
#bondokGlobalFooter{min-height:104px!important;padding:0 4.5%!important}
#bondokGlobalFooter .bondok-footer-inner{min-height:104px!important;gap:34px!important}
#bondokGlobalFooter .bondok-footer-logo{font-size:22px!important;letter-spacing:4.5px!important}
#bondokGlobalFooter .bondok-footer-tagline{font-size:10px!important;line-height:1.45!important;letter-spacing:2.7px!important}
#bondokGlobalFooter .bondok-footer-copyright{font-size:11px!important;line-height:1.5!important;letter-spacing:.65px!important;color:rgba(255,255,255,.64)!important}
#bondokGlobalFooter .bondok-footer-credit{font-size:11px!important;line-height:1.5!important;letter-spacing:.55px!important;color:rgba(255,255,255,.68)!important;gap:9px!important}
#bondokGlobalFooter .bondok-footer-credit strong{
position:relative!important;
display:inline-block!important;
overflow:hidden!important;
padding:3px 2px!important;
font-size:13px!important;
font-weight:700!important;
letter-spacing:2px!important;
color:#FFE59A!important;
background:linear-gradient(100deg,#C9952E 0%,#FFE59A 32%,#FFF2C2 48%,#E0B84F 64%,#B98522 100%)!important;
background-size:220% 100%!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
text-shadow:none!important;
filter:drop-shadow(0 0 7px rgba(224,184,79,.28))!important;
animation:bondStudioLivingGold 4.2s ease-in-out infinite!important;
}
#bondokGlobalFooter .bondok-footer-credit strong::before{
content:""!important;
position:absolute!important;
inset:-25% auto -25% -45%!important;
width:30%!important;
display:block!important;
background:linear-gradient(90deg,transparent,rgba(255,248,218,.9),transparent)!important;
transform:skewX(-18deg)!important;
filter:blur(1px)!important;
animation:bondStudioSweep 4.2s cubic-bezier(.4,0,.2,1) infinite!important;
pointer-events:none!important;
}
@keyframes bondStudioLivingGold{
0%,100%{background-position:0% 50%;filter:drop-shadow(0 0 5px rgba(224,184,79,.20)) brightness(1)}
50%{background-position:100% 50%;filter:drop-shadow(0 0 12px rgba(255,229,154,.48)) brightness(1.18)}
}
@keyframes bondStudioSweep{
0%,18%{left:-45%;opacity:0}
28%{opacity:.95}
48%{left:118%;opacity:0}
100%{left:118%;opacity:0}
}
@media (hover:hover) and (pointer:fine){
#bondokGlobalFooter .bondok-footer-credit strong:hover{filter:drop-shadow(0 0 15px rgba(255,229,154,.62)) brightness(1.2)!important}
}
@media(max-width:760px){
body#top .hero #heroTitle{min-height:1.92em!important}
#bondokGlobalFooter{padding:22px 20px!important;min-height:0!important}
#bondokGlobalFooter .bondok-footer-inner{min-height:0!important;gap:13px!important}
#bondokGlobalFooter .bondok-footer-logo{font-size:20px!important}
#bondokGlobalFooter .bondok-footer-tagline{font-size:9px!important}
#bondokGlobalFooter .bondok-footer-copyright,#bondokGlobalFooter .bondok-footer-credit{font-size:10.5px!important}
#bondokGlobalFooter .bondok-footer-credit strong{font-size:12px!important}
}
@media(prefers-reduced-motion:reduce){
#bondokGlobalFooter .bondok-footer-credit strong{animation:none!important;background-position:50% 50%!important}
#bondokGlobalFooter .bondok-footer-credit strong::before{animation:none!important;display:none!important}
}
/* ===== V11 HERO OPTICAL CENTER + FOOTER CREDIT SAFE ZONE ===== */
/* Keep the hero block in its designed position, but force every line onto one exact visual axis. */
body#top .hero .hero-text{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
text-align:center!important;
}
body#top .hero #heroSubtitle,
body#top .hero #heroTitle,
body#top .hero #heroDescription{
align-self:center!important;
margin-left:auto!important;
margin-right:auto!important;
text-align:center!important;
}
body#top .hero #heroSubtitle{
width:max-content!important;
max-width:100%!important;
padding-left:5.5px!important; /* optical compensation for wide letter-spacing */
box-sizing:border-box!important;
}
body#top .hero #heroTitle{
width:max-content!important;
max-width:100%!important;
}
body#top .hero #heroDescription{
width:max-content!important;
max-width:100%!important;
padding-left:2px!important;
box-sizing:border-box!important;
}
body#top .hero .hero-buttons{align-self:center!important;justify-content:center!important}
/* Put the animated BOND STUDIO credit below copyright in the center and reserve the right side for floating WhatsApp. */
@media(min-width:761px){
#bondokGlobalFooter .bondok-footer-inner{
grid-template-columns:minmax(260px,1fr) minmax(360px,1.15fr) minmax(260px,1fr)!important;
grid-template-rows:auto auto!important;
column-gap:34px!important;
row-gap:5px!important;
padding:17px 0!important;
box-sizing:border-box!important;
}
#bondokGlobalFooter .bondok-footer-brand{
grid-column:1!important;
grid-row:1 / 3!important;
align-self:center!important;
}
#bondokGlobalFooter .bondok-footer-copyright{
grid-column:2!important;
grid-row:1!important;
align-self:end!important;
justify-self:center!important;
}
#bondokGlobalFooter .bondok-footer-credit{
grid-column:2!important;
grid-row:2!important;
justify-self:center!important;
align-self:start!important;
justify-content:center!important;
text-align:center!important;
}
}
/* ===== V12 NAVBAR TWO-TONE BONDOK LOCKUP ===== */
body:not(.admin-page) .logo{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:center!important;
width:max-content!important;
min-width:0!important;
gap:5px!important;
margin:0!important;
}
body:not(.admin-page) .logo-main{
display:block!important;
width:max-content!important;
margin:0!important;
padding:0!important;
font-size:clamp(29px,2.15vw,36px)!important;
line-height:.92!important;
letter-spacing:.145em!important;
color:#F7F0E4!important;
background:none!important;
-webkit-text-fill-color:currentColor!important;
text-shadow:0 0 7px rgba(247,240,228,.10)!important;
filter:none!important;
animation:bondokNavIvoryBreath 4.8s ease-in-out infinite!important;
}
body:not(.admin-page) .logo-main::first-letter{
color:#F1C232!important;
-webkit-text-fill-color:#F1C232!important;
text-shadow:0 0 7px rgba(255,210,61,.65),0 0 18px rgba(224,166,31,.38),0 0 30px rgba(201,149,46,.18)!important;
}
body:not(.admin-page) .logo-sub{
display:block!important;
width:100%!important;
margin:0!important;
padding:0!important;
transform:none!important;
text-align:center!important;
white-space:nowrap!important;
font-size:clamp(7px,.55vw,9px)!important;
line-height:1!important;
font-weight:600!important;
letter-spacing:.36em!important;
color:#E9B92F!important;
-webkit-text-fill-color:#E9B92F!important;
text-shadow:0 0 7px rgba(233,185,47,.32)!important;
animation:bondokNavTaglineGlow 4.8s ease-in-out infinite!important;
}
@keyframes bondokNavIvoryBreath{
0%,100%{text-shadow:0 0 5px rgba(247,240,228,.08)}
50%{text-shadow:0 0 9px rgba(247,240,228,.20),0 0 18px rgba(224,184,79,.08)}
}
@keyframes bondokNavTaglineGlow{
0%,100%{opacity:.88;text-shadow:0 0 5px rgba(233,185,47,.24)}
50%{opacity:1;text-shadow:0 0 8px rgba(255,216,75,.62),0 0 16px rgba(224,166,31,.25)}
}
@media (max-width:768px){
body:not(.admin-page) .logo{gap:4px!important}
body:not(.admin-page) .logo-main{font-size:25px!important;letter-spacing:.12em!important}
body:not(.admin-page) .logo-sub{font-size:6.5px!important;letter-spacing:.27em!important}
}
@media(prefers-reduced-motion:reduce){
body:not(.admin-page) .logo-main,body:not(.admin-page) .logo-sub{animation:none!important}
}
/* ===== V13 NAVBAR OPTION 4 — EXACT LOCKUP ===== */
body:not(.admin-page) .logo{
display:grid!important;
grid-template-columns:auto auto auto auto auto auto!important;
grid-template-rows:auto auto!important;
align-items:center!important;
justify-content:start!important;
justify-items:center!important;
width:max-content!important;
min-width:max-content!important;
gap:0!important;
margin:0!important;
padding:0!important;
text-decoration:none!important;
}
body:not(.admin-page) .logo-main{
grid-column:1 / -1!important;
grid-row:1!important;
display:block!important;
position:relative!important;
width:max-content!important;
margin:0!important;
padding:0!important;
font-family:Cinzel,serif!important;
font-size:clamp(34px,2.55vw,43px)!important;
font-weight:600!important;
line-height:.9!important;
letter-spacing:.105em!important;
color:transparent!important;
background:linear-gradient(100deg,#A87416 0%,#E0B84F 18%,#FFF0B0 31%,#D49A22 46%,#FFE28A 62%,#C88D1C 78%,#F4CE63 100%)!important;
background-size:220% 100%!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
filter:drop-shadow(0 0 5px rgba(224,184,79,.28))!important;
text-shadow:none!important;
animation:bondokOption4Metal 7s ease-in-out infinite!important;
}
/* Option 4 signature: champagne/ivory highlight crossing the O, while the word stays one cohesive gold mark. */
body:not(.admin-page) .logo-main::after{
content:"O"!important;
position:absolute!important;
left:1.08em!important;
top:0!important;
font:inherit!important;
line-height:inherit!important;
letter-spacing:0!important;
color:#FFF7E8!important;
-webkit-text-fill-color:#FFF7E8!important;
text-shadow:0 0 6px rgba(255,247,232,.18),0 0 13px rgba(224,184,79,.12)!important;
pointer-events:none!important;
}
body:not(.admin-page) .logo-sub{
grid-column:1 / -1!important;
grid-row:2!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
margin:8px 0 0!important;
padding:0!important;
text-align:center!important;
white-space:nowrap!important;
font-size:clamp(8px,.62vw,10px)!important;
line-height:1!important;
font-weight:600!important;
letter-spacing:.31em!important;
color:#E7B83F!important;
-webkit-text-fill-color:#E7B83F!important;
text-shadow:0 0 7px rgba(231,184,63,.25)!important;
animation:bondokOption4Tag 5.2s ease-in-out infinite!important;
}
body:not(.admin-page) .logo-sub::before,
body:not(.admin-page) .logo-sub::after{
content:""!important;
display:block!important;
width:31px!important;
height:1px!important;
flex:0 0 31px!important;
background:linear-gradient(90deg,transparent,#D8A92F)!important;
box-shadow:0 0 5px rgba(216,169,47,.18)!important;
}
body:not(.admin-page) .logo-sub::before{margin-right:12px!important}
body:not(.admin-page) .logo-sub::after{margin-left:9px!important;transform:scaleX(-1)!important}
@keyframes bondokOption4Metal{
0%,100%{background-position:0% 50%;filter:drop-shadow(0 0 4px rgba(224,184,79,.24))}
50%{background-position:100% 50%;filter:drop-shadow(0 0 8px rgba(255,211,83,.42))}
}
@keyframes bondokOption4Tag{
0%,100%{opacity:.9;text-shadow:0 0 5px rgba(231,184,63,.2)}
50%{opacity:1;text-shadow:0 0 9px rgba(255,211,83,.48)}
}
@media(max-width:768px){
body:not(.admin-page) .logo-main{font-size:28px!important;letter-spacing:.09em!important}
body:not(.admin-page) .logo-main::after{left:1.07em!important}
body:not(.admin-page) .logo-sub{margin-top:6px!important;font-size:6.8px!important;letter-spacing:.22em!important}
body:not(.admin-page) .logo-sub::before,body:not(.admin-page) .logo-sub::after{width:18px!important;flex-basis:18px!important}
body:not(.admin-page) .logo-sub::before{margin-right:7px!important}
body:not(.admin-page) .logo-sub::after{margin-left:5px!important}
}
@media(prefers-reduced-motion:reduce){
body:not(.admin-page) .logo-main,body:not(.admin-page) .logo-sub{animation:none!important}
}
/* ===== V14 NAVBAR OPTION 4 — CLEAN EXACT LETTER LOCKUP ===== */
/* Replace the V13 pseudo-letter overlay with real letter spans so nothing overlaps. */
body:not(.admin-page) .logo{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 auto!important;
width:max-content!important;
min-width:285px!important;
margin:0!important;
padding:0!important;
gap:7px!important;
overflow:visible!important;
}
body:not(.admin-page) .logo-main{
display:flex!important;
align-items:baseline!important;
justify-content:center!important;
width:max-content!important;
margin:0!important;
padding:0!important;
font-family:Cinzel,serif!important;
font-size:clamp(39px,3vw,48px)!important;
font-weight:600!important;
line-height:.82!important;
letter-spacing:.045em!important;
color:#E0B84F!important;
background:none!important;
-webkit-background-clip:initial!important;
background-clip:initial!important;
-webkit-text-fill-color:currentColor!important;
filter:drop-shadow(0 0 5px rgba(224,184,79,.30))!important;
text-shadow:none!important;
animation:bondokOption4WholeGlow 4.8s ease-in-out infinite!important;
white-space:nowrap!important;
}
body:not(.admin-page) .logo-main::after{content:none!important;display:none!important}
body:not(.admin-page) .logo-main::first-letter{color:inherit!important;-webkit-text-fill-color:inherit!important}
body:not(.admin-page) .logo-main .nav-letter{
display:inline-block!important;
color:#E0B84F!important;
-webkit-text-fill-color:#E0B84F!important;
background:linear-gradient(105deg,#A87416 0%,#E0B84F 28%,#FFF0B0 47%,#E0B84F 63%,#B77E17 100%)!important;
background-size:230% 100%!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
animation:bondokOption4LetterMetal 7s ease-in-out infinite!important;
}
/* Option 4: the first O is the clean ivory/champagne accent — no duplicate glyph. */
body:not(.admin-page) .logo-main .nav-o{
background:none!important;
color:#FFF7E8!important;
-webkit-text-fill-color:#FFF7E8!important;
text-shadow:0 0 5px rgba(255,247,232,.15),0 0 11px rgba(224,184,79,.10)!important;
animation:bondokOption4Ivory 4.8s ease-in-out infinite!important;
}
body:not(.admin-page) .logo-sub{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
margin:0!important;
padding:0!important;
transform:none!important;
text-align:center!important;
white-space:nowrap!important;
font-size:10px!important;
line-height:1!important;
font-weight:600!important;
letter-spacing:.25em!important;
color:#E7B83F!important;
-webkit-text-fill-color:#E7B83F!important;
text-shadow:0 0 7px rgba(231,184,63,.30)!important;
animation:bondokOption4Tag 5.2s ease-in-out infinite!important;
}
body:not(.admin-page) .logo-sub::before,
body:not(.admin-page) .logo-sub::after{
content:""!important;
display:block!important;
width:38px!important;
height:1px!important;
flex:0 0 38px!important;
background:linear-gradient(90deg,transparent,#D8A92F)!important;
box-shadow:0 0 5px rgba(216,169,47,.20)!important;
}
body:not(.admin-page) .logo-sub::before{margin-right:12px!important}
body:not(.admin-page) .logo-sub::after{margin-left:9px!important;transform:scaleX(-1)!important}
@keyframes bondokOption4LetterMetal{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes bondokOption4WholeGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(224,184,79,.24))}50%{filter:drop-shadow(0 0 9px rgba(255,211,83,.42))}}
@keyframes bondokOption4Ivory{0%,100%{text-shadow:0 0 4px rgba(255,247,232,.12)}50%{text-shadow:0 0 7px rgba(255,247,232,.25),0 0 14px rgba(224,184,79,.14)}}
@media(min-width:769px){
body:not(.admin-page) header.navbar,body:not(.admin-page) .navbar{padding-left:3.4%!important;padding-right:3.4%!important}
}
@media(max-width:768px){
body:not(.admin-page) .logo{min-width:0!important;gap:5px!important;align-items:flex-start!important}
body:not(.admin-page) .logo-main{font-size:29px!important;letter-spacing:.035em!important}
body:not(.admin-page) .logo-sub{font-size:6.7px!important;letter-spacing:.18em!important;justify-content:flex-start!important}
body:not(.admin-page) .logo-sub::before,body:not(.admin-page) .logo-sub::after{display:none!important}
}
@media(prefers-reduced-motion:reduce){body:not(.admin-page) .logo-main,body:not(.admin-page) .logo-main .nav-letter,body:not(.admin-page) .logo-sub{animation:none!important}}
/* =========================================================
V15 — HOME COLLECTION + REVIEWS / DOTS INDICATOR
========================================================= */
@media (min-width: 769px){
body#top #collection .home-slider,
body#top #reviews .reviews-slider{
position:relative!important;
padding-bottom:34px!important;
}
/* Collection arrows use the exact same visual language as Reviews */
body#top #collection .slider-btn,
body#top #reviews .reviews-btn{
position:absolute!important;
top:50%!important;
transform:translateY(-50%)!important;
width:44px!important;
height:44px!important;
min-width:44px!important;
padding:0!important;
border-radius:50%!important;
border:1px solid rgba(224,184,79,.48)!important;
background:rgba(9,9,9,.94)!important;
color:#E0B84F!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-family:Arial,sans-serif!important;
font-size:20px!important;
line-height:1!important;
box-shadow:0 10px 28px rgba(0,0,0,.38),0 0 0 1px rgba(224,184,79,.04) inset!important;
z-index:8!important;
transition:background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease!important;
}
body#top #collection .slider-btn:hover,
body#top #reviews .reviews-btn:hover{
background:#E0B84F!important;
color:#080808!important;
border-color:#E0B84F!important;
transform:translateY(-50%) scale(1.06)!important;
box-shadow:0 10px 30px rgba(0,0,0,.42),0 0 22px rgba(224,184,79,.18)!important;
}
body#top #collection .slider-btn.prev,
body#top #reviews .reviews-btn.prev{left:4px!important;}
body#top #collection .slider-btn.next,
body#top #reviews .reviews-btn.next{right:4px!important;}
.bondok-desktop-dots{
position:absolute;
left:50%;
bottom:2px;
transform:translateX(-50%);
display:flex;
align-items:center;
justify-content:center;
gap:9px;
z-index:7;
}
.bondok-desktop-dots button{
appearance:none;
width:7px;
height:7px;
min-width:7px;
padding:0;
border-radius:50%;
border:1px solid rgba(224,184,79,.78);
background:transparent;
cursor:pointer;
box-shadow:none;
transition:width .28s ease,background .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.bondok-desktop-dots button.active{
width:8px;
height:8px;
background:#E0B84F;
border-color:#E0B84F;
box-shadow:0 0 12px rgba(224,184,79,.48);
}
}
@media (max-width:768px){.bondok-desktop-dots{display:none!important;}}
/* =========================================================
V16 — COMPACT REVIEWS + COLLECTION ARROWS OUTSIDE CARDS
========================================================= */
@media (min-width:769px){
/* Reviews: deliberately compact so screenshots do not dominate the page */
body#top #reviews .reviews-slider{
width:min(1080px,92%)!important;
margin:0 auto!important;
padding:0 58px 34px!important;
}
body#top #reviews .reviews-grid{
gap:20px!important;
padding:10px 0 20px!important;
}
body#top #reviews .review-card{
flex:0 0 clamp(240px,22vw,300px)!important;
width:clamp(240px,22vw,300px)!important;
min-width:clamp(240px,22vw,300px)!important;
height:clamp(350px,30vw,410px)!important;
border-radius:20px!important;
}
/* Collection: arrows are real side columns, never overlays on product cards */
body#top #collection .home-slider{
width:min(1380px,96%)!important;
max-width:1380px!important;
margin:0 auto!important;
padding:0 0 34px!important;
display:grid!important;
grid-template-columns:54px minmax(0,1fr) 54px!important;
grid-template-rows:auto!important;
column-gap:16px!important;
align-items:center!important;
position:relative!important;
}
body#top #collection .collection-grid{
grid-column:2!important;
grid-row:1!important;
min-width:0!important;
width:100%!important;
}
body#top #collection .slider-btn{
position:static!important;
inset:auto!important;
top:auto!important;
left:auto!important;
right:auto!important;
transform:none!important;
margin:0 auto!important;
align-self:center!important;
}
body#top #collection .slider-btn.prev{
grid-column:1!important;
grid-row:1!important;
}
body#top #collection .slider-btn.next{
grid-column:3!important;
grid-row:1!important;
}
body#top #collection .slider-btn:hover{
transform:scale(1.06)!important;
}
body#top #collection .bondok-desktop-dots{
grid-column:1 / -1!important;
}
}
@media (max-width:768px){
body#top #reviews .review-card{
height:min(68vh,430px)!important;
}
}
/* =========================================================
V17 — HOME SLIDER CONTENT + PAGE DOTS
========================================================= */
@media (min-width:769px){
/* Restore the complete home product card content removed by an older home compact rule. */
body#top #collection .home-slider .perfume-card{
min-height:560px!important;
height:auto!important;
padding:28px!important;
overflow:hidden!important;
}
body#top #collection .home-slider .perfume-card img{
height:230px!important;
object-fit:cover!important;
}
body#top #collection .home-slider .perfume-card p{
display:block!important;
height:auto!important;
min-height:42px!important;
max-height:44px!important;
overflow:hidden!important;
margin:8px 0 14px!important;
font-size:13px!important;
line-height:1.65!important;
}
body#top #collection .home-slider .perfume-sizes{
display:flex!important;
flex-wrap:wrap!important;
justify-content:center!important;
gap:7px!important;
margin-top:10px!important;
}
body#top #collection .home-slider .size-price{
padding:8px 12px!important;
font-size:11px!important;
line-height:1.2!important;
}
/* Dots represent pages, not every single card/review. */
body#top #collection .bondok-desktop-dots,
body#top #reviews .bondok-desktop-dots{
gap:9px!important;
min-height:18px!important;
}
body#top #collection .bondok-desktop-dots button,
body#top #reviews .bondok-desktop-dots button{
width:6px!important;
height:6px!important;
min-width:6px!important;
border-radius:50%!important;
transition:transform .28s ease,background .28s ease,box-shadow .28s ease!important;
}
body#top #collection .bondok-desktop-dots button.active,
body#top #reviews .bondok-desktop-dots button.active{
transform:scale(1.55)!important;
box-shadow:0 0 12px rgba(224,184,79,.55)!important;
}
}
/* =========================================================
V18 — EXACT 3-CARD HOME PAGES + TRUE PAGED DOTS + STABLE HERO FIRST PAINT
========================================================= */
/* Never show the temporary hero state while Firestore/media settings are still resolving. */
body#top .hero.hero-loading{
background-image:none!important;
background-color:#0a0907!important;
}
body#top .hero.hero-loading .hero-text{opacity:0!important;visibility:hidden!important}
body#top .hero.hero-ready .hero-text{opacity:1!important;visibility:visible!important;transition:opacity .42s ease!important}
@media (min-width:769px){
/* Collection: exactly three complete home cards. No fourth clipped card. */
body#top #collection .collection-grid{
display:flex!important;
gap:26px!important;
overflow-x:auto!important;
overflow-y:visible!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
padding:10px 0 18px!important;
}
body#top #collection .collection-grid::-webkit-scrollbar{display:none!important}
body#top #collection .home-slider .perfume-card{
flex:0 0 calc((100% - 52px)/3)!important;
width:calc((100% - 52px)/3)!important;
min-width:calc((100% - 52px)/3)!important;
min-height:0!important;
height:auto!important;
padding:26px 22px 24px!important;
scroll-snap-align:start!important;
overflow:hidden!important;
}
body#top #collection .home-slider .perfume-card img{height:230px!important;object-fit:cover!important}
body#top #collection .home-slider .perfume-card p{
display:-webkit-box!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
overflow:hidden!important;
min-height:42px!important;
max-height:42px!important;
margin:8px 0 0!important;
}
body#top #collection .home-slider .perfume-sizes{display:none!important}
/* Reviews: exactly three complete screenshots. No clipped fourth review. */
body#top #reviews .reviews-slider{width:min(1080px,92%)!important;padding:0 58px 34px!important}
body#top #reviews .reviews-grid{
display:flex!important;
gap:20px!important;
width:100%!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
padding:10px 0 20px!important;
}
body#top #reviews .reviews-grid::-webkit-scrollbar{display:none!important}
body#top #reviews .review-card{
flex:0 0 calc((100% - 40px)/3)!important;
width:calc((100% - 40px)/3)!important;
min-width:calc((100% - 40px)/3)!important;
height:clamp(350px,30vw,410px)!important;
scroll-snap-align:start!important;
}
/* Dots stay compact and centered; JS now creates one dot per group of three. */
body#top #collection .bondok-desktop-dots,
body#top #reviews .bondok-desktop-dots{gap:10px!important}
}
/* V28 — HERO TITLE USES THE SAME METALLIC GOLD FAMILY AS THE HOME NAVBAR LOGO */
body#top .hero #heroTitle{
color:#E0B84F!important;
background:linear-gradient(105deg,#A87416 0%,#E0B84F 28%,#FFF0B0 47%,#E0B84F 63%,#B77E17 100%)!important;
background-size:230% 100%!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
text-shadow:none!important;
filter:drop-shadow(0 0 5px rgba(224,184,79,.30))!important;
animation:bondokOption4LetterMetal 7s ease-in-out infinite!important;
}
@media(prefers-reduced-motion:reduce){body#top .hero #heroTitle{animation:none!important;background-position:50% 50%!important}}
body:not(.admin-page) .navbar .social-links > #whatsappLink,
body:not(.admin-page) .navbar .social-links > a[aria-label="Facebook"],
body:not(.admin-page) .navbar .social-links > a[aria-label="TikTok"],
body:not(.admin-page) .navbar .social-links > a[aria-label="Instagram"]{
display:none!important;
}
body#top .hero #heroTitle .hero-logo-letter,
body#top .hero #heroTitle .hero-logo-word{
display:inline-block;
color:#E0B84F;
background:linear-gradient(105deg,#A87416 0%,#E0B84F 28%,#FFF0B0 47%,#E0B84F 63%,#B77E17 100%);
background-size:230% 100%;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
animation:bondokOption4LetterMetal 7s ease-in-out infinite;
}
body#top .hero #heroTitle .hero-logo-o{
background:none!important;
color:#FFF7E8!important;
-webkit-text-fill-color:#FFF7E8!important;
text-shadow:0 0 5px rgba(255,247,232,.15),0 0 11px rgba(224,184,79,.10)!important;
animation:bondokOption4Ivory 4.8s ease-in-out infinite!important;
}
body#top .hero #heroTitle .hero-logo-gap{display:inline-block;width:.28em}
body#top .hero #heroTitle{
font-size:clamp(58px,5.1vw,78px)!important;
font-weight:600!important;
line-height:.96!important;
max-width:560px!important;
letter-spacing:normal!important;
white-space:normal!important;
color:#E0B84F!important;
background:linear-gradient(105deg,#A87416 0%,#E0B84F 28%,#FFF0B0 47%,#E0B84F 63%,#B77E17 100%)!important;
background-size:230% 100%!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
text-shadow:none!important;
filter:drop-shadow(0 0 5px rgba(224,184,79,.30))!important;
animation:bondokOption4LetterMetal 7s ease-in-out infinite!important;
}
@media(max-width:760px){body#top .hero #heroTitle{font-size:clamp(42px,12vw,58px)!important;line-height:.96!important}}
@media(prefers-reduced-motion:reduce){body#top .hero #heroTitle{animation:none!important;background-position:50% 50%!important}}
body#top .hero #heroTitle{font-size:clamp(58px,5.1vw,78px)!important;font-weight:600!important;line-height:.96!important;max-width:560px!important;letter-spacing:normal!important;white-space:normal!important;color:#E0B84F!important;background:linear-gradient(105deg,#A87416 0%,#E0B84F 28%,#FFF0B0 47%,#E0B84F 63%,#B77E17 100%)!important;background-size:230% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;filter:drop-shadow(0 0 5px rgba(224,184,79,.30))!important;animation:bondokOption4LetterMetal 7s ease-in-out infinite!important}
@media(max-width:760px){body#top .hero #heroTitle{font-size:clamp(42px,12vw,58px)!important;line-height:.96!important}}
/* V32 stable hero: final state only, no post-load resize/reflow */
body#top .hero.hero-loading{background-image:none!important;background-color:#0a0907!important}
body#top .hero.hero-loading .hero-text{opacity:0!important;visibility:hidden!important}
body#top .hero.hero-ready .hero-text{opacity:1!important;visibility:visible!important}
body#top .hero #heroTitle{display:block!important;width:max-content!important;max-width:560px!important;min-height:1.92em!important;margin-left:auto!important;margin-right:auto!important;font-family:"Cinzel",serif!important;font-size:clamp(58px,5.1vw,78px)!important;font-weight:600!important;line-height:.96!important;letter-spacing:3px!important;white-space:normal!important;text-align:center!important;color:#E0B84F!important;background:linear-gradient(105deg,#A87416 0%,#E0B84F 28%,#FFF0B0 47%,#E0B84F 63%,#B77E17 100%)!important;background-size:230% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;filter:drop-shadow(0 0 5px rgba(224,184,79,.30))!important}
body#top .hero .hero-text{align-items:center!important;text-align:center!important}
body#top .hero .hero-buttons{align-self:center!important;justify-content:center!important}
@media(max-width:760px){body#top .hero #heroTitle{font-size:clamp(42px,12vw,58px)!important;line-height:.96!important;letter-spacing:2px!important}}
/* V37 — Contact CTA: integrated premium signature line */
body#top #contact .contact-luxury-copy>p{
margin-bottom:0!important;
}
body#top #contact .contact-just-message{
grid-column:1/-1!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
gap:12px!important;
width:max-content!important;
max-width:100%!important;
margin:-2px 0 8px!important;
padding:0!important;
font-family:"Cinzel",serif!important;
font-size:clamp(13px,1.05vw,16px)!important;
font-weight:600!important;
line-height:1.25!important;
letter-spacing:.055em!important;
text-transform:none!important;
white-space:nowrap!important;
color:#E0B84F!important;
background:linear-gradient(100deg,#B98524 0%,#E0B84F 30%,#FFF0B0 49%,#E0B84F 66%,#B98524 100%)!important;
background-size:280% 100%!important;
-webkit-background-clip:text!important;
background-clip:text!important;
-webkit-text-fill-color:transparent!important;
filter:drop-shadow(0 0 3px rgba(224,184,79,.16))!important;
animation:bondokContactMessageShimmerV37 5.6s ease-in-out infinite,bondokContactMessageGlowV37 4.2s ease-in-out infinite!important;
}
body#top #contact .contact-just-message::before,
body#top #contact .contact-just-message::after{
content:"";
display:block;
width:34px;
height:1px;
flex:0 0 34px;
background:linear-gradient(90deg,transparent,rgba(224,184,79,.9));
box-shadow:0 0 7px rgba(224,184,79,.24);
-webkit-text-fill-color:initial;
}
body#top #contact .contact-just-message::after{
background:linear-gradient(90deg,rgba(224,184,79,.9),transparent);
}
@keyframes bondokContactMessageShimmerV37{
0%,30%{background-position:110% 50%}
58%{background-position:-120% 50%}
100%{background-position:-120% 50%}
}
@keyframes bondokContactMessageGlowV37{
0%,100%{filter:drop-shadow(0 0 2px rgba(224,184,79,.12))}
50%{filter:drop-shadow(0 0 6px rgba(255,229,154,.28))}
}
@media (prefers-reduced-motion:reduce){
body#top #contact .contact-just-message{animation:none!important;background-position:50% 50%!important}
}
@media(max-width:820px){
body#top #contact .contact-just-message{font-size:13px!important;gap:9px!important;margin-top:-2px!important;white-space:normal!important}
body#top #contact .contact-just-message::before,
body#top #contact .contact-just-message::after{width:22px;flex-basis:22px}
}
/* Home collection cap */
.home-collection-view-all{display:flex;justify-content:center;margin:26px 0 0}
.home-collection-view-all a{min-width:210px;min-height:44px;padding:0 20px;border:1px solid rgba(201,162,39,.36);display:inline-flex;align-items:center;justify-content:center;gap:11px;color:#cdb878;text-decoration:none;font:600 10px/1 Poppins,sans-serif;letter-spacing:1.35px;transition:.25s ease;background:rgba(201,162,39,.025)}
.home-collection-view-all a:hover{border-color:#c9a227;background:rgba(201,162,39,.07);transform:translateY(-1px)}
[dir=rtl] .home-collection-view-all i{transform:scaleX(-1)}
/* Source: css/upgrade.css */
/*=========================================================
BONDOK — UPGRADE LAYER
=========================================================
إصلاحات وصقل فوق التصميم الحالي.
الملف ده ما بيغيّرش أي هوية: نفس الألوان، نفس الخطوط،
نفس الأحجام. بيصلّح سلوك مكسور وبيضيف صقل على اللي
موجود بالفعل.
بيتحمّل آخر واحد عشان يقدر يصحّح من غير !important
قدر الإمكان.
=========================================================*/
/*---------------------------------------------------------
١) منع التكبير التلقائي على iPhone
---------------------------------------------------------
أي حقل إدخال بخط أصغر من 16px بيخلّي سفاري يكبّر الصفحة
تلقائياً أول ما المستخدم يدوس عليه — وبعدين الصفحة
بتفضل مكبّرة. الموقع كان فيه 85 قاعدة بتقع في ده.
المقاس البصري ما بيتغيرش على الشاشات الكبيرة، بس
على الموبايل بيتثبّت على 16px.
---------------------------------------------------------*/
@media (max-width: 900px) {
/* !important ضروري هنا: قواعد الصفحات بتحدد أحجام أصغر
بتخصص أعلى، والنتيجة إن سفاري بيكبّر الصفحة على أي
ضغطة على حقل. ده تصحيح سلوك مكسور مش تغيير تصميم —
المقاس البصري على الشاشات الكبيرة ما اتغيرش. */
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
body textarea,
body select {
font-size: max(16px, 1em) !important;
}
}
/*---------------------------------------------------------
٢) مساحات اللمس
---------------------------------------------------------
الأزرار الأيقونية الصغيرة صعب تتلمس بدقة. المساحة
بتتوسّع من غير ما الشكل يكبر.
---------------------------------------------------------*/
@media (pointer: coarse) {
/* القواعد الأصلية بتحدد عرض 40–42px بتخصص أعلى.
المساحة بتتوسّع من غير ما الأيقونة نفسها تكبر. */
body .logo,
body a[class*="-link"],
body .menu-toggle,
body .language-toggle,
body .wishlist-btn,
body .product-wishlist-btn,
body .close-popup,
body .gallery-prev,
body .gallery-next,
body .quantity-btn,
body .carousel-arrow,
body .filter-btn,
body .social-links a,
body .contact-social-grid a {
min-width: 44px !important;
min-height: 44px !important;
}
/* روابط الفوتر بتتلمس كمان */
.footer-links a,
.footer-column a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
}
/*---------------------------------------------------------
٣) منع التمرير الأفقي
---------------------------------------------------------
أي عنصر بيطلع برّه عرض الشاشة بيخلّي الصفحة كلها
تتحرك يمين وشمال على الموبايل.
---------------------------------------------------------*/
html,
body {
overflow-x: hidden;
}
/* النصوص الطويلة (روابط، أكواد، إيميلات) بتلف بدل ما توسّع */
p, li, td, dd,
.perfume-card p,
.review-text,
.notification-item {
overflow-wrap: anywhere;
}
/*---------------------------------------------------------
٤) تقليل الحركة
---------------------------------------------------------
المستخدم اللي مفعّل «تقليل الحركة» في نظامه بيشوف
الحركة مختصرة مش متشالة — عشان تغيّر الحالة يفضل واضح.
---------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/*---------------------------------------------------------
٥) مؤشر التركيز
---------------------------------------------------------
ضروري للتنقل بالكيبورد. بالدهبي عشان يتماشى مع الهوية.
---------------------------------------------------------*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid #E0B84F;
outline-offset: 3px;
border-radius: 3px;
}
/*---------------------------------------------------------
٦) رابط التخطي
---------------------------------------------------------
بيسمح لمستخدم الكيبورد إنه يعدّي القائمة ويروح للمحتوى.
مخفي لحد ما ياخد التركيز.
---------------------------------------------------------*/
.bondok-skip {
position: absolute;
top: 12px;
left: 12px;
z-index: 100000;
padding: 12px 20px;
background: #E0B84F;
color: #0B0B0B;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 600;
border-radius: 6px;
text-decoration: none;
transform: translateY(-200%);
transition: transform .18s ease;
}
.bondok-skip:focus-visible {
transform: translateY(0);
outline: 2px solid #0B0B0B;
outline-offset: 2px;
}
html[dir="rtl"] .bondok-skip { left: auto; right: 12px; }
/*---------------------------------------------------------
٧) حجز مساحة الصور
---------------------------------------------------------
من غير نسبة محجوزة، الصفحة بتنطّ وهي بتحمّل الصور
والمستخدم ممكن يدوس على حاجة غلط.
---------------------------------------------------------*/
.perfume-card img,
.recommended-card img,
.gallery-card img,
.review-card img {
aspect-ratio: 3 / 4;
object-fit: cover;
}
.bondok-home-media-card img {
aspect-ratio: auto;
}
/*---------------------------------------------------------
٨) صقل أداء الحركة
---------------------------------------------------------
نظام الحركة الموجود كامل وما اتغيّرش. التعديلات هنا
بتخص الأداء بس — نفس الإحساس، بسلاسة أعلى.
---------------------------------------------------------*/
/* filter:blur() بيجبر المتصفح يعيد رسم العنصر في كل إطار،
وده بيسبب تقطيع وقت التمرير لما يبقى على عناصر كتير.
الحركة بتفضل موجودة (تلاشي + إزاحة) من غير التكلفة دي. */
@media (prefers-reduced-motion: no-preference) {
.bm-reveal.bm-up,
.bm-reveal.bm-card {
filter: none;
}
.bm-reveal {
transition-property: opacity, transform;
}
}
/* will-change بيحجز ذاكرة رسم دايمة. بعد ما العنصر يظهر
خلاص، الحجز ده مالوش لازمة. */
.bm-reveal.bm-in {
will-change: auto;
}
/* الحركة على الموبايل أخف: الأجهزة الأضعف بتتقل مع
التحولات الكبيرة وقت التمرير */
@media (max-width: 768px) {
.perfume-card,
.review-card,
.gallery-card img,
.bondok-home-media-card img {
will-change: auto;
}
}
/*---------------------------------------------------------
٩) ثبات الأرقام
---------------------------------------------------------
الأسعار وعدّاد السلة كانت بترقص وهي بتتغيّر لأن عرض
الأرقام مش ثابت في الخط.
---------------------------------------------------------*/
.price,
[class*="price"],
[class*="total"],
[class*="points"],
#cartCount,
.perfume-price,
.cart-item-price,
.order-total {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/*---------------------------------------------------------
١٠) عنوان الهيرو على الموبايل [إصلاح باگ]
---------------------------------------------------------
site-final-v2.css بيفرض على العنوان:
font-size: clamp(58px, 5.1vw, 78px) !important
width: max-content !important
من غير أي media query، فالقاعدة دي بتلغي التصغير اللي
في index-page.css على الشاشات الصغيرة.
النتيجة: «BONDOK PERFUME» بيخرج برّه الشاشة على أي
موبايل وبيتقطع.
التصميم ما بيتغيرش — نفس الخط، نفس اللون، نفس التدرّج
الذهبي. المقاس بس هو اللي بيتظبط على عرض الشاشة.
---------------------------------------------------------*/
@media (max-width: 700px) {
body#top .hero #heroTitle {
/* max-content بتخلّي العنصر ياخد عرض النص من غير لف */
width: auto !important;
max-width: 100% !important;
font-size: clamp(34px, 9.4vw, 52px) !important;
letter-spacing: 1px !important;
line-height: 1.04 !important;
/* لو فضل فيه كلمة أطول من الشاشة، تلف بدل ما تتقص */
overflow-wrap: break-word;
}
}
@media (max-width: 380px) {
body#top .hero #heroTitle {
font-size: clamp(30px, 8.8vw, 40px) !important;
letter-spacing: .5px !important;
}
}
/*---------------------------------------------------------
١١) صورة المنتج — منع الوميض والقفزة
---------------------------------------------------------
![]()
بيتولد من غير src، وبيفضل كده
لحد ما Firestore يرجّع بيانات المنتج. وبما إن ارتفاعه
auto، العمود كان بينهار لصفر وبعدين يقفز فجأة لما الصورة
توصل — وده اللي كان شكله وميض وكأن الصفحة اتكسرت.
بنحجز المساحة من أول رسمة، والصورة بتظهر بتلاشي هادئ
بدل ما تنطّ. أول ما يبقى ليها src، الحجز بيسيب المقاس
الطبيعي يشتغل عشان الصورة ما تتشوّهش.
---------------------------------------------------------*/
/* الحجز شغّال طالما الصورة لسه من غير src. أول ما يبقى
ليها مصدر، العمود بياخد ارتفاع الصورة الطبيعي من غير
فراغ زيادة تحتها. */
.product-page .product-image:has(img:not([src])) {
min-height: clamp(300px, 58vw, 520px);
}
body .product-page .product-image img:not([src]) {
/* عنصر فاضي: بيحجز مكانه من غير ما يبان */
min-height: clamp(300px, 58vw, 520px) !important;
background: linear-gradient(160deg, #101010, #060606);
border-radius: 14px;
}
@media (prefers-reduced-motion: no-preference) {
body .product-page .product-image img {
transition: opacity .32s ease;
}
body .product-page .product-image img:not([src]) {
opacity: 0;
}
}
/*---------------------------------------------------------
١٢) مساحة لمس للنقاط وأزرار الفلتر
---------------------------------------------------------
نقاط الكاروسيل مساحتها 6×6 بكسل — أصغر بكتير من أي إصبع.
وأزرار الفلتر القصيرة زي ALL عرضها 31 بكسل.
الشكل ما بيتغيرش: النقطة تفضل بنفس المقاس والحجم واللون.
اللي بيكبر هو منطقة الضغط بس، عن طريق طبقة شفافة فوق
العنصر. الـ z-index سالب عشان ما تغطّيش حاجة فوقيها.
---------------------------------------------------------*/
body .bondok-swipe-dots button,
body .bondok-desktop-dots button {
position: relative;
}
/* المنطقة كانت ٤٤×٤٤ والمسافة بين النقاط ٢٠px، فكل
نقطة كانت بتغطّي جيرانها — والضغط على نقطة كان ممكن
يشغّل اللي جنبها.
العرض دلوقتي مربوط بالمسافة الفعلية بين النقاط
(٦px نقطة + ٢٢px فراغ = ٢٨px)، والارتفاع فضل ٤٤
لأن التراكب الرأسي مش وارد في صف أفقي. */
body .bondok-swipe-dots button::after,
body .bondok-desktop-dots button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 44px;
transform: translate(-50%, -50%);
}
/* النقطة النشطة بتتمدّد لـ٢٢px، فمنطقتها بتوسّع معاها */
body .bondok-swipe-dots button.active::after,
body .bondok-desktop-dots button.active::after {
width: 44px;
}
body .bondok-swipe-dots {
gap: 22px;
}
/* أزرار الفلتر تبويبات بخط تحتها، والـ::after محجوز للخط
ده. فبنوسّع منطقة الضغط بـ::before عشان الخط ما يطولش. */
body .filter-buttons .filter-btn,
body .collection-page .filter-btn {
position: relative;
}
body .filter-buttons .filter-btn::before,
body .collection-page .filter-btn::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
min-width: 48px;
width: 100%;
height: 44px;
transform: translate(-50%, -50%);
}
/* زرار المقارنة ارتفاعه 24 بكسل — نفس الأسلوب: الشكل ثابت
ومنطقة الضغط بس هي اللي بتتوسّع. */
body .perfume-card .compare-choice {
position: relative;
}
body .perfume-card .compare-choice::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 44px;
transform: translate(-50%, -50%);
}
/*=========================================================
١٣) صقل الصفحة الرئيسية
=========================================================
ملاحظات مباشرة على النتيجة. الهوية والألوان والنصوص
والأقسام زي ما هي — التعديل في العرض بس.
=========================================================*/
/*---------------------------------------------------------
أ) الخط العربي
---------------------------------------------------------
النص العربي كان بيتعرض بـ Poppins، وهو خط مفيهوش حروف
عربية أصلاً — فالمتصفح كان بيرجع لخط النظام الافتراضي.
ده سبب إن قسم OUR STORY ووصف المنتجات شكلهم مكسور ومش
متناسق مع باقي الموقع.
Noto Kufi Arabic كان بيتحمّل لما تبدّلي اللغة لعربي بس،
رغم إن المحتوى العربي ظاهر في النسخة الإنجليزية كمان.
دلوقتي بقى ضمن نفس طلب Google Fonts الموجود — وملفاته
ما بتتحمّلش إلا لو في حروف عربية فعلاً على الصفحة.
الترتيب مهم: Poppins الأول عشان الحروف اللاتينية تفضل
زي ما هي بالظبط، والعربي بس هو اللي بينزل على الخط
التاني.
---------------------------------------------------------*/
body,
body button,
body input,
body textarea,
body select {
font-family: "Poppins", "Noto Kufi Arabic", sans-serif;
}
body#top #collection .perfume-card p,
body .collection-page .perfume-card p,
body#top #storyDescription,
body #productDescription {
font-family: "Poppins", "Noto Kufi Arabic", sans-serif !important;
}
/* العربي محتاج تنفّس بين السطور أكتر من اللاتيني */
body#top #collection .perfume-card p,
body .collection-page .perfume-card p {
line-height: 1.95 !important;
}
/*---------------------------------------------------------
ب) قسم OUR STORY
---------------------------------------------------------
النص كان ماشي على عرض 760 بكسل بارتفاع سطر 1.6 — سطور
طويلة ومتلاصقة، والعين بتتوه وهي راجعة لأول السطر.
---------------------------------------------------------*/
body#top #story #storyDescription {
max-width: 640px !important;
margin-left: auto !important;
margin-right: auto !important;
font-size: 16px !important;
line-height: 2.1 !important;
letter-spacing: 0 !important;
color: rgba(238, 233, 223, .88) !important;
text-align: right !important;
text-wrap: pretty;
}
/*---------------------------------------------------------
ج) الهيرو
---------------------------------------------------------
كان بينتهي بحد أفقي حاد على القسم اللي بعده — ده أكتر
حاجة بتخلي الواجهة تبان عادية. بنضيف تلاشي لأسفل عشان
الصورة تذوب في الأسود، وتعتيم جانبي خفيف يركّز العين.
---------------------------------------------------------*/
body#top .hero::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 220px;
pointer-events: none;
z-index: 2;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(11, 11, 11, .55) 62%,
#0b0b0b 100%
);
}
/* تعتيم دائري خفيف حوالين الحواف */
body#top .hero::before {
background:
radial-gradient(
120% 85% at 50% 45%,
transparent 40%,
rgba(0, 0, 0, .42) 100%
),
linear-gradient(
90deg,
rgba(0, 0, 0, .05) 0%,
rgba(0, 0, 0, .12) 36%,
rgba(0, 0, 0, .58) 100%
) !important;
}
/* السطر الصغير فوق العنوان كان تايه */
body#top .hero #heroSubtitle {
font-size: 12px !important;
letter-spacing: .58em !important;
color: rgba(255, 229, 154, .82) !important;
}
/*---------------------------------------------------------
د) الفواصل بين الأقسام
---------------------------------------------------------
كانت ٥٢ بكسل بخطين قصيرين ومعيّن صغير حواليه نقط تايهة،
فكانت بتبان كأنها وسخة على الشاشة. بنطوّل الخطوط، نوسّع
المساحة، ونشيل النقط الزيادة.
---------------------------------------------------------*/
body .bondok-section-divider {
height: 92px;
}
body .bondok-section-divider::before,
body .bondok-section-divider::after {
width: min(240px, 26vw);
}
body .bondok-divider-symbol {
width: 7px;
height: 7px;
margin: 0 20px;
border-color: rgba(224, 184, 79, .62);
box-shadow: 0 0 16px rgba(224, 184, 79, .16);
}
/* النقط الصغيرة اللي كانت حوالين المعيّن */
body .bondok-divider-symbol::before {
display: none;
}
body .bondok-divider-symbol::after {
width: 1.5px;
height: 1.5px;
top: 2.2px;
left: 2.2px;
}
/*---------------------------------------------------------
هـ) صور المنتجات — وقف القص [إصلاح]
---------------------------------------------------------
كارت الرئيسية كان بيعرض الصورة بـ object-fit:cover في
مربع 231×230 والصورة الأصلية 320×339 — يعني بيتقص من
فوق وتحت. وصور المنتجات فيها اسم العطر مكتوب في أعلى
الصورة، فالاسم كان بيتقص.
contain بيخلّي الصورة كاملة جوه صندوق ثابت. الصور
بنسب مختلفة شوية (0.88 لـ 0.94)، فالفرق بيتعوّض بخلفية
داكنة تبان كإطار مقصود بدل فراغ.
---------------------------------------------------------*/
body#top #collection .home-slider .perfume-card img,
body#top #collection .collection-grid .perfume-card img {
height: auto !important;
aspect-ratio: 1 / 1.06 !important;
object-fit: contain !important;
object-position: center !important;
background: linear-gradient(160deg, #121212, #0a0a0a);
border-radius: 12px;
}
/* القاعدة العامة في القسم ٧ كانت بتفرض 3/4 + cover */
body .perfume-card img,
body .recommended-card img {
aspect-ratio: 1 / 1.06;
object-fit: contain;
}
/*---------------------------------------------------------
و) التنقّل بين المنتجات
---------------------------------------------------------
الأسهم كانت دواير صغيرة بحدود باهتة، والنقط تايهة تحت.
نفس العناصر — تنفيذ أنضف وحركة أنعم.
---------------------------------------------------------*/
body#top #collection .slider-btn,
body#top #reviews .slider-btn,
body#top #reviews .reviews-btn {
width: 52px !important;
height: 52px !important;
border: 1px solid rgba(224, 184, 79, .30) !important;
border-radius: 50% !important;
background: rgba(10, 10, 10, .72) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #E0B84F !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
transition:
background .34s cubic-bezier(.16, 1, .3, 1),
border-color .34s ease,
transform .34s cubic-bezier(.16, 1, .3, 1) !important;
}
@media (hover: hover) and (pointer: fine) {
body#top #collection .slider-btn:hover,
body#top #reviews .slider-btn,
body#top #reviews .reviews-btn:hover {
background: rgba(224, 184, 79, .12) !important;
border-color: rgba(224, 184, 79, .70) !important;
transform: scale(1.06) !important;
}
}
/* النقطة النشطة تبقى شرطة صغيرة بدل دايرة مكبّرة — أهدأ
وبتقول مكانك بوضوح أكتر */
body#top #collection .bondok-desktop-dots button,
body#top #reviews .bondok-desktop-dots button {
width: 6px !important;
height: 6px !important;
background: rgba(224, 184, 79, .26) !important;
}
body#top #collection .bondok-desktop-dots button.active,
body#top #reviews .bondok-desktop-dots button.active {
width: 26px !important;
border-radius: 999px !important;
transform: none !important;
background: rgba(224, 184, 79, .92) !important;
box-shadow: 0 0 14px rgba(224, 184, 79, .35) !important;
}
/* التمرير باللمس يقف على الكارت بالظبط */
body#top #collection .collection-grid {
scroll-behavior: smooth;
}
/*---------------------------------------------------------
ز) الريفيوز
---------------------------------------------------------
اللقطات نفسها محتوى ومش هتتغيّر — لكن خلفيتها بيضا
وبتصطدم بالأسود من غير أي انتقال. إطار داخلي رفيع
وحواف مدوّرة بيخلّوها تبان محطوطة جوه الموقع مش ملزوقة.
---------------------------------------------------------*/
body#top #reviews .review-card {
border: 1px solid rgba(224, 184, 79, .18) !important;
border-radius: 18px !important;
overflow: hidden !important;
box-shadow:
0 22px 60px rgba(0, 0, 0, .5),
0 0 0 1px rgba(255, 255, 255, .02) inset !important;
transition:
transform .42s cubic-bezier(.16, 1, .3, 1),
border-color .42s ease !important;
}
body#top #reviews .review-card img {
border-radius: 14px;
aspect-ratio: auto;
object-fit: cover;
}
@media (hover: hover) and (pointer: fine) {
body#top #reviews .review-card:hover {
transform: translateY(-4px) !important;
border-color: rgba(224, 184, 79, .42) !important;
}
}
/*---------------------------------------------------------
ح) كونتكت + FOLLOW THE HOUSE
---------------------------------------------------------
العمودين مالهمش نفس الإيقاع، والأزرار الاجتماعية باهتة.
نفس العناصر ونفس النصوص — مسافات وتفاصيل أدق.
---------------------------------------------------------*/
body .contact-eyebrow,
body .contact-app-kicker,
body .contact-social-label {
font-size: 10px !important;
letter-spacing: .34em !important;
color: rgba(224, 184, 79, .74) !important;
}
body .contact-primary-cta,
body .contact-app-cta {
width: 100% !important;
min-height: 76px !important;
border-radius: 14px !important;
transition:
background .36s cubic-bezier(.16, 1, .3, 1),
border-color .36s ease,
transform .36s cubic-bezier(.16, 1, .3, 1) !important;
}
body .contact-social-grid a {
min-height: 56px !important;
border-radius: 12px !important;
border-color: rgba(224, 184, 79, .16) !important;
letter-spacing: .04em;
transition:
background .34s cubic-bezier(.16, 1, .3, 1),
border-color .34s ease,
transform .34s cubic-bezier(.16, 1, .3, 1) !important;
}
@media (hover: hover) and (pointer: fine) {
body .contact-social-grid a:hover,
body .contact-primary-cta:hover,
body .contact-app-cta:hover {
transform: translateY(-3px) !important;
border-color: rgba(224, 184, 79, .62) !important;
}
}
/* التوقيع تحت أخد مساحة أوضح */
body .contact-signature {
margin-top: 40px !important;
padding-top: 26px !important;
}
/*---------------------------------------------------------
ط) OUR STORY — تحييد تنسيقات محرّر الأدمن
---------------------------------------------------------
النص متخزّن في Firestore كـ HTML جاي من محرّر نصوص،
وجواه تنسيقات مدمجة على كل كلمة:
font-family: "Playfair Display" ← خط مش محمّل أصلاً
font-family: Cinzel ← خط عناوين على نص جسم
text-align: center
عشان كده القسم كان شكله مكسور ومش متناسق مع باقي الموقع.
الكلام نفسه ما اتغيّرش ولا حرف — بنلغي التنسيقات المدمجة
بس عشان النص يرث تايبوجرافي الموقع.
---------------------------------------------------------*/
body#top #story #storyDescription,
body#top #story #storyDescription * {
font-family: "Poppins", "Noto Kufi Arabic", sans-serif !important;
font-size: 16px !important;
line-height: 2.1 !important;
letter-spacing: 0 !important;
/* الأحجام المدمجة (size="4") بتكسر إيقاع السطور */
font-weight: 400 !important;
background: none !important;
/* نص عربي متصل: المحاذاة لليمين هي الصح، والتوسيط
كان بيخلّي السطور مشرشرة من الناحيتين */
text-align: right !important;
}
/* اللون بيفضل زي ما هو عشان كلمة Bondok الدهبية جوه النص
تفضل بارزة — ده تمييز مقصود مش مخلّفات محرّر */
body#top #story #storyDescription {
color: rgba(238, 233, 223, .88) !important;
}
/*---------------------------------------------------------
ي) كونتكت — إيقاع أوضح
---------------------------------------------------------
القسم مفتوح من غير إطار (قرار تصميمي موجود، مش هنرجّعه)،
بس كان ناقصه فصل واضح عن اللي فوقه ومساحة تتنفس فيها.
---------------------------------------------------------*/
body#top #contact .contact-luxury-shell {
gap: 68px !important;
padding-top: 8px !important;
}
body#top #contact .contact-luxury-copy > p {
max-width: 52ch;
line-height: 1.85;
color: rgba(226, 222, 214, .72);
}
/* الخط الفاصل قبل "Just Message BONDOK" */
body#top #contact .contact-just-message {
letter-spacing: .28em !important;
}
/* الأزرار الاجتماعية: مساحة أكبر وحدود دهبية أوضح */
body#top #contact .contact-social-grid a {
border: 1px solid rgba(224, 184, 79, .22) !important;
background: rgba(224, 184, 79, .035) !important;
}
body#top #contact .contact-social-grid i,
body#top #contact .contact-social-grid svg {
color: #E0B84F !important;
}
/*---------------------------------------------------------
ك) كونتكت — محاذاة الكارتين
---------------------------------------------------------
الكارتين قاعدين في شبكة عمودين متساويين (532 + 532)، بس
كارت التطبيق عرضه 430 بس — فحافته اليمين مش على نفس خط
كارت الواتساب، والارتفاعين مختلفين (111 مقابل 69).
---------------------------------------------------------*/
body#top #contact .contact-app-download {
width: 100% !important;
padding-top: 0 !important;
}
body#top #contact .contact-primary-cta,
body#top #contact .contact-app-cta {
width: 100% !important;
max-width: none !important;
min-height: 84px !important;
align-items: center !important;
}
/* العنوانين الصغيرين فوق الكارتين ياخدوا نفس الارتفاع
عشان الكارتين يبدأوا من نفس الخط.
ملحوظة: contact-just-message مبني كـ flex وجنبه خطين
دهبيين كعناصر flex. فرض display:block عليه بينزّل
الخطين فوق وتحت النص — فما نلمسش الـ display هنا. */
body#top #contact .contact-just-message,
body#top #contact .contact-app-kicker {
min-height: 20px !important;
margin-bottom: 12px !important;
}
body#top #contact .contact-app-kicker {
display: block !important;
}
/* صف السوشيال: العنوان والأيقونات ناحية، والتوقيع ناحية */
body#top #contact .contact-luxury-social {
display: flex !important;
align-items: center !important;
gap: 24px !important;
}
body#top #contact .contact-social-grid {
margin-right: auto !important;
}
html[dir="rtl"] body#top #contact .contact-social-grid {
margin-right: 0 !important;
margin-left: auto !important;
}
/*=========================================================
١٤) ملاحظات المراجعة — إصلاحات مؤكدة
=========================================================*/
/*---------------------------------------------------------
أ) اللوجو يفضل مكانه في النسخة العربية [إصلاح]
---------------------------------------------------------
الهيدر flex واتجاهه بيتقلب لـ rtl مع تبديل اللغة، فمحور
الـflex بينعكس واللوجو (أول عنصر) بيروح ناحية اليمين.
row-reverse بيرجّع الترتيب البصري لمكانه، والنصوص جوه
العناصر بتفضل عربية بالاتجاه الصح.
---------------------------------------------------------*/
/* الهيدر flex على الشاشات الكبيرة و grid على الموبايل،
فمحتاجين نعالج الاتنين:
flex → row-reverse بيرجّع الترتيب
grid → direction:ltr بيرجّع ترتيب الأعمدة
وبنرجّع rtl على العناصر اللي جواها نص عشان العربي
يفضل بالاتجاه الصح. */
html[dir="rtl"] body > header,
html[dir="rtl"] body .navbar {
direction: ltr !important;
}
html[dir="rtl"] body > header nav,
html[dir="rtl"] body .navbar nav,
html[dir="rtl"] body > header .logo,
html[dir="rtl"] body .navbar .logo {
direction: rtl;
}
/*---------------------------------------------------------
ب) شيل الشعاع الذهبي من كروت المنتجات
---------------------------------------------------------
كان في تدرّج ذهبي مايل بيعدّي على الكارت عند المرور
بالماوس. التأثير ده مستهلك وبيوحي برخص مش فخامة.
الرفع بيفضل، وتكبير الصورة بيفضل — الفرق إن اللمعة
المايلة اتشالت.
---------------------------------------------------------*/
body .perfume-card::before {
display: none !important;
}
/* بدل اللمعة: حد دهبي رفيع بيدفى بهدوء عند المرور */
@media (hover: hover) and (pointer: fine) {
body .perfume-card {
border: 1px solid transparent;
transition:
transform .58s cubic-bezier(.16, 1, .3, 1),
box-shadow .58s ease,
border-color .58s ease !important;
}
body .perfume-card:hover {
border-color: rgba(224, 184, 79, .34);
}
}
/*---------------------------------------------------------
ج) القايمة الجانبية — شكل واحد في كل الصفحات [إصلاح]
---------------------------------------------------------
في البروفايل البنود