/* ============================================================ Madison Design System Loaded only by pages that opt in (currently community.php and main_menu.php). This file is purely additive — nothing else on the site is affected. Apply a theme by adding `theme-light` or `theme-dark` to . ============================================================ */ :root { /* Brand */ --madison-teal: #0891b2; /* logo blue */ --madison-teal-deep: #0e7490; --madison-teal-glow: #22d3ee; --madison-coral: #fb7185; /* warm secondary */ --madison-coral-deep: #e11d48; --madison-amber: #f59e0b; --madison-sage: #10b981; --madison-violet: #8b5cf6; /* Type */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; /* Motion */ --ease: cubic-bezier(.2, .8, .2, 1); --dur-fast: 160ms; --dur: 280ms; --dur-slow: 480ms; /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; } /* ----------------------------------------------------------- LIGHT THEME — public-facing ----------------------------------------------------------- */ body.theme-light { --bg: #fef9f3; /* warm cream */ --bg-soft: #fbf6ee; --surface: #ffffff; --surface-2: #f7f2e9; --ink: #1f2937; --ink-muted: #5b6471; --ink-soft: #94a0ad; --border: #ece5d7; --border-soft: #f3ecdf; --link: var(--madison-teal-deep); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08); --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.10); background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ----------------------------------------------------------- DARK THEME — staff backend ----------------------------------------------------------- */ body.theme-dark { --bg: #0a0e14; --bg-soft: #0f141b; --surface: #161c26; --surface-2: #1d2532; --ink: #e6e8ea; --ink-muted: #9aa3ad; --ink-soft: #6b7280; --border: #232a36; --border-soft: #1c2330; --link: var(--madison-teal-glow); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6); background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } /* ----------------------------------------------------------- Layout primitives ----------------------------------------------------------- */ .madison-shell { max-width: 1400px; margin: 0 auto; /* Default: only bottom padding to clear the fixed .madison-footer. Pages that include the fixed .thin-topbar (currently the public community page) opt in to top padding via the rule below. */ padding: 0 24px 60px; } /* Only the public (light-theme) page mounts the fixed top bar, so only it needs top padding to clear it. Staff dashboard (theme-dark) keeps its natural top so the logo sits at the top of the page. */ body.theme-light .madison-shell { padding-top: 60px; } @media (max-width: 720px) { .madison-shell { padding: 0 14px 56px; } body.theme-light .madison-shell { padding-top: 56px; } } .madison-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 22px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .madison-card:hover { box-shadow: var(--shadow-md); } .madison-card h3 { margin: 0 0 10px; font-size: 1.05rem; color: var(--ink); letter-spacing: .01em; } /* ----------------------------------------------------------- HERO — public homepage (compact, refined) ----------------------------------------------------------- */ .hero { position: relative; margin: 12px 0 24px; padding: 26px 28px; border-radius: var(--r-lg); overflow: hidden; color: #fff; isolation: isolate; background: radial-gradient(ellipse at 85% 0%, rgba(251, 113, 133, 0.35), transparent 55%), linear-gradient(120deg, #0e7490 0%, #0891b2 60%, #0d9488 100%); } @media (max-width: 720px) { .hero { margin: 8px 0 16px; padding: 22px 20px; } } .hero-photo { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; filter: saturate(1.05) brightness(.72); } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgba(8, 145, 178, .85) 0%, rgba(14, 116, 144, .8) 60%, rgba(225, 29, 72, .25) 100%); } .hero-inner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .hero-greeting { flex: 1 1 auto; min-width: 260px; } .hero-greeting .hero-time { font-size: .75rem; opacity: .92; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #e0f7fa; } .hero-greeting h1 { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin: 4px 0 2px; font-weight: 600; letter-spacing: -.005em; line-height: 1.15; } .hero-greeting .hero-date { font-size: .92rem; opacity: .9; letter-spacing: .01em; } .hero-cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff !important; text-decoration: none; border: 1px solid rgba(255,255,255,.35); font-size: .9rem; font-weight: 600; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); white-space: nowrap; } .hero-cta:hover { background: rgba(255,255,255,.28); transform: translateY(-1px); } /* The CTA only earns its keep on small screens where the schedule is below the fold. On desktop the schedule is visible right beside the hero. */ @media (min-width: 720px) { .hero-cta { display: none; } } /* Decorative shapes still defined but disabled by default — we removed them from the markup. Kept as opt-in for any future page. */ .hero-shapes { display: none; } /* Slim hero variant for staff splash (dark theme) */ .hero-slim { padding: 24px 26px; } .hero-slim .hero-greeting h1 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); } /* Live clock — big serif numerals on the right side of the hero, padded to match the greeting on the left. Updates on the client every minute. */ .hero-clock { font-family: var(--font-display); font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 600; color: #fff; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 6px rgba(0,0,0,.25); flex-shrink: 0; } .hero-clock .ampm { font-size: 0.32em; font-weight: 600; letter-spacing: .12em; margin-left: 0.25em; vertical-align: 0.6em; opacity: .9; text-transform: uppercase; } @media (max-width: 720px) { .hero-clock { width: 100%; text-align: center; } } /* ----------------------------------------------------------- PUBLIC PAGE: layout ----------------------------------------------------------- */ .public-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; /* columns take their natural height */ } @media (max-width: 1100px) { .public-layout { grid-template-columns: 1fr; } } /* Vignette column: each card uses its natural height — the previous stretch-to-fill behavior made them feel oversized. */ .vignette-column { display: flex; flex-direction: column; gap: 16px; } .vignette-column .vignette { flex: 0 0 auto; margin-bottom: 0; } /* Bulletin column same trick on the right */ .bulletin-column { display: flex; flex-direction: column; min-height: 0; } /* Vignette cards — stationery cards with a colored gradient ribbon header. Cream paper body, refined display headlines, designed to hold their own visually next to the corkboard and the flyer-style schedule. */ .vignette { position: relative; background: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.6), transparent 50%), linear-gradient(180deg, #fffdf6 0%, #fbf6e8 100%); border: 1px solid #e8dfc8; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 3px rgba(120,80,30,.06), 0 8px 22px rgba(120,80,30,.10); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); display: flex; flex-direction: column; } .vignette:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(120,80,30,.08), 0 14px 28px rgba(120,80,30,.14); } /* Unified gradient header — all three vignettes share the same logo-teal gradient so the trio reads as a coherent set. Icons keep their unique shapes for category recognition. */ .vignette-head { display: flex; align-items: center; gap: 10px; padding: 11px 18px; color: #fff; background: linear-gradient(135deg, #0e7490 0%, #0891b2 55%, #14b8a6 100%); border-bottom: 3px solid #0c2340; box-shadow: 0 2px 6px rgba(8, 145, 178, .3); } .vignette .vignette-icon { color: #fff; font-size: 1.05rem; width: auto; height: auto; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .vignette h3 { font-size: .8rem; color: #fff; margin: 0; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1; text-shadow: 0 1px 1px rgba(0,0,0,.18); } /* Body area — generous padding, refined type */ .vignette-body { padding: 18px 22px 22px; flex: 1; display: flex; flex-direction: column; justify-content: center; } .vignette .vignette-headline { font-family: var(--font-display); font-size: 1.55rem; color: var(--ink); margin: 0 0 8px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; } .vignette p { margin: 0; color: #4b5563; line-height: 1.55; font-size: .95rem; } /* Decorative em-dash flourish — uniform teal across all vignettes */ .vignette-body::after { content: ""; display: block; width: 28px; height: 2px; background: var(--madison-teal); border-radius: 2px; margin-top: 12px; align-self: flex-start; opacity: .45; } /* Vignette accent classes are kept for back-compat / future use, but all currently resolve to the same teal so the trio stays unified. */ .v-teal, .v-coral, .v-sage, .v-amber, .v-violet { --vignette-color: var(--madison-teal); } /* Schedule card — built to look like Madison's printed Activity Schedule flyer: double navy frame, navy banner header, alternating row backgrounds, all-caps navy typography. */ .timeline-card { padding: 0; background: #fff; /* Real double border via border-style:double — guarantees the two lines wrap fully around all four sides, including across the top edge. */ border: 6px double #0c2340; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md); } .timeline-card .tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; /* tabs sit centered, under the banner */ padding: 4px 22px 14px; background: #fff; } .timeline-card .tabs button { padding: 8px 16px; border-radius: 999px; border: 1px solid #d6dce4; background: #fff; color: #475569; font-weight: 600; font-size: .9rem; cursor: pointer; transition: all var(--dur-fast) var(--ease); letter-spacing: .01em; } .timeline-card .tabs button:hover { color: #0c2340; border-color: #0c2340; } .timeline-card .tabs button.active { background: #0c2340; color: #fff; border-color: #0c2340; box-shadow: 0 4px 12px rgba(12, 35, 64, .25); } /* Navy banner — date + dept, all caps. Width tightened to roughly match the logo above it; padding reduced so it's a slim title plate, not a chunky band. */ .schedule-banner { width: 360px; max-width: 88%; margin: 14px auto 12px; background: linear-gradient(180deg, #14365e 0%, #0c2340 100%); color: #fff; border-radius: 12px; padding: 9px 14px; text-align: center; box-shadow: 0 4px 12px rgba(12, 35, 64, .25); } @media (max-width: 720px) { .schedule-banner { width: 92%; } } .schedule-banner .schedule-date { font-size: .92rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; } .schedule-banner .schedule-title { font-size: 1.05rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; color: #cfe9f5; } @media (max-width: 720px) { .schedule-banner .schedule-date { font-size: .8rem; letter-spacing: .1em; } .schedule-banner .schedule-title { font-size: .9rem; letter-spacing: .1em; } } /* Note under the schedule */ .timeline-card .schedule-note { color: #94a0ad; text-align: center; padding: 12px 22px 22px; font-size: .85rem; } /* Activity rows — flyer aesthetic: navy text, all caps, alternating subtle blue-tinted backgrounds. Tabular numbers so times line up vertically. */ .timeline { position: relative; padding: 0 22px 6px; } .timeline-item { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 16px; padding: 13px 14px; background: #f1f6fb; border-radius: 8px; margin: 6px 0; transition: background var(--dur-fast) var(--ease); } .timeline-item:hover { background: #e3edf6; } .timeline-time { color: #0c2340; font-weight: 800; font-size: .95rem; letter-spacing: .04em; white-space: nowrap; font-variant-numeric: tabular-nums; text-transform: uppercase; } body.theme-dark .timeline-time { color: var(--madison-teal-glow); } .timeline-title { font-size: .98rem; color: #0c2340; font-weight: 800; line-height: 1.25; letter-spacing: .03em; text-transform: uppercase; } .timeline-loc { color: #0c2340; font-size: .9rem; font-weight: 700; text-align: right; white-space: nowrap; letter-spacing: .04em; text-transform: uppercase; } .timeline-empty { color: #94a0ad; text-align: center; padding: 32px 22px; font-style: italic; } @media (max-width: 720px) { .timeline-item { grid-template-columns: 80px 1fr; gap: 10px; padding: 11px 12px; } .timeline-loc { grid-column: 2; text-align: left; font-size: .82rem; } } /* Corkboard bulletin board — heading lives inside the wooden frame as a carved wooden plaque, so the corkboard stretches taller and reads as a complete object rather than a section with a label above it. */ .bulletin-board { flex: 1; display: flex; flex-direction: column; padding: 14px 18px 22px; border-radius: var(--r-lg); border: 6px solid #6b4423; /* wooden frame */ box-shadow: inset 0 0 0 2px #4a2f18, inset 0 2px 8px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.15); background-color: #c89968; background-image: radial-gradient(circle at 12% 18%, rgba(80, 50, 25, .25) 1.4px, transparent 2.2px), radial-gradient(circle at 78% 32%, rgba(60, 35, 15, .22) 1.2px, transparent 2px), radial-gradient(circle at 42% 68%, rgba(90, 60, 30, .28) 1.6px, transparent 2.4px), radial-gradient(circle at 88% 88%, rgba(70, 45, 20, .2) 1.1px, transparent 1.8px), radial-gradient(circle at 25% 92%, rgba(95, 65, 30, .22) 1.3px, transparent 2.1px), linear-gradient(135deg, #c89968 0%, #b88550 100%); background-size: 28px 28px, 36px 36px, 22px 22px, 32px 32px, 26px 26px, 100% 100%; } /* Wooden plaque header pinned to the top of the cork */ .bulletin-header { position: relative; text-align: center; padding: 10px 22px 12px; margin-bottom: 18px; border-radius: 6px; color: #fde7c7; background: linear-gradient(180deg, #6b4423 0%, #4a2f18 100%); border: 1px solid #2a1a08; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.18); } /* Brass screws on each end of the plaque */ .bulletin-header::before, .bulletin-header::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0d18a 0%, #c9a55d 50%, #6b4423 100%); box-shadow: inset 0 -1px 1px rgba(0,0,0,.4); transform: translateY(-50%); } .bulletin-header::before { left: 8px; } .bulletin-header::after { right: 8px; } .bulletin-header .bulletin-eyebrow { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: #d4a574; font-weight: 700; line-height: 1; } .bulletin-header .bulletin-title { font-family: var(--font-display); font-size: 1.35rem; color: #fde7c7; margin: 6px 0 0; font-weight: 700; letter-spacing: .04em; text-shadow: 0 1px 2px rgba(0,0,0,.4); } /* Pin notes container — flex column with rotational stagger */ .bulletin-notes { flex: 1; display: flex; flex-direction: column; gap: 18px; } /* Each pinned note */ .pin { position: relative; background: #fffdf2; color: var(--ink); border: 1px solid rgba(0,0,0,.06); border-radius: 4px; padding: 28px 16px 14px; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.18); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); transform-origin: top center; } /* Gentle wiggle — each pin sways subtly, as if loosely thumbtacked. Odd and even pins use different keyframes (and slightly different periods) so the board never sways in unison. Hover stops the sway and lifts. */ @keyframes pin-wiggle-left { 0%, 100% { transform: rotate(-1.2deg) translateY(0); } 50% { transform: rotate(-2.2deg) translateY(-1px); } } @keyframes pin-wiggle-right { 0%, 100% { transform: rotate( 1.4deg) translateY(0); } 50% { transform: rotate( 2.4deg) translateY(-1px); } } .bulletin-notes .pin:nth-child(odd) { transform: rotate(-1.2deg); animation: pin-wiggle-left 5.6s ease-in-out infinite; } .bulletin-notes .pin:nth-child(even) { transform: rotate( 1.4deg); animation: pin-wiggle-right 6.4s ease-in-out infinite; animation-delay: -1.8s; } .bulletin-notes .pin:nth-child(3n) { animation-duration: 7.2s; } .bulletin-notes .pin:nth-child(4n+1) { animation-delay: -3.1s; } .pin:hover { animation-play-state: paused; transform: rotate(0deg) translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 10px 20px rgba(0,0,0,.22); } @media (prefers-reduced-motion: reduce) { .bulletin-notes .pin { animation: none !important; } } /* Thumbtack at the top center of each note */ .pin::before { content: ""; position: absolute; top: 6px; left: 50%; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 32%, color-mix(in srgb, var(--pin-color, var(--madison-coral)) 30%, #fff) 0%, var(--pin-color, var(--madison-coral)) 50%, color-mix(in srgb, var(--pin-color, var(--madison-coral)) 60%, #000) 100%); box-shadow: inset 0 -1px 2px rgba(0,0,0,.3), 0 2px 3px rgba(0,0,0,.45); z-index: 2; } /* Tiny shadow that the thumbtack casts on the paper */ .pin::after { content: ""; position: absolute; top: 18px; left: 50%; width: 8px; height: 4px; transform: translateX(-50%); background: rgba(0,0,0,.12); border-radius: 50%; filter: blur(2px); } .pin h4 { margin: 0 0 4px; font-size: .98rem; color: #1f2937; font-weight: 700; letter-spacing: -.005em; } .pin p { margin: 0; color: #4b5563; font-size: .9rem; line-height: 1.5; } /* Rotating thumbtack colors so a wall of pins doesn't feel monotone */ .bulletin-notes .pin:nth-child(5n+1) { --pin-color: #e11d48; } /* red */ .bulletin-notes .pin:nth-child(5n+2) { --pin-color: #0891b2; } /* teal */ .bulletin-notes .pin:nth-child(5n+3) { --pin-color: #f59e0b; } /* amber */ .bulletin-notes .pin:nth-child(5n+4) { --pin-color: #10b981; } /* sage */ .bulletin-notes .pin:nth-child(5n+5) { --pin-color: #8b5cf6; } /* violet */ /* ----------------------------------------------------------- STAFF SPLASH (dark) ----------------------------------------------------------- */ .app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .app-tile { position: relative; display: flex; gap: 16px; align-items: center; padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--ink); overflow: hidden; isolation: isolate; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .app-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, color-mix(in srgb, var(--tile-color, var(--madison-teal)) 18%, transparent), transparent 70%); opacity: 0; transition: opacity var(--dur) var(--ease); } .app-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--tile-color, var(--madison-teal)) 50%, var(--border)); } .app-tile:hover::before { opacity: 1; } .app-icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: linear-gradient(135deg, var(--tile-color, var(--madison-teal)), color-mix(in srgb, var(--tile-color, var(--madison-teal)) 75%, #000)); color: #fff; font-size: 1.5rem; box-shadow: 0 6px 16px color-mix(in srgb, var(--tile-color, var(--madison-teal)) 35%, transparent); flex-shrink: 0; } .app-text h3 { margin: 0; font-size: 1.1rem; color: var(--ink); font-weight: 700; letter-spacing: .005em; } .app-text p { margin: 4px 0 0; color: var(--ink-muted); font-size: .9rem; line-height: 1.4; } .tile-calendar { --tile-color: #0891b2; } .tile-auctions { --tile-color: #8b5cf6; } .tile-entertainers { --tile-color: #10b981; } .tile-singo { --tile-color: #d946ef; } .tile-pokeno { --tile-color: #be123c; } .tile-charting { --tile-color: #0d9488; } /* Black Ace (spade glyph) used as the Pokeno brand mark on both the dashboard tile and the Pokeno topbar pill. */ .pokeno-ace { display: inline-flex; align-items: center; justify-content: center; line-height: 1; color: #0c0c0c; font-size: 1.7em; font-family: "Apple Symbols", "Segoe UI Symbol", "Iowan Old Style", Georgia, serif; } .tile-library { --tile-color: #f59e0b; } .tile-rsvp { --tile-color: #14b8a6; } .tile-signup { --tile-color: #06b6d4; } .tile-settings { --tile-color: #94a3b8; } /* Staff topbar */ .staff-topbar { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; margin-bottom: 12px; flex-wrap: wrap; gap: 12px; min-height: 96px; } .staff-topbar .brand-logo img { height: 96px; width: auto; display: block; } @media (max-width: 720px) { .staff-topbar { min-height: 0; } .staff-topbar .brand-logo img { height: 64px; } } .staff-topbar .topbar-actions { display: flex; gap: 10px; align-items: center; } .staff-topbar select { padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-size: .92rem; cursor: pointer; } .staff-topbar .btn-logout { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--madison-coral) 50%, var(--border)); background: transparent; color: var(--madison-coral); font-weight: 600; text-decoration: none; transition: all var(--dur-fast) var(--ease); } .staff-topbar .btn-logout:hover { background: color-mix(in srgb, var(--madison-coral) 15%, transparent); color: #fff; border-color: var(--madison-coral); } /* Public-page jump button — sits next to Switch App so staff can preview what residents/families see without logging out. */ .staff-topbar .btn-public { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--madison-teal-glow) 50%, var(--border)); background: transparent; color: var(--madison-teal-glow); font-weight: 600; font-size: .92rem; text-decoration: none; transition: all var(--dur-fast) var(--ease); } .staff-topbar .btn-public:hover { background: color-mix(in srgb, var(--madison-teal-glow) 12%, transparent); color: #fff; border-color: var(--madison-teal-glow); } /* Logged-in pill on the public homepage — replaces Staff Login when the visitor is already authenticated. Click goes to the staff dashboard. */ .header-account { display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; background: linear-gradient(180deg, #14365e 0%, #0c2340 100%); color: #fff; text-decoration: none; font-weight: 600; font-size: .9rem; letter-spacing: .01em; box-shadow: 0 4px 14px rgba(12, 35, 64, .35); transition: all var(--dur-fast) var(--ease); white-space: nowrap; } .header-account:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(12, 35, 64, .45); } .header-account .account-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--madison-teal-glow); color: #0c2340; font-weight: 800; font-size: .85rem; letter-spacing: 0; } .header-account .account-arrow { opacity: .8; margin-right: 6px; } /* Thin top bar — matches the fixed footer in look (black, white text). Sticky so it stays visible on scroll. Cluster of "Activities Department" label + Staff Login / Welcome pill on the right. Replaces the old big cream header that carried the greeting (greeting now lives inside the schedule card / on the printed flyer). */ .thin-topbar { /* Mirror of the fixed .madison-footer — locked to viewport top, full width, navy-blue gradient. Teal accent pills pop against the navy. */ position: fixed; top: 0; left: 0; right: 0; z-index: 60; color: #ffffff; background: linear-gradient(180deg, #14365e 0%, #0c2340 100%); border-bottom: 1px solid rgba(255,255,255,.06); box-shadow: 0 2px 10px rgba(0,0,0,.25); } /* Inner row mirrors .madison-shell's max-width and side padding so the label aligns with the left edge of the Word-of-the-Day card and the action pill aligns with the right edge of the Bulletin Board. */ .thin-topbar-inner { max-width: 1400px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } @media (max-width: 720px) { .thin-topbar-inner { padding: 9px 14px; gap: 12px; } } .thin-topbar-label { font-size: .95rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffffff; white-space: nowrap; } @media (max-width: 720px) { .thin-topbar-label { font-size: .8rem; letter-spacing: .08em; } } .thin-topbar .thin-topbar-action { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: linear-gradient(180deg, #0891b2 0%, #0e7490 100%); color: #fff; text-decoration: none; font-weight: 600; font-size: .85rem; letter-spacing: .01em; box-shadow: 0 2px 8px rgba(8, 145, 178, .45); border: 1px solid rgba(255,255,255,.18); transition: all var(--dur-fast) var(--ease); white-space: nowrap; } .thin-topbar .thin-topbar-action:hover { transform: translateY(-1px); background: linear-gradient(180deg, #0e7490 0%, #0891b2 100%); box-shadow: 0 4px 12px rgba(8, 145, 178, .55); } .thin-topbar .thin-topbar-account { display: inline-flex; align-items: center; gap: 10px; padding: 5px 6px 5px 14px; border-radius: 999px; background: linear-gradient(180deg, #0891b2 0%, #0e7490 100%); color: #fff; text-decoration: none; font-weight: 600; font-size: .85rem; box-shadow: 0 2px 8px rgba(8, 145, 178, .45); border: 1px solid rgba(255,255,255,.18); transition: all var(--dur-fast) var(--ease); white-space: nowrap; } .thin-topbar .thin-topbar-account:hover { transform: translateY(-1px); background: linear-gradient(180deg, #0e7490 0%, #0891b2 100%); box-shadow: 0 4px 12px rgba(8, 145, 178, .55); } .thin-topbar .thin-topbar-account .account-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #0c2340; /* navy circle on teal pill — inverted */ color: #ffffff; font-weight: 800; font-size: .78rem; } .thin-topbar .thin-topbar-account .account-arrow { opacity: .85; margin-right: 6px; } /* Schedule-card logo — placed at the top center of the flyer-style card so the middle widget mirrors the printed activity schedule. */ .schedule-logo { text-align: center; padding: 20px 22px 4px; } .schedule-logo img { height: 96px; /* +15% from 84px */ width: auto; display: inline-block; max-width: 80%; } @media (max-width: 720px) { .schedule-logo img { height: 72px; } } /* Legacy header kept defined but no longer used — community.php no longer includes it. Keeping the rules so nothing accidentally regresses if someone re-introduces the markup. */ .madison-header { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 16px 22px; margin: 14px 0 28px; border-radius: var(--r-lg); background: linear-gradient(135deg, #ffffff 0%, #fdf7ec 100%); box-shadow: var(--shadow-md); border: 1px solid var(--border); position: relative; overflow: hidden; } /* Subtle teal accent bar on the bottom edge for brand presence */ .madison-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--madison-teal-deep), var(--madison-teal), var(--madison-coral)); } .header-brand img { height: 96px; width: auto; display: block; } .header-greeting { min-width: 0; text-align: center; /* greeting sits centered between logo and login */ } .header-greeting .header-eyebrow { color: var(--madison-teal-deep); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; line-height: 1; } .header-greeting h1 { color: var(--ink); font-family: var(--font-display); font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 8px 0 0; font-weight: 600; letter-spacing: -.005em; line-height: 1.15; } .header-login { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; background: linear-gradient(180deg, #14365e 0%, #0c2340 100%); color: #fff; text-decoration: none; font-weight: 600; font-size: .92rem; letter-spacing: .01em; box-shadow: 0 4px 14px rgba(12, 35, 64, .35); transition: all var(--dur-fast) var(--ease); white-space: nowrap; } .header-login:hover { background: linear-gradient(180deg, #0c2340 0%, #08182d 100%); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(12, 35, 64, .45); } @media (max-width: 880px) { .madison-header { grid-template-columns: auto auto; grid-template-areas: "brand login" "greet greet"; gap: 12px 16px; padding: 14px 16px; } .header-brand { grid-area: brand; } .header-login { grid-area: login; } .header-greeting{ grid-area: greet; } .header-brand img { height: 64px; } .header-greeting h1 { white-space: normal; font-size: 1.1rem; } } /* Legacy classes kept hidden so existing markup doesn't appear twice during rollout. */ .public-topbar { display: none; } /* Section heading — sans, matches body type */ .section-eyebrow { color: var(--madison-teal-deep); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; } body.theme-dark .section-eyebrow { color: var(--madison-teal-glow); } .section-title { font-family: var(--font-sans); font-size: 1.35rem; color: var(--ink); margin: 0 0 18px; font-weight: 700; letter-spacing: -.005em; } /* Footer — solid black on the public (light) page, teal on the dark staff dashboard so it matches the welcome banner gradient. */ .madison-footer { position: fixed; left: 0; right: 0; bottom: 0; text-align: center; padding: 14px 12px; font-size: .88rem; font-weight: 500; letter-spacing: .02em; color: #ffffff; background: #000000; border-top: 1px solid #1a1a1a; z-index: 50; } body.theme-dark .madison-footer { background: linear-gradient(120deg, #0e7490 0%, #0891b2 60%, #0d9488 100%); border-top: 1px solid rgba(255,255,255,.08); } /* Entrance animations */ .fade-up { opacity: 0; transform: translateY(12px); animation: fadeUp .7s var(--ease) forwards; } .fade-up.delay-1 { animation-delay: .08s; } .fade-up.delay-2 { animation-delay: .16s; } .fade-up.delay-3 { animation-delay: .24s; } .fade-up.delay-4 { animation-delay: .32s; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .fade-up { animation: none; opacity: 1; transform: none; } .hero-shapes span { animation: none; } } /* ----------------------------------------------------------- STAFF DASHBOARD — sticky-notes workspace ----------------------------------------------------------- */ .workspace-divider { position: relative; margin: 36px 0 24px; border: none; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--border) 80%, transparent 100%); } .workspace-divider::after { content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; background: var(--madison-teal-glow); border-radius: 50%; box-shadow: 0 0 0 3px var(--bg); } .notes-section { padding: 4px 0 24px; } .notes-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; } .notes-header h2 { margin: 0; font-family: var(--font-sans); font-size: 1.15rem; font-weight: 700; color: var(--ink); letter-spacing: -.005em; display: inline-flex; align-items: center; gap: 10px; } .notes-header h2 i { color: var(--madison-amber); } .notes-header .notes-count { color: var(--ink-soft); font-size: .85rem; font-weight: 500; margin-left: 4px; } .notes-add-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--madison-amber) 60%, transparent); background: color-mix(in srgb, var(--madison-amber) 10%, transparent); color: var(--madison-amber); font-weight: 600; font-size: .9rem; cursor: pointer; transition: all var(--dur-fast) var(--ease); } .notes-add-btn:hover { background: color-mix(in srgb, var(--madison-amber) 20%, transparent); border-style: solid; color: #fff; } .notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; align-items: start; } .notes-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); padding: 32px 12px; font-style: italic; border: 1px dashed var(--border); border-radius: var(--r-md); } /* Yellow paper sticky note. Subtle paper grain via radial gradient noise + a slight tilt that alternates per note. Handwritten font for body. */ .sticky-note { position: relative; background: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.45) 0%, transparent 55%), linear-gradient(180deg, #fff39a 0%, #fcd95a 100%); color: #4a3800; padding: 32px 18px 18px; border-radius: 4px 4px 6px 6px; box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 6px 14px rgba(120, 80, 0, .22), inset 0 0 0 1px rgba(255,255,255,.35); transform-origin: top center; min-height: 180px; display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .sticky-note:nth-child(odd) { transform: rotate(-1.4deg); } .sticky-note:nth-child(even) { transform: rotate( 1.6deg); } .sticky-note:nth-child(3n) { transform: rotate(-.8deg); } .sticky-note:nth-child(4n+1) { transform: rotate( 1.1deg); } .sticky-note:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 12px 24px rgba(120, 80, 0, .28), inset 0 0 0 1px rgba(255,255,255,.45); z-index: 2; } /* Strip of "tape" at the top, slightly translucent */ .sticky-note::before { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 64px; height: 18px; background: rgba(220, 220, 200, .55); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), inset 0 1px 1px rgba(255,255,255,.4); border-radius: 1px; } .sticky-note textarea, .sticky-note .sticky-body { flex: 1; background: transparent; border: none; outline: none; resize: none; color: inherit; font-family: "Caveat", "Bradley Hand", "Segoe Print", "Marker Felt", "Comic Sans MS", cursive; font-size: 1.35rem; line-height: 1.25; letter-spacing: .005em; padding: 0; margin: 0; width: 100%; cursor: text; overflow: hidden; word-break: break-word; overflow-wrap: anywhere; white-space: pre-wrap; } .sticky-note .sticky-body { cursor: text; min-height: 100px; } .sticky-note .sticky-body:empty::before { content: "Write a note…"; color: rgba(74, 56, 0, .35); font-style: italic; } .sticky-note .sticky-foot { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: rgba(74, 56, 0, .55); font-family: var(--font-sans); letter-spacing: .04em; } .sticky-note .sticky-delete { background: transparent; border: none; color: rgba(74, 56, 0, .45); cursor: pointer; font-size: .9rem; padding: 2px 6px; border-radius: 4px; transition: all var(--dur-fast) var(--ease); } .sticky-note .sticky-delete:hover { color: var(--madison-coral-deep); background: rgba(225, 29, 72, .08); } .sticky-note.is-saving .sticky-foot::after { content: "saving…"; color: rgba(74, 56, 0, .55); font-style: italic; } .sticky-note.is-saved .sticky-foot::after { content: "saved"; color: rgba(16, 185, 129, .8); font-weight: 600; }