ba7a7c89a2
Icon rebuilt as a full-bleed 1200x1200 square (Shopify rounds corners itself). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
163 lines
9.3 KiB
CSS
163 lines
9.3 KiB
CSS
/* Offerlyst storefront styles.
|
|
Inherits the theme: fonts, text colour and background come from the page. Lines are a mix of the text
|
|
colour, so they work on light and dark themes alike. The merchant can set an accent and a radius (Settings).
|
|
The one decorative device is the coupon stub on the badge: festival offers as tear-off coupons. */
|
|
|
|
:root {
|
|
--bo-radius: 8px;
|
|
}
|
|
|
|
.bo-section,
|
|
.bo-box,
|
|
.bo-hints,
|
|
.bo-page {
|
|
--bo-ink: currentColor;
|
|
--bo-accent-fallback: rgb(var(--color-button, 0 0 0));
|
|
--bo-accent-color: var(--bo-accent, var(--bo-accent-fallback));
|
|
--bo-line: color-mix(in srgb, currentColor 14%, transparent);
|
|
--bo-soft: color-mix(in srgb, currentColor 5%, transparent);
|
|
--bo-muted: color-mix(in srgb, currentColor 68%, transparent);
|
|
--bo-on-accent: rgb(var(--color-button-text, 255 255 255));
|
|
}
|
|
|
|
.bo-visually-hidden {
|
|
position: absolute !important;
|
|
width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
|
|
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
|
}
|
|
|
|
.bo-section { margin: 2.5rem auto; max-width: var(--page-width, 120rem); padding: 0 1.5rem; }
|
|
.bo-section__title { margin: 0; line-height: 1.2; }
|
|
.bo-section__sub { margin: .25rem 0 0; color: var(--bo-muted); }
|
|
.bo-link { color: inherit; text-underline-offset: .2em; white-space: nowrap; }
|
|
|
|
/* ---------- grid & strip ---------- */
|
|
.bo-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.25rem; }
|
|
@media (min-width: 600px) { .bo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
|
@media (min-width: 990px) { .bo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|
|
|
|
.bo-strip__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
|
|
.bo-strip__track {
|
|
list-style: none; margin: 1.25rem 0 0; padding: 0 0 .5rem;
|
|
display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 1rem;
|
|
overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
|
|
}
|
|
@media (min-width: 600px) { .bo-strip__track { grid-auto-columns: calc((100% - 1rem) / 2.15); } }
|
|
@media (min-width: 990px) { .bo-strip__track { grid-auto-columns: calc((100% - 3rem) / 4); } }
|
|
.bo-strip__item { scroll-snap-align: start; display: flex; }
|
|
|
|
/* ---------- card ---------- */
|
|
.bo-card {
|
|
position: relative; display: flex; flex-direction: column; width: 100%;
|
|
border: 1px solid var(--bo-line); border-radius: var(--bo-radius); overflow: hidden;
|
|
}
|
|
.bo-card__media { display: block; aspect-ratio: 4 / 3; background: var(--bo-soft); }
|
|
.bo-card__media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.bo-card__thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; height: 100%; }
|
|
.bo-card__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.bo-card__thumbs--1 { grid-template-columns: 1fr; }
|
|
.bo-card__thumbs--3 img:first-child { grid-row: span 2; }
|
|
.bo-card__body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem 1.15rem; flex: 1; }
|
|
.bo-card__title { margin: 0; font-size: 1.15em; line-height: 1.3; }
|
|
.bo-card__title a { color: inherit; text-decoration: none; }
|
|
.bo-card__title a::after { content: ""; position: absolute; inset: 0; } /* whole card is clickable */
|
|
.bo-card__title a:focus-visible { outline: none; }
|
|
.bo-card:has(.bo-card__title a:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
|
|
.bo-card__deal { margin: 0; font-weight: 600; }
|
|
.bo-card__prices { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
|
|
.bo-card__now { font-size: 1.25em; font-weight: 700; }
|
|
.bo-card__was { color: var(--bo-muted); }
|
|
.bo-card__count, .bo-card__ends { color: var(--bo-muted); font-size: .9em; }
|
|
.bo-card__ends { margin: 0; }
|
|
.bo-card .bo-button { margin-top: auto; position: relative; z-index: 1; }
|
|
|
|
/* ---------- the coupon stub (signature) ----------
|
|
A tear-off ticket with notches cut on both short sides and a dashed perforation line. */
|
|
.bo-stub {
|
|
position: absolute; top: .75rem; left: 0; margin: 0; z-index: 1;
|
|
--notch: 6px;
|
|
padding: .3rem .85rem .3rem .7rem;
|
|
background: var(--bo-accent-color); color: var(--bo-on-accent);
|
|
font-size: .8rem; font-weight: 700; line-height: 1.3;
|
|
-webkit-mask: radial-gradient(circle var(--notch) at 100% 50%, transparent 98%, #000) right / 100% 100% no-repeat;
|
|
mask: radial-gradient(circle var(--notch) at 100% 50%, transparent 98%, #000) right / 100% 100% no-repeat;
|
|
border-radius: 0 2px 2px 0;
|
|
}
|
|
.bo-stub span { display: block; padding-right: .55rem; border-right: 1.5px dashed color-mix(in srgb, currentColor 60%, transparent); }
|
|
|
|
/* ---------- buttons ---------- */
|
|
.bo-button {
|
|
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
|
|
min-height: 44px; padding: .65rem 1.25rem; border: 0; border-radius: var(--bo-radius);
|
|
background: var(--bo-accent-color); color: var(--bo-on-accent);
|
|
font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
|
|
}
|
|
.bo-button:hover { filter: brightness(1.08); }
|
|
.bo-button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
|
|
.bo-button[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
|
|
|
|
.bo-empty { padding: 2rem 0; display: grid; gap: 1rem; justify-items: start; }
|
|
.bo-empty p { margin: 0; }
|
|
.bo-powered { margin-top: 1.5rem; font-size: .8rem; color: var(--bo-muted); }
|
|
.bo-powered a { color: inherit; }
|
|
|
|
/* ---------- product page box ---------- */
|
|
.bo-box { margin: 1.25rem 0; border: 1px dashed var(--bo-line); border-radius: var(--bo-radius); padding: .9rem 1rem; }
|
|
.bo-box__title { margin: 0 0 .4rem; font-size: 1em; }
|
|
.bo-box ul { list-style: none; margin: 0; padding: 0; }
|
|
.bo-box li + li { border-top: 1px solid var(--bo-line); }
|
|
.bo-box__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; min-height: 44px; align-items: center; padding: .4rem 0; color: inherit; text-decoration: none; }
|
|
.bo-box__row:hover .bo-box__name { text-decoration: underline; }
|
|
.bo-box__name { font-weight: 600; }
|
|
.bo-box__deal { color: var(--bo-muted); }
|
|
|
|
/* ---------- cart hints ---------- */
|
|
.bo-hints ul { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; }
|
|
.bo-hint {
|
|
display: block; padding: .75rem 1rem; border-radius: var(--bo-radius); min-height: 44px;
|
|
background: var(--bo-soft); border-left: 3px solid var(--bo-accent-color); color: inherit; text-decoration: none;
|
|
}
|
|
.bo-hint:hover { text-decoration: underline; }
|
|
|
|
/* ---------- bundle page (app proxy) ---------- */
|
|
.bo-page { max-width: var(--page-width, 120rem); margin: 2rem auto 4rem; padding: 0 1.5rem; display: grid; gap: 2rem; }
|
|
@media (min-width: 990px) { .bo-page { grid-template-columns: 5fr 6fr; gap: 3.5rem; align-items: start; } }
|
|
.bo-page__hero { position: relative; border-radius: var(--bo-radius); overflow: hidden; background: var(--bo-soft); aspect-ratio: 4 / 3; }
|
|
.bo-page__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
.bo-page__hero .bo-card__thumbs { height: 100%; }
|
|
.bo-page__title { margin: 1rem 0 .25rem; line-height: 1.15; }
|
|
.bo-page__deal { margin: 0; font-size: 1.35em; font-weight: 700; }
|
|
.bo-page__desc { margin: 1rem 0; max-width: 60ch; }
|
|
.bo-page__ends { margin: .5rem 0 0; color: var(--bo-muted); }
|
|
.bo-page__note { margin: .5rem 0 0; font-size: .9em; color: var(--bo-muted); }
|
|
.bo-page__h { margin: 0 0 .75rem; font-size: 1.15em; }
|
|
.bo-page__group + .bo-page__group { margin-top: 1.75rem; }
|
|
|
|
.bo-choice { display: grid; grid-template-columns: 64px 1fr auto; gap: .9rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--bo-line); }
|
|
.bo-choice img, .bo-choice__ph { width: 64px; height: 64px; object-fit: cover; border-radius: calc(var(--bo-radius) / 1.5); background: var(--bo-soft); display: block; }
|
|
.bo-choice__name { color: inherit; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
|
|
.bo-choice__name:hover { text-decoration: underline; }
|
|
.bo-choice__price { display: block; color: var(--bo-muted); font-size: .9em; }
|
|
.bo-choice__qty { font-weight: 600; white-space: nowrap; }
|
|
.bo-choice--off { opacity: .5; }
|
|
|
|
.bo-qty { display: inline-flex; align-items: center; border: 1px solid var(--bo-line); border-radius: 999px; overflow: hidden; }
|
|
.bo-qty button { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; font-size: 1.2rem; cursor: pointer; }
|
|
.bo-qty button:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
|
|
.bo-qty input {
|
|
width: 3rem; height: 44px; border: 0; background: transparent; color: inherit; text-align: center;
|
|
font: inherit; font-size: 16px; font-weight: 600; -moz-appearance: textfield; appearance: textfield;
|
|
}
|
|
.bo-qty input::-webkit-inner-spin-button, .bo-qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
|
|
|
|
.bo-totals { margin: 1.25rem 0; padding: 1rem 1.1rem; border-radius: var(--bo-radius); background: var(--bo-soft); display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; }
|
|
.bo-totals dt, .bo-totals dd { margin: 0; }
|
|
.bo-totals dd { text-align: right; font-variant-numeric: tabular-nums; }
|
|
.bo-totals__now { font-size: 1.3em; font-weight: 700; }
|
|
.bo-totals__save { font-weight: 700; }
|
|
.bo-counter { margin: 1rem 0 .5rem; font-weight: 600; }
|
|
.bo-error { margin: .75rem 0 0; color: rgb(var(--color-error, 177 39 4)); font-weight: 600; }
|
|
.bo-submit { width: 100%; max-width: 26rem; margin-top: .5rem; }
|
|
|
|
@media (prefers-reduced-motion: reduce) { .bo-strip__track { scroll-behavior: auto; } }
|