refactor: countdown + ops Apple SOTA 2026
- index.astro: white bg, Manrope font, Apple blue accent, clean timer (light weight, tabular-nums), gentle-float logo, fade-in stagger, no retro/glitch effects - ops.astro: max-width 1200px (aligned with content grid), fluid padding clamp() Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Clément SAILLANT
+88
-94
@@ -137,147 +137,141 @@ import '@/styles/global.css';
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
background: linear-gradient(rgba(11,10,9,0.85), rgba(11,10,9,0.92)), url('/assets/hero-bg.jpg') center/cover no-repeat;
|
||||
background-color: var(--bg, #0b0a09);
|
||||
padding: clamp(32px, 6vw, 80px) clamp(20px, 4vw, 48px);
|
||||
background-color: #ffffff;
|
||||
font-family: 'Manrope', -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
/* Logo sprite animation */
|
||||
/* Logo — clean, static display */
|
||||
.logo-sprite {
|
||||
width: clamp(140px, 22vw, 200px);
|
||||
height: clamp(140px, 22vw, 200px);
|
||||
width: clamp(120px, 18vw, 180px);
|
||||
height: clamp(120px, 18vw, 180px);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-bottom: 12px;
|
||||
transition: opacity 0.15s ease;
|
||||
filter: drop-shadow(0 0 24px rgba(91,209,216,0.3));
|
||||
animation: logo-float 6s ease-in-out infinite;
|
||||
margin-bottom: clamp(16px, 3vw, 32px);
|
||||
transition: opacity 0.3s ease;
|
||||
animation: gentle-float 6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes gentle-float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-6px); }
|
||||
}
|
||||
@keyframes logo-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
|
||||
|
||||
.atom { width: clamp(120px, 20vw, 170px); height: auto; margin-bottom: 20px; opacity: 0.4; }
|
||||
.atom {
|
||||
width: clamp(100px, 16vw, 150px);
|
||||
height: auto;
|
||||
margin-bottom: clamp(16px, 2vw, 24px);
|
||||
opacity: 0.12;
|
||||
}
|
||||
|
||||
/* Title bubble */
|
||||
.title-bubble {
|
||||
background: rgba(244, 238, 227, 0.92);
|
||||
border: 1px solid rgba(91, 209, 216, 0.3);
|
||||
border-radius: 14px;
|
||||
padding: 16px 36px;
|
||||
margin-bottom: 28px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 0 40px rgba(91,209,216,0.06);
|
||||
margin-bottom: clamp(24px, 4vw, 40px);
|
||||
padding: 0;
|
||||
animation: fade-in 0.8s ease both;
|
||||
}
|
||||
.title-bubble::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
repeating-linear-gradient(90deg, transparent 0, rgba(91,209,216,0.03) 1px, transparent 2px, transparent 4px),
|
||||
repeating-linear-gradient(0deg, transparent 0, rgba(241,194,122,0.02) 1px, transparent 2px, transparent 6px);
|
||||
animation: scanlines 8s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.title-bubble::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: -100%; width: 60%; height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(91,209,216,0.08), transparent);
|
||||
animation: glitch-sweep 4s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes scanlines { from{transform:translateY(0)} to{transform:translateY(6px)} }
|
||||
@keyframes glitch-sweep { 0%,100%{left:-100%} 50%{left:140%} }
|
||||
|
||||
.title {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: clamp(28px, 5vw, 48px);
|
||||
font-weight: 700;
|
||||
color: #0b0a09;
|
||||
font-family: 'Manrope', -apple-system, 'SF Pro Display', sans-serif;
|
||||
font-size: clamp(32px, 6vw, 56px);
|
||||
font-weight: 800;
|
||||
color: #1d1d1f;
|
||||
margin: 0;
|
||||
letter-spacing: -1px;
|
||||
position: relative;
|
||||
animation: title-glitch 6s ease-in-out infinite;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
@keyframes title-glitch {
|
||||
0%,92%,100% { transform:none; text-shadow:none; }
|
||||
93% { transform:translateX(-2px) skewX(-0.5deg); text-shadow:2px 0 var(--electric,#5bd1d8), -2px 0 var(--accent,#f1c27a); }
|
||||
94% { transform:translateX(1px) skewX(0.3deg); text-shadow:-1px 0 var(--electric,#5bd1d8), 1px 0 #d89b63; }
|
||||
95% { transform:translateX(-1px); text-shadow:1px 0 var(--accent,#f1c27a); }
|
||||
96% { transform:none; text-shadow:none; }
|
||||
.electric {
|
||||
color: #0071e3;
|
||||
}
|
||||
.electric { color: var(--electric, #5bd1d8); animation: pulse 3s ease-in-out infinite; }
|
||||
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6;text-shadow:0 0 12px var(--electric,#5bd1d8)} }
|
||||
|
||||
/* Bubbles */
|
||||
/* Timer */
|
||||
.timer-bubble {
|
||||
background: rgba(244, 238, 227, 0.92);
|
||||
border: 1px solid rgba(91, 209, 216, 0.3);
|
||||
border-radius: 16px;
|
||||
padding: 20px 32px;
|
||||
margin-bottom: 24px;
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 0 40px rgba(91,209,216,0.06);
|
||||
background: #f5f5f7;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
padding: clamp(16px, 3vw, 28px) clamp(24px, 4vw, 48px);
|
||||
margin-bottom: clamp(20px, 3vw, 32px);
|
||||
animation: fade-in 0.8s 0.2s ease both;
|
||||
}
|
||||
.timer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: clamp(8px, 2vw, 16px);
|
||||
}
|
||||
.unit {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.timer { display: flex; align-items: center; gap: 8px; }
|
||||
.unit { display: flex; flex-direction: column; align-items: center; }
|
||||
.num {
|
||||
font-family: 'IBM Plex Mono', 'Share Tech Mono', monospace;
|
||||
font-size: clamp(32px, 7vw, 64px);
|
||||
font-weight: 600;
|
||||
color: var(--bg, #0b0a09);
|
||||
font-family: 'Manrope', -apple-system, 'SF Pro Display', sans-serif;
|
||||
font-size: clamp(36px, 8vw, 72px);
|
||||
font-weight: 300;
|
||||
color: #1d1d1f;
|
||||
line-height: 1;
|
||||
min-width: 2ch;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.label {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
font-family: 'Manrope', -apple-system, 'SF Pro Display', sans-serif;
|
||||
font-size: clamp(9px, 1.2vw, 12px);
|
||||
color: #86868b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-top: 6px;
|
||||
letter-spacing: 0.08em;
|
||||
margin-top: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.sep {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: 'Manrope', -apple-system, 'SF Pro Display', sans-serif;
|
||||
font-size: clamp(24px, 5vw, 48px);
|
||||
color: #b8860b;
|
||||
opacity: 0.6;
|
||||
color: #d2d2d7;
|
||||
font-weight: 200;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
/* Tagline */
|
||||
.tagline-bubble {
|
||||
background: rgba(244, 238, 227, 0.88);
|
||||
border: 1px solid rgba(241, 194, 122, 0.35);
|
||||
border-radius: 12px;
|
||||
padding: 12px 24px;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: clamp(16px, 2vw, 24px);
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: opacity 0.4s ease, transform 0.4s ease;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
||||
animation: fade-in 0.8s 0.4s ease both;
|
||||
}
|
||||
.tagline-text {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 14px;
|
||||
color: #8b6914;
|
||||
font-family: 'Manrope', -apple-system, 'SF Pro Display', sans-serif;
|
||||
font-size: clamp(13px, 1.6vw, 16px);
|
||||
color: #86868b;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
/* Footnote */
|
||||
.footnote-bubble {
|
||||
background: rgba(244, 238, 227, 0.7);
|
||||
border: 1px solid rgba(182, 168, 148, 0.2);
|
||||
border-radius: 10px;
|
||||
padding: 10px 20px;
|
||||
padding: clamp(8px, 1.5vw, 12px) 20px;
|
||||
animation: fade-in 0.8s 0.6s ease both;
|
||||
}
|
||||
.footnote-bubble span {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
letter-spacing: 0.5px;
|
||||
font-family: 'Manrope', -apple-system, 'SF Pro Display', sans-serif;
|
||||
font-size: clamp(11px, 1.2vw, 13px);
|
||||
color: #aeaeb2;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.logo-sprite { animation: none; }
|
||||
.electric { animation: none; }
|
||||
.title-bubble, .timer-bubble, .tagline-bubble, .footnote-bubble {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+2
-2
@@ -413,9 +413,9 @@ import '@/styles/global.css';
|
||||
<style>
|
||||
/* ═══ Apple SOTA 2026 — Ops Dashboard ═══ */
|
||||
.ops {
|
||||
max-width: 1080px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 1.25rem;
|
||||
padding: 2rem clamp(1rem, 4vw, 2rem);
|
||||
min-height: 100vh;
|
||||
background: #ffffff;
|
||||
color: #1d1d1f;
|
||||
|
||||
Reference in New Issue
Block a user