/* ========================================================================== UNICUS MARKETING — INSIGHTS PAGE STYLESHEET File: /assets/css/insights.css Version: 3.1 ========================================================================== PURPOSE Contains only presentation rules unique to insights.php. Load after /assets/css/global.css. REQUIRED PAGE HOOK APPROVED VISUAL DIRECTION Built to follow the same cinematic page architecture established by what-we-do.php / what-we-do.css while preserving the unique Insights content and database-driven article archive. ARCHITECTURE - Shared colors, typography, transitions, and sitewide components come from global.css. - Every selector is scoped beneath .page-insights. - No header, footer, reset, or global component duplication. ========================================================================== */ /* ========================================================================== 01. PAGE FOUNDATION ========================================================================== */ .page-insights .page { overflow: hidden; background: var(--black); color: var(--white); } .page-insights .wrap { width: 100%; max-width: var(--site-max); margin-inline: auto; padding-inline: var(--site-gutter); } .page-insights .page h1, .page-insights .page h2, .page-insights .page h3 { text-transform: uppercase; } .page-insights .eyebrow { display: inline-flex; align-items: center; gap: 15px; margin-bottom: 24px; color: var(--primary); font-family: var(--font-body); font-size: var(--hero-eyebrow-size); font-weight: 700; letter-spacing: var(--hero-eyebrow-spacing); line-height: 1; text-transform: uppercase; } .page-insights .eyebrow::before { content: ""; flex: 0 0 42px; width: 42px; height: 1px; background: var(--primary); } .page-insights .eyebrow-center { justify-content: center; } .page-insights .eyebrow-center::after { content: ""; flex: 0 0 42px; width: 42px; height: 1px; background: currentColor; } .page-insights .cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border: 1px solid var(--primary); border-radius: 0; background: var(--primary); color: var(--black-light); cursor: pointer; font-family: var(--font-body); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; line-height: 1; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: background-color var(--transition-standard), border-color var(--transition-standard), color var(--transition-standard), transform var(--transition-standard); } .page-insights .cta-button:hover, .page-insights .cta-button:focus-visible { border-color: var(--primary-light); background: var(--primary-light); color: var(--black-light); transform: translateY(-1px); } /* ========================================================================== 02. HERO Matches the What We Do page scale, spacing, and cinematic treatment. ========================================================================== */ .page-insights .hero { position: relative; min-height: 63vh; display: flex; align-items: flex-end; isolation: isolate; background: var(--black); } .page-insights .hero-bg-image { position: absolute; inset: 0; z-index: -4; background-image: url("../images/insights-hero-background.png"); background-position: center center; background-size: cover; background-repeat: no-repeat; filter: saturate(.78) contrast(1.08); } .page-insights .hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, rgba(var(--black-rgb), .96) 0%, rgba(var(--black-rgb), .83) 48%, rgba(var(--black-rgb), .30) 100%), linear-gradient(0deg, var(--black) 0%, rgba(var(--black-rgb), .45) 27%, transparent 63%); } .page-insights .hero::after { position: absolute; right: -2%; bottom: -10%; z-index: -1; color: rgba(var(--white-rgb), .022); content: "INSIGHTS"; font: 700 clamp(210px, 26vw, 410px)/.8 var(--font-display); letter-spacing: -.05em; pointer-events: none; } .page-insights .hero-inner { padding: 300px 0 58px; } .page-insights .hero-copy { max-width: 940px; } .page-insights .hero h1 { margin: 0 0 28px; color: var(--white); font-family: var(--font-display); font-size: var(--hero-heading-size); font-weight: 400; letter-spacing: var(--hero-heading-spacing); line-height: var(--hero-heading-line); text-transform: uppercase; } .page-insights .hero h1 span { display: block; color: var(--primary); } .page-insights .hero-foot { display: grid; grid-template-columns: minmax(0, 800px) auto; gap: 58px; align-items: end; max-width: 1240px; padding-top: 22px; border-top: 1px solid rgba(var(--primary-rgb), .42); } .page-insights .hero-foot p { margin: 0; color: var(--light-gray); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.68; } .page-insights .hero-action { display: flex; justify-content: flex-end; } /* ========================================================================== 03. FEATURED ARTICLE ========================================================================== */ .page-insights .featured { position: relative; padding: 145px 0 160px; background: radial-gradient(circle at 82% 10%, rgba(var(--primary-rgb), .07), transparent 26%), var(--black); } .page-insights .featured-head { display: grid; grid-template-columns: 1.08fr .92fr; gap: 90px; align-items: end; margin-bottom: 78px; } .page-insights .featured-head h2 { max-width: 820px; margin: 0; font-size: clamp(54px, 6.1vw, 100px); line-height: .89; letter-spacing: -.035em; } .page-insights .featured-head h2 span { display: block; color: var(--primary); } .page-insights .featured-intro { margin: 0 0 5px; color: var(--light-gray); font-size: 19px; line-height: 1.75; } .page-insights .featured-card { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 590px; background: var(--panel); box-shadow: 0 28px 70px rgba(var(--black-rgb), .28); } .page-insights .featured-image-link { position: relative; display: block; min-height: 590px; overflow: hidden; background: #0d0d0d; } .page-insights .featured-image-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 58%, rgba(var(--black-rgb), .48)), linear-gradient(0deg, rgba(var(--black-rgb), .18), transparent 38%); pointer-events: none; } .page-insights .featured-image { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms var(--ease-standard), filter 450ms var(--ease-standard); } .page-insights .featured-image-link:hover .featured-image { transform: scale(1.03); filter: brightness(1.08); } .page-insights .featured-content { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 5vw, 68px); } .page-insights .article-date { display: block; margin-bottom: 18px; color: var(--primary); font-size: .5625rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; } .page-insights .featured-content h3 { margin-bottom: 22px; font-size: clamp(44px, 4.5vw, 70px); line-height: .92; letter-spacing: -.03em; } .page-insights .featured-content h3 a { color: var(--white); transition: color var(--transition-fast); } .page-insights .featured-content h3 a:hover, .page-insights .featured-content h3 a:focus-visible { color: var(--primary); } .page-insights .featured-content>p { margin: 0 0 31px; color: var(--light-gray); font-size: 16px; line-height: 1.72; } .page-insights .featured-action { margin-top: 2px; } /* ========================================================================== 04. ARTICLE ARCHIVE ========================================================================== */ .page-insights .archive { padding: 150px 0 165px; background: radial-gradient(circle at 50% 20%, rgba(var(--primary-rgb), .055), transparent 28%), var(--black-light); } .page-insights .archive-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 50px; margin-bottom: 72px; } .page-insights .archive-head h2 { margin: 0; font-size: clamp(52px, 5.9vw, 96px); line-height: .89; letter-spacing: -.035em; } .page-insights .archive-head h2 span { display: block; color: var(--primary); } .page-insights .archive-count { padding-bottom: 7px; color: var(--medium-gray); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .page-insights .article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .page-insights .article-card { min-width: 0; display: flex; flex-direction: column; background: var(--panel); box-shadow: 0 24px 60px rgba(var(--black-rgb), .22); } .page-insights .article-card:nth-child(3n + 2) { background: #15110e; } .page-insights .article-image-link { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #0d0d0d; } .page-insights .article-image-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(var(--black-rgb), .24), transparent 48%); pointer-events: none; } .page-insights .article-image { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-standard), filter 400ms var(--ease-standard); } .page-insights .article-image-link:hover .article-image { transform: scale(1.035); filter: brightness(1.08); } .page-insights .article-body { flex: 1; display: flex; flex-direction: column; padding: 31px; } .page-insights .article-card h3 { margin-bottom: 17px; font-size: clamp(28px, 2.4vw, 36px); line-height: 1; letter-spacing: -.015em; } .page-insights .article-card h3 a { color: var(--white); transition: color var(--transition-fast); } .page-insights .article-card h3 a:hover, .page-insights .article-card h3 a:focus-visible { color: var(--primary); } .page-insights .article-card p { margin: 0 0 26px; color: var(--medium-gray); font-size: .8125rem; line-height: 1.67; } .page-insights .article-link { display: inline-flex; align-items: center; margin-top: auto; color: var(--primary); font-size: .5625rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; transition: color var(--transition-fast); gap: 10px; } .page-insights .article-link:hover, .page-insights .article-link:focus-visible { color: var(--white); } .page-insights .archive-empty { padding: 70px; background: var(--panel); text-align: center; } .page-insights .archive-empty h2 { margin-bottom: 12px; font-size: 46px; } .page-insights .archive-empty p { margin: 0; color: var(--medium-gray); } /* ========================================================================== 05. FINAL CTA Matches the What We Do page closing section. ========================================================================== */ .page-insights .close { position: relative; overflow: hidden; padding: 125px 0 135px; background: var(--primary); color: var(--black-light); text-align: center; } .page-insights .close-word { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); color: rgba(var(--black-rgb), .055); font: 700 clamp(230px, 32vw, 500px)/.9 var(--font-display); letter-spacing: -.06em; pointer-events: none; } .page-insights .close-inner { position: relative; max-width: 1200px; margin: 0 auto; } .page-insights .close .eyebrow { color: #392113; } .page-insights .close .eyebrow::before, .page-insights .close .eyebrow::after { background: currentColor; } .page-insights .close h2 { max-width: 1000px; margin: 0 auto 27px; font-size: clamp(58px, 7vw, 112px); line-height: .87; letter-spacing: -.04em; } .page-insights .close-copy { max-width: 760px; margin: 0 auto; color: rgba(var(--black-rgb), .74); font-size: 18px; line-height: 1.7; } .page-insights .close-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; margin-top: 39px; } .page-insights .close .cta-button { border-color: var(--black-light); background: var(--black-light); color: var(--white); } .page-insights .close .cta-button:hover, .page-insights .close .cta-button:focus-visible { border-color: var(--white); background: var(--white); color: var(--black-light); } /* ========================================================================== 06. RESPONSIVE — LARGE TABLET ========================================================================== */ @media (max-width: 1180px) { .page-insights .wrap { padding-inline: var(--site-gutter-tablet); } .page-insights .hero-foot, .page-insights .featured-head, .page-insights .featured-card { grid-template-columns: 1fr; } .page-insights .hero-action { justify-content: flex-start; } .page-insights .featured-image-link { min-height: 460px; } .page-insights .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================================== 07. RESPONSIVE — MOBILE ========================================================================== */ @media (max-width: 680px) { .page-insights .wrap { padding-inline: var(--site-gutter-mobile); } .page-insights .hero { min-height: auto; align-items: flex-start; } .page-insights .hero-inner { padding: 150px 0 72px; } .page-insights .hero h1 { font-size: clamp(62px, 19vw, 94px); margin-bottom: 22px; } .page-insights .hero .eyebrow { margin-bottom: 18px; } .page-insights .hero-foot { gap: 28px; padding-top: 18px; } .page-insights .hero-foot p { line-height: 1.55; } .page-insights .featured, .page-insights .archive, .page-insights .close { padding: 92px 0; } .page-insights .featured-head, .page-insights .archive-head { grid-template-columns: 1fr; gap: 35px; margin-bottom: 55px; } .page-insights .featured-head h2, .page-insights .archive-head h2, .page-insights .close h2 { font-size: clamp(48px, 13.5vw, 74px); } .page-insights .featured-card { min-height: auto; } .page-insights .featured-image-link { min-height: 300px; } .page-insights .featured-content { padding: 34px 28px 38px; } .page-insights .featured-content h3 { font-size: clamp(42px, 12vw, 62px); } .page-insights .article-grid { grid-template-columns: 1fr; } .page-insights .article-body { padding: 27px 24px 30px; } .page-insights .archive-count { padding-bottom: 0; } .page-insights .close-actions { flex-direction: column; align-items: stretch; } .page-insights .close .cta-button { width: 100%; } } @media (max-width: 1024px) { .page-insights .hero-copy { padding-inline: var(--site-gutter-tablet); } } @media (max-width: 760px) { .page-insights .hero-copy { padding-inline: 24px; } }