/* ═══════════════════════════════════════════════ Integrity Practice Sales — Brand Kit Built on MAST v2.4 framework The Webflow CSS (linked in HTML ) provides MAST variables, components, and utilities. This file adds brand kit layout + theming. ═══════════════════════════════════════════════ */ /* ── Suisse Intl Font ── */ @font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-RegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-Book.woff2') format('woff2'); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ── MAST Core Custom Code ── */ ::selection { background: var(--primary--text); color: var(--primary--background); } ::-moz-selection { background: var(--primary--text); color: var(--primary--background); } body { -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-family: 'Suisse Intl', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--primary--background, #fff); color: var(--primary--text, #2f3035); transition: background 0.3s, color 0.3s; } .w-richtext > :first-child { margin-top: 0; } .w-richtext > :last-child { margin-bottom: 0; } /* ── MAST Layout Variables ── */ :root { --grid-gap: 1.5rem; --grid-gap-md: 1.5rem; --grid-gap-sm: 0.5rem; --grid-columns: 12; --container-max: 1200px; --container-padding: 2rem; /* IPS Brand Tokens */ --colors--dark1: #2f3035; --colors--dark2: #1f3268; --colors--white1: #ffffff; --colors--light1: #fffbf2; --colors--bg1: #f9f8f5; --colors--bg2: #cfd2df; --colors--bg3: #f6f6f6; /* Semantic Tokens */ --primary--text: #2f3035; --primary--background: #ffffff; --primary--accent: #1f3268; --primary--border: rgba(47, 48, 53, 0.12); --primary--text-muted: rgba(47, 48, 53, 0.5); /* Radius */ --radius--tiny: 0.25rem; --radius--small: 0.5rem; --radius--medium: 0.75rem; --radius--large: 1.25rem; --radius--xlarge: 2rem; --radius--circle: 1000rem; } /* ── Flexbox Grid ── */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } .section { padding: 4rem 0; } .row { display: flex; flex-wrap: wrap; margin: 0 calc(var(--grid-gap) / -2); } .row > [class*="col-"] { padding: 0 calc(var(--grid-gap) / 2); margin-bottom: var(--grid-gap); } .row-gap-0 { --grid-gap: 0; } .row-gap-sm { --grid-gap: var(--grid-gap-sm); } .row-gap-md { --grid-gap: var(--grid-gap-md); } .row-align-center { align-items: center; } .row-align-end { align-items: flex-end; } .row-justify-center { justify-content: center; } .row-justify-between { justify-content: space-between; } .row-justify-end { justify-content: flex-end; } .col-1 { flex: 0 0 calc(100% / 12 * 1); max-width: calc(100% / 12 * 1); } .col-2 { flex: 0 0 calc(100% / 12 * 2); max-width: calc(100% / 12 * 2); } .col-3 { flex: 0 0 calc(100% / 12 * 3); max-width: calc(100% / 12 * 3); } .col-4 { flex: 0 0 calc(100% / 12 * 4); max-width: calc(100% / 12 * 4); } .col-5 { flex: 0 0 calc(100% / 12 * 5); max-width: calc(100% / 12 * 5); } .col-6 { flex: 0 0 calc(100% / 12 * 6); max-width: calc(100% / 12 * 6); } .col-7 { flex: 0 0 calc(100% / 12 * 7); max-width: calc(100% / 12 * 7); } .col-8 { flex: 0 0 calc(100% / 12 * 8); max-width: calc(100% / 12 * 8); } .col-9 { flex: 0 0 calc(100% / 12 * 9); max-width: calc(100% / 12 * 9); } .col-10 { flex: 0 0 calc(100% / 12 * 10); max-width: calc(100% / 12 * 10); } .col-11 { flex: 0 0 calc(100% / 12 * 11); max-width: calc(100% / 12 * 11); } .col-12 { flex: 0 0 100%; max-width: 100%; } /* ── Spacing Utilities ── */ .u-mb-0 { margin-bottom: 0 !important; } .u-mb-sm { margin-bottom: 1em; } .u-mb-md { margin-bottom: 2em; } .u-mt-0 { margin-top: 0 !important; } .u-mt-sm { margin-top: 1em; } .u-mt-md { margin-top: 2em; } /* ══════════════════════════════════════════════ Section Color Themes (MAST-style u-mode-*) 6 themes — each defines bg, text, accent, border ══════════════════════════════════════════════ */ /* Default / Light — white bg */ .u-mode-light, .section:not([class*="u-mode-"]) { --primary--background: #ffffff; --primary--text: #2f3035; --primary--accent: #1f3268; --primary--border: rgba(47, 48, 53, 0.12); --primary--text-muted: rgba(47, 48, 53, 0.5); background: var(--primary--background); color: var(--primary--text); } /* Dark — near-black bg */ .u-mode-dark { --primary--background: #18181b; --primary--text: #f0eee6; --primary--accent: #cfd2df; --primary--border: rgba(240, 238, 230, 0.12); --primary--text-muted: rgba(240, 238, 230, 0.5); background: var(--primary--background); color: var(--primary--text); } /* Navy — Deep Ocean bg */ .u-mode-navy { --primary--background: #1f3268; --primary--text: #f0eee6; --primary--accent: #cfd2df; --primary--border: rgba(240, 238, 230, 0.15); --primary--text-muted: rgba(240, 238, 230, 0.6); background: var(--primary--background); color: var(--primary--text); } /* Cream — warm bg */ .u-mode-cream { --primary--background: #fffbf2; --primary--text: #2f3035; --primary--accent: #1f3268; --primary--border: rgba(47, 48, 53, 0.1); --primary--text-muted: rgba(47, 48, 53, 0.5); background: var(--primary--background); color: var(--primary--text); } /* Gray — neutral bg */ .u-mode-gray { --primary--background: #f6f6f6; --primary--text: #2f3035; --primary--accent: #1f3268; --primary--border: rgba(47, 48, 53, 0.1); --primary--text-muted: rgba(47, 48, 53, 0.5); background: var(--primary--background); color: var(--primary--text); } /* Contrast — charcoal bg */ .u-mode-contrast { --primary--background: #2f3035; --primary--text: #f0eee6; --primary--accent: #cfd2df; --primary--border: rgba(240, 238, 230, 0.1); --primary--text-muted: rgba(240, 238, 230, 0.5); background: var(--primary--background); color: var(--primary--text); } /* ══════════════════════════════════════════════ Global Dark Mode (data-theme="dark") Flips the base page + adjusts light sections ══════════════════════════════════════════════ */ [data-theme="dark"] { --primary--text: #f0eee6; --primary--background: #18181b; --primary--border: rgba(240, 238, 230, 0.12); --primary--text-muted: rgba(240, 238, 230, 0.5); --colors--bg3: #27272a; --colors--bg2: #3f3f46; } [data-theme="dark"] .section:not([class*="u-mode-"]), [data-theme="dark"] .u-mode-light { --primary--background: #18181b; --primary--text: #f0eee6; --primary--border: rgba(240, 238, 230, 0.12); --primary--text-muted: rgba(240, 238, 230, 0.5); background: var(--primary--background); color: var(--primary--text); } [data-theme="dark"] .u-mode-cream { --primary--background: #27272a; --primary--text: #f0eee6; --primary--border: rgba(240, 238, 230, 0.1); background: var(--primary--background); color: var(--primary--text); } [data-theme="dark"] .u-mode-gray { --primary--background: #27272a; --primary--text: #f0eee6; --primary--border: rgba(240, 238, 230, 0.1); background: var(--primary--background); color: var(--primary--text); } [data-theme="dark"] .sg-nav { background: #18181b; } [data-theme="dark"] .sg-nav-link { color: #f0eee6; } [data-theme="dark"] .sg-section-label { border-bottom-color: rgba(240, 238, 230, 0.2); } [data-theme="dark"] .sg-card { border-color: rgba(240, 238, 230, 0.1); } [data-theme="dark"] .sg-card-body .sg-hex { color: rgba(240, 238, 230, 0.5); } [data-theme="dark"] .sg-card-body .sg-class { background: rgba(240, 238, 230, 0.1); color: #f0eee6; } [data-theme="dark"] .sg-specimen { border-bottom-color: rgba(240, 238, 230, 0.1); } [data-theme="dark"] .comp-demo { box-shadow: inset 0 2px 6px rgba(0,0,0,0.4); background: #27272a; border-color: rgba(240, 238, 230, 0.08); } [data-theme="dark"] .comp-demo-info { background: #1e1e21; color: #f0eee6; } [data-theme="dark"] .sg-footer { border-top-color: rgba(240, 238, 230, 0.1); } [data-theme="dark"] .theme-toggle-track { background: rgba(240, 238, 230, 0.2); } /* ── Style Guide Nav ── */ .sg-nav { position: sticky; top: 0; z-index: 100; background: #ffffff; border-bottom: 1px solid var(--primary--border); } .sg-nav .container { display: flex; align-items: center; justify-content: space-between; height: 3.5rem; } .sg-nav-brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--primary--text); } .sg-nav-brand:hover { text-decoration: none; } .sg-nav-brand svg { height: 1.25rem; width: auto; } .sg-nav-links { display: flex; align-items: center; gap: 0; } .sg-nav-link { padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 500; color: var(--colors--dark1, #2f3035); opacity: 0.5; text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; border-left: 1px solid var(--primary--border); transition: opacity 0.2s; } .sg-nav-link:first-child { border-left: none; } .sg-nav-link:hover, .sg-nav-link.is-active { opacity: 1; text-decoration: none; } /* ── Theme Toggle ── */ .theme-toggle { display: flex; align-items: center; gap: 0.5rem; margin-left: 1rem; border-left: 1px solid var(--primary--border); padding-left: 1rem; } .theme-toggle-label { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.4; cursor: pointer; color: var(--primary--text); transition: opacity 0.2s; } .theme-toggle-label.is-active { opacity: 1; } .theme-toggle-track { width: 2.5rem; height: 1.375rem; background: rgba(47, 48, 53, 0.15); border-radius: 1000rem; position: relative; cursor: pointer; transition: background 0.2s; } .theme-toggle-track::after { content: ''; position: absolute; width: 1rem; height: 1rem; background: var(--primary--accent, #1f3268); border-radius: 50%; top: 0.1875rem; left: 0.1875rem; transition: transform 0.2s; } [data-theme="dark"] .theme-toggle-track::after { transform: translateX(1.125rem); } /* ── Section Labels ── */ .sg-section-label { font-weight: 400; padding-bottom: 0.5rem; border-bottom: 2px solid var(--colors--dark2, #1f3268); margin-bottom: 2rem; } .sg-subsection { font-weight: 400; margin-bottom: 1.5rem; margin-top: 3rem; } .sg-label { display: inline-block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2em 0.6em; border-radius: 0.25rem; background: var(--colors--dark2, #1f3268); color: #fff; margin-bottom: 0.5rem; } .sg-label.cc-element { background: #c54a5c; } /* ── Swatch Cards ── */ .sg-card { border-radius: var(--radius--medium); overflow: hidden; border: 1px solid var(--primary--border); } .sg-card-preview { height: 120px; } .sg-card-body { padding: 1rem; } .sg-card-body h4 { font-weight: 500; margin-bottom: 0.25rem; } .sg-card-body .sg-hex { color: var(--primary--text-muted); margin-bottom: 0.5rem; } .sg-card-body .sg-class { display: inline-block; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.6875rem; padding: 0.2em 0.6em; background: rgba(31, 50, 104, 0.08); color: var(--colors--dark2, #1f3268); border-radius: 0.25rem; } /* ── Specimen Rows ── */ .sg-specimen { padding: 1.5rem 0; border-bottom: 1px solid var(--primary--border); display: flex; align-items: baseline; gap: 2rem; } .sg-specimen:last-child { border-bottom: none; } .sg-specimen-label { flex: 0 0 120px; } .sg-specimen-content { flex: 1; } .sg-specimen-meta { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.6875rem; opacity: 0.5; margin-top: 0.5rem; } /* ── Component Demo Cards (Recessed) ── */ .comp-demo { border-radius: var(--radius--medium); overflow: hidden; background: var(--primary--background); border: 1px solid var(--primary--border); box-shadow: inset 0 2px 8px rgba(0,0,0,0.06); } .comp-demo-preview { padding: 2.5rem; display: flex; align-items: center; justify-content: center; } .comp-demo-info { padding: 0.75rem 1rem; background: var(--colors--bg3, #f6f6f6); border-top: 1px solid var(--primary--border); } .comp-demo-info h4 { font-weight: 500; font-size: 0.875rem; } .comp-demo-info p { font-size: 0.6875rem; opacity: 0.5; margin-top: 0.125rem; } /* ── Layout Demo Helpers ── */ .layout-img { width: 100%; aspect-ratio: 16/9; background: var(--colors--bg2, #cfd2df); border-radius: var(--radius--medium); object-fit: cover; } .layout-img.portrait { aspect-ratio: 3/4; } .layout-img.square { aspect-ratio: 1/1; } /* ── Theme Demo Panels ── */ .section-theme-demo { border-radius: var(--radius--large); padding: 3rem; margin-bottom: 1.5rem; } /* ── Footer ── */ .sg-footer { border-top: 1px solid var(--primary--border); padding: 2rem 0; } .sg-footer .container { display: flex; justify-content: space-between; align-items: center; } .sg-footer-links { display: flex; gap: 1.5rem; } .sg-footer-links a { font-size: 0.875rem; font-weight: 500; color: var(--primary--text); text-decoration: none; } .sg-footer-links a:hover { color: var(--colors--dark2, #1f3268); text-decoration: none; } .sg-footer-meta { font-size: 0.6875rem; opacity: 0.5; } /* ── Responsive ── */ @media (max-width: 768px) { .sg-nav-links { display: none; } .sg-specimen { flex-direction: column; gap: 0.5rem; } .sg-specimen-label { flex: none; } .sg-footer .container { flex-direction: column; gap: 1rem; text-align: center; } [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; } }