/* ============================================================ Spirit Eagle Publishing — Brand styles Layered on top of Bootstrap 5. Bootstrap is loaded first in each page's ; these rules add the brand look & feel. ============================================================ */ :root{ --cream:#FBF7EE; --cream-card:#FCFAF4; --green:#2E5A3B; --green-hover:#3B6E49; --green-dark:#21422B; --green-darkest:#1A3421; --sage:#E7EFE0; --sage-2:#EFF3E9; --gold:#E7D3A1; --gold-dark:#9A7B3A; --gold-line:#C9B27E; --ink:#2A3327; --muted:#5F6B58; --muted-2:#48543F; --amazon:#C9873A; --amazon-hover:#B0742E; --serif:'Spectral', Georgia, 'Times New Roman', serif; --sans:'Work Sans', system-ui, -apple-system, sans-serif; --shadow-card:0 12px 30px rgba(33,66,43,.08); --shadow-lift:0 24px 50px rgba(33,66,43,.16); } body{ font-family:var(--sans); color:var(--ink); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; } img{ max-width:100%; } a{ text-decoration:none; } h1,h2,h3{ margin:0; } /* ---------- Width wrapper ---------- */ .container-sep{ width:100%; max-width:1220px; margin-inline:auto; padding-inline:clamp(18px,5vw,32px); } .container-sep--narrow{ max-width:1000px; } .container-sep--mid{ max-width:1120px; } /* ---------- Sections ---------- */ .section{ padding:clamp(56px,8vw,96px) 0; } .section--sage{ background:var(--sage); } .section--green{ background:var(--green); } .eyebrow{ letter-spacing:.14em; text-transform:uppercase; font-size:12.5px; font-weight:700; color:var(--gold-dark); margin-bottom:12px; } .eyebrow--cream{ color:var(--gold); } .section-head{ text-align:center; max-width:660px; margin:0 auto 44px; } .section-title{ font-family:var(--serif); font-weight:600; font-size:clamp(28px,4vw,44px); line-height:1.1; color:var(--green-dark); } .section-sub{ margin-top:14px; color:var(--muted); font-size:17px; } .head-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; justify-content:space-between; margin-bottom:40px; } .link-arrow{ color:var(--green); font-weight:600; } .link-arrow:hover{ color:var(--green-dark); } /* ---------- Buttons (standalone brand buttons) ---------- */ .btn-sep{ cursor:pointer; display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:999px; font-weight:600; font-size:16px; padding:15px 30px; transition:background .18s ease, color .18s ease; text-decoration:none; } .btn-sep--green{ background:var(--green); color:#fff; } .btn-sep--green:hover{ background:var(--green-dark); color:#fff; } .btn-sep--cream{ background:rgba(255,255,255,.96); color:var(--green-dark); } .btn-sep--cream:hover{ background:#fff; color:var(--green-dark); } .btn-sep--gold{ background:var(--gold); color:var(--green-dark); } .btn-sep--gold:hover{ background:#fff; color:var(--green-dark); } .btn-sep--outline{ background:#fff; color:var(--green); border:2px solid var(--green); } .btn-sep--outline:hover{ background:var(--green); color:#fff; } .btn-sep--amazon{ background:var(--amazon); color:#fff; padding:11px 22px; font-size:14px; } .btn-sep--amazon:hover{ background:var(--amazon-hover); color:#fff; } .btn-sep--sm{ padding:11px 22px; font-size:14px; } /* ---------- Navbar ---------- */ .sep-header{ background:rgba(251,247,238,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(33,66,43,.10); padding-top:10px; padding-bottom:10px; } .sep-header .container-sep{ display:flex; align-items:center; gap:16px; } .sep-brand{ display:flex; align-items:center; gap:11px; padding:0; } .brand-mark{ width: 250px; /* height:38px; */ border-radius:11px; /* background:var(--green); */ display:inline-flex; align-items:center; justify-content:center; color:var(--gold); font-family:var(--serif); font-weight:700; font-size:20px; } .brand-text{ display:flex; flex-direction:column; line-height:1.05; } .brand-name{ font-family:var(--serif); font-weight:600; font-size:18px; color:var(--green-dark); } .brand-sub{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#8A9382; font-weight:600; } .sep-header .navbar-nav{ gap:2px; } .sep-header .nav-link{ cursor:pointer; padding:9px 13px; border-radius:9px; font-size:14.5px; font-weight:500; color:#3A4636; transition:background .15s ease, color .15s ease; } .sep-header .nav-link:hover, .sep-header .nav-link:focus{ background:rgba(46,90,59,.08); color:var(--green-dark); } .sep-header .nav-link.active{ color:var(--green-dark); background:rgba(46,90,59,.10); } .sep-header .dropdown-menu{ border:1px solid rgba(33,66,43,.08); border-radius:14px; box-shadow:0 20px 44px rgba(33,66,43,.18); padding:8px; margin-top:8px; } .sep-header .dropdown-item{ padding:10px 12px; border-radius:9px; font-size:14px; color:#3A4636; } .sep-header .dropdown-item:hover, .sep-header .dropdown-item:focus{ background:var(--sage-2); color:var(--green-dark); } .sep-header .nav-cta{ margin-left:8px; padding:11px 20px; font-size:14px; } .navbar-toggler{ border:1px solid rgba(33,66,43,.16); padding:8px 10px; } .navbar-toggler:focus{ box-shadow:none; } @media (max-width: 991.98px){ .sep-header .navbar-nav{ gap:0; padding-top:8px; } .sep-header .nav-link{ padding:12px 8px; font-size:16px; border-bottom:1px solid rgba(33,66,43,.06); border-radius:0; } .sep-header .nav-cta{ margin:12px 0 4px; } } /* ---------- Hero ---------- */ .hero{ position:relative; display:flex; align-items:center; background-color:var(--green-dark); overflow:hidden; color:#fff; } .hero--home{ min-height:clamp(500px,72vh,720px); } .hero--md{ min-height:clamp(360px,48vh,460px); } .hero--sm{ min-height:clamp(320px,40vh,400px); } .hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; } .hero-content{ position:relative; z-index:1; width:100%; padding-top:56px; padding-bottom:56px; } .hero-copy{ max-width:660px; } .h1{ font-family:var(--serif); font-weight:600; font-size:clamp(34px,5.4vw,60px); line-height:1.04; color:#fff; margin-bottom:18px; } .h1--home{ font-size:clamp(36px,6vw,66px); } .lead-txt{ font-size:clamp(16px,2vw,21px); line-height:1.6; color:rgba(255,255,255,.92); max-width:560px; margin:0; } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; } /* ---------- Cards ---------- */ .path-card{ cursor:pointer; background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 14px 34px rgba(33,66,43,.10); border:1px solid rgba(33,66,43,.06); transition:transform .2s ease, box-shadow .2s ease; display:block; color:inherit; height:100%; } .path-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); color:inherit; } .path-card-img{ height:180px; background-size:cover; background-position:center; } .path-card-body{ padding:22px 22px 26px; } .card-title{ font-family:var(--serif); font-weight:600; font-size:21px; color:var(--green-dark); margin-bottom:8px; } .card-text{ color:var(--muted); font-size:14.5px; line-height:1.55; margin-bottom:14px; } /* checklist */ .checklist-card{ background:#fff; border-radius:20px; padding:30px; box-shadow:0 18px 40px rgba(33,66,43,.12); border:1px solid rgba(33,66,43,.06); } .checklist-inner{ border:2px dashed var(--gold-line); border-radius:14px; padding:24px; } .check-row{ display:flex; align-items:center; gap:12px; margin-bottom:12px; } .check-row:last-child{ margin-bottom:0; } .check-box{ width:20px; height:20px; border-radius:6px; border:2px solid var(--green); flex:none; } .check-box--filled{ background:var(--green); } .check-line{ height:9px; flex:1; background:var(--sage); border-radius:5px; } /* book covers */ .book{ display:flex; flex-direction:column; height:100%; } .book-cover{ aspect-ratio:3/4; border-radius:12px; background:linear-gradient(160deg,#367049,#21422B); box-shadow:0 18px 40px rgba(33,66,43,.24); display:flex; flex-direction:column; justify-content:space-between; padding:22px; color:#fff; transition:transform .2s ease; height: 450px; display: block; /* Makes the tag take up space */ width: 100%; /* Or set a specific fixed width */ height: 450px; /* Adjust to your desired cover height */ background-size: cover; /* Stretches/crops the image to fill the div */ background-position: center; /* Centers the image within the div */ background-repeat: no-repeat; } a.book-cover:hover{ transform:translateY(-6px); color:#fff; } .book-series{ letter-spacing:.14em; text-transform:uppercase; font-size:9.5px; font-weight:700; color:var(--gold); line-height:1.5; } .book-rule{ height:2px; width:34px; background:#D9B36B; margin-bottom:12px; } .book-title{ font-family:var(--serif); font-size:22px; line-height:1.12; font-weight:600; } .book-author{ font-size:11.5px; color:rgba(255,255,255,.72); } .book-caption{ margin-top:14px; color:var(--muted); font-size:14px; line-height:1.5; } .book-cover--soon{ background:var(--sage-2); border:2px dashed var(--gold-line); align-items:center; justify-content:center; text-align:center; color:var(--green); } .book-heading{ font-family:var(--serif); font-weight:600; font-size:18px; color:var(--green-dark); margin:18px 2px 6px; } .book-desc{ margin:0 2px 16px; color:var(--muted); font-size:14.5px; flex:1; } /* bundle */ .bundle{ background:var(--green-dark); border-radius:28px; overflow:hidden; color:#fff; } .bundle-body{ padding:clamp(36px,5vw,64px); } .bundle-body .lead-txt{ color:rgba(255,255,255,.85); margin-bottom:28px; } .bundle-title{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.6vw,40px); line-height:1.1; margin-bottom:16px; } .bundle-img{ background-size:cover; background-position:center; min-height:280px; height:100%; } .bundle-num{ display:inline-block; background:var(--sage-2); color:var(--green); font-weight:700; width:34px; height:34px; line-height:34px; border-radius:50%; margin-bottom:18px; text-align:center; } .bundle-step{ text-align:center; } .bundle-step .book-cover{ max-width:260px; margin:0 auto 16px; } .bundle-step .book-title,.bundle-step .book-author{ text-align:left; } .bundle-cta{ text-align:center; margin-top:48px; background:var(--sage); border-radius:24px; padding:clamp(32px,5vw,52px); } /* posts */ .post-card{ cursor:pointer; display:block; background:#fff; border-radius:20px; box-shadow:var(--shadow-card); border:1px solid rgba(33,66,43,.06); overflow:hidden; transition:transform .2s ease; height:100%; color:inherit; } .post-card:hover{ transform:translateY(-5px); color:inherit; } .post-card--pad{ padding:26px; } .post-img{ height:160px; background-size:cover; background-position:center; } .post-body{ padding:24px; } .post-tag{ display:inline-block; background:var(--sage-2); color:var(--green); font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:5px 11px; border-radius:999px; margin-bottom:14px; } .post-title{ font-family:var(--serif); font-weight:600; font-size:20px; line-height:1.25; color:var(--green-dark); margin-bottom:10px; } .post-excerpt{ color:var(--muted); font-size:14.5px; line-height:1.55; margin:0; } /* guides */ /* Card shell */ .guide-card{ background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-card); border:1px solid rgba(33,66,43,.06); display:flex; flex-direction:column; height:100%; } /* Preview panel — contains a real tag for guaranteed display */ .guide-preview{ position:relative; overflow:hidden; height:220px; /* fixed height so every card top is consistent */ flex-shrink:0; background:var(--sage-2); /* shows while image loads */ } /* The inside .guide-preview fills the panel like object-fit:cover */ .guide-preview img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center top; } /* Optional soft fade at the bottom of the photo into the white card body */ .guide-preview::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:40px; background:linear-gradient(to bottom, transparent, rgba(255,255,255,.22)); pointer-events:none; } /* Card body */ .guide-body{ padding:24px; display:flex; flex-direction:column; flex:1; } .guide-name{ font-family:var(--serif); font-weight:600; font-size:19px; color:var(--green-dark); margin-bottom:8px; } .guide-desc{ color:var(--muted); font-size:14.5px; flex:1; margin-bottom:20px; } /* steps / start */ .step-card{ background:#fff; border-radius:20px; padding:28px; box-shadow:var(--shadow-card); height:100%; } .step-num{ font-family:var(--serif); font-size:34px; color:var(--gold-line); font-weight:700; margin-bottom:12px; } .step-title{ font-family:var(--serif); font-weight:600; font-size:19px; color:var(--green-dark); margin-bottom:8px; } .start-card{ cursor:pointer; display:block; background:#fff; border-radius:20px; padding:28px; box-shadow:var(--shadow-card); border:1px solid rgba(33,66,43,.06); transition:transform .2s ease; height:100%; color:inherit; } .start-card:hover{ transform:translateY(-5px); color:inherit; } /* topic */ .topic-intro{ max-width:760px; margin:0 auto; text-align:center; } .topic-intro p{ font-family:var(--serif); font-size:clamp(20px,2.6vw,27px); line-height:1.5; color:var(--green); font-style:italic; margin:0; } .tip-card{ background:#fff; border-radius:20px; padding:28px; box-shadow:var(--shadow-card); border:1px solid rgba(33,66,43,.06); height:100%; } .tip-icon{ width:40px; height:40px; border-radius:11px; background:var(--sage-2); display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .tip-dot{ width:14px; height:14px; border-radius:50%; background:var(--green); } .topic-book-title{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,3vw,30px); color:var(--green-dark); margin-bottom:14px; } /* callout */ .callout{ text-align:center; background:var(--sage); border-radius:24px; padding:clamp(32px,5vw,56px); } .callout h2{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,3.4vw,34px); color:var(--green-dark); max-width:640px; margin:0 auto 12px; } .callout p{ color:var(--muted-2); font-size:17px; max-width:560px; margin:0 auto; } /* signup band */ .signup-band{ max-width:820px; margin:0 auto; text-align:center; color:#fff; } .signup-band h2{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.6vw,40px); line-height:1.12; color:#fff; margin-bottom:16px; } .signup-band p{ color:rgba(255,255,255,.88); font-size:17px; max-width:520px; margin:0 auto 28px; } /* about / prose */ .round-img{ border-radius:24px; overflow:hidden; box-shadow:0 20px 44px rgba(33,66,43,.14); min-height:320px; background-size:cover; background-position:center; } .prose h2{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,3.4vw,34px); line-height:1.15; color:var(--green-dark); margin-bottom:18px; } .prose p{ color:var(--muted-2); font-size:17px; margin-bottom:16px; } .prose p:last-child{ margin-bottom:0; } .stat-num{ font-family:var(--serif); font-size:clamp(30px,4vw,44px); font-weight:700; color:var(--green); } .stat-label{ margin-top:8px; color:var(--muted-2); } .intro-lead{ color:var(--muted-2); font-size:17px; margin-bottom:20px; } /* signup form */ .check-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; } .check-list li{ display:flex; gap:12px; align-items:center; color:var(--muted-2); font-size:15.5px; } .check-tick{ width:22px; height:22px; border-radius:50%; background:var(--green); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; flex:none; } .form-card{ background:#fff; border-radius:24px; padding:clamp(26px,4vw,40px); box-shadow:0 20px 44px rgba(33,66,43,.12); border:1px solid rgba(33,66,43,.06); } .form-stack{ display:flex; flex-direction:column; gap:14px; } .field{ padding:14px 16px; border:1px solid rgba(33,66,43,.18); border-radius:12px; font-size:15px; color:var(--ink); background:var(--cream-card); outline:none; transition:border-color .15s ease; width:100%; } .field:focus{ border-color:var(--green); } .form-note{ color:#8A9382; font-size:12.5px; text-align:center; } .form-title{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,3.4vw,34px); color:var(--green-dark); margin-bottom:14px; } .welcome-item{ background:#fff; border-radius:16px; padding:20px 24px; display:flex; gap:20px; align-items:center; box-shadow:0 8px 22px rgba(33,66,43,.06); margin-bottom:12px; } .welcome-num{ font-family:var(--serif); font-size:22px; font-weight:700; color:var(--gold-line); flex:none; width:36px; } .welcome-subject{ font-weight:600; color:var(--green-dark); font-size:16px; margin-bottom:3px; } .welcome-purpose{ color:var(--muted); font-size:14px; } /* footer */ .footer{ background:var(--green-darkest); color:rgba(255,255,255,.82); padding:clamp(48px,7vw,80px) 0 32px; } .footer-grid{ padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.12); } .footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:16px; } .footer-mark{ width:34px; height:34px; border-radius:10px; background:var(--green); display:inline-flex; align-items:center; justify-content:center; color:var(--gold); font-family:var(--serif); font-weight:700; } .footer-name{ font-family:var(--serif); font-weight:600; font-size:18px; color:#fff; } .footer-about{ font-size:14px; line-height:1.6; color:rgba(255,255,255,.7); max-width:240px; } .footer-head{ font-family:var(--sans); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; } .footer-links{ display:flex; flex-direction:column; gap:11px; font-size:14.5px; } .footer-links a{ color:rgba(255,255,255,.8); transition:color .15s ease; } .footer-links a:hover{ color:#fff; } .footer-bottom{ padding-top:24px; font-size:13px; color:rgba(255,255,255,.55); display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; }