/* ========================================================= TECNICHKOS DIGITAL SOLUTIONS V8.3 Slots 37-42 ========================================================= */ /* ========================================================= DIGITAL PHOTO CARDS ========================================================= */ body.digital-v83 .digital-photo-card { position: relative; min-height: 420px; padding: 226px 34px 32px !important; overflow: hidden; border: 1px solid rgba(12,36,54,.09); border-radius: 22px; background: #ffffff; box-shadow: 0 12px 38px rgba(7,24,39,.055); transition: transform .23s ease, box-shadow .23s ease, border-color .23s ease; } /* --------------------------------------------------------- IMAGE AREA --------------------------------------------------------- */ body.digital-v83 .digital-photo-card::before { content: ""; display: block; position: absolute; z-index: 0; top: 0; left: 0; right: 0; width: 100%; height: 205px; border-radius: 21px 21px 0 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform .45s ease, filter .28s ease; pointer-events: none; } /* --------------------------------------------------------- IMAGE -> CONTENT FADE --------------------------------------------------------- */ body.digital-v83 .digital-photo-card::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 157px; height: 60px; background: linear-gradient( to bottom, rgba(255,255,255,0), #ffffff 92% ); pointer-events: none; } body.digital-v83 .digital-photo-card > * { position: relative; z-index: 2; } /* ========================================================= 37 WEB DESIGN ========================================================= */ body.digital-v83 .digital-photo-card:nth-child(1)::before { background-image: var( --digital-slot-37, radial-gradient( circle at 74% 30%, rgba(244,122,32,.34), transparent 24% ), linear-gradient( 145deg, #071827, #17445d, #eef3f5 ) ); } /* ========================================================= 38 SEO ========================================================= */ body.digital-v83 .digital-photo-card:nth-child(2)::before { background-image: var( --digital-slot-38, repeating-linear-gradient( 0deg, rgba(255,255,255,.09) 0 1px, transparent 1px 20px ), linear-gradient( 145deg, #0a2030, #1e5069 ) ); } /* ========================================================= 39 DIGITAL MARKETING ========================================================= */ body.digital-v83 .digital-photo-card:nth-child(3)::before { background-image: var( --digital-slot-39, radial-gradient( circle at 35% 45%, rgba(244,122,32,.50), transparent 19% ), linear-gradient( 145deg, #071827, #244b5e ) ); } /* ========================================================= 40 CUSTOM SOFTWARE ========================================================= */ body.digital-v83 .digital-photo-card:nth-child(4)::before { background-image: var( --digital-slot-40, repeating-linear-gradient( 90deg, rgba(244,122,32,.13) 0 2px, transparent 2px 24px ), linear-gradient( 145deg, #081a28, #1c445a ) ); } /* ========================================================= 41 BUSINESS PLATFORMS ========================================================= */ body.digital-v83 .digital-photo-card:nth-child(5)::before { background-image: var( --digital-slot-41, radial-gradient( circle at 75% 25%, rgba(244,122,32,.30), transparent 22% ), linear-gradient( 145deg, #071827, #31546a ) ); } /* ========================================================= 42 HOSTING / CLOUD ========================================================= */ body.digital-v83 .digital-photo-card:nth-child(6)::before { background-image: var( --digital-slot-42, radial-gradient( ellipse at center, rgba(255,255,255,.18), transparent 36% ), linear-gradient( 145deg, #051522, #173c53 ) ); } /* ========================================================= REMOVE OLD NUMBER BADGES ========================================================= */ body.digital-v83 .digital-photo-card .card-number, body.digital-v83 .digital-photo-card [class*="card-number"] { display: none !important; } /* Generic small-number element used by older cards */ body.digital-v83 .digital-photo-card > span:first-child { display: none !important; } /* ========================================================= TYPOGRAPHY / ACCENT ========================================================= */ body.digital-v83 .digital-photo-card h3 { margin-top: 0; font-size: clamp(21px, 1.7vw, 25px); } body.digital-v83 .digital-photo-card h3::before { content: ""; display: block; width: 34px; height: 3px; margin-bottom: 14px; border-radius: 999px; background: #f47a20; } body.digital-v83 .digital-photo-card p { color: #627181; line-height: 1.68; } /* ========================================================= HOVER ========================================================= */ @media (hover:hover) { body.digital-v83 .digital-photo-card:hover { transform: translateY(-7px); border-color: rgba(244,122,32,.24); box-shadow: 0 28px 65px rgba(7,24,39,.13); } body.digital-v83 .digital-photo-card:hover::before { transform: scale(1.045); filter: saturate(1.06) brightness(1.025); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 980px) { body.digital-v83 .digital-photo-card { min-height: 390px; padding: 210px 27px 28px !important; } body.digital-v83 .digital-photo-card::before { height: 188px; } body.digital-v83 .digital-photo-card::after { top: 142px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 680px) { body.digital-v83 .digital-photo-card { min-height: 365px; padding: 203px 23px 26px !important; border-radius: 18px; } body.digital-v83 .digital-photo-card::before { height: 182px; border-radius: 17px 17px 0 0; } body.digital-v83 .digital-photo-card::after { top: 137px; height: 53px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { body.digital-v83 .digital-photo-card, body.digital-v83 .digital-photo-card::before { transition: none !important; } } /* === DIGITAL V8.3.1 VISIBILITY FIX START === */ /* * V8 base .card::before uses opacity:0 and turns it on * on hover. Digital V8.3 uses the same pseudo-element * for its image, so the image must explicitly stay visible. */ body.digital-v83 .digital-photo-card::before { opacity: 1 !important; visibility: visible !important; display: block !important; transform: scale(1) !important; transition: transform .45s ease, filter .28s ease, opacity .2s ease !important; } /* * Hover only zooms the already-visible image. */ @media (hover:hover) { body.digital-v83 .digital-photo-card:hover::before { opacity: 1 !important; visibility: visible !important; transform: scale(1.045) !important; filter: saturate(1.06) brightness(1.025); } } /* * Preserve visibility on touch/mobile devices. */ @media (hover:none) { body.digital-v83 .digital-photo-card::before { opacity: 1 !important; visibility: visible !important; transform: none !important; } } /* === DIGITAL V8.3.1 VISIBILITY FIX END === */