too but shouldn't inherit the 96px top/bottom rule used for page sections. */ .letter-section { padding: 0; scroll-margin-top: 140px; } .letter-section h3 { display: flex; align-items: baseline; gap: 14px; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 16px; color: var(--ink); padding-bottom: 12px; border-bottom: 2px solid var(--line); position: relative; } .letter-section h3::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 60px; height: 2px; background: linear-gradient(90deg, var(--pcb), var(--pcb-bright)); } .letter-section h3 .letter { font-size: 2.4rem; background: linear-gradient(135deg, var(--pcb-deep), var(--pcb-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; font-weight: 900; } .letter-section h3 .count { font-size: 0.82rem; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; margin-left: auto; } /* ===== COMPACT BRAND PILLS ===== */ .brand-pills { display: flex; flex-wrap: wrap; gap: 8px; } .brand-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 0.82rem; font-weight: 500; color: var(--ink-2); transition: all .15s var(--ease); cursor: default; white-space: nowrap; } .brand-pill:hover { background: var(--pcb-mint); color: var(--pcb-deep); border-color: var(--pcb-bright); transform: translateY(-1px); box-shadow: var(--shadow-xs); } .brand-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pcb); flex-shrink: 0; opacity: 0.5; } .brand-pill:hover .dot { opacity: 1; } .brand-pill mark { background: var(--amber-soft); color: var(--ink); padding: 0 2px; border-radius: 3px; } /* Search-results mode: flat grid, no letter sections */ .brand-search-results .brand-pills { margin-top: 0; } /* Empty state */ .brand-empty { text-align: center; padding: 60px 24px; color: var(--muted); background: var(--white); border: 1px dashed var(--line); border-radius: var(--r-lg); } .brand-empty strong { color: var(--ink); font-size: 1.05rem; display: block; margin-bottom: 6px; } @media (max-width: 720px) { .alphabet-index { top: 70px; padding: 6px 8px; } .alphabet-index a { width: 28px; height: 28px; font-size: 0.76rem; } .letter-section h3 { font-size: 1.3rem; } .letter-section h3 .letter { font-size: 1.9rem; } } /* ===== VISION CARD ===== */ .vision-card { background: linear-gradient(135deg, var(--ink), var(--pcb-deep)); color: var(--white); padding: 72px 56px; border-radius: var(--r-xl); text-align: center; position: relative; overflow: hidden; } .vision-card::before { content: '"'; position: absolute; top: -40px; left: 32px; font-size: 14rem; color: rgba(255,255,255,0.06); font-family: Georgia, serif; line-height: 1; } .vision-card::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%); } .vision-card > * { position: relative; } .vision-card .eyebrow { background: rgba(255,255,255,0.12); color: var(--white); } .vision-card p { font-size: clamp(1.18rem, 2.2vw, 1.6rem); font-weight: 500; line-height: 1.45; max-width: 880px; margin: 20px auto 0; letter-spacing: -0.01em; } /* ===== CONTACT ===== */ .contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 36px; align-items: start; } .contact-info { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px; box-shadow: var(--shadow-sm); } .info-row { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); } .info-row:last-child { border-bottom: none; } .info-row .icon { width: 44px; height: 44px; border-radius: 12px; background: var(--pcb-light); color: var(--pcb-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .info-row .label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; margin-bottom: 2px; } .info-row .value { color: var(--ink); font-weight: 500; word-break: break-word; line-height: 1.5; } .contact-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px; box-shadow: var(--shadow-sm); } .contact-form h3 { margin-bottom: 22px; color: var(--ink); font-size: 1.3rem; letter-spacing: -0.01em; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field label { font-size: 0.84rem; font-weight: 600; color: var(--ink); } .field input, .field textarea, .field select { padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--r-sm); font-family: inherit; font-size: 0.94rem; background: var(--white); transition: all .15s var(--ease); color: var(--ink); } .field textarea { resize: vertical; min-height: 130px; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--pcb); box-shadow: 0 0 0 4px rgba(116, 195, 101, 0.18); } .form-success { background: var(--pcb-light); color: var(--pcb-deep); padding: 14px 16px; border-radius: var(--r-sm); margin-top: 14px; font-weight: 600; display: none; font-size: 0.92rem; } .form-success.show { display: block; } .form-success.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } /* ===== INLINE FIELD VALIDATION ===== */ .field-hint { font-size: 0.78rem; color: var(--muted); margin-top: 2px; display: block; transition: opacity .2s var(--ease); } .field-error { font-size: 0.78rem; color: #b91c1c; font-weight: 600; margin-top: 2px; display: none; align-items: center; gap: 6px; } .field-error::before { content: '⚠'; font-size: 0.92rem; } .field.error input, .field.error textarea, .field.error select { border-color: #f87171; background: #fef9f9; box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.10); } .field.error input:focus, .field.error textarea:focus, .field.error select:focus { box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.18); } .field.error .field-hint { display: none; } .field.error .field-error { display: flex; } .field.valid input:not(:placeholder-shown), .field.valid textarea:not(:placeholder-shown) { border-color: var(--pcb-bright); } /* ===== SUBMIT BUTTON STATES ===== */ #submitBtn .btn-spinner { display: none; animation: spin 0.7s linear infinite; } #submitBtn.loading .btn-label { opacity: 0.85; } #submitBtn.loading .btn-arrow { display: none; } #submitBtn.loading .btn-spinner { display: inline-block; } #submitBtn[disabled] { opacity: 0.85; cursor: not-allowed; pointer-events: none; } @keyframes spin { to { transform: rotate(360deg); } } /* ===== CTA BANNER ===== */ .cta-banner { background: linear-gradient(135deg, var(--ink), var(--pcb-deep)); color: var(--white); padding: 64px 48px; border-radius: var(--r-xl); display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; position: relative; overflow: hidden; } .cta-banner::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at right, black 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at right, black 0%, transparent 80%); } .cta-banner::after { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; top: -120px; right: -80px; background: radial-gradient(circle, rgba(149, 212, 136, 0.35), transparent 70%); filter: blur(40px); } .cta-banner > * { position: relative; } .cta-banner h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 8px; letter-spacing: -0.015em; line-height: 1.15; } .cta-banner p { color: rgba(255,255,255,0.78); max-width: 540px; font-size: 1rem; } /* z-index puts the button above the fixed floating WhatsApp/quote buttons (z-index 60) so clicks always register on the CTA even on viewport widths where they visually overlap. */ .cta-banner .cta-btn { background: var(--gold); color: var(--ink) !important; box-shadow: 0 8px 24px rgba(245, 180, 0, 0.32); position: relative; z-index: 70; } .cta-banner .cta-btn:hover { background: #ffc933; color: var(--ink) !important; } /* Stack vertically on common desktop widths so the right-aligned CTA button isn't covered by the bottom-right floating WhatsApp button. Above 1280px the viewport is wide enough that overlap can't happen. */ @media (max-width: 1280px) { .cta-banner { flex-direction: column; align-items: flex-start; gap: 22px; } } /* ===== PRODUCTS PAGE — sidebar layout ===== */ .products-layout { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start; } .segment-jump { position: sticky; top: 92px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; max-height: calc(100vh - 110px); overflow-y: auto; box-shadow: var(--shadow-sm); } .segment-jump h4 { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; padding: 0 10px; } .segment-jump a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); font-size: 0.88rem; color: var(--ink-2); font-weight: 500; } .segment-jump a span { font-size: 1.05rem; } .segment-jump a:hover { background: var(--pcb-mint); color: var(--pcb-deep); } /* ===== INDUSTRIES ===== */ .industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .industry-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; transition: all .25s var(--ease); } .industry-card:hover { transform: translateY(-4px); border-color: var(--pcb-bright); box-shadow: var(--shadow); } .industry-card .ic { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, var(--pcb), var(--pcb-bright)); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; margin-bottom: 18px; box-shadow: 0 8px 20px rgba(116, 195, 101, 0.3); transition: transform .35s var(--ease-back); } .industry-card:hover .ic { transform: translateY(-4px) rotate(-8deg) scale(1.08); } .industry-card h3 { font-size: 1.18rem; margin-bottom: 10px; letter-spacing: -0.01em; } .industry-card p { color: var(--muted); font-size: 0.95rem; margin-bottom: 14px; line-height: 1.6; } .industry-card ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .industry-card ul li { font-size: 0.74rem; background: var(--pcb-mint); color: var(--pcb-deep); padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line); font-weight: 600; } /* ===== SERVICES ===== */ .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .service-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px; display: grid; grid-template-columns: 68px 1fr; gap: 24px; transition: all .25s var(--ease); } .service-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--pcb-bright); } .service-card .ic { width: 68px; height: 68px; border-radius: 18px; background: var(--pcb-light); color: var(--pcb-deep); display: flex; align-items: center; justify-content: center; font-size: 1.9rem; flex-shrink: 0; transition: transform .35s var(--ease-back), background .25s var(--ease); } .service-card:hover .ic { background: linear-gradient(135deg, var(--pcb), var(--pcb-bright)); color: var(--white); transform: rotate(-8deg) scale(1.1); } .service-card h3 { font-size: 1.2rem; margin-bottom: 8px; letter-spacing: -0.01em; } .service-card p { color: var(--muted); font-size: 0.96rem; margin-bottom: 14px; line-height: 1.6; } .service-card ul { padding-left: 20px; color: var(--muted); font-size: 0.92rem; line-height: 1.8; } /* ===== PROCESS STEPS ===== */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; position: relative; } .step { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 26px 26px; position: relative; counter-increment: step; transition: all .25s var(--ease); } .step:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--pcb-bright); } .step::before { content: counter(step, decimal-leading-zero); position: absolute; top: -18px; left: 26px; background: linear-gradient(135deg, var(--pcb-deep), var(--pcb-dark)); color: var(--white); font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: var(--r-pill); letter-spacing: 0.05em; box-shadow: 0 6px 14px rgba(61, 122, 50, 0.28); } .step h4 { font-size: 1.05rem; margin-bottom: 8px; margin-top: 8px; letter-spacing: -0.005em; } .step p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; } /* ===== IMAGE-FAILED FALLBACK ===== When an external image (Unsplash) fails to load, JS hides the and adds .img-failed to the parent. The container's gradient background remains visible plus a subtle pattern, so the layout never shows a broken icon. */ .split-media.img-failed, .industry-tile.img-failed, .photo-service .ps-media.img-failed { position: relative; } .split-media.img-failed::before, .industry-tile.img-failed::before, .photo-service .ps-media.img-failed::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 28px 28px; z-index: 0; } /* ===== ABOUT SPLIT (image left, text right) ===== */ .split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; } .split.flip { grid-template-columns: 1.05fr 1fr; } .split.flip .split-media { order: 2; } .split-media { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); background: linear-gradient(135deg, var(--pcb-deep), var(--pcb-dark)); aspect-ratio: 4 / 3; } .split-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .split-media:hover img { transform: scale(1.04); } .split-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(13, 31, 21, 0.18)); pointer-events: none; } .split-media .badge-float { position: absolute; bottom: 22px; left: 22px; right: 22px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--r); padding: 18px 22px; display: flex; gap: 16px; align-items: center; z-index: 2; box-shadow: var(--shadow); } .split-media .badge-float .ic { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--pcb), var(--pcb-bright)); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } .split-media .badge-float .text { line-height: 1.25; } .split-media .badge-float .num { font-weight: 800; font-size: 1.05rem; color: var(--ink); } .split-media .badge-float .lbl { font-size: 0.78rem; color: var(--muted); font-weight: 600; } .split-content .eyebrow { margin-bottom: 16px; } .split-content h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); margin-bottom: 18px; } .split-content h2 .accent { background: linear-gradient(135deg, var(--pcb-deep), var(--pcb-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; } .split-content p { color: var(--muted); font-size: 1.04rem; line-height: 1.65; margin-bottom: 16px; } .split-content .bullet-list { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 12px; } .split-content .bullet-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.96rem; color: var(--ink-2); } .split-content .bullet-list li::before { content: '✓'; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--pcb-light); color: var(--pcb-deep); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; margin-top: 2px; } /* ===== SERVICES WITH PHOTO CARDS ===== */ .photo-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .photo-service { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: all .3s var(--ease); display: flex; flex-direction: column; } .photo-service:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--pcb-bright); } .photo-service .ps-media { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--pcb-deep), var(--pcb)); overflow: hidden; } .photo-service .ps-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .photo-service:hover .ps-media img { transform: scale(1.06); } .photo-service .ps-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(13, 31, 21, 0.55)); } .photo-service .ps-ic { position: absolute; bottom: 16px; left: 16px; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.95); color: var(--pcb-deep); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; z-index: 2; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .35s var(--ease-back); } .photo-service:hover .ps-ic { transform: scale(1.1) rotate(-6deg); } .photo-service .ps-body { padding: 24px 24px 26px; flex-grow: 1; display: flex; flex-direction: column; } .photo-service h3 { font-size: 1.1rem; margin-bottom: 8px; letter-spacing: -0.01em; color: var(--ink); } .photo-service p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; margin-bottom: 16px; flex-grow: 1; } .photo-service .ps-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--pcb-deep); margin-top: auto; transition: gap .2s var(--ease); } .photo-service .ps-link:hover { gap: 10px; color: var(--pcb); } /* ===== GALLERY GRID (3-image showcase) ===== */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .gallery-item { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(135deg, var(--pcb-deep), var(--pcb)); box-shadow: var(--shadow-sm); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .gallery-item:hover img { transform: scale(1.08); } .gallery-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(13, 31, 21, 0.55)); opacity: 0; transition: opacity .3s var(--ease); } .gallery-item:hover::after { opacity: 1; } .gallery-item .gi-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 18px; color: var(--white); font-weight: 600; font-size: 0.92rem; letter-spacing: -0.005em; transform: translateY(8px); opacity: 0; transition: opacity .25s var(--ease), transform .25s var(--ease); z-index: 1; } .gallery-item:hover .gi-cap { opacity: 1; transform: translateY(0); } .gallery-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .gallery-grid.cols-4 .gallery-item { aspect-ratio: 4 / 3; } @media (max-width: 960px) { .gallery-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-grid.cols-4 { grid-template-columns: repeat(2, 1fr); gap: 8px; } } /* ===== SERVICE TILES (Voltra-style, image-dominant) ===== Full-bleed image, icon overlay top-left, title + description + link at bottom. The whole tile is a single click target. */ .service-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .service-tile { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(135deg, var(--pcb-deep), var(--pcb)); display: block; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .service-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .service-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .service-tile:hover img { transform: scale(1.06); } .service-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 31, 21, 0.15) 0%, rgba(13, 31, 21, 0.55) 55%, rgba(13, 31, 21, 0.92) 100%); z-index: 1; transition: opacity .3s var(--ease); } .service-tile .st-ic { position: absolute; top: 20px; left: 20px; width: 50px; height: 50px; background: rgba(255, 255, 255, 0.95); color: var(--pcb-deep); display: flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 1.4rem; z-index: 2; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: transform .35s var(--ease-back); } .service-tile:hover .st-ic { transform: scale(1.1) rotate(-6deg); } .service-tile .st-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 26px 26px 24px; z-index: 2; color: var(--white); } .service-tile h3 { color: var(--white); font-size: 1.25rem; margin-bottom: 8px; letter-spacing: -0.01em; line-height: 1.2; } .service-tile p { color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; line-height: 1.55; margin-bottom: 14px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s var(--ease), opacity .25s var(--ease), margin-bottom .35s var(--ease); } .service-tile:hover p { max-height: 100px; opacity: 1; } .service-tile .st-link { display: inline-flex; align-items: center; gap: 6px; color: var(--pcb-bright); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.02em; text-transform: uppercase; transition: gap .2s var(--ease); } .service-tile:hover .st-link { gap: 10px; color: var(--white); } @media (max-width: 960px) { .service-tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .service-tiles { grid-template-columns: 1fr; } .service-tile { aspect-ratio: 5 / 4; } } /* ===== INDUSTRY PHOTO TILES ===== */ .industry-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .industry-tile { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(135deg, var(--pcb-deep), var(--pcb)); cursor: default; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .industry-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .industry-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .industry-tile:hover img { transform: scale(1.08); } .industry-tile::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(13, 31, 21, 0.75) 95%); z-index: 1; } .industry-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(116, 195, 101, 0) 0%, rgba(116, 195, 101, 0) 60%, rgba(116, 195, 101, 0.5) 100%); z-index: 1; opacity: 0; transition: opacity .3s var(--ease); } .industry-tile:hover::after { opacity: 1; } .industry-tile .it-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; z-index: 2; color: var(--white); } .industry-tile .it-ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(255, 255, 255, 0.95); color: var(--pcb-deep); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 12px; backdrop-filter: blur(6px); } .industry-tile h3 { font-size: 1.18rem; margin-bottom: 6px; letter-spacing: -0.01em; color: var(--white); } .industry-tile p { font-size: 0.86rem; color: rgba(255, 255, 255, 0.85); line-height: 1.5; } .industry-tile .it-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; } .industry-tile .it-tags span { background: rgba(255, 255, 255, 0.18); color: var(--white); padding: 3px 10px; border-radius: var(--r-pill); font-size: 0.7rem; font-weight: 600; backdrop-filter: blur(4px); } /* ===== HERO BACKDROP IMAGE ===== */ .hero.with-image { background: linear-gradient(135deg, rgba(13, 31, 21, 0.78) 0%, rgba(61, 122, 50, 0.55) 100%), var(--bg-2); color: var(--white); } .hero.with-image::before { opacity: 0.45; } .hero.with-image .eyebrow-pill { background: rgba(255, 255, 255, 0.95); } .hero.with-image h1, .hero.with-image .accent { color: var(--white); -webkit-text-fill-color: var(--white); background: none; } .hero.with-image .accent { background: linear-gradient(135deg, var(--pcb-bright), var(--gold)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } .hero.with-image p.lead { color: rgba(255, 255, 255, 0.88); } .hero.with-image .hero-meta .item { color: rgba(255, 255, 255, 0.85); } .hero.with-image .hero-meta .item svg { color: var(--pcb-bright); } /* ===== FAQ ACCORDION ===== */ .faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: border-color .2s var(--ease), box-shadow .25s var(--ease); } .faq-item:hover { border-color: var(--pcb-bright); } .faq-item[open] { border-color: var(--pcb); box-shadow: var(--shadow-sm); } .faq-item summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 600; font-size: 1rem; color: var(--ink); letter-spacing: -0.005em; transition: color .15s var(--ease); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; width: 32px; height: 32px; border-radius: 50%; background: var(--pcb-light); color: var(--pcb-deep); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 600; flex-shrink: 0; transition: transform .25s var(--ease), background .2s var(--ease); } .faq-item[open] summary::after { content: '−'; background: var(--pcb-deep); color: var(--white); transform: rotate(180deg); } .faq-item summary:hover { color: var(--pcb-deep); } .faq-body { padding: 0 24px 22px; color: var(--muted); font-size: 0.95rem; line-height: 1.65; animation: faqIn .25s var(--ease); } @keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ===== TESTIMONIALS ===== */ .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .testimonial { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px 32px 32px; position: relative; display: flex; flex-direction: column; transition: all .25s var(--ease); overflow: hidden; } .testimonial:hover { transform: translateY(-6px) rotate(-0.4deg); box-shadow: var(--shadow); border-color: var(--pcb-bright); } .testimonial:nth-child(2n):hover { transform: translateY(-6px) rotate(0.4deg); } .testimonial .avatar { transition: transform .35s var(--ease-back); } .testimonial:hover .avatar { transform: scale(1.1) rotate(6deg); } .testimonial::before { content: '"'; position: absolute; top: -4px; left: 20px; font-family: Georgia, serif; font-size: 6rem; line-height: 1; color: var(--pcb-light); font-weight: 700; } .testimonial .quote { position: relative; color: var(--ink-2); font-size: 1rem; line-height: 1.65; margin-bottom: 26px; flex-grow: 1; } .testimonial .author { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); } .testimonial .avatar { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--pcb-deep), var(--pcb-bright)); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.92rem; flex-shrink: 0; box-shadow: 0 4px 12px rgba(61, 122, 50, 0.28); } .testimonial .who { line-height: 1.35; } .testimonial .who .name { font-weight: 700; color: var(--ink); font-size: 0.94rem; } .testimonial .who .role { color: var(--muted); font-size: 0.82rem; } .testimonial .stars { color: var(--gold); font-size: 0.95rem; letter-spacing: 3px; margin-bottom: 14px; } /* ===== CONTACT HERO BANNER ===== */ .contact-hero-banner { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); background: linear-gradient(135deg, var(--pcb-deep), var(--pcb-dark)); position: relative; max-height: 460px; } .contact-hero-banner img { width: 100%; height: auto; display: block; max-height: 460px; object-fit: cover; transition: transform .6s var(--ease); } .contact-hero-banner:hover img { transform: scale(1.02); } /* ===== CONTACT TAGLINE ===== */ .contact-tagline { text-align: center; max-width: 760px; margin: 0 auto; } .contact-tagline h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); margin-bottom: 14px; } .contact-tagline h2 .accent { background: linear-gradient(135deg, var(--pcb-deep), var(--pcb-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; } .contact-tagline p { color: var(--muted); font-size: 1.05rem; line-height: 1.6; } /* ===== CONTACT INFO CARDS (4-column horizontal row) ===== */ .contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .contact-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 24px 28px; text-align: center; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); position: relative; overflow: hidden; } .contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--pcb-bright); } .contact-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pcb), var(--pcb-bright)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .contact-card:hover::after { transform: scaleX(1); } .contact-card .ic { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, var(--pcb), var(--pcb-bright)); color: var(--white); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; box-shadow: 0 8px 18px rgba(116, 195, 101, 0.32); transition: transform .35s var(--ease-back); } .contact-card:hover .ic { transform: rotate(-8deg) scale(1.1); } .contact-card .label { font-size: 0.74rem; color: var(--muted); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; } .contact-card .value { color: var(--ink); font-weight: 600; font-size: 0.96rem; line-height: 1.5; margin-bottom: 6px; word-break: break-word; } .contact-card .value a { color: var(--ink); transition: color .15s var(--ease); } .contact-card .value a:hover { color: var(--pcb-deep); } .contact-card .sub { color: var(--muted); font-size: 0.82rem; font-weight: 500; } .contact-card .sub a { color: var(--pcb-deep); font-weight: 600; } /* ===== CENTERED FORM LAYOUT ===== */ .contact-form-centered { max-width: 760px; margin: 0 auto; } /* Offset for #send-message scroll target so the sticky header doesn't cover it. */ #send-message { scroll-margin-top: 90px; } @media (max-width: 960px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .contact-cards { grid-template-columns: 1fr; } } /* ===== MAP ===== */ .map-wrap { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .map-wrap iframe { display: block; width: 100%; min-height: 420px; border: 0; } .map-link { display: block; text-align: center; padding: 16px 20px; font-size: 0.92rem; font-weight: 600; background: var(--pcb-mint); color: var(--pcb-deep); border-top: 1px solid var(--line); } .map-link:hover { background: var(--pcb-light); color: var(--pcb-deep); } /* ===== FLOATING WHATSAPP + SCROLL TOP + QUOTE CTA ===== */ .float-wa { position: fixed; right: 22px; bottom: 22px; background: #25d366; color: var(--white); width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(37, 211, 102, 0.42); z-index: 60; transition: transform .2s var(--ease-back); } .float-wa:hover { transform: scale(1.1); color: var(--white); } .float-quote { position: fixed; left: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--pcb-deep), var(--pcb-dark)); color: var(--white) !important; padding: 14px 22px 14px 18px; border-radius: var(--r-pill); font-weight: 700; font-size: 0.92rem; letter-spacing: -0.005em; box-shadow: 0 12px 28px rgba(61, 122, 50, 0.42); z-index: 60; transition: transform .2s var(--ease-back), box-shadow .25s var(--ease); text-decoration: none; } .float-quote:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(61, 122, 50, 0.50); color: var(--white) !important; } .float-quote .qb-ic { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; } @media (max-width: 540px) { .float-quote { padding: 12px 18px 12px 14px; font-size: 0.86rem; left: 16px; bottom: 16px; } .float-quote .qb-ic { width: 22px; height: 22px; font-size: 0.85rem; } .float-wa { right: 16px; bottom: 16px; width: 52px; height: 52px; } } .scroll-top { position: fixed; right: 22px; bottom: 90px; width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--ink); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(8px); transition: all .25s var(--ease); z-index: 60; } .scroll-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-top:hover { background: var(--pcb-mint); color: var(--pcb-deep); border-color: var(--pcb-bright); } /* Scroll progress bar */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--pcb), var(--pcb-bright)); width: 0%; z-index: 100; transition: width .1s linear; } /* ===== FOOTER ===== */ .site-footer { background: var(--ink); color: rgba(255,255,255,0.7); padding: 72px 0 28px; position: relative; overflow: hidden; } .site-footer::before { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; top: -300px; left: -200px; background: radial-gradient(circle, rgba(116, 195, 101, 0.10), transparent 70%); filter: blur(60px); pointer-events: none; } .site-footer > * { position: relative; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer-col h4 { color: var(--white); font-size: 0.92rem; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .footer-col a { color: rgba(255,255,255,0.65); display: block; padding: 5px 0; font-size: 0.92rem; transition: color .15s var(--ease); } .footer-col a:hover { color: var(--pcb-bright); } .footer-brand .brand-text .name { color: var(--white); } .footer-brand p { font-size: 0.94rem; margin-top: 14px; color: rgba(255,255,255,0.65); max-width: 340px; line-height: 1.6; } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.86rem; color: rgba(255,255,255,0.55); } .footer-credit { text-align: center; margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,0.08); font-size: 0.8rem; color: rgba(255,255,255,0.42); letter-spacing: 0.04em; } .footer-credit a { color: rgba(255,255,255,0.62); font-weight: 600; transition: color .15s var(--ease); } .footer-credit a:hover { color: var(--pcb-bright); } /* ===== 404 ===== */ .notfound { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 80px 24px; position: relative; } .notfound .code { font-size: clamp(6rem, 14vw, 11rem); font-weight: 800; background: linear-gradient(135deg, var(--pcb-deep), var(--pcb-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; letter-spacing: -0.05em; } .notfound h1 { font-size: 2rem; margin: 16px 0; letter-spacing: -0.02em; } .notfound p { color: var(--muted); max-width: 460px; margin: 0 auto 28px; } /* ===== RESPONSIVE ===== */ @media (max-width: 1100px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento-card.feature { grid-column: span 2; grid-row: span 1; } .bento-card.normal { grid-column: span 1; } .bento-card.wide { grid-column: span 2; } } @media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; gap: 48px; text-align: left; } .hero { padding: 72px 0 64px; } .hero-card { transform: rotate(0); max-width: 380px; margin: 0 auto; } .hero-float.tl, .hero-float.br { display: none; } .stats { grid-template-columns: repeat(2, 1fr); gap: 14px; } .split, .split.flip { grid-template-columns: 1fr; gap: 32px; } .split.flip .split-media { order: 0; } .photo-services { grid-template-columns: repeat(2, 1fr); } .industry-tiles { grid-template-columns: repeat(2, 1fr); } .industries-grid { grid-template-columns: repeat(2, 1fr); } .services-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: repeat(2, 1fr); } .testimonials-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .products-layout { grid-template-columns: 1fr; } .segment-jump { position: static; max-height: none; } section { padding: 72px 0; } .vision-card { padding: 56px 32px; } } @media (max-width: 720px) { .nav { display: none; position: absolute; top: 100%; left: 12px; right: 12px; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; gap: 0; box-shadow: var(--shadow-lg); margin-top: 8px; } .nav.open { display: flex; } .nav a { padding: 12px 14px; width: 100%; border-radius: var(--r-sm); } .nav-toggle { display: block; } .header-inner { position: relative; } .bento { grid-template-columns: 1fr; } .bento-card.feature, .bento-card.normal, .bento-card.wide { grid-column: span 1; } .industries-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .vision-card { padding: 44px 24px; } .cta-banner { padding: 40px 28px; flex-direction: column; align-items: flex-start; text-align: left; } section { padding: 56px 0; } .footer-grid { grid-template-columns: 1fr; } .service-card { grid-template-columns: 1fr; gap: 16px; padding: 28px; } .stat .num { font-size: 1.8rem; } .brand-text .tag { display: none; } .photo-services { grid-template-columns: 1fr; } .industry-tiles { grid-template-columns: 1fr; } .faq-item summary { padding: 16px 18px; font-size: 0.94rem; } .faq-body { padding: 0 18px 18px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }