/* ========================================================================== main.css — cascade orchestration ========================================================================== This is the single CSS entry point. base.html (or equivalent) links this file ONLY. All other CSS is consumed via @import in layer order. Layer order — later layers win cleanly without specificity wars: vendor → Bootstrap, intlTelInput, Font Awesome (loaded via @import layer(vendor) in base.html — wins over nothing) reset → normalize, base elements tokens → CSS custom properties (var(--*)) base → @font-face, html, body, typographic defaults components → component primitives (single source per primitive) utilities → atomic single-purpose classes (.u-*) pages → page-specific composition (layout only, never re-defines components) overrides → SANCTIONED !important overrides for external libs only Spec: docs/UI_MODERNIZATION_PLAN.md Audit: docs/WEB_CSS_AUDIT.md ========================================================================== */ @layer vendor, reset, tokens, base, components, utilities, pages, overrides; /* ── Foundation ───────────────────────────────────────────────── */ @import url("reset.css") layer(reset); @import url("tokens.css") layer(tokens); @import url("tokens-legacy.css") layer(tokens); @import url("typography.css") layer(base); @import url("utilities.css") layer(utilities); /* ── Components ───────────────────────────────────────────────── */ /* New BEM-named primitives. Templates migrate to these incrementally. Until a template uses the new class names (e.g., `.btn .btn--primary`), the legacy CSS still styles old class names — both coexist safely because they have different selectors. */ @import url("components/button.css") layer(components); @import url("components/input.css") layer(components); @import url("components/tabs.css") layer(components); @import url("components/chip.css") layer(components); @import url("components/card.css") layer(components); @import url("components/bottom-nav.css") layer(components); @import url("components/appbar.css") layer(components); @import url("components/hero.css") layer(components); @import url("components/sheet.css") layer(components); @import url("components/empty-state.css") layer(components); @import url("components/toast.css") layer(components); @import url("components/stat.css") layer(components); @import url("components/carousel.css") layer(components); /* @import url("components/sidebar-nav.css") layer(components); */ /* @import url("components/sidebar.css") layer(components); */ /* @import url("components/bottom-nav.css") layer(components); */ /* @import url("components/appbar.css") layer(components); */ /* @import url("components/story-rings.css") layer(components); */ /* @import url("components/hero.css") layer(components); */ /* @import url("components/sheet.css") layer(components); */ /* @import url("components/empty-state.css") layer(components); */ /* @import url("components/skeleton.css") layer(components); */ /* @import url("components/toast.css") layer(components); */ /* @import url("components/post-modal.css") layer(components); */ /* @import url("components/post-editor.css") layer(components); */ /* @import url("components/post-polish.css") layer(components); */ /* @import url("components/post-comments.css") layer(components); */ /* @import url("components/preview-card.css") layer(components); */ /* @import url("components/ai-assist.css") layer(components); */ /* @import url("components/coach-overlay.css") layer(components); */ /* @import url("components/filter-modal.css") layer(components); */ /* @import url("components/dm-modal.css") layer(components); */ /* @import url("components/image-modal.css") layer(components); */ /* @import url("components/image-uploader.css")layer(components); */ /* @import url("components/multi-date.css") layer(components); */ /* @import url("components/place-input.css") layer(components); */ /* @import url("components/save-indicator.css")layer(components); */ /* @import url("components/stat.css") layer(components); */ /* @import url("components/carousel.css") layer(components); */ /* @import url("components/wizard.css") layer(components); */ /* ── Pages (loaded per-template, not globally) ────────────────── */ /* Pages are linked in their respective templates rather than imported here, to avoid loading every page's CSS on every route. The template loads main.css (foundation + components + utilities) then its own page CSS, which @layer pages — automatically wins over components. */ /* ── Overrides (SANCTIONED !important only) ───────────────────── */ /* Each file below is the only place `!important` is allowed. Reviewed per change. Goal: eliminate fully if upstream library cooperation improves. */ @import url("overrides/form-widget.css") layer(overrides); @import url("overrides/grid-fix.css") layer(overrides); @import url("overrides/quill.css") layer(overrides); /* ========================================================================== LEGACY imports — Phase 1B in progress ========================================================================== Existing CSS files that haven't been migrated yet still load here. As each file is rewritten / merged / deleted, remove its line from this block and (if applicable) uncomment its replacement above. Layer assignment: legacy CSS lives in `pages` layer for now — it's safer to assume page-tier specificity than components-tier. The few genuinely component-level legacy files (cards.css, post-modal.css, etc.) are still in `pages` until they're rewritten — in practice they were already overriding each other at this tier so cascade is preserved. On migration day for a file: 1. Comment out its legacy line below. 2. Uncomment its new component/page line above. 3. Update templates that link the old file directly. 4. Run `git grep` to confirm zero references remain. ========================================================================== */ /* base.css dissolved 2026-04-27 — contents moved to typography.css (a), components/input.css (input rules + helptext), components/skeleton.css (loader + #Inputs-loader), components/toast.css (legacy #toastBox), utilities.css (.text-error / .text-liked / .text-muted-custom / .no-scroll), components/cards.css (.no-image-placeholder), components/left-nav.css (.explore_url), and reset.css (mobile font-size scaling). See docs/WEB_CSS_AUDIT_DELTA.md, Phase C. Keep this comment block until WEB_CSS_AUDIT_DELTA.md is itself archived. */ @import url("layouts/feed.css") layer(pages); @import url("layouts/explore.css") layer(pages); @import url("layouts/tabs.css") layer(pages); @import url("components/cards.css") layer(components); @import url("components/post-card.css") layer(components); @import url("components/sidebar.css") layer(components); @import url("components/left-nav.css") layer(components); @import url("components/skeleton.css") layer(components); @import url("components/wizard.css") layer(components); @import url("components/ai-assist.css") layer(components); @import url("components/coach-overlay.css") layer(components); @import url("components/preview-card.css") layer(components); @import url("components/save-indicator.css") layer(components); @import url("components/post-comments.css") layer(components); @import url("components/post-modal.css") layer(components); @import url("components/post-polish.css") layer(components); @import url("components/place-input.css") layer(components); @import url("components/multi-date.css") layer(components); @import url("components/image-modal.css") layer(components); @import url("components/image-uploader.css") layer(components); @import url("components/filter-modal.css") layer(components); @import url("components/dm-modal.css") layer(components); @import url("components/app-banner.css") layer(components); @import url("components/story-rings.css") layer(components); /* navbar.css is empty placeholder — DELETED in Phase 1B */