/* ============================================= ACCRETIVE WEALTH MANAGEMENT — shared style.css ============================================= */ /* ── GOOGLE FONTS (loaded in each HTML ) ── */ /* ── DESIGN TOKENS ── */ :root { /* Dark teal brand palette */ --deep-teal: #0d2e2a; --mid-teal: #1a4a42; --teal: #1e5c50; --green-accent: #4a8c5c; --light-green: #6ab87a; --pale-green: #a8d5b0; --cream-dark: #f4f0e8; --white: #ffffff; --mist: rgba(255,255,255,0.06); --border: rgba(106,184,122,0.25); --gold: #c9a84c; --pale-gold: #e8d5a0; /* Light / index palette (also used for calculator & planning pages) */ --ink: #0a2e28; --forest: #0f3d35; --canopy: #1a5c4e; --fern: #2a7a68; --lime: #6db33f; --sage-light: #a8d87e; --mist-light: #c8ddd8; --cream: #f6f3ee; --sand: #e8e4de; --sage: #7a9e8f; /* Header sizing */ --header-height: 80px; } @keyframes ffSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Jost', sans-serif; background: var(--cream); color: var(--ink); overflow-x: hidden; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } /* ── GLOBAL ANCHOR RESET — prevent browser-default blue links ── */ a { color: inherit; text-decoration: none; } /* ── GRAIN OVERLAY (index only) ── */ body.page-index::before { content: ''; position: fixed; inset: 0; z-index: 1000; background-image: url('./images/bg.jpeg'); opacity: 0.025; pointer-events: none; } /* ── DARK BODY (most inner pages) ── */ body.page-dark { background: var(--deep-teal); color: var(--deep-teal); min-height: 100vh; } /* ============================================ SHARED HEADER / NAV ============================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom: none; z-index: 900; transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s; } /* Global: fixed transparent nav that turns solid on scroll */ .site-header.scrolled { background: rgba(10,46,40,0.97); backdrop-filter: blur(16px); box-shadow: 0 2px 30px rgba(0,0,0,0.3); border-bottom: 1px solid var(--border); } /* Light-theme pages: blend header with the top page header background */ body.page-light .site-header:not(.scrolled) { background: linear-gradient(135deg, var(--forest) 0%, var(--ink) 100%); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } /* Dark pages: ensure header blends with the first hero background */ body.page-dark .site-header:not(.scrolled) { background: rgba(10,46,40,0.72); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(106,184,122,0.14); } .site-header nav { max-width: 1200px; margin: 0 auto; padding: 1.2rem 2.5rem; display: flex; align-items: center; justify-content: space-between; } /* Logo */ .nav-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex-shrink: 0; } .nav-logo svg { height: 48px; width: auto; } /* Desktop nav links */ .site-header nav ul { list-style: none; display: flex; gap: 1.8rem; align-items: center; } .site-header nav ul a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; transition: color 0.25s; white-space: nowrap; } .site-header nav ul a:hover, .site-header nav ul a.active { color: var(--light-green); } .site-header nav ul a.nav-cta { padding: 0.55rem 1.3rem; background: linear-gradient(135deg, var(--green-accent), var(--light-green)); color: var(--deep-teal) !important; border-radius: 6px; font-weight: 600; letter-spacing: 0.1em; transition: opacity 0.25s, box-shadow 0.25s; } .site-header nav ul a.nav-cta:hover { opacity: 0.9; box-shadow: 0 4px 16px rgba(106,179,63,0.4); } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: all 0.3s; } .hamburger.open span:nth-child(1) { transform: none; } .hamburger.open span:nth-child(2) { opacity: 1; } .hamburger.open span:nth-child(3) { transform: none; } /* Mobile full-screen nav */ .mobile-nav { display: none; position: fixed; inset: 0; background: var(--deep-teal); z-index: 950; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.5rem; padding: calc(var(--header-height) + 1.25rem) 1.5rem 2rem; overflow-y: auto; } .mobile-nav.open { display: flex; } .mobile-nav a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 1.25rem; letter-spacing: 0.2em; text-transform: uppercase; font-family: 'Cormorant Garamond', serif; font-weight: 300; transition: color 0.3s; text-align: center; } .mobile-nav a:hover, .mobile-nav a.active { color: var(--light-green); } .mobile-nav a.nav-cta-mobile { color: var(--light-green); } .mobile-nav .close-btn { position: absolute; top: 1.5rem; right: 1.75rem; background: none; border: none; color: rgba(255,255,255,0.6); font-size: 2rem; cursor: pointer; line-height: 1; } /* ============================================ CORRECTED SHARED FOOTER ============================================ */ :root { /* Adding these variables to ensure the colors work together */ --header-height: 88px; --footer-bg: #050f0d; --footer-bottom-bg: #030a09; --accent-green: #99FFBB; /* A bright mint for headers */ --text-main: #FFFFFF; /* Pure white for primary readability */ --text-muted: #A0AFA9; /* Soft silver-green for secondary text */ --text-darker: #8AA399; /* For the very bottom copyright area */ } .site-footer { background: var(--footer-bg); padding: 4rem 2.5rem 0; margin-top: auto; } .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 3rem; padding-bottom: 3rem; } /* The description text under the logo */ .footer-brand p { font-size: 1rem; /* Slightly larger for readability */ color: var(--text-muted); line-height: 1.7; margin-top: 1.2rem; max-width: 280px; } /* Column Headings (QUICK LINKS, etc.) */ .footer-col h4 { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-green); /* Bright mint green */ margin-bottom: 1.5rem; font-weight: 700; } .footer-col ul { list-style: none; padding: 0; } /* Links and Contact Info */ .footer-col ul li a, .footer-col ul li span, .footer-col ul li { font-size: 0.85rem; color: var(--text-main); /* White text makes it pop */ text-decoration: none; display: block; padding: 0.4rem 0; transition: all 0.25s ease; } .footer-col ul li a:hover { color: var(--accent-green); padding-left: 5px; /* Subtle interaction effect */ } /* The very bottom bar */ .footer-bottom { background: var(--footer-bottom-bg); width: 100%; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.08); } .footer-bottom p { font-size: 0.75rem; color: var(--text-darker); } .footer-bottom-links { display: flex; gap: 1rem; } .footer-bottom-links a { font-size: 0.72rem; color: var(--text-darker); text-decoration: none; transition: color 0.25s; } .footer-bottom-links a:hover { color: var(--text-main); } /* Responsive fix for smaller screens */ @media (max-width: 768px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; } .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; } } /* ============================================ ANIMATIONS ============================================ */ @keyframes fadeUp { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:translateY(0); } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } } .reveal { opacity:0; transform:translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.in { opacity:1; transform:translateY(0); } .fade-up { opacity:0; transform:translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-up.visible { opacity:1; transform:translateY(0); } .fade-up.delay-1 { transition-delay: 0.1s; } .fade-up.delay-2 { transition-delay: 0.2s; } .fade-up.delay-3 { transition-delay: 0.3s; } /* ============================================ INDEX PAGE — HOME HERO ============================================ */ .hero { position: relative; height: auto; min-height: clamp(520px, calc(100vh - 92px), 680px); display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; filter: brightness(0.55) saturate(0.8); } .hero-gradient { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,46,40,0.85) 0%, rgba(10,46,40,0.4) 50%, rgba(10,46,40,0.2) 100%); } .hero-content { position: relative; z-index: 2; padding: 0 4rem; max-width: 760px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.8rem; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage-light); margin-bottom: 1.6rem; animation: fadeUp 1s 0.3s both; } .hero-eyebrow::before { content:''; width:40px; height:1px; background:var(--lime); } .hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 6vw, 5.2rem); font-weight: 500; line-height: 1.1; color: white; margin-bottom: 1.5rem; width: auto; max-width: 100%; animation: fadeUp 1s 0.5s both; } .hero h1 em { color: var(--lime); font-style: italic; } .hero p { font-size: 1.05rem; color: rgba(255,255,255,0.75); line-height: 1.8; max-width: 520px; margin-bottom: 2.5rem; animation: fadeUp 1s 0.7s both; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; animation: fadeUp 1s 0.9s both; } .hero-scroll { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.4); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; animation: fadeIn 1.5s 1.5s both; } .scroll-line { width:1px; height:48px; background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent); animation: float 2s ease-in-out infinite; } /* ── BUTTONS (index/shared) ── */ .btn-primary { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--lime); color: white; padding: 0.9rem 2.2rem; border-radius: 100px; font-family: 'Jost', sans-serif; font-size: 0.88rem; font-weight: 500; letter-spacing: 0.06em; text-decoration: none; transition: all 0.3s; box-shadow: 0 6px 24px rgba(109,179,63,0.4); } .btn-primary:hover { background: #5a9e2f; transform: translateY(-2px); box-shadow: 0 10px 32px rgba(109,179,63,0.5); } .btn-ghost { display: inline-flex; align-items: center; gap: 0.6rem; border: 1px solid rgba(255,255,255,0.35); color: white; padding: 0.9rem 2.2rem; border-radius: 100px; font-family: 'Jost', sans-serif; font-size: 0.88rem; font-weight: 400; letter-spacing: 0.06em; text-decoration: none; transition: all 0.3s; } .btn-ghost:hover { border-color: var(--lime); color: var(--lime); } /* ── DARK PAGE BUTTONS (cashflow, services, protection) ── */ .btn-primary-dark { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; background: linear-gradient(135deg, var(--green-accent), var(--light-green)); color: var(--deep-teal); text-decoration: none; border-radius: 8px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; font-family: 'Jost', sans-serif; transition: all 0.3s; box-shadow: 0 4px 24px rgba(106,184,122,0.3); } .btn-primary-dark:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(106,184,122,0.45); } .btn-ghost-dark { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border: 1px solid var(--border); color: rgba(255,255,255,0.65); text-decoration: none; border-radius: 8px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 400; font-family: 'Jost', sans-serif; transition: all 0.3s; } .btn-ghost-dark:hover { border-color: var(--light-green); color: var(--light-green); } /* ============================================ INDEX PAGE — TAGLINE / SECTIONS ============================================ */ .tagline-bar { background: var(--forest); padding: 1.2rem 4rem; display: flex; align-items: center; justify-content: center; gap: 3rem; overflow: hidden; } .tagline-item { display: flex; align-items: center; gap: 0.6rem; color: var(--mist-light); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } .tagline-item .dot { width:5px; height:5px; border-radius:50%; background:var(--lime); flex-shrink:0; } .tagline-divider { width:1px; height:24px; background:rgba(255,255,255,0.1); } section { padding: 6rem 4rem; } .section-label { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lime); margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.6rem; } .section-label::before { content:''; width:32px; height:1px; background:var(--lime); } h2.section-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 500; line-height: 1.2; color: #000000; margin-bottom: 1.2rem; } h2.section-title.light { color: rgb(255, 255, 255); } .section-body { font-size: 0.95rem; color: #5a7570; line-height: 1.9; max-width: 560px; } .section-body.light { color: var(--mist-light); } section-title-white { color: white; } /* ── SERVICES SECTION ── */ .services-section { background: var(--cream); } .services-header { text-align: center; margin-bottom: 4rem; } .services-header .section-label { justify-content: center; } .services-header .section-label::before { display: none; } .services-slider { --slides-to-show: 3; --slider-gap: 1.5rem; position: relative; max-width: 1200px; margin: 0 auto; overflow: hidden; padding: 0 3.5rem; } .slider-container { display: flex; gap: var(--slider-gap); transition: transform 0.5s ease; will-change: transform; } .slide { flex: 0 0 calc((100% - (var(--slider-gap) * (var(--slides-to-show) - 1))) / var(--slides-to-show)); box-sizing: border-box; padding: 1rem 0; } .slider-prev, .slider-next { position: absolute; top: 50%; transform: translateY(-50%); background: var(--lime); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; z-index: 10; } .slider-prev { left: 0; } .slider-next { right: 0; } .slider-prev:hover, .slider-next:hover { background: var(--fern); } .service-card-home { background: white; height:-webkit-fill-available; border-radius: 20px; padding: 1rem; border: 1px solid rgba(0,0,0,0.06); position: relative; overflow: hidden; transition: transform 0.35s, box-shadow 0.35s; } .service-card-home::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--lime),var(--fern)); transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease; } .service-card-home:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(10,46,40,0.12); } .service-card-home:hover::before { transform: scaleX(1); } .service-icon { width:52px; height:52px; background:rgba(109,179,63,0.12); border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; } .service-icon svg { width:24px; height:24px; stroke:var(--lime); fill:none; stroke-width:1.8; } .service-card-home h3 { font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:500; color:var(--ink); margin-bottom:0.8rem; } .service-card-home p { font-size:0.88rem; color:#6b8a85; line-height:1.8; } .service-link { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.8rem; color:var(--lime); text-decoration:none; margin-top:1.2rem; font-weight:500; letter-spacing:0.06em; transition:gap 0.25s; } .service-link:hover { gap: 0.7rem; } /* ── ABOUT SECTION ── */ .about-section { background: var(--ink); display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; } .about-image { position:relative; overflow:hidden; min-height:600px; } .about-image img { width:100%; height:100%; object-fit:cover; object-position:center; } .about-image-overlay { position:absolute; inset:0; background:linear-gradient(to right, transparent, rgba(10,46,40,0.3)); } .about-content { padding: 6rem 5rem; display:flex; flex-direction:column; justify-content:center; } .about-content .section-body { max-width:100%; margin-bottom:1.5rem; } .about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem; border-top:1px solid rgba(255,255,255,0.1); padding-top:2.5rem; } .stat-val { font-family:'Playfair Display',serif; font-size:2.4rem; font-weight:500; color:var(--lime); line-height:1; } .stat-label { font-size:0.75rem; color:var(--mist-light); margin-top:0.4rem; letter-spacing:0.08em; } /* ── APPROACH ── */ .approach-section { background: var(--cream); } .approach-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; } .approach-cards { display:flex; flex-direction:column; gap:1.2rem; } .approach-card { display:flex; gap:1.2rem; align-items:flex-start; background:white; border-radius:14px; padding:1.5rem; border:1px solid rgba(0,0,0,0.06); transition:border-color 0.3s, box-shadow 0.3s; } .approach-card:hover { border-color:var(--lime); box-shadow:0 8px 24px rgba(109,179,63,0.12); } .approach-num { font-family:'Playfair Display',serif; font-size:1.8rem; color:var(--lime); opacity:0.5; line-height:1; flex-shrink:0; width:32px; } .approach-card h4 { font-family:'Playfair Display',serif; font-size:1.05rem; color:var(--ink); margin-bottom:0.4rem; } .approach-card p { font-size:0.84rem; color:#6b8a85; line-height:1.7; } /* ── TEAM ── */ .team-section { background: var(--forest); padding: 6rem 4rem; } .team-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1.4fr; gap:5rem; align-items:center; } .team-photo-wrap { position:relative; } .team-photo-bg { position:absolute; inset:-20px; border-radius:24px; background:linear-gradient(135deg,rgba(109,179,63,0.2),transparent); } .team-photo { position:relative; border-radius:20px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,0.3); } .team-photo img { width:100%; display:block; } .team-badge { position:absolute; bottom:-1px; left:-1px; background:var(--lime); color:white; padding:1rem 1.5rem; border-radius:0 16px 0 20px; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; } .team-content .section-body { max-width:100%; } .specialisms { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:2rem; } .specialism-tag { border:1px solid rgba(109,179,63,0.4); color:var(--sage-light); padding:0.35rem 0.9rem; border-radius:100px; font-size:0.77rem; letter-spacing:0.06em; } /* ── TESTIMONIALS ── */ .testimonials-section { background: var(--cream); padding: 6rem 4rem; } .testimonials-header { text-align:center; margin-bottom:4rem; } .testimonials-header .section-label { justify-content:center; } .testimonials-header .section-label::before { display:none; } .testimonials-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; max-width:1000px; margin:0 auto; } .testimonial-card { background:white; border-radius:20px; padding:2.5rem; border:1px solid rgba(0,0,0,0.06); position:relative; transition:transform 0.3s, box-shadow 0.3s; } .testimonial-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(10,46,40,0.1); } .testimonial-card::before { content:'"'; position:absolute; top:1.5rem; right:2rem; font-family:'Playfair Display',serif; font-size:6rem; line-height:1; color:rgba(109,179,63,0.12); } .stars { display:flex; gap:3px; margin-bottom:1.2rem; } .star { color:#0a2e28; font-size:0.9rem; } .testimonial-text { font-family:'Playfair Display',serif; font-style:italic; font-size:1rem; line-height:1.8; color:var(--ink); margin-bottom:1.5rem; } .testimonial-family { width:56px; height:56px; border-radius:50%; overflow:hidden; border:2px solid var(--lime); flex-shrink:0; } .testimonial-family img { width:100%; height:100%; object-fit:cover; object-position:top; } .testimonial-author { display:flex; align-items:center; gap:1rem; } .author-name { font-weight:500; font-size:0.88rem; color:var(--ink); } .author-role { font-size:0.75rem; color:#9ab5b0; } /* ── CASE STUDIES ── */ .cases-section { background: var(--ink); padding: 6rem 4rem; } .cases-inner { max-width:1200px; margin:0 auto; } .cases-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:3rem; } .cases-list { display:flex; flex-direction:column; gap:0; } .case-item { display:flex; align-items:center; justify-content:space-between; padding:1.5rem 0; border-bottom:1px solid rgba(255,255,255,0.07); cursor:pointer; text-decoration:none; transition:padding-left 0.3s; } .case-item:hover { padding-left:1rem; } .case-item:hover .case-arrow { color:var(--lime); transform:translateX(4px); } .case-num { font-family:'Playfair Display',serif; font-size:0.85rem; color:var(--fern); margin-right:1.5rem; } .case-title { font-family:'Playfair Display',serif; font-size:1.15rem; color:white; flex:1; } .case-tag { font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--mist-light); background:rgba(255,255,255,0.06); padding:0.3rem 0.8rem; border-radius:100px; margin-right:1.5rem; } .case-arrow { color:rgba(255,255,255,0.3); transition:all 0.3s; font-size:1.1rem; } /* ── CTA SECTION ── */ .cta-section { background: linear-gradient(135deg, var(--forest) 0%, var(--canopy) 100%); padding: 7rem 4rem; text-align:center; position:relative; overflow:hidden; } .cta-content { position:relative; z-index:1; } .cta-section h2 { font-family:'Playfair Display',serif; font-size:clamp(2rem,4vw,3.2rem); color:white; margin-bottom:1rem; } .cta-section p { color:var(--mist-light); font-size:1rem; max-width:500px; margin:0 auto 2.5rem; line-height:1.8; } /* ============================================ DARK PAGES — COMMON INNER-PAGE ELEMENTS ============================================ */ /* Hero banner (cashflow, services, protection) */ .hero-banner { position: relative; overflow: hidden; display: flex; background: linear-gradient(135deg, #071a17 0%, var(--deep-teal) 50%, #0f3530 100%); } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(106,184,122,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(106,184,122,0.04) 1px, transparent 1px); background-size: 72px 72px; } .hero-glow { position:absolute; left:-120px; top:20%; width:700px; height:700px; background:radial-gradient(circle,rgba(74,140,92,0.14) 0%,transparent 65%); pointer-events:none; } .hero-glow-right { position:absolute; right:-60px; bottom:0%; width:500px; height:500px; background:radial-gradient(circle,rgba(106,184,122,0.07) 0%,transparent 65%); pointer-events:none; } .mountain-overlay { position:absolute; bottom:0; left:0; right:0; height:120px; background:linear-gradient(to top, var(--deep-teal), transparent); } /* section utility */ .section-eyebrow { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--light-green); font-weight: 600; margin-bottom: 18px; } .section-title-dark { font-family:'Cormorant Garamond',serif; font-size:46px; font-weight:300; color:var(--white); line-height:1.1; margin-bottom:20px; } .section-title-dark em { font-style:italic; color:var(--pale-green); } .section-body-dark { font-size:15px; color:rgba(255,255,255,0.5); font-weight:300; line-height:1.85; margin-bottom:16px; } .section-body-dark strong { color:rgba(255,255,255,0.85); font-weight:500; } .divider { width:48px; height:2px; background:linear-gradient(to right,var(--light-green),transparent); margin:16px 0; } /* Feature rows */ .feature-row { max-width:1200px; margin:0 auto; padding:88px 40px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; } .feature-row.reverse .feature-content { order:2; } .feature-row.reverse .feature-visual { order:1; } .feature-bullets { list-style:none; display:flex; flex-direction:column; gap:12px; margin:24px 0 32px; } .feature-bullets li { display:flex; align-items:flex-start; gap:12px; font-size:14px; color:rgba(255,255,255,0.55); font-weight:300; line-height:1.6; } .bullet-dot { width:20px; height:20px; border-radius:50%; background:rgba(106,184,122,0.12); border:1px solid rgba(106,184,122,0.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; } .bullet-dot svg { width:10px; height:10px; fill:var(--light-green); } .section-sep { border:none; border-top:1px solid var(--border); max-width:1200px; margin:0 auto; } .bg-mid { background:var(--mid-teal); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .bg-dark { background:linear-gradient(180deg,var(--deep-teal),#071a17); border-top:1px solid var(--border); } /* Stats row */ .stats-row { max-width:1200px; margin:0 auto; padding:72px 40px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .stat-card { background:var(--mist); border:1px solid var(--border); border-radius:14px; padding:32px 28px; text-align:center; transition:all 0.3s; position:relative; overflow:hidden; } .stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(to right,var(--green-accent),transparent); } .stat-card:hover { border-color:rgba(106,184,122,0.45); transform:translateY(-3px); } .stat-number { font-family:'Cormorant Garamond',serif; font-size:52px; font-weight:300; color:var(--light-green); line-height:1; margin-bottom:10px; } .stat-label { font-size:12px; color:rgba(255,255,255,0.45); font-weight:300; line-height:1.6; letter-spacing:0.5px; } /* Quote */ .quote-section { padding:80px 40px; text-align:center; } .quote-inner { max-width:780px; margin:0 auto; } .quote-mark { font-family:'Cormorant Garamond',serif; font-size:100px; color:var(--light-green); opacity:0.25; line-height:0.6; display:block; margin-bottom:28px; } .quote-text { font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:300; color:var(--white); line-height:1.5; margin-bottom:24px; } .quote-text em { font-style:italic; color:var(--pale-green); } .quote-attr { font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.3); } /* CTA card */ .cta-inner { max-width:1200px; margin:0 auto; background:linear-gradient(135deg,var(--mid-teal),var(--teal)); border:1px solid var(--border); border-radius:24px; padding:80px; text-align:center; position:relative; overflow:hidden; } .cta-inner h2 { font-family:'Cormorant Garamond',serif; font-size:54px; font-weight:300; color:var(--white); margin-bottom:18px; position:relative; z-index:1; } .cta-inner h2 em { font-style:italic; color:var(--pale-green); } .cta-inner p { font-size:16px; color:rgba(255,255,255,0.5); font-weight:300; max-width:520px; margin:0 auto 40px; line-height:1.8; position:relative; z-index:1; } .cta-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; } /* Service/protection cards */ .services-stack { display:flex; flex-direction:column; gap:24px; } .service-card-dark { display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:20px; overflow:hidden; border:1px solid var(--border); background:var(--mist); transition:border-color 0.4s; position:relative; } .service-card-dark:hover { border-color:rgba(106,184,122,0.5); } .service-card-dark::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(to right,var(--green-accent),transparent); opacity:0; transition:opacity 0.4s; z-index:1; } .service-card-dark:hover::before { opacity:1; } .service-card-dark.reverse { direction:rtl; } .service-card-dark.reverse > * { direction:ltr; } .service-image { position:relative; overflow:hidden; min-height:360px; } .service-image img { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(0.75) saturate(0.8); transition:transform 0.6s ease, filter 0.4s ease; } .service-card-dark:hover .service-image img { transform:scale(1.04); filter:brightness(0.85) saturate(0.9); } .service-image-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(13,46,42,0.5),rgba(26,74,66,0.2)); } .service-num { position:absolute; top:24px; left:24px; font-family:'Cormorant Garamond',serif; font-size:64px; font-weight:300; color: rgb(255 255 255 / 80%); line-height:1; pointer-events:none; } .service-badge-dark { position:absolute; bottom:24px; left:24px; background:rgba(13,46,42,0.85); border:1px solid var(--border); border-radius:20px; padding:6px 14px; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--light-green); font-weight:500; backdrop-filter:blur(8px); } .service-content-dark { padding:52px; display:flex; flex-direction:column; justify-content:center; background:rgba(13,46,42,0.4); } .service-tag-dark { font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--light-green); margin-bottom:18px; font-weight:500; display:flex; align-items:center; gap:10px; } .service-tag-dark::before { content:''; display:block; width:24px; height:1px; background:var(--light-green); } .service-content-dark h3 { font-family:'Cormorant Garamond',serif; font-size:34px; font-weight:400; color:var(--white); line-height:1.15; margin-bottom:20px; } .service-content-dark p { font-size:14px; color:rgba(255,255,255,0.55); line-height:1.85; font-weight:300; margin-bottom:28px; } .service-bullets-dark { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:32px; } .service-bullets-dark li { font-size:13px; color:rgba(255,255,255,0.5); font-weight:300; display:flex; align-items:flex-start; gap:10px; line-height:1.5; } .service-bullets-dark li::before { content:''; display:block; width:6px; height:6px; border-radius:50%; background:var(--light-green); margin-top:6px; flex-shrink:0; } .service-cta-dark { display:inline-flex; align-items:center; gap:10px; font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--light-green); text-decoration:none; font-weight:500; transition:gap 0.3s; background:none; border:none; cursor:pointer; padding:0; } .service-cta-dark:hover { gap:16px; } .service-cta-dark svg { width:16px; height:16px; fill:var(--light-green); } /* Bottom CTA block */ .bottom-cta-dark { background:linear-gradient(135deg,var(--mid-teal),var(--teal)); border:1px solid var(--border); border-radius:20px; padding:64px 80px; text-align:center; margin-top:72px; position:relative; overflow:hidden; } .bottom-cta-dark h2 { font-family:'Cormorant Garamond',serif; font-size:44px; font-weight:300; color:var(--white); margin-bottom:16px; } .bottom-cta-dark h2 em { font-style:italic; color:var(--pale-green); } .bottom-cta-dark p { font-size:15px; color:rgba(255,255,255,0.5); font-weight:300; max-width:480px; margin:0 auto 36px; line-height:1.75; } /* FCA banner */ .fca-banner { background:rgba(74,140,92,0.08); border-top:1px solid rgba(106,184,122,0.15); border-bottom:1px solid rgba(106,184,122,0.15); padding:14px 40px; } .fca-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:12px; font-size:12px; color:rgba(255,255,255,0.5); letter-spacing:0.5px; } .fca-inner svg { width:16px; height:16px; fill:var(--light-green); flex-shrink:0; } .fca-inner strong { color:var(--light-green); font-weight:500; } /* Statement band */ .statement-band { background:linear-gradient(135deg,#2a6040,var(--teal)); border-top:1px solid rgba(106,184,122,0.2); border-bottom:1px solid rgba(106,184,122,0.2); padding:32px 40px; text-align:center; } .statement-band p { font-family:'Cormorant Garamond',serif; font-size:26px; font-weight:300; color:var(--white); letter-spacing:0.3px; max-width:900px; margin:0 auto; line-height:1.55; } .statement-band em { font-style:italic; color:var(--pale-green); } /* Screenshot frames */ .screenshot-frame { border-radius:16px; overflow:hidden; border:1px solid rgba(106,184,122,0.2); box-shadow:0 32px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.04); position:relative; } .screenshot-frame img { width:100%; display:block; } .screenshot-frame::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(to right,var(--light-green),var(--pale-green),transparent); z-index:1; } .screenshot-badge { position:absolute; bottom:-16px; right:24px; background:linear-gradient(135deg,var(--green-accent),var(--light-green)); border-radius:30px; padding:10px 20px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--deep-teal); font-weight:600; box-shadow:0 8px 24px rgba(106,184,122,0.4); } /* Why/intro strip */ .why-strip { background:var(--mid-teal); border-bottom:1px solid var(--border); padding:56px 40px; } .why-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:48px; } .why-card { display:flex; flex-direction:column; gap:12px; } .why-icon { width:44px; height:44px; background:rgba(106,184,122,0.1); border:1px solid var(--border); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:4px; } .why-icon svg { width:22px; height:22px; fill:var(--light-green); } .why-card h4 { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:400; color:var(--white); } .why-card p { font-size:13px; color:rgba(255,255,255,0.45); font-weight:300; line-height:1.75; } /* Services intro */ .services-intro { text-align:center; margin-bottom:72px; } .services-intro h2 { font-family:'Cormorant Garamond',serif; font-size:42px; font-weight:300; color:var(--white); margin-bottom:16px; } .services-intro p { font-size:15px; color:rgba(255,255,255,0.45); font-weight:300; max-width:580px; margin:0 auto; line-height:1.8; } .divider-line { width:56px; height:2px; background:linear-gradient(to right,var(--light-green),transparent); margin:20px auto; } /* Section intro (protection) */ .section-intro { text-align:center; margin-bottom:72px; } .section-intro h2 { font-family:'Cormorant Garamond',serif; font-size:42px; font-weight:300; color:var(--white); margin-bottom:16px; } .section-intro p { font-size:15px; color:rgba(255,255,255,0.45); font-weight:300; max-width:580px; margin:0 auto; line-height:1.8; } /* Needs section */ .needs-section { background:var(--mid-teal); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:72px 40px; } .needs-inner { max-width:1200px; margin:0 auto; } .needs-inner h2 { font-family:'Cormorant Garamond',serif; font-size:38px; font-weight:300; color:var(--white); margin-bottom:12px; text-align:center; } .needs-inner > p { text-align:center; font-size:14px; color:rgba(255,255,255,0.45); margin-bottom:48px; font-weight:300; } .needs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .need-card { background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:14px; padding:28px; transition:all 0.3s; } .need-card:hover { background:rgba(106,184,122,0.06); border-color:rgba(106,184,122,0.4); transform:translateY(-3px); } .need-q { font-size:13px; color:rgba(255,255,255,0.35); letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; font-weight:500; } .need-card h4 { font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:400; color:var(--white); margin-bottom:10px; line-height:1.3; } .need-card p { font-size:13px; color:rgba(255,255,255,0.4); font-weight:300; line-height:1.65; } .need-solution { margin-top:14px; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--light-green); font-weight:500; } /* ============================================ LIGHT THEME PAGES (retirement-calculator, retirement-planning) Body-level light background; header stays dark teal (same as all other pages) ============================================ */ body.page-light { background: var(--cream); color: var(--ink); } /* NOTE: .site-header on page-light pages intentionally uses the global dark teal header styles — no overrides needed. */ .page-header-light { padding: 7rem 2rem 4rem; text-align: center; background: linear-gradient(135deg, var(--forest) 0%, var(--ink) 100%); color: white; } .page-header-light h1 { font-family:'Playfair Display',serif; font-size:3.5rem; margin-bottom:1rem; } .page-header-light p { font-size:1.2rem; opacity:0.9; max-width:700px; margin:0 auto; } .site-header + .disclaimer-banner, .site-header + .mobile-nav + .disclaimer-banner, .mobile-nav + .disclaimer-banner { position: sticky; top: var(--header-height); z-index: 895; margin-top: 0; } body.page-light .site-footer { background: var(--footer-bg); } body.page-light .footer-col ul li a, body.page-light .footer-col ul li span { color: var(--text-main); } body.page-light .footer-col ul li a:hover { color: var(--accent-green); } body.page-light .footer-brand p { color: var(--text-muted); } body.page-light .footer-col h4 { color: var(--accent-green); } body.page-light .footer-bottom { background: var(--footer-bottom-bg) !important; } body.page-light .footer-bottom p, body.page-light .footer-bottom-links a { color: var(--text-darker); } body.page-light .footer-bottom-links a:hover { color: var(--text-main); } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { .services-slider { --slides-to-show: 2; padding: 0 3rem; } .about-section { grid-template-columns: 1fr; } .about-image { min-height:400px; } .team-inner { grid-template-columns: 1fr; } .testimonials-grid { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr 1fr; } .stats-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 960px) { .hero-inner-dark { grid-template-columns: 1fr; gap:48px; } .feature-row { grid-template-columns: 1fr; gap:40px; padding:60px 24px; } .feature-row.reverse .feature-content { order:1; } .feature-row.reverse .feature-visual { order:2; } .approach-inner { grid-template-columns: 1fr; gap:3rem; } .service-card-dark, .service-card-dark.reverse { grid-template-columns: 1fr; direction: ltr; } .service-image { min-height:240px; } .service-content-dark { padding:36px 28px; } .why-inner { grid-template-columns: 1fr; gap:28px; } .needs-grid { grid-template-columns: 1fr; } .bottom-cta-dark { padding:40px 28px; } .cta-inner { padding:48px 28px; } .cta-inner h2 { font-size:36px; } } @media (max-width: 768px) { :root { --header-height: 76px; } .site-header nav { padding: 1rem 1.5rem; } .site-header nav ul { display: none; } .hamburger { display: flex; } section { padding: 4rem 1.5rem; } .hero { align-items: flex-end; } .hero-content { padding: 2.5rem 1.5rem 5rem; max-width: 100%; } .hero h1 { font-size: clamp(2.8rem, 13vw, 4rem); } .hero p { max-width: 100%; font-size: 1rem; } .tagline-bar { padding:1rem 1.5rem; gap:1rem; flex-wrap:wrap; } .services-slider { --slides-to-show: 1; --slider-gap: 1rem; padding: 0 2.75rem; } .services-slider .slide { padding: 0; } .slider-prev, .slider-next { display: block; } .about-section { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; padding:2rem 0; } .footer-bottom { padding:1rem 1.5rem; flex-direction:column; gap:0.5rem; text-align:center; } .cases-header { flex-direction:column; align-items:flex-start; gap:1rem; } .statement-band p { font-size:20px; } .services-stack { gap:16px; } .hero-banner { min-height: 300px; } .hero-inner-dark { padding:60px 24px; } .page-header-light h1 { font-size:2.5rem; } .page-header-light { padding: 5rem 1.5rem 3rem; } .testimonials-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .hero-content { padding: 4rem 1rem 4rem; } .hero h1 { font-size: clamp(2.3rem, 12vw, 3.3rem); } .services-slider { padding: 0 2.5rem; } } @media (max-width: 600px) { .team-section, .cases-section, .cta-section, .testimonials-section, .about-content, .needs-section, .site-footer, .services-section-dark { padding: 2rem 2rem; } } @media (max-width: 600px) { .content-section, .bottom-cta, .disclaimer, .bottom-cta-dark , .front-page { padding: 1rem 1rem !important; } } @media (max-width: 600px) { .calculator-section { padding: 0.5rem !important; } }