/* ============================================================================= Hershey Hub stylesheet ============================================================================= Hand-written CSS, no build step. The original hub used Tailwind; this port replaces utilities with a small set of component classes, all resolving through the CSS custom properties below. THEMING - the one rule that matters: Dark is the default. `html.light` REMAPS the same custom properties to a cream-on-paper scheme, so any component that only ever references tokens (var(--cocoa-*), var(--cream), var(--caramel), var(--st-*), var(--wu-*)) flips automatically. Never hardcode a hex in a component rule; add or reuse a token. The theme toggle just adds/removes the `light` class on (assets/js/app.js) and persists it in localStorage('hub-theme'). Palette: chocolate-forward with caramel + foil accents. Placeholder hexes pending the official Hershey Entertainment brand guide. ========================================================================== */ :root { /* Cocoa scale: 50 = lightest, 950 = darkest (in dark mode). */ --color-cocoa-50: #f7f1ea; --color-cocoa-100: #ecdfce; --color-cocoa-200: #d8bd9f; --color-cocoa-300: #bd9468; --color-cocoa-400: #9c6e3f; --color-cocoa-500: #7b4f28; --color-cocoa-600: #5e3a1c; /* primary milk-chocolate brown */ --color-cocoa-700: #482b15; --color-cocoa-800: #321d0e; --color-cocoa-900: #1f1108; --color-cocoa-950: #150b04; --color-caramel: #c99a4b; /* warm gold accent */ --color-caramel-bright: #e0b76a; --color-foil: #d9d9d6; /* Kisses silver */ --color-cream: #f5efe6; /* primary text */ /* Sweet Mail status colors (badge text) + translucent backgrounds. Suffix -bg carries the alpha channel baked into the hex. */ --st-proof: #fcd34d; --st-proof-bg: #f59e0b26; --st-test-proof: #c4b5fd; --st-test-proof-bg: #8b5cf626; --st-scheduled: #7dd3fc; --st-scheduled-bg: #0ea5e926; --st-sent: #6ee7b7; --st-sent-bg: #10b98126; --st-cancelled: #a1a1aa; --st-cancelled-bg: #71717a26; --st-alert: #fca5a5; --st-alert-bg: #ef444426; /* overdue / needs attention */ /* Website-update pipeline stages, left-to-right from intake to live. */ --wu-confirm: #fcd34d; --wu-confirm-bg: #f59e0b26; --wu-copy: #c4b5fd; --wu-copy-bg: #8b5cf626; --wu-design: #f9a8d4; --wu-design-bg: #ec489926; --wu-dev: #7dd3fc; --wu-dev-bg: #0ea5e926; --wu-staging: #5eead4; --wu-staging-bg: #14b8a626; --wu-live: #6ee7b7; --wu-live-bg: #10b98126; --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Light theme: the cocoa scale INVERTS (950 becomes the palest paper tone) and text tokens darken. Component rules don't change at all. */ html.light { --color-cocoa-950: #f6efe5; /* page background */ --color-cocoa-900: #efe4d4; /* cards, table heads */ --color-cocoa-800: #e3d4be; /* borders, dividers */ --color-cocoa-700: #d2bfa1; /* stronger borders, hover */ --color-cocoa-600: #b3946a; --color-cocoa-500: #957a4f; --color-cocoa-400: #6d5636; /* muted text */ --color-cocoa-300: #5a4426; /* muted text, stronger */ --color-cocoa-200: #453220; /* near-body text */ --color-cocoa-100: #2c1f11; --color-cocoa-50: #1f1108; --color-cream: #211309; /* primary text flips dark */ --color-foil: #5e3a1c; --color-caramel: #8a5a1c; /* darker so on-accent text stays readable */ --color-caramel-bright: #734916; --st-proof: #b45309; --st-proof-bg: #f59e0b2e; --st-test-proof: #6d28d9; --st-test-proof-bg: #8b5cf62e; --st-scheduled: #0369a1; --st-scheduled-bg: #0ea5e92e; --st-sent: #047857; --st-sent-bg: #10b9812e; --st-cancelled: #52525b; --st-cancelled-bg: #71717a2e; --st-alert: #b91c1c; --st-alert-bg: #ef44442e; --wu-confirm: #b45309; --wu-confirm-bg: #f59e0b2e; --wu-copy: #6d28d9; --wu-copy-bg: #8b5cf62e; --wu-design: #be185d; --wu-design-bg: #ec48992e; --wu-dev: #0369a1; --wu-dev-bg: #0ea5e92e; --wu-staging: #0f766e; --wu-staging-bg: #14b8a62e; --wu-live: #047857; --wu-live-bg: #10b9812e; } /* --------------------------------------------------------------------------- Reset + base ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); background: var(--color-cocoa-950); color: var(--color-cream); line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: inherit; text-decoration: none; } a.link { color: var(--color-caramel); } a.link:hover { color: var(--color-caramel-bright); text-decoration: underline; } code { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; background: var(--color-cocoa-800); padding: 0.1em 0.35em; border-radius: 4px; } /* Content column. shell-wide is for calendar/report pages. */ .shell { max-width: 64rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; } .shell-wide { max-width: 80rem; } @media (max-width: 640px) { .shell { padding: 1.25rem 0.9rem 3rem; } } /* --------------------------------------------------------------------------- App header + tab nav (shared by Sweet Mail and Website headers) ------------------------------------------------------------------------- */ .app-header { border-bottom: 1px solid var(--color-cocoa-800); padding-bottom: 1.25rem; margin-bottom: 2rem; } .app-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .app-header .crumb { font-size: 0.75rem; color: var(--color-cocoa-300); } .app-header .crumb:hover { color: var(--color-caramel); } .app-title { margin-top: 0.25rem; font-size: 1.5rem; font-weight: 700; color: var(--color-cream); } .app-title a:hover { color: var(--color-caramel); } .app-title .sep { margin: 0 0.5rem; color: var(--color-cocoa-400); font-weight: 400; } .tab-nav { display: flex; gap: 0.25rem; margin-top: 1rem; flex-wrap: wrap; } .tab-nav a { border-radius: 6px; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--color-cocoa-200); } .tab-nav a:hover { background: var(--color-cocoa-900); color: var(--color-cream); } .tab-nav a[aria-current="page"] { background: var(--color-caramel); color: var(--color-cocoa-950); font-weight: 600; } /* --------------------------------------------------------------------------- Buttons ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; border-radius: 6px; cursor: pointer; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 600; font-family: inherit; background: var(--color-caramel); color: var(--color-cocoa-950); } .btn:hover { background: var(--color-caramel-bright); } .btn-ghost { background: transparent; color: var(--color-cocoa-200); box-shadow: inset 0 0 0 1px var(--color-cocoa-700); } .btn-ghost:hover { background: var(--color-cocoa-900); color: var(--color-cream); } .btn-danger { background: var(--st-alert-bg); color: var(--st-alert); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-alert) 35%, transparent); } .btn-danger:hover { background: color-mix(in srgb, var(--st-alert) 20%, transparent); } .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; } /* --------------------------------------------------------------------------- Badges + pills ------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; } .badge-strike { text-decoration: line-through; } /* Solid status pill used on calendar chips (colors set inline via status_pill_style() in helpers.php). */ .pill { display: inline-block; border-radius: 4px; padding: 0 0.3rem; font-size: 0.65rem; font-weight: 700; } /* --------------------------------------------------------------------------- Cards, stat tiles, sections ------------------------------------------------------------------------- */ .card { display: block; border-radius: 12px; border: 1px solid var(--color-cocoa-700); background: color-mix(in srgb, var(--color-cocoa-800) 40%, transparent); padding: 1.25rem; } a.card { transition: border-color 0.15s, background 0.15s; } a.card:hover { border-color: var(--color-caramel); background: var(--color-cocoa-800); } .card-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.25rem; } @media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .card-grid-3 { grid-template-columns: repeat(3, 1fr); } .card-grid-4 { grid-template-columns: repeat(4, 1fr); } } .tile-value { font-size: 1.75rem; font-weight: 700; color: var(--color-cream); font-variant-numeric: tabular-nums; line-height: 1.2; } .tile-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-cocoa-300); margin-top: 0.2rem; } .tile-alert .tile-value { color: var(--st-alert); } .section-title { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-cocoa-300); margin-bottom: 0.75rem; } .muted { color: var(--color-cocoa-300); } .muted-strong { color: var(--color-cocoa-200); } .small { font-size: 0.8125rem; } .empty-note { color: var(--color-cocoa-300); font-size: 0.875rem; padding: 1.5rem 0; } .page-title { font-size: 1.25rem; font-weight: 700; color: var(--color-cream); } /* --------------------------------------------------------------------------- Tables ------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--color-cocoa-800); border-radius: 10px; } table.data { width: 100%; border-collapse: collapse; font-size: 0.875rem; } table.data th { text-align: left; padding: 0.6rem 0.9rem; background: var(--color-cocoa-900); color: var(--color-cocoa-300); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } table.data td { padding: 0.6rem 0.9rem; border-top: 1px solid var(--color-cocoa-800); vertical-align: top; } table.data tr.row-link:hover td { background: color-mix(in srgb, var(--color-cocoa-800) 55%, transparent); } /* "Today" row highlight in the job list. */ table.data tr.row-today td { background: color-mix(in srgb, var(--color-caramel) 10%, transparent); } table.data tr.row-today td:first-child { box-shadow: inset 3px 0 0 var(--color-caramel); } /* --------------------------------------------------------------------------- Forms ------------------------------------------------------------------------- */ .form { display: grid; gap: 1rem; max-width: 40rem; } .form-row { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .form-row-2 { grid-template-columns: 1fr 1fr; } } label.field { display: grid; gap: 0.3rem; font-size: 0.8125rem; font-weight: 500; color: var(--color-cocoa-200); } input[type="text"], input[type="date"], input[type="time"], input[type="password"], input[type="color"], select, textarea { width: 100%; border-radius: 6px; border: 1px solid var(--color-cocoa-700); background: var(--color-cocoa-900); color: var(--color-cream); padding: 0.5rem 0.65rem; font-size: 0.875rem; font-family: inherit; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-caramel); outline-offset: 0; border-color: transparent; } textarea { min-height: 6rem; resize: vertical; } input[type="color"] { padding: 0.15rem; height: 2.4rem; width: 5rem; } .form-error { border-radius: 8px; padding: 0.6rem 0.9rem; font-size: 0.875rem; color: var(--st-alert); background: var(--st-alert-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-alert) 35%, transparent); } /* --------------------------------------------------------------------------- Filter bar (calendar + list + updates): brand select, developer/status pills ------------------------------------------------------------------------- */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; } .filter-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-cocoa-300); } .filter-pill { display: inline-block; border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.75rem; font-weight: 500; color: var(--color-cocoa-200); box-shadow: inset 0 0 0 1px var(--color-cocoa-700); white-space: nowrap; } .filter-pill:hover { background: var(--color-cocoa-900); color: var(--color-cream); } .filter-pill.on { background: var(--color-caramel); color: var(--color-cocoa-950); font-weight: 600; box-shadow: none; } /* --------------------------------------------------------------------------- Calendar (Sweet Mail) ------------------------------------------------------------------------- */ .cal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; } .cal-title { font-size: 1.125rem; font-weight: 700; color: var(--color-cream); } .cal-nav { display: flex; gap: 0.35rem; } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--color-cocoa-800); border-radius: 10px; overflow: hidden; } .cal-dow { padding: 0.4rem 0.5rem; background: var(--color-cocoa-900); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-cocoa-300); text-align: center; } .cal-cell { min-height: 6.5rem; padding: 0.4rem; border-top: 1px solid var(--color-cocoa-800); border-left: 1px solid var(--color-cocoa-800); } .cal-cell:nth-child(7n + 1) { border-left: 0; } .cal-cell.other-month { background: color-mix(in srgb, var(--color-cocoa-900) 55%, transparent); } .cal-cell.today { background: color-mix(in srgb, var(--color-caramel) 10%, transparent); } .cal-daynum { font-size: 0.75rem; font-weight: 600; color: var(--color-cocoa-300); } .cal-cell.today .cal-daynum { color: var(--color-caramel); } /* One job on the calendar: a brand-tinted chip (background = brand.color, text = --cocoa-950 for contrast in both themes). */ .cal-chip { display: block; border-radius: 6px; padding: 0.25rem 0.4rem; margin-top: 0.3rem; font-size: 0.7rem; line-height: 1.3; color: var(--color-cocoa-950); } .cal-chip .t { font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-chip.cancelled { opacity: 0.55; } .cal-chip.cancelled .t { text-decoration: line-through; } /* Compact phone layout: month cells collapse to brand-prefix tags. The desktop chip list and the mobile tag list swap visibility at 640px. */ .cal-chips-desktop { display: block; } .cal-tags-mobile { display: none; } @media (max-width: 640px) { .cal-chips-desktop { display: none; } .cal-tags-mobile { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; } .cal-cell { min-height: 3.5rem; padding: 0.25rem; } .cal-cell-link { display: block; height: 100%; } } .cal-tag { border-radius: 3px; padding: 0 0.2rem; font-size: 9px; font-weight: 700; line-height: 1.4; color: var(--color-cocoa-950); } .cal-tag.cancelled { text-decoration: line-through; opacity: 0.5; } /* Week view: 7 columns desktop, stacked day sections on phones. */ .week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; } @media (max-width: 640px) { .week-grid { grid-template-columns: 1fr; } } .week-col { border: 1px solid var(--color-cocoa-800); border-radius: 10px; padding: 0.5rem; min-height: 8rem; } .week-col.today { border-color: var(--color-caramel); } .week-col h3 { font-size: 0.75rem; font-weight: 600; color: var(--color-cocoa-300); margin-bottom: 0.4rem; } .week-col.today h3 { color: var(--color-caramel); } /* Day view: time-ordered rows. */ .day-list { display: grid; gap: 0.6rem; } .day-row { display: flex; gap: 0.9rem; align-items: flex-start; border: 1px solid var(--color-cocoa-800); border-radius: 10px; padding: 0.75rem 1rem; } .day-row:hover { border-color: var(--color-cocoa-700); background: color-mix(in srgb, var(--color-cocoa-800) 40%, transparent); } .day-time { min-width: 5rem; font-size: 0.8125rem; font-weight: 600; color: var(--color-cocoa-200); font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- Reports: horizontal bars + mix bands (shared by both apps' report pages) ------------------------------------------------------------------------- */ .bar-row { display: grid; grid-template-columns: 11rem 1fr 3.5rem; gap: 0.75rem; align-items: center; font-size: 0.8125rem; padding: 0.3rem 0; } @media (max-width: 640px) { .bar-row { grid-template-columns: 7rem 1fr 3rem; } } .bar-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-cocoa-200); } .bar-track { height: 0.9rem; border-radius: 4px; background: var(--color-cocoa-900); overflow: hidden; position: relative; } .bar-fill { height: 100%; border-radius: 4px; background: var(--color-caramel); } .bar-fill.overlay { position: absolute; inset: 0 auto 0 0; background: var(--st-sent); opacity: 0.85; } .bar-count { text-align: right; color: var(--color-cocoa-300); font-variant-numeric: tabular-nums; } /* Single stacked band showing status/stage mix proportions. */ .mix-band { display: flex; height: 1.1rem; border-radius: 6px; overflow: hidden; } .mix-band > div { height: 100%; } .mix-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.6rem; font-size: 0.75rem; color: var(--color-cocoa-300); } .mix-legend .dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 999px; margin-right: 0.3rem; } /* --------------------------------------------------------------------------- Detail pages: definition grids, history timeline, inline panels ------------------------------------------------------------------------- */ .def-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem 1.5rem; } @media (min-width: 640px) { .def-grid { grid-template-columns: repeat(3, 1fr); } } .def-grid dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-cocoa-300); } .def-grid dd { margin-top: 0.15rem; font-size: 0.875rem; color: var(--color-cream); overflow-wrap: anywhere; } .timeline { display: grid; gap: 0; } .timeline-item { position: relative; padding: 0 0 1rem 1.4rem; border-left: 1px solid var(--color-cocoa-800); margin-left: 0.4rem; } .timeline-item::before { content: ""; position: absolute; left: -0.28rem; top: 0.3rem; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--color-cocoa-500); } .timeline-item:last-child { border-left-color: transparent; } .timeline-item .when { font-size: 0.7rem; color: var(--color-cocoa-400); } .timeline-item .what { font-size: 0.8125rem; color: var(--color-cocoa-100); } details.panel { border: 1px solid var(--color-cocoa-700); border-radius: 10px; } details.panel summary { cursor: pointer; padding: 0.6rem 0.9rem; font-size: 0.875rem; font-weight: 600; color: var(--color-cocoa-200); list-style: none; } details.panel summary::-webkit-details-marker { display: none; } details.panel[open] summary { border-bottom: 1px solid var(--color-cocoa-800); } details.panel .panel-body { padding: 0.9rem; } /* Two-step inline delete: the [Delete] button reveals confirm/cancel. */ .confirm-pair { display: inline-flex; gap: 0.4rem; } /* Utility bits used across pages. */ .flex-between { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .flex-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .stack { display: grid; gap: 1.5rem; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .tag-overdue { color: var(--st-alert); background: var(--st-alert-bg); border-radius: 4px; padding: 0.05rem 0.4rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; } .pre-wrap { white-space: pre-wrap; } /* Theme toggle button (assets/js/app.js swaps the icon text). */ .theme-toggle { border: 0; cursor: pointer; border-radius: 6px; padding: 0.4rem 0.6rem; background: transparent; color: var(--color-cocoa-300); font-size: 0.9rem; } .theme-toggle:hover { background: var(--color-cocoa-900); color: var(--color-cream); }