/* * PixPix theme layer. * * The Tailwind build in application.css is precompiled and frozen, so it cannot * generate new arbitrary-value utilities (bg-[#08090c]) or dark: variants. * Colours, surfaces and effects therefore live here as plain CSS, while layout * and typography keep using the utilities that already exist in that build. * * Theme support: * Dark theme is the default (:root). * Light theme is activated with data-theme="light" on . * When JS is disabled, @media (prefers-color-scheme: light) kicks in. */ /* ========================================================================== Custom Properties ========================================================================== */ :root { color-scheme: light dark; /* Core palette — dark (default) */ --px-bg: #08090c; --px-bg-raised: #0e1016; --px-surface: rgba(255, 255, 255, 0.035); --px-surface-hover: rgba(255, 255, 255, 0.06); --px-border: rgba(255, 255, 255, 0.09); --px-border-strong: rgba(255, 255, 255, 0.16); --px-text: #e8eaf0; --px-muted: #969dad; --px-accent: #45c1ff; --px-accent-strong: #0aadff; --px-violet: #7c5cff; --px-radius: 16px; /* Derived — dark defaults */ --px-heading: #fff; --px-prose-color: #cfd4de; --px-error: #ff8f8f; --px-nav-bg: rgba(8, 9, 12, 0.72); --px-logo-filter: brightness(0) invert(1); --px-link-hover: #9adcff; --px-selection-bg: rgba(69, 193, 255, 0.28); --px-placeholder: #6b7280; --px-display-gradient: linear-gradient( 180deg, #ffffff 30%, rgba(255, 255, 255, 0.62) ); --px-glow-gradient: radial-gradient( 60% 60% at 50% 0%, rgba(10, 173, 255, 0.22), transparent 70% ), radial-gradient( 40% 50% at 75% 10%, rgba(124, 92, 255, 0.18), transparent 70% ); --px-band-gradient: radial-gradient( 80% 140% at 50% 0%, rgba(10, 173, 255, 0.16), transparent 70% ), var(--px-surface); --px-plan-featured-gradient: radial-gradient( 120% 100% at 50% 0%, rgba(10, 173, 255, 0.14), transparent 65% ), var(--px-surface); --px-frame-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9); } /* Light theme override */ [data-theme="light"] { --px-bg: #f8f9fb; --px-bg-raised: #ffffff; --px-surface: rgba(0, 0, 0, 0.03); --px-surface-hover: rgba(0, 0, 0, 0.06); --px-border: rgba(0, 0, 0, 0.08); --px-border-strong: rgba(0, 0, 0, 0.14); --px-text: #1a1d26; --px-muted: #5f6878; --px-accent: #0a8ed4; --px-accent-strong: #0875b3; --px-violet: #6240e0; --px-heading: #111318; --px-prose-color: #374151; --px-error: #c53030; --px-nav-bg: rgba(248, 249, 251, 0.72); --px-logo-filter: none; --px-link-hover: #0875b3; --px-selection-bg: rgba(10, 142, 212, 0.22); --px-placeholder: #94a3b8; --px-display-gradient: linear-gradient( 180deg, #111318 30%, rgba(17, 19, 24, 0.62) ); --px-glow-gradient: radial-gradient( 60% 60% at 50% 0%, rgba(10, 173, 255, 0.1), transparent 70% ), radial-gradient( 40% 50% at 75% 10%, rgba(98, 64, 224, 0.08), transparent 70% ); --px-band-gradient: radial-gradient( 80% 140% at 50% 0%, rgba(10, 173, 255, 0.06), transparent 70% ), var(--px-surface); --px-plan-featured-gradient: radial-gradient( 120% 100% at 50% 0%, rgba(10, 173, 255, 0.06), transparent 65% ), var(--px-surface); --px-frame-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.15); } /* System prefers light (JS-disabled fallback) */ @media (prefers-color-scheme: light) { :root { --px-bg: #f8f9fb; --px-bg-raised: #ffffff; --px-surface: rgba(0, 0, 0, 0.03); --px-surface-hover: rgba(0, 0, 0, 0.06); --px-border: rgba(0, 0, 0, 0.08); --px-border-strong: rgba(0, 0, 0, 0.14); --px-text: #1a1d26; --px-muted: #5f6878; --px-accent: #0a8ed4; --px-accent-strong: #0875b3; --px-violet: #6240e0; --px-heading: #111318; --px-prose-color: #374151; --px-error: #c53030; --px-nav-bg: rgba(248, 249, 251, 0.72); --px-logo-filter: none; --px-link-hover: #0875b3; --px-selection-bg: rgba(10, 142, 212, 0.22); --px-placeholder: #94a3b8; --px-display-gradient: linear-gradient( 180deg, #111318 30%, rgba(17, 19, 24, 0.62) ); --px-glow-gradient: radial-gradient( 60% 60% at 50% 0%, rgba(10, 173, 255, 0.1), transparent 70% ), radial-gradient( 40% 50% at 75% 10%, rgba(98, 64, 224, 0.08), transparent 70% ); --px-band-gradient: radial-gradient( 80% 140% at 50% 0%, rgba(10, 173, 255, 0.06), transparent 70% ), var(--px-surface); --px-plan-featured-gradient: radial-gradient( 120% 100% at 50% 0%, rgba(10, 173, 255, 0.06), transparent 65% ), var(--px-surface); --px-frame-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.15); } } /* Override Tailwind text-white in light mode (footer headings, testimonial names) */ [data-theme="light"] .text-white { color: var(--px-heading); } @media (prefers-color-scheme: light) { .text-white { color: var(--px-heading); } } /* ========================================================================== Base ========================================================================== */ .px-body { background-color: var(--px-bg); color: var(--px-text); font-family: "Inter var", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } .px-body ::selection { background: var(--px-selection-bg); } .px-muted { color: var(--px-muted); } .px-heading { color: var(--px-heading); } .px-logo { filter: var(--px-logo-filter); height: 26px; width: auto; } .px-shell { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 24px; } .px-shell-narrow { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: 24px; } /* ========================================================================== Typography ========================================================================== */ .px-display { letter-spacing: -0.035em; line-height: 1.05; font-weight: 600; background: var(--px-display-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .px-title { letter-spacing: -0.03em; line-height: 1.1; font-weight: 600; color: var(--px-heading); } .px-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--px-border); border-radius: 999px; background: var(--px-surface); color: var(--px-muted); font-size: 13px; font-weight: 500; } .px-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--px-accent); box-shadow: 0 0 12px 2px rgba(69, 193, 255, 0.7); } /* ========================================================================== Buttons ========================================================================== */ .px-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 10px; font-size: 15px; font-weight: 550; line-height: 1.2; transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .px-btn:hover { transform: translateY(-1px); } .px-btn-primary { color: #04121c; background: linear-gradient(180deg, #7fd4ff, var(--px-accent-strong)); box-shadow: 0 8px 30px -10px rgba(10, 173, 255, 0.85); } .px-btn-primary:hover { box-shadow: 0 12px 36px -10px rgba(10, 173, 255, 0.95); } .px-btn-ghost { color: var(--px-text); background: var(--px-surface); border: 1px solid var(--px-border); } .px-btn-ghost:hover { background: var(--px-surface-hover); border-color: var(--px-border-strong); } .px-link { color: var(--px-accent); font-weight: 500; transition: color 0.15s ease; } .px-link:hover { color: var(--px-link-hover); } /* ========================================================================== Navigation ========================================================================== */ .px-nav { position: sticky; top: 0; z-index: 50; background: var(--px-nav-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--px-border); } .px-nav-link { color: var(--px-muted); font-size: 14.5px; font-weight: 500; transition: color 0.15s ease; } .px-nav-link:hover { color: var(--px-heading); } .px-menu-panel { background: var(--px-bg-raised); border-right: 1px solid var(--px-border); } .px-menu-link { display: block; padding: 12px 14px; border-radius: 10px; color: var(--px-text); font-size: 15px; font-weight: 500; } .px-menu-link:hover { background: var(--px-surface-hover); } /* ========================================================================== Theme Toggle ========================================================================== */ .px-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; color: var(--px-muted); background: none; border: none; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; } .px-theme-toggle:hover { color: var(--px-heading); background: var(--px-surface-hover); } .px-theme-toggle .icon-sun, .px-theme-toggle .icon-moon { width: 18px; height: 18px; } /* Show sun in dark mode (to switch to light), moon in light mode (to switch to dark) */ .px-theme-toggle .icon-sun { display: none; } .px-theme-toggle .icon-moon { display: block; } [data-theme="light"] .px-theme-toggle .icon-sun { display: block; } [data-theme="light"] .px-theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: light) { .px-theme-toggle .icon-sun { display: block; } .px-theme-toggle .icon-moon { display: none; } } /* ========================================================================== Surfaces ========================================================================== */ .px-card { position: relative; height: 100%; padding: 28px; border: 1px solid var(--px-border); border-radius: var(--px-radius); background: var(--px-surface); transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } .px-card-hover:hover { border-color: var(--px-border-strong); background: var(--px-surface-hover); transform: translateY(-2px); } .px-frame { border: 1px solid var(--px-border); border-radius: 18px; background: var(--px-bg-raised); overflow: hidden; box-shadow: var(--px-frame-shadow); } .px-frame img { display: block; width: 100%; } .px-pill { display: inline-block; padding: 8px 15px; margin: 0 8px 10px 0; border: 1px solid var(--px-border); border-radius: 999px; background: var(--px-surface); color: var(--px-muted); font-size: 14px; transition: color 0.15s ease, border-color 0.15s ease; } .px-pill:hover { color: var(--px-heading); border-color: var(--px-border-strong); } .px-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(69, 193, 255, 0.12); border: 1px solid rgba(69, 193, 255, 0.24); } .px-divider { border-top: 1px solid var(--px-border); } /* ========================================================================== Pricing ========================================================================== */ .px-price { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--px-heading); } .px-plan-featured { border-color: rgba(69, 193, 255, 0.4); background: var(--px-plan-featured-gradient); box-shadow: 0 30px 70px -40px rgba(10, 173, 255, 0.8); } .px-plan-badge { position: absolute; top: -12px; left: 28px; padding: 5px 12px; border-radius: 999px; background: linear-gradient(180deg, #7fd4ff, var(--px-accent-strong)); color: #04121c; font-size: 12px; font-weight: 600; } .px-check { flex: none; margin-top: 3px; color: var(--px-accent); } /* ========================================================================== Glow / background effects ========================================================================== */ .px-glow { position: relative; isolation: isolate; } .px-glow::before { content: ""; position: absolute; inset: -10% -20% auto -20%; height: 620px; z-index: -1; background: var(--px-glow-gradient); pointer-events: none; } .px-band { border: 1px solid var(--px-border); border-radius: 24px; background: var(--px-band-gradient); } /* ========================================================================== Forms ========================================================================== */ .px-input { width: 100%; padding: 14px 16px; border: 1px solid var(--px-border); border-radius: 11px; background: var(--px-surface); color: var(--px-text); font-size: 15px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .px-input::placeholder { color: var(--px-placeholder); } .px-input:focus { outline: none; border-color: rgba(69, 193, 255, 0.6); box-shadow: 0 0 0 3px rgba(69, 193, 255, 0.16); } .px-label { display: block; margin-bottom: 8px; color: var(--px-muted); font-size: 13.5px; font-weight: 500; } .px-error { margin-top: 8px; color: var(--px-error); font-size: 13px; } /* ========================================================================== Article body (Action Text) ========================================================================== */ .px-prose { color: var(--px-prose-color); font-size: 17.5px; line-height: 1.75; } .px-prose > * + * { margin-top: 1.15em; } .px-prose h2, .px-prose h3, .px-prose h4 { color: var(--px-heading); font-weight: 600; letter-spacing: -0.02em; margin-top: 1.9em; margin-bottom: 0.6em; line-height: 1.25; } .px-prose h2 { font-size: 1.6em; } .px-prose h3 { font-size: 1.3em; } .px-prose a { color: var(--px-accent); text-decoration: underline; text-underline-offset: 3px; } .px-prose strong { color: var(--px-heading); } .px-prose ul, .px-prose ol { padding-left: 1.4em; } .px-prose ul { list-style: disc; } .px-prose ol { list-style: decimal; } .px-prose li::marker { color: var(--px-muted); } .px-prose li + li { margin-top: 0.4em; } .px-prose blockquote { padding-left: 1.1em; border-left: 3px solid rgba(69, 193, 255, 0.5); color: var(--px-muted); font-style: italic; } .px-prose code { padding: 2px 6px; border: 1px solid var(--px-border); border-radius: 6px; background: var(--px-surface); font-size: 0.88em; } .px-prose pre { padding: 18px; border: 1px solid var(--px-border); border-radius: 12px; background: var(--px-bg-raised); overflow-x: auto; } .px-prose pre code { padding: 0; border: 0; background: none; } .px-prose img, .px-prose figure img { border-radius: 12px; border: 1px solid var(--px-border); } .px-prose figcaption { margin-top: 0.6em; color: var(--px-muted); font-size: 14px; text-align: center; } /* ========================================================================== Post list ========================================================================== */ .px-post-row { display: block; padding: 30px 0; border-bottom: 1px solid var(--px-border); transition: opacity 0.15s ease; } .px-post-row:hover .px-post-title { color: var(--px-accent); } .px-post-title { color: var(--px-heading); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; transition: color 0.15s ease; } @media (max-width: 640px) { .px-post-title { font-size: 22px; } .px-display { letter-spacing: -0.03em; } } /* ========================================================================== Admin dark mode overrides ========================================================================== The admin layout uses Tailwind utility classes directly rather than the px-* design system. When data-theme="dark" is set, these overrides swap the hardcoded light-theme Tailwind colours for dark equivalents. Scoped to .admin-body to avoid affecting the public site. */ [data-theme="dark"] .admin-body { background-color: #0e1016; color: #e8eaf0; } /* Surfaces ------------------------------------------------------------ */ [data-theme="dark"] .admin-body .bg-white { background-color: #1a1d26; } [data-theme="dark"] .admin-body .bg-gray-50 { background-color: #0e1016; } [data-theme="dark"] .admin-body .bg-red-50 { background-color: rgba(255, 90, 90, 0.12); } [data-theme="dark"] .admin-body .bg-red-100 { background-color: rgba(255, 90, 90, 0.15); } [data-theme="dark"] .admin-body .bg-green-100 { background-color: rgba(72, 199, 142, 0.15); } [data-theme="dark"] .admin-body .bg-blue-400 { background-color: #0aadff; } /* Text ---------------------------------------------------------------- */ [data-theme="dark"] .admin-body .text-gray-500 { color: #969dad; } [data-theme="dark"] .admin-body .text-red-700 { color: #ff8f8f; } [data-theme="dark"] .admin-body .text-green-700 { color: #6ee7b7; } [data-theme="dark"] .admin-body .text-red-600 { color: #ff8f8f; } [data-theme="dark"] .admin-body .text-blue-500 { color: #45c1ff; } /* Borders ------------------------------------------------------------- */ [data-theme="dark"] .admin-body .border { border-color: rgba(255, 255, 255, 0.09); } [data-theme="dark"] .admin-body .border-b { border-bottom-color: rgba(255, 255, 255, 0.09); } [data-theme="dark"] .admin-body .border-t { border-top-color: rgba(255, 255, 255, 0.09); } [data-theme="dark"] .admin-body .border-red-400 { border-color: rgba(255, 90, 90, 0.3); } /* Trix editor (Action Text rich-text toolbar + content) --------------- */ [data-theme="dark"] .admin-body trix-toolbar { background-color: #1a1d26; border-color: rgba(255, 255, 255, 0.09); } [data-theme="dark"] .admin-body trix-toolbar .trix-button { color: #e8eaf0; border-color: rgba(255, 255, 255, 0.09); background-color: transparent; } [data-theme="dark"] .admin-body trix-toolbar .trix-button:hover { background-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .admin-body trix-toolbar .trix-active { background-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .admin-body .trix-button--icon { filter: invert(1); } [data-theme="dark"] .admin-body trix-editor { background-color: #1a1d26; color: #e8eaf0; border-color: rgba(255, 255, 255, 0.09); } /* Form inputs --------------------------------------------------------- */ [data-theme="dark"] .admin-body input[type="text"], [data-theme="dark"] .admin-body input[type="email"], [data-theme="dark"] .admin-body input[type="password"], [data-theme="dark"] .admin-body input[type="file"], [data-theme="dark"] .admin-body textarea, [data-theme="dark"] .admin-body select { background-color: #1a1d26; color: #e8eaf0; } [data-theme="dark"] .admin-body input::placeholder, [data-theme="dark"] .admin-body textarea::placeholder { color: #6b7280; } /* Links --------------------------------------------------------------- */ [data-theme="dark"] .admin-body a { color: #45c1ff; } /* Table header -------------------------------------------------------- */ [data-theme="dark"] .admin-body thead { background-color: rgba(255, 255, 255, 0.04); }