/*===========================CSS reference ONLY/=========================== /* ---------------------------------------------------- */ /* --- 1. Generic Base Styles for ALL STATIC-DACCARDS --- */ /* This applies to the cards' base size, border, etc. */ /* ---------------------------------------------------- */ .static-daccard { position: relative; width: 220px; height: 300px; /* REMOVED background-image from here. It is now on flip-card-front or specific bg-classes for non-flip cards. */ background-size: cover; /* Still apply sizing/positioning properties */ background-position: center; /* Still apply sizing/positioning properties */ border-radius: 0px; /* Or 8px if you prefer rounded corners on all cards */ cursor: pointer; color: white; /* Default text color */ overflow: hidden; /* Ensures contents respect border-radius */ border: 2px solid rgba(40, 50, 40, 0.8); /* Subtle dark green-tinted border */ transition: border-color 0.8s ease; /* Smooth transition for border fade */ } /* ---------------------------------------------------- */ /* --- 2. Generic Overlay Styles for daccard-overlay --- */ /* This creates the modern metallic bottom bar, used by STATIC & FLIP cards */ /* ---------------------------------------------------- */ .daccard-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 25%; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4)); display: flex; justify-content: center; align-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.15), inset 0 -2px 5px rgba(0, 0, 0, 0.4), 0 0 10px rgba(76, 175, 80, 0.3), 0 2px 5px rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.2); color: white; padding: 5px 12px; box-sizing: border-box; z-index: 1; /* Ensures overlay is on top of face background */ } /* ---------------------------------------------------- */ /* --- 3. Generic Heading Styles for daccard-heading --- */ /* This styles the text inside the overlay */ /* ---------------------------------------------------- */ .daccard-heading { /* Dynamic font size: Fine-tune these values (min, preferred/vw, max) */ /* to get the best visual fit for your varying text lengths and desired wrapping. */ font-size: clamp(0.8em, 4.5vw, 1.4em); /* Slightly adjusted values for better multi-line fit */ text-transform: capitalize; font-weight: 700; margin: 0; text-align: center; color: inherit; /* Inherit color from .daccard-overlay (white) */ white-space: normal; /* Allows text to wrap */ overflow: visible; /* Allows content to be visible (no clipping) */ text-overflow: clip; /* No ellipsis when wrapping */ /* Removed max-width: 75%; to allow text to use more available width before wrapping */ line-height: 1.1; /* Slightly tighter line spacing for multi-line text */ } /* ---------------------------------------------------- */ /* --- 4. UNIQUE BACKGROUND IMAGES (FOR NON-FLIP CARDS) --- */ /* For flip cards, background images are set via inline style on flip-card-front/back */ /* ---------------------------------------------------- */ .bg-demo-daccard { /* Example for a static card with this background */ background-image: url('https://denverairconnection.com/wp-content/uploads/2022/01/dac_hero_homepage-1.png'); } .bg-alliance-nebraska { /* For "Alliance Nebraska" static card */ background-image: url('https://denverairconnection.com/wp-content/uploads/2021/02/fleet3.png'); } .bg-ironwood-michigan { /* For Ironwood Michigan static card */ background-image: url('https://kevintadlock.net/wp-content/uploads/2025/06/ironwood-downtown.png'); } .bg-alamosa-colorado { /* Example for Alamosa Colorado static card */ background-image: url('https://kevintadlock.net/wp-content/uploads/2025/06/bg-alamosa-colorado.jpg'); } /* ---------------------------------------------------- */ /* --- 5. FLIP CARD SPECIFIC STYLES --- */ /* These styles enable and control the 3D flip animation */ /* ---------------------------------------------------- */ .flip-card-container { perspective: 1000px; /* Gives a 3D space for the flip */ } /* Make the border transparent on hover of the flip card container */ .flip-card-container:hover.static-daccard { /* Apply to the static-daccard when flip-container is hovered */ border-color: transparent; } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; /* Smooth transition for the flip */ transform-style: preserve-3d; /* Necessary for the 3D flip effect */ border-radius: 0px; /* Ensure no rounding on the inner element */ } .flip-card-container:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Hide the back face initially for Safari */ backface-visibility: hidden; /* Hide the back face initially */ background-size: cover; /* Apply background sizing to the faces */ background-position: center; /* Apply background positioning to the faces */ border: none; /* Ensure no border applies directly to the flipping faces */ border-radius: 0px; /* Ensure no rounding on the faces */ } .flip-card-front { z-index: 2; /* Ensures front is visible initially */ transform: rotateY(0.001deg); /* Subtle transform to help with backface-visibility rendering */ } .flip-card-back { transform: rotateY(180deg); /* Rotate the back face to be hidden initially */ background-color: #333; /* Fallback background for back face */ } /* Ensure overlay is positioned correctly on both front and back faces of flip cards */ .flip-card-front .daccard-overlay, .flip-card-back .daccard-overlay { z-index: 1; /* Keep overlay on top of face background */ background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4)); /* Apply consistent overlay style */ } ===========================CSS reference ONLY/===========================*/