/* ============================================================================ Shree Pramukh Finding & Ornaments — base theme Colour + font variables are injected per-request by the master page from tblThemeSetting (see :root override in MasterPage). Values below are fallbacks. Dark / light is switched via . ============================================================================ */ :root{ --wx-primary:#B45309; --wx-secondary:#F59E0B; --wx-accent:#FBBF24; --wx-radius:8px; --wx-heading:'Cormorant Garamond',Georgia,serif; --wx-body:'Poppins',-apple-system,Segoe UI,Roboto,sans-serif; --wx-bg:#ffffff; --wx-surface:#faf7f2; --wx-text:#22201d; --wx-muted:#6b6560; --wx-border:#eadfce; --wx-header-bg:rgba(255,255,255,.92); --wx-shadow:0 10px 30px rgba(120,80,10,.10); } html[data-theme="dark"]{ --wx-bg:#121110; --wx-surface:#1c1a17; --wx-text:#f3ece1; --wx-muted:#ab9f92; --wx-border:#2c2823; --wx-header-bg:rgba(18,17,16,.92); --wx-shadow:0 10px 30px rgba(0,0,0,.45); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:var(--wx-body); color:var(--wx-text); background:var(--wx-bg); line-height:1.6; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5{font-family:var(--wx-heading);font-weight:600;line-height:1.2;margin:0 0 .5em} a{color:var(--wx-primary);text-decoration:none;transition:color .2s} a:hover{color:var(--wx-secondary)} img{max-width:100%;height:auto;display:block} .wx-container{max-width:1200px;margin:0 auto;padding:0 20px} /* gradient text/brand accent */ .wx-gradient{background:linear-gradient(90deg,var(--wx-primary),var(--wx-secondary),var(--wx-accent)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* ---------- Buttons ---------- */ .wx-btn{display:inline-block;padding:12px 26px;border-radius:var(--wx-radius);font-weight:600; border:1px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .2s;font-family:var(--wx-body)} .wx-btn-primary{color:#fff;background:linear-gradient(90deg,var(--wx-primary),var(--wx-secondary))} .wx-btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:var(--wx-shadow)} .wx-btn-outline{color:var(--wx-primary);border-color:var(--wx-primary);background:transparent} .wx-btn-outline:hover{background:var(--wx-primary);color:#fff} /* ============================ HEADER (centred logo, split menu) ============================ */ .wx-header{position:sticky;top:0;z-index:900;background:var(--wx-header-bg); backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--wx-border)} .wx-header-in{display:flex;align-items:center;justify-content:center;gap:22px;height:68px;position:relative} .wx-logo{flex:0 0 auto} .wx-logo img{height:44px;width:auto;display:block} .wx-nav{display:flex;align-items:center;gap:2px} .wx-nav-left{justify-content:flex-end} .wx-nav-right{justify-content:flex-start} .wx-nav a{color:var(--wx-text);font-weight:500;padding:8px 13px;border-radius:var(--wx-radius); font-size:.94rem;white-space:nowrap;letter-spacing:.01em} .wx-nav a:hover,.wx-nav a.active{color:var(--wx-primary);background:var(--wx-surface)} .wx-header-tools{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px} .wx-lang{padding:6px 8px;border:1px solid var(--wx-border);border-radius:var(--wx-radius); background:var(--wx-bg);color:var(--wx-text);font-family:var(--wx-body);font-size:.8rem} .wx-theme-toggle{width:36px;height:36px;border:1px solid var(--wx-border);border-radius:50%; background:var(--wx-bg);color:var(--wx-text);cursor:pointer;font-size:.95rem;display:grid;place-items:center} .wx-burger{display:none;width:40px;height:40px;border:1px solid var(--wx-border);border-radius:var(--wx-radius); background:var(--wx-bg);color:var(--wx-text);cursor:pointer;font-size:1.2rem} .wx-nav-mobile{display:none} /* ============================ FOOTER ============================ */ .wx-footer{background:var(--wx-surface);border-top:1px solid var(--wx-border);margin-top:60px; padding:50px 0 20px;color:var(--wx-text)} .wx-footer-grid{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:36px} .wx-footer h4{color:var(--wx-primary);margin-bottom:14px} .wx-footer a{color:var(--wx-muted)} .wx-footer a:hover{color:var(--wx-primary)} .wx-footer ul{list-style:none;padding:0;margin:0} .wx-footer li{margin:6px 0} .wx-footer-bottom{text-align:center;border-top:1px solid var(--wx-border);margin-top:30px; padding-top:18px;color:var(--wx-muted);font-size:.85rem} .wx-footer-logo img{height:60px;margin-bottom:14px} /* ============================ SOCIAL RAIL (right, sticky) ============================ */ .wx-social-rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:850; display:flex;flex-direction:column;gap:2px} .wx-social-rail a{width:44px;height:44px;display:grid;place-items:center;color:#fff;font-size:1.05rem; background:linear-gradient(135deg,var(--wx-primary),var(--wx-secondary));border-radius:8px 0 0 8px; transition:padding-right .2s,filter .2s} .wx-social-rail a:hover{color:#fff;padding-right:8px;filter:brightness(1.08)} /* ============================ WHATSAPP FLOAT ============================ */ .wx-wa{position:fixed;right:22px;bottom:22px;z-index:860;width:58px;height:58px;border-radius:50%; background:#25D366;color:#fff;display:grid;place-items:center;font-size:1.7rem; box-shadow:0 8px 24px rgba(37,211,102,.45);animation:wxpulse 2.4s infinite} .wx-wa:hover{color:#fff;transform:scale(1.06)} @keyframes wxpulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} /* ============================ HERO ============================ */ .wx-hero{position:relative;overflow:hidden} .wx-hero .slide{position:relative;min-height:clamp(360px,60vh,620px);display:grid;place-items:center; background-size:cover;background-position:center} .wx-hero .slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55))} .wx-hero .caption{position:relative;z-index:2;text-align:center;color:#fff;max-width:820px;padding:20px} .wx-hero .caption h1{font-size:clamp(2rem,5vw,3.6rem);color:#fff} .wx-hero .caption p{font-size:1.1rem;opacity:.95} /* ============================ SECTIONS ============================ */ .wx-section{padding:60px 0} .wx-section-head{text-align:center;max-width:720px;margin:0 auto 40px} .wx-section-head h2{font-size:clamp(1.8rem,4vw,2.6rem)} .wx-section-head p{color:var(--wx-muted)} .wx-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))} .wx-card{background:var(--wx-bg);border:1px solid var(--wx-border);border-radius:calc(var(--wx-radius) + 4px); overflow:hidden;transition:transform .2s,box-shadow .2s} .wx-card:hover{transform:translateY(-4px);box-shadow:var(--wx-shadow)} .wx-card .thumb{aspect-ratio:1/1;background:#000;overflow:hidden} .wx-card .thumb img{width:100%;height:100%;object-fit:cover} .wx-card .body{padding:16px} /* marquee strips (clients / testimonials) */ .wx-marquee{overflow:hidden} .wx-marquee-track{display:flex;gap:40px;align-items:center;width:max-content;animation:wxscroll 28s linear infinite} .wx-marquee:hover .wx-marquee-track{animation-play-state:paused} @keyframes wxscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============================ RESPONSIVE ============================ */ @media (max-width:980px){ .wx-footer-grid{grid-template-columns:1fr;gap:24px} .wx-nav-left,.wx-nav-right{display:none} .wx-burger{display:grid} .wx-nav-mobile{display:block;max-height:0;overflow:hidden;transition:max-height .28s ease;background:var(--wx-bg)} .wx-nav-mobile.open{max-height:75vh;overflow:auto;border-top:1px solid var(--wx-border)} .wx-nav-mobile a{display:block;padding:14px 20px;color:var(--wx-text);border-bottom:1px solid var(--wx-border)} .wx-nav-mobile a:hover,.wx-nav-mobile a.active{background:var(--wx-surface);color:var(--wx-primary)} } /* ############################################################################ PUBLIC PAGES — Products / About / Blog / Contact / Legal / Home sections ############################################################################ */ /* ---------- hero extras ---------- */ .wx-hero .caption .kicker{display:inline-block;letter-spacing:.28em;text-transform:uppercase; font-size:.78rem;color:var(--wx-accent);margin-bottom:10px;font-weight:600} .wx-hero-multi{position:relative;min-height:clamp(360px,60vh,620px)} /* ---------- page heading strip ---------- */ .wx-pagehead{background: radial-gradient(120% 160% at 50% -40%,rgba(251,191,36,.18),transparent 60%), linear-gradient(135deg,var(--wx-surface),var(--wx-bg)); border-bottom:1px solid var(--wx-border);padding:56px 0 44px;text-align:center} .wx-pagehead h1{font-size:clamp(2rem,4.6vw,3rem);margin-bottom:.25em; background:linear-gradient(90deg,var(--wx-primary),var(--wx-secondary)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .wx-pagehead p{color:var(--wx-muted);max-width:640px;margin:0 auto} .wx-pagehead-img{position:relative;background-size:cover;background-position:center; border-bottom:none;padding:90px 0 70px} .wx-pagehead-img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,5,.45),rgba(10,8,5,.72))} .wx-pagehead-img .wx-container{position:relative;z-index:2} .wx-pagehead-img h1{-webkit-text-fill-color:#fff;background:none;color:#fff} .wx-pagehead-img p{color:rgba(255,255,255,.88)} .wx-pagehead-tall{padding:130px 0 90px} /* ---------- filter chips ---------- */ .wx-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 36px} .wx-chip{display:inline-block;padding:8px 20px;border:1px solid var(--wx-border);border-radius:999px; background:var(--wx-bg);color:var(--wx-text);font-size:.88rem;font-weight:500; transition:all .2s;white-space:nowrap} .wx-chip:hover{border-color:var(--wx-secondary);color:var(--wx-primary);transform:translateY(-1px)} .wx-chip.active{background:linear-gradient(90deg,var(--wx-primary),var(--wx-secondary)); color:#fff;border-color:transparent;box-shadow:var(--wx-shadow)} /* ---------- shared "no image" placeholder ---------- */ .noimg{display:grid;place-items:center;width:100%;height:100%;min-height:160px; background:linear-gradient(135deg,var(--wx-surface),var(--wx-border)); color:var(--wx-secondary);font-size:2.2rem} /* ---------- product grid + cards ---------- */ .wx-pgrid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(255px,1fr))} .wx-pcard{display:flex;flex-direction:column;background:var(--wx-bg);border:1px solid var(--wx-border); border-radius:calc(var(--wx-radius) + 6px);overflow:hidden; transition:transform .25s,box-shadow .25s,border-color .25s} .wx-pcard:hover{transform:translateY(-6px);box-shadow:var(--wx-shadow);border-color:var(--wx-accent)} .wx-pcard .thumb{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--wx-surface)} .wx-pcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .wx-pcard:hover .thumb img{transform:scale(1.06)} .wx-pcard .body{display:flex;flex-direction:column;gap:6px;padding:18px;flex:1} .wx-pcard .cat{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wx-secondary);font-weight:600} .wx-pcard h3{font-size:1.25rem;margin:0} .wx-pcard h3 a{color:var(--wx-text)} .wx-pcard h3 a:hover{color:var(--wx-primary)} .wx-pcard p{margin:0;color:var(--wx-muted);font-size:.88rem;flex:1} .wx-pcard .more{margin-top:8px;font-size:.86rem;font-weight:600;color:var(--wx-primary)} .wx-pcard .more i{font-size:.75rem;transition:transform .2s} .wx-pcard .more:hover i{transform:translateX(4px)} /* ---------- empty state ---------- */ .wx-empty{text-align:center;padding:70px 20px;color:var(--wx-muted)} .wx-empty i{font-size:2.6rem;color:var(--wx-accent);margin-bottom:14px;display:inline-block} .wx-empty h3{color:var(--wx-text);margin-bottom:.35em} .wx-empty .wx-btn{margin-top:16px} /* ---------- breadcrumb ---------- */ .wx-crumb{font-size:.85rem;color:var(--wx-muted);margin-bottom:26px} .wx-crumb span{margin:0 6px;opacity:.6} .wx-crumb .cur{color:var(--wx-text);font-weight:500} /* ---------- product detail ---------- */ .wx-detail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:44px;align-items:start} .wx-gal .main{aspect-ratio:1/1;border:1px solid var(--wx-border);border-radius:calc(var(--wx-radius) + 6px); overflow:hidden;background:var(--wx-surface)} .wx-gal .main img{width:100%;height:100%;object-fit:cover} .wx-gal .thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap} .wx-gal .thumbs button{width:76px;height:76px;padding:0;border:2px solid var(--wx-border); border-radius:var(--wx-radius);overflow:hidden;cursor:pointer;background:var(--wx-surface);transition:border-color .2s} .wx-gal .thumbs button img{width:100%;height:100%;object-fit:cover} .wx-gal .thumbs button:hover,.wx-gal .thumbs button.active{border-color:var(--wx-secondary)} .wx-dinfo .cat{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wx-secondary);font-weight:600} .wx-dinfo h1{font-size:clamp(1.7rem,3.4vw,2.5rem);margin:.2em 0 .35em} .wx-dinfo .price{font-size:1.5rem;font-weight:600;color:var(--wx-primary);margin-bottom:12px} .wx-dinfo .lead{font-size:1.02rem;color:var(--wx-text);font-weight:500} .wx-dinfo .desc{color:var(--wx-muted)} .wx-dinfo .spec{margin-top:18px;padding:18px 20px;background:var(--wx-surface); border:1px solid var(--wx-border);border-left:3px solid var(--wx-secondary);border-radius:var(--wx-radius)} .wx-dinfo .spec h3{font-size:1.15rem;margin-bottom:.4em} .wx-dinfo .spec p{margin:0;color:var(--wx-muted);font-size:.92rem} .wx-dinfo .actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap} .wx-related{margin-top:70px} .wx-related h2{text-align:center;margin-bottom:30px} .wx-card .thumb-wide{aspect-ratio:16/10} .wx-card .body .date{font-size:.8rem;color:var(--wx-muted);margin-top:4px} /* ---------- forms (inquiry / contact) ---------- */ .wx-inqwrap{margin-top:70px;padding:40px clamp(20px,5vw,54px);background:var(--wx-surface); border:1px solid var(--wx-border);border-radius:calc(var(--wx-radius) + 8px)} .wx-inqhead{text-align:center;margin-bottom:26px} .wx-inqhead p{color:var(--wx-muted);margin:0} .wx-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;margin-bottom:18px} .wx-field{display:flex;flex-direction:column;gap:6px} .wx-field label{font-size:.85rem;font-weight:500;color:var(--wx-text)} .wx-field-full{grid-column:1/-1} .wx-input{padding:12px 14px;border:1px solid var(--wx-border);border-radius:var(--wx-radius); background:var(--wx-bg);color:var(--wx-text);font-family:var(--wx-body);font-size:.94rem; transition:border-color .2s,box-shadow .2s;width:100%} .wx-input:focus{outline:none;border-color:var(--wx-secondary);box-shadow:0 0 0 3px rgba(245,158,11,.18)} textarea.wx-input{resize:vertical;min-height:110px} .wx-alert{display:flex;align-items:flex-start;gap:10px;padding:14px 18px;border-radius:var(--wx-radius); margin-bottom:18px;font-size:.94rem} .wx-alert i{margin-top:3px} .wx-alert-success{background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.35);color:#15803d} html[data-theme="dark"] .wx-alert-success{color:#4ade80} .wx-alert-error{background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.3);color:#b91c1c} html[data-theme="dark"] .wx-alert-error{color:#f87171} .wx-hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden} /* ---------- About page (classes the seeded CMS HTML uses) ---------- */ .ab-content{max-width:1000px;margin:0 auto} .ab-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;margin-bottom:60px} .ab-intro h2{font-size:clamp(1.7rem,3.4vw,2.4rem)} .ab-intro p{color:var(--wx-muted)} .ab-intro img{border-radius:calc(var(--wx-radius) + 8px);box-shadow:var(--wx-shadow);width:100%;object-fit:cover} .ab-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;margin:50px 0} .ab-card{background:var(--wx-bg);border:1px solid var(--wx-border);border-top:3px solid var(--wx-secondary); border-radius:calc(var(--wx-radius) + 4px);padding:28px 22px;text-align:center; transition:transform .25s,box-shadow .25s} .ab-card:hover{transform:translateY(-5px);box-shadow:var(--wx-shadow)} .ab-card i{font-size:1.7rem;color:var(--wx-primary);margin-bottom:12px;display:inline-block} .ab-card h3,.ab-card h4{font-size:1.2rem;margin-bottom:.35em} .ab-card p{margin:0;color:var(--wx-muted);font-size:.9rem} .ab-vm{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:60px 0;border-radius:calc(var(--wx-radius) + 8px); overflow:hidden;background:linear-gradient(120deg,var(--wx-primary),var(--wx-secondary)); color:#fff;box-shadow:var(--wx-shadow)} .ab-vm-block{padding:44px clamp(24px,4vw,50px);position:relative} .ab-vm-block + .ab-vm-block{border-left:1px solid rgba(255,255,255,.25)} .ab-vm-block h3{color:#fff;font-size:1.6rem;margin-bottom:.4em} .ab-vm-block h3::after{content:"";display:block;width:44px;height:3px;background:var(--wx-accent); border-radius:2px;margin-top:10px} .ab-vm-block p{color:rgba(255,255,255,.92);margin:0} /* ---------- blog grid + cards ---------- */ .wx-bgrid{display:grid;gap:28px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .wx-bcard{display:flex;flex-direction:column;background:var(--wx-bg);border:1px solid var(--wx-border); border-radius:calc(var(--wx-radius) + 6px);overflow:hidden;transition:transform .25s,box-shadow .25s} .wx-bcard:hover{transform:translateY(-6px);box-shadow:var(--wx-shadow)} .wx-bcard .thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--wx-surface)} .wx-bcard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .wx-bcard:hover .thumb img{transform:scale(1.05)} .wx-bcard .body{display:flex;flex-direction:column;gap:8px;padding:20px;flex:1} .wx-bcard .meta{display:flex;align-items:center;gap:14px;font-size:.78rem;color:var(--wx-muted)} .wx-bcard .meta .cat{padding:3px 12px;border-radius:999px;background:var(--wx-surface); border:1px solid var(--wx-border);color:var(--wx-primary);font-weight:600; letter-spacing:.06em;text-transform:uppercase;font-size:.7rem} .wx-bcard h3{font-size:1.3rem;margin:0} .wx-bcard h3 a{color:var(--wx-text)} .wx-bcard h3 a:hover{color:var(--wx-primary)} .wx-bcard p{margin:0;color:var(--wx-muted);font-size:.9rem;flex:1} .wx-bcard .more{margin-top:6px;font-size:.86rem;font-weight:600;color:var(--wx-primary)} /* ---------- blog article ---------- */ .wx-article{max-width:800px;margin:0 auto} .wx-article-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;font-size:.85rem; color:var(--wx-muted);margin-bottom:14px} .wx-pagehead-img .wx-article-meta{color:rgba(255,255,255,.85)} .wx-article-meta .cat{padding:3px 14px;border-radius:999px;background:rgba(251,191,36,.18); color:var(--wx-accent);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem} .wx-pagehead:not(.wx-pagehead-img) .wx-article-meta .cat{color:var(--wx-primary)} .wx-article-content{font-size:1.02rem;color:var(--wx-text)} .wx-article-content p{margin:0 0 1.1em} .wx-article-content img{border-radius:var(--wx-radius);margin:18px auto} .wx-article-content h2,.wx-article-content h3{margin-top:1.4em} .wx-article-content blockquote{margin:24px 0;padding:16px 24px;border-left:3px solid var(--wx-secondary); background:var(--wx-surface);border-radius:0 var(--wx-radius) var(--wx-radius) 0;color:var(--wx-muted);font-style:italic} .wx-tags{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 10px} .wx-tags .wx-chip{font-size:.78rem;padding:5px 14px;cursor:default} .wx-backlink{display:inline-block;margin-top:22px;font-weight:600;font-size:.92rem} .wx-backlink i{margin-right:6px;transition:transform .2s} .wx-backlink:hover i{transform:translateX(-4px)} /* ---------- contact ---------- */ .wx-contact-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:40px;align-items:start} .wx-cinfo{background:var(--wx-surface);border:1px solid var(--wx-border); border-radius:calc(var(--wx-radius) + 8px);padding:34px 30px;position:sticky;top:88px} .wx-cinfo h2{font-size:1.5rem;margin-bottom:18px} .wx-cline{display:flex;align-items:flex-start;gap:14px;padding:10px 0;font-size:.94rem; border-bottom:1px dashed var(--wx-border)} .wx-cline:last-child{border-bottom:none} .wx-cline i{width:20px;text-align:center;color:var(--wx-primary);margin-top:4px} .wx-cline-co{font-size:1.02rem} .wx-cform h2{font-size:1.5rem;margin-bottom:18px} .wx-map{margin-top:50px;border-radius:calc(var(--wx-radius) + 8px);overflow:hidden; border:1px solid var(--wx-border);box-shadow:var(--wx-shadow)} .wx-map iframe{display:block;width:100%;height:400px;border:0} /* ---------- legal ---------- */ .wx-legal-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .wx-lcard{display:flex;flex-direction:column;background:var(--wx-bg);border:1px solid var(--wx-border); border-radius:calc(var(--wx-radius) + 6px);overflow:hidden;transition:transform .25s,box-shadow .25s} .wx-lcard:hover{transform:translateY(-5px);box-shadow:var(--wx-shadow);border-color:var(--wx-accent)} .wx-lcard .thumb{aspect-ratio:4/3;overflow:hidden;background:var(--wx-surface)} .wx-lcard .thumb img{width:100%;height:100%;object-fit:cover;object-position:top} .wx-lcard .body{padding:16px 18px;display:flex;flex-direction:column;gap:6px} .wx-lcard .body strong{color:var(--wx-text);font-size:1.02rem} .wx-lcard .view{font-size:.84rem;font-weight:600;color:var(--wx-primary)} .wx-doc{max-width:820px;margin:0 auto;text-align:center} .wx-doc img{margin:0 auto;border:1px solid var(--wx-border);border-radius:var(--wx-radius);box-shadow:var(--wx-shadow)} /* ---------- home: category tiles ---------- */ .wx-cat-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .wx-cat-tile{position:relative;display:block;aspect-ratio:4/5;border-radius:calc(var(--wx-radius) + 8px); overflow:hidden;box-shadow:var(--wx-shadow)} .wx-cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s} .wx-cat-tile .noimg{position:absolute;inset:0;font-size:3rem} .wx-cat-tile:hover img{transform:scale(1.07)} .wx-cat-tile .overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,8,5,.78)); transition:background .3s} .wx-cat-tile:hover .overlay{background:linear-gradient(180deg,rgba(180,83,9,.15) 20%,rgba(10,8,5,.85))} .wx-cat-tile .label{position:absolute;left:0;right:0;bottom:0;padding:20px;color:#fff;z-index:2} .wx-cat-tile .label strong{display:block;font-family:var(--wx-heading);font-size:1.4rem;font-weight:600} .wx-cat-tile .label em{font-style:normal;font-size:.8rem;opacity:.85} /* ---------- home: value cards ---------- */ .wx-value-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .wx-value{background:var(--wx-bg);border:1px solid var(--wx-border);border-radius:calc(var(--wx-radius) + 6px); padding:34px 24px;text-align:center;transition:transform .25s,box-shadow .25s,border-color .25s} .wx-value:hover{transform:translateY(-6px);box-shadow:var(--wx-shadow);border-color:var(--wx-accent)} .wx-value .icon{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%; background:linear-gradient(135deg,var(--wx-primary),var(--wx-secondary));color:#fff; font-size:1.5rem;margin-bottom:16px;box-shadow:0 8px 20px rgba(180,83,9,.28)} .wx-value h3{font-size:1.25rem;margin-bottom:.35em} .wx-value p{margin:0;color:var(--wx-muted);font-size:.88rem} /* ---------- home: collection banner ---------- */ .wx-banner{position:relative;overflow:hidden;text-align:center;padding:86px 0;color:#fff; background: radial-gradient(90% 140% at 15% 0%,rgba(251,191,36,.35),transparent 55%), radial-gradient(80% 130% at 90% 100%,rgba(251,191,36,.25),transparent 55%), linear-gradient(120deg,var(--wx-primary),#92400e 55%,var(--wx-primary))} .wx-banner .kicker{display:inline-block;letter-spacing:.3em;text-transform:uppercase;font-size:.76rem; color:var(--wx-accent);font-weight:600;margin-bottom:12px} .wx-banner h2{color:#fff;font-size:clamp(1.9rem,4.4vw,3rem);max-width:760px;margin:0 auto .35em} .wx-banner p{color:rgba(255,255,255,.88);max-width:620px;margin:0 auto 26px} .wx-btn-light{background:#fff;color:var(--wx-primary)} .wx-btn-light:hover{color:var(--wx-primary);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.28)} /* ---------- home: testimonial cards (marquee) ---------- */ .wx-tmarquee .wx-marquee-track{animation-duration:46s;align-items:stretch} .wx-tcard{width:340px;flex:0 0 auto;display:flex;flex-direction:column;background:var(--wx-bg); border:1px solid var(--wx-border);border-radius:calc(var(--wx-radius) + 6px);padding:26px 24px; box-shadow:0 4px 14px rgba(120,80,10,.06)} .wx-tcard .stars{color:var(--wx-secondary);font-size:.8rem;margin-bottom:10px;letter-spacing:2px} .wx-tcard p{margin:0 0 18px;color:var(--wx-muted);font-size:.92rem;font-style:italic;flex:1} .wx-tcard .who{display:flex;align-items:center;gap:12px} .wx-tcard .who img,.wx-tcard .who .avatar{width:46px;height:46px;border-radius:50%;object-fit:cover; flex:0 0 auto;border:2px solid var(--wx-accent)} .wx-tcard .who .avatar{display:grid;place-items:center;background:var(--wx-surface);color:var(--wx-secondary)} .wx-tcard .who strong{display:block;font-size:.95rem} .wx-tcard .who em{display:block;font-style:normal;font-size:.78rem;color:var(--wx-muted)} /* ---------- home: client logo strip (marquee) ---------- */ .wx-cmarquee .wx-marquee-track{animation-duration:22s} .wx-client{display:grid;place-items:center;flex:0 0 auto} .wx-client img{height:56px;width:auto;max-width:160px;object-fit:contain; filter:grayscale(1);opacity:.7;transition:filter .25s,opacity .25s} .wx-client:hover img{filter:grayscale(0);opacity:1} /* ---------- home: CTA strip ---------- */ .wx-cta{padding:70px 0;text-align:center;background:var(--wx-surface);border-top:1px solid var(--wx-border)} .wx-cta h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin-bottom:.3em} .wx-cta p{color:var(--wx-muted);max-width:600px;margin:0 auto 26px} .wx-cta .btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap} .wx-btn-wa{background:#25D366;color:#fff} .wx-btn-wa:hover{color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(37,211,102,.4)} /* ---------- subtle scroll reveal (progressive enhancement, no JS) ---------- */ @supports (animation-timeline: view()){ .wx-reveal{animation:wxRevealUp linear both;animation-timeline:view(); animation-range:entry 0% entry 34%} @keyframes wxRevealUp{from{opacity:.05;transform:translateY(34px)}to{opacity:1;transform:none}} } /* ---------- responsive: public pages ---------- */ @media (max-width:900px){ .wx-detail{grid-template-columns:1fr;gap:30px} .wx-contact-grid{grid-template-columns:1fr} .wx-cinfo{position:static} .ab-intro{grid-template-columns:1fr;gap:26px} .ab-vm{grid-template-columns:1fr} .ab-vm-block + .ab-vm-block{border-left:none;border-top:1px solid rgba(255,255,255,.25)} } @media (max-width:640px){ .wx-form-grid{grid-template-columns:1fr} .wx-pagehead{padding:42px 0 34px} .wx-inqwrap{margin-top:50px} } /* ========================================================================== PREMIUM DARK-LUXURY v2 (contrast + luminosity + restraint) Self-contained: includes structure + the refined look. Appended last -> wins. ========================================================================== */ /* ---- palette: deep true-black, luminous gold, crisp warm white ---- */ :root{ --wx-gold:#e9c46a; --wx-gold-deep:#c9a24b; --wx-gold-bright:#f6dc95; } html[data-theme="dark"]{ --wx-bg:#0b0a09; --wx-surface:#17140f; --wx-surface2:#201b14; --wx-text:#f4eede; --wx-muted:#c3b8a3; --wx-border:#342c20; --wx-header-bg:rgba(11,10,8,.72); --wx-shadow:0 24px 60px rgba(0,0,0,.6); --wx-gold:#e9c46a; --wx-gold-deep:#c9a24b; --wx-gold-bright:#f6dc95; } /* ---- clean atmospheric background (subtle, not muddy) ---- */ body{ color:var(--wx-text); background: radial-gradient(48% 40% at 82% -10%, rgba(201,162,75,.10), transparent 60%), radial-gradient(44% 36% at 3% 3%, rgba(201,162,75,.05), transparent 60%), var(--wx-bg); background-attachment:fixed; } body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.022; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} main{position:relative;z-index:1} /* ---- floating jewellery icons: barely-there shimmer ---- */ .wx-float-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .wx-float-layer i{position:absolute;bottom:-9vh;color:var(--wx-gold);opacity:0; animation:wxFloat linear infinite;filter:drop-shadow(0 0 8px rgba(233,196,106,.25))} @keyframes wxFloat{0%{transform:translateY(0) rotate(0);opacity:0}14%{opacity:.06}86%{opacity:.06} 100%{transform:translateY(-118vh) rotate(190deg);opacity:0}} /* ---- typography: crisp, luminous, generous ---- */ h1,h2,h3,h4{color:var(--wx-text);letter-spacing:.01em} .wx-section{padding:78px 0} .wx-section-head{max-width:760px;margin:0 auto 52px} .wx-section-head h2,.wx-gradient{ -webkit-text-fill-color:initial;color:var(--wx-gold-bright);background:none; font-weight:600;letter-spacing:.02em} .wx-section-head h2{font-size:clamp(2rem,4.2vw,2.9rem)} .wx-section-head h2::after{content:"";display:block;width:54px;height:2px;margin:18px auto 0;border-radius:2px; background:linear-gradient(90deg,transparent,var(--wx-gold),transparent)} .wx-section-head p{color:var(--wx-muted);font-size:1.03rem} /* ---- HEADER + circular logo badge ---- */ .wx-header{background:linear-gradient(180deg,rgba(8,7,6,.92),rgba(8,7,6,.5)); backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(233,196,106,.16)} .wx-header-in{justify-content:flex-start;gap:0;height:82px} .wx-logo{display:none} .wx-logo-badge{position:absolute;left:16px;top:12px;z-index:6;display:block} .wx-logo-ring{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;overflow:hidden; background:radial-gradient(circle at 50% 36%,#3a3225,#0e0b08 84%); border:1.5px solid var(--wx-gold); box-shadow:0 0 0 5px rgba(11,10,8,.95),0 14px 32px rgba(0,0,0,.6), inset 0 1px 18px rgba(246,220,149,.30),0 0 26px rgba(233,196,106,.24); transition:transform .3s,box-shadow .3s} .wx-logo-badge:hover .wx-logo-ring{transform:translateY(-2px); box-shadow:0 0 0 5px rgba(11,10,8,.95),0 20px 40px rgba(0,0,0,.65), inset 0 1px 22px rgba(246,220,149,.4),0 0 34px rgba(233,196,106,.4)} .wx-logo-ring img{width:64%;height:64%;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))} .wx-nav-main{margin-left:126px;padding-right:76px;flex:1;justify-content:flex-end;gap:2px} .wx-nav a{color:var(--wx-text);font-size:.92rem;font-weight:500;opacity:.9;letter-spacing:.02em} .wx-nav a::after{content:"";display:block;height:2px;width:0;margin-top:4px;border-radius:2px; background:linear-gradient(90deg,var(--wx-gold-deep),var(--wx-gold));transition:width .25s} .wx-nav a:hover,.wx-nav a.active{color:var(--wx-gold-bright);opacity:1;background:transparent} .wx-nav a:hover::after,.wx-nav a.active::after{width:100%} /* ---- HERO: let the jewellery show, bright crisp text ---- */ .wx-hero,.wx-hero-multi{min-height:clamp(540px,80vh,780px)} .wx-hero .slide{min-height:clamp(540px,80vh,780px);overflow:hidden} .wx-hero .slide-bg{position:absolute;inset:0;background-size:cover;background-position:center; animation:wxKen 24s ease-in-out infinite alternate;will-change:transform} @keyframes wxKen{from{transform:scale(1.06)}to{transform:scale(1.15)}} .wx-hero .slide::after{content:"";position:absolute;inset:0;background: radial-gradient(70% 80% at 50% 42%, transparent, rgba(8,7,6,.35) 78%), linear-gradient(180deg, rgba(8,7,6,.55) 0%, rgba(8,7,6,.22) 34%, rgba(8,7,6,.40) 62%, rgba(8,7,6,.88) 100%)} .wx-hero .caption{position:relative;z-index:2;text-align:center;color:#fff;max-width:940px;padding:20px} .wx-hero .caption .kicker{display:inline-block;color:var(--wx-gold-bright);letter-spacing:.36em; text-transform:uppercase;font-weight:600;font-size:.74rem;margin-bottom:18px} .wx-hero .caption h1{color:#fdf8ee;font-weight:600;font-size:clamp(2.5rem,5.8vw,4.4rem);line-height:1.07; letter-spacing:.01em;text-shadow:0 8px 44px rgba(0,0,0,.6)} .wx-hero .caption p{color:rgba(253,248,238,.92);font-size:clamp(1rem,1.5vw,1.2rem); max-width:600px;margin:16px auto 0;line-height:1.6} .wx-hero .caption .wx-btn{margin-top:26px} .wx-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:3; background:linear-gradient(90deg,transparent,var(--wx-gold),transparent);opacity:.7} /* ---- BUTTONS: sharp, confident ---- */ .wx-btn{padding:14px 34px;font-weight:600;letter-spacing:.05em;border-radius:2px;font-size:.9rem} .wx-btn-primary{background:linear-gradient(100deg,var(--wx-gold-deep),var(--wx-gold-bright));color:#241a08; border:0;box-shadow:0 12px 30px rgba(201,162,75,.30);position:relative;overflow:hidden} .wx-btn-primary:hover{color:#241a08;filter:brightness(1.05);transform:translateY(-2px)} .wx-btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg);transition:left .6s} .wx-btn-primary:hover::after{left:130%} .wx-btn-outline{border:1.5px solid var(--wx-gold);color:var(--wx-gold-bright);background:transparent;border-radius:2px} .wx-btn-outline:hover{background:var(--wx-gold);color:#241a08} .wx-btn-light{background:var(--wx-gold-bright);color:#241a08;border:0} .wx-btn-light:hover{color:#241a08;filter:brightness(1.05);transform:translateY(-2px)} /* ---- SECTION rhythm: alternate deep-black / charcoal panels ---- */ .wx-section:nth-of-type(even){background:linear-gradient(180deg,#100e0b,#0b0a09)} /* ---- CARDS: lifted charcoal, image-forward, gold hairline ---- */ .wx-pcard,.wx-bcard,.wx-lcard,.wx-card,.wx-value,.wx-tcard,.wx-cinfo,.wx-inqwrap,.wx-dinfo .spec{ background:var(--wx-surface);border-color:var(--wx-border)} .wx-pcard,.wx-bcard,.wx-lcard,.wx-card,.wx-value{border-radius:4px} .wx-pcard .thumb,.wx-bcard .thumb,.wx-lcard .thumb{ background:radial-gradient(circle at 50% 38%,#241f17,#0c0a08 74%)} .wx-pcard:hover,.wx-bcard:hover,.wx-lcard:hover,.wx-card:hover,.wx-value:hover{ border-color:var(--wx-gold);transform:translateY(-6px); box-shadow:0 26px 54px rgba(0,0,0,.6),0 0 0 1px rgba(233,196,106,.30)} .wx-pcard .cat,.wx-bcard .meta .cat{color:var(--wx-gold)} .wx-pcard h3 a,.wx-bcard h3 a{color:var(--wx-text)} .wx-pcard h3 a:hover,.wx-bcard h3 a:hover{color:var(--wx-gold-bright)} .wx-pcard .more,.wx-bcard .more{color:var(--wx-gold-bright)} .wx-value .icon{background:linear-gradient(135deg,var(--wx-gold-deep),var(--wx-gold-bright));color:#241a08; box-shadow:0 10px 26px rgba(201,162,75,.4)} .wx-value h3{color:var(--wx-text)} .wx-tcard .stars{color:var(--wx-gold-bright)} .wx-tcard p{color:var(--wx-text);opacity:.92;font-style:italic} .wx-tcard .who strong{color:var(--wx-text)} .wx-tcard .who img,.wx-tcard .who .avatar{border-color:var(--wx-gold)} /* category tiles — richer, brighter labels */ .wx-cat-tile{border:1px solid var(--wx-border);border-radius:6px} .wx-cat-tile .overlay{background:linear-gradient(180deg,transparent 28%,rgba(8,6,4,.5) 60%,rgba(8,6,4,.92))} .wx-cat-tile:hover .overlay{background:linear-gradient(180deg,rgba(201,162,75,.12) 15%,rgba(8,6,4,.92))} .wx-cat-tile .label strong{color:#fdf8ee;font-size:1.5rem} .wx-cat-tile .label em{color:var(--wx-gold-bright);opacity:1} .wx-cat-tile:hover{box-shadow:0 26px 54px rgba(0,0,0,.6),0 0 0 1px rgba(233,196,106,.4)} /* ---- COLLECTION banner ---- */ .wx-banner{background: radial-gradient(70% 130% at 18% 0%, rgba(233,196,106,.20), transparent 55%), radial-gradient(60% 120% at 92% 100%, rgba(233,196,106,.12), transparent 55%), linear-gradient(120deg,#1b150b,#0c0a07 58%,#1b150b)} .wx-banner .kicker{color:var(--wx-gold-bright);letter-spacing:.32em} .wx-banner h2{color:#fdf8ee} .wx-banner p{color:rgba(253,248,238,.85)} /* ---- PAGE HEAD (inner pages): show image, crisp title ---- */ .wx-pagehead-img{padding:130px 0 92px;min-height:360px;display:grid;align-items:center} .wx-pagehead-img::before{content:"";position:absolute;inset:0;background: radial-gradient(70% 90% at 50% 20%, transparent, rgba(8,7,6,.4) 80%), linear-gradient(180deg, rgba(8,7,6,.56), rgba(8,7,6,.34) 45%, rgba(8,7,6,.88))} .wx-pagehead-img .wx-container{position:relative;z-index:2} .wx-pagehead-img h1{color:#fdf8ee;font-weight:600;font-size:clamp(2.2rem,4.8vw,3.4rem); -webkit-text-fill-color:#fdf8ee;background:none;text-shadow:0 4px 26px rgba(0,0,0,.6)} .wx-pagehead-img p{color:rgba(253,248,238,.9)} .wx-pagehead-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:3; background:linear-gradient(90deg,transparent,var(--wx-gold),transparent);opacity:.6} /* ---- SOCIAL RAIL + WHATSAPP ---- */ .wx-social-rail{gap:8px;right:0;padding:8px 0} .wx-social-rail a{width:46px;height:44px;font-size:1.05rem;border-radius:11px 0 0 11px; background:linear-gradient(135deg,var(--wx-gold-deep),var(--wx-gold-bright));color:#241a08; box-shadow:0 8px 20px rgba(0,0,0,.4)} .wx-social-rail a:hover{color:#241a08;padding-right:10px;filter:brightness(1.08)} .wx-wa{width:58px;height:58px;font-size:1.75rem} /* ---- CTA + FOOTER ---- */ .wx-cta{background:linear-gradient(180deg,#100e0b,#0b0a09);border-top:1px solid var(--wx-border)} .wx-cta h2{color:var(--wx-gold-bright)} .wx-footer{background:linear-gradient(180deg,#100e0b,#0a0908);border-top:1px solid rgba(233,196,106,.16)} .wx-footer h4{color:var(--wx-gold-bright)} .wx-footer a{color:var(--wx-muted)} .wx-footer a:hover{color:var(--wx-gold)} .wx-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .wx-devby a{color:var(--wx-gold);font-weight:600;letter-spacing:.03em} .wx-devby a:hover{color:var(--wx-gold-bright)} .wx-tm{font-size:.52em;vertical-align:super;letter-spacing:.04em;margin-left:1px;font-weight:600} @media (max-width:560px){ .wx-footer-bottom{justify-content:center;text-align:center} } /* ---- PROMO POPUP modal ---- */ .wx-popup-overlay{position:fixed;inset:0;z-index:1200;background:rgba(6,5,4,.76); backdrop-filter:blur(6px);display:none;place-items:center;padding:20px;opacity:0;transition:opacity .3s} .wx-popup-overlay.show{display:grid;opacity:1} .wx-popup{position:relative;max-width:440px;width:100%;background:var(--wx-surface); border:1px solid var(--wx-gold);border-radius:14px;overflow:hidden; box-shadow:0 34px 90px rgba(0,0,0,.7);transform:translateY(18px) scale(.95);transition:transform .38s} .wx-popup-overlay.show .wx-popup{transform:none} .wx-popup img{width:100%;display:block} .wx-popup .pbody{padding:22px;text-align:center} .wx-popup-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0; background:rgba(0,0,0,.5);color:#fff;cursor:pointer;font-size:1.05rem;display:grid;place-items:center;z-index:3} .wx-popup-close:hover{background:rgba(0,0,0,.8)} /* ---- product card footer + Inquiry Now button ---- */ .wx-btn-sm{padding:8px 14px;font-size:.78rem;letter-spacing:.02em} .wx-pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;flex-wrap:nowrap} .wx-pcard-foot .more{margin:0;white-space:nowrap;flex:0 0 auto} .wx-inq-btn{white-space:nowrap;flex:0 0 auto} .wx-inq-btn i{font-size:.78rem;margin-right:4px} /* ---- product inquiry modal (form) ---- */ .wx-hide{display:none !important} .wx-popup-form{max-width:548px;text-align:left} .wx-inq-head{padding:26px 28px 0} .wx-inq-head .kicker{display:inline-block;color:var(--wx-gold-bright);letter-spacing:.28em; text-transform:uppercase;font-size:.68rem;font-weight:600} .wx-inq-head h3{color:var(--wx-text);font-size:1.5rem;margin:.35em 0 0;line-height:1.2; font-family:var(--wx-heading)} .wx-inq-body{padding:18px 28px 26px} .wx-inq-body .wx-form-grid{margin-bottom:14px} .wx-inq-body .req{color:var(--wx-gold-bright)} .wx-inq-body .opt{color:var(--wx-muted);font-weight:400;font-size:.78em} .wx-inq-body textarea.wx-input{min-height:88px} .wx-inq-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px} .wx-inq-actions .wx-btn{cursor:pointer} .wx-inq-body .wx-alert{margin-bottom:16px} /* ---- branded error page ---- */ .wx-error{min-height:64vh;display:grid;place-items:center;text-align:center} .wx-error-card{max-width:600px;margin:0 auto;padding:20px} .wx-error-logo{margin-bottom:22px} .wx-error-logo img{display:inline-block;width:auto;height:auto; max-width:min(240px,62vw);max-height:130px;object-fit:contain; filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))} .wx-error-card .kicker{display:inline-block;color:var(--wx-gold-bright);letter-spacing:.3em; text-transform:uppercase;font-size:.72rem;font-weight:600;margin-bottom:12px} .wx-error-card h1{color:var(--wx-gold-bright);font-size:clamp(2rem,5vw,3.2rem);margin-bottom:.3em} .wx-error-card p{color:var(--wx-muted);font-size:1.03rem;max-width:460px;margin:0 auto} .wx-error-actions{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ---- scroll reveal (JS-driven; safe if JS fails -> visible) ---- */ html.wx-js .wx-reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease} html.wx-js .wx-reveal.wx-seen{opacity:1;transform:none} /* ---- responsive ---- */ @media (max-width:980px){ .wx-nav-main{display:none} .wx-logo-ring{width:76px;height:76px} .wx-logo-badge{left:12px;top:10px} .wx-header-in{height:72px} } @media (max-width:600px){ .wx-logo-ring{width:66px;height:66px} .wx-social-rail a{width:40px;height:40px;font-size:.95rem} }