/* ========================================================= CONTACT PAGE STYLESHEET - Joshua Dalton Media ========================================================= Purpose ------- This file contains the page-specific styles for the /contact/ page on joshuadaltonmedia.com. It layers on top of global.css and forms.css and should stay focused on the contact page layout, contact cards, contact methods, and other contact-only presentation. What belongs in this file ------------------------- - Contact page section spacing and page layout - Contact card shells and contact method blocks - Contact page action row styling - Contact-only mini cards and service list presentation - Contact page breakpoint rules Asset path usage ---------------- This stylesheet is intended to be referenced from pages with: Relationship to page files -------------------------- Page files should: 1. load this stylesheet after global.css and forms.css 2. use it only on the /contact/ page 3. keep shared form controls in forms.css and shared utility patterns in global.css Maintenance rule ---------------- If a selector is reusable across other pages, forms, or shared cards, it should live in a shared stylesheet instead. Keep this file focused on contact-page-specific layout and presentation. */ /* ================= PAGE LAYOUT ================= */ /* Tighter gutter on mobile so long values like the email address don't wrap */ .contact-page{padding:0 0 28px;--gutter:10px} /* The first section sits right after the nav -- suppress its border-top so the section separator line doesn't create a dead gap at the very top of the page */ .contact-page>.section:first-child{border-top:none} .contact-grid{gap:14px} /* ================= CONTACT CARD ================= */ .contact-card{display:grid;gap:14px;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);background:linear-gradient(180deg,rgba(20,20,20,.84),rgba(20,20,20,.68));backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);box-shadow:0 12px 40px rgba(0,0,0,.45)} .contact-card>*{margin:0} .contact-card-head{display:grid;gap:8px} .contact-card-title{margin:0;font-size:clamp(1.05rem,4vw,1.2rem);line-height:1.2;color:var(--ink)} .contact-card-text{margin:0;font-size:clamp(.88rem,2.8vw,1rem);line-height:1.55;color:var(--muted)} /* Action card gets a stronger left border to signal it is the primary card */ .contact-card--action{border-left:3px solid rgba(255,77,77,.45)} /* Info card is visually subordinate -- slightly reduced background brightness */ .contact-card--info{background:linear-gradient(180deg,rgba(16,16,16,.72),rgba(16,16,16,.56))} /* ================= CONTACT METHODS ================= */ .contact-methods{display:grid;gap:10px} .contact-method{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);transition:background .18s ease,border-color .18s ease;touch-action:manipulation} /* Touch target: icon must be min 44x44px (UI/UX Pro Max rule #2) */ .contact-method-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:999px;background:rgba(255,77,77,.12);border:1px solid rgba(255,77,77,.24);color:var(--accent);transition:background .18s ease,border-color .18s ease;flex-shrink:0} .contact-method-icon svg{width:20px;height:20px} .contact-method-copy{display:grid;gap:4px;min-width:0} .contact-method-label{font-size:.7rem;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--muted)} .contact-method-value{display:inline-block;font-size:.88rem;line-height:1.35;color:var(--ink);font-weight:700;word-break:break-word;text-decoration:none;cursor:pointer} .contact-method-value:hover{text-decoration:none;color:var(--accent)} .contact-method-note{margin:0;font-size:.8rem;line-height:1.5;color:var(--muted)} /* Primary method (email) gets a subtle accent treatment to signal it is the recommended action */ .contact-method--primary{background:rgba(255,77,77,.06);border-color:rgba(255,77,77,.22)} .contact-method--primary .contact-method-icon{background:rgba(255,77,77,.18);border-color:rgba(255,77,77,.38)} .contact-method--primary .contact-method-label::after{content:" \2022 recommended";color:var(--accent);letter-spacing:.08em} /* ================= SERVICE LIST ================= */ .contact-service-list{--accent-list-gap:10px;--accent-list-font-size:.88rem;--accent-list-line-height:1.6;--accent-list-color:var(--muted)} /* ================= RESPONSIVE BREAKPOINTS ================= */ @media(min-width:360px){ /* ================= PAGE LAYOUT ================= */ .contact-page{padding:0 0 30px} .contact-grid{gap:15px} /* ================= CONTACT CARD ================= */ .contact-card{padding:18px} /* ================= CONTACT METHODS ================= */ .contact-method{padding:13px} } @media(min-width:700px){ /* ================= PAGE LAYOUT ================= */ .contact-page{--gutter:24px} /* ================= CONTACT CARD ================= */ .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start} .contact-card{padding:20px} .contact-card-title{font-size:clamp(1.08rem,1.7vw,1.22rem)} .contact-card-text{font-size:clamp(.92rem,1.2vw,1rem)} /* ================= SERVICE LIST ================= */ .contact-service-list li{font-size:.9rem} } @media(min-width:1024px){ /* ================= CONTACT CARD ================= */ .contact-grid{gap:20px} .contact-card{padding:24px} /* ================= CONTACT METHODS ================= */ .contact-method{padding:14px} .contact-method-value{font-size:1rem} /* ================= SERVICE LIST ================= */ .contact-service-list li{font-size:.92rem} } @media(hover:hover){ /* ================= CONTACT CARD ================= */ .contact-card:hover{border-color:rgba(255,255,255,.12)} /* ================= CONTACT METHODS ================= */ .contact-method:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14)} .contact-method--primary:hover{background:rgba(255,77,77,.1);border-color:rgba(255,77,77,.32)} }