|
|
| Line 1,741: |
Line 1,741: |
| } | | } |
|
| |
|
| /* OUT OF ORE HOMEPAGE V1 — ADD AT END OF MediaWiki:Common.css */ | | /* OUT OF ORE WIKI - sandbox-only v1; intentionally scoped */ |
| .ooo-home{--oh-yellow:#f5c400;--oh-bg:#121416;--oh-panel:#1b1e21;--oh-border:#35393d;color:#e7e7e7;font-family:Barlow,Arial,sans-serif;max-width:1440px;margin:0 auto;padding:12px 0 44px} | | .ooow-dev{--ooow-bg:#11171c;--ooow-panel:#1b242c;--ooow-line:#34404a;--ooow-text:#f1f3f5;--ooow-muted:#aab5bd;--ooow-yellow:#f2c33d;font-family:Barlow,Arial,sans-serif;color:var(--ooow-text);background:var(--ooow-bg);border:1px solid var(--ooow-line);border-radius:9px;overflow:hidden;line-height:1.45} |
| .ooo-home *{box-sizing:border-box}.ooo-home a{color:inherit;text-decoration:none}.ooo-home a:hover{color:var(--oh-yellow)}
| | .ooow-dev *{box-sizing:border-box}.ooow-dev a{color:inherit;text-decoration:none}.ooow-dev a:hover{color:var(--ooow-yellow);text-decoration:none}.ooow-shell{width:100%}.ooow-top{display:flex;align-items:center;gap:24px;background:#151c23;border-bottom:1px solid var(--ooow-line);padding:13px 20px}.ooow-brand{font-weight:900;font-size:19px;letter-spacing:1px;white-space:nowrap}.ooow-brand span{font-size:11px;letter-spacing:3px;color:var(--ooow-yellow)}.ooow-topsearch{flex:1;max-width:590px}.ooow-topsearch form,.ooow-herosearch form{display:flex;gap:0}.ooow-topsearch input,.ooow-herosearch input{min-width:0;flex:1;background:#27323c;color:#fff;border:1px solid #46515a;border-radius:5px 0 0 5px;padding:11px 14px;font:inherit}.ooow-topsearch button,.ooow-herosearch button{border:0;background:var(--ooow-yellow);color:#141414;font:inherit;font-weight:800;padding:0 16px;border-radius:0 5px 5px 0;cursor:pointer}.ooow-toplinks{margin-left:auto;font-size:13px;white-space:nowrap}.ooow-body{display:grid;grid-template-columns:218px minmax(0,1fr)}.ooow-nav{background:#171e25;border-right:1px solid var(--ooow-line);padding:18px 12px}.ooow-navlabel{font-size:10px;font-weight:800;letter-spacing:1.3px;color:#a9b3bb;margin:17px 9px 7px}.ooow-navitem{font-size:13px;padding:8px 10px;border-radius:4px;margin:2px 0}.ooow-navitem:hover{background:#2b353f}.ooow-navitem-active{background:var(--ooow-yellow);color:#171717;font-weight:800}.ooow-navitem-active a,.ooow-navitem-active a:hover{color:#171717}.ooow-main{min-width:0;padding:20px;background:#11171c}.ooow-hero{position:relative;min-height:295px;display:flex;align-items:center;background:linear-gradient(90deg,rgba(10,15,19,.97),rgba(10,15,19,.68) 55%,rgba(10,15,19,.22)),linear-gradient(135deg,#2b3c48,#1b242c 55%,#4e4332);border:1px solid #46515b;border-radius:7px;overflow:hidden}.ooow-hero-content{padding:29px 34px;max-width:650px;position:relative}.ooow-kicker{color:var(--ooow-yellow);font-size:11px;font-weight:800;letter-spacing:2px}.ooow-herotitle{font-size:clamp(36px,5vw,62px);line-height:.97;font-weight:900;letter-spacing:1px;margin:12px 0}.ooow-herotitle span{color:var(--ooow-yellow)}.ooow-herodesc{font-size:15px;max-width:510px;color:#e0e5e9;margin:15px 0 20px}.ooow-herosearch{max-width:490px}.ooow-sectionhead{display:flex;align-items:baseline;gap:14px;margin:25px 0 13px}.ooow-dev h2{color:var(--ooow-text);border:0;padding:0;margin:0;font-size:20px;font-weight:800}.ooow-sectionhead span{font-size:12px;color:var(--ooow-muted)}.ooow-categories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.ooow-cat{border:1px solid var(--ooow-line);background:var(--ooow-panel);border-radius:6px;overflow:hidden}.ooow-catvisual{height:112px;display:flex;align-items:end;padding:12px;color:#fff;font-size:13px;font-weight:900;letter-spacing:1px;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent),linear-gradient(125deg,#52616c,#27313b)}.ooow-cat-production{background:linear-gradient(0deg,rgba(0,0,0,.7),transparent),linear-gradient(125deg,#4d554f,#28383e)}.ooow-cat-mining{background:linear-gradient(0deg,rgba(0,0,0,.7),transparent),linear-gradient(125deg,#695a44,#30373a)}.ooow-cat-progression{background:linear-gradient(0deg,rgba(0,0,0,.7),transparent),linear-gradient(125deg,#41534d,#25313d)}.ooow-catbody{padding:12px}.ooow-catbody a{font-size:14px;font-weight:800}.ooow-catbody small{display:block;font-size:12px;color:var(--ooow-muted);margin-top:5px}.ooow-bottomgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:20px}.ooow-panel{background:var(--ooow-panel);border:1px solid var(--ooow-line);border-radius:6px;padding:15px;min-width:0}.ooow-panel h2{font-size:16px;border-bottom:1px solid var(--ooow-line);padding-bottom:12px;margin-bottom:5px}.ooow-linkrow{display:flex;justify-content:space-between;gap:8px;padding:11px 0;border-bottom:1px solid #2c3740;font-size:13px}.ooow-linkrow span{color:var(--ooow-yellow)}.ooow-updates{font-size:12px;overflow-wrap:anywhere}.ooow-panelend{margin-top:14px;font-size:12px;color:var(--ooow-yellow)}.ooow-footnote{color:#8897a2;font-size:11px;margin:22px 2px 3px} |
| .ooo-home-hero{min-height:380px;display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;border:1px solid #49453a;background:linear-gradient(115deg,#17191b 0%,#22201a 72%,#2b2616 100%);position:relative}
| | /* Optional real banner image: upload to MediaWiki, then uncomment and replace URL with the actual FilePath URL. |
| .ooo-home-hero:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--oh-yellow)} | | .ooow-dev .ooow-hero{background:linear-gradient(90deg,rgba(10,15,19,.96),rgba(10,15,19,.45)),url('/wiki/Special:Redirect/file/YOUR_BANNER.jpg') center/cover no-repeat} |
| .ooo-home-hero__content{padding:58px 46px;position:relative;z-index:1}.ooo-home-eyebrow,.ooo-home-kicker{color:var(--oh-yellow);font-size:12px;font-weight:800;letter-spacing:2px}.ooo-home-eyebrow span{color:#a8a8a8}.ooo-home-hero__title{font-size:clamp(40px,5.2vw,78px);font-weight:900;line-height:1;letter-spacing:-2px;margin:24px 0 16px;color:#fff}.ooo-home-hero__title span{color:var(--oh-yellow)}.ooo-home-hero__lead{font-size:19px;max-width:500px;color:#c7c7c7;line-height:1.5}.ooo-home-hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.ooo-home-button{display:inline-block;padding:13px 17px;font-weight:800;font-size:12px;letter-spacing:.7px}.ooo-home-button--yellow{background:var(--oh-yellow);color:#151515!important}.ooo-home-button--yellow a{color:#151515!important}.ooo-home-button--outline{border:1px solid #777;color:#fff}.ooo-home-hero__art{position:relative;min-height:280px;background:linear-gradient(90deg,#22201a 0%,rgba(30,30,30,.2) 40%),repeating-linear-gradient(135deg,transparent 0,transparent 35px,rgba(245,196,0,.035) 35px,rgba(245,196,0,.035) 36px),#282c2e}.ooo-home-hero__art:before{content:"";position:absolute;inset:15% 10%;border:1px solid #5c5642;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.ooo-home-hero__art:after{content:"OOO";position:absolute;right:10%;top:20%;font-weight:900;font-size:clamp(80px,13vw,190px);color:rgba(245,196,0,.09);letter-spacing:-10px}.ooo-home-hero__art-label{position:absolute;bottom:24px;right:26px;font-size:11px;letter-spacing:2px;color:#a7a7a7} | | */ |
| .ooo-home-search-strip{margin:18px 0 36px;background:#24272a;border-left:4px solid var(--oh-yellow);padding:17px 22px;display:flex;justify-content:space-between;gap:18px;align-items:center;font-size:14px}.ooo-home-search-strip strong{color:#fff;letter-spacing:.5px}.ooo-home-search-strip span{color:#bfc1c3}.ooo-home-search-strip__link{font-size:12px;font-weight:800;white-space:nowrap;color:var(--oh-yellow)!important} | | @media(max-width:1050px){.ooow-categories{grid-template-columns:repeat(2,minmax(0,1fr))}.ooow-bottomgrid{grid-template-columns:1fr 1fr}.ooow-toplinks{display:none}}@media(max-width:720px){.ooow-top{flex-wrap:wrap;gap:10px}.ooow-topsearch{flex-basis:100%;order:2;max-width:none}.ooow-body{display:block}.ooow-nav{border-right:0;border-bottom:1px solid var(--ooow-line);display:flex;flex-wrap:wrap;gap:4px;padding:9px}.ooow-navlabel{display:none}.ooow-navitem{font-size:11px;padding:7px}.ooow-main{padding:12px}.ooow-hero-content{padding:24px 17px}.ooow-bottomgrid{grid-template-columns:1fr}.ooow-sectionhead{display:block}.ooow-categories{gap:8px}}@media(max-width:400px){.ooow-categories{grid-template-columns:1fr}} |
| .ooo-home-section-head{display:flex;align-items:end;justify-content:space-between;gap:15px;margin:38px 0 16px}.ooo-home-section-head h2,.ooo-home-feature h2{font-size:30px!important;line-height:1.1!important;margin:8px 0 0!important;color:#fff!important;border:0!important;padding:0!important}.ooo-home-section-head>span{color:#aeb0b2;font-size:13px} | |
| .ooo-home-categories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.ooo-home-category{min-height:275px;position:relative;overflow:hidden;background:#222528;border:1px solid var(--oh-border);display:flex;flex-direction:column;justify-content:space-between;padding:18px;transition:transform .15s,border-color .15s}.ooo-home-category:hover{transform:translateY(-3px);border-color:var(--oh-yellow)}.ooo-home-category:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.9)),repeating-linear-gradient(125deg,transparent 0,transparent 29px,rgba(255,255,255,.03) 30px,transparent 31px);pointer-events:none}.ooo-home-category--production{background:#2a2821}.ooo-home-category--materials{background:#272b2b}.ooo-home-category--guides{background:#252521}.ooo-home-category__icon,.ooo-home-category__body{position:relative;z-index:1}.ooo-home-category__icon{font-size:11px;font-weight:800;letter-spacing:1.4px;color:var(--oh-yellow)}.ooo-home-category h3{font-size:23px!important;line-height:1.15!important;color:#fff!important;margin:0 0 10px!important}.ooo-home-category p{font-size:13px;color:#c0c0c0;margin:0 0 17px}.ooo-home-category__body>span{font-size:11px;font-weight:800;color:var(--oh-yellow);letter-spacing:.7px}
| |
| .ooo-home-guide-grid,.ooo-home-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.ooo-home-guide{background:var(--oh-panel);border:1px solid var(--oh-border);padding:24px;min-height:185px}.ooo-home-guide__number{font-size:12px;color:var(--oh-yellow);font-weight:800}.ooo-home-guide h3,.ooo-home-video h3{color:#fff!important;font-size:20px!important;margin:16px 0 9px!important}.ooo-home-guide p,.ooo-home-video p{color:#b7b9ba;font-size:13px;line-height:1.55}.ooo-home-guide>div{color:var(--oh-yellow);font-weight:800;font-size:11px;letter-spacing:1px;margin-top:20px}
| |
| .ooo-home-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:34px 0}.ooo-home-feature{padding:28px;min-height:240px;background:linear-gradient(135deg,#2d291e,#1b1e20 60%);border:1px solid #49402a}.ooo-home-feature p{font-size:14px;color:#c3c3c3;max-width:450px;margin:17px 0 24px}.ooo-home-feature--updates{background:#1b1e21;border-color:var(--oh-border)}.ooo-home-updates{font-size:13px;line-height:1.6;margin-top:16px;max-height:170px;overflow:auto} | |
| .ooo-home-video{border:1px solid var(--oh-border);background:var(--oh-panel);padding-bottom:12px}.ooo-home-video__thumb{height:145px;background:linear-gradient(135deg,#303338,#151719);display:grid;place-items:center}.ooo-home-video__thumb span{border:1px solid #8d7b38;color:var(--oh-yellow);border-radius:50%;width:48px;height:48px;display:grid;place-items:center;font-size:19px}.ooo-home-video h3,.ooo-home-video p{margin-left:18px!important;margin-right:18px!important}.ooo-home-footer{margin-top:40px;background:#1b1e21;border-top:3px solid var(--oh-yellow);padding:24px;display:flex;justify-content:space-between;align-items:center;gap:20px}.ooo-home-footer strong{color:#fff;font-size:13px;letter-spacing:1px}.ooo-home-footer p{color:#aaa;font-size:13px;margin:8px 0 0}.ooo-home-footer__links{font-size:12px;color:var(--oh-yellow);font-weight:800} | |
| @media(max-width:1000px){.ooo-home-categories{grid-template-columns:repeat(2,minmax(0,1fr))}.ooo-home-hero{grid-template-columns:1fr .6fr}.ooo-home-hero__content{padding:45px 28px}}
| |
| @media(max-width:680px){.ooo-home-hero{grid-template-columns:1fr}.ooo-home-hero__art{min-height:110px}.ooo-home-hero__art:after{font-size:95px;top:0}.ooo-home-hero__content{padding:36px 22px}.ooo-home-hero__title{font-size:46px}.ooo-home-categories,.ooo-home-guide-grid,.ooo-home-video-grid,.ooo-home-feature-grid{grid-template-columns:1fr}.ooo-home-category{min-height:205px}.ooo-home-search-strip,.ooo-home-footer{display:block}.ooo-home-search-strip__link{display:block;margin-top:12px}.ooo-home-section-head>span{display:none}.ooo-home-footer__links{margin-top:18px;line-height:2}}
| |