/* ========================================================== BELGRAVE PRIVATE BANK SERVICES Shared Sections + Services Layout ========================================================== */ /* ========================================================== SHARED SECTION STYLES ========================================================== */ section{ position:relative; width:100%; } .section-heading{ width:min(52rem,100%); margin:0 auto clamp(3.5rem,7vw,5rem); text-align:center; } .section-tag{ display:inline-flex; align-items:center; justify-content:center; padding:.75rem 1.6rem; border-radius:999px; background:rgba(201,162,39,.08); border:1px solid rgba(201,162,39,.28); color:var(--gold); text-transform:uppercase; letter-spacing:.12em; font-size:.82rem; font-weight:600; } .section-heading h2{ margin:1.6rem 0; font-size:clamp(2rem,4vw,3.2rem); color:#111827; } .section-heading p{ max-width:760px; margin:auto; font-size:1.05rem; line-height:1.9; color:#6B7280; } /* ========================================================== SERVICES SECTION ========================================================== */ .services-section{ position:relative; padding:clamp(5rem,8vw,8.5rem) 8%; background:#FFF; overflow:hidden; } .services-section::before{ content:""; position:absolute; top:-180px; right:-180px; width:420px; aspect-ratio:1; border-radius:50%; background: radial-gradient( circle, rgba(201,162,39,.08), transparent 70% ); pointer-events:none; } .services-section::after{ content:""; position:absolute; left:-170px; bottom:-170px; width:360px; aspect-ratio:1; border-radius:50%; background: radial-gradient( circle, rgba(15,23,42,.05), transparent 72% ); pointer-events:none; } /* ========================================================== SERVICES GRID ========================================================== */ .services-grid{ position:relative; display:grid; grid-template-columns: repeat( auto-fit, minmax(320px,1fr) ); gap:clamp(1.8rem,3vw,2.8rem); z-index:2; } /* ========================================================== SERVICE CARD ========================================================== */ .service-card{ position:relative; display:flex; flex-direction:column; overflow:hidden; background:#FFF; border-radius:var(--radius-lg); border:1px solid rgba(15,23,42,.08); box-shadow: 0 18px 40px rgba(15,23,42,.08), 0 5px 14px rgba(15,23,42,.04); transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; } .service-card:hover{ transform:translateY(-12px); border-color:rgba(201,162,39,.35); box-shadow: 0 34px 70px rgba(15,23,42,.14), 0 12px 30px rgba(15,23,42,.08); } /* ========================================================== TOP ACCENT ========================================================== */ .service-card::before{ content:""; position:absolute; inset:0 auto auto 0; width:100%; height:5px; background: linear-gradient( 90deg, var(--gold), var(--gold-light) ); opacity:0; transition:opacity .35s ease; } .service-card:hover::before{ opacity:1; } .service-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid transparent; pointer-events:none; transition:border-color .35s ease; } .service-card:hover::after{ border-color:rgba(201,162,39,.18); } /* ========================================================== SERVICE IMAGE ========================================================== */ .service-image{ position:relative; overflow:hidden; } .service-image img{ display:block; width:100%; height:clamp(210px,22vw,290px); object-fit:cover; transition: transform .8s ease, filter .45s ease; } .service-card:hover .service-image img{ transform:scale(1.05); filter:brightness(1.05); } /* ========================================================== ICON BADGE ========================================================== */ .service-image i{ position:absolute; left:1.8rem; bottom:1.8rem; display:flex; align-items:center; justify-content:center; width:62px; height:62px; border-radius:18px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--gold); font-size:1.4rem; box-shadow:0 10px 30px rgba(0,0,0,.15); } /* ========================================================== SERVICE CONTENT ========================================================== */ .service-content{ display:flex; flex-direction:column; flex:1; padding:2rem; } .service-content h3{ margin-bottom:1rem; font-size:1.7rem; color:#111827; } .service-content p{ flex:1; color:#6B7280; font-size:1rem; line-height:1.85; } /* ========================================================== SERVICE LINK ========================================================== */ .service-link{ display:inline-flex; align-items:center; gap:.65rem; margin-top:2rem; font-weight:600; color:#111827; transition: color .35s ease, gap .35s ease; } .service-link::after{ content:"→"; transition:transform .35s ease; } .service-link:hover{ color:var(--gold); gap:.9rem; } .service-link:hover::after{ transform:translateX(4px); } /* ========================================================== SECTION ENTRANCE ========================================================== */ .services-section{ animation:fadeServices .8s ease both; } @keyframes fadeServices{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } } /* ========================================================== LARGE DESKTOP ========================================================== */ @media (min-width:1600px){ .services-grid{ gap:3.2rem; } } /* ========================================================== LAPTOP ========================================================== */ @media (max-width:1200px){ .services-section{ padding:7rem 6%; } } /* ========================================================== TABLET ========================================================== */ @media (max-width:992px){ .services-section{ padding:6rem 5%; } .section-heading{ margin-bottom:3.5rem; } .section-heading h2{ font-size:clamp(2rem,5vw,2.6rem); } .services-grid{ grid-template-columns: repeat( auto-fit, minmax(280px,1fr) ); gap:2rem; } .service-content{ padding:1.8rem; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:768px){ .services-section{ padding:5rem 24px; } .section-heading{ margin-bottom:3rem; } .section-tag{ padding:.7rem 1.4rem; font-size:.75rem; } .section-heading h2{ font-size:2rem; } .section-heading p{ font-size:1rem; line-height:1.8; } .services-grid{ grid-template-columns:1fr; gap:1.75rem; } .service-card{ border-radius:var(--radius-md); } .service-image img{ height:220px; } .service-image i{ width:56px; height:56px; left:1.3rem; bottom:1.3rem; font-size:1.2rem; } .service-content{ padding:1.6rem; } .service-content h3{ font-size:1.45rem; } .service-link{ margin-top:1.6rem; } } /* ========================================================== SMALL PHONES ========================================================== */ @media (max-width:480px){ .services-section{ padding:4.5rem 18px; } .section-heading h2{ font-size:1.75rem; } .section-heading p{ font-size:.95rem; } .service-image img{ height:200px; } .service-content{ padding:1.4rem; } .service-content h3{ font-size:1.3rem; } .service-content p{ font-size:.95rem; } .service-link{ font-size:.95rem; } }