/** Shopify CDN: Minification failed
Line 1568:19 Unexpected "*"
**/
/* =================================================================
Dick's Potato Chips — Custom Design System
Overrides Dawn 4.0 defaults with brand-specific tokens and styles.
Design philosophy: warm cream base, packaging colors as accents,
product-forward merchandising, confident food-brand energy.
================================================================= */
/* --- Google Fonts ---
Loaded via in theme.liquid for non-blocking render.
Do NOT re-add @import here — it creates a render-blocking waterfall.
----------------------------------------------------------------------- */
/* =================================================================
1. DESIGN TOKENS
================================================================= */
:root {
/* Surfaces */
--surface-base: #F5F0E8;
--surface-elevated: #FFFDF9;
--surface-overlay: #EDE7DC;
/* Brand (from packaging — accent use only) */
--brand-red: #C5281C;
--brand-red-hover: #A82318;
--brand-purple: #4E2D6D;
--brand-purple-hover: #3D2356;
--brand-gold: #D4A238;
--brand-gold-hover: #B8892E;
--brand-green: #2E8B57;
/* Surfaces — semantic backgrounds */
--surface-brand: #1A1A1A;
/* Text */
--text-primary: #1A1A1A;
--text-secondary: #6B6259;
--text-tertiary: #756B63;
--text-on-dark: #F5F0E8;
--text-on-brand: #FFFFFF;
/* Borders */
--border: #E8E2DA;
--border-strong: #D1C9BD;
/* Flavor accents (5-8% opacity washes for product cards) */
--flavor-salty: #C5281C;
--flavor-bbq: #D4A238;
--flavor-hot: #E84420;
--flavor-sv: #2E8B57;
/* Typography */
--font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
--font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
/* Spacing (fluid — breathes on larger viewports, tightens on mobile) */
--section-padding-sm: clamp(40px, 5vw, 60px);
--section-padding-md: clamp(48px, 6vw, 80px);
--section-padding-lg: clamp(56px, 8vw, 100px);
--section-padding-xl: clamp(64px, 10vw, 120px);
--gutter-mobile: 16px;
--gutter-desktop: 24px;
--content-max-width: 1280px;
/* Radii */
--radius-card: 12px;
--radius-button: 8px;
--radius-badge: 20px;
--radius-input: 8px;
/* Surfaces (aliases for bundle builder compatibility) */
--surface-card: var(--surface-elevated);
--border-subtle: var(--border);
/* Transitions (ease-out-quart for natural UI motion) */
--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
--transition-fast: 150ms var(--ease-out);
--transition-base: 250ms var(--ease-out);
--transition-slow: 400ms var(--ease-out);
/* Z-index scale (semantic layers — never use arbitrary values) */
--z-base: 1;
--z-badge: 2;
--z-sticky: 100;
--z-overlay: 500;
--z-drawer: 600;
--z-toast: 700;
/* Shadows */
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
--shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
--shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.06);
--shadow-drawer: -4px 0 24px rgba(0, 0, 0, 0.12);
/* Radii — pill (fully rounded variant selectors) */
--radius-pill: 100px;
/* Tracking (synced from design system tokens/typography.css) */
--tracking-display: -0.02em;
--tracking-heading: -0.01em;
--tracking-label: 0.08em;
--tracking-button: 0.06em;
/* Flavor washes (5–8% tints behind product cards on hover) */
--wash-salty: rgba(197, 40, 28, 0.06);
--wash-bbq: rgba(212, 162, 56, 0.08);
--wash-hot: rgba(232, 68, 32, 0.06);
--wash-sv: rgba(46, 139, 87, 0.06);
/* Accessibility — focus halo on interactive controls */
--focus-ring: 0 0 0 4px rgba(197, 40, 28, 0.15);
--hit-target: 44px;
}
/* =================================================================
Section eyebrow — red uppercase label above section titles
(design system SectionHeading: eyebrow + title two-tier)
================================================================= */
.dicks-eyebrow {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: var(--tracking-label);
color: var(--brand-red);
margin-bottom: 8px;
}
/* Accessibility — consistent focus halo on interactive controls */
.dicks-btn:focus-visible,
.dicks-pill:focus-visible,
.dicks-qty__btn:focus-visible,
.dicks-drawer__close:focus-visible,
.dicks-drawer__qty-btn:focus-visible,
.dicks-drawer__remove:focus-visible {
outline: 2px solid var(--brand-red);
outline-offset: 2px;
box-shadow: var(--focus-ring);
}
@media (prefers-reduced-motion: reduce) {
.dicks-eyebrow { margin-bottom: 8px; }
}
/* =================================================================
2. DAWN OVERRIDES — Base reset to new design system
================================================================= */
/* Override Dawn's page-width and background */
body.gradient,
body {
background-color: var(--surface-base) !important;
color: var(--text-primary);
font-family: var(--font-body);
font-weight: 400;
font-size: 1rem;
line-height: 1.6;
letter-spacing: 0;
}
/* Override Dawn's page width (was 120rem = 1920px, way too wide) */
.page-width {
max-width: var(--content-max-width) !important;
padding-left: var(--gutter-mobile);
padding-right: var(--gutter-mobile);
margin: 0 auto;
}
@media screen and (min-width: 750px) {
.page-width {
padding-left: var(--gutter-desktop);
padding-right: var(--gutter-desktop);
}
}
/* =================================================================
3. TYPOGRAPHY
================================================================= */
/* Display headings — Barlow Condensed Black */
h1, h2, h3,
.h0, .h1, .h2, .h3,
.dicks-heading {
font-family: var(--font-display);
font-weight: 700;
color: var(--text-primary);
line-height: 1.1;
letter-spacing: -0.01em;
text-wrap: balance;
}
.h0 {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.02em;
}
h1, .h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 900;
}
h2, .h2 {
font-size: clamp(1.75rem, 4vw, 2.75rem);
}
h3, .h3 {
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}
/* Body text */
.dicks-body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--text-secondary);
max-width: 70ch;
text-wrap: pretty;
}
.dicks-body--lg {
font-size: 1.125rem;
line-height: 1.65;
}
/* Labels — Barlow Condensed SemiBold uppercase */
.dicks-label {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
}
.dicks-label--accent {
color: var(--brand-red);
}
/* Price display */
.dicks-price {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.125rem;
font-variant-numeric: tabular-nums;
color: var(--text-primary);
}
/* B2B wholesale slash-through on the flavor-strip size rows */
.dicks-price--wholesale {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
}
.dicks-price__retail {
color: var(--text-secondary, #7a7a7a);
opacity: 0.6;
text-decoration: line-through;
font-weight: 700;
}
.dicks-price__wholesale {
color: var(--text-primary);
font-weight: 700;
}
.dicks-price--unit {
font-family: var(--font-body);
font-weight: 400;
font-size: 0.875rem;
color: var(--text-tertiary);
}
/* =================================================================
4. BUTTONS
================================================================= */
.dicks-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border-radius: var(--radius-button);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
cursor: pointer;
border: none;
transition: all var(--transition-fast);
-webkit-tap-highlight-color: transparent;
}
.dicks-btn:active {
transform: scale(0.97);
}
/* Primary — brand red fill */
.dicks-btn--primary {
background-color: var(--brand-red);
color: var(--text-on-brand);
}
.dicks-btn--primary:hover {
background-color: var(--brand-red-hover);
}
/* Secondary — ghost/outline */
.dicks-btn--secondary {
background-color: transparent;
color: var(--text-primary);
border: 1.5px solid var(--border-strong);
}
.dicks-btn--secondary:hover {
background-color: var(--surface-overlay);
}
/* Bundle CTA — purple */
.dicks-btn--bundle {
background-color: var(--brand-purple);
color: var(--text-on-brand);
}
.dicks-btn--bundle:hover {
background-color: var(--brand-purple-hover);
}
/* Full-width button */
.dicks-btn--full {
width: 100%;
}
/* Small button (quick-add) */
.dicks-btn--sm {
padding: 10px 20px;
font-size: 0.75rem;
}
/* =================================================================
5. PRODUCT CARDS
================================================================= */
.dicks-product-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-card);
overflow: hidden;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.dicks-product-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.dicks-product-card__image-wrap {
position: relative;
padding: 24px 16px 8px;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
transition: background-color var(--transition-base);
}
/* Flavor-specific tint backgrounds on hover */
.dicks-product-card[data-flavor="salty"]:hover .dicks-product-card__image-wrap {
background-color: rgba(197, 40, 28, 0.06);
}
.dicks-product-card[data-flavor="bbq"]:hover .dicks-product-card__image-wrap {
background-color: rgba(212, 162, 56, 0.08);
}
.dicks-product-card[data-flavor="hot"]:hover .dicks-product-card__image-wrap {
background-color: rgba(232, 68, 32, 0.06);
}
.dicks-product-card[data-flavor="sv"]:hover .dicks-product-card__image-wrap {
background-color: rgba(46, 139, 87, 0.06);
}
.dicks-product-card__image {
width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
transition: transform var(--transition-base);
}
.dicks-product-card:hover .dicks-product-card__image {
transform: scale(1.03);
}
.dicks-product-card__info {
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
}
.dicks-product-card__name {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.125rem;
color: var(--text-primary);
margin: 0 0 4px;
line-height: 1.2;
}
.dicks-product-card__meta {
font-family: var(--font-body);
font-size: 0.8125rem;
color: var(--text-tertiary);
margin-bottom: 8px;
}
.dicks-product-card__price-row {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: auto;
padding-top: 8px;
}
.dicks-product-card__quick-add {
margin-top: 12px;
}
/* Dawn card-product quick add (e.g. cart page recommendations) */
.card__quick-add {
margin-top: 12px;
}
.card__quick-add .dicks-quick-add-form {
margin: 0;
}
/* Larger, easy-to-tap "Add to Order" label */
.card__quick-add .dicks-btn {
font-size: 2.1rem;
letter-spacing: 0.02em;
padding-top: 16px;
padding-bottom: 16px;
min-height: 60px; /* comfortable touch target */
}
@media screen and (max-width: 749px) {
.card__quick-add .dicks-btn {
font-size: 2.3rem;
padding-top: 18px;
padding-bottom: 18px;
}
}
/* Touch devices / mobile: always visible (no hover) */
@media screen and (max-width: 989px), (hover: none) {
.card__quick-add {
opacity: 1;
}
}
/* Desktop w/ hover: reveal "Add to Order" when the card is hovered/focused */
@media screen and (min-width: 990px) and (hover: hover) {
.card__quick-add {
opacity: 0;
transform: translateY(6px);
transition: opacity var(--transition-base, 0.2s ease), transform var(--transition-base, 0.2s ease);
}
.card-wrapper:hover .card__quick-add,
.card-wrapper:focus-within .card__quick-add {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile: quick-add always visible */
@media screen and (max-width: 749px) {
.dicks-product-card__quick-add {
opacity: 1;
}
}
/* Desktop: quick-add fades in on hover */
@media screen and (min-width: 750px) {
.dicks-product-card__quick-add {
opacity: 0;
transform: translateY(8px);
transition: opacity var(--transition-base), transform var(--transition-base);
}
.dicks-product-card:hover .dicks-product-card__quick-add {
opacity: 1;
transform: translateY(0);
}
}
/* =================================================================
6. BUNDLE CARDS (wider, variant pills)
================================================================= */
.dicks-bundle-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-card);
overflow: hidden;
padding: 24px;
}
.dicks-bundle-card__header {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
}
.dicks-bundle-card__image {
width: 120px;
height: 120px;
object-fit: contain;
flex-shrink: 0;
}
.dicks-bundle-card__title {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
color: var(--text-primary);
margin: 0 0 4px;
}
.dicks-bundle-card__subtitle {
font-family: var(--font-body);
font-size: 0.875rem;
color: var(--text-secondary);
margin: 0 0 8px;
}
/* Variant pill selector */
.dicks-pill-selector {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0 16px;
}
.dicks-pill {
display: inline-flex;
align-items: center;
padding: 8px 18px;
border: 1.5px solid var(--border);
border-radius: var(--radius-pill);
background: var(--surface-elevated);
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
transition: all var(--transition-fast);
-webkit-tap-highlight-color: transparent;
min-height: var(--hit-target); /* Touch target */
}
.dicks-pill:hover {
border-color: var(--border-strong);
background: var(--surface-overlay);
}
.dicks-pill--selected {
border-color: var(--brand-red);
background: rgba(197, 40, 28, 0.05);
color: var(--brand-red);
font-weight: 700;
}
.dicks-pill--disabled {
opacity: 0.5;
cursor: not-allowed;
text-decoration: line-through;
}
/* =================================================================
6b. COLLECTION / SHOP PAGE — enlarged typography + prominent bundle CTA
Scoped to .collection (product grid) and .collection-hero (banner) so the
rest of the site keeps its own tuned type sizes. Desktop/tablet only
(>=750px) to avoid overflow on narrow phones.
================================================================= */
/* NOTE: this theme sets html { font-size: 62.5% } → 1rem = 10px. All sizes
below are px-equivalent (rem × 10), chosen to roughly 2.5–3× the originals. */
/* Equal-height flavor cards so the prices line up: the grid stretches each
to the tallest in the row, but the card only sizes to its (variable-length
title) content. display:grid on the cell stretches the card to fill it. */
.collection .dicks-grid > li {
display: grid;
}
@media screen and (min-width: 750px) {
/* Banner heading + subtitle */
.collection-hero .h1 {
font-size: 5.5rem; /* ~55px */
line-height: 1.05;
}
.collection-hero .dicks-body {
font-size: 2.6rem; /* ~26px */
line-height: 1.5;
max-width: none;
}
/* Zone labels — "INDIVIDUAL FLAVORS" / "COMBO PACKS" */
.collection .dicks-label {
font-size: 2.1rem; /* ~21px (was 7.5px) */
letter-spacing: 0.1em;
margin-bottom: 24px !important;
}
/* Individual flavor cards */
.collection .dicks-product-card__info {
padding: 24px;
}
.collection .dicks-product-card__name {
font-size: 3rem; /* ~30px (was ~11px) */
line-height: 1.15;
}
.collection .dicks-product-card__meta {
font-size: 2rem; /* ~20px */
margin-bottom: 12px;
}
.collection .dicks-product-card .dicks-price {
font-size: 3rem; /* ~30px */
}
.collection .dicks-product-card .dicks-btn {
font-size: 1.8rem; /* ~18px */
}
/* Variety pack / combo — larger, centered, prominent CTA */
.collection #product-grid-bundles {
grid-template-columns: minmax(0, 880px);
justify-content: center;
}
.collection .dicks-bundle-card {
padding: 40px;
}
.collection .dicks-bundle-card__header {
gap: 32px;
align-items: center;
margin-bottom: 24px;
}
.collection .dicks-bundle-card__image {
width: 200px;
height: 200px;
}
.collection .dicks-bundle-card__title {
font-size: 3.8rem; /* ~38px */
line-height: 1.1;
}
.collection .dicks-bundle-card__subtitle {
font-size: 2.3rem; /* ~23px */
margin-bottom: 12px;
}
.collection .dicks-bundle-card .dicks-price {
font-size: 3.8rem; /* ~38px */
}
.collection .dicks-bundle-card .dicks-pill {
font-size: 2.1rem; /* ~21px */
padding: 14px 28px;
}
.collection .dicks-bundle-card .dicks-btn {
font-size: 2.8rem; /* ~28px */
padding: 22px 44px;
}
}
/* =================================================================
7. ANNOUNCEMENT BAR
Styles now live in the announcement-bar.liquid