/* ========================================================================== Connect Digital - frontend (public-facing) reskin ========================================================================== Loaded automatically by FrontendSystemInit (apps/frontend/components/init/ FrontendSystemInit.php) as the LAST stylesheet on every frontend page, after AdminLTE + the configured vendor skin - same drop-in mechanism as the already-shipped customer/backend reskins. No markup/PHP was touched. Scope note (frontend-specific, unlike backend/customer): this app has no sidebar/nav chrome (`sidebar-hidden` body class, no .main-sidebar in any frontend layout) - so none of the sidebar/treeview rules from the other two reskins apply here and are intentionally left out. More importantly, frontend renders customer-controlled content in three places a global reskin has to stay defensive around: 1. Landing pages (`full-page` layout) - fully customer-authored HTML/CSS. 2. Per-list subscribe/unsubscribe/confirm/update-profile pages - admin sets a global default (`box`/`callout`/`btn` markup, styled below), but each customer can replace their own list's page content with arbitrary HTML that won't carry those classes. 3. Embeddable list forms (customer app's "Embed list forms" feature) - the visitor-facing markup/CSS for those lives on the customer's own external website, entirely outside this app's `` - this file has zero effect on those, by definition (not a bug, just scope). None of this file uses `!important` outside the icon-glyph swaps (same restraint as the other two reskins), and box/callout/btn/form rules are scoped to specific AdminLTE class names rather than raw `body`/`*` selectors, so customer-authored landing pages or hand-edited list pages simply won't be touched unless they happen to reuse those exact classes. ========================================================================== */ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/v4-shims.min.css'); :root { --cd-pink: #ec4899; --cd-purple: #7c3aed; --cd-purple-dark: #5b21b6; --cd-gradient: linear-gradient(135deg, var(--cd-pink) 0%, var(--cd-purple) 100%); --cd-ink: #1f2330; --cd-ink-soft: #6b7280; --cd-border: #e5e7eb; --cd-bg: #f8fafc; --cd-card-radius: 14px; --cd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Background/font applies to the page shell only - deliberately not a blanket `body, p, div, ...` selector list like the backend/customer files use, since frontend's `full-page` layout (landing pages) needs to stay out of the way of customer-authored typography rather than impose a default that fights with it. Subscribe-form/callout/button text still gets the font via the more specific rules below. */ body.app-frontend { background: var(--cd-bg); color: var(--cd-ink); } body.app-frontend .container, body.app-frontend .container-fluid { font-family: var(--cd-font); } /* ---- Header/footer (HeaderWidget/FooterWidget, main.php layout only - full-page and embed layouts don't render these) ------------------------ */ body.app-frontend .navbar, body.app-frontend .navbar .logo { background: var(--cd-gradient) !important; border: none; } /* Frontend's HeaderWidget uses plain Bootstrap 3 navbar markup (`.navbar-brand`), not AdminLTE's `.logo` class that backend/customer use - found by actually loading a frontend page: the "Connect Digital" brand text kept Bootstrap's default `.navbar-default .navbar-brand` gray (#777), which read as barely-visible low-contrast text against the new gradient navbar background. */ body.app-frontend .navbar-brand, body.app-frontend .navbar-brand:hover, body.app-frontend .navbar-brand:focus { color: #fff !important; font-weight: 700; } body.app-frontend .navbar .nav > li > a { color: rgba(255, 255, 255, 0.92); } body.app-frontend .navbar .nav > li > a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } /* The "Sign up" nav item (HeaderWidget) renders as `.btn.btn-default`, not a plain nav link - found by actually loading a frontend 404 page: the `.navbar .nav > li > a` white-text rule above was winning over `.btn-default`'s dark text (same specificity, later in cascade order), leaving white text on `.btn-default`'s white background - invisible. Restores the intended dark text for any button-styled nav item. */ body.app-frontend .navbar .nav > li > a.btn-default { color: var(--cd-ink); } body.app-frontend .navbar .nav > li > a.btn-default:hover { color: var(--cd-ink); background: #f3f4f6; } /* ---- Cards / boxes --------------------------------------------------------- The default subscribe/unsubscribe/confirm/update-profile page content (list_page_type table, admin-editable, unmodified per-list by default) and static pages/report-abuse/forward-friend forms all use this same `.box`/`.callout` AdminLTE vocabulary. */ body.app-frontend .box { border-radius: var(--cd-card-radius); border: 1px solid var(--cd-border); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); background: #fff; } body.app-frontend .box.box-primary { border-top: none; } body.app-frontend .box-header { border-radius: var(--cd-card-radius) var(--cd-card-radius) 0 0; border-bottom: 1px solid var(--cd-border); padding: 18px 20px; } body.app-frontend .box-header .box-title { font-weight: 700; font-size: 16px; color: var(--cd-ink); } body.app-frontend .box-body { padding: 20px; } body.app-frontend .box-footer { padding: 16px 20px; border-top: 1px solid var(--cd-border); } body.app-frontend .callout { border-radius: 10px; border: none; border-left: 4px solid var(--cd-purple); } body.app-frontend .callout.callout-info { background: #f3e8ff; color: var(--cd-purple-dark); } /* ---- Buttons ---------------------------------------------------------------- */ body.app-frontend .btn { border-radius: 999px; font-weight: 600; border: none; transition: filter 0.15s ease, box-shadow 0.15s ease; } body.app-frontend .btn-primary, body.app-frontend .btn.btn-flat.btn-primary { background: var(--cd-gradient); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25); } body.app-frontend .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.32); } body.app-frontend .btn-default { background: #fff; border: 1px solid var(--cd-border); color: var(--cd-ink); } body.app-frontend .btn-default:hover { background: #f3f4f6; } /* ---- Forms (subscribe/unsubscribe/update-profile/report-abuse/ forward-friend all use plain Bootstrap 3 form-group/form-control) --------- */ body.app-frontend .form-control { border-radius: 10px; border: 1px solid var(--cd-border); box-shadow: none; } body.app-frontend .form-control:focus { border-color: var(--cd-purple); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14); } body.app-frontend select:not(.form-control):not(.select2-hidden-accessible) { font-size: 14px; color: var(--cd-ink); padding: 8px 14px; border-radius: 10px; border: 1px solid var(--cd-border); background-color: #fff; } /* ---- Tables (subscriber's campaign history / campaign report pages) ------- */ body.app-frontend .table > thead > tr > th { text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; color: var(--cd-ink-soft); font-weight: 700; border-bottom: 1px solid var(--cd-border); padding: 10px 12px; } body.app-frontend .table > tbody > tr > td { padding: 12px; border-top: 1px solid #f1f2f4; vertical-align: middle; } /* ---- Static/CMS pages (pages/view.php, articles/*) ------------------------- */ body.app-frontend .page-heading { font-weight: 700; color: var(--cd-ink); } /* ---- Labels ------------------------------------------------------------------ */ body.app-frontend .label { border-radius: 999px; padding: 3px 9px; font-weight: 600; } /* ---- Modern icons ---------------------------------------------------------- Same conservative, explicitly-mapped-classes-only approach as the backend reskin (see that file's comment for why a blanket `[class*=...]` selector is unsafe) - only the glyphicon/ionicon classes actually confirmed in use across frontend's static views are remapped. */ body.app-frontend .glyphicon-envelope, body.app-frontend .glyphicon-user, body.app-frontend .glyphicon-ok, body.app-frontend .glyphicon-remove, body.app-frontend .glyphicon-envelope::before, body.app-frontend .glyphicon-user::before, body.app-frontend .glyphicon-ok::before, body.app-frontend .glyphicon-remove::before { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-style: normal; } body.app-frontend .glyphicon-envelope:before { content: "\f0e0" !important; } /* envelope */ body.app-frontend .glyphicon-user:before { content: "\f007" !important; } /* user */ body.app-frontend .glyphicon-ok:before { content: "\f00c" !important; } /* check */ body.app-frontend .glyphicon-remove:before { content: "\f00d" !important; } /* xmark */ body.app-frontend .fa, body.app-frontend .glyphicon-envelope, body.app-frontend .glyphicon-user, body.app-frontend .glyphicon-ok, body.app-frontend .glyphicon-remove { font-size: 1.05em; vertical-align: -1px; }