/** * Athens Christmas Lights — 10 rotating homepage structures. * * The active layout is selected in before paint and stored only for the * previous page load so an immediate reload never repeats the same structure. * Content, anchors, forms and schema remain canonical; only presentation/order * changes. A small deferred controller also synchronizes the DOM order with the * visual order for keyboard and assistive-technology consistency. */ html[data-bcl-home-layout] #bcl-main-content { display: flex; flex-direction: column; overflow: clip; } html[data-bcl-home-layout] #bcl-main-content > section { width: 100%; order: 500; } /* Keep the two conversion anchors stable in every structure. */ html[data-bcl-home-layout] #bcl-main-content > .bcl-hero { order: 10; } html[data-bcl-home-layout] #bcl-main-content > .bcl-final-cta { order: 990; } /* -------------------------------------------------------------------------- Layout 01 — Classic Luxe Hero: original two-column composition; content follows a conversion funnel. -------------------------------------------------------------------------- */ html[data-bcl-home-layout="1"] #bcl-main-content > .bcl-trust-strip { order: 20; } html[data-bcl-home-layout="1"] #services { order: 30; } html[data-bcl-home-layout="1"] #custom-designs { order: 40; } html[data-bcl-home-layout="1"] #residential { order: 50; } html[data-bcl-home-layout="1"] #commercial { order: 60; } html[data-bcl-home-layout="1"] #process { order: 70; } html[data-bcl-home-layout="1"] #pricing { order: 80; } html[data-bcl-home-layout="1"] #service-area { order: 90; } html[data-bcl-home-layout="1"] #service-map { order: 100; } html[data-bcl-home-layout="1"] #project-proof { order: 110; } html[data-bcl-home-layout="1"] #gallery { order: 120; } html[data-bcl-home-layout="1"] #countdown { order: 130; } html[data-bcl-home-layout="1"] #faq { order: 140; } /* -------------------------------------------------------------------------- Layout 02 — Reverse Split Hero form leads on the left; gallery/proof appear earlier in the journey. -------------------------------------------------------------------------- */ html[data-bcl-home-layout="2"] .bcl-hero-grid { grid-template-columns: minmax(360px, .72fr) minmax(0, 1.05fr); } html[data-bcl-home-layout="2"] .bcl-hero-form { grid-column: 1; grid-row: 1; } html[data-bcl-home-layout="2"] .bcl-hero-copy { grid-column: 2; grid-row: 1; justify-self: end; } html[data-bcl-home-layout="2"] .bcl-hero-media::after { background: linear-gradient(270deg, rgba(7,16,31,.96) 0%, rgba(7,16,31,.82) 48%, rgba(7,16,31,.42) 100%); } html[data-bcl-home-layout="2"] #bcl-main-content > .bcl-trust-strip { order: 20; } html[data-bcl-home-layout="2"] #gallery { order: 30; } html[data-bcl-home-layout="2"] #project-proof { order: 40; } html[data-bcl-home-layout="2"] #services { order: 50; } html[data-bcl-home-layout="2"] #residential { order: 60; } html[data-bcl-home-layout="2"] #commercial { order: 70; } html[data-bcl-home-layout="2"] #custom-designs { order: 80; } html[data-bcl-home-layout="2"] #process { order: 90; } html[data-bcl-home-layout="2"] #service-area { order: 100; } html[data-bcl-home-layout="2"] #service-map { order: 110; } html[data-bcl-home-layout="2"] #pricing { order: 120; } html[data-bcl-home-layout="2"] #countdown { order: 130; } html[data-bcl-home-layout="2"] #faq { order: 140; } /* -------------------------------------------------------------------------- Layout 03 — Centered Showcase Editorial hero with centered content and a wide estimate panel underneath. -------------------------------------------------------------------------- */ html[data-bcl-home-layout="3"] .bcl-hero { min-height: 900px; } html[data-bcl-home-layout="3"] .bcl-hero-grid { grid-template-columns: minmax(0, 1fr); max-width: 1020px; text-align: center; padding-block: 84px 132px; } html[data-bcl-home-layout="3"] .bcl-hero-copy { max-width: 900px; margin-inline: auto; } html[data-bcl-home-layout="3"] .bcl-hero-copy h1, html[data-bcl-home-layout="3"] .bcl-hero-lead { margin-inline: auto; } html[data-bcl-home-layout="3"] .bcl-hero-actions, html[data-bcl-home-layout="3"] .bcl-hero-points { justify-content: center; } html[data-bcl-home-layout="3"] .bcl-hero-form { width: min(100%, 780px); margin-inline: auto; } html[data-bcl-home-layout="3"] .bcl-form-frame { height: 520px; } html[data-bcl-home-layout="3"] .bcl-frame-shell { min-height: 520px; } html[data-bcl-home-layout="3"] .bcl-hero-media::after { background: linear-gradient(180deg, rgba(7,16,31,.84), rgba(7,16,31,.70) 52%, rgba(7,16,31,.92)); } html[data-bcl-home-layout="3"] #bcl-main-content > .bcl-trust-strip { order: 20; } html[data-bcl-home-layout="3"] #custom-designs { order: 30; } html[data-bcl-home-layout="3"] #services { order: 40; } html[data-bcl-home-layout="3"] #process { order: 50; } html[data-bcl-home-layout="3"] #gallery { order: 60; } html[data-bcl-home-layout="3"] #residential { order: 70; } html[data-bcl-home-layout="3"] #commercial { order: 80; } html[data-bcl-home-layout="3"] #pricing { order: 90; } html[data-bcl-home-layout="3"] #project-proof { order: 100; } html[data-bcl-home-layout="3"] #service-area { order: 110; } html[data-bcl-home-layout="3"] #service-map { order: 120; } html[data-bcl-home-layout="3"] #faq { order: 130; } html[data-bcl-home-layout="3"] #countdown { order: 140; } /* -------------------------------------------------------------------------- Layout 04 — Floating Estimate Card Copy owns the full hero width while the estimate form floats into the fold. -------------------------------------------------------------------------- */ html[data-bcl-home-layout="4"] .bcl-hero { min-height: 820px; padding-bottom: 190px; } html[data-bcl-home-layout="4"] .bcl-hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; padding-block: 88px 80px; } html[data-bcl-home-layout="4"] .bcl-hero-copy { max-width: 850px; } html[data-bcl-home-layout="4"] .bcl-hero-form { position: absolute; z-index: 4; right: 0; bottom: -145px; width: min(46%, 540px); } html[data-bcl-home-layout="4"] .bcl-hero-copy h1 { max-width: 820px; } html[data-bcl-home-layout="4"] #bcl-main-content > .bcl-trust-strip { order: 20; margin-top: 0; padding-top: 150px; } html[data-bcl-home-layout="4"] #services { order: 30; } html[data-bcl-home-layout="4"] #process { order: 40; } html[data-bcl-home-layout="4"] #pricing { order: 50; } html[data-bcl-home-layout="4"] #custom-designs { order: 60; } html[data-bcl-home-layout="4"] #gallery { order: 70; } html[data-bcl-home-layout="4"] #project-proof { order: 80; } html[data-bcl-home-layout="4"] #residential { order: 90; } html[data-bcl-home-layout="4"] #commercial { order: 100; } html[data-bcl-home-layout="4"] #service-area { order: 110; } html[data-bcl-home-layout="4"] #service-map { order: 120; } html[data-bcl-home-layout="4"] #countdown { order: 130; } html[data-bcl-home-layout="4"] #faq { order: 140; } /* -------------------------------------------------------------------------- Layout 05 — Editorial Offset Asymmetric hero and two-column service cards for a magazine-style homepage. -------------------------------------------------------------------------- */ html[data-bcl-home-layout="5"] .bcl-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(330px, .55fr); align-items: end; } html[data-bcl-home-layout="5"] .bcl-hero-copy { padding-top: 70px; padding-bottom: 40px; } html[data-bcl-home-layout="5"] .bcl-hero-copy h1 { font-size: clamp(3.7rem, 7vw, 6.8rem); max-width: 950px; } html[data-bcl-home-layout="5"] .bcl-hero-form { transform: translateY(38px); } html[data-bcl-home-layout="5"] #services .bcl-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-bcl-home-layout="5"] #services .bcl-service-card { min-height: 330px; } html[data-bcl-home-layout="5"] #bcl-main-content > .bcl-trust-strip { order: 20; } html[data-bcl-home-layout="5"] #project-proof { order: 30; } html[data-bcl-home-layout="5"] #services { order: 40; } html[data-bcl-home-layout="5"] #gallery { order: 50; } html[data-bcl-home-layout="5"] #custom-designs { order: 60; } html[data-bcl-home-layout="5"] #residential { order: 70; } html[data-bcl-home-layout="5"] #commercial { order: 80; } html[data-bcl-home-layout="5"] #process { order: 90; } html[data-bcl-home-layout="5"] #pricing { order: 100; } html[data-bcl-home-layout="5"] #service-area { order: 110; } html[data-bcl-home-layout="5"] #service-map { order: 120; } html[data-bcl-home-layout="5"] #countdown { order: 130; } html[data-bcl-home-layout="5"] #faq { order: 140; } /* -------------------------------------------------------------------------- Layout 06 — Framed Hero Hero content and form sit inside a centered glass panel over the background. -------------------------------------------------------------------------- */ html[data-bcl-home-layout="6"] .bcl-hero { min-height: 860px; padding: 54px 0; } html[data-bcl-home-layout="6"] .bcl-hero-grid { width: min(calc(100% - 40px), 1280px); margin: 0 auto; padding: clamp(36px, 5vw, 72px); border: 1px solid rgba(255,255,255,.24); border-radius: 34px; background: rgba(7,16,31,.64); box-shadow: 0 40px 100px rgba(0,0,0,.28); backdrop-filter: blur(14px); } html[data-bcl-home-layout="6"] .bcl-hero::after { display: none; } html[data-bcl-home-layout="6"] .bcl-trust-strip { margin-top: 0; padding-top: 28px; } html[data-bcl-home-layout="6"] #bcl-main-content > .bcl-trust-strip { order: 20; } html[data-bcl-home-layout="6"] #process { order: 30; } html[data-bcl-home-layout="6"] #services { order: 40; } html[data-bcl-home-layout="6"] #custom-designs { order: 50; } html[data-bcl-home-layout="6"] #pricing { order: 60; } html[data-bcl-home-layout="6"] #residential { order: 70; } html[data-bcl-home-layout="6"] #commercial { order: 80; } html[data-bcl-home-layout="6"] #service-area { order: 90; } html[data-bcl-home-layout="6"] #service-map { order: 100; } html[data-bcl-home-layout="6"] #gallery { order: 110; } html[data-bcl-home-layout="6"] #project-proof { order: 120; } html[data-bcl-home-layout="6"] #faq { order: 130; } html[data-bcl-home-layout="6"] #countdown { order: 140; } /* -------------------------------------------------------------------------- Layout 07 — Full-Bleed Story Hero copy sits low and wide; form becomes a compact card at the top right. -------------------------------------------------------------------------- */ html[data-bcl-home-layout="7"] .bcl-hero { min-height: 940px; } html[data-bcl-home-layout="7"] .bcl-hero-grid { grid-template-columns: minmax(0, 1fr); align-items: end; min-height: 900px; padding-block: 90px 125px; } html[data-bcl-home-layout="7"] .bcl-hero-copy { max-width: 980px; align-self: end; } html[data-bcl-home-layout="7"] .bcl-hero-copy h1 { max-width: 980px; font-size: clamp(3.5rem, 6.8vw, 6.7rem); } html[data-bcl-home-layout="7"] .bcl-hero-form { position: absolute; top: 56px; right: 0; width: min(390px, 36vw); } html[data-bcl-home-layout="7"] .bcl-hero-form .bcl-frame-shell, html[data-bcl-home-layout="7"] .bcl-hero-form .bcl-form-frame { min-height: 300px; height: 300px; } html[data-bcl-home-layout="7"] .bcl-hero-media::after { background: linear-gradient(0deg, rgba(7,16,31,.97), rgba(7,16,31,.30) 55%, rgba(7,16,31,.60)); } html[data-bcl-home-layout="7"] #bcl-main-content > .bcl-trust-strip { order: 20; } html[data-bcl-home-layout="7"] #gallery { order: 30; } html[data-bcl-home-layout="7"] #services { order: 40; } html[data-bcl-home-layout="7"] #custom-designs { order: 50; } html[data-bcl-home-layout="7"] #project-proof { order: 60; } html[data-bcl-home-layout="7"] #residential { order: 70; } html[data-bcl-home-layout="7"] #commercial { order: 80; } html[data-bcl-home-layout="7"] #process { order: 90; } html[data-bcl-home-layout="7"] #pricing { order: 100; } html[data-bcl-home-layout="7"] #countdown { order: 110; } html[data-bcl-home-layout="7"] #service-area { order: 120; } html[data-bcl-home-layout="7"] #service-map { order: 130; } html[data-bcl-home-layout="7"] #faq { order: 140; } /* -------------------------------------------------------------------------- Layout 08 — Compact Conversion Shorter hero, prominent form, services immediately beneath the fold. -------------------------------------------------------------------------- */ html[data-bcl-home-layout="8"] .bcl-hero { min-height: 620px; } html[data-bcl-home-layout="8"] .bcl-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(430px, .8fr); padding-block: 48px 88px; } html[data-bcl-home-layout="8"] .bcl-hero-copy h1 { font-size: clamp(2.8rem, 5vw, 4.8rem); } html[data-bcl-home-layout="8"] .bcl-hero-lead { margin-top: 18px; } html[data-bcl-home-layout="8"] .bcl-hero-points { margin-top: 18px; } html[data-bcl-home-layout="8"] .bcl-hero-form .bcl-frame-shell, html[data-bcl-home-layout="8"] .bcl-hero-form .bcl-form-frame { min-height: 430px; height: 430px; } html[data-bcl-home-layout="8"] #services .bcl-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-bcl-home-layout="8"] #bcl-main-content > .bcl-trust-strip { order: 20; } html[data-bcl-home-layout="8"] #services { order: 30; } html[data-bcl-home-layout="8"] #pricing { order: 40; } html[data-bcl-home-layout="8"] #process { order: 50; } html[data-bcl-home-layout="8"] #residential { order: 60; } html[data-bcl-home-layout="8"] #commercial { order: 70; } html[data-bcl-home-layout="8"] #custom-designs { order: 80; } html[data-bcl-home-layout="8"] #service-area { order: 90; } html[data-bcl-home-layout="8"] #service-map { order: 100; } html[data-bcl-home-layout="8"] #project-proof { order: 110; } html[data-bcl-home-layout="8"] #gallery { order: 120; } html[data-bcl-home-layout="8"] #countdown { order: 130; } html[data-bcl-home-layout="8"] #faq { order: 140; } /* -------------------------------------------------------------------------- Layout 09 — Gallery First Hero becomes a cinematic intro; project imagery becomes the first proof block. -------------------------------------------------------------------------- */ html[data-bcl-home-layout="9"] .bcl-hero-grid { grid-template-columns: minmax(0, 1fr); max-width: 1120px; padding-block: 100px 132px; } html[data-bcl-home-layout="9"] .bcl-hero-copy { max-width: 860px; } html[data-bcl-home-layout="9"] .bcl-hero-form { width: min(100%, 980px); display: grid; grid-template-columns: minmax(250px, .42fr) minmax(0, .58fr); margin-top: 18px; } html[data-bcl-home-layout="9"] .bcl-hero-form .bcl-form-heading { display: grid; align-content: center; text-align: left; } html[data-bcl-home-layout="9"] .bcl-hero-form .bcl-form-fallback { grid-column: 1 / -1; } html[data-bcl-home-layout="9"] .bcl-hero-form .bcl-frame-shell, html[data-bcl-home-layout="9"] .bcl-hero-form .bcl-form-frame { min-height: 410px; height: 410px; } html[data-bcl-home-layout="9"] #gallery { order: 20; } html[data-bcl-home-layout="9"] #project-proof { order: 30; } html[data-bcl-home-layout="9"] #bcl-main-content > .bcl-trust-strip { order: 40; margin-top: 0; } html[data-bcl-home-layout="9"] #custom-designs { order: 50; } html[data-bcl-home-layout="9"] #services { order: 60; } html[data-bcl-home-layout="9"] #residential { order: 70; } html[data-bcl-home-layout="9"] #commercial { order: 80; } html[data-bcl-home-layout="9"] #process { order: 90; } html[data-bcl-home-layout="9"] #pricing { order: 100; } html[data-bcl-home-layout="9"] #service-area { order: 110; } html[data-bcl-home-layout="9"] #service-map { order: 120; } html[data-bcl-home-layout="9"] #faq { order: 130; } html[data-bcl-home-layout="9"] #countdown { order: 140; } /* -------------------------------------------------------------------------- Layout 10 — Stacked Modern Strong copy-first hero with form spanning the full container underneath. -------------------------------------------------------------------------- */ html[data-bcl-home-layout="10"] .bcl-hero { min-height: 820px; } html[data-bcl-home-layout="10"] .bcl-hero-grid { grid-template-columns: minmax(0, 1fr); max-width: 1180px; padding-block: 64px 120px; } html[data-bcl-home-layout="10"] .bcl-hero-copy { max-width: 1000px; } html[data-bcl-home-layout="10"] .bcl-hero-copy h1 { max-width: 1000px; } html[data-bcl-home-layout="10"] .bcl-hero-form { display: grid; grid-template-columns: minmax(280px, .34fr) minmax(0, .66fr); margin-top: 26px; } html[data-bcl-home-layout="10"] .bcl-hero-form .bcl-form-heading { display: grid; align-content: center; text-align: left; } html[data-bcl-home-layout="10"] .bcl-hero-form .bcl-form-fallback { grid-column: 1 / -1; } html[data-bcl-home-layout="10"] .bcl-hero-form .bcl-frame-shell, html[data-bcl-home-layout="10"] .bcl-hero-form .bcl-form-frame { min-height: 420px; height: 420px; } html[data-bcl-home-layout="10"] #bcl-main-content > .bcl-trust-strip { order: 20; } html[data-bcl-home-layout="10"] #service-area { order: 30; } html[data-bcl-home-layout="10"] #service-map { order: 40; } html[data-bcl-home-layout="10"] #services { order: 50; } html[data-bcl-home-layout="10"] #residential { order: 60; } html[data-bcl-home-layout="10"] #commercial { order: 70; } html[data-bcl-home-layout="10"] #custom-designs { order: 80; } html[data-bcl-home-layout="10"] #gallery { order: 90; } html[data-bcl-home-layout="10"] #project-proof { order: 100; } html[data-bcl-home-layout="10"] #process { order: 110; } html[data-bcl-home-layout="10"] #pricing { order: 120; } html[data-bcl-home-layout="10"] #countdown { order: 130; } html[data-bcl-home-layout="10"] #faq { order: 140; } /* Structural refinements applied only to rotating variants. */ html[data-bcl-home-layout="2"] #custom-designs .bcl-split, html[data-bcl-home-layout="5"] #commercial .bcl-split, html[data-bcl-home-layout="7"] #custom-designs .bcl-split, html[data-bcl-home-layout="10"] #residential .bcl-split { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } html[data-bcl-home-layout="3"] #custom-designs .bcl-split, html[data-bcl-home-layout="6"] #residential .bcl-split, html[data-bcl-home-layout="8"] #commercial .bcl-split, html[data-bcl-home-layout="9"] #custom-designs .bcl-split { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } html[data-bcl-home-layout="4"] #process .bcl-process-grid, html[data-bcl-home-layout="8"] #process .bcl-process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-bcl-home-layout="4"] #process .bcl-process-step:nth-child(4), html[data-bcl-home-layout="4"] #process .bcl-process-step:nth-child(5), html[data-bcl-home-layout="8"] #process .bcl-process-step:nth-child(4), html[data-bcl-home-layout="8"] #process .bcl-process-step:nth-child(5) { grid-column: span 1; } html[data-bcl-home-layout="6"] #process .bcl-process-grid, html[data-bcl-home-layout="10"] #process .bcl-process-grid { grid-template-columns: repeat(5, minmax(190px, 1fr)); overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; } html[data-bcl-home-layout="6"] #process .bcl-process-step, html[data-bcl-home-layout="10"] #process .bcl-process-step { scroll-snap-align: start; } /* Responsive safety: each of the 10 desktop structures collapses predictably. */ @media (max-width: 980px) { html[data-bcl-home-layout] .bcl-hero { min-height: auto; padding-bottom: 0; } html[data-bcl-home-layout] .bcl-hero-grid, html[data-bcl-home-layout="2"] .bcl-hero-grid, html[data-bcl-home-layout="5"] .bcl-hero-grid, html[data-bcl-home-layout="8"] .bcl-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-block: 62px 100px; text-align: left; } html[data-bcl-home-layout] .bcl-hero-copy, html[data-bcl-home-layout] .bcl-hero-form { grid-column: auto; grid-row: auto; width: 100%; max-width: none; margin-inline: 0; transform: none; } html[data-bcl-home-layout="4"] .bcl-hero-form, html[data-bcl-home-layout="7"] .bcl-hero-form { position: relative; top: auto; right: auto; bottom: auto; margin-top: 24px; } html[data-bcl-home-layout="4"] #bcl-main-content > .bcl-trust-strip { padding-top: 0; } html[data-bcl-home-layout="3"] .bcl-hero-copy, html[data-bcl-home-layout="3"] .bcl-hero-grid { text-align: center; } html[data-bcl-home-layout="3"] .bcl-hero-actions, html[data-bcl-home-layout="3"] .bcl-hero-points { justify-content: center; } html[data-bcl-home-layout="9"] .bcl-hero-form, html[data-bcl-home-layout="10"] .bcl-hero-form { grid-template-columns: minmax(0, 1fr); } html[data-bcl-home-layout="9"] .bcl-hero-form .bcl-form-fallback, html[data-bcl-home-layout="10"] .bcl-hero-form .bcl-form-fallback { grid-column: auto; } html[data-bcl-home-layout="5"] #services .bcl-service-grid, html[data-bcl-home-layout="8"] #services .bcl-service-grid, html[data-bcl-home-layout="4"] #process .bcl-process-grid, html[data-bcl-home-layout="8"] #process .bcl-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-bcl-home-layout] .bcl-split, html[data-bcl-home-layout] .bcl-split.is-reversed, html[data-bcl-home-layout="2"] #custom-designs .bcl-split, html[data-bcl-home-layout="3"] #custom-designs .bcl-split, html[data-bcl-home-layout="5"] #commercial .bcl-split, html[data-bcl-home-layout="6"] #residential .bcl-split, html[data-bcl-home-layout="7"] #custom-designs .bcl-split, html[data-bcl-home-layout="8"] #commercial .bcl-split, html[data-bcl-home-layout="9"] #custom-designs .bcl-split, html[data-bcl-home-layout="10"] #residential .bcl-split { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 680px) { html[data-bcl-home-layout] .bcl-hero-grid { padding-block: 46px 82px; } html[data-bcl-home-layout] .bcl-hero-copy h1 { font-size: clamp(2.55rem, 13vw, 4.15rem); } html[data-bcl-home-layout] .bcl-hero-actions, html[data-bcl-home-layout] .bcl-hero-points { justify-content: flex-start; } html[data-bcl-home-layout="3"] .bcl-hero-actions, html[data-bcl-home-layout="3"] .bcl-hero-points { justify-content: center; } html[data-bcl-home-layout="5"] #services .bcl-service-grid, html[data-bcl-home-layout="8"] #services .bcl-service-grid, html[data-bcl-home-layout="4"] #process .bcl-process-grid, html[data-bcl-home-layout="8"] #process .bcl-process-grid { grid-template-columns: minmax(0, 1fr); } html[data-bcl-home-layout="6"] #process .bcl-process-grid, html[data-bcl-home-layout="10"] #process .bcl-process-grid { grid-template-columns: minmax(82vw, 1fr); } } @media (prefers-reduced-motion: reduce) { html[data-bcl-home-layout] * { scroll-behavior: auto; } }