/* Elpis 2025 — page-body styles, ported from the approved static previews. Loaded on the front end + editor. Deliberately avoids bare-tag selectors (header/nav/footer/section/h1/blockquote) so it never collides with the block chrome in parts/*.html — everything is scoped under a page section class. */ :root { --ink:#1B1B36; --plum:#33284C; --plum-light:#3E3159; --brass:#C9A227; --brass-soft:#E4C466; --rose:#E3A6A1; --glow:#E85C9B; --moon:#F6F1E7; --moon-dim:#D9D2C2; --line:rgba(246,241,231,0.14); } /* shared page container + text accents (class-scoped, safe) */ .wrap { width:80%; max-width:1600px; margin:0 auto; padding:0; } @media (max-width:768px){ .wrap { width:auto; max-width:none; padding:0 20px; } } /* Site-wide content width. The theme capped post content (.entry-content) at 720px, which squeezed every page (and made .wrap's 80% shrink to 80% of 720 = 576px). Widen it as the default so content uses the screen, capped for sanity on very large displays; .wrap's 80% inside then gives the ~10% side margins. */ .entry-content { max-width: min(1440px, 92vw) !important; } .script-tag { font-family:'Caveat',cursive; font-size:26px; color:var(--rose); margin:0 0 4px; transform:rotate(-2deg); display:inline-block; } .eyebrow { font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:16px; letter-spacing:0.01em; color:var(--rose); margin:0 0 18px; } .section-eyebrow { font-family:'Fraunces',serif; font-style:italic; font-weight:400; font-size:16px; letter-spacing:0.01em; color:var(--rose); margin:0; } .card-row { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .card-row.two { grid-template-columns:repeat(2,1fr); } .amp { font-family:'Fraunces',serif; font-style:normal; font-weight:500; font-size:1.4em; line-height:0; display:inline-block; vertical-align:-0.1em; color:var(--brass-soft); margin:0 2px; } /* Home's section head is a bordered flex row — scope it so it never touches other pages. */ .home-practice .section-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:44px; border-bottom:1px solid var(--line); padding-bottom:22px; } .home-practice .section-title, .home-transit .section-title { font-family:'Fraunces',serif; font-size:30px; font-weight:500; margin:6px 0 0; } /* generic button mapping for ported CTAs (core/button) */ .wp-block-button.is-ghost .wp-block-button__link { background:transparent; border:1px solid var(--line); color:var(--moon); } .wp-block-button.is-ghost .wp-block-button__link:hover { background:rgba(246,241,231,0.06); color:var(--moon); } /* ---------------- HOME ---------------- */ .home-hero { position:relative; padding:88px 0 110px; overflow:hidden; } .home-hero .hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; position:relative; z-index:1; } .home-hero h1 { font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:50px; line-height:1.12; margin:0 0 22px; letter-spacing:-0.01em; } .home-hero h1 em { font-family:'Caveat',cursive; font-style:normal; font-weight:700; color:var(--moon); font-size:1.2em; } .home-hero .lede { font-size:17px; line-height:1.65; color:var(--moon-dim); max-width:46ch; margin:0 0 34px; } .home-hero .wp-block-buttons { gap:14px; } .home-hero .wp-block-button__link, .home-transit .wp-block-button__link { padding:14px 26px; font-size:14px; font-weight:600; border-radius:6px; } .hero-arc { position:absolute; top:-360px; left:-360px; width:860px; height:860px; opacity:0.55; pointer-events:none; z-index:0; animation:elpis-spin 260s linear infinite; transform-origin:center; } @keyframes elpis-spin { from{transform:rotate(0);} to{transform:rotate(360deg);} } .arc-ring { fill:none; stroke:var(--line); stroke-width:1; } .arc-ring.accent { stroke:rgba(201,162,39,0.4); } .arc-spoke, .arc-tick { stroke:var(--line); stroke-width:1; } .arc-glyph { font-family:'Fraunces',serif; fill:var(--brass-soft); font-size:24px; opacity:0.85; } .arc-aspect { stroke:var(--rose); stroke-width:1; stroke-dasharray:3 4; opacity:0.6; } .portrait-holder { position:relative; display:flex; align-items:flex-end; justify-content:center; max-width:440px; margin:0 auto; } .glow-bg { position:absolute; inset:-18%; background:radial-gradient(circle at 55% 42%, rgba(232,92,155,0.42), rgba(232,92,155,0) 60%); filter:blur(2px); } .portrait-frame { position:relative; width:82%; } .portrait-frame img { width:100%; height:auto; display:block; border-radius:6px; -webkit-mask-image:linear-gradient(to bottom, black 82%, transparent 100%); mask-image:linear-gradient(to bottom, black 82%, transparent 100%); } .portrait-sig { position:absolute; bottom:6%; left:2%; font-family:'Caveat',cursive; font-size:22px; color:var(--brass-soft); transform:rotate(-3deg); } .hero-fade { position:absolute; left:0; right:0; bottom:0; height:210px; z-index:2; pointer-events:none; background:radial-gradient(circle at 18% 100%, rgba(232,92,155,0.28), transparent 60%),radial-gradient(circle at 78% 100%, rgba(201,162,39,0.2), transparent 55%),linear-gradient(to bottom, rgba(27,27,54,0) 0%, var(--plum) 96%); } .hero-scroll { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:6px; } .hero-scroll svg { opacity:0.55; animation:elpis-bob 2.2s ease-in-out infinite; } @keyframes elpis-bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} } /* Hide the bobbing scroll arrow (looked clickable, did nothing). Keep a SUBTLE fade at the very bottom of the hero that softens into the next section's plum — short, and placed BEHIND the content (z-index:0) so it never dims the CTAs. */ .home-hero .hero-scroll { display:none !important; } .home-hero .hero-fade { height:150px !important; z-index:0 !important; background:linear-gradient(to bottom, transparent 0%, var(--plum) 100%) !important; } .home-practice { background:var(--plum); padding:88px 0; } .tcard { position:relative; background:var(--plum-light); border:1px solid var(--line); border-radius:4px; padding:30px 26px 34px; min-height:280px; display:flex; flex-direction:column; } .tcard::before { content:''; position:absolute; inset:8px; border:1px solid rgba(201,162,39,0.35); border-radius:2px; pointer-events:none; } .tcard .corner-glyph { font-size:20px; color:var(--brass); margin:0 0 20px; } .tcard h3 { font-family:'Fraunces',serif; font-weight:500; font-size:21px; margin:0 0 12px; } .tcard p { font-size:14.5px; line-height:1.6; color:var(--moon-dim); margin:0 0 20px; flex-grow:1; } .tcard .tlink { font-family:'Manrope',sans-serif; font-weight:600; font-size:13px; letter-spacing:0.01em; color:var(--brass-soft); text-decoration:none; margin:0; } .tcard-examples { list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:10px; } .tcard-examples li { font-size:13.5px; line-height:1.5; color:var(--moon-dim); padding-left:16px; position:relative; } .tcard-examples li::before { content:'\2726'; position:absolute; left:0; top:1px; color:var(--brass); font-size:10px; } .home-quote { text-align:center; padding:88px 0; } .quote-mark { font-family:'Fraunces',serif; font-size:44px; color:var(--brass); line-height:1; margin:0 0 10px; } .home-quote .wp-block-quote { border:none; padding:0; font-family:'Fraunces',serif; font-style:italic; font-size:26px; line-height:1.5; max-width:680px; margin:0 auto 16px; color:var(--moon); } .home-quote .wp-block-quote p { margin:0; } .quote-attr { font-family:'Manrope',sans-serif; font-style:italic; font-size:14px; color:var(--moon-dim); margin:0; } .home-transit { background:var(--plum); padding:88px 0; } .transit-row { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; } .transit-copy p { font-size:15px; line-height:1.65; color:var(--moon-dim); max-width:44ch; } .sign-row { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; } .sign { aspect-ratio:1; min-width:56px; border:1px solid var(--line); border-radius:50%; overflow:hidden; background:rgba(246,241,231,0.03); display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--brass-soft); font-family:'Fraunces',serif; transition:border-color .2s, color .2s, background .2s; } .sign:hover { border-color:var(--brass); color:var(--moon); background:rgba(201,162,39,0.12); } @media (prefers-reduced-motion: reduce) { .hero-arc, .hero-scroll svg { animation:none; } } @media (max-width:860px) { .home-hero .hero-grid { grid-template-columns:1fr; } .home-hero .portrait-holder { order:-1; margin-bottom:8px; } .home-hero h1 { font-size:36px; } .card-row { grid-template-columns:1fr; } .transit-row { grid-template-columns:1fr; } } /* ---------------- SERVICES (+ shared interior page-hero) ---------------- */ .page-hero { position:relative; padding:64px 0 56px; overflow:hidden; } .page-hero .wrap { position:relative; z-index:1; } .page-hero h1 { font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:46px; line-height:1.15; margin:0 0 20px; letter-spacing:-0.01em; } .page-hero h1 em { font-family:'Caveat',cursive; font-style:normal; font-weight:700; color:var(--moon); font-size:1.15em; } .page-hero .lede { font-size:17px; line-height:1.65; color:var(--moon-dim); max-width:56ch; margin:0 0 8px; } .page-hero-arc { position:absolute; top:-260px; right:-260px; width:620px; height:620px; opacity:0.4; pointer-events:none; z-index:0; animation:elpis-spin 260s linear infinite; transform-origin:center; } .svc { padding:72px 0; } .svc.page-hero { padding:64px 0 56px; } .svc.alt { background:var(--plum); } .svc.cta-band { padding:80px 0; } .svc .section-head { margin-bottom:14px; } .svc .section-title { font-family:'Fraunces',serif; font-size:28px; font-weight:500; margin:6px 0 14px; } .svc .section-note { font-size:14.5px; line-height:1.6; color:var(--moon-dim); max-width:64ch; margin:0 0 40px; } .included-strip { display:flex; flex-wrap:wrap; gap:28px; margin:0 0 44px; font-family:'Manrope',sans-serif; font-size:13.5px; color:var(--moon-dim); } .included-strip span { display:flex; align-items:center; gap:8px; } .included-strip .dot { width:5px; height:5px; border-radius:50%; background:var(--brass); } .pcard { position:relative; background:var(--plum-light); border:1px solid var(--line); border-radius:4px; padding:28px 26px 30px; display:flex; flex-direction:column; } .svc.alt .pcard { background:var(--ink); } .pcard::before { content:''; position:absolute; inset:8px; border:1px solid rgba(201,162,39,0.35); border-radius:2px; pointer-events:none; } .pcard .badge { position:absolute; top:16px; right:16px; font-family:'Manrope',sans-serif; font-weight:700; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink); background:var(--brass-soft); padding:4px 9px; border-radius:20px; margin:0; } .pcard .corner-glyph { font-size:20px; color:var(--brass); margin:0 0 16px; } .pcard h3 { font-family:'Fraunces',serif; font-weight:500; font-size:20px; margin:0 0 6px; padding-right:70px; } .pcard .duration { font-family:'Manrope',sans-serif; font-size:12.5px; color:var(--moon-dim); margin:0 0 16px; } .pcard p.desc { font-size:14px; line-height:1.6; color:var(--moon-dim); margin:0 0 22px; flex-grow:1; } .pcard .price-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; border-top:1px solid var(--line); padding-top:16px; margin:0; } .pcard .price { font-family:'Fraunces',serif; font-size:26px; color:var(--brass-soft); margin:0; } .pcard .pay-link { font-family:'Manrope',sans-serif; font-weight:600; font-size:13px; color:var(--moon); background:none; border:1px solid var(--line); padding:9px 16px; border-radius:6px; text-decoration:none; white-space:nowrap; } .pcard .pay-link:hover { border-color:var(--brass); color:var(--brass-soft); } /* single tarot card (the $30 one-question card was dropped) */ .card-solo { max-width:400px; } .tarot-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; } .tarot-fan { flex-shrink:0; width:190px; margin-top:-14px; } .tarot-fan svg { width:100%; height:auto; overflow:visible; } .tfan-card { fill:var(--plum-light); stroke:rgba(201,162,39,0.5); stroke-width:1; } .svc.alt .tfan-card { fill:var(--ink); } .tfan-inner { fill:none; stroke:rgba(201,162,39,0.35); stroke-width:0.75; } .tfan-glyph { font-family:'Fraunces',serif; fill:var(--brass-soft); } .custom-band { background:var(--plum-light); border:1px solid var(--line); border-radius:6px; padding:40px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:36px; align-items:center; } .custom-band h3 { font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:26px; margin:0 0 12px; } .custom-band p { font-size:15px; line-height:1.65; color:var(--moon-dim); margin:0 0 8px; max-width:52ch; } .custom-examples { list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; } .custom-examples li { font-size:14px; line-height:1.5; color:var(--moon-dim); padding-left:18px; position:relative; } .custom-examples li::before { content:'\2726'; position:absolute; left:0; top:2px; color:var(--brass); font-size:11px; } .custom-side { border-left:1px solid var(--line); padding-left:36px; } .custom-side .script-tag { font-size:22px; margin-bottom:10px; } .synastry-graphic { margin:0 0 20px; } .synastry-graphic svg { width:100%; max-width:270px; height:auto; display:block; } .syn-ring { fill:none; stroke:var(--line); stroke-width:1; } .syn-ring.a { stroke:rgba(201,162,39,0.45); } .syn-ring.b { stroke:rgba(232,166,161,0.5); } .syn-link { stroke:var(--brass-soft); stroke-width:1; stroke-dasharray:2 3; opacity:0.7; } .syn-dot { fill:var(--brass-soft); } .faq-row { display:grid; grid-template-columns:repeat(2,1fr); gap:28px 40px; } .faq-item h4 { font-family:'Fraunces',serif; font-weight:500; font-size:17px; margin:0 0 8px; } .faq-item p { font-size:14px; line-height:1.6; color:var(--moon-dim); margin:0; } .cta-band { text-align:center; } .cta-band .script-tag { font-size:24px; } .cta-band h2 { font-family:'Fraunces',serif; font-style:italic; font-size:32px; margin:8px 0 16px; } .cta-band p { font-size:15px; color:var(--moon-dim); max-width:48ch; margin:0 auto 28px; } @media (max-width:860px) { .page-hero h1 { font-size:32px; } .card-row.two { grid-template-columns:1fr; } .custom-band { grid-template-columns:1fr; } .custom-side { border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:24px; } .tarot-header { flex-direction:column; } .faq-row { grid-template-columns:1fr; } } /* ================================================================ PAGE MODULES (built in parallel; every rule scoped under a page root class — .about .testi .musings .videos .contact .yc — so they cannot collide with each other or with Home/Services.) ================================================================ */ /* ---------------- ABOUT (page 234) ---------------- */ .about { padding:56px 0; } .about.alt { background:var(--plum); } .about .section-head { margin-bottom:14px; } .about .section-title { font-family:'Fraunces',serif; font-size:27px; font-weight:500; margin:6px 0 20px; } .about.about-hero { position:relative; padding:64px 0 20px; overflow:hidden; } .about .about-hero-grid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:end; } .about .about-hero h1 { font-family:'Fraunces',serif; font-style:normal; font-weight:500; font-size:44px; line-height:1.15; margin:0 0 20px; letter-spacing:-0.01em; color:var(--moon); } .about .about-hero h1 em { font-family:'Caveat',cursive; font-style:normal; font-weight:700; font-size:1.1em; color:var(--brass-soft); } .about .lede { font-size:17px; line-height:1.65; color:var(--moon-dim); max-width:52ch; margin:0 0 8px; } .about .about-portrait { position:relative; } .about .about-glow { position:absolute; inset:-16%; background:radial-gradient(circle at 50% 40%, rgba(232,92,155,0.4), rgba(232,92,155,0) 60%); filter:blur(2px); } .about .about-portrait img { position:relative; width:100%; height:auto; display:block; border-radius:6px; -webkit-mask-image:linear-gradient(to bottom, black 85%, transparent 100%); mask-image:linear-gradient(to bottom, black 85%, transparent 100%); } .about .about-sig { font-family:'Caveat',cursive; font-size:22px; color:var(--brass-soft); margin-top:-6px; display:inline-block; transform:rotate(-2deg); } .about .cred-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:44px; } .about .cred-grid p { font-size:15px; line-height:1.7; color:var(--moon-dim); margin:0 0 16px; max-width:58ch; } .about .cred-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); } .about .cred-list li { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); } .about .cred-list .cl-glyph { font-family:'Fraunces',serif; font-size:18px; color:var(--brass); flex-shrink:0; width:22px; } .about .cred-list .cl-text { font-size:14px; line-height:1.55; color:var(--moon-dim); } .about .cred-list .cl-text strong { color:var(--moon); font-weight:600; } .about .teachers-note { margin-top:26px; font-size:13.5px; line-height:1.6; color:var(--moon-dim); border-left:2px solid var(--brass); padding-left:16px; } .about .teachers-note span { color:var(--moon); } .about .hope-word { color:var(--brass-soft); } .about .philosophy-band { background:var(--plum-light); border:1px solid var(--line); border-radius:6px; padding:44px; } .about .philosophy-band .wp-block-quote { border:none; padding:0; margin:0 0 22px; font-family:'Fraunces',serif; font-style:italic; font-size:24px; line-height:1.5; color:var(--moon); max-width:62ch; } .about .philosophy-band .wp-block-quote p { margin:0; } .about .philosophy-band > p { font-size:15px; line-height:1.7; color:var(--moon-dim); margin:0; max-width:62ch; } .about.hope-band { text-align:center; padding:76px 0; } .about.hope-band .script-tag { font-size:22px; } .about.hope-band h2 { font-family:'Fraunces',serif; font-style:normal; font-weight:500; font-size:30px; margin:8px 0 16px; color:var(--moon); } .about.hope-band p { font-size:15.5px; line-height:1.7; color:var(--moon-dim); max-width:56ch; margin:0 auto; } .about .means-word { font-style:italic; font-weight:400; color:var(--brass-soft); } .about.cta-band { text-align:center; padding:64px 0 90px; } .about.cta-band h2 { font-family:'Fraunces',serif; font-style:italic; font-size:28px; margin:0 0 16px; } .about.cta-band p { font-size:15px; color:var(--moon-dim); max-width:46ch; margin:0 auto 26px; } @media (max-width:860px) { .about .about-hero h1 { font-size:32px; } .about .about-hero-grid { grid-template-columns:1fr; } .about .about-portrait { max-width:280px; margin:0 auto; } .about .cred-grid { grid-template-columns:1fr; } .about .philosophy-band { padding:28px; } } /* ---------------- TESTIMONIALS (page 5250) ---------------- */ .testi { padding:60px 0; } .testi.page-hero { padding:64px 0 20px; } .testi.alt { background:var(--plum); } .testi.cta-band { text-align:center; padding:70px 0 96px; } .testi .section-head { margin-bottom:30px; } .testi .section-title { font-family:'Fraunces',serif; font-size:27px; font-weight:500; margin:6px 0 12px; } .testi .section-note { font-size:14.5px; line-height:1.6; color:var(--moon-dim); max-width:64ch; margin:0; } .testi .impact-row { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .testi .impact-card { border:1px solid var(--line); border-radius:6px; padding:22px 20px; background:var(--plum-light); } .testi .impact-card .glyph { font-family:'Fraunces',serif; font-size:20px; color:var(--brass); margin:0 0 12px; display:block; } .testi .impact-card h4 { font-family:'Fraunces',serif; font-weight:500; font-size:16px; margin:0 0 8px; } .testi .impact-card p { font-size:13px; line-height:1.55; color:var(--moon-dim); margin:0; } .testi .testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .testi .testi-card { position:relative; background:var(--ink); border:1px solid var(--line); border-radius:4px; padding:26px 24px 24px; display:flex; flex-direction:column; } .testi .testi-card::before { content:'\201C'; position:absolute; top:12px; right:18px; font-family:'Fraunces',serif; font-size:40px; color:rgba(201,162,39,0.25); line-height:1; } .testi .testi-card p.quote { font-family:'Fraunces',serif; font-style:italic; font-size:15.5px; line-height:1.55; color:var(--moon); margin:0 0 18px; flex-grow:1; } .testi .testi-card .attr { font-family:'Manrope',sans-serif; font-size:12.5px; color:var(--brass-soft); font-weight:600; margin:0; } .testi .testi-card .attr span { color:var(--moon-dim); font-weight:400; } /* featured (hand-picked) row */ .testi .testi-featured { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:34px; } .testi .testi-featured .testi-card { border-left:2px solid var(--brass); } /* feed cards (Query Loop): map post-excerpt -> quote, post-title -> attribution */ .testi .testi-grid.wp-block-post-template { margin:0; padding:0; list-style:none; } .testi .testi-grid > li { margin:0; display:flex; } .testi .testi-card .wp-block-post-excerpt { margin:0 0 16px; flex-grow:1; } .testi .testi-card .wp-block-post-excerpt p, .testi .testi-card .wp-block-post-excerpt__excerpt { font-family:'Fraunces',serif; font-style:italic; font-size:15.5px; line-height:1.55; color:var(--moon); margin:0; } .testi .testi-card .wp-block-post-excerpt__more-link { display:none; } .testi .testi-card .wp-block-post-title { font-family:'Manrope',sans-serif; font-weight:600; font-size:12.5px; color:var(--brass-soft); margin:0; } .testi .testi-pagination { margin-top:40px; gap:6px; } .testi .testi-pagination a, .testi .testi-pagination .page-numbers { color:var(--moon-dim); text-decoration:none; padding:6px 10px; font-family:'Manrope',sans-serif; font-size:14px; } .testi .testi-pagination a:hover { color:var(--brass-soft); } .testi .testi-pagination .current { color:var(--brass-soft); font-weight:700; } .testi.cta-band .script-tag { font-size:22px; } .testi.cta-band h2 { font-family:'Fraunces',serif; font-style:italic; font-size:28px; margin:8px 0 16px; } .testi.cta-band p { font-size:15px; color:var(--moon-dim); max-width:48ch; margin:0 auto 26px; } @media (max-width:860px) { .testi .impact-row { grid-template-columns:repeat(2,1fr); } .testi .testi-grid { grid-template-columns:1fr; } .testi .testi-featured { grid-template-columns:1fr; } } /* ---------------- ASTRAL MUSINGS (page 232 — blog index) ---------------- */ .musings.musings-list { padding:60px 0; } .musings .section-head { margin-bottom:30px; } .musings .section-title { font-family:'Fraunces',serif; font-size:27px; font-weight:500; margin:6px 0 12px; } .musings .musings-search { position:relative; max-width:520px; margin-top:8px; } .musings .musings-search input { width:100%; background:var(--plum-light); border:1px solid var(--line); border-radius:8px; padding:13px 46px 13px 16px; font-family:'Manrope',sans-serif; font-size:14.5px; color:var(--moon); } .musings .musings-search input::placeholder { color:var(--moon-dim); } .musings .musings-search input:focus { outline:none; border-color:var(--brass); } .musings .musings-search .search-icon { position:absolute; right:15px; top:50%; transform:translateY(-50%); color:var(--moon-dim); font-size:15px; pointer-events:none; } .musings .post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .musings .post-card { position:relative; background:var(--plum-light); border:1px solid var(--line); border-radius:4px; padding:26px 24px; display:flex; flex-direction:column; transition:border-color .2s, transform .2s; } .musings .post-card:hover { border-color:rgba(201,162,39,0.45); transform:translateY(-2px); } .musings .post-card .post-date { font-family:'Manrope',sans-serif; font-size:12px; letter-spacing:0.04em; color:var(--brass-soft); margin-bottom:10px; } .musings .post-card .glyph { font-family:'Fraunces',serif; font-size:20px; color:var(--brass); margin-bottom:10px; } .musings .post-card h3 { font-family:'Fraunces',serif; font-weight:500; font-size:19px; margin:0 0 10px; } .musings .post-card p { font-size:13.5px; line-height:1.6; color:var(--moon-dim); margin:0 0 18px; flex-grow:1; } .musings .post-card .read-link { font-family:'Manrope',sans-serif; font-weight:600; font-size:13px; color:var(--brass-soft); text-decoration:none; } /* Query Loop: the post-template