/* ============================================================ site-custom.css Project-specific styles that sit on top of chuchotage.css. Sections: 1. Bootstrap-JS gap fillers (responsive navbar collapse, fade transitions) — chuchotage.css is BS-class-compatible but skips the responsive navbar plumbing that bootstrap.bundle.min.js drives via the .show / .collapsing classes. 1b. Bootstrap utility shim — fs/lh, responsive padding, table-responsive, list-unstyled, modal/dropdown sub- variants, sm-breakpoint columns, form validation styles, dropdown hover-open override. 2. Compatibility aliases for a few Bootstrap utility classes chuchotage.css doesn't emit but our Razor pages still reference (link-secondary, bg-body-tertiary, text-body- secondary, btn-close, etc.). 3. Chuchotage product hooks (cc-*) — phone mock, animated wave, flow diagram, step numerals, spec stat, language cell, pricing chips/calculator, broadcast meter, listener chromeless shell. 4. Dark-mode overrides (global). chuchotage.css is light- only; this block re-points the design tokens for dark mode so the entire UI flips when theme.js toggles [data-bs-theme="dark"] on . ============================================================ */ /* ── 1. Bootstrap-JS gap fillers ───────────────────────────── */ /* Collapse plumbing driven by bootstrap.bundle.min.js. On show, .collapse gets .show appended (or .collapsing during the animation tick). chuchotage.css already special-cases the accordion variant but not the generic navbar variant. */ .collapse:not(.show) { display: none; } .collapsing { height: 0; overflow: hidden; transition: height 0.25s ease; } /* Fade transition for modals (bootstrap.js toggles .show on .modal.fade). chuchotage.css renders .modal.show but ignores .fade. */ .modal.fade { opacity: 0; transition: opacity .15s linear; } .modal.fade.show { opacity: 1; } .modal-backdrop { position: fixed; inset: 0; z-index: 1040; background: var(--cc-ink); opacity: 0; transition: opacity .15s linear; } .modal-backdrop.show { opacity: 0.55; } body.modal-open { overflow: hidden; } /* Responsive navbar — collapsed below lg, inline at lg+. bootstrap.bundle.min.js targets [data-bs-toggle="collapse"] and toggles .show on the [data-bs-target] element. */ .navbar-toggler { padding: 0.35rem 0.6rem; background: transparent; border: 1px solid var(--cc-rule); border-radius: var(--bs-border-radius-sm); color: var(--cc-ink); cursor: pointer; line-height: 1; } .navbar-toggler:focus-visible { outline: 2px solid var(--cc-accent); outline-offset: 2px; } .navbar-toggler-icon { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: middle; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%231a1a1a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } @media (max-width: 991.98px) { .navbar-expand-lg { flex-wrap: wrap; padding: 0.75rem 1rem; } .navbar-expand-lg .navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: stretch; } .navbar-expand-lg .navbar-collapse:not(.show) { display: none; } .navbar-expand-lg .navbar-collapse.show { display: flex !important; flex-direction: column; gap: 0.75rem; padding: 1rem 0 0.5rem; border-top: 1px solid var(--cc-rule); margin-top: 0.75rem; } .navbar-expand-lg .navbar-nav { flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 0; } .navbar-expand-lg .navbar-nav .nav-link { padding: 0.5rem 0; } } @media (min-width: 992px) { .navbar-expand-lg { flex-wrap: nowrap; } .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; align-items: center; } .navbar-expand-lg .navbar-toggler { display: none; } .navbar-nav.mx-auto { margin-left: auto !important; margin-right: auto !important; } .navbar-nav.me-auto { margin-right: auto !important; } } /* Bootstrap's responsive utilities chuchotage.css doesn't emit. We rely on d-none / d-md-* in a few partials. */ @media (min-width: 768px) { .d-md-flex { display: flex !important; } .d-md-inline-flex { display: inline-flex !important; } .d-md-none { display: none !important; } .order-md-1 { order: 1; } .order-md-2 { order: 2; } } @media (max-width: 767.98px) { .d-none.d-md-flex, .d-none.d-md-inline-flex { display: none !important; } } /* ── 1b. Bootstrap utility shim ────────────────────────────── */ /* chuchotage.css covers the named components but skips a long tail of Bootstrap utility classes our markup still references. Add only what's actually used somewhere under Pages/. */ /* Sizing */ .min-vh-100 { min-height: 100vh; } .w-md-auto { /* below md falls through to chuchotage .w-100/etc. */ } @media (min-width: 768px) { .w-md-auto { width: auto !important; } } /* Position helpers */ .sticky-top { position: sticky; top: 0; z-index: 1020; } .position-sticky { position: sticky; } /* Responsive flex */ @media (min-width: 768px) { .flex-md-row { flex-direction: row !important; } .flex-md-column { flex-direction: column !important; } } /* Vertical alignment */ .align-middle { vertical-align: middle !important; } .align-baseline { vertical-align: baseline !important; } /* Responsive padding (md / lg) used heavily by hero sections */ @media (min-width: 768px) { .py-md-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-md-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-md-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-md-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } .py-md-6 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; } .pt-md-3 { padding-top: 1rem !important; } .pt-md-5 { padding-top: 3rem !important; } .pb-md-5 { padding-bottom: 3rem !important; } .my-md-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .g-md-5 { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; } .g-md-6 { --bs-gutter-x: 4.5rem; --bs-gutter-y: 4.5rem; } } @media (min-width: 992px) { .gap-lg-4 { gap: 1.5rem !important; } } /* Table helpers */ .table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-sm th, .table-sm td { padding: 0.4rem 0.5rem; font-size: 0.875rem; } /* Component sub-variants chuchotage skips */ .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3rem); } .accordion-header { margin: 0; } .accordion-flush > .accordion-item { border-left: 0; border-right: 0; border-radius: 0; } .accordion-flush > .accordion-item:first-child { border-top: 0; } .accordion-flush > .accordion-item:last-child { border-bottom: 0; } .dropdown-menu-end { right: 0; left: auto; } .list-group-flush { border-radius: 0; } .list-group-flush > .list-group-item { border-left: 0; border-right: 0; border-radius: 0; } .list-group-flush > .list-group-item:first-child { border-top: 0; } .list-group-flush > .list-group-item:last-child { border-bottom: 0; } .list-unstyled { list-style: none; padding-left: 0; margin: 0; } .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .btn, .input-group-sm > .input-group-text { font-size: 0.8125rem; padding: 0.4375rem 0.625rem; } .nav-item { list-style: none; } /* Responsive columns at the sm breakpoint (used in Events/Detail's DL). */ @media (min-width: 576px) { .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } } /* Font-size + line-height (Bootstrap fs/lh utility scale) */ .fs-1 { font-size: calc(1.375rem + 1.5vw) !important; } .fs-2 { font-size: calc(1.325rem + 0.9vw) !important; } .fs-3 { font-size: calc(1.3rem + 0.6vw) !important; } .fs-4 { font-size: calc(1.275rem + 0.3vw) !important; } .fs-5 { font-size: 1.25rem !important; } .fs-6 { font-size: 1rem !important; } .lh-1 { line-height: 1 !important; } .lh-sm { line-height: 1.25 !important; } .lh-base { line-height: 1.55 !important; } .lh-lg { line-height: 1.8 !important; } /* Form validation states. ASP.NET emits both `is-invalid` on the field and an accompanying `invalid-feedback` span — chuchotage doesn't style either, so the user saw plain body-coloured text on validation failure. */ .is-invalid { border-color: var(--cc-danger) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%23a23015' stroke-width='1'/%3E%3Cpath stroke='%23a23015' stroke-width='1.5' stroke-linecap='round' d='M6 3.5v3M6 8.25v.25'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 14px; padding-right: 2.25rem !important; } .is-invalid:focus { border-color: var(--cc-danger); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cc-danger) 22%, transparent); } .invalid-feedback { display: none; margin-top: 0.375rem; font-size: 0.8125rem; color: var(--cc-danger); } .invalid-feedback.d-block, .was-validated .is-invalid ~ .invalid-feedback, .is-invalid ~ .invalid-feedback { display: block; } .was-validated .form-control:invalid, .was-validated .form-select:invalid { border-color: var(--cc-danger); } /* Dropdown hover-open removal. chuchotage.css opens .dropdown-menu on :hover and :focus-within in addition to .show. Our pickers (Events/Create language selects, AuthedNav user menu) are driven by Bootstrap-JS click toggles; the hover behaviour caused the language pickers to spring open whenever the mouse passed over the trigger row. Override so only .show drives visibility. */ .dropdown:hover > .dropdown-menu, .dropdown:focus-within > .dropdown-menu { opacity: 0; visibility: hidden; transform: translateY(-4px); } .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); } /* ── 2. Compatibility aliases ──────────────────────────────── */ /* _Footer + a couple of pages still emit BS5's link-secondary and bg-body-tertiary. Map them to our palette so we don't have to rewrite every page. */ .link-secondary { color: var(--cc-mute); text-decoration: none; transition: color .15s; } .link-secondary:hover { color: var(--cc-accent); } .bg-body-tertiary { background-color: var(--cc-cream) !important; } .bg-body-secondary { background-color: var(--cc-cream) !important; } .text-body-secondary { color: var(--cc-mute) !important; } .text-body-emphasis { color: var(--cc-ink) !important; } .text-bg-light.border { border-color: var(--cc-rule) !important; } .font-mono, .font-monospace { font-family: var(--cc-font-mono) !important; } /* Bootstrap .btn-close-white for dark surfaces (rare, used by modal headers on the broadcast page). */ .btn-close-white { color: var(--cc-paper); } .btn-close-white:hover { background: rgba(255,255,255,0.1); color: var(--cc-paper); } /* ── 3. Chuchotage product hooks ───────────────────────────── */ /* Brand mark: 10px terracotta dot used inside navbar-brand. */ .cc-accent-dot { display: inline-block; width: 10px; height: 10px; background: var(--cc-accent); border-radius: 50%; flex-shrink: 0; } /* Eyebrow + dot combo used above hero copy. */ .cc-eyebrow-row { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } /* Phone mockup — used on Index hero and Listen preview region. */ .cc-phone { width: 280px; aspect-ratio: 9 / 19; background: #111; border-radius: 38px; padding: 10px; box-shadow: var(--cc-shadow-lg); position: relative; margin: 0 auto; } .cc-phone-screen { width: 100%; height: 100%; background: var(--cc-paper); border-radius: 30px; padding: 1.5rem 1.25rem; display: flex; flex-direction: column; overflow: hidden; } .cc-phone-notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 80px; height: 22px; background: #111; border-radius: 12px; z-index: 2; } .cc-phone-screen__quote { font-family: var(--cc-font-display); font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--cc-ink); } .cc-phone-screen__quote em, .cc-phone-screen__quote .serif-em { color: var(--cc-accent); font-style: italic; } .cc-phone-screen__label { font-family: var(--cc-font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cc-mute); margin-bottom: 0.25rem; } /* Animated waveform — eight bars used in phone footer + listener live-status row. */ .cc-wave { display: inline-flex; align-items: center; gap: 3px; height: 24px; } .cc-wave > span { display: block; width: 3px; background: var(--cc-accent); border-radius: 2px; animation: cc-wave 1.2s ease-in-out infinite; } .cc-wave > span:nth-child(1) { animation-delay: 0s; height: 30%; } .cc-wave > span:nth-child(2) { animation-delay: .1s; height: 70%; } .cc-wave > span:nth-child(3) { animation-delay: .2s; height: 100%; } .cc-wave > span:nth-child(4) { animation-delay: .3s; height: 50%; } .cc-wave > span:nth-child(5) { animation-delay: .4s; height: 85%; } .cc-wave > span:nth-child(6) { animation-delay: .5s; height: 40%; } .cc-wave > span:nth-child(7) { animation-delay: .6s; height: 90%; } .cc-wave > span:nth-child(8) { animation-delay: .7s; height: 60%; } @keyframes cc-wave { 0%, 100% { transform: scaleY(.5); opacity: .6; } 50% { transform: scaleY(1); opacity: 1; } } /* Flow diagram — speaker → 4 phones SVG on the home page. */ .cc-flow-diagram { width: 100%; max-width: 720px; height: auto; display: block; margin: 0 auto; color: var(--cc-ink); } /* "How it works" step numerals. */ .cc-step-num { font-family: var(--cc-font-display); font-size: 4rem; line-height: 1; color: var(--cc-accent); margin-bottom: 0.5rem; } /* Spec stat block (~1s, 13+, ∞, 0). */ .cc-spec-stat { font-family: var(--cc-font-display); font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; color: var(--cc-ink); } .cc-spec-stat .accent { color: var(--cc-accent); margin-left: 0.04em; } .cc-spec-unit { font-family: var(--cc-font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-mute); margin-top: 0.5rem; } /* Language grid cell. */ .cc-lang-cell { padding: 0.875rem 1rem; border: 1px solid var(--cc-rule); border-radius: 10px; background: var(--cc-paper); } .cc-lang-cell__native { font-family: var(--cc-font-display); font-size: 1.5rem; line-height: 1; } .cc-lang-cell__code { font-size: 0.75rem; color: var(--cc-mute); font-family: var(--cc-font-mono); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 0.375rem; } /* Pricing calculator chip toggle (used in Pricing/Index + Events/Create when picking plan/duration/languages). */ .cc-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; font-family: var(--cc-font-body); font-size: 0.875rem; font-weight: 500; color: var(--cc-ink); background: var(--cc-paper); border: 1px solid var(--cc-rule); border-radius: 9999px; cursor: pointer; user-select: none; transition: background .15s, border-color .15s, color .15s; } .cc-chip:hover { background: var(--cc-cream); } .cc-chip.cc-chip-active, .cc-chip[aria-pressed="true"] { background: var(--cc-ink); border-color: var(--cc-ink); color: var(--cc-paper); } .cc-chip-removable { padding-right: 0.5rem; } .cc-chip-removable .cc-chip-remove { margin-left: 0.25rem; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: transparent; border: 0; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; } .cc-chip-removable .cc-chip-remove:hover { background: rgba(0,0,0,0.08); } /* Pricing calculator: number readouts. */ .cc-calc-readout { font-family: var(--cc-font-display); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; color: var(--cc-ink); } .cc-calc-readout .unit { font-family: var(--cc-font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-mute); margin-left: 0.5rem; vertical-align: middle; } .cc-calc-row { display: grid; grid-template-columns: 9rem 1fr; gap: 0.75rem 1.25rem; align-items: center; margin-bottom: 0.875rem; } .cc-calc-row > label { font-family: var(--cc-font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-mute); } .cc-calc-card { background: var(--cc-paper); border: 1px solid var(--cc-rule); border-radius: var(--bs-border-radius-lg); padding: 1.5rem; } .cc-calc-sticky { position: sticky; top: 1rem; } /* Range slider — used in Pricing calculator (BS .form-range isn't styled by chuchotage.css). */ .cc-range, input[type="range"].form-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--cc-soft); border-radius: 2px; outline: none; } .cc-range::-webkit-slider-thumb, input[type="range"].form-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--cc-accent); border: 2px solid var(--cc-paper); box-shadow: 0 1px 3px rgba(40,30,20,0.15); cursor: pointer; } .cc-range::-moz-range-thumb, input[type="range"].form-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--cc-accent); border: 2px solid var(--cc-paper); box-shadow: 0 1px 3px rgba(40,30,20,0.15); cursor: pointer; } /* Broadcast page audio meter container. */ .cc-meter { display: block; width: 100%; height: 56px; background: var(--cc-cream); border: 1px solid var(--cc-rule); border-radius: var(--bs-border-radius); } .cc-meter canvas { display: block; width: 100%; height: 100%; /* Explicit background so livekit-speaker.js can read getComputedStyle(canvas).backgroundColor each frame and clear-fill the previous bar. Without this the canvas is transparent, the per-frame clear paints rgba(0,0,0,0), and the meter trail smears horizontally. */ background: var(--cc-cream); } /* Live status pill (broadcast + listener live state). */ .cc-live-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.7rem 0.3rem 0.45rem; background: var(--cc-accent-2); color: var(--cc-paper); border-radius: 9999px; font-family: var(--cc-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; } .cc-live-pill::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--cc-paper); animation: cc-pulse 1.4s ease-in-out infinite; } @keyframes cc-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* Plan tile (Pricing + Events/Create plan picker). */ .cc-plan-tile { display: block; padding: 1.25rem 1.25rem 1.5rem; background: var(--cc-paper); border: 1px solid var(--cc-rule); border-radius: var(--bs-border-radius-lg); cursor: pointer; transition: border-color .15s, transform .08s, box-shadow .15s; height: 100%; text-decoration: none; color: inherit; } .cc-plan-tile:hover { border-color: var(--cc-mute); } .cc-plan-tile.cc-plan-tile-active, input[type="radio"].btn-check:checked + .cc-plan-tile { border-color: var(--cc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cc-accent) 18%, transparent); } input[type="radio"].btn-check:disabled + .cc-plan-tile { opacity: 0.55; cursor: not-allowed; } .btn-check { position: absolute; clip: rect(0,0,0,0); pointer-events: none; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .cc-plan-tile__name { font-family: var(--cc-font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-mute); margin-bottom: 0.5rem; } .cc-plan-tile__price { font-family: var(--cc-font-display); font-size: 2.25rem; line-height: 1; margin-bottom: 0.5rem; } /* Listener chromeless shell — full-bleed, dark-friendly. */ .cc-listener-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--cc-paper); color: var(--cc-ink); } .cc-listener-shell main { flex: 1; display: flex; flex-direction: column; padding: clamp(1rem, 4vw, 2rem); } .cc-listener-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; margin-top: 1rem; } .cc-listener-pick button { padding: 0.875rem 0.5rem; background: var(--cc-paper); border: 1px solid var(--cc-rule); border-radius: var(--bs-border-radius); font-family: var(--cc-font-display); font-size: 1.125rem; line-height: 1.1; color: var(--cc-ink); cursor: pointer; transition: border-color .15s, background .15s; } .cc-listener-pick button:hover { border-color: var(--cc-accent); } .cc-listener-pick button[aria-pressed="true"] { background: var(--cc-ink); color: var(--cc-paper); border-color: var(--cc-ink); } /* QR poster card. */ .cc-qr { display: inline-flex; flex-direction: column; align-items: center; padding: 1.25rem; background: var(--cc-paper); border: 1px solid var(--cc-rule); border-radius: var(--bs-border-radius-lg); text-align: center; gap: 0.75rem; } .cc-qr img, .cc-qr svg { width: 200px; height: 200px; border-radius: var(--bs-border-radius); background: var(--cc-paper); padding: 4px; } .cc-qr .cc-qr-url { font-family: var(--cc-font-mono); font-size: 0.8125rem; color: var(--cc-mute); letter-spacing: 0.02em; } /* Sticky CTA bar (broadcast bottom action row). */ .cc-sticky-bar { position: sticky; bottom: 0; background: var(--cc-paper); border-top: 1px solid var(--cc-rule); padding: 0.875rem 0; margin-top: 2rem; z-index: 5; } /* Invoice / quote card — used on Index hero + the "quote you didn't book" comparison section. Paper-like, mono numerals, line items right-aligned. The --ours variant has a 3px accent left border; the AIIC variant carries a rotated "Not booked" stamp. */ .cc-quote-card { position: relative; background: var(--cc-paper); border: 1px solid var(--cc-rule); border-radius: 4px; padding: 1.5rem 1.5rem 1.25rem; font-family: var(--cc-font-mono); font-size: 0.8125rem; line-height: 1.7; color: var(--cc-ink); box-shadow: var(--cc-shadow-sm); } .cc-quote-card--ours { border-color: var(--cc-accent); border-left-width: 3px; } .cc-quote-card__caption { font-family: var(--cc-font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-mute); margin-bottom: 0.5rem; } .cc-quote-card__title { font-family: var(--cc-font-display); font-size: 1.1875rem; line-height: 1.25; color: var(--cc-ink); margin: 0 0 0.75rem; letter-spacing: -0.005em; } .cc-quote-card__rule { height: 1px; background: var(--cc-rule); margin: 0.5rem 0; } .cc-quote-card__line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .cc-quote-card__line + .cc-quote-card__line { margin-top: 0.125rem; } .cc-quote-card__line .label { color: var(--cc-ink-2); } .cc-quote-card__line .amount { color: var(--cc-ink); white-space: nowrap; } .cc-quote-card__line--strike .label, .cc-quote-card__line--strike .amount { text-decoration: line-through; color: var(--cc-mute); } .cc-quote-card__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0.75rem 0 0; padding-top: 0.625rem; border-top: 1px solid var(--cc-rule); font-family: var(--cc-font-display); } .cc-quote-card__total .label { font-family: var(--cc-font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-mute); } .cc-quote-card__total .amount { font-size: 1.75rem; line-height: 1; color: var(--cc-ink); } .cc-quote-card--ours .cc-quote-card__total .amount { color: var(--cc-accent); } .cc-quote-card__meta { margin-top: 0.75rem; display: flex; justify-content: space-between; align-items: baseline; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc-mute); } .cc-quote-card__stamp { position: absolute; top: 1.1rem; right: -0.4rem; font-family: var(--cc-font-display); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc-mute); background: var(--cc-paper); border: 1px solid var(--cc-mute); padding: 0.2rem 0.55rem; border-radius: 2px; transform: rotate(-5deg); pointer-events: none; } /* Mono micro-footnote used under invoice + comparison table. */ .cc-footnote { font-family: var(--cc-font-mono); font-size: 0.6875rem; line-height: 1.55; color: var(--cc-mute); letter-spacing: 0.01em; } /* Editorial trust-rule block — 2px accent left border, no card chrome. Used on the home-page trust band where each line is an empathy statement rather than a feature claim. */ .cc-trust-rule { padding-left: 1.125rem; border-left: 2px solid var(--cc-accent); } .cc-trust-rule h3 { font-family: var(--cc-font-display); font-size: 1.375rem; line-height: 1.15; margin: 0 0 0.5rem; color: var(--cc-ink); letter-spacing: -0.005em; } .cc-trust-rule p { margin: 0; color: var(--cc-mute); font-size: 0.9375rem; line-height: 1.55; } /* ── 4. Dark-mode overrides (global) ───────────────────────── */ /* When [data-bs-theme="dark"] is set on , we re-paint the chuchotage design tokens. Because chuchotage.css consumes --cc-* vars everywhere, this single token-override block flips the entire UI — marketing, auth, internal app, and listener — without per-surface CSS. The footer "Toggle theme" button (theme.js) sets the attribute on , persisting in localStorage. */ [data-bs-theme="dark"] { --cc-cream: #1f1d1a; --cc-paper: #181613; --cc-ink: #f3efe6; --cc-ink-2: #c9c4b8; --cc-mute: #98948b; --cc-mute-2: #6a665d; --cc-rule: #2a2622; --cc-soft: #25221e; --cc-accent: #e98a64; --cc-accent-2: #d97757; --cc-deep: #c1cfb6; color-scheme: dark; } [data-bs-theme="dark"] body { background: var(--cc-paper); color: var(--cc-ink); } [data-bs-theme="dark"] .cc-phone { background: #050505; } [data-bs-theme="dark"] .cc-phone-notch { background: #050505; }