/** * Esper Library — retro homemade-internet skin (load last in ) * Targets chrome only; resume/canvas output unchanged. Respects embed preview. */ html:not(.embed-resume-preview) { scroll-behavior: auto; } html:not(.embed-resume-preview) body { background-color: var(--bg-page) !important; background-image: repeating-linear-gradient( 90deg, transparent, transparent 3px, rgba(46, 40, 32, 0.04) 3px, rgba(46, 40, 32, 0.04) 4px ), repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(46, 40, 32, 0.04) 3px, rgba(46, 40, 32, 0.04) 4px ) !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in srgb, var(--accent, #b45309) 35%, var(--bg-panel, #fffcf7)); color: var(--text-main, #45403b); } html.dark-mode ::selection, body.dark-mode ::selection { background: color-mix(in srgb, var(--primary, #fb7185) 42%, var(--bg-panel, #2a2826)); color: var(--text-main, #fafaf9); } html:not(.embed-resume-preview) .rb-nav { background: var(--bg-panel) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 3px double var(--border) !important; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2) !important; } html.dark-mode:not(.embed-resume-preview) .rb-nav, body.dark-mode:not(.embed-resume-preview) .rb-nav { background: var(--bg-panel) !important; border-bottom-color: var(--border) !important; } /* ----- Windowsy panels + cards ----- */ html:not(.embed-resume-preview) :where( .wb-card, .home-support-inner, .direct-answer-box, .blog-cta, .dm-container .dm-note, .accent-color-native, .segmented-control, .fm-item, #overflow-note, #pagefit-status, .resume-book, .esp-download-bmc, .esp-modal, .priority-toggle, .blog-controls.wb-card, .bookshelf-tip ) { border-radius: 0 !important; } html:not(.embed-resume-preview) .wb-card, html:not(.embed-resume-preview) .blog-controls.wb-card { border: 2px solid var(--border) !important; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35) !important; background: var(--bg-panel) !important; } html:not(.embed-resume-preview) .wb-card:hover, html:not(.embed-resume-preview) .blog-controls.wb-card:hover { transform: none !important; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.4) !important; } /* Index + landing “marketing” panels (large inline border-radius) */ html:not(.embed-resume-preview) :where( .how-it-works, .step-card, .step-number, .tool-card, .icon-wrap, .feature-item, .faq-item, .industry-insights-section, .industry-stat-card, .stat-box, .blog-teaser-card ) { border-radius: 0 !important; } html:not(.embed-resume-preview) :where(.how-it-works, .tool-card, .step-card, .faq-item, .industry-insights-section, .industry-stat-card, .stat-box, .blog-teaser-card) { border: 2px solid var(--border) !important; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3) !important; } html:not(.embed-resume-preview) .step-number { border: 2px solid #0a0a0a !important; } html:not(.embed-resume-preview) :where(.how-it-works:hover, .tool-card:hover, .blog-teaser-card:hover) { transform: translate(-2px, -2px) !important; } html:not(.embed-resume-preview) .direct-answer-box { border: 2px solid var(--border) !important; border-left: 6px solid var(--accent) !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3) !important; } html:not(.embed-resume-preview) .blog-cta { border: 2px solid var(--border) !important; background: color-mix(in srgb, var(--bg-panel) 90%, var(--secondary) 10%) !important; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35) !important; } html:not(.embed-resume-preview) .home-support-inner { border: 2px solid var(--border) !important; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3) !important; } /* ----- Buttons ----- */ html:not(.embed-resume-preview) :where(.btn-primary, a.btn-primary) { border-radius: 0 !important; border: 2px solid #0a0a0a !important; box-shadow: 3px 3px 0 #000 !important; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35) !important; } html:not(.embed-resume-preview) :where(.btn-primary, a.btn-primary):hover { transform: translate(-1px, -1px) !important; box-shadow: 4px 4px 0 #000 !important; } html:not(.embed-resume-preview) :where(.btn-primary, a.btn-primary):active { transform: translate(1px, 1px) !important; box-shadow: 2px 2px 0 #000 !important; } html:not(.embed-resume-preview) :where(.btn-soft, .btn-secondary, button.secondary) { border-radius: 0 !important; border: 2px solid color-mix(in srgb, var(--primary, #b4232a) 28%, var(--border, #c4bfb6)) !important; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18) !important; background: var(--bg-panel, #fffcf7) !important; color: color-mix(in srgb, var(--primary, #b4232a) 72%, #ffffff) !important; } html:not(.embed-resume-preview) :where(.btn-soft, .btn-secondary, button.secondary):hover { transform: translate(-1px, -1px) !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.22) !important; background: color-mix(in srgb, var(--primary, #b4232a) 8%, var(--secondary, #f7f4ef)) !important; border-color: color-mix(in srgb, var(--primary, #b4232a) 45%, var(--border, #c4bfb6)) !important; color: var(--primary, #b4232a) !important; } html:not(.embed-resume-preview) :where(.btn-ghost, .btn-sm) { border-radius: 0 !important; border: 2px solid var(--border) !important; } html:not(.embed-resume-preview) .blog-platform-footer :where(.btn-primary, .btn-secondary), html:not(.embed-resume-preview) body.esp-platform-doc :where(.btn-primary, .btn-secondary) { border-radius: 0 !important; } html:not(.embed-resume-preview) .esp-nav-utility-btn { border-radius: 0 !important; border: 2px solid var(--border) !important; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2) !important; } /* ----- Form controls ----- */ html:not(.embed-resume-preview) :where(.form-control, input, textarea, select) { border-radius: 0 !important; border: 2px solid var(--border) !important; box-shadow: inset 1px 1px 0 #fff8e8, inset -1px -1px 0 rgba(0, 0, 0, 0.08) !important; } html:not(.embed-resume-preview) .segmented-control { border-radius: 0 !important; border: 2px solid var(--border) !important; } html:not(.embed-resume-preview) .segment-btn { border-radius: 0 !important; } html:not(.embed-resume-preview) .accent-color-native { border-radius: 0 !important; border: 2px solid var(--border) !important; } /* ----- Blog / marketing headings (still vars; slightly homespun) ----- */ html:not(.embed-resume-preview) .blog-article h1, html:not(.embed-resume-preview) .section.hero .section-title, html:not(.embed-resume-preview) .hero h1 { font-weight: 800 !important; letter-spacing: 0.03em !important; text-transform: none; } /* ----- Support / BMC blocks ----- */ html:not(.embed-resume-preview) .esp-download-bmc { border-radius: 0 !important; border: 2px solid var(--border) !important; border-left: 6px solid var(--accent) !important; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3) !important; } html:not(.embed-resume-preview) .esp-download-bmc-btn { border-radius: 0 !important; border: 2px solid #0a0a0a !important; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35) !important; } html:not(.embed-resume-preview) .esp-bmc-link { text-decoration: none !important; } html:not(.embed-resume-preview) .esp-bmc-link:hover { text-decoration: underline !important; text-underline-offset: 2px; } /* ----- Footer / platform ----- */ html:not(.embed-resume-preview) .footer, html:not(.embed-resume-preview) .blog-platform-footer, html:not(.embed-resume-preview) .platform-footer-sitemap { border-top: 3px double var(--border) !important; } /* Platform landing (index): avoid double rules above privacy + sitemap */ html:not(.embed-resume-preview) body.esp-platform-home .footer, html:not(.embed-resume-preview) body.esp-platform-home .platform-footer-sitemap { border-top: none !important; } /* ----- Fit manager + bookshelf ----- */ html:not(.embed-resume-preview) .fm-item, html:not(.embed-resume-preview) .resume-book, html:not(.embed-resume-preview) .book-btn { border-radius: 0 !important; border: 2px solid var(--border) !important; } html:not(.embed-resume-preview) .active-badge { border-radius: 0 !important; border: 1px solid #0a0a0a !important; } html:not(.embed-resume-preview) .status-badge { border-radius: 0 !important; } html:not(.embed-resume-preview) .arrow-btn { border-radius: 0 !important; } /* ----- Steps / tabs (builder nav) ----- */ html:not(.embed-resume-preview) .rb-steps button, html:not(.embed-resume-preview) .blog-topic-steps button, html:not(.embed-resume-preview) .blog-sort-steps button { border-radius: 0 !important; } /* ----- Modals / drawer ----- */ html:not(.embed-resume-preview) .esp-modal { border-radius: 0 !important; border: 3px solid var(--border) !important; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45) !important; } html:not(.embed-resume-preview) .esp-library-drawer-support { border-top: 2px dashed var(--border) !important; } /* ----- Dark mode: amber wash over grid ----- */ html.dark-mode:not(.embed-resume-preview) body { background-image: radial-gradient(ellipse at top, rgba(255, 140, 0, 0.08), transparent 55%), repeating-linear-gradient( 90deg, transparent, transparent 3px, rgba(255, 200, 120, 0.04) 3px, rgba(255, 200, 120, 0.04) 4px ), repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(255, 200, 120, 0.04) 3px, rgba(255, 200, 120, 0.04) 4px ) !important; } /* ----- Embedded resume iframe preview: keep paperwhite (page rules apply separately) ----- */ html.embed-resume-preview body { background: #fff !important; background-image: none !important; }