/** * DRD Elementor Kit * * 1. Tokens – short aliases for Elementor Site Settings globals, plus fallbacks. * 2. Type – .drd-t-* classes, one per Global Font. * 3. Utilities – highlight text, container token presets, button variants. * 4. Widgets – default look of every DRD widget. * * Values come from Site Settings (Global Colors, Global Fonts, Design Tokens). The literal values * below are only fallbacks for when a global has been deleted. Widget style controls write more * specific selectors, so they always win over these defaults. */ /* ------------------------------------------------------------------ 1. Tokens */ /* Defined on body: it carries .elementor-kit-N, where Elementor prints the --e-global-* values. */ body { --drd-c-ink: var(--e-global-color-primary, #1E1E1E); --drd-c-orange: var(--e-global-color-secondary, #D9580A); --drd-c-text: var(--e-global-color-text, #4A4A4A); --drd-c-cta: var(--e-global-color-accent, #F07A2A); --drd-c-orange-deep: var(--e-global-color-drd_orange_deep, #B84A08); --drd-c-orange-dark: var(--e-global-color-drd_orange_dark, #8F3905); --drd-c-peach: var(--e-global-color-drd_peach, #F3A46E); --drd-c-orange-soft: var(--e-global-color-drd_orange_soft, #FDE7D6); --drd-c-orange-wash: var(--e-global-color-drd_orange_wash, #FDEBDD); --drd-c-ink-soft: var(--e-global-color-drd_ink_soft, #3A3A3A); --drd-c-muted: var(--e-global-color-drd_muted, #6B6B6B); --drd-c-white: var(--e-global-color-drd_white, #FFFFFF); --drd-c-cream: var(--e-global-color-drd_cream, #FBF8F5); --drd-c-sand: var(--e-global-color-drd_sand, #F7F4F0); --drd-c-stone: var(--e-global-color-drd_stone, #F4F1ED); --drd-c-chip: var(--e-global-color-drd_chip, #F2EFEB); --drd-c-border: var(--e-global-color-drd_border, #ECE8E3); --drd-c-divider: var(--e-global-color-drd_divider, #E7E1DA); --drd-c-bar: var(--e-global-color-drd_bar, #CFC8C0); /* Captured here so it stays the ink colour inside .drd-dark, where --drd-c-ink turns white. */ --drd-c-night: var(--e-global-color-primary, #1E1E1E); --drd-font-stack: "Helvetica Neue", Arial, sans-serif; /* The orange of the logo's D: warm orange into red-orange. */ --drd-grad-logo: linear-gradient(100deg, #E86200 0%, #EC5410 55%, #F04020 100%); --drd-grad-logo-bar: linear-gradient(90deg, #E86200 0%, #F04020 100%); /* * The logo gradient deepened until white text reads at any size (4.7:1 at its light end, 5.6:1 at * its dark end). For orange surfaces that carry text: primary buttons and accent fields. */ --drd-grad-deep: linear-gradient(100deg, #CC4700 0%, #C0360F 100%); --drd-grad-deep-hover: linear-gradient(100deg, #B23E00 0%, #A42D0C 100%); /* Fallbacks only: Site Settings → Design Tokens prints the live values on .elementor-kit-N. */ --drd-radius-xs: 6px; --drd-radius-sm: 14px; --drd-radius-md: 20px; --drd-radius-lg: 24px; --drd-radius-xl: 28px; --drd-radius-2xl: 32px; --drd-radius-pill: 999px; --drd-space-section: 112px; --drd-space-section-sm: 96px; --drd-space-gutter: 32px; --drd-space-card-pad-lg: 48px; --drd-space-card-pad: 36px; --drd-space-card-pad-md: 28px; --drd-space-card-pad-sm: 24px; --drd-shadow-card: 0 20px 40px -28px rgba(30, 30, 30, 0.25); --drd-shadow-raised: 0 24px 48px -24px rgba(30, 30, 30, 0.22); } @media (max-width: 1024px) { body { --drd-space-section: 88px; --drd-space-section-sm: 80px; --drd-space-card-pad-lg: 40px; --drd-space-card-pad: 32px; } } @media (max-width: 767px) { body { --drd-space-section: 72px; --drd-space-section-sm: 64px; --drd-space-gutter: 20px; --drd-space-card-pad-lg: 28px; --drd-space-card-pad: 24px; --drd-space-card-pad-md: 22px; --drd-space-card-pad-sm: 20px; } } /* ------------------------------------------------------------------ 2. Type */ .elementor-element .drd-t-body { font-family: var(--e-global-typography-text-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-text-font-size, 16px); font-weight: var(--e-global-typography-text-font-weight, 400); line-height: var(--e-global-typography-text-line-height, 1.65); letter-spacing: var(--e-global-typography-text-letter-spacing, normal); text-transform: var(--e-global-typography-text-text-transform, none); } .elementor-element .drd-t-h1 { font-family: var(--e-global-typography-drd_h1-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_h1-font-size, 58px); font-weight: var(--e-global-typography-drd_h1-font-weight, 700); line-height: var(--e-global-typography-drd_h1-line-height, 1.08); letter-spacing: var(--e-global-typography-drd_h1-letter-spacing, -0.02em); text-transform: var(--e-global-typography-drd_h1-text-transform, none); } .elementor-element .drd-t-h2 { font-family: var(--e-global-typography-drd_h2-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_h2-font-size, 42px); font-weight: var(--e-global-typography-drd_h2-font-weight, 700); line-height: var(--e-global-typography-drd_h2-line-height, 1.15); letter-spacing: var(--e-global-typography-drd_h2-letter-spacing, -0.015em); text-transform: var(--e-global-typography-drd_h2-text-transform, none); } .elementor-element .drd-t-h3 { font-family: var(--e-global-typography-drd_h3-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_h3-font-size, 24px); font-weight: var(--e-global-typography-drd_h3-font-weight, 700); line-height: var(--e-global-typography-drd_h3-line-height, 1.3); letter-spacing: var(--e-global-typography-drd_h3-letter-spacing, normal); text-transform: var(--e-global-typography-drd_h3-text-transform, none); } .elementor-element .drd-t-h4 { font-family: var(--e-global-typography-drd_h4-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_h4-font-size, 20px); font-weight: var(--e-global-typography-drd_h4-font-weight, 600); line-height: var(--e-global-typography-drd_h4-line-height, 1.35); letter-spacing: var(--e-global-typography-drd_h4-letter-spacing, normal); text-transform: var(--e-global-typography-drd_h4-text-transform, none); } .elementor-element .drd-t-h5 { font-family: var(--e-global-typography-drd_h5-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_h5-font-size, 18px); font-weight: var(--e-global-typography-drd_h5-font-weight, 600); line-height: var(--e-global-typography-drd_h5-line-height, 1.4); letter-spacing: var(--e-global-typography-drd_h5-letter-spacing, normal); text-transform: var(--e-global-typography-drd_h5-text-transform, none); } .elementor-element .drd-t-h6 { font-family: var(--e-global-typography-drd_h6-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_h6-font-size, 16px); font-weight: var(--e-global-typography-drd_h6-font-weight, 600); line-height: var(--e-global-typography-drd_h6-line-height, 1.5); letter-spacing: var(--e-global-typography-drd_h6-letter-spacing, normal); text-transform: var(--e-global-typography-drd_h6-text-transform, none); } .elementor-element .drd-t-title-lg { font-family: var(--e-global-typography-drd_title_lg-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_title_lg-font-size, 34px); font-weight: var(--e-global-typography-drd_title_lg-font-weight, 700); line-height: var(--e-global-typography-drd_title_lg-line-height, 1.2); letter-spacing: var(--e-global-typography-drd_title_lg-letter-spacing, -0.01em); text-transform: var(--e-global-typography-drd_title_lg-text-transform, none); } .elementor-element .drd-t-title-md { font-family: var(--e-global-typography-drd_title_md-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_title_md-font-size, 26px); font-weight: var(--e-global-typography-drd_title_md-font-weight, 700); line-height: var(--e-global-typography-drd_title_md-line-height, 1.3); letter-spacing: var(--e-global-typography-drd_title_md-letter-spacing, normal); text-transform: var(--e-global-typography-drd_title_md-text-transform, none); } .elementor-element .drd-t-lead { font-family: var(--e-global-typography-drd_lead-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_lead-font-size, 19px); font-weight: var(--e-global-typography-drd_lead-font-weight, 400); line-height: var(--e-global-typography-drd_lead-line-height, 1.65); letter-spacing: var(--e-global-typography-drd_lead-letter-spacing, normal); text-transform: var(--e-global-typography-drd_lead-text-transform, none); } .elementor-element .drd-t-body-lg { font-family: var(--e-global-typography-drd_body_lg-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_body_lg-font-size, 17px); font-weight: var(--e-global-typography-drd_body_lg-font-weight, 400); line-height: var(--e-global-typography-drd_body_lg-line-height, 1.7); letter-spacing: var(--e-global-typography-drd_body_lg-letter-spacing, normal); text-transform: var(--e-global-typography-drd_body_lg-text-transform, none); } .elementor-element .drd-t-body-sm { font-family: var(--e-global-typography-drd_body_sm-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_body_sm-font-size, 15px); font-weight: var(--e-global-typography-drd_body_sm-font-weight, 400); line-height: var(--e-global-typography-drd_body_sm-line-height, 1.6); letter-spacing: var(--e-global-typography-drd_body_sm-letter-spacing, normal); text-transform: var(--e-global-typography-drd_body_sm-text-transform, none); } .elementor-element .drd-t-small { font-family: var(--e-global-typography-drd_small-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_small-font-size, 14px); font-weight: var(--e-global-typography-drd_small-font-weight, 400); line-height: var(--e-global-typography-drd_small-line-height, 1.6); letter-spacing: var(--e-global-typography-drd_small-letter-spacing, normal); text-transform: var(--e-global-typography-drd_small-text-transform, none); } .elementor-element .drd-t-caption { font-family: var(--e-global-typography-drd_caption-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_caption-font-size, 13px); font-weight: var(--e-global-typography-drd_caption-font-weight, 400); line-height: var(--e-global-typography-drd_caption-line-height, 1.5); letter-spacing: var(--e-global-typography-drd_caption-letter-spacing, normal); text-transform: var(--e-global-typography-drd_caption-text-transform, none); } .elementor-element .drd-t-quote { font-family: var(--e-global-typography-drd_quote-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_quote-font-size, 26px); font-weight: var(--e-global-typography-drd_quote-font-weight, 500); line-height: var(--e-global-typography-drd_quote-line-height, 1.55); letter-spacing: var(--e-global-typography-drd_quote-letter-spacing, -0.01em); text-transform: var(--e-global-typography-drd_quote-text-transform, none); } .elementor-element .drd-t-eyebrow { font-family: var(--e-global-typography-drd_eyebrow-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_eyebrow-font-size, 13px); font-weight: var(--e-global-typography-drd_eyebrow-font-weight, 600); line-height: var(--e-global-typography-drd_eyebrow-line-height, 1.4); letter-spacing: var(--e-global-typography-drd_eyebrow-letter-spacing, 0.22em); text-transform: var(--e-global-typography-drd_eyebrow-text-transform, uppercase); } .elementor-element .drd-t-label { font-family: var(--e-global-typography-drd_label-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_label-font-size, 12px); font-weight: var(--e-global-typography-drd_label-font-weight, 600); line-height: var(--e-global-typography-drd_label-line-height, 1.4); letter-spacing: var(--e-global-typography-drd_label-letter-spacing, 0.14em); text-transform: var(--e-global-typography-drd_label-text-transform, uppercase); } .elementor-element .drd-t-nav { font-family: var(--e-global-typography-drd_nav-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_nav-font-size, 15px); font-weight: var(--e-global-typography-drd_nav-font-weight, 500); line-height: var(--e-global-typography-drd_nav-line-height, 1.5); letter-spacing: var(--e-global-typography-drd_nav-letter-spacing, normal); text-transform: var(--e-global-typography-drd_nav-text-transform, none); } .elementor-element .drd-t-stat-xl { font-family: var(--e-global-typography-drd_stat_xl-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_stat_xl-font-size, 46px); font-weight: var(--e-global-typography-drd_stat_xl-font-weight, 700); line-height: var(--e-global-typography-drd_stat_xl-line-height, 1.05); letter-spacing: var(--e-global-typography-drd_stat_xl-letter-spacing, -0.02em); text-transform: var(--e-global-typography-drd_stat_xl-text-transform, none); } .elementor-element .drd-t-stat-lg { font-family: var(--e-global-typography-drd_stat_lg-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_stat_lg-font-size, 36px); font-weight: var(--e-global-typography-drd_stat_lg-font-weight, 700); line-height: var(--e-global-typography-drd_stat_lg-line-height, 1.1); letter-spacing: var(--e-global-typography-drd_stat_lg-letter-spacing, -0.01em); text-transform: var(--e-global-typography-drd_stat_lg-text-transform, none); } .elementor-element .drd-t-stat-md { font-family: var(--e-global-typography-drd_stat_md-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_stat_md-font-size, 30px); font-weight: var(--e-global-typography-drd_stat_md-font-weight, 700); line-height: var(--e-global-typography-drd_stat_md-line-height, 1.1); letter-spacing: var(--e-global-typography-drd_stat_md-letter-spacing, normal); text-transform: var(--e-global-typography-drd_stat_md-text-transform, none); } .elementor-element .drd-t-stat-sm { font-family: var(--e-global-typography-drd_stat_sm-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_stat_sm-font-size, 26px); font-weight: var(--e-global-typography-drd_stat_sm-font-weight, 700); line-height: var(--e-global-typography-drd_stat_sm-line-height, 1.15); letter-spacing: var(--e-global-typography-drd_stat_sm-letter-spacing, normal); text-transform: var(--e-global-typography-drd_stat_sm-text-transform, none); } /* ------------------------------------------------------------------ 3. Utilities */ /* * Highlighted words: *text* in DRD widgets, or anywhere. * Orange is the page's skim path: the highlighted phrase in a heading and the one figure it points * to. Labels, numbers, icons and ticks stay ink or grey so the highlights are what the eye finds. * Buttons use the brighter CTA orange. */ .elementor-element .drd-hl { color: var(--drd-c-orange); } /* * Logo gradient type, for large type only: heading highlights and figures set to the accent tone. * At its lighter end the gradient is about 3.4:1 on white, enough for 24px+ bold, not for body text, * so small highlights keep the flat orange. Each wrapped line of a highlight gets the whole gradient. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .elementor-element .drd-sh__title .drd-hl, .elementor-element .drd-stable__line .drd-hl, .elementor-element .drd-statement .drd-hl, .drd-metric--value-accent .drd-metric__value { background-image: var(--drd-grad-logo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .drd-metric--value-accent .drd-metric__value { width: fit-content; } .drd-metric--value-accent .drd-metric__suffix { -webkit-text-fill-color: var(--drd-c-text); } .drd-stable__value.is-accent { background-image: var(--drd-grad-logo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .drd-stable__value.is-accent .drd-stable__suffix { -webkit-text-fill-color: var(--drd-c-text); } } /* Container → Style → Design Tokens. Explicit Padding / Border Radius on the element still win. */ .e-con.drd-space-section { --padding-top: var(--drd-space-section); --padding-bottom: var(--drd-space-section); } .e-con.drd-space-compact { --padding-top: var(--drd-space-section-sm); --padding-bottom: var(--drd-space-section-sm); } .e-con.drd-gutter-on { --padding-left: var(--drd-space-gutter); --padding-right: var(--drd-space-gutter); } .e-con.drd-radius-xs { --border-radius: var(--drd-radius-xs); } .e-con.drd-radius-sm { --border-radius: var(--drd-radius-sm); } .e-con.drd-radius-md { --border-radius: var(--drd-radius-md); } .e-con.drd-radius-lg { --border-radius: var(--drd-radius-lg); } .e-con.drd-radius-xl { --border-radius: var(--drd-radius-xl); } .e-con.drd-radius-2xl { --border-radius: var(--drd-radius-2xl); } .e-con.drd-radius-pill { --border-radius: var(--drd-radius-pill); } .e-con.drd-radius-none { --border-radius: 0; } .e-con.drd-shadow-card { box-shadow: var(--drd-shadow-card); } .e-con.drd-shadow-raised { box-shadow: var(--drd-shadow-raised); } /* Container → Advanced → CSS Classes: drd-sticky keeps a side column in view while the main column scrolls. */ .e-con.drd-sticky { position: sticky; top: var(--drd-sticky-top, 40px); align-self: start; } @media (max-width: 1024px) { .e-con.drd-sticky { position: static; } } /* * Prose: long-form copy (service pages, posts). Add the class drd-prose to a Text Editor widget; its * headings, paragraphs, lists and links then follow the kit's type scale and the logo accents. */ .elementor-element.drd-prose { max-width: 72ch; color: var(--drd-c-text); font-family: var(--e-global-typography-drd_body_lg-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_body_lg-font-size, 17px); font-weight: var(--e-global-typography-drd_body_lg-font-weight, 400); line-height: var(--e-global-typography-drd_body_lg-line-height, 1.7); } .elementor-element.drd-prose :is(p, ul, ol) { margin: 0 0 1.1em; } /* drd-prose--sm: the same styles at body size, for text inside tiles and cards. */ .elementor-element.drd-prose.drd-prose--sm { max-width: none; font-size: var(--e-global-typography-text-font-size, 16px); line-height: 1.65; } .elementor-element.drd-prose :is(p, ul, ol):last-child { margin-bottom: 0; } .elementor-element.drd-prose h2 { margin: 2.2em 0 0.6em; font-family: var(--e-global-typography-drd_title_md-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_title_md-font-size, 26px); font-weight: var(--e-global-typography-drd_title_md-font-weight, 700); line-height: 1.25; letter-spacing: -0.01em; color: var(--drd-c-ink); } .elementor-element.drd-prose h3 { margin: 1.8em 0 0.5em; font-family: var(--e-global-typography-drd_h4-font-family, "Poppins"), var(--drd-font-stack); font-size: var(--e-global-typography-drd_h4-font-size, 20px); font-weight: var(--e-global-typography-drd_h4-font-weight, 600); line-height: 1.35; color: var(--drd-c-ink); } .elementor-element.drd-prose :is(h2, h3):first-child { margin-top: 0; } .elementor-element.drd-prose h2 + h3 { margin-top: 1.2em; } .elementor-element.drd-prose strong { font-weight: 600; color: var(--drd-c-ink); } .elementor-element.drd-prose a { color: var(--drd-c-orange-deep); text-decoration: underline; text-underline-offset: 3px; } .elementor-element.drd-prose a:hover { color: var(--drd-c-orange-dark); } .elementor-element.drd-prose ul { padding: 0; list-style: none; } .elementor-element.drd-prose ul > li { position: relative; margin: 0.45em 0; padding-left: 26px; } /* List markers are small dots in the logo gradient. */ .elementor-element.drd-prose ul > li::before { content: ""; position: absolute; top: 0.62em; left: 4px; width: 8px; height: 8px; border-radius: 50%; background-image: var(--drd-grad-logo-bar); } .elementor-element.drd-prose ol { padding-left: 1.3em; } .elementor-element.drd-prose li > p { margin: 0; } /* Button → Brand style / Brand size. The primary look is Site Settings → Theme Style → Buttons. */ /* * Primary buttons (and form submits): the deep logo gradient with white text. Orange with ink text read * muddy and the bright orange with white failed contrast; this keeps the logo's orange and passes AA. */ .elementor-element.elementor-widget-button:not(.drd-btn-outline, .drd-btn-dark, .drd-btn-link) .elementor-button, .elementor-element .elementor-form .elementor-button[type="submit"] { background-color: #C84000; background-image: var(--drd-grad-deep); color: #FFFFFF; } .elementor-element.elementor-widget-button:not(.drd-btn-outline, .drd-btn-dark, .drd-btn-link) .elementor-button:is(:hover, :focus), .elementor-element .elementor-form .elementor-button[type="submit"]:is(:hover, :focus) { background-color: #AC3800; background-image: var(--drd-grad-deep-hover); color: #FFFFFF; } .elementor-element.elementor-widget-button .elementor-button:focus-visible { outline: 2px solid var(--drd-c-ink); outline-offset: 3px; } .elementor-widget-button .elementor-button { transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .elementor-widget-button.drd-btn-outline .elementor-button { background-color: var(--drd-c-white); color: var(--drd-c-ink); box-shadow: inset 0 0 0 1.5px var(--drd-c-ink); } .elementor-widget-button.drd-btn-outline .elementor-button:hover, .elementor-widget-button.drd-btn-outline .elementor-button:focus { background-color: var(--drd-c-ink); color: var(--drd-c-white); } .elementor-widget-button.drd-btn-dark .elementor-button { background-color: var(--drd-c-ink); color: var(--drd-c-white); } .elementor-widget-button.drd-btn-dark .elementor-button:hover, .elementor-widget-button.drd-btn-dark .elementor-button:focus { background-color: var(--drd-c-orange-deep); color: var(--drd-c-white); } .elementor-widget-button.drd-btn-link .elementor-button { background: none; padding: 0; border-radius: 0; color: var(--drd-c-orange-deep); box-shadow: none; } .elementor-widget-button.drd-btn-link .elementor-button:hover, .elementor-widget-button.drd-btn-link .elementor-button:focus { background: none; color: var(--drd-c-orange-dark); } .elementor-widget-button.drd-btn-size-small .elementor-button { font-size: 15px; padding: 13px 24px; } .elementor-widget-button.drd-btn-size-large .elementor-button { font-size: 17px; padding: 18px 34px; } @media (max-width: 767px) { .elementor-widget-button.drd-btn-size-large .elementor-button { font-size: 16px; padding: 16px 26px; } } .elementor-widget-button .elementor-button:focus-visible, .drd-card--link:focus-visible, .drd-faq__q:focus-visible { outline: 2px solid var(--drd-c-orange); outline-offset: 3px; } /* ------------------------------------------------------------------ 4. Widgets */ /* Reset theme margins inside DRD widgets; (0,1,1) so component rules below can add spacing back. */ .elementor-element :where(.drd-sh, .drd-metric, .drd-card, .drd-steps, .drd-chips, .drd-cbars, .drd-barlist, .drd-checklist, .drd-faq, .drd-quote, .drd-stable) :is(h1, h2, h3, h4, h5, h6, p, blockquote, figure, ul, ol, dt, dd) { margin: 0; } .elementor-element :is(.drd-quote, .drd-steps, .drd-chips__list, .drd-barlist__rows, .drd-checklist, .drd-stable) { margin: 0; } /* Shared surfaces (Metric, Feature Card). */ .drd-surface--card { background-color: var(--drd-c-white); border: 1px solid var(--drd-c-border); box-shadow: var(--drd-shadow-card); } .drd-surface--white { background-color: var(--drd-c-white); } .drd-surface--cream { background-color: var(--drd-c-cream); } .drd-surface--sand { background-color: var(--drd-c-sand); } .drd-surface--dark { background-color: var(--drd-c-ink); } .drd-surface--outline { border: 2px solid var(--drd-c-orange); } .drd-surface--tint { background-color: var(--drd-c-orange-soft); } /* Section Heading */ .drd-sh { display: flex; flex-direction: column; gap: var(--drd-sh-gap, 22px); align-items: var(--drd-sh-items, flex-start); text-align: var(--drd-sh-align, left); } .drd-sh__main, .drd-sh__aside { display: flex; flex-direction: column; align-items: inherit; min-width: 0; } .drd-sh__main { gap: var(--drd-sh-eyebrow-gap, 16px); max-width: var(--drd-sh-title-max, none); } .drd-sh__aside { gap: 16px; max-width: var(--drd-sh-desc-max, none); } .drd-sh .drd-sh__eyebrow { color: var(--drd-c-muted); } .drd-sh .drd-sh__eyebrow--muted { color: var(--drd-c-muted); } .drd-sh .drd-sh__eyebrow--meta { font-weight: 600; color: var(--drd-c-muted); } .drd-sh .drd-sh__title { color: var(--drd-c-ink); } .drd-sh .drd-sh__desc { color: var(--drd-c-text); } .drd-sh .drd-sh__desc p + p { margin-top: var(--drd-sh-gap, 22px); } .drd-sh .drd-sh__link { font-weight: 600; color: var(--drd-c-orange-deep); } .drd-sh .drd-sh__link:hover { color: var(--drd-c-orange-dark); } .drd-sh--split { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; column-gap: 32px; text-align: left; } .drd-sh--split .drd-sh__main, .drd-sh--split .drd-sh__aside { align-items: flex-start; } .drd-sh--split .drd-sh__main { flex: 1 1 480px; max-width: var(--drd-sh-title-max, 640px); } .drd-sh--split .drd-sh__aside { flex: 0 1 auto; max-width: var(--drd-sh-desc-max, 440px); } /* Metric */ .drd-metric { display: flex; gap: var(--drd-metric-gap, 4px); box-sizing: border-box; height: 100%; color: var(--drd-c-ink); } .drd-metric:not(.drd-surface--none) { padding: var(--drd-space-card-pad-sm); border-radius: var(--drd-radius-md); } .drd-metric.drd-surface--card { padding: var(--drd-space-card-pad-md) calc(var(--drd-space-card-pad-md) + 2px); } .drd-metric--stacked { flex-direction: column; } .drd-metric--stacked .drd-metric__label { margin-bottom: 2px; } .drd-metric--inline { align-items: center; gap: var(--drd-metric-gap, 24px); } .drd-metric--inline .drd-metric__value { flex: 0 0 auto; min-width: 120px; } .drd-metric--split { flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--drd-metric-gap, 16px); } .drd-metric__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .drd-metric__body, .drd-metric--stacked .drd-metric__title, .drd-metric--stacked .drd-metric__caption { max-width: var(--drd-metric-text-max, none); } .drd-metric .drd-metric__value { color: var(--drd-c-ink); white-space: nowrap; } .drd-metric--value-accent .drd-metric__value { color: var(--drd-c-orange); } .drd-metric .drd-metric__suffix { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--drd-c-text); } .drd-metric .drd-metric__label { color: var(--drd-c-muted); } .drd-metric--label-accent .drd-metric__label { color: var(--drd-c-orange-deep); } .drd-metric .drd-metric__title { color: var(--drd-c-ink); } .drd-metric .drd-metric__caption { color: var(--drd-c-muted); } .drd-metric:is(.drd-surface--white, .drd-surface--cream, .drd-surface--outline) .drd-metric__caption { color: var(--drd-c-text); } .drd-metric.drd-surface--dark :is(.drd-metric__value, .drd-metric__title, .drd-metric__caption, .drd-metric__suffix) { color: var(--drd-c-white); } .drd-metric.drd-surface--dark .drd-metric__label { color: var(--drd-c-peach); } .drd-metric.drd-surface--dark .drd-metric__title { font-weight: 400; } @media (max-width: 767px) { .drd-metric--inline .drd-metric__value { min-width: 92px; } } /* Feature Card */ .drd-card { display: flex; flex-direction: column; gap: var(--drd-card-gap, 10px); box-sizing: border-box; height: 100%; padding: var(--drd-space-card-pad); border-radius: var(--drd-radius-lg); color: var(--drd-c-ink); transition: background-color 0.2s ease; } .drd-card--lg { gap: var(--drd-card-gap, 18px); } .drd-card--sm { padding: var(--drd-space-card-pad-md); } /* No surface, no inset: the card's content sits on the edge of whatever holds it (a tile, a column). */ .drd-card.drd-surface--none { padding: 0; } .drd-card .drd-card__title { color: var(--drd-c-ink); transition: color 0.2s ease; } .drd-card .drd-card__desc { color: var(--drd-c-text); } .drd-card .drd-card__meta { margin-top: 6px; line-height: 1.9; font-weight: 500; color: var(--drd-c-ink-soft); } .drd-card .drd-card__number { font-size: 13px; font-weight: 700; color: var(--drd-c-muted); } .drd-card__icon { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; flex: 0 0 auto; font-size: var(--drd-card-icon-size, 26px); line-height: 1; } .drd-card__icon svg { width: var(--drd-card-icon-size, 26px); height: var(--drd-card-icon-size, 26px); } .drd-card__icon i { color: inherit; } .drd-card__icon--tile { width: 52px; height: 52px; border-radius: var(--drd-radius-sm); background-color: var(--drd-c-white); } .drd-card.drd-card--link, .drd-card.drd-card--link:hover { color: var(--drd-c-ink); text-decoration: none; } .drd-card.drd-card--link:hover .drd-card__title { color: var(--drd-c-orange-deep); } .drd-card--link.drd-surface--white:hover { background-color: var(--drd-c-cream); } .drd-card--link.drd-surface--cream:hover { background-color: var(--drd-c-sand); } /* A linked card says so: a round chevron in its top corner, filled orange on hover. */ .drd-card.drd-card--link { position: relative; padding-right: 72px; } .drd-card.drd-card--link::after { content: ""; position: absolute; top: var(--drd-card-pad, 24px); right: var(--drd-card-pad, 24px); width: 36px; height: 36px; border-radius: 50%; background: var(--drd-c-cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%231E1E1E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; transition: background-color 200ms ease, transform 200ms ease; } .drd-card.drd-card--link:hover::after, .drd-card.drd-card--link:focus-visible::after { background: #EC5410 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; transform: translateX(3px); } .drd-card--link.drd-surface--cream::after { background-color: var(--drd-c-white); } /* Fill the cell when the widget is stretched by a grid or flex row (no effect in a column). */ .elementor-widget-drd-feature-card > .elementor-widget-container, .elementor-widget-drd-metric > .elementor-widget-container { height: 100%; } /* Numbered Steps */ .drd-steps { list-style: none; padding: 0; } .drd-steps__item { display: flex; } .drd-steps__body { min-width: 0; } .drd-steps .drd-steps__num { flex: 0 0 auto; font-weight: 700; color: var(--drd-c-muted); } .drd-steps .drd-steps__title { color: var(--drd-c-ink); } .drd-steps .drd-steps__desc { color: var(--drd-c-text); } .drd-steps--list .drd-steps__item { gap: 22px; padding: var(--drd-steps-gap, 26px) 0; border-bottom: 1px solid var(--drd-steps-divider, var(--drd-c-divider)); } .drd-steps--list .drd-steps__item:first-child { padding-top: 0; } .drd-steps--list .drd-steps__item:last-child { border-bottom: 0; padding-bottom: 0; } .drd-steps--list .drd-steps__num { min-width: 34px; font-size: 15px; line-height: 1.8; } .drd-steps--list .drd-steps__title { margin-bottom: 8px; } .drd-steps--list .drd-steps__title:last-child { margin-bottom: 0; } /* Rows with dividers at Text size: Compact: the number sits on the title's line. */ .drd-steps--list.drd-steps--sm .drd-steps__item { align-items: baseline; gap: 14px; } .drd-steps--list.drd-steps--sm .drd-steps__num { min-width: 22px; font-size: 13px; line-height: inherit; } .drd-steps--grid, .drd-steps--cards { display: grid; grid-template-columns: repeat(var(--drd-steps-cols, 3), minmax(0, 1fr)); gap: var(--drd-steps-gap, 16px); } .drd-steps--grid .drd-steps__item, .drd-steps--cards .drd-steps__item { flex-direction: column; gap: 6px; } .drd-steps--grid .drd-steps__num, .drd-steps--cards .drd-steps__num { font-size: 13px; } .drd-steps--cards .drd-steps__item { gap: 10px; padding: var(--drd-space-card-pad-md); border-radius: var(--drd-radius-md); background-color: var(--drd-c-white); } .drd-steps--cards .drd-steps__body { display: flex; flex-direction: column; gap: 10px; } .drd-steps--sm .drd-steps__title { font-weight: 500; } /* Radius override for card layouts. */ .drd-steps.drd-r-xs .drd-steps__item { border-radius: var(--drd-radius-xs); } .drd-steps.drd-r-sm .drd-steps__item { border-radius: var(--drd-radius-sm); } .drd-steps.drd-r-md .drd-steps__item { border-radius: var(--drd-radius-md); } .drd-steps.drd-r-lg .drd-steps__item { border-radius: var(--drd-radius-lg); } .drd-steps.drd-r-xl .drd-steps__item { border-radius: var(--drd-radius-xl); } .drd-steps.drd-r-none .drd-steps__item { border-radius: 0; } /* Chips & Tags */ .drd-chips, .drd-chips__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--drd-chips-gap, 10px); } .drd-chips__list { flex: 1 1 auto; justify-content: var(--drd-chips-justify, flex-start); list-style: none; padding: 0; } .drd-chips .drd-chips__lead { color: var(--drd-c-muted); } .drd-chip { display: inline-flex; align-items: center; border-radius: var(--drd-radius-pill); line-height: 1.4; } .drd-chips .drd-chip, .drd-chips a.drd-chip:hover { text-decoration: none; } /* Optional chip icon, in the chip's text color (see Icons below for Original / Custom). */ .drd-chip:has(.drd-chip__icon) { gap: 10px; } .drd-chip__icon { display: inline-flex; flex: 0 0 auto; line-height: 0; color: var(--drd-icon, currentColor); } .drd-chips--badge .drd-chip:has(.drd-chip__icon) { gap: 8px; } .drd-chips--badge .drd-chip__icon svg { width: 1.45em; height: 1.45em; } .drd-chip__icon svg { width: var(--drd-chip-icon-size, 1.5em); height: var(--drd-chip-icon-size, 1.5em); } .drd-chips--pill .drd-chip { padding: 9px 16px; font-weight: 500; background-color: var(--drd-c-sand); color: var(--drd-c-ink); } .drd-chips--badge .drd-chip { padding: 7px 14px; background-color: var(--drd-c-chip); color: var(--drd-c-ink-soft); } .drd-chips .drd-chip--accent { background-color: var(--drd-c-orange-soft); color: var(--drd-c-orange-dark); } .drd-chips .drd-chip--neutral { background-color: var(--drd-c-chip); color: var(--drd-c-ink-soft); } .drd-chips--text { gap: var(--drd-chips-gap, 20px 40px); } .drd-chips--text .drd-chips__list { gap: var(--drd-chips-gap, 20px 40px); } .drd-chips--text .drd-chip { padding: 0; border-radius: 0; background: none; color: var(--drd-c-ink-soft); } /* Comparison Bars */ .drd-cbars { display: flex; flex-direction: column; gap: 14px; } .drd-cbars--divided { padding: 22px 0; border-top: 1px solid var(--drd-c-border); border-bottom: 1px solid var(--drd-c-border); } .drd-cbars__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--drd-c-text); } .drd-cbars__key { display: inline-flex; align-items: center; gap: 8px; } .drd-cbars__swatch { width: 12px; height: 12px; border-radius: 3px; background-color: var(--drd-bars-current, var(--drd-c-orange)); } .drd-cbars__swatch.is-previous { background-color: var(--drd-bars-previous, var(--drd-c-bar)); } /* This period's bars (and its legend swatch) carry the logo gradient unless a bar color is set on the widget. */ .drd-cbars__swatch:not(.is-previous), .drd-cbars__bar:not(.is-previous), .drd-barlist__bar.is-accent { background-image: var(--drd-bars-current-image, var(--drd-grad-logo-bar)); } .drd-cbars__row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 64px; gap: 14px; align-items: center; } .drd-cbars .drd-cbars__label { font-weight: 600; color: var(--drd-c-ink); } .drd-cbars__bars { display: flex; flex-direction: column; gap: 5px; } .drd-cbars__bar { display: block; width: var(--drd-w, 100%); height: var(--drd-bar-h, 10px); border-radius: var(--drd-radius-xs); background-color: var(--drd-bars-current, var(--drd-c-orange)); } .drd-cbars__bar.is-previous { background-color: var(--drd-bars-previous, var(--drd-c-bar)); } .drd-cbars .drd-cbars__delta { font-weight: 700; text-align: right; color: var(--drd-c-ink); } .drd-cbars .drd-cbars__delta.is-highlight { color: var(--drd-c-orange-deep); } @media (max-width: 767px) { .drd-cbars__row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; } .drd-cbars__bars { grid-column: 1 / -1; grid-row: 2; } } /* Bar List */ .drd-barlist { display: flex; flex-direction: column; gap: 22px; } .drd-barlist .drd-barlist__title { color: var(--drd-c-muted); } .drd-barlist__rows { display: flex; flex-direction: column; gap: var(--drd-barlist-gap, 18px); list-style: none; padding: 0; } .drd-barlist__row { display: flex; flex-direction: column; gap: 8px; } .drd-barlist .drd-barlist__head { display: flex; justify-content: space-between; gap: 12px; color: var(--drd-c-ink); } .drd-barlist__label { font-weight: 600; } .drd-barlist__value { font-weight: 700; } .drd-barlist__value.is-highlight { color: var(--drd-c-orange-deep); } .drd-barlist__bar { display: block; width: var(--drd-w, 100%); height: var(--drd-bar-h, 14px); border-radius: var(--drd-radius-xs); background-color: var(--drd-c-bar); } .drd-barlist__bar.is-peach { background-color: var(--drd-c-peach); } .drd-barlist__bar.is-accent { background-color: var(--drd-c-orange); } /* Stat Table: figures set out like a table (a description list, not a ). */ .drd-stable { display: flex; flex-direction: column; } .drd-stable__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "note value"; align-items: center; gap: 2px 20px; padding: 14px 0; border-top: 1px solid var(--drd-stable-rule, var(--drd-c-divider)); } .drd-stable__row:first-child { border-top-color: transparent; } .drd-stable .drd-stable__label { grid-area: label; display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--drd-c-ink); } .drd-stable__icon { display: inline-flex; flex: 0 0 auto; line-height: 0; } .drd-stable__icon svg { width: 24px; height: 24px; } .drd-stable .drd-stable__note { grid-area: note; color: var(--drd-c-muted); } /* Notes line up with the label text, past the icon. */ .drd-stable__row:has(.drd-stable__icon) .drd-stable__note { padding-left: 36px; } .drd-stable .drd-stable__value { grid-area: value; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--drd-c-ink); } .drd-stable .drd-stable__suffix { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--drd-c-text); } .drd-stable__row.is-highlight { margin-inline: -16px; padding-inline: 16px; border-radius: var(--drd-radius-sm); border-top-color: transparent; background-color: var(--drd-c-orange-soft); } .drd-stable__row.is-highlight + .drd-stable__row { border-top-color: transparent; } @media (min-width: 768px) { .drd-stable--note-column .drd-stable__row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; grid-template-areas: "label note value"; column-gap: 32px; } .drd-stable--note-column .drd-stable__row:has(.drd-stable__icon) .drd-stable__note { padding-left: 0; } } /* Where supported, rows share one set of columns, so notes and figures line up like table columns. */ @supports (grid-template-columns: subgrid) { .drd-stable { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; } .drd-stable__row { grid-column: 1 / -1; grid-template-columns: subgrid; } @media (min-width: 768px) { .drd-stable--note-column { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; column-gap: 32px; } .drd-stable--note-column .drd-stable__row { grid-template-columns: subgrid; } } } /* Checklist */ .drd-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--drd-check-min, 200px)), 1fr)); gap: 18px 28px; list-style: none; padding: 0; } .drd-checklist__item { display: flex; gap: 12px; align-items: flex-start; } .drd-checklist__icon { display: inline-flex; flex: 0 0 auto; margin-top: 2px; font-size: 20px; line-height: 1; } .drd-checklist__icon svg { width: 20px; height: 20px; } /* A per-item icon (a platform logo or a DRD set icon) is drawn a little larger than the check mark. */ .drd-checklist__icon--item { margin-top: 0; } .drd-checklist__icon--item svg { width: 24px; height: 24px; } .drd-checklist__title { display: block; font-weight: 600; color: var(--drd-c-ink); } .drd-checklist__desc { display: block; color: var(--drd-c-muted); } /* Plain checklist: CSS class drd-checklist--plain on the widget. Items in body weight, closer together, for what a service includes. */ .drd-checklist--plain .drd-checklist { gap: 12px 28px; } .drd-checklist--plain .drd-checklist__title { font-weight: 400; color: var(--drd-c-text); } /* FAQ */ .drd-faq__item { padding: var(--drd-faq-pad, 24px) 0; border-bottom: 1px solid var(--drd-faq-divider, var(--drd-c-divider)); } .drd-faq__item:first-child { padding-top: 0; } .drd-faq .drd-faq__q { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; cursor: pointer; list-style: none; color: var(--drd-c-ink); } .drd-faq__q::-webkit-details-marker { display: none; } .drd-faq__q::marker { content: ""; } .drd-faq__icon { position: relative; flex: 0 0 auto; width: 24px; height: 24px; color: var(--drd-c-ink); transition: transform 0.2s ease; } .drd-faq__icon::before, .drd-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; border-radius: 2px; background-color: currentColor; transform: translate(-50%, -50%); } .drd-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .drd-faq__item[open] .drd-faq__icon { transform: rotate(45deg); } .drd-faq .drd-faq__a { margin-top: 14px; color: var(--drd-c-text); } .drd-faq .drd-faq__a p + p { margin-top: 1em; } /* Testimonial Quote */ .drd-quote { display: flex; flex-direction: column; align-items: var(--drd-quote-items, center); gap: 28px; text-align: var(--drd-quote-align, center); } .drd-quote__mark { display: inline-flex; color: var(--drd-c-peach); line-height: 0; } .drd-quote .drd-quote__text { padding: 0; border: 0; font-style: normal; quotes: none; color: var(--drd-c-ink); } .drd-quote .drd-quote__cite { display: flex; flex-direction: column; gap: 4px; font-style: normal; text-align: inherit; } .drd-quote__name { color: var(--drd-c-ink); } .drd-quote__role { color: var(--drd-c-muted); } /* Radius overrides on Metric / Feature Card (the widget's Corner radius option). */ .elementor-element .drd-r-xs { border-radius: var(--drd-radius-xs); } .elementor-element .drd-r-sm { border-radius: var(--drd-radius-sm); } .elementor-element .drd-r-md { border-radius: var(--drd-radius-md); } .elementor-element .drd-r-lg { border-radius: var(--drd-radius-lg); } .elementor-element .drd-r-xl { border-radius: var(--drd-radius-xl); } .elementor-element .drd-r-2xl { border-radius: var(--drd-radius-2xl); } .elementor-element .drd-r-pill { border-radius: var(--drd-radius-pill); } .elementor-element .drd-r-none { border-radius: 0; } /* ------------------------------------------------------------------ 5. Fields, groups, drawings */ /* * Dark field: Container → Advanced → CSS Classes: drd-dark. For the page's stand-out moments (the * claim, the proof, the voice, the close), at most two or three per page. Every kit colour flips * inside it, so widgets, headings and buttons need no dark variants. Leave the container's own * background empty: the class paints it. */ .elementor-element.e-con.drd-dark, .drd-dark { --drd-c-ink: #FFFFFF; --drd-c-text: #D2CCC6; --drd-c-ink-soft: #E8E3DE; --drd-c-muted: #A0988F; --drd-c-white: #2A2725; --drd-c-cream: #252220; --drd-c-sand: #252220; --drd-c-stone: #252220; --drd-c-chip: #35312E; --drd-c-border: #3A3633; --drd-c-divider: #3A3633; --drd-c-bar: #4E4844; --drd-c-orange-soft: #3C2416; --drd-c-orange-wash: #3C2416; --drd-c-orange-deep: #F3A46E; --e-global-color-primary: #FFFFFF; --e-global-color-text: #D2CCC6; --e-global-color-drd_ink_soft: #E8E3DE; --e-global-color-drd_muted: #A0988F; --e-global-color-drd_white: #2A2725; --e-global-color-drd_cream: #252220; --e-global-color-drd_sand: #252220; --e-global-color-drd_border: #3A3633; --e-global-color-drd_divider: #3A3633; --e-global-color-drd_orange_soft: #3C2416; --e-global-color-drd_orange_wash: #3C2416; --e-global-color-drd_orange_deep: #F3A46E; color: var(--drd-c-text); } .elementor-element.e-con.drd-dark { background-color: var(--drd-c-night); } /* A background video in a dark field stays still for reduced motion; the video's fallback image shows. */ @media (prefers-reduced-motion: reduce) { .e-con.drd-dark > .elementor-background-video-container { display: none; } } /* * Orange field: drd-accent on a container (background left empty). The deep logo gradient with every * kit text colour turned white; for one stand-out strip per block, e.g. who a result was for. */ .elementor-element.e-con.drd-accent, .drd-accent { --drd-c-ink: #FFFFFF; --drd-c-text: #FFFFFF; --drd-c-ink-soft: #FFFFFF; --drd-c-muted: #FFFFFF; --drd-c-orange: #FFFFFF; --drd-c-orange-deep: #FFFFFF; --drd-c-chip: rgba(255, 255, 255, 0.18); --drd-c-divider: rgba(255, 255, 255, 0.3); --e-global-color-primary: #FFFFFF; --e-global-color-text: #FFFFFF; --e-global-color-drd_ink_soft: #FFFFFF; --e-global-color-drd_muted: #FFFFFF; color: #FFFFFF; } .elementor-element.e-con.drd-accent { background-color: #C84000; background-image: var(--drd-grad-deep); } .drd-accent .drd-card__icon--tile { --drd-c-ink-soft: #3A3A3A; background-color: #FFFFFF; } /* A dark card inside a light section: the same flip on a rounded panel. */ .elementor-element.e-con.drd-dark.drd-dark--card { border-radius: var(--drd-radius-xl); } /* * Case group: Container → Advanced → CSS Classes: drd-case on a container holding the cards of one * case study. A logo-gradient spine runs down the left with a node at each card, so a breakdown card * reads as part of the result above it, not a new story. */ .elementor-element.e-con.drd-case { --drd-case-inset: 36px; position: relative; padding-left: var(--drd-case-inset); } /* Wide screens: the spine hangs in the page margin so the cards keep the heading's left edge. */ @media (min-width: 1360px) { .elementor-element.e-con.drd-case { margin-left: calc(-1 * var(--drd-case-inset)); width: calc(100% + var(--drd-case-inset)); max-width: none; } } .elementor-element.e-con.drd-case::before { content: ""; position: absolute; top: 30px; bottom: 30px; left: 9px; width: 4px; border-radius: 4px; background-image: linear-gradient(180deg, #E86200 0%, #F04020 100%); } .elementor-element.e-con.drd-case > .e-con { position: relative; } .elementor-element.e-con.drd-case > .e-con::before { content: ""; position: absolute; top: 22px; left: calc(-1 * var(--drd-case-inset) + 1px); width: 20px; height: 20px; box-sizing: border-box; border: 5px solid var(--drd-c-white); border-radius: 50%; background-image: linear-gradient(45deg, #E86200 0%, #F04020 100%); box-shadow: 0 0 0 1px var(--drd-c-border); } @media (max-width: 767px) { .elementor-element.e-con.drd-case { --drd-case-inset: 24px; } .elementor-element.e-con.drd-case::before { left: 5px; width: 3px; } .elementor-element.e-con.drd-case > .e-con::before { left: calc(-1 * var(--drd-case-inset) - 1px); width: 16px; height: 16px; border-width: 4px; } } /* Metric: a platform mark before the descriptor. */ .drd-metric__icon { display: inline-flex; vertical-align: -0.18em; margin-right: 8px; line-height: 0; } .drd-metric__icon svg { width: 1.25em; height: 1.25em; } /* * Icons: every kit icon is one tone, charcoal by default and light in dark fields, platform marks * included. Uploaded SVGs are repainted in the icon's text color; white details and outline icons keep * their own paint. Widget → Style → Icon color: Original colors (drd-icons--original) leaves the SVG as * drawn; Custom sets --drd-icon. */ :is(.drd-ba__icon, .drd-checklist__icon, .drd-card__icon, .drd-metric__icon, .drd-stable__icon) { color: var(--drd-icon, var(--drd-c-ink-soft)); } .elementor-widget:not(.drd-icons--original) :is(.drd-ba__icon, .drd-chip__icon, .drd-checklist__icon, .drd-card__icon, .drd-metric__icon, .drd-stable__icon) svg [fill]:not([fill="none"], [fill="#FFFFFF"], [fill="#ffffff"], [fill="#FFF"], [fill="#fff"], [fill="white"]) { fill: currentColor; } /* Stat Table: a row that pairs two moves, each with a before → after bar on one scale. */ .drd-stable__row.is-pair { grid-template-areas: "label value" "bar bar" "line line" "bar2 bar2"; row-gap: 8px; padding-block: 18px; } .drd-stable__row.is-pair .drd-stable__bar--figure { grid-area: bar; } .drd-stable__row.is-pair .drd-stable__bar--note { grid-area: bar2; } .drd-stable .drd-stable__line { grid-area: line; display: flex; align-items: center; gap: 12px; margin-top: 8px; color: var(--drd-c-ink); } .drd-stable__bar { position: relative; height: 10px; margin-left: 36px; border-radius: 999px; background-color: var(--drd-c-chip); } .drd-stable__bar-before, .drd-stable__bar-after { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; transform-origin: left center; } /* Down: what was dropped stays as a pale ghost; what is left is solid ink. */ .drd-stable__bar.is-down .drd-stable__bar-before { width: var(--drd-bar-from); background-color: var(--drd-c-bar); opacity: 0.55; } .drd-stable__bar.is-down .drd-stable__bar-after { width: var(--drd-bar-to); background-color: var(--drd-c-ink-soft); } /* Up: the gain in the logo gradient, with a notch where the before level was. */ .drd-stable__bar.is-up .drd-stable__bar-after { width: var(--drd-bar-to); background-image: var(--drd-grad-logo-bar); } .drd-stable__bar.is-up .drd-stable__bar-before { z-index: 1; width: var(--drd-bar-from); border-right: 3px solid var(--drd-c-cream); border-radius: 999px 0 0 999px; background: none; } /* Long-form statement lines: drd-statement on a Text Editor sets its paragraphs large. */ .elementor-element.drd-statement p { margin: 0 0 0.6em; font-family: var(--e-global-typography-drd_title_md-font-family, "Poppins"), var(--drd-font-stack); font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--drd-c-ink); } .elementor-element.drd-statement p:last-child { margin-bottom: 0; } /* drd-statement--sm: a one-line statement beside a button (a closing strip). */ .elementor-element.drd-statement.drd-statement--sm { flex: 1 1 420px; max-width: 640px; } .elementor-element.drd-statement.drd-statement--sm p { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.35; } /* * Search results drawing (.drd-serp, in an HTML widget, aria-hidden): a results page drawn in * shapes, the top three results lit in the logo gradient, the rest fading out, page two barely there. */ .drd-serp { --serp-line: rgba(255, 255, 255, 0.14); display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--drd-radius-xl); background-color: var(--drd-c-white); } .drd-serp__search { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px; margin-bottom: 8px; border-radius: 999px; background-color: var(--drd-c-chip); } .drd-serp__search svg { width: 20px; height: 20px; fill: var(--drd-c-muted); } .drd-serp__search i { display: block; width: 46%; height: 10px; border-radius: 5px; background-color: var(--drd-c-bar); } .drd-serp__result { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px 14px; align-items: center; padding: 14px 16px; border-radius: var(--drd-radius-md); } .drd-serp__result > b { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background-color: var(--drd-c-bar); } .drd-serp__result > i { display: block; height: 10px; border-radius: 5px; background-color: var(--drd-c-bar); } .drd-serp__result > i:first-of-type { width: 70%; height: 12px; } .drd-serp__result > i:last-of-type { grid-column: 2; width: 92%; opacity: 0.6; } .drd-serp__result > svg { grid-row: span 2; grid-column: 3; width: 26px; height: 26px; } .drd-serp__result.is-top { background-color: var(--drd-c-orange-soft); } .drd-serp__result.is-top > b, .drd-serp__result.is-top > i:first-of-type { background-image: var(--drd-grad-logo-bar); } .drd-serp__result.is-rest { padding-block: 10px; opacity: 0.45; } .drd-serp__result.is-rest > svg { visibility: hidden; } .drd-serp__page2 { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 0; opacity: 0.16; } .drd-serp__page2 i { display: block; height: 8px; border-radius: 4px; background-color: var(--drd-c-bar); } .drd-serp__page2 i:nth-child(2) { width: 80%; } .drd-serp__page2 i:nth-child(3) { width: 60%; } /* Click share: the top three results' 75% against everything else, one partition bar. */ .drd-serp__share { display: flex; height: 14px; margin-top: 10px; overflow: hidden; border-radius: 999px; background-color: var(--drd-c-chip); } .drd-serp__share span { width: 75%; border-radius: 999px; background-image: var(--drd-grad-logo-bar); transform-origin: left center; } /* Icon tile beside a service heading (Feature Card with Media: icon, Surface: none). */ .drd-service-row .drd-card__icon { background-color: var(--drd-c-cream); } /* Stat Table → Layout: Tiles (bento). Each figure is its own tile: label, large figure, note. */ .drd-stable.drd-stable--tiles { display: grid; grid-template-columns: repeat(var(--drd-tiles, 3), minmax(0, 1fr)); gap: var(--drd-tiles-gap, 20px); height: 100%; } /* Two tile sets side by side in a grid row: both fill the row, so every tile is the same height. */ .elementor-widget-drd-stat-table > .elementor-widget-container { height: 100%; } .drd-stable--tiles .drd-stable__row { grid-column: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding: 22px 22px 20px; border: 0; border-radius: var(--drd-radius-lg); --drd-tile-fill: var(--drd-tile-bg, var(--drd-c-cream)); background-color: var(--drd-tile-fill); } .drd-stable--tiles .drd-stable__label { order: 1; gap: 10px; } .drd-stable--tiles .drd-stable__row .drd-stable__note { order: 3; padding-left: 0; } .drd-stable.drd-stable--tiles .drd-stable__value { order: 2; margin-top: 10px; text-align: left; font-size: clamp(30px, 2.6vw, 40px); line-height: 1.1; } .drd-stable--tiles .drd-stable__row.is-highlight { --drd-tile-fill: var(--drd-c-orange-soft); } /* A row with change bars spans the whole set of tiles. */ .drd-stable--tiles .drd-stable__row.is-pair { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "bar bar" "line line" "bar2 bar2"; align-items: center; gap: 8px 20px; } .drd-stable.drd-stable--tiles .is-pair .drd-stable__value { margin-top: 0; text-align: right; } /* Phones: one tile per line, label left and figure right, so labels never squeeze. */ @media (max-width: 767px) { .drd-stable.drd-stable--tiles { grid-template-columns: minmax(0, 1fr); } .drd-stable--tiles .drd-stable__row:not(.is-pair) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "note value"; align-items: center; gap: 4px 16px; padding: 18px 20px; } .drd-stable.drd-stable--tiles .drd-stable__row:not(.is-pair) .drd-stable__value { margin-top: 0; text-align: right; font-size: 28px; } } /* * Tiles with an icon: the icon sits in a notch cut from the tile's top-left corner and the label starts * under it. The fill is painted on ::before and masked, so the icon is not cut away and the notch shows * whatever is behind the tile. Mask layers: four solid fills (right of and below the notch), two * quarter-circles (rounded corners where the notch meets the top and left edges), and the notch's * rounded inner corner. Change-bar rows keep the inline icon. */ .drd-stable--tiles .drd-stable__row:not(.is-pair):has(.drd-stable__icon) { --drd-notch: 60px; --drd-notch-ring: 8px; --drd-notch-inner: 22px; --drd-notch-edge: 14px; position: relative; isolation: isolate; padding-top: calc(var(--drd-notch) + 10px); background-color: transparent; } .drd-stable--tiles .drd-stable__row:not(.is-pair):has(.drd-stable__icon)::before { --drd-notch-fill: linear-gradient(#000 0 0); --drd-notch-mask: var(--drd-notch-fill) calc(var(--drd-notch) + var(--drd-notch-edge)) 0 / 100% 100% no-repeat, var(--drd-notch-fill) 0 calc(var(--drd-notch) + var(--drd-notch-edge)) / 100% 100% no-repeat, var(--drd-notch-fill) var(--drd-notch) var(--drd-notch-edge) / 100% 100% no-repeat, var(--drd-notch-fill) var(--drd-notch-edge) var(--drd-notch) / 100% 100% no-repeat, radial-gradient(circle at 100% 100%, #000 calc(var(--drd-notch-edge) - 0.5px), #0000 var(--drd-notch-edge)) var(--drd-notch) 0 / var(--drd-notch-edge) var(--drd-notch-edge) no-repeat, radial-gradient(circle at 100% 100%, #000 calc(var(--drd-notch-edge) - 0.5px), #0000 var(--drd-notch-edge)) 0 var(--drd-notch) / var(--drd-notch-edge) var(--drd-notch-edge) no-repeat, radial-gradient(circle at 0 0, #0000 calc(var(--drd-notch-inner) - 0.5px), #000 var(--drd-notch-inner)) calc(var(--drd-notch) - var(--drd-notch-inner)) calc(var(--drd-notch) - var(--drd-notch-inner)) / var(--drd-notch-inner) var(--drd-notch-inner) no-repeat; content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-color: var(--drd-tile-fill); -webkit-mask: var(--drd-notch-mask); mask: var(--drd-notch-mask); } .drd-stable--tiles .drd-stable__row:not(.is-pair):has(.drd-stable__icon) .drd-stable__icon { position: absolute; top: 0; left: 0; align-items: center; justify-content: center; width: calc(var(--drd-notch) - var(--drd-notch-ring)); height: calc(var(--drd-notch) - var(--drd-notch-ring)); } .drd-stable--tiles .drd-stable__row:not(.is-pair):has(.drd-stable__icon) .drd-stable__icon svg { width: 40px; height: 40px; } /* Labels hold two lines, so figures sit on one line across a row of tiles. */ @media (min-width: 768px) { .drd-stable--tiles .drd-stable__row:not(.is-pair) .drd-stable__label { align-items: flex-start; min-height: 3em; } } /* Phones: a smaller notch; the figure lines up with the last line of text. */ @media (max-width: 767px) { .drd-stable--tiles .drd-stable__row:not(.is-pair):has(.drd-stable__icon) { --drd-notch: 52px; --drd-notch-ring: 6px; --drd-notch-inner: 20px; --drd-notch-edge: 12px; align-items: end; } .drd-stable--tiles .drd-stable__row:not(.is-pair):has(.drd-stable__icon) .drd-stable__icon svg { width: 34px; height: 34px; } } /* * Bento: a grid container whose children take different sizes. Container → Advanced → CSS Classes on a * child: drd-span-2 / drd-span-3 (columns), drd-span-all (whole row), drd-tall (two rows). Spans apply * from desktop up; on tablets span-3 becomes the whole row, on phones everything stacks. */ @media (min-width: 1025px) { .e-grid > .e-con.drd-span-2, .e-grid > .e-con-inner > .e-con.drd-span-2 { grid-column: span 2; } .e-grid > .e-con.drd-span-3, .e-grid > .e-con-inner > .e-con.drd-span-3 { grid-column: span 3; } .e-grid > .e-con.drd-tall, .e-grid > .e-con-inner > .e-con.drd-tall { grid-row: span 2; } } @media (min-width: 768px) and (max-width: 1024px) { .e-grid > .e-con:is(.drd-span-2, .drd-span-3), .e-grid > .e-con-inner > .e-con:is(.drd-span-2, .drd-span-3) { grid-column: 1 / -1; } } .e-grid > .e-con.drd-span-all, .e-grid > .e-con-inner > .e-con.drd-span-all { grid-column: 1 / -1; } /* A tinted panel inside a tile (e.g. the list of what a service includes). */ .elementor-element.e-con.drd-tile-panel { padding: 18px; border-radius: var(--drd-radius-md); background-color: var(--drd-c-cream); } /* Roadmap drawing (.drd-roadmap, in an HTML widget, aria-hidden): stops rising left to right on one path. */ .drd-roadmap { width: 100%; height: auto; } .drd-roadmap .rm-track { fill: none; stroke: var(--drd-c-chip); stroke-width: 10; stroke-linecap: round; } .drd-roadmap .rm-path { fill: none; stroke-width: 10; stroke-linecap: round; } .drd-roadmap .rm-stop { fill: var(--drd-c-white); stroke: var(--drd-c-bar); stroke-width: 5; } .drd-roadmap .rm-stop.is-done { stroke: #EC5410; } .drd-roadmap .rm-goal { fill: #EC5410; } .drd-roadmap .rm-card { fill: var(--drd-c-cream); } .drd-roadmap .rm-line { fill: var(--drd-c-bar); } @media (prefers-reduced-motion: no-preference) { .drd-js .drd-roadmap .rm-path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms cubic-bezier(0.22, 1, 0.36, 1); } .drd-js .drd-roadmap.is-in .rm-path { stroke-dashoffset: 0; } } /* * Inbox drawing (.drd-inbox, in an HTML widget, aria-hidden): a mail list with the brand's new mail on top, * then one coin in and 36 out, for "$36 for every dollar spent". Same panel as the results-page drawing. */ .drd-inbox { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: var(--drd-radius-xl); background-color: var(--drd-c-white); } .drd-inbox__bar { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px; margin-bottom: 6px; border-radius: 999px; background-color: var(--drd-c-chip); } .drd-inbox__bar svg { width: 22px; height: 22px; fill: var(--drd-c-muted); } .drd-inbox__bar i { display: block; width: 38%; height: 10px; border-radius: 5px; background-color: var(--drd-c-bar); } .drd-inbox__mail { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px 14px; align-items: center; padding: 14px 16px; border-radius: var(--drd-radius-md); } .drd-inbox__mail > b { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background-color: var(--drd-c-bar); } .drd-inbox__mail > i { display: block; height: 10px; border-radius: 5px; background-color: var(--drd-c-bar); } .drd-inbox__mail > i:first-of-type { width: 62%; height: 12px; } .drd-inbox__mail > i:last-of-type { grid-column: 2; width: 88%; opacity: 0.6; } .drd-inbox__mail > s { grid-row: span 2; grid-column: 3; width: 10px; height: 10px; border-radius: 50%; background-image: var(--drd-grad-logo-bar); } .drd-inbox__mail.is-new { background-color: var(--drd-c-orange-soft); } .drd-inbox__mail.is-new > b, .drd-inbox__mail.is-new > i:first-of-type { background-image: var(--drd-grad-logo-bar); } .drd-inbox__mail.is-old { padding-block: 10px; opacity: 0.45; } .drd-inbox__roi { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 18px; border-radius: var(--drd-radius-md); background-color: var(--drd-c-chip); } /* One coin in, 36 out: every coin the same size, so the count carries the point. */ .drd-inbox__roi > b { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background-color: var(--drd-c-muted); } .drd-inbox__roi > svg { flex: 0 0 auto; width: 20px; height: 20px; fill: var(--drd-c-muted); } .drd-inbox__coins { display: grid; grid-template-columns: repeat(18, 14px); gap: 6px; } .drd-inbox__coins i { display: block; width: 14px; height: 14px; border-radius: 50%; background-image: var(--drd-grad-logo-bar); } @media (max-width: 480px) { .drd-inbox { padding: 18px; } .drd-inbox__coins { grid-template-columns: repeat(12, 12px); gap: 5px; } .drd-inbox__roi > b, .drd-inbox__coins i { width: 12px; height: 12px; } } /* Funnel drawing (.drd-funnel): five stages narrowing to the one that converts. */ .drd-funnel { display: flex; flex-direction: column; align-items: center; gap: 8px; } .drd-funnel i { display: block; height: 24px; border-radius: 999px; background-color: var(--drd-c-bar); transform-origin: center; } .drd-funnel i:nth-child(1) { width: 100%; opacity: 0.45; } .drd-funnel i:nth-child(2) { width: 82%; opacity: 0.6; } .drd-funnel i:nth-child(3) { width: 64%; opacity: 0.75; } .drd-funnel i:nth-child(4) { width: 46%; } .drd-funnel i:nth-child(5) { width: 28%; background-image: var(--drd-grad-logo-bar); } /* Report drawing (.drd-report): monthly bars, this month in the logo gradient. Bar heights via --h. */ .drd-report { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-bottom: 2px; border-bottom: 2px solid var(--drd-c-divider); } .drd-report i { display: block; flex: 1 1 0; height: var(--h, 50%); border-radius: 8px 8px 3px 3px; background-color: var(--drd-c-bar); transform-origin: bottom center; } .drd-report i.is-now { background-image: var(--drd-grad-logo-bar); } /* Tracking ledger under a results drawing (.drd-serp__track): every click logged and checked off. */ .drd-serp__track { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; padding: 18px; border-radius: var(--drd-radius-md); background-color: var(--drd-c-chip); } .drd-serp__track span { display: grid; grid-template-columns: 10px 1fr 22px; align-items: center; gap: 12px; } .drd-serp__track b { width: 10px; height: 10px; border-radius: 50%; background-image: var(--drd-grad-logo-bar); } .drd-serp__track i { display: block; width: 86%; height: 8px; border-radius: 4px; background-color: var(--drd-c-bar); } .drd-serp__track span:nth-child(2) i { width: 72%; } .drd-serp__track span:nth-child(3) i { width: 58%; } .drd-serp__track svg { width: 22px; height: 22px; } /* Social post drawing (.drd-post): an ad in a feed, its creative in the logo gradient with a play mark. */ .drd-post { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--drd-radius-lg); background-color: var(--drd-c-white); } .drd-post__head { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 6px 12px; } .drd-post__head b { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background-color: var(--drd-c-bar); } .drd-post__head i { display: block; width: 46%; height: 9px; border-radius: 5px; background-color: var(--drd-c-bar); } .drd-post__head i + i { width: 28%; opacity: 0.6; } /* A fixed height, not aspect-ratio: grid rows in a bento did not count an aspect-ratio box on phones. */ .drd-post__media { display: grid; place-items: center; height: 200px; border-radius: var(--drd-radius-md); background-image: linear-gradient(135deg, #E86200 0%, #F04020 100%); } .drd-post__media svg { width: 52px; height: 52px; fill: #FFFFFF; opacity: 0.92; } .drd-post > i { display: block; height: 9px; border-radius: 5px; background-color: var(--drd-c-bar); } .drd-post > i:nth-of-type(2) { width: 70%; opacity: 0.6; } .drd-post__cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; } .drd-post__cta i { display: block; width: 40%; height: 9px; border-radius: 5px; background-color: var(--drd-c-bar); } .drd-post__cta b { width: 96px; height: 32px; border-radius: 999px; background-image: var(--drd-grad-deep); } /* Landing page drawing (.drd-lp): a browser window with a headline, an image, a short form and the button. */ .drd-lp { overflow: hidden; border-radius: var(--drd-radius-lg); background-color: var(--drd-c-white); box-shadow: 0 0 0 1px var(--drd-c-border); } .drd-lp__bar { display: flex; gap: 6px; padding: 12px 16px; background-color: var(--drd-c-chip); } .drd-lp__bar i { width: 9px; height: 9px; border-radius: 50%; background-color: var(--drd-c-bar); } .drd-lp__body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; padding: 22px; } .drd-lp__copy { display: flex; flex-direction: column; gap: 9px; } .drd-lp__copy i { display: block; height: 10px; border-radius: 5px; background-color: var(--drd-c-bar); } .drd-lp__copy i:first-child { width: 90%; height: 16px; background-image: var(--drd-grad-logo-bar); } .drd-lp__copy i:nth-child(2) { width: 70%; height: 16px; } .drd-lp__copy i:nth-child(4) { width: 84%; opacity: 0.6; } .drd-lp__copy u { display: block; height: 30px; margin-top: 6px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--drd-c-bar); } .drd-lp__copy b { display: block; width: 62%; height: 34px; margin-top: 4px; border-radius: 999px; background-image: var(--drd-grad-deep); } .drd-lp__media { border-radius: var(--drd-radius-md); background-color: var(--drd-c-cream); background-image: linear-gradient(160deg, rgba(232, 98, 0, 0.18), rgba(240, 64, 32, 0.04)); } /* Dashboard drawing (.drd-dash): three figures as bars and one rising line, every number left out. */ .drd-dash { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--drd-radius-lg); background-color: var(--drd-c-white); box-shadow: 0 0 0 1px var(--drd-c-border); } .drd-dash__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .drd-dash__kpis span { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--drd-radius-sm); background-color: var(--drd-c-chip); } .drd-dash__kpis i { display: block; width: 60%; height: 7px; border-radius: 4px; background-color: var(--drd-c-bar); } .drd-dash__kpis b { display: block; width: 80%; height: 14px; border-radius: 4px; background-color: var(--drd-c-ink-soft); opacity: 0.85; } .drd-dash__kpis span:first-child b { background-image: var(--drd-grad-logo-bar); opacity: 1; } .drd-dash svg { width: 100%; height: auto; } .drd-dash .dash-grid { stroke: var(--drd-c-divider); stroke-width: 1; } .drd-dash .dash-area { fill: rgba(236, 84, 16, 0.12); } .drd-dash .dash-line { fill: none; stroke: #EC5410; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .drd-dash .dash-dot { fill: #EC5410; stroke: var(--drd-c-white); stroke-width: 3; } /* A/B drawing (.drd-ab): two versions of one ad side by side, the winner outlined, checked, its bar longer. */ .drd-ab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .drd-ab__v { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: var(--drd-radius-md); background-color: var(--drd-c-white); box-shadow: 0 0 0 1px var(--drd-c-border); } .drd-ab__v > u { display: block; height: 92px; border-radius: var(--drd-radius-sm); background-color: var(--drd-c-chip); } .drd-ab__v > i { display: block; height: 8px; border-radius: 4px; background-color: var(--drd-c-bar); } .drd-ab__v > i + i { width: 66%; opacity: 0.6; } .drd-ab__v > b { display: block; height: 10px; margin-top: 6px; border-radius: 5px; background-color: var(--drd-c-bar); } .drd-ab__v > svg { position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; } .drd-ab__v.is-win { box-shadow: 0 0 0 2px #EC5410; } .drd-ab__v.is-win > u { background-image: linear-gradient(135deg, #E86200 0%, #F04020 100%); } .drd-ab__v.is-win > b { background-image: var(--drd-grad-logo-bar); } /* * Stacking cards: Container → Advanced → CSS Classes: drd-stack. Each child container is a card; from * tablets up the cards pin near the top of the window as you scroll and each next card slides over the * last, leaving their top edges stacked. Cards need a solid background. Phones get a plain column. */ .elementor-element.e-con.drd-stack > .e-con { box-shadow: 0 -14px 40px rgba(30, 30, 30, 0.08); } .elementor-element.e-con.drd-stack > .e-con { --i: 0; } .elementor-element.e-con.drd-stack > .e-con:nth-child(2) { --i: 1; } .elementor-element.e-con.drd-stack > .e-con:nth-child(3) { --i: 2; } .elementor-element.e-con.drd-stack > .e-con:nth-child(4) { --i: 3; } .elementor-element.e-con.drd-stack > .e-con:nth-child(5) { --i: 4; } .elementor-element.e-con.drd-stack > .e-con:nth-child(6) { --i: 5; } .elementor-element.e-con.drd-stack > .e-con:nth-child(7) { --i: 6; } .elementor-element.e-con.drd-stack > .e-con:nth-child(8) { --i: 7; } @media (min-width: 768px) { .elementor-element.e-con.drd-stack > .e-con { position: sticky; top: calc(var(--drd-stack-top, 32px) + var(--i) * var(--drd-stack-step, 22px)); min-height: max(var(--drd-stack-min, 400px), var(--drd-stack-h, 0px)); /* --drd-stack-h: tallest card, set by drd-kit.js */ } /* The section heading (CSS class drd-stack-head) stays in view above the cards while they stack; it paints under them, so at the section's end the last card slides over it. */ .elementor-element.drd-stack-head { position: sticky; top: 28px; z-index: 0; } .elementor-element.e-con:has(> .e-con-inner > .drd-stack-head, > .drd-stack-head) { --drd-stack-top: calc(28px + var(--drd-stack-head-h, 56px) + 28px); } } /* * Expanding panels: Container → Advanced → CSS Classes: drd-expand. Each child container is a panel; from * desktops up they sit side by side, one open and the rest folded to a strip with its icon and title * (drd-kit.js adds those from the panel's Feature Card). Hover, click or focus opens a strip. Below that, * or without JS, every panel shows, one after another. Only for content that can wait behind a click: most * of it is folded away at any moment. */ .drd-expand__label { display: none; } @media (min-width: 1025px) { .elementor-element.e-con.drd-expand.is-ready { flex-direction: row; align-items: stretch; gap: 14px; min-height: var(--drd-expand-h, 460px); } .drd-expand.is-ready > .e-con { position: relative; flex: 0 0 var(--drd-expand-strip, 92px); min-width: 0; overflow: hidden; transition: flex-basis 380ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease, box-shadow 200ms ease; } .drd-expand.is-ready > .e-con.is-open { flex: 1 1 auto; box-shadow: 0 18px 50px rgba(30, 30, 30, 0.08); } /* The open panel's content keeps its width while panels resize, so text never reflows mid-move. */ .drd-expand.is-ready > .e-con > :not(.drd-expand__label) { min-width: var(--drd-expand-content, 560px); transition: opacity 220ms ease; } .drd-expand.is-ready > .e-con:not(.is-open) > :not(.drd-expand__label) { visibility: hidden; opacity: 0; transition: none; } .drd-expand.is-ready .drd-expand__label { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 30px 0; border: 0; border-radius: inherit; background: none; box-shadow: none; color: var(--drd-c-ink); font: inherit; cursor: pointer; transition: background-color 200ms ease; } .drd-expand.is-ready > .e-con.is-open .drd-expand__label { visibility: hidden; } .drd-expand.is-ready .drd-expand__label:hover, .drd-expand.is-ready .drd-expand__label:focus { background: none; background-color: rgba(236, 84, 16, 0.08); color: var(--drd-c-ink); } .drd-expand.is-ready .drd-expand__label:focus-visible { outline: 2px solid #EC5410; outline-offset: -4px; } } .drd-expand__icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--drd-radius-sm); background-color: var(--drd-c-cream); color: var(--drd-c-ink-soft); line-height: 0; transition: background-color 200ms ease, color 200ms ease; } .drd-expand__icon svg { width: 24px; height: 24px; } .drd-expand__icon svg [fill]:not([fill="none"], [fill="#FFFFFF"], [fill="#fff"]) { fill: currentColor; } .drd-expand__label:hover .drd-expand__icon, .drd-expand__label:focus-visible .drd-expand__icon { background-color: #FFFFFF; color: #EC5410; } /* The chevron says "open me": it fills orange and nudges right on hover. */ .drd-expand__more { display: grid; place-items: center; width: 36px; height: 36px; margin-top: auto; border-radius: 50%; background-color: var(--drd-c-cream); color: var(--drd-c-ink); transition: background-color 200ms ease, color 200ms ease, transform 200ms ease; } .drd-expand__more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .drd-expand__label:hover .drd-expand__more, .drd-expand__label:focus-visible .drd-expand__more { background-color: #EC5410; color: #FFFFFF; transform: translateX(3px); } .drd-expand__title { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: 0; white-space: nowrap; text-transform: none; } /* * Acronym heading: AEO — Answer Engine * Optimization. The acronym is set large in the logo gradient on its own line; the dash only shows without CSS. */ .elementor-element .drd-acro { display: block; width: fit-content; margin-bottom: 12px; font-size: clamp(56px, 5.6vw, 84px); line-height: 0.95; letter-spacing: -0.03em; background-image: var(--drd-grad-logo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .elementor-element .drd-acro-sep { display: none; } /* AI answer drawing (.drd-answer): a question, an AI answer citing its sources with the brand's lit and checked, and the page-one links under it, faded. */ .drd-answer { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: var(--drd-radius-xl); background-color: var(--drd-c-white); } .drd-answer__ask { align-self: flex-end; display: flex; flex-direction: column; gap: 7px; width: 58%; padding: 13px 16px; border-radius: 16px 16px 4px 16px; background-color: var(--drd-c-chip); } .drd-answer__ask i { display: block; height: 8px; border-radius: 4px; background-color: var(--drd-c-bar); } .drd-answer__ask i + i { width: 60%; } .drd-answer__card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--drd-radius-md); background-color: rgba(236, 84, 16, 0.1); box-shadow: inset 0 0 0 1px rgba(236, 84, 16, 0.3); } .drd-answer__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .drd-answer__head svg { width: 24px; height: 24px; fill: #EC5410; } .drd-answer__head i { display: block; width: 34%; height: 10px; border-radius: 5px; background-image: var(--drd-grad-logo-bar); } .drd-answer__card > i { display: block; height: 8px; border-radius: 4px; background-color: var(--drd-c-bar); } .drd-answer__card > i:nth-of-type(2) { width: 92%; } .drd-answer__card > i:nth-of-type(3) { width: 64%; } .drd-answer__src { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .drd-answer__src span { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 999px; background-color: var(--drd-c-chip); } .drd-answer__src b { width: 14px; height: 14px; border-radius: 50%; background-color: var(--drd-c-bar); } .drd-answer__src i { display: block; width: 46px; height: 7px; border-radius: 4px; background-color: var(--drd-c-bar); } .drd-answer__src svg { width: 18px; height: 18px; } .drd-answer__src .is-you { background-color: var(--drd-c-white); box-shadow: 0 0 0 2px #EC5410; } .drd-answer__src .is-you b { background-image: var(--drd-grad-logo-bar); } .drd-answer__links { display: flex; flex-direction: column; gap: 10px; padding: 6px 4px 0; opacity: 0.35; } .drd-answer__links i { display: block; height: 8px; border-radius: 4px; background-color: var(--drd-c-bar); } .drd-answer__links i:nth-child(2) { width: 80%; } .drd-answer__links i:nth-child(3) { width: 62%; } /* * Timeline: Container → Advanced → CSS Classes: drd-timeline. Each child container is a step. From desktops * up the steps zigzag down a centre line; below that they run in one column beside a line on the left. A * step heading's 1. becomes its node. */ .elementor-element.e-con.drd-timeline { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; padding-left: 76px; overflow: clip; } .elementor-element.e-con.drd-timeline::before { content: ""; position: absolute; top: 30px; bottom: 30px; left: 25px; width: 2px; border-radius: 1px; background-image: linear-gradient(180deg, #E86200 0%, #F04020 100%); } .drd-timeline > .e-con { position: relative; overflow: visible; } /* Widgets are positioned by Elementor; the node must measure from the step card instead. */ .drd-timeline > .e-con > .elementor-widget { position: static; } .elementor-element .drd-timeline .drd-step-n { position: absolute; top: var(--drd-step-y, 38px); left: -76px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background-image: var(--drd-grad-logo-bar); box-shadow: 0 0 0 8px var(--drd-c-cream); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; font-size: 20px; line-height: 1; } .elementor-element .drd-timeline .drd-step-dot { display: none; } /* The line ends at the last node: below it, a strip in the section colour covers the rest (clipped to the timeline). */ .elementor-element .drd-timeline > .e-con:last-child .drd-step-n::after { content: ""; position: absolute; top: calc(100% + 8px); left: calc(50% - 3px); width: 6px; height: 3000px; background-color: var(--drd-c-cream); } /* The node sits level with the step title's first line; card padding shrinks on smaller screens. */ @media (min-width: 768px) and (max-width: 1024px) { .drd-timeline { --drd-step-y: 27px; } } @media (max-width: 767px) { .drd-timeline { --drd-step-y: 15px; } } @media (min-width: 1025px) { .elementor-element.e-con.drd-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 128px; row-gap: 0; padding-left: 0; } .elementor-element.e-con.drd-timeline::before { left: calc(50% - 1px); } .drd-timeline > .e-con { margin-bottom: 28px; } .drd-timeline > .e-con:nth-child(odd) { grid-column: 1; } .drd-timeline > .e-con:nth-child(even) { grid-column: 2; } .drd-timeline > .e-con:nth-child(1) { grid-row: 1 / span 2; } .drd-timeline > .e-con:nth-child(2) { grid-row: 2 / span 2; } .drd-timeline > .e-con:nth-child(3) { grid-row: 3 / span 2; } .drd-timeline > .e-con:nth-child(4) { grid-row: 4 / span 2; } .drd-timeline > .e-con:nth-child(5) { grid-row: 5 / span 2; } .drd-timeline > .e-con:nth-child(6) { grid-row: 6 / span 2; } .drd-timeline > .e-con:nth-child(7) { grid-row: 7 / span 2; } .drd-timeline > .e-con:nth-child(8) { grid-row: 8 / span 2; } .elementor-element .drd-timeline > .e-con:nth-child(odd) .drd-step-n { left: auto; right: -90px; } .elementor-element .drd-timeline > .e-con:nth-child(even) .drd-step-n { left: -90px; } } /* Dot grid drawing (.drd-dots): one hundred visitors, the one who buys lit. */ .drd-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; padding: 28px; border-radius: var(--drd-radius-xl); background-color: var(--drd-c-white); } .drd-dots i { display: block; aspect-ratio: 1; border-radius: 50%; background-color: var(--drd-c-bar); opacity: 0.5; } .drd-dots i.is-one { background-image: var(--drd-grad-logo-bar); opacity: 1; box-shadow: 0 0 0 6px rgba(236, 84, 16, 0.25); } /* Large chips: Chips widget → CSS Classes: drd-chips-lg, for a short list that carries a section. */ .drd-chips-lg .drd-chips__list { gap: 12px; } .drd-chips-lg .drd-chip { padding: 14px 22px; font-size: 16px; font-weight: 500; } .drd-chips-lg .drd-chip:has(.drd-chip__icon) { gap: 12px; } /* * Scroll reveal: Container → Advanced → CSS Classes: drd-reveal. Each child container is a block of copy with * one HTML widget marked drd-reveal__art (its drawing). From desktops up the copy scrolls on the left while * drd-kit.js pins a stage on the right showing the drawing of the block being read; the others dim a little. * Below that (or without JS) each drawing shows inside its block. */ .drd-reveal > .e-con { padding-block: 44px; border-top: 1px solid var(--drd-c-divider); } .drd-reveal > .e-con:first-child { padding-top: 0; border-top: 0; } .drd-reveal__stage { display: none; } @media (min-width: 1025px) { .elementor-element.e-con.drd-reveal.is-ready { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; align-items: start; } .drd-reveal.is-ready > .e-con { grid-column: 1; transition: opacity 300ms ease; } .drd-reveal.is-ready > .e-con:not(.is-active) { opacity: 0.62; } .drd-reveal.is-ready .drd-reveal__art { display: none; } .drd-reveal.is-ready > .drd-reveal__stage { position: sticky; top: calc(50vh - 230px); display: grid; grid-column: 2; } .drd-reveal__slide { grid-area: 1 / 1; opacity: 0; transform: translateY(14px) scale(0.98); transition: opacity 380ms ease, transform 380ms ease; } .drd-reveal__slide.is-active { opacity: 1; transform: none; } } /* Shop drawing (.drd-shop): a store with products, the chosen one lit, and the cart. */ .drd-shop { overflow: hidden; border-radius: var(--drd-radius-lg); background-color: var(--drd-c-white); box-shadow: 0 0 0 1px var(--drd-c-border); } .drd-shop__body { display: flex; flex-direction: column; gap: 14px; padding: 20px; } .drd-shop__top { display: flex; align-items: center; justify-content: space-between; } .drd-shop__top i { display: block; width: 40%; height: 12px; border-radius: 6px; background-color: var(--drd-c-bar); } .drd-shop__top b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background-image: var(--drd-grad-logo-bar); } .drd-shop__top svg { width: 20px; height: 20px; fill: #FFFFFF; } .drd-shop__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .drd-shop__grid span { display: flex; flex-direction: column; gap: 7px; padding: 10px; border-radius: var(--drd-radius-md); box-shadow: inset 0 0 0 1px var(--drd-c-border); } .drd-shop__grid u { display: block; height: 84px; border-radius: var(--drd-radius-sm); background-color: var(--drd-c-chip); } .drd-shop__grid i { display: block; height: 8px; border-radius: 4px; background-color: var(--drd-c-bar); } .drd-shop__grid i + i { width: 38%; } .drd-shop__grid span.is-pick { box-shadow: 0 0 0 2px #EC5410; } .drd-shop__grid span.is-pick u { background-image: linear-gradient(135deg, #E86200 0%, #F04020 100%); } .drd-shop__grid span.is-pick i + i { background-image: var(--drd-grad-logo-bar); } /* Calendar drawing (.drd-cal): posting at random, then the same month on a plan. */ .drd-cal { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); align-items: center; gap: 14px; } .drd-cal > svg { width: 26px; height: 26px; fill: var(--drd-c-muted); } .drd-cal__m { padding: 18px; border-radius: var(--drd-radius-lg); background-color: var(--drd-c-white); } .drd-cal__m > u { display: block; width: 45%; height: 10px; margin-bottom: 14px; border-radius: 5px; background-color: var(--drd-c-bar); } .drd-cal__m > div { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .drd-cal__m i { display: block; height: 22px; border-radius: 6px; background-color: var(--drd-c-chip); } .drd-cal__m.is-random { opacity: 0.75; } .drd-cal__m.is-random i.on { background-color: var(--drd-c-bar); } .drd-cal__m.is-plan i.on { background-image: var(--drd-grad-logo-bar); } @media (max-width: 480px) { .drd-cal { grid-template-columns: minmax(0, 1fr); } .drd-cal > svg { justify-self: center; transform: rotate(90deg); } } /* Feed drawing (.drd-feed): a profile grid, the posts that landed in the logo gradient. */ .drd-feed { padding: 18px; border-radius: var(--drd-radius-lg); background-color: var(--drd-c-white); box-shadow: 0 0 0 1px var(--drd-c-border); } .drd-feed__head { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 6px 12px; } .drd-feed__head b { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background-image: var(--drd-grad-logo-bar); } .drd-feed__head i { display: block; width: 44%; height: 9px; border-radius: 5px; background-color: var(--drd-c-bar); } .drd-feed__head i + i { width: 66%; opacity: 0.6; } .drd-feed__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 16px; } .drd-feed__grid i { display: block; height: 78px; border-radius: 8px; background-color: var(--drd-c-chip); } .drd-feed__grid i.is-warm { background-color: rgba(236, 84, 16, 0.22); } .drd-feed__grid i.is-hot { background-image: linear-gradient(135deg, #E86200 0%, #F04020 100%); } /* Chat drawing (.drd-chat): comments and DMs coming in, the brand's replies in the logo gradient. */ .drd-chat { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--drd-radius-lg); background-color: var(--drd-c-white); box-shadow: 0 0 0 1px var(--drd-c-border); } .drd-chat span { display: flex; flex-direction: column; gap: 7px; width: 68%; padding: 13px 15px; border-radius: 16px 16px 16px 4px; background-color: var(--drd-c-chip); } .drd-chat span i { display: block; height: 8px; border-radius: 4px; background-color: var(--drd-c-bar); } .drd-chat span i + i { width: 64%; } .drd-chat span.is-us { align-self: flex-end; border-radius: 16px 16px 4px 16px; background-image: linear-gradient(135deg, #E86200 0%, #F04020 100%); } .drd-chat span.is-us i { background-color: rgba(255, 255, 255, 0.78); } /* Too short a window for a pinned card (tablets in landscape, short laptops): the cards just scroll. */ @media (min-width: 768px) and (max-width: 1024px) and (max-height: 949px), (max-height: 699px) { .elementor-element.e-con.drd-stack > .e-con { position: relative; top: auto; } .elementor-element.drd-stack-head { position: relative; top: auto; } } /* Stacked cards have room for larger service titles and icons. */ .drd-stack .drd-card__title { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.2; } .drd-stack .drd-card { --drd-card-icon-size: 32px; } .drd-stack .drd-card__icon--tile { width: 60px; height: 60px; } /* * Flow: Chips widget → Advanced → CSS Classes: drd-flow. The chips become one automated sequence: * full-width steps on a rail, a node on each, joined to the next. With motion allowed, * the nodes light one after another (step 1 to the last, a pause, then again); still for reduced motion. */ .drd-flow { --drd-flow-gap: 16px; --drd-flow-node: 14px; --drd-flow-y: 25px; /* node centre, level with the step's first line */ --drd-flow-step: 1.1s; /* time between one node lighting and the next */ --drd-flow-tint: rgba(236, 84, 16, 0.1); --drd-flow-edge: rgba(236, 84, 16, 0.38); } .drd-flow .drd-chips__list { flex-direction: column; align-items: stretch; gap: var(--drd-flow-gap); } .drd-flow .drd-chips__list > li { position: relative; padding-left: calc(var(--drd-flow-node) + 18px); } .drd-flow .drd-chip { display: flex; width: 100%; box-sizing: border-box; padding: 15px 20px; border: 1px solid var(--drd-flow-edge); border-radius: var(--drd-radius-md); background-color: var(--drd-flow-tint); color: var(--drd-c-ink); font-weight: 500; line-height: 1.5; } /* Node */ .drd-flow .drd-chips__list > li::after { content: ""; position: absolute; top: calc(var(--drd-flow-y) - var(--drd-flow-node) / 2); left: 0; width: var(--drd-flow-node); height: var(--drd-flow-node); border-radius: 50%; background-image: var(--drd-grad-logo-bar); box-shadow: 0 0 0 4px rgba(236, 84, 16, 0.2); } /* Rail from this node down to the next one. */ .drd-flow .drd-chips__list > li:not(:last-child)::before { content: ""; position: absolute; top: calc(var(--drd-flow-y) + var(--drd-flow-node) / 2 + 6px); bottom: calc(-1 * (var(--drd-flow-gap) + var(--drd-flow-y) - var(--drd-flow-node) / 2 - 6px)); left: calc(var(--drd-flow-node) / 2 - 1px); width: 2px; border-radius: 1px; background-image: linear-gradient(180deg, #E86200 0%, #F04020 100%); } /* Sequence: each step's place (--i) and the number of steps (--n), for the timing below. */ .drd-flow .drd-chips__list { --n: 12; } .drd-flow .drd-chips__list:has(> li:last-child:nth-child(2)) { --n: 2; } .drd-flow .drd-chips__list:has(> li:last-child:nth-child(3)) { --n: 3; } .drd-flow .drd-chips__list:has(> li:last-child:nth-child(4)) { --n: 4; } .drd-flow .drd-chips__list:has(> li:last-child:nth-child(5)) { --n: 5; } .drd-flow .drd-chips__list:has(> li:last-child:nth-child(6)) { --n: 6; } .drd-flow .drd-chips__list:has(> li:last-child:nth-child(7)) { --n: 7; } .drd-flow .drd-chips__list:has(> li:last-child:nth-child(8)) { --n: 8; } .drd-flow .drd-chips__list:has(> li:last-child:nth-child(9)) { --n: 9; } .drd-flow .drd-chips__list:has(> li:last-child:nth-child(10)) { --n: 10; } .drd-flow .drd-chips__list > li { --i: 0; } .drd-flow .drd-chips__list > li:nth-child(2) { --i: 1; } .drd-flow .drd-chips__list > li:nth-child(3) { --i: 2; } .drd-flow .drd-chips__list > li:nth-child(4) { --i: 3; } .drd-flow .drd-chips__list > li:nth-child(5) { --i: 4; } .drd-flow .drd-chips__list > li:nth-child(6) { --i: 5; } .drd-flow .drd-chips__list > li:nth-child(7) { --i: 6; } .drd-flow .drd-chips__list > li:nth-child(8) { --i: 7; } .drd-flow .drd-chips__list > li:nth-child(9) { --i: 8; } .drd-flow .drd-chips__list > li:nth-child(10) { --i: 9; } /* One cycle has a slot per step plus one empty slot, so the loop pauses before step 1 again. Each node lights in the first part of its slot and rests for the rest of it. */ @keyframes drd-flow-node { 0%, 9%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(236, 84, 16, 0.2); } 3% { transform: scale(1.4); box-shadow: 0 0 0 10px rgba(236, 84, 16, 0.3); } } @keyframes drd-flow-step { 0%, 11%, 100% { border-color: var(--drd-flow-edge); background-color: var(--drd-flow-tint); } 3% { border-color: #F04020; background-color: rgba(236, 84, 16, 0.24); } } @media (prefers-reduced-motion: no-preference) { .drd-flow .drd-chips__list > li::after, .drd-flow .drd-chips__list > li > .drd-chip { animation: drd-flow-node calc((var(--n) + 1) * var(--drd-flow-step)) ease-in-out calc(var(--i) * var(--drd-flow-step)) infinite both; } .drd-flow .drd-chips__list > li > .drd-chip { animation-name: drd-flow-step; } } /* Inline tag: around a name in running text, e.g. the platforms a team works in. */ .elementor-element .drd-tag { display: inline-block; padding: 0 8px; border-radius: 999px; background-color: var(--drd-c-chip); color: var(--drd-c-ink); font-weight: 600; font-size: 0.88em; line-height: 1.6; white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .drd-js :is(.drd-funnel, .drd-report) i { transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); } .drd-js .drd-funnel:not(.is-in) i { transform: scaleX(0.2); } .drd-js .drd-report:not(.is-in) i { transform: scaleY(0.1); } .drd-js .is-in :is(.drd-funnel, .drd-report) i:nth-child(2) { transition-delay: 60ms; } .drd-js .is-in :is(.drd-funnel, .drd-report) i:nth-child(3) { transition-delay: 120ms; } .drd-js .is-in :is(.drd-funnel, .drd-report) i:nth-child(n+4) { transition-delay: 180ms; } } /* Before / After: label, before → after, change pill. A real table, so it keeps its row rules. */ .drd-ba { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } /* Doubled class: beats the theme's table borders and zebra rows. */ table.drd-ba.drd-ba :is(th, td) { padding: 14px 12px; border: 0; border-top: 1px solid var(--drd-c-divider); background: none; text-align: left; vertical-align: middle; } table.drd-ba.drd-ba thead tr:first-child :is(th, td) { padding-top: 0; padding-bottom: 10px; border-top: 0; border-block-start: 0; } table.drd-ba.drd-ba tbody > tr > :is(th, td) { background-color: transparent; } table.drd-ba.drd-ba :is(th, td):first-child { padding-left: 0; } table.drd-ba.drd-ba :is(th, td):last-child { padding-right: 0; text-align: right; } .drd-ba .drd-ba__head { color: var(--drd-c-muted); font-weight: 500; white-space: nowrap; } .drd-ba .drd-ba__head--after { color: var(--drd-c-ink); font-weight: 600; } .drd-ba .drd-ba__label { color: var(--drd-c-ink); white-space: nowrap; } .drd-ba__label > * { vertical-align: middle; } .drd-ba__icon { display: inline-flex; margin-right: 10px; line-height: 0; } .drd-ba__icon svg { width: 22px; height: 22px; } .drd-ba .drd-ba__before { color: var(--drd-c-muted); font-size: 17px; white-space: nowrap; } .drd-ba .drd-ba__after { color: var(--drd-c-ink); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; } .drd-ba .drd-ba__after::before { content: "→"; margin-right: 14px; font-weight: 400; font-size: 17px; color: var(--drd-c-bar); } .drd-ba .drd-ba__note { color: var(--drd-c-ink); } .drd-ba__pill { display: inline-block; min-width: 72px; padding: 6px 12px; border-radius: 999px; font-size: 15px; font-weight: 700; text-align: center; white-space: nowrap; } .drd-ba__pill.is-win { background-color: var(--drd-c-orange-soft); color: var(--drd-c-orange-deep); } .drd-ba__pill.is-neutral { background-color: var(--drd-c-chip); color: var(--drd-c-ink-soft); } /* Phones: each row becomes label, then before → after with the change beside it. */ @media (max-width: 767px) { .drd-ba thead { display: none; } .drd-ba, .drd-ba tbody { display: block; } .drd-ba__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--drd-c-divider); } table.drd-ba.drd-ba .drd-ba__row :is(th, td) { padding: 0; border: 0; } .drd-ba .drd-ba__label { grid-column: 1 / -1; } .drd-ba .drd-ba__note { grid-column: 1 / 3; } .drd-ba .drd-ba__after { font-size: 20px; } } /* Trend Pair: two stock-style charts, figure on top, both in the brand orange (both moves are wins). */ .drd-trend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .drd-trend__item { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 20px 20px 18px; border-radius: var(--drd-radius-md); background-color: var(--drd-c-white); } .drd-trend__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font-style: normal; } .drd-trend .drd-trend__value { color: var(--drd-c-orange); line-height: 1; } .drd-trend .drd-trend__name { color: var(--drd-c-ink); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .drd-trend .drd-trend__value { background-image: var(--drd-grad-logo); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } .drd-trend__plot { position: relative; height: 96px; margin-right: 6px; } .drd-trend__chart { display: block; width: 100%; height: 100%; overflow: visible; } .drd-trend__start { stroke: var(--drd-c-bar); stroke-width: 1.5; stroke-dasharray: 3 5; } .drd-trend__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .drd-trend__dot { position: absolute; width: 12px; height: 12px; border: 3px solid var(--drd-c-white); border-radius: 50%; background-color: #F04020; box-shadow: 0 0 0 1px rgba(240, 64, 32, 0.25); transform: translate(-50%, -50%); } @media (max-width: 767px) { .drd-trend { grid-template-columns: minmax(0, 1fr); } } /* Client strip: Feature Card in a container with drd-client sets icon beside "Client / name / detail". */ .drd-client .drd-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 18px; } .drd-client .drd-card__icon { grid-row: span 3; } .drd-client .drd-card__meta { order: -1; grid-column: 2; color: var(--drd-c-muted); } .drd-client .drd-card__title, .drd-client .drd-card__desc { grid-column: 2; } .drd-client .drd-card__desc { color: var(--drd-c-text); } /* Story labels inside a case: The challenge / What we did / What changed. */ .drd-story-step .drd-sh__eyebrow { margin-bottom: 6px; } /* Site showcase (.drd-showcase, HTML widget): a real screenshot in a browser window, with a second image (e.g. a video still) as a captioned card over its lower corner. Phones drop the overlap. */ .drd-showcase { position: relative; margin: 0; padding: 0 0 72px; } .drd-browser { overflow: hidden; border-radius: var(--drd-radius-lg); background-color: var(--drd-c-white); box-shadow: 0 0 0 1px var(--drd-c-border), var(--drd-shadow-raised); } .drd-browser__bar { display: flex; align-items: center; gap: 6px; padding: 11px 16px; background-color: var(--drd-c-chip); } .drd-browser__bar i { width: 9px; height: 9px; border-radius: 50%; background-color: var(--drd-c-bar); } .drd-browser__bar span { margin-left: 12px; padding: 3px 14px; border-radius: 999px; background-color: var(--drd-c-white); color: var(--drd-c-muted); font-size: 12px; line-height: 1.4; } .drd-browser img, .drd-showcase__still img { display: block; width: 100%; height: auto; } .drd-showcase__still { position: absolute; right: -12px; bottom: 0; width: 46%; margin: 0; padding: 8px 8px 12px; border-radius: var(--drd-radius-md); background-color: var(--drd-c-white); box-shadow: 0 0 0 1px var(--drd-c-border), var(--drd-shadow-raised); } .drd-showcase__still img { border-radius: var(--drd-radius-sm); } .drd-showcase__still figcaption { padding: 10px 4px 0; color: var(--drd-c-muted); font-size: 13px; font-style: normal; line-height: 1.4; } @media (max-width: 767px) { .drd-showcase { display: flex; flex-direction: column; gap: 14px; padding: 0; } .drd-showcase__still { position: static; width: 72%; align-self: flex-end; } } /* drd-tiles-white on a Stat Table: white tiles, for tile sets sitting on a cream field. */ .drd-tiles-white { --drd-tile-bg: var(--drd-c-white); } /* drd-ba-wrap on a Before / After widget: long labels wrap, for a table in a half-width card. */ .drd-ba-wrap .drd-ba .drd-ba__label { white-space: normal; } /* Portrait (.drd-portrait on an Image widget): a person's photo cropped to 4:5 with the card radius. */ .drd-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: var(--drd-radius-xl); } /* ------------------------------------------------------------------ 6. Motion */ /* * Bars grow once as they come into view (assets/js/drd-kit.js adds .is-in). * Without the script, or with reduced motion, everything is shown at rest. */ @media (prefers-reduced-motion: no-preference) { .drd-js :is(.drd-stable__bar-after, .drd-stable__bar-before, .drd-serp__share span, .drd-cbars__bar, .drd-barlist__bar) { transform: scaleX(0); transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); } .drd-js .is-in :is(.drd-stable__bar-after, .drd-stable__bar-before, .drd-serp__share span, .drd-cbars__bar, .drd-barlist__bar) { transform: none; } .drd-js .drd-trend__line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1400ms cubic-bezier(0.45, 0, 0.2, 1); } .drd-js .drd-trend.is-in .drd-trend__line { stroke-dashoffset: 0; } .drd-js .drd-trend :is(.drd-trend__area, .drd-trend__dot) { opacity: 0; transition: opacity 500ms ease 1100ms; } .drd-js .drd-trend.is-in :is(.drd-trend__area, .drd-trend__dot) { opacity: 1; } .drd-js .is-in .drd-stable__bar-after { transition-delay: 120ms; } .drd-js .drd-serp__result.is-top { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1); } .drd-js .is-in .drd-serp__result.is-top { opacity: 1; transform: none; } .drd-js .is-in .drd-serp__result.is-top:nth-of-type(3) { transition-delay: 90ms; } .drd-js .is-in .drd-serp__result.is-top:nth-of-type(4) { transition-delay: 180ms; } } /* ---- Case study cards, ruled rows, panel photo (rollout batch C, 2026-11-04: Case Studies index 1461, DRD R&D 1885). ---- */ /* * Case study card (.drd-cs, in an HTML widget): the whole card is one link. Photo, pills, client, result, and a * label row ending in the kit's round chevron (orange on hover). Pages: Case Studies index (1461). */ .elementor-element .drd-cs { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--drd-radius-2xl); background-color: var(--drd-c-cream); color: var(--drd-c-ink); text-decoration: none; transition: box-shadow 250ms ease, transform 250ms ease; } .elementor-element .drd-cs:hover { box-shadow: var(--drd-shadow-raised); transform: translateY(-4px); } .elementor-element .drd-cs:focus-visible { outline: 3px solid var(--drd-c-orange-deep); outline-offset: 3px; } .drd-cs__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; } .drd-cs__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); } .drd-cs:hover .drd-cs__img img { transform: scale(1.04); } .drd-cs__body { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: var(--drd-space-card-pad); } .drd-cs__pills { display: flex; flex-wrap: wrap; gap: 8px; } .drd-cs__pills span { padding: 4px 12px; border-radius: var(--drd-radius-pill); background-color: var(--drd-c-white); font-size: 13px; font-weight: 600; line-height: 1.5; } .elementor-element .drd-cs__title { margin: 0; color: var(--drd-c-ink); transition: color 200ms ease; } .drd-cs:hover .drd-cs__title { color: var(--drd-c-orange-deep); } .elementor-element .drd-cs__desc { margin: 0; color: var(--drd-c-ink-soft); } .drd-cs__go { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--drd-c-border, rgba(30, 30, 30, 0.12)); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; } .drd-cs__go::after { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--drd-c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%231E1E1E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; transition: background-color 200ms ease, transform 200ms ease; } .drd-cs:hover .drd-cs__go::after, .drd-cs:focus-visible .drd-cs__go::after { background: #EC5410 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; transform: translateX(3px); } /* * Ruled rows (drd-rows on a container; each child container classed drd-row is one item: icon + title, then * its text). A hairline above every row, none above the first. Pages: DRD R&D (1885). */ .elementor-element.e-con.drd-rows { gap: 0; } .elementor-element.e-con.drd-row { padding: 40px 0; border-top: 1px solid var(--drd-c-border, rgba(30, 30, 30, 0.14)); } .elementor-element.e-con.drd-row:first-child { padding-top: 0; border-top: 0; } .elementor-element.e-con.drd-row:last-child { padding-bottom: 0; } /* Dark panel photo (drd-lab-img on an Image widget): a rounded picture that sits as a panel in its section. */ .drd-lab-img img { display: block; width: 100%; height: auto; border-radius: var(--drd-radius-xl); } /* ---- Named portrait (rollout batch B, 2026-11-04: Team 1310). ---- */ /* Named portrait (.drd-portrait--named on an Image widget with a custom caption): the person's name sits on the lower edge of the photo as a plate, so it is visible without hovering. */ .drd-portrait--named .widget-image-caption, .drd-portrait--named figcaption { position: absolute; left: 14px; bottom: 14px; margin: 0; padding: 8px 16px; background: var(--drd-c-white, #fff); color: var(--drd-c-ink, #1f1f1f); border-radius: 999px; font-size: 14px; font-weight: 600; font-style: normal; line-height: 1.2; text-align: left; } .drd-portrait--named .elementor-widget-container { position: relative; } .drd-portrait--named figure { position: relative; margin: 0; } /* ---- Contact form card + Thank You (rollout batch D, 2026-11-04: Contact 683, Thank You 854). * The Elementor Pro form inside .drd-form-card, styled to the kit; and the Thank You confirmation. * Used by: /contact/ (683), /thank-you/ (854). */ .drd-form-card .elementor-form { --drd-field-bd: #D9D2CA; } .drd-form-card .elementor-field-group { margin-bottom: 22px; } .drd-form-card .elementor-field-group.elementor-field-type-submit, .drd-form-card .elementor-field-group.elementor-field-type-recaptcha_v3, .drd-form-card .elementor-field-group.elementor-field-type-honeypot { margin-bottom: 0; } .drd-form-card .elementor-field-group > .elementor-field-label { color: var(--drd-c-ink); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; display: block; margin-bottom: 8px; padding: 0; line-height: 1.3; } .elementor-kit-6 .drd-form-card .elementor-field-group .elementor-field-textual { width: 100%; box-sizing: border-box; min-height: 54px; padding: 14px 18px; background: var(--drd-c-cream); color: var(--drd-c-ink); border: 1.5px solid var(--drd-field-bd); border-radius: var(--drd-radius-sm); font: inherit; font-size: 16px; line-height: 1.4; transition: border-color .15s, box-shadow .15s, background-color .15s; } .elementor-kit-6 .drd-form-card .elementor-field-group textarea.elementor-field-textual { min-height: 150px; resize: vertical; } .elementor-kit-6 .drd-form-card .elementor-field-group .elementor-field-textual::placeholder { color: var(--drd-c-muted); opacity: 1; } .elementor-kit-6 .drd-form-card .elementor-field-group .elementor-field-textual:hover { border-color: var(--drd-c-bar); } .elementor-kit-6 .drd-form-card .elementor-field-group .elementor-field-textual:focus, .elementor-kit-6 .drd-form-card .elementor-field-group .elementor-field-textual:focus-visible { outline: none; background: var(--drd-c-white); border-color: var(--drd-c-orange-deep); box-shadow: 0 0 0 4px rgba(204, 71, 0, 0.22); } .drd-form-card .elementor-field-required .elementor-field-label::after, .drd-form-card .elementor-mark-required .elementor-field-label::after { color: var(--drd-c-orange-deep); } .elementor-kit-6 .drd-form-card .elementor-field-group .elementor-field-textual:is(.elementor-error, [aria-invalid="true"]), .elementor-kit-6 .drd-form-card .elementor-error .elementor-field-textual { border-color: #B3261E; background: #FFF6F5; } .elementor-kit-6 .drd-form-card .elementor-error .elementor-field-textual:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.2); } .drd-form-card .elementor-message { font-size: 15px; margin-top: 4px; } .drd-form-card .elementor-message.elementor-message-danger { color: #B3261E; } .drd-form-card .elementor-message.elementor-message-success { color: var(--drd-c-ink); } .drd-form-card .elementor-field-type-submit { padding-top: 8px; } .drd-form-card .elementor-button[type="submit"] { border-radius: var(--drd-radius-pill); padding: 17px 44px; border: 0; font-weight: 700; font-size: 17px; letter-spacing: 0.01em; text-transform: none; } .drd-form-card .elementor-button[type="submit"]:focus-visible { outline: 3px solid var(--drd-c-ink); outline-offset: 3px; } .drd-form-card .drd-form-legal, .drd-form-card .drd-form-legal p { font-size: 13px; line-height: 1.5; color: var(--drd-c-muted); margin: 0; } .drd-form-card .drd-form-legal a { color: var(--drd-c-ink-soft); text-decoration: underline; } @media (max-width: 767px) { .elementor-kit-6 .drd-form-card .elementor-field-group .elementor-field-textual { font-size: 15px; padding-inline: 14px; } .drd-form-card { --drd-space-card-pad-lg: 22px; padding: 22px !important; } .drd-form-card .elementor-button[type="submit"] { width: 100%; } } /* Thank You: one centred confirmation; the icon sits in a white disc. */ .drd-thanks { text-align: center; padding-block: clamp(24px, 6vw, 72px); } .drd-thanks .elementor-widget-drd-section-heading { max-width: 760px; margin-inline: auto; } .drd-thanks .drd-section-heading, .drd-thanks [class*="drd-sh"] { text-align: center; align-items: center; } .drd-thanks .drd-thanks__icon { display: flex; justify-content: center; } .drd-thanks .drd-thanks__icon .elementor-icon { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: var(--drd-c-white); box-shadow: var(--drd-shadow-raised); } /* A long placeholder (Website URL) ends in an ellipsis on phones rather than being cut mid-letter. */ .elementor-kit-6 .drd-form-card .elementor-field-group input.elementor-field-textual { text-overflow: ellipsis; } .elementor-kit-6 .drd-form-card .elementor-field-group input.elementor-field-textual::placeholder { text-overflow: ellipsis; } /* ---- Case studies (rollout batch A, 2026-11-04: 1605, 1689, 1701, 1725). ---- */ /* Photo (.drd-photo on an Image widget): a client's photo with the card radius. */ .elementor-widget-image.drd-photo img { display: block; width: 100%; height: auto; border-radius: var(--drd-radius-2xl, 28px); } /* A note that holds only a hidden separator (a colon kept from the old copy) takes no room under its label. */ .drd-stable__note:has(> .drd-acro-sep:only-child) { display: none; } /* drd-statement--mid: a closing paragraph set a step below a full statement, for a column beside a heading. */ .elementor-element.drd-statement.drd-statement--mid p { font-size: clamp(21px, 1.9vw, 26px); line-height: 1.4; } /* The headline result of a case study (.drd-result-hero on a container holding one stacked Metric): fills the row beside the tiles in the tinted field and sets its figure at hero size. */ .elementor-element.e-con.drd-result-hero { justify-content: center; padding: var(--drd-space-card-pad-lg); border-radius: var(--drd-radius-2xl, 28px); background-color: var(--drd-c-orange-soft); } .drd-result-hero .drd-metric__value { font-size: clamp(64px, 7.4vw, 108px); line-height: 1; } /* Ledger (.drd-ledger on a container): its child blocks are ruled rows, for a short sequence read top to bottom. */ .elementor-element.e-con.drd-ledger { gap: 0; } .elementor-element.e-con.drd-ledger > .e-con { padding-block: 32px; border-top: 1px solid var(--drd-c-divider, rgba(0, 0, 0, 0.12)); } .elementor-element.e-con.drd-ledger > .e-con:first-child { padding-top: 0; border-top: 0; } /* A chart image inside its tile: centred, never upscaled past its own width. */ .elementor-widget-image.drd-chart img { display: block; width: 100%; max-width: 486px; height: auto; margin-inline: auto; } /* drd-quote-long on a Text Editor: a client's longer words set a step larger than body copy. */ .elementor-widget-text-editor.drd-quote-long p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; } /* Below desktop a portrait stays portrait-sized instead of filling the column. */ /* Specific enough to beat Elementor's own max-width reset on container children. */ @media (max-width: 1024px) { .elementor-element.e-con > .elementor-widget-image.drd-portrait { max-width: 420px; } } /* Phones: a stat table in an orange field (e.g. a case study's After card) stacks each figure under its label, so long suffixes ("from January") never squeeze the labels into a sliver. */ @media (max-width: 767px) { .drd-accent .drd-stable { grid-template-columns: minmax(0, 1fr); } .drd-accent .drd-stable__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "note" "value"; row-gap: 4px; } .drd-accent .drd-stable .drd-stable__value { text-align: left; white-space: normal; } } /* ---- Blog (rollout batch G, 2026-11-04: Blog Archive 1830, Loop Item 1832, Single Blog Post 1800, Search Results 1880). ---- */ /* Archive: category label above the filter pills. */ .elementor-element.drd-blog-label, .elementor-element.drd-blog-label p { margin: 0; font-family: var(--e-global-typography-drd_label-font-family, "Poppins"), var(--drd-font-stack); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--drd-c-muted); } .drd-blog-filter .e-filter-item, .drd-blog-filter .e-taxonomy-filter-item { transition: background-color 0.2s, border-color 0.2s, color 0.2s; } /* Post card: the whole card is the link. */ .e-con.drd-blog-card { cursor: pointer; height: 100%; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .e-con.drd-blog-card:hover, .e-con.drd-blog-card:focus-within { transform: translateY(-4px); box-shadow: var(--drd-shadow-raised); border-color: var(--drd-c-bar); } .drd-blog-card__img img { display: block; width: 100%; height: 230px; object-fit: cover; transition: transform 0.4s ease; } .drd-blog-card:hover .drd-blog-card__img img { transform: scale(1.03); } .drd-blog-card .elementor-widget-theme-post-title .elementor-heading-title, .drd-blog-card .elementor-heading-title a { color: var(--drd-c-ink); text-decoration: none; } .drd-blog-card:hover .elementor-heading-title { color: var(--drd-c-orange-deep); } /* Category pill. */ .elementor-element.drd-blog-cat, .elementor-element.drd-blog-cat p { margin: 0; font-family: var(--e-global-typography-drd_label-font-family, "Poppins"), var(--drd-font-stack); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; color: var(--drd-c-ink); } .elementor-element.drd-blog-cat p { display: inline-block; padding: 7px 14px; border-radius: var(--drd-radius-pill); background: var(--drd-c-chip); } .drd-blog-cat a { color: inherit; text-decoration: none; } /* "READ ARTICLE →": always a visible link cue; the arrow nudges on card hover. */ .drd-blog-card__body { flex: 1 1 auto; } .drd-blog-card__go { margin-top: auto; } .drd-blog-card__go .elementor-button { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; } .drd-blog-card__go .elementor-button-text { transition: letter-spacing 0.2s ease; } .drd-blog-card:hover .drd-blog-card__go .elementor-button { color: var(--drd-c-orange-dark); } .drd-blog-card:hover .drd-blog-card__go .elementor-button-text { letter-spacing: 0.12em; } /* Single post: post content on top of drd-prose. */ .elementor-element.drd-prose.drd-prose--post { max-width: 72ch; font-size: 18px; } .drd-prose--post h2 { font-size: var(--e-global-typography-drd_title_md-font-size, 28px); } .drd-prose--post h4 { margin: 1.5em 0 0.4em; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--drd-c-ink); } .drd-prose--post :is(h2, h3, h4):first-child { margin-top: 0; } .drd-prose--post :is(img, video, iframe) { max-width: 100%; height: auto; border-radius: var(--drd-radius-md); } .drd-prose--post figure { margin: 1.8em 0; } .drd-prose--post figcaption { margin-top: 10px; font-size: 14px; color: var(--drd-c-muted); } .drd-prose--post ol > li { margin: 0.45em 0; padding-left: 6px; } .drd-prose--post ol > li::marker { font-weight: 600; color: var(--drd-c-ink); } .drd-prose--post :is(ul, ol) :is(ul, ol) { margin: 0.5em 0 0; } .drd-prose--post hr { height: 1px; margin: 2.4em 0; border: 0; background: var(--drd-c-divider); } .drd-prose--post blockquote { margin: 1.8em 0; padding: 28px 32px; border: 0; border-radius: var(--drd-radius-md); background: var(--drd-c-white); box-shadow: var(--drd-shadow-card); font-size: 1.12em; line-height: 1.55; color: var(--drd-c-ink); } .drd-prose--post blockquote p { margin: 0 0 0.6em; color: inherit; } .drd-prose--post blockquote p:last-child { margin-bottom: 0; } .drd-prose--post blockquote cite { display: block; margin-top: 10px; font-size: 14px; font-style: normal; color: var(--drd-c-muted); } .drd-prose--post :is(code, kbd) { padding: 2px 6px; border-radius: 6px; background: var(--drd-c-chip); font-size: 0.9em; } .drd-prose--post pre { overflow-x: auto; padding: 18px 22px; border-radius: var(--drd-radius-sm); background: var(--drd-c-night); color: #fff; } .drd-prose--post pre code { padding: 0; background: none; color: inherit; } .drd-prose--post table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.6em 0; font-size: 16px; } .drd-prose--post :is(th, td) { padding: 12px 14px; border-bottom: 1px solid var(--drd-c-divider); text-align: left; color: var(--drd-c-text); } .drd-prose--post th { color: var(--drd-c-ink); font-weight: 600; background: var(--drd-c-chip); } /* Sidebar: tags as pills, recent posts as quiet links. */ .drd-blog-tags, .drd-blog-tags .elementor-widget-container, .drd-blog-tags p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: 0; line-height: 1; } .drd-blog-tags br { display: none; } .drd-blog-tags a { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--drd-c-divider); border-radius: var(--drd-radius-pill); background: var(--drd-c-white); color: var(--drd-c-ink); font-size: 12px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color 0.2s, border-color 0.2s; } .drd-blog-tags a:hover { background: var(--drd-c-orange-soft); border-color: var(--drd-c-orange-deep); color: var(--drd-c-ink); } .drd-blog-recent .elementor-post__title a { color: var(--drd-c-ink); text-decoration: none; } .drd-blog-recent .elementor-post__title a:hover { color: var(--drd-c-orange-deep); text-decoration: underline; text-underline-offset: 3px; } .drd-blog-recent .elementor-post { padding-bottom: 14px; border-bottom: 1px solid var(--drd-c-border); } .drd-blog-recent .elementor-post:last-child { padding-bottom: 0; border-bottom: 0; } /* Recent posts: compact, one-line meta and a small read cue. */ .drd-blog-recent .elementor-post__title { font-size: 15px; line-height: 1.4; margin-bottom: 4px; } .drd-blog-recent .elementor-post__meta-data { font-size: 13px; font-weight: 400; color: var(--drd-c-muted); } .drd-blog-recent .elementor-post__read-more { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2; color: var(--drd-c-orange-deep); }