/* ============================================================ Pearl Rock — base layer The only stylesheet loaded on every request. Reset, design tokens and the fallback header/footer. Every class is prefixed `prc-`. An unprefixed utility class is a liability under WordPress: core adds bare classes such as `page`, `home`, `single` and `search` to , and a plain `.page{}` rule silently styles the whole document. ============================================================ */ /* ---------- design tokens ---------- The Pearl Rock palette. Phase 2 will let the brand three be overridden from Theme Options via an inline :root block; the values here are the shipped defaults. */ :root{ /* brand */ --prc-cream: #FDF8F4; --prc-blush: #FBEADF; --prc-blush-deep: #F5DCCC; --prc-ink: #2C2420; --prc-ink-soft: #56483F; --prc-muted: #8A7A70; --prc-gold: #C6A570; --prc-gold-deep: #A9873F; --prc-gold-pale: #E7D6B8; --prc-white: #fff; --prc-line: rgba(169, 135, 63, .24); /* semantic aliases — what components actually reference */ --prc-primary: var(--prc-gold-deep); --prc-secondary: var(--prc-ink); --prc-accent: var(--prc-gold); --prc-bg: var(--prc-cream); --prc-surface: var(--prc-blush); --prc-text: var(--prc-ink); --prc-text-muted: var(--prc-ink-soft); --prc-border: var(--prc-line); --prc-shadow-sm: 0 2px 10px rgba(44, 36, 32, .04); --prc-shadow-md: 0 18px 40px -22px rgba(44, 36, 32, .20); --prc-shadow-lg: 0 40px 80px -40px rgba(44, 36, 32, .30); /* type — sans-serif throughout, no serif display face */ --prc-font: "Jost", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif; --prc-font-size: 16px; --prc-line-height: 1.65; --prc-ease: cubic-bezier(.22, .61, .36, 1); --prc-ease-out: cubic-bezier(.16, 1, .3, 1); --prc-wrap: 1280px; --prc-gutter: clamp(20px, 5vw, 64px); --prc-radius: 2px; } /* ---------- reset ---------- */ *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } } body{ margin: 0; background: var(--prc-bg); color: var(--prc-text); font-family: var(--prc-font); font-size: var(--prc-font-size); font-weight: 300; line-height: var(--prc-line-height); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video, canvas{ display: block; max-width: 100%; height: auto; } a{ color: inherit; } button{ font: inherit; } h1, h2, h3, h4, h5, h6{ font-weight: 300; line-height: 1.15; letter-spacing: -.01em; color: var(--prc-ink); } /* ---------- layout ---------- */ .prc-wrap{ width: 100%; max-width: var(--prc-wrap); margin-inline: auto; padding-inline: var(--prc-gutter); } .prc-main{ min-height: 40vh; } /* ---------- accessibility ---------- */ .prc-skip-link{ position: fixed; top: -100px; left: 16px; z-index: 1000; padding: 12px 20px; background: var(--prc-gold-deep); color: #fff; border-radius: var(--prc-radius); text-decoration: none; transition: top .2s var(--prc-ease); } .prc-skip-link:focus{ top: 16px; } :focus-visible{ outline: 2px solid var(--prc-gold-deep); outline-offset: 3px; } .screen-reader-text{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- fallback header / footer ---------- Only visible when Elementor is inactive or no template is assigned. Styled on-brand so the safety net is presentable, not just functional. */ .prc-header{ background: rgba(253, 248, 244, .94); border-bottom: 1px solid var(--prc-line); } .prc-header__inner, .prc-footer__inner{ display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; padding-block: 22px; } .prc-header__title{ font-size: 1.3rem; font-weight: 400; letter-spacing: .04em; text-decoration: none; color: var(--prc-gold-deep); } .prc-menu{ display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; } .prc-menu a{ text-decoration: none; color: var(--prc-ink-soft); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; } .prc-menu a:hover, .prc-menu .current-menu-item > a{ color: var(--prc-ink); } .prc-footer{ margin-top: 64px; border-top: 1px solid var(--prc-line); background: var(--prc-blush); } .prc-footer__copy{ margin: 0; color: var(--prc-ink-soft); font-size: .85rem; } /* ---------- listings ---------- */ .prc-entry{ margin-block: 40px; } .prc-entry__title{ margin: 12px 0 8px; font-size: 1.4rem; font-weight: 400; } .prc-entry__title a{ text-decoration: none; } .prc-entry__excerpt{ color: var(--prc-text-muted); } .prc-empty{ padding-block: 80px; text-align: center; } .prc-pagination{ margin-block: 48px; } /* ---------- singular ---------- */ .prc-main--builder{ display: block; } .prc-entry--single{ padding-block: clamp(32px, 6vw, 72px); } .prc-entry__header{ margin-bottom: 24px; } .prc-entry__title{ margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); } .prc-entry__media{ margin: 0 0 32px; } .prc-entry__content{ max-width: 72ch; color: var(--prc-ink-soft); } .prc-entry__content > * + *{ margin-top: 1.1em; } .prc-entry__content a{ color: var(--prc-gold-deep); } .prc-archive__title{ margin-block: clamp(32px, 5vw, 56px) 8px; font-size: clamp(1.6rem, 3vw, 2.2rem); } .prc-archive__intro{ color: var(--prc-text-muted); } .prc-page-links{ margin-top: 24px; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }