/* ========================================================================= Pawspruce V2 — Bright, Layered, Premium Design System Fonts: Fraunces (display) + Plus Jakarta Sans (body) [loaded in ] ========================================================================= */ :root{ /* --- canvas & surfaces (bright, airy) --- */ --canvas:#FBF8F2; /* warm white — global bg */ --surface:#FFFFFF; /* floating cards */ --surface-2:#F4F7F5; /* mist — subtle panels */ --sage-50:#EEF4EF; --sage-100:#DCEAE0; --amber-50:#FBF1E4; /* --- ink & text --- */ --ink:#1E2B25; /* deep forest ink (not pure black) */ --ink-soft:#46584F; --muted:#7C8A82; --line:rgba(30,43,37,.09); --line-strong:rgba(30,43,37,.16); /* --- brand --- */ --sage:#4F8A6B; /* primary */ --sage-deep:#3C7A5C; --sage-grad:linear-gradient(135deg,#56A07C 0%,#3C7A5C 100%); --amber:#E0A458; /* warm accent */ --amber-deep:#C9853B; --amber-grad:linear-gradient(135deg,#EAB46A 0%,#E0A458 60%,#C9853B 100%); /* --- radius --- */ --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px; /* --- shadow layers (spatial depth) --- */ --sh-xs:0 1px 2px rgba(30,43,37,.05), 0 1px 1px rgba(30,43,37,.04); --sh-sm:0 2px 8px rgba(30,43,37,.06), 0 1px 2px rgba(30,43,37,.05); --sh-md:0 10px 30px -12px rgba(30,43,37,.18), 0 4px 10px -6px rgba(30,43,37,.10); --sh-lg:0 24px 60px -22px rgba(30,43,37,.28), 0 10px 24px -14px rgba(30,43,37,.16); --sh-xl:0 40px 90px -30px rgba(30,43,37,.34), 0 18px 40px -20px rgba(30,43,37,.18); --glow-sage:0 18px 50px -18px rgba(79,138,107,.45); --glow-amber:0 18px 50px -18px rgba(224,164,88,.5); /* --- type --- */ --font-display:"Fraunces",Georgia,"Times New Roman",serif; --font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* --- layout --- */ --container:1180px; --container-narrow:820px; /* --- motion --- */ --ease-out:cubic-bezier(.16,1,.3,1); --ease-back:cubic-bezier(.34,1.56,.64,1); --t-fast:.18s; --t:.32s; --t-slow:.6s; } /* ===================== reset ===================== */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; background:var(--canvas); color:var(--ink); font-family:var(--font-sans); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%; display:block} a{color:inherit; text-decoration:none} h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.12; color:var(--ink); letter-spacing:-.01em; margin:0} p{margin:0} ul{margin:0; padding:0; list-style:none} button{font:inherit; cursor:pointer; border:none; background:none} :focus-visible{outline:3px solid var(--sage); outline-offset:3px; border-radius:4px} /* ===================== helpers ===================== */ .container{width:100%; max-width:var(--container); margin:0 auto; padding:0 24px} .container--narrow{max-width:var(--container-narrow)} .section{padding:96px 0} .section--tint{background:var(--sage-50)} .section--mist{background:var(--surface-2)} .section--white{background:var(--surface)} .section--amber{background:var(--amber-50)} .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-deep); } .eyebrow::before{content:""; width:22px; height:2px; border-radius:2px; background:var(--amber-grad)} .section-head{max-width:680px; margin-bottom:46px} .section-head--center{margin-left:auto; margin-right:auto; text-align:center} .section-head--center .eyebrow{justify-content:center} .section-head h2{font-size:clamp(28px,4vw,42px); margin:14px 0 12px} .section-head p{color:var(--ink-soft); font-size:18px} /* ===================== buttons ===================== */ .btn{ display:inline-flex; align-items:center; gap:9px; justify-content:center; padding:14px 26px; border-radius:var(--r-pill); font-weight:700; font-size:15.5px; background:var(--sage-grad); color:#fff; box-shadow:var(--glow-sage); transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), filter var(--t); position:relative; overflow:hidden; } .btn::after{content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); transition:transform .7s var(--ease-out)} .btn:hover{transform:translateY(-2px); box-shadow:0 22px 50px -16px rgba(79,138,107,.6)} .btn:hover::after{transform:translateX(120%)} .btn:active{transform:translateY(0) scale(.98)} .btn-ghost{background:transparent; color:var(--ink); box-shadow:none; border:1.5px solid var(--line-strong)} .btn-ghost:hover{border-color:var(--sage); color:var(--sage-deep); box-shadow:var(--sh-sm); transform:translateY(-2px)} .btn-soft{background:var(--sage-50); color:var(--sage-deep); box-shadow:none} .btn-soft:hover{background:var(--sage-100); transform:translateY(-2px)} .btn-amber{background:var(--amber-grad); box-shadow:var(--glow-amber)} .btn-amber:hover{box-shadow:0 22px 50px -16px rgba(224,164,88,.65)} .btn-lg{padding:17px 34px; font-size:16.5px} .btn-sm{padding:10px 18px; font-size:14px} /* ===================== header / nav ===================== */ .site-header{ position:sticky; top:0; z-index:50; background:rgba(251,248,242,.72); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid transparent; transition:box-shadow var(--t), background var(--t), border-color var(--t); } .site-header.scrolled{background:rgba(251,248,242,.9); box-shadow:var(--sh-sm); border-bottom-color:var(--line)} .nav{display:flex; align-items:center; gap:28px; height:74px} .brand{display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--ink); letter-spacing:-.01em} .brand .logo{width:34px; height:34px; transition:transform var(--t) var(--ease-back)} .brand:hover .logo{transform:rotate(-8deg) scale(1.06)} .nav-links{display:flex; align-items:center; gap:6px; margin-left:auto} .nav-links a{ padding:9px 14px; border-radius:var(--r-pill); font-weight:600; font-size:15px; color:var(--ink-soft); transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast); } .nav-links a:hover{background:var(--sage-50); color:var(--sage-deep); transform:translateY(-1px)} .nav-links a.active{color:var(--sage-deep); background:var(--sage-50)} .nav-links .search-btn{display:inline-flex; align-items:center; gap:7px; color:var(--sage-deep)} .nav-toggle{display:none; margin-left:auto; padding:9px; border-radius:10px; color:var(--ink)} @media (max-width:900px){ .nav-toggle{display:inline-flex} .nav-links{ position:absolute; top:74px; left:0; right:0; flex-direction:column; align-items:stretch; gap:4px; background:var(--surface); padding:14px 18px 22px; box-shadow:var(--sh-md); border-top:1px solid var(--line); max-height:0; overflow:hidden; opacity:0; pointer-events:none; transition:max-height var(--t) var(--ease-out), opacity var(--t); } .nav-links.open{max-height:520px; opacity:1; pointer-events:auto} .nav-links a{padding:13px 14px; font-size:16px} } /* ===================== hero ===================== */ .hero{position:relative; padding:74px 0 90px; overflow:hidden} .hero::before{ /* soft gradient glow top-right */ content:""; position:absolute; top:-180px; right:-120px; width:560px; height:560px; background:radial-gradient(circle, rgba(224,164,88,.20), transparent 62%); filter:blur(8px); pointer-events:none; } .hero::after{ /* sage glow bottom-left */ content:""; position:absolute; bottom:-220px; left:-160px; width:560px; height:560px; background:radial-gradient(circle, rgba(79,138,107,.16), transparent 62%); pointer-events:none; } .hero-grid{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; z-index:1} .hero h1{font-size:clamp(38px,6vw,68px); line-height:1.02; letter-spacing:-.025em; margin:18px 0} .hero h1 .accent{position:relative; color:var(--sage-deep); font-style:italic; font-weight:600} .hero h1 .accent::after{content:""; position:absolute; left:0; right:0; bottom:.08em; height:.34em; background:linear-gradient(90deg,rgba(224,164,88,.45),rgba(224,164,88,0)); z-index:-1; border-radius:6px} .hero .tagline{font-size:20px; color:var(--ink-soft); max-width:520px; line-height:1.6} .hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin:30px 0 26px} .trust-row{display:flex; gap:22px; flex-wrap:wrap} .trust-row span{display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; color:var(--ink-soft)} .trust-row svg{color:var(--sage); flex:none} /* hero art — floating card with mascots */ .hero-art{position:relative; display:flex; justify-content:center} .hero-card{ position:relative; width:100%; max-width:440px; aspect-ratio:1/1.04; border-radius:var(--r-xl); background:linear-gradient(160deg,#ffffff, #F2F8F4); box-shadow:var(--sh-xl); border:1px solid var(--line); overflow:hidden; display:flex; align-items:center; justify-content:center; } .hero-card .blob{position:absolute; border-radius:50%; filter:blur(2px)} .hero-card .blob.b1{width:230px; height:230px; background:radial-gradient(circle,rgba(79,138,107,.20),transparent 70%); top:-40px; right:-30px} .hero-card .blob.b2{width:200px; height:200px; background:radial-gradient(circle,rgba(224,164,88,.22),transparent 70%); bottom:-30px; left:-30px; animation:float 7s var(--ease-out) infinite} .pet{position:absolute; filter:drop-shadow(0 12px 22px rgba(30,43,37,.14)); transition:transform var(--t-slow) var(--ease-back)} .pet-cat{width:150px; left:18%; top:24%} .pet-dog{width:172px; right:14%; bottom:18%} .hero-card:hover .pet-cat{transform:translate(-10px,-10px) rotate(-5deg)} .hero-card:hover .pet-dog{transform:translate(12px,8px) rotate(5deg)} .pet-badge{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--r-pill); background:var(--surface); box-shadow:var(--sh-md); font-weight:700; font-size:14px; color:var(--sage-deep); border:1px solid var(--line); } .pet-badge svg{color:var(--amber)} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} /* article mascot banner + floating stats band */ .article-hero .banner{position:absolute; right:5%; bottom:0; width:200px; opacity:.92; filter:drop-shadow(0 16px 30px rgba(30,43,37,.18)); pointer-events:none} @media (max-width:760px){.article-hero .banner{display:none}} .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:940px; margin:-48px auto 0; position:relative; z-index:3; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:30px 34px; } .stats .stat{text-align:center} .stats .stat b{display:block; font-family:var(--font-display); font-size:36px; color:var(--sage-deep); line-height:1; letter-spacing:-.02em} .stats .stat span{font-size:13.5px; color:var(--muted); font-weight:600; margin-top:6px; display:block} @media (max-width:620px){.stats{grid-template-columns:repeat(2,1fr); gap:18px; padding:24px 20px}} /* ===================== topic clusters ===================== */ .clusters{display:grid; grid-template-columns:repeat(5,1fr); gap:18px} .cluster-card{ display:flex; flex-direction:column; gap:10px; padding:26px 22px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-sm); transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out), border-color var(--t); position:relative; overflow:hidden; } .cluster-card::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--sage-grad); transform:scaleX(0); transform-origin:left; transition:transform var(--t) var(--ease-out)} .cluster-card:hover{transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:transparent} .cluster-card:hover::before{transform:scaleX(1)} .cluster-ico{ width:52px; height:52px; border-radius:15px; display:grid; place-items:center; background:var(--sage-50); color:var(--sage-deep); transition:transform var(--t) var(--ease-back), background var(--t); } .cluster-ico svg{width:26px; height:26px} .cluster-card:hover .cluster-ico{transform:scale(1.08) rotate(-4deg); background:var(--sage-grad); color:#fff} .cluster-card h3{font-size:18px} .cluster-card p{font-size:14px; color:var(--muted); line-height:1.55} .cluster-card .more{margin-top:auto; font-weight:700; font-size:14px; color:var(--sage-deep); display:inline-flex; align-items:center; gap:6px; transition:gap var(--t)} .cluster-card:hover .more{gap:11px} /* ===================== featured posts ===================== */ .featured{display:grid; grid-template-columns:repeat(3,1fr); gap:26px} .post-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out); } .post-card:hover{transform:translateY(-6px); box-shadow:var(--sh-lg)} .post-thumb{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2)} .post-thumb img{width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--ease-out)} .post-card:hover .post-thumb img{transform:scale(1.06)} .post-thumb .tag{position:absolute; top:14px; left:14px} .post-body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1} .post-body h3{font-size:20px; line-height:1.22} .post-body p{font-size:14.5px; color:var(--muted); line-height:1.55; flex:1} .tag{ display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:var(--r-pill); background:var(--sage-50); color:var(--sage-deep); font-size:12.5px; font-weight:700; letter-spacing:.02em; } .tag--gold{background:var(--amber-50); color:var(--amber-deep)} .read{font-weight:700; font-size:14.5px; color:var(--sage-deep); display:inline-flex; align-items:center; gap:6px; transition:gap var(--t)} .post-card:hover .read{gap:11px} /* ===================== method / steps ===================== */ .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px} .step{ position:relative; padding:34px 28px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-sm); transition:transform var(--t),box-shadow var(--t); } .step:hover{transform:translateY(-5px); box-shadow:var(--sh-md)} .step-num{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; font-family:var(--font-display); font-size:24px; font-weight:600; color:#fff; background:var(--sage-grad); box-shadow:var(--glow-sage); margin-bottom:18px; } .step h3{font-size:20px; margin-bottom:8px} .step p{color:var(--ink-soft); font-size:15px} /* ===================== testimonials ===================== */ .testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px} .testi-card{ padding:30px 28px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-sm); display:flex; flex-direction:column; gap:16px; } .stars{color:var(--amber); display:flex; gap:3px; font-size:18px} .testi-card blockquote{margin:0; font-family:var(--font-display); font-size:19px; line-height:1.45; color:var(--ink); font-style:italic} .testi-card .who{display:flex; align-items:center; gap:12px; margin-top:auto} .testi-card .avatar{width:42px; height:42px; border-radius:50%; background:var(--sage-grad); color:#fff; display:grid; place-items:center; font-weight:700; font-family:var(--font-display)} .testi-card .who b{display:block; font-size:15px} .testi-card .who span{font-size:13px; color:var(--muted)} /* ===================== FAQ ===================== */ .faq{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:920px; margin:0 auto} details.faq-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-xs); overflow:hidden; transition:box-shadow var(--t), border-color var(--t); } details.faq-item[open]{box-shadow:var(--sh-md); border-color:var(--sage-100)} details.faq-item summary{ list-style:none; cursor:pointer; padding:20px 24px; font-weight:700; font-size:16.5px; display:flex; align-items:center; justify-content:space-between; gap:16px; } details.faq-item summary::-webkit-details-marker{display:none} details.faq-item summary::after{ content:""; width:22px; height:22px; flex:none; border-radius:50%; background:var(--sage-50); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C7A5C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; transition:transform var(--t) var(--ease-out), background-color var(--t); } details.faq-item[open] summary::after{transform:rotate(135deg); background-color:var(--sage-grad)} details.faq-item .faq-a{padding:0 24px 22px; color:var(--ink-soft); font-size:15px; line-height:1.65} /* ===================== newsletter ===================== */ .newsletter{position:relative; overflow:hidden; border-radius:var(--r-xl); background:var(--sage-grad); color:#fff; box-shadow:var(--sh-lg)} .newsletter .glow{position:absolute; border-radius:50%; filter:blur(10px); opacity:.55; pointer-events:none} .newsletter .glow.g1{width:280px; height:280px; background:radial-gradient(circle,rgba(255,255,255,.4),transparent 70%); top:-90px; left:-60px; animation:float 9s var(--ease-out) infinite} .newsletter .glow.g2{width:240px; height:240px; background:radial-gradient(circle,rgba(224,164,88,.5),transparent 70%); bottom:-100px; right:-40px; animation:float 11s var(--ease-out) infinite reverse} .nl-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:54px 56px} .nl-inner h2{color:#fff; font-size:clamp(26px,3.4vw,38px)} .nl-inner p{color:rgba(255,255,255,.9); font-size:17px; margin-top:12px; max-width:440px} .nl-form{display:flex; gap:12px; flex-wrap:wrap} .nl-form input{ flex:1; min-width:220px; padding:16px 20px; border-radius:var(--r-pill); border:1.5px solid rgba(255,255,255,.35); background:rgba(255,255,255,.16); color:#fff; font-size:15.5px; backdrop-filter:blur(8px); transition:border-color var(--t), background var(--t); } .nl-form input::placeholder{color:rgba(255,255,255,.7)} .nl-form input:focus{outline:none; border-color:#fff; background:rgba(255,255,255,.26)} .nl-form .btn-amber{flex:none} .nl-note{font-size:13px; color:rgba(255,255,255,.8); margin-top:14px} /* ===================== lead magnet / CTA box ===================== */ .lead-magnet{ display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; padding:38px 42px; border-radius:var(--r-lg); background:var(--amber-50); border:1px solid #F0D9BC; box-shadow:var(--sh-sm); } .lead-magnet .lm-ico{width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background:var(--amber-grad); color:#fff; box-shadow:var(--glow-amber); font-size:30px} .lead-magnet h3{font-size:23px; margin-bottom:6px} .lead-magnet p{color:var(--ink-soft); font-size:15px} /* ===================== footer ===================== */ .site-footer{background:#16241E; color:#C9D6CE; margin-top:0; position:relative} .site-footer::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--sage),var(--amber))} .footer-cols{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding:64px 0 44px} .footer-brand .brand{color:#fff; font-size:21px; margin-bottom:14px} .footer-brand .brand .logo{filter:none} .footer-brand p{color:#9DB0A6; font-size:14.5px; line-height:1.6; max-width:300px} .social{display:flex; gap:10px; margin-top:18px} .social a{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.07); color:#C9D6CE; transition:background var(--t), transform var(--t), color var(--t)} .social a:hover{background:var(--sage); color:#fff; transform:translateY(-3px)} .footer-col h4{color:#fff; font-family:var(--font-sans); font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; font-weight:700} .footer-col a{display:block; color:#9DB0A6; font-size:14.5px; padding:6px 0; transition:color var(--t), transform var(--t)} .footer-col a:hover{color:#fff; transform:translateX(4px)} .footer-bottom{border-top:1px solid rgba(255,255,255,.09); padding:22px 0; font-size:13px; color:#7E918A} .footer-bottom .container{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap} /* ===================== scroll reveal ===================== */ .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)} .reveal.in{opacity:1; transform:none} .reveal[data-delay="1"]{transition-delay:.08s} .reveal[data-delay="2"]{transition-delay:.16s} .reveal[data-delay="3"]{transition-delay:.24s} .reveal[data-delay="4"]{transition-delay:.32s} /* ===================== scroll-to-top ===================== */ .to-top{ position:fixed; right:26px; bottom:26px; width:50px; height:50px; border-radius:50%; background:var(--sage-grad); color:#fff; display:grid; place-items:center; box-shadow:var(--sh-lg); opacity:0; transform:translateY(20px) scale(.8); pointer-events:none; transition:opacity var(--t), transform var(--t) var(--ease-back); z-index:60; } .to-top.show{opacity:1; transform:none; pointer-events:auto} .to-top:hover{transform:translateY(-3px)} /* ===================== article page ===================== */ .article-hero{position:relative; background:var(--sage-50); padding:78px 0 56px; overflow:hidden} .article-hero::before{content:""; position:absolute; top:-140px; right:-80px; width:420px; height:420px; background:radial-gradient(circle,rgba(224,164,88,.18),transparent 65%); pointer-events:none} .breadcrumb{font-size:14px; color:var(--muted); margin-bottom:18px} .breadcrumb a:hover{color:var(--sage-deep)} .breadcrumb span{margin:0 8px; color:var(--line-strong)} .post-wrap{max-width:760px; margin:0 auto; padding:48px 24px 30px} .lead-figure{margin:0 0 34px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md)} .lead-figure img{width:100%} .in-figure{margin:30px 0; border-radius:var(--r-md); overflow:hidden} .content{font-size:18px; line-height:1.8; color:var(--ink-soft)} .content h2{font-size:30px; margin:42px 0 16px; padding-top:14px; border-top:1px solid var(--line)} .content h3{font-size:22px; margin:32px 0 12px; color:var(--ink)} .content p{margin:0 0 18px} .content ul{margin:0 0 20px; padding-left:0} .content li{position:relative; padding-left:28px; margin-bottom:10px; color:var(--ink-soft)} .content li::before{content:""; position:absolute; left:4px; top:11px; width:8px; height:8px; border-radius:50%; background:var(--sage-grad)} .content strong{color:var(--ink); font-weight:700} .content a:not(.btn){color:var(--sage-deep); font-weight:600; border-bottom:1.5px solid var(--sage-100); transition:border-color var(--t)} .content a:not(.btn):hover{border-color:var(--sage)} .content blockquote{margin:26px 0; padding:18px 24px; background:var(--sage-50); border-left:4px solid var(--sage); border-radius:0 var(--r-md) var(--r-md) 0; font-family:var(--font-display); font-style:italic; font-size:19px; color:var(--ink)} .pillar-badge{display:inline-block; vertical-align:middle; margin-left:12px; padding:5px 13px; border-radius:var(--r-pill); background:var(--amber-50); color:var(--amber-deep); font-size:13px; font-weight:700; font-family:var(--font-sans)} .callout{margin:26px 0; padding:22px 26px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--line); display:flex; gap:16px; align-items:flex-start} .callout .ci{flex:none; width:40px; height:40px; border-radius:12px; background:var(--sage-grad); color:#fff; display:grid; place-items:center; font-size:20px} .callout b{color:var(--ink)} .related{margin-top:46px; padding-top:34px; border-top:1px solid var(--line)} .related h2{font-size:24px; margin-bottom:18px} .related ul{display:grid; gap:10px} .related a{display:block; padding:14px 18px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); font-weight:600; transition:transform var(--t), border-color var(--t), box-shadow var(--t)} .related a:hover{transform:translateX(4px); border-color:var(--sage-100); box-shadow:var(--sh-sm)} /* ===================== category page ===================== */ .cat-hero{position:relative; background:var(--sage-50); padding:72px 0 50px; overflow:hidden} .cat-hero::before{content:""; position:absolute; bottom:-160px; left:-120px; width:420px; height:420px; background:radial-gradient(circle,rgba(79,138,107,.16),transparent 65%); pointer-events:none} .cat-hero h1{font-size:clamp(32px,5vw,52px); margin:14px 0 12px} .cat-hero p{color:var(--ink-soft); font-size:18px; max-width:560px} .cat-list{display:grid; gap:14px; max-width:820px; margin:0 auto} .post-item{display:flex; gap:20px; align-items:center; padding:20px 22px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-xs); transition:transform var(--t), box-shadow var(--t), border-color var(--t)} .post-item:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:transparent} .post-item .pi-thumb{width:84px; height:84px; border-radius:14px; overflow:hidden; flex:none; background:var(--surface-2)} .post-item .pi-thumb img{width:100%; height:100%; object-fit:cover} .post-item .pi-body{flex:1; min-width:0} .post-item h3{font-size:18.5px; margin-bottom:5px} .post-item p{font-size:14px; color:var(--muted); line-height:1.5} .post-item .pillar-tag{display:inline-block; margin-left:10px; padding:3px 10px; border-radius:var(--r-pill); background:var(--amber-50); color:var(--amber-deep); font-size:11.5px; font-weight:700; font-family:var(--font-sans)} /* ===================== search page ===================== */ .search-hero{padding:80px 0 30px; text-align:center} .search-hero h1{font-size:clamp(32px,5vw,48px)} .search-box{max-width:620px; margin:26px auto 0; display:flex; gap:10px} .search-box input{flex:1; padding:16px 22px; border-radius:var(--r-pill); border:1.5px solid var(--line-strong); background:var(--surface); font-size:16px; box-shadow:var(--sh-sm); transition:border-color var(--t), box-shadow var(--t)} .search-box input:focus{outline:none; border-color:var(--sage); box-shadow:var(--sh-md)} .results{max-width:760px; margin:36px auto 0; display:grid; gap:12px} .result{padding:18px 22px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-xs); transition:transform var(--t), box-shadow var(--t)} .result:hover{transform:translateY(-2px); box-shadow:var(--sh-sm)} .result h3{font-size:18px; margin-bottom:4px} .result .rcat{font-size:12.5px; color:var(--sage-deep); font-weight:700; text-transform:uppercase; letter-spacing:.06em} .result p{font-size:14px; color:var(--muted); margin-top:4px} .result mark{background:var(--amber-50); color:var(--amber-deep); padding:0 2px; border-radius:3px} /* ===================== about / contact ===================== */ .page-hero{position:relative; padding:84px 0 56px; text-align:center; overflow:hidden; background:var(--sage-50)} .page-hero::before{content:""; position:absolute; top:-160px; left:50%; transform:translateX(-50%); width:620px; height:420px; background:radial-gradient(circle,rgba(224,164,88,.16),transparent 65%); pointer-events:none} .page-hero h1{font-size:clamp(34px,5.4vw,56px); margin-bottom:14px} .page-hero p{color:var(--ink-soft); font-size:19px; max-width:620px; margin:0 auto} .values{display:grid; grid-template-columns:repeat(3,1fr); gap:22px} .value-card{padding:30px 26px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-sm); transition:transform var(--t),box-shadow var(--t)} .value-card:hover{transform:translateY(-5px); box-shadow:var(--sh-md)} .value-card .vc-ico{width:50px; height:50px; border-radius:15px; background:var(--sage-50); color:var(--sage-deep); display:grid; place-items:center; margin-bottom:16px; font-size:24px} .value-card h3{font-size:19px; margin-bottom:8px} .value-card p{font-size:14.5px; color:var(--muted); line-height:1.6} .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start} .contact-form{display:grid; gap:16px} .contact-form label{font-weight:600; font-size:14.5px; color:var(--ink-soft)} .contact-form input,.contact-form textarea{padding:14px 18px; border-radius:var(--r-md); border:1.5px solid var(--line-strong); background:var(--surface); font:inherit; font-size:15.5px; transition:border-color var(--t),box-shadow var(--t)} .contact-form input:focus,.contact-form textarea:focus{outline:none; border-color:var(--sage); box-shadow:var(--sh-sm)} .contact-info .ci-item{display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--line)} .contact-info .ci-item .ci{width:44px; height:44px; border-radius:13px; background:var(--sage-50); color:var(--sage-deep); display:grid; place-items:center; flex:none} .contact-info .ci-item b{display:block; font-size:15px} .contact-info .ci-item span{font-size:14px; color:var(--muted)} /* ===================== responsive ===================== */ @media (max-width:1080px){ .clusters{grid-template-columns:repeat(3,1fr)} .featured,.testi-grid,.steps,.values{grid-template-columns:repeat(2,1fr)} } @media (max-width:880px){ .section{padding:70px 0} .hero-grid{grid-template-columns:1fr; gap:40px} .hero-art{order:-1} .hero-card{max-width:360px} .nl-inner{grid-template-columns:1fr; padding:40px 32px; gap:26px} .lead-magnet{grid-template-columns:1fr; text-align:center; justify-items:center; gap:18px} .contact-grid{grid-template-columns:1fr} .footer-cols{grid-template-columns:1fr 1fr; gap:30px} } @media (max-width:620px){ body{font-size:16px} .clusters,.featured,.testi-grid,.steps,.values,.faq{grid-template-columns:1fr} .section{padding:56px 0} .container{padding:0 18px} .nl-inner{padding:34px 22px} .footer-cols{grid-template-columns:1fr} .hero-actions .btn{flex:1} } @media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important} .reveal{opacity:1; transform:none} }