/* 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. */ --bg:#050504; --bg2:#0C0B0A; --surface:#1F1E1B; --surface2:#272521; --surface-hi:#302E28; --border:#3A3730; /* 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); } /* warm gradient ground; !important so it wins over every page's body{background:var(--bg)} */ 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:fixed !important; } /* honeycomb weave, low opacity so it reads as warm texture, not noise. Sits behind all content via a negative z-index (no per-element z-index needed). */ body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.16; 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: lift it off the ground so it reads as an inviting surface. Semi-opaque so the honeycomb still whispers through. ── */ .dropzone{ background:linear-gradient(180deg,rgba(255,240,200,0.05),transparent 60%),rgba(74,60,30,0.5) !important; box-shadow:inset 0 1px 0 rgba(255,240,200,0.08),inset 0 -3px 10px rgba(0,0,0,0.35); } .dropzone:hover,.dropzone.drag-over{ background:linear-gradient(180deg,rgba(255,240,200,0.08),transparent 60%),rgba(88,72,36,0.58) !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; } }