Implemented phase 1 for the POC prototype in the Website service.
This commit is contained in:
javier committed
1 parent
6d7ab4bcba
commit
ea89ea892a
37 files changed
+4173
-43
No files matched your search
@@ -1,23 +1,176 @@
|
||||
/* CCN — landing page. */
|
||||
|
||||
.home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-10);
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 64px;
|
||||
padding-bottom: var(--space-8);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.hero__text {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
max-width: 640px;
|
||||
padding: var(--space-1) 0 var(--space-2);
|
||||
max-width: 680px;
|
||||
}
|
||||
|
||||
.hero__text .type-lead {
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
.hero__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
padding-top: var(--space-3);
|
||||
padding-top: var(--space-2);
|
||||
}
|
||||
|
||||
/* The fanned covers join the hero on desktop. */
|
||||
.hero__covers {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.formats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.formats__tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--card);
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.formats__tile:hover {
|
||||
border-color: var(--ink);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.formats__name {
|
||||
font-family: var(--font-display);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.home__row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.promises {
|
||||
display: grid;
|
||||
gap: var(--space-8);
|
||||
padding-top: var(--space-10);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.promises__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.promises__title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.promises__text {
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.promises {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.formats {
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.formats__tile {
|
||||
padding: var(--space-5) 22px;
|
||||
}
|
||||
|
||||
.formats__name {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.home {
|
||||
gap: var(--space-14);
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.hero {
|
||||
min-height: 420px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.hero__text {
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.hero__covers {
|
||||
position: relative;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: 520px;
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
.hero__covers .cover {
|
||||
position: absolute;
|
||||
box-shadow: var(--shadow-cover-sm);
|
||||
}
|
||||
|
||||
.hero__covers .cover--left {
|
||||
top: 40px;
|
||||
left: 0;
|
||||
width: 200px;
|
||||
transform: rotate(-6deg);
|
||||
}
|
||||
|
||||
.hero__covers .cover--centre {
|
||||
top: 0;
|
||||
left: 160px;
|
||||
z-index: 1;
|
||||
width: 220px;
|
||||
box-shadow: var(--shadow-cover);
|
||||
}
|
||||
|
||||
.hero__covers .cover--right {
|
||||
top: 56px;
|
||||
left: 340px;
|
||||
width: 190px;
|
||||
transform: rotate(7deg);
|
||||
}
|
||||
|
||||
.formats {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.home__row {
|
||||
gap: var(--space-5);
|
||||
padding: var(--space-10) 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,217 @@
|
||||
/* CCN — listing detail page. */
|
||||
|
||||
.listing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.listing__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
.listing__media {
|
||||
width: min(100%, 320px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cover--hero {
|
||||
box-shadow: var(--shadow-cover);
|
||||
}
|
||||
|
||||
.listing__main {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.listing__intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.listing__chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.listing__chips .chip {
|
||||
padding: var(--space-1) 9px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.listing__byline {
|
||||
color: var(--ink-soft);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.buy-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.buy-box__head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.buy-box__price {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 6px 14px;
|
||||
}
|
||||
|
||||
.buy-box__terms {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.buy-box__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.buy-box__actions .button--primary {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.seller {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: 18px var(--space-5);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.seller__text {
|
||||
display: flex;
|
||||
flex: 1 1 220px;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.seller__name {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.seller__name a {
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.seller__name a:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.listing__section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.listing__section .type-eyebrow {
|
||||
color: var(--ink);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(96px, 180px) minmax(0, 1fr);
|
||||
column-gap: var(--space-6);
|
||||
border-bottom: 1px solid var(--line);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.details dt,
|
||||
.details dd {
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.details dt {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.listing__notes {
|
||||
color: var(--ink-soft);
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.listing__related {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
padding-top: var(--space-8);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.listing__body {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.listing__media {
|
||||
position: sticky;
|
||||
top: var(--space-6);
|
||||
flex-shrink: 0;
|
||||
width: 320px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.buy-box__actions .button--primary {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.listing {
|
||||
gap: var(--space-10);
|
||||
}
|
||||
|
||||
.listing__body {
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
.listing__media {
|
||||
width: 520px;
|
||||
}
|
||||
|
||||
.listing__main {
|
||||
gap: var(--space-7);
|
||||
}
|
||||
|
||||
.listing__byline {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.buy-box {
|
||||
padding: var(--space-7);
|
||||
}
|
||||
|
||||
.listing__related {
|
||||
padding-top: var(--space-10);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
/* CCN — search results page. */
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.search__head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-4);
|
||||
padding-bottom: var(--space-5);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.search__heading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search__heading .type-h1 {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.search__count {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.search__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.search__results {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search__pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
/* The filter rail: a disclosure below desktop, always open on it. */
|
||||
.filters__toggle {
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.filters__toggle::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filters__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
padding-top: var(--space-5);
|
||||
}
|
||||
|
||||
.filters__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.filters__title {
|
||||
color: var(--ink);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.filters__clear {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.filters__group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.filters__group legend {
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.filters__range {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.filters__field {
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.search {
|
||||
gap: var(--space-7);
|
||||
padding-top: var(--space-8);
|
||||
}
|
||||
|
||||
.search__body {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-10);
|
||||
}
|
||||
|
||||
.filters {
|
||||
flex-shrink: 0;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.filters__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filters::details-content {
|
||||
display: block;
|
||||
content-visibility: visible;
|
||||
}
|
||||
|
||||
.filters__form {
|
||||
gap: var(--space-7);
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -80,6 +80,9 @@
|
||||
--cover-rust: #6b3a1f;
|
||||
--cover-slate: #26363b;
|
||||
--cover-plum: #43304f;
|
||||
--cover-brick: #7a2e24;
|
||||
--cover-olive: #4a4326;
|
||||
--cover-ink: #1e3347;
|
||||
|
||||
/* Type families */
|
||||
--font-display: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
|
||||
@@ -559,6 +562,17 @@ input[type="radio"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.button--bare {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.button--bare:hover {
|
||||
border-color: transparent;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.button:disabled,
|
||||
.button[aria-disabled="true"] {
|
||||
border-color: var(--line);
|
||||
@@ -639,9 +653,25 @@ input[type="radio"] {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* An applied filter: pressing it removes it. */
|
||||
.pill--active {
|
||||
gap: var(--space-1);
|
||||
border-color: var(--header);
|
||||
background: var(--header);
|
||||
color: var(--on-dark);
|
||||
}
|
||||
|
||||
.pill--active:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.pill {
|
||||
height: var(--control-xs);
|
||||
padding: 0 var(--space-3);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -675,6 +705,12 @@ input[type="radio"] {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.input--sm {
|
||||
height: var(--control-sm);
|
||||
padding: 0 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
textarea.input {
|
||||
height: auto;
|
||||
min-height: 96px;
|
||||
@@ -749,6 +785,26 @@ textarea.input {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.monogram--lg {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.monogram--xl {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.monogram--xl {
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
font-size: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -1330,6 +1386,451 @@ textarea.input {
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Catalogue components
|
||||
========================================================================== */
|
||||
|
||||
/* Placeholder covers. The face scales with the cover's width through container units. */
|
||||
.cover {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 2 / 3;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--cover-ground, var(--cover-navy));
|
||||
color: var(--cover-lettering, var(--gold));
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.cover::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 42% -15% auto;
|
||||
height: 22%;
|
||||
background: rgba(255, 255, 255, 0.07);
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
|
||||
.cover__face {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 6.5cqw;
|
||||
}
|
||||
|
||||
.cover__title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: var(--font-lettering);
|
||||
font-size: 16cqw;
|
||||
line-height: 0.9;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.cover__foot {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 4cqw;
|
||||
}
|
||||
|
||||
.cover__imprint {
|
||||
color: var(--cover-imprint, #c9d3e4);
|
||||
font-size: max(9px, 4cqw);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.14em;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.cover__number {
|
||||
color: #ffffff;
|
||||
font-family: var(--font-lettering);
|
||||
font-size: 16cqw;
|
||||
line-height: 0.9;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cover__number--text {
|
||||
font-size: 12cqw;
|
||||
}
|
||||
|
||||
.cover--navy { --cover-ground: var(--cover-navy); --cover-lettering: var(--gold); --cover-imprint: #c9d3e4; }
|
||||
.cover--wine { --cover-ground: var(--cover-wine); --cover-lettering: #f0e3cf; --cover-imprint: #e4cfc0; }
|
||||
.cover--forest { --cover-ground: var(--cover-forest); --cover-lettering: #e4c35c; --cover-imprint: #c6d8ce; }
|
||||
.cover--rust { --cover-ground: var(--cover-rust); --cover-lettering: #f2d9a8; --cover-imprint: #e8d2b8; }
|
||||
.cover--slate { --cover-ground: var(--cover-slate); --cover-lettering: #d9e6e4; --cover-imprint: #c5d6d4; }
|
||||
.cover--plum { --cover-ground: var(--cover-plum); --cover-lettering: #f2c14e; --cover-imprint: #d8cce0; }
|
||||
.cover--brick { --cover-ground: var(--cover-brick); --cover-lettering: #f5e7d3; --cover-imprint: #ecd3c4; }
|
||||
.cover--olive { --cover-ground: var(--cover-olive); --cover-lettering: #efe4b8; --cover-imprint: #ddd3a8; }
|
||||
.cover--ink { --cover-ground: var(--cover-ink); --cover-lettering: #c9d9e8; --cover-imprint: #b5c8da; }
|
||||
|
||||
/* Each tone carries its own motif. */
|
||||
.cover--wine::before {
|
||||
inset: auto -20% -14% auto;
|
||||
width: 70%;
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.cover--forest::before,
|
||||
.cover--olive::before {
|
||||
inset: 0 0 auto;
|
||||
height: 35%;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.cover--rust::before,
|
||||
.cover--brick::before {
|
||||
inset: auto -15% 12%;
|
||||
height: 16%;
|
||||
background: rgba(0, 0, 0, 0.14);
|
||||
transform: rotate(6deg);
|
||||
}
|
||||
|
||||
.cover--plum::before,
|
||||
.cover--ink::before {
|
||||
inset: 0 auto 0 0;
|
||||
width: 10%;
|
||||
height: auto;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.cover--plum .cover__face,
|
||||
.cover--ink .cover__face {
|
||||
padding-left: 16cqw;
|
||||
}
|
||||
|
||||
/* Listing cards */
|
||||
.listing-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.listing-card__cover {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.listing-card__save {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(245, 243, 238, 0.92);
|
||||
color: #191713;
|
||||
}
|
||||
|
||||
.listing-card__save:hover {
|
||||
background: #ffffff;
|
||||
color: #b3271e;
|
||||
}
|
||||
|
||||
.listing-card__title {
|
||||
color: var(--ink);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.listing-card__title:hover {
|
||||
color: var(--ink);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.listing-card__meta,
|
||||
.listing-card__shop {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.listing-card__meta {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.listing-card__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.listing-card__shop {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.listing-card__shop:hover {
|
||||
color: var(--ink);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.listing-card {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* Beside the filter rail, the grid runs four across. */
|
||||
.card-grid--search {
|
||||
--grid-columns: 4;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding-top: var(--space-2);
|
||||
}
|
||||
|
||||
.pagination__page,
|
||||
.pagination__next {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: var(--control-md);
|
||||
height: var(--control-md);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--ink);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pagination__page:hover {
|
||||
background: var(--tint);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.pagination__page[aria-current] {
|
||||
background: var(--header);
|
||||
color: var(--on-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pagination__next {
|
||||
margin-left: 10px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid var(--ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pagination__next:hover {
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
}
|
||||
|
||||
/* Breadcrumb */
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
color: var(--ink);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.breadcrumb__current {
|
||||
color: var(--ink);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: var(--space-1);
|
||||
overflow-x: auto;
|
||||
border-bottom: 1px solid var(--line);
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabs__tab {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
height: var(--control-md);
|
||||
padding: 0 var(--space-4);
|
||||
border-bottom: 3px solid transparent;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tabs__tab:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.tabs__tab[aria-current] {
|
||||
border-bottom-color: var(--ink);
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Select, and the sort control built on it */
|
||||
.select {
|
||||
height: 40px;
|
||||
padding: 0 var(--space-3);
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--card);
|
||||
color: var(--ink);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sort {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sort__label {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Checkbox rows */
|
||||
.check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 24px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Segmented radio control */
|
||||
.segmented {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--ink);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.segmented__option {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1 1 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.segmented__option + .segmented__option {
|
||||
border-left: 1px solid var(--ink);
|
||||
}
|
||||
|
||||
.segmented__option input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.segmented__option span {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--control-sm);
|
||||
padding: 0 var(--space-2);
|
||||
color: var(--ink);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.segmented__option input:checked + span {
|
||||
background: var(--header);
|
||||
color: var(--on-dark);
|
||||
}
|
||||
|
||||
.segmented__option input:focus-visible + span {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* Empty states */
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-8) var(--space-6);
|
||||
border: 1px dashed var(--rule);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
/* The gate note under gated actions */
|
||||
.gate-note {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: var(--space-3) 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--paper);
|
||||
color: var(--ink-soft);
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.gate-note .icon {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.gate-note__link {
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.verified {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
color: var(--good);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Helpers
|
||||
========================================================================== */
|
||||
@@ -1339,6 +1840,11 @@ textarea.input {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hidden once scripts run: the submit buttons of forms that then submit themselves. */
|
||||
.js .js-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden visually, still read out. */
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
/* CCN — shop page. */
|
||||
|
||||
.shop {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.shop__head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-4);
|
||||
padding-bottom: var(--space-6);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.shop__intro {
|
||||
display: flex;
|
||||
flex: 1 1 260px;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.shop__name {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-2) 14px;
|
||||
}
|
||||
|
||||
.shop__name .chip {
|
||||
gap: 5px;
|
||||
padding: 5px 9px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.shop__standing {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.shop__about {
|
||||
max-width: 720px;
|
||||
color: var(--ink-soft);
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.shop__stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2) var(--space-5);
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.shop__stats strong {
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.shop__actions {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.shop__gate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.shop__toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.shop__quick {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.shop__sort {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.shop__sort .select {
|
||||
height: var(--control-sm);
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.shop__head {
|
||||
gap: var(--space-7);
|
||||
}
|
||||
|
||||
.shop__actions {
|
||||
flex: 0 0 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.shop {
|
||||
gap: var(--space-7);
|
||||
padding-top: var(--space-10);
|
||||
}
|
||||
|
||||
.shop__head {
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: var(--space-8);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
// CCN — shared script. Every screen works without it; it only removes a click here and there.
|
||||
|
||||
document.documentElement.classList.add("js");
|
||||
|
||||
// Selects marked `data-autosubmit` submit their form on change.
|
||||
for (const select of document.querySelectorAll("select[data-autosubmit]")) {
|
||||
select.addEventListener("change", () => select.form?.requestSubmit());
|
||||
}
|
||||
|
||||
// The filter rail is a disclosure, open on desktop. Browsers without `::details-content` need it opened here.
|
||||
const filters = document.querySelector("details.filters");
|
||||
const desktop = window.matchMedia("(min-width: 1024px)");
|
||||
|
||||
if (filters) {
|
||||
const sync = () => {
|
||||
if (desktop.matches) {
|
||||
filters.open = true;
|
||||
}
|
||||
};
|
||||
|
||||
sync();
|
||||
desktop.addEventListener("change", sync);
|
||||
}
|
||||
Reference in new issue
Block a user