/* Theme Name: Boston Marine Theme URI: https://bostonmarine.com Description: Child theme for Boston Marine LLC — a dark, editorial Yamaha-dealer design system layered on the Kadence parent theme. Design tokens (Midnight Marine Blue #086DA5, Bronze #BF8C57), Space Grotesk / Inter / IBM Plex Mono type, and all component styles are pre-wired. Built by Flowlab Media Services (JAMCOM Holdings). Author: Flowlab Media Services Author URI: https://flowlabmedia.com Template: kadence Version: 1.4.5 Requires at least: 6.4 Requires PHP: 7.4 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: boston-marine Tags: marine, dealership, dark, business */ /* ------------------------------------------------------------------------- The complete Boston Marine design system follows. It is enqueued automatically by functions.php (after the Kadence parent). Style pages by applying the component class names (.overline, .btn, .engine, .card, .stat, .tile, .quote, .acc, .post-card, …) in each block's Advanced -> CSS Class field. v1.1.0 — matched to the base44 original (steel #2C82AC borders, Inter 14px buttons/radius 2px, 128px section rhythm, 96px hero, tabular figures) and hardened for accessibility (focus-visible rings, reduced-motion, 48px targets). ------------------------------------------------------------------------- */ /* ========================================================================= BOSTON MARINE — Global Design System Rebuilt for WordPress (Gutenberg / Kadence). Mirrors the base44 prototype. Fonts: Space Grotesk (display), Inter (body), IBM Plex Mono (technical labels) ========================================================================= */ /* ----- Design Tokens ----- */ :root{ /* Core palette */ --bm-navy: #086DA5; /* Midnight Marine Blue — brand + page bg */ --bm-navy-2: #075E8E; /* raised panel */ --bm-navy-3: #06557F; /* card / elevated panel */ --bm-red: #BF8C57; /* Bronze — primary accent (formerly Yamaha Red) */ --bm-red-dark: #A6743F; --bm-on-accent: #041019; /* dark ink for text on bronze fills (buttons/logo/chips) */ --bm-text: #FFFFFF; /* primary text (light slate) */ --bm-text-soft: #E8F1F8; --bm-text-mute: #E6F0F8; /* muted gray labels */ --bm-white: #FFFFFF; --bm-green: #6EE6A0; /* live/status */ /* Borders match the original: solid steel hairline #2C82AC (slate-800) */ --bm-line: #2C82AC; --bm-line-soft: #13618C; --bm-ink: #FFFFFF; /* former-red labels/links on the blue ground */ --bm-accent-warm: #FFE4B0; /* warm accent rules, bullets, marks, body links */ /* Typography */ --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* Layout */ --wrap: 1240px; --gutter: clamp(20px, 5vw, 48px); --radius: 2px; /* buttons/inputs — original uses 2px */ --radius-lg: 2px; /* cards/panels — original is near-square */ --header-h: 77px; } /* ----- Reset ----- */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ margin:0; background:var(--bm-navy); color:var(--bm-text); font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* Respect reduced-motion (ui-ux-pro-max: reduced-motion) */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;} .reveal{opacity:1!important;transform:none!important;} } /* Visible keyboard focus on all interactive elements (ui-ux-pro-max: focus-states) */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.chip:focus-visible,.acc__q:focus-visible{ outline:2px solid var(--bm-ink);outline-offset:3px;border-radius:2px; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;transition:color .2s ease;} button{font-family:inherit;cursor:pointer;} h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.05;margin:0;color:var(--bm-white);letter-spacing:-0.01em;} p{margin:0 0 1rem;} ul{margin:0;padding:0;list-style:none;} /* ----- Layout helpers ----- */ .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);} .section{padding:clamp(72px,10vw,128px) 0;position:relative;} .section--alt{background:var(--bm-navy-2);} .grid{display:grid;gap:28px;} @media(min-width:700px){.g-2{grid-template-columns:repeat(2,1fr);} } @media(min-width:900px){.g-3{grid-template-columns:repeat(3,1fr);} .g-4{grid-template-columns:repeat(4,1fr);} } /* ----- Overline / eyebrow label (mono, tracked) ----- */ .overline{ display:inline-flex;align-items:center;gap:14px; font-family:var(--font-mono); font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase; color:var(--bm-ink);margin-bottom:22px; } .overline::before{content:"";width:36px;height:1px;background:var(--bm-accent-warm);} .overline--mute{color:var(--bm-text-mute);} .overline--mute::before{background:var(--bm-text-mute);} /* ----- Section heading block ----- */ .sec-head{max-width:760px;margin-bottom:56px;} .sec-head h2{font-size:clamp(30px,4.5vw,48px);} .sec-head p{color:var(--bm-text-soft);font-size:18px;margin-top:20px;} .sec-head--split{max-width:none;display:grid;gap:24px;align-items:end;} @media(min-width:900px){.sec-head--split{grid-template-columns:1.3fr 1fr;} } /* ----- Buttons ----- (original: Inter 14px, weight 600, radius 2px, ~50px tall) */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--font-body);font-weight:600;font-size:14px;letter-spacing:0; min-height:48px;padding:14px 24px;border-radius:var(--radius);border:1px solid transparent; transition:transform .15s ease,background .2s ease,border-color .2s ease,color .2s ease; white-space:nowrap;touch-action:manipulation; } .btn svg{width:16px;height:16px;} .btn--primary{background:var(--bm-red);color:var(--bm-on-accent);} .btn--primary:hover{background:var(--bm-red-dark);transform:translateY(-2px);} .btn--ghost{background:rgba(255,255,255,0.02);color:var(--bm-white);border-color:var(--bm-line);} .btn--ghost:hover{border-color:#57A6C9;background:rgba(255,255,255,0.05);} .btn--dark{background:var(--bm-navy-3);color:var(--bm-white);border-color:var(--bm-line);} .btn--dark:hover{border-color:var(--bm-ink);color:#fff;} .btn--block{width:100%;} .btn:active{transform:translateY(0) scale(.985);} /* press feedback (ui-ux-pro-max: scale-feedback) */ .btn .arrow{transition:transform .2s ease;} .btn:hover .arrow{transform:translateX(4px);} /* Section CTA (the "learn more" link to interior pages) */ .sec-cta{ display:inline-flex;align-items:center;gap:12px;margin-top:36px; font-family:var(--font-mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase; color:var(--bm-white);border-bottom:1px solid var(--bm-accent-warm);padding-bottom:6px; } .sec-cta svg{width:16px;height:16px;color:var(--bm-ink);transition:transform .2s ease;} .sec-cta:hover svg{transform:translateX(5px);} /* ========================================================================= HEADER / NAV ========================================================================= */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:100; height:var(--header-h); display:flex;align-items:center; background:rgba(8,109,165,0.65); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--bm-line); transition:background .3s ease,border-color .3s ease; } .site-header.scrolled{background:rgba(8,109,165,0.94);border-color:var(--bm-line);} .site-header .wrap{display:flex;align-items:center;gap:24px;width:100%;} .brand{display:flex;align-items:center;gap:14px;margin-right:auto;} .brand__mark{ width:44px;height:44px;border-radius:var(--radius);background:var(--bm-red); display:grid;place-items:center;font-family:var(--font-display);font-weight:700; color:var(--bm-on-accent);font-size:18px;letter-spacing:-.02em;flex-shrink:0;position:relative; } .brand__mark::after{content:"";position:absolute;bottom:7px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--bm-on-accent);} .brand__name{font-family:var(--font-display);font-weight:700;font-size:17px;color:#fff;letter-spacing:.02em;line-height:1.1;} .brand__tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.24em;color:var(--bm-text-mute);text-transform:uppercase;margin-top:3px;} .nav{display:none;align-items:center;gap:26px;} .nav a{font-size:14px;font-weight:500;color:var(--bm-text);opacity:.82;padding:6px 2px;} .nav a:hover,.nav a.active{opacity:1;color:#fff;} .nav a.active{color:var(--bm-ink);} .header-actions{display:none;align-items:center;gap:12px;} .header-phone{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;color:#fff;padding:11px 18px;border:1px solid var(--bm-line);border-radius:var(--radius);} .header-phone svg{width:15px;height:15px;color:var(--bm-ink);} .header-phone:hover{border-color:rgba(255,255,255,.3);} @media(min-width:1120px){.nav{display:flex;} .header-actions{display:flex;} } /* Mobile nav toggle */ .nav-toggle{display:inline-flex;flex-direction:column;gap:5px;background:none;border:none;padding:10px;margin-left:auto;} .nav-toggle span{width:24px;height:2px;background:#fff;transition:.25s;} .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-toggle.open span:nth-child(2){opacity:0;} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} @media(min-width:1120px){.nav-toggle{display:none;} } .mobile-nav{ position:fixed;inset:var(--header-h) 0 0;z-index:99; background:var(--bm-navy);padding:32px var(--gutter); transform:translateX(100%);transition:transform .3s ease;overflow-y:auto; } .mobile-nav.open{transform:translateX(0);} .mobile-nav a{display:block;font-family:var(--font-display);font-size:22px;font-weight:600;color:#fff;padding:16px 0;border-bottom:1px solid var(--bm-line-soft);} .mobile-nav a.active{color:var(--bm-ink);} .mobile-nav .btn{margin-top:24px;} /* ========================================================================= HERO — tri-mode background (image / youtube / streaming video) ========================================================================= */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:var(--header-h);} .hero__bg{position:absolute;inset:0;z-index:0;background:#053E5C;} .hero__bg img,.hero__bg video,.hero__bg iframe{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover;border:0; } /* YouTube needs 16:9 sizing to cover */ .hero__bg--yt iframe{width:100vw;height:56.25vw;min-height:100vh;min-width:177.77vh;pointer-events:none;} .hero__scrim{position:absolute;inset:0;z-index:1; background: linear-gradient(90deg, rgba(5,44,66,.94) 0%, rgba(5,44,66,.72) 42%, rgba(5,44,66,.35) 100%), linear-gradient(0deg, rgba(5,44,66,.9) 0%, rgba(5,44,66,0) 45%); } .hero .wrap{position:relative;z-index:2;width:100%;} .hero__eyebrow{color:var(--bm-ink);} .hero h1{font-size:clamp(48px,8.6vw,100px);line-height:1.0;margin:8px 0 26px;letter-spacing:-.025em;} .hero__sub{font-size:clamp(17px,2.2vw,20px);color:var(--bm-text-soft);max-width:560px;margin-bottom:40px;} .hero__cta{display:flex;flex-wrap:wrap;gap:14px;} .hero__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center;margin-top:64px;padding-top:26px;border-top:1px solid var(--bm-line-soft);} .hero__slides{display:flex;align-items:center;gap:16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--bm-text-mute);} .hero__slides b{color:var(--bm-white);} .hero__slides .bar{width:34px;height:2px;background:rgba(255,255,255,.18);} .hero__slides .bar.on{background:var(--bm-accent-warm);} .hero__tags{display:flex;gap:26px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--bm-text-mute);text-transform:uppercase;} .hero__tags span{display:inline-flex;align-items:center;gap:8px;} .hero__tags .dot{width:6px;height:6px;border-radius:50%;background:var(--bm-accent-warm);} /* Hero mode switcher (demo control — remove in production) */ .hero-switch{position:absolute;z-index:5;right:20px;bottom:20px;display:flex;gap:6px; background:rgba(5,44,66,.8);border:1px solid var(--bm-line);border-radius:var(--radius);padding:6px;backdrop-filter:blur(8px);} .hero-switch button{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase; color:var(--bm-text-mute);background:none;border:none;padding:7px 11px;border-radius:3px;} .hero-switch button.on{background:var(--bm-red);color:var(--bm-on-accent);} /* ========================================================================= IN-THE-SHOP STATUS TICKER ========================================================================= */ .shopbar{background:var(--bm-navy-3);border-top:1px solid var(--bm-line);border-bottom:1px solid var(--bm-line);} .shopbar .wrap{display:flex;align-items:center;gap:18px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap;} .shopbar__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bm-text-mute);} .shopbar__main{font-family:var(--font-display);font-weight:600;color:#fff;} .shopbar__sub{color:var(--bm-text-soft);font-size:14px;} .live{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--bm-green);} .live .dot{width:8px;height:8px;border-radius:50%;background:var(--bm-green);box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pulse 2s infinite;} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5);}70%{box-shadow:0 0 0 8px rgba(74,222,128,0);}100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}} /* ========================================================================= STAT ROW ========================================================================= */ .stats{display:grid;gap:1px;background:var(--bm-line);border:1px solid var(--bm-line);border-radius:var(--radius-lg);overflow:hidden;} @media(min-width:640px){.stats{grid-template-columns:repeat(2,1fr);} } @media(min-width:960px){.stats{grid-template-columns:repeat(4,1fr);} } .stat{background:var(--bm-navy-2);padding:34px 28px;} .stat b{display:block;font-family:var(--font-display);font-size:clamp(34px,4vw,46px);color:#fff;line-height:1;font-variant-numeric:tabular-nums;} .stat b .u{color:var(--bm-ink);} .stat span{display:block;margin-top:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bm-text-mute);} /* ========================================================================= CARDS ========================================================================= */ .card{background:var(--bm-navy-3);border:1px solid var(--bm-line);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .25s ease,transform .25s ease;} .card:hover{border-color:rgba(191,140,87,.5);transform:translateY(-4px);} /* Engine cards */ .engine{display:flex;flex-direction:column;} .engine__media{position:relative;aspect-ratio:4/3;background:linear-gradient(150deg,#f4f5f7,#dfe3e8);display:grid;place-items:center;} .engine__media img{width:78%;height:78%;object-fit:contain;} .engine__badge{position:absolute;top:14px;left:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--bm-ink);background:rgba(5,44,66,.82);padding:6px 10px;border-radius:3px;} .engine__body{padding:24px;display:flex;flex-direction:column;gap:6px;flex:1;} .engine__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;} .engine__name{font-family:var(--font-display);font-size:21px;font-weight:700;color:#fff;} .engine__price{font-family:var(--font-display);font-size:21px;font-weight:700;color:var(--bm-ink);font-variant-numeric:tabular-nums;} .engine__spec{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--bm-text-mute);text-transform:uppercase;} .engine__msrp{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--bm-text-mute);} .engine__desc{color:var(--bm-text-soft);font-size:14.5px;margin:10px 0 18px;} .engine__actions{margin-top:auto;display:flex;gap:10px;} /* Icon-list / service tiles */ .tile{background:var(--bm-navy-3);border:1px solid var(--bm-line);border-radius:var(--radius-lg);padding:26px;transition:border-color .25s ease,transform .25s ease;} .tile:hover{border-color:rgba(191,140,87,.4);transform:translateY(-3px);} .tile__ico{width:46px;height:46px;border-radius:var(--radius);background:rgba(191,140,87,.1);color:var(--bm-ink);display:grid;place-items:center;margin-bottom:18px;} .tile__ico svg{width:22px;height:22px;} .tile h3{font-size:19px;margin-bottom:8px;} .tile p{color:var(--bm-text-soft);font-size:14.5px;margin:0;} .tile__meta{display:flex;gap:16px;margin-top:16px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--bm-text-mute);text-transform:uppercase;} .tile__meta b{color:var(--bm-white);} /* Knowledge hub / topic cards */ .topic{background:var(--bm-navy-3);border:1px solid var(--bm-line);border-radius:var(--radius-lg);padding:28px;} .topic__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;} .topic h3{font-size:20px;} .topic__count{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--bm-ink);text-transform:uppercase;} .topic li{padding:11px 0;border-top:1px solid var(--bm-line-soft);color:var(--bm-text-soft);font-size:14.5px;display:flex;align-items:center;gap:10px;} .topic li::before{content:"";width:5px;height:5px;background:var(--bm-accent-warm);border-radius:50%;flex-shrink:0;} /* ========================================================================= TABS (compare / service selector) + accordion (FAQ) ========================================================================= */ .chip{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase; padding:10px 16px;border-radius:100px;border:1px solid var(--bm-line);color:var(--bm-text-soft);background:transparent;transition:.2s;} .chip:hover{border-color:rgba(255,255,255,.3);color:#fff;} .chip.on{background:var(--bm-red);border-color:var(--bm-red);color:var(--bm-on-accent);} .chips{display:flex;flex-wrap:wrap;gap:10px;} .accordion{border:1px solid var(--bm-line);border-radius:var(--radius-lg);overflow:hidden;} .acc{border-bottom:1px solid var(--bm-line);} .acc:last-child{border-bottom:none;} .acc__q{width:100%;display:flex;align-items:center;gap:18px;text-align:left;background:var(--bm-navy-3);border:none;padding:24px 26px;color:#fff;} .acc__q .cat{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--bm-ink);text-transform:uppercase;min-width:96px;} .acc__q .q{font-family:var(--font-display);font-weight:600;font-size:17px;flex:1;} .acc__q .pm{width:22px;height:22px;flex-shrink:0;position:relative;} .acc__q .pm::before,.acc__q .pm::after{content:"";position:absolute;background:var(--bm-accent-warm);top:50%;left:50%;transform:translate(-50%,-50%);} .acc__q .pm::before{width:14px;height:2px;} .acc__q .pm::after{width:2px;height:14px;transition:transform .25s ease;} .acc.open .pm::after{transform:translate(-50%,-50%) scaleY(0);} .acc__a{max-height:0;overflow:hidden;transition:max-height .3s ease;background:var(--bm-navy-2);} .acc__a p{padding:0 26px 24px 140px;color:var(--bm-text-soft);margin:0;} @media(max-width:640px){.acc__a p{padding-left:26px;} .acc__q .cat{display:none;} } /* ========================================================================= COMPARE TABLE ========================================================================= */ .ctable{width:100%;border-collapse:collapse;font-size:14.5px;} .ctable th,.ctable td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--bm-line-soft);} .ctable thead th{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bm-text-mute);} .ctable tbody th{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--bm-text-mute);font-weight:500;} .ctable td{color:var(--bm-text);} .ctable .best{color:var(--bm-ink);font-weight:600;} .ctable__wrap{overflow-x:auto;border:1px solid var(--bm-line);border-radius:var(--radius-lg);background:var(--bm-navy-3);} /* ========================================================================= FINANCING CALCULATOR ========================================================================= */ .calc{background:var(--bm-navy-3);border:1px solid var(--bm-line);border-radius:var(--radius-lg);padding:34px;} .calc__field{margin-bottom:24px;} .calc__field label{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bm-text-mute);margin-bottom:12px;} .calc__field label b{color:#fff;} input[type=range]{-webkit-appearance:none;width:100%;height:3px;background:var(--bm-line);border-radius:3px;outline:none;} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--bm-red);cursor:pointer;border:3px solid var(--bm-navy);} input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--bm-red);cursor:pointer;border:3px solid var(--bm-navy);} .calc__out{margin-top:30px;padding-top:26px;border-top:1px solid var(--bm-line);} .calc__out span{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bm-text-mute);} .calc__out b{display:block;font-family:var(--font-display);font-size:44px;color:#fff;margin-top:8px;font-variant-numeric:tabular-nums;} .calc__out b em{color:var(--bm-ink);font-style:normal;font-size:22px;} .calc__note{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--bm-text-mute);margin-top:10px;} /* ========================================================================= GALLERY ========================================================================= */ .gallery{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);} @media(min-width:800px){.gallery{grid-template-columns:repeat(3,1fr);} } .gitem{position:relative;aspect-ratio:1/1;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--bm-line);} .gitem.tall{grid-row:span 2;aspect-ratio:auto;} .gitem img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;} .gitem:hover img{transform:scale(1.06);} .gitem__tag{position:absolute;top:14px;left:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:rgba(5,44,66,.7);padding:6px 10px;border-radius:3px;z-index:2;} .gitem__cap{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(0deg,rgba(5,44,66,.9),transparent);font-family:var(--font-display);font-weight:600;color:#fff;z-index:2;} /* ========================================================================= TESTIMONIALS ========================================================================= */ .quote{background:var(--bm-navy-3);border:1px solid var(--bm-line);border-radius:var(--radius-lg);padding:40px;position:relative;} .quote::before{content:"\201C";font-family:var(--font-display);font-size:90px;color:var(--bm-ink);opacity:.25;position:absolute;top:14px;left:24px;line-height:1;} .quote p{font-size:19px;color:var(--bm-text);line-height:1.6;position:relative;margin:24px 0 26px;} .quote__by{display:flex;align-items:center;gap:14px;} .quote__av{width:48px;height:48px;border-radius:50%;background:var(--bm-red);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:var(--bm-on-accent);} .quote__by b{display:block;color:#fff;font-family:var(--font-display);} .quote__by span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--bm-text-mute);text-transform:uppercase;} .stars{color:var(--bm-ink);letter-spacing:3px;font-size:14px;} /* ========================================================================= CONTACT / FORMS ========================================================================= */ .field{margin-bottom:20px;} .field label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bm-text-mute);margin-bottom:9px;} .field input,.field select,.field textarea{ width:100%;background:var(--bm-navy);border:1px solid var(--bm-line);border-radius:var(--radius); color:#fff;font-family:var(--font-body);font-size:15px;padding:14px 16px;transition:border-color .2s ease; } .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--bm-ink);} .field textarea{min-height:130px;resize:vertical;} .dropzone{border:1px dashed var(--bm-line);border-radius:var(--radius);padding:30px;text-align:center;color:var(--bm-text-mute);font-size:14px;} .info-line{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--bm-line-soft);} .info-line svg{width:20px;height:20px;color:var(--bm-ink);flex-shrink:0;margin-top:2px;} .info-line b{display:block;color:#fff;font-family:var(--font-display);} .info-line span{color:var(--bm-text-soft);font-size:14.5px;} /* ========================================================================= VIDEO CARDS ========================================================================= */ .vcard{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--bm-line);} .vcard img{width:100%;height:100%;object-fit:cover;opacity:.7;transition:.3s;} .vcard:hover img{opacity:.9;transform:scale(1.04);} .vcard__play{position:absolute;inset:0;display:grid;place-items:center;} .vcard__play span{width:56px;height:56px;border-radius:50%;background:rgba(191,140,87,.92);display:grid;place-items:center;} .vcard__play svg{width:20px;height:20px;color:var(--bm-on-accent);margin-left:3px;} .vcard__t{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(0deg,rgba(5,44,66,.92),transparent);z-index:2;} .vcard__t b{color:#fff;font-family:var(--font-display);font-size:15px;} .vcard__dur{position:absolute;top:12px;right:12px;font-family:var(--font-mono);font-size:11px;color:#fff;background:rgba(5,44,66,.75);padding:4px 8px;border-radius:3px;z-index:2;} /* ========================================================================= PAGE HERO (interior pages) ========================================================================= */ .pagehero{position:relative;padding:calc(var(--header-h) + 80px) 0 80px;overflow:hidden;border-bottom:1px solid var(--bm-line);} .pagehero__bg{position:absolute;inset:0;z-index:0;} .pagehero__bg img{width:100%;height:100%;object-fit:cover;opacity:.35;} .pagehero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--bm-navy),rgba(5,44,66,.55));} .pagehero .wrap{position:relative;z-index:2;} .pagehero h1{font-size:clamp(42px,7vw,88px);margin:10px 0 20px;} .pagehero p{color:var(--bm-text-soft);font-size:19px;max-width:620px;} .crumbs{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--bm-text-mute);} .crumbs a:hover{color:var(--bm-ink);} .crumbs span{color:var(--bm-ink);} /* ========================================================================= BM HERO (v1.4.2) — reusable hero: image OR video, real overlay, one knob ------------------------------------------------------------------------- v1.4.2 fixes vs 1.4.1: default vertical alignment is CENTER (not bottom); inner is force-widened and given its own padding so it works with OR without the .wrap helper; z-index stack lifted (media 0 / overlay 1 / inner 10) to beat Kadence content-container ancestors. Markup:
(or