/** * about.css - About Page Specific Styles * Holiday Lights Decor - Multi-Franchise Template * * Loaded via:$page_css = ['about.css'] * Dependencies:main.css (global),pages-common.css (shared components) * * @version 10.0.0 (INTERSTATE) */ /* ========================================================================== ABOUT HERO ========================================================================== */ .about-hero{position:relative;min-height:450px;display:flex;align-items:center;justify-content:center;padding:140px 0 80px;overflow:hidden;} .about-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:1;} .about-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,61,31,0.92) 0%,rgba(9,40,22,0.88) 100%);} .about-hero .container{position:relative;z-index:2;} .about-hero-content{text-align:center;color:#fff;max-width:800px;margin:0 auto;} .about-hero .hero-label{display:inline-block;background:rgba(126,217,87,0.2);color:#7ed957;padding:8px 20px;border-radius:30px;font-size:0.9rem;font-weight:500;margin-bottom:20px;text-transform:uppercase;letter-spacing:1px;} .about-hero h1{font-family:var(--font-heading,'Playfair Display',serif);font-size:clamp(2rem,5vw,3.2rem);margin-bottom:16px;line-height:1.2;} .about-hero p{font-size:1.2rem;opacity:0.9;line-height:1.6;} .breadcrumb-nav{padding:20px 0;background:var(--color-bg-alt,#f8f9fa);border-bottom:1px solid rgba(0,0,0,0.05);} .breadcrumb{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0;font-size:0.9rem;} .breadcrumb li{display:flex;align-items:center;gap:8px;} .breadcrumb li:not(:last-child)::after{content:"›";color:var(--color-text-muted,#666);} .breadcrumb a{color:var(--color-primary,#228b22);text-decoration:none;transition:color 0.3s;} .breadcrumb a:hover{color:var(--color-primary-dark,#1a472a);} .breadcrumb li[aria-current="page"]{color:var(--color-text-muted,#666);} .about-story-section{padding:100px 0;background:var(--color-bg,#fff);} .about-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;} .about-story-content .section-label{display:inline-block;color:var(--color-primary,#228b22);font-size:0.9rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;} .about-story-content h2{font-family:var(--font-heading,'Playfair Display',serif);font-size:clamp(1.8rem,4vw,2.5rem);color:var(--color-text,#2d2d2d);margin-bottom:24px;line-height:1.2;} .about-story-content .lead{font-size:1.15rem;color:var(--color-text-muted,#666);line-height:1.8;margin-bottom:20px;} .about-story-content p{color:var(--color-text-muted,#666);line-height:1.8;margin-bottom:20px;} .about-stats{display:flex;gap:40px;margin-top:40px;padding-top:30px;border-top:1px solid rgba(0,0,0,0.08);} .about-stat{text-align:center;} .about-stat .stat-number{display:block;font-family:var(--font-heading,'Playfair Display',serif);font-size:2.5rem;font-weight:700;color:var(--color-primary,#228b22);line-height:1;margin-bottom:8px;} .about-stat .stat-label{display:block;font-size:0.85rem;color:var(--color-text-muted,#666);} .about-story-image{position:relative;} .about-story-image img{width:100%;border-radius:20px;box-shadow:0 25px 60px rgba(0,0,0,0.15);} .about-story-image .image-badge{position:absolute;bottom:-20px;left:-20px;background:linear-gradient(135deg,var(--color-primary,#228b22),var(--color-primary-dark,#1a472a));color:#fff;padding:20px 30px;border-radius:12px;text-align:center;box-shadow:0 10px 30px rgba(34,139,34,0.3);} .about-story-image .image-badge span{display:block;font-size:0.8rem;opacity:0.9;margin-bottom:4px;} .about-story-image .image-badge strong{display:block;font-size:1.8rem;font-weight:700;} .about-values-section{padding:100px 0;background:var(--color-bg-alt,#f8f9fa);} .values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;} .value-card{background:var(--color-bg,#fff);padding:40px 30px;border-radius:16px;text-align:center;box-shadow:0 5px 20px rgba(0,0,0,0.05);transition:all 0.3s ease;} .value-card:hover{transform:translateY(-8px);box-shadow:0 15px 40px rgba(0,0,0,0.1);} .value-icon{width:80px;height:80px;background:linear-gradient(135deg,var(--color-primary,#228b22),var(--color-primary-dark,#1a472a));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:#fff;box-shadow:0 8px 25px rgba(34,139,34,0.25);} .value-icon svg{width:36px;height:36px;} .value-card h3{font-family:var(--font-heading,'Playfair Display',serif);font-size:1.25rem;color:var(--color-text,#2d2d2d);margin-bottom:12px;} .value-card p{font-size:0.9rem;color:var(--color-text-muted,#666);line-height:1.7;} .about-why-section{padding:100px 0;background:var(--color-bg,#fff);} .why-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1100px;margin:0 auto;} .why-card{padding:30px;border:1px solid rgba(0,0,0,0.08);border-radius:16px;transition:all 0.3s ease;} .why-card:hover{border-color:var(--color-primary,#228b22);box-shadow:0 10px 30px rgba(34,139,34,0.1);} .why-card-icon{width:50px;height:50px;background:linear-gradient(135deg,rgba(34,139,34,0.1),rgba(34,139,34,0.05));border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--color-primary,#228b22);} .why-card-icon svg{width:24px;height:24px;} .why-card h3{font-family:var(--font-heading,'Playfair Display',serif);font-size:1.15rem;color:var(--color-text,#2d2d2d);margin-bottom:12px;} .why-card p{font-size:0.9rem;color:var(--color-text-muted,#666);line-height:1.7;} .about-areas-section{padding:100px 0;background:linear-gradient(135deg,var(--color-primary,#228b22),var(--color-primary-dark,#1a472a));color:#fff;} .about-areas-section .section-label{color:rgba(255,255,255,0.8);} .about-areas-section .section-title{color:#fff;} .about-areas-section .section-subtitle{color:rgba(255,255,255,0.85);} .about-areas-section .section-star svg{fill:#7ed957;} .areas-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:40px;max-width:1100px;margin:0 auto;} .area-column h3{font-family:var(--font-heading,'Playfair Display',serif);font-size:1.1rem;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid rgba(255,255,255,0.2);} .area-column ul{list-style:none;padding:0;margin:0;} .area-column li{font-size:0.9rem;opacity:0.9;padding:6px 0;transition:all 0.3s;} .area-column li:hover{opacity:1;padding-left:8px;} .areas-note{text-align:center;margin-top:50px;font-size:1rem;opacity:0.9;} .areas-note a{color:#fff;text-decoration:underline;font-weight:500;} .areas-note a:hover{color:#7ed957;} /* ========================================================================== TEAM SECTION ========================================================================== */ .about-team-section{padding:4.5rem 0;background:#fff;} .about-team-section .section-subtitle{color:var(--text-light);font-size:1.05rem;max-width:560px;margin:0.75rem auto 0;} .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.5rem;max-width:900px;margin-left:auto;margin-right:auto;} .team-card{text-align:center;padding:2rem 1.5rem;background:var(--light);border-radius:16px;border:1px solid #e5e7eb;transition:all 0.3s ease;} .team-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,0.06);} .team-avatar{width:100px;height:100px;border-radius:50%;overflow:hidden;margin:0 auto 1.25rem;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,0.1);} .team-avatar img{width:100%;height:100%;object-fit:cover;} .team-card h3{font-size:1.1rem;color:var(--text);margin-bottom:0.25rem;} .team-role{display:block;font-size:0.85rem;color:var(--primary);font-weight:600;margin-bottom:0.75rem;} .team-card p{font-size:0.88rem;color:var(--text-light);line-height:1.6;} /* ========================================================================== ABOUT CTA SECTION ========================================================================== */ .about-cta-section{padding:100px 0 200px;background:var(--color-bg-alt,#f8f9fa);text-align:center;} .about-cta-content{max-width:700px;margin:0 auto;} .about-cta-section h2{font-family:var(--font-heading,'Playfair Display',serif);font-size:clamp(1.8rem,4vw,2.5rem);color:var(--color-text,#2d2d2d);margin-bottom:16px;} .about-cta-section p{font-size:1.15rem;color:var(--color-text-muted,#666);margin-bottom:30px;} .about-cta-buttons{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;} .btn-outline-light{background:transparent;border:2px solid var(--color-text,#2d2d2d);color:var(--color-text,#2d2d2d);padding:14px 28px;border-radius:8px;font-weight:600;display:inline-flex;align-items:center;gap:8px;transition:all 0.3s ease;} .btn-outline-light:hover{background:var(--color-text,#2d2d2d);color:#fff;} .btn-outline-light svg{width:18px;height:18px;} @media (max-width:1200px){.values-grid{grid-template-columns:repeat(2,1fr);} .areas-grid{grid-template-columns:repeat(3,1fr);} .team-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:991px){.about-story-grid{grid-template-columns:1fr;gap:50px;} .about-story-image{order:-1;} .about-story-image .image-badge{bottom:-15px;left:auto;right:20px;} .why-cards-grid{grid-template-columns:repeat(2,1fr);} .areas-grid{grid-template-columns:repeat(2,1fr);gap:30px;}} @media (max-width:768px){.about-hero{min-height:350px;padding:120px 0 60px;} .about-stats{flex-wrap:wrap;justify-content:center;gap:30px;} .about-stat{flex:1 1 120px;} .values-grid,.why-cards-grid,.team-grid{grid-template-columns:1fr;} .areas-grid{grid-template-columns:1fr;text-align:center;} .area-column h3{border-bottom:none;padding-bottom:0;} .area-column li:hover{padding-left:0;} .about-cta-section{padding:80px 0 160px;} .about-cta-buttons{flex-direction:column;align-items:center;}} @media (max-width:480px){.about-story-image .image-badge{padding:15px 20px;} .about-story-image .image-badge strong{font-size:1.4rem;} .team-avatar{width:140px;height:140px;}}