itten
330 lines
8.1 KiB
CSS
330 lines
8.1 KiB
CSS
/* ==========================================================================
|
|
TRANSFER Broadcast Graphics Template (transparent overlay)
|
|
Frame: 1920 x 1080 px (transparent for compositor / OBS / CasparCG)
|
|
Graphics: 1920 x 758 px -> 641 x 758 px (center, after 5s)
|
|
Player photo source: 641 x 758 px PNG (displayed 1:1 in State 1)
|
|
========================================================================== */
|
|
|
|
:root {
|
|
--team-color: #FEBE10;
|
|
--team-accent: #00529F;
|
|
|
|
--gfx-h: 758px;
|
|
--gfx-w-full: 1920px;
|
|
--gfx-w-mini: 641px;
|
|
--photo-w: 641px; /* source image width — 1:1 in State 1 */
|
|
--photo-w-c: 250px; /* compact State 2 width (cropped from 641 source) */
|
|
|
|
--ease: cubic-bezier(0.45, 0, 0.15, 1);
|
|
--bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--speed: 1.0s;
|
|
|
|
--white: #FFFFFF;
|
|
--dark: #0F0F14;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
html, body {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
background: transparent;
|
|
overflow: hidden;
|
|
font-family: 'ONY One', 'Barlow Condensed', 'Arial Narrow', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Frame ============================================================== */
|
|
.frame {
|
|
position: relative;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
background: transparent; /* overlay mode — no background */
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Graphics container ================================================= */
|
|
.graphics-container {
|
|
position: absolute;
|
|
bottom: 161px; /* (1080 - 758) / 2 = 161 -> vertically centered */
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 1920px;
|
|
height: 758px;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.4s ease, width var(--speed) var(--ease);
|
|
}
|
|
|
|
.graphics-container.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.graphics-container.hidden {
|
|
opacity: 0;
|
|
}
|
|
|
|
.graphics-container.compact {
|
|
width: 641px;
|
|
}
|
|
|
|
/* Transfer card ====================================================== */
|
|
.transfer-card {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
background: #222524;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transform: translateZ(0);
|
|
transition: background var(--speed) var(--ease),
|
|
box-shadow var(--speed) var(--ease);
|
|
}
|
|
|
|
.compact .transfer-card {
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Photo section ====================================================== */
|
|
.photo-section {
|
|
flex: 0 0 var(--photo-w);
|
|
width: var(--photo-w);
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: flex-basis var(--speed) var(--ease),
|
|
width var(--speed) var(--ease);
|
|
}
|
|
|
|
.compact .photo-section {
|
|
flex: 0 0 var(--photo-w-c);
|
|
width: var(--photo-w-c);
|
|
}
|
|
|
|
.player-photo {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center top;
|
|
display: block;
|
|
transition: object-position var(--speed) var(--ease);
|
|
}
|
|
|
|
.photo-overlay {
|
|
position: absolute; inset: 0;
|
|
background: linear-gradient(180deg,
|
|
transparent 0%,
|
|
transparent 55%,
|
|
rgba(0, 0, 0, 0.4) 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Info section ======================================================= */
|
|
.info-section {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
height: 100%;
|
|
padding: 55px 70px 50px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center; /* always center — never changes */
|
|
position: relative;
|
|
z-index: 3;
|
|
transition: padding var(--speed) var(--ease);
|
|
}
|
|
|
|
.compact .info-section {
|
|
padding: 50px 35px 50px;
|
|
}
|
|
|
|
/* Player name ---------------------------------------------------- */
|
|
.player-name {
|
|
font-size: 72px;
|
|
font-weight: 900;
|
|
line-height: 0.95;
|
|
text-transform: uppercase;
|
|
color: var(--white);
|
|
text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.22);
|
|
margin-bottom: 36px;
|
|
transition: font-size var(--speed) var(--ease),
|
|
line-height var(--speed) var(--ease),
|
|
margin var(--speed) var(--ease);
|
|
}
|
|
|
|
.compact .player-name {
|
|
font-size: 48px;
|
|
line-height: 0.95;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
/* Team block ------------------------------------------------------ */
|
|
.team-block {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
margin-bottom: 24px;
|
|
transition: gap var(--speed) var(--ease),
|
|
margin var(--speed) var(--ease);
|
|
}
|
|
|
|
.compact .team-block {
|
|
gap: 14px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.team-logo {
|
|
width: 72px;
|
|
height: 72px;
|
|
object-fit: contain;
|
|
flex-shrink: 0;
|
|
transition: width var(--speed) var(--ease), height var(--speed) var(--ease);
|
|
}
|
|
|
|
.compact .team-logo { width: 56px; height: 56px; }
|
|
|
|
.team-text { display: flex; flex-direction: column; }
|
|
|
|
.team-direction {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
color: var(--white);
|
|
opacity: 0.5;
|
|
transition: font-size var(--speed) var(--ease),
|
|
letter-spacing var(--speed) var(--ease);
|
|
}
|
|
|
|
.compact .team-direction { font-size: 13px; letter-spacing: 3px; }
|
|
|
|
.team-name {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
color: var(--white);
|
|
line-height: 1;
|
|
margin-top: 4px;
|
|
transition: font-size var(--speed) var(--ease);
|
|
}
|
|
|
|
.compact .team-name { font-size: 22px; }
|
|
|
|
/* Price ----------------------------------------------------------- */
|
|
.price-badge {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
flex-shrink: 0;
|
|
transition: align-self var(--speed) var(--ease);
|
|
}
|
|
|
|
.compact .price-badge {
|
|
text-align: left;
|
|
}
|
|
|
|
.price-label {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
letter-spacing: 4px;
|
|
text-transform: uppercase;
|
|
color: var(--white);
|
|
opacity: 0.5;
|
|
transition: font-size var(--speed) var(--ease),
|
|
letter-spacing var(--speed) var(--ease);
|
|
}
|
|
|
|
.compact .price-label { font-size: 13px; letter-spacing: 3px; }
|
|
|
|
.price-value {
|
|
font-size: 46px;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
color: var(--white);
|
|
line-height: 1;
|
|
margin-top: 4px;
|
|
white-space: nowrap;
|
|
transition: font-size var(--speed) var(--ease),
|
|
color var(--speed) var(--ease),
|
|
margin var(--speed) var(--ease);
|
|
}
|
|
|
|
|
|
|
|
.compact .price-value { font-size: 38px; white-space: normal; }
|
|
|
|
/* ========================================================================
|
|
Reveal animation (staggered entrance)
|
|
======================================================================== */
|
|
.reveal .transfer-card { animation: cardIn 0.5s var(--ease) both; }
|
|
.reveal .photo-section { animation: photoIn 0.6s var(--ease) 0.15s both; }
|
|
.reveal .player-name { animation: slideRight 0.5s var(--ease) 0.55s both; }
|
|
.reveal .team-block { animation: slideRight 0.4s var(--ease) 1.0s both; }
|
|
.reveal .price-badge { animation: slideRight 0.4s var(--ease) 1.3s both; }
|
|
|
|
@keyframes cardIn {
|
|
from { transform: translateY(30px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
@keyframes photoIn {
|
|
from { transform: scale(1.15); opacity: 0; }
|
|
to { transform: scale(1); opacity: 1; }
|
|
}
|
|
@keyframes slideDown {
|
|
from { transform: translateY(-15px); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 0.55; }
|
|
}
|
|
@keyframes slideRight {
|
|
from { transform: translateX(-25px); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
@keyframes popIn {
|
|
0% { transform: scale(0.5); opacity: 0; }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
|
|
/* ========================================================================
|
|
Operator panel (dev overlay)
|
|
======================================================================== */
|
|
.operator-panel {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: rgba(0, 0, 0, 0.75);
|
|
color: #eee;
|
|
padding: 10px 24px;
|
|
border-radius: 6px;
|
|
font-family: 'ONY One', sans-serif;
|
|
font-size: 16px;
|
|
z-index: 100;
|
|
opacity: 0.25;
|
|
transition: opacity 0.2s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.operator-panel:hover { opacity: 0.95; }
|
|
|
|
.op-counter {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: #FEBE10;
|
|
}
|
|
|
|
.op-controls { font-size: 14px; color: #aaa; }
|
|
|
|
kbd {
|
|
background: #333;
|
|
border: 1px solid #555;
|
|
border-radius: 3px;
|
|
padding: 1px 7px;
|
|
font-family: monospace;
|
|
font-size: 13px;
|
|
color: #fff;
|
|
} |