/** Shopify CDN: Minification failed
Line 322:0 "@import" is only valid at the top level
**/
/* ==========================================================================
©ULTURE — Custom CSS for Shopify (Dawn theme selectors)
--------------------------------------------------------------------------
HOW TO USE
1. Shopify admin → Online Store → Themes → Edit code
2. Open assets/base.css (or create assets/custom.css) and paste this in.
If you create a new file, add this line right before
in layout/theme.liquid:
{{ 'custom.css' | asset_url | stylesheet_tag }}
3. Add the Google Fonts tags below into layout/theme.liquid :
NOTE ON SELECTORS
These target Shopify's Dawn theme (the current default). If your theme
is Sense, Refresh, or a custom-built one, class names differ — open
dev tools on your live store, click the element, and swap the selector
on the left of any rule below. The design tokens (:root variables) and
the visual logic apply no matter which theme you're on.
========================================================================== */
:root{
--culture-cream: #F1E9D8;
--culture-paper: #FBF8F1;
--culture-forest: #17301F;
--culture-forest-deep: #0F2216;
--culture-rust: #B0472A;
--culture-rust-soft: #C97A5C;
--culture-ink: #17150F;
--culture-ink-soft: #514A3D;
--culture-line: rgba(23,21,15,0.14);
--culture-display: "Big Shoulders Display", sans-serif;
--culture-body: "Space Grotesk", sans-serif;
--culture-fraktur: "UnifrakturCook", cursive;
}
/* --------------------------------------------------------------------
GLOBAL
-------------------------------------------------------------------- */
body{
background: var(--culture-cream);
color: var(--culture-ink);
font-family: var(--culture-body);
}
h1, h2, h3, h4,
.h1, .h2, .h3, .h4{
font-family: var(--culture-display);
text-transform: uppercase;
letter-spacing: 0.01em;
font-weight: 700;
color: var(--culture-ink);
}
a{ color: var(--culture-ink); }
a:hover{ color: var(--culture-rust); }
/* a small italic accent utility — wrap a word in */
.c-script{
font-family: var(--culture-body);
font-style: italic;
text-transform: none;
font-weight: 500;
color: var(--culture-rust);
}
/* --------------------------------------------------------------------
ANNOUNCEMENT BAR → the ticker strip
-------------------------------------------------------------------- */
.announcement-bar,
.utility-bar{
background: var(--culture-ink) !important;
border-bottom: 1px solid var(--culture-line);
}
.announcement-bar .announcement-bar__message,
.utility-bar p{
font-family: var(--culture-display);
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--culture-cream) !important;
}
/* --------------------------------------------------------------------
HEADER / NAV
-------------------------------------------------------------------- */
.header,
.section-header{
background: rgba(241,233,216,0.9);
border-bottom: 1px solid var(--culture-line);
backdrop-filter: blur(10px);
}
.header__heading-link,
.header__heading-logo-link{
font-family: var(--culture-display);
font-weight: 700;
font-size: 22px;
letter-spacing: 0.03em;
color: var(--culture-ink) !important;
}
.header__menu-item{
font-family: var(--culture-body);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--culture-ink-soft) !important;
}
.header__menu-item:hover{ color: var(--culture-rust) !important; }
/* --------------------------------------------------------------------
BUTTONS
-------------------------------------------------------------------- */
.button,
.button--primary,
button[type="submit"],
input[type="submit"]{
font-family: var(--culture-body);
font-size: 14px;
letter-spacing: 0.04em;
background: var(--culture-ink);
color: var(--culture-cream);
border: 1px solid var(--culture-ink);
border-radius: 2px;
transition: transform .2s ease, background .2s ease, color .2s ease;
}
.button:hover,
.button--primary:hover,
button[type="submit"]:hover{
background: var(--culture-rust);
border-color: var(--culture-rust);
transform: translateY(-2px);
color: var(--culture-cream);
}
.button--secondary{
background: transparent;
color: var(--culture-ink);
border: 1px solid var(--culture-ink);
}
.button--secondary:hover{
color: var(--culture-rust);
border-color: var(--culture-rust);
background: transparent;
}
/* --------------------------------------------------------------------
PRODUCT CARDS / COLLECTION GRID
-------------------------------------------------------------------- */
.card,
.card-wrapper{
background: var(--culture-paper);
border: 1px solid var(--culture-line);
border-radius: 2px;
transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover,
.card-wrapper:hover{
transform: translateY(-6px);
box-shadow: 0 18px 34px rgba(23,21,15,0.12);
}
.card__content{
padding: 18px 20px 22px;
}
.card__heading,
.card__heading a{
font-family: var(--culture-display);
font-size: 20px;
text-transform: uppercase;
color: var(--culture-ink);
}
.price,
.price__container{
font-family: var(--culture-body);
font-weight: 600;
color: var(--culture-ink);
}
.price--sale,
.price__sale .price-item--sale{
color: var(--culture-rust);
}
/* product tags / badges */
.badge,
.card__badge{
font-family: var(--culture-body);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
background: transparent;
color: var(--culture-rust);
border: 1px solid var(--culture-rust);
border-radius: 0;
}
/* --------------------------------------------------------------------
SECTION HEADINGS
-------------------------------------------------------------------- */
.title-wrapper,
.collection-hero__title-wrapper,
.section__header{
text-align: left;
}
.title,
.collection-hero__title{
font-family: var(--culture-display);
font-size: clamp(36px, 6vw, 64px);
line-height: 1;
text-transform: uppercase;
color: var(--culture-ink);
}
/* --------------------------------------------------------------------
DARK / FEATURE SECTIONS (e.g. image-with-text, rich text on dark bg)
apply the "color-scheme" class Shopify gives these sections, usually
color-background-2 or a custom scheme — adjust selector if needed
-------------------------------------------------------------------- */
.color-background-2,
.gradient{
background: var(--culture-forest) !important;
color: var(--culture-paper) !important;
}
.color-background-2 h1,
.color-background-2 h2,
.color-background-2 h3,
.gradient h1,
.gradient h2,
.gradient h3{
color: var(--culture-paper) !important;
}
.color-background-2 .button--secondary,
.gradient .button--secondary{
border-color: rgba(251,248,241,0.4);
color: var(--culture-paper);
}
.color-background-2 .button--secondary:hover,
.gradient .button--secondary:hover{
border-color: var(--culture-rust-soft);
color: var(--culture-rust-soft);
}
/* --------------------------------------------------------------------
NEWSLETTER / FORMS
-------------------------------------------------------------------- */
.newsletter-form__field-wrapper input,
input[type="email"]{
font-family: var(--culture-body);
border: 1px solid var(--culture-ink);
background: var(--culture-paper);
border-radius: 2px;
}
.newsletter-form__field-wrapper input:focus,
input[type="email"]:focus{
outline: 2px solid var(--culture-rust);
outline-offset: 2px;
}
/* --------------------------------------------------------------------
FOOTER
-------------------------------------------------------------------- */
.footer{
background: var(--culture-ink) !important;
color: var(--culture-cream) !important;
}
.footer h2,
.footer .footer-block__heading{
font-family: var(--culture-display);
color: var(--culture-cream) !important;
}
.footer a{
color: rgba(241,233,216,0.65) !important;
}
.footer a:hover{
color: var(--culture-rust-soft) !important;
}
.footer__copyright,
.footer__copyright a{
font-size: 12px;
color: rgba(241,233,216,0.45) !important;
}
/* --------------------------------------------------------------------
MOTION — respect reduced motion preference
-------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
.card, .card-wrapper, .button, .button--primary{
transition: none !important;
}
/* ==========================================================================
©ULTURE — Custom CSS for Shopify (Dawn theme selectors)
--------------------------------------------------------------------------
HOW TO USE
1. Shopify admin → Online Store → Themes → Edit code
2. Open assets/base.css (or create assets/custom.css) and paste this in.
If you create a new file, add this line right before
in layout/theme.liquid:
{{ 'custom.css' | asset_url | stylesheet_tag }}
3. Fonts are loaded below via @import — no edits to theme.liquid needed.
(If you'd rather use tags for slightly faster loading, see
the note at the very bottom of this file.)
NOTE ON SELECTORS
These target Shopify's Dawn theme (the current default). If your theme
is Sense, Refresh, or a custom-built one, class names differ — open
dev tools on your live store, click the element, and swap the selector
on the left of any rule below. The design tokens (:root variables) and
the visual logic apply no matter which theme you're on.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;600;700;900&family=Space+Grotesk:wght@400;500;600&family=UnifrakturCook:wght@700&display=swap');
:root{
--culture-cream: #F1E9D8;
--culture-paper: #FBF8F1;
--culture-forest: #17301F;
--culture-forest-deep: #0F2216;
--culture-rust: #B0472A;
--culture-rust-soft: #C97A5C;
--culture-ink: #17150F;
--culture-ink-soft: #514A3D;
--culture-line: rgba(23,21,15,0.14);
--culture-display: "Big Shoulders Display", sans-serif;
--culture-body: "Space Grotesk", sans-serif;
--culture-fraktur: "UnifrakturCook", cursive;
}
/* --------------------------------------------------------------------
GLOBAL
-------------------------------------------------------------------- */
body{
background: var(--culture-cream);
color: var(--culture-ink);
font-family: var(--culture-body);
}
h1, h2, h3, h4,
.h1, .h2, .h3, .h4{
font-family: var(--culture-display);
text-transform: uppercase;
letter-spacing: 0.01em;
font-weight: 700;
color: var(--culture-ink);
}
a{ color: var(--culture-ink); }
a:hover{ color: var(--culture-rust); }
/* a small italic accent utility — wrap a word in */
.c-script{
font-family: var(--culture-body);
font-style: italic;
text-transform: none;
font-weight: 500;
color: var(--culture-rust);
}
/* --------------------------------------------------------------------
ANNOUNCEMENT BAR → the ticker strip
-------------------------------------------------------------------- */
.announcement-bar,
.utility-bar{
background: var(--culture-ink) !important;
border-bottom: 1px solid var(--culture-line);
}
.announcement-bar .announcement-bar__message,
.utility-bar p{
font-family: var(--culture-display);
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--culture-cream) !important;
}
/* --------------------------------------------------------------------
HEADER / NAV
-------------------------------------------------------------------- */
.header,
.section-header{
background: rgba(241,233,216,0.9);
border-bottom: 1px solid var(--culture-line);
backdrop-filter: blur(10px);
}
.header__heading-link,
.header__heading-logo-link{
font-family: var(--culture-display);
font-weight: 700;
font-size: 22px;
letter-spacing: 0.03em;
color: var(--culture-ink) !important;
}
.header__menu-item{
font-family: var(--culture-body);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--culture-ink-soft) !important;
}
.header__menu-item:hover{ color: var(--culture-rust) !important; }
/* --------------------------------------------------------------------
BUTTONS
-------------------------------------------------------------------- */
.button,
.button--primary,
button[type="submit"],
input[type="submit"]{
font-family: var(--culture-body);
font-size: 14px;
letter-spacing: 0.04em;
background: var(--culture-ink);
color: var(--culture-cream);
border: 1px solid var(--culture-ink);
border-radius: 2px;
transition: transform .2s ease, background .2s ease, color .2s ease;
}
.button:hover,
.button--primary:hover,
button[type="submit"]:hover{
background: var(--culture-rust);
border-color: var(--culture-rust);
transform: translateY(-2px);
color: var(--culture-cream);
}
.button--secondary{
background: transparent;
color: var(--culture-ink);
border: 1px solid var(--culture-ink);
}
.button--secondary:hover{
color: var(--culture-rust);
border-color: var(--culture-rust);
background: transparent;
}
/* --------------------------------------------------------------------
PRODUCT CARDS / COLLECTION GRID
-------------------------------------------------------------------- */
.card,
.card-wrapper{
background: var(--culture-paper);
border: 1px solid var(--culture-line);
border-radius: 2px;
transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover,
.card-wrapper:hover{
transform: translateY(-6px);
box-shadow: 0 18px 34px rgba(23,21,15,0.12);
}
.card__content{
padding: 18px 20px 22px;
}
.card__heading,
.card__heading a{
font-family: var(--culture-display);
font-size: 20px;
text-transform: uppercase;
color: var(--culture-ink);
}
.price,
.price__container{
font-family: var(--culture-body);
font-weight: 600;
color: var(--culture-ink);
}
.price--sale,
.price__sale .price-item--sale{
color: var(--culture-rust);
}
/* product tags / badges */
.badge,
.card__badge{
font-family: var(--culture-body);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
background: transparent;
color: var(--culture-rust);
border: 1px solid var(--culture-rust);
border-radius: 0;
}
/* --------------------------------------------------------------------
SECTION HEADINGS
-------------------------------------------------------------------- */
.title-wrapper,
.collection-hero__title-wrapper,
.section__header{
text-align: left;
}
.title,
.collection-hero__title{
font-family: var(--culture-display);
font-size: clamp(36px, 6vw, 64px);
line-height: 1;
text-transform: uppercase;
color: var(--culture-ink);
}
/* --------------------------------------------------------------------
DARK / FEATURE SECTIONS (e.g. image-with-text, rich text on dark bg)
apply the "color-scheme" class Shopify gives these sections, usually
color-background-2 or a custom scheme — adjust selector if needed
-------------------------------------------------------------------- */
.color-background-2,
.gradient{
background: var(--culture-forest) !important;
color: var(--culture-paper) !important;
}
.color-background-2 h1,
.color-background-2 h2,
.color-background-2 h3,
.gradient h1,
.gradient h2,
.gradient h3{
color: var(--culture-paper) !important;
}
.color-background-2 .button--secondary,
.gradient .button--secondary{
border-color: rgba(251,248,241,0.4);
color: var(--culture-paper);
}
.color-background-2 .button--secondary:hover,
.gradient .button--secondary:hover{
border-color: var(--culture-rust-soft);
color: var(--culture-rust-soft);
}
/* --------------------------------------------------------------------
NEWSLETTER / FORMS
-------------------------------------------------------------------- */
.newsletter-form__field-wrapper input,
input[type="email"]{
font-family: var(--culture-body);
border: 1px solid var(--culture-ink);
background: var(--culture-paper);
border-radius: 2px;
}
.newsletter-form__field-wrapper input:focus,
input[type="email"]:focus{
outline: 2px solid var(--culture-rust);
outline-offset: 2px;
}
/* --------------------------------------------------------------------
FOOTER
-------------------------------------------------------------------- */
.footer{
background: var(--culture-ink) !important;
color: var(--culture-cream) !important;
}
.footer h2,
.footer .footer-block__heading{
font-family: var(--culture-display);
color: var(--culture-cream) !important;
}
.footer a{
color: rgba(241,233,216,0.65) !important;
}
.footer a:hover{
color: var(--culture-rust-soft) !important;
}
.footer__copyright,
.footer__copyright a{
font-size: 12px;
color: rgba(241,233,216,0.45) !important;
}
/* --------------------------------------------------------------------
MOTION — respect reduced motion preference
-------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
.card, .card-wrapper, .button, .button--primary{
transition: none !important;
}
}
/* ==========================================================================
OPTIONAL — faster font loading via tags instead of @import
--------------------------------------------------------------------------
@import (used above) makes the browser fetch this CSS file first, then
discover it needs the fonts, then fetch those — an extra round trip.
For a small speed gain, delete the @import line at the top of this file
and instead paste this into layout/theme.liquid, right before :
========================================================================== */
}