/* Theme Name: Conversion Bridge 3 Author: Derek Ashauer Author URI: https://www.ashwebstudio.com Version: 3.0 */ @import url("https://use.typekit.net/ssc1cgg.css"); :root { /* Brand */ --accent: #185A9D; --accent-dark: #003A55; --accent-alt: #43CEA2; --cta-end: #33879D; /* Neutrals */ --strong: #272727; --medium: #696969; --medium-light: #ABB3BF; --light: #CECFD8; --lightest: #DFF4ED; --section-alt: #F7FAFA; --white: #fff; --black: #000; /* Greys (cool palette used across borders/backgrounds) */ --grey-50: #fafafa; --grey-100: #f9fafb; --grey-150: #f3f4f6; --grey-200: #e5e7eb; --grey-250: #e5e5e5; --grey-300: #d1d5db; --ink-deep: #222d39; --ink-wp: #1D2327; --warning: #fbbf24; /* Brand tints (alpha variants of accent / accent-alt) */ --accent-tint-05: rgba(24, 90, 157, 0.05); --accent-tint-12: rgba(24, 90, 157, 0.12); --accent-tint-15: rgba(24, 90, 157, 0.15); --accent-tint-18: rgba(24, 90, 157, 0.18); --accent-alt-tint-08: rgba(67, 206, 162, 0.08); --accent-alt-tint-10: rgba(67, 206, 162, 0.10); --accent-alt-tint-15: rgba(67, 206, 162, 0.15); --accent-alt-tint-25: rgba(67, 206, 162, 0.25); --accent-alt-tint-35: rgba(67, 206, 162, 0.35); --accent-alt-tint-65: rgba(67, 206, 162, 0.65); --black-a10: rgba(0, 0, 0, 0.1); --black-a20: rgba(0, 0, 0, 0.2); /* Typography */ --font-body: "canada-type-gibson", sans-serif; --font-mono: "input-sans", monospace; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem; --space-8: 2.5rem; --space-9: 3rem; --space-10: 4rem; --space-11: 5rem; --space-12: 6rem; --space-13: 8rem; /* Border-radius scale */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 5px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 1rem; --radius-3xl: 2rem; --radius-full: 50%; --radius-pill: 9999px; /* Border presets */ --border-soft: 1px solid var(--grey-200); --border-light: 1px solid var(--light); /* Motion */ --duration-fast: 0.15s; --duration-base: 0.2s; --duration-slow: 0.3s; --duration-slower: 0.5s; --ease: ease; --ease-snap: cubic-bezier(.785, .135, .15, .86); --transition-base: all var(--duration-slow) var(--ease); --transition-opacity: opacity var(--duration-slow) var(--ease); --transition-bg: background var(--duration-base) var(--ease); /* Shadows */ --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.08); --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.06); --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.12); --shadow-pop: 0 10px 25px var(--black-a10); --shadow-elevated: rgba(53, 69, 87, 0.07) 0px 6px 5px 0px, rgba(53, 69, 87, 0.1) 0px 16px 12px 0px, rgba(53, 69, 87, 0.13) 0px 34px 24px 0px, rgba(53, 69, 87, 0.16) 0px 70px 50px 0px; /* Aliases (kept for back-compat with existing rules) */ --cta-start: var(--accent-dark); --gradient-start: var(--white); --gradient-end: var(--accent-alt); --font-alt: var(--font-mono); } /* SVG Utilities */ .svg-gradient path, .svg-gradient circle, .svg-gradient rect, .svg-gradient polygon { fill: url(#cb-gradient); } /* Resets */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 120%; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } input { vertical-align: middle; } input[type="submit"] { cursor: pointer; } html,body { height: 100%; } :focus { outline: none; } strong { font-weight: 600; } img { max-width: 100%; height: auto; } /* WordPress required styles */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float:right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { background: var(--white); border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 80%; line-height: 1.2; margin: 0; padding: 0 4px 5px; } /* ----------------------------------- */ /* COMMON /* ----------------------------------- */ body { background: var(--white); text-align: left; } body, p, div, li, h1, h2, h3, h4, td, th, input, select, textarea, button { font: normal 20px/1.48 canada-type-gibson, sans-serif; color: var(--medium); } p, h1, h2, h3, h4, section ul, section ol, section table { margin-bottom: 15px; } h1, h2, h3, h4, legend { font-family: "input-sans", Monospace; font-weight: 400; color: var(--black); line-height: 1.1; letter-spacing: -0.07em; } a img, :link img, :visited img { border: none } a { color: var(--accent); text-decoration: underline; } a:hover { color: var(--strong); } div.clear { clear: both; overflow: hidden; height: 1px; } .gfield { margin-left: 0 !important; } strong { color: var(--accent);} .has-accent-background-color { background-color: var(--accent); } .has-accent-color { color: var(--accent); } .has-accent-border-color { color: var(--accent); } .has-accent-alt-background-color { background-color: var(--accent-alt); } .has-accent-alt-color { color: var(--accent-alt); } .has-accent-alt-border-color { color: var(--accent-alt); } .has-strong-background-color { background-color: var(--strong); } .has-strong-color { color: var(--strong); } .has-strong-border-color { color: var(--strong); } .has-medium-background-color { background-color: var(--medium); } .has-medium-color { color: var(--medium); } .has-medium-border-color { color: var(--medium); } .has-light-background-color { background-color: var(--light); } .has-light-color { color: var(--light); } .has-light-border-color { color: var(--light); } .has-lightest-background-color { background-color: var(--lightest); } .has-lightest-color { color: var(--lightest); } .has-lightest-border-color { color: var(--lightest); } #skip-to-content { background: #14607F; color: var(--white); font-size: 14px; font-weight: 600; text-decoration: none; height: 30px; left: 50%; padding: 8px; position: absolute; z-index: 999; transform: translate(-50%, -100%); transition: transform 0.3s; } #skip-to-content:focus { transform: translate(-50%, 0); } .keyboard-nav a:focus, .keyboard-nav input:focus, .keyboard-nav button:focus { outline: 3px solid var(--primary); outline-offset: 5px; outline-style: inset; } .container { width: 90%; padding-left: 5%; padding-right: 5%; max-width: 1260px; margin: 0 auto; text-align: left; } .button, .edd-submit, [type="submit"].edd-submit, .edd-submit.button.blue, .edd-button, .edd-blocks__confirmation-details a, .gh-button, .wp-block-button a, input[type="submit"], .slicewp-button-primary { font-family: "input-sans", monospace; font-weight: 500; display: inline-flex; align-items: center; gap: 10px; border: none; background: var(--accent); border: 3px solid var(--accent); color: var(--white); font-weight: 700; border-radius: var(--radius-md); padding: 12px 35px; font-size: 16px; text-transform: uppercase; text-decoration: none; cursor: pointer; } .button:hover, .edd-submit:hover, [type="submit"].edd-submit:hover, .edd-submit.button.blue:hover, .edd-button:hover, .edd-blocks__confirmation-details a:hover, .gh-button:hover, .wp-block-button a:hover, input[type="submit"]:hover, .slicewp-button-primary:hover { background: var(--strong); border-color: var(--strong); color: var(--white); } .button.alt, .wp-block-button.alt { background-color: var(--light); color: var(--strong); } .button.alt:hover, .wp-block-button.alt:hover { background-color: var(--strong); color: var(--white); } .button.alt2, .wp-block-button.alt2 a { background-color: var(--white); border: 3px solid var(--accent-alt); color: var(--accent); } .button.alt2:hover, .wp-block-button.alt2 a:hover { background-color: var(--accent-alt); border-color: var(--accent-alt); color: var(--white); } .button.alt2:hover svg path { fill: var(--white); } .button.big, .wp-block-button.big a { font-size: 22px; font-weight: 600; } .button.small, .wp-block-button.small a { padding: 6px 15px; font-size: 15px; font-weight: normal; } .button.small.alt, .wp-block-button.small.alt a { border-width: 1px; } .button:has(svg), .wp-block-button a:has(svg) { display: inline-flex; align-items: center; gap: 10px; } .button svg, .wp-block-button a svg { height: 16px; } .button svg path, .wp-block-button a svg path { fill: var(--accent-alt); } .buttons { display: flex; gap: 20px; align-items: center; justify-content: center; } .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed iframe, .embed object, .embed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .lite-youtube__name { display: none; } lite-youtube::before { display: none !important; } .wp-block-image, .wp-block-embed { margin: 30px auto; } .wp-block-image figcaption { text-align: center; font-size: .9em; color: var(--medium); } .wp-block-code code { white-space: pre-wrap; } .wp-block-columns { gap: 40px; } form input:not([type="submit"]), form textarea { border: 1px solid var(--medium); padding: 7px 15px; border-radius: var(--radius-md); } /* ----------------------------------- */ /* HEADER /* ----------------------------------- */ #header .container { display: flex; gap: 60px; align-items: center; justify-content: center; padding-top: 40px; padding-bottom: 40px; } #header--logo { flex-shrink: 0; } #header--logo img { max-height: 70px; } #header nav { flex-grow: 1; } #header nav ul { display: flex; gap: 30px; align-items: center; justify-content: center; } #header nav li { font-family: "input-sans", monospace; list-style: none; padding: 10px 0; position: relative; } #header nav li a { text-decoration: none; color: var(--strong); font-size: clamp( 14px, 2vw, 18px); text-transform: uppercase; } #header nav li a:hover { color: var(--accent); } #header nav li.account a, #header nav li.cart a { color: var(--accent); display: flex; gap: 10px; align-items: center; font-size: 15px; font-family: "canada-type-gibson", sans-serif; text-transform: none; } #header nav li.cart, #header nav li.account, #header nav li.buy { margin-left: -30px; } #header nav li.cart a { font-size: 15px; } #header nav li .sub-menu { display: block; transition: transform .2s ease-in-out; opacity: 0; left: -25px; visibility: hidden; position: absolute; transform: translateY(10px); top: 100%; z-index: 999; background: var(--white); padding: 0; border-radius: var(--radius-xs); box-shadow: 0 0 20px 0px var(--black-a10); } #header nav li:hover .sub-menu, #header nav li:focus-within .sub-menu { visibility: visible; transform: translateY(0); opacity: 1; } #header nav li .sub-menu li { display: block; margin: 0; padding: 0; border-bottom: 1px solid var(--lightest); } #header nav li .sub-menu li:last-child { border: none; } #header nav li .sub-menu li.all { background: var(--lightest); border-radius: 0 0 3px 3px; } #header nav li .sub-menu li.all a { font-size: 15px; font-weight: 400; text-transform: uppercase; } #header nav li .sub-menu a { padding: 18px 25px; white-space: nowrap; height: auto; line-height: 1; display: flex; gap: 20px; align-items: center; text-transform: none; } #header nav li .sub-menu a .icon { flex-shrink: 0; background: #F0F1F5; border-radius: var(--radius-xs); width: 38px; height: 38px; padding: 10px; text-align: center; line-height: 1; } #header nav li .sub-menu a .icon svg { object-fit: contain; width: 100%; height: 100%; } #header nav li .sub-menu a .title { line-height: 1; color: var(--strong); } #header nav li .sub-menu a .title span { display: block; color: var(--medium); font-size: 15px; font-weight: 400; margin-top: 5px; } #header nav li .sub-menu a:hover .title { color: var(--accent); } #header nav li .sub-menu a:hover .icon { background: #E2E4EB; } #mobile-menu { display: none; } #header--buttons { margin-left: auto; display: flex; gap: 10px; align-items: center; } #header--buttons a:not(.button) { text-decoration: none; position: relative; display: flex; align-items: center; gap: 7px; font-size: 15px; margin-left: 10px; } #header--buttons a.button { margin-left: 10px; } #header--buttons a:hover span { color: var(--accent); } #header--buttons a svg { fill: var(--accent); height: 20px; } #header--buttons a:hover svg { fill: var(--accent-alt); } #header--buttons a.cart span { position: absolute; width: 14px; height: 14px; top: -5px; right: -5px; background: var(--strong); color: var(--white); font-size: 8px; font-weight: 600; border-radius: var(--radius-full); text-align: center; line-height: 14px; } /* ----------------------------------- */ /* COMMON /* ----------------------------------- */ section { padding: 10vh 0; position: relative; } section .container { position: relative; z-index: 10; max-width: 1260px; } section .container.wide { max-width: 1260px; } section .container.narrow { max-width: 860px; } section h2 { font-size: clamp(32px, 5vw, 40px); color: var(--strong); font-weight: 400; } section h2 strong { font-style: normal; font-weight: 600; color: var(--accent); } section h2 span.arrow { display: inline-block; width: 120px; } section h2 span.arrow svg { height: 28px; width: auto; } section h3 { font-size: clamp(22px, 4vw, 26px); color: var(--strong); font-weight: 400; } section .brow, section p.brow, .section-header .brow { color: var(--accent); font-size: 14px; font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: var(--space-4); } strong.highlight, .features--grid strong { background: #fdf2d2; font-weight: 400; color: var(--strong); } .section--intro { display: flex; justify-content: space-between; gap: 10%; margin-top: 40px; } .section--intro--content { flex-basis: 60%; flex-grow: 0; } .section--intro--content p { margin: 0; } .section--intro--supplement { align-self: flex-end; } .section--cta { margin-top: 75px; } .arrows { width: 150px; } .arrows svg, .arrow svg { display: none; } .arrows svg path, .arrow svg path { stroke-width: 2.5px !important; stroke: var(--accent-alt) !important; fill: none !important; stroke-linecap:round; stroke-linejoin:round; vector-effect: non-scaling-stroke; } svg.draw, svg.draw--inview { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: linedraw 5s cubic-bezier(0, 0, 0.5, 1) forwards; } @keyframes linedraw { to { stroke-dashoffset: 0; } } .integration-counts { display: flex; gap: 30px; align-items: center; justify-content: center; } .integration-counts--item { max-width: 120px; line-height: 1.1; text-align: center; } .integration-counts--item img { height: 42px; width: auto; max-width:unset; } .integration-counts--item span { display: block; font-weight: 600; color: var(--accent); margin-top: 8px; } .integration-counts svg { stroke-width: 2; } .integration-counts--separator { font-size: 36px; color: var(--accent); } .integration-counts--logo { display: flex; align-items: center; justify-content: center; max-width: 180px; max-height: 80px; flex-shrink: 0; } .integration-counts--logo img { max-width: 100%; max-height: 80px; width: auto; height: auto; object-fit: contain; } a.more { display: inline-flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 500; text-transform: uppercase; color: var(--accent); font-family: "input-sans", Monospace; text-decoration: none; } a.more:hover { color: var(--strong); } a.more svg { height: 16px; width: auto; } a.more path { fill: none; stroke: var(--accent-alt); stroke-width: 1.5; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 0.6s ease; } a.more:hover svg path { stroke-dashoffset: 0; } @media (prefers-reduced-motion: reduce) { svg.draw, svg.draw--inview { animation: none; stroke-dashoffset: 0; } .arrows svg { display: none !important; } .arrows svg:first-child { display: block !important; } .more svg { display: none; } } ul.checks li { list-style: none; padding-left: 30px; background: url(images/icon-check.svg) 0 5px no-repeat; margin-left: 0; } ul.checks.inline { display: flex; gap: 20px; flex-wrap: wrap; } ul.checks.aligncenter { justify-content: center; } ul.checks.cols-2 { columns: 2; column-gap: 30px; padding: 0; } ul.checks.cols-2 li { break-inside: avoid; } ul.checks.checks--described { padding: 0; } ul.checks.checks--described li { margin: 0 0 1rem 0; padding-top: 2px; } ul.checks.checks--described li strong { display: block; color: var(--strong); font-weight: 600; margin-bottom: 2px; } ul.checks.checks--described li p { margin: 0; font-size: 0.95rem; color: var(--medium); line-height: 1.5; } #buy-cta { position: relative; padding: clamp(75px, 7vh, 120px) 0; background: var(--accent); background: linear-gradient(140deg, var(--accent-dark) 0%, var(--cta-end) 100%); } #buy-cta:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(images/logo-icon-white.svg) right -10% bottom -5% / 70% auto no-repeat; opacity: .05; } #buy-cta .container { display: flex; justify-content: space-between; position: relative; z-index: 10; } #buy-cta h2 { font-size: clamp(30px, 4vw, 36px); color: var(--white); margin: 0 0 30px 0; } #buy-cta h2 strong { color: var(--accent-alt); } #buy-cta p { color: var(--white); } #buy-cta--content { flex-basis: 55%; flex-shrink: 0; } #buy-cta--content li { list-style: none; display: flex; align-items: center; gap: 10px; font-family: "input-sans", monospace; color: var(--white); font-size: clamp(18px, 3vw, 22px); } #buy-cta--content svg path { stroke: var(--white) !important; } #buy-cta--content .integration-counts--item span, #buy-cta--content .integration-counts--separator { color: var(--white); } #buy-cta--buttons { flex-basis: 40%; flex-shrink: 0; } #buy-cta--buttons a { display: block; text-align: center; } #buy-cta--prices ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; justify-content: space-between; } #buy-cta--prices li { list-style: none; flex-grow: 5; font-family: "input-sans", monospace; text-align: center; position: relative; transition: all .2s; } #buy-cta--prices li a { display: block; height: 100%; width: 100%; box-sizing: border-box; position: relative; border: 1px solid var(--white); padding: 25px 20px; color: var(--white); text-decoration: none; border-radius: var(--radius-md); } #buy-cta--prices li.has-discount a { border-radius: 0 0 var(--radius-md) var(--radius-md); } #buy-cta--prices li:hover { transform: scale(1.1); z-index: 1000; box-shadow: 0 0 15px var(--black-a20); } #buy-cta--prices li:hover a { background: var(--accent-alt); border-color: var(--accent-alt); color: var(--black); } #buy-cta--prices li span { display: block; } #buy-cta--prices li span.buy-cta--price--sites { font-size: 16px; } #buy-cta--prices li span.buy-cta--price--amount { font-size: 30px; font-weight: 700; } #buy-cta--prices li span.buy-cta--price--amount strike { font-size: 75%; opacity: .5; line-height: 1; } #buy-cta--prices li span.buy-cta--price--term { font-size: 12px; text-transform: uppercase; } #buy-cta--prices li span.buy-cta--price--discount { position: absolute; bottom: 100%; left: 0; right: 0; padding: 7px; font-size: 12px; background: #F5F8CF; color: var(--black); border-radius: var(--radius-md) 5px 0 0; } #buy-cta--prices--trust ul { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } #buy-cta--prices--trust li { display: inline-flex; gap: 10px; align-items: center; color: var(--white); list-style: none; font-size: 17px; } #buy-cta--prices--trust li svg { height: 24px; width: auto; } #buy-cta--prices--trust li path { fill: var(--white); } #seen { padding: 40px 0; border: var(--border-light); } #seen .container { max-width: 1360px; display: flex; gap: 50px; align-items: center; justify-content: space-between; } #seen .logos-slide.clone { display: none; } #seen img { height: 50px; width: auto; filter: grayscale(1); opacity: .6; } #seen a:hover img { filter: grayscale(0); opacity: 1; } #seen p { white-space: nowrap; font-family: "input-sans", monospace; color: var(--strong); text-transform: uppercase; font-size: 16px; margin: 0; } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-100%); } } #seen .logos { display: flex; align-items: center; justify-content: space-between; flex-grow: 4; } #seen .logos-slide { display: flex; align-items: center; justify-content: space-between; flex-grow: 4; } #seen .logos-slide img { height: 50px; width: auto; } lite-youtube { box-shadow: 0 0 20px 0px var(--black-a10); border-radius: var(--radius-md); } .lite-youtube__preview img { border-radius: var(--radius-md); } .mini-testimonials { display: flex; gap: 10px; align-items: center; margin: 0 0 20px 0; } .mini-testimonials .quote { font-size: 16px; display: none; } .mini-testimonials .quote.active { display: block; } /* ----------------------------------- */ /* HOME /* ----------------------------------- */ #banner { overflow: hidden; padding: 5vh 0 325px 0; } #banner .container { position: relative; text-align: center; max-width: 880px; } #banner h1 { font-size: clamp(1.75rem, 5vw, 2.875rem); margin: 0 auto 20px auto; } #banner p { font-size: clamp(1.25rem, 3vw, 1.5rem); margin: 30px auto; } #banner p span { color: var(--accent); font-weight: 600; } #banner p span:nth-of-type(2) { color: var(--accent-alt); } #banner > img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 150%; max-width: 2000px; height: auto; } #banner .integration-counts { margin: 50px 0; } #banner .buttons { justify-content: center; } #banner.with-video .container { display: flex; gap: 60px; justify-content: space-between; max-width: 1260px; text-align: left; } #banner.with-video .content { flex-basis: 45%; } #banner.with-video .content h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); } #banner.with-video .video { flex-basis: 50%; position: relative; } #banner.with-video .video video { cursor: pointer; width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow-pop); } #banner.with-video .video-closer { text-align: center; display: none; position: absolute; left: 0; right: 0; bottom: 35%; align-items: center; justify-content: center; flex-direction: column; } #banner.with-video .buttons { justify-content: left; } #banner.with-video .arrows { width: 125px; } #banner.with-video .integration-counts { margin: 40px 0; gap: 25px; } #banner.with-video .integration-counts--item span { font-size: 18px; } #problems article { border-bottom: var(--border-light); padding: 4vh 0; gap: 30px; display: flex; align-items: center; max-width: 80%; } #problems h3 { color: var(--strong); font-size: 22px; font-family: "input-sans", Monospace; width: 60%; } #problems h4 { font-size: 20px; color: var(--accent); margin: 0 0 5px 0; font-weight: 600; } #problems .problem { flex-basis: 25%; flex-shrink: 0; } #problems .arrow { flex-basis: 15%; flex-shrink: 0; } #problems .solution { flex-basis: 50%; flex-shrink: 0; } #problems article p { font-size: 18px; line-height: 1.3; } #problems article:nth-of-type(1) { margin-left: 0; } #problems article:nth-of-type(2) { margin-left: 5%; } #problems article:nth-of-type(3) { margin-left: 10%; } #problems article:nth-of-type(4) { margin-left: 15%; } #problems article:nth-of-type(5) { margin-left: 20%; } #problems footer { text-align: right; padding-top: 50px; max-width: 850px; margin-left: auto; } #problems footer p { font-size: 26px; font-family: "input-sans", Monospace; letter-spacing: -0.07em; color: var(--strong); line-height: 1.3; margin-bottom: 40px; } #problems footer p strong { color: var(--accent); } #problems footer .buttons { justify-content: end; } #integrations { background: #F1F8F8 url(images/logo-icon-bg.svg) bottom center / 95% auto no-repeat; padding-bottom: 200px; } #integrations .checks { columns: 2; column-gap: 30px; margin: 0; } #integrations .checks li { white-space: nowrap;color: var(--accent); font-size: 16px; text-transform: uppercase; margin: 0 0 5px 0; padding-top: 3px; padding-bottom: 3px; } #integrations .section--intro { margin: 0 0 50px 0; } #integrations .section--intro--supplement p { font-size: 16px; color: var(--accent); text-align: center; } #integrations .integration-counts { margin: 50px 0; } #integrations--connections { margin: 0 -200px; } #integrations--connections h3 { text-align: center; margin: 0 0 30px 0; } #integrations .integrations--logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; } #integrations .integrations--logos li { list-style: none; } #integrations .integrations--logos li a { display: inline-block; height: 25px; background: var(--white); border-radius: var(--radius-md); padding: 15px 20px; box-shadow: 0 0 10px var(--black-a10); } #integrations .integrations--logos li img { object-fit: contain; width: 100%; height: 100%; max-width: 125px; } ul.integrations--logos li, ul.integrations--logos li a { transition: .2s all; } ul.integrations--logos:hover li { opacity: .5; position: relative; } ul.integrations--logos:hover li:hover { opacity: 1; } ul.integrations--logos:hover li:hover a { transform: scale(1.1); } #integrations--platforms { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; } #integrations .arrow { margin: 10px auto; width: 300px; height: 75px; } #integrations .arrow svg { width: 300px; height: 75px; } .integrations--platforms .arrow { transform: translateX(50%); } .integrations--ad-platforms .arrow { transform: translateX(-50%); } #how .section--intro--content { flex-basis: 60%; } #how ol { margin-top: 75px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; } #how li { transition: .2 all; list-style: none; counter-increment: step; position: relative; } #how li::before { position: absolute; left: -21px; top: -11px; content: counter(step); color: var(--white); width: 42px; height: 42px; display: inline-block; text-align: center; line-height: 42px; font-size: 1.2rem; font-weight: 600; border-radius: var(--radius-full); background-color: var(--accent); margin-right: var(--space-2); opacity: 1; } #how li img { border: 2px solid var(--medium-light); margin: 0 0 10px 0; } #how h3 { font-size: 20px; color: var(--accent); } #how li:first-child svg { position: absolute; top: -55px; right: -10px; } #how li:nth-child(2) svg { position: absolute; top: -65px; right: -40px; animation-delay: 1.2s; } #how li svg path { stroke: var(--accent-alt) !important; stroke-width: 2; } #testimonials { position: relative; } #testimonials--cta { text-align: center; margin-top: 50px;} #faq .container > p { max-width: 560px; font-size: 21px; } #faq ul { columns: 2; column-gap: 80px; margin-top: 40px; } #faq li { list-style: none; margin: 0 0 20px 0; } #faq li p.question { font-size: 18px; font-weight: 600; color: var(--strong); margin: 0 0 5px 0; } #faq li p { font-size: 16px; } #faq ul li.featured { break-before: column; background: #F1F8F8; border: 1px solid #D1DBDB; padding: 30px 40px; } /* ----------------------------------- */ /* SUB PAGES /* ----------------------------------- */ #page-header { background: linear-gradient( var(--white), var(--lightest) ); padding: 2vh 0 7vh 0; } #page-header .container { max-width: 800px; text-align: center; } #page-header .container:has(#page-header--content) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; } #page-header--content { flex-basis: 50%; padding: 50px 0; } #page-header h1 { font-size: clamp(28px, 6vw, 42px); color: var(--strong); } #page-header h1 span { display: block; font-size: 18px; color: #4AAB9D; text-transform: uppercase; letter-spacing: 0; } #page-header p { font-size: clamp(20px, 4vw, 24px); } #page-header--image { flex-grow: 0; position: relative; flex-basis: 40%; text-align: center; padding: 50px 0; } #page-header--image--primary { position: relative; z-index: 10; top: 50%; transform: translateY(-50%); max-height: 350px; } #page-header--image img.parallax { position: static; } #page-header--image .blob { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); } #page-header--image .blob img { width: 100%; } #page-header--image--blob1 { left: 15%; } #page-header--image--blob2 { right: 15%; } #page-header lite-youtube { margin: 50px 0 !important; } #page-header--extra { flex-basis: 100%; padding: 50px 0 0 0; } #page-header--intros ul { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 70px; } #page-header--intros li { list-style: none; } #page-header--intros li h3 { font-size: 30px; font-weight: 600; color: var(--strong); } #page-header--intros li h3 svg { display: block; margin: 0 0 10px 0; height: 40px; } #page-header--intros li h3 svg path { fill: var(--accent-alt); } #page-header form { margin: 40px 0 20px 0; } #page-header p.details, .details { font-size: 16px; font-weight: 400; color: var(--medium); } .blog #page-header, .category #page-header { padding-bottom: 0; } #page-menu { border-top: var(--border-light); margin-top: 40px; } #page-menu ul { display: flex; justify-content: center; } #page-menu li { list-style: none; border-left: var(--border-light); } #page-menu li:first-child { border-left: none; } #page-menu li a { font-size: 16px; text-align: center; display: block; padding: 10px 15px; text-decoration: none; } #page-menu li a:hover, #page-menu li a.active { background: var(--accent); color: var(--white); } #content { padding: 12vh 0; } .content li { margin-left: 25px; } .content h2 { font-size: 30px; color: var(--strong); } .content h3 { font-size: 22px; font-weight: 500; color: var(--accent); margin: 0 0 10px 0; } .content h4 { font-weight: 600; color: var(--strong); } .content p + h2, .content p + h3, .content ul + h2, .content ul + h3, .content div.wp-block-columns + h2, .content div.wp-block-columns + h3 { margin-top: 40px; } .content dt { color: var(--strong); font-weight: 600; } .content dd { margin-bottom: 15px; } .content p code, .content li code { font-size: 80%; } .content .wp-block-outermost-icon-block + h3 { margin-top: 10px; } .content ul.col2 { columns: 2; column-gap: 30px; } .content ul.col3 { columns: 3; column-gap: 30px; } p.notice { background: var(--light); padding: 10px 25px 10px 60px; position: relative; border-radius: var(--radius-md); } p.notice:before { content: "\2139"; position: absolute; top: 16px; left: 25px; font-size: 16px; width: 18px; height: 18px; line-height: 16px; text-align: center; background: var(--accent); color: var(--white); border-radius: var(--radius-full); } p.callout { border: 2px solid var(--accent-alt); padding: 8px 20px; border-radius: var(--radius-md); color: var(--strong); margin: 30px 0; } .wp-block-pullquote.is-style-solid-color { border: 2px solid var(--light) !important; border-radius: var(--radius-lg); padding: 25px 40px; font-size: 26px; color: var(--strong); } .wp-block-pullquote.is-style-solid-color blockquote p { font-size: 26px; } .wp-block-pullquote.is-style-solid-color blockquote { max-width: 100%; } .wp-block-kevinbatdorf-code-block-pro { margin: 0 0 30px 0;} .tooltip { display: inline-flex; align-items: center; gap: 10px; position: relative; } .tooltip:after { content: url(images/question.svg); cursor: pointer; } .tooltip--content { visibility: hidden; position: absolute; bottom: calc( 100% ); background: rgba(0,0,0,.8); max-width: 200px; font-size: 14px; color: var(--white); padding: 10px; border-radius: var(--radius-sm); } .tooltip--content a { color: var(--white); } .tooltip:hover .tooltip--content { visibility: visible; } .tooltip--content:after { top: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-top-color: rgba(0,0,0,.8); border-width: 6px; margin-left: -6px; } .jump-links { background: var(--lightest); border: 1px solid var(--medium-light); border-radius: 6px; padding: 24px 30px; margin-bottom: 30px; } .jump-links__title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--strong); margin-bottom: 12px; } .jump-links__list { list-style-position: inside; padding: 0; margin: 0; } .jump-links__item { margin-bottom: 6px; font-size: 16px; } .jump-links__item:last-child { margin-bottom: 0; } .jump-links__link { color: var(--medium); text-decoration: none; } .jump-links__link:hover { color: var(--accent); } .content .jump-links li.jump-links__item { margin-left: 0; } .wp-block-table table { width: 100%; margin: 30px 0; } .wp-block-table thead th { font-family: var(--font-alt); font-size: 14px; font-weight: 400; color: var(--strong); text-transform: uppercase; padding: 0 15px 8px 0; border: none; border-bottom: var(--border-light); } .wp-block-table tbody td { padding: 12px 15px 12px 0; border: none; border-bottom: var(--border-light); } /* Features */ .divider--top:before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block; width: 100%; max-width: 1060px; border-top: var(--border-light); } #features h2 { margin: 0 0 60px 0; } .features--grid { display: grid; gap: 60px 80px; grid-template-columns: 1fr 1fr 1fr; margin: 60px 0 0 0; } .features--grid li { list-style: none; } .features--grid li > svg { height: 46px; width: auto; } .features--grid li img { border: 1px solid var(--medium-light); } .features--grid--image { height: 220px; width: 100%; margin: 0 0 15px 0; background: var(--light); } .features--grid--image img { object-fit: cover; width: 100%; height: 100%; object-position: top; } .features--grid li h3 { font-size: 1.40rem; margin: 10px 0 10px 0; } .features--grid li p { font-size: 18px; } .features--simple { grid-template-columns: 1fr 1fr 1fr; margin-top: 75px; } .features--simple li p { font-size: 16px; } #features .features--alt { border-top: var(--border-light); margin-top: 60px; padding-top: 60px; } .features--alt > p { font-size: 26px; margin-top: -20px; } .features--alt li { list-style: none; margin: 70px 0 0 0; display: flex; justify-content: space-between; align-items: center; } .features--alt .features--alt--content { flex-basis: 45%; } .features--alt .features--alt--image { flex-basis: 45%; } .features--alt .features--alt--image img.screenshot { border: 1px solid var(--medium-light); } .features--alt li:nth-child(odd) .features--alt--image { order: 2; } .feature--intro .container { max-width: 720px; text-align: center; } .feature--intro .integrations--list { margin: 50px 0; } .feature--intro--image { margin: 50px -100px; } .feature--intro--image img { box-shadow: var(--shadow-pop); border-radius: var(--radius-lg); } .feature--details { position: relative; } .page-id-44632 #features .features--alt { border: none; } .feature--image { overflow: hidden; } .feature--image .container { display: flex; justify-content: space-between; align-items: center; } .feature--image--content { flex-basis: 45%; } .feature--image--content ul { margin-top: 40px; } .feature--image--content li { list-style: none; margin: 0 0 20px 0; } .feature--image--content li h3 { font-family: var(--font-alt); font-size: 22px; color: var(--accent); margin: 0 0 5px 0; } .feature--image--content li p { font-size: 18px; } .feature--image--image { flex-basis: 45%; } .feature--image--image img { max-width: 170%; border-radius: 15px; box-shadow: var(--shadow-pop); transition: .5s ease; } .feature--image:hover .feature-image--image img { transform: scale(1.05); } .highlight-box { margin: 50px 0; padding: 20px 30px; border: 1px solid var(--accent-alt); border-radius: var(--radius-md); } /* Points */ .feature-highlights .container { display: flex; justify-content: space-between; } .feature-highlights--content { flex-basis: 40%; } .feature-highlights--list { flex-basis: 50%; } .feature-highlights--list li { list-style: none; padding-left: 60px; position: relative; margin: 0 0 30px 0; } .feature-highlights--list li .image { position: absolute; left: 0; top: 5px; width: 40px; height: 40px; } .feature-highlights--list li .image svg { object-fit: contain; width: 100%; height: 100%; object-position: center; } .feature-highlights--list li h3 { font-size: 22px; color: var(--accent); margin: 0 0 5px 0; } .feature-highlights--list li p { font-size: 18px; } .feature-highlights--list > p { font-size: 16px; color: #888; } /* Integrations */ .integrations { margin-bottom: 50px; padding-bottom: 50px; display: flex; justify-content: space-between; border-bottom: var(--border-light); } .integrations .integrations--content { flex-basis: 33%; } .integrations .integrations--list { flex-basis: 60%; } .integrations h2 { margin: 0 0 30px 0; font-size: 24px; } .integrations h2 span { display: inline-block; padding: 8px 13px; background: var(--accent-alt); color: var(--white); border-radius: var(--radius-md); } #cookie-banners { border: none; } #plugins h2 span { background: var(--accent); } #ads h2 span { background: #2F97A0; } .integrations--list ul { display: flex; flex-wrap: wrap; gap: 40px 0; list-style: none; align-items: center; } .integrations--list li { text-align: center; font-size: 16px; flex-basis: 25%; margin: 0; color: var(--strong); line-height: 1.1; transition: .25s all; } .integrations--list li a { text-decoration: none; } .integrations--list img { max-width: 80%; max-height: 50px; width: auto; } .integrations--list li:hover { transform: scale(1.1); } .integrations--list li.coming-soon a { color: #666; } .integrations--list li.coming-soon img { opacity: .3; filter: grayscale(1); } .integrations--list li.coming-soon:after { content: "Coming Soon!"; display: block; font-size: 11px; text-align: center; } .integrations--filter { margin-top: 30px; list-style: none; } .integrations--filter a { transition: all .2s; display: flex; gap: 10px; margin: 0 0 3px 0; background-position: left center; padding: 5px 0; text-decoration: none; font-size: 16px; text-transform: uppercase; } .integrations--filter a.active { font-weight: 600; } .integrations--filter a.active { padding-left: 30px; background: url(images/icon-check.svg) left center / 20px 20px no-repeat; } #integration-about .item img { height: 40px; width: auto; margin: 0 0 20px 0;} /* Platform */ #platform--features h2 { text-align: center; } #platform--features .container > p { text-align: center; font-size: 22px; } #platform--conversions { } .twocol--equal .container { display: flex; gap: 10%; } .twocol--equal .item { flex-basis: 45%; } .twocol--equal .item:first-child p:last-child:has(a.button) { margin-top: 40px; } #platform--conversions li { list-style: none; } #platform--conversions h3 { font-size: 16px; text-transform: uppercase; margin: 0 0 4px 0; } #platform--conversions .item > ul > li { margin: 0 0 30px 0; } #platform--conversions li > p { font-size: 15px; } #platform--conversions ul ul { columns: 2; column-gap: 30px; } #platform--conversions ul ul li { color: var(--accent); font-size: 18px; padding-top: 2px; padding-bottom: 2px; } section#dashboard { background: #F1F8F8; } section.screenshot { overflow: hidden; padding-bottom: 0; } section.screenshot .container { text-align: center; } section.screenshot .container p { font-size: 22px; max-width: 860px; margin-left: auto; margin-right: auto; } .screenshot--image { max-height: 800px; overflow: hidden; position: relative; margin: 60px auto 0 auto; } .screenshot--image img { display: block; margin: 0; border-radius: var(--radius-lg) 8px 0 0; box-shadow: 0 10px 25px var(--black-a20); width: 100%; } .screenshot--image a.button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; box-shadow: 0 10px 25px var(--black-a20); opacity: 0; visibility: hidden; transition: var(--transition-opacity), visibility 0.3s ease; } .screenshot--image:hover a.button { opacity: 1; visibility: visible; } section#journey .screenshot--image { overflow: visible; max-height: auto; max-width: 640px; } #links h2 { font-size: 28px; } #links .container { max-width: 760px; } #links ul.columns { columns: 2; column-gap: 50px; } #links li { list-style: none; } #links li a { color: var(--medium); font-size: 15px; } /* Blog */ .post { display: flex; justify-content: space-between; align-items: flex-start; margin: 0 0 50px 0; } .post--image { flex-basis: 25%; } .post--image img { border-radius: 15px; box-shadow: var(--shadow-pop); } .post--content { flex-basis: 70%; } p.post--date { font-size: 16px; margin-top: -10px; color: var(--medium); } #content .post h2 { font-size: 30px; line-height: 1.2; } #content p.highlight { font-size: 1.2em; color: var(--accent); line-height: 1.5; } #author-box { background: var(--light); padding: 30px 40px; display: flex; align-items: flex-start; gap: 20px; margin: 30px 0; border-radius: var(--radius-md); } #author-box img{ width: 75px; height: auto; border-radius: var(--radius-full); } #author-box--content { font-size: 16px; } #post--next-prev { display: flex; justify-content: space-between; margin-top: 50px; border-top: 1px solid var(--grey-50); padding: 10px 0 0 0; font-size: 16px; } #post--next-prev a[rel="next"] { margin-left: auto; text-align: right; } .single-post img.wp-post-image { width: 100%; border-radius: var(--radius-lg); margin: 0 0 40px 0; } .sidebar--promo { margin-top: 30px; background: url(images/camera.svg) right -20% bottom -20% / 50% auto no-repeat var(--strong); padding: 25px 30% 25px 35px; border-radius: var(--radius-lg); } .sidebar--promo * { color: var(--white); } .sidebar--promo p.title { font-weight: 600; font-size: 22px; margin: 0 0 5px 0; } .sidebar--promo p { font-size: 16px; line-height: 1.3; } .sidebar--promo a.button:hover { background: var(--accent-alt); } p.code-help { background: var(--accent); margin-top: -15px; color: var(--white); padding: 10px 20px; font-size: 16px; border-radius: 0 0 var(--radius-md) var(--radius-md); } p.code-help a { color: var(--white); } /* Support */ form.simple-form, .aa-Form, #gform_fields_17 { background: var(--white); box-shadow: var(--shadow-pop); display: flex; align-items: center; border-radius: var(--radius-md); margin: 0 0 20px 0; } #gform_fields_17 { margin: 0; } form.simple-form input, form.aa-Form input, #gform_fields_17 input { border: none; flex-grow: 10; background: var(--white); padding: 16px 30px; font-size: 22px; border-radius: var(--radius-md) 0 0 5px; } form.simple-form button, #gform_fields_17 input[type="submit"] { display: block; border: none; cursor: pointer; background: var(--accent); color: var(--white); font-size: 14px; font-weight: 600; text-transform: uppercase; padding: 22px 40px; border-radius: 0 var(--radius-md) var(--radius-md) 0; } #gform_fields_17 .gfield--type-email { flex-grow: 10; } #gform_fields_17 .gform_fields { margin: 0; } #gform_17 .gform_footer { padding: 0; } #sidebar .aa-Input { padding: 7px 10px; font-size: 16px; } #page-header .aa-Input { padding: 40px 20px !important; border: none; } .aa-Input::placeholder { color: var(--medium); } form.aa-Form button { cursor: pointer; } form.aa-Form .aa-Label svg { max-width: 40px !important; max-height: 40px !important; width: 40px !important; height: 40px !important; margin-top: -7px; padding-left: 10px; } form.aa-Form svg.aa-SubmitIcon path { fill: var(--accent); } .aa-ItemContent { display: block; } .aa-ItemIcon, .aa-SourceHeader { display: none; } .aa-List .aa-ItemContent .aa-ItemContentTitle { text-transform: none; color: var(--strong); } .aa-List .aa-ItemContent .aa-ItemContentTitle mark { font-weight: 600; } .aa-List .aa-ItemContent .aa-ItemContentDescription { color: var(--medium); } /* Sunshine Search — inherit the .simple-form / .aa-Form pill look. Selectors use .sunshine-search to beat plugin-default CSS specificity. */ .sunshine-search { position: relative; z-index: 50; } .sunshine-search .sunshine-search__dropdown { z-index: 51; text-align: left; } .sunshine-search .sunshine-search__item, .sunshine-search .sunshine-search__empty { text-align: left; } #page-header { position: relative; z-index: 10; } #doc-categories { position: relative; z-index: 1; } .sunshine-search .sunshine-search__form { background: var(--white); box-shadow: var(--shadow-pop); display: flex; align-items: center; border-radius: var(--radius-md); margin: 0 0 20px 0; gap: 0; width: 100%; } .sunshine-search .sunshine-search__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex: 0 0 auto; padding-left: 20px; } .sunshine-search .sunshine-search__icon svg { width: 24px; height: 24px; display: block; } .sunshine-search .sunshine-search__input { border: none; flex: 1 1 auto; min-width: 0; width: auto; background: var(--white); padding: 16px 20px 16px 14px; font-size: 22px; border-radius: 0; box-shadow: none; transition: none; } .sunshine-search .sunshine-search__input:focus { outline: none; box-shadow: none; border: none; } .sunshine-search .sunshine-search__input::placeholder { color: var(--medium); } .sunshine-search .sunshine-search__submit { display: block; border: none; cursor: pointer; background: var(--accent); color: var(--white); font-size: 14px; font-weight: 600; text-transform: uppercase; padding: 22px 40px; border-radius: 0 var(--radius-md) var(--radius-md) 0; } #page-header .sunshine-search { max-width: none; } #page-header .sunshine-search .sunshine-search__icon { padding-left: 30px; } #page-header .sunshine-search .sunshine-search__icon svg { width: 36px; height: 36px; } #page-header .sunshine-search .sunshine-search__input { padding: 24px 20px 24px 16px; font-size: 22px; } #sidebar .sunshine-search { margin: 0 0 40px 0; } #sidebar .sunshine-search .sunshine-search__form { margin: 0; } #sidebar .sunshine-search .sunshine-search__icon { padding-left: 12px; } #sidebar .sunshine-search .sunshine-search__icon svg { width: 18px; height: 18px; } #sidebar .sunshine-search .sunshine-search__input { font-size: 16px; padding: 9px 14px 9px 10px; } #gform_confirmation_message_17 { background: var(--light); padding: 20px; border-radius: var(--radius-md);text-align: center; margin: 0 0 20px 0;} #gform_confirmation_message_17 p { font-size: .9em; } #doc-categories { padding: 12vh 0; } #doc-categories .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } /* Doc Category Cards */ .doc-category-card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius-xl); padding: 30px; text-decoration: none; border: 2px solid var(--light); transition: border-color 0.2s ease; } .doc-category-card:hover { border-color: var(--accent-alt); } .doc-category-card--icon { width: 50px; height: 50px; margin-bottom: 20px; } .doc-category-card--icon svg, .doc-category-card--icon img { width: 100%; height: 100%; object-fit: contain; } .doc-category-card h2 { font-size: 22px; color: var(--accent); margin: 0 0 12px 0; border: none; padding: 0; font-weight: 500; } .doc-category-card--description { font-size: 16px; color: var(--medium); line-height: 1.5; margin: 0 0 10px 0; flex-grow: 1; } .doc-category-card--footer { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; border-top: var(--border-light); font-family: "input-sans", Sans-Serif; text-transform: uppercase; } .doc-category-card--count { font-size: 14px; color: var(--medium); } .doc-category-card--arrow svg { height: 16px; width: auto; } .doc-category-card--arrow path { fill: none; stroke: var(--accent-alt); stroke-width: 1.5; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 0.6s ease; } .doc-category-card:hover .doc-category-card--arrow path { stroke-dashoffset: 0; } @media (max-width: 900px) { #doc-categories .container { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { #doc-categories .container { grid-template-columns: 1fr; } } .twocol { padding: 0 0 12vh 0; } .twocol .container { display: flex; justify-content: space-between; gap: 75px; } .twocol section { width: 70%; padding-top: 0 !important; } .twocol aside { width: 25%; } .integration-template-default .twocol aside img.wp-post-image { max-height: 150px; width: auto; } #doc, #doc-category, #search, #search #content, #account { padding: 4vh 0 12vh 0; } #crumb { display: inline-block; color: var(--medium); background: var(--light); padding: 5px 10px; font-size: 13px; border-radius: var(--radius-md); margin: 0 0 10px 0; } #crumb a { text-decoration: none; color: var(--medium); } .twocol h1 { font-size: clamp(30px, 8vw, 44px); font-weight: 500; color: var(--strong); margin: 0 0 30px 0; } #sidebar .doc-category--list { border: 2px solid var(--light); border-radius: var(--radius-lg); } #sidebar .doc-category--list p { padding: 20px 25px; background: var(--light); color: var(--strong); font-weight: 500; text-transform: uppercase; font-size: 20px; margin: 0 0 10px 0; } #sidebar .doc-category--list ul { padding: 15px 25px; } #sidebar .doc-category--list li { font-size: 18px; line-height: 1.2; } #sidebar .doc-category--list li.active a { color: var(--strong); text-decoration: none; } #sidebar .simple-form { margin: 0 0 40px 0; } #sidebar .simple-form input[type="search"] { font-size: 16px; padding: 9px 20px; } #sidebar .simple-form button { padding: 10px 20px; } .twocol--post { padding-top: 8vh; } .sidebar--featured-image { margin: 0 0 30px 0; } .sidebar--featured-image img { display: block; width: 100%; height: auto; border-radius: 15px; box-shadow: var(--shadow-pop); } .sidebar--tools { margin: 0 0 40px 0; } .sidebar--tools h2 { font-size: 14px; text-transform: uppercase; color: var(--medium); letter-spacing: 0.08em; margin: 0 0 10px 0; } .sidebar--tools ul { list-style: none; padding: 0; margin: 0; border: 2px solid var(--light); border-radius: var(--radius-lg); overflow: hidden; } .sidebar--tools li { list-style: none; border-top: var(--border-light); margin: 0; } .sidebar--tools li:first-child { border-top: none; } .sidebar--tools li a, .sidebar--tools li.sidebar--tools--coming { display: block; padding: 14px 18px; text-decoration: none; transition: background .15s ease; } .sidebar--tools li a:hover { background: var(--lightest); } .sidebar--tools li strong { display: block; color: var(--strong); font-size: 16px; line-height: 1.3; } .sidebar--tools li span { display: block; color: var(--medium); font-size: 14px; line-height: 1.35; margin-top: 3px; } .sidebar--tools li.sidebar--tools--coming strong { color: var(--medium); } .sidebar--tools li.sidebar--tools--coming em { display: inline-block; font-style: normal; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; background: var(--accent-alt); color: var(--white); padding: 3px 8px; border-radius: var(--radius-sm); margin-top: 8px; } .sidebar--link-list { margin: 0 0 40px 0; } .sidebar--link-list > h2, .sidebar--link-list > p { font-family: var(--font-mono); font-size: 14px; text-transform: uppercase; color: var(--medium); letter-spacing: 0.08em; margin: 0 0 10px 0; } .sidebar--link-list ul { border: 2px solid var(--light); border-radius: var(--radius-lg); margin: 10px 0 20px 0; } .sidebar--link-list li { list-style: none; border-top: var(--border-light); font-size: 16px; } .sidebar--link-list li:first-child { border: none; } .sidebar--link-list li a { text-decoration: none; display: block; padding: 10px 25px; } .sidebar--link-list li.active, .sidebar--link-list li.current-menu-item { background: var(--light); } .sidebar--link-list li.active a, .sidebar--link-list li.current-menu-item a { color: var(--strong); } #sidebar--buttons { margin: 30px 0; } #sidebar--buttons a { width: 100%; box-sizing: border-box; margin: 10px 0; } .mini-cta { margin-top: 75px; border-radius: var(--radius-lg); padding: 30px 250px 30px 40px; background: url(images/diagram-fix.svg) right 30px center / auto 80% no-repeat; border: 2px solid var(--light); } .mini-cta p.headline { font-size: 28px; font-weight: 600; color: var(--strong); margin: 0 0 10px 0; } .mini-cta p { line-height: 1.3; } #mini-cta--affiliates { background-image: url(images/diagram-affiliates.svg); } #mini-cta--confetti { background-image: url(images/confetti.svg); } #doc-category--list { margin-top: 50px; } #doc-category--list li { border-bottom: var(--border-light); padding: 20px 0; list-style: none; margin: 0; font-size: 24px; } #doc-category--list li a { display: inline-block; padding-left: 26px; background-repeat: no-repeat; background-position: left center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20'%3E%3Cpath d='M6,2A2.013,2.013,0,0,0,4,4V20a2.013,2.013,0,0,0,2,2H18a2.013,2.013,0,0,0,2-2V8L14,2ZM6,4h7V9h5V20H6Zm2,8v2h8V12Zm0,4v2h8V16Z' transform='translate(-4 -2)' fill='%2343CEA2'/%3E%3C/svg%3E%0A"); } .pagination, .edd_pagination { margin-top: 30px; text-align: center; } .pagination a, .edd_pagination a { text-decoration: none; } .pagination span, .pagination a, .edd_pagination span, .edd_pagination a { display: inline-block; padding: 3px 10px; margin: 0 4px; } .pagination span.current, .edd_pagination span { background-color: var(--accent); color: var(--white); border-radius: var(--radius-xs); } .content .gfield--type-section { margin-top: 40px; } /* Search */ body.search #content { padding-top: 3vh; } .doc--intro { margin: 30px 0 0 0; padding: 20px 0 0 0; border-top: var(--border-light); } #content .doc--intro h2 { font-size: 22px; margin: 0 0 8px 0; } #content .doc--intro p { font-size: 18px; } /* Pricing */ #pricing { padding: 4vh 0 4vh 0; } #pricing .container { text-align: center; } #pricing--header { padding: 50px 0; } #pricing--header #header--logo { margin: 0; } #pricing--banner .container { max-width: 960px; } #pricing--banner h1 { font-size: clamp(28px, 6vw, 38px); color: var(--strong); max-width: 860px; margin: 0 auto 20px auto; display: inline-block; position: relative; } #pricing--banner h1:after { content: ""; display: block; position: absolute; bottom: 50%; right: -50px; height: 85px; width: 85px; background: url(images/14days.svg) center / contain no-repeat; z-index: -1; } #pricing--banner p { font-size: clamp(18px, 4vw, 22px); line-height: 1.2; } #pricing--banner--one-liners { max-width: 600px; margin: 50px auto; position: relative; height: 100px; } #pricing--guarantee { background: url(images/14days.svg?sdf) top 0 left 30px / 150px 150px no-repeat; padding: 0 0 0 230px; margin: 50px auto; max-width: 720px; text-align: left; box-sizing: border-box; } .signature { display: flex; align-items: center; gap: 15px; } .signature img { width: 75px; height: auto; border-radius: var(--radius-full); } .signature strong { color: var(--strong); } .toggle .toggle-check,.toggle .toggler { display: inline-block; vertical-align: middle; margin: 10px; } .toggle .toggler { color: var(--strong); opacity: .5; transition: .2s; cursor: pointer } .toggler.toggler--active { opacity: 1 } .toggle-check { position: relative; width: 68px; height: 28px; border-radius: 50px; background-color: var(--white); overflow: hidden; box-shadow: inset 0 0 2px 1px var(--black-a20) } .check { position: absolute; display: block; cursor: pointer; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 6 } .check:checked~.switch { right: 4px; left: 64.5%; transition: .25s cubic-bezier(.785,.135,.15,.86); transition-property: left,right; transition-delay: 80ms,0s } .switch { position: absolute; left: 4px; top: 4px; bottom: 4px; right: 64.5%; background-color: var(--accent); border-radius: 36px; z-index: 1; transition: .25s cubic-bezier(.785,.135,.15,.86); transition-property: left,right; transition-delay: 0s,80ms; box-shadow: 0 1px 2px rgba(0,0,0,.15) } @media all and (max-width: 768px) { .toggle .toggle-check,.toggle .toggler { margin:5px } } #pricing--plans { margin-top: 30px; } .pricing--tables { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 40px; text-align: left; } .pricing--explain { font-size: 18px; flex-basis: 100%; text-align: center; } .pricing--table { position: relative; flex: 1; width: 100%; max-width: 350px; background: var(--white); border-radius: var(--radius-lg); display: flex; flex-flow: column; border: 8px solid var(--light); } .pricing--table--header { background: var(--light); padding: 30px 25px; position: relative; z-index: 10; } .pricing--table--header h3 { color: var(--strong); font-size: 32px; font-weight: 600; margin: 0; } .pricing--table--header p.pricing--amount { font-size: 26px; color: var(--accent); margin: 0; display: flex; justify-content: space-between; } .pricing--table--content { padding: 10px 0; } .pricing--table--content h4 { font-size: 14px; text-transform: uppercase; color: var(--accent); padding: 30px 25px 10px 25px; } .pricing--table--content p { padding: 10px 25px; font-size: 18px; } .pricing--table li { list-style: none; padding: 6px 25px; font-size: 18px; margin: 0; border-top: var(--border-light); color: var(--strong); } .pricing--table li:first-child { border: none; } .pricing--table--content button { border: none; background: none; color: var(--accent); font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0; font-size: 18px; } .pricing--table--extra { display: none; } .pricing--table--button { margin-top: auto; padding: 30px 25px; /*border-top: var(--border-light); background: var(--lightest);*/ } .pricing--table--button a.button { display: block; text-align: center; font-size: 24px; font-weight: 600; } .v2 .pricing--table { display: flex; max-width: 720px; flex-flow: row; background: var(--light); box-sizing: border-box; } .v2 .pricing--table--header { width: 40%; } .v2 .pricing--table--header label { display: block; padding: 15px 0; border-top: 1px solid var(--black-a10); display: flex; gap: 10px; align-items: center; cursor: pointer; } .v2 .pricing--table--header label:first-child { margin: 0; padding-top: 0; border: 0; } .v2 .pricing--table--header label:has(input:checked) { font-weight: 600; color: var(--strong); } .v2 .pricing--table--header label span { margin-left: auto; } .v2 .pricing--table--header label span strike { font-size: 85%; opacity: .8; } .v2 .pricing--table--content { border-radius: var(--radius-xs); background: var(--white); flex-grow: 4; padding: 30px 25px; } .v2 .pricing--table li { border: none; background: url(images/icon-check.svg) left center / 20px 20px no-repeat; padding-left: 30px; } .v2 .pricing--table--button { padding: 0; } /* .pricing--table.pro:before { content: "BEST VALUE"; position: absolute; z-index: -1; left: -8px; right: -8px; top: -50px; background: var(--accent); color: var(--white); letter-spacing: 3px; text-align: center; font-size: 14px; font-weight: 600; padding: 4px 0 15px 0; border: 8px solid var(--accent); border-radius: var(--radius-lg); } */ /*#pricing--agency { background: var(--light); padding: 20px 40px; border-radius: var(--radius-lg); margin-top: 40px; text-align: center; }*/ #pricing--tables--extra { margin: 40px 0; text-align: center; } #pricing--tables--extra h3 { font-size: 22px; font-weight: 600; color: var(--strong); margin: 0; } #pricing--discount { background: linear-gradient(140deg, var(--accent) 0%, var(--accent-alt) 100%); padding: 20px 30px; color: var(--white); text-align: center; margin: 10px auto; border-radius: var(--radius-md); max-width: 720px; box-sizing: border-box; font-size: 16px; } #pricing--discount div { display: block; font-size: 23px; font-weight: 600; color: var(--white); } /* Plans */ .plans #pricing--banner { margin: 0 0 20px 0; } .plans #pricing--banner p { font-size: 28px; } .plans #pricing--plans .container { max-width: 960px; } .plans .pricing--explain { margin: 50px 0 0 0; } .plans .pricing--explain p { text-transform: uppercase; font-size: 15px; color: var(--strong); font-weight: 600; } .plans .pricing--explain ul { columns: 2; gap: 10px 20px; max-width: 720px; margin: 0 auto; text-align: left; } .plans .pricing--explain li { list-style: none; display: flex; gap: 7px; align-items: center; line-height: 1.1; margin: 0 0 7px 0; } .plans .pricing--explain li:before { content: ""; width: 20px; height: 20px; background: url(images/icon-check.svg) left bottom / auto 100% no-repeat; } .plans .pricing--tables { gap: 0; width: 100%; margin: 50px 0 0 0; border: 1px solid var(--medium-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); background: var(--white); } .plans .pricing--table { border: none; border-radius: 0; background: none; } .plans .pricing--table:nth-child(1), .plans .pricing--table:nth-child(2) { border-right: 1px solid var(--medium-light); } @media all and (max-width: 768px) { .plans .pricing--tables { gap: 30px; border: none; border-radius: 0; box-shadow: none; background: none; } .plans .pricing--table { border: 1px solid var(--medium-light); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-elevated); } .plans .pricing--table:nth-child(1), .plans .pricing--table:nth-child(2) { border-right: 1px solid var(--medium-light); } } .plansxx .pricing--table:nth-child(3) { background: var(--light); border-radius: 0 8px 8px 0; } .plans .pricing--table--header { text-align: center; overflow: hidden; background: none; } .plans .pricing--table--header h3 { font-size: 24px; font-weight: 400; margin: 0 0 4px 0; } .plans .pricing--audience { font-size: 14px; color: var(--medium); margin: 0 0 20px 0; line-height: 1.3; min-height: 2.6em; } .plans .pricing--table--header svg path { fill: var(--accent-alt); } .plans .pricing--table--header p.pricing--amount { justify-content: center; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 42px; } .plans .pricing--table--header p.pricing--amount span { font-size: 20px; color: var(--medium); } .plans .pricing--table--header p.pricing--amount strike { color: var(--medium); font-size: 16px; flex-basis: 100%; } .plans .pricing--table--header .pricing--table--ribbon { position: absolute; top: 22px; right: -34px; padding: 6px 36px; background: var(--accent-alt); font-size: 13px; text-transform: uppercase; color: var(--white); transform: rotate(45deg); } .plans .pricing--table--button { padding-top: 0; background: none; } .plans .pricing--table--button a.button { font-size: 18px; padding: 8px 24px; } .plans #pricing--guarantee, .plans #pricing--discount { max-width: 100%; } /* Target the 3rd pricing table on the page */ .plans .pricing--tables .pricing--table:nth-of-type(4) { background: var(--accent); } .plans .pricing--tables .pricing--table:nth-of-type(4) .pricing--table--header * { color: var(--white); } /* Agency Trial */ .page-id-1236 #pricing--banner { margin: 0 0 100px 0; } .page-id-1236 #pricing--banner h1:after { display: none; } #pricing--trial--why { background-color: var(--lightest); padding: 100px 0; } #pricing--trial--why .container { display: flex; justify-content: space-between; align-items: center; text-align: left; } #pricing--trial--why .container > div { flex-basis: 45%; } #pricing--trial--why h2 { font-size: 20px; } #pricing--trial--points { background-color: var(--accent); padding: 100px 0; } #pricing--trial--points { position: relative; background: var(--accent); background: linear-gradient(140deg, var(--accent) 0%, var(--accent) 62%, var(--accent-alt) 100%); } #pricing--trial--points:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(images/logo-icon-white.svg) right -30% bottom -5% / 70% auto no-repeat; opacity: .1; } #pricing--trial--points ul { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 30px; margin-top: 50px; } #pricing--trial--points ul li { list-style: none; text-align: left; } #pricing--trial--points h2, #pricing--trial--points p, #pricing--trial--points a:not(.button) { color: var(--white); } #pricing--trial--points h3 { font-size: 22px; color: var(--accent-alt); } #pricing--trial--points svg { height: 30px; width: auto; } #pricing--trial--points svg path { fill: var(--accent-alt); } #pricing--trial--integrations .integrations--content { text-align: left; } #pricing--trial--integrations h2 { font-size: 22px; margin: 0 0 30px 0; } #pricing--signature { border-radius: var(--radius-lg); border: 2px solid var(--light); padding: 40px 30px; margin: 50px auto; max-width: 720px; text-align: center; box-sizing: border-box; } #pricing--signature .signature { justify-content: center; text-align: left; } /* Account */ .wp-block-edd-login { max-width: 500px; margin: 0 auto; } #edd-blocks-form__login { border: none; } .page-id-148089 #page-header h1 { text-align: center; } #account section { order: 2; } #account aside { order: 1; } #account .edd-table, #edd_user_history { border: none; width: 100%; } #account .edd-table th, #edd_user_history th { background: none; font-size: 14px; font-weight: 600; padding: 0 20px 5px 0; border: none; border-bottom: 1px solid var(--medium-light); } #account .edd-table td, #edd_user_history td { font-size: 18px; padding: 15px 20px 15px 0; border: none; } #account .edd-table thead th, #edd_user_history thead th { font-size: 14px; color: var(--medium); text-transform: uppercase; font-weight: 400; } #edd_profile_editor_form fieldset, #edd-stripe-manage-cards fieldset { margin: 0 0 50px 0; } #edd_profile_editor_form legend, #edd-stripe-manage-cards fieldset > legend { font-weight: 600; font-size: 26px; border-bottom: var(--border-light); padding: 0 0 5px 0; margin: 0 0 15px 0; display: block; width: 100%; color: var(--strong); } #edd_profile_editor_form label { display: inline-block; width: 250px; } .edd_downloads_list .edd_download { padding: 25px 0; border-top: var(--border-light); } .edd_download_inner { display: flex; gap: 15px; align-items: center; } .edd_download_image { flex-basis: 26px; flex-grow: 0; flex-shrink: 0; } h3.edd_download_title { margin: 0; flex-grow: 5; } h3.edd_download_title a { text-decoration: none; } .edd_download_excerpt { flex-basis: 100%; display: none; } .edd_subscription_name { font-weight: 600; color: var(--strong); } .edd_subscription_status.active { color: green; } .edd_subscription_status.cancelled, .edd_subscription_status.expired { color: red; } .edd_subscription_actions a { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-sm); margin-right: 10px; text-decoration: none; border: var(--border-light); padding: 4px 10px; } .edd_subscription_actions a svg { height: 16px; width: auto; } .edd_subscription_actions a svg path { fill: var(--accent); } a.edd_subscription_cancel_survey { color: red; } .edd_subscription_actions a.edd_subscription_cancel_survey svg path { fill: red; } #edd_user_history a.edd_subscription_cancel { color: red; border-color: red; } .edd_download_download_files .download { margin: 0 0 5px 0; font-size: 14px; padding: 5px 10px; } /* Affiliates */ .page-id-25:not(.logged-in) #content .container { display: flex; justify-content: space-between; } .page-id-25:not(.logged-in) #content .container form { flex-basis: 40%; } /* Combo landing page */ #combo { width: 550px; display: flex; align-items: center; gap: 30px; margin: 2rem auto; justify-content: center; } #combo--plugin, #combo--platform { width: 200px; } #combo img { max-height: 75px; max-width: 200px; height: auto; width: auto; } #combo--arrow { position: relative; width: 200px; height: 50px; text-align: center; } #combo--arrow svg { stroke-width: 1.5px; height: 30px; } /* PLatforms */ .platform--intro { margin: 60px 0 0 0; } .platform--intro img { height: 40px; width: auto; } .platform--intro h2 { margin: 10px 0 15px 0; } #mass-links ul { columns: 2; column-gap: 20px; margin: 0; padding: 0; } #mass-links li { list-style: none; padding: 0; margin: 0; font-size: 15px; } #mass-links li a { color: var(--medium); } #compare, #platform-compare-table { max-width: 100%; overflow-x: auto; } #compare table, #platform-compare-table table { border-radius: var(--radius-md); table-layout: fixed; } #platform-compare-table table { margin: 0 auto; width: auto; } #compare thead th, #platform-compare-table thead th, #compare tbody th, #platform-compare-table tbody th { background: var(--light); padding: 10px 10px; font-family: "input-sans", monospace; color: var(--black); font-size: 14px; } #compare thead th, #platform-compare-table thead th { text-align: center; } #compare thead th:first-child, #platform-compare-table thead th:first-child { background: var(--white); position: sticky; left: 0; z-index: 2; } #compare tbody th, #platform-compare-table tbody th, #compare tbody td.current, #platform-compare-table tbody td.current, #compare thead th.current, #platform-compare-table thead th.current, #compare tfoot th, #platform-compare-table tfoot th { position: sticky; left: 0; z-index: 1; } #compare tbody td.current, #platform-compare-table tbody td.current { background: var(--white); } #compare tbody td.current, #platform-compare-table tbody td.current, #compare thead th.current, #platform-compare-table thead th.current { left: 110px; } #compare thead th:nth-child(2), #platform-compare-table thead th:nth-child(2) { border-radius: var(--radius-md) 0 0 0; } #compare thead th:last-child, #platform-compare-table thead th:last-child { border-radius: 0 var(--radius-md) 0 0; } #compare tbody tr:first-child th, #platform-compare-table tbody tr:first-child th { border-radius: var(--radius-md) 0 0 0; } #compare tbody th, #platform-compare-table tbody th, #compare tbody td, #platform-compare-table tbody td { padding: 10px; line-height: 1.1; vertical-align: middle; } #compare tbody th, #platform-compare-table tbody th { width: 160px; border-bottom: 1px solid #C0E6DA; } #compare tbody td, #platform-compare-table tbody td { border-bottom: var(--border-light); text-align: center; font-size: 14px; } #compare tbody td:last-child, #platform-compare-table tbody td:last-child { border-right: var(--border-light); } #compare tbody tr:last-child th, #platform-compare-table tbody tr:last-child th { border-radius: 0 0 0 var(--radius-md); border: none; } #compare tbody tr:last-child td:last-child, #platform-compare-table tbody tr:last-child td:last-child { border-radius: 0 0 var(--radius-md) 0; } #compare tfoot th, #platform-compare-table tfoot th { background: var(--white); } #compare tfoot td, #platform-compare-table tfoot td { text-align: center; padding: 10px 5px; font-size: 13px; font-family: "input-sans", Monospace; letter-spacing: -0.07em; text-transform: uppercase; } #compare svg, #platform-compare-table svg { width: 20px; height: auto; } .section-footer-link { text-align: center; margin-top: var(--space-7); } .platform-dashboard--image { max-width: 1100px; max-height: 550px; margin: 0 auto; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-elevated); transition: max-height 0.5s ease; } .platform-dashboard--image.is-expanded { max-height: 6000px; } .platform-dashboard--image img { display: block; width: 100%; height: auto; } svg.yes path { fill: green; } svg.no path { fill: red; } /* Glossary */ .glossary-term-bar { display: none; text-transform: uppercase; justify-content: space-between; margin: 0 0 30px 0; border: 1px solid var(--medium-light); border-radius: var(--radius-sm); } .glossary-letter { text-transform: uppercase; } .content .glossary-tooltip a { font-weight: normal; } .glossary-letter { font-size: 26px; color: var(--strong); } .glossary-term-list li { list-style: none; margin-left: 0; list-style: none; margin: 0 0 10px 0; color: var(--white); } .glossary-list-term-excerpt { display: block; color: var(--medium); font-size: 18px; } .content .wp-block-yoast-faq-block { background: var(--lightest); padding: 30px 40px; border-radius: 0 0 10px 10px; margin: 0 0 40px 0; } .content h2:has(+ .wp-block-yoast-faq-block) { background: var(--lightest); padding: 30px 40px 0 40px; border-radius: 10px 10px 0 0; font-size: 20px; text-transform: uppercase; margin: 40px 0 0 0; } .content .schema-faq-question { font-weight: normal; color: var(--strong); } .content .schema-faq-answer { font-size: 18px; } .content .wp-block-table-of-contents { background: var(--lightest); padding: 30px 40px; border-radius: 10px; margin: 40px 0; } .content .wp-block-table-of-contents:before { content: "Table of Contents"; font-size: 20px; text-transform: uppercase; color: var(--strong); margin: 0 0 15px 0; display: block; font-family: "input-sans", monospace; } .content .wp-block-table-of-contents ol { margin-bottom: 0; } .content .wp-block-table-of-contents li { list-style: none; margin-left: 0; margin-bottom: 7px; } .content .wp-block-table-of-contents li li { font-size: .9em; margin-left: 15px; margin-bottom: 2px; list-style: disc; } /* Slice Affiliates */ #slicewp-affiliate-register-form { max-width: 500px; margin: 40px auto; } .slicewp-form .slicewp-field-wrapper input:not([type="checkbox"]), .slicewp-form .slicewp-field-wrapper textarea { border: 2px solid var(--medium-light); border-radius: var(--radius-xs); display: block; box-sizing: border-box; width: 100%; max-width: 100%; padding: 10px 20px; color: var(--strong); } .slicewp-form .slicewp-field-wrapper .slicewp-field-label-wrapper label { font-size: 18px; color: var(--strong); } /* Changelog */ .edd_changelog-content { margin-top: 70px;} .content .edd_changelog-content h2 { font-size: 20px; } .content .edd_changelog-content li { margin: 0 0 10px 0; } .content .edd_changelog-content li { position: static; padding-left: 0; display: flex; gap: 10px; align-items: center; } .content .changelog-badge { margin-right: 0; position: static; padding: 6px 0; border-radius: var(--radius-xs); flex-shrink: 0; } /* Single integration enhanced */ .single-integration section .container { max-width: 1260px; } .single-integration img.wp-post-image { height: 60px; width: auto; } .single-integration h1 { font-size: clamp(1.75rem, 5vw, 2.875rem); } .single-integration h1 span { display: block; } .single-integration .feature--image--content a.button { margin-top: 40px; } /* Setup Videos */ .setup-videos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; } .setup-video { background: var(--lightest); padding: 30px; border-radius: 10px; display: flex; flex-direction: column; } .setup-video h2 { font-size: 24px; margin: 0 0 15px 0; } .setup-video--details { margin-bottom: 20px; } .setup-video--thumbnail { width: 100%; height: auto; border-radius: var(--radius-md); margin: 0 0 15px 0; } .setup-video--details--item--label { font-size: 18px; color: var(--medium); display: block; margin: 10px 0 0 0; } .setup-video--details--item--value { font-size: 16px; color: var(--strong); display: block; } .setup-video a.button { margin-top: auto; text-align: center; justify-content: center; } /* Partners */ body .gform_wrapper .gform_body .gform_fields .gfield .gfield_consent_description { max-height: 200px; } body.page-id-44792 #content h2 { margin: 50px 0; border-top: var(--border-light); padding-top: 50px; } body.page-id-44792 #content .wp-block-image { margin: 0; } /* ----------------------------------- */ /* CHECKOUT /* ----------------------------------- */ /* #edd_checkout_wrap { max-width: 860px; margin: 0 auto; } #edd_checkout_cart td, #edd_checkout_cart th { padding: 15px 0; border: none; } #edd_checkout_cart tr.edd_cart_item { border-bottom: 1px solid #CCC; } #edd_checkout_cart th.edd_cart_total { color: var(--ink-deep); font-size: 30px; font-weight: 500; } #edd_checkout_form_wrap legend { margin: 0; } #edd_show_terms { font-weight: 500; text-transform: uppercase; margin: 15px 0; } #edd_checkout_form_wrap #edd_final_total_wrap { font-size: 36px; color: var(--ink-deep); font-weight: 500; margin: 30px 0; background: none; border: none; padding: 0; } #edd-purchase-button { padding: 15px 55px !important; font-size: 24px; } #edd_purchase_form legend { margin: 0 0 15px 0; } */ #edd_sl_renewal_form, #edd_discount_code, .edd-payment-icons, #checkout .edd-description { display: none !important; } .edd-checkout { position: relative; } .edd-checkout a.return { position: absolute; top: 15px; left: 15px; display: flex; align-items: center;} .edd-checkout a.return .sun { width: 40px; height: 40px; } #checkout { min-height: 100vh; text-align: left; background: var(--white); background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, var(--lightest) 50%, var(--lightest) 100%); } #edd_checkout_wrap { display: flex; justify-content: space-between; } #edd_checkout_cart_form { flex-basis: 50%; padding: 150px 50px 50px 50px; } #edd_checkout_form_wrap { flex-basis: 50%; padding: 75px 50px; } #edd_checkout_cart_form { order: 2; } #checkout h1 { font-size: 36px; margin: 0 0 40px 0; } #checkout fieldset { border: none; padding: 0; } #edd_purchase_form { order: 2; max-width: 25rem; margin-right: 0; margin-left: auto; width: 90%; } #edd_checkout_form_wrap fieldset#edd_register_account_fields { margin-top: 40px; } #edd_checkout_form_wrap legend, #checkout .edd-label { color: var(--ink-deep); font-size: 18px; margin: 0 0 10px 0; font-weight: 400; } #edd_checkout_form_wrap legend { font-weight: 700; margin: 0 0 25px 0; } #checkout input.edd-input, #edd_register_account_fields input, #checkout select, #edd_checkout_form_wrap select.edd-select { border: 2px solid var(--medium-light); border-radius: var(--radius-xs); display: block; box-sizing: border-box; width: 100%; max-width: 100%; padding: 10px 20px; } #edd-payment-mode-wrap { width: 100%; display: flex; justify-content: space-between; } #checkout #edd-payment-mode-wrap label { margin: 0; flex-basis: 47%; width: auto; border-color: #EFEFEF; border-width: 2px; border-style: solid; border-radius: .25rem; display: inline-block; position: relative; text-align: center; cursor: pointer; background-position: center; background-repeat: no-repeat; -webkit-backface-visibility: hidden; backface-visibility: hidden; padding-bottom: 1.65rem; padding-top: 1.65rem; text-indent: -9999em; will-change: transform; } #edd-payment-mode-wrap #edd-gateway-option-stripe { background-image: url(images/stripe.svg); background-size: 60%; } #edd-payment-mode-wrap #edd-gateway-option-paypal_commerce { background-image: url(images/paypal.svg); background-size: 50%; } #checkout #edd-payment-mode-wrap label.edd-gateway-option-selected { border-color: #FF8500; } #edd_checkout_user_info legend { display: none; } #edd_checkout_user_info p { margin: 30px 0 0 0; } #checkout #edd_checkout_form_wrap #edd-login-account-wrap, #checkout #edd-new-account-wrap { margin: 15px 0 5px 0; font-size: 16px; text-align: center; } #edd_register_account_fields label { display: none; } #edd_checkout_form_wrap fieldset { margin: 30px 0 0 0; } #edd_checkout_form_wrap fieldset#edd_cc_fields { background: none; border: none; display: flex; flex-direction: column; margin-top: 40px; } #edd_checkout_form_wrap fieldset#edd_cc_fields legend { font-weight: bold; margin: 0; } #checkout #edd_secure_site_wrapper { order: 2; font-size: 14px; font-weight: normal; padding: 7px 0 0 0; display: flex; align-items: center; gap: 7px; } #checkout #edd_secure_site_wrapper svg { fill: var(--medium); } #edd-card-name-wrap, #edd-card-wrap, #checkout #edd_purchase_submit, #checkout #edd-purchase-button { margin: 25px 0 0 0; } #edd_checkout_user_info { display: flex; flex-wrap: wrap; justify-content: space-between; } #edd_checkout_user_info > * { flex-basis: 48%; } #edd_checkout_user_info #edd-email-wrap, #edd-acq-wrap { flex-basis: 100%; } #edd-acq-wrap select { border: 2px solid var(--light); padding: 10px 15px; width: 100%; box-sizing: border-box; } #checkout #edd_purchase_submit #edd_gh_consent_to_marketing_field label { font-weight: 400; color: var(--ink-deep); font-size: 16px; } #checkout #edd_final_total_wrap { font-size: 24px; color: var(--strong); text-align: center; margin: 30px 0; } body #checkout #edd_purchase_submit #edd-purchase-button { display: block; box-sizing: border-box; width: 100%; font-size: 22px; text-align: center; border: none; } #checkout-terms { color: #999; font-size: 14px; margin-top: 50px; } #checkout-terms a { color: #999; text-decoration: underline; } #edd_checkout_cart_wrap { max-width: 400px; } #cart > p { font-size: 16px; color: var(--ink-deep); } #cart .cart-item { font-size: 16px; margin: 0 0 15px 0; } #cart .cart-item h3 { font-weight: 600; color: var(--strong); margin: 0; line-height: 1.4; } #cart .cart-item h3 .cart-price { font-weight: normal; display: block; font-size: 16px; color: #666; } #cart-upgrade { background: var(--strong); padding: 15px 20px; text-align: center; } #cart-upgrade p { margin: 0 0 15px 0; color: var(--white); font-weight: 500; line-height: 1.1; } #cart-upgrade a.button { font-size: 16px; padding: 4px 20px !important; margin: 0; } #cart-upgrade ul { margin: 0 0 10px 0; } #cart-upgrade li { list-style: none; font-size: 15px; color: var(--white); } #cart #cart-total { margin: 30px 0; font-size: 38px; font-weight: 600; color: var(--strong); } #cart #cart-total span.peryear { font-size: 50%; color: var(--medium); font-weight: 400; } #cart .edd_discount_remove { display: none; } #cart-features { margin: 30px 0 0 0; } #cart-features li { font-size: 16px; color: var(--strong); list-style: none; margin: 0 0 4px 0; display: flex; align-items: center; gap: 7px; } #cart-features li:before { content: ""; width: 20px; height: 20px; background: url(images/icon-check.svg) left bottom / auto 100% no-repeat; } #cart-testimonial { margin: 40px 0 0 0; } #cart-testimonial img { border-radius: var(--radius-full); width: 40px; height: auto; margin: 0 15px 0 0; } #cart-testimonial p { font-size: 16px; margin: 0 0 5px 0; } #cart-testimonial cite { font-size: 14px; display: flex; align-items: center; } /* Confirmation */ body .edd-blocks-receipt__items { background: var(--light); border: none; border-radius: var(--radius-md); } body .edd-blocks-receipt__totals { border: none; padding: 0; } body .edd-blocks__row-label { font-weight: 600; color: var(--accent); } /* Receipt */ #receipt { padding: 40px; text-align: left; } #receipt h3 { margin: 50px 0 20px 0; } #edd_subscription_receipt thead th { font-size: 14px; border-bottom: 1px solid #CCC; padding: 0 20px 5px 0; } #edd_subscription_receipt tbody td { padding: 10px 20px 10px 0; } /* ----------------------------------- */ /* CONTENT MODAL /* ----------------------------------- */ .content-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; visibility: hidden; transition: var(--transition-opacity), visibility 0.3s ease; backdrop-filter: blur(5px); } .content-modal.active { opacity: 1; visibility: visible; } .content-modal--overlay { position: absolute; top: 10%; left: 10%; right: 10%; bottom: 10%; background: rgba(255, 255, 255, 0.95); box-shadow: 0 20px 40px var(--black-a20); border-radius: var(--radius-lg); opacity:.95; } .content-modal--content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 800px; max-height: 90vh; overflow: visible; } .content-modal--close { position: absolute; top: calc( 10% - 20px); right: calc( 10% - 20px); width: 40px; height: 40px; border: none; background: rgba(0, 0, 0, 0.8); color: var(--white); font-size: 24px; border-radius: var(--radius-full); cursor: pointer; z-index: 10; transition: var(--transition-bg); } .content-modal--close:hover, .content-modal--close:focus { background: rgba(0, 0, 0, 1); outline: 3px solid var(--accent); outline-offset: 2px; } .content-modal--close:focus:not(:focus-visible) { outline: none; } .content-modal--header { padding: 30px 30px 20px 30px; } .content-modal--header h2 { font-size: 24px; color: var(--strong); margin: 0; font-weight: 500; } .content-modal--body { position: relative; width: 100%; } .content-modal--video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 aspect ratio */ } .content-modal--video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } body.modal-open { overflow: hidden; } /* Screen reader only class */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Focus styles for keyboard navigation */ .content-modal:focus { outline: none; } .content-modal--content:focus { outline: none; } /* High contrast mode support */ @media (prefers-contrast: high) { .content-modal--close { border: 2px solid var(--black); } .content-modal--content { border: 2px solid var(--black); } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { .content-modal, .content-modal--close { transition: none; } } @media screen and (max-width: 768px) { .content-modal--overlay { top: 0; left: 0; right: 0; bottom: 0; } .content-modal--content { width: 95%; max-height: 95vh; } .content-modal--header { padding: 20px 20px 15px 20px; } .content-modal--header h2 { font-size: 20px; } .content-modal--close { top: 15px; right: 15px; width: 35px; height: 35px; font-size: 20px; } } /* ----------------------------------- */ /* FOOTER /* ----------------------------------- */ #subscribe { font-size: 16px; color: var(--white); line-height: 1.2; max-width: 650px; } #subscribe p { font-size: 28px; font-weight: 600; color: var(--white); margin: 0 0 7px 0; } #subscribe form { display: block; margin: 0 0 10px 0; } #subscribe input { border-radius: var(--radius-md); padding: 8px 10px; border: none; background: var(--white); } #social a { text-decoration: none; } #social a svg { height: 50px; width: auto; text-decoration: none; } #social a svg path { fill: var(--white); } #social a:hover svg path { fill: var(--accent-alt); } #footer { background: var(--accent); padding: 10vh 0; background: linear-gradient(140deg, var(--accent) 0%, var(--accent) 50%, var(--accent-alt) 100%); } #footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; } #footer a { text-decoration: none; } #signup { flex-basis: 100%; display: flex; gap: 10%; border-bottom: 1px solid rgba(255,255,255,.25); padding: 0 0 40px 0; margin: 0 0 40px 0; } #signup--content { flex-basis: 50%; flex-shrink: 0; font-family: "input-sans", monospace; letter-spacing: -0.07em; color: var(--white); font-size: clamp(26px, 4vw, 34px); line-height: 1.1; } #signup--form .gh-form-wrapper .gh-form-fields { display: flex; gap: 5px; } #signup--form .gh-form-wrapper .gh-form-fields .col-1-of-4 { flex-basis: 25%; } #signup--form .gh-form-wrapper .gh-form-fields .col-1-of-2 { flex-basis: 50%; } #signup--form input { background: rgba(255,255,255,.1); color: var(--white); padding: 10px 20px; border-radius: var(--radius-md); border: none; } #signup--form input::placeholder { color: var(--white); } #signup--form button { background: var(--strong); color: var(--white); text-align: center; border: none; } #signup--form button:hover { background: var(--accent-alt); } #signup--form .gh-success { background: var(--accent-alt); color: var(--white); padding: 10px 20px; border-radius: var(--radius-md); } #signup--form .gh-success p { color: var(--white); } #footer-nav { flex-basis: 100%; } #footer-nav ul { display: flex; gap: 5%; justify-content: space-between; list-style: none; } #footer-nav ul ul { display: block; margin-top: 15px; } #footer-nav > ul > li { white-space: nowrap; color: var(--white); font-family: "input-sans", monospace; font-size: 16px; font-weight: 500; text-transform: uppercase; color: var(--accent-alt); } #footer-nav li { line-height: 1.1; margin: 0 0 10px 0;} #footer-nav li a { color: var(--white); font-size: 18px; font-weight: 400; text-transform: none; } #footer-nav li a:hover { color: var(--accent-alt); } #copyright { flex-basis: 100%; color: rgba(255,255,255,.50); font-size: 15px; margin: 75px 0 0 0; } #copyright a { color: rgba(255,255,255,.50); } #copyright a:hover { color: var(--white); } #discount-applied { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 2000; background: rgba(34,45,57,.95); } #discount-applied-message { position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 36px; font-weight: 500; color: var(--white); } /* ----------------------------------- */ /* MOBILE /* ----------------------------------- */ @media screen and (max-width: 1260px) { #banner .container { background-size: 50% auto; } #integrations--connections { margin: 0; } #header--logo { width: auto; } #header--logo img { width: auto; } #mobile-menu { display: block; margin-left: 10px; } #header nav { position: fixed; left: 100%; width: 100%; height: 100%; top: 0; bottom: 0; background: url(images/city.svg) bottom center / auto 20% no-repeat var(--white); transition: all .5s; overflow-y: scroll; } body.nav-open { overflow: hidden; } .nav-open #header #mobile-menu { z-index: 99999; } .nav-open #header nav { display: block; z-index: 99998; left: 0; margin: 0; } #header nav ul { padding: 40px 10%; flex-direction: column; align-items: flex-start; gap: 15px; } #header nav ul li { display: block; margin: 0 !important; padding: 0; border: 0; } #header nav ul li a { font-size: clamp(22px, 3vw, 28px); } #header nav ul li a span { display: none; } #header nav ul li.all { display: none; } #header nav ul li .sub-menu { position: static; opacity: 1; visibility: visible; display: block; background: transparent; padding: 0; top: 0; transform: translateY(0); box-shadow: none; padding: 0 0 15px 0; } #header nav ul li .sub-menu li { border: none; } #header nav ul li .sub-menu li a { padding: 5px 0; margin: 0; font-size: 18px; gap: 10px; } #header nav ul li .sub-menu li a .icon { padding: 0; background: none; width: 24px; height: 24px; } #header nav ul li .sub-menu li a .title { font-weight: 400; color: var(--medium); } #header nav ul li .sub-menu li a .title span { display: none; } #banner { padding-bottom: 20vw; } #banner.with-video .container { flex-direction: column; gap: 50px; text-align: center; max-width: 100%; } #banner.with-video .content { flex-basis: 100%; } #banner.with-video .video { flex-basis: 100%; } #banner.with-video .buttons { justify-content: center; } #banner.with-video video { margin: 0 auto; max-width: 600px; } } @media screen and (max-width: 1100px) { #seen .container { width: 100%; padding-left: 0; padding-right: 0; } #seen p { display: none; } #seen .logos-slide { animation: 30s slide infinite linear; } #seen .logos-slide.clone { display: flex; } #seen .logos { overflow: hidden; white-space: nowrap; position: relative; } #seen .logos:before, #seen .logos:after { position: absolute; top: 0; width: 100px; height: 100%; content: ""; z-index: 2; } #seen .logos:before { left: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0), white); } #seen .logos:after { right: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), white); } #seen .logos:hover .logos-slide { animation-play-state: paused; } #seen img { max-width: none; margin: 0 40px; } #problems .container > article { max-width: 100%; margin-left: 0; } } @media screen and (max-width: 950px) { #benefits ul { grid-template-columns: 1fr; } #page-header--image { display: none; } #page-header--content { flex-basis: 100%; } .single-download #page-header--image { display: block; flex-basis: 100%; margin-top: 50px; } #screenshots { grid-template-columns: 1fr 1fr 1fr; } #doc-categories .container { grid-template-columns: 1fr; } .mini-cta { padding: 200px 40px 30px 40px; background-position: center 30px; background-size: auto 140px; text-align: center; } } @media screen and (max-width: 768px) { .mini-testimonials { flex-direction: column; gap: 0; } .intro { flex-direction: column; gap: 30px; margin: 75px auto; } .intro--image { flex-basis: 100%; width:100%; flex-shrink: 0; text-align: left; } .intro--image img { width: 130px; height: auto; } .intro:nth-child( odd ) .intro--image { order: 1; } .intro:nth-child( odd ) .intro--content { order: 2; } .section--intro { flex-direction: column; gap: 30px; } #faq ul { columns: 1; } #faq ul li.featured { break-before: auto; } .section--intro--supplement { align-self: start; } #integrations .section--intro--supplement { margin: 0 auto; } #integrations--platforms { grid-template-columns: 1fr; margin-top: 60px; } #integrations--platforms .arrow { display: none; } .feature--image .container { flex-direction: column; } .feature--image--content { order: 2; } .feature--image--image { order: 1; } .feature--image--image img { max-width: 100%; margin: 0 0 40px 0; } .image-rotator--nav { display: none; } .image-rotator--slide { position: static; opacity: 1; visibility: visible; margin: 40px 0 0 0; } .image-rotator--slide--image { height: auto; } .image-rotator--slide--image img { max-width: 100%; object-fit: unset; } .feature--intro--image { margin-left: 0; margin-right: 0; } #buy-cta .container { flex-direction: column; } #signup { gap: 30px; flex-direction: column; } #signup--content { flex-basis: auto; text-align: center; } #footer-nav ul { flex-wrap: wrap; } #footer-nav > ul > li { flex-basis: 45%; margin: 0 0 30px 0; } .page-id-25:not(.logged-in) #content .container { display: flex; gap: 40px; flex-direction: column; } .page-id-25:not(.logged-in) #content .container form { flex-basis: 100%; } .page-id-25:not(.logged-in) #content .container form#affwp-register-form { order: 10; } .integrations { display: block; } .integrations--filter { margin: 0 0 30px 0; } #checkout { min-height: auto; background: var(--white); } #edd_checkout_wrap { flex-wrap: wrap; } #edd_checkout_cart_form, #edd_checkout_form_wrap { flex-basis: 100%; padding: 75px 50px; } #edd_purchase_form { max-width: 100%; width: 100%; } #edd_checkout_cart_form { order: 1; background: #fef8f1; } #edd_checkout_form_wrap { order: 2; } .setup-videos, .features--grid { grid-template-columns: 1fr 1fr; } .twocol--equal .container { display: flex; gap: 50px; flex-direction: column; } } @media screen and (max-width: 650px) { .alignnone { margin: 5px 0 20px 0; } .alignright, .alignleft, a img.alignright, a img.alignnone, a img.alignleft, a img.aligncenter { float: none; margin: 5px auto; } .buttons { flex-direction: column; gap: 10px; } #header .container { padding-top: 20px; padding-bottom: 20px; gap: 10px; } #header--logo img { height: 55px; } #header--buttons a.button { font-size: 13px; padding: 5px 8px; } #header--buttons a.account span { display: none; } #banner { padding-top: 3vh; padding-bottom: 120px; } .section--intro--supplement { align-self: start; } .integration-counts { flex-direction: column; gap: 15px; margin: 0 auto; text-align: left; } .integration-counts--arrows, .integration-counts--separator { display: none; } .integration-counts--item { flex-basis: 100%; max-width: 100%; display: flex; gap: 15px; align-items: center; text-align: left; } .integration-counts--item svg { width: 28px; height: auto; } #problems article { flex-direction: column; gap: 20px; max-width: 100%; margin-left: 0 !important; border: var(--border-light); padding: 20px; border-radius: var(--radius-md); margin: 20px 0 0 0; } #problems article h3 { flex-basis: 100%; width: 100%; font-size: 16px; margin: 0; } #problems article .arrow { display: none; } #problems footer { text-align: left; } #problems footer .buttons { flex-direction: column; gap: 10px; align-items: flex-start; } #how ol { grid-template-columns: 1fr; } #how li { display: flex; align-items: center; gap: 10px; } #how li svg { display: none !important; } #how li img { max-width: 40%; } .logos { display: none; } #intros { padding: 10vh 0; } #benefits { padding-top: 0; } #benefits ul { flex-wrap: wrap; flex-direction: column; gap: 30px; } #intros .container { text-align: left; } .intro ul { columns: 1; } #ad-platforms .items { flex-direction: column; } #buy-cta--prices { margin-top: 50px; } #buy-cta--prices ul { grid-template-columns: 1fr; } #buy-cta--prices li a { flex-basis: 100%; display: flex; justify-content: center; gap: 10px; align-items: center; } #buy-cta:after { display: none; } .features ul { flex-direction: column; } #footer-nav > ul > li { flex-basis: 100%; } #page-header--content { padding: 30px 0 0 0; } #page-header--intros ul { grid-template-columns: 1fr; } #page-menu { border-top: var(--border-light); margin-top: 40px; } #page-menu ul { flex-direction: column; } #page-menu li { list-style: none; border-bottom: var(--border-light); border-left: none; } #content { padding: 5vh 0; } .twocol .container { display: block; } .twocol .container > * { width: 100%; } #sidebar { margin-top: 15vh; } .integrations h2 { text-align: center; font-size: 26px; } .integrations--list li { flex-basis: 30%; } .pricing--tables { display: flex; flex-direction: column; } form.simple-form, #gform_fields_17 { flex-direction: column; gap: 0; } #gform_fields_17 * { flex-basis: 100%; width: 100%; max-width: 100%; } form.simple-form input, #gform_fields_17 input { text-align: center; width: 100%; box-sizing: border-box; } form.simple-form button, #gform_fields_17 input[type="submit"] { display: block; width: 100%; box-sizing: border-box; border-radius: 0 0 var(--radius-md) var(--radius-md); } #gform_fields_17 #field_submit { flex-basis: 100%; } .post { flex-direction: column; align-items: flex-start; } .post--image img { max-width: 150px; } p.pre-headline span:after { content: ""; width: 100%; display: block; } #footer nav { margin-top: 50px; width: 100%; } #footer nav > ul { display: block; text-align: center; } #footer nav > ul ul { margin-bottom: 30px; } body.edd-success { background: none; } #success { max-width: 100%; } .v2 .pricing--table { flex-flow: column; } .v2 .pricing--table--header { width: 100%; box-sizing: border-box; } #pricing--guarantee { padding: 200px 40px 30px 40px; background-position: center top 30px; } #pricing--guarantee p { font-size: 16px; } #join .container { flex-direction: column; text-align: center; } #author-box { display: block; } #author-box img { margin: 0 auto 20px auto; } #mass-links ul { columns: 1; } .content ul.col2, .content ul.col3 { columns: 1; } .plans #pricing--banner h1:after { display: none; } .plans .pricing--explain ul { columns: 1; } .plans .pricing--table { max-width: 100%; } .setup-videos, .features--grid { grid-template-columns: 1fr; } .features--alt li { flex-direction: column; gap: 20px; } .features--alt .features--alt--content, .features--alt .features--alt--image { order: 1 !important; flex-basis: 100%; } .screenshot--image { max-height: inherit; } #links ul.columns { columns: 1; } } /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: var(--accent-alt); } .hamburger-box { width: 30px; height: 20px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 30px; height: 3px; background-color: var(--accent); border-radius: 0; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -10px; } .hamburger-inner::after { bottom: -10px; } .hamburger--squeeze .hamburger-inner { transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { transition: top 0.075s 0.12s ease, opacity 0.075s ease; } .hamburger--squeeze .hamburger-inner::after { transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { transform: rotate(45deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* Callout Feature */ .callout-feature { display: flex; align-items: center; gap: 30px; background: var(--lightest); border: 2px solid var(--accent-alt); border-radius: var(--radius-lg); padding: 30px; margin: 40px 0; } .callout-feature--image { flex: 0 0 33.333%; max-width: 33.333%; } .callout-feature--image img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); } .callout-feature--content { flex: 1; } .callout-feature--content h3 { margin: 0 0 10px 0; } .callout-feature--content p { margin: 0; } @media screen and (max-width: 768px) { .callout-feature { flex-direction: column; } .callout-feature--image { flex: none; max-width: 100%; width: 100%; } } /* =================================== CB3 ADDITIONS — FRONT PAGE COMPONENTS =================================== */ /* Mini testimonials (banner social proof) */ .mini-testimonials .quotes { position: relative; height: 1.5em; } .mini-testimonials .quote { position: absolute; left: 0; top: 0; opacity: 0; transition: var(--transition-opacity); white-space: nowrap; } .mini-testimonials .quote.active { opacity: 1; } /* Integration counts — scale on desktop only (base definition at line ~254) */ @media (min-width: 1024px) { #integrations-scroll .integration-counts { transform: scale(0.90); transform-origin: center top; } } /* Gradient text */ .gradient-text, .gradient-eyebrow { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-alt) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gradient-text { font-weight: 500; } .gradient-eyebrow { font-family: var(--font-mono); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; } /* Fade up (disabled - instant) */ .fade-up { opacity: 1; transform: none; } /* Stagger children */ .stagger > *:nth-child(1) { transition-delay: 0ms; } .stagger > *:nth-child(2) { transition-delay: 100ms; } .stagger > *:nth-child(3) { transition-delay: 200ms; } .stagger > *:nth-child(4) { transition-delay: 300ms; } .stagger > *:nth-child(5) { transition-delay: 400ms; } .stagger > *:nth-child(6) { transition-delay: 500ms; } /* Bento card */ .bento-card { border: 1px solid var(--grey-250); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .bento-card:hover { border-color: #d0d0d0; box-shadow: var(--shadow-elevated); position: relative; z-index: 10; } .bento-learn-more { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--grey-250); } /* Dot grid background */ .bg-dot-grid { background: radial-gradient(var(--accent-tint-12) 1px, transparent 1px), radial-gradient(var(--accent-tint-12) 1px, var(--grey-50) 1px); background-size: 16px 16px; background-position: 0 0, 8px 8px; } /* Mockup window chrome */ .mockup-window { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--grey-250); background: var(--white); } .mockup-titlebar { background: #f5f5f5; border-bottom: 1px solid var(--grey-250); padding: 8px 12px; display: flex; align-items: center; gap: 8px; } .mockup-dots { display: flex; gap: 6px; } .mockup-dots span { width: 10px; height: 10px; border-radius: var(--radius-full); } .mockup-dots span:nth-child(1) { background: #ff5f57; } .mockup-dots span:nth-child(2) { background: #febc2e; } .mockup-dots span:nth-child(3) { background: #28c840; } .mockup-titlebar-label { font-size: 10px; color: var(--medium); margin: 0 auto; } .mockup-toolbar { background: var(--grey-50); border-bottom: 1px solid var(--grey-250); padding: 6px 12px; display: flex; align-items: center; gap: 12px; font-size: 10px; color: var(--medium); } .mockup-wp-sidebar { background: #23282D; color: #c3c4c7; font-size: 11px; padding: 12px 0; } .font-system { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Divider grid */ .divider-cell { border-bottom: var(--border-soft); display: flex; flex-direction: column; } @media (min-width: 1024px) { .divider-cell { border-right: var(--border-soft); } .divider-cell.divider-row-end { border-right: none; padding-right: 0; } .divider-cell.divider-row-last { border-bottom: none; } .divider-grid > .divider-cell:first-child, .divider-cell.divider-row-end + .divider-cell { padding-left: 0; } .divider-cell[class*="col-span-6"] { padding-left: 0; padding-right: 0; } } .divider-hide-icons > .divider-cell > svg, .divider-hide-icons > .divider-cell > .flex > .flex > svg, .divider-hide-icons .divider-cell svg.mb-5 { display: none; } /* Logo scroll rows */ .logo-scroll-row { overflow: hidden; width: 100%; } .logo-scroll-track { display: flex; gap: 12px; width: max-content; } .logo-scroll-tile { flex-shrink: 0; width: 90px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--grey-100); border: var(--border-soft); border-radius: var(--radius-xl); } .scroll-left .logo-scroll-track { animation: scrollLeft var(--scroll-speed, 30s) linear infinite; } .scroll-right .logo-scroll-track { animation: scrollRight var(--scroll-speed, 30s) linear infinite; } /* CB3 header sub-menu updates (icons + descriptions) */ #header nav li .sub-menu a .title { font-family: "canada-type-gibson", sans-serif; line-height: 1; color: var(--strong); } #header nav li .sub-menu a .title span { font-family: "canada-type-gibson", sans-serif; display: block; color: var(--medium); font-size: 15px; font-weight: 400; margin-top: 5px; } /* Features sub-menu — 2-column layout with "See all features" spanning */ #header nav li .sub-menu--two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } #header nav li .sub-menu--two-col li { border-bottom: 1px solid var(--lightest); border-right: 1px solid var(--lightest); } #header nav li .sub-menu--two-col li:nth-child(2n) { border-right: none; } #header nav li .sub-menu--two-col li:nth-last-child(2), #header nav li .sub-menu--two-col li:nth-last-child(3):nth-child(odd) { border-bottom: 1px solid var(--lightest); } #header nav li .sub-menu--two-col li.all { grid-column: 1 / -1; border-right: none; border-bottom: none; } @media (max-width: 1024px) { #header nav li .sub-menu--two-col { grid-template-columns: 1fr; } #header nav li .sub-menu--two-col li { border-right: none; } } /* =================================== CB3 ANIMATIONS & KEYFRAMES =================================== */ @keyframes pulse-glow { 0%, 100% { filter: drop-shadow(0 0 20px var(--accent-tint-15)); } 50% { filter: drop-shadow(0 0 40px var(--accent-alt-tint-25)); } } .pulse-glow { animation: pulse-glow 4s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .float { animation: float 6s ease-in-out infinite; } .float-delayed { animation: float 6s ease-in-out infinite; animation-delay: -3s; } @keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } .bar-grow { transform-origin: bottom; transform: scaleY(0); } .bar-grow.animated { animation: barGrow 0.6s ease-out forwards; } @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .slide-in-right { opacity: 0; } .slide-in-right.animated { animation: slideInRight 0.5s ease-out forwards; } @keyframes slideInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } .slide-in-up { opacity: 0; } .slide-in-up.animated { animation: slideInUp 0.5s ease-out forwards; } @keyframes scaleIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } .scale-in { opacity: 0; } .scale-in.animated { animation: scaleIn 0.4s ease-out forwards; } @keyframes scrollLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes scrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } } .scroll-row-left { display: flex; animation: scrollLeft var(--scroll-speed, 30s) linear infinite; } .scroll-row-right { display: flex; animation: scrollRight var(--scroll-speed, 30s) linear infinite; } .scroll-row-left:hover, .scroll-row-right:hover { animation-play-state: paused; } @keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .typing-cursor { display: inline-block; width: 1px; height: 1em; background: currentColor; animation: cursorBlink 0.8s step-end infinite; margin-left: 1px; vertical-align: text-bottom; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .shimmer-sweep { position: relative; overflow: hidden; } .shimmer-sweep::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, var(--accent-alt-tint-08) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 4s ease-in-out infinite; pointer-events: none; } /* Draw arrow animation */ .draw-arrow path, .draw-arrow line, .draw-arrow polyline { stroke-dasharray: 500; stroke-dashoffset: 500; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .draw-arrow.animated path, .draw-arrow.animated line, .draw-arrow.animated polyline { animation: linedraw 1.5s ease forwards; } .arrow-gradient { stroke: url(#cb-gradient); } .draw-arrow-thick path { stroke-width: 3; } /* Hero slide-up elements */ .hero-slide-up { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .hero-slide-up.animated { opacity: 1; transform: translateY(0); } .count-up { font-variant-numeric: tabular-nums; } /* Logo hover grid */ .logo-item { transition: var(--transition-base); } .logo-grid:hover .logo-item:not(:hover) { opacity: 0.4; } .logo-item:hover { transform: scale(1.1); } /* Logo tile (integration grid) */ .logo-tile { display: flex; align-items: center; justify-content: center; width: 130px; height: 130px; background: white; border-radius: 20px; border: 1px solid var(--grey-250); flex-shrink: 0; padding: 24px; transition: border-color 0.3s ease; } .logo-tile:hover { border-color: #d0d0d0; } .logo-tile img { max-width: 80px; max-height: 60px; object-fit: contain; } /* Dot grid overlay */ .dot-grid-bg { position: relative; overflow: hidden; } .dot-grid-bg::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, var(--accent) 1px, transparent 0), radial-gradient(circle at 15px 15px, var(--accent-alt) 1px, transparent 0); background-size: 28px 28px; opacity: 0.05; pointer-events: none; z-index: 0; } /* Hub connection lines */ .hub-line { stroke: rgba(255, 255, 255, 0.08); stroke-width: 1.5; fill: none; } .hub-line-glow { stroke: url(#hub-gradient); stroke-width: 2; fill: none; stroke-dasharray: 200; stroke-dashoffset: 200; } .hub-line-glow.animated { animation: linedraw 1.2s ease forwards; } /* Glow dot */ .glow-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--accent-alt); filter: blur(2px); box-shadow: 0 0 12px var(--accent-alt), 0 0 24px var(--accent-alt); position: absolute; opacity: 0; } @keyframes travelDot { from { offset-distance: 0%; } to { offset-distance: 100%; } } .glow-dot.traveling { opacity: 1; animation: travelDot 1.5s ease-in-out forwards; } /* SR only */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Form inputs (CB3 style) */ form input:not([type="submit"]), form textarea { border: 1px solid var(--medium-light); padding: 10px 18px; border-radius: var(--radius-lg); font-family: var(--font-body); font-size: 18px; transition: border-color 0.2s; } form input:not([type="submit"]):focus, form textarea:focus { border-color: var(--accent); } button.brightspot-text-toggle { color: var(--accent); } /* =================================== FRONT PAGE — SECTIONS =================================== */ /* --- Testimonials --- */ #testimonials { padding: 6rem 0; position: relative; overflow: hidden; } #testimonials--header { text-align: center; max-width: 48rem; margin: 0 auto 4rem; } #testimonials--header h2, #pricing--content h2, #problem--header h2, #features--header h2 { font-size: clamp(2.25rem, 4vw, 3rem); letter-spacing: -0.025em; line-height: 1.25; color: var(--strong); margin-bottom: var(--space-6); } #testimonials--underline { display: inline-block; position: relative; } #testimonials--underline svg { position: absolute; left: 0; right: 0; bottom: -4px; width: 100%; height: 8px; } @media (min-width: 1024px) { #testimonials { padding: 8rem 0; } } /* --- Pricing CTA --- */ #pricing:has(#pricing--content) { margin-top: var(--space-10); padding: 6rem 0; } #pricing--content { text-align: center; max-width: 48rem; margin: 0 auto; } #pricing--content > p { font-size: 1.25rem; max-width: 42rem; margin: 0 auto 2.5rem; line-height: 1.625; } #pricing--content .button { font-size: 18px; padding: 16px 40px; } #pricing--trust { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); margin-top: var(--space-7); font-size: 14px; } #pricing--trust span { display: flex; align-items: center; gap: var(--space-2); } @media (min-width: 640px) { #pricing--trust { flex-direction: row; } } @media (min-width: 1024px) { #pricing:has(#pricing--content) { padding: 8rem 0; } } /* --- Hero (front-page overrides to the shared .hero component) --- */ .home .hero { padding-bottom: 12rem; } .home .hero > img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 150%; max-width: 1600px; height: auto; } .home .hero--headline h1 { letter-spacing: -0.025em; } .home .hero--headline p:not(.brow) { font-size: 1.5rem; line-height: 1.375; } .home .hero--headline p strong { color: var(--accent); font-weight: 600; } .hero--cta { margin-bottom: var(--space-6); } .hero--proof { display: flex; justify-content: center; margin: 0 auto var(--space-10) auto; } .hero--proof .brightspot-highlight-rotator-slide { margin: 0 auto; } .hero--proof .brightspot-highlight-rotator-text { font-size: 1.125rem; line-height: 1.2rem; color: var(--strong); } .hero--proof .brightspot-highlight-rotator-name { display: block; color: var(--medium); margin: 0; font-size: 1rem; } .mini-testimonials { display: inline-flex; align-items: center; gap: var(--space-3); padding: 0.625rem 1.25rem; background: var(--white); border-radius: var(--radius-pill); box-shadow: 0 2px 20px rgba(24, 90, 157, 0.08); border: 1px solid var(--grey-150); } .mini-testimonials .stars { display: flex; gap: 2px; } .mini-testimonials .stars svg { width: 14px; height: 14px; color: var(--warning); fill: currentColor; } .mini-testimonials .quotes { position: relative; height: 1.5em; font-size: 14px; } .mini-testimonials .quote { position: absolute; left: 0; top: 0; opacity: 0; transition: var(--transition-opacity); white-space: nowrap; } .mini-testimonials .quote.active { opacity: 1; } /* --- Problem --- */ #problem { padding: 6rem 0; } #problem--header { text-align: center; max-width: 52rem; margin: 0 auto 4rem; } #problem--grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); max-width: 64rem; margin: 0 auto; } .problem--item { padding: 0 1rem; } .problem--icon { width: 3.5rem; height: 3.5rem; display: flex; margin-bottom: var(--space-2); } .problem--item h3 { font-size: 1.5rem; color: var(--strong); margin-bottom: var(--space-3); } .problem--item p { font-size: 1.0625rem; } /* Transition arrow */ #transition-arrow { text-align: center; padding: 4rem 0; } #transition-arrow p { font-family: var(--font-mono); font-size: 1.5rem; color: var(--strong); margin-bottom: var(--space-9); letter-spacing: -0.07em; } #transition-arrow .draw-arrow { width: 5rem; margin: 0 auto; display: block; transform: rotate(90deg); } #transition-arrow .draw-arrow path { stroke-dasharray: none; stroke-dashoffset: 0; } @media (min-width: 768px) { #problem--grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { #problem { padding: 8rem 0; } #transition-arrow { padding: 6rem 0; } } /* --- Features Grid --- */ #features { padding: 6rem 0; background: var(--section-alt); position: relative; } #features--header { text-align: center; max-width: 56rem; margin: 0 auto 4rem; } #features--header .brow.alt { color: var(--accent-alt); } #features--header > p { font-size: 1.25rem; line-height: 1.75; } #features--grid { display: grid; grid-template-columns: 1fr; gap: 0; } #features--grid .divider-cell { border-bottom: var(--border-soft); display: flex; flex-direction: column; padding: 2.5rem 0; } @media (min-width: 1024px) { #features--grid .divider-cell { padding: 4rem 2.5rem; } } #features--grid .divider-cell h3 { font-size: 1.7rem; margin-bottom: var(--space-2); } #features--grid .divider-cell p, #features--grid .divider-cell li { font-size: 1.125rem; line-height: 1.625; } #features--grid .divider-cell svg.mb-5 { display: none; } /* Arrow link in cells */ .arrow-link { margin-top: auto; padding-top: var(--space-6); } .arrow-link a { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); border: 1px solid rgba(24, 90, 157, 0.2); color: var(--accent); text-decoration: none; transition: var(--transition-bg); } .arrow-link a:hover { background: var(--accent-tint-05); } .arrow-link svg { width: 1rem; height: 1rem; } /* Features count cells (row 1) */ .features--count { font-size: clamp(2.25rem, 4vw, 3rem); font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.07em; margin-bottom: var(--space-4); background: linear-gradient(135deg, var(--accent) 0%, var(--accent-alt) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Arrow link (text + horizontal draw-arrow) — reusable */ .link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent); font-family: var(--font-mono); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; white-space: nowrap; transition: gap 0.3s ease; } .link-arrow:hover { gap: var(--space-3); color: var(--accent); } .link-arrow .draw-arrow { width: 4rem; flex-shrink: 0; } .link-arrow .draw-arrow path { stroke-dasharray: none; stroke-dashoffset: 0; } /* View all features */ #features--view-all { text-align: center; margin-top: var(--space-9); } @media (min-width: 1024px) { #features { padding: 8rem 0; } #features--grid { grid-template-columns: repeat(6, 1fr); } #features--grid .divider-cell { border-right: var(--border-soft); } #features--grid .divider-cell.col-2 { grid-column: span 2; } #features--grid .divider-cell.col-3 { grid-column: span 3; } #features--grid .divider-cell.col-4 { grid-column: span 4; } #features--grid .divider-cell.col-6 { grid-column: span 6; } #features--grid .divider-cell.row-end { border-right: none; } #features--grid .divider-cell.row-last { border-bottom: none; } #features--grid .divider-cell.full-width { border-right: none; } } /* Split row — two equal columns side by side in full-width cells */ .features--split-row { display: flex; flex-direction: column; gap: var(--space-7); } @media (min-width: 1024px) { .features--split-row { flex-direction: row; gap: var(--space-10); align-items: flex-start; } .features--split-row > * { flex: 1 1 0%; } } /* Animated checkboxes (reusable) */ #checklist { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--space-4); row-gap: 0.375rem; } .check-item { display: flex; align-items: center; gap: var(--space-2); font-size: 0.75rem; color: var(--strong); } .check-box { width: 1rem; height: 1rem; border-radius: var(--radius-sm); border: 2px solid var(--grey-300); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition-base); } .check-mark { width: 0.625rem; height: 0.625rem; opacity: 0; transition: var(--transition-opacity); } /* --- Integrations Scroll --- */ #integrations-scroll { display: flex; flex-direction: column; overflow: hidden; padding: 3rem 0; } #integrations-scroll--plugins { order: 1; display: flex; flex-direction: column; gap: var(--space-3); opacity: 0.75; } #integrations-scroll--content { order: 2; margin: 2rem 0; position: relative; display: flex; align-items: center; justify-content: center; z-index: 10; } #integrations-scroll--platforms { order: 3; display: flex; flex-direction: column; gap: var(--space-3); opacity: 0.75; } @media (min-width: 1024px) { #integrations-scroll { display: block; position: relative; padding: 8rem 0; } #integrations-scroll--plugins, #integrations-scroll--platforms { position: absolute; top: 0; bottom: 0; width: 50%; justify-content: center; margin: 0; } #integrations-scroll--plugins { left: 0; } #integrations-scroll--platforms { right: 0; } #integrations-scroll--content { margin: 0; } #integrations-scroll--card { box-shadow: var(--shadow-elevated); } } .integrations-scroll--fade-right { position: absolute; right: 0; top: 0; bottom: 0; width: 6rem; z-index: 10; background: linear-gradient(to left, var(--white), transparent); } .integrations-scroll--fade-left { position: absolute; left: 0; top: 0; bottom: 0; width: 6rem; z-index: 10; background: linear-gradient(to right, var(--white), transparent); } #integrations-scroll--card { text-align: center; max-width: 38rem; margin: 0 auto; padding: 3rem; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border-radius: 1.5rem; position: relative; } #integrations-scroll--card > * { position: relative; z-index: 10; } @media (min-width: 1024px) { #integrations-scroll--card { padding-bottom: 9rem; } #integrations-scroll--card:before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: url(images/city.svg) bottom center / auto 100% no-repeat white; z-index: 0; opacity: 0.4; border-radius: 1.5rem; } } #integrations-scroll--card h2 { letter-spacing: -0.025em; color: var(--strong); line-height: 1.1; margin-bottom: var(--space-6); } #integrations-scroll--card > p { font-size: 1.25rem; max-width: 42rem; margin: 0 auto 2.5rem; line-height: 1.625; } #integrations-scroll .logo-scroll-tile { width: 120px; height: 68px; } #integrations-scroll .logo-scroll-tile img { max-width: 90px; max-height: 54px; object-fit: contain; } @media (min-width: 640px) { #integrations-scroll--card h2 { font-size: 2.25rem; } } @media (min-width: 768px) { #integrations-scroll--card h2 { font-size: 2.8rem; } } @media (min-width: 1024px) { #integrations-scroll { padding: 8rem 0; } } /* --- How It Works --- */ #how { padding: 6rem 0; } #how--header { text-align: center; max-width: 48rem; margin: 0 auto 5rem; } #how--header h2 { font-size: clamp(2.25rem, 4vw, 3rem); letter-spacing: -0.025em; color: var(--strong); line-height: 1.25; } #how--steps { display: flex; flex-direction: column; gap: 9rem; } .how--step { display: flex; flex-direction: column; align-items: center; gap: var(--space-7); } .how--step-text { flex: 1; } .how--step-mockup { width: 100%; flex: 1; } .how--step-badge { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); } .how--step-number { width: 3rem; height: 3rem; border-radius: var(--radius-full); background: var(--accent); display: flex; align-items: center; justify-content: center; color: var(--white); font-family: var(--font-mono); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.07em; } .how--step-label { font-family: var(--font-mono); font-size: 14px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--medium); font-weight: 600; } #how .how--step h3 { font-size: 1.5rem; margin-bottom: var(--space-4); } .how--step p { font-size: 1.125rem; line-height: 1.625; margin-bottom: var(--space-6); } @media (min-width: 768px) { .how--step h3 { font-size: 1.5rem; } } @media (min-width: 1024px) { #how { padding: 8rem 0; } .how--step { flex-direction: row; gap: 5rem; } /* Step 2 already has mockup first in HTML source — no reverse needed */ } /* Faux browser chrome (reusable) */ .browser-chrome { background: var(--white); border-radius: var(--radius-2xl); border: 1px solid var(--grey-150); overflow: hidden; box-shadow: var(--shadow-elevated); } .browser-chrome.wp-admin-bg { background: #F0F0F1; } .browser-chrome--titlebar { display: flex; align-items: center; gap: var(--space-2); padding: 0.75rem 1.25rem; background: var(--grey-100); border-bottom: 1px solid var(--grey-150); } .browser-chrome--dots { display: flex; gap: 6px; } .browser-chrome--dots span { width: 10px; height: 10px; border-radius: var(--radius-full); } .browser-chrome--dots span:nth-child(1) { background: #fca5a5; } .browser-chrome--dots span:nth-child(2) { background: #fcd34d; } .browser-chrome--dots span:nth-child(3) { background: #86efac; } .browser-chrome--url { margin-left: var(--space-3); font-size: 10px; color: var(--medium); font-family: var(--font-mono); letter-spacing: -0.07em; } /* --- FAQ --- */ #faq { padding: 6rem 0; } #faq--container { max-width: 650px; margin: 0 auto; padding: 0 5%; } #faq--header { text-align: center; margin-bottom: var(--space-9); } #faq--header h2 { letter-spacing: -0.025em; color: var(--strong); line-height: 1.25; } #faq--list { border-top: 1px solid var(--grey-250); } .faq-item { border-bottom: 1px solid var(--grey-250); } .faq-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; font-size: inherit; } .faq-item button span { font-family: var(--font-mono); font-weight: 700; color: var(--strong); font-size: 1rem; letter-spacing: -0.07em; } .faq-chevron { width: 1.25rem; height: 1.25rem; color: var(--medium); flex-shrink: 0; margin-left: var(--space-4); transition: transform 0.3s ease; } .faq-item.open .faq-chevron { transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .faq-item.open .faq-answer { max-height: 500px; padding-bottom: var(--space-5); } .faq-answer p { font-size: 18px; } .faq-answer p + p { margin-top: var(--space-3); } .faq-answer a { color: var(--accent); } .faq-answer a:hover { text-decoration: underline; } #faq--contact { margin-top: var(--space-9); max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; } #faq--contact h3 { margin-bottom: var(--space-5); } #faq--contact .signature { align-items: flex-start; justify-content: center; text-align: left; margin: 0 auto 1.25rem; font-size: 1rem; } #faq--contact .signature img { flex-shrink: 0; } @media (min-width: 1024px) { #faq { padding: 8rem 0; } } /* Line break — block on desktop, inline on mobile */ .break { display: inline; } @media (min-width: 768px) { .break { display: block; } } /* =================================== FEATURES — INTERNAL COMPONENTS =================================== */ /* Arrow link with horizontal draw-arrow (reusable) */ /* View all features */ #features--view-all { text-align: center; margin-top: var(--space-9); } /* Commerce data image */ .features--preview { position: relative; height: 200px; overflow: hidden; margin-bottom: var(--space-4); } .features--preview img { border-radius: var(--radius-xl); margin: 0 auto; display: block; } .features--preview-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 4rem; pointer-events: none; background: linear-gradient(to bottom, transparent 0%, var(--section-alt) 85%); } /* Enhanced conversions feed — generic base */ .ec-feed { position: relative; overflow: hidden; } .ec-feed--inner { display: flex; flex-direction: column; gap: 0.625rem; } .ec-feed--fade { position: absolute; left: 0; right: 0; bottom: 0; height: 6rem; z-index: 10; pointer-events: none; } .ec-feed--compact { height: 200px; margin-bottom: var(--space-4); } .ec-feed--compact .ec-feed--fade { background: linear-gradient(to bottom, transparent 0%, var(--section-alt) 85%); } .ec-feed--panel { height: 320px; background: var(--white); border-radius: var(--radius-2xl); padding: var(--space-4); border: var(--border-soft); box-shadow: var(--shadow-elevated); } .ec-feed--panel .ec-feed--fade { background: linear-gradient(to bottom, transparent 0%, var(--white) 85%); } /* Journey events panel */ .journey-panel { background: var(--grey-100); border-radius: var(--radius-xl); overflow: hidden; border: var(--border-soft); } .journey-panel--header { background: var(--accent); padding: 0.625rem 1rem; display: flex; align-items: center; justify-content: space-between; } .journey-panel--header-title { display: flex; align-items: center; gap: var(--space-2); } .journey-panel--header-title svg { width: 14px; height: 14px; color: rgba(255,255,255,0.8); } .journey-panel--header-title span { font-size: 12px; font-weight: 600; color: var(--white); } .journey-panel--close { color: rgba(255,255,255,0.5); font-size: 14px; } #journey-events > * + *, .journey-anim > * + * { border-top: var(--border-soft); } /* Journey row layout */ .features--journey-row { align-items: stretch; } @media (min-width: 1024px) { .features--journey-panel { flex-shrink: 0; flex: 1.2; max-width: 32rem; } .features--journey-text { flex: 1; display: flex; flex-direction: column; } } /* Tools & reports */ #features--grid .col-4 { overflow: hidden; position: relative; } .features--tools-row { display: flex; flex-direction: column; height: 100%; } .features--mockup-float { display: none; } @media (min-width: 1024px) { .features--tools-row { flex-direction: row; } .features--mockup-float { display: block; position: absolute; right: -30px; top: 20px; bottom: -30px; width: 55%; } .features--mockup-float img { border-radius: var(--radius-xl); box-shadow: 0 8px 30px var(--accent-tint-15); transform: rotate(4deg); transform-origin: center; height: 100%; width: 100%; object-fit: cover; object-position: left; } .features--tools-content { position: relative; z-index: 10; max-width: 50%; display: flex; flex-direction: column; } } /* Tools check list */ .features--checklist { font-size: 14px; } .features--checklist li { display: flex; align-items: center; gap: var(--space-2); list-style: none; margin-left: 0; } .features--checklist li + li { margin-top: 0.375rem; } .features--checklist svg { width: 0.75rem; height: 0.75rem; color: var(--accent-alt); flex-shrink: 0; } /* Email preview */ .features--email-preview { border-radius: var(--radius-xl); border: var(--border-soft); margin-top: var(--space-4); } /* =================================== HOW SECTION — MOCKUP INTERNALS =================================== */ /* Step demos */ #step1-demo { padding: var(--space-6); } /* Step 1 plugin card */ .step1-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--lightest); border-radius: var(--radius-xl); border: var(--border-soft); margin-bottom: var(--space-4); transition: all 0.5s ease; } .step1-card--icon { width: 3.5rem; height: 3.5rem; border-radius: var(--radius-xl); background: linear-gradient(to bottom right, var(--accent), var(--accent-alt)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .step1-card--icon span { color: var(--white); font-size: 1.125rem; font-weight: 700; } .step1-card--info { flex: 1; } .step1-card--info p:first-child { font-weight: 600; color: var(--strong); margin-bottom: 0; } .step1-card--info p:last-child { font-size: 12px; margin: 0; } .step1-card--btn { padding: 0.5rem 1rem; background: #2271B1; color: var(--white); font-size: 12px; font-weight: 700; border-radius: var(--radius-lg); cursor: default; transition: all 0.5s ease; border: none; white-space: nowrap; } .step1-success { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--accent-alt); font-weight: 600; } .step1-success svg { width: 1rem; height: 1rem; } /* Mockup rows (platform/plugin rows in step 2 & 3) */ .mockup-row { background: var(--white); border-radius: var(--radius-lg); border: 1px solid #C3C4C7; padding: var(--space-4); } .mockup-row--header { display: flex; align-items: center; justify-content: space-between; } .mockup-row--header > span { font-size: 14px; font-weight: 600; color: var(--ink-wp); } .mockup-row.disabled .mockup-row--header > span { font-weight: 400; color: var(--medium); } /* Mockup toggle */ .mockup-toggle { width: 2rem; height: 18px; border-radius: var(--radius-pill); background: var(--grey-300); display: flex; align-items: center; padding: 0 3px; cursor: default; transition: background-color 0.3s ease; flex-shrink: 0; } .mockup-toggle div { width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--white); transition: var(--transition-base); } .mockup-toggle.on { background: var(--accent-alt); justify-content: flex-end; } /* Mockup settings panel */ .mockup-settings { overflow: hidden; } .mockup-settings--inner { padding-top: var(--space-3); } .mockup-settings--inner > * + * { margin-top: var(--space-2); } .mockup-settings--checks { padding: 5px 0.75rem 0.75rem; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--space-4); row-gap: 0.375rem; } /* Mockup form inputs */ .mockup-input { position: relative; height: 30px; background: var(--white); border: 1px solid #8C8F94; border-radius: var(--radius-sm); padding: 0 0.5rem; display: flex; align-items: center; } .mockup-input-row { display: flex; gap: var(--space-2); } .mockup-input-row > div { flex: 1; } .mockup-label { display: block; font-size: 10px; color: #646970; font-weight: 500; margin-bottom: 4px; } .mockup-typein, .mockup-ga4-id { font-size: 12px; font-family: monospace; color: var(--ink-wp); font-weight: 600; } .mockup-cursor { width: 1px; height: 14px; background: var(--ink-wp); margin-left: 1px; } .mockup-oauth-btn { height: 30px; background: var(--white); border: 1px solid #8C8F94; border-radius: var(--radius-sm); padding: 0 0.75rem; display: flex; align-items: center; gap: var(--space-2); font-size: 11px; font-weight: 500; color: var(--ink-wp); cursor: default; transition: var(--transition-base); flex-shrink: 0; } .mockup-oauth-btn svg { width: 14px; height: 14px; } .mockup-advanced-link { font-size: 10px; color: #2271B1; font-weight: 500; } /* Step 3 woo checks */ #step3-woo-checks { overflow: hidden; } /* City skyline */ #hero--city { display: none; } @media (min-width: 1024px) { #hero--city { display: block; position: relative; z-index: 1; margin-top: -200px; max-width: 2000px; margin-left: auto; margin-right: auto; opacity: 0.4; pointer-events: none; } #hero--city img { width: 100%; display: block; } } /* Line break — block on desktop, inline on mobile */ .break { display: inline; } @media (min-width: 768px) { .break { display: block; } } /* Journey event rows (JS-generated) */ .journey-event { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: 0.625rem 1rem; } .journey-event--conversion { background: var(--accent-tint-05); } .journey-event--content { min-width: 0; } .journey-event--type { font-size: 11px; color: var(--strong); } .journey-event--conversion .journey-event--type { font-weight: 600; color: var(--accent); } .journey-event--type span { color: var(--accent); } .journey-event--detail { font-size: 9px; color: var(--medium); } .journey-event--detail span { color: var(--accent); } .journey-event--path { font-size: 9px; color: var(--medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .journey-event--time { font-size: 9px; color: var(--medium); flex-shrink: 0; white-space: nowrap; margin-top: 2px; text-align: right; } .journey-event--duration, .journey-event--time-on-page { margin-left: 0.5em; font-size: 9px; color: var(--medium); } .journey-event--time-on-page { font-style: italic; } /* Icon SVGs (reusable) */ .icon-check { width: 1rem; height: 1rem; color: var(--accent-alt); flex-shrink: 0; } .icon-circle-check { width: 1rem; height: 1rem; color: var(--accent-alt); flex-shrink: 0; } .icon-star { width: 14px; height: 14px; color: var(--warning); fill: currentColor; } /* EC bento card containment (front page) */ #enhanced-conv-card { min-width: 0; overflow: hidden; } /* Enhanced conversions card (JS-generated) */ .ec-card { background: var(--white); border-radius: var(--radius-xl); padding: 12px; display: flex; align-items: center; gap: 16px; border: 2px solid var(--grey-200); transition: opacity 0.4s ease, border-color 0.3s ease, transform 0.5s ease; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; flex-shrink: 0; max-width: 100%; position: relative; } .ec-card--dimmed { opacity: 0.45; } .ec-card--photo { width: 48px; height: 48px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; transition: filter 0.6s ease; } .ec-card--info { flex: 1; min-width: 0; overflow: hidden; } .ec-card--name { font-size: 13px; font-weight: 600; color: var(--strong); margin-bottom: 2px; } .ec-card--field { font-size: 11px; color: var(--medium); font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; min-width: 0; } .ec-card--field + .ec-card--field { margin-top: 1px; } .ec-card--status { display: flex; align-items: center; gap: 5px; flex-shrink: 0; opacity: 0; transition: var(--transition-opacity); background: var(--accent); padding: 8px 26px 8px 24px; border-radius: 20px; box-shadow: 0 2px 8px rgba(24, 90, 157, 0.25); position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2; } .ec-card--status span { font-size: 12px; font-weight: 600; color: var(--white); white-space: nowrap; } /* Mockup OAuth row and input columns */ .mockup-oauth-row { display: flex; align-items: center; gap: var(--space-3); } .mockup-input-col { flex: 1; } /* =================================== FEATURES PAGE =================================== */ /* Core features — alternating rows */ #features-core { padding: 6rem 0; background: var(--section-alt); } /* Feature row — alternating layout */ .feature-row { display: flex; flex-direction: column; gap: var(--space-7); } .feature-row--text { flex: 1; } .feature-row--text h3 { font-size: 1.5rem; margin-bottom: var(--space-4); } .feature-row--text p { font-size: 1.125rem; line-height: 1.625; margin-bottom: var(--space-4); } .feature-row--text p.note { font-size: 0.85rem; color: var(--medium); font-style: italic; } .feature-row--text .link-arrow { margin-top: var(--space-2); } .feature-row--visual { flex: 1; min-width: 0; } .feature-row--visual > *:not(.image-overlay) { border-radius: var(--radius-2xl); box-shadow: var(--shadow-elevated); overflow: hidden; } .feature-row--image { border-radius: var(--radius-xl); box-shadow: var(--shadow-elevated); width: 100%; height: auto; } .feature-mockup-demo { padding: 1rem 1.25rem; } .feature-mockup-demo > * + * { margin-top: var(--space-3); } /* Standalone variant — used without a .browser-chrome wrapper */ .feature-mockup-demo--standalone { background: #f1f5f9; padding: var(--space-6); } /* Checklist for conversion types */ .feature-checklist { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--space-4); row-gap: var(--space-2); background: var(--white); border-radius: var(--radius-2xl); padding: var(--space-7); border: var(--border-soft); box-shadow: var(--shadow-elevated); } @media (min-width: 1024px) { #features-core { padding: 8rem 0; } .feature-row { flex-direction: row; gap: 5rem; align-items: center; } } /* Additional tools — 3-column grid */ #features-tools { padding: 6rem 0; } #features-tools--grid { display: grid; grid-template-columns: 1fr; gap: var(--space-9); } .features-tool h3 { font-size: 1.25rem; margin-bottom: var(--space-2); } .features-tool p { font-size: 1rem; line-height: 1.625; margin-bottom: var(--space-3); } .features-tool--image { border-radius: var(--radius-lg); border: var(--border-soft); margin-bottom: var(--space-4); width: 100%; height: 180px; object-fit: cover; object-position: top left; } @media (min-width: 1024px) { #features-tools { padding: 8rem 0; } #features-tools--grid { grid-template-columns: repeat(3, 1fr); } } /* EC feed — prevent hash overflow */ .ec-feed, .ec-feed--inner, .ec-feed--inner > *, .ec-card, .ec-card--info, .ec-card--field { max-width: 100%; overflow: hidden; min-width: 0; } /* EC feed in feature rows — explicit width containment */ .feature-row--visual .ec-feed { width: 100%; box-sizing: border-box; } /* Consent banner demo animation */ .consent-demo--page { position: relative; padding: var(--space-4); background: var(--white); min-height: 280px; overflow: hidden; } .consent-demo--nav { display: flex; gap: var(--space-4); align-items: center; margin-bottom: var(--space-6); padding-bottom: var(--space-3); border-bottom: 1px solid var(--grey-150); } .consent-demo--bar { height: 8px; background: var(--grey-200); border-radius: var(--radius-sm); } .consent-demo--bar.large { height: 14px; background: var(--grey-300); margin-bottom: var(--space-2); } .consent-demo--hero { margin-bottom: var(--space-6); } .consent-demo--box { width: 35%; height: 24px; background: var(--accent); border-radius: var(--radius-sm); margin-top: var(--space-3); opacity: 0.3; } .consent-demo--cols { display: flex; gap: var(--space-3); } .consent-demo--block { flex: 1; height: 60px; background: var(--grey-150); border-radius: 6px; } /* Consent banner popup */ .consent-demo--banner { position: absolute; bottom: 1rem; right: 1rem; background: var(--white); border: var(--border-soft); border-radius: var(--radius-lg); padding: 12px 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; max-width: 220px; } .consent-demo--banner.visible { opacity: 1; transform: translateY(0); } .consent-demo--banner p { font-size: 11px; color: var(--strong); font-weight: 600; margin: 0 0 8px; line-height: 1.3; } .consent-demo--banner-buttons { display: flex; gap: 6px; } .consent-demo--btn-accept { font-size: 10px; font-weight: 700; color: var(--white); background: var(--accent-alt); padding: 5px 14px; border-radius: var(--radius-sm); cursor: default; transition: transform 0.15s ease; } .consent-demo--btn-accept.clicked { transform: scale(0.93); } .consent-demo--btn-decline { font-size: 10px; font-weight: 500; padding: 5px 10px; cursor: default; } /* Tracking active indicator */ .consent-demo--tracking { position: absolute; bottom: 1rem; right: 1rem; background: var(--accent); color: var(--white); font-size: 10px; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 8px 14px; border-radius: 6px; display: flex; align-items: center; gap: 6px; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; box-shadow: 0 4px 12px rgba(24, 90, 157, 0.3); } .consent-demo--tracking.visible { opacity: 1; transform: translateY(0); } .consent-demo--tracking .icon-check { width: 12px; height: 12px; color: var(--white); } /* Features page — 3-column counts grid */ #features-core--counts { display: grid; grid-template-columns: 1fr; gap: var(--space-9); margin-bottom: var(--space-13); } .features-core--count-item h3 { font-size: 1.5rem; margin-bottom: var(--space-2); } .features-core--count-item p { font-size: 1.125rem; line-height: 1.625; margin-bottom: var(--space-3); } @media (min-width: 768px) { #features-core--counts { grid-template-columns: repeat(3, 1fr); } } /* Coming soon badge */ .features-tool--coming-soon { opacity: 0.75; } .features-tool--coming-soon h3 span { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white); background: var(--accent-alt); padding: 4px 12px; border-radius: 10px; margin-top: 6px; width: fit-content; } /* =================================== ANALYTICS PAGE =================================== */ /* Platforms grid */ #analytics-platforms { padding: 6rem 0; text-align: center; } @media (min-width: 1024px) { #analytics-platforms { padding: 8rem 0; } } /* Features rows — reuse .feature-row from features page */ #analytics-features, #ads-features, #ct-features, #agencies-features { padding: 6rem 0; background: var(--section-alt); } @media (min-width: 1024px) { #analytics-features, #ads-features, #ct-features, #agencies-features { padding: 8rem 0; } } /* Conversion Journeys page */ #journeys-features { padding: 6rem 0; background: var(--section-alt); } @media (min-width: 1024px) { #journeys-features { padding: 8rem 0; } } /* Hero demo — featured journey animation (same prominence as video) */ .hero--demo { margin-top: var(--space-9); max-width: 540px; margin-left: auto; margin-right: auto; transform: scale(1.35); transform-origin: top center; margin-bottom: var(--space-12); } .journey-panel--featured { box-shadow: var(--shadow-elevated); } /* Hero demo — ec-feed variant (don't scale; ec-feed is already substantial) */ .hero--demo--feed { transform: none; max-width: 640px; margin-bottom: var(--space-10); } /* Hero demo — order receipt SVG variant */ .hero--demo--receipt { transform: none; max-width: 640px; margin-bottom: var(--space-10); } .hero--demo--receipt img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 5px rgba(53,69,87,0.07)) drop-shadow(0 16px 12px rgba(53,69,87,0.1)) drop-shadow(0 34px 24px rgba(53,69,87,0.13)); } /* Ecommerce — per-platform format stack (3 layered code panels) */ .platform-format-stack { min-height: 380px; } .platform-format-card { background: #0f172a; border-radius: 0.875rem; box-shadow: var(--shadow-elevated); overflow: hidden; font-family: 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', monospace; width: 58%; } .platform-format-card--head { padding: 0.625rem 1rem; background: linear-gradient(135deg, var(--accent-alt), var(--accent)); color: var(--white); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; } .platform-format-card--body { margin: 0; padding: 1rem 1.25rem; font-size: 0.75rem; line-height: 1.6; color: #e2e8f0; overflow-x: auto; } .platform-format-card--body code { font-family: inherit; background: none; padding: 0; color: inherit; } .ec-code--key { color: #7dd3fc; } .ec-code--str { color: #86efac; } .ec-code--num { color: var(--warning); } .ec-code--punc { color: #94a3b8; } .platform-format-card--back { position: relative; z-index: 1; } .platform-format-card--mid { position: absolute; top: 5.5rem; left: 21%; z-index: 2; } .platform-format-card--front { position: absolute; top: 11rem; left: 42%; z-index: 3; } @media (max-width: 640px) { .platform-format-stack { min-height: 0; } .platform-format-card { width: 100%; } .platform-format-card--mid, .platform-format-card--front { position: static; margin-top: var(--space-4); left: 0; } } /* Journey plugin tabs */ .journeys-tabs { background: var(--white); border-radius: var(--radius-2xl); border: var(--border-soft); overflow: hidden; box-shadow: var(--shadow-elevated); } .journeys-tabs--nav { display: flex; border-bottom: var(--border-soft); } .journeys-tabs--btn { flex: 1; padding: var(--space-3); font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--medium); background: none; border: none; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; border-bottom: 2px solid transparent; margin-bottom: -1px; } .journeys-tabs--btn:hover { color: var(--strong); } .journeys-tabs--btn.active { color: var(--accent); border-bottom-color: var(--accent); background: rgba(24, 90, 157, 0.03); } .journeys-tabs--panels { position: relative; overflow: hidden; max-height: 320px; } .journeys-tabs--panel { display: none; } .journeys-tabs--panel.active { display: block; } .journeys-tabs--panel img { width: 100%; height: auto; display: block; } /* Agencies — why section */ #agencies-why { padding: 6rem 0; } @media (min-width: 1024px) { #agencies-why { padding: 8rem 0; } } #partner-signup { padding: 6rem 0; } .agencies-form { max-width: 600px; margin: 0 auto; } @media (min-width: 1024px) { #partner-signup { padding: 8rem 0; } } /* Discover grid — insights/outcomes */ #journeys-discover { padding: 6rem 0; } .divider-grid-2x2 { display: grid; grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; } .divider-grid-2x2--item { padding: 2.5rem; } .divider-grid-2x2--item--icon { width: 48px; height: 48px; border-radius: var(--radius-xl); background: var(--accent-alt-tint-15); border: 1px solid var(--accent-alt-tint-35); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); } .divider-grid-2x2--item--icon svg { width: 24px; height: 24px; color: var(--accent-alt); } .divider-grid-2x2--item h3 { margin-bottom: var(--space-2); } .divider-grid-2x2--item p { font-size: 1rem; line-height: 1.625; } @media (min-width: 768px) { .divider-grid-2x2 { grid-template-columns: repeat(2, 1fr); } /* Interior borders only: right on left column, bottom on top row */ .divider-grid-2x2--item:nth-child(odd) { border-right: var(--border-soft); } .divider-grid-2x2--item:nth-child(-n+2) { border-bottom: var(--border-soft); } } @media (min-width: 1024px) { #journeys-discover { padding: 8rem 0; } } /* Abstract divider-grid — column-agnostic. Uses bottom + right borders directly on each cell. The last-row removal selector identifies the leftmost cell of the last row via :nth-last-child(-n+cols):nth-child(cols*n+1) and its following siblings, so it works for any item count (including partial last rows). */ .divider-grid { display: grid; grid-template-columns: 1fr; margin: 0 auto; } .divider-grid--cols-2 { max-width: 820px; } .divider-grid--cols-3 { max-width: 1200px; } .divider-grid--item { padding: 2.5rem; } .divider-grid > .divider-grid--item:not(:last-child) { border-bottom: var(--border-soft); } .divider-grid--item h3 { font-size: 1.5rem; color: var(--strong); margin-bottom: var(--space-2); } .divider-grid--item p { font-size: 1.0625rem; line-height: 1.625; } .divider-grid--item--icon { width: 48px; height: 48px; border-radius: var(--radius-xl); background: var(--accent-alt-tint-15); border: 1px solid var(--accent-alt-tint-35); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); } .divider-grid--item--icon svg { width: 24px; height: 24px; color: var(--accent-alt); } @media (min-width: 768px) { .divider-grid--cols-2 { grid-template-columns: repeat(2, 1fr); } .divider-grid--cols-3 { grid-template-columns: repeat(3, 1fr); } /* Every cell starts with bottom + right dividers */ .divider-grid--cols-2 > .divider-grid--item, .divider-grid--cols-3 > .divider-grid--item { border-bottom: var(--border-soft); } .divider-grid--cols-2 > .divider-grid--item:nth-child(odd) { border-right: var(--border-soft); } .divider-grid--cols-3 > .divider-grid--item:not(:nth-child(3n)) { border-right: var(--border-soft); } /* Remove bottom border from items in the last row (works for partial rows) */ .divider-grid--cols-2 > .divider-grid--item:nth-last-child(-n+2):nth-child(odd), .divider-grid--cols-2 > .divider-grid--item:nth-last-child(-n+2):nth-child(odd) ~ .divider-grid--item, .divider-grid--cols-3 > .divider-grid--item:nth-last-child(-n+3):nth-child(3n+1), .divider-grid--cols-3 > .divider-grid--item:nth-last-child(-n+3):nth-child(3n+1) ~ .divider-grid--item { border-bottom: 0; } } section#setup-videos-list { padding-top: 0; } /* Setup video cards inside divider-grid */ .setup-video-card { display: flex; flex-direction: column; } .setup-video-card--thumb { display: block; margin: 0 0 1.25rem 0; } .setup-video-card--thumb img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); } .setup-video-card h3 { margin: 0 0 1rem 0; } .setup-video-card h3 a { text-decoration: none; color: var(--strong); } .setup-video-card h3 a:hover { color: var(--accent); } .setup-video-card .setup-video--details { margin: 0 0 1.5rem 0; } .setup-video-card--cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2); } /* Platform page — section rhythm */ #platform--features, #platform-journey { padding: 6rem 0; } #platform-journey .feature-row--text h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.15; margin-bottom: var(--space-4); } #platform-journey .feature-row--text .brow { margin-bottom: var(--space-3); } @media (min-width: 1024px) { #platform--features, #platform-journey { padding: 8rem 0; } } /* Conversion Tracking — reasons grid */ #ct-reasons { padding: 6rem 0; background: var(--section-alt); } .ct-reasons--grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } .ct-reasons--icon { width: 48px; height: 48px; border-radius: var(--radius-xl); background: var(--accent-alt-tint-10); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); } .ct-reasons--icon svg { width: 24px; height: 24px; color: var(--accent-alt); } .ct-reasons--item h3 { margin-bottom: var(--space-3); } .ct-reasons--item p { font-size: 1rem; line-height: 1.625; } @media (min-width: 768px) { .ct-reasons--grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { #ct-reasons { padding: 8rem 0; } } /* Conversion Tracking — "What you can track" section */ #ct-why { padding: 6rem 0; } .ct-why--layout { display: flex; flex-direction: column; gap: var(--space-9); } .ct-why--text h2 { font-size: clamp(1.75rem, 4vw, 2.8rem); color: var(--strong); line-height: 1.1; letter-spacing: -0.07em; margin-bottom: var(--space-6); } .ct-why--text p { font-size: 1.125rem; line-height: 1.625; margin-bottom: var(--space-4); } .ct-why--text .button { margin-top: var(--space-4); } .ct-why--events { display: flex; flex-wrap: wrap; gap: 0.625rem; align-content: flex-start; } .ct-event-tag { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.5rem 1rem; background: var(--white); border: var(--border-soft); border-radius: var(--radius-3xl); font-size: 0.9rem; font-weight: 600; color: var(--medium); opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.4s ease, color 0.4s ease; } .ct-event-tag--active { opacity: 1; transform: translateY(0); border-color: var(--accent-alt); color: var(--strong); } .ct-event-tag--check { width: 16px; height: 16px; color: var(--accent-alt); opacity: 0; transition: var(--transition-opacity); } .ct-event-tag--active .ct-event-tag--check { opacity: 1; } @media (min-width: 1024px) { #ct-why { padding: 8rem 0; } .ct-why--layout { flex-direction: row; gap: 5rem; align-items: center; } .ct-why--text { flex: 1; min-width: 0; } .ct-why--events { flex: 1; min-width: 0; } } /* =================================== COMMON PAGE COMPONENTS =================================== */ /* Hero — reusable across all pages */ .hero { position: relative; padding: 3rem 0 6rem; overflow-x: hidden; } .hero--gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--white), var(--white) 60%, var(--section-alt)); pointer-events: none; } .hero .container { position: relative; z-index: 10; } .hero--headline { text-align: center; max-width: 56rem; margin: 0 auto 2rem; } .hero--headline h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); letter-spacing: -0.07em; color: var(--strong); line-height: 1.1; margin-bottom: var(--space-6); } .hero--headline h1 .brow { display: block; letter-spacing: 0.2em; margin-bottom: var(--space-4); } .hero--headline p:not(.brow) { font-size: 1.25rem; max-width: 42rem; margin: 0 auto; line-height: 1.625; } .hero--cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); } .hero--cta-note { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.9375rem; color: var(--medium); background: var(--accent-alt-tint-10); border: 1px solid rgba(67, 206, 162, 0.3); border-radius: var(--radius-3xl); padding: 0.5rem 1rem; white-space: nowrap; } .hero--cta-note svg { width: 18px; height: 18px; color: var(--accent-alt); flex-shrink: 0; } .hero--bg-image { display: block; max-width: 1400px; margin: -190px auto 0; opacity: 0.4; } .hero--circuit-wrap { position: relative; display: flex; align-items: center; justify-content: center; margin-top: var(--space-4); padding: 150px 0; } .hero--circuit-bg { position: absolute; inset: 0; width: 140%; height: auto; object-fit: contain; opacity: 0.4; pointer-events: none; } .hero--circuit-wrap .hero--cta { position: relative; z-index: 2; margin-bottom: 0; } .hero--video { position: relative; max-width: 1095px; margin: 0 auto; } .hero--video-wrap { position: relative; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-elevated); cursor: pointer; margin: 3rem auto; } .hero--video-wrap video { width: 100%; display: block; } .hero--video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--black-a20); transition: var(--transition-opacity); } .hero--video-play-button { width: 5rem; height: 5rem; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px var(--black-a10); transition: transform 0.3s ease; } .hero--video-wrap:hover .hero--video-play-button { transform: scale(1.1); } .hero--video-play-button svg { width: 2rem; height: 2rem; color: var(--accent); margin-left: 3px; } @media (min-width: 1024px) { .hero { padding: 3rem 0 8rem; } } .hero .integration-counts { margin: 3rem 0;} /* ============================================ */ /* Hero divider — reusable full-bleed animated graphic at bottom of .hero */ /* ============================================ */ .hero-divider { position: absolute; left: 50%; bottom: 0; width: 100vw; transform: translateX(-50%); height: clamp(180px, 22vw, 300px); pointer-events: none; z-index: 1; -webkit-mask-image: linear-gradient(to right, transparent 0, var(--black) 4%, var(--black) 99%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, var(--black) 4%, var(--black) 99%, transparent 100%); } .hero-divider--svg { display: block; width: 100%; height: 100%; } /* ---- Analytics page modifier ---- */ .hero-divider--analytics-chart .hero-divider--line { stroke-dasharray: 3500; stroke-dashoffset: 3500; } .hero-divider--analytics-chart .hero-divider--area { opacity: 0; } .hero-divider--analytics-chart .hero-divider--grid, .hero-divider--analytics-chart .hero-divider--grid-h { opacity: 0; } .hero-divider--analytics-chart.is-drawn .hero-divider--grid, .hero-divider--analytics-chart.is-drawn .hero-divider--grid-h { animation: hero-divider-analytics-grid-in 0.8s ease-out forwards; } .hero-divider--analytics-chart.is-drawn .hero-divider--line { animation: hero-divider-analytics-draw 9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards; } .hero-divider--analytics-chart.is-drawn .hero-divider--area { animation: hero-divider-analytics-fill-in 5s ease-out 1.5s forwards; } @keyframes hero-divider-analytics-draw { to { stroke-dashoffset: 0; } } @keyframes hero-divider-analytics-fill-in { to { opacity: 1; } } @keyframes hero-divider-analytics-grid-in { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hero-divider--analytics-chart .hero-divider--line { stroke-dashoffset: 0; animation: none; } .hero-divider--analytics-chart .hero-divider--area { opacity: 1; animation: none; } .hero-divider--analytics-chart .hero-divider--grid, .hero-divider--analytics-chart .hero-divider--grid-h { opacity: 1; animation: none; } } /* ---- Ads page modifier ---- */ .hero-divider--ads-bars .hero-divider--grid, .hero-divider--ads-bars .hero-divider--grid-h { opacity: 0; } .hero-divider--ads-bars .hero-divider--bar { transform: scaleY(0); transform-origin: center bottom; transform-box: fill-box; } .hero-divider--ads-bars.is-drawn .hero-divider--grid, .hero-divider--ads-bars.is-drawn .hero-divider--grid-h { animation: hero-divider-ads-grid-in 0.8s ease-out forwards; } .hero-divider--ads-bars.is-drawn .hero-divider--bar { animation: hero-divider-ads-bar-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(0.6s + var(--i) * 0.15s); } @keyframes hero-divider-ads-grid-in { to { opacity: 1; } } @keyframes hero-divider-ads-bar-grow { to { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .hero-divider--ads-bars .hero-divider--grid, .hero-divider--ads-bars .hero-divider--grid-h { opacity: 1; animation: none; } .hero-divider--ads-bars .hero-divider--bar { transform: scaleY(1); animation: none; } } /* Section header — reusable centered intro */ .section-header { text-align: center; max-width: 56rem; margin: 0 auto 4rem; } .section-header h2 { font-size: clamp(2.25rem, 4vw, 3rem); letter-spacing: -0.07em; color: var(--strong); line-height: 1.25; margin-bottom: var(--space-4); } .section-header p { font-size: 1.125rem; line-height: 1.625; } /* Feature rows container — reusable */ .feature-rows { display: flex; flex-direction: column; gap: 12rem; } @media (min-width: 1024px) { .feature-rows .feature-row:nth-child(even) { flex-direction: row-reverse; } } /* Logo scroll section — reusable for any CPT logo display */ .logo-scroll-section { display: flex; flex-direction: column; gap: var(--space-3); } .logo-scroll-section .logo-scroll-tile { text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease; } .logo-scroll-section .logo-scroll-tile:hover { transform: scale(1.05); border-color: var(--accent-alt); } .logo-scroll-section .logo-scroll-tile img { max-width: 70px; max-height: 40px; object-fit: contain; } /* Logo grid — hashtag interior dividers, header in top-left 2x2 */ /* ---- Logo Grid: base ---- */ .logo-grid { display: grid; grid-auto-rows: 90px; grid-template-columns: repeat(3, 1fr); position: relative; } .logo-grid::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: var(--white); z-index: 1; } .logo-grid--header { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; padding: 2.5rem; } .logo-grid--header h2 { font-size: 1.7rem; letter-spacing: -0.07em; color: var(--strong); line-height: 1.15; margin-bottom: var(--space-3); } .logo-grid--header p { font-size: 1rem; line-height: 1.5; margin: 0; } .logo-grid--logo { display: flex; align-items: center; justify-content: center; padding: var(--space-6); text-decoration: none; transition: var(--transition-bg); } .logo-grid--logo:hover { background: var(--grey-100); } .logo-grid--logo img { max-width: 100px; max-height: 40px; object-fit: contain; } /* All cells get right + bottom border */ .logo-grid > * { border-right: var(--border-soft); border-bottom: var(--border-soft); } /* 3-col mobile (shared): header = cols 1-2 rows 1-2, right edge = col 3 */ .logo-grid > *:nth-child(2), .logo-grid > *:nth-child(3) { border-right: none; } .logo-grid > *:nth-child(n+4):nth-child(3n) { border-right: none; } .logo-grid > *:last-child { border-right: none; } /* ---- Logo Grid: 5-column variant ---- */ @media (min-width: 768px) { .logo-grid--cols-5 { grid-template-columns: repeat(5, 1fr); } /* Reset mobile rules */ .logo-grid--cols-5 > *:nth-child(2), .logo-grid--cols-5 > *:nth-child(3) { border-right: var(--border-soft); } .logo-grid--cols-5 > *:nth-child(n+4):nth-child(3n) { border-right: var(--border-soft); } /* Right edge: remove right border on last item in each row. With header spanning cols 1-2 rows 1-2: Row 1: header(1) + 3 logos (2,3,4) — child 4 is right edge Row 2: header(1 cont) + 3 logos (5,6,7) — child 7 is right edge Row 3+: 5 logos per row — every 5th from child 8 */ .logo-grid--cols-5 > *:nth-child(4), .logo-grid--cols-5 > *:nth-child(7) { border-right: none; } .logo-grid--cols-5 > *:nth-child(n+8):nth-child(5n+2) { border-right: none; } /* Last item always loses right border */ .logo-grid--cols-5 > *:last-child { border-right: none; } } /* ---- Logo Grid: 4-column variant ---- */ @media (min-width: 768px) { .logo-grid--cols-4 { grid-template-columns: repeat(4, 1fr); } /* Reset mobile rules */ .logo-grid--cols-4 > *:nth-child(2), .logo-grid--cols-4 > *:nth-child(3) { border-right: var(--border-soft); } .logo-grid--cols-4 > *:nth-child(n+4):nth-child(3n) { border-right: var(--border-soft); } /* Right edge */ .logo-grid--cols-4 > *:nth-child(3), .logo-grid--cols-4 > *:nth-child(5) { border-right: none; } .logo-grid--cols-4 > *:nth-child(4n+1):nth-child(n+6) { border-right: none; } /* Last item always loses right border */ .logo-grid--cols-4 > *:last-child { border-right: none; } } /* Logo grid — no header variant (pure grid, no spanning header cell) */ .logo-grid--no-header { grid-auto-rows: 90px; } /* Logo grid — text-only fallback for items without images */ .logo-grid--logo span { font-size: 0.8125rem; font-weight: 600; color: var(--medium); text-align: center; line-height: 1.3; } /* Filterable logo grid — dim unmatched items */ .logo-grid--logo.dimmed img, .logo-grid--logo.dimmed span { opacity: 0.2; filter: grayscale(1); } /* Integrations filter buttons */ .integrations-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-bottom: var(--space-9); } .integrations-filter--btn { padding: 0.5rem 1.25rem; border-radius: var(--radius-3xl); border: var(--border-soft); background: transparent; font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 400; color: var(--medium); cursor: pointer; transition: all 0.2s ease; } .integrations-filter--btn:hover { border-color: var(--accent); color: var(--accent); } .integrations-filter--btn.active { background: var(--accent); border-color: var(--accent); color: var(--white); } /* Integrations page section spacing */ #integrations-analytics, #integrations-ads, #integrations-plugins, #integrations-consent { padding: 4rem 0; } #integrations-request { padding: 0 0 4rem; } @media (min-width: 1024px) { #integrations-analytics, #integrations-ads, #integrations-plugins, #integrations-consent { padding: 5rem 0; } } /* CTA banner — dark enclosed section with gradient highlight toward the button */ .cta-banner { background: linear-gradient(135deg, #1a1a2e 0%, var(--strong) 35%, rgba(24, 90, 157, 0.55) 78%, var(--accent-alt-tint-65) 100%); border-radius: var(--radius-2xl); padding: 4rem 6rem; margin-top: var(--space-13); display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; position: relative; overflow: hidden; } .cta-banner > *:not(.cta-banner--blobs) { position: relative; z-index: 2; } #how .cta-banner--content h3, .cta-banner--content h3 { font-size: clamp(1.75rem, 4vw, 2.7rem); color: var(--accent-alt); font-weight: 400; margin-bottom: var(--space-2); } .cta-banner--content p, #how .cta-banner--content p { font-size: 1.35rem; color: var(--white); margin: 0; line-height: 1.5; } .cta-banner .button { flex-shrink: 0; } .cta-banner .button.alt:hover, .cta-banner .wp-block-button.alt:hover { border-color: var(--accent-alt); } @media (min-width: 1024px) { .cta-banner { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-9); } } .cta-banner--blobs { display: none; } /* Dot grid background */ .bg-dots { position: relative; background: radial-gradient(var(--accent-tint-18) 1px, transparent 1px), radial-gradient(var(--accent-tint-18) 1px, var(--grey-50) 1px); background-size: 16px 16px; background-position: 0 0, 8px 8px; } .bg-dots::before, .bg-dots::after { content: ''; position: absolute; left: 0; right: 0; height: 6rem; z-index: 1; pointer-events: none; } .bg-dots::before { top: 0; background: linear-gradient(to bottom, var(--white), transparent); } .bg-dots::after { bottom: 0; background: linear-gradient(to top, var(--white), transparent); } .bg-dots > * { position: relative; z-index: 2; } /* Image overlay — back image behind, front image offset in front */ .image-overlay { position: relative; padding: 2rem 0 3rem 0; } .image-overlay--back { width: 80%; display: block; border-radius: var(--radius-xl); box-shadow: var(--shadow-elevated); } .image-overlay--front { position: absolute; bottom: 0; right: 0; width: 75%; display: block; border-radius: var(--radius-xl); box-shadow: var(--shadow-elevated); } /* Old vs New comparison grid */ #analytics-compare, #ads-compare, #ct-compare, #journeys-compare, #platform-compare { padding: 6rem 0; background: var(--section-alt); } .compare-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); } .compare-card { border-radius: var(--radius-2xl); padding: 2.5rem; } .compare-card--old { background: var(--white); border: var(--border-soft); } .compare-card--new { background: linear-gradient(135deg, var(--strong) 0%, #1a1a2e 100%); color: var(--white); } .compare-card--label { font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-7); padding-bottom: var(--space-4); border-bottom: 1px solid rgba(0,0,0,0.08); } .compare-card--old .compare-card--label { color: var(--medium); } .compare-card--new .compare-card--label { color: var(--accent-alt); border-bottom-color: rgba(255,255,255,0.1); } .compare-card--item { display: flex; gap: var(--space-4); align-items: flex-start; } .compare-card--item + .compare-card--item { margin-top: var(--space-6); } .compare-card--icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; margin-top: 2px; } .compare-card--icon-x { background: #fef2f2; color: #ef4444; } .compare-card--icon-check { background: var(--accent-alt-tint-15); } .compare-card--icon-check .icon-check { width: 14px; height: 14px; color: var(--accent-alt); } .compare-card--item h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: var(--space-1); line-height: 1.3; } .compare-card--old .compare-card--item h4 { color: var(--strong); } .compare-card--new .compare-card--item h4 { color: var(--white); } .compare-card--item p { font-size: 0.95rem; line-height: 1.5; margin: 0; } .compare-card--new .compare-card--item p { color: rgba(255,255,255,0.65); } @media (min-width: 768px) { .compare-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { #analytics-compare, #ads-compare, #ct-compare, #journeys-compare, #platform-compare { padding: 8rem 0; } } /* ----------------------------------- */ /* PARTNER LANDING PAGES (BigScoots, Convesio) */ /* ----------------------------------- */ /* Co-branded logo lockup in hero */ .hero--logos { display: flex; align-items: center; justify-content: center; gap: 1.75rem; margin: 0 0 2rem 0; } .hero--logos img { display: block; max-height: 50px; width: auto; } .hero--logos span { font-size: 2rem; color: var(--medium); line-height: 1; } /* Special-offer badge + line */ .hero--offer { color: var(--strong); margin: 1rem 0 0 0; text-align: center; } .badge-offer { display: inline-block; border: 2px solid var(--accent-alt); color: var(--accent); border-radius: var(--radius-sm); font-size: 0.8125rem; font-weight: 600; padding: 3px 9px; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 10px; vertical-align: middle; } /* Embedded video below hero (oEmbed iframe) */ .hero--embed { max-width: 800px; margin: 2.5rem auto; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-elevated); line-height: 0; } #integration-content .content { max-width: 760px; margin: 0 auto; } .hero--embed iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; } /* Section background helper */ .section--alt { background: var(--section-alt); padding: 6rem 0; } @media (min-width: 1024px) { .section--alt { padding: 8rem 0; } } /* Mid-section header (between grid and rows) */ .section-header--mid { margin-top: var(--space-12); } /* Centered single CTA at section end */ .section-cta-center { text-align: center; margin: 4rem 0 0 0; } /* Partner feature card (inside .divider-grid--cols-3) */ .partner-feature .partner-feature--icon { display: block; width: auto; height: 50px; margin: 0 0 1.25rem 0; } .partner-feature h3 { margin: 0 0 0.5rem 0; } .partner-feature p { margin: 0 0 1rem 0; } .partner-feature p strong { color: var(--accent); } /* "Why it matters" image+text rows */ .partner-reasons { max-width: 900px; margin: 0 auto; } .partner-reasons .feature-row--visual img { display: block; width: 100%; height: auto; box-shadow: none; } /* Enhanced Conversions — supported integrations / platforms list (shortcode output) */ .enhanced-list-wrap { max-width: 1100px; margin: 3rem auto 0; } .enhanced-list-wrap ul.enhanced-integrations, .enhanced-list-wrap ul.enhanced-platforms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } @media (min-width: 640px) { .enhanced-list-wrap ul.enhanced-integrations, .enhanced-list-wrap ul.enhanced-platforms { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .enhanced-list-wrap ul.enhanced-integrations { grid-template-columns: repeat(4, 1fr); } .enhanced-list-wrap ul.enhanced-platforms { grid-template-columns: repeat(3, 1fr); } } .enhanced-list-wrap li { margin: 0; padding: 0; } .enhanced-list-wrap li a { display: block; padding: 0.875rem 1.125rem; background: var(--white); border: var(--border-soft); border-radius: var(--radius-lg); color: var(--body); text-decoration: none; font-weight: 500; transition: all 0.15s ease; } .enhanced-list-wrap li a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } /* Logo display variant */ .enhanced-list-wrap ul.enhanced-list--logos li a { display: flex; align-items: center; justify-content: center; padding: 1.25rem 1rem; min-height: 80px; } .enhanced-list-wrap ul.enhanced-list--logos li a img { display: block; max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; } .ec-supported-note { max-width: 760px; margin: 2.5rem auto 0; text-align: center; font-size: 0.9375rem; color: var(--muted, #64748b); } /* Enhanced Conversions — step 3 attribution flow */ .ec-match-flow { display: flex; flex-direction: column; align-items: stretch; gap: 0; max-width: 380px; margin: 0 auto; } .ec-match-flow--item { display: flex; align-items: center; gap: var(--space-4); background: var(--white); border: var(--border-soft); border-radius: var(--radius-xl); padding: 1rem 1.25rem; box-shadow: 0 4px 14px rgba(0,0,0,0.04); } .ec-match-flow--icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); background: #f1f5f9; color: #475569; } .ec-match-flow--icon svg { width: 1.375rem; height: 1.375rem; } .ec-match-flow--text { flex: 1; min-width: 0; } .how--step p.ec-match-flow--label { margin: 0; font-weight: 600; font-size: 0.9375rem; color: #0f172a; } .how--step p.ec-match-flow--detail { margin: 0; font-size: 0.875rem; color: #64748b; } .ec-match-flow--connector { width: 2px; height: 1.5rem; background: linear-gradient(to bottom, #cbd5e1, #94a3b8); margin: 0 auto; } .ec-match-flow--success { background: linear-gradient(135deg, var(--accent-alt), var(--accent)); border-color: transparent; } .ec-match-flow--success .ec-match-flow--icon { background: rgba(255,255,255,0.2); color: var(--white); } .how--step .ec-match-flow--success p.ec-match-flow--label, .how--step .ec-match-flow--success p.ec-match-flow--detail { color: var(--white); } .how--step .ec-match-flow--success p.ec-match-flow--detail { opacity: 0.9; } /* Enhanced Conversions — Capture / Hash / Match 3-step cards */ .ec-steps { display: grid; grid-template-columns: 1fr; gap: var(--space-6); max-width: 1100px; margin: 4rem auto 0; } @media (min-width: 768px) { .ec-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); } } .ec-step { background: var(--white); border: var(--border-soft); border-radius: var(--radius-2xl); padding: 2.5rem 2rem; position: relative; } .ec-step--num { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--accent-alt), var(--accent)); color: var(--white); font-weight: 700; font-size: 1.25rem; margin-bottom: var(--space-5); } .ec-step h3 { margin: 0 0 0.75rem 0; font-size: 1.5rem; } .ec-step p { margin: 0; }