/* --------------------------------------------------------------------- Sorcaeum theme styles — Color System Spec v1 Two universal constants, no exceptions, on every page regardless of section: --page-bg page background (near-white, not cream, not pure white) --header-footer header and footer background (cobalt / deep ocean blue) Every top-level section of the site (each nav item, and eventually each Sorcaeum Ether era) gets its own 4-role identity, expressed as a `.section-*` class on (see sorcaeum_body_classes() in inc/theme-setup.php) that sets these custom properties: --section-font primary text color for that section --section-hover hover / selected state --section-active active links, buttons, border accents --section-highlight background for highlighted/emphasized content :root defines a neutral PLACEHOLDER set (reusing the universal cobalt + feldspar) so any section without a confirmed assignment still renders legibly — it is intentionally not a designed scheme, just a safe fallback until the real 4 colors for that section are confirmed. `.section-eos` (EoS) is the one confirmed worked example, deliberately left unassigned to any live page until its place in the site is decided. All colors are drawn from the approved source palette only: #1C3A5E cobalt / deep ocean blue #3D5A45 spruce/hemlock green #1D5C73 dark teal / turquoise #8C4A3A jasper (rust-red) #7A4A32 reddish brown / worn leather #D8CFC4 feldspar (pale warm gray) #9C7A3C bronze / gold #A87F72 roan horse hair --------------------------------------------------------------------- */ :root { /* Universal — same on every page, every section. */ --page-bg: #FAFAF9; --header-footer: #1C3A5E; /* Neutral placeholder section role, used until a page's `.section-*` class is given confirmed colors. Reuses only approved-palette values (cobalt, feldspar) so nothing outside the family ever renders, even as a placeholder. */ --section-font: #1C3A5E; --section-hover: #1C3A5E; --section-active: #1C3A5E; --section-highlight: #D8CFC4; --surface: #FFFFFF; --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --max-width: 1140px; --radius: 6px; } /* Confirmed worked example from the Color System Spec. Not yet wired to a specific page/era — apply this class once it's confirmed which section it belongs to. */ .section-eos { --section-font: #1C3A5E; --section-hover: #3D5A45; --section-active: #7A4A32; --section-highlight: #D8CFC4; } /* Reset ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--page-bg); color: var(--section-font); font-family: var(--font-body); line-height: 1.6; } img { max-width: 100%; height: auto; display: block; } a { color: var(--section-active); text-decoration: none; } a:hover { color: var(--section-hover); } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; color: var(--section-font); } ul, ol { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; } .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--header-footer); color: #fff; padding: 0.75em 1em; z-index: 1000; } .skip-link:focus { left: 0; } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } /* Buttons ----------------------------------------------------------------- */ .button { display: inline-block; padding: 0.75em 1.5em; border-radius: var(--radius); font-weight: 600; font-family: var(--font-body); border: 1px solid transparent; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .button--primary { background: var(--section-active); color: #FFFFFF; } .button--primary:hover { background: var(--section-hover); color: #FFFFFF; } .button--ghost { background: transparent; border-color: var(--section-active); color: var(--section-active); } .button--ghost:hover { background: var(--section-active); color: #FFFFFF; } /* Header / nav — universal cobalt, not section-tinted --------------------- */ .site-header { padding: 1.25rem 0; background: var(--header-footer); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .site-branding { display: flex; align-items: center; } .site-branding .custom-logo-link { display: block; } .site-branding .custom-logo { display: block; height: 40px; width: auto; } .site-branding__link { display: flex; align-items: center; } .site-branding__name { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 600; color: #FFFFFF; letter-spacing: 0.02em; } .primary-nav__list { display: flex; gap: 1.75rem; } .primary-nav__list a { color: #FFFFFF; font-weight: 500; font-size: 0.95rem; } .primary-nav__list a:hover { opacity: 0.75; } .nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 0.5rem; } .nav-toggle__bar { width: 22px; height: 2px; background: #FFFFFF; } @media (max-width: 820px) { .nav-toggle { display: flex; } .primary-nav { display: none; width: 100%; } .primary-nav.is-open { display: block; } .primary-nav__list { flex-direction: column; gap: 1rem; padding: 1rem 0 0; } .site-header__inner { flex-wrap: wrap; } } /* Sections ------------------------------------------------------------------ Page background is universal (--page-bg), so sections never swap in an alternating background color — section identity shows through text, links, borders and highlight accents instead. */ section { padding: 3.5rem 0; } .section-title { font-size: 1.75rem; margin-bottom: 1.75rem; text-align: center; } /* Hero ------------------------------------------------------------------ */ .hero { padding: 5rem 0 4rem; text-align: center; } .hero__eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: color-mix(in srgb, var(--section-font) 65%, transparent); font-weight: 600; margin-bottom: 1rem; } .hero__title { font-size: clamp(2.5rem, 6vw, 4rem); margin-bottom: 1rem; } .hero__lede { max-width: 640px; margin: 0 auto 2rem; color: color-mix(in srgb, var(--section-font) 65%, transparent); font-size: 1.15rem; } .hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* Start Here cards -------------------------------------------------------- */ .start-here__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; } .start-card { display: block; background: var(--surface); border: 1px solid color-mix(in srgb, var(--section-font) 14%, transparent); border-radius: var(--radius); padding: 1.75rem; transition: transform 0.2s ease, border-color 0.2s ease; } .start-card:hover { transform: translateY(-3px); border-color: var(--section-active); } .start-card h3 { margin-bottom: 0.5rem; font-size: 1.15rem; } .start-card p { color: color-mix(in srgb, var(--section-font) 65%, transparent); margin: 0; font-size: 0.95rem; } /* Progress tracker -------------------------------------------------------- */ .progress-tracker__stages { display: flex; justify-content: space-between; max-width: 720px; margin: 0 auto 1.5rem; position: relative; } .progress-tracker__stages::before { content: ''; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: color-mix(in srgb, var(--section-font) 14%, transparent); z-index: 0; } .progress-tracker__stage { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; position: relative; z-index: 1; flex: 1; } .progress-tracker__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--page-bg); border: 2px solid color-mix(in srgb, var(--section-font) 20%, transparent); } .progress-tracker__stage.is-done .progress-tracker__dot { background: var(--section-active); border-color: var(--section-active); } .progress-tracker__stage.is-current .progress-tracker__dot { background: var(--section-hover); border-color: var(--section-hover); } .progress-tracker__label { font-size: 0.8rem; color: color-mix(in srgb, var(--section-font) 65%, transparent); text-align: center; } .progress-tracker__stage.is-current .progress-tracker__label { color: var(--section-font); font-weight: 600; } .progress-tracker__note { text-align: center; color: color-mix(in srgb, var(--section-font) 65%, transparent); margin-top: 1rem; } /* Post / story cards -------------------------------------------------------- */ .recent-posts__grid, .story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.75rem; } .post-card, .story-card { display: block; background: var(--surface); border: 1px solid color-mix(in srgb, var(--section-font) 14%, transparent); border-radius: var(--radius); overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease; } .post-card:hover, .story-card:hover { transform: translateY(-3px); border-color: var(--section-active); } .post-card__thumb img, .story-card__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .post-card h3, .story-card h3 { margin: 1.25rem 1.25rem 0.5rem; font-size: 1.1rem; } .post-card p, .story-card p { margin: 0 1.25rem 1.25rem; color: color-mix(in srgb, var(--section-font) 65%, transparent); font-size: 0.9rem; } .universe-hub__empty { color: color-mix(in srgb, var(--section-font) 65%, transparent); font-style: italic; } /* Store ------------------------------------------------------------------ */ .store-page__notice { background: color-mix(in srgb, var(--section-highlight) 35%, var(--surface)); border: 1px solid color-mix(in srgb, var(--section-font) 14%, transparent); border-radius: var(--radius); padding: 2rem; text-align: center; margin-top: 1.5rem; } /* Contact form -------------------------------------------------------------- */ .contact-form { max-width: 560px; margin-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem; } .form-field label { display: block; margin-bottom: 0.4rem; font-weight: 600; font-size: 0.9rem; } .form-field input, .form-field textarea { width: 100%; padding: 0.7em 0.9em; border: 1px solid color-mix(in srgb, var(--section-font) 20%, transparent); border-radius: var(--radius); background: var(--surface); color: var(--section-font); font-family: var(--font-body); font-size: 1rem; } .form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--section-active); outline-offset: 1px; } .form-field--hp { position: absolute; left: -9999px; top: -9999px; } .form-notice { padding: 0.9em 1.2em; border-radius: var(--radius); margin-top: 1.5rem; border: 1px solid color-mix(in srgb, var(--section-font) 14%, transparent); } .form-notice--success { background: color-mix(in srgb, var(--section-highlight) 40%, var(--surface)); border-color: var(--section-active); } /* Error state uses Jasper (#8C4A3A) — the palette's closest warm/alert tone — rather than a conventional red, to stay inside the approved family. Flagged in the README as a judgment call, not a spec'd color. */ .form-notice--error { background: color-mix(in srgb, #8C4A3A 18%, var(--surface)); border-color: #8C4A3A; color: #8C4A3A; } /* Generic page content -------------------------------------------------------- */ .page-content { padding: 3.5rem 0; } .page-title { font-size: 2.25rem; margin-bottom: 1.25rem; } .entry-content { max-width: 720px; color: var(--section-font); } .entry-content p { margin: 0 0 1.25rem; } .single-post__meta { color: color-mix(in srgb, var(--section-font) 65%, transparent); font-size: 0.85rem; margin-bottom: 0.5rem; } .story-single__eyebrow { margin-bottom: 1.5rem; } .story-single__eyebrow a { font-weight: 600; } .not-found { text-align: center; } /* Footer — universal cobalt, not section-tinted ---------------------------- */ .site-footer { background: var(--header-footer); padding: 3rem 0; margin-top: 2rem; } .site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } .site-footer__brand { display: flex; flex-direction: column; gap: 0.15rem; } .site-footer__name { font-family: var(--font-heading); font-weight: 600; color: #FFFFFF; } .site-footer__tagline { color: #FFFFFF; opacity: 0.75; font-size: 0.85rem; } .social-links { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; } .social-links a { color: #FFFFFF; font-size: 0.9rem; font-weight: 600; } .social-links a:hover { opacity: 0.75; } .site-footer__copy { color: #FFFFFF; opacity: 0.75; font-size: 0.85rem; margin: 0; }