/* ============================================================ diff — brand design system Colours, type, and components per the Diff Branding Deck. Mobile-first. Editorial / minimalist (la cabra / sey ref). ============================================================ */ /* --- Real brand fonts --- Headline = Glacial Indifference Bold, Subtitle = FT Polar Semi Mono. Those aren't free web fonts. Drop the files into /assets/fonts and uncomment below to use the real ones; until then we load close geometric + mono approximations from Google Fonts (see ). */ /* @font-face{font-family:"Glacial Indifference";src:url("../fonts/GlacialIndifference-Bold.woff2") format("woff2");font-weight:700;font-display:swap;} @font-face{font-family:"FT Polar Semi Mono";src:url("../fonts/FTPolarSemiMono.woff2") format("woff2");font-weight:500;font-display:swap;} */ :root{ --red:#fd4d4c; --cream:#f6eedf; --turq:#84aaa5; --ink:#1c1a18; --ink-60:rgba(28,26,24,.6); --line:rgba(28,26,24,.14); --font-display:"Glacial Indifference","Archivo",-apple-system,Arial,sans-serif; --font-mono:"FT Polar Semi Mono","Space Mono",ui-monospace,monospace; --font-body:"Archivo","Inter",-apple-system,Arial,sans-serif; --maxw:1200px; --gut:clamp(20px,5vw,64px); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font-body); background:var(--cream); color:var(--ink); line-height:1.5; font-size:16px; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* ---------- type ---------- */ .display{ font-family:var(--font-display); font-weight:700; line-height:.98; letter-spacing:-.02em; text-transform:none; } h1.display{font-size:clamp(2.6rem,9vw,6.5rem)} h2.display{font-size:clamp(2rem,6vw,4rem)} h3.display{font-size:clamp(1.4rem,3.5vw,2.2rem)} .eyebrow{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-60); } .lead{font-size:clamp(1.05rem,2.2vw,1.4rem);max-width:42ch;color:var(--ink)} .muted{color:var(--ink-60)} /* ---------- layout ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)} section{padding-block:clamp(56px,5.5vw,80px)} .rule{height:1px;background:var(--line);border:0} /* ---------- header ---------- */ .site-header{ position:sticky;top:0;z-index:50; background:var(--cream); border-bottom:1px solid var(--line); } .nav{ display:flex;align-items:center;justify-content:space-between; height:64px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut); } .brand{ font-family:var(--font-display);font-weight:700; font-size:1.7rem;color:var(--red);letter-spacing:-.04em;line-height:1; } .nav-links{display:flex;gap:28px;align-items:center} .nav-links a{ font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink);padding:6px 0;position:relative; } .nav-links a:hover{color:var(--red)} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px} .nav-toggle span{display:block;width:26px;height:2px;background:var(--ink);margin:5px 0;transition:.25s} @media (max-width:760px){ .nav-links{ position:fixed;inset:64px 0 auto 0;flex-direction:column;gap:0; background:var(--cream);border-bottom:1px solid var(--line); transform:translateY(-120%);transition:transform .3s ease;height:auto; } .nav-links.open{transform:translateY(0)} .nav-links a{width:100%;padding:18px var(--gut);border-top:1px solid var(--line);font-size:.9rem} .nav-toggle{display:block} } /* ---------- hero ---------- */ .hero{position:relative;padding-block:clamp(44px,3.6vw,52px)} .hero-title{font-size:clamp(2.1rem,5.4vw,4.3rem);max-width:none;margin:.35em 0 .5em} .hero-lower{display:grid;gap:clamp(20px,3vw,40px);align-items:start} .hero-copy .lead{margin-bottom:1.4em} .hero-cta{display:flex;gap:14px;flex-wrap:wrap} .hero-media{ border-radius:2px;overflow:hidden;aspect-ratio:1/1;background:var(--cream); max-width:300px;width:100%;margin-inline:auto; } .hero-media img{width:100%;height:100%;object-fit:cover} @media (max-width:819px){ .hero-media{display:none} } @media (min-width:820px){ .hero-lower{grid-template-columns:1.35fr .65fr} .hero-media{margin-left:auto;margin-right:0} } /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6em; font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em; text-transform:uppercase; padding:15px 26px;border:1px solid var(--ink);border-radius:2px; background:var(--red);color:var(--cream);border-color:var(--red); cursor:pointer;transition:.18s ease; } .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:var(--cream)} .btn-block{width:100%} .btn-disabled{background:transparent;color:var(--ink-60);border-color:var(--line);cursor:not-allowed;pointer-events:none;letter-spacing:.12em} .btn-disabled:hover{background:transparent;color:var(--ink-60);border-color:var(--line)} /* ---------- intro / statement ---------- */ .statement .display{max-width:18ch} .statement p{max-width:52ch;margin-top:1.2em;font-size:clamp(1.05rem,2vw,1.25rem)} /* ---------- product grid ---------- */ .section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:clamp(28px,5vw,56px)} .section-head .eyebrow{margin-bottom:.7em;display:block} .grid{display:grid;gap:clamp(20px,3vw,36px);grid-template-columns:1fr} @media(min-width:620px){.grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:960px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}} .card{display:flex;flex-direction:column;background:transparent} .card-media{aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--turq);margin-bottom:18px} .card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .card:hover .card-media img{transform:scale(1.04)} .card-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .card-name{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.01em} .card-price{font-family:var(--font-mono);font-size:.95rem;white-space:nowrap} .card-desc{color:var(--ink-60);font-size:.95rem;margin:.5em 0 1.1em} .card .btn{margin-top:auto} /* ---------- info blocks (coffee bar) ---------- */ .info-grid{display:grid;gap:clamp(28px,5vw,56px);align-items:center} @media(min-width:880px){.info-grid{grid-template-columns:1fr 1fr}} .info-media{aspect-ratio:16/11;border-radius:2px;overflow:hidden;background:var(--turq)} .info-media img{width:100%;height:100%;object-fit:cover} .info-list dt{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60);margin-top:1.4em} .info-list dd{font-size:1.1rem;margin-top:.2em} /* ---------- wholesale / form ---------- */ .form-embed{margin-top:36px;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#fff} .form-embed iframe{width:100%;border:0;display:block;min-height:680px} /* ---------- callout band ---------- */ .band{background:var(--ink);color:var(--cream)} .band .eyebrow{color:rgba(246,238,223,.6)} .band .display{max-width:20ch} .band a.btn{background:var(--red);border-color:var(--red)} .band a.btn:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)} /* ---------- footer ---------- */ .site-footer{border-top:1px solid var(--line);padding-block:48px} .footer-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center} .footer-grid .brand{font-size:1.4rem} .footer-links{display:flex;gap:22px;flex-wrap:wrap} .footer-links a{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60)} .footer-links a:hover{color:var(--red)} .copyright{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-60);letter-spacing:.06em;margin-top:18px} /* ---------- page hero (interior pages) ---------- */ .page-hero{padding-block:clamp(40px,7vw,90px)} .page-hero .display{max-width:16ch} .page-hero .lead{margin-top:1em} /* utilities */ .stack-sm>*+*{margin-top:14px} .center{text-align:center} .mt{margin-top:clamp(28px,5vw,56px)}