/* styles for productsall.html - based on existing site styles */ :root { --gold: #d7ad53; --black: #000; --white: #fff; } html { scroll-behavior: smooth; margin: 0; padding: 0; overflow-x: hidden; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Montserrat', sans-serif; color: var(--black); background: var(--white); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } /* Header/navigation moved to header.css */ .portal-content h1{color: var(--gold); font-size: 2.4rem; margin: 0 0 0.25rem; text-align: center;margin-bottom: 2rem;margin-top: 2rem; } /* Shared product card styles (used by public and logged views) */ .product-list, .product-list-public, .product-list-logged { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; padding:1rem 0; } .product-card { background:var(--white); border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,0.1); width:260px; text-align:center; padding:1rem; min-width:220px; max-width:90vw; flex-shrink:0; margin:0 auto; cursor:pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; } .product-card img { width:100%; height:220px; object-fit:cover; border-radius:6px; display:block; } .product-card h3{ margin:0.75rem 0 0.5rem; font-size:1.1rem; } .product-card p { font-size:0.95rem; margin:0.25rem 0; color: #333; } .product-card:hover { transform: translateY(-6px); box-shadow:0 10px 24px rgba(0,0,0,0.12); } /* Public list (visible by default) */ .product-list-public { display:flex; } /* Logged-in detailed list (hidden by default) */ .product-list-logged { display:none; } /* Toggle when user is logged in: add class `logged` to the element */ body.logged .product-list-public { display:none; } body.logged .product-list-logged { display:flex; } /* Extra details shown only in logged view */ .product-card .extra-details { display:none; text-align:left; margin-top:0.5rem; font-size:0.95rem; color:#222; } body.logged .product-card .extra-details { display:block; } .product-card .meta { display:flex; justify-content:space-between; gap:0.5rem; margin-top:0.75rem; } .product-card .meta span { font-size:0.9rem; color:#666; } .product-card .actions { margin-top:0.75rem; display:flex; gap:0.5rem; justify-content:center; } .product-card .btn { background:var(--black); color:var(--white); padding:0.6rem 0.9rem; border-radius:6px; border:none; cursor:pointer; font-weight:600; text-decoration:none; } .product-card .btn.secondary { background:transparent; color:var(--black); border:1px solid #ccc; } /* Footer */ footer { display: flex; justify-content: space-between; align-items: center; background: var(--black); color: var(--white); padding: 2rem; flex-wrap: wrap; gap: 2rem; text-align: center; } .footer-left, .footer-center, .footer-nav { display: flex; flex-direction: column; gap: 0.75rem; } .footer-left p { margin: 0; font-size: 0.9rem; text-align: left; } .footer-center { align-items: center; } .footer-center .logo { max-width: 150px; height: auto; margin-bottom: 1rem; } .social-links { display: flex; gap: 1rem; } .social-links a { color: var(--white); transition: color 0.3s ease; display: inline-flex; } .social-links a:hover, .social-links a:focus { color: var(--gold); outline: none; } .social-links svg { width: 24px; height: 24px; fill: none; stroke: currentColor;} .footer-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; } .footer-nav ul li a { color: var(--white); text-decoration: none; font-weight: 600; font-size: 1rem; transition: color 0.3s ease; } .footer-nav ul li a:hover, .footer-nav ul li a:focus { color: var(--gold); outline: none; } /* Responsive adjustments */ @media (max-width:768px) { /* header/nav responsive rules moved to header.css */ .product-card{ width:100%; max-width:600px; } .product-card img{ height:300px; } } /* Small entrance animation */ @keyframes fadeInUp { from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} } .product-card { animation: fadeInUp 0.45s ease-out; animation-fill-mode:both; } /* New layout for productsall Our Products section */ .product-overview { display: flex; flex-wrap: wrap; /* Allows cards to wrap to the next line */ justify-content: center; /* Centers cards horizontally */ align-items: center; /* Centers cards vertically if the container has height */ gap: 3rem; /* Consistent spacing between cards */ width: 100%; /* Ensure container spans the full screen width */ padding: 2rem 1rem; box-sizing: border-box; }.sheet-embed iframe { width:100%; min-height:600px; border:1px solid #ccc; } @media (max-width:768px) { .product-image { height:220px; } .product-overview { flex-direction:column; align-items:center; } .product-item { width:100%; max-width:600px; } } @media (max-width:768px){ .footer-nav{ display:none; } footer{ flex-direction:column; align-items:center; text-align:center; gap:1rem; } .footer-left p{ text-align:center; } .footer-center{ align-items:center; } } /* ---------- CARD ---------- */ .product-card { width: 600px; height: 550px; perspective: 1000px; cursor: pointer; /* Helps mobile browsers prepare for the 3D flip to keep it sharp */ will-change: transform; image-rendering: -webkit-optimize-contrast; } .product-card-inner { width: 100%; height: 100%; position: relative; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; } .product-card.is-flipped .product-card-inner { transform: rotateY(180deg); } /* ---------- FRONT & BACK ---------- */ .product-card-front, .product-card-back { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Required for Safari */ background-size: cover; background-position: center; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.15); display: flex; align-items: flex-end; transform: translateZ(0); } /* FRONT IMAGE TITLE OVERLAY */ .product-card-front .title-overlay { width: 100%; padding: 12px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35)); } /* --- Flip Hint Styles --- */ .flip-hint { display: block; font-size: 0.8rem; color: var(--gold); font-weight: 500; margin-top: 5px; opacity: 0.8; animation: pulseHint 2s infinite; } @keyframes pulseHint { 0% { opacity: 0.5; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0.5; transform: scale(0.98); } } /* Hide hint when card is flipped (optional) */ .product-card.is-flipped .flip-hint { display: none; } .card-title { margin: 0; padding: 0 8px; color: #fff; } /* BACK CONTENT — remove the black overlay */ .product-card-back { transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; /* remove ::before overlay entirely */ } /* Only card-content has a small dark panel */ .product-card-back > .card-content { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 5; background: rgba(0, 0, 0, 0.85); /* small dark panel behind text */ padding: 20px; border-radius: 15px; width: 70%; text-align: center; } .product-card-back > .card-content h2, .product-card-back > .card-content p { color: #fff; /* white text */ } .card-content details { margin-top: 10px; width: 100%; position: relative; cursor: pointer; padding-bottom: 10px; } .card-content details summary { font-weight: 600; list-style: none; color: #fff; /* or gold */ cursor: pointer; padding: 8px; border: 1px solid rgba(215, 173, 83, 0.3); border-radius: 6px; background: rgba(0, 0, 0, 0.3); user-select: none; } .card-content details[open] summary::after { content: " ▲"; } .card-content details summary::after { content: " ▼"; } .card-content details ul { position: absolute; left: 0; right: 0; top: 100%; /* Appears directly below the summary */ z-index: 10; background: #222; /* Solid background so it's readable over images */ border: 1px solid var(--gold); border-top: none; border-radius: 0 0 8px 8px; list-style: none; margin: 0; padding: 10px; color: #fff; /* Scroll functionality */ max-height: 150px; overflow-y: auto; box-shadow: 0 10px 20px rgba(0,0,0,0.5); } .card-content details ul li { margin-bottom: 6px; font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 4px; } /* Remove default arrow in Chrome/Safari */ .card-content details summary::-webkit-details-marker { display: none; } /* ---------- BUTTON ---------- */ .call-button { display: block; /* Changed from inline-block to take full width */ width: 100%; /* Matches the 'details' width */ margin-top: 15px; /* Space between Sizes section and Button */ margin-left: 0; /* Removed the 1rem offset to keep it centered */ padding: 0.8rem; /* Increased padding for better vertical balance */ background: var(--gold); color: var(--white); border: 2px solid rgba(0,0,0,0.6); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); font-weight: 700; font-size: 1rem; text-decoration: none; text-align: center; box-sizing: border-box; /* Ensures padding doesn't push width over 100% */ z-index: 1150; cursor: pointer; transition: background 0.3s ease; } .call-button:hover { background: #b9952c; color: #000; } /* ---------- ASSIGN IMAGES ---------- */ .product-card.windows .product-card-front, .product-card.windows .product-card-back { background-image: url('https://psemhrkkqymxgekfhmnc.supabase.co/storage/v1/object/public/product-images/18.webp'); } .product-card.doors .product-card-front, .product-card.doors .product-card-back { background-image: url('https://psemhrkkqymxgekfhmnc.supabase.co/storage/v1/object/public/product-images/22.webp'); } /* --- Responsive Fixes --- */ @media (max-width: 768px) { .product-overview { gap: 1.5rem; padding: 1rem; } .product-card { /* Larger width on mobile prevents the text squishing seen in your image */ width: 95vw; max-width: 360px; height: 550px; } /* Tap to Flip Hint for mobile */ .flip-hint { display: block; color: var(--gold); font-size: 0.8rem; margin-top: 8px; font-weight: 600; } } /* ========================= */ /* SHEET EMBED */ /* ========================= */ .sheet-embed iframe { width: 100%; height: 850px; border: 0; } /* ========================= */ /* CONTACT MODAL */ /* ========================= */ .contact-popup { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 2000; } .contact-popup.show { display: flex; } .contact-panel { background-color: var(--gold); border: 1px solid black; width: 90vw; max-width: 700px; padding: 2rem; border-radius: 12px; position: relative; text-align: center; } .contact-panel form { display: flex; flex-direction: column; } .contact-panel input, .contact-panel textarea, .contact-panel select { margin-bottom: 1rem; padding: 0.8rem; border: 1px solid black; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-size: 1rem; } .contact-popup .contact-panel button[type="submit"] { background-color: black; color: #fff; font-weight: 600; border: none; padding: 1rem; cursor: pointer; border-radius: 4px; transition: background 0.3s ease; } .contact-popup .contact-panel button[type="submit"]:hover { background-color: #b9952c; } .contact-close { position: absolute; top: 8px; right: 10px; background: transparent; border: none; font-size: 1.8rem; cursor: pointer; } .contact-row { display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; } .popup { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 1000; } .popup.show { display: flex; } .popup-content { background: #fff; padding: 2rem; border-radius: 8px; text-align: center; max-width: 400px; }