/* ========================================================= ChannelCast — design tokens (shared across marketing + admin) ========================================================= */ :root { --cc-bg: #0a0e1a; --cc-bg-elev: #0f1525; --cc-bg-card: #131b2c; --cc-bg-card-2: #1a2238; --cc-bg-hover: #1f293f; --cc-text: #f1f5f9; --cc-text-muted: #94a3b8; --cc-text-dim: #64748b; --cc-border: #1f2937; --cc-border-soft: #182030; /* Brand accent is the saturated electric blue from the new brand sheet (WebIcon/WebLogo). cc-accent-2 is a lighter tint used for the gradient on primary CTAs — keeps the buttons feeling lit instead of flat. */ --cc-accent: #1B6BFF; --cc-accent-2: #4D8FFF; --cc-accent-rgb: 27, 107, 255; --cc-live: #10b981; --cc-warning: #f59e0b; --cc-danger: #ef4444; /* Display font is Montserrat per the brand sheet — strong geometric headings that match the wordmark in WebLogo.png. Body stays on Open Sans for legibility. */ --cc-font-display: 'Montserrat', 'Figtree', sans-serif; --cc-font-body: 'Open Sans', sans-serif; --cc-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; --cc-radius-sm: 6px; --cc-radius-md: 10px; --cc-radius-lg: 14px; --cc-radius-xl: 24px; --cc-ease: cubic-bezier(0.16, 1, 0.3, 1); --cc-sidebar: 256px; --cc-topbar: 64px; /* Shared height for standard form controls + buttons so inline pairs (input + adjacent button, select + Add) line up flush. cc-btn--sm + cc-btn--lg opt out via their own padding/height overrides. */ --cc-control-h: 44px; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Dark fallback color lives on so the SignalBackground component (which sits fixed at z-index:-1 behind body content) is actually visible. Body stays transparent. */ html { scroll-behavior: smooth; background: var(--cc-bg); } body { font-family: var(--cc-font-body); font-size: 12pt; color: var(--cc-text); line-height: 1.6; background: transparent; min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } h1, h2, h3, h4, h5 { font-family: var(--cc-font-display); font-weight: 700; color: #fff; line-height: 1.2; letter-spacing: -0.01em; } .cc-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; } .cc-brand { display: flex; align-items: center; gap: 10px; font-family: var(--cc-font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; } .cc-brand-mark { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--cc-accent), var(--cc-accent-2)); display: grid; place-items: center; color: #fff; font-size: 0.9rem; } /* Image-based wordmark (icon + ChannelCast lockup baked into the PNG). Replaces the gradient-square + FA-icon + text combo across sidebar, marketing header/footer, and login pages. Height-driven so it scales with context (sidebar small, login larger). */ .cc-brand-logo { height: 28px; width: auto; display: block; flex-shrink: 0; } .cc-brand-logo--lg { height: 40px; } /* Flat caps-label eyebrow — no pill, no border. Just the accent color, a small dot when live-indicating, and clear breathing room below before the headline. */ .cc-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cc-accent); margin-bottom: 28px; } .cc-eyebrow .cc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cc-live); box-shadow: 0 0 0 4px rgba(16,185,129,0.22); animation: cc-pulse 1.6s ease-in-out infinite; } @keyframes cc-pulse { 50% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } } .cc-grad { background: linear-gradient(120deg, #fff 0%, #bfd4ff 40%, #4d8fff 80%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Buttons ---------- */ .cc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; height: var(--cc-control-h); border-radius: 8px; font-family: var(--cc-font-display); font-weight: 600; font-size: 0.92rem; border: 1px solid transparent; cursor: pointer; transition: all 0.15s var(--cc-ease); white-space: nowrap; text-decoration: none; } .cc-btn--primary { background: linear-gradient(135deg, var(--cc-accent), var(--cc-accent-2)); color: #fff; } .cc-btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); } .cc-btn--ghost { background: var(--cc-bg-card); color: var(--cc-text); border-color: var(--cc-border); } .cc-btn--ghost:hover { background: var(--cc-bg-card-2); border-color: rgba(var(--cc-accent-rgb), 0.4); } .cc-btn--text { color: var(--cc-text-muted); } .cc-btn--text:hover { color: var(--cc-text); } .cc-btn--lg { padding: 0 26px; height: 52px; font-size: 1rem; } .cc-btn--block { width: 100%; justify-content: center; } .cc-icon-btn { width: 36px; height: 36px; border-radius: 8px; background: var(--cc-bg-card); border: 1px solid var(--cc-border); display: grid; place-items: center; color: var(--cc-text-muted); transition: all 0.15s var(--cc-ease); } .cc-icon-btn:hover { color: var(--cc-text); border-color: rgba(var(--cc-accent-rgb), 0.4); } /* ========================================================= MARKETING ========================================================= */ /* Translucent tint overlays only — no opaque base. The SignalBackground component (fixed, z-index:-1 behind ) provides the actual dark background + animated broadcast layers. The radial accents here just deepen the top corners. */ .cc-marketing { background: radial-gradient(1200px 600px at 12% -10%, rgba(var(--cc-accent-rgb),0.22), transparent 60%), radial-gradient(900px 500px at 88% 8%, rgba(77,143,255,0.14), transparent 60%); min-height: 100vh; position: relative; z-index: 1; } .cc-marketing__header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px) saturate(140%); background: rgba(10,14,26,0.72); border-bottom: 1px solid var(--cc-border-soft); } .cc-marketing__header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .cc-marketing__nav { display: flex; align-items: center; gap: 36px; } .cc-marketing__nav a { color: var(--cc-text-muted); font-size: 0.92rem; font-weight: 500; transition: color 0.2s var(--cc-ease); } .cc-marketing__nav a:hover { color: var(--cc-text); } .cc-marketing__cta { display: flex; align-items: center; gap: 14px; } /* ---------- Marketing site mobile drawer ---------- Hidden by default. Below 960px the hamburger button shows, the desktop nav and CTAs hide, and the drawer slides in from the right when the cc-marketing-drawer checkbox flips. Same checkbox-hack pattern as the admin sidebar — no JS for the open/close mechanics, just a 10-line inline script that auto-closes when a nav link is tapped (since SPA-style anchor jumps don't reload the page). */ /* Marketing-header hamburger matches the brand logo's vertical footprint exactly so both elements share the same baseline + visual weight. Without this the brand sat ~4px lower than the icon-btn default 36×36. */ .cc-marketing__hamburger { display: none; width: 40px; height: 40px; font-size: 1.05rem; } .cc-marketing__header .cc-brand-logo { height: 32px; } .cc-marketing__backdrop { display: none; } .cc-marketing__drawer { display: none; } @media (max-width: 960px) { .cc-marketing__nav { display: none; } .cc-marketing__cta { display: none; } /* Same centering carry-over as cc-drawer-hamburger -- inline-flex overrides the base .cc-icon-btn's display:grid so we have to restate place-items:center as flex props. */ .cc-marketing__hamburger { display: inline-flex; align-items: center; justify-content: center; } .cc-marketing__backdrop { display: block; position: fixed; inset: 0; background: rgba(10,14,26,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.25s var(--cc-ease); z-index: 60; } .cc-marketing__drawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; height: 100vh; width: 300px; max-width: 86vw; background: var(--cc-bg-elev); border-left: 1px solid var(--cc-border-soft); transform: translateX(100%); transition: transform 0.28s var(--cc-ease); z-index: 61; box-shadow: 0 0 32px rgba(0,0,0,0.5); } .cc-drawer-toggle:checked ~ .cc-marketing__backdrop { opacity: 1; pointer-events: auto; } .cc-drawer-toggle:checked ~ .cc-marketing__drawer { transform: translateX(0); } } .cc-marketing__drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--cc-border-soft); } .cc-marketing__drawer-nav { display: flex; flex-direction: column; padding: 18px 12px; gap: 4px; flex: 1; } .cc-marketing__drawer-nav a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 8px; color: var(--cc-text); font-size: 0.95rem; font-weight: 500; transition: background 0.15s var(--cc-ease), color 0.15s var(--cc-ease); } .cc-marketing__drawer-nav a i { color: var(--cc-text-muted); width: 18px; text-align: center; } .cc-marketing__drawer-nav a:hover { background: var(--cc-bg-card); color: #fff; } .cc-marketing__drawer-nav a:hover i { color: var(--cc-accent); } .cc-marketing__drawer-foot { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-top: 1px solid var(--cc-border-soft); } .cc-hero { padding: 110px 0 90px; } .cc-hero__inner { max-width: 960px; margin: 0 auto; text-align: center; padding: 0 32px; } .cc-hero__title { font-family: var(--cc-font-display); font-weight: 900; font-size: clamp(3rem, 8vw, 6rem); line-height: 0.98; letter-spacing: -0.035em; margin: 22px 0 14px; text-transform: uppercase; color: #fff; } .cc-hero h1.cc-hero__title { margin: 22px 0 14px; } .cc-hero__lead { font-size: 1.18rem; line-height: 1.6; color: #cbd5e1; max-width: 60ch; margin: 28px auto 36px; } .cc-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .cc-hero__tagline { margin-top: 36px; font-family: var(--cc-font-display); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cc-text-muted); } /* Faux platform screenshot — used in the hero + pricing intro. Renders a stylized dashboard view via HTML/CSS so it's always crisp, stays on-brand, and doesn't depend on hot-linked imagery. Slight perspective tilt under the hero, flat in pricing. */ .cc-hero__preview { margin-top: 56px; perspective: 1600px; display: flex; justify-content: center; } .cc-hero__preview .cc-screenshot { transform: rotateX(8deg) rotateY(-2deg) translateZ(0); max-width: 920px; width: 100%; } .cc-pricing-preview { margin: 36px auto 0; max-width: 960px; } .cc-screenshot { background: var(--cc-bg); border: 1px solid var(--cc-border); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px -20px rgba(0,0,0,0.65), 0 0 0 1px rgba(var(--cc-accent-rgb), 0.18); } .cc-screenshot__chrome { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--cc-bg-elev); border-bottom: 1px solid var(--cc-border-soft); } .cc-screenshot__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--cc-border); } .cc-screenshot__dot:nth-child(1) { background: #ef4444; } .cc-screenshot__dot:nth-child(2) { background: #f59e0b; } .cc-screenshot__dot:nth-child(3) { background: #10b981; } .cc-screenshot__addr { margin-left: 16px; font-family: var(--cc-font-mono); font-size: 0.78rem; color: var(--cc-text-muted); } .cc-screenshot__body { display: grid; grid-template-columns: 180px 1fr; min-height: 320px; } .cc-screenshot__body:has(.cc-screenshot__main--full) { grid-template-columns: 1fr; } .cc-screenshot__sidebar { background: var(--cc-bg-elev); border-right: 1px solid var(--cc-border-soft); padding: 18px 12px; display: flex; flex-direction: column; gap: 16px; } .cc-screenshot__brand { font-family: var(--cc-font-display); font-weight: 800; font-size: 0.9rem; color: #fff; padding: 4px 8px; } .cc-screenshot__nav { display: flex; flex-direction: column; gap: 4px; } .cc-screenshot__nav span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 0.78rem; color: var(--cc-text-muted); border-radius: 8px; } .cc-screenshot__nav span i { width: 14px; color: var(--cc-text-dim); font-size: 0.78rem; } .cc-screenshot__nav span.is-active { background: rgba(var(--cc-accent-rgb), 0.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(var(--cc-accent-rgb), 0.32); } .cc-screenshot__nav span.is-active i { color: var(--cc-accent); } .cc-screenshot__main { padding: 20px; display: flex; flex-direction: column; gap: 18px; } .cc-screenshot__row { display: flex; align-items: center; justify-content: space-between; } .cc-screenshot__row h4 { font-size: 0.92rem; color: #fff; margin: 0; } .cc-screenshot__pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-live); background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.32); } .cc-screenshot__pill span { width: 6px; height: 6px; border-radius: 50%; background: var(--cc-live); box-shadow: 0 0 0 3px rgba(16,185,129,0.22); animation: cc-pulse 1.6s ease-in-out infinite; } .cc-screenshot__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .cc-screenshot__card { background: var(--cc-bg-card); border: 1px solid var(--cc-border); border-radius: 10px; overflow: hidden; } .cc-screenshot__thumb { aspect-ratio: 16/9; position: relative; background: linear-gradient(135deg, var(--cc-accent), #1747b8); } .cc-screenshot__thumb--b { background: linear-gradient(135deg, #4D8FFF, #1B6BFF); } .cc-screenshot__thumb--c { background: linear-gradient(135deg, #1f2937, #131b2c); box-shadow: inset 0 0 0 1px var(--cc-border); } .cc-screenshot__onair { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 4px; background: var(--cc-danger); color: #fff; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; } .cc-screenshot__meta { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; } .cc-screenshot__meta strong { color: #fff; font-size: 0.78rem; font-family: var(--cc-font-display); } .cc-screenshot__meta span { color: var(--cc-text-muted); font-size: 0.7rem; } .cc-screenshot__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .cc-screenshot__stat { background: var(--cc-bg-card); border: 1px solid var(--cc-border); border-radius: 10px; padding: 14px 16px; } .cc-screenshot__stat strong { display: block; color: #fff; font-family: var(--cc-font-display); font-weight: 800; font-size: 1.4rem; line-height: 1.1; } .cc-screenshot__stat span { color: var(--cc-text-muted); font-size: 0.72rem; } .cc-screenshot__chart { background: var(--cc-bg-card); border: 1px solid var(--cc-border); border-radius: 10px; padding: 18px; } .cc-screenshot__bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; } .cc-screenshot__bars span { flex: 1; background: linear-gradient(180deg, var(--cc-accent), #1747b8); border-radius: 4px 4px 0 0; } @media (max-width: 720px) { .cc-hero__preview .cc-screenshot { transform: none; } .cc-screenshot__body { grid-template-columns: 1fr; } .cc-screenshot__sidebar { display: none; } .cc-screenshot__grid { grid-template-columns: 1fr 1fr; } .cc-screenshot__stats { grid-template-columns: 1fr 1fr; } } /* Photo attribution caption rendered under each use-case image. Subtle so it doesn't compete with the bullet list, but the link is hover-discoverable. */ .cc-photo-credit { font-size: 0.72rem; color: var(--cc-text-dim); margin-top: 8px; letter-spacing: 0.02em; } .cc-photo-credit a { color: var(--cc-text-muted); text-decoration: underline; text-decoration-color: rgba(var(--cc-accent-rgb), 0.3); text-underline-offset: 2px; } .cc-photo-credit a:hover { color: var(--cc-accent); text-decoration-color: var(--cc-accent); } .cc-section { padding: 120px 0; } .cc-section--alt { background: linear-gradient(180deg, rgba(var(--cc-accent-rgb),0.05), transparent 60%), var(--cc-bg-elev); border-top: 1px solid var(--cc-border-soft); border-bottom: 1px solid var(--cc-border-soft); } .cc-section-head { text-align: center; max-width: 720px; margin: 0 auto 64px; } .cc-section-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); margin: 18px 0; } .cc-section-head p { font-size: 1.08rem; color: var(--cc-text-muted); margin-top: 18px; } .cc-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .cc-feature-card { background: linear-gradient(180deg, var(--cc-bg-card), var(--cc-bg-card-2)); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-lg); padding: 32px; transition: all 0.3s var(--cc-ease); } .cc-feature-card:hover { border-color: rgba(var(--cc-accent-rgb), 0.4); transform: translateY(-3px); } .cc-feature-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, rgba(var(--cc-accent-rgb),0.16), rgba(77,143,255,0.08)); border: 1px solid rgba(var(--cc-accent-rgb),0.28); display: grid; place-items: center; color: #bfd4ff; font-size: 1.15rem; margin-bottom: 22px; } .cc-feature-card h3 { font-size: 1.25rem; margin-bottom: 12px; } .cc-feature-card p { font-size: 0.95rem; color: var(--cc-text-muted); } .cc-workflow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .cc-workflow-step { padding: 28px 22px; background: var(--cc-bg-card); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-lg); } .cc-workflow-step__num { font-family: var(--cc-font-display); font-weight: 800; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--cc-accent); margin-bottom: 12px; } .cc-workflow-step h4 { font-size: 1.08rem; margin-bottom: 8px; } .cc-workflow-step p { font-size: 0.88rem; color: var(--cc-text-muted); } .cc-final-cta { text-align: center; padding: 100px 0; background: radial-gradient(800px 400px at 50% 0%, rgba(var(--cc-accent-rgb),0.18), transparent 60%); border-top: 1px solid var(--cc-border-soft); } .cc-final-cta h2 { max-width: 18ch; margin: 0 auto 20px; font-size: clamp(1.8rem, 3.2vw, 2.7rem); } .cc-final-cta p { font-size: 1.1rem; max-width: 52ch; margin: 0 auto 32px; color: var(--cc-text-muted); } /* Use cases page — alternating two-column rows. Icon + headline on one side, bulleted list on the other. Every other section reverses via :nth-child(even) so the layout reads like a magazine spread instead of a flat list. */ .cc-usecases { display: flex; flex-direction: column; gap: 72px; margin-top: 56px; } .cc-usecase { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 48px; background: var(--cc-bg-card); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-lg); position: relative; overflow: hidden; } .cc-usecase::before { content: ''; position: absolute; inset: 0; background: radial-gradient(500px 280px at 100% 0%, rgba(var(--cc-accent-rgb), 0.10), transparent 70%); pointer-events: none; } .cc-usecase:nth-child(even) { direction: rtl; } .cc-usecase:nth-child(even) > * { direction: ltr; } .cc-usecase__head { position: relative; z-index: 1; } .cc-usecase__icon { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, rgba(var(--cc-accent-rgb), 0.25), rgba(77,143,255,0.12)); border: 1px solid rgba(var(--cc-accent-rgb), 0.4); display: grid; place-items: center; color: var(--cc-accent); font-size: 1.4rem; margin-bottom: 18px; } .cc-usecase__title { font-family: var(--cc-font-display); font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin: 14px 0 14px; letter-spacing: -0.02em; color: #fff; } .cc-usecase__lead { font-size: 1.05rem; line-height: 1.6; color: var(--cc-text-muted); max-width: 50ch; } .cc-usecase__body { position: relative; z-index: 1; } .cc-usecase__media { margin: 0 0 40px; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 48px -12px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--cc-accent-rgb), 0.15); } .cc-usecase__media img { width: 100%; height: auto; display: block; } .cc-usecase-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .cc-usecase-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.98rem; color: var(--cc-text); line-height: 1.5; } .cc-usecase-list li i { color: var(--cc-accent); margin-top: 4px; flex-shrink: 0; background: rgba(var(--cc-accent-rgb), 0.14); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; } .cc-footer { background: var(--cc-bg); border-top: 1px solid var(--cc-border-soft); padding: 36px 0; } .cc-footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .cc-footer__left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .cc-footer__legal { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .cc-footer__legal a { color: var(--cc-text-muted); font-size: 0.84rem; transition: color 0.15s var(--cc-ease); } .cc-footer__legal a:hover { color: var(--cc-accent); } /* Long-form legal pages — privacy, terms, billing. Constrained measure, generous vertical rhythm, headings call out section breaks without competing with the marketing hero treatments above. */ .cc-legal__head { max-width: 720px; margin: 0 auto 48px; text-align: center; } .cc-legal__meta { color: var(--cc-text-muted); font-size: 0.92rem; margin-top: 12px; } .cc-legal__body { max-width: 720px; margin: 0 auto; color: var(--cc-text); font-size: 1.02rem; line-height: 1.75; } .cc-legal__body h2 { font-family: var(--cc-font-display); font-weight: 700; font-size: 1.25rem; color: #fff; margin: 40px 0 14px; letter-spacing: -0.01em; } .cc-legal__body p { margin: 0 0 16px; color: var(--cc-text-muted); } .cc-legal__body ul { padding-left: 22px; margin: 0 0 18px; color: var(--cc-text-muted); display: flex; flex-direction: column; gap: 8px; } .cc-legal__body li::marker { color: var(--cc-accent); } .cc-legal__body strong { color: #fff; font-weight: 600; } .cc-legal__body a { color: var(--cc-accent); text-decoration: underline; text-decoration-color: rgba(var(--cc-accent-rgb), 0.35); text-underline-offset: 3px; } .cc-legal__body a:hover { text-decoration-color: var(--cc-accent); } .cc-footer__copy { color: var(--cc-text-dim); font-size: 0.85rem; } @media (max-width: 880px) { .cc-usecase { grid-template-columns: 1fr; gap: 28px; padding: 32px; } .cc-usecase:nth-child(even) { direction: ltr; } .cc-usecases { gap: 40px; } } @media (max-width: 960px) { .cc-feature-grid { grid-template-columns: 1fr 1fr; } .cc-workflow-grid { grid-template-columns: 1fr 1fr; } .cc-section { padding: 80px 0; } } @media (max-width: 600px) { .cc-feature-grid, .cc-workflow-grid { grid-template-columns: 1fr; } } /* ========================================================= LOGIN ========================================================= */ .cc-login { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; background: radial-gradient(800px 400px at 50% -10%, rgba(var(--cc-accent-rgb),0.18), transparent 60%); position: relative; z-index: 1; } .cc-login__card { width: 100%; max-width: 420px; background: var(--cc-bg-card); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-lg); padding: 40px; } /* ---------- Split layout — sign-in card paired with a benefits panel ---------- */ .cc-login--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; max-width: 1100px; margin: 0 auto; align-items: center; place-items: stretch; padding: 56px 24px; } .cc-login--split .cc-login__card { max-width: none; align-self: center; } .cc-login__pitch { color: var(--cc-text); padding: 8px 0; align-self: center; } .cc-login__pitch .cc-eyebrow { margin-bottom: 20px; } .cc-login__pitch-title { font-family: var(--cc-font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.05; letter-spacing: -0.025em; color: #fff; margin: 0 0 18px; } .cc-login__pitch-lead { color: var(--cc-text-muted); font-size: 1.02rem; line-height: 1.6; max-width: 52ch; margin: 0 0 24px; } .cc-login__pitch-list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 14px; } .cc-login__pitch-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.94rem; line-height: 1.55; color: var(--cc-text); } .cc-login__pitch-list li i { color: var(--cc-accent); margin-top: 4px; flex-shrink: 0; font-size: 1.05rem; } .cc-login__pitch-list li strong { color: #fff; font-weight: 700; } .cc-login__pitch-list li > div { color: var(--cc-text-muted); } .cc-login__pitch-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--cc-border-soft); } .cc-login__pitch-trust { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; } .cc-login__pitch-trust strong { color: #fff; font-family: var(--cc-font-display); font-weight: 700; font-size: 0.92rem; } .cc-login__pitch-trust span { color: var(--cc-text-muted); font-size: 0.82rem; } @media (max-width: 880px) { .cc-login--split { grid-template-columns: 1fr; max-width: 480px; gap: 40px; padding: 40px 20px; } .cc-login--split .cc-login__pitch { order: 2; text-align: left; } .cc-login--split .cc-login__card { order: 1; } } .cc-login__brand { display: flex; align-items: center; gap: 10px; font-family: var(--cc-font-display); font-weight: 800; font-size: 1.05rem; margin-bottom: 24px; } .cc-login h1 { font-size: 1.6rem; margin-bottom: 6px; } .cc-login__sub { color: var(--cc-text-muted); font-size: 0.9rem; margin-bottom: 28px; } .cc-login__error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.4); border-radius: var(--cc-radius-md); padding: 12px 14px; color: #fecaca; font-size: 0.88rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .cc-login__form { display: flex; flex-direction: column; gap: 18px; } .cc-field { display: flex; flex-direction: column; gap: 6px; } .cc-field > span { font-size: 0.82rem; font-weight: 600; color: var(--cc-text-muted); letter-spacing: 0.02em; } .cc-field input, .cc-field select, .cc-field textarea { background: var(--cc-bg); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-md); padding: 0 14px; font: inherit; color: var(--cc-text); transition: border-color 0.15s var(--cc-ease); } .cc-field input, .cc-field select { height: var(--cc-control-h); } .cc-field textarea { padding: 12px 14px; min-height: var(--cc-control-h); line-height: 1.5; } .cc-field input:focus, .cc-field select:focus, .cc-field textarea:focus { outline: none; border-color: rgba(var(--cc-accent-rgb), 0.6); } /* Suppress the browser's autofill background (Chrome paints a bright off-white over our dark inputs when the password manager auto-fills). The inset-shadow trick is the standard fix: it overpaints the autofill highlight with our normal dark background while preserving the text color we set on the field. Applies to all .cc-field inputs across the admin UI. */ .cc-field input:-webkit-autofill, .cc-field input:-webkit-autofill:hover, .cc-field input:-webkit-autofill:focus, .cc-field textarea:-webkit-autofill, .cc-field select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--cc-bg) inset !important; -webkit-text-fill-color: var(--cc-text) !important; caret-color: var(--cc-text) !important; transition: background-color 5000s ease-in-out 0s; /* defers the autofill paint */ } /* ========================================================= COLOR PICKER (paired hex input + native color picker) ========================================================= */ .cc-color-input { display: flex; gap: 8px; align-items: center; } .cc-color-input input[type="text"] { flex: 1; min-width: 0; } .cc-color-input input[type="color"] { width: 48px; height: 44px; padding: 0; border: 1px solid var(--cc-border); border-radius: var(--cc-radius-md); background: var(--cc-bg); cursor: pointer; flex-shrink: 0; } .cc-color-input input[type="color"]::-webkit-color-swatch-wrapper { padding: 4px; } .cc-color-input input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; } /* ========================================================= IMAGE DROPZONE + PROGRESS BAR ========================================================= */ .cc-dropzone { position: relative; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--cc-border); border-radius: var(--cc-radius-md); background: var(--cc-bg); color: var(--cc-text-muted); overflow: hidden; transition: border-color 0.15s var(--cc-ease), background 0.15s var(--cc-ease); cursor: pointer; } .cc-dropzone:hover { border-color: rgba(var(--cc-accent-rgb), 0.5); background: var(--cc-bg-elev); } .cc-dropzone--dragging { border-color: rgba(var(--cc-accent-rgb), 0.9); background: rgba(var(--cc-accent-rgb), 0.06); } .cc-dropzone--busy { cursor: progress; border-style: solid; border-color: rgba(var(--cc-accent-rgb), 0.6); } .cc-dropzone--square { aspect-ratio: 1 / 1; max-width: 280px; } .cc-dropzone--banner { aspect-ratio: 16 / 5; } .cc-dropzone--cover { aspect-ratio: 16 / 9; max-width: 480px; } .cc-dropzone--portrait { aspect-ratio: 2 / 3; max-width: 280px; } .cc-dropzone__image { width: 100%; height: 100%; object-fit: contain; background: var(--cc-bg); } .cc-dropzone__placeholder, .cc-dropzone__busy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px; pointer-events: none; } .cc-dropzone__placeholder i, .cc-dropzone__busy i { font-size: 28px; color: var(--cc-text-muted); } .cc-dropzone__title { font-weight: 600; color: var(--cc-text); font-size: 0.95rem; } .cc-dropzone__hint { font-size: 0.85rem; color: var(--cc-text-muted); } .cc-dropzone__limits { font-size: 0.72rem; color: var(--cc-text-dim); } .cc-dropzone__busy-text { font-size: 0.82rem; color: var(--cc-text); } .cc-dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .cc-dropzone--busy .cc-dropzone__input { cursor: progress; pointer-events: none; } .cc-dropzone__actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; } .cc-dropzone__url-fallback { font-size: 0.78rem; color: var(--cc-text-muted); } .cc-dropzone__url-fallback summary { cursor: pointer; user-select: none; } .cc-dropzone__url-fallback input { display: block; margin-top: 6px; min-width: 280px; background: var(--cc-bg); border: 1px solid var(--cc-border); border-radius: var(--cc-radius-md); padding: 8px 12px; color: var(--cc-text); } .cc-progress-bar { width: 220px; max-width: 80%; height: 8px; background: var(--cc-bg-card-2); border-radius: 999px; overflow: hidden; } .cc-progress-bar__fill { height: 100%; background: linear-gradient(90deg, rgba(var(--cc-accent-rgb),0.6), rgba(var(--cc-accent-rgb),1)); transition: width 0.18s var(--cc-ease); } .cc-login__hints { margin-top: 28px; padding: 16px; background: rgba(255,255,255,0.02); border: 1px solid var(--cc-border-soft); border-radius: var(--cc-radius-md); font-size: 0.8rem; color: var(--cc-text-muted); } .cc-login__hints strong { display: block; margin-bottom: 8px; color: var(--cc-text); font-family: var(--cc-font-display); } .cc-login__hints code { font-family: var(--cc-font-mono); background: var(--cc-bg); padding: 1px 6px; border-radius: 4px; color: var(--cc-text); } /* ========================================================= ADMIN APP SHELL (sidebar + topbar) ========================================================= */ .cc-app { display: grid; grid-template-columns: var(--cc-sidebar) 1fr; min-height: 100vh; } /* Default dark-theme styling for bare inputs/selects/textareas under the admin shell so a plain or inline