initialize premium theme v2 with base CSS framework and website templates
This commit is contained in:
Alaguraj0361
parent
e7e2c90a28
commit
46e61651cc
@ -2962,203 +2962,258 @@ justify-content:center;
|
||||
SECTION 6 — SERVICES PAGE
|
||||
============================================================ */
|
||||
|
||||
/* ── 1. Event Themes & Decor (Accordion + Image) ── */
|
||||
/* ── 1. Event Themes & Decor (Full-Width Tabbed Hero View) ── */
|
||||
.svc-themes-section {
|
||||
padding: 100px 20px;
|
||||
background-color: #fff
|
||||
padding: 80px 20px 100px !important;
|
||||
background-color: #faf8f5 !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.svc-themes-wrap {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 60px;
|
||||
align-items: flex-start;
|
||||
.svc-fw-themes-container {
|
||||
max-width: 1240px !important;
|
||||
margin: 0 auto !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.svc-themes-left {
|
||||
flex: 1;
|
||||
.svc-fw-header {
|
||||
text-align: center !important;
|
||||
margin-bottom: 40px !important;
|
||||
}
|
||||
|
||||
.svc-eyebrow {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: #C9973A;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 16px;
|
||||
display: inline-block;
|
||||
.svc-fw-header .svc-eyebrow {
|
||||
font-size: 0.85rem !important;
|
||||
font-weight: 600 !important;
|
||||
color: #C9973A !important;
|
||||
letter-spacing: 0.12em !important;
|
||||
text-transform: uppercase !important;
|
||||
margin-bottom: 12px !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.svc-themes-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 600;
|
||||
color: #1a1206;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 24px;
|
||||
.svc-fw-header .svc-themes-title {
|
||||
font-size: 3.2rem !important;
|
||||
font-weight: 600 !important;
|
||||
color: #1a1206 !important;
|
||||
line-height: 1.15 !important;
|
||||
margin-bottom: 16px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.svc-themes-intro {
|
||||
font-size: 1.1rem;
|
||||
color: #5a4a35;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 40px;
|
||||
max-width: 90%;
|
||||
.svc-fw-header .svc-themes-intro {
|
||||
font-size: 1.1rem !important;
|
||||
color: #5a4a35 !important;
|
||||
line-height: 1.6 !important;
|
||||
margin: 0 auto !important;
|
||||
max-width: 760px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
/* Custom Accordion */
|
||||
.svc-accordion {
|
||||
border-top: 1px solid #e8dece;
|
||||
/* Nav Pills Bar */
|
||||
.svc-theme-pills-nav {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
gap: 8px !important;
|
||||
margin: 0 auto 50px auto !important;
|
||||
padding: 12px 18px !important;
|
||||
background: #ffffff !important;
|
||||
border-radius: 50px !important;
|
||||
border: 1px solid #e8dece !important;
|
||||
box-shadow: 0 6px 25px rgba(26, 18, 6, 0.05) !important;
|
||||
max-width: 1150px !important;
|
||||
}
|
||||
|
||||
.svc-acc-item {
|
||||
border-bottom: 1px solid #e8dece;
|
||||
.svc-pill-btn {
|
||||
background: transparent !important;
|
||||
border: 1px solid transparent !important;
|
||||
outline: none !important;
|
||||
padding: 10px 22px !important;
|
||||
border-radius: 30px !important;
|
||||
font-size: 0.95rem !important;
|
||||
font-weight: 500 !important;
|
||||
color: #5a4a35 !important;
|
||||
cursor: pointer !important;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
|
||||
margin: 0 !important;
|
||||
line-height: 1.2 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.svc-acc-btn {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 24px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: all 0.3s ease;
|
||||
.svc-pill-btn:hover {
|
||||
color: #C9973A !important;
|
||||
background: rgba(201, 151, 58, 0.08) !important;
|
||||
}
|
||||
|
||||
.svc-acc-icon {
|
||||
font-size: 1.2rem;
|
||||
color: #C9973A;
|
||||
margin-right: 16px;
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
transition: all 0.3s ease;
|
||||
.svc-pill-btn.active {
|
||||
background: #C9973A !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #C9973A !important;
|
||||
box-shadow: 0 4px 18px rgba(201, 151, 58, 0.35) !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.svc-acc-item.active .svc-acc-icon {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
/* Panels Container */
|
||||
.svc-fw-theme-content-wrapper {
|
||||
position: relative !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.svc-acc-label {
|
||||
flex: 1;
|
||||
font-size: 1.3rem;
|
||||
font-family: var(--v2-font-display);
|
||||
font-weight: 500;
|
||||
color: #1a1206;
|
||||
transition: color 0.3s ease;
|
||||
.svc-fw-theme-panel {
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.4s ease-in-out !important;
|
||||
}
|
||||
|
||||
.svc-acc-item.active .svc-acc-label {
|
||||
color: #C9973A;
|
||||
.svc-fw-theme-panel.active {
|
||||
display: block !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.svc-acc-item:hover .svc-acc-label {
|
||||
color: #C9973A;
|
||||
/* Hero Banner (Full-Width Image on Top) */
|
||||
.svc-fw-hero-banner {
|
||||
position: relative !important;
|
||||
width: 100% !important;
|
||||
height: 480px !important;
|
||||
border-radius: 24px !important;
|
||||
overflow: hidden !important;
|
||||
margin-bottom: 40px !important;
|
||||
box-shadow: 0 20px 45px rgba(26, 18, 6, 0.14) !important;
|
||||
background-color: #e8dece !important;
|
||||
}
|
||||
|
||||
.svc-acc-arrow {
|
||||
font-size: 1.2rem;
|
||||
color: #1a1206;
|
||||
transition: transform 0.3s ease, color 0.3s ease;
|
||||
.svc-fw-hero-img {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover !important;
|
||||
object-position: center !important;
|
||||
display: block !important;
|
||||
transition: transform 0.6s ease !important;
|
||||
}
|
||||
|
||||
.svc-acc-item.active .svc-acc-arrow {
|
||||
transform: rotate(90deg);
|
||||
color: #C9973A;
|
||||
.svc-fw-hero-banner:hover .svc-fw-hero-img {
|
||||
transform: scale(1.03) !important;
|
||||
}
|
||||
|
||||
.svc-acc-body {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.6s ease, padding 0.4s ease, opacity 0.3s ease;
|
||||
opacity: 0;
|
||||
.svc-fw-hero-overlay {
|
||||
position: absolute !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
padding: 60px 40px 35px !important;
|
||||
background: linear-gradient(to top, rgba(26, 18, 6, 0.85) 0%, rgba(26, 18, 6, 0.35) 60%, transparent 100%) !important;
|
||||
color: #ffffff !important;
|
||||
z-index: 2 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.svc-acc-item.active .svc-acc-body {
|
||||
max-height: 400px;
|
||||
padding-bottom: 24px;
|
||||
opacity: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 15px; /* for scrollbar */
|
||||
.svc-fw-hero-badge {
|
||||
display: inline-block !important;
|
||||
background: #C9973A !important;
|
||||
color: #ffffff !important;
|
||||
padding: 6px 16px !important;
|
||||
border-radius: 20px !important;
|
||||
font-size: 0.75rem !important;
|
||||
font-weight: 600 !important;
|
||||
letter-spacing: 0.1em !important;
|
||||
text-transform: uppercase !important;
|
||||
margin-bottom: 12px !important;
|
||||
}
|
||||
|
||||
/* Custom scrollbar for accordion body */
|
||||
.svc-acc-body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.svc-acc-body::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.svc-acc-body::-webkit-scrollbar-thumb {
|
||||
background: #d4a373;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.svc-acc-body::-webkit-scrollbar-thumb:hover {
|
||||
background: #c28b55;
|
||||
.svc-fw-hero-title {
|
||||
font-family: var(--v2-font-display), serif !important;
|
||||
font-size: 2.8rem !important;
|
||||
font-weight: 500 !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0 !important;
|
||||
line-height: 1.15 !important;
|
||||
text-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
|
||||
}
|
||||
|
||||
.svc-acc-body p {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.7;
|
||||
color: #5a4a35;
|
||||
margin: 0 0 0 36px;
|
||||
/* Text Content Below */
|
||||
.svc-fw-body {
|
||||
padding: 10px 0 !important;
|
||||
}
|
||||
|
||||
/* Right Sticky Image */
|
||||
.svc-themes-right {
|
||||
flex: 1;
|
||||
position: sticky;
|
||||
top: 120px;
|
||||
.svc-fw-lead {
|
||||
font-size: 1.2rem !important;
|
||||
line-height: 1.75 !important;
|
||||
color: #3d3122 !important;
|
||||
margin-bottom: 35px !important;
|
||||
max-width: 950px !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.svc-themes-img-frame {
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 4/5;
|
||||
box-shadow: 0 20px 50px rgba(26, 18, 6, 0.1);
|
||||
/* Structured Grid */
|
||||
.svc-fw-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
|
||||
gap: 24px !important;
|
||||
margin-top: 30px !important;
|
||||
}
|
||||
|
||||
.svc-themes-img-badge {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
background: #ffffff;
|
||||
color: #1a1206;
|
||||
padding: 8px 16px;
|
||||
border-radius: 30px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
z-index: 2;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
.svc-fw-grid-item {
|
||||
background: #ffffff !important;
|
||||
border: 1px solid #f0e6d8 !important;
|
||||
border-radius: 18px !important;
|
||||
padding: 26px 28px !important;
|
||||
box-shadow: 0 4px 18px rgba(26, 18, 6, 0.04) !important;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
|
||||
}
|
||||
|
||||
.svc-themes-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: opacity 0.25s ease;
|
||||
.svc-fw-grid-item:hover {
|
||||
transform: translateY(-4px) !important;
|
||||
box-shadow: 0 12px 30px rgba(201, 151, 58, 0.14) !important;
|
||||
border-color: #C9973A !important;
|
||||
}
|
||||
|
||||
.svc-themes-img-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 40px 30px 30px;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
||||
z-index: 1;
|
||||
.svc-fw-grid-item h4 {
|
||||
font-family: var(--v2-font-display), serif !important;
|
||||
font-size: 1.25rem !important;
|
||||
font-weight: 600 !important;
|
||||
color: #1a1206 !important;
|
||||
margin: 0 0 10px 0 !important;
|
||||
}
|
||||
|
||||
.svc-themes-img-label {
|
||||
color: #ffffff;
|
||||
font-family: var(--v2-font-display);
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
.svc-fw-grid-item p {
|
||||
font-size: 0.96rem !important;
|
||||
line-height: 1.65 !important;
|
||||
color: #5a4a35 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.svc-fw-hero-banner {
|
||||
height: 360px !important;
|
||||
}
|
||||
.svc-fw-hero-title {
|
||||
font-size: 2.2rem !important;
|
||||
}
|
||||
.svc-theme-pills-nav {
|
||||
border-radius: 24px !important;
|
||||
}
|
||||
.svc-fw-grid {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.svc-fw-hero-banner {
|
||||
height: 280px !important;
|
||||
border-radius: 16px !important;
|
||||
}
|
||||
.svc-fw-hero-title {
|
||||
font-size: 1.7rem !important;
|
||||
}
|
||||
.svc-fw-hero-overlay {
|
||||
padding: 30px 20px 20px !important;
|
||||
}
|
||||
.svc-pill-btn {
|
||||
padding: 8px 16px !important;
|
||||
font-size: 0.85rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 2. CTA Section ── */
|
||||
@ -3280,17 +3335,6 @@ justify-content:center;
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 1024px) {
|
||||
.svc-themes-wrap {
|
||||
flex-direction: column;
|
||||
}
|
||||
.svc-themes-right {
|
||||
position: static;
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.svc-themes-img-frame {
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
.svc-cards-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user