/*GENERAL*/
html{
}
.web-container{
max-width:1000px;
margin:0px auto 0px auto;
background-color:;
scroll-behavior: smooth;
}
body{
font-family:'Roboto', sans-serif;
letter-spacing:0.4px;
color:#444444;
background-color:white;
font-weight:300;
line-height:1.5;
margin:0px;
}
#container::before{
content:"";
content: "";
position: absolute;
background-color: black;
height: 100%;
min-width: 1000px;
margin: 0 auto;
z-index: 1;
filter: opacity(0.6);
display:none;
}
#container{
background-color:#f5f5f5;
}
a{
text-decoration:none;
color:#444444;
opacity:1;
transition: 0.3s ease;
}
a:hover{
opacity:80%;}
strong{
font-weight:400;
}
ul{
list-style:none;
}
.hidden{
display:none;
}
/*HEADER*/
header{
width:100%;
background-color: #1b1b1b;
z-index:100;
top:0px;
padding:3px 0px;
}
.site-header{
display: flex;
justify-content: center;
align-items: center;
height:auto;
padding:0px 30px;
}
.site-nav{
float: right;
margin-left: ;
font-size:14px;
font-weight:400;
}
.site-nav ul{
padding:0px;
}
.site-nav li{
display:inline-block;
height:100%;
position:relative;
margin-left:10px;
}
.site-nav li a{
color:white;
border-radius: 100px;
padding: 6px 14px;
background-color:#262727;
font-size: 12px;
font-weight:400;
text-transform: uppercase;
}
.site-title img{
width:125px;
line-height:0;
vertical-align:middle;
border-radius:3px;
}
.nav-cta{
margin-left:auto;
}
.nav-cta a{
font-size:12px;
background-color:;
line-height: 1.5;
color: #ffec00;
border:1px solid;
border-radius: 50px;
font-weight: 400;
padding: 4px 8px;
margin-left:18px;
margin-right:4px;
}
@media (max-width: 650px){
header{
position:sticky;
}
.site-header{
height:40px;
padding:0px 12px;
}
.site-nav li a{
font-size:10px;
padding: 6px 10px;
}
.nav-cta {
margin-left:auto;
}
.site-nav{
margin-left:0px;
}
}
/*HEADERS & TEXT
* OPTIMIZAR*/
h2,h3,h4,p{
margin:0px;
}
.page-title h1{
font-size:25px;
margin:0px;
font-weight:500;
text-transform:capitalize;
}
.page-title div{
margin-right:8px;
}
.page-title img.emoji{
font-size:28px;
}
.page-title{
display:flex;
font-size: 25px;
font-weight: 500;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 30px;
padding-right: 30px;
background-color: white;
text-transform:;
margin:0px;
}
.page-intro{
display: -webkit-box;
max-width: 100%;
line-height: 1.5;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color:#6f6f6f;
font-size:14px;
padding:0px 30px;
margin:5px 0px 5px 0px;
}
.sub-title{
padding:5px 30px;
font-weight: 500;
text-transform:;
font-size: 18px;
text-align: left;
margin-bottom:5px;
background-color:#e9e9e9;
}
.description{
color:#646970;
margin:30px 2% 10px 2%;
}
.description h2{
font-size: 16px;
background-color: transparent;
margin-left: 20px;
margin-right: 20px;
position: static;
font-weight:;
box-shadow: 0px 0px;
text-align:left;
padding:0px;
text-transform:none;
font-weight:500;
}
.description h3{
text-align: ;
margin-left: 20px;
margin-right: 20px;
font-size:16px;
font-weight:500;
padding-bottom:5px;
}
.description p{
text-align: justify;
margin-left: 20px;
margin-right: 20px;
font-size:14px;
padding-bottom:10px;
}
@media (max-width: 650px){
.page-title{
padding-top: 10px;
padding-bottom: 10px;
font-size:18px;
padding-left: 12px;
padding-right: 10px;
text-transform:;
}
.page-title h1{
font-size:18px;
}
.sub-title {
font-size:16px;
text-transform:none;
text-align:left;
padding-left:15px;
padding-right:15px;
margin-bottom:5px;
}
.page-intro{
font-size:12px;
padding:0px 10px;
line-height:1.3;
}
p{
font-weight:300;
}
}
/*DISPLAY SITES YARPP
* OPTIMIZAR*/
.yarpp{
padding:0px!important;
margin:0px!important
}
.yarpp-display{
width: auto;
height:;
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 15px 25px 25px 25px;
grid-gap:30px 20px;
}
#paysites .yarpp-display{
grid-template-columns: repeat(4, 1fr);
}
.no-results{
padding: 8px 30px;
color: #949494;
font-size:14px;
}
.site-display{
margin:;
background-color: white;
border: ;
box-shadow: 0px 0px 8px 2px #e5e5e5;
/*box-shadow: 0px 3px 10px 0px #c7c7c7;*/
border-radius: 5px;
position:relative;
}
.site-link {
color:#444444;
font-weight:400;
}
.site-title .icon{
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0px;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
.site-display .flash-emoji{
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0px;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
.site-display .site-title {
padding: 0px 5px 0px 5px;
font-weight: 500;
font-size:15px;
margin:4px 0px 0px 0px;
display: -webkit-box;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.site-display .site-title span{
color:grey;
font-size:12px;
text-transform:capitalize;
}
.site-info p{
display: -webkit-box;
font-size:14px;
font-weight:300;
max-width: 100%;
height:;
line-height: 1.5;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
padding:2px 8px 2px 8px;
text-align: left;
margin: 0px;
color:#646970;
}
#channels .site-info{
margin-bottom:8px;
}
.direct-link{
text-align: center;
padding: 5px 3px 5px 3px;
font-size: 13px;
color: #646970cf;
font-weight: 300;
border-radius: 0px 0px 5px 5px;
margin-top: 2px;
background-color: #f8f8f8;
border-top: 1px solid #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
}
.direct-link svg{
fill:#646970cf;
margin-left:5px;
width:14px;
}
@media (max-width: 750px){
.direct-link{
font-size:11px!important;
}
.direct-link svg{
width:12px;
}
}
.paysite .site-img{
aspect-ratio:317/500;
}
.free-site .site-img{
aspect-ratio:16/9;
overflow: hidden;
}
.site-img img{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
max-width:100%;
height:auto;
}
.site-img{
width: 100%;
display:inline-block;
position:relative;
}
#free .site-img img{
aspect-ratio:16/9;
}
#free-img{
max-width:100%;
}
.site-img .quality{
position:absolute;
color:white;
font-size:12px;
top:5px;
left:5px;
padding:4px 6px;
line-height:1;
background-color:#00000099;
border-radius:50px;
}
.site-img .ads{
font-size: 9px;
padding: 3px 5px;
line-height:1;
text-transform: capitalize;
font-weight: 300;
color:#c1c1c1;
position:absolute;
bottom:5px;
left:5px;
background-color:#00000099;
border-radius:50px;
}
.site-img .ads .low{
color:lime;
}
.site-img .ads .medium{
color:#ffdf22;
}
.site-img .ads .high{
color:red;
}
#site-favicon{
font-size:12px;
margin-bottom:4px;
text-align:right;
z-index:1;
position:absolute;
color:white;
vertical-align:middle;
left:10px;
top:6px;
background-color:;
border-radius:20px;
display: flex;
background-color:;
border-radius: 4px;
padding: 0px;
}
#site-favicon img{
width:16px;
height:16px;
border-radius:4px;
vertical-align:middle;
margin:auto;
}
#favicon-txt{
padding: 0px 2px 0px 5px;
color: #fff;
font-size: 12px;
text-transform: capitalize;
font-weight: 500;
text-shadow: 0.09em 0.09em #3a3a3a;
}
.creator-icon {
line-height:0;
z-index:1;
position:absolute;
color:white;
background-color:#00000078;
padding:5px;
border-radius:2px;
left:5px;
top:3px;
font-size:10px;
display:flex;
align-items:center;
border-radius:50px;
}
.creator-icon img{
width:18px;
height:18px;
filter:invert(1);
}
.rank{
display:none;
}
#paysites .rank{
display:block;
position:absolute;
font-size:12px;
font-weight:400;
letter-spacing:0.6px;
color:white;
background-color:#00000099;
top:8px;
left:8px;
padding:0px 3px;
border-radius:5px;
z-index:1;
}
.tag-block{
font-size: 12px;
text-align: right;
z-index: 1;
position: absolute;
color: white;
right: 5px;
bottom: 5px;
display:inline-flex;
align-items:center;
}
.tag-block div.free-tag{
background-color: #00000099;
border-radius: 50px;
padding:4px 6px;
line-height:1;
}
.tag-block div.lang-tag{
padding:0px;
line-height:
background-color:none;
margin-right:5px;
font-size:12px;
line-height:0;
}
.free-info{
font-size:12px;
color:#dcdcde;
font-weight:300;
margin-bottom:7px;
text-align:right;
z-index:1;
position:absolute;
background-color:#00000078;
padding:0px 5px;
vertical-align:middle;
left:0px;
bottom:0px;
border-radius:0px 3px 0px 0px;
display:;
}
/*CATEGORY TAGS
* solo en uso*/
.category-tag{
position:absolute;
top:8px;
right:8px;
color:#feac32;
font-size:14px;
}
.category-tag img{
height:28px;
}
.category-tag.horizontal img{
width:35px;
height:auto;
background-color:white;
border-radius:5px;
padding:5px;
}
@media (max-width: 750px){
.category-tag{
position:absolute;
top:5px;
right:5px;
}
}
/*TAGS
* OPTIMIZAR!!!!*/
.new-date{
font-size:11px;
padding:0px 5px;
color:#00a107;
font-weight:400;
text-align:right;
background-color:#f6f7f7;
border-radius:5px;
position:absolute;
top:8px;
right:8px;
}
.new-date.deal-tag{
color: white;
background-color:#d63638;
padding: 1px 5px 0px 3px;
font-size:11px;
}
.new-date img{
border-radius:0px;
}
.new-date.flash-sale.fixed-deal{
}
.new-date.flash-sale,.discount{
font-size:11px;
background-color: #ffec00;
color: #1d2327;
line-height:1.5;
}
.deal-slider .site-display .rank{
display:none!important;
}
.days-left{
position:absolute;
font-size:9px;
font-weight:300;
color: #ffec01;
background-color:#00000099;
line-height:1.1;
left:8px;
top:8px;
border-radius:5px;
padding:3px 5px;
text-align:center;
}
.days-left b{
font-weight:400;
font-size:10px;
}
.yarpp-display .new-date.flash-sale, .discount{
font-size:11px;
}
.new-date.discount{
font-size:11px;
padding:auto;
top:0px;
right:0px;
text-align:center;
width:100%;
animation-name: parpadeo;
animation-duration: 2s;
animation-timing-function: step-end;
animation-iteration-count: infinite;
-webkit-animation-name:parpadeo;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: step-end;
-webkit-animation-iteration-count: infinite;
}
@keyframes parpadeo {
0% {opacity: 0;}
50% {opacity: 1;}
100% { opacity: 0; }
}
}
#black-friday.new-date{
background-color:#101010;
color:white;
font-size:12px;
padding: 3px 8px 3px 8px;
}
.new-date img{
width:12px;
margin-right:3px;
}
.site-img video{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
max-width: 100%;
height: auto;
}
@media (max-width: 750px){
.yarpp-display {
grid-template-columns: repeat(3, 1fr);
}
#paysites .yarpp-display{
grid-template-columns: repeat(3, 1fr);
}
.free-tag,.free-info{
font-size:10px;
bottom:3px;
right:3px;
}
.site-img .quality{
font-size:10px;
}
.site-img .ads{
font-size:9px;
}
.yarpp-display .new-date.flash-sale, .new-date.discount{
font-size:10px;
}
}
@media (max-width: 600px){
#paysites .rank{
top:5px;
left:5px;
}
.yarpp-display {
grid-template-columns: repeat(2, 1fr);
padding: 15px 15px 25px 15px;
grid-gap:20px 14px;
}
#paysites .yarpp-display{
grid-template-columns: repeat(2, 1fr);
}
.yarpp{
margin:0px 5px 15px 5px;
}
.site-info h3 {
font-size: 14px;
}
.site-info div{
font-size: 12px;
}
.site-info p{
font-size:12px;
line-height:1.4;
}
.site-display .site-title{
font-size:14px;
}
}
/*SLIDER PAYSITES MOBILE 2.0*/
.yarpp-display::-webkit-scrollbar{
height: 0px;
}
/*RELATED CATEGORIES
* UNIR ESTILOS SEMEJANTES*/
.intro-related{
padding:0px;
padding-bottom:10px;
}
.center{
text-align:center;
}
.yarpp-related-cat div{
font-size:14px;
display: inline-flex;
margin:5px 3px;
}
.yarpp-related-cat::-webkit-scrollbar {
height: 0px;
}
.yarpp-related-cat::-webkit-scrollbar-thumb {
background: #dcdcde82;
}
.yarpp-related-cat a{
padding: 4px 10px;
background-color: white;
border: 1px solid #e9e9e9;
border-radius: 100px;
color: #444444;
font-weight: 300!important;
}
.yarpp-related-cat a::first-letter{
text-transform:uppercase;
}
.capitalize {
text-transform:capitalize;
}
#popular-categories-top{
padding:10px 0px 0px 0px;
}
@media (max-width: 800px){
.intro-related .yarpp-related-cat{
overflow: auto;
white-space: nowrap;
padding: 0px 7px!important;
}
.yarpp-related-cat a{
font-size:12px;
}
#popular-categories-top .intro-related .yarpp-related-cat div a{
width:100%;
}
}
/*Related footer*/
.footer-related{
background-color:#eee;
padding:0px 0px 20px 0px;
}
.footer-related .yarpp{
margin:0px 5px;
}
.footer-related .related-title {
background-color:#e6e6e7;
text-align:center;
padding:5px;
margin:25px 0px 12px 0px;
font-weight:500;
font-size:15px;
color:#444444;
}
.footer-related .free-down{
display:none;
}
/*PAYSITE POST TYPE
* SOLO PLANTILLA!!*/
.paysite{
width:100%;
text-align:;
}
.paysite-content{
width:auto;
margin:0px auto 20px auto;
}
.paysite-content h1{
display: flex;
align-items: center;
}
.paysite-content h1 img{
width:1em;
height:1em;
vertical-align: -0.1em !important;
margin-right:5px;
}
.paysite-content h1 span{
color: grey;
text-transform: capitalize;
margin-left:8px;
}
.paysite-info{
display:flex;
margin: 15px;
}
.paysite-img{
width: 28%;
text-align: center;
font-size: 14px;
margin-left: 30px;
}
.paysite-img img{
width:100%;
border-radius:5px;
}
.paysite-img span{
height: 20px;
display:flex;
justify-content: center;
align-items: center;
width:100%;
background-color:;
border-radius:5px;
margin:0px 0px 2px 0px;
}
.paysite-img span img{
width:18px;
margin-right:2px;
}
.paysite-img span p{
height:20px;
font-weight:500;
color:#3db22f;
}
.paysite-txt{
width:80%;
margin:15px 30px;
}
.about{
font-weight:500;
}
.paysite-txt p{
}
.paysite-txt .intro-related{
}
.paysite-button div{
width:auto;
background-color:#1b1b1b;
color:white;
text-align:center;
padding:10px;
border-radius:5px;
font-weight:500;
display:flex;
justify-content:center;
}
.paysite-button div img{
filter:invert(1);
margin-left:5px;
}
#link-2.paysite-button{
padding:5px 15px 5px 15px;
}
#related-1, #related-2{
margin-top:10px;
}
.free-alt-link {
text-align:center;
margin:14px 5px;
font-size:13px;
}
.free-alt-link a{
color:#c3c4c7;
}
#link-1{
margin-top: 15px;
}
@media (max-width: 850px){
.paysite-img{
width:40%;
margin-left:0px;
}
.paysite-txt{
width:60%;
}
}
@media (max-width: 650px){
#link-1 {
display:none;
}
.paysite-txt {
margin:10px 10px 10px 10px;
}
.paysite-txt p{
font-size:14px;
}
.paysite-info{
margin-bottom:5px;
}
.paysite .yarpp a{
font-size:14px;
}
}
@media (max-width: 450px){
#related-1{
display:none;
}
.paysite-txt {
margin-top:0px;
}
}
@media (min-width: 450px){
#related-2{
display:none;
}
}
@media (min-width: 650px){
#link-2{
display:none;
}
.free-alt-link{
display:none;
}
}
/*CATEGORIES PAGE*/
#page-categories h2{
text-align:center;
}
#page-categories .yarpp{
padding-bottom:20px!important;
padding-top:0px!important;
}
/*FILTER FORM (SLIDER)
* SOLO CATEGORIAS! (+slider?)*/
.filter-form{
background-color: white;
max-width: 170px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 20px;
border-radius: 8px;
border:1px solid #e9e9e9;
}
.filter-form input{
text-align: left;
border-radius: 8px;
border: 0px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
width: 100%;
font-size:14px;
}
.filter-form img{
height:25px;
filter: opacity(0.3);
margin-right: 0px;
}
.filter-form input:focus {
outline: none;
}
/*CATEGORIES PAGE V2
* V2!!!!"*/
#cat-v2{
text-align:center;
position:relative;
margin:25px;
}
#cat-v2 .all-categories{
padding:25px 0px 40px 0px;
display:flex;
grid-template-columns:repeat(4,1fr);
max-width:1000px;
margin:0 auto;
flex-wrap:wrap;
gap:10px;
align-items:center;
justify-content: center;
}
#cat-v2 .all-categories a{
display:inline-flex;
width: auto;
background-color: white;
padding: 4px 10px;
font-weight: 300;
border-radius: 100px;
font-size: 14px;
text-align: center;
border:1px solid #e9e9e9 ;
text-transform:capitalize;
}
#cat-v2 .all-categories a span{
margin-right:4px;
}
#cat-v2 .all-categories a:hover{
background-color:white;
}
@media (max-width: 750px){
#cat-v2{
text-align:center;
position:relative;
margin:15px;
}
#cat-v2 .all-categories{
padding-top:15px;
}
#cat-v2 .all-categories a{
font-size:14px;
}
#cat-v2 #search-cat{
width: 100%;
}
}
/*SUBCATEGORIES*/
#more-btn{
text-align:center;
padding-bottom:30px;
display:flex;
justify-content:center;
}
#more-btn a{
color: #135e96;
background-color: #ffffff;
padding: 8px 40px;
border-radius: 100px;
font-size: 14px;
border: 1px solid #c3ddf6;
font-weight: 500;
}
#more-btn .arrow{
width:16px;
vertical-align:middle;
padding-bottom:1px;
margin-left:8px;
}
#more-btn.end-scroll{
display: flex;
align-items: center;
margin-bottom: 25px;
}
#more-btn.end-scroll a{
height: 35px;
width: 60px;
padding: 0px;
display: flex;
align-items: center;
justify-content: center;
}
#more-btn.end-scroll a img{
margin: 0px;
}
@media (max-width: 750px){
#more-btn{
text-align:center;
padding-bottom:30px;
}
#more-btn a{
font-size:13px;
width:100%;
margin:0px 15px;
}
}
/*RELATED FOOTER
* V2 !!!*/
.footer-related #free-anchor{
display:none;
}
.footer-related #more-btn a{
color: #135e96;
font-weight: 400;
font-size: 12px;
border:1px solid;
background-color:transparent;
padding:6px 30px;
border-radius:8px;
}
.footer-links{
padding:0px 25px;
}
.footer-links .yarpp{
grid-gap:15px!important;
text-align:center;
display:grid;
grid-template-columns:repeat(4,1fr);
}
.footer-links .yarpp div{
margin:0px;
}
.footer-links .yarpp div a{
border-radius:8px;
padding:15px 10px 15px 10px;
width:100%;
display:grid;
font-size:25px;
font-weight:400!important;
color:;
align-items:center;
}
.footer-links .yarpp div a .emoji{
margin:0 auto!important;
padding-bottom:3px!important;
}
.footer-links .yarpp div a span{
font-size:14px;
}
@media (max-width: 650px){
.footer-links{
padding:0px 15px;
}
.footer-links .yarpp{
grid-gap:0px 10px;
grid-template-columns:repeat(2,1fr);
}
.footer-links .yarpp div a{
font-size:20px;
}
.footer-links .yarpp div a span{
font-size:12px;
}
}
/*HEAD LINKS*/
#all-cat{
color: #195f94;
border:1px solid #c3ddf6;
font-weight: 400;
background-color:#eff7ff;
align-items:center;
}
#all-cat span{
font-weight: 400;
display:inline-flex;
align-items:center;
justify-content:center;
}
.footer-links #all-cat{
background-color:white;
}
.footer-links #all-cat .arrow{
width:16px;
margin-left:5px;
}
/* POPULAR CATEGORIES
* SOLO HOME (OBSOLETO?)*/
.popular-categories{
text-align:center;
max-width:800px;
margin:0 auto;
border-radius:20px;
padding-top:12px;
margin-bottom:30px;
}
.popular-categories h4{
padding-bottom:8px;
font-weight:400;
}
/*PORN DEALS*/
#slider.deals .slider-head .sub-title{
display:flex;
align-items:center;
}
.deal-info{
background-color:white;
border-radius:5px;
padding:2px 6px;
background-color:#ffec00;
font-size:13px;
margin-right:12px;
}
#slider.deals .slider-head{
margin-bottom:0px!important;
}
#slider.deals .yarpp-display{
margin-top:0px!important;
}
.deal-closed{
height:auto;
width:100%;
position:absolute;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.517266281512605) 25%, rgba(0,0,0,0.5032606792717087) 49%, rgba(0,0,0,0.5032606792717087) 75%, rgba(255,255,255,0) 100%);
bottom:25px;
top:15px;
z-index:1;
color:;
display:flex;
align-items:center;
justify-content:center;
}
.deal-closed-banner{
background-color:white;
padding:15px;
border-radius:5px;
color:;
text-align:center;
}
.deal-closed-text{
font-weight:400;
font-size:12px;
}
.countdown-table {
margin-top:8px;
display: grid;
grid-template-columns:45px 45px 45px 45px;
justify-content: center;
gap: 8px;
}
.countdown-cell {
text-align: center;
font-size: 30px;
}
.countdown-number {
font-size: 14px;
font-weight: bold;
background-color:#444444;
color:white;
border-radius:5px;
padding:4px 0px;
}
.countdown-label {
font-size: 8px;
color: #444444;
text-transform: uppercase;
margin-top:4px;
}
/*DEAL BANNERS*/
.deal-banner{
min-width: 30%;
max-width: 30%;
box-shadow:0px 0px 8px 2px #e5e5e5;
border-radius:5px;
}
.deal-banner img{
border-radius:5px;
width:100%;
height:auto;
display:block;
}
@media (max-width: 750px){
.deal-banner{
min-width: 65%;
max-width: 65%;
}
}
/*FOOTER TOP LINKS BETA
* UNIR ESTILO*/
#top-lists .sub-title{
text-align:center;
}
.top-lists{
display:grid;
grid-template-columns: repeat(4, 1fr);
padding:20px 40px;
grid-gap:20px;
}
.top-lists .tlist{
width:auto;
background-color:white;
padding:5px 15px;
color:#135e96;
font-weight:300;
border-radius:10px;
font-size:14px;
text-align:center;
border:1px solid #c3ddf6;
}
.top-lists .tlist img{
font-size:20px;
vertical-align:middle;
}
.top-lists .tlist .tlist-txt{
padding-left:5px;
}
@media (max-width: 750px){
.top-lists{
grid-template-columns: repeat(2, 1fr);
grid-gap:18px;
padding:20px 25px;
}
}
/*SLIDER*/
#slider .slider-head{
padding: 5px 30px;
font-weight: 500;
text-transform: ;
font-size: 20px;
text-align: center;
margin-bottom: 5px;
background-color: #e9e9e9;
display:flex;
align-items:center;
}
#slider .slider-head .sub-title{
padding:0px;
background-color:transparent;
text-align:left;
margin:0px;
}
#slider .steps{
margin-left:auto;
display:grid;
grid-template-columns:repeat(2,1fr);
grid-gap:25px;
}
#slider .steps button{
padding:0px;
border:0px;
background:none;
cursor:pointer;
height:auto;
line-height:0;
border-radius:5px;
}
#slider .steps button img{
opacity:0.7;
width:30px;
}
#slider .steps .prev{
opacity:0.3;
}
#slider .slider-on {
position:relative;
}
#slider .yarpp-display{
display:flex;
overflow:auto;
}
#slider .site-display{
min-width:20%;
max-width:20%;
}
#slider.free-slider .site-display{
min-width:27%;
max-width:27%;
}
#slider #paysite-sub.slider-off .yarpp-display{
display:grid;
}
#slider #paysite-sub.slider-off .yarpp-display .site-display{
min-width:none;
max-width:none;
}
@media (max-width: 750px){
#slider .site-display{
min-width:38%;
}
#slider.free-slider .site-display{
min-width:38%;;
}
#slider .steps{
display:none;
}
#slider .slider-head{
padding-left: 15px;
padding-right:15px;
}
}
@media (max-width: 450px){
#slider.free-slider .site-display{
min-width:42%;;
}
}
/*OPEN/CLOSE MENU*/
#menu-mobile{
display:none;
}
#menu-mobile button{
padding: 0px;
background-color: transparent;
border: 0px;
}
#menu-mobile button img{
filter:invert(100%);
width:20px;
}
#toggle-button{
position:absolute;
font-size:40px;
font-weight:300;
right:0px;
cursor:pointer;
color: white;
border-radius: 100px;
padding: 0px 15px!important;
background-color: #262727;
font-weight: 400;
text-transform: uppercase;
}
#toggle-button img{
width:28px!important;
}
#close-button{
position:absolute ;
right: 10px;
padding:10px;
cursor:pointer;
display:none;
background:none;
border:0px;
color:white;
font-size:20px;
top:15px;
padding:15px 10px;
}
#close-button img{
height: 25px!important;
width: auto;
}
@media (max-width: 800px){
#toggle-button .close {
display: none;
}
#toggle-button.active .open {
display: none;
}
#toggle-button.active .close {
display: inline-block;
}
}
/*SIDEBAR*/
#sidebar.hidden{
display:none;
}
#sidebar .top-categories p{
font-size:14px;
color:white;
font-weight:500;
}
#sidebar .top-categories p.tc1{
margin-bottom:8px;
}
#sidebar .top-categories p.tc2{
margin-top:10px;
margin-bottom:8px;
}
#sidebar .search {
padding-top:20px;
}
#sidebar .filter-form {
padding:6px 10px;
}
#sidebar .menu{
padding:20px;
padding-top:0px;
}
#sidebar a{
color:white;
}
#sidebar nav #search-results{
display: ;
padding:15px 0px;
}
#sidebar nav a span{
margin-right:3px;
}
#sidebar nav a mark {
background-color: transparent;
color: inherit;
font-weight:600;
}
#sidebar nav a:hover{
background-color:white;
}
#sidebar .sidebar-banner{
position: sticky;
top: 0px;
padding:25px;
}
#sidebar .sidebar-banner p{
font-weight: 400;
padding:15px 10px;
font-size:14px;
text-align: center;
color:#949494;
background-color: #2a2a2a;
border-radius: 8px;
display:grid;
}
#sidebar .en-cat a{
font-size: 12px;
font-weight: 500;
color: grey;
text-transform:none;
}
#sidebar .sidebar-banner p img{
opacity:0.4;
filter:invert(1);
margin:0 auto;
height:24px;
display:flex;
align-items:center;
}
@media (max-width: 800px){
#sidebar.hidden{
display:block;
right:-300px;
}
#sidebar.visible {
display: block;
left:0;
}
.site-header{
height:40px;
margin-left:0px;
}
.hidden-mobile{
display:none;
}
#menu-mobile{
display:flex;
align-items:center;
width:40px;
color:grey;
}
#sidebar{
position:fixed;
z-index:100;
top:46px;
bottom:0px;
width:300px;
transition: right 0.3s ease;
overflow:auto;
background-color:#222;
z-index:2;
margin-left:auto;
right:300px;
}
#sidebar.visible {
display: block;
right:0;
}
#sidebar nav div{
grid-gap:10px;
border:0px;
}
#sidebar nav a{
color:white;
background-color:#2a2a2a;
font-size:12px;
padding:5px 10px;
margin:4px 2px;
border-radius:;
font-weight:;
display:inline-flex;
align-items:center;
border-radius:5px;
}
#sidebar nav a span{
font-size:18px;
margin-right:10px;
display:none;
}
#sidebar nav a:hover{
background-color:#313131;
}
#sidebar .search{
position:sticky;
top:0px;
z-index:1;
background-color:#222222;
display:grid;
padding-top:15px;
padding-bottom:15px;
}
#sidebar .search .top-links{
font-weight:400;
}
#sidebar .search .top-links .new-feature{
display: block;
font-size: 8px;
background-color: #ffec01;
line-height: 1;
color: black;
padding: 1px 2px;
border-radius: 2px;
margin: 0px 0px 0px 4px;
}
#sidebar .search .top-links a{
font-weight:400;
border-radius:100px;
font-size:9px!important;
}
#sidebar .search .top-links a img{
height: 12px;
width:12px;
margin-right: 3px;
}
#sidebar .search .filter-form{
max-width:100%;
width:100%;
box-sizing:border-box;
}
}
/*FOOTER*/
.footer{
text-align:center;
margin-bottom: 20px;
margin-top: 15px;
text-align: center;
padding: 10px 10px 10px 10px;
font-size:14px;
color:grey;
}
.contact a {
padding: 3px 15px;
background-color: #f1f6ff;
border-radius: 15px;
color: #4b708c;
font-weight: 500;
font-size: 12px;
border: 1px solid #c3ddf7;
}
.copyright{
margin-top:18px;
}
.sitemap{
margin-top: 15px;
display: block;
}
.sitemap a{
color:#bbbbbb;
font-size:13px;
display: inline-flex;
margin: 10px;
}
.go-back{
display:none;
}
.footer .lang ul{
display: inline-flex;
padding:15px 5px;
}
.footer .lang ul li a{
color:grey;
font-size:13px;
margin:0px 8px;
}
.lang-icon {
width:18px;
opacity:40%;
}
.footer .network {
margin-top:20px;
color:#125e96;
}
.footer .network a{
margin-top:20px;
color:#125e96;
}
/*SHOW MORE BTN
* solo btn more!!!*/
#more-btn.show-more button{
color: #135e96;
background-color: #ffffff;
padding: 8px 60px;
border-radius: 100px;
font-size: 14px;
border: 1px solid #c3ddf6;
font-weight: 500;
font-family:'Roboto', sans-serif;
cursor:pointer;
}
#more-btn.show-more .arrow{
transform: rotate(90deg);
}
.loader {
border: 3px solid transparent;
border-top: 3px solid #135e96;
border-radius: 50%;
width: 15px;
height: 15px;
animation: spin 1s linear infinite;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
position: relative;
top: -2px;
display:none;
margin:0 auto;
}
@media (max-width: 750px){
#more-btn.show-more button{
font-size:13px;
}
#more-btn div{
width:100%;
margin:0px 15px;
}
#more-btn div button{
width:100%;
}
}
/* Animación carga */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/*ALTERNATIVE LINKS*/
#alt-links{
padding: 0px 0px 40px 0px;
}
.alt-links{
display: ;
margin-left:25px;
margin-right:25px;
padding-left: 0px;
padding-right: 25px;
padding:5px 25px;
overflow: auto;
white-space: nowrap;
margin-bottom: 0px;
background-color: white;
text-align:center;
border-radius:12px;
border:1px solid #eee;
}
.alt-links img{
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 0.9em !important;
width: 0.9em !important;
margin: 0px;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
.alt-links .alt-title{
text-align: center;
font-weight: 400;
font-size: 14px;
padding: 8px 10px;
padding-left:0px;
background-color:;
display: inline-flex;
position: sticky;
background-color:white;
border-right:1px solid #eee;
}
.alt-links .alt-urls{
padding: 0px;
width: auto;
display: contents;
}
.alt-links .alt-urls a{
font-weight:100;
color:#2271b1;
font-size:14px;
padding: 2px 10px;
margin:0px 3px;
display:inline-flex;
border-radius:10px;
background-color:#ecf3ff69;
}
.alt-links::-webkit-scrollbar{
height:0px;
}
@media (max-width: 650px){
.alt-links .alt-urls a{
font-size:12px;
}
.alt-links .alt-title{
font-size:12px;
padding-right:5px;
}
.alt-links img{
height: 0.7em !important;
width: 0.7em !important;
}
.alt-links {
padding-left:8px;
padding-right:0px;
margin-left:15px;
margin-right:15px;
}
.alt-links .alt-title{
}
}
/*PORNSTARS*/
.site-display.studio{
display:flex;
align-items:center;
padding:25px 15px;
box-shadow:none;
color:#135e96;
}
.site-display.studio .icon{
padding-right:10px;
width:35px;
height:auto;
}
.site-display.studio div{
margin:0px;
padding:0px;
line-height:1.2;
}
.site-display.studio div span{
font-size:14px;
}
.site-display.studio.all{
font-size:14px;
justify-content:center;
font-weight:500;
}
.site-display.studio.all .site-title{
display:flex;
}
.site-display.studio .arrow{
width:16px;
height:auto;
margin-left:10px;
}
@media (max-width: 650px){
.site-display.studio{
padding:15px 8px;
}
.site-display.studio .icon{
padding-right:5px;
}
.site-display.studio div span{
font-size:12px;
}
}
/*COPY AREA EXTRA*/
.copy .copy-img video, .copy .copy-img iframe{
width:100%;
border-radius:8px;
}
.copy .copy-img .preview-tag{
position: absolute;
top: 8px;
left: 8px;
font-weight: 400;
border-radius: 4px;
padding: 3px 5px;
line-height: 1;
font-size: 11px;
background-color: #ffec00;
color: #1d2327;
}
.play-button {
position: absolute;
font-family: 'roboto';
font-weight: 400;
letter-spacing: 0.4px;
font-size: 14px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
background-color: #00000099;
border: none;
padding: 10px 20px;
border-radius: 100px;
cursor: pointer;
display: none;
display:flex;
align-items:center;
justify-content:center;
}
.play-button img{
width:20px!important;
filter:invert(1);
margin-right:3px;
}
/* Estilos para ocultar los controles del video excepto el botón de play/pause */
.video::-webkit-media-controls {
display: none !important;
}
.video::-webkit-media-controls-panel {
display: none !important;
}
.video::-webkit-media-controls-play-button {
display: none !important;
}
.video::-webkit-media-controls-volume-slider {
display: none !important;
}
.video::-webkit-media-controls-timeline {
display: none !important;
}
/*COPY CATEGORY*/
/*COPY V1*/
#copy .h3-sub{
display:flex;
background-color:;
text-transform:capitalize;
}
#copy .h3-sub img{
width:18px;
margin-right:5px;
}
#copy .h3-sub .tag img{
width:16px;
margin-right:5px;
}
.copy{
padding:15px 25px 0px 25px;
display: grid;
grid-template-columns: 1fr;
grid-gap:35px;
}
.copy .copy-container{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
position: relative;
border-radius:8px;
grid-gap:25px;
scroll-margin-top: 70px;
}
.copy .description{
margin:0px;
}
.copy h3{
margin-left: 0px;
margin-right: 0px;
}
.copy p{
margin-left: 0px;
margin-right: 0px;
}
.copy .copy-img{
position:relative;
border-radius:8px;
}
.copy .reverse .copy-img{
order:-1;
}
.copy .copy-img img{
width:100%;
border-radius:8px;
}
.copy .copy-img .tag{
position:absolute;
background-color:;
}
.copy .copy-img .link{
position:absolute;
top: 8px;
right: 8px;
}
.copy .copy-img .link a{
background-color:white;
color:#135e96;
padding:4px 14px;
border-radius:50px;
font-weight:400;
font-size:15px;
display:flex;
border:1px solid #c3ddf6;
}
.copy .copy-img .link a img{
width:16px;
margin-left:5px;
}
@media (max-width: 750px){
.copy{
grid-template-columns:1fr;
padding:15px 15px 0px 15px;
}
.copy .copy-container{
grid-template-columns:1fr;
max-width:500px;
margin:0 auto;
grid-gap:5px;
background-color:white;
box-shadow: 0px 0px 8px 2px #e5e5e5;
}
.copy .description{
margin-bottom:0px;
max-width:500px;
margin:0 auto;
padding:0px 12px 12px 12px;
}
.copy .copy-img{
width:100%;
order: -1;
margin:0 auto;
}
.copy .copy-img.invert{
order:1;
}
.copy .description.invert{
order:2;
}
.copy .copy-img img, .copy .copy-img video, .copy .copy-img iframe{
border-radius:8px 8px 0px 0px;
}
}
/*LISTING WIDE*/
.listing-wide .free-site{
display:none;
}
.listing-wide{
padding:25px;
display:grid;
grid-gap:20px;
/*grid-template-columns:repeat(2, 1fr);*/
max-width:700px;
}
.listing-wide .site-wide{
display:flex;
gap:20px;
background-color:white;
border-radius:8px;
box-shadow: 0px 0px 8px 2px #e5e5e5;
padding:12px;
}
.listing-wide .site-wide .img img{
border-radius:8px;
max-width:200px;
border:1px solid #f5f5f5;
}
.listing-wide .site-wide .img .rank{
position:absolute;
}
.listing-wide .site-wide .img .quality{
position:absolute;
top:8px;
}
.listing-wide .site-wide .head .ads{
bottom:8px;
text-transform:capitalize;
}
.listing-wide .site-wide .img .free-tag{
position:absolute;
bottom:8px;
}
.listing-wide .site-wide .info{
display:grid;
grid-gap:10px;
}
.site-wide .head {
display:flex;
align-items:center;
gap:10px;
}
.site-wide .head .site-icon{
padding:5px;
background-color:#f5f5f5;
height: 28px;
width: 28px;
padding:12px;
display:flex;
align-items:center;
justify-content:center;
border-radius:100px;
}
.site-wide .head .head-info{
display:grid;
align-items:center;
gap:5px;
}
.listing-wide .site-wide .info .site-icon img{
max-width: 28px;
max-height: 28px;
min-width: 16px;
min-height: 16px;
border-radius: 3px;
}
.listing-wide .site-wide .head .head-info .title{
display:flex;
align-items:center;
gap:10px;
font-weight: 500;
font-size: 15px;
margin: 4px 0px 0px 0px;
display: -webkit-box;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
text-transform:capitalize;
}
.listing-wide .site-wide .head .head-info .title span{
color:grey;
font-size:12px;
}
.listing-wide .site-wide .head .head-info .tags{
display:flex;
gap:6px;
}
.listing-wide .site-wide .head .head-info .tags div{
background-color:#f5f5f5;
color:#7b7b7b;
padding:3px 8px;
border-radius:50px;
font-size:12px;
line-height:1;
font-weight:300;
}
.listing-wide .site-wide .bottom{
display:flex;
gap:15px;
}
.listing-wide .site-wide .bottom p{
font-size:14px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
}
.listing-wide .site-wide .info .direct-link{
width:fit-content;
padding:5px 15px;
border-radius:5px;
}
@media (max-width: 650px){
.listing-wide .site-wide .img img{
max-width:150px;
}
}/*
* LOS CHIPS DE LA TARJETA: cristal, y cada uno el suyo.
*
* Son las tres etiquetas que van sobre la foto:
*
* .quality la calidad, arriba a la izquierda
* .ads el nivel de anuncios, abajo a la izquierda
* .free-tag el «Free», en el bloque de etiquetas
*
* Comparten el acabado —cristal esmerilado, mismo velo, mismo desenfoque— y a
* partir de ahí cada uno va por su cuenta: su color de fondo, su color de texto,
* su tamaño. Por eso el fichero está partido en un bloque común y un bloque por
* chip, en vez de una lista de selectores donde tocar uno significa tocar los
* tres.
*/
/* --------------------------------------------------------------------------
1. El centrado, que no estaba
--------------------------------------------------------------------------
NO ERA UNA IMPRESIÓN. Medido a pixel, capturando cada chip a ocho aumentos y
mirando entre qué filas hay tinta:
alto sobre el texto bajo el texto
calidad 20px 4.75px 5.12px centrado
anuncios 15px 3.12px 5.00px 1.9px alto
free 20px — — alto
DE DONDE SALE
De `line-height: 1` con relleno igual arriba y abajo. Suena a centrado y no lo
es: el relleno centra la CAJA DE LÍNEA, y dentro de esa caja el texto no está
en medio. Una fuente reparte su altura entre lo que sube sobre la línea base
—mucho— y lo que baja —poco—, así que la línea base cae por debajo del centro
y el texto queda pegado arriba, con un aire sobrante debajo que nadie ve pero
todos notan.
Y por eso el de calidad SÍ salía centrado: «Full HD» lleva dos eles, que suben
más que las mayúsculas y llenan el hueco de arriba. Con otro texto se
descentra igual que los demás. No estaba bien: estaba de suerte.
COMO SE ARREGLA
`text-box-trim` recorta la caja del texto a lo que de verdad se ve —de la
altura de las mayúsculas a la línea base— y descuenta el resto. A partir de
ahí, un relleno igual arriba y abajo sí centra, porque ya no hay aire
escondido que compensar.
Se hace así y no restando medio píxel al relleno de abajo porque esa cuenta
depende de las métricas de la fuente. Habría que rehacerla si algún día cambia
la tipografía, y nadie se acordaría. Aquí las métricas las lee el navegador.
Va dentro de un `@supports`: Chrome, Edge y Safari lo aplican; Firefox se
queda exactamente con lo que hay hoy. Ninguno empeora.
Medido después: el de anuncios pasa de 1.9px de desvío a 0.1px.
-------------------------------------------------------------------------- */
/*
* EL DE ANUNCIOS NO ESTÁ EN ESTA LISTA, y merece la pena decir por qué.
*
* Lleva icono, y `text-box-trim` recorta la caja a lo que mide el TEXTO. Un
* icono de 12px dentro de una caja recortada a 6 se sale del chip por arriba
* —pasó, se vio—. Allí el centrado lo da la caja flexible, más abajo.
*/
@supports (text-box-trim: trim-both) {
.site-img .quality,
.tag-block div.free-tag {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
/*
* El relleno, otra vez, ahora que centra.
*
* En `em` y el mismo número para los tres, que es lo que los hace
* coherentes: el chip de calidad va a 12px de letra y el de anuncios a 9,
* y con esta cuenta los dos conservan el alto que ya tenían —20px uno,
* 15px el otro— en vez de cada uno por su lado.
*
* 0.478em sale de dejar el alto donde estaba: quitada la parte invisible,
* el texto ocupa unos 0.71em, y (1.667em - 0.71em) / 2 son esos 0.478.
*/
padding-block: 0.478em;
}
}
/* --------------------------------------------------------------------------
2. El acabado común: cristal esmerilado
--------------------------------------------------------------------------
Lo único que comparten los tres. El velo y el desenfoque van en variables
porque son la parte que tiene que ser igual en todos: si se retoca el
desenfoque, se retoca una vez y no tres, y no pueden quedar descuadrados por
olvido.
El COLOR no está aquí, a propósito. Es lo que distingue a cada uno y vive en
su bloque.
-------------------------------------------------------------------------- */
.site-img .quality,
.tag-block div.free-tag {
/*
* El velo por defecto. Cada chip puede pisarlo en su bloque, y el de calidad
* lo hace: sobre negro, el mismo 70% tapa bastante más que sobre blanco.
*
* El de anuncios no está aquí: su fondo es opaco, así que no hay nada detrás
* que desenfocar y el filtro sería trabajo tirado.
*/
--chip-velo: 70%;
--chip-desenfoque: 12px;
backdrop-filter: blur(var(--chip-desenfoque));
-webkit-backdrop-filter: blur(var(--chip-desenfoque));
}
/* --------------------------------------------------------------------------
3. Calidad: cristal oscuro
-------------------------------------------------------------------------- */
.site-img .quality {
/* Medio velo: se apoya en la foto en vez de taparla, y el desenfoque sigue
sujetando la lectura. */
--chip-velo: 50%;
background: rgb(0 0 0 / var(--chip-velo));
color: #fff;
/*
* Más pequeño: 10px en vez de 12.
*
* Es el dato menos importante de los tres que van sobre la foto —la calidad de
* vídeo se da por hecha— y a 12 pesaba como un titular. El alto del chip baja
* con él, porque su relleno va en `em`: eso es lo que hay que querer, que
* encoja entero y no solo la letra dentro de una caja que se queda grande.
*/
font-size: 10px;
}
/* --------------------------------------------------------------------------
4. Anuncios: cristal de color, uno por nivel
--------------------------------------------------------------------------
Antes eran dos trozos: «Ads:» en gris y el nivel escrito al lado. Ahora es un
icono y la palabra «Ads» sobre un fondo del color del nivel, y la clase la
lleva el propio chip —lo monta `xgluz_chip_de_anuncios()`—, así que basta con
pintarle el fondo: el icono y el texto van los dos en blanco.
El color de cada nivel está más abajo, en su bloque.
-------------------------------------------------------------------------- */
.site-img .ads {
/*
* Fondo y color de respaldo: los pisa el del nivel, más abajo. Se quedan por
* si algún día aparece en ACF un valor que no sea `low`, `medium` ni `high`:
* ese chip saldrá en gris —raro, y por eso localizable— en vez de sin fondo.
*/
background: #f0f0f0;
color: #52525b;
/*
* EL PESO, Y LO QUE HAY DE VERDAD DETRAS DE ESTE NUMERO.
*
* El tema sirve DOS pesos de Roboto y no más: 300 y 500. Los cuatro ficheros
* de `assets/fonts/` son esos dos, cada uno en sus dos rangos de caracteres.
*
* Así que este 400 no pinta un 400: el navegador coge el fichero más cercano
* según su regla de emparejado y acaba usando el de 500. Medido por el ancho
* del texto: 300 y 350 dan 432px; 400, 450, 500 y 700 dan 443.2px, todos el
* mismo. No hay punto medio que pedir mientras las fuentes sean estas.
*
* Se deja en 400 —y no en 500— porque es el peso que se QUIERE. El día que el
* tema sirva una Roboto variable, esta línea empezará a pintar un 400 de
* verdad sin tocarla.
*/
font-weight: 400;
/*
* El icono y la palabra, uno al lado del otro y centrados entre sí.
*
* Aquí el centrado lo da la caja flexible y no `text-box-trim`: manda el
* icono, que es la pieza más alta, y el texto se alinea con él. El relleno de
* arriba y de abajo es el mismo, así que el conjunto queda en medio del chip.
*/
display: inline-flex;
align-items: center;
gap: 3px;
/* Más ceñido que los 3px/5px heredados. */
padding: 2px 4px;
}
/*
* El icono, atado al tamaño de la letra.
*
* En `em` y no en píxeles: este chip va a 9px aquí y a otro tamaño en las
* pantallas pequeñas, y el icono tiene que encogerse con él en vez de quedarse
* grande. 1.25em lo deja del alto de una mayúscula más un poco, que es lo que
* hace que se lea como parte de la palabra y no como un adorno pegado al lado.
*/
.site-img .ads .ads-icon {
width: 1.25em;
height: 1.25em;
/* A este tamaño el trazo de 2 que traen los de Lucide se emborrona. */
stroke-width: 1.75;
/* Que no lo encoja la caja flexible si el chip se queda estrecho. */
flex: none;
}
/*
* La palabra, recortada a lo que se ve.
*
* El mismo recorte que llevan los otros dos chips, pero aplicado solo al texto:
* así se alinea con el icono por su altura real —de la mayúscula a la línea
* base— y no por el aire que la fuente reserva por arriba y por abajo, que es lo
* que la dejaba un pelo alta.
*/
@supports (text-box-trim: trim-both) {
.site-img .ads .ads-label {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
}
/*
* Los tres colores.
*
* Van en el chip, no en un hijo: así los heredan a la vez el icono —que se pinta
* con `currentColor`— y la palabra, sin repetir el color en dos sitios.
*/
/* --------------------------------------------------------------------------
Los tres niveles: fondo muy claro y texto del color
--------------------------------------------------------------------------
Fondo sólido, apenas teñido, y el texto —y el icono, que va con `currentColor`—
en el color de verdad.
Se probó antes con el color de fondo saturado y texto blanco: se leía, pero
tres manchas fuertes pesaban más que la propia foto. Así el chip se apoya en la
imagen en vez de taparla, y el contraste no depende de qué foto haya debajo.
-------------------------------------------------------------------------- */
/* Verde y visto bueno: pocos anuncios. */
.site-img .ads.low {
background: #e7f4ec;
color: #15803d;
}
/*
* Ámbar y aviso: los justos.
*
* Más amarillo que naranja, y a propósito: el naranja que había antes estaba a
* veinte grados del rojo en el círculo de color y de reojo se confundían. Aquí
* hay treinta y cinco, que ya se leen como dos avisos distintos y no como el
* mismo en dos intensidades.
*/
.site-img .ads.medium {
background: #fdf3e3;
color: #b57209;
}
/* Rojo y triángulo: muchos. */
.site-img .ads.high {
background: #fceaea;
color: #b91c1c;
}
/* --------------------------------------------------------------------------
5. Free: el mismo cristal oscuro que el de calidad
--------------------------------------------------------------------------
Los dos que van sobre la foto sin decir nada del contenido —la calidad y el
«Free»— comparten acabado y tamaño, y el de anuncios se queda como el
distinto: es el único que avisa de algo.
-------------------------------------------------------------------------- */
.tag-block div.free-tag {
--chip-velo: 50%;
background: rgb(0 0 0 / var(--chip-velo));
color: #fff;
/* Los mismos 10px del de calidad. El chip encoge entero y no solo la letra,
porque su relleno va en `em`. */
font-size: 10px;
}
/* --------------------------------------------------------------------------
6. El número de posición
--------------------------------------------------------------------------
Se queda como estaba: una cápsula ceñida a su contenido. Se probó a hacerla un
círculo exacto y no compensaba —para que cupieran dos cifras había que
estirarlo tanto que con una sola quedaba enorme—.
Lo que sí cambia es lo que acompaña al número: antes una almohadilla, ahora el
rayo. Va más pequeño que la cifra para no disputarle el sitio.
-------------------------------------------------------------------------- */
#paysites .rank {
/*
* EL RAYO Y LA CIFRA, CENTRADOS ENTRE SÍ Y EN LA CÁPSULA.
*
* Medido antes: el rayo caía 0.8px por debajo del número, y el conjunto estaba
* 1.3px alto dentro de la cápsula. Son dos desajustes distintos y los dos
* vienen de lo mismo: cada pieza se apoyaba en la línea base y ahí las
* métricas del emoji y las de la cifra no coinciden.
*
* Se alinea por CAJAS, con `align-items: center`, y no empujando el rayo unos
* decimales hacia arriba. El emoji no lo dibuja la fuente del tema: lo pone la
* del sistema, y no es la misma en un Mac que en un Android. Un ajuste fino
* acertaría aquí y fallaría en la mitad de las pantallas; centrar cajas da el
* mismo resultado en todas.
*
* `line-height: 1` para que cada caja mida su letra y no el interlineado que
* arrastraba, que era parte del descuadre.
*/
display: inline-flex;
align-items: center;
line-height: 1;
/*
* El relleno conserva los 18px de alto que la cápsula tenía antes de recortar
* las cajas, y NO es igual arriba que abajo.
*
* Centradas las cajas, el conjunto seguía cayendo 1.2px bajo: el dibujo del
* emoji sobresale de su caja por abajo, y eso no se arregla centrando, porque
* lo que se centra es la caja y no la tinta. Se compensa aquí, ajustado a
* medida: un tercio de píxel de arriba pasa abajo.
*
* ESTE MEDIO PIXEL ES DEL EMOJI DE ESTE SISTEMA. El rayo no lo dibuja la
* fuente del tema sino la del aparato, y no es la misma en un Mac, en Windows
* o en Android. Ahí el ajuste quedará algo distinto —siempre por debajo del
* píxel—, y no hay forma de acertarle a todos a la vez: es el precio de usar
* un emoji en vez de un icono del sprite.
*/
padding: 0.33em 5px 0.39em;
/*
* Menos espaciado entre cifras: el heredado son 0.6px y separaban de más las
* dos cifras del «18».
*/
letter-spacing: 0.2px;
/* Un punto más que los 5px heredados. */
border-radius: 6px;
}
#paysites .rank .rank-icon {
/*
* En `rem` y no en `em`: medida fija, no relativa al chip.
*
* Con `em` el rayo se ataba al tamaño del número, y ahí lo que manda no es la
* proporción sino cuánto ocupa el dibujo del emoji, que no lo pone la fuente
* del tema.
*/
font-size: 0.6rem;
/* Su caja, ceñida al glifo, para que el centrado tenga algo firme que centrar. */
display: flex;
align-items: center;
line-height: 1;
/* Sin el espaciado de las cifras: pegado a la suya. */
letter-spacing: 0;
margin-right: 1px;
}
/*
* La cifra, recortada a lo que se ve.
*
* Centrar las cajas no bastaba: la caja de la cifra es más alta que la cifra
* —la fuente reserva sitio para lo que sube y lo que baja, y un número no usa ni
* lo uno ni lo otro—, así que quedaba descentrada dentro de la suya y arrastraba
* el desajuste. Medido: 0.8px por debajo del rayo.
*
* `text-box-trim` deja la caja en lo que ocupa de verdad, de la altura del
* número a la línea base. A partir de ahí, centrar cajas es centrar lo que se ve.
*/
#paysites .rank .rank-num {
line-height: 1;
}
@supports (text-box-trim: trim-both) {
#paysites .rank .rank-num {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
}
/* --------------------------------------------------------------------------
7. La etiqueta de «sitio nuevo»
--------------------------------------------------------------------------
Un icono y el mes de publicación. Iban uno detrás del otro sin alinearse: el
icono se apoyaba en la línea base del texto, que en un SVG cae donde cae, y
quedaba montado sobre la fecha.
Solo toca esta variante. `.new-date` lo comparten las etiquetas de ofertas
—`flash-sale`, `deal-tag`, `fixed-deal`—, que no llevan icono y no tienen por
qué cambiar; por eso el selector pide además `.new-tag`.
-------------------------------------------------------------------------- */
.new-date.new-tag {
display: inline-flex;
align-items: center;
gap: 3px;
line-height: 1;
/* Cápsula: el redondeo pasa de los 5px heredados a 100. Como el alto es
pequeño, el navegador lo recorta al máximo que cabe y sale la píldora. */
border-radius: 100px;
/* Relleno propio, ahora que el alto lo marca el contenido y no el
interlineado. Igual arriba y abajo. */
padding: 3px 7px;
}
/* El icono, atado al tamaño de la letra: el chip va a 11px. */
.new-date.new-tag .new-tag-icon {
width: 1.15em;
height: 1.15em;
flex: none;
/*
* Sin márgenes: el hueco lo pone el `gap` de arriba y solo él.
*
* El icono arrastra un `margin-right: 3px` del CSS heredado —escrito para
* cuando era un ``— y los dos se SUMAN: 3 de margen más 3 de hueco daban
* 6px, el doble de lo que parecía declarado. Es de esos fallos que no dan
* error y solo se ven midiendo.
*/
margin: 0;
}
/*
* La fecha, recortada a lo que se ve, para que se centre con el icono por su
* altura real y no por el aire que la fuente reserva arriba y abajo.
*/
.new-date.new-tag .new-tag-label {
line-height: 1;
}
@supports (text-box-trim: trim-both) {
.new-date.new-tag .new-tag-label {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
}
/*
* «HOT PICKS» EN CARRUSEL: LA TARJETA Y SU FILA.
*
* Solo lo de esta forma de la sección. Nada de aquí toca a la anterior: cuelga
* todo de `.copy-slider` y de `.copy-card`, que no existen en la otra.
*
* NO SE HEREDA NADA DE `.copy`, Y ESO ES BUENO
*
* El CSS de la sección anterior cuelga de `.copy`, y esta no lleva esa clase. Así
* que aquí no llega ni una regla suya: ni el `grid` de dos columnas, ni el
* `order: -1` que alterna los lados, ni el ancho de las fotos. Se escribe lo que
* hace falta y punto.
*
* A cambio hay que repetir las dos piezas que sí se quieren igual —el botón del
* sitio y la etiqueta de vídeo—, y están abajo con los mismos valores que en
* `31-copy-category.css` y `29-copy-area-extra.css`.
*/
/* --------------------------------------------------------------------------
La llama del rótulo
--------------------------------------------------------------------------
La misma pieza y el mismo trato que en `.side-category-fire`, el bloque «Hot
Picks» del lateral, con la medida subida de 20 a 30px porque aquí el rótulo es
de 20 y allí de 13.
Va algo mayor que la letra a propósito: el dibujo no llena su lienzo —trae aire
alrededor—, así que a la misma medida se vería más pequeño que el texto.
EL SELECTOR LLEVA EL `id` A PROPOSITO.
`31-copy-category.css` tiene `#copy .h3-sub img { width: 18px; margin-right:
5px }`, y un `id` pesa más que cualquier cantidad de clases: con
`.copy-slider .h3-sub .copy-fire` la llama saldría a 18px y con el margen de
otro. Así que aquí se le pone el mismo `id` y una clase más. */
#copy.copy-slider .h3-sub > div {
/*
* DOS NUMEROS, Y SOLO DOS, PARA GOBERNAR LA LLAMA.
*
* `--fuego` lo que mide.
* `--fuego-top` a qué altura del rótulo se centra. 50% es el medio exacto;
* por debajo de ahí, más arriba. Está en 40% porque el dibujo
* lleva todo el peso de la llama en la mitad baja de su lienzo
* y centrado por su caja se ve caído.
*
* Están aquí arriba porque los usan las dos reglas: el hueco que se le
* reserva a la izquierda sale del primero, así que agrandarla no deja el
* rótulo pisado ni un claro de más. Se toca un número y lo demás se ajusta.
*/
--fuego: 30px;
--fuego-top: 40%;
/* El ancla de la llama, que va colocada respecto a esta caja. */
position: relative;
/* Su hueco. Se lo reserva el texto porque ella ya no ocupa sitio. */
padding-left: calc(var(--fuego) - 2px);
}
/*
* FUERA DEL FLUJO: LA LLAMA NO PUEDE MANDAR SOBRE LA ALTURA DE LA FRANJA.
*
* En flujo normal era una letra más de la línea, así que su tamaño estiraba el
* renglón y con él toda la franja gris de la cabecera. Eso dejaba la medida
* atada: agrandarla un punto engordaba la cabecera del carrusel, y esa cabecera
* es la misma que la de las alternativas premium y las subcategorías.
*
* Colocada en absoluto no ocupa sitio, así que:
*
* · La franja mide lo que mide el texto, pase lo que pase con la llama.
* · Se puede hacer todo lo grande que se quiera sin deformar nada.
* · Y se puede subir lo que haga falta, que es lo que pedía este dibujo: todo
* el peso de la animación está en la mitad de abajo del lienzo, así que
* centrada por su caja se ve caída.
*
* El `translateY(-50%)` sube la llama media altura suya, que es lo que la centra
* de verdad sobre el punto que marca `--fuego-top`. Sin él, ese punto sería su
* borde de arriba y no su medio.
*/
#copy.copy-slider .h3-sub .copy-fire {
position: absolute;
left: 0;
top: var(--fuego-top);
transform: translateY(-50%);
width: var(--fuego);
height: var(--fuego);
/* Que no la toquen las reglas heredadas que redondean o redimensionan
imágenes: esto no es una foto. */
border-radius: 0;
max-width: none;
margin: 0;
}
/* --------------------------------------------------------------------------
La fila
--------------------------------------------------------------------------
La pista es `.yarpp-display`, que es lo que el carrusel del sitio sabe mover:
de `21-slider.css` ya le llegan `display: flex` y `overflow: auto`. Aquí solo
se le da aire.
El relleno lateral es el mismo que el de la sección de siempre —25px— para que
la fila arranque a la altura del resto de la página y no medio centímetro
dentro. */
.copy-slider .copy-track {
gap: 16px;
padding: 15px 25px 20px;
/*
* QUE ABRIR UNA TARJETA NO ESTIRE A LAS DEMAS.
*
* De fábrica, en una fila flexible todas las tarjetas miden lo que la más
* alta. Con eso, abrir una arrastraba a las otras nueve: crecían con ella y se
* quedaban con un palmo de fondo gris bajo el pie, sin nada dentro.
*
* `flex-start` deja que cada una mida lo suyo. Y como todas las cerradas miden
* exactamente igual —el medio tiene proporción fija, el título dos líneas
* reservadas y el texto sus líneas de muestra— la fila sigue cuadrada; la única que sobresale
* es la que se ha abierto, que es de lo que se trata.
*/
align-items: flex-start;
/*
* SIN AJUSTE AUTOMATICO. AQUI ESTABA LA DIFERENCIA CON EL CARRUSEL DEL SITIO.
*
* Esta pista llevaba `scroll-snap-type: x proximity` y cada tarjeta un
* `scroll-snap-align: start`. Sobre el papel era una mejora: al soltar, la
* fila se cuadraba con el principio de la tarjeta más cercana.
*
* En un móvil no es una mejora, es otra cosa. El dedo empuja, la fila coge
* carrerilla y a mitad de camino el navegador decide dónde tiene que parar:
* se frena, corrige y se planta. El carrusel de las alternativas premium y el
* de las subcategorías no hacen eso —no llevan ajuste— y por eso corren
* sueltos hasta donde los dejes.
*
* Es el único carrusel del sitio y tiene que comportarse siempre igual. Si
* algún día el ajuste se quiere, se querrá en `21-slider.css` y para todos.
*/
}
/* --------------------------------------------------------------------------
La tarjeta
--------------------------------------------------------------------------
DOS ENTERAS Y LA TERCERA PARTIDA POR LA MITAD.
El número sale de la cuenta, y la cuenta de una medida: a 1440px el hueco por
donde se ve la fila son 976px, contados desde donde empieza la primera tarjeta
—el relleno de la izquierda no cuenta— hasta el borde. Ahí caben dos tarjetas,
dos huecos de 16px y media tarjeta: 2,5 tarjetas en 944px, o sea 377px cada
una. Sobre los 1018px de la pista, el 37%.
Antes eran 40% y de la tercera asomaba un quinto: se veía que había más, pero
parecía un recorte, no una tarjeta. Media se lee como una tarjeta.
El ancho se fija por los dos lados, como en el carrusel de siempre: `min` sola
no basta porque el flex encoge, y `max` sola tampoco porque estira. */
.copy-card {
min-width: 37%;
max-width: 37%;
/*
* LAS MEDIDAS DEL TEXTO, EN UN SOLO SITIO.
*
* El título y el párrafo las usan para pintarse, y el cuerpo de la tarjeta
* las usa para calcular su altura mínima. Si estuvieran escritas en cada
* regla, cambiar el cuerpo de letra en un lado descuadraría el cálculo del
* otro sin que nadie se enterara hasta verlo.
*
* Con esto, la versión de pantalla pequeña no repite ni una regla: solo
* cambia estos números y todo lo demás se recalcula.
*/
--t-titulo: 15px;
--lh-titulo: 1.4;
--t-texto: 14px;
--lh-texto: 1.5;
--lineas-texto: 5;
--hueco-titulo: 8px;
/*
* EL COLOR DE TODO EL TEXTO DE LA TARJETA.
*
* `#646970` es el gris de las descripciones —el de `.site-info p`— y aquí lo
* llevan las tres piezas: el título, el párrafo y el botón de abrir. El título
* traía el `#444` del cuerpo de la página y el botón lo heredaba de él.
*
* Un solo tono para toda la tarjeta: lo que separa al título del texto es su
* cuerpo y su peso, no que sea de otro color. Y así el fondo gris claro de la
* tarjeta tiene una sola voz encima en vez de dos.
*/
--color-texto: #646970;
/* En columna, para que el texto pueda empujar hacia abajo lo que haga falta. */
display: flex;
flex-direction: column;
/*
* EL MISMO PLANO QUE EL BLOQUE «HOT PICKS» DEL LATERAL.
*
* Los mismos tres valores que `.side-category`, no unos parecidos: gris al 59%
* de opacidad, un canto apenas más oscuro y 12px de esquina. Las dos piezas se
* apoyan en el fondo de la página en vez de flotar sobre él.
*
* Aquí hubo una sombra —la que la sección de siempre usa en móvil— y no valía:
* una sombra separa del fondo, que es justo lo contrario. Y ocho tarjetas
* seguidas con sombra dejaban un halo gris a lo largo de toda la fila.
*/
background: #e9e9e996;
border: 1px solid #e9e9e9;
border-radius: 12px;
/*
* EL RELLENO DE LA TARJETA, Y POR QUE LA FOTO YA NO LLEGA AL BORDE.
*
* La foto iba pegada arriba, de lado a lado, rematando el borde superior. Con
* el borde fino alrededor eso deja a la foto tocándolo, y se ve el filete
* gris cortando contra la imagen.
*
* Ahora todo va dentro del relleno: el medio, con su propia esquina de 12px,
* flotando dentro de la tarjeta en vez de rematarla.
*/
padding: 12px;
/*
* SIN `overflow: hidden`, a propósito.
*
* Redondear recortando sería más corto, pero recorta TODO lo de dentro, y
* ahí dentro hay piezas que el modo seguro mueve —les aplica un `scale` para
* que el desenfoque no deje ver los bordes—. La foto lleva su propio
* redondeo dos reglas más abajo, que es lo mismo sin el efecto secundario.
*
* Y sin `scroll-snap-align`: ver la pista, arriba.
*/
}
/* --------------------------------------------------------------------------
La foto
-------------------------------------------------------------------------- */
/*
* EL MARCO: UN HUECO 16:9 QUE YA ESTA ANTES DE QUE LLEGUE NADA.
*
* La proporción y el plano de fondo son del MARCO, no de la foto. Esa es toda la
* diferencia:
*
* · El hueco está reservado desde que se pinta la página, así que cuando la
* foto llega no empuja nada hacia abajo. En una fila que se carga aplazada
* —de diez tarjetas se ven dos— eso pasaría diez veces.
* · Si la imagen no llega —un enlace roto, una ficha a medio rellenar— no
* queda un icono de imagen partida sobre el fondo de la tarjeta: queda un
* rectángulo liso del tamaño que le toca. Sigue estando limpio.
* · Y mientras carga se ve ese mismo rectángulo, no un salto.
*
* El plano es `#e9e9e9`, el mismo gris que el tema usa para los huecos que
* esperan contenido —el del banner del lateral— pero sólido: el de la tarjeta es
* ese color al 59%, y encima de él uno igual no se distinguiría.
*/
.copy-card .copy-img {
position: relative;
aspect-ratio: 16 / 9;
background-color: #e9e9e9;
border-radius: 12px;
/* Su caja mide lo que la foto y ni un píxel más: `img` es en línea y si no
deja un hueco debajo, del sitio que la línea reserva para lo que baja. */
line-height: 0;
}
/*
* LOS MEDIOS, ENTEROS DENTRO DEL MARCO.
*
* `contain` Y NO `cover`, Y ESTO SE DECIDIO CON LAS FOTOS DELANTE.
*
* Medidas las 610 que hay, ninguna falla:
*
* 560 × 315 476 filas (78%) 1.778 — 16:9 clavado
* 500 × 261 134 filas (22%) 1.916 — algo más apaisada
*
* O sea que el 16:9 del marco no es una elección: es la medida en que están hechas
* cuatro de cada cinco. Lo que no encaja es ese 22%, y con `cover` se le comían
* 27px de ancho —un 7%, la mitad por cada lado—. En una captura de un sitio eso
* es el logotipo cortado, que es justo lo que no puede pasar aquí: estas fotos
* son la portada de una recomendación.
*
* Con `contain` se ve entera. Las de 16:9 llenan el marco exacto, sin una franja;
* a las otras les quedan siete píxeles de plano arriba y siete abajo, y no
* desentonan porque ese plano es liso y del gris de la tarjeta. Nada se deforma y
* nada se corta.
*
* VALE IGUAL PARA LOS VIDEOS, y ahí importa más: un vídeo puede venir en
* cualquier proporción, y recortarlo sería recortar la escena.
*
* El incrustado se queda llenando: es un documento entero con su reproductor
* dentro, y ya se encarga él de encajar lo que sirve.
*
* Van en absoluto para que el marco conserve su altura pase lo que pase con
* ellos: si la imagen no carga, el hueco sigue siendo el mismo y se ve el plano.
*
* 12px de esquina, el mismo radio del marco y de la tarjeta.
*/
.copy-card .copy-img img,
.copy-card .copy-img video,
.copy-card .copy-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
border-radius: 12px;
}
.copy-card .copy-img img,
.copy-card .copy-img video {
object-fit: contain;
}
/*
* El incrustado, que es un documento entero dentro de la página.
*
* `overflow: hidden` aquí sí: un iframe no obedece al `border-radius` de su
* contenedor —lo que pinta dentro es suyo— y sin recortar asomaría por las cuatro
* esquinas.
*/
.copy-card .copy-media {
overflow: hidden;
/* Transparente: debajo está el plano del marco y no hacen falta dos. */
background-color: transparent;
}
.copy-card .copy-media iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* --------------------------------------------------------------------------
El enlace al sitio: la foto entera, y un chip que lo dice
--------------------------------------------------------------------------
Aquí hubo una píldora blanca con el nombre del sitio, primero encima de la foto
y luego en el pie. Ya no: la zona de clic es la foto —que es lo que se mira— y
lo único que queda a la vista es un chip en la esquina.
El enlace no se ve. Es una caja que ocupa el marco entero y no pinta nada: la
foto que lleva dentro es la que se ve. */
.copy-card .copy-link {
position: absolute;
inset: 0;
display: block;
border-radius: 12px;
}
/*
* EL CHIP: UNA ETIQUETA COMO LAS DEMAS, CON EL NOMBRE Y LA FLECHA.
*
* LAS MEDIDAS SON LAS DEL «FREE», MEDIDAS EN EL.
*
* font-size 10px
* font-weight 400
* letter-spacing 0.4px
* padding 0.478em 6px
* border-radius 50px
* y a 5px del borde de la foto
*
* Eso es lo que hace que se lea como una etiqueta del sitio y no como una pieza
* de esta sección: son las mismas. Aquí estuvo un rato siendo un círculo de 28px
* con solo la flecha —una forma que no existe en ningún otro sitio— y se veía
* traído de fuera.
*
* Cambia la esquina: el «Free» va abajo a la derecha y este arriba, pero pegado
* al borde igual, con los mismos 5px.
*
* EL FONDO NO ES EL DEL «FREE», Y ESTA A PROPOSITO
*
* Es `#00000099` —el del botón de reproducción y el de la etiqueta de posición de
* las fichas de pago— y sin desenfoque, que es lo que se pidió al hacerlo. Frente
* al «Free» son dos diferencias pequeñas: negro al 60% en vez de al 50%, y sin
* `backdrop-filter`. Si se prefiere que sea idéntico también en esto, son estas
* dos líneas.
*
* NO ES UN BOTON, y por eso no tiene zona de clic propia: es una marca que avisa
* de que la foto lleva a alguna parte. Quien pulse, pulsará la foto, que es toda
* suya.
*/
.copy-card .copy-chip {
position: absolute;
top: 5px;
right: 5px;
display: inline-flex;
align-items: center;
gap: 3px;
/*
* EL RELLENO NO ES IGUAL POR LOS DOS LADOS, Y ES PARA QUE LO PAREZCA.
*
* A la derecha no acaba la flecha: acaba su LIENZO. El dibujo de Lucide va de
* 6 a 18 sobre 24, así que un cuarto de su caja es aire por cada lado —3px con
* el icono a 12—. Con el mismo relleno a los dos lados, la tinta de la flecha
* se quedaba a 9px del borde y la de la letra a 6: el chip se veía torcido, con
* el texto pegado a la izquierda.
*
* Los 9px de aquí son esos 6 más los 3 que el icono trae de serie. Así los dos
* extremos de lo que se ve están a la misma distancia del borde, que es lo que
* el ojo mide.
*
* La vertical se queda como está: ahí el aire del icono no molesta porque el
* alto lo manda la letra.
*/
padding: 0.478em 6px 0.478em 9px;
background-color: #00000099;
border-radius: 50px;
color: #fff;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.4px;
line-height: 1;
/*
* HASTA DONDE LLEGA LA FOTO, Y NI UN PIXEL MAS.
*
* `100%` es el marco entero; los 10px que se descuentan son los 5 de cada lado
* que separan al chip de los bordes. Así un nombre largo puede estirarse todo
* lo que quiera sin asomar por fuera de la imagen.
*
* AQUI NO HAY `overflow`, Y ES LO QUE ARREGLA EL RECORTE DE LA FLECHA.
*
* Estaba, junto con un tope del 50%, y recortaba la caja ENTERA: con un nombre
* largo, lo primero que se iba por el borde era la flecha, que es lo último que
* puede faltar. El recorte va ahora en el nombre, dos reglas más abajo.
*/
max-width: calc(100% - 10px);
white-space: nowrap;
/*
* `border-box` NO SOBRA, Y ESTO SE VIO MIDIENDO.
*
* El tema no lo declara para todo, así que de fábrica un `max-width` limita el
* CONTENIDO y el relleno se suma por fuera. Con los 15px de relleno de este
* chip, un nombre largo daba 342 + 15 = 357px sobre un marco de 352: se salía
* diez píxeles por la izquierda. Medido.
*
* Con esto, el tope cuenta la caja entera —relleno incluido— y el chip para
* donde se le dice.
*/
box-sizing: border-box;
}
/*
* EL NOMBRE ES LO UNICO QUE SE ENCOGE.
*
* `min-width: 0` no sobra: un hijo flexible no se deja encoger por debajo de lo
* que mide su contenido a menos que se le diga. Sin esta línea el nombre empujaría
* el chip más allá de su tope y los puntos suspensivos no llegarían a aparecer
* nunca.
*/
.copy-card .copy-chip-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/*
* La flecha que se va en diagonal: la misma señal de «esto sale fuera» que las
* tarjetas de sitio llevan junto al título.
*
* Allí es un dibujo metido en el CSS como dirección de datos, porque se pinta con
* `::after` y ahí no hay elemento donde colgar un icono. Aquí sí lo hay, así que
* se usa el del sprite —`arrow-up-right`, el mismo trazo de Lucide— y se pinta con
* `currentColor`, o sea del blanco del chip.
*/
.copy-card .copy-chip-arrow {
/* A la medida de la letra que lleva al lado, no a una fija: si el chip cambia
de cuerpo, la flecha va con él. */
width: 1.2em;
height: 1.2em;
flex: none;
}
/* --------------------------------------------------------------------------
El botón de reproducción: un círculo y nada más
--------------------------------------------------------------------------
`29-copy-area-extra.css` lo pinta como una cápsula con el rótulo «Free
preview» dentro. Aquí el rótulo se ha ido —al lado de un póster, un triángulo
ya dice lo que hace— y lo que queda es un círculo, que es lo que se espera
encima de un vídeo.
Las medidas se declaran las cuatro: alto, ancho, relleno a cero y el radio.
Heredaba `padding: 10px 20px`, y un relleno desigual dentro de algo que quiere
ser redondo lo deja ovalado. */
.copy-card .play-button {
width: 52px;
height: 52px;
padding: 0;
border-radius: 50%;
/* El triángulo, centrado en el círculo. */
display: flex;
align-items: center;
justify-content: center;
}
/*
* El triángulo, un poco a la derecha de su sitio.
*
* Un triángulo que apunta a la derecha tiene el peso a la izquierda —la base es
* un lado recto y la punta un vértice—, así que centrado por su caja se ve caído
* hacia atrás. Dos píxeles lo compensan.
*
* Heredaba `margin-right: 3px` de cuando tenía un rótulo al lado; ahí ese margen
* separaba dos cosas, y aquí solo descentraría.
*/
.copy-card .play-button .icon {
width: 22px;
height: 22px;
margin: 0 0 0 2px;
}
/*
* La etiqueta de vídeo, con los valores de `29-copy-area-extra.css`.
*
* Se conserva el nombre `preview-tag` porque es uno de los tres que el modo
* seguro tapa. Ver la explicación en `parts/card/card-copy.php`.
*/
.copy-card .copy-img .preview-tag {
position: absolute;
top: 8px;
left: 8px;
font-weight: 400;
border-radius: 4px;
padding: 3px 5px;
line-height: 1;
font-size: 11px;
background-color: #ffec00;
color: #1d2327;
}
/* --------------------------------------------------------------------------
El texto
--------------------------------------------------------------------------
EL PARRAFO ENTERO, SIN RECORTAR.
Medidos los 610 que hay: entre 408 y 952 caracteres, mediana 567. Es mucho
para una tarjeta, y por eso el primer intento los enseña completos: es la
forma de ver cuánto ocupa de verdad antes de decidir dónde cortar.
Si hay que recortar, es una línea —`-webkit-line-clamp` con las líneas que se
quieran— y está anotado abajo. */
.copy-card-body {
/* Solo por arriba: los costados y el fondo ya los pone el relleno de la
tarjeta, y repetirlos aquí metería el texto el doble de dentro que la foto. */
padding-top: 12px;
/*
* LA ALTURA QUE IGUALA TODAS LAS TARJETAS.
*
* Es lo que ocupa el caso más alto: un título de dos líneas, su hueco y las
* líneas de texto de la muestra. Los títulos de una línea no se quedan cortos: llegan
* hasta aquí igual, con el aire al final.
*
* Y ES AL FINAL DONDE TIENE QUE ESTAR. Reservando las dos líneas en el título
* —que es como estaba— el hueco quedaba en medio, entre el título y el texto,
* y se veía como un salto en mitad de la tarjeta. Aquí abajo lo único que hace
* es separar un poco más el texto del pie, que no llama la atención de nadie.
*
* Todo sale de las variables de arriba, así que en pantalla pequeña esta regla
* no se repite: se recalcula sola con los tamaños de allí.
*/
min-height: calc(
2 * var(--lh-titulo) * var(--t-titulo) +
var(--hueco-titulo) +
var(--lineas-texto) * var(--lh-texto) * var(--t-texto)
);
/* Ocupa lo que sobre, para que el fondo blanco llegue abajo aunque este texto
sea más corto que el de la tarjeta de al lado. */
flex: 1;
}
/*
* EL TITULO, EL MISMO QUE EL DE LAS TARJETAS DE SITIO.
*
* Copiado de `.site-display .site-title`: 15px, peso 500, interlineado 1.4 y su
* espaciado de 0.4px entre letras, más el cambio a 14px en pantalla pequeña que
* está abajo. Igual que se hizo con el párrafo, y por lo mismo: las dos piezas
* son tarjetas y no tenían por qué escribirse con dos letras distintas.
*
* EL ESPACIADO SE DECLARA, NO SE HEREDA
*
* Esto es un `h3` y aquello un `div`, así que por el camino les llegaban cosas
* distintas: el título de aquí salía más abierto y más ancho que el de las
* tarjetas de arriba, y en pantalla pequeña se notaba. Poniéndole el valor
* medido en el otro, los dos se leen igual.
*
* De `.site-title` NO se copia su recorte a una línea: allí es un nombre corto y
* aquí es una frase entera, y cortarla a una línea dejaría fuera media idea.
*/
.copy-card h3 {
margin: 0 0 var(--hueco-titulo);
font-size: var(--t-titulo);
font-weight: 500;
line-height: var(--lh-titulo);
color: var(--color-texto);
/*
* Menos abierto que el de las tarjetas de sitio, que llevan 0.4px.
*
* Allí son nombres cortos —una o dos palabras— y el espaciado los asienta.
* Aquí es una frase entera de hasta dos líneas, y a 0.4 se lee más ancha de lo
* que es.
*/
letter-spacing: 0.2px;
/*
* DOS LINEAS COMO MUCHO, PERO SIN RESERVARLAS.
*
* Aquí hubo un `min-height` de dos líneas, y era el sitio equivocado: cuando
* el título ocupaba una, el hueco de la segunda se quedaba ENTRE el título y
* el texto, abriendo un claro en medio de la tarjeta que no venía a cuento.
*
* La altura la iguala ahora el cuerpo, unas reglas más abajo, y el aire que
* sobra cae al final —justo encima del pie—, que es donde no molesta.
*
* El recorte se queda: los 610 títulos caben en dos líneas a los anchos que
* usa esta fila, y está para el que venga mañana.
*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/*
* EL PARRAFO, EL MISMO QUE EL DE LAS TARJETAS DE SITIO.
*
* Los cuatro valores están copiados de `.site-info p` —14px, peso 300,
* interlineado 1.5 y el gris `#646970`—, y abajo se repite su adaptación a
* pantalla pequeña. Es el texto corrido de las tarjetas del sitio y no había
* razón para que aquí fuera otro.
*
* CINCO LINEAS, Y LA QUINTA DESVANECIENDOSE
*
* `.site-info p` recorta a tres; aquí son cinco, las que se enseñan de muestra
* antes del botón que abre el resto. Cuántas son lo dice `--lineas-texto`, ahí
* arriba: es el único sitio donde está el número.
*
* El recorte NO es `-webkit-line-clamp`. Aquel corta en seco y planta unos puntos
* suspensivos: se ve dónde acaba lo que dejan leer. Aquí la séptima línea se
* apaga hacia el fondo, que dice lo mismo —hay más— sin poner una marca.
*
* Son dos cosas juntas:
*
* `max-height` la altura de esas líneas, contada en la propia medida del
* texto. Al cambiar el cuerpo de letra en móvil, la
* cuenta se ajusta sola.
* `mask-image` una máscara que va de opaco a transparente en el último
* renglón. No pinta nada encima: borra. Por eso funciona igual
* sobre el fondo gris de la tarjeta que sobre cualquier otro, y
* no hay que repetir el color en dos sitios.
*
* Un párrafo que quepa en cinco líneas se ve entero y sin desvanecer: la máscara
* solo alcanza si el texto llega hasta abajo.
*
* Del original tampoco se copia su `padding: 2px 8px`: ese es el hueco que el
* texto necesita DENTRO de la tarjeta de sitio, y aquí ya lo pone el relleno de
* la tarjeta.
*/
.copy-card .copy-text {
margin: 0;
font-size: var(--t-texto);
font-weight: 300;
line-height: var(--lh-texto);
color: var(--color-texto);
max-height: calc(var(--lineas-texto) * var(--lh-texto) * var(--t-texto));
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--lh-texto) * var(--t-texto)), transparent 100%);
mask-image: linear-gradient(to bottom, #000 calc(100% - var(--lh-texto) * var(--t-texto)), transparent 100%);
/*
* La apertura, animada.
*
* `max-height` no sabe ir hasta «lo que mida»: hay que darle un número. Se le
* da uno holgado —60 líneas, cuando el más largo de los 610 no llega a 15— y
* el texto para donde acaba, no donde acaba la cuenta. Lo único que se nota
* es que la animación va algo más rápida al final.
*/
transition: max-height 0.35s ease;
}
/*
* ABIERTA: fuera la altura y fuera la máscara.
*
* La clase la pone `copy.js` a partir de `aria-expanded`, que es donde vive el
* estado de verdad —lo que lee un lector de pantalla—. Aquí solo se dibuja.
*/
.copy-card.is-open .copy-text {
max-height: calc(60 * var(--lh-texto) * var(--t-texto));
-webkit-mask-image: none;
mask-image: none;
}
/* Quien haya pedido que no se le muevan las cosas, no ve la animación: el texto
aparece y ya. La apertura sigue funcionando igual. */
@media (prefers-reduced-motion: reduce) {
.copy-card .copy-text {
transition: none;
}
}
/* --------------------------------------------------------------------------
El pie: dos enlaces, uno a cada lado
--------------------------------------------------------------------------
A la izquierda la reseña de casa, a la derecha el sitio anunciado. Separados a
los extremos para que no se lean como una pareja de botones iguales: no hacen
lo mismo ni llevan al mismo sitio.
`margin-top: auto` los empuja al fondo de la tarjeta. Las tarjetas de una fila
miden todas lo que la más alta, así que sin esto el pie de una quedaría a
media altura y el de la de al lado abajo del todo. */
.copy-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 12px;
}
/*
* «Read more»: se lee como texto, aunque sea un `button`.
*
* Enfrente tiene la píldora blanca del sitio, que es la llamada a la acción de la
* tarjeta. Si este pareciera otro botón, los dos competirían y no se sabría cuál
* es cuál. Así se lee como lo que hace: seguir leyendo.
*
* Un `button` trae de serie fondo gris, borde, relleno y la letra del sistema, y
* hay que quitárselo todo. Lo que NO se quita es el foco: `:focus-visible` sigue
* saliendo cuando se llega con el teclado, y ese anillo es la única señal de por
* dónde va quien no usa ratón.
*/
.copy-more {
padding: 0;
border: 0;
background: none;
font: inherit;
cursor: pointer;
font-size: 13px;
font-weight: 400;
/*
* El mismo gris que el título y el párrafo.
*
* Un `button` no hereda el color: trae el suyo del sistema, así que hay que
* dárselo. Y se le da la variable de la tarjeta, no un número: el día que ese
* gris cambie, cambian las tres piezas a la vez.
*
* No el azul de enlace, que es lo que tenía al principio: esto no lleva a
* ninguna parte, abre lo que ya está aquí.
*/
color: var(--color-texto);
/* Que no se parta en dos líneas si el nombre de enfrente es largo. */
white-space: nowrap;
/* El chevron, en línea con el rótulo. */
display: inline-flex;
align-items: center;
gap: 4px;
}
/*
* EL CHEVRON: UNO SOLO, QUE SE DA LA VUELTA.
*
* Apunta abajo, que es hacia donde va a crecer la tarjeta. Al abrir gira media
* vuelta y apunta arriba, hacia donde se recoge.
*
* Girar es mejor que cambiar de icono: es el mismo dibujo, así que no hay dos
* símbolos que mantener ni un segundo estado del que acordarse, y el giro se ve
* —dice que ha pasado algo— donde un cambio de icono sería un parpadeo.
*/
.copy-more-arrow {
width: 15px;
height: 15px;
flex: none;
transition: transform 0.35s ease;
}
.copy-more[aria-expanded='true'] .copy-more-arrow {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
.copy-more-arrow {
transition: none;
}
}
/*
* QUE PONE EL BOTON: LO DICE `aria-expanded`.
*
* Los dos rótulos están en el HTML y se enseña el que toca según el estado. Se
* hace así, y no cambiando el texto desde JavaScript, porque el estado ya vive en
* `aria-expanded` —es lo que lee un lector de pantalla— y tenerlo también en una
* cadena de JS sería tenerlo en dos sitios: el día que uno cambie sin el otro, el
* botón dirá «Read more» mientras se anuncia como abierto.
*/
.copy-more .copy-more-close,
.copy-more[aria-expanded='true'] .copy-more-open {
display: none;
}
.copy-more[aria-expanded='true'] .copy-more-close {
display: inline;
}
/* --------------------------------------------------------------------------
Pantalla pequeña
--------------------------------------------------------------------------
Una tarjeta y MEDIA. El mismo corte que usa el carrusel del sitio, 750px.
Estaba al 85% y era demasiado: la tarjeta llenaba la pantalla, de la siguiente
asomaba un canto y la fila no parecía una fila. A 62%, la de al lado se ve
cortada por la mitad —se entiende de un vistazo que hay más y hacia dónde—, y
la que se está leyendo sigue siendo la que manda.
A 40% —lo de la pantalla grande— no valdría: en 420px eso son 168px de tarjeta
y el texto no se podría leer. */
@media (max-width: 750px) {
.copy-slider .copy-track {
gap: 12px;
padding: 15px 15px 20px;
scroll-padding-left: 15px;
}
.copy-card {
min-width: 62%;
max-width: 62%;
}
}
/*
* El párrafo se encoge donde se encoge el de las tarjetas de sitio.
*
* En 600px y no en 750: es el corte que usa `.site-info p`, y la idea es que los
* dos textos cambien a la vez. Con un corte propio habría una franja de anchos
* —entre 600 y 750— en la que el texto de esta sección sería más pequeño que el
* de las tarjetas de arriba sin que nada lo justificara.
*/
@media (max-width: 600px) {
/*
* SOLO LOS NUMEROS. NI UNA REGLA REPETIDA.
*
* El título baja a 14px —los mismos que `.site-display .site-title` en esta
* pantalla— y el texto a 12px con interlineado 1.4, que es lo que hace
* `.site-info p`.
*
* Todo lo que depende de ellos se rehace solo: la altura de la muestra,
* dónde empieza el desvanecido, cuánto abre el botón y la altura mínima que
* iguala las tarjetas. Antes había que repetir cuatro reglas aquí abajo y
* cualquiera de las cuatro podía quedarse atrás.
*/
.copy-card {
--t-titulo: 14px;
--t-texto: 12px;
--lh-texto: 1.4;
/*
* Una línea más de muestra que en pantalla grande.
*
* Aquí la tarjeta ocupa casi todo el ancho y la letra es más pequeña, así
* que en una línea cabe bastante menos texto: con las cinco de escritorio,
* la muestra se quedaba en nada. La sexta cuesta poco alto y devuelve lo
* que la letra pequeña quita.
*/
--lineas-texto: 6;
}
}
/*
* REGLAS DEL CSS HEREDADO, REHECHAS PARA LOS ICONOS SVG.
*
* ESTE FICHERO SE GENERA. No se edita a mano: lo escribe
* `scripts/iconos-compat.mjs` leyendo el CSS del Customizer.
*
* Los iconos del tema eran `` y el CSS los ajustaba con selectores como
* `#slider .steps button img`. Al pasarlos al sprite SVG, todas esas reglas
* dejaron de casar a la vez: los iconos perdieron tamaños, márgenes y
* transparencias, y cada fallo había que cazarlo mirando la página.
*
* Aquí está cada una de esas reglas otra vez, con `.icon` en lugar de `img`.
*
* Va DESPUES del CSS heredado —por el prefijo `t-`— y ANTES de `t-iconos.css`,
* que es donde se escriben los ajustes hechos a propósito y tiene que poder
* pisar a esto.
*
* 31 reglas.
*/
.site-title .icon {
width: 125px;
vertical-align: middle;
height: auto;
}
.site-img .icon {
max-width: 100%;
height: auto;
width: auto;
}
#site-favicon .icon {
width: 16px;
height: 16px;
vertical-align: middle;
margin: auto;
}
.creator-icon .icon {
width: 18px;
height: 18px;
}
.category-tag .icon {
height: 28px;
width: auto;
}
.category-tag.horizontal .icon {
width: 35px;
height: auto;
padding: 5px;
}
.new-date .icon {
width: 12px;
margin-right: 3px;
height: auto;
}
.paysite-content h1 .icon {
width: 1em;
height: 1em;
vertical-align: -0.1em !important;
margin-right: 5px;
}
.paysite-img .icon {
width: 100%;
height: auto;
}
.paysite-img span .icon {
width: 18px;
margin-right: 2px;
height: auto;
}
.paysite-button div .icon {
margin-left: 5px;
}
.filter-form .icon {
height: 25px;
filter: opacity(0.3);
margin-right: 0px;
width: auto;
}
#more-btn.end-scroll a .icon {
margin: 0px;
}
.deal-banner .icon {
width: 100%;
height: auto;
display: block;
}
.top-lists .tlist .icon {
vertical-align: middle;
}
#slider .steps button .icon {
opacity: 0.7;
width: 30px;
height: auto;
}
#menu-mobile button .icon {
width: 20px;
height: auto;
}
#toggle-button .icon {
width: 28px!important;
height: auto;
}
#close-button .icon {
height: 25px!important;
width: auto;
}
#sidebar .sidebar-banner p .icon {
opacity: 0.4;
margin: 0 auto;
height: 24px;
display: flex;
width: auto;
}
#sidebar .search .top-links a .icon {
height: 12px;
width: 12px;
margin-right: 3px;
}
.alt-links .icon {
display: inline !important;
height: 0.9em !important;
width: 0.9em !important;
margin: 0px;
vertical-align: -0.1em !important;
padding: 0 !important;
}
.alt-links .icon {
height: 0.7em !important;
width: 0.7em !important;
}
.play-button .icon {
width: 20px!important;
margin-right: 3px;
height: auto;
}
#copy .h3-sub .icon {
width: 18px;
margin-right: 5px;
height: auto;
}
#copy .h3-sub .tag .icon {
width: 16px;
margin-right: 5px;
height: auto;
}
.copy .copy-img .icon {
width: 100%;
height: auto;
}
.copy .copy-img .link a .icon {
width: 16px;
margin-left: 5px;
height: auto;
}
.listing-wide .site-wide .img .icon {
max-width: 200px;
}
.listing-wide .site-wide .info .site-icon .icon {
max-width: 28px;
min-width: 16px;
}
.listing-wide .site-wide .img .icon {
max-width: 150px;
}
/*
* LOS ICONOS.
*
* Ahora son `