/* =========================================================== Author Box Hill, Parking Register Aesthetic: Animal-Crossing-inspired soft / sticker UI - Parchment cream background, warm brown ink - Leaf-green primary, peach for emphasis, sky blue, mustard - Chunky pill buttons with a 3-4px solid drop shadow - Rounded sticker borders, friendly rounded sans - Pillow speech bubbles with floating name-tag pills =========================================================== */ html, body { background: #fbf3dc; color: #5b4636; } body { font-family: "M PLUS Rounded 1c", "Nunito", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; background-image: radial-gradient(rgba(155, 130, 95, 0.06) 1.5px, transparent 1.5px); background-size: 22px 22px; } .font-display { font-family: "M PLUS Rounded 1c", "Nunito", "PingFang SC", sans-serif; font-weight: 700; letter-spacing: 0.01em; } /* Brand mark, soft leaf-green badge with a sticker outline */ .brand-mark-bg { background: linear-gradient(160deg, #bedf6e 0%, #9bc940 100%); box-shadow: inset 0 -3px 0 rgba(88, 141, 44, 0.35), 0 3px 0 rgba(91, 70, 54, 0.10); border: 2px solid #5b4636; } /* ---------------------------------------------------------- AC pillow speech bubble — the recurring shape in the kit. Soft cream, thick brown sticker outline, springy drop shadow. ---------------------------------------------------------- */ .ac-bubble { position: relative; background: #fffceb; border: 2.5px solid #5b4636; border-radius: 36px; box-shadow: inset 0 -6px 0 rgba(91, 70, 54, 0.06), 0 6px 0 rgba(91, 70, 54, 0.14), 0 14px 28px rgba(91, 70, 54, 0.12); } .ac-bubble--soft { background: #fff8d6; } .ac-bubble--cream { background: #fdf3da; } .ac-bubble--white { background: #fffdf2; } /* Floating name-tag pill that overlaps the top-left of a bubble. Use as: Bay A at the top of an .ac-bubble. */ .ac-name-tag { position: absolute; top: -14px; left: 18px; display: inline-flex; align-items: center; padding: 4px 14px; background: #ffa783; color: #5b3022; border: 2.5px solid #5b4636; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.4; letter-spacing: 0.02em; box-shadow: 0 3px 0 rgba(91, 70, 54, 0.16); white-space: nowrap; } .ac-name-tag--leaf { background: #bedf6e; color: #2f3d18; } .ac-name-tag--sky { background: #aeddf2; color: #1f4f6a; } .ac-name-tag--sun { background: #ffe39a; color: #6a4912; } .ac-name-tag--rose { background: #ffb6d9; color: #6a1f47; } .ac-name-tag--mute { background: #efe4cc; color: #6b5840; } /* Inline (non-floating) name tag, e.g. "Tom Nook" tag inside a row */ .ac-tag { display: inline-flex; align-items: center; padding: 2px 12px; background: #ffa783; color: #5b3022; border: 2px solid #5b4636; border-radius: 999px; font-weight: 700; font-size: 12px; letter-spacing: 0.02em; } /* Dotted-line detail row: label · · · · · value (Animal Crossing recipe rows) */ .ac-dot-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 14px; } .ac-dot-row > .label { color: #8a7a64; font-weight: 600; white-space: nowrap; } .ac-dot-row > .value { color: #5b4636; font-weight: 600; white-space: nowrap; text-align: right; } .ac-dot-row > .dots { flex: 1; height: 1px; border-bottom: 2.5px dotted rgba(91, 70, 54, 0.35); position: relative; top: 4px; min-width: 18px; } /* Active row: keep the rest of the look but bump value tone */ .ac-dot-row.is-over > .value { color: #c0492c; } .ac-dot-row.is-warn > .value { color: #b07a18; } .ac-dot-row.is-ok > .value { color: #437a1a; } /* Leaf-pattern card surface — used behind grid cards in the Recipe Menu */ .ac-leaf-card { background-color: #fffceb; background-image: radial-gradient(ellipse 12px 6px at 12px 18px, rgba(155, 201, 64, 0.18), transparent 70%), radial-gradient(ellipse 8px 5px at 38px 42px, rgba(255, 203, 71, 0.20), transparent 70%), radial-gradient(ellipse 10px 6px at 64px 12px, rgba(155, 201, 64, 0.14), transparent 70%), radial-gradient(ellipse 7px 4px at 30px 70px, rgba(255, 138, 101, 0.14), transparent 70%); background-size: 80px 80px; border: 2.5px solid #5b4636; border-radius: 22px; box-shadow: inset 0 -5px 0 rgba(91, 70, 54, 0.05), 0 4px 0 rgba(91, 70, 54, 0.10), 0 10px 22px rgba(91, 70, 54, 0.10); } /* Generic chunky card — same shadow language as the bubble but rectangular-ish */ .ac-card { background: #ffffff; border: 2.5px solid #5b4636; border-radius: 22px; box-shadow: inset 0 -4px 0 rgba(91, 70, 54, 0.05), 0 4px 0 rgba(91, 70, 54, 0.10), 0 10px 22px rgba(91, 70, 54, 0.10); } /* Bay banner, leaf-green free / peach occupied — sticker style */ .bay-banner-bg { position: relative; background: linear-gradient(160deg, #bedf6e 0%, #9bc940 60%, #7eb52f 100%); border: 2.5px solid #5b4636; border-radius: 28px; box-shadow: inset 0 -6px 0 rgba(88, 141, 44, 0.30), 0 5px 0 rgba(91, 70, 54, 0.14), 0 14px 28px rgba(91, 70, 54, 0.14); color: #2f3d18; } .bay-banner-bg.occupied { background: linear-gradient(160deg, #ffa783 0%, #ff8a65 60%, #ef6c4d 100%); color: #5b3022; box-shadow: inset 0 -6px 0 rgba(180, 70, 50, 0.28), 0 5px 0 rgba(91, 70, 54, 0.14), 0 14px 28px rgba(91, 70, 54, 0.14); } /* Status dots with thick chunky look */ .status-dot::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: #9bc940; border: 1.5px solid #5b4636; box-shadow: 0 1.5px 0 rgba(91, 70, 54, 0.18); } .status-dot.full::before { background: #ff8a65; } .status-dot.warn::before { background: #ffcb47; } .status-dot.done::before { background: #c9b89a; } .qr-img { background: #fffceb; padding: 8px; border: 2.5px solid #5b4636; border-radius: 14px; box-shadow: 0 3px 0 rgba(91, 70, 54, 0.12); } .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; } @keyframes spin { to { transform: rotate(360deg); } } /* Modal overlay, parchment dim with a warm tint */ .modal-bg { position: fixed; inset: 0; background: rgba(91, 70, 54, 0.45); backdrop-filter: saturate(140%) blur(4px); -webkit-backdrop-filter: saturate(140%) blur(4px); display: none; align-items: center; justify-content: center; z-index: 100; padding: 16px; } .modal-bg.is-open { display: flex; } .modal-bg > div { border: 2.5px solid #5b4636 !important; border-radius: 32px !important; background: #fffceb !important; box-shadow: inset 0 -6px 0 rgba(91, 70, 54, 0.06), 0 7px 0 rgba(91, 70, 54, 0.14), 0 18px 38px rgba(91, 70, 54, 0.20) !important; } /* Toast, speech-bubble pill */ .toast { position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 24px); background: #fffceb; color: #5b4636; padding: 14px 22px; border: 2.5px solid #5b4636; border-radius: 999px; font-size: 14px; font-weight: 700; opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: 200; max-width: 90vw; text-align: center; box-shadow: 0 5px 0 rgba(91, 70, 54, 0.16), 0 14px 30px rgba(91, 70, 54, 0.18); } .toast.is-show { opacity: 1; transform: translate(-50%, 0); } /* Admin shell */ .app-grid { display: grid; grid-template-columns: 1fr; gap: 28px; } @media (min-width: 1024px) { .app-grid.with-sidebar { grid-template-columns: 230px 1fr; } } /* Sidebar nav, sticker buttons with AC yellow highlight + pointer for active */ .nav-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 26px; border-radius: 14px; color: #5b4636; font-weight: 700; text-decoration: none; transition: background 0.15s, transform 0.1s; cursor: pointer; } .nav-link:hover { background: rgba(255, 235, 138, 0.55); } .nav-link:active { transform: translateY(1px); } .nav-link.is-active { background: linear-gradient(180deg, #fff186 0%, #ffe04c 100%); color: #5b4636; box-shadow: inset 0 -3px 0 rgba(186, 140, 30, 0.30), 0 3px 0 rgba(91, 70, 54, 0.12); } /* Pointing-finger indicator on the active nav item */ .nav-link.is-active::before { content: ""; position: absolute; left: 6px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-size: contain; } .nav-link.is-active .nav-chip { background: #fffceb !important; box-shadow: inset 0 0 0 1.5px #5b4636; } .nav-link.is-active .nav-badge { background: #ff8a65; color: #fffceb; } /* Tiny coloured chip behind each nav icon */ .nav-chip { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 0 0 1.5px #5b4636; } .nav-chip-leaf { background: #bedf6e; color: #588d2c; } .nav-chip-coral { background: #ffa783; color: #ef6c4d; } .nav-chip-sky { background: #aeddf2; color: #4ea9d8; } .nav-chip-sun { background: #ffe39a; color: #e8a82a; } .nav-chip-rose { background: #ffb6d9; color: #e98abf; } .nav-badge { margin-left: auto; background: #ff8a65; color: #fffceb; font-size: 11px; padding: 2px 9px; border-radius: 999px; font-weight: 700; border: 1.5px solid #5b4636; } @media (max-width: 1023px) { .admin-sidebar { display: none; position: fixed; top: 64px; left: 16px; right: 16px; max-height: calc(100vh - 80px); overflow-y: auto; z-index: 40; } body.menu-open .admin-sidebar { display: block; } } @media (min-width: 1024px) { .menu-toggle { display: none; } } /* Section switching */ [data-section] { display: none; } [data-section].is-active { display: block; } /* Cards, sticker style with soft 3D */ .shadow-card { box-shadow: inset 0 -4px 0 rgba(91, 70, 54, 0.04), 0 4px 0 rgba(91, 70, 54, 0.08), 0 8px 22px rgba(91, 70, 54, 0.10); } /* Inputs, soft focus glow in leaf-green */ input, select, textarea { font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: #588d2c !important; box-shadow: 0 0 0 4px rgba(155, 201, 64, 0.30) !important; } /* Generic button feel-good lift */ button { transition: transform 0.08s ease, box-shadow 0.12s ease; } button:active { transform: translateY(1px); } /* AC chunky button: coloured fill, brown sticker outline, 3px solid drop-shadow. Apply on top of existing colour utilities, e.g.