diff --git a/src/styles/gantry.css b/src/styles/gantry.css index d5a8760..43c18ad 100644 --- a/src/styles/gantry.css +++ b/src/styles/gantry.css @@ -255,19 +255,21 @@ html .site-navigation::after { transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease; } .gantry-window::before { - inset: -7px auto auto -7px; + /* The brackets sit on the window's own corners, so they never overhang the + beam or clip at the top of the viewport; hover opens them by 2 px. */ + inset: 0 auto auto 0; border-inline-end: 0; border-block-end: 0; } .gantry-window::after { - inset: auto -7px -7px auto; + inset: auto 0 0 auto; border-inline-start: 0; border-block-start: 0; } .gantry-window:hover::before, -.gantry-window:focus-visible::before { transform: translate(-3px, -3px); opacity: 1; } +.gantry-window:focus-visible::before { transform: translate(-2px, -2px); opacity: 1; } .gantry-window:hover::after, -.gantry-window:focus-visible::after { transform: translate(3px, 3px); opacity: 1; } +.gantry-window:focus-visible::after { transform: translate(2px, 2px); opacity: 1; } .gantry-window:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; diff --git a/src/styles/route.css b/src/styles/route.css index c93bb62..3dfb0ed 100644 --- a/src/styles/route.css +++ b/src/styles/route.css @@ -482,11 +482,12 @@ inset 0 1px 0 color-mix(in srgb, var(--chapter-accent, var(--accent)) 38%, transparent), 0 50px 90px -40px rgb(0 0 0 / 80%); } - /* Crop marks: the plate is framed like a film slate, not a card. */ + /* Crop marks: the plate is framed like a film slate, not a card. They are + registered on the plate's own corners, like the gantry window's. */ .reading-stage .chapter-body::after { content: '' / ''; position: absolute; - inset: -7px; + inset: 0; pointer-events: none; --mark: color-mix(in srgb, var(--chapter-accent, var(--accent)) 80%, white); background: