MediaWiki:Common.css: Difference between revisions

/* OUT OF ORE HOMEPAGE V1 — ADD AT END OF MediaWiki:Common.css */

.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}

.ooo-home *{box-sizing:border-box}.ooo-home a{color:inherit;text-decoration:none}.ooo-home a:hover{color:var(--oh-yellow)}

.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}

.ooo-home-hero:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--oh-yellow)}

.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}

.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}

@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}}