DESIGNED4LIFE
Leivansky • Live • Music • Community
Designed4Life · Leivansky
:root {
–ink: #15131b;
–white: #ffffff;
–pink: #ff2bd6;
–cyan: #00dff0;
–lime: #b7f500;
–violet: #7c3cff;
–orange: #ff7a00;
–red: #ff1f28;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: #ffffff;
color: var(–ink);
font-family:
Inter,
Arial,
Helvetica,
sans-serif;
}
.shell {
width: 100%;
padding: 22px;
}
.card {
position: relative;
isolation: isolate;
width: min(1120px, 100%);
margin: auto;
overflow: hidden;
border: 2px solid var(–ink);
border-radius: 30px;
background: #ffffff;
box-shadow:
10px 10px 0 var(–ink),
0 18px 50px rgba(0, 234, 255, 0.13);
}
.card::before {
content: « »;
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(
rgba(255, 255, 255, 0.94),
rgba(255, 255, 255, 0.98)
),
linear-gradient(
90deg,
rgba(0, 234, 255, 0.09) 1px,
transparent 1px
),
linear-gradient(
rgba(255, 43, 214, 0.09) 1px,
transparent 1px
);
background-size:
auto,
36px 36px,
36px 36px;
}
.rail {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
padding: 14px 22px;
border-bottom: 2px solid var(–ink);
background: #fafafa;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.2em;
}
.status {
display: flex;
align-items: center;
gap: 8px;
}
.status-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(–lime);
box-shadow: 0 0 12px var(–lime);
animation: blink 1.2s ease-in-out infinite;
}
.hero {
position: relative;
min-height: 340px;
display: grid;
place-items: center;
padding: 62px 220px 48px;
text-align: center;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 2px solid var(–ink);
border-radius: 999px;
background: var(–lime);
font-size: 11px;
font-weight: 1000;
letter-spacing: 0.14em;
box-shadow: 4px 4px 0 var(–ink);
}
.hero h1 {
margin: 18px 0 0;
font-family:
Impact,
« Arial Black »,
sans-serif;
font-size: clamp(55px, 9vw, 108px);
font-style: italic;
line-height: 0.8;
letter-spacing: -0.045em;
text-transform: uppercase;
color: #ffffff;
-webkit-text-stroke: 3px var(–ink);
text-shadow:
5px 5px 0 var(–pink),
9px 9px 0 var(–cyan);
transform: skew(-3deg);
animation: title-pulse 3s ease-in-out infinite;
}
.tagline {
margin: 27px auto 0;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* Planète et satellites */
.planet-scene {
position: absolute;
left: 34px;
top: 62px;
width: 170px;
height: 170px;
}
.planet {
position: absolute;
inset: 42px;
border: 3px solid var(–ink);
border-radius: 50%;
background:
radial-gradient(
circle at 32% 28%,
#ffffff 0 6%,
var(–cyan) 7% 35%,
var(–violet) 37% 64%,
var(–ink) 66%
);
box-shadow:
0 0 26px rgba(0, 234, 255, 0.6),
0 0 48px rgba(124, 60, 255, 0.33);
animation: planet-float 3s ease-in-out infinite;
}
.planet::after {
content: « »;
position: absolute;
inset: 18px 9px;
border: 3px dashed rgba(255, 255, 255, 0.8);
border-radius: 50%;
transform: rotate(-20deg);
}
.orbit {
position: absolute;
inset: 10px;
border: 1.5px solid var(–ink);
border-radius: 50%;
animation: orbit-spin 6s linear infinite;
}
.orbit-two {
inset: 26px 0;
animation-duration: 8s;
animation-direction: reverse;
}
.satellite {
position: absolute;
top: -12px;
left: calc(50% – 11px);
width: 22px;
height: 16px;
border: 2px solid var(–ink);
border-radius: 4px;
background: var(–pink);
}
.satellite::before,
.satellite::after {
content: « »;
position: absolute;
top: 3px;
width: 12px;
height: 7px;
border: 2px solid var(–ink);
background: var(–cyan);
}
.satellite::before {
right: 18px;
}
.satellite::after {
left: 18px;
}
.moon {
position: absolute;
right: 7px;
top: 17px;
width: 10px;
height: 10px;
border: 2px solid var(–ink);
border-radius: 50%;
background: var(–lime);
box-shadow: 0 0 8px var(–lime);
}
/* Haut-parleur animé */
.speaker-scene {
position: absolute;
right: 40px;
top: 92px;
width: 145px;
height: 100px;
}
.speaker {
position: absolute;
right: 0;
top: 22px;
width: 66px;
height: 66px;
display: grid;
place-items: center;
border: 3px solid var(–ink);
border-radius: 17px;
background: var(–pink);
box-shadow:
5px 5px 0 var(–ink),
0 0 20px rgba(255, 43, 214, 0.47);
animation:
speaker-bounce 0.7s ease-in-out infinite alternate;
}
.speaker::before {
content: « ♪ »;
font-size: 34px;
font-weight: 900;
}
.sound-wave {
position: absolute;
border: 3px solid var(–cyan);
border-top-color: transparent;
border-bottom-color: transparent;
border-right: 0;
border-radius: 50%;
animation: sound-wave 1.2s ease-out infinite;
}
.wave-one {
right: 68px;
top: 33px;
width: 25px;
height: 40px;
}
.wave-two {
right: 85px;
top: 20px;
width: 42px;
height: 66px;
animation-delay: 0.2s;
}
.wave-three {
right: 104px;
top: 7px;
width: 58px;
height: 92px;
animation-delay: 0.4s;
}
/* Avion animé */
.flying-plane {
position: absolute;
top: 270px;
left: -50px;
font-size: 30px;
color: var(–violet);
filter:
drop-shadow(
0 0 6px rgba(124, 60, 255, 0.53)
);
animation: flying 12s linear infinite;
}
/* Nouvelle sortie YouTube */
.release {
margin: 0 28px 20px;
padding: 22px;
border: 2px solid var(–ink);
border-radius: 20px;
background: #ffffff;
box-shadow: 6px 6px 0 var(–ink);
}
.release-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.release-badge {
display: inline-block;
padding: 7px 11px;
border: 2px solid var(–ink);
border-radius: 999px;
background: var(–red);
color: #ffffff;
font-size: 11px;
font-weight: 1000;
letter-spacing: 0.12em;
animation: badge-pulse 1.8s ease-in-out infinite;
}
.release h2 {
margin: 10px 0 5px;
font-family:
Impact,
« Arial Black »,
sans-serif;
font-size: clamp(27px, 5vw, 46px);
font-style: italic;
letter-spacing: 0.02em;
}
.release p {
margin: 0;
color: #555555;
font-weight: 700;
}
.watch-button {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 11px;
padding: 15px 18px;
border: 2px solid var(–ink);
border-radius: 14px;
background: var(–red);
color: #ffffff;
text-decoration: none;
font-weight: 1000;
box-shadow: 4px 4px 0 var(–ink);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.watch-button:hover,
.watch-button:focus-visible {
outline: none;
transform: translate(-2px, -2px);
box-shadow: 7px 7px 0 var(–ink);
}
.play-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 50%;
background: #ffffff;
color: var(–red);
}
/* Groupes */
.groups {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 20px;
padding: 8px 28px 32px;
}
.group {
padding: 18px;
border: 2px solid var(–ink);
border-radius: 20px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 6px 6px 0 var(–ink);
}
.group-title {
display: inline-block;
margin: 0 0 15px;
padding: 7px 11px;
border: 2px solid var(–ink);
border-radius: 8px;
background: var(–accent);
font-family:
Impact,
« Arial Black »,
sans-serif;
font-size: 16px;
font-style: italic;
letter-spacing: 0.07em;
box-shadow: 3px 3px 0 var(–ink);
}
.button-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 10px;
}
.link-button {
min-height: 54px;
display: flex;
align-items: center;
gap: 10px;
padding: 11px 13px;
border: 1.5px solid var(–ink);
border-radius: 12px;
background: #ffffff;
color: var(–ink);
text-decoration: none;
font-size: 13px;
font-weight: 900;
box-shadow: 3px 3px 0 var(–ink);
transition:
transform 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease;
}
.link-button:hover,
.link-button:focus-visible {
outline: none;
transform: translate(-2px, -2px);
background:
color-mix(
in srgb,
var(–accent) 16%,
white
);
box-shadow:
6px 6px 0 var(–ink),
0 0 16px
color-mix(
in srgb,
var(–accent) 55%,
transparent
);
}
.network-icon {
flex: 0 0 auto;
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 1.5px solid var(–ink);
border-radius: 8px;
background: var(–accent);
font-size: 15px;
}
.external-icon {
margin-left: auto;
opacity: 0.45;
}
.bottom-strip {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 14px 23px;
background: var(–ink);
color: #ffffff;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.2em;
text-transform: uppercase;
}
/* Animations */
@keyframes orbit-spin {
to {
transform: rotate(360deg);
}
}
@keyframes planet-float {
50% {
transform:
translateY(-8px)
rotate(3deg);
}
}
@keyframes blink {
50% {
opacity: 0.35;
transform: scale(0.75);
}
}
@keyframes title-pulse {
0%,
100% {
transform:
skew(-3deg)
scale(1);
}
50% {
transform:
skew(-3deg)
scale(1.025);
filter: saturate(1.4);
}
}
@keyframes sound-wave {
0% {
opacity: 0;
transform: scale(0.7);
}
45% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1.15);
}
}
@keyframes speaker-bounce {
to {
transform:
scale(1.05)
rotate(2deg);
}
}
@keyframes flying {
0% {
transform:
translateX(0)
translateY(0)
rotate(12deg);
}
50% {
transform:
translateX(590px)
translateY(-40px)
rotate(7deg);
}
100% {
transform:
translateX(1200px)
translateY(12px)
rotate(14deg);
}
}
@keyframes badge-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.045);
box-shadow:
0 0 18px
rgba(255, 31, 40, 0.4);
}
}
/* Tablettes */
@media (max-width: 850px) {
.hero {
padding:
195px
24px
44px;
}
.planet-scene {
left: calc(50% – 125px);
top: 25px;
transform: scale(0.86);
}
.speaker-scene {
right: calc(50% – 132px);
top: 58px;
transform: scale(0.8);
}
.groups {
grid-template-columns: 1fr;
}
.release-inner {
align-items: flex-start;
flex-direction: column;
}
.watch-button {
width: 100%;
justify-content: center;
}
}
/* Téléphones */
@media (max-width: 520px) {
.shell {
padding: 10px;
}
.card {
border-radius: 21px;
box-shadow: 6px 6px 0 var(–ink);
}
.rail {
padding: 11px 13px;
letter-spacing: 0.1em;
}
.rail > span:last-child {
display: none;
}
.hero {
min-height: 350px;
}
.hero h1 {
font-size: 52px;
-webkit-text-stroke-width: 2px;
text-shadow:
4px 4px 0 var(–pink),
7px 7px 0 var(–cyan);
}
.tagline {
font-size: 10px;
line-height: 1.6;
}
.release {
margin:
0
18px
18px;
}
.groups {
padding:
8px
18px
27px;
}
.button-grid {
grid-template-columns: 1fr;
}
.bottom-strip {
flex-direction: column;
align-items: center;
text-align: center;
}
}
/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
}
Designed
SIGNAL EN LIGNE
RÉSEAU // D4L-2026
⚡ CONNEXION MULTIVERS
Designed
4Life
Live · création · musique · communauté
● NOUVELLE SORTIE
REGARDER SUR YOUTUBE
NOUVELLES VIDÉOS YOUTUBE
Sets, lives et nouveautés Designed4Life.
LIVE & COMMUNAUTÉ
CHAÎNES & STREAMING
MUSIQUE · LEIVANSKY
SITES & LIENS BIO
Liens > Facebook Designed4Life®
Votre commentaire