/* DADCARE Mother App visual system. This stylesheet is scoped strictly to Mother App surfaces (Home, Apps, Inbox, Me, Post, the public listing page, and the authentication pages that share the shell chrome). Every rule is guarded by `body.shell`; My Business at /app/ deliberately renders on a plain and therefore inherits nothing from this file. That separation is the Owner boundary — the operational surfaces of My Business must keep their own visual ground in this checkpoint. Tokens are re-declared here rather than overwritten in dadcare.css so global brand identity remains untouched. What Mother App gets is a scoped overlay: the same variable names, resolved to the DADCARE blue-and-cream family on these surfaces only. */ body.shell { /* DADCARE brand blue, warm-cream page ground. */ --brand: #0F5FA6; --brand-dark: #0A3F72; --brand-soft: #DCEBF7; --on-brand: #ffffff; --bg: #FBF5EA; --surface: #ffffff; --surface-2: #F4EDDD; --border: #E8DFCA; --text: #0B2545; --muted: #5E6B7E; /* Sale-type accents. Colour never carries meaning alone — every badge is also labelled — but keeping the two families distinct makes a grid readable at a glance. Cool blue for retail, warm amber for wholesale. */ --retail: #0F5FA6; --retail-soft: #DCEBF7; --retail-ink: #0A3F72; --wholesale: #B47207; --wholesale-soft: #F7E9CE; --wholesale-ink: #7A4E04; /* WhatsApp is a partner brand. The green is used exclusively for the WhatsApp action; nothing else in the shell is allowed to look like it. */ --whatsapp: #25D366; --whatsapp-dark: #128C7E; --whatsapp-ink: #ffffff; /* Media overlay ink — the token used by the video pill and any element that sits on a picture and needs to keep contrast against unknown pixels. A photograph is not themed; this stays constant in both themes on purpose. */ --on-media: #ffffff; --media-scrim: rgba(11, 37, 69, .78); /* Positive status pill (the ACTIVE mini-app badge). A slightly warmer green than --ok so it sits on the warm cream without vibrating. */ --status-ok-bg: #E4F4E1; --status-ok-ink: #226C2E; /* Card and header shadow ink. One place to change the depth of every Mother App surface — used through box-shadow with rgba(var(--…)). */ --shell-shadow: 11, 37, 69; } /* Dark mode carries the DADCARE blue at a lifted lightness. The warm-cream surface belongs to the light theme by design; in dark the ground stays the existing shell dark so contrast survives and photographs read honestly. */ html[data-theme="dark"] body.shell { --brand: #7EB7EA; --brand-dark: #A6CFF0; --brand-soft: #163049; --on-brand: #0A1626; --retail: #7EB7EA; --retail-soft: #163049; --retail-ink: #C3DEF3; --wholesale: #E7B15A; --wholesale-soft: #2E230F; --wholesale-ink: #F5D69A; --status-ok-bg: #163A1D; --status-ok-ink: #7DD98A; } /* ── END TOKENS ── everything below is scoped structural CSS that uses the variables declared above. No literal colour after this line. */ /* ── Page ground ────────────────────────────────────────────────────────── The shell paints its own body colour so the warm cream reaches the safe areas on mobile without a second declaration per page. */ body.shell { background: var(--bg); color: var(--text); } /* ── Header brand mark ──────────────────────────────────────────────────── The brand text stays as it was — the mark is a small circular blue "D" placed before it, so the wordmark keeps the same address on the page and a reader who has never seen a logo before still reads "DADCARE". */ body.shell .mk-top { background: var(--surface); border-bottom: 1px solid var(--border); } body.shell .mk-brand { display: inline-flex; align-items: center; gap: 10px; } body.shell .mk-brand .mk-mono { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 12px; background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: 16px; letter-spacing: .02em; } body.shell .mk-brand .mk-word { font-weight: 800; letter-spacing: .04em; color: var(--text); font-size: 18px; } /* ── Search field ───────────────────────────────────────────────────────── A little taller, so the field itself is the visual anchor of the page. */ body.shell .mksearch input { min-height: 52px; padding: 12px 16px 12px 44px; font-size: 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(11, 37, 69, .04); } body.shell .mksearch .ic { left: 14px; width: 22px; height: 22px; } body.shell .mksearch input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } /* ── Category chips ─────────────────────────────────────────────────────── Larger touch target and a rounder pill so a chip reads as a control, not a badge. The default chip sits on the page ground; the selected chip fills with DADCARE blue. */ body.shell .chiprow .chip { padding: 9px 18px; min-height: 40px; font-size: 14px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 999px; } body.shell .chiprow .chip.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } /* ── 320px grid contract ───────────────────────────────────────────────── Owner-approved Layout A is a two-column product grid at every mobile width, 320px included. The historical rule in shell.css collapsed the grid to one column below 360px on the assumption that a half-width card would stop being readable; the approved DADCARE cards read cleanly at that size, so the collapse is overridden here — scoped to Mother App surfaces so nothing else in the shell needs to change. The gutters and gap shrink slightly on the very narrow widths so the two cards still sit inside the viewport without horizontal overflow, and the card body loses two pixels of horizontal padding so the price, title and WhatsApp CTA keep their readable widths. */ @media (max-width: 359px) { body.shell .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body.shell main.wrap { padding-left: 12px; padding-right: 12px; } /* The chip row deliberately bleeds to the page edge via a negative margin in shell.css. On the very narrow widths the page gutter shrinks to 12px, so the bleed has to shrink with it — otherwise the strip overshoots the viewport by the 4px difference and the document scrolls sideways. */ body.shell .chiprow { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; } body.shell .pcard-body { padding: 8px 10px 10px; } body.shell .pcard-name { font-size: 13px; } body.shell .pcard-price { font-size: 15px; } body.shell .pcard-wa { margin: 8px 10px 10px; min-height: 36px; font-size: 12px; padding: 6px 8px; } body.shell .pcard-wa .ic { width: 14px; height: 14px; } body.shell .pcard-kind { font-size: 10px; padding: 3px 8px; } } /* ── Product card polish ────────────────────────────────────────────────── The card stays as it was in structure — media, then words, then one action. What changes: a slightly larger radius so the shadow looks intentional, a soft shadow instead of a hard border on hover, and sale-type badge variants that separate retail from wholesale without either becoming decorative. */ body.shell .pcard { border-radius: 20px; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(11, 37, 69, .04); background: var(--surface); } @media (hover: hover) { body.shell .pcard:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(11, 37, 69, .08); } } body.shell .pcard-media { background: var(--surface-2); } /* Sale-type variants. The base .pcard-kind rule from shell.css remains — this only re-paints it and adds two modifiers, so an unknown sale type falls back to the neutral chip rather than looking like one of the two. */ body.shell .pcard-kind { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; padding: 4px 10px; box-shadow: 0 1px 2px rgba(11, 37, 69, .06); } body.shell .pcard-kind.retail { background: var(--retail-soft); border-color: var(--retail-soft); color: var(--retail-ink); } body.shell .pcard-kind.wholesale { background: var(--wholesale-soft); border-color: var(--wholesale-soft); color: var(--wholesale-ink); } body.shell .pcard-video { background: var(--media-scrim); border-color: transparent; color: var(--on-media); } body.shell .pcard-video .ic { color: var(--on-media); } /* The price. The deeper brand-ink blue is the loudest thing in the card. */ body.shell .pcard-price { font-size: 17px; font-weight: 800; color: var(--brand-dark); } body.shell .pcard-price .cur { color: var(--brand-dark); opacity: .82; margin-right: 4px; font-size: 12px; font-weight: 700; } /* Location line with a small pin. The pin is rendered by the template inside .pcard-where; here it just gets sized and coloured. */ body.shell .pcard-where { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; } body.shell .pcard-where .ic { width: 14px; height: 14px; flex: none; color: var(--muted); } body.shell .pcard-pin { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex: none; } body.shell .pcard-pin .ic { width: 14px; height: 14px; } /* WhatsApp call-to-action. Filled green, white type, WhatsApp glyph. Only this button is allowed to look this way; nothing else in the shell borrows the partner colour. */ body.shell .pcard-wa { background: var(--whatsapp); border-color: var(--whatsapp); color: var(--whatsapp-ink); font-weight: 700; border-radius: 999px; min-height: 42px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } body.shell .pcard-wa:active { background: var(--whatsapp-dark); border-color: var(--whatsapp-dark); } body.shell .pcard-wa .ic { width: 18px; height: 18px; color: var(--whatsapp-ink); } @media (hover: hover) { body.shell .pcard-wa:hover { background: var(--whatsapp-dark); border-color: var(--whatsapp-dark); } } /* ── Section heading ────────────────────────────────────────────────────── */ body.shell .mksection { font-size: 20px; font-weight: 800; color: var(--text); margin: 14px 0 12px; letter-spacing: -.005em; } body.shell .mksection .count { color: var(--muted); font-weight: 600; font-size: 14px; } /* ── Bottom navigation ──────────────────────────────────────────────────── The raised central "+" grows a little and gets a white ring so it sits above the tab strip rather than in it. Nothing about the destinations changes; the strip is still Home | Apps | + | Inbox | Me. */ body.shell .globalnav { background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -1px 0 rgba(11, 37, 69, .04); } body.shell .globalnav a.active { color: var(--brand); background: transparent; } body.shell .globalnav a.active .ic { color: var(--brand); } body.shell .globalnav a.post { position: relative; } body.shell .globalnav a.post .postmark { width: 52px; height: 52px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 30px; font-weight: 400; line-height: 1; box-shadow: 0 0 0 4px var(--surface), 0 6px 14px rgba(11, 37, 69, .18); margin-top: -22px; } /* ── Card containers used across Apps, Inbox, Me ───────────────────────── */ body.shell .card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 18px; box-shadow: 0 1px 2px rgba(11, 37, 69, .04); } /* Rows in Me / Inbox use the same card treatment for a consistent surface. */ body.shell .row { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; min-height: 60px; } /* Apps and Me list-row leading glyph, kept from shell.css but re-toned to read on the warm cream. */ body.shell .app-ico { background: var(--brand-soft); color: var(--brand); } body.shell .app-ico .ic { color: var(--brand); } body.shell .a-business { background: var(--brand-soft); color: var(--brand); } /* ── Section titles on Apps, Inbox, Me ─────────────────────────────────── */ body.shell .section { font-size: 28px; font-weight: 800; color: var(--text); text-transform: none; letter-spacing: -.01em; margin: 8px 0 4px; } body.shell .section + .hint, body.shell h2.section + p.hint { color: var(--muted); font-size: 15px; margin-bottom: 14px; } /* ── The "tile" cards used by Apps' active workspace and Me's rows ─────── */ body.shell .tile { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: 0 1px 2px rgba(11, 37, 69, .04); min-height: 76px; text-decoration: none; } body.shell .tile .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; } body.shell .tile .name { font-size: 16px; font-weight: 700; color: var(--text); } body.shell .tile .meta { font-size: 13px; color: var(--muted); } body.shell .tile .app-ico { width: 48px; height: 48px; border-radius: 14px; margin: 0; background: var(--brand-soft); color: var(--brand); } body.shell .tile .app-ico .ic { color: var(--brand); } body.shell .tile .status { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } body.shell .tile .status.ok { background: var(--status-ok-bg); color: var(--status-ok-ink); } body.shell .tile .status.locked { background: var(--surface-2); color: var(--muted); } /* Locked / coming-soon rows: dashed border and a lock glyph. These are only used by the honest signed-out / no-registered-mini-app states. */ body.shell .tile.locked { background: transparent; border-style: dashed; border-color: var(--border); box-shadow: none; } body.shell .tile.locked .app-ico { background: var(--surface-2); color: var(--muted); } /* ── Me profile card ───────────────────────────────────────────────────── The identity block on Me: initials avatar, then the account name, then the email/handle underneath. No fabricated city or currency. */ body.shell .profile-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 1px 2px rgba(11, 37, 69, .04); } body.shell .profile-avatar { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 18px; background: var(--brand); color: var(--on-brand); font-size: 22px; font-weight: 800; letter-spacing: .04em; flex: none; } body.shell .profile-name { font-size: 20px; font-weight: 800; color: var(--text); margin: 0; } body.shell .profile-sub { color: var(--muted); font-size: 14px; margin: 2px 0 0; } /* ── Me menu card: a group of related rows with divider lines. ─────────── */ body.shell .me-menu { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(11, 37, 69, .04); } body.shell .me-menu > a, body.shell .me-menu > .row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; min-height: 60px; border: 0; border-radius: 0; background: transparent; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); } body.shell .me-menu > a:last-child, body.shell .me-menu > .row:last-child { border-bottom: 0; } body.shell .me-menu .app-ico { width: 40px; height: 40px; border-radius: 12px; margin: 0; background: var(--brand-soft); color: var(--brand); } body.shell .me-menu .app-ico .ic { color: var(--brand); } body.shell .me-menu .name { font-size: 16px; font-weight: 700; } body.shell .me-menu .meta { font-size: 13px; color: var(--muted); margin-top: 2px; } body.shell .me-menu .caret { color: var(--muted); flex: none; } body.shell .me-menu .caret .ic { width: 18px; height: 18px; } /* ── Inbox row visual ──────────────────────────────────────────────────── A leading glyph, a title in bold, a preview line in muted colour, and the time on the right. Renders whatever the notifications API actually returns; no invented content. */ body.shell .inbox-list { display: flex; flex-direction: column; gap: 10px; } body.shell .inbox-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(11, 37, 69, .04); } body.shell .inbox-item .app-ico { width: 42px; height: 42px; border-radius: 12px; flex: none; margin: 0; background: var(--brand-soft); color: var(--brand); } body.shell .inbox-item .app-ico .ic { color: var(--brand); } body.shell .inbox-item .grow { flex: 1; min-width: 0; } body.shell .inbox-item .name { font-weight: 700; font-size: 15px; color: var(--text); } body.shell .inbox-item .meta { color: var(--muted); font-size: 14px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.shell .inbox-item .time { color: var(--muted); font-size: 12px; flex: none; } /* An honest "we cannot show your notifications right now" state. Not styled as an error — this is the ordinary case for a signed-in visitor who has no active business context yet, and lecturing them helps nobody. */ body.shell .inbox-unavailable { padding: 20px; border-radius: 18px; background: var(--surface); border: 1px dashed var(--border); color: var(--muted); font-size: 14px; line-height: 1.5; } /* ── Authentication surfaces ───────────────────────────────────────────── The login and register pages already live under body.shell via auth_base and pick up the palette automatically. What is added here is a stronger card treatment matching the approved DADCARE design language, and the circular padlock header used on the "Sign in to post" surface. */ body.shell .auth-wrap { max-width: 460px; margin: 0 auto; padding: 32px 18px 40px; } body.shell .auth-brand { display: inline-flex; align-items: center; gap: 10px; justify-content: center; width: 100%; color: var(--text); font-weight: 800; font-size: 20px; margin-bottom: 22px; } body.shell .auth-brand::before { content: "D"; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 12px; background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: 16px; } body.shell .auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 26px 22px; box-shadow: 0 6px 24px rgba(11, 37, 69, .06); } body.shell .auth-card h1 { font-size: 22px; font-weight: 800; margin: 0 0 4px; text-align: center; } body.shell .auth-card .auth-lede { color: var(--muted); text-align: center; font-size: 14px; line-height: 1.5; margin: 0 0 18px; } body.shell .auth-lock { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); margin: 4px auto 12px; } body.shell .auth-lock .ic { width: 30px; height: 30px; color: var(--brand); } body.shell .auth-card .btn { border-radius: 999px; min-height: 52px; font-size: 15px; } body.shell .auth-alt { text-align: center; color: var(--muted); font-size: 14px; margin-top: 18px; } body.shell .auth-alt a { color: var(--brand-dark); font-weight: 600; } /* Divider between primary submit and secondary options on the auth card. */ body.shell .auth-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin: 14px 0; } body.shell .auth-divider::before, body.shell .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ── Public listing page: single ad view ───────────────────────────────── The SSR /p// page also lives on body.shell. Aligning the price and the WhatsApp CTA with the grid card keeps a buyer who arrived from a card inside the same visual system. */ body.shell .listing { max-width: 640px; margin: 0 auto; padding-top: 6px; } body.shell .listingmedia { border-radius: 24px; border: 1px solid var(--border); background: var(--surface-2); } body.shell .postprice { color: var(--brand-dark); font-size: 26px; font-weight: 800; } body.shell .postprice .cur { color: var(--brand-dark); opacity: .82; } body.shell .tag { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--retail-soft); color: var(--retail-ink); } body.shell .tag.wholesale { background: var(--wholesale-soft); color: var(--wholesale-ink); } body.shell .listing .card { border-radius: 20px; } body.shell .listing .btn.wa { background: var(--whatsapp); border-color: var(--whatsapp); color: var(--whatsapp-ink); border-radius: 999px; min-height: 48px; font-weight: 700; } body.shell .listing .btn.wa:active { background: var(--whatsapp-dark); border-color: var(--whatsapp-dark); } /* ── Load-more and pagination affordances polished for the new page ground. */ body.shell #more.btn.secondary { background: var(--surface); color: var(--brand-dark); border-color: var(--border); border-radius: 999px; } /* ── Responsive fine-tuning ────────────────────────────────────────────── The grid already collapses to one column below 360px in shell.css; here the header just gets a little breathing room on very narrow phones. */ @media (max-width: 359px) { body.shell .mk-brand .mk-word { font-size: 16px; } body.shell .mk-brand .mk-mono { width: 30px; height: 30px; font-size: 14px; } } /* Desktop: one column of stacked full-width phones is not a desktop layout. The .pgrid rule in shell.css already widens to 3–4 columns; the header just needs the same maximum reading width. */ @media (min-width: 900px) { body.shell .mk-top { padding-left: 226px; } body.shell main.wrap { max-width: 1160px; } }