All
Squarekicker
Squarespace
Add Mocha Latte image
Squarespace · Signature
Mocha Latte
Squarespace
10 pages
$297
Add Bloom image
Squarespace · Native
Bloom
Squarespace
Native
Add Marrakech image
Squarespace · Native
Marrakech
Squarespace
Native
Add Feras image
Squarespace · Native
Feras
Squarespace
Native
Add Lilac image
Squarespace · Native
Lilac
Squarespace
Native
Add sixth Squarespace template image
Squarespace · Native
Template 06
Squarespace
Native
Add Scatto image
Squarekicker · Premium+
Scatto
Squarekicker
$599
Add FEZ image
Squarekicker · Premium+
FEZ
Squarekicker
$599
Add OmPulse image
Squarekicker · Premium
OmPulse
Squarekicker
$599
Add TH’ Marketers image
Squarekicker · Premium
TH’ Marketers
Squarekicker
$599
Add Marco Vale image
Squarekicker · Lite
Marco Vale
Squarekicker
One page
Add NOVA image
Squarekicker · Lite
NOVA
Squarekicker
One page
.sc-shop,
.sc-shop *{
box-sizing:border-box;
}
.sc-shop{
--ink:#0A1020;
--paper:#F3F6FF;
--blue:#3347FF;
--acid:#DFFF3F;
--lilac:#CABDFF;
--coral:#FF6A54;
--white:#FFFFFF;
--muted:#5C6270;
--line:rgba(10,16,32,.18);
--display:"Fraunces",Georgia,serif;
--sans:"Space Grotesk",Arial,sans-serif;
--ease:cubic-bezier(.2,.75,.25,1);
width:100%;
padding:clamp(4rem,7vw,6.5rem) 0 clamp(6rem,9vw,9rem);
background:transparent;
color:var(--ink);
font-family:var(--sans);
-webkit-font-smoothing:antialiased;
}
.sc-shop__wrap{
width:min(calc(100% - 5rem),1380px);
margin-inline:auto;
}
/* =========================================================
CATALOG LAYOUT
========================================================= */
.sc-shop__catalog{
display:block;
}
/* =========================================================
ONE CONTINUOUS GRID
========================================================= */
.sc-shop__grid{
position:relative;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(3rem,4.5vw,4.5rem) clamp(1.6rem,3vw,2.8rem);
}
/* =========================================================
TEMPLATE CARD
========================================================= */
.sc-shop-card{
min-width:0;
scroll-margin-top:115px;
}
.sc-shop-card__image{
position:relative;
width:92%;
margin:0 auto;
min-height:340px;
display:flex;
align-items:center;
justify-content:center;
overflow:visible;
background:transparent;
transition:
transform .28s var(--ease);
}
.sc-shop-card__image img{
position:relative;
z-index:2;
display:block;
width:94%;
height:auto;
max-width:100%;
object-fit:initial;
object-position:initial;
background:transparent;
transform:none;
transition:
transform .3s var(--ease);
}
.sc-shop-card:hover .sc-shop-card__image img{
transform:translateY(-1px);
}
.sc-shop-card__info{
padding-top:.9rem;
}
.sc-shop-card__name{
margin:0 !important;
font-family:var(--display) !important;
font-size:clamp(1.55rem,2vw,2.15rem) !important;
font-weight:650 !important;
font-optical-sizing:none !important;
font-variation-settings:
"opsz" 120,
"wght" 560,
"SOFT" 20,
"WONK" 1 !important;
line-height:1 !important;
letter-spacing:-.045em !important;
transition:
transform .28s var(--ease),
color .28s ease;
}
.sc-shop-card:hover .sc-shop-card__name{
transform:translateX(2px);
color:var(--ink) !important;
}
.sc-shop-card__meta{
display:flex;
flex-wrap:wrap;
gap:.35rem .55rem;
margin-top:.45rem;
color:var(--muted);
font-size:.66rem !important;
line-height:1.4 !important;
}
.sc-shop-card__meta span:not(:last-child)::after{
content:"·";
margin-left:.55rem;
}
.sc-shop-card__footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
margin-top:.65rem;
}
.sc-shop-card__collection{
display:inline-flex;
align-items:center;
min-height:25px;
padding:.3rem .48rem;
border:1px solid var(--ink);
color:var(--ink);
font-size:.52rem;
font-weight:700;
line-height:1.2;
letter-spacing:.08em;
text-transform:uppercase;
}
.sc-shop-card__link{
color:var(--ink) !important;
font-size:.58rem !important;
font-weight:700 !important;
line-height:1.2 !important;
letter-spacing:.08em !important;
text-decoration:underline !important;
text-underline-offset:.25rem;
text-transform:uppercase !important;
}
.sc-shop-card__link{
transition:
color .22s ease,
transform .22s ease;
}
.sc-shop-card__link:hover{
color:var(--ink) !important;
transform:translateX(2px);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media(max-width:1080px){
.sc-shop__wrap{
width:min(calc(100% - 4rem),1380px);
}
.sc-shop__catalog{
grid-template-columns:180px minmax(0,1fr);
}
.sc-shop__grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:760px){
.sc-shop{
padding-top:3.5rem;
}
.sc-shop__wrap{
width:min(calc(100% - 2.5rem),1380px);
}
.sc-shop__intro{
grid-template-columns:1fr;
gap:1.5rem;
}
.sc-shop__intro-copy{
justify-self:start;
}
.sc-shop__sidebar{
grid-template-columns:1fr;
gap:1rem;
}
.sc-shop__side-block{
grid-template-columns:1fr;
gap:.55rem;
}
.sc-shop__side-title{
min-width:0;
}
.sc-shop__grid{
grid-template-columns:1fr;
}
}
/* =========================================================
LIGHT ENTRY MOTION
========================================================= */
@keyframes sc-shop-rise{
from{
opacity:0;
transform:translateY(16px);
}
to{
opacity:1;
transform:none;
}
}
.sc-shop-card{
animation:sc-shop-rise .6s ease both;
}
.sc-shop-card:nth-child(2){animation-delay:.05s}
.sc-shop-card:nth-child(3){animation-delay:.1s}
.sc-shop-card:nth-child(4){animation-delay:.15s}
.sc-shop-card:nth-child(5){animation-delay:.2s}
.sc-shop-card:nth-child(6){animation-delay:.25s}
.sc-shop-card:nth-child(7){animation-delay:.3s}
.sc-shop-card:nth-child(8){animation-delay:.35s}
@media(prefers-reduced-motion:reduce){
.sc-shop-card,
.sc-shop-card__image,
.sc-shop-card__image::before,
.sc-shop-card__image img,
.sc-shop-card__name,
.sc-shop-card__link,
.sc-shop__links a{
animation:none !important;
transition:none !important;
}
}
/* =========================================================
TEMPLATE INFO — CENTERED UNDER IMAGE
========================================================= */
.sc-shop-card__info{
position:relative;
width:100%;
margin-top:1rem;
padding:1.1rem .4rem 0;
text-align:center;
}
.sc-shop-card__info::before{
content:"";
display:block;
width:42px;
height:3px;
margin:0 auto .8rem;
background:var(--lilac);
}
.sc-shop-card__eyebrow{
display:block;
margin:0 0 .45rem;
color:var(--muted);
font-size:.54rem;
font-weight:700;
line-height:1.2;
letter-spacing:.1em;
text-transform:uppercase;
}
.sc-shop-card__top{
display:block;
}
.sc-shop-card__name{
margin:0 !important;
font-family:var(--display) !important;
font-size:clamp(1.65rem,2vw,2.2rem) !important;
font-weight:650 !important;
font-optical-sizing:none !important;
font-variation-settings:
"opsz" 120,
"wght" 560,
"SOFT" 20,
"WONK" 1 !important;
line-height:1 !important;
letter-spacing:-.045em !important;
transition:transform .24s var(--ease);
}
.sc-shop-card:hover .sc-shop-card__name{
transform:translateY(-1px);
}
.sc-shop-card__meta{
justify-content:center;
margin-top:.45rem;
}
.sc-shop-card__footer{
justify-content:center;
flex-wrap:wrap;
gap:.6rem 1rem;
margin-top:.7rem;
}
.sc-shop-card__collection{
min-height:24px;
padding:.28rem .46rem;
border:1px solid rgba(10,16,32,.22);
background:transparent !important;
}
.sc-shop-card__link{
margin-top:0;
}
/* NATURAL IMAGE HEIGHT — NO CROPPING */
.sc-shop-card__visual{
width:100%;
}
.sc-shop-card__image{
min-height:0 !important;
aspect-ratio:auto !important;
}
.sc-shop-card__image img{
min-height:0 !important;
max-height:none !important;
}
/* NATURAL IMAGE HEIGHT — NO CROPPING */
.sc-shop-card__visual{
width:100%;
}
.sc-shop-card__image{
min-height:0 !important;
aspect-ratio:auto !important;
}
.sc-shop-card__image img{
min-height:0 !important;
max-height:none !important;
}
/* =========================================================
PLATFORM ANCHORS
Used by links from the rest of the site
========================================================= */
.sc-shop__platform-anchor{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
pointer-events:none;
scroll-margin-top:120px;
}
/* =========================================================
IMAGE PLACEHOLDER FALLBACK
========================================================= */
.sc-shop-card__image{
position:relative;
min-height:360px;
display:flex;
align-items:center;
justify-content:center;
}
.sc-shop-card__image-placeholder{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:1.5rem;
border:0;
color:var(--muted);
font-size:.58rem;
font-weight:700;
line-height:1.4;
letter-spacing:.09em;
text-align:center;
text-transform:uppercase;
}
.sc-shop-card__image img{
position:relative;
z-index:2;
}
/* Keep image stage visually consistent across all 3-column rows */
@media(min-width:1081px){
.sc-shop-card__image{
min-height:350px;
}
}
/* FIX: platform anchors must never occupy a template grid cell */
.sc-shop__grid > .sc-shop__platform-anchor{
position:absolute !important;
width:1px !important;
height:1px !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
pointer-events:none !important;
}
/* Keep anchor helpers from taking grid space */
.sc-shop__grid > .sc-shop__platform-anchor{
position:absolute !important;
width:1px !important;
height:1px !important;
overflow:hidden !important;
pointer-events:none !important;
}
@media(max-width:760px){
.sc-shop__filter-group{
align-items:flex-start;
}
.sc-shop__filter-heading{
width:100%;
min-width:0;
margin-bottom:.1rem;
}
}
/* FIX: platform anchors must never occupy a template grid cell */
.sc-shop__grid > .sc-shop__platform-anchor{
position:absolute !important;
width:1px !important;
height:1px !important;
margin:0 !important;
padding:0 !important;
overflow:hidden !important;
pointer-events:none !important;
}
/* Keep anchor helpers from taking grid space */
.sc-shop__grid > .sc-shop__platform-anchor{
position:absolute !important;
width:1px !important;
height:1px !important;
overflow:hidden !important;
pointer-events:none !important;
}
@media(max-width:760px){
.sc-shop__filter-group{
align-items:flex-start;
}
.sc-shop__filter-heading{
width:100%;
min-width:0;
margin-bottom:.1rem;
}
}
/* =========================================================
ONE-LINE DROPDOWN FILTER NAVIGATION
========================================================= */
.sc-shop__navfilter{
position:relative;
z-index:20;
display:flex;
align-items:center;
gap:1.4rem;
margin-bottom:clamp(2.6rem,4vw,3.6rem);
padding:.85rem 0;
border-top:1px solid var(--ink);
border-bottom:1px solid var(--ink);
}
.sc-shop__navinput{
position:absolute;
width:1px;
height:1px;
opacity:0;
pointer-events:none;
}
.sc-shop__all-link,
.sc-shop__navdrop summary{
position:relative;
display:inline-flex;
align-items:center;
gap:.45rem;
padding:.25rem 0;
color:var(--ink);
font-size:.68rem;
font-weight:700;
line-height:1.2;
letter-spacing:.06em;
text-transform:uppercase;
cursor:pointer;
transition:
color .2s ease,
transform .2s var(--ease);
}
.sc-shop__all-link:hover,
.sc-shop__navdrop summary:hover{
color:var(--blue);
transform:translateY(-1px);
}
.sc-shop__all-link::after,
.sc-shop__navdrop summary::before{
content:"";
position:absolute;
left:0;
right:0;
bottom:-.28rem;
height:2px;
background:var(--lilac);
transform:scaleX(0);
transform-origin:left center;
transition:transform .22s var(--ease);
}
#sc-filter-all:checked + .sc-shop__all-link::after{
transform:scaleX(1);
}
.sc-shop__navdrop{
position:relative;
}
.sc-shop__navdrop summary{
list-style:none;
}
.sc-shop__navdrop summary::-webkit-details-marker{
display:none;
}
.sc-shop__navdrop summary::after{
content:"↘";
font-size:.62rem;
transition:transform .2s var(--ease);
}
.sc-shop__navdrop[open] summary::after{
transform:rotate(45deg);
}
.sc-shop__navdrop[open] summary::before{
transform:scaleX(1);
}
.sc-shop__navmenu{
position:absolute;
top:calc(100% + .8rem);
left:0;
min-width:180px;
padding:.45rem;
border:1px solid var(--ink);
background:var(--paper);
box-shadow:4px 4px 0 var(--lilac);
}
.sc-shop__navmenu label{
display:block;
padding:.62rem .68rem;
color:var(--ink);
font-size:.66rem;
font-weight:600;
line-height:1.2;
cursor:pointer;
transition:
background .18s ease,
padding-left .18s ease;
}
.sc-shop__navmenu label:hover{
background:var(--white);
padding-left:.82rem;
}
/* active item inside dropdown */
.sc-shop__navinput:checked + label{
background:transparent;
}
.sc-shop__navinput:checked + label::before{
content:"•";
margin-right:.4rem;
color:var(--blue);
}
/* =========================================================
FILTER LOGIC
========================================================= */
/* Squarekicker — all */
.sc-shop:has(#sc-filter-squarekicker-all:checked)
.sc-shop-card:not([data-platform="squarekicker"]){
display:none !important;
}
/* Squarespace — all */
.sc-shop:has(#sc-filter-squarespace-all:checked)
.sc-shop-card:not([data-platform="squarespace"]){
display:none !important;
}
/* Squarekicker collections */
.sc-shop:has(#sc-filter-premium-plus:checked)
.sc-shop-card:not([data-collection="premium-plus"]){
display:none !important;
}
.sc-shop:has(#sc-filter-premium:checked)
.sc-shop-card:not([data-collection="premium"]){
display:none !important;
}
.sc-shop:has(#sc-filter-lite:checked)
.sc-shop-card:not([data-collection="lite"]){
display:none !important;
}
/* Squarespace collections */
.sc-shop:has(#sc-filter-signature:checked)
.sc-shop-card:not([data-collection="signature"]){
display:none !important;
}
.sc-shop:has(#sc-filter-native:checked)
.sc-shop-card:not([data-collection="native"]){
display:none !important;
}
/* Active parent dropdown indication */
.sc-shop:has(
#sc-filter-squarekicker-all:checked,
#sc-filter-premium-plus:checked,
#sc-filter-premium:checked,
#sc-filter-lite:checked
)
.sc-shop__navdrop:nth-of-type(1) summary::before{
transform:scaleX(1);
}
.sc-shop:has(
#sc-filter-squarespace-all:checked,
#sc-filter-signature:checked,
#sc-filter-native:checked
)
.sc-shop__navdrop:nth-of-type(2) summary::before{
transform:scaleX(1);
}
@media(max-width:760px){
.sc-shop__navfilter{
gap:1rem;
flex-wrap:wrap;
}
.sc-shop__navmenu{
min-width:160px;
}
}
/* =========================================================
PAGE SECTION SPLIT
========================================================= */
.sc-shop--hero{
padding:
clamp(4rem,7vw,6.5rem)
0
clamp(2.8rem,5vw,4.5rem);
}
.sc-shop--hero .sc-shop__intro{
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}
.sc-shop--collections{
padding:
clamp(2.4rem,4vw,3.5rem)
0
clamp(6rem,9vw,9rem);
border-top:1px solid rgba(10,16,32,.14);
}
.sc-shop--collections .sc-shop__catalog{
margin-top:0;
}
/* S2 standalone cleanup */
.sc-shop--collections{
width:100%;
}
/* S2 transparent background */
.sc-shop--collections,
.sc-shop--collections .sc-shop__wrap,
.sc-shop--collections .sc-shop__catalog{
background:transparent !important;
}
All
Squarekicker
Squarespace
Add Mocha Latte image
Squarespace · Signature
Mocha Latte
Squarespace
10 pages
$297
Add Bloom image
Squarespace · Native
Bloom
Squarespace
Native
Add Marrakech image
Squarespace · Native
Marrakech
Squarespace
Native
Add Feras image
Squarespace · Native
Feras
Squarespace
Native
Add Lilac image
Squarespace · Native
Lilac
Squarespace
Native
Add sixth Squarespace template image
Squarespace · Native
Template 06
Squarespace
Native
Add Scatto image
Squarekicker · Premium+
Scatto
Squarekicker
$599
Add FEZ image
Squarekicker · Premium+
FEZ
Squarekicker
$599
Add OmPulse image
Squarekicker · Premium
OmPulse
Squarekicker
$599
Add TH’ Marketers image
Squarekicker · Premium
TH’ Marketers
Squarekicker
$599
Add Marco Vale image
Squarekicker · Lite
Marco Vale
Squarekicker
One page
Add NOVA image
Squarekicker · Lite
NOVA
Squarekicker
One page
