/* Theme Name: Impulse DJs (Beaver Builder Child) Theme URI: https://impulsedjs.com Version: 1.9.15 Description: Impulse Entertainment child theme for the Beaver Builder Theme. Source of truth for brand styles, fonts, tracking and the lead form. Author: Kenneth Morales template: bb-theme */ /* * 2026 redesign — "the night everyone talks about". * After-dark photography; Impulse pink + blue used as LIGHT (uplighting glows), not flat fills. * DM Serif Display for headings (24px and up only; italicise one phrase), Poppins for everything else. * Design reference: design/homepage-mockup/ in the project repo. * * How editors use it: drag sections from Saved → "IMP – …". The look comes from the classes below, * set on rows/columns/modules (Advanced → Class). Text, photos and links are edited in place. */ /* ---------- Fonts (self-hosted, swap so text shows immediately) ---------- */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/Poppins-Light.woff2) format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/Poppins-Regular.woff2) format('woff2'); } @font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/Poppins-Italic.woff2) format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/Poppins-Medium.woff2) format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/Poppins-SemiBold.woff2) format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/Poppins-Bold.woff2) format('woff2'); } @font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/DMSerifDisplay-Regular.woff2) format('woff2'); } @font-face { font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/DMSerifDisplay-Italic.woff2) format('woff2'); } /* ---------- Brand tokens ---------- */ :root { --iedjs-pink: #ed03ad; --iedjs-pink-hover: #ff1fbd; --iedjs-pink-glow: rgba(237, 3, 173, .55); --iedjs-blue: #00aeef; --iedjs-blue-light: #4ebde5; --iedjs-blue-glow: rgba(0, 174, 239, .45); --iedjs-ink: #0c0a0f; /* night sections */ --iedjs-ink-2: #16131b; /* raised surface on night */ --iedjs-footer: #070609; --iedjs-paper: #fbf9fa; /* day sections */ --iedjs-blush: #f7eef4; --iedjs-black: #17151a; /* text */ --iedjs-text-soft: #5e5866; --iedjs-night-soft: rgba(255, 255, 255, .72); --iedjs-line: #e9e3e8; --iedjs-yellow: #ffc200; /* review stars */ --iedjs-white: #fff; --iedjs-font: 'Poppins', 'Helvetica Neue', Arial, sans-serif; --iedjs-display: 'DM Serif Display', Georgia, 'Times New Roman', serif; --iedjs-radius: 20px; } /* ---------- Base typography ---------- */ body { background: var(--iedjs-paper); -webkit-font-smoothing: antialiased; } body, button, input, select, textarea, .fl-builder-content { font-family: var(--iedjs-font); font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--iedjs-black); } strong, b { font-weight: 600; } p { margin: 0 0 24px; } .fl-rich-text > :last-child, .fl-rich-text p:last-child { margin-bottom: 0; } a { color: var(--iedjs-pink); } a:hover, a:focus { color: var(--iedjs-pink-hover); } /* Focus rings only for keyboard users: clicking or tapping (accordion, links, buttons) shows no outline. */ *:focus:not(:focus-visible) { outline: none !important; } :focus-visible { outline: 2px solid var(--iedjs-blue) !important; outline-offset: 4px; } h1, h2, h3, h4, h5, h6, .fl-heading { color: inherit; margin: 0 0 16px; text-wrap: balance; } h1, h2, .fl-module-heading h1.fl-heading, .fl-module-heading h2.fl-heading { font-family: var(--iedjs-display); font-weight: 400; letter-spacing: -.01em; } h1, .fl-module-heading h1.fl-heading { font-size: clamp(3rem, 8.4vw, 7.2rem); line-height: .98; } h2, .fl-module-heading h2.fl-heading { font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.06; } h1 em, h2 em { font-style: italic; } /* Coloured italic phrase. Built into the intro, video and Check Your Date sections; elsewhere add Heading module class iedjs-accent-pink or iedjs-accent-blue. */ .iedjs-intro h2 em, .iedjs-cta-final h2 em, .iedjs-accent-pink em { color: var(--iedjs-pink); } .iedjs-video-row h2 em, .iedjs-accent-blue em { color: var(--iedjs-blue); } h3, h4, h5, h6 { font-family: var(--iedjs-font); font-weight: 600; letter-spacing: -.005em; } h3 { font-size: 1.2rem; line-height: 1.3; } h4 { font-size: 1.1rem; line-height: 1.4; } h5 { font-size: 1rem; line-height: 1.5; } h6 { font-size: 14px; line-height: 1.5; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; } /* Small uppercase label above a heading — Text module class: iedjs-label */ .iedjs-label, .iedjs-label p { font: 500 12px/1.3 var(--iedjs-font); letter-spacing: .22em; text-transform: uppercase; color: var(--iedjs-pink); } /* Blue label: built into the services section; elsewhere add class iedjs-label--blue */ .iedjs-services .fl-col-group:first-child .iedjs-label p, .iedjs-label--blue p { color: var(--iedjs-blue); } .iedjs-label--line p { display: flex; align-items: center; gap: 14px; } .iedjs-label--line p::before { content: ''; width: 36px; height: 1px; background: var(--iedjs-pink); flex: none; } /* Larger intro sentence — Text module class: iedjs-lead */ .iedjs-lead p { font-size: 1.3rem; line-height: 1.55; font-weight: 400; color: var(--iedjs-black); } /* Italic serif statement — Text module class: iedjs-statement */ .iedjs-statement p { font: italic 400 1.75rem/1.3 var(--iedjs-display); color: var(--iedjs-black); } .iedjs-soft p { color: var(--iedjs-text-soft); } /* ---------- Buttons ---------- * Button module → Advanced → Class: iedjs-btn-primary | iedjs-btn-ghost | iedjs-btn-secondary | iedjs-btn-blue | iedjs-btn-black | iedjs-btn-white * Add iedjs-btn-play for the ▶ icon (Watch Video). Two buttons side by side: add iedjs-inline to both. */ [class*="iedjs-btn-"] a.fl-button, [class*="iedjs-btn-"] a.fl-button:visited { font: 500 16px/1 var(--iedjs-font); letter-spacing: .02em; padding: 20px 30px; border: 1px solid transparent; border-radius: 999px; display: inline-flex; align-items: center; gap: 12px; position: relative; top: 0; transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, top .3s ease; } [class*="iedjs-btn-"] a.fl-button .fl-button-text { color: inherit; } .iedjs-btn-primary a.fl-button { background: var(--iedjs-pink); border-color: var(--iedjs-pink); color: #fff; box-shadow: 0 10px 36px -8px var(--iedjs-pink-glow); } .iedjs-btn-primary a.fl-button:hover, .iedjs-btn-primary a.fl-button:focus { background: var(--iedjs-pink-hover); border-color: var(--iedjs-pink-hover); color: #fff; top: -2px; box-shadow: 0 14px 44px -6px var(--iedjs-pink-glow); } .iedjs-btn-ghost a.fl-button, .iedjs-btn-white a.fl-button { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; } .iedjs-btn-ghost a.fl-button:hover, .iedjs-btn-ghost a.fl-button:focus, .iedjs-btn-white a.fl-button:hover, .iedjs-btn-white a.fl-button:focus { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; } .iedjs-btn-secondary a.fl-button { background: transparent; border-color: var(--iedjs-pink); color: var(--iedjs-pink); } .iedjs-btn-secondary a.fl-button:hover, .iedjs-btn-secondary a.fl-button:focus { background: var(--iedjs-pink); color: #fff; } .iedjs-btn-blue a.fl-button { background: var(--iedjs-blue); border-color: var(--iedjs-blue); color: #fff; } .iedjs-btn-blue a.fl-button:hover, .iedjs-btn-blue a.fl-button:focus { background: var(--iedjs-pink); border-color: var(--iedjs-pink); color: #fff; top: -2px; } .iedjs-btn-black a.fl-button { background: var(--iedjs-black); border-color: var(--iedjs-black); color: #fff; } .iedjs-btn-black a.fl-button:hover, .iedjs-btn-black a.fl-button:focus { color: #fff; top: -2px; } .iedjs-btn-play a.fl-button::before { content: ''; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; } .fl-module.iedjs-inline { display: inline-block; width: auto; vertical-align: top; } /* Beaver Builder columns are vertical flex boxes: let a column holding inline buttons wrap as a row instead. */ .fl-col-content:has(> .fl-module.iedjs-inline) { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; align-content: flex-end; } .fl-col-content:has(> .fl-module.iedjs-inline) > .fl-module:not(.iedjs-inline) { flex: 0 0 100%; width: 100%; } .fl-col-content:has(> .fl-module.iedjs-inline) > .fl-module.iedjs-inline { flex: 0 0 auto; } @media (max-width: 480px) { .fl-col-content:has(> .fl-module.iedjs-inline) > .fl-module.iedjs-inline { margin-bottom: 12px; } } /* Small line under a button — Text module class: iedjs-microcopy */ .iedjs-microcopy { font-size: 15px; font-weight: 300; text-align: center; margin-top: 10px; } /* ---------- Sections (Row → Advanced → Class) ---------- * iedjs-night dark section (white text) * iedjs-blush soft pink section * iedjs-uplight pink + blue uplight glow along the bottom edge (use on night rows) * iedjs-dark-top put on a page's FIRST row when it's dark, so the header starts white * iedjs-grid rows with card/column grids: even gutters between columns */ .fl-row-content { position: relative; z-index: 2; } .iedjs-night > .fl-row-content-wrap { background-color: var(--iedjs-ink); color: #fff; } .iedjs-night .fl-rich-text, .iedjs-night .fl-rich-text p { color: var(--iedjs-night-soft); } .iedjs-night .fl-heading, .iedjs-night h1, .iedjs-night h2, .iedjs-night h3, .iedjs-night h4 { color: #fff; } .iedjs-night a:not(.fl-button) { color: #fff; } .iedjs-blush > .fl-row-content-wrap { background-color: var(--iedjs-blush); } .iedjs-uplight > .fl-row-content-wrap { position: relative; overflow: hidden; isolation: isolate; } .iedjs-uplight > .fl-row-content-wrap::before { content: ''; position: absolute; z-index: 1; left: -10%; right: -10%; bottom: -35%; height: 70%; pointer-events: none; background: radial-gradient(40% 60% at 18% 100%, var(--iedjs-pink-glow), transparent 70%), radial-gradient(38% 55% at 84% 100%, var(--iedjs-blue-glow), transparent 70%); filter: blur(10px); } /* Photo-background rows: darken the photo so text reads (hero + final call to action) */ .iedjs-photo-dark > .fl-row-content-wrap::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(12, 10, 15, .78), rgba(12, 10, 15, .9)); } .iedjs-grid .fl-col-group:has(> .fl-col + .fl-col) { margin-inline: -13px; } .iedjs-grid .fl-col-group:has(> .fl-col + .fl-col) > .fl-col > .fl-col-content { padding-inline: 13px; } /* ---------- Hero — row class: iedjs-hero iedjs-night iedjs-uplight iedjs-dark-top ---------- */ .iedjs-hero > .fl-row-content-wrap { background-color: var(--iedjs-ink); } .iedjs-hero > .fl-row-content-wrap::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(12, 10, 15, .55) 0%, rgba(12, 10, 15, .1) 30%, rgba(12, 10, 15, .35) 60%, rgba(12, 10, 15, .95) 100%); } @media (min-width: 900px) { .iedjs-hero > .fl-row-content-wrap::after { background: linear-gradient(90deg, rgba(12, 10, 15, .85) 0%, rgba(12, 10, 15, .35) 50%, rgba(12, 10, 15, .15) 100%), linear-gradient(180deg, transparent 60%, rgba(12, 10, 15, .9) 100%); } } .iedjs-hero .fl-col-content { max-width: 980px; } .iedjs-hero h1 em { display: block; text-shadow: 0 0 40px rgba(237, 3, 173, .35); } @media (max-width: 768px) { .iedjs-hero > .fl-row-content-wrap { background-position: 62% center !important; } } /* Video background: phones show the fallback photo inside the video layer — same crop as the photo hero */ .iedjs-hero .fl-bg-video { background-size: cover; background-position: 62% center; } .iedjs-hero .fl-bg-video video { object-fit: cover; } .iedjs-hero .iedjs-label p { color: rgba(255, 255, 255, .78); } /* ---------- Proof bar — row class: iedjs-proof (sits over the bottom of the hero) ---------- */ .fl-row.iedjs-proof { position: relative; z-index: 5; margin-top: clamp(-110px, -9vw, -70px); } .iedjs-proof > .fl-row-content-wrap { background: transparent; } .iedjs-proof .fl-row-content { background: var(--iedjs-ink-2); border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; color: #fff; padding: 24px 26px; } .iedjs-proof .fl-col-group { align-items: center; } .iedjs-proof-score p { display: flex; align-items: center; gap: 18px; margin: 0; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.5; } .iedjs-proof-score .iedjs-proof-num { font: 400 clamp(3rem, 5vw, 3.8rem)/1 var(--iedjs-display); color: #fff; flex: none; } .iedjs-stars { color: var(--iedjs-yellow); letter-spacing: 3px; font-size: 15px; display: block; } .iedjs-badges > .fl-col-content { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; } .iedjs-badges .fl-module { margin: 0 !important; } .iedjs-badges .fl-photo-content { background: #fff; border-radius: 14px; height: 72px; padding: 8px 12px; display: grid; place-items: center; } .iedjs-badges .fl-photo-content img { max-height: 56px; width: auto; } .iedjs-badges .iedjs-badge-wide .fl-photo-content { background: transparent; padding: 8px 4px; } .iedjs-badge-wide .fl-photo-content img { max-height: 30px; } @media (min-width: 960px) { .iedjs-proof .fl-row-content { padding: 26px 34px; } .iedjs-badges > .fl-col-content { justify-content: flex-end; } .iedjs-badges .fl-photo-content { height: 84px; } .iedjs-badges .fl-photo-content img { max-height: 66px; } .iedjs-badge-wide .fl-photo-content img { max-height: 32px; } } /* ---------- Reviews (magazine style) — Text module class: iedjs-review ---------- * First paragraph = the quote, last paragraph = name · place. */ .iedjs-review { position: relative; } .iedjs-review .fl-rich-text::before { content: '“'; display: block; font: 400 4.5rem/.6 var(--iedjs-display); color: var(--iedjs-pink); height: 34px; } .iedjs-review .fl-rich-text p { font-size: 1.12rem; line-height: 1.65; font-weight: 400; color: var(--iedjs-black); margin-bottom: 16px; } .iedjs-review .fl-rich-text p:last-child { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--iedjs-text-soft); margin: 0; } @media (min-width: 769px) { .iedjs-reviews .fl-col + .fl-col > .fl-col-content { border-left: 1px solid var(--iedjs-line); } .iedjs-reviews .fl-col > .fl-col-content { padding-inline: 40px; } .iedjs-reviews .fl-col:first-child > .fl-col-content { padding-left: 0; } .iedjs-reviews .fl-col:last-child > .fl-col-content { padding-right: 0; } } @media (max-width: 768px) { .iedjs-reviews .fl-col > .fl-col-content { border-top: 1px solid var(--iedjs-line); padding-block: 32px; } } /* ---------- Service cards — Callout module class: iedjs-card (photo "Above Heading") ---------- */ .iedjs-card .fl-callout { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; max-height: 560px; padding: 30px; border-radius: var(--iedjs-radius); overflow: hidden; text-align: left; color: #fff; background: var(--iedjs-ink-2); } .iedjs-card .fl-callout-content { position: static; } .iedjs-card .fl-callout-photo { position: absolute; inset: 0; z-index: -2; margin: 0; } .iedjs-card .fl-callout-photo .fl-photo, .iedjs-card .fl-callout-photo .fl-photo-content, .iedjs-card .fl-callout-photo a, .iedjs-card .fl-callout-photo img { display: block; width: 100%; height: 100%; } .iedjs-card .fl-callout-photo img { object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); } .iedjs-card .fl-callout::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 10, 15, 0) 30%, rgba(12, 10, 15, .92) 100%); } .iedjs-card .fl-callout::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: box-shadow .4s ease; } .iedjs-card:hover .fl-callout-photo img { transform: scale(1.05); } .iedjs-card:hover .fl-callout::after { box-shadow: inset 0 0 0 1px var(--iedjs-pink), inset 0 -60px 80px -40px var(--iedjs-pink-glow); } .iedjs-card .fl-callout-title { font: 400 2.1rem/1.05 var(--iedjs-display); color: #fff; margin: 0 0 10px; } .iedjs-card .fl-callout-title a { color: inherit; text-decoration: none; } .iedjs-card .fl-callout-text, .iedjs-card .fl-callout-text p { font-size: 15px; line-height: 1.6; color: var(--iedjs-night-soft); } .iedjs-card .fl-callout-cta-link { display: inline-flex; gap: 10px; margin-top: 20px; font-size: 14px; font-weight: 500; letter-spacing: .04em; color: #fff; text-decoration: none; } .iedjs-card .fl-callout-cta-link::after { content: '→'; transition: transform .25s ease; } .iedjs-card:hover .fl-callout-cta-link::after { transform: translateX(5px); } /* whole card is clickable */ .iedjs-card .fl-callout-cta-link::before { content: ''; position: absolute; inset: 0; z-index: 3; } /* Quote under a card — Text module class: iedjs-card-quote (last paragraph = name) */ .iedjs-card-quote p { font-size: 14px; line-height: 1.6; color: var(--iedjs-night-soft); margin-bottom: 8px; padding-inline: 6px; } .iedjs-card-quote p:last-child { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); } /* Small horizontal card — Callout module class: iedjs-card-small (photo "Left of Text and Heading") */ .iedjs-card-small .fl-callout { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 22px; align-items: center; padding: 14px; border-radius: 18px; background: var(--iedjs-ink-2); border: 1px solid rgba(255, 255, 255, .08); text-align: left; transition: border-color .3s ease, box-shadow .3s ease; } .iedjs-card-small:hover .fl-callout { border-color: rgba(0, 174, 239, .6); box-shadow: 0 0 50px -16px var(--iedjs-blue-glow); } /* Undo Beaver Builder's table layout for left photos (50% / 50% cells) so the grid sizes them */ .iedjs-card-small .fl-callout-photo, .iedjs-card-small .fl-callout-content { display: block; width: auto; min-width: 0; margin: 0; padding: 0; } .iedjs-card-small .fl-callout-photo .fl-photo-content { display: block; } .iedjs-card-small .fl-callout-photo img { width: 112px; height: 112px; object-fit: cover; border-radius: 12px; } .iedjs-card-small .fl-callout-title { font: 400 1.5rem/1.1 var(--iedjs-display); color: #fff; margin: 0 0 6px; } .iedjs-card-small .fl-callout-title a { color: inherit; text-decoration: none; } .iedjs-card-small .fl-callout-text, .iedjs-card-small .fl-callout-text p { font-size: 14px; line-height: 1.55; color: var(--iedjs-night-soft); } .iedjs-card-small .fl-callout-cta-link { display: inline-flex; gap: 10px; margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--iedjs-pink); text-decoration: none; } .iedjs-card-small .fl-callout-cta-link::after { content: '→'; } /* beats the night sections' white-link rule */ .iedjs-card-small a.fl-callout-cta-link, .iedjs-night .iedjs-card-small a.fl-callout-cta-link { color: var(--iedjs-pink); } .iedjs-night .iedjs-card-small:hover a.fl-callout-cta-link { color: var(--iedjs-pink-hover); } .iedjs-card-small .fl-callout-cta-link::before { content: ''; position: absolute; inset: 0; } @media (min-width: 900px) { .iedjs-card-small .fl-callout { grid-template-columns: 150px 1fr; } .iedjs-card-small .fl-callout-photo img { width: 150px; height: 150px; } } /* ---------- Image + text — Photo module class: iedjs-glow (pink) or iedjs-glow-blue ---------- */ .iedjs-glow .fl-photo-content, .iedjs-glow-blue .fl-photo-content { position: relative; isolation: isolate; display: block; } .iedjs-glow img, .iedjs-glow-blue img { width: 100%; aspect-ratio: 4 / 5; max-height: 680px; object-fit: cover; border-radius: var(--iedjs-radius); } .iedjs-glow .fl-photo-content::before, .iedjs-glow-blue .fl-photo-content::before { content: ''; position: absolute; z-index: -1; border-radius: 28px; filter: blur(30px); opacity: .9; } .iedjs-glow .fl-photo-content::before { inset: 12% -6% -6% 12%; background: radial-gradient(60% 60% at 70% 80%, var(--iedjs-pink-glow), transparent 70%); } .iedjs-glow-blue .fl-photo-content::before { inset: 12% 12% -6% -6%; background: radial-gradient(60% 60% at 30% 80%, var(--iedjs-blue-glow), transparent 70%); } /* Review beside a claim — Text module class: iedjs-pull (or iedjs-pull-blue). Last paragraph = name. */ .iedjs-pull .fl-rich-text, .iedjs-pull-blue .fl-rich-text { padding-left: 22px; border-left: 2px solid var(--iedjs-pink); } .iedjs-pull-blue .fl-rich-text { border-left-color: var(--iedjs-blue); } .iedjs-pull p, .iedjs-pull-blue p { font-size: 1.1rem; line-height: 1.6; font-weight: 500; color: var(--iedjs-black); margin-bottom: 8px; } .iedjs-pull p:last-child, .iedjs-pull-blue p:last-child { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--iedjs-text-soft); } /* ---------- Feature cards (planning tools) — Column class: iedjs-tile ---------- */ .iedjs-tile > .fl-col-content { background: #fff; border-radius: var(--iedjs-radius); padding: 32px 28px; height: 100%; } .iedjs-grid .fl-col-group:has(> .fl-col + .fl-col) > .iedjs-tile > .fl-col-content { padding: 32px 28px; } /* Tiles in a row share the tallest height */ .iedjs-grid .fl-col-group:has(> .iedjs-tile) { margin-inline: -10px; row-gap: 20px; display: flex; flex-wrap: wrap; align-items: stretch; } .iedjs-grid .fl-col-group:has(> .iedjs-tile) > .iedjs-tile { display: flex; float: none; } .iedjs-grid .fl-col-group:has(> .iedjs-tile) > .iedjs-tile > .fl-col-content { flex: 1; } .iedjs-grid .fl-col-group:has(> .iedjs-tile) > .iedjs-tile { padding-inline: 10px; } .iedjs-tile .fl-photo-content img { width: 48px; height: 48px; object-fit: contain; } .iedjs-tile p { font-size: 15px; color: var(--iedjs-text-soft); } /* ---------- Meet the DJs — Column class: iedjs-person; Photo module class: iedjs-person-photo (link it to the DJ's page) ---------- */ .iedjs-person-photo .fl-photo-content { display: block; border-radius: var(--iedjs-radius); overflow: hidden; } .iedjs-person-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); } .iedjs-person:hover .iedjs-person-photo img, .iedjs-person-photo a:focus-visible img { filter: none; transform: scale(1.04); } .iedjs-person h3 { font: 400 1.5rem/1.15 var(--iedjs-display); } .iedjs-team .fl-col-group:has(> .iedjs-person) { justify-content: center; } /* a short row (e.g. 2 office staff) sits in the middle */ .iedjs-person-role p { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--iedjs-text-soft); } @media (max-width: 768px) { .iedjs-team .fl-col-group:has(> .iedjs-person) { display: flex; flex-wrap: wrap; } .iedjs-team .iedjs-person { width: 50% !important; } } /* ---------- How it works — Column class: iedjs-step; number Text module class: iedjs-step-num ---------- */ .iedjs-step-num p { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 400 1.9rem/1 var(--iedjs-display); color: #fff; border: 1px solid rgba(255, 255, 255, .25); background: radial-gradient(circle at 50% 120%, var(--iedjs-pink-glow), transparent 70%); box-shadow: 0 0 40px -10px var(--iedjs-pink-glow); } .iedjs-step:nth-child(2) .iedjs-step-num p { background: radial-gradient(circle at 50% 120%, var(--iedjs-blue-glow), transparent 70%); box-shadow: 0 0 40px -10px var(--iedjs-blue-glow); } .iedjs-step h3 { font: 400 1.75rem/1.15 var(--iedjs-display); color: #fff; } @media (min-width: 769px) { .iedjs-step > .fl-col-content { padding-right: 30px; } } /* ---------- Pricing — Column class: iedjs-price-card; amount Text module class: iedjs-price ---------- */ .iedjs-price-card > .fl-col-content { position: relative; isolation: isolate; overflow: hidden; background: var(--iedjs-ink); color: #fff; border-radius: 24px; padding: 48px 44px; } .iedjs-price-card > .fl-col-content::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 18% 118%, var(--iedjs-pink-glow), transparent 70%), radial-gradient(55% 65% at 86% 118%, var(--iedjs-blue-glow), transparent 70%); } .iedjs-price-card .fl-rich-text p { color: var(--iedjs-night-soft); } .iedjs-price-card .iedjs-label p { color: rgba(255, 255, 255, .7); } .iedjs-price p { font: 400 clamp(4rem, 9vw, 6.5rem)/1 var(--iedjs-display) !important; color: #fff !important; letter-spacing: -.02em; } .iedjs-price-card--pair > .fl-col-content { margin: 0 12px; text-align: center; } /* two price cards side by side (Ceremony) */ /* On phones BB's layout CSS zeroes every column's side padding (.fl-col[data-node] .fl-col-content), which pushed the text in boxed cards flush against the card edge. Put the inner padding back for every column that is drawn as a card. */ @media (max-width: 768px) { .fl-col[data-node].iedjs-price-card > .fl-col-content { padding-left: 28px; padding-right: 28px; } .fl-col[data-node].iedjs-night-card > .fl-col-content { padding-left: 24px; padding-right: 24px; } .fl-col[data-node].iedjs-form-card > .fl-col-content { padding-left: 20px; padding-right: 20px; } .fl-col[data-node].iedjs-tile > .fl-col-content { padding-left: 24px; padding-right: 24px; } } @media (max-width: 768px) { .fl-col[data-node].iedjs-price-card--pair > .fl-col-content { margin: 0 0 20px; } } .iedjs-checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .iedjs-checklist li { position: relative; padding-left: 34px; font-size: 1.05rem; line-height: 1.55; color: var(--iedjs-black); font-weight: 400; } .iedjs-checklist li::before { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--iedjs-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; } /* ---------- Venues we've played — Text module class: iedjs-venue-list ---------- */ .iedjs-venues .fl-row-content { border-top: 1px solid var(--iedjs-line); border-bottom: 1px solid var(--iedjs-line); padding-block: 40px; } .iedjs-venue-list p { font: italic 400 clamp(1.15rem, 1.9vw, 1.4rem)/1.75 var(--iedjs-display); color: var(--iedjs-black); max-width: 1080px; margin-inline: auto; } .iedjs-venue-list span { color: var(--iedjs-pink); margin-inline: .35em; font-style: normal; } .iedjs-venue-list .iedjs-venue { color: inherit; margin: 0; font-style: italic; white-space: nowrap; } /* keep each venue name on one line */ /* Pricing flows straight into the venue strip: tighter gap */ .fl-row.iedjs-pricing > .fl-row-content-wrap { padding-bottom: 72px; } .fl-row.iedjs-venues > .fl-row-content-wrap { padding-top: 0; } @media (max-width: 768px) { .fl-row.iedjs-pricing > .fl-row-content-wrap { padding-bottom: 48px; } } /* ---------- Video cover — Photo module class: iedjs-video (link the photo to the Vimeo/YouTube URL) ---------- */ .iedjs-video .fl-photo-content { position: relative; display: block; width: 100%; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 120px -40px var(--iedjs-pink-glow); } .iedjs-video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); } .iedjs-video .fl-photo-content::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(12, 10, 15, .3); transition: background .4s ease; pointer-events: none; } .iedjs-video .fl-photo-content::after { content: ''; position: absolute; z-index: 2; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 56% 50% / 34px no-repeat; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .35s ease, background-color .35s ease, border-color .35s ease; pointer-events: none; } .iedjs-video:hover img { transform: scale(1.04); } .iedjs-video:hover .fl-photo-content::before { background: rgba(12, 10, 15, .12); } .iedjs-video:hover .fl-photo-content::after { transform: scale(1.08); background-color: var(--iedjs-pink); border-color: var(--iedjs-pink); } /* Video popup (opened by js/site.js) */ .iedjs-modal { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 24px; background: rgba(7, 6, 9, .88); } .iedjs-modal[hidden] { display: none; } .iedjs-modal-frame { position: relative; width: min(1080px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; } .iedjs-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .iedjs-modal-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; } /* ---------- FAQs — Accordion module class: iedjs-faq (also outputs FAQ schema, see inc/faq-schema.php) ---------- */ .iedjs-faq .fl-accordion-item { border: none; border-bottom: 1px solid var(--iedjs-line); border-radius: 0; margin: 0; background: transparent; } .iedjs-faq .fl-accordion-item:first-child { border-top: 1px solid var(--iedjs-line); } .iedjs-faq .fl-accordion-button { padding: 26px 0; background: transparent; display: flex; align-items: center; gap: 24px; cursor: pointer; } .iedjs-faq .fl-accordion-button-label { font: 500 1.08rem/1.4 var(--iedjs-font); color: var(--iedjs-black); flex: 1; margin: 0; letter-spacing: 0; text-transform: none; } .iedjs-faq .fl-accordion-button-icon { display: none; } .iedjs-faq .fl-accordion-button::after { content: ''; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; transition: transform .3s ease; } .iedjs-faq .fl-accordion-item-active .fl-accordion-button::after { transform: rotate(45deg); color: var(--iedjs-pink); } .iedjs-faq .fl-accordion-content { padding: 0 0 28px; background: transparent; color: var(--iedjs-text-soft); max-width: 640px; } @media (min-width: 993px) { .iedjs-sticky > .fl-col-content { position: sticky; top: 120px; } } /* Text link with arrow — Text module class: iedjs-arrow-link */ .iedjs-arrow-link a { font-weight: 500; color: var(--iedjs-pink); text-decoration: none; display: inline-flex; gap: 10px; } .iedjs-arrow-link a::after { content: '→'; transition: transform .25s ease; } .iedjs-arrow-link a:hover::after { transform: translateX(4px); } /* ---------- Check Your Date — row id "check-date", class: iedjs-cta-final iedjs-night iedjs-photo-dark iedjs-uplight ---------- */ .iedjs-contact-lines p { display: grid; gap: 2px; margin-bottom: 14px; } .iedjs-contact-lines span { font: 500 11px var(--iedjs-font); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .5); } .iedjs-contact-lines a, .iedjs-contact-lines strong { font: 500 1.1rem var(--iedjs-font); color: #fff; text-decoration: none; } .iedjs-form-card > .fl-col-content { background: #fff; color: var(--iedjs-black); border-radius: 24px; padding: 30px; box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .6); } .iedjs-night .iedjs-form-card .fl-rich-text p, .iedjs-night .iedjs-form-card h3 { color: var(--iedjs-black); } .iedjs-form-card h3 { font: 400 1.9rem/1.1 var(--iedjs-display); } @media (min-width: 960px) { .iedjs-form-card > .fl-col-content { padding: 40px; } } /* Keep the sticky header clear when something scrolls into view (LeadConnector jumps to the first form error; #anchors). */ html { scroll-padding-top: 110px; } html:has(> body.admin-bar) { scroll-padding-top: 142px; } /* ---------- Inner-page hero — paragraph under the H1: Text module class iedjs-hero-sub ---------- */ .iedjs-hero-sub p { max-width: 560px; font-size: 1.08rem; font-weight: 300; color: rgba(255, 255, 255, .82); } .iedjs-hero-sub strong { color: #fff; } /* ---------- Large centred review quote — Text module class iedjs-quote-lg (last paragraph = name) ---------- */ .iedjs-quote-lg .fl-rich-text { max-width: 760px; margin-inline: auto; text-align: center; } .iedjs-quote-lg p { font: italic 400 clamp(1.3rem, 2.2vw, 1.7rem)/1.45 var(--iedjs-display); color: var(--iedjs-black); margin-bottom: 14px; } .iedjs-quote-lg p:last-child { font: normal 500 12px var(--iedjs-font); letter-spacing: .1em; text-transform: uppercase; color: var(--iedjs-text-soft); margin: 0; } .iedjs-night .iedjs-quote-lg p { color: #fff; } .iedjs-night .iedjs-quote-lg p:last-child { color: rgba(255, 255, 255, .55); } /* ---------- Packages — Column class iedjs-pkg (add iedjs-pkg--featured for the highlighted one) ---------- * Modules inside, by class: iedjs-pkg-badge (optional), iedjs-pkg-name, iedjs-pkg-tag, iedjs-pkg-logo (photo), * iedjs-pkg-price, iedjs-pkg-lead (optional), iedjs-pkg-list, iedjs-pkg-nick, then the button. */ .iedjs-pkg > .fl-col-content { position: relative; isolation: isolate; display: grid !important; grid-template-columns: 1fr 96px; grid-template-rows: auto auto auto auto 1fr auto auto; column-gap: 16px; align-content: start; height: 100%; background: #fff; border: 1px solid var(--iedjs-line); border-radius: 24px; padding: 36px 32px; } .iedjs-pkg > .fl-col-content > .fl-module { grid-column: 1 / -1; margin: 0 !important; } .iedjs-pkg > .fl-col-content > .iedjs-pkg-name { grid-column: 1; grid-row: 1; align-self: end; } .iedjs-pkg > .fl-col-content > .iedjs-pkg-tag { grid-column: 1; grid-row: 2; align-self: start; } .iedjs-pkg > .fl-col-content > .iedjs-pkg-logo { grid-column: 2; grid-row: 1 / span 2; align-self: center; } .iedjs-pkg > .fl-col-content > .iedjs-pkg-price { grid-row: 3; margin-top: 18px !important; } .iedjs-pkg > .fl-col-content > .iedjs-pkg-lead { grid-row: 4; margin-top: 14px !important; } .iedjs-pkg > .fl-col-content > .iedjs-pkg-list { grid-row: 5; margin-top: 14px !important; align-self: start; } .iedjs-pkg > .fl-col-content > .iedjs-pkg-nick { grid-row: 6; margin-top: 22px !important; } .iedjs-pkg > .fl-col-content > .fl-module-button { grid-row: 7; margin-top: 18px !important; } .iedjs-pkg-name .fl-heading { font: 400 2rem/1.05 var(--iedjs-display); margin: 0; } .iedjs-pkg-tag p { font-size: 14px; color: var(--iedjs-text-soft); margin: 6px 0 0; } .iedjs-pkg-logo img { width: 96px; height: 96px; object-fit: contain; } .iedjs-pkg-price p { font: 400 3.6rem/1 var(--iedjs-display); letter-spacing: -.02em; color: var(--iedjs-black); margin: 0; } .iedjs-pkg-price sup { font-size: .45em; vertical-align: .9em; margin-right: 2px; } .iedjs-pkg-lead p { font-size: 14px; font-weight: 500; color: var(--iedjs-black); margin: 0; } .iedjs-pkg-list li { font-size: 15px; } .iedjs-pkg-nick p { display: flex; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px dashed var(--iedjs-line); font-size: 14px; color: var(--iedjs-black); margin: 0; } .iedjs-pkg-nick strong { font-weight: 600; } .iedjs-pkg .fl-button-wrap, .iedjs-pkg a.fl-button { width: 100%; justify-content: center; } .iedjs-pkg-badge { position: absolute !important; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: auto !important; } .iedjs-pkg-badge p { background: var(--iedjs-pink); color: #fff; font: 600 11px/1 var(--iedjs-font); letter-spacing: .14em; text-transform: uppercase; padding: 8px 13px; border-radius: 999px; white-space: nowrap; box-shadow: 0 8px 24px -6px var(--iedjs-pink-glow); margin: 0; } /* featured package: the night card with an uplight glow */ .iedjs-pkg--featured > .fl-col-content { background: var(--iedjs-ink); border-color: transparent; box-shadow: 0 30px 80px -30px var(--iedjs-pink-glow); } .iedjs-pkg--featured > .fl-col-content::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 45% at 18% 110%, var(--iedjs-pink-glow), transparent 70%), radial-gradient(55% 40% at 86% 110%, var(--iedjs-blue-glow), transparent 70%); } .iedjs-pkg--featured .fl-heading, .iedjs-pkg--featured .iedjs-pkg-price p, .iedjs-pkg--featured .iedjs-pkg-lead p, .iedjs-pkg--featured .iedjs-pkg-nick p { color: #fff; } .iedjs-pkg--featured .iedjs-pkg-tag p, .iedjs-pkg--featured .iedjs-checklist li { color: rgba(255, 255, 255, .82); } .iedjs-pkg--featured .iedjs-pkg-nick p { border-color: rgba(255, 255, 255, .18); } @media (min-width: 993px) { .iedjs-pkg--featured > .fl-col-content { transform: translateY(-14px); } } @media (max-width: 992px) { .iedjs-packages .iedjs-pkg { margin-bottom: 28px; } } /* Card columns (packages, add-ons): the grid gap goes BETWEEN cards, not inside them */ .iedjs-grid .fl-col-group > .iedjs-pkg, .iedjs-grid .fl-col-group > .iedjs-addon { padding-inline: 12px; } .iedjs-grid .fl-col-group:has(> .fl-col + .fl-col) > .fl-col.iedjs-pkg > .fl-col-content { padding: 36px 32px; } .iedjs-grid .fl-col-group:has(> .fl-col + .fl-col) > .fl-col.iedjs-addon > .fl-col-content { padding: 0; } @media (max-width: 768px) { .iedjs-grid .fl-col-group > .iedjs-pkg, .iedjs-grid .fl-col-group > .iedjs-addon { padding-inline: 0; } /* stacked cards: drop the desktop gutter's negative margin so cards line up with the page edge */ .iedjs-grid .fl-col-group.fl-col-group:has(> .iedjs-pkg), .iedjs-grid .fl-col-group.fl-col-group:has(> .iedjs-addon) { margin-inline: 0; } } /* Outline button on light cards — Button module class iedjs-btn-outline */ .iedjs-btn-outline a.fl-button { background: transparent; border-color: var(--iedjs-line); color: var(--iedjs-black); } .iedjs-btn-outline a.fl-button:hover, .iedjs-btn-outline a.fl-button:focus { background: var(--iedjs-pink); border-color: var(--iedjs-pink); color: #fff; box-shadow: 0 10px 36px -8px var(--iedjs-pink-glow); } /* ---------- Add-on cards — Column class iedjs-addon (photo, heading, text, prices iedjs-addon-prices, link iedjs-addon-link) ---------- */ .iedjs-addon > .fl-col-content { height: 100%; background: #fff; border: 1px solid var(--iedjs-line); border-radius: var(--iedjs-radius); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; } .iedjs-addon:hover > .fl-col-content { transform: translateY(-3px); box-shadow: 0 24px 50px -24px rgba(12, 10, 15, .25); } .iedjs-addon .fl-photo-content, .iedjs-addon .fl-photo-content img { display: block; width: 100%; } .iedjs-addon .fl-photo-content img { aspect-ratio: 4 / 3; object-fit: cover; } .iedjs-addon .fl-heading { font: 400 1.6rem/1.1 var(--iedjs-display); margin: 0; } .iedjs-addon .fl-rich-text p { font-size: 15px; color: var(--iedjs-text-soft); } .iedjs-addon-prices p { font-size: 15px; line-height: 1.6; color: var(--iedjs-black) !important; font-weight: 400; } .iedjs-addon-prices strong { color: var(--iedjs-pink); font-weight: 600; } .iedjs-addon > .fl-col-content > .iedjs-addon-link { margin-top: auto !important; } /* links line up at the card bottom */ .iedjs-addon-link a { font-size: 14px; font-weight: 500; color: var(--iedjs-pink); text-decoration: none; } .iedjs-addon-link a::after { content: ' →'; } .iedjs-bold-link a { font-weight: 600; color: var(--iedjs-black); text-decoration: none; } .iedjs-bold-link a:hover { color: var(--iedjs-pink); } @media (max-width: 768px) { .iedjs-addons .iedjs-addon { margin-bottom: 22px; } } /* ---------- Good to know strip — row class iedjs-gtk (label column + items: Heading h4 + Text) ---------- */ .iedjs-gtk .fl-row-content { background: var(--iedjs-paper); border: 1px solid var(--iedjs-line); border-radius: 18px; padding: 26px 28px; } .iedjs-gtk .iedjs-label p { padding-top: 3px; } .iedjs-gtk h4.fl-heading { font: 600 1rem/1.3 var(--iedjs-font); margin: 0 0 4px; } .iedjs-gtk .fl-rich-text, .iedjs-gtk .fl-rich-text p { font-size: 14.5px; font-weight: 400; color: #4a4552; line-height: 1.6; } .iedjs-gtk .fl-rich-text strong { color: var(--iedjs-pink); font-weight: 600; } .iedjs-gtk .fl-rich-text em strong { color: inherit; } .iedjs-gtk ul.iedjs-rates { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; max-width: 260px; } .iedjs-gtk ul.iedjs-rates li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dotted var(--iedjs-line); padding-bottom: 3px; } .iedjs-gtk .iedjs-fine { display: block; font-size: 13px; color: var(--iedjs-text-soft); font-weight: 300; margin-top: 6px; } @media (max-width: 768px) { .iedjs-gtk .fl-col + .fl-col > .fl-col-content { margin-top: 18px; } } /* ---------- Comparison — row class iedjs-compare (+ iedjs-night iedjs-uplight); table in an HTML module (class iedjs-cmp) ---------- */ .iedjs-compare > .fl-row-content-wrap { background: linear-gradient(180deg, #2a2140 0%, #1b1626 45%, #120f18 100%); } .iedjs-compare.iedjs-uplight > .fl-row-content-wrap::before { opacity: .65; } .iedjs-cmp table { width: 100%; max-width: 860px; margin: 0 auto; border-collapse: separate; border-spacing: 0; } .iedjs-cmp th, .iedjs-cmp td { padding: 20px 22px; text-align: left; font-size: 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .9); font-weight: 400; } .iedjs-cmp tbody tr:last-child td { border-bottom: 0; } .iedjs-cmp thead th { font: 500 12px var(--iedjs-font); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); border-bottom: 1px solid rgba(255, 255, 255, .12); vertical-align: bottom; } .iedjs-cmp th:not(:first-child), .iedjs-cmp td:not(:first-child) { text-align: center; width: 150px; } .iedjs-cmp .us { background: linear-gradient(180deg, rgba(237, 3, 173, .16), rgba(0, 174, 239, .10)); border-left: 1px solid rgba(237, 3, 173, .55); border-right: 1px solid rgba(237, 3, 173, .55); } .iedjs-cmp thead th.us { border-top: 1px solid rgba(237, 3, 173, .55); border-radius: 18px 18px 0 0; padding: 22px 16px 18px; } .iedjs-cmp tbody tr:last-child td.us { border-bottom: 1px solid rgba(237, 3, 173, .55); border-radius: 0 0 18px 18px; box-shadow: 0 30px 60px -30px var(--iedjs-pink-glow); } .iedjs-cmp th.us .iedjs-logo { width: 92px; margin: 0 auto; display: block; } .iedjs-cmp th.us .logo-bottom-text { fill: #fff; } .iedjs-cmp .them { color: rgba(255, 255, 255, .4); } .iedjs-ck { display: inline-block; width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; } .iedjs-ck.yes { background: var(--iedjs-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 0 18px -4px var(--iedjs-pink-glow); } .iedjs-ck.no { background: rgba(255, 255, 255, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff70' stroke-width='2.5' stroke-linecap='round' d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 13px no-repeat; opacity: .7; } @media (max-width: 600px) { .iedjs-cmp th, .iedjs-cmp td { padding: 14px 10px; font-size: 14px; } .iedjs-cmp th:not(:first-child), .iedjs-cmp td:not(:first-child) { width: 70px; } .iedjs-cmp th.us .iedjs-logo { width: 58px; } } /* ---------- Corporate: long hero headline — add row classes iedjs-hero--long (+ iedjs-hero--crowd for a busy photo) ---------- */ .iedjs-hero--long .fl-col-content { max-width: 1140px; } .iedjs-hero--long h1.fl-heading { font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.04; text-wrap: balance; } .iedjs-hero--long h1 em { display: inline; } .iedjs-hero--crowd > .fl-row-content-wrap::after { background: linear-gradient(180deg, rgba(12, 10, 15, .7) 0%, rgba(12, 10, 15, .6) 50%, rgba(12, 10, 15, .95) 100%); } @media (min-width: 900px) { .iedjs-hero--crowd > .fl-row-content-wrap::after { background: linear-gradient(90deg, rgba(12, 10, 15, .94) 0%, rgba(12, 10, 15, .72) 42%, rgba(12, 10, 15, .25) 100%), linear-gradient(180deg, transparent 60%, rgba(12, 10, 15, .9) 100%); } } /* ---------- Logo wall — row class iedjs-clients; column class iedjs-logo-wall; one Photo module per logo, class iedjs-logo-tile (iedjs-logo-tile--tall for square badges). Logos show in grey until hovered. ---------- */ .iedjs-logo-wall > .fl-col-content { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 640px) { .iedjs-logo-wall > .fl-col-content { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .iedjs-logo-wall > .fl-col-content { grid-template-columns: repeat(6, 1fr); } } .iedjs-logo-tile .fl-photo { height: 100%; } .iedjs-logo-tile .fl-photo-content { display: grid; place-items: center; width: 100%; height: 108px; padding: 18px 22px; background: #fff; border: 1px solid var(--iedjs-line); border-radius: 16px; } .iedjs-logo-tile img { width: auto; height: auto; max-width: 100%; max-height: 62px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .35s ease, opacity .35s ease, transform .35s ease; } .iedjs-logo-tile--tall img { max-height: 84px; } .iedjs-logo-tile:hover img { filter: none; opacity: 1; transform: scale(1.04); } /* ---------- Formula — row class iedjs-formula (+ iedjs-night iedjs-uplight). Steps are nested columns, class iedjs-formula-step (icon Photo module, Heading h3, Text). ---------- */ .iedjs-formula > .fl-row-content-wrap { background: linear-gradient(180deg, #2a2140 0%, #1b1626 45%, #120f18 100%); } /* same plum night as the comparison band */ .iedjs-formula.iedjs-uplight > .fl-row-content-wrap::before { opacity: .65; } .iedjs-formula-step > .fl-col-content { padding: 0 30px 34px 0; } .iedjs-formula-step .fl-photo-content { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(0, 174, 239, .10); border: 1px solid rgba(0, 174, 239, .35); box-shadow: 0 0 30px -10px var(--iedjs-blue-glow); } .iedjs-formula-step .fl-photo-content img { width: 28px; height: 28px; object-fit: contain; } .iedjs-formula-step h3.fl-heading { font: 400 1.6rem/1.1 var(--iedjs-display); color: #fff; } .iedjs-formula-step .fl-rich-text p { font-size: 15.5px; color: var(--iedjs-night-soft); } @media (max-width: 768px) { .iedjs-formula-step > .fl-col-content { padding-right: 0; } } /* ---------- Other services: 4 cards — add row class iedjs-addons--four (2 × 2 on tablets) ---------- */ @media (min-width: 769px) and (max-width: 1100px) { .iedjs-addons--four .fl-col-group:has(> .iedjs-addon) { display: flex; flex-wrap: wrap; row-gap: 24px; } .iedjs-addons--four .fl-col-group > .iedjs-addon { width: 50% !important; } } /* ---------- Photo Booth: "includes" items with no description (icon + heading only) ---------- */ .iedjs-formula-step .fl-module-heading:last-child h3.fl-heading { font-size: 1.35rem; line-height: 1.2; } /* ---------- Moving photo strip — row class iedjs-strips; each strip is a column with class iedjs-strip (second one: iedjs-strip iedjs-strip--reverse). Tiles: Photo modules or boomerang HTML modules, class iedjs-strip-tile. js/site.js builds the looping track on the live page; in the builder the strip just scrolls sideways. ---------- */ .iedjs-strips .fl-col-group + .fl-col-group { margin-top: 18px; } .iedjs-strip > .fl-col-content { display: flex !important; flex-direction: row; gap: 18px; overflow-x: auto; padding: 0 !important; } .iedjs-strip > .fl-col-content.is-moving { overflow: hidden; display: block !important; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .iedjs-strip-track { display: flex; gap: 18px; width: max-content; animation: iedjs-strip 70s linear infinite; } .iedjs-strip--reverse .iedjs-strip-track { animation-direction: reverse; animation-duration: 80s; } .iedjs-strip:hover .iedjs-strip-track { animation-play-state: paused; } @keyframes iedjs-strip { to { transform: translateX(calc(-50% - 9px)); } } .fl-module.iedjs-strip-tile { flex: none; width: 210px; margin: 0 !important; } @media (min-width: 900px) { .fl-module.iedjs-strip-tile { width: 240px; } } .iedjs-strip-tile .fl-module-content { margin: 0 !important; } .iedjs-strip-tile .fl-photo, .iedjs-strip-tile .fl-photo-content, .iedjs-strip-tile .fl-html { display: block; } .iedjs-strip-tile .fl-photo-content, .iedjs-strip-tile video { aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #111; box-shadow: 0 20px 40px -26px rgba(12, 10, 15, .55); } .iedjs-strip-tile img, .iedjs-strip-tile video { display: block; width: 100%; height: 100%; object-fit: cover; } @media (prefers-reduced-motion: reduce) { .iedjs-strip-track { animation: none; } .iedjs-strip > .fl-col-content.is-moving { overflow-x: auto; } } /* ---------- Uplighting: colour swatches — column class iedjs-swatches; one Photo module per colour, class iedjs-swatch, Caption "Below" (the caption is the colour name, set on the image in the Media Library). ---------- */ .iedjs-swatches > .fl-col-content { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 14px; align-content: start; } @media (min-width: 640px) { .iedjs-swatches > .fl-col-content { grid-template-columns: repeat(4, 1fr); } } .fl-module.iedjs-swatch, .iedjs-swatch .fl-module-content { margin: 0 !important; } .iedjs-swatch .fl-photo, .iedjs-swatch .fl-photo-content { display: block; width: 100%; text-align: left; } .iedjs-swatch img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9); transition: transform .3s ease; } .iedjs-swatch:hover img { transform: translateY(-3px) scale(1.02); } .iedjs-swatch .fl-photo-caption { padding: 0; margin-top: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); text-align: left; } @media (prefers-reduced-motion: reduce) { .iedjs-swatch img { transition: none; } } /* ---------- Dancing on the Clouds: night band with icon rows + a card ---------- Icon rows: nested column, class "iedjs-formula-step iedjs-formula-step--row" (icon Photo + Heading h3 beside it, optional Text under the heading). Card: column class iedjs-night-card (heading, text, Text module iedjs-checklist, Text module iedjs-statement). */ .iedjs-formula-step--row > .fl-col-content { display: grid !important; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: center; align-content: start; padding: 0 0 26px; } .iedjs-formula-step--row:has(.fl-module-rich-text) > .fl-col-content { align-items: start; } .iedjs-formula-step--row:has(.fl-module-rich-text) .fl-module-photo { grid-row: span 2; } .iedjs-formula-step--row:has(.fl-module-rich-text) h3.fl-heading { padding-top: 4px; } .iedjs-formula-step--row .fl-module { margin: 0 !important; } .iedjs-formula-step--row h3.fl-heading { font-size: 1.45rem; line-height: 1.2; } .iedjs-night-card > .fl-col-content { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; padding: clamp(28px, 4vw, 44px); } .iedjs-night .iedjs-checklist li { color: rgba(255, 255, 255, .82); } .iedjs-night .iedjs-statement p { font-size: 1.45rem; color: #fff; } /* ---------- Before/after slider — "Before / After" module (modules/before-after/, under "Impulse" in the module list). Two photos of the same shot; js/site.js moves the divider. ---------- */ .iedjs-ba-frame { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; box-shadow: 0 40px 100px -40px var(--iedjs-pink-glow); user-select: none; -webkit-user-select: none; touch-action: pan-y; --pos: 50%; } @media (min-width: 700px) { .iedjs-ba-frame { aspect-ratio: 2.4 / 1; } } .iedjs-ba-frame img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; pointer-events: none; } .iedjs-ba-frame .iedjs-ba-after { clip-path: inset(0 0 0 var(--pos)); } .iedjs-ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 18px rgba(255, 255, 255, .7); pointer-events: none; } .iedjs-ba-knob { position: absolute; top: 50%; left: var(--pos); width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #fff; color: var(--iedjs-ink); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); pointer-events: none; transition: transform .2s ease; } .iedjs-ba-knob svg { width: 26px; height: 26px; } .iedjs-ba-label { position: absolute; top: 16px; font: 500 11px/1 var(--iedjs-font); letter-spacing: .18em; text-transform: uppercase; color: #fff; background: rgba(12, 10, 15, .55); padding: 8px 12px; border-radius: 999px; pointer-events: none; } .iedjs-ba-label--before { left: 16px; } .iedjs-ba-label--after { right: 16px; } .iedjs-ba-frame input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; } .iedjs-ba-frame input[type=range]:focus-visible ~ .iedjs-ba-knob { box-shadow: 0 0 0 3px var(--iedjs-pink), 0 10px 30px rgba(0, 0, 0, .45); } .iedjs-ba-frame:active .iedjs-ba-knob { transform: scale(1.08); } .iedjs-ba-hint { text-align: center; color: rgba(255, 255, 255, .55); font-size: 13px; letter-spacing: .08em; margin: 16px 0 0; } .iedjs-ba-spin { position: absolute; top: 50%; left: calc(var(--pos) + (100% - var(--pos)) / 2); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; background: rgba(12, 10, 15, .55); box-shadow: 0 0 0 8px rgba(12, 10, 15, .35); opacity: 0; transition: opacity .2s; pointer-events: none; animation: iedjs-ba-spin .8s linear infinite; } .iedjs-ba-frame.is-loading .iedjs-ba-spin { opacity: 1; } @keyframes iedjs-ba-spin { to { transform: rotate(360deg); } } .iedjs-ba-colors-label { text-align: center; margin: 26px 0 0; font: 500 12px/1.3 var(--iedjs-font); letter-spacing: .22em; text-transform: uppercase; color: var(--iedjs-pink); } .iedjs-ba-colors-label + .iedjs-ba-colors { margin-top: 14px; } .iedjs-ba-colors { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-top: 22px; } .iedjs-ba-color { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .8); font: 500 12px/1 var(--iedjs-font); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, background .2s; } .iedjs-ba-color img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .iedjs-ba-color:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); color: #fff; } .iedjs-ba-color[aria-pressed="true"] { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; } .iedjs-ba-color:focus-visible { outline: 2px solid var(--iedjs-pink); outline-offset: 2px; } .iedjs-ba-note { text-align: center; color: rgba(255, 255, 255, .45); font-size: 12px; margin: 14px 0 0; } .iedjs-ba-empty { padding: 40px; text-align: center; border: 1px dashed currentColor; border-radius: 14px; opacity: .6; } @media (prefers-reduced-motion: reduce) { .iedjs-ba-knob, .iedjs-ba-color { transition: none; } .iedjs-ba-spin { animation-duration: 2s; } } /* Price lines — Text module class iedjs-price-lines (a list: "Full Room" then the price, one item per line) */ .iedjs-price-lines ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 360px; } .iedjs-price-lines.iedjs-center ul { margin-inline: auto; } /* centred under the slider: add class iedjs-center */ .iedjs-price-lines.iedjs-center li { text-align: left; } .iedjs-price-lines li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .75); font-size: 15px; } .iedjs-price-lines strong { color: #fff; font-weight: 600; } /* ---------- Vendor list — "Vendor List" module (modules/vendor-list/, under "Impulse"). Filter: js/site.js ---------- */ .iedjs-vendors-filter { display: none; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; } @media (min-width: 769px) { .iedjs-vendors-filter { display: flex; } } .iedjs-vendors-filter button { font: 500 13px/1 var(--iedjs-font); letter-spacing: .04em; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--iedjs-line); background: #fff; color: var(--iedjs-black); cursor: pointer; transition: border-color .2s, background .2s, color .2s; } .iedjs-vendors-filter button:hover { border-color: var(--iedjs-pink); color: var(--iedjs-pink); } .iedjs-vendors-filter button[aria-pressed="true"] { background: var(--iedjs-pink); border-color: var(--iedjs-pink); color: #fff; } .iedjs-vendors-filter button:focus-visible, .iedjs-vendors-select select:focus-visible { outline: 2px solid var(--iedjs-pink); outline-offset: 2px; } .iedjs-vendors-select { display: block; max-width: 360px; margin: 0 auto 28px; } @media (min-width: 769px) { .iedjs-vendors-select { display: none; } } .iedjs-vendors-select select { width: 100%; font: 500 15px var(--iedjs-font); padding: 14px 16px; border-radius: 12px; border: 1px solid var(--iedjs-line); background: #fff; } .iedjs-vendors .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .iedjs-vendors-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .iedjs-vendor { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--iedjs-line); border-radius: 18px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .iedjs-vendor[hidden] { display: none; } .iedjs-vendor:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -30px rgba(12, 10, 15, .35); } .iedjs-vendor-logo { height: 130px; display: grid; place-items: center; padding: 18px 24px; border-bottom: 1px solid var(--iedjs-line); background: #fff; } .iedjs-vendor-logo img { max-width: 100%; max-height: 92px; width: auto; height: auto; object-fit: contain; } .iedjs-vendor-logo span { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--iedjs-blush); color: var(--iedjs-pink); font: 400 2rem/1 var(--iedjs-display); } .iedjs-vendor-body { padding: 20px 22px 8px; flex: 1; } .iedjs-vendor-cat { font: 500 11px/1.3 var(--iedjs-font); letter-spacing: .16em; text-transform: uppercase; color: var(--iedjs-pink); margin: 0 0 6px; } .iedjs-vendor-name { font: 400 1.35rem/1.2 var(--iedjs-display); margin: 0 0 10px; color: var(--iedjs-black); } .iedjs-vendor-desc { font-size: 14.5px; line-height: 1.55; color: var(--iedjs-text-soft); margin: 0 0 10px; } .iedjs-vendor-line { font-size: 14px; margin: 0 0 4px; overflow-wrap: anywhere; } .iedjs-vendor-line a { color: var(--iedjs-text-soft); text-decoration: none; } .iedjs-vendor-line a:hover { color: var(--iedjs-pink); } .iedjs-vendor-links { display: flex; gap: 8px; padding: 12px 22px 20px; } .iedjs-vendor-links a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--iedjs-line); color: var(--iedjs-black); transition: border-color .2s, color .2s, background .2s; } .iedjs-vendor-links a:hover { border-color: var(--iedjs-pink); color: #fff; background: var(--iedjs-pink); } .iedjs-vendor-links svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .iedjs-vendor-links a[aria-label$="Facebook"] svg { fill: currentColor; stroke: none; } .iedjs-vendors-empty { text-align: center; color: var(--iedjs-text-soft); padding: 40px 0; } @media (prefers-reduced-motion: reduce) { .iedjs-vendor { transition: none; } } /* Long text (Privacy, Terms) — Text module class iedjs-prose */ .iedjs-prose { color: var(--iedjs-text-soft); font-size: 1rem; line-height: 1.75; } .iedjs-prose p, .iedjs-prose ul, .iedjs-prose ol { margin: 0 0 1.1em; } .iedjs-prose h2 { font: 400 1.75rem/1.2 var(--iedjs-display); color: var(--iedjs-black); margin: 2em 0 .6em; } .iedjs-prose h3, .iedjs-prose h4 { font: 600 1.05rem/1.4 var(--iedjs-font); color: var(--iedjs-black); margin: 1.6em 0 .5em; } .iedjs-prose strong { color: var(--iedjs-black); font-weight: 600; } .iedjs-prose ul, .iedjs-prose ol { padding-left: 1.3em; } .iedjs-prose li { margin-bottom: .4em; } .iedjs-prose a { color: var(--iedjs-pink); overflow-wrap: anywhere; } /* Thank you page: sign-off line under the hero button */ .iedjs-ty-signoff p { color: #fff; font-size: 1.6rem; } /* Planning Resources: download cards (column class iedjs-resource) keep the button at the bottom */ .iedjs-resource > .fl-col-content { display: flex; flex-direction: column; padding-bottom: 20px; } .iedjs-resource .fl-module-button { margin-top: auto !important; } /* ---------- Team bios (tools/build-bios.php) ---------- Hero: row class iedjs-bio-hero (with iedjs-formula iedjs-night). Q&A: row class iedjs-qa, each answer a column iedjs-qa-item. Music: HTML module with
(Mixcloud iframes) or
(Spotify). ---------- */ .iedjs-bio-label a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(237, 3, 173, .45); } .iedjs-bio-label a:hover { border-bottom-color: currentColor; } .iedjs-bio-hero .iedjs-bio-intro p { font-size: 1.05rem; line-height: 1.7; } .iedjs-bio-hero .iedjs-bio-intro p + p { margin-top: 14px; } .iedjs-bio-hero .iedjs-bio-extra p { font-size: 1.25rem; color: #fff; text-align: center; } .iedjs-bio-photo img { width: 100%; max-width: 440px; aspect-ratio: 1; object-fit: cover; border-radius: 22px; } .iedjs-qa-item > .fl-col-content { padding: 28px 0 32px; border-top: 1px solid var(--iedjs-line, rgba(0, 0, 0, .1)); margin-right: 48px; } .iedjs-qa-item h3.fl-heading { font: 400 1.45rem/1.2 var(--iedjs-display); } .iedjs-qa-item .fl-rich-text p + p { margin-top: 12px; } @media (max-width: 768px) { .iedjs-qa-item > .fl-col-content { margin-right: 0; } } .iedjs-mixes { display: grid; gap: 16px; max-width: 1000px; margin: 0 auto; } @media (min-width: 900px) { .iedjs-mixes { grid-template-columns: 1fr 1fr; } } .iedjs-mixes iframe { display: block; width: 100%; height: 120px; border: 0; border-radius: 12px; background: #fff; } .iedjs-embed { max-width: 760px; margin: 0 auto; } .iedjs-embed iframe { display: block; width: 100%; height: 352px; border: 0; border-radius: 16px; } /* ---------- Lead form ---------- */ .iedjs-form { width: 100%; } .iedjs-form iframe { display: block; } /* The LeadConnector form pads itself inside its iframe (fields sit 41px in from each side, 71px of space above the first field, ~150px below the terms line). We can't style inside the iframe, so we stretch and crop the frame instead: 41px wider on each side so the fields line up with the card's text, top and bottom space trimmed, card clips the rest. */ .iedjs-form-card > .fl-col-content { overflow: hidden; } .iedjs-form-card .iedjs-form { overflow: hidden; width: auto; margin-left: -41px; margin-right: -41px; } .iedjs-form-card .iedjs-form iframe { margin-top: -56px; margin-bottom: -120px; } /* ---------- Header (Beaver Themer header layout: Sticky = Yes, Overlay = Yes) ---------- * Dark text by default, so pages without a dark hero (blog posts, legal, 404) stay readable. * A page whose FIRST row has the class "iedjs-dark-top" gets the white logo and menu until scrolled. */ .iedjs-header .fl-row-content-wrap { background-color: transparent; transition: background-color .3s ease, box-shadow .3s ease; } /* Compact header: logo and menu centred on one line (no default module margins) */ .fl-row.iedjs-header > .fl-row-content-wrap { padding-top: 12px; padding-bottom: 12px; } .fl-row.iedjs-header .fl-col-group { display: flex; align-items: center; } .fl-row.iedjs-header .fl-col-content { justify-content: center; } .fl-row.iedjs-header .fl-module-content { margin-top: 0; margin-bottom: 0; } .iedjs-header .fl-menu .menu > li > a, .iedjs-header .fl-menu .menu > li > .fl-has-submenu-container > a { padding-top: 10px; padding-bottom: 10px; line-height: 1.2; } /* Native submenu arrow (Menu module → Submenu Icon: Arrows) follows the menu text colour */ .iedjs-header .fl-menu .fl-toggle-arrows .fl-menu-toggle:before { border-color: var(--iedjs-black); transition: border-color .3s ease; } body:has(.fl-row.iedjs-dark-top:first-child) header.fl-builder-content:not(.fl-theme-builder-header-scrolled) .iedjs-header .fl-menu .fl-toggle-arrows .fl-menu-toggle:before { border-color: rgba(255, 255, 255, .9); } .iedjs-header .iedjs-logo { transition: width .3s ease; } .fl-theme-builder-header-scrolled .iedjs-header .iedjs-logo { width: 92px; } @media (max-width: 767px) { .fl-theme-builder-header-scrolled .iedjs-header .iedjs-logo { width: 78px; } } body:not(:has(.fl-row.iedjs-dark-top:first-child)) .iedjs-header .fl-row-content-wrap, .fl-theme-builder-header-scrolled .iedjs-header .fl-row-content-wrap { background-color: rgba(251, 249, 250, .96); box-shadow: 0 1px 0 rgba(0, 0, 0, .06); } .iedjs-logo { display: inline-block; width: 116px; line-height: 0; } .iedjs-logo svg { width: 100%; height: auto; display: block; } .iedjs-logo--header .logo-bottom-text { fill: #010101; transition: fill .3s ease; } .iedjs-header .fl-menu a { color: var(--iedjs-black); font-size: 14px; font-weight: 400; letter-spacing: .04em; } .iedjs-header .fl-menu .sub-menu { background-color: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(12, 10, 15, .15); overflow: hidden; } .iedjs-header .fl-menu .sub-menu a { color: var(--iedjs-black); } .iedjs-header .fl-menu .sub-menu a:hover { color: var(--iedjs-pink); } .iedjs-header .fl-menu-mobile-toggle { color: var(--iedjs-black); } .iedjs-header .fl-menu-mobile-toggle rect { fill: currentColor; } /* Over a dark hero, before scrolling: white logo text and menu */ body:has(.fl-row.iedjs-dark-top:first-child) header.fl-builder-content:not(.fl-theme-builder-header-scrolled) .iedjs-logo--header .logo-bottom-text { fill: #fff; } body:has(.fl-row.iedjs-dark-top:first-child) header.fl-builder-content:not(.fl-theme-builder-header-scrolled) .iedjs-header .fl-menu .menu > li > a, body:has(.fl-row.iedjs-dark-top:first-child) header.fl-builder-content:not(.fl-theme-builder-header-scrolled) .iedjs-header .fl-menu .menu > li > .fl-has-submenu-container > a { color: rgba(255, 255, 255, .9); } body:has(.fl-row.iedjs-dark-top:first-child) header.fl-builder-content:not(.fl-theme-builder-header-scrolled) .iedjs-header .fl-menu-mobile-toggle { color: #fff; } /* "Check Your Date" menu item: Appearance → Menus → that item → CSS Classes: header-cta */ .iedjs-header .fl-menu .header-cta > a, .iedjs-header .fl-menu .header-cta > .fl-has-submenu-container > a { border: 1px solid var(--iedjs-pink); border-radius: 999px; color: var(--iedjs-pink) !important; font-weight: 500; padding: 11px 20px; margin-left: 8px; transition: background-color .3s ease, color .3s ease; } body:has(.fl-row.iedjs-dark-top:first-child) header.fl-builder-content:not(.fl-theme-builder-header-scrolled) .iedjs-header .fl-menu .header-cta > a { color: #fff !important; } .iedjs-header .fl-menu .header-cta > a:hover, .iedjs-header .fl-menu .header-cta > a:focus { background-color: var(--iedjs-pink); color: #fff !important; } @media (max-width: 767px) { .iedjs-logo { width: 85px; } .iedjs-header .fl-menu-mobile-toggle { color: inherit; } .iedjs-header .fl-menu .menu a { color: var(--iedjs-black) !important; } } /* ---------- Mobile header + menu panel (up to 992px, where the menu turns into a hamburger) ---------- */ /* Header always paints above page sections (the hero's content layer was covering the hamburger). */ header.fl-builder-content[data-type="header"] { z-index: 1000; } @media (max-width: 992px) { /* Keep logo and hamburger on one line instead of stacking the two columns */ .fl-row.iedjs-header .fl-col-group { flex-wrap: nowrap; } .fl-row.iedjs-header .fl-col { width: auto !important; max-width: none !important; float: none; clear: none; } .fl-row.iedjs-header .fl-col:first-child { flex: 1 1 auto; } .fl-row.iedjs-header .fl-col:last-child { flex: 0 0 auto; } .fl-row.iedjs-header .fl-col:last-child .fl-col-content { align-items: flex-end; } /* The panel replaces Beaver Builder's dropdown; only the "Check Your Date" item stays, as a pill beside the hamburger */ .fl-row.iedjs-header .fl-menu { display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; } .fl-row.iedjs-header .fl-menu .fl-clear { display: none; } .fl-row.iedjs-header .fl-menu .menu { display: flex !important; position: static; background: none; box-shadow: none; padding: 0; margin: 0; } .fl-row.iedjs-header .fl-menu .menu > li:not(.header-cta) { display: none !important; } .fl-row.iedjs-header .fl-menu .menu > li.header-cta { border: 0; } .iedjs-header .fl-menu .menu > li.header-cta > a { display: inline-block; margin: 0; padding: 9px 15px !important; font-size: 13px; line-height: 1; white-space: nowrap; background: var(--iedjs-pink); border-color: var(--iedjs-pink); color: #fff !important; box-shadow: 0 6px 20px -6px var(--iedjs-pink-glow); } .iedjs-header .fl-menu-mobile-toggle { padding: 10px 0 10px 10px; color: var(--iedjs-blue) !important; } .iedjs-header .fl-menu-mobile-toggle .svg-container { width: 30px; height: 22px; } .iedjs-header .fl-menu-mobile-toggle svg { width: 30px; height: 22px; } } .iedjs-mnav { position: fixed; inset: 0; z-index: 100001; } .iedjs-mnav[hidden] { display: none; } .iedjs-mnav-backdrop { position: absolute; inset: 0; background: rgba(7, 6, 9, .55); } .iedjs-mnav-panel { position: absolute; top: 0; left: 0; right: 0; max-height: 100%; overflow-y: auto; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } .iedjs-mnav-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid var(--iedjs-line); } .iedjs-mnav-top .iedjs-logo { width: 86px; } .iedjs-mnav-close { width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; cursor: pointer; position: relative; } .iedjs-mnav-close::before, .iedjs-mnav-close::after { content: ''; position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; background: var(--iedjs-blue); } .iedjs-mnav-close::before { transform: rotate(45deg); } .iedjs-mnav-close::after { transform: rotate(-45deg); } .iedjs-mnav-list { list-style: none; margin: 0; padding: 0 24px; } .iedjs-mnav-list > li { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--iedjs-line); } .iedjs-mnav-list a { display: block; padding: 16px 0; font: 500 16px/1.3 var(--iedjs-font); color: var(--iedjs-black); text-decoration: none; } .iedjs-mnav-list a:hover, .iedjs-mnav-list a:focus { color: var(--iedjs-pink); } .iedjs-mnav-toggle { width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; cursor: pointer; position: relative; color: var(--iedjs-black); } .iedjs-mnav-toggle::before, .iedjs-mnav-toggle::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; transition: transform .25s ease; } .iedjs-mnav-toggle::before { width: 16px; height: 1.5px; margin: -.75px 0 0 -8px; } .iedjs-mnav-toggle::after { width: 1.5px; height: 16px; margin: -8px 0 0 -.75px; } .iedjs-mnav-list li.is-open > .iedjs-mnav-toggle::after { transform: scaleY(0); } .iedjs-mnav-list .sub-menu { grid-column: 1 / -1; display: none; list-style: none; margin: 0 0 10px; padding: 0 0 0 14px; border-left: 2px solid var(--iedjs-blush); } .iedjs-mnav-list li.is-open > .sub-menu { display: block; } .iedjs-mnav-list .sub-menu a { padding: 11px 0; font-weight: 400; font-size: 15px; } .iedjs-mnav-list > li.header-cta { border-bottom: 0; padding-top: 22px; } .iedjs-mnav-list > li.header-cta > a { display: inline-flex; justify-content: center; padding: 18px 30px; border-radius: 999px; background: var(--iedjs-pink); color: #fff; box-shadow: 0 10px 36px -8px var(--iedjs-pink-glow); } .iedjs-mnav-list > li.header-cta > a:hover { background: var(--iedjs-pink-hover); color: #fff; } html.iedjs-mnav-open { overflow: hidden; } @media (min-width: 993px) { .iedjs-mnav { display: none !important; } } /* ---------- Footer (Beaver Themer footer layout) — footer rows: class "iedjs-footer" ---------- */ .iedjs-footer > .fl-row-content-wrap { background-color: var(--iedjs-footer); } .iedjs-footer, .iedjs-footer p, .iedjs-footer .fl-rich-text { font-size: 14px; color: rgba(255, 255, 255, .62); } .iedjs-footer h1, .iedjs-footer h2, .iedjs-footer h3, .iedjs-footer h4, .iedjs-footer .fl-heading { font: 500 12px var(--iedjs-font); letter-spacing: .18em; text-transform: uppercase; color: #fff; } .iedjs-footer a { color: inherit; text-decoration: none; } .iedjs-footer a:hover { color: #fff; } .iedjs-footer ul { list-style: none; margin: 0; padding: 0; } .iedjs-footer .fl-menu a { color: rgba(255, 255, 255, .62); padding-left: 0; } .iedjs-footer .fl-menu a:hover { color: #fff; } .iedjs-footer .logo-bottom-text { fill: #fff; } .iedjs-footer-tag p { font: italic 400 1.5rem/1.3 var(--iedjs-display); color: #fff; } .iedjs-footer-tag p { max-width: 320px; } .iedjs-footer .iedjs-logo { width: 132px; } .iedjs-footer-contact p { margin-bottom: 16px; line-height: 1.8; } .iedjs-footer .fl-menu .menu a { padding: 4px 0; line-height: 1.7; } .iedjs-footer .fl-menu .menu li { border: 0; } .iedjs-footer-legal .fl-row-content { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px; } .iedjs-footer-legal p { font-size: 13px; margin: 0; } .iedjs-footer-legal-links p { text-align: right; } @media (max-width: 768px) { .iedjs-footer-legal-links p { text-align: left; margin-top: 8px; } } .iedjs-logo--black { width: 140px; } /* ---------- Utilities ---------- */ .iedjs-center, .iedjs-center p { text-align: center; } /* Keep centred text at a readable width — module class: iedjs-narrow */ .fl-module.iedjs-narrow { max-width: 760px; margin-inline: auto; } /* ---------- Legacy (Phase A saved rows) ---------- */ .iedjs-bg-grey > .fl-row-content-wrap, .iedjs-bg-grey { background-color: #f8f8f8; } .iedjs-bg-lblue { background-color: #e5f7fd; } .iedjs-bg-black { background-color: var(--iedjs-ink); color: #fff; } .iedjs-form-headline { margin-bottom: 40px; } .iedjs-testimonial { font-size: 14px; } .iedjs-testimonial p:last-child { margin-bottom: 0; } .iedjs-testimonial .iedjs-testimonial-author { margin-top: 12px; font-weight: 600; line-height: 1.2; } @media (max-width: 767px) { .iedjs-testimonials .fl-col + .fl-col { margin-top: 32px; } } /* Blog (Themer templates "Blog – archive" and "Blog – single post"; markup from inc/blog.php) */ .iedjs-label--line.iedjs-center p { justify-content: center; } .iedjs-blog-intro { max-width: 640px; margin: 0 auto; color: var(--iedjs-night-soft); } .iedjs-blog-intro p:last-child { margin-bottom: 0; } .iedjs-blog-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .iedjs-blog-cats a { padding: 9px 18px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; color: #fff; font: 500 14px/1.2 var(--iedjs-font); text-decoration: none; transition: background .2s, border-color .2s; } .iedjs-blog-cats a:hover, .iedjs-blog-cats a:focus-visible { border-color: var(--iedjs-pink); } .iedjs-blog-cats a[aria-current] { background: var(--iedjs-pink); border-color: var(--iedjs-pink); } .iedjs-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; } @media (max-width: 1024px) { .iedjs-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .iedjs-post-grid { grid-template-columns: 1fr; gap: 36px; } } .iedjs-post-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--iedjs-radius); overflow: hidden; box-shadow: 0 1px 0 var(--iedjs-line), 0 18px 40px -28px rgba(23, 21, 26, .35); transition: transform .25s, box-shadow .25s; } .iedjs-post-card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--iedjs-line), 0 26px 50px -28px rgba(237, 3, 173, .45); } .iedjs-post-card__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--iedjs-blush); } .iedjs-post-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; } .iedjs-post-card:hover .iedjs-post-card__img img { transform: scale(1.04); } .iedjs-post-card__noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--iedjs-ink), #3a0f33 60%, #06364a); } .iedjs-post-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; } .iedjs-post-card__cat { margin: 0 0 10px; font: 500 12px/1.3 var(--iedjs-font); letter-spacing: .18em; text-transform: uppercase; color: var(--iedjs-pink); } .iedjs-post-card__title { margin: 0 0 12px; font: 400 1.4rem/1.25 var(--iedjs-display); } .iedjs-post-card__title a { color: var(--iedjs-black); text-decoration: none; } .iedjs-post-card__title a::after { content: ''; position: absolute; inset: 0; } .iedjs-post-card { position: relative; } .iedjs-post-card__title a:hover { color: var(--iedjs-pink); } .iedjs-post-card__excerpt { margin: 0 0 18px; color: var(--iedjs-text-soft); font-size: 15px; line-height: 1.6; } .iedjs-post-card__meta { margin: auto 0 0; color: var(--iedjs-text-soft); font-size: 13px; } .iedjs-post-grid__empty { text-align: center; color: var(--iedjs-text-soft); } .iedjs-pagination { margin-top: 56px; } .iedjs-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .iedjs-pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--iedjs-line); border-radius: 999px; color: var(--iedjs-black); text-decoration: none; font-size: 15px; background: #fff; } .iedjs-pagination a.page-numbers:hover { border-color: var(--iedjs-pink); color: var(--iedjs-pink); } .iedjs-pagination .page-numbers.current { background: var(--iedjs-pink); border-color: var(--iedjs-pink); color: #fff; } .iedjs-pagination .page-numbers.dots { border: 0; background: none; } /* Single post */ .iedjs-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font: 500 14px/1.3 var(--iedjs-font); } .iedjs-post-meta a { text-decoration: none; } .iedjs-post-meta__back { color: var(--iedjs-night-soft); } .iedjs-post-meta__back:hover { color: var(--iedjs-pink); } .iedjs-post-meta__cat { color: var(--iedjs-pink); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; } .fl-module-heading.iedjs-post-title h1.fl-heading { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.1; text-wrap: balance; } .iedjs-post-date { margin: 0; color: var(--iedjs-night-soft); font-size: 15px; } .iedjs-post-body { font-size: 1.0625rem; } .iedjs-post-body img { max-width: 100%; height: auto !important; border-radius: 14px; } .iedjs-post-body figure, .iedjs-post-body .wp-block-image { margin: 2em 0; } .iedjs-post-body figure img { width: auto !important; max-height: 640px; } .iedjs-post-body .aligncenter, .iedjs-post-body .aligncenter img { margin-left: auto; margin-right: auto; display: block; text-align: center; } .iedjs-post-body figcaption { margin-top: 10px; font-size: 14px; text-align: center; color: var(--iedjs-text-soft); } .iedjs-post-body blockquote { margin: 2em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--iedjs-pink); font: 400 1.4rem/1.4 var(--iedjs-display); color: var(--iedjs-black); } .iedjs-post-body iframe { max-width: 100%; } /* Share buttons (single post: under the date, and after the post text) */ .iedjs-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; } .iedjs-share__label { margin-right: 6px; font: 500 12px/1.3 var(--iedjs-font); letter-spacing: .18em; text-transform: uppercase; color: var(--iedjs-pink); } .iedjs-share__btn { position: relative; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: none; color: #fff; cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .iedjs-share__btn:hover, .iedjs-share__btn:focus-visible { background: var(--iedjs-pink); border-color: var(--iedjs-pink); color: #fff; } .iedjs-post-body .iedjs-share { margin: 48px 0 0; padding-top: 28px; border-top: 1px solid var(--iedjs-line); } .iedjs-post-body .iedjs-share__btn { border-color: var(--iedjs-line); color: var(--iedjs-black); } .iedjs-post-body .iedjs-share__btn:hover, .iedjs-post-body .iedjs-share__btn:focus-visible { color: #fff; } .iedjs-share__done { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 5px 10px; border-radius: 6px; background: var(--iedjs-black); color: #fff; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; } .iedjs-share__copy.is-copied .iedjs-share__done { opacity: 1; } .iedjs-post-body .iedjs-share + * { margin-top: 0; } .iedjs-post-nav .fl-post-navigation, .iedjs-post-nav nav { border-top: 1px solid var(--iedjs-line); padding-top: 28px; } .iedjs-post-nav .nav-links { display: flex; justify-content: space-between; gap: 24px; } .iedjs-post-nav .nav-links a { color: var(--iedjs-black); text-decoration: none; font: 400 1.15rem/1.35 var(--iedjs-display); } .iedjs-post-nav .nav-links a:hover { color: var(--iedjs-pink); } .iedjs-post-nav .nav-next { text-align: right; margin-left: auto; } @media (max-width: 640px) { .iedjs-post-nav .nav-links { flex-direction: column; } .iedjs-post-nav .nav-next { text-align: left; margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .iedjs-card .fl-callout-photo img, .iedjs-video img, [class*="iedjs-btn-"] a.fl-button, .iedjs-post-card, .iedjs-post-card__img img { transition: none; } }