/* Theme Name: Color Coded Description: Child theme of Blocksy for the Color Coded transformation studio site. Author: Color Coded Template: blocksy Version: 1.0.3 Text Domain: color-coded */ /* ============================================================ COLOR CODED — CUSTOM THEME CSS Signal colors used as accents only. No rainbow mode. ============================================================ */ /* ── SIGNAL COLOR TOKENS ── */ :root { --cc-ink: #161616; --cc-paper: #f7f4ee; --cc-gray: #8a8a86; --cc-green: #3a7d44; /* Connection */ --cc-orange: #d9772b; /* Foundation */ --cc-yellow: #e8b923; /* Clarity */ --cc-purple: #6b3fa0; /* Candor */ --cc-blue: #2456a6; /* Safety */ --cc-border: #e4e0d8; } /* ── GLOBAL BODY ── */ /* !important: Blocksy's own dynamic CSS sets body background/color from --theme-palette-color-N / --theme-text-color, which (now that the palette correctly resolves) would otherwise paint the base page in Safety Blue / Connection Green instead of Paper / Ink. */ body { color: var(--cc-ink) !important; background-color: var(--cc-paper) !important; -webkit-font-smoothing: antialiased; } /* Same fix, scoped for the block editor canvas: Gutenberg renders content inside an iframe rooted at .editor-styles-wrapper, not a real , so the rule above never reaches it and Blocksy's uncorrected palette resolution shows through there instead. */ .editor-styles-wrapper { color: var(--cc-ink) !important; background-color: var(--cc-paper) !important; } /* ── TYPOGRAPHY ── */ h1, h2, h3, h4 { color: var(--cc-ink); letter-spacing: -0.01em; } h1 { line-height: 1.05; } h2 { line-height: 1.1; } p { line-height: 1.75; } /* ── GLOBAL LINKS ── */ a { color: var(--cc-ink); text-decoration-color: var(--cc-border); transition: color 0.2s, text-decoration-color 0.2s; } a:hover { color: var(--cc-green); text-decoration-color: var(--cc-green); } /* ── HEADER ── */ /* Wordmark hover — Blocksy's own `a:hover{color:var(--theme-link-hover-color)}` rule resolves that variable to Paper (matching the header background), so the wordmark link vanishes on hover. Same specificity as our global a:hover above, so this needs a more specific selector to reliably win. */ .site-title a:hover { color: var(--cc-green) !important; } /* Search icon hover — same bug, different property: Blocksy's `.ct-header-search:hover svg{fill:var(--theme-icon-hover-color, var(--theme-palette-color-2))}` also falls back to Paper since --theme-icon-hover-color is unset here. */ .ct-header-search:hover svg { fill: var(--cc-green) !important; } /* Hamburger (mobile menu trigger) hover — identical bug: Blocksy's `.ct-header-trigger:hover svg{fill:var(--theme-icon-hover-color, var(--theme-palette-color-2))}` falls back to Paper, making the icon vanish against the Paper header. */ .ct-header-trigger:hover svg { fill: var(--cc-green) !important; } #header.ct-header { border-bottom: 1px solid var(--cc-border); background: var(--cc-paper) !important; } /* The actual paint happens on this inner row, not #header itself — Blocksy sets its background-color directly to --theme-palette-color-8 (our Muted Gray slot), fully covering the outer header background above. */ #header.ct-header [data-row*="middle"] { background-color: var(--cc-paper) !important; } /* Yellow text color on the active nav item — matches the mobile drawer's already-working "current page" treatment. (An earlier version tried an absolutely-positioned underline bar via ::after, but the nav links are flex-stretched to the full 120px header height, so "bottom:-2px" landed at the outer edge of that box, buried under several nested wrapper divs. It never actually rendered — this direct color change is more robust.) */ #header-menu-1 li.current-menu-item > .ct-menu-link, #header-menu-1 li.current-menu-ancestor > .ct-menu-link { color: var(--cc-yellow) !important; } /* Nav link size and resting color — Blocksy's dynamic CSS was setting 12px and painting the resting state in Connection Green via --theme-text-color (DESIGN.md calls for Ink at rest, Green only on hover). */ #header-menu-1 .ct-menu-link { font-size: 14px !important; color: var(--cc-ink) !important; } /* Nav hover — also covers the current-page item: hovering any link (active or not) gives the same Green feedback everywhere else on the site, then reverts to Yellow when the pointer leaves. Needs the extra :hover to outrank the current-menu-item rule's own specificity above. */ #header-menu-1 .ct-menu-link:hover, #header-menu-1 li.current-menu-item > .ct-menu-link:hover, #header-menu-1 li.current-menu-ancestor > .ct-menu-link:hover { color: var(--cc-green) !important; } /* ── SEARCH / ARCHIVE CARDS ── */ /* Blocksy's default card treatment paints these in Muted Gray with a drop-shadow (violates Flat-by-Default and the Ink-Paper-only rule), and lets --theme-text-color leak through as green on the excerpt — same bug as the nav/body text elsewhere, just untouched until now. */ .entry-card { background-color: transparent !important; box-shadow: none !important; border-top: 3px solid var(--cc-border); padding-top: 24px !important; } .entry-card .entry-excerpt, .entry-card .entry-excerpt p { color: var(--cc-ink) !important; } /* Publish date is Blocksy's default meta element — not meaningful for a static page (framework/about/contact don't have a real "publish date"), so hidden rather than restyled. */ .entry-card .entry-meta { display: none; } /* Card title hover — same Paper-hover-color bug as the wordmark/nav. */ .entry-card .entry-title a:hover { color: var(--cc-green) !important; } /* ── FOOTER ── */ .ct-footer { background: var(--cc-ink) !important; color: var(--cc-paper) !important; } .ct-footer a { color: var(--cc-paper); } .ct-footer a:hover { color: var(--cc-yellow); } /* Copyright leaks the per-page dynamic text color (same bug pattern as the nav/body text elsewhere) instead of resolving to Paper/Muted Gray. */ .ct-footer-copyright { color: var(--cc-gray) !important; } /* Bullet separator between footer menu links (Contact • Privacy Policy) */ .ct-footer .footer-menu-inline .menu li + li::before { content: '•'; color: var(--cc-orange); margin: 0 10px; display: inline-block; } /* Bottom row (copyright + menu) renders as a single-column grid in Blocksy's footer builder config, stacking the two columns instead of placing them on one line. Force them side by side, copyright left / menu right. */ .ct-footer [data-row="bottom"] > .ct-container { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; } /* ── FOOTER BRAND BLOCK ── */ /* Second (and only other) appearance of the five-color signal bar, bookending the one at the top of the homepage hero — DESIGN.md's "Signal bar" rule now names hero + footer as the two sanctioned spots, not hero-only. */ .cc-footer-brand { background: var(--cc-ink); } .cc-footer-signal-bar { height: 4px; width: 100%; background: linear-gradient(to right, var(--cc-green) 20%, var(--cc-orange) 20% 40%, var(--cc-yellow) 40% 60%, var(--cc-purple) 60% 80%, var(--cc-blue) 80% ); } .cc-footer-brand-inner { padding: 56px 0 32px; border-bottom: 1px solid rgba(247, 244, 238, 0.15); } .cc-footer-logo { font-size: clamp(24px, 4vw, 32px); font-weight: 700; color: var(--cc-orange); margin: 0 0 12px; letter-spacing: -0.01em; } .cc-footer-tagline { font-style: italic; color: var(--cc-paper); opacity: 0.8; font-size: 18px; margin: 0; } /* ── BUTTONS — global refinement ── */ .wp-element-button, .wp-block-button__link { border-radius: 2px !important; font-weight: 500; letter-spacing: 0.04em; transition: background 0.2s, color 0.2s, border-color 0.2s; } /* Explicit sizing — Blocksy's theme defaults (5px 20px padding, 15px font) otherwise win by source order over the button rules below. */ .wp-block-button__link.wp-block-button__link { padding: 18px 35px; font-size: 16px; } /* Primary solid button */ .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--cc-ink) !important; color: var(--cc-paper) !important; border: 1px solid var(--cc-ink) !important; } /* Doubled class selector: Blocksy's own dynamic per-page CSS is also !important and loads after this stylesheet, so an equal-specificity hover rule loses the source-order tiebreak. This wins outright. */ .wp-block-button:not(.is-style-outline) .wp-block-button__link.wp-block-button__link:hover { background: var(--cc-green) !important; border-color: var(--cc-green) !important; } .wp-block-button__link.wp-block-button__link:focus-visible { outline: 2px solid var(--cc-blue); outline-offset: 2px; } /* Outline button */ /* color has no !important: on the hero's outline button, the explicit has-palette-color-2-color class (Paper) must win over this default — Ink text there would be invisible against the dark hero background. */ .wp-block-button.is-style-outline .wp-block-button__link { background: transparent !important; color: var(--cc-ink); border: 1px solid currentColor !important; } .wp-block-button.is-style-outline .wp-block-button__link.wp-block-button__link:hover { background: var(--cc-ink) !important; color: var(--cc-paper) !important; } /* Same outline button, but on a section that's already Ink (hero cover, or a Paper-section group re-themed to Ink like Meet Stacie): filling to Ink on hover is invisible there since it matches the section itself. Invert the other way instead — fill Paper, text Ink. */ .wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link.wp-block-button__link:hover, .has-palette-color-1-background-color .wp-block-button.is-style-outline .wp-block-button__link.wp-block-button__link:hover { background: var(--cc-paper) !important; color: var(--cc-ink) !important; } /* Arrow affordance (accepted via live mode): a "go to page" cue on the hero's secondary CTA — the arrow shifts right on hover. */ .cta-arrow__icon { display: inline-block; margin-left: 8px; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .cta-arrow:hover .cta-arrow__icon { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .cta-arrow__icon { transition: none; } } /* Yellow CTA button (used in hero) Specificity note: the plain 2-class version of this selector used to lose to ".wp-block-button:not(.is-style-outline) .wp-block-button__link" (3 classes) above, since both carry !important and specificity — not source order — decides the tie. Scoping through the same ":not(.is-style-outline)" ancestor context brings this to 4 classes so it reliably wins for solid (non-outline) buttons on dark sections. */ .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-palette-color-5-background-color, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-palette-color-5-background-color:visited { background: var(--cc-yellow) !important; color: var(--cc-ink) !important; border: 1px solid var(--cc-yellow) !important; } .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-palette-color-5-background-color:hover { background: #c9a01e !important; border-color: #c9a01e !important; color: var(--cc-ink) !important; } /* ── HERO COVER BLOCK ── */ .wp-block-cover.alignfull { position: relative; } /* Thin yellow bar at top of hero */ .wp-block-cover.alignfull:first-of-type::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--cc-green) 20%, var(--cc-orange) 20% 40%, var(--cc-yellow) 40% 60%, var(--cc-purple) 60% 80%, var(--cc-blue) 80% ); z-index: 10; } /* ── SECTION SPACING ── */ .wp-block-group.alignwide, .wp-block-group.alignfull { padding-top: 80px; padding-bottom: 80px; } /* Tighten up the Paper-background sections */ .wp-block-group.has-palette-color-2-background-color { padding-top: 70px; padding-bottom: 70px; } /* ── FRAMEWORK SIGNAL CARDS — color-coded top borders ── */ /* These target the columns in the Framework section */ .wp-block-group.has-palette-color-2-background-color .wp-block-columns .wp-block-column { border-top: 3px solid var(--cc-border); padding-top: 24px; transition: border-color 0.2s; } /* Signal color top borders by heading color */ .wp-block-group.has-palette-color-2-background-color .wp-block-column h2.has-palette-color-3-color, .wp-block-group.has-palette-color-2-background-color .wp-block-column h3.has-palette-color-3-color { /* Connection — green column */ } .wp-block-group.has-palette-color-2-background-color .wp-block-column:has(h2.has-palette-color-3-color), .wp-block-group.has-palette-color-2-background-color .wp-block-column:has(h3.has-palette-color-3-color) { border-top-color: var(--cc-green); } .wp-block-group.has-palette-color-2-background-color .wp-block-column:has(h2.has-palette-color-4-color), .wp-block-group.has-palette-color-2-background-color .wp-block-column:has(h3.has-palette-color-4-color) { border-top-color: var(--cc-orange); } .wp-block-group.has-palette-color-2-background-color .wp-block-column:has(h2.has-palette-color-5-color), .wp-block-group.has-palette-color-2-background-color .wp-block-column:has(h3.has-palette-color-5-color) { border-top-color: var(--cc-yellow); } .wp-block-group.has-palette-color-2-background-color .wp-block-column:has(h2.has-palette-color-6-color), .wp-block-group.has-palette-color-2-background-color .wp-block-column:has(h3.has-palette-color-6-color) { border-top-color: var(--cc-purple); } .wp-block-group.has-palette-color-2-background-color .wp-block-column:has(h2.has-palette-color-7-color), .wp-block-group.has-palette-color-2-background-color .wp-block-column:has(h3.has-palette-color-7-color) { border-top-color: var(--cc-blue); } /* ── DARK COVER SECTIONS (Meet Stacie, CTA) ── */ .wp-block-cover.alignfull.is-light { padding: 80px 24px; } /* ── MUTED TEXT COLOR ── */ .has-palette-color-8-color { color: var(--cc-gray) !important; } /* ── PULL QUOTE (Story page) ── */ /* Blocksy's main bundle (ct-main-styles-css) loads after this stylesheet and sets a 10px solid box border plus a decorative quote-glyph mask on blockquote::before — both violate the flat, Hairline-only border system (DESIGN.md: no box outlines, no ambient decoration). !important is needed to win the equal-specificity, later-source-order fight. */ .wp-block-pullquote { margin: 48px 0 !important; padding: 32px 0 !important; border: none !important; border-top: 1px solid var(--cc-border) !important; border-bottom: 1px solid var(--cc-border) !important; text-align: center; } .wp-block-pullquote blockquote { margin: 0; } .wp-block-pullquote blockquote::before { content: none !important; } .wp-block-pullquote p { font-size: clamp(24px, 3.5vw, 32px); font-style: italic; font-weight: 400; line-height: 1.3; color: var(--cc-ink); letter-spacing: -0.01em; } .wp-block-pullquote cite { display: none; } /* ── STATUS BADGE (in-development offerings) ── */ .cc-badge { display: inline-block; margin-top: 8px; padding: 3px 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cc-gray); border: 1px solid var(--cc-border); border-radius: 2px; } /* ── INACTIVE CTA (in-development listing entries) ── */ /* A plain span, not a link — no href to disable, so this is the only signal that the entry isn't clickable yet. Muted Gray, no arrow (an arrow implies "go to page," which would be misleading here). */ .cc-cta-inactive { color: var(--cc-gray) !important; cursor: default; } /* ── PAGE CONTENT WRAPPER ── */ .entry-content > * { margin-top: 0; margin-bottom: 0; } /* ── SECTION DIVIDER between alternating sections ── */ .wp-block-group.alignfull + .wp-block-group.alignfull { border-top: 1px solid var(--cc-border); } /* ── MOBILE MENU: FULLY OPAQUE DRAWER ── */ /* Blocksy's default .ct-panel-inner background is rgba(18,21,25,0.98) — a near-Ink color at 98% alpha, not our exact Ink token and not fully opaque. Force it solid. Scoped to #offcanvas so the search modal panel is untouched. */ #offcanvas .ct-panel-inner { background-color: var(--cc-ink) !important; } /* ── MOBILE MENU BRAND BLOCK ── */ /* Wordmark + tagline + accent rule together at the top (added via items_wrap in functions.php, not by editing Blocksy's own offcanvas template) — the tagline reads as the brand's promise right where people expect it, not as an afterthought at the end of the drawer. */ .cc-mobile-menu-brand { margin-bottom: 24px; } .mobile-menu > ul { margin: 0; } .cc-mobile-menu-logo { font-size: 20px; font-weight: 700; color: var(--cc-orange); margin: 0 0 4px; letter-spacing: -0.01em; } .cc-mobile-menu-tagline { font-size: 13px; color: var(--cc-gray); margin: 0 0 16px; } .cc-mobile-menu-logo-rule { display: block; width: 32px; height: 3px; background: var(--cc-orange); } /* ── MOBILE MENU: ITEM SPACING (editorial feel, per feedback) ── */ .mobile-menu > ul > li { margin-bottom: 18px; } .mobile-menu > ul > li:last-child { margin-bottom: 0; } .mobile-menu .ct-menu-link { font-weight: 600; } /* ── MOBILE MENU: ACTIVE PAGE HIGHLIGHT ── */ /* Same single accent for every page for now — Clarity Yellow, matching the desktop nav's existing "you are here" underline convention. */ .mobile-menu li.current-menu-item > .ct-menu-link, .mobile-menu li.current-menu-ancestor > .ct-menu-link { color: var(--cc-yellow) !important; font-weight: 700; } /* ── MOBILE MENU DIVIDER ── */ /* The mobile hamburger menu carries two extra items (Contact, Privacy Policy) beyond the four main-nav pages. nth-child(5) is the first of those two, since the menu always has the 4 main items ahead of it. */ .mobile-menu > ul > li:nth-child(5) { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cc-border); } /* ── MOBILE MENU: CLOSE BUTTON BREATHING ROOM ── */ #offcanvas .ct-panel-actions { padding: 16px !important; } #offcanvas .ct-toggle-close { --toggle-button-margin-end: 0px; --toggle-button-margin-block: 0px; } /* ── MOBILE REFINEMENTS ── */ @media (max-width: 768px) { .wp-block-group.alignwide, .wp-block-group.alignfull { padding-top: 56px; padding-bottom: 56px; padding-left: 24px !important; padding-right: 24px !important; } .wp-block-columns { gap: 32px !important; } } /* ── HOME HERO — hierarchy pass (accepted via live mode) ── */ /* The homepage's first hero commits harder to scale contrast: a dominant headline with quieted supporting text, rather than even weight across label/heading/subhead. Scoped to the first cover only via :first-of-type, matching the existing gradient signal-bar selector above. */ .wp-block-cover.alignfull:first-of-type .wp-block-cover__inner-container > p:first-child { font-size: 14px; letter-spacing: 0.25em; opacity: 0.55; margin-bottom: 14px; } .wp-block-cover.alignfull:first-of-type .wp-block-cover__inner-container > h1 { font-size: clamp(49.5px, 9.9vw, 88px); line-height: 1; letter-spacing: -0.01em; margin: 0 0 22px; } .wp-block-cover.alignfull:first-of-type .wp-block-cover__inner-container > p:nth-of-type(2) { font-size: 15px; opacity: 0.55; margin-bottom: 34px; } /* ── DIAGNOSTIC REFRAME — hierarchy pass (accepted via live mode) ── */ /* The "Difference isn't the problem" section: the diagnosis paragraph recedes, the solution paragraph steps forward in full Ink weight. */ .diagnostic-reframe h2 { font-size: clamp(30px, 5vw, 50px); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 28px; } .diagnostic-reframe p:first-of-type { opacity: 0.73; margin-bottom: 22px; } .diagnostic-reframe p:last-of-type { color: #161616; font-weight: 500; } /* Footer nav menu links -- inherit dark-section Paper/Clarity-Yellow treatment. These carry their own color from the site's general menu-link styling (tuned for the light-background header), which doesn't know it's sitting on the Ink footer here. Scoping to .ct-footer overrides that. */ .ct-footer .footer-menu-inline .ct-menu-link { color: var(--cc-paper) !important; } .ct-footer .footer-menu-inline .ct-menu-link:hover { color: var(--cc-yellow) !important; } /* ── BACK TO TOP: TRANSPARENT UNTIL HOVER ── */ /* Blocksy's dynamic CSS (driven by the Customizer color mods set for this button) outputs a solid --top-button-background-color; override with an alpha channel so the plate reads as a quiet affordance at rest, then resolves fully solid on hover. The icon itself stays fully opaque in both states, so it's always legible even when the plate is faint. Note: this is background-color alpha, not the element's own `opacity` — that property is already used by Blocksy's own scroll show/hide logic (--opacity custom property toggled via the .ct-show class), so touching it directly would break the fade-in/out behavior. */ .ct-back-to-top { background-color: rgba(22, 22, 22, 0.5) !important; } .ct-back-to-top:hover { background-color: var(--cc-green) !important; }