/* ========================================================================== ICRR site styles: ported 1:1 from the signed-off mockups (mockups/compendium/src/shared.css + mockups/site-restyle/src/site.css). Theme markup uses the same class names, so the site matches the mockups. Adaptations for WordPress blocks are at the end of this file. ========================================================================== */ :root{ --navy:#0F1254; --blue:#1C2098; --blue-600:#191D8A; --cyan:#00BED5; --aqua-btn:#8FE4EF; --cyan-50:#E6F8FB; --purple:#745BF8; --purple-50:#F0EDFF; --ink:#111827; --body:#404040; --muted:#6b7280; --line:#e5e7eb; --soft:#f6f7fb; --white:#fff; /* Light/dark tokens (dark values at the end of this file): page and card grounds, heading and link text, field borders. */ color-scheme:light; --page:#fff; --surface:#fff; --heading:#0F1254; --link:#1C2098; --field:#cfd4e6; --header:#fff; --teal:#0b7f8f; --eyebrow:#009dae; --purple-text:#5a43d6; --radius:14px; /* Type scale v2: matches mockups/site-restyle/src/site.css "Revised type scale (v2)" */ --fs-display:clamp(2.125rem,1.6rem + 1.9vw,2.75rem); --fs-h2:clamp(1.6875rem,1.45rem + .9vw,2rem); --fs-h3:clamp(1.3125rem,1.2rem + .45vw,1.5rem); --fs-h4:1.1875rem; --fs-lead:1.1875rem; --fs-body:1.0625rem; --fs-ui:1rem; --fs-sm:.9375rem; --fs-xs:.8125rem; --measure:38rem; /* Spacing */ --space-section:5rem; --space-block:1.5rem; --shadow:0 1px 2px rgba(15,18,84,.06),0 8px 24px rgba(15,18,84,.06); } *{box-sizing:border-box;margin:0;padding:0} /* Reset theme base styles when the mockup is embedded in a WordPress page */ .icrr-mockup :where(h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd,fieldset,legend){margin:0;padding:0;text-transform:none;letter-spacing:normal} .icrr-mockup :where(ul,ol){list-style:none} body{font-family:"Noto Sans",system-ui,sans-serif;color:var(--body);background:var(--page);line-height:1.6;-webkit-font-smoothing:antialiased} a{color:var(--link);text-decoration:none} a:hover{color:var(--cyan)} h1,h2,h3,h4{font-family:Livvic,"Noto Sans",sans-serif;color:var(--heading);line-height:1.2;font-weight:600} h1,h2,.icrr-mockup :is(h1,h2){letter-spacing:-.01em} h1{line-height:1.12} h3{line-height:1.3} h4{font-family:"Noto Sans",sans-serif;font-size:var(--fs-h4);line-height:1.4} img{max-width:100%;display:block} .wrap{max-width:80rem;margin:0 auto;padding:0 24px} .mock-flag{background:var(--purple);color:#fff;font-size:12px;text-align:center;padding:6px 16px;letter-spacing:.02em} /* Site header (mirrors live site) */ .topbar{display:flex;justify-content:flex-end;gap:10px;font-size:14px;padding:10px 48px 0;color:var(--link)} .topbar span{color:#c7c9e6} .site-header{background:var(--surface);box-shadow:0 6px 18px rgba(15,18,84,.08);position:relative;z-index:5} .site-header .row{display:flex;align-items:center;gap:32px;padding:6px 24px 14px;max-width:80rem;margin:0 auto} .logo{height:58px;width:auto} .mainnav{display:flex;gap:28px;flex:1;font-size:15px} .mainnav a{color:var(--link)} .mainnav a.active{font-weight:600;border-bottom:2px solid var(--cyan);padding-bottom:4px} .pill{display:inline-flex;align-items:center;gap:8px;border-radius:9999px;background:var(--cyan);color:#fff;font-weight:600;font-size:14px;padding:9px 20px;border:0;cursor:pointer;white-space:nowrap} .pill:hover{color:#fff;background:#00a9bf} .pill.ghost{background:transparent;color:var(--link);box-shadow:inset 0 0 0 1.5px var(--blue)} .pill.ghost:hover{background:var(--blue);color:#fff} .pill.white{background:var(--surface);color:var(--heading)} .icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} /* Compendium sub-navigation */ .subnav{background:var(--navy);color:#fff} .subnav .wrap{display:flex;align-items:center;gap:24px;height:52px;overflow-x:auto;scrollbar-width:none} .subnav .wrap::-webkit-scrollbar{display:none} .subnav .brand{font-family:Livvic;font-weight:700;font-size:17px;color:#fff;display:flex;align-items:center;gap:10px;white-space:nowrap} .subnav .brand i{width:8px;height:8px;border-radius:50%;background:var(--cyan);display:inline-block} .subnav nav{display:flex;gap:20px;font-size:14px;white-space:nowrap} .subnav nav a{color:#c9cbf0} .subnav nav a:hover,.subnav nav a.on{color:#fff} .subnav .sub-suggest{margin-left:auto;font-size:13px;font-weight:600;color:var(--cyan);white-space:nowrap} .subnav .sub-suggest:hover{color:#fff} .subnav .mini-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border-radius:9999px;padding:6px 14px;font-size:13px;color:#c9cbf0;min-width:220px} .tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:4px 10px;border-radius:9999px;background:var(--cyan-50);color:var(--teal)} .tag.purple{background:var(--purple-50);color:var(--purple-text)} .tag.navy{background:#e8e9f7;color:var(--link)} .tag.lock{background:#fff6e0;color:#8a5a00} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--eyebrow)} .section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px} .section-head h2{font-size:var(--fs-h2)} .section-head a{font-size:14px;font-weight:600} /* Footer */ .subscribe{background:var(--navy);color:#fff;padding:40px 24px;margin-top:72px} .subscribe .wrap{display:flex;gap:40px;align-items:center;justify-content:center;flex-wrap:wrap} .subscribe h4{color:#fff;font-size:26px;font-family:"Noto Sans"} .subscribe p{max-width:24rem;opacity:.85;font-size:15px} .subscribe .sub-field{display:flex;gap:8px} .subscribe input{border:0;border-radius:9999px;padding:10px 18px;min-width:240px;font:inherit} .foot{background:var(--surface);padding:22px 24px;font-size:13px;color:var(--muted);text-align:center} @media (max-width:1150px){.subnav .mini-search{display:none}} @media (max-width:900px){ .mainnav,.topbar{display:none} .site-header .row{justify-content:space-between} .subnav .mini-search{display:none} } @media (max-width:600px){ :root{--space-section:3.5rem} .wrap{padding:0 16px} .subscribe .sub-field{flex-direction:column} .subscribe input{min-width:0;width:100%} } /* ===== Revised type scale (v2) ===== Measured: Noto Sans x-height 0.536em and wide (avg 0.48em/char); Livvic x-height 0.497em. So: body stays 17px, line length capped at 38rem (~70 characters), Livvic headings sized up a little to match Noto's x-height, and heading steps roughly a perfect fourth (1.33). */ :root{ --fw-display:600; /* Livvic weight for big headings: try 500 or 600 */ --fs-hero:clamp(2.5rem,1.75rem + 2.6vw,3.5rem); /* 40 -> 56 homepage only */ --fs-display:clamp(2.125rem,1.6rem + 1.9vw,2.75rem); /* h1 34 -> 44 */ --fs-h2:clamp(1.6875rem,1.45rem + .9vw,2rem); /* 27 -> 32 */ --fs-h3:clamp(1.3125rem,1.2rem + .45vw,1.5rem); /* 21 -> 24 */ --fs-h4:1.1875rem; /* 19, Noto Sans 600 */ --fs-lead:1.1875rem; /* 19 */ --fs-body:1.0625rem; /* 17 */ --fs-sm:.9375rem; /* 15 */ --fs-xs:.8125rem; /* 13 */ --measure:38rem; --space-section:5rem; } h1,h2{letter-spacing:-.01em;font-weight:var(--fw-display)} /* Livvic gets lighter as it gets bigger: 500 for h1/h2 and display sizes, 600 for h3 and below */ h1{line-height:1.12} h2{line-height:1.2} h3{line-height:1.3} h4{line-height:1.4;font-weight:600} @media (max-width:600px){:root{--space-section:3.5rem}} /* ===== Site restyle: page-level components shared by every template ===== */ .mainnav a.active{font-weight:600;border-bottom:2px solid var(--cyan);padding-bottom:4px} section{scroll-margin-top:24px} /* Page header: light band replaces the heavy navy banner */ .page-head{background:linear-gradient(180deg,var(--soft),#fff);border-bottom:1px solid var(--line);padding:28px 0 40px} .crumbs{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap} .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--cyan)} .page-head .eyebrow{display:block;margin-top:28px} .page-head h1{font-size:var(--fs-display);margin:10px 0 14px;max-width:22ch} .page-head .lead{font-size:var(--fs-lead);line-height:1.55;max-width:var(--measure);color:var(--muted)} .meta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted);margin-top:20px} .meta .who{display:flex;align-items:center;gap:8px;color:var(--body)} .meta .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--purple))} /* Two- and three-column content layouts */ .layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:72px;margin-top:56px;align-items:start} .layout.with-aside{grid-template-columns:220px minmax(0,1fr) 300px;gap:44px} .sidenav{position:sticky;top:20px;font-size:14px} .sidenav .eyebrow{color:var(--muted);margin:0 0 10px} .sidenav ol{list-style:none;border-left:2px solid var(--line);margin-bottom:28px} .sidenav li a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--body)} .sidenav li a.on{border-color:var(--cyan);color:var(--heading);font-weight:600} .sidenav li a:hover{color:var(--cyan)} /* Article text */ .prose{font-size:var(--fs-body);line-height:1.6;max-width:var(--measure);color:var(--body)} .prose > h2{font-size:var(--fs-h2);margin:2.75rem 0 .75rem} .prose > h2:first-child{margin-top:0} .prose > h3{font-size:var(--fs-h3);margin:2rem 0 .5rem} .prose > h4{font-size:var(--fs-h4);font-family:"Noto Sans";margin:1.75rem 0 .375rem} .prose p{margin:0 0 1.5rem} .prose p a,.prose li a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .prose ul.list{list-style:none;margin:0 0 1.25rem} .prose ul.list li{position:relative;padding-left:22px;margin-bottom:.5rem} .prose ul.list li::before{content:"";position:absolute;left:4px;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--cyan)} .prose .note{font-size:15px;color:var(--muted);font-style:italic} /* Figures */ .figure{margin:28px 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface)} .figure img{width:100%;height:auto} .figure figcaption{font-size:13px;color:var(--muted);padding:10px 16px;border-top:1px solid var(--line)} .figure.wide{margin-left:-2rem;margin-right:-2rem} /* Stat cards */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:24px 0 28px} .stat{padding:18px 18px 16px;border-radius:var(--radius);background:var(--soft);border:1px solid var(--line)} .stat b{display:block;font-family:Livvic;font-size:2rem;line-height:1.1;color:var(--heading);font-weight:var(--fw-display)} .stat span{display:block;font-size:var(--fs-sm);line-height:1.45;color:var(--muted);margin-top:6px} .stat small{display:block;font-size:12px;color:var(--muted);margin-top:8px} /* Callouts */ .callout{border-radius:var(--radius);padding:22px 24px;margin:28px 0;background:var(--cyan-50);border-left:4px solid var(--cyan)} .callout .eyebrow{display:block;margin-bottom:6px;color:var(--teal)} .callout p{margin:0;color:var(--heading);font-size:var(--fs-lead);line-height:1.6} .callout.navy{background:var(--navy);border-left-color:var(--cyan)} .callout.navy p{color:#fff} .callout.navy .eyebrow{color:var(--cyan)} .callout.soft{background:var(--soft);border-left-color:var(--purple)} .callout.soft p{font-size:var(--fs-ui);color:var(--body)} /* Feature: image beside text, both inside the reading column */ .feature{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start;margin:28px 0;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)} .feature img{border-radius:10px;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top} .feature figcaption{font-size:12px;color:var(--muted);margin-top:8px} .feature .pull{font-family:"Noto Serif",serif;font-style:italic;font-size:1.1875rem;line-height:1.55;color:var(--heading);margin:4px 0 12px} .feature p{font-size:15px;margin:0} .feature p.pull{font-size:1.1875rem;margin:4px 0 0} /* Small icon cards (traditions, signs, values) */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:20px 0 28px} .mini{padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} .mini > .ic{margin-bottom:10px} .mini .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--cyan-50);color:var(--teal);margin-bottom:12px} .mini .ico.purple{background:var(--purple-50);color:var(--purple-text)} .mini .ico.navy{background:#e8e9f7;color:var(--link)} .mini h3{font-size:var(--fs-h4);font-family:"Noto Sans";margin-bottom:6px;line-height:1.35} .mini p{font-size:var(--fs-sm);line-height:1.55;margin:0;color:var(--muted)} /* Previous / next */ .next{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:48px} .next a{padding:18px 20px;color:var(--body)} .next a:hover{border-color:var(--cyan)} .next small{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em} .next b{display:block;font-family:Livvic;color:var(--heading);font-size:var(--fs-h4);margin-top:4px} /* Side cards */ aside .card{margin-bottom:20px;overflow:hidden} .side-h{font-size:16px;padding:16px 18px 6px;font-family:"Noto Sans"} .side-list a{display:block;padding:10px 18px;font-size:14px;color:var(--body);border-top:1px solid var(--line)} .side-list a:hover{background:var(--soft)} .side-list b{display:block;color:var(--heading);font-weight:600} .side-list small{color:var(--muted);font-size:12px} .side-cta{padding:20px;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff} .side-cta h3{color:#fff;font-size:var(--fs-h3);margin:6px 0 8px} .side-cta p{font-size:14px;color:#d6d8f5;margin-bottom:14px} /* Generic sections for landing-style pages */ .band{padding:var(--space-section) 0} .band.soft{background:var(--soft)} .band .section-head{margin-bottom:28px} .split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center} .split img{border-radius:var(--radius);width:100%;aspect-ratio:4/3;object-fit:cover} .cta-band{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;border-radius:20px;padding:40px;display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap} .cta-band h2{color:#fff;font-size:var(--fs-h2);margin:6px 0 8px} .cta-band p{color:#d6d8f5;max-width:36rem} /* Card grid for listings */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px} .post{display:flex;flex-direction:column;color:var(--body);overflow:hidden;transition:transform .2s,box-shadow .2s} .post:hover{transform:translateY(-2px);color:var(--body)} .post img{width:100%;aspect-ratio:16/10;object-fit:cover} .post .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1} .post h3{font-size:var(--fs-h3)} .post p{font-size:var(--fs-sm);line-height:1.55;color:var(--muted)} .post .more{margin-top:auto;padding-top:8px;font-size:14px;font-weight:600;color:var(--link)} .filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 28px} .filters a{font-size:14px;padding:7px 14px;border-radius:9999px;border:1px solid var(--line);color:var(--body);background:var(--surface)} .filters a.on{background:var(--navy);border-color:var(--navy);color:#fff} /* Before / after switcher */ .compare-bar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(15,18,84,.05)} .compare-bar .wrap{display:flex;align-items:center;gap:16px;height:56px} .compare-bar strong{font-family:Livvic;color:var(--heading);font-size:16px} .seg{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:9999px;padding:3px;margin-left:auto} .seg label{font-size:14px;font-weight:600;padding:6px 16px;border-radius:9999px;cursor:pointer;color:var(--muted)} #v-before:checked ~ .compare-bar label[for=v-before],#v-after:checked ~ .compare-bar label[for=v-after]{background:var(--navy);color:#fff} .view{display:none} #v-before:checked ~ .v-before,#v-after:checked ~ .v-after{display:block} .compare-radio{position:absolute;opacity:0;pointer-events:none} .before-shots{max-width:1000px;margin:32px auto;padding:0 24px;display:grid;gap:18px} .before-shots img{width:100%;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)} .issues{max-width:1000px;margin:32px auto 0;padding:0 24px} .issues ol{counter-reset:i;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:14px} .issues li{counter-increment:i;position:relative;padding:14px 16px 14px 48px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:14px;line-height:1.5} .issues li::before{content:counter(i);position:absolute;left:14px;top:13px;width:24px;height:24px;border-radius:50%;background:#fde8e8;color:#b42318;font-weight:700;font-size:13px;display:grid;place-items:center} .issues li b{color:var(--ink)} @media (max-width:1100px){.layout.with-aside{grid-template-columns:minmax(0,1fr) 280px}.layout.with-aside .sidenav{display:none}} @media (max-width:900px){ .layout{grid-template-columns:1fr;gap:28px}.sidenav{position:static} .layout.with-aside{grid-template-columns:1fr} .split{grid-template-columns:1fr;gap:28px} .figure.wide{margin-left:0;margin-right:0} } @media (max-width:600px){ .feature{grid-template-columns:1fr}.feature img{max-width:220px} .next{grid-template-columns:1fr} .cta-band{padding:28px} .compare-bar strong{font-size:14px} .seg label{padding:6px 12px} } /* ===== Header (v2): same structure as the live header, cleaner and keyboard friendly ===== */ .hdr{background:var(--surface);box-shadow:0 6px 18px rgba(15,18,84,.07);position:relative;z-index:30} .hdr-top{display:flex;justify-content:flex-end;align-items:center;gap:10px;font-size:14px;padding-top:10px;color:#c7c9e6} .hdr-top a{color:var(--blue)} .hdr-top a:hover{color:var(--cyan)} .hdr-login{display:inline-flex;align-items:center;gap:6px} .hdr-login .icon{width:16px;height:16px} .hdr-row{display:flex;align-items:center;gap:40px;padding-top:4px;padding-bottom:16px} .hdr-logo img{height:56px;width:auto} .hdr-nav{display:flex;gap:6px;flex:1} .hdr-item{position:static} .hdr-item > a{display:block;padding:10px 14px;font-size:16px;color:var(--link);border-radius:9999px} .hdr-item > a.active{color:var(--heading);font-weight:600;box-shadow:inset 0 -2px 0 var(--cyan);border-radius:0} .hdr-item:hover > a,.hdr-item:focus-within > a{color:var(--heading);background:var(--soft)} .mega{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 18px 30px rgba(15,18,84,.08);padding:32px max(24px,calc((100vw - 80rem)/2 + 24px));display:none;gap:56px} .hdr-item:hover .mega,.hdr-item:focus-within .mega{display:flex} .mega-col{display:flex;flex-direction:column;gap:2px;min-width:180px} .mega-col .eyebrow{margin-bottom:8px} .mega-col a{padding:6px 0;color:var(--body);font-size:15px} .mega-col a:hover{color:var(--link)} .mega-feature{margin-left:auto;display:flex;gap:16px;align-items:center;max-width:360px;padding:12px;border-radius:12px;background:var(--soft);color:var(--body)} .mega-feature img{width:96px;height:96px;object-fit:cover;border-radius:8px} .mega-feature b{display:block;font-family:Livvic;color:var(--heading);font-size:18px;margin:2px 0} .mega-feature small{font-size:14px;color:var(--muted)} .hdr-tools{display:flex;align-items:center;gap:14px} .hdr-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--heading)} .hdr-icon:hover{background:var(--soft)} .hdr-icon .icon{width:22px;height:22px} .hdr-burger{display:none;position:relative} .hdr-burger > summary{list-style:none;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:var(--heading)} .hdr-burger > summary::-webkit-details-marker{display:none} .hdr-burger .icon{width:24px;height:24px} .drawer{position:absolute;right:-8px;top:52px;width:min(340px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(15,18,84,.14);padding:8px 0} .drawer details{border-bottom:1px solid var(--line)} .drawer details summary{padding:14px 20px;font-weight:600;color:var(--heading);cursor:pointer;list-style:none;display:flex;justify-content:space-between} .drawer details summary::after{content:"";flex:none;align-self:center;width:14px;height:14px;background:linear-gradient(var(--cyan),var(--cyan)) center/14px 2px no-repeat,linear-gradient(var(--cyan),var(--cyan)) center/2px 14px no-repeat;transition:background-size .26s ease} .drawer details[open]:not(.is-closing) summary::after{background-size:14px 2px,2px 0} .drawer .dr-body{overflow:hidden} .drawer .dr-body::after{content:"";display:block;height:10px} /* Space under the last link, inside the slide. */ .drawer details a{display:block;padding:8px 20px 8px 32px;color:var(--body);font-size:15px} .drawer-foot{display:flex;gap:18px;padding:14px 20px;font-size:14px} @media (max-width:1100px){.hdr-row{gap:20px}.hdr-item > a{padding:10px 10px;font-size:15px}} @media (max-width:960px){.hdr-nav,.hdr-top{display:none}.hdr-burger{display:block}.hdr-row{justify-content:space-between;padding-top:14px;padding-bottom:14px}.hdr-logo img{height:46px}} @media (max-width:480px){.hdr-tools .pill{display:none}} .hdr-item > a{position:relative} .hdr-item:hover > a::after{content:"";position:absolute;left:-20px;right:-20px;top:100%;height:30px} /* ===== Footer (v2) ===== */ .ftr{background:var(--surface);border-top:1px solid var(--line);padding:56px 0 28px;font-size:15px} .ftr-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px} .ftr-grid img{height:64px;width:auto;margin-bottom:14px} .ftr-grid p{font-size:14px;color:var(--muted);max-width:18rem} .ftr h4{font-size:15px;font-family:"Noto Sans";margin-bottom:12px} .ftr ul{list-style:none} .ftr li{margin-bottom:8px} .ftr li a{color:var(--body)} .ftr li a:hover{color:var(--link)} .ftr-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)} @media (max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}.ftr-grid > div:first-child{grid-column:1/-1}} /* ===== Homepage ===== */ .home-hero{padding:72px 0 80px} .home-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:64px;align-items:center} .home-hero h1{font-size:var(--fs-hero);line-height:1.08;letter-spacing:-.015em;margin:14px 0 20px;max-width:14ch} .home-hero .lead{font-size:1.25rem;line-height:1.55;color:var(--muted);max-width:30rem} .home-hero .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px} .home-hero .btns .pill{padding:12px 24px;font-size:15px} .hero-photo{position:relative} .hero-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:46% 54% 50% 50% / 52% 46% 54% 48%} .news-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px} .news{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;color:var(--body)} .news img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px} .news time{font-size:var(--fs-xs);color:var(--muted)} .news h3{font-size:var(--fs-h3);margin:6px 0 8px} .news p{font-size:var(--fs-sm);line-height:1.55;color:var(--muted)} .news:hover h3{color:var(--link)} .intro{display:grid;grid-template-columns:140px minmax(0,var(--measure));gap:48px;justify-content:center;align-items:start} .intro img{width:120px} .intro h2{font-size:var(--fs-h2);margin-bottom:16px} .intro p{font-size:var(--fs-lead);line-height:1.6;margin-bottom:1.5rem} .panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center} .panel + .panel{margin-top:96px} .panel.flip > figure{order:2} .panel figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px} .panel figcaption{font-size:var(--fs-xs);color:var(--muted);margin-top:10px} .panel h2{font-size:var(--fs-h2);margin:10px 0 14px} .panel p{font-size:var(--fs-body);line-height:1.6;margin-bottom:1.25rem;max-width:var(--measure)} .textlink{font-weight:600;font-size:15px;color:var(--link);display:inline-flex;gap:8px;align-items:center} .textlink:hover{gap:12px} .paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px} .path{color:var(--body)} .path img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;margin-bottom:18px} .path{padding:28px;background:var(--surface);border-radius:18px;border:1px solid var(--line)} .path .ic{margin-bottom:14px} .path h3{font-size:var(--fs-h3);margin-bottom:6px} .path p{font-size:var(--fs-sm);line-height:1.55;color:var(--muted);margin-bottom:12px} .path:hover h3{color:var(--link)} .compendium-band{background:var(--navy);color:#d6d8f5;border-radius:24px;padding:56px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;position:relative;overflow:hidden} .compendium-band h2{color:#fff;font-size:var(--fs-h2);margin:8px 0 12px} .compendium-band p{max-width:34rem;font-size:var(--fs-body);line-height:1.6} @media (max-width:900px){ .home-hero{padding:40px 0 56px}.home-hero .wrap,.panel,.intro{grid-template-columns:1fr;gap:32px} .panel.flip > figure{order:0}.news-row,.paths{grid-template-columns:1fr} .hero-photo{max-width:420px}.compendium-band{grid-template-columns:1fr;padding:36px} } @media (max-width:600px){.news{grid-template-columns:96px 1fr;gap:16px}.news p{display:none}} .band + .subscribe{margin-top:0} /* ===== ICRR icons: navy humanist line over a soft colour wash ===== */ .ic{width:48px;height:48px;color:var(--heading);flex:none;--ic-wash:var(--cyan);--ic-wash-o:.42} .ic.sm{width:32px;height:32px} .ic.lg{width:72px;height:72px;--ic-stroke:1.5} .ic.purple{--ic-wash:var(--purple);--ic-wash-o:.3} .ic.on-dark{color:#fff;--ic-wash-o:.6} .ic .w{fill:var(--ic-wash);opacity:var(--ic-wash-o);stroke:none} .ic .l{fill:none;stroke:currentColor;stroke-width:var(--ic-stroke,1.75);stroke-linecap:round;stroke-linejoin:round} .ic-row{display:flex;gap:6px;margin-bottom:10px} .ic-row .ic{width:36px;height:36px} /* ===== Homepage hero (v4): full-bleed, dark and bold, like a research institute ===== */ .hero-x{position:relative;overflow:hidden;background:var(--navy);color:#fff;min-height:min(82vh,760px);display:flex;flex-direction:column;justify-content:flex-end} .hx-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 40%;transform:scale(1.02);transition:transform 6s cubic-bezier(.2,.7,.2,1)} .hero-x:hover .hx-bg{transform:scale(1.06)} .hx-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,18,84,.94) 0%,rgba(15,18,84,.78) 38%,rgba(15,18,84,.25) 70%,rgba(15,18,84,.1) 100%),linear-gradient(0deg,rgba(10,12,60,.85) 0%,rgba(10,12,60,0) 40%)} .hx-inner{position:relative;z-index:1;padding-top:96px;padding-bottom:56px} .hx-copy{max-width:40rem} .hx-kicker{display:inline-flex;align-items:center;gap:12px;font-family:Livvic;font-size:1.25rem;font-weight:var(--fw-display);color:var(--cyan)} .hx-kicker::before{content:"";width:32px;height:2px;background:var(--cyan)} .hero-x h1{color:#fff;font-size:clamp(2.5rem,1.7rem + 3vw,3.875rem);line-height:1.06;letter-spacing:-.015em;font-weight:var(--fw-display);margin:18px 0 22px;max-width:16ch} .hero-x p{font-size:1.25rem;line-height:1.55;color:#eef0fd;max-width:34rem} .hero-x p .accent{color:#fff;font-weight:500} .hx-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px} .hx-btns .pill{padding:13px 26px;font-size:15px} .pill.outline-white{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)} .pill.outline-white:hover{background:var(--surface);color:var(--heading)} .pill .arr{display:inline-block;transition:transform .25s} .pill:hover .arr{transform:translateX(4px)} .hx-strip{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.14);background:rgba(10,12,60,.55);backdrop-filter:blur(6px)} .hx-strip .wrap{display:grid;grid-template-columns:repeat(3,1fr)} .hx-strip a{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:center;padding:24px 28px 24px 0;color:#c9cbf0;border-right:1px solid rgba(255,255,255,.12)} .hx-strip a + a{padding-left:28px} .hx-strip a:last-child{border-right:0} .hx-strip b{font-family:Livvic;font-size:1.75rem;font-weight:var(--fw-display);color:#fff;grid-row:span 2} .hx-strip span{font-size:14px;line-height:1.45} .hx-strip i{font-style:normal;color:var(--cyan);grid-row:span 2;transition:transform .25s} .hx-strip a::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .35s} .hx-strip a + a::after{left:28px} .hx-strip a:hover{color:#fff} .hx-strip a:hover i{transform:translateX(4px)} .hx-strip a:hover::after{transform:scaleX(1)} @media (max-width:900px){.hx-strip .wrap{grid-template-columns:1fr}.hx-strip a,.hx-strip a + a{padding:18px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}.hx-strip a + a::after{left:0}.hx-strip a:last-child{border-bottom:0}.hx-shade{background:linear-gradient(0deg,rgba(15,18,84,.95) 10%,rgba(15,18,84,.55) 100%)}} @media (prefers-reduced-motion:reduce){.hx-bg{transition:none}} /* ===== Newsletter + footer (v2) ===== */ .site-foot{margin-top:var(--space-section)} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .nl2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding-bottom:48px;margin-bottom:56px;border-bottom:1px solid rgba(255,255,255,.12)} .nl2 h2{color:#fff;font-size:var(--fs-h3);margin-bottom:6px} .nl2 p{font-size:var(--fs-sm);color:#c9cbf0;max-width:26rem} .nl2-row{display:flex;gap:10px} .nl2-row input{flex:1;min-width:0;font:inherit;font-size:16px;padding:12px 18px;border-radius:9999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;outline:none;transition:border-color .2s,background .2s} .nl2-row input::placeholder{color:#a9acd9} .nl2-row input:focus{border-color:var(--cyan);background:rgba(255,255,255,.1)} .nl2-row .pill{padding:12px 24px;font-size:15px} .nl2-consent{display:flex;gap:10px;align-items:center;margin-top:12px;font-size:13px;color:#a9acd9} .nl2-consent input{accent-color:var(--cyan);width:16px;height:16px} .nl2-consent a{color:#e3e4fa;text-decoration:underline;text-underline-offset:2px} .nl2-done{display:none;font-weight:600;color:var(--cyan)} .nl2-form.done .nl2-row,.nl2-form.done .nl2-consent{display:none} .nl2-form.done .nl2-done{display:block} @media (max-width:800px){.nl2{grid-template-columns:1fr;gap:20px}} @media (max-width:480px){.nl2-row{flex-direction:column}} .ftr-main{background:var(--navy);color:#c9cbf0;padding:56px 0 28px;position:relative;overflow:hidden} .ftr-main .wrap{position:relative} .ftr-cols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px} .ftr-brand img{height:72px;width:auto;margin-bottom:18px} .ftr-brand p{font-size:var(--fs-sm);line-height:1.6;max-width:20rem;margin-bottom:20px} .ftr-main h3{font-family:"Noto Sans";font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px} .ftr-main ul{list-style:none} .ftr-main li{margin-bottom:10px} .ftr-main li a{color:#e3e4fa;font-size:15px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s,color .2s;padding-bottom:2px} .ftr-main li a:hover{color:#fff;background-size:100% 1px} .social{display:flex;gap:10px;margin-top:16px} .social a{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.08);transition:background .2s,transform .2s} .social a:hover{background:var(--cyan);transform:translateY(-2px)} .social svg{width:18px;height:18px;fill:#fff} .ftr-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#a9acd9} .ftr-legal .links{display:flex;gap:20px} .ftr-legal a{color:#c9cbf0} .ftr-legal a:hover{color:#fff} @media (max-width:1000px){.ftr-cols{grid-template-columns:1fr 1fr 1fr}.ftr-brand{grid-column:1/-1}} @media (max-width:600px){.ftr-cols{grid-template-columns:1fr 1fr;gap:28px}} /* ===== Internal page banners: four variants, one system ===== .bn-dark navy, optional photo .bn-light pale, optional photo .bn-plain no photo (lines texture) .bn-facts adds a row of key details Photos use the "arch" shape: three rounded corners, one square. */ .bn{position:relative;overflow:hidden} .bn .wrap{position:relative;z-index:1} .bn .crumbs{padding-top:24px} .bn-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding:40px 0 64px} .bn-grid.photo-left > .bn-photo{order:-1} .bn-text .eyebrow{display:block;margin-bottom:12px} .bn-text .eyebrow,.members-intro .eyebrow{color:var(--cyan)} /* Labels on dark banners keep the bright aqua. */ .bn h1{font-size:clamp(2.25rem,1.6rem + 2.2vw,3.25rem);line-height:1.1;font-weight:var(--fw-display);letter-spacing:-.015em;margin-bottom:16px;max-width:18ch} .bn .lead{font-size:var(--fs-lead);line-height:1.55;max-width:34rem} .bn-photo img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:120px 120px 120px 0} .bn-photo.alt img{border-radius:0 120px 120px 120px} .bn-photo figcaption{font-size:12px;margin-top:10px} .bn-dark{background:var(--navy);color:#d6d8f5} .bn-dark .crumbs,.bn-dark .crumbs a{color:#a9acd9} .bn-dark h1{color:#fff} .bn-dark .lead{color:#eef0fd} .bn-dark .bn-photo figcaption{color:#a9acd9} .bn-dark::after,.bn-plain::after{content:"";position:absolute;right:0;top:0;bottom:0;width:46%;background:repeating-linear-gradient(135deg,rgba(0,190,213,.10) 0 1px,transparent 1px 14px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%);pointer-events:none} .bn-dark.has-photo::after{width:34%} .bn-light{background:linear-gradient(180deg,#f2fbfd,#fff);border-bottom:1px solid var(--line)} .bn-light .lead{color:var(--muted)} .bn-light .bn-photo figcaption{color:var(--muted)} .bn-plain .bn-grid{grid-template-columns:minmax(0,1fr);padding:48px 0 64px} .bn-meta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:13px;margin-top:22px;color:var(--muted)} .bn-meta .who{display:flex;align-items:center;gap:8px;color:var(--body);font-weight:600} .bn-meta .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue))} .bn-facts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid rgba(255,255,255,.14);margin-top:-24px} .bn-facts-row div{padding:22px 24px 26px 0} .bn-facts-row div + div{padding-left:24px;border-left:1px solid rgba(255,255,255,.14)} .bn-facts-row b{display:block;font-family:Livvic;font-weight:var(--fw-display);font-size:1.625rem;color:#fff;line-height:1.2} .bn-facts-row span{font-size:13px;color:#a9acd9} .bn-light .bn-facts-row{border-top-color:var(--line)} .bn-light .bn-facts-row div + div{border-left-color:var(--line)} .bn-light .bn-facts-row b{color:var(--heading)} .bn-light .bn-facts-row span{color:var(--muted)} .bn-photo img{transition:border-radius .6s cubic-bezier(.2,.7,.2,1)} .bn-photo:hover img{border-radius:120px 120px 0 120px} .bn-photo.alt:hover img{border-radius:120px 0 120px 120px} @media (max-width:900px){ .bn-grid{grid-template-columns:1fr;gap:28px;padding:28px 0 44px}.bn-grid.photo-left > .bn-photo{order:0} .bn-photo img,.bn-photo.alt img,.bn-photo:hover img{border-radius:64px 64px 64px 0} .bn-dark::after,.bn-plain::after{width:60%} .bn-facts-row{margin-top:0}.bn-facts-row div,.bn-facts-row div + div{padding:16px 0;border-left:0;border-bottom:1px solid rgba(255,255,255,.14)} } /* Homepage welcome (FRIB-style): short intro on white, then a navy strip of what we offer */ .welcome{padding:var(--space-section) 0} .welcome-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:56px;align-items:start} .welcome h2{font-size:var(--fs-h2)} .welcome p{font-size:var(--fs-lead);line-height:1.6;color:var(--body);margin-bottom:1.25rem;max-width:42rem} .offer{position:relative;overflow:hidden;background:var(--navy);color:#d6d8f5} .offer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:30%;background:repeating-linear-gradient(135deg,rgba(0,190,213,.22) 0 1px,transparent 1px 12px);-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)} .offer-grid{position:relative;display:grid;grid-template-columns:1fr 1fr} .offer-col{padding:64px 48px;text-align:center;display:flex;flex-direction:column;align-items:center} .offer-col + .offer-col{border-left:1px solid rgba(255,255,255,.16)} .offer h2{color:#fff;font-size:var(--fs-h2);margin-bottom:12px} .offer p{font-size:var(--fs-body);line-height:1.6;max-width:24rem;margin-bottom:20px;color:#e3e4fa} .offer a{font-weight:600;font-size:15px;color:#fff;display:inline-flex;gap:10px;align-items:center} .offer a .arr{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--cyan);color:#0F1254;font-size:14px;transition:transform .25s} .offer a:hover{color:var(--cyan)} .offer a:hover .arr{transform:translateX(4px)} @media (max-width:800px){.welcome-grid{grid-template-columns:1fr;gap:16px}.offer-grid{grid-template-columns:1fr}.offer-col{padding:44px 8px}.offer-col + .offer-col{border-left:0;border-top:1px solid rgba(255,255,255,.16)}} .welcome-mono{width:120px;height:auto;margin-top:24px} @media (max-width:800px){.welcome-mono{width:84px;margin-top:16px}} /* Phone hero: photo on top with the stargazer on the right and fully visible, text below, no stats strip */ @media (max-width:600px){ .hero-x{min-height:0;display:block} .hx-bg{position:relative;display:block;height:360px;object-position:0% 100%;transform:none} .hero-x:hover .hx-bg{transform:none} .hx-shade{bottom:auto;height:360px;background:linear-gradient(180deg,rgba(15,18,84,.25) 0%,rgba(15,18,84,0) 45%,rgba(15,18,84,.95) 100%)} .hx-inner{padding-top:4px;padding-bottom:48px} .hx-strip{display:none} } /* Homepage photos: square by default (the page already has plenty of softness); opposite corners curve on hover */ .panel figure img,.news img{border-radius:0;transition:border-radius .5s cubic-bezier(.2,.7,.2,1)} .panel figure:hover img,.news:hover img{border-radius:56px 0 56px 0} .news:hover img{border-radius:32px 0 32px 0} @media (prefers-reduced-motion:reduce){.panel figure img,.news img{transition:none}} /* ===== No rounded buttons (v5) ===== Calls to action are text links with an arrow. The underline sits a little below the text and thickens downwards on hover; the arrow nudges right. Form submits use a square-edged block (forms need a real button). */ .pill,.pill.ghost,.pill.white,.pill.outline-white{display:inline-flex;align-items:center;gap:.5em;padding:0 0 .35em;border-radius:0;background:none!important;box-shadow:none!important;font-weight:600;font-size:16px;color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.45em;text-decoration-color:currentColor;transition:text-decoration-thickness .2s var(--ease,ease),color .2s} .pill::after{content:"→";display:inline-block;text-decoration:none;transition:transform .25s} .pill:hover{color:var(--heading);text-decoration-thickness:3px;text-decoration-color:var(--cyan)} .pill.ghost:hover{color:var(--heading)} /* the old ghost hover made the text white, invisible now pills have no background */ .pill:hover::after{transform:translateX(5px)} .pill.white,.pill.outline-white,.hero-x .pill,.compendium-band .pill,.side-cta .pill,.cta-band .pill,.ftr-brand .pill{color:#fff} .pill.white:hover,.pill.outline-white:hover,.hero-x .pill:hover,.compendium-band .pill:hover,.side-cta .pill:hover,.cta-band .pill:hover,.ftr-brand .pill:hover{color:#fff;text-decoration-color:var(--cyan)} .hero-x .hx-btns{gap:36px;margin-top:30px} .hero-x .pill:first-child{color:var(--cyan);text-decoration-color:var(--cyan)} .hero-x .pill:first-child:hover{color:#fff} .hdr-tools .pill{font-size:15px;color:var(--heading);text-decoration-color:var(--cyan)} .hdr-tools .pill::after{content:none} .btn-square{display:inline-flex;align-items:center;gap:.5em;font:inherit;font-weight:600;font-size:15px;border:0;border-radius:0;background:var(--aqua-btn);color:#0F1254;padding:12px 22px;cursor:pointer;transition:background .2s,color .2s} .btn-square::after{content:"→";transition:transform .25s} .btn-square:hover{background:var(--surface);color:var(--heading)} .btn-square:hover::after{transform:translateX(4px)} .nl2-row input{border-radius:0} .textlink{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.45em;transition:text-decoration-thickness .2s} .textlink:hover{text-decoration-thickness:3px;text-decoration-color:var(--cyan)} .tag{border-radius:3px} .filters a{border-radius:0;border:0;border-bottom:2px solid transparent;padding:6px 2px;margin-right:18px;background:none} .filters a.on{background:none;color:var(--heading);border-bottom-color:var(--cyan)} .filters a:hover{border-bottom-color:var(--line)} /* ===== Homepage hero (v5): text higher, stargazer higher and further right ===== */ .hero-x{min-height:min(74vh,700px);justify-content:center} .hx-inner{width:100%;padding-top:56px;padding-bottom:120px;flex:1;display:flex;flex-direction:column;justify-content:center} .hx-strip{position:absolute;left:0;right:0;bottom:0} .hx-bg{width:118%;height:auto;aspect-ratio:3/2;inset:auto auto 18% 20%;object-fit:cover;transform-origin:50% 70%} .hero-x h1 em{font-style:italic;font-weight:500} @media (max-width:900px){.hx-strip{position:relative}.hx-inner{padding-bottom:48px}.hx-bg{width:150%;left:auto;right:-35%;bottom:auto;top:0}} @media (max-width:600px){.hx-bg{position:relative;inset:auto;width:100%;height:360px;aspect-ratio:auto;object-position:0% 100%}.hx-inner{flex:none;padding-top:8px}} .hero-x .hx-btns .pill{padding:0 0 .35em;font-size:16px} /* ===== Calls to action (v6, Ben 11 Oct) ===== A .pill / .textlink: no underline at rest. On hover an aqua line draws in from the left under the whole link, arrow included, so it is one seamless line. B .arrow-circle: text with the arrow in a circle (used in strips of links). D .btn-square: square block for forms. "Make a gift" has a small gradient circle in front instead of a square. */ .pill,.pill.ghost,.pill.white,.pill.outline-white,.textlink{ display:inline-flex;align-items:center;gap:.5em;padding:0 0 6px;border-radius:0; text-decoration:none!important;background:linear-gradient(var(--cyan),var(--cyan)) 0 100%/0 2px no-repeat!important; box-shadow:none!important;font-weight:600;transition:background-size .4s cubic-bezier(.2,.7,.2,1),color .25s} .pill:hover,.textlink:hover{background-size:100% 2px!important;text-decoration:none!important} .textlink span{display:none} .textlink::after{content:"→";display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)} .textlink:hover::after,.pill:hover::after{transform:translateX(4px)} .hdr-tools .pill.gift::before{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--blue));flex:none} .arrow-circle{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:15px;color:#fff;text-decoration:none} .arrow-circle::after{content:"→";display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cyan);color:#0F1254;font-size:15px;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .25s} .arrow-circle:hover{color:var(--cyan)} .arrow-circle:hover::after{transform:translateX(4px);background:var(--surface)} /* ========================================================================== WordPress adaptations: block markup adds wrappers the mockups don't have (figure around images,

around links, ul/li around query loops). ========================================================================== */ .wp-site-blocks{padding:0} .wp-site-blocks > *, main > *, .wp-block-post-content > *{margin-block-start:0;margin-block-end:0} .wp-block-group{box-sizing:border-box} :where(.wp-block-post-content) figure{margin:0} /* Hero */ .hero-x figure.hx-bg{margin:0} .hero-x figure.hx-bg img{width:100%;height:100%;object-fit:cover;display:block;animation:icrr-drift 26s ease-in-out infinite alternate} .hero-x:hover figure.hx-bg img{animation-play-state:paused} @keyframes icrr-drift{from{transform:scale(1)}to{transform:scale(1.07)}} @media (prefers-reduced-motion:reduce){.hero-x figure.hx-bg img{animation:none}} .hero-x .hx-shade{position:absolute;inset:0} .hero-x .hx-btns{display:flex;flex-wrap:wrap} .hero-x .wp-block-html{display:contents} @media (max-width:600px){.hero-x figure.hx-bg{position:relative;inset:auto;width:100%;height:360px}.hero-x figure.hx-bg img{object-position:0% 100%}} /* Welcome */ .welcome-mono img{width:120px;height:auto} @media (max-width:800px){.welcome-mono img{width:84px}} /* Offer strip */ .offer-col > p{margin:0} .offer-col > p:last-child{margin-top:4px} /* Panels */ .panel > figure{margin:0} .panel > figure figcaption{font-size:var(--fs-xs);color:var(--muted);margin-top:10px;text-align:left} .panel .eyebrow{display:block} /* Paths */ .path .icrr-icon{margin-bottom:14px} .path > p:last-child{margin:0} /* Latest news: query loop list, no bullets */ .news-row{list-style:none;padding:0;margin:0} .news-row > li{margin:0;padding:0} .news-row > li::before{content:none!important} .news .wp-block-post-featured-image{margin:0} .news .wp-block-post-featured-image img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:0;transition:border-radius .5s cubic-bezier(.2,.7,.2,1)} .news:hover .wp-block-post-featured-image img{border-radius:32px 0 32px 0} .news .news-cat{font-size:var(--fs-xs);color:var(--muted)} .news .news-cat a{color:inherit} .news .wp-block-post-title{font-size:var(--fs-h3);margin:6px 0 8px} .news .wp-block-post-title a{color:inherit} .news .wp-block-post-excerpt{font-size:var(--fs-sm);line-height:1.55;color:var(--muted)} .news .wp-block-post-excerpt p{margin:0} .news .wp-block-post-excerpt__more-text{display:none} /* Compendium panel */ .compendium-wrap{padding-top:0} .compendium-band > p{margin:0} /* Internal pages: post content sits in .prose; rules mirror the mockup's ".prose > h2" etc. */ .prose > .wp-block-post-content > h2{font-size:var(--fs-h2);margin:2.75rem 0 .75rem} .prose > .wp-block-post-content > h2:first-child{margin-top:0} .prose > .wp-block-post-content > h3{font-size:var(--fs-h3);margin:2rem 0 .5rem} .prose > .wp-block-post-content > h4{font-size:var(--fs-h4);font-family:"Noto Sans";margin:1.75rem 0 .375rem} .prose > .wp-block-post-content > ul{list-style:none;margin:0 0 1.25rem} .prose > .wp-block-post-content > ul > li{position:relative;padding-left:22px;margin-bottom:.5rem} .prose > .wp-block-post-content > ul > li::before{content:"";position:absolute;left:4px;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--cyan)} .prose > .wp-block-post-content > .wp-block-image{margin:28px 0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--surface)} .prose > .wp-block-post-content > .wp-block-image img{width:100%;height:auto} .prose .wp-element-caption{font-size:13px;color:var(--muted);padding:10px 16px;margin:0} .prose a:not([class]){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .layout.single{grid-template-columns:minmax(0,1fr);justify-items:center} /* Stat row and overview */ .stat p{margin:0} .stat .stat-figure{font-family:Livvic;font-size:2rem;line-height:1.1;color:var(--heading);font-weight:var(--fw-display,600)} .stat .stat-text{font-size:var(--fs-sm);line-height:1.45;color:var(--muted);margin-top:6px} .stat .stat-source{font-size:12px;color:var(--muted);margin-top:8px} .mini > .icrr-icon-block{margin-bottom:10px} .mini p{margin:0} .facts-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} .facts-grid .mini p{font-size:var(--fs-sm)} /* Image feature and callout */ .feature > figure{margin:0} .feature > figure img{border-radius:10px;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top} .feature > figure figcaption{font-size:12px;color:var(--muted);margin-top:8px;padding:0} .feature .eyebrow{display:block} .callout .eyebrow{display:block} /* Side cards and previous/next */ aside .side-cta p{margin:0 0 14px} aside .side-cta > p:last-child{margin:0} .next .card{text-decoration:none} /* Listings */ .listing{margin-top:36px} .listing .grid{list-style:none;padding:0;margin:0} .listing .grid > li::before{content:none} .card.post .wp-block-post-featured-image{margin:0} .card.post .wp-block-post-featured-image img{width:100%;aspect-ratio:16/10;object-fit:cover} .card.post .body > *{margin:0} .card.post .wp-block-post-title{font-size:var(--fs-h3)} .card.post .wp-block-post-title a{color:inherit} .card.post .wp-block-post-excerpt{font-size:var(--fs-sm);line-height:1.55;color:var(--muted)} .card.post .wp-block-post-excerpt__more-text{display:none} .card.post .wp-block-post-date{font-size:12px;color:var(--muted)} .card.post .tags a{display:inline-flex;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:4px 10px;border-radius:3px;background:var(--cyan-50);color:var(--teal)} .card.post .more{margin-top:auto;padding-top:8px;font-size:14px;font-weight:600;color:var(--link)} .wp-block-query-pagination{margin-top:40px} /* Universal Beliefs content blocks */ .prose .figure.wide-crop img{aspect-ratio:21/9;object-fit:cover} .prose .figure figcaption{border-top:1px solid var(--line)} .ic-row{display:flex;gap:6px;margin-bottom:10px} .ic-row .icrr-icon{width:36px;height:36px} .mini > .icrr-icon-block,.callout > .icrr-icon-block{margin-bottom:10px} .callout.navy .icrr-icon{color:#fff;--ic-wash-o:.6} .callout .eyebrow{margin-top:10px} .callout.navy p:not(.eyebrow){color:#fff;font-size:var(--fs-lead);line-height:1.6;margin:0} .feature .pull{font-family:"Noto Serif",serif;font-style:italic;font-size:1.1875rem;line-height:1.55;color:var(--heading);margin:4px 0 0} .prose .note{font-size:15px;color:var(--muted);font-style:italic} .card.post .tags{display:flex;gap:6px;flex-wrap:wrap} /* Light banner without a photo (listings by default) */ .bn-light.bn-plain .bn-grid{grid-template-columns:minmax(0,1fr);padding:48px 0 56px} .bn-light .crumbs a{color:var(--muted)} /* Page-specific styles that lived inline in the mockups (guide, guides, about) */ .ih{display:flex;gap:10px;align-items:center} .ih .icrr-icon-block{line-height:0} .signs{list-style:none!important;counter-reset:s;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 24px!important} .signs li{counter-increment:s;padding:14px 16px 14px 52px!important;position:relative;border:1px solid var(--line);border-radius:12px;font-weight:600;color:var(--heading);font-size:15px;margin:0!important} .signs li::before{content:counter(s)!important;position:absolute;left:14px!important;top:12px!important;width:26px!important;height:26px!important;border-radius:50%;background:var(--cyan)!important;color:#fff;display:grid;place-items:center;font-size:13px} @media (max-width:600px){.signs{grid-template-columns:1fr}} .callout.soft p:not(.eyebrow){font-size:var(--fs-ui);color:var(--body);margin:0} .callout.soft .eyebrow{color:var(--purple-text)} .three-col .mini{border:0;border-top:3px solid var(--cyan);border-radius:0;background:transparent;padding:18px 0 0} .three-col .mini h3{font-family:Livvic;font-size:var(--fs-h3)} .three-col .mini p{font-size:var(--fs-body);line-height:1.6} .split p{margin-bottom:1rem;font-size:var(--fs-body);line-height:1.7} .split h2{font-size:var(--fs-h2);margin:8px 0 14px} .timeline{list-style:none;border-left:2px solid var(--line);margin-left:6px} .timeline li{position:relative;padding:0 0 22px 24px} .timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--cyan)} .timeline b{display:block;font-family:Livvic;color:var(--heading);font-size:var(--fs-h4)} .timeline span{font-size:var(--fs-sm);color:var(--muted)} .prose > .wp-block-post-content > .ih{margin:2rem 0 .5rem} .prose > .wp-block-post-content > .ih h3{font-size:var(--fs-h3);margin:0} /* ===== Round 11 Oct pm: tags, filters, cards, link underline ===== */ /* Tag pills: rounded, one colour per guide section (as in the original guides mockup) */ .tags{display:flex;gap:6px;flex-wrap:wrap} .tag,.tags a.tag{display:inline-flex;align-items:center;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:4px 10px;border-radius:9999px!important;text-decoration:none;background:none} .tag-aqua{background:var(--cyan-50)!important;color:var(--teal)!important} .tag-purple{background:var(--purple-50)!important;color:var(--purple-text)!important} .tag-blue{background:#e8e9f7!important;color:var(--link)!important} .tag-grey{background:var(--soft)!important;color:var(--muted)!important;box-shadow:inset 0 0 0 1px var(--line)} .card.post .tags a{all:unset} .card.post .tags a.tag{display:inline-flex;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:4px 10px;border-radius:9999px;cursor:pointer} /* Filter pills: rounded (original guides mockup) */ .filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 28px} .filters a{font-size:14px;padding:7px 14px;margin:0;border-radius:9999px;border:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--body);background:var(--surface);transition:border-color .2s,background .2s} .filters a:hover{border-color:var(--cyan)} .filters a.on{background:var(--navy);border-color:var(--navy);color:#fff} /* Card grid: equal heights, "Read more" pinned to the bottom */ .listing .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px} .listing .grid > li{display:flex} .card.post{display:flex;flex-direction:column;width:100%;overflow:hidden} .card.post .body{display:flex;flex-direction:column;gap:8px;flex:1;padding:18px 20px 20px} .card.post .more{margin-top:auto} /* Homepage news: date then tags */ .news .news-date{font-size:var(--fs-xs);color:var(--muted)} .news .tags{margin-top:10px} /* Link underline: hidden at rest, grows upward and thicker on hover (smooth) */ .pill,.pill.ghost,.pill.white,.pill.outline-white,.textlink{background:linear-gradient(var(--cyan),var(--cyan)) 0 100%/100% 0 no-repeat!important;transition:background-size .35s cubic-bezier(.2,.7,.2,1),color .25s} .pill:hover,.textlink:hover{background-size:100% 3px!important} /* Guide page: smaller, squarer banner photo (like the beliefs banner) */ .bn-light .bn-grid{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:72px} .bn-light .bn-photo img{aspect-ratio:1/1} .bn-light.bn-plain .bn-grid{grid-template-columns:minmax(0,1fr)} @media (max-width:900px){.bn-light .bn-grid{grid-template-columns:1fr;gap:24px}.bn-light .bn-photo{max-width:360px}} /* Guide page sidebar stays visible on laptops: below 1100px the side card moves under the article */ @media (max-width:1100px) and (min-width:901px){ .layout.with-aside{grid-template-columns:200px minmax(0,1fr)} .layout.with-aside .sidenav{display:block} .layout.with-aside aside{grid-column:2} } .side-cta-links{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0} /* Search overlay (as on the live site): a white bar over the header, page dimmed behind */ .search-overlay{position:fixed;inset:0;z-index:100;background:rgba(15,18,84,.45);backdrop-filter:blur(2px);animation:icrr-fade .2s ease} .search-overlay[hidden]{display:none} .search-bar{background:var(--surface);box-shadow:0 12px 30px rgba(15,18,84,.15);animation:icrr-drop .25s cubic-bezier(.2,.7,.2,1)} .search-bar form{display:flex;align-items:center;gap:16px;min-height:var(--hdr-h,104px)} .search-bar .icon{width:26px;height:26px;color:var(--heading);flex:none} .search-bar input{flex:1;min-width:0;border:0;outline:0;font-family:Livvic,"Noto Sans",sans-serif;font-size:clamp(1.25rem,1rem + 1vw,1.75rem);color:var(--heading);background:none;padding:12px 0;border-bottom:2px solid var(--line);transition:border-color .2s} .search-bar input:focus{border-bottom-color:var(--cyan)} .search-bar input::placeholder{color:#a3a8bd} .search-close{background:none;border:0;font-size:40px;line-height:1;color:var(--heading);cursor:pointer;padding:0 4px} .search-close:hover{color:var(--cyan)} @keyframes icrr-fade{from{opacity:0}} @keyframes icrr-drop{from{transform:translateY(-100%)}} @media (max-width:600px){.search-bar .btn-square{display:none}.search-bar form{min-height:76px}} /* Members area (replaces the log-in pop-up) */ .members{background:linear-gradient(180deg,#f2fbfd,#fff 70%);padding:64px 0 var(--space-section)} .members-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:72px;align-items:start} .members-mono{width:64px;height:auto;margin-bottom:24px} .members-intro .eyebrow{display:block;margin-bottom:10px} .members-intro h1{font-size:var(--fs-display);margin-bottom:14px} .members-intro .lead{font-size:var(--fs-lead);line-height:1.55;color:var(--muted);max-width:30rem} .members-perks{list-style:none;margin:28px 0 0;display:grid;gap:12px} .members-perks li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-ui);color:var(--body)} .members-perks .icon{width:22px;height:22px;color:var(--cyan);stroke-width:2.2;flex:none;margin-top:1px} .members-card{padding:36px;box-shadow:0 20px 44px rgba(15,18,84,.10);border-top:4px solid var(--cyan);border-radius:16px} .members-card h2{font-size:var(--fs-h3);margin-bottom:18px} .members-form{display:grid;gap:8px} .members-form label{font-size:14px;font-weight:600;color:var(--heading)} .members-form input[type=text],.members-form input[type=password]{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--field);border-radius:0;margin-bottom:10px;outline:none;transition:border-color .2s,box-shadow .2s} .members-form input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,190,213,.15)} .members-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;margin:2px 0 14px} .members-remember{display:flex!important;gap:8px;align-items:center;font-weight:400!important;color:var(--body)!important} .members-remember input{accent-color:var(--cyan)} .members-form .btn-square{justify-content:center;background:var(--navy);color:#fff;padding:14px 22px} .members-form .btn-square:hover{background:var(--blue);color:#fff} .members-error{background:#fdecec;color:#9b1c1c;padding:10px 14px;font-size:14px;margin-bottom:14px;border-left:3px solid #d64545} .members-join{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);font-size:15px;display:flex;flex-direction:column;gap:6px;align-items:flex-start} .members-links{display:grid} .members-links a{display:block;padding:14px 0;border-top:1px solid var(--line);color:var(--body)} .members-links a:hover b{color:var(--link)} .members-links b{display:block;color:var(--heading)} .members-links small{color:var(--muted);font-size:13px} .members-foot{margin-top:18px} @media (max-width:900px){.members-grid{grid-template-columns:1fr;gap:36px}.members{padding-top:40px}.members-card{padding:26px}} /* Homepage Compendium preview: text beside a framed screenshot */ .compendium-feature{margin-bottom:0} .cf-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:center} .cf-text .eyebrow{display:block;margin-bottom:8px} .cf-text h2{font-size:var(--fs-h2);margin-bottom:14px} .cf-text > p{font-size:var(--fs-body);line-height:1.6;margin-bottom:1.25rem;max-width:var(--measure)} .cf-points{list-style:none;margin:0 0 1.5rem;display:grid;gap:10px} .cf-points li{position:relative;padding-left:22px;font-size:var(--fs-sm);line-height:1.5} .cf-points li::before{content:"";position:absolute;left:4px;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--cyan)} .cf-shot{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 24px 50px rgba(15,18,84,.18);border:1px solid var(--line);transform:perspective(1600px) rotateY(-6deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)} .cf-shot:hover{transform:none} .cf-shot img{display:block;width:100%;height:auto} @media (max-width:900px){.cf-grid{grid-template-columns:1fr;gap:32px}.cf-shot{transform:none}} .bn-photo img{height:auto!important;object-fit:cover} /* Cards: date and author on one line, as in the guides mockup */ .card.post .card-meta{font-size:13px;color:var(--muted)} .card.post .card-meta .wp-block-post-date{font-size:13px} .card.post .card-author::before{content:"·";margin:0 6px} .card.post .more{font-size:15px;color:var(--link);display:inline-flex;gap:.5em;align-items:center;text-decoration:none;background:linear-gradient(var(--cyan),var(--cyan)) 0 100%/100% 0 no-repeat;padding-bottom:4px;align-self:flex-start;transition:background-size .35s cubic-bezier(.2,.7,.2,1)} .card.post .more::after{content:"→";transition:transform .3s} .card.post .more:hover{background-size:100% 3px} .card.post .more:hover::after{transform:translateX(4px)} .card.post .wp-block-post-title{font-size:var(--fs-h3);line-height:1.25} .card.post .wp-block-post-excerpt{font-size:var(--fs-ui);line-height:1.6} .listing .grid > li{align-items:stretch}.listing .grid > li > .card.post{height:auto;align-self:stretch;margin:0} .listing .grid > li{flex-direction:column}.listing .grid > li > .card.post{flex:1 1 auto} .card.post .wp-block-post-featured-image img{height:auto!important;aspect-ratio:16/10!important;object-fit:cover} /* Homepage news: one featured story, three more beside it (no tags) */ .news-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:start} .news-grid ul{list-style:none;margin:0;padding:0} .news-grid li::before{content:none!important} .news-feature .wp-block-post-featured-image{margin:0 0 18px;overflow:hidden} .news-feature .wp-block-post-featured-image img{width:100%;height:auto!important;aspect-ratio:16/9;object-fit:cover;border-radius:0;transition:border-radius .5s cubic-bezier(.2,.7,.2,1)} .news-feature:hover .wp-block-post-featured-image img{border-radius:56px 0 56px 0} .news-feature .wp-block-post-title{font-size:var(--fs-h2);line-height:1.2;margin:6px 0 10px} .news-feature .wp-block-post-title a,.news-item .wp-block-post-title a{color:inherit} .news-feature .wp-block-post-title a:hover,.news-item .wp-block-post-title a:hover{color:var(--link)} .news-feature .wp-block-post-excerpt{font-size:var(--fs-body);line-height:1.6;color:var(--muted);margin-bottom:14px} .news-feature .wp-block-post-excerpt p{margin:0} .news-feature .wp-block-post-excerpt__more-text{display:none} .news-feature .wp-block-read-more{font-size:15px} .news-date{font-size:var(--fs-xs);color:var(--muted)} .news-more .wp-block-post-template{display:grid;gap:0} .news-item{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:center;padding:20px 0;border-top:1px solid var(--line)} .news-more li:first-child .news-item{border-top:0;padding-top:0} .news-item .wp-block-post-featured-image{margin:0} .news-item .wp-block-post-featured-image img{width:100%;height:auto!important;aspect-ratio:1/1;object-fit:cover;border-radius:0;transition:border-radius .5s cubic-bezier(.2,.7,.2,1)} .news-item:hover .wp-block-post-featured-image img{border-radius:24px 0 24px 0} .news-item .wp-block-post-title{font-family:Livvic,"Noto Sans",sans-serif;font-size:var(--fs-h4);line-height:1.3;margin:4px 0 0;color:var(--heading)} @media (max-width:900px){.news-grid{grid-template-columns:1fr;gap:32px}} @media (max-width:480px){.news-item{grid-template-columns:96px minmax(0,1fr)}} /* Hero photo is a responsive (AVIF/WebP, 800–3840px) */ .hero-x .hx-bg picture{display:contents} /* Placeholder for posts without a photo: light monogram on a soft panel */ .icrr-ph a{display:grid;place-items:center;width:100%;aspect-ratio:16/10;background:linear-gradient(135deg,#f2fbfd,#eef0fb)} .news-feature .icrr-ph a{aspect-ratio:16/9} .news-item .icrr-ph a{aspect-ratio:1/1} .icrr-ph img{width:28%!important;height:auto!important;aspect-ratio:auto!important;opacity:.2;border-radius:0!important} .news-item .icrr-ph img{width:44%!important} .cf-shot{transform:none} /* Bigger pull quotes in image features */ .feature .pull{font-size:clamp(1.1875rem,1.1rem + .3vw,1.3125rem)!important;line-height:1.5!important} /* Image lightbox (core "expand on click"): navy backdrop, zoom cursor */ .wp-lightbox-overlay .scrim{background-color:rgba(15,18,84,.92)!important} .wp-lightbox-overlay .close-button{color:#fff!important} .wp-lightbox-container img{cursor:zoom-in} .wp-lightbox-container button.lightbox-trigger{background:rgba(15,18,84,.6);border-radius:8px} /* Section overview (child pages as cards) on section pages such as Reincarnation and Evidence */ .layout.single .prose{max-width:none;width:100%} .layout.single .prose > .wp-block-post-content{max-width:var(--measure);margin:0 auto} .section-overview{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:8px} .so-card{display:flex;flex-direction:column;overflow:hidden} .so-media{display:block} .so-media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:0;transition:border-radius .5s cubic-bezier(.2,.7,.2,1)} .so-card:hover .so-media img{border-radius:40px 0 40px 0} .icrr-ph-panel{display:grid;place-items:center;aspect-ratio:16/10;background:linear-gradient(135deg,#f2fbfd,#eef0fb)} .icrr-ph-panel img{width:26%!important;aspect-ratio:auto!important;opacity:.2} .so-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1} .so-body h2{font-size:var(--fs-h3);margin:0} .so-body h2 a{color:inherit} .so-body h2 a:hover{color:var(--link)} .so-body > p{font-size:var(--fs-sm);line-height:1.55;color:var(--muted);margin:0} .so-links{list-style:none;margin:4px 0 0;padding:0;border-top:1px solid var(--line)} .so-links li{border-bottom:1px solid var(--line);margin:0;padding:0} .so-links li::before{content:none!important} .so-links a{display:flex;justify-content:space-between;padding:9px 0;font-size:15px;color:var(--heading);text-decoration:none!important} .so-links a::after{content:"→";color:var(--cyan);transition:transform .25s} .so-links a:hover::after{transform:translateX(4px)} .so-more{margin-top:auto!important;padding-top:6px} .so-body h2 a{text-decoration:none!important} /* No dividing line under a light banner when nothing follows it (404, empty pages) */ .bn-light.no-rule,.bn-light:has(+ .layout .prose > .wp-block-post-content:empty:only-child){border-bottom:0} /* Banner: news (BBC Future style) - centred title and byline, wide photo, intro box cutting into the photo */ .bn-wide{background:linear-gradient(180deg,#f2fbfd 0,#fff 420px);padding-bottom:8px} .bw-head{text-align:center;padding:40px 0 36px} .bw-head .eyebrow{display:block;margin-bottom:12px} .bw-head h1{font-size:var(--fs-display);line-height:1.12;margin:0 auto 18px;max-width:none} .bw-head .bn-meta{justify-content:center;margin-top:0} .bw-img{margin:0 auto;max-width:72rem;padding:0 24px} .bw-img img{display:block;width:100%;height:auto!important;aspect-ratio:2/1;object-fit:cover;border-radius:0} .bw-intro{position:relative;max-width:46rem;margin:0 auto;background:var(--surface);padding:32px 40px 8px;text-align:left} .bn-wide.has-photo .bw-intro{margin-top:-96px;padding-top:36px;box-shadow:0 -12px 30px rgba(15,18,84,.06)} .bw-intro .lead{font-size:1.25rem;line-height:1.6;color:var(--ink);margin:0;border-left:3px solid var(--cyan);padding-left:20px} @media (max-width:900px){.bw-img{padding:0}.bn-wide.has-photo .bw-intro{margin-top:-40px;padding:24px 20px 4px}.bw-head{padding:28px 0 24px}} /* Leaf curl: on cards the whole card curls (opposite corners round on hover), not just its image */ .card.post,.so-card,.path,.mini,.side-list,.next .card{transition:border-radius .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s,transform .3s,border-color .3s} .card.post:hover,.so-card:hover,.path:hover{border-radius:40px 0 40px 0} .card.post:hover .wp-block-post-featured-image img,.so-card:hover .so-media img{border-radius:0!important} .card.post .wp-block-post-featured-image img,.so-card .so-media img{transition:none} /* Leaf curl on news images: homepage news, the news article photo */ .news-feature .wp-block-post-featured-image,.news-item .wp-block-post-featured-image{overflow:hidden} .bw-img img{transition:border-radius .6s cubic-bezier(.2,.7,.2,1)} .bw-img:hover img{border-radius:56px 0 56px 0} /* Case studies (Key cases): profile beside the photo, captioned picture strip */ .case-profile{grid-template-columns:200px 1fr} .case-facts{margin:6px 0 0} .case-facts table{width:100%;border-collapse:collapse;font-size:15px} .case-facts td{padding:8px 0;border-bottom:1px solid var(--line);vertical-align:top;border-left:0;border-right:0;border-top:0} .case-facts tr:last-child td{border-bottom:0} .case-facts td:first-child{width:42%;padding-right:16px;color:var(--muted);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em} .case-facts td:last-child{color:var(--heading)} .prose .case-gallery{--wp--style--unstable-gallery-gap:14px;margin:16px 0 32px} .prose .case-gallery.has-nested-images figure.wp-block-image{flex-direction:column;align-items:stretch;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)} .prose .case-gallery.has-nested-images figure.wp-block-image img{aspect-ratio:4/3;object-fit:cover;height:auto!important;flex:none} .prose .case-gallery.has-nested-images figure.wp-block-image figcaption{position:static;background:none;color:var(--body);text-shadow:none;text-align:left;font-size:13px;line-height:1.5;padding:10px 12px 12px;max-height:none;overflow:visible;margin:0} .prose .case-gallery figcaption strong{display:block;color:var(--heading);font-size:14px;margin-bottom:2px} @media (max-width:700px){.case-profile{grid-template-columns:1fr}.prose .case-gallery.has-nested-images figure.wp-block-image{width:100%!important}} /* Steps: numbered list where each step has a bold title and a description */ .prose ol.steps{list-style:none;counter-reset:st;margin:16px 0 28px;padding:0} .prose ol.steps li{counter-increment:st;position:relative;padding:0 0 18px 48px;margin:0} .prose ol.steps li::before{content:counter(st);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--cyan-50);color:var(--heading);display:grid;place-items:center;font:600 14px/1 Livvic,sans-serif} .prose ol.steps li strong{display:block;color:var(--heading);margin-bottom:2px} /* Article components keep their own spacing inside post content (the generic reset above zeroes it) */ .wp-block-post-content > :is(.feature,.figure,.callout,.case-gallery){margin-block:28px} .wp-block-post-content > :is(.stats,.cards){margin-block:24px 28px} /* Four figures sit two by two rather than three plus one */ .stats:has(> .stat:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)} /* Case pages: the case photo shown whole (not cropped), above the text; click to enlarge */ .wp-block-post-content > .case-photo{margin:0 0 28px;padding:16px;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);text-align:center} .case-photo img{width:auto!important;max-width:100%;max-height:460px;height:auto!important;margin:0 auto;border-radius:8px;display:block} .case-photo figcaption{font-size:13px;color:var(--muted);margin:10px 0 0;text-align:center} .page-pills{margin:0 0 24px} .overview .case-facts{margin-top:8px} .compendium-cta{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center} .compendium-cta > .icrr-icon-block{grid-row:span 2;margin:0!important} .compendium-cta .eyebrow{margin:0!important} .compendium-cta p{font-size:var(--fs-ui,1rem)} .prose ul.sources li{font-size:14px;color:var(--muted);margin-bottom:.35rem} .prose ul.sources li::before{background:var(--line)} .prose .filters a,.prose .filters a:hover{text-decoration:none;background-image:none} /* Key cases hub: two case cards per row, portraits framed from the top */ .page-pills ~ .section-overview{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px} .page-pills ~ .section-overview .so-media img{aspect-ratio:4/3;object-position:center 20%} /* Photos in articles never run taller than 520px; tall portraits sit centred on a soft panel instead of filling the column */ .wp-block-post-content > .wp-block-image:not(.wide-crop) img{width:auto!important;max-width:100%;max-height:520px;height:auto!important;margin:0 auto;display:block;object-fit:contain} .wp-block-post-content > .wp-block-image.figure:not(.wide-crop){background:var(--soft)} /* Quote cards: the quote sits centred against the photo */ .feature:not(.case-profile){align-items:center} .feature:not(.case-profile) > .wp-block-group{text-align:center;padding:0 8px} /* Section overview pages (Reincarnation, Evidence): a wide grid, three across, or two when there are only two sections */ .layout.single .section-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px} .layout.single .section-overview:has(> .so-card:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))} .layout.single .wp-block-post-content > .section-overview{width:min(80rem,calc(100vw - 4rem));position:relative;left:50%;transform:translateX(-50%)} @media (max-width:900px){.layout.single .section-overview,.layout.single .section-overview:has(> .so-card:nth-child(3)){grid-template-columns:minmax(0,1fr)}.layout.single .wp-block-post-content > .section-overview{width:100%;left:0;transform:none}} /* Tucker's hypothesis (blocks/tucker-hypothesis, animated by assets/js/tucker.js): four steps zig-zag down the article column, drawing and text alternating sides, joined by diagonal dotted links */ .wp-block-post-content > .tucker{margin:48px 0 40px} .tucker > .eyebrow{margin:0 0 6px} .tucker > h2{margin:0 0 8px} .tk-defs,.wc-defs{position:absolute;width:0;height:0;overflow:hidden} .tk-flow{position:relative} .tk-links{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:0} .tk-links .tk-reveal{fill:none;stroke:#fff;stroke-width:34;stroke-linecap:round} .tk-dots{fill:none;stroke:var(--blue);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:0 8} .tk-link{stroke:#5B4BC4;stroke-width:3} .tk-stream{stroke:var(--blue);stroke-width:3.4} .tk-word{font:600 14px/1 Livvic,sans-serif;letter-spacing:.24em;fill:var(--blue)} /* Without JavaScript the masks would hide the links, so the reveal strokes start fully drawn */ .tucker:not(.is-animated) .tk-reveal{stroke-dasharray:none} .tk-steps{list-style:none!important;margin:24px 0 0!important;padding:0!important;position:relative;z-index:1} .tk-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:center;margin:0 0 72px!important;padding:0!important} .tk-step::before{content:none!important} .tk-step:last-child{margin-bottom:0!important} .tk-step.is-flip .tk-art-wrap{order:2} .tk-art{display:block;width:100%;height:auto;overflow:visible} .tk-arrow{fill:none;stroke:#5B4BC4;stroke-width:3;stroke-linecap:round} .tk-orbit{fill:none;stroke:#5B4BC4;stroke-width:3} .tk-num{display:block;font:600 2.5rem/1 Livvic,sans-serif;color:var(--cyan)} .tk-text h3{margin:6px 0 6px} .tk-text p{font-size:var(--fs-sm);line-height:1.6;color:var(--muted);margin:0} .tucker-credit{font-size:13px;color:var(--muted);margin:32px 0 0!important} @media (max-width:640px){ .tk-step,.tk-step.is-flip{grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:56px!important} .tk-links{display:none} .tk-step .tk-art-wrap{width:78%} .tk-step.is-flip .tk-art-wrap{order:0;margin-left:auto} } /* Reincarnation by the numbers (blocks/by-the-numbers, animated by assets/js/numbers.js) */ .wp-block-post-content > .numbers{margin:24px 0 40px} .nb-intro{font-size:var(--fs-lead);line-height:1.55;color:var(--heading);margin:0 0 8px!important} .nb-people{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr) minmax(0,1fr);gap:12px;align-items:end;padding-top:56px;margin:8px 0 0} .nb-links{position:absolute;inset:0;pointer-events:none;overflow:visible} .nb-reveal{fill:none;stroke:#fff;stroke-width:30;stroke-linecap:round} .numbers:not(.is-animated) .nb-reveal{stroke-dasharray:none} .nb-arc{stroke:var(--blue)} .nb-art{display:block;width:100%;height:auto;overflow:visible} .nb-person{margin:0!important;text-align:center;position:relative;z-index:1} .nb-person figcaption{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:6px} .nb-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .nb-big{font:600 2.5rem/1.05 Livvic,sans-serif;color:var(--heading)} .is-previous .nb-big{color:#5E7FA0} .nb-text{font-size:14px;line-height:1.45;color:var(--muted);max-width:14rem} .nb-gap{align-self:center;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding-bottom:90px;position:relative;z-index:1} .nb-gap .nb-big{font-size:1.75rem;color:var(--purple);white-space:nowrap} .nb-cards{list-style:none!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:32px 0 0!important;padding:0!important} .nb-card{display:flex;align-items:center;gap:18px;padding:18px 20px;margin:0!important;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} .nb-card::before{content:none!important} .nb-card.is-wide{grid-column:1/-1;flex-direction:column;align-items:flex-start;gap:12px} .nb-card.is-wide .nb-copy{display:flex;align-items:baseline;gap:14px} .nb-pictogram{display:block;width:100%;max-width:440px;height:auto;overflow:visible} .nb-fig{fill:#D9DDE8} .nb-fig.is-boy{fill:var(--cyan)} .nb-fig.is-girl{fill:var(--purple)} .nb-dial{position:relative;width:96px;height:96px;flex:none} .nb-ring{width:96px;height:96px;transform:rotate(-90deg)} .nb-track{fill:none;stroke:#EEF0F7;stroke-width:10} .nb-fill{fill:none;stroke:var(--cyan);stroke-width:10;stroke-linecap:round} .nb-ring.is-purple .nb-fill{stroke:var(--purple)} .nb-dial .nb-num{position:absolute;inset:0;display:grid;place-items:center;font:600 1.375rem/1 Livvic,sans-serif;color:var(--heading)} .nb-copy p{margin:0!important;font-size:var(--fs-sm);line-height:1.55;color:var(--muted)} .nb-copy .eyebrow{display:block;margin:0 0 4px} .numbers .tucker-credit{margin-top:20px!important} @media (max-width:640px){ .nb-people{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-top:48px} .nb-gap{grid-column:1/-1;order:3;padding:12px 0 0} .nb-cards{grid-template-columns:minmax(0,1fr)} .nb-big{font-size:2rem} } /* Numbered lists in articles: each number in a light blue circle, dark number (same as the steps lists) */ .prose .wp-block-post-content ol:not(.signs):not(.tk-steps){list-style:none;counter-reset:ol;margin:16px 0 24px;padding:0} .prose .wp-block-post-content ol:not(.signs):not(.tk-steps) > li{counter-increment:ol;position:relative;padding:3px 0 0 46px;margin:0 0 14px;min-height:30px} .prose .wp-block-post-content ol:not(.signs):not(.tk-steps) > li::before{content:counter(ol);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--cyan-50);color:var(--heading);display:grid;place-items:center;font:600 14px/1 Livvic,sans-serif} /* Set-apart boxes inside an article: light blue ("What he investigated") or grey ("Ruling out"), with white cards */ .wp-block-post-content > .box{margin-block:32px;padding:26px 28px 22px;border-radius:var(--radius)} .box.blue{background:var(--cyan-50)} .box.grey{background:var(--soft)} .box > h3{margin-top:0} .box .cards{margin:16px 0 18px} .box .mini{background:var(--surface);border:0;border-radius:12px;padding:16px 18px} .box > p:last-child,.box > .cards:last-child{margin-bottom:0} /* Research process (assets/js/process.js). Without the script, and on phones, a vertical timeline. */ .wp-block-post-content > .process{margin-block:24px 32px} .process-step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;margin-bottom:28px} .process-step > *:not(.icrr-icon-block):not(h3){grid-column:1/-1} .process-step > h3{margin:0} .stages{margin-top:14px} .stage{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;position:relative;padding-bottom:20px} .stage > .icrr-icon-block{grid-row:span 2;width:44px;height:44px;border-radius:50%;background:var(--surface);border:2px solid var(--line);display:grid;place-items:center;margin:0!important;position:relative;z-index:1} .stage > .icrr-icon-block .icrr-icon{width:26px;height:26px} .stage::before{content:"";position:absolute;left:21px;top:46px;bottom:2px;border-left:2px dotted var(--cyan)} .stage:last-child::before{content:none} .stage h4{margin:8px 0 4px;font-size:var(--fs-h4,1.1875rem)} .stage p{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--muted)} .process-pills,.process-track,.process-nav{display:none} /* Enhanced: pills, a track of stage icons, one stage at a time */ .process.is-enhanced .process-pills{display:flex;gap:14px;margin:8px 0 26px} .pp-tab{flex:1;display:flex;align-items:center;gap:14px;padding:14px 18px 14px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .25s,box-shadow .25s} .pp-tab .icrr-icon{width:40px;height:40px;flex:none} .pp-tab b{display:block;font:600 1.0625rem/1.25 Livvic,sans-serif;color:var(--heading)} .pp-tab small{display:block;font-size:13px;color:var(--muted);margin-top:2px} .pp-tab:hover{border-color:var(--cyan)} .pp-tab[aria-selected="true"]{border-color:var(--navy);box-shadow:0 0 0 3px var(--cyan-50)} .process.is-enhanced .process-step{display:block} .process.is-enhanced .process-step:not(.is-active){display:none} .process.is-enhanced .process-step > h3,.process.is-enhanced .process-step > .icrr-icon-block{display:none} .process.is-enhanced .process-track{display:flex;justify-content:space-between;position:relative;margin:18px 0 20px} .pt-line{position:absolute;left:28px;right:28px;top:50%;height:0;border-top:2px dotted var(--cyan);transform-origin:0 50%} .pt-fill{position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:0 50%} .pt-node{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;background:var(--surface);border:2px solid var(--line);display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .3s,box-shadow .3s} .pt-node .icrr-icon{width:30px;height:30px} .pt-node .pt-num{position:absolute;right:-4px;top:-4px;width:20px;height:20px;border-radius:50%;background:var(--cyan-50);color:var(--heading);font:600 11px/20px Livvic,sans-serif;text-align:center} .pt-node:hover{border-color:var(--cyan)} .pt-node.is-done{border-color:var(--cyan)} .pt-node.is-active{border-color:var(--blue);box-shadow:0 0 0 6px var(--cyan-50)} .pt-node.is-active .pt-num{background:var(--blue);color:#fff} .process.is-enhanced .stages{margin:0} .process.is-enhanced .stage{display:none;padding:22px 24px;background:var(--soft);border-radius:var(--radius)} .process.is-enhanced .stage.is-active{display:block} .process.is-enhanced .stage::before,.process.is-enhanced .stage > .icrr-icon-block{display:none} .process.is-enhanced .stage h4{margin-top:0} .process.is-enhanced .stage p{font-size:var(--fs-body);color:var(--body)} .process.is-enhanced .process-nav{display:flex;align-items:center;justify-content:space-between;margin-top:14px} .process-nav button{font:600 15px/1 inherit;font-family:inherit;color:var(--heading);background:none;border:0;padding:8px 2px;cursor:pointer} .process-nav .pn-back::before{content:"← "} .process-nav .pn-next::after{content:" →"} .process-nav button:disabled{color:var(--line);cursor:default} .pn-count{font-size:13px;color:var(--muted)} /* Research process: full-screen view */ .process-full{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;padding:4px 0;font:600 14px/1.2 inherit;font-family:inherit;color:var(--link);background:none;border:0;cursor:pointer} .process-full span{font-size:17px} .process-full:hover{color:var(--heading)} .process-overlay{position:fixed;inset:0;z-index:1000;background:rgba(15,18,84,.92);display:grid;place-items:center;padding:4vh 4vw} .po-panel{position:relative;width:min(1100px,100%);max-height:92vh;overflow:auto;background:var(--surface);border-radius:20px;padding:44px 48px 36px} .po-close{position:absolute;right:14px;top:10px;width:40px;height:40px;border:0;background:none;font-size:30px;line-height:1;color:var(--heading);cursor:pointer} .process.is-full{margin:0} .process.is-full .pt-node{width:72px;height:72px} .process.is-full .pt-node .icrr-icon{width:38px;height:38px} .process.is-full .pt-line{left:36px;right:36px} .process.is-full .stage p{font-size:1.125rem;line-height:1.7} .process.is-full .stage h4{font-size:1.5rem} @media (max-width:760px){.po-panel{padding:40px 18px 24px}.process.is-full .pt-node{width:46px;height:46px}.process.is-full .pt-node .icrr-icon{width:26px;height:26px}.process.is-full .pt-num{display:none}} /* Landing pages (template page-landing: About, Meet the Team, Join Us) — full-width bands as in the About mockup */ .landing > .band.tight{padding-block:40px} .landing > .band.flush-top{padding-top:0} .landing .split.history{align-items:start} .landing .split.history .timeline{position:sticky;top:24px} .landing .split > figure{margin:0} .landing .split > figure img{border-radius:var(--radius);width:100%;aspect-ratio:4/3;object-fit:cover} .cards.three-col{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 36px;margin:0} .bylaws{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:24px 28px;border:1px solid var(--line);border-radius:var(--radius)} .bylaws h3{margin:0 0 4px} .bylaws p{margin:0} .cta-band > p{margin:0} /* Team grid */ .team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 28px} .person > figure,.person-photo{margin:0 0 14px} .person-photo{position:relative} .person-photo > figure{margin:0} .person > figure img,.person-photo img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 25%;border-radius:18px;background:var(--soft);transition:border-radius .5s cubic-bezier(.2,.7,.2,1)} .person:hover > figure img,.person:hover .person-photo img{border-radius:40px 0 40px 0} /* The bio opens below the person's details ("Read bio"), sliding down; the card next to it is unaffected. */ .person .person-more{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0;padding:0;border:0;background:none;color:var(--heading);font:inherit;font-size:14px;font-weight:600;cursor:pointer} .person .person-more::after{content:"";width:7px;height:7px;margin:-3px 0 0 2px;border:solid var(--navy);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .3s ease,margin .3s ease} .person.is-open .person-more::after{transform:rotate(-135deg);margin-top:4px} .person .person-more:hover{color:var(--link)} .person-bio-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)} .person.is-open .person-bio-wrap{grid-template-rows:1fr} .person-bio-wrap > div{overflow:hidden} .person .person-bio{margin:12px 0 0;padding:14px 16px;font-size:14px;line-height:1.6;color:var(--body);background:var(--soft);border-left:3px solid var(--cyan)} @media (prefers-reduced-motion:reduce){.person-bio-wrap{transition:none}} .team{align-items:start} .person .eyebrow{margin:0 0 4px} .person h3{font-size:var(--fs-h4,1.1875rem);margin:0 0 4px} .person .person-detail{font-size:var(--fs-sm);color:var(--muted);margin:0 0 6px} .person .person-links{font-size:13px;margin:0;display:flex;flex-wrap:wrap;gap:4px 14px} .person .person-links a{color:var(--link);font-weight:600} /* Join Us: the president's letter, quotes and plans */ .split.letter{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:start} .split.letter > figure img{aspect-ratio:1;object-position:center 20%} .split.letter figcaption{font-size:13px;color:var(--muted);margin-top:10px} .quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .quote{padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);display:flex;flex-direction:column;justify-content:space-between;gap:20px} .quote .quote-text{font-family:"Noto Serif",serif;font-style:italic;font-size:1.125rem;line-height:1.6;color:var(--heading);margin:0} .quote-person{display:flex;align-items:center;gap:14px} .quote-person > figure{margin:0;flex:none} .quote-person img{width:56px;height:56px;border-radius:50%;object-fit:cover} .quote-person .quote-who{margin:0;font-size:14px;color:var(--muted)} .quote-person .quote-who strong{color:var(--heading)} .plans{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:24px;margin-top:20px} .plan{padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-align:center} .plan .eyebrow{margin:0 0 6px} .plan .plan-price{font:600 3rem/1 Livvic,sans-serif;color:var(--heading);margin:0} .plan .plan-per{color:var(--muted);margin:4px 0 18px} .plan .plan-cta{margin:0} @media (max-width:900px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}.cards.three-col,.quotes,.split.letter{grid-template-columns:minmax(0,1fr)}.plans{grid-template-columns:minmax(0,1fr)}.landing .split.history .timeline{position:static}} /* About: the history timeline follows the text (assets/js/icrr.js) */ .timeline.is-following li{opacity:.4;transition:opacity .4s} .timeline.is-following li::before{transition:background .4s,border-color .4s,transform .4s} .timeline.is-following li.is-past{opacity:.75} .timeline.is-following li.is-past::before{background:var(--cyan-50)} .timeline.is-following li.is-on{opacity:1} .timeline.is-following li.is-on::before{background:var(--cyan);border-color:var(--cyan);transform:scale(1.25)} .timeline.is-following li.is-on b{color:var(--link)} .history .tl-step{transition:color .4s} /* Join Us: bigger quotes */ .quote{padding:36px 36px 30px} .quote .quote-text{font-size:clamp(1.1875rem,1.1rem + .4vw,1.375rem);line-height:1.6} .quote-person img{width:72px;height:72px} .quote-person .quote-who{font-size:15px} /* Join Us: membership ticket, with a Monthly / Yearly switch */ .pricing{max-width:560px;margin:24px auto 0} .pricing:not(.is-switching){display:grid;gap:24px} .pricing.is-switching .ticket:not(.is-shown){display:none} .pricing-switch{display:flex;width:max-content;margin:0 auto 22px;padding:5px;border-radius:9999px;background:#fff;border:1px solid var(--line)} .pricing-switch button{font:600 15px/1 inherit;font-family:inherit;padding:11px 26px;border:0;border-radius:9999px;background:none;color:var(--body);cursor:pointer;transition:background .25s,color .25s} .pricing-switch button[aria-selected="true"]{background:var(--navy);color:#fff} .ticket{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 18px 40px -18px rgba(15,18,84,.35);filter:drop-shadow(0 1px 0 var(--line))} .ticket-top{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;text-align:center;padding:34px 28px 30px} .ticket-top .eyebrow{color:var(--cyan);margin:0 0 8px} .ticket-top .plan-price{color:#fff;font:600 3.5rem/1 Livvic,sans-serif;margin:0} .ticket-top .plan-per{color:#c9cbf0;margin:6px 0 10px} .ticket-top .ticket-note{display:inline-block;margin:0;font-size:13px;padding:5px 12px;border-radius:9999px;background:rgba(255,255,255,.12);color:#fff} /* The perforation: two notches and a dashed line between the price and what's included */ .ticket-bottom{position:relative;background:var(--surface);padding:30px 34px 32px;border-top:2px dashed var(--line)} .ticket-bottom::before,.ticket-bottom::after{content:"";position:absolute;top:-15px;width:28px;height:28px;border-radius:50%;background:var(--soft)} .ticket-bottom::before{left:-14px} .ticket-bottom::after{right:-14px} .ticket-label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px} .ticket-list{list-style:none;margin:0 0 24px;padding:0} .ticket-list li{position:relative;padding:0 0 0 30px;margin:0 0 11px;color:var(--body)} .ticket-list li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--cyan-50)} .ticket-list li::after{content:"";position:absolute;left:6px;top:7px;width:5px;height:9px;border:solid var(--blue);border-width:0 2px 2px 0;transform:rotate(45deg)} .ticket .plan-cta{margin:0;text-align:center} /* Header: "Become a member" beside "Make a gift" (logged-out visitors only), with its own purple circle */ .hdr-tools .pill.member::before{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--cyan));flex:none} .hdr-tools{gap:22px} @media (max-width:1100px){.hdr-tools .pill.member{display:none}} /* About history: chapters that the timeline follows. While following, the chapter being read is dark and the others grey out; the timeline gives a fuller overview of each point. */ .history .tl-step{margin:0 0 26px} .history .tl-step .eyebrow{margin:0 0 6px} .history .tl-step p:last-child{margin:0} .history .history-intro{font-size:var(--fs-lead);line-height:1.6;color:var(--heading);margin-bottom:32px} .is-following > .tl-step p{color:#a3a8b8;transition:color .45s} .is-following > .tl-step p a{color:inherit} .is-following > .tl-step .eyebrow{opacity:.45;transition:opacity .45s} .is-following > .tl-step.is-reading p{color:var(--body)} .is-following > .tl-step.is-reading p a{color:var(--link)} .is-following > .tl-step.is-reading .eyebrow{opacity:1} .landing .history .timeline li{padding-bottom:26px} .landing .history .timeline b{font-size:1.375rem} .landing .history .timeline strong{display:block;font-size:16px;color:var(--heading);margin:2px 0 3px} .landing .history .timeline span{font-size:15px;line-height:1.5} /* Arrow-in-a-circle link on a light background (e.g. the membership ticket) */ .arrow-circle.on-light{color:var(--heading)} .arrow-circle.on-light:hover{color:var(--link)} .arrow-circle.on-light:hover::after{background:var(--navy);color:#fff} .ticket .plan-cta .arrow-circle{display:inline-flex;font-size:16px} /* Footer newsletter: the Mailchimp plugin's reply after signing up */ .nl2-response .mc4wp-alert{margin-top:12px;font-size:14px;color:#e3e4fa} .nl2-response .mc4wp-success{color:var(--cyan);font-weight:600} .nl2-response .mc4wp-error{color:#ffb4b4} .nl2-response p{margin:0} /* Join Us: the ticket's button, a square aqua block with blue text and a dark blue arrow (built on .btn-square). */ .ticket .plan-cta .ticket-btn{display:flex;justify-content:center;width:100%;padding:15px 22px;font-size:16px;color:#0F1254;text-decoration:none} .ticket .plan-cta .ticket-btn::after{color:#0F1254;font-weight:700} .ticket .plan-cta .ticket-btn:hover{background:var(--navy);color:#fff} .ticket .plan-cta .ticket-btn:hover::after{color:var(--cyan)} /* Forminator forms (Volunteer, Contact, Therapeutic Directory): the site's own look in place of Forminator's. The selectors carry [data-design] so they win over Forminator's default design stylesheet. */ .entry-content .forminator-ui.forminator-custom-form[data-design]{max-width:720px;margin:8px auto 0;padding:40px 44px 44px;background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 40px -24px rgba(15,18,84,.3);font-family:inherit} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-row{margin-bottom:22px} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-row-last{margin:30px 0 0} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-row-last .forminator-col{padding:0;margin:0} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-label{display:block;margin:0 0 8px;font-family:inherit;font-size:15px;font-weight:600;line-height:1.4;color:var(--heading)} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-required{color:var(--teal)} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-input, .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-textarea{width:100%;padding:13px 16px;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);background:var(--surface);border:1px solid var(--field);border-radius:0;box-shadow:none;transition:border-color .2s,background .2s,box-shadow .2s} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-textarea{min-height:var(--forminator-textarea-min-height,140px);resize:vertical} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-input:hover, .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-textarea:hover{border-color:#cdd2e1} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-input:focus, .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-textarea:focus{outline:0;background:var(--surface);border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,190,213,.15)} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-has_error .forminator-input, .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-has_error .forminator-textarea{border-color:#d14343} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-error-message{display:block;margin:6px 0 0;padding:0;background:none;color:#b42318;font-size:13px} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-error-message::before{display:none} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-description{margin-top:6px;font-size:13px;color:var(--muted)} /* The file upload: a dashed drop area with the file button inside it. */ .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-file-upload{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:16px;border:1px dashed #c6cbe0;border-radius:0;background:var(--soft)} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-file-upload input[type=file]{font:inherit;font-size:14px;color:var(--muted);max-width:100%} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-file-upload input[type=file]::file-selector-button{margin-right:12px;padding:9px 16px;font:inherit;font-size:14px;font-weight:600;color:var(--heading);background:var(--surface);border:1px solid var(--navy);border-radius:0;cursor:pointer;transition:background .2s,color .2s} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-file-upload input[type=file]::file-selector-button:hover{background:var(--blue);color:#fff} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-button-upload{padding:9px 16px;font:inherit;font-size:14px;font-weight:600;color:var(--heading);background:var(--surface);border:1px solid var(--navy);border-radius:0} /* Submit: the same square aqua button as the membership tickets. */ .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit{display:inline-flex;align-items:center;gap:.6em;min-width:0;margin:0;padding:15px 28px;font:inherit;font-size:16px;font-weight:600;line-height:1.2;color:#0F1254;background:var(--aqua-btn);border:0;border-radius:0;box-shadow:none;cursor:pointer;transition:background .2s,color .2s} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit::after{content:"→";color:#0F1254;font-weight:700;transition:transform .25s,color .2s} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:hover{background:var(--navy);color:#fff} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:hover::after{color:var(--cyan);transform:translateX(4px)} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit:focus-visible{outline:3px solid var(--navy);outline-offset:3px} /* Messages after sending: thank you, or what needs fixing. */ .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-response-message{margin:0 0 24px;padding:14px 18px;border-radius:12px;border:0;font-size:15px} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-response-message.forminator-success{background:var(--cyan-50);color:#0b5f6b} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-response-message.forminator-error{background:#fdecec;color:#8a1c1c} .entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-response-message p{margin:0;color:inherit} @media (max-width:600px){.entry-content .forminator-ui.forminator-custom-form[data-design]{padding:26px 20px 28px;border-radius:18px}.entry-content .forminator-ui.forminator-custom-form[data-design] .forminator-button-submit{width:100%;justify-content:center}} /* Form pages (templates/page-form.html: Volunteer, Contact, Donate): laid out like the log-in page, with the intro and its points on the left and the form in a card with the aqua line on top, on the right. */ .form-page .crumbs{margin-bottom:28px} .form-page .form-content{margin:0} .form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px} .form-grid .members-intro{position:sticky;top:120px} .form-grid .members-intro::before{content:"";display:block;width:64px;height:57px;margin-bottom:24px;background:url(../images/logo-mark.svg) no-repeat 0 0/contain} .form-grid .members-intro .eyebrow{margin:0 0 10px} .form-grid .members-intro h1{margin:0 0 14px} .form-grid .members-intro .lead{margin:0} .form-perks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px} .form-perks li{position:relative;padding-left:34px;margin:0;font-size:var(--fs-ui);color:var(--body)} .form-perks li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;background:no-repeat center/22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300BED5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")} .form-card{padding:36px 40px 40px} .form-card > h2{font-size:var(--fs-h3);margin:0 0 20px} .form-card > p{margin:0 0 16px} /* The form already sits in the card, so it drops its own card. */ .entry-content .form-card .forminator-ui.forminator-custom-form[data-design]{max-width:none;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none} .form-card .donate-cta{margin:24px 0 10px} .form-card .donate-btn{display:flex;justify-content:center;width:100%;padding:15px 22px;font-size:16px;color:#0F1254;text-decoration:none} .form-card .donate-btn::after{color:#0F1254;font-weight:700} .form-card .donate-btn:hover{background:var(--navy);color:#fff} .form-card .donate-btn:hover::after{color:var(--cyan)} .form-card .form-note{font-size:13px;color:var(--muted);text-align:center} .form-card-foot{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)} .form-card-foot h3{font-size:var(--fs-h4,1.1875rem);margin:0 0 6px} .form-card-foot p{margin:0;font-size:15px;color:var(--muted)} @media (max-width:900px){.form-grid{grid-template-columns:minmax(0,1fr);gap:36px}.form-grid .members-intro{position:static}.form-card{padding:26px 22px 28px}} /* A button under the banner intro (page meta "icrr_banner_button"), e.g. Join Us down to the prices. */ .bn .bn-cta{margin:0} .bn-plain .bn-grid.has-cta{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px} @media (max-width:900px){.bn-plain .bn-grid.has-cta{grid-template-columns:minmax(0,1fr);gap:24px}} .bn .bn-cta .btn-square{padding:14px 24px;font-size:16px;color:#0F1254;text-decoration:none} .bn .bn-cta .btn-square::after{color:#0F1254;font-weight:700} .bn .bn-cta .btn-square:hover{background:var(--navy);color:#fff} .bn .bn-cta .btn-square:hover::after{color:var(--cyan);transform:translateX(4px)} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} #membership-pricing{scroll-margin-top:110px} /* Donation form (blocks/donate-form), in the card on the Donate page. */ .donate-form .donate-title{font-size:var(--fs-h3);margin:0 0 20px} .donate-form fieldset{border:0;margin:0;padding:0;min-width:0} .donate-freq{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--field);margin-bottom:22px!important} .donate-freq label{position:relative;cursor:pointer} .donate-freq input,.donate-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer} .donate-freq span{display:block;padding:12px;text-align:center;font-weight:600;font-size:15px;color:var(--heading);transition:background .2s,color .2s} .donate-freq input:checked + span{background:var(--navy);color:#fff} .donate-freq input:focus-visible + span,.donate-chip input:focus-visible + span{outline:3px solid var(--cyan);outline-offset:2px} .donate-label{display:block;margin:0 0 10px;padding:0;font-size:14px;font-weight:600;color:var(--heading)} .donate-chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} .donate-chip{position:relative} .donate-chip span{display:block;padding:13px 6px;text-align:center;font-weight:600;font-size:16px;color:var(--heading);background:var(--surface);border:1px solid var(--field);transition:border-color .2s,background .2s,color .2s} .donate-chip:hover span{border-color:var(--cyan)} .donate-chip input:checked + span{background:var(--aqua-btn);border-color:var(--aqua-btn);color:#0F1254} .donate-other span{font-size:14px} .donate-own{margin-top:14px} .donate-own label{display:block;margin:0 0 6px;font-size:14px;font-weight:600;color:var(--heading)} .donate-own-field{display:flex;align-items:center;border:1px solid var(--field);background:var(--surface);transition:border-color .2s,box-shadow .2s} .donate-own-field:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,190,213,.15)} .donate-own-field span{padding:0 4px 0 14px;font-weight:600;color:var(--muted)} .donate-own-field input{flex:1;min-width:0;padding:12px 14px 12px 0;font:inherit;font-size:16px;border:0;outline:0;background:none} .donate-summary{margin:18px 0 14px;font-size:15px;font-weight:600;color:var(--heading)} .donate-paypal.is-placeholder{position:relative;display:grid;place-items:center;min-height:112px;padding:22px;text-align:center;border:1.5px dashed #c6cbe0;background:var(--soft)} .donate-paypal.is-placeholder p{margin:0;max-width:20rem;font-size:14px;color:var(--muted)} .donate-paypal-tag{position:absolute;top:-10px;left:14px;padding:2px 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7a5b00;background:#fff3c4} .donate-form .donate-cta{margin:16px 0 8px} .donate-form .donate-btn{display:flex;justify-content:center;width:100%;padding:15px 22px;font-size:16px;color:#0F1254;text-decoration:none} .donate-form .donate-btn::after{color:#0F1254;font-weight:700} .donate-form .donate-btn:hover{background:var(--navy);color:#fff} .donate-form .donate-btn:hover::after{color:var(--cyan)} .donate-form .form-note{margin:0;font-size:13px;color:var(--muted);text-align:center} @media (max-width:480px){.donate-chips{grid-template-columns:repeat(3,minmax(0,1fr))}} /* ---- Members and community pages (templates/page-app.html): wide content under a light banner. ---- */ .wrap.app{padding-top:48px;padding-bottom:var(--space-section)} .app-content > *{max-width:none} /* Paid Memberships Pro: cards, fields and buttons in the site's style (colours are set in inc/members.php). */ .pmpro{font-family:inherit;color:var(--body)} .pmpro .pmpro_card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px -26px rgba(15,18,84,.3);margin:0 0 24px;overflow:hidden} .pmpro .pmpro_card_title{font-family:Livvic,sans-serif;font-size:var(--fs-h4,1.1875rem);font-weight:600;color:var(--heading);margin:0;padding:22px 26px 0} .pmpro .pmpro_card_content{padding:16px 26px 24px} .pmpro .pmpro_card_content p{margin:0 0 10px} .pmpro .pmpro_card_actions{padding:14px 26px;background:var(--soft);border-top:1px solid var(--line);font-size:14px;color:var(--muted)} .pmpro .pmpro_card_actions a,.pmpro a{color:var(--link);font-weight:600} .pmpro .pmpro_form_fieldset{border:0;margin:0;padding:0;min-width:0} .pmpro .pmpro_form_fields{display:grid;gap:16px} .pmpro .pmpro_cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .pmpro .pmpro_cols-2 > .pmpro_form_field{width:auto;margin:0} .pmpro .pmpro_form_field .pmpro_form_input{width:100%;max-width:none} .pmpro .pmpro_form_field-password{position:relative} .pmpro .pmpro_form_field-password-toggle{position:absolute;top:0;right:0} .pmpro .pmpro_form_field-password-toggle .pmpro_btn-password-toggle{display:inline-flex;align-items:center;gap:4px;padding:0;font-size:12px} .pmpro .pmpro_form_field-password-toggle svg{width:16px;height:16px} .pmpro .pmpro_form_label{display:block;margin:0 0 6px;font-size:14px;font-weight:600;color:var(--heading)} .pmpro .pmpro_form_input,.pmpro select.pmpro_form_input{width:100%;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--field);border-radius:0;box-shadow:none;outline:0;transition:border-color .2s,box-shadow .2s} .pmpro .pmpro_form_input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,190,213,.15)} .pmpro .pmpro_form_input-required + .pmpro_asterisk,.pmpro .pmpro_asterisk abbr{color:var(--teal);text-decoration:none} .pmpro .pmpro_btn{border-radius:0;font:inherit;font-weight:600} .pmpro .pmpro_btn-plain{background:none;border:0;color:var(--link);padding:4px 0;font-size:13px} .pmpro .pmpro_form .pmpro_btn-submit-checkout,.pmpro .pmpro_btn-submit,.pmpro input[type=submit].pmpro_btn{display:inline-flex;justify-content:center;align-items:center;gap:.6em;width:100%;padding:15px 22px;font-size:16px;color:#0F1254;background:var(--aqua-btn);border:0;cursor:pointer;transition:background .2s,color .2s} .pmpro .pmpro_btn-submit-checkout:hover,.pmpro .pmpro_btn-submit:hover,.pmpro input[type=submit].pmpro_btn:hover{background:var(--navy);color:#fff} .pmpro .pmpro_message{border-radius:0;border:0;border-left:3px solid var(--cyan);background:var(--cyan-50);color:var(--heading);padding:12px 16px} .pmpro .pmpro_message.pmpro_error{border-left-color:#d64545;background:#fdecec;color:#8a1c1c} .pmpro .pmpro_list{list-style:none;margin:0;padding:0} .pmpro .pmpro_list_item{padding:10px 0;border-top:1px solid var(--line)} .pmpro .pmpro_list_item:first-child{border-top:0} .pmpro .pmpro_list_item_label{font-weight:600;color:var(--heading)} .pmpro .pmpro_table{width:100%;border-collapse:collapse;font-size:15px} .pmpro .pmpro_table th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line)} .pmpro .pmpro_table td{padding:12px;border-bottom:1px solid var(--line)} .pmpro .pmpro_tag{border-radius:9999px;font-size:12px;font-weight:600;padding:3px 10px} /* In the checkout card the sections sit flat inside the card, divided by a line. */ .form-card .pmpro .pmpro_card{border:0;border-radius:0;box-shadow:none;margin:0;padding:0 0 22px;border-bottom:1px solid var(--line);overflow:visible} .form-card .pmpro .pmpro_form_fieldset:last-of-type .pmpro_card{border-bottom:0} .form-card .pmpro .pmpro_card + *,.form-card .pmpro .pmpro_form_fieldset + *{margin-top:22px} .form-card .pmpro .pmpro_card_title{padding:0;margin:0 0 14px} .form-card .pmpro .pmpro_card_content{padding:0} .form-card .pmpro .pmpro_card_actions{margin:16px 0 0;padding:12px 14px} .form-card .pmpro_checkout-field-submit,.form-card .pmpro_form_submit{margin-top:24px} @media (max-width:600px){.pmpro .pmpro_cols-2{grid-template-columns:minmax(0,1fr)}} /* The account page: memberships, invoices and links as cards in a grid. */ .app-content .pmpro_account,.app-content .pmpro{max-width:880px} #pmpro_form .pmpro_btn-submit-checkout{width:100%} /* The account page: the PMPro sections side by side, then the members' shortcuts. */ .app-content .wp-block-pmpro-account-page > .pmpro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px;max-width:none} .app-content .pmpro_section{margin:0} .app-content .pmpro_section_title{font-size:var(--fs-h3);color:var(--heading);margin:0 0 14px} .app-content .pmpro_heading-with-avatar{display:flex;align-items:center;gap:12px} .app-content .pmpro_heading-with-avatar img{border-radius:50%} .app-content .pmpro_card_action_separator{color:var(--line);margin:0 6px} .account-shortcuts{margin-top:40px;padding-top:36px;border-top:1px solid var(--line)} .account-shortcuts > h2{font-size:var(--fs-h3);margin:0 0 20px} .shortcut-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .shortcut{position:relative;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:16px;transition:border-radius .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s} .shortcut:hover{border-radius:40px 0 40px 0;box-shadow:0 18px 40px -24px rgba(15,18,84,.35)} .shortcut h3{font-size:var(--fs-h4,1.1875rem);margin:14px 0 6px} .shortcut h3 a{color:var(--heading);text-decoration:none} .shortcut h3 a::after{content:"";position:absolute;inset:0} .shortcut p{margin:0;font-size:14px;color:var(--muted)} @media (max-width:900px){.app-content .wp-block-pmpro-account-page > .pmpro{grid-template-columns:minmax(0,1fr)}.shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.shortcut-grid{grid-template-columns:minmax(0,1fr)}} /* ---- BuddyPress (Nouveau): directory, profiles and activity in the site's style. ---- */ .app-content .buddypress-wrap{font-family:inherit;color:var(--body)} .buddypress-wrap a{color:var(--link)} /* Tabs: an underline for the main tabs, pills for the sub-tabs. */ body .buddypress-wrap .bp-navs{background:none;border:0} body .buddypress-wrap .main-navs:not(.vertical) ul,body .buddypress-wrap #object-nav ul{display:flex;flex-wrap:wrap;gap:4px 24px;border-bottom:1px solid var(--line)} body .buddypress-wrap .bp-navs ul li a{padding:12px 0;background:none!important;color:var(--muted);font-weight:600;font-size:15px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px} body .buddypress-wrap .bp-navs ul li.selected a,body .buddypress-wrap .bp-navs ul li.current a,body .buddypress-wrap .bp-navs ul li a:hover{color:var(--heading);border-bottom-color:var(--cyan)} body .buddypress-wrap .bp-navs ul li .count{background:var(--cyan-50);color:var(--teal);border:0;border-radius:9999px;font-size:12px;padding:1px 8px} body .buddypress-wrap .bp-subnavs,body .buddypress-wrap #subnav{margin:18px 0} body .buddypress-wrap .bp-subnavs ul,body .buddypress-wrap #subnav ul{display:flex;flex-wrap:wrap;gap:8px;border:0} body .buddypress-wrap .bp-subnavs ul li a,body .buddypress-wrap #subnav ul li a{padding:7px 16px;border:1px solid var(--line);border-radius:9999px;margin:0;color:var(--heading);font-size:14px;background:var(--surface)!important} body .buddypress-wrap .bp-subnavs ul li.selected a,body .buddypress-wrap .bp-subnavs ul li.current a,body .buddypress-wrap #subnav ul li.selected a,body .buddypress-wrap #subnav ul li.current a{background:var(--navy)!important;border-color:var(--navy);color:#fff} /* Search and filters. */ body .buddypress-wrap .subnav-filters{margin:18px 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center} body .buddypress-wrap .dir-search form,body .buddypress-wrap .bp-dir-search-form,body .buddypress-wrap .select-wrap{border:1px solid var(--field);border-radius:0;background:var(--surface);box-shadow:none} body .buddypress-wrap input[type=search],body .buddypress-wrap input[type=text],body .buddypress-wrap textarea,body .buddypress-wrap select{font:inherit;font-size:15px;border-radius:0} body .buddypress-wrap .standard-form input[type=text],body .buddypress-wrap .standard-form input[type=email],body .buddypress-wrap .standard-form input[type=password],body .buddypress-wrap .standard-form textarea,body .buddypress-wrap .standard-form select,body .buddypress-wrap #whats-new{border:1px solid var(--field);border-radius:0;padding:12px 14px} body .buddypress-wrap input:focus,body .buddypress-wrap textarea:focus,body .buddypress-wrap select:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,190,213,.15)} /* Buttons: the square aqua button. */ body .buddypress-wrap input[type=submit],body .buddypress-wrap button.button,body .buddypress-wrap a.button,body .buddypress-wrap .generic-button a,body .buddypress-wrap .generic-button button{border-radius:0;border:0;background:var(--aqua-btn);color:#0F1254;font:inherit;font-weight:600;font-size:14px;padding:9px 18px;box-shadow:none;text-decoration:none} body .buddypress-wrap input[type=submit]:hover,body .buddypress-wrap button.button:hover,body .buddypress-wrap a.button:hover,body .buddypress-wrap .generic-button a:hover,body .buddypress-wrap .generic-button button:hover{background:var(--navy);color:#fff} /* Notices. */ body .buddypress-wrap .bp-feedback{border:0;border-left:3px solid var(--cyan);border-radius:0;background:var(--cyan-50);box-shadow:none;color:var(--heading)} body .buddypress-wrap .bp-feedback .bp-icon{background:none;color:var(--teal)} /* The members directory: cards in a grid. */ body .buddypress-wrap .members-list,body .buddypress-wrap ul.item-list.members-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;border:0;margin:0;padding:0} body .buddypress-wrap .members-list > li{width:auto!important;float:none!important;margin:0!important;padding:24px 20px!important;border:1px solid var(--line)!important;border-radius:16px;background:var(--surface);text-align:center;transition:border-radius .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s} body .buddypress-wrap .members-list > li:hover{border-radius:40px 0 40px 0;box-shadow:0 18px 40px -24px rgba(15,18,84,.35)} body .buddypress-wrap .members-list .item-avatar{float:none!important;width:auto!important;margin:0 auto 12px!important} body .buddypress-wrap .members-list .item-avatar img{width:96px;height:96px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--cyan-50)} body .buddypress-wrap .members-list .item{float:none!important;width:auto!important;margin:0!important;padding:0!important} body .buddypress-wrap .members-list .list-title{font-family:Livvic,sans-serif;font-size:1.0625rem;margin:0} body .buddypress-wrap .members-list .list-title a{color:var(--heading)} body .buddypress-wrap .members-list .item-meta{color:var(--muted);font-size:13px} body .buddypress-wrap .members-list .member-button-wrap,body .buddypress-wrap .members-list .action{margin-top:12px;justify-content:center} /* A member's profile: a soft gradient header, round avatar. */ body .buddypress-wrap #cover-image-container,body .buddypress-wrap #header-cover-image{border-radius:16px 16px 0 0} body .buddypress-wrap #header-cover-image{background-color:transparent;background-image:linear-gradient(135deg,var(--navy),var(--blue) 60%,#0b7f8f)} body .buddypress-wrap #item-header-cover-image #item-header-avatar img.avatar{border-radius:50%;border:4px solid #fff;background:var(--surface);box-shadow:0 10px 24px -12px rgba(15,18,84,.5)} body .buddypress-wrap #item-header-cover-image h2.user-nicename{color:#fff;text-shadow:none;font-family:Livvic,sans-serif} body .buddypress-wrap .item-meta,body .buddypress-wrap .activity{color:var(--muted)} body .buddypress-wrap .pmpro_bp_show_level_on_bp_profile,body .buddypress-wrap .pmpro-bp-levels{font-size:14px} /* Activity stream. */ body .buddypress-wrap .activity-list .activity-item{border:1px solid var(--line);border-radius:16px;margin:0 0 16px;padding:18px 20px;background:var(--surface);box-shadow:none} body .buddypress-wrap .activity-list .activity-avatar img{border-radius:50%} body .buddypress-wrap .activity-list .activity-header{color:var(--muted);font-size:14px} body .buddypress-wrap .activity-list .activity-header a{color:var(--heading);font-weight:600} body .buddypress-wrap #whats-new-form{border:1px solid var(--line);border-radius:16px;padding:18px;background:var(--surface);box-shadow:none} body .buddypress-wrap #whats-new-avatar img{border-radius:50%} body #buddypress #header-cover-image{background-image:linear-gradient(135deg,var(--navy),var(--blue) 60%,#0b7f8f)!important;background-color:var(--navy)} body .buddypress-wrap .members-list::before,body .buddypress-wrap .members-list::after{display:none} body .buddypress-wrap .members-list .list-wrap{display:block} body .buddypress-wrap .members-list .item-block{display:block} body .buddypress-wrap .members-list .item-meta{margin:4px 0 0} body .buddypress-wrap .members-list .item,body .buddypress-wrap .members-list .item-block{text-align:center} /* The Compendium landing page (coming soon): a large monogram beside the intro. */ .compendium-mark{display:grid;place-items:center;min-height:280px;border-radius:24px;background:linear-gradient(135deg,var(--cyan-50),#fff)} .compendium-mark .icrr-icon-block svg,.compendium-mark svg{width:120px;height:120px} .compendium-cta{margin-top:24px} .compendium-cta .btn-square{color:#0F1254;text-decoration:none} /* On dark backgrounds (footer, dark banners, navy panels) the button keeps the stronger aqua; the lighter aqua (--aqua-btn) is for light backgrounds, where it reads better with the dark text. */ .site-foot .btn-square,.bn-dark .btn-square,.callout.navy .btn-square,.cta-band .btn-square{background:var(--cyan)!important} .site-foot .btn-square:hover,.bn-dark .btn-square:hover,.callout.navy .btn-square:hover,.cta-band .btn-square:hover{background:#fff!important;color:var(--navy)} /* The welcome page after joining (PMPro confirmation): the monogram large and faint behind the welcome. */ .welcome-grid .members-intro{position:relative;isolation:isolate} .welcome-grid .members-intro::before{display:none} .welcome-grid .members-intro::after{content:"";position:absolute;z-index:-1;top:-30px;right:-10px;width:min(460px,85%);aspect-ratio:357/317;background:url(../images/logo-mark.svg) no-repeat center/contain;opacity:.07;pointer-events:none} .welcome-grid .members-intro h1{font-size:var(--fs-display)} .welcome-grid .members-intro h3{font-size:var(--fs-h4,1.1875rem);margin:30px 0 0} .welcome-grid .form-perks{margin-top:14px} .welcome-grid .form-perks a{color:var(--link);font-weight:600} .welcome-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:30px 0 0} .welcome-actions .btn-square{color:#0F1254;text-decoration:none;padding:14px 22px} .welcome-actions .btn-square:hover{background:var(--navy);color:#fff} .form-card .welcome-active{font-size:var(--fs-ui);margin:0 0 16px} .form-card .welcome-email{margin:0 0 24px;padding:16px 18px;background:var(--cyan-50);border-left:3px solid var(--cyan)} .form-card .welcome-email p{margin:0;font-size:15px;color:var(--heading)} .form-card .welcome-email .welcome-label{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)} .form-card #pmpro_order_single .pmpro_card{border:1px solid var(--line);border-radius:12px;padding:0} .form-card #pmpro_order_single .pmpro_card_title{padding:18px 20px 0;font-size:var(--fs-h4,1.1875rem);display:flex;align-items:center;gap:10px;flex-wrap:wrap} .form-card #pmpro_order_single .pmpro_card_content{padding:12px 20px 18px} .form-card #pmpro_order_single .pmpro_card_actions{margin:0;border-top:0;border-bottom:1px solid var(--line);text-align:right} .form-card .pmpro_tag-success{background:#e7f8ef;color:#166534} .form-card #pmpro_order_single .pmpro_list-with-labels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px} .form-card #pmpro_order_single .pmpro_list-with-labels .pmpro_list_item{border:0;padding:0;overflow-wrap:anywhere;font-size:14px} .form-card #pmpro_order_single .pmpro_list_item_label{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} /* Header: the "My account" menu for logged-in visitors (opens on hover, or on click for touch and keyboards). */ .acct{position:relative} .acct-toggle{background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--link);cursor:pointer} .acct-toggle:hover{color:var(--cyan)} .acct-caret{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .2s} .acct-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:260px;padding:8px 0;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--cyan);border-radius:0 0 14px 14px;box-shadow:0 20px 44px rgba(15,18,84,.14);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility .2s} .acct-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px} .acct:hover .acct-menu,.acct:focus-within .acct-menu,.acct.is-open .acct-menu{opacity:1;visibility:visible;transform:none} .acct:hover .acct-caret,.acct.is-open .acct-caret{transform:rotate(180deg)} .acct-who{padding:10px 18px 12px;border-bottom:1px solid var(--line);margin-bottom:6px} .acct-who b{display:block;color:var(--heading);font-size:15px} .acct-who small{display:block;color:var(--teal);font-size:12px;font-weight:600;margin-top:2px} .acct-menu nav a,.acct-menu .acct-out{display:block;padding:8px 18px;font-size:14px;color:var(--heading)} .hdr-top .acct-menu nav a{color:var(--navy)} .acct-menu nav a:hover,.acct-menu .acct-out:hover{background:var(--soft);color:var(--link)} .hdr-top .acct-menu .acct-out{margin-top:6px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted)} /* ---- The community bar (blocks/community-bar): one navy bar across the Compendium, forum and members' pages. ---- */ .cbar{background:var(--navy);color:#fff;position:relative;z-index:5} .cbar-row{display:flex;align-items:center;gap:28px;min-height:52px} .cbar-brand{display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:Livvic,sans-serif;font-weight:600;font-size:15px;white-space:nowrap;text-decoration:none} .cbar-brand i{width:8px;height:8px;border-radius:50%;background:var(--cyan)} .cbar-links{display:flex;align-items:center;gap:22px;list-style:none;margin:0;padding:0;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none} .cbar-links a{display:block;padding:15px 0 13px;color:#c9cbf0;font-size:14px;font-weight:500;white-space:nowrap;text-decoration:none;border-bottom:2px solid transparent} .cbar-links a:hover{color:#fff} .cbar-links a[aria-current="page"]{color:#fff;border-bottom-color:var(--cyan)} .cbar-links a.cbar-accent{color:var(--cyan);font-weight:600} .cbar-search{position:relative;flex:0 0 230px} .cbar-search .icon{position:absolute;left:12px;top:50%;width:15px;height:15px;transform:translateY(-50%);stroke:#aeb1df} .cbar-search input{width:100%;padding:8px 14px 8px 34px;font:inherit;font-size:13px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:9999px;outline:0} .cbar-search input::placeholder{color:#aeb1df} .cbar-search input:focus{border-color:var(--cyan);background:rgba(255,255,255,.12)} @media (max-width:960px){.cbar-row{gap:16px}.cbar-search{display:none}.cbar-brand{display:none}} /* ---- The forum in the Compendium's style: a navy hero, pill tabs, forums as cards. ---- */ .fh{position:relative;background:radial-gradient(ellipse at 80% 0%,rgba(116,91,248,.45),transparent 55%),linear-gradient(135deg,var(--navy),#16197a 60%,var(--navy));color:#fff;padding:28px 0 0} .fh .crumbs,.fh .crumbs a{color:#aeb1df} .fh .eyebrow{color:var(--cyan);margin:26px 0 10px} .fh h1{color:#fff;font-size:clamp(2rem,4vw,2.875rem);max-width:15em;margin:0 0 14px;line-height:1.12} .fh .lead{color:#d6d8f5;max-width:34rem;margin:0 0 26px} .fh-search{position:relative;display:flex;max-width:560px;background:#fff;border-radius:9999px;padding:6px;box-shadow:0 18px 40px -18px rgba(0,0,0,.5)} .fh-search .icon{position:absolute;left:20px;top:50%;width:18px;height:18px;transform:translateY(-50%);stroke:var(--muted)} .fh-search input{flex:1;min-width:0;padding:10px 12px 10px 44px;font:inherit;font-size:15px;border:0;outline:0;background:none;color:var(--ink)} .fh-search .btn-square{border-radius:9999px;padding:10px 22px;background:var(--cyan)} .fh-search .btn-square:hover{background:var(--navy);color:#fff} .fh-figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;transform:translateY(50%);margin-top:16px} .fh-figure{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:0 18px 40px -26px rgba(15,18,84,.4)} .fh-figure b{display:block;font-family:Livvic,sans-serif;font-size:1.75rem;color:var(--navy);line-height:1.1} .fh-figure span{font-size:13px;color:var(--muted)} .fh + .wrap.app{padding-top:96px} .fh-slim{padding:18px 0 22px} .fh-slim .fh-name{margin:10px 0 0;font-family:Livvic,sans-serif;font-size:1.375rem} .fh-slim .fh-name a{color:#fff;text-decoration:none} .fh-slim + .wrap.app{padding-top:36px} @media (max-width:760px){.fh-figures{grid-template-columns:repeat(2,minmax(0,1fr))}.fh + .wrap.app{padding-top:150px}} /* Categories: an eyebrow heading with its button, then the forums as cards in two columns. */ /* The forum's own stats footer and share bar: the hero carries the figures now. */ /* Inside a forum: its intro as a card, and the topics as a clean list in a card. */ /* Save and Discuss (inc/community.php) under an entry's title. */ .entry-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0} .ea-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;font:inherit;font-size:14px;font-weight:600;color:var(--heading);background:var(--surface);border:1px solid var(--field);border-radius:9999px;cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s,color .2s} .ea-btn .icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8} .ea-btn:hover{border-color:var(--navy)} .ea-save[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff} .ea-save[aria-pressed="true"] .icon{fill:var(--cyan);stroke:var(--cyan)} .ea-discuss{background:var(--aqua-btn);border-color:var(--aqua-btn)} .ea-discuss:hover{background:var(--navy);border-color:var(--navy);color:#fff} .bn-dark .ea-btn{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.3)} .bn-dark .ea-discuss{background:var(--cyan);color:var(--navy);border-color:var(--cyan)} /* The Saved tab on a member's profile. */ .saved-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:18px} .saved-card{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:16px} .saved-card h3{font-size:1.0625rem;margin:0} .saved-card h3 a{color:var(--heading)} .saved-card p{margin:0;font-size:14px;color:var(--muted)} .saved-card .tag{align-self:flex-start} .saved-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:13px} .saved-foot a{color:var(--link);font-weight:600} .ea-remove{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--muted);cursor:pointer} .ea-remove:hover{color:#b42318} .saved-empty{grid-column:1/-1;padding:32px;text-align:center;background:var(--soft);border:1px dashed var(--field);border-radius:16px} .saved-empty h3{margin:0 0 6px} .saved-empty p{margin:0;color:var(--muted)} .acct-toggle .acct-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--cyan-50)} /* ---- Member profile (buddypress/members/single/home.php), matched to profile mockups A (others) and C (yours). ---- */ .wrap.app:has(.pf){padding-top:40px} .pf{display:grid;gap:36px;align-items:start} .pf .eyebrow{margin:0;font-size:12px;letter-spacing:.12em} .pf-meta{margin:2px 0 0;font-size:14px;color:var(--muted)} .pf-avatar{display:block;line-height:0} .pf-avatar img{border-radius:50%;object-fit:cover;background:linear-gradient(135deg,var(--cyan),var(--purple))} /* A: someone else's profile. */ .pf-public{grid-template-columns:240px minmax(0,1fr)} .pf-side{display:grid;gap:14px;position:sticky;top:110px} .pf-side .pf-avatar img{width:104px;height:104px} .pf-name h1{font-size:1.5rem;line-height:1.2;margin:0} .pf-bio{font-size:15px;line-height:1.55;color:var(--body)} .pf-bio p{margin:0 0 6px} .pf-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:14px 0;border-block:1px solid var(--line)} .pf-figures div{display:flex;flex-direction:column-reverse} .pf-figures dt{font-size:12px;color:var(--muted)} .pf-figures dd{margin:0;font-family:Livvic,sans-serif;font-size:1.45rem;font-weight:600;color:var(--heading);line-height:1.1;font-variant-numeric:tabular-nums} .pf-since{margin:0;font-size:14px;color:var(--muted)} .pf-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow-x:auto} .pf-tabs a{padding:0 0 11px;font-size:15px;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap} .pf-tabs a:hover{color:var(--heading)} .pf-tabs a[aria-current="page"]{color:var(--heading);border-bottom-color:var(--cyan)} /* C: your own profile. */ .pf-own{grid-template-columns:200px minmax(0,1fr)} .pf-menu{display:grid;gap:2px;position:sticky;top:110px} .pf-menu-label{margin:0;padding:4px 12px 6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .pf-menu-sep{height:1px;background:var(--line);margin:10px 4px} .pf-menu a{display:block;padding:9px 12px;border-radius:10px;font-size:15px;color:var(--body);text-decoration:none} .pf-menu a:hover{background:var(--soft);color:var(--heading)} .pf-menu a[aria-current="page"]{background:var(--cyan-50);color:var(--teal);font-weight:600} .pf-hello{display:flex;gap:16px;align-items:center;margin-bottom:22px} .pf-hello .pf-avatar img{width:64px;height:64px} .pf-hello h1{font-size:1.625rem;line-height:1.15;margin:0} .pf-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px} .pf-tile{display:grid;gap:2px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px} .pf-tile b{font-family:Livvic,sans-serif;font-size:1.5rem;font-weight:600;color:var(--heading);line-height:1.1;font-variant-numeric:tabular-nums} .pf-tile span{font-size:13px;color:var(--muted)} .pf-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .pf-box{display:grid;gap:12px;align-content:start;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:14px} /* Shared: section heads, cards, rows with initials. */ .pf-overview{display:grid;gap:30px} .pf-sec{display:grid;gap:14px} .pf-sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .pf-sec-h h2{font-size:1.1875rem;margin:0} .pf-sec-h a{font-size:14px;font-weight:600;color:var(--link)} .pf-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .pf-card{display:grid;gap:6px;align-content:start;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:border-radius .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s} .pf-card:hover{border-radius:32px 0 32px 0;box-shadow:0 18px 40px -24px rgba(15,18,84,.35)} .pf-card b{font-family:Livvic,sans-serif;font-size:1.0625rem;font-weight:600;color:var(--heading);line-height:1.3} .pf-card small{font-size:13px;color:var(--muted)} .pf-chip{justify-self:stretch;padding:4px 12px;border-radius:9999px;background:var(--cyan-50);color:var(--teal);font-size:12px;font-weight:600} .pf-chip.is-purple{background:var(--purple-50);color:var(--purple-text)} .pf-rows{list-style:none;margin:0;padding:0;display:grid} .pf-rows li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)} .pf-rows li:first-child{padding-top:0} .pf-rows li:last-child{border-bottom:0;padding-bottom:0} .pf-rows li > div{display:grid;gap:1px;min-width:0} .pf-rows a{font-family:Livvic,sans-serif;font-size:1rem;font-weight:600;color:var(--heading);text-decoration:none;line-height:1.3} .pf-rows a:hover{color:var(--link)} .pf-rows small{font-size:13px;color:var(--muted)} .pf-dot{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--cyan-50);color:var(--teal);font-size:12px;font-weight:700} .pf-dot.is-purple{background:var(--purple-50);color:var(--purple-text)} .pf-empty{margin:0;padding:16px;background:var(--soft);border:1px dashed var(--field);border-radius:12px;color:var(--muted);font-size:14px} .pf-body > h2:first-child{display:none} .pf-body .bp-navs{margin-top:0} @media (max-width:900px){.pf-public,.pf-own{grid-template-columns:minmax(0,1fr);gap:24px}.pf-side,.pf-menu{position:static}.pf-cards,.pf-boxes,.pf-tiles{grid-template-columns:minmax(0,1fr)}} /* Inside a profile: BuddyPress's chrome off (the shadow on nav blocks, the screen headings), sub-tabs as pills. */ body .buddypress-wrap .pf-menu,body .buddypress-wrap .pf-tabs{box-shadow:none!important;background:none!important} .pf-body h2.entry-title,.pf-body .screen-heading,.pf-body h2.bp-screen-title{display:none} body .buddypress-wrap .pf-body .bp-subnavs{margin:0 0 22px;border:0;background:none!important;box-shadow:none!important} body .buddypress-wrap .pf-body .bp-subnavs ul{display:flex;flex-wrap:wrap;gap:8px;border:0;background:none} body .buddypress-wrap .pf-body .bp-subnavs ul li{background:none!important;border:0;margin:0} body .buddypress-wrap .pf-body .bp-subnavs ul li a{display:block;padding:7px 16px;border:1px solid var(--line);border-radius:9999px!important;background:var(--surface)!important;color:var(--heading);font-size:14px} body .buddypress-wrap .pf-body .bp-subnavs ul li.selected a,body .buddypress-wrap .pf-body .bp-subnavs ul li.current a{background:var(--navy)!important;border-color:var(--navy);color:#fff} body .buddypress-wrap .pf-body .secondary-nav-more{display:none} .pf-body .bp-subnavs:not(:has(li)){display:none} .pf-lock{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:9999px;background:var(--soft);border:1px solid var(--line);font-family:'Noto Sans',sans-serif;font-size:12px;font-weight:600;color:var(--muted);vertical-align:middle} /* Privacy switches. */ .pf-privacy{display:grid;gap:14px;max-width:620px} .pf-privacy h2{font-size:var(--fs-h3);margin:0} .pf-privacy-intro{margin:0 0 6px;color:var(--muted)} .pf-switch{position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:14px;cursor:pointer} .pf-switch span{display:grid;gap:4px} .pf-switch b{color:var(--heading);font-size:15px} .pf-switch small{color:var(--muted);font-size:13px;line-height:1.5} .pf-switch input{position:absolute;opacity:0;width:1px;height:1px} .pf-switch i{flex:none;position:relative;width:44px;height:26px;border-radius:9999px;background:var(--field);transition:background .2s} .pf-switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s} .pf-switch input:checked + i{background:var(--cyan)} .pf-switch input:checked + i::after{transform:translateX(18px)} .pf-switch input:focus-visible + i{outline:3px solid var(--navy);outline-offset:2px} .pf-privacy .btn-square{justify-self:start;color:#0F1254;padding:13px 22px} .pf-body #subnav:not(:has(.bp-personal-sub-tab)),.pf-body .bp-subnavs:not(:has(.bp-personal-sub-tab)){display:none!important} body .buddypress-wrap .pf-privacy button.btn-square{background:var(--aqua-btn);border:0;border-radius:0;color:#0F1254;font-weight:600;padding:13px 22px} body .buddypress-wrap .pf-privacy button.btn-square:hover{background:var(--navy);color:#fff} /* ========================================================================== Dark mode. The palette comes from the profile options mockup. It applies when the visitor picks it with the header switch, or, if they haven't chosen, when their device is set to dark. The brand navy panels (footer, community bar, dark banners) keep their navy; everything else takes the dark tokens below. ========================================================================== */ .theme-switch{display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:none;color:var(--link);cursor:pointer} .theme-switch:hover{background:var(--soft)} .theme-switch svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} .theme-switch .ts-sun{display:none} .hdr-logo .logo-dark{display:none} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --page:#0b0d2a; --surface:#14173d; --soft:#101336; --line:#2a2e63; --field:#3a3f80; --header:#0f1238; --ink:#eef0ff; --body:#cfd2ee; --muted:#9a9ec8; --heading:#eef0ff; --link:#9ea4ff; --cyan-50:#123a4a; --purple-50:#2a2462; --white:#14173d; --teal:#7fe3f0; --purple-text:#c3b6ff; --eyebrow:var(--cyan); --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.3); color-scheme:dark; } } :root[data-theme="dark"]{ --page:#0b0d2a; --surface:#14173d; --soft:#101336; --line:#2a2e63; --field:#3a3f80; --header:#0f1238; --ink:#eef0ff; --body:#cfd2ee; --muted:#9a9ec8; --heading:#eef0ff; --link:#9ea4ff; --cyan-50:#123a4a; --purple-50:#2a2462; --white:#14173d; --teal:#7fe3f0; --purple-text:#c3b6ff; --eyebrow:var(--cyan); --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.3); color-scheme:dark; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-switch .ts-sun{display:block} :root:not([data-theme="light"]) .theme-switch .ts-moon{display:none} :root:not([data-theme="light"]) .hdr-logo .logo-light{display:none} :root:not([data-theme="light"]) .hdr-logo .logo-dark{display:block} :root:not([data-theme="light"]) .hdr{background:var(--header);box-shadow:0 6px 18px rgba(0,0,0,.35)} :root:not([data-theme="light"]) .hdr .mega,:root:not([data-theme="light"]) .acct-menu,:root:not([data-theme="light"]) .search-bar{background:var(--surface);border-color:var(--line)} :root:not([data-theme="light"]) .bn-light,:root:not([data-theme="light"]) .members,:root:not([data-theme="light"]) .form-page{background:linear-gradient(180deg,#10143f,var(--page) 70%)} :root:not([data-theme="light"]) .bn-light::after{opacity:.25} :root:not([data-theme="light"]) .pill.white{background:var(--surface);color:var(--heading)} :root:not([data-theme="light"]) .tag{background:var(--cyan-50);color:#7fe3f0} :root:not([data-theme="light"]) .eyebrow{color:var(--cyan)} :root:not([data-theme="light"]) img{opacity:.96} :root:not([data-theme="light"]) input,:root:not([data-theme="light"]) textarea,:root:not([data-theme="light"]) select{background:var(--surface);color:var(--ink);border-color:var(--field)} :root:not([data-theme="light"]) .card,:root:not([data-theme="light"]) .mini,:root:not([data-theme="light"]) .stat,:root:not([data-theme="light"]) .feature,:root:not([data-theme="light"]) .figure,:root:not([data-theme="light"]) .post,:root:not([data-theme="light"]) .pmpro .pmpro_card,:root:not([data-theme="light"]) .forminator-ui.forminator-custom-form[data-design]{border-color:var(--line)} :root:not([data-theme="light"]) .pf-avatar img{border-color:var(--surface)} :root:not([data-theme="light"]) .wp-block-table td,:root:not([data-theme="light"]) .wp-block-table th{border-color:var(--line)} :root:not([data-theme="light"]) .ticket-bottom::before,:root:not([data-theme="light"]) .ticket-bottom::after{background:var(--soft)} :root:not([data-theme="light"]) body .buddypress-wrap .bp-feedback{background:var(--cyan-50);color:var(--ink)} :root:not([data-theme="light"]) .login{background:var(--page)} } :root[data-theme="dark"] .theme-switch .ts-sun{display:block} :root[data-theme="dark"] .theme-switch .ts-moon{display:none} :root[data-theme="dark"] .hdr-logo .logo-light{display:none} :root[data-theme="dark"] .hdr-logo .logo-dark{display:block} :root[data-theme="dark"] .hdr{background:var(--header);box-shadow:0 6px 18px rgba(0,0,0,.35)} :root[data-theme="dark"] .hdr .mega,:root[data-theme="dark"] .acct-menu,:root[data-theme="dark"] .search-bar{background:var(--surface);border-color:var(--line)} :root[data-theme="dark"] .bn-light,:root[data-theme="dark"] .members,:root[data-theme="dark"] .form-page{background:linear-gradient(180deg,#10143f,var(--page) 70%)} :root[data-theme="dark"] .bn-light::after{opacity:.25} :root[data-theme="dark"] .pill.white{background:var(--surface);color:var(--heading)} :root[data-theme="dark"] .tag{background:var(--cyan-50);color:#7fe3f0} :root[data-theme="dark"] .eyebrow{color:var(--cyan)} :root[data-theme="dark"] img{opacity:.96} :root[data-theme="dark"] input,:root[data-theme="dark"] textarea,:root[data-theme="dark"] select{background:var(--surface);color:var(--ink);border-color:var(--field)} :root[data-theme="dark"] .card,:root[data-theme="dark"] .mini,:root[data-theme="dark"] .stat,:root[data-theme="dark"] .feature,:root[data-theme="dark"] .figure,:root[data-theme="dark"] .post,:root[data-theme="dark"] .pmpro .pmpro_card,:root[data-theme="dark"] .forminator-ui.forminator-custom-form[data-design]{border-color:var(--line)} :root[data-theme="dark"] .pf-avatar img{border-color:var(--surface)} :root[data-theme="dark"] .wp-block-table td,:root[data-theme="dark"] .wp-block-table th{border-color:var(--line)} :root[data-theme="dark"] .ticket-bottom::before,:root[data-theme="dark"] .ticket-bottom::after{background:var(--soft)} :root[data-theme="dark"] body .buddypress-wrap .bp-feedback{background:var(--cyan-50);color:var(--ink)} :root[data-theme="dark"] .login{background:var(--page)} /* Dark mode: text on aqua stays navy; top-bar links and the home intro take the light text. */ .ea-discuss{color:#0F1254} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hdr-top a,:root:not([data-theme="light"]) .acct-toggle{color:var(--link)}} :root[data-theme="dark"] .hdr-top a,:root[data-theme="dark"] .acct-toggle{color:var(--link)} /* Dark mode: the forum hero's figures and search. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .fh-figure{background:var(--surface);border-color:var(--line)} :root:not([data-theme="light"]) .fh-search{background:var(--surface)} :root:not([data-theme="light"]) .fh-search input{color:var(--ink)} } :root[data-theme="dark"] .fh-figure{background:var(--surface);border-color:var(--line)} :root[data-theme="dark"] .fh-search{background:var(--surface)} :root[data-theme="dark"] .fh-search input{color:var(--ink)} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fh-figure b{color:var(--heading)}} :root[data-theme="dark"] .fh-figure b{color:var(--heading)} .pf .pf-hello h1,.pf .pf-hello p,.pf .pf-side h1,.pf .pf-side p,.pf .pf-name p{margin-top:0!important;margin-bottom:0!important} .pf-hello > div{display:grid;gap:3px} .pf-hello .eyebrow{margin-bottom:2px!important} body .buddypress-wrap .pf-menu,.pf-menu{border:0!important;padding:0!important} .pf-menu .pf-menu-label + a{margin-top:0} /* ========================================================================== The community app (templates/page-app.html and the forum templates): the shared left menu, then the page. ========================================================================== */ .cbar-fill{flex:1} .app-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start;padding-top:32px;padding-bottom:var(--space-section)} .app-main{min-width:0;display:grid;gap:24px;align-content:start} .app-main > .app-content{margin:0} .cnav{position:sticky;top:96px;display:grid;gap:2px;padding:4px 0} .cnav-label{margin:14px 0 6px;padding:0 12px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .cnav-label:first-child{margin-top:0} .cnav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;font-size:15px;color:var(--body);text-decoration:none} .cnav a:hover{background:var(--soft);color:var(--heading)} .cnav a[aria-current="page"]{background:var(--cyan-50);color:var(--teal);font-weight:600} .cnav svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .cnav-count{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;padding:1px 8px;border-radius:9999px;background:var(--cyan-50);color:var(--teal)} .cnav a[aria-current="page"] .cnav-count{background:var(--surface)} .cnav .cnav-me{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);border-radius:0} .cnav-me img{width:36px;height:36px;border-radius:50%} .cnav-me span{display:grid;line-height:1.3} .cnav-me b{font-size:14px;color:var(--heading)} .cnav-me small{font-size:12px;color:var(--muted)} .app-head{display:grid;gap:6px} .app-head .crumbs{margin:0 0 4px} .app-head .eyebrow{margin:0} .app-head h1{font-size:clamp(1.75rem,1.4rem + 1vw,2.25rem);margin:0;line-height:1.15} .app-head .lead{margin:0;color:var(--muted);max-width:44rem;font-size:var(--fs-ui)} /* The profile no longer needs its own menu: the community menu does that job. */ .app-shell .pf-own{grid-template-columns:minmax(0,1fr)} .app-shell .pf-own > .pf-menu{display:none} .app-shell .pf-public{grid-template-columns:220px minmax(0,1fr);gap:32px} .wrap.app-shell:has(.pf){padding-top:32px} /* The forum's hero, on the forum's front page. */ .fhero{display:grid;gap:12px;padding:28px 30px;border-radius:18px;background:radial-gradient(ellipse at 85% 0%,rgba(116,91,248,.5),transparent 60%),linear-gradient(135deg,#0F1254,#1a1d86);color:#d6d8f5} .fhero .eyebrow{color:var(--cyan);margin:0} .fhero h1{color:#fff;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.25rem);line-height:1.15;margin:0;max-width:20em} .fhero-search{position:relative;display:flex;max-width:560px;background:#fff;border-radius:9999px;padding:5px;margin-top:6px} .fhero-search .icon{position:absolute;left:16px;top:50%;width:17px;height:17px;transform:translateY(-50%);stroke:#6b7280;fill:none;stroke-width:2} .fhero-search input{flex:1;min-width:0;padding:9px 12px 9px 42px;font:inherit;font-size:15px;color:#111827;border:0;outline:0;background:none} .fhero-search button{border:0;border-radius:9999px;padding:9px 20px;font:inherit;font-weight:700;font-size:14px;background:var(--cyan);color:#0F1254;cursor:pointer} .fhero-search button:hover{background:#fff;box-shadow:inset 0 0 0 2px var(--cyan)} .fhero-figures{display:flex;flex-wrap:wrap;gap:22px;margin:4px 0 0;font-size:14px} .fhero-figures b{color:#fff;font-family:Livvic,sans-serif;font-size:1.2rem;margin-right:2px} @media (max-width:960px){.app-shell{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:16px}.cnav{position:static;display:flex;gap:6px;overflow-x:auto;padding-bottom:6px}.cnav-label,.cnav .cnav-me{display:none}.cnav a{white-space:nowrap;flex:none}.app-shell .pf-public{grid-template-columns:minmax(0,1fr)}} /* ========================================================================== The forum (bbPress templates in bbpress/), styled like the forum mockups. ========================================================================== */ #bbpress-forums{font-size:var(--fs-ui);color:var(--body)} .fchip{display:inline-flex;align-items:center;padding:2px 9px;border-radius:9999px;font-size:11px;font-weight:700;background:var(--cyan-50);color:var(--teal);vertical-align:middle} .fchip.is-green{background:#e7f8ef;color:#166534} .fchip.is-grey{background:var(--soft);color:var(--muted)} .fbadge{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:2px 8px;border-radius:9999px;font-size:11px;font-weight:700;background:var(--purple-50);color:var(--purple-text);vertical-align:middle} .fbadge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--purple)} .ff-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;font-size:14px;font-weight:600;border:1px solid var(--line);border-radius:9999px;background:var(--surface);color:var(--heading);text-decoration:none;white-space:nowrap} .ff-btn-aqua{border-radius:0;border-color:var(--aqua-btn);background:var(--aqua-btn);color:#0F1254} .ff-btn-aqua:hover{background:var(--navy);border-color:var(--navy);color:#fff} .ff-muted,.ff-empty{color:var(--muted)} .ff-empty{padding:22px;border:1px dashed var(--field);border-radius:14px;background:var(--soft);margin:0} /* Forum home */ .ff-home{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start} .ff-sections{display:grid;gap:30px;min-width:0} .ff-section{display:grid;gap:12px} .ff-sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .ff-sec-h h2{font-size:1.1875rem;margin:0} .ff-sec-h a{font-size:14px;font-weight:600;color:var(--link)} .ff-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .ff-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 14px;align-content:start;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:border-radius .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s} .ff-card:hover{border-radius:32px 0 32px 0;box-shadow:0 18px 40px -24px rgba(15,18,84,.35)} .ff-card .ff-ic{grid-row:span 3} .ff-card b{font-family:Livvic,sans-serif;font-size:1.0625rem;font-weight:600;color:var(--heading);line-height:1.3} .ff-desc{font-size:14px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ff-card small{font-size:12px;color:var(--muted)} .ff-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--cyan-50);color:var(--teal);font-size:13px;font-weight:700;flex:none} .ff-ic.is-purple{background:var(--purple-50);color:var(--purple-text)} .ff-aside{display:grid;gap:16px;position:sticky;top:96px} .ff-panel{display:grid;gap:12px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px} .ff-panel h2{font-size:1rem;margin:0} .ff-feed{list-style:none;margin:0;padding:0;display:grid;gap:12px} .ff-feed li{display:flex;gap:10px;align-items:flex-start} .ff-feed img{width:30px;height:30px;border-radius:50%;flex:none} .ff-feed div{display:grid;min-width:0} .ff-feed a{font-size:14px;font-weight:600;color:var(--heading);line-height:1.35;text-decoration:none} .ff-feed a:hover{color:var(--link)} .ff-feed small{font-size:12px;color:var(--muted)} .ff-faces{display:flex;flex-wrap:wrap} .ff-faces img,.ff-faces .fface{width:30px;height:30px;border-radius:50%;border:2px solid var(--surface);margin-left:-8px} .ff-faces > :first-child,.ff-faces > a:first-child img{margin-left:0} .ff-panel .ff-faces{gap:4px} .ff-panel .ff-faces img{margin-left:0;width:34px;height:34px} /* A forum */ .ff-forum,.ff-topic-page{display:grid;gap:18px} .ff-head{display:grid;gap:6px} .ff-crumbs{font-size:13px;color:var(--muted)} .ff-crumbs a{color:var(--muted)} .ff-crumbs .bbp-breadcrumb-sep{margin:0 6px} .ff-head-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between} .ff-head h1{font-size:clamp(1.6rem,1.3rem + 1vw,2.125rem);line-height:1.15;margin:0} .ff-sub{margin:4px 0 0;font-size:14px;color:var(--muted);max-width:46rem} .ff-head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .ff-follow a,.ff-follow .subscription-toggle{display:inline-flex;padding:8px 16px;border:1px solid var(--field);border-radius:9999px;font-size:14px;font-weight:600;color:var(--heading);text-decoration:none} .ff-follow a:hover{border-color:var(--heading)} .ff-mod{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px} .ff-mod a,.ff-mod span a{color:var(--muted)} .ff-mod a:hover{color:var(--link)} .ff-mod .bbp-admin-links{display:flex;flex-wrap:wrap;gap:4px 12px} .ff-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between} .ff-pills{display:flex;gap:6px;flex-wrap:wrap} .ff-pills a{padding:7px 15px;border:1px solid var(--line);border-radius:9999px;font-size:14px;font-weight:600;color:var(--heading);background:var(--surface);text-decoration:none} .ff-pills a[aria-current="page"]{background:#0F1254;border-color:#0F1254;color:#fff} .ff-topics{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden} .ff-topic{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line)} .ff-topic:last-child{border-bottom:0} .ff-topic.is-pinned{background:linear-gradient(90deg,var(--cyan-50),transparent 45%)} .ff-avatar{width:44px;height:44px;border-radius:50%} .ff-topic-title{font-family:Livvic,sans-serif;font-size:1.0625rem;font-weight:600;color:var(--heading);text-decoration:none;line-height:1.3} .ff-topic-title:hover{color:var(--link)} .ff-topic-sub{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:4px 0 0;font-size:13px;color:var(--muted)} .ff-topic-stats{display:flex;gap:16px;align-items:center;font-size:13px;color:var(--muted);white-space:nowrap} .ff-topic-stats b{font-family:Livvic,sans-serif;font-size:1rem;color:var(--heading)} .bbp-pagination{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)} .bbp-pagination-links{display:flex;gap:4px} .bbp-pagination-links a,.bbp-pagination-links span{padding:4px 10px;border-radius:8px;border:1px solid var(--line);color:var(--heading)} .bbp-pagination-links span.current{background:#0F1254;color:#fff;border-color:#0F1254} /* A discussion */ .ff-entry{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:14px;text-decoration:none} .ff-entry b{display:block;font-family:Livvic,sans-serif;font-size:1.0625rem;color:var(--heading)} .ff-entry small{font-size:13px;color:var(--muted)} .ff-entry em{font-style:normal;font-size:14px;font-weight:600;color:var(--link)} .ff-posts{display:grid;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px 22px} .ff-post{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--line)} .ff-post:last-child{border-bottom:0} .ff-post.is-answer{margin:0 -22px;padding:20px 22px;background:linear-gradient(90deg,#e7f8ef,transparent 60%)} .ff-post-avatar img{width:44px;height:44px;border-radius:50%} .ff-post-main{min-width:0} .ff-who{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:0;font-size:14px} .ff-who > a:first-child{font-weight:700;color:var(--heading)} .ff-when{font-size:13px;color:var(--muted)} .ff-post-body{margin-top:6px;font-size:var(--fs-body);line-height:1.65;color:var(--body);overflow-wrap:anywhere} .ff-post-body p{margin:0 0 10px} .ff-post-body blockquote{margin:0 0 12px;padding:10px 14px;border-left:3px solid var(--cyan);border-radius:0 10px 10px 0;background:var(--soft);font-size:15px} .ff-post-body blockquote cite{display:block;margin-bottom:2px;font-style:normal;font-size:12px;font-weight:700;color:var(--teal)} .ff-post-body blockquote.icrr-source::before{content:"From the entry";display:block;margin-bottom:2px;font-size:12px;font-weight:700;color:var(--teal)} .ff-post-body blockquote p:last-child{margin:0} .ff-acts{display:flex;flex-wrap:wrap;gap:16px;margin:8px 0 0;font-size:13px;font-weight:600} .ff-acts a,.ff-acts button{padding:0;border:0;background:none;font:inherit;color:var(--muted);cursor:pointer;text-decoration:none} .ff-acts a:first-child{color:var(--link)} .ff-acts a:hover,.ff-acts button:hover{color:var(--link)} .ff-post .ff-mod{margin-top:6px} /* Forms: start a discussion, reply. */ .ff-new{scroll-margin-top:100px} #bbpress-forums fieldset.bbp-form{margin:0;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:14px} #bbpress-forums fieldset.bbp-form legend{padding:0 6px;font-family:Livvic,sans-serif;font-size:1.0625rem;font-weight:600;color:var(--heading)} #bbpress-forums fieldset.bbp-form > div{display:grid;gap:12px} #bbpress-forums .bbp-form label{display:block;margin:0 0 4px;font-size:14px;font-weight:600;color:var(--heading)} #bbpress-forums .bbp-form input[type=text],#bbpress-forums .bbp-form select,#bbpress-forums .bbp-form textarea{width:100%;padding:11px 14px;font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--field);border-radius:10px;outline:0} #bbpress-forums .bbp-form textarea{min-height:140px;resize:vertical} #bbpress-forums .bbp-form input:focus,#bbpress-forums .bbp-form textarea:focus,#bbpress-forums .bbp-form select:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,190,213,.15)} #bbpress-forums .bbp-the-content-wrapper .quicktags-toolbar{border:1px solid var(--field);border-bottom:0;border-radius:10px 10px 0 0;background:var(--soft);padding:6px} #bbpress-forums .bbp-the-content-wrapper .quicktags-toolbar + textarea{border-radius:0 0 10px 10px} #bbpress-forums .quicktags-toolbar input.button{font:inherit;font-size:12px;padding:3px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--heading)} #bbpress-forums .bbp-submit-wrapper{display:flex;justify-content:flex-end;gap:10px;margin-top:6px} #bbpress-forums .bbp-submit-wrapper .button.submit{padding:12px 22px;font:inherit;font-weight:700;font-size:15px;border:0;border-radius:0;background:var(--aqua-btn);color:#0F1254;cursor:pointer} #bbpress-forums .bbp-submit-wrapper .button.submit:hover{background:var(--navy);color:#fff} #bbpress-forums .bbp-form .form-allowed-tags{display:none} #bbpress-forums .bbp-template-notice{margin:0 0 12px;padding:12px 16px;border-left:3px solid var(--cyan);border-radius:0 10px 10px 0;background:var(--cyan-50);color:var(--ink);font-size:14px} #bbpress-forums .bbp-template-notice p{margin:0} #bbpress-forums .bbp-template-notice.error{border-left-color:#d64545;background:#fdecec;color:#8a1c1c} /* The floating quote button. */ .quote-tip{position:absolute;z-index:80;padding:8px 14px;border:0;border-radius:9999px;background:#0F1254;color:#fff;font:600 13px/1 "Noto Sans",sans-serif;box-shadow:0 10px 24px -8px rgba(15,18,84,.6);cursor:pointer} .quote-tip::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:#0F1254;transform:translateX(-50%) rotate(45deg)} .quote-tip:hover{background:var(--blue)} @media (max-width:1100px){.ff-home{grid-template-columns:minmax(0,1fr)}.ff-aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:700px){.ff-cards,.ff-aside{grid-template-columns:minmax(0,1fr)}.ff-topic{grid-template-columns:auto minmax(0,1fr)}.ff-topic-stats{display:none}.ff-posts{padding:4px 16px}.ff-post.is-answer{margin:0 -16px;padding:20px 16px}} #bbpress-forums .bbp-reply-to-link,#bbpress-forums .ff-post-body .bbp-reply-to-link{display:none} #bbpress-forums .bbp-reply-form p:has(#bbp_topic_tags),#bbpress-forums .bbp-reply-form .bbp-form > div > p:has(input[name="bbp_topic_tags"]){display:none} #bbpress-forums .bbp-form textarea{height:170px;min-height:120px} #bbpress-forums .bbp-form input[type=checkbox]{accent-color:var(--cyan);margin-right:6px} #bbpress-forums .bbp-form p:has(input[type=checkbox]) label{display:inline;font-weight:500;color:var(--body)} /* Quotes waiting to go into a reply. */ .ff-quoting{display:grid;gap:8px;margin:0 0 10px} .ff-quoting figure{position:relative;margin:0;padding:10px 40px 10px 14px;border-left:3px solid var(--cyan);border-radius:0 10px 10px 0;background:var(--soft)} .ff-quoting figcaption{font-size:12px;font-weight:700;color:var(--teal)} .ff-quoting blockquote{margin:2px 0 0;font-size:14px;color:var(--body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .ff-quoting button{position:absolute;top:6px;right:8px;width:26px;height:26px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:18px;cursor:pointer} .ff-quoting button:hover{background:var(--surface);color:var(--ink)} /* A forum's "start a discussion" form opens from the button (or stays open after an error). */ .ff-forum .ff-new:not(:target):not(:has(.bbp-template-notice)){display:none} .ff-mod .bbp-topic-reply-link,.ff-mod a[href*="#new-post"],.ff-mod .bbp-reply-to-link{display:none} /* Forum home: the other sections as an accordion. */ .ff-more{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden} .ff-more + .ff-more{margin-top:-18px} .ff-more summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;cursor:pointer;list-style:none} .ff-more summary::-webkit-details-marker{display:none} .ff-more summary::after{content:"";flex:none;width:9px;height:9px;margin-left:4px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-3px);transition:transform .25s} .ff-more[open] summary::after{transform:rotate(-135deg) translateY(-2px)} .ff-more summary span{display:grid;gap:2px;min-width:0} .ff-more summary b{font-family:Livvic,sans-serif;font-size:1.0625rem;color:var(--heading)} .ff-more summary small{font-size:13px;color:var(--muted)} .ff-more summary em{margin-left:auto;font-style:normal;font-size:13px;color:var(--muted);white-space:nowrap} .ff-more summary:hover b{color:var(--link)} .ff-rows{list-style:none;margin:0;padding:0 18px 6px;border-top:1px solid var(--line)} .ff-rows li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)} .ff-rows li:last-child{border-bottom:0} .ff-rows .ff-ic{width:34px;height:34px;font-size:12px;border-radius:9px} .ff-rows div{display:grid;min-width:0} .ff-rows a{font-weight:600;color:var(--heading);text-decoration:none} .ff-rows a:hover{color:var(--link)} .ff-rows small{font-size:13px;color:var(--muted)} .ff-rows em{font-style:normal;font-size:13px;color:var(--muted);white-space:nowrap} /* Forum rules: a small button and its panel. */ .fhero-top{display:flex;align-items:center;justify-content:space-between;gap:12px} .ff-rules-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:9999px;background:var(--surface);color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .ff-rules-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} .ff-rules-btn:hover{color:var(--heading);border-color:var(--field)} .fhero .ff-rules-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#d6d8f5} .fhero .ff-rules-btn:hover{background:rgba(255,255,255,.18);color:#fff} .ff-rules{width:min(640px,calc(100vw - 32px));max-height:min(80vh,760px);padding:0;border:0;border-top:4px solid var(--cyan);border-radius:16px;background:var(--surface);color:var(--body);box-shadow:0 30px 70px -20px rgba(15,18,84,.5)} .ff-rules::backdrop{background:rgba(11,13,42,.6)} .ff-rules[open]{position:fixed;inset:0;margin:auto;height:fit-content} .ff-rules-in{position:relative;display:grid;gap:10px;padding:26px 28px 28px} .ff-rules-in .eyebrow{margin:0} .ff-rules-in h2{margin:0 0 6px;font-size:var(--fs-h3)} .ff-rules-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:24px;cursor:pointer} .ff-rules-close:hover{background:var(--soft);color:var(--ink)} .ff-rules .forum-rules{margin:0;padding-left:1.25rem;display:grid;gap:10px;font-size:15px;line-height:1.55} .ff-rules .forum-rules-note{margin:6px 0 0;font-size:13px;color:var(--muted)} /* Light mode chosen on a dark device: native controls (inputs, selects, scrollbars) stay light too. */ :root[data-theme="light"]{color-scheme:light} /* Form fields always take the site's colours rather than the browser's. */ input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=url],textarea,select{background-color:var(--surface);color:var(--ink)} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .members-form .btn-square{background:var(--aqua-btn);color:#0F1254}} :root[data-theme="dark"] .members-form .btn-square{background:var(--aqua-btn);color:#0F1254} /* "Welcome back": quick actions as cards. */ .quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px;max-width:36rem} .qa-card{position:relative;display:grid;gap:4px;align-content:start;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-decoration:none;transition:border-radius .5s cubic-bezier(.2,.7,.2,1),box-shadow .3s} .qa-card:hover{border-radius:32px 0 32px 0;box-shadow:0 18px 40px -24px rgba(15,18,84,.35)} .qa-ic{display:grid;place-items:center;width:38px;height:38px;margin-bottom:6px;border-radius:11px;background:var(--cyan-50);color:var(--teal)} .qa-card:nth-child(even) .qa-ic{background:var(--purple-50);color:var(--purple-text)} .qa-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .qa-card b{font-family:Livvic,sans-serif;font-size:1.0625rem;font-weight:600;color:var(--heading)} .qa-card small{font-size:13px;color:var(--muted)} .qa-count{position:absolute;top:14px;right:14px;min-width:22px;padding:2px 7px;border-radius:9999px;background:var(--cyan);color:#0F1254;font-style:normal;font-size:12px;font-weight:700;text-align:center} @media (max-width:520px){.quick-actions{grid-template-columns:minmax(0,1fr)}} .quick-actions-wrap{margin-top:36px;padding-top:30px;border-top:1px solid var(--line)} .members-intro .quick-actions-wrap{margin-top:0;padding-top:0;border-top:0} .qa-heading{font-size:var(--fs-h3);margin:0 0 16px} .app-content .quick-actions{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin-top:0} @media (max-width:900px){.app-content .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Search boxes that sit on their own coloured pill keep a transparent field (the general field rule above gives fields a background). */ .fhero-search input[type=search],.cbar-search input[type=search],.fh-search input[type=search],.search-bar input[type=search],.nl2-row input[type=email]{background-color:transparent} .fhero-search input[type=search]{color:#111827} .cbar-search input[type=search]{color:#fff;background:rgba(255,255,255,.08)} .nl2-row input[type=email]{color:inherit} /* Forum search results. */ .ff-searchbox{display:flex;gap:8px;max-width:620px;margin-top:8px} .ff-searchbox input{flex:1;min-width:0;padding:11px 14px;font:inherit;font-size:15px;border:1px solid var(--field);border-radius:10px;background:var(--surface);color:var(--ink);outline:0} .ff-searchbox input:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,190,213,.15)} .ff-snippet{margin:6px 0 0;font-size:14px;color:var(--body)} /* Inside profiles: bbPress's own search box and table headers aren't needed; BuddyPress buttons in our style. */ .pf-body .bbp-search-form,.pf-body #bbp-search-form,.pf-body .bbp-topics > .bbp-header,.pf-body .bbp-replies > .bbp-header,.pf-body .bbp-pagination-count:empty{display:none} .pf-body .bbp-user-section > h2,.pf-body .entry-title{display:none} body .buddypress-wrap .pf-body input[type=submit],body .buddypress-wrap .pf-body .button,body #buddypress .pf-body input[type=submit]{padding:11px 20px;border:0;border-radius:0;background:var(--aqua-btn);color:#0F1254;font:inherit;font-weight:700;font-size:14px;cursor:pointer} body .buddypress-wrap .pf-body input[type=submit]:hover,body #buddypress .pf-body input[type=submit]:hover{background:var(--navy);color:#fff} body .buddypress-wrap .pf-body .standard-form label,body .buddypress-wrap .pf-body legend{font-size:14px;font-weight:600;color:var(--heading)} body .buddypress-wrap .pf-body .standard-form .field-visibility-settings-notoggle,body .buddypress-wrap .pf-body .field-visibility-settings-toggle{font-size:12px;color:var(--muted)} body .buddypress-wrap .pf-body .editfield{margin:0 0 16px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px} body .buddypress-wrap .pf-body .info.bp-feedback,body .buddypress-wrap .pf-body .bp-feedback{border-radius:0 10px 10px 0} body .buddypress-wrap .pf-body .bp-feedback .bp-icon{display:none} body .buddypress-wrap .pf-body table.notifications,body .buddypress-wrap .pf-body table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden} body .buddypress-wrap .pf-body table th,body .buddypress-wrap .pf-body table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:14px} /* The activity stream: compact cards, small avatars, quiet actions. */ body .buddypress-wrap .activity-list.bp-list,body .buddypress-wrap ul.activity-list{background:none!important;border:0!important;padding:0!important;box-shadow:none!important} body .buddypress-wrap .activity-list .activity-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:0 0 12px!important;padding:16px 18px!important;background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:none!important} body .buddypress-wrap .activity-list .activity-item .activity-avatar{float:none!important;margin:0!important;width:auto!important} body .buddypress-wrap .activity-list .activity-item .activity-avatar img{width:40px!important;height:40px!important;border-radius:50%} body .buddypress-wrap .activity-list .activity-item .activity-content{margin:0!important;padding:0!important;min-width:0} body .buddypress-wrap .activity-list .activity-header{margin:0;font-size:14px;color:var(--muted)} body .buddypress-wrap .activity-list .activity-header p{margin:0} body .buddypress-wrap .activity-list .activity-header a{color:var(--heading);font-weight:600} body .buddypress-wrap .activity-list .activity-header .time-since{color:var(--muted);font-weight:400} body .buddypress-wrap .activity-list .activity-inner{margin:8px 0 0;padding:12px 14px;background:var(--soft);border:0;border-radius:10px;font-size:15px;color:var(--body)} body .buddypress-wrap .activity-list .activity-inner:empty{display:none} body .buddypress-wrap .activity-list .activity-item.updated_profile .activity-inner,body .buddypress-wrap .activity-list .activity-item.new_avatar .activity-inner,body .buddypress-wrap .activity-list .activity-item.new_member .activity-inner{display:none} body .buddypress-wrap .activity-list .activity-meta{grid-column:2;margin:8px 0 0;padding:0;background:none;border:0} body .buddypress-wrap .activity-list .activity-meta .generic-button a,body .buddypress-wrap .activity-list .activity-meta .button{padding:4px 10px!important;background:none!important;border:1px solid var(--line)!important;border-radius:9999px!important;color:var(--muted)!important;font-size:12px!important;box-shadow:none!important} body .buddypress-wrap .activity-list .activity-meta .button:hover{color:var(--heading)!important;border-color:var(--field)!important} body .buddypress-wrap #whats-new-form{padding:14px 16px!important;border-radius:14px!important} body .buddypress-wrap .activity-list .activity-comments{grid-column:2;margin:8px 0 0} body .buddypress-wrap .activity-list .activity-item::before,body .buddypress-wrap .activity-list .activity-item::after{display:none!important;content:none!important} body .buddypress-wrap .activity-list .activity-item .activity-content{grid-column:2} body .buddypress-wrap .activity-list .activity-item .activity-avatar{grid-column:1;grid-row:1 / span 3} body .buddypress-wrap .activity-list .activity-inner blockquote{margin:0 0 8px;padding:0 0 0 10px;border-left:3px solid var(--cyan);font-style:normal} body .buddypress-wrap .activity-list .activity-inner blockquote cite{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--teal)} body .buddypress-wrap .activity-list .activity-read-more a,body .buddypress-wrap .activity-list .activity-read-more .button{padding:0!important;border:0!important;background:none!important;color:var(--link)!important;font-size:13px} .hdr-top .acct-menu nav a,:root .hdr-top .acct-menu nav a{color:var(--heading)} /* The selection buttons (two side by side on content pages). */ .quote-tip{display:flex;gap:2px;padding:4px;border-radius:9999px;background:#0F1254;box-shadow:0 10px 24px -8px rgba(15,18,84,.6)} .quote-tip[hidden]{display:none} .quote-tip button{padding:8px 14px;border:0;border-radius:9999px;background:none;color:#fff;font:600 13px/1 "Noto Sans",sans-serif;cursor:pointer;white-space:nowrap} .quote-tip button:hover{background:rgba(255,255,255,.14)} .quote-tip button[data-act="save"]::before{content:"";display:inline-block;width:10px;height:12px;margin-right:6px;vertical-align:-1px;background:var(--cyan);clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%)} .quote-tip:hover{background:#0F1254} .icrr-toast{position:fixed;left:50%;bottom:28px;z-index:120;transform:translateX(-50%);padding:12px 20px;border-radius:9999px;background:#0F1254;color:#fff;font-size:14px;font-weight:600;box-shadow:0 12px 30px -10px rgba(15,18,84,.6);animation:icrr-fade .2s ease} /* Quotes in the binder. */ .binder-quotes{margin:0 0 30px} .binder-quotes h2,.binder-h{font-size:var(--fs-h4,1.1875rem);margin:0 0 14px} .bq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .bq{display:grid;gap:10px;align-content:start;margin:0;padding:18px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:4px 14px 14px 4px} .bq blockquote{margin:0;font-size:15px;line-height:1.6;color:var(--body);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} .bq blockquote::before{content:"“";font-family:Livvic,serif;color:var(--cyan);font-size:1.4em;line-height:0;margin-right:2px;vertical-align:-.25em} .bq figcaption{display:grid;gap:1px;font-size:13px} .bq figcaption a{font-weight:600;color:var(--heading)} .bq figcaption span{color:var(--muted)} .bq-acts{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13px} .bq-acts a{font-weight:600;color:var(--link)} @media (max-width:700px){.bq-list{grid-template-columns:minmax(0,1fr)}} /* Join Us: the research binder showcase (screenshots of the member features). */ .binder-intro{max-width:44rem;margin:0 0 28px;font-size:var(--fs-lead);color:var(--muted)} .feature-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start} .feature-shot{display:grid;gap:10px} .feature-shot figure{margin:0 0 8px;padding:10px;background:var(--soft);border:1px solid var(--line);border-radius:16px} .feature-shot figure img{display:block;width:100%;height:220px;object-fit:cover;object-position:top left;border-radius:10px;background:#fff;box-shadow:0 10px 30px -18px rgba(15,18,84,.45)} .feature-shot h3{font-size:var(--fs-h4,1.1875rem);margin:0} .feature-shot p{margin:0;font-size:15px;color:var(--muted)} @media (max-width:900px){.feature-shots{grid-template-columns:minmax(0,1fr)}.feature-shot figure img{height:auto}} /* Main pages: Add to binder and Discuss as round icons in the header (labels stay for screen readers). */ .entry-actions.is-icons{gap:8px} .entry-actions.is-icons .ea-btn{width:40px;height:40px;padding:0;justify-content:center;border-radius:50%} .entry-actions.is-icons .ea-btn .icon{width:18px;height:18px} .entry-actions.is-icons .ea-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ========================================================================== Activity (BuddyPress): a calm social feed in the community app. ========================================================================== */ body .buddypress-wrap .activity{max-width:780px} /* The post box. */ body .buddypress-wrap #whats-new-form{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;margin:0 0 18px;padding:16px 18px!important;background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:0 10px 30px -24px rgba(15,18,84,.4)!important} body .buddypress-wrap #whats-new-form::before,body .buddypress-wrap #whats-new-form::after{display:none!important} body .buddypress-wrap #whats-new-avatar{float:none!important;margin:0!important} body .buddypress-wrap #whats-new-avatar img{width:42px!important;height:42px!important;border-radius:50%} body .buddypress-wrap #whats-new-content{margin:0!important;padding:0!important;min-width:0} body .buddypress-wrap #whats-new-textarea{border:0!important;box-shadow:none!important;padding:0!important;background:none!important} body .buddypress-wrap #whats-new-form #whats-new{width:100%;min-height:44px;padding:11px 16px!important;font:inherit;font-size:15px;color:var(--ink);background:var(--soft)!important;border:1px solid transparent!important;border-radius:22px!important;resize:none;transition:border-color .2s,background .2s,min-height .2s} body .buddypress-wrap #whats-new-form #whats-new:focus,body .buddypress-wrap #whats-new-form.focus-in #whats-new{min-height:96px;background:var(--surface)!important;border-color:var(--cyan)!important;border-radius:14px!important;box-shadow:0 0 0 4px rgba(0,190,213,.15)!important;outline:0} body .buddypress-wrap #whats-new-options{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:10px;padding:0!important;background:none!important;border:0!important} body .buddypress-wrap #whats-new-submit{margin:0!important;float:none!important} body .buddypress-wrap #whats-new-submit input[type=submit]{padding:10px 20px!important;border:0!important;border-radius:0!important;background:var(--aqua-btn)!important;color:#0F1254!important;font:inherit;font-weight:700;font-size:14px;cursor:pointer} body .buddypress-wrap #whats-new-submit input[type=submit]:hover{background:var(--navy)!important;color:#fff!important} body .buddypress-wrap #whats-new-submit input[type=reset]{background:none!important;border:0!important;color:var(--muted)!important;font:inherit;font-size:14px;cursor:pointer} body .buddypress-wrap #whats-new-post-in-box{font-size:13px;color:var(--muted)} /* Tabs and filters on one line. */ body .buddypress-wrap .activity-type-navs{margin:0!important} body .buddypress-wrap .activity-type-navs ul{display:flex!important;flex-wrap:wrap;gap:6px!important;border:0!important} body .buddypress-wrap .activity-type-navs ul li a{padding:7px 15px!important;border:1px solid var(--line)!important;border-radius:9999px!important;background:var(--surface)!important;color:var(--heading)!important;font-size:14px!important;margin:0!important} body .buddypress-wrap .activity-type-navs ul li.selected a{background:#0F1254!important;border-color:#0F1254!important;color:#fff!important} body .buddypress-wrap .activity-type-navs ul li .count:empty{display:none} body .buddypress-wrap .subnav-filters{display:flex!important;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 18px!important;padding:0!important} body .buddypress-wrap .subnav-filters .feed{display:none} body .buddypress-wrap .subnav-filters .subnav-search{display:flex;flex:1;min-width:200px} body .buddypress-wrap .subnav-filters .dir-search{flex:1;margin:0!important;float:none!important} body .buddypress-wrap .subnav-filters .bp-dir-search-form{display:flex;align-items:center;width:100%;border:1px solid var(--field)!important;border-radius:9999px!important;background:var(--surface)!important;overflow:hidden} body .buddypress-wrap .subnav-filters .bp-dir-search-form input[type=search]{flex:1;padding:9px 16px!important;border:0!important;background:none!important;font-size:14px;box-shadow:none!important} body .buddypress-wrap .subnav-filters .bp-dir-search-form button{padding:0 14px!important;border:0!important;background:none!important;color:var(--muted)!important} body .buddypress-wrap .subnav-filters .component-filters{margin:0!important;float:none!important} body .buddypress-wrap .subnav-filters .select-wrap{border:1px solid var(--field)!important;border-radius:9999px!important;background:var(--surface)!important;overflow:hidden} body .buddypress-wrap .subnav-filters .select-wrap select{padding:9px 34px 9px 16px!important;border:0!important;background:none!important;font:inherit;font-size:14px;color:var(--heading)} body .buddypress-wrap .subnav-filters .select-wrap .select-arrow{right:14px} /* Each item: who, what, when; the content in a soft box; quiet actions with labels. */ body .buddypress-wrap .activity-list .activity-item{padding:18px 20px!important;border-radius:16px!important} body .buddypress-wrap .activity-list .activity-header{font-size:14px;line-height:1.5} body .buddypress-wrap .activity-list .activity-header a[href*="/community/"]{color:var(--link)} body .buddypress-wrap .activity-list .activity-header .activity-time-since{display:block;margin-top:1px;font-size:12px} body .buddypress-wrap .activity-list .activity-header .activity-time-since::before{content:none} body .buddypress-wrap .activity-list .activity-inner{margin-top:10px;padding:14px 16px;border-radius:12px} body .buddypress-wrap .activity-list .activity-inner p{margin:0 0 8px} body .buddypress-wrap .activity-list .activity-inner p:last-child{margin:0} body .buddypress-wrap .activity-list .activity-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px!important;background:none!important} body .buddypress-wrap .activity-list .activity-meta .generic-button{margin:0!important} body .buddypress-wrap .activity-list .activity-meta .button{display:inline-flex!important;align-items:center;gap:6px;padding:5px 12px!important;line-height:1.4} body .buddypress-wrap .activity-list .activity-meta .button::before{font-size:14px!important;margin:0!important} body .buddypress-wrap .activity-list .activity-meta .button .bp-screen-reader-text{position:static!important;width:auto!important;height:auto!important;clip:auto!important;clip-path:none!important;overflow:visible!important;margin:0!important;font-size:12px;font-weight:600} body .buddypress-wrap .activity-list .activity-meta .button .comment-count{font-size:12px;font-weight:700} body .buddypress-wrap .activity-list .activity-meta .button.delete-activity,body .buddypress-wrap .activity-list .activity-meta .button.delete-activity-single{margin-left:auto!important} body .buddypress-wrap .activity-list .activity-meta .button.fav::before,body .buddypress-wrap .activity-list .activity-meta .button.unfav::before{color:var(--purple)} body .buddypress-wrap .activity-list .activity-comments ul{margin:0;padding:0} body .buddypress-wrap .activity-list .activity-comments li{padding:10px 0;border-top:1px solid var(--line)} body .buddypress-wrap .load-more,body .buddypress-wrap .load-newest{margin:6px 0 0;text-align:center;background:none!important;border:0!important} body .buddypress-wrap .load-more a,body .buddypress-wrap .load-newest a{display:inline-flex;padding:9px 18px;border:1px solid var(--field);border-radius:9999px;color:var(--heading);font-weight:600;font-size:14px} body .buddypress-wrap .activity-update-form,body .buddypress-wrap #bp-nouveau-activity-form{margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important} body.activity.directory .buddypress-wrap,body.bp-user.activity .pf-body{max-width:780px} body .buddypress-wrap .activity{max-width:none} body .buddypress-wrap .activity-list .activity-meta .generic-button:has(.delete-activity),body .buddypress-wrap .activity-list .activity-meta .generic-button:has(.delete-activity-single){margin-left:auto!important} body .buddypress-wrap .activity-list .activity-inner{background:var(--soft)!important;color:var(--body)!important} body .buddypress-wrap .activity-type-navs,body .buddypress-wrap .activity-type-navs ul{background:none!important;box-shadow:none!important;border:0!important} body .buddypress-wrap .activity-list .activity-meta .button{color:var(--muted)!important} body .buddypress-wrap .activity-list .activity-inner blockquote{background:none!important;color:var(--body)!important;box-shadow:none!important} .ui-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .qa-ic .ui-icon{width:19px;height:19px} /* ===== Binder tools, notes and remove warning (inc/community.php) ===== */ :root{--danger:#b42318;--danger-50:#fdecea} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--danger:#ff9b8f;--danger-50:#3a1830}} :root[data-theme="dark"]{--danger:#ff9b8f;--danger-50:#3a1830} .screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .bn-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 26px;padding:10px 12px 10px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px} .bn-all{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--heading);cursor:pointer} .bn-status{font-size:13px;color:var(--muted)} .buddypress .buddypress-wrap .bn-tools{display:flex;gap:8px;margin-left:auto} .buddypress .buddypress-wrap .bn-tool{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--line);border-radius:9999px;background:var(--surface);color:var(--heading);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s} .buddypress .buddypress-wrap .bn-tool:hover,.buddypress .buddypress-wrap .bn-tool[aria-expanded="true"]{border-color:var(--field);background:var(--soft)} .buddypress .buddypress-wrap .bn-tool .ui-icon{width:16px;height:16px} .bn-export{position:relative} .bn-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:grid;min-width:200px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -16px rgba(15,18,84,.35)} .bn-menu[hidden]{display:none} .buddypress .buddypress-wrap .bn-menu button{padding:9px 12px;border:0;border-radius:8px;background:none;color:var(--body);font:inherit;font-size:14px;text-align:left;cursor:pointer} .buddypress .buddypress-wrap .bn-menu button:hover{background:var(--soft);color:var(--heading)} .binder input[type="checkbox"]{width:17px;height:17px;margin:0;accent-color:var(--teal);cursor:pointer} .binder-h{display:flex;align-items:center;gap:10px} .binder-h span{min-width:24px;padding:2px 8px;border-radius:9999px;background:var(--soft);border:1px solid var(--line);font:600 12px/1.4 "Noto Sans",sans-serif;color:var(--muted);text-align:center} .binder-entries{margin-top:8px} .bn-none{color:var(--muted);font-size:15px} .bn-item{position:relative;transition:box-shadow .2s,border-color .2s,opacity .2s} .bn-item.is-checked{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)} .bn-item.is-removing{opacity:.4;pointer-events:none} .bn-item.is-new{animation:bn-flash 2.4s ease-out} @keyframes bn-flash{0%,35%{box-shadow:0 0 0 3px var(--cyan)}100%{box-shadow:0 0 0 0 transparent}} .bn-check{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;cursor:pointer} .bn-check:hover{background:var(--soft)} .bq.bn-item{gap:12px} .bq.bn-item .bn-body,.saved-card.bn-item .bn-body{display:flex;flex-direction:column;gap:8px;padding-right:30px} .bn-src{display:grid;gap:1px;margin:0;font-size:13px} .bn-src a{font-weight:600;color:var(--heading)} .bn-src span{color:var(--muted)} .bn-note{margin:0;padding:10px 12px;border-radius:10px;background:var(--soft);border-left:3px solid var(--purple-text);font-size:14px;line-height:1.55;color:var(--body)} .bn-note[hidden]{display:none} .bn-note b{display:block;margin-bottom:2px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--purple-text)} .bn-note p{margin:0!important;font-size:14px!important;color:var(--body)!important} .bn-note-form{display:grid;gap:8px} .bn-note-form[hidden]{display:none} .bn-note-form textarea,.pf-bio-form textarea{width:100%;min-height:84px;padding:10px 12px;border:1px solid var(--field);border-radius:10px;background:var(--page);color:var(--body);font:inherit;font-size:14px;line-height:1.55;resize:vertical} .bn-note-form textarea:focus,.pf-bio-form textarea:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent} .bn-note-form > div,.pf-bio-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px} .buddypress .buddypress-wrap .bn-note-cancel,.buddypress .buddypress-wrap .pf-bio-cancel,.buddypress .buddypress-wrap .bn-keep{padding:8px 14px;border:1px solid var(--line);border-radius:9999px;background:var(--surface);color:var(--heading);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .buddypress .buddypress-wrap .bn-note-save,.buddypress .buddypress-wrap .pf-bio-save{padding:8px 16px;border:0;border-radius:9999px;background:var(--heading);color:var(--page);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .buddypress .buddypress-wrap .bn-note-cancel:hover,.buddypress .buddypress-wrap .pf-bio-cancel:hover,.buddypress .buddypress-wrap .bn-keep:hover{background:var(--soft)} .buddypress .buddypress-wrap .bn-acts{display:flex;align-items:center;gap:4px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)} .bn-gap{flex:1} .buddypress .buddypress-wrap .bn-act{display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:9999px;background:none;color:var(--muted);cursor:pointer;transition:background .15s,color .15s} .buddypress .buddypress-wrap .bn-act .ui-icon{width:18px;height:18px} .buddypress .buddypress-wrap .bn-act:hover,.buddypress .buddypress-wrap .bn-act:focus-visible{background:var(--soft);color:var(--heading)} .buddypress .buddypress-wrap .bn-act.is-danger:hover,.buddypress .buddypress-wrap .bn-act.is-danger:focus-visible{background:var(--danger-50);color:var(--danger)} .buddypress .buddypress-wrap .bn-act[data-act="note"]{color:var(--purple-text)} .bn-more{margin-top:14px} .bn-more summary b{font-size:1rem} .bn-more > div{padding:0 16px 16px} .bq-list + .bn-more,.saved-list + .bn-more{margin-top:14px} .bn-more .saved-list{margin-top:0} .bn-confirm{width:min(440px,calc(100vw - 32px));padding:26px 26px 22px;border:0;border-top:4px solid var(--danger);border-radius:16px;background:var(--surface);color:var(--body);box-shadow:0 30px 70px -20px rgba(15,18,84,.5)} .bn-confirm[open]{position:fixed;inset:0;margin:auto;height:fit-content} .bn-confirm::backdrop{background:rgba(11,13,42,.6)} .bn-confirm h2{margin:0 0 8px;font-size:1.25rem;color:var(--heading)} .bn-confirm p{margin:0 0 22px;font-size:15px;line-height:1.55;color:var(--body)} .bn-confirm > div{display:flex;justify-content:flex-end;gap:10px} .buddypress .buddypress-wrap .bn-danger{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border:0;border-radius:9999px;background:var(--danger);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer} .buddypress .buddypress-wrap .bn-danger .ui-icon{width:16px;height:16px} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .bn-danger{color:#2a0d12}} :root[data-theme="dark"] .bn-danger{color:#2a0d12} @media (max-width:600px){.bn-tools{margin-left:0;width:100%}.buddypress .buddypress-wrap .bn-tool{flex:1;justify-content:center}.bn-export{flex:1;display:flex}.buddypress .buddypress-wrap .bn-act{width:38px;height:38px}} /* The toast's "View" link */ .icrr-toast{display:flex;align-items:center;gap:14px} .icrr-toast a{display:inline-flex;align-items:center;gap:6px;padding-left:14px;border-left:1px solid rgba(255,255,255,.3);color:var(--aqua-btn);font-weight:700;text-decoration:none} .icrr-toast a:hover{text-decoration:underline} .icrr-toast .ui-icon{width:15px;height:15px} /* ===== Short bio on your own profile (inc/profile.php) ===== */ .pf-hello{align-items:flex-start} .pf-bio-edit{display:grid;gap:6px;max-width:40rem;margin-top:8px} .pf-bio-text p{margin:0 0 4px!important;font-size:15px;line-height:1.55;color:var(--body)} .pf-bio-text:empty{display:none} .buddypress .buddypress-wrap .pf-bio-btn{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 10px;border:1px dashed var(--field);border-radius:9999px;background:none;color:var(--purple-text);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .buddypress .buddypress-wrap .pf-bio-btn:hover{border-style:solid;background:var(--soft)} .buddypress .buddypress-wrap .pf-bio-btn .ui-icon{width:15px;height:15px} .buddypress .buddypress-wrap .pf-bio-btn[hidden],.pf-bio-text[hidden],.pf-bio-form[hidden]{display:none} .pf-bio-form{display:grid;gap:8px;width:min(40rem,100%)} .pf-bio-count{margin-right:auto;font-size:12px;color:var(--muted)} /* ===== Simple editor for forum replies (assets/js/icrr.js) ===== */ .rte{border:1px solid var(--field);border-radius:12px;background:var(--page);overflow:hidden} .rte:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 30%,transparent)} .rte-bar{display:flex;flex-wrap:wrap;gap:2px;padding:6px;border-bottom:1px solid var(--line);background:var(--soft)} .rte-bar button{display:grid;place-items:center;width:34px;height:32px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer} .rte-bar button:hover{background:var(--surface);color:var(--heading)} .rte-bar button[aria-pressed="true"]{background:var(--surface);color:var(--heading);box-shadow:inset 0 0 0 1px var(--line)} .rte-bar button:nth-child(3){margin-right:8px} .rte-bar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .rte-area{min-height:150px;max-height:60vh;overflow:auto;padding:14px 16px;color:var(--body);font-size:16px;line-height:1.6;outline:none} .rte-area.is-empty::before{content:attr(data-placeholder);position:absolute;color:var(--muted);pointer-events:none} .rte-area p{margin:0 0 .8em} .rte-area ul,.rte-area ol{margin:0 0 .8em;padding-left:1.4em} .rte-area blockquote{margin:0 0 .8em;padding:8px 14px;border-left:3px solid var(--cyan);background:var(--soft);border-radius:0 8px 8px 0} .rte-area a{color:var(--link);text-decoration:underline} /* ===== Search boxes in the members' area and forum: the site's search icon on the left, as in the community bar ===== */ body .icrr-search-pill,.bbp-search-form .icrr-search-pill{display:flex!important;align-items:center;width:100%;margin:0;border:1px solid var(--field)!important;border-radius:9999px!important;background:var(--surface)!important;overflow:hidden;box-shadow:none!important} body .icrr-search-pill input[type=search]{flex:1;min-width:0;padding:10px 16px 10px 4px!important;border:0!important;border-radius:0!important;background:none!important;color:var(--body);font:inherit;font-size:14px;box-shadow:none!important;outline:none} body .icrr-search-pill button{order:-1;flex:none;width:auto!important;min-width:0!important;display:grid;place-items:center;height:auto;padding:0 6px 0 14px!important;border:0!important;background:none!important;color:var(--muted)!important;cursor:pointer;box-shadow:none!important} body .icrr-search-pill button:hover{color:var(--heading)!important} body .icrr-search-pill button::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--icrr-search-icon) center/contain no-repeat;mask:var(--icrr-search-icon) center/contain no-repeat} body .icrr-search-pill{--icrr-search-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")} body .icrr-search-pill:focus-within{border-color:var(--cyan)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 25%,transparent)!important} .bbp-search-form{margin:0 0 18px} .pf-hello > div{flex:1;min-width:0} /* Blue and grey tags in dark mode (the light versions use a pale background) */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tag-blue{background:#1f2466!important;color:#c3c8ff!important} :root:not([data-theme="light"]) .tag-grey{background:#232845!important;color:#cfd2ee!important;box-shadow:inset 0 0 0 1px var(--line)} } :root[data-theme="dark"] .tag-blue{background:#1f2466!important;color:#c3c8ff!important} :root[data-theme="dark"] .tag-grey{background:#232845!important;color:#cfd2ee!important;box-shadow:inset 0 0 0 1px var(--line)} /* Phones: the community bar's links scroll sideways, but its accent link ("+ Start a discussion") stays in view at the right */ @media (max-width:960px){ .cbar-links li:has(> .cbar-accent){position:sticky;right:0;margin-left:auto;padding-left:26px;background:linear-gradient(90deg,transparent,var(--navy) 22px)} } @media (max-width:600px){.cbar-links{gap:16px}.cbar-links a{font-size:13px}} /* ===== ICRR icons in dark mode: light line work over a brighter wash (the "on navy" version, see the icons page) ===== */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .icrr-icon,:root:not([data-theme="light"]) .ic{color:#EEF0FF;--ic-wash-o:.5} :root:not([data-theme="light"]) .icrr-icon.is-wash-purple,:root:not([data-theme="light"]) .ic.purple{--ic-wash:#9D8CFF;--ic-wash-o:.5} } :root[data-theme="dark"] .icrr-icon,:root[data-theme="dark"] .ic{color:#EEF0FF;--ic-wash-o:.5} :root[data-theme="dark"] .icrr-icon.is-wash-purple,:root[data-theme="dark"] .ic.purple{--ic-wash:#9D8CFF;--ic-wash-o:.5} /* ===== Your photo: camera on your picture, and the Edit profile screen (inc/profile.php) ===== */ .pf-photo{position:relative;display:inline-grid;gap:14px;line-height:0} .buddypress .buddypress-wrap .pf-photo-btn,.pf-photo-btn{position:relative;display:block;width:auto;height:auto;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;line-height:0} .pf-photo-btn img{display:block;border-radius:50%;object-fit:cover} .pf-photo-cam{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--heading);color:var(--page);box-shadow:0 0 0 3px var(--page);transition:transform .15s} .pf-photo-cam .ui-icon{width:15px;height:15px} .pf-photo-btn:hover .pf-photo-cam,.pf-photo-btn:focus-visible .pf-photo-cam{transform:scale(1.1)} .pf-photo-btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px} .pf-photo.is-busy .pf-photo-btn::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(15,18,84,.45) center/22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E")} .pf-edit-photo .pf-photo{grid-template-columns:auto 1fr;align-items:center;gap:20px} .pf-edit-photo .pf-photo-btn img{width:96px;height:96px} .pf-photo-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;line-height:1.4} .pf-photo-acts small{flex-basis:100%;font-size:13px;color:var(--muted)} .buddypress .buddypress-wrap .pf-photo-change,.buddypress .buddypress-wrap .pf-photo-remove{padding:8px 16px;border:1px solid var(--line);border-radius:9999px;background:var(--surface);color:var(--heading);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .buddypress .buddypress-wrap .pf-photo-change{background:var(--heading);border-color:var(--heading);color:var(--page)} .buddypress .buddypress-wrap .pf-photo-remove:hover{color:var(--danger);border-color:var(--danger)} .pf-photo-remove[hidden]{display:none} /* Edit profile: photo, name and bio in one calm card; no sub-tabs. */ body.bp-user.xprofile .pf-body #subnav,body .buddypress-wrap .pf-body .profile.edit > .screen-heading,body .buddypress-wrap .pf-body .profile-group-title{display:none!important} body .buddypress-wrap .pf-body .profile.edit{max-width:40rem} .pf-edit-photo,body .buddypress-wrap .pf-body #profile-edit-form{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:16px} .pf-edit-photo{margin:0 0 16px} .pf-edit-photo h3{margin:0 0 14px;font:600 15px/1.3 "Noto Sans",sans-serif;color:var(--heading)} body .buddypress-wrap .pf-body #profile-edit-form .editfield{margin:0 0 20px;padding:0;background:none;border:0} body .buddypress-wrap .pf-body #profile-edit-form fieldset{margin:0;padding:0;border:0} body .buddypress-wrap .pf-body #profile-edit-form legend{margin:0 0 6px;padding:0;font:600 15px/1.3 "Noto Sans",sans-serif;color:var(--heading)} body .buddypress-wrap .pf-body #profile-edit-form .bp-required-field-label{font-weight:400;font-size:13px;color:var(--muted)} body .buddypress-wrap .pf-body #profile-edit-form input[type=text],body .buddypress-wrap .pf-body #profile-edit-form textarea{width:100%;padding:11px 14px;border:1px solid var(--field);border-radius:10px;background:var(--page);color:var(--body);font:inherit;font-size:15px;line-height:1.55;box-shadow:none} body .buddypress-wrap .pf-body #profile-edit-form input[type=text]:focus,body .buddypress-wrap .pf-body #profile-edit-form textarea:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent} body .buddypress-wrap .pf-body #profile-edit-form .description{margin:6px 0 0;padding:0;background:none;border:0;font-size:13px;color:var(--muted)} body .buddypress-wrap .pf-body #profile-edit-form .field-visibility-settings-notoggle{margin:4px 0 0;font-size:12px;color:var(--muted)} body .buddypress-wrap .pf-body #profile-edit-form .submit{margin:4px 0 0;padding:0} body .buddypress-wrap .pf-body #profile-edit-form input[type=submit]{padding:12px 22px;border:0;border-radius:9999px;background:var(--heading);color:var(--page);font:inherit;font-size:14px;font-weight:600;cursor:pointer} body .buddypress-wrap .pf-body #profile-edit-form input[type=submit]:hover{background:var(--link)} /* ===== Images in forum posts and the editor ===== */ .ff-post-body img,.rte-area img{display:block;max-width:100%;height:auto;max-height:520px;width:auto;margin:10px 0;border-radius:12px;border:1px solid var(--line)} .rte-area img{max-height:260px} .rte-status{align-self:center;margin-left:auto;padding-right:6px;font-size:12px;color:var(--muted)} .rte-bar button[data-cmd="image"]{margin-left:8px} .pf-hello > .pf-avatar{flex:none} .pf-photo > .pf-photo-btn{justify-self:start} .pf-hello .pf-photo-btn img{width:64px;height:64px} .pf-hello .pf-photo-cam{width:24px;height:24px;right:-4px;bottom:-4px} /* The community bar is just the name and search now: on phones keep the name (the search moves to the header). */ @media (max-width:960px){.cbar-brand{display:inline-flex}.cbar-row{min-height:44px}} /* Lead paragraph in articles and guides (paragraph style "Lead") */ .prose .is-style-lead,.wp-block-post-content > .is-style-lead{font-size:var(--fs-lead);line-height:1.6;color:var(--heading)} .bn-wide .entry-actions{justify-content:center} .callout p:not(.eyebrow) + p{margin-top:12px!important} .bn-wide .bw-intro .lead{max-width:none!important} /* Dark mode: news banners, image placeholders, the pricing switch and the forum hero search had light grounds */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .bn-wide{background:linear-gradient(180deg,#10143f 0,var(--page) 420px)} :root:not([data-theme="light"]) :is(.icrr-ph a,.icrr-ph-panel){background:linear-gradient(135deg,#123a4a,#1f2466)} :root:not([data-theme="light"]) :is(.pricing-switch,.fhero-search){background:var(--surface)} } :root[data-theme="dark"] .bn-wide{background:linear-gradient(180deg,#10143f 0,var(--page) 420px)} :root[data-theme="dark"] :is(.icrr-ph a,.icrr-ph-panel){background:linear-gradient(135deg,#123a4a,#1f2466)} :root[data-theme="dark"] :is(.pricing-switch,.fhero-search){background:var(--surface)} /* ===== Binder (inc/community.php): an open ring binder with divider tabs, as a list or as index cards ===== */ :root{--bd-c0:#00BED5;--bd-c1:#745BF8;--bd-c2:#F2A541;--bd-c3:#2BB673;--bd-c4:#E85D75;--bd-c5:#1C2098;--bd-desk:#f3f5fa;--bd-ring:#c6cbe0;--bd-sticky:#FFF4CC;--bd-sticky-ink:#5c4400} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bd-c5:#9ea4ff;--bd-desk:#0f1236;--bd-ring:#3a3f80;--bd-sticky:#3b3417;--bd-sticky-ink:#f5e3a3}} :root[data-theme="dark"]{--bd-c5:#9ea4ff;--bd-desk:#0f1236;--bd-ring:#3a3f80;--bd-sticky:#3b3417;--bd-sticky-ink:#f5e3a3} .bd{--sec:var(--heading);display:grid;grid-template-columns:200px minmax(0,1fr);align-items:start;background:var(--bd-desk);border-radius:22px;padding:16px 16px 16px 12px} .bd:not(.is-own){grid-template-columns:minmax(0,1fr);padding:12px} .bd-tabs{display:grid;gap:4px;padding:8px 0} .bd-tabs-label{margin:10px 0 2px!important;padding:0 12px;font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)!important} .bd-sections{display:grid;gap:4px} .buddypress .buddypress-wrap .bd-tab{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:0;padding:9px 12px;border:0;border-radius:12px 0 0 12px;background:transparent;box-shadow:none;text-align:left;color:var(--body);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s,transform .15s} .bd-sw{width:9px;height:20px;border-radius:3px;background:var(--c,var(--field));flex:none} .bd-tab-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bd-n{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .buddypress .buddypress-wrap .bd-tab:hover{background:color-mix(in srgb,var(--surface) 70%,transparent)} .buddypress .buddypress-wrap .bd-tab[aria-selected="true"]{background:var(--surface);color:var(--heading);font-weight:600;box-shadow:-6px 4px 16px -12px rgba(15,18,84,.35)} .bd-tab[aria-selected="true"]::after{content:"";position:absolute;right:-2px;top:0;bottom:0;width:6px;background:var(--surface)} .buddypress .buddypress-wrap .bd-tab.is-drop{background:color-mix(in srgb,var(--c) 22%,var(--surface));transform:translateX(4px)} .buddypress .buddypress-wrap .bd-add{color:var(--link);font-weight:600} .bd-add .bd-sw{background:none;border:2px dashed var(--field)} .bd-new{display:flex;gap:6px;padding:4px 6px 4px 12px} .bd-new input,.bd-rename-form input{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--field);border-radius:8px;background:var(--surface);color:var(--body);font:inherit;font-size:14px} .buddypress .buddypress-wrap .bd-new button,.buddypress .buddypress-wrap .bd-rename-form button{padding:7px 12px;border:0;border-radius:8px;background:var(--heading);color:var(--page);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .bd-rename-form{display:inline-flex;gap:6px} .bd-sheet{position:relative;min-height:420px;background:var(--surface);border-radius:6px 16px 16px 6px;box-shadow:0 1px 2px rgba(15,18,84,.06),0 14px 34px -18px rgba(15,18,84,.25);padding:20px 22px 24px 60px} .bd-rings{position:absolute;left:16px;top:0;bottom:0;display:flex;flex-direction:column;justify-content:space-around;padding:36px 0} .bd-rings i{display:block;width:20px;height:20px;border-radius:50%;background:var(--bd-desk);box-shadow:inset 0 2px 3px rgba(15,18,84,.18),0 0 0 3px var(--bd-ring)} .bd-sheet::before{content:"";position:absolute;left:48px;top:16px;bottom:16px;border-left:2px solid color-mix(in srgb,var(--sec) 55%,transparent)} .bd-sheet-head{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)} .bd-sheet-head h2{display:flex;align-items:center;gap:10px;margin:0!important;font-size:1.3rem!important} .bd-sheet-head h2 .bd-sw{--c:var(--sec);height:24px;width:11px} .bd-count{font-size:13px;color:var(--muted)} .bd-sec-tools{display:flex;gap:4px} .bd-sec-tools[hidden]{display:none} .buddypress .buddypress-wrap .bd-sec-tools button{padding:4px 10px;border:0;border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer} .buddypress .buddypress-wrap .bd-sec-tools button:hover{background:var(--bd-desk);color:var(--heading)} .buddypress .buddypress-wrap .bd-sec-tools .bd-delete-sec:hover{color:var(--danger)} .bd-tools{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto;align-items:center} .bd-search{display:flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--field);border-radius:999px;background:var(--surface);color:var(--muted)} .bd-search .ui-icon{width:15px;height:15px} .buddypress .buddypress-wrap .bd-search input{width:150px;padding:2px 0;border:0;background:none;box-shadow:none;outline:none;font:inherit;font-size:13px;color:var(--body)} .bd-seg{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--bd-desk)} .buddypress .buddypress-wrap .bd-seg button{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:0;border-radius:999px;background:none;box-shadow:none;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .buddypress .buddypress-wrap .bd-seg button[aria-pressed="true"]{background:var(--surface);color:var(--heading);box-shadow:0 1px 3px rgba(15,18,84,.12)} .bd-seg .ui-icon{width:15px;height:15px} .bd-export{position:relative} .buddypress .buddypress-wrap .bd-tool{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--heading);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .bd-tool .ui-icon{width:15px;height:15px} .bd-menu,.bd-item-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:grid;min-width:210px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 40px -16px rgba(15,18,84,.35)} .bd-menu[hidden]{display:none} .buddypress .buddypress-wrap :is(.bd-menu,.bd-item-menu) :is(button,a){display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;box-shadow:none;text-align:left;color:var(--body);font:inherit;font-size:14px;font-weight:400;text-decoration:none;cursor:pointer} .buddypress .buddypress-wrap :is(.bd-menu,.bd-item-menu) :is(button,a):hover{background:var(--bd-desk);color:var(--heading)} .buddypress .buddypress-wrap .bd-item-menu .is-danger{color:var(--danger)} .bd-item-menu .ui-icon{width:16px;height:16px} .bd-item-menu hr{margin:4px 2px;border:0;border-top:1px solid var(--line)} .bd-item-menu p{margin:0!important;padding:4px 10px 2px;font-size:11px!important;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted)!important} .bd-item-menu i,.bd-sec-label i{display:inline-block;width:9px;height:9px;border-radius:2px;flex:none} .bd-sec-label i{margin-right:4px;vertical-align:0} .bd-chips{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0 4px} .buddypress .buddypress-wrap .bd-chips button{padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:none;box-shadow:none;color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer} .buddypress .buddypress-wrap .bd-chips button[aria-pressed="true"]{background:var(--heading);border-color:var(--heading);color:var(--page)} .bd-empty{margin:0!important;padding:40px 12px;text-align:center;color:var(--muted)!important} /* Items: list rows */ .bd-items.is-list{display:grid;margin-top:4px} .bd-item{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 6px;border-bottom:1px solid var(--line);border-radius:8px;cursor:pointer;transition:background .15s,opacity .2s} .bd-item[hidden]{display:none} .bd.is-own .bd-item{cursor:grab} .bd-item:hover{background:color-mix(in srgb,var(--bd-desk) 60%,transparent)} .bd-item.is-dragging{opacity:.4} .bd-item.is-removing{opacity:.4;pointer-events:none} .bd-item.is-new{animation:bn-flash 2.4s ease-out} .bd-kind{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--cyan-50);color:var(--teal)} .bd-item.is-quote .bd-kind{background:var(--purple-50);color:var(--purple-text)} .bd-kind .ui-icon{width:16px;height:16px} .bd-main{min-width:0} .bd-head{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline} .bd-title{font-weight:600;color:var(--heading)!important;text-decoration:none} .bd-title:hover{text-decoration:underline} .bd-quote{margin:0!important;font-family:"Noto Serif",Georgia,serif;font-style:italic;font-size:15px!important;color:var(--body)!important;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;min-width:0;flex:1 1 0} .bd-item.is-open .bd-quote{-webkit-line-clamp:unset} .bd-pill{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;background:var(--bd-sticky);color:var(--bd-sticky-ink);font-size:11.5px;font-weight:600;flex:none} .bd-pill[hidden]{display:none} .bd-pill .ui-icon{width:12px;height:12px} .bd-meta{font-size:12.5px;color:var(--muted)} .bd-meta a{color:var(--muted);text-decoration:none} .bd-meta a:hover{color:var(--link);text-decoration:underline} .bd-excerpt{display:none;margin:6px 0 0!important;max-width:62ch;font-size:14px!important;color:var(--body)!important} .bd-item.is-open .bd-excerpt{display:block} .bd-open{display:none} .bd-item.is-open .bd-open{display:block} .bd-note{margin-top:8px;max-width:52ch;padding:8px 12px;border-radius:4px 10px 10px 10px;background:var(--bd-sticky);color:var(--bd-sticky-ink);font-size:13.5px;line-height:1.5;box-shadow:0 1px 0 rgba(0,0,0,.06)} .bd-note[hidden]{display:none} .bd-note-form{display:grid;gap:8px;margin-top:8px;max-width:52ch} .bd-note-form[hidden]{display:none} .bd-note-form textarea{width:100%;min-height:80px;padding:10px 12px;border:1px solid var(--field);border-radius:10px;background:var(--page);color:var(--body);font:inherit;font-size:14px;line-height:1.55;resize:vertical} .bd-note-form > div{display:flex;justify-content:flex-end;gap:8px} .buddypress .buddypress-wrap .bd-note-cancel{padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--heading);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .buddypress .buddypress-wrap .bd-note-save{padding:7px 16px;border:0;border-radius:999px;background:var(--heading);color:var(--page);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .bd-more{position:relative;display:flex;align-items:center;gap:2px} .buddypress .buddypress-wrap .bd-bin,.bd-bin{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:999px;background:none;box-shadow:none;color:var(--muted);cursor:pointer} .buddypress .buddypress-wrap .bd-bin:hover,.buddypress .buddypress-wrap .bd-bin:focus-visible{background:var(--danger-50);color:var(--danger)} .bd-bin .ui-icon{width:17px;height:17px} .buddypress .buddypress-wrap .bd-more-btn,.bd-more-btn{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:999px;background:none;box-shadow:none;color:var(--muted);cursor:pointer} .buddypress .buddypress-wrap .bd-more-btn:hover,.buddypress .buddypress-wrap .bd-more-btn[aria-expanded="true"]{background:var(--bd-desk);color:var(--heading)} .bd-more-btn .ui-icon{width:18px;height:18px} .bd-item-menu{top:36px} /* Items: index cards */ .bd-items.is-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:10px} .bd-items.is-cards .bd-item{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto 1fr;align-content:start;gap:10px;padding:14px 12px 12px 14px;border:1px solid var(--line);border-top:3px solid var(--c,var(--field));border-radius:6px 6px 12px 12px;background:var(--surface);min-height:150px} .bd-items.is-cards .bd-item:hover{background:var(--surface);box-shadow:0 12px 28px -18px rgba(15,18,84,.35)} .bd-items.is-cards .bd-main{grid-column:1/-1;grid-row:2;display:flex;flex-direction:column;gap:6px} .bd-items.is-cards .bd-kind{width:24px;height:24px} .bd-items.is-cards .bd-more{grid-column:3;grid-row:1} .bd-items.is-cards .bd-quote{-webkit-line-clamp:4;font-size:14px!important;line-height:1.55} .bd-items.is-cards .bd-excerpt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px!important;color:var(--muted)!important;margin:0!important} .bd-items.is-cards .bd-item.is-open .bd-excerpt{-webkit-line-clamp:unset} .bd-items.is-cards .bd-head{flex-direction:column;gap:6px} .bd-items.is-cards .bd-meta{margin-top:auto} @media (max-width:760px){ .bd{grid-template-columns:minmax(0,1fr);padding:10px} .bd-tabs{display:flex;overflow-x:auto;gap:4px;padding:0;scrollbar-width:none} .bd-tabs-label{display:none} .bd-sections{display:contents} .buddypress .buddypress-wrap .bd-tab{flex:none;width:auto;border-radius:12px 12px 0 0;padding:8px 12px} .bd-tab[aria-selected="true"]::after{left:0;right:0;top:auto;bottom:-2px;width:auto;height:6px} .bd-new{flex:none} .bd-sheet{padding:16px 12px 18px 40px;border-radius:0 0 16px 16px} .bd-rings{left:9px} .bd-rings i{width:15px;height:15px} .bd-sheet::before{left:31px} .bd-tools{margin-left:0;width:100%} .bd-search{flex:1} .buddypress .buddypress-wrap .bd-search input{width:100%} } .bd-items.is-cards .bd-quote{flex:none} .bd-tab-name{white-space:normal;line-height:1.3} .buddypress .buddypress-wrap .bd-tabs{margin:0;border:0!important;background:none!important;box-shadow:none!important;border-radius:0} /* Binder: show more, your own entries */ .buddypress .buddypress-wrap .bd-load-more{display:block;margin:16px auto 0;padding:9px 20px;border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:none;color:var(--heading);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer} .buddypress .buddypress-wrap .bd-load-more:hover{background:var(--bd-desk)} .bd-load-more[hidden]{display:none!important} .bd-item.is-custom .bd-kind{background:var(--bd-sticky);color:var(--bd-sticky-ink)} .bd-items.is-list .bd-item.is-custom .bd-excerpt{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px!important;color:var(--muted)!important} .bd-items.is-list .bd-item.is-custom.is-open .bd-excerpt{-webkit-line-clamp:unset;color:var(--body)!important} .bd-entry-form{display:grid;gap:6px;margin:14px 0 6px;padding:18px 20px;border:1px solid var(--line);border-left:4px solid var(--bd-c2);border-radius:6px 14px 14px 6px;background:var(--bd-desk)} .bd-entry-form h3{margin:0!important;font-size:1.05rem!important} .bd-entry-hint{margin:0 0 6px!important;font-size:13px!important;color:var(--muted)!important} .bd-entry-form label{margin-top:4px;font-size:13px;font-weight:600;color:var(--heading)} .bd-entry-form label small{font-weight:400;color:var(--muted)} .bd-entry-form :is(input,textarea,select){width:100%;padding:9px 12px;border:1px solid var(--field);border-radius:10px;background:var(--surface);color:var(--body);font:inherit;font-size:14px;box-shadow:none} .bd-entry-form :is(input,textarea,select):focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent} .bd-entry-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:8px} /* Activity: pictures keep their shape (forum images carry width and height, so the height must follow the width) */ body .buddypress-wrap .activity-list .activity-inner img{max-width:100%;height:auto!important;border-radius:10px} body .buddypress-wrap .activity-list .activity-item:is(.bbp_reply_create,.bbp_topic_create) .activity-inner img{display:block;width:auto;max-height:360px;margin:8px 0;border:1px solid var(--line)} body .buddypress-wrap .activity-list .activity-item.new_blog_post .activity-inner img{float:left;width:180px!important;aspect-ratio:16/10;object-fit:cover;margin:2px 16px 6px 0} body .buddypress-wrap .activity-list .activity-item.new_blog_post .activity-inner::after{content:"";display:block;clear:both} @media (max-width:600px){body .buddypress-wrap .activity-list .activity-item.new_blog_post .activity-inner img{float:none;width:100%!important;margin:8px 0}} /* ===== Profile settings (General, Email, Profile visibility, Export data, Delete account) and notices, in the same card style as Edit profile: BuddyPress's own look removed ===== */ body .buddypress-wrap .pf-body :is(#your-profile,#settings-form,#bp-data-export,#account-delete-form){max-width:40rem;margin:0;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:none} body .buddypress-wrap .pf-body :is(.screen-heading,.general-settings-screen){margin:0 0 12px!important;font:600 1.0625rem/1.3 Livvic,sans-serif!important;color:var(--heading)!important;border:0!important;padding:0!important} body .buddypress-wrap .pf-body p.info,body .buddypress-wrap .pf-body #bp-data-export p{margin:0 0 12px!important;color:var(--muted);font-size:14px} body .buddypress-wrap .pf-body :is(#your-profile,#account-delete-form) label{display:block;margin:12px 0 6px;font-size:14px;font-weight:600;color:var(--heading)} body .buddypress-wrap .pf-body :is(#your-profile,#settings-form,#account-delete-form) :is(input[type=text],input[type=email],input[type=password]){width:100%;max-width:none;padding:10px 14px;border:1px solid var(--field);border-radius:10px;background:var(--page);color:var(--body);font:inherit;font-size:15px;box-shadow:none} body .buddypress-wrap .pf-body :is(#your-profile,#settings-form,#account-delete-form) :is(input[type=text],input[type=email],input[type=password]):focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent} body .buddypress-wrap .pf-body #your-profile a{color:var(--link);font-size:13px} body .buddypress-wrap .pf-body :is(#your-profile,#settings-form,#bp-data-export,#account-delete-form) :is(input[type=submit],button[type=submit]){display:inline-block;margin-top:14px;padding:11px 22px;border:0;border-radius:9999px;background:var(--heading);color:var(--page);font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:none} body .buddypress-wrap .pf-body :is(#your-profile,#settings-form,#bp-data-export,#account-delete-form) :is(input[type=submit],button[type=submit]):hover{background:var(--link)} body .buddypress-wrap .pf-body #your-profile :is(.wp-generate-pw,.wp-hide-pw,.wp-cancel-pw){display:inline-flex;align-items:center;gap:6px;margin:6px 6px 0 0;padding:8px 16px;border:1px solid var(--line);border-radius:9999px;background:var(--surface);color:var(--heading);font:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:none} body .buddypress-wrap .pf-body #your-profile .wp-pwd{margin-top:8px} body .buddypress-wrap .pf-body #your-profile .submit{margin:0;padding:0} body .buddypress-wrap .pf-body #bp-data-export ul{margin:0 0 14px;padding-left:20px;color:var(--body);font-size:14px;line-height:1.7} body .buddypress-wrap .pf-body #bp-data-export a{color:var(--link)} body .buddypress-wrap .pf-body #account-delete-form label.warn{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--heading)} body .buddypress-wrap .pf-body #account-delete-form input[type=submit]{background:var(--danger)} body .buddypress-wrap .pf-body #account-delete-form input[type=submit]:disabled{opacity:.45;cursor:not-allowed} /* Notices (BuddyPress "feedback"): a calm tinted box, no dashboard icons */ body .buddypress-wrap .pf-body .bp-feedback,body .buddypress-wrap .bp-feedback{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:12px 16px;border:0;border-left:3px solid var(--cyan);border-radius:10px;background:var(--cyan-50);color:var(--body);font-size:14px;box-shadow:none} body .buddypress-wrap .bp-feedback .bp-icon{display:none} body .buddypress-wrap .bp-feedback p{margin:0;padding:0;color:inherit} body .buddypress-wrap .bp-feedback.warning{border-left-color:var(--danger);background:var(--danger-50)} body .buddypress-wrap .bp-feedback.loading{border-left-color:var(--line);background:var(--soft);color:var(--muted)} /* Settings tables (email notifications, profile visibility) */ body .buddypress-wrap .pf-body :is(table.notification-settings,table.profile-settings){width:100%;margin:0 0 6px;border:0;border-collapse:collapse;background:none;font-size:14px} body .buddypress-wrap .pf-body :is(table.notification-settings,table.profile-settings) :is(th,td){padding:11px 8px;border:0;border-bottom:1px solid var(--line);background:none!important;color:var(--body);text-align:left;vertical-align:middle} body .buddypress-wrap .pf-body :is(table.notification-settings,table.profile-settings) th{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} body .buddypress-wrap .pf-body :is(table.notification-settings,table.profile-settings) :is(.yes,.no){width:60px;text-align:center} body .buddypress-wrap .pf-body table.notification-settings td.icon{display:none} body .buddypress-wrap .pf-body table input[type=radio]{accent-color:var(--teal)} body .buddypress-wrap .pf-body table.profile-settings select{padding:6px 10px;border:1px solid var(--field);border-radius:8px;background:var(--surface);color:var(--body);font:inherit;font-size:13px} body .buddypress-wrap .pf-body #bp-data-export{padding:0;border:0;background:none} body .buddypress-wrap .pf-body:has(#bp-data-export) > :is(p,ul){max-width:40rem;margin:0 0 10px;font-size:14px;color:var(--body)} body .buddypress-wrap .pf-body:has(#bp-data-export) > ul{padding-left:20px;line-height:1.75;color:var(--muted)} body .buddypress-wrap .pf-body .bp-feedback{max-width:40rem} /* Profile sub-tabs: no BuddyPress rules above and below; the selected pill follows the theme (dark mode too) */ body .buddypress-wrap .pf-body #subnav{border:0!important;box-shadow:none!important} body .buddypress-wrap .pf-body .bp-subnavs ul li.selected a,body .buddypress-wrap .pf-body .bp-subnavs ul li.current a{background:var(--heading)!important;border-color:var(--heading);color:var(--page)} html body .buddypress-wrap .pf-body #subnav ul li:is(.selected,.current) a{background:var(--heading)!important;border-color:var(--heading)!important;color:var(--page)!important} /* Key cases "In pictures": every picture gets its 4:3 frame (a picture with the lightbox could collapse to no height) */ .prose .case-gallery figure.wp-block-image img{flex:none!important;width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:cover} /* Header "Community" menu: a call to action beside the links (start a discussion, or join) */ .mega-feature.is-cta{align-items:flex-start;max-width:380px;background:var(--cyan-50)} .mega-feature.is-join{background:var(--purple-50)} .mega-cta-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:var(--surface);color:var(--teal)} .mega-feature.is-join .mega-cta-ic{color:var(--purple-text)} .mega-cta-ic .ui-icon{width:22px;height:22px} .mega-feature.is-cta small{display:block;font-size:13px;line-height:1.5;color:var(--muted)} .mega-cta-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:10px} .mega-cta-btns .btn-square{padding:9px 16px;font-size:13px} .mega-cta-btns a:not(.btn-square){font-size:13px;font-weight:600;color:var(--link)} /* "In your binder" on saved pages, and saved passages marked in the text */ .ea-save[aria-pressed="true"]{background:var(--heading);border-color:var(--heading);color:var(--page)} .ea-in-binder{display:inline-flex;align-items:center;gap:5px;align-self:center;padding:5px 12px 5px 9px;border-radius:9999px;background:var(--cyan-50);color:var(--teal)!important;font-size:13px;font-weight:600;text-decoration:none!important} .ea-in-binder[hidden]{display:none} .ea-in-binder .ui-icon{width:15px;height:15px} .ea-in-binder:hover{background:color-mix(in srgb,var(--cyan) 22%,var(--surface))} mark.bd-mark{padding:0 1px;border-radius:3px;background:color-mix(in srgb,var(--aqua-btn) 24%,transparent);color:inherit;box-shadow:inset 0 -1.5px 0 color-mix(in srgb,var(--cyan) 45%,transparent);cursor:pointer;transition:background .15s} mark.bd-mark:hover,mark.bd-mark:focus-visible{background:color-mix(in srgb,var(--aqua-btn) 50%,transparent);outline:none} .bd-mark-card{position:absolute;z-index:90;width:min(320px,calc(100vw - 24px));padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 18px 40px -16px rgba(15,18,84,.4);font-size:14px} .bd-mark-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;font-weight:700;color:var(--teal);font-size:12px;letter-spacing:.08em;text-transform:uppercase} .bd-mark-head a{font-size:13px;letter-spacing:0;text-transform:none;color:var(--link)} .bd-mark-note{margin:0 0 10px;padding:8px 10px;border-radius:4px 10px 10px 10px;background:var(--bd-sticky);color:var(--bd-sticky-ink);font-size:13.5px;line-height:1.5} .bd-mark-form{display:grid;gap:8px} .bd-mark-form textarea{width:100%;padding:8px 10px;border:1px solid var(--field);border-radius:10px;background:var(--page);color:var(--body);font:inherit;font-size:13.5px;resize:vertical} .bd-mark-form > div{display:flex;justify-content:flex-end;gap:8px} .bd-mark-form button{padding:6px 14px;border:1px solid var(--line);border-radius:9999px;background:var(--surface);color:var(--heading);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .bd-mark-form button[type=submit]{background:var(--heading);border-color:var(--heading);color:var(--page)} /* Community: its own button, and the one way in (the top bar has no Log in). Visitors see a padlock and the members' gate (what's inside, log in, join); members get their community links and their own pages. Desktop: a labelled button where "Become a member" was. Phones: an icon beside search. */ .cm{position:relative} .cm-toggle{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 7px;border:0;border-radius:9999px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);color:var(--heading);font:inherit;font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;transition:box-shadow .2s} .cm-toggle:hover,.cm-toggle[aria-expanded="true"]{box-shadow:inset 0 0 0 1.5px var(--cyan)} .cm-ic{display:none} .cm-lock{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--purple-50);color:var(--purple-text)} .cm-lock .ui-icon{width:13px;height:13px;stroke-width:2.2} .cm-av{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none} .cm-caret{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .2s} .cm-toggle[aria-expanded="true"] .cm-caret{transform:rotate(180deg)} .cm-panel{position:absolute;z-index:60;top:calc(100% + 18px);right:0;width:360px;max-height:calc(100vh - 140px);overflow:auto;display:grid;gap:14px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 44px rgba(15,18,84,.16)} .cm.is-member .cm-panel{width:500px} .cm-panel[hidden]{display:none} .cm-head{display:flex;align-items:center;gap:12px} .cm-head-ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--purple-50);color:var(--purple-text)} .cm-head-ic .ui-icon{width:20px;height:20px} .cm-panel .cm-head .eyebrow{color:var(--purple-text)} .cm-head b{display:block;font-family:Livvic,"Noto Sans",sans-serif;font-weight:600;font-size:18px;line-height:1.25;color:var(--heading)} .cm-locked{list-style:none;margin:0;padding:8px 0;border-block:1px solid var(--line);display:grid;gap:2px} .cm-locked li{display:flex;align-items:center;gap:10px;padding:5px 2px;color:var(--muted);font-size:15px} .cm-locked li span{flex:1} .cm-locked .ui-icon{width:17px;height:17px} .cm-locked .cm-li-lock{width:14px;height:14px;color:var(--purple-text)} .cm-form{display:grid;gap:6px} .cm-form label{font-size:13px;font-weight:600;color:var(--heading)} .cm-form input{width:100%;margin-bottom:4px;padding:10px 12px;border:1px solid var(--field);border-radius:8px;background:var(--surface);color:var(--body);font:inherit;font-size:16px} .cm-form .btn-square{justify-content:center;margin-top:4px} .cm-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 14px;font-size:14px;color:var(--muted)} .cm-foot a{font-weight:600} .cm-who{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)} .cm-who img{width:38px;height:38px;border-radius:50%;object-fit:cover} .cm-who b{display:block;color:var(--heading);font-size:15px} .cm-who small{display:block;color:var(--teal);font-size:12px;font-weight:600} .cm-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px} .cm-links{display:flex;flex-direction:column;gap:1px;min-width:0} .cm-panel .cm-links .eyebrow{padding:2px 8px 4px;color:var(--muted)} .cm-links a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:9px;color:var(--heading);font-size:15px} .cm-links a:hover{background:var(--soft);color:var(--link)} .cm-links .ui-icon{width:19px;height:19px;color:var(--teal)} .cm-links .cm-out{color:var(--muted)} .cm-links .cm-out .ui-icon{color:var(--muted)} .cm-panel .cm-cta{margin:0;max-width:none;align-items:center} .cm-panel .cm-cta b{font-size:16px} @media (max-width:960px){ .cm{position:static} .cm-toggle{position:relative;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;background:none;box-shadow:none} .cm-toggle:hover{box-shadow:none;background:var(--soft)} .cm-toggle[aria-expanded="true"]{box-shadow:none;background:var(--soft)} .cm-ic{display:block;line-height:0} .cm-ic .ui-icon{width:23px;height:23px} .cm-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .cm-caret,.cm-av{display:none} .cm-lock{position:absolute;right:1px;bottom:3px;width:17px;height:17px;box-shadow:0 0 0 2px var(--surface)} .cm-lock .ui-icon{width:10px;height:10px;stroke-width:2.6} .cm-panel,.cm.is-member .cm-panel{top:calc(100% - 6px);left:12px;right:12px;width:auto;max-width:420px;margin-left:auto;max-height:calc(100vh - 100px)} .cm-cols{grid-template-columns:1fr} } /* Forum: your own posts (Edit, Delete), the Edited label, and posts their authors deleted (the place stays). */ .ff-acts .ff-own{color:var(--muted)} .ff-acts .ff-own.is-danger:hover{color:var(--danger)} .ff-edited{font-size:13px;color:var(--muted);font-style:italic;cursor:default} .ff-edited::before{content:"· ";font-style:normal} .ff-gone-av{display:block;width:44px;height:44px;border-radius:50%;background:var(--soft);box-shadow:inset 0 0 0 1.5px var(--line)} .ff-gone-name{font-weight:600;color:var(--muted)} .ff-gone{margin:8px 0 0;padding:10px 14px;border:1px dashed var(--field);border-radius:10px;color:var(--muted);font-size:15px;font-style:italic} .ff-gone .ff-restore{margin-left:6px;font-style:normal;font-weight:600;font-size:13px} /* The same "are you sure?" box as the binder, anywhere a link asks first (data-confirm). */ .bn-confirm .bn-keep{padding:8px 14px;border:1px solid var(--line);border-radius:9999px;background:var(--surface);color:var(--heading);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .bn-confirm .bn-keep:hover{background:var(--soft)} .bn-confirm .bn-danger{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border:0;border-radius:9999px;background:var(--danger);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer} /* A dark band (About: Partners and funders) to set a section apart, with the partners' own logos in white. */ :root{--band-dark:var(--navy)} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--band-dark:#181c52}} :root[data-theme="dark"]{--band-dark:#181c52} .band.dark{background:var(--band-dark);color:#cfd2f3} .band.dark .eyebrow{color:var(--aqua-btn)} .band.dark h2,.band.dark h3{color:#fff} .band.dark .section-head p{color:#c3c6ee} .band.dark .textlink,.band.dark .textlink:hover{color:#fff} .band.dark .cards.three-col{gap:24px} .partner{display:flex;flex-direction:column;gap:10px;padding:26px 26px 24px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.04)} .partner > *{margin:0} .partner .wp-block-image.partner-logo{display:flex;align-items:center;justify-content:flex-start;height:64px;margin:0 0 10px;text-align:left} .partner .partner-logo img{width:auto;max-width:210px;max-height:56px;height:auto;margin:0} /* The SPR's seal is purple on white: shown as a light seal on the band. */ .partner .partner-logo.is-seal img{max-height:64px;filter:grayscale(1) invert(1) brightness(1.35) contrast(1.1);mix-blend-mode:screen} .partner h3{font-family:Livvic,"Noto Sans",sans-serif;font-size:var(--fs-h3)} .partner p{font-size:var(--fs-body);line-height:1.6;color:#c9ccef} .partner .partner-more{margin-top:auto;padding-top:8px} @media (max-width:900px){.band.dark .cards.three-col{grid-template-columns:1fr}} /* Profiles: the admins' "Manage member" panel (inc/profile.php). */ .pf-admin{margin-top:6px;padding:12px 14px;border:1px dashed var(--field);border-radius:12px;background:var(--soft);font-size:14px} .pf-admin summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;color:var(--heading);list-style:none} .pf-admin summary::-webkit-details-marker{display:none} .pf-admin summary small{margin-left:auto;font-weight:500;font-size:12px;color:var(--muted)} .pf-admin form{display:grid;gap:8px;margin-top:12px} .pf-admin label{font-size:13px;font-weight:600;color:var(--heading)} .pf-admin select{width:100%;padding:8px 10px;border:1px solid var(--field);border-radius:8px;background:var(--surface);color:var(--body);font:inherit;font-size:14px} .pf-admin .pf-admin-tick{display:flex;align-items:center;gap:8px;font-weight:500} .buddypress .buddypress-wrap .pf-admin .pf-admin-save,.pf-admin .pf-admin-save{justify-self:start;margin-top:4px;padding:7px 16px;border:0;border-radius:9999px;background:var(--heading);color:var(--page);font:inherit;font-size:13px;font-weight:600;cursor:pointer} .pf .pf-admin p.pf-admin-note,.pf .pf-admin p.pf-admin-saved{margin:10px 0 0!important;font-size:13px;color:var(--muted)} .pf .pf-admin p.pf-admin-saved{color:var(--teal);font-weight:600} .pf .pf-admin p.pf-admin-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 0!important;font-size:13px} /* Forum: every member's picture opens their profile. */ .ff-avatar-link{display:inline-flex;flex:none;border-radius:50%;line-height:0} .ff-avatar-link:hover img{box-shadow:0 0 0 2px var(--cyan)} /* Community button: unread notifications. */ .cm-count{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:9999px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;line-height:1} .cm-link-count{margin-left:auto;min-width:20px;padding:1px 7px;border-radius:9999px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;text-align:center} @media (max-width:960px){.cm-toggle .cm-count{position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;font-size:10px;box-shadow:0 0 0 2px var(--surface)}} /* Moderators' links under posts and discussions, each with its icon. */ .ff-mod .bbp-admin-links a{display:inline-flex;align-items:center;gap:5px} .ff-mod .bbp-admin-links a::before{content:"";width:14px;height:14px;flex:none;background:currentColor;-webkit-mask:var(--mi) center/contain no-repeat;mask:var(--mi) center/contain no-repeat} .ff-mod a[class*="edit-link"]{--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E")} .ff-mod a[class*="close-link"]{--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")} .ff-mod a[class*="stick"]{--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6l-1 6 4 3H6l4-3z'/%3E%3Cpath d='M12 13v7'/%3E%3C/svg%3E")} .ff-mod a[class*="merge-link"]{--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4v4a6 6 0 0 0 6 6 6 6 0 0 1 6 6M18 4v4a6 6 0 0 1-6 6'/%3E%3C/svg%3E")} .ff-mod a[class*="move-link"]{--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")} .ff-mod a[class*="split-link"]{--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Cpath d='M8 7.5l12 9M8 16.5l12-9'/%3E%3C/svg%3E")} .ff-mod a[class*="trash-link"]{--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9.5 7V4.5h5V7M6.5 7l1 12.5h9l1-12.5'/%3E%3C/svg%3E")} .ff-mod a[class*="spam-link"]{--mi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4h11l-1.5 4L16 12H5'/%3E%3C/svg%3E")} .ff-mod .bbp-admin-links a:not([class*="-link"])::before,.ff-mod a.bbp-topic-super-sticky-link::before{display:none} .ff-mod a[class*="trash-link"]:hover,.ff-mod a[class*="spam-link"]:hover{color:var(--danger)} /* Forum: reactions under posts, and saving one reply to your binder. */ .ff-reacts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px} .ff-reacts.is-busy{opacity:.6;pointer-events:none} .ff-react{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:1px solid var(--line);border-radius:9999px;background:var(--surface);color:var(--body);font:inherit;font-size:13px;font-weight:600;line-height:1.4;cursor:pointer} span.ff-react{cursor:default} button.ff-react:hover{border-color:var(--field);background:var(--soft)} .ff-react[aria-pressed="true"]{border-color:var(--purple);background:var(--purple-50);color:var(--purple-text)} .ff-react-add{position:relative;display:inline-flex} .ff-react-open{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px dashed var(--field);border-radius:50%;background:none;color:var(--muted);cursor:pointer} .ff-react-open:hover,.ff-react-open[aria-expanded="true"]{border-style:solid;color:var(--heading);background:var(--soft)} .ff-react-open svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} .ff-react-pick{position:absolute;left:0;bottom:calc(100% + 6px);z-index:20;display:flex;gap:2px;padding:5px;border:1px solid var(--line);border-radius:9999px;background:var(--surface);box-shadow:0 12px 28px -12px rgba(15,18,84,.35)} .ff-react-pick[hidden]{display:none} .ff-react-pick button{width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;font-size:19px;line-height:1;cursor:pointer;transition:transform .15s} .ff-react-pick button:hover,.ff-react-pick button:focus-visible{background:var(--soft);transform:scale(1.15)} .ff-acts .ea-save{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;box-shadow:none;color:var(--muted);font:inherit;cursor:pointer} .ff-acts .ea-save .icon{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2} .ff-acts .ea-save:hover,.ff-acts .ea-save[aria-pressed="true"]{color:var(--link)} .ff-acts .ea-save[aria-pressed="true"] .icon{fill:currentColor} /* Who reacted: a small label above the chip on hover or focus. */ .ff-react{position:relative} .ff-react[data-who]:hover::after,.ff-react[data-who]:focus-visible::after{content:attr(data-who);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:25;width:max-content;max-width:260px;padding:6px 10px;border-radius:8px;background:var(--heading);color:var(--page);font-size:12px;font-weight:500;line-height:1.55;text-align:left;white-space:pre-line;pointer-events:none} .ff-react[data-who]:hover::after,.ff-react[data-who]:focus-visible::after{min-width:140px;max-height:260px;overflow:hidden} .ff-react[data-who]::first-line{font-weight:inherit} /* Member tour (Join Us, blocks/member-tour): tabs on the left, a small playing scene on the right. */ .mt{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px;align-items:center;margin-top:8px} .mt-tabs{display:grid;gap:10px} .mt-tab{position:relative;display:flex;gap:14px;align-items:flex-start;width:100%;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--body);font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:border-color .2s,box-shadow .2s} .mt-tab:hover{border-color:var(--field)} .mt-tab[aria-selected="true"]{border-color:var(--cyan);box-shadow:0 10px 28px -18px rgba(15,18,84,.45)} .mt-tab b{display:block;font-family:Livvic,"Noto Sans",sans-serif;font-size:18px;color:var(--heading);line-height:1.3} .mt-tab small{display:block;margin-top:3px;font-size:14px;line-height:1.5;color:var(--muted)} .mt-tab-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--cyan-50);color:var(--teal)} .mt-tab-ic .ui-icon{width:20px;height:20px} .mt-bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--cyan)} .mt-tab[aria-selected="true"] .mt-bar{animation:mt-bar var(--mt-dur,12s) linear forwards} .mt.is-paused .mt-bar,.mt.is-paused .mt-scene *{animation-play-state:paused!important} @keyframes mt-bar{to{width:100%}} .mt-screen{position:relative;min-height:450px;padding:52px 26px 26px;border:1px solid var(--line);border-radius:18px;background:var(--soft);box-shadow:0 24px 50px -30px rgba(15,18,84,.45);overflow:hidden} .mt-chrome{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--surface)} .mt-chrome i{width:9px;height:9px;border-radius:50%;background:var(--field)} .mt-chrome span{margin-left:12px;padding:2px 12px;border-radius:9999px;background:var(--soft);font-size:11px;color:var(--muted)} .mt-scene{display:grid;gap:14px;align-content:start} .mt-scene[hidden]{display:none} .mt-line{display:block;height:8px;margin-top:8px;border-radius:4px;background:var(--line)} .mt-line.is-short{width:62%} /* The scenes play as a timeline: icrr.js adds s1, s2… to the playing scene, and each step below shows what changes. */ .mt-scene > *,.mt-scene .mt-pane,.mt-scene .mt-toast{transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1),max-height .45s} .mt-cursor{position:absolute;left:0;top:0;z-index:5;width:22px;height:22px;fill:var(--heading);stroke:#fff;stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(15,18,84,.35));opacity:0;pointer-events:none;transition:transform .75s cubic-bezier(.45,.05,.25,1),opacity .3s} .mt.has-cursor .mt-cursor{opacity:1} .mt-cursor.is-click{animation:mt-click .35s ease} @keyframes mt-click{50%{scale:.8}} .mt-bell{position:relative;margin-left:auto;display:grid;place-items:center;color:var(--muted)} .mt-bell .ui-icon{width:16px;height:16px} .mt-bell em{position:absolute;top:-5px;right:-7px;min-width:15px;height:15px;padding:0 4px;border-radius:9999px;background:var(--purple);color:#fff;font:700 10px/15px sans-serif;font-style:normal;text-align:center;opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)} .mt.has-bell .mt-bell em{opacity:1;transform:none} /* Compendium */ .mt-search{display:flex;align-items:center;gap:10px;padding:11px 16px;border:1px solid var(--field);border-radius:9999px;background:var(--surface);color:var(--muted);font-size:15px} .mt-search .ui-icon{width:17px;height:17px} .mt-type{display:inline-block;width:0;overflow:hidden;white-space:nowrap;color:var(--heading);border-right:2px solid var(--cyan)} .mt-scene.s1 .mt-type{animation:mt-type .8s steps(6) forwards,mt-caret .7s step-end 4} @keyframes mt-type{to{width:6.2ch}} @keyframes mt-caret{50%{border-color:transparent}} .mt-sugg{display:grid;margin-top:-8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 14px 30px -20px rgba(15,18,84,.5);overflow:hidden;opacity:0;transform:translateY(-6px);max-height:0} .mt-scene.s2 .mt-sugg{opacity:1;transform:none;max-height:140px} .mt-scene.s3 .mt-sugg{opacity:0;max-height:0} .mt-sg{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;font-size:14px;color:var(--body)} .mt-sg b{font-weight:600;color:var(--heading)}.mt-sg + .mt-sg b{font-weight:400;color:var(--muted)} .mt-sg small{color:var(--muted)} .mt-sg.is-hit{background:var(--cyan-50)} .mt-card{padding:16px 18px;border:1px solid var(--line);border-top:3px solid var(--cyan);border-radius:12px;background:var(--surface)} .mt-entry{opacity:0;transform:translateY(10px);max-height:0;padding-top:0;padding-bottom:0;overflow:hidden} .mt-scene.s3 .mt-entry{opacity:1;transform:none;max-height:300px;padding-top:16px;padding-bottom:16px} .mt-kind{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--teal)} .mt-title{display:block;margin-top:4px;font-family:Livvic,"Noto Sans",sans-serif;font-size:20px;color:var(--heading)} .mt-etabs{display:flex;gap:18px;margin-top:10px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted)} .mt-et{padding:4px 0 7px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s} .mt-et.is-a,.mt-scene.s4 .mt-et.is-b{color:var(--heading);border-color:var(--cyan)} .mt-scene.s4 .mt-et.is-a{color:var(--muted);border-color:transparent} .mt-pane{display:block;padding-top:4px} .mt-pane.is-b,.mt-scene.s4 .mt-pane.is-a{display:none} .mt-scene.s4 .mt-pane.is-b{display:grid;gap:6px;animation:mt-in .35s ease} .mt-src{display:flex;align-items:center;gap:10px;margin-top:6px} .mt-src i{flex:none;padding:1px 8px;border-radius:9999px;background:var(--purple-50);color:var(--purple-text);font-size:11px;font-style:normal;font-weight:600} .mt-src .mt-line{flex:1;margin:0} @keyframes mt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .mt-btn{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:6px 14px;border:1px solid var(--field);border-radius:9999px;font-size:13px;font-weight:600;color:var(--heading);transition:background .25s,border-color .25s,color .25s} .mt-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2} .mt-btn em,.mt-react em,.mt-pop em{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;font-style:normal;max-width:12em} .mt-btn em.mt-btn-b,.mt-react em.mt-n2,.mt-pop em.mt-pb{max-width:0} .mt-scene.s5 .mt-press{background:var(--heading);border-color:var(--heading);color:var(--page)} .mt-scene.s5 .mt-press svg{fill:currentColor} .mt-scene.s5 .mt-btn-a{max-width:0} .mt-scene.s5 .mt-btn-b{max-width:12em} .mt-toast{justify-self:end;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;background:var(--heading);color:var(--page);font-size:13px;font-weight:600;opacity:0;transform:translateY(10px)} .mt-toast u{text-decoration:none;color:var(--aqua-btn)} .mt-toast .ui-icon{width:15px;height:15px;color:var(--aqua-btn)} .mt-scene.s6 .mt-toast{opacity:1;transform:none} /* Forum */ .mt-h{font-family:Livvic,"Noto Sans",sans-serif;font-size:19px;color:var(--heading)} .mt-post{display:flex;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)} .mt-post > div{flex:1;min-width:0} .mt-post b{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--heading)} .mt-post.is-reply{margin-left:28px} .mt-p1,.mt-p2{opacity:0;transform:translateY(10px)} .mt-scene.s1 .mt-p1,.mt-scene.s3 .mt-p2{opacity:1;transform:none} .mt-p2{max-height:0;padding-top:0;padding-bottom:0;overflow:visible;visibility:hidden} .mt-scene.s3 .mt-p2{max-height:260px;padding-top:14px;padding-bottom:14px;visibility:visible} .mt-typing{display:inline-flex;align-items:center;gap:4px;margin-left:28px;font-size:12px;color:var(--muted);opacity:0;max-height:0} .mt-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:mt-dot 1s infinite} .mt-typing i:nth-child(2){animation-delay:.15s}.mt-typing i:nth-child(3){animation-delay:.3s;margin-right:6px} @keyframes mt-dot{0%,60%,100%{opacity:.3}30%{opacity:1}} .mt-scene.s2 .mt-typing{opacity:1;max-height:20px} .mt-scene.s3 .mt-typing{opacity:0;max-height:0} .mt-av{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--cyan);color:#fff;font-weight:700;font-size:13px} .mt-av.is-purple{background:var(--purple)} .mt-badge{padding:1px 8px;border-radius:9999px;background:var(--purple-50);color:var(--purple-text);font-size:11px;font-weight:600} .mt-cite{position:relative;display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:4px 10px;border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:8px;background:var(--soft);font-size:13px;font-weight:600;color:var(--heading)} .mt-cite .ui-icon{width:14px;height:14px;color:var(--teal)} .mt-cite small{font-weight:400;color:var(--muted)} .mt-peek{position:absolute;left:0;bottom:calc(100% + 8px);z-index:2;display:grid;width:220px;padding:12px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);box-shadow:0 16px 30px -16px rgba(15,18,84,.5);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .3s;pointer-events:none} .mt-peek b{font-family:Livvic,"Noto Sans",sans-serif;font-size:15px} .mt-scene.s4 .mt-peek{opacity:1;transform:none} .mt-scene.s5 .mt-peek{opacity:0} .mt-reacts{display:flex;gap:6px;margin-top:10px} .mt-react{position:relative;display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border:1px solid var(--line);border-radius:9999px;font-size:13px;font-weight:600;color:var(--body);transition:background .25s,border-color .25s,color .25s} .mt-scene.s5 .mt-react.is-first{border-color:var(--purple);background:var(--purple-50);color:var(--purple-text);animation:mt-pop .35s ease} @keyframes mt-pop{50%{transform:scale(1.15)}} .mt-scene.s5 .mt-n1{max-width:0}.mt-scene.s5 .mt-n2{max-width:2em} .mt-who{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);padding:4px 9px;border-radius:6px;background:var(--heading);color:var(--page);font-size:11px;white-space:nowrap;opacity:0;transition:opacity .2s} .mt-scene.s6 .mt-who{opacity:1} .mt-scene.s7 .mt-who{opacity:0} .mt-toast.is-note{justify-self:end} .mt-scene.s7 .mt-toast.is-note{opacity:1;transform:none} /* Binder */ .mt-text{position:relative;margin:0;padding:16px 18px;border-radius:12px;background:var(--surface);font-family:"Noto Serif",Georgia,serif;font-size:15px;line-height:1.7;color:var(--body)} .mt-mark{background:linear-gradient(color-mix(in srgb,var(--aqua-btn) 60%,transparent),color-mix(in srgb,var(--aqua-btn) 60%,transparent)) 0 0/0 100% no-repeat;color:inherit;transition:background-size .8s linear} .mt-mark i{display:inline-block;width:0;height:1em} .mt-scene.s1 .mt-mark{background-size:100% 100%} .mt-pop{justify-self:center;display:flex;gap:4px;margin-top:-6px;padding:5px;border-radius:9999px;background:var(--heading);color:var(--page);font-size:12px;font-weight:600;opacity:0;transform:translateY(8px)} .mt-scene.s2 .mt-pop{opacity:1;transform:none} .mt-scene.s4 .mt-pop{opacity:0;max-height:0;margin:0;padding:0;overflow:hidden} .mt-pop span{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:9999px} .mt-pop span:first-child{background:color-mix(in srgb,var(--page) 18%,transparent)} .mt-scene.s3 .mt-pop .is-save{background:var(--aqua-btn);color:var(--navy)} .mt-scene.s3 .mt-pa{max-width:0}.mt-scene.s3 .mt-pb{max-width:6em} .mt-pop svg,.mt-pop .ui-icon{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2} .mt-scene.s3 .mt-pop .is-save svg{fill:currentColor} .mt-binder{display:grid;gap:8px;padding:14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);opacity:0;transform:translateY(12px)} .mt-scene.s4 .mt-binder{opacity:1;transform:none} .mt-sec{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--heading)} .mt-sec small{margin-left:auto;font-weight:400;color:var(--muted)} .mt-sec i{width:8px;height:18px;border-radius:3px;background:var(--purple)} .mt-item{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;transition:border-color .2s,box-shadow .2s} .mt-item.is-new{opacity:0;transform:translateY(-8px);transition:opacity .4s .35s,transform .45s .35s,border-color .2s,box-shadow .2s} .mt-scene.s4 .mt-item.is-new{opacity:1;transform:none} .mt-scene.s5 .mt-item.is-new{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-50)} .mt-item.is-old{opacity:.6} .mt-q{font-family:"Noto Serif",Georgia,serif;font-style:italic;font-size:14px;color:var(--body)} .mt-note{justify-self:start;display:none;padding:3px 9px;border:1px dashed var(--field);border-radius:6px;background:var(--surface);color:var(--heading);font-size:12px} .mt-scene.s5 .mt-note{display:inline-block} .mt-ntype{display:inline-block;width:0;overflow:hidden;white-space:nowrap;vertical-align:bottom;border-right:2px solid var(--cyan)} .mt-scene.s6 .mt-ntype{animation:mt-ntype 1.6s steps(28) forwards} @keyframes mt-ntype{to{width:28ch}} .mt-scene.s7 .mt-note{border:0;border-radius:4px 9px 9px 9px;background:#fff3c4;color:#5c4a00} .mt-scene.s7 .mt-ntype{border-right-color:transparent} @media (prefers-reduced-motion: reduce){.mt-scene *,.mt-scene{animation:none!important;transition:none!important}.mt-type{width:auto}.mt-ntype{width:auto}.mt-cursor{display:none}} @media (max-width:860px){.mt{grid-template-columns:minmax(0,1fr)}.mt-screen{min-height:440px;padding:48px 16px 18px}} /* Profile pictures never squash: older ones (from the previous site) aren't always square, so every avatar fills a square and is cropped to it. */ img.avatar,.avatar img,img.fface,.ff-avatar,.cm-av{object-fit:cover;aspect-ratio:1/1;flex:none} body .buddypress-wrap .activity-list .activity-item .activity-avatar img,body .buddypress-wrap .activity-list .activity-header img.avatar{object-fit:cover;aspect-ratio:1/1;max-width:none!important;flex:none} /* Forum editor: Cite a Compendium entry or page (search, then pick the whole article or a section). */ .rte-cite{margin:0 0 8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 14px 30px -20px rgba(15,18,84,.4)} .rte-cite[hidden]{display:none} .rte-cite-h{display:flex;gap:8px;align-items:flex-end} .rte-cite-h label{flex:1;display:grid;gap:4px;font-size:12px;font-weight:700;color:var(--heading)} .rte-cite-h input{width:100%;padding:8px 12px;border:1px solid var(--field);border-radius:9999px;background:var(--page);color:var(--body);font:inherit;font-size:14px} .rte-cite-x{width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:20px;cursor:pointer} .rte-cite-x:hover{background:var(--soft)} .rte-cite-list{list-style:none;margin:8px 0 0;padding:0;max-height:260px;overflow:auto;display:grid;gap:2px} .rte-cite-list button{display:grid;gap:2px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--heading);font:inherit;text-align:left;cursor:pointer} .rte-cite-list button:hover,.rte-cite-list button:focus-visible{background:var(--soft)} .rte-cite-list button.is-sub{padding-left:24px} .rte-cite-list b{font-size:14px;font-weight:600} .rte-cite-list small{font-size:12px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rte-cite-wait{padding:8px 10px;font-size:13px;color:var(--muted)} .ff-post-body blockquote cite a,.rte-area blockquote cite a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)} /* Reactions feel immediate: the picker and a new or changed chip pop in. */ @media (prefers-reduced-motion: no-preference){ .ff-react-pick:not([hidden]){animation:ff-pop .14s cubic-bezier(.2,.9,.3,1.2)} .ff-react.is-pop{animation:ff-pop .22s cubic-bezier(.2,.9,.3,1.4)} } @keyframes ff-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}} /* Profile messages (inc/profile-wall.php). */ .pf-wall{margin-top:28px} .pf-wall-form{display:grid;gap:8px;margin-bottom:16px} .pf-wall-form textarea{width:100%;min-height:68px;padding:10px 14px;border:1px solid var(--field);border-radius:12px;background:var(--surface);color:var(--body);font:inherit;font-size:15px;line-height:1.55;resize:vertical} .pf-wall-form > div{display:flex;justify-content:space-between;align-items:center;gap:12px} .pf-wall-form small{font-size:12px;color:var(--muted)} .buddypress .buddypress-wrap .pf-wall-form button,.pf-wall-form button{padding:8px 20px;border:0;border-radius:9999px;background:var(--heading);color:var(--page);font:inherit;font-size:14px;font-weight:600;cursor:pointer} .pf-wall-list{list-style:none;margin:0;padding:0;display:grid;gap:10px} .pf-wall-item{display:flex;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)} .pf-wall-item.is-pending{opacity:.65} .pf-wall-item > div{flex:1;min-width:0} .pf-wall-av{flex:none;width:40px;height:40px;border-radius:50%;background:var(--soft);line-height:0} .pf-wall-av img{width:40px;height:40px;border-radius:50%;object-fit:cover} .pf .pf-wall-who{display:flex;align-items:center;gap:8px;margin:0 0 4px!important;font-size:14px} .pf-wall-who a,.pf-wall-who b{font-weight:600;color:var(--heading)} .pf-wall-who span{font-size:12px;color:var(--muted)} .buddypress .buddypress-wrap .pf-wall-del,.pf-wall-del{margin-left:auto;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer} .buddypress .buddypress-wrap .pf-wall-del:hover,.pf-wall-del:hover{background:var(--danger-50);color:var(--danger)} .pf-wall-del .ui-icon{width:15px;height:15px} .pf-wall-text{font-size:15px;line-height:1.6;color:var(--body);overflow-wrap:anywhere} .pf .pf-wall-text p{margin:0 0 6px!important} .pf .pf-wall-text p:last-child{margin-bottom:0!important} /* Phones: the light/dark switch sits at the end of the menu, by Subscribe and Contact (the top bar that holds it on desktop is hidden). */ .drawer-foot{align-items:center} .theme-switch.drawer-ts{margin-left:auto;width:34px;height:34px;color:var(--heading)} .theme-switch.drawer-ts svg{width:19px;height:19px} /* Phones: a forum post uses the full width. The picture shrinks and sits beside the name, instead of keeping a column of its own down the side. */ @media (max-width:600px){ .ff-posts{padding:2px 14px} .ff-post{display:block;position:relative;padding:16px 0} .ff-post.is-answer{margin:0 -14px;padding:16px 14px} .ff-post-avatar{position:absolute;left:0;top:16px;line-height:0} .ff-post.is-answer .ff-post-avatar{left:14px} .ff-post-avatar img{width:34px;height:34px} .ff-post .ff-who{min-height:34px;padding-left:44px;margin-bottom:10px!important;row-gap:2px} .ff-post-body{font-size:16px;line-height:1.55} .ff-post-body blockquote{margin:0 0 10px;padding:8px 12px;font-size:14px;line-height:1.5} .ff-acts{gap:6px 14px} } /* Forum lists: the whole row opens it (easier to tap), not just its title. Pictures and other links in the row stay their own links, above the row's. */ .ff-topic,.ff-rows li,.ff-feed li{position:relative} .ff-topic .ff-topic-title::after,.ff-rows li > div > a:first-child::after,.ff-feed li > div > a:first-child::after{content:"";position:absolute;inset:0;border-radius:inherit} .ff-topic .ff-avatar-link,.ff-topic .ff-faces,.ff-topic .fchip,.ff-feed li .ff-avatar-link{position:relative;z-index:1} .ff-topic:hover,.ff-rows li:hover{background:var(--soft)} .ff-topic:hover .ff-topic-title,.ff-rows li:hover > div > a:first-child,.ff-feed li:hover > div > a:first-child{color:var(--link)} .pf-rows li{position:relative} .pf-rows li > div > a:first-child::after{content:"";position:absolute;inset:0} .pf-rows li:hover > div > a:first-child{color:var(--link)} /* Discussions: each post its own card with a gap between (like the Reddit app), and "OP" on replies by the person who started it. (Colour edges, tints and a "You" label were tried and dropped, Ben 15 Oct.) */ .ff-op-chip{background:var(--cyan-50);color:var(--teal);font-weight:700;letter-spacing:.04em} .ff-posts{gap:12px;padding:0;border:0;border-radius:0;background:none} .ff-post{padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface)} .ff-post.is-answer{margin:0;padding:18px 20px;border-color:color-mix(in srgb,#22a06b 45%,var(--line));background:linear-gradient(90deg,color-mix(in srgb,#22a06b 10%,var(--surface)),var(--surface) 70%)} .ff-post.is-lead{border-color:var(--field)} @media (max-width:700px){.ff-posts{padding:0}.ff-post.is-answer{margin:0;padding:16px}} @media (max-width:600px){ .ff-posts{gap:10px} .ff-post,.ff-post.is-answer{padding:14px} .ff-post-avatar,.ff-post.is-answer .ff-post-avatar{left:14px;top:14px} } /* Phones: cards (e.g. the religions on Universal Beliefs) stack one per row, and a row of icons wraps instead of running off the card. */ .ic-row{display:flex;flex-wrap:wrap;gap:6px} @media (max-width:600px){.cards:not(.three-col){grid-template-columns:minmax(0,1fr)}} /* Lists in posts keep their bullets and numbers inside the card. */ .ff-post-body ul,.ff-post-body ol{margin:0 0 10px;padding-left:1.4em;list-style-position:outside} .ff-post-body ul{list-style-type:disc}.ff-post-body ol{list-style-type:decimal} .ff-post-body li{margin:0 0 4px;padding-left:2px} .ff-post-body li::marker{color:var(--muted)} /* "Add to binder" / "In your binder" under a post never breaks across lines; it moves down whole if it must. */ .ff-acts .ea-save,.ff-acts .ea-save span{white-space:nowrap} .ff-acts .ea-save{flex:none} /* Compendium shortcut (inc/compendium-shortcut.php): a button in the bottom corner and its quick search. */ :root{--cq-bg:var(--navy);--cq-fg:#fff} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--cq-bg:var(--aqua-btn);--cq-fg:#0F1254}} :root[data-theme="dark"]{--cq-bg:var(--aqua-btn);--cq-fg:#0F1254} .cq-btn{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:55;display:inline-flex;align-items:center;gap:8px;padding:12px 18px 12px 14px;border:0;border-radius:9999px;background:var(--cq-bg);color:var(--cq-fg);font:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 14px 30px -12px rgba(15,18,84,.6);transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .25s} .cq-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .cq-btn:hover{transform:translateY(-2px)} .cq.is-tucked .cq-btn{transform:translateY(140%);opacity:0;pointer-events:none} .cq.is-open .cq-btn{opacity:0;pointer-events:none} .cq-dim{position:fixed;inset:0;z-index:56;background:rgba(11,13,42,.25)} .cq-dim[hidden],.cq-panel[hidden]{display:none} .cq-panel{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:57;width:min(380px,calc(100vw - 36px));max-height:min(560px,calc(100vh - 120px));overflow:auto;display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 24px 60px -20px rgba(15,18,84,.45)} .cq-grab{display:none} .cq-h{display:flex;align-items:center;gap:12px} .cq-h b{flex:1;font-family:Livvic,"Noto Sans",sans-serif;font-size:18px;color:var(--heading)} .cq-h a{font-size:14px;font-weight:600;color:var(--link)} .cq-x{width:30px;height:30px;padding:0;border:0;border-radius:50%;background:none;color:var(--muted);font-size:20px;cursor:pointer} .cq-x:hover{background:var(--soft)} .cq-form input{width:100%;padding:11px 16px;border:1px solid var(--field);border-radius:9999px;background:var(--page);color:var(--body);font:inherit;font-size:16px} .cq-label{margin:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .cq-list{list-style:none;margin:0;padding:0;display:grid} .cq-list a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 6px;border-bottom:1px solid var(--line);color:var(--heading)} .cq-list a:hover{background:var(--soft);color:var(--link)} .cq-list b{font-weight:600;font-size:15px} .cq-list small{flex:none;font-size:12px;color:var(--muted)} @media (max-width:600px){ .cq-btn{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:11px 16px 11px 13px;font-size:14px} .cq-panel{left:0;right:0;bottom:0;width:auto;max-height:78vh;padding:12px 16px calc(18px + env(safe-area-inset-bottom,0px));border-radius:20px 20px 0 0;border-bottom:0} .cq-grab{display:block;justify-self:center;width:40px;height:4px;border-radius:4px;background:var(--field)} .cq-dim{background:rgba(11,13,42,.4)} } @media (prefers-reduced-motion: reduce){.cq-btn{transition:none}} @media print{.cq{display:none}} /* Guides: the crisis box's "Find a helpline near you" button (opens a search in a new tab). */ .crisis-search{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14px;color:var(--muted)} .crisis-search .btn-square{flex:none;padding:10px 18px;font-size:15px} /* Buttons inside article text look like every other button: no link underline. */ .wp-block-post-content a.btn-square,.callout a.btn-square,.crisis-search a.btn-square{text-decoration:none!important;background-image:none!important} /* Banner key facts on phones: two tidy columns with a gap, labels set tight under their figures, and an odd last fact spanning the row (so the dividing lines stay full width). */ .bn-facts-row span{display:block;margin-top:4px;line-height:1.4} @media (max-width:900px){ .bn-facts-row{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;border-top:0} .bn-facts-row div,.bn-facts-row div + div{padding:14px 0;border-left:0;border-top:1px solid rgba(255,255,255,.14);border-bottom:0} .bn-light .bn-facts-row div{border-top-color:var(--line)} .bn-facts-row div:last-child:nth-child(odd){grid-column:1/-1} .bn-facts-row b{font-size:1.5rem} } /* Donate: PayPal's own buttons, the monthly note, the fallback link, and the thank-you. */ .donate-paypal{min-height:110px;width:100%;justify-self:stretch;align-self:stretch} .donate-paypal[hidden],.donate-thanks[hidden],.donate-monthly-note[hidden]{display:none} .donate-monthly-note{margin:0;font-size:14px;color:var(--muted)} .donate-cta.is-fallback{margin-top:-4px;text-align:center;font-size:14px} .donate-thanks{display:grid;gap:6px;padding:18px 20px;border-radius:14px;background:var(--cyan-50);color:var(--heading)} .donate-thanks b{font-family:Livvic,"Noto Sans",sans-serif;font-size:20px} .donate-thanks small{font-size:12px;color:var(--muted)} /* Save and Discuss icon buttons: a clear change on hover, on dark banners as well as on white. */ .ea-btn{transition:background-color .15s,border-color .15s,color .15s} .ea-save:not([aria-pressed="true"]):hover{background:var(--cyan-50);border-color:var(--heading)} .bn-dark .ea-save:not([aria-pressed="true"]):hover{background:rgba(255,255,255,.24);border-color:#fff;color:#fff} .bn-dark .ea-discuss:hover,.bn-dark .ea-discuss:focus-visible{background:#fff;border-color:#fff;color:var(--navy)} .ea-save[aria-pressed="true"]:hover{opacity:.85} :root[data-theme="dark"] .ea-discuss:hover{background:#fff;border-color:#fff;color:var(--navy)} @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ea-discuss:hover{background:#fff;border-color:#fff;color:var(--navy)}} /* Header icons (site pages): on hover only the icon fills in; the round button keeps its look. */ .entry-actions.is-icons .ea-save:not([aria-pressed="true"]):hover{background:var(--surface);border-color:var(--field);color:var(--heading);opacity:1} .entry-actions.is-icons .ea-discuss:hover{background:var(--aqua-btn);border-color:var(--aqua-btn);color:#0F1254} .bn-dark .entry-actions.is-icons .ea-save:not([aria-pressed="true"]):hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff} .bn-dark .entry-actions.is-icons .ea-discuss:hover{background:var(--cyan);border-color:var(--cyan);color:var(--navy)} .entry-actions.is-icons .ea-save[aria-pressed="true"]:hover{opacity:1} .entry-actions.is-icons .ea-btn .icon{transition:fill .15s} .entry-actions.is-icons .ea-btn:hover .icon,.entry-actions.is-icons .ea-btn:focus-visible .icon{fill:currentColor;stroke:currentColor} /* The Compendium shortcut steps aside while the phone menu is open (it sat over the menu's last row). */ body:has(.hdr-burger[open]) .cq{display:none} /* Hero facts strip: the figure, its label and the arrow sit on one centred line; the strip sits below the hero text rather than over it (it overlapped the buttons on tablets); on narrower screens each figure goes above its label. */ .hx-strip{position:relative} .hx-inner{padding-bottom:56px} .hx-strip a{grid-template-columns:auto minmax(0,1fr) auto;align-items:center} .hx-strip b,.hx-strip i{grid-row:auto} .hx-strip b{white-space:nowrap;line-height:1.1} @media (min-width:901px) and (max-width:1439px){ .hx-strip a{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:6px 14px;align-content:center} .hx-strip b{grid-column:1;grid-row:1} .hx-strip span{grid-column:1;grid-row:2} .hx-strip i{grid-column:2;grid-row:1 / span 2} } @media (min-width:601px) and (max-width:900px){ .hx-strip a{grid-template-columns:9.5rem minmax(0,1fr) auto;gap:16px} } /* Forum posts, easier reading: lines no longer run the full width of a wide screen (about 70 characters at most), and on phones each post card has more room inside it. */ .ff-post-body{max-width:68ch} .ff-post-body p{margin:0 0 12px} @media (max-width:600px){ .ff-posts{gap:12px} .ff-post,.ff-post.is-answer{padding:20px 20px 16px} .ff-post-avatar,.ff-post.is-answer .ff-post-avatar{left:20px;top:20px} .ff-post-body{line-height:1.6} } /* …and on wide screens the topic column (heading, posts, reply box) narrows to match, so the text fills each post's border instead of leaving a wide empty strip, and the heading's Add to binder lines up with the posts. */ @media (min-width:901px){.ff-topic-page{max-width:800px}} /* Members' area main column: its grid track can't grow wider than the screen (on phones the forum cards were running off the right edge, with no gutter). */ .app-main{grid-template-columns:minmax(0,1fr)} /* Forum home on phones: counts go under the text instead of in their own column, so names and descriptions get the full width. */ @media (max-width:600px){ .ff-more summary{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:4px} .ff-more summary span{grid-column:1;grid-row:1} .ff-more summary em{grid-column:1;grid-row:2;margin-left:0} .ff-more summary::after{grid-column:2;grid-row:1 / span 2;align-self:center} .ff-rows li{grid-template-columns:auto minmax(0,1fr);row-gap:2px;align-items:start} .ff-rows em{grid-column:2;margin-top:2px;font-size:12px} .ff-rows .ff-ic{grid-row:1 / span 2} } /* Forum login box (bbPress, shown to visitors on forum pages): the password field matches the username field, and "Keep me signed in" sits beside its tick box. */ #bbpress-forums .bbp-login-form input[type=password],.bbp-login-form input[type=password]{width:100%;padding:11px 14px;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--field);border-radius:10px;box-shadow:none;appearance:none} .bbp-login-form input[type=text],.bbp-login-form input[type=password]{font-size:16px} .bbp-login-form input[type=password]:focus{outline:none;border-color:var(--link);box-shadow:0 0 0 3px var(--cyan-50)} .bbp-login-form .bbp-username,.bbp-login-form .bbp-password{display:grid;gap:6px;margin-bottom:14px} #bbpress-forums .bbp-login-form .bbp-remember-me{display:flex;align-items:center;gap:8px;margin:2px 0 16px} #bbpress-forums .bbp-login-form .bbp-remember-me input{float:none;width:18px;height:18px;margin:0;flex:none} #bbpress-forums .bbp-login-form .bbp-remember-me label{float:none;display:inline;width:auto;margin:0} #bbpress-forums .bbp-login-form .bbp-submit-wrapper{float:none;display:flex;justify-content:flex-start;text-align:left} #bbpress-forums .bbp-login-form .bbp-submit-wrapper button{float:none} @media (max-width:600px){#bbpress-forums .bbp-login-form .bbp-submit-wrapper button{width:100%}} /* Forum privacy labels: "Public" / "Members only" beside each section, and a note above the post box. */ .ff-vis{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin-left:6px;padding:1px 8px;border-radius:9999px;background:var(--soft);border:1px solid var(--line);color:var(--muted);font:600 11px/1.6 "Noto Sans",sans-serif;letter-spacing:.02em;white-space:nowrap} .ff-vis.is-private{background:var(--purple-50);border-color:transparent;color:var(--purple-text)} .ff-vis .ui-icon{width:11px;height:11px} .ff-head .ff-vis{margin:0 0 8px} .ff-vis-note{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:10px 14px;border-radius:10px;background:var(--soft);border:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--body)} .ff-vis-note.is-private{background:var(--purple-50);border-color:transparent} .ff-vis-note .ui-icon{flex:none;width:16px;height:16px;margin-top:2px;color:var(--muted)} .ff-vis-note.is-private .ui-icon{color:var(--purple-text)} /* Display-name nudge under the community bar. */ .name-nudge{background:var(--cyan-50);border-bottom:1px solid var(--line)} .name-nudge .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-top:12px;padding-bottom:12px} .name-nudge p{flex:1 1 320px;margin:0;font-size:14px;line-height:1.5;color:var(--heading)} .name-nudge .textlink{font-size:14px} .name-nudge-skip{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px} .ff-row-t{display:block}.ff-row-t .ff-vis{margin-left:4px} .ff-vis .ui-icon{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* Phones: in the forum lists the label is just its icon (a globe for public, a padlock for members only); the words stay for screen readers, and topic and forum headings keep them. */ @media (max-width:600px){ .ff-rows .ff-vis,.ff-card .ff-vis{width:22px;height:22px;padding:0;justify-content:center;gap:0;border-radius:50%} .ff-rows .ff-vis .ui-icon,.ff-card .ff-vis .ui-icon{width:12px;height:12px} .ff-rows .ff-vis-t,.ff-card .ff-vis-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} }