/* * Pikesville Nova — a stunning, energetic, community-first design system. * Lighter palette, modern motion, engaging for every age group. */ /* ============================================================ 1. Design tokens ============================================================ */ :root { --nova-bg: #f4f6fa; --nova-bg-soft: #eaeef5; --nova-surface: #ffffff; --nova-surface-2: #f9fafd; --nova-ink: #10192e; --nova-ink-soft: #3d485f; --nova-muted: #667089; --nova-line: #e2e6ee; --nova-primary: #21458c; --nova-primary-dark: #16305f; --nova-primary-soft: #e8edf6; --nova-coral: #c07a3a; --nova-coral-dark: #9c5f27; --nova-teal: #0d8a7c; --nova-gold: #c1932f; --nova-violet: #3c5686; --nova-pink: #0d8a7c; --nova-grad-hero: radial-gradient(1200px 620px at 12% -8%, #dce4f2 0%, rgba(220,228,242,0) 60%), radial-gradient(1000px 560px at 96% 6%, #e5ebf4 0%, rgba(229,235,244,0) 58%), radial-gradient(900px 620px at 60% 108%, #dfeeeb 0%, rgba(223,238,235,0) 60%), linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%); --nova-grad-brand: linear-gradient(120deg, #16305f 0%, #21458c 55%, #0d8a7c 100%); --nova-grad-warm: linear-gradient(120deg, #b06e30 0%, #cf9f4a 100%); --nova-grad-cool: linear-gradient(120deg, #21458c 0%, #0d8a7c 100%); --nova-shadow-sm: 0 2px 10px rgba(20, 32, 62, 0.06); --nova-shadow: 0 18px 44px rgba(20, 32, 62, 0.10); --nova-shadow-lg: 0 34px 80px rgba(20, 32, 62, 0.16); --nova-shadow-brand: 0 20px 44px rgba(33, 69, 140, 0.28); --nova-radius-sm: 12px; --nova-radius: 20px; --nova-radius-lg: 30px; --nova-radius-pill: 999px; --nova-shell: 1200px; --nova-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --nova-display: "Space Grotesk", "Inter", system-ui, sans-serif; --nova-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ============================================================ 2. Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body.pia-site { margin: 0; font-family: var(--nova-font); color: var(--nova-ink); background: var(--nova-bg); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* clip (not hidden) so it still stops horizontal overflow without turning into a scroll container — which would break the sticky header. */ overflow-x: clip; } h1, h2, h3, h4 { font-family: var(--nova-display); line-height: 1.08; color: var(--nova-ink); letter-spacing: -0.02em; margin: 0 0 0.5em; } h1 { font-size: clamp(2.5rem, 6vw, 4.3rem); font-weight: 700; } h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; } h3 { font-size: 1.4rem; font-weight: 600; } p { margin: 0 0 1rem; } a { color: var(--nova-primary); text-decoration: none; transition: color .2s var(--nova-ease); } a:hover { color: var(--nova-primary-dark); } img { max-width: 100%; height: auto; display: block; } .pia-shell { width: min(var(--nova-shell), calc(100% - 3rem)); margin-inline: auto; } .pia-skip-link { position: absolute; left: -999px; top: 0; z-index: 999; background: var(--nova-ink); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 12px 0; } .pia-skip-link:focus { left: 0; color: #fff; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } /* ============================================================ 3. Buttons + chips ============================================================ */ .pia-btn { --btn-bg: var(--nova-primary); display: inline-flex; align-items: center; gap: .55rem; font-family: var(--nova-display); font-weight: 600; font-size: 1rem; padding: .85rem 1.5rem; border-radius: var(--nova-radius-pill); border: 1.5px solid transparent; cursor: pointer; transition: transform .25s var(--nova-ease), box-shadow .25s var(--nova-ease), background .25s var(--nova-ease), color .2s; white-space: nowrap; line-height: 1; } .pia-btn:hover { transform: translateY(-3px); } .pia-btn--solid { background: var(--nova-grad-brand); color: #fff; box-shadow: var(--nova-shadow-brand); } .pia-btn--solid:hover { color: #fff; box-shadow: 0 26px 54px rgba(53, 86, 240, 0.42); } .pia-btn--accent { background: var(--nova-grad-warm); color: #fff; box-shadow: 0 18px 40px rgba(176, 110, 48, 0.30); } .pia-btn--accent:hover { color: #fff; box-shadow: 0 26px 54px rgba(255, 106, 77, 0.44); } .pia-btn--ghost { background: #fff; color: var(--nova-primary); border-color: var(--nova-line); box-shadow: var(--nova-shadow-sm); } .pia-btn--ghost:hover { color: var(--nova-primary-dark); border-color: var(--nova-primary); } .pia-badge, .pia-panel-badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--nova-display); font-weight: 600; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: .4rem .8rem; border-radius: var(--nova-radius-pill); } .pia-badge { background: var(--nova-primary-soft); color: var(--nova-primary-dark); } .pia-panel-badge { background: rgba(22, 194, 163, .14); color: #0c8f78; } /* ============================================================ 4. Header + nav ============================================================ */ .pia-site-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--nova-line); box-shadow: 0 6px 24px -20px rgba(16, 25, 46, .5); } /* When the WordPress admin toolbar is showing (logged-in users), it is fixed at the very top, so stick the site header just beneath it instead of behind it. */ body.admin-bar .pia-site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .pia-site-header { top: 46px; } } .pia-site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.1rem; min-height: 92px; padding-block: .55rem; width: min(1340px, calc(100% - 3rem)); } .pia-brand { display: flex; align-items: center; gap: 1rem; } .pia-brand__mark { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--nova-grad-brand); color: #fff; font-family: var(--nova-display); font-weight: 700; font-size: 1.2rem; box-shadow: var(--nova-shadow-brand); } .pia-brand__logo { width: 64px; height: 64px; flex: none; object-fit: contain; display: block; } .pia-footer__brand .pia-brand__logo { width: 52px; height: 52px; filter: brightness(0) invert(1); opacity: .92; } .pia-brand__text { display: flex; flex-direction: column; line-height: 1.12; max-width: 15rem; } .pia-brand__name { font-family: var(--nova-display); font-weight: 700; font-size: 1rem; color: var(--nova-ink); } .pia-brand__tagline { font-size: .74rem; color: var(--nova-muted); margin-top: .1rem; } .pia-nav { display: flex; align-items: center; gap: 1rem; } .pia-nav__menu { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; } .pia-nav__menu a { display: inline-block; padding: .5rem .6rem; border-radius: 10px; font-weight: 500; color: var(--nova-ink-soft); font-size: .9rem; transition: background .2s, color .2s; } .pia-nav__menu a:hover, .pia-nav__menu .current-menu-item > a { background: var(--nova-primary-soft); color: var(--nova-primary-dark); } .pia-header-actions { display: flex; align-items: center; gap: .6rem; } .pia-menu-toggle { display: none; border: 1px solid var(--nova-line); background: #fff; color: var(--nova-ink); width: 46px; height: 46px; border-radius: 12px; font-size: 1.3rem; cursor: pointer; box-shadow: var(--nova-shadow-sm); } /* ============================================================ 5. Hero ============================================================ */ .pia-main { display: block; } .pia-hero { position: relative; padding: clamp(2rem, 4vw, 3.4rem) 0 clamp(2.6rem, 5vw, 4.2rem); background: var(--nova-grad-hero); overflow: hidden; } .pia-hero::before, .pia-hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(10px); opacity: .5; z-index: 0; animation: novaFloat 14s ease-in-out infinite; } .pia-hero::before { width: 220px; height: 220px; background: var(--nova-grad-warm); top: 12%; right: 8%; } .pia-hero::after { width: 160px; height: 160px; background: var(--nova-grad-cool); bottom: 8%; left: 6%; animation-delay: -6s; } .pia-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } .pia-hero__eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--nova-display); font-weight: 600; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--nova-primary-dark); background: #fff; padding: .5rem 1rem; border-radius: var(--nova-radius-pill); box-shadow: var(--nova-shadow-sm); margin-bottom: 1.3rem; } .pia-hero__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nova-teal); box-shadow: 0 0 0 4px rgba(13,138,124,.2); } .pia-hero h1 { margin-bottom: 1.1rem; } .pia-hero h1 .grad { background: var(--nova-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .pia-hero p { font-size: 1.16rem; color: var(--nova-ink-soft); max-width: 40ch; margin-bottom: 1.8rem; } .pia-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.4rem; } .pia-hero__meta { display: grid; grid-template-columns: repeat(4, auto); gap: 1.8rem; } .pia-stat { display: flex; flex-direction: column; } .pia-stat__value { font-family: var(--nova-display); font-weight: 700; font-size: 2.1rem; line-height: 1; background: var(--nova-grad-cool); -webkit-background-clip: text; background-clip: text; color: transparent; } .pia-stat__label { font-size: .82rem; color: var(--nova-muted); margin-top: .35rem; } .pia-hero__panel { position: relative; } .pia-hero__panel-inner { background: rgba(255,255,255,.72); backdrop-filter: blur(12px); border: 1px solid #fff; border-radius: var(--nova-radius-lg); box-shadow: var(--nova-shadow-lg); padding: 1.6rem; } .pia-hero__photo { width: 100%; height: 168px; object-fit: cover; border-radius: var(--nova-radius); margin-bottom: 1.2rem; box-shadow: var(--nova-shadow-sm); } /* Community photo band */ .pia-photo-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .pia-photo-band__item { position: relative; margin: 0; border-radius: var(--nova-radius); overflow: hidden; box-shadow: var(--nova-shadow); aspect-ratio: 4 / 3; } .pia-photo-band__item--wide { grid-row: span 2; aspect-ratio: 3 / 4; } .pia-photo-band__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--nova-ease); } .pia-photo-band__item:hover img { transform: scale(1.06); } .pia-photo-band__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1rem .9rem; color: #fff; font-family: var(--nova-display); font-weight: 600; font-size: .92rem; background: linear-gradient(180deg, rgba(16,25,46,0) 0%, rgba(16,25,46,.82) 100%); } /* Feature photo (full-width) */ .pia-section--tight { padding-top: 0; } .pia-feature-photo { position: relative; margin: 0; border-radius: var(--nova-radius-lg); overflow: hidden; box-shadow: var(--nova-shadow-lg); } .pia-feature-photo img { width: 100%; max-height: 460px; object-fit: cover; } .pia-feature-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1.6rem 1.2rem; color: #fff; font-family: var(--nova-display); font-weight: 600; font-size: 1rem; background: linear-gradient(180deg, rgba(16,25,46,0) 0%, rgba(16,25,46,.8) 100%); } .pia-hero__panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; } .pia-hero__feed { display: grid; gap: .8rem; } .pia-feed-card { display: flex; gap: .9rem; align-items: center; background: var(--nova-surface); border: 1px solid var(--nova-line); border-radius: var(--nova-radius); padding: .9rem 1rem; transition: transform .25s var(--nova-ease), box-shadow .25s var(--nova-ease); } .pia-feed-card:hover { transform: translateX(4px); box-shadow: var(--nova-shadow); } .pia-feed-card__icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--nova-primary-soft); color: var(--nova-primary); font-size: 1.1rem; } .pia-feed-card__title { font-family: var(--nova-display); font-weight: 600; font-size: 1rem; } .pia-feed-card__title a { color: var(--nova-ink); } .pia-feed-card__meta { font-size: .82rem; color: var(--nova-muted); } /* ============================================================ 6. Marquee ============================================================ */ .pia-marquee { background: var(--nova-ink); color: #fff; padding: .9rem 0; overflow: hidden; } .pia-marquee__track { display: flex; gap: 2.5rem; width: max-content; animation: novaMarquee 26s linear infinite; } .pia-marquee__item { font-family: var(--nova-display); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .9rem; display: inline-flex; align-items: center; gap: 2.5rem; opacity: .92; } .pia-marquee__item::after { content: "✦"; color: var(--nova-gold); } /* ============================================================ 7. Sections ============================================================ */ .pia-section { padding: clamp(3.2rem, 6vw, 5.5rem) 0; } .pia-section--alt { background: var(--nova-bg-soft); } .pia-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.6rem; } .pia-section__eyebrow { font-family: var(--nova-display); font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--nova-coral-dark); margin-bottom: .6rem; } .pia-section__title { margin: 0; max-width: 20ch; } .pia-section__intro { max-width: 42ch; color: var(--nova-ink-soft); font-size: 1.08rem; margin: 0; } /* ============================================================ 8. Grid + cards ============================================================ */ .pia-grid { display: grid; gap: 1.4rem; } .pia-grid--2 { grid-template-columns: repeat(2, 1fr); } .pia-grid--3 { grid-template-columns: repeat(3, 1fr); } .pia-grid--4 { grid-template-columns: repeat(4, 1fr); } .pia-card { position: relative; background: var(--nova-surface); border: 1px solid var(--nova-line); border-radius: var(--nova-radius); padding: 1.6rem; box-shadow: var(--nova-shadow-sm); transition: transform .3s var(--nova-ease), box-shadow .3s var(--nova-ease), border-color .3s; overflow: hidden; } .pia-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--nova-grad-brand); opacity: 0; transition: opacity .3s; } .pia-card:hover { transform: translateY(-6px); box-shadow: var(--nova-shadow); border-color: transparent; } .pia-card:hover::before { opacity: 1; } .pia-card__eyebrow { display: inline-block; font-family: var(--nova-display); font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--nova-primary); background: var(--nova-primary-soft); padding: .3rem .7rem; border-radius: var(--nova-radius-pill); margin-bottom: .9rem; } .pia-card__title { font-size: 1.3rem; margin: 0 0 .6rem; } .pia-card__title a { color: var(--nova-ink); } .pia-card__title a:hover { color: var(--nova-primary); } .pia-card__text { color: var(--nova-ink-soft); margin: 0 0 1rem; font-size: .98rem; } .pia-card__text:last-child { margin-bottom: 0; } .pia-card .pia-btn { margin-top: .2rem; } /* colored accent cards */ .pia-card--coral::before { background: var(--nova-grad-warm); opacity: 1; } .pia-card--teal::before { background: linear-gradient(120deg, var(--nova-teal), #0ea5e9); opacity: 1; } .pia-card--violet::before { background: linear-gradient(120deg, var(--nova-violet), var(--nova-teal)); opacity: 1; } /* ============================================================ 9. Tabs ============================================================ */ .pia-tabs__list { display: inline-flex; flex-wrap: wrap; gap: .4rem; background: #fff; padding: .4rem; border-radius: var(--nova-radius-pill); border: 1px solid var(--nova-line); box-shadow: var(--nova-shadow-sm); margin-bottom: 1.8rem; } .pia-tabs__button { font-family: var(--nova-display); font-weight: 600; font-size: .92rem; color: var(--nova-ink-soft); padding: .6rem 1.15rem; border: none; background: transparent; border-radius: var(--nova-radius-pill); cursor: pointer; transition: background .25s, color .25s; } .pia-tabs__button[aria-selected="true"] { background: var(--nova-grad-brand); color: #fff; box-shadow: var(--nova-shadow-brand); } .pia-tabs__panel[hidden] { display: none; } .pia-tabs__panel { animation: novaFade .4s var(--nova-ease); } /* ============================================================ 10. Page hero (interior pages) ============================================================ */ .pia-page-hero { position: relative; padding: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(1rem, 2vw, 1.5rem); background: var(--nova-grad-hero); overflow: hidden; } .pia-page-hero::after { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: var(--nova-grad-warm); opacity: .3; filter: blur(20px); top: -50px; right: -30px; } .pia-page-hero .pia-hero__eyebrow { margin-bottom: .55rem; } .pia-page-title { position: relative; z-index: 1; margin: 0; font-size: clamp(2.2rem, 4.5vw, 3.4rem); } .pia-page-subtitle { position: relative; z-index: 1; color: var(--nova-ink-soft); font-size: 1.15rem; max-width: 55ch; margin: .7rem 0 0; } /* Tighten the gap between the interior hero and the first content section */ .pia-page-hero + .pia-section { padding-top: clamp(1.6rem, 3vw, 2.4rem); } /* ============================================================ 11. Forms + form cards ============================================================ */ .pia-form-card { background: var(--nova-surface); border: 1px solid var(--nova-line); border-radius: var(--nova-radius-lg); box-shadow: var(--nova-shadow-sm); } input[type=text], input[type=email], input[type=search], input[type=url], input[type=tel], select, textarea { width: 100%; font-family: var(--nova-font); font-size: 1rem; color: var(--nova-ink); padding: .85rem 1rem; border: 1.5px solid var(--nova-line); border-radius: var(--nova-radius-sm); background: var(--nova-surface-2); transition: border-color .2s, box-shadow .2s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--nova-primary); box-shadow: 0 0 0 4px var(--nova-primary-soft); } textarea { resize: vertical; } label { font-weight: 600; font-size: .9rem; color: var(--nova-ink); } /* ============================================================ 12. Lists / benefits ============================================================ */ .pia-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; } .pia-benefits li { display: flex; gap: .8rem; align-items: flex-start; color: var(--nova-ink-soft); } .pia-benefits li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(22,194,163,.16); color: #0c8f78; font-weight: 700; font-size: .85rem; } .pia-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; } .pia-list__item { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.15rem; background: #fff; border: 1px solid var(--nova-line); border-radius: var(--nova-radius); } .pia-list__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--nova-primary-soft); color: var(--nova-primary); font-size: 1.1rem; } .pia-list__title { font-family: var(--nova-display); font-weight: 600; } .pia-list__meta { font-size: .82rem; color: var(--nova-muted); } /* ============================================================ 13. Team / bios ============================================================ */ .pia-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.4rem; } .pia-member { text-align: center; padding: 1.8rem 1.4rem; background: #fff; border: 1px solid var(--nova-line); border-radius: var(--nova-radius); box-shadow: var(--nova-shadow-sm); transition: transform .3s var(--nova-ease), box-shadow .3s; } .pia-member:hover { transform: translateY(-5px); box-shadow: var(--nova-shadow); } .pia-member__avatar { width: 84px; height: 84px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--nova-display); font-weight: 700; font-size: 1.6rem; color: #fff; background: var(--nova-grad-brand); } .pia-member__name { font-family: var(--nova-display); font-weight: 700; font-size: 1.15rem; margin: 0; } .pia-member__role { color: var(--nova-coral-dark); font-weight: 600; font-size: .88rem; margin: .2rem 0 .8rem; } .pia-member__bio { color: var(--nova-ink-soft); font-size: .9rem; margin: 0; } /* ============================================================ 14. Forum board ============================================================ */ .pia-board { display: grid; gap: .9rem; } .pia-board__row { display: grid; grid-template-columns: 52px 1fr auto; gap: 1.1rem; align-items: center; padding: 1.15rem 1.3rem; background: #fff; border: 1px solid var(--nova-line); border-radius: var(--nova-radius); transition: transform .25s var(--nova-ease), box-shadow .25s, border-color .25s; } .pia-board__row:hover { transform: translateX(4px); box-shadow: var(--nova-shadow); border-color: transparent; } .pia-board__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; color: #fff; background: var(--nova-grad-cool); } .pia-board__name { font-family: var(--nova-display); font-weight: 700; font-size: 1.12rem; margin: 0; } .pia-board__name a { color: var(--nova-ink); } .pia-board__desc { color: var(--nova-muted); font-size: .88rem; margin: .15rem 0 0; } .pia-board__count { text-align: center; } .pia-board__count strong { display: block; font-family: var(--nova-display); font-size: 1.3rem; color: var(--nova-primary); } .pia-board__count span { font-size: .74rem; color: var(--nova-muted); text-transform: uppercase; letter-spacing: .05em; } .pia-staff { display: flex; flex-wrap: wrap; gap: .8rem; } .pia-staff__chip { display: flex; align-items: center; gap: .7rem; padding: .55rem .9rem .55rem .55rem; background: #fff; border: 1px solid var(--nova-line); border-radius: var(--nova-radius-pill); box-shadow: var(--nova-shadow-sm); } .pia-staff__avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--nova-display); font-weight: 700; font-size: .85rem; background: var(--nova-grad-warm); } .pia-staff__name { font-weight: 600; font-size: .9rem; line-height: 1.1; } .pia-staff__role { font-size: .74rem; color: var(--nova-muted); } /* ============================================================ 15. CTA band ============================================================ */ .pia-cta { position: relative; overflow: hidden; border-radius: var(--nova-radius-lg); background: var(--nova-grad-brand); color: #fff; padding: clamp(2.4rem, 5vw, 3.6rem); display: grid; grid-template-columns: 1.4fr auto; gap: 1.6rem; align-items: center; box-shadow: var(--nova-shadow-lg); } .pia-cta::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.12); top: -120px; right: -60px; } .pia-cta h2 { color: #fff; position: relative; z-index: 1; } .pia-cta p { color: rgba(255,255,255,.9); position: relative; z-index: 1; margin: 0; max-width: 46ch; } .pia-cta__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .8rem; } .pia-cta .pia-btn--ghost { background: #fff; color: var(--nova-primary-dark); border-color: transparent; } .pia-cta .pia-btn--accent { background: var(--nova-grad-warm); } /* forum spotlight on homepage */ .pia-forum-spot { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.6rem; align-items: center; background: var(--nova-ink); border-radius: var(--nova-radius-lg); padding: clamp(2rem, 4vw, 3rem); color: #fff; position: relative; overflow: hidden; } .pia-forum-spot::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 90% 10%, rgba(123,92,255,.5), transparent 60%), radial-gradient(500px 260px at 5% 100%, rgba(22,194,163,.4), transparent 60%); } .pia-forum-spot > * { position: relative; z-index: 1; } .pia-forum-spot h2 { color: #fff; } .pia-forum-spot p { color: rgba(255,255,255,.82); } .pia-forum-spot__list { display: grid; gap: .7rem; } .pia-forum-spot__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: var(--nova-radius); transition: background .25s; } .pia-forum-spot__item:hover { background: rgba(255,255,255,.16); } .pia-forum-spot__item a { color: #fff; font-family: var(--nova-display); font-weight: 600; } .pia-forum-spot__badge { font-size: .74rem; padding: .25rem .6rem; border-radius: var(--nova-radius-pill); background: rgba(255,180,61,.2); color: var(--nova-gold); white-space: nowrap; } /* ============================================================ 16. Gallery ============================================================ */ .pia-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .pia-gallery__item { position: relative; overflow: hidden; border-radius: var(--nova-radius); box-shadow: var(--nova-shadow-sm); aspect-ratio: 4 / 3; } .pia-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--nova-ease); } .pia-gallery__item:hover img { transform: scale(1.08); } .pia-gallery__item figcaption { position: absolute; inset: auto 0 0 0; padding: 1.4rem .9rem .8rem; color: #fff; font-size: .85rem; font-weight: 600; background: linear-gradient(180deg, transparent, rgba(15,27,61,.82)); } /* ============================================================ 17. Directory (shortcode) ============================================================ */ .pia-directory__search { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; } .pia-directory__search input { flex: 1 1 240px; } .pia-directory__filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; } .pia-chip { font-family: var(--nova-display); font-weight: 600; font-size: .85rem; padding: .5rem 1rem; border-radius: var(--nova-radius-pill); border: 1.5px solid var(--nova-line); background: #fff; color: var(--nova-ink-soft); cursor: pointer; transition: all .2s; } .pia-chip:hover, .pia-chip.is-active { background: var(--nova-primary-soft); border-color: var(--nova-primary); color: var(--nova-primary-dark); } /* ============================================================ 18. Article / single ============================================================ */ .pia-article { max-width: 72ch; margin-inline: auto; color: var(--nova-ink-soft); font-size: 1.06rem; } .pia-article h2, .pia-article h3 { color: var(--nova-ink); margin-top: 1.8rem; } .pia-article img { border-radius: var(--nova-radius); margin: 1.4rem 0; } .pia-article blockquote { margin: 1.6rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--nova-primary); background: var(--nova-bg-soft); border-radius: 0 12px 12px 0; } .pia-article a { text-decoration: underline; } .pia-single, .pia-archive, .pia-page { padding: clamp(2.4rem, 5vw, 4rem) 0; } /* comments */ .pia-comments { margin-top: 2.4rem; } .pia-comment { padding: 1.2rem 1.4rem; background: #fff; border: 1px solid var(--nova-line); border-radius: var(--nova-radius); margin-bottom: 1rem; } .pia-comment__header { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; } .pia-comment__author { font-family: var(--nova-display); font-weight: 600; } /* ============================================================ 19. Footer ============================================================ */ .pia-site-footer { background: var(--nova-ink); color: #cfd6ee; padding: clamp(3rem, 5vw, 4.5rem) 0 2rem; margin-top: 2rem; } .pia-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.2rem; padding-bottom: 2.4rem; border-bottom: 1px solid rgba(255,255,255,.1); } .pia-footer__brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; } .pia-footer__brand .pia-brand__mark { box-shadow: none; } .pia-footer__brand .pia-brand__name { color: #fff; } .pia-footer__text { color: #9aa4c8; font-size: .92rem; max-width: 34ch; } .pia-footer__title { font-family: var(--nova-display); font-weight: 700; color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 1rem; } .pia-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .pia-footer__links a { color: #b9c1e0; font-size: .94rem; } .pia-footer__links a:hover { color: #fff; } .pia-footer__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; } .pia-footer__note { color: #8994bd; font-size: .86rem; margin: 0; } .pia-footer__note a { color: #fff; } /* ============================================================ 20. Reveal animation ============================================================ */ .pia-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--nova-ease), transform .7s var(--nova-ease); } .pia-reveal.is-visible { opacity: 1; transform: none; } @keyframes novaFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-26px) scale(1.05); } } @keyframes novaMarquee { to { transform: translateX(-50%); } } @keyframes novaFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* By the numbers */ .pia-bignum { font-family: var(--nova-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; background: var(--nova-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: .4rem; } /* Objectives / values */ .pia-values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } .pia-value { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; padding: 1.3rem 1.25rem; background: #fff; border: 1px solid var(--nova-line); border-radius: var(--nova-radius); box-shadow: var(--nova-shadow-sm); transition: transform .3s var(--nova-ease), box-shadow .3s; } .pia-value:hover { transform: translateY(-4px); box-shadow: var(--nova-shadow); } .pia-value__check { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; background: var(--nova-grad-cool); } .pia-value__title { font-family: var(--nova-display); font-weight: 700; font-size: 1.05rem; margin: 0 0 .3rem; } .pia-value__text { color: var(--nova-ink-soft); font-size: .9rem; margin: 0; } @media (max-width: 1080px) { .pia-values { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .pia-values { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .pia-values { grid-template-columns: 1fr; } } /* Committees */ .pia-committees { column-count: 3; column-gap: 1.6rem; } .pia-committee { display: flex; flex-direction: column; break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 1.6rem; padding: 1.8rem; background: #fff; border: 1px solid var(--nova-line); border-radius: var(--nova-radius); box-shadow: var(--nova-shadow-sm); transition: transform .3s var(--nova-ease), box-shadow .3s; border-top: 4px solid var(--nova-primary); } .pia-committee:hover { transform: translateY(-5px); box-shadow: var(--nova-shadow); } .pia-committee__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; } .pia-committee__name { font-family: var(--nova-display); font-weight: 700; font-size: 1.3rem; margin: 0; } .pia-committee__chair { display: flex; align-items: center; gap: .55rem; font-size: .82rem; font-weight: 600; color: var(--nova-ink); flex: 0 0 auto; } .pia-committee__chair-label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nova-ink-soft); font-weight: 700; } .pia-committee__avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--nova-display); font-weight: 700; font-size: .82rem; color: #fff; background: var(--nova-grad-brand); flex: 0 0 auto; } .pia-committee__goal { color: var(--nova-ink-soft); font-size: .94rem; margin: 0 0 1rem; } .pia-committee__members { font-size: .86rem; color: var(--nova-ink-soft); margin: 0 0 1rem; } .pia-committee__members strong { color: var(--nova-ink); } .pia-committee__projects { margin-top: 0; border-top: 1px solid var(--nova-line); padding-top: 1rem; } .pia-committee__projects-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--nova-primary); margin-bottom: .6rem; } .pia-committee__projects ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } .pia-committee__projects li { display: flex; flex-direction: column; gap: .1rem; padding-left: 1.1rem; position: relative; } .pia-committee__projects li::before { content: ""; position: absolute; left: 0; top: .5rem; width: 7px; height: 7px; border-radius: 50%; background: var(--nova-teal); } .pia-committee__project-name { font-weight: 600; font-size: .92rem; color: var(--nova-ink); } .pia-committee__project-desc { font-size: .82rem; color: var(--nova-ink-soft); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } .pia-reveal { opacity: 1; transform: none; } } /* ============================================================ 21. Responsive ============================================================ */ @media (max-width: 1199px) { .pia-menu-toggle { display: grid; place-items: center; } .pia-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 1rem; background: #fff; padding: 1.4rem; border-top: 1px solid var(--nova-line); border-bottom: 1px solid var(--nova-line); box-shadow: var(--nova-shadow); transform: translateY(-140%); transition: transform .35s var(--nova-ease); z-index: 90; max-height: 80vh; overflow-y: auto; } .pia-nav.is-open { transform: translateY(0); } .pia-nav__menu { flex-direction: column; align-items: stretch; gap: .2rem; } .pia-nav__menu a { padding: .8rem 1rem; font-size: 1rem; } .pia-header-actions { flex-direction: column; align-items: stretch; } .pia-header-actions .pia-btn { justify-content: center; } .pia-account-link { justify-content: center; text-align: center; border: 1px solid var(--nova-line); } } @media (max-width: 960px) { .pia-hero__grid { grid-template-columns: 1fr; } .pia-hero__panel { order: -1; } .pia-grid--3, .pia-grid--4 { grid-template-columns: repeat(2, 1fr); } .pia-footer__grid { grid-template-columns: 1fr 1fr; } .pia-cta, .pia-forum-spot { grid-template-columns: 1fr; } .pia-gallery { grid-template-columns: repeat(2, 1fr); } .pia-photo-band { grid-template-columns: repeat(2, 1fr); } .pia-photo-band__item--wide { grid-row: auto; aspect-ratio: 4 / 3; } .pia-committees { column-count: 2; } } @media (max-width: 620px) { .pia-shell { width: calc(100% - 2rem); } .pia-hero__meta { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } .pia-grid--2, .pia-grid--3, .pia-grid--4 { grid-template-columns: 1fr; } .pia-photo-band { grid-template-columns: 1fr; } .pia-footer__grid { grid-template-columns: 1fr; } .pia-gallery { grid-template-columns: 1fr; } .pia-section__head { flex-direction: column; align-items: flex-start; } .pia-board__row { grid-template-columns: 44px 1fr; } .pia-board__count { grid-column: 2; text-align: left; display: flex; gap: .4rem; align-items: baseline; } .pia-board__count strong { display: inline; } .pia-tabs__list { width: 100%; } .pia-committees { column-count: 1; } .pia-committee__head { flex-direction: column; } } /* ============================================================ Ease of use & accessibility ============================================================ */ /* Clear keyboard focus for everyone navigating without a mouse. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .pia-btn:focus-visible { outline: 3px solid var(--nova-teal); outline-offset: 2px; border-radius: 8px; } /* Header account / log-in link. */ .pia-account-link { display: inline-flex; align-items: center; font-weight: 600; font-size: .92rem; color: var(--nova-primary-dark); text-decoration: none; padding: .5rem .7rem; border-radius: 10px; white-space: nowrap; transition: background .18s var(--nova-ease), color .18s var(--nova-ease); } .pia-account-link:hover, .pia-account-link:focus-visible { background: var(--nova-primary-soft); color: var(--nova-primary); } /* Comfortable, legible form controls (helps every age group). */ .pia-main input[type="text"], .pia-main input[type="email"], .pia-main input[type="url"], .pia-main input[type="tel"], .pia-main input[type="number"], .pia-main input[type="search"], .pia-main input[type="password"], .pia-main textarea, .pia-main select { font-size: max(1rem, 16px); line-height: 1.5; } /* Friendly "how it works" instruction card for interactive pages. */ .pia-howto { background: var(--nova-surface); border: 1px solid var(--nova-line); border-left: 4px solid var(--nova-teal); border-radius: var(--nova-radius-sm); padding: 1.1rem 1.4rem; margin: 0 0 1.8rem; box-shadow: var(--nova-shadow-sm); } .pia-howto__title { font-family: var(--nova-display); font-weight: 700; font-size: 1.08rem; margin: 0 0 .55rem; color: var(--nova-ink); } .pia-howto__steps { margin: 0; padding-left: 1.25rem; color: var(--nova-ink-soft); } .pia-howto__steps li { margin: .4rem 0; font-size: 1rem; } .pia-howto__hint { margin: .8rem 0 0; font-size: .96rem; color: var(--nova-ink-soft); } /* ---------- Gallery lightbox ---------- */ html.pia-lightbox-lock { overflow: hidden; } .pia-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(9, 14, 28, 0.92); backdrop-filter: blur(4px); } .pia-lightbox.is-open { display: flex; } .pia-lightbox__stage { margin: 0; max-width: min(1100px, 92vw); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; } .pia-lightbox__img { max-width: 100%; max-height: 78vh; width: auto; height: auto; border-radius: var(--nova-radius-sm); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); background: #0b1120; } .pia-lightbox__cap { color: #eef2fb; font-size: 0.98rem; text-align: center; max-width: 60ch; line-height: 1.5; } .pia-lightbox__close, .pia-lightbox__nav { position: absolute; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, 0.12); border-radius: 999px; display: flex; align-items: center; justify-content: center; transition: background 0.2s var(--nova-ease), transform 0.2s var(--nova-ease); } .pia-lightbox__close:hover, .pia-lightbox__nav:hover { background: rgba(255, 255, 255, 0.28); } .pia-lightbox__close { top: 1.1rem; right: 1.1rem; width: 46px; height: 46px; font-size: 1.9rem; line-height: 1; } .pia-lightbox__nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 2rem; line-height: 1; } .pia-lightbox__nav:hover { transform: translateY(-50%) scale(1.06); } .pia-lightbox__prev { left: 1rem; } .pia-lightbox__next { right: 1rem; } .pia-lightbox__close:focus-visible, .pia-lightbox__nav:focus-visible { outline: 3px solid var(--nova-teal); outline-offset: 2px; } @media (max-width: 620px) { .pia-lightbox__nav { width: 44px; height: 44px; font-size: 1.6rem; } .pia-lightbox__prev { left: 0.4rem; } .pia-lightbox__next { right: 0.4rem; } } /* ---------- Members-only notice banner ---------- */ .pia-members-notice { display: flex; align-items: flex-start; gap: 1rem; background: var(--nova-primary-soft); border: 1px solid var(--nova-line); border-left: 4px solid var(--nova-primary); border-radius: var(--nova-radius-sm); padding: 1.15rem 1.4rem; margin: 0 0 1.8rem; box-shadow: var(--nova-shadow-sm); } .pia-members-notice__icon { font-size: 1.5rem; line-height: 1.4; flex: 0 0 auto; } .pia-members-notice__title { font-family: var(--nova-display); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.35rem; color: var(--nova-primary-dark); } .pia-members-notice__text { margin: 0; font-size: 0.98rem; color: var(--nova-ink-soft); line-height: 1.55; } .pia-members-notice__text a { color: var(--nova-primary); font-weight: 600; } .pia-members-notice__cta { margin-top: 0.9rem; } /* ===================================================================== Integrations: bbPress forum, Paid Memberships Pro, BuddyPress Full-width, Nova-styled so these plugin pages mesh with the site. ===================================================================== */ .pia-app { display: block; width: 100%; } .pia-app a { color: var(--nova-primary); } .pia-app a:hover { color: var(--nova-primary-dark); } .pia-app h1, .pia-app h2, .pia-app h3 { font-family: var(--nova-display); } /* ---- bbPress ---- */ #bbpress-forums { font-family: var(--nova-font); color: var(--nova-ink); max-width: 100%; } #bbpress-forums .bbp-forums, #bbpress-forums .bbp-topics, #bbpress-forums .bbp-replies, #bbpress-forums .bbp-topics-front { background: var(--nova-surface); border: 1px solid var(--nova-line); border-radius: var(--nova-radius); box-shadow: var(--nova-shadow-sm); overflow: hidden; margin-bottom: 1.6rem; } #bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer { background: var(--nova-primary-soft); color: var(--nova-primary-dark); font-family: var(--nova-display); font-weight: 600; border: 0; padding: 0.9rem 1.2rem; } #bbpress-forums li.bbp-body ul.forum, #bbpress-forums li.bbp-body ul.topic { border-top: 1px solid var(--nova-line); padding: 1rem 1.2rem; transition: background .2s var(--nova-ease); } #bbpress-forums li.bbp-body ul.forum:hover, #bbpress-forums li.bbp-body ul.topic:hover { background: var(--nova-surface-2); } #bbpress-forums .bbp-forum-title, #bbpress-forums .bbp-topic-permalink { font-family: var(--nova-display); font-weight: 600; font-size: 1.05rem; } #bbpress-forums .bbp-forum-content, #bbpress-forums p.bbp-topic-meta { color: var(--nova-muted); font-size: 0.9rem; } #bbpress-forums div.bbp-forum-author img.avatar, #bbpress-forums div.bbp-topic-author img.avatar, #bbpress-forums div.bbp-reply-author img.avatar { border-radius: 50%; } #bbpress-forums div.bbp-the-content-wrapper textarea, #bbpress-forums input[type="text"], #bbpress-forums input[type="password"], #bbpress-forums select, #bbpress-forums textarea { width: 100%; border: 1px solid var(--nova-line); border-radius: var(--nova-radius-sm); padding: 0.7rem 0.9rem; font-family: var(--nova-font); background: var(--nova-surface); } #bbpress-forums div.bbp-the-content-wrapper textarea:focus, #bbpress-forums input:focus, #bbpress-forums textarea:focus { outline: none; border-color: var(--nova-primary); box-shadow: 0 0 0 3px var(--nova-primary-soft); } #bbpress-forums .bbp-submit-wrapper button, #bbpress-forums button.submit, .bbp-login-form input[type="submit"] { background: var(--nova-primary); color: #fff; border: 0; border-radius: var(--nova-radius-pill); padding: 0.7rem 1.5rem; font-weight: 600; font-family: var(--nova-font); cursor: pointer; transition: background .2s var(--nova-ease); } #bbpress-forums .bbp-submit-wrapper button:hover, #bbpress-forums button.submit:hover { background: var(--nova-primary-dark); } .bbp-breadcrumb, .bbp-topic-pagination, .bbp-pagination { font-size: 0.9rem; color: var(--nova-muted); margin-bottom: 1rem; } .bbp-pagination-links a, .bbp-topic-pagination a { border: 1px solid var(--nova-line); border-radius: var(--nova-radius-sm); padding: 0.25rem 0.6rem; margin: 0 0.15rem; background: var(--nova-surface); } div.bbp-template-notice { border-radius: var(--nova-radius-sm); border-left: 4px solid var(--nova-teal); background: var(--nova-surface-2); } /* ---- Paid Memberships Pro (account, levels, checkout) ---- */ #pmpro_account, .pmpro_account, #pmpro_form, .pmpro_checkout, .pmpro_pricing { max-width: 100%; font-family: var(--nova-font); color: var(--nova-ink); } .pmpro_card, #pmpro_account > div, .pmpro_checkout > div, .pmpro_account-membership, .pmpro_account-profile, .pmpro_account-invoices, .pmpro_account-links { background: var(--nova-surface); border: 1px solid var(--nova-line); border-radius: var(--nova-radius); box-shadow: var(--nova-shadow-sm); padding: 1.4rem 1.6rem; margin-bottom: 1.4rem; } #pmpro_account h2, #pmpro_account h3, .pmpro_checkout h2, .pmpro_checkout h3 { font-family: var(--nova-display); color: var(--nova-primary-dark); border-bottom: 1px solid var(--nova-line); padding-bottom: 0.5rem; margin-bottom: 0.9rem; } .pmpro_account table, #pmpro_account table, table.pmpro_invoice { width: 100%; border-collapse: collapse; } .pmpro_account td, .pmpro_account th, #pmpro_account td, #pmpro_account th { border-bottom: 1px solid var(--nova-line); padding: 0.6rem 0.5rem; text-align: left; } #pmpro_form input[type="text"], #pmpro_form input[type="email"], #pmpro_form input[type="password"], #pmpro_form select, #pmpro_form textarea { width: 100%; border: 1px solid var(--nova-line); border-radius: var(--nova-radius-sm); padding: 0.7rem 0.9rem; font-family: var(--nova-font); } #pmpro_form input:focus, #pmpro_form select:focus, #pmpro_form textarea:focus { outline: none; border-color: var(--nova-primary); box-shadow: 0 0 0 3px var(--nova-primary-soft); } .pmpro_btn, .pmpro_btn-submit, input.pmpro_btn-submit-checkout, a.pmpro_btn { display: inline-block; background: var(--nova-primary); color: #fff; border: 0; border-radius: var(--nova-radius-pill); padding: 0.75rem 1.6rem; font-weight: 600; font-family: var(--nova-font); cursor: pointer; transition: background .2s var(--nova-ease); } .pmpro_btn:hover, .pmpro_btn-submit:hover, input.pmpro_btn-submit-checkout:hover { background: var(--nova-primary-dark); color: #fff; } .pmpro_account-links a { margin-right: 0.8rem; } /* ---- BuddyPress ---- */ #buddypress { font-family: var(--nova-font); color: var(--nova-ink); max-width: 100%; } #buddypress div.item-list-tabs ul li.selected a, #buddypress div.item-list-tabs ul li.current a { background: var(--nova-primary); color: #fff; border-radius: var(--nova-radius-pill); } #buddypress .standard-form input, #buddypress .standard-form textarea, #buddypress .standard-form select { border: 1px solid var(--nova-line); border-radius: var(--nova-radius-sm); padding: 0.7rem 0.9rem; font-family: var(--nova-font); } #buddypress a.button, #buddypress input[type="submit"], #buddypress ul.button-nav li a { background: var(--nova-primary); color: #fff; border: 0; border-radius: var(--nova-radius-pill); padding: 0.55rem 1.2rem; font-weight: 600; } /* ---- Live community feed (BuddyPress activity + Facebook) ---- */ .pia-feed-panel { background: var(--nova-surface); border: 1px solid var(--nova-line); border-radius: var(--nova-radius); box-shadow: var(--nova-shadow-sm); padding: 1.5rem 1.6rem; } .pia-feed-panel .pia-hero__feed { display: flex; flex-direction: column; gap: 0.7rem; } .pia-feed-panel .pia-feed-card__title a { color: var(--nova-primary); font-weight: 600; } .pia-fb-embed { width: 100%; overflow: hidden; border-radius: var(--nova-radius-sm); } .pia-fb-embed iframe { display: block; width: 100%; max-width: 100%; } /* Events + RSVP membership integration */ .pia-rsvp-badge { display: inline-block; vertical-align: middle; margin-left: 0.4rem; padding: 0.12em 0.6em; font-size: 0.72rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; color: #fff; background: var(--nova-teal); border-radius: 999px; white-space: nowrap; } .pia-access-tag { font-weight: 700; color: var(--nova-primary); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.72rem; } .pic-my-rsvps { margin: 2rem 0 0; padding: 1.5rem 1.6rem; background: #fff; border: 1px solid rgba(33, 69, 140, 0.12); border-radius: var(--nova-radius-sm, 12px); box-shadow: 0 6px 20px rgba(16, 32, 74, 0.06); } .pic-my-rsvps__title { margin: 0 0 1rem; font-size: 1.35rem; color: var(--nova-primary); } .pic-my-rsvps__list { list-style: none; margin: 0; padding: 0; } .pic-my-rsvps__item { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(33, 69, 140, 0.08); } .pic-my-rsvps__item:last-child { border-bottom: 0; } .pic-my-rsvps__badge { display: inline-block; padding: 0.12em 0.6em; font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--nova-teal); border-radius: 999px; } .pic-my-rsvps__link { font-weight: 600; color: var(--nova-primary); text-decoration: none; } .pic-my-rsvps__link:hover { text-decoration: underline; } .pic-my-rsvps__when { color: var(--nova-muted, #5a6482); font-size: 0.9rem; } .pic-my-rsvps__empty { color: var(--nova-muted, #5a6482); margin: 0; } /* Native RSVP panel (pic-community) */ .pic-rsvp { margin: 1.8rem 0; padding: 1.6rem 1.8rem; background: #fff; border: 1px solid rgba(33, 69, 140, 0.14); border-radius: 16px; box-shadow: 0 10px 30px rgba(16, 32, 74, 0.08); } .pic-rsvp__title { margin: 0 0 .3rem; color: var(--nova-primary, #21458c); font-family: var(--nova-display, 'Space Grotesk', sans-serif); } .pic-rsvp__count { margin: 0 0 1rem; color: var(--nova-muted, #5a6482); font-weight: 600; } .pic-rsvp__going { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--nova-teal, #0d8a7c); margin: 0 0 .8rem; font-size: 1.1rem; } .pic-rsvp__check { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--nova-teal, #0d8a7c); color: #fff; font-size: .9rem; } .pic-rsvp__form { margin: 0; } .pic-rsvp__note { color: var(--nova-muted, #5a6482); margin: 0 0 .8rem; } .pic-rsvp__msg { margin: 0 0 1rem; padding: .7rem 1rem; border-radius: 10px; background: rgba(33,69,140,.06); } .pic-rsvp__msg--ok { background: rgba(13,138,124,.1); color: #0a6c61; border: 1px solid rgba(13,138,124,.28); } .pic-rsvp__msg--err { background: rgba(200,50,50,.08); color: #a12b2b; border: 1px solid rgba(200,50,50,.25); } /* Native photo submission form (pic-community) */ .pic-photo-form { margin: 1.5rem 0 0; padding: 1.6rem 1.8rem; background: #fff; border: 1px solid rgba(33, 69, 140, 0.14); border-radius: 16px; box-shadow: 0 8px 24px rgba(16, 32, 74, 0.07); } .pic-photo-form__row { margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: .4rem; } .pic-photo-form__row label { font-weight: 600; color: var(--nova-ink, #1b2340); } .pic-photo-form input[type="text"], .pic-photo-form input[type="email"], .pic-photo-form input[type="file"], .pic-photo-form textarea { width: 100%; border: 1px solid rgba(33, 69, 140, 0.22); border-radius: 10px; padding: .65rem .8rem; font-family: var(--nova-font, 'Inter', sans-serif); color: var(--nova-ink, #1b2340); background: #fff; } .pic-photo-form input:focus, .pic-photo-form textarea:focus { outline: none; border-color: var(--nova-teal, #0d8a7c); box-shadow: 0 0 0 3px rgba(13, 138, 124, 0.18); } .pic-photo-form input[type="file"] { padding: .5rem; background: #f7f9fc; } .pic-photo-form__hint { font-size: .82rem; color: var(--nova-muted, #667089); } .pic-form-success, .pic-form-error, .pic-form-note { margin: 1rem 0; padding: .9rem 1.1rem; border-radius: 12px; } .pic-form-success { background: rgba(13,138,124,.1); color: #0a6c61; border: 1px solid rgba(13,138,124,.28); } .pic-form-error { background: rgba(200,50,50,.08); color: #a12b2b; border: 1px solid rgba(200,50,50,.25); } .pic-form-note { background: rgba(33,69,140,.06); color: var(--nova-ink, #1b2340); border: 1px solid rgba(33,69,140,.16); }