/** * Resume page (/resumecv/) redesign -- dark/gold restyle, theatrical * reveal, and the interactive credit browser. See * docs/superpowers/specs/2026-08-31-resume-page-redesign-design.md for * the full design. Only ever loads on this one page (see * jrh_resume_page_assets()'s own is_page() guard in * jrh-resume-page.php). */ /* Dark background for the whole page content area -- matching the rest of the site (homepage, Gallery, Director's Notes). Scoped to this page specifically via WordPress's own page-id-19 body class (the Resume page's real post ID), NOT a page-wide theme change -- the shared "RESUME" hero banner above this stays exactly as it is on every other page that uses it. !important on background-color: established necessity in this project (Photography theme sets its own page background at a specificity this needs to beat, same reasoning as every other page-level restyle already built here). */ body.page-id-19 { background-color: #0a0a0a !important; } /* The theme's own #wrapper div (a single, theme-wide element, not specific to this page) paints an opaque white background of its own directly on top of 's -- confirmed live, not guessed: body's background-color alone left the content area still white underneath. Overriding #wrapper here too, scoped the same way, is what actually lets the dark background show through. */ body.page-id-19 #wrapper { background-color: #0a0a0a !important; } body.page-id-19 .page_content_wrapper { color: rgba(255, 255, 255, 0.85); } /* "Download Resume (PDF)" -- restyled to match the site's own link treatment (Montserrat, gold) instead of the theme's plain default link color. Same href, same click behavior -- only the look changes. */ body.page-id-19 .page_content_wrapper h2 a { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(212, 175, 55, 0.95); text-decoration: none; transition: color 0.2s ease; } body.page-id-19 .page_content_wrapper h2 a:hover { color: rgba(212, 175, 55, 1); text-decoration: underline; } /* The resume image itself -- framed so it reads as "a document presented nicely" against the new dark background, rather than a plain image dropped onto it. The image's own content/format is untouched; this is presentation only. */ body.page-id-19 .wp-image-1030 { border: 1px solid rgba(212, 175, 55, 0.35); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); border-radius: 2px; } /* The theatrical reveal -- Joshua picked this directly against a working, looping mockup (not just a description): a playbill-style cover card swings open on page load, like the cover of a program being opened, to reveal the real page underneath. perspective is what makes the rotateY below read as a real 3D swing rather than a flat horizontal squash -- a perspective value only has visible effect on ITS OWN children's 3D transforms, not on an element transforming itself, so it has to live on the cover's own PARENT. REAL BUG, found live once a second, unrelated feature (the sticky header bars) needed position:fixed on this same page: this used to sit on itself, which -- completely apart from the 3D swing -- also silently makes a containing block for EVERY position:fixed element anywhere on the page (same rule as `transform`), since a perspective value does that regardless of intent. That broke position:fixed for anything else on this page, not just the cover. Scoped now to a dedicated wrapper that holds ONLY the cover (built in resume-page.js's own buildReveal(), sized to the viewport itself via its own position:fixed/inset:0), so nothing else on the page is a descendant of it and nothing else is affected. */ .jrh-resume-cover-perspective-wrap { position: fixed; inset: 0; z-index: 999999; perspective: 1200px; } .jrh-resume-cover { position: fixed; inset: 0; background: #0a0a0a; border-right: 1px solid rgba(212, 175, 55, 0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; transform-origin: left center; transform: rotateY(0deg); /* Slowed down further from an earlier 1.6s -- Joshua, live: "slower still." Matched by resume-page.js's own HOLD_MS/OPEN_MS. */ transition: transform 2.4s ease; } .jrh-resume-cover.is-open { transform: rotateY(-110deg); } /* The actual signature image, inverted to white -- not typed-out name text -- so this cover matches exactly what jrh-page-transitions' own exit overlay already shows right before handing off here (see that plugin's own page-transitions.css for the matching .jrh-page-transition--resume-dark rules). brightness(0) invert(1) turns the logo's own black artwork solid white regardless of its source coloring. */ .jrh-resume-cover-logo { max-width: min(70vw, 340px); height: auto; filter: brightness(0) invert(1); } .jrh-resume-cover-sub { font-family: Montserrat, sans-serif; color: rgba(212, 175, 55, 0.9); font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; margin-top: 10px; } @media (prefers-reduced-motion: reduce) { .jrh-resume-cover { transition-duration: 0.01ms; } } /* The interactive credit browser -- Joshua: wants "fun functionality," "different than other resume pages." The resume image above this remains the actual document; this is a second, browsable way to see the same information, styled to match the rest of the site. */ .jrh-resume-browser { max-width: 800px; margin: 50px auto 0; font-family: Montserrat, sans-serif; } /* Crossfades the whole list on a filter change instead of the rows just jumping in/out -- Joshua, live: "can it SLOWLY fade or animate instead of just jumping?" then "too fast, things need to be slower." 0.4s -> 0.8s to match. resume-page.js toggles .jrh-resume-list-fading right before it actually applies the new filter (see applyFilters() there), timed to match FILTER_FADE_MS exactly. */ .jrh-resume-list { transition: opacity 0.8s ease; } .jrh-resume-list-fading { opacity: 0; } @media (prefers-reduced-motion: reduce) { .jrh-resume-list { transition-duration: 0.01ms; } } .jrh-resume-section { margin-top: 36px; } .jrh-resume-section-heading { font-family: Georgia, serif; font-size: 20px; color: rgba(212, 175, 55, 0.95); border-bottom: 1px solid rgba(212, 175, 55, 0.35); padding-bottom: 8px; margin-bottom: 14px; } .jrh-resume-row { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 14px; } /* REAL BUG, found live from Joshua's own screenshot (a filtered-out row stayed fully visible even though its `hidden` attribute was correctly set): this rule's own `display: flex` above has the same specificity as the browser's built-in `[hidden] { display: none }` rule, and author styles always beat the browser's own default styles regardless of specificity -- so setting row.hidden = true in resume-page.js was never actually hiding anything visually. This explicit, higher-specificity override (class + attribute selector) is what makes hidden rows actually disappear. */ .jrh-resume-row[hidden] { display: none; } .jrh-resume-row-show { font-style: italic; color: #fff; flex: 1 1 260px; } .jrh-resume-row-director { color: rgba(255, 255, 255, 0.55); flex: 0 0 auto; } .jrh-resume-row-company { color: rgba(255, 255, 255, 0.75); flex: 0 0 auto; text-align: right; margin-left: auto; } .jrh-resume-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: center; } .jrh-resume-role-bar { display: flex; gap: 8px; flex-wrap: wrap; } .jrh-resume-role-btn { font-family: Montserrat, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 20px; padding: 6px 16px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .jrh-resume-role-btn.is-active { color: rgba(212, 175, 55, 0.95); border-color: rgba(212, 175, 55, 0.7); } .jrh-resume-select { font-family: Montserrat, sans-serif; font-size: 12px; color: #fff; background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 20px; padding: 6px 14px; }