/* ===================================================================== SCORE Maine Mentor Resources: block adapters. Hand-written. Loads after score.css, which is the static site's design system projected unchanged from _source/. Everything here exists because the pages are native blocks rather than the static site's markup: 1. What WordPress's own wrappers and layout rules change. 2. Link cards: the static site wraps a whole card in one , which no block can do, so the title carries the link and stretches over the card. 3. Modifier classes standing in for the static site's inline style attributes, which blocks cannot carry without breaking validation. Nothing here restyles a component. A rule the static site also needs belongs in the snapshot's stylesheet. ===================================================================== */ /* ---- 1. WordPress wrappers ----------------------------------------- */ /* The skip link WordPress adds for block themes, in the static site's look. */ .skip-link.screen-reader-text:focus { clip: auto; clip-path: none; width: auto; height: auto; top: var(--sp-3); left: var(--sp-3); background: var(--score-navy); color: #fff; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); font-weight: 700; text-decoration: none; z-index: 200; } /* The masthead is the SCORE Maine condensed logo, in place of the static hub's SCORE badge and "Maine" wordmark, with the hub's name beside it under a thin rule. */ .brand-logo { display: block; height: 52px; width: auto; } .brand-hub { padding-left: var(--sp-2); border-left: 2px solid var(--border); font-weight: 600; color: var(--score-navy); } /* On a phone the internal-only band and the five-link menu took about 440px before a page's title: the band's padding and type are tightened, and the menu links, which wrapped onto three rows, are laid out as a two-row grid. Every link stays visible and keeps a 44px target, since the hub's design rules out hidden menus. */ @media (max-width: 600px) { .internal-bar { padding-block: var(--sp-1); } .internal-note { padding: var(--sp-1) var(--sp-2); font-size: .9375rem; line-height: 1.4; border-left-width: 4px; } .header-bar { gap: var(--sp-2); padding-block: var(--sp-2); } .brand-logo { height: 40px; } .main-nav { margin-left: 0; width: 100%; } .main-nav ul { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; } .main-nav li { grid-column: span 2; } .main-nav li:nth-child(n+4) { grid-column: span 3; } .main-nav a { min-height: 44px; padding: 0 .5rem; justify-content: center; text-align: center; font-size: 1rem; line-height: 1.2; } } /* ---- 2. Link cards -------------------------------------------------- */ .door, .tile, .stage { position: relative; } .door-title a, .tile-title a, .stage-title a { color: inherit; text-decoration: none; } .door-title a::after, .tile-title a::after, .stage-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .door:hover .door-title a, .tile:hover .tile-title a, .stage:hover .stage-title a { text-decoration: underline; } .door:focus-within { box-shadow: var(--shadow-2); } /* The static site's card parts were spans; as paragraphs they drop the paragraph margin and measure. */ .door > p, .tile > p, .stage > p { margin: 0; max-width: none; text-wrap: wrap; } .door-desc { max-width: 40ch !important; } .door--blue { --door-color: var(--score-blue); } .door--navy { --door-color: var(--score-navy); } /* SLATE's lettered rows. The static site's rows are
  • s holding a letter and a body; a list-item block cannot hold groups, so each row is a group and takes the row's rules here. */ .letter-list > .letter-row { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--sp-3); align-items: start; padding: var(--sp-3) 0; border-top: 1px solid var(--border); margin: 0; } .letter-list > .letter-row:first-child { border-top: 0; padding-top: 0; } .letter-row > p.letter { margin: 0; max-width: none; } /* A run of buttons in a side panel. The static site puts them loose in the