/* ============================================================ Goa Guru — Magazine stylesheet (JNews CryptoNews-inspired) Shared by all previews. Theme via . ============================================================ */ :root{ --accent:#f0a500; /* default (dark) */ --accent2:#ff5722; --ink:#12151c; --body:#2a2f3a; --muted:#8b909b; --bg:#ffffff; --panel:#f5f6f8; --line:#e6e8ec; --header-bg:#0e1116; --header-fg:#ffffff; --radius:10px; --shadow:0 10px 30px -12px rgba(15,20,30,.18); --cat-dm:#6d28d9; --cat-seo:#0ea5e9; --cat-social:#ec4899; --cat-brand:#f59e0b; --cat-web:#10b981; --cat-pr:#ef4444; --font-head:'Inter',system-ui,-apple-system,sans-serif; --font-body:'Inter',system-ui,-apple-system,sans-serif; } /* THEME: teal (bright) */ .theme-teal{--accent:#0e7c7b;--accent2:#ff6b5e;--header-bg:#0a5c5b;--panel:#f2f7f6;--ink:#10241f} /* THEME: news red (editorial) */ .theme-news{--accent:#c0392b;--accent2:#1a1a1a;--header-bg:#ffffff;--header-fg:#12151c;--panel:#f7f5f2;--ink:#161616} /* THEME: dark (default crypto) already set by :root plus dark header */ *{box-sizing:border-box;margin:0;padding:0} body{font-family:var(--font-body);color:var(--body);background:var(--bg);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased} a{text-decoration:none;color:inherit} img{max-width:100%;display:block} .wrap{max-width:1240px;margin:0 auto;padding:0 24px} .badge{position:fixed;top:12px;right:12px;background:var(--accent);color:#111;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:800;z-index:200;box-shadow:0 4px 14px rgba(0,0,0,.25)} /* ---- Ticker bar ---- */ .ticker{background:var(--header-bg);color:var(--header-fg);border-bottom:1px solid rgba(255,255,255,.08);font-size:13px} .theme-news .ticker{border-bottom:1px solid var(--line)} .ticker .wrap{display:flex;align-items:center;gap:16px;height:42px;overflow:hidden} .ticker .lbl{background:var(--accent);color:#111;font-weight:800;padding:5px 12px;border-radius:5px;text-transform:uppercase;letter-spacing:.5px;font-size:11.5px;white-space:nowrap} .ticker .track{flex:1;overflow:hidden;position:relative;height:100%;display:flex;align-items:center} .ticker .move{display:flex;gap:34px;white-space:nowrap;animation:scroll 32s linear infinite} .ticker .move a{opacity:.85}.ticker .move a:hover{opacity:1;color:var(--accent)} .ticker .move b{color:var(--accent);margin-right:6px} @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .ticker .date{opacity:.7;white-space:nowrap;font-variant-numeric:tabular-nums} /* ---- Header / nav ---- */ .head{background:var(--header-bg);color:var(--header-fg);position:sticky;top:0;z-index:100;box-shadow:0 2px 20px rgba(0,0,0,.15)} .theme-news .head{box-shadow:0 1px 0 var(--line)} .head .wrap{display:flex;align-items:center;justify-content:space-between;height:76px} .logo{font-family:var(--font-head);font-weight:900;font-size:26px;letter-spacing:-.5px;color:var(--header-fg)} .logo em{font-style:normal;color:var(--accent)} .nav ul{display:flex;gap:4px;list-style:none} .nav a{display:block;padding:10px 14px;font-weight:700;font-size:13.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--header-fg);border-radius:7px;transition:.15s;opacity:.9} .nav a:hover{background:rgba(255,255,255,.1);color:var(--accent);opacity:1} .theme-news .nav a:hover{background:var(--panel)} .head .tools{display:flex;align-items:center;gap:12px} .search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);color:var(--header-fg);border:none;padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer} .theme-news .search{background:var(--panel);color:var(--ink)} /* ---- Category pill ---- */ .pill{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:5px 10px;border-radius:4px;color:#fff} .p-dm{background:var(--cat-dm)}.p-seo{background:var(--cat-seo)}.p-social{background:var(--cat-social)} .p-brand{background:var(--cat-brand)}.p-web{background:var(--cat-web)}.p-pr{background:var(--cat-pr)} /* ---- meta line ---- */ .meta{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--muted);flex-wrap:wrap} .meta .au{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--body)} .meta .au .dot{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:inline-block} .meta span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--muted);margin-right:11px;vertical-align:middle} .meta .au::before{display:none} /* ---- Hero ---- */ .hero{padding:34px 0 10px} .hero-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:24px} .feat{position:relative;border-radius:var(--radius);overflow:hidden;min-height:460px;display:flex;align-items:flex-end;color:#fff} .feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .feat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,16,0) 35%,rgba(10,12,16,.92))} .feat .bx{position:relative;z-index:2;padding:34px} .feat h1{font-family:var(--font-head);font-size:34px;font-weight:900;line-height:1.12;margin:14px 0 12px;letter-spacing:-.6px} .feat .meta{color:rgba(255,255,255,.85)} .feat .meta .au{color:#fff} .feat .meta span::before{background:rgba(255,255,255,.6)} .side{display:flex;flex-direction:column;gap:16px} .mini{display:grid;grid-template-columns:118px 1fr;gap:14px;background:var(--panel);border-radius:var(--radius);overflow:hidden;transition:.2s} .theme-dark .mini,.theme-teal .mini,.theme-news .mini{border:1px solid var(--line)} .mini:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .mini img{width:118px;height:104px;object-fit:cover} .mini .b{padding:10px 12px 10px 0} .mini h4{font-family:var(--font-head);font-size:15px;font-weight:700;line-height:1.3;color:var(--ink);margin:7px 0 6px} .mini:hover h4{color:var(--accent)} /* ---- Section heading ---- */ .mod{padding:44px 0 6px} .mod-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;border-bottom:2px solid var(--ink);padding-bottom:12px} .mod-h h2{font-family:var(--font-head);font-size:23px;font-weight:800;color:var(--ink);position:relative;letter-spacing:-.3px} .mod-h h2::before{content:"";display:inline-block;width:6px;height:20px;background:var(--accent);margin-right:11px;vertical-align:-3px;border-radius:2px} .mod-h a{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--accent)} /* ---- Latest row (4 cards) ---- */ .row4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .card{background:var(--bg);border-radius:var(--radius);overflow:hidden;transition:.22s;border:1px solid var(--line)} .card:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .card .im{aspect-ratio:16/10;overflow:hidden} .card .im img{width:100%;height:100%;object-fit:cover;transition:.3s} .card:hover .im img{transform:scale(1.05)} .card .b{padding:16px} .card h3{font-family:var(--font-head);font-size:16.5px;font-weight:700;line-height:1.32;color:var(--ink);margin:10px 0 10px} .card:hover h3{color:var(--accent)} /* ---- Content + sidebar layout ---- */ .layout{display:grid;grid-template-columns:1fr 340px;gap:44px;padding:20px 0 10px;align-items:start} /* big + list module */ .bl{display:grid;grid-template-columns:1.25fr 1fr;gap:26px} .big{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);transition:.2s} .big:hover{box-shadow:var(--shadow)} .big .im{aspect-ratio:16/9;overflow:hidden} .big .im img{width:100%;height:100%;object-fit:cover;transition:.3s} .big:hover .im img{transform:scale(1.04)} .big .b{padding:20px} .big h3{font-family:var(--font-head);font-size:22px;font-weight:800;line-height:1.22;color:var(--ink);margin:12px 0 10px;letter-spacing:-.3px} .big:hover h3{color:var(--accent)} .big p{font-size:14.5px;color:var(--muted);margin-bottom:12px} .list{display:flex;flex-direction:column;gap:18px} .li{display:grid;grid-template-columns:104px 1fr;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)} .li:last-child{border-bottom:none} .li img{width:104px;height:78px;object-fit:cover;border-radius:8px} .li h4{font-family:var(--font-head);font-size:15px;font-weight:700;line-height:1.3;color:var(--ink);margin:4px 0 7px} .li:hover h4{color:var(--accent)} /* grid module (3) */ .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} /* ---- Sidebar ---- */ .rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:30px} .widget .w-h{font-family:var(--font-head);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:9px;margin-bottom:16px} .tabs{display:flex;gap:6px;margin-bottom:14px} .tabs span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:7px 12px;border-radius:6px;background:var(--panel);color:var(--muted)} .tabs span.on{background:var(--accent);color:#111} .pop{display:grid;grid-template-columns:44px 1fr;gap:13px;padding:13px 0;border-bottom:1px solid var(--line);align-items:start} .pop:last-child{border-bottom:none} .pop .n{font-family:var(--font-head);font-size:26px;font-weight:900;color:var(--line);line-height:.9} .pop:hover .n{color:var(--accent)} .pop h5{font-size:14px;font-weight:700;color:var(--ink);line-height:1.32} .pop:hover h5{color:var(--accent)} .pop .m{font-size:11.5px;color:var(--muted);margin-top:4px} .w-news{background:var(--header-bg);color:var(--header-fg);border-radius:var(--radius);padding:26px} .theme-news .w-news{background:var(--ink);color:#fff} .w-news .w-h{color:#fff;border-color:var(--accent)} .w-news p{font-size:13.5px;opacity:.85;margin-bottom:14px} .w-news input{width:100%;padding:12px 14px;border:none;border-radius:8px;font-size:14px;margin-bottom:10px} .w-news button{width:100%;background:var(--accent);color:#111;border:none;padding:12px;border-radius:8px;font-weight:800;cursor:pointer} .cats{list-style:none} .cats li{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink);font-size:14.5px} .cats li:hover{color:var(--accent)} .cats .c{font-size:12px;color:#fff;background:var(--muted);border-radius:999px;padding:2px 10px;font-weight:700} .cats li:nth-child(1) .c{background:var(--cat-dm)}.cats li:nth-child(2) .c{background:var(--cat-seo)} .cats li:nth-child(3) .c{background:var(--cat-social)}.cats li:nth-child(4) .c{background:var(--cat-brand)} .cats li:nth-child(5) .c{background:var(--cat-web)}.cats li:nth-child(6) .c{background:var(--cat-pr)} /* ---- Newsletter band ---- */ .band{background:linear-gradient(120deg,var(--accent),var(--accent2));border-radius:16px;padding:52px 34px;text-align:center;color:#111;margin:56px 0} .theme-dark .band,.theme-news .band{color:#fff} .band h2{font-family:var(--font-head);font-size:30px;font-weight:900;margin-bottom:10px;letter-spacing:-.4px} .band p{max-width:520px;margin:0 auto 22px;opacity:.92} .band form{display:flex;gap:10px;max-width:460px;margin:0 auto} .band input{flex:1;padding:14px 16px;border:none;border-radius:10px;font-size:15px} .band button{background:var(--ink);color:#fff;border:none;padding:14px 26px;border-radius:10px;font-weight:800;cursor:pointer} /* ---- Footer ---- */ .foot{background:var(--header-bg);color:#aeb4bf;padding:56px 0 26px;font-size:14px} .theme-news .foot{background:var(--ink);color:#b9bdc4} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px} .foot .logo{margin-bottom:12px} .foot h5{color:#fff;font-family:var(--font-head);font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px} .foot ul{list-style:none}.foot li{margin-bottom:9px;opacity:.85} .foot a:hover{color:var(--accent)} .foot .fp{display:grid;grid-template-columns:64px 1fr;gap:12px;margin-bottom:14px} .foot .fp img{width:64px;height:52px;object-fit:cover;border-radius:6px} .foot .fp h6{color:#fff;font-size:13.5px;font-weight:600;line-height:1.3} .copy{border-top:1px solid rgba(255,255,255,.1);margin-top:34px;padding-top:20px;text-align:center;opacity:.7;font-size:13px} /* ============ SINGLE ARTICLE (inside page) ============ */ .progress{position:fixed;top:0;left:0;height:3px;width:38%;background:var(--accent);z-index:300} .crumb{font-size:13px;color:var(--muted);padding:22px 0 4px} .crumb a:hover{color:var(--accent)} .article{display:grid;grid-template-columns:1fr 340px;gap:48px;padding:8px 0 30px;align-items:start} .post-head{max-width:760px} .post-head h1{font-family:var(--font-head);font-size:40px;font-weight:900;line-height:1.14;color:var(--ink);letter-spacing:-.8px;margin:14px 0 16px} .post-head .excerpt{font-size:19px;color:var(--body);margin-bottom:18px} .post-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px} .post-meta .au{display:flex;align-items:center;gap:10px} .post-meta .au .dot{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2))} .post-meta .au b{color:var(--ink);font-size:14.5px} .post-meta .au span{font-size:12.5px;color:var(--muted)} .post-meta .stats{margin-left:auto;display:flex;gap:16px;font-size:12.5px;color:var(--muted)} .hero-media{border-radius:12px;overflow:hidden;margin-bottom:14px;aspect-ratio:16/9} .hero-media img{width:100%;height:100%;object-fit:cover} .cap{font-size:12.5px;color:var(--muted);margin-bottom:26px} .share-wrap{display:flex;gap:36px;align-items:flex-start} .share{position:sticky;top:96px;display:flex;flex-direction:column;gap:10px} .share a{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel);color:var(--ink);font-weight:800;font-size:13px;border:1px solid var(--line)} .share a:hover{background:var(--accent);color:#111;border-color:var(--accent)} .prose{max-width:760px;font-size:18px;line-height:1.8;color:var(--body)} .prose h2{font-family:var(--font-head);font-size:27px;font-weight:800;color:var(--ink);margin:36px 0 14px;letter-spacing:-.4px} .prose h3{font-family:var(--font-head);font-size:21px;font-weight:700;color:var(--ink);margin:28px 0 10px} .prose p{margin-bottom:20px} .prose ul,.prose ol{margin:0 0 20px 22px}.prose li{margin-bottom:9px} .prose img{border-radius:10px;margin:24px 0} .prose blockquote{border-left:4px solid var(--accent);background:var(--panel);padding:18px 22px;border-radius:0 10px 10px 0;font-size:20px;font-style:italic;color:var(--ink);margin:26px 0} .prose a{color:var(--accent);font-weight:600;border-bottom:1px solid transparent} .prose a:hover{border-color:var(--accent)} .keybox{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:10px;padding:22px 24px;margin:26px 0} .keybox h4{font-family:var(--font-head);font-size:15px;text-transform:uppercase;letter-spacing:1px;color:var(--ink);margin-bottom:12px} .prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15.5px} .prose th{background:var(--ink);color:#fff;text-align:left;padding:12px 14px} .prose td{border:1px solid var(--line);padding:12px 14px} .tags{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0;max-width:760px} .tags a{background:var(--panel);border:1px solid var(--line);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--body)} .tags a:hover{background:var(--accent);color:#111} .author-box{display:grid;grid-template-columns:80px 1fr;gap:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;margin:12px 0 30px;max-width:760px} .author-box .dot{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2))} .author-box h4{font-family:var(--font-head);font-size:18px;color:var(--ink);margin-bottom:6px} .author-box p{font-size:14.5px;color:var(--muted)} .related h3.rt{font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:12px;margin:20px 0 24px;max-width:100%} @media(max-width:980px){ .layout,.article{grid-template-columns:1fr} .rail,.share{position:static} .share{flex-direction:row;flex-wrap:wrap} } @media(max-width:820px){ .hero-grid,.bl,.row4,.row3,.foot-grid{grid-template-columns:1fr} .row4{grid-template-columns:1fr 1fr} .nav,.ticker .date{display:none} .feat h1{font-size:25px}.post-head h1{font-size:29px} .band form,.share-wrap{flex-direction:column} } /* ============================================================ Additional COLOURFUL themes (no black) — high contrast ============================================================ */ /* THEME: Ocean — deep ocean-blue header/footer + warm gold accent */ .theme-ocean{--accent:#f4a512;--accent2:#f2652c;--header-bg:#16436b;--header-fg:#ffffff; --panel:#eef4f9;--ink:#12283f;--line:#dde6ef;--body:#33404f;--muted:#7d8794} .theme-ocean .feat::after{background:linear-gradient(180deg,rgba(18,40,63,0) 30%,rgba(18,40,63,.90))} .theme-ocean .band{color:#12283f} /* THEME: Sunset — warm berry header/footer + coral accent, cream body */ .theme-sunset{--accent:#ff6f4d;--accent2:#ffa62b;--header-bg:#7a2b52;--header-fg:#ffffff; --panel:#fdf1ec;--ink:#3d1f2d;--line:#f1e2da;--body:#4a3a40;--muted:#9a8188} .theme-sunset .feat::after{background:linear-gradient(180deg,rgba(122,43,82,0) 30%,rgba(80,24,54,.92))} .theme-sunset .band{color:#3d1f2d} /* THEME: Aurora — CREATIVE gradient header/footer, glassy, rounded */ .theme-aurora{--accent:#fbbf24;--accent2:#ec4899;--header-bg:#3b2a86;--header-fg:#ffffff; --panel:#f4f0fc;--ink:#241b45;--line:#e8e1f7;--body:#3a3556;--muted:#8b85a3} .theme-aurora .ticker,.theme-aurora .head{background:linear-gradient(100deg,#4f46e5 0%,#7c3aed 48%,#db2777 100%)} .theme-aurora .head{box-shadow:0 6px 24px -8px rgba(124,58,237,.5)} .theme-aurora .foot,.theme-aurora .w-news{background:linear-gradient(115deg,#3b2a86 0%,#6d28d9 55%,#a21caf 100%)} .theme-aurora .feat::after{background:linear-gradient(180deg,rgba(59,42,134,0) 22%,rgba(59,42,134,.9))} .theme-aurora .band{background:linear-gradient(120deg,#7c3aed,#db2777);color:#fff} .theme-aurora .mod-h h2::before{background:linear-gradient(180deg,#7c3aed,#db2777)} .theme-aurora .nav a{border-radius:999px} .theme-aurora .mod-h{border-bottom-color:#7c3aed} .theme-aurora .card:hover{box-shadow:0 22px 48px -20px rgba(124,58,237,.4)} .theme-aurora .logo em{color:#fbbf24} /* ============================================================ BATCH 2 — 2 dark, 1 rose (#C20B58) gradient, 3 creative ============================================================ */ /* ---- Full DARK MODE base (used by dark versions) ---- */ .dark-mode{--bg:#0c1119;--ink:#eef2f7;--body:#b9c2cf;--muted:#7e8896;--panel:#161d28;--line:#232d3a;--header-fg:#fff} .dark-mode .card,.dark-mode .big,.dark-mode .mini,.dark-mode .tags a,.dark-mode .keybox,.dark-mode .author-box,.dark-mode .prose blockquote{background:#141b25;border-color:#232d3a} .dark-mode .mod-h{border-bottom-color:#2c3745} .dark-mode .pop .n{color:#33404f} .dark-mode .band button{background:#0c1119;color:#fff} /* V13 Midnight (cool dark) */ .theme-midnight{--accent:#38bdf8;--accent2:#818cf8;--header-bg:#0b1426} .theme-midnight .feat::after{background:linear-gradient(180deg,rgba(11,20,38,0) 28%,rgba(8,13,24,.93))} .theme-midnight .band{background:linear-gradient(120deg,#0ea5e9,#6366f1);color:#fff} /* V14 Graphite (warm dark) */ .theme-graphite{--accent:#f59e0b;--accent2:#f97316;--header-bg:#15181f} .theme-graphite .feat::after{background:linear-gradient(180deg,rgba(21,24,31,0) 28%,rgba(11,13,17,.93))} .theme-graphite .band{background:linear-gradient(120deg,#d97706,#dc2626);color:#fff} /* V15 Rose — #C20B58 gradient */ .theme-rose{--accent:#C20B58;--accent2:#f0653e;--header-bg:#8a0b45;--panel:#fdeef4;--ink:#3a0f26;--line:#f3dbe6;--body:#4a3540;--muted:#9a7d8a;--header-fg:#fff} .theme-rose .ticker,.theme-rose .head{background:linear-gradient(110deg,#8a0b45 0%,#C20B58 55%,#f0653e 100%)} .theme-rose .foot,.theme-rose .w-news{background:linear-gradient(120deg,#8a0b45,#C20B58 60%,#e0533a)} .theme-rose .feat::after{background:linear-gradient(180deg,rgba(138,11,69,0) 25%,rgba(80,10,45,.92))} .theme-rose .band{background:linear-gradient(120deg,#C20B58,#f0653e);color:#fff} .theme-rose .mod-h h2::before{background:linear-gradient(180deg,#C20B58,#f0653e)} .theme-rose .mod-h{border-bottom-color:#C20B58} .theme-rose .nav a{border-radius:999px} .theme-rose .ticker .lbl,.theme-rose .tabs span.on,.theme-rose .w-news button{color:#fff} /* V16 Tropical (creative) */ .theme-tropical{--accent:#f59e0b;--accent2:#84cc16;--header-bg:#0d7d6f;--panel:#eefaf5;--ink:#0f2e28;--line:#d9efe7;--body:#34463f;--muted:#7d9089;--header-fg:#fff} .theme-tropical .ticker,.theme-tropical .head{background:linear-gradient(105deg,#0d9488 0%,#10b981 55%,#84cc16 100%)} .theme-tropical .foot,.theme-tropical .w-news{background:linear-gradient(120deg,#0d7d6f,#10b981 60%,#65a30d)} .theme-tropical .feat::after{background:linear-gradient(180deg,rgba(13,125,111,0) 25%,rgba(12,50,40,.9))} .theme-tropical .band{background:linear-gradient(120deg,#10b981,#84cc16);color:#0f2e28} .theme-tropical .mod-h h2::before{background:linear-gradient(180deg,#10b981,#84cc16)} .theme-tropical .mod-h{border-bottom-color:#10b981} .theme-tropical .nav a{border-radius:999px} /* V17 Cosmic (creative) */ .theme-cosmic{--accent:#22d3ee;--accent2:#e879f9;--header-bg:#1e2a78;--panel:#eef1fb;--ink:#161f45;--line:#e0e4f5;--body:#37406a;--muted:#828bb0;--header-fg:#fff} .theme-cosmic .ticker,.theme-cosmic .head{background:linear-gradient(105deg,#2563eb 0%,#7c3aed 52%,#db2777 100%)} .theme-cosmic .foot,.theme-cosmic .w-news{background:linear-gradient(120deg,#1e2a78,#4338ca 55%,#a21caf)} .theme-cosmic .feat::after{background:linear-gradient(180deg,rgba(30,42,120,0) 25%,rgba(22,31,69,.9))} .theme-cosmic .band{background:linear-gradient(120deg,#4338ca,#db2777);color:#fff} .theme-cosmic .mod-h h2::before{background:linear-gradient(180deg,#4338ca,#db2777)} .theme-cosmic .mod-h{border-bottom-color:#4338ca} .theme-cosmic .nav a{border-radius:999px} /* V18 Mango (creative) */ .theme-mango{--accent:#facc15;--accent2:#fb7185;--header-bg:#b02a5b;--panel:#fff4ec;--ink:#3d1f2a;--line:#f6e2d6;--body:#4a3630;--muted:#9a8079;--header-fg:#fff} .theme-mango .ticker,.theme-mango .head{background:linear-gradient(105deg,#f59e0b 0%,#f43f5e 55%,#a21caf 100%)} .theme-mango .foot,.theme-mango .w-news{background:linear-gradient(120deg,#b02a5b,#e11d48 55%,#9333ea)} .theme-mango .feat::after{background:linear-gradient(180deg,rgba(176,42,91,0) 25%,rgba(61,31,42,.9))} .theme-mango .band{background:linear-gradient(120deg,#f43f5e,#f59e0b);color:#3d1f2a} .theme-mango .mod-h h2::before{background:linear-gradient(180deg,#f43f5e,#a21caf)} .theme-mango .mod-h{border-bottom-color:#e11d48} .theme-mango .nav a{border-radius:999px} /* ============================================================ RICH FOOTER (opt-in via .foot-rich) ============================================================ */ .foot-rich .foot-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:30px;margin-bottom:36px;border-bottom:1px solid rgba(255,255,255,.15)} .foot-rich .foot-cta h3{font-family:var(--font-head);color:#fff;font-size:24px;font-weight:800;letter-spacing:-.3px} .foot-rich .foot-cta p{opacity:.85;font-size:14px;margin-top:5px} .foot-rich .foot-cta form{display:flex;gap:10px} .foot-rich .foot-cta input{padding:14px 16px;border:none;border-radius:9px;font-size:14px;min-width:250px} .foot-rich .foot-cta button{background:var(--accent);color:#111;border:none;padding:14px 24px;border-radius:9px;font-weight:800;cursor:pointer;white-space:nowrap} .foot-grid5{display:grid;grid-template-columns:1.7fr 1fr 1.1fr 1.5fr;gap:36px} .foot-rich .about{opacity:.85;margin-top:12px;font-size:14px;line-height:1.7;max-width:320px} .social{display:flex;gap:10px;margin-top:18px} .social a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);color:#fff;font-weight:800;font-size:13px;transition:.2s} .social a:hover{background:var(--accent);color:#111;transform:translateY(-2px)} .contact{list-style:none;margin-top:16px;font-size:13.5px} .contact li{margin-bottom:9px;opacity:.9;display:flex;gap:9px;align-items:flex-start} .contact li b{color:#fff;font-weight:600} .foot-rich h5{color:#fff;font-family:var(--font-head);font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;position:relative;padding-bottom:10px} .foot-rich h5::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;background:var(--accent);border-radius:2px} .tagcloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px} .tagcloud a{font-size:12px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.12);opacity:.92;transition:.2s} .tagcloud a:hover{background:var(--accent);color:#111;opacity:1} .foot-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:38px;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;opacity:.9} .foot-bottom .fb-links{display:flex;gap:20px;flex-wrap:wrap} .foot-bottom .fb-links a{opacity:.85} .foot-bottom .fb-links a:hover{color:var(--accent);opacity:1} @media(max-width:820px){ .foot-grid5{grid-template-columns:1fr 1fr} .foot-rich .foot-cta{flex-direction:column;align-items:flex-start} .foot-rich .foot-cta form{width:100%}.foot-rich .foot-cta input{min-width:0;flex:1} .foot-bottom{justify-content:flex-start} } /* ============================================================ FOOTER REDESIGNS — variants A (mega), B (editorial), C (centered) ============================================================ */ .foot-a .foot-grid5{grid-template-columns:1.8fr 1fr 1fr 1fr 1.3fr} .foot-a .recent-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:30px 0;margin-top:8px;border-top:1px solid rgba(255,255,255,.15)} .foot-a .rs{display:grid;grid-template-columns:60px 1fr;gap:11px} .foot-a .rs img{width:60px;height:50px;object-fit:cover;border-radius:7px} .foot-a .rs h6{color:#fff;font-size:12.5px;line-height:1.3;font-weight:600} .foot-a .rs span{font-size:11px;opacity:.7} /* Variant B — editorial split */ .foot-b .fb-top{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.15)} .foot-b .brand .logo{font-size:32px} .foot-b .brand p{opacity:.85;margin:14px 0 20px;max-width:380px;line-height:1.7} .foot-b .nlform{display:flex;gap:10px;max-width:420px} .foot-b .nlform input{flex:1;padding:14px 16px;border:none;border-radius:9px;font-size:14px} .foot-b .nlform button{background:var(--accent);color:#111;border:none;padding:14px 22px;border-radius:9px;font-weight:800;cursor:pointer;white-space:nowrap} .foot-b .picks-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .foot-b .pk{display:grid;grid-template-columns:78px 1fr;gap:13px;align-items:center} .foot-b .pk img{width:78px;height:64px;object-fit:cover;border-radius:8px} .foot-b .pk .cat{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--accent)} .foot-b .pk h6{color:#fff;font-size:13.5px;line-height:1.32;font-weight:600;margin-top:3px} .foot-b .pk:hover h6{opacity:.85} /* Variant C — centered creative */ .foot-c{text-align:center} .foot-c .logo{font-size:36px;display:inline-block} .foot-c .ctag{opacity:.88;max-width:540px;margin:14px auto 22px;font-size:15px} .foot-c .cmenu{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;font-weight:700;text-transform:uppercase;letter-spacing:.6px;font-size:13px;margin-bottom:24px} .foot-c .cmenu a{opacity:.9} .foot-c .cmenu a:hover{color:var(--accent);opacity:1} .foot-c .cnl{display:flex;gap:10px;max-width:460px;margin:0 auto 22px} .foot-c .cnl input{flex:1;padding:14px 16px;border:none;border-radius:999px;font-size:14px} .foot-c .cnl button{background:var(--accent);color:#111;border:none;padding:14px 26px;border-radius:999px;font-weight:800;cursor:pointer} .foot-c .social{justify-content:center} .foot-c .divider{height:1px;background:rgba(255,255,255,.16);margin:32px 0 0} .foot-c .foot-bottom{justify-content:center;border-top:none;margin-top:20px} .foot-c .foot-bottom .fb-links{justify-content:center} @media(max-width:820px){.foot-b .fb-top{grid-template-columns:1fr}.foot-a .recent-strip{grid-template-columns:1fr 1fr}.foot-b .picks-grid{grid-template-columns:1fr}} /* ============================================================ Replacements for the 3 newsletter blocks ============================================================ */ /* Instagram follow band (replaces mid-page newsletter) */ .ig-band{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px;margin:56px 0} .ig-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px} .ig-tag{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--accent)} .ig-head h2{font-family:var(--font-head);font-size:26px;font-weight:800;color:var(--ink);margin:6px 0 4px;letter-spacing:-.3px} .ig-head p{color:var(--muted);font-size:14.5px;max-width:470px} .ig-count{margin-top:10px;font-size:14px;color:var(--body)} .ig-count b{font-size:19px;color:var(--ink)} .ig-btn{background:linear-gradient(45deg,#f09433,#e6683c 28%,#dc2743 58%,#cc2366 78%,#bc1888);color:#fff;padding:14px 26px;border-radius:10px;font-weight:800;font-size:14.5px;white-space:nowrap;box-shadow:0 10px 22px -8px rgba(220,39,67,.55);transition:.2s} .ig-btn:hover{transform:translateY(-2px)} .ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px} .ig-grid a{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;display:block} .ig-grid img{width:100%;height:100%;object-fit:cover;transition:.3s} .ig-grid a::after{content:"♥";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;background:rgba(120,20,90,0);opacity:0;transition:.25s} .ig-grid a:hover img{transform:scale(1.08)} .ig-grid a:hover::after{background:rgba(120,20,90,.42);opacity:1} @media(max-width:820px){.ig-grid{grid-template-columns:repeat(3,1fr)}.ig-head{flex-direction:column;align-items:flex-start}} /* Advertise With Us (footer, replaces the footer newsletter CTA) */ .foot-ad .ad-btn{background:var(--accent);color:#111;padding:14px 28px;border-radius:9px;font-weight:800;white-space:nowrap;font-size:14.5px;transition:.2s} .foot-ad .ad-btn:hover{transform:translateY(-2px);filter:brightness(1.05)} /* Free audit sidebar widget note */ .w-audit small{opacity:.8;font-size:11.5px;display:block;margin-top:9px} /* ============================================================ MEGA MENU (responsive) + AD SLOTS + Advertise button fix ============================================================ */ .hamb{display:none;color:#fff;font-size:22px;cursor:pointer;user-select:none;line-height:1} .mega-nav>ul{display:flex;gap:2px;list-style:none;align-items:center} .mega-nav .has-mega{position:relative} .mega-nav>ul>li>a{display:flex;align-items:center;gap:5px} .caret{font-size:9px;opacity:.8} .mega{position:absolute;top:calc(100% + 12px);left:0;width:660px;max-width:92vw;background:#fff;color:var(--ink);border-radius:14px;box-shadow:0 30px 70px -22px rgba(15,20,40,.55);padding:24px;display:grid;grid-template-columns:1fr 230px;gap:24px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s;z-index:130} .mega::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px} .mega-right{left:auto;right:0} .has-mega:hover .mega{opacity:1;visibility:visible;transform:translateY(0)} .mega-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px} .mcol h6{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:10px;font-weight:800} .mcol a{display:block;color:var(--body);font-size:13.5px;padding:6px 0;font-weight:500;text-transform:none;letter-spacing:0;border-radius:0;opacity:1} .mcol a:hover{color:var(--accent);background:none;padding-left:5px} .mega-feat{background:var(--panel);border-radius:12px;overflow:hidden;display:block} .mega-feat img{width:100%;height:120px;object-fit:cover} .mega-feat .mf-b{padding:12px 14px 16px} .mega-feat h5{font-size:14px;font-weight:700;color:var(--ink);line-height:1.32;margin-top:8px} .mega-feat:hover h5{color:var(--accent)} /* ---- Ad slots ---- */ .adslot{margin:36px 0;text-align:center} .adslot .albl{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .adslot .abox{max-width:728px;margin:0 auto;min-height:90px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px dashed var(--line);border-radius:10px;background:var(--panel);color:var(--muted);font-weight:700;font-size:14px} .adslot .abox .dim{font-size:12px;opacity:.7;font-weight:600} .adslot.leaderboard{margin:48px 0 8px} /* ---- Advertise button: footer-matching gradient + shine (fixes hover text) ---- */ .foot-ad .ad-btn{position:relative;overflow:hidden;background:linear-gradient(120deg,#2563eb,#7c3aed 50%,#db2777);color:#fff;padding:14px 30px;border-radius:10px;font-weight:800;white-space:nowrap;font-size:14.5px;box-shadow:0 10px 24px -8px rgba(124,58,237,.55)} .foot-ad .ad-btn:hover{transform:translateY(-2px);color:#fff;filter:brightness(1.07)} .foot-ad .ad-btn::after{content:"";position:absolute;top:0;left:-160%;width:55%;height:100%;pointer-events:none;background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:shine 3.2s ease-in-out infinite} @keyframes shine{0%{left:-160%}55%{left:180%}100%{left:180%}} @media(max-width:820px){ .hamb{display:block} .search{display:none} .mega-nav{position:absolute;top:76px;left:0;right:0;background:#1e2a78;display:none;max-height:76vh;overflow:auto;padding:8px 24px 20px;box-shadow:0 24px 44px rgba(0,0,0,.35)} .mnav-cb:checked~.mega-nav{display:block} .mega-nav>ul{flex-direction:column;gap:0;align-items:stretch} .mega-nav>ul>li>a{padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.12);color:#fff} .mega{position:static;opacity:1;visibility:visible;transform:none;display:block;box-shadow:none;background:rgba(255,255,255,.06);color:#fff;width:auto;max-width:none;padding:12px 6px 6px;margin:0 0 8px;border-radius:8px} .mega-cols{grid-template-columns:1fr 1fr} .mcol a{color:#d7dcf0} .mega-feat{display:none} .adslot .abox{min-height:70px} } /* ============================================================ FIXES: mega image, lighter ad-btn gradient, animated social icons ============================================================ */ /* Mega featured image — robust aspect ratio so it always renders */ .mega-feat img{width:100%;aspect-ratio:16/10;height:auto;object-fit:cover;display:block;background:var(--line)} /* Advertise button — slightly lighter gradient (still readable white text) */ .foot-ad .ad-btn{background:linear-gradient(120deg,#3b82f6,#8b5cf6 50%,#ec4899)} /* Animated brand social icons (footer) */ .social a{overflow:visible} .social a svg{width:17px;height:17px;fill:currentColor;transition:transform .25s ease} .social a{animation:floaty 3.4s ease-in-out infinite} .social a:nth-child(2){animation-delay:.22s} .social a:nth-child(3){animation-delay:.44s} .social a:nth-child(4){animation-delay:.66s} .social a:nth-child(5){animation-delay:.88s} .social a:hover{animation-play-state:paused;transform:translateY(-4px) scale(1.14);color:#fff;box-shadow:0 8px 18px -6px rgba(0,0,0,.45)} .social a:hover svg{transform:scale(1.12)} .social .s-fb:hover{background:#1877f2} .social .s-ig:hover{background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888)} .social .s-x:hover{background:#000} .social .s-in:hover{background:#0a66c2} .social .s-yt:hover{background:#ff0000} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @media(prefers-reduced-motion:reduce){.social a{animation:none}} /* ============================================================ TWEAKS: mega featured = image only (square, rounded) + neon line ============================================================ */ /* Mega menu: show only the image on the right, square w/ slight curve */ .mega-feat .mf-b{display:none} .mega-feat{background:transparent;box-shadow:none;border-radius:14px} .mega-feat img{aspect-ratio:1/1;height:auto;border-radius:14px} /* Neon shine line under the "Advertise With Goa Guru" section */ .foot-rich .foot-ad{border-bottom:none;position:relative} .foot-rich .foot-ad::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px; background:linear-gradient(90deg,#22d3ee,#a855f7,#ec4899,#22d3ee);background-size:300% 100%; box-shadow:0 0 8px rgba(34,211,238,.8),0 0 18px rgba(168,85,247,.6),0 0 30px rgba(236,72,153,.4); animation:neonflow 4s linear infinite} @keyframes neonflow{0%{background-position:0 0}100%{background-position:300% 0}} @media(prefers-reduced-motion:reduce){.foot-rich .foot-ad::after{animation:none}} /* ============================================================ FIXES v2: square mega image, visible ad banner, share icons ============================================================ */ /* Force the mega featured into a true square with rounded corners */ .mega-feat{width:100%;aspect-ratio:1/1;align-self:start;overflow:hidden;border-radius:14px;background:var(--line);box-shadow:none} .mega-feat img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:auto;border-radius:14px} /* Advertisement banner — make it clearly visible & usable */ .adslot .abox{max-width:970px;margin:0 auto;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; border:2px dashed rgba(124,58,237,.5);border-radius:14px; background:linear-gradient(135deg,rgba(79,70,229,.09),rgba(219,39,119,.09)); color:var(--ink);font-weight:800;font-size:17px} .adslot .abox .dim{font-size:12.5px;opacity:.72;font-weight:600;letter-spacing:.3px} /* Article share bar — real brand icons + animation */ .share a svg{width:16px;height:16px;fill:currentColor;transition:transform .2s} .share a{animation:floaty 3.4s ease-in-out infinite} .share a:nth-child(2){animation-delay:.2s} .share a:nth-child(3){animation-delay:.4s} .share a:nth-child(4){animation-delay:.6s} .share a:nth-child(5){animation-delay:.8s} .share a:hover{animation-play-state:paused;transform:scale(1.14);color:#fff;border-color:transparent} .share a:hover svg{transform:scale(1.12)} .share .s-fb:hover{background:#1877f2} .share .s-x:hover{background:#000} .share .s-in:hover{background:#0a66c2} .share .s-wa:hover{background:#25d366} .share .s-link:hover{background:var(--accent);color:#111} @media(prefers-reduced-motion:reduce){.share a{animation:none}} /* ============================================================ FINAL: mega featured guaranteed SQUARE (padding-ratio hack) Higher specificity (.mega .mega-feat) to override all earlier rules. ============================================================ */ .mega .mega-feat{position:relative;display:block;width:100%;height:0;padding-top:100%;align-self:start;overflow:hidden;border-radius:14px;background:var(--line);box-shadow:none} .mega .mega-feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:14px;aspect-ratio:auto} .mega .mega-feat .mf-b{display:none} /* ============================================================ FIX: the pill-nav rule (.theme-* .nav a{border-radius:999px}) was rounding the mega featured anchor into a CIRCLE. Higher specificity (.nav .mega .mega-feat) restores square+slight-corner. ============================================================ */ .nav .mega .mega-feat{border-radius:14px} .nav .mega .mega-feat img{border-radius:14px} .nav .mega .mcol a{border-radius:0} /* ============================================================ Neon animated "shine" light around the mega-menu outer border ============================================================ */ @property --megang{syntax:"";inherits:false;initial-value:0deg} .mega{background:#fff} /* opaque centre so only the rim glows */ .mega::after{ content:"";position:absolute;inset:-2px;border-radius:16px;z-index:-1; background:conic-gradient(from var(--megang),#22d3ee,#7c3aed,#ec4899,#f59e0b,#22d3ee); box-shadow:0 0 18px rgba(34,211,238,.45),0 0 34px rgba(236,72,153,.35); animation:megaglow 4s linear infinite; } @keyframes megaglow{to{--megang:360deg}} /* Fallback for browsers without @property: a bright moving sheen along the rim */ @supports not (background:conic-gradient(from var(--megang),#000,#000)){ .mega::after{background:linear-gradient(90deg,#22d3ee,#7c3aed,#ec4899,#22d3ee);background-size:300% 100%;animation:megasheen 4s linear infinite} @keyframes megasheen{to{background-position:300% 0}} } @media(prefers-reduced-motion:reduce){.mega::after{animation:none}} /* ============================================================ FIX: THIN neon light border OUTSIDE the mega box (ring via mask) ============================================================ */ .mega::after{ inset:-5px; /* sit just outside the box */ border-radius:18px; padding:2px; /* neon line thickness */ z-index:-1; background:conic-gradient(from var(--megang),#22d3ee,#7c3aed,#ec4899,#f59e0b,#22d3ee); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; /* keep only the thin outline */ box-shadow:none; filter:drop-shadow(0 0 3px rgba(34,211,238,.85)) drop-shadow(0 0 7px rgba(168,85,247,.55)); } /* ============================================================ Move the thin neon light SLIGHTLY INSIDE the mega box (z-index above the white bg so the inner ring stays visible) ============================================================ */ .mega::after{inset:3px;border-radius:11px;z-index:1;pointer-events:none} /* ============================================================ Neon mega border — bright colours only (no dark shades) ============================================================ */ .mega::after{ background:conic-gradient(from var(--megang),#22d3ee,#67e8f9,#c084fc,#f472b6,#fde047,#22d3ee); filter:drop-shadow(0 0 3px rgba(34,211,238,.9)) drop-shadow(0 0 7px rgba(244,114,182,.6)); } /* ============================================================ Sanctify advertisement banner (below SEO & Social) ============================================================ */ .sanctify-ad{position:relative;overflow:hidden;border-radius:16px;padding:30px 32px;color:#fff; background:linear-gradient(120deg,#1e2a78,#4338ca 45%,#a21caf); box-shadow:0 18px 42px -18px rgba(67,56,202,.6)} .sanctify-ad::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 88% 15%,rgba(236,72,153,.4),transparent 55%)} .sanctify-ad>*{position:relative} .sanctify-ad .sa-badge{display:inline-block;background:rgba(255,255,255,.16);padding:5px 13px;border-radius:999px;font-size:12px;font-weight:700;margin-bottom:14px;letter-spacing:.3px} .sanctify-ad h3{font-family:var(--font-head);font-size:30px;font-weight:900;letter-spacing:3px;margin-bottom:4px} .sanctify-ad .sa-tag{font-size:15.5px;font-weight:700;color:#fde047;margin-bottom:10px} .sanctify-ad .sa-desc{font-size:14.5px;opacity:.92;max-width:580px;margin-bottom:20px;line-height:1.6} .sa-links{display:flex;flex-wrap:wrap;gap:12px} .sa-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;padding:11px 18px;border-radius:10px;font-weight:700;font-size:14px;transition:.2s} .sa-btn:hover{background:#fff;color:#4338ca;transform:translateY(-2px);border-color:#fff} .sa-btn.primary{background:#fde047;color:#26203a;border-color:#fde047} .sa-btn.primary:hover{filter:brightness(1.06);color:#26203a} @media(max-width:600px){.sanctify-ad{padding:24px 22px}.sa-btn{width:100%;justify-content:center}} /* ============================================================ Sanctify ad — two-column layout (fills the right side) ============================================================ */ .sanctify-ad{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:center;text-align:left} .sanctify-ad .sa-desc{max-width:none;margin-bottom:0} .sa-actions{display:flex;flex-direction:column;gap:11px} .sa-actions-h{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;opacity:.85;font-weight:800;margin-bottom:2px} .sa-actions .sa-btn{width:100%;justify-content:flex-start} @media(max-width:760px){ .sanctify-ad{grid-template-columns:1fr;gap:22px} .sa-actions .sa-btn{justify-content:center} } /* ============================================================ Popular widget tabs + comments panel + JS progress bar ============================================================ */ .tabs span{cursor:pointer;user-select:none} .tab-panel[hidden]{display:none} .cmt{display:block;padding:12px 0;border-bottom:1px solid var(--line)} .cmt:last-child{border-bottom:none} .cmt .who{font-weight:700;color:var(--ink);font-size:13.5px;line-height:1.35} .cmt .who span{color:var(--muted);font-weight:500} .cmt .txt{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5} .cmt:hover .who{color:var(--accent)} .progress{width:0}