/* ========================================================================== Francis Sen — Peaceful Investor Coach — Landing Page Styles Token system: pine (dark) / sand (light) / brass (accent) ========================================================================== */ :root{ --pine-950:#0E2A22; --pine-800:#163A2E; --pine-700:#1D4A3B; --sand-050:#FAF6EE; --sand-100:#F1EAD9; --brass-500:#C79A4B; --brass-600:#B4863B; --brass-100:#F3D9A4; --ink-900:#1B231F; --ink-700:#3B453F; --moss-400:#7C9885; --moss-200:#B9CBBE; --line-soft: rgba(27,35,31,0.10); --font-display:'Fraunces', Georgia, 'Times New Roman', serif; --font-body:'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius-sm: 4px; --radius-md: 10px; } @media (prefers-reduced-motion: reduce){ *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; } } html{ scroll-behavior:smooth; } /* ============ Scroll reveal animations ============ */ /* Progressive enhancement: only hide elements once .js is present on , so the page still shows everything if JavaScript fails to load. */ .js [data-animate]{ opacity: 0; transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .js [data-animate="fade-up"]{ transform: translateY(32px); } .js [data-animate="fade-in"]{ transform: none; } .js [data-animate="zoom-in"]{ transform: scale(.9); } .js [data-animate="slide-left"]{ transform: translateX(-46px); } .js [data-animate="slide-right"]{ transform: translateX(46px); } .js [data-animate].in-view{ opacity: 1; transform: none; } /* Stagger repeated items within the same group */ .timeline-item:nth-child(2){ transition-delay:.12s; } .timeline-item:nth-child(3){ transition-delay:.24s; } .timeline-item:nth-child(4){ transition-delay:.36s; } .profile-row:nth-child(2){ transition-delay:.08s; } .profile-row:nth-child(3){ transition-delay:.16s; } .profile-row:nth-child(4){ transition-delay:.24s; } .profile-row:nth-child(5){ transition-delay:.32s; } .method-step:nth-child(2){ transition-delay:.1s; } .method-step:nth-child(3){ transition-delay:.2s; } .method-step:nth-child(4){ transition-delay:.3s; } .trust-col:nth-child(2){ transition-delay:.08s; } .trust-col:nth-child(3){ transition-delay:.16s; } .trust-col:nth-child(4){ transition-delay:.24s; } .accordion-item:nth-child(2){ transition-delay:.06s; } .accordion-item:nth-child(3){ transition-delay:.12s; } .accordion-item:nth-child(4){ transition-delay:.18s; } .accordion-item:nth-child(5){ transition-delay:.24s; } .accordion-item:nth-child(6){ transition-delay:.3s; } /* Hero load-in (runs immediately, not scroll-triggered) */ .js .hero-anim{ opacity:0; transform: translateY(18px); animation: heroIn .7s cubic-bezier(.22,.61,.36,1) forwards; } .js .hero-anim-1{ animation-delay:.05s; } .js .hero-anim-2{ animation-delay:.15s; } .js .hero-anim-3{ animation-delay:.28s; } .js .hero-anim-4{ animation-delay:.4s; } .js .hero-anim-5{ animation-delay:.5s; } @keyframes heroIn{ to{ opacity:1; transform:none; } } body{ font-family: var(--font-body); color: var(--ink-900); background: var(--sand-050); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1,h2,h3,h4,cite{ font-family: var(--font-display); } a{ text-decoration:none; } .container{ max-width: 1180px; } ::selection{ background: var(--brass-100); color: var(--pine-950); } :focus-visible{ outline: 2.5px solid var(--brass-600); outline-offset: 3px; border-radius: 3px; } .skip-link{ position:absolute; left:-999px; top:0; z-index:2000; background:var(--pine-950); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 8px 0; } .skip-link:focus{ left:0; } /* ============ Buttons ============ */ .btn{ font-family: var(--font-body); font-weight:600; border-radius: var(--radius-sm); padding: .7rem 1.5rem; letter-spacing: .01em; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .btn-brass{ background: var(--brass-500); color: var(--pine-950); border: 1.5px solid var(--brass-500); } .btn-brass:hover, .btn-brass:focus{ background: var(--brass-600); border-color: var(--brass-600); color: var(--pine-950); transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(199,154,75,.55); } .btn-ghost{ background: transparent; color: var(--pine-950); border: 1.5px solid var(--line-soft); } .btn-ghost:hover, .btn-ghost:focus{ border-color: var(--pine-950); color: var(--pine-950); transform: translateY(-2px); } .section--pine .btn-ghost{ color:#fff; border-color: rgba(255,255,255,.28); } .section--pine .btn-ghost:hover{ border-color:#fff; color:#fff; } /* ============ Navbar ============ */ .site-header{ position: sticky; top:0; z-index:1030; background: rgba(250,246,238,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); } .custom-navbar{ padding: .85rem 0; } .brand{ display:flex; align-items:center; gap:.6rem; } .brand-mark-img{ display:block; width:38px; height:38px; border-radius:9px; } .brand-text{ font-family: var(--font-display); font-weight:600; font-size:1.2rem; color: var(--pine-950); } .nav-link{ color: var(--ink-700) !important; font-weight:500; padding: .5rem .9rem !important; position:relative; } .nav-link::after{ content:""; position:absolute; left:.9rem; right:.9rem; bottom:.25rem; height:2px; background: var(--brass-500); transform: scaleX(0); transform-origin:left; transition: transform .25s ease; } .nav-link:hover::after, .nav-link:focus::after{ transform: scaleX(1); } .navbar-toggler{ border:none; padding:.4rem; } .navbar-toggler:focus{ box-shadow:none; } .toggler-bar{ display:block; width:22px; height:2px; background: var(--pine-950); margin:4px 0; border-radius:2px; } /* ============ Sections (generic) ============ */ .section{ padding: 5.5rem 0; } .section--light{ background: var(--sand-050); } .section--sand{ background: var(--sand-100); } .section--pine{ background: var(--pine-950); color: var(--moss-200); } .section-tag{ font-family: var(--font-body); font-weight:600; color: var(--brass-600); margin-bottom:.9rem; font-size: 1rem; } .section-tag--light{ color: var(--brass-100); } .section-title{ font-family: var(--font-display); font-weight:600; font-size: clamp(1.9rem, 3.2vw, 2.75rem); color: var(--pine-950); line-height:1.18; margin-bottom: 1.1rem; } .section-title--light{ color:#fff; } .section-lead{ color: var(--ink-700); font-size:1.08rem; } .section-lead--light{ color: var(--moss-200); } /* ============ Hero ============ */ .hero{ padding: 4.5rem 0 4rem; background: radial-gradient(60% 90% at 85% 10%, rgba(199,154,75,.10), transparent 60%), var(--sand-050); } .eyebrow{ color: var(--brass-600); font-weight:600; margin-bottom:1rem; font-size:.98rem; } .hero-title{ font-family: var(--font-display); font-weight:600; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height:1.12; color: var(--pine-950); margin-bottom: 1.4rem; } .hero-lead{ font-size:1.15rem; color: var(--ink-700); max-width: 46ch; margin-bottom: 2rem; } .hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1.8rem; } .hero-flags{ display:flex; flex-wrap:wrap; gap: 1.4rem; font-size:.95rem; color: var(--ink-700); } .hero-flags li{ display:flex; align-items:center; gap:.45rem; } .hero-flags i{ color: var(--brass-600); } .hero-visual{ position:relative; padding: 1rem 0 3rem; } .growth-line{ width:100%; height:auto; } .grid-line{ opacity:.35; } .drawn-path{ stroke-dasharray: 620; stroke-dashoffset: 620; animation: draw 1.8s ease-out .3s forwards; } @keyframes draw{ to{ stroke-dashoffset:0; } } .pulse-dot{ opacity:0; animation: popIn .4s ease-out 2s forwards; } @keyframes popIn{ from{ opacity:0; transform: scale(0);} to{ opacity:1; transform:scale(1);} } .hero-card{ position:absolute; left:6%; bottom:0; background:#fff; border:1px solid var(--line-soft); border-radius: var(--radius-md); padding: .85rem 1.1rem; display:flex; align-items:center; gap:.8rem; box-shadow: 0 18px 40px -20px rgba(14,42,34,.28); } .hero-card-avatar{ width:42px; height:42px; border-radius:50%; background: var(--pine-950); color: var(--brass-100); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:600; } .hero-card-name{ margin:0; font-weight:700; color:var(--pine-950); font-size:.95rem; } .hero-card-role{ margin:0; color: var(--ink-700); font-size:.8rem; } .hero-stat-chip{ position:absolute; background:#fff; border:1px solid var(--line-soft); border-radius: var(--radius-md); padding:.7rem 1rem; box-shadow: 0 18px 40px -20px rgba(14,42,34,.28); text-align:center; min-width:110px; } .hero-stat-chip--top{ top:0; right:2%; } .hero-stat-chip--bottom{ bottom:14%; right:-2%; } .hero-stat-chip .stat-num{ display:block; font-family: var(--font-display); font-weight:600; font-size:1.4rem; color: var(--pine-950); } .hero-stat-chip .stat-label{ font-size:.72rem; color:var(--ink-700); } @media (max-width: 991.98px){ .hero-stat-chip--top{ top:-1rem; right:0; } .hero-stat-chip--bottom{ bottom:2%; right:0; } .hero-card{ left:0; } } /* ============ Trust strip ============ */ .trust-strip{ background: var(--pine-800); color: var(--sand-050); padding: 2.4rem 0; } .trust-num{ font-family: var(--font-display); font-weight:600; font-size:2rem; margin:0; color:#fff; } .trust-num .stat-num{ color:#fff; } .trust-label{ font-size:.85rem; color: var(--moss-200); margin:0; } /* ============ Story / timeline ============ */ .story-para{ color: var(--ink-700); margin-bottom:1.1rem; } .before-after{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; margin-top:2rem; } .ba-col{ border-radius: var(--radius-md); padding:1.4rem; } .ba-before{ background: #FBEDEA; border:1px solid #EBD3CC; } .ba-after{ background: var(--sand-100); border:1px solid var(--line-soft); } .ba-col h3{ font-size:1rem; margin-bottom:.75rem; color: var(--pine-950); } .ba-col ul{ margin:0; padding-left:1.1rem; color: var(--ink-700); font-size:.92rem; } .ba-col li{ margin-bottom:.45rem; } @media (max-width:575.98px){ .before-after{ grid-template-columns:1fr; } } .timeline{ list-style:none; margin:0; padding:0; position:relative; } .timeline::before{ content:""; position:absolute; left:22px; top:8px; bottom:8px; width:2px; background: var(--line-soft); } .timeline-item{ display:flex; gap:1.4rem; position:relative; padding-bottom: 2.2rem; } .timeline-item:last-child{ padding-bottom:0; } .timeline-index{ flex: 0 0 44px; height:44px; border-radius:50%; background: var(--pine-950); color: var(--brass-100); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:600; font-size:.85rem; z-index:1; } .timeline-item h3{ font-size:1.1rem; margin-bottom:.4rem; color: var(--pine-950); } .timeline-item p{ color: var(--ink-700); margin:0; font-size:.95rem; } /* ============ Who it's for ============ */ .profile-rows{ max-width: 760px; margin: 0 auto; } .profile-row{ display:flex; gap:1.4rem; align-items:flex-start; padding: 1.4rem 0; border-bottom: 1px solid var(--line-soft); } .profile-row:first-child{ border-top: 1px solid var(--line-soft); } .profile-icon{ flex:0 0 52px; height:52px; width:52px; border-radius:50%; background: var(--sand-050); border: 1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; font-size:1.35rem; color: var(--brass-600); } .profile-copy h3{ font-size:1.08rem; margin-bottom:.3rem; color: var(--pine-950); font-family: var(--font-display); font-weight:600; } .profile-copy p{ margin:0; color: var(--ink-700); font-size:.95rem; } .pull-quote{ max-width: 760px; margin: 3rem auto 0; text-align:center; font-family: var(--font-display); font-size:1.35rem; font-weight:500; color: var(--pine-950); line-height:1.5; position:relative; padding: 0 1rem; } /* ============ Method ============ */ .method-path{ display:grid; grid-template-columns: repeat(4,1fr); gap:1.4rem; margin-top:1rem; position:relative; } .method-step{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); padding: 1.6rem 1.4rem; } .method-num{ display:block; font-family: var(--font-display); font-weight:600; font-size:1.6rem; color: var(--brass-500); margin-bottom:.6rem; } .method-step h3{ color:#fff; font-size:1.05rem; margin-bottom:.55rem; } .method-step p{ color: var(--moss-200); font-size:.92rem; margin:0; } @media (max-width: 991.98px){ .method-path{ grid-template-columns: 1fr 1fr; } } @media (max-width: 575.98px){ .method-path{ grid-template-columns: 1fr; } } .quote-card{ max-width: 760px; margin: 3rem auto 0; text-align:center; border-top: 1px solid rgba(255,255,255,.16); padding-top: 2.2rem; } .quote-card p{ font-family: var(--font-display); font-style:italic; font-size:1.2rem; color:#fff; font-weight:400; line-height:1.55; } .quote-card cite{ color: var(--brass-500); font-style:normal; font-size:.9rem; } /* ============ Masterclass / day panels ============ */ .day-panel{ border-radius: var(--radius-md); padding: 2rem; height:100%; } .day-panel--pine{ background: var(--pine-950); color: var(--moss-200); } .day-panel--pine h3{ color:#fff; } .day-panel--brass{ background: var(--sand-100); border: 1px solid var(--line-soft); color: var(--ink-700); } .day-panel--brass h3{ color: var(--pine-950); } .day-tag{ display:inline-block; font-weight:600; font-size:.85rem; color: var(--brass-500); margin-bottom:.6rem; } .day-panel--brass .day-tag{ color: var(--brass-600); } .day-panel h3{ font-family: var(--font-display); font-size:1.4rem; margin-bottom:1.1rem; } .day-panel ul{ margin:0; padding-left:1.2rem; } .day-panel li{ margin-bottom:.7rem; font-size:.98rem; } .feature-flags{ gap: 1.6rem; margin-top: 3rem; } .feature-flags li{ display:flex; align-items:center; gap:.5rem; color: var(--ink-700); font-size:.92rem; } .feature-flags i{ color: var(--brass-600); } .micro-note{ margin-top:.9rem; color: var(--ink-700); font-size:.85rem; } /* ============ Register ============ */ .register-points li{ display:flex; gap:.6rem; margin-bottom:.75rem; color: var(--moss-200); } .register-points i{ color: var(--brass-500); margin-top:.2rem; } .register-card{ background: var(--sand-050); border-radius: var(--radius-md); padding: 2.2rem; box-shadow: 0 30px 60px -25px rgba(0,0,0,.4); } .form-label{ font-weight:600; font-size:.88rem; color: var(--ink-900); } .form-control, .form-select{ border-radius: var(--radius-sm); border: 1.5px solid var(--line-soft); padding: .65rem .85rem; } .form-control:focus, .form-select:focus{ border-color: var(--brass-500); box-shadow: 0 0 0 .2rem rgba(199,154,75,.2); } .form-fineprint{ font-size:.78rem; color: var(--ink-700); margin-top:1rem; margin-bottom:0; } .form-success{ text-align:center; padding: 2.5rem 1rem; } .form-success i{ font-size:2.6rem; color: var(--brass-600); } .form-success h3{ margin:.8rem 0 .4rem; color: var(--pine-950); } .form-success p{ color: var(--ink-700); margin:0; } /* ============ FAQ ============ */ .faq-accordion .accordion-item{ background: transparent; border: none; border-bottom: 1px solid var(--line-soft); } .faq-accordion .accordion-button{ background: transparent; font-family: var(--font-display); font-weight:600; color: var(--pine-950); font-size: 1.05rem; padding: 1.3rem .25rem; box-shadow:none; } .faq-accordion .accordion-button:not(.collapsed){ color: var(--brass-600); background:transparent; } .faq-accordion .accordion-button::after{ filter: none; } .faq-accordion .accordion-body{ color: var(--ink-700); padding: 0 .25rem 1.4rem; font-size:.98rem; } /* ============ Final CTA ============ */ .final-cta{ padding: 5rem 0; background: var(--sand-100); text-align:center; } .final-cta h2{ font-family: var(--font-display); font-weight:600; color: var(--pine-950); font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom:1rem; } .final-cta p{ color: var(--ink-700); max-width:52ch; margin: 0 auto 1.8rem; } /* ============ Footer ============ */ .site-footer{ background: var(--pine-950); color: var(--moss-200); padding: 4rem 0 2rem; } .brand--footer .brand-text{ color:#fff; } .footer-tagline{ margin-top:1rem; font-size:.92rem; max-width:32ch; } .site-footer h4{ color:#fff; font-size:.9rem; font-weight:600; margin-bottom:1rem; } .footer-links li{ margin-bottom:.6rem; } .footer-links a{ color: var(--moss-200); font-size:.9rem; } .footer-links a:hover{ color: var(--brass-500); } .footer-disclaimer{ font-size:.78rem; color: rgba(185,203,190,.7); line-height:1.6; } .site-footer hr{ border-color: rgba(255,255,255,.12); margin: 2rem 0 1.2rem; } .footer-bottom{ font-size:.82rem; color: rgba(185,203,190,.7); margin:0; } .social-icons a{ width:38px; height:38px; border-radius:50%; border: 1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; color: var(--moss-200); font-size:1rem; transition: all .2s ease; } .social-icons a:hover, .social-icons a:focus-visible{ background: var(--brass-500); color: var(--pine-950); border-color: var(--brass-500); transform: translateY(-3px); } /* Extra hover motion for interactive elements */ .timeline-index, .profile-icon{ transition: transform .3s ease, background .3s ease; } .timeline-item:hover .timeline-index{ transform: scale(1.1); } .profile-row:hover .profile-icon{ transform: rotate(-6deg) scale(1.08); background: var(--brass-100); } .method-step, .day-panel{ transition: transform .3s ease, box-shadow .3s ease; } .method-step:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px -22px rgba(0,0,0,.5); } .day-panel:hover{ transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(14,42,34,.35); } /* ============ Mobile sticky CTA ============ */ .mobile-sticky-cta{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:1040; background: var(--brass-500); color: var(--pine-950); text-align:center; font-weight:700; padding:.9rem; border-radius: var(--radius-md); box-shadow: 0 18px 40px -14px rgba(14,42,34,.5); }