/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ /* * ── Tone-B presentation discipline (Story 1.20 AC-3, AMENDED Story 2.14 AC-12) ── * * AMENDMENT (2026-06-17, "Locker Room" course-correction): the original rule was * "static — the only motion is a single ≤150ms fade." Tone-B now permits * PURPOSEFUL MICRO-MOTION: transitions ≤200ms, hover/focus state changes, and the * FAQ accordion expand/collapse + marker rotate. Everything below is STILL banned: * - NO scroll-jacking — native/standard scroll only. * - NO sticky/fixed chrome — no `position: sticky` / `position: fixed` on any * header/footer/CTA (the global header in Story 2.14 is static by design). * - NO entrance / "lighting up" animations, NO parallax, NO autoplay/auto-refresh. * - NO transition or animation longer than 200ms. * - `prefers-reduced-motion` disables ALL motion (see the media query at the end). * * CSS approach: as of Story 2.1 the locked styling system is Tailwind * (tailwindcss-rails, standalone CLI, no Node) — Mason's tiebreak, 2026-06-16. The * color + type design tokens live in app/assets/tailwind/application.css `@theme` * (Story 2.14) and Tailwind emits them as `:root` custom properties (--color-*, * --font-*). THIS file references those variables (single source of truth — no * duplicated token hex) for the hand-written base rules that sit beneath Tailwind: * the flash + error-page chrome (1.20/1.21) and the FAQ accordion marker (2.14). */ /* ── Flash region (Story 1.20) — dark "Locker Room" treatment + the ≤150ms fade. Variant classes + roles are asserted by layout_rendering_test.rb. Each variant is a dark surface with a colored left rule. The error variant reuses --color-accent; success/notice use semantic green/blue (no token exists for those). ── */ .flash-message { padding: 0.75rem 1rem; margin: 0.5rem auto; max-width: 64rem; border: 1px solid var(--color-line); border-left-width: 4px; border-radius: 4px; background: var(--color-surface); color: var(--color-ink); animation: flash-fade-in 150ms ease-in; } .flash-success { border-left-color: #34d399; } .flash-error { border-left-color: var(--color-accent); } .flash-notice { border-left-color: #60a5fa; } @keyframes flash-fade-in { from { opacity: 0; } to { opacity: 1; } } /* ── Error pages (Story 1.21) — dark treatment. Renders through the layout (dark base + tokens already applied to ). ── */ .error-page { max-width: 40rem; margin: 5rem auto; padding: 0 1rem; } .error-page h1 { /* Oswald display, but NOT uppercased: these are conversational founder-voice sentences (1.21), not scoreboard labels — sentence case reads right. */ font-family: var(--font-display); line-height: 1.1; font-size: clamp(1.875rem, 5vw, 3rem); font-weight: 600; color: var(--color-ink); } .error-page p { margin-top: 1.5rem; color: var(--color-muted); } .error-page a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; } /* ── FAQ accordion (Story 2.14) — native
/, no JS. The +/× marker is a CSS ::after pseudo-element (NOT a text node) so it never enters the section's rendered text — the byte-for-byte FAQ drift guard reads the answer text verbatim. The marker rotates on open (≤200ms micro-motion, Tone-B amendment); implemented in CSS so the [open]-state selector is expressible. ── */ summary.faq-summary { list-style: none; cursor: pointer; } summary.faq-summary::-webkit-details-marker { display: none; } summary.faq-summary::after { content: "+"; flex: none; margin-left: 1rem; font-family: var(--font-sans); font-size: 1.75rem; line-height: 1; color: var(--color-accent); transition: transform 200ms ease; } details[open] > summary.faq-summary::after { transform: rotate(45deg); } /* Inline (FAQ + legal answers) — readable on the dark surface. */ code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; padding: 0.1em 0.35em; border-radius: 3px; background: var(--color-surface); border: 1px solid var(--color-line); color: var(--color-ink); } /* ── About mission cards (Story 2.14) — the three locked commitments render as a card grid (the
    /
  1. structure is preserved for the drift guard). The card index (01/02/03) is a CSS counter on ::before so it is decorative only and never enters the element's text (the byte-for-byte guard reads li.text). ── */ ol.mission-cards { counter-reset: mission; list-style: none; } ol.mission-cards > li::before { counter-increment: mission; content: counter(mission, decimal-leading-zero); display: block; font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; line-height: 1; color: var(--color-accent); margin-bottom: 0.75rem; } /* Site footer (Story 2.11/2.14) — a hairline top rule on the dark base. The