feat: social media aggregator (YouTube, Instagram, TikTok, WordPress)
This commit is contained in:
+784
@@ -0,0 +1,784 @@
|
||||
/* ============================================================
|
||||
HERO SECTION
|
||||
============================================================ */
|
||||
|
||||
.social-hero {
|
||||
background: linear-gradient(135deg, #0a0a0a 0%, #1a0000 60%, #2d0000 100%);
|
||||
border-radius: 12px;
|
||||
padding: 48px 40px;
|
||||
color: white;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.social-hero-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social-hero-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.social-hero-logo {
|
||||
height: 90px;
|
||||
width: auto;
|
||||
filter: drop-shadow(0 4px 16px rgba(255, 0, 0, 0.4));
|
||||
}
|
||||
|
||||
.social-hero-text h1 {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.social-hero-text p {
|
||||
font-size: 1rem;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
max-width: 480px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Platform Navigation Badges */
|
||||
.platform-nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.platform-badge-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.platform-badge-count {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
letter-spacing: 0.3px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.platform-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 11px 22px;
|
||||
border-radius: 50px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
border: 2px solid transparent;
|
||||
color: white !important;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.platform-badge:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.platform-badge:active {
|
||||
transform: scale(0.93) translateY(0);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
transition-duration: 0.08s;
|
||||
}
|
||||
|
||||
.platform-badge.platform-youtube { background: #FF0000; }
|
||||
.platform-badge.platform-instagram {
|
||||
background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF);
|
||||
}
|
||||
.platform-badge.platform-tiktok {
|
||||
background: #000;
|
||||
border-color: #EE1D52;
|
||||
}
|
||||
.platform-badge.platform-wp {
|
||||
background: linear-gradient(135deg, #1a0000, #2d0000);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
SOCIAL SECTIONS
|
||||
============================================================ */
|
||||
|
||||
.social-section {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.social-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18px 24px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.social-section-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.social-section-header h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.social-section-header > .social-section-header-left > i {
|
||||
font-size: 26px;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.platform-handle {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.platform-stat-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
border-radius: 20px;
|
||||
padding: 3px 10px;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.platform-stat-badge i {
|
||||
font-size: 11px;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Platform header gradients */
|
||||
.platform-youtube-header { background: linear-gradient(135deg, #a80000, #FF0000); }
|
||||
.platform-facebook-header { background: linear-gradient(135deg, #0d47a1, #1877F2); }
|
||||
.platform-instagram-header {
|
||||
background: linear-gradient(135deg, #6a0dad, #DD2A7B, #F77737);
|
||||
}
|
||||
.platform-tiktok-header {
|
||||
background: linear-gradient(135deg, #010101, #1a1a1a);
|
||||
border-bottom: 3px solid #EE1D52;
|
||||
}
|
||||
.platform-x-header {
|
||||
background: linear-gradient(135deg, #000, #1a1a1a);
|
||||
border-bottom: 3px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* CTA Buttons */
|
||||
.platform-cta-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
color: white !important;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.platform-cta-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.platform-youtube-btn { background: rgba(255, 255, 255, 0.2); }
|
||||
.platform-youtube-btn:hover { background: rgba(255, 255, 255, 0.3); }
|
||||
|
||||
.platform-facebook-btn { background: rgba(255, 255, 255, 0.2); }
|
||||
.platform-facebook-btn:hover { background: rgba(255, 255, 255, 0.3); }
|
||||
|
||||
.platform-instagram-btn { background: rgba(255, 255, 255, 0.2); }
|
||||
.platform-instagram-btn:hover { background: rgba(255, 255, 255, 0.3); }
|
||||
|
||||
.platform-tiktok-btn { background: rgba(238, 29, 82, 0.7); }
|
||||
.platform-tiktok-btn:hover { background: #EE1D52; }
|
||||
|
||||
.platform-x-btn { background: rgba(255, 255, 255, 0.15); }
|
||||
.platform-x-btn:hover { background: rgba(255, 255, 255, 0.25); }
|
||||
|
||||
/* ============================================================
|
||||
TWO-COLUMN LAYOUT
|
||||
============================================================ */
|
||||
|
||||
.social-two-col {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Colonnes alignées en haut (chacune prend sa hauteur naturelle) */
|
||||
.social-two-col--top {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.social-two-col {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
EMBED CONTAINERS (Facebook, X)
|
||||
============================================================ */
|
||||
|
||||
.social-embed-container {
|
||||
background: var(--card-bg);
|
||||
border-radius: 0 0 10px 10px;
|
||||
overflow: hidden;
|
||||
min-height: 500px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
box-shadow: var(--card-shadow);
|
||||
padding: 12px;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Empêche les iframes tierces de dépasser du conteneur */
|
||||
.social-embed-container iframe,
|
||||
.social-embed-container > div {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.social-embed-container .twitter-timeline {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Profile iframes (TikTok creator embed, Instagram profile embed) */
|
||||
.platform-profile-embed {
|
||||
padding: 0;
|
||||
min-height: unset;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.platform-profile-iframe {
|
||||
width: 100%;
|
||||
height: 560px;
|
||||
border: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.platform-profile-iframe--instagram {
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.platform-profile-iframe {
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
.platform-profile-iframe--instagram {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
YOUTUBE VIDEO GRID
|
||||
============================================================ */
|
||||
|
||||
.social-video-grid {
|
||||
background: var(--card-bg);
|
||||
border-radius: 0 0 10px 10px;
|
||||
padding: 20px;
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
.social-video-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration: none !important;
|
||||
color: var(--text-color) !important;
|
||||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: var(--card-bg);
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
.social-video-card:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
.social-video-card .video-thumbnail {
|
||||
position: relative;
|
||||
padding-top: 56.25%;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.social-video-card .video-thumbnail img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.social-video-card:hover .video-thumbnail img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Sous-titre de section (Shorts / Vidéos) */
|
||||
.yt-subgrid-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted, #888);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
padding: 16px 20px 4px;
|
||||
}
|
||||
|
||||
.yt-subgrid-label i {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Grille Shorts : cartes portrait centrées */
|
||||
.social-shorts-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Shorts — ratio portrait 9:16 */
|
||||
.video-card--short .video-thumbnail {
|
||||
padding-top: 177.78%;
|
||||
}
|
||||
|
||||
.short-badge {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: #FF0000;
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
letter-spacing: 0.3px;
|
||||
pointer-events: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.youtube-play-icon {
|
||||
font-size: 44px !important;
|
||||
color: #FF0000 !important;
|
||||
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
FALLBACK CARDS
|
||||
============================================================ */
|
||||
|
||||
.platform-fallback-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
padding: 48px 40px;
|
||||
background: var(--card-bg);
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: var(--card-shadow);
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
.platform-fallback-icon {
|
||||
font-size: 90px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.youtube-fallback-icon i { color: #FF0000; }
|
||||
|
||||
.instagram-fallback-icon i {
|
||||
background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.tiktok-fallback-icon i { color: #010101; }
|
||||
[data-theme="dark"] .tiktok-fallback-icon i { color: #ffffff; }
|
||||
|
||||
.platform-fallback-content h3 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.platform-fallback-content p {
|
||||
font-size: 16px;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 24px;
|
||||
max-width: 380px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
INSTAGRAM POSTS GRID
|
||||
============================================================ */
|
||||
|
||||
.instagram-posts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 20px;
|
||||
background: var(--card-bg);
|
||||
border-radius: 0 0 10px 10px;
|
||||
padding: 24px;
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
.instagram-post-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
TIKTOK VIDEOS GRID
|
||||
============================================================ */
|
||||
|
||||
.tiktok-videos-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
gap: 20px;
|
||||
background: var(--card-bg);
|
||||
border-radius: 0 0 10px 10px;
|
||||
padding: 24px;
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
.tiktok-video-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
WORDPRESS ARTICLES
|
||||
============================================================ */
|
||||
|
||||
.wp-section-header { background: linear-gradient(135deg, #0a0a0a 0%, #1a0000 60%, #2d0000 100%); }
|
||||
|
||||
.wp-section-logo {
|
||||
height: 28px;
|
||||
width: auto;
|
||||
filter: drop-shadow(0 2px 6px rgba(255, 0, 0, 0.4));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wp-cta-btn { background: rgba(255, 255, 255, 0.2); }
|
||||
.wp-cta-btn:hover { background: rgba(255, 255, 255, 0.3); }
|
||||
|
||||
.wp-posts-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
background: var(--card-bg);
|
||||
border-radius: 0 0 10px 10px;
|
||||
padding: 24px;
|
||||
box-shadow: var(--card-shadow);
|
||||
}
|
||||
|
||||
.wp-post-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration: none !important;
|
||||
color: var(--text-color) !important;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: var(--card-bg);
|
||||
box-shadow: var(--card-shadow);
|
||||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
.wp-post-card:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
|
||||
.wp-post-thumbnail {
|
||||
position: relative;
|
||||
padding-top: 56.25%;
|
||||
overflow: hidden;
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
.wp-post-thumbnail img {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.wp-post-card:hover .wp-post-thumbnail img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.wp-post-thumbnail--placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wp-post-thumbnail--placeholder i {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 40px;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.wp-post-info {
|
||||
padding: 14px 16px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wp-post-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wp-post-excerpt {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.wp-post-meta {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wp-post-meta span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.wp-posts-grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
HEADER BRAND
|
||||
============================================================ */
|
||||
|
||||
.header-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-logo-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.header-logo-img {
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.header-site-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
DARK THEME
|
||||
============================================================ */
|
||||
|
||||
[data-theme="dark"] .social-embed-container,
|
||||
[data-theme="dark"] .platform-fallback-card,
|
||||
[data-theme="dark"] .social-video-grid,
|
||||
[data-theme="dark"] .instagram-posts-grid,
|
||||
[data-theme="dark"] .tiktok-videos-grid {
|
||||
background: var(--card-bg);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
RESPONSIVE
|
||||
============================================================ */
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.header-site-name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.social-hero {
|
||||
padding: 28px 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.social-hero-text h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.social-hero-logo {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.platform-badge span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.platform-badge {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.platform-badge-count {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.social-section-header {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.social-section-header h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.platform-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.platform-fallback-card {
|
||||
padding: 32px 20px;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.platform-fallback-icon {
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
.platform-fallback-content h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.instagram-posts-grid,
|
||||
.tiktok-videos-grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.social-embed-container {
|
||||
min-height: 400px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.platform-profile-embed {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.platform-nav {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.social-hero-brand {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.social-hero-logo {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
SCROLL ARRIVAL HIGHLIGHT
|
||||
============================================================ */
|
||||
|
||||
@keyframes section-arrive {
|
||||
0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5); }
|
||||
40% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0.15); }
|
||||
100% { box-shadow: 0 0 0 18px rgba(255, 0, 0, 0); }
|
||||
}
|
||||
|
||||
.section-arrive {
|
||||
animation: section-arrive 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
border-radius: 12px;
|
||||
}
|
||||
Reference in New Issue
Block a user