/* ============================================================================ Conxfolio V4-c — "GALLERY" signature layer ---------------------------------------------------------------------------- Loaded AFTER styles.css. Everything here is additive and scoped to .folio-v4c, so removing this one returns the page to the plain V4 base. Zero colour literals: every value comes from tokens.css. The five moves, in order of how loud they are: 1 PAPER PER PRODUCT four grounds, one per product, ink stays ink 2 TYPE AS ART the stat band becomes a poster, once per home page 3 THE GALLERY work hangs on a hairline rail under mono plaques 4 MATERIALITY grain, hard shadow, folded corner, mono numerals 5 MOTION WITH MEANING type / ink / count / print — all reduced-motion gated ========================================================================== */ /* ========================================================================== 1 · PAPER PER PRODUCT The page ground is the product's stock. Set once on from the route. ========================================================================== */ body.folio-v4c[data-cx-product="resume"] { --cx-page-tint: var(--cx-tint-resume); } body.folio-v4c[data-cx-product="ats"] { --cx-page-tint: var(--cx-tint-ats); } body.folio-v4c[data-cx-product="letter"] { --cx-page-tint: var(--cx-tint-letter); } body.folio-v4c[data-cx-product="portfolio"] { --cx-page-tint: var(--cx-tint-portfolio); } body.folio-v4c { background: var(--cx-page-tint); } .folio-v4c #main { background: transparent; } .folio-v4c[data-cx-product] .ats-product, .folio-v4c[data-cx-product] .cover-editor-product, .folio-v4c[data-cx-product] .portfolio-product, .folio-v4c[data-cx-product] .career-resume-product, .folio-v4c[data-cx-product] .resume-entry, .folio-v4c[data-cx-product] .career-workspace { background: transparent; } /* The workspace's four cards each carry their own product's stock, so the workspace reads as four sheets on a desk rather than four identical tiles. */ .folio-v4c .career-resume-artifact { --cx-card-tint: var(--cx-tint-resume); } .folio-v4c .career-ats-artifact { --cx-card-tint: var(--cx-tint-ats); } .folio-v4c .career-letter-artifact { --cx-card-tint: var(--cx-tint-letter); } .folio-v4c .career-portfolio-artifact { --cx-card-tint: var(--cx-tint-portfolio); } .folio-v4c .career-artifact { background: var(--cx-card-tint, var(--cx-paper)); border: 1px solid var(--cx-line); border-radius: var(--cx-r-md); } .folio-v4c .career-artifact > header { border-bottom: 1px solid var(--cx-line); background: transparent; } /* The stock has to be visible on the card, so the sheet inside it steps back to true paper — the tint is the mount, the sheet is the work. */ .folio-v4c .career-artifact .artifact-resume-sheet, .folio-v4c .career-artifact .artifact-ats-sheet, .folio-v4c .career-artifact .artifact-letter-sheet, .folio-v4c .career-artifact .artifact-portfolio-board > div { background: var(--cx-paper); } /* Same four stocks on the four hero acts: the act IS the product. */ .folio-v4c .cxh-act[data-act="0"] { --cx-card-tint: var(--cx-tint-resume); } .folio-v4c .cxh-act[data-act="1"] { --cx-card-tint: var(--cx-tint-letter); } .folio-v4c .cxh-act[data-act="2"] { --cx-card-tint: var(--cx-tint-ats); } .folio-v4c .cxh-act[data-act="3"] { --cx-card-tint: var(--cx-tint-portfolio); } .folio-v4c .cxh-act { background: var(--cx-card-tint, var(--cx-paper)); } .folio-v4c .cxh-act .cxh-stage { background: transparent; } /* ========================================================================== 2 · TYPE AS ART — the poster moment "37 · 15 · 4 · 1" stops being a stat strip and becomes the largest type on the page. Serif numerals at 96px+ on 1440, mono labels underneath, hairline between. One poster per home page and no more. ========================================================================== */ .folio-v4c .canvas-promise { /* The base skin painted this strip as a DARK BAND, and the dark-band block in styles.css re-points --cx-ink / --cx-paper for anything inside it. The poster is printed, not inverted, so both names are pinned back to their absolute values here — otherwise "37" renders in panel-ink on paper and is all but invisible, which is exactly what the first render did. */ --cx-ink: var(--cx-ink-abs); --cx-paper: var(--cx-paper-abs); --cx-ink60: var(--cx-ink60-abs); --cx-ink30: var(--cx-ink30-abs); --cx-line: var(--cx-line-abs); --cx-line-strong: var(--cx-line-strong-abs); --cx-accent: var(--cx-ink-abs); --text-strong: var(--cx-ink-abs); --text-muted: var(--cx-ink60-abs); --text-subtle: var(--cx-ink60-abs); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: var(--cx-s20) clamp(var(--cx-s6), 6vw, var(--cx-s24)) var(--cx-s16); border-top: 1px solid var(--cx-line); border-bottom: 1px solid var(--cx-line); background: var(--cx-paper); color: var(--cx-ink); } .folio-v4c .canvas-promise > span { display: block; min-height: 0; padding: 0 var(--cx-s4); text-align: left; border: 0; border-right: 1px solid var(--cx-line); } .folio-v4c .canvas-promise > span:last-child { border-right: 0; } .folio-v4c .canvas-promise b { display: block; /* the floor is --cx-sig-poster-min (96px); the clamp above never goes under it at 1440 and the gate measures the rendered px, not the declaration. */ font: 400 var(--cx-sig-poster) / .82 var(--cx-font-display); color: var(--cx-ink); letter-spacing: -.02em; font-variant-numeric: lining-nums; } .folio-v4c .canvas-promise small { display: block; max-width: none; margin-top: var(--cx-s4); padding-top: var(--cx-s3); border-top: 1px solid var(--cx-line); font: 500 var(--cx-t-label) / 1.5 var(--cx-font-mono); letter-spacing: var(--cx-track-label); text-transform: uppercase; color: var(--cx-ink60); } @media (max-width: 900px) { .folio-v4c .canvas-promise { grid-template-columns: 1fr 1fr; row-gap: var(--cx-s10); padding: var(--cx-s12) var(--cx-s5); } .folio-v4c .canvas-promise > span:nth-child(2) { border-right: 0; } .folio-v4c .canvas-promise b { font-size: clamp(64px, 20vw, 104px); } } /* ========================================================================== 3 · THE GALLERY — a white wall, a rail, and plaques Both rails (37 résumé templates, 15 portfolio worlds) are hung the same way: the work sits on a hairline that runs the full width of the wall, and the caption below is a museum plaque — mono, uppercase, quiet, numbered. ========================================================================== */ .folio-v4c .canvas-resume-gallery, .folio-v4c .canvas-portfolio-gallery { position: relative; background: var(--cx-paper); } /* the rail: one line, one height, all the way across the wall */ .folio-v4c .canvas-resume-rail, .folio-v4c .canvas-world-rail { position: relative; align-items: end; padding-bottom: var(--cx-s10); scrollbar-color: var(--cx-line-strong) transparent; } .folio-v4c .canvas-resume-rail::before, .folio-v4c .canvas-world-rail::before { content: ""; position: absolute; z-index: 0; right: 0; bottom: var(--cx-s16); left: 0; height: 1px; background: var(--cx-sig-rail); } .folio-v4c .canvas-resume-card, .folio-v4c .canvas-world-card { position: relative; z-index: 1; } /* the frame: a hung sheet, hairline mount, one hard shadow off the wall */ .folio-v4c .canvas-resume-preview, .folio-v4c .canvas-world-card > span:first-of-type { border: 1px solid var(--cx-line); border-radius: 0; background: var(--cx-paper); box-shadow: var(--cx-shadow-raise); transition: transform var(--cx-dur-base) var(--cx-ease), box-shadow var(--cx-dur-base) var(--cx-ease); } .folio-v4c .canvas-resume-card:hover .canvas-resume-preview, .folio-v4c .canvas-world-card:hover > span:first-of-type { transform: translateY(-6px); box-shadow: var(--cx-shadow-lift); } /* the plaque */ .folio-v4c .canvas-resume-card > span:last-child, .folio-v4c .canvas-world-card { align-content: start; } .folio-v4c .canvas-resume-card b, .folio-v4c .canvas-world-card > b { font: 400 var(--cx-t-d5) / 1.15 var(--cx-font-display); color: var(--cx-ink); } .folio-v4c .canvas-resume-card small, .folio-v4c .canvas-world-card > small, .folio-v4c .canvas-resume-card em, .folio-v4c .canvas-world-card > em { font: 500 var(--cx-t-micro) / 1.5 var(--cx-font-mono); letter-spacing: var(--cx-track-label); text-transform: uppercase; font-style: normal; color: var(--cx-sig-plaque-fg); } .folio-v4c .canvas-world-card > em { color: var(--cx-ink); } /* A plaque is not a verdict: "ATS-SAFE" is a description of the template, not a check that passed, so it is not printed in the OK green. */ .folio-v4c .canvas-resume-card em { color: var(--cx-ink60); } /* ========================================================================== 4 · MATERIALITY — grain, hard shadow, folded corner, engraved numerals ========================================================================== */ /* Grain. Two offset dot fields at 2.5% and 1.5% ink: at 100% it reads as stock, at 200% it still reads as stock. It never lands on text because it is painted on the ground and on card backgrounds only. */ body.folio-v4c, .folio-v4c .cx-grain, .folio-v4c .career-artifact, .folio-v4c .cxh-act, .folio-v4c .canvas-promise, .folio-v4c .cx-empty { background-image: radial-gradient(var(--cx-sig-grain) .6px, transparent .7px), radial-gradient(var(--cx-sig-grain-lift) .5px, transparent .6px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 4px; background-repeat: repeat, repeat; background-attachment: fixed, fixed; } /* The folded corner. A real fold: the flap is lit paper, the shadow under it is the same ink used for every other shadow in the system. */ .folio-v4c .cx-fold { position: relative; } .folio-v4c .cx-fold::after { content: ""; position: absolute; z-index: 2; right: 0; bottom: 0; width: 22px; height: 22px; background: linear-gradient(315deg, var(--cx-porcelain) 0 50%, var(--cx-line) 50% 52%, transparent 52%); border-left: 1px solid var(--cx-line); border-top: 1px solid var(--cx-line); box-shadow: -2px -2px 4px var(--cx-shadow-ink-soft); pointer-events: none; } /* The claim field keeps the canon hard shadow — the one printed-block moment. */ .folio-v4c .cxh-cfield { box-shadow: var(--cx-shadow-hard); } /* Engraved numerals. Every numbered act is mono, tracked, uppercase — the catalogue number under the work. (S2: the `.cx-mark` plate that shared this rule, and the four rules that dressed it, went with placeMark().) */ .folio-v4c .cxh-num { font: 500 var(--cx-t-label) / 1 var(--cx-font-mono); letter-spacing: var(--cx-track-label); text-transform: uppercase; font-style: normal; } /* ========================================================================== 4b · SECTION BACKDROPS — the worlds' linework, as watermark Full-bleed, single-colour, never above 6% ink, never in front of text. ========================================================================== */ .folio-v4c .cx-backdrop { position: absolute; z-index: 0; inset: 0; overflow: hidden; color: var(--cx-sig-art-ink); pointer-events: none; } .folio-v4c .cx-backdrop svg { width: 100%; height: 100%; display: block; } .folio-v4c .cx-backdrop-host { position: relative; } .folio-v4c .cx-backdrop-host > *:not(.cx-backdrop) { position: relative; z-index: 1; } /* ========================================================================== 4c · LINE-ART EMPTY STATES + 404 ========================================================================== */ .folio-v4c .cx-empty { display: grid; justify-items: center; gap: var(--cx-s4); max-width: 560px; margin: var(--cx-s12) auto; padding: var(--cx-s10) var(--cx-s8) var(--cx-s12); border: 1px solid var(--cx-line); background: var(--cx-paper); text-align: center; } .folio-v4c .cx-empty-art { width: min(320px, 68vw); height: 200px; color: color-mix(in srgb, var(--cx-ink) 26%, transparent); } .folio-v4c .cx-empty-art svg { width: 100%; height: 100%; display: block; } .folio-v4c .cx-empty h2 { font: 400 var(--cx-t-d3) / 1.1 var(--cx-font-display); color: var(--cx-ink); margin: 0; } .folio-v4c .cx-empty p { font: 400 var(--cx-t-body) / 1.6 var(--cx-font-ui); color: var(--cx-ink60); margin: 0; } .folio-v4c .cx-empty-doors { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cx-s3) var(--cx-s5); margin-top: var(--cx-s3); padding-top: var(--cx-s4); border-top: 1px solid var(--cx-line); width: 100%; } .folio-v4c .cx-empty-doors a { font: 500 var(--cx-t-label) / 1 var(--cx-font-mono); letter-spacing: var(--cx-track-label); text-transform: uppercase; color: var(--cx-ink); text-decoration: none; border-bottom: 1px solid var(--cx-line-strong); padding-bottom: 3px; } .folio-v4c .cx-empty-doors a:hover { border-bottom-color: var(--cx-ink); } /* Fill the viewport below the topbar, otherwise #main ends part-way down and the body ground shows as a seam under the panel. */ .folio-v4c .cx-notfound { min-height: calc(100vh - var(--cx-topbar-h)); display: grid; place-content: center; background: var(--cx-porcelain); } .folio-v4c .cx-notfound .cx-empty-art { width: min(420px, 76vw); height: 260px; } /* ========================================================================== 5 · MOTION WITH MEANING Four motions, each one saying something the page means. All four are reduced-motion gated at the token level (durations collapse to 1ms) AND at the rule level, and every one of them animates from a state that is already final in the DOM — nothing here is opacity-gated content. ========================================================================== */ /* 5a · (S2) the RULE that inked across under every H1 is gone: STANDARD.md deletes the pattern, S1 emptied its writer and S2 deleted it, so the four rules and the keyframe that dressed `.cx-rule` had nothing left to dress. */ /* 5b · the GAUGE counts up. The number is in the DOM at its final value and the counter only ever walks TOWARD it, so a stalled script leaves the truth on screen rather than a zero. */ .folio-v4c [data-cx-count] { font-variant-numeric: tabular-nums lining-nums; } /* 5c · the RECEIPT prints, line by line, in mono */ .folio-v4c .cx-receipt { display: grid; gap: var(--cx-s2); padding: var(--cx-s4) var(--cx-s5); border: 1px solid var(--cx-line); border-radius: var(--cx-r-sm); background: var(--cx-paper); font: 500 var(--cx-t-label) / 1.7 var(--cx-font-mono); letter-spacing: var(--cx-track-label); text-transform: uppercase; color: var(--cx-ink); } .folio-v4c .cx-receipt-line { display: flex; justify-content: space-between; gap: var(--cx-s4); clip-path: inset(0 0 0 0); } .folio-v4c .cx-receipt-line span:last-child { color: var(--cx-ink60); } .folio-v4c .cx-receipt-line[data-cx-print="run"] { animation: cx-print var(--cx-sig-dur-print) var(--cx-sig-ease-print) both; animation-delay: calc(var(--cx-print-i, 0) * 120ms); } @keyframes cx-print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* 5d · the hero sheet TYPES itself in. The rows already exist in the DOM; the act controller reveals them in sequence within 1.2s. The transition below is what makes each row read as a written line rather than a fade. */ .folio-v4c .cxh-bl { transition-duration: var(--cx-dur-base); } /* Reduced motion: hold the final pose, everywhere, no exceptions. */ @media (prefers-reduced-motion: reduce) { .folio-v4c .cx-receipt-line[data-cx-print="run"] { animation: none; } .folio-v4c .cx-receipt-line { clip-path: none; } } /* ========================================================================== 6 · ACCENT IS INK — the last of the hue, removed by hand The base skin used a navy for links and the italic payoff word. In this variant the payoff word is ink italic serif, and links are ink with a hairline underline. Weight and italic do the work hue used to do. ========================================================================== */ body.folio-v4c { /* Legacy V3 aliases that still carry a hue. --coral was the V3 brand red and the base skin mapped it onto the STOP state, which put a blocked-red link ("Write my cover letter") on a page where nothing is blocked. In GALLERY it is ink. The semantic --cx-stop-* tokens are untouched: red still means stopped, it just no longer means "link". */ --coral: var(--cx-ink); --accent-ats: var(--cx-ink); --accent-cover: var(--cx-ink); --accent-portfolio: var(--cx-ink); --accent-resume: var(--cx-ink); } /* The base skin used the OK green for three decorative labels in the hero — a card's subtitle, the tick in a chip, the tick in the proof line. Nothing there has passed a check, so nothing there is green in GALLERY. The OK token is still the OK token; it just stopped being used as a garnish. */ .folio-v4c .cxh-st { color: var(--cx-ink60); } .folio-v4c .cxh-chip i, .folio-v4c .cxh-proof i { color: var(--cx-ink); } /* The base skin painted three workspace signals in the STOP ramp — the card whose turn it is, the "Recommended next" rail, and its arrow. None of those is blocked; STOP red on them says "something failed" when nothing has. The current card is a DECISION, so it takes the ASK ramp, and the rail label is just a label, so it is ink. The STOP tokens still mean stopped. */ .folio-v4c .career-artifact.current > header > span { border-color: var(--cx-ask-fg); color: var(--cx-ask-fg); } .folio-v4c .career-next-rail > span { color: var(--cx-ink); } /* Same mistake on the home page: the cover-letter chapter's call to action was painted in STOP red. Writing a letter is not an error condition. */ .folio-v4c .canvas-letter-story > a { color: var(--cx-ink); } /* Nothing has passed while a check is still waiting, so "Waiting" is not green. It is quiet ink. */ .folio-v4c .artifact-ats-sheet dd { color: var(--cx-ink60); } .folio-v4c .cxh-title em, .folio-v4c h1 em, .folio-v4c h2 em { color: var(--cx-ink); font-style: italic; } /* The hero receipt: a till roll, centred, no wider than the claim it makes. */ .folio-v4c .cx-receipt-hero { width: max-content; max-width: min(420px, 92vw); margin: var(--cx-s6) auto 0; } .folio-v4c .canvas-resume-card small { color: var(--cx-ink60); } .folio-v4c .canvas-world-card > small { color: var(--cx-ink60); }