@import url("https://jsypctdhynsdqrfifvdh.supabase.co/storage/v1/object/public/cp-blog-css/global.css");
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap');
:root {
/* ===========================================
FONT CONFIGURATION
=========================================== */
/* Font Families */
--font-family-primary: "Cabin", sans-serif;
--font-header: "SangBleu BP Sans", sans-serif;
--font-body: var(--font-family-primary);
--font-header-alternative: "termina", sans-serif;
/* Font Weights */
--font-weight-light: 100;
--font-weight-regular: 400;
/* Font Sizes */
--font-size-h1-desktop: 48px;
--font-size-h2-desktop: 38px;
--font-size-h3-desktop: 28px;
--font-size-body-desktop: 19px;
--font-size-large: 22px;
/* Line Heights */
--line-height-body: 1.9;
--line-height-medium: 1.15;
--line-height-loose: 1.4;
/* ===========================================
COLOR PALETTE
=========================================== */
/* Base Colors */
--blog-color-white: #faf9f7;
--blog-color-black: #111;
--blog-color-1: #cfa26d;
/* warm tan-gold accent */
--blog-color-2: #66252aeb;
--blog-color-3: #9e1e18;
/* deep espresso */
--blog-header-color: #12100f;
/* Text & Links */
--a-tag-color: #cfa26d;
--a-tag-hover-color: #8c6a3c;
/* Backgrounds */
--blog-wrapper-bg: transparent;
--lead-section-bg: #f0ede8;
--lead-section-font-color: #1a1715;
/* ===========================================
COMPONENT STYLING
=========================================== */
/* Summary Section */
--summary-bg-color: var(--blog-color-2);
--summary-border-color: transparent;
--summary-heading-color: #fff;
--summary-text-color: #fff;
/* Left Callouts */
--callout-left-bg-color: var(--blog-color-2);
--callout-left-after-color: var(--blog-color-2);
--callout-left-text-color: var(--blog-color-white);
--callout-left-cta-bg-color: #1a1715;
--callout-left-cta-text-color: #faf9f7;
--callout-left-cta-hover-bg-color: #faf9f7;
--callout-left-cta-hover-text-color: #1a1715;
/* Right Callouts */
--callout-right-bg-color: var(--blog-color-3);
--callout-right-after-color: var(--blog-color-3);
--callout-right-text-color: var(--blog-color-white);
--callout-right-cta-bg-color: #1a1715;
--callout-right-cta-text-color: #faf9f7;
--callout-right-cta-hover-bg-color: #faf9f7;
--callout-right-cta-hover-text-color: #1a1715;
/* Quotes */
--quote-bg-color: #e8e3d9;
--quote-text-color: #1a1715;
--quote-border-color: #cfa26d;
/* Key Takeaways */
--key-takeaways-bg-color: #ddd5c8;
--key-takeaways-border-color: #ddd5c8;
--key-takeaways-heading-color: #1a1715;
--key-takeaways-text-color: #111;
--key-takeaways-cta-bg-color: #1a1715;
--key-takeaways-cta-text-color: #faf9f7;
--key-takeaways-cta-hover-bg-color: #faf9f7;
--key-takeaways-cta-hover-text-color: #1a1715;
/* References */
--references-bg-color: #cfa26d;
--references-border-color: #cfa26d;
--references-heading-color: var(--blog-color-white);
--references-text-color: var(--blog-color-white);
--references-link-color: var(--blog-color-white);
--references-divider-color: var(--blog-color-white);
/* About Company */
--about-company-bg-color: #cfa26d;
--about-company-heading-color: var(--blog-color-white);
--about-company-text-color: var(--blog-color-white);
--about-company-icon-color: #faf9f7;
/* Table of Contents */
--toc-bg-color: #d9d0c4;
--toc-heading-color: #1a1715;
--toc-text-color: var(--blog-color-black);
--toc-link-color: var(--blog-color-black);
--toc-border-color: #cfa26d;
--toc-active-bg-color: #cfa26d;
--toc-active-text-color: var(--blog-color-black);
--toc-active-divider-color: #cfa26d;
/* ===========================================
LAYOUT & DESIGN SYSTEM
=========================================== */
/* Shadows */
--box-shadow-light: 0 4px 12px rgba(0, 0, 0, 0.05);
--box-shadow-medium: 0 6px 20px rgba(0, 0, 0, 0.08);
--box-shadow-callout: 0px 28px 40px -20px rgba(0, 0, 0, 0.12);
/* Border Radius */
--border-radius-standard: 0px;
--border-width-accent: 0px;
/* Spacing */
--spacing-xs: 6px;
--spacing-sm: 10px;
--spacing-md: 14px;
--spacing-lg: 20px;
--spacing-xl: 28px;
--spacing-2xl: 36px;
--spacing-3xl: 48px;
--spacing-4xl: 64px;
/* Transitions */
--transition-standard: 0.25s ease;
--transition-fast: 0.15s ease;
/* ===========================================
BACKGROUND IMAGES
=========================================== */
--background-image: url('data:image/svg+xml, ');
--background-image-2: url('data:image/svg+xml, ');
}
/* Font Faces */
@font-face {
font-family: "SangBleu BP Sans";
src: url("/fonts/SangBleuBPSans-Light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "SangBleu BP Sans";
src: url("/fonts/SangBleuBPSans-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
h1,
h2,
h3,
h4,
.h0,
.h1,
.h2,
.h3,
.h4 {
font-family: var(--font-header);
font-weight: var(--font-weight-light);
}
#summary,
.callout {
background-size: cover;
background-image: var(--background-image);
background-color: var(--summary-bg-color);
background-blend-mode: soft-light;
}
.about_company,
#references {
background-image: var(--background-image-2);
background-size: cover;
}
#summary b {
font-weight: 100;
}
.blog-content .callout a,
.blog-content .callout a span {
font-size: 16px !important;
line-height: 2rem;
font-weight: 600;
font-family: "Beausite Fit" !important;
letter-spacing: .04em;
}
#references a,
#references li {
text-decoration: none;
font-family: var(--font-header);
font-weight: 100;
}
body:not(#preview).lead-section {
display: none;
}
.blog-wrapper {
background-color: none;
padding: 0px;
box-shadow: none;
}
.about_company_text {
font-size: 16px;
}