/* FAIASALAMANDA v0.4 */ :root{--ink:#110d09;--cream:#fff8e9;--paper:#f2e7d5;--orange:#f49b19;--sun:#ffd45a;--red:#d64929;--green:#315d3b;--muted:#cbb99e;--ease:cubic-bezier(.2,.8,.2,1);--max:1240px} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}body.lock{overflow:hidden}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button,a{font:inherit}button{cursor:pointer}.wrap{width:min(var(--max),calc(100% - 40px));margin:auto}.micro{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:950}.pill{display:inline-flex;align-items:center;gap:.55rem;border:1px solid currentColor;border-radius:999px;padding:.72rem .96rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:950;background:transparent}.pill:hover,.pill:focus-visible{background:currentColor;color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease),transform .75s var(--ease)}[data-reveal].in{opacity:1;transform:none} /* ENTRY */ .entry{position:fixed;inset:0;z-index:800;background:#090705;display:grid;grid-template-columns:1fr 1fr;transition:opacity .65s var(--ease),visibility .65s var(--ease)}.entry.is-gone{opacity:0;visibility:hidden;pointer-events:none}.entry:before{content:"";position:absolute;z-index:10;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.23)}.entry-center{position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);width:min(42vw,620px);pointer-events:none;text-align:center}.entry-logo{background:rgba(255,255,255,.96);border-radius:14px;padding:9px 13px;box-shadow:0 22px 75px rgba(0,0,0,.38)}.entry-line{color:#fff;margin-top:12px;font-size:.7rem;font-weight:950;letter-spacing:.2em;text-transform:uppercase;text-shadow:0 2px 18px #000}.portal{position:relative;overflow:hidden;border:0;padding:0;color:#fff;text-align:left;isolation:isolate;min-width:0}.portal-bg{position:absolute;inset:-2%;z-index:-3;background-size:cover;background-position:center;transition:transform 1.1s var(--ease),filter .6s ease}.portal.music .portal-bg{background-image:linear-gradient(135deg,rgba(215,74,35,.28),rgba(0,0,0,.05)),url("https://media04.meinbezirk.at/article/2021/04/30/6/25815926_L.jpg?1620112013=");background-position:center 45%;filter:saturate(.83) contrast(1.07) brightness(.58)}.portal.food .portal-bg{background-image:url("pavillon-aussen.webp");filter:saturate(1.04) contrast(1.03) brightness(.76)}.portal:before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.07) 66%)}.portal:hover .portal-bg,.portal:focus-visible .portal-bg{transform:scale(1.07)}.portal-copy{position:absolute;z-index:4;left:clamp(24px,4vw,62px);right:clamp(24px,4vw,62px);bottom:clamp(28px,4.8vw,68px);max-width:35rem}.portal h2{margin:.48rem 0 .58rem;text-transform:uppercase;font-size:clamp(3rem,6vw,6.35rem);line-height:.82;letter-spacing:-.066em;font-weight:1000}.portal p{margin:0;max-width:31rem;font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.35;font-weight:760}.enter{display:inline-flex;margin-top:1rem;padding:.7rem .95rem;border:1.5px solid currentColor;border-radius:999px;text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;font-weight:950;background:rgba(0,0,0,.15);backdrop-filter:blur(8px)} /* NAV */ .topbar{position:fixed;z-index:140;left:0;right:0;top:0;padding:13px 18px;display:flex;justify-content:space-between;align-items:center;color:#fff;mix-blend-mode:difference;pointer-events:none}.topbar>*{pointer-events:auto}.brand{font-weight:1000;letter-spacing:-.04em}.switch{border:1px solid rgba(255,255,255,.55);color:#fff;background:rgba(0,0,0,.12);border-radius:999px;padding:.62rem .82rem;text-transform:uppercase;font-size:.62rem;letter-spacing:.09em;font-weight:950} /* ORDER */ main{display:flex;flex-direction:column}.order-music #music{order:1}.order-music .bridge{order:2}.order-music #food{order:3}.order-food #food{order:1}.order-food .bridge{order:2}.order-food #music{order:3}main footer{order:4}.section{position:relative;min-height:100svh;overflow:hidden}.headline{margin:0;text-transform:uppercase;font-size:clamp(3.8rem,9vw,8.8rem);line-height:.77;letter-spacing:-.075em;font-weight:1000} /* MUSIC */ #music{background:radial-gradient(circle at 80% 20%,rgba(244,155,25,.21),transparent 27%),radial-gradient(circle at 12% 82%,rgba(214,73,41,.22),transparent 30%),#110c08;color:var(--cream);padding:120px 0 100px}#music:before{content:"";position:absolute;inset:-20%;opacity:.05;background:repeating-linear-gradient(102deg,transparent 0 32px,#fff 33px 34px);transform:rotate(-6deg)}.music-intro{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;min-height:74svh}.music-copy .sub{font-size:clamp(1.35rem,2.5vw,2.45rem);line-height:1.04;font-weight:880;letter-spacing:-.035em;color:var(--sun);margin:1.3rem 0}.music-copy p{font-size:1.08rem;line-height:1.62;max-width:650px;color:#eadbc6}.portrait{position:relative;min-height:620px;border-radius:28px;overflow:hidden;box-shadow:0 35px 100px rgba(0,0,0,.38);transform:rotate(1.2deg);background:#21170f}.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,12,8,.72),transparent 48%)}.photo-credit{position:absolute;z-index:3;bottom:12px;right:14px;color:#fff;font-size:.58rem;opacity:.8;text-shadow:0 1px 8px #000}.music-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:56px}.statement{border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:24px;background:rgba(255,255,255,.045);min-height:205px;display:flex;flex-direction:column;justify-content:space-between}.statement strong{font-size:1.5rem;line-height:1.05}.statement.hot{background:var(--orange);color:var(--ink)} /* DISCOGRAPHY */ .discography{margin-top:105px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:28px}.section-head h2{margin:0;font-size:clamp(3rem,7vw,6.4rem);line-height:.84;letter-spacing:-.065em;text-transform:uppercase}.section-head p{max-width:440px;line-height:1.55;color:#d8c6ae}.release-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.release-filter{border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;border-radius:999px;padding:.62rem .86rem;font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.release-filter.active{background:var(--orange);color:var(--ink);border-color:var(--orange)}.release-list{border-top:1px solid rgba(255,255,255,.16)}.track{display:grid;grid-template-columns:70px minmax(0,1fr) 150px 120px;gap:16px;align-items:center;padding:15px 8px;border-bottom:1px solid rgba(255,255,255,.11)}.track .num{opacity:.45;font-variant-numeric:tabular-nums}.track strong{font-size:1.05rem}.track .meta{font-size:.77rem;opacity:.65}.track .year{text-align:right;font-size:.78rem;opacity:.65}.album-note{margin-top:16px;padding:18px 20px;border:1px dashed rgba(255,255,255,.2);border-radius:18px;color:#d9c8b0;line-height:1.5}.stream-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} /* VIDEO CAROUSEL */ .videos{margin-top:110px;overflow:visible}.video-stage{position:relative;margin-inline:calc(50% - 50vw);padding:20px 0 42px;overflow:hidden}.video-track{position:relative;height:390px}.video-card{position:absolute;left:50%;top:50%;width:min(46vw,620px);height:330px;transform:translate(-50%,-50%) scale(.72);opacity:0;filter:saturate(.5);transition:transform .65s var(--ease),opacity .65s var(--ease),filter .65s var(--ease);border-radius:26px;overflow:hidden;background:#21170f;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 60px rgba(0,0,0,.28);pointer-events:none}.video-card.pos-2{transform:translate(calc(-50% - 90vw),-50%) scale(.68);opacity:.12}.video-card.pos-1{transform:translate(calc(-50% - 47vw),-50%) scale(.82);opacity:.58;filter:saturate(.8)}.video-card.active{transform:translate(-50%,-50%) scale(1);opacity:1;filter:none;z-index:5;pointer-events:auto}.video-card.pos1{transform:translate(calc(-50% + 47vw),-50%) scale(.82);opacity:.58;filter:saturate(.8)}.video-card.pos2{transform:translate(calc(-50% + 90vw),-50%) scale(.68);opacity:.12}.video-bg{position:absolute;inset:0;background:linear-gradient(135deg,#d64a29,#f39b18 60%,#ffd45a);display:grid;place-items:center}.video-bg.dark{background:linear-gradient(135deg,#17100b,#442417 55%,#d64a29)}.video-bg.news{background:linear-gradient(135deg,#20160f,#f0e5d4 180%)}.video-bigword{font-size:clamp(2.7rem,6vw,6.4rem);font-weight:1000;line-height:.8;letter-spacing:-.07em;text-transform:uppercase;text-align:center;opacity:.92;padding:20px}.video-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9),transparent 62%);pointer-events:none}.video-info{position:absolute;z-index:3;left:22px;right:86px;bottom:20px;color:#fff}.video-info strong{display:block;font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.04}.video-info span{display:block;margin-top:.42rem;font-size:.67rem;text-transform:uppercase;letter-spacing:.1em;opacity:.72}.play{position:absolute;z-index:4;right:18px;bottom:18px;width:58px;height:58px;border-radius:50%;border:0;background:var(--orange);font-weight:1000;color:var(--ink)}.video-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:8;background:#000}.carousel-nav{display:flex;justify-content:center;align-items:center;gap:12px}.carousel-arrow{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-weight:1000}.carousel-counter{min-width:82px;text-align:center;font-size:.7rem;letter-spacing:.15em;font-weight:900}.consent-video{position:absolute;inset:0;z-index:9;background:rgba(17,12,8,.96);display:grid;place-items:center;text-align:center;padding:30px;color:#fff}.consent-video button{margin-top:12px} /* BRIDGE */ .bridge{min-height:66svh;display:grid;place-items:center;text-align:center;background:var(--paper);padding:80px 20px}.bridge h2{margin:0;font-size:clamp(3.1rem,9vw,8.5rem);line-height:.82;letter-spacing:-.07em;text-transform:uppercase;font-weight:1000}.bridge p{font-size:clamp(1.05rem,2vw,1.55rem);font-weight:800;max-width:760px;margin:1rem auto 0} /* FOOD */ #food{background:linear-gradient(180deg,#f2a01a,#ffd45b 45%,#f3e7d5);padding:120px 0 100px}.food-intro{display:grid;grid-template-columns:.95fr 1.05fr;gap:50px;align-items:center;min-height:76svh}.food-copy .headline{font-size:clamp(3.5rem,8.5vw,8.3rem)}.food-copy .sub{font-size:clamp(1.3rem,2.4vw,2.3rem);font-weight:880;line-height:1.05;letter-spacing:-.035em;margin:1.2rem 0}.food-copy p{font-size:1.08rem;line-height:1.56;max-width:620px;font-weight:650}.hours{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}.collage{position:relative;min-height:590px}.shot{position:absolute;overflow:hidden;border:9px solid #fff8e9;border-radius:8px;box-shadow:0 24px 70px rgba(93,55,8,.23)}.shot img{width:100%;height:100%;object-fit:cover}.shot.one{width:66%;height:55%;left:0;top:9%;transform:rotate(-5deg)}.shot.two{width:58%;height:49%;right:0;bottom:4%;transform:rotate(5deg)}.shot.three{width:40%;height:33%;right:5%;top:0;transform:rotate(2deg)}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:48px}.gallery figure{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3}.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}.gallery figure:hover img{transform:scale(1.05)} /* FOOTER */ footer{background:#110c08;color:var(--cream);padding:84px 0 0}.footer-title{margin:0;font-size:clamp(3.1rem,9vw,8rem);line-height:.82;letter-spacing:-.07em;text-transform:uppercase;font-weight:1000}.footer-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.footer-links a,.footer-links button{border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.7rem .9rem;font-weight:850;background:transparent;color:#fff}.legal-nav{display:flex;flex-wrap:wrap;gap:16px;margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:.82rem;opacity:.76}.creator{margin-top:58px;padding:30px 20px 34px;border-top:1px solid rgba(255,255,255,.14);text-align:center}.creator a{display:inline-block}.creator strong{display:block;font-size:1rem;letter-spacing:.04em}.creator span{display:block;margin-top:5px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}.creator .claim{margin-top:12px;font-size:.64rem;letter-spacing:.17em;opacity:.48} /* LEGAL PAGES */ .legal-page{background:#f4eadb;min-height:100vh}.legal-hero{padding:120px 0 55px;background:#110c08;color:#fff}.legal-hero h1{margin:.5rem 0 0;font-size:clamp(3.4rem,9vw,8rem);line-height:.82;letter-spacing:-.07em;text-transform:uppercase}.legal-content{padding:60px 0 100px}.legal-content article{max-width:900px}.legal-content h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:2.4rem 0 .7rem}.legal-content h3{margin:1.6rem 0 .5rem}.legal-content p,.legal-content li{line-height:1.68}.legal-content a{text-decoration:underline;text-underline-offset:3px}.legal-note{padding:16px 18px;border-radius:16px;background:#fff2cc;border:1px solid #e5c977;margin:22px 0}.back-home{position:absolute;top:22px;left:22px;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.6rem .8rem;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em} /* CONSENT */ .consent-banner{position:fixed;z-index:1000;left:18px;right:18px;bottom:18px;max-width:760px;margin:auto;background:#110c08;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:22px;box-shadow:0 24px 90px rgba(0,0,0,.45)}.consent-banner[hidden],.consent-modal[hidden]{display:none}.consent-banner h2{margin:0 0 8px;font-size:1.35rem}.consent-banner p{margin:0;line-height:1.45;color:#dfd0bc}.consent-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}.consent-actions button{border-radius:999px;padding:.72rem .95rem;font-weight:900;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff}.consent-actions .primary{background:var(--orange);border-color:var(--orange);color:var(--ink)}.consent-modal{position:fixed;z-index:1100;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:18px}.consent-box{width:min(620px,100%);max-height:90svh;overflow:auto;background:#fff8e9;border-radius:26px;padding:26px;color:var(--ink)}.consent-box h2{margin-top:0}.setting{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:18px 0;border-top:1px solid rgba(0,0,0,.12)}.setting p{margin:.35rem 0 0;line-height:1.45;font-size:.9rem}.toggle{position:relative;width:52px;height:30px}.toggle input{position:absolute;opacity:0}.toggle span{position:absolute;inset:0;border-radius:999px;background:#b7afa5}.toggle span:after{content:"";position:absolute;width:22px;height:22px;left:4px;top:4px;border-radius:50%;background:#fff;transition:.2s}.toggle input:checked+span{background:var(--green)}.toggle input:checked+span:after{transform:translateX(22px)}.modal-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.modal-actions button{border:1px solid #262016;border-radius:999px;padding:.7rem .9rem;background:transparent;font-weight:900}.modal-actions .primary{background:var(--ink);color:#fff} @media(max-width:900px){.entry{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.entry:before{left:0;right:0;top:50%;bottom:auto;width:auto;height:1px}.entry-center{width:min(78vw,520px)}.entry-line{font-size:.56rem;margin-top:8px}.portal-copy{left:18px;right:18px;bottom:15px}.portal h2{font-size:clamp(1.95rem,9.7vw,3.75rem);margin:.2rem 0 .28rem}.portal p{font-size:.84rem;line-height:1.2;max-width:84%}.enter{margin-top:.48rem;padding:.54rem .7rem;font-size:.57rem}.music-intro,.food-intro{grid-template-columns:1fr}.portrait{min-height:480px}.music-grid{grid-template-columns:1fr}.section-head{display:block}.section-head p{margin-top:14px}.track{grid-template-columns:54px 1fr 100px}.track .meta{display:none}.video-card{width:min(68vw,560px)}.video-card.pos-1{transform:translate(calc(-50% - 70vw),-50%) scale(.78)}.video-card.pos1{transform:translate(calc(-50% + 70vw),-50%) scale(.78)}.video-card.pos-2{transform:translate(calc(-50% - 132vw),-50%) scale(.65)}.video-card.pos2{transform:translate(calc(-50% + 132vw),-50%) scale(.65)}.collage{min-height:470px}.gallery{grid-template-columns:1fr 1fr}} @media(max-width:560px){.wrap{width:min(100% - 28px,var(--max))}.topbar{padding:10px 11px}.brand{font-size:.8rem}.switch{font-size:.5rem;padding:.5rem .6rem}.entry-center{width:84vw}.entry-logo{padding:5px 8px;border-radius:9px}.entry-line{font-size:.46rem;letter-spacing:.12em}.portal-copy{bottom:11px}.portal h2{font-size:clamp(1.72rem,9.2vw,2.55rem);line-height:.84}.portal p{font-size:.72rem;max-width:94%}.enter{font-size:.5rem;padding:.46rem .6rem}.portal .micro{font-size:.52rem}.music-copy .headline,.food-copy .headline{font-size:clamp(3.3rem,17vw,5.5rem)}.portrait{min-height:390px}.track{grid-template-columns:40px 1fr 58px;gap:8px}.track strong{font-size:.94rem}.track .year{font-size:.68rem}.video-track{height:320px}.video-card{width:78vw;height:280px}.video-card.pos-1{transform:translate(calc(-50% - 81vw),-50%) scale(.78);opacity:.4}.video-card.pos1{transform:translate(calc(-50% + 81vw),-50%) scale(.78);opacity:.4}.video-card.pos-2,.video-card.pos2{opacity:0}.collage{min-height:390px}.shot.one{width:68%;height:53%}.shot.two{width:64%;height:45%}.shot.three{width:42%;height:31%}.consent-banner{left:10px;right:10px;bottom:10px;border-radius:18px;padding:18px}.consent-actions button{flex:1 1 calc(50% - 5px)}.creator{padding-inline:12px}} @media(max-height:680px) and (max-width:900px){.entry-center{width:64vw}.entry-line{display:none}.portal p{display:none}.portal h2{font-size:clamp(1.55rem,8.4vw,2.5rem)}.enter{margin-top:.32rem}.portal-copy{bottom:8px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}[data-reveal]{opacity:1;transform:none}} /* ========================= v0.5 ========================= */ .discography{margin-top:100px} .release-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:28px} .release-card{min-width:0;transition:opacity .35s ease,transform .45s var(--ease);outline:none} .release-card[hidden]{display:none!important} .release-card:focus-visible .release-cover{outline:3px solid var(--orange);outline-offset:5px} .release-cover{position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#2b1d12,#bd6e16 65%,#f0a421);box-shadow:0 18px 55px rgba(0,0,0,.24);isolation:isolate} .release-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:transform .8s var(--ease),filter .5s ease,opacity .4s ease} .release-card:hover .release-cover-img,.release-card:focus-within .release-cover-img{transform:scale(1.045)} .cover-fallback{position:absolute;inset:0;z-index:1;padding:18px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at 80% 15%,rgba(255,214,90,.35),transparent 28%),linear-gradient(145deg,#1b110a,#7e351d 55%,#e58f18);color:#fff} .cover-fallback span{font-size:.58rem;letter-spacing:.18em;font-weight:950}.cover-fallback strong{font-size:clamp(1.25rem,2.1vw,2.2rem);line-height:.9;letter-spacing:-.05em;text-transform:uppercase;overflow-wrap:anywhere}.cover-fallback em{font-size:.7rem;font-style:normal;letter-spacing:.12em;font-weight:900} .release-meta{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:12px 2px 2px}.release-meta>div:first-child{min-width:0}.release-meta strong{display:block;font-size:1rem;line-height:1.08}.release-meta span{display:block;margin-top:.34rem;font-size:.68rem;line-height:1.25;color:#cbbca7}.release-links{display:flex;flex-direction:column;gap:5px;flex:0 0 auto;text-align:right}.release-links a{font-size:.62rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;opacity:.78}.release-links a:hover{opacity:1;color:var(--orange)} .album-overlay{position:absolute;inset:0;z-index:4;background:rgba(12,8,5,.92);color:#fff;padding:16px;display:flex;flex-direction:column;opacity:0;transform:translateY(8px);pointer-events:none;transition:.38s var(--ease);backdrop-filter:blur(6px)} .album-card:hover .album-overlay,.album-card:focus .album-overlay,.album-card.is-open .album-overlay{opacity:1;transform:none;pointer-events:auto} .album-overlay-head{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:8px;margin-bottom:9px}.album-overlay-head span{font-size:.52rem;letter-spacing:.18em;font-weight:950}.album-overlay-head strong{font-size:1.05rem;text-transform:uppercase}.album-tracklist{margin:0;padding:0 0 0 1.1rem;overflow:auto;font-size:clamp(.56rem,.74vw,.72rem);line-height:1.32;scrollbar-width:thin}.album-tracklist li{padding:1px 0}.album-tracklist .track-note{list-style:none;margin:7px 0 0 -1rem;padding-top:7px;border-top:1px solid rgba(255,255,255,.16);opacity:.65;font-size:.56rem} .music-source-note,.video-note{max-width:820px;margin:18px 0 0;color:#bbaa92;font-size:.72rem;line-height:1.5} /* Slow five-card video runner */ .videos{margin-top:110px;overflow:visible} .video-runner{position:relative;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;margin-top:28px} .runner-mask{position:relative;overflow:hidden;width:100%;padding:30px 0 36px;mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%)} .runner-track{display:flex;align-items:center;gap:50px;width:max-content;will-change:transform;transform:translate3d(0,0,0)} .runner-card{position:relative;flex:0 0 clamp(210px,calc((100vw - 200px)/5),340px);aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:#21150e;border:1px solid rgba(255,255,255,.13);box-shadow:0 18px 55px rgba(0,0,0,.25);transform:scale(.92);opacity:.68;transition:transform .55s var(--ease),opacity .55s var(--ease),filter .55s var(--ease);isolation:isolate} .runner-card.is-center{transform:scale(1.055);opacity:1;z-index:4;box-shadow:0 26px 80px rgba(0,0,0,.42)} .runner-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:10;background:#000} .video-thumb,.video-thumb img{position:absolute;inset:0;width:100%;height:100%}.video-thumb img{object-fit:cover}.video-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.04) 66%)} .press-thumb{position:absolute;inset:0;background:linear-gradient(135deg,#ba1d24 0 52%,#1a1110 52%);color:#fff;padding:18px;display:flex;justify-content:space-between;align-items:flex-start}.press-thumb span{font-weight:1000;font-size:clamp(1.15rem,1.7vw,1.8rem);line-height:.82;letter-spacing:-.04em}.press-thumb b{font-size:.58rem;line-height:1.05;letter-spacing:.12em;text-align:right;opacity:.65} .runner-copy{position:absolute;z-index:5;left:16px;right:62px;bottom:14px;color:#fff;opacity:.35;transition:opacity .35s ease;text-shadow:0 2px 12px rgba(0,0,0,.7)}.runner-card.is-center:hover .runner-copy,.runner-card.is-center:focus-within .runner-copy{opacity:.58}.runner-copy strong{display:block;font-size:clamp(1.05rem,1.55vw,1.65rem);line-height:.96;letter-spacing:-.04em}.runner-copy span{display:block;margin-top:.4rem;font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800} .runner-play{position:absolute;z-index:7;right:14px;bottom:14px;width:42px;height:42px;border:0;border-radius:50%;background:var(--orange);color:#160f09;font-weight:1000;opacity:.34;transform:scale(.86);transition:.3s ease;pointer-events:none}.runner-card.is-center .runner-play{opacity:1;transform:scale(1);pointer-events:auto}.runner-card:not(.is-center){cursor:pointer}.runner-controls{display:flex;justify-content:center;align-items:center;gap:14px;color:#d6c5ad}.runner-controls button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:transparent;color:#fff;font-size:1.15rem}.runner-controls span{min-width:150px;text-align:center;font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;opacity:.65} .consent-video{position:absolute;inset:0;z-index:12;display:grid;place-items:center;text-align:center;background:rgba(12,8,5,.94);padding:18px;color:#fff}.consent-video p{font-size:.74rem;line-height:1.4;opacity:.78}.consent-video .pill{background:var(--orange);color:#150f09;border:0} /* Tiny creator signature */ .creator-mini{max-width:440px;margin:58px auto 0;padding:18px 14px 10px;text-align:center;border-top:1px solid rgba(255,255,255,.1);color:#fff;opacity:.62;font-size:10px;line-height:1.32;letter-spacing:.02em} .creator-mini:hover{opacity:.88}.creator-work{font-size:9px;opacity:.68;margin-bottom:8px}.creator-mini a{display:flex;flex-direction:column;gap:1px;align-items:center}.creator-mini strong{font-size:11px;letter-spacing:.04em}.creator-mini span{font-size:9px}.creator-mini em{font-style:normal;font-size:8px;letter-spacing:.12em;margin-top:4px;opacity:.72} /* Legal return */ .back-home{cursor:pointer} @media(max-width:1180px){.release-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.runner-card{flex-basis:clamp(220px,calc((100vw - 150px)/4),310px)}} @media(max-width:900px){.release-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.release-toolbar{gap:7px}.release-filter{font-size:.62rem}.runner-track{gap:24px}.runner-card{flex-basis:55vw}.runner-mask{mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}} @media(max-width:560px){.discography{margin-top:72px}.release-grid{gap:11px}.release-meta{display:block}.release-links{flex-direction:row;margin-top:7px;text-align:left}.release-meta strong{font-size:.9rem}.release-meta span{font-size:.6rem}.cover-fallback{padding:12px}.cover-fallback strong{font-size:clamp(1rem,5.4vw,1.55rem)}.album-overlay{padding:10px}.album-tracklist{font-size:.5rem}.album-overlay-head strong{font-size:.85rem}.runner-track{gap:18px}.runner-card{flex-basis:72vw}.runner-controls span{min-width:110px}.creator-mini{margin-top:42px;font-size:9px}} /* ===== v0.5 FINAL PATCH ===== */ .release-toolbar{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px} .release-filter{border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;border-radius:999px;padding:.65rem .86rem;font-weight:900;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;transition:.25s ease} .release-filter:hover,.release-filter.active{background:var(--orange);color:var(--ink);border-color:var(--orange)} .video-thumb-fallback{position:absolute;inset:0;z-index:-1;padding:18px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at 75% 18%,rgba(255,205,61,.34),transparent 28%),linear-gradient(135deg,#20140d,#762e20 57%,#dd8618);color:white} .video-thumb-fallback span{font-size:.58rem;font-weight:1000;letter-spacing:.18em}.video-thumb-fallback b{font-size:clamp(1.2rem,1.8vw,1.8rem);text-transform:uppercase;line-height:.9;letter-spacing:-.045em} .video-thumb img:not([src]){opacity:0}.video-thumb img[src]{opacity:1} .runner-card.press-card{background:#9f171c} .runner-card:focus-visible{outline:3px solid var(--orange);outline-offset:5px} @media(min-width:901px){ .runner-track{gap:50px} .runner-card{flex:0 0 calc((100vw - 200px)/5);min-width:0;max-width:none} } @media(min-width:901px) and (max-width:1199px){ .runner-track{gap:34px} .runner-card{flex-basis:calc((100vw - 136px)/5)} } /* ========================= v0.6 ========================= */ /* Der Einstieg deckt die Seite vollständig ab. Dahinter wird zuerst die gewählte Reihenfolge gesetzt und erst dann die Hauptseite weich eingeblendet. */ .js .main-shell{opacity:0;visibility:hidden;transition:opacity 1.15s var(--ease),filter 1.15s var(--ease);filter:blur(5px)} .js .main-shell.main-visible{opacity:1;visibility:visible;filter:none} .main-shell.world-fading{opacity:0!important;filter:blur(4px)!important} .entry{transition:opacity 1s var(--ease),visibility 1s var(--ease)} .entry.is-gone{opacity:0;visibility:hidden;pointer-events:none} /* FILTER: erst ausfaden, dann wirklich aus dem Grid nehmen */ .release-card{transition:opacity .32s ease,transform .32s var(--ease),filter .32s ease} .release-card.is-filtered-out{opacity:0;transform:scale(.94);filter:blur(3px);pointer-events:none} .release-card[hidden]{display:none!important} .release-filter{position:relative;overflow:hidden} .release-filter.active:after{content:"";position:absolute;left:18%;right:18%;bottom:5px;height:2px;border-radius:99px;background:var(--ink)} .release-demo{border:0;background:transparent;color:inherit;padding:0;font-size:.62rem;font-weight:950;text-transform:uppercase;letter-spacing:.06em;opacity:.8;cursor:pointer} .release-demo:hover,.release-demo:focus-visible{opacity:1;color:var(--orange)} .cover-demo{position:absolute;z-index:7;right:12px;top:12px;width:42px;height:42px;border:0;border-radius:50%;background:var(--orange);color:#130d08;font-weight:1000;box-shadow:0 10px 28px rgba(0,0,0,.3);transition:.3s var(--ease)} .cover-demo:hover,.cover-demo:focus-visible{transform:scale(1.13) rotate(-4deg)} .album-overlay{padding-top:58px} /* APPLE MUSIC HÖRPROBE */ .demo-dock{position:fixed;z-index:650;left:50%;bottom:18px;transform:translateX(-50%);width:min(760px,calc(100% - 28px));background:rgba(15,10,7,.96);color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:22px;box-shadow:0 26px 90px rgba(0,0,0,.48);backdrop-filter:blur(18px);overflow:hidden} .demo-dock[hidden]{display:none} .demo-dock-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border-bottom:1px solid rgba(255,255,255,.1)} .demo-dock-bar>div{display:flex;gap:11px;align-items:center}.demo-dock-bar strong{font-size:.9rem}.demo-dock-bar button{width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:1.25rem} .demo-frame{min-height:160px;background:#0a0705}.demo-frame iframe{display:block;width:100%;height:175px;border:0;background:#fff} .demo-blocked{padding:24px;text-align:center}.demo-blocked p{opacity:.7;font-size:.8rem} /* VIDEO-RUNNER: fünf Karten, 50 px Luft, Bild zwischen Rot/Schwarz */ .video-head{margin-bottom:8px} .video-legend{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 6px;color:#d5c3ab;font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;font-weight:850} .video-legend span{display:flex;align-items:center;gap:7px}.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.music-dot{background:var(--orange)}.report-dot{background:#c3292e}.interview-dot{background:#f2e7d5} .video-runner{margin-top:18px} .runner-mask{padding:38px 0 46px;mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%)} .runner-track{gap:50px} .runner-card{flex:0 0 calc((100vw - 200px)/5);max-width:none;min-width:0;aspect-ratio:16/10;transform:scale(.94);opacity:.72;border-radius:22px;background:#170e0b;border-color:rgba(216,73,41,.28);filter:saturate(.82) contrast(.98);transition:transform .46s var(--ease),opacity .46s var(--ease),filter .46s var(--ease),box-shadow .46s var(--ease)} .runner-card:before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(112deg,rgba(163,18,25,.82) 0%,rgba(122,12,19,.28) 29%,rgba(0,0,0,.04) 52%,rgba(0,0,0,.48) 100%);mix-blend-mode:multiply} .runner-card:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(to top,rgba(7,4,3,.92),rgba(7,4,3,.03) 65%),linear-gradient(90deg,rgba(204,33,40,.38),transparent 44%)} .runner-card.is-center{transform:scale(1.075);opacity:1;z-index:5;filter:saturate(1.04) contrast(1.05);box-shadow:0 30px 95px rgba(0,0,0,.52),0 0 0 1px rgba(244,155,25,.42)} .runner-card.is-center:hover,.runner-card.is-center:focus-within{transform:scale(1.13);filter:saturate(1.14) contrast(1.08);box-shadow:0 36px 115px rgba(0,0,0,.64),0 0 0 2px rgba(244,155,25,.68)} .runner-media,.runner-media img,.runner-fallback{position:absolute;inset:0;width:100%;height:100%} .runner-media{z-index:1;background:#23140f} .runner-media img{z-index:2;object-fit:cover;opacity:0;transition:opacity 1.1s ease,transform 1.5s var(--ease),filter 1s ease;filter:saturate(.82) contrast(1.05)} .runner-media img[src]{opacity:.82} .runner-card.is-center .runner-media img[src]{opacity:.94} .runner-card:hover .runner-media img{transform:scale(1.045)} .runner-fallback{display:grid;place-items:center;padding:20px;text-align:center;color:#fff;font-size:clamp(1.1rem,1.7vw,1.8rem);font-weight:1000;letter-spacing:-.05em;text-transform:uppercase;background:radial-gradient(circle at 78% 16%,rgba(244,155,25,.45),transparent 28%),linear-gradient(135deg,#a11824,#150d0b 68%)} .runner-shade{position:absolute;inset:0;z-index:3;background:linear-gradient(to top,rgba(0,0,0,.78),transparent 66%)} .media-kind{position:absolute;z-index:7;left:13px;top:13px;padding:.38rem .52rem;border-radius:999px;background:rgba(13,8,6,.78);color:#fff;border:1px solid rgba(255,255,255,.2);font-size:.5rem;letter-spacing:.12em;font-weight:1000} .music-video .media-kind{background:rgba(239,145,20,.9);color:#17100a;border:0} .press-video .media-kind{background:rgba(177,25,32,.88)} .interview-video .media-kind{background:rgba(244,235,217,.9);color:#17100a} .runner-copy{z-index:7;opacity:.36;bottom:14px;left:15px;right:57px}.runner-card.is-center .runner-copy{opacity:.55}.runner-card.is-center:hover .runner-copy,.runner-card.is-center:focus-within .runner-copy{opacity:0;transform:translateY(10px)} .runner-hover{position:absolute;z-index:8;left:12px;right:12px;bottom:12px;padding:13px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(11,7,5,.92),rgba(114,18,24,.88));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);color:#fff;opacity:0;transform:translateY(18px);pointer-events:none;transition:.36s var(--ease)} .runner-card:hover .runner-hover,.runner-card:focus-within .runner-hover{opacity:1;transform:none} .runner-hover strong{display:block;font-size:clamp(.9rem,1.25vw,1.2rem);line-height:1}.runner-hover p{margin:.42rem 0 .48rem;font-size:clamp(.58rem,.72vw,.72rem);line-height:1.35;opacity:.9}.runner-hover span{display:block;font-size:.48rem;letter-spacing:.08em;text-transform:uppercase;opacity:.58} .runner-play{z-index:9;right:13px;bottom:13px;width:40px;height:40px} .video-note{margin-top:10px} /* PRESSE */ .press-zone{margin-top:110px;padding-top:32px;border-top:1px solid rgba(255,255,255,.13)} .press-zone-food{border-top-color:rgba(17,13,9,.18)} .press-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .press-card{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:22px;overflow:hidden;background:#1c120e;color:#fff;border:1px solid rgba(255,255,255,.11);transition:transform .45s var(--ease),box-shadow .45s var(--ease)} .press-zone-food .press-card{background:#fff6e8;color:var(--ink);border-color:rgba(17,13,9,.12)} .press-card:hover,.press-card:focus-visible{transform:translateY(-8px) rotate(-.4deg);box-shadow:0 24px 70px rgba(0,0,0,.25)} .press-card.feature{grid-column:span 2} .press-visual{position:relative;aspect-ratio:16/10;overflow:hidden;background:#801722} .press-card.feature .press-visual{aspect-ratio:2/1} .press-visual img,.press-fallback{position:absolute;inset:0;width:100%;height:100%}.press-visual img{object-fit:cover;opacity:0;transition:opacity .9s ease,transform .8s var(--ease)}.press-visual img[src]{opacity:.88}.press-card:hover .press-visual img{transform:scale(1.045)} .press-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.58),transparent 62%),linear-gradient(115deg,rgba(178,24,31,.36),transparent 52%);pointer-events:none} .press-fallback{display:grid;place-items:center;text-align:center;color:#fff;font-size:clamp(1.4rem,2.7vw,3rem);font-weight:1000;line-height:.82;letter-spacing:-.06em;background:linear-gradient(135deg,#ad1c26,#17100d 70%)} .press-credit{position:absolute;z-index:3;left:9px;bottom:7px;font-size:.48rem;color:#fff;opacity:.72;text-shadow:0 1px 7px #000} .press-body{padding:17px 17px 19px;display:flex;flex-direction:column;flex:1}.press-label{font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;font-weight:950;opacity:.62}.press-body h3{margin:.55rem 0 .5rem;font-size:clamp(1.1rem,1.55vw,1.55rem);line-height:.98;letter-spacing:-.035em}.press-body p{margin:0;font-size:.72rem;line-height:1.45;opacity:.72}.press-body b{margin-top:auto;padding-top:14px;font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;color:var(--orange)} .press-zone-food .press-body b{color:#a41d24} .press-zone-food .section-head p{color:#5e4d3e} /* tiny creator credit stays intentionally quiet */ .creator-mini{max-width:360px;margin-top:48px;opacity:.52;font-size:9px}.creator-work{font-size:8px}.creator-mini strong{font-size:10px}.creator-mini span{font-size:8px}.creator-mini em{font-size:7px} /* five video cards must remain five on all desktop sizes */ @media(min-width:901px){ .runner-track{gap:50px} .runner-card{flex-basis:calc((100vw - 200px)/5)} } @media(max-width:1100px){ .press-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .press-card.feature{grid-column:span 1} } @media(max-width:900px){ .runner-track{gap:24px}.runner-card{flex-basis:56vw} .press-zone{margin-top:78px} } @media(max-width:620px){ .press-grid{grid-template-columns:1fr} .press-card.feature{grid-column:auto} .press-visual,.press-card.feature .press-visual{aspect-ratio:16/9} .video-legend{gap:8px} .demo-dock{bottom:8px} } /* ========================= v0.7 ========================= */ /* I BIN'S DA FAIA – Streamingbuttons dürfen im dunklen Bereich nicht schwarz werden */ #music .music-copy .faia-stream-pill{ transition:background .28s ease,color .28s ease,border-color .28s ease,transform .28s var(--ease),box-shadow .28s ease; } #music .music-copy .faia-stream-pill:hover, #music .music-copy .faia-stream-pill:focus-visible{ background:var(--orange)!important; color:var(--ink)!important; border-color:var(--orange)!important; transform:translateY(-2px); box-shadow:0 12px 34px rgba(243,155,24,.22); } /* MEI MUSI – die ganze Kachel ist EIN Hoverbereich. Dadurch bleibt das Cover groß, auch wenn die Maus unten bei Spotify/Apple ist. */ .release-grid{ align-items:start; gap:30px 22px; } .release-card{ position:relative; z-index:1; padding:0 0 10px; isolation:isolate; transition:opacity .32s ease,transform .32s var(--ease),filter .32s ease,z-index 0s; } .release-card:hover, .release-card:focus-within{ z-index:20; } .release-cover{ transform-origin:center 72%; transition:transform .46s var(--ease),box-shadow .46s var(--ease),filter .46s ease; will-change:transform; } .release-card:hover .release-cover, .release-card:focus-within .release-cover{ transform:scale(1.065); box-shadow:0 28px 80px rgba(0,0,0,.42); filter:saturate(1.04); } .release-card:hover .release-cover-img, .release-card:focus-within .release-cover-img{ transform:none!important; } .release-meta{ position:relative; z-index:5; padding-top:16px; } .release-links{ position:relative; z-index:8; } .release-links a, .release-demo{ position:relative; z-index:9; } /* Playbutton oben rechts: Singles UND Alben */ .release-corner-play{ opacity:.15; transform:scale(.88); transition:opacity .28s ease,transform .28s var(--ease),background .28s ease; } .release-card:hover .release-corner-play, .release-card:focus-within .release-corner-play, .release-corner-play:focus-visible{ opacity:1; transform:scale(1); } .release-corner-play:hover, .release-corner-play:focus-visible{ background:#fff4dd; transform:scale(1.12)!important; } .single-card .release-cover:after{ content:"HÖRPROBE"; position:absolute; z-index:6; right:59px; top:24px; color:#fff; font-size:.48rem; font-weight:1000; letter-spacing:.12em; opacity:0; transform:translateX(8px); text-shadow:0 2px 10px rgba(0,0,0,.65); transition:.28s var(--ease); pointer-events:none; } .single-card:hover .release-cover:after, .single-card:focus-within .release-cover:after{ opacity:.72; transform:none; } /* Link-Hover ruhig und klar – kein Springen */ .release-links a, .release-demo{ transition:color .22s ease,opacity .22s ease; } .release-links a:hover, .release-links a:focus-visible, .release-demo:hover, .release-demo:focus-visible{ color:var(--orange)!important; opacity:1!important; } /* Trackoverlay bleibt stabil, weil Album-Hover auf dem gesamten article liegt */ .album-card:hover .album-overlay, .album-card:focus-within .album-overlay, .album-card.is-open .album-overlay{ opacity:1; transform:none; pointer-events:auto; } .album-overlay{ transition:opacity .34s ease,transform .34s var(--ease); } /* Presse: Feature ist immer der erste (= neueste) Artikel */ .press-grid .press-card:first-child{ grid-column:span 2; } .press-grid .press-card:not(:first-child){ grid-column:span 1; } .press-card.feature{ grid-column:span 2; } .press-label{ font-variant-numeric:tabular-nums; } /* Auf Touch muss der Playbutton sichtbar sein */ @media(hover:none){ .release-corner-play{opacity:1;transform:none} .single-card .release-cover:after{display:none} } @media(max-width:1100px){ .press-grid .press-card:first-child, .press-card.feature{grid-column:span 1} } @media(max-width:560px){ .release-grid{gap:20px 11px} .release-card:hover .release-cover, .release-card:focus-within .release-cover{transform:scale(1.035)} } /* ========================= v0.8 / GO-LIVE CANDIDATE ========================= */ .entry.entry-safe{ --entry-logo-max-w:min(620px,42vw); --entry-logo-safe-h:clamp(92px,18svh,178px); overflow:hidden; } .entry.entry-safe .entry-center{ position:absolute;z-index:30;left:50%;top:max(12px,env(safe-area-inset-top)); transform:translateX(-50%);width:var(--entry-logo-max-w);height:var(--entry-logo-safe-h); display:flex;flex-direction:column;align-items:center;justify-content:flex-start;pointer-events:none; } .entry.entry-safe .entry-logo{ width:100%;max-height:clamp(64px,12svh,116px);display:flex;align-items:center;justify-content:center;overflow:hidden; } .entry.entry-safe .entry-logo img{width:100%;height:100%;max-height:inherit;object-fit:contain} .entry.entry-safe .entry-line{margin-top:8px;white-space:nowrap;font-size:clamp(.48rem,.7vw,.72rem)} .entry.entry-safe .portal-copy{ top:auto;bottom:max(24px,env(safe-area-inset-bottom)); max-height:calc(100svh - var(--entry-logo-safe-h) - 32px); } .entry.entry-safe .portal{padding-top:var(--entry-logo-safe-h)} @media (max-height:700px) and (min-width:901px){ .entry.entry-safe{--entry-logo-safe-h:clamp(70px,15svh,105px);--entry-logo-max-w:min(500px,38vw)} .entry.entry-safe .portal h2{font-size:clamp(2.25rem,4.7vw,4.7rem);line-height:.8} .entry.entry-safe .portal p{font-size:.84rem;max-width:27rem} .entry.entry-safe .enter{margin-top:.6rem} } @media (max-height:560px) and (min-width:701px){ .entry.entry-safe .portal p{display:none} .entry.entry-safe .portal h2{font-size:clamp(1.85rem,4.2vw,3.6rem)} } @media (max-width:900px){ .entry.entry-safe{--entry-logo-max-w:min(78vw,470px);--entry-logo-safe-h:clamp(74px,12svh,116px)} .entry.entry-safe .entry-center{height:var(--entry-logo-safe-h)} .entry.entry-safe .portal{padding-top:0} .entry.entry-safe .portal.music .portal-copy{ bottom:calc(50svh + 14px);top:auto;max-height:calc(50svh - var(--entry-logo-safe-h) - 18px); } .entry.entry-safe .portal.food .portal-copy{ bottom:max(14px,env(safe-area-inset-bottom));max-height:calc(50svh - 22px); } .entry.entry-safe .portal h2{font-size:clamp(1.7rem,8.7vw,3.45rem);line-height:.82} .entry.entry-safe .portal p{ font-size:clamp(.68rem,2.45vw,.88rem);line-height:1.18;display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .entry.entry-safe .enter{margin-top:.45rem} } @media (max-width:520px){ .entry.entry-safe{--entry-logo-max-w:82vw;--entry-logo-safe-h:clamp(66px,10.8svh,94px)} .entry.entry-safe .entry-line{font-size:.44rem;letter-spacing:.1em} .entry.entry-safe .portal h2{font-size:clamp(1.5rem,8.2vw,2.6rem)} .entry.entry-safe .portal p{font-size:.67rem} .entry.entry-safe .micro{font-size:.5rem} .entry.entry-safe .enter{font-size:.5rem;padding:.46rem .6rem} } @media (max-width:420px) and (max-height:720px){ .entry.entry-safe .portal p{display:none} .entry.entry-safe .portal h2{font-size:clamp(1.35rem,7.8vw,2.15rem)} .entry.entry-safe .portal.music .portal-copy{bottom:calc(50svh + 9px)} } .hours-static .pill, .hours-static .pill:hover, .hours-static .pill:focus, .hours-static .pill:focus-visible{ background:rgba(255,255,255,.46)!important;color:var(--ink)!important; border-color:rgba(19,14,10,.35)!important;transform:none!important; box-shadow:none!important;cursor:default!important; } .release-cover{background:#261714} .release-cover-img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;opacity:1; transition:opacity .35s ease; } .release-cover-img.is-broken{opacity:0} .cover-fallback{z-index:1} .release-corner-play{z-index:8} .faia-audio-status{ position:fixed;z-index:620;left:50%;bottom:max(14px,env(safe-area-inset-bottom)); transform:translateX(-50%);display:flex;align-items:center;gap:10px; max-width:min(520px,calc(100vw - 28px));padding:8px 10px 8px 13px;border-radius:999px; background:rgba(14,9,6,.86);color:#fff;border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(14px);box-shadow:0 12px 42px rgba(0,0,0,.32);font-size:.68rem; } .faia-audio-status[hidden]{display:none} .faia-audio-status button{width:28px;height:28px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff} .faia-eq{display:flex;align-items:flex-end;gap:2px;height:14px} .faia-eq i{display:block;width:2px;background:var(--orange);border-radius:9px;animation:faiaEq .7s ease-in-out infinite alternate} .faia-eq i:nth-child(2){height:100%;animation-delay:.12s}.faia-eq i:nth-child(1){height:45%}.faia-eq i:nth-child(3){height:70%;animation-delay:.24s} @keyframes faiaEq{to{height:25%}} .release-card.is-playing .release-corner-play{background:#fff7e8!important;color:var(--ink)!important;opacity:1!important} .release-card.is-playing .release-cover{box-shadow:0 0 0 2px var(--orange),0 28px 80px rgba(0,0,0,.42)!important} .creator-line{ width:min(100% - 28px,1100px);margin:38px auto 0;padding-top:18px; border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:center; align-items:baseline;flex-wrap:wrap;gap:.25em .55em;text-align:center; color:rgba(255,255,255,.58);font-size:clamp(10px,.78vw,12px);line-height:1.5;letter-spacing:.025em; } .creator-line a{color:rgba(255,255,255,.82);font-weight:800} .creator-line a:hover,.creator-line a:focus-visible{color:var(--orange)} .creator-line em{font-size:.92em;letter-spacing:.08em} html[data-perf="low"] [data-reveal]{transition-duration:.25s} html[data-perf="low"] .runner-card{transition-duration:.2s} html[data-perf="low"] .runner-media img{transition:none} html[data-perf="low"] .press-card:hover, html[data-perf="low"] .release-card:hover .release-cover{transform:none} html[data-perf="low"] .entry .portal-bg{transition:none} html[data-perf="reduced"] *{scroll-behavior:auto!important} html[data-perf="reduced"] .faia-eq i{animation:none!important;height:65%!important} img{height:auto} iframe{max-width:100%} :focus-visible{outline:2px solid var(--orange);outline-offset:3px} @media(max-width:360px){ .wrap{width:calc(100% - 20px)} .headline{overflow-wrap:anywhere} .release-toolbar{gap:6px} .release-filter{font-size:.56rem;padding:.55rem .65rem} } /* ========================= v0.9 / NEAR RELEASE ========================= */ /* Return from legal pages: never show the top of the main page while restoring */ html.legal-return-pending body{ opacity:0!important; } body{ transition:opacity .7s var(--ease); } html.legal-return-ready body{ opacity:1!important; } /* FAIA AUF PLAY – third line clarifies that this is more than music videos */ .video-thirdline{ display:inline-block; margin-top:.12em; font-size:.52em; line-height:.98; color:var(--orange); letter-spacing:-.045em; } /* FOOTER actions – proper Faia hover */ .footer-links .footer-action{ transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s var(--ease),box-shadow .25s ease; } .footer-links .footer-action:hover, .footer-links .footer-action:focus-visible{ background:var(--orange)!important; border-color:var(--orange)!important; color:var(--ink)!important; transform:translateY(-2px); box-shadow:0 12px 32px rgba(243,155,24,.18); } /* Legal footer links are necessary, but they don't have to look dead */ .legal-nav-cool{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; align-items:center; margin-top:34px; } .legal-nav-cool a, .legal-nav-cool button{ position:relative; border:0!important; background:transparent!important; color:rgba(255,255,255,.58)!important; padding:.45rem 0!important; font-size:.68rem!important; cursor:pointer; transition:color .22s ease,transform .22s ease; } .legal-nav-cool a:after, .legal-nav-cool button:after{ content:""; position:absolute; left:0;right:0;bottom:2px;height:1px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); } .legal-nav-cool a:hover, .legal-nav-cool a:focus-visible, .legal-nav-cool button:hover, .legal-nav-cool button:focus-visible{ color:#fff!important; transform:translateY(-1px); } .legal-nav-cool a:hover:after, .legal-nav-cool a:focus-visible:after, .legal-nav-cool button:hover:after, .legal-nav-cool button:focus-visible:after{ transform:scaleX(1); } /* Cookie UI */ .consent-banner{ border-radius:24px!important; border:1px solid rgba(255,255,255,.16)!important; background: radial-gradient(circle at 92% 12%,rgba(243,155,24,.24),transparent 31%), linear-gradient(145deg,rgba(20,12,9,.98),rgba(50,17,16,.98))!important; box-shadow:0 34px 100px rgba(0,0,0,.48)!important; backdrop-filter:blur(20px); } .consent-banner:before{ content:"FAIA SAGT:"; display:block; color:var(--orange); font-size:.54rem; letter-spacing:.16em; font-weight:1000; margin-bottom:6px; } .consent-actions button, .modal-actions button{ border-radius:999px!important; transition:background .24s ease,color .24s ease,border-color .24s ease,transform .24s var(--ease),box-shadow .24s ease!important; } .consent-actions button:hover, .consent-actions button:focus-visible, .modal-actions button:hover, .modal-actions button:focus-visible{ background:#fff2dc!important; color:var(--ink)!important; border-color:#fff2dc!important; transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.22); } .consent-actions .primary:hover, .consent-actions .primary:focus-visible, .modal-actions .primary:hover, .modal-actions .primary:focus-visible{ background:var(--sun)!important; border-color:var(--sun)!important; } .consent-settings-trigger{ background:transparent!important; } .consent-modal{ backdrop-filter:blur(10px); } .consent-box-faia{ border-radius:28px!important; border:1px solid rgba(255,255,255,.13)!important; background: radial-gradient(circle at 95% 4%,rgba(243,155,24,.2),transparent 27%), #160d0a!important; box-shadow:0 38px 120px rgba(0,0,0,.58)!important; } .setting{ border-radius:16px!important; transition:background .2s ease,border-color .2s ease!important; } .setting:hover{ background:rgba(255,255,255,.055)!important; border-color:rgba(243,155,24,.3)!important; } /* Album cards: no top-right generic play button */ .album-card .release-corner-play, .album-card .release-demo{ display:none!important; } .album-open-trigger{ border:0; background:transparent; padding:0; color:inherit; font-size:.62rem; font-weight:950; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; opacity:.76; transition:color .22s ease,opacity .22s ease; } .album-open-trigger:hover, .album-open-trigger:focus-visible{ opacity:1; color:var(--orange); } /* Album flyout: no scrolling. 2 columns, every track visible at once. */ .album-card{ overflow:visible!important; } .album-flyout{ position:absolute; z-index:90; top:-18px; left:calc(100% + 18px); width:min(720px,72vw); min-height:calc(100% + 36px); padding:22px; border-radius:24px; background: radial-gradient(circle at 94% 8%,rgba(243,155,24,.22),transparent 28%), linear-gradient(145deg,rgba(18,10,7,.985),rgba(69,16,20,.985)); color:#fff; border:1px solid rgba(255,255,255,.14); box-shadow:0 35px 110px rgba(0,0,0,.58); backdrop-filter:blur(18px); opacity:0; visibility:hidden; transform:translateX(-12px) scale(.98); pointer-events:none; transition:opacity .3s ease,transform .3s var(--ease),visibility .3s ease; } .album-card.flyout-left .album-flyout{ left:auto; right:calc(100% + 18px); transform:translateX(12px) scale(.98); } .album-card:hover .album-flyout, .album-card:focus-within .album-flyout, .album-card.is-open .album-flyout{ opacity:1; visibility:visible; transform:none; pointer-events:auto; } .album-flyout-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } .album-flyout h3{ margin:.18rem 0 0; font-size:clamp(1.75rem,2.4vw,2.7rem); letter-spacing:-.055em; line-height:.9; } .album-flyout-close{ width:36px;height:36px;border-radius:50%; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.07);color:#fff; font-size:1.3rem; cursor:pointer; } .album-flyout-intro{ margin:.85rem 0 1rem; max-width:560px; font-size:.72rem; line-height:1.45; color:rgba(255,255,255,.68); } .album-track-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; } .album-track-row{ min-width:0; display:grid; grid-template-columns:24px minmax(0,1fr) 34px; gap:8px; align-items:center; min-height:35px; padding:5px 7px; border-radius:11px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.055); transition:background .2s ease,border-color .2s ease,transform .2s ease; } .album-track-row:hover, .album-track-row:focus-within{ background:rgba(255,255,255,.09); border-color:rgba(243,155,24,.32); transform:translateX(2px); } .track-no{ font-size:.52rem; opacity:.4; font-variant-numeric:tabular-nums; } .track-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.68rem; font-weight:780; } .album-track-play{ width:30px;height:30px;border-radius:50%; border:0;background:var(--orange);color:var(--ink); font-size:.66rem;font-weight:1000; cursor:pointer; transition:transform .2s var(--ease),background .2s ease; } .album-track-play:hover, .album-track-play:focus-visible{ transform:scale(1.12); background:#fff2dc; } .album-track-row.is-playing{ background:rgba(243,155,24,.15); border-color:rgba(243,155,24,.55); } .album-track-row.is-playing .album-track-play{ background:#fff2dc; } .album-flyout-hint{ margin-top:12px; font-size:.54rem; letter-spacing:.04em; color:rgba(255,255,255,.48); } /* Keep hover alive while moving from cover to links / flyout */ .release-card:hover .release-cover, .release-card:focus-within .release-cover{ transform:scale(1.045)!important; } .release-card:hover .release-meta, .release-card:focus-within .release-meta{ transform:none; } /* very small / touch: flyout becomes a fixed no-scroll overlay */ @media(max-width:900px),(hover:none){ .album-flyout, .album-card.flyout-left .album-flyout{ position:fixed; z-index:900; left:10px!important; right:10px!important; top:50%!important; bottom:auto!important; width:auto!important; min-height:0!important; max-height:none!important; transform:translateY(-48%) scale(.985)!important; padding:18px; } .album-card.is-open .album-flyout{ transform:translateY(-50%) scale(1)!important; } .album-card:not(.is-open) .album-flyout{ opacity:0!important;visibility:hidden!important;pointer-events:none!important; } .album-track-grid{gap:5px 8px} .album-track-row{min-height:32px;grid-template-columns:20px minmax(0,1fr) 30px;padding:4px 5px} .track-name{font-size:.61rem} .album-track-play{width:28px;height:28px} .album-flyout-intro{font-size:.66rem;margin:.55rem 0 .7rem} .album-flyout-hint{margin-top:7px} } @media(max-width:430px){ .album-flyout{padding:14px 12px} .album-flyout h3{font-size:1.55rem} .album-track-grid{gap:4px 5px} .album-track-row{grid-template-columns:17px minmax(0,1fr) 27px;gap:4px;min-height:29px} .track-no{font-size:.45rem} .track-name{font-size:.54rem} .album-track-play{width:26px;height:26px;font-size:.58rem} .album-flyout-intro,.album-flyout-hint{font-size:.52rem} } /* Audio status: tiny, never obscures content */ .faia-audio-status-v09{ bottom:max(10px,env(safe-area-inset-bottom)); padding:6px 8px 6px 11px; font-size:.62rem; background:rgba(15,9,7,.76); } /* Legal page visual tone */ .legal-page{ background:#f4ead8; } .legal-page .legal-hero{ position:relative; overflow:hidden; background: radial-gradient(circle at 82% 10%,rgba(243,155,24,.22),transparent 25%), linear-gradient(145deg,#120b08,#260f0e)!important; } .legal-page .legal-hero:after{ content:""; position:absolute;inset:auto -8% -45% 40%; height:65%; border:1px solid rgba(243,155,24,.16); transform:rotate(-7deg); pointer-events:none; } .legal-page .legal-content article{ border-radius:26px; padding:clamp(22px,4vw,48px); background:rgba(255,250,240,.72); box-shadow:0 22px 70px rgba(77,48,22,.08); } .legal-page .legal-content h2{ position:relative; margin-top:2.3rem; } .legal-page .legal-content h2:after{ content:""; display:block; width:42px;height:3px; margin-top:8px; border-radius:99px; background:linear-gradient(90deg,var(--red),var(--orange)); } .legal-page .legal-note{ border-radius:18px!important; background:linear-gradient(135deg,rgba(255,213,90,.23),rgba(255,255,255,.55))!important; border-color:rgba(243,155,24,.25)!important; } .legal-page .back-home{ transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s var(--ease); } .legal-page .back-home:hover, .legal-page .back-home:focus-visible{ background:var(--orange); color:var(--ink); border-color:var(--orange); transform:translateY(-1px); } .legal-mode-switch{ position:absolute; top:22px; right:clamp(16px,3vw,40px); z-index:5; display:flex; gap:4px; padding:4px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); } .legal-mode-switch button{ border:0; border-radius:999px; padding:.48rem .68rem; background:transparent; color:rgba(255,255,255,.55); font-size:.57rem; letter-spacing:.1em; font-weight:950; cursor:pointer; } .legal-mode-switch button.active{ background:var(--orange); color:var(--ink); } .legal-mode-note{ margin-top:12px; color:rgba(255,255,255,.54); font-size:.62rem; } .back-home-bottom-wrap{ width:min(1100px,calc(100% - 40px)); margin:30px auto 60px; } .back-home-bottom{ display:inline-flex; align-items:center; border:1px solid rgba(19,14,10,.22); border-radius:999px; padding:.7rem .9rem; font-size:.7rem; font-weight:900; transition:.22s ease; } .back-home-bottom:hover, .back-home-bottom:focus-visible{ background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-2px); } @media(max-width:620px){ .legal-mode-switch{ top:12px;right:12px; } .legal-page .legal-hero{ padding-top:76px; } } /* ========================= v0.9.1 ========================= */ html.return-boot,html.return-boot body{visibility:hidden!important;opacity:0!important;scroll-behavior:auto!important} html.return-ready,html.return-ready body{visibility:visible!important;opacity:1!important} body{transition:opacity .62s var(--ease)} .entry-v091{--entry-logo-h:clamp(74px,13svh,126px);--entry-top-safe:calc(var(--entry-logo-h) + 38px)} .entry-v091 .entry-center{top:max(18px,env(safe-area-inset-top))!important;transform:translateX(-50%)!important;width:min(54vw,720px)!important;height:auto!important;overflow:visible!important} .entry-logo-mark{position:relative;width:100%;display:grid;place-items:center;isolation:isolate;animation:faiaLogoArrive 1.15s var(--ease) both} .entry-logo-mark img{display:block;width:100%;height:auto;max-height:var(--entry-logo-h);object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)) drop-shadow(0 0 20px rgba(243,155,24,.13))} .entry-logo-shimmer{position:absolute;inset:-15% -4%;z-index:-1;background:radial-gradient(circle at 35% 50%,rgba(243,155,24,.24),transparent 38%);filter:blur(18px);opacity:.75;animation:faiaLogoPulse 4.8s ease-in-out infinite} .entry-v091 .entry-line{margin-top:5px!important;color:rgba(255,248,235,.78);text-shadow:0 2px 12px rgba(0,0,0,.9)} @keyframes faiaLogoArrive{from{opacity:0;transform:translateY(-12px) scale(.93);clip-path:inset(0 48% 0 48%)}to{opacity:1;transform:none;clip-path:inset(0)}} @keyframes faiaLogoPulse{0%,100%{transform:translateX(-3%) scale(.96);opacity:.45}50%{transform:translateX(3%) scale(1.04);opacity:.82}} @media(min-width:901px){ .entry-v091 .portal{padding-top:var(--entry-top-safe)!important} .entry-v091 .portal-copy{top:auto!important;bottom:max(32px,env(safe-area-inset-bottom))!important;max-height:calc(100svh - var(--entry-top-safe) - 28px)!important} } @media(max-width:900px){ .entry-v091{--entry-logo-h:clamp(58px,8.6svh,84px);--entry-top-safe:calc(var(--entry-logo-h) + 28px)} .entry-v091 .entry-center{width:min(80vw,520px)!important;top:max(8px,env(safe-area-inset-top))!important} .entry-v091 .portal{padding:0!important} .entry-v091 .portal-copy-music{top:var(--entry-top-safe)!important;bottom:auto!important;max-height:calc(50svh - var(--entry-top-safe) - 12px)!important} .entry-v091 .portal-copy-food{top:auto!important;bottom:max(13px,env(safe-area-inset-bottom))!important;max-height:calc(50svh - 18px)!important} .entry-v091 .portal-copy{left:16px!important;right:16px!important} .entry-v091 .portal h2{font-size:clamp(1.65rem,8.7vw,3.2rem)!important;line-height:.8!important} .entry-v091 .portal p{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:clamp(.68rem,2.35vw,.86rem)!important} } @media(max-width:430px) and (max-height:720px){.entry-v091{--entry-logo-h:52px;--entry-top-safe:78px}.entry-v091 .portal p{display:none!important}.entry-v091 .portal h2{font-size:clamp(1.45rem,7.8vw,2.2rem)!important}} @media(max-height:560px) and (min-width:901px){.entry-v091{--entry-logo-h:64px;--entry-top-safe:92px}.entry-v091 .portal p{display:none}.entry-v091 .portal h2{font-size:clamp(1.9rem,4.2vw,3.7rem)}} .consent-modal-v091{color:#fff!important} .consent-box-v091{color:#fff!important;background:radial-gradient(circle at 93% 3%,rgba(243,155,24,.26),transparent 30%),linear-gradient(150deg,#150b09,#301012 72%)!important} .consent-box-v091 h2,.consent-box-v091 p,.consent-box-v091 strong,.consent-box-v091 span,.consent-box-v091 label{color:#fff!important} .consent-box-v091>p,.consent-box-v091 .setting p{color:rgba(255,255,255,.72)!important} .consent-box-v091 .setting{background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.11)!important} .consent-box-v091 .modal-actions button{color:#fff!important;border-color:rgba(255,255,255,.24)!important;background:rgba(255,255,255,.055)!important} .consent-box-v091 .modal-actions button:hover,.consent-box-v091 .modal-actions button:focus-visible{color:var(--ink)!important;background:var(--orange)!important;border-color:var(--orange)!important} .album-flyout{left:calc(100% - 10px)!important} .album-card.flyout-left .album-flyout{right:calc(100% - 10px)!important;left:auto!important} .album-flyout:before{content:"";position:absolute;top:0;bottom:0;left:-28px;width:32px} .album-card.flyout-left .album-flyout:before{left:auto;right:-28px} .legal-page-v091 .legal-hero-intro{max-width:740px;margin:14px 0 0;color:rgba(255,255,255,.72);font-size:clamp(.95rem,1.7vw,1.25rem);line-height:1.5;font-weight:650} .legal-section-lead{margin:-.25rem 0 .8rem!important;font-size:.83rem!important;font-weight:750;color:#8a3b2d!important} .prelaunch-check{margin:18px 0 6px;padding:14px 16px;border-radius:16px;background:rgba(243,155,24,.12);border:1px dashed rgba(177,67,36,.38);font-size:.78rem;line-height:1.5} .credit-list{display:grid;gap:10px}.credit-list li{line-height:1.55} .creator-line-v091{font-size:clamp(10.5px,.82vw,12.5px)!important;color:rgba(255,255,255,.62)!important} /* ========================= v0.9.2 – ENTRY HARDENING ========================= Wichtig: v0.8/v0.9.1 enthielten noch ältere, spezifischere Mobile-Regeln. Diese finalen Regeln gewinnen absichtlich über ALLE vorherigen Entry-Regeln. */ .entry.entry-safe.entry-v091.entry-v092{ --faia-entry-vh:100vh; --faia-logo-h:clamp(72px,12vh,122px); --faia-logo-safe:calc(var(--faia-logo-h) + 28px); overflow:hidden!important; } @supports (height:100svh){ .entry.entry-safe.entry-v091.entry-v092{--faia-entry-vh:100svh} } @supports (height:100dvh){ .entry.entry-safe.entry-v091.entry-v092{--faia-entry-vh:100dvh} } /* Logo owns its own top zone. */ .entry.entry-safe.entry-v091.entry-v092 .entry-center{ position:absolute!important; left:50%!important; top:max(10px,env(safe-area-inset-top))!important; bottom:auto!important; transform:translateX(-50%)!important; width:min(56vw,720px)!important; max-width:calc(100vw - 36px)!important; height:auto!important; z-index:60!important; pointer-events:none!important; } .entry.entry-safe.entry-v091.entry-v092 .entry-logo-mark img{ max-height:var(--faia-logo-h)!important; } /* Portal copy is always explicitly visible. */ .entry.entry-safe.entry-v091.entry-v092 .portal .portal-copy{ display:block!important; visibility:visible!important; opacity:1!important; z-index:40!important; overflow:visible!important; } .entry.entry-safe.entry-v091.entry-v092 .portal .portal-copy .micro, .entry.entry-safe.entry-v091.entry-v092 .portal .portal-copy h2, .entry.entry-safe.entry-v091.entry-v092 .portal .portal-copy p, .entry.entry-safe.entry-v091.entry-v092 .portal .portal-copy .enter{ visibility:visible!important; opacity:1!important; } /* Desktop / tablet landscape: both texts stay at the bottom of their half. The logo zone is reserved and can never collide with either copy. */ @media (min-width:901px){ .entry.entry-safe.entry-v091.entry-v092 .portal{ padding-top:var(--faia-logo-safe)!important; } .entry.entry-safe.entry-v091.entry-v092 .portal .portal-copy{ position:absolute!important; top:auto!important; bottom:max(30px,env(safe-area-inset-bottom))!important; left:clamp(24px,4vw,62px)!important; right:clamp(24px,4vw,62px)!important; max-height:calc(var(--faia-entry-vh) - var(--faia-logo-safe) - 38px)!important; } } /* Mobile / narrow tablets: The entry is two real 50%-rows. The copy becomes normal flex content inside EACH row instead of being positioned against the full viewport. This removes the iPhone bug caused by the old "bottom: calc(50svh + ...)" rule. */ @media (max-width:900px){ .entry.entry-safe.entry-v091.entry-v092{ grid-template-columns:1fr!important; grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important; min-height:var(--faia-entry-vh)!important; height:var(--faia-entry-vh)!important; --faia-logo-h:clamp(54px,8.5vh,82px); --faia-logo-safe:calc(var(--faia-logo-h) + 18px); } .entry.entry-safe.entry-v091.entry-v092 .entry-center{ width:min(82vw,510px)!important; top:max(7px,env(safe-area-inset-top))!important; } .entry.entry-safe.entry-v091.entry-v092 .portal{ position:relative!important; min-height:0!important; height:auto!important; display:flex!important; flex-direction:column!important; justify-content:flex-end!important; align-items:stretch!important; padding:10px 16px 14px!important; overflow:hidden!important; } .entry.entry-safe.entry-v091.entry-v092 .portal.music{ padding-top:var(--faia-logo-safe)!important; } .entry.entry-safe.entry-v091.entry-v092 .portal .portal-copy, .entry.entry-safe.entry-v091.entry-v092 .portal.music .portal-copy, .entry.entry-safe.entry-v091.entry-v092 .portal.food .portal-copy, .entry.entry-safe.entry-v091.entry-v092 .portal .portal-copy-music, .entry.entry-safe.entry-v091.entry-v092 .portal .portal-copy-food{ position:relative!important; inset:auto!important; top:auto!important; right:auto!important; bottom:auto!important; left:auto!important; width:100%!important; max-width:100%!important; max-height:none!important; margin:0!important; transform:none!important; } .entry.entry-safe.entry-v091.entry-v092 .portal h2{ margin:.22rem 0 .28rem!important; font-size:clamp(1.7rem,8.4vw,3.15rem)!important; line-height:.82!important; } .entry.entry-safe.entry-v091.entry-v092 .portal p{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; max-width:92%!important; margin:0!important; font-size:clamp(.69rem,2.35vw,.86rem)!important; line-height:1.18!important; } .entry.entry-safe.entry-v091.entry-v092 .portal .micro{ font-size:clamp(.48rem,1.8vw,.62rem)!important; } .entry.entry-safe.entry-v091.entry-v092 .portal .enter{ margin-top:.48rem!important; } } /* Small phones such as iPhone SE. */ @media (max-width:430px){ .entry.entry-safe.entry-v091.entry-v092{ --faia-logo-h:clamp(48px,7.8vh,66px); --faia-logo-safe:calc(var(--faia-logo-h) + 14px); } .entry.entry-safe.entry-v091.entry-v092 .portal{ padding-left:13px!important; padding-right:13px!important; padding-bottom:11px!important; } .entry.entry-safe.entry-v091.entry-v092 .portal h2{ font-size:clamp(1.45rem,7.9vw,2.25rem)!important; } .entry.entry-safe.entry-v091.entry-v092 .portal p{ font-size:.66rem!important; } .entry.entry-safe.entry-v091.entry-v092 .portal .enter{ font-size:.49rem!important; padding:.44rem .58rem!important; } } /* Extremely low landscape devices: we keep BOTH entry identities and CTAs readable; only the descriptive sentence is removed because it is secondary. */ @media (max-width:900px) and (max-height:520px){ .entry.entry-safe.entry-v091.entry-v092{ --faia-logo-h:38px; --faia-logo-safe:50px; } .entry.entry-safe.entry-v091.entry-v092 .entry-line{ display:none!important; } .entry.entry-safe.entry-v091.entry-v092 .portal p{ display:none!important; } .entry.entry-safe.entry-v091.entry-v092 .portal h2{ font-size:clamp(1rem,4.8vh,1.55rem)!important; line-height:.78!important; margin:.08rem 0 .12rem!important; } .entry.entry-safe.entry-v091.entry-v092 .portal .micro{ font-size:.42rem!important; } .entry.entry-safe.entry-v091.entry-v092 .portal .enter{ margin-top:.18rem!important; padding:.32rem .48rem!important; font-size:.42rem!important; } } /* Reduced motion keeps the logo visible, just without animation. */ @media (prefers-reduced-motion:reduce){ .entry.entry-safe.entry-v091.entry-v092 .entry-logo-mark, .entry.entry-safe.entry-v091.entry-v092 .entry-logo-shimmer{ animation:none!important; } } /* ========================= v0.9.3 – iOS SAFARI ENTRY FIX ========================= Root cause hardening: Safari/WebKit is no longer asked to render headings/paragraphs inside