/* Beframed design-systeem Overgenomen uit het oorspronkelijke ontwerp (licht + donker thema). Thema schakelt via het attribuut data-bf-theme op . */ :root { /* Licht thema (default) */ --bf-bg: #f6f3ed; --bf-surface: #fffdf9; --bf-surface-2: #efeae1; --bf-ink: #211c16; --bf-ink-soft: #4a4339; --bf-muted: #8c8273; --bf-line: #e2dacd; --bf-line-strong: #d3c8b6; /* Accent (door Tweaks overschreven) */ --bf-accent: #9a6238; --bf-accent-ink: #fffaf3; --bf-accent-soft: #f0e3d6; /* Typografie (door Tweaks overschreven) */ --bf-serif: "Cormorant Garamond", Georgia, serif; --bf-sans: "Hanken Grotesk", system-ui, sans-serif; --bf-mono: "Spline Sans Mono", ui-monospace, monospace; /* Ritme (door Tweaks overschreven) */ --bf-section-y: 110px; --bf-grid-gap: 28px; --bf-radius: 3px; --bf-maxw: 1320px; --bf-ease: cubic-bezier(.22,.61,.36,1); } [data-bf-theme="dark"] { --bf-bg: #181410; --bf-surface: #211c16; --bf-surface-2: #2a241d; --bf-ink: #f2ece1; --bf-ink-soft: #d2c8b8; --bf-muted: #9a8f7d; --bf-line: #352e25; --bf-line-strong: #443b30; --bf-accent-soft: #2e2419; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bf-bg); color: var(--bf-ink); font-family: var(--bf-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .5s var(--bf-ease), color .5s var(--bf-ease); } ::selection { background: var(--bf-accent); color: var(--bf-accent-ink); } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } .bf-wrap { max-width: var(--bf-maxw); margin: 0 auto; padding: 0 40px; } @media (max-width: 760px) { .bf-wrap { padding: 0 22px; } } /* ---------- Typografie ---------- */ .bf-serif { font-family: var(--bf-serif); font-weight: 500; } .bf-eyebrow { font-family: var(--bf-sans); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--bf-muted); font-weight: 600; } .bf-display { font-family: var(--bf-serif); font-weight: 500; line-height: 1.02; letter-spacing: -0.01em; font-size: clamp(44px, 7vw, 104px); margin: 0; } .bf-h2 { font-family: var(--bf-serif); font-weight: 500; font-size: clamp(30px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.01em; margin: 0; } .bf-h3 { font-family: var(--bf-serif); font-weight: 600; font-size: 23px; line-height: 1.2; margin: 0; } .bf-lead { font-size: 19px; line-height: 1.65; color: var(--bf-ink-soft); max-width: 56ch; } .bf-mono { font-family: var(--bf-mono); font-size: 12px; letter-spacing: .02em; } /* ---------- Knoppen ---------- */ .bf-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: var(--bf-radius); font-size: 14px; font-weight: 600; letter-spacing: .02em; border: 1px solid transparent; background: var(--bf-accent); color: var(--bf-accent-ink); transition: transform .35s var(--bf-ease), background .3s var(--bf-ease), box-shadow .3s var(--bf-ease); white-space: nowrap; } .bf-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(0,0,0,.5); } .bf-btn:active { transform: translateY(0); } .bf-btn--ghost { background: transparent; color: var(--bf-ink); border-color: var(--bf-line-strong); } .bf-btn--ghost:hover { background: var(--bf-surface); border-color: var(--bf-ink); box-shadow: none; } .bf-btn--block { width: 100%; justify-content: center; } .bf-btn--lg { padding: 18px 34px; font-size: 15px; } .bf-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: .02em; border-bottom: 1px solid var(--bf-line-strong); padding-bottom: 3px; transition: border-color .3s var(--bf-ease), gap .3s var(--bf-ease); } .bf-link:hover { border-color: var(--bf-accent); gap: 13px; } .bf-link .bf-arr { transition: transform .3s var(--bf-ease); } .bf-link:hover .bf-arr { transform: translateX(3px); } /* ---------- Placeholder / fotokader ---------- */ .bf-frame { position: relative; width: 100%; overflow: hidden; background: var(--bf-tone, #7c6f5e); border-radius: var(--bf-radius); isolation: isolate; } .bf-frame::before { /* subtiele sfeer + diagonale fijne structuur */ content: ""; position: absolute; inset: 0; z-index: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, rgba(0,0,0,0) 2px 11px), linear-gradient(150deg, rgba(255,255,255,.16), rgba(0,0,0,.30)); mix-blend-mode: soft-light; } .bf-frame::after { content: ""; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 90px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.06); pointer-events: none; } .bf-frame.bf-bw { filter: grayscale(1) contrast(1.03); } .bf-frame__label { position: absolute; left: 14px; bottom: 13px; z-index: 2; display: flex; align-items: center; gap: 8px; font-family: var(--bf-mono); font-size: 10.5px; letter-spacing: .06em; color: rgba(255,255,255,.92); text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,.5); } .bf-frame__dot { width: 6px; height: 6px; border: 1px solid rgba(255,255,255,.8); } .bf-frame__tag { position: absolute; right: 12px; top: 12px; z-index: 2; font-family: var(--bf-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.85); background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.28); padding: 4px 8px; border-radius: 2px; backdrop-filter: blur(2px); } .bf-frame image-slot { position: absolute; inset: 0; z-index: 3; display: block; } .bf-frame__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .bf-frame--upload { background: var(--bf-surface-2); } .bf-frame--upload::before, .bf-frame--upload::after { display: none; } /* aspect ratios */ .bf-ar-landscape { aspect-ratio: 3 / 2; } .bf-ar-portrait { aspect-ratio: 2 / 3; } .bf-ar-square { aspect-ratio: 1 / 1; } .bf-ar-panorama { aspect-ratio: 8 / 3; } /* ---------- Werkkaart ---------- */ .bf-card { display: block; text-align: left; background: none; border: 0; padding: 0; width: 100%; } .bf-card .bf-frame { transition: transform .6s var(--bf-ease), box-shadow .6s var(--bf-ease); box-shadow: 0 1px 2px rgba(0,0,0,.04); } .bf-card:hover .bf-frame { transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(0,0,0,.45); } .bf-card__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 16px; } .bf-card__title { font-family: var(--bf-serif); font-weight: 600; font-size: 19px; line-height: 1.25; } .bf-card__place { font-size: 12.5px; color: var(--bf-muted); letter-spacing: .04em; margin-top: 2px; } .bf-card__price { font-size: 13.5px; color: var(--bf-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; } .bf-card__price b { font-weight: 600; } .bf-card__line { height: 1px; background: var(--bf-line); margin-top: 14px; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--bf-ease); } .bf-card:hover .bf-card__line { transform: scaleX(1); } /* ---------- Header ---------- */ .bf-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bf-bg) 86%, transparent); backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid transparent; transition: border-color .4s var(--bf-ease), background .4s var(--bf-ease); } .bf-header.bf-scrolled { border-bottom-color: var(--bf-line); } .bf-header__row { display: flex; align-items: center; justify-content: space-between; height: 78px; } .bf-logo { font-family: var(--bf-serif); font-weight: 600; font-size: 27px; letter-spacing: .005em; display: inline-flex; align-items: baseline; gap: 2px; } .bf-logo .bf-logo__dot { color: var(--bf-accent); } .bf-nav { display: flex; gap: 34px; align-items: center; } .bf-nav a { font-size: 14.5px; color: var(--bf-ink-soft); position: relative; padding: 4px 0; letter-spacing: .01em; transition: color .25s; } .bf-nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--bf-accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--bf-ease); } .bf-nav a:hover { color: var(--bf-ink); } .bf-nav a:hover::after, .bf-nav a.bf-active::after { transform: scaleX(1); } .bf-nav a.bf-active { color: var(--bf-ink); } .bf-header__tools { display: flex; align-items: center; gap: 20px; } .bf-icon-btn { background: none; border: 0; color: var(--bf-ink); display: inline-flex; align-items: center; gap: 7px; font-size: 14px; position: relative; } .bf-cart-count { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 20px; background: var(--bf-accent); color: var(--bf-accent-ink); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 860px) { .bf-nav { display: none; } } /* ---------- Footer ---------- */ .bf-footer { background: var(--bf-surface); border-top: 1px solid var(--bf-line); margin-top: 0; } .bf-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: 72px 0 56px; } .bf-footer h4 { font-family: var(--bf-sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--bf-muted); margin: 0 0 18px; font-weight: 600; } .bf-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .bf-footer ul a { font-size: 14px; color: var(--bf-ink-soft); } .bf-footer ul a:hover { color: var(--bf-accent); } .bf-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0 36px; border-top: 1px solid var(--bf-line); font-size: 12.5px; color: var(--bf-muted); flex-wrap: wrap; } .bf-pay { display: flex; gap: 8px; align-items: center; } .bf-pay span { font-family: var(--bf-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--bf-muted); border: 1px solid var(--bf-line-strong); border-radius: 3px; padding: 4px 8px; } @media (max-width: 760px) { .bf-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; } } /* ---------- Reveal-animatie ---------- */ .bf-reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--bf-ease), transform .8s var(--bf-ease); } .bf-reveal.bf-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .bf-reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Pills / chips ---------- */ .bf-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 8px 15px; border-radius: 40px; border: 1px solid var(--bf-line-strong); color: var(--bf-ink-soft); background: var(--bf-surface); transition: all .25s var(--bf-ease); white-space: nowrap; } .bf-chip:hover { border-color: var(--bf-ink); color: var(--bf-ink); } .bf-chip.bf-on { background: var(--bf-accent); border-color: var(--bf-accent); color: var(--bf-accent-ink); } .bf-chip .bf-chip__n { opacity: .6; font-variant-numeric: tabular-nums; font-size: 12px; } .bf-chip.bf-on .bf-chip__n { opacity: .8; } /* utility */ .bf-divider { height: 1px; background: var(--bf-line); border: 0; margin: 0; } .bf-tnum { font-variant-numeric: tabular-nums; } /* ---------- Algemeen sectieritme ---------- */ .bf-section { padding: var(--bf-section-y) 0; } .bf-section--top { padding-top: 48px; } .bf-band { background: var(--bf-surface); border-top: 1px solid var(--bf-line); border-bottom: 1px solid var(--bf-line); } .bf-section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 44px; flex-wrap: wrap; } .bf-section__head .bf-lead { max-width: 42ch; } .bf-grid { display: grid; gap: var(--bf-grid-gap); } .bf-grid--3 { grid-template-columns: repeat(3, 1fr); } .bf-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .bf-grid--3, .bf-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .bf-grid--3, .bf-grid--4 { grid-template-columns: 1fr; } } /* ---------- Hero: Etalage ---------- */ .bf-hero--etalage { position: relative; min-height: 88vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; } .bf-hero__media { position: absolute; inset: 0; z-index: 0; } .bf-hero__media .bf-hero__frame { position: absolute; inset: 0; border-radius: 0; height: 100%; aspect-ratio: auto; } .bf-hero__media .bf-hero__frame .bf-frame__img { animation: bf-kenburns 22s ease-out forwards; } @keyframes bf-kenburns { from { transform: scale(1.06); } to { transform: scale(1.13); } } .bf-hero__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, rgba(18,13,9,.86) 0%, rgba(18,13,9,.58) 40%, rgba(18,13,9,.16) 72%, rgba(18,13,9,0) 100%), linear-gradient(0deg, rgba(18,13,9,.62), transparent 50%); } .bf-hero__inner { position: relative; z-index: 3; width: 100%; padding: 0 40px 88px; } .bf-hero__copy { max-width: 620px; text-shadow: 0 2px 24px rgba(0,0,0,.45); } .bf-hero__copy .bf-display { text-shadow: 0 3px 30px rgba(0,0,0,.5); } .bf-hero-enter { animation: bf-hero-enter .9s var(--bf-ease) both; } @keyframes bf-hero-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .bf-hero-enter { animation: none; } } .bf-hero__cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; } .bf-hero__caption { position: absolute; right: 40px; bottom: 30px; color: rgba(255,255,255,.7); letter-spacing: .1em; } @media (max-width: 760px) { .bf-hero__caption { display: none; } .bf-hero__inner { padding-bottom: 56px; } .bf-hero--etalage { min-height: 78vh; } } /* ---------- Hero: Editorial ---------- */ .bf-hero--editorial { padding: 76px 0 30px; } .bf-hero__grid { display: grid; grid-template-columns: 1fr 0.82fr; gap: 64px; align-items: center; } .bf-hero__txt .bf-display { margin-top: 18px; } .bf-hero__stats { display: flex; gap: 44px; margin-top: 48px; } .bf-hero__stats b { display: block; font-size: 40px; line-height: 1; } .bf-hero__stats span { font-size: 12.5px; color: var(--bf-muted); letter-spacing: .04em; } .bf-hero__pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .bf-hero__pair-b { margin-top: 56px; } @media (max-width: 980px) { .bf-hero__grid { grid-template-columns: 1fr; gap: 40px; } .bf-hero__pair { max-width: 560px; } } /* ---------- Materialen-band ---------- */ .bf-mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .bf-mat-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--bf-bg); border: 1px solid var(--bf-line); border-radius: var(--bf-radius); transition: border-color .3s var(--bf-ease), transform .3s var(--bf-ease); } .bf-mat-card:hover { border-color: var(--bf-line-strong); transform: translateY(-3px); } .bf-mat-swatch { width: 42px; height: 42px; border-radius: 3px; border: 1px solid; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); } .bf-mat-name { font-family: var(--bf-serif); font-weight: 600; font-size: 18px; } .bf-mat-sub { font-size: 13px; color: var(--bf-muted); margin-top: 2px; } .bf-mat-card > div { flex: 1; } .bf-mat-from { color: var(--bf-muted); white-space: nowrap; } @media (max-width: 860px) { .bf-mat-grid { grid-template-columns: 1fr; } } /* ---------- Over mij ---------- */ .bf-about { display: grid; grid-template-columns: 0.85fr 1fr; gap: 64px; align-items: center; } .bf-about__media { position: relative; } .bf-about__cap { position: absolute; left: 14px; bottom: 13px; color: rgba(255,255,255,.85); text-shadow: 0 1px 4px rgba(0,0,0,.5); z-index: 4; } .bf-about__sign { font-size: 38px; margin-top: 26px; color: var(--bf-accent); } @media (max-width: 860px) { .bf-about { grid-template-columns: 1fr; gap: 36px; } } /* ---------- Belofte-band ---------- */ .bf-promise { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .bf-promise__n { color: var(--bf-accent); display: block; margin-bottom: 14px; } .bf-promise__item .bf-h3 { margin-bottom: 8px; } .bf-promise__item p { color: var(--bf-ink-soft); font-size: 14.5px; margin: 0; } @media (max-width: 860px) { .bf-promise { grid-template-columns: 1fr 1fr; gap: 30px; } } /* ---------- Collectie ---------- */ .bf-coll-head { padding: 56px 0 36px; } .bf-coll-toolbar { position: sticky; top: 78px; z-index: 40; background: color-mix(in srgb, var(--bf-bg) 90%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--bf-line); border-bottom: 1px solid var(--bf-line); } .bf-coll-toolbar__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; } .bf-chips { display: flex; gap: 9px; flex-wrap: wrap; flex: 1; } .bf-sort { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--bf-muted); white-space: nowrap; } .bf-sort select { font-family: inherit; font-size: 13.5px; color: var(--bf-ink); background: var(--bf-surface); border: 1px solid var(--bf-line-strong); border-radius: var(--bf-radius); padding: 9px 12px; cursor: pointer; } @media (max-width: 760px) { .bf-coll-toolbar { position: static; } .bf-coll-toolbar__row { flex-direction: column; align-items: stretch; } } /* masonry-achtige collectie */ .bf-masonry { columns: 3; column-gap: var(--bf-grid-gap); } .bf-masonry__item { break-inside: avoid; margin-bottom: 38px; } @media (max-width: 980px) { .bf-masonry { columns: 2; } } @media (max-width: 560px) { .bf-masonry { columns: 1; } } /* ---------- Productpagina ---------- */ .bf-product { padding: 26px 0 40px; } .bf-back { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--bf-ink-soft); font-size: 13.5px; padding: 8px 0; margin-bottom: 8px; transition: color .25s, gap .25s; } .bf-back:hover { color: var(--bf-ink); gap: 11px; } .bf-product__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; } @media (max-width: 980px) { .bf-product__grid { grid-template-columns: 1fr; gap: 36px; } } .bf-product__stage { position: sticky; top: 102px; } @media (max-width: 980px) { .bf-product__stage { position: static; } } .bf-stage-wall { position: relative; background: linear-gradient(160deg, var(--bf-surface), var(--bf-surface-2)); border: 1px solid var(--bf-line); border-radius: var(--bf-radius); padding: 70px 40px; min-height: 540px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .bf-stage-frame { position: relative; transition: width .5s var(--bf-ease), max-width .5s var(--bf-ease); } .bf-stage-mat { position: relative; z-index: 2; transition: padding .4s var(--bf-ease), background .4s var(--bf-ease), box-shadow .4s var(--bf-ease); } /* materiaal-uitstraling op de preview */ .bf-stage-mat[data-mat="artframe"] { padding: 18px; background: #f4ede1; box-shadow: 0 0 0 1px #d8c7a8, 0 26px 50px -24px rgba(0,0,0,.5); } .bf-stage-mat[data-mat="canvas"] { padding: 0; box-shadow: 6px 6px 0 -1px rgba(0,0,0,.18), 0 26px 46px -26px rgba(0,0,0,.55); } .bf-stage-mat[data-mat="dibond"] { padding: 0; box-shadow: 0 22px 44px -22px rgba(0,0,0,.55); } .bf-stage-mat[data-mat="acrylic"] { padding: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 30px 56px -24px rgba(0,0,0,.6); } .bf-stage-mat[data-mat="acrylic"]::after { content: ""; position: absolute; inset: 0; z-index: 5; background: linear-gradient(125deg, rgba(255,255,255,.34), rgba(255,255,255,0) 38%); pointer-events: none; } .bf-stage-mat[data-mat="print"] { padding: 8px; background: #fbf8f1; box-shadow: 0 18px 38px -24px rgba(0,0,0,.45); } .bf-stage-mat[data-mat="hdmetal"] { padding: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 24px 48px -22px rgba(0,0,0,.6); } .bf-stage-mat[data-mat="hdmetal"]::after { content: ""; position: absolute; inset: 0; z-index: 5; background: linear-gradient(115deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%); pointer-events: none; } .bf-stage-scale { position: absolute; right: 18px; bottom: 16px; color: var(--bf-muted); background: var(--bf-bg); border: 1px solid var(--bf-line); padding: 5px 10px; border-radius: 3px; } .bf-stage-thumbs { display: flex; justify-content: center; margin-top: 16px; } .bf-config { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--bf-line); } .bf-config__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; gap: 16px; } .bf-config__label { font-family: var(--bf-sans); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--bf-ink); } .bf-config__hint { font-size: 13px; color: var(--bf-muted); text-align: right; } .bf-mat-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .bf-mat-opt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--bf-line-strong); border-radius: var(--bf-radius); background: var(--bf-surface); transition: all .2s var(--bf-ease); text-align: left; } .bf-mat-opt:hover { border-color: var(--bf-ink); } .bf-mat-opt.bf-on { border-color: var(--bf-accent); background: var(--bf-accent-soft); box-shadow: inset 0 0 0 1px var(--bf-accent); } .bf-mat-opt__sw { width: 22px; height: 22px; border-radius: 3px; border: 1px solid; flex-shrink: 0; } .bf-mat-opt__name { font-size: 13px; font-weight: 500; line-height: 1.2; } @media (max-width: 560px) { .bf-mat-options { grid-template-columns: 1fr 1fr; } } .bf-size-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .bf-size-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 14px; border: 1px solid var(--bf-line-strong); border-radius: var(--bf-radius); background: var(--bf-surface); transition: all .2s var(--bf-ease); } .bf-size-opt:hover { border-color: var(--bf-ink); } .bf-size-opt.bf-on { border-color: var(--bf-accent); background: var(--bf-accent-soft); box-shadow: inset 0 0 0 1px var(--bf-accent); } .bf-size-opt__dim { font-size: 20px; line-height: 1; display: flex; align-items: baseline; gap: 3px; } .bf-size-opt__dim span { font-size: 12px; color: var(--bf-muted); } .bf-size-opt__label { font-size: 11px; color: var(--bf-muted); } .bf-size-opt__price { color: var(--bf-ink-soft); margin-top: 2px; } @media (max-width: 560px) { .bf-size-options { grid-template-columns: 1fr 1fr; } } .bf-buybar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 34px; padding: 22px 0 0; border-top: 1px solid var(--bf-line); flex-wrap: wrap; } .bf-buybar__now { font-size: 38px; line-height: 1; display: block; } .bf-buybar__meta { font-size: 12.5px; color: var(--bf-muted); display: block; margin-top: 6px; } .bf-btn--added { background: #3a6b4a; } .bf-usp { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .bf-usp li { font-size: 13.5px; color: var(--bf-ink-soft); padding-left: 22px; position: relative; } .bf-usp li::before { content: "✓"; position: absolute; left: 0; color: var(--bf-accent); font-weight: 700; } /* ---------- Winkelmand ---------- */ .bf-cart { padding: 50px 0 90px; } .bf-cart__steps { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; } .bf-step { display: inline-flex; align-items: center; gap: 9px; background: none; border: 0; font-size: 14px; color: var(--bf-muted); font-weight: 500; } .bf-step span { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--bf-line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .bf-step.bf-on { color: var(--bf-ink); } .bf-step.bf-on span { background: var(--bf-accent); border-color: var(--bf-accent); color: var(--bf-accent-ink); } .bf-step__sep { width: 40px; height: 1px; background: var(--bf-line-strong); } .bf-cart__grid { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; } @media (max-width: 860px) { .bf-cart__grid { grid-template-columns: 1fr; gap: 32px; } } .bf-line { display: grid; grid-template-columns: 92px 1fr auto auto; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--bf-line); } .bf-line__thumb { width: 92px; background: none; border: 0; padding: 0; cursor: pointer; } .bf-line__title { font-size: 18px; } .bf-line__spec { font-size: 13px; color: var(--bf-muted); margin-top: 3px; } .bf-line__remove { background: none; border: 0; color: var(--bf-muted); font-size: 12.5px; text-decoration: underline; padding: 4px 0; margin-top: 6px; cursor: pointer; } .bf-line__remove:hover { color: var(--bf-accent); } .bf-line__qty { display: inline-flex; align-items: center; border: 1px solid var(--bf-line-strong); border-radius: var(--bf-radius); } .bf-line__qty button { width: 34px; height: 36px; background: none; border: 0; font-size: 17px; color: var(--bf-ink); } .bf-line__qty button:hover { background: var(--bf-surface-2); } .bf-line__qty span { min-width: 28px; text-align: center; font-size: 14px; } .bf-line__price { font-size: 19px; } @media (max-width: 560px) { .bf-line { grid-template-columns: 72px 1fr; grid-auto-rows: auto; } .bf-line__thumb { width: 72px; } .bf-line__qty, .bf-line__price { grid-column: 2; justify-self: start; } } .bf-summary { background: var(--bf-surface); border: 1px solid var(--bf-line); border-radius: var(--bf-radius); padding: 28px; position: sticky; top: 102px; } .bf-summary h3 { margin-bottom: 20px; } .bf-summary__row { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--bf-ink-soft); padding: 7px 0; } .bf-summary__total { font-size: 22px; color: var(--bf-ink); } .bf-summary__total .bf-serif { font-size: 26px; } .bf-summary__note { font-size: 12.5px; color: var(--bf-accent); padding: 4px 0; } .bf-summary__fine { font-size: 11.5px; color: var(--bf-muted); margin: 16px 0 0; text-align: center; } /* checkout form */ .bf-checkout { max-width: 560px; } .bf-fieldset { border: 0; padding: 0; margin: 0 0 30px; } .bf-fieldset legend { font-family: var(--bf-sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--bf-ink); margin-bottom: 16px; padding: 0; } .bf-field { margin-bottom: 14px; } .bf-field label { display: block; font-size: 12.5px; color: var(--bf-muted); margin-bottom: 6px; } .bf-field input { width: 100%; font-family: inherit; font-size: 15px; color: var(--bf-ink); background: var(--bf-surface); border: 1px solid var(--bf-line-strong); border-radius: var(--bf-radius); padding: 13px 14px; transition: border-color .2s; } .bf-field input:focus { outline: none; border-color: var(--bf-accent); } .bf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .bf-pay-options { display: flex; flex-direction: column; gap: 10px; } .bf-pay-opt { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border: 1px solid var(--bf-line-strong); border-radius: var(--bf-radius); background: var(--bf-surface); font-size: 14.5px; cursor: pointer; } .bf-pay-opt:has(input:checked) { border-color: var(--bf-accent); background: var(--bf-accent-soft); } .bf-pay-opt input { accent-color: var(--bf-accent); } .bf-done-mark { width: 72px; height: 72px; border-radius: 50%; background: var(--bf-accent); color: var(--bf-accent-ink); font-size: 34px; display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; } /* tweaks-trigger hint */ .bf-edit-off .twk-panel { display: none; } /* ---------- CMS / admin ---------- */ .bf-adm-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; } .bf-adm-head .bf-eyebrow { display: block; margin-bottom: 8px; } .bf-adm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; } .bf-adm-stat { background: var(--bf-surface); border: 1px solid var(--bf-line); border-radius: var(--bf-radius); padding: 22px; } .bf-adm-stat b { font-family: var(--bf-serif); font-size: 40px; line-height: 1; display: block; } .bf-adm-stat span { font-size: 12.5px; color: var(--bf-muted); letter-spacing: .04em; } @media (max-width: 720px) { .bf-adm-stats { grid-template-columns: 1fr 1fr; } } .bf-adm-card { background: var(--bf-surface); border: 1px solid var(--bf-line); border-radius: var(--bf-radius); padding: 28px; } .bf-adm-table { width: 100%; border-collapse: collapse; font-size: 14px; } .bf-adm-table th { text-align: left; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bf-muted); font-weight: 600; padding: 0 14px 12px; border-bottom: 1px solid var(--bf-line); } .bf-adm-table td { padding: 14px; border-bottom: 1px solid var(--bf-line); vertical-align: middle; } .bf-adm-table tr:hover td { background: var(--bf-surface); } .bf-adm-swatch { display: inline-block; width: 30px; height: 30px; border-radius: 3px; } .bf-adm-pill { font-family: var(--bf-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bf-accent); border: 1px solid var(--bf-accent); border-radius: 20px; padding: 2px 8px; margin-left: 8px; } .bf-adm-status { font-size: 12.5px; color: var(--bf-muted); } .bf-adm-status.on { color: #3a6b4a; } [data-bf-theme="dark"] .bf-adm-status.on { color: #8fce9f; } /* ---------- CMS formulieren ---------- */ .bf-adm-form { background: var(--bf-surface); border: 1px solid var(--bf-line); border-radius: var(--bf-radius); padding: 26px; margin-bottom: 28px; } .bf-input { width: 100%; font-family: inherit; font-size: 14.5px; color: var(--bf-ink); background: var(--bf-bg); border: 1px solid var(--bf-line-strong); border-radius: var(--bf-radius); padding: 10px 12px; transition: border-color .2s; } .bf-input:focus { outline: none; border-color: var(--bf-accent); } .bf-input--num { width: 96px; text-align: right; font-variant-numeric: tabular-nums; } .bf-color-row { display: flex; gap: 8px; align-items: center; } .bf-color-row input[type=color] { width: 42px; height: 40px; padding: 0; border: 1px solid var(--bf-line-strong); border-radius: var(--bf-radius); background: none; cursor: pointer; } .bf-check { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--bf-ink-soft); margin-top: 6px; } .bf-adm-section { margin: 30px 0; } .bf-adm-section__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .bf-adm-section__actions { display: flex; gap: 8px; } .bf-adm-table--edit td { padding: 8px 10px; } .bf-adm-table--edit th { padding-bottom: 8px; } .bf-adm-del { background: none; border: 0; color: var(--bf-muted); font-size: 13px; text-decoration: underline; padding: 4px 0; } .bf-adm-del:hover { color: #b4452f; } .bf-adm-actions { display: flex; align-items: center; gap: 14px; margin-top: 28px; } .bf-adm-error { color: #b4452f; background: color-mix(in srgb, #b4452f 10%, transparent); border: 1px solid color-mix(in srgb, #b4452f 35%, transparent); border-radius: var(--bf-radius); padding: 12px 16px; font-size: 14px; margin-top: 18px; } /* ---------- CMS categorieën ---------- */ .bf-cat-add { display: flex; gap: 10px; align-items: center; margin-top: 16px; max-width: 460px; } .bf-cat-add .bf-input { flex: 1; } .bf-adm-ok { color: #3a6b4a; font-size: 14px; margin-top: 14px; } [data-bf-theme="dark"] .bf-adm-ok { color: #8fce9f; } /* ---------- CMS foto's ---------- */ .bf-adm-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 3px; display: block; } .bf-photo-edit { display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: start; } @media (max-width: 860px) { .bf-photo-edit { grid-template-columns: 1fr; gap: 28px; } } .bf-photo-edit__media { position: sticky; top: 24px; } .bf-photo-edit__hint { font-size: 12.5px; color: var(--bf-muted); margin-top: 10px; line-height: 1.5; } .bf-photo-edit__form { background: var(--bf-surface); border: 1px solid var(--bf-line); border-radius: var(--bf-radius); padding: 24px; } .bf-photo-edit__form textarea { resize: vertical; } .bf-toggle-row { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; } .bf-pick { display: flex; flex-wrap: wrap; gap: 8px; } .bf-pick__item { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; padding: 8px 13px; border: 1px solid var(--bf-line-strong); border-radius: 40px; background: var(--bf-bg); cursor: pointer; transition: all .2s var(--bf-ease); } .bf-pick__item:hover { border-color: var(--bf-ink); } .bf-pick__item.bf-on { background: var(--bf-accent-soft); border-color: var(--bf-accent); color: var(--bf-ink); } .bf-pick__item input { accent-color: var(--bf-accent); } /* ---------- In-situ muur-scènes ---------- */ .bf-scenes { display: grid; gap: var(--bf-grid-gap); margin-top: 32px; } .bf-scene { position: relative; width: 100%; margin: 0; border-radius: var(--bf-radius); overflow: hidden; border: 1px solid var(--bf-line); background: var(--bf-surface-2); } .bf-scene__bg { display: block; width: 100%; height: 100%; object-fit: cover; } .bf-scene__art { position: absolute; transform: translate(-50%, -50%); box-sizing: border-box; border: 0.4cqw solid #fdfdfb; box-shadow: 0 2cqw 4cqw -1.6cqw rgba(0,0,0,.55), 0 0 0 0.15cqw rgba(0,0,0,.18); background: #fdfdfb; } .bf-scene__art picture, .bf-scene__art img, .bf-scene__tone { display: block; width: 100%; height: 100%; object-fit: cover; } .bf-scene__art.bf-bw img { filter: grayscale(1) contrast(1.03); } .bf-scene__cap { position: absolute; left: 12px; bottom: 10px; color: rgba(255,255,255,.9); background: rgba(0,0,0,.32); padding: 4px 9px; border-radius: 3px; backdrop-filter: blur(2px); font-size: 10.5px; } .bf-scene { container-type: inline-size; } /* ---------- CMS scènes ---------- */ .bf-scene-staged { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .bf-scene-staged li { font-size: 13.5px; color: var(--bf-ink-soft); } .bf-scene--admin { max-width: 720px; } .bf-scene-target { position: absolute; transform: translate(-50%, -50%); border: 2px solid var(--bf-accent); background: color-mix(in srgb, var(--bf-accent) 12%, transparent); box-sizing: border-box; } .bf-scene-target span { position: absolute; left: 0; top: 0; transform: translateY(-100%); background: var(--bf-accent); color: var(--bf-accent-ink); font-family: var(--bf-mono); font-size: 10px; padding: 2px 6px; white-space: nowrap; } /* ---------- Blazor foutmelding (globaal, niet scoped) ---------- */ #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: var(--bf-ink); color: var(--bf-bg); padding: 13px 22px; font-size: 14px; box-shadow: 0 -1px 8px rgba(0,0,0,.25); } #blazor-error-ui .reload { color: var(--bf-accent); text-decoration: underline; cursor: pointer; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 18px; top: 11px; } /* ---------- Sfeerimpressie: werk in het licht van de scène zetten ---------- */ .bf-scene__art img { filter: saturate(0.9) contrast(0.92) brightness(1.02); } .bf-scene__art::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 42%), linear-gradient(0deg, rgba(20,22,26,0.10), rgba(20,22,26,0) 30%); mix-blend-mode: soft-light; } /* ---------- Inpassing per scène (CSS-variabelen, overschrijft globale standaard) ---------- */ .bf-scene__art img { filter: var(--bf-art-filter, saturate(.9) contrast(.92) brightness(1.02)); } .bf-scene__art::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--bf-wash-color, transparent); opacity: var(--bf-wash-strength, 0); mix-blend-mode: soft-light; } .bf-scene__art::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(125deg, rgb(255 255 255 / var(--bf-sheen, .14)), rgb(255 255 255 / 0) 45%), linear-gradient(0deg, rgb(20 22 26 / .10), rgb(20 22 26 / 0) 30%); mix-blend-mode: soft-light; } /* ---------- CMS: inpassing afstellen ---------- */ .bf-blend { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; } @media (max-width: 860px) { .bf-blend { grid-template-columns: 1fr; } } .bf-blend__controls { display: flex; flex-direction: column; gap: 4px; } .bf-blend__controls label { font-size: 12.5px; color: var(--bf-muted); margin-top: 12px; display: flex; justify-content: space-between; } .bf-blend__controls label b { color: var(--bf-ink); font-variant-numeric: tabular-nums; } .bf-blend__controls input[type=range] { width: 100%; accent-color: var(--bf-accent); } /* ---------- Lijststijlen per materiaal ---------- */ .bf-art { position: absolute; inset: 0; box-sizing: border-box; } .bf-art picture { display: block; width: 100%; height: 100%; } .bf-art img, .bf-art .bf-scene__tone { width: 100%; height: 100%; object-fit: cover; display: block; } .bf-art__gloss { position: absolute; inset: 0; z-index: 7; pointer-events: none; } .bf-art.bf-bw img { filter: grayscale(1) contrast(1.03); } .bf-art--flush { box-shadow: 0 2cqw 4.5cqw -1.6cqw rgba(0,0,0,.5); } .bf-art--canvas { box-shadow: 0.7cqw 0.7cqw 0 -0.1cqw rgba(0,0,0,.16), 0 2cqw 4.5cqw -1.6cqw rgba(0,0,0,.55); } .bf-art--mat { border: 4cqw solid #fdfbf7; background: #fdfbf7; box-shadow: 0 0 0 0.3cqw rgba(0,0,0,.16), 0 2cqw 4.5cqw -1.6cqw rgba(0,0,0,.5); } .bf-art--acrylic { box-shadow: 0 0 0 0.2cqw rgba(255,255,255,.55), 0 2.4cqw 5cqw -1.6cqw rgba(0,0,0,.6); } .bf-art--acrylic .bf-art__gloss { background: linear-gradient(125deg, rgba(255,255,255,.34), rgba(255,255,255,0) 38%); } .bf-art--baklijst { border: 3cqw solid var(--bf-frame-color, #b08a52); box-shadow: inset 0 0 0 0.6cqw rgba(0,0,0,.3), 0 2cqw 4.5cqw -1.4cqw rgba(0,0,0,.55); } /* scene-overlay element wordt nu de container; lijststijl zit op de .bf-art erin */ .bf-scene__art { container-type: inline-size; border: 0; background: transparent; box-shadow: none; } /* productpagina-stage */ .bf-stage-art { position: relative; container-type: inline-size; width: 100%; } /* ---------- Configurator: opties + stage-label ---------- */ .bf-stage-note { text-align: center; color: var(--bf-muted); font-size: 11px; letter-spacing: .06em; margin-top: 14px; text-transform: uppercase; } .bf-opt-list { display: flex; flex-direction: column; gap: 10px; } .bf-opt { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--bf-line-strong); border-radius: var(--bf-radius); background: var(--bf-surface); text-align: left; transition: all .2s var(--bf-ease); } .bf-opt:hover { border-color: var(--bf-ink); } .bf-opt.bf-on { border-color: var(--bf-accent); background: var(--bf-accent-soft); box-shadow: inset 0 0 0 1px var(--bf-accent); } .bf-opt__check { width: 20px; height: 20px; flex-shrink: 0; border: 1px solid var(--bf-line-strong); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--bf-accent-ink); } .bf-opt.bf-on .bf-opt__check { background: var(--bf-accent); border-color: var(--bf-accent); } .bf-opt__name { flex: 1; font-size: 14.5px; } .bf-opt__price { font-size: 13.5px; color: var(--bf-ink-soft); white-space: nowrap; } /* ---------- Login / auth ---------- */ .bf-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 22px; background: var(--bf-bg); } .bf-auth__card { width: 100%; max-width: 420px; background: var(--bf-surface); border: 1px solid var(--bf-line); border-radius: var(--bf-radius); padding: 40px 38px; box-shadow: 0 30px 60px -40px rgba(0,0,0,.4); } .bf-auth__logo { display: inline-block; font-size: 30px; margin-bottom: 26px; } .bf-auth__eyebrow { display: block; } .bf-auth__title { margin: 8px 0 26px; } .bf-auth__form .bf-field { margin-bottom: 16px; } .bf-auth__error { background: color-mix(in srgb, #b4452f 12%, transparent); border: 1px solid color-mix(in srgb, #b4452f 35%, transparent); color: #b4452f; border-radius: var(--bf-radius); padding: 12px 15px; font-size: 14px; margin-bottom: 20px; } .bf-auth__msg { color: #b4452f; font-size: 12.5px; margin-top: 5px; display: block; } .bf-auth__links { margin-top: 20px; font-size: 13.5px; } .bf-auth__links a { color: var(--bf-accent); } .bf-auth__back { color: var(--bf-muted); font-size: 13.5px; } .bf-auth__back:hover { color: var(--bf-ink); } /* ---------- Backoffice statistieken ---------- */ .bf-stats-bar { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-end; background: var(--bf-surface); border: 1px solid var(--bf-line); border-radius: var(--bf-radius); padding: 16px 18px; margin-bottom: 22px; } .bf-stats-bar__group { display: flex; flex-direction: column; gap: 6px; } .bf-stats-bar__group label { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bf-muted); } .bf-stats-bar__group { position: relative; } .bf-stats-bar__group:first-child { flex-direction: row; align-items: flex-end; gap: 10px; } .bf-stats-bar .bf-input { min-width: 150px; } .bf-stats-bar__group:first-child .bf-input { min-width: 80px; } .bf-stats-table th { white-space: nowrap; } .bf-stats-th { cursor: pointer; user-select: none; } .bf-stats-th:hover { color: var(--bf-ink); } .bf-stats-th.bf-on { color: var(--bf-accent); } .bf-stats-th__arr { font-size: 9px; opacity: .6; margin-left: 3px; } .bf-stats-table td:not(:first-child), .bf-stats-table th:not(:first-child) { text-align: right; } .bf-stats-work { display: flex; align-items: center; gap: 12px; } .bf-adm-thumb-wrap { width: 46px; flex-shrink: 0; } .bf-stats-work__actions { display: flex; gap: 10px; align-items: center; font-size: 12px; margin-top: 3px; } .bf-stats-pager { display: flex; align-items: center; gap: 16px; margin-top: 20px; font-size: 13.5px; color: var(--bf-muted); } /* ---------- Favoriet-hartje ---------- */ .bf-frame__fav { position: absolute; top: 10px; right: 10px; z-index: 4; } .bf-fav { background: rgba(255,255,255,.85); border: 0; border-radius: 50%; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(3px); box-shadow: 0 2px 8px -2px rgba(0,0,0,.3); transition: transform .2s var(--bf-ease), background .2s; } .bf-fav:hover { transform: scale(1.1); background: #fff; } .bf-fav__heart { font-size: 18px; line-height: 1; color: #8c8273; } .bf-fav--on .bf-fav__heart { color: var(--bf-accent); } .bf-fav-lg .bf-fav { width: 46px; height: 46px; background: var(--bf-surface); box-shadow: 0 2px 10px -3px rgba(0,0,0,.25); } .bf-fav-lg .bf-fav__heart { font-size: 24px; } /* ---------- Favoriet-hartje op kaarten (buiten de link) ---------- */ .bf-card-wrap { position: relative; } .bf-masonry__item { position: relative; } .bf-card-fav { position: absolute; top: 12px; right: 12px; z-index: 5; } /* ---------- Productpagina: verhaal onder de configurator ---------- */ .bf-product__story { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--bf-line); } .bf-product__story .bf-lead { margin-bottom: 12px; } .bf-product__story .bf-link { background: none; border: 0; padding: 4px 0; cursor: pointer; } /* ---------- Beeldlogo ---------- */ .bf-logo--img { display: inline-flex; align-items: center; } .bf-logo--img img { height: 34px; width: auto; display: block; } .bf-footer .bf-logo--img img { height: 40px; } [data-bf-theme="dark"] .bf-logo--img img { filter: invert(1); } /* ---------- Footer-signatuur ---------- */ .bf-footer__sign { height: 48px; width: auto; display: block; margin-bottom: 14px; } [data-bf-theme="dark"] .bf-footer__sign { filter: invert(1); } .bf-footer__name { font-family: var(--bf-serif); font-weight: 600; font-size: 19px; margin: 0; } .bf-footer__slogan { font-family: var(--bf-serif); font-style: italic; color: var(--bf-accent); font-size: 15.5px; margin: 6px 0 0; } /* ---------- Over de maker ---------- */ .bf-about__photo { background: #fff; border: 1px solid var(--bf-line); border-radius: var(--bf-radius); box-shadow: 0 30px 60px -42px rgba(0,0,0,.45); overflow: hidden; max-width: 380px; } .bf-about__photo img { display: block; width: 100%; height: auto; } .bf-about__logo { height: 50px; width: auto; display: block; margin: 30px 0 0; } [data-bf-theme="dark"] .bf-about__logo { filter: invert(1); } .bf-about__slogan { font-family: var(--bf-serif); font-style: italic; color: var(--bf-accent); font-size: 18px; margin: 8px 0 0; } /* Over-foto: transparante PNG met eigen schaduw — geen kaart eromheen */ .bf-about__photo { background: transparent; border: 0; box-shadow: none; overflow: visible; max-width: 360px; } /* ---------- Mobiel: header compact + geen horizontale overloop ---------- */ html, body { overflow-x: hidden; } @media (max-width: 560px) { .bf-header__row { height: 66px; } .bf-logo { font-size: 21px; } .bf-header__tools { gap: 12px; } .bf-header__tools .bf-icon-btn { font-size: 12.5px; } } /* ---------- Scène-thumbnails ---------- */ .bf-scene-thumbs { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .bf-scene-thumb { padding: 0; border: 2px solid transparent; border-radius: var(--bf-radius); overflow: hidden; cursor: pointer; background: none; width: 96px; aspect-ratio: 16 / 10; transition: border-color .2s var(--bf-ease); } .bf-scene-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .bf-scene-thumb:hover { border-color: var(--bf-line-strong); } .bf-scene-thumb.bf-on { border-color: var(--bf-accent); } /* ---------- Productpagina: titel naast foto (desktop), bovenaan (mobiel/tablet) ---------- */ .bf-product__grid { grid-template-areas: "stage title" "stage config"; column-gap: 56px; row-gap: 0; } .bf-product__stage { grid-area: stage; } .bf-product__title { grid-area: title; } .bf-product__config { grid-area: config; } @media (max-width: 980px) { .bf-product__grid { grid-template-areas: "title" "stage" "config"; row-gap: 28px; } } /* ---------- Stage-breedte per oriëntatie (mobiel groter) ---------- */ .bf-stage-art--wide { width: 100%; } .bf-stage-art--portrait { width: 62%; } .bf-stage-art--square { width: 78%; } @media (max-width: 700px) { .bf-stage-art--portrait { width: 86%; } .bf-stage-art--square { width: 96%; } } /* Mobiel: minder padding rond de stage zodat het werk meer ruimte krijgt */ @media (max-width: 700px) { .bf-stage-wall { padding: 30px 16px; min-height: 0; } .bf-stage-art--portrait { width: 90%; } .bf-stage-art--square { width: 98%; } } /* ---- Juridische / CMS-pagina's ---- */ .bf-doc { max-width: 820px; } .bf-doc__head { padding-bottom: 22px; margin-bottom: 28px; border-bottom: 1px solid var(--bf-line); } .bf-doc__version { color: var(--bf-muted); margin-top: 12px; font-size: 13px; } .bf-doc__body { color: var(--bf-ink); line-height: 1.7; } .bf-doc__body h2 { font-family: var(--bf-serif, "Cormorant Garamond", serif); font-size: 1.6rem; margin: 34px 0 10px; } .bf-doc__body h3 { font-size: 1.05rem; font-weight: 600; margin: 22px 0 6px; } .bf-doc__body p { margin: 0 0 14px; } .bf-doc__body ul { margin: 0 0 16px; padding-left: 22px; } .bf-doc__body li { margin: 0 0 6px; } .bf-doc__body a { color: var(--bf-accent, #9a6238); text-decoration: underline; } /* ---- Eenvoudige rich-text editor (backoffice) ---- */ .bf-rte { border: 1px solid var(--bf-line); border-radius: 10px; overflow: hidden; background: var(--bf-card, #fff); } .bf-rte__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--bf-line); background: var(--bf-band, #f5f1ea); } .bf-rte__bar button { font: inherit; font-size: 13px; line-height: 1; padding: 7px 10px; border: 1px solid var(--bf-line); border-radius: 7px; background: var(--bf-card, #fff); color: var(--bf-ink); cursor: pointer; } .bf-rte__bar button:hover { border-color: var(--bf-accent, #9a6238); color: var(--bf-accent, #9a6238); } .bf-rte__sep { width: 1px; height: 20px; background: var(--bf-line); margin: 0 4px; } .bf-rte__area { min-height: 360px; max-height: 60vh; overflow-y: auto; padding: 18px 20px; line-height: 1.7; outline: none; } .bf-rte__area:focus { box-shadow: inset 0 0 0 2px rgba(154,98,56,.18); } .bf-rte__area h2 { font-family: var(--bf-serif, "Cormorant Garamond", serif); font-size: 1.5rem; margin: 22px 0 8px; } .bf-rte__area h3 { font-size: 1.05rem; font-weight: 600; margin: 16px 0 6px; } .bf-rte__area p { margin: 0 0 12px; } .bf-rte__area ul, .bf-rte__area ol { margin: 0 0 12px; padding-left: 22px; } /* ---- Blog ---- */ .bf-blog-grid { margin-top: 6px; } .bf-blog-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--bf-card, #fff); border: 1px solid var(--bf-line); border-radius: 12px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; } .bf-blog-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.10); } .bf-blog-card__media { aspect-ratio: 3 / 2; background: var(--bf-band, #efe9df); overflow: hidden; } .bf-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .bf-blog-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; } .bf-blog-card__date { color: var(--bf-muted); font-size: 12.5px; } .bf-blog-card__title { font-family: var(--bf-serif, "Cormorant Garamond", serif); font-size: 1.5rem; line-height: 1.15; margin: 0; } .bf-blog-card__intro { color: var(--bf-muted); font-size: 14.5px; line-height: 1.55; margin: 0; } .bf-article-hero { margin: 6px 0 26px; border-radius: 12px; overflow: hidden; } .bf-article-hero img { width: 100%; height: auto; display: block; } /* Uitgelicht artikel op de homepage */ .bf-blog-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; text-decoration: none; color: inherit; background: var(--bf-card, #fff); border: 1px solid var(--bf-line); border-radius: 14px; overflow: hidden; } .bf-blog-feature:hover { box-shadow: 0 14px 34px rgba(0,0,0,.10); } .bf-blog-feature__media { background: var(--bf-band, #efe9df); min-height: 280px; } .bf-blog-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .bf-blog-feature__body { padding: 34px 38px; display: flex; flex-direction: column; justify-content: center; } @media (max-width: 760px) { .bf-blog-feature { grid-template-columns: 1fr; } .bf-blog-feature__media { min-height: 200px; aspect-ratio: 3 / 2; } .bf-blog-feature__body { padding: 24px 22px; } } /* Hoofdafbeelding-bewerker in de backoffice */ .bf-blog-hero-edit { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; } .bf-blog-hero-edit__img { width: 260px; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; border: 1px solid var(--bf-line); } .bf-blog-hero-edit__empty { width: 260px; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; color: var(--bf-muted); font-size: 13.5px; border: 1px dashed var(--bf-line); border-radius: 10px; } /* ---- Materiaalkaart: echte foto of gerenderde mock-up i.p.v. plat kleurvlak ---- */ .bf-mat-card > .bf-mat-media { flex: 0 0 auto; width: 124px; } .bf-mat-media { display: block; } .bf-mat-media > picture { display: block; } .bf-mat-media > picture img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 7px; border: 1px solid var(--bf-line); display: block; } .bf-mat-mock { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 3 / 2; } .bf-mat-media .bf-mat-swatch { width: 100%; height: auto; aspect-ratio: 3 / 2; } @media (max-width: 860px) { .bf-mat-card > .bf-mat-media { width: 104px; } } /* ---- Materiaalpagina: fotogalerij ---- */ .bf-matgal { margin-top: 8px; } .bf-matgal__main { margin: 0; border-radius: 12px; overflow: hidden; background: var(--bf-band, #efe9df); } .bf-matgal__main img { width: 100%; height: auto; display: block; max-height: 560px; object-fit: cover; } .bf-matgal__cap { color: var(--bf-muted); font-size: 13px; margin-top: 10px; } .bf-matgal__thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .bf-matgal__thumb { width: 92px; height: 66px; padding: 0; border: 1px solid var(--bf-line); border-radius: 8px; overflow: hidden; background: none; cursor: pointer; transition: border-color .15s ease; } .bf-matgal__thumb.bf-on { border-color: var(--bf-accent, #9a6238); box-shadow: 0 0 0 2px rgba(154,98,56,.25); } .bf-matgal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- Backoffice: fotogalerij bewerken ---- */ .bf-matgal-edit { display: flex; flex-direction: column; gap: 12px; } .bf-matgal-edit__item { display: flex; align-items: center; gap: 14px; } .bf-matgal-edit__thumb { position: relative; width: 120px; height: 80px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; border: 1px solid var(--bf-line); } .bf-matgal-edit__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .bf-matgal-edit__cover, .bf-matgal-edit__new { position: absolute; left: 6px; top: 6px; font-size: 10.5px; padding: 2px 7px; border-radius: 20px; background: rgba(0,0,0,.6); color: #fff; } .bf-matgal-edit__new { background: var(--bf-accent, #9a6238); } .bf-matgal-edit__item > .bf-input { flex: 1; } .bf-matgal-edit__actions { display: flex; gap: 6px; flex: 0 0 auto; } /* ---- Fotografie-pagina ---- */ .bf-grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 760px) { .bf-grid--2 { grid-template-columns: 1fr; } } .bf-portret-hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end; background-size: cover; background-position: center 28%; } .bf-portret-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 38%); } .bf-portret-hero__inner { position: relative; padding: 0 0 64px; } .bf-portret-hero .bf-display { color: #fff; margin: 6px 0 0; } .bf-portret-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } @media (max-width: 860px) { .bf-portret-team { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } } .bf-portret-member { text-align: center; } .bf-portret-member__photo { width: 180px; height: 180px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; border: 1px solid var(--bf-line); } .bf-portret-member__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .bf-portret-member__name { font-family: var(--bf-serif); font-size: 22px; margin: 0 0 10px; } .bf-portret-member__text { color: var(--bf-muted); font-size: 14.5px; line-height: 1.6; } .bf-portret-member__cam { color: var(--bf-accent, #9a6238); font-size: 12.5px; margin-top: 10px; } .bf-portret-gallery { columns: 4; column-gap: 14px; } @media (max-width: 980px) { .bf-portret-gallery { columns: 3; } } @media (max-width: 700px) { .bf-portret-gallery { columns: 2; } } @media (max-width: 460px) { .bf-portret-gallery { columns: 1; } } .bf-portret-gallery__item { display: block; margin: 0 0 14px; break-inside: avoid; border-radius: 10px; overflow: hidden; } .bf-portret-gallery__item img { width: 100%; height: auto; display: block; transition: transform .25s var(--bf-ease), opacity .25s var(--bf-ease); } .bf-portret-gallery__item:hover img { transform: scale(1.04); opacity: .92; } .bf-testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 760px) { .bf-testimonials { grid-template-columns: 1fr; } } .bf-testimonial { margin: 0; padding: 28px; background: var(--bf-card, #fff); border: 1px solid var(--bf-line); border-radius: 12px; } .bf-testimonial__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; } .bf-testimonial blockquote { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--bf-ink); } .bf-testimonial figcaption { margin-top: 16px; color: var(--bf-muted); letter-spacing: .08em; font-size: 12.5px; } /* Lightbox-carousel */ .bf-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.94); display: flex; align-items: center; justify-content: center; padding: 30px; } .bf-lightbox__fig { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 82vw; } .bf-lightbox__fig img { max-width: 82vw; max-height: 84vh; object-fit: contain; border-radius: 4px; } .bf-lightbox__cap { color: #ccc; font-family: var(--bf-mono, monospace); font-size: 13px; margin-top: 14px; } .bf-lightbox__nav, .bf-lightbox__close { position: absolute; background: rgba(0,0,0,.35); color: #fff; border: 0; cursor: pointer; line-height: 1; border-radius: 50%; transition: background .15s ease; text-shadow: 0 1px 3px rgba(0,0,0,.6); } .bf-lightbox__nav:hover, .bf-lightbox__close:hover { background: rgba(0,0,0,.6); } .bf-lightbox__nav { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 34px; } .bf-lightbox__prev { left: 18px; } .bf-lightbox__next { right: 18px; } .bf-lightbox__close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 26px; } @media (max-width: 560px) { .bf-lightbox__nav { width: 44px; height: 44px; font-size: 26px; } .bf-lightbox__prev { left: 6px; } .bf-lightbox__next { right: 6px; } .bf-lightbox__fig img { max-width: 94vw; } } /* ---- Prijzen-pagina ---- */ .bf-portret-hero--short { min-height: 42vh; } .bf-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; } @media (max-width: 920px) { .bf-price-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .bf-price-grid { grid-template-columns: 1fr; } } .bf-price-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--bf-card, #fff); border: 1px solid var(--bf-line); border-radius: 12px; padding: 26px 24px; transition: border-color .2s var(--bf-ease), transform .2s var(--bf-ease), box-shadow .2s var(--bf-ease); } .bf-price-card:hover { transform: translateY(-3px); border-color: var(--bf-line-strong, #cdbfa6); box-shadow: 0 14px 34px rgba(0,0,0,.08); } .bf-price-card__name { font-family: var(--bf-serif); font-size: 20px; margin: 0; } .bf-price-card__price { font-size: 34px; color: var(--bf-accent, #9a6238); margin: 10px 0 0; } .bf-price-card__line { height: 1px; background: var(--bf-line); margin: 16px 0; } .bf-price-card__items { list-style: none; padding: 0; margin: 0; flex: 1; } .bf-price-card__items li { padding: 6px 0 6px 22px; position: relative; color: var(--bf-muted); font-size: 14.5px; } .bf-price-card__items li::before { content: "·"; position: absolute; left: 8px; color: var(--bf-accent, #9a6238); font-weight: 700; } .bf-price-card__cta { margin-top: 18px; } /* Contactformulier */ .bf-contact-form { margin-top: 8px; } .bf-contact-form .bf-field { margin-bottom: 16px; } .bf-contact-form .validation-message { color: #b3402e; font-size: 13px; margin-top: 4px; display: block; } /* ---- Klantaccount ---- */ .bf-account-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 22px 0 30px; padding-bottom: 16px; border-bottom: 1px solid var(--bf-line); } .bf-account-nav a { text-decoration: none; color: var(--bf-muted); font-size: 14.5px; padding: 7px 14px; border-radius: 20px; transition: background .15s ease, color .15s ease; } .bf-account-nav a:hover { color: var(--bf-ink); background: var(--bf-band, #f0ebe2); } .bf-account-nav a.active { color: #fff; background: var(--bf-accent, #9a6238); } .bf-account-nav__logout { margin-left: auto; } .bf-account-nav__logout button { background: none; border: 0; color: var(--bf-muted); font: inherit; font-size: 14px; cursor: pointer; padding: 7px 10px; } .bf-account-nav__logout button:hover { color: var(--bf-ink); text-decoration: underline; } .bf-account-card { display: block; text-decoration: none; color: inherit; padding: 24px; background: var(--bf-card, #fff); border: 1px solid var(--bf-line); border-radius: 12px; transition: border-color .2s var(--bf-ease), transform .2s var(--bf-ease); } .bf-account-card:hover { transform: translateY(-3px); border-color: var(--bf-line-strong, #cdbfa6); } .bf-account-card h3 { margin: 0 0 8px; } .bf-account-card p { color: var(--bf-muted); font-size: 14.5px; margin: 0 0 14px; } /* Inlog-/registratie-hint bij afrekenen en bevestiging */ .bf-checkout-login { background: var(--bf-band, #f0ebe2); border: 1px solid var(--bf-line); border-radius: 10px; padding: 14px 16px; font-size: 14px; color: var(--bf-muted); margin-bottom: 22px; line-height: 1.55; } .bf-checkout-login a { color: var(--bf-accent, #9a6238); text-decoration: underline; } /* ---- Backoffice: besteldetail ---- */ .bf-adm-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; } @media (max-width: 900px) { .bf-adm-cols { grid-template-columns: 1fr; } } .bf-adm-pill.bf-pill--ok { background: #e3efe3; color: #2f6b39; } .bf-adm-pill.bf-pill--wait { background: #f3ecd9; color: #8a6d2f; } .bf-adm-pill.bf-pill--off { background: #efe7e3; color: #8a5a48; } /* ---- Albums ---- */ .bf-album-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; } @media (max-width: 980px) { .bf-album-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .bf-album-grid { grid-template-columns: 1fr; } } .bf-album-card { display: block; text-decoration: none; color: inherit; background: var(--bf-card, #fff); border: 1px solid var(--bf-line); border-radius: 12px; overflow: hidden; transition: transform .15s var(--bf-ease), box-shadow .15s var(--bf-ease); } .bf-album-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.10); } .bf-album-card__cover { aspect-ratio: 1 / 1; background: var(--bf-band, #efe9df); } .bf-album-card__cover picture { display: block; width: 100%; height: 100%; } .bf-album-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .bf-album-card__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .bf-album-card__strip picture { display: block; } .bf-album-card__strip img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; } .bf-album-card__meta { padding: 15px 18px 18px; } .bf-album-card__name { font-family: var(--bf-serif); font-size: 19px; margin: 0 0 3px; } .bf-album-card__count { color: var(--bf-muted); font-size: 13.5px; } /* ---- Backoffice: album bewerken ---- */ .bf-album-edit-list { display: flex; flex-direction: column; gap: 14px; } .bf-album-edit { display: flex; gap: 16px; padding: 14px; background: var(--bf-card, #fff); border: 1px solid var(--bf-line); border-radius: 12px; } .bf-album-edit__cover { width: 96px; height: 96px; flex: 0 0 auto; border-radius: 8px; overflow: hidden; border: 1px solid var(--bf-line); background: var(--bf-band, #efe9df); display: flex; align-items: center; justify-content: center; } .bf-album-edit__cover img { width: 100%; height: 100%; object-fit: cover; } .bf-album-edit__nocover { color: var(--bf-muted); font-size: 11.5px; text-align: center; } .bf-album-edit__fields { flex: 1; min-width: 0; } .bf-album-edit__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; } /* ---- Crop-voorbeeld op de productpagina ---- */ .bf-crop { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .bf-crop::before, .bf-crop::after { content: ""; position: absolute; background: rgba(18,14,10,.55); } .bf-crop--x::before, .bf-crop--x::after { top: 0; bottom: 0; width: var(--strip); } .bf-crop--x::before { left: 0; } .bf-crop--x::after { right: 0; } .bf-crop--y::before, .bf-crop--y::after { left: 0; right: 0; height: var(--strip); } .bf-crop--y::before { top: 0; } .bf-crop--y::after { bottom: 0; } .bf-crop-note { max-width: 46ch; margin: 8px auto 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--bf-muted); } /* ---- Mobiel menu (hamburger) ---- */ .bf-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 36px; height: 36px; padding: 0; background: none; border: 0; cursor: pointer; } .bf-burger span { display: block; height: 2px; width: 20px; margin: 0 auto; background: var(--bf-ink); transition: transform .25s var(--bf-ease), opacity .2s ease; } .bf-mobilemenu { display: none; flex-direction: column; padding: 6px 22px 16px; background: var(--bf-bg); border-top: 1px solid var(--bf-line); } .bf-mobilemenu a { padding: 13px 2px; font-size: 16px; color: var(--bf-ink-soft); border-bottom: 1px solid var(--bf-line); } .bf-mobilemenu a:last-child { border-bottom: 0; } .bf-mobilemenu a:hover { color: var(--bf-ink); } @media (max-width: 860px) { .bf-burger { display: flex; } .bf-header.bf-menu-open .bf-mobilemenu { display: flex; } .bf-header.bf-menu-open .bf-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .bf-header.bf-menu-open .bf-burger span:nth-child(2) { opacity: 0; } .bf-header.bf-menu-open .bf-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } } @media (max-width: 560px) { .bf-hide-mobile { display: none; } } /* ---- Fotosessie-pagina's ---- */ .bf-service-list { list-style: none; padding: 0; margin: 10px 0 0; } .bf-service-list li { position: relative; padding: 6px 0 6px 22px; color: var(--bf-ink); line-height: 1.55; } .bf-service-list li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--bf-accent, #9a6238); } .bf-service-quote { margin: 24px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--bf-line); font-style: italic; color: var(--bf-muted); line-height: 1.6; } .bf-service-quote span { display: block; margin-top: 8px; font-style: normal; font-size: 13px; letter-spacing: .04em; } /* Sessiepagina: grotere, ingekaderde foto (i.p.v. de kleine transparante over-foto) */ .bf-about--service { grid-template-columns: 1.05fr 1fr; } .bf-about--service .bf-about__photo { max-width: none; background: #fff; border: 1px solid var(--bf-line); border-radius: var(--bf-radius); box-shadow: 0 30px 60px -42px rgba(0,0,0,.4); overflow: hidden; } @media (max-width: 860px) { .bf-about--service { grid-template-columns: 1fr; } }