/* Smarter Capital News article template. Load after the shared styles.css stylesheet. Apply one page-theme--* class to and the matching article-strip--* class to the strip. */ .news-article-page { --article-accent: var(--color-orange); --article-accent-rgb: 255, 106, 61; --article-accent-deep: var(--color-orange-deep); --article-accent-dark: var(--color-orange-dark); --article-accent-light-rgb: 255, 177, 153; } .page-theme--capital { --article-accent: var(--color-orange); --article-accent-rgb: 255, 106, 61; --article-accent-deep: var(--color-orange-deep); --article-accent-dark: var(--color-orange-dark); --article-accent-light-rgb: 255, 177, 153; } .page-theme--packaging { --article-accent: var(--vertical-packaging); --article-accent-rgb: 22, 154, 74; --article-accent-deep: #117b3a; --article-accent-dark: #0c5f2d; --article-accent-light-rgb: 116, 215, 147; } .page-theme--wellness { --article-accent: var(--vertical-wellness); --article-accent-rgb: 53, 196, 200; --article-accent-deep: #23a4a9; --article-accent-dark: #167e82; --article-accent-light-rgb: 155, 232, 234; } .page-theme--software { --article-accent: var(--vertical-software); --article-accent-rgb: 18, 153, 238; --article-accent-deep: #0b79c4; --article-accent-dark: #075e9b; --article-accent-light-rgb: 143, 211, 255; } .page-theme--ecommerce { --article-accent: var(--vertical-ecommerce); --article-accent-rgb: 124, 58, 237; --article-accent-deep: #6427c6; --article-accent-dark: #4c1d95; --article-accent-light-rgb: 196, 167, 255; } .page-theme--marketing { --article-accent: var(--vertical-marketing); --article-accent-rgb: 247, 37, 117; --article-accent-deep: #cf185f; --article-accent-dark: #9f1248; --article-accent-light-rgb: 255, 169, 204; } .page-theme--nature { --article-accent: var(--vertical-nature); --article-accent-rgb: 124, 194, 66; --article-accent-deep: #5a9329; --article-accent-dark: #416f1c; --article-accent-light-rgb: 197, 231, 165; } .page-theme--it { --article-accent: var(--vertical-it); --article-accent-rgb: 135, 152, 200; --article-accent-deep: #6879af; --article-accent-dark: #4c5d93; --article-accent-light-rgb: 197, 205, 235; } .news-article-page .primary-nav a.is-active { position: relative; color: var(--article-accent-deep); opacity: 1; } .news-article-page .primary-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -28px; height: 3px; border-radius: 999px; background: var(--article-accent); } .news-article-page .header-contact-button { color: var(--color-white); background: var(--article-accent); border-color: var(--article-accent); box-shadow: 0 12px 30px rgba(var(--article-accent-rgb), .28); } .news-article-page .header-contact-button:hover, .news-article-page .header-contact-button:focus-visible { color: var(--color-white); background: var(--article-accent-deep); border-color: var(--article-accent-deep); } .article-theme--packaging { --article-accent: var(--vertical-packaging); --article-accent-rgb: 22, 154, 74; } .article-theme--wellness { --article-accent: var(--vertical-wellness); --article-accent-rgb: 53, 196, 200; } .article-theme--software { --article-accent: var(--vertical-software); --article-accent-rgb: 18, 153, 238; } .article-theme--ecommerce { --article-accent: var(--vertical-ecommerce); --article-accent-rgb: 124, 58, 237; } .article-theme--marketing { --article-accent: var(--vertical-marketing); --article-accent-rgb: 247, 37, 117; } .article-theme--nature { --article-accent: var(--vertical-nature); --article-accent-rgb: 124, 194, 66; } .article-theme--it { --article-accent: var(--vertical-it); --article-accent-rgb: 135, 152, 200; } .article-theme--capital { --article-accent: var(--color-orange); --article-accent-rgb: 255, 106, 61; } .article-strip { --strip-dark: var(--color-orange-dark); --strip-deep: var(--color-orange-deep); --strip-main: var(--color-orange); --strip-light-rgb: 255, 177, 153; --strip-tail: var(--color-navy); --strip-tail-deep: var(--color-navy-900); position: relative; min-height: 70px; overflow: hidden; background: radial-gradient(circle at 78% 18%, rgba(var(--strip-light-rgb), .34), transparent 28%), linear-gradient(118deg, var(--strip-dark) 0%, var(--strip-deep) 24%, var(--strip-main) 48%, var(--strip-tail) 78%, var(--strip-tail-deep) 100%); } .article-strip::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 0 54%, rgba(255, 255, 255, .09) 54% 56%, transparent 56%), linear-gradient(105deg, transparent 0 68%, rgba(255, 255, 255, .055) 68% 69.5%, transparent 69.5%); pointer-events: none; } .article-strip::after { content: ""; position: absolute; width: 280px; height: 280px; top: -175px; right: 11%; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255, 255, 255, .035), 0 0 0 84px rgba(255, 255, 255, .025); pointer-events: none; } .article-strip__inner { position: relative; z-index: 1; min-height: 70px; } /* Smarter Capital strip */ .article-strip--capital { --strip-dark: var(--color-orange-dark); --strip-deep: var(--color-orange-deep); --strip-main: var(--color-orange); --strip-light-rgb: 255, 177, 153; --strip-tail: var(--color-navy); --strip-tail-deep: var(--color-navy-900); } /* Smarter Packaging strip */ .article-strip--packaging { --strip-dark: #0c5f2d; --strip-deep: #117b3a; --strip-main: var(--vertical-packaging); --strip-light-rgb: 116, 215, 147; --strip-tail: #153d2a; --strip-tail-deep: #071f14; } /* Smarter Wellness strip */ .article-strip--wellness { --strip-dark: #167e82; --strip-deep: #23a4a9; --strip-main: var(--vertical-wellness); --strip-light-rgb: 155, 232, 234; --strip-tail: #16444a; --strip-tail-deep: #082429; } /* Smarter Software strip */ .article-strip--software { --strip-dark: #075e9b; --strip-deep: #0b79c4; --strip-main: var(--vertical-software); --strip-light-rgb: 143, 211, 255; --strip-tail: #153653; --strip-tail-deep: #071a2b; } /* Smarter Ecommerce strip */ .article-strip--ecommerce { --strip-dark: #4c1d95; --strip-deep: #6427c6; --strip-main: var(--vertical-ecommerce); --strip-light-rgb: 196, 167, 255; --strip-tail: #32204d; --strip-tail-deep: #170d29; } /* Smarter Marketing strip */ .article-strip--marketing { --strip-dark: #9f1248; --strip-deep: #cf185f; --strip-main: var(--vertical-marketing); --strip-light-rgb: 255, 169, 204; --strip-tail: #4c1b35; --strip-tail-deep: #260a19; } /* Smarter Nature strip */ .article-strip--nature { --strip-dark: #416f1c; --strip-deep: #5a9329; --strip-main: var(--vertical-nature); --strip-light-rgb: 197, 231, 165; --strip-tail: #324a26; --strip-tail-deep: #17220f; } /* Smarter IT strip */ .article-strip--it { --strip-dark: #4c5d93; --strip-deep: #6879af; --strip-main: var(--vertical-it); --strip-light-rgb: 197, 205, 235; --strip-tail: #333d5f; --strip-tail-deep: #171d30; } .breadcrumb-shell { border-bottom: 1px solid rgba(26, 34, 56, .08); } .breadcrumb-row { padding-block: 20px; color: var(--color-navy); font-size: .92rem; font-weight: 700; } .breadcrumb-row ol { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; list-style: none; } .breadcrumb-row li + li::before { content: "/"; margin-right: 12px; color: var(--article-accent); } .breadcrumb-row a { color: var(--color-navy); } .breadcrumb-row li[aria-current="page"] { min-width: 0; overflow: hidden; color: var(--article-accent); text-overflow: ellipsis; white-space: nowrap; } .themed-breadcrumb { border-bottom-color: rgba(var(--article-accent-rgb), .18); } .themed-breadcrumb .breadcrumb-row li + li::before, .themed-breadcrumb .breadcrumb-row li[aria-current="page"] { color: var(--article-accent); } .themed-breadcrumb .breadcrumb-row a:hover, .themed-breadcrumb .breadcrumb-row a:focus-visible { color: var(--article-accent-deep); } .news-article { padding: 76px 0 84px; background: var(--color-white); } .news-article__layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 780px); justify-content: space-between; gap: clamp(48px, 8vw, 120px); } .article-sidebar { align-self: start; position: sticky; top: 118px; padding-right: clamp(0px, 2vw, 24px); } .article-sidebar__kicker { margin: 0 0 15px; color: var(--article-accent); font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .article-sidebar h1 { margin: 0; color: var(--color-navy); font-size: clamp(2.25rem, 3.8vw, 3.65rem); line-height: .98; letter-spacing: -.05em; font-weight: 700; } .article-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 24px; color: var(--color-muted); font-size: .86rem; font-weight: 600; } .article-meta span::before { content: "•"; margin-right: 16px; color: var(--article-accent); } .article-vertical { display: inline-flex; max-width: 190px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--color-grey-100); } .article-vertical img { width: auto; max-width: 100%; max-height: 54px; object-fit: contain; object-position: left center; } .article-share { margin-top: 34px; } .article-share > p { margin: 0 0 12px; color: var(--color-muted); font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .article-share > div { display: flex; gap: 9px; } .article-share a { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--color-grey-300); border-radius: 50%; color: var(--color-navy); font-size: .78rem; font-weight: 800; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .article-share a:hover, .article-share a:focus-visible { color: var(--color-white); border-color: var(--article-accent); background: var(--article-accent); } .article-content { min-width: 0; color: var(--color-text); } .article-content p { margin: 0 0 22px; color: var(--color-muted); font-size: 1.02rem; line-height: 1.78; } .article-content .article-intro { margin-bottom: 34px; color: var(--color-text); font-size: clamp(1.18rem, 1.7vw, 1.38rem); line-height: 1.58; font-weight: 600; } .article-content section { padding-block: 20px 8px; } .article-content h2 { margin: 20px 0 20px; color: var(--color-navy); font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.08; letter-spacing: -.04em; } .article-content h3 { margin: 28px 0 14px; color: var(--color-navy); font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.2; letter-spacing: -.03em; } .article-content ul, .article-content ol { display: grid; gap: 12px; margin: 10px 0 28px; padding-left: 24px; color: var(--color-muted); } .article-content li { padding-left: 5px; line-height: 1.65; } .article-content li::marker { color: var(--article-accent); font-weight: 800; } .article-image { margin: 12px 0 38px; } .article-image img { width: 100%; border-radius: var(--radius-md); object-fit: cover; box-shadow: var(--shadow-soft); } .article-image--wide img { aspect-ratio: 16 / 9; } .article-image--inset { max-width: 650px; margin-inline: auto; } .article-image--inset img { aspect-ratio: 9 / 6.5; } .article-image figcaption { margin-top: 10px; color: var(--color-grey-600); font-size: .82rem; line-height: 1.45; } .article-content blockquote { margin: 36px 0; padding: 30px 32px; border-left: 6px solid var(--article-accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-grey-25); } .article-content blockquote p { margin: 0; color: var(--color-navy); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.45; font-weight: 700; letter-spacing: -.02em; } .article-content blockquote cite { display: block; margin-top: 16px; color: var(--article-accent); font-size: .88rem; font-style: normal; font-weight: 800; } .article-callout { margin-top: 38px; padding: 28px; border: 1px solid rgba(var(--article-accent-rgb), .22); border-top: 6px solid var(--article-accent); border-radius: var(--radius-sm); background: var(--color-grey-25); } .article-callout h3 { margin-top: 0; } .article-callout p { margin-bottom: 16px; } .article-callout .text-link { color: var(--article-accent); } .article-footer { margin-top: 42px; padding-top: 30px; border-top: 1px solid var(--color-grey-100); } .article-back-button { color: var(--color-white); background: var(--article-accent); border-color: var(--article-accent); box-shadow: 0 10px 24px rgba(var(--article-accent-rgb), .2); } .article-back-button:hover { filter: brightness(.92); } .themed-cta .cta-band { background: radial-gradient(circle at 88% 16%, rgba(var(--article-accent-light-rgb), .22), transparent 30%), linear-gradient(120deg, var(--article-accent), var(--article-accent-deep) 56%, var(--article-accent-dark)); } .themed-cta .cta-band::after { color: rgba(255, 255, 255, .09); } .themed-cta .button--light { color: var(--article-accent-dark); } .themed-cta .button--light:hover, .themed-cta .button--light:focus-visible { color: var(--article-accent-dark); background: rgba(255, 255, 255, .92); } .news-article-page .cta-section { max-width: var(--max-canvas); margin-inline: auto; } @media (max-width: 980px) { .news-article-page .primary-nav a.is-active::after { display: none; } .news-article { padding-block: 58px 66px; } .news-article__layout { grid-template-columns: 1fr; gap: 38px; } .article-sidebar { position: static; max-width: 760px; padding-right: 0; } .article-sidebar h1 { max-width: 760px; } .article-vertical { max-width: 170px; } } @media (max-width: 680px) { .article-strip, .article-strip__inner { min-height: 58px; } .breadcrumb-row { padding-block: 16px; font-size: .82rem; } .breadcrumb-row ol { gap: 8px; } .breadcrumb-row li + li::before { margin-right: 8px; } .news-article { padding-block: 44px 54px; } .article-sidebar h1 { font-size: clamp(2.25rem, 11vw, 3rem); } .article-meta span::before { display: none; } .article-content p { font-size: 1rem; line-height: 1.7; } .article-content blockquote { padding: 24px 22px; } .article-image { margin-bottom: 28px; } }