← back to Osborne Redesign
themes.html
192 lines
<!doctype html>
<html lang="en" data-theme="heritage">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Theme Gallery · Osborne Partners Redesign</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=Cormorant+Garamond:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Libre+Caslon+Text:wght@400;700&family=Playfair+Display:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/theme.css">
<style>
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(360px,1fr)); gap: 32px; }
.theme-tile {
border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--line); background: var(--bg-card);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex; flex-direction: column;
}
.theme-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.theme-tile__hero {
aspect-ratio: 16/10; position: relative; overflow: hidden;
display: flex; align-items: flex-end; padding: 32px;
color: #fff;
}
.theme-tile__hero h3 {
font-family: var(--font-display); font-size: 32px; font-weight: 700;
line-height: 1.1; margin-bottom: 4px;
}
.theme-tile__hero p { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.85; }
.theme-tile__num {
position: absolute; top: 24px; right: 24px;
font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px;
background: rgba(255,255,255,0.18); padding: 4px 10px; border-radius: 4px;
color: #fff;
}
.theme-tile__body { padding: 24px 28px 28px; }
.theme-tile__desc { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 16px; min-height: 64px; }
.theme-tile__pages {
display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
font-size: 11px;
}
.theme-tile__pages a {
padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px;
color: var(--ink-soft);
}
.theme-tile__pages a:hover { background: var(--ink); color: var(--bg); }
.theme-tile__cta { display: flex; gap: 8px; }
.theme-tile__cta .btn { padding: 12px 18px; font-size: 12px; }
/* Theme-specific hero backgrounds for tiles */
.hero-heritage { background: linear-gradient(180deg,#0b1a35,#0a1428); }
.hero-heritage h3, .hero-heritage p { font-family: 'Playfair Display', serif; }
.hero-heritage h3 { color: #ffffff; }
.hero-heritage p { color: #bfa15a; }
.hero-whisper { background: #fafaf7; color: #0a0a0a !important; }
.hero-whisper h3 { font-family: 'Inter', sans-serif; font-weight: 200; font-size: 48px !important; color: #0a0a0a; }
.hero-whisper p { color: #888; }
.hero-broadsheet { background: #f4ede0; }
.hero-broadsheet h3 { font-family: 'Playfair Display', serif; color: #1a1a1a; font-weight: 900; }
.hero-broadsheet p { color: #8a3a1a; }
.hero-onyx { background: radial-gradient(circle at 30% 0%, rgba(212,175,106,0.15), transparent 60%), #0a0908; }
.hero-onyx h3 { font-family: 'Playfair Display', serif; color: #f5e8c8; font-weight: 900; }
.hero-onyx p { color: #d4af6a; }
.hero-pacific { background: linear-gradient(135deg,#f3eddf 0%,#e8b878 50%,#7a8a72 100%); }
.hero-pacific h3 { font-family: 'Cormorant Garamond', serif; color: #2a3a2c; font-weight: 300; font-size: 48px !important; }
.hero-pacific p { color: #a87a3a; }
.hero-atelier { background: linear-gradient(180deg, #0a0e14 0%, #0e141d 100%); }
.hero-atelier h3 { font-family: 'Space Grotesk', sans-serif; color: #e8eef5; font-weight: 700; }
.hero-atelier p { color: #3aa9ff; font-family: 'JetBrains Mono', monospace; }
.hero-loro { background: #e8e1d4; }
.hero-loro h3 { font-family: 'Cormorant Garamond', serif; color: #3a3328; font-weight: 300; font-size: 48px !important; }
.hero-loro p { color: #7a6a4a; }
.hero-monolith { background: #e6e3dc; border-bottom: 8px solid #1a1a1a; }
.hero-monolith h3 { font-family: 'Inter', sans-serif; color: #1a1a1a; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; }
.hero-monolith p { color: #1a1a1a; }
.hero-archive { background: #f4ecd8; border: 1px solid #5a1a22; }
.hero-archive h3 { font-family: 'Playfair Display', serif; color: #5a1a22; font-weight: 700; }
.hero-archive p { color: #5a1a22; }
.hero-aurora { background: linear-gradient(135deg, #f6f4ef, #c8b8e0 70%, #5a3a8a 100%); }
.hero-aurora h3 { font-family: 'Playfair Display', serif; color: #1a1530; font-weight: 300; font-size: 48px !important; }
.hero-aurora p { color: #5a3a8a; }
</style>
</head>
<body>
<div id="site-header-slot"></div>
<main>
<section class="hero">
<div class="container">
<div class="hero__eyebrow">Ten directions · Pick one and click through</div>
<h1 class="hero__title">The <em>Theme Gallery</em>.</h1>
<p class="hero__sub">
Each tile below previews one of ten distinct visual directions for the site. Click any
page link inside a tile to enter the full multi-page experience locked to that theme. Use
the floating picker (bottom-right) to flip themes from any page. Your selection persists
across the site.
</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="theme-grid" id="themeGrid"></div>
</div>
</section>
</main>
<div id="site-footer-slot"></div>
<div id="theme-picker-slot"></div>
<script src="assets/site.js"></script>
<script>
// Build the gallery tiles
const themes = [
{ id:'heritage', name:'Heritage Navy', tag:'OLD MONEY · TRUST', desc:'Deep navy and gilt gold. Roman numerals, serif gravitas, "Est. MCMXXXVII." For the family who values continuity above novelty.' },
{ id:'whisper', name:'Whisper', tag:'SWISS MINIMALISM', desc:'Pure white, ultra-thin Inter Light, oceans of whitespace. The wealth manager that whispers, never shouts.' },
{ id:'broadsheet', name:'Broadsheet', tag:'EDITORIAL · WSJ-GRADE', desc:'Three-column body copy, drop caps, a printed-paper masthead. Reads like a serious magazine — because the work is.' },
{ id:'onyx', name:'Onyx', tag:'BLACK-TIE LUXURY', desc:'Pure black plus champagne gold, dramatic Playfair at hero scale. "By referral, by appointment."' },
{ id:'pacific', name:'Pacific', tag:'WARM WEST COAST', desc:'Cream, sage, and brass. Cormorant Garamond. The Pacific Heights aesthetic — home-grown wealth, in good company.' },
{ id:'atelier', name:'Atelier', tag:'TECH · DATA-FORWARD', desc:'Dark UI, mono digits, live performance. For the founders, operators, and equity-rich families who want their numbers visible.' },
{ id:'loro', name:'Loro', tag:'QUIET LUXURY · CASHMERE', desc:'Muted earth tones, tasteful Cormorant Light, monogrammed crest. Loro Piana energy in a wealth manager.' },
{ id:'monolith', name:'Monolith', tag:'ARCHITECTURAL · BRUTALIST', desc:'Visible 12-column grid, Inter at 280pt, stone palette. Monumental scale for a firm that has lasted nearly a century.' },
{ id:'archive', name:'Archive', tag:'VINTAGE ARISTOCRACY', desc:'Burgundy and parchment, ornamental borders, "Anno MCMXXXVII," and ❦ fleurons. Patrimony, properly presented.' },
{ id:'aurora', name:'Aurora', tag:'REFINED FINTECH · GLASS', desc:'Soft purple and peach gradients, frosted-glass cards, live performance chart. Modern but unmistakably elegant.' }
];
const pages = [
{ href:'index.html', label:'Home' },
{ href:'history.html', label:'History' },
{ href:'team.html', label:'Team' },
{ href:'philosophy.html', label:'Philosophy' },
{ href:'performance.html', label:'Performance' },
{ href:'service-area.html', label:'Service Area' },
{ href:'clients.html', label:'Clients' },
{ href:'insights.html', label:'Insights' },
{ href:'videos.html', label:'Videos' },
{ href:'reports.html', label:'Reports' },
{ href:'contact.html', label:'Contact' }
];
function buildTile(theme, i) {
const num = String(i+1).padStart(2,'0');
const pageLinks = pages.map(p =>
`<a href="${p.href}?theme=${theme.id}" data-theme-link="${theme.id}">${p.label}</a>`
).join('');
return `
<div class="theme-tile">
<div class="theme-tile__hero hero-${theme.id}">
<span class="theme-tile__num">${num} / 10</span>
<div>
<h3>Osborne Partners</h3>
<p>${theme.tag}</p>
</div>
</div>
<div class="theme-tile__body">
<h4 style="font-family:var(--font-display);font-size:22px;margin-bottom:8px;font-weight:600">${theme.name}</h4>
<p class="theme-tile__desc">${theme.desc}</p>
<div class="theme-tile__pages">${pageLinks}</div>
<div class="theme-tile__cta">
<a href="index.html?theme=${theme.id}" class="btn" data-theme-link="${theme.id}">Enter site →</a>
<button class="btn btn--ghost" onclick="setTheme('${theme.id}')">Apply theme</button>
</div>
</div>
</div>
`;
}
document.getElementById('themeGrid').innerHTML = themes.map(buildTile).join('');
// Apply theme + persist when entering site
document.querySelectorAll('[data-theme-link]').forEach(el => {
el.addEventListener('click', () => {
try { localStorage.setItem('opcm-theme', el.dataset.themeLink); } catch(e){}
});
});
function setTheme(id) {
try { localStorage.setItem('opcm-theme', id); } catch(e){}
document.documentElement.dataset.theme = id;
document.querySelectorAll('.theme-swatch').forEach(s => s.classList.toggle('is-active', s.dataset.swatch===id));
}
</script>
</body>
</html>