/* ===== Base / tokens ===== */ :root{ --ink:#0f172a; --muted:#475569; --brand:#0ea5e9; --surface:#f8fafc; --shadow:0 10px 30px rgba(2,8,23,.10); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font:16px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--muted); background:#fff; } h1,h2,h3{color:var(--ink);margin:0 0 .5rem} a{text-decoration:none;color:var(--ink)} .container{width:min(1100px,92vw);margin-inline:auto} /* ===== Header (shared) ===== */ .header{ position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 2px 0 rgba(2,8,23,.04); } .header__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0} .brand{font-weight:700} .nav a{margin-left:18px;opacity:.85} .nav .active{color:var(--brand);opacity:1} .btn{background:var(--brand);color:#fff;padding:8px 14px;border-radius:12px} /* =================================================================================== HOME PAGE (example) — keep any existing selectors like .intro__img here. These DO NOT affect Services because Services rules are namespaced below. =================================================================================== */ .intro__img{ width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 8px 28px rgba(2,8,23,.15); object-fit:cover; } /* =================================================================================== SERVICES PAGE — all styles are scoped under .page-services so Home is untouched. Add class="page-services" to on services.html =================================================================================== */ /* Top section: text left, LARGE photo right (50% width) */ .page-services .intro{ display:flex;align-items:center;justify-content:space-between; gap:32px; padding:40px 0; } .page-services .intro__text{flex:1;max-width:50%} .page-services .intro__text p{margin:0} .page-services .services__img{ flex:1; width:50%; /* ⬅️ image takes HALF the page width */ height:auto; display:block; border-radius:12px; margin:0; /* no unexpected shifts */ box-shadow:0 8px 28px rgba(2,8,23,.15); object-fit:cover; } /* Responsive: stack on small screens */ @media (max-width:900px){ .page-services .intro{flex-direction:column-reverse;align-items:flex-start} .page-services .intro__text{max-width:100%} .page-services .services__img{width:100%} } /* Sections */ .page-services .section{padding:28px 0 80px} /* Expanding Bubbles (scoped) */ .page-services .grid-bubbles{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:20px; } @media (max-width:900px){ .page-services .grid-bubbles{grid-template-columns:repeat(2,1fr);} } @media (max-width:620px){ .page-services .grid-bubbles{grid-template-columns:1fr;} } .page-services .bubble{ --size:160px; position:relative;display:flex;align-items:center;justify-content:center; width:var(--size);height:var(--size); border-radius:999px;background:var(--surface);border:1px solid #e2e8f0; box-shadow:var(--shadow);padding:18px;cursor:pointer;overflow:hidden; transition:all .35s ease; } .page-services .bubble__title{ font-weight:700;text-align:center;pointer-events:none; transition:opacity .2s ease, transform .2s ease; } .page-services .bubble__benefit{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; padding:18px 22px;text-align:left;color:#0b1220;opacity:0;transform:translateX(10px); transition:all .35s ease; } .page-services .bubble:hover, .page-services .bubble:focus-visible, .page-services .bubble.expanded{ width:100%;border-radius:22px;background:#fff;transform:translateY(-2px); } .page-services .bubble:hover .bubble__title, .page-services .bubble:focus-visible .bubble__title, .page-services .bubble.expanded .bubble__title{ opacity:0;transform:translateY(-8px); } .page-services .bubble:hover .bubble__benefit, .page-services .bubble:focus-visible .bubble__benefit, .page-services .bubble.expanded .bubble__benefit{ opacity:1;transform:translateX(0); } /* Footer (shared) */ /* Footer credit */ .credit { margin-top: 8px; } .credit-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; } .credit-link:hover { text-decoration: underline; } .credit-logo { height: 100px; width: auto; opacity: 0.95; vertical-align: middle; } .footer img { max-height: 48px; height: auto; width: auto; } /* Motion preference */ @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }