/* ═══════════════════════════════════════════════
BECKS — Shared Stylesheet
Covers: tokens, reset, cursor, nav, menu,
footer, reveal, cards, page-hero,
placeholder components
═══════════════════════════════════════════════ */
/* ── Tokens ──────────────────────────────────── */
:root {
--orange: #D4500C;
--dark: #171410;
--dark2: #1E1B13;
--tan: #7D6347;
--olive: #6B601A;
--black: #0A0908;
--white: #F7F3EE;
--w60: rgba(247,243,238,0.60);
--w20: rgba(247,243,238,0.20);
--w08: rgba(247,243,238,0.08);
--r: 28px;
--fd: 'Big Shoulders Display', sans-serif;
--fb: 'DM Sans', sans-serif;
--ease: cubic-bezier(0.25,0.46,0.45,0.94);
--easeO: cubic-bezier(0.16,1.00,0.30,1.00);
}
/* ── Reset ───────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
background: var(--black);
color: var(--white);
font-family: var(--fb);
overflow-x: hidden;
cursor: none;
}
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; height:100%; object-fit:cover; }
button { background:none; border:none; font:inherit; cursor:none; }
/* ── Custom cursor ───────────────────────────── */
#cd {
position:fixed; top:0; left:0;
width:10px; height:10px;
background:var(--orange); border-radius:50%;
pointer-events:none; z-index:9999;
transform:translate(-50%,-50%);
transition:width .18s var(--ease),height .18s var(--ease);
mix-blend-mode:screen;
}
#cr {
position:fixed; top:0; left:0;
width:40px; height:40px;
border:1.5px solid rgba(212,80,12,.45); border-radius:50%;
pointer-events:none; z-index:9998;
transform:translate(-50%,-50%);
transition:width .36s var(--easeO),height .36s var(--easeO),border-color .3s;
}
#cd.hov { width:16px; height:16px; }
#cr.hov { width:62px; height:62px; border-color:rgba(212,80,12,.75); }
/* ── Nav ─────────────────────────────────────── */
nav {
position:fixed; top:0; left:0; right:0; z-index:400;
display:flex; align-items:center; justify-content:space-between;
padding:22px 28px;
transition:background .4s,backdrop-filter .4s;
}
nav.scrolled {
background:rgba(10,9,8,.78);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.nav-logo {
font-family:var(--fd); font-size:1.35rem; font-weight:900;
letter-spacing:.04em; color:var(--white);
}
.nav-logo .dot { color:var(--orange); }
.ham { display:flex; flex-direction:column; gap:5px; padding:4px; }
.ham span {
display:block; width:22px; height:2px;
background:var(--white); border-radius:2px;
transition:transform .32s var(--easeO),opacity .2s,width .3s;
}
.ham.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity:0; width:0; }
.ham.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
/* ── Full-screen menu ────────────────────────── */
#mob-menu {
position:fixed; inset:0; z-index:300;
background:var(--black);
display:flex; flex-direction:column;
align-items:flex-start; justify-content:flex-end;
padding:48px 32px; gap:2px;
opacity:0; pointer-events:none;
transition:opacity .38s var(--ease);
}
#mob-menu.open { opacity:1; pointer-events:all; }
.menu-link {
font-family:var(--fd);
font-size:clamp(3rem,12vw,5.5rem); font-weight:900;
line-height:1.05; color:var(--w60);
transition:color .22s; letter-spacing:-.01em;
display:flex; align-items:baseline; gap:10px;
}
.menu-link:hover { color:var(--white); }
.menu-arr { color:var(--orange); font-size:.48em; }
.menu-foot {
margin-top:32px; font-size:.7rem;
letter-spacing:.16em; text-transform:uppercase; color:var(--w60);
}
/* ── Card stack ──────────────────────────────── */
.card { border-radius:var(--r) var(--r) 0 0; position:relative; overflow:hidden; }
/* ── Section title ───────────────────────────── */
.sec-title {
font-family:var(--fd);
font-size:clamp(3.2rem,11vw,6.5rem); font-weight:900;
line-height:.9; letter-spacing:-.01em; color:var(--white);
margin-bottom:44px;
}
/* ── Page section wrapper ────────────────────── */
.pg-sec { padding:64px 28px 72px; }
/* ── Back button ─────────────────────────────── */
.back-btn {
display:inline-flex; align-items:center; gap:10px;
font-family:var(--fb); font-size:.72rem; font-weight:500;
letter-spacing:.18em; text-transform:uppercase;
color:rgba(255,255,255,.65);
transition:color .25s;
margin-bottom:40px;
}
.back-btn .back-arr {
font-size:1rem;
transition:transform .3s var(--easeO);
}
.back-btn:hover { color:var(--white); }
.back-btn:hover .back-arr { transform:translateX(-4px); }
/* ── Page hero (sub-pages) ───────────────────── */
.page-hero {
min-height:42vh;
display:flex; flex-direction:column; justify-content:flex-end;
padding:120px 28px 52px;
position:relative;
}
.page-hero-dots {
position:absolute; inset:0;
background-image:radial-gradient(rgba(0,0,0,.13) 1px,transparent 1px);
background-size:26px 26px;
pointer-events:none;
}
.page-hero-content { position:relative; z-index:2; }
.page-hero-eyebrow {
font-size:.7rem; font-weight:500;
letter-spacing:.2em; text-transform:uppercase;
color:rgba(255,255,255,.6);
margin-bottom:14px;
opacity:0; animation:pgFadeUp .7s .1s var(--easeO) forwards;
}
.page-hero-title {
font-family:var(--fd);
font-size:clamp(3.5rem,14vw,8rem); font-weight:900;
line-height:.88; letter-spacing:-.02em; color:#fff;
opacity:0; animation:pgFadeUp .7s .25s var(--easeO) forwards;
}
.page-hero-desc {
margin-top:20px; max-width:480px;
font-size:.95rem; line-height:1.7; color:rgba(255,255,255,.55);
opacity:0; animation:pgFadeUp .7s .4s var(--easeO) forwards;
}
@keyframes pgFadeUp {
from { opacity:0; transform:translateY(20px); }
to { opacity:1; transform:translateY(0); }
}
/* ── Category label ──────────────────────────── */
.cat-label {
font-family:var(--fb); font-size:.65rem; font-weight:500;
letter-spacing:.25em; text-transform:uppercase;
color:var(--orange);
display:flex; align-items:center; gap:12px;
margin-bottom:28px;
}
.cat-label::after {
content:''; flex:1; max-width:60px; height:1px;
background:rgba(212,80,12,.4);
}
/* ── Image placeholder ───────────────────────── */
/*
HOW TO SWAP IN A REAL IMAGE:
Remove the .img-ph div entirely and replace with:
The .img-slot wrapper stays — it controls sizing.
*/
.img-slot {
position:relative; overflow:hidden;
background:rgba(255,255,255,.04);
border-radius:12px;
}
.img-ph {
width:100%; height:100%; min-height:200px;
display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:10px;
border:1px dashed rgba(247,243,238,.12);
border-radius:12px;
}
.img-ph svg { width:28px; height:28px; opacity:.25; }
.img-ph span {
font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
color:rgba(247,243,238,.2);
}
.img-slot img { border-radius:12px; }
/* ── Video placeholder ───────────────────────── */
/*
HOW TO SWAP IN A REAL VIDEO:
Remove the .vid-ph div and replace with:
The .vid-slot wrapper stays — keep the aspect-ratio style on it.
*/
.vid-slot {
position:relative; overflow:hidden;
background:rgba(255,255,255,.04);
border-radius:12px;
}
.vid-slot iframe {
width:100%; height:100%;
border-radius:12px; display:block;
}
.vid-ph {
width:100%; height:100%; min-height:220px;
display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:14px;
border:1px dashed rgba(247,243,238,.12);
border-radius:12px;
cursor:default;
}
.vid-play {
width:56px; height:56px; border-radius:50%;
background:rgba(212,80,12,.18);
border:1.5px solid rgba(212,80,12,.4);
display:flex; align-items:center; justify-content:center;
font-size:18px; color:var(--orange);
padding-left:3px; /* optical centre for ▶ */
}
.vid-ph .vid-label {
font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
color:rgba(247,243,238,.2);
}
/* ── Footer ──────────────────────────────────── */
footer {
background:var(--black);
padding:28px;
display:flex; align-items:center;
justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.foot-name {
font-family:var(--fd); font-size:1rem; font-weight:900;
color:rgba(247,243,238,.22); letter-spacing:.05em;
}
.foot-copy { font-size:.62rem; color:rgba(247,243,238,.18); letter-spacing:.1em; }
/* ── Scroll reveal ───────────────────────────── */
.rv {
opacity:0; transform:translateY(22px);
transition:opacity .7s var(--easeO),transform .7s var(--easeO);
}
.rv.vis { opacity:1; transform:none; }
.rv.d1 { transition-delay:.08s; }
.rv.d2 { transition-delay:.16s; }
.rv.d3 { transition-delay:.24s; }
.rv.d4 { transition-delay:.32s; }
/* ── Responsive: tablet ──────────────────────── */
@media(min-width:700px) {
nav { padding:26px 48px; }
.pg-sec { padding:80px 48px 96px; }
.page-hero { padding:130px 48px 60px; }
footer { padding:36px 48px; }
#mob-menu { padding:56px 48px; }
}
/* ── Responsive: desktop ─────────────────────── */
@media(min-width:1100px) {
nav { padding:28px 64px; }
.pg-sec { padding:96px 64px 112px; }
.page-hero { padding:140px 64px 68px; }
footer { padding:40px 64px; }
}
/* ── Touch devices ───────────────────────────── */
@media(hover:none) {
body { cursor:auto; }
#cd,#cr { display:none; }
a, button { cursor:pointer; }
}