/** Shopify CDN: Minification failed Line 553:0 All "@import" rules must come first **/ /* ============================================================ COPERACO — Culinary Luxury Design System Dark, architectural, editorial. The coffee for chefs. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Jost:wght@300;400;500;600&display=swap'); :root { /* Core palette */ --ink: #15110E; /* near-black espresso — primary dark ground */ --ink-2: #1C1712; /* raised dark panel */ --espresso: #2A2018; /* warm brown panel */ --cream: #F3ECDF; /* parchment — light ground + text on dark */ --cream-soft: #EAE1D1; /* slightly dimmer cream panel */ --bordeaux: #7A1B22; /* brand wine — signature accent (true logo red) */ --bordeaux-deep:#5A1218; --gold: #B0875A; /* champagne metallic accent */ --gold-soft: #C6A579; --taupe: #8C7E6E; /* muted text */ /* Semantic */ --bg: var(--ink); --text: var(--cream); --text-dim: rgba(243,236,223,0.62); --text-faint: rgba(243,236,223,0.40); --line: rgba(243,236,223,0.14); --line-strong: rgba(243,236,223,0.28); /* On light sections */ --ink-on-light: #221A14; --dim-on-light: rgba(34,26,20,0.66); --faint-on-light: rgba(34,26,20,0.42); --line-on-light: rgba(34,26,20,0.14); --serif: 'Cormorant Garamond', 'Times New Roman', serif; --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; --maxw: 1320px; --gut: 48px; --nav-h: 84px; --announce-h: 34px; } /* ============================================================ PALETTE THEMES — set data-theme on . Base (no attr) = Maison. Each overrides only the core palette tokens; semantic tokens cascade. ============================================================ */ /* MAISON — refined brand bordeaux + champagne gold (default) */ :root[data-theme="maison"] { --ink: #15110E; --ink-2: #1C1712; --espresso: #2A2018; --cream: #F3ECDF; --cream-soft: #EAE1D1; --bordeaux: #7A1B22; --bordeaux-deep: #5A1218; --gold: #B0875A; --gold-soft: #C6A579; } /* NOIR COGNAC — blackened ground, warm cognac/amber metal */ :root[data-theme="noir"] { --ink: #0F0C0B; --ink-2: #16120F; --espresso: #241A14; --cream: #EFE7D7; --cream-soft: #E3D9C6; --bordeaux: #6E1F23; --bordeaux-deep: #4C1418; --gold: #C4894A; --gold-soft: #D6A368; --text-dim: rgba(239,231,215,0.62); --text-faint: rgba(239,231,215,0.40); --line: rgba(239,231,215,0.13); --line-strong: rgba(239,231,215,0.26); } /* TERROIR — deep olive-forest ground, bordeaux + gold */ :root[data-theme="terroir"] { --ink: #13160F; --ink-2: #1A1E13; --espresso: #25291A; --cream: #F1EEDE; --cream-soft: #E5E1CC; --bordeaux: #7E2128; --bordeaux-deep: #5C161C; --gold: #AD8B52; --gold-soft: #C4A36A; --text-dim: rgba(241,238,222,0.62); --text-faint: rgba(241,238,222,0.40); --line: rgba(241,238,222,0.13); --line-strong: rgba(241,238,222,0.26); } /* PLATINE — cool charcoal, platinum-taupe metal, bordeaux pop */ :root[data-theme="platine"] { --ink: #121211; --ink-2: #1A1A19; --espresso: #232121; --cream: #EFEBE3; --cream-soft: #E2DDD2; --bordeaux: #86232B; --bordeaux-deep: #61161D; --gold: #B7A793; --gold-soft: #CABCAB; --text-dim: rgba(239,235,227,0.60); --text-faint: rgba(239,235,227,0.38); --line: rgba(239,235,227,0.13); --line-strong: rgba(239,235,227,0.26); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 300; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ::selection { background: var(--bordeaux); color: var(--cream); } /* ---------- Type scale ---------- */ .eyebrow { font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 14px; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); opacity: 0.7; } .eyebrow.center { justify-content: center; } .eyebrow.no-rule::before { display: none; } .eyebrow.dual::after { content: ""; width: 28px; height: 1px; background: var(--gold); opacity: 0.7; } .display { font-family: var(--serif); font-weight: 400; line-height: 0.98; letter-spacing: -0.01em; } h1.display { font-size: clamp(48px, 7.4vw, 104px); } h2.display { font-size: clamp(38px, 5vw, 68px); line-height: 1.0; } h3.display { font-size: clamp(28px, 3vw, 40px); line-height: 1.04; } .display em, .ital { font-style: italic; font-weight: 400; } .lede { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.5; color: var(--text); } p.body, .body { font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.85; color: var(--text-dim); } .body.light { color: var(--dim-on-light); } .kicker-num { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--gold); } /* ---------- Layout ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); } .section { padding: clamp(72px, 11vw, 148px) 0; } .section.tight { padding: clamp(56px, 7vw, 96px) 0; } .on-light { background: var(--cream); color: var(--ink-on-light); } .on-light .display, .on-light .lede { color: var(--ink-on-light); } .on-cream-soft { background: var(--cream-soft); color: var(--ink-on-light); } .on-espresso { background: var(--espresso); } .on-ink2 { background: var(--ink-2); } .on-bordeaux { background: var(--bordeaux); color: var(--cream); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; padding: 17px 34px; border: 1px solid transparent; cursor: pointer; transition: all 0.45s cubic-bezier(0.2,0.7,0.2,1); background: none; color: inherit; } .btn .ar { transition: transform 0.45s cubic-bezier(0.2,0.7,0.2,1); } .btn:hover .ar { transform: translateX(6px); } .btn-solid { background: var(--bordeaux); color: var(--cream); } .btn-solid:hover { background: var(--bordeaux-deep); } .btn-gold { background: var(--gold); color: var(--ink); } .btn-gold:hover { background: var(--gold-soft); } .btn-outline { border-color: var(--line-strong); color: var(--text); } .btn-outline:hover { border-color: var(--cream); background: var(--cream); color: var(--ink); } .btn-outline-dark { border-color: var(--line-on-light); color: var(--ink-on-light); } .btn-outline-dark:hover { background: var(--ink-on-light); color: var(--cream); border-color: var(--ink-on-light); } .link-underline { font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid currentColor; display: inline-flex; gap: 10px; align-items: center; transition: gap 0.4s ease, opacity 0.4s ease; } .link-underline:hover { gap: 16px; } /* ---------- Navigation ---------- */ .nav { position: fixed; top: var(--announce-h, 34px); left: 0; right: 0; height: var(--nav-h); z-index: 100; display: flex; align-items: center; transition: background 0.5s ease, backdrop-filter 0.5s ease, border-color 0.5s ease, height 0.5s ease, top 0.5s ease; border-bottom: 1px solid transparent; } .nav.scrolled { top: 0; background: rgba(21,17,14,0.86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line); height: 70px; } /* Inner pages with no dark hero: solid nav, but still sits below announce at top */ .nav.nav-solid { background: rgba(21,17,14,0.92); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--line); } .nav.nav-solid.scrolled { top: 0; } .nav .wrap { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .nav-links { display: flex; gap: 38px; list-style: none; margin: 0; padding: 0; } .nav-links.right { justify-content: flex-end; } .nav-links a { font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); opacity: 0.82; position: relative; padding: 6px 0; white-space: nowrap; transition: opacity 0.3s ease; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.4s cubic-bezier(0.2,0.7,0.2,1); } .nav-links a:hover { opacity: 1; } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-links a.active { opacity: 1; } .nav-logo { justify-self: center; display: flex; align-items: center; } .nav-logo img { height: 26px; width: auto; } .nav-icons { display: flex; gap: 22px; justify-content: flex-end; align-items: center; } .nav-icon { color: var(--text); opacity: 0.82; cursor: pointer; transition: opacity 0.3s ease; display: inline-flex; } .nav-icon:hover { opacity: 1; } .nav-icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.3; } .nav-burger { display: none; } /* announcement bar */ .announce { background: var(--bordeaux); color: var(--cream); text-align: center; font-family: var(--sans); font-weight: 400; font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; padding: 9px 16px; position: relative; z-index: 101; } /* ---------- Hairline divider ---------- */ .hr-gold { width: 1px; height: 64px; background: linear-gradient(var(--gold), transparent); margin: 0 auto; } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } .rule.light { background: var(--line-on-light); } /* ---------- Product card ---------- */ .prod-card { display: block; cursor: pointer; } .prod-media { position: relative; overflow: hidden; background: var(--ink-2); aspect-ratio: 3 / 3.6; } .prod-media image-slot, .prod-media .bagph { width: 100%; height: 100%; } .prod-media .tag { position: absolute; top: 16px; left: 16px; font-family: var(--sans); font-weight: 400; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--line-strong); padding: 6px 11px; background: rgba(21,17,14,0.4); backdrop-filter: blur(4px); } .prod-card:hover .prod-zoom { transform: scale(1.05); } .prod-zoom { transition: transform 1.1s cubic-bezier(0.2,0.7,0.2,1); width:100%; height:100%; } .prod-meta { padding: 22px 4px 0; } .prod-origin { font-family: var(--sans); font-weight: 400; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .prod-name { font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.1; margin: 9px 0 0; } .prod-notes { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 16px; color: var(--text-dim); margin: 7px 0 0; } .on-light .prod-notes { color: var(--dim-on-light); } .prod-price { font-family: var(--sans); font-weight: 300; font-size: 14px; letter-spacing: 0.08em; margin: 14px 0 0; color: var(--text); } .on-light .prod-price { color: var(--ink-on-light); } /* CSS bag placeholder (luxury) */ .bagph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(120% 80% at 50% 0%, rgba(176,135,90,0.08), transparent 60%), linear-gradient(155deg, #241C16, #14100D); position: relative; } .bagph::after { content: ""; position: absolute; inset: 26px; border: 1px solid var(--line); } .bagph .bag-c { width: 40px; opacity: 0.5; } .bagph .bag-name { font-family: var(--serif); font-style: italic; font-size: 20px; color: rgba(243,236,223,0.7); position: relative; z-index: 1; } .bagph .bag-sub { font-family: var(--sans); font-weight: 400; font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-faint); position: relative; z-index: 1; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s cubic-bezier(0.2,0.7,0.2,1), transform 1.1s cubic-bezier(0.2,0.7,0.2,1); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; } .reveal.d4 { transition-delay: 0.32s; } /* ---------- Footer ---------- */ .footer { background: #100D0B; padding: 92px 0 36px; border-top: 1px solid var(--line); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 48px; } .footer h4 { font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin: 0 0 22px; } .footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .footer ul a { font-family: var(--sans); font-weight: 300; font-size: 14px; color: var(--text-dim); transition: color 0.3s ease; } .footer ul a:hover { color: var(--cream); } .footer-logo img { height: 34px; margin-bottom: 22px; } .footer-blurb { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.55; color: var(--text-dim); max-width: 300px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 72px; padding-top: 26px; border-top: 1px solid var(--line); font-family: var(--sans); font-weight: 300; font-size: 12px; letter-spacing: 0.04em; color: var(--text-faint); } .footer-bottom a:hover { color: var(--cream); } .news-form { display: flex; border-bottom: 1px solid var(--line-strong); padding-bottom: 8px; margin-top: 6px; } .news-form input { flex: 1; background: none; border: 0; outline: none; font-family: var(--sans); font-weight: 300; font-size: 14px; color: var(--cream); padding: 6px 0; } .news-form input::placeholder { color: var(--text-faint); } .news-form button { background: none; border: 0; color: var(--gold); cursor: pointer; font-size: 18px; } /* ---------- Cart drawer ---------- */ .scrim { position: fixed; inset: 0; background: rgba(8,6,5,0.6); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; z-index: 200; } .scrim.open { opacity: 1; visibility: visible; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; background: var(--ink-2); z-index: 201; transform: translateX(100%); transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1); display: flex; flex-direction: column; border-left: 1px solid var(--line); } .drawer.open { transform: none; } .drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 28px 30px; border-bottom: 1px solid var(--line); } .drawer-title { font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; } .drawer-x { cursor: pointer; color: var(--text-dim); font-size: 22px; line-height: 1; } .drawer-body { flex: 1; overflow-y: auto; padding: 30px; } .cart-line { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); } .cart-line .ci-img { width: 64px; height: 78px; background: var(--espresso); flex: 0 0 auto; } .cart-line .ci-name { font-family: var(--serif); font-size: 19px; } .cart-line .ci-meta { font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em; color: var(--text-faint); text-transform: uppercase; margin-top: 4px; } .cart-line .ci-price { font-family: var(--sans); font-size: 14px; margin-top: 8px; color: var(--text-dim); } .drawer-foot { padding: 26px 30px 30px; border-top: 1px solid var(--line); } .drawer-foot .row { display: flex; justify-content: space-between; font-family: var(--sans); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; color: var(--text-dim); } /* ---------- Marquee ---------- */ .marquee { overflow: hidden; white-space: nowrap; } .marquee-track { display: inline-flex; gap: 56px; animation: marq 34s linear infinite; } .marquee-track span { font-family: var(--serif); font-style: italic; font-size: clamp(26px,3.4vw,46px); color: var(--text-faint); display: inline-flex; align-items: center; gap: 56px; } .marquee-track span::after { content: "✦"; font-size: 0.5em; color: var(--gold); font-style: normal; } @keyframes marq { to { transform: translateX(-50%); } } /* ---------- Utilities ---------- */ .center { text-align: center; } .mt-s { margin-top: 18px; } .mt-m { margin-top: 30px; } .mt-l { margin-top: 48px; } .grid { display: grid; } .fade-img { filter: saturate(0.92) contrast(1.02); } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 860px) { :root { --gut: 24px; } .nav-links:not(.right) { display: none; } .nav-links.right { display: none; } .nav .wrap { grid-template-columns: auto 1fr auto; } .nav-logo { justify-self: start; } .nav-burger { display: inline-flex; color: var(--text); cursor: pointer; } .nav-burger svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.4; } .footer-grid { grid-template-columns: 1fr; gap: 36px; } .footer-bottom { flex-direction: column; gap: 14px; text-align: center; } } /* ---------- Mobile menu ---------- */ .mobile-menu { position: fixed; inset: 0; background: var(--ink); z-index: 150; transform: translateY(-100%); transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1); display: flex; flex-direction: column; justify-content: center; padding: 0 32px; } .mobile-menu.open { transform: none; } .mobile-menu a { font-family: var(--serif); font-size: 34px; padding: 12px 0; color: var(--cream); border-bottom: 1px solid var(--line); } .mobile-menu .mm-close { position: absolute; top: 28px; right: 28px; font-size: 30px; cursor: pointer; color: var(--text-dim); } /* ============================================================ Coperaco — TRANSPARENT HEADER over hero, solid on scroll Paste at the BOTTOM of assets/coperaco.css → Save. Requires the "Sticky header" setting to be ON (see notes). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&display=swap'); /* ---------- Announcement bar (always bordeaux) ---------- */ .announcement-bar, .utility-bar, .announcement-bar__announcement { background-color: #6B2230 !important; color: #F3ECDF !important; } .announcement-bar__announcement { font-family: 'Jost', sans-serif !important; font-size: 10.5px !important; letter-spacing: 0.26em !important; text-transform: uppercase !important; font-weight: 400 !important; padding-top: 10px !important; padding-bottom: 10px !important; } /* ---------- 1. TRANSPARENT at top ---------- */ /* The header sits over the hero with no background. */ .header-wrapper { background: transparent !important; border-bottom: 0 !important; position: absolute !important; /* float over the first section */ left: 0; right: 0; z-index: 5; transition: background-color 0.5s ease, border-color 0.5s ease; } .header { background: transparent !important; padding-top: 20px !important; padding-bottom: 20px !important; } /* Light text/logo/icons while transparent (hero is dark imagery) */ .header__heading-link, .header__heading-link .h2, .header__menu-item span, .header__menu-item, .header__icons .header__icon, .header__icons .header__icon .icon { color: #F3ECDF !important; } .header__heading-logo { max-height: 30px !important; width: auto !important; } /* If your logo is dark, use a white version here, or this filter forces it light: */ /* .header__heading-logo { filter: brightness(0) invert(1); } */ /* ---------- 2. SOLID when stuck on scroll ---------- */ /* Dawn adds these classes to the sticky header once it scrolls/sticks. */ .header-wrapper--sticky, .shopify-section-header-sticky .header-wrapper, .header-wrapper.scrolled-past-header { background-color: rgba(21,17,14,0.92) !important; /* #15110E w/ blur */ -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgba(243,236,223,0.14) !important; position: sticky !important; } /* ---------- Nav typography (both states) ---------- */ .header__menu-item span, .header__menu-item { font-family: 'Jost', sans-serif !important; font-size: 12px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; font-weight: 400 !important; } .header__inline-menu .list-menu--inline { flex-wrap: nowrap !important; gap: 4px !important; } .header__menu-item { padding-left: 12px !important; padding-right: 12px !important; } .header__menu-item span::after { content: ""; display: block; height: 1px; width: 0; background: #B0875A; transition: width 0.4s ease; margin-top: 5px; } .header__menu-item:hover span::after { width: 100%; } .header__icon:hover { opacity: 0.7; } /* ---------- Mobile ---------- */ @media (max-width: 989px) { .header { padding-top: 12px !important; padding-bottom: 12px !important; } .menu-drawer { background-color: #15110E !important; } .menu-drawer__menu-item { color: #F3ECDF !important; font-family: 'Jost', sans-serif !important; } } /* ============================================================ REQUIRED SETTINGS (Customize → Header): • Sticky header → "On scroll up" (this turns on the sticky classes the solid state hooks onto) • Logo position → Top left / Middle left (prevents wrap) WHY absolute at top: it lets the hero show THROUGH the header. Make sure your first homepage section (Hero) is tall and dark at the top so the cream nav stays legible. ============================================================ */ /* ============================================================ Coperaco — eyebrow spacing + refined announcement bar Paste at the BOTTOM of assets/coperaco.css → Save. ============================================================ */ /* --- 1. More breathing room under the eyebrow line --- */ /* The eyebrow that sits above the nav. If you used the ::before header tagline, this gives it space below before the nav row. */ .header-wrapper::before { padding-bottom: 22px !important; /* was ~4px — increase for more gap */ } /* If your eyebrow instead comes from the Hero section's Eyebrow field (left-aligned with the gold dash), use this instead: */ .banner .eyebrow, .header__heading + .eyebrow { margin-bottom: 22px !important; } /* --- 2. Refined announcement bar --- */ .announcement-bar, .utility-bar, .announcement-bar__announcement { background-color: #7A1B22 !important; /* true brand bordeaux */ color: #F3ECDF !important; } .announcement-bar__announcement { font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif !important; font-size: 11px !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; font-weight: 600 !important; /* bolder */ padding-top: 12px !important; padding-bottom: 12px !important; }