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>
174 lines
6.5 KiB
HTML
174 lines
6.5 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-theme="ocean-dusk">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<title>About — WeVisto</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;900&family=Marcellus&family=Cormorant+Garamond:ital,wght@1,400&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../spa/_tokens.css">
|
|
<link rel="stylesheet" href="../spa/_chrome.css">
|
|
<style>
|
|
.about-hero {
|
|
padding: var(--space-5) var(--space-5) var(--space-6);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
.about-hero__plate {
|
|
font: var(--type-label);
|
|
letter-spacing: 0.32em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
margin-bottom: var(--space-4);
|
|
display: flex; align-items: center; gap: 10px;
|
|
}
|
|
.about-hero__plate .roman { color: var(--brand-yellow); font-family: var(--font-display); font-size: var(--text-md); }
|
|
.about-hero__plate .sep { width: 24px; height: 1px; background: var(--glass-bord); }
|
|
/* Wordmark logo as the page hero */
|
|
.about-hero__logo {
|
|
width: min(70vw, 280px);
|
|
aspect-ratio: 1;
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
margin-bottom: var(--space-5);
|
|
box-shadow:
|
|
0 1px 0 rgba(255,255,255,0.18) inset,
|
|
0 22px 44px -12px rgba(0,0,0,0.6);
|
|
}
|
|
.about-hero__logo img { width: 100%; height: 100%; display: block; }
|
|
.about-hero__title {
|
|
font: var(--type-display-lg);
|
|
color: var(--text);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.about-hero__sub {
|
|
font: italic 400 17px/1.55 var(--font-accent);
|
|
color: var(--text-muted);
|
|
max-width: 38ch;
|
|
}
|
|
.about-hero__rule {
|
|
width: 80px; height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--brand-yellow), transparent);
|
|
margin-top: var(--space-5);
|
|
}
|
|
|
|
.story {
|
|
margin: var(--space-6) var(--space-5);
|
|
padding: var(--space-5) var(--space-5) var(--space-6);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
.story h2 {
|
|
font: var(--type-display-md);
|
|
color: var(--text);
|
|
margin-bottom: var(--space-3);
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
}
|
|
.story h2 .roman {
|
|
font-family: var(--font-display);
|
|
color: var(--brand-yellow);
|
|
font-size: var(--text-lg);
|
|
}
|
|
.story p {
|
|
font-size: var(--text-base);
|
|
line-height: 1.65;
|
|
color: var(--text);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.story p em { font-family: var(--font-accent); font-style: italic; color: var(--brand-yellow); }
|
|
.story p strong { font-family: var(--font-display); font-weight: 400; color: var(--text); }
|
|
|
|
/* the credit list as a glass card */
|
|
.credits {
|
|
margin: var(--space-6) var(--space-5);
|
|
padding: var(--space-5);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
.credits h3 {
|
|
font: var(--type-label);
|
|
letter-spacing: 0.32em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.credits dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-5); }
|
|
.credits dt {
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-sm);
|
|
color: var(--brand-yellow);
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.credits dd { font-family: var(--font-accent); font-style: italic; font-size: var(--text-base); color: var(--text); }
|
|
|
|
.signature { margin: var(--space-6) var(--space-5) 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="atmosphere"></div>
|
|
|
|
<header class="app-bar">
|
|
<div class="app-bar__mark"><img src="../assets/mark-photo-64.png" alt=""></div>
|
|
<div class="app-bar__title-group">
|
|
<div class="app-bar__wordmark">We<span class="v">V</span>isto</div>
|
|
<div class="app-bar__sub">— about</div>
|
|
</div>
|
|
<div class="app-bar__spacer"></div>
|
|
<button class="app-bar__icon" aria-label="Close">
|
|
<svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
</button>
|
|
</header>
|
|
|
|
<main class="main-scroll">
|
|
|
|
<div class="about-hero">
|
|
<div class="about-hero__plate"><span class="roman">○</span><span class="sep"></span><span>Edizione I</span></div>
|
|
<div class="about-hero__logo">
|
|
<img src="../assets/wordmark.svg" alt="WeVisto">
|
|
</div>
|
|
<h1 class="about-hero__title">A frame, gifted.</h1>
|
|
<p class="about-hero__sub">Handmade e-ink picture frames, given to the people who keep our photographs.</p>
|
|
<div class="about-hero__rule"></div>
|
|
</div>
|
|
|
|
<article class="story glass">
|
|
<h2><span class="roman">I.</span>The thing itself</h2>
|
|
<p>A WeVisto frame is built by hand in <strong>Camogli</strong>, on the Ligurian coast. The display uses paper-like ink — the same family of screens as a Kindle — so it has the <em>quiet of a photograph</em> rather than the glow of a phone.</p>
|
|
<p>It connects to your wifi once. After that, nothing. It collects new photographs on its own and changes them as quietly as a clock.</p>
|
|
|
|
<h2><span class="roman">II.</span>The thing about the V</h2>
|
|
<p>The yellow V is the only thing in the wordmark that isn't white. It's how we remember the people we make these for — <em>the recipient is the V,</em> we are the letters around them.</p>
|
|
</article>
|
|
|
|
<div class="credits glass">
|
|
<h3>Edition I · MMXXVI</h3>
|
|
<dl>
|
|
<dt>Made by</dt> <dd>Matt Edholm</dd>
|
|
<dt>From</dt> <dd>Camogli, Liguria</dd>
|
|
<dt>For</dt> <dd>Margaret, Alice, and the rest</dd>
|
|
<dt>Version</dt> <dd>0.4 · pre-release</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="signature">
|
|
<div class="signature__mark"><img src="../assets/mark-photo-64.png" alt=""></div>
|
|
<div class="signature__text">WeVisto <span class="v-mark">·</span> a frame, gifted</div>
|
|
<div class="signature__version">Plate i · v 0.4</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<nav class="bottom-nav">
|
|
<a class="bottom-nav__tab"><svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9,22 9,12 15,12 15,22"/></svg><span class="label">Home</span></a>
|
|
<a class="bottom-nav__tab"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg><span class="label">Library</span></a>
|
|
<a class="bottom-nav__tab active"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg><span class="label">Settings</span></a>
|
|
</nav>
|
|
|
|
</body>
|
|
</html>
|