/* Hero Section with Video Background */
.bdc-hero-main-section {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
font-family: Arial, Helvetica, Arial, Lucida, sans-serif;
}
/* Video Background */
.bdc-hero-main-video-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
overflow: hidden;
background: #1a2332;
}
/* Skeleton loader while video loads */
.bdc-hero-main-video-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #1a2332 0%, #2a3545 50%, #1a2332 100%);
background-size: 200% 200%;
animation: skeletonShimmer 2s ease-in-out infinite;
z-index: 1;
opacity: 1;
transition: opacity 0.5s ease;
}
.bdc-hero-main-video-bg.video-loaded::before {
opacity: 0;
}
@keyframes skeletonShimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Dark overlay */
.bdc-hero-main-video-bg::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.65) 100%);
z-index: 2;
}
/* Simple Video Background */
#bdcHeroVideo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
object-fit: cover;
z-index: 1;
opacity: 0;
transition: opacity 0.5s ease;
}
#bdcHeroVideo.loaded {
opacity: 1;
}
/* Content Container */
.bdc-hero-main-container {
position: relative;
z-index: 3;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 80px 30px;
display: grid;
grid-template-columns: 1fr 550px;
gap: 5px;
align-items: center;
}
/* Left - Main Content */
.bdc-hero-main-content {
opacity: 0;
transform: translateX(-40px);
animation: fadeInLeft 1s ease forwards;
animation-delay: 0.3s;
margin-left: 80px;
}
@keyframes fadeInLeft {
to { opacity: 1; transform: translateX(0); }
}
.bdc-hero-main-label {
color: #d6a248;
font-size: 11px;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 20px;
opacity: 0;
animation: fadeIn 0.8s ease forwards;
animation-delay: 0.5s;
}
@keyframes fadeIn { to { opacity: 1; } }
.bdc-hero-main-headline { margin-bottom: 30px; }
.bdc-hero-main-headline h1 {
color: #ffffff;
font-size: clamp(42px, 5.5vw, 64px);
font-weight: 700;
line-height: 1.1;
margin: 0;
letter-spacing: -1.5px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
.bdc-hero-main-headline h1 span { color: #d6a248; }
.bdc-hero-main-subtext {
color: rgba(255, 255, 255, 0.95);
font-size: 18px;
margin-bottom: 12px;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}
/* Animated Cycling List */
.bdc-hero-main-cycle {
height: 30px;
overflow: hidden;
position: relative;
margin-bottom: 35px;
}
.bdc-hero-main-cycle-list {
list-style: none;
padding: 0;
margin: 0;
animation: cycleUpMain 12s ease-in-out infinite;
transform: translateY(0);
}
.bdc-hero-main-cycle-list li {
height: 30px;
line-height: 30px;
display: block;
color: #ffffff;
font-size: 22px;
font-weight: 600;
position: relative;
padding-left: 22px;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
margin: 0;
}
.bdc-hero-main-cycle-list li::before {
content: '';
position: absolute;
left: 0;
top: 14px;
width: 10px;
height: 2px;
background: #d6a248;
}
@keyframes cycleUpMain {
0%, 16% { transform: translateY(0); }
20%, 36% { transform: translateY(-30px); }
40%, 56% { transform: translateY(-60px); }
60%, 76% { transform: translateY(-90px); }
80%, 96% { transform: translateY(-120px); }
100% { transform: translateY(0); }
}
/* Decorative Line */
.bdc-hero-main-line {
width: 120px;
height: 1px;
background: rgba(255, 255, 255, 0.3);
margin: 35px 0;
opacity: 0;
animation: expandLineMain 1s ease forwards;
animation-delay: 0.8s;
}
@keyframes expandLineMain {
from { width: 0; opacity: 0; }
to { width: 120px; opacity: 1; }
}
/* Stats */
.bdc-hero-main-stats {
display: flex;
gap: 50px;
}
.bdc-hero-main-stat {
opacity: 0;
animation: fadeInUp 0.8s ease forwards;
}
.bdc-hero-main-stat:nth-child(1) { animation-delay: 1s; }
.bdc-hero-main-stat:nth-child(2) { animation-delay: 1.15s; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.bdc-hero-main-stat strong {
display: block;
color: #ffffff;
font-size: 38px;
font-weight: 700;
line-height: 1;
margin-bottom: 6px;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}
.bdc-hero-main-stat span {
color: rgba(255, 255, 255, 0.85);
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* Right - Form */
.bdc-hero-main-form {
background: #ffffff;
padding: 45px 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
opacity: 0;
transform: translateY(40px);
animation: fadeInUp 1s ease forwards;
animation-delay: 0.5s;
width: 100%;
}
.bdc-hero-main-form-title {
color: #1a1a1a;
font-size: 22px;
font-weight: 600;
margin: 0 0 25px 0;
line-height: 1.3;
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
/* Fluent Form Overrides */
.bdc-hero-main-form .fluent_form_4 {
font-family: Arial, Helvetica, Arial, Lucida, sans-serif !important;
}
.bdc-hero-main-form .fluent_form_4 .ff-el-form-control {
background: #f9f9f9 !important;
border: 1px solid #e0e0e0 !important;
border-radius: 0 !important;
padding: 15px 18px !important;
font-size: 14px !important;
color: #1a1a1a !important;
transition: all 0.3s ease !important;
width: 100% !important;
}
.bdc-hero-main-form .fluent_form_4 .ff-el-form-control:focus {
background: #ffffff !important;
border-color: #d6a248 !important;
box-shadow: 0 0 0 3px rgba(214, 162, 72, 0.1) !important;
outline: none !important;
}
.bdc-hero-main-form .fluent_form_4 .ff-el-form-control::placeholder {
color: #999999 !important;
font-size: 13px !important;
}
.bdc-hero-main-form .fluent_form_4 .ff-el-input--label label { display: none !important; }
.bdc-hero-main-form .fluent_form_4 .ff-el-group { margin-bottom: 16px !important; }
.bdc-hero-main-form .fluent_form_4 .ff-btn-submit {
background: #d6a248 !important;
color: #ffffff !important;
border: none !important;
border-radius: 0 !important;
padding: 17px 40px !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: all 0.4s ease !important;
width: 100% !important;
}
.bdc-hero-main-form .fluent_form_4 .ff-btn-submit:hover {
background: #1a1a1a !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.bdc-hero-main-form .fluent_form_4 .ff-message-success {
background: #ffffff !important;
border-left: 3px solid #d6a248 !important;
color: #1a1a1a !important;
padding: 15px !important;
font-size: 14px !important;
}
.bdc-hero-main-form .fluent_form_4 .ff-el-is-error .ff-el-form-control { border-color: #e74c3c !important; }
/* SEO Content - Hidden but accessible */
.bdc-hero-main-seo-content {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Responsive */
@media (max-width: 1200px) {
.bdc-hero-main-container {
grid-template-columns: 1fr 480px;
gap: 5px;
padding: 60px 30px;
}
.bdc-hero-main-content { margin-left: 40px; }
.bdc-hero-main-headline h1 { font-size: clamp(38px, 5vw, 52px); }
}
@media (max-width: 1024px) {
.bdc-hero-main-container {
grid-template-columns: 1fr 420px;
gap: 5px;
}
.bdc-hero-main-content { margin-left: 30px; }
}
@media (max-width: 968px) {
.bdc-hero-main-section {
min-height: auto;
padding: 40px 0;
}
.bdc-hero-main-container {
grid-template-columns: 1fr;
gap: 40px;
padding: 50px 25px;
}
.bdc-hero-main-content {
margin-left: 0;
text-align: left;
max-width: 600px;
}
.bdc-hero-main-form {
max-width: 540px;
margin: 0 auto;
}
.bdc-hero-main-stats { justify-content: flex-start; }
}
@media (max-width: 600px) {
.bdc-hero-main-section { padding: 30px 0; }
.bdc-hero-main-container {
padding: 40px 20px;
gap: 35px;
}
.bdc-hero-main-headline h1 {
font-size: 32px;
letter-spacing: -0.5px;
}
.bdc-hero-main-subtext { font-size: 16px; }
.bdc-hero-main-form { padding: 30px 25px; }
.bdc-hero-main-form-title { font-size: 19px; }
.bdc-hero-main-stats {
gap: 30px;
flex-wrap: wrap;
}
.bdc-hero-main-stat strong { font-size: 30px; }
.bdc-hero-main-cycle {
height: 28px;
margin-bottom: 30px;
}
.bdc-hero-main-cycle-list li {
height: 28px;
line-height: 28px;
font-size: 18px;
}
.bdc-hero-main-cycle-list li::before { top: 13px; }
@keyframes cycleUpMain {
0%, 16% { transform: translateY(0); }
20%, 36% { transform: translateY(-28px); }
40%, 56% { transform: translateY(-56px); }
60%, 76% { transform: translateY(-84px); }
80%, 96% { transform: translateY(-112px); }
100% { transform: translateY(0); }
}
.bdc-hero-main-line { width: 100px; }
@keyframes expandLineMain {
from { width: 0; opacity: 0; }
to { width: 100px; opacity: 1; }
}
}
@media (max-width: 480px) {
.bdc-hero-main-headline h1 { font-size: 28px; }
.bdc-hero-main-cycle-list li { font-size: 16px; }
.bdc-hero-main-form { padding: 25px 20px; }
.bdc-hero-main-stat strong { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.bdc-hero-main-content,
.bdc-hero-main-form,
.bdc-hero-main-stat,
.bdc-hero-main-label,
.bdc-hero-main-line {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.bdc-hero-main-cycle-list { animation: none !important; }
}
Property Development
Build Smarter. Unlock More
Live Your Best Life With A:
Major Renovation
Custom Built Home
Laneway Home
Duplex
Multiplex
15+
Years Experience
75+
Projects Delivered
Discover Your Property's True Potential
Home Hero SectionFirst NameLast NameEmailPhone NumberGET A FREE CONSULTATION
window.fluent_form_ff_form_instance_4_1 = {"id":"4","ajaxUrl":"https:\/\/bdchomesinc.com\/wp-admin\/admin-ajax.php","settings":{"layout":{"labelPlacement":"top","asteriskPlacement":"asterisk-right","helpMessagePlacement":"with_label","errorMessagePlacement":"inline","cssClassName":""},"restrictions":{"denyEmptySubmission":{"enabled":false}}},"form_instance":"ff_form_instance_4_1","form_id_selector":"fluentform_4","rules":{"names[first_name]":{"required":{"value":false,"message":"This field is required","global_message":"This field is required","global":true}},"names[middle_name]":{"required":{"value":false,"message":"This field is required","global_message":"This field is required","global":true}},"names[last_name]":{"required":{"value":false,"message":"This field is required","global_message":"This field is required","global":true}},"email":{"required":{"value":true,"message":"This field is required","global_message":"This field is required","global":true},"email":{"value":true,"message":"This field must contain a valid email","global_message":"This field must contain a valid email","global":true}},"input_text":{"required":{"value":true,"message":"This field is required","global_message":"This field is required","global":true}}},"debounce_time":300};
Vancouver Real Estate Developer - Custom Homes, Duplexes, and Laneway Homes
By Design Construction is a leading Vancouver real estate developer specializing in custom homes,
duplexes, laneway houses, multiplex infill, and whole-home renovations across Vancouver, Burnaby,
New Westminster, North Vancouver, and Coquitlam. As a trusted design-build contractor, we maximize
property value through expert construction, permit management, and zoning consultation.
(function() {
var v = document.getElementById('bdcHeroVideo');
var bg = document.querySelector('.bdc-hero-main-video-bg');
if (v) {
// Try to play immediately
v.play().catch(function() {
// If blocked, play on first interaction
var events = ['click', 'touchstart', 'scroll'];
var playOnce = function() {
v.play();
events.forEach(function(e) {
document.removeEventListener(e, playOnce);
});
};
events.forEach(function(e) {
document.addEventListener(e, playOnce, { passive: true });
});
});
// When video starts playing, hide skeleton
v.addEventListener('playing', function() {
v.classList.add('loaded');
if (bg) bg.classList.add('video-loaded');
}, { once: true });
// Also check after a short delay
setTimeout(function() {
if (!v.paused) {
v.classList.add('loaded');
if (bg) bg.classList.add('video-loaded');
}
}, 500);
}
})();
