/* ══ Cacao product card — the bar on the counter ═══════════════════ */ .cc-card { --cc-ink: var(--color-text-primary, #2A1A14); --cc-ink-2: var(--color-text-secondary, #5A463C); --cc-muted: var(--color-text-muted, #7E6A5E); --cc-faint: var(--color-text-faint, #A8968B); --cc-paper: var(--color-background, #FBF7F3); --cc-milk: var(--color-surface-alt, #EFE3D8); --cc-line: var(--color-border, #E6D9CE); --cc-line-2: var(--color-border-strong, #C9B8AA); --cc-groove: var(--cacao-100, #1C100C); --cc-ruby: var(--color-primary, #B8475E); --cc-ruby-2: var(--color-primary-dark, #9A3449); --cc-pist: var(--color-accent, #7E9B5A); --cc-pist-2: var(--color-accent-dark, #4F6A33); --cc-foil: var(--foil, #C9A96A); --cc-display: var(--font-family-heading, 'Fraunces', Georgia, serif); --cc-body: var(--font-family-body, 'Instrument Sans', system-ui, sans-serif); --cc-ease: var(--ease-default, cubic-bezier(.2,.7,.2,1)); --cc-dur: var(--duration-base, 240ms); --cc-r: var(--border-radius-md, 16px); position: relative; display: flex; flex-direction: column; gap: 0.875rem; height: 100%; font-family: var(--cc-body); color: var(--cc-ink); } .cc-card *, .cc-card *::before, .cc-card *::after { box-sizing: border-box; } .cc-card a { text-decoration: none; color: inherit; } /* the image box */ .cc-card__pack { position: relative; flex: none; aspect-ratio: 3 / 4; border-radius: var(--cc-r); } .cc-card__inside { position: absolute; inset: 0; border-radius: var(--cc-r); overflow: hidden; background: var(--cc-groove); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 0 var(--cc-groove), 0 18px 36px -24px rgba(0,0,0,.7); transition: box-shadow 300ms var(--cc-ease); } .cc-card:hover .cc-card__inside { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 0 var(--cc-groove), 0 26px 46px -24px rgba(0,0,0,.75); } .cc-card__inside > a { position: absolute; inset: 0; display: block; z-index: 1; } .cc-card__photo { position: absolute; inset: 0; transform: scale(1.02); transition: transform 600ms var(--cc-ease); } .cc-card__photo img { object-fit: cover; } .cc-card:hover .cc-card__photo { transform: scale(1.06); } /* no photo: a scored slab in the bar's tint, the percentage debossed in the first piece */ .cc-card__slab { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 4px; padding: 5px; background-color: var(--cc-tint, #3B241A); background-image: url("data:image/svg+xml;utf8,"), linear-gradient(150deg, rgba(255,255,255,.12), transparent 40%, rgba(0,0,0,.18)); background-blend-mode: overlay, normal; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -4px 0 rgba(0,0,0,.42); transition: transform 600ms var(--cc-ease); } .cc-card:hover .cc-card__slab { transform: scale(1.025); } .cc-card__slab i { position: relative; display: block; border-radius: 7px; background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,0) 45%, rgba(0,0,0,.14)); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -3px 0 rgba(0,0,0,.34), 0 1px 0 rgba(0,0,0,.25); transition: transform 420ms var(--cc-ease), box-shadow 420ms var(--cc-ease); } .cc-card__slab i em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-family: var(--cc-display); font-weight: 300; font-size: clamp(.9rem, 1.4vw, 1.15rem); color: rgba(0,0,0,.42); letter-spacing: -0.02em; } .cc-card:hover .cc-card__slab i:nth-child(n+10) { transform: translateY(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -2px 0 rgba(0,0,0,.34), 0 6px 10px -4px rgba(0,0,0,.6); } .cc-card:hover .cc-card__slab i:nth-child(10) { transform: translateY(7px) rotate(-1.5deg); } .cc-card:hover .cc-card__slab i:nth-child(12) { transform: translateY(5px) rotate(1.2deg); } /* the veil */ .cc-card__veil { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; padding: .9rem 1rem; color: var(--cc-paper); background: linear-gradient(180deg, rgba(20,10,7,.18) 0%, transparent 28%, transparent 48%, rgba(20,10,7,.78) 100%); } .cc-card__wm { position: absolute; top: .8rem; inset-inline-start: 1rem; font-family: var(--cc-display); font-weight: 500; font-size: 15px; letter-spacing: -0.03em; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: rgba(251,247,243,.85); } .cc-card__pct { font-family: var(--cc-display); font-weight: 300; font-size: clamp(2.4rem, 3.6vw, 3.2rem); line-height: .9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 144, "SOFT" 80; text-shadow: 0 2px 8px rgba(0,0,0,.45); } .cc-card__pct small { font-size: .4em; } .cc-card__who { margin-top: .4rem; font-size: 12px; color: rgba(251,247,243,.78); line-height: 1.35; } .cc-card__who b { display: block; font-weight: 500; color: var(--cc-paper); font-size: 13px; } .cc-card__veil::after { content: ""; position: absolute; inset-inline: 1rem; bottom: .6rem; height: 1px; background: linear-gradient(90deg, var(--cc-foil), #EAD8A8 50%, var(--cc-foil)); opacity: .9; } /* stickers + tools */ .cc-card__tag { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 3; padding: .3rem .6rem; border-radius: 6px; background: var(--cc-ruby); color: var(--cc-paper); font-size: 12px; font-weight: 500; transform: rotate(-3deg); box-shadow: inset 0 -2px 0 #7E2A3C, 0 4px 8px -4px rgba(0,0,0,.5); white-space: nowrap; unicode-bidi: plaintext; } .cc-card__tag--quiet { background: var(--cc-ink); box-shadow: inset 0 -2px 0 #000, 0 4px 8px -4px rgba(0,0,0,.5); transform: rotate(-2deg); } .cc-card__tools { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 3; display: flex; flex-direction: column; gap: .375rem; opacity: 0; transition: opacity var(--cc-dur) var(--cc-ease); } .cc-card:hover .cc-card__tools, .cc-card__tools:focus-within { opacity: 1; } @media (hover: none) { .cc-card__tools { opacity: 1; } } .cc-card__tools button, .cc-card__tools a { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(251,247,243,.92); color: var(--cc-ink); box-shadow: inset 0 0 0 1px var(--cc-line), 0 6px 10px -6px rgba(0,0,0,.4); cursor: pointer; transition: background var(--cc-dur) var(--cc-ease), color var(--cc-dur) var(--cc-ease); } .cc-card__tools button:hover, .cc-card__tools a:hover { background: #fff; color: var(--cc-ruby-2); } .cc-card__tools button[aria-pressed="true"] { background: var(--cc-ruby); color: var(--cc-paper); box-shadow: none; } .cc-card__tools svg { width: 17px; height: 17px; } .cc-card__soldout { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(20,10,7,.45); } .cc-card__soldout span { padding: .45rem .9rem; border-radius: 9999px; background: var(--cc-paper); color: var(--cc-ink); font-size: 13px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--cc-line), inset 0 -2px 0 var(--cc-line-2); } /* the lower panel */ /* equal heights: the title holds two lines, the note one, the price row sits at the foot */ .cc-card__meta { display: flex; flex: 1; flex-direction: column; gap: .4rem; } .cc-card__title { margin: 0; font-family: var(--cc-display); font-size: 17px; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; font-variation-settings: "opsz" 24, "SOFT" 40; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(2 * 1.25em); } .cc-card__title a { transition: color 200ms var(--cc-ease); } .cc-card:hover .cc-card__title a { color: var(--cc-ruby-2); } .cc-card__note { margin: 0; font-size: 13.5px; color: var(--cc-ink-2); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.45em; } .cc-card__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .7rem; border-top: 1px dashed var(--cc-line-2); } .cc-card__price { font-family: var(--cc-display); font-weight: 400; font-variant-numeric: tabular-nums; font-size: 1.5rem; letter-spacing: -0.01em; font-variation-settings: "opsz" 48, "SOFT" 60; color: var(--color-price, var(--cc-ink)); } .cc-card__price em { font-style: normal; font-family: var(--cc-body); font-size: 12px; color: var(--cc-muted); margin-inline-start: .35em; } .cc-card__price s { font-size: 13px; color: var(--cc-faint); margin-inline-start: .5em; font-family: var(--cc-body); } .cc-card__rating { display: inline-flex; align-items: center; gap: .25rem; font-size: 12.5px; color: var(--cc-muted); } .cc-card__rating svg { width: 13px; height: 13px; color: var(--cc-ruby); } /* the add button is a piece of chocolate: the island's markup inside a molded wrapper */ .cc-card__addwrap .sf-add-to-cart { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 44px; min-height: 44px; padding: 0 .9rem; border: 0; border-radius: 10px; font: inherit; font-weight: 500; font-size: 14px; color: var(--cc-paper); background-color: var(--cacao-72, #3B241A); background-image: url("data:image/svg+xml;utf8,"), linear-gradient(180deg, #503224, #3B241A 50%, #2E1A12); background-blend-mode: overlay, normal; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -4px 0 #140A07; cursor: pointer; transition: transform 120ms var(--cc-ease), box-shadow 120ms var(--cc-ease), filter 200ms var(--cc-ease); } .cc-card__addwrap .sf-add-to-cart svg { width: 16px; height: 16px; } .cc-card__addwrap .sf-add-to-cart:hover:not(:disabled) { filter: brightness(1.08); } .cc-card__addwrap .sf-add-to-cart:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 0 var(--cacao-groove, #140A07); } .cc-card__addwrap .sf-add-to-cart:disabled { opacity: .5; cursor: not-allowed; } .cc-card__addwrap .sf-add-to-cart.is-added, .cc-card__addwrap .sf-add-to-cart[data-added="true"] { background-color: var(--cc-pist); background-image: url("data:image/svg+xml;utf8,"), linear-gradient(180deg, #93AE70, #7E9B5A 50%, #6A8A48); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -4px 0 var(--cc-pist-2); } /* compact — CMS rails */ .cc-card--compact { gap: .625rem; } .cc-card--compact .cc-card__title { font-size: 15px; } .cc-card--compact .cc-card__pct { font-size: 2rem; } @media (max-width: 640px) { .cc-card__who { display: none; } .cc-card__note { display: none; } .cc-card__title { font-size: 15px; } .cc-card__meta { gap: .25rem; } .cc-card__price { font-size: 1.25rem; } } @media (prefers-reduced-motion: reduce) { .cc-card *, .cc-card *::before, .cc-card *::after { transition: none; } .cc-card:hover .cc-card__photo, .cc-card:hover .cc-card__slab, .cc-card:hover .cc-card__slab i { transform: none; } }

All chocolate

Vietnam, Ben Tre dark milk 64%