/* ================================================================ IvoThemeVariables.css IVO, Inc. — Dynamic Page Theme Variables Version: 1.4 (audit-cleaned) Single source of truth for all --dp-* CSS variables. Controls used on DynamicPageBS5.aspx and its controls. To retheme: change values here only. Core brand tokens (--ivo-*) live in ivoShared.css :root. ================================================================ */ :root { /* ──────────────────────────────────────────────────────────── SECTION BAND — BACKGROUNDS & TEXT COLORS ──────────────────────────────────────────────────────────── */ --dp-section-article-bg: #f8f9fb; --dp-section-products-bg: #eef0f5; --dp-section-events-bg: #2c3a52; --dp-section-quickmenu-bg: #e8ecf4; --dp-section-gold-bg: #faf3e0; --dp-section-royal-bg: #1e2d45; --dp-section-padding: 60px; --dp-section-article-color: #0e1a30; --dp-section-products-color: #0e1a30; --dp-section-events-color: #d0d8e8; --dp-section-quickmenu-color: #0e1a30; --dp-section-gold-color: #0e1a30; --dp-section-royal-color: #d0d8e8; /* ──────────────────────────────────────────────────────────── MANAGE BAR ──────────────────────────────────────────────────────────── */ --dp-manage-bar-bg: #0a1628; --dp-manage-bar-border: #e8a020; --dp-manage-bar-btn-bg: #e8a020; --dp-manage-bar-btn-color: #0a1628; --dp-manage-bar-btn-hover: #f5c55a; --dp-manage-bar-top: 62px; /* ──────────────────────────────────────────────────────────── ADMIN WARNING BAR ──────────────────────────────────────────────────────────── */ --dp-admin-warn-bg: #fff3cd; --dp-admin-warn-color: #856404; --dp-admin-warn-border: #ffc107; /* ════════════════════════════════════════════════════════════ EVENTS CONTROL (uc_UpcomingEventsBS5) ════════════════════════════════════════════════════════════ */ --dp-events-admin-bg: #fff8e6; --dp-events-admin-border: #f0d080; --dp-events-divider-color: #e8a020; --dp-pill-border: #ced4da; --dp-pill-color: #212529; --dp-pill-active-bg: #1346a0; --dp-pill-active-color: #ffffff; --dp-pill-active-border: #1346a0; --dp-pill-dark-border: rgba(255,255,255,0.38); --dp-pill-dark-color: rgba(255,255,255,0.82); --dp-pill-dark-active-bg: #ffffff; --dp-pill-dark-active-color: #1346a0; --dp-pill-dark-active-border: #ffffff; --dp-event-card-grad-start: rgba(19,70,160,0.05); --dp-event-card-grad-end: #ffffff; --dp-event-card-border: #dee2e6; --dp-event-card-border-top: #1346a0; --dp-event-card-radius: 12px; --dp-event-card-shadow: rgba(19,70,160,0.09); --dp-event-date-color: #1346a0; --dp-event-rule-color: #e9ecef; --dp-event-title-color: #0a1628; --dp-event-desc-color: #6c757d; --dp-event-footer-border: #e9ecef; --dp-event-link-color: #1346a0; --dp-event-closed-bg: #fde8e8; --dp-event-closed-color: #a32d2d; --dp-events-empty-color: #6c757d; --dp-events-empty-border: #dee2e6; --dp-events-empty-bg: #ffffff; /* ════════════════════════════════════════════════════════════ PRODUCTS CONTROL (CatBrowserBS5) ════════════════════════════════════════════════════════════ */ --dp-cb-admin-gradient: linear-gradient(90deg, #6d28d9, #9f1239); --dp-cb-btn-hover: #0d3a8a; /* Card border and frame */ --dp-cb-card-border: rgba(255,255,255,0.12); --dp-cb-card-border-active: var(--ivo-gold); /* Image area */ --dp-cb-card-image-bg: rgba(255,255,255,0.94); /* Card footer/body */ --dp-cb-card-body-bg: rgba(10,22,40,0.72); --dp-cb-card-body-color: rgba(255,255,255,0.88); --dp-cb-card-name-color: rgba(255,255,255,0.88); --dp-cb-card-name-active: var(--ivo-gold); /* Badge inside card footer */ --dp-cb-badge-bg: rgba(255,255,255,0.12); --dp-cb-badge-color: rgba(255,255,255,0.6); --dp-cb-badge-active-bg: var(--ivo-gold); --dp-cb-badge-active-color: var(--ivo-navy); /* Hover glow on card */ --dp-cb-card-hover-border: rgba(232,160,32,0.45); --dp-cb-card-active-bg: rgba(232,160,32,0.12); --dp-cb-card-active-shadow: rgba(232,160,32,0.28); /* Pills strip */ --dp-cb-pills-strip-bg: #1e2a3a; --dp-cb-pill-border-default: rgba(255,255,255,0.30); --dp-cb-pill-text-default: rgba(255,255,255,0.75); --dp-cb-pill-hover-bg: rgba(255,255,255,0.08); --dp-cb-pill-hover-border: rgba(255,255,255,0.60); --dp-cb-pill-hover-color: rgba(255,255,255,0.95); --dp-cb-pill-active-bg: var(--ivo-gold); --dp-cb-pill-active-border: var(--ivo-gold); --dp-cb-pill-active-color: var(--ivo-navy); --dp-cb-pill-active-badge-bg: var(--ivo-navy); --dp-cb-pill-active-badge-clr: var(--ivo-gold); /* Product cards (item grid) */ --dp-cb-card-text: #1e293b; --dp-cb-card-shadow-sm: rgba(10,22,40,0.07); --dp-cb-card-shadow-lg: rgba(10,22,40,0.14); --dp-cb-card-accent-shadow: rgba(10,22,40,0.04); /* Add Items bar */ --dp-cb-add-btn-color: #92400e; --dp-cb-add-btn-bg: rgba(245,158,11,0.12); --dp-cb-add-btn-border: rgba(245,158,11,0.45); --dp-cb-add-btn-hover-bg: rgba(245,158,11,0.25); --dp-cb-add-btn-hover-border: rgba(245,158,11,0.70); --dp-cb-add-btn-hover-color: #78350f; --dp-cb-add-btn-icon: #d97706; /* Item category pills */ --dp-cb-item-cats-border: #e2e8f0; --dp-cb-pill-c1-bg: #0a1628; --dp-cb-pill-c2-bg: #1346a0; --dp-cb-pill-c3-bg: #e8a020; --dp-cb-pill-c3-color: #0a1628; /* Badges */ --dp-cb-sold-out-color: #dc3545; --dp-cb-slots-avail-color: #198754; --dp-cb-btn-soldout-bg: #6c757d; /* ════════════════════════════════════════════════════════════ ARTICLE CONTROL (DisplayArticlebs5) — PENDING MIGRATION ════════════════════════════════════════════════════════════ */ --dp-article-title-color: #0a1628; --dp-article-body-color: #3a4a65; --dp-article-link-color: #1346a0; --dp-article-edit-bg: #fff8e6; --dp-article-edit-border: #f0d080; /* ════════════════════════════════════════════════════════════ QUICK MENU CONTROL (uc_QuickMenu) ════════════════════════════════════════════════════════════ */ --dp-qm-empty-color: #6c757d; --dp-qm-empty-border: #dee2e6; --dp-qm-dark-bg: #061523; --dp-qm-list-num-color: #e8593c; --dp-qm-accent-color: #00c8e0; --dp-qm-head-border: rgba(0,200,224,0.20); --dp-qm-list-link-color: #c8d8f0; --dp-qm-card-title-color: #f0f8ff; --dp-qm-card-sub-color: #8fb8d4; /* ════════════════════════════════════════════════════════════ SLIDESHOW CONTROL (uc_SlideshowBS5) — PENDING MIGRATION ════════════════════════════════════════════════════════════ */ --dp-slide-indicator-color: rgba(255,255,255,0.5); --dp-slide-indicator-active: #ffffff; --dp-slide-control-color: #ffffff; /* ════════════════════════════════════════════════════════════ SHARED FORM INPUTS (used by IvoSiteStyle.css) Promoted to variables so theme switcher can control them. ════════════════════════════════════════════════════════════ */ --dp-input-bg: #eef2fb; --dp-input-border: #d6e0f5; --dp-input-focus-bg: #ffffff; --dp-input-focus-border: var(--ivo-royal); --dp-input-focus-shadow: rgba(19,70,160,0.15); /* ════════════════════════════════════════════════════════════ SPLIT CARD (ItemGridBS5.ascx) Promoted to variables — were hardcoded in ivoShared.css ════════════════════════════════════════════════════════════ */ --dp-card-split-border: #dde3ee; --dp-card-split-info-sep: #eef0f5; --dp-card-split-admin-bg: #f7f8fb; --dp-card-remark-color: #dc3545; /* ════════════════════════════════════════════════════════════ SUB-ARTICLE CONTROL (uc_ArtSubArtBS5) Promoted to variables — were hardcoded in IvoControlStyles.css ════════════════════════════════════════════════════════════ */ --dp-subart-heading-border: var(--ivo-gold); --dp-subart-heading-color: var(--ivo-navy); --dp-subart-card-border: #dee2e6; --dp-subart-card-hover-border: var(--ivo-royal); --dp-subart-card-hover-shadow: rgba(19,70,160,0.10); --dp-subart-title-color: var(--ivo-navy); --dp-subart-title-hover: var(--ivo-royal); --dp-subart-desc-color: #6c757d; --dp-subart-readmore-color: var(--ivo-royal); --dp-subart-readmore-hover: var(--ivo-gold); /* ════════════════════════════════════════════════════════════ GALLERY MODE (CatBrowserBS5 gallery) Promoted to variables — were hardcoded in IvoControlStyles.css ════════════════════════════════════════════════════════════ */ --dp-gal-item-bg: var(--ivo-navy); --dp-gal-overlay-bg: rgba(10,22,40,0.82); --dp-gal-modal-backdrop: rgba(10,22,40,0.82); --dp-gal-modal-img-bg: var(--ivo-navy); --dp-gal-modal-close-color: #6c757d; --dp-gal-modal-close-hover: var(--ivo-navy); --dp-gal-modal-title-color: var(--ivo-navy); --dp-gal-buybtn-bg: var(--ivo-navy); --dp-gal-buybtn-hover-bg: var(--ivo-royal); --dp-gal-exhibbtn-border: #dee2e6; --dp-gal-exhibbtn-hover: var(--ivo-royal); /* ════════════════════════════════════════════════════════════════ BIOGRAPHY CONTROL (uc_BiographyBS5) Promoted from comment block in IvoControlStyles.css into real variables so theme switcher can control them. ════════════════════════════════════════════════════════════════ */ --dp-bio-dark-card-bg: var(--ivo-navy); --dp-bio-dark-card-border: rgba(232,160,32,.28); --dp-bio-dark-card-hover: rgba(232,160,32,.10); --dp-bio-dark-text: var(--dp-section-royal-color); --dp-bio-dark-muted: #8098b8; --dp-bio-dark-shadow: 0 20px 60px rgba(0,0,0,.55); --dp-bio-dark-modal-bg: var(--ivo-navy); --dp-bio-dark-modal-body: #0d1e38; --dp-bio-light-card-bg: #ffffff; --dp-bio-light-card-border: rgba(0,0,0,.10); --dp-bio-light-card-hover: rgba(19,70,160,.06); --dp-bio-light-text: var(--dp-section-article-color); --dp-bio-light-muted: #6c757d; --dp-bio-light-shadow: 0 8px 30px rgba(0,0,0,.12); --dp-bio-light-modal-bg: #ffffff; --dp-bio-light-modal-body: var(--dp-section-article-bg); /* ════════════════════════════════════════════════════════════════ ADMIN UI UTILITY COLORS Danger / warning tones used by admin-only previews and buttons. Not brand colors — semantic only, client themes should not change. ════════════════════════════════════════════════════════════════ */ --dp-ui-danger: #dc2626; --dp-ui-danger-bg: #fef2f2; --dp-ui-warning: #f59e0b; --dp-ui-warning-dark: #92400e; --dp-ui-gold-btn-bg: var(--ivo-gold); --dp-ui-gold-btn-hover: var(--ivo-gold-light); --dp-ui-gold-btn-dark: #c5871a; /* ════════════════════════════════════════════════════════════════ Misc Fixes whilke unifying the control and theme ════════════════════════════════════════════════════════════════ */ --dp-thankyou-border: #198754; --dp-thankyou-bg: #d1e7dd; --dp-thankyou-color: #0a3622; --dp-info-bg: #d1ecf1; --dp-info-border: #bee5eb; --dp-info-color: #0c5460; } /* ═══════════════════════════════════════════════════════════════════ EMAIL NOTIFICATION COLORS — oll-chicago-local (Our Lady of Lebanon) Append this block to /Content/themes/oll-chicago-local/IvoThemeVariables.css ═══════════════════════════════════════════════════════════════════ */ :root { --email-header-bg: #5c1a2e; /* OLL burgundy */ --email-header-text: #ffffff; --email-header-subtext: rgba(255,255,255,0.60); --email-accent: #b8972a; /* antique gold */ --email-badge-bg: #b8972a; --email-badge-text: #ffffff; --email-title-text: #5c1a2e; /* burgundy headings */ --email-label-text: #6c757d; --email-value-text: #2c1a12; /* dark warm text */ --email-section-label: #5c1a2e; /* burgundy section caps */ } /* ═══════════════════════════════════════════════════════════════════ SLIDESHOW CONTROL — uc_SlideshowBS5.ascx Append this block to the END of every site's IvoThemeVariables.css. Values below are the IVO default (navy/gold palette). Each site overrides only the vars that differ from this default. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Image-slide overlay ───────────────────────────────────── Gradient fade from top to bottom over the image. Default: subtle top, stronger bottom (matches demo pattern). */ --dp-slide-overlay-bg: linear-gradient(to bottom, rgba(0,0,0,.10) 0%, rgba(0,0,0,.52) 100%); /* ── Eyebrow label ─────────────────────────────────────────── Small uppercase label above the title. --dp-slide-eyebrow-bar: set to 'block' to show the leading decorative line, 'none' to hide it. */ --dp-slide-eyebrow-color: #e8a020; --dp-slide-eyebrow-bar: block; --dp-slide-eyebrow-font: var(--ivo-font-body); --dp-slide-eyebrow-size: .68rem; --dp-slide-eyebrow-tracking: 3px; /* ── Title ─────────────────────────────────────────────────── */ --dp-slide-title-color: rgba(255,255,255,.94); --dp-slide-title-font: var(--ivo-font-serif); --dp-slide-title-weight: 700; /* ── Description ───────────────────────────────────────────── */ --dp-slide-desc-color: rgba(255,255,255,.72); --dp-slide-desc-font: var(--ivo-font-body); /* ── CTA button ────────────────────────────────────────────── .ivo-ss-btn AND .ivo-btn-gold (backward-compat alias) both read these vars. */ --dp-slide-btn-bg: #e8a020; --dp-slide-btn-color: #0a1628; --dp-slide-btn-hover-bg: #f0b030; --dp-slide-btn-hover-color: #0a1628; --dp-slide-btn-radius: 6px; /* ── Dash-bar indicators ───────────────────────────────────── Replaces Bootstrap circle dots. Active bar is wider than inactive. */ --dp-slide-indicator-color: rgba(255,255,255,.35); --dp-slide-indicator-active: #e8a020; --dp-slide-indicator-w: 28px; --dp-slide-indicator-w-act: 42px; --dp-slide-indicator-h: 2px; --dp-slide-indicator-radius: 0px; /* ── Decorative dot texture on gradient-only slides ────────── */ --dp-slide-dots-color: rgba(255,255,255,.12); /* ── Fallback gradients (no image set) ─────────────────────── Three variants cycled by slide index (0, 1, 2, 0, 1, 2 ...). Default: IVO navy/royal blue palette. */ --dp-slide-fallback-grad-0: linear-gradient(140deg, #050d1c 0%, #0e2554 40%, #1346a0 75%, #1a6bcc 100%); --dp-slide-fallback-grad-1: linear-gradient(140deg, #050f1f 0%, #0b1e3d 40%, #0e3070 70%, #1a5090 100%); --dp-slide-fallback-grad-2: linear-gradient(140deg, #0a1628 0%, #0e2a50 45%, #1346a0 80%, #1a68c0 100%); } /* ── END SLIDESHOW CONTROL VARIABLES ──────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════ STATISTICS STRIP CONTROL — uc_StatsBS5.ascx Append this block to the END of every site's IvoThemeVariables.css. Values below are the OLL override (burgundy/gold/cream palette), matching the existing EVENTS / QUICK MENU / SUB-ARTICLE bands above. IVO default → OLL override num-color (light band): #1346a0 royal blue → #6b1a2a burgundy label-color: #6c757d gray → #7a6050 warm brown title-color (light band): #0e1a30 navy → #2c1a12 dark warm dark-num-color: #e8a020 gold → #e8c06a antique gold dark-label: #d0d8e8 pale blue → rgba(232,192,106,.82) muted gold ═══════════════════════════════════════════════════════════════════ */ :root { --dp-stat-num-color: #6b1a2a; --dp-stat-label-color: #7a6050; --dp-stat-divider-color: rgba(107,26,42,.18); --dp-stat-title-color: #2c1a12; --dp-stat-dark-num-color: #e8c06a; --dp-stat-dark-label: rgba(232,192,106,.82); --dp-stat-dark-divider: rgba(201,151,58,.28); --dp-stat-dark-title: #fff8ee; } /* ── END STATISTICS STRIP CONTROL VARIABLES ───────────────────────── */ /* ═══════════════════════════════════════════════════════════════════ SHARED ADMIN PANEL TOOLKIT — settings-drawer tokens Append this block to the END of every site's IvoThemeVariables.css. Consumed by the CSS classes in IvoControlStyles.css (.ivo-layout-panel, .ivo-switch, .ivo-admin-toolbar, .ivo-config-preview) — those class rules live only in IvoControlStyles.css, never in this file. Reuses the site's established "admin surface" look already applied to --dp-events-admin-* and --dp-article-edit-* above (warm cream + gold-tinted border) rather than a generic gray panel. IVO default → OLL override panel-bg: #f4f6fa cool gray → #fff8e6 warm cream panel-border: rgba(0,0,0,.10) → rgba(201,151,58,.35) gold-tinted panel-text: #1c2534 slate → #2c1a12 dark warm panel-muted: #6c757d gray → #7a6050 warm brown switch-on: #1346a0 royal → #6b1a2a burgundy ═══════════════════════════════════════════════════════════════════ */ :root { --dp-admin-panel-bg: #fff8e6; --dp-admin-panel-border: rgba(201,151,58,.35); --dp-admin-panel-text: #2c1a12; --dp-admin-panel-muted: #7a6050; --dp-admin-switch-track-off: #d9c9b0; --dp-admin-switch-track-on: #6b1a2a; --dp-admin-switch-thumb: #ffffff; } /* ── END SHARED ADMIN PANEL TOOLKIT VARIABLES ─────────────────────── */