/* Theme base styles */ /* Tools Any animations, or functions used throughout the project. Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here */ /* ====================================================================== */ /* Cognistry Theme - Design Tokens */ /* Single source of truth for all CSS custom properties */ /* ====================================================================== */ :root { /* --- Brand Colors --- */ --cognistry-primary: #4e0a77; --cognistry-secondary: #7b2fa5; --cognistry-accent: #0fbf96; /* --- Brand Color Variants (10% opacity) --- */ --cognistry-primary-10: rgba(78, 10, 119, 0.10); --cognistry-secondary-10: rgba(123, 47, 165, 0.10); --cognistry-accent-10: rgba(15, 191, 150, 0.10); /* --- Brand Hover States --- */ --cognistry-primary-hover: #3d0860; --cognistry-secondary-hover: #6a2891; --cognistry-accent-hover: #0da883; /* --- Semantic Colors --- */ --cognistry-text: #101828; --cognistry-text-muted: #475467; --cognistry-bg: #ffffff; --cognistry-bg-subtle: #f8fafc; --cognistry-border: #e4e7ec; /* --- Foreground on Brand Colors --- */ --cognistry-fg-on-primary: #ffffff; --cognistry-fg-on-secondary: #ffffff; --cognistry-fg-on-accent: #052e2b; /* --- State Colors --- */ --cognistry-error: #ef4444; --cognistry-error-light: #fef2f2; --cognistry-error-border: #fecaca; --cognistry-success: #22c55e; --cognistry-success-light: #f0fdf4; --cognistry-success-border: #bbf7d0; --cognistry-warning: #f59e0b; --cognistry-warning-light: #fffbeb; --cognistry-warning-border: #fde68a; --cognistry-info: #3b82f6; --cognistry-info-light: #eff6ff; --cognistry-info-border: #bfdbfe; /* --- Disabled States --- */ --cognistry-disabled-bg: #d0d5dd; --cognistry-disabled-text: #98a2b3; --cognistry-disabled-border: #d0d5dd; /* --- Dark Mode Surfaces --- */ --cognistry-on-dark-fg: hsl(0 0% 96%); --cognistry-on-dark-muted: hsl(0 0% 80%); --cognistry-on-dark-border: hsl(0 0% 40%); /* --- Spacing Scale (4px base) --- */ --cognistry-space-1: 0.25rem; /* 4px */ --cognistry-space-2: 0.5rem; /* 8px */ --cognistry-space-3: 0.75rem; /* 12px */ --cognistry-space-4: 1rem; /* 16px */ --cognistry-space-6: 1.5rem; /* 24px */ --cognistry-space-8: 2rem; /* 32px */ --cognistry-space-12: 3rem; /* 48px */ --cognistry-space-16: 4rem; /* 64px */ --cognistry-space-24: 6rem; /* 96px */ /* --- Border Radius --- */ --cognistry-radius-sm: 0.375rem; /* 6px */ --cognistry-radius: 0.5rem; /* 8px */ --cognistry-radius-md: 0.65rem; /* 10px */ --cognistry-radius-lg: 0.75rem; /* 12px */ --cognistry-radius-xl: 1rem; /* 16px */ --cognistry-radius-full: 9999px; /* --- Shadows / Elevation --- */ --cognistry-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --cognistry-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --cognistry-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06); --cognistry-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); --cognistry-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04); /* --- Button Shadows (brand-tinted) --- */ --cognistry-shadow-primary: 0 6px 16px rgba(78, 10, 119, 0.14); --cognistry-shadow-primary-hover: 0 8px 20px rgba(123, 47, 165, 0.16); --cognistry-shadow-accent: 0 6px 16px rgba(15, 191, 150, 0.16); --cognistry-shadow-accent-hover: 0 8px 20px rgba(15, 191, 150, 0.18); /* --- Typography --- */ --cognistry-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --cognistry-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* --- Transitions --- */ --cognistry-transition-fast: 150ms ease; --cognistry-transition: 200ms ease; --cognistry-transition-slow: 300ms ease; /* --- Z-Index Scale --- */ --cognistry-z-dropdown: 1000; --cognistry-z-sticky: 1020; --cognistry-z-fixed: 1030; --cognistry-z-modal-backdrop: 1040; --cognistry-z-modal: 1050; --cognistry-z-popover: 1060; --cognistry-z-tooltip: 1070; /* --- Focus Ring --- */ --cognistry-ring: var(--cognistry-accent); --cognistry-ring-offset: 2px; --cognistry-ring-width: 2px; /* --- Card & Panel Styles --- */ --cognistry-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, var(--cognistry-bg-subtle) 100%); --cognistry-card-shadow: 0 2px 6px rgba(16, 24, 40, 0.04), 0 14px 32px rgba(16, 24, 40, 0.06); --cognistry-card-shadow-hover: 0 10px 24px rgba(16, 24, 40, 0.08), 0 24px 46px rgba(78, 10, 119, 0.10); --cognistry-card-border-hover: rgba(78, 10, 119, 0.22); /* --- Overlay --- */ --cognistry-overlay-dark: rgba(15, 23, 42, 0.88); --cognistry-overlay-light: rgba(255, 255, 255, 0.08); /* --- Dropdown & Menu Shadows --- */ --cognistry-shadow-dropdown: 0 18px 40px rgba(16, 24, 40, 0.12); --cognistry-shadow-dropdown-sm: 0 8px 20px rgba(16, 24, 40, 0.10); /* --- Header / Frosted Glass --- */ --cognistry-header-bg: rgba(255, 255, 255, 0.88); --cognistry-header-border: rgba(78, 10, 119, 0.08); --cognistry-header-shadow: 0 6px 24px rgba(16, 24, 40, 0.04); /* --- Image / Card Shadows (neutral) --- */ --cognistry-shadow-image: 0 8px 20px rgba(16, 24, 40, 0.08), 0 24px 48px rgba(16, 24, 40, 0.08); /* --- Table Styles --- */ --cognistry-table-row-hover: rgba(78, 10, 119, 0.03); /* --- Button Styles (unified) --- */ /* NOTE: Gradient buttons deprecated - use solid colors for consistent hover states */ --cognistry-btn-min-height: 48px; --cognistry-btn-min-height-sm: 44px; --cognistry-btn-padding: 0 1.25rem; --cognistry-btn-font-weight: 700; --cognistry-btn-font-size: 0.95rem; --cognistry-btn-hover-lift: -2px; /* --- Eyebrow / Label Styles (unified) --- */ --cognistry-eyebrow-size: 0.8rem; --cognistry-eyebrow-weight: 700; --cognistry-eyebrow-spacing: 0.12em; --cognistry-eyebrow-color: var(--cognistry-secondary); /* --- Card Title Styles (unified) --- */ --cognistry-card-title-size: 1.35rem; --cognistry-card-title-spacing: -0.02em; --cognistry-card-title-line-height: 1.2; --cognistry-card-hover-lift: -4px; /* --- Icon Container Styles (unified) --- */ --cognistry-icon-size: 50px; --cognistry-icon-radius: 14px; --cognistry-icon-bg: var(--cognistry-primary-10); /* --- Section Spacing (unified) --- */ --cognistry-section-padding-y: 80px; --cognistry-section-padding-y-lg: 96px; --cognistry-section-padding-x: 24px; --cognistry-section-padding-y-mobile: 56px; --cognistry-section-padding-x-mobile: 20px; /* ============================================================ */ /* PREMIUM VISUAL EFFECTS */ /* ============================================================ */ /* --- Gradient Backgrounds --- */ --cognistry-gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(78, 10, 119, 0.12) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 90% 10%, rgba(123, 47, 165, 0.08) 0%, transparent 40%), radial-gradient(ellipse 50% 30% at 10% 60%, rgba(15, 191, 150, 0.06) 0%, transparent 40%), var(--cognistry-bg); --cognistry-gradient-mesh: radial-gradient(at 40% 20%, rgba(78, 10, 119, 0.08) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(123, 47, 165, 0.06) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(15, 191, 150, 0.04) 0px, transparent 50%), radial-gradient(at 80% 50%, rgba(78, 10, 119, 0.04) 0px, transparent 50%), radial-gradient(at 0% 100%, rgba(123, 47, 165, 0.06) 0px, transparent 50%); /* --- Gradient Text --- */ --cognistry-gradient-text: linear-gradient(135deg, var(--cognistry-primary) 0%, var(--cognistry-secondary) 50%, var(--cognistry-accent) 100%); --cognistry-gradient-text-subtle: linear-gradient(135deg, var(--cognistry-primary) 0%, var(--cognistry-secondary) 100%); /* --- Premium Glows --- */ --cognistry-glow-primary: 0 0 40px rgba(78, 10, 119, 0.15), 0 0 80px rgba(78, 10, 119, 0.08); --cognistry-glow-accent: 0 0 40px rgba(15, 191, 150, 0.15), 0 0 80px rgba(15, 191, 150, 0.08); --cognistry-glow-soft: 0 0 60px rgba(78, 10, 119, 0.05); /* --- Premium Image Shadows --- */ --cognistry-shadow-product: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 12px 24px -8px rgba(78, 10, 119, 0.10), 0 0 0 1px rgba(78, 10, 119, 0.05); --cognistry-shadow-product-hover: 0 35px 60px -15px rgba(0, 0, 0, 0.18), 0 20px 40px -10px rgba(78, 10, 119, 0.15), 0 0 0 1px rgba(78, 10, 119, 0.08); /* --- Glass Effects --- */ --cognistry-glass-bg: rgba(255, 255, 255, 0.7); --cognistry-glass-border: rgba(255, 255, 255, 0.5); --cognistry-glass-blur: blur(12px); /* --- Premium Badge --- */ --cognistry-badge-bg: linear-gradient(135deg, rgba(78, 10, 119, 0.08) 0%, rgba(123, 47, 165, 0.04) 100%); --cognistry-badge-border: rgba(78, 10, 119, 0.15); --cognistry-badge-glow: 0 0 20px rgba(78, 10, 119, 0.08); /* --- Ambient Orbs (for background decoration) --- */ --cognistry-orb-primary: radial-gradient(circle, rgba(78, 10, 119, 0.15) 0%, transparent 70%); --cognistry-orb-secondary: radial-gradient(circle, rgba(123, 47, 165, 0.12) 0%, transparent 70%); --cognistry-orb-accent: radial-gradient(circle, rgba(15, 191, 150, 0.10) 0%, transparent 70%); /* --- Button Shadows (simplified) --- */ --cognistry-shadow-cta: 0 4px 12px rgba(78, 10, 119, 0.18); --cognistry-shadow-cta-hover: 0 6px 16px rgba(78, 10, 119, 0.22); /* --- Grid/Dot Patterns --- */ --cognistry-pattern-dots: radial-gradient(circle, rgba(78, 10, 119, 0.08) 1px, transparent 1px); --cognistry-pattern-grid: linear-gradient(rgba(78, 10, 119, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(78, 10, 119, 0.03) 1px, transparent 1px); } /* Generic This is where reset, normalize & box-sizing styles go. */ *, *:before, *:after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Objects Non-cosmetic design patterns including grid and layout classes) */ /* ====================================================================== */ /* Cognistry Theme - Layout System */ /* Modern HubSpot DnD grid with standardized spacing rhythm */ /* ====================================================================== */ :root { --column-gap: 24px; --content-max-width: 1280px; --content-padding-inline: 24px; /* Sitewide vertical rhythm */ --section-space-tight: 48px; --section-space-base: 64px; --section-space-loose: 80px; } /* ====================================================================== */ /* Base Elements */ /* ====================================================================== */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } /* ====================================================================== */ /* Page Structure */ /* ====================================================================== */ body { margin: 0; width: 100%; } .body-wrapper { min-height: 100vh; width: 100%; } .body-container-wrapper { width: 100%; } /* ====================================================================== */ /* Content Containers */ /* ====================================================================== */ .content-wrapper, .page-center, .container { margin-left: auto; margin-right: auto; max-width: var(--content-max-width); padding-left: var(--content-padding-inline); padding-right: var(--content-padding-inline); width: 100%; } /* ====================================================================== */ /* HubSpot DnD Sections - Full viewport width */ /* ====================================================================== */ .dnd-section { position: relative; width: 100%; } /* Row inside section - centered with max-width */ .dnd-section > .row-fluid, .dnd-section > .dnd-row { display: flex; flex-wrap: wrap; margin: 0 auto; max-width: var(--content-max-width); padding-left: var(--content-padding-inline); padding-right: var(--content-padding-inline); width: 100%; } /* ====================================================================== */ /* HubSpot DnD Columns */ /* ====================================================================== */ .dnd-column { flex: 1 1 100%; min-width: 0; padding: 0; } /* Desktop: Column widths based on span class */ @media (min-width: 768px) { .dnd-section > .row-fluid, .dnd-section > .dnd-row { flex-wrap: nowrap; gap: var(--column-gap); } .dnd-column { flex: 1 1 0; } .dnd-column.span1 { flex: 0 0 calc(8.333% - var(--column-gap) * 11 / 12); } .dnd-column.span2 { flex: 0 0 calc(16.666% - var(--column-gap) * 10 / 12); } .dnd-column.span3 { flex: 0 0 calc(25% - var(--column-gap) * 9 / 12); } .dnd-column.span4 { flex: 0 0 calc(33.333% - var(--column-gap) * 8 / 12); } .dnd-column.span5 { flex: 0 0 calc(41.666% - var(--column-gap) * 7 / 12); } .dnd-column.span6 { flex: 0 0 calc(50% - var(--column-gap) * 6 / 12); } .dnd-column.span7 { flex: 0 0 calc(58.333% - var(--column-gap) * 5 / 12); } .dnd-column.span8 { flex: 0 0 calc(66.666% - var(--column-gap) * 4 / 12); } .dnd-column.span9 { flex: 0 0 calc(75% - var(--column-gap) * 3 / 12); } .dnd-column.span10 { flex: 0 0 calc(83.333% - var(--column-gap) * 2 / 12); } .dnd-column.span11 { flex: 0 0 calc(91.666% - var(--column-gap) * 1 / 12); } .dnd-column.span12 { flex: 0 0 100%; } } /* ====================================================================== */ /* Legacy Bootstrap Grid (for compatibility) */ /* ====================================================================== */ .row-fluid { display: flex; flex-wrap: wrap; gap: var(--column-gap); width: 100%; } .row-fluid [class*="span"] { flex: 1 1 100%; min-width: 0; } @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; } .row-fluid .span1 { flex: 0 0 calc(8.333% - var(--column-gap) * 11 / 12); } .row-fluid .span2 { flex: 0 0 calc(16.666% - var(--column-gap) * 10 / 12); } .row-fluid .span3 { flex: 0 0 calc(25% - var(--column-gap) * 9 / 12); } .row-fluid .span4 { flex: 0 0 calc(33.333% - var(--column-gap) * 8 / 12); } .row-fluid .span5 { flex: 0 0 calc(41.666% - var(--column-gap) * 7 / 12); } .row-fluid .span6 { flex: 0 0 calc(50% - var(--column-gap) * 6 / 12); } .row-fluid .span7 { flex: 0 0 calc(58.333% - var(--column-gap) * 5 / 12); } .row-fluid .span8 { flex: 0 0 calc(66.666% - var(--column-gap) * 4 / 12); } .row-fluid .span9 { flex: 0 0 calc(75% - var(--column-gap) * 3 / 12); } .row-fluid .span10 { flex: 0 0 calc(83.333% - var(--column-gap) * 2 / 12); } .row-fluid .span11 { flex: 0 0 calc(91.666% - var(--column-gap) * 1 / 12); } .row-fluid .span12 { flex: 0 0 100%; } } /* ====================================================================== */ /* Responsive Breakpoints */ /* ====================================================================== */ @media (min-width: 1200px) { :root { --column-gap: 32px; --content-padding-inline: 40px; } } @media (min-width: 1600px) { :root { --content-max-width: 1400px; --content-padding-inline: 48px; } } @media (max-width: 991px) { :root { --column-gap: 20px; --content-padding-inline: 24px; --section-space-tight: 40px; --section-space-base: 56px; --section-space-loose: 72px; } } @media (max-width: 767px) { :root { --column-gap: 16px; --content-padding-inline: 20px; --section-space-tight: 32px; --section-space-base: 48px; --section-space-loose: 64px; } .dnd-section > .row-fluid, .dnd-section > .dnd-row, .row-fluid { flex-direction: column; gap: 24px; } .dnd-column, .row-fluid [class*="span"] { flex: 1 1 100% !important; width: 100% !important; } } /* ====================================================================== */ /* Utilities */ /* ====================================================================== */ .text-center { text-align: center; } .mx-auto { margin-left: auto; margin-right: auto; } .content-narrow { margin-left: auto; margin-right: auto; max-width: 720px; } .content-medium { margin-left: auto; margin-right: auto; max-width: 960px; } /* ====================================================================== */ /* Cognistry Theme - DnD Container Styling */ /* Standardized spacing behavior */ /* ====================================================================== */ /* Content wrapper base */ .content-wrapper { margin: 0 auto; width: 100%; } /* DnD section row centering */ .dnd-section > .row-fluid, .dnd-section > .dnd-row { margin: 0 auto; } /* DnD column spacing - modules control internal spacing */ .dnd-section .dnd-column { padding-left: 0; padding-right: 0; } /* Section positioning for backgrounds */ .dnd-section { position: relative; } /* Vertical alignment options for sections */ .dnd-section[class*="vertical-align-middle"] > .row-fluid, .dnd-section[class*="vertical-align-middle"] > .dnd-row { align-items: center; } .dnd-section[class*="vertical-align-bottom"] > .row-fluid, .dnd-section[class*="vertical-align-bottom"] > .dnd-row { align-items: flex-end; } /* ====================================================================== */ /* Sitewide Section Rhythm */ /* ====================================================================== */ /* Important: Do not auto-add vertical padding based on background styles. Section spacing should come from explicit section padding in templates/modules, not from whether a background color/image happens to exist. */ /* Optional utility class for consistent default sections */ .cg-section { padding-top: 64px; padding-bottom: 64px; } .cg-section--tight { padding-top: 48px; padding-bottom: 48px; } .cg-section--loose { padding-top: 80px; padding-bottom: 80px; } @media (max-width: 991px) { .cg-section { padding-top: 56px; padding-bottom: 56px; } .cg-section--tight { padding-top: 40px; padding-bottom: 40px; } .cg-section--loose { padding-top: 72px; padding-bottom: 72px; } } @media (max-width: 767px) { .cg-section { padding-top: 48px; padding-bottom: 48px; } .cg-section--tight { padding-top: 32px; padding-bottom: 32px; } .cg-section--loose { padding-top: 64px; padding-bottom: 64px; } } /* Elements Base HTML elements are styled in this section (,

, ,

,