/*
Theme Name: PenScholar
Theme URI: https://penscholar.com
Description: Custom child theme for PenScholar.com — Academic Research & Writing Support. Built on Kadence. Implements the PenScholar brand system (navy #0B2447 / gold #C9A227) via theme.json, silo page templates, and reusable block patterns.
Author: PenScholar
Author URI: https://penscholar.com
Template: kadence
Version: 0.1.0
Requires PHP: 8.2
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: penscholar
*/
/*
* Brand color variables (--ps-navy/--ps-gold/--ps-white/--ps-off-white) and
* the has-*-color / has-*-background-color utility class overrides are
* printed inline in at wp_head priority 999 — see
* inc/enqueue.php::penscholar_print_brand_override_css(). They have to load
* later than this stylesheet to reliably beat Kadence's own Global Palette
* inline CSS in the cascade; CSS custom properties still resolve correctly
* here even though the :root definition appears later in the document.
*/
/*
* Global content container.
*
* Page templates render raw ...
* with no width constraint of their own, so without this, body copy runs
* edge-to-edge on every viewport. Full-bleed sections (hero, CTA band,
* review strip) opt back out of this constraint via the breakout rule
* below rather than living outside , so schema/landmark structure
* stays simple.
*/
main#primary {
max-width: 900px;
margin: 0 auto;
padding: 2.5rem 1.5rem 4rem;
}
main#primary h1 {
margin-top: 0;
}
/* Full-bleed breakout: lets a section inside the constrained paint
edge-to-edge while its own content re-centers at a wider (1200px) max. */
.ps-hero,
.ps-cta-band,
.ps-review-strip {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: max(1.5rem, calc(50% - 600px));
padding-right: max(1.5rem, calc(50% - 600px));
box-sizing: border-box;
}
.ps-hero,
.ps-review-strip {
padding-top: 3rem;
padding-bottom: 3rem;
}
/* Sticky header offset so anchor jumps / focus don't land underneath it. */
h1, h2, h3, h4, h5, h6 {
scroll-margin-top: 96px;
}
@media (max-width: 600px) {
main#primary {
padding: 1.75rem 1.25rem 3rem;
}
.ps-hero,
.ps-cta-band,
.ps-review-strip {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
/* Component styles that can't be expressed via theme.json presets alone.
Layout/spacing/typography should default to theme.json + block settings first. */
.ps-trust-badge-row {
display: flex;
flex-wrap: wrap;
gap: var(--wp--preset--spacing--40, 1.5rem);
align-items: center;
}
.ps-value-card {
border: 1px solid rgba(11, 36, 71, 0.1);
border-radius: 8px;
padding: var(--wp--preset--spacing--50, 2rem);
background: var(--ps-white);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ps-value-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(11, 36, 71, 0.08);
}
.ps-review-strip {
background: var(--ps-off-white);
}
.ps-review-strip .ps-reviews-placeholder {
text-align: center;
}
.ps-faq-item {
background: var(--ps-off-white, #F7F5F0);
border-radius: 8px;
margin-bottom: 0.75rem;
overflow: hidden;
}
.ps-faq-item summary {
cursor: pointer;
font-family: "Playfair Display", Georgia, serif;
font-weight: 600;
color: var(--ps-navy, #0B2447);
padding: 1rem 1.25rem;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.ps-faq-item summary::-webkit-details-marker {
display: none;
}
.ps-faq-item summary::after {
content: "+";
font-size: 1.5rem;
line-height: 1;
color: var(--ps-gold, #C9A227);
flex-shrink: 0;
transition: transform 0.2s ease;
}
.ps-faq-item[open] summary::after {
transform: rotate(45deg);
}
.ps-faq-item summary:hover {
color: var(--ps-gold, #C9A227);
}
.ps-faq-item p {
padding: 0 1.25rem 1.25rem;
margin: 0;
opacity: 0.85;
}
.ps-writer-card img {
border-radius: 8px;
border: 2px solid var(--ps-gold);
}
/* --- Top contact bar --- */
.ps-topbar {
background: var(--ps-navy, #0B2447);
}
.ps-topbar-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0.4rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.ps-topbar-whatsapp {
color: var(--ps-white, #fff);
font-size: 0.85rem;
text-decoration: none;
}
.ps-topbar-whatsapp:hover {
color: var(--ps-gold, #C9A227);
}
.ps-topbar-social {
display: flex;
gap: 0.5rem;
}
.ps-social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: var(--ps-white, #fff);
font-size: 0.65rem;
font-weight: 700;
text-decoration: none;
letter-spacing: 0.02em;
}
.ps-social-icon:hover {
background: var(--ps-gold, #C9A227);
color: var(--ps-navy, #0B2447);
}
/* --- Main header --- */
.ps-site-header {
background: var(--ps-white, #fff);
border-bottom: 1px solid rgba(11, 36, 71, 0.08);
position: sticky;
top: 0;
z-index: 100;
}
.ps-site-header-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0.75rem 1.5rem;
display: flex;
align-items: center;
gap: 2rem;
}
.ps-logo img {
display: block;
height: 40px;
width: auto;
}
.ps-primary-nav {
flex: 1;
}
#ps-primary-menu {
display: flex;
flex-wrap: wrap;
gap: 1.75rem;
list-style: none;
margin: 0;
padding: 0;
}
#ps-primary-menu a {
color: var(--ps-navy, #0B2447);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
}
#ps-primary-menu a:hover,
#ps-primary-menu li.current-menu-item > a {
color: var(--ps-gold, #C9A227);
}
.ps-header-cta {
background: var(--ps-gold, #C9A227);
color: var(--ps-navy, #0B2447);
padding: 0.65rem 1.5rem;
border-radius: 4px;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(201, 162, 39, 0.35);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ps-header-cta:hover {
background: var(--ps-navy, #0B2447);
color: var(--ps-white, #fff);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(11, 36, 71, 0.3);
}
.ps-nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 32px;
height: 32px;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.ps-nav-toggle span {
display: block;
height: 2px;
background: var(--ps-navy, #0B2447);
border-radius: 1px;
}
@media (max-width: 860px) {
.ps-header-cta {
display: none;
}
.ps-nav-toggle {
display: flex;
}
.ps-primary-nav {
flex-basis: 100%;
display: none;
}
.ps-primary-nav.is-open {
display: block;
}
#ps-primary-menu {
flex-direction: column;
gap: 0;
border-top: 1px solid rgba(11, 36, 71, 0.08);
margin-top: 0.75rem;
}
#ps-primary-menu li {
border-bottom: 1px solid rgba(11, 36, 71, 0.06);
}
#ps-primary-menu a {
display: block;
padding: 0.75rem 0;
}
}
/* --- Hero refinements --- */
.ps-eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.8rem;
color: var(--ps-gold, #C9A227);
font-weight: 700;
margin-bottom: 0.5rem;
}
.ps-hero-badge-col {
justify-content: center;
text-align: center;
}
.ps-hero-logo img {
background: var(--ps-white, #fff);
border-radius: 50%;
padding: 1.25rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.ps-hero-tagline {
font-family: "Playfair Display", Georgia, serif;
font-style: italic;
color: var(--ps-gold, #C9A227);
font-size: 1.1rem;
margin-top: 1rem;
margin-bottom: 0.25rem;
}
.wp-block-button.is-style-outline .wp-block-button__link {
border: 2px solid var(--ps-white, #fff);
color: var(--ps-white, #fff);
background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background: var(--ps-white, #fff);
color: var(--ps-navy, #0B2447);
}
/* --- Footer --- */
.ps-site-footer {
background: var(--ps-navy, #0B2447);
color: var(--ps-white, #fff);
}
.ps-footer-inner {
max-width: 1200px;
margin: 0 auto;
padding: 3rem 1.5rem 2rem;
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 2rem;
}
.ps-footer-brand p {
font-size: 0.9rem;
opacity: 0.85;
}
.ps-footer-logo {
border-radius: 50%;
background: var(--ps-white, #fff);
padding: 6px;
}
.ps-footer-col h3 {
color: var(--ps-gold, #C9A227);
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.75rem;
}
.ps-footer-col ul {
list-style: none;
margin: 0;
padding: 0;
}
.ps-footer-col li {
margin-bottom: 0.5rem;
}
.ps-footer-col a {
color: var(--ps-white, #fff);
opacity: 0.85;
text-decoration: none;
font-size: 0.9rem;
}
.ps-footer-col a:hover {
opacity: 1;
color: var(--ps-gold, #C9A227);
}
.ps-footer-bottom {
max-width: 1200px;
margin: 0 auto;
padding: 1.25rem 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
font-size: 0.85rem;
}
.ps-footer-bottom a {
color: var(--ps-gold, #C9A227);
text-decoration: none;
}
@media (max-width: 900px) {
.ps-footer-inner {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.ps-trust-badge-row {
justify-content: center;
text-align: center;
}
.ps-footer-inner {
grid-template-columns: 1fr;
}
}
/* --- Resources hub + single post --- */
.ps-resources-grid {
margin-top: 2rem;
}
.ps-pagination {
display: flex;
gap: 0.5rem;
justify-content: center;
margin: 2rem 0;
}
.ps-pagination a,
.ps-pagination span {
padding: 0.4rem 0.8rem;
border: 1px solid rgba(11, 36, 71, 0.15);
border-radius: 4px;
text-decoration: none;
color: var(--ps-navy, #0B2447);
}
.ps-pagination .current {
background: var(--ps-navy, #0B2447);
color: var(--ps-white, #fff);
}
.ps-single-post .ps-post-meta {
color: rgba(11, 36, 71, 0.6);
font-size: 0.9rem;
}
.ps-author-box {
margin: 2.5rem 0;
padding: 1.25rem 1.5rem;
background: var(--ps-off-white, #F7F5F0);
border-radius: 8px;
}
/* --- Free tools (word counter / citation generator / citation checker) --- */
.ps-tool {
margin: 2rem 0;
padding: 1.5rem;
background: var(--ps-off-white, #F7F5F0);
border-radius: 8px;
}
.ps-tool-label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
}
.ps-tool-textarea {
width: 100%;
box-sizing: border-box;
padding: 0.75rem;
border: 1px solid rgba(11, 36, 71, 0.2);
border-radius: 4px;
font-family: inherit;
font-size: 1rem;
margin-bottom: 1.25rem;
}
.ps-tool-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.ps-tool-stat {
background: var(--ps-white, #fff);
border-radius: 6px;
padding: 0.75rem;
text-align: center;
}
.ps-tool-stat span {
display: block;
font-size: 1.4rem;
font-weight: 700;
color: var(--ps-navy, #0B2447);
}
.ps-tool-stat small {
color: rgba(11, 36, 71, 0.65);
font-size: 0.75rem;
}
.ps-tool-form {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 1.25rem;
}
.ps-tool-form label {
display: flex;
flex-direction: column;
gap: 0.35rem;
font-weight: 600;
font-size: 0.9rem;
}
.ps-tool-form input,
.ps-tool-form select {
padding: 0.6rem;
border: 1px solid rgba(11, 36, 71, 0.2);
border-radius: 4px;
font-family: inherit;
font-weight: 400;
}
.ps-tool-output {
background: var(--ps-white, #fff);
border-radius: 6px;
padding: 1.25rem;
}
.ps-tool-result {
font-size: 1.05rem;
margin-bottom: 1rem;
}
.ps-tool-copy-btn,
.ps-tool-run-btn {
background: var(--ps-navy, #0B2447);
color: var(--ps-white, #fff);
border: none;
border-radius: 4px;
padding: 0.6rem 1.25rem;
font-weight: 600;
cursor: pointer;
}
.ps-tool-copy-btn:hover,
.ps-tool-run-btn:hover {
background: var(--ps-gold, #C9A227);
color: var(--ps-navy, #0B2447);
}
.ps-tool-run-btn {
display: inline-block;
margin-bottom: 1.25rem;
text-decoration: none;
}
.ps-tool-note {
font-size: 0.85rem;
color: rgba(11, 36, 71, 0.65);
margin-top: 1rem;
}
@media (max-width: 700px) {
.ps-tool-stats,
.ps-tool-form {
grid-template-columns: 1fr;
}
}
.ps-standards {
margin: 2rem 0;
}
.ps-standards .ps-writers-grid {
margin-top: 1.5rem;
}
/* --- Homepage trust builders bar --- */
.ps-trust-builders {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 2rem max(1.5rem, calc(50% - 600px));
box-sizing: border-box;
}
.ps-trust-builders-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
max-width: 1000px;
margin: 0 auto;
}
.ps-trust-builder {
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 600;
font-size: 0.95rem;
color: var(--ps-navy, #0B2447);
}
.ps-trust-builder-icon {
font-size: 1.25rem;
flex-shrink: 0;
}
@media (max-width: 700px) {
.ps-trust-builders-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.ps-trust-builders-grid {
grid-template-columns: 1fr;
}
}
.ps-checklist {
list-style: none;
margin: 0;
padding: 0;
}
.ps-checklist li {
background: var(--ps-white, #fff);
border-radius: 6px;
padding: 0.75rem 1rem;
margin-bottom: 0.5rem;
}
.ps-checklist label {
display: flex;
align-items: flex-start;
gap: 0.6rem;
cursor: pointer;
}
.ps-checklist input[type="checkbox"] {
margin-top: 0.2rem;
flex-shrink: 0;
}
/* --- How It Works step list (custom numbering, not the browser default) --- */
.ps-how-it-works-steps,
.ps-how-it-works-summary {
list-style: none;
counter-reset: ps-step;
margin: 2rem 0;
padding: 0;
display: grid;
gap: 1.25rem;
}
.ps-how-it-works-steps li,
.ps-how-it-works-summary li {
counter-increment: ps-step;
position: relative;
background: var(--ps-off-white, #F7F5F0);
border-radius: 8px;
padding: 1.5rem 1.5rem 1.5rem 4.5rem;
}
.ps-how-it-works-steps li::before,
.ps-how-it-works-summary li::before {
content: counter(ps-step);
position: absolute;
left: 1.25rem;
top: 1.5rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--ps-navy, #0B2447);
color: var(--ps-white, #fff);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-family: "Playfair Display", Georgia, serif;
}
.ps-how-it-works-steps h2 {
margin-top: 0;
margin-bottom: 0.5rem;
font-size: 1.25rem;
}
.ps-how-it-works-steps p,
.ps-how-it-works-summary li {
margin: 0;
}
/* --- Contact page --- */
.ps-contact-cta {
margin: 2rem 0;
}
.ps-contact-social {
margin: 2.5rem 0;
}
.ps-contact-social h2 {
font-size: 1.1rem;
margin-bottom: 0.75rem;
}
/* Social icons default to white-on-transparent for dark backgrounds
(header topbar, footer). On a light page background, invert to navy
circles so they stay visible. */
.ps-social-row-on-light .ps-social-icon {
background: var(--ps-navy, #0B2447);
color: var(--ps-white, #fff);
}
.ps-social-row-on-light .ps-social-icon:hover {
background: var(--ps-gold, #C9A227);
color: var(--ps-navy, #0B2447);
}