/* JuntoAI shared site stylesheet — one file, served immutable and content-hashed from R2 at assets/site..css, identical for every tenant. Per-tenant look comes only from the small :root token overrides each site inlines alongside this (see SiteLayout.razor) — never bake a tenant value into this file, or the shared cross-tenant cache is lost. See README "Theming, design system & layouts". Class names here are a versioned public contract — renaming one breaks every theme/layout variant that emits it. */ :root { --accent: #15803d; --background: #fafafa; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --radius: 12px; --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.09); /* Unitless density multiplier (1 = today's spacing). Only a few paddings scale with it — see body/.card-body/.spec/.post-link below — not a system-wide indent lever. */ --space-unit: 1; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* .site-preview-frame is the dashboard's embedded live preview's stand-in for the document body (SiteLayout renders it instead of in embedded mode — see SiteLayout.razor's Embedded param) — same rules, since visually it must look exactly like the real page. */ body, .site-preview-frame { font-family: var(--font); color: #1f2937; background: var(--background); line-height: 1.6; } /* The readable measure lives here rather than on so that full-bleed shell furniture — the nav header — can span the viewport while page content stays at a comfortable line length. Capping the body instead would cap everything inside it, including the nav's own mx-auto max-w-7xl container, which could then never reach its width. */ .site-content { max-width: 960px; margin: 0 auto; padding: calc(48px * var(--space-unit)) calc(20px * var(--space-unit)); } header { border-bottom: 1px solid #e5e7eb; padding-bottom: 24px; margin-bottom: 32px; } /* ---- Navigation (LayoutSection.Navigation) -------------------------------- Taken verbatim from Static Components/navigation/nav-*.css. Both reference files are identical except for how the dropdown panel is centered, so the shared rules live once here and the centered variant's two overrides are scoped under .site-nav-centered at the end of this block. These rules are the supplemental half of the nav's styling: interactions Tailwind utility classes don't express cleanly (hamburger -> X, dropdown open state, drawer slide-in, accordion collapse). The utility classes themselves come from the Tailwind CDN, linked in SiteLayout. */ /* The nav is a

, but so is the page's own title block, and the element rule above is written for that one. Neutralise its spacing here so the nav keeps the reference's own padding. */ .site-nav { padding-bottom: 0; margin-bottom: 0; } /* Tailwind ships .sr-only, but the dashboard's preview renders inside a shadow root the Tailwind CDN can't reach — and NavBrand uses it to name the home link when the site has no logo. Left to Tailwind alone, that name would show up as stray visible text in the preview and nowhere else. Duplicated here (identical to Tailwind's own) so it holds in both places. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Hamburger icon */ .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; border-radius: 0.375rem; background: transparent; border: none; cursor: pointer; } .hamburger:hover { background-color: #f3f4f6; } .hamburger span { display: block; height: 2px; width: 100%; background-color: #111827; border-radius: 9999px; transition: transform 0.2s ease, opacity 0.2s ease; } .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Desktop dropdown */ .dropdown-chevron { transition: transform 0.15s ease; } .dropdown-trigger[aria-expanded="true"] .dropdown-chevron { transform: rotate(180deg); } .dropdown-panel { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; } .dropdown-trigger[aria-expanded="true"] + .dropdown-panel { opacity: 1; visibility: visible; transform: translateY(0); } /* Mobile drawer + overlay */ .drawer-overlay { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; } .drawer-overlay.is-open { opacity: 1; visibility: visible; } .drawer { transform: translateX(100%); visibility: hidden; transition: transform 0.25s ease, visibility 0s linear 0.25s; } .drawer.is-open { transform: translateX(0); visibility: visible; transition: transform 0.25s ease, visibility 0s linear 0s; } /* Mobile accordion */ .accordion-chevron { transition: transform 0.2s ease; } .accordion-trigger[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); } .accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.2s ease; } .accordion-panel > div { overflow: hidden; } .accordion-trigger[aria-expanded="true"] + .accordion-panel { grid-template-rows: 1fr; } /* The centered variant's panel is positioned with left-1/2, so its transform has to carry the -50% back. This is the only rule the two reference files disagree on. */ .site-nav-centered .dropdown-panel { transform: translate(-50%, -6px); } .site-nav-centered .dropdown-trigger[aria-expanded="true"] + .dropdown-panel { transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { .hamburger span, .dropdown-chevron, .dropdown-panel, .drawer-overlay, .drawer, .accordion-chevron, .accordion-panel { transition: none !important; } } /* Index grid of cards */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .card-link { text-decoration: none; color: inherit; display: block; } .card { border: 1px solid #e5e7eb; border-radius: var(--radius); overflow: hidden; background: #fff; transition: box-shadow 0.15s, transform 0.15s; } .card-link:hover .card { box-shadow: var(--card-shadow); transform: translateY(-2px); } .card .cover { width: 100%; height: 190px; object-fit: cover; display: block; } .cover.placeholder { background: linear-gradient(135deg, #e5e7eb, #f3f4f6); } .card-body { padding: calc(14px * var(--space-unit)) calc(16px * var(--space-unit)) calc(18px * var(--space-unit)); } /* Index list of rows — the "list" layout variant for the listings section */ .listing-list { display: flex; flex-direction: column; gap: 10px; } .listing-row-link { text-decoration: none; color: inherit; display: block; } .listing-row { display: flex; align-items: center; gap: 16px; border: 1px solid #e5e7eb; border-radius: var(--radius); background: #fff; padding: calc(10px * var(--space-unit)) calc(14px * var(--space-unit)); transition: box-shadow 0.15s; } .listing-row-link:hover .listing-row { box-shadow: var(--card-shadow); } .listing-row-thumb { width: 96px; height: 72px; object-fit: cover; border-radius: calc(var(--radius) / 2); flex-shrink: 0; display: block; } .listing-row-thumb.placeholder { background: linear-gradient(135deg, #e5e7eb, #f3f4f6); } .listing-row-body { flex: 1; min-width: 0; } .price-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .price { font-size: 1.3rem; font-weight: 700; color: var(--accent); } .status { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; background: #dcfce7; color: var(--accent); } .status.pending { background: #fef9c3; color: #a16207; } .status.closed { background: #f3f4f6; color: #6b7280; } .address { font-weight: 600; margin-top: 2px; } .details { color: #6b7280; font-size: 0.9rem; margin-top: 4px; } .disclaimer { color: #9ca3af; font-size: 0.8rem; margin-top: 16px; font-style: italic; } .attribution { color: #9ca3af; font-size: 0.82rem; margin-top: 12px; } .empty { color: #9ca3af; } /* Detail page */ .back { display: inline-block; color: #4f46e5; text-decoration: none; font-size: 0.9rem; margin-bottom: 18px; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 24px; } .gallery img { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; display: block; } .gallery img:first-child { grid-column: 1 / -1; height: 420px; } .empty-gallery { height: 260px; border-radius: var(--radius); background: linear-gradient(135deg, #e5e7eb, #f3f4f6); } .detail-price { margin-top: 4px; } .detail-price .price { font-size: 1.7rem; } .detail-address { font-size: 1.5rem; margin: 6px 0 20px; } .spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1px; background: #e5e7eb; border: 1px solid #e5e7eb; border-radius: var(--radius); overflow: hidden; } .spec { background: #fff; padding: calc(12px * var(--space-unit)) calc(16px * var(--space-unit)); } .spec dt { color: #9ca3af; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; } .spec dd { font-weight: 600; margin-top: 2px; } .description { margin-top: 28px; } .description p { color: #374151; } /* Blog */ .blog-link { margin-top: 12px; } .blog-link a { color: #4f46e5; text-decoration: none; font-weight: 500; } .blog-search { margin-bottom: 24px; } .blog-search input { width: 100%; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.95rem; } .post-list { list-style: none; display: flex; flex-direction: column; gap: 2px; } .post-link { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; text-decoration: none; color: inherit; padding: calc(14px * var(--space-unit)) calc(12px * var(--space-unit)); border-radius: 10px; border: 1px solid transparent; transition: background 0.12s, border-color 0.12s; } .post-link:hover { background: #fff; border-color: #e5e7eb; } .post-title { font-weight: 600; font-size: 1.1rem; } .post-date { color: #9ca3af; font-size: 0.85rem; } .post-body { margin-top: 8px; } .post-body p { color: #374151; margin-bottom: 16px; } .blog-no-results { margin-top: 12px; } /* Menu (restaurant industry) — the counterpart to the listing card/row styles above. Deliberately token-driven (--accent, --radius, --space-unit) rather than carrying its own palette, so a menu inherits whatever theme the site is on exactly as listings do. */ .menu-note { color: #6b7280; font-size: 0.9rem; margin-bottom: 18px; } .menu-section { font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: calc(26px * var(--space-unit)) 0 calc(10px * var(--space-unit)); } .menu-list { list-style: none; display: flex; flex-direction: column; gap: calc(14px * var(--space-unit)); } .menu-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .menu-item-name { font-weight: 600; } /* Dotted leader between dish and price — the one piece of visual language a menu has that a listing list does not, and cheap enough to do with a border rather than a pseudo-element hack. */ .menu-item-head::before { content: ""; order: 1; flex: 1; margin-bottom: 4px; border-bottom: 1px dotted #d1d5db; } .menu-item-name { order: 0; } .menu-item-price { order: 2; color: var(--accent); font-weight: 700; white-space: nowrap; } .menu-item-desc { color: #6b7280; font-size: 0.9rem; margin-top: 4px; max-width: 60ch; } .menu-compact .menu-item { display: flex; justify-content: space-between; gap: 16px; } /* Search widget */ .idx-search { margin-top: 44px; border-top: 1px solid #e5e7eb; padding-top: 24px; } #idx-search-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } #idx-search-form input { padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.9rem; } #idx-search-form input[type="search"] { flex: 1; min-width: 180px; } #idx-search-form button { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 8px 18px; cursor: pointer; } #idx-search-status { color: #6b7280; font-size: 0.85rem; margin-bottom: 8px; } #idx-search-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } footer { margin-top: 48px; text-align: center; } .badge { font-size: 0.72rem; color: #9ca3af; letter-spacing: 0.05em; text-transform: uppercase; }