/* * Design direction changed 2026-08-18 at the user's explicit request, following an * independent external review: from the earlier "parchment scroll" theme (itself built * to the user's own prior explicit direction) to a contemporary institutional look — * navy / ivory / burgundy, sans-serif for menus/forms/data, serif reserved for headings. * Fonts are system stacks (no bundled/self-hosted font files and no external font * service call), consistent with this project's "no external dependency" baseline. * * Palette direction changed again 2026-08-26 at the user's explicit request, exploring an * alternative to the navy/ivory/burgundy identity above (kept recoverable at git commit * 7388d52, a checkpoint made for exactly this purpose): "Terra e Inchiostro" (Earth & Ink) * — warm ink-black in place of navy, a historical Pompeian red in place of burgundy, an * olive/laurel green in place of gold, aged-papyrus in place of ivory. Only the token * values below and their few hardcoded-hex echoes elsewhere in this file changed; no * typography, layout, or markup changed. --color-error was also nudged brighter/more * saturated than the previous #9a3226 specifically because the new secondary (#a33b2b, * a deliberately muted, earthy red) sat too close to it in hue/value to stay visually * distinct as a destructive/danger signal — a necessary consequence of the palette swap, * not an unrelated change. * * Multi-theme selector, 2026-08-27 (user request, superadmin-only for now — see * database/migrations/038_tema_sito.sql): "Terra e Inchiostro" here in :root is the * fallback/default identity and stays the implicit choice whenever `[data-tema]` is absent * or set to "terra-inchiostro" (no attribute block defined for it — falls through to * :root on purpose, avoiding pointless duplication). Two sibling identities, * "Marmo e Bronzo" and "Porpora Imperiale" (both approved by the user after live * comparison), live in their own `[data-tema="..."]` blocks further down, each with its * own `prefers-color-scheme: dark` override — same structure, new palette only. Every * value that used to be a hardcoded hex echo elsewhere in this file (button/nav hover * tints, the table row hover, etc.) is now its own token below specifically so those * three theme blocks can each override it too; see the CSS-only comment further down for * the full list. `` is rendered by _header.php from the * `tema_sito` table (public/_header.php), read live on every request — no client code, * no session cache to invalidate, same reasoning as the current-edition lookup. */ :root { --color-bg: #e4dcc8; --color-surface: #ffffff; --color-surface-2: #dcd3bb; --color-text: #241f1a; --color-muted: #6b6255; --color-border: #c9bfa4; --color-primary: #1c1b18; --color-primary-dark: #33302a; --color-primary-contrast: #f1e9d4; --color-secondary: #a33b2b; --color-secondary-contrast: #ffffff; --color-accent: #6b7a4c; --color-error: #c0332a; --color-error-dark: #8a2419; --color-error-bg: #fae7e1; --color-success: #33621f; --color-success-bg: #e8f0dd; --color-warning: #8a5518; --color-warning-bg: #faf1de; --banner-bg: #1c1b18; --banner-bg-2: #33302a; --banner-text: #f1e9d4; --banner-muted: #cabfa5; --nav-cta-hover: #8fa06c; --button-accent-hover: #7c2e22; --table-hover-bg: #d8cba6; --lang-switch-border: rgba(241, 233, 212, 0.35); --radius: 10px; --shadow: 0 1px 2px rgba(28, 27, 24, 0.08), 0 8px 20px rgba(28, 27, 24, 0.08); --font-serif: Georgia, "Times New Roman", Cambria, serif; --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } /* Design-review fix (cycle 6, 2026-08-25): "huge dead space below the footer on short pages" has been the single most repeated complaint across every review cycle so far (login, register, staff login, dashboard, manutenzione -- any page whose content doesn't fill the viewport). Root cause: main's card floated near the top with the footer following right after it, leaving the rest of tall viewports empty below the footer. Standard sticky-footer flexbox pattern: body stretches to the full viewport height, main absorbs the leftover space (flex: 1 0 auto below) so the footer sits at the bottom of the viewport instead of floating partway down it, and main centers its own content vertically within that leftover space so short pages read as a deliberately centered layout rather than content stranded at the top. */ body { margin: 0; font-family: var(--font-sans); color: var(--color-text); line-height: 1.55; background: var(--color-bg); display: flex; flex-direction: column; min-height: 100vh; } h1, h2, h3 { font-family: var(--font-serif); font-weight: 700; margin-top: 0; } h1 { font-size: 1.6rem; color: var(--color-primary); letter-spacing: -0.01em; } blockquote { font-family: var(--font-serif); font-style: italic; } /* Frontend polish pass, 2026-08-26: the institutional banner's gold rule-under-heading already reads as "this marks an important heading" on every page (border-bottom on .institutional-banner). Reusing the same language for the primary page-title heading (the near-universal `

` pattern used across the whole app) ties the two together as one coherent tier system instead of one being an unstyled default: h1 = page title (gold rule, this block), h2 = in-content section (neutral rule, existing main h2 block above/below). Scoped to headings that are the card's own first child so hero/dashboard variants with their own bespoke treatment are untouched. */ main .card > h1:first-child { padding-bottom: 0.55rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--color-accent); } /* Design-review fix (cycle 4, 2026-08-25): every reviewer across cycles 2-4 independently flagged the same two things together -- section subheadings (e.g. staff_stampe.php's "Stampe Generali"/"Stampe Agenzia") barely standing out from body text, and the declared burgundy accent being nearly absent from the actual interface outside one or two isolated badges. A burgundy rule under in-content h2s addresses both at once without touching h1 (page title) or the welcome-hero/institutional-banner h2 variants, which already have their own deliberate treatments. */ main h2 { font-size: 1.15rem; color: var(--color-secondary); border-bottom: 2px solid var(--color-border); padding-bottom: 0.4rem; margin: 1.75rem 0 1rem; } main h2:first-child { margin-top: 0; } /* Design-review fix (cycle 2, 2026-08-25): both reviewers independently flagged in-content links (back-links like "← Area staff", "Password dimenticata?", the sortable-table links already handled above) as the single most visible inconsistency in the whole redesign -- plain tags fell back to the browser's default blue/purple/underline instead of the navy/burgundy theme used everywhere else. A single low-specificity base rule fixes every remaining plain-text link at once without touching the many already-themed, more specific selectors below (nav, buttons, footer, badges), which all win the cascade on specificity. */ /* No explicit `a:visited` rule: plain `a { color }` already beats the browser's default purple-visited UA styling (author stylesheet always wins over UA regardless of specificity), and an explicit `a:visited` would out-specificity `.button` (element+pseudo-class beats a single class), turning any already-visited button-styled link's text the same navy as its own background -- found as an apparently "blank button" bug in cycle 3's own review screenshots, caused by this session's own prior test navigation to those exact URLs. */ a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--color-secondary); } /* ---------- Top navigation bar ---------- */ header.site { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 1.5rem; background: var(--color-primary); flex-wrap: wrap; gap: 0.75rem; } header.site .brand { display: flex; align-items: baseline; gap: 0.6rem; text-decoration: none; line-height: 1.1; } /* User feedback (cycle 7, 2026-08-25): "Certamen Horatianum" in the header was too small for the app's own name/brand mark -- sized up for stronger presence. */ header.site .brand-name { font-family: var(--font-serif); font-weight: 700; font-size: 1.55rem; color: var(--color-primary-contrast); letter-spacing: 0.01em; } header.site .brand-name em { font-style: italic; font-weight: 400; opacity: 0.85; } header.site .brand-year { font-size: 0.72rem; font-weight: 600; color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: 999px; padding: 0.15rem 0.6rem; white-space: nowrap; } header.site nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 1.1rem; } header.site nav a, header.site .link-button { color: var(--banner-muted); text-decoration: none; font-size: 0.92rem; } header.site nav a:hover, header.site .link-button:hover { color: var(--color-primary-contrast); text-decoration: underline; } /* Design-review fix (cycle 1, 2026-08-25): both reviewers flagged the anonymous visitor's two primary actions (Accedi/Registrati) as visually indistinguishable from purely informational nav links (Guida e FAQ, Testi passate edizioni) -- same weight, same color, same size. A small filled pill gives them the visual priority a primary call-to-action needs, without turning the whole nav into buttons (informational links stay plain text on purpose). */ /* Design-review fix (cycle 6, 2026-08-25): reviewers repeatedly read the fully-rounded nav pills and the card buttons' rounded rectangles as two unrelated button systems ("at least four different button styles"). Sharing the same corner radius as .button/.button-secondary ties them together as one family (solid = primary action, outline = secondary) that simply also appears, smaller, in the nav -- not a separate pill-shaped component. */ header.site nav a.nav-cta { color: var(--color-primary); background: var(--color-accent); padding: 0.3rem 0.85rem; border-radius: var(--radius); font-weight: 600; } header.site nav a.nav-cta:hover { background: var(--nav-cta-hover); color: var(--color-primary); text-decoration: none; } header.site nav a.nav-cta.nav-cta-outline { background: transparent; border: 1px solid var(--banner-muted); color: var(--color-primary-contrast); } header.site nav a.nav-cta.nav-cta-outline:hover { border-color: var(--color-primary-contrast); text-decoration: none; } .nav-logout-form { display: inline-flex; margin: 0; } .link-button { background: none; border: none; margin: 0; padding: 0; font: inherit; cursor: pointer; } /* Distinct pill toggle, deliberately separated from the operational nav links. */ .lang-switch { display: inline-flex; border: 1px solid var(--lang-switch-border); border-radius: 999px; overflow: hidden; margin-left: 0.5rem; } .lang-switch a { padding: 0.25rem 0.65rem; font-size: 0.78rem; font-weight: 600; color: var(--banner-muted); text-decoration: none; } .lang-switch a.active { background: var(--color-accent); color: var(--color-primary); } .lang-switch a:hover:not(.active) { color: var(--color-primary-contrast); } /* ---------- Institutional banner — compact, present on every page ---------- */ /* Design-review fix (cycle 1, 2026-08-25): two independent reviewers flagged the top nav bar and this banner together as an oversized, redundant "double header" on every page, including internal operational screens where the institutional address/portrait add little recurring value. Not removed (still real, useful context on public pages) -- just measurably more compact: smaller portrait, tighter padding, smaller type. */ /* Design-review fix (cycle 2, 2026-08-25): reviewer B flagged the top nav bar and this institutional banner as two near-identical navy tones fused into one heavy block, with the "global navigation" level and the "school/edition context" level failing to read as distinct. Swapping this banner to a light ivory tone (still bounded by the same gold accent rule) gives the page a clear light/dark alternation instead of a solid navy slab. */ /* User feedback (cycle 6, 2026-08-25): this banner's text ("Certamen Horatianum" tagline, institute name, address) was too small to read comfortably -- also independently flagged by reviewers across multiple cycles as risking WCAG AA contrast/size thresholds. Sized back up below without returning to the pre-cycle-1 "oversized double header" this banner was originally trimmed from. */ .institutional-banner { background: var(--color-surface-2); color: var(--color-text); padding: 0.55rem 1.5rem; border-bottom: 2px solid var(--color-accent); } .institutional-banner .inner { max-width: 920px; margin: 0 auto; display: flex; align-items: center; gap: 0.7rem; } .institutional-banner .portrait { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 1px solid var(--color-accent); display: flex; align-items: center; justify-content: center; } .institutional-banner .portrait img, .institutional-banner .portrait svg { width: 100%; height: 100%; object-fit: cover; display: block; } .institutional-banner .details { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.6rem; } .institutional-banner .details h2 { margin: 0; font-size: 0.98rem; font-family: var(--font-sans); font-weight: 600; line-height: 1.3; } .institutional-banner .details .tagline { margin: 0; color: var(--color-secondary); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .institutional-banner .details .meta { margin: 0; color: var(--color-muted); font-size: 0.82rem; } .institutional-banner .details .meta a { color: var(--color-primary); } @media (max-width: 560px) { .institutional-banner .details { flex-direction: column; align-items: flex-start; gap: 0.15rem; } } /* ---------- Layout ---------- */ main { max-width: 760px; margin: 2rem auto; padding: 0 1rem; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; width: 100%; } /* User-reported UX problem 2026-08-22: relying on .table-scroll's horizontal scroll alone inside the normal 760px-wide main forced constant left/right scrolling just to read one row (losing sight of the identifying left-hand columns while reading the right-hand ones) -- correct for narrow read-heavy pages (forms, login) but wrong for data-table pages, which need real estate, not a scrollbar, as the primary fix. Pages that set $wideLayout before including _header.php get this wider cap instead; .table-scroll stays in place as a fallback for viewports narrower than even this. */ main.wide { max-width: 1400px; } .pre-main-wrap + main { margin-top: 1.25rem; } .pre-main-wrap { max-width: 760px; margin: 2rem auto 0; padding: 0 1rem; } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem; } /* Design-review fix (cycle 2, 2026-08-25): reviewer B flagged the same narrow, heavily- shadowed "form card" container (sized/padded for a 2-field login form) being reused verbatim for wide data-table reports (Scuole iscritte, Elenco Servizio Navetta), squeezing dense tabular data into a shape built for something else. Wide-layout pages ($wideLayout pages, main.wide) now get a flatter report panel instead: same content boundary and background, but no card-ish drop shadow and tighter padding, so table columns get the space back without losing a visible content region entirely. */ main.wide .card-flush { box-shadow: none; padding: 1.25rem 1.5rem; } /* ---------- Buttons ---------- */ button, .button { display: inline-block; margin-top: 1.25rem; padding: 0.65rem 1.3rem; background: var(--color-primary); color: var(--color-primary-contrast); border: none; border-radius: var(--radius); font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; font-family: var(--font-sans); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } @media (prefers-reduced-motion: reduce) { button, .button { transition: none; } } button:hover, .button:hover { background: var(--color-primary-dark); } .button-secondary { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); } .button-secondary:hover { background: var(--color-surface-2); } .button-accent { background: var(--color-secondary); color: var(--color-secondary-contrast); } .button-accent:hover { background: var(--button-accent-hover); } /* Design-review fix (cycle 6, 2026-08-25): a reviewer noted that critical/destructive actions (deactivating site-wide Manutenzione, deleting a student/companion/role/lookup entry) had the same quiet outline weight as an ordinary secondary button, undercutting their real impact. Filled red gives destructive actions their own distinct, heavier weight across every page that uses this class -- not just the one flagged in review. */ .button-danger { background: var(--color-error); color: var(--color-primary-contrast); border: 1px solid var(--color-error); } .button-danger:hover { background: var(--color-error-dark); border-color: var(--color-error-dark); } /* Design-review fix (cycle 2, 2026-08-25): both reviewers flagged the staff dashboard's menu grid as 7 visually identical navy buttons with no hierarchy between routine consultation (e.g. "Scuole iscritte") and a site-wide, all-schools-affecting action ("Manutenzione") -- applied only to that one dashboard entry, not a general-purpose "important button" class. */ .button-warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning); } .button-warning:hover { background: var(--color-warning); color: var(--color-primary-contrast); } /* ---------- Forms ---------- */ label { display: block; font-weight: 600; margin: 1rem 0 0.25rem; } input[type="text"], input[type="email"], input[type="password"], input[type="date"], select { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1rem; background: var(--color-surface); color: var(--color-text); font-family: var(--font-sans); } input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } .field-error { color: var(--color-error); font-size: 0.875rem; margin-top: 0.25rem; } .field-note { color: var(--color-muted); font-size: 0.875rem; margin-top: 0.25rem; white-space: pre-line; } input:disabled { background: var(--color-surface-2); color: var(--color-muted); cursor: not-allowed; } .alert { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; } .alert-error { background: var(--color-error-bg); color: var(--color-error); } .alert-success { background: var(--color-success-bg); color: var(--color-success); } .alert-warning { background: var(--color-warning-bg); color: var(--color-warning); } dl.profile dt { font-weight: 600; margin-top: 0.75rem; color: var(--color-text); } dl.profile dd { margin: 0; color: var(--color-muted); } .checkbox-row label { display: flex; align-items: flex-start; gap: 0.5rem; font-weight: 400; } .checkbox-row input[type="checkbox"] { margin-top: 0.2rem; } fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); margin: 1rem 0 0; padding: 0.5rem 1rem 0.75rem; } fieldset legend { padding: 0 0.5rem; font-weight: 600; color: var(--color-text); } .permission-checks { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin-top: 0.4rem; } .permission-checks label { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; white-space: nowrap; } /* ---------- Data table (students/companions lists) ---------- */ /* User-reported bug 2026-08-22: wide tables (e.g. staff_sistemazione.php's 10 columns) were overflowing past the .card's right edge instead of scrolling inside it, since `main` caps at 760px and nothing constrained the table's own width. Every `table.data-table` usage in this project is wrapped in a `.table-scroll` container (see staff_sistemazione.php, staff_schools.php, etc.) so the table scrolls horizontally within the card, never widening the page itself. */ .table-scroll { overflow-x: auto; } /* min-width, not width: `width: 100%` was capping the table at the .table-scroll container's own width, so the browser crushed every column down to fit (2026-08-22 bug: the Telefono header rendered as just "TE", Prenotazione/Sistemazione disappeared entirely) instead of letting the table grow past its container and scroll. min-width still fills the container when the content is narrow (identical look to before), but lets it grow wider when it isn't, so .table-scroll's overflow-x actually has something to scroll. */ /* User-reported 2026-08-22: once staff_sistemazione.php started showing the decoded Prenotazione labels ("28 Aprile 2026 (Martedì), 29 Aprile 2026 (Mercoledì)", far longer than the raw "28,29" codes it replaced), the table needed horizontal scrolling inside main.wide's 1400px again. User's own suggested fix: shrink the font. Smaller cell font + tighter padding buys back real width across every column (multiplies with column count, 9-10 here), rather than widening main.wide further (already at a size that risks not fitting smaller/laptop viewports). */ /* Follow-up to the note above: a smaller font alone still wasn't enough once a row combined a long school name with a fully-decoded, multi-day Prenotazione value -- the scrollbar reappeared. Structural fix, not a further font/width chase: cells wrap normally (the browser's own default) instead of being forced onto one line, so a long value grows the row's height, not the table's width. `th` keeps `nowrap` since column headers are always short and gain nothing from wrapping. `min-width: 100%` still lets the table fill (or, for genuinely unbreakable content, slightly exceed) its .table-scroll container -- combined with wrapping, that container's scrollbar becomes a rare fallback again, not the norm. */ table.data-table { min-width: 100%; border-collapse: collapse; margin-top: 0.5rem; } table.data-table th, table.data-table td { text-align: left; padding: 0.4rem 0.4rem; border-bottom: 1px solid var(--color-border); font-size: 0.82rem; overflow-wrap: break-word; font-variant-numeric: tabular-nums; } table.data-table th { color: var(--color-muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } /* Design-review fix (cycle 1, 2026-08-25): sortable column headers are plain `` tags with no dedicated styling, so they fell back to the browser's default blue/visited link colors -- both reviewers noticed this as an unexplained inconsistency ("some headers blue and underlined, others plain black") when it was really just an accidental gap, not a deliberate sortable/non-sortable signal. Sortable headers now match the same muted uppercase style as plain ones, with an underline only on hover/focus as the interactivity cue -- consistent at rest, still discoverable. */ table.data-table th a { color: var(--color-muted); text-decoration: none; } table.data-table th a:hover, table.data-table th a:focus-visible { color: var(--color-primary); text-decoration: underline; } /* Design-review fix (cycle 1, 2026-08-25): both reviewers flagged the tables as pure text on a flat background with no zebra striping or hover state, hurting row-tracking on wide/dense reports. */ table.data-table tbody tr:nth-child(even) { background: var(--color-surface-2); } table.data-table tbody tr:hover { background: var(--table-hover-bg); } /* ---------- Form tabs ---------- */ .tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--color-border); margin: 0.5rem 0 0; } .tab-btn { margin: 0; padding: 0.55rem 0.9rem; background: transparent; color: var(--color-muted); border: none; border-bottom: 2px solid transparent; border-radius: 0; font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: var(--font-sans); text-decoration: none; display: inline-block; } .tab-btn:hover { color: var(--color-text); background: transparent; } .tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-secondary); } .tab-panel { padding-top: 0.25rem; border-top: 1px solid var(--color-border); margin-top: 0.5rem; } .tab-panel:first-of-type { border-top: none; margin-top: 0; } /* Progressive enhancement: every section stays visible unless JS actually ran and added .js-tabs — with JavaScript disabled the form must remain fully usable, not just less pretty (gap found in the 2026-08-18 external review). */ .js-tabs .tab-panel { display: none; border-top: none; margin-top: 0; } .js-tabs .tab-panel.active { display: block; } /* Design-review fix (cycle 1, 2026-08-25): both reviewers independently flagged the staff login screen as pixel-identical to the participant/school login screen -- same layout, colors, and hierarchy, with only the title text differing ("Accesso" vs "Accesso staff"). For an app that strictly separates public/school access from internal staff access, this small eyebrow badge (staff_login.php only) gives the staff login a distinct, immediately recognizable visual signal using the secondary (burgundy) accent color, without touching the shared login layout/component styling used by both pages. */ .restricted-area-badge { display: inline-block; color: var(--color-secondary-contrast); background: var(--color-secondary); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.25rem 0.7rem; border-radius: 999px; margin: -0.5rem 0 1rem; } /* ---------- Homepage hero ---------- */ .hero { text-align: center; padding: 1rem 0 0.5rem; } .hero h1 { font-size: 2.1rem; margin-bottom: 0.35rem; } /* Frontend polish pass, 2026-08-26: signature element, deliberately used exactly once (the homepage's own first impression) rather than repeated across the app -- a laurel sprig, the traditional prize of a Roman "certamen", flanking the app's own name. Built from inline SVG primitives (no external icon/font asset, consistent with the project's no- external-dependency rule already established for typography). Mirrored via CSS transform rather than a second hand-authored path. Hidden below 480px: at that width the flanking sprigs would crowd a wrapping two-line title rather than read as a deliberate flourish. */ .hero .brand-mark { display: flex; align-items: center; justify-content: center; gap: 0.85rem; margin-bottom: 0.35rem; } .hero .brand-mark h1 { margin-bottom: 0; } .laurel-sprig { color: var(--color-accent); flex: 0 0 auto; } .laurel-sprig.laurel-sprig-right { transform: scaleX(-1); } @media (max-width: 480px) { .laurel-sprig { display: none; } } .hero .hero-sub { color: var(--color-muted); font-size: 1.05rem; margin: 0 0 1.25rem; } .hero .hero-meta { color: var(--color-muted); font-size: 0.9rem; margin-bottom: 1.25rem; } /* Design-review fix (cycle 4, 2026-08-25): a reviewer flagged this homepage banner as sharing its rounded-pill shape with real buttons ("Accedi all'area riservata" sits right below it), creating ambiguity about which one is actually clickable. A left accent bar + flatter corners reads as a status banner, not a third button in the group. */ .status-box { background: var(--color-surface-2); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: 4px; padding: 0.9rem 1.25rem; margin: 0 auto 1.5rem; max-width: 480px; font-weight: 600; color: var(--color-primary); } .status-box.status-closed { color: var(--color-error); background: var(--color-error-bg); border-left-color: var(--color-error); } .cta-row { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.75rem; } .cta-row .button { margin-top: 0; } /* Design-review fix (cycle 1, 2026-08-25; revised cycle 6): on menu-style .cta-row grids with many buttons (e.g. staff_dashboard.php's 7-item menu), each button's width tracked its own label length, producing a visibly ragged, unaligned grid -- called out independently across several review cycles. A shared min-width alone only sets a floor (a long label like "Sistemazione Albergo/Famiglia" still grows past it while short ones stay put, so the grid was still ragged) -- an actual grid with one shared column track, sized to fit the widest label, gives every button the same width regardless of its own text. */ .cta-row.cta-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, max-content)); justify-content: center; } .cta-row.cta-menu .button { text-align: center; margin-top: 0; display: flex; align-items: center; justify-content: center; } .steps { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin: 0 0 1.75rem; padding: 0; list-style: none; } .steps li { max-width: 160px; text-align: center; font-size: 0.85rem; color: var(--color-muted); } .steps .step-number { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 700; margin: 0 auto 0.4rem; } .footer-links { text-align: center; font-size: 0.85rem; margin-bottom: 0.5rem; } .footer-links a { color: var(--color-primary); margin: 0 0.5rem; } /* ---------- Post-login dashboard ---------- */ .welcome-hero { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem; margin-bottom: 1.25rem; } .welcome-hero .eyebrow { color: var(--color-secondary); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; font-weight: 700; margin: 0 0 0.35rem; } .welcome-hero .school-name { font-size: 1.55rem; color: var(--color-primary); margin: 0 0 0.5rem; line-height: 1.2; } .progress-track { background: var(--color-surface-2); border-radius: 999px; height: 10px; overflow: hidden; margin: 0.5rem 0 0.35rem; } .progress-fill { background: var(--color-secondary); height: 100%; border-radius: 999px; } .welcome-hero .deadline { color: var(--color-muted); font-size: 0.9rem; margin: 0; } /* ---------- Dashboard summary cards (replaces the earlier plain .checklist list) ---------- */ .dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1.25rem 0 0; } .dashboard-card { display: flex; flex-direction: column; gap: 0.4rem; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.1rem 1.2rem; } .dashboard-card .card-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); } .dashboard-card .card-value { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 700; color: var(--color-primary); line-height: 1.1; font-variant-numeric: tabular-nums; } .dashboard-card .card-value.card-value-ok { color: var(--color-success); } .dashboard-card .card-value.card-value-pending { color: var(--color-secondary); } .dashboard-card .card-warning { color: var(--color-warning); font-size: 0.8rem; } .text-ok { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-error { color: var(--color-error); text-decoration: underline; } .text-error:hover { color: var(--color-error); text-decoration: none; } /* Design-review fix (cycle 1, 2026-08-25): both reviewers independently flagged bare colored status text in table status columns (e.g. staff_schools.php's "Da compilare"/"Completati") as low-contrast and as yet another one-off way of showing "status" alongside the .alert-* banners and the homepage .status-box -- three different visual treatments for the same idea. A dedicated `.status-badge` (deliberately separate from `.text-ok`/`.text-warning`/ `.text-error` above, which are also used as plain inline text/link emphasis elsewhere -- e.g. school_logistics_edit.php's Matera-conditions link, student_edit.php's Artistico field note -- where a pill/badge shape would look wrong) renders as a small pill with its own background, raising contrast versus text-on-page-background alone. */ .status-badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; } .status-badge-ok { color: var(--color-success); background: var(--color-success-bg); } .status-badge-warning { color: var(--color-warning); background: var(--color-warning-bg); } .status-badge-error { color: var(--color-error); background: var(--color-error-bg); } .dashboard-card .card-action { margin-top: auto; padding-top: 0.5rem; color: var(--color-primary); text-decoration: none; font-weight: 600; font-size: 0.88rem; } .dashboard-card .card-action:hover { text-decoration: underline; } .activity-list { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.85rem; color: var(--color-muted); } .activity-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--color-border); } .activity-list li:last-child { border-bottom: none; } .activity-list time { color: var(--color-text); font-weight: 600; margin-right: 0.5rem; } /* ---------- Footer / assistance ---------- */ footer.site-footer { margin-top: 2.5rem; border-top: 1px solid var(--color-border); background: var(--color-surface); } footer.site-footer .inner { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 2rem; text-align: center; } footer.site-footer .assistance-title { font-weight: 700; margin: 0 0 0.5rem; color: var(--color-primary); font-family: var(--font-serif); } footer.site-footer .assistance-line { margin: 0.15rem 0; font-size: 0.9rem; color: var(--color-text); } footer.site-footer .assistance-line a { color: var(--color-primary); } footer.site-footer .assistance-muted { color: var(--color-muted); font-size: 0.85rem; } @media (max-width: 640px) { header.site nav { width: 100%; justify-content: flex-start; } } @media (prefers-color-scheme: dark) { :root { --color-bg: #1b1712; --color-surface: #241f18; --color-surface-2: #2c2620; --color-text: #ede4d3; --color-muted: #b8ac96; --color-border: #453d30; --color-accent: #8fa06c; --color-primary: #6e6353; --color-primary-dark: #85795f; --color-secondary: #c25640; --color-error: #d9584a; --color-error-bg: #3a211b; --color-success-bg: #1c2e18; --color-warning: #d9b869; --color-warning-bg: #3a2f14; --banner-bg: #14110d; --banner-bg-2: #241f18; --table-hover-bg: #3c3527; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(0, 0, 0, 0.4); } } /* ---------- Alternative themes (selector, 2026-08-27) ---------- Only the identity tokens differ between these blocks and :root above -- no selector here restates layout/spacing/typography, so nothing outside app.css's own color tokens can drift between themes. --color-success/--color-warning stay theme-independent (semantic, not identity) and are intentionally not overridden. The hover-tint tokens introduced above (--nav-cta-hover, --button-accent-hover, --color-error-dark, --lang-switch-border) are deliberately left unset in every dark block here, exactly mirroring :root's own dark block above (which never differentiated them either) -- falls back to that theme's own light-mode value, preserving the exact hover behavior already shipped and verified. */ [data-tema="marmo-bronzo"] { --color-bg: #edebe6; --color-surface: #ffffff; --color-surface-2: #e3e0d8; --color-text: #1f221e; --color-muted: #5c6058; --color-border: #d3cfc4; --color-primary: #2f4538; --color-primary-dark: #3e5a49; --color-primary-contrast: #f2f1ec; --color-secondary: #8c5a2b; --color-secondary-contrast: #ffffff; --color-accent: #b08d57; --color-error: #a6362a; --color-error-dark: #7a2820; --color-error-bg: #f7e7e2; --banner-bg: #2f4538; --banner-bg-2: #3e5a49; --banner-text: #f2f1ec; --banner-muted: #cfd6ca; --nav-cta-hover: #c9ae7c; --button-accent-hover: #6e4620; --table-hover-bg: #dcd8cc; --lang-switch-border: rgba(242, 241, 236, 0.35); --shadow: 0 1px 2px rgba(47, 69, 56, 0.08), 0 8px 20px rgba(47, 69, 56, 0.08); } @media (prefers-color-scheme: dark) { [data-tema="marmo-bronzo"] { --color-bg: #141815; --color-surface: #1d2320; --color-surface-2: #242b27; --color-text: #e7e9e4; --color-muted: #a7ad9f; --color-border: #3a423c; --color-accent: #c9a96b; --color-primary: #4a6b57; --color-primary-dark: #5c8069; --color-primary-contrast: #f2f1ec; --color-secondary: #b07640; --color-secondary-contrast: #ffffff; --color-error: #d9584a; --color-error-bg: #3a2420; --banner-bg: #10140f; --banner-bg-2: #1d2320; --table-hover-bg: #2e362f; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(0, 0, 0, 0.4); } } [data-tema="porpora-imperiale"] { --color-bg: #f1ede9; --color-surface: #ffffff; --color-surface-2: #e7e1da; --color-text: #241a20; --color-muted: #6b5c63; --color-border: #d9cfc9; --color-primary: #4b1e3d; --color-primary-dark: #63305a; --color-primary-contrast: #f4ecf0; --color-secondary: #2f4538; --color-secondary-contrast: #ffffff; --color-accent: #c7a252; --color-error: #b23a2a; --color-error-dark: #872c1e; --color-error-bg: #f8e6e1; --banner-bg: #4b1e3d; --banner-bg-2: #63305a; --banner-text: #f4ecf0; --banner-muted: #d9c7d3; --nav-cta-hover: #d9b869; --button-accent-hover: #223328; --table-hover-bg: #e3dce0; --lang-switch-border: rgba(244, 236, 240, 0.35); --shadow: 0 1px 2px rgba(75, 30, 61, 0.08), 0 8px 20px rgba(75, 30, 61, 0.08); } @media (prefers-color-scheme: dark) { [data-tema="porpora-imperiale"] { --color-bg: #171115; --color-surface: #201a1f; --color-surface-2: #291f27; --color-text: #ede6ea; --color-muted: #b6a7b1; --color-border: #3c2e38; --color-accent: #d9b869; --color-primary: #7a3d6c; --color-primary-dark: #8f4f80; --color-primary-contrast: #f4ecf0; --color-secondary: #5c8069; --color-secondary-contrast: #ffffff; --color-error: #d9584a; --color-error-bg: #3a211b; --banner-bg: #140f13; --banner-bg-2: #201a1f; --table-hover-bg: #2e2530; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(0, 0, 0, 0.4); } } /* ---------- Print (Stampe section, DEC-063) ---------- `.no-print` hides page chrome (nav, filter form, export link) that makes no sense on paper. `thead { display: table-header-group; }` is what makes a printed multi-page table repeat its column headers on every page -- native browser behaviour, no JS/PDF library involved. `.table-scroll`'s horizontal scrollbar doesn't exist on paper, so it reverts to visible overflow here rather than clipping content at the page edge. */ @media print { header.site, footer.site-footer, .no-print { display: none !important; } main, main.wide { max-width: none; margin: 0; padding: 0; box-shadow: none; border: none; } .table-scroll { overflow-x: visible; } table.data-table { min-width: 0; width: 100%; } table.data-table thead { display: table-header-group; } table.data-table tr { page-break-inside: avoid; } } /* ---------- Registration: MIM school registry autocomplete (DEC-078 step 4) ---------- */ /* Suggestions list anchored under the codice meccanografico field; plain buttons so it stays keyboard-reachable (Tab) and usable without any ARIA-widget scripting beyond open/close. */ .school-search { position: relative; } .school-suggestions { list-style: none; margin: 0.25rem 0 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); max-height: 18rem; overflow-y: auto; } .school-suggestions li + li { border-top: 1px solid var(--color-border); } .school-suggestions button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 0; color: inherit; font: inherit; font-size: 0.9rem; padding: 0.5rem 0.75rem; cursor: pointer; } .school-suggestions button:hover, .school-suggestions button:focus { background: var(--table-hover-bg); outline: none; } .school-results .school-result { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0.5rem 0; } .field-help { font-size: 0.875rem; margin: 0.25rem 0 0.5rem; } /* Invisible first submit button: makes Enter submit the registration, not the "Cerca" button. */ .visually-hidden-submit { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ---------- Registration manual for schools (public/manuale.php) ---------- */ .manual-toc ol { columns: 2; column-gap: 2rem; padding-left: 1.25rem; } .manual-section { margin-top: 1.75rem; } .manual-steps li { margin-bottom: 0.4rem; } .manual-tips { list-style: none; padding: 0.75rem 1rem; margin: 0.75rem 0 0; border-left: 4px solid var(--color-border); background: var(--color-surface-2); border-radius: var(--radius); } .manual-tips li { margin: 0.3rem 0; font-size: 0.925rem; } @media (max-width: 640px) { .manual-toc ol { columns: 1; } } @media print { .pre-main-wrap { display: none !important; } .manual-toc ol { columns: 2; } .manual-section { break-inside: auto; } .manual-section h2 { break-after: avoid; page-break-after: avoid; } .manual-steps li, .manual-tips { break-inside: avoid; page-break-inside: avoid; } .manual-tips { background: none; border-left-width: 2px; } .manual a { color: inherit; text-decoration: none; } body { background: #fff !important; } main .card { box-shadow: none !important; border: none !important; } } /* Registration anti-bot trap (DEC-079): kept out of view and out of the tab order; not display:none, which some bots detect and skip. */ .hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Informative note with a blue "i" (registration form, user request 2026-09-25). Always visible text rather than a hover tooltip, so it works on phones and with screen readers. */ .info-note { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.875rem; margin: 0.3rem 0 0.6rem; } .info-icon { flex: 0 0 1.15rem; height: 1.15rem; border-radius: 50%; background: #1d4ed8; color: #fff; font: italic 700 0.78rem/1.15rem Georgia, "Times New Roman", serif; text-align: center; margin-top: 0.1rem; } /* The letter comes from CSS, not from the page text: browser translators cannot alter it. */ .info-icon::before { content: "i"; } /* DEC-089: "Visualizza come scuola" (read-only) -- a fixed strip that is always visible while a staff member views a school's area, so the two identities can never be confused. */ .impersonation-banner { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.6rem 1rem; background: var(--color-warning-bg); color: var(--color-warning); border-bottom: 2px solid var(--color-warning); font-weight: 600; } .impersonation-banner .impersonation-text { flex: 1 1 18rem; } .impersonation-banner form { margin: 0; } .impersonation-banner a, .impersonation-banner button { font-weight: 600; } .button-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }