/* ========================================================================== PORTADA · tapas de libro (entrada, estantería, ajustes) y animación de apertura El diseño llega por : variables --cover-color, --foil, --foil-flat, --emblem, --cover-font (las pone cover.js) y atributos data-cover-tex / -foil / -frame / -emblem. ========================================================================== */ :root { --cover-color: #5A1C1A; --foil: linear-gradient(115deg, #7a5a22 0%, #ead089 22%, #b28a3b 42%, #f7e5ab 60%, #9b7431 82%, #e3c57b 100%); --foil-flat: #d8b769; --cover-font: var(--font-display); /* Texturas (SVG generados: relieve con luz rasante o ruido) */ --tex-cuero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='.62' numOctaves='4' seed='7'/%3E%3CfeDiffuseLighting lighting-color='%23a3a3a3' surfaceScale='2.4'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"); --tex-piel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='1.15' numOctaves='3' seed='11'/%3E%3CfeDiffuseLighting lighting-color='%23a3a3a3' surfaceScale='1.5'%3E%3CfeDistantLight azimuth='225' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"); --tex-manchas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='.012' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); --tex-madera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='.004 .11' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 .85 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"); --tex-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* Adornos de esquina del marco (esquina superior izquierda; las demás se giran) */ --orn-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 30C4 15.6 15.6 4 30 4'/%3E%3Cpath d='M4 18c7.7 0 14-6.3 14-14'/%3E%3Cpath d='M13 28c4.5-2.6 8.8-2 12.6 1.6-4.6 2.4-8.8 1.9-12.6-1.6ZM28 13c2.6 4.5 2 8.8-1.6 12.6-2.4-4.6-1.9-8.8 1.6-12.6Z'/%3E%3Ccircle cx='21' cy='21' r='2.2'/%3E%3C/svg%3E"); --orn-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cg transform='rotate(90 24 24)'%3E%3Cpath d='M4 30C4 15.6 15.6 4 30 4'/%3E%3Cpath d='M4 18c7.7 0 14-6.3 14-14'/%3E%3Cpath d='M13 28c4.5-2.6 8.8-2 12.6 1.6-4.6 2.4-8.8 1.9-12.6-1.6ZM28 13c2.6 4.5 2 8.8-1.6 12.6-2.4-4.6-1.9-8.8 1.6-12.6Z'/%3E%3Ccircle cx='21' cy='21' r='2.2'/%3E%3C/g%3E%3C/svg%3E"); --orn-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cg transform='rotate(180 24 24)'%3E%3Cpath d='M4 30C4 15.6 15.6 4 30 4'/%3E%3Cpath d='M4 18c7.7 0 14-6.3 14-14'/%3E%3Cpath d='M13 28c4.5-2.6 8.8-2 12.6 1.6-4.6 2.4-8.8 1.9-12.6-1.6ZM28 13c2.6 4.5 2 8.8-1.6 12.6-2.4-4.6-1.9-8.8 1.6-12.6Z'/%3E%3Ccircle cx='21' cy='21' r='2.2'/%3E%3C/g%3E%3C/svg%3E"); --orn-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cg transform='rotate(270 24 24)'%3E%3Cpath d='M4 30C4 15.6 15.6 4 30 4'/%3E%3Cpath d='M4 18c7.7 0 14-6.3 14-14'/%3E%3Cpath d='M13 28c4.5-2.6 8.8-2 12.6 1.6-4.6 2.4-8.8 1.9-12.6-1.6ZM28 13c2.6 4.5 2 8.8-1.6 12.6-2.4-4.6-1.9-8.8 1.6-12.6Z'/%3E%3Ccircle cx='21' cy='21' r='2.2'/%3E%3C/g%3E%3C/svg%3E"); --sq-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M2 46V2h44'/%3E%3Cpath d='M10 34V10h24' stroke-width='1.2'/%3E%3Cpath d='M17 17h5v5h-5Z' stroke-width='1.2'/%3E%3C/svg%3E"); --sq-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cg transform='rotate(90 24 24)'%3E%3Cpath d='M2 46V2h44'/%3E%3Cpath d='M10 34V10h24' stroke-width='1.2'/%3E%3Cpath d='M17 17h5v5h-5Z' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E"); --sq-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cg transform='rotate(180 24 24)'%3E%3Cpath d='M2 46V2h44'/%3E%3Cpath d='M10 34V10h24' stroke-width='1.2'/%3E%3Cpath d='M17 17h5v5h-5Z' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E"); --sq-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cg transform='rotate(270 24 24)'%3E%3Cpath d='M2 46V2h44'/%3E%3Cpath d='M10 34V10h24' stroke-width='1.2'/%3E%3Cpath d='M17 17h5v5h-5Z' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E"); } /* ---------- Texturas ---------- Cada textura define tres variables que usa la tapa (y la muestra de Ajustes). */ .book-cover, .tex-demo { --tx-shine: radial-gradient(130% 90% at 28% 18%, rgb(255 255 255 / .16), transparent 55%); --tx-shade: linear-gradient(180deg, rgb(0 0 0 / 0) 60%, rgb(0 0 0 / .28)); --bc-img: var(--tx-shine), var(--tx-shade), var(--tex-cuero); --bc-size: auto, auto, 240px; --bc-blend: soft-light, multiply, overlay; } :root[data-cover-tex="piel"] .book-cover, .tex-demo[data-tex="piel"] { --bc-img: var(--tx-shine), var(--tx-shade), var(--tex-piel); --bc-size: auto, auto, 180px; } :root[data-cover-tex="envejecido"] .book-cover, .tex-demo[data-tex="envejecido"] { --bc-img: radial-gradient(120% 95% at 50% 45%, transparent 55%, rgb(255 255 255 / .2) 100%), var(--tx-shine), var(--tex-manchas), linear-gradient(180deg, transparent 55%, rgb(0 0 0 / .35)), var(--tex-cuero); --bc-size: auto, auto, 100% 100%, auto, 300px; --bc-blend: soft-light, soft-light, soft-light, multiply, overlay; } :root[data-cover-tex="tela"] .book-cover, .tex-demo[data-tex="tela"] { --bc-img: radial-gradient(130% 90% at 28% 18%, rgb(255 255 255 / .12), transparent 55%), repeating-linear-gradient(0deg, rgb(255 255 255 / .06) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgb(0 0 0 / .1) 0 1px, transparent 1px 3px), var(--tex-noise); --bc-size: auto, auto, auto, 200px; --bc-blend: soft-light, normal, normal, overlay; } :root[data-cover-tex="lino"] .book-cover, .tex-demo[data-tex="lino"] { --bc-img: radial-gradient(130% 90% at 28% 18%, rgb(255 255 255 / .12), transparent 55%), repeating-linear-gradient(0deg, rgb(255 255 255 / .07) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, rgb(0 0 0 / .12) 0 2px, transparent 2px 5px), var(--tex-noise); --bc-size: auto, auto, auto, 160px; --bc-blend: soft-light, normal, normal, overlay; } :root[data-cover-tex="lona"] .book-cover, .tex-demo[data-tex="lona"] { --bc-img: radial-gradient(130% 90% at 28% 18%, rgb(255 255 255 / .1), transparent 55%), repeating-linear-gradient(0deg, rgb(255 255 255 / .1) 0 2px, rgb(0 0 0 / .08) 2px 3px, transparent 3px 4px), repeating-linear-gradient(90deg, rgb(0 0 0 / .16) 0 1px, rgb(255 255 255 / .05) 1px 3px, transparent 3px 4px), var(--tex-noise), var(--tex-manchas); --bc-size: auto, auto, auto, 200px, 100% 100%; --bc-blend: soft-light, normal, normal, overlay, soft-light; } :root[data-cover-tex="terciopelo"] .book-cover, .tex-demo[data-tex="terciopelo"] { --bc-img: radial-gradient(90% 70% at 30% 25%, rgb(255 255 255 / .22), transparent 65%), radial-gradient(80% 60% at 80% 90%, rgb(0 0 0 / .35), transparent 70%), var(--tex-noise); --bc-size: auto, auto, 120px; --bc-blend: soft-light, multiply, soft-light; } :root[data-cover-tex="moare"] .book-cover, .tex-demo[data-tex="moare"] { --bc-img: var(--tx-shine), repeating-radial-gradient(circle at 18% 30%, rgb(255 255 255 / .07) 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at 82% 65%, rgb(0 0 0 / .09) 0 1px, transparent 1px 3px), var(--tx-shade); --bc-size: auto; --bc-blend: soft-light, normal, normal, multiply; } :root[data-cover-tex="madera"] .book-cover, .tex-demo[data-tex="madera"] { --bc-img: var(--tx-shine), var(--tex-madera), var(--tx-shade), var(--tex-noise); --bc-size: auto, 500px, auto, 200px; --bc-blend: soft-light, overlay, multiply, soft-light; } :root[data-cover-tex="lisa"] .book-cover, .tex-demo[data-tex="lisa"] { --bc-img: radial-gradient(130% 90% at 28% 18%, rgb(255 255 255 / .18), transparent 60%), linear-gradient(180deg, transparent 60%, rgb(0 0 0 / .18)), var(--tex-noise); --bc-size: auto, auto, 220px; --bc-blend: soft-light, multiply, soft-light; } /* ---------- Tapa ---------- */ .book-cover { --c: var(--cover-color); --corner-s: 17cqw; position: relative; width: 100%; aspect-ratio: 5 / 7; border-radius: 3px 9px 9px 3px; overflow: hidden; container-type: inline-size; background-color: var(--c); background-image: var(--bc-img); background-size: var(--bc-size); background-blend-mode: var(--bc-blend); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05), inset -3px 0 6px rgb(0 0 0 / .25), inset 0 0 50px rgb(0 0 0 / .35), 0 1px 2px rgb(0 0 0 / .3), 0 28px 50px -22px rgb(0 0 0 / .65); color: var(--foil-flat); user-select: none; } .shelf-tint .book-cover[style*="--tint"] { --c: color-mix(in oklab, var(--cover-color) 70%, var(--tint)); } :root[data-cover-tex="terciopelo"] .book-cover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .03), inset -3px 0 6px rgb(0 0 0 / .3), inset 0 0 70px rgb(0 0 0 / .45), 0 1px 2px rgb(0 0 0 / .3), 0 28px 50px -22px rgb(0 0 0 / .65); } /* Esquineras de metal (en las dos esquinas exteriores, como en las Biblias de piel) */ .cover-corners .book-cover::after { content: ""; position: absolute; inset: 0 0 0 auto; width: var(--corner-s); z-index: 2; background: var(--corner-foil, var(--foil)); -webkit-mask: linear-gradient(225deg, #000 0 49%, transparent 50%) top right / var(--corner-s) var(--corner-s) no-repeat, linear-gradient(315deg, #000 0 49%, transparent 50%) bottom right / var(--corner-s) var(--corner-s) no-repeat; mask: linear-gradient(225deg, #000 0 49%, transparent 50%) top right / var(--corner-s) var(--corner-s) no-repeat, linear-gradient(315deg, #000 0 49%, transparent 50%) bottom right / var(--corner-s) var(--corner-s) no-repeat; filter: drop-shadow(-1px 1px 1px rgb(0 0 0 / .45)); pointer-events: none; } :root:is([data-cover-foil="tinta"], [data-cover-foil="gofrado"], [data-cover-foil="blanco"], [data-cover-foil="negro"], [data-cover-foil="nacar"]) .book-cover { --corner-foil: linear-gradient(115deg, #5b4318 0%, #b8974f 26%, #85662b 46%, #cdb06a 64%, #6f5320 84%, #a88a47 100%); } .bc-spine { position: absolute; inset: 0 auto 0 0; width: 7.5%; background: linear-gradient(90deg, rgb(0 0 0 / .5), rgb(255 255 255 / .1) 55%, rgb(0 0 0 / .3)); box-shadow: 1px 0 0 rgb(0 0 0 / .35), 2px 0 0 rgb(255 255 255 / .06); } /* ---------- Marco grabado ---------- */ .bc-frame { --orn-s: 11cqw; position: absolute; inset: 6% 6% 6% 13%; border: max(1px, .5cqw) solid transparent; border-image: var(--foil) 1; opacity: .85; } .bc-frame::after { content: ""; position: absolute; inset: 2.2cqw; border: max(1px, .3cqw) solid transparent; border-image: var(--foil) 1; opacity: .55; } .bc-frame::before { content: ""; position: absolute; display: none; inset: 3.4cqw; background: var(--foil); -webkit-mask: var(--orn-tl) top left / var(--orn-s) no-repeat, var(--orn-tr) top right / var(--orn-s) no-repeat, var(--orn-br) bottom right / var(--orn-s) no-repeat, var(--orn-bl) bottom left / var(--orn-s) no-repeat; mask: var(--orn-tl) top left / var(--orn-s) no-repeat, var(--orn-tr) top right / var(--orn-s) no-repeat, var(--orn-br) bottom right / var(--orn-s) no-repeat, var(--orn-bl) bottom left / var(--orn-s) no-repeat; } :root[data-cover-frame="sencillo"] .bc-frame::after { display: none; } :root[data-cover-frame="ninguno"] .bc-frame { display: none; } :root[data-cover-frame="ornamental"] .bc-frame::before { display: block; } :root[data-cover-frame="ornamental"] .bc-frame::after { inset: 1.6cqw; } :root[data-cover-frame="esquinas"] .bc-frame { border: 0; border-image: none; opacity: .95; } :root[data-cover-frame="esquinas"] .bc-frame::after { display: none; } :root[data-cover-frame="esquinas"] .bc-frame::before { display: block; inset: 0; --orn-s: 14cqw; -webkit-mask: var(--sq-tl) top left / var(--orn-s) no-repeat, var(--sq-tr) top right / var(--orn-s) no-repeat, var(--sq-br) bottom right / var(--orn-s) no-repeat, var(--sq-bl) bottom left / var(--orn-s) no-repeat; mask: var(--sq-tl) top left / var(--orn-s) no-repeat, var(--sq-tr) top right / var(--orn-s) no-repeat, var(--sq-br) bottom right / var(--orn-s) no-repeat, var(--sq-bl) bottom left / var(--orn-s) no-repeat; } .bc-content { position: absolute; inset: 6% 6% 6% 13%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.2cqw; padding: 8cqw 7cqw; text-align: center; } /* ---------- Emblema ---------- */ .bc-emblem { position: relative; width: 15cqw; aspect-ratio: 1; margin-bottom: 3cqw; background: var(--foil); -webkit-mask: var(--emblem) center / contain no-repeat; mask: var(--emblem) center / contain no-repeat; filter: drop-shadow(0 1px 0 rgb(0 0 0 / .4)); } .bc-initial { display: none; } :root[data-cover-emblem="ninguno"] .bc-emblem { display: none; } /* Tu inicial: el anillo es la máscara (en ::before) y la letra se escribe encima */ :root[data-cover-emblem="inicial"] .bc-emblem { background: none; -webkit-mask: none; mask: none; width: 17cqw; } :root[data-cover-emblem="inicial"] .bc-emblem::before { content: ""; position: absolute; inset: 0; background: var(--foil); -webkit-mask: var(--emblem) center / contain no-repeat; mask: var(--emblem) center / contain no-repeat; } :root[data-cover-emblem="inicial"] .bc-initial { position: absolute; inset: 0; display: grid; place-items: center; padding-top: .06em; font-family: var(--cover-font); font-size: 9.5cqw; line-height: 1; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-cover-emblem="inicial"] .is-mini .bc-emblem { display: none; } /* ---------- Textos ---------- */ .bc-title, .bc-sub, .bc-owner { background: var(--foil); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgb(0 0 0 / .45)); } .cover-light .bc-title, .cover-light .bc-sub, .cover-light .bc-owner { filter: drop-shadow(0 1px 0 rgb(255 255 255 / .5)); } /* Gofrado en seco: sin color, hundido en la piel */ :root[data-cover-foil="gofrado"] :is(.bc-title, .bc-sub, .bc-owner, .bc-emblem, .bc-frame) { filter: drop-shadow(0 1px 0 rgb(255 255 255 / .16)) drop-shadow(0 -1px 0 rgb(0 0 0 / .45)); } :root[data-cover-foil="blanco"] :is(.bc-title, .bc-sub, .bc-owner), :root[data-cover-foil="negro"] :is(.bc-title, .bc-sub, .bc-owner) { filter: none; } .bc-title { margin: 0; font-family: var(--cover-font); font-size: 12.5cqw; font-weight: 500; line-height: .98; letter-spacing: .01em; text-wrap: balance; } :root:is([data-cover-font="Cinzel"]) .bc-title { letter-spacing: .06em; } .bc-sub { font-family: var(--font-ui); font-size: 2.8cqw; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; opacity: .9; } .bc-owner { position: absolute; left: 0; right: 0; bottom: 9cqw; font-family: var(--cover-font); font-size: 5cqw; font-style: italic; } .bc-owner:empty { display: none; } /* Tapas pequeñas (estantería) */ .book-cover.is-mini { border-radius: 2px 6px 6px 2px; } .book-cover.is-mini .bc-content { gap: 4cqw; padding: 6cqw 5cqw; } .book-cover.is-mini .bc-emblem { width: 13cqw; margin-bottom: 2cqw; } .book-cover.is-mini .bc-title { font-size: 14cqw; line-height: 1.02; overflow-wrap: anywhere; } .book-cover.is-mini .bc-title.t-lg { font-size: 11.5cqw; } .book-cover.is-mini .bc-title.t-xl { font-size: 9.5cqw; } .book-cover.is-mini .bc-sub { font-size: 5cqw; letter-spacing: .12em; font-weight: 700; opacity: 1; } .book-cover.is-mini .bc-frame::after { inset: 3cqw; } /* ---------- Portada a pantalla completa ---------- La pantalla es la tapa. .is-open = tapa abierta (girada 180° desde el lomo). */ .splash { --sp-spine: clamp(18px, 3.2vw, 48px); --sp-pad: clamp(18px, 4.5vmin, 60px); position: fixed; inset: 0; z-index: 9500; perspective: 2600px; perspective-origin: 0 50%; background: rgb(10 8 6 / .6); /* sombra que la tapa proyecta sobre la página */ transition: background-color 1.5s cubic-bezier(.65, .02, .25, 1); overflow: hidden; } .splash.is-open { background: rgb(10 8 6 / 0); pointer-events: none; } .no-splash .splash { visibility: hidden; pointer-events: none; } .splash.no-anim, .splash.no-anim * { transition: none !important; } .splash-cover { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform 1.5s cubic-bezier(.65, .02, .25, 1); will-change: transform; } .splash.is-open .splash-cover { transform: rotateY(-180deg); } /* Al pasar por «entrar», la tapa se levanta un poco (adelanto de lo que hay dentro) */ @media (hover: hover) { .splash.is-ready:not(.is-open) .splash-cover:has(.splash-enter:hover) { transform: rotateY(-5deg); } } .book-cover.splash-face { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; container-type: normal; backface-visibility: hidden; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04), inset 0 0 18vmin rgb(0 0 0 / .45); } .splash-face .bc-spine { width: var(--sp-spine); } .splash-face .bc-frame, .splash-face .bc-content { inset: var(--sp-pad) var(--sp-pad) var(--sp-pad) calc(var(--sp-spine) + var(--sp-pad)); } .splash-face .bc-frame { border-width: 1.5px; } .splash-face .bc-frame::after { inset: clamp(6px, 1.3vmin, 14px); border-width: 1px; } .splash-face .bc-content { gap: clamp(10px, 2vmin, 22px); padding: 6vmin 5vmin 18vmin; } .splash-face .bc-emblem { width: clamp(46px, 9vmin, 100px); margin-bottom: 1.5vmin; } .splash-face .bc-title { font-size: clamp(2.6rem, 11vmin, 8.5rem); line-height: .95; max-width: 12ch; } .splash-face .bc-sub { font-size: clamp(.6rem, 1.5vmin, .9rem); letter-spacing: .3em; } .splash-face .bc-owner { bottom: auto; top: calc(50% + clamp(120px, 26vmin, 300px)); font-size: clamp(1.1rem, 3.2vmin, 2rem); } .splash-face .bc-content > * { animation: rise 1.1s var(--ease-out) both; } .splash-face .bc-content > :nth-child(2) { animation-delay: .1s; } .splash-face .bc-content > :nth-child(3) { animation-delay: .2s; } .splash-face .bc-content > :nth-child(4) { animation-delay: .3s; } .splash-enter { position: absolute; left: calc(50% + var(--sp-spine) / 2); bottom: calc(var(--sp-pad) + clamp(24px, 6vmin, 70px)); translate: -50% 0; display: inline-flex; align-items: center; gap: .8em; min-height: 48px; padding: 0 1.6em; border-radius: 99px; border: 1px solid transparent; border-image: none; color: var(--foil-flat); font-family: var(--font-ui); font-size: clamp(.72rem, 1.4vmin, .85rem); font-weight: 700; letter-spacing: .32em; text-transform: uppercase; transition: background-color .3s, border-color .3s, opacity .4s; } .splash-enter::before, .splash-enter::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; } .splash-enter:not([disabled]):hover { background: rgb(255 255 255 / .06); border-color: color-mix(in oklab, var(--foil-flat) 45%, transparent); } .cover-light .splash-enter:not([disabled]):hover { background: rgb(0 0 0 / .05); } .splash-enter .se-ready, .splash.is-ready .splash-enter .se-loading { display: none; } .splash.is-ready .splash-enter .se-ready { display: inline; animation: breathe-text 2.6s ease-in-out infinite; } .se-loading { opacity: .55; } .se-touch { display: none; } .touch .se-touch { display: inline; } .touch .se-click { display: none; } @keyframes breathe-text { 50% { opacity: .45; } } /* Cara interior de la tapa: guarda jaspeada con ex libris */ .splash-endpaper { position: absolute; inset: 0; display: grid; place-items: center; transform: rotateY(180deg); backface-visibility: hidden; background: radial-gradient(circle at 20% 30%, rgb(255 255 255 / .1) 0 2px, transparent 3px) 0 0 / 22px 22px, radial-gradient(circle at 70% 60%, rgb(0 0 0 / .12) 0 1.5px, transparent 2.5px) 0 0 / 30px 30px, linear-gradient(135deg, color-mix(in oklab, var(--cover-color) 55%, #d9c7a0), color-mix(in oklab, var(--cover-color) 80%, #000)); box-shadow: inset calc(var(--sp-spine) * -1) 0 50px -20px rgb(0 0 0 / .5); } .ex-libris { display: grid; justify-items: center; gap: 8px; padding: 26px 40px; border-radius: 4px; background: #f4ecdc; color: #3b2d20; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .5), inset 0 0 0 1px #d8c9a8, inset 0 0 0 5px #f4ecdc, inset 0 0 0 6px #c9b48a; font-family: var(--font-display); text-align: center; } .exl-orn { color: #9a7a3c; } .ex-libris em { font-size: .95rem; color: #7a6650; } .ex-libris b { font-size: 1.6rem; font-weight: 500; } :root[data-reduce-motion="on"] .splash, :root[data-reduce-motion="on"] .splash-cover { transition: opacity .4s, visibility .4s; } :root[data-reduce-motion="on"] .splash.is-open { opacity: 0; } :root[data-reduce-motion="on"] .splash.is-open .splash-cover { transform: none; } @media (prefers-reduced-motion: reduce) { .splash, .splash-cover { transition: opacity .4s, visibility .4s; } .splash.is-open { opacity: 0; } .splash.is-open .splash-cover { transform: none; } } /* Logo que devuelve a la portada (móvil) */ .home-brand { display: inline-grid; place-items: center; } .home-brand .brand-mark { width: 36px; height: 36px; border-radius: 11px; } .home-brand .brand-mark .icon { width: 20px; height: 20px; } [data-cover-open] { cursor: pointer; } /* Tamaños de adornos en la portada a pantalla completa */ .splash-face { --corner-s: clamp(54px, 12vmin, 150px); } .splash-face .bc-frame { --orn-s: clamp(40px, 8vmin, 96px); } :root[data-cover-frame="esquinas"] .splash-face .bc-frame::before { --orn-s: clamp(50px, 10vmin, 120px); } :root[data-cover-emblem="inicial"] .splash-face .bc-emblem { width: clamp(56px, 11vmin, 120px); } :root[data-cover-emblem="inicial"] .splash-face .bc-initial { font-size: clamp(30px, 6vmin, 66px); } .book-cover.is-mini .bc-frame { --orn-s: 13cqw; } .bc-title { font-synthesis: none; } /* ---------- Ajustes › Portada ---------- */ .cover-editor { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: var(--space-7); align-items: start; margin-top: var(--space-5); } .cover-preview { position: sticky; top: 0; display: grid; gap: var(--space-4); justify-items: center; padding: var(--space-6); border-radius: var(--radius-lg); background: radial-gradient(70% 60% at 50% 40%, color-mix(in oklab, var(--cover-color) 22%, #2a241e), #121010); } .cover-preview .book-cover { max-width: 240px; } .cover-form { display: grid; gap: var(--space-6); } .cover-group { display: grid; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line); } .cover-group:last-of-type { border-bottom: 0; } .cover-group-title { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .cover-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .cover-fields .field:first-child { grid-column: 1 / -1; } .cover-color-groups { display: grid; gap: var(--space-3); } .cover-color-group { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: var(--space-3); } .cover-color-group > span { font-size: .75rem; font-weight: 600; color: var(--ink-3); } .cover-swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .cover-swatch { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2), inset 0 -8px 12px rgb(0 0 0 / .18), inset 0 6px 10px rgb(255 255 255 / .12); transition: transform var(--dur-2) var(--ease-spring); } .cover-swatch:hover { transform: scale(1.1); } .cover-swatch.is-active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); } .cover-swatch-custom { overflow: hidden; background: conic-gradient(#e44, #ea3, #ee4, #4c4, #4ce, #44e, #c4e, #e44); } .cover-swatch-custom input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); opacity: 0; cursor: pointer; } .cover-custom-row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: var(--ink-2); } .cover-custom-row .input { width: 110px; font-family: ui-monospace, monospace; text-transform: uppercase; } /* Mosaicos (texturas, acabados, marcos, emblemas, letra): muestra visual + nombre */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; } .tile { display: grid; justify-items: center; gap: 6px; padding: 8px 6px 9px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); font-size: .72rem; font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1.2; transition: border-color var(--dur-2), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2); } .tile:hover { border-color: var(--line-2); transform: translateY(-2px); } .tile[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .tile-demo { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 5 / 4; border-radius: 6px; overflow: hidden; background-color: var(--cover-color); color: var(--foil-flat); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2), inset 0 0 18px rgb(0 0 0 / .3); } .tex-demo { background-image: var(--bc-img); background-size: var(--bc-size); background-blend-mode: var(--bc-blend); } .foil-demo span { width: 62%; height: 38%; border-radius: 4px; background: var(--g); box-shadow: 0 1px 2px rgb(0 0 0 / .4); } .foil-demo b { position: absolute; font-family: var(--cover-font); font-size: 1.35rem; font-weight: 500; background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgb(0 0 0 / .45)); } .foil-demo[data-foil="gofrado"] b { filter: drop-shadow(0 1px 0 rgb(255 255 255 / .16)) drop-shadow(0 -1px 0 rgb(0 0 0 / .45)); } .emblem-demo .emblem-svg { width: 62%; height: 62%; } .emblem-demo .demo-initial { position: absolute; font-family: var(--cover-font); font-size: 1.25rem; } .frame-demo svg { width: 58%; height: 84%; } .font-demo { font-size: 1.6rem; line-height: 1; } .tile .emblem-svg, .frame-demo svg { stroke-width: 1.6; } .cover-toggles { display: grid; gap: var(--space-3); } @media (max-width: 860px) { .cover-editor { grid-template-columns: 1fr; } .cover-preview { position: static; } } @media (max-width: 560px) { .cover-fields { grid-template-columns: 1fr; } .cover-color-group { grid-template-columns: 1fr; gap: 6px; } .tile-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); } } .with-splash .boot { display: none; } .splash.is-closing .splash-enter { opacity: 0; } .splash-enter { white-space: nowrap; letter-spacing: .26em; } .tile-demo.font-demo { aspect-ratio: 2 / 1; }