/* ========================================= Lapis Interactive — Contact (page-scoped) Purpose: 2-up responsive card grid with map pane Scope: only when Depends on: css/style.css tokens (spacing, colors) ========================================= */ /* 1) Grid & page container ------------------------------- */ .contact-page .contact-grid{ display:grid; gap:var(--section-gap); grid-template-columns:minmax(0,1fr); align-items:stretch; max-width:1160px; margin:0 auto; } /* 2) Cards & field rows ---------------------------------- */ .contact-page .card{ display:flex; flex-direction:column; height:100%; text-align:left; padding:1.2rem; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.02); box-shadow:0 6px 24px -10px rgba(0,0,0,.6); width:100%; } .contact-page .card h3{ margin:0 0 .6rem; font-family:Syncopate, Inter, sans-serif; letter-spacing:.05em; font-size:clamp(1rem,.9rem + .6vw,1.2rem); color:var(--accent); } .contact-page .field{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.75rem; } .contact-page .card .cta-row{ justify-content:flex-start } .contact-page .card .pills{ margin-top:auto } /* Spacing: add breathing room when pills follow map */ .contact-page .card .map-static + .pills { margin-top: 0.5rem; } /* 3) Static map card (image + branded glow) --------------- */ .contact-page .map-static{ aspect-ratio:16 / 9; border-radius:12px; background: linear-gradient(180deg, rgba(10,15,30,.55), rgba(10,15,30,.55)), url("../assets/greer-map.png") center/cover no-repeat, radial-gradient(80% 120% at 30% 20%, rgba(33,212,253,.18), transparent 55%), radial-gradient(80% 120% at 70% 80%, rgba(145,35,255,.16), transparent 55%), rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); box-shadow:0 6px 24px -10px rgba(0,0,0,.55); position:relative; overflow:hidden; } /* Motion safety */ @media (prefers-reduced-motion: reduce){ .contact-page .map-static::before, .contact-page .map-static::after{ animation:none !important; } } /* 4) Label variants (long vs short) ----------------------- */ .contact-page .label-long{ display:inline } .contact-page .label-short{ display:none } @media (max-width:640px){ .contact-page .label-long{ display:none } .contact-page .label-short{ display:inline } } /* 5) Button comfort inside cards on small phones ---------- */ @media (max-width:640px){ .contact-page .card .btn{ padding:.7rem .9rem } } /* 6) Vertical rhythm between stacked grids / mascot ------- */ @media (min-width:768px){ .contact-page .contact-main .container.contact-grid + .container.contact-grid{ margin-top: calc(var(--section-gap) * 1.15); } .contact-page .contact-main .container.contact-grid + .mascot{ margin-top: calc(var(--section-gap) * 1.25); } } /* 7) Micro phones (≤420px): align gutters ----------------- */ @media (max-width:420px){ .contact-page .container{ max-width:none; width:100% } .contact-page .contact-grid{ width:100%; max-width:100%; margin:0; padding-inline:0; } } /* 8) Columns: show two-up on tablets / small landscape ---- */ @media (min-width:700px), (orientation:landscape) and (min-width:640px){ .contact-page .contact-grid{ grid-template-columns:1fr 1fr } } /* 9) Tablet comfort (≥768px) ------------------------------ */ @media (min-width:768px){ .contact-page .card{ padding:1.6rem } .contact-page .field{ gap:1rem } .contact-page .card > * + *{ margin-top:.85rem } } /* 10) Desktop extras (≥900px) ----------------------------- */ @media (min-width:900px){ .contact-page .contact-grid{ gap: calc(var(--section-gap) + .75rem) } } /* 11) Short-height landscape phones ----------------------- */ @media (orientation:landscape) and (max-height:480px){ body.contact-page{ --fold-top: clamp(.25rem, 1.5svh, .75rem) } .contact-page .section{ padding-top:.5rem } .contact-page .contact-main{ padding-top: calc(var(--nav-offset) + 0.85rem); } .contact-page .contact-main .container.contact-grid + .container.contact-grid{ margin-top: calc(var(--section-gap) * .85); } } /* 12) Tablet portrait (768–1024px) ------------------------- */ @media (orientation:portrait) and (min-width:768px) and (max-width:1024px){ body.contact-page{ --fold-top: clamp(.75rem, 2.5svh, 1.25rem) } } /* 13) Portrait phones (≤640px) ----------------------------- */ @media (orientation:portrait) and (max-width:640px){ body.contact-page{ --fold-top: clamp(1rem, 3svh, 1.6rem) } } /* 14) Small landscape phones (≤700px) --------------------- */ @media (orientation:landscape) and (max-width:700px){ .contact-page .field{ grid-template-columns:auto minmax(0,1fr) } .contact-page .field .btn{ max-width:100%; font-size:clamp(.90rem, 1.8vw, 1rem); padding:.6rem .85rem; } } /* 15) Micro phones (≤360px) ------------------------------- */ @media (max-width:360px){ .contact-page .field{ grid-template-columns:1fr; gap:.4rem; } }