/* blocks.css — Live-Site styles for the Bimberg Block-Builder. * * Plan-11 (Deploy) copies this file to /var/www/apps/bimberg-photonics/blocks.css * and injects into the of all * 18 live HTMLs (between a marker, parallel to the * body marker). * * RULES: * - CSS variables ONLY (--green, --gold, --dark-2, --dark-3, --text, --text-muted, * --border, --radius-lg, --font-head). NO hex codes. * - Variables are defined in the live-site styles.css; this file consumes them * and provides safe fallbacks (var(--x, fallback)) for dev/standalone preview. * - Mobile breakpoint: 720px (column collapse), 900px (card-grid collapse). */ /* ─── BLK-01 Heading ─────────────────────────────────────────────────────── */ .block-heading { padding: 32px 0; } .block-heading h2 { font-family: var(--font-head, 'Playfair Display', serif); margin: 0; } .block-heading-s h2 { font-size: 1.5rem; } .block-heading-m h2 { font-size: 2rem; } .block-heading-l h2 { font-size: 3rem; } .block-heading .text-green { color: var(--green); } /* ─── BLK-02 Paragraph ───────────────────────────────────────────────────── */ .block-paragraph { padding: 24px 0; } .block-paragraph .post-body { line-height: 1.7; color: var(--text); } .block-width-narrow .container { max-width: 720px; } .block-width-wide .container { max-width: 1100px; } .block-width-full .container { max-width: 100%; padding: 0; } /* ─── BLK-03 Image ───────────────────────────────────────────────────────── */ .block-image { padding: 32px 0; } .block-image figure { margin: 0; } .block-image img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg, 8px); } .block-image figcaption { color: var(--text-muted); font-size: 0.9rem; margin-top: 8px; text-align: center; } /* ─── BLK-04 Image+Text ──────────────────────────────────────────────────── */ .block-image-text { padding: 48px 0; } .block-image-text-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .block-side-left .block-image-text-grid { /* Reverse the visual order: image on the left. */ direction: rtl; } .block-side-left .block-image-text-grid > * { direction: ltr; } .block-image-text-img img { width: 100%; height: auto; border-radius: var(--radius-lg, 8px); object-fit: cover; } @media (max-width: 720px) { .block-image-text-grid { grid-template-columns: 1fr; } } /* ─── BLK-05 Quote ───────────────────────────────────────────────────────── */ .block-quote { padding: 32px 0; } .block-quote blockquote { margin: 0; padding: 24px 32px; border-left: 4px solid var(--green); background: var(--dark-2, rgba(255, 255, 255, 0.02)); border-radius: 0 var(--radius-lg, 8px) var(--radius-lg, 8px) 0; } .block-accent-gold blockquote { border-left-color: var(--gold); } .block-quote footer { margin-top: 16px; font-size: 0.9rem; color: var(--text-muted); } .block-quote-role { font-style: italic; } /* ─── BLK-06 Gallery ─────────────────────────────────────────────────────── */ .block-gallery { padding: 32px 0; } .block-gallery-grid { display: grid; gap: 16px; } .block-gallery.block-cols-2 .block-gallery-grid { grid-template-columns: repeat(2, 1fr); } .block-gallery.block-cols-3 .block-gallery-grid { grid-template-columns: repeat(3, 1fr); } @media (max-width: 720px) { .block-gallery-grid { grid-template-columns: 1fr !important; } } .block-gallery img { width: 100%; height: 240px; object-fit: cover; border-radius: var(--radius-lg, 8px); } .block-gallery figcaption { color: var(--text-muted); font-size: 0.85rem; margin-top: 6px; } /* ─── BLK-07 Team Member ─────────────────────────────────────────────────── */ .block-team-member { padding: 48px 0; } .block-team-grid { display: grid; gap: 32px; } .block-layout-portrait-left .block-team-grid { grid-template-columns: 240px 1fr; align-items: start; } .block-layout-portrait-top .block-team-grid { grid-template-columns: 1fr; max-width: 600px; } .block-layout-portrait-top .block-team-portrait { max-width: 240px; margin: 0 auto; } .block-team-portrait img { width: 100%; height: auto; border-radius: var(--radius-lg, 8px); object-fit: cover; } .block-team-role { color: var(--text-muted); font-style: italic; margin-bottom: 16px; } /* ─── BLK-08 Spacer ──────────────────────────────────────────────────────── */ .block-spacer { padding: 0; } /* ─── BLK-09 Card Grid ───────────────────────────────────────────────────── */ .block-card-grid { padding: 48px 0; } .block-card-grid-list { display: grid; gap: 24px; } .block-card-grid.block-cols-2 .block-card-grid-list { grid-template-columns: repeat(2, 1fr); } .block-card-grid.block-cols-3 .block-card-grid-list { grid-template-columns: repeat(3, 1fr); } .block-card-grid.block-cols-4 .block-card-grid-list { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .block-card-grid-list { grid-template-columns: 1fr !important; } } .block-card { padding: 24px; background: var(--dark-3, rgba(255, 255, 255, 0.03)); border: 1px solid var(--border, rgba(255, 255, 255, 0.08)); border-radius: var(--radius-lg, 8px); display: block; text-decoration: none; color: inherit; } .block-card-icon { font-size: 1.5rem; color: var(--green); margin-bottom: 12px; } .block-card-icon-filled .block-card-icon { background: var(--green); color: var(--dark-2); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-lg, 8px); } /* ─── BLK-10 CTA Button ──────────────────────────────────────────────────── */ .block-cta-button { padding: 32px 0; } .block-cta-align-left .container { text-align: left; } .block-cta-align-center .container { text-align: center; } .block-cta-align-right .container { text-align: right; } .block-cta-button .btn { display: inline-block; padding: 12px 28px; border-radius: var(--radius-lg, 8px); text-decoration: none; font-weight: 600; } .block-cta-button .btn-primary { background: var(--green); color: var(--dark-2, #fff); } .block-cta-button .btn-ghost { background: transparent; color: var(--green); border: 2px solid var(--green); } /* ─── BLK-11 List ────────────────────────────────────────────────────────── */ .block-list { padding: 24px 0; } .block-list-items { line-height: 1.7; } .block-list.block-cols-2 .block-list-items { column-count: 2; column-gap: 32px; } .block-list-check { list-style: none; padding-left: 0; } .block-list-check li::before { content: "✓ "; color: var(--green); font-weight: 700; } .block-list-numbered { padding-left: 1.5rem; } .block-list-bullet { padding-left: 1.5rem; } /* ─── BLK-12 Video ───────────────────────────────────────────────────────── */ .block-video { padding: 32px 0; } .block-video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; border-radius: var(--radius-lg, 8px); } .block-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .block-video-caption { color: var(--text-muted); font-size: 0.9rem; margin-top: 8px; text-align: center; } .block-video-error { color: var(--text-muted); font-style: italic; padding: 24px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-lg, 8px); } /* ─── BLK-13 PDF Download ────────────────────────────────────────────────── */ .block-pdf-download { padding: 24px 0; } .block-pdf-link { display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--dark-3, rgba(255, 255, 255, 0.03)); border: 1px solid var(--border, rgba(255, 255, 255, 0.08)); border-radius: var(--radius-lg, 8px); text-decoration: none; color: inherit; min-width: 320px; } .block-pdf-icon { font-size: 1.5rem; } .block-pdf-title { font-weight: 600; } .block-pdf-size { color: var(--text-muted); font-size: 0.85rem; margin-left: auto; } .block-pdf-download.block-style-inline .block-pdf-link { background: transparent; border: none; padding: 0; min-width: 0; } /* ─── BLK-14 Accordion ───────────────────────────────────────────────────── */ .block-accordion { padding: 32px 0; } .block-accordion-item { border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08)); padding: 16px 0; } .block-accordion-q { font-weight: 600; cursor: pointer; padding: 8px 0; } .block-accordion-a { padding: 16px 0 8px 0; color: var(--text); line-height: 1.7; } /* ─── Editor-only fallback banner (rendered by the preview endpoint, never on live) */ .block-fallback-banner { background: var(--gold, #fbbf24); color: var(--dark-2, #1a1a1a); border-left: 4px solid var(--gold); padding: 8px 12px; font-size: 0.85rem; margin-bottom: 8px; border-radius: var(--radius-lg, 8px); } /* ─── Image-missing placeholder (editor + live both render this when src absent) */ .block-image-placeholder { padding: 48px; text-align: center; color: var(--text-muted); border: 2px dashed var(--border); border-radius: var(--radius-lg, 8px); font-style: italic; }