/* Fonts loaded via in — no @import needed */
/* Farbe kommt ausschliesslich aus css/tokens.css.
Kein Hex-Wert in dieser Datei. */
/* ============================================================
SPACING SCALE
============================================================ */
:root {
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-6: 24px;
--sp-8: 32px;
--sp-12: 48px;
--sp-16: 64px;
--sp-24: 96px;
--sp-32: 128px;
}
/* ============================================================
RESET
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ============================================================
ROOT / SCROLL
============================================================ */
html {
scroll-behavior: smooth;
font-size: 18px;
}
body {
font-family: 'Source Serif 4', Georgia, serif;
font-weight: 400;
line-height: 1.6;
background-color: var(--paper);
color: var(--ink);
overflow-x: hidden;
}
/* ============================================================
TYPOGRAPHY — LOAF & LINK ZONE
============================================================ */
.ll-section h1,
.ll-section h2,
.ll-section h3 {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.05;
color: var(--ink);
}
.ll-section h1 { font-size: clamp(3rem, 8vw, 7rem); }
.ll-section h2 { font-size: clamp(2rem, 5vw, 4rem); }
.ll-section h3 { font-size: clamp(1.4rem, 3vw, 2.4rem); }
.ll-section h4,
.ll-section h5,
.ll-section h6 {
font-family: 'Source Serif 4', Georgia, serif;
font-weight: 600;
color: var(--ink);
line-height: 1.2;
}
.ll-section p {
font-weight: 300;
color: var(--muted);
max-width: 64ch;
}
.ll-section a {
color: var(--signal);
text-decoration: none;
transition: color 0.2s ease;
}
.ll-section a:hover {
color: var(--signal-deep);
}
/* DM Mono — labels, tags, metadata */
.ll-label {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
}
/* ============================================================
TYPOGRAPHY — SCHWEINE DIETER ZONE
============================================================ */
.sd-section h1,
.sd-section h2,
.sd-section h3,
.sd-section h4,
.sd-section h5,
.sd-section h6 {
font-family: 'Bricolage Grotesque', sans-serif;
line-height: 1.15;
color: var(--ink);
}
.sd-section h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 800; }
.sd-section h2 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 700; }
.sd-section h3 { font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 700; }
.sd-section h4 { font-size: 1.25rem; font-weight: 400; font-style: italic; }
.sd-section p {
font-weight: 300;
color: var(--muted);
max-width: 66ch;
}
.sd-section a {
color: var(--signal);
text-decoration: none;
transition: color 0.2s ease;
}
.sd-section a:hover {
color: var(--signal-deep);
}
/* Bebas Neue eyebrow in showcase */
.sd-label {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.18em;
color: var(--ink);
text-transform: uppercase;
}
/* ============================================================
SECTION SHELLS
============================================================ */
.ll-section {
padding: 7rem 6vw;
background: var(--paper);
}
.sd-section {
padding: 7rem 6vw;
background: var(--paper);
}
/* ============================================================
CINEMATIC TRANSITION BAND
The gradient bridge between the two worlds.
Place a between .ll-section and
the first .sd-section.
============================================================ */
.world-seam {
height: 180px;
background: linear-gradient(
to bottom,
var(--paper) 0%,
var(--ink) 55%,
var(--paper) 100%
);
pointer-events: none;
}
/* ============================================================
ANIMATIONS
============================================================ */
@keyframes hero-fadeup {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(8px); }
}
/* ============================================================
FIXED NAV
============================================================ */
.ll-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 6vw;
background: color-mix(in srgb, var(--paper) 85%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--rule);
}
/* right-side cluster: nav links + lang switcher + CTA */
.ll-nav,
.ll-nav * {
pointer-events: auto;
}
.ll-nav__right {
display: flex;
align-items: center;
gap: 1.5rem;
margin-left: 2.5rem;
}
.ll-nav__links {
display: flex;
align-items: center;
gap: 1.5rem;
}
.ll-nav__links a {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
transition: color 0.2s ease;
white-space: nowrap;
}
.ll-nav__links a:hover {
color: var(--signal);
}
/* ============================================================
LANGUAGE SWITCHER
============================================================ */
.lang-switcher {
display: flex;
align-items: center;
gap: 4px;
}
.lang-btn {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.15em;
padding: 5px 10px;
border-radius: 8px;
border: 1px solid var(--rule);
background: transparent;
color: var(--muted);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
line-height: 1;
}
.lang-btn:hover:not(.active) {
border-color: var(--ink);
color: var(--ink);
}
.lang-btn.active {
background: var(--signal);
color: var(--signal-on);
border-color: var(--signal);
}
.ll-nav__monogram {
font-family: 'DM Mono', monospace;
font-size: 0.9rem;
color: var(--ink);
letter-spacing: 0.08em;
}
.ll-nav__wordmark {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 1rem;
letter-spacing: 0.3em;
color: var(--muted);
position: absolute;
left: 50%;
transform: translateX(-50%);
/* Centred title sits on top of the nav links on anything narrower than
~2370px — only show it where the right cluster stays clear of centre */
display: none;
}
@media (min-width: 2400px) {
.ll-nav__wordmark {
display: block;
}
}
.ll-nav__cta {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
color: var(--ink);
text-decoration: none;
letter-spacing: 0.06em;
transition: color 0.2s ease;
}
.ll-nav__cta:hover {
color: var(--signal-deep);
}
/* ============================================================
HERO
============================================================ */
.ll-hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
background-color: var(--paper);
background-image:
linear-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px);
background-size: 60px 60px;
overflow: hidden;
}
/* ── Hero video background ── */
.hero-video-wrap {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-overlay {
position: absolute;
inset: 0;
/* text sits on the left — shade only what it needs and
let the video breathe on the right */
background: linear-gradient(
100deg,
color-mix(in srgb, var(--paper) 62%, transparent) 0%,
color-mix(in srgb, var(--paper) 45%, transparent) 45%,
color-mix(in srgb, var(--paper) 15%, transparent) 100%
);
}
.ll-hero > *:not(.hero-video-wrap) {
z-index: 1;
}
/* deco + footer position themselves absolutely — forcing
position:relative on them pushed the hero text out of view */
.ll-hero > *:not(.hero-video-wrap):not(.ll-hero__deco):not(.ll-hero__footer) {
position: relative;
}
.ll-hero__deco {
position: absolute;
top: 50%;
right: 4vw;
transform: translateY(-50%);
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 20vw;
line-height: 1;
color: color-mix(in srgb, var(--ink) 4%, transparent);
pointer-events: none;
user-select: none;
}
.ll-hero__content {
max-width: 800px;
padding: 0 6vw;
padding-top: 6rem; /* clear fixed nav */
}
/* staggered load animation */
.hero-anim {
opacity: 0;
animation: hero-fadeup 0.8s ease forwards;
animation-delay: var(--delay, 0s);
}
.ll-hero__tag {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 1.5rem;
}
.ll-hero__h1 {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: clamp(4rem, 10vw, 9rem);
line-height: 0.95;
letter-spacing: 0.02em;
color: var(--ink);
}
.ll-hero__h1 span {
color: var(--ink);
}
.ll-hero__sub {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 1.2rem;
font-weight: 300;
/* sits on the video since the overlay went translucent —
the theme gray drowned over bright footage */
color: var(--muted);
text-shadow: 0 1px 14px var(--shadow-text);
max-width: 480px;
margin-top: 1.5rem;
}
.ll-hero__stats {
display: flex;
flex-wrap: wrap;
gap: 3rem;
margin-top: 3rem;
}
.ll-stat {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.ll-stat__num {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 3rem;
line-height: 1;
color: var(--ink);
}
.ll-stat__label {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
text-shadow: 0 1px 10px var(--shadow-text);
}
.ll-hero__btn {
display: inline-block;
margin-top: 2.5rem;
padding: 14px 32px;
font-family: 'Source Serif 4', Georgia, serif;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
border: 1px solid var(--ink);
background: transparent;
transition: background 0.25s ease, color 0.25s ease;
}
.ll-hero__btn:hover {
background: var(--ink);
color: var(--paper);
}
/* hero bottom scroll prompt */
.ll-hero__footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding-bottom: 2rem;
}
.ll-hero__rule {
width: 100%;
height: 1px;
background: var(--rule);
margin-bottom: 1.25rem;
}
.ll-hero__scroll-text {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
max-width: none;
}
.ll-bounce {
display: inline-block;
animation: bounce 1.8s ease-in-out infinite;
}
/* ============================================================
SHOWCASE BRIDGE
============================================================ */
.showcase-bridge {
min-height: 160px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, var(--paper), var(--paper));
padding: 0 6vw;
}
.showcase-bridge__inner {
width: 100%;
max-width: 900px;
}
.showcase-bridge__lines {
display: flex;
align-items: center;
gap: 2rem;
}
.showcase-bridge__line {
flex: 1;
height: 1px;
background: var(--rule);
opacity: 0.3;
}
.showcase-bridge__text {
text-align: center;
flex-shrink: 0;
}
.showcase-bridge__tag {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--ink);
text-transform: uppercase;
max-width: none;
}
.showcase-bridge__name {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 2.5rem;
font-style: italic;
font-weight: 400;
color: var(--ink);
margin-top: 0.4rem;
line-height: 1.15;
max-width: none;
}
.showcase-bridge__sub {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.2em;
color: var(--muted);
margin-top: 0.3rem;
max-width: none;
}
/* ============================================================
SHOWCASE INTRO — SD SECTION
============================================================ */
.sd-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.sd-intro__eyebrow {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 1.1rem;
max-width: none;
}
.sd-intro__h2 {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(2.2rem, 4vw, 3.8rem);
font-weight: 700;
line-height: 1.1;
color: var(--ink);
}
.sd-intro__h2 em {
font-style: italic;
color: var(--ink);
}
.sd-intro__body {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 1.05rem;
font-weight: 300;
color: var(--muted);
max-width: 440px;
margin-top: 1.2rem;
}
.sd-intro__btns {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.sd-btn {
display: inline-block;
padding: 14px 32px;
font-family: 'Source Serif 4', Georgia, serif;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
border-radius: 8px;
transition: opacity 0.2s ease, background 0.2s ease;
}
.sd-btn--gold,
.sd-section .sd-btn--gold,
.sd-section a.sd-btn--gold {
background: var(--signal);
color: var(--signal-on);
border: 1px solid var(--signal);
}
.sd-btn--gold:hover {
opacity: 0.85;
}
.sd-btn--fb {
background: transparent;
/* Ausnahme: fremde Markenfarbe (Facebook) */
color: #1877F2;
border: 1px solid rgba(24, 119, 242, 0.4);
}
.sd-btn--fb:hover {
background: rgba(24, 119, 242, 0.08);
}
/* trust cards grid */
.sd-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.sd-card {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 3px;
padding: 1.4rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sd-card__num {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 2.2rem;
line-height: 1;
color: var(--ink);
}
.sd-card__label {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 0.82rem;
font-weight: 400;
letter-spacing: 0.12em;
color: var(--muted);
}
/* reveal stagger for intro columns */
.sd-intro .reveal {
transition-delay: var(--delay, 0s);
}
/* ============================================================
PRODUCTS SECTION
============================================================ */
.sd-products {
padding-bottom: 0;
}
.sd-products__header {
margin-bottom: 2.5rem;
}
.sd-products__h2 {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 700;
color: var(--ink);
margin-top: 0.6rem;
line-height: 1.15;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 3px;
}
.product-card {
background: var(--paper);
overflow: hidden;
cursor: pointer;
text-decoration: none;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, z-index 0.3s ease;
position: relative;
}
.product-card:hover {
transform: translateY(-5px);
z-index: 2;
}
.product-card__img-wrap {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.product-card__img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.8) brightness(0.75);
transition: filter 0.4s ease, transform 0.4s ease;
}
.product-card:hover .product-card__img-wrap img {
filter: saturate(1.1) brightness(0.88);
transform: scale(1.05);
}
.product-card__badge {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: var(--signal);
color: var(--ink);
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
}
.product-card__info {
padding: 1.3rem 1.5rem;
border-top: 1px solid var(--rule);
display: flex;
flex-direction: column;
flex: 1;
}
.product-card__name {
font-family: 'Bricolage Grotesque', serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--ink);
max-width: none;
}
.product-card__desc {
font-family: 'Source Serif 4', serif;
font-size: 0.88rem;
font-weight: 300;
color: var(--muted);
line-height: 1.55;
margin: 4px 0 1rem;
max-width: none;
flex: 1;
}
.product-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.product-card__price {
display: flex;
align-items: baseline;
gap: 0.3rem;
}
.product-card__price-num {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 1.55rem;
line-height: 1;
color: var(--ink);
}
.product-card__price-unit {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 0.78rem;
font-weight: 400;
color: var(--muted);
}
.product-card__btn {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--ink);
border: 1px solid var(--rule);
padding: 7px 14px;
transition: background 0.2s ease;
white-space: nowrap;
}
.product-card:hover .product-card__btn {
background: var(--signal-tint);
}
/* ============================================================
DELIVERY SECTION
============================================================ */
.sd-delivery {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 440px;
gap: 2rem;
padding: 4rem 6vw;
align-items: stretch;
}
.sd-delivery__img {
position: relative;
overflow: hidden;
background: var(--paper);
}
/* bg image with desaturation — isolated on ::before so ::after and
child elements are not affected by the filter */
.sd-delivery__img::before {
content: '';
position: absolute;
inset: 0;
background-image: url('../images/versand-bg.webp');
background-size: cover;
background-position: center;
filter: none;
}
/* right-edge fade into --sd-bg2 — unaffected by the image filter above */
.sd-delivery__img::after {
content: '';
position: absolute;
inset: 0;
/* narrow fade straight into the light surface — the old dark
midpoint read as fog across half the photo on the light theme */
background: linear-gradient(to right, transparent 0%, transparent 74%, var(--paper) 90%, var(--paper) 100%);
}
.sd-delivery__deco {
position: absolute;
bottom: -0.15em;
left: -0.05em;
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 7rem;
line-height: 1;
color: var(--rule);
pointer-events: none;
user-select: none;
z-index: 1;
/* undo parent filter so deco opacity reads as intended */
filter: none;
}
.sd-delivery__content {
padding: 4rem 5vw;
display: flex;
flex-direction: column;
justify-content: center;
}
.sd-delivery__h2 {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(1.6rem, 3vw, 2.6rem);
font-weight: 700;
color: var(--ink);
line-height: 1.15;
margin-top: 0.7rem;
}
.sd-delivery__cards {
display: grid;
/* minmax(0,·) — plain 1fr can't shrink below the cards'
text width and blows the section open on small screens */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 1.5rem;
}
.sd-dcard {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 3px;
padding: 1.2rem;
display: flex;
gap: 0.9rem;
align-items: flex-start;
}
.sd-dcard__icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--signal);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sd-dcard__title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1rem;
font-weight: 400;
color: var(--ink);
line-height: 1.2;
}
.sd-dcard__desc {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 0.82rem;
font-weight: 300;
color: var(--muted);
margin-top: 0.2rem;
max-width: none;
}
.sd-dcard__price {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 1.35rem;
color: var(--ink);
margin-top: 0.4rem;
line-height: 1;
}
.sd-minorder {
display: flex;
align-items: flex-start;
gap: 0.8rem;
margin-top: 1.5rem;
background: var(--signal-tint);
border: 1px solid var(--signal);
border-radius: 12px;
padding: 1.1rem 1.4rem;
}
.sd-minorder__title {
display: block;
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 1.2rem;
letter-spacing: 0.04em;
color: var(--ink);
line-height: 1.2;
}
.sd-minorder__sub {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 0.8rem;
font-weight: 300;
color: var(--muted);
margin-top: 0.2rem;
max-width: none;
}
/* ============================================================
SOCIAL / KONTAKT
============================================================ */
.sd-kontakt {
text-align: center;
}
.sd-kontakt__h2 {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 700;
color: var(--ink);
line-height: 1.15;
margin-top: 0.7rem;
}
.sd-kontakt__sub {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 1.05rem;
font-weight: 300;
color: var(--muted);
margin: 0.9rem auto 0;
max-width: 44ch;
}
.sd-kontakt__btns {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.sd-social-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 26px;
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.15em;
text-decoration: none;
border-radius: 8px;
transition: background 0.2s ease, border-color 0.2s ease;
}
.sd-social-btn--fb {
/* Ausnahme: fremde Markenfarbe (Facebook) */
color: #1877F2;
border: 1px solid rgba(24, 119, 242, 0.35);
background: transparent;
}
.sd-social-btn--fb:hover {
/* Ausnahme: fremde Markenfarbe (Facebook) */
border-color: #1877F2;
background: rgba(24, 119, 242, 0.08);
}
.sd-social-btn--neutral {
color: var(--ink);
border: 1px solid var(--rule);
background: transparent;
}
.sd-social-btn--neutral:hover {
background: var(--paper-2);
}
/* ============================================================
BACK-TO-BRAND CTA
============================================================ */
.ll-backcta {
background: var(--paper);
padding: 5rem 6vw;
text-align: center;
}
.ll-backcta__rule {
width: 100%;
height: 1px;
background: var(--rule);
margin-bottom: 3rem;
}
.ll-backcta__label {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 1rem;
max-width: none;
}
.ll-backcta__h3 {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 3rem;
letter-spacing: 0.04em;
color: var(--ink);
line-height: 1;
}
.ll-backcta__body {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 1.05rem;
font-weight: 300;
color: var(--muted);
margin: 1rem auto 0;
max-width: 52ch;
}
.ll-backcta__btn, .sd-section a.ll-backcta__btn {
display: inline-block;
margin-top: 2rem;
padding: 14px 36px;
font-family: 'Source Serif 4', Georgia, serif;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
color: var(--ink);
border: 1px solid var(--ink);
background: transparent;
border-radius: 8px;
transition: background 0.25s ease, color 0.25s ease;
}
.ll-backcta__btn:hover, .sd-section a.ll-backcta__btn:hover {
background: var(--ink);
color: var(--paper);
}
/* ============================================================
FOOTER
============================================================ */
.ll-footer {
background: var(--paper);
border-top: 1px solid var(--rule);
}
.ll-footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 3rem;
padding: 2.5rem 6vw;
}
.ll-footer__brand {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 1.4rem;
letter-spacing: 0.08em;
color: var(--ink);
max-width: none;
margin-bottom: 0.5rem;
}
.ll-footer__tagline {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 0.85rem;
font-weight: 300;
color: var(--muted);
max-width: 32ch;
}
.ll-footer__heading {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.18em;
color: var(--ink);
margin-bottom: 0.75rem;
font-weight: 400;
}
.ll-footer__link {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 0.9rem;
font-weight: 300;
color: var(--muted);
text-decoration: none;
transition: color 0.2s ease;
display: block;
}
.ll-footer__link:hover {
color: var(--signal);
}
.ll-footer__bar {
background: var(--paper-2);
padding: 0.7rem 6vw;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--muted);
}
/* ============================================================
DEMO BADGE
============================================================ */
@keyframes badge-pulse {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rule) 40%, transparent); }
50% { box-shadow: 0 0 0 8px transparent; }
}
.demo-badge {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 999;
background: var(--signal);
color: var(--signal-on);
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
padding: 9px 18px;
border-radius: 2px;
animation: badge-pulse 2.5s ease-in-out infinite;
user-select: none;
pointer-events: none;
}
/* ============================================================
NAV SCROLLED STATE (set via JS)
============================================================ */
.ll-nav.scrolled {
background: color-mix(in srgb, var(--paper) 98%, transparent);
box-shadow: 0 2px 30px var(--shadow-4);
}
/* ============================================================
MOBILE — max-width 768px
============================================================ */
@media (max-width: 768px) {
.showcase-bridge__lines {
flex-direction: column;
gap: 1rem;
}
.showcase-bridge__line {
width: 60px;
flex: none;
height: 1px;
}
.sd-intro {
grid-template-columns: 1fr;
}
.sd-cards {
grid-template-columns: 1fr 1fr;
}
.sd-delivery {
grid-template-columns: minmax(0, 1fr);
}
.sd-delivery__img {
display: none;
}
.sd-delivery__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* ── Nav bar ── */
.ll-nav {
padding: 1rem 4vw;
}
/* Absolute-centred title collides with right cluster on small screens */
.ll-nav__wordmark {
display: none;
}
.ll-nav__links {
display: none;
}
/* "See Live Demo ↓" / "← Back" — hidden on mobile, browser back is enough */
.ll-nav__cta {
display: none;
}
/* Tighten right cluster: only lang switcher + cart icon remain */
.ll-nav__right {
gap: 0.5rem;
}
/* Compact lang buttons so all four fit in ≈120px */
.lang-switcher {
gap: 3px;
flex-wrap: nowrap;
}
.lang-btn {
padding: 5px 7px;
font-size: 0.78rem;
letter-spacing: 0.05em;
}
.ll-footer__grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.ll-footer__bar {
flex-direction: column;
gap: 0.4rem;
text-align: center;
}
.ll-backcta {
padding: 3rem 4vw;
}
.demo-badge {
bottom: 16px;
right: 16px;
}
}
/* ============================================================
PRODUCT MEDIA — VIDEO HOVER EFFECT
============================================================ */
.product-media {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--paper);
}
/* badge sits above both poster and video */
.product-media .product-card__badge {
z-index: 3;
}
.product-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.8) brightness(0.75);
transition: opacity 0.4s ease, filter 0.4s ease;
z-index: 2;
}
.product-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
filter: saturate(1) brightness(0.88);
}
.product-card:hover .product-poster {
opacity: 0;
filter: saturate(1) brightness(0.88);
}
.product-card:hover .product-video {
opacity: 1;
}
@media (max-width: 768px) {
.product-video {
display: none;
}
.product-poster {
position: relative;
opacity: 1 !important;
}
}
/* ============================================================
BREAD DIVIDER
============================================================ */
.shop-cta-wrap {
text-align: center;
}
.shop-cta-link, .sd-section a.shop-cta-link {
display: inline-block;
border: 1px solid var(--ink);
color: var(--ink);
padding: 12px 32px;
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
letter-spacing: 2px;
text-decoration: none;
margin: 40px auto;
transition: all 0.3s ease;
}
.shop-cta-link:hover, .sd-section a.shop-cta-link:hover {
background: var(--ink);
color: var(--paper);
}
.bread-divider {
display: flex;
align-items: center;
gap: 1.5rem;
margin: 5rem 0 3rem;
}
.bread-divider-line {
flex: 1;
height: 1px;
background: linear-gradient(
to right,
transparent,
var(--rule),
transparent
);
}
.bread-divider-text {
display: flex;
align-items: center;
gap: 0.8rem;
font-family: 'Bricolage Grotesque', serif;
font-size: 1.3rem;
font-style: italic;
color: var(--ink);
white-space: nowrap;
}
.bread-icon {
font-size: 1rem;
opacity: 0.7;
}
/* ── BREAD EYEBROW & TITLE ── */
.bread-eyebrow {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 0.8rem;
}
.bread-title {
font-family: 'Bricolage Grotesque', serif;
font-size: clamp(1.8rem, 3.5vw, 3rem);
font-weight: 700;
color: var(--ink);
margin-bottom: 0.8rem;
line-height: 1.1;
}
.bread-desc {
font-family: 'Source Serif 4', serif;
font-size: 1.05rem;
color: var(--muted);
font-weight: 300;
max-width: 540px;
margin-bottom: 3rem;
}
/* ── BREAD GRID ── */
.bread-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2px;
margin-bottom: 1rem;
}
/* ── BREAD CARD ── */
.bread-card {
background: var(--paper-2);
cursor: pointer;
transition: transform 0.3s ease;
border-bottom: 2px solid transparent;
display: flex;
flex-direction: column;
height: auto !important;
overflow: visible !important;
}
.bread-card:hover {
transform: translateY(-4px);
border-bottom-color: var(--rule);
}
.bread-media {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.bread-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.75) brightness(0.72) sepia(0.15);
transition: filter 0.4s ease, transform 0.4s ease;
display: block;
}
.bread-card:hover .bread-img {
filter: saturate(1) brightness(0.88) sepia(0);
transform: scale(1.04);
}
.bread-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
color-mix(in srgb, var(--ink) 60%, transparent) 0%,
transparent 50%
);
}
.bread-tag {
position: absolute;
top: 12px;
right: 12px;
background: var(--signal-tint);
border: 1px solid var(--rule);
color: var(--ink);
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 2px;
}
.bread-info {
padding: 1.2rem 1.5rem 1.5rem;
border-top: 1px solid var(--rule);
display: flex;
flex-direction: column;
flex: 1;
justify-content: space-between;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
padding-bottom: 20px;
}
.bread-name {
font-family: 'Bricolage Grotesque', serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 0.4rem;
}
.bread-desc-card {
font-family: 'Source Serif 4', serif;
font-size: 0.88rem;
color: var(--muted);
font-weight: 300;
line-height: 1.55;
}
/* ── BREAD RESPONSIVE ── */
@media (max-width: 768px) {
.bread-divider {
margin: 3rem 0 2rem;
}
.bread-grid {
grid-template-columns: 1fr 1fr;
gap: 2px;
}
}
@media (max-width: 480px) {
.bread-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
IMAGE / VIDEO FALLBACKS
============================================================ */
/* Hatched placeholder background while image is absent */
.product-img,
.bread-img {
background: var(--paper-2);
background-image: repeating-linear-gradient(
45deg,
var(--rule) 0px,
var(--rule) 1px,
transparent 1px,
transparent 12px
);
}
/* Centred ✦ icon behind the image — visible only when image is missing */
.product-media::before,
.bread-media::before {
content: '✦';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--steel);
z-index: 0;
pointer-events: none;
}
/* Suppress placeholder once real image has loaded */
.product-media.loaded::before,
.bread-media.loaded::before {
display: none;
}
/* "Image coming soon" badge injected by JS on image error */
.coming-soon-badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: color-mix(in srgb, var(--ink) 85%, transparent);
border: 1px solid var(--rule);
color: var(--muted);
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.25em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 2px;
white-space: nowrap;
z-index: 3;
pointer-events: none;
}
/* Bread card video hover — same opacity swap as product cards */
.bread-card:hover .product-poster {
opacity: 0;
}
.bread-card:hover .product-video {
opacity: 1;
}
/* Card with missing video — freeze on static poster */
.product-card.no-video .product-poster {
opacity: 1 !important;
}
.product-card.no-video .product-video {
display: none;
}
/* ============================================================
REVEAL UTILITY
============================================================ */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible {
opacity: 1;
transform: none;
}
/* ============================================================
CART NAV ICON
============================================================ */
.cart-nav-link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted);
text-decoration: none;
padding: 5px;
transition: color 0.2s ease;
}
.cart-nav-link:hover,
.cart-nav-link--active {
color: var(--ink);
}
.cart-nav-count {
position: absolute;
top: -3px;
right: -3px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 9px;
background: var(--signal);
color: var(--signal-on);
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
font-weight: 700;
line-height: 1;
display: none;
align-items: center;
justify-content: center;
}
.cart-nav-count.has-items {
display: flex;
}
/* ============================================================
SHOP HERO
============================================================ */
.shop-hero {
padding-top: 8rem !important;
padding-bottom: 3rem !important;
border-bottom: 1px solid var(--rule);
}
.shop-hero__h1 {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: clamp(2.4rem, 5vw, 3.8rem);
font-weight: 700;
color: var(--ink);
margin-top: 0.5rem;
line-height: 1.1;
}
.shop-hero__sub {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.08em;
color: var(--muted);
margin-top: 0.75rem;
opacity: 0.75;
}
/* ============================================================
SHOP BODY — two-column layout
============================================================ */
.sd-section--shop {
padding-top: 3rem !important;
display: grid;
grid-template-columns: 1fr 380px;
gap: 3rem;
align-items: start;
}
/* ── Filter Tabs ── */
.shop-filter-tabs {
display: flex;
gap: 6px;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.filter-tab {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 18px;
background: transparent;
color: var(--muted);
border: 1px solid var(--rule);
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filter-tab:hover {
border-color: var(--ink);
color: var(--ink);
}
.filter-tab.active {
background: var(--signal);
color: var(--signal-on);
border-color: var(--signal);
}
/* ── Shop Product Grid ── */
.shop-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2px;
}
/* ── Shop Card ── */
.shop-card {
background: var(--paper);
overflow: hidden;
transition: transform 0.25s ease;
position: relative;
}
.shop-card:hover {
transform: translateY(-3px);
z-index: 2;
}
.shop-card.in-cart {
outline: 1px solid var(--rule);
}
@keyframes card-flash {
0% { box-shadow: 0 0 0 4px var(--shadow-3); }
100% { box-shadow: none; }
}
.shop-card.flash {
animation: card-flash 0.55s ease forwards;
}
.shop-card__img-wrap {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--paper-2);
}
.shop-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.8) brightness(0.72);
transition: filter 0.35s ease, transform 0.35s ease;
}
.shop-card:hover .shop-card__img {
filter: saturate(1.05) brightness(0.85);
transform: scale(1.04);
}
.shop-card__qty-badge {
position: absolute;
top: 8px;
left: 8px;
background: var(--signal);
color: var(--signal-on);
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 3px 9px;
border-radius: 2px;
z-index: 1;
}
.shop-card__cat {
position: absolute;
bottom: 8px;
right: 8px;
background: color-mix(in srgb, var(--ink) 78%, transparent);
color: var(--muted);
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 2px;
z-index: 1;
}
.shop-card__info {
padding: 1rem 1.2rem 1.2rem;
border-top: 1px solid var(--rule);
}
.shop-card__name {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 0.95rem;
font-weight: 700;
color: var(--ink);
margin-bottom: 0.75rem;
line-height: 1.25;
min-height: 2.5em;
}
.shop-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.shop-card__price {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 1.5rem;
color: var(--ink);
line-height: 1;
flex-shrink: 0;
}
.btn-add {
flex: 1;
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 8px 10px;
background: transparent;
color: var(--ink);
border: 1px solid var(--rule);
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
text-align: center;
white-space: nowrap;
}
.btn-add:hover {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.btn-add.added {
background: var(--signal-tint);
border-color: var(--rule);
color: var(--ink);
}
/* ============================================================
CART PANEL (sticky)
============================================================ */
.cart-panel {
position: sticky;
top: 5.5rem;
max-height: calc(100vh - 7rem);
display: flex;
flex-direction: column;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 3px;
overflow: hidden;
}
.cart-panel__head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 1.3rem 1.5rem 1rem;
border-bottom: 1px solid var(--rule);
flex-shrink: 0;
}
.cart-panel__title {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 1.15rem;
font-weight: 700;
color: var(--ink);
}
.cart-item-count {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.08em;
color: var(--muted);
}
/* ── Empty state ── */
.cart-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.9rem;
padding: 3rem 2rem;
text-align: center;
opacity: 0.55;
}
.cart-empty svg {
color: var(--steel);
flex-shrink: 0;
}
.cart-empty p {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 0.95rem;
font-weight: 300;
color: var(--muted);
max-width: none;
line-height: 1.5;
}
.cart-empty__hint {
font-family: 'DM Mono', monospace !important;
font-size: 0.78rem !important;
letter-spacing: 0.08em;
}
/* ── Cart items list ── */
.cart-items {
flex: 1;
min-height: 0; /* required for flex overflow to work */
overflow-y: auto;
overscroll-behavior: contain;
}
.cart-items::-webkit-scrollbar {
width: 3px;
}
.cart-items::-webkit-scrollbar-track {
background: transparent;
}
.cart-items::-webkit-scrollbar-thumb {
background: var(--steel);
border-radius: 2px;
}
/* ── Single cart item row ── */
.cart-item {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.75rem 1.5rem;
border-bottom: 1px solid var(--rule);
transition: background 0.15s ease;
}
.cart-item:hover {
background: var(--paper-2);
}
.cart-item__img {
width: 48px;
height: 44px;
flex-shrink: 0;
border-radius: 2px;
overflow: hidden;
background: var(--paper-2);
}
.cart-item__img img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.7) brightness(0.78);
display: block;
}
.cart-item__details {
flex: 1;
min-width: 0;
}
.cart-item__name {
font-family: 'Bricolage Grotesque', sans-serif;
font-size: 0.85rem;
font-weight: 700;
color: var(--ink);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cart-item__unit {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.05em;
color: var(--muted);
margin-top: 3px;
opacity: 0.7;
}
.cart-item__actions {
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
.cart-item__controls {
display: flex;
align-items: center;
gap: 2px;
}
.qty-btn {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--rule);
color: var(--muted);
font-size: 0.88rem;
line-height: 1;
cursor: pointer;
border-radius: 8px;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.qty-btn:hover {
background: var(--paper-2);
color: var(--ink);
border-color: var(--rule);
}
.qty-num {
min-width: 20px;
text-align: center;
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
color: var(--ink);
}
.cart-item__price {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 1rem;
color: var(--ink);
line-height: 1;
min-width: 44px;
text-align: right;
}
.remove-btn {
background: none;
border: none;
color: var(--steel);
font-size: 0.78rem;
cursor: pointer;
padding: 3px 4px;
line-height: 1;
transition: color 0.15s ease;
}
.remove-btn:hover {
color: var(--ink);
}
/* ── Cart Footer ── */
.cart-footer {
padding: 1.25rem 1.5rem 1.4rem;
border-top: 1px solid var(--rule);
flex-shrink: 0;
}
.cart-total-row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 0.2rem;
}
.cart-total-label {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
}
.cart-total {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 2.2rem;
line-height: 1;
color: var(--ink);
}
.cart-shipping-note {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--muted);
text-align: right;
margin-bottom: 1.1rem;
opacity: 0.55;
max-width: none;
}
.btn-order {
display: block;
width: 100%;
padding: 14px;
font-family: 'Source Serif 4', Georgia, serif;
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
background: var(--signal);
color: var(--signal-on);
border: 1px solid var(--signal);
border-radius: 8px;
cursor: pointer;
transition: opacity 0.2s ease;
margin-bottom: 0.65rem;
}
.btn-order:hover:not(:disabled) {
opacity: 0.88;
}
.btn-order:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.btn-clear {
display: block;
width: 100%;
padding: 9px;
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
background: transparent;
color: var(--muted);
border: 1px solid var(--rule);
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-clear:hover {
background: var(--paper-2);
color: var(--ink);
border-color: var(--rule);
}
/* ============================================================
SHOP — RESPONSIVE
============================================================ */
@media (max-width: 960px) {
.sd-section--shop {
grid-template-columns: 1fr;
}
.cart-panel {
position: static;
max-height: none;
order: 2; /* cart below products on tablet */
}
}
@media (max-width: 600px) {
.shop-grid {
grid-template-columns: 1fr;
}
.shop-hero {
padding-top: 6rem !important;
}
}
/* -- FIX: Bread card price + button visibility -- */
div.product-card {
overflow: visible;
}
div.product-card .product-card__btn.add-to-cart {
background: transparent;
border-radius: 8px;
cursor: pointer;
}
/* ── AMBIENT SOUND TOGGLE ── */
.sound-toggle {
position: fixed;
bottom: 28px;
left: 28px;
z-index: 999;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--rule);
background: color-mix(in srgb, var(--ink) 92%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--paper);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
padding: 0;
}
.sound-toggle:hover {
background: var(--paper-2);
border-color: var(--rule);
transform: scale(1.08);
}
.sound-toggle.playing {
border-color: var(--paper);
box-shadow: 0 0 12px var(--shadow-2);
}
.sound-toggle svg {
width: 18px;
height: 18px;
}
@media (max-width: 768px) {
.sound-toggle {
bottom: 16px;
left: 16px;
width: 38px;
height: 38px;
}
.sound-toggle svg {
width: 15px;
height: 15px;
}
}
.sound-toggle {
animation: badge-pulse 2.5s ease-in-out infinite;
}
.sound-toggle.playing {
animation: badge-pulse 2.5s ease-in-out infinite;
box-shadow: 0 0 12px var(--shadow-3);
}
/* ── COOKIE BANNER ── */
.ll-cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: color-mix(in srgb, var(--ink) 95%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--rule);
padding: 1.2rem 6vw;
transform: translateY(0);
transition: transform 0.4s ease, opacity 0.4s ease;
}
.ll-cookie-banner.ll-cookie-hidden {
transform: translateY(100%);
opacity: 0;
pointer-events: none;
}
.ll-cookie-inner {
max-width: 900px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.ll-cookie-text {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 0.88rem;
font-weight: 300;
color: var(--muted);
line-height: 1.5;
max-width: none;
margin: 0;
}
.ll-cookie-btns {
display: flex;
gap: 0.5rem;
flex-shrink: 0;
}
.ll-cookie-btn {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 9px 18px;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
white-space: nowrap;
}
.ll-cookie-accept {
background: var(--signal);
color: var(--signal-on);
border: 1px solid var(--signal);
}
.ll-cookie-accept:hover {
opacity: 0.85;
}
.ll-cookie-decline {
background: transparent;
color: var(--muted);
border: 1px solid var(--rule);
}
.ll-cookie-decline:hover {
border-color: var(--rule);
color: var(--ink);
}
@media (max-width: 768px) {
.ll-cookie-inner {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.ll-cookie-btns {
width: 100%;
justify-content: center;
}
}
.shop-tabs{display:flex;gap:20px;border-bottom:1px solid var(--rule);margin:20px 0}.shop-tab{background:none;border:0;color:var(--muted);padding:10px 0;cursor:pointer}.shop-tab.active{color:var(--ink);border-bottom:2px solid var(--ink)}.shop-sort-wrap{display:flex;justify-content:flex-end;margin-bottom:18px}.shop-sort{background:var(--paper);border:1px solid var(--ink);color:var(--ink);padding:8px 12px}.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.shop-product-card{background:var(--paper);border:1px solid var(--rule)}.shop-product-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink)}.shop-product-media img,.shop-product-media video{width:100%;height:100%;object-fit:contain}.shop-badge{position:absolute;top:10px;left:10px;padding:4px 8px;font-size:.65rem}.shop-badge--bestseller{background:var(--signal-tint);color:var(--ink);font-weight:700}.shop-badge--sale{background:var(--signal);color:var(--signal-on)}.shop-badge--new{background:var(--paper);color:var(--ink)}.shop-badge--scarcity{border:1px solid var(--ink);color:var(--ink);background:transparent}.shop-product-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:var(--ink);font-size:1.1rem}.shop-product-desc,.shop-product-weight,.shop-product-price-per-kg{color:var(--muted);font-size:.85rem}.shop-product-price{color:var(--ink);font-size:1.35rem}.shop-product-price--original{text-decoration:line-through;color:var(--muted);margin-right:8px}.shop-cart-btn{border:1px solid var(--ink);color:var(--ink);background:transparent;padding:8px 12px}.shop-cart-btn:hover{background:var(--signal-deep);color:var(--signal-on)}.shop-hero{text-align:left;margin-bottom:24px}.shop-trust-bar{display:flex;justify-content:flex-start;gap:10px;color:var(--ink);flex-wrap:wrap}
@media (max-width:768px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}@media (max-width:480px){.shop-grid{grid-template-columns:1fr;}}
/* Shop mobile responsiveness improvements */
.shop-tabs {
overflow-x: auto;
overflow-y: hidden;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.shop-tab {
white-space: nowrap;
flex: 0 0 auto;
}
.shop-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.shop-product-media {
aspect-ratio: 4 / 3;
background: var(--ink);
}
.shop-product-media img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 768px) {
.shop-trust-bar {
flex-direction: column;
align-items: center;
gap: 6px;
}
.shop-trust-bar > span:nth-child(even) {
display: none;
}
.shop-sort-wrap {
width: 100%;
justify-content: stretch;
}
.shop-sort {
width: 100%;
}
.shop-badge {
font-size: 0.78rem;
padding: 3px 7px;
}
.shop-cart-btn {
min-height: 48px;
padding-top: 10px;
padding-bottom: 10px;
}
}
@media (max-width: 479px) {
.shop-grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 480px) and (max-width: 768px) {
.shop-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Shop layout fix: full-width centered content */
.sd-section--shop {
padding-top: 3rem !important;
display: block;
}
.shop-content-wrap {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* .shop-content-wrap setzt die Achse bereits (max-width 1200 +
24px). Eigene Breite/Polsterung hier schob die H1 um 24px aus
der Flucht der Tabs und des Grids. */
.shop-hero {
width: 100%;
margin: 0 0 24px;
text-align: left;
}
.shop-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
width: 100%;
align-items: stretch;
}
.shop-product-card {
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
}
@media (max-width: 768px) {
.shop-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.shop-grid {
grid-template-columns: 1fr;
}
}
/* Product card content alignment */
.shop-product-card {
overflow: hidden;
}
.shop-product-info {
display: flex;
flex-direction: column;
flex: 1;
padding: 16px;
}
.shop-product-name,
.shop-product-desc,
.shop-product-weight,
.shop-product-price,
.shop-product-price-per-kg {
text-align: left;
}
.shop-cart-btn {
display: block;
margin-top: auto;
width: 100%;
}
@media (max-width: 479px) {
.shop-product-info {
padding: 12px;
}
}
/* Dedicated cart page */
.wk-page { padding-top: 8rem; }
.wk-wrap { max-width: 900px; margin: 0 auto; }
.wk-hero h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:var(--ink);text-align:center;letter-spacing:.12em;font-size:clamp(2.4rem,6vw,4rem)}
.wk-hero p{text-align:center;color:var(--muted);margin-top:.5rem}
.wk-list .wk-item{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--rule)}
.wk-item__left img{width:120px;height:120px;object-fit:contain;background:var(--ink);border:1px solid var(--rule);border-radius:8px}
.wk-item__mid{flex:1;padding:0 24px}.wk-item__name{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:var(--ink);font-size:1.3rem;letter-spacing:.04em}
.wk-item__meta{font-size:.85rem;color:var(--muted)}.wk-item__unit{color:var(--ink)}
.wk-item__right{flex-shrink:0;text-align:right}.wk-qty{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.wk-qty-btn{width:36px;height:36px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer}.wk-qty-btn:hover{background:var(--signal-deep);color:var(--signal-on)}
.wk-qty-count{width:36px;text-align:center;color:var(--ink);font-size:1.1rem}
.wk-line-total{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:var(--ink);font-size:1.2rem;margin-top:8px}.wk-remove{background:none;border:0;color:var(--muted);font-size:.85rem;cursor:pointer}
.wk-summary{margin-top:24px;border-top:1px solid var(--rule);padding-top:20px}
.wk-row{display:flex;justify-content:space-between;padding:10px 0;color:var(--ink);border-bottom:1px solid var(--rule)}
.wk-row--total{border-top:2px solid var(--rule);margin-top:10px;padding-top:16px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.8rem}
.wk-btn{display:block;width:100%;text-align:center;padding:16px;letter-spacing:2px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;margin-top:12px}
.wk-btn--gold,.sd-section a.wk-btn--gold{background:var(--ink);color:var(--signal-on)}.wk-btn--gold:hover,.sd-section a.wk-btn--gold:hover{background:var(--signal-deep);color:var(--signal-on)}.wk-btn--outline{border:1px solid var(--ink);color:var(--ink)}
.wk-clear{display:block;margin:12px auto 0;background:none;border:0;color:var(--muted);cursor:pointer}
.wk-empty{text-align:center;padding:48px 0;color:var(--ink)}.wk-empty p{margin:8px auto 16px}
.wk-empty-btn{display:inline-block;padding:12px 20px;border:1px solid var(--ink);color:var(--ink)}
.category-section {
position: relative;
z-index: auto;
}
.category-video,
.category-video video,
.category-hero-video {
position: relative;
z-index: 1;
pointer-events: auto;
}
.category-section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 24px;
display: flex;
gap: 48px;
align-items: center;
}
.category-section--reversed {
flex-direction: row-reverse;
}
.category-video {
flex: 55%;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--ink);
position: relative;
}
.category-video video {
width: 100%;
height: 100%;
object-fit: cover;
}
.category-video-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink);
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
letter-spacing: 0.2em;
background: var(--ink);
}
.category-text {
flex: 45%;
}
.category-label {
font-size: 0.78rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 16px;
}
.category-title {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 2.5rem;
color: var(--ink);
margin-bottom: 20px;
}
.category-desc {
color: var(--muted);
line-height: 1.7;
margin-bottom: 32px;
}
.category-cta, .sd-section a.category-cta {
display: inline-block;
}
.category-divider {
width: 60%;
height: 1px;
background: var(--rule);
margin: 40px auto;
}
@media (max-width: 768px) {
.category-section,
.category-section--reversed {
flex-direction: column;
}
.category-video,
.category-text {
flex: 100%;
width: 100%;
}
.category-title {
font-size: 1.8rem;
}
}
.category-section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 24px;
display: flex;
gap: 48px;
align-items: center;
}
.category-section--reversed {
flex-direction: row-reverse;
}
.category-video {
flex: 0 0 55%;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 16/9;
background: var(--ink);
}
.category-video video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
color: var(--ink);
font-size: 1.5rem;
letter-spacing: 4px;
border: 1px solid var(--rule);
border-radius: 12px;
}
.category-text {
flex: 1;
}
.category-label {
font-size: 0.78rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 16px;
}
.category-title {
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
font-size: 2.5rem;
color: var(--ink);
margin-bottom: 20px;
line-height: 1.1;
}
.category-desc {
color: var(--muted);
line-height: 1.7;
margin-bottom: 32px;
font-size: 1rem;
}
.category-cta, .sd-section a.category-cta {
display: inline-block;
border: 1px solid var(--ink);
color: var(--ink);
padding: 12px 32px;
font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
letter-spacing: 2px;
text-decoration: none;
transition: all 0.3s;
}
.category-cta:hover, .sd-section a.category-cta:hover {
background: var(--ink);
color: var(--paper);
}
.category-divider {
width: 60%;
height: 1px;
background: var(--rule);
border: none;
margin: 0 auto;
}
@media (max-width: 768px) {
.category-section,
.category-section--reversed {
flex-direction: column;
padding: 48px 16px;
gap: 32px;
}
.category-video {
flex: none;
width: 100%;
}
.category-title {
font-size: 1.8rem;
}
}
.category-hero-video {
width: 100%;
height: auto;
max-height: 70vh;
object-fit: cover;
display: block;
border-radius: inherit;
}
@media (max-width: 768px) {
.category-hero-video {
max-height: 50vh;
}
}
/* Ripple effect for add-to-cart buttons */
.add-to-cart {
position: relative;
overflow: hidden;
transition: transform 0.15s ease, background 0.3s ease, color 0.3s ease;
}
.add-to-cart:hover {
background: var(--paper-2);
color: var(--ink);
border-color: var(--ink);
}
.add-to-cart:active {
transform: scale(0.97);
}
.add-to-cart .ripple {
position: absolute;
border-radius: 50%;
background: var(--steel);
transform: scale(0);
animation: ripple-expand 0.6s ease-out;
pointer-events: none;
}
@keyframes ripple-expand {
to {
transform: scale(4);
opacity: 0;
}
}
.add-to-cart.added {
background: var(--signal);
color: var(--signal-on);
border-color: var(--signal);
}
@media (max-width: 768px) {
.sd-delivery__img::after {
background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--ink) 70%, transparent) 100%);
}
}
.view-demo-link, .sd-section a.view-demo-link {
font-size: 1.0625rem;
letter-spacing: 0.02em;
}
/* ══════════════════════════════════════════════
BOS CARD LOOK — rounded corners, soft glow,
free-floating hover (like blackoarstudio.com)
══════════════════════════════════════════════ */
.shop-product-card,
.sd-card,
.sd-dcard,
.product-card,
.bread-card {
border-radius: 14px;
box-shadow:
0 0 0 1px var(--rule),
0 0 18px var(--shadow-1),
0 8px 24px var(--shadow-4);
transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.shop-product-card:hover,
.sd-card:hover,
.sd-dcard:hover,
.product-card:hover,
.bread-card:hover {
box-shadow:
0 0 0 1px var(--rule),
0 0 28px var(--shadow-2),
0 14px 34px var(--shadow-4);
animation: ll-card-float 7s ease-in-out infinite;
}
/* very slow, weightless drift — starts and ends at the
resting position, so hover-in has no jump at all */
@keyframes ll-card-float {
0% { transform: translateY(0) rotate(0deg); }
30% { transform: translateY(-5px) rotate(0.25deg); }
60% { transform: translateY(-2px) rotate(-0.2deg); }
80% { transform: translateY(-4px) rotate(0.1deg); }
100% { transform: translateY(0) rotate(0deg); }
}
/* clip media to the rounded corners — .bread-card and
.product-card keep overflow visible (button fix), so
round their media wrappers instead */
.shop-product-card { overflow: hidden; }
.shop-product-media,
.bread-media,
.product-card__img-wrap {
border-radius: 14px 14px 0 0;
overflow: hidden;
}
/* bread-card used a bottom border as hover accent — the
glow replaces it, keep the corner radius clean */
.bread-card:hover { border-bottom-color: transparent; }
@media (prefers-reduced-motion: reduce) {
.shop-product-card:hover,
.sd-card:hover,
.sd-dcard:hover,
.product-card:hover,
.bread-card:hover {
animation: none;
transform: none;
}
}
/* ── FIX: fixed navbar overlaps anchor targets ──
in-page jumps (#showcase, #delivery, #kontakt …) stop
exactly one navbar height early: heading stays visible,
no strip of the previous section peeking through */
[id] {
scroll-margin-top: 72px;
}
/* ══════════════════════════════════════════════
BOS BUTTON LOOK — rounded corners + soft glow
(static, no motion)
══════════════════════════════════════════════ */
.ll-hero__btn,
.ll-nav__cta,
.ll-backcta__btn, .sd-section a.ll-backcta__btn,
.sd-btn,
.sd-social-btn,
.shop-cart-btn,
.wk-btn,
.wk-empty-btn,
.btn-back,
.shop-sort {
border-radius: 8px;
box-shadow:
0 0 0 1px var(--rule),
0 0 14px var(--shadow-2);
}
.lang-btn {
border-radius: 8px;
}
/* ══════════════════════════════════════════════
FIX: hero text was taller than the viewport and
got cropped — smaller headline, tighter rhythm,
extra step-down for short screens
══════════════════════════════════════════════ */
.ll-hero__h1 {
font-size: clamp(3rem, 6.5vw, 5.8rem);
}
.ll-hero__sub {
margin-top: 1.2rem;
}
.ll-hero__stats {
margin-top: 2rem;
}
.ll-hero__btn {
margin-top: 2rem;
}
@media (max-height: 820px) {
.ll-hero__content { padding-top: 5rem; }
.ll-hero__h1 { font-size: clamp(2.6rem, 5.5vw, 4.6rem); }
.ll-hero__sub { font-size: 1.05rem; margin-top: 1rem; }
.ll-hero__stats { gap: 2rem; margin-top: 1.5rem; }
.ll-hero__btn { margin-top: 1.5rem; }
}
/* the full-width 1px rule above the scroll hint read as a
stray line cutting across the hero — removed */
.ll-hero__rule {
display: none;
}
/* ══════════════════════════════════════════════
INVERTIERTE ZONE — dunkler Grund auf heller Seite:
Hero, Showcase-Bridge, Nav und Footer.
Der Tokensatz kommt aus css/tokens.css (.zone-invert),
die Rollen kippen, die Regeln bleiben unveraendert.
══════════════════════════════════════════════ */
.ll-nav {
background: var(--paper);
}
.ll-nav.scrolled {
background: var(--paper);
box-shadow: 0 2px 30px var(--shadow-3);
}
.ll-footer {
background: var(--paper);
}
/* floating chips */
.demo-badge {
background: var(--signal);
color: var(--signal-on);
border: 1px solid var(--signal);
}
/* cookie banner joins the light zone */
.ll-cookie-banner {
background: color-mix(in srgb, var(--paper) 97%, transparent);
border-top: 1px solid var(--rule);
box-shadow: 0 -8px 30px var(--shadow-2);
}
.ll-cookie-text {
color: var(--muted);
}
.ll-cookie-decline {
border-color: var(--rule);
color: var(--ink);
}
/* prices carry the warm terracotta, not green */
p.shop-product-price,
.sd-section p.shop-product-price,
p.wk-line-total,
.sd-section p.wk-line-total,
p.wk-item__unit,
.sd-section p.wk-item__unit,
p.sd-dcard__price,
.sd-section p.sd-dcard__price {
color: var(--ink);
}
/* card shadows: soft daylight instead of black-room glow */
.shop-product-card,
.sd-card,
.sd-dcard,
.product-card,
.bread-card {
box-shadow:
0 1px 2px var(--shadow-1),
0 10px 28px var(--shadow-1);
}
.shop-product-card:hover,
.sd-card:hover,
.sd-dcard:hover,
.product-card:hover,
.bread-card:hover {
box-shadow:
0 2px 4px var(--shadow-1),
0 18px 40px var(--shadow-2);
}
/* cart item names: full green, not dimmed paragraph gray */
p.wk-item__name,
.sd-section p.wk-item__name {
color: var(--ink);
}
/* active language pill: dark text on the gold chip */
.ll-nav .lang-btn.active {
color: var(--signal-on);
}
/* Doodle-Pattern entfernt (Spec §8): das vollflaechige Line-Art
war derselbe KI-Marker wie die alte Palette. Die Flaeche traegt
jetzt nur --paper, Sektionswechsel laufen ueber --paper-2. */
.legal-page {
background-color: var(--paper);
}
/* product photos fill the 4:3 frame edge-to-edge — the square
sources used to letterbox against a placeholder that only
looked invisible on the old dark theme */
.shop-product-media img,
.shop-product-media video {
object-fit: cover;
}
/* ══════════════════════════════════════════════
DELIVERY AS TWO FLOATING CARDS — photo box and
info box, rounded, gently hovering like the
product cards. The old edge-fade is gone.
══════════════════════════════════════════════ */
.sd-delivery__img {
border-radius: 16px;
}
.sd-delivery__img::after {
content: none;
}
.sd-delivery__content {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 16px;
padding: 3rem;
}
.sd-delivery__img,
.sd-delivery__content {
transition: box-shadow 0.35s ease, transform 0.35s ease;
box-shadow:
0 1px 2px var(--shadow-1),
0 10px 28px var(--shadow-1);
}
.sd-delivery__img:hover,
.sd-delivery__content:hover {
box-shadow:
0 2px 4px var(--shadow-1),
0 18px 40px var(--shadow-2);
animation: ll-card-float 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.sd-delivery__img:hover,
.sd-delivery__content:hover {
animation: none;
}
}
/* ══════════════════════════════════════════════
TYPE TUNING — Bricolage Grotesque runs wider
than the old condensed display face; the big
sizes step down so nothing wraps or overflows
══════════════════════════════════════════════ */
.ll-hero__h1 {
font-size: clamp(2.4rem, 5.2vw, 4.6rem);
letter-spacing: -0.015em;
}
@media (max-height: 820px) {
.ll-hero__h1 {
font-size: clamp(2rem, 4.3vw, 3.6rem);
}
}
.legal-page__h1 {
font-size: clamp(2rem, 4vw, 3rem);
}
.wk-hero h1 {
font-size: clamp(1.9rem, 4.6vw, 3rem);
letter-spacing: 0.02em;
}
.shop-hero__h1 {
font-size: clamp(2rem, 4.2vw, 3.2rem);
}
.sd-section h1 {
font-size: clamp(2rem, 4.6vw, 3.4rem);
}
.sd-card__num {
font-size: 1.8rem;
}
.category-title {
font-size: 2.1rem;
}
/* shop prices in the display face, like the preview card */
p.shop-product-price,
.sd-section p.shop-product-price {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
}
/* cart buttons never had a face set — they fell back to Arial */
.shop-cart-btn {
font-family: 'DM Mono', monospace;
font-size: 0.8rem;
letter-spacing: 0.06em;
}
/* when a category link scrolls to a grid, stop early enough
that the tab bar and sort stay visible under the navbar —
sized for the button tabs, plus breathing room on top */
.shop-grid {
scroll-margin-top: 240px;
}
/* back-CTA joins the textured canvas — its solid fill painted
over the doodle pattern, and the full-width rule on top read
as a hard cut (same fix as the hero rule) */
.ll-backcta {
background: transparent;
}
.ll-backcta__rule {
display: none;
}
/* ══════════════════════════════════════════════
SHOP HERO TYPE CLEANUP — the hierarchy was
inverted (mono micro-label as lede, serif body
as meta row). Restore the site system:
Bricolage headline → serif lede → mono meta
══════════════════════════════════════════════ */
.shop-hero__h1 {
letter-spacing: -0.015em;
margin-top: 0;
}
.shop-hero__sub {
font-family: 'Source Serif 4', Georgia, serif;
font-size: 1.05rem;
letter-spacing: normal;
line-height: 1.6;
color: var(--muted);
opacity: 1;
max-width: 52ch;
margin: 0.9rem 0 0;
text-align: left;
}
.shop-trust-bar {
font-family: 'DM Mono', monospace;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink);
gap: 14px;
margin-top: 1.25rem;
}
/* the ✦ separators recede instead of competing */
.shop-trust-bar > span:nth-child(even) {
opacity: 0.4;
font-size: 0.6rem;
align-self: center;
}
/* tab row joins the same label system — as buttons in the
BOS look, so the three categories read as separate targets */
.shop-tabs {
border-bottom: 0;
gap: 10px;
/* glow needs room: the row clips vertically (overflow-y
hidden for the mobile swipe), padding keeps it inside */
padding: 4px 2px 10px;
}
.shop-tab {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 10px 18px;
border-radius: 8px;
background: var(--paper);
box-shadow:
0 0 0 1px var(--rule),
0 0 14px var(--shadow-2);
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.shop-tab:hover {
color: var(--ink);
box-shadow:
0 0 0 1px var(--rule),
0 0 18px var(--shadow-2);
}
.shop-tab.active {
background: var(--signal);
color: var(--signal-on);
border-bottom: 0;
box-shadow:
0 0 0 1px var(--rule),
0 0 18px var(--shadow-3);
}
/* sort select: swap the browser caret for a drawn chevron that
matches the mono label style of the tabs */
.shop-sort {
appearance: none;
-webkit-appearance: none;
font-family: 'DM Mono', monospace;
font-size: 0.8rem;
padding: 9px 38px 9px 14px;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%232E4B3C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 13px center;
background-size: 11px auto;
}
/* ══════════════════════════════════════════════
MOBILE FIX — the delivery box forced the page
to ~522px wide on phones (horizontal scroll);
its desktop 3rem padding also eats too much of
a 375px screen. Late in the file so it beats
the base padding rule above.
══════════════════════════════════════════════ */
@media (max-width: 768px) {
.sd-delivery__content {
padding: 1.5rem;
}
/* hero content nearly fills the phone viewport it centers in,
so the absolute scroll-hint footer collided with the CTA —
the fixed TEMPLATE DEMO badge carries the same message */
.ll-hero__footer {
display: none;
}
.ll-hero {
padding-bottom: 3.5rem;
}
}
/* ══════════════════════════════════════════════
PRODUCT WHEEL — Dreh-Vitrine on the homepage:
12 bestsellers on an endless belt draped over a
shallow arc; slow drift, drag to spin, click
lifts a card out and shows its ingredients.
Cards are built by initProductWheel() in main.js
══════════════════════════════════════════════ */
.ll-wheel {
/* full-bleed out of the section's 24px padding */
margin: 4px -24px 0;
}
.ll-wheel__hint {
font-family: 'DM Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
text-align: center;
/* the global p measure clamps width and beaches the line on
the left — this label spans the full-bleed wheel */
max-width: none;
margin: 0 auto 4px;
padding: 0 24px;
}
.ll-wheel__stage {
position: relative;
height: 540px;
overflow: hidden;
cursor: grab;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.ll-wheel__stage.dragging { cursor: grabbing; }
.ll-wheel-card {
position: absolute;
left: 50%;
top: 56px;
width: 230px;
background: var(--paper);
border-radius: 14px;
box-shadow:
0 0 0 1px var(--rule),
0 1px 2px var(--shadow-1),
0 10px 28px var(--shadow-1);
overflow: hidden;
will-change: transform;
transition: box-shadow 0.3s ease;
text-align: left;
}
.ll-wheel-card__media { position: relative; }
.ll-wheel-card__media img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: contain;
background: var(--ink);
pointer-events: none;
}
/* ingredients overlay, fades in over the photo on focus */
.ll-wheel-card__ing {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--ink) 90%, transparent);
color: var(--paper);
padding: 13px 15px;
opacity: 0;
transition: opacity 0.28s ease;
pointer-events: none;
overflow: hidden;
}
.ll-wheel-card__ing-title {
display: block;
font-family: 'DM Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--paper);
margin-bottom: 7px;
}
.ll-wheel-card__ing ul {
list-style: none;
margin: 0;
padding: 0;
font-family: 'Source Serif 4', Georgia, serif;
font-size: 0.85rem;
line-height: 1.5;
}
.ll-wheel-card__ing li::before {
content: '· ';
color: var(--steel);
}
/* hovered card gets the site-wide soft glow — box-shadow is
free to transition here, the JS only writes transforms */
.ll-wheel-card:hover {
box-shadow:
0 0 0 1px var(--rule),
0 0 24px var(--shadow-2),
0 14px 34px var(--shadow-3);
}
.ll-wheel-card.focused .ll-wheel-card__ing { opacity: 1; }
.ll-wheel-card.focused {
box-shadow:
0 0 0 1px var(--rule),
0 0 30px var(--shadow-2),
0 24px 50px var(--shadow-3);
}
.ll-wheel-card__info { padding: 11px 14px 13px; }
.ll-wheel-card__name {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
font-size: 1rem;
color: var(--ink);
line-height: 1.2;
}
.ll-wheel-card__meta {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 5px;
}
.ll-wheel-card__price {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
font-size: 1.1rem;
color: var(--ink);
}
.ll-wheel-card__cat {
font-family: 'DM Mono', monospace;
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
}
@media (max-width: 768px) {
.ll-wheel__stage { height: 440px; }
.ll-wheel-card { width: 175px; top: 44px; }
.ll-wheel-card__name { font-size: 0.9rem; }
}
/* ══════════════════════════════════════════════
VIEW-DEMO CTA — was a small gray text link under
the category buttons, findable only by accident;
now a filled BOS button so the demo gets seen
══════════════════════════════════════════════ */
.view-demo-link, .sd-section a.view-demo-link {
display: inline-block;
margin-top: 32px;
padding: 14px 36px;
background: var(--signal);
color: var(--signal-on);
text-decoration: none;
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 2px;
border-radius: 8px;
box-shadow:
0 0 0 1px var(--rule),
0 0 18px var(--shadow-2);
transition: background 0.3s ease, box-shadow 0.3s ease;
}
.view-demo-link:hover, .sd-section a.view-demo-link:hover {
background: var(--signal-deep);
box-shadow:
0 0 0 1px var(--rule),
0 0 26px var(--shadow-3);
}
/* the language spans inside carry their own green from a
broader rule — on the filled button they must run cream */
.view-demo-link span {
color: var(--signal-on);
}
/* ══════════════════════════════════════════════
RECIPE PAGE — click a shop card and the product
opens as a "cookbook page": the photo goes big,
the full ingredient list sits underneath, all on
our butcher-paper pattern like a printed leaf.
══════════════════════════════════════════════ */
/* make every product card read as openable */
.shop-product-card { cursor: pointer; }
.shop-product-card .shop-cart-btn { cursor: pointer; }
/* a quiet expand hint, bottom-right of the photo */
.shop-product-media { position: relative; }
.shop-product-media::after {
content: '⤢';
position: absolute;
right: 10px;
bottom: 10px;
width: 30px;
height: 30px;
display: grid;
place-items: center;
font-size: 1rem;
color: var(--paper);
background: color-mix(in srgb, var(--ink) 72%, transparent);
border-radius: 8px;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.28s ease, transform 0.28s ease;
pointer-events: none;
}
.shop-product-card:hover .shop-product-media::after,
.shop-product-card:focus-visible .shop-product-media::after {
opacity: 1;
transform: translateY(0);
}
/* backdrop — dims the shop, holds the page centred */
.ll-recipe {
position: fixed;
inset: 0;
z-index: 4000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: color-mix(in srgb, var(--ink) 62%, transparent);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
transition: opacity 0.3s ease;
}
.ll-recipe[hidden] { display: none; }
.ll-recipe.open { opacity: 1; }
/* das Blatt selbst — glatte Flaeche, kein Muster (Spec §8) */
.ll-recipe__sheet {
position: relative;
width: min(700px, 100%);
max-height: calc(100vh - 48px);
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 16px;
background-color: var(--paper);
box-shadow:
0 0 0 1px var(--rule),
0 30px 70px var(--shadow-4);
transform: translateY(14px) scale(0.98);
transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ll-recipe.open .ll-recipe__sheet { transform: translateY(0) scale(1); }
/* close button, pinned to the leaf corner */
.ll-recipe__close {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
width: 40px;
height: 40px;
display: grid;
place-items: center;
font-size: 1.15rem;
line-height: 1;
color: var(--paper);
background: color-mix(in srgb, var(--ink) 82%, transparent);
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.ll-recipe__close:hover { background: var(--signal); transform: scale(1.06); }
.ll-recipe__close:focus-visible {
outline: 2px solid var(--signal-deep);
outline-offset: 2px;
}
/* the big photo across the top of the leaf — it yields first
when the viewport gets short, so the leaf never scrolls */
.ll-recipe__media {
width: 100%;
height: min(38vh, 340px);
min-height: 150px;
flex-shrink: 1;
overflow: hidden;
border-radius: 16px 16px 0 0;
background: var(--ink);
}
.ll-recipe__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ll-recipe__body {
flex-shrink: 0;
padding: 18px clamp(20px, 3.5vw, 34px) clamp(18px, 3vw, 26px);
}
/* eyebrow: category · weight, in the mono label voice */
.ll-recipe__cat {
font-family: 'DM Mono', monospace;
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 8px;
}
.ll-recipe__name {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
font-size: clamp(1.45rem, 3.5vw, 1.9rem);
line-height: 1.05;
color: var(--ink);
}
.ll-recipe__price {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
font-size: 1.25rem;
color: var(--ink);
margin-top: 6px;
display: flex;
align-items: baseline;
gap: 12px;
}
.ll-recipe__perkg {
font-family: 'DM Mono', monospace;
font-weight: 400;
font-size: 0.8rem;
letter-spacing: 0.04em;
color: var(--muted);
}
/* a hand-drawn-feeling rule between the header and the recipe */
.ll-recipe__rule {
height: 1px;
margin: 14px 0;
border: 0;
background: repeating-linear-gradient(
90deg,
var(--rule) 0 10px,
transparent 10px 18px
);
}
.ll-recipe__ing-title {
display: block;
font-family: 'DM Mono', monospace;
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: 10px;
}
/* the ingredients laid out like a printed recipe column */
.ll-recipe__ing ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 7px 24px;
font-family: 'Source Serif 4', Georgia, serif;
font-size: 0.98rem;
line-height: 1.4;
color: var(--ink);
}
@media (min-width: 560px) {
.ll-recipe__ing ul { grid-template-columns: 1fr 1fr; }
}
.ll-recipe__ing li {
position: relative;
padding-left: 20px;
border-bottom: 1px dotted var(--rule);
padding-bottom: 7px;
}
.ll-recipe__ing li::before {
content: '';
position: absolute;
left: 2px;
top: 0.62em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--signal);
}
/* add-to-cart, full width, the BOS filled look */
.ll-recipe__cart {
margin-top: 16px;
width: 100%;
padding: 12px 24px;
font-family: 'Source Serif 4', Georgia, serif;
font-size: 1rem;
letter-spacing: 0.06em;
color: var(--signal-on);
background: var(--signal);
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow:
0 0 0 1px var(--rule),
0 0 14px var(--shadow-2);
transition: background 0.25s ease, box-shadow 0.25s ease;
}
.ll-recipe__cart:hover {
background: var(--signal-deep);
box-shadow:
0 0 0 1px var(--rule),
0 0 22px var(--shadow-3);
}
.ll-recipe__cart.added { background: var(--ink); }
/* the ripple from the shared cart handler needs a clip host */
.ll-recipe__cart { position: relative; overflow: hidden; }
@media (max-width: 560px) {
.ll-recipe { padding: 12px; }
.ll-recipe__sheet { max-height: calc(100vh - 24px); }
.ll-recipe__media { height: min(32vh, 280px); min-height: 130px; }
}
/* short desktop windows: shave the fixed parts a little more */
@media (max-height: 620px) {
.ll-recipe__media { min-height: 110px; }
.ll-recipe__rule { margin: 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
.ll-recipe,
.ll-recipe__sheet { transition: none; }
.ll-recipe__sheet { transform: none; }
}
/* while a recipe leaf is open the page underneath holds still */
body.ll-recipe-open { overflow: hidden; }
/* ============================================================
KATEGORIE-BUTTONS (Startseite)
Sekundaer-CTA nach Spec §7: transparent, --ink Text,
--ink 1px Border. Rechteckig, kein Glow, kein Pfeil.
============================================================ */
.cat-btn-row {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.cat-btn, .sd-section a.cat-btn {
font-family: 'Bricolage Grotesque', sans-serif;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 0.06em;
padding: 14px 36px;
border: 1px solid var(--ink);
border-radius: 8px;
color: var(--ink);
background: transparent;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
}
.cat-btn:hover, .sd-section a.cat-btn:hover {
background: var(--ink);
color: var(--paper);
}
.cat-btn:focus-visible, .sd-section a.cat-btn:focus-visible {
outline: 2px solid var(--signal-deep);
outline-offset: 2px;
}
/* ============================================================
FOKUS — Spec §7: 2px solid --signal-deep, offset 2px.
Global auf alles Fokussierbare, damit Tastaturnutzung
ueberall sichtbar bleibt.
============================================================ */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--signal-deep);
outline-offset: 2px;
}
/* ============================================================
REDUCED MOTION — global (Spec §9.8)
Die bestehenden Bloecke decken nur Hover-Effekte ab;
hero-fadeup, bounce und badge-pulse liefen weiter.
Wichtig: .hero-anim startet auf opacity:0 und wird erst
durch die Animation sichtbar. Nur "animation:none" wuerde
den Hero unsichtbar lassen — die Sichtbarkeit muss mit.
============================================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Endzustand sofort, statt unsichtbar zu bleiben */
.hero-anim,
.reveal {
opacity: 1 !important;
transform: none !important;
}
/* rein dekorative Dauerschleifen halten an */
.ll-bounce,
.demo-badge {
animation: none !important;
}
}
/* ============================================================
PAPIER-GRUND — technische Zeichnung als Untergrund
images/background.webp, Konstruktionsskizzen von Brot & Wurst.
Liegt direkt auf den hellen Flaechen, nicht als Pseudo-Element:
.sd-section hat einen deckenden --paper-Grund und haette ein
dahinterliegendes Element uebermalt.
Zwei Ebenen: ein Papier-Schleier ueber der Zeichnung daempft
die Linien. background-blend-mode multiply sorgt dafuer, dass
das cremefarbene Bildfeld --paper nicht waermer faerbt — nur
die Tuschelinien schlagen durch.
Staerke ueber --grain-veil steuern: hoeher = leiser.
============================================================ */
:root {
--grain-veil: 82%;
}
body,
.sd-section {
background-image:
linear-gradient(
color-mix(in srgb, var(--paper) var(--grain-veil), transparent),
color-mix(in srgb, var(--paper) var(--grain-veil), transparent)
),
url('../images/background.webp');
background-size: auto, 1100px auto;
background-repeat: repeat, repeat;
background-blend-mode: normal, multiply;
}
/* Rechtsseiten und dunkle Zonen bleiben glatt */
.legal-page,
.ll-hero,
.showcase-bridge,
.ll-nav,
.ll-footer {
background-image: none;
}
/* ============================================================
MAUSZEIGER — Punkt + nachziehender Ring
Der Punkt sitzt exakt auf der Maus, der Ring laeuft mit
Verzoegerung hinterher und zieht sich dabei in Bewegungs-
richtung zur Ellipse. Beides liegt per mix-blend-mode:
difference ueber der Seite und invertiert den Untergrund —
nur so bleibt der Zeiger auf hellem Papier, auf der dunklen
Zone und auf Produktfotos gleichermassen sichtbar.
============================================================ */
.ll-cursor {
position: fixed;
top: 0;
left: 0;
z-index: 10000;
pointer-events: none;
mix-blend-mode: difference;
will-change: transform;
opacity: 0;
transition: opacity 0.25s ease;
}
/* erst zeigen, wenn die Maus das erste Mal bewegt wurde —
sonst klebt der Zeiger beim Laden in der Ecke */
.ll-cursor.is-live { opacity: 1; }
.ll-cursor__dot {
width: 7px;
height: 7px;
margin: -3.5px 0 0 -3.5px;
border-radius: 50%;
background: var(--cursor-ink);
}
.ll-cursor__ring {
width: 38px;
height: 38px;
margin: -19px 0 0 -19px;
border-radius: 50%;
border: 1px solid var(--cursor-ink);
transition: border-width 0.2s ease;
}
/* ueber Klickbarem wird der Ring kraeftiger.
Beide Klassen sitzen auf demselben Element — kein Nachfahre. */
.ll-cursor__ring.ll-cursor--hot { border-width: 2px; }
/* Nur wo es eine echte Maus gibt. Auf Touch bleibt alles wie es war. */
@media (pointer: fine) {
html.ll-cursor-on,
html.ll-cursor-on * { cursor: none; }
/* Textfelder behalten ihren Cursor — dort ist die Schreibmarke
eine Information, kein Dekor */
html.ll-cursor-on input,
html.ll-cursor-on textarea,
html.ll-cursor-on select,
html.ll-cursor-on [contenteditable] { cursor: auto; }
}
/* Ohne Maus oder bei reduzierter Bewegung gar nicht erst anzeigen */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
.ll-cursor { display: none !important; }
}
/* ============================================================
KI-HINWEIS — Transparenzpflicht (EU AI Act, Art. 50)
Steht auf jeder Seite ueber der Footer-Leiste. Bewusst nicht
als kleingedruckte Zeile: synthetische Inhalte muessen klar
und erkennbar als solche gekennzeichnet sein, nicht versteckt.
============================================================ */
.ll-ai-notice {
margin: 0;
padding: 0.85rem 6vw;
background: var(--signal-tint);
border-top: 1px solid var(--rule);
font-family: 'Source Serif 4', Georgia, serif;
font-size: 0.88rem;
line-height: 1.5;
color: var(--ink);
max-width: none;
}
.ll-ai-notice strong {
font-family: 'DM Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
/* --signal traf auf --signal-tint nur 4,46:1. Bei einer
Pflichtangabe nach AI Act Art. 50 ist knapp daneben nicht
gut genug -> die hellere Variante. */
color: var(--signal-deep);
margin-right: 0.4rem;
}