/* ============================================================ SKIN: GLASSMORPHISM — warm evening room Dark amber scene with blurred bokeh light · heavy frosted panels · orange accents · soft white borders · 24px radii. Active when . Loaded after styles.css. ============================================================ */ body[data-skin="glass"]{ --bg:#16100a;--bg2:#1e1610; --panel:rgba(255,255,255,0.07);--panel-solid:#251b12; --line:rgba(255,255,255,0.14); --txt:#f6f0e8;--muted:#cec3b6;--dim:#93887b; --indigo:#ffb181;--cyan:#ff8a4d;--magenta:#ffd29b; --blue:#ffb181;--teal:#ffc46b;--violet:#ff9d5c;--accent:#ff8a4d; --aurora:linear-gradient(115deg,#ff6a2b,#ff9440 55%,#ffd29b); --glow:0 0 30px rgba(255,122,60,0.35); --heading:#ffffff;--g1:#ffffff;--g2:#ffd0b0;--g3:#ff8a4d; --net-a:255,140,80;--net-b:255,185,110;--net-node:255,210,170;--net-io:255,210,155; --nav-bg:rgba(26,18,11,0.42);--nav-bg-solid:rgba(26,18,11,0.72); --overlay:rgba(24,16,10,0.97); --glass-bd:rgba(255,255,255,0.24);--glass-hi:rgba(255,255,255,0.30); --glass-sheen:rgba(255,214,170,0.15);--glass-btn-sheen:rgba(255,255,255,0.38); --grid-line:transparent; } body[data-skin="glass"] ::selection{background:rgba(255,122,60,0.45);color:#fff} body[data-skin="glass"]::-webkit-scrollbar-track{background:#16100a} body[data-skin="glass"]::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#b4531f,#7a4a1c);border-color:#16100a} /* ---- warm blurred evening scene ---- */ body[data-skin="glass"] .bg-grad{ background: radial-gradient(850px 650px at 10% 92%, rgba(255,122,40,0.30), transparent 60%), radial-gradient(700px 560px at 88% 16%, rgba(148,176,122,0.16), transparent 60%), radial-gradient(1000px 800px at 72% 95%, rgba(112,78,38,0.30), transparent 65%), radial-gradient(760px 600px at 22% 8%, rgba(66,80,56,0.32), transparent 60%), linear-gradient(160deg,#191108,#281c10 55%,#150f09); animation:none; } body[data-skin="glass"] .bg-grad::before{ background: conic-gradient(from 200deg at 22% 78%, transparent 0deg, rgba(255,130,50,0.30) 55deg, transparent 120deg), conic-gradient(from 30deg at 80% 30%, transparent 0deg, rgba(120,150,100,0.18) 50deg, transparent 115deg), conic-gradient(from 320deg at 55% 65%, transparent 0deg, rgba(190,120,60,0.16) 45deg, transparent 100deg); filter:blur(90px) saturate(120%); } body[data-skin="glass"] .bg-grad::after{ background-image:none; background:radial-gradient(ellipse 120% 100% at 50% 45%, transparent 52%, rgba(0,0,0,0.55)); -webkit-mask-image:none;mask-image:none; } body[data-skin="glass"] #net{opacity:.3} /* ---- ambient layers ---- */ body[data-skin="glass"] .gi{color:rgba(255,205,160,0.12)} body[data-skin="glass"] .glyph:hover .gi{color:rgba(255,190,130,0.75);text-shadow:0 0 22px rgba(255,140,70,0.5)} body[data-skin="glass"] .orb{ background:radial-gradient(circle at 32% 28%,rgba(255,255,255,0.5),rgba(255,170,100,0.30) 40%,rgba(255,122,60,0.10) 72%,transparent 78%); box-shadow:inset 0 0 14px rgba(255,235,210,0.22),0 0 26px rgba(255,130,60,0.22); } body[data-skin="glass"] #cursorHalo{background:radial-gradient(circle,rgba(255,170,110,0.40),transparent 70%)} body[data-skin="glass"] #cursorHalo.big{background:radial-gradient(circle,rgba(255,150,80,0.32),transparent 70%);box-shadow:0 0 26px rgba(255,122,60,0.38)} /* ---- nav ---- */ body[data-skin="glass"] nav{backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%)} body[data-skin="glass"] .logo .dot{background:var(--aurora);box-shadow:0 0 14px rgba(255,140,70,0.8)} body[data-skin="glass"] .navlinks a:hover{background:rgba(255,255,255,0.07)} body[data-skin="glass"] .navlinks a.active{background:rgba(255,255,255,0.09)} body[data-skin="glass"] .theme-toggle{display:none} /* ---- hero ---- */ body[data-skin="glass"] .hero-tag{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.18);color:#ffc9a0} body[data-skin="glass"] .hero-tag .blip{background:#ff8a4d;box-shadow:0 0 10px #ff8a4d} @keyframes glassTagGlow{0%,100%{box-shadow:0 0 0 rgba(255,122,60,0)}50%{box-shadow:0 0 26px rgba(255,122,60,0.3)}} body[data-skin="glass"] .hero-tag{animation:glassTagGlow 3.8s ease-in-out infinite} body[data-skin="glass"] .hero-stats{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.16);border-radius:22px;backdrop-filter:blur(24px) saturate(150%)} body[data-skin="glass"] .hstat:hover{background:rgba(255,255,255,0.06)} body[data-skin="glass"] .hstat:hover .num{text-shadow:0 0 24px rgba(255,150,80,0.55)} body[data-skin="glass"] .hero-viz::before{background:radial-gradient(closest-side,rgba(255,130,60,0.20),rgba(255,190,110,0.07) 55%,transparent 74%)} body[data-skin="glass"] .scroll-cue .mouse::before{background:#ff8a4d} /* ---- buttons ---- */ body[data-skin="glass"] .btn{border-radius:16px} body[data-skin="glass"] .btn.primary{ background:linear-gradient(115deg,#f4622a,#ff9440 70%,#ffb35c);background-size:200% 200%; box-shadow:0 10px 34px rgba(255,110,45,0.40),inset 0 1px 0 rgba(255,255,255,0.3); } body[data-skin="glass"] .btn.primary:hover{box-shadow:0 14px 44px rgba(255,120,50,0.5),inset 0 1px 0 rgba(255,255,255,0.35)} body[data-skin="glass"] .btn.ghost{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.22);backdrop-filter:blur(14px)} body[data-skin="glass"] .btn.ghost:hover{border-color:#ff9d5c;color:#ffb181} /* ---- frosted panels ---- */ body[data-skin="glass"] .pcard, body[data-skin="glass"] .skcat, body[data-skin="glass"] .ach, body[data-skin="glass"] .focus-card, body[data-skin="glass"] .edu-card, body[data-skin="glass"] .pub-card, body[data-skin="glass"] .scard, body[data-skin="glass"] .ccard{ border-radius:24px; background: linear-gradient(rgba(255,255,255,0.085),rgba(255,255,255,0.045)) padding-box, linear-gradient(150deg,rgba(255,255,255,0.38),rgba(255,255,255,0.07) 45%,rgba(255,150,80,0.30)) border-box; box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),0 22px 54px rgba(8,4,0,0.45); backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%); } body[data-skin="glass"] .pcard:hover, body[data-skin="glass"] .scard:hover, body[data-skin="glass"] .skcat:hover, body[data-skin="glass"] .ach:hover, body[data-skin="glass"] .ccard:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,0.32),0 30px 70px rgba(8,4,0,0.55),0 0 0 1px rgba(255,150,80,0.22)} body[data-skin="glass"] .pcard .pico, body[data-skin="glass"] .scard .sico, body[data-skin="glass"] .citem .ci-ico{ background:linear-gradient(135deg,rgba(255,130,60,0.25),rgba(255,190,110,0.10)); border-color:rgba(255,255,255,0.18);color:#ffb181;border-radius:14px; } body[data-skin="glass"] .pub-card::before{background:radial-gradient(circle,rgba(255,130,60,0.20),rgba(255,190,110,0.08) 55%,transparent 72%)} body[data-skin="glass"] .pub-badge{color:#ffb181;background:rgba(255,140,70,0.10);border-color:rgba(255,140,70,0.30)} /* ---- chips & tags ---- */ body[data-skin="glass"] .chip{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.14)} body[data-skin="glass"] .chip:hover{color:#ffb181;border-color:rgba(255,150,80,0.55);box-shadow:0 6px 16px rgba(255,130,60,0.16)} body[data-skin="glass"] .ptag{color:#ffb48a;background:rgba(255,130,60,0.10);border:1px solid rgba(255,130,60,0.28)} /* ---- timeline ---- */ body[data-skin="glass"] .tline::before{background:linear-gradient(180deg,#ff9440,#ff6a2b 55%,transparent)} body[data-skin="glass"] .titem::before{border-color:#ff8a4d;box-shadow:0 0 12px rgba(255,140,70,0.6)} body[data-skin="glass"] .titem::after{border-color:#ff8a4d} body[data-skin="glass"] .titem .when{color:#ffb181} /* ---- collaborators / join / about ---- */ body[data-skin="glass"] .cavatar .cinit{background:#2b2014;color:#ffb181} body[data-skin="glass"] .ccard .clinks a{border-radius:12px} body[data-skin="glass"] .ccard .clinks a:hover{border-color:#ff9d5c;color:#ffb181} body[data-skin="glass"] .about-photo img{box-shadow:0 14px 44px rgba(8,4,0,0.5),0 0 34px rgba(255,130,60,0.28)} body[data-skin="glass"] .focus-list .ic{color:#ff9d5c} /* ---- contact / footer ---- */ body[data-skin="glass"] .clink{background:rgba(255,255,255,0.07);backdrop-filter:blur(18px);border-radius:18px} body[data-skin="glass"] .clink:hover{border-color:#ff9d5c;color:#ffb181;box-shadow:0 12px 34px rgba(255,130,60,0.22)} /* ---- store ---- */ body[data-skin="glass"] .sbadge{color:#ffb48a;background:rgba(255,130,60,0.09);border-color:rgba(255,130,60,0.25)} body[data-skin="glass"] .scard .sbest{background:linear-gradient(115deg,#ffb35c,#ff9440);color:#241505} body[data-skin="glass"] .btn.cartbtn{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.2)} body[data-skin="glass"] .btn.cartbtn:hover,body[data-skin="glass"] .btn.cartbtn.added{border-color:#ff9d5c;color:#ffb181} body[data-skin="glass"] .cart-fab{background:linear-gradient(115deg,#f4622a,#ff9440);box-shadow:0 10px 34px rgba(255,110,45,0.45),inset 0 1px 0 rgba(255,255,255,0.3)} body[data-skin="glass"] .cart-fab:hover{box-shadow:0 14px 44px rgba(255,120,50,0.6)} body[data-skin="glass"] .cart-fab .cart-count{color:#c2440f;border-color:#c2440f} body[data-skin="glass"] .cart-drawer{background:rgba(38,27,17,0.85);backdrop-filter:blur(28px) saturate(140%)} body[data-skin="glass"] .cart-backdrop{background:rgba(10,6,2,0.6)} body[data-skin="glass"] .qty button:hover{background:rgba(255,130,60,0.22);color:#ffb181} body[data-skin="glass"] .citem .ci-price, body[data-skin="glass"] .cart-helplink, body[data-skin="glass"] .faq-a a, body[data-skin="glass"] .help-contact a{color:#ffb181} body[data-skin="glass"] .faq-q:hover{color:#ffb181} body[data-skin="glass"] .faq-q::after{color:#ff9d5c} body[data-skin="glass"] .help-modal{background:rgba(38,27,17,0.92);backdrop-filter:blur(26px)} body[data-skin="glass"] .cart-total .amt .cur, body[data-skin="glass"] .scard .sprice .cur{background:var(--aurora);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} body[data-skin="glass"] .toast{border-color:rgba(255,150,80,0.5);box-shadow:0 10px 30px rgba(0,0,0,0.4),0 0 24px rgba(255,130,60,0.2)} body[data-skin="glass"] .toast .ti{color:#ff9d5c} /* ---- admin panel accents ---- */ body[data-skin="glass"] .adm-field input,body[data-skin="glass"] .adm-field textarea{background:rgba(15,9,4,0.5)} body[data-skin="glass"] .adm-tab.on{background:linear-gradient(115deg,#f4622a,#ff9440);box-shadow:0 8px 24px rgba(255,120,50,0.35)} body[data-skin="glass"] .adm-item{background:rgba(15,9,4,0.28)} body[data-skin="glass"] .adm-help code{color:#ffb181;background:rgba(255,130,60,0.10)}