init
This commit is contained in:
itten
+324
@@ -0,0 +1,324 @@
|
||||
/* ==========================================================================
|
||||
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;
|
||||
transition: background var(--speed) var(--ease);
|
||||
}
|
||||
|
||||
/* 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; }
|
||||
|
||||
/* ========================================================================
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user