.hero-intro{ position:relative;z-index:auto;max-width:68rem;margin:1.5rem auto;padding:2rem;border-radius:1rem;color:var(--fg);background:linear-gradient(180deg,#fdf8f0 0%,#f3e7cf 100%);border:1px solid #aa82504d;box-shadow:0 6px 20px #00000014, 0 0 32px #f0c88c2e;isolation:isolate;} .hero-intro::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(circle at 50% 25%,#fff8e673,transparent 70%), radial-gradient(circle at 50% 110%,#dcbe9640,transparent 80%),url(/assets/img/paper-texture.jpg) center/180% no-repeat;mix-blend-mode:multiply;opacity:.35} .hero-intro::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background-image:radial-gradient(circle,#ffffff59 0px,transparent 4px), radial-gradient(circle,#ffffc840 0px,transparent 3px),radial-gradient(circle,#fff3 0px,transparent 2px);background-size:260px 260px,180px 180px,140px 140px;background-position:0 0px,40px 120px,120px 80px;animation:floatingDust 14s linear infinite;opacity:.18} @keyframes floatingDust { 0%{background-position:0 0px,40px 120px,120px 80px} 50%{background-position:30px 20px,60px 100px,100px 110px} 100%{background-position:0 0px,40px 120px,120px 80px} } .hero-intro h1{font-family:var(--font-title);font-size:2rem;margin-bottom:.75rem;color:#7c5331;text-shadow:0 1px 1px #fff8,0 0 8px #fff0c859} .hero-intro p{font-size:1.15rem;max-width:36rem;margin:0 auto 1.6rem;color:#4e3f30} .hero-intro a{color:#8b3a2a;text-decoration:underline;text-underline-offset:3px;transition:color .25s ease} .hero-intro a:hover{color:#b64c3b} body.night .hero-intro{background:linear-gradient(180deg,#3a2a18 0%,#24180d 100%);border-color:#ffdc9640;box-shadow:0 6px 20px #0009 0 0 34px #ffd27826} body.night .hero-intro::before{background:radial-gradient(circle at 50% 25%,#ffdc9633,transparent 70%),radial-gradient(circle at 50% 110%,#ffc8781f,transparent 80%), repeating-linear-gradient(0deg,#ffe6b40d 0 1px,transparent 1px 3px),url(/assets/img/paper-texture-dark.jpg) center/180% no-repeat;mix-blend-mode:screen;opacity:.25} body.night .hero-intro::after{opacity:.28} body.night .hero-intro h1{color:#f6e3b1;text-shadow:0 0 6px #ffe69666 0 0 14px #ffe69640} body.night .hero-intro p{color:#e5dac6} body.night .hero-intro a{color:#f3d18a} body.night .hero-intro a:hover{color:#ffe9b4} @media (max-width:768px) { .hero-intro{padding:1.6rem 1rem} .hero-intro h1{font-size:1.6rem} .hero-intro p{font-size:1rem} } @media (max-width:480px) { .hero-intro{padding:1.3rem .75rem} .hero-intro h1{font-size:1.3rem} .hero-intro p{font-size:.95rem} } .hero-intro::before{will-change:transform;transition:transform .15s ease-out} @keyframes heroAmbientPan { 0%{transform:translate3d(0px,0px,0)} 50%{transform:translate3d(-10px,6px,0)} 100%{transform:translate3d(0px,0px,0)} } .hero-intro.parallax-auto::before{animation:heroAmbientPan 18s ease-in-out infinite} .hero-intro .title-frame{display:flex;flex-direction:column;align-items:center;margin:.5rem 0 1.2rem} .hero-intro .title-sep{width:65%;border:0;height:1px;margin:.4rem 0;background:linear-gradient(to right,transparent,#503c2888,transparent)} body.night .hero-intro .title-sep{background:linear-gradient(to right,transparent,#e6c88c80,transparent)} .hero-intro .category-heading{font-family:var(--font-title);font-size:2rem;font-weight:600;letter-spacing:.02em;margin:.4rem 0;text-align:center;color:var(--accent);text-shadow:0 1px 1px #ffffffb3 0 0 8px #fff0c859} body.night .hero-intro .category-heading{color:#f6e3b1;text-shadow:0 0 6px #f5e4b273 0 0 18px #fff0c833} .home-hero-title{font-size:2.2rem;letter-spacing:.02em;font-weight:700;color:var(--accent);text-shadow:0 2px 4px #ffffff80 0 0 14px #ffe6b459} body.night .home-hero-title{color:#f6e3b1;text-shadow:0 0 6px #ffe6b48c 0 0 16px #ffc87833} .hero-emblem{position:absolute;top:1.3rem;left:50%;transform:translateX(-50%);width:140px;height:140px;background:url(/assets/img/logo_readruneberg.webp) center/contain no-repeat;opacity:.05;pointer-events:none;filter:grayscale(0.4) brightness(1.35);z-index:0} body.night .hero-emblem{opacity:.1;filter:grayscale(0.2) brightness(0.9)} .sep-animate{animation:sepFade 1.2s ease-out forwards;opacity:0;transform:translateY(-4px)} .sep-animate.bottom{animation-delay:.25s} @keyframes sepFade { 0%{opacity:0;transform:translateY(-6px)} 100%{opacity:1;transform:translateY(0)} } .rune-layer{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:1} .rune-layer::before,.rune-layer::after{content:"ᛅᚾᛏᛁᚱᛋᚲ";position:absolute;left:50%;transform:translateX(-50%);font-size:1.1rem;letter-spacing:.6rem;color:#503c1e1f;animation:runeFloat 18s linear infinite;white-space:nowrap} .rune-layer::after{top:65%;animation-duration:24s;animation-direction:reverse;opacity:.18} @keyframes runeFloat { 0%{transform:translateX(-50%) translateY(20px)} 50%{transform:translateX(-48%) translateY(-10px)} 100%{transform:translateX(-50%) translateY(20px)} } body.night .rune-layer::before,body.night .rune-layer::after{color:#f5dcaa1f} .hero-search{display:flex;align-items:center;gap:1rem;width:100%;max-width:min(90vw,32rem);margin:2rem auto;padding:1.25rem 1.4rem;background:#ffffffd1;border:1px solid #d3c0a4;border-radius:.9rem;backdrop-filter:blur(6px);box-shadow:0 3px 12px #0000001a inset 0 1px 2px #fff6;position:relative} .hero-search::before{content:"";position:absolute;inset:0;border-radius:inherit;background:url(/assets/img/paper-texture.jpg) center/cover no-repeat;opacity:.12;mix-blend-mode:multiply;pointer-events:none;z-index:0} .hero-search .search-left{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.6rem;z-index:1} .hero-search label{font-size:.85rem;font-weight:600;color:var(--fg);opacity:.75;margin-left:.15rem} .hero-search input[type=search]{flex:1;padding:.9rem 1rem;font-size:1.05rem;background:#fffdfa;border:1px solid #c5b299;border-radius:.6rem;transition:border-color .2s,box-shadow .2s} .hero-search input[type=search]:focus{border-color:#b48c5a;outline:none;box-shadow:0 0 0 3px #b48c5a40} .search-fuzzy-wrap{margin-top:.1rem} .fuzzy-label{display:flex;align-items:center;gap:.45rem;cursor:pointer;font-size:.9rem;color:var(--fg)} .fuzzy-label input[type=checkbox]{width:1rem;height:1rem;accent-color:#b48c5a} .hero-search .search-right{display:flex;align-items:center;z-index:1} .hero-search button{padding:.9rem 1.4rem;font-size:1rem;font-weight:600;border-radius:.6rem;background:#f7efe4;border:1px solid #b48c5a;color:#5a4837;cursor:pointer;transition:background .2s,transform .2s} .hero-search button:hover{background:#ffefd9;transform:translateY(-2px)} .hero-search .search-input-wrapper { position:relative;z-index:50;} body.night .hero-search{background:#201a12eb;border-color:#403223;box-shadow:0 2px 12px #000a,inset 0 1px 2px #ffe6b414} body.night .hero-search::before{opacity:.18;filter:brightness(0.55)} body.night .hero-search input[type=search]{background:#1e180f;border-color:#6a5338;color:#f6eedd} body.night .hero-search input[type=search]:focus{border-color:#d6b874;box-shadow:0 0 0 3px #d6b87440} body.night .hero-search button{background:#d6b874;color:#2b1c0a;border-color:#c6a564} body.night .hero-search button:hover{background:#e9cf93} body.night .fuzzy-label{color:#f6eedd} @media (max-width:680px) { .hero-search{flex-direction:column;align-items:stretch;gap:1.1rem;max-width:100%} .hero-search button{width:100%} .hero-search .search-right{width:100%;justify-content:center} } @media (max-width:680px) { .hero-intro { margin:1rem 0.75rem;border-radius:0.75rem;padding:1.6rem 1.2rem;} } @media (max-width:480px) { .hero-intro { margin:0;border-radius:0;max-width:100%;padding:1.4rem 1rem;} } @media (max-width:680px) { .hero-search .search-input-wrapper { width:100%;} .hero-search input[type=search] { width:100%;box-sizing:border-box;} } @media (max-width:480px) { .hero-search .search-input-wrapper { width:100%;} .hero-search { max-width:100%;padding:1.2rem 1rem;} } .hero-search input[type=search] { min-width:0;} .hero-search .search-input-wrapper { flex:1 1 auto;} .hero-search input[type=search] { width:100%;flex:1 1 auto;min-width:0;} .hero-search { overflow:visible;position:relative;z-index:20;} .live-results { position:absolute;top:100%;left:0;right:0;max-height:60vh;overflow-y:auto;z-index:9999;} .hero-intro .hero-search { overflow:visible!important;} .hero-intro .hero-search { overflow:visible;position:relative;z-index:20;} .hero-intro .live-results { position:absolute;top:100%;left:0;right:0;background:var(--bg);border:1px solid #d5c1a8;border-radius:0 0 .6rem .6rem;box-shadow:0 6px 18px rgba(0,0,0,0.25);padding:.25rem 0;max-height:60vh;overflow-y:auto;z-index:9999;} .hero-intro { position:relative;z-index:200;} @media (max-width:680px) { .hero-search { flex-direction:column;align-items:stretch;} .hero-search .search-input-wrapper { width:100%;order:1;} .hero-search .search-right { width:100%;order:2;margin-top:.5rem;} } .hero-intro .live-results { max-width:100%;width:100%;box-sizing:border-box;} @media (max-width:480px) { .hero-intro .live-results { left:0;right:0;width:100%;border-radius:0 0 .6rem .6rem;} } @media (max-width:680px) { .hero-search { flex-direction:column;align-items:stretch;} .hero-search .search-input-wrapper { width:100%;order:1;position:relative;} .hero-search .search-right { width:100%;order:2;margin-top:.5rem;} } .hero-intro .live-results { width:100%;max-width:100%;box-sizing:border-box;left:0;right:0;z-index:9999;} @media (max-width:480px) { .hero-intro .live-results { border-radius:0 0 .6rem .6rem;} }