/* ============================================================================
3CLogic — MASTER THEME (site-wide design-system override)
----------------------------------------------------------------------------
Load this ONE file, in every template, immediately after theme.min.css and
before any page-scoped override (e.g. homepage-v2-theme.css). It remaps the
Front/Bootstrap 5 theme this site is built on to the 3CLogic design system —
royal blue + deep navy + gold/amber, Poppins display / Inter body — so every
page (nav, footer, buttons, forms, cards…) shares one consistent look,
instead of each template hand-rolling its own brand colors inline.
Source of truth for every value below:
design-refs/.../_ds/3clogic-main-design-system-.../tokens/{colors,typography,spacing,effects,base}.css
Supersedes dist/assets/css/template_custom_APPEND_refresh.css — that file's
8 sections are folded into §6–§16 here, plus the component coverage it
didn't reach (navbar, dropdown, badges, alerts, tabs, pagination, list-
group, table, tooltip/popover, progress, toasts). Leave that file on disk
for reference; templates should link this one instead.
Requires Poppins (500/600) + Inter (400/500/600/700) to be loaded via
Google Fonts in each template's — see §3 for the exact tag.
============================================================================ */
/* ============================================================================
1. COLOR TOKENS
============================================================================ */
:root {
/* ---- Brand blue ---- */
--3c-blue-900: #001B5E;
--3c-blue-800: #0033A0;
--3c-blue-700: #0044B9; /* logo "3C" deep royal */
--3c-blue-600: #0A47CC;
--3c-blue-500: #1654E5; /* primary action / links */
--3c-blue-400: #3A75FF;
--3c-blue-300: #6B97FF;
--3c-blue-200: #A9C3FF;
--3c-blue-100: #D8E4FF;
--3c-blue-50: #EEF4FF;
/* ---- Deep navy (dark sections / hero) ---- */
--3c-navy-900: #001341;
--3c-navy-800: #06205A;
--3c-navy-700: #102A66;
--3c-navy-600: #21325B;
--3c-navy-500: #2C3E73;
/* ---- Gold / amber (the "Logic" mark, accents) ---- */
--3c-gold-600: #F9A708;
--3c-gold-500: #FFAD4B;
--3c-gold-400: #FFC44D;
--3c-gold-300: #FFD262;
--3c-amber-500: #FF9D5C;
--3c-amber-600: #F57C00;
/* ---- Semantic status ---- */
--3c-green-600: #077C76;
--3c-green-500: #0ABF53;
--3c-green-100: #DAF6E6;
--3c-red-600: #C0392B;
--3c-red-500: #E5484D;
--3c-red-100: #FCE3E3;
--3c-yellow-warn: #F5CF00;
/* ---- Neutral ink + surfaces ---- */
--3c-ink-900: #1E2022;
--3c-ink-800: #21325B;
--3c-ink-700: #2D374B;
--3c-ink-600: #51596C;
--3c-ink-500: #6C7589;
--3c-ink-400: #97A0B3;
--3c-ink-300: #BDC5D1;
--3c-line-300: #CED4DC;
--3c-line-200: #DCE0E5;
--3c-line-100: #EBEEF2;
--3c-line-050: #F2F5F9;
--3c-surface-0: #FFFFFF;
--3c-surface-50: #F8FAFD;
--3c-surface-100: #F0F4FA;
--3c-surface-blue: #EEF4FF;
--3c-surface-cloud: #F5F8FF;
/* ---- Semantic aliases — prefer these in new component CSS ---- */
--3c-color-primary: var(--3c-blue-500);
--3c-color-primary-hover: #1247C4;
--3c-color-primary-active: #0F3CA8;
--3c-color-primary-strong: var(--3c-blue-700);
--3c-color-accent: var(--3c-gold-400);
--3c-color-accent-strong: var(--3c-gold-600);
--3c-color-success: var(--3c-green-500);
--3c-color-danger: var(--3c-red-500);
--3c-text-heading: var(--3c-ink-900);
--3c-text-body: var(--3c-ink-600);
--3c-text-strong: var(--3c-ink-800);
--3c-text-muted: var(--3c-ink-400);
--3c-text-on-dark: #FFFFFF;
--3c-text-on-dark-muted: rgba(255,255,255,.72);
--3c-border-subtle: var(--3c-line-100);
--3c-border-card: rgba(220,224,229,.6);
--3c-border-strong: var(--3c-line-300);
--3c-selection-bg: rgba(245, 207, 0, .89);
--3c-selection-fg: #000000;
/* ---- Brand gradients ---- */
--3c-gradient-logic: linear-gradient(180deg, #FFD262 0%, #FFAD4B 55%, #FF9D5C 100%);
--3c-gradient-hero: linear-gradient(125deg, #0A47CC 0%, #001341 46%, #0A47CC 78%, #2F6BFF 100%);
--3c-gradient-blue: linear-gradient(135deg, #1654E5 0%, #0A47CC 100%);
--3c-gradient-text: linear-gradient(90deg, #1654E5 0%, #FF9D5C 100%);
--3c-gradient-cta: linear-gradient(135deg, #1654E5 0%, #3A75FF 100%);
--3c-gradient-glow: radial-gradient(60% 60% at 50% 40%, rgba(58,117,255,.45) 0%, rgba(0,19,65,0) 70%);
}
/* ============================================================================
2. TYPOGRAPHY, SPACING & EFFECTS TOKENS
============================================================================ */
:root {
--3c-font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
--3c-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--3c-fs-display: 4rem;
--3c-fs-h1: 3rem;
--3c-fs-h2: 2.25rem;
--3c-fs-h3: 1.625rem;
--3c-fs-h4: 1.25rem;
--3c-fs-h5: 1.0625rem;
--3c-fs-overline: .8125rem;
--3c-fs-lg: 1.25rem;
--3c-lh-tight: 1.1;
--3c-lh-heading: 1.2;
--3c-lh-snug: 1.4;
--3c-lh-body: 1.6;
--3c-ls-tight: -0.02em;
--3c-ls-overline: .12em;
/* Layout */
--3c-container-max: 1240px;
--3c-section-pad-y: 6rem;
/* Radii — soft, premium SaaS. Brand card radius = 13px */
--3c-radius-xs: 4px;
--3c-radius-sm: 6px;
--3c-radius-md: 10px;
--3c-radius-lg: 13px;
--3c-radius-xl: 20px;
--3c-radius-2xl: 28px;
--3c-radius-pill: 999px;
/* Shadows — soft, low-contrast, cool-gray tint */
--3c-shadow-xs: 0 1px 2px rgba(45,55,75,.08);
--3c-shadow-sm: 0 2px 8px rgba(45,55,75,.08);
--3c-shadow-card: 0 1rem 1.75rem rgba(45,55,75,.10);
--3c-shadow-md: 0 12px 28px rgba(45,55,75,.12);
--3c-shadow-lg: 0 24px 48px rgba(16,42,102,.18);
--3c-shadow-glow: 0 0 40px rgba(22,84,229,.35);
--3c-shadow-glow-gold: 0 0 36px rgba(255,173,75,.45);
--3c-focus-ring: 0 0 0 3px rgba(22,84,229,.25);
--3c-ease-standard: cubic-bezier(.2,.6,.2,1);
--3c-ease-out: cubic-bezier(.16,1,.3,1);
--3c-dur-fast: .15s;
--3c-dur-base: .25s;
--3c-dur-slow: .4s;
}
/* ============================================================================
3. GOOGLE FONTS
----------------------------------------------------------------------------
This file styles headings for Poppins and body copy for Inter, but a CSS
file cannot itself fetch a font — each template's must also load:
Templates missing Poppins will silently fall back to the sans-serif stack
below for headings — still on-brand, just not pixel-identical to Figma.
============================================================================ */
/* ============================================================================
4. BOOTSTRAP VARIABLE REMAP — root-level, cascades through every component
============================================================================ */
:root {
--bs-primary: var(--3c-blue-500);
--bs-primary-rgb: 22, 84, 229;
--bs-secondary: var(--3c-ink-500);
--bs-secondary-rgb: 108, 117, 137;
--bs-success: var(--3c-green-500);
--bs-success-rgb: 10, 191, 83;
--bs-danger: var(--3c-red-500);
--bs-danger-rgb: 229, 72, 77;
--bs-warning: var(--3c-gold-600);
--bs-warning-rgb: 249, 167, 8;
--bs-info: var(--3c-blue-300);
--bs-info-rgb: 107, 151, 255;
--bs-light: var(--3c-surface-50);
--bs-light-rgb: 248, 250, 253;
--bs-dark: var(--3c-navy-900);
--bs-dark-rgb: 0, 19, 65;
--bs-body-font-family: var(--3c-font-body);
--bs-body-color: var(--3c-ink-700);
--bs-body-color-rgb: 45, 55, 75;
--bs-body-bg: var(--3c-surface-0);
--bs-border-color: var(--3c-line-200);
--bs-link-color: var(--3c-blue-500);
--bs-link-color-rgb: 22, 84, 229;
--bs-link-hover-color: var(--3c-color-primary-hover);
--bs-border-radius: .875rem; /* 14px */
--bs-border-radius-sm: .5rem;
--bs-border-radius-lg: 1.125rem; /* 18px */
--bs-border-radius-xl: 1.25rem;
--bs-border-radius-2xl: 1.75rem;
--swiper-theme-color: var(--3c-blue-700);
}
/* ============================================================================
5. GLOBAL BASE — body, headings, links, selection, focus
============================================================================ */
body {
font-family: var(--3c-font-body);
color: var(--3c-ink-700);
}
::selection { background: var(--3c-selection-bg); color: var(--3c-selection-fg); }
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6 {
font-family: var(--3c-font-display);
color: var(--3c-navy-900);
letter-spacing: var(--3c-ls-tight);
}
a { transition: color var(--3c-dur-fast) var(--3c-ease-standard); }
:focus-visible {
outline: none;
box-shadow: var(--3c-focus-ring);
}
/* Gradient brand text — use sparingly, e.g. one keyword in a headline */
.text-gradient-brand {
background: var(--3c-gradient-text);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Eyebrow / overline label above section headers */
.eyebrow, .text-cap {
display: inline-block;
font-family: var(--3c-font-display);
font-weight: 600;
font-size: var(--3c-fs-overline);
letter-spacing: var(--3c-ls-overline);
text-transform: uppercase;
color: var(--bs-primary);
}
/* ============================================================================
6. BUTTONS
============================================================================ */
.btn { --bs-btn-border-radius: 5rem; --bs-btn-font-family: var(--3c-font-body); }
.btn-lg { --bs-btn-border-radius: 1.125rem; }
.btn-sm { --bs-btn-border-radius: .625rem; }
.btn-primary {
--bs-btn-bg: var(--3c-blue-500);
--bs-btn-border-color: var(--3c-blue-500);
--bs-btn-hover-bg: var(--3c-color-primary-hover);
--bs-btn-hover-border-color: var(--3c-color-primary-hover);
--bs-btn-active-bg: var(--3c-color-primary-active);
--bs-btn-active-border-color: var(--3c-color-primary-active);
--bs-btn-focus-shadow-rgb: 22, 84, 229;
}
.btn-dark {
--bs-btn-bg: var(--3c-navy-900);
--bs-btn-border-color: var(--3c-navy-900);
--bs-btn-hover-bg: var(--3c-navy-800);
--bs-btn-hover-border-color: var(--3c-navy-800);
}
.btn-outline-primary { --bs-btn-focus-shadow-rgb: 22, 84, 229; }
/* .btn-soft-* / .btn-ghost-* compile to hardcoded hex in theme.min.css (no
per-instance CSS vars), so the brand palette has to be applied directly. */
.btn-soft-primary {
color: var(--3c-blue-500);
background-color: var(--3c-blue-50);
}
.btn-soft-primary:hover,
.btn-soft-primary:focus,
.btn-check:focus + .btn-soft-primary,
.btn-check:checked + .btn-soft-primary,
.btn-check:active + .btn-soft-primary,
.btn-soft-primary:active,
.btn-soft-primary.active,
.show > .btn-soft-primary.dropdown-toggle {
color: #fff;
background-color: var(--3c-blue-500);
}
.btn-soft-dark { color: var(--3c-navy-900); background-color: var(--3c-surface-100); }
.btn-soft-dark:hover, .btn-soft-dark:focus { color: #fff; background-color: var(--3c-navy-900); }
.btn-ghost-primary { color: var(--3c-blue-500); }
.btn-ghost-primary:hover,
.btn-ghost-primary:focus,
.btn-check:focus + .btn-ghost-primary,
.btn-check:checked + .btn-ghost-primary,
.btn-check:active + .btn-ghost-primary,
.btn-ghost-primary:active,
.btn-ghost-primary.active,
.show > .btn-ghost-primary.dropdown-toggle {
color: var(--3c-blue-500);
background-color: var(--3c-blue-50);
}
.btn-ghost-dark { color: var(--3c-navy-900); }
.btn-ghost-dark:hover, .btn-ghost-dark:focus { color: var(--3c-navy-900); background-color: var(--3c-surface-100); }
/* ============================================================================
7. FORMS
============================================================================ */
.form-control, .form-select, .input-group-text {
border-radius: .625rem;
border-color: var(--3c-line-200);
}
.form-control:focus, .form-select:focus {
border-color: var(--3c-blue-300);
box-shadow: var(--3c-focus-ring);
}
.form-check-input:checked {
background-color: var(--3c-blue-500);
border-color: var(--3c-blue-500);
}
.form-check-input:focus { box-shadow: var(--3c-focus-ring); }
.form-label { color: var(--3c-ink-800); font-weight: 500; }
/* HubSpot form validation → brand danger */
.hs-form-required, .hs-error-msg { color: var(--3c-red-500); }
.hs-input.invalid.error { border-color: var(--3c-red-500); }
form input[type="submit"], form .hs-button {
background: var(--3c-blue-500);
border-color: var(--3c-blue-500);
border-radius: .875rem;
}
form input[type="submit"]:hover, form .hs-button:hover { background: var(--3c-color-primary-hover); }
/* ============================================================================
8. CARDS
============================================================================ */
.card {
--bs-card-border-radius: 1.125rem;
--bs-card-inner-border-radius: 1rem;
--bs-card-border-color: var(--3c-border-card);
--bs-card-box-shadow: var(--3c-shadow-card);
}
.card-shadow { box-shadow: var(--3c-shadow-card) !important; }
/* ============================================================================
9. BADGES & ALERTS
============================================================================ */
.badge { --bs-badge-border-radius: var(--3c-radius-pill); }
.alert { --bs-alert-border-radius: .875rem; }
.alert-primary { --bs-alert-color: var(--3c-blue-700); --bs-alert-bg: var(--3c-blue-50); --bs-alert-border-color: var(--3c-blue-100); }
.alert-success { --bs-alert-color: var(--3c-green-600); --bs-alert-bg: var(--3c-green-100); --bs-alert-border-color: #BEE9CE; }
.alert-danger { --bs-alert-color: var(--3c-red-600); --bs-alert-bg: var(--3c-red-100); --bs-alert-border-color: #F8CBCB; }
.alert-warning { --bs-alert-color: #7A4A00; --bs-alert-bg: #FFF4E5; --bs-alert-border-color: #F5CA99; }
.alert-dark { --bs-alert-color: #fff; --bs-alert-bg: var(--3c-navy-900); --bs-alert-border-color: var(--3c-navy-800); }
/* ============================================================================
10. ACCORDION
============================================================================ */
.accordion {
--bs-accordion-border-radius: .875rem;
--bs-accordion-border-color: var(--3c-line-200);
--bs-accordion-active-color: var(--3c-blue-700);
--bs-accordion-active-bg: var(--3c-blue-50);
--bs-accordion-btn-focus-border-color: var(--3c-blue-300);
--bs-accordion-btn-focus-box-shadow: var(--3c-focus-ring);
}
/* ============================================================================
11. NAVBAR, NAV & DROPDOWN
============================================================================ */
.navbar {
--bs-navbar-brand-color: var(--3c-navy-900);
--bs-navbar-color: var(--3c-ink-700);
--bs-navbar-hover-color: var(--3c-blue-500);
--bs-navbar-active-color: var(--3c-blue-500);
}
.navbar-dark {
--bs-navbar-color: rgba(255,255,255,.85);
--bs-navbar-hover-color: #fff;
--bs-navbar-active-color: #fff;
--bs-navbar-brand-color: #fff;
}
.nav-pills {
--bs-nav-pills-border-radius: var(--3c-radius-pill);
--bs-nav-pills-link-active-bg: var(--3c-blue-500);
}
.nav-tabs {
--bs-nav-tabs-border-color: var(--3c-line-200);
--bs-nav-tabs-link-active-color: var(--3c-blue-700);
--bs-nav-tabs-link-active-border-color: var(--3c-line-200) var(--3c-line-200) #fff;
}
.dropdown-menu {
--bs-dropdown-border-radius: .875rem;
--bs-dropdown-border-color: var(--3c-line-200);
--bs-dropdown-box-shadow: var(--3c-shadow-md);
--bs-dropdown-link-hover-bg: var(--3c-surface-blue);
--bs-dropdown-link-active-bg: var(--3c-blue-500);
}
/* ============================================================================
12. MODAL & OFFCANVAS
============================================================================ */
.modal { --bs-modal-border-radius: 1.125rem; }
.offcanvas { --bs-offcanvas-box-shadow: var(--3c-shadow-lg); }
/* ============================================================================
13. PAGINATION, BREADCRUMB & LIST-GROUP
============================================================================ */
.pagination {
--bs-pagination-border-radius: .625rem;
--bs-pagination-border-color: var(--3c-line-200);
--bs-pagination-hover-bg: var(--3c-surface-blue);
--bs-pagination-hover-color: var(--3c-blue-500);
--bs-pagination-active-bg: var(--3c-blue-500);
--bs-pagination-active-border-color: var(--3c-blue-500);
--bs-pagination-focus-box-shadow: var(--3c-focus-ring);
}
.breadcrumb { --bs-breadcrumb-item-active-color: var(--3c-ink-500); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--3c-ink-400); }
.list-group {
--bs-list-group-border-radius: .875rem;
--bs-list-group-border-color: var(--3c-line-200);
--bs-list-group-active-bg: var(--3c-blue-500);
--bs-list-group-active-border-color: var(--3c-blue-500);
--bs-list-group-action-hover-bg: var(--3c-surface-blue);
}
/* ============================================================================
14. TABLE
============================================================================ */
.table {
--bs-table-border-color: var(--3c-line-200);
--bs-table-striped-bg: var(--3c-surface-50);
--bs-table-hover-bg: var(--3c-surface-blue);
}
/* ============================================================================
15. TOOLTIP, POPOVER, PROGRESS & TOASTS
============================================================================ */
.tooltip { --bs-tooltip-bg: var(--3c-navy-900); }
.popover {
--bs-popover-border-color: var(--3c-line-200);
--bs-popover-border-radius: .875rem;
--bs-popover-box-shadow: var(--3c-shadow-md);
--bs-popover-header-bg: var(--3c-surface-blue);
}
.progress { --bs-progress-border-radius: var(--3c-radius-pill); --bs-progress-bar-bg: var(--3c-blue-500); }
.toast { --bs-toast-border-radius: .875rem; --bs-toast-box-shadow: var(--3c-shadow-md); }
/* ============================================================================
16. BRAND UTILITY CLASSES
============================================================================ */
.bg-hero { background: var(--3c-gradient-hero); color: #fff; }
.bg-logic { background: var(--3c-gradient-logic); }
.bg-cta { background: var(--3c-gradient-cta); color: #fff; }
.text-navy { color: var(--3c-navy-900) !important; }
.bg-navy { background-color: var(--3c-navy-900) !important; }
.text-gold { color: var(--3c-gold-300) !important; }
.bg-gold { background-color: var(--3c-gold-300) !important; }
.text-teal { color: var(--3c-green-600) !important; }
.bg-teal { background-color: var(--3c-green-600) !important; }
/* Suspicious green icon fill on primary backgrounds → white */
svg.bg-primary [fill]:not([fill="none"]) { fill: #ffffff; }
/* ============================================================================
17. LAYOUT — container width
----------------------------------------------------------------------------
Theme's top container tier (.container-xl and up, 1200px+ viewports) caps
at 1140px — narrower than the 1240px --3c-container-max in the reference
design system. Widen it site-wide; sm/md/lg tiers (540/720/960px) untouched.
============================================================================ */
/* @media (min-width: 1200px) {
.container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: var(--3c-container-max);
} */
}