/* ============================================ Clear Path Couples — Global Styles Warm earth tones, mobile-first responsive ============================================ */ /* Google Fonts loaded in HTML : Lora (serif) — headings Inter (sans) — body */ :root { --cream: #FAF6F1; --cream-dark: #F0E9DF; --sage: #7A9A7E; --sage-light: #A8C5AB; --sage-dark: #5C7E60; --terracotta: #C4785B; --terracotta-light: #D9A08A; --terracotta-dark: #A85E42; --charcoal: #3A3632; --warm-gray: #6B635B; --light-gray: #E8E2DA; --white: #FFFFFF; --shadow: 0 2px 12px rgba(58,54,50,.08); --shadow-lg: 0 8px 32px rgba(58,54,50,.10); --radius: 8px; --max-width: 1100px; --transition: .25s ease; } /* ---- Reset ---- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Inter',system-ui,sans-serif; font-size:16px;line-height:1.7; color:var(--charcoal);background:var(--cream); -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:var(--sage-dark);text-decoration:none;transition:color var(--transition)} a:hover{color:var(--terracotta)} h1,h2,h3,h4{font-family:'Lora',Georgia,serif;font-weight:600;line-height:1.3} h1{font-size:clamp(2rem,5vw,3rem)} h2{font-size:clamp(1.5rem,3.5vw,2.2rem)} h3{font-size:clamp(1.15rem,2.5vw,1.5rem)} /* ---- Utility ---- */ .container{width:90%;max-width:var(--max-width);margin:0 auto} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .btn{ display:inline-block;padding:.75rem 1.8rem;border-radius:var(--radius); font-weight:600;font-size:.95rem;text-align:center; transition:all var(--transition);cursor:pointer;border:none; } .btn-primary{background:var(--sage);color:var(--white)} .btn-primary:hover{background:var(--sage-dark);color:var(--white)} .btn-secondary{background:var(--terracotta);color:var(--white)} .btn-secondary:hover{background:var(--terracotta-dark);color:var(--white)} .btn-outline{background:transparent;border:2px solid var(--sage);color:var(--sage)} .btn-outline:hover{background:var(--sage);color:var(--white)} /* ---- Header / Nav ---- */ .site-header{ background:var(--white);border-bottom:1px solid var(--light-gray); position:sticky;top:0;z-index:100; } .nav-wrap{ display:flex;align-items:center;justify-content:space-between; padding:.9rem 0; } .logo{font-family:'Lora',Georgia,serif;font-size:1.35rem;font-weight:700;color:var(--charcoal)} .logo span{color:var(--sage)} .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.25rem} .nav-toggle svg{width:28px;height:28px;stroke:var(--charcoal)} .nav-links{display:flex;gap:1.6rem;list-style:none;align-items:center} .nav-links a{font-size:.9rem;font-weight:500;color:var(--warm-gray)} .nav-links a:hover,.nav-links a.active{color:var(--sage-dark)} @media(max-width:768px){ .nav-toggle{display:block} .nav-links{ display:none;flex-direction:column;gap:0; position:absolute;top:100%;left:0;right:0; background:var(--white);border-bottom:1px solid var(--light-gray); box-shadow:var(--shadow); } .nav-links.open{display:flex} .nav-links li{border-top:1px solid var(--light-gray)} .nav-links a{display:block;padding:.85rem 5%} } /* ---- Hero ---- */ .hero{ padding:4rem 0 3.5rem;text-align:center; background:linear-gradient(170deg,var(--cream) 0%,var(--cream-dark) 100%); } .hero h1{margin-bottom:1rem} .hero p{max-width:640px;margin:0 auto 1.8rem;color:var(--warm-gray);font-size:1.1rem} .hero .btn{margin:.4rem} /* ---- Section defaults ---- */ section{padding:3.5rem 0} section.alt-bg{background:var(--white)} .section-title{text-align:center;margin-bottom:2.5rem} .section-title p{color:var(--warm-gray);max-width:620px;margin:.6rem auto 0} /* ---- Cards (guide grid) ---- */ .card-grid{ display:grid;gap:1.5rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); } .card{ background:var(--white);border-radius:var(--radius); padding:1.8rem;box-shadow:var(--shadow); transition:box-shadow var(--transition),transform var(--transition); } .card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)} .card-icon{font-size:2rem;margin-bottom:.8rem} .card h3{margin-bottom:.5rem} .card p{color:var(--warm-gray);font-size:.93rem;margin-bottom:1rem} .card a{font-weight:600;font-size:.9rem} /* ---- Comparison Table ---- */ .comparison-table{ width:100%;border-collapse:collapse;margin:2rem 0; background:var(--white);border-radius:var(--radius);overflow:hidden; box-shadow:var(--shadow); } .comparison-table th{ background:var(--sage);color:var(--white); padding:.85rem 1rem;text-align:left;font-size:.85rem; font-family:'Inter',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.04em; } .comparison-table td{ padding:.85rem 1rem;border-bottom:1px solid var(--light-gray); font-size:.93rem;vertical-align:top; } .comparison-table tr:last-child td{border-bottom:none} .comparison-table tr:hover td{background:var(--cream)} .comparison-table .rating{color:var(--terracotta);font-weight:600} @media(max-width:640px){ .comparison-table{font-size:.82rem} .comparison-table th,.comparison-table td{padding:.65rem .6rem} } /* ---- Platform Cards ---- */ .platform-card{ background:var(--white);border-radius:var(--radius); padding:2rem;margin-bottom:2rem;box-shadow:var(--shadow); } .platform-card h3{margin-bottom:.3rem} .platform-card .tagline{color:var(--warm-gray);font-size:.9rem;margin-bottom:1rem} .platform-card ul{margin:.8rem 0 1.2rem 1.2rem;color:var(--warm-gray);font-size:.93rem} .platform-card ul li{margin-bottom:.3rem} /* ---- Prose content ---- */ .prose{max-width:780px;margin:0 auto} .prose h2{margin:2.5rem 0 1rem} .prose h3{margin:2rem 0 .8rem} .prose p{margin-bottom:1.1rem} .prose ul,.prose ol{margin:0 0 1.2rem 1.4rem;color:var(--warm-gray)} .prose li{margin-bottom:.35rem} .prose blockquote{ border-left:4px solid var(--sage-light); padding:.8rem 1.2rem;margin:1.5rem 0; background:var(--white);border-radius:0 var(--radius) var(--radius) 0; color:var(--warm-gray);font-style:italic; } .prose .callout{ background:var(--white);border:1px solid var(--sage-light); border-radius:var(--radius);padding:1.4rem;margin:1.8rem 0; } .prose .callout h4{color:var(--sage-dark);margin-bottom:.5rem} .prose .callout p:last-child{margin-bottom:0} /* ---- Book Recommendations ---- */ .book-grid{ display:grid;gap:1.5rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); margin:2rem 0; } .book-card{ background:var(--white);border-radius:var(--radius); padding:1.5rem;box-shadow:var(--shadow);text-align:center; } .book-card h4{margin:.5rem 0 .3rem;font-size:1.05rem} .book-card .author{color:var(--warm-gray);font-size:.85rem;margin-bottom:.8rem} .book-card p{font-size:.9rem;color:var(--warm-gray);margin-bottom:1rem;text-align:left} /* ---- Quiz Teaser ---- */ .quiz-teaser{ background:linear-gradient(135deg,var(--sage) 0%,var(--sage-dark) 100%); color:var(--white);border-radius:var(--radius); padding:2.5rem;text-align:center;margin:2rem 0; } .quiz-teaser h2{color:var(--white);margin-bottom:.6rem} .quiz-teaser p{opacity:.9;margin-bottom:1.4rem;max-width:520px;margin-left:auto;margin-right:auto} .quiz-teaser .btn{background:var(--white);color:var(--sage-dark)} .quiz-teaser .btn:hover{background:var(--cream)} /* ---- CTA Banner ---- */ .cta-banner{ text-align:center;padding:3rem 1.5rem; background:var(--cream-dark);border-radius:var(--radius);margin:2rem 0; } .cta-banner h2{margin-bottom:.6rem} .cta-banner p{color:var(--warm-gray);max-width:540px;margin:0 auto 1.4rem} /* ---- Footer ---- */ .site-footer{ background:var(--charcoal);color:rgba(255,255,255,.7); padding:2.5rem 0 1.5rem;font-size:.85rem; } .footer-inner{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem; } .footer-col h4{color:var(--white);font-family:'Lora',Georgia,serif;margin-bottom:.8rem;font-size:1rem} .footer-col ul{list-style:none} .footer-col li{margin-bottom:.4rem} .footer-col a{color:rgba(255,255,255,.7)} .footer-col a:hover{color:var(--sage-light)} .footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:2rem;padding-top:1.2rem; text-align:center;font-size:.8rem;color:rgba(255,255,255,.45); } .footer-bottom .disclaimer{margin-bottom:.4rem;font-style:italic} /* ---- Contact Form ---- */ .contact-form{max-width:560px;margin:0 auto} .form-group{margin-bottom:1.2rem} .form-group label{display:block;margin-bottom:.3rem;font-weight:500;font-size:.9rem} .form-group input,.form-group textarea,.form-group select{ width:100%;padding:.7rem .9rem;border:1px solid var(--light-gray); border-radius:var(--radius);font-family:'Inter',sans-serif;font-size:.93rem; background:var(--white);transition:border-color var(--transition); } .form-group input:focus,.form-group textarea:focus{ outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(122,154,126,.15); } .form-group textarea{min-height:140px;resize:vertical} /* ---- About page ---- */ .about-values{ display:grid;gap:1.5rem; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); margin:2rem 0; } .value-item{ background:var(--white);padding:1.5rem;border-radius:var(--radius); box-shadow:var(--shadow);text-align:center; } .value-item .icon{font-size:2rem;margin-bottom:.6rem} .value-item h4{margin-bottom:.4rem} .value-item p{font-size:.9rem;color:var(--warm-gray)} /* ---- Breadcrumb ---- */ .breadcrumb{ padding:.8rem 0;font-size:.82rem;color:var(--warm-gray); } .breadcrumb a{color:var(--sage)} .breadcrumb span{margin:0 .4rem} /* ---- Responsive helpers ---- */ @media(max-width:640px){ section{padding:2.5rem 0} .hero{padding:2.8rem 0 2.2rem} .footer-inner{flex-direction:column;gap:1.5rem} }