/* HausPrint About page — ported from about-us/styles.css. Generated: scope_css.py output + bridge.css + adapter.css. Do not hand-edit; edit the sources and regenerate. */ .hp-about-page .entry-content { --hp-teal: #4aa09d; --hp-teal-light: #66b8b4; --hp-teal-dark: #0e6565; --hp-navy: #031b2b; --hp-navy-deep: #02131f; --hp-ink: #181c1d; --hp-muted: #526060; --hp-surface: #f7fafa; --hp-surface-low: #f1f4f4; --hp-border: #bdc9c8; --hp-footer-text: #c2ced5; --hp-footer-muted: #8798a3; --hp-footer-border: rgba(119, 160, 177, 0.28); --hp-max: 1280px; } .hp-about-page .entry-content * { box-sizing: border-box; } .hp-about-page .entry-content { scroll-behavior: smooth; } .hp-about-page .entry-content { margin: 0; color: var(--hp-ink); background: var(--hp-surface); font-family: "Work Sans", Arial, sans-serif; line-height: 1.55; } .hp-about-page .entry-content a { color: inherit; text-decoration: none; } .hp-about-page .entry-content button, .hp-about-page .entry-content input { font: inherit; } .hp-about-page .entry-content img { max-width: 100%; } .hp-about-page .entry-content h1, .hp-about-page .entry-content h2, .hp-about-page .entry-content h3 { margin-top: 0; font-family: "Hanken Grotesk", Arial, sans-serif; } .hp-about-page .entry-content .container { width: min(calc(100% - 40px), var(--hp-max)); margin-inline: auto; } .hp-about-page .entry-content .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .hp-about-page .entry-content .eyebrow { color: var(--hp-teal-dark); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .hp-about-page .entry-content .breadcrumb { padding-block: 24px; color: var(--hp-muted); font-size: 14px; } .hp-about-page .entry-content .breadcrumb span { margin-inline: 9px; } .hp-about-page .entry-content .breadcrumb strong { color: var(--hp-ink); } .hp-about-page .entry-content .hero { display: grid; grid-template-columns: 5fr 7fr; gap: 44px; align-items: center; padding-block: 48px 80px; } .hp-about-page .entry-content .hero h1 { margin: 18px 0 24px; max-width: 600px; font-size: clamp(44px, 5vw, 64px); line-height: 1.04; letter-spacing: -.025em; } .hp-about-page .entry-content .hero h1 span { color: var(--hp-teal-dark); } .hp-about-page .entry-content .hero-copy > p { max-width: 570px; color: var(--hp-muted); font-size: 16px; line-height: 1.7; } .hp-about-page .entry-content .hero-copy .hero-lead { color: #3e4949; font-size: 18px; line-height: 1.75; } .hp-about-page .entry-content .button-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .hp-about-page .entry-content .button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 13px 24px; border-radius: 4px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .hp-about-page .entry-content .button-primary { border: 1px solid var(--hp-teal-dark); color: #fff; background: var(--hp-teal-dark); } .hp-about-page .entry-content .button-outline { border: 1px solid var(--hp-ink); } .hp-about-page .entry-content .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 38px; border-block: 1px solid var(--hp-border); } .hp-about-page .entry-content .hero-stats > div { padding: 18px 12px; text-align: center; } .hp-about-page .entry-content .hero-stats > div + div { border-left: 1px solid var(--hp-border); } .hp-about-page .entry-content .hero-stats strong, .hp-about-page .entry-content .hero-stats span { display: block; } .hp-about-page .entry-content .hero-stats strong { font-size: 18px; } .hp-about-page .entry-content .hero-stats span { color: var(--hp-muted); font-size: 12px; } .hp-about-page .entry-content .hero-gallery { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 600px; } .hp-about-page .entry-content .hero-image { position: relative; overflow: hidden; border: 1px solid var(--hp-border); border-radius: 8px; background: #e5e9e8; } .hp-about-page .entry-content .hero-image-large { grid-row: 1 / 3; } .hp-about-page .entry-content .hero-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; } .hp-about-page .entry-content .hero-image:hover img { transform: scale(1.03); } .hp-about-page .entry-content .hero-image figcaption { position: absolute; left: 14px; bottom: 14px; padding: 8px 11px; background: rgba(255,255,255,.94); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .hp-about-page .entry-content .network-section { padding-block: 80px; background: var(--hp-surface-low); } .hp-about-page .entry-content .network-layout { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; } .hp-about-page .entry-content .network-copy h2, .hp-about-page .entry-content .products-section h2, .hp-about-page .entry-content .process-section h2 { margin: 18px 0; font-size: clamp(32px, 4vw, 44px); line-height: 1.15; } .hp-about-page .entry-content .network-copy > p { color: var(--hp-muted); line-height: 1.75; } .hp-about-page .entry-content .network-headline > span { display: block; } .hp-about-page .entry-content .network-headline-accent { color: var(--hp-teal); font-weight: 900; letter-spacing: -0.01em; } .hp-about-page .entry-content .value-list { display: grid; gap: 20px; margin-top: 30px; } .hp-about-page .entry-content .value-list article { display: flex; gap: 15px; } .hp-about-page .entry-content .value-icon { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: var(--hp-teal-dark); font-weight: 700; } .hp-about-page .entry-content .value-list h3 { margin: 0 0 3px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; } .hp-about-page .entry-content .value-list p { margin: 0; color: var(--hp-muted); font-size: 14px; } .hp-about-page .entry-content .map-card { overflow: hidden; border: 1px solid var(--hp-border); border-radius: 8px; background: #fff; } .hp-about-page .entry-content .map-header { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--hp-border); } .hp-about-page .entry-content .map-header strong, .hp-about-page .entry-content .map-header span { display: block; } .hp-about-page .entry-content .map-header strong { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; } .hp-about-page .entry-content .map-header div span { margin-top: 3px; color: var(--hp-muted); font-size: 13px; } .hp-about-page .entry-content .map-badge { padding: 8px 11px; border-radius: 4px; color: #fff; background: var(--hp-teal); font-size: 10px; font-weight: 700; text-transform: uppercase; white-space: nowrap; } .hp-about-page .entry-content .map-stage { padding: 20px; background: radial-gradient(circle at 60% 30%, rgba(74,160,157,.18), transparent 34%), linear-gradient(145deg,#f5f8f7,#e7eceb); } .hp-about-page .entry-content #production-map { display: block; width: 100%; height: auto; } .hp-about-page .entry-content #map-status { padding: 12px 0 2px; color: var(--hp-muted); text-align: center; font-size: 14px; } .hp-about-page .entry-content .map-route { stroke-dasharray: 8 9; animation: routeMove 11s linear infinite; } .hp-about-page .entry-content .map-pin { animation: pinPulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .hp-about-page .entry-content .hub-detail { padding: 20px; border-top: 1px solid var(--hp-border); } .hp-about-page .entry-content .hub-detail h3 { margin: 8px 0 4px; font-size: 21px; } .hp-about-page .entry-content .hub-detail p { margin: 0; color: var(--hp-muted); font-size: 14px; } .hp-about-page .entry-content .hub-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; } .hp-about-page .entry-content .hub-buttons button { padding: 15px; border: 1px solid var(--hp-border); border-radius: 6px; background: #fff; text-align: left; cursor: pointer; } .hp-about-page .entry-content .hub-buttons button[aria-pressed="true"] { border-color: var(--hp-teal); box-shadow: 0 0 0 2px rgba(74,160,157,.16); } .hp-about-page .entry-content .hub-buttons strong, .hp-about-page .entry-content .hub-buttons span { display: block; } .hp-about-page .entry-content .hub-buttons strong { color: var(--hp-teal-dark); font-size: 12px; text-transform: uppercase; } .hp-about-page .entry-content .hub-buttons span { margin-top: 6px; color: var(--hp-muted); font-size: 13px; } .hp-about-page .entry-content .map-note { color: var(--hp-muted); text-align: center; font-size: 12px; } .hp-about-page .entry-content .benefit-strip { border-block: 1px solid var(--hp-border); background: #fff; } .hp-about-page .entry-content .benefit-strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); } .hp-about-page .entry-content .benefit-strip article { display: flex; gap: 14px; align-items: center; padding: 28px 20px; border-left: 2px solid var(--hp-teal); } .hp-about-page .entry-content .benefit-strip article span { color: var(--hp-teal-dark); font-size: 23px; } .hp-about-page .entry-content .benefit-strip strong, .hp-about-page .entry-content .benefit-strip small { display: block; } .hp-about-page .entry-content .benefit-strip strong { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .hp-about-page .entry-content .benefit-strip small { margin-top: 3px; color: var(--hp-muted); } .hp-about-page .entry-content .products-section { padding-block: 80px; } .hp-about-page .entry-content .section-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; } .hp-about-page .entry-content .section-heading-row h2 { margin-bottom: 0; } .hp-about-page .entry-content .section-heading-row > a { color: var(--hp-teal-dark); font-size: 13px; font-weight: 700; text-transform: uppercase; } .hp-about-page .entry-content .product-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; margin-top: 36px; } .hp-about-page .entry-content .product-card > div { aspect-ratio: 1; overflow: hidden; border: 1px solid var(--hp-border); border-radius: 8px; } .hp-about-page .entry-content .product-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .hp-about-page .entry-content .product-card:hover img { transform: scale(1.04); } .hp-about-page .entry-content .product-card small { display: block; margin-top: 12px; color: var(--hp-muted); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .hp-about-page .entry-content .product-card h3 { margin: 4px 0 7px; font-size: 17px; } .hp-about-page .entry-content .product-card > a { color: var(--hp-teal-dark); font-size: 12px; font-weight: 700; text-transform: uppercase; } .hp-about-page .entry-content .process-section { padding-block: 80px; background: var(--hp-surface-low); text-align: center; } .hp-about-page .entry-content .process-inner > h2 { margin-inline: auto; } .hp-about-page .entry-content .process-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; margin-top: 44px; } .hp-about-page .entry-content .process-grid article { position: relative; } .hp-about-page .entry-content .process-grid article::after { content: ""; position: absolute; top: 24px; left: calc(50% + 30px); right: calc(-50% + 30px); height: 2px; background: var(--hp-border); } .hp-about-page .entry-content .process-grid article:last-child::after { display: none; } .hp-about-page .entry-content .process-grid article > div { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; margin-inline: auto; border-radius: 50%; color: #fff; background: var(--hp-teal-dark); font-weight: 700; } .hp-about-page .entry-content .process-grid h3 { margin: 14px 0 4px; font-size: 15px; text-transform: uppercase; } .hp-about-page .entry-content .process-grid p { margin: 0; color: var(--hp-muted); font-size: 14px; } .hp-about-page .entry-content .quote-cta { padding-block: 48px; color: #fff; background: var(--hp-teal-dark); } .hp-about-page .entry-content .quote-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; } .hp-about-page .entry-content .quote-inner h2 { margin: 0; font-size: 34px; } .hp-about-page .entry-content .quote-inner p { margin: 6px 0 0; opacity: .82; } .hp-about-page .entry-content .quote-button { color: var(--hp-teal-dark); background: #fff; } @keyframes routeMove { to { stroke-dashoffset: -190; } } @keyframes pinPulse { 0%,62%,100% { transform: scale(1); } 78% { transform: scale(1.4); } } @media (max-width: 1180px) { .hp-about-page .entry-content .hero { grid-template-columns: 1fr; } .hp-about-page .entry-content .hero-copy { max-width: 760px; } .hp-about-page .entry-content .network-layout { grid-template-columns: 1fr; } .hp-about-page .entry-content .product-grid { grid-template-columns: repeat(3,1fr); } } @media (max-width: 800px) { .hp-about-page .entry-content .hero-gallery { height: 480px; } .hp-about-page .entry-content .hub-buttons { grid-template-columns: repeat(2,1fr); } .hp-about-page .entry-content .benefit-strip-inner { grid-template-columns: repeat(2,1fr); } .hp-about-page .entry-content .process-grid { grid-template-columns: 1fr; } .hp-about-page .entry-content .process-grid article::after { display: none; } .hp-about-page .entry-content .quote-inner { flex-direction: column; text-align: center; } } @media (max-width: 560px) { .hp-about-page .entry-content .container { width: min(calc(100% - 28px), var(--hp-max)); } .hp-about-page .entry-content .hero { padding-top: 28px; } .hp-about-page .entry-content .hero-gallery { grid-template-columns: 1fr; grid-template-rows: repeat(3,230px); height: auto; } .hp-about-page .entry-content .hero-image-large { grid-row: auto; } .hp-about-page .entry-content .hero-stats { grid-template-columns: 1fr; } .hp-about-page .entry-content .hero-stats > div + div { border-left: 0; border-top: 1px solid var(--hp-border); } .hp-about-page .entry-content .map-header, .hp-about-page .entry-content .section-heading-row { align-items: flex-start; flex-direction: column; } .hp-about-page .entry-content .hub-buttons, .hp-about-page .entry-content .benefit-strip-inner, .hp-about-page .entry-content .product-grid { grid-template-columns: 1fr; } .hp-about-page .entry-content .benefit-strip article { border-left: 0; border-top: 2px solid var(--hp-teal); } } @media (prefers-reduced-motion: reduce) { .hp-about-page .entry-content *, .hp-about-page .entry-content *::before, .hp-about-page .entry-content *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } } /* Map visibility refinement */ .hp-about-page .entry-content .hp-map-canvas { background: radial-gradient(circle at 52% 42%, rgba(74,160,157,.16), transparent 42%), linear-gradient(145deg,#031b2b,#082d40); } .hp-about-page .entry-content .hp-map-canvas > img.map-base { display:block; width:100%; height:auto; opacity:.30; filter:grayscale(1) contrast(1.18) brightness(.78); mix-blend-mode:screen; } .hp-about-page .entry-content .hp-map-canvas > img.map-outline { position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:fill; opacity:.96; filter:drop-shadow(0 0 1px rgba(255,255,255,.35)) drop-shadow(0 0 7px rgba(74,160,157,.32)); pointer-events:none; } .hp-about-page .entry-content .hp-map-canvas::after { content:''; position:absolute; inset:7% 4% 8%; z-index:1; border-radius:42% 48% 44% 40%; background:radial-gradient(ellipse at center,rgba(255,255,255,.055),transparent 68%); pointer-events:none; } .hp-about-page .entry-content .map-grid-overlay { opacity:.10; } /* Contained HausPrint production-routing diagram */ .hp-about-page .entry-content .hp-map-stage { padding: 18px; background: #eef3f3; } .hp-about-page .entry-content .map-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 2px 14px; } .hp-about-page .entry-content .map-toolbar-brand { display:flex; align-items:center; gap:11px; color:#17313d; } .hp-about-page .entry-content .map-toolbar-brand > span:last-child { display:flex; flex-direction:column; } .hp-about-page .entry-content .map-toolbar-brand strong { font-size:12px; letter-spacing:.11em; } .hp-about-page .entry-content .map-toolbar-brand small { margin-top:2px; color:#667778; font-size:11px; } .hp-about-page .entry-content .map-hp-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#fff; background:#4aa09d; font-size:12px; font-weight:800; } .hp-about-page .entry-content .map-live { display:flex; align-items:center; gap:7px; color:#0e6565; font-size:10px; font-weight:800; letter-spacing:.1em; } .hp-about-page .entry-content .map-live i { width:8px; height:8px; border-radius:50%; background:#4aa09d; box-shadow:0 0 0 5px rgba(74,160,157,.14); animation:livePulse 2s infinite; } .hp-about-page .entry-content .routing-canvas { position:relative; overflow:hidden; border:1px solid rgba(102,184,180,.42); border-radius:12px; background: radial-gradient(circle at 50% 50%,rgba(74,160,157,.13),transparent 34%), linear-gradient(145deg,#02131f,#06283a 70%,#083447); box-shadow:inset 0 0 0 1px rgba(255,255,255,.025); } .hp-about-page .entry-content .routing-canvas svg { position:relative; z-index:2; display:block; width:100%; height:auto; } .hp-about-page .entry-content .routing-grid { position:absolute; inset:0; opacity:.12; background-image:linear-gradient(rgba(102,184,180,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(102,184,180,.32) 1px,transparent 1px); background-size:40px 40px; mask-image:radial-gradient(circle at center,#000 35%,transparent 88%); } .hp-about-page .entry-content .routing-routes use { fill:none; stroke:#66b8b4; stroke-width:2.2; stroke-dasharray:8 9; opacity:.58; animation:routeMove 10s linear infinite; } .hp-about-page .entry-content .routing-jobs circle { fill:#fff; stroke:#4aa09d; stroke-width:3; filter:drop-shadow(0 0 5px rgba(102,184,180,.8)); } .hp-about-page .entry-content .routing-hub { cursor:pointer; } .hp-about-page .entry-content .hub-orbit { fill:rgba(74,160,157,.05); stroke:rgba(102,184,180,.54); stroke-width:1.5; stroke-dasharray:4 5; } .hp-about-page .entry-content .hub-core { fill:#07364a; stroke:#66b8b4; stroke-width:2.5; transition:.2s ease; } .hp-about-page .entry-content .hub-icon { fill:none; stroke:#f7fbfc; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; } .hp-about-page .entry-content .routing-hub:hover .hub-core, .hp-about-page .entry-content .routing-hub.is-active .hub-core { fill:#4aa09d; filter:url(#softGlow); } .hp-about-page .entry-content .routing-hub:hover .hub-orbit, .hp-about-page .entry-content .routing-hub.is-active .hub-orbit { stroke:#fff; animation:orbitSpin 7s linear infinite; transform-box:fill-box; transform-origin:center; } .hp-about-page .entry-content .hq-pulse { fill:rgba(74,160,157,.08); stroke:rgba(102,184,180,.35); stroke-width:2; animation:hqPulse 2.8s ease-out infinite; } .hp-about-page .entry-content .hq-ring { fill:#041e2d; stroke:#66b8b4; stroke-width:2.5; } .hp-about-page .entry-content .hq-core { fill:#4aa09d; stroke:#fff; stroke-width:3; filter:drop-shadow(0 0 9px rgba(102,184,180,.5)); } .hp-about-page .entry-content .routing-hq text { fill:#fff; font-size:19px; font-weight:800; letter-spacing:-.04em; } .hp-about-page .entry-content .routing-label rect, .hp-about-page .entry-content .hq-label rect { fill:rgba(3,27,43,.9); stroke:rgba(102,184,180,.58); stroke-width:1; } .hp-about-page .entry-content .routing-label text, .hp-about-page .entry-content .hq-label text { fill:#f7fbfc; font-size:12px; font-weight:800; letter-spacing:.06em; } .hp-about-page .entry-content .routing-label .sub, .hp-about-page .entry-content .hq-label .sub { fill:#9eb0b8; font-size:10.5px; font-weight:500; letter-spacing:0; } .hp-about-page .entry-content .hq-label rect { fill:rgba(74,160,157,.14); stroke:#66b8b4; } .hp-about-page .entry-content .routing-signature { position:absolute; right:18px; bottom:15px; z-index:3; display:flex; flex-direction:column; color:rgba(247,251,252,.28); text-align:right; pointer-events:none; } .hp-about-page .entry-content .routing-signature span { font-size:10px; letter-spacing:.2em; } .hp-about-page .entry-content .routing-signature strong { font-size:17px; letter-spacing:.03em; } .hp-about-page .entry-content .map-legend { display:flex; flex-wrap:wrap; gap:18px; align-items:center; padding:14px 3px 0; color:#526060; font-size:11px; } .hp-about-page .entry-content .map-legend span { display:flex; align-items:center; gap:8px; } .hp-about-page .entry-content .legend-hq { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#fff; background:#4aa09d; font-size:8px; font-style:normal; font-weight:800; } .hp-about-page .entry-content .legend-hub { width:12px; height:12px; border-radius:50%; background:#07364a; border:2px solid #66b8b4; } .hp-about-page .entry-content .legend-job { width:9px; height:9px; border-radius:50%; background:#fff; border:2px solid #4aa09d; } @keyframes livePulse { 50% { box-shadow:0 0 0 8px rgba(74,160,157,0); } } @keyframes hqPulse { 0%{transform:scale(.8);opacity:.8} 75%,100%{transform:scale(1.25);opacity:0} } @keyframes orbitSpin { to{transform:rotate(360deg)} } @media(max-width:680px){ .hp-about-page .entry-content .map-toolbar {align-items:flex-start;flex-direction:column} .hp-about-page .entry-content .routing-label, .hp-about-page .entry-content .hq-label {display:none} .hp-about-page .entry-content .routing-signature {display:none} } /* Final refinement: hero, light U.S. vendor map, and balanced timeline */ .hp-about-page .entry-content .hero { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 28px; } .hp-about-page .entry-content .hero-copy { min-width: 0; } .hp-about-page .entry-content .hero h1 { max-width: none; white-space: nowrap; font-size: clamp(42px, 4.2vw, 66px); } .hp-about-page .entry-content .hero-gallery { grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); grid-template-rows: 1fr 1fr; gap: 8px; height: 548px; } .hp-about-page .entry-content .hero-gallery figure { margin: 0; min-width: 0; min-height: 0; } .hp-about-page .entry-content .hero-image figcaption { left: 12px; bottom: 12px; padding: 7px 10px; } .hp-about-page .entry-content .vendor-map-card { background:#fff; } .hp-about-page .entry-content .vendor-map-shell { display:grid; grid-template-columns:minmax(0,1fr) 210px; min-height:520px; border-top:1px solid var(--hp-border); } .hp-about-page .entry-content .vendor-map-canvas { position:relative; overflow:hidden; min-height:520px; background:#eef4f4; } .hp-about-page .entry-content .vendor-map-canvas > img { display:block; width:100%; height:100%; min-height:520px; object-fit:cover; object-position:center; opacity:.95; filter:saturate(.65) contrast(.98) brightness(1.03); } .hp-about-page .entry-content .vendor-map-canvas::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(247,250,250,.06),rgba(74,160,157,.03)); } .hp-about-page .entry-content .vendor-route-layer { position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; } .hp-about-page .entry-content .vendor-routes use { fill:none; stroke:var(--hp-teal); stroke-width:3; stroke-linecap:round; stroke-dasharray:10 12; opacity:.36; animation:routeMove 14s linear infinite; } .hp-about-page .entry-content .vendor-route-dots circle { fill:#fff; stroke:var(--hp-teal-dark); stroke-width:3; filter:drop-shadow(0 2px 3px rgba(0,0,0,.15)); } .hp-about-page .entry-content .vendor-marker { position:absolute; z-index:4; transform:translate(-50%,-50%); display:grid; place-items:center; width:31px; height:31px; padding:0; border:3px solid #fff; border-radius:50%; color:#fff; background:var(--hp-teal); box-shadow:0 3px 10px rgba(25,63,69,.22); cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; } .hp-about-page .entry-content .vendor-marker span { font-size:9px; font-weight:800; letter-spacing:-.02em; } .hp-about-page .entry-content .vendor-marker:hover, .hp-about-page .entry-content .vendor-marker:focus-visible, .hp-about-page .entry-content .vendor-marker.is-active { transform:translate(-50%,-50%) scale(1.18); background:var(--hp-teal-dark); box-shadow:0 0 0 7px rgba(74,160,157,.16),0 5px 14px rgba(25,63,69,.28); } .hp-about-page .entry-content .vendor-marker-hq { width:43px; height:43px; background:var(--hp-navy); } .hp-about-page .entry-content .vendor-marker-hq span { font-size:12px; } .hp-about-page .entry-content .vendor-map-tooltip { position:absolute; z-index:5; left:18px; bottom:18px; max-width:390px; padding:13px 15px; border:1px solid rgba(74,160,157,.42); border-radius:6px; background:rgba(255,255,255,.94); box-shadow:0 8px 24px rgba(20,45,52,.12); } .hp-about-page .entry-content .vendor-map-tooltip strong, .hp-about-page .entry-content .vendor-map-tooltip span { display:block; } .hp-about-page .entry-content .vendor-map-tooltip strong { color:var(--hp-ink); font-size:13px; } .hp-about-page .entry-content .vendor-map-tooltip span { margin-top:4px; color:var(--hp-muted); font-size:12px; line-height:1.45; } .hp-about-page .entry-content .vendor-legend { position:relative; z-index:6; padding:19px 16px; border-left:1px solid var(--hp-border); background:rgba(255,255,255,.98); } .hp-about-page .entry-content .vendor-legend-title { display:flex; justify-content:space-between; margin-bottom:11px; color:var(--hp-ink); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } .hp-about-page .entry-content .vendor-legend-title span { color:var(--hp-teal-dark); } .hp-about-page .entry-content .vendor-legend-list { display:grid; gap:3px; } .hp-about-page .entry-content .vendor-legend-list button { display:grid; grid-template-columns:10px 1fr; gap:9px; align-items:center; width:100%; padding:6px 4px; border:0; border-radius:4px; color:#26363b; background:transparent; text-align:left; cursor:pointer; transition:background .18s ease,color .18s ease; } .hp-about-page .entry-content .vendor-legend-list button i { width:9px; height:9px; border-radius:50%; background:var(--hp-teal); } .hp-about-page .entry-content .vendor-legend-list button span { font-size:12px; } .hp-about-page .entry-content .vendor-legend-list button:hover, .hp-about-page .entry-content .vendor-legend-list button:focus-visible, .hp-about-page .entry-content .vendor-legend-list button.is-active { color:#fff; background:var(--hp-teal); } .hp-about-page .entry-content .vendor-legend-list button:hover i, .hp-about-page .entry-content .vendor-legend-list button:focus-visible i, .hp-about-page .entry-content .vendor-legend-list button.is-active i { background:#fff; } .hp-about-page .entry-content .vendor-legend small { position:absolute; left:16px; right:16px; bottom:14px; color:#879496; font-size:9px; line-height:1.4; } .hp-about-page .entry-content .process-inner { position:relative; } .hp-about-page .entry-content .process-grid { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin-top:44px; } .hp-about-page .entry-content .process-grid::before { content:""; position:absolute; top:24px; left:10%; right:10%; height:2px; background:var(--hp-border); } .hp-about-page .entry-content .process-grid article { position:relative; z-index:1; padding-inline:15px; } .hp-about-page .entry-content .process-grid article::after { display:none !important; } .hp-about-page .entry-content .process-grid .step-number { position:relative; z-index:2; display:grid; place-items:center; width:48px; height:48px; margin-inline:auto; border-radius:50%; color:#fff; background:var(--hp-teal-dark); font-weight:700; box-shadow:0 0 0 12px var(--hp-surface-low); } .hp-about-page .entry-content .process-grid h3 { margin-top:18px; } @media (max-width:1180px){ .hp-about-page .entry-content .hero h1 { white-space:normal; } } @media (max-width:900px){ .hp-about-page .entry-content .vendor-map-shell { grid-template-columns:1fr; } .hp-about-page .entry-content .vendor-legend { border-left:0; border-top:1px solid var(--hp-border); } .hp-about-page .entry-content .vendor-legend small { position:static; display:block; margin-top:12px; } } @media (max-width:800px){ .hp-about-page .entry-content .process-grid { grid-template-columns:1fr; gap:24px; } .hp-about-page .entry-content .process-grid::before { display:none; } .hp-about-page .entry-content .process-grid .step-number { box-shadow:none; } } @media (max-width:560px){ .hp-about-page .entry-content .hero h1 { white-space:normal; } .hp-about-page .entry-content .vendor-map-canvas, .hp-about-page .entry-content .vendor-map-canvas > img { min-height:390px; } .hp-about-page .entry-content .vendor-map-tooltip { right:12px; left:12px; bottom:12px; } } /* V5: regional map, corrected icons, restored full benefit hover */ .hp-about-page .entry-content .value-icon svg, .hp-about-page .entry-content .benefit-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .hp-about-page .entry-content .value-icon svg { color:#fff; } .hp-about-page .entry-content .value-icon-currency { font-size:25px; line-height:1; color:#fff; } .hp-about-page .entry-content .regional-map-shell { grid-template-columns:minmax(0,1fr) 190px; } .hp-about-page .entry-content .region-marker span { font-size:8px; letter-spacing:0; } .hp-about-page .entry-content .regional-legend .vendor-legend-list { gap:8px; } .hp-about-page .entry-content .regional-legend .vendor-legend-list button { padding:9px 7px; } .hp-about-page .entry-content .regional-legend .vendor-legend-list button:last-child i { background:var(--hp-navy); } .hp-about-page .entry-content .benefit-strip-inner { align-items:stretch; } .hp-about-page .entry-content .benefit-strip article { position:relative; isolation:isolate; overflow:hidden; min-height:116px; height:100%; margin:0; padding:28px 24px; background:#fff; transition:color .25s ease; } .hp-about-page .entry-content .benefit-strip article::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--hp-teal); transform:scaleY(0); transform-origin:bottom; transition:transform .28s ease; } .hp-about-page .entry-content .benefit-strip article:hover::before, .hp-about-page .entry-content .benefit-strip article:focus-visible::before { transform:scaleY(1); } .hp-about-page .entry-content .benefit-strip article:hover, .hp-about-page .entry-content .benefit-strip article:focus-visible { color:#fff; outline:none; } .hp-about-page .entry-content .benefit-strip article:hover strong, .hp-about-page .entry-content .benefit-strip article:hover small, .hp-about-page .entry-content .benefit-strip article:hover .benefit-icon, .hp-about-page .entry-content .benefit-strip article:focus-visible strong, .hp-about-page .entry-content .benefit-strip article:focus-visible small, .hp-about-page .entry-content .benefit-strip article:focus-visible .benefit-icon { color:#fff; } .hp-about-page .entry-content .benefit-icon { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; color:var(--hp-teal-dark); transition:color .25s ease, transform .25s ease; } .hp-about-page .entry-content .benefit-strip article:hover .benefit-icon, .hp-about-page .entry-content .benefit-strip article:focus-visible .benefit-icon { transform:scale(1.08); } .hp-about-page .entry-content .benefit-dollar { font-size:29px !important; font-weight:700; line-height:1; } .hp-about-page .entry-content .benefit-strip strong { color:var(--hp-ink); transition:color .25s ease; } .hp-about-page .entry-content .benefit-strip small { color:var(--hp-muted); transition:color .25s ease; } @media (max-width:900px){ .hp-about-page .entry-content .regional-map-shell { grid-template-columns:1fr; } } /* v7 refinements: accurate Fayetteville HQ, capability-only cards, unified footer icons */ .hp-about-page .entry-content .vendor-marker-hq { z-index: 7; width: 48px; height: 48px; border: 3px solid #fff; background: var(--hp-navy); box-shadow: 0 0 0 6px rgba(74,160,157,.18), 0 10px 24px rgba(3,27,43,.22); } .hp-about-page .entry-content .vendor-marker-hq::after { content: "Fayetteville, GA"; position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; padding: 4px 7px; border: 1px solid rgba(74,160,157,.32); border-radius: 4px; color: var(--hp-navy); background: rgba(255,255,255,.94); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; pointer-events: none; } .hp-about-page .entry-content .vendor-marker-hq span { font-size: 13px; } .hp-about-page .entry-content .hub-buttons button { min-height: 132px; } .hp-about-page .entry-content .hub-buttons span { line-height: 1.55; } @media (max-width: 1180px) { .hp-about-page .entry-content .hub-buttons button { min-height: 116px; } } @media (max-width: 560px) { .hp-about-page .entry-content .vendor-marker-hq::after { display: none; } } /* V8: closed-by-default production region drawer */ .hp-about-page .entry-content .vendor-map-shell.regional-map-shell { position: relative; display: block; min-height: 520px; overflow: hidden; } .hp-about-page .entry-content .regional-map-shell .vendor-map-canvas { width: 100%; min-height: 520px; } .hp-about-page .entry-content .legend-toggle { position: absolute; z-index: 9; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 10px 14px; border: 1px solid rgba(74,160,157,.5); border-radius: 6px; color: var(--hp-teal-dark); background: rgba(255,255,255,.96); box-shadow: 0 7px 20px rgba(20,45,52,.12); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease; } .hp-about-page .entry-content .legend-toggle svg, .hp-about-page .entry-content .legend-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .hp-about-page .entry-content .legend-toggle:hover, .hp-about-page .entry-content .legend-toggle:focus-visible, .hp-about-page .entry-content .legend-toggle[aria-expanded="true"] { color: #fff; border-color: var(--hp-teal); background: var(--hp-teal); } .hp-about-page .entry-content .legend-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .hp-about-page .entry-content .regional-legend { position: absolute; z-index: 10; inset: 0 0 0 auto; width: min(285px, 82vw); padding: 22px 18px 20px; border: 0; border-left: 1px solid var(--hp-border); background: rgba(255,255,255,.985); box-shadow: -18px 0 36px rgba(20,45,52,.13); transform: translateX(102%); visibility: hidden; pointer-events: none; transition: transform .26s ease, visibility 0s linear .26s; } .hp-about-page .entry-content .regional-legend.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; transition-delay: 0s; } .hp-about-page .entry-content .regional-legend .vendor-legend-title { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; margin-bottom: 18px; } .hp-about-page .entry-content .regional-legend .legend-heading { color: var(--hp-ink); } .hp-about-page .entry-content .regional-legend .legend-count { padding: 5px 8px; border-radius: 999px; color: var(--hp-teal-dark); background: rgba(74,160,157,.12); white-space: nowrap; } .hp-about-page .entry-content .legend-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--hp-border); border-radius: 50%; color: var(--hp-muted); background: #fff; cursor: pointer; } .hp-about-page .entry-content .legend-close:hover, .hp-about-page .entry-content .legend-close:focus-visible { color: #fff; border-color: var(--hp-teal); background: var(--hp-teal); } .hp-about-page .entry-content .regional-legend small { position: absolute; left: 18px; right: 18px; bottom: 18px; } @media (max-width: 560px) { .hp-about-page .entry-content .legend-toggle { top: 10px; right: 10px; } .hp-about-page .entry-content .regional-legend { width: min(300px, 90vw); } } @media (prefers-reduced-motion: reduce) { .hp-about-page .entry-content .regional-legend, .hp-about-page .entry-content .legend-toggle svg { transition: none; } } /* v9: HausPrint logomark HQ marker positioned over Fayetteville, Georgia */ .hp-about-page .entry-content .vendor-marker-hq { width: 54px; height: 54px; padding: 0; overflow: visible; border: 0; background: transparent; box-shadow: 0 0 0 7px rgba(74,160,157,.16), 0 10px 24px rgba(3,27,43,.22); } .hp-about-page .entry-content .vendor-marker-hq img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .hp-about-page .entry-content .vendor-marker-hq span { display: none; } /* v10: smaller Fayetteville HQ mark and route endpoints aligned to marker centers */ .hp-about-page .entry-content .vendor-marker-hq { width: 44px; height: 44px; box-shadow: 0 0 0 5px rgba(74,160,157,.14), 0 8px 18px rgba(3,27,43,.20); } .hp-about-page .entry-content .vendor-marker-hq:hover, .hp-about-page .entry-content .vendor-marker-hq:focus-visible, .hp-about-page .entry-content .vendor-marker-hq.is-active { transform: translate(-50%,-50%) scale(1.10); } /* v11: HausPrint control-center interactions */ .hp-about-page .entry-content .vendor-marker-hq { z-index: 7; width: 40px; height: 40px; box-shadow: 0 0 0 4px rgba(74,160,157,.14), 0 7px 16px rgba(3,27,43,.18); isolation: isolate; } .hp-about-page .entry-content .vendor-marker-hq::before { content: ""; position: absolute; inset: -9px; z-index: -1; border: 2px solid rgba(74,160,157,.65); border-radius: 50%; opacity: 0; transform: scale(.72); pointer-events: none; animation: hpControlPulse 5.6s ease-out infinite; } .hp-about-page .entry-content .vendor-marker-hq::after { pointer-events: none; } .hp-about-page .entry-content .region-marker[data-region="southeast"] { z-index: 5; } .hp-about-page .entry-content .vendor-routes .route-link { fill: none; stroke: var(--hp-teal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 12; opacity: .32; animation: routeOutward 3.2s linear infinite; transition: opacity .18s ease, stroke-width .18s ease, filter .18s ease; } .hp-about-page .entry-content .vendor-route-dots .route-dot { fill: #fff; stroke: var(--hp-teal-dark); stroke-width: 3; opacity: .86; filter: drop-shadow(0 2px 3px rgba(0,0,0,.15)); transition: opacity .18s ease, r .18s ease; } .hp-about-page .entry-content .vendor-route-layer.has-highlight .route-link, .hp-about-page .entry-content .vendor-route-layer.has-highlight .route-dot { opacity: .08; } .hp-about-page .entry-content .vendor-route-layer.has-highlight .route-link.is-highlighted { opacity: .96; stroke-width: 4; filter: drop-shadow(0 0 5px rgba(74,160,157,.42)); } .hp-about-page .entry-content .vendor-route-layer.has-highlight .route-dot.is-highlighted { opacity: 1; } @keyframes hpControlPulse { 0%, 68% { opacity: 0; transform: scale(.72); } 72% { opacity: .62; } 88%, 100% { opacity: 0; transform: scale(1.65); } } @keyframes routeOutward { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -44; } } @media (prefers-reduced-motion: reduce) { .hp-about-page .entry-content .vendor-marker-hq::before, .hp-about-page .entry-content .vendor-routes .route-link { animation: none; } } /* v12: perfectly round route travelers + detailed region drawer */ .hp-about-page .entry-content .vendor-route-dots .route-dot { fill: #fff; stroke: var(--hp-teal-dark); stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 1px 3px rgba(6, 56, 64, .22)); } .hp-about-page .entry-content .legend-toggle { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center; min-width: 220px; padding: 10px 13px 10px 10px; text-align: left; text-transform: none; letter-spacing: 0; } .hp-about-page .entry-content .legend-toggle-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: #fff; background: var(--hp-teal); box-shadow: 0 5px 14px rgba(74,160,157,.22); } .hp-about-page .entry-content .legend-toggle-icon svg { width: 23px; height: 23px; } .hp-about-page .entry-content .legend-toggle-copy { display: grid; gap: 2px; min-width: 0; } .hp-about-page .entry-content .legend-toggle-copy strong { color: var(--hp-teal-dark); font-size: 13px; line-height: 1.15; } .hp-about-page .entry-content .legend-toggle-copy small { color: #7b898b; font-size: 9px; font-weight: 500; line-height: 1.2; } .hp-about-page .entry-content .legend-toggle-arrow { width: 20px !important; height: 20px !important; color: var(--hp-teal-dark); } .hp-about-page .entry-content .legend-toggle:hover .legend-toggle-copy strong, .hp-about-page .entry-content .legend-toggle:focus-visible .legend-toggle-copy strong, .hp-about-page .entry-content .legend-toggle[aria-expanded="true"] .legend-toggle-copy strong, .hp-about-page .entry-content .legend-toggle:hover .legend-toggle-copy small, .hp-about-page .entry-content .legend-toggle:focus-visible .legend-toggle-copy small, .hp-about-page .entry-content .legend-toggle[aria-expanded="true"] .legend-toggle-copy small, .hp-about-page .entry-content .legend-toggle:hover .legend-toggle-arrow, .hp-about-page .entry-content .legend-toggle:focus-visible .legend-toggle-arrow, .hp-about-page .entry-content .legend-toggle[aria-expanded="true"] .legend-toggle-arrow { color: #fff; } .hp-about-page .entry-content .legend-toggle[aria-expanded="true"] .legend-toggle-arrow { transform: rotate(180deg); } .hp-about-page .entry-content .regional-legend { width: min(330px, 88vw); padding: 22px 20px 24px; } .hp-about-page .entry-content .regional-legend .vendor-legend-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; } .hp-about-page .entry-content .regional-legend .vendor-legend-title > div { display: grid; gap: 4px; } .hp-about-page .entry-content .regional-legend .legend-heading { color: var(--hp-ink); font-size: 12px; } .hp-about-page .entry-content .regional-legend .legend-subheading { color: var(--hp-teal-dark); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .hp-about-page .entry-content .regional-legend .vendor-legend-list { display: grid; gap: 7px; } .hp-about-page .entry-content .regional-legend .vendor-legend-list button { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 8px; } .hp-about-page .entry-content .regional-legend .vendor-legend-list button i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: var(--hp-teal); font-size: 10px; font-style: normal; font-weight: 800; } .hp-about-page .entry-content .regional-legend .vendor-legend-list button > span { display: grid; gap: 2px; min-width: 0; } .hp-about-page .entry-content .regional-legend .vendor-legend-list button strong { color: var(--hp-ink); font-size: 12px; line-height: 1.2; } .hp-about-page .entry-content .regional-legend .vendor-legend-list button small { position: static; color: #7a888a; font-size: 9px; line-height: 1.3; } .hp-about-page .entry-content .regional-legend .vendor-legend-list button:hover strong, .hp-about-page .entry-content .regional-legend .vendor-legend-list button:focus-visible strong, .hp-about-page .entry-content .regional-legend .vendor-legend-list button.is-active strong, .hp-about-page .entry-content .regional-legend .vendor-legend-list button:hover small, .hp-about-page .entry-content .regional-legend .vendor-legend-list button:focus-visible small, .hp-about-page .entry-content .regional-legend .vendor-legend-list button.is-active small { color: #fff; } .hp-about-page .entry-content .legend-hq-divider { height: 1px; margin: 8px 2px 5px; background: var(--hp-border); } .hp-about-page .entry-content .regional-legend .vendor-legend-list .legend-hq-row { grid-template-columns: 52px minmax(0,1fr); padding-block: 10px; } .hp-about-page .entry-content .regional-legend .legend-hq-row img { width: 52px; height: 52px; border-radius: 50%; object-fit: contain; background: #fff; } .hp-about-page .entry-content .legend-note { margin: 16px 2px 0; padding-top: 14px; border-top: 1px solid var(--hp-border); color: #7a888a; font-size: 9px; line-height: 1.45; } @media (max-width: 560px) { .hp-about-page .entry-content .legend-toggle { min-width: 0; width: min(230px, calc(100% - 20px)); } .hp-about-page .entry-content .regional-legend { width: min(330px, 94vw); } } /* v14 premium hero refinement */ @media (min-width: 1181px) { .hp-about-page .entry-content .hero { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); column-gap: 48px; row-gap: 0; align-items: center; padding-bottom: 120px; } .hp-about-page .entry-content .hero-gallery { gap: 8px; } .hp-about-page .entry-content .hero-stats { margin-top: 56px; } } .hp-about-page .entry-content .hero h1 .hero-print { color: var(--hp-teal); font-weight: 900; } .hp-about-page .entry-content .hero h1 .hero-period { color: var(--hp-teal-dark); } .hp-about-page .entry-content .hero-image { transition: border-color .28s ease, box-shadow .28s ease, filter .28s ease; } .hp-about-page .entry-content .hero-image:hover { border-color: rgba(74,160,157,.62); box-shadow: 0 14px 30px rgba(22,43,49,.10); } .hp-about-page .entry-content .hero-image:hover img { transform: scale(1.03); filter: brightness(1.04); } .hp-about-page .entry-content .hero-image figcaption { transition: transform .28s ease, background-color .28s ease; } .hp-about-page .entry-content .hero-image:hover figcaption { transform: translateY(-2px); background: #fff; } /* v15 — official HausPrint brand assets in header and footer */ @media (max-width: 1100px) { } @media (max-width: 680px) { } /* v16 — story-driven About page refinement */ .hp-about-page .entry-content .button { gap: 10px; border-width: 2px; transition: background-color .28s ease, color .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease; } .hp-about-page .entry-content .button-arrow { display:inline-block; transition: transform .28s ease; } .hp-about-page .entry-content .button:hover, .hp-about-page .entry-content .button:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(19,44,50,.13); } .hp-about-page .entry-content .button:hover .button-arrow, .hp-about-page .entry-content .button:focus-visible .button-arrow { transform: translateX(4px); } .hp-about-page .entry-content .button-primary { border-color: var(--hp-teal-dark); } .hp-about-page .entry-content .button-primary:hover, .hp-about-page .entry-content .button-primary:focus-visible { color: var(--hp-teal-dark); background:#fff; } .hp-about-page .entry-content .button-outline { background:#fff; border-color:var(--hp-ink); color:var(--hp-ink); } .hp-about-page .entry-content .button-outline:hover, .hp-about-page .entry-content .button-outline:focus-visible { color:#fff; background:var(--hp-teal); border-color:var(--hp-teal); } .hp-about-page .entry-content .difference-story { padding-block: 104px; background:#fff; overflow:hidden; } .hp-about-page .entry-content .difference-story-inner { max-width: 1050px; text-align:center; } .hp-about-page .entry-content .story-lines { margin-top:34px; } .hp-about-page .entry-content .story-line { margin:0; padding-block:14px; color:#263336; font-family:'Hanken Grotesk',sans-serif; font-size:clamp(28px,4vw,54px); font-weight:700; line-height:1.12; letter-spacing:-.03em; opacity:.18; transform:translateY(20px); transition:opacity .65s ease, transform .65s ease, color .65s ease; } .hp-about-page .entry-content .story-line.is-visible { opacity:1; transform:translateY(0); } .hp-about-page .entry-content .story-line-accent { color:var(--hp-teal); font-weight:800; } .hp-about-page .entry-content .model-comparison { padding-block:90px; background:var(--hp-surface-low); } .hp-about-page .entry-content .section-heading-centered { max-width:780px; margin:0 auto 44px; text-align:center; } .hp-about-page .entry-content .section-heading-centered h2 { margin:15px 0 0; font-size:clamp(34px,4.2vw,54px); line-height:1.08; letter-spacing:-.03em; } .hp-about-page .entry-content .comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .hp-about-page .entry-content .comparison-card { position:relative; overflow:hidden; min-height:390px; padding:38px; border:1px solid var(--hp-border); border-radius:16px; background:#fff; } .hp-about-page .entry-content .comparison-card h3 { max-width:550px; margin:26px 0 12px; font-size:clamp(23px,2.6vw,34px); line-height:1.16; } .hp-about-page .entry-content .comparison-card p { max-width:540px; color:var(--hp-muted); line-height:1.7; } .hp-about-page .entry-content .comparison-label { color:var(--hp-teal-dark); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } .hp-about-page .entry-content .comparison-visual { display:flex; align-items:center; justify-content:center; gap:18px; height:150px; margin-top:30px; } .hp-about-page .entry-content .comparison-visual span { display:grid; place-items:center; width:72px; height:72px; border:2px solid #a9b8b8; border-radius:12px; color:#718080; font-size:28px; font-weight:800; } .hp-about-page .entry-content .comparison-visual i { width:38px; height:2px; background:#cbd4d4; } .hp-about-page .entry-content .comparison-hausprint { color:#fff; border-color:#0c6769; background:linear-gradient(145deg,#073e47,#0b6667); } .hp-about-page .entry-content .comparison-hausprint .comparison-label { color:#9ed8d5; } .hp-about-page .entry-content .comparison-hausprint p { color:#d0e0e1; } .hp-about-page .entry-content .comparison-hub { position:relative; display:grid; place-items:center; width:170px; height:170px; margin:22px auto 4px; } .hp-about-page .entry-content .comparison-hub img { position:relative; z-index:2; width:88px; height:88px; border-radius:50%; background:#fff; } .hp-about-page .entry-content .comparison-hub > span { position:absolute; width:34px; height:34px; border:2px solid #75c2be; border-radius:50%; background:#0a555a; } .hp-about-page .entry-content .comparison-hub > span:nth-of-type(1) {left:0;top:22px}.hp-about-page .entry-content .comparison-hub > span:nth-of-type(2) {right:0;top:22px}.hp-about-page .entry-content .comparison-hub > span:nth-of-type(3) {left:10px;bottom:15px}.hp-about-page .entry-content .comparison-hub > span:nth-of-type(4) {right:10px;bottom:15px} .hp-about-page .entry-content .comparison-hub::before, .hp-about-page .entry-content .comparison-hub::after { content:""; position:absolute; inset:34px; border:1px dashed rgba(117,194,190,.55); border-radius:50%; } .hp-about-page .entry-content .comparison-hub::after { inset:8px; opacity:.45; } .hp-about-page .entry-content .proof-section { padding-block:86px; background:#fff; } .hp-about-page .entry-content .proof-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid var(--hp-border); } .hp-about-page .entry-content .proof-grid article { padding:34px 26px; text-align:center; } .hp-about-page .entry-content .proof-grid article+article { border-left:1px solid var(--hp-border); } .hp-about-page .entry-content .proof-grid strong, .hp-about-page .entry-content .proof-grid span { display:block; } .hp-about-page .entry-content .proof-grid strong { color:var(--hp-teal-dark); font-family:'Hanken Grotesk',sans-serif; font-size:clamp(24px,2.4vw,34px); } .hp-about-page .entry-content .proof-grid span { max-width:230px; margin:8px auto 0; color:var(--hp-muted); font-size:14px; line-height:1.55; } .hp-about-page .entry-content .lifestyle-section { padding-block:94px; background:var(--hp-surface-low); } .hp-about-page .entry-content .lifestyle-heading > p { max-width:470px; color:var(--hp-muted); line-height:1.7; } .hp-about-page .entry-content .lifestyle-grid { display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:repeat(2,290px); gap:12px; margin-top:38px; } .hp-about-page .entry-content .lifestyle-card { position:relative; overflow:hidden; border-radius:14px; } .hp-about-page .entry-content .lifestyle-card-large { grid-row:1/3; } .hp-about-page .entry-content .lifestyle-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .5s ease; } .hp-about-page .entry-content .lifestyle-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 44%,rgba(2,22,31,.78)); } .hp-about-page .entry-content .lifestyle-card > div { position:absolute; z-index:2; left:26px; right:26px; bottom:24px; color:#fff; } .hp-about-page .entry-content .lifestyle-card span { color:#9ed8d5; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .hp-about-page .entry-content .lifestyle-card h3 { max-width:520px; margin:7px 0 0; font-size:clamp(20px,2vw,30px); line-height:1.18; } .hp-about-page .entry-content .lifestyle-card:hover img { transform:scale(1.035); filter:brightness(1.04); } .hp-about-page .entry-content .final-cta { position:relative; overflow:hidden; padding-block:74px; background:linear-gradient(130deg,#073f49,#0e6e6d); } .hp-about-page .entry-content .final-cta .quote-inner { position:relative; z-index:2; } .hp-about-page .entry-content .final-cta-copy { display:flex; gap:24px; align-items:center; } .hp-about-page .entry-content .final-cta-copy > img { width:78px; height:78px; border-radius:50%; background:#fff; animation:ctaPulse 5.6s ease-in-out infinite; } .hp-about-page .entry-content .final-cta .eyebrow { color:#aee0dd; } .hp-about-page .entry-content .final-cta h2 { margin:8px 0 8px; color:#fff; font-size:clamp(34px,4vw,54px); } .hp-about-page .entry-content .final-cta p { max-width:700px; margin:0; color:#d9e8e8; } .hp-about-page .entry-content .final-cta-actions { display:flex; flex-wrap:wrap; gap:12px; } .hp-about-page .entry-content .final-cta .quote-button { color:var(--hp-teal-dark); background:#fff; border:2px solid #fff; } .hp-about-page .entry-content .final-cta .quote-button:hover { color:#fff; background:transparent; } .hp-about-page .entry-content .quote-secondary { color:#fff; border:2px solid rgba(255,255,255,.65); } .hp-about-page .entry-content .quote-secondary:hover { color:var(--hp-teal-dark); background:#fff; border-color:#fff; } .hp-about-page .entry-content .final-cta-routes span { position:absolute; width:420px; height:1px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 8px,transparent 8px 15px); transform:rotate(-12deg); animation:routeDrift 13s linear infinite; } .hp-about-page .entry-content .final-cta-routes span:nth-child(1) {left:-80px;top:25%}.hp-about-page .entry-content .final-cta-routes span:nth-child(2) {right:-100px;top:48%;transform:rotate(15deg)}.hp-about-page .entry-content .final-cta-routes span:nth-child(3) {left:36%;bottom:14%;transform:rotate(3deg)} @keyframes ctaPulse{0%,72%,100%{box-shadow:0 0 0 0 rgba(174,224,221,0)}82%{box-shadow:0 0 0 16px rgba(174,224,221,.18)}} @keyframes routeDrift{to{background-position:140px 0}} @media (max-width:900px){ .hp-about-page .entry-content .comparison-grid, .hp-about-page .entry-content .proof-grid { grid-template-columns:1fr 1fr; } .hp-about-page .entry-content .proof-grid article:nth-child(3) {border-left:0;border-top:1px solid var(--hp-border)} .hp-about-page .entry-content .proof-grid article:nth-child(4) {border-top:1px solid var(--hp-border)} .hp-about-page .entry-content .lifestyle-grid { grid-template-columns:1fr; grid-template-rows:420px 260px 260px; } .hp-about-page .entry-content .lifestyle-card-large { grid-row:auto; } .hp-about-page .entry-content .final-cta-copy { align-items:flex-start; } } @media (max-width:640px){ .hp-about-page .entry-content .difference-story { padding-block:74px; } .hp-about-page .entry-content .comparison-grid, .hp-about-page .entry-content .proof-grid { grid-template-columns:1fr; } .hp-about-page .entry-content .proof-grid article+article { border-left:0; border-top:1px solid var(--hp-border); } .hp-about-page .entry-content .comparison-card { min-height:0; padding:28px 22px; } .hp-about-page .entry-content .lifestyle-grid { grid-template-rows:340px 240px 240px; } .hp-about-page .entry-content .final-cta-copy { display:block; } .hp-about-page .entry-content .final-cta-copy > img { width:62px; height:62px; margin-bottom:18px; } .hp-about-page .entry-content .final-cta-actions { margin-top:24px; } } /* v17 — Print & Brand Growth Partner story refinement */ .hp-about-page .entry-content .hero-positioning { margin: 18px 0 20px; color: var(--hp-teal-dark); font-family: 'Hanken Grotesk', Arial, sans-serif; font-size: clamp(22px, 2.2vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; } .hp-about-page .entry-content .hero-positioning + .hero-lead { margin-top: 0; } /* Keep the map icon, label and supporting text stable when the drawer opens. */ .hp-about-page .entry-content .legend-toggle[aria-expanded="true"] .legend-toggle-icon { color: #fff; background: var(--hp-teal-dark); } .hp-about-page .entry-content .legend-toggle[aria-expanded="true"] .legend-toggle-copy strong::after { content: ""; } .hp-about-page .entry-content .legend-toggle[aria-expanded="true"] .legend-toggle-arrow { transform: rotate(180deg); } /* The timeline uses only its single connector line—no extra scroll-progress rule. */ .hp-about-page .entry-content .process-inner { position: relative; } .hp-about-page .entry-content .process-section h2 { margin-bottom: 0; } .hp-about-page .entry-content .process-grid { margin-top: 52px; } /* v20 — softer chapter separation for the workflow and footer transition */ .hp-about-page .entry-content .process-section { position: relative; isolation: isolate; padding-block: 112px 104px; background: linear-gradient( 180deg, #fbfcfc 0%, #f5f8f9 24%, #eef3f4 100% ); text-align: center; } .hp-about-page .entry-content .process-section::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(159, 179, 180, .55), transparent); } .hp-about-page .entry-content .process-inner { position: relative; padding: 68px 54px 72px; border: 1px solid rgba(178, 195, 196, .52); border-radius: 30px; background: rgba(255, 255, 255, .64); box-shadow: 0 24px 70px rgba(12, 42, 48, .055); backdrop-filter: blur(2px); } .hp-about-page .entry-content .process-inner > .eyebrow { display: block; } .hp-about-page .entry-content .process-section h2 { margin: 18px auto 0; } .hp-about-page .entry-content .process-grid { margin-top: 58px; } .hp-about-page .entry-content .process-grid::before { height: 3px; border-radius: 999px; background: linear-gradient( 90deg, rgba(74, 160, 157, .22), rgba(74, 160, 157, .46), rgba(74, 160, 157, .22) ); } .hp-about-page .entry-content .process-grid .step-number { box-shadow: 0 0 0 12px rgba(255, 255, 255, .94), 0 0 0 13px rgba(74, 160, 157, .12); } /* Let the workflow's cool surface hand off more gently to the navy footer. */ @media (max-width: 900px) { .hp-about-page .entry-content .process-section { padding-block: 88px 82px; } .hp-about-page .entry-content .process-inner { padding: 56px 34px 60px; border-radius: 24px; } } @media (max-width: 640px) { .hp-about-page .entry-content .process-section { padding-block: 70px 66px; } .hp-about-page .entry-content .process-inner { padding: 46px 20px 50px; border-radius: 20px; } .hp-about-page .entry-content .process-grid { margin-top: 42px; } .hp-about-page .entry-content .process-grid .step-number { box-shadow: 0 0 0 8px rgba(255, 255, 255, .94), 0 0 0 9px rgba(74, 160, 157, .12); } } /* ==================================================================== WPBakery ↔ original-design bridge -------------------------------------------------------------------- The design's stylesheet (above) expects the mockup's own DOM, e.g. `.hero > .hero-copy` and `.hero-gallery > .hero-image`. WPBakery wraps every column's content in two extra divs (`.vc_column-inner > .wpb_wrapper`) and lays columns out with float + percentage widths from `vc_col-sm-*`. `display: contents` drops those wrappers out of the layout tree while keeping their content, so the design's parent→child grid/flex rules apply to WPBakery's markup exactly as they do in index.html. Clearing float/width hands column sizing back to the design's own grid. Scope note: `.hp-about-page` is a body class and `.entry-content` is the page-content wrapper, so none of this reaches the theme header, the mega menu or the footer. ==================================================================== */ /* The design's `body` rule sets no font-size — it inherits the browser's 16px default. Pangja sets 14px, so every element that sizes by inheritance rendered 2px small (the hero column came out 25px short of the reference, and each section drifted a few px). The scoped sheet's body→wrapper rule carries the rest of that declaration block already; this restates the one part the original could leave implicit. */ .hp-about-page .entry-content { font-size: 16px; } /* The design sets no paragraph margins either — every gap between a

and its neighbours in the mockup is the browser's `margin: 1em 0`, which scales with the paragraph's own font-size (18px around .hero-lead, 16px around the body copy). Pangja resets p margins to 0, which closed those gaps. Restore the default; the ported sheet's own class rules are more specific and still win where the design does set a margin. Pangja also gives paragraphs their own 1.8 line-height; the design lets them inherit the body's 1.55, so that is restored here too. */ .hp-about-page .entry-content p { margin-top: 1em; margin-bottom: 1em; line-height: inherit; } /* Same story for in the benefit strip: the design leaves it at the UA's `smaller` (13.33px), Pangja sets it to 16px, and the extra width wrapped each caption onto three lines instead of one. */ .hp-about-page .entry-content small { font-size: smaller; } /* Headings the design never sizes explicitly (the lifestyle section's h2) fall back to the UA scale; Pangja's fixed sizes made that one 28px instead of 24px and wrapped it onto two lines. Every heading the design does size carries a class and still wins on specificity. */ .hp-about-page .entry-content h1 { font-size: 2em; } .hp-about-page .entry-content h2 { font-size: 1.5em; } .hp-about-page .entry-content h3 { font-size: 1.17em; } .hp-about-page .entry-content h4 { font-size: 1em; } /* The design is built on a 1280px canvas and constrains itself with its own `.container` rule. Pangja wraps page content in a Bootstrap `.container` capped at 1170px, which squeezed the hero column to 439px and wrapped the button row. Hand the width back to the design — body-class scoped, so only this page is affected. */ .hp-about-page main.haru-page > .container { width: 100%; max-width: none; padding-left: 0; padding-right: 0; } .hp-about-page .page-content { padding-left: 0; padding-right: 0; } /* …and the Bootstrap grid row inside it pulls 15px out on each side. Above 1280px the design's own max-width hides that, but below it every `.container` resolved `100%` against 1039px instead of 1009px and the whole page ran 30px wide. */ .hp-about-page main.haru-page > .container > .row { margin-left: 0; margin-right: 0; } /* Rows: drop WPBakery's negative gutters, 15px padding and clearfix. Rows that carry the design's own `.container` must keep their auto side margins, or they lose the centring that rule depends on. */ .hp-about-page .entry-content .vc_row { padding-left: 0; padding-right: 0; } .hp-about-page .entry-content .vc_row:not(.container) { margin-left: 0; margin-right: 0; } .hp-about-page .entry-content .vc_row.container { margin-left: auto; margin-right: auto; } .hp-about-page .entry-content .vc_row::before, .hp-about-page .entry-content .vc_row::after { display: none; } /* Bootstrap gives `.container` a clearfix ::before/::after. Harmless on a block, but the design makes some containers grid parents (e.g. .benefit-strip-inner) and a pseudo-element then becomes a real grid ITEM — it took the first cell and pushed the fourth tile onto a second row. The design never uses .container's pseudo-elements for anything. */ .hp-about-page .entry-content .container::before, .hp-about-page .entry-content .container::after { content: none; } /* Bootstrap also gives `.container` 15px of side padding. The design's own `.container` sizes itself with width math instead, so that padding just narrows every grid inside it by 30px (320px tiles became 312.5px). .process-inner is exempt: it carries `container` too but sets its own side padding, at three different breakpoints. Stripping it here meant restating that padding in the adapter, which then overrode the responsive values. */ .hp-about-page .entry-content .container:not(.process-inner) { padding-left: 0; padding-right: 0; } /* Bootstrap owns `.breadcrumb` too, and the design's breadcrumb rule sets only padding, colour and size — so the row inherited Bootstrap's grey pill, rounded corners and 20px bottom margin on top of the design. */ .hp-about-page .entry-content .breadcrumb { margin-bottom: 0; background-color: transparent; border-radius: 0; } /* Columns: stop float/percentage sizing so the design's grid decides */ .hp-about-page .entry-content .vc_column_container { float: none; padding-left: 0; padding-right: 0; } /* columns that aren't acting as one of the design's own .container wrappers hand their sizing to the parent grid */ .hp-about-page .entry-content .vc_column_container:not(.container) { width: auto; } /* The two structural wrappers become layout-transparent, so a column's real content becomes the direct child the design's CSS expects */ .hp-about-page .entry-content .vc_column-inner, .hp-about-page .entry-content .vc_column_container > .vc_column-inner > .wpb_wrapper { display: contents; } /* Single Image: collapse the figure/wrapper chrome so the lands where the design expects it rather than the wrappers becoming the grid/flex items. Scoped to the places the design wants a bare — the product grid deliberately keeps its wrapper as the square frame (see .product-card-img in the adapter). */ .hp-about-page .entry-content .hero-image .wpb_single_image, .hp-about-page .entry-content .hero-image .vc_figure, .hp-about-page .entry-content .hero-image .vc_single_image-wrapper, .hp-about-page .entry-content .lifestyle-card .wpb_single_image, .hp-about-page .entry-content .lifestyle-card .vc_figure, .hp-about-page .entry-content .lifestyle-card .vc_single_image-wrapper { display: contents; } /* Text Block is used wherever the design has a bare block of markup */ .hp-about-page .entry-content .wpb_text_column, .hp-about-page .entry-content .wpb_text_column > .wpb_wrapper { display: contents; } /* The "View all" link is a bare 13px flex item in the design; here it sits in a column whose own 16px strut made the flex item 24.8px tall instead of 20.15px — visible once the heading row stacks. Giving the column the link's font-size matches the line box. (Collapsing the column with `display: contents` instead would promote WPBakery's template whitespace to flex items and add a whole extra row.) */ .hp-about-page .entry-content .section-heading-link { font-size: 13px; } /* Button element: the design styles the itself via .button */ .hp-about-page .entry-content .vc_btn3-container { display: contents; } /* WPBakery's default element spacing — the design sets its own */ .hp-about-page .entry-content .wpb_content_element { margin-bottom: 0; } /* ==================================================================== Adapter — direct-child rules restated for WPBakery's DOM -------------------------------------------------------------------- `display: contents` fixes LAYOUT, but it does not change SELECTOR matching: the design's `X > Y` rules still can't see through `.vc_column-inner > .wpb_wrapper`. Each rule below restates one of those, with its declarations copied verbatim from styles.css. Relative specificity is preserved: every selector here gains the same two scope classes as the ported sheet, so rules that beat each other in the original still beat each other here (e.g. `.hero-copy > p` overriding `.hero-positioning`, while `.hero-copy .hero-lead` in turn overrides `.hero-copy > p`). ==================================================================== */ /* WPBakery's Text Block runs wpautop on its own content and leaves empty

elements behind — one landed inside every .value-list article, where it became a flex item and ate a 15px gap, shifting the text across. The autop call is hard-coded in the shortcode template and the parent theme's vc_set_as_theme() pins WPBakery's template dir to the parent, so a child-theme override never loads. Dropping the empties out of layout gets the same result without duplicating parent templates. */ .hp-about-page .entry-content p:empty { display: none; } /* Pangja forces headings to #3f3f3f; the design lets them inherit (--hp-ink on the page, #fff inside the lifestyle cards). */ .hp-about-page .entry-content h1, .hp-about-page .entry-content h2, .hp-about-page .entry-content h3, .hp-about-page .entry-content h4 { color: inherit; line-height: inherit; } /* .hero-copy > p */ .hp-about-page .entry-content .hero-copy p { max-width: 570px; color: var(--hp-muted); font-size: 16px; line-height: 1.7; } /* .hero-positioning + .hero-lead — the two paragraphs sit in separate Text Blocks, so they are not DOM siblings and the adjacent combinator can't match. (Margin collapsing hides this today; restated so the design's spacing doesn't depend on that coincidence.) */ .hp-about-page .entry-content .hero-lead { margin-top: 0; } /* .network-copy > p — only the section's intro paragraph. As a descendant selector this also caught the

inside every .value-list article and gave them the intro's 1.75 line-height, so it targets the class the generator puts on that one paragraph instead. */ .hp-about-page .entry-content .network-intro { color: var(--hp-muted); line-height: 1.75; } /* .lifestyle-heading > p — the intro beside the section heading. It sits in its own column, so the direct-child selector missed it and the paragraph ran full width at the wrong line-height. */ .hp-about-page .entry-content .lifestyle-heading p, .hp-about-page .entry-content .lifestyle-heading-intro { max-width: 470px; } /* In the design the

is the flex item, and because its max-content (1000px) exceeds its 470px cap, flexbox freezes it at 470 and the heading absorbs all the shrink. Here the column is the flex item and its max-content is already the capped 470, so it isn't frozen and the two halves shrank evenly instead (227/466 in the design vs 353/340 here). Freezing it restores the split. */ .hp-about-page .entry-content .lifestyle-heading-intro { flex-shrink: 0; } .hp-about-page .entry-content .lifestyle-heading p { color: var(--hp-muted); line-height: 1.7; } /* .section-heading-row > a */ .hp-about-page .entry-content .section-heading-row a { color: var(--hp-teal-dark); font-size: 13px; font-weight: 700; text-transform: uppercase; } /* .product-card > div — the square image frame. The Single Image element's own wrapper plays that part, so it must NOT be collapsed. */ .hp-about-page .entry-content .product-card-img { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--hp-border); border-radius: 8px; } .hp-about-page .entry-content .product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } /* The card's trailing is the only loose inline left at the top level of its Text Block, so wpautop wraps it in a

— a block box the design doesn't have, which made every product card 25px taller. Drop the wrapper out of layout; the anchor itself is styled by the rule below. */ .hp-about-page .entry-content .product-card p:not(:empty) { display: contents; } /* .product-card > a */ .hp-about-page .entry-content .product-card a { color: var(--hp-teal-dark); font-size: 12px; font-weight: 700; text-transform: uppercase; } /* .process-inner > h2 / > .eyebrow */ .hp-about-page .entry-content .process-inner h2 { margin-inline: auto; } .hp-about-page .entry-content .process-inner .eyebrow { display: block; } /* .lifestyle-card > div — the caption overlay. In the design this is a bare

; here it is the caption Text Block's inner
. */ .hp-about-page .entry-content .lifestyle-card-cap > .wpb_wrapper > div, .hp-about-page .entry-content .lifestyle-card-cap > div { position: absolute; z-index: 2; left: 26px; right: 26px; bottom: 24px; color: #fff; } /* …and stop the same rule from catching WPBakery's own column wrapper */ .hp-about-page .entry-content .lifestyle-card > .vc_column-inner { position: static; }