/* ========================================================================== INNOVATIVE VIVEK — Service page components Extends styles.css. Uses --accent (set per page on ) to tint the signature visual, hovers and highlights without new color tokens. ========================================================================== */ :root{ --accent: var(--gold); --accent-soft: rgba(231,169,60,0.14); } /* ---------- Breadcrumb ---------- */ .breadcrumb{ display:flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size:12px; letter-spacing:.02em; color: var(--text-muted); margin-bottom:26px; flex-wrap:wrap; } .breadcrumb a{ color: var(--text-muted); transition: color .2s ease; } .breadcrumb a:hover{ color: var(--accent); } .breadcrumb .sep{ opacity:.4; } .breadcrumb .current{ color: var(--text-light); } /* ---------- Service hero ---------- */ .service-hero{ padding:150px 0 80px; position:relative; overflow:hidden; } .service-hero .wrap{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:56px; align-items:center; } @media (max-width:900px){ .service-hero .wrap{ grid-template-columns:1fr; gap:44px; } .service-hero{ padding:130px 0 60px; } } .service-hero .eyebrow{ color: var(--accent); } .service-hero .eyebrow::before{ background: var(--accent); } .service-hero h1{ font-size: clamp(30px,4.4vw,52px); margin-bottom:20px; } .service-hero h1 .hl{ color: var(--accent); } .service-hero .lead{ color: var(--text-muted); font-size:16.5px; max-width:520px; margin-bottom:30px; } .service-hero .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:34px; } .service-hero .btn-primary{ background: var(--accent); } .service-badges{ display:flex; flex-wrap:wrap; gap:10px; } .service-badges span{ font-family: var(--font-mono); font-size:11.5px; letter-spacing:.04em; color: var(--text-muted); border:1px solid var(--line); border-radius:100px; padding:7px 14px; display:flex; align-items:center; gap:7px; } .service-badges span i{ width:5px; height:5px; border-radius:50%; background: var(--accent); display:inline-block; } .service-visual{ position:relative; background: var(--ink-2); border:1px solid var(--line); border-radius: 16px; padding:28px; min-height:320px; display:flex; align-items:center; justify-content:center; } @media (max-width:900px){ .service-visual{ min-height:240px; } } /* ---------- Included grid ---------- */ .included-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; } @media (max-width:900px){ .included-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .included-grid{ grid-template-columns:1fr; } } .included-card{ background: var(--ink-2); border:1px solid var(--line); border-radius: var(--radius); padding:26px 22px; transition: transform .3s ease, border-color .3s ease; } .included-card:hover{ transform: translateY(-5px); border-color: var(--accent); } .included-card .icon{ width:42px; height:42px; border-radius:10px; background: var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:16px; } .included-card h4{ font-size:16px; margin-bottom:8px; color: var(--text-light); font-family:var(--font-display); } .included-card p{ font-size:13.5px; color: var(--text-muted); line-height:1.55; } .section-light .included-card{ background:#fff; border-color: var(--line-dark); } .section-light .included-card h4{ color: var(--text-dark); } .section-light .included-card p{ color: var(--text-dark-muted); } /* ---------- FAQ ---------- */ .faq-list{ max-width:780px; margin:0 auto; } .faq-item{ border-bottom:1px solid var(--line); padding:22px 0; } .faq-item summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family: var(--font-display); font-size:16.5px; font-weight:600; color: var(--text-light); } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary .plus{ flex:0 0 auto; font-size:20px; color: var(--accent); transition: transform .3s ease; } .faq-item[open] summary .plus{ transform: rotate(45deg); } .faq-item p{ margin-top:14px; color: var(--text-muted); font-size:14.5px; max-width:660px; line-height:1.65; } .section-light .faq-item{ border-bottom-color: var(--line-dark); } .section-light .faq-item summary{ color: var(--text-dark); } .section-light .faq-item p{ color: var(--text-dark-muted); } /* ---------- Service cards grid (used on homepage services section) ---------- */ .service-cards-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; } @media (max-width:960px){ .service-cards-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .service-cards-grid{ grid-template-columns:1fr; } } .service-card{ display:block; background: var(--ink-2); border:1px solid var(--line); border-radius: var(--radius); padding:26px 24px; transition: transform .3s ease, border-color .3s ease, background .3s ease; position:relative; overflow:hidden; } .service-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(135deg, var(--card-accent, var(--gold)) 0%, transparent 60%); opacity:0; transition: opacity .35s ease; pointer-events:none; } .service-card:hover{ transform: translateY(-6px); border-color: var(--card-accent, var(--gold)); } .service-card:hover::after{ opacity:.08; } .service-card .num{ font-family: var(--font-mono); font-size:11.5px; color: var(--card-accent, var(--gold)); margin-bottom:14px; display:block; letter-spacing:.08em; } .service-card h3{ font-size:19px; margin-bottom:10px; } .service-card p{ font-size:13.5px; color: var(--text-muted); margin-bottom:18px; line-height:1.55; } .service-card .go{ font-family: var(--font-mono); font-size:12px; color: var(--text-light); display:flex; align-items:center; gap:8px; } .service-card .go svg{ transition: transform .25s ease; } .service-card:hover .go svg{ transform: translateX(4px); } /* ---------- Signature animation keyframes (shared, lightweight) ---------- */ @keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} } @keyframes pulseDot{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(0.7);} } @keyframes drawLine{ from{ stroke-dashoffset:240; } to{ stroke-dashoffset:0; } } @keyframes climb{ 0%{ transform:translateY(0);} 100%{ transform:translateY(-14px);} } @keyframes spinSlow{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} } @keyframes shimmer{ 0%{ background-position:-200px 0;} 100%{ background-position:200px 0;} } @keyframes countPulse{ 0%,100%{ opacity:1;} 50%{ opacity:.55;} } @media (prefers-reduced-motion: reduce){ .service-visual *{ animation: none !important; } }