/* Generated by bin/build-assets.php — do not edit. Source: resources/css/pages/vendor-restyle.css */ .hs-breadcrumb{display:flex;flex-wrap:wrap;align-items:center}.hs-breadcrumb-item{display:inline-flex;align-items:center;font-size:var(--fs-sm,.875rem);color:var(--c-ink-subtle,#6b7280)}.hs-breadcrumb-item a{display:inline-flex;align-items:center;gap:var(--sp-1,4px);color:var(--c-ink-muted,#374151);font-weight:600;text-decoration:none;border-radius:var(--r-sm,4px);padding-block:2px}.hs-breadcrumb-item a:hover{color:var(--c-navy,#003366);text-decoration:underline;text-underline-offset:.16em}.hs-breadcrumb-item a:focus-visible{outline:none;box-shadow:var(--shadow-focus,0 0 0 3px #2b6ca8)}.hs-breadcrumb-item.active{color:var(--c-ink,#111827);font-weight:600}.hs-breadcrumb-item:not(:last-child)::after{content:"";display:inline-block;width:.3125rem;height:.3125rem;border-top:1.5px solid var(--c-ink-subtle,#9aa6b8);border-right:1.5px solid var(--c-ink-subtle,#9aa6b8);transform:rotate(45deg);margin-inline:var(--sp-2,8px);flex:none}.hs-accordion-group{border:1px solid var(--c-line,var(--c-border,#e5e7eb));border-radius:var(--r-lg,12px);overflow:hidden;background:var(--c-white,#fff)}.hs-accordion{border-block-end:1px solid var(--c-line,var(--c-border,#e5e7eb))}.hs-accordion:last-child{border-block-end:0}.hs-accordion-toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3,12px);width:100%;padding:var(--sp-4,16px) var(--sp-5,20px);font-weight:700;font-size:var(--fs-base,1rem);color:var(--c-ink,#111827);background:transparent;border:0;text-align:left;cursor:pointer;list-style:none}.hs-accordion-toggle::-webkit-details-marker{display:none}.hs-accordion-toggle:hover{background:color-mix(in srgb,var(--c-navy,#003366) 4%,transparent)}.hs-accordion-toggle:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--shadow-focus,#2b6ca8)}.hs-accordion-toggle .hs-accordion-icon{flex:none;width:1rem;height:1rem;color:var(--c-ink-subtle,#6b7280);transition:transform var(--dur-normal,.18s) var(--ease-out,ease)}.hs-accordion[open] .hs-accordion-toggle .hs-accordion-icon{transform:rotate(180deg)}.hs-accordion-content{padding:0 var(--sp-5,20px) var(--sp-4,16px);color:var(--c-ink-muted,#374151);line-height:var(--lh-normal,1.6)}@media (prefers-reduced-motion:reduce){.hs-accordion-toggle .hs-accordion-icon{transition:none}}.hs-dropdown{position:relative;display:inline-block}.hs-dropdown-toggle{display:inline-flex;align-items:center;gap:var(--sp-2,8px)}.hs-dropdown-menu{position:absolute;top:100%;left:0;z-index:var(--z-dropdown,200);min-width:12rem;margin-top:var(--sp-2,8px);padding:var(--sp-2,8px);list-style:none;background:var(--c-white,#fff);border:1px solid var(--c-line,var(--c-border,#e5e7eb));border-radius:var(--r-lg,12px);box-shadow:var(--skeu-shadow-raised-lg,0 2px 4px rgba(16,36,64,.07),0 14px 34px rgba(16,36,64,.16));opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}.hs-dropdown:hover>.hs-dropdown-menu,.hs-dropdown:focus-within>.hs-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.hs-dropdown-item{display:block;padding:var(--sp-2,8px) var(--sp-3,12px);border-radius:var(--r-md,8px);color:var(--c-ink-muted,#374151);font-size:var(--fs-sm,.875rem);text-decoration:none}.hs-dropdown-item:hover{background:color-mix(in srgb,var(--c-navy,#003366) 6%,transparent);color:var(--c-navy,#003366)}.hs-dropdown-item:focus-visible{outline:none;box-shadow:var(--shadow-focus,0 0 0 3px #2b6ca8)}.hs-tooltip{position:relative;display:inline-flex}.hs-tooltip-content{position:absolute;bottom:calc(100% + .4rem);left:50%;transform:translateX(-50%) translateY(2px);z-index:var(--z-tooltip,300);width:max-content;max-width:16rem;padding:var(--sp-2,6px) var(--sp-3,10px);border-radius:var(--r-md,6px);background:var(--c-ink,#111827);color:var(--c-white,#fff);font-size:var(--fs-xs,.75rem);font-weight:600;line-height:1.3;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,transform .12s ease}.hs-tooltip:hover .hs-tooltip-content,.hs-tooltip:focus-within .hs-tooltip-content{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}.hs-badge{display:inline-flex;align-items:center;gap:var(--sp-1,4px);padding:.1875rem var(--sp-2,10px);border-radius:var(--r-full,999px);font-size:var(--fs-xs,.75rem);font-weight:600;line-height:1.2;box-shadow:inset 0 0 0 1px currentColor;background:transparent}.hs-badge--navy{color:var(--c-navy,#003366)}.hs-badge--green{color:var(--c-green-dark,#5f8a16)}.hs-badge--neutral{color:var(--c-ink-subtle,#6b7280)}.hs-card{display:flex;flex-direction:column;background:var(--c-white,#fff);border:1px solid var(--c-line,var(--c-border,#e5e7eb));border-radius:var(--r-xl,14px);box-shadow:var(--skeu-shadow-raised,0 1px 2px rgba(16,36,64,.06),0 4px 12px rgba(16,36,64,.10))}.hs-card-header{padding:var(--sp-4,16px) var(--sp-5,20px);border-bottom:1px solid var(--c-line,var(--c-border,#e5e7eb))}.hs-card-body{padding:var(--sp-5,20px)}.hs-card-footer{padding:var(--sp-4,16px) var(--sp-5,20px);border-top:1px solid var(--c-line,var(--c-border,#e5e7eb))}.site-breadcrumb__list{gap:var(--sp-2)}.site-breadcrumb__item{gap:var(--sp-2)}.site-breadcrumb__link{border-radius:var(--r-sm,4px);padding-inline:2px}.site-breadcrumb__link:focus-visible{outline:none;box-shadow:var(--shadow-focus,0 0 0 3px #2b6ca8)}.site-breadcrumb__sep{display:inline-flex;align-items:center;justify-content:center;min-width:.75rem;color:var(--c-ink-subtle,#9aa6b8);font-size:var(--fs-sm,.875rem);line-height:1;flex:none}.site-breadcrumb__sep::before{content:none}.page-hero .site-breadcrumb__sep{color:color-mix(in srgb,var(--c-white) 60%,transparent)}.ccfs-footer__seal-link:focus-visible{outline:none;box-shadow:var(--shadow-focus,0 0 0 3px #2b6ca8)}@media (min-width:1024px){body.page-contact .container,body.page-contact .ccfs-contact-complaints,body.page-careers .container,body.page-careers-single .container,body.page-brand .container,body.page-brand-style-guide .container,body.page-rebrand .ccfs-rebrand__hero-inner.container,body .help-page,body.page-status .status-page{max-width:var(--container-wide)}}@media (min-width:1024px){body.page-use-cases .uc-page,body.page-use-cases .uc-hub,body.page-comparisons .cmp-page{max-width:var(--container-wide)}}@media (min-width:1024px){body.page-what-we-offer .content-page__body>.section--prose,body.page-how-we-lend .content-page__body>.section--prose,body.page-our-technology .content-page__body>.section--prose{max-width:none;width:100%;margin-inline:0}}@media (min-width:1024px){body.page-borrowing-options .boc{max-width:var(--container-wide)}}.hs-badge.ui-badge--brand{background-color:var(--c-navy,#003366);background-image:linear-gradient(155deg,var(--c-navy-light,#2b6ca8) 0%,var(--c-navy,#003366) 55%,var(--c-navy-dark,#002244) 100%)}.hs-badge{padding:var(--sp-1,4px) var(--sp-3,12px)} /* ============================================================================ vendor-restyle.css — Segment D (content / legal / help) ---------------------------------------------------------------------------- Self-hosted vendor-component restyle. Ports the beta's proven pre-styled component look (the Laravel+Preline beta on box167 /srv/credicorp-beta-port, resources/css/app.css @layer components) onto this site's existing content / legal / help component markup — WITHOUT changing any markup, wording, brand marks, URLs or SEO. How it relates to the beta vendor pack: - The beta expresses its component look through a skeuomorphic depth system (.skeu-card / .skeu-cta-* / .skeu-thead / .skeu-band …) layered on Preline/Tailwind. Those skeu tokens are lifted verbatim from prod marketing.css and ALREADY exist here (--skeu-grad-surface, --skeu-shadow-raised(-lg), --skeu-shadow-float, --skeu-grad-navy, …). - This file maps the SAME vendor component treatment onto the real BEM class names used by these pages (.legal-doc-card, .help-card, .ccfs-contact-card, .legal-doc__toc, .callout, tables, prose links, …), so the pages visibly adopt the beta's card/table/callout/button styling. Load order: AFTER marketing.css + legal.css/content.css (it overrides them). CSP: external same-origin file only — no inline, no CDN. All values reference tokens defined in marketing.css :root (verified present). ============================================================================ */ /* Vendor radius scale mirrored from the beta (Tailwind rounded-lg/xl/2xl), scoped so it can't leak into other segments' components. */ :root{ --vr-radius-card: 0.75rem; /* beta rounded-xl on cards / table shells */ --vr-radius-panel: 1rem; /* beta rounded-2xl on hero figures / panels */ --vr-lift: -2px; /* beta .skeu-card-hover translateY(-2px) */ --vr-lift-lg: -4px; /* stronger lift for primary link cards */ }/* --------------------------------------------------------------------------- 1) CARDS — the core vendor component. Beta .skeu-card = surface gradient bg + raised shadow + 1px line border, .skeu-card-hover = translateY lift + raised-lg/float shadow on hover. Applied to every card that does the "card" job across this segment so the bespoke flat-white variants unify onto ONE vendor treatment. --------------------------------------------------------------------------- */ .legal-doc-card, .help-card, .ccfs-contact-card, .legal-doc-card[data-legal-doc]{ background:var(--skeu-grad-surface); border:1px solid var(--c-border); border-radius:var(--vr-radius-card); box-shadow:var(--skeu-shadow-raised); transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }.legal-doc-card:hover, .help-card:hover, .ccfs-contact-card:hover{ box-shadow:var(--skeu-shadow-raised-lg), var(--skeu-shadow-float); border-color:var(--c-border); transform:translateY(var(--vr-lift)); }/* the whole-card links (legal index + help cards) get the stronger lift the beta gives its clickable link-cards */ a.legal-doc-card:hover, .help-card:hover{ transform:translateY(var(--vr-lift-lg)); border-color:var(--c-navy); }/* card grids: match the beta's roomier, even gutters + consistent min track */ .legal-doc-grid{gap:var(--sp-5)}.help-cards{gap:var(--sp-5)}.ccfs-contact-card-grid{gap:var(--sp-4)}/* --------------------------------------------------------------------------- 2) TOC / SIDEBAR + SUPPORT CALLOUT PANELS Beta gives tinted panels the surface gradient + raised depth (not flat fill), with the rounded-xl radius. Unifies .legal-doc__toc + support-callout onto it. --------------------------------------------------------------------------- */ .legal-doc__toc{ background:var(--skeu-grad-surface); border:1px solid var(--c-border); border-radius:var(--vr-radius-card); box-shadow:var(--skeu-shadow-raised); padding:var(--sp-5); }.legal-doc__toc-list a{ text-decoration:none; }.legal-doc__toc-list a:hover{ text-decoration:underline; text-underline-offset:2px; }.legal-doc__support-callout{ background:var(--skeu-grad-surface); border:1px solid var(--c-border); border-radius:var(--vr-radius-panel); box-shadow:var(--skeu-shadow-raised); }/* --------------------------------------------------------------------------- 3) CALLOUTS (prose accent boxes) Beta look: surface gradient + brand-green accent bar + raised depth + the rounded-xl radius on the free (non-bar) corners. Covers both the content .callout and the legal-section .callout. --------------------------------------------------------------------------- */ .callout, .legal-section .callout{ background:var(--skeu-grad-surface); border-left:4px solid var(--c-green); border-top:1px solid var(--c-border); border-right:1px solid var(--c-border); border-bottom:1px solid var(--c-border); border-radius:0 var(--vr-radius-card) var(--vr-radius-card) 0; box-shadow:var(--skeu-shadow-raised); }/* --------------------------------------------------------------------------- 4) TABLES — beta .skeu-card shell + .skeu-thead navy gradient header + zebra. Applied to legal + content prose tables. The shell rounds the corners and lifts; the header takes the navy gradient with white uppercase labels; even rows get the soft navy-tint zebra (data tables only). Horizontal scroll is preserved (already on .legal-doc__html / .table-scroll / .prose table). --------------------------------------------------------------------------- */ .legal-doc__html table, .legal-table, .prose table{ border-collapse:separate; border-spacing:0; border:1px solid var(--c-border); border-radius:var(--vr-radius-card); overflow:hidden; box-shadow:var(--skeu-shadow-raised); background:var(--c-white); }/* column headers ONLY (thead th) get the navy gradient. Row-header cells ( in tbody) are body-styled below — a table that is all row-headers + values (e.g. the transparency figures) must NOT go all-navy. */ .legal-doc__html table thead th, .legal-table thead th, .prose table thead th{ background:var(--skeu-grad-navy); color:var(--c-white); font-weight:600; font-size:var(--fs-xs,0.85rem); text-transform:uppercase; letter-spacing:0.04em; border:0; border-bottom:1px solid var(--c-navy-dark); }/* row-header cells (first-column th) read as body emphasis, not navy header */ .legal-doc__html table tbody th, .legal-table tbody th, .prose table tbody th{ background:transparent; color:var(--c-navy); font-weight:600; text-transform:none; letter-spacing:normal; font-size:inherit; }.legal-doc__html table td, .legal-doc__html table tbody th, .legal-table td, .legal-table tbody th, .prose table td, .prose table tbody th{ border:0; border-bottom:1px solid var(--c-border); }.legal-doc__html table tbody tr:last-child td, .legal-doc__html table tbody tr:last-child th, .legal-table tbody tr:last-child td, .legal-table tbody tr:last-child th, .prose table tbody tr:last-child td, .prose table tbody tr:last-child th{ border-bottom:0; }/* zebra — soft navy-tint on even body rows (beta: card > table striping) */ .legal-doc__html table tbody tr:nth-child(even), .legal-table tbody tr:nth-child(even), .prose table tbody tr:nth-child(even){ background:color-mix(in srgb, var(--c-surface-navy-tint) 45%, #fff); }/* the .prose table uses display:table on thead/tbody for mobile scroll — keep the header gradient spanning full width there */ .prose table thead{background:transparent}/* --------------------------------------------------------------------------- 5) PROSE LINKS — beta's intentional branded underline (1.5px, offset, brand navy, thickening to solid on hover) instead of thin default underlines. Scoped to running prose only; button/card links keep their own treatment. --------------------------------------------------------------------------- */ .legal-doc__html :is(p,li,dd,dt) a, .legal-section :is(p,li,dd,dt) a, .prose :is(p,li,dd,dt) a{ color:var(--c-navy); font-weight:600; text-decoration-line:underline; text-decoration-thickness:1.5px; text-underline-offset:2px; text-decoration-color:color-mix(in srgb, var(--c-navy) 30%, transparent); transition:color .15s ease, text-decoration-color .15s ease; }.legal-doc__html :is(p,li,dd,dt) a:hover, .legal-section :is(p,li,dd,dt) a:hover, .prose :is(p,li,dd,dt) a:hover{ color:var(--c-navy-light); text-decoration-color:currentColor; }/* --------------------------------------------------------------------------- 6) CHIPS / CTA BUTTONS that appear inside content (e.g. help-card CTA, language switcher pills) — align onto the beta's raised surface-chip look. The i18n switch pills already read as buttons; give the "current" one the navy CTA gradient and the rest the raised surface treatment for depth. --------------------------------------------------------------------------- */ .ccfs-i18n-switch__lang{ background:var(--skeu-grad-surface); border:1px solid var(--c-border); border-radius:var(--r-md); box-shadow:var(--skeu-shadow-raised); transition:box-shadow .15s ease, transform .15s ease; }.ccfs-i18n-switch__lang:hover{ box-shadow:var(--skeu-shadow-raised-lg); }.ccfs-i18n-switch__lang.is-current{ background:var(--skeu-grad-navy); border-color:var(--c-navy-dark); color:var(--c-white); box-shadow:var(--skeu-shadow-cta-navy); }/* help-card CTA reads as a real inline action link with the brand underline */ .help-card__cta{ text-decoration:none; }.help-card__cta:hover{ text-decoration:underline; text-underline-offset:2px; }/* --------------------------------------------------------------------------- 7) CONTACT-CARD icon badges — beta gives icon chips a soft raised surface. --------------------------------------------------------------------------- */ .ccfs-contact-card__icon{ border-radius:var(--r-md); box-shadow:var(--skeu-shadow-raised); }/* --------------------------------------------------------------------------- 8) FIGURE / HERO IMAGE panels in content (help hero) — beta rounds to 2xl with a hairline frame + raised depth. --------------------------------------------------------------------------- */ .help-page__hero{ border-radius:var(--vr-radius-panel); border:1px solid var(--c-border); box-shadow:var(--skeu-shadow-raised); }/* --------------------------------------------------------------------------- 9) SECTION RHYTHM — tighten legal/content section spacing to the beta's denser policy-doc rhythm (beta py-7/py-9 for legal). Additive nudges only. --------------------------------------------------------------------------- */ .legal-doc__html h2:not(:first-child){margin-top:var(--sp-6)}.help-page__self-service, .help-page__quick, .help-page__email{margin-top:var(--sp-6)}@media (prefers-reduced-motion: reduce){.legal-doc-card, .help-card, .ccfs-contact-card, a.legal-doc-card, .ccfs-i18n-switch__lang{transition:none}.legal-doc-card:hover, .help-card:hover, .ccfs-contact-card:hover, a.legal-doc-card:hover{transform:none}}@media (min-width: 1024px){.legal-page__wrap { max-width: var(--container-wide, 1320px); }.help-page { max-width: var(--container-wide, 1320px); }.page-contact .ccfs-contact-layout { max-width: var(--container-wide, 1320px); }}@media (min-width: 1024px){.money-tools-page:has(.ccfs-smt-grid) { max-width: var(--container-wide, 1320px); }}@media (min-width: 900px){.ccfs-smt-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }}@media (min-width: 1024px){.ccfs-smt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5, 1.5rem); }}@media (min-width: 1024px){body.page-brand .container, body.page-brand-style-guide .container { max-width: var(--container-wide, 1320px); }}/* ── MIRROR ADDENDUM: header wordmark ™ placement (owner 2026-07-19) ───────── The header lockup is ®. Nothing styled that , so it fell back to inline `vertical-align: super` and sat out to the RIGHT of the wordmark on its own baseline, visibly detached from the mark instead of tucked into its top-right corner. .ccnav2__logo is already position:relative (marketing.css), so the mark can be pinned to the lockup box. Kept off marketing.css deliberately: that bundle is authoritative from the Credicorp build and sync-mirror-css.py re-copies it, which would wipe this. vendor-restyle.css is the retained mirror addendum. Source apex carries the same markup with ® — if the same tightening is wanted there, it belongs in the Credicorp build's marketing.css, not here. */ /* Specificity note (2026-07-28): the baked per-page critical block carries `.ccnav2__logo sup{font-size:9px;color:#6b7280}` and — being inline in AFTER this stylesheet link — wins font-size/colour on an equal-specificity tie, leaving the ® near-invisible. Qualify with `.ccnav2` so this rule (0,0,2,1) beats the inline (0,0,1,1) regardless of source order. The header-css.php source is also fixed, so a re-mirror bakes the same values into the critical block; this addendum keeps the mirror correct until then. */ .ccnav2 .ccnav2__logo > sup { position: absolute; top: 0.05rem; left: 100%; margin-left: 0.06rem; font-size: 0.72rem; /* enlarged 2026-07-28: 0.52em/9px read as near-invisible on the mirror */ font-weight: 700; color: #003366; /* navy, so the mark is legible next to the CreditCorp wordmark */ line-height: 1; vertical-align: baseline; pointer-events: none; }