/* /dc/ace-exam, the approved V1 redesign (2026-09-12). * * Every selector is scoped to `.ace-page` on . Nothing here may reach * another guide: the shared classes this page keeps (.guide-nav, * .guide-details, .details-body, .rel-card, .guide-collapse-all, .tldr-btn) * are used site-wide, so each rule that touches one carries the .ace-page * prefix. * * THE BUTTON LAW (CLAUDE.md): every clickable card or button on this page has * a 2px --color-accent border, the cursor-following gold glow from * public/js/card-fx.js (class cardfx-pop, or rel-card which must NOT also * carry cardfx-pop), a hover lift and a border shift to --color-primary. * * THE SYMMETRY LAW (CLAUDE.md): the reading prose keeps the shared * --prose-measure band that main.css already applies to * `.editorial main .details-body > p` and its list siblings. This file adds no * competing width to a paragraph or a list, so every reading block on the page * spans the same band with auto side margins. * * DARK MODE (reference_dark_mode_two_mechanisms): the site runs BOTH * :root[data-theme="dark"] and a @media (prefers-color-scheme: dark) mirror. * Any raw colour defined here is defined in both, or it is wrong in one of * them. The approved mockup's light-dark() palette and its Lora display face * are deliberately NOT copied: the page uses the real site tokens so it stays * in step with the shell it is served inside. */ .ace-page { /* Ink for the small uppercase eyebrows and the verdict lines. The shared --color-accent is a deep gold that reads well as a BORDER but only 3.1:1 as small TEXT on the ivory surface, so this page carries its own text-weight value and flips it for dark. */ --ace-ink-accent: #8a5e12; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ace-page { --ace-ink-accent: #f5c862; } } :root[data-theme="dark"] .ace-page { --ace-ink-accent: #f5c862; } /* ── Shared-rule corrections, scoped ─────────────────────────────────────── */ /* main.css centres `.editorial h2` because a left-flush section title over centred prose was the reported defect. On this page every h2 sits INSIDE a flex summary next to a number badge and a state mark, or beside a "read more" link, so centring it detaches the title from the row it belongs to. The prose underneath keeps its centred band, which is the half of the law that actually protects the reader. */ .ace-page .ace-chapter h2, .ace-page .ace-examples h2, .ace-page .ace-reading-heading h2, .ace-page .ace-related h2, .ace-page .ace-case-panel h3 { text-align: left; } /* The page owns its own contents disclosure, so tldr.js's button is moved out of the jump nav and into the utility row. Hiding it until the move keeps a Quick Summary button from flashing inside the rail. */ .ace-page .ace-contents .tldr-btn-nav { display: none; } /* ── Hero ────────────────────────────────────────────────────────────────── */ .ace-page .ace-hero { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 3rem; align-items: center; margin: 0 0 1.5rem; } .ace-page .ace-eyebrow { display: block; font-family: var(--font-sans); font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ace-ink-accent); margin: 0 0 .6rem; max-width: none; } .ace-page .ace-hero h1 { margin: 0 0 1rem; } .ace-page .ace-lede { font-size: 1.0625rem; line-height: 1.75; color: var(--color-text); margin: 0; max-width: var(--prose-measure); } .ace-page .ace-hero-art { margin: 0; text-align: center; } .ace-page .ace-hero-art img { width: 270px; max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--color-accent); border-radius: 50% 50% var(--radius-md) var(--radius-md); display: block; margin: 0 auto; } .ace-page .ace-hero-art figcaption { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.4; margin-top: 1rem; color: var(--color-text); } .ace-page .ace-hero-art > span { display: block; font-family: var(--font-sans); font-size: .62rem; letter-spacing: .11em; text-transform: uppercase; color: var(--color-text-muted); margin-top: .5rem; } /* ── Utility row: the real Quick Summary, Advisor and Share controls ─────── */ .ace-page .ace-utility { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .9rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin: 0 0 1.75rem; } .ace-page .ace-utility-main { display: flex; gap: .6rem; flex-wrap: wrap; } .ace-page .ace-util-btn, .ace-page .ace-utility .tldr-btn { font-family: var(--font-sans); font-size: .82rem; font-weight: 600; line-height: 1.3; min-height: 44px; padding: .6rem 1rem; color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-accent); border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; gap: .6rem; margin: 0; } .ace-page .ace-util-btn:hover, .ace-page .ace-utility .tldr-btn:hover { border-color: var(--color-primary); } .ace-page .ace-util-btn[aria-expanded="true"] { background: var(--color-bg-alt); } .ace-page .ace-utility .rmv-share-mount { margin: 0; } /* ── Guide Advisor: the real widget, in normal flow ──────────────────────── */ /* The mount is never wrapped in a hidden container. ask-guide.js opens only the CLOSEST details when a ?ask= deep link lands, so a hidden outer wrapper would leave the answer invisible; the utility button drives the widget's own native disclosure instead. */ .ace-page .ask-guide { margin: 0 0 1.75rem; } .ace-page .ask-guide-details { border-left-width: 4px; } /* ── Two-column reading layout ───────────────────────────────────────────── */ .ace-page .ace-layout { display: grid; grid-template-columns: 222px minmax(0, 1fr); gap: 2.5rem; align-items: start; } .ace-page .ace-contents { position: sticky; top: 1.25rem; min-width: 0; } .ace-page .ace-body { min-width: 0; } .ace-page .ace-contents-disclosure > summary { list-style: none; cursor: pointer; font-family: var(--font-sans); font-size: .82rem; font-weight: 700; color: var(--color-text); padding: .75rem 0; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 44px; } .ace-page .ace-contents-disclosure > summary::-webkit-details-marker { display: none; } .ace-page .ace-caret { font-size: 1.1rem; line-height: 1; transition: transform .15s; } .ace-page .ace-contents-disclosure[open] .ace-caret { transform: rotate(180deg); } .ace-page .ace-contents nav.guide-nav { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: .6rem 0; } .ace-page .ace-contents nav.guide-nav a { font-family: var(--font-sans); font-size: .78rem; line-height: 1.45; font-weight: 500; color: var(--color-text-muted); background: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 2px solid transparent; padding: .6rem .65rem; text-decoration: none; } .ace-page .ace-contents nav.guide-nav a:hover, .ace-page .ace-contents nav.guide-nav a[aria-current="location"] { color: var(--color-text); background: var(--color-bg-alt); border-left-color: var(--color-accent); } /* guide-nav.js builds this button; ace-exam.js adopts it and moves it here, so the page has exactly one expand/collapse owner. */ .ace-page .ace-contents .guide-collapse-all { display: flex; justify-content: space-between; align-items: center; gap: .5rem; width: 100%; margin: .75rem 0 0; min-height: 44px; padding: .55rem .7rem; font-family: var(--font-sans); font-size: .74rem; font-weight: 600; text-align: left; color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-accent); border-radius: var(--radius-sm); cursor: pointer; } .ace-page .ace-contents .guide-collapse-all:hover { border-color: var(--color-primary); } .ace-page .ace-contents-note { border-top: 1px solid var(--color-border); margin-top: 2rem; padding-top: 1.25rem; } .ace-page .ace-contents-note p { font-family: var(--font-sans); font-size: .76rem; line-height: 1.85; color: var(--color-text-muted); margin: 0; max-width: none; } /* ── Chapters ────────────────────────────────────────────────────────────── */ .ace-page .ace-reading-heading { margin: .75rem 0 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .ace-page .ace-reading-heading h2 { margin: 0 0 .35rem; font-size: 1.5rem; } .ace-page .ace-reading-heading > p:last-child { font-family: var(--font-sans); font-size: .8rem; color: var(--color-text-muted); margin: 0; max-width: none; } .ace-page .ace-chapter, .ace-page .ace-examples { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); margin: 0 0 .8rem; overflow: hidden; } .ace-page .ace-examples { margin-bottom: 2rem; } .ace-page .ace-chapter > details > summary, .ace-page .ace-examples > details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; } .ace-page .ace-chapter > details > summary::-webkit-details-marker, .ace-page .ace-examples > details > summary::-webkit-details-marker { display: none; } .ace-page .ace-chapter > details[open] > summary, .ace-page .ace-examples > details[open] > summary { border-bottom: 1px solid var(--color-border); } .ace-page .ace-chapter h2 { font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.35; font-weight: 600; margin: 0; padding: 0; border: 0; color: var(--color-text); } .ace-page .ace-num { font-family: var(--font-sans); font-size: .72rem; font-weight: 700; color: var(--color-text-muted); flex-shrink: 0; border-right: 1px solid var(--color-border); padding-right: .9rem; min-width: 2rem; } .ace-page .ace-sum-copy { flex: 1; min-width: 0; } .ace-page .ace-sub { display: block; font-family: var(--font-sans); font-size: .74rem; line-height: 1.55; color: var(--color-text-muted); margin-top: .25rem; } .ace-page .ace-mark { margin-left: auto; font-size: 1.3rem; font-weight: 400; line-height: 1; color: var(--color-text-muted); flex-shrink: 0; } .ace-page .details-body { padding: 1.4rem 1.6rem; } .ace-page .details-body > p:last-child, .ace-page .details-body > ul:last-child, .ace-page .details-body > ol:last-child { margin-bottom: 0; } /* The pros/cons pair is two components side by side, so the shared prose band does not apply inside them; each panel is its own measure. */ .ace-page .pro-con-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin: 1.1rem auto; max-width: var(--prose-measure); } .ace-page .pro-con-grid > div { border: 1px solid var(--color-border); border-top: 3px solid var(--color-accent); border-radius: var(--radius-sm); background: var(--color-bg); padding: 1rem 1.1rem; } .ace-page .pro-con-grid h4 { margin: 0 0 .55rem; font-size: .95rem; } .ace-page .pro-con-grid ul { margin: 0; padding-left: 1.15rem; } .ace-page .pro-con-grid li { font-size: .86rem; line-height: 1.7; } /* ── Worked examples ─────────────────────────────────────────────────────── */ .ace-page .ace-examples h2 { margin: 0; font-size: 1.45rem; } .ace-page .ace-fiction { font-family: var(--font-sans); font-size: .82rem; line-height: 1.7; color: var(--color-text-muted); } .ace-page .ace-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin: 0 0 1.1rem; } .ace-page .ace-case-btn { display: flex; flex-direction: column; padding: 0; text-align: left; font: inherit; color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-accent); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; } .ace-page .ace-case-btn:hover, .ace-page .ace-case-btn[aria-expanded="true"] { border-color: var(--color-primary); } .ace-page .ace-case-btn img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--color-accent); display: block; } .ace-page .ace-case-copy { display: flex; flex-direction: column; gap: .4rem; flex: 1; width: 100%; padding: .9rem 1rem; } .ace-page .ace-case-index { font-family: var(--font-sans); font-size: .6rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--color-text-muted); } .ace-page .ace-case-name { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; line-height: 1.25; } .ace-page .ace-case-context { font-family: var(--font-sans); font-size: .74rem; line-height: 1.5; color: var(--color-text-muted); min-height: 2.2em; } .ace-page .ace-verdict { font-family: var(--font-sans); font-size: .68rem; font-weight: 700; line-height: 1.5; color: var(--ace-ink-accent); border-top: 1px solid var(--color-border); padding: .55rem 0 0; margin-top: auto; } .ace-page .ace-case-action { font-family: var(--font-sans); font-size: .72rem; font-weight: 600; display: flex; justify-content: space-between; gap: .5rem; color: var(--color-primary); } .ace-page .ace-case-panel { background: var(--color-surface); border: 2px solid var(--color-accent); border-radius: var(--radius-md); padding: 1.4rem 1.6rem; margin: 0 0 .9rem; /* The only scroll-margin this page declares. Every other target here is a .guide-section[id], which dc.css already clears the sticky navbar for; a case panel is not one. */ scroll-margin-top: 84px; } .ace-page .ace-case-panel:last-child { margin-bottom: 0; } .ace-page .ace-case-panel h3 { margin: 0 0 .8rem; padding-right: 3rem; font-size: 1.15rem; } .ace-page .ace-case-panel p:last-child { margin-bottom: 0; } .ace-page .ace-case-close { float: right; font-size: 1.3rem; line-height: 1; min-width: 44px; min-height: 44px; padding: .5rem; cursor: pointer; color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-accent); border-radius: var(--radius-sm); } .ace-page .ace-case-close:hover { border-color: var(--color-primary); } /* ── Related, disclaimer, sources ────────────────────────────────────────── */ .ace-page .ace-related { margin: 3rem 0 1.5rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } .ace-page .ace-related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.25rem; } .ace-page .ace-related-head h2 { margin: 0; font-size: 1.5rem; } .ace-page .ace-related-head a { font-size: .8rem; white-space: nowrap; } .ace-page .rel-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 0; } .ace-page .rel-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.15rem; text-decoration: none; } .ace-page .rel-card img { width: 74px; height: 74px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; display: block; } .ace-page .rel-card .rc-t { font-family: var(--font-serif); font-size: 1rem; line-height: 1.35; } .ace-page .rel-card .rc-more { display: block; font-family: var(--font-sans); font-size: .72rem; font-weight: 600; color: var(--color-primary); margin-top: .6rem; } /* .sources-list and .disclaimer-box had no home outside this page's deleted inline