/*! * GD Kit — design & motion utilities for core Gutenberg blocks. * Every class is applied through a block's "Additional CSS class(es)" field (the `className` attribute). * Progressive enhancement: nothing is hidden unless the front-end script has added `gd-js` to , * so content stays visible in the editor, without JS, and for prefers-reduced-motion. * Icons: Lucide (ISC license) — https://lucide.dev */ /* ------------------------------------------------------------------ 0. Tokens */ :root { --gd-ink: var(--wp--preset--color--gd-ink, #0b0b1a); --gd-paper: var(--wp--preset--color--gd-paper, #f7f6fb); --gd-primary: var(--wp--preset--color--gd-primary, #7c3aed); --gd-on-primary: var(--wp--preset--color--gd-on-primary, #ffffff); --gd-secondary: var(--wp--preset--color--gd-secondary, #06b6d4); --gd-accent: var(--wp--preset--color--gd-accent, #f472b6); --gd-soft: var(--wp--preset--color--gd-soft, #efe9fe); --gd-deep: var(--wp--preset--color--gd-deep, #6d28d9); --gd-tint: var(--gd-primary); /* accent for icons, ticks, focus rings — switches to --gd-deep on light surfaces */ --gd-grad: var(--wp--preset--gradient--gd-brand, linear-gradient(120deg, var(--gd-primary), var(--gd-secondary) 55%, var(--gd-accent))); /* Animated gradient text pans a 200%-wide tile sideways, so its gradient must loop: horizontal, and ending on the color it starts with. The plain brand gradient (primary → accent) showed a hard seam mid-word as it panned. */ --gd-grad-text: linear-gradient(90deg, var(--gd-primary), var(--gd-secondary) 30%, var(--gd-accent) 62%, var(--gd-primary)); --gd-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --gd-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --gd-dur: 0.9s; --gd-dist: 28px; --gd-radius: 22px; --gd-radius-sm: 14px; --gd-gutter: clamp(1.25rem, 0.6rem + 3.2vw, 3rem); --gd-section-pad: clamp(4rem, min(3rem + 7vw, 15vh), 9rem); /* width- and height-aware: shorter on laptop screens */ --gd-admin-bar: var(--wp-admin--admin-bar--height, 0px); --gd-nav-h: 5rem; --gd-content: 1200px; /* the recipes' contentSize; used to line up pills and the pinned showcase track */ --gd-gap: 1.25rem; /* space between stacked blocks inside kit sections */ --gd-gap-lg: clamp(1.25rem, 0.8rem + 1.4vw, 2rem); /* after display/title headings */ --gd-body-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --gd-display-weight: 700; --gd-shadow-sm: 0 1px 2px color-mix(in oklab, var(--gd-ink) 6%, transparent), 0 2px 8px -2px color-mix(in oklab, var(--gd-ink) 8%, transparent); --gd-shadow-md: 0 1px 2px color-mix(in oklab, var(--gd-ink) 5%, transparent), 0 14px 32px -14px color-mix(in oklab, var(--gd-ink) 24%, transparent); --gd-shadow-lg: 0 2px 6px color-mix(in oklab, var(--gd-ink) 6%, transparent), 0 34px 70px -28px color-mix(in oklab, var(--gd-ink) 42%, transparent); /* Surfaces adapt to the section they sit on (see "Surface context" in section 1). */ --gd-surface: color-mix(in oklab, currentColor 5%, transparent); --gd-surface-border: color-mix(in oklab, currentColor 12%, transparent); --gd-surface-shadow: 0 0 #0000; --gd-surface-highlight: 0 0 #0000; --gd-window-bg: color-mix(in oklab, currentColor 4%, transparent); } /* Perceptual (OKLCH) interpolation keeps gradients vivid — no muddy grey middle. */ @supports (background: linear-gradient(in oklch, red, blue)) { :root { --gd-grad: linear-gradient(in oklch 115deg, var(--gd-primary), var(--gd-secondary) 55%, var(--gd-accent)); --gd-grad-text: linear-gradient(in oklch 90deg, var(--gd-primary), var(--gd-secondary) 30%, var(--gd-accent) 62%, var(--gd-primary)); } } @property --gd-angle { syntax: ""; inherits: false; initial-value: 0deg; } /* ------------------------------------------------------------------ 1. Sections & layout */ /* Themes without theme.json (many classic themes, e.g. Kadence) get an extra
inside every Group that isn't flex or grid. Rules that target a Group's direct children therefore list both shapes: `.x > .y` and `.x > .wp-block-group__inner-container > .y`. */ /* `:root .x` (specificity 0,2,0) beats WordPress layout rules such as `.wp-container-… > *` and `:root :where(.is-layout-flow) > *`. Section padding is stronger still (0,4,0 — the class is repeated on purpose): themes pad every Group that has a background (Kadence: `.wp-block-group.has-background { padding: 20px }`, loaded after the kit), which would squash every section. A block's own padding setting (an inline style) still wins. */ :root .gd-section.gd-section.gd-section { position: relative; isolation: isolate; overflow: clip; /* clips decorative layers without breaking position:sticky */ margin-block: 0; --gd-pad: var(--gd-section-pad); padding-block: var(--gd-pad); padding-inline: var(--gd-gutter); font-family: var(--gd-font-body, inherit); font-size: var(--gd-body-size); line-height: 1.65; } :root .gd-section.gd-section.gd-tight { --gd-pad: clamp(2.25rem, 1.5rem + 3vw, 4rem); padding-block: var(--gd-pad); } /* Vertical rhythm inside kit sections, independent of the theme. Classic themes print no block-gap rules, so browser/theme em-based margins would leak in (1em of a 76px price = a 76px gap). Per-block margin settings (inline styles) still win. */ :root :is(.gd-section, .gd-nav) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, blockquote, details, hr, .wp-block-group, .wp-block-columns, .wp-block-buttons, .wp-block-cover, .wp-block-media-text) { margin-block: 0; } :root .gd-section:where(.is-layout-flow, .is-layout-constrained) > * + *, :root .gd-section :where(.is-layout-flow, .is-layout-constrained, .wp-block-column, .wp-block-cover__inner-container, .wp-block-media-text__content, details) > * + * { margin-block-start: var(--gd-gap); } /* Vertical flex groups (cards that push their content apart) keep the kit's rhythm. Specificity (0,0,1) on purpose: it beats WordPress's default `:where(.is-layout-flex) { gap: 0.5em }` but loses to the group's own Block spacing setting (`.wp-container-…`, 0,1,0). A `:root` prefix here would override that setting. */ div:where(.gd-section .is-layout-flex.is-vertical) { gap: var(--gd-gap); } :root .gd-section.gd-section.gd-flush { padding-block: 0; } .gd-screen { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; } :root .gd-narrow { max-width: 760px; margin-inline: auto; } .gd-canvas__main { overflow-x: clip; } /* Landing Canvas shows no theme chrome, but themes still print their floating back-to-top button through wp_footer (Astra's covered page content). The page has its own "Back to top" link and progress bar. */ :is(.gd-canvas, .page-template-gd-canvas) :is(#ast-scroll-top, #kt-scroll-up, #kt-scroll-up-reader, .generate-back-to-top, #scroll-top, .ct-back-to-top, #scroll-to-top, .et_pb_scroll_top) { display: none !important; } :root .page-template-gd-canvas .wp-site-blocks { padding-block: 0; } /* Dark/colored sections: make theme heading & link colors follow the section's text color. */ :root .gd-section.has-text-color :where(h1, h2, h3, h4, h5, h6, p, li, summary, figcaption, blockquote, cite), :root .gd-card.has-text-color :where(h1, h2, h3, h4, h5, h6, p, li) { color: inherit; } :root .gd-section.has-text-color a:where(:not(.wp-element-button)) { color: inherit; } /* Text links: a fine, offset underline that firms up on hover. gd-links (footers, link lists): none until hover. */ :root .gd-section a:where(:not(.wp-element-button)) { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); transition: text-decoration-color 0.25s, color 0.25s, opacity 0.25s; } :root .gd-section a:where(:not(.wp-element-button)):hover { text-decoration-color: currentColor; } :root .gd-section .gd-links a:where(:not(.wp-element-button)) { text-decoration-color: transparent; } /* A List with gd-links (footer columns): no bullets, even spacing. */ :root .gd-section ul.gd-links { list-style: none; margin-inline: 0; padding: 0; } :root .gd-section ul.gd-links li { margin: 0; } :root .gd-section ul.gd-links li + li { margin-block-start: 0.6rem; } :root .gd-section .gd-links a:where(:not(.wp-element-button)):hover { text-decoration-color: currentColor; } /* Hairline separators instead of the theme's heavy rule. */ :root .gd-section .wp-block-separator:where(:not(.gd-glow-line, .has-background, .is-style-dots)) { border: 0; border-top: 1px solid color-mix(in oklab, currentColor 14%, transparent); opacity: 1; width: auto; } /* A left-aligned eyebrow sitting directly in a constrained Group lines up with the text column instead of centering itself (WordPress centers each child box, and the pill is narrower than the column). */ :root .gd-section.is-layout-constrained > .gd-eyebrow:not(.has-text-align-center, .has-text-align-right), :root .gd-section .is-layout-constrained > .gd-eyebrow:not(.has-text-align-center, .has-text-align-right) { margin-inline: max(0px, calc((100% - var(--gd-content)) / 2)) auto !important; } /* Surface context: accents, cards, windows and badges adapt to the background they sit on. Light: crisp white elevated cards + the text-safe deep accent. Dark: frosted cards with a top highlight. */ :is(.has-gd-paper-background-color, .has-gd-soft-background-color, .has-gd-soft-gradient-background) { --gd-fg: var(--gd-ink); --gd-tint: var(--gd-deep); --gd-surface: #fff; --gd-surface-border: color-mix(in oklab, var(--gd-ink) 8%, transparent); --gd-surface-shadow: var(--gd-shadow-md); --gd-surface-highlight: 0 0 #0000; --gd-window-bg: #fff; } :is(.has-gd-ink-background-color, .has-gd-night-gradient-background, .wp-block-cover) { --gd-fg: var(--gd-paper); --gd-tint: var(--gd-primary); --gd-surface: linear-gradient(180deg, color-mix(in oklab, #fff 7.5%, transparent), color-mix(in oklab, #fff 2.5%, transparent)); --gd-surface-border: color-mix(in oklab, #fff 11%, transparent); --gd-surface-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6); --gd-surface-highlight: inset 0 1px 0 color-mix(in oklab, #fff 9%, transparent); --gd-window-bg: color-mix(in oklab, var(--gd-ink) 86%, #fff); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .has-gd-primary-background-color { --gd-fg: var(--gd-on-primary); --gd-tint: var(--gd-on-primary); --gd-surface: color-mix(in oklab, #fff 12%, transparent); --gd-surface-border: color-mix(in oklab, #fff 24%, transparent); --gd-surface-highlight: inset 0 1px 0 color-mix(in oklab, #fff 18%, transparent); } /* Dark sections get a faint brand glow from the top for depth (opt out with gd-flat). */ :root .gd-section.has-gd-ink-background-color:not(.gd-flat) { background-image: radial-gradient(90% 55% at 50% 0%, color-mix(in oklab, var(--gd-primary) 13%, transparent), transparent 72%); } :root .gd-glow-top, :root .gd-section.gd-glow-top:not(.gd-flat) { background-image: radial-gradient(75% 60% at 50% 0%, color-mix(in oklab, var(--gd-primary) 30%, transparent), transparent 72%); } /* --gd-bg: the color a block sits on (avatar rings "cut out" of it). */ .has-gd-paper-background-color { --gd-bg: var(--gd-paper); } :is(.has-gd-soft-background-color, .has-gd-soft-gradient-background) { --gd-bg: var(--gd-soft); } :is(.has-gd-ink-background-color, .has-gd-night-gradient-background) { --gd-bg: var(--gd-ink); } .has-gd-primary-background-color { --gd-bg: var(--gd-primary); } /* Columns that swap sides on desktop but keep reading order on mobile. */ @media (min-width: 782px) { :root .wp-block-columns.gd-reverse { flex-direction: row-reverse; } } /* Bento grid: put on a Group with grid layout. Children can span with gd-span-2 / gd-row-2. */ :root .gd-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem); } :root .gd-bento > * { margin: 0; min-width: 0; } @media (max-width: 1023px) { :root .gd-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { :root .gd-bento { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 640px) { :root .gd-span-2 { grid-column: span 2; } } @media (min-width: 1024px) { :root .gd-row-2 { grid-row: span 2; } } :root .gd-span-full { grid-column: 1 / -1; } /* Columns that sit two per row on phones instead of stacking one per row (footer link lists, small stats). A column with gd-span-full takes a whole row. */ @media (max-width: 781px) { :root .wp-block-columns.gd-mobile-2col { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem !important; } :root .wp-block-columns.gd-mobile-2col > .wp-block-column { flex-basis: auto !important; margin: 0 !important; } } /* Focal point for cropped images: the Image block has aspect ratio + "cover" but no focal point (Cover blocks do). gd-focus-left / -right / -top / -bottom on the Image block keep the subject in the crop; combine one of each axis. */ .gd-focus-left { --gd-fx: 12%; } .gd-focus-right { --gd-fx: 88%; } .gd-focus-top { --gd-fy: 12%; } .gd-focus-bottom { --gd-fy: 88%; } :root :is(.gd-focus-left, .gd-focus-right, .gd-focus-top, .gd-focus-bottom) img { object-position: var(--gd-fx, 50%) var(--gd-fy, 50%); } /* Sticky helper — put on a Group inside a Column for side-by-side scrolling stories. */ :root .gd-sticky { position: sticky; top: calc(var(--gd-admin-bar) + var(--gd-sticky-top, 6rem)); align-self: start; } /* Responsive visibility (the block stays in the editor). */ @media (max-width: 781px) { :root .gd-hide-mobile { display: none !important; } } @media (min-width: 782px) { :root .gd-hide-desktop { display: none !important; } } /* ------------------------------------------------------------------ 2. Typography */ .gd-section :is(h1, h2, h3, h4) { font-family: var(--gd-font-display, inherit); font-weight: var(--gd-display-weight, 700); letter-spacing: calc(-0.025em * var(--gd-track, 1)); line-height: 1.05; text-wrap: balance; font-optical-sizing: auto; } .gd-section :is(h3, h4) { line-height: 1.2; letter-spacing: calc(-0.01em * var(--gd-track, 1)); } .gd-section p { text-wrap: pretty; } /* Size-aware type: tracking and leading tighten as text gets bigger (the kit's size presets). --gd-track (printed by the plugin per display font, or fonts.tracking) scales how much: 1 by default. */ :root .gd-section .has-gd-display-font-size { letter-spacing: calc(-0.04em * var(--gd-track, 1)); line-height: 0.98; } :root .gd-section .has-gd-title-font-size { letter-spacing: calc(-0.032em * var(--gd-track, 1)); line-height: 1.04; } :root .gd-section .has-gd-heading-font-size { letter-spacing: calc(-0.026em * var(--gd-track, 1)); line-height: 1.1; } :root .gd-section .has-gd-subtitle-font-size { letter-spacing: calc(-0.018em * var(--gd-track, 1)); line-height: 1.2; } :root .gd-section .has-gd-stat-font-size { letter-spacing: calc(-0.045em * var(--gd-track, 1)); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Big numbers are display type: stats and counters with their own size use the display face (lining figures, so serif display fonts don't fall back to old-style numerals). A counter inside running text keeps the body face. */ :root .gd-section :is(.has-gd-stat-font-size, .gd-counter[style*="font-size"]) { font-family: var(--gd-font-display, inherit); font-variant-numeric: lining-nums tabular-nums; } :root .gd-section .has-gd-lead-font-size { line-height: 1.55; letter-spacing: calc(-0.006em * var(--gd-track, 1)); } :root .gd-section .has-gd-small-font-size { line-height: 1.5; } /* Readable measure in em, so it scales with the text: ~70 characters for running text, ~60 when centered. (68ch would be too wide: "ch" is the width of a zero, wider than an average letter.) gd-narrow opts out. */ :root .gd-section :where(.is-layout-flow, .wp-block-column, .gd-card) > p:not(.gd-scrub-text, .gd-narrow) { max-width: 36em; } :root .gd-section p.has-text-align-center:not(.gd-scrub-text, .gd-narrow, .gd-quote) { max-width: 32em; } :root .gd-section :where(.is-layout-flow, .wp-block-column, .gd-card) > p.has-text-align-center { margin-inline: auto; } /* Rhythm by role: big headlines get room before what follows; eyebrows hug their heading. */ :root .gd-section :is(.has-gd-display-font-size, .has-gd-title-font-size) + * { margin-block-start: var(--gd-gap-lg); } :root .gd-section .has-gd-heading-font-size + * { margin-block-start: calc(var(--gd-gap) * 1.1); } :root .gd-section .gd-eyebrow + * { margin-block-start: 0.9rem; } .gd-section ::selection { background: color-mix(in oklab, var(--gd-primary) 40%, transparent); } .gd-eyebrow { display: block; width: fit-content; padding: 0.45em 0.95em; border-radius: 999px; border: 1px solid color-mix(in oklab, currentColor 20%, transparent); background: color-mix(in oklab, currentColor 7%, transparent); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; } :root .gd-eyebrow.has-text-align-center { margin-inline: auto; } .gd-dim { color: color-mix(in oklab, currentColor 72%, transparent); } .gd-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Eyebrow with a pulsing status dot. */ .gd-eyebrow-dot::before { content: ""; display: inline-block; vertical-align: 0.08em; width: 0.5em; height: 0.5em; margin-inline-end: 0.6em; border-radius: 50%; background: var(--gd-accent); box-shadow: 0 0 0 0.22em color-mix(in oklab, var(--gd-accent) 25%, transparent); animation: gd-pulse 2.4s var(--gd-ease-in-out) infinite; } /* List with check-mark bullets (pricing features, benefits). */ :root .gd-checklist { list-style: none; padding-inline-start: 0; margin-inline-start: 0; } .gd-checklist li { position: relative; padding-inline-start: 1.9em; margin-block: 0.6em; } .gd-checklist li::before { content: ""; position: absolute; left: 0; top: 0.18em; width: 1.2em; height: 1.2em; background: var(--gd-tint); -webkit-mask: var(--gd-icon-tick) center / contain no-repeat; mask: var(--gd-icon-tick) center / contain no-repeat; } /* Emphasis styles: italicize a word (Ctrl/Cmd+I) inside a heading that carries one of these classes. */ .gd-em-grad em, :is(.gd-gradient-text, .is-style-gd-gradient-text) { background: var(--gd-grad-text); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: gd-pan 8s linear infinite; } .gd-em-grad em { font-style: normal; padding-inline-end: 0.04em; } /* Split or blurred words inside a gradient are separate layers: each gets its own gradient. */ .gd-em-grad em :is(.gd-word, .gd-char), :is(.gd-gradient-text, .is-style-gd-gradient-text) :is(.gd-word, .gd-char) { background: var(--gd-grad-text); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: gd-pan 8s linear infinite; } .gd-em-serif em { font-family: "Instrument Serif", "Playfair Display", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; letter-spacing: calc(-0.01em * var(--gd-track, 1)); } .gd-em-underline em { font-style: normal; background: linear-gradient(90deg, var(--gd-accent), var(--gd-primary)) no-repeat 0 92% / 0% 0.14em; transition: background-size 1.1s var(--gd-ease-out) 0.35s; } .gd-em-underline.is-inview em, .gd-em-underline.is-split em, html:not(.gd-js) .gd-em-underline em, .gd-failsafe .gd-em-underline em { background-size: 100% 0.14em; } /* Marker highlight that sweeps in behind the italic words. */ .gd-em-mark em { font-style: normal; padding-inline: 0.08em; background: linear-gradient(90deg, color-mix(in oklab, var(--gd-accent) 55%, transparent), color-mix(in oklab, var(--gd-primary) 42%, transparent)) no-repeat 0 88% / 0% 0.45em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1.1s var(--gd-ease-out) 0.35s; } .gd-em-mark.is-inview em, .gd-em-mark.is-split em, html:not(.gd-js) .gd-em-mark em, .gd-failsafe .gd-em-mark em { background-size: 100% 0.45em; } /* Outlined (stroked) italic words. */ .gd-em-outline em { font-style: normal; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: max(1.5px, 0.028em) currentColor; } /* Rotating words: alive / fast / yours inside a gd-rotate heading (the script builds the stack). */ .gd-rotate__stack { display: inline-grid; vertical-align: bottom; } .gd-rotate__word { grid-area: 1 / 1; transition: opacity 0.5s var(--gd-ease-out), translate 0.65s var(--gd-ease-out), filter 0.5s var(--gd-ease-out); } .gd-rotate__word:not(.is-active) { opacity: 0; translate: 0 0.4em; filter: blur(6px); } .gd-rotate__word.is-leaving { translate: 0 -0.4em; } .gd-rotate em:has(.gd-rotate__stack) { background: none; animation: none; color: inherit; -webkit-text-fill-color: currentColor; } .gd-em-grad.gd-rotate .gd-rotate__word { background: var(--gd-grad-text); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: gd-pan 8s linear infinite; padding-inline-end: 0.04em; } /* Spotlight quote (a big centered Paragraph) and rating stars. */ :root .gd-section .gd-quote { max-width: 24em; margin-inline: auto; font-family: var(--gd-font-display, inherit); font-weight: 500; letter-spacing: calc(-0.022em * var(--gd-track, 1)); line-height: 1.22; text-wrap: balance; } :root .gd-section .gd-stars { color: var(--gd-tint); letter-spacing: 0.22em; font-size: 1.05rem; } :root :is(.has-gd-ink-background-color, .has-gd-night-gradient-background, .wp-block-cover) .gd-stars { color: var(--gd-accent); } /* ------------------------------------------------------------------ 3. Surfaces & cards */ :is(.gd-card, .is-style-gd-card, .gd-glass, .is-style-gd-glass, .gd-spotlight, .is-style-gd-spotlight, .gd-gradient-border, .is-style-gd-gradient-border) { position: relative; isolation: isolate; border-radius: var(--gd-radius); } :root :is(.gd-card, .is-style-gd-card) { background: var(--gd-surface); border: 1px solid var(--gd-surface-border); box-shadow: var(--gd-surface-highlight), var(--gd-surface-shadow); padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); } :root :is(.gd-glass, .is-style-gd-glass) { background: linear-gradient(180deg, color-mix(in oklab, #fff 13%, transparent), color-mix(in oklab, #fff 4%, transparent)); border: 1px solid color-mix(in oklab, #fff 22%, transparent); -webkit-backdrop-filter: blur(20px) saturate(165%); backdrop-filter: blur(20px) saturate(165%); box-shadow: inset 0 1px 0 color-mix(in oklab, #fff 30%, transparent), inset 0 -1px 0 color-mix(in oklab, #fff 6%, transparent), 0 30px 60px -30px rgb(0 0 0 / 0.5); padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); } /* Card footer: a gd-card-foot block sits at the bottom of its card, so a row of cards lines up. */ :root :is(.gd-card, .is-style-gd-card):has(> .gd-card-foot, > .wp-block-group__inner-container > .gd-card-foot), :root :is(.gd-card, .is-style-gd-card) > .wp-block-group__inner-container:has(> .gd-card-foot) { display: flex; flex-direction: column; flex: 1 1 auto; } :root :is(.gd-card, .is-style-gd-card) > .gd-card-foot, :root :is(.gd-card, .is-style-gd-card) > .wp-block-group__inner-container > .gd-card-foot { margin-block-start: auto !important; padding-block-start: var(--gd-gap); } :root .gd-glow { box-shadow: 0 0 0 1px color-mix(in oklab, var(--gd-primary) 35%, transparent), 0 24px 70px -18px color-mix(in oklab, var(--gd-primary) 65%, transparent); } :root .gd-shadow { box-shadow: var(--gd-shadow-lg); } /* Animated gradient border (::after). Works on any background — the ring is cut out with a mask. */ :is(.gd-gradient-border, .is-style-gd-gradient-border)::after { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1.5px; border-radius: inherit; background: conic-gradient(from var(--gd-angle), var(--gd-primary), var(--gd-secondary), var(--gd-accent), var(--gd-primary)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: gd-spin-angle 6s linear infinite; pointer-events: none; } @supports (background: linear-gradient(in oklch, red, blue)) { :is(.gd-gradient-border, .is-style-gd-gradient-border)::after { background: conic-gradient(in oklch from var(--gd-angle), var(--gd-primary), var(--gd-secondary), var(--gd-accent), var(--gd-primary)); } } /* Border beam: a single comet of light travelling around a gradient-border card. */ :is(.gd-gradient-border, .is-style-gd-gradient-border).gd-beam::after { background: conic-gradient(from var(--gd-angle), transparent 0 68%, color-mix(in oklab, var(--gd-accent) 85%, transparent) 80%, var(--gd-primary) 92%, transparent 100%); animation-duration: 3.2s; } /* Cursor spotlight (::before). The script feeds --gd-mx / --gd-my. */ :is(.gd-spotlight, .is-style-gd-spotlight)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(420px circle at var(--gd-mx, 50%) var(--gd-my, 0%), color-mix(in oklab, var(--gd-primary) 24%, transparent), transparent 62%); opacity: 0; transition: opacity 0.45s var(--gd-ease-out); pointer-events: none; } :is(.gd-spotlight, .is-style-gd-spotlight):hover::before { opacity: 1; } /* Tilted images get a moving glare (the script feeds --gd-mx / --gd-my). */ :root figure.gd-tilt { position: relative; overflow: hidden; border-radius: var(--gd-radius); } :root figure.gd-tilt::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(480px circle at var(--gd-mx, 50%) var(--gd-my, 0%), rgb(255 255 255 / 0.3), transparent 55%); mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.45s var(--gd-ease-out); } :root figure.gd-tilt:hover::after { opacity: 1; } .gd-zoom-hover { overflow: hidden; } .gd-zoom-hover img { transition: scale 0.9s var(--gd-ease-out); } .gd-zoom-hover:hover img { scale: 1.06; } /* Image-free hero visual: a slowly turning gradient orb behind whatever the Group contains. */ .gd-orb { position: relative; isolation: isolate; } .gd-orb::before { content: ""; position: absolute; inset: 8%; z-index: -1; border-radius: 50%; background: conic-gradient(from var(--gd-angle), var(--gd-primary), var(--gd-secondary), var(--gd-accent), var(--gd-primary)); filter: blur(48px) saturate(130%); opacity: 0.85; animation: gd-spin-angle 12s linear infinite; pointer-events: none; } /* ------------------------------------------------------------------ 4. Backgrounds (::before = glow layer, ::after = texture layer) */ .gd-aurora::before, .gd-mesh::before { content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none; background: radial-gradient(38% 46% at 22% 28%, color-mix(in oklab, var(--gd-primary) 72%, transparent), transparent 70%), radial-gradient(34% 42% at 78% 22%, color-mix(in oklab, var(--gd-secondary) 62%, transparent), transparent 70%), radial-gradient(42% 48% at 62% 82%, color-mix(in oklab, var(--gd-accent) 55%, transparent), transparent 70%); } .gd-aurora::before { translate: calc(var(--gd-px, 0) * -3.5%) calc(var(--gd-py, 0) * -3%); /* drifts against the cursor */ filter: blur(70px) saturate(140%); opacity: 0.85; will-change: transform; animation: gd-aurora 20s var(--gd-ease-in-out) infinite alternate; } .gd-mesh::before { inset: 0; opacity: 0.55; } .gd-grid-bg::after, .gd-dots-bg::after, .gd-noise::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } .gd-grid-bg::after { background-image: linear-gradient(color-mix(in oklab, currentColor 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, currentColor 10%, transparent) 1px, transparent 1px); background-size: 56px 56px; /* The visible patch of grid follows the cursor (the script feeds --gd-mx / --gd-my). */ -webkit-mask-image: radial-gradient(ellipse 60% 55% at var(--gd-mx, 50%) var(--gd-my, 35%), #000 22%, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at var(--gd-mx, 50%) var(--gd-my, 35%), #000 22%, transparent 75%); } .gd-dots-bg::after { background-image: radial-gradient(color-mix(in oklab, currentColor 20%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 65% 60% at var(--gd-mx, 50%) var(--gd-my, 40%), #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 65% 60% at var(--gd-mx, 50%) var(--gd-my, 40%), #000 20%, transparent 75%); } .gd-noise::after { opacity: 0.12; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Slowly panning gradient background — pair with a gradient preset on the block. */ :root .gd-animated-gradient { background-size: 220% 220% !important; animation: gd-pan-bg 14s var(--gd-ease-in-out) infinite alternate; } /* ------------------------------------------------------------------ 5. Icons (put on a Heading or Paragraph: "gd-icon gd-icon-zap") */ .gd-icon { --gd-icon-color: var(--gd-tint); position: relative; } .gd-icon::before { content: ""; display: block; width: 3rem; height: 3rem; margin-bottom: 1.1rem; border-radius: var(--gd-radius-sm); background: color-mix(in oklab, var(--gd-icon-color) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gd-icon-color) 32%, transparent); } .gd-icon::after { content: ""; position: absolute; top: 0.75rem; left: 0.75rem; width: 1.5rem; height: 1.5rem; background: var(--gd-icon-color); -webkit-mask: var(--gd-icon) center / contain no-repeat; mask: var(--gd-icon) center / contain no-repeat; } .gd-icon.has-text-align-center::before { margin-inline: auto; } .gd-icon.has-text-align-center::after { left: calc(50% - 0.75rem); } .gd-icon-secondary { --gd-icon-color: var(--gd-secondary); } .gd-icon-accent { --gd-icon-color: var(--gd-accent); } .gd-icon-grad::before { background: var(--gd-grad); box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--gd-primary) 70%, transparent); } .gd-icon-grad::after { background: #fff; } /* ------------------------------------------------------------------ 6. Buttons (classes go on the Button block wrapper) */ /* Every button inside kit sections gets hover feedback; the gd-* classes below add emphasis. */ :is(.gd-section, .gd-nav) .wp-block-button__link { text-transform: none; transition: transform 0.35s var(--gd-ease-out), scale 0.2s var(--gd-ease-out), box-shadow 0.35s var(--gd-ease-out), background-color 0.3s, color 0.3s, filter 0.3s; } /* Button type follows the kit, not the theme (Astra forces 1rem / 500 / line-height 1em on every block button). A block's own font-size setting still wins: preset classes are !important and custom sizes are inline. */ :root .gd-section .wp-block-button__link { font-size: var(--gd-body-size); font-weight: 500; line-height: 1.25; } /* Filled buttons: soft top sheen + a brand-tinted glow. Outline buttons stay transparent on every theme. */ :root :is(.gd-section, .gd-nav) .wp-block-button__link.has-background { background-image: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0) 60%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 10px 26px -14px color-mix(in oklab, var(--gd-primary) 80%, transparent); } :root :is(.gd-section, .gd-nav) .is-style-outline > .wp-block-button__link:not(.has-background) { background-color: transparent; background-image: none; border-color: color-mix(in oklab, currentColor 40%, transparent); } :root :is(.gd-section, .gd-nav) .wp-block-button__link:active { scale: 0.97; } :is(.gd-section, .gd-nav) .wp-block-button:not(.gd-magnetic) .wp-block-button__link:hover { transform: translateY(-2px); } :is(.gd-section, .gd-nav) .wp-block-button__link.has-background:hover { filter: brightness(1.08) saturate(1.05); } :root :is(.gd-section, .gd-nav) .is-style-outline .wp-block-button__link:hover { background-color: color-mix(in oklab, currentColor 10%, transparent); } :is(.gd-shine, .is-style-gd-shine) .wp-block-button__link, .gd-btn-glow .wp-block-button__link, .gd-btn-arrow .wp-block-button__link { position: relative; isolation: isolate; overflow: hidden; transition: transform 0.35s var(--gd-ease-out), box-shadow 0.35s var(--gd-ease-out), background-color 0.3s; } :is(.gd-shine, .is-style-gd-shine) .wp-block-button__link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 25%, rgb(255 255 255 / 0.5) 50%, transparent 75%); translate: -130% 0; transition: translate 0.9s var(--gd-ease-out); } /* Outline/transparent buttons: sweep in the text color so it shows on light backgrounds too. */ :is(.gd-shine, .is-style-gd-shine) .wp-block-button__link:not(.has-background)::after { background: linear-gradient(110deg, transparent 25%, color-mix(in oklab, currentColor 22%, transparent) 50%, transparent 75%); } :is(.gd-shine, .is-style-gd-shine) .wp-block-button__link:hover::after { translate: 130% 0; } :root :is(.gd-section, .gd-nav) .gd-btn-glow .wp-block-button__link { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 14px 36px -12px color-mix(in oklab, var(--gd-primary) 90%, transparent); } :root :is(.gd-section, .gd-nav) .gd-btn-glow .wp-block-button__link:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 20px 50px -12px color-mix(in oklab, var(--gd-primary) 100%, transparent); } .gd-btn-arrow .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; } .gd-btn-arrow .wp-block-button__link::before { content: ""; order: 2; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--gd-icon-arrow) center / contain no-repeat; mask: var(--gd-icon-arrow) center / contain no-repeat; transition: translate 0.35s var(--gd-ease-out); } .gd-btn-arrow .wp-block-button__link:hover::before { translate: 0.3em 0; } /* Magnetic: the script moves the link toward the cursor; ::before widens the pull zone. */ .gd-magnetic { position: relative; } .gd-magnetic::before { content: ""; position: absolute; inset: -18px; } .gd-magnetic .wp-block-button__link { transition: transform 0.4s var(--gd-ease-out), scale 0.2s var(--gd-ease-out), box-shadow 0.35s var(--gd-ease-out), filter 0.3s; will-change: transform; } /* ------------------------------------------------------------------ 7. Entrance motion (hidden only when the script is running) */ :is(.gd-reveal, .gd-reveal-left, .gd-reveal-right, .gd-reveal-zoom, .gd-reveal-blur, .gd-split, .gd-split-words, .gd-split-chars, .gd-lift, .gd-tilt), .gd-stagger > :not(.wp-block-group__inner-container), .gd-stagger > .wp-block-group__inner-container > * { transition-property: opacity, translate, scale, filter, transform, box-shadow; transition-duration: var(--gd-dur), var(--gd-dur), var(--gd-dur), var(--gd-dur), var(--gd-hover-dur, 0.45s), var(--gd-hover-dur, 0.45s); transition-timing-function: var(--gd-ease-out); transition-delay: var(--gd-delay, 0s), var(--gd-delay, 0s), var(--gd-delay, 0s), var(--gd-delay, 0s), 0s, 0s; } /* Default reveal: fade + rise + a touch of blur — reads as "premium" rather than a plain fade. */ .gd-js:not(.gd-failsafe) :is(.gd-reveal, .gd-reveal-left, .gd-reveal-right, .gd-reveal-zoom, .gd-reveal-blur):not(.is-inview), .gd-js:not(.gd-failsafe) .gd-stagger > :not(.is-inview, .wp-block-group__inner-container), .gd-js:not(.gd-failsafe) .gd-stagger > .wp-block-group__inner-container > :not(.is-inview), .gd-js:not(.gd-failsafe):not(.gd-cinematic) :is(.gd-split, .gd-split-words, .gd-split-chars):not(.is-inview) { opacity: 0; filter: blur(6px); } .gd-js:not(.gd-failsafe) :is(.gd-reveal, .gd-reveal-blur):not(.is-inview), .gd-js:not(.gd-failsafe) .gd-stagger > :not(.is-inview, .wp-block-group__inner-container), .gd-js:not(.gd-failsafe) .gd-stagger > .wp-block-group__inner-container > :not(.is-inview), .gd-js:not(.gd-failsafe):not(.gd-cinematic) :is(.gd-split, .gd-split-words, .gd-split-chars):not(.is-inview) { translate: 0 var(--gd-dist); } .gd-js:not(.gd-failsafe) .gd-reveal-left:not(.is-inview) { translate: calc(var(--gd-dist) * -1.6) 0; } .gd-js:not(.gd-failsafe) .gd-reveal-right:not(.is-inview) { translate: calc(var(--gd-dist) * 1.6) 0; } .gd-js:not(.gd-failsafe) .gd-reveal-zoom:not(.is-inview) { scale: 0.92; } .gd-js:not(.gd-failsafe) .gd-reveal-blur:not(.is-inview) { filter: blur(16px); } /* Word-by-word blur-in (cinematic); in lite it's a single blur reveal. */ .gd-blur-words { transition: opacity var(--gd-dur) var(--gd-ease-out) var(--gd-delay, 0s), filter var(--gd-dur) var(--gd-ease-out) var(--gd-delay, 0s); } .gd-js:not(.gd-failsafe):not(.gd-cinematic) .gd-blur-words:not(.is-inview) { opacity: 0; filter: blur(12px); } .gd-js.gd-cinematic:not(.gd-failsafe) .gd-blur-words:not(.is-split) { visibility: hidden; } /* Mask wipe: images/cards are uncovered from the bottom up (use on its own, not with gd-reveal). */ .gd-reveal-mask { transition: clip-path 1.2s var(--gd-ease-out) var(--gd-delay, 0s), scale 1.4s var(--gd-ease-out) var(--gd-delay, 0s); } .gd-js:not(.gd-failsafe) .gd-reveal-mask:not(.is-inview) { clip-path: inset(100% 0 0 0 round var(--gd-radius)); scale: 1.04; } /* Cinematic tier: split headlines stay hidden until GSAP SplitText has wrapped them. */ .gd-js.gd-cinematic:not(.gd-failsafe) :is(.gd-split, .gd-split-words, .gd-split-chars):not(.is-split) { visibility: hidden; } .gd-delay-1 { --gd-delay: 0.1s; } .gd-delay-2 { --gd-delay: 0.2s; } .gd-delay-3 { --gd-delay: 0.3s; } .gd-delay-4 { --gd-delay: 0.45s; } .gd-delay-5 { --gd-delay: 0.6s; } /* Hover motion */ :root .gd-lift:hover { transform: translateY(-6px); box-shadow: var(--gd-surface-highlight), var(--gd-shadow-lg), 0 0 0 1px color-mix(in oklab, var(--gd-tint) 24%, transparent); } /* Pointer depth: put gd-depth on a section; children with gd-depth-1…3 drift against the cursor. (Uses transform — nest instead of combining with gd-float / gd-tilt / gd-lift on the same block.) */ :root .gd-depth-1 { transform: translate3d(calc(var(--gd-px, 0) * -10px), calc(var(--gd-py, 0) * -8px), 0); } :root .gd-depth-2 { transform: translate3d(calc(var(--gd-px, 0) * -22px), calc(var(--gd-py, 0) * -16px), 0); } :root .gd-depth-3 { transform: translate3d(calc(var(--gd-px, 0) * -38px), calc(var(--gd-py, 0) * -28px), 0); } .gd-tilt { transform-style: preserve-3d; will-change: transform; } /* Ambient loops */ .gd-float { animation: gd-float 6s var(--gd-ease-in-out) infinite; } .gd-float.gd-delay-1, .gd-float.gd-delay-2 { animation-delay: -2s; } .gd-float.gd-delay-3, .gd-float.gd-delay-4, .gd-float.gd-delay-5 { animation-delay: -4s; } .gd-spin-slow { animation: gd-spin 24s linear infinite; } .gd-pulse { animation: gd-pulse 2.4s var(--gd-ease-in-out) infinite; } /* Scroll-linked (cinematic tier animates these with GSAP; CSS only prepares them). */ .gd-cinematic :is(figure.gd-parallax, figure.gd-parallax-strong) { overflow: hidden; } .gd-cinematic :is(figure.gd-parallax, figure.gd-parallax-strong) img { scale: 1.22; } .gd-scrub-text { font-family: var(--gd-font-display, inherit); font-weight: 600; line-height: 1.18; letter-spacing: calc(-0.02em * var(--gd-track, 1)); text-wrap: pretty; } .gd-cinematic .wp-block-cover:is(.gd-parallax, .gd-parallax-strong) .wp-block-cover__image-background { scale: 1.22; } /* ------------------------------------------------------------------ 8. Components */ /* Marquee: a Group (flex row, no wrap). The script duplicates the items for a seamless loop. */ :root .gd-marquee { overflow: hidden; flex-wrap: nowrap; --gd-marquee-gap: clamp(2rem, 1rem + 4vw, 4.5rem); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .gd-marquee__track { display: flex; flex-wrap: nowrap; width: max-content; animation: gd-marquee var(--gd-marquee-dur, 40s) linear infinite; } .gd-marquee__group { display: flex; flex-shrink: 0; align-items: center; gap: var(--gd-marquee-gap); padding-inline-end: var(--gd-marquee-gap); } :root .gd-marquee__group > * { flex-shrink: 0; margin: 0; } :root .gd-marquee :is(.gd-card, .gd-glass, .is-style-gd-card, .is-style-gd-glass) { flex-shrink: 0; width: min(380px, 80vw); } .gd-marquee:hover .gd-marquee__track { animation-play-state: paused; } .gd-marquee-reverse .gd-marquee__track { animation-direction: reverse; } /* Logo strip: gd-logos on a Group of Image blocks — a static flex row, or together with gd-marquee. Every logo gets the same height, so mixed PNGs read as one quiet row. Light sections: grayscale and dimmed, full color on hover. Dark sections: solid white silhouettes, so use transparent PNG/SVG logos there (an opaque white background would become a white box). Tune the size with --gd-logo-h on the Group (Additional CSS). */ :root .gd-logos { --gd-logo-h: clamp(1.45rem, 1.05rem + 1.1vw, 2.1rem); align-items: center; } /* Static rows breathe more than WordPress's 0.5em flex gap. Specificity (0,0,1): the Group's own Block spacing still wins. */ div:where(.gd-logos:not(.gd-marquee)) { gap: 1.5rem clamp(1.75rem, 1rem + 3vw, 3.5rem); } :root .gd-logos .wp-block-image { flex: none; margin: 0; } :root .gd-logos .wp-block-image img { display: block; width: auto !important; /* the Image block's own size settings would make the logos uneven */ height: var(--gd-logo-h) !important; max-width: min(11rem, 40vw); object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: 0.6; transition: filter 0.35s var(--gd-ease-out), opacity 0.35s var(--gd-ease-out); } :root .gd-logos .wp-block-image:is(:hover, :focus-within) img { filter: none; opacity: 1; } :root :is(.has-gd-ink-background-color, .has-gd-night-gradient-background, .has-gd-primary-background-color, .wp-block-cover) .gd-logos .wp-block-image img { filter: brightness(0) invert(1); opacity: 0.66; } :root :is(.has-gd-ink-background-color, .has-gd-night-gradient-background, .has-gd-primary-background-color, .wp-block-cover) .gd-logos .wp-block-image:is(:hover, :focus-within) img { opacity: 1; } /* Image slider: gd-slider on a Group of Image (or Cover) blocks. The script stacks the slides and adds dots and arrows; it crossfades on a timer, pauses on hover, focus and off-screen, and swipes on touch. Without JavaScript (and in the editor) the slides just stack, so every image stays visible and editable. Variants: gd-slider-slow, gd-slider-fast, gd-slider-manual (no autoplay). */ :root .gd-slider { position: relative; } .gd-slider__stack { display: grid; } :root .gd-slider__stack > * { grid-area: 1 / 1; margin: 0 !important; } .gd-js .gd-slider__stack > .gd-slide { opacity: 0; scale: 1.025; pointer-events: none; transition: opacity 0.9s var(--gd-ease-out), scale 1.6s var(--gd-ease-out); } .gd-js .gd-slider__stack > .gd-slide.is-active { opacity: 1; scale: 1; pointer-events: auto; } .gd-slider__ui { position: absolute; inset: auto 0 clamp(0.6rem, 1.6vw, 1.1rem); z-index: 3; display: flex; align-items: center; justify-content: center; gap: 0.6rem; pointer-events: none; } .gd-slider__ui > * { pointer-events: auto; } .gd-slider__dots { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.6rem; border-radius: 999px; background: color-mix(in oklab, #000 42%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .gd-slider__dot { width: 0.45rem; height: 0.45rem; padding: 0; border: 0; border-radius: 999px; background: color-mix(in oklab, #fff 48%, transparent); cursor: pointer; transition: width 0.35s var(--gd-ease-out), background-color 0.35s; } .gd-slider__dot.is-active { width: 1.35rem; background: #fff; } .gd-slider__arrow { width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 999px; display: grid; place-items: center; color: #fff; background: color-mix(in oklab, #000 42%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; transition: background-color 0.3s, translate 0.3s var(--gd-ease-out); } .gd-slider__arrow:hover { background: color-mix(in oklab, #000 68%, transparent); } .gd-slider__arrow--prev:hover { translate: -2px 0; } .gd-slider__arrow--next:hover { translate: 2px 0; } .gd-slider__arrow::before { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; } .gd-slider__arrow--prev::before { rotate: 135deg; translate: 0.1rem 0; } .gd-slider__arrow--next::before { rotate: -45deg; translate: -0.1rem 0; } @media (prefers-reduced-motion: reduce) { .gd-js .gd-slider__stack > .gd-slide { transition: none; scale: 1; } .gd-slider__arrow, .gd-slider__dot { transition: none; } } /* Long FAQ lists: gd-faq-more keeps the first six questions and puts the rest behind a button (JS only, so every question is in the HTML and visible without JavaScript — good for readers and for search engines). */ :root .gd-faq .gd-faq-hidden { display: none; } :root .gd-faq .gd-faq-toggle { display: block; margin: 1.4rem auto 0; padding: 0.72rem 1.45rem; border-radius: 999px; border: 1px solid color-mix(in oklab, currentColor 22%, transparent); background: transparent; color: inherit; font: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: background-color 0.3s, border-color 0.3s; } :root .gd-faq .gd-faq-toggle:hover { background: color-mix(in oklab, currentColor 8%, transparent); border-color: color-mix(in oklab, currentColor 38%, transparent); } /* Counters */ .gd-counter { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Horizontal showcase: native swipe row by default (mobile / lite); pinned + scrubbed on desktop cinematic. */ :root .gd-hscroll-track { display: flex; flex-wrap: nowrap; gap: clamp(1rem, 0.5rem + 2vw, 2rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block-end: 0.5rem; } :root .gd-hscroll-track::-webkit-scrollbar { display: none; } :root .gd-hscroll-track > * { flex: 0 0 min(82vw, 520px); margin: 0; scroll-snap-align: start; } /* Cards share one height: WordPress's flex layout centers items, so a Cover photo card (min-height in vh) and a text card (min(420px, 48vh)) sat a few pixels out of line. */ :root .gd-hscroll-track { align-items: stretch; } :root .gd-section.gd-section.gd-hscroll { padding-block: clamp(3rem, 8vh, 6rem); } /* While pinned, keep the heading clear of the sticky nav. */ html:has(.gd-nav) .gd-section.gd-hscroll.is-hscroll-active { padding-block-start: calc(var(--gd-nav-h) + clamp(1rem, 4vh, 2.5rem)); } :root .gd-hscroll.is-hscroll-active { /* While pinned the section covers the whole screen, so no page background shows beneath it. */ min-height: calc(100vh - var(--gd-admin-bar)); display: flex; flex-direction: column; justify-content: center; } /* Pinned, the section is a flex column: WordPress's auto side margins would shrink each heading and paragraph to its text and center it, pulling them off the eyebrow's left edge. Give them the full column width again. */ :root .gd-hscroll.is-hscroll-active > :not(.gd-eyebrow, .gd-hscroll-track, .gd-hscroll-bar) { width: 100%; } :root .gd-hscroll.is-hscroll-active .gd-hscroll-track { overflow: visible; scroll-snap-type: none; width: max-content; max-width: none; } /* Pinned, the track is wider than the column: start it at the column's left edge (under the heading). */ :root .gd-hscroll-bar { position: absolute; /* Lines up with the text column, like the track. */ left: calc(var(--gd-gutter) + max(0px, (100% - 2 * var(--gd-gutter) - var(--gd-content)) / 2)); right: calc(var(--gd-gutter) + max(0px, (100% - 2 * var(--gd-gutter) - var(--gd-content)) / 2)); bottom: clamp(1.25rem, 3.5vh, 2.25rem); height: 2px; border-radius: 2px; background: color-mix(in oklab, currentColor 14%, transparent); pointer-events: none; } :root .gd-hscroll-bar span { display: block; height: 100%; border-radius: inherit; background: var(--gd-grad); transform-origin: 0 50%; scale: var(--gd-p, 0) 1; } :root .gd-hscroll.is-hscroll-active > .gd-hscroll-track, :root .gd-hscroll.is-hscroll-active > .wp-block-group__inner-container > .gd-hscroll-track { margin-inline: max(0px, calc((100% - var(--gd-content)) / 2)) 0 !important; } /* Stacking cards: children stick and pile up (every tier); cinematic also scales the covered card. */ :root .gd-stack > :not(.wp-block-group__inner-container), :root .gd-stack > .wp-block-group__inner-container > * { position: sticky; top: calc(var(--gd-admin-bar) + 5.5rem + var(--gd-i, 0) * 1.1rem); transform-origin: 50% 0; } :root .gd-stack > * + *, :root .gd-stack > .wp-block-group__inner-container > * + * { margin-block-start: 14vh; } /* Pricing toggle: Buttons block with links to #monthly and #yearly inside a `gd-pricing` section. */ :root :is(.gd-billing, .gd-switch) { display: flex; width: fit-content; margin-inline: auto; gap: 0.25rem; padding: 0.3rem; border-radius: 999px; background: color-mix(in oklab, currentColor 8%, transparent); border: 1px solid color-mix(in oklab, currentColor 14%, transparent); } :root :is(.gd-billing, .gd-switch) .wp-block-button__link { background: transparent; color: inherit; border: 0; box-shadow: none; padding: 0.55rem 1.2rem; border-radius: 999px; font-size: 0.95rem; transition: background-color 0.3s, color 0.3s; } :root :is(.gd-billing, .gd-switch) .is-active .wp-block-button__link { background: var(--gd-primary); color: var(--gd-on-primary); } /* Segments don't jump on hover (this must outrank the section-wide button hover lift). */ :root :is(.gd-section, .gd-nav) :is(.gd-billing, .gd-switch) .wp-block-button__link:hover { transform: none; filter: none; } html:not(.gd-js) :is(.gd-billing, .gd-tabs .gd-switch) { display: none; } /* Tabs: a gd-tabs Group holding a gd-switch Buttons block whose links point to #ids of gd-tab-panel Groups. */ :root.gd-js .gd-tabs .gd-tab-panel:not(.is-active) { display: none !important; } :root.gd-js .gd-tabs .gd-tab-panel.is-active { animation: gd-panel-in 0.7s var(--gd-ease-out) both; } body:not(.editor-styles-wrapper) .gd-pricing:not(.is-yearly) .gd-price-yearly, body:not(.editor-styles-wrapper) .gd-pricing.is-yearly .gd-price-monthly { display: none; } /* FAQ accordion: Details blocks inside a `gd-faq` Group (one open at a time unless gd-faq-multi). Default: each question is a card row with a round +/× control; gd-faq-lines gives a minimal hairline list. */ :root .gd-faq .wp-block-details { margin-block: 0; padding: 0; border-radius: var(--gd-radius-sm); background: var(--gd-surface); border: 1px solid var(--gd-surface-border); box-shadow: var(--gd-surface-highlight); transition: border-color 0.3s, box-shadow 0.4s var(--gd-ease-out), background-color 0.3s; } :root .gd-section .gd-faq > * + *, :root .gd-section .gd-faq > .wp-block-group__inner-container > * + * { margin-block-start: 0.75rem; } :root .gd-faq .wp-block-details[open] { border-color: color-mix(in oklab, var(--gd-tint) 45%, transparent); box-shadow: var(--gd-surface-highlight), var(--gd-shadow-md); } :root .gd-faq summary { position: relative; display: block; padding: 1.15rem 4.25rem 1.15rem 1.35rem; cursor: pointer; list-style: none; font-family: var(--gd-font-display, inherit); font-weight: 600; font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.15rem); line-height: 1.4; letter-spacing: calc(-0.01em * var(--gd-track, 1)); transition: color 0.25s; } :root .gd-faq summary::-webkit-details-marker { display: none; } /* The round control: a tinted disc with a plus drawn from two gradient bars; it turns into a × when open. */ :root .gd-faq summary::after { content: ""; position: absolute; top: 50%; right: 1.1rem; width: 2rem; height: 2rem; margin-top: -1rem; border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / 0.8rem 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 0.8rem no-repeat, color-mix(in oklab, var(--gd-tint) 12%, transparent); transition: rotate 0.45s var(--gd-ease-out), background-color 0.3s, color 0.3s; } :root .gd-faq summary:hover { color: var(--gd-tint); } :root .gd-faq summary:hover::after, :root .gd-faq details[open] > summary::after { background-color: color-mix(in oklab, var(--gd-tint) 22%, transparent); } :root .gd-faq details[open] > summary::after { rotate: 135deg; color: var(--gd-tint); } :root .gd-faq details > :not(summary) { margin: 0; padding: 0 4.25rem 1.3rem 1.35rem; max-width: 68ch; color: color-mix(in oklab, currentColor 78%, transparent); } :root .gd-faq details > :not(summary) + :not(summary) { margin-top: -0.4rem; } @media (max-width: 600px) { :root .gd-faq summary { padding-inline: 1.1rem 3.6rem; } :root .gd-faq summary::after { right: 0.8rem; } :root .gd-faq details > :not(summary) { padding-inline: 1.1rem; } } :root .gd-faq details[open] > :not(summary) { animation: gd-faq-in 0.5s var(--gd-ease-out) both; } /* Minimal variant: hairline list, no cards. */ :root .gd-faq-lines .wp-block-details { background: none; border: 0; border-bottom: 1px solid color-mix(in oklab, currentColor 14%, transparent); border-radius: 0; box-shadow: none; } :root .gd-faq-lines .wp-block-details[open] { box-shadow: none; } :root .gd-faq-lines summary { padding-inline: 0 3.5rem; } :root .gd-faq-lines summary::after { right: 0; } :root .gd-faq-lines details > :not(summary) { padding-inline: 0 3.5rem; } :root .gd-section .gd-faq-lines > * + *, :root .gd-section .gd-faq-lines > .wp-block-group__inner-container > * + * { margin-block-start: 0; } @supports (interpolate-size: allow-keywords) { .gd-faq { interpolate-size: allow-keywords; } .gd-faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.45s var(--gd-ease-out), content-visibility 0.45s allow-discrete; } .gd-faq details[open]::details-content { block-size: auto; } } /* Closing call-to-action panel: a rounded, glowing Group inside a section (pair it with gd-aurora and gd-gradient-border gd-beam on the same Group, and a dark gradient such as gd-night). */ :root .gd-cta-panel { position: relative; isolation: isolate; overflow: clip; border-radius: clamp(24px, 1rem + 1.5vw, 40px); padding: clamp(3rem, 1.5rem + 5vw, 6.5rem) clamp(1.25rem, 0.5rem + 4vw, 5rem); box-shadow: var(--gd-shadow-lg); } :root .gd-cta-panel.gd-aurora::before { opacity: 0.7; } /* Oversized brand wordmark at the very bottom of a footer (a Paragraph with the brand name). It fades downward and runs off the section's bottom edge. Decorative: hidden from screen readers. */ :root .gd-section .gd-footer-mark { margin-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) calc(-1 * var(--gd-pad, 4rem) - 0.08em); font-family: var(--gd-font-display, inherit); font-weight: 700; font-size: clamp(4.5rem, 0.5rem + 18vw, 18rem); line-height: 0.8; letter-spacing: calc(-0.055em * var(--gd-track, 1)); text-align: center; white-space: nowrap; max-width: none; user-select: none; pointer-events: none; /* --gd-fg, not currentColor: the text itself is transparent here. */ background: linear-gradient(180deg, color-mix(in oklab, var(--gd-fg, var(--gd-paper)) 24%, transparent) 10%, color-mix(in oklab, var(--gd-fg, var(--gd-paper)) 2%, transparent) 90%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; } :root .gd-section .gd-footer-mark :is(.gd-char, .gd-word, .gd-line) { background: inherit; -webkit-background-clip: text; background-clip: text; } .gd-footer-mark { --gd-dist: 14vh; } /* with gd-reveal it rises from well below */ /* ------------------------------------------------------------------ 8b. Image-free product visuals */ /* Initials avatar: a short Paragraph ("MC") with gd-avatar, next to a name/role stack in a row Group. */ :root .gd-section .gd-avatar { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; margin: 0; border-radius: 50%; background: var(--gd-primary) linear-gradient(140deg, rgb(255 255 255 / 0.28), transparent 62%); color: var(--gd-on-primary); font-family: var(--gd-font-display, inherit); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; box-shadow: 0 0 0 3px color-mix(in oklab, var(--gd-primary) 22%, transparent); } /* Avatar stack: a List of initials ("MC", "JW", "+2k") with gd-avatars — overlapping discs for social proof. */ :root .gd-section .gd-avatars { display: flex; flex: none; margin-inline: 0; padding: 0 0 0 0.45rem; list-style: none; } :root .gd-section .gd-avatars li { display: grid; flex: none; place-items: center; width: 2.6rem; height: 2.6rem; margin: 0 0 0 -0.45rem; border-radius: 50%; background: var(--gd-primary) linear-gradient(140deg, rgb(255 255 255 / 0.3), transparent 62%); color: var(--gd-on-primary); font-family: var(--gd-font-display, inherit); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; box-shadow: 0 0 0 3px var(--gd-bg, var(--gd-paper)); } /* Neighbouring hues mixed in OKLCH stay vivid (an oklab mix of green and rose turns olive). */ :root .gd-section .gd-avatars li:nth-child(2) { background-color: color-mix(in oklch, var(--gd-primary) 72%, var(--gd-secondary)); } :root .gd-section .gd-avatars li:nth-child(3) { background-color: color-mix(in oklch, var(--gd-primary) 72%, var(--gd-accent)); } :root .gd-section .gd-avatars li:nth-child(4) { background-color: color-mix(in oklab, var(--gd-primary) 70%, var(--gd-ink)); } :root .gd-section .gd-avatars li:last-child:not(:first-child) { background: var(--gd-surface); color: inherit; font-size: 0.72rem; border: 1px solid var(--gd-surface-border); text-transform: none; } /* Inside plain cards the ring matches the card surface (white on light sections, frosted ink on dark). */ :root .gd-section :is(.gd-card, .is-style-gd-card):not(.has-background) { --gd-bg: color-mix(in oklab, var(--gd-ink) 90%, #fff); } :root :is(.has-gd-paper-background-color, .has-gd-soft-background-color, .has-gd-soft-gradient-background) :is(.gd-card, .is-style-gd-card):not(.has-background) { --gd-bg: #fff; } /* Chips: a List with gd-chips becomes a wrap of small pills (tags, integrations, block names). */ :root .gd-section .gd-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-inline: 0; padding: 0; list-style: none; } :root .gd-section .gd-chips li { margin: 0; padding: 0.42em 0.9em; border-radius: 999px; font-size: 0.875rem; font-weight: 500; line-height: 1.3; background: var(--gd-surface); border: 1px solid var(--gd-surface-border); box-shadow: var(--gd-surface-highlight); } :root .gd-section .gd-chips li:first-child { background: color-mix(in oklab, var(--gd-tint) 16%, transparent); border-color: color-mix(in oklab, var(--gd-tint) 50%, transparent); } /* Browser/app window: an Image block (figure) or a Group becomes a framed window with a toolbar. */ :root .gd-window { position: relative; isolation: isolate; overflow: hidden; border-radius: 16px; background: var(--gd-window-bg); border: 1px solid var(--gd-surface-border); box-shadow: var(--gd-surface-highlight), var(--gd-shadow-lg); padding-top: 2.5rem; } :root .gd-window:not(figure) { padding: 3.5rem clamp(1rem, 0.6rem + 1.5vw, 1.75rem) clamp(1rem, 0.6rem + 1.5vw, 1.75rem); } :root .gd-window::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2.5rem; background: radial-gradient(circle at 1.15rem 50%, #ff5f57 0 0.3rem, transparent 0.33rem), radial-gradient(circle at 2rem 50%, #febc2e 0 0.3rem, transparent 0.33rem), radial-gradient(circle at 2.85rem 50%, #28c840 0 0.3rem, transparent 0.33rem), color-mix(in oklab, currentColor 5%, transparent); border-bottom: 1px solid var(--gd-surface-border); pointer-events: none; } :root figure.gd-window img { display: block; width: 100%; border-radius: 0 !important; } /* Bar chart from a List block: each item's number (0–100) becomes a bar's height. Plain list without JS / in the editor. */ :root.gd-js .gd-bars { display: flex; align-items: flex-end; gap: clamp(0.3rem, 0.2rem + 0.6vw, 0.7rem); height: var(--gd-bars-height, 11rem); margin-inline: 0; padding: 0; list-style: none; } :root.gd-js .gd-bars li { flex: 1; margin: 0; height: var(--h, 50%); border-radius: 0.6rem 0.6rem 0.25rem 0.25rem; background: linear-gradient(180deg, color-mix(in oklab, var(--gd-secondary) 80%, #fff), var(--gd-primary)); font-size: 0; color: transparent; transform-origin: 50% 100%; transition: scale 1.1s var(--gd-ease-out) calc(var(--gd-i, 0) * 60ms); } :root.gd-js .gd-bars li:last-child { background: linear-gradient(180deg, var(--gd-accent), var(--gd-primary)); box-shadow: 0 0 26px -4px color-mix(in oklab, var(--gd-accent) 70%, transparent); } :root.gd-js:not(.gd-failsafe) .gd-bars:not(.is-inview) li { scale: 1 0.02; } /* Floating glass badge — a short Paragraph. Inside a gd-stage Group, gd-badge-tl/tr/bl/br pin it to a corner (desktop). */ :root .gd-badge { display: flex; width: fit-content; align-items: center; gap: 0.55rem; padding: 0.6rem 0.95rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; line-height: 1.2; white-space: nowrap; background: var(--gd-surface); border: 1px solid var(--gd-surface-border); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: var(--gd-surface-highlight), var(--gd-shadow-md); } :root .gd-badge::before { content: ""; flex-shrink: 0; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gd-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--gd-accent) 24%, transparent); } :root .gd-stage { position: relative; isolation: isolate; } @media (min-width: 782px) { /* Corner badges are decorative labels floating over the visual, so they must not swallow clicks meant for what is underneath (a slider's arrows, a link, a video). */ :root .gd-stage > :is(.gd-badge-tl, .gd-badge-tr, .gd-badge-bl, .gd-badge-br), :root .gd-stage > .wp-block-group__inner-container > :is(.gd-badge-tl, .gd-badge-tr, .gd-badge-bl, .gd-badge-br) { position: absolute; z-index: 2; margin: 0; pointer-events: none; } :root .gd-stage :is(.gd-badge-tl, .gd-badge-tr, .gd-badge-bl, .gd-badge-br) a { pointer-events: auto; } /* Top badges straddle the frame's top edge (clear of window dots and header text); bottom ones float off the sides, over the visual (bars, image) rather than over text. */ :root .gd-badge-tl { top: -1.2rem; left: 12%; } :root .gd-badge-tr { top: -1.2rem; right: 8%; } :root .gd-badge-bl { bottom: 12%; left: -7%; } :root .gd-badge-br { bottom: 7%; right: -7%; } } /* Glowing gradient line — a Separator block. */ :root .wp-block-separator.gd-glow-line { border: 0; height: 1px; max-width: none; opacity: 1; background: linear-gradient(90deg, transparent, var(--gd-primary), var(--gd-accent), transparent); box-shadow: 0 0 18px 1px color-mix(in oklab, var(--gd-primary) 45%, transparent); } /* Sticky navigation bar that turns to glass once the page scrolls. */ :root .gd-nav { position: sticky; top: var(--gd-admin-bar); z-index: 50; font-family: var(--gd-font-body, inherit); margin-block: 0 calc(var(--gd-nav-h) * -1); /* overlap the hero below instead of pushing it down */ min-height: var(--gd-nav-h); box-sizing: border-box; padding-block: 0.9rem; padding-inline: var(--gd-gutter); transition: background-color 0.4s, box-shadow 0.4s, -webkit-backdrop-filter 0.4s, backdrop-filter 0.4s; } :root .gd-nav.is-scrolled { background-color: color-mix(in oklab, var(--gd-nav-bg, var(--gd-ink)) 80%, transparent); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: 0 1px 0 color-mix(in oklab, currentColor 12%, transparent); } .gd-nav-light { --gd-nav-bg: var(--gd-paper); } /* gd-nav-pill: once scrolled, a floating glass capsule appears behind the bar's content. It is drawn by a pseudo-element, so nothing reflows; the bar itself stays transparent (a backdrop-filter on the bar would stop the capsule from blurring the page behind it). */ :root .gd-nav-pill.is-scrolled { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; } :root .gd-nav-pill::before { content: ""; position: absolute; z-index: -1; inset: 0.6rem max(0.4rem, calc(var(--gd-gutter) - 0.7rem)) 0.6rem max(0.4rem, calc(var(--gd-gutter) - 1.25rem)); border-radius: 999px; background: color-mix(in oklab, var(--gd-nav-bg, var(--gd-ink)) 86%, transparent); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: inset 0 0 0 1px color-mix(in oklab, currentColor 13%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.1), 0 18px 44px -22px rgb(0 0 0 / 0.55); opacity: 0; scale: 0.97 0.9; transition: opacity 0.4s, scale 0.55s var(--gd-ease-out); pointer-events: none; } :root .gd-nav-pill.is-scrolled::before { opacity: 1; scale: 1; } /* Scrollspy: the menu item for the section in view is marked (set by the script). */ :root .gd-nav .wp-block-navigation-item__content { position: relative; transition: opacity 0.3s; } :root.gd-js .gd-nav:has(.wp-block-navigation-item.is-active) .wp-block-navigation-item:not(.is-active) > .wp-block-navigation-item__content { opacity: 0.66; } :root .gd-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 50%; bottom: -0.55em; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--gd-accent); box-shadow: 0 0 10px var(--gd-accent); opacity: 0; scale: 0; transition: opacity 0.3s, scale 0.4s var(--gd-ease-out); } :root .gd-nav .wp-block-navigation-item.is-active > .wp-block-navigation-item__content::after { opacity: 1; scale: 1; } /* Brand mark: a gradient tile before the site name (Paragraph with gd-logo-mark). */ .gd-logo-mark::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-inline-end: 0.5em; border-radius: 0.3em; vertical-align: -0.15em; background: var(--gd-grad); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 6px 18px -6px color-mix(in oklab, var(--gd-primary) 80%, transparent); } :root .gd-nav a:where(:not(.wp-element-button)) { color: inherit; text-decoration: none; } /* Menu items get room to breathe (WordPress's default navigation gap is tight on many themes). */ :root .gd-nav .wp-block-navigation .wp-block-navigation__container { gap: clamp(1rem, 0.4rem + 1.3vw, 1.75rem); } /* Nav CTAs are compact (a per-button padding setting still wins). */ :root .gd-nav .wp-block-button__link:not([style*="padding"]) { padding: 0.6rem 1.2rem; font-size: 0.95rem; } /* The section under the nav starts below it, even where section padding is small (mobile). */ :root .gd-nav + .gd-section.gd-section.gd-section { padding-block-start: max(var(--gd-section-pad), calc(var(--gd-nav-h) + 2.5rem)); } @media (max-width: 600px) { :root .gd-nav { top: 0; } } html:has(.gd-nav) { scroll-padding-top: calc(var(--gd-admin-bar) + 5.5rem); } /* Scroll progress bar: a Separator block with class gd-progress (front end only). */ .gd-js .gd-progress.wp-block-separator { position: fixed; inset: var(--gd-admin-bar) 0 auto 0; z-index: 100; width: 100%; max-width: none; height: 3px; margin: 0 !important; border: 0; opacity: 1; background: var(--gd-grad); transform-origin: 0 50%; scale: var(--gd-progress, 0) 1; } @supports (animation-timeline: scroll()) { .gd-js .gd-progress.wp-block-separator { animation: gd-progress linear both; animation-timeline: scroll(root); } } /* Accessible focus rings inside kit sections */ .gd-section :is(a, button, summary):focus-visible, .gd-nav :is(a, button):focus-visible { outline: 2px solid var(--gd-tint); outline-offset: 3px; border-radius: 6px; } /* ------------------------------------------------------------------ 9. Lenis smooth scroll (from lenis.css 1.3.x) */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ------------------------------------------------------------------ 10. Editor canvas: keep everything visible and calm */ .editor-styles-wrapper :is([class*="gd-"], [class*="gd-"]::before, [class*="gd-"]::after) { animation-play-state: paused !important; } .editor-styles-wrapper .gd-hscroll-track { flex-wrap: wrap; overflow: visible; } .editor-styles-wrapper .gd-stack > * { position: relative; top: auto; } .editor-styles-wrapper .gd-nav { margin-block-end: 0; } .editor-styles-wrapper .gd-nav:not(.gd-nav-light) { background: var(--gd-ink); border-radius: 999px; padding: 0.6rem 0.75rem 0.6rem 1.4rem; } .editor-styles-wrapper :is(.gd-depth-1, .gd-depth-2, .gd-depth-3) { transform: none; } /* The editor never runs the engine: keep toggles and tab switches editable, and show chart data as chips. */ .editor-styles-wrapper :is(.gd-billing, .gd-tabs .gd-switch) { display: flex !important; } .editor-styles-wrapper .gd-bars { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; list-style: none; } .editor-styles-wrapper .gd-bars li { margin: 0; padding: 0.15em 0.55em; border-radius: 0.4rem; font-size: 0.8rem; background: color-mix(in oklab, currentColor 10%, transparent); } /* ------------------------------------------------------------------ 11. Reduced motion */ @media (prefers-reduced-motion: reduce) { .gd-js :is(.gd-reveal, .gd-reveal-left, .gd-reveal-right, .gd-reveal-zoom, .gd-reveal-blur, .gd-split, .gd-split-words, .gd-split-chars, .gd-blur-words), .gd-js .gd-stagger > *, .gd-js .gd-stagger > .wp-block-group__inner-container > * { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; visibility: visible !important; transition: none !important; } :is([class*="gd-"], [class*="gd-"]::before, [class*="gd-"]::after) { animation: none !important; } .gd-js .gd-reveal-mask { clip-path: none !important; scale: none !important; } :root :is(.gd-depth-1, .gd-depth-2, .gd-depth-3) { transform: none !important; } .gd-aurora::before { translate: none !important; } :root.gd-js .gd-bars li { scale: none !important; } .gd-rotate__word { transition: none !important; } .gd-marquee__group[aria-hidden="true"] { display: none; } :root .gd-faq details[open] > :not(summary) { animation: none !important; } :root .gd-marquee { overflow-x: auto; } } /* ------------------------------------------------------------------ 12. Keyframes */ @keyframes gd-aurora { 0% { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(4%, 3%, 0) rotate(9deg) scale(1.1); } 100% { transform: translate3d(-2%, 4%, 0) rotate(-7deg) scale(1.03); } } @keyframes gd-pan { to { background-position: 200% center; } } @keyframes gd-pan-bg { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } @keyframes gd-spin-angle { to { --gd-angle: 360deg; } } @keyframes gd-spin { to { rotate: 360deg; } } @keyframes gd-float { 50% { transform: translateY(-14px); } } @keyframes gd-pulse { 50% { opacity: 0.55; scale: 0.94; } } @keyframes gd-marquee { to { transform: translateX(-50%); } } @keyframes gd-progress { from { scale: 0 1; } to { scale: 1 1; } } @keyframes gd-faq-in { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } } @keyframes gd-panel-in { from { opacity: 0; translate: 0 14px; filter: blur(4px); } } /* ------------------------------------------------------------------ 13. Icon set (Lucide, ISC) */ :root { --gd-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); --gd-icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --gd-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); } .gd-icon-zap { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z'/%3E%3C/svg%3E"); } .gd-icon-sparkles { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z'/%3E%3Cpath d='M20 2v4'/%3E%3Cpath d='M22 4h-4'/%3E%3Ccircle cx='4' cy='20' r='2'/%3E%3C/svg%3E"); } .gd-icon-shield-check { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); } .gd-icon-rocket { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09'/%3E%3Cpath d='M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05'/%3E%3C/svg%3E"); } .gd-icon-trending-up { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 7h6v6'/%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3C/svg%3E"); } .gd-icon-globe { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); } .gd-icon-lock { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); } .gd-icon-heart { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E"); } .gd-icon-star { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z'/%3E%3C/svg%3E"); } .gd-icon-check { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .gd-icon-layers { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12'/%3E%3Cpath d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17'/%3E%3C/svg%3E"); } .gd-icon-cpu { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 20v2'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M17 20v2'/%3E%3Cpath d='M17 2v2'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M2 17h2'/%3E%3Cpath d='M2 7h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='M20 17h2'/%3E%3Cpath d='M20 7h2'/%3E%3Cpath d='M7 20v2'/%3E%3Cpath d='M7 2v2'/%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='8' y='8' width='8' height='8' rx='1'/%3E%3C/svg%3E"); } .gd-icon-clock { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); } .gd-icon-users { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E"); } .gd-icon-smile { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 10V9'/%3E%3Cpath d='M16.472 15a6 6 0 01-8.943 0'/%3E%3Cpath d='M9 10V9'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); } .gd-icon-wand-sparkles { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72'/%3E%3Cpath d='m14 7 3 3'/%3E%3Cpath d='M5 6v4'/%3E%3Cpath d='M19 14v4'/%3E%3Cpath d='M10 2v2'/%3E%3Cpath d='M7 8H3'/%3E%3Cpath d='M21 16h-4'/%3E%3Cpath d='M11 3H9'/%3E%3C/svg%3E"); } .gd-icon-palette { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z'/%3E%3Ccircle cx='13.5' cy='6.5' r='.5' fill='black'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5' fill='black'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5' fill='black'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5' fill='black'/%3E%3C/svg%3E"); } .gd-icon-gauge { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m12 14 4-4'/%3E%3Cpath d='M3.34 19a10 10 0 1 1 17.32 0'/%3E%3C/svg%3E"); } .gd-icon-message-circle { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719'/%3E%3C/svg%3E"); } .gd-icon-puzzle { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z'/%3E%3C/svg%3E"); } .gd-icon-target { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); } .gd-icon-award { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E"); } .gd-icon-play { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z'/%3E%3C/svg%3E"); } .gd-icon-chart-column { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E"); } .gd-icon-leaf { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11 20a10 10 0 0010-10 25.9 25.9 0 00-1.04-7.281 1 1 0 00-1.755-.325C15.833 5.5 13 5.5 9.8 6.1A7 7 0 0011 20'/%3E%3Cpath d='M2 21a5 5 0 012.911-4.544C7.613 15.212 8.351 15.24 11 13'/%3E%3C/svg%3E"); } .gd-icon-infinity { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M6 16c5 0 7-8 12-8a4 4 0 0 1 0 8c-5 0-7-8-12-8a4 4 0 1 0 0 8'/%3E%3C/svg%3E"); } .gd-icon-code { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m16 18 6-6-6-6'/%3E%3Cpath d='m8 6-6 6 6 6'/%3E%3C/svg%3E"); } .gd-icon-mail { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E"); } .gd-icon-coffee { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10 2v2'/%3E%3Cpath d='M14 2v2'/%3E%3Cpath d='M16 8a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1'/%3E%3Cpath d='M6 2v2'/%3E%3C/svg%3E"); } .gd-icon-package { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpolyline points='3.29 7 12 12 20.71 7'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3C/svg%3E"); } .gd-icon-truck { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); } .gd-icon-gift { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8'/%3E%3Cpath d='M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5'/%3E%3Crect x='3' y='7' width='18' height='4' rx='1'/%3E%3C/svg%3E"); } .gd-icon-calendar { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M16 2v3'/%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E"); } .gd-icon-credit-card { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3Cpath d='M6 14h2'/%3E%3C/svg%3E"); } .gd-icon-map-pin { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); } .gd-icon-camera { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E"); } .gd-icon-music { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); } .gd-icon-book-open { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 5v16'/%3E%3Cpath d='M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z'/%3E%3C/svg%3E"); } .gd-icon-graduation-cap { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E"); } .gd-icon-dumbbell { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M17.596 12.768a2 2 0 1 0 2.829-2.829l-1.768-1.767a2 2 0 0 0 2.828-2.829l-2.828-2.828a2 2 0 0 0-2.829 2.828l-1.767-1.768a2 2 0 1 0-2.829 2.829z'/%3E%3Cpath d='m2.5 21.5 1.4-1.4'/%3E%3Cpath d='m20.1 3.9 1.4-1.4'/%3E%3Cpath d='M5.343 21.485a2 2 0 1 0 2.829-2.828l1.767 1.768a2 2 0 1 0 2.829-2.829l-6.364-6.364a2 2 0 1 0-2.829 2.829l1.768 1.767a2 2 0 0 0-2.828 2.829z'/%3E%3Cpath d='m9.6 14.4 4.8-4.8'/%3E%3C/svg%3E"); } .gd-icon-utensils { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2'/%3E%3Cpath d='M7 2v20'/%3E%3Cpath d='M21 15V2a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7'/%3E%3C/svg%3E"); } .gd-icon-house { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } .gd-icon-briefcase { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E"); } .gd-icon-headphones { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E"); } .gd-icon-phone { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E"); } .gd-icon-sun { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E"); } .gd-icon-moon { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401'/%3E%3C/svg%3E"); } .gd-icon-flame { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 3q1 4 4 6.5t3 5.5a1 1 0 0 1-14 0 5 5 0 0 1 1-3 1 1 0 0 0 5 0c0-2-1.5-3-1.5-5q0-2 2.5-4'/%3E%3C/svg%3E"); } .gd-icon-recycle { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5'/%3E%3Cpath d='M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12'/%3E%3Cpath d='m14 16-3 3 3 3'/%3E%3Cpath d='M8.293 13.596 7.196 9.5 3.1 10.598'/%3E%3Cpath d='m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 11.985 3a1.784 1.784 0 0 1 1.546.888l3.943 6.843'/%3E%3Cpath d='m13.378 9.633 4.096 1.098 1.097-4.096'/%3E%3C/svg%3E"); } .gd-icon-shopping-bag { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3Cpath d='M3.103 6.034h17.794'/%3E%3Cpath d='M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z'/%3E%3C/svg%3E"); } .gd-icon-shopping-cart { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m2.05 2.05 1.099-.028a1 1 0 0 1 1.008.815l2.69 14.347A1 1 0 0 0 7.83 18H18'/%3E%3Cpath d='M4.563 5h16.435a1 1 0 0 1 .981 1.204l-1.026 6.226A2 2 0 0 1 18.962 14H6.25'/%3E%3Ccircle cx='18' cy='20' r='2'/%3E%3Ccircle cx='8' cy='20' r='2'/%3E%3C/svg%3E"); } .gd-icon-badge-check { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z'/%3E%3Cpath d='m16 9-5.5 5.5L8 12'/%3E%3C/svg%3E"); } .gd-icon-thumbs-up { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z'/%3E%3Cpath d='M7 10v12'/%3E%3C/svg%3E"); } .gd-icon-handshake { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E"); } .gd-icon-lightbulb { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); } .gd-icon-cloud { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E"); } .gd-icon-bell { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10.268 21a2 2 0 0 0 3.464 0'/%3E%3Cpath d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'/%3E%3C/svg%3E"); } .gd-icon-settings { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } .gd-icon-plane { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z'/%3E%3C/svg%3E"); } .gd-icon-sprout { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M14 9.536V7a4 4 0 0 1 4-4h1.5a.5.5 0 0 1 .5.5V5a4 4 0 0 1-4 4 4 4 0 0 0-4 4c0 2 1 3 1 5a5 5 0 0 1-1 3'/%3E%3Cpath d='M4 9a5 5 0 0 1 8 4 5 5 0 0 1-8-4'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E"); } .gd-icon-paw-print { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='11' cy='4' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Ccircle cx='20' cy='16' r='2'/%3E%3Cpath d='M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z'/%3E%3C/svg%3E"); } .gd-icon-shirt { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E"); } .gd-icon-scissors { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M8.12 8.12 12 12'/%3E%3Cpath d='M20 4 8.12 15.88'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M14.8 14.8 20 20'/%3E%3C/svg%3E"); } .gd-icon-stethoscope { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11 2v2'/%3E%3Cpath d='M5 2v2'/%3E%3Cpath d='M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1'/%3E%3Cpath d='M8 15a6 6 0 0 0 12 0v-3'/%3E%3Ccircle cx='20' cy='10' r='2'/%3E%3C/svg%3E"); } .gd-icon-building-2 { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10 12h4'/%3E%3Cpath d='M10 8h4'/%3E%3Cpath d='M14 21v-3a2 2 0 0 0-4 0v3'/%3E%3Cpath d='M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2'/%3E%3Cpath d='M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16'/%3E%3C/svg%3E"); } .gd-icon-wallet { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E"); } .gd-icon-percent { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cline x1='19' x2='5' y1='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E"); } .gd-icon-sparkle { --gd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z'/%3E%3C/svg%3E"); }