Homepage: Difference between revisions

No edit summary
Day mode: complete cohesive light theme (dark mode untouched)
Line 130: Line 130:
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s;}
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s;}
.fade-up.in{opacity:1;transform:none;}
.fade-up.in{opacity:1;transform:none;}
body.light-mode{--bg:#F4F4F2;--bg2:#ECECEA;--card:rgba(0,0,0,.03);--cb:rgba(0,0,0,.08);--chov:rgba(255,121,0,.04);--chb:rgba(255,121,0,.3);--tx:#111;--tx2:#555;--tx3:#999;}
/* ===== DAY MODE — cohesive light theme (mirrors the dark palette; dark mode untouched) ===== */
body.light-mode .nav{background:rgba(244,244,242,.88);}
body.light-mode{--bg:#F7F6F3;--bg2:#FFFFFF;--panel:#FFFFFF;--card:#FFFFFF;--cb:rgba(0,0,0,.09);--line:rgba(0,0,0,.10);--chov:rgba(255,121,0,.05);--chb:rgba(255,121,0,.40);--tx:#161513;--tx2:#575654;--tx3:#8A8985;}
/* Lift the forced-dark MediaWiki canvas to light (beats Common.css body/#content/.mw-parser-output !important via +1 class specificity or source order) */
body.light-mode,
body.light-mode #content,
body.light-mode .mw-body,
body.light-mode .mw-body-content,
body.light-mode #mw-content,
body.light-mode #mw-content-text,
body.light-mode #bodyContent,
body.light-mode .mw-parser-output{background:var(--bg)!important;color:var(--tx)!important;}
/* Homepage section headings: dark ink in day mode (Common.css forces them white) */
body.light-mode .mw-parser-output h1,
body.light-mode .mw-parser-output h2,
body.light-mode .mw-parser-output h3,
body.light-mode .mw-parser-output h4{color:var(--tx)!important;}
/* Chrome + components */
body.light-mode .nav{background:rgba(247,246,243,.9);border-bottom:1px solid var(--line);}
body.light-mode .lsw{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08);}
body.light-mode .lb.av{color:#8A8985;}
body.light-mode .lb.dim{color:#C9C7C2;}
/* Nav/lang link hover: Common.css forces #fff !important — keep dark ink on light */
body.light-mode .nl:hover{color:var(--tx)!important;}
body.light-mode .lb.av:hover{color:var(--tx)!important;}
body.light-mode .tbtn{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.09);color:var(--tx2);}
body.light-mode .tbtn:hover{background:rgba(0,0,0,.07);}
body.light-mode .mq-wrap{border-top-color:rgba(0,0,0,.07);border-bottom-color:rgba(0,0,0,.07);}
body.light-mode .h-grid{background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);}
body.light-mode .hcs{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);color:var(--tx)!important;}
body.light-mode .hcs:hover{background:rgba(0,0,0,.07);border-color:rgba(255,121,0,.5);}
body.light-mode .stats{background:rgba(0,0,0,.08);}
body.light-mode .stat{background:var(--bg);}
body.light-mode .stat{background:var(--bg);}
body.light-mode .bento{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.06);}
body.light-mode .bc{background:var(--bg2);}
body.light-mode .bc{background:var(--bg2);}
body.light-mode .bento,.light-mode .stats{background:rgba(0,0,0,.07);}
body.light-mode .bc:hover{background:var(--chov);box-shadow:inset 0 0 0 1px rgba(255,121,0,.22);}
body.light-mode .h-grid{background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);}
body.light-mode .tc{border-color:rgba(0,0,0,.08);}
body.light-mode .foot{background:var(--bg);}
body.light-mode .ac,
body.light-mode .ec,
body.light-mode .pc,
body.light-mode .cyc,
body.light-mode .tsc{box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px -8px rgba(0,0,0,.10);}
body.light-mode .ac:hover,
body.light-mode .pc:hover,
body.light-mode .cyc:hover{box-shadow:0 18px 44px -22px rgba(255,121,0,.45);}
body.light-mode .nli{background:#fff;border-color:rgba(0,0,0,.15);color:var(--tx);}
body.light-mode .nli:focus{border-color:rgba(255,121,0,.5);}
body.light-mode .foot{background:var(--bg);border-top-color:rgba(0,0,0,.08);}
body.light-mode .fb{border-top-color:rgba(0,0,0,.08);}
body.light-mode #topics,
body.light-mode #articles{border-top-color:rgba(0,0,0,.06)!important;border-bottom-color:rgba(0,0,0,.06)!important;}
@media(max-width:900px){.bento{grid-template-columns:1fr;}.bw{grid-column:span 1;}.stats{grid-template-columns:repeat(2,1fr);}.fg{grid-template-columns:1fr 1fr;}}
@media(max-width:900px){.bento{grid-template-columns:1fr;}.bw{grid-column:span 1;}.stats{grid-template-columns:repeat(2,1fr);}.fg{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.nav-links-wrap{display:none;}.fg{grid-template-columns:1fr;}}
@media(max-width:600px){.nav-links-wrap{display:none;}.fg{grid-template-columns:1fr;}}