/* ------------------------------------------------------------ Single Portfolio component Scope: single-vh_portfolio page shell + sidebar snapshot cards. ------------------------------------------------------------- */ .single-vh_portfolio .vh-single-shell-section{ background: radial-gradient(circle at 15% 0%, rgba(var(--bs-primary-rgb, 159, 169, 11), .07), transparent 34rem), linear-gradient(180deg, var(--vh-card-surface, #ffffff) 0%, var(--vh-section-surface, #f8fafc) 100%); } .single-vh_portfolio .vh-single-shell-section > .container{ max-width: 1320px; } .single-vh_portfolio .vh-single-sticky{ display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 992px){ .single-vh_portfolio .vh-single-sticky{ position: sticky; top: calc(5rem + var(--wp-admin--admin-bar--height, 0px)); } } .single-vh_portfolio .vh-side-card{ --vh-side-card-border: rgba(15, 23, 42, .1); --vh-side-card-bg: rgba(255, 255, 255, .94); --vh-side-card-soft: #f8fafc; position: relative; overflow: hidden; border: 1px solid var(--vh-side-card-border); border-radius: 1.45rem; padding: clamp(1.1rem, 2vw, 1.45rem); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)); box-shadow: 0 1.2rem 2.75rem rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255,255,255,.8); } .single-vh_portfolio .vh-side-card::before{ content: ""; position: absolute; inset: 0 0 auto; height: .38rem; background: linear-gradient(90deg, var(--bs-primary, #9fa90b), rgba(var(--bs-primary-rgb, 159, 169, 11), .32)); pointer-events: none; } .single-vh_portfolio .vh-side-card--snapshot{ padding-top: clamp(1.25rem, 2vw, 1.65rem); } .single-vh_portfolio .vh-side-card__header{ display: grid; gap: .35rem; margin-bottom: 1rem; } .single-vh_portfolio .vh-side-card__eyebrow, .single-vh_portfolio .vh-side-kicker{ display: inline-flex; width: fit-content; align-items: center; gap: .45rem; border-radius: 999px; padding: .35rem .65rem; background: rgba(var(--bs-primary-rgb, 159, 169, 11), .1); color: var(--vh-accent-text, var(--vh-link, #9fa90b)); font-size: .72rem; font-weight: 900; letter-spacing: .1em; line-height: 1; text-transform: uppercase; } .single-vh_portfolio .vh-side-title{ margin: 0; color: #07111f; font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.05; } .single-vh_portfolio .vh-side-media-frame{ position: relative; display: grid; place-items: center; margin: .35rem 0 1rem; border: 1px solid rgba(15, 23, 42, .08); border-radius: 1.1rem; aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(135deg, rgba(15,23,42,.05), rgba(var(--bs-primary-rgb, 159, 169, 11), .08)), #f8fafc; } .single-vh_portfolio .vh-side-media-frame img{ display: block; width: 100%; height: 100%; object-fit: contain; } .single-vh_portfolio .vh-side-list{ display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; } .single-vh_portfolio .vh-side-list li{ margin: 0; } .single-vh_portfolio .vh-side-list--facts li{ display: grid; gap: .18rem; border: 1px solid rgba(15, 23, 42, .08); border-radius: .95rem; padding: .78rem .85rem; background: rgba(255,255,255,.74); } .single-vh_portfolio .vh-side-list--facts strong{ display: block; color: #475569; font-size: .72rem; font-weight: 900; letter-spacing: .07em; line-height: 1.2; text-transform: uppercase; } .single-vh_portfolio .vh-side-list--facts span{ display: block; color: #0f172a; font-size: .97rem; font-weight: 700; line-height: 1.45; } .single-vh_portfolio .vh-side-list--proof li{ position: relative; border-radius: .95rem; padding: .85rem .9rem .85rem 2.05rem; background: linear-gradient(180deg, rgba(15,23,42,.045), rgba(15,23,42,.025)); color: #1f2937; font-size: .95rem; font-weight: 650; line-height: 1.55; } .single-vh_portfolio .vh-side-list--proof li::before{ content: ""; position: absolute; top: 1.15rem; left: .9rem; width: .48rem; height: .48rem; border-radius: 999px; background: var(--bs-primary, #9fa90b); box-shadow: 0 0 0 .28rem rgba(var(--bs-primary-rgb, 159, 169, 11), .12); } .single-vh_portfolio .vh-side-card--proof, .single-vh_portfolio .vh-side-card--stack{ display: grid; gap: 1rem; } .single-vh_portfolio .vh-side-actions{ display: grid; gap: .65rem; } .single-vh_portfolio .vh-side-actions .vh-action-btn{ min-height: 3.7rem; border-radius: 1rem; font-weight: 900; } .single-vh_portfolio .vh-side-actions .vh-action-btn--secondary-dark{ background: var(--vh-btn-dark-bg, #212529); border-color: var(--vh-btn-dark-border, var(--vh-btn-dark-bg, #212529)); color: var(--vh-btn-dark-text, #ffffff); } .single-vh_portfolio .vh-side-actions .vh-action-btn--secondary-dark:hover, .single-vh_portfolio .vh-side-actions .vh-action-btn--secondary-dark:focus{ background: var(--bs-primary, #9fa90b); border-color: var(--bs-primary, #9fa90b); color: var(--vh-btn-dark-text, #ffffff); } .single-vh_portfolio .vh-single-content-card{ border: 1px solid rgba(15,23,42,.08); border-radius: 1.65rem; background: #fff; box-shadow: 0 1.2rem 2.75rem rgba(15,23,42,.07); } .single-vh_portfolio .vh-single-content-card .entry-content{ padding: clamp(1.2rem, 3vw, 2rem); } @media (max-width: 991.98px){ .single-vh_portfolio .vh-single-sticky{ margin-bottom: 1.5rem; } .single-vh_portfolio .vh-side-card{ border-radius: 1.25rem; } } @media (max-width: 575.98px){ .single-vh_portfolio .vh-side-card{ padding: 1rem; } .single-vh_portfolio .vh-side-list--facts li, .single-vh_portfolio .vh-side-list--proof li{ border-radius: .8rem; } }