:root{--bg:#080706;--bg2:#0e0a09;--panel:#110d0c;--text:#f2ece6;--muted:#a89c93;--wine:#651d28;--wine2:#8c2c39;--rose:#a6464d;--bronze:#a78667;--line:rgba(167,134,103,.22)} *{box-sizing:border-box}html{scroll-behavior:smooth}html,body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}body{min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.hidden{display:none!important}.app{min-height:100vh;background:radial-gradient(circle at 75% 0,rgba(92,25,31,.08),transparent 32%),var(--bg)} .topbar{position:sticky;top:0;z-index:50;height:82px;display:grid;grid-template-columns:230px 1fr 180px;align-items:center;padding:0 4vw;background:rgba(8,7,6,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.brand-word,.auth-brand{display:flex;align-items:center;gap:11px;font-family:Georgia,'Times New Roman',serif;letter-spacing:.18em}.brand-word{font-size:20px}.brand-v{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(166,70,77,.62);transform:rotate(45deg);font-size:25px;color:#d9c2b0;letter-spacing:0;background:linear-gradient(135deg,rgba(101,29,40,.45),rgba(15,10,9,.1))}.brand-v::first-letter{transform:rotate(-45deg)}.brand-word .brand-v,.auth-brand .brand-v{font-family:Georgia,serif}.nav{display:flex;justify-content:center;gap:4px;overflow:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav-item{border:0;border-bottom:1px solid transparent;background:transparent;color:#b8ada5;padding:12px 13px;white-space:nowrap}.nav-item:hover{color:#fff}.nav-item.active{color:#f3e7df;border-bottom-color:var(--rose);background:linear-gradient(180deg,transparent,rgba(101,29,40,.14))}.top-actions{display:flex;justify-content:flex-end;align-items:center;gap:9px}.search-btn,.logout-btn,.close-btn{border:0;background:transparent;color:#d4c6bc;font-size:23px;padding:8px}.user-chip{max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#8f8178;font-size:12px} .hero{position:relative;min-height:700px;overflow:hidden;border-bottom:1px solid var(--line)}.hero-image{position:absolute;inset:0 0 0 auto;width:58%;background:url('/assets/morgana-hero-v2.jpg') center 18%/cover no-repeat;filter:brightness(.66) saturate(.72) contrast(1.08)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#080706 0%,#080706 34%,rgba(8,7,6,.94) 43%,rgba(8,7,6,.35) 65%,rgba(8,7,6,.12) 82%),linear-gradient(0deg,#080706 0%,transparent 25%,rgba(8,7,6,.1) 80%,#080706 100%)}.hero-content{position:relative;z-index:2;width:min(690px,52vw);padding:100px 0 55px 6vw}.eyebrow,.section-kicker{font-size:12px;font-weight:700;letter-spacing:.34em;color:#b86168}.hero h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(52px,5.6vw,82px);line-height:.96;letter-spacing:-.035em;margin:18px 0 24px;max-width:680px}.hero p{max-width:550px;color:#b8aca3;font-size:18px;line-height:1.6}.hero-actions{display:flex;gap:12px;margin-top:30px}.primary,.secondary,.player-actions button{border-radius:3px;padding:14px 24px;color:#f4ece6}.primary{border:1px solid #8d3540;background:linear-gradient(120deg,#742431,#4d171f);box-shadow:0 12px 34px rgba(72,16,24,.24)}.secondary,.player-actions button{border:1px solid var(--line);background:rgba(13,10,9,.72)}.hero-featured{margin-top:54px}.hero-featured h2{font-family:Georgia,serif;font-weight:400;font-size:24px}.featured-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.feature-card{display:flex;align-items:center;gap:14px;min-height:105px;padding:14px;border:1px solid var(--line);background:rgba(15,11,10,.74);color:var(--text);text-align:left}.feature-icon{font-family:Georgia,serif;font-size:30px;color:#9e5b58}.feature-copy{display:flex;flex-direction:column;gap:5px}.feature-copy small,.card small{color:var(--muted)}.mini-badge,.badge{font-size:9px;letter-spacing:.18em;color:#c07778;font-weight:800} .catalog-section{padding:55px 5vw 62px;scroll-margin-top:90px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px}.section-head h2{font-family:Georgia,serif;font-weight:400;font-size:36px;margin:6px 0 0}.section-head>span{color:#80746c}.search-panel{margin-bottom:20px}.search-panel input{width:min(520px,100%);padding:14px 15px;background:#0e0b0a;border:1px solid var(--line);color:var(--text);outline:none}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:15px}.card{position:relative;min-height:190px;border:1px solid var(--line);background:#100c0b;color:var(--text);text-align:left;overflow:hidden}.card-bg{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,7,6,.98),rgba(8,7,6,.08)),radial-gradient(circle at 75% 20%,#4b1c22,#17100e 55%,#0b0807);background-size:cover;background-position:center}.card-content{position:relative;z-index:1;min-height:190px;padding:18px;display:flex;flex-direction:column;justify-content:end}.card h3{font-family:Georgia,serif;font-size:23px;font-weight:400;margin:6px 0}.empty-card{padding:24px;border:1px solid var(--line);color:#8d8178;background:#0d0a09}.category-strip{display:grid;grid-template-columns:repeat(4,1fr);padding:22px 5vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#0a0807}.category-strip button{display:flex;align-items:center;justify-content:center;gap:13px;padding:15px;border:0;border-right:1px solid var(--line);background:transparent;color:#a99b91;text-align:left}.category-strip button:last-child{border-right:0}.category-strip b{display:block;color:#c4a18b;font-family:Georgia,serif;font-size:15px;margin-bottom:4px}.category-strip small{color:#746961}.cat-icon{color:#93434b;font-size:25px} .player-modal{position:fixed;inset:0;z-index:100;background:rgba(5,4,3,.97);padding:28px;overflow:auto}.player-shell{max-width:1100px;margin:auto}.player-top{display:flex;justify-content:space-between;align-items:center}.player-top h2{font-family:Georgia,serif;font-size:34px;font-weight:400}video{width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--line)}.player-actions{display:flex;gap:10px;margin-top:12px}.player-note{color:var(--muted)}footer{display:flex;justify-content:space-between;padding:25px 5vw;border-top:1px solid var(--line);font-family:Georgia,serif;letter-spacing:.12em}.muted{color:#6f655e} .auth-body{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr;background:#080706;overflow:hidden}.auth-portrait{min-height:100vh;background:linear-gradient(90deg,transparent 60%,#080706 100%),linear-gradient(0deg,rgba(8,7,6,.35),transparent 40%),url('/assets/morgana-full-v2.png') center 12%/cover no-repeat;filter:brightness(.72) saturate(.68)}.auth-card{align-self:center;width:min(500px,86%);padding:48px 0;margin:auto}.auth-brand{font-size:24px;margin-bottom:58px}.auth-card h1{font-family:Georgia,serif;font-size:52px;font-weight:400;line-height:1;margin:15px 0}.auth-lead{color:var(--muted);margin:0 0 32px}.stack{display:grid;gap:17px}.stack label{display:grid;gap:8px;color:#c7bab1;font-size:13px}.stack input,.stack select,.stack textarea{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:2px;background:#0d0a09;color:var(--text);outline:none}.stack input:focus,.stack select:focus,.stack textarea:focus{border-color:#7d343d}.stack .primary{width:100%;margin-top:5px}.error,.success{padding:12px 14px;margin:14px 0;border:1px solid}.error{background:#251012;border-color:#633039}.success{background:#132018;border-color:#36533f}.auth-ornament{text-align:center;color:#6f3037;margin-top:30px} .admin-wrap{max-width:1180px;margin:auto;padding:38px 24px}.admin-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.admin-head h1{font-family:Georgia,serif;font-weight:400;font-size:40px;margin:6px 0}.admin-links{display:flex;gap:9px}.admin-links a{padding:10px 13px;border:1px solid var(--line)}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.admin-card{background:#0e0b0a;border:1px solid var(--line);padding:21px;margin-bottom:18px}.admin-card h2,.admin-card h3{font-family:Georgia,serif;font-weight:400}.admin-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 0;border-top:1px solid var(--line)}.admin-row small{display:block;color:#81756c;margin-top:4px}.row-actions{display:flex;gap:12px}.danger-link{color:#cf7378}.admin-card hr{border:0;border-top:1px solid var(--line);margin:22px 0} @media(max-width:900px){.topbar{grid-template-columns:150px 1fr 70px;padding:0 15px}.brand-word{font-size:14px}.brand-v{width:30px;height:30px;font-size:19px}.nav-item{padding:10px 8px;font-size:13px}.user-chip{display:none}.hero-image{width:66%}.hero-content{width:58vw;padding-left:5vw}.auth-body{grid-template-columns:1fr}.auth-portrait{position:fixed;inset:0;opacity:.28}.auth-card{position:relative;z-index:2;background:linear-gradient(90deg,rgba(8,7,6,.92),rgba(8,7,6,.72));padding:35px}.admin-grid{grid-template-columns:1fr}} @media(max-width:650px){.topbar{height:auto;min-height:76px;grid-template-columns:115px 1fr 50px}.brand-word span:last-child{display:none}.nav{justify-content:flex-start}.nav-item{font-size:12px;padding:9px 6px}.hero{min-height:680px}.hero-image{width:100%;opacity:.58;background-position:58% 12%}.hero-shade{background:linear-gradient(90deg,#080706 0%,rgba(8,7,6,.92) 34%,rgba(8,7,6,.45) 100%),linear-gradient(0deg,#080706 0%,transparent 50%,rgba(8,7,6,.4) 100%)}.hero-content{width:100%;padding:70px 20px 40px}.hero h1{font-size:48px;max-width:430px}.hero p{font-size:16px;max-width:400px}.featured-grid{grid-template-columns:1fr}.catalog-section{padding:40px 16px}.grid{grid-template-columns:1fr 1fr}.category-strip{grid-template-columns:1fr 1fr;padding:12px}.category-strip button:nth-child(2){border-right:0}.category-strip button:nth-child(-n+2){border-bottom:1px solid var(--line)}.auth-card{width:92%;padding:28px}.auth-card h1{font-size:43px}.admin-head{align-items:flex-start;flex-direction:column;gap:15px}} @media(max-width:430px){.grid{grid-template-columns:1fr}.category-strip{grid-template-columns:1fr}.category-strip button{border-right:0;border-bottom:1px solid var(--line);justify-content:flex-start}} /* ========================================================= /* ========================================================= VALENNE MOBILE FINAL — MORGANA FUNDO CONTÍNUO ========================================================= */ @media (orientation: portrait) and (max-width:1100px){ .auth-body{ min-height:100dvh !important; display:block !important; position:relative !important; padding:0 !important; overflow-x:hidden !important; background:#050403 !important; } /* Morgana ocupa a página inteira */ .auth-portrait{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-height:1500px !important; opacity:1 !important; background: linear-gradient( 180deg, rgba(5,4,3,.05) 0%, rgba(5,4,3,.12) 20%, rgba(5,4,3,.26) 42%, rgba(5,4,3,.52) 68%, rgba(5,4,3,.76) 100% ), url('/assets/morgana-full-v2.png') center top / 100% auto no-repeat !important; } /* Card sobre o corpo */ .auth-card{ position:relative !important; z-index:5 !important; width:min(620px,94vw) !important; margin:34vh auto 220px !important; padding:24px 24px 22px !important; background: linear-gradient( 180deg, rgba(7,5,5,.88), rgba(5,4,3,.94) ) !important; border:1px solid rgba(111,48,55,.34) !important; box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(110,42,49,.08) inset !important; backdrop-filter:blur(4px) !important; } .auth-brand{ margin-bottom:18px !important; font-size:18px !important; } .auth-card .eyebrow{ margin-bottom:7px !important; font-size:10px !important; letter-spacing:.25em !important; } .auth-card h1{ margin:6px 0 8px !important; font-size:clamp(38px,10vw,50px) !important; line-height:.92 !important; } .auth-lead{ margin-bottom:18px !important; font-size:14px !important; } .stack{ gap:12px !important; } .stack label{ gap:6px !important; font-size:13px !important; } .stack input{ min-height:48px !important; padding:12px 14px !important; font-size:15px !important; } .stack .primary{ min-height:50px !important; margin-top:2px !important; font-size:16px !important; } .auth-ornament{ margin-top:12px !important; } } /* Celulares menores */ @media (orientation: portrait) and (max-width:430px){ .auth-portrait{ min-height:1450px !important; background: linear-gradient( 180deg, rgba(5,4,3,.04) 0%, rgba(5,4,3,.12) 20%, rgba(5,4,3,.30) 45%, rgba(5,4,3,.58) 72%, rgba(5,4,3,.82) 100% ), url('/assets/morgana-full-v2.png') center top / 100% auto no-repeat !important; } .auth-card{ width:94vw !important; margin:32vh auto 190px !important; padding:22px 18px 20px !important; } .auth-card h1{ font-size:40px !important; } } /* ========================================================= VALENNE — MOBILE FINAL / MORGANA FUNDO INTEIRO ========================================================= */ @media (max-width:700px){ html, body{ margin:0 !important; padding:0 !important; width:100% !important; min-height:100% !important; background:#050404 !important; } .auth-body{ position:relative !important; display:flex !important; align-items:flex-start !important; justify-content:center !important; width:100% !important; min-height:100dvh !important; padding:500px 22px 80px !important; box-sizing:border-box !important; overflow:visible !important; background:#050404 !important; } /* Morgana ocupa o fundo inteiro */ .auth-portrait{ display:block !important; position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-height:100% !important; opacity:1 !important; background: linear-gradient( 180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.10) 28%, rgba(0,0,0,.35) 48%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.05) 100% ), url('/assets/morgana-full-v2.png') center top / auto 100% no-repeat !important; z-index:0 !important; pointer-events:none !important; } /* Login sobre a Morgana */ .auth-card{ position:relative !important; z-index:2 !important; width:100% !important; max-width:680px !important; margin:0 auto !important; padding:28px 36px 34px !important; box-sizing:border-box !important; background:rgba(5,4,4,.88) !important; border:1px solid rgba(137,45,60,.42) !important; backdrop-filter:blur(2px) !important; -webkit-backdrop-filter:blur(2px) !important; } } /* S25 Ultra e celulares menores */ @media (max-width:430px){ .auth-body{ padding: clamp(390px,55vh,500px) 22px 70px !important; } .auth-card{ padding:26px 36px 32px !important; } .auth-brand{ margin-bottom:28px !important; } .auth-card h1{ font-size:clamp(42px,12vw,58px) !important; line-height:.95 !important; } .auth-lead{ margin-bottom:26px !important; } .stack{ gap:16px !important; } .stack input{ min-height:54px !important; } .stack .primary{ min-height:54px !important; } } /* ========================================================= VALENNE — MOBILE FINAL / MORGANA FUNDO INTEIRO ========================================================= */ @media (max-width:700px){ html, body{ margin:0 !important; padding:0 !important; width:100% !important; min-height:100% !important; background:#050404 !important; } .auth-body{ position:relative !important; display:flex !important; align-items:flex-start !important; justify-content:center !important; width:100% !important; min-height:100dvh !important; padding:500px 22px 80px !important; box-sizing:border-box !important; overflow:visible !important; background:#050404 !important; } /* Morgana ocupa o fundo inteiro */ .auth-portrait{ display:block !important; position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; min-height:100% !important; opacity:1 !important; background: linear-gradient( 180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.10) 28%, rgba(0,0,0,.35) 48%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.05) 100% ), url('/assets/morgana-full-v2.png') center top / auto 100% no-repeat !important; z-index:0 !important; pointer-events:none !important; } /* Login sobre a Morgana */ .auth-card{ position:relative !important; z-index:2 !important; width:100% !important; max-width:680px !important; margin:0 auto !important; padding:28px 36px 34px !important; box-sizing:border-box !important; background:rgba(5,4,4,.88) !important; border:1px solid rgba(137,45,60,.42) !important; backdrop-filter:blur(2px) !important; -webkit-backdrop-filter:blur(2px) !important; } } /* S25 Ultra e celulares menores */ @media (max-width:430px){ .auth-body{ padding: clamp(390px,55vh,500px) 22px 70px !important; } .auth-card{ padding:26px 36px 32px !important; } .auth-brand{ margin-bottom:28px !important; } .auth-card h1{ font-size:clamp(42px,12vw,58px) !important; line-height:.95 !important; } .auth-lead{ margin-bottom:26px !important; } .stack{ gap:16px !important; } .stack input{ min-height:54px !important; } .stack .primary{ min-height:54px !important; } } /* ========================================================= VALENNE v5.3 — AJUSTE FINAL MOBILE ========================================================= */ @media (max-width:700px){ .auth-body{ /* sobe o cartão sem alterar a Morgana */ padding-top:360px !important; padding-bottom:70px !important; /* espaço suficiente para mostrar o restante da foto */ min-height:1500px !important; } .auth-portrait{ position:absolute !important; inset:0 !important; width:100% !important; height:1500px !important; background: linear-gradient( 180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.05) 24%, rgba(0,0,0,.20) 45%, rgba(0,0,0,.10) 70%, rgba(0,0,0,.25) 100% ), url('/assets/morgana-full-v2.png') center top / auto 100% no-repeat !important; } .auth-card{ position:relative !important; z-index:2 !important; background:rgba(5,4,4,.86) !important; } } @media (max-width:430px){ .auth-body{ padding-top:360px !important; min-height:1500px !important; } .auth-portrait{ height:1500px !important; } } /* ========================================================= VALENNE v5.4 — MORGANA VISÍVEL ATRÁS DO LOGIN ========================================================= */ @media (max-width:700px){ .auth-body{ min-height:1500px !important; padding-top:360px !important; padding-bottom:70px !important; background:#050403 !important; } .auth-portrait{ position:absolute !important; inset:0 !important; width:100% !important; height:1500px !important; min-height:1500px !important; opacity:1 !important; background: linear-gradient( 180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.06) 24%, rgba(0,0,0,.10) 45%, rgba(0,0,0,.08) 72%, rgba(0,0,0,.18) 100% ), url('/assets/morgana-full-v2.png') center top / auto 100% no-repeat !important; z-index:0 !important; } .auth-card{ position:relative !important; z-index:2 !important; /* Agora o corpo da Morgana permanece visível através do painel. */ background: linear-gradient( 180deg, rgba(7,5,5,.62), rgba(5,4,4,.72) ) !important; border:1px solid rgba(137,45,60,.55) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow: 0 20px 50px rgba(0,0,0,.38), inset 0 0 45px rgba(0,0,0,.10) !important; } /* campos continuam legíveis */ .auth-card input{ background:rgba(8,5,5,.74) !important; } .auth-card .primary{ background: linear-gradient( 100deg, rgba(151,41,59,.96), rgba(112,28,43,.96) ) !important; } } /* ========================================================= VALENNE v5.4 — MORGANA VISÍVEL ATRÁS DO LOGIN ========================================================= */ @media (max-width:700px){ .auth-body{ min-height:1500px !important; padding-top:360px !important; padding-bottom:70px !important; background:#050403 !important; } .auth-portrait{ position:absolute !important; inset:0 !important; width:100% !important; height:1500px !important; min-height:1500px !important; opacity:1 !important; background: linear-gradient( 180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.06) 24%, rgba(0,0,0,.10) 45%, rgba(0,0,0,.08) 72%, rgba(0,0,0,.18) 100% ), url('/assets/morgana-full-v2.png') center top / auto 100% no-repeat !important; z-index:0 !important; } .auth-card{ position:relative !important; z-index:2 !important; /* Agora o corpo da Morgana permanece visível através do painel. */ background: linear-gradient( 180deg, rgba(7,5,5,.62), rgba(5,4,4,.72) ) !important; border:1px solid rgba(137,45,60,.55) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow: 0 20px 50px rgba(0,0,0,.38), inset 0 0 45px rgba(0,0,0,.10) !important; } /* campos continuam legíveis */ .auth-card input{ background:rgba(8,5,5,.74) !important; } .auth-card .primary{ background: linear-gradient( 100deg, rgba(151,41,59,.96), rgba(112,28,43,.96) ) !important; } } /* VALENNE v5.5 — posição final do login no celular */ @media (max-width:700px){ .auth-body{ padding-top:250px !important; } } @media (max-width:430px){ .auth-body{ padding-top:250px !important; } } /* VALENNE v5.6 — card sobre o corset */ @media (max-width:700px){ .auth-body{ padding-top:140px !important; } } @media (max-width:430px){ .auth-body{ padding-top:140px !important; } } /* VALENNE v5.7 — posição definitiva do card mobile */ @media (max-width:700px){ .auth-card{ transform:translateY(-180px) !important; margin-bottom:-180px !important; } } /* VALENNE v5.7 — posição definitiva do card mobile */ @media (max-width:700px){ .auth-card{ transform:translateY(-180px) !important; margin-bottom:-180px !important; } } /* ========================================================= VALENNE — INTERFACE MOBILE FINAL Corrige menu, sobreposição e proporções ========================================================= */ @media (max-width:700px){ /* ----------------------------------------- CABEÇALHO ----------------------------------------- */ .topbar{ /* no celular deixa de ficar cobrindo o conteúdo */ position:relative !important; top:auto !important; width:100% !important; height:76px !important; min-height:76px !important; display:grid !important; grid-template-columns:58px minmax(0,1fr) 64px !important; align-items:center !important; gap:8px !important; padding:0 12px !important; background:rgba(5,4,4,.98) !important; border-bottom:1px solid rgba(111,48,55,.36) !important; overflow:hidden !important; } /* símbolo V */ .brand{ width:54px !important; max-width:54px !important; height:60px !important; flex:none !important; overflow:hidden !important; } .brand img{ width:54px !important; height:54px !important; object-fit:contain !important; object-position:left center !important; } /* menu horizontal rolável */ .nav{ width:100% !important; min-width:0 !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:3px !important; overflow-x:auto !important; overflow-y:hidden !important; scrollbar-width:none !important; -webkit-overflow-scrolling:touch !important; padding:0 2px !important; } .nav::-webkit-scrollbar{ display:none !important; } .nav-item{ flex:0 0 auto !important; padding:10px 11px !important; font-size:14px !important; line-height:1 !important; white-space:nowrap !important; border-radius:0 !important; } .nav-item.active{ background:transparent !important; border:0 !important; border-bottom:1px solid #a54453 !important; box-shadow:none !important; } /* busca / sair */ .top-actions{ width:64px !important; display:flex !important; justify-content:flex-end !important; gap:2px !important; } .search-btn, .logout-btn{ width:30px !important; height:36px !important; font-size:19px !important; } /* ----------------------------------------- HERO ----------------------------------------- */ .hero{ min-height:auto !important; overflow:hidden !important; } .hero-image{ width:100% !important; right:-20% !important; opacity:.50 !important; background-position:52% top !important; } .hero-content{ width:100% !important; max-width:none !important; padding: 72px 20px 52px !important; } .eyebrow{ font-size:12px !important; letter-spacing:.35em !important; } .hero h1{ width:100% !important; max-width:620px !important; margin:18px 0 22px !important; font-size:clamp(45px,12vw,62px) !important; line-height:.94 !important; letter-spacing:-.035em !important; text-wrap:balance !important; } .hero p{ max-width:620px !important; font-size:17px !important; line-height:1.5 !important; } /* ----------------------------------------- BOTÕES DA HOME ----------------------------------------- */ .hero-actions{ width:100% !important; display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px !important; margin-top:28px !important; } .hero-actions .primary, .hero-actions .secondary{ width:100% !important; padding:15px 10px !important; font-size:15px !important; white-space:nowrap !important; } /* ----------------------------------------- ESCOLHAS DA NOITE ----------------------------------------- */ .hero-featured{ margin-top:54px !important; } .hero-featured h2{ font-size:34px !important; line-height:1.05 !important; } .featured-grid{ grid-template-columns:1fr !important; gap:14px !important; } .feature-card{ min-height:112px !important; padding:16px !important; } /* ----------------------------------------- CATÁLOGO / DESTAQUES ----------------------------------------- */ .catalog-section{ padding:42px 16px !important; scroll-margin-top:0 !important; } .section-head{ align-items:flex-end !important; gap:12px !important; } .section-head h2{ font-size:42px !important; line-height:1 !important; } .section-head span{ white-space:nowrap !important; font-size:14px !important; } .grid{ grid-template-columns:1fr !important; gap:14px !important; } .card, .card-content{ min-height:190px !important; } .card-content{ padding:22px !important; } /* ----------------------------------------- FAIXA AO VIVO / FILMES / SÉRIES / RÁDIO ----------------------------------------- */ .category-strip{ grid-template-columns:1fr !important; padding:16px 22px !important; } .category-strip button{ width:100% !important; justify-content:flex-start !important; padding:18px 10px !important; border-right:0 !important; border-bottom:1px solid rgba(95,67,57,.35) !important; } .category-strip button:last-child{ border-bottom:0 !important; } /* ----------------------------------------- RODAPÉ ----------------------------------------- */ footer{ padding:26px 20px !important; align-items:center !important; gap:20px !important; font-size:14px !important; } } /* celular realmente estreito */ @media (max-width:390px){ .topbar{ grid-template-columns:48px minmax(0,1fr) 58px !important; padding:0 8px !important; } .brand, .brand img{ width:46px !important; max-width:46px !important; } .nav-item{ padding:10px 9px !important; font-size:13px !important; } .hero h1{ font-size:43px !important; } .hero-actions{ grid-template-columns:1fr !important; } } /* ========================================================= VALENNE — DESKTOP/TABLET EM BLOCOS DE TELA ========================================================= */ @media (min-width:701px){ html{ scroll-behavior:smooth; scroll-snap-type:y proximity; } body{ scroll-snap-type:y proximity; } .hero{ min-height:calc(100vh - 92px) !important; scroll-snap-align:start; scroll-snap-stop:normal; } .catalog-section{ min-height:calc(100vh - 92px) !important; scroll-snap-align:start; scroll-snap-stop:normal; display:flex; flex-direction:column; justify-content:flex-start; padding-top:52px !important; padding-bottom:52px !important; } .category-strip{ scroll-snap-align:start; } footer{ scroll-snap-align:end; } } /* ========================================================= VALENNE 6.2 — DUAS TELAS PERFEITAS Tablet + Desktop ========================================================= */ @media (min-width:701px){ /* Cabeçalho com altura fixa conhecida */ .topbar{ height:92px !important; min-height:92px !important; } /* ===================================================== TELA 1 — HERO + ESCOLHAS DA NOITE ===================================================== */ .hero{ height:calc(100dvh - 92px) !important; min-height:0 !important; max-height:none !important; overflow:hidden !important; scroll-snap-align:start !important; scroll-margin-top:92px !important; } .hero-content{ height:100% !important; min-height:0 !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; width:min(690px,52vw) !important; padding: clamp(28px,4vh,52px) 0 clamp(18px,3vh,30px) 5vw !important; } .eyebrow{ flex:0 0 auto !important; } .hero h1{ flex:0 0 auto !important; margin: clamp(8px,1.6vh,16px) 0 clamp(10px,1.8vh,18px) !important; font-size:clamp(44px,4.7vw,67px) !important; line-height:.91 !important; } .hero p{ flex:0 0 auto !important; font-size:clamp(14px,1.45vw,18px) !important; line-height:1.42 !important; max-width:610px !important; } .hero-actions{ flex:0 0 auto !important; margin-top:clamp(14px,2vh,22px) !important; gap:12px !important; } .hero-actions .primary, .hero-actions .secondary{ padding: clamp(11px,1.5vh,14px) 22px !important; font-size:15px !important; } /* Empurra "Escolhas da noite" para o fundo da primeira tela */ .hero-featured{ margin-top:auto !important; padding-top:clamp(14px,2vh,24px) !important; } .hero-featured h2{ margin:0 0 12px !important; font-size:clamp(25px,2.5vw,34px) !important; line-height:1 !important; } .featured-grid{ grid-template-columns:1fr 1fr !important; gap:12px !important; } .feature-card{ min-height:84px !important; padding:11px 13px !important; gap:12px !important; } .feature-icon{ width:50px !important; height:50px !important; flex-basis:50px !important; font-size:25px !important; } .feature-copy{ gap:3px !important; } .feature-copy strong{ font-size:15px !important; } .feature-copy small{ font-size:11px !important; line-height:1.2 !important; } /* ===================================================== TELA 2 — CATÁLOGO ===================================================== */ .catalog-section{ min-height:calc(100dvh - 92px) !important; box-sizing:border-box !important; padding: clamp(34px,5vh,54px) 5vw 36px !important; scroll-margin-top:92px !important; scroll-snap-align:start !important; } .section-head{ margin-bottom:22px !important; } .section-head h2{ font-size:clamp(34px,3.5vw,48px) !important; } /* Cards do catálogo mais proporcionais à tela */ .catalog-section .grid{ grid-template-columns: repeat(auto-fill,minmax(230px,1fr)) !important; gap:16px !important; } .catalog-section .card, .catalog-section .card-content{ min-height:180px !important; } /* ===================================================== ENCAIXE DA ROLAGEM ===================================================== */ html{ scroll-behavior:smooth !important; scroll-snap-type:y proximity !important; } } /* Tablet paisagem: aperta um pouco mais para garantir encaixe */ @media (min-width:701px) and (max-width:1100px){ .hero-content{ width:54vw !important; padding-top:26px !important; padding-bottom:18px !important; } .hero h1{ font-size:clamp(42px,5.2vw,58px) !important; } .hero p{ font-size:15px !important; } .hero-actions{ margin-top:14px !important; } .hero-featured{ padding-top:12px !important; } .hero-featured h2{ font-size:25px !important; margin-bottom:10px !important; } .feature-card{ min-height:76px !important; padding:9px 11px !important; } .feature-icon{ width:44px !important; height:44px !important; flex-basis:44px !important; } } /* ========================================================= VALENNE 6.2 — DUAS TELAS PERFEITAS Tablet + Desktop ========================================================= */ @media (min-width:701px){ /* Cabeçalho com altura fixa conhecida */ .topbar{ height:92px !important; min-height:92px !important; } /* ===================================================== TELA 1 — HERO + ESCOLHAS DA NOITE ===================================================== */ .hero{ height:calc(100dvh - 92px) !important; min-height:0 !important; max-height:none !important; overflow:hidden !important; scroll-snap-align:start !important; scroll-margin-top:92px !important; } .hero-content{ height:100% !important; min-height:0 !important; box-sizing:border-box !important; display:flex !important; flex-direction:column !important; width:min(690px,52vw) !important; padding: clamp(28px,4vh,52px) 0 clamp(18px,3vh,30px) 5vw !important; } .eyebrow{ flex:0 0 auto !important; } .hero h1{ flex:0 0 auto !important; margin: clamp(8px,1.6vh,16px) 0 clamp(10px,1.8vh,18px) !important; font-size:clamp(44px,4.7vw,67px) !important; line-height:.91 !important; } .hero p{ flex:0 0 auto !important; font-size:clamp(14px,1.45vw,18px) !important; line-height:1.42 !important; max-width:610px !important; } .hero-actions{ flex:0 0 auto !important; margin-top:clamp(14px,2vh,22px) !important; gap:12px !important; } .hero-actions .primary, .hero-actions .secondary{ padding: clamp(11px,1.5vh,14px) 22px !important; font-size:15px !important; } /* Empurra "Escolhas da noite" para o fundo da primeira tela */ .hero-featured{ margin-top:auto !important; padding-top:clamp(14px,2vh,24px) !important; } .hero-featured h2{ margin:0 0 12px !important; font-size:clamp(25px,2.5vw,34px) !important; line-height:1 !important; } .featured-grid{ grid-template-columns:1fr 1fr !important; gap:12px !important; } .feature-card{ min-height:84px !important; padding:11px 13px !important; gap:12px !important; } .feature-icon{ width:50px !important; height:50px !important; flex-basis:50px !important; font-size:25px !important; } .feature-copy{ gap:3px !important; } .feature-copy strong{ font-size:15px !important; } .feature-copy small{ font-size:11px !important; line-height:1.2 !important; } /* ===================================================== TELA 2 — CATÁLOGO ===================================================== */ .catalog-section{ min-height:calc(100dvh - 92px) !important; box-sizing:border-box !important; padding: clamp(34px,5vh,54px) 5vw 36px !important; scroll-margin-top:92px !important; scroll-snap-align:start !important; } .section-head{ margin-bottom:22px !important; } .section-head h2{ font-size:clamp(34px,3.5vw,48px) !important; } /* Cards do catálogo mais proporcionais à tela */ .catalog-section .grid{ grid-template-columns: repeat(auto-fill,minmax(230px,1fr)) !important; gap:16px !important; } .catalog-section .card, .catalog-section .card-content{ min-height:180px !important; } /* ===================================================== ENCAIXE DA ROLAGEM ===================================================== */ html{ scroll-behavior:smooth !important; scroll-snap-type:y proximity !important; } } /* Tablet paisagem: aperta um pouco mais para garantir encaixe */ @media (min-width:701px) and (max-width:1100px){ .hero-content{ width:54vw !important; padding-top:26px !important; padding-bottom:18px !important; } .hero h1{ font-size:clamp(42px,5.2vw,58px) !important; } .hero p{ font-size:15px !important; } .hero-actions{ margin-top:14px !important; } .hero-featured{ padding-top:12px !important; } .hero-featured h2{ font-size:25px !important; margin-bottom:10px !important; } .feature-card{ min-height:76px !important; padding:9px 11px !important; } .feature-icon{ width:44px !important; height:44px !important; flex-basis:44px !important; } } /* ========================================================= VALENNE 6.3 — HERO FINAL Morgana 3/4 + remove Escolhas da noite ========================================================= */ @media (min-width:701px){ /* Remove completamente Escolhas da noite do hero */ .hero-featured{ display:none !important; } /* Morgana em enquadramento 3/4 */ .hero-image{ width:54% !important; right:0 !important; top:0 !important; height:100% !important; opacity:1 !important; background: url('/assets/morgana-full-v2.png') right 12% / auto 118% no-repeat !important; filter: brightness(.76) saturate(.82) contrast(1.05) !important; } /* Gradiente para integrar a personagem ao texto */ .hero-shade{ background: linear-gradient( 90deg, #050403 0%, #050403 33%, rgba(5,4,3,.94) 42%, rgba(5,4,3,.58) 56%, rgba(5,4,3,.14) 76%, rgba(5,4,3,.20) 100% ), linear-gradient( 0deg, #050403 0%, transparent 14%, transparent 88%, rgba(5,4,3,.15) 100% ) !important; } /* Como saiu Escolhas da noite, centraliza melhor o conteúdo */ .hero-content{ justify-content:center !important; padding-top:20px !important; padding-bottom:20px !important; } .hero-actions{ margin-top:24px !important; } } /* Tablet paisagem */ @media (min-width:701px) and (max-width:1100px){ .hero-image{ width:53% !important; background: url('/assets/morgana-full-v2.png') right 10% / auto 112% no-repeat !important; } .hero-content{ width:52% !important; } } /* VALENNE 6.3 — somente enquadramento da Morgana */ @media (min-width:701px){ .hero-image{ width:59% !important; right:0 !important; background-image:url('/assets/morgana-hero-v2.jpg') !important; background-size:cover !important; /* recua o enquadramento para mostrar rosto + peito */ background-position:center 30% !important; } } @media (min-width:701px) and (max-width:1100px){ .hero-image{ width:58% !important; background-size:cover !important; background-position:center 32% !important; } } /* ========================================================= VALENNE — ENQUADRAMENTO MORGANA TABLET / DESKTOP Menos zoom: testa até busto ========================================================= */ @media (min-width:701px){ .hero{ background-size:auto 105% !important; background-position:right 38% top 10% !important; background-repeat:no-repeat !important; } } /* ========================================================= VALENNE — ENQUADRAMENTO MORGANA TABLET / DESKTOP Menos zoom: testa até busto ========================================================= */ @media (min-width:701px){ .hero{ background-size:auto 105% !important; background-position:right 38% top 10% !important; background-repeat:no-repeat !important; } } /* ========================================================= VALENNE 6.4 — ENQUADRAMENTO CORRETO DA MORGANA Tablet/Desktop: testa até busto ========================================================= */ @media (min-width:701px){ .hero-image{ width:59% !important; right:0 !important; top:0 !important; height:100% !important; background-image:url('/assets/morgana-hero-v2.jpg') !important; /* MENOS ZOOM */ background-size:auto 88% !important; /* centraliza rosto + peito */ background-position:right 46% center !important; background-repeat:no-repeat !important; } } /* Tablet */ @media (min-width:701px) and (max-width:1100px){ .hero-image{ width:58% !important; background-size:auto 86% !important; background-position:right 45% center !important; } } /* ========================================================= VALENNE 6.4 — ENQUADRAMENTO CORRETO DA MORGANA Tablet/Desktop: testa até busto ========================================================= */ @media (min-width:701px){ .hero-image{ width:59% !important; right:0 !important; top:0 !important; height:100% !important; background-image:url('/assets/morgana-hero-v2.jpg') !important; /* MENOS ZOOM */ background-size:auto 88% !important; /* centraliza rosto + peito */ background-position:right 46% center !important; background-repeat:no-repeat !important; } } /* Tablet */ @media (min-width:701px) and (max-width:1100px){ .hero-image{ width:58% !important; background-size:auto 86% !important; background-position:right 45% center !important; } } /* VALENNE 6.5 — ajuste fino Morgana */ @media (min-width:1101px){ .hero-image{ background-size:auto 98% !important; background-position:right 44% center !important; } } @media (min-width:701px) and (max-width:1100px){ .hero-image{ background-size:auto 96% !important; background-position:right 44% center !important; } } /* VALENNE 6.6 — Morgana enquadramento intermediário */ @media (min-width:701px){ .hero-image{ background-size:auto 92% !important; background-position:right 44% center !important; } } /* ========================================================= VALENNE 6.7 — MORGANA ENQUADRAMENTO FINAL Mostra cabelo + rosto + peito + começo do corset ========================================================= */ @media (min-width:701px){ .hero-image{ width:56% !important; height:100% !important; right:0 !important; top:0 !important; background-image:url('/assets/morgana-hero-v2.jpg') !important; /* NÃO usa cover. A imagem passa a caber inteira na altura do hero. */ background-size:auto 100% !important; background-position:right center !important; background-repeat:no-repeat !important; opacity:1 !important; } } /* Tablet paisagem */ @media (min-width:701px) and (max-width:1100px){ .hero-image{ width:55% !important; background-size:auto 100% !important; background-position:right center !important; } } /* ========================================================= VALENNE 6.8 — VOLTA AO ESTILO ANTIGO Mesmo visual, só com um pouco menos de zoom ========================================================= */ @media (min-width:701px){ .hero-image{ width:61% !important; height:100% !important; right:-2% !important; top:0 !important; background-image:url('/assets/morgana-hero-v2.jpg') !important; /* estilo antigo */ background-size:cover !important; /* só afasta um pouco o enquadramento */ background-position:58% 34% !important; background-repeat:no-repeat !important; opacity:1 !important; filter: brightness(.78) saturate(.90) contrast(1.03) !important; } } /* Tablet paisagem */ @media (min-width:701px) and (max-width:1100px){ .hero-image{ width:60% !important; right:-2% !important; background-size:cover !important; background-position:58% 36% !important; } } /* TESTE ZOOM MORGANA — PASSO 1 */ @media (min-width:701px){ .hero-image{ background-size:92% auto !important; background-position:90% 35% !important; background-repeat:no-repeat !important; } } /* TESTE ZOOM MORGANA — PASSO 2 */ @media (min-width:701px){ .hero-image{ background-size:88% auto !important; background-position:90% 35% !important; } } /* TESTE ZOOM MORGANA — 75% */ @media (min-width:701px){ .hero-image{ background-size:75% auto !important; background-position:90% 35% !important; background-repeat:no-repeat !important; } } /* TESTE ZOOM MORGANA — 65% */ @media (min-width:701px){ .hero-image{ background-size:65% auto !important; background-position:90% 35% !important; background-repeat:no-repeat !important; } } /* TESTE ZOOM MORGANA — 58% */ @media (min-width:701px){ .hero-image{ background-size:58% auto !important; background-position:90% 35% !important; background-repeat:no-repeat !important; } } /* MORGANA — TESTE 50% + POSIÇÃO */ @media (min-width:701px){ .hero-image{ background-size:50% auto !important; background-position:78% 35% !important; background-repeat:no-repeat !important; } } /* ========================================================= VALENNE — HERO CINEMATOGRÁFICO Morgana 50% + integração sem bordas ========================================================= */ @media (min-width:701px){ .hero-image{ width:62% !important; right:-1% !important; top:0 !important; height:100% !important; background-image:url('/assets/morgana-hero-v2.jpg') !important; /* tamanho já aprovado */ background-size:50% auto !important; /* aproxima Morgana do final do texto */ background-position:72% 35% !important; background-repeat:no-repeat !important; opacity:1 !important; /* Faz a fotografia desaparecer suavemente nas bordas, dando aparência de recorte/transparência. */ -webkit-mask-image: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,.25) 8%, #000 22%, #000 91%, transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,.25) 8%, #000 22%, #000 91%, transparent 100% ); filter: brightness(.86) saturate(.92) contrast(1.04) !important; } /* Degradê geral unindo texto + Morgana. Mais transparente no lado direito. */ .hero-shade{ background: linear-gradient( 90deg, #050403 0%, #050403 27%, rgba(5,4,3,.92) 38%, rgba(5,4,3,.48) 52%, rgba(5,4,3,.08) 70%, rgba(5,4,3,.05) 100% ), linear-gradient( 0deg, #050403 0%, transparent 12%, transparent 90%, rgba(5,4,3,.15) 100% ) !important; } } /* ========================================================= VALENNE — HERO FINAL Estética cinematográfica + foto oficial Morgana ========================================================= */ @media (min-width:701px){ .hero{ position:relative !important; overflow:hidden !important; background: radial-gradient( circle at 62% 45%, rgba(105,20,31,.20), transparent 38% ), linear-gradient( 90deg, #050303 0%, #080404 52%, #050303 100% ) !important; } .hero-image{ position:absolute !important; top:0 !important; right:0 !important; width:58% !important; height:100% !important; background-image: url('/assets/morgana-hero-final.jpg') !important; /* mostra rosto + peito + corset */ background-size:auto 112% !important; /* aproxima a Morgana do texto */ background-position: right 8% center !important; background-repeat:no-repeat !important; opacity:1 !important; filter: brightness(.82) contrast(1.08) saturate(.92) !important; /* dissolve a borda esquerda da foto */ -webkit-mask-image: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,.25) 8%, #000 25%, #000 100% ) !important; mask-image: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,.25) 8%, #000 25%, #000 100% ) !important; } .hero-shade{ position:absolute !important; inset:0 !important; background: linear-gradient( 90deg, #050303 0%, #050303 29%, rgba(5,3,3,.97) 37%, rgba(5,3,3,.74) 48%, rgba(5,3,3,.28) 61%, rgba(5,3,3,.05) 78%, rgba(5,3,3,.12) 100% ) !important; pointer-events:none !important; } .hero-content{ position:relative !important; z-index:3 !important; width:52% !important; max-width:700px !important; } .hero h1{ text-shadow: 0 2px 18px rgba(0,0,0,.34) !important; } .primary{ background: linear-gradient( 105deg, #a32238, #7e192d 72%, #52101e ) !important; border-color:#b73b4e !important; box-shadow: 0 8px 28px rgba(139,25,45,.24) !important; } } /* Tablet paisagem */ @media (min-width:701px) and (max-width:1100px){ .hero-image{ width:57% !important; background-size:auto 108% !important; background-position:right 5% center !important; } .hero-content{ width:51% !important; } } /* ========================================================= VALENNE — HERO FINAL Estética cinematográfica + foto oficial Morgana ========================================================= */ @media (min-width:701px){ .hero{ position:relative !important; overflow:hidden !important; background: radial-gradient( circle at 62% 45%, rgba(105,20,31,.20), transparent 38% ), linear-gradient( 90deg, #050303 0%, #080404 52%, #050303 100% ) !important; } .hero-image{ position:absolute !important; top:0 !important; right:0 !important; width:58% !important; height:100% !important; background-image: url('/assets/morgana-hero-final.jpg') !important; /* mostra rosto + peito + corset */ background-size:auto 112% !important; /* aproxima a Morgana do texto */ background-position: right 8% center !important; background-repeat:no-repeat !important; opacity:1 !important; filter: brightness(.82) contrast(1.08) saturate(.92) !important; /* dissolve a borda esquerda da foto */ -webkit-mask-image: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,.25) 8%, #000 25%, #000 100% ) !important; mask-image: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,.25) 8%, #000 25%, #000 100% ) !important; } .hero-shade{ position:absolute !important; inset:0 !important; background: linear-gradient( 90deg, #050303 0%, #050303 29%, rgba(5,3,3,.97) 37%, rgba(5,3,3,.74) 48%, rgba(5,3,3,.28) 61%, rgba(5,3,3,.05) 78%, rgba(5,3,3,.12) 100% ) !important; pointer-events:none !important; } .hero-content{ position:relative !important; z-index:3 !important; width:52% !important; max-width:700px !important; } .hero h1{ text-shadow: 0 2px 18px rgba(0,0,0,.34) !important; } .primary{ background: linear-gradient( 105deg, #a32238, #7e192d 72%, #52101e ) !important; border-color:#b73b4e !important; box-shadow: 0 8px 28px rgba(139,25,45,.24) !important; } } /* Tablet paisagem */ @media (min-width:701px) and (max-width:1100px){ .hero-image{ width:57% !important; background-size:auto 108% !important; background-position:right 5% center !important; } .hero-content{ width:51% !important; } } /* ========================================================= VALENNE — HERO FINAL Visual inspirado na referência aprovada ========================================================= */ :root{ --bg:#030303; --text:#fff7f4; --muted:#c8bdb8; --red:#e0002f; --red-dark:#850019; --line:rgba(255,255,255,.10); } /* ===== BARRA SUPERIOR ===== */ .topbar{ position:relative !important; top:auto !important; z-index:50 !important; height:108px !important; min-height:108px !important; display:grid !important; grid-template-columns:330px 1fr 300px !important; align-items:center !important; padding:0 34px !important; background: linear-gradient( 180deg, rgba(3,3,3,.98), rgba(3,3,3,.94) ) !important; border-bottom:1px solid rgba(255,255,255,.09) !important; backdrop-filter:none !important; } /* ===== LOGO ===== */ .brand-word{ display:flex !important; align-items:center !important; gap:20px !important; font-family:Georgia,'Times New Roman',serif !important; font-size:31px !important; font-weight:700 !important; letter-spacing:.13em !important; color:#fff !important; } .brand-v{ position:relative !important; display:grid !important; place-items:center !important; width:54px !important; height:54px !important; font-size:28px !important; font-weight:700 !important; color:white !important; border:1px solid rgba(236,0,47,.75) !important; background: radial-gradient( circle at 35% 30%, rgba(220,0,42,.75), rgba(98,0,18,.85) 52%, rgba(30,0,5,.95) 100% ) !important; box-shadow: 0 0 28px rgba(220,0,40,.20), inset 0 0 18px rgba(255,0,60,.15) !important; transform:rotate(45deg) !important; } .brand-v{ line-height:1 !important; } /* ===== MENU ===== */ .nav{ height:100% !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:22px !important; overflow:visible !important; } .nav-item{ height:100% !important; display:flex !important; align-items:center !important; padding:0 10px !important; border:0 !important; border-bottom:4px solid transparent !important; background:transparent !important; color:#f0e8e5 !important; font-size:20px !important; font-weight:500 !important; } .nav-item:hover{ color:#fff !important; } .nav-item.active{ color:#fff !important; border-bottom-color:#e80035 !important; background:transparent !important; text-shadow:0 0 14px rgba(255,255,255,.15) !important; } /* ===== AÇÕES DO TOPO ===== */ .top-actions{ display:flex !important; justify-content:flex-end !important; align-items:center !important; gap:22px !important; } .search-btn{ font-size:36px !important; color:#fff !important; padding:0 !important; transform:rotate(-15deg) !important; } .user-chip{ max-width:145px !important; font-size:14px !important; color:#d4ccc8 !important; } .logout-btn{ font-size:25px !important; color:#eee !important; } /* ========================================================= HERO ========================================================= */ .hero{ position:relative !important; width:100% !important; min-height:calc(100vh - 108px) !important; height:calc(100vh - 108px) !important; max-height:920px !important; overflow:hidden !important; border-bottom:0 !important; background:#020202 !important; } /* FOTO PRINCIPAL */ .hero-image{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; background-image:url('/assets/morgana-hero-final.jpg') !important; background-repeat:no-repeat !important; background-size:cover !important; /* mantém Morgana grande, à direita, semelhante à segunda imagem */ background-position:center center !important; filter: brightness(.88) contrast(1.08) saturate(1.08) !important; transform:none !important; } /* SOMBRA/FUSÃO ESQUERDA */ .hero-shade{ position:absolute !important; inset:0 !important; z-index:1 !important; background: linear-gradient( 90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.99) 15%, rgba(0,0,0,.94) 27%, rgba(8,0,2,.77) 38%, rgba(33,0,5,.42) 50%, rgba(50,0,7,.14) 64%, rgba(0,0,0,.02) 79% ), radial-gradient( circle at 27% 46%, rgba(190,0,30,.31), rgba(100,0,14,.16) 29%, transparent 55% ), linear-gradient( 180deg, rgba(0,0,0,.08) 0%, transparent 60%, rgba(0,0,0,.28) 100% ) !important; } /* CONTEÚDO */ .hero-content{ position:relative !important; z-index:5 !important; width:52% !important; max-width:820px !important; padding: clamp(100px,12vh,155px) 0 60px 4.2vw !important; } /* VALENNE PEQUENO */ .hero .eyebrow{ display:block !important; margin-bottom:21px !important; font-size:19px !important; font-weight:700 !important; letter-spacing:.42em !important; color:#e50037 !important; text-shadow:0 0 24px rgba(230,0,52,.35) !important; } /* TÍTULO */ .hero h1{ max-width:760px !important; margin:0 0 28px !important; font-family: Georgia, 'Times New Roman', serif !important; font-size:clamp(68px,6.1vw,108px) !important; font-weight:600 !important; line-height:.89 !important; letter-spacing:-.045em !important; color:#fff !important; text-shadow: 0 2px 2px rgba(0,0,0,.25), 0 0 32px rgba(100,0,15,.18) !important; } /* SUBTÍTULO */ .hero p{ max-width:740px !important; margin:0 !important; color:#eee7e3 !important; font-size:20px !important; line-height:1.45 !important; text-shadow:0 2px 5px rgba(0,0,0,.65) !important; } /* BOTÕES */ .hero-actions{ display:flex !important; gap:18px !important; margin-top:40px !important; } .hero-actions button{ min-height:76px !important; padding:0 38px !important; border-radius:7px !important; font-size:20px !important; font-weight:700 !important; } .hero-actions .primary{ border:1px solid rgba(255,60,85,.95) !important; background: linear-gradient( 135deg, #ec0033, #be0026 ) !important; box-shadow: 0 0 32px rgba(225,0,44,.45), 0 14px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.16) !important; } .hero-actions .primary:hover{ background: linear-gradient( 135deg, #ff003b, #d00029 ) !important; } .hero-actions .secondary{ border:1px solid rgba(255,255,255,.20) !important; background:rgba(3,3,3,.52) !important; backdrop-filter:blur(4px) !important; box-shadow: inset 0 0 20px rgba(255,255,255,.015) !important; } .hero-actions .secondary:hover{ border-color:rgba(255,255,255,.35) !important; background:rgba(15,15,15,.68) !important; } /* Na referência desejada os cards não aparecem dentro da primeira tela. */ .hero-featured{ display:none !important; } /* ========================================================= TELA MAIS BAIXA / NOTEBOOK / TABLET HORIZONTAL ========================================================= */ @media (max-height:850px) and (min-width:901px){ .topbar{ height:86px !important; min-height:86px !important; } .brand-word{ font-size:26px !important; } .brand-v{ width:46px !important; height:46px !important; } .nav-item{ font-size:17px !important; } .hero{ height:calc(100vh - 86px) !important; min-height:650px !important; } .hero-content{ padding-top:95px !important; } .hero h1{ font-size:clamp(61px,6vw,86px) !important; } .hero .eyebrow{ font-size:14px !important; } .hero p{ font-size:18px !important; } .hero-actions{ margin-top:32px !important; } .hero-actions button{ min-height:62px !important; padding:0 28px !important; font-size:17px !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width:1100px){ .topbar{ grid-template-columns:240px 1fr 130px !important; padding:0 24px !important; } .brand-word{ font-size:23px !important; gap:14px !important; } .nav{ gap:5px !important; } .nav-item{ font-size:15px !important; padding:0 9px !important; } .user-chip{ display:none !important; } .top-actions{ gap:10px !important; } .hero-content{ width:57% !important; padding-left:4vw !important; } .hero h1{ font-size:clamp(56px,6.7vw,78px) !important; } .hero p{ font-size:17px !important; } } /* ========================================================= CELULAR ========================================================= */ @media (max-width:700px){ .topbar{ height:74px !important; min-height:74px !important; grid-template-columns:75px 1fr 54px !important; padding:0 14px !important; } .brand-word{ gap:0 !important; } .brand-word span:last-child{ display:none !important; } .brand-v{ width:39px !important; height:39px !important; font-size:21px !important; } .nav{ justify-content:flex-start !important; gap:0 !important; overflow-x:auto !important; } .nav-item{ flex:none !important; font-size:12px !important; padding:0 7px !important; border-bottom-width:3px !important; } .search-btn{ display:none !important; } .logout-btn{ font-size:20px !important; } .hero{ height:auto !important; min-height:calc(100dvh - 74px) !important; } .hero-image{ background-size:auto 100% !important; background-position:61% center !important; opacity:1 !important; } .hero-shade{ background: linear-gradient( 180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.18) 28%, rgba(0,0,0,.78) 64%, rgba(0,0,0,.98) 100% ), linear-gradient( 90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 47%, rgba(0,0,0,.08) 100% ) !important; } .hero-content{ width:100% !important; max-width:none !important; padding: clamp(330px,49dvh,520px) 22px 55px !important; } .hero .eyebrow{ font-size:12px !important; margin-bottom:12px !important; } .hero h1{ max-width:550px !important; font-size:clamp(45px,13vw,67px) !important; line-height:.91 !important; margin-bottom:20px !important; } .hero p{ font-size:16px !important; } .hero-actions{ gap:10px !important; margin-top:27px !important; } .hero-actions button{ min-height:56px !important; padding:0 17px !important; font-size:15px !important; } } /* ========================================================= RESTANTE DA PÁGINA ========================================================= */ .catalog-section, .category-strip, footer{ background:#050505 !important; } .catalog-section{ border-top:1px solid rgba(255,255,255,.06) !important; } /* ========================================================= VALENNE — AJUSTE RESPONSIVO DO MENU Desktop + Tablet ========================================================= */ /* ===== DESKTOP ===== */ @media (min-width: 1201px){ .topbar{ height:88px !important; min-height:88px !important; grid-template-columns: minmax(250px, 300px) minmax(520px, 1fr) minmax(180px, 240px) !important; padding:0 30px !important; } .brand-word{ gap:16px !important; font-size:27px !important; } .brand-v{ width:48px !important; height:48px !important; font-size:24px !important; } .nav{ gap:8px !important; justify-content:center !important; } .nav-item{ height:88px !important; padding:0 14px !important; font-size:17px !important; white-space:nowrap !important; border-bottom-width:3px !important; } .top-actions{ gap:14px !important; } .search-btn{ font-size:30px !important; } .user-chip{ max-width:120px !important; font-size:12px !important; } .logout-btn{ font-size:21px !important; } .hero{ height:calc(100vh - 88px) !important; min-height:calc(100vh - 88px) !important; } } /* ===== NOTEBOOK / TABLET HORIZONTAL ===== */ @media (min-width: 801px) and (max-width: 1200px){ .topbar{ height:78px !important; min-height:78px !important; grid-template-columns: 190px minmax(0, 1fr) 85px !important; padding:0 18px !important; } .brand-word{ gap:10px !important; font-size:20px !important; letter-spacing:.08em !important; } .brand-v{ width:38px !important; height:38px !important; font-size:19px !important; } .nav{ width:100% !important; display:flex !important; justify-content:center !important; align-items:center !important; gap:2px !important; overflow:hidden !important; } .nav-item{ height:78px !important; flex:0 1 auto !important; padding:0 10px !important; font-size:14px !important; font-weight:600 !important; white-space:nowrap !important; border-bottom-width:3px !important; } .top-actions{ justify-content:flex-end !important; gap:8px !important; } .search-btn{ font-size:25px !important; } .user-chip{ display:none !important; } .logout-btn{ font-size:18px !important; } .hero{ height:calc(100vh - 78px) !important; min-height:calc(100vh - 78px) !important; } } /* ===== TABLETS MENORES ===== */ @media (min-width: 701px) and (max-width: 900px){ .topbar{ grid-template-columns: 145px minmax(0, 1fr) 58px !important; padding:0 12px !important; } .brand-word{ font-size:17px !important; } .brand-v{ width:34px !important; height:34px !important; font-size:17px !important; } .nav{ gap:0 !important; } .nav-item{ padding:0 7px !important; font-size:12.5px !important; } .search-btn{ display:none !important; } .logout-btn{ font-size:17px !important; } } /* ===== evita qualquer estouro horizontal ===== */ html, body{ max-width:100% !important; overflow-x:hidden !important; } .topbar, .nav, .top-actions{ box-sizing:border-box !important; } /* ===== VALENNE — MENU MAIS ESTREITO ===== */ @media (min-width: 701px){ .topbar{ height:62px !important; min-height:62px !important; } .nav{ height:62px !important; } .nav-item{ height:62px !important; padding-top:0 !important; padding-bottom:0 !important; } .brand-v{ width:36px !important; height:36px !important; } .brand-word{ font-size:20px !important; } .hero{ height:calc(100vh - 62px) !important; min-height:calc(100vh - 62px) !important; } } /* ===== VALENNE — MENU 54PX ===== */ @media (min-width: 701px){ .topbar{ height:54px !important; min-height:54px !important; } .nav{ height:54px !important; } .nav-item{ height:54px !important; } .brand-v{ width:32px !important; height:32px !important; } .brand-word{ font-size:19px !important; } .hero{ height:calc(100vh - 54px) !important; min-height:calc(100vh - 54px) !important; } } /* ===== VALENNE — MENU 45PX ===== */ @media (min-width: 701px){ .topbar{ height:45px !important; min-height:45px !important; } .nav{ height:45px !important; } .nav-item{ height:45px !important; } .brand-v{ width:28px !important; height:28px !important; } .brand-word{ font-size:18px !important; } .hero{ height:calc(100vh - 45px) !important; min-height:calc(100vh - 45px) !important; } } /* ===== VALENNE — SOBE MENU DE CATEGORIAS ===== */ @media (min-width:701px){ .catalog-section{ min-height:0 !important; height:auto !important; padding-top:38px !important; padding-bottom:28px !important; } .section-head{ margin-bottom:20px !important; } .catalog-section .grid{ margin-bottom:0 !important; } .category-strip{ margin-top:0 !important; } } /* ========================================================= VALENNE — NAVEGAÇÃO LIMPA remove corte entre Hero e catálogo ========================================================= */ html, body{ scroll-behavior:auto !important; scroll-snap-type:none !important; } .app{ scroll-snap-type:none !important; } /* começa a seção exatamente no topo */ .catalog-section{ scroll-margin-top:0 !important; scroll-snap-align:none !important; scroll-snap-stop:normal !important; } /* remove qualquer snap antigo */ .hero, .category-strip, footer{ scroll-margin-top:0 !important; scroll-snap-align:none !important; scroll-snap-stop:normal !important; } /* remove Abrir Ao Vivo + Favoritos da capa */ .hero-actions{ display:none !important; } /* fecha o espaço deixado pelos botões */ .hero p{ margin-bottom:0 !important; } /* ========================================================= VALENNE — NAVEGAÇÃO LIMPA remove corte entre Hero e catálogo ========================================================= */ html, body{ scroll-behavior:auto !important; scroll-snap-type:none !important; } .app{ scroll-snap-type:none !important; } /* começa a seção exatamente no topo */ .catalog-section{ scroll-margin-top:0 !important; scroll-snap-align:none !important; scroll-snap-stop:normal !important; } /* remove qualquer snap antigo */ .hero, .category-strip, footer{ scroll-margin-top:0 !important; scroll-snap-align:none !important; scroll-snap-stop:normal !important; } /* remove Abrir Ao Vivo + Favoritos da capa */ .hero-actions{ display:none !important; } /* fecha o espaço deixado pelos botões */ .hero p{ margin-bottom:0 !important; } /* ===== VALENNE — CENTRALIZA TEXTO DO HERO ===== */ @media (min-width:701px){ .hero{ display:flex !important; align-items:center !important; } .hero-content{ position:relative !important; width:52% !important; max-width:820px !important; /* remove os espaçamentos antigos */ padding-top:0 !important; padding-bottom:0 !important; /* mantém a margem elegante da esquerda */ padding-left:4.2vw !important; /* sobe levemente do centro exato */ transform:translateY(-8%) !important; } .hero .eyebrow{ margin-top:0 !important; } } /* ========================================================= VALENNE — LOGIN COMPACTO PARA TABLET/DESKTOP ========================================================= */ @media (min-width:701px){ body.login-page{ min-height:100vh !important; overflow:hidden !important; } .login-shell{ height:100vh !important; min-height:100vh !important; overflow:hidden !important; } .login-visual, .login-panel{ height:100vh !important; min-height:0 !important; } .login-panel{ display:flex !important; align-items:center !important; justify-content:center !important; padding-top:20px !important; padding-bottom:20px !important; } .login-box{ width:100% !important; max-width:460px !important; transform:scale(.88) !important; transform-origin:center center !important; } .login-logo{ margin-bottom:22px !important; } .login-box h1{ margin-top:8px !important; margin-bottom:10px !important; } .login-box p{ margin-bottom:20px !important; } .login-box form{ gap:12px !important; } .login-box input{ min-height:48px !important; height:48px !important; } .login-box button{ min-height:50px !important; height:50px !important; } } /* tablet horizontal / telas com pouca altura */ @media (min-width:701px) and (max-height:750px){ .login-box{ transform:scale(.78) !important; } } /* ========================================================= VALENNE — LOGIN COMPACTO REAL Tablet / notebook / desktop com pouca altura ========================================================= */ @media (min-width:701px) and (max-height:950px){ .auth-body{ height:100vh !important; min-height:100vh !important; overflow:hidden !important; } .auth-portrait{ height:100vh !important; min-height:100vh !important; background-position:center 10% !important; } .auth-card{ align-self:center !important; width:min(460px,86%) !important; padding:15px 0 !important; margin:auto !important; } .auth-brand{ font-size:20px !important; margin-bottom:24px !important; } .auth-brand .brand-v{ width:32px !important; height:32px !important; font-size:19px !important; } .auth-card .eyebrow{ font-size:11px !important; letter-spacing:.28em !important; } .auth-card h1{ font-size:43px !important; line-height:.95 !important; margin:10px 0 8px !important; } .auth-lead{ margin:0 0 18px !important; font-size:14px !important; } .stack{ gap:11px !important; } .stack label{ gap:5px !important; font-size:12px !important; } .stack input{ padding:10px 12px !important; min-height:42px !important; height:42px !important; } .stack .primary{ min-height:44px !important; height:44px !important; margin-top:2px !important; } .auth-ornament{ margin-top:14px !important; } } /* ========================================================= VALENNE — LOGIN COMPACTO REAL Tablet / notebook / desktop com pouca altura ========================================================= */ @media (min-width:701px) and (max-height:950px){ .auth-body{ height:100vh !important; min-height:100vh !important; overflow:hidden !important; } .auth-portrait{ height:100vh !important; min-height:100vh !important; background-position:center 10% !important; } .auth-card{ align-self:center !important; width:min(460px,86%) !important; padding:15px 0 !important; margin:auto !important; } .auth-brand{ font-size:20px !important; margin-bottom:24px !important; } .auth-brand .brand-v{ width:32px !important; height:32px !important; font-size:19px !important; } .auth-card .eyebrow{ font-size:11px !important; letter-spacing:.28em !important; } .auth-card h1{ font-size:43px !important; line-height:.95 !important; margin:10px 0 8px !important; } .auth-lead{ margin:0 0 18px !important; font-size:14px !important; } .stack{ gap:11px !important; } .stack label{ gap:5px !important; font-size:12px !important; } .stack input{ padding:10px 12px !important; min-height:42px !important; height:42px !important; } .stack .primary{ min-height:44px !important; height:44px !important; margin-top:2px !important; } .auth-ornament{ margin-top:14px !important; } } /* ========================================================= VALENNE — LOGIN MAIS ALTO + LOGO CENTRAL ========================================================= */ @media (min-width:701px){ .auth-card{ transform:translateY(-42px) !important; } .auth-brand{ display:flex !important; justify-content:center !important; align-items:center !important; width:100% !important; margin-bottom:28px !important; font-size:27px !important; letter-spacing:.12em !important; text-align:center !important; } .auth-brand .brand-v{ width:42px !important; height:42px !important; font-size:23px !important; margin-right:14px !important; } .auth-card .eyebrow{ margin-top:0 !important; } } /* ===== VALENNE — LOGIN TÍTULO FINAL ===== */ @media (min-width:701px){ /* remove o segundo VALENNE */ .auth-card h1{ display:none !important; } /* Bem-vindo à noite vira o título */ .auth-card .eyebrow{ display:block !important; width:100% !important; margin:12px 0 10px !important; text-align:center !important; font-size:21px !important; font-weight:700 !important; line-height:1.2 !important; letter-spacing:.25em !important; color:#f1a1ae !important; text-shadow:0 0 18px rgba(220,0,45,.22) !important; } /* Seu acervo espera do outro lado */ .auth-lead{ width:100% !important; margin:0 0 24px !important; text-align:center !important; font-size:15px !important; line-height:1.4 !important; } /* mantém a logo principal centralizada */ .auth-brand{ justify-content:center !important; text-align:center !important; margin-bottom:20px !important; } } /* ===== VALENNE — DESTAQUE PRINCIPAL DA MARCA ===== */ @media (min-width:701px){ /* sobe um pouco mais todo o login */ .auth-card{ transform:translateY(-65px) !important; } /* VALENNE principal */ .auth-brand{ justify-content:center !important; margin-bottom:25px !important; font-size:36px !important; font-weight:700 !important; letter-spacing:.14em !important; line-height:1 !important; } /* losango V */ .auth-brand .brand-v{ width:56px !important; height:56px !important; margin-right:20px !important; font-size:29px !important; box-shadow: 0 0 28px rgba(230,0,50,.30), inset 0 0 15px rgba(255,255,255,.08) !important; } /* BEM-VINDO À NOITE fica secundário */ .auth-card .eyebrow{ margin:0 0 9px !important; font-size:17px !important; font-weight:700 !important; letter-spacing:.25em !important; text-align:center !important; } /* subtítulo */ .auth-lead{ margin:0 0 24px !important; font-size:14px !important; text-align:center !important; } } /* ========================================================= VALENNE — CARD FINAL DO LOGIN ========================================================= */ @media (min-width:701px){ /* desce o conjunto — antes estava em -65px */ .auth-card{ transform:translateY(-20px) !important; width:min(500px,88%) !important; padding:30px 34px 28px !important; background: linear-gradient( 145deg, rgba(18,12,13,.72), rgba(8,7,8,.58) ) !important; border:1px solid rgba(255,255,255,.13) !important; border-radius:22px !important; box-shadow: 0 24px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04), 0 0 35px rgba(150,0,25,.06) !important; backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; box-sizing:border-box !important; } /* logo */ .auth-brand{ margin-top:0 !important; margin-bottom:22px !important; } /* Bem-vindo */ .auth-card .eyebrow{ margin:0 0 10px !important; } /* Seu acervo... */ .auth-lead{ margin:0 0 25px !important; } /* formulário */ .stack{ margin:0 !important; } /* tira o losanguinho decorativo de baixo */ .auth-ornament{ display:none !important; } } /* ===== VALENNE — POSIÇÃO FINAL DO BLOCO LOGIN ===== */ @media (min-width:701px){ /* sobe o retângulo inteiro */ .auth-card{ transform:translateY(-95px) !important; } /* mais espaço entre a LOGO e BEM-VINDO */ .auth-brand{ margin-top:0 !important; margin-bottom:42px !important; } /* mantém o Bem-vindo separado da descrição */ .auth-card .eyebrow{ margin-top:0 !important; margin-bottom:12px !important; } .auth-lead{ margin-top:0 !important; margin-bottom:25px !important; } } /* ===== VALENNE — AJUSTE FINO POSIÇÃO LOGIN ===== */ @media (min-width:701px){ .auth-card{ transform:translateY(-75px) !important; } .auth-brand{ margin-bottom:42px !important; } } /* ========================================================= VALENNE — LOGIN ADMIN FINAL ========================================================= */ body.auth-body{ min-height:100vh !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:24px !important; box-sizing:border-box !important; } body.auth-body .auth-card{ width:min(520px,92vw) !important; margin:0 auto !important; transform:none !important; padding:38px 40px !important; border-radius:24px !important; background: linear-gradient( 145deg, rgba(18,13,14,.92), rgba(8,7,8,.90) ) !important; border:1px solid rgba(255,255,255,.15) !important; box-shadow: 0 25px 70px rgba(0,0,0,.45), 0 0 35px rgba(190,0,35,.08) !important; } /* MARCA ADMIN */ .admin-brand{ display:flex !important; align-items:center !important; justify-content:center !important; gap:18px !important; margin-bottom:30px !important; } .admin-mark{ width:54px !important; height:54px !important; display:grid !important; place-items:center !important; flex:none !important; transform:rotate(45deg) !important; border-radius:7px !important; border:1px solid rgba(255,60,85,.75) !important; background: radial-gradient( circle at 35% 30%, #d90036, #720018 65%, #270008 ) !important; box-shadow: 0 0 24px rgba(225,0,50,.28) !important; color:white !important; font-family:Georgia,'Times New Roman',serif !important; font-size:29px !important; font-weight:700 !important; } .admin-mark::first-letter{ transform:rotate(-45deg); } .admin-brand-text{ display:flex !important; flex-direction:column !important; line-height:1.05 !important; } .admin-brand-text b{ font-family:Georgia,'Times New Roman',serif !important; font-size:30px !important; letter-spacing:.14em !important; color:#fff !important; } .admin-brand-text small{ margin-top:6px !important; font-size:12px !important; letter-spacing:.20em !important; text-transform:uppercase !important; color:#d79aa7 !important; } /* título do formulário */ body.auth-body .auth-card h1{ display:block !important; margin:0 0 24px !important; text-align:center !important; font-size:25px !important; } /* tablet horizontal */ @media (min-width:701px) and (max-height:750px){ body.auth-body .auth-card{ padding:24px 32px !important; } .admin-brand{ margin-bottom:20px !important; } .admin-mark{ width:46px !important; height:46px !important; font-size:24px !important; } .admin-brand-text b{ font-size:25px !important; } body.auth-body .auth-card h1{ margin-bottom:16px !important; font-size:21px !important; } } /* ===== VALENNE ADMIN — AJUSTE FINO ===== */ /* VALENNE + Administração */ .admin-brand-text{ display:flex !important; flex-direction:column !important; align-items:center !important; text-align:center !important; } .admin-brand-text small{ width:100% !important; text-align:center !important; margin-top:7px !important; } /* aumenta distância entre marca e título */ .admin-brand{ margin-bottom:42px !important; } /* Entrar no painel menor */ body.auth-body .auth-card h1{ display:block !important; margin:0 0 24px !important; text-align:center !important; font-size:18px !important; font-weight:500 !important; letter-spacing:.04em !important; } /* ========================================================= VALENNE — LOGIN FINAL Mantém Morgana e posição do card exatamente como estão ========================================================= */ .auth-card .auth-brand{ width:100% !important; display:flex !important; justify-content:center !important; align-items:center !important; gap:18px !important; font-family:Georgia, "Times New Roman", serif !important; font-size:34px !important; letter-spacing:.20em !important; margin:0 auto 44px !important; text-align:center !important; } .auth-card .auth-brand .brand-v{ width:58px !important; height:58px !important; font-size:37px !important; flex:0 0 58px !important; } .auth-card .eyebrow{ display:block !important; width:100% !important; text-align:center !important; font-size:15px !important; line-height:1.35 !important; letter-spacing:.28em !important; margin:0 auto 22px !important; } .auth-card .auth-lead{ width:100% !important; text-align:center !important; font-size:17px !important; line-height:1.5 !important; margin:0 auto 34px !important; } /* ---------- CELULAR ---------- */ @media (max-width:700px){ /* Não alterar auth-body nem auth-portrait aqui. Assim o enquadramento atual da Morgana permanece. */ .auth-card .auth-brand{ font-size:29px !important; gap:17px !important; margin-bottom:38px !important; } .auth-card .auth-brand .brand-v{ width:56px !important; height:56px !important; flex-basis:56px !important; font-size:36px !important; } .auth-card .eyebrow{ font-size:15px !important; letter-spacing:.24em !important; margin-bottom:20px !important; } .auth-card .auth-lead{ font-size:17px !important; margin-bottom:32px !important; } } /* ---------- S25 ULTRA / TELAS ESTREITAS ---------- */ @media (max-width:430px){ .auth-card .auth-brand{ font-size:27px !important; gap:15px !important; margin-bottom:36px !important; } .auth-card .auth-brand .brand-v{ width:54px !important; height:54px !important; flex-basis:54px !important; font-size:35px !important; } .auth-card .eyebrow{ font-size:14px !important; letter-spacing:.21em !important; } .auth-card .auth-lead{ font-size:16px !important; } } /* ========================================================= VALENNE — HEADER / MENU MOBILE Corrige proporção da barra após login ========================================================= */ @media (max-width:700px){ .topbar{ min-height:120px !important; height:auto !important; padding-top:14px !important; padding-bottom:14px !important; } .topbar-inner{ min-height:90px !important; align-items:center !important; } .nav{ min-height:90px !important; align-items:center !important; } .nav a{ padding-top:28px !important; padding-bottom:28px !important; } } /* VALENNE — HEADER MOBILE COMPACTO */ @media (max-width:700px){ .topbar{ min-height:72px !important; height:72px !important; padding-top:0 !important; padding-bottom:0 !important; } .topbar-inner{ min-height:72px !important; height:72px !important; align-items:center !important; } .nav{ min-height:72px !important; height:72px !important; align-items:center !important; } .nav a{ padding-top:18px !important; padding-bottom:18px !important; } } /* ========================================================= VALENNE — HEADER MOBILE PROPORÇÃO FINAL ========================================================= */ @media (max-width:700px){ .topbar{ height:58px !important; min-height:58px !important; padding:0 !important; } .topbar-inner{ height:58px !important; min-height:58px !important; padding:0 8px !important; display:flex !important; align-items:center !important; } /* LOGO */ .topbar .brand, .topbar .logo{ width:46px !important; min-width:46px !important; height:46px !important; margin-right:18px !important; flex:0 0 46px !important; } .topbar .brand img, .topbar .logo img{ width:46px !important; height:46px !important; object-fit:contain !important; } /* MENU */ .nav{ height:58px !important; min-height:58px !important; display:flex !important; align-items:center !important; gap:24px !important; overflow-x:auto !important; overflow-y:hidden !important; white-space:nowrap !important; } .nav a{ font-size:17px !important; font-weight:600 !important; line-height:58px !important; height:58px !important; padding:0 !important; margin:0 !important; white-space:nowrap !important; } /* linha vermelha do item ativo */ .nav a.active, .nav .active{ position:relative !important; } .nav a.active::after, .nav .active::after{ bottom:0 !important; height:2px !important; } } /* ========================================================= VALENNE 7.1 — TELA DE SÉRIE ========================================================= */ body.series-modal-open { overflow: hidden; } .valenne-series-modal { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, .94); overflow-y: auto; padding: 70px 24px; } .valenne-series-shell { width: min(900px, 100%); margin: 0 auto; } .valenne-series-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; margin-bottom: 38px; } .valenne-series-kicker { display: block; color: #c86f7c; font-size: 14px; font-weight: 700; letter-spacing: .35em; text-transform: uppercase; margin-bottom: 12px; } .valenne-series-head h2 { margin: 0; color: #f5eeee; font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 7vw, 74px); font-weight: 400; line-height: 1; } .valenne-series-head p { margin: 16px 0 0; color: #887d7d; font-size: 18px; } .valenne-series-close { border: 0; background: transparent; color: #d9cccc; font-size: 38px; line-height: 1; cursor: pointer; padding: 4px; } .valenne-season-selector { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 18px; margin-bottom: 10px; scrollbar-width: none; } .valenne-season-selector::-webkit-scrollbar { display: none; } .valenne-season-btn { flex: 0 0 auto; border: 1px solid #33292b; background: #090707; color: #9d9090; padding: 14px 20px; font-size: 15px; cursor: pointer; } .valenne-season-btn.active { color: #fff4f4; border-color: #8e3548; background: linear-gradient( 135deg, rgba(142, 53, 72, .35), rgba(50, 15, 23, .35) ); } .valenne-episode-list { border-top: 1px solid #292122; } .valenne-episode { width: 100%; display: grid; grid-template-columns: 70px 1fr 40px; align-items: center; gap: 18px; border: 0; border-bottom: 1px solid #292122; background: transparent; color: #f4eded; text-align: left; padding: 24px 4px; cursor: pointer; } .valenne-episode-number { color: #c86f7c; font-size: 14px; font-weight: 700; letter-spacing: .14em; } .valenne-episode-copy { display: flex; flex-direction: column; gap: 7px; } .valenne-episode-copy strong { font-family: Georgia, "Times New Roman", serif; font-size: 25px; font-weight: 400; } .valenne-episode-copy small { color: #776c6c; font-size: 14px; } .valenne-episode-play { color: #c86f7c; font-size: 18px; text-align: right; } @media (max-width: 700px) { .valenne-series-modal { padding: 55px 28px 80px; } .valenne-series-head { margin-bottom: 30px; } .valenne-series-head h2 { font-size: 46px; } .valenne-series-close { font-size: 32px; } .valenne-season-btn { padding: 13px 17px; } .valenne-episode { grid-template-columns: 48px 1fr 26px; gap: 12px; padding: 22px 0; } .valenne-episode-copy strong { font-size: 21px; } } /* ========================================================= VALENNE — SÉRIES / TEMPORADAS / EPISÓDIOS ========================================================= */ .series-back { width: 100%; margin: 22px 0 42px; padding: 15px 20px; border: 1px solid rgba(181, 79, 101, .28); border-radius: 3px; background: linear-gradient( 135deg, rgba(181, 79, 101, .10), rgba(20, 10, 13, .55) ); color: rgba(245, 236, 232, .82); font: inherit; font-size: 15px; letter-spacing: .04em; cursor: pointer; transition: .2s ease; } .series-back:hover { border-color: rgba(181, 79, 101, .55); background: rgba(181, 79, 101, .12); } /* BLOCO DE CADA TEMPORADA */ .season-block { width: 100%; margin: 0 0 46px; } .season-title { margin: 0 0 18px; color: #eadbd5; font-family: Georgia, "Times New Roman", serif; font-size: 27px; font-weight: 400; } /* CARD DO EPISÓDIO */ .episode-card { width: 100%; display: grid; grid-template-columns: 58px 1fr 36px; align-items: center; gap: 14px; padding: 19px 18px; margin: 0 0 10px; text-align: left; color: #eee5e1; background: linear-gradient( 100deg, rgba(181, 79, 101, .09), rgba(13, 8, 10, .82) 38%, rgba(7, 5, 6, .95) ); border: 1px solid rgba(255, 255, 255, .10); border-radius: 3px; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease; } .episode-card:hover { transform: translateY(-1px); border-color: rgba(181, 79, 101, .45); background: linear-gradient( 100deg, rgba(181, 79, 101, .16), rgba(13, 8, 10, .88) 42%, rgba(7, 5, 6, .98) ); } /* E01 / E02 */ .episode-number { color: #b85b70; font-size: 13px; font-weight: 700; letter-spacing: .12em; } /* TEXTO */ .episode-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .episode-copy strong { color: #f1e8e4; font-family: Georgia, "Times New Roman", serif; font-size: 19px; font-weight: 400; line-height: 1.2; } .episode-copy small { color: rgba(220, 207, 201, .48); font-size: 13px; line-height: 1.35; } /* PLAY */ .episode-play { justify-self: end; color: #b85b70; font-size: 17px; opacity: .85; } /* MOBILE */ @media (max-width: 700px) { .series-back { margin-top: 18px; margin-bottom: 36px; padding: 14px; } .season-block { margin-bottom: 40px; } .season-title { font-size: 25px; margin-bottom: 16px; } .episode-card { grid-template-columns: 48px minmax(0, 1fr) 25px; gap: 10px; padding: 17px 14px; } .episode-copy strong { font-size: 18px; } .episode-copy small { font-size: 12px; } } /* ========================================================= VALENNE — DESCOBERTA FILMES / SÉRIES ========================================================= */ .discovery-wrap{ width:100%; display:grid; gap:46px; } .discovery-section{ width:100%; } .discovery-head{ display:flex; align-items:end; justify-content:space-between; margin-bottom:18px; } .discovery-kicker{ display:block; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:#b95b70; margin-bottom:7px; } .discovery-head h3{ margin:0; font-size:34px; font-family:Georgia,serif; font-weight:500; } .discovery-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } .az-bar{ display:flex; flex-wrap:wrap; gap:8px; } .az-button{ min-width:42px; height:42px; padding:0 12px; border:1px solid rgba(185,91,112,.35); background:rgba(40,10,17,.35); color:#eee5e2; font:inherit; cursor:pointer; } .az-button:hover, .az-button:focus{ background:rgba(185,91,112,.18); border-color:#b95b70; } .category-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .category-chip{ display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:left; padding:18px 20px; border:1px solid rgba(185,91,112,.22); background: linear-gradient( 135deg, rgba(45,13,20,.65), rgba(8,5,6,.88) ); color:#eee5e2; cursor:pointer; } .category-chip strong{ font-family:Georgia,serif; font-size:18px; font-weight:500; } .category-chip small{ opacity:.55; } .discovery-all{ width:100%; padding:20px; border:1px solid rgba(185,91,112,.35); background:rgba(40,10,17,.28); color:#eee5e2; font-size:18px; cursor:pointer; } @media (max-width:900px){ .discovery-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } .category-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:650px){ .discovery-wrap{ gap:34px; } .discovery-head h3{ font-size:28px; } .discovery-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .category-list{ grid-template-columns:1fr; } .az-button{ min-width:38px; height:38px; padding:0 10px; } } /* ========================================================= VALENNE — DISCOVERY PREMIUM ========================================================= */ .discovery-premium{ width:100%; display:grid; gap:42px; } .premium-block{ width:100%; } .premium-block-title{ display:flex; align-items:center; gap:10px; margin-bottom:18px; } .premium-block-title h3{ margin:0; font-family:Arial,sans-serif; font-size:16px; font-weight:700; letter-spacing:.02em; color:#f1e8e5; } .premium-icon{ color:#d75c7c; font-size:18px; } .premium-recent-row{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; } .premium-recent-row .card{ min-height:330px; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:#130d0f; } .premium-recent-row .card-content{ padding:18px 14px 14px; } .premium-recent-row .card h3{ font-size:17px; line-height:1.15; } .premium-recent-row .badge{ font-size:10px; } .premium-az{ display:flex; flex-wrap:wrap; gap:10px; } .premium-letter{ width:42px; height:40px; border:1px solid rgba(215,92,124,.45); border-radius:7px; background:rgba(49,18,26,.28); color:#e4728d; font-size:17px; font-weight:700; cursor:pointer; } .premium-letter:hover, .premium-letter:focus{ background:rgba(215,92,124,.14); border-color:#d75c7c; color:#fff; } .premium-categories{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } .premium-category{ min-height:130px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:18px; border-radius:12px; border:1px solid rgba(215,92,124,.20); background: linear-gradient( 145deg, rgba(53,26,29,.78), rgba(18,12,14,.92) ); color:#eee5e2; text-align:center; cursor:pointer; } .premium-category:hover, .premium-category:focus{ border-color:rgba(215,92,124,.60); transform:translateY(-1px); } .premium-category-icon{ color:#d75c7c; font-size:28px; } .premium-category-copy{ display:grid; gap:5px; } .premium-category-copy strong{ font-size:15px; letter-spacing:.02em; } .premium-category-copy small{ opacity:.62; font-size:13px; } .premium-all-btn{ width:100%; padding:18px 22px; border-radius:10px; border:1px solid rgba(215,92,124,.55); background: linear-gradient( 90deg, rgba(71,25,37,.30), rgba(33,17,21,.40) ); color:#eee5e2; display:grid; gap:5px; text-align:center; cursor:pointer; } .premium-all-btn strong{ color:#e76d8b; font-size:18px; letter-spacing:.02em; } .premium-all-btn span{ font-size:14px; opacity:.72; } @media (max-width:1100px){ .premium-recent-row{ grid-template-columns:repeat(4,minmax(0,1fr)); } .premium-categories{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:760px){ .discovery-premium{ gap:34px; } .premium-recent-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } .premium-categories{ grid-template-columns:repeat(2,minmax(0,1fr)); } .premium-letter{ width:38px; height:38px; } } /* ========================================================= VALENNE — DISCOVERY FINAL ========================================================= */ /* ocupa toda a largura do catálogo */ .discovery-premium{ grid-column:1 / -1 !important; width:100% !important; max-width:none !important; display:flex !important; flex-direction:column; gap:46px; padding:6px 0 28px; } .premium-block{ width:100%; min-width:0; } /* --------------------------------------------------------- TÍTULOS --------------------------------------------------------- */ .premium-block-title{ display:flex; align-items:center; gap:11px; margin:0 0 18px; } .premium-block-title h3{ margin:0; font-family:Arial,Helvetica,sans-serif; font-size:17px; line-height:1.1; font-weight:800; color:#f2e9e6; letter-spacing:.01em; } .premium-icon{ display:inline-flex; align-items:center; justify-content:center; width:23px; color:#e35f82; font-size:19px; line-height:1; } /* --------------------------------------------------------- RECENTES — FAIXA HORIZONTAL --------------------------------------------------------- */ .premium-recent-row{ width:100%; display:flex !important; grid-template-columns:none !important; gap:18px; overflow-x:auto; overflow-y:hidden; padding:2px 3px 14px; scroll-snap-type:x proximity; scrollbar-width:thin; } .premium-recent-row::-webkit-scrollbar{ height:5px; } .premium-recent-row::-webkit-scrollbar-thumb{ background:rgba(220,83,118,.35); border-radius:999px; } .premium-recent-row .card{ flex:0 0 190px !important; width:190px !important; min-width:190px !important; height:320px !important; min-height:320px !important; position:relative; border-radius:11px !important; overflow:hidden; border:1px solid rgba(255,255,255,.16) !important; background:#100c0d !important; scroll-snap-align:start; transition: transform .18s ease, border-color .18s ease; } .premium-recent-row .card:hover{ transform:translateY(-3px); border-color: rgba(225,88,123,.55) !important; } .premium-recent-row .card-bg{ position:absolute; inset:0; width:100%; height:100%; background-size:cover; background-position:center; } .premium-recent-row .card-content{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:48px 13px 13px !important; background: linear-gradient( to top, rgba(5,3,4,.98) 0%, rgba(5,3,4,.88) 44%, rgba(5,3,4,0) 100% ); } .premium-recent-row .card-content h3{ margin:5px 0 0 !important; font-family:Arial,Helvetica,sans-serif !important; font-size:15px !important; line-height:1.22 !important; font-weight:600 !important; color:#fff; } .premium-recent-row .card-content small{ display:none; } .premium-recent-row .badge{ display:inline-block; width:auto; padding:4px 7px; border-radius:5px; font-size:9px !important; line-height:1; letter-spacing:.04em; background:rgba(25,20,21,.88); color:#f1e9e6; } /* --------------------------------------------------------- A — Z --------------------------------------------------------- */ .premium-az{ width:100%; display:flex !important; flex-wrap:wrap; gap:9px; align-items:center; } .premium-letter{ width:42px !important; min-width:42px !important; height:42px !important; padding:0 !important; display:flex; align-items:center; justify-content:center; border-radius:7px !important; border: 1px solid rgba(226,80,116,.45) !important; background: rgba(37,14,20,.28) !important; color:#e96787 !important; font-family:Arial,Helvetica,sans-serif; font-size:16px !important; font-weight:800 !important; transition: background .15s ease, transform .15s ease, border-color .15s ease; } .premium-letter:hover, .premium-letter:focus{ background: rgba(225,73,111,.15) !important; border-color: rgba(235,89,126,.9) !important; color:#fff !important; transform:translateY(-1px); } /* --------------------------------------------------------- COLEÇÕES --------------------------------------------------------- */ .premium-categories{ width:100%; display:grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap:16px !important; } .premium-category{ min-width:0; min-height:126px !important; display:flex !important; flex-direction:column; justify-content:center; align-items:center; gap:10px; padding:18px 14px !important; border-radius:12px !important; border: 1px solid rgba(255,255,255,.12) !important; background: radial-gradient( circle at 50% 0%, rgba(124,45,63,.17), transparent 65% ), linear-gradient( 145deg, rgba(41,24,27,.94), rgba(17,13,14,.97) ) !important; text-align:center; color:#f4ece9 !important; overflow:hidden; transition: transform .17s ease, border-color .17s ease; } .premium-category:hover{ transform:translateY(-2px); border-color: rgba(224,83,119,.45) !important; } .premium-category-icon{ color:#e65b7d !important; font-size:27px !important; } .premium-category-copy{ width:100%; display:flex !important; flex-direction:column; align-items:center; gap:5px; } .premium-category-copy strong{ width:100%; font-family:Arial,Helvetica,sans-serif !important; font-size:14px !important; line-height:1.15; font-weight:700 !important; white-space:normal; overflow-wrap:anywhere; } .premium-category-copy small{ font-family:Arial,Helvetica,sans-serif; font-size:12px !important; opacity:.68; } /* --------------------------------------------------------- VER TODOS --------------------------------------------------------- */ .premium-all-btn{ width:100% !important; min-height:72px; padding:14px 22px !important; display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:9px !important; border: 1px solid rgba(228,73,112,.62) !important; background: linear-gradient( 90deg, rgba(70,21,34,.24), rgba(55,24,30,.40), rgba(70,21,34,.24) ) !important; color:#f2e9e6 !important; text-align:center; } .premium-all-btn strong{ color:#ed6284 !important; font-family:Arial,Helvetica,sans-serif; font-size:17px !important; font-weight:800; letter-spacing:.01em; } .premium-all-btn span{ color:#eee2df; font-size:13px !important; opacity:.78; } /* --------------------------------------------------------- TABLET --------------------------------------------------------- */ @media (max-width:1100px){ .discovery-premium{ gap:38px; } .premium-recent-row .card{ flex-basis:165px !important; width:165px !important; min-width:165px !important; height:285px !important; min-height:285px !important; } .premium-categories{ grid-template-columns: repeat(4,minmax(0,1fr)) !important; } .premium-letter{ width:40px !important; min-width:40px !important; height:40px !important; } } /* --------------------------------------------------------- CELULAR --------------------------------------------------------- */ @media (max-width:650px){ .discovery-premium{ gap:34px; } .premium-block-title{ margin-bottom:14px; } .premium-block-title h3{ font-size:14px; } .premium-recent-row{ gap:12px; } .premium-recent-row .card{ flex-basis:145px !important; width:145px !important; min-width:145px !important; height:245px !important; min-height:245px !important; } .premium-recent-row .card-content h3{ font-size:13px !important; } .premium-az{ gap:7px; } .premium-letter{ width:36px !important; min-width:36px !important; height:36px !important; font-size:14px !important; } .premium-categories{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap:10px !important; } .premium-category{ min-height:110px !important; padding:14px 10px !important; } } /* ========================================================= BUSCA INTERNA — FILMES / SÉRIES ========================================================= */ #catalogSection > div:first-child, .catalog-heading, .section-heading{ position:relative; } .section-search-box{ margin-left:auto; display:flex; align-items:center; gap:10px; width:min(340px,42vw); padding:10px 14px; border-radius:999px; border:1px solid rgba(220,85,119,.35); background: rgba(18,12,14,.72); backdrop-filter:blur(10px); } .section-search-icon{ color:#df6381; font-size:19px; line-height:1; } .section-search-box input{ width:100%; border:0; outline:0; background:transparent; color:#f4ece9; font-size:15px; } .section-search-box input::placeholder{ color:rgba(244,236,233,.46); } .section-search-box:focus-within{ border-color:rgba(229,92,126,.8); box-shadow: 0 0 0 3px rgba(219,72,109,.08); } /* tenta alinhar título e busca lado a lado */ #sectionTitle{ display:inline-block; } #sectionTitle + .section-search-box{ float:right; margin-top:-2px; } @media (max-width:700px){ #sectionTitle + .section-search-box{ float:none; margin-top:14px; margin-left:0; } .section-search-box{ width:100%; } } /* ========================================================= VALENNE — BUSCA NO CABEÇALHO 2.0 ========================================================= */ .section-search-host{ position:relative !important; padding-right:360px !important; min-height:82px; } .section-search-host .section-search-box{ position:absolute !important; right:0 !important; bottom:8px !important; float:none !important; margin:0 !important; width:300px !important; height:44px; padding:0 15px !important; border-radius:9px !important; border:1px solid rgba(221,91,123,.32) !important; background: rgba(18,11,13,.58) !important; box-shadow:none !important; } .section-search-host .section-search-box:focus-within{ border-color:rgba(226,92,125,.72) !important; background: rgba(25,13,17,.82) !important; } .section-search-host .section-search-icon{ color:#df6381; font-size:17px; } .section-search-host .section-search-box input{ font-size:14px !important; } .section-search-host .section-search-box input::placeholder{ color:rgba(241,230,227,.48); } /* tablet */ @media (max-width:900px){ .section-search-host{ padding-right:300px !important; } .section-search-host .section-search-box{ width:260px !important; } } /* celular / tela estreita */ @media (max-width:650px){ .section-search-host{ padding-right:0 !important; padding-bottom:58px; } .section-search-host .section-search-box{ right:auto !important; left:0 !important; bottom:4px !important; width:min(100%,320px) !important; } } /* ========================================================= VALENNE — CABEÇALHO FILMES / SÉRIES FINAL ========================================================= */ .section-search-host{ position:relative !important; min-height:92px !important; padding-right:380px !important; padding-bottom:0 !important; } /* mantém ACERVO VALENNE acima do título */ .section-search-host .section-kicker, .section-search-host .eyebrow, .section-search-host > span:first-child{ display:block !important; width:auto !important; } /* título fica sozinho à esquerda */ .section-search-host #sectionTitle{ display:block !important; margin-top:4px !important; margin-right:0 !important; width:auto !important; } /* busca na mesma linha visual do título */ .section-search-host .section-search-box{ position:absolute !important; right:0 !important; top:38px !important; bottom:auto !important; left:auto !important; float:none !important; width:320px !important; height:44px !important; margin:0 !important; padding:0 15px !important; border-radius:10px !important; border: 1px solid rgba(222,84,119,.42) !important; background: rgba(17,11,13,.58) !important; box-shadow:none !important; } /* foco */ .section-search-host .section-search-box:focus-within{ border-color: rgba(232,97,131,.82) !important; background: rgba(22,12,16,.82) !important; } .section-search-host .section-search-icon{ color:#e16683 !important; } .section-search-host .section-search-box input{ font-size:14px !important; color:#f4ece9 !important; } .section-search-host .section-search-box input::placeholder{ color: rgba(244,236,233,.48) !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width:1000px){ .section-search-host{ padding-right:330px !important; } .section-search-host .section-search-box{ width:285px !important; } } /* ========================================================= CELULAR ========================================================= */ @media (max-width:650px){ .section-search-host{ min-height:auto !important; padding-right:0 !important; padding-bottom:58px !important; } .section-search-host .section-search-box{ top:auto !important; right:auto !important; left:0 !important; bottom:0 !important; width:min(100%,320px) !important; } } /* ========================================================= VALENNE — BUSCA ALINHADA AO EXTREMO DIREITO ========================================================= */ .section-search-host{ position:relative !important; width:100% !important; max-width:none !important; display:block !important; min-height:92px !important; padding-right:0 !important; } /* mantém o bloco de título na esquerda */ .section-search-host #sectionTitle{ display:block !important; width:auto !important; margin:4px 0 0 !important; } /* busca encostada no lado direito da faixa inteira */ .section-search-host .section-search-box{ position:absolute !important; top:38px !important; right:0 !important; left:auto !important; bottom:auto !important; width:320px !important; max-width:38vw !important; margin:0 !important; transform:none !important; } /* tablet */ @media (max-width:1000px){ .section-search-host .section-search-box{ width:300px !important; max-width:36vw !important; } } /* celular */ @media (max-width:650px){ .section-search-host{ padding-bottom:58px !important; } .section-search-host .section-search-box{ top:auto !important; right:auto !important; left:0 !important; bottom:0 !important; width:min(100%,320px) !important; max-width:none !important; } } /* ========================================================= VALENNE — BUSCA ALINHADA AO EXTREMO DIREITO ========================================================= */ .section-search-host{ position:relative !important; width:100% !important; max-width:none !important; display:block !important; min-height:92px !important; padding-right:0 !important; } /* mantém o bloco de título na esquerda */ .section-search-host #sectionTitle{ display:block !important; width:auto !important; margin:4px 0 0 !important; } /* busca encostada no lado direito da faixa inteira */ .section-search-host .section-search-box{ position:absolute !important; top:38px !important; right:0 !important; left:auto !important; bottom:auto !important; width:320px !important; max-width:38vw !important; margin:0 !important; transform:none !important; } /* tablet */ @media (max-width:1000px){ .section-search-host .section-search-box{ width:300px !important; max-width:36vw !important; } } /* celular */ @media (max-width:650px){ .section-search-host{ padding-bottom:58px !important; } .section-search-host .section-search-box{ top:auto !important; right:auto !important; left:0 !important; bottom:0 !important; width:min(100%,320px) !important; max-width:none !important; } } /* ========================================================= VALENNE — HOME POR ANOS ========================================================= */ .home-years{ width:100%; display:flex; flex-direction:column; gap:34px; } .home-year-block{ width:100%; min-width:0; } .home-year-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; } .home-year-head .premium-block-title{ margin:0; } .home-year-head .premium-block-title h3{ font-size:22px; margin:0; } .home-year-more{ appearance:none; border:1px solid rgba(255,140,180,.32); background:rgba(255,120,165,.08); color:#f5dfe7; padding:9px 18px; border-radius:999px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:.2s ease; } .home-year-more:hover{ background:rgba(255,120,165,.16); border-color:rgba(255,150,190,.55); } /* fileira horizontal dos filmes */ .home-year-block .premium-recent-row{ width:100%; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(145px, 175px); justify-content:start; gap:14px; overflow-x:auto; overflow-y:hidden; padding:2px 2px 12px; scrollbar-width:thin; } /* garante que os cards não sejam espremidos */ .home-year-block .card{ width:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important; } /* tablet */ @media (max-width:1000px){ .home-years{ gap:28px; } .home-year-block .premium-recent-row{ grid-auto-columns:minmax(140px, 165px); gap:12px; } } /* celular */ @media (max-width:650px){ .home-year-head{ margin-bottom:12px; } .home-year-head .premium-block-title h3{ font-size:19px; } .home-year-more{ padding:7px 13px; font-size:12px; } .home-year-block .premium-recent-row{ grid-auto-columns:145px; gap:10px; } } /* ========================================================= VALENNE — HOME ANOS FIX DEFINITIVO ========================================================= */ .home-years{ grid-column:1 / -1 !important; width:100% !important; max-width:none !important; display:flex !important; flex-direction:column !important; gap:38px !important; } .home-year-block{ grid-column:1 / -1 !important; width:100% !important; max-width:none !important; display:block !important; } .home-year-head{ width:100% !important; display:flex !important; align-items:center !important; justify-content:space-between !important; margin-bottom:16px !important; } .home-year-head .premium-block-title{ margin:0 !important; } .home-year-head .premium-block-title h3{ margin:0 !important; font-size:25px !important; line-height:1 !important; } /* AQUI está a correção principal */ .home-year-block .premium-recent-row{ width:100% !important; max-width:none !important; display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:16px !important; overflow-x:auto !important; overflow-y:hidden !important; padding:3px 3px 14px !important; } /* mata as medidas antigas dos cards */ .home-year-block .premium-recent-row .card{ flex:0 0 175px !important; width:175px !important; min-width:175px !important; max-width:175px !important; height:290px !important; min-height:290px !important; margin:0 !important; } /* imagem ocupa o card inteiro */ .home-year-block .card-bg{ width:100% !important; height:100% !important; } /* botão ver todos */ .home-year-more{ flex:0 0 auto !important; padding:8px 17px !important; border-radius:999px !important; border:1px solid rgba(230,100,135,.45) !important; background:rgba(75,25,38,.22) !important; color:#f0dfe5 !important; font-size:13px !important; font-weight:700 !important; } /* TABLET */ @media(max-width:1000px){ .home-year-block .premium-recent-row .card{ flex-basis:160px !important; width:160px !important; min-width:160px !important; max-width:160px !important; height:270px !important; min-height:270px !important; } } /* CELULAR */ @media(max-width:650px){ .home-year-block .premium-recent-row .card{ flex-basis:145px !important; width:145px !important; min-width:145px !important; max-width:145px !important; height:245px !important; min-height:245px !important; } } /* ========================================================= VALENNE — CANAIS AGRUPADOS ========================================================= */ .channel-group-card small{ letter-spacing:.03em; } .channel-quality-grid{ grid-column:1 / -1; width:100%; display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:14px; } .channel-quality-card{ width:100%; min-height:94px; display:flex; align-items:center; gap:15px; padding:17px 18px; border: 1px solid rgba(222,125,153,.22); border-radius:14px; background: linear-gradient( 135deg, rgba(85,34,47,.40), rgba(30,17,21,.55) ); color:#f7edef; text-align:left; cursor:pointer; } .channel-quality-card:hover{ border-color: rgba(239,127,160,.52); background: linear-gradient( 135deg, rgba(106,40,58,.54), rgba(34,18,23,.65) ); } .channel-quality-mark{ flex:0 0 auto; min-width:58px; padding:9px 8px; border-radius:9px; background: rgba(232,91,128,.15); color:#f08baa; font-size:13px; font-weight:800; text-align:center; } .channel-quality-copy{ min-width:0; flex:1; display:flex; flex-direction:column; gap:4px; } .channel-quality-copy strong{ font-size:16px; } .channel-quality-copy small{ color: rgba(245,231,235,.58); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .channel-quality-play{ color:#eb7898; font-size:15px; } @media(max-width:850px){ .channel-quality-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } } @media(max-width:550px){ .channel-quality-grid{ grid-template-columns:1fr; } } /* ========================================================= VALENNE — REFINO CANAIS ========================================================= */ .channel-search-box{ margin-left:auto; width:320px; max-width:38vw; padding:12px 16px; border:1px solid rgba(230,120,155,.30); border-radius:14px; background:rgba(45,20,27,.45); color:#f5e9ed; outline:none; } .channel-search-box::placeholder{ color:rgba(245,233,237,.45); } .channel-search-box:focus{ border-color:rgba(239,127,160,.60); } .channel-group-card{ min-height:220px !important; } .channel-group-card .card-content h3{ font-size:22px; } .channel-group-card .card-content small{ font-weight:600; letter-spacing:.04em; } @media(max-width:650px){ .channel-search-box{ width:100%; max-width:none; margin-top:10px; } } /* ========================================================= VALENNE — PLAYER COMPACTO ========================================================= */ .player-modal{ position:fixed !important; inset:0 !important; z-index:1000 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:24px !important; background:rgba(5,3,4,.86) !important; backdrop-filter:blur(10px); overflow:auto !important; } .player-modal.hidden{ display:none !important; } .player-shell{ width:min(860px,92vw) !important; max-width:860px !important; margin:auto !important; padding:18px !important; border:1px solid rgba(230,125,155,.20); border-radius:18px; background: linear-gradient( 145deg, rgba(30,18,22,.98), rgba(12,8,10,.98) ); box-shadow: 0 30px 80px rgba(0,0,0,.55); } .player-top{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:20px; margin-bottom:14px; } .player-top h2{ margin:3px 0 0 !important; font-size:clamp(22px,3vw,30px) !important; line-height:1.05; } .player-top .eyebrow{ font-size:10px; letter-spacing:.18em; } .close-btn{ flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(230,125,155,.20); border-radius:50%; background:rgba(255,255,255,.035); color:#f7edf0; font-size:22px; } #videoPlayer{ display:block; width:100% !important; max-height:58vh !important; aspect-ratio:16 / 9 !important; object-fit:contain; border:1px solid rgba(230,125,155,.16) !important; border-radius:13px; background:#000 !important; } .player-actions{ display:flex !important; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:9px !important; margin-top:12px !important; } .player-actions button{ min-height:42px; padding:9px 15px; border:1px solid rgba(230,125,155,.24); border-radius:11px; background:rgba(255,255,255,.035); color:#f5e9ed; font-size:13px; } .player-actions button:hover{ border-color:rgba(239,127,160,.55); background:rgba(220,90,125,.10); } .player-note{ margin:10px 2px 0 !important; font-size:12px; line-height:1.45; color:rgba(245,233,237,.50) !important; } @media(max-width:650px){ .player-modal{ padding:10px !important; } .player-shell{ width:100% !important; padding:12px !important; border-radius:14px; } #videoPlayer{ max-height:46vh !important; } .player-top h2{ font-size:21px !important; } .player-actions{ display:grid !important; grid-template-columns:1fr 1fr; } .player-actions button{ width:100%; } } /* ========================================================= VALENNE — MOBILE HORIZONTAL SWIPE FIX ========================================================= */ @media (max-width: 768px){ /* Fileiras de filmes/cards */ .premium-recent-row, .home-year-block .premium-recent-row, .featured-grid{ display:flex !important; flex-wrap:nowrap !important; width:100% !important; max-width:100% !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch !important; scroll-snap-type:x proximity !important; scroll-behavior:smooth; gap:14px !important; padding-right:28px !important; padding-bottom:8px !important; scrollbar-width:none !important; touch-action:pan-x pan-y !important; } .premium-recent-row::-webkit-scrollbar, .home-year-block .premium-recent-row::-webkit-scrollbar, .featured-grid::-webkit-scrollbar{ display:none !important; } /* Cards não podem encolher */ .premium-recent-row > .card, .home-year-block .premium-recent-row > .card, .featured-grid > .card{ flex:0 0 76vw !important; width:76vw !important; max-width:280px !important; scroll-snap-align:start !important; scroll-snap-stop:normal !important; } /* Blocos dos anos não podem cortar a fileira */ .home-years, .home-year-block{ width:100% !important; max-width:100% !important; overflow:visible !important; } /* Letras A-Z */ .premium-letters, .alphabet-row, .letters-row{ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; scroll-snap-type:x proximity !important; touch-action:pan-x pan-y !important; } .premium-letters::-webkit-scrollbar, .alphabet-row::-webkit-scrollbar, .letters-row::-webkit-scrollbar{ display:none !important; } .premium-letter{ flex:0 0 auto !important; scroll-snap-align:start !important; } } /* ========================================================= VALENNE — CENTRALIZAR MENU INFERIOR Canais / Filmes / Séries ========================================================= */ .home-footer, .home-sections, .bottom-sections, .feature-links, .category-links { width: 100%; max-width: 900px; margin-left: auto !important; margin-right: auto !important; justify-content: center !important; } /* ========================================================= VALENNE — MENU INFERIOR COM 3 ITENS CENTRALIZADOS ========================================================= */ .category-strip{ grid-template-columns:repeat(3,1fr) !important; width:100% !important; } .category-strip button{ width:100% !important; } /* ========================================================= VALENNE — BUSCA LIMPA ========================================================= */ /* remove a lupa do menu superior */ .search-btn{ display:none !important; } /* remove contador ao lado do título */ .section-head > span, #sectionHint{ display:none !important; } /* ========================================================= VALENNE — BUSCA LIMPA ========================================================= */ /* remove a lupa do menu superior */ .search-btn{ display:none !important; } /* remove contador ao lado do título */ .section-head > span, #sectionHint{ display:none !important; } /* ========================================================= VALENNE — BUSCA ÚNICA DA SEÇÃO ========================================================= */ #sectionSearchBox{ display:flex; width:min(360px,38vw); margin-left:auto; align-items:center; } #sectionSearchBox input{ width:100%; } /* contador antigo some definitivamente */ #sectionHint{ display:none !important; } /* lupa antiga do topo */ .search-btn{ display:none !important; } /* título de um lado, busca do outro */ .section-head{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:24px !important; } /* celular/tablet estreito */ @media(max-width:700px){ .section-head{ align-items:flex-start !important; flex-direction:column !important; gap:14px !important; } #sectionSearchBox{ width:100% !important; max-width:none !important; margin-left:0 !important; } } #sectionSearchBox{ display:none; width:min(360px,38vw); margin-left:auto; } #sectionSearchBox input{ width:100%; padding:14px 18px; border:1px solid rgba(239,127,160,.35); border-radius:14px; background:rgba(35,18,23,.72); color:#fff; outline:none; } #sectionSearchBox input::placeholder{ color:rgba(255,255,255,.65); } @media(max-width:700px){ #sectionSearchBox{ width:100% !important; margin-left:0 !important; } } /* ========================================================= VALENNE — CABEÇALHO DA SEÇÃO título à esquerda / busca à direita ========================================================= */ .section-head{ display:grid !important; grid-template-columns:1fr auto !important; align-items:center !important; gap:28px !important; } /* garante o título na esquerda */ .section-head > div:first-child{ grid-column:1 !important; grid-row:1 !important; } /* busca fica na direita */ #sectionSearchBox{ grid-column:2 !important; grid-row:1 !important; width:min(360px,38vw) !important; margin:0 !important; justify-self:end !important; } /* remove "ACERVO VALENNE" desse cabeçalho */ .section-head .section-kicker, .section-head .eyebrow{ display:none !important; } /* deixa só "Filmes / Séries / Canais" */ .section-head h2{ margin:0 !important; } /* tablet/celular */ @media(max-width:700px){ .section-head{ grid-template-columns:1fr !important; gap:14px !important; } .section-head > div:first-child, #sectionSearchBox{ grid-column:1 !important; } .section-head > div:first-child{ grid-row:1 !important; } #sectionSearchBox{ grid-row:2 !important; width:100% !important; justify-self:stretch !important; } } /* Refresh da Valenne sempre inicia sem animação de scroll */ html.valenne-loading{ scroll-behavior:auto !important; }