/* ========================================================= BeMore.kiwi — Front Page Styles Enqueue this file from functions.php (see functions-snippet.php) Palette matches the brand set on bemore-3d-printing (bemore3d.kiwi): orange #F97316, teal #2DD4BF. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap'); :root{ --bm-black: #0B0D12; /* page canvas — darkest layer */ --bm-ink: #14171C; /* near-black charcoal — elevated surfaces, primary text-on-white */ --bm-ink-soft: #262B33; /* raised panel on top of ink */ --bm-paper: #F7F6F3; /* warm off-white — text on dark, card backgrounds */ --bm-line: #E4E1DA; --bm-teal: #2DD4BF; /* accent 1 — filament teal */ --bm-orange: #F97316; /* accent 2 — filament orange, CTAs */ --bm-on-orange:#0F1115; --bm-muted: #6B7280; /* muted text ON WHITE cards */ --bm-muted-on-dark: #9CA3AF; /* muted text directly on the black canvas */ --bm-radius: 14px; --bm-max: 1180px; --bm-font-head: "Outfit", sans-serif; --bm-font-body: "Inter", sans-serif; } /* * Whole page runs on a black canvas now. Photography and testimonial * cards (.bm-path-card, .bm-recent-work__card, .bm-testimonial, product * cards) stay WHITE on purpose — product/medal photos and reviews read * best on neutral light backgrounds — so this base `color` intentionally * stays dark-ink: everything inside those white cards keeps working by * inheritance. Anything sitting directly on the black canvas (headings, * stray paragraphs) gets its light color set explicitly below. */ /* WordPress puts a `home` class on only for the front page, so this doesn't touch the shop, product, or any other page's background. */ body.home{ background:var(--bm-black); } /* Astra's header uses its own container width (theme default, independent of this template), which is wider than .bm-container — that's why the nav drifts right of where the hero/section content lines up. Force it to match so "Shop" aligns with everything below it. */ body.home #masthead .site-primary-header-wrap{ max-width:var(--bm-max) !important; padding-left:24px !important; padding-right:24px !important; } #bemore-frontpage{ color:var(--bm-ink); background:var(--bm-black); font-family:var(--bm-font-body); font-size:16px; line-height:1.6; } #bemore-frontpage *{ box-sizing:border-box; } #bemore-frontpage img{ max-width:100%; display:block; } #bemore-frontpage h1, #bemore-frontpage h2, #bemore-frontpage h3{ font-family:var(--bm-font-head); letter-spacing:-0.02em; } .bm-container{ max-width:var(--bm-max); margin:0 auto; padding:0 24px; } .bm-section-title{ font-size:clamp(1.6rem,2.5vw,2.2rem); margin:0 0 32px; text-align:center; color:var(--bm-paper); } /* * The active theme (Astra) sets `color` directly on h1–h6, which always * beats an ancestor's inherited color regardless of that ancestor's * specificity. Every heading that needs light text on a dark section * must therefore be colored explicitly here, not just via the parent. */ .bm-notice{ background:#fff3e9; border:1px dashed var(--bm-orange); padding:14px 18px; border-radius:10px; color:var(--bm-ink-soft); font-size:.95rem; } /* Buttons */ .bm-btn{ display:inline-flex; align-items:center; justify-content:center; padding:14px 28px; border-radius:999px; font-weight:600; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; font-size:1rem; } .bm-btn--primary{ background:var(--bm-orange); color:var(--bm-on-orange); box-shadow:0 6px 18px rgba(249,115,22,.35); } .bm-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(249,115,22,.45); } .bm-btn--ghost{ background:transparent; color:var(--bm-paper); border:2px solid rgba(247,246,243,.4); } .bm-btn--ghost:hover{ border-color:var(--bm-paper); } .bm-btn:focus-visible{ outline:2px solid var(--bm-orange); outline-offset:3px; } /* HERO */ .bm-hero{ background:var(--bm-ink); color:var(--bm-paper); padding:96px 0 80px; } .bm-hero__inner{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; } .bm-eyebrow{ color:var(--bm-teal); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.8rem; } .bm-hero h1{ font-size:clamp(2.2rem,4.5vw,3.4rem); line-height:1.08; margin:16px 0 20px; color:var(--bm-paper); } .bm-hero__sub{ font-size:1.15rem; color:#C9CDD4; max-width:46ch; margin-bottom:32px; } .bm-hero__cta{ display:flex; gap:16px; flex-wrap:wrap; } .bm-hero__media-placeholder{ aspect-ratio:4/3; border-radius:var(--bm-radius); background:linear-gradient(135deg, var(--bm-ink-soft), #3a4150); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#8b93a1; font-size:.9rem; text-align:center; padding:24px; } /* TRUST BAR */ .bm-trustbar{ background:var(--bm-ink-soft); color:var(--bm-paper); padding:20px 0; } .bm-trustbar__inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:.92rem; color:#D7DAE0; } .bm-trust-item{ display:flex; align-items:center; gap:10px; } .bm-trust-icon{ width:20px; height:20px; flex-shrink:0; color:var(--bm-teal); } .bm-trust-icon svg{ display:block; width:100%; height:100%; } /* PATHS (catalog vs custom) */ .bm-paths{ padding:80px 0; } .bm-paths__grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; } .bm-path-card{ display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--bm-line); border-radius:var(--bm-radius); overflow:hidden; transition:box-shadow .2s ease, transform .2s ease; } .bm-path-card:hover{ box-shadow:0 14px 30px rgba(20,23,28,.1); transform:translateY(-3px); } .bm-path-card__media{ aspect-ratio:16/9; background:#e9e6df; } .bm-path-card__media--catalog{ background:linear-gradient(135deg,#dfe9e6,#c7dcd6); } .bm-path-card__media--custom{ background:linear-gradient(135deg,#ffe4d6,#ffd0b0); } .bm-path-card__body{ padding:26px; } .bm-path-card__body h3{ margin:0 0 10px; font-size:1.3rem; color:var(--bm-ink); } .bm-path-card__body p{ color:var(--bm-muted); margin:0 0 16px; } .bm-link-arrow{ font-weight:700; color:var(--bm-ink); } /* FEATURED PRODUCTS */ .bm-featured{ padding:0 0 80px; } /* WooCommerce's default product-loop markup renders a title as

, which the theme (see note above) will otherwise colour dark-on-black. Give each product its own white card, same pattern as the other cards. / .bm-featured ul.products li.product{ background:#fff; border:1px solid var(--bm-line); border-radius:var(--bm-radius); padding:16px; text-align:left; } .bm-featured ul.products li.product .woocommerce-loop-producttitle, .bm-featured ul.products li.product .price{ color:var(--bm-ink) !important; } / RECENT CUSTOM WORK / .bm-recent-work{ padding:0 0 80px; } .bm-recent-worksub{ text-align:center; color:var(--bm-muted-on-dark); max-width:56ch; margin:-16px auto 40px; } .bm-recent-workgrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px; } .bm-recent-workcard{ background:#fff; border:1px solid var(--bm-line); border-radius:var(--bm-radius); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; } .bm-recent-workcard:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(20,23,28,.1); } .bm-recent-workmedia{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 42%, rgba(0,0,0,.03), transparent 60%), #eeece7; padding:10px; } .bm-recent-workmedia img{ width:100%; height:100%; object-fit:contain; border-radius:50%; } .bm-recent-worklabel{ padding:10px 12px 14px; text-align:center; } .bm-recent-worklabel strong{ display:block; font-family:var(--bm-font-head); font-size:.95rem; } .bm-recent-worklabel span{ font-size:.78rem; color:var(--bm-muted); } / PROCESS / .bm-process{ background:var(--bm-ink-soft); color:var(--bm-paper); padding:80px 0; } .bm-process .bm-section-title{ color:var(--bm-paper); } .bm-processgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-bottom:48px; } .bm-processstep{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--bm-radius); padding:26px; } .bm-step-num{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--bm-teal); color:var(--bm-ink); font-weight:800; margin-bottom:14px; } .bm-processstep h3{ margin:0 0 8px; font-size:1.05rem; color:var(--bm-paper); } .bm-processstep p{ color:#C9CDD4; font-size:.92rem; margin:0; } .bm-quote-form{ background:#fff; color:var(--bm-ink); border-radius:var(--bm-radius); padding:32px; } .bm-quote-form h3{ margin-top:0; color:var(--bm-ink); } / TESTIMONIALS / .bm-testimonials{ padding:80px 0; } .bm-testimonialsgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .bm-testimonial{ margin:0; padding:26px; background:#fff; border:1px solid var(--bm-line); border-radius:var(--bm-radius); } .bm-testimonial p{ font-size:1.02rem; margin:0 0 14px; } .bm-testimonial cite{ color:var(--bm-muted); font-style:normal; font-size:.88rem; } / FINAL CTA / .bm-final-cta{ background:var(--bm-orange); color:#fff; padding:72px 0; } .bm-final-ctainner{ text-align:center; } .bm-final-cta h2{ font-size:clamp(1.6rem,3vw,2.4rem); margin:0 0 12px; color:#fff; } .bm-final-cta p{ margin:0 0 28px; opacity:.95; } .bm-final-cta .bm-btn--primary{ background:var(--bm-ink); color:var(--bm-paper); box-shadow:none; } / * SITE HEADER — Astra's header is set to float transparently over * whatever is at the very top of the page (position: absolute, not * sticky), which on the front page is the dark hero. Astra's default * site title / tagline / menu colors are dark (meant for a light * header bar), so they're invisible here unless overridden. / #masthead.site-header{ background:transparent; } #masthead .site-title, #masthead .site-title a, #masthead .site-description, #masthead .main-header-menu > .menu-item > a, #masthead .ast-header-navigation-icon svg{ color:var(--bm-paper) !important; } #masthead .ast-header-navigation-icon path, #masthead .ast-header-navigation-icon rect{ fill:var(--bm-paper) !important; } #masthead .main-header-menu > .menu-item > a:hover{ color:var(--bm-teal) !important; } / RESPONSIVE */ @media (max-width: 900px){ .bm-heroinner{ grid-template-columns:1fr; } .bm-pathsgrid{ grid-template-columns:1fr; } .bm-processgrid{ grid-template-columns:1fr 1fr; } .bm-testimonialsgrid{ grid-template-columns:1fr; } .bm-recent-workgrid{ grid-template-columns:repeat(3,1fr); } } @media (max-width: 560px){ .bm-processgrid{ grid-template-columns:1fr; } .bm-trustbarinner{ flex-direction:column; align-items:flex-start; } .bm-recent-workgrid{ grid-template-columns:repeat(2,1fr); } }