/* ================================================================ IvoThemeVariables.css OLL (Our Lady of Lebanon) — Dynamic Page Theme Variables Version: 1.4-OLL To revert to IVO default: restore original hex values below. Core brand tokens (--ivo-*) live in ivoShared.css :root. ================================================================ */ :root { /* ──────────────────────────────────────────────────────────── SECTION BAND — BACKGROUNDS & TEXT COLORS IVO default → OLL override article-bg: #f8f9fb → #fdf6ee warm cream products-bg: #eef0f5 → #f5ede0 warm off-cream events-bg: #2c3a52 → #1a0d10 deep burgundy-black quickmenu-bg: #e8ecf4 → #f0e8dc warm linen gold-bg: #faf3e0 → #c9973a antique gold band royal-bg: #1e2d45 → #6b1a2a burgundy ──────────────────────────────────────────────────────────── */ --dp-section-article-bg: #fdf6ee; --dp-section-products-bg: #f5ede0; --dp-section-events-bg: #1a0d10; --dp-section-quickmenu-bg: #f0e8dc; --dp-section-gold-bg: #c9973a; --dp-section-royal-bg: #6b1a2a; --dp-section-padding: 60px; --dp-section-article-color: #2c1a12; --dp-section-products-color: #2c1a12; --dp-section-events-color: #e8c06a; --dp-section-quickmenu-color: #2c1a12; --dp-section-gold-color: #1a0d10; --dp-section-royal-color: #e8c06a; /* ──────────────────────────────────────────────────────────── MANAGE BAR ──────────────────────────────────────────────────────────── */ --dp-manage-bar-bg: #1a0d10; --dp-manage-bar-border: #c9973a; --dp-manage-bar-btn-bg: #c9973a; --dp-manage-bar-btn-color: #1a0d10; --dp-manage-bar-btn-hover: #e8c06a; --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: #e8c06a; --dp-events-divider-color: #c9973a; --dp-pill-border: rgba(201,151,58,.35); --dp-pill-color: #2c1a12; --dp-pill-active-bg: #6b1a2a; --dp-pill-active-color: #ffffff; --dp-pill-active-border: #6b1a2a; --dp-pill-dark-border: rgba(232,192,106,.38); --dp-pill-dark-color: rgba(232,192,106,.82); --dp-pill-dark-active-bg: #e8c06a; --dp-pill-dark-active-color: #1a0d10; --dp-pill-dark-active-border: #e8c06a; --dp-event-card-grad-start: rgba(107,26,42,0.05); --dp-event-card-grad-end: #ffffff; --dp-event-card-border: rgba(201,151,58,.2); --dp-event-card-border-top: #6b1a2a; --dp-event-card-radius: 12px; --dp-event-card-shadow: rgba(107,26,42,0.09); --dp-event-date-color: #6b1a2a; --dp-event-rule-color: #e9e0d8; --dp-event-title-color: #1a0d10; --dp-event-desc-color: #7a6050; --dp-event-footer-border: #e9e0d8; --dp-event-link-color: #6b1a2a; --dp-event-closed-bg: #fde8e8; --dp-event-closed-color: #a32d2d; --dp-events-empty-color: #7a6050; --dp-events-empty-border: rgba(201,151,58,.2); --dp-events-empty-bg: #ffffff; /* ════════════════════════════════════════════════════════════ PRODUCTS CONTROL (CatBrowserBS5) ════════════════════════════════════════════════════════════ */ --dp-cb-admin-gradient: linear-gradient(90deg, #6b1a2a, #1a0d10); --dp-cb-btn-hover: #4a0d1c; --dp-cb-card-border: rgba(255,255,255,0.12); --dp-cb-card-border-active: var(--ivo-gold); --dp-cb-card-image-bg: rgba(255,255,255,0.94); --dp-cb-card-body-bg: rgba(26,13,16,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); --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); --dp-cb-card-hover-border: rgba(201,151,58,0.45); --dp-cb-card-active-bg: rgba(201,151,58,0.12); --dp-cb-card-active-shadow: rgba(201,151,58,0.28); --dp-cb-pills-strip-bg: #2d1219; --dp-cb-pill-border-default: rgba(201,151,58,0.40); --dp-cb-pill-text-default: rgba(232,192,106,0.85); --dp-cb-pill-hover-bg: rgba(201,151,58,0.12); --dp-cb-pill-hover-border: rgba(201,151,58,0.75); --dp-cb-pill-hover-color: #e8c06a; --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); --dp-cb-card-text: #2c1a12; --dp-cb-card-shadow-sm: rgba(26,13,16,0.07); --dp-cb-card-shadow-lg: rgba(26,13,16,0.14); --dp-cb-card-accent-shadow: rgba(26,13,16,0.04); --dp-cb-add-btn-color: #6b1a2a; --dp-cb-add-btn-bg: rgba(201,151,58,0.12); --dp-cb-add-btn-border: rgba(201,151,58,0.45); --dp-cb-add-btn-hover-bg: rgba(201,151,58,0.25); --dp-cb-add-btn-hover-border: rgba(201,151,58,0.70); --dp-cb-add-btn-hover-color: #4a0d1c; --dp-cb-add-btn-icon: #c9973a; --dp-cb-item-cats-border: rgba(201,151,58,.2); --dp-cb-pill-c1-bg: #1a0d10; --dp-cb-pill-c2-bg: #6b1a2a; --dp-cb-pill-c3-bg: #c9973a; --dp-cb-pill-c3-color: #1a0d10; --dp-cb-sold-out-color: #dc3545; --dp-cb-slots-avail-color: #198754; --dp-cb-btn-soldout-bg: #6c757d; /* ════════════════════════════════════════════════════════════ ARTICLE CONTROL (DisplayArticlebs5) ════════════════════════════════════════════════════════════ */ --dp-article-title-color: #1a0d10; --dp-article-body-color: #4a2e20; --dp-article-link-color: #6b1a2a; --dp-article-edit-bg: #fff8e6; --dp-article-edit-border: #e8c06a; /* ════════════════════════════════════════════════════════════ QUICK MENU CONTROL (uc_QuickMenu) ════════════════════════════════════════════════════════════ */ --dp-qm-empty-color: #7a6050; --dp-qm-empty-border: rgba(201,151,58,.2); --dp-qm-dark-bg: #836d5a; --dp-qm-list-num-color: #c9973a; --dp-qm-accent-color: #e8c06a; --dp-qm-head-border: rgba(201,151,58,.20); --dp-qm-list-link-color: #e8c06a; --dp-qm-card-title-color: #fff8ee; --dp-qm-card-sub-color: #d4bfa0; /* ════════════════════════════════════════════════════════════ SLIDESHOW CONTROL (uc_SlideshowBS5) ════════════════════════════════════════════════════════════ */ --dp-slide-indicator-color: rgba(255,255,255,0.5); --dp-slide-indicator-active: #c9973a; --dp-slide-control-color: #ffffff; /* ════════════════════════════════════════════════════════════ SHARED FORM INPUTS ════════════════════════════════════════════════════════════ */ --dp-input-bg: #f5ede0; --dp-input-border: rgba(201,151,58,.3); --dp-input-focus-bg: #ffffff; --dp-input-focus-border: var(--ivo-royal); --dp-input-focus-shadow: rgba(107,26,42,0.15); /* ════════════════════════════════════════════════════════════ SPLIT CARD (ItemGridBS5.ascx) ════════════════════════════════════════════════════════════ */ --dp-card-split-border: rgba(201,151,58,.2); --dp-card-split-info-sep: #f5ede0; --dp-card-split-admin-bg: #fdf6ee; --dp-card-remark-color: #dc3545; /* ════════════════════════════════════════════════════════════ SUB-ARTICLE CONTROL (uc_ArtSubArtBS5) ════════════════════════════════════════════════════════════ */ --dp-subart-heading-border: var(--ivo-gold); --dp-subart-heading-color: var(--ivo-navy); --dp-subart-card-border: rgba(201,151,58,.2); --dp-subart-card-hover-border: var(--ivo-royal); --dp-subart-card-hover-shadow: rgba(107,26,42,0.10); --dp-subart-title-color: var(--ivo-navy); --dp-subart-title-hover: var(--ivo-royal); --dp-subart-desc-color: #7a6050; --dp-subart-readmore-color: var(--ivo-royal); --dp-subart-readmore-hover: var(--ivo-gold); /* ════════════════════════════════════════════════════════════ GALLERY MODE (CatBrowserBS5 gallery) ════════════════════════════════════════════════════════════ */ --dp-gal-item-bg: var(--ivo-navy); --dp-gal-overlay-bg: rgba(26,13,16,0.82); --dp-gal-modal-backdrop: rgba(26,13,16,0.82); --dp-gal-modal-img-bg: var(--ivo-navy); --dp-gal-modal-close-color: #7a6050; --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: rgba(201,151,58,.2); --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(201,151,58,.28); --dp-bio-dark-card-hover: rgba(201,151,58,.10); --dp-bio-dark-text: var(--dp-section-royal-color); --dp-bio-dark-muted: #c8a87a; --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: #2d1219; --dp-bio-light-card-bg: #ffffff; --dp-bio-light-card-border: rgba(201,151,58,.15); --dp-bio-light-card-hover: rgba(107,26,42,.06); --dp-bio-light-text: var(--dp-section-article-color); --dp-bio-light-muted: #7a6050; --dp-bio-light-shadow: 0 8px 30px rgba(26,13,16,.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; } /* ═══════════════════════════════════════════════════════════════════ 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 ──────────────────────────────── */