/* ResumeBuzz shared warm theme: Dark Honey ground + honeycomb weave + embossed controls. Loaded LAST in each page's so it layers over the page's inline :root / body. Matches the builder redesign (build/index.html). Single source of truth for the site-wide look: tune values here and every page follows. */ :root{ /* ground + surfaces: neutral dark charcoal (only the faintest warmth). The COLOR on the page comes from the honeycomb + the accent palette below, never from brown surfaces. This keeps sections from reading as a brown wash. LIGHTENED 2026-08-29 (Blake, live: "Site is too dark", then "Lighten it further"). Measured, not eyeballed, at each step: contrast against --text (#F5F0E8) only drops to 13.54:1 at this final value, still well past WCAG AAA's 7:1 floor. --muted (#B6A98A) drops further, to 6.60:1 -- still comfortably past AA's 4.5:1 floor but below AAA's 7:1, the one real tradeoff of going this light; flagged live, Blake chose to proceed anyway. */ --bg:#2A241C; --bg2:#382F22; --surface:#453B2C; --surface2:#4F4433; --surface-hi:#5A4E3B; --border:#685A42; /* accent palette: gold primary, plus a cool aqua and a warm coral used sparingly to give sections/tiers their own identity (punch without a rainbow) */ --aqua:#4FC7B8; --aqua-dim:#2F7E74; --coral:#F2784E; --coral-dim:#A64E30; /* brighter warm gold so gold text/accents separate from the ground (was #C9A84C). The honeycomb stroke is hard-coded in the SVG, so it is unaffected by this. */ --gold:#E6C35A; /* lift muted grey into a warm, readable tone (no more cool-grey-on-warm) */ --muted:#B6A98A; /* embossing (raised card / button bevel) */ --emboss-lt:rgba(255,240,200,0.09); --emboss-dk:rgba(0,0,0,0.5); /* VALUE-RHYTHM BANDING tint (block-page.js, search-page.js, landing-page.js's #services): one shared value instead of the same rgba() literal hand-copied into 3 files, so a future retune changes here once instead of three places silently drifting out of sync. A translucent gold wash, not the near-white cream this replaced -- that composited to within ~3 RGB points of pure white regardless of what pattern sat behind it (Blake, live: "there's nothing and it's boring"). New property name, so page-local :root blocks that redefine --gold/--bg for their own light theme don't shadow this. */ --band-tint:rgba(230,195,90,0.18); } /* warm gradient ground; !important so it wins over every page's body{background:var(--bg)}. background-attachment:scroll (every page using this file already overrode fixed back to scroll except bee-page.js, which never got that pass -- fixed at the root so it no longer needs a per-page override at all). */ body{ background: radial-gradient(1100px 700px at 80% -12%, rgba(240,176,72,0.09), transparent 62%), radial-gradient(950px 720px at -8% 110%, rgba(201,127,10,0.08), transparent 58%), linear-gradient(160deg, var(--bg), var(--bg2)) !important; background-attachment:scroll !important; } /* honeycomb weave. Sits behind all content via a negative z-index (no per-element z-index needed). Bumped 0.16->0.32 (Blake, live: the light- theme sections that show this through a translucent tint instead of painting their own hex layer read as "nothing... boring" at the old opacity -- this is now the ONE honeycomb mechanism site-wide, so it needs to carry real visual weight on its own instead of leaning on a second, section-local layer to compensate. */ body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.32; background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2272%22 height=%2241.569%22 viewBox=%220 0 72 41.569%22%3E%3Cpath d=%22M-12 -20.78 L-24 0 L-48 0 L-60 -20.78 L-48 -41.57 L-24 -41.57Z M-12 20.78 L-24 41.57 L-48 41.57 L-60 20.78 L-48 0 L-24 0Z M-12 62.35 L-24 83.14 L-48 83.14 L-60 62.35 L-48 41.57 L-24 41.57Z M-12 103.92 L-24 124.71 L-48 124.71 L-60 103.92 L-48 83.14 L-24 83.14Z M24 -41.57 L12 -20.78 L-12 -20.78 L-24 -41.57 L-12 -62.35 L12 -62.35Z M24 0 L12 20.78 L-12 20.78 L-24 0 L-12 -20.78 L12 -20.78Z M24 41.57 L12 62.35 L-12 62.35 L-24 41.57 L-12 20.78 L12 20.78Z M24 83.14 L12 103.92 L-12 103.92 L-24 83.14 L-12 62.35 L12 62.35Z M60 -20.78 L48 0 L24 0 L12 -20.78 L24 -41.57 L48 -41.57Z M60 20.78 L48 41.57 L24 41.57 L12 20.78 L24 0 L48 0Z M60 62.35 L48 83.14 L24 83.14 L12 62.35 L24 41.57 L48 41.57Z M60 103.92 L48 124.71 L24 124.71 L12 103.92 L24 83.14 L48 83.14Z M96 -41.57 L84 -20.78 L60 -20.78 L48 -41.57 L60 -62.35 L84 -62.35Z M96 0 L84 20.78 L60 20.78 L48 0 L60 -20.78 L84 -20.78Z M96 41.57 L84 62.35 L60 62.35 L48 41.57 L60 20.78 L84 20.78Z M96 83.14 L84 103.92 L60 103.92 L48 83.14 L60 62.35 L84 62.35Z M132 -20.78 L120 0 L96 0 L84 -20.78 L96 -41.57 L120 -41.57Z M132 20.78 L120 41.57 L96 41.57 L84 20.78 L96 0 L120 0Z M132 62.35 L120 83.14 L96 83.14 L84 62.35 L96 41.57 L120 41.57Z M132 103.92 L120 124.71 L96 124.71 L84 103.92 L96 83.14 L120 83.14Z%22 fill=%22none%22 stroke=%22%23C9A84C%22 stroke-width=%221%22/%3E%3C/svg%3E"); background-repeat:repeat; background-size:72px 41.569px; } /* ── Solid gold buttons: brighter, rounder, embossed, active on hover ── */ .btn-gold,.btn-solid,.btn-big,.btn-apply,.btn-build{ border-radius:11px !important; box-shadow:0 5px 14px rgba(201,168,76,0.28),inset 0 1px 0 rgba(255,255,255,0.42),inset 0 -3px 6px rgba(120,80,0,0.4); transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .2s,filter .2s,background .2s; } .btn-gold:hover,.btn-solid:hover,.btn-big:hover,.btn-apply:hover,.btn-build:hover{ transform:translateY(-2px);filter:brightness(1.05); box-shadow:0 11px 26px rgba(201,168,76,0.45),inset 0 1px 0 rgba(255,255,255,0.55),inset 0 -3px 6px rgba(120,80,0,0.4); } .btn-gold:active,.btn-solid:active,.btn-big:active,.btn-apply:active,.btn-build:active{ transform:translateY(1px) scale(.99); } /* ── Outline / ghost buttons: rounder + hover lift ── */ .btn-outline,.btn-ghost,.btn-ghost-sm,.btn-search,.btn-track,.btn{ border-radius:11px !important; transition:transform .15s cubic-bezier(.2,.8,.2,1),border-color .2s,color .2s,background .2s,box-shadow .2s; } .btn-outline:hover,.btn-ghost:hover,.btn-ghost-sm:hover,.btn-search:hover,.btn-track:hover,.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,0.32); } /* ── Cards / panels: embossed, lift on hover ── */ .cta-section,.board-card{ border-radius:14px !important; box-shadow:0 2px 0 rgba(0,0,0,0.3),inset 0 1px 0 var(--emboss-lt),inset 0 -2px 6px var(--emboss-dk); transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s; } .board-card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,0,0,0.42),inset 0 1px 0 rgba(255,240,200,0.14); } /* ── Audit drop zone: bright gold, pulsing at rest, steady + highlighted on hover/drag-over so it reads as the one interactive target on the page instead of blending into the ground (Blake, live, 2026-08-29: "needs to stand out"). ── */ @keyframes dz-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(245,200,64,0.0),inset 0 1px 0 rgba(255,240,200,0.14),inset 0 -3px 10px rgba(0,0,0,0.35);} 50%{box-shadow:0 0 26px 6px rgba(245,200,64,0.38),inset 0 1px 0 rgba(255,240,200,0.14),inset 0 -3px 10px rgba(0,0,0,0.35);} } .dropzone{ border:2.5px solid #F5D666 !important; background:linear-gradient(180deg,rgba(245,200,64,0.14),rgba(154,123,46,0.28)) !important; animation:dz-pulse 2.4s ease-in-out infinite; } .dropzone:hover,.dropzone.drag-over{ animation:none; border-color:#FFE98A !important; box-shadow:0 0 0 4px rgba(245,200,64,0.22),0 0 40px 8px rgba(245,200,64,0.5), inset 0 1px 0 rgba(255,240,200,0.22),inset 0 -3px 10px rgba(0,0,0,0.3) !important; background:linear-gradient(180deg,rgba(245,200,64,0.24),rgba(154,123,46,0.4)) !important; } .dropzone-icon{ color:#FFE98A !important; } /* ── Legibility for free-floating prose over the honeycomb ── Give body-text blocks a solid patch of the PAGE ground so the weave stops behind the text. Color matches the page, so it reads as a clean gap in the honeycomb, not a card. Add class "honey-safe" to any other floating paragraph that needs it. */ .honey-safe,.upload-note,.hero-buzz,.privacy-note{ background:var(--bg); padding:0.9rem 1.2rem; border-radius:12px; } /* ── Pricing tiers: each tier gets its own accent so the row reads punchy and the color encodes the tier (Free=aqua, Pro=gold hero, Human=coral). ── */ .package-card{--tier:var(--aqua)} /* Free (first) */ .package-card.popular{--tier:var(--gold)} /* Pro */ .package-card:last-of-type{--tier:var(--coral)} /* Human Written (last) */ .package-card{border-top:3px solid var(--tier) !important} .package-card:hover{border-top-color:var(--tier) !important} .pkg-price{color:var(--tier) !important} .pkg-btn{ color:var(--tier) !important; border-color:color-mix(in srgb, var(--tier) 55%, transparent) !important; } .pkg-btn:hover{ border-color:var(--tier) !important; background:color-mix(in srgb, var(--tier) 12%, transparent) !important; } /* Pro is the hero: lifted, gold-ringed, glowing, with a filled CTA */ .package-card.popular{ transform:translateY(-8px); box-shadow:0 0 0 1px rgba(230,195,90,0.45), 0 16px 40px rgba(230,195,90,0.14); } .package-card.popular:hover{transform:translateY(-11px)} .package-card.popular .pkg-btn{ background:linear-gradient(180deg,#F5D66A,#E8A838) !important; color:#1a1206 !important;border:none !important; box-shadow:0 5px 14px rgba(232,168,56,0.35),inset 0 1px 0 rgba(255,255,255,0.5); } .package-card.popular .pkg-btn:hover{filter:brightness(1.05);transform:translateY(-2px)} .popular-badge{background:var(--gold) !important;color:#1a1206 !important} /* ── Header comb: two bees fly out and orbit it on hover, then glide back in. Same motion as the Our World card. Sizes come from --r1/--r2, set per hex by assets/js/rb-bees.js, because the comb ships at 22, 24 and 26px across the site. */ .rb-mark { position: relative; display: inline-block; line-height: 0; vertical-align: middle; } .rb-mark > svg:first-child { display: block; } .rb-bee { position: absolute; left: 50%; top: 50%; opacity: 0; pointer-events: none; overflow: visible; transition: opacity 0.35s ease, transform 0.5s ease; } @media (prefers-reduced-motion: no-preference) { @keyframes rb-fly1 { from { transform: rotate(0deg) translateX(var(--r1)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--r1)) rotate(-360deg); } } @keyframes rb-fly2 { from { transform: rotate(120deg) translateX(var(--r2)) rotate(-120deg); } to { transform: rotate(-240deg) translateX(var(--r2)) rotate(240deg); } } .wordmark:hover .rb-bee { opacity: 1; } .wordmark:hover .rb-bee.b1 { animation: rb-fly1 3s linear infinite; } .wordmark:hover .rb-bee.b2 { animation: rb-fly2 3.8s linear infinite; } } /* ══════════════════════════════════════════════════════════════════════════════ SITE FOOTER. Added 2026-07-30. This file already called itself the single source of truth for the site-wide look, but it carried ZERO footer rules, so all 8 footer pages kept their own inline copy and six different footers grew. The markup source is scripts/templates/footer.html and scripts/check-footer.mjs fails the build if any page drifts from it. Four rules below are load-bearing and were each learned by measuring a rendered page on an earlier brand, not by reading code. Do not "tidy" them away: 1. The horizontal inset is on the footer ELEMENT and rows use padding-block. A `padding: 26px 0 20px` shorthand on a row silently resets the wrapper's inline axis and shoves the footer flush left. Nothing errors. 2. .f-col a is width:fit-content. An inline-flex child of a column flex stretches across the cross axis, so hover and tap ran the FULL column width. 3. line-height is pinned on the footer AND on .f-h. Pinning the container only covers what inherits; a direct rule on the tag wins. 4. .f-col states its own box. An element-selector rule on a page reaches anything matching it, wherever it sits. ══════════════════════════════════════════════════════════════════════════════ */ .rb-footer{ background:var(--bg,#050504); color:var(--text,#EFEADF); border-top:1px solid var(--border,#3A3730); font-family:"DM Sans",system-ui,sans-serif; line-height:1.6; padding:0 24px; } .rb-footer .inner{ max-width:1100px; margin:0 auto; } /* The shared OYE World widget inserts itself as footer.firstChild on every OYE site, so it OPENS this footer. It brings an 18px bottom margin and a divider but NO top space, which leaves it pressed against the border-top. Give it that, then take it back off .f-top so the two do not stack into a 60px gap. Never remove the widget: it is cross-brand. */ /* Switched margin-top -> padding-top 2026-08-26 (matching GradBuzz's own documented reasoning: a top MARGIN on this first child collapses straight through to the footer's own edge instead of spacing the widget, invisibly). WAS 37px, WRONG (Blake, live screenshot: still uneven): that number matched the widget's padding-bottom(18) + margin-bottom(18) + border(1) COMBINED, but the border sits right at the padding-bottom boundary, so the space a viewer actually SEES below the text is just the 18px padding-bottom -- margin-bottom is past the line, invisible to the "gap to the nearest divider" comparison a person is actually making. The gap above has no divider of its own interrupting it (the one above belongs to the PREVIOUS section), so it reads as the full padding-top uninterrupted. Matching padding-top to padding-bottom (18px each) is what actually looks symmetric, not what balances the post-border margin nobody perceives as part of the gap. Same value now shared with buzzgrad.com's and buzzcompose.com's own rules. */ .rb-footer > .oyw{ padding-top:18px; } .rb-footer > .oyw + .f-top{ padding-block-start:2px; } .rb-footer .f-top{ display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; gap:22px 52px; padding-block:26px 20px; } .rb-footer .f-brand{ display:flex; align-items:center; gap:9px; font-family:"Playfair Display",Georgia,serif; font-size:18px; font-weight:700; color:#F6F1E6; line-height:1; } /* THE WORDMARK IS ONE FLEX ITEM. `ResumeBuzz` sat directly in .f-brand, which is display:flex with gap:9px, so the bare text and the span were TWO flex items and the gap opened a 9px hole in the middle of a one-word brand name. It shipped, and buzzresume.com read "Resume Buzz" in its footer until 2026-07-30. Measured on production, not guessed. The name is wrapped in .f-wm now so the gap only applies between the mark and the name. The selector below MUST be scoped to .f-wm, not .f-brand. `.rb-footer .f-brand span` also matches the new .f-wm wrapper itself, which would paint the WHOLE wordmark gold instead of just "Buzz". Only single-word names are affected: "OYE Creations" and "Bottoms Up" contain a real space, so their gap reads as that space and is correct. */ .rb-footer .f-wm{ color:#F6F1E6; } .rb-footer .f-wm span{ color:var(--gold,#E6C35A); } .rb-footer .f-brand svg{ height:22px; width:auto; flex-shrink:0; color:var(--gold,#E6C35A); } .rb-footer .f-tag{ font-size:13px; color:var(--muted,#B6A98A); margin:8px 0 0; line-height:1.45; max-width:34ch; } /* #9C9076 was #8E836B, measured 4.1:1 against the real footer background (rgb(42,36,28)) on jobs.buzzresume.com -- lightened to 4.87:1, same warm-grey hue, shared by f-domains/f-h/f-line below (only rule using this exact hex). */ .rb-footer .f-domains{ font-family:"DM Sans",ui-monospace,monospace; font-size:11px; letter-spacing:0.08em; color:#9C9076; margin-top:7px; } .rb-footer .f-social{ display:flex; gap:7px; margin-top:13px; flex-wrap:wrap; } .rb-footer .social-icon{ display:inline-flex; align-items:center; justify-content:center; width:29px; height:29px; border-radius:50%; border:1px solid var(--border,#3A3730); background:var(--surface,#1F1E1B); color:var(--muted,#B6A98A); transition:color 150ms, background 150ms, border-color 150ms, transform 150ms; } .rb-footer .social-icon svg{ width:14px; height:14px; fill:currentColor; display:block; } .rb-footer .social-icon:hover{ color:var(--bg,#050504); background:var(--gold,#E6C35A); border-color:var(--gold,#E6C35A); transform:translateY(-1px); } .rb-footer .f-col{ display:flex; flex-direction:column; align-items:flex-start; gap:0; position:static; height:auto; min-height:0; padding:0; margin:0; border:0; } .rb-footer .f-h{ font-family:"DM Sans",ui-monospace,monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:#9C9076; font-weight:500; margin:0 0 7px; line-height:1.6; transition:color 150ms; } .rb-footer .f-h:hover{ color:var(--gold,#E6C35A); } .rb-footer .f-col a{ width:fit-content; display:inline-flex; align-items:center; min-height:25px; font-size:13px; color:#D8D0BE; text-decoration:none; transition:color 150ms; } .rb-footer .f-col a:hover{ color:var(--gold,#E6C35A); } .rb-footer .f-line{ border-top:1px solid var(--surface2,#272521); padding-block:12px 16px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; font-size:11.5px; color:#9C9076; } .rb-footer .f-line a{ color:var(--muted,#B6A98A); text-decoration:none; transition:color 150ms; } .rb-footer .f-line a:hover{ color:var(--gold,#E6C35A); } /* WCAG 2.2 AA 2.5.8, target size. These rendered as an 18.4px line box: a 11.5px font's bare text, with nothing giving the anchor any height. They are the last targets in this footer still under 24px, the Our World roster having been fixed at the widget. The copyright line's "OYE Creations LLC" link is deliberately NOT included. It sits inside a sentence, which is the standard's own inline exception, and padding a link out to 24px in the middle of running text would break the line it lives in. align-items moves from baseline to center so the middot separators stay on the same optical line as the now-taller links instead of riding at the top of them. */ .rb-footer .f-legal{ display:flex; gap:7px; align-items:center; white-space:nowrap; } .rb-footer .f-legal a{ display:inline-flex; align-items:center; min-height:24px; } .rb-footer .f-legal i{ color:var(--border,#3A3730); font-style:normal; } @media (max-width:640px){ .rb-footer{ padding:0 18px; } /* Two link columns side by side, not stacked: it keeps the whole footer on one screen with nothing hidden and every target still 31px. */ .rb-footer .f-top{ grid-template-columns:1fr 1fr; gap:16px 18px; padding-block:20px 14px; } .rb-footer .f-id{ grid-column:1 / -1; } .rb-footer .f-tag{ max-width:none; } .rb-footer .f-social{ margin-top:11px; gap:8px; } .rb-footer .social-icon{ width:31px; height:31px; } .rb-footer .f-col a{ min-height:31px; font-size:13px; } .rb-footer .f-line{ padding-block:10px 14px; gap:5px; flex-direction:column; align-items:flex-start; } } @media (prefers-reduced-motion:reduce){ .rb-footer .social-icon, .rb-footer a, .rb-footer .f-h{ transition:none; } .rb-footer .social-icon:hover{ transform:none; } }