/* Public landing page (always-light, self-contained — no app token deps so it
renders pre-Vite-build). Stanford rebrand (#618): white / warm-neutral light
surface with deep SLS Red #A6192E used DIRECTLY as the accent (~6.5:1 on white,
so the lightened dark-mode tint is no longer needed). The nav + Stanford global
footer stay black, carrying the SLS reverse marks (their text is pinned light
below, not token-driven, since those surfaces are dark in both themes). */
.landing {
--bg: #f2efea;
--bg-grad: linear-gradient(165deg, #f7f7f4 0%, #e2e1dd 100%);
--card: #ffffff;
--border: #e2e1dd;
--sls-red: #A6192E;
--accent: #A6192E;
--accent-2: #6b6358;
--fg: #1a1a1a;
--fg-dim: #4a463f;
--fg-faint: #756f66;
/* Doc-type chip surface (#635): a subtle 6% SLS-red tint over --bg with a soft
red border, so the chips read as filled pills instead of near-invisible
outlines. SLS-red text (--accent) on this surface is ~5.9:1 (clears WCAG AA
for text) and the border is ~3.8:1 vs --bg (clears the 3:1 UI-boundary bar). */
--chip-bg: #ede2df;
--chip-border: #bd5966;
margin: 0;
background: var(--bg);
color: var(--fg);
font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.5;
}
/* Eased smooth-scroll for the in-page nav anchor jumps. Must live on the document
root — anchor navigation scrolls , not (.landing), which is why
the old declaration on .landing did nothing. Honored only when the visitor
hasn't requested reduced motion (#618). */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
.landing a { color: inherit; text-decoration: none; }
/* Nav */
.lp-nav { position: sticky; top: 0; z-index: 10; background: #000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
/* Wider than the 960px content sections (#618) to give the ultrawide lockup room
beside the nav links — the nav bar reads a touch wider than the page below it.
Bumped 1080 -> 1200 (#722) once /guide added a 6th link: the wide lockup + six
links + CTA overran 1080 in real browsers (space-between collapsed and labels
wrapped), so the row needs more room before it folds to the hamburger. */
.lp-nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; }
/* InsighterTraining horizontal project lockup as the nav brand (reverse/white on
the black nav). The horizontal lockup is the guide's banner-format mark. */
.lp-nav-lockup {
/* 44px on desktop; shrinks with the viewport on small screens so the wide
lockup never overflows the nav row (caps at 44px above ~677px). */
display: block; flex-shrink: 0; height: min(40px, 6.5vw); aspect-ratio: 2248 / 208;
background: url("/static/brand/insighter-lockup-wide-white.png") left center / contain no-repeat;
}
.lp-nav-links { display: flex; align-items: center; gap: 16px; font-size: 13px; color: #c9c3ba; }
/* Never let a label break mid-word (a transient font-load / odd-zoom safety net):
the row folds to the hamburger below 1200px, so on desktop each link stays on
one line. */
.lp-nav-links a { white-space: nowrap; }
.lp-nav-links a:hover { color: #fff; }
/* Hamburger toggle (#612) — CSS-first checkbox hack. The checkbox + the burger
bars are hidden on desktop (where the burger isn't shown, so a focusable
checkbox would be a dead tab stop); the narrow-viewport @media block below
flips them on, makes the checkbox visually-hidden-but-FOCUSABLE so a
keyboard-only user can Tab to it and toggle the panel with Space (WCAG 2.1.1),
and turns .lp-nav-links into a dropdown panel driven by :checked. */
.lp-nav-toggle { display: none; }
.lp-nav-burger { display: none; }
/* Buttons */
.lp-cta { background: var(--sls-red); color: #fff !important; font-weight: 700; padding: 8px 16px; border-radius: 7px; }
.lp-cta:hover { background: #8a1525; }
.lp-cta-secondary { border: 1px solid rgba(166, 25, 46, 0.35); color: var(--accent) !important; padding: 8px 16px; border-radius: 7px; }
.lp-cta-secondary:hover { background: rgba(166, 25, 46, 0.06); }
/* Hero */
.lp-hero { background: var(--bg-grad); text-align: center; padding: 72px 24px 64px; }
.lp-eyebrow { color: var(--accent); letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; font-size: 13px; margin: 0 0 18px; }
.lp-headline { font-family: "Noto Serif", Georgia, serif; font-size: clamp(28px, 5vw, 44px); line-height: 1.16; font-weight: 700; max-width: 660px; margin: 0 auto; }
.lp-headline span { color: var(--accent); }
.lp-subhead { color: var(--fg-dim); max-width: 540px; margin: 20px auto 28px; font-size: 16px; }
.lp-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Sections */
/* scroll-margin-top offsets in-page anchor jumps by the sticky nav height so a
targeted section's header lands below the nav instead of behind it. */
.lp-section { max-width: 960px; margin: 0 auto; padding: 40px 24px; scroll-margin-top: 72px; }
.lp-section--tight { padding-top: 0; }
/* Scoped under .lp-section so this beats `.lp-section p { margin: 0 }` (the
label is a
); otherwise the bottom margin is clobbered to 0 and the label
hugs its content. */
.lp-section .lp-section-label { color: var(--accent); letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; font-size: 12px; margin: 0 0 22px; }
.lp-section .lp-section-label::after { content: ""; display: block; width: 34px; height: 2px; background: var(--accent); margin-top: 12px; }
.lp-section h2 { font-family: "Noto Serif", Georgia, serif; font-size: 28px; margin: 0 0 12px; }
.lp-section h3 { font-size: 16px; margin: 10px 0 6px; }
.lp-section p { color: var(--fg-dim); margin: 0; }
/* In-prose links must stay underlined (Stanford identity: text links are
distinguished by an underline, not color alone). Beats `.landing a`'s
text-decoration:none reset; mirrors `.lp-credit a`. */
.lp-section p a { color: var(--accent); text-decoration: underline; }
/* Steps + features grids */
.lp-steps, .lp-features { display: grid; gap: 14px; }
.lp-steps { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.lp-features { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lp-step, .lp-feature { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.lp-step-num { font-family: "Noto Serif", Georgia, serif; color: var(--accent-2); font-size: 13px; }
.lp-step h3, .lp-feature h3 { color: var(--fg); }
.lp-step p, .lp-feature p { font-size: 14px; }
/* Doc-type chips (#635). Real doc-type chips get a tinted filled surface +
SLS-red text/border so they read as solid pills (the old outline-only chips
nearly vanished against --bg). "more coming" stays visibly distinct — no fill,
dashed neutral border, muted text — but is bumped to --accent-2 (5.2:1) so it
still clears WCAG AA. */
.lp-doctypes { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chip { font-size: 13px; color: var(--accent); background: var(--chip-bg); border: 1px solid var(--chip-border); border-radius: 20px; padding: 5px 14px; }
.lp-chip--soon { color: var(--accent-2); background: transparent; border-color: var(--border); border-style: dashed; }
/* Architecture pipeline (#636) — HTML/CSS stage boxes that reflow instead of the
old fixed-aspect SVG that shrank its labels into illegibility on phones. Wide:
a horizontal row of equal boxes joined by rightward arrows. Narrow (≤720px,
the page's content breakpoint): a vertical stack joined by downward arrows,
with the label text held at a fixed readable size. Tokenized off .landing
(--card / --border / --fg / --accent-2), retiring the SVG's hardcoded hex.
Each connector is a stage's ::after, placed in a trailing gutter (the row's
`gap`) and centered there with absolute positioning so it sits BETWEEN boxes,
not inside one. The connectors are decorative: the
+ aria-label
on the flow collapses the whole subtree into one labeled image node, so the
stage labels and arrow glyphs are not separately announced. */
.lp-arch-flow {
display: flex;
align-items: stretch;
gap: 26px;
list-style: none;
margin: 0 0 24px;
padding: 0;
}
.lp-arch-stage {
position: relative;
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 10px;
font-size: 13px;
color: var(--fg);
line-height: 1.25;
}
/* Rightward connector centered in the gap to the right of each non-last stage. */
.lp-arch-stage:not(:last-child)::after {
content: "\2192"; /* → */
position: absolute;
left: 100%;
top: 50%;
width: 26px; /* matches the flow gap */
transform: translateY(-50%);
text-align: center;
color: var(--accent-2);
font-size: 16px;
line-height: 1;
}
.lp-arch-prose p { margin-bottom: 16px; }
@media (max-width: 720px) {
/* Stack the five stages vertically and hold the label at a fixed readable
size (no uniform shrink). Connectors turn downward, centered in the
vertical gap below each non-last stage. */
.lp-arch-flow { flex-direction: column; align-items: stretch; gap: 22px; }
.lp-arch-stage { flex: 0 0 auto; font-size: 15px; padding: 14px 12px; }
.lp-arch-stage:not(:last-child)::after {
content: "\2193"; /* ↓ */
left: 50%;
top: 100%;
width: auto;
transform: translateX(-50%);
}
}
/* Get involved */
.lp-section--cta { text-align: center; }
.lp-section--cta .lp-section-label { display: inline-block; }
.lp-section--cta .lp-section-label::after { margin-left: auto; margin-right: auto; }
.lp-section--cta p { max-width: 720px; margin: 0 auto 20px; }
/* Footer */
.lp-footer { border-top: 1px solid var(--border); text-align: center; padding: 28px 24px; }
.lp-credit { font-size: 13px; color: var(--fg-dim); margin: 4px 0; }
.lp-credit a { color: var(--accent-2); text-decoration: underline; }
.lp-credit--muted { color: var(--fg-faint); }
/* Creators page (#608) — three-across card grid, same auto-fit idiom as
.lp-features so it stacks on mobile. Scoped under .landing for the tokens. */
.landing .creators-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.landing .creator-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 24px 18px;
text-align: center;
border-color: var(--border);
}
/* Border-only hover (no transform/scale → no layout shift). */
.landing .creator-card:hover { border-color: rgba(166, 25, 46, 0.45); }
@media (prefers-reduced-motion: no-preference) {
.landing .creator-card { transition: border-color 180ms ease; }
}
.landing .creator-avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
display: block;
margin: 0 auto 14px;
/* 2px warm-neutral ring + soft glow. */
border: 2px solid var(--accent-2);
box-shadow: 0 0 0 5px rgba(203, 196, 184, 0.14);
}
/* Initials avatar for placeholder cards — same ring/glow, warm-dark fill. */
.landing .creator-avatar--initials {
display: flex;
align-items: center;
justify-content: center;
background: #f0ece4;
color: var(--accent-2);
font-weight: 700;
font-size: 30px;
letter-spacing: 0.04em;
}
.landing .creator-name { color: var(--fg); font-weight: 700; font-size: 17px; margin: 0 0 4px; }
.landing .creator-role {
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 12px;
font-weight: 600;
margin: 0 0 12px;
}
.landing .creator-role--todo { color: var(--fg-faint); text-transform: none; letter-spacing: normal; font-weight: 400; }
.landing .creator-bio { color: var(--fg-dim); font-size: 14px; margin: 0 0 16px; }
.landing .creator-bio--todo { color: var(--fg-faint); font-style: italic; }
.landing .creator-links { display: flex; gap: 14px; justify-content: center; }
.landing .creator-links a { color: var(--accent-2); display: inline-flex; cursor: pointer; }
.landing .creator-links a:hover { color: var(--fg); }
.landing .creator-links a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) {
.landing .creator-links a { transition: color 180ms ease; }
}
/* Disabled/muted link placeholder for the fill-in-later cards. */
.landing .creator-links--todo { color: var(--fg-faint); }
.landing .creator-links--todo span { display: inline-flex; cursor: default; }
/* Dashed placeholder for the future "About the SLA team" section. */
.landing .creators-placeholder {
border: 1px dashed var(--border);
border-radius: 10px;
padding: 28px 18px;
text-align: center;
}
.landing .creators-placeholder .lp-section-label { display: block; margin-bottom: 8px; }
/* No accent rule on the coming-soon placeholder — it shouldn't read as a live section. */
.landing .creators-placeholder .lp-section-label::after { display: none; }
.landing .creators-placeholder p { color: var(--fg-faint); }
/* ── Nav collapse (#612, breakpoint raised #618, #722) ───────────────────────
The wide project lockup + the inline links stop fitting on one row around
~1200px now that /guide added a 6th link (#722; was ~1080 with five). Rather
than let the links wrap/compress, the whole link row folds into a hamburger at
that width — kept in lockstep with the .lp-nav-inner max-width above so there's
no band where the full row is shown but overflows the cap. This is its OWN
breakpoint (wider than the 720px content breakpoint below) so the nav collapses
early while the page content stays in its desktop layout down to 720px. */
@media (max-width: 1200px) {
.lp-nav-inner { flex-wrap: wrap; }
/* Visually-hidden-but-FOCUSABLE checkbox (NOT display:none, which drops it
from the tab order). A keyboard user Tabs to it and toggles with Space; the
label's `for` ties them so a mouse user clicks the visible burger. The 1px
clipped box keeps it off-screen without hiding it from assistive tech. */
.lp-nav-toggle {
display: block;
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
padding: 0;
}
.lp-nav-burger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
margin: -8px 0;
padding: 0 10px;
cursor: pointer;
box-sizing: border-box;
}
/* Mirror the checkbox's keyboard focus onto the visible burger so a keyboard
user can see what they're about to toggle (the checkbox itself is clipped). */
.lp-nav-toggle:focus-visible ~ .lp-nav-burger {
outline: 2px solid #fff;
outline-offset: 2px;
border-radius: 4px;
}
.lp-nav-burger-bar { display: block; height: 2px; background: #fff; border-radius: 2px; }
.lp-nav-links {
display: none;
flex-basis: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
margin-top: 10px;
font-size: 15px;
}
.lp-nav-toggle:checked ~ .lp-nav-links { display: flex; }
/* Roomy tap targets for each panel row; a divider hints at the list. */
.lp-nav-links a { padding: 12px 4px; border-top: 1px solid var(--border); }
/* The CTA keeps its filled/outlined treatment but goes full-width + centered
so it stays the obvious action at the bottom of the panel. */
.lp-nav-links .lp-cta { text-align: center; margin-top: 10px; border-top: 0; }
}
/* ── Narrow viewports (#612) — page content layout ───────────────────────────
Tighten padding so ~320px has no horizontal scroll, and pin the multi-column
grids to a single column on phones. */
@media (max-width: 720px) {
.lp-nav-inner { padding: 12px 16px; }
.lp-hero { padding: 56px 16px 48px; }
.lp-section { padding: 32px 16px; }
.lp-footer { padding: 24px 16px; }
.lp-steps, .lp-features, .landing .creators-grid { grid-template-columns: 1fr; }
}
/* Footer: let the org/year line + back link wrap instead of overflowing on the
narrowest screens. Applies at every width — it only matters when cramped. */
.lp-footer .lp-credit { overflow-wrap: anywhere; }
/* ── Stanford Global Footer (#618) ───────────────────────────────────────
Mirrored from static/style.css so the plain-Jinja public pages (landing /
creators) carry the required University footer (the Stanford tie-back, like
law.stanford.edu, which has no top identity bar). The .lp-footer org-credit
line is kept as-is, above this global footer. */
.su-global-footer {
background: #000; color: #fff;
padding: 28px 24px;
display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.su-global-footer__logo {
display: block; width: 105px; height: 49px;
background: url("/static/brand/stanford-university-reverse.png") left center / contain no-repeat;
}
.su-global-footer__nav, .su-global-footer__legal {
display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center;
}
.su-global-footer a { color: #fff; text-decoration: none; }
.su-global-footer__nav a { font-size: 13px; font-weight: 600; }
.su-global-footer__legal a { font-size: 12px; color: #cbc9c2; text-decoration: underline; }
.su-global-footer a:hover { color: #fff; text-decoration: underline; }
/* Skip-to-content link (a11y / WCAG 2.4.1) — visually hidden until focused. */
.skip-nav {
position: absolute; left: 8px; top: -48px; z-index: 1000;
background: var(--sls-red); color: #fff; padding: 8px 14px; border-radius: 0 0 6px 6px;
text-decoration: none; font-weight: 600; font-size: 14px;
transition: top .15s;
}
.skip-nav:focus { top: 0; }
/* /guide walkthrough (#722) ------------------------------------------------ */
.guide-step { margin: 2.5rem 0; }
.guide-step h2 { margin: 0 0 0.5rem; }
.guide-list { color: var(--fg-dim); margin: 0.75rem 0; padding-left: 1.25rem; }
.guide-list li { margin: 0.35rem 0; }
.guide-list strong { color: var(--fg); }
.guide-figure { margin: 1rem 0; }
.guide-figure-pair {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 1rem 0;
}
.guide-figure-pair .guide-figure {
flex: 1 1 0;
min-width: 240px;
margin: 0;
}
/* CSS-only tabbed gallery (create-new entity shapes). Hidden radios select
the active slide + tab via :checked general-sibling selectors, so no JS is
needed on this static page. */
.guide-gallery-input {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.guide-gallery-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.guide-gallery-tab {
cursor: pointer;
padding: 5px 14px;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 0.85rem;
color: var(--fg-dim);
user-select: none;
transition: background .15s, color .15s, border-color .15s;
}
.guide-gallery-tab:hover { color: var(--fg); border-color: var(--fg-faint); }
.guide-gallery-stage {
position: relative;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
/* Slides stack absolutely and cross-fade, so the stage owns its height: it
tracks the active slide's aspect ratio via padding-top (person/company are
short and the SAME size, third-party is taller). Defaults to the
person/company ratio; the :checked rule below grows it for third-party.
Transitioning padding-top makes that frame change a smooth resize instead
of a snap. Note this only moves for third-party — person<->company share a
ratio, so their consistent grow-shrink comes from the per-slide scale
below, not the frame. */
height: 0;
padding-top: 41.33%;
}
/* Slides stack on top of each other; the active one fades in over the rest.
Override the .guide-figure img frame — the stage carries the border here.
Resting (inactive) slides sit slightly small; the active one scales to full,
so every switch grows the incoming slide in / shrinks the outgoing one out
over the cross-fade — uniform motion even for the same-size person<->company
pair, whose frame never resizes. */
.guide-gallery .guide-gallery-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
border: 0;
border-radius: 0;
opacity: 0;
visibility: hidden;
transform: scale(0.96);
}
#cng-person:checked ~ .guide-gallery-stage #slide-person,
#cng-company:checked ~ .guide-gallery-stage #slide-company,
#cng-third:checked ~ .guide-gallery-stage #slide-third {
opacity: 1;
visibility: visible;
transform: scale(1);
}
/* Third-party's form is taller; grow the stage to its aspect ratio. */
#cng-third:checked ~ .guide-gallery-stage {
padding-top: 70.36%;
}
/* Only animate the scale grow-shrink + cross-fade + frame resize when the
visitor welcomes motion (matches this page's other motion gating).
Reduced-motion keeps the instant show/scale/resize above. The active slide
becomes visible immediately (0s delay) so its fade-in + grow shows; the
outgoing slide keeps visibility through the fade as it shrinks, then hides
(.3s delay). */
@media (prefers-reduced-motion: no-preference) {
.guide-gallery-stage { transition: padding-top .35s ease; }
.guide-gallery .guide-gallery-slide {
transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
#cng-person:checked ~ .guide-gallery-stage #slide-person,
#cng-company:checked ~ .guide-gallery-stage #slide-company,
#cng-third:checked ~ .guide-gallery-stage #slide-third {
transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
}
}
#cng-person:checked ~ .guide-gallery-tabs label[for="cng-person"],
#cng-company:checked ~ .guide-gallery-tabs label[for="cng-company"],
#cng-third:checked ~ .guide-gallery-tabs label[for="cng-third"] {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
/* Keyboard focus ring on the active tab when its (visually hidden) radio has
focus — keeps the gallery operable and visible for keyboard users. A neutral
dark ring (--fg) stays visible against both the red pill and the page. */
#cng-person:focus-visible ~ .guide-gallery-tabs label[for="cng-person"],
#cng-company:focus-visible ~ .guide-gallery-tabs label[for="cng-company"],
#cng-third:focus-visible ~ .guide-gallery-tabs label[for="cng-third"] {
outline: 2px solid var(--fg);
outline-offset: 2px;
}
.guide-figure img {
display: block;
max-width: 100%;
height: auto;
border: 1px solid var(--border);
border-radius: 8px;
}
.guide-figure figcaption {
margin-top: 0.4rem;
font-size: 0.85rem;
color: var(--fg-dim);
}
.guide-figure--placeholder {
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
padding: 1rem;
border: 2px dashed var(--border);
border-radius: 8px;
color: var(--fg-faint);
font-size: 0.9rem;
text-align: center;
}
.guide-aside {
margin: 1rem 0;
padding: 0.6rem 0.9rem;
border-left: 3px solid var(--accent, #a6192e);
background: rgba(166, 25, 46, 0.05);
font-size: 0.9rem;
font-style: italic;
}
.guide-aside strong { font-style: normal; }
.guide-build-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.guide-build-item {
padding: 1rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
}
.guide-build-item h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.guide-build-item p { margin: 0; font-size: 0.9rem; }
/* The "Meet the creators" line trails the card grid; `.lp-section p { margin: 0 }`
otherwise leaves it flush against the cards. Restore a top gap that matches the
grid's own `margin-top` so the spacing above and below the grid is uniform. */
.guide-build-grid + p { margin-top: 1.5rem; }
/* Provenance-icon legend (appendix). Two-column glyph/description rows. */
.guide-legend { margin: 1.25rem 0 0; display: grid; gap: 0.85rem; }
.guide-legend-row { display: grid; grid-template-columns: 1.9rem 1fr; gap: 0.7rem; align-items: start; }
.guide-legend dt { margin: 0; }
.guide-legend-glyph { font-size: 1.15rem; line-height: 1.45; }
.guide-legend dd { margin: 0; color: var(--fg-dim); font-size: 0.92rem; line-height: 1.5; }
.guide-legend dd strong { color: var(--fg); }
.guide-legend-note { margin-top: 1.25rem; font-size: 0.9rem; }
/* Denial modal (#722) — shown only when a signed-in but non-allowlisted SUNet
is redirected here (?from=denied). Full-viewport dimmed backdrop + a centered
light-surface card (the public pages are always-light). */
.guide-denied-overlay {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(26, 26, 26, 0.55);
}
.guide-denied-modal {
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
width: 100%;
max-width: 460px;
padding: 28px 26px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}
.guide-denied-title {
font-family: "Noto Serif", Georgia, serif;
font-size: 22px;
margin: 0 0 12px;
color: var(--fg);
}
.guide-denied-body { color: var(--fg-dim); font-size: 15px; margin: 0 0 22px; }
.guide-denied-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
justify-content: flex-end;
}
/* The dismiss action is a