football2801
3bd0b9a5a1
CI / test (push) Has been cancelled
Iteration after the atmospheric-redesign checkpoint. The earlier A/B/C/D favicon set was scrapped — generic invented icons (roof, frame+horizon, skyline, wax seal) that didn't tie to the brand's own glyph. New direction: the yellow V from the wordmark, presented four ways. V-viewfinder (a V cut out of navy showing the harbor photo inside) is the chosen path; refinement 3b crops to Camogli's coloured row-houses for a more brand-specific small size reading. Also adds three logo-placement mockups (PWA cold-launch splash, library hero with the full wordmark logo, settings → about page) to give the wordmark room to live beyond emails and login badges. Self-contained: assets/ and spa/ copied into the design folder so the mockups render without depending on neighbouring directories. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
103 lines
3.8 KiB
HTML
103 lines
3.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<title>WeVisto — loading</title>
|
|
<style>
|
|
:root { --yellow: #f0d000; --cream: #faf3e4; --navy: #07172a; }
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--navy); color: var(--cream); }
|
|
body { position: relative; display: flex; align-items: center; justify-content: center; }
|
|
|
|
/* harbor backdrop, Ken-Burns */
|
|
.bg {
|
|
position: absolute; inset: -4%;
|
|
background: url('../assets/harbor.jpg') center/cover no-repeat;
|
|
filter: brightness(0.45) saturate(0.85);
|
|
opacity: 0;
|
|
transform: scale(1.04);
|
|
animation:
|
|
bd-fade 1.4s 0.1s cubic-bezier(.2,.7,.2,1) forwards,
|
|
bd-zoom 26s 0.1s linear forwards;
|
|
}
|
|
@keyframes bd-fade { to { opacity: 0.5; } }
|
|
@keyframes bd-zoom { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-2%, -1%); } }
|
|
|
|
.vignette {
|
|
position: absolute; inset: 0; pointer-events: none;
|
|
background:
|
|
radial-gradient(ellipse 70% 65% at 50% 50%, transparent 0%, rgba(7,23,42,0.6) 65%, rgba(7,23,42,0.95) 100%);
|
|
}
|
|
.grain {
|
|
position: absolute; inset: 0; pointer-events: none;
|
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0'/></filter><rect width='320' height='320' filter='url(%23n)'/></svg>");
|
|
mix-blend-mode: overlay;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* THE LOGO — the full wordmark logo at hero scale */
|
|
.logo {
|
|
position: relative; z-index: 5;
|
|
width: min(78vw, 520px);
|
|
aspect-ratio: 1;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
box-shadow:
|
|
0 1px 0 rgba(255,240,200,0.15) inset,
|
|
0 32px 64px -16px rgba(0,0,0,0.7),
|
|
0 12px 28px -8px rgba(0,0,0,0.5);
|
|
opacity: 0;
|
|
transform: translateY(12px) scale(0.98);
|
|
animation: logo-in 1.6s 0.4s cubic-bezier(.2,.7,.2,1) forwards;
|
|
}
|
|
@keyframes logo-in { to { opacity: 1; transform: translateY(0) scale(1); } }
|
|
.logo img { width: 100%; height: 100%; display: block; }
|
|
|
|
/* loader pulse below — dim brand confirmation */
|
|
.loader {
|
|
position: absolute; bottom: 56px; left: 0; right: 0;
|
|
text-align: center;
|
|
z-index: 5;
|
|
display: flex; align-items: center; justify-content: center; gap: 8px;
|
|
opacity: 0;
|
|
animation: tag-in 1.2s 1.8s ease forwards;
|
|
}
|
|
.loader .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); animation: pulse 1.4s infinite ease-in-out; }
|
|
.loader .dot:nth-child(2) { animation-delay: 0.18s; }
|
|
.loader .dot:nth-child(3) { animation-delay: 0.36s; }
|
|
@keyframes pulse { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1.2); } }
|
|
@keyframes tag-in { to { opacity: 0.85; transform: translateY(0); } }
|
|
|
|
.stamp {
|
|
position: absolute; top: 32px; right: 32px;
|
|
font-family: Georgia, serif;
|
|
font-size: 11px; letter-spacing: 0.46em; color: var(--cream);
|
|
text-transform: uppercase;
|
|
opacity: 0;
|
|
animation: tag-in 1.4s 2.0s ease forwards;
|
|
}
|
|
.stamp .y { color: var(--yellow); }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.bg, .logo, .loader, .stamp { animation: none !important; opacity: 1 !important; transform: none !important; }
|
|
.bg { opacity: 0.5; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="bg"></div>
|
|
<div class="vignette"></div>
|
|
<div class="grain"></div>
|
|
|
|
<div class="stamp">Edizione I <span class="y">·</span> Plate i</div>
|
|
|
|
<div class="logo">
|
|
<img src="../assets/wordmark.svg" alt="WeVisto">
|
|
</div>
|
|
|
|
<div class="loader"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
|
|
|
|
</body>
|
|
</html>
|