/* ========================================================== ========================================================== LIMIT OUT MARINE — SITE CSS ========================================================== Stable, tested CSS specific to the Limit Out Marine website. Shared reusable systems belong in the Proadign Toolkit. Experimental CSS belongs in the WORKBENCH at the bottom. ========================================================== ========================================================== */ /* ========================================================== LIMIT OUT — ANGLED BUTTON Divi Button Module class: pdstyle-btn-angle ========================================================== */ .pdstyle-btn-angle { background-color: var(--pdstyle-accent) !important; color: var(--pdstyle-white) !important; clip-path: polygon( 10px 0, 100% 0, calc(100% - 10px) 100%, 0 100% ) !important; } /* ========================================================== ========================================================== LIMIT OUT — FOOTER ========================================================== ========================================================== */ /* ========================================================== FOOTER FONT NOTE Slogan uses "Permanent Marker". Font loading currently lives in: Divi → Theme Options → Integration → ========================================================== */ /* ========================================================== FOOTER — BRAND ========================================================== */ .pdstyle-footer-brand { display: flex; flex-direction: column; align-items: flex-start; } /* ---------------------------------------------------------- LOGO ---------------------------------------------------------- */ .pdstyle-footer-logo { display: block; width: clamp(240px, 24vw, 320px); max-width: 100%; margin: 0 0 22px; } .pdstyle-footer-logo img { display: block; width: 100%; height: auto; } /* ---------------------------------------------------------- HANDWRITTEN SLOGAN ---------------------------------------------------------- */ .pdstyle-footer-slogan { position: relative; display: inline-flex; flex-direction: column; width: clamp(205px, 20vw, 270px); padding-bottom: 18px; font-family: "Permanent Marker", "Arial Black", Arial, sans-serif; font-size: clamp(19px, 1.7vw, 26px); font-weight: 400; line-height: 1.05; color: var(--pdstyle-white); text-align: center; transform: rotate(-2deg); transform-origin: center; } .pdstyle-footer-slogan span { display: block; white-space: nowrap; } /* ---------------------------------------------------------- HAND-DRAWN ACCENT UNDERLINE ---------------------------------------------------------- */ .pdstyle-footer-slogan::after { content: ""; position: absolute; left: 10%; bottom: 2px; width: 80%; height: 8px; background: var(--pdstyle-accent); clip-path: polygon( 0 55%, 7% 28%, 35% 8%, 68% 10%, 92% 25%, 100% 48%, 91% 68%, 60% 75%, 28% 84%, 7% 88% ); transform: rotate(-1deg); } /* ---------------------------------------------------------- TABLET / MOBILE — BRAND ---------------------------------------------------------- */ @media (max-width: 980px) { .pdstyle-footer-brand { align-items: center; text-align: center; } .pdstyle-footer-logo { width: clamp(240px, 65vw, 300px); margin-bottom: 18px; } .pdstyle-footer-slogan { width: clamp(200px, 60vw, 255px); font-size: clamp(19px, 5vw, 25px); } } /* ========================================================== FOOTER — NAVIGATION ========================================================== */ .pdstyle-footer-nav { display: flex; flex-direction: column; align-items: flex-start; width: fit-content; margin: 0 auto; gap: 15px; } .pdstyle-footer-nav-title { position: relative; margin-bottom: 8px; padding-bottom: 10px; color: var(--pdstyle-accent); font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: 0.8px; } .pdstyle-footer-nav-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 2px; background: var(--pdstyle-accent); } .pdstyle-footer-nav a { display: inline-flex; align-items: center; gap: 10px; color: var(--pdstyle-white); font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; } .pdstyle-footer-nav a span { color: var(--pdstyle-accent); font-size: 24px; font-weight: 400; line-height: 0.8; } .pdstyle-footer-nav a:hover, .pdstyle-footer-nav a:focus { color: var(--pdstyle-accent); transform: translateX(3px); } /* ---------------------------------------------------------- TABLET / MOBILE — NAVIGATION Hidden here because mobile navigation is handled by the Toolkit off-canvas system. ---------------------------------------------------------- */ @media (max-width: 980px) { .pdstyle-footer-nav { display: none; } } /* ========================================================== FOOTER — LOCATIONS ========================================================== */ .pdstyle-footer-locations { display: flex; flex-direction: column; gap: 26px; } .pdstyle-footer-location { display: flex; align-items: flex-start; gap: 14px; } .pdstyle-footer-location + .pdstyle-footer-location { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.18); } /* ---------------------------------------------------------- LOCATION ICON ---------------------------------------------------------- */ .pdstyle-footer-location-icon { flex: 0 0 auto; color: var(--pdstyle-accent); font-size: 18px; line-height: 1; } /* ---------------------------------------------------------- LOCATION CONTENT ---------------------------------------------------------- */ .pdstyle-footer-location-content { display: flex; flex-direction: column; gap: 8px; } .pdstyle-footer-location-title { color: var(--pdstyle-accent); font-size: 18px; font-weight: 700; line-height: 1; letter-spacing: 0.8px; } .pdstyle-footer-address, .pdstyle-footer-phone { color: var(--pdstyle-white) !important; font-size: 15px; line-height: 1.45; text-decoration: none !important; } .pdstyle-footer-phone { font-weight: 700; } .pdstyle-footer-address:hover, .pdstyle-footer-address:focus, .pdstyle-footer-phone:hover, .pdstyle-footer-phone:focus { color: var(--pdstyle-accent) !important; } /* ---------------------------------------------------------- LOCATIONS HEADING ---------------------------------------------------------- */ .pdstyle-footer-locations-heading { margin: 0 0 22px; color: var(--pdstyle-white); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: 0.8px; text-transform: uppercase; } /* ---------------------------------------------------------- TABLET / MOBILE — LOCATIONS ---------------------------------------------------------- */ @media (max-width: 980px) { .pdstyle-footer-locations { align-items: center; margin-top: 20px; } .pdstyle-footer-location { width: min(100%, 360px); justify-content: center; } .pdstyle-footer-location-content { text-align: left; } .pdstyle-footer-locations-heading { margin-bottom: 22px; text-align: center; } } /* ---------------------------------------------------------- TABLET / MOBILE — CLOSE FOOTER COLUMN GAP ---------------------------------------------------------- */ @media (max-width: 980px) { .pdstyle-footer-row { row-gap: 0 !important; } .pdstyle-footer-row > .et_pb_column { margin-bottom: 0 !important; } } /* ========================================================== ========================================================== LIMIT OUT — HOME PAGE ========================================================== ========================================================== */ /* ========================================================== HOME — HERO ========================================================== */ /* ---------------------------------------------------------- CONTENT ---------------------------------------------------------- */ .pdstyle-home-hero-content { width: min(100%, 680px); color: var(--pdstyle-white); } /* ---------------------------------------------------------- HERO STATEMENT ---------------------------------------------------------- */ .pdstyle-home-hero-title { display: flex; flex-direction: column; margin: 0; font-family: "Roboto Condensed", Arial, sans-serif; font-size: clamp(32px, 2.6vw, 44px); font-style: italic; font-weight: 700; line-height: 0.98; letter-spacing: 0; color: var(--pdstyle-white); text-transform: uppercase; } .pdstyle-home-hero-title span { display: block; white-space: nowrap; } .pdstyle-home-hero-accent { color: var(--pdstyle-accent); } /* ---------------------------------------------------------- ACCENT RULE ---------------------------------------------------------- */ .pdstyle-home-hero-rule { width: 185px; height: 3px; margin: 24px 0 18px; background: var(--pdstyle-accent); } /* ---------------------------------------------------------- SUPPORTING COPY ---------------------------------------------------------- */ .pdstyle-home-hero-copy { width: min(100%, 400px); margin: 0 0 28px; color: var(--pdstyle-white); font-size: clamp(16px, 1.1vw, 18px); font-weight: 400; line-height: 1.55; } /* ---------------------------------------------------------- HERO BUTTON ---------------------------------------------------------- */ .pdstyle-home-hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 30px 15px 36px; background: var(--pdstyle-accent); color: var(--pdstyle-white) !important; font-size: 18px; font-weight: 700; line-height: 1; text-decoration: none !important; text-transform: uppercase; clip-path: polygon( 10px 0, 100% 0, calc(100% - 14px) 100%, 0 100% ); transition: transform 0.2s ease, filter 0.2s ease; } .pdstyle-home-hero-btn:hover, .pdstyle-home-hero-btn:focus { color: var(--pdstyle-white) !important; transform: translateY(-2px); filter: brightness(1.07); } .pdstyle-home-hero-btn-arrow { font-size: 28px; font-weight: 400; line-height: 0.7; } /* ---------------------------------------------------------- TABLET / MOBILE — HERO ---------------------------------------------------------- */ @media (max-width: 980px) { .pdstyle-home-hero-content { width: 100%; } .pdstyle-home-hero-title { font-size: clamp(34px, 8vw, 50px); } .pdstyle-home-hero-title span { white-space: normal; } .pdstyle-home-hero-rule { width: 140px; margin-top: 20px; } .pdstyle-home-hero-copy { max-width: 420px; font-size: 17px; } } /* ---------------------------------------------------------- SMALL PHONE — HERO ---------------------------------------------------------- */ @media (max-width: 600px) { .pdstyle-home-hero-title { font-size: clamp(31px, 9vw, 42px); letter-spacing: -0.5px; } .pdstyle-home-hero-copy { width: 100%; font-size: 16px; line-height: 1.45; } .pdstyle-home-hero-btn { padding: 14px 26px 14px 30px; font-size: 16px; } } /* ========================================================== HOME — HERO CROSSFADE CONFIGURATION ========================================================== */ .pdstyle-home-hero.pdstyle-hero-crossfade { background: #000; } /* ---------------------------------------------------------- DESKTOP — BOAT IMAGE ---------------------------------------------------------- */ .pdstyle-home-hero .pdstyle-hero-crossfade__image { top: 50%; right: 0; width: 75%; height: auto; transform: translateY(-50%); } /* ---------------------------------------------------------- DESKTOP — IMAGE FADE ---------------------------------------------------------- */ .pdstyle-home-hero .pdstyle-hero-crossfade__slide::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, #000 0%, #000 14%, rgba(0, 0, 0, 0.96) 20%, rgba(0, 0, 0, 0.82) 27%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0.28) 43%, rgba(0, 0, 0, 0.08) 51%, rgba(0, 0, 0, 0) 58% ); } /* ---------------------------------------------------------- DESKTOP — MANUFACTURER LOGO ---------------------------------------------------------- */ .pdstyle-home-hero .pdstyle-hero-crossfade__logo { right: 6%; bottom: 8%; width: min(240px, 22vw); } /* ---------------------------------------------------------- MANUFACTURER LOGO — BACKGROUND GLOW ---------------------------------------------------------- */ .pdstyle-home-hero .pdstyle-hero-crossfade__slide::before { content: ""; position: absolute; right: 2%; bottom: 1%; width: 340px; height: 150px; z-index: 2; background: radial-gradient( ellipse at center, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.42) 30%, rgba(255, 255, 255, 0.14) 55%, rgba(255, 255, 255, 0) 75% ); pointer-events: none; } /* ========================================================== TABLET — HERO CROSSFADE ========================================================== */ @media (min-width: 768px) and (max-width: 980px) { .pdstyle-home-hero .pdstyle-hero-crossfade__image { top: auto; right: -2%; bottom: -20px; width: 82%; height: auto; transform: none; } .pdstyle-home-hero .pdstyle-hero-crossfade__slide::after { background: linear-gradient( 90deg, #000 0%, #000 15%, rgba(0, 0, 0, 0.94) 25%, rgba(0, 0, 0, 0.68) 38%, rgba(0, 0, 0, 0.30) 52%, rgba(0, 0, 0, 0) 68% ); } .pdstyle-home-hero .pdstyle-hero-crossfade__logo { right: 5%; bottom: 5%; width: min(180px, 22vw); } .pdstyle-home-hero .pdstyle-hero-crossfade__slide::before { right: 1%; bottom: 1%; width: 260px; height: 120px; } } /* ========================================================== MOBILE — HERO CROSSFADE ========================================================== */ @media (max-width: 767px) { .pdstyle-home-hero .pdstyle-hero-crossfade__image { top: auto; right: -5%; bottom: -55px; width: 105%; height: auto; transform: none; } .pdstyle-home-hero .pdstyle-hero-crossfade__slide::after { background: linear-gradient( 180deg, #000 0%, #000 42%, rgba(0, 0, 0, 0.94) 52%, rgba(0, 0, 0, 0.68) 62%, rgba(0, 0, 0, 0.28) 73%, rgba(0, 0, 0, 0) 84% ); } .pdstyle-home-hero .pdstyle-hero-crossfade__logo { right: 5%; bottom: 24%; width: min(135px, 34vw); } .pdstyle-home-hero .pdstyle-hero-crossfade__slide::before { right: 0; bottom: 18%; width: 190px; height: 90px; background: radial-gradient( ellipse at center, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.30) 32%, rgba(255, 255, 255, 0.08) 56%, rgba(255, 255, 255, 0) 74% ); } } /* ========================================================== HOME — CENTERED HEADING ACCENT ========================================================== */ .pdstyle-heading.center .pdstyle-heading-accent { margin-left: auto; margin-right: auto; } /* ========================================================== HOME — PRE-OWNED INVENTORY CTA CARD ========================================================== */ .pdstyle-preowned-card { display: flex; width: 100%; height: 100%; min-height: 375px; border-radius: var(--pde-radius-medium); overflow: hidden; background: #3333cc; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.10); } .pdstyle-preowned-card-inner { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; padding: 28px 24px; } .pdstyle-preowned-card-eyebrow { margin-bottom: 0; color: #ff9900; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.10em; line-height: 1.3; text-transform: uppercase; } .pdstyle-preowned-card-icon { display: block; width: clamp(38px, 3.5vw, 58px); height: auto; margin: clamp(5px, 0.6vw, 9px) 0 clamp(7px, 0.8vw, 12px); object-fit: contain; } .pdstyle-preowned-card h3 { margin: 0 0 14px; padding: 0; color: #ffffff; font-size: clamp(1.35rem, 1.7vw, 1.75rem); font-weight: 800; line-height: 1.08; } .pdstyle-preowned-card p { margin: 0 0 24px; color: #ffffff; font-size: 0.92rem; font-weight: 500; line-height: 1.55; } .pdstyle-preowned-card .pdstyle-button { display: inline-flex; align-items: center; justify-content: center; margin-top: auto; padding: 10px 16px; border: 2px solid #ffffff; border-radius: var(--pde-radius-small); background: transparent; color: #ffffff; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; line-height: 1.1; text-decoration: none; text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease; } .pdstyle-preowned-card .pdstyle-button:hover { background: #ffffff; color: #3333cc; } /* ---------------------------------------------------------- FEATURED INVENTORY — DESKTOP CTA BREAKPOINT Fourth Pre-Owned CTA is desktop-only. ---------------------------------------------------------- */ @media (max-width: 1250px) { .pdstyle-featured-desktop-cta { display: none !important; } } /* ========================================================== HOME — WHY LIMIT OUT Divi: Section: pdstyle-home-about Left column: pdstyle-home-about-image Right column: pdstyle-home-about-content Code HTML wrapper: pdstyle-home-about-copy Column classes belong on the columns, not modules. ========================================================== */ .pdstyle-home-about { position: relative; overflow: hidden; background: #151515; } /* ---------------------------------------------------------- ROW ---------------------------------------------------------- */ .pdstyle-home-about .et_pb_row { position: relative; z-index: 2; width: min(96%, 1480px); max-width: 1480px; padding: 0 !important; } /* ---------------------------------------------------------- IMAGE COLUMN ---------------------------------------------------------- */ .pdstyle-home-about-image { position: relative; display: flex; align-self: stretch; min-width: 0; } .pdstyle-home-about-image .et_pb_image { width: 100%; height: 100%; margin: 0 !important; } .pdstyle-home-about-image .et_pb_image_wrap { display: block; width: 100%; height: 100%; } .pdstyle-home-about-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ---------------------------------------------------------- CONTENT COLUMN ---------------------------------------------------------- */ .pdstyle-home-about-content { position: relative; z-index: 2; display: flex; align-items: center; min-width: 0; margin-left: -60px; padding: 48px 45px 44px 85px; } /* ---------------------------------------------------------- CONTENT MODULE / COPY ---------------------------------------------------------- */ .pdstyle-home-about-content .et_pb_code, .pdstyle-home-about-content .et_pb_code_inner { width: 100%; } .pdstyle-home-about-copy { position: relative; z-index: 2; width: 100%; max-width: 720px; transform: translateY(20px); } /* ---------------------------------------------------------- PERFORMANCE ANGLE ---------------------------------------------------------- */ .pdstyle-home-about-content::before { content: ""; position: absolute; inset: 0; z-index: 0; background: #1a1a1a; clip-path: polygon( 60px 0, 100% 0, 100% 100%, 0 100% ); } /* ---------------------------------------------------------- EYEBROW ---------------------------------------------------------- */ .pdstyle-home-about-eyebrow { margin-bottom: 9px; color: var(--pdstyle-accent); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; } /* ---------------------------------------------------------- HEADING ---------------------------------------------------------- */ .pdstyle-home-about h2 { margin: 0 0 20px; color: var(--pdstyle-white); font-family: "Roboto Condensed", Arial, sans-serif; font-size: clamp(1.85rem, 2.15vw, 2.4rem) !important; font-weight: 800; line-height: 1; text-transform: uppercase; } /* ---------------------------------------------------------- COPY ---------------------------------------------------------- */ .pdstyle-home-about p { margin: 0 0 18px; color: rgba(255, 255, 255, 0.88); font-size: 1rem; line-height: 1.5; } /* ---------------------------------------------------------- BUTTON ---------------------------------------------------------- */ .pdstyle-home-about .pdstyle-button { display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; padding: 11px 18px; border: 2px solid var(--pdstyle-white); border-radius: 0; background: transparent; color: var(--pdstyle-white); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.05em; line-height: 1; text-decoration: none; text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .pdstyle-home-about .pdstyle-button:hover, .pdstyle-home-about .pdstyle-button:focus { background: var(--pdstyle-white); color: var(--pdstyle-charcoal); transform: translateY(-1px); } /* ---------------------------------------------------------- DESKTOP COLUMN PROPORTIONS ---------------------------------------------------------- */ @media (min-width: 981px) { .pdstyle-home-about-image { flex: 0 0 46%; width: 46%; } .pdstyle-home-about-content { flex: 0 0 calc(54% + 60px); width: calc(54% + 60px); } } /* ---------------------------------------------------------- TABLET — WHY LIMIT OUT ---------------------------------------------------------- */ @media (max-width: 980px) { .pdstyle-home-about .et_pb_row { width: 100%; } .pdstyle-home-about-image { min-height: 360px; } .pdstyle-home-about-content { margin-left: 0; padding: 46px 34px; } .pdstyle-home-about-content::before { clip-path: none; } .pdstyle-home-about-copy { max-width: none; } .pdstyle-home-about h2 { font-size: clamp(1.8rem, 5vw, 2.2rem) !important; } } /* ---------------------------------------------------------- PHONE — WHY LIMIT OUT ---------------------------------------------------------- */ @media (max-width: 600px) { .pdstyle-home-about-image { min-height: 280px; } .pdstyle-home-about-content { padding: 36px 24px 40px; } .pdstyle-home-about h2 { font-size: clamp(1.7rem, 7.5vw, 2rem) !important; line-height: 1; } .pdstyle-home-about p { font-size: 1rem; line-height: 1.5; } } /* ========================================================== HOME — MARINE SERVICE Divi: Section: pdstyle-home-service Single column: pdstyle-home-service-content Set service image as the section background. Code HTML wrapper: pdstyle-home-service-copy ========================================================== */ .pdstyle-home-service { position: relative; overflow: hidden; background-position: center right; background-repeat: no-repeat; background-size: cover; } /* ---------------------------------------------------------- WHITE CONTENT FADE ---------------------------------------------------------- */ .pdstyle-home-service::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient( 90deg, #ffffff 0%, #ffffff 34%, rgba(255, 255, 255, 0.98) 42%, rgba(255, 255, 255, 0.88) 50%, rgba(255, 255, 255, 0.45) 60%, rgba(255, 255, 255, 0) 72% ); pointer-events: none; } /* ---------------------------------------------------------- ROW ---------------------------------------------------------- */ .pdstyle-home-service .et_pb_row { position: relative; z-index: 2; width: min(94%, 1480px); max-width: 1480px; margin-top: -60px; padding: 22px 0 28px !important; } /* ---------------------------------------------------------- CONTENT AREA ---------------------------------------------------------- */ .pdstyle-home-service-content { width: 66%; max-width: 900px; } .pdstyle-home-service-copy { width: 100%; } /* ---------------------------------------------------------- EYEBROW ---------------------------------------------------------- */ .pdstyle-home-service-eyebrow { margin-bottom: 7px; color: var(--pdstyle-accent); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; } /* ---------------------------------------------------------- HEADING ---------------------------------------------------------- */ .pdstyle-home-service h2 { margin: 0 0 14px; color: var(--pdstyle-charcoal); font-family: "Roboto Condensed", Arial, sans-serif; font-size: clamp(1.5rem, 1.75vw, 1.95rem) !important; font-weight: 800; line-height: 1; text-transform: uppercase; } /* ---------------------------------------------------------- COPY ---------------------------------------------------------- */ .pdstyle-home-service p { max-width: 650px; margin: 0 0 15px; color: var(--pdstyle-text); font-size: 1rem; line-height: 1.5; } /* ---------------------------------------------------------- SERVICE LIST ---------------------------------------------------------- */ .pdstyle-home-service-list { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 42px; row-gap: 6px; width: fit-content; max-width: 100%; margin: 0 0 18px; } .pdstyle-home-service-list span { position: relative; padding-left: 20px; color: var(--pdstyle-charcoal); font-size: 0.9rem; font-weight: 600; line-height: 1.35; } .pdstyle-home-service-list span::before { content: "✓"; position: absolute; top: 0; left: 0; color: var(--pdstyle-accent); font-weight: 800; } /* ---------------------------------------------------------- BUTTON ---------------------------------------------------------- */ .pdstyle-home-service .pdstyle-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border: 0 !important; outline: 0 !important; background: var(--pdstyle-accent) !important; color: var(--pdstyle-white) !important; clip-path: polygon( 8px 0, 100% 0, calc(100% - 8px) 100%, 0 100% ); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.05em; line-height: 1; text-decoration: none !important; text-transform: uppercase; transition: transform 0.2s ease, filter 0.2s ease; } .pdstyle-home-service .pdstyle-button:hover, .pdstyle-home-service .pdstyle-button:focus { background: var(--pdstyle-accent) !important; color: var(--pdstyle-white) !important; transform: translateY(-2px); filter: brightness(1.07); } /* ---------------------------------------------------------- TABLET — SERVICE ---------------------------------------------------------- */ @media (max-width: 980px) { .pdstyle-home-service::before { background: linear-gradient( 90deg, #ffffff 0%, rgba(255, 255, 255, 0.98) 50%, rgba(255, 255, 255, 0.78) 72%, rgba(255, 255, 255, 0.20) 100% ); } .pdstyle-home-service .et_pb_row { width: 90%; margin-top: 0; padding: 42px 0 46px !important; } .pdstyle-home-service-content { width: 78%; max-width: none; } .pdstyle-home-service h2 { font-size: clamp(1.55rem, 4vw, 1.9rem) !important; } .pdstyle-home-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 700px; column-gap: 26px; } } /* ---------------------------------------------------------- PHONE — SERVICE ---------------------------------------------------------- */ @media (max-width: 600px) { .pdstyle-home-service { background-position: 70% center; } .pdstyle-home-service::before { background: rgba(255, 255, 255, 0.92); } .pdstyle-home-service .et_pb_row { width: 88%; margin-top: 0; padding: 36px 0 40px !important; } .pdstyle-home-service-content { width: 100%; max-width: none; } .pdstyle-home-service h2 { font-size: clamp(1.45rem, 6.5vw, 1.75rem) !important; line-height: 1; } .pdstyle-home-service p { font-size: 1rem; line-height: 1.5; } .pdstyle-home-service-list { grid-template-columns: 1fr; width: 100%; max-width: none; gap: 7px; } } /* ========================================================== HOME — NETWORK Divi: Section: pdstyle-home-network Left column: pdstyle-home-network-tackle Right column: pdstyle-home-network-bbt Set each panel background image on its Divi column. Code HTML wrapper: pdstyle-home-network-copy ========================================================== */ .pdstyle-home-network { position: relative; overflow: hidden; padding: 0 !important; background: var(--pdstyle-charcoal); } /* ---------------------------------------------------------- ROW ---------------------------------------------------------- */ .pdstyle-home-network .et_pb_row { position: relative; width: 100%; max-width: none; padding: 0 !important; margin-top: 0; margin-bottom: 0; } /* ---------------------------------------------------------- PANELS ---------------------------------------------------------- */ .pdstyle-home-network-tackle, .pdstyle-home-network-bbt { position: relative; display: flex; align-items: center; min-height: 210px; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover; } /* ---------------------------------------------------------- PANEL OVERLAYS ---------------------------------------------------------- */ .pdstyle-home-network-tackle::before, .pdstyle-home-network-bbt::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; } .pdstyle-home-network-tackle::before { background: linear-gradient( 90deg, rgba(15, 55, 120, 0.18) 0%, rgba(15, 55, 120, 0.38) 24%, rgba(20, 65, 150, 0.72) 48%, rgba(20, 65, 150, 0.92) 72%, rgba(20, 65, 150, 0.98) 100% ); } .pdstyle-home-network-bbt::before { background: linear-gradient( 90deg, rgba(18, 18, 18, 0.98) 0%, rgba(18, 18, 18, 0.94) 28%, rgba(18, 18, 18, 0.80) 52%, rgba(18, 18, 18, 0.48) 74%, rgba(18, 18, 18, 0.16) 100% ); } /* ---------------------------------------------------------- CODE MODULE ---------------------------------------------------------- */ .pdstyle-home-network .et_pb_code, .pdstyle-home-network .et_pb_code_inner { position: relative; z-index: 2; width: 100%; } /* ---------------------------------------------------------- CONTENT ---------------------------------------------------------- */ .pdstyle-home-network-copy { position: relative; z-index: 2; width: min(100%, 500px); padding: 26px 40px; } .pdstyle-home-network-tackle .pdstyle-home-network-copy { margin-left: auto; padding-right: 58px; } .pdstyle-home-network-bbt .pdstyle-home-network-copy { margin-right: auto; padding-left: 58px; } /* ---------------------------------------------------------- EYEBROW ---------------------------------------------------------- */ .pdstyle-home-network-eyebrow { margin: 0 0 7px; color: var(--pdstyle-accent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; } /* ---------------------------------------------------------- HEADING ---------------------------------------------------------- */ .pdstyle-home-network h2 { margin: 0 0 10px; color: var(--pdstyle-white); font-family: "Roboto Condensed", Arial, sans-serif; font-size: clamp(1.35rem, 1.6vw, 1.8rem) !important; font-weight: 800; line-height: 1; text-transform: uppercase; } /* ---------------------------------------------------------- COPY ---------------------------------------------------------- */ .pdstyle-home-network p { max-width: 420px; margin: 0 0 16px; color: rgba(255, 255, 255, 0.90); font-size: 0.92rem; line-height: 1.45; } /* ---------------------------------------------------------- BUTTON ---------------------------------------------------------- */ .pdstyle-home-network .pdstyle-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border: 2px solid var(--pdstyle-white); background: transparent; color: var(--pdstyle-white) !important; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; line-height: 1; text-decoration: none !important; text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .pdstyle-home-network .pdstyle-button:hover, .pdstyle-home-network .pdstyle-button:focus { background: var(--pdstyle-white); color: var(--pdstyle-charcoal) !important; transform: translateY(-2px); } /* ---------------------------------------------------------- DESKTOP — ANGLED CENTER SEAM ---------------------------------------------------------- */ @media (min-width: 981px) { .pdstyle-home-network-tackle { width: 50%; flex: 0 0 50%; } /* * Right panel overlaps 18px, then adds 18px back * so the full-width band still reaches the right edge. */ .pdstyle-home-network-bbt { margin-left: -18px; width: calc(50% + 18px); flex: 0 0 calc(50% + 18px); clip-path: polygon( 18px 0, 100% 0, 100% 100%, 0 100% ); } .pdstyle-home-network .et_pb_row::after { content: ""; position: absolute; z-index: 10; top: -8%; left: 50%; width: 5px; height: 116%; background: var(--pdstyle-accent); transform: translateX(-9px) rotate(4deg); transform-origin: center; pointer-events: none; } } /* ---------------------------------------------------------- TABLET — NETWORK ---------------------------------------------------------- */ @media (max-width: 980px) { .pdstyle-home-network-tackle, .pdstyle-home-network-bbt { min-height: 230px; } .pdstyle-home-network-copy, .pdstyle-home-network-tackle .pdstyle-home-network-copy, .pdstyle-home-network-bbt .pdstyle-home-network-copy { width: 90%; max-width: 620px; margin-left: auto; margin-right: auto; padding: 34px 0; } .pdstyle-home-network h2 { font-size: clamp(1.45rem, 4vw, 1.8rem) !important; } } /* ---------------------------------------------------------- PHONE — NETWORK ---------------------------------------------------------- */ @media (max-width: 600px) { .pdstyle-home-network-tackle, .pdstyle-home-network-bbt { min-height: 220px; } .pdstyle-home-network-copy, .pdstyle-home-network-tackle .pdstyle-home-network-copy, .pdstyle-home-network-bbt .pdstyle-home-network-copy { width: 88%; padding: 30px 0; } .pdstyle-home-network h2 { font-size: clamp(1.4rem, 6.5vw, 1.7rem) !important; } .pdstyle-home-network p { font-size: 0.92rem; } } /* ========================================================== HOME — BUYING TOOLS Divi: Section: pdstyle-home-buying-tools Columns: pdstyle-home-buying-finance pdstyle-home-buying-trade pdstyle-home-buying-support pdstyle-home-buying-cta First three columns use pdstyle-home-buying-item HTML. Final column is the orange CTA. ========================================================== */ .pdstyle-home-buying-tools { position: relative; overflow: hidden; padding: 0 !important; background: #f7f7f5; } /* ---------------------------------------------------------- ROW ---------------------------------------------------------- */ .pdstyle-home-buying-tools .et_pb_row { width: min(94%, 1280px); max-width: 1280px; padding: 0 !important; } /* ---------------------------------------------------------- STANDARD COLUMNS ---------------------------------------------------------- */ .pdstyle-home-buying-finance, .pdstyle-home-buying-trade, .pdstyle-home-buying-support { position: relative; display: flex; align-items: center; padding: 24px 28px 24px 20px; } .pdstyle-home-buying-finance::after, .pdstyle-home-buying-trade::after { content: ""; position: absolute; top: 22%; right: 0; width: 1px; height: 56%; background: rgba(0, 0, 0, 0.12); } /* ---------------------------------------------------------- ITEM ---------------------------------------------------------- */ .pdstyle-home-buying-item { display: flex; align-items: center; width: 100%; gap: 18px; } /* ---------------------------------------------------------- ICONS ---------------------------------------------------------- */ .pdstyle-home-buying-icon { flex: 0 0 44px; display: flex; align-items: center; justify-content: center; } .pdstyle-home-buying-icon svg { display: block; width: 38px; height: 38px; overflow: visible; } .pdstyle-home-buying-icon svg, .pdstyle-home-buying-icon svg path, .pdstyle-home-buying-icon svg line, .pdstyle-home-buying-icon svg polyline { fill: none !important; stroke: var(--pdstyle-accent) !important; stroke-width: 2.6 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } /* ---------------------------------------------------------- COPY ---------------------------------------------------------- */ .pdstyle-home-buying-copy { flex: 1; min-width: 0; } .pdstyle-home-buying-copy h3 { margin: 0 0 5px; padding: 0; color: var(--pdstyle-charcoal); font-family: "Roboto Condensed", Arial, sans-serif; font-size: 0.92rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; } .pdstyle-home-buying-copy p { margin: 0; color: var(--pdstyle-text); font-size: 0.82rem; line-height: 1.4; } /* ---------------------------------------------------------- TEXT LINK ---------------------------------------------------------- */ .pdstyle-home-buying-link { display: inline-block; margin-top: 5px; color: var(--pdstyle-accent); font-size: 0.76rem; font-weight: 800; line-height: 1.2; text-decoration: none; text-transform: uppercase; } .pdstyle-home-buying-link span { display: inline-block; margin-left: 4px; transition: transform 0.2s ease; } .pdstyle-home-buying-link:hover span, .pdstyle-home-buying-link:focus span { transform: translateX(4px); } /* ---------------------------------------------------------- CLOSING CTA COLUMN ---------------------------------------------------------- */ .pdstyle-home-buying-cta { position: relative; display: flex; align-items: center; margin-left: -20px; padding: 22px 26px 22px 48px; background: var(--pdstyle-accent); clip-path: polygon( 20px 0, 100% 0, 100% 100%, 0 100% ); } .pdstyle-home-buying-close { width: 100%; } .pdstyle-home-buying-close-eyebrow { margin-bottom: 4px; color: var(--pdstyle-white); font-family: "Roboto Condensed", Arial, sans-serif; font-size: 0.82rem; font-weight: 800; line-height: 1.15; text-transform: uppercase; } .pdstyle-home-buying-close p { margin: 0 0 10px; color: var(--pdstyle-white); font-size: 0.82rem; line-height: 1.35; } /* ---------------------------------------------------------- CTA BUTTON ---------------------------------------------------------- */ .pdstyle-home-buying-close .pdstyle-button { display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; border: 2px solid var(--pdstyle-white); background: transparent; color: var(--pdstyle-white); font-size: 0.72rem; font-weight: 800; line-height: 1; text-decoration: none; text-transform: uppercase; } .pdstyle-home-buying-close .pdstyle-button span { margin-left: 8px; transition: transform 0.2s ease; } .pdstyle-home-buying-close .pdstyle-button:hover span, .pdstyle-home-buying-close .pdstyle-button:focus span { transform: translateX(4px); } /* ---------------------------------------------------------- TABLET — BUYING TOOLS ---------------------------------------------------------- */ @media (max-width: 980px) { .pdstyle-home-buying-tools .et_pb_row { width: 100%; } .pdstyle-home-buying-finance, .pdstyle-home-buying-trade, .pdstyle-home-buying-support { padding: 24px 30px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .pdstyle-home-buying-finance::after, .pdstyle-home-buying-trade::after { content: none; } .pdstyle-home-buying-cta { margin-left: 0; padding: 28px 30px; clip-path: none; } } /* ---------------------------------------------------------- PHONE — BUYING TOOLS ---------------------------------------------------------- */ @media (max-width: 600px) { .pdstyle-home-buying-finance, .pdstyle-home-buying-trade, .pdstyle-home-buying-support { padding: 22px 24px; } .pdstyle-home-buying-item { gap: 15px; flex-direction: column; align-items: center; text-align: center; } .pdstyle-home-buying-copy { text-align: center; } .pdstyle-home-buying-icon { flex-basis: 42px; } .pdstyle-home-buying-cta { padding: 26px 24px; } } /* ========================================================== HOME — CLOSING MESSAGE Divi section: pdstyle-home-close-section Code HTML wrapper: pdstyle-home-close ========================================================== */ .pdstyle-home-close-section { background: #f3f3f1; } .pdstyle-home-close-section .et_pb_row { width: min(90%, 980px); max-width: 980px; padding: 72px 0 78px !important; } /* ---------------------------------------------------------- WRAPPER ---------------------------------------------------------- */ .pdstyle-home-close { text-align: center; } /* ---------------------------------------------------------- COPY ---------------------------------------------------------- */ .pdstyle-home-close-copy { width: min(100%, 820px); margin: 22px auto 0; } .pdstyle-home-close-copy p { margin: 0 auto 16px; color: var(--pdstyle-text); font-size: clamp(1rem, 1.05vw, 1.08rem); line-height: 1.65; } .pdstyle-home-close-copy p:last-of-type { margin-bottom: 20px; } /* ---------------------------------------------------------- TEXT CTA ---------------------------------------------------------- */ .pdstyle-home-close-link { display: inline-flex; align-items: center; gap: 7px; color: var(--pdstyle-accent); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.05em; line-height: 1; text-decoration: none; text-transform: uppercase; } .pdstyle-home-close-link span { display: inline-block; transition: transform 0.2s ease; } .pdstyle-home-close-link:hover span, .pdstyle-home-close-link:focus span { transform: translateX(4px); } /* ---------------------------------------------------------- TABLET — CLOSING MESSAGE ---------------------------------------------------------- */ @media (max-width: 980px) { .pdstyle-home-close-section .et_pb_row { width: 88%; padding: 58px 0 62px !important; } } /* ---------------------------------------------------------- PHONE — CLOSING MESSAGE ---------------------------------------------------------- */ @media (max-width: 600px) { .pdstyle-home-close-section .et_pb_row { width: 88%; padding: 48px 0 52px !important; } .pdstyle-home-close-copy { margin-top: 18px; } .pdstyle-home-close-copy p { font-size: 1rem; line-height: 1.55; } } /* ========================================================== ========================================================== LIMIT OUT — FINANCE ========================================================== ========================================================== */ /* ========================================================== FINANCE — CALCULATOR RESPONSIVE LAYOUT ========================================================== */ @media (max-width: 1100px) { .pdstyle-finance-calc-row { display: flex; flex-direction: column; } .pdstyle-finance-calc-row > .et_pb_column { width: 100% !important; margin-right: 0 !important; } .pdstyle-finance-calc-row > .et_pb_column:last-child { max-width: 420px; } }