/* ==== Brand palette ======================================================= */ :root { --brand: #1b4bff; /* primary */ --brand-2: #20d4ff; /* accent */ --ink: #0d1b2a; /* heading/text */ --ink-2: #243b53; /* secondary text */ --surface: #ffffff; /* cards/nav */ --muted: #eef3ff; /* light badges/bg */ --border: rgba(0,0,0,.08); } /* ==== Base tweaks ========================================================= */ body { color: var(--ink-2); } h1, h2, h3, h4, h5, h6 { color: var(--ink); letter-spacing: .2px; } .lead { color: var(--ink-2); } /* Gradient highlight for headline words */ .grad-text { background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Selection color */ ::selection { background: rgba(32, 212, 255, .25); } /* ==== Navbar ============================================================= */ .navbar { background: var(--surface) !important; } .navbar .navbar-brand { color: var(--ink); } .navbar .nav-link { color: var(--ink-2); transition: color .15s ease; } .navbar .nav-link:hover { color: var(--brand); } .navbar .nav-link.active { color: var(--brand); font-weight: 600; } .navbar .btn { border-radius: 999px; } /* ==== Buttons ============================================================ */ .btn { border-radius: 999px; } .btn-dark { background: var(--ink); border-color: var(--ink); } .btn-dark:hover { filter: brightness(1.05); } .btn-primary { background: var(--brand); border-color: var(--brand); box-shadow: 0 6px 16px -8px var(--brand); } .btn-primary:hover { filter: brightness(1.05); } .btn-outline-dark { color: var(--ink); border-color: var(--ink); } .btn-outline-dark:hover { background: var(--ink); color: #fff; } /* Small pills for filters (e.g., portfolio) */ .btn-filter { border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--ink-2); } .btn-filter.active, .btn-filter:focus { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #fff; border-color: transparent; } /* ==== Cards & sections =================================================== */ .card { border-radius: 1rem; border: 1px solid var(--border); } .hero-card { border: 1px solid var(--border); } .badge.text-bg-light { background: var(--muted); color: #2f3b59; } .border-top { border-top-color: var(--border) !important; } .border-bottom { border-bottom-color: var(--border) !important; } /* ==== Links ============================================================== */ a { text-underline-offset: 3px; } a:hover { color: var(--brand-2) } /* ==== Hero / colorful background ======================================== */ /* Use with a container that has class .hero-color */ .hero-color { background: radial-gradient(600px 200px at 10% -10%, rgba(32,212,255,.20) 0, transparent 60%), radial-gradient(500px 200px at 90% -20%, rgba(27,75,255,.18) 0, transparent 60%), linear-gradient(180deg, #ffffff 0, #f7f7f7 100%); } /* Optional: subtle site-wide pattern (if you use .geo-bg on ) */ .geo-bg { background-image: radial-gradient(circle at 1px 1px, rgba(32,212,255,.08) 1px, transparent 1px), radial-gradient(circle at 21px 21px, rgba(27,75,255,.06) 1px, transparent 1px); background-size: 22px 22px, 22px 22px; } /* ==== Headings accents =================================================== */ .section-title { display: inline-block; position: relative; padding-bottom: .25rem; } .section-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 3px; } /* ==== Process timeline badges (if present) ============================== */ .timeline-badge { display: inline-block; padding: .25rem .6rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: .75rem; line-height: 1; } /* ==== Portfolio grid filter (if present) ================================ */ #portfolio-filters .btn { padding: .35rem .8rem; } #portfolio-grid .card:hover { transform: translateY(-2px); transition: transform .15s ease; } /* ==== Footer ============================================================ */ footer { background: #fff; } footer a { color: #6b7a90; } footer a:hover { color: var(--brand); opacity: 1; } /* ==== Utilities ========================================================= */ .rounded-blob { border-radius: 1.25rem; } .shadow-soft { box-shadow: 0 8px 24px -18px rgba(0,0,0,.25); } /* ==== Dark preview support (optional) =================================== */ @media (prefers-color-scheme: dark) { .dark-auto body { color: #cbd5e1; } } /* === Gradient icons (Bootstrap Icons) === */ :root{ --brand: #4632DA; /* primary */ --brand-2: #06D9FA; /* secondary */ } /* Apply gradient to ALL .bi icons */ :where(.bi, .icon-gradient){ background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; /* Safari */ } /* (Optional) Keep icons inside buttons/badges solid for legibility */ :where(.btn, .badge) :where(.bi){ background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: currentColor !important; -webkit-text-fill-color: currentColor !important; } /* (Optional) Slight size/align polish for icons in headings/buttons */ .bi{ vertical-align: -0.125em; } /* Primary button: brand base, secondary on hover */ .btn-primary{ background-color: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; box-shadow: 0 6px 16px -8px rgba(70,50,218,.55); } .btn-primary:hover, .btn-primary:focus{ background-color: var(--brand-2) !important; border-color: var(--brand-2) !important; box-shadow: 0 8px 20px -10px rgba(6,217,250,.55); } .btn-primary:active{ background-color: color-mix(in srgb, var(--brand-2) 85%, black) !important; border-color: color-mix(in srgb, var(--brand-2) 85%, black) !important; } .btn-primary:disabled{ background-color: color-mix(in srgb, var(--brand) 60%, #999) !important; border-color: color-mix(in srgb, var(--brand) 60%, #999) !important; } /* Outline variant that fills with secondary on hover */ .btn-outline-primary{ color: var(--brand) !important; border-color: var(--brand) !important; background: transparent !important; } .btn-outline-primary:hover, .btn-outline-primary:focus{ color: #000 !important; background-color: var(--brand-2) !important; border-color: var(--brand-2) !important; } /* (Optional) reduce motion if user prefers */ @media (prefers-reduced-motion: reduce){ .btn-primary, .btn-outline-primary{ transition: none; } } /* Apply to all headings + bold text */ :where(h1,h2,h3,h4,h5,h6,strong,b,.fw-bold){ background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; /* Safari */ } .section-title { display:inline-block; position:relative; padding-bottom:.25rem; background: linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .section-title::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background: linear-gradient(90deg,var(--brand),var(--brand-2)); border-radius:3px; } /* Cards & step visuals */ .hw-card{ border:1px solid rgba(0,0,0,.08); border-radius:1rem; background:#fff; padding:1.1rem; box-shadow:0 10px 24px -18px rgba(0,0,0,.25); } .hw-step{ display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; } .hw-icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:999px; border: Solid 1px var(--brand); color:#fff; font-size:1.1rem; } .hw-sub{ color:#70819a; margin:.15rem 0 .5rem; font-size:.95rem; } .hw-bullets{ margin:0; padding-left:1.1rem; color:#4a5a70; } .section-title{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .section-title::after{ content:""; display:block; height:3px; margin-top:.25rem; background:linear-gradient(90deg,var(--brand),var(--brand-2)); border-radius:3px; } /* FAQ: gradient when collapsed, solid when expanded so text stays visible */ .faq-acc .accordion-item{ border:1px solid rgba(0,0,0,.08); border-radius:1rem; background:#fff; box-shadow:0 10px 24px -18px rgba(0,0,0,.25); overflow:hidden; } .faq-acc .accordion-button{ padding:1rem 1.25rem; font-weight:600; background:linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .faq-acc .accordion-button:not(.collapsed){ background:#fff; color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important; -webkit-background-clip:initial; background-clip:border-box; box-shadow: inset 0 -1px 0 rgba(0,0,0,.05); } /* Neutralize any global gradient-bold rules inside FAQ header */ .faq-acc .accordion-button :where(strONG,b,.fw-bold){ background:none !important; color:inherit !important; -webkit-text-fill-color:inherit !important; } /* Optional: keep FAQ visible while scrolling on large screens */ @media (min-width: 992px){ #how-faq .faq-acc{ position:sticky; top:2rem; } } #blog-grid a:hover, .blog-article a:hover { opacity: 1 !important; } /* Services: Minimal process with arrows + tiny subtitles + timelines */ :root{ --brand:#4632DA; --brand-2:#06D9FA; } #svc-process-min .proc-wrap{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } #svc-process-min .proc-step{ min-width:150px; flex:0 1 180px; text-align:center; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:.85rem .95rem; box-shadow:0 10px 24px -18px rgba(0,0,0,.25); user-select:none; } #svc-process-min .proc-step .bi{ display:block; font-size:1rem; margin-bottom:.35rem; color:#4632DA; } #svc-process-min .proc-title{ font-weight:700; margin:0; } #svc-process-min .proc-sub{ margin:.25rem 0 .5rem; font-size:.85rem; line-height:1.35; color:#617086; } /* Timeline chip */ #svc-process-min .proc-time{ display:inline-block; margin-top:.15rem; padding:.2rem .55rem; font-size:.75rem; line-height:1; border-radius:999px; background:linear-gradient(90deg, var(--brand), var(--brand-2)); color:#fff; } /* Quickly hide all timelines if needed: add .no-times on #svc-process-min */ #svc-process-min.no-times .proc-time{ display:none !important; } /* Arrow connector (horizontal) */ #svc-process-min .proc-conn{ flex:0 0 42px; height:24px; display:flex; align-items:center; justify-content:center; } #svc-process-min .proc-conn svg{ width:42px; height:16px; } #svc-process-min .proc-conn line{ stroke:#4632DA; stroke-width:2; } #svc-process-min .proc-conn polygon{ fill:#4632DA; } /* Mobile: vertical stack with down arrows */ @media (max-width: 991.98px){ #svc-process-min .proc-wrap{ flex-direction:column; align-items:stretch; } #svc-process-min .proc-conn{ width:100%; height:28px; } #svc-process-min .proc-conn svg{ width:16px; height:28px; transform:rotate(90deg); } #svc-process-min .proc-step{ text-align:left; } #svc-process-min .proc-step .bi{ display:inline-block; margin:0 .5rem 0 0; vertical-align:middle; } #svc-process-min .proc-title{ display:inline-block; vertical-align:middle; } }