Phylicia Daniel

7mo

posted in

Section Code

<style>

.svc3-wrap{

background:#0b72a6;

padding:70px 18px 90px;

font-family:Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

color:#fff;

}

.svc3{

max-width:1180px;

margin:0 auto;

text-align:center;

}

.svc3-title{

font-size:28px;

font-weight:800;

letter-spacing:2px;

text-transform:uppercase;

margin:0 0 10px;

}

.svc3-sub{

margin:0 auto 44px;

max-width:760px;

opacity:.92;

line-height:1.6;

font-size:15.5px;

}

.svc3-grid{

display:grid;

grid-template-columns:repeat(3, minmax(0,1fr));

gap:44px;

}

.svc-card{

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

padding:6px 8px 0;

}

.svc-badge{

width:270px;

height:270px;

border-radius:50%;

position:relative;

display:grid;

place-items:center;

margin-bottom:22px;

background:

radial-gradient(circle at center, transparent 63%, #f1d278 66%, #c58e2c 76%, transparent 78%),

radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), transparent 55%);

filter:drop-shadow(0 18px 28px rgba(0,0,0,.35));

transition: transform .25s ease, filter .25s ease;

}

.svc-badge::before{

content:"";

position:absolute;

inset:18px;

border-radius:50%;

background:linear-gradient(135deg,#1caa68,#00784e);

box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);

}

.svc-thumb{

position:relative;

z-index:2;

width:230px;

height:230px;

display:grid;

place-items:center;

}

.svc-thumb img{

width:100%;

height:100%;

object-fit:contain;

filter:drop-shadow(0 16px 24px rgba(0,0,0,.4));

transform: translateY(-4px);

}

.svc-card:hover .svc-badge{

transform: translateY(-7px);

filter: drop-shadow(0 24px 34px rgba(0,0,0,.42));

}

.svc-name{

font-size:22px;

font-weight:800;

margin:4px 0 10px;

}

.svc-desc{

font-size:15.5px;

line-height:1.7;

max-width:320px;

opacity:.95;

margin: 0;

}

.svc-actions{

display:flex;

gap:10px;

align-items:center;

justify-content:center;

flex-wrap:wrap;

margin-top:16px;

}

/* Primary button */

.svc-btn{

padding:10px 24px;

font-size:14px;

font-weight:800;

border-radius:999px;

background:#fff;

color:#0b72a6;

text-decoration:none;

transition:all .25s ease;

display:inline-flex;

align-items:center;

justify-content:center;

min-width: 140px;

}

.svc-btn:hover{

background:#f1d278;

color:#0b0b0b;

transform:translateY(-2px);

}

/* Toggle button */

.svc-toggle{

padding:10px 18px;

font-size:14px;

font-weight:800;

border-radius:999px;

background: rgba(255,255,255,.14);

color:#fff;

border:1px solid rgba(255,255,255,.30);

cursor:pointer;

transition:all .25s ease;

display:inline-flex;

align-items:center;

gap:10px;

}

.svc-toggle:hover{

background: rgba(255,255,255,.22);

transform:translateY(-2px);

}

.svc-toggle .chev{

width: 10px;

height: 10px;

border-right: 2px solid #fff;

border-bottom: 2px solid #fff;

transform: rotate(45deg);

transition: transform .25s ease;

margin-top:-2px;

}

/* Expand area */

.svc-more{

width:100%;

max-width: 360px;

margin-top:14px;

text-align:left;

background: rgba(0,0,0,.12);

border: 1px solid rgba(255,255,255,.18);

border-radius: 14px;

padding: 14px 14px;

overflow:hidden;

max-height: 0;

padding-top: 0;

padding-bottom: 0;

opacity: 0;

transition: max-height .35s ease, opacity .25s ease, padding .25s ease;

}

.svc-more p{

margin: 0 0 10px;

line-height: 1.65;

opacity:.96;

font-size: 14.5px;

}

.svc-more ul{

margin: 0;

padding-left: 18px;

}

.svc-more li{

margin: 6px 0;

line-height: 1.5;

font-size: 14.5px;

}

/* Open state */

.svc-card.is-open .svc-more{

max-height: 420px; /* enough room for content */

opacity: 1;

padding: 14px 14px;

}

.svc-card.is-open .svc-toggle .chev{

transform: rotate(-135deg); /* points up */

margin-top: 2px;

}

@media(max-width:980px){

.svc3-grid{grid-template-columns:1fr; gap:36px;}

.svc-badge{width:250px;height:250px;}

.svc-thumb{width:210px;height:210px;}

}

</style>

<div class="svc3-title">Service We Offer</div>

Choose the support you need — tap <strong>Show details</strong> to see what’s included and how we help you move faster with confidence.

</p>

</div>

<div class="svc-name">Credit Repair</div>

<p class="svc-desc">Dispute support, strategy, and guidance to help improve your credit profile.</p>

<a href="#" class="svc-btn">Get Started</a>

Show details <span class="chev"></span>

</button>

</div>

<p><strong>What you can expect:</strong></p>

<ul>

<li>Personalized credit review + action plan</li>

<li>Dispute support for inaccurate items</li>

<li>Ongoing progress tracking & tips</li>

<li>Education to help you maintain results</li>

</ul>

</div>

</div>

<div class="svc-name">Bookkeeping</div>

<p class="svc-desc">Clean, consistent books so you can make decisions with real numbers.</p>

<a href="#" class="svc-btn">Get Started</a>

Show details <span class="chev"></span>

</button>

</div>

<p><strong>What’s included:</strong></p>

<ul>

<li>Monthly categorization & reconciliation</li>

<li>Profit & loss reporting</li>

<li>Cleanup options (if you’re behind)</li>

<li>Year-round support for tax readiness</li>

</ul>

</div>

</div>

<div class="svc-name">Tax Preparation</div>

<p class="svc-desc">File accurately, maximize eligible deductions, and stay compliant.</p>

<a href="#" class="svc-btn">Get Started</a>

Show details <span class="chev"></span>

</button>

</div>

<ul>

<li>Individual & small business filing support</li>

<li>Organized document checklist</li>

<li>Guidance for common deductions/credits</li>

<li>Next-step recommendations after filing</li>

</ul>

</div>

</section>

(function(){

var cards = document.querySelectorAll('.svc-card');

function closeAll(except){

cards.forEach(function(c){

if(except && c === except) return;

c.classList.remove('is-open');

var btn = c.querySelector('.svc-toggle');

if(btn) btn.setAttribute('aria-expanded','false');

});

}

cards.forEach(function(card){

var btn = card.querySelector('.svc-toggle');

if(!btn) return;

btn.addEventListener('click', function(){

var isOpen = card.classList.contains('is-open');

closeAll(card); /* accordion behavior (only one open) */

card.classList.toggle('is-open', !isOpen);

btn.setAttribute('aria-expanded', String(!isOpen));

});

})();

</script>

Phylicia Daniel

7mo

posted in