/* ========================================================= Cloud Cost Optimization Services — page-specific styles Drop this file in assets/css/cloud-cost.css and link it AFTER style.css in the . ========================================================= */ :root{ --cc-navy:#1E2761; --cc-navy2:#2B3A78; --cc-ink:#1A1F36; --cc-grey:#5A6377; --cc-accent:#3E7BFA; --cc-ice:#EAF0FF; --cc-light:#F4F6FC; --cc-line:#E3E8F4; } .anchor-offset{ scroll-margin-top:110px; } /* ---------- shared section wrapper ---------- */ .cc-section{ padding:70px 0; } .cc-section.cc-alt{ background:var(--cc-light); } .cc-eyebrow{ font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--cc-accent); margin-bottom:10px; display:block; } .cc-section-head{ max-width:720px; margin-bottom:40px; } .cc-section-head h2{ font-size:1.9rem; font-weight:700; color:var(--cc-navy); margin-bottom:12px; } .cc-section-head p{ color:var(--cc-grey); font-size:1.05rem; margin:0; } /* ---------- page intro (white, hero replaces banner content) ---------- */ .cc-page-intro{ padding-bottom:40px; } .cc-page-intro-title{ font-size:2.6rem; font-weight:800; color:var(--cc-navy); line-height:1.2; margin:14px 0 16px; letter-spacing:-.01em; } .cc-page-intro-text{ font-size:1.12rem; color:var(--cc-grey); line-height:1.7; max-width:98%; margin:0 0 26px; } .cc-page-intro-btns{ display:flex; gap:14px; flex-wrap:wrap; } .cc-page-intro-btns .btn-primary{ background:var(--cc-navy); border-color:var(--cc-navy); font-weight:600; padding:12px 26px; border-radius:8px; } .cc-page-intro-btns .btn-primary:hover{ background:var(--cc-navy2); border-color:var(--cc-navy2); } .btn-outline-navy{ border:1.5px solid var(--cc-navy); color:var(--cc-navy); font-weight:600; padding:12px 26px; border-radius:8px; background:transparent; } .btn-outline-navy:hover{ background:var(--cc-navy); color:#fff; } /* ---------- overview / intro typography ---------- */ .cc-overview-title{ font-size:2.1rem; font-weight:800; color:var(--cc-navy); line-height:1.25; margin:10px 0 18px; letter-spacing:-.01em; } .cc-overview-text{ font-size:1.05rem; color:var(--cc-grey); line-height:1.75; margin:0; } /* ---------- intro / overview checklist ---------- */ .cc-intro-list{ list-style:none; padding:0; margin:24px 0 0; } .cc-intro-list li{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; color:var(--cc-grey); } .cc-intro-list li i{ color:var(--cc-accent); margin-top:5px; flex-shrink:0; } .cc-intro-list li strong{ color:var(--cc-navy); } /* ---------- optimization levers ---------- */ .cc-lever{ padding:6px 4px; } .cc-lever-ic{ width:64px; height:64px; margin:0 auto 16px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:#fff; box-shadow:0 12px 26px rgba(30,39,97,.16); } .cc-lever h3{ font-size:1rem; font-weight:700; color:var(--cc-navy); margin-bottom:4px; } .cc-lever p{ font-size:.86rem; color:var(--cc-grey); margin:0; } .cc-lever-1{ background:linear-gradient(135deg,#1E2761,#3E5BD9); } .cc-lever-2{ background:linear-gradient(135deg,#1E63D9,#3E9BFA); } .cc-lever-3{ background:linear-gradient(135deg,#0B8C6C,#1FC99B); } .cc-lever-4{ background:linear-gradient(135deg,#6A1B9A,#A24AD0); } .cc-lever-5{ background:linear-gradient(135deg,#C2710A,#F2A33E); } /* ---------- native cloud cards ---------- */ .cc-cloud-card{ background:#fff; border:1px solid var(--cc-line); border-radius:14px; padding:28px; height:100%; box-shadow:0 6px 22px rgba(30,39,97,.05); transition:transform .18s ease, box-shadow .18s ease; } .cc-cloud-card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(30,39,97,.12); } .cc-cloud-ic{ width:46px; height:46px; border-radius:11px; background:var(--cc-ice); color:var(--cc-accent); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:16px; } .cc-cloud-card h3{ font-size:1.15rem; font-weight:700; color:var(--cc-navy); margin-bottom:14px; } .cc-check-list{ list-style:none; padding:0; margin:0; } .cc-check-list li{ display:flex; align-items:center; gap:10px; font-size:.92rem; color:var(--cc-grey); margin-bottom:10px; } .cc-check-list li:last-child{ margin-bottom:0; } .cc-check-list li i{ color:var(--cc-accent); font-size:.8rem; } /* ---------- what-we-do cards ---------- */ .cc-card{ background:#fff; border:1px solid var(--cc-line); border-radius:14px; padding:28px; height:100%; box-shadow:0 6px 22px rgba(30,39,97,.05); transition:transform .18s ease, box-shadow .18s ease; } .cc-card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(30,39,97,.12); } .cc-card .cc-ic{ width:46px; height:46px; border-radius:11px; background:var(--cc-ice); color:var(--cc-accent); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:16px; } .cc-card h3{ font-size:1.15rem; font-weight:700; color:var(--cc-navy); margin-bottom:8px; } .cc-card p{ font-size:.96rem; color:var(--cc-grey); margin:0; } /* ---------- stats ---------- */ .cc-stat{ background:#fff; border:1px solid var(--cc-line); border-radius:14px; padding:30px 16px; height:100%; } .cc-stat h3{ font-size:2rem; font-weight:800; color:var(--cc-navy); margin-bottom:6px; } .cc-stat p{ font-size:.88rem; color:var(--cc-grey); margin:0; } /* ---------- process steps ---------- */ .cc-step{ position:relative; padding:22px 18px; background:#fff; border:1px solid var(--cc-line); border-radius:12px; height:100%; } .cc-step .cc-step-n{ width:34px; height:34px; border-radius:50%; background:var(--cc-navy); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:12px; } .cc-step h3{ font-size:1rem; font-weight:700; color:var(--cc-navy); margin-bottom:4px; } .cc-step p{ font-size:.85rem; color:var(--cc-grey); margin:0; } /* ---------- tool chips ---------- */ .cc-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; } .cc-chip{ background:#fff; border:1px solid var(--cc-line); color:var(--cc-navy); font-weight:600; font-size:.86rem; padding:7px 15px; border-radius:30px; } /* ---------- CTA banner ---------- */ .cc-cta-banner{ background:linear-gradient(135deg,var(--cc-navy) 0%,var(--cc-navy2) 100%); color:#fff; border-radius:18px; padding:54px 32px; text-align:center; } .cc-cta-banner h2{ color:#fff; font-size:1.8rem; font-weight:700; margin-bottom:10px; } .cc-cta-banner p{ color:#D7E0FB; max-width:560px; margin:0 auto 26px; font-size:1.05rem; } .cc-cta-banner .btn-light{ font-weight:600; padding:12px 28px; border-radius:8px; } /* ---------- FAQ accordion ---------- */ .cc-faq .accordion-item{ border:1px solid var(--cc-line); border-radius:12px !important; margin-bottom:12px; overflow:hidden; } .cc-faq .accordion-button{ font-weight:600; color:var(--cc-navy); font-size:1.02rem; } .cc-faq .accordion-button:not(.collapsed){ background:var(--cc-ice); color:var(--cc-navy); box-shadow:none; } .cc-faq .accordion-button:focus{ box-shadow:none; } .cc-faq .accordion-body{ color:var(--cc-grey); font-size:.95rem; } /* ---------- responsive ---------- */ @media (max-width:991px){ .cc-section{ padding:54px 0; } .cc-section-head h2{ font-size:1.6rem; } .cc-overview-title{ font-size:1.7rem; } .cc-page-intro-title{ font-size:2.1rem; } } @media (max-width:767px){ .cc-card, .cc-cloud-card{ padding:22px; } .cc-cta-banner{ padding:40px 20px; } .cc-cta-banner h2{ font-size:1.4rem; } } @media (max-width:575px){ .cc-lever-ic{ width:52px; height:52px; font-size:1.3rem; border-radius:14px; } }