html,body{margin:0;padding:0}body{background:var(--tupa-bg-primary)}
/* TUPA Brand Theme System
* Dark theme with warm, calming colors for a family-friendly pet app
* Soft charcoals and warm accents instead of harsh blacks
*/
:root {
/* === BRAND COLOURS === */
--tupa-coral: #F4A261;
--tupa-teal: #2A9D8F;
--tupa-sand: #E9C46A;
--tupa-terracotta: #E76F51;
/* === DARK MODE FOUNDATIONS === */
--tupa-bg-primary: #12151b;
--tupa-bg-secondary: #1c212a;
--tupa-bg-elevated: #232b36;
--tupa-surface-dark: rgba(28, 33, 42, 0.95);
--tupa-surface-glass: rgba(35, 43, 54, 0.88);
--tupa-surface-overlay: rgba(42, 157, 143, 0.12);
/* === TEXT HIERARCHY === */
--tupa-text-primary: #f7f9fc;
--tupa-text-secondary: rgba(247, 249, 252, 0.82);
--tupa-text-tertiary: rgba(247, 249, 252, 0.62);
--tupa-text-muted: rgba(247, 249, 252, 0.55);
--tupa-text-accent: #ffd08b;
/* === SEMANTIC STATUS === */
--tupa-status-success: #22c55e;
--tupa-status-success-surface: rgba(34, 197, 94, 0.16);
--tupa-status-info: #38bdf8;
--tupa-status-info-surface: rgba(56, 189, 248, 0.16);
--tupa-status-warning: #f59e0b;
--tupa-status-warning-surface: rgba(245, 158, 11, 0.16);
--tupa-status-warning-text: #111827;
--tupa-status-error: #ef4444;
--tupa-status-error-surface: rgba(239, 68, 68, 0.16);
--tupa-status-error-text: #fecaca;
/* === GRADIENT DEFINITIONS === */
--tupa-gradient-primary: linear-gradient(135deg, var(--tupa-coral) 0%, var(--tupa-terracotta) 50%, var(--tupa-sand) 100%);
--tupa-gradient-secondary: linear-gradient(90deg, var(--tupa-teal) 0%, var(--tupa-coral) 100%);
--tupa-gradient-accent: linear-gradient(180deg, var(--tupa-coral) 0%, var(--tupa-terracotta) 100%);
--tupa-gradient-bg: linear-gradient(135deg, var(--tupa-bg-primary) 0%, var(--tupa-bg-secondary) 50%, var(--tupa-bg-primary) 100%);
/* === BORDERS === */
--tupa-border-subtle-colour: rgba(136, 153, 177, 0.26);
--tupa-border-strong-colour: rgba(136, 153, 177, 0.45);
--tupa-border-subtle: 1px solid var(--tupa-border-subtle-colour);
--tupa-border-medium: 1px solid var(--tupa-border-strong-colour);
--tupa-border-bright: 1px solid rgba(244, 162, 97, 0.55);
/* === GLOW/SHADOW === */
--tupa-glow-coral: 0 0 12px rgba(244, 162, 97, 0.35), 0 0 24px rgba(244, 162, 97, 0.2);
--tupa-glow-teal: 0 0 12px rgba(42, 157, 143, 0.35), 0 0 24px rgba(42, 157, 143, 0.2);
--tupa-glow-sand: 0 0 12px rgba(233, 196, 106, 0.35), 0 0 24px rgba(233, 196, 106, 0.2);
--tupa-glow-purple: 0 0 12px rgba(80, 110, 255, 0.2);
--tupa-glow-violet: 0 0 12px rgba(127, 90, 240, 0.2);
--tupa-glow-orange: 0 0 12px rgba(244, 162, 97, 0.25);
--tupa-glow-gradient: 0 0 16px rgba(244, 162, 97, 0.28), 0 0 32px rgba(42, 157, 143, 0.14);
/* === RADIUS === */
--tupa-radius-sm: 10px;
--tupa-radius-md: 14px;
--tupa-radius-lg: 18px;
--tupa-radius-xl: 24px;
--tupa-radius-full: 999px;
/* === SHADOWS === */
--tupa-shadow-sm: 0 2px 8px rgba(3, 8, 20, 0.35);
--tupa-shadow-md: 0 6px 18px rgba(3, 8, 20, 0.4);
--tupa-shadow-lg: 0 12px 32px rgba(3, 8, 20, 0.46);
--tupa-shadow-glow: 0 6px 20px rgba(244, 162, 97, 0.22);
--tupa-overlay-dark: #000000b3;
/* === SPACING & MOTION === */
--space-xs: 0.375rem;
--space-sm: 0.5rem;
--space-md: 0.75rem;
--space-lg: 1rem;
--space-xl: 1.5rem;
--tupa-transition-fast: 0.16s ease;
--tupa-transition-normal: 0.24s ease;
--tupa-transition-slow: 0.34s ease;
/* === STATES === */
--tupa-focus-ring: 2px solid #7dd3fc;
--tupa-sticky-actions-bg: rgba(21, 27, 36, 0.92);
/* Text on brand/gradient surfaces — always white regardless of theme */
--tupa-text-on-brand: #ffffff;
/* ── DEPRECATED legacy aliases (Phase 5B-6: zero active consumers confirmed) ──
These tokens have no active var() consumers as of Phase 5B-6.
They are retained only for backward compatibility with stale cached CSS
or any untracked external consumer.
DO NOT introduce new usages. Use the canonical semantic tokens:
--tupa-orange → --tupa-coral
--tupa-purple → --tupa-teal
--tupa-violet → --tupa-teal
Scheduled for removal in Phase 5E (final brand release-gate audit). */
--tupa-orange: var(--tupa-coral);
--tupa-purple: var(--tupa-teal);
--tupa-violet: var(--tupa-teal);
}
/* Resolve aliases at each theme scope so light values are not precomputed on :root. */
:root,
.theme-playful {
/* === SEMANTIC THEME CONTRACT ===
* These compatibility defaults resolve to the current production theme.
* Theme V2 overrides the same truthful role names only inside its root gate.
*/
--tupa-brand-primary: var(--tupa-teal);
--tupa-brand-primary-strong: var(--tupa-teal);
--tupa-brand-primary-soft: var(--tupa-surface-overlay);
--tupa-brand-secondary: var(--tupa-coral);
--tupa-brand-secondary-strong: var(--tupa-terracotta);
--tupa-brand-secondary-soft: var(--tupa-status-warning-surface);
--tupa-page-canvas: var(--tupa-bg-primary);
--tupa-secondary-canvas: var(--tupa-bg-secondary);
--tupa-surface-1: var(--tupa-surface-glass);
--tupa-surface-2: var(--tupa-bg-secondary);
--tupa-surface-elevated: var(--tupa-bg-elevated);
--tupa-surface-interactive: var(--tupa-surface-glass);
--tupa-surface-selected: var(--tupa-surface-overlay);
--tupa-text-disabled: var(--tupa-text-muted);
--tupa-text-on-action: var(--tupa-text-on-brand);
--tupa-border-interactive: var(--tupa-border-medium);
--tupa-border-selected: 2px solid var(--tupa-coral);
--tupa-control-selected-border: 1px solid var(--tupa-coral);
--tupa-navigation-background: var(--tupa-surface-glass);
--tupa-navigation-selected: var(--tupa-coral);
--tupa-navigation-selected-surface: var(--tupa-surface-overlay);
--tupa-navigation-selected-strong-surface: var(--tupa-gradient-primary);
--tupa-navigation-indicator: var(--tupa-gradient-primary);
--tupa-navigation-text: var(--tupa-text-secondary);
--tupa-input-background: var(--tupa-surface-glass);
--tupa-input-border: var(--tupa-border-subtle);
--tupa-input-hover: var(--tupa-surface-overlay);
--tupa-input-focus: rgba(42, 157, 143, 0.6);
--tupa-input-disabled: var(--tupa-surface-glass);
--tupa-input-focus-shadow: var(--tupa-glow-teal);
--tupa-input-resting-border-colour: rgba(42, 157, 143, 0.2);
--tupa-input-error-border-colour: rgba(255, 77, 77, 0.6);
--tupa-input-error-text: rgba(255, 77, 77, 0.9);
--tupa-error-surface-soft: rgba(255, 77, 77, 0.1);
--tupa-error-border-soft: 1px solid rgba(255, 77, 77, 0.3);
--tupa-modal-surface: var(--tupa-bg-primary);
--tupa-sheet-surface: var(--tupa-bg-primary);
--tupa-overlay-backdrop: rgba(0, 0, 0, 0.7);
--tupa-sheet-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
--tupa-success: var(--tupa-status-success);
--tupa-warning: var(--tupa-status-warning);
--tupa-danger: var(--tupa-status-error);
--tupa-info: var(--tupa-status-info);
--tupa-shadow-small: var(--tupa-shadow-sm);
--tupa-shadow-medium: var(--tupa-shadow-md);
--tupa-shadow-large: var(--tupa-shadow-lg);
--tupa-radius-small: var(--tupa-radius-sm);
--tupa-radius-medium: var(--tupa-radius-md);
--tupa-radius-large: var(--tupa-radius-lg);
--tupa-radius-sheet: var(--tupa-radius-xl);
--tupa-motion-fast: var(--tupa-transition-fast);
--tupa-motion-normal: var(--tupa-transition-normal);
--tupa-action-primary-background: var(--tupa-gradient-primary);
--tupa-action-primary-text: var(--tupa-text-on-brand);
--tupa-action-secondary-background: var(--tupa-gradient-secondary);
--tupa-action-secondary-text: var(--tupa-text-on-brand);
--tupa-avatar-background: var(--tupa-gradient-primary);
--tupa-interactive-hover-transform: translateY(-2px);
--tupa-navigation-shadow: 0 -10px 28px rgba(3, 8, 20, 0.38);
}
/* === UTILITY CLASSES === */
/* Background utilities */
.tupa-bg-primary {
background: var(--tupa-bg-primary);
}
.tupa-bg-secondary {
background: var(--tupa-bg-secondary);
}
.tupa-bg-gradient {
background: var(--tupa-gradient-bg);
}
.tupa-bg-gradient-primary {
background: var(--tupa-gradient-primary);
}
/* Surface with backdrop blur glass effect */
.tupa-surface-glass {
background: var(--tupa-surface-glass);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Text utilities */
.tupa-text-primary {
color: var(--tupa-text-primary);
}
.tupa-text-secondary {
color: var(--tupa-text-secondary);
}
.tupa-text-gradient {
background: var(--tupa-gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Border utilities */
.tupa-border-glow {
border: var(--tupa-border-medium);
box-shadow: var(--tupa-glow-purple);
}
.tupa-border-gradient {
position: relative;
background: var(--tupa-bg-secondary);
border-radius: var(--tupa-radius-md);
}
.tupa-border-gradient::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: var(--tupa-gradient-primary);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* Glow effects */
.tupa-glow-violet {
box-shadow: var(--tupa-glow-violet);
}
.tupa-glow-purple {
box-shadow: var(--tupa-glow-purple);
}
.tupa-glow-orange {
box-shadow: var(--tupa-glow-orange);
}
.tupa-glow-gradient {
box-shadow: var(--tupa-glow-gradient);
}
/* Hover glow effect */
.tupa-hover-glow {
transition: box-shadow var(--tupa-transition-normal);
}
.tupa-hover-glow:hover {
box-shadow: var(--tupa-glow-gradient);
}
/* === COMPONENT BASE STYLES === */
/* Card base */
.tupa-card {
background: var(--tupa-surface-glass);
border: var(--tupa-border-subtle);
border-radius: var(--tupa-radius-md);
padding: 1.5rem;
box-shadow: var(--tupa-shadow-md);
transition: all var(--tupa-transition-normal);
}
.tupa-card:hover {
border-color: rgba(42, 157, 143, 0.6);
box-shadow: var(--tupa-shadow-glow);
}
/* Button base */
.tupa-button {
padding: 0.75rem 1.5rem;
border-radius: var(--tupa-radius-md);
font-weight: 600;
cursor: pointer;
transition: all var(--tupa-transition-normal);
border: none;
outline: none;
}
.tupa-button-primary {
background: var(--tupa-gradient-primary);
color: var(--tupa-text-primary);
box-shadow: var(--tupa-glow-gradient);
}
.tupa-button-primary:hover {
transform: translateY(-2px);
box-shadow: 0 0 30px rgba(42, 157, 143, 0.6), 0 0 50px rgba(244, 162, 97, 0.3);
}
.tupa-button-secondary {
background: transparent;
color: var(--tupa-text-primary);
border: var(--tupa-border-medium);
}
.tupa-button-secondary:hover {
background: var(--tupa-surface-overlay);
border-color: rgba(244, 162, 97, 0.6);
box-shadow: var(--tupa-glow-orange);
}
/* Input base */
.tupa-input {
background: var(--tupa-surface-glass);
border: var(--tupa-border-subtle);
border-radius: var(--tupa-radius-sm);
padding: 0.75rem 1rem;
color: var(--tupa-text-primary);
transition: all var(--tupa-transition-normal);
outline: none;
}
.tupa-input:focus {
border-color: rgba(42, 157, 143, 0.6);
box-shadow: var(--tupa-glow-teal);
}
.tupa-input::placeholder {
color: var(--tupa-text-muted);
}
/* Navbar base */
.tupa-navbar {
background: var(--tupa-surface-glass);
border-bottom: var(--tupa-border-subtle);
padding: 1rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: var(--tupa-shadow-md);
}
/* Accent line (decorative gradient line) */
.tupa-accent-line {
height: 2px;
background: var(--tupa-gradient-primary);
box-shadow: var(--tupa-glow-gradient);
margin: 1rem 0;
}
/* Gradient text animation */
@keyframes gradient-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.tupa-text-gradient-animated {
background: linear-gradient(90deg, #1B7A6E, #2A9D8F, #F4A261, #2A9D8F, #1B7A6E);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-shift 3s ease infinite;
}
/* Pulse glow animation for attention */
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 10px rgba(42, 157, 143, 0.3);
}
50% {
box-shadow: 0 0 20px rgba(244, 162, 97, 0.5), 0 0 40px rgba(42, 157, 143, 0.3);
}
}
.tupa-pulse-glow {
animation: pulse-glow 2s ease-in-out infinite;
}
:focus-visible {
outline: var(--tupa-focus-ring);
outline-offset: 2px;
}
/* TUPA Light Theme
* Warm, welcoming colors perfect for families and pet lovers
* Soft cream backgrounds with coral and teal accents
*/
.theme-playful {
/* === CORE BRAND COLORS === */
/* Warm, inviting backgrounds */
--tupa-bg-primary: #fcfaf7;
--tupa-bg-secondary: #f4efe8;
--tupa-bg-elevated: #FFFFFF;
/* Warm, friendly accent colors */
--tupa-coral: #F4A261;
--tupa-teal: #2A9D8F;
--tupa-sand: #E9C46A;
--tupa-terracotta: #E76F51;
/* === SURFACE COLORS === */
--tupa-surface-dark: #f5efe9f2;
--tupa-surface-glass: #ffffffeb;
--tupa-surface-overlay: #2a9d8f14;
/* === TEXT COLORS === */
--tupa-text-primary: #1f2937;
--tupa-text-secondary: #1f2937c7;
--tupa-text-tertiary: #1f29379e;
--tupa-text-muted: #1f293773;
--tupa-text-accent: #9a3412;
/* Semantic */
--tupa-status-success: #16a34a;
--tupa-status-success-surface: #16a34a1f;
--tupa-status-info: #0284c7;
--tupa-status-info-surface: #0284c71f;
--tupa-status-warning: #d97706;
--tupa-status-warning-surface: #d977061f;
--tupa-status-warning-text: #111827;
--tupa-status-error: #dc2626;
--tupa-status-error-surface: #dc26261f;
--tupa-status-error-text: #991b1b;
/* === GRADIENT DEFINITIONS === */
--tupa-gradient-primary: linear-gradient(135deg, #F4A261 0%, #E76F51 50%, #E9C46A 100%);
--tupa-gradient-secondary: linear-gradient(90deg, #2A9D8F 0%, #F4A261 100%);
--tupa-gradient-accent: linear-gradient(180deg, #F4A261 0%, #E76F51 100%);
--tupa-gradient-bg: linear-gradient(135deg, #fcfaf7 0%, #f4efe8 50%, #fcfaf7 100%);
/* === BORDER & GLOW EFFECTS === */
--tupa-border-subtle-colour: #78829638;
--tupa-border-strong-colour: rgba(120, 130, 150, 0.38);
--tupa-border-subtle: 1px solid var(--tupa-border-subtle-colour);
--tupa-border-medium: 1px solid var(--tupa-border-strong-colour);
--tupa-border-bright: 1px solid rgba(244, 162, 97, 0.5);
/* Soft glow effects for family-friendly feel */
--tupa-glow-coral: 0 0 12px rgba(244, 162, 97, 0.24), 0 0 24px rgba(244, 162, 97, 0.13);
--tupa-glow-teal: 0 0 12px rgba(42, 157, 143, 0.24), 0 0 24px rgba(42, 157, 143, 0.13);
--tupa-glow-sand: 0 0 12px rgba(233, 196, 106, 0.24), 0 0 24px rgba(233, 196, 106, 0.13);
--tupa-glow-purple: 0 0 12px rgba(80, 110, 255, 0.14);
--tupa-glow-violet: 0 0 12px rgba(80, 110, 255, 0.14);
--tupa-glow-orange: 0 0 12px rgba(244, 162, 97, 0.2);
--tupa-glow-gradient: 0 0 16px rgba(244, 162, 97, 0.25), 0 0 32px rgba(42, 157, 143, 0.12);
/* === SPACING & SIZING === */
--tupa-radius-sm: 10px;
--tupa-radius-md: 14px;
--tupa-radius-lg: 18px;
--tupa-radius-xl: 24px;
--tupa-radius-full: 999px;
/* === SHADOWS === */
--tupa-shadow-sm: 0 2px 8px rgba(38, 70, 83, 0.08);
--tupa-shadow-md: 0 6px 16px rgba(38, 70, 83, 0.12);
--tupa-shadow-lg: 0 12px 28px rgba(38, 70, 83, 0.16);
--tupa-shadow-glow: 0 4px 20px rgba(244, 162, 97, 0.25);
--tupa-overlay-dark: rgba(0, 0, 0, 0.7);
/* === TRANSITIONS === */
--space-xs: 0.375rem;
--space-sm: 0.5rem;
--space-md: 0.75rem;
--space-lg: 1rem;
--space-xl: 1.5rem;
--tupa-transition-fast: 0.16s ease;
--tupa-transition-normal: 0.24s ease;
--tupa-transition-slow: 0.34s ease;
--tupa-focus-ring: 2px solid #0ea5e9;
--tupa-sticky-actions-bg: rgba(255, 255, 255, 0.92);
/* ── DEPRECATED legacy aliases (Phase 5B-6: zero active consumers confirmed) ──
These tokens have no active var() consumers as of Phase 5B-6.
DO NOT introduce new usages. Use canonical tokens instead:
--tupa-orange → --tupa-coral
--tupa-purple → --tupa-teal
--tupa-violet → --tupa-teal
Scheduled for removal in Phase 5E. */
--tupa-orange: #F4A261;
--tupa-purple: #2A9D8F;
--tupa-violet: #2A9D8F;
}
/* Additional light theme overrides */
.theme-playful body {
background: var(--tupa-gradient-bg);
}
.theme-playful .tupa-card {
background: var(--tupa-surface-glass);
box-shadow: var(--tupa-shadow-md);
}
.theme-playful .tupa-card:hover {
transform: translateY(-2px);
box-shadow: var(--tupa-shadow-glow);
}
.theme-playful .tupa-button-primary {
background: var(--tupa-gradient-primary);
color: #FFFFFF;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.theme-playful .tupa-button-primary:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 6px 25px rgba(255, 179, 71, 0.4);
}
/* Input fields - bright and friendly */
.theme-playful .tupa-input,
.theme-playful input,
.theme-playful select,
.theme-playful textarea {
background: #FFFFFF;
border: 2px solid rgba(183, 148, 246, 0.3);
color: #2D2D2D;
}
.theme-playful .tupa-input:focus,
.theme-playful input:focus,
.theme-playful select:focus,
.theme-playful textarea:focus {
border-color: rgba(183, 148, 246, 0.6);
box-shadow: 0 0 0 3px rgba(183, 148, 246, 0.1);
outline: none;
}
.theme-playful .tupa-input::placeholder,
.theme-playful input::placeholder,
.theme-playful select::placeholder,
.theme-playful textarea::placeholder {
color: rgba(45, 45, 45, 0.4);
}
/* Playful accent line with multiple colors */
.theme-playful .tupa-accent-line {
height: 3px;
background: var(--tupa-gradient-primary);
box-shadow: 0 2px 8px rgba(255, 179, 71, 0.3);
border-radius: 3px;
}
/* Cheerful text gradient */
.theme-playful .tupa-text-gradient {
background: var(--tupa-gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Friendly navbar */
.theme-playful .tupa-navbar {
background: rgba(255, 255, 255, 0.95);
border-bottom: 2px solid rgba(183, 148, 246, 0.2);
box-shadow: 0 2px 12px rgba(183, 148, 246, 0.15);
backdrop-filter: blur(10px);
}
/* Fun bounce animation for buttons */
@keyframes playful-bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
.theme-playful .tupa-button-primary:active {
animation: playful-bounce 0.3s ease;
}
/* Colorful borders for sections */
.theme-playful section,
.theme-playful .tupa-card {
border: 2px solid transparent;
background-image:
linear-gradient(var(--tupa-bg-elevated), var(--tupa-bg-elevated)),
var(--tupa-gradient-secondary);
background-origin: border-box;
background-clip: padding-box, border-box;
}
/* Fun pulse animation for attention */
@keyframes playful-pulse {
0%, 100% {
box-shadow: 0 0 10px rgba(183, 148, 246, 0.2);
}
50% {
box-shadow: 0 0 20px rgba(255, 179, 71, 0.4);
}
}
.theme-playful .tupa-pulse-glow {
animation: playful-pulse 2s ease-in-out infinite;
}
/* Bright, friendly scrollbar */
.theme-playful ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.theme-playful ::-webkit-scrollbar-track {
background: rgba(183, 148, 246, 0.1);
border-radius: 10px;
}
.theme-playful ::-webkit-scrollbar-thumb {
background: var(--tupa-gradient-secondary);
border-radius: 10px;
}
.theme-playful ::-webkit-scrollbar-thumb:hover {
background: var(--tupa-gradient-primary);
}
/*
* TUPA Theme V2
*
* This layer is inert unless REACT_APP_FF_THEME_V2 is exactly "true" and
* index.js applies data-tupa-theme-v2="true" to . Existing light/dark
* persistence remains owned by the body theme-playful class and data-theme.
*/
html[data-tupa-theme-v2="true"] {
color-scheme: dark;
/* Brand anchors taken from the official TUPA identity. */
--tupa-tone-light: #FFFFFF;
--tupa-tone-dark: #000000;
--tupa-brand-primary: #7B3FB1;
--tupa-brand-primary-strong: #5A2D82;
--tupa-brand-primary-soft: color-mix(in srgb, var(--tupa-brand-primary) 20%, transparent);
--tupa-brand-secondary: #FF8D23;
--tupa-brand-secondary-strong: #C45100;
--tupa-brand-secondary-soft: color-mix(in srgb, var(--tupa-brand-secondary) 18%, transparent);
--tupa-brand-secondary-text: var(--tupa-brand-secondary);
/* Dark hierarchy. */
--tupa-page-canvas: #101116;
--tupa-secondary-canvas: color-mix(in srgb, var(--tupa-page-canvas) 96%, var(--tupa-tone-light));
--tupa-surface-1: color-mix(in srgb, var(--tupa-page-canvas) 93%, var(--tupa-tone-light));
--tupa-surface-2: color-mix(in srgb, var(--tupa-page-canvas) 90%, var(--tupa-tone-light));
--tupa-surface-elevated: color-mix(in srgb, var(--tupa-page-canvas) 86%, var(--tupa-tone-light));
--tupa-surface-interactive: color-mix(in srgb, var(--tupa-page-canvas) 89%, var(--tupa-tone-light));
--tupa-surface-selected: color-mix(in srgb, var(--tupa-surface-2) 78%, var(--tupa-brand-primary));
--tupa-text-primary: #F8F7FB;
--tupa-text-secondary: color-mix(in srgb, var(--tupa-text-primary) 78%, var(--tupa-page-canvas));
--tupa-text-tertiary: color-mix(in srgb, var(--tupa-text-primary) 62%, var(--tupa-page-canvas));
--tupa-text-muted: color-mix(in srgb, var(--tupa-text-primary) 52%, var(--tupa-page-canvas));
--tupa-text-disabled: color-mix(in srgb, var(--tupa-text-primary) 38%, var(--tupa-page-canvas));
--tupa-text-on-brand: var(--tupa-tone-light);
--tupa-text-on-action: var(--tupa-tone-light);
--tupa-border-subtle-colour: color-mix(in srgb, var(--tupa-text-primary) 12%, transparent);
--tupa-border-strong-colour: color-mix(in srgb, var(--tupa-text-primary) 24%, transparent);
--tupa-border-selected-colour: color-mix(in srgb, var(--tupa-brand-primary) 58%, var(--tupa-tone-light));
--tupa-status-success: #55C987;
--tupa-status-warning: #F5B942;
--tupa-status-error: #F06B78;
--tupa-status-info: #61B6F2;
--tupa-shadow-small: 0 2px 8px rgba(4, 5, 10, 0.24);
--tupa-shadow-medium: 0 8px 24px rgba(4, 5, 10, 0.34);
--tupa-shadow-large: 0 18px 48px rgba(4, 5, 10, 0.44);
--tupa-overlay-backdrop: rgba(5, 6, 10, 0.76);
--tupa-navigation-background: color-mix(in srgb, var(--tupa-page-canvas) 92%, transparent);
--tupa-navigation-selected: color-mix(in srgb, var(--tupa-brand-primary) 46%, var(--tupa-tone-light));
--tupa-navigation-selected-surface: color-mix(in srgb, var(--tupa-brand-primary) 22%, transparent);
--tupa-navigation-selected-strong-surface: var(--tupa-brand-primary);
--tupa-navigation-indicator: var(--tupa-navigation-selected);
--tupa-navigation-text: var(--tupa-text-secondary);
--tupa-navigation-shadow: var(--tupa-shadow-medium);
--tupa-input-background: var(--tupa-surface-interactive);
--tupa-input-border: 1px solid var(--tupa-border-strong-colour);
--tupa-input-hover: var(--tupa-surface-elevated);
--tupa-input-focus: var(--tupa-navigation-selected);
--tupa-input-disabled: var(--tupa-surface-2);
--tupa-input-focus-shadow: 0 0 0 3px var(--tupa-brand-primary-soft);
--tupa-input-resting-border-colour: var(--tupa-border-strong-colour);
--tupa-input-error-border-colour: var(--tupa-status-error);
--tupa-input-error-text: var(--tupa-status-error);
--tupa-modal-surface: var(--tupa-surface-elevated);
--tupa-sheet-surface: var(--tupa-surface-1);
--tupa-sheet-shadow: var(--tupa-shadow-large);
--tupa-focus-ring: 3px solid var(--tupa-brand-secondary);
}
html[data-tupa-theme-v2="true"] body.theme-playful {
color-scheme: light;
/* Light mode uses the same brand anchors with its own warm-neutral hierarchy. */
--tupa-brand-secondary-text: #B84700;
--tupa-page-canvas: #F7F4F0;
--tupa-secondary-canvas: color-mix(in srgb, var(--tupa-page-canvas) 97%, var(--tupa-tone-dark));
--tupa-surface-1: color-mix(in srgb, var(--tupa-page-canvas) 18%, var(--tupa-tone-light));
--tupa-surface-2: color-mix(in srgb, var(--tupa-page-canvas) 94%, var(--tupa-tone-dark));
--tupa-surface-elevated: var(--tupa-tone-light);
--tupa-surface-interactive: color-mix(in srgb, var(--tupa-page-canvas) 88%, var(--tupa-tone-light));
--tupa-surface-selected: color-mix(in srgb, var(--tupa-brand-primary) 11%, var(--tupa-page-canvas));
--tupa-text-primary: #241F2A;
--tupa-text-secondary: color-mix(in srgb, var(--tupa-text-primary) 78%, var(--tupa-page-canvas));
--tupa-text-tertiary: color-mix(in srgb, var(--tupa-text-primary) 66%, var(--tupa-page-canvas));
--tupa-text-muted: color-mix(in srgb, var(--tupa-text-primary) 64%, var(--tupa-page-canvas));
--tupa-text-disabled: color-mix(in srgb, var(--tupa-text-primary) 42%, var(--tupa-page-canvas));
--tupa-border-subtle-colour: color-mix(in srgb, var(--tupa-text-primary) 12%, transparent);
--tupa-border-strong-colour: color-mix(in srgb, var(--tupa-text-primary) 24%, transparent);
--tupa-border-selected-colour: var(--tupa-brand-primary);
--tupa-status-success: #177245;
--tupa-status-warning: #8A5200;
--tupa-status-error: #B42336;
--tupa-status-info: #155E9A;
--tupa-shadow-small: 0 2px 8px rgba(49, 36, 58, 0.08);
--tupa-shadow-medium: 0 8px 24px rgba(49, 36, 58, 0.12);
--tupa-shadow-large: 0 18px 48px rgba(49, 36, 58, 0.18);
--tupa-overlay-backdrop: rgba(24, 17, 29, 0.55);
--tupa-navigation-background: color-mix(in srgb, var(--tupa-surface-1) 94%, transparent);
--tupa-navigation-selected: var(--tupa-brand-primary);
--tupa-navigation-selected-surface: color-mix(in srgb, var(--tupa-brand-primary) 10%, transparent);
--tupa-navigation-selected-strong-surface: var(--tupa-brand-primary);
--tupa-navigation-indicator: var(--tupa-brand-primary);
--tupa-navigation-text: var(--tupa-text-secondary);
--tupa-input-background: var(--tupa-surface-elevated);
--tupa-input-border: 1px solid var(--tupa-border-strong-colour);
--tupa-input-hover: var(--tupa-surface-interactive);
--tupa-input-focus: var(--tupa-brand-primary);
--tupa-input-disabled: var(--tupa-surface-2);
--tupa-input-focus-shadow: 0 0 0 3px var(--tupa-brand-primary-soft);
--tupa-input-resting-border-colour: var(--tupa-border-strong-colour);
--tupa-input-error-border-colour: var(--tupa-status-error);
--tupa-input-error-text: var(--tupa-status-error);
--tupa-modal-surface: var(--tupa-surface-elevated);
--tupa-sheet-surface: var(--tupa-surface-1);
--tupa-sheet-shadow: var(--tupa-shadow-large);
--tupa-focus-ring: 3px solid var(--tupa-brand-primary);
/* Compatibility for the existing light-theme readability layer. */
--page-bg: var(--tupa-page-canvas);
--page-text: var(--tupa-text-primary);
--text-muted: var(--tupa-text-secondary);
--border: var(--tupa-border-subtle-colour);
--focus: var(--tupa-brand-primary);
--card-bg-default: var(--tupa-surface-1);
--card-bg-yellow: var(--tupa-surface-2);
--card-bg-purple: var(--tupa-surface-selected);
--card-bg-orange: var(--tupa-brand-secondary-soft);
--input-bg: var(--tupa-input-background);
--input-text: var(--tupa-text-primary);
--input-placeholder: var(--tupa-text-muted);
}
/* Secondary surfaces keep their existing data, actions and compatibility routes. */
html[data-tupa-theme-v2="true"] .tupa-community-surface {
--tupa-community-action: var(--tupa-action-primary-background);
min-width: 0;
overflow-wrap: anywhere;
}
html[data-tupa-theme-v2="true"] .tupa-section-toggle,
html[data-tupa-theme-v2="true"] .tupa-community-tile,
html[data-tupa-theme-v2="true"] .tupa-community-card {
background: var(--tupa-surface-1) !important;
color: var(--tupa-text-primary) !important;
border: var(--tupa-border-subtle) !important;
box-shadow: none !important;
transform: none !important;
}
html[data-tupa-theme-v2="true"] .tupa-section-toggle {
min-height: 48px;
text-align: left !important;
}
html[data-tupa-theme-v2="true"] .tupa-community-navigation {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)) !important;
}
html[data-tupa-theme-v2="true"] .tupa-community-tile {
min-height: 88px !important;
padding: 0.75rem !important;
}
html[data-tupa-theme-v2="true"] .tupa-community-tile[aria-pressed="true"],
html[data-tupa-theme-v2="true"] .tupa-conversation-row[data-selected="true"] {
background: var(--tupa-surface-selected) !important;
border-color: var(--tupa-border-selected-colour) !important;
}
html[data-tupa-theme-v2="true"] .tupa-community-surface h3,
html[data-tupa-theme-v2="true"] .tupa-community-card strong,
html[data-tupa-theme-v2="true"] .tupa-conversation-row strong,
html[data-tupa-theme-v2="true"] .tupa-conversation-title,
html[data-tupa-theme-v2="true"] .tupa-owner-profile-heading {
color: var(--tupa-text-primary) !important;
}
html[data-tupa-theme-v2="true"] .tupa-rehoming-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}
html[data-tupa-theme-v2="true"] .tupa-community-unread,
html[data-tupa-theme-v2="true"] .tupa-community-avatar,
html[data-tupa-theme-v2="true"] .tupa-message-bubble[data-outgoing="true"],
html[data-tupa-theme-v2="true"] .tupa-profile-avatar {
background: var(--tupa-brand-primary) !important;
color: var(--tupa-text-on-brand) !important;
box-shadow: none !important;
}
html[data-tupa-theme-v2="true"] .tupa-message-bubble > div {
opacity: 1 !important;
font-size: 0.75rem !important;
}
html[data-tupa-theme-v2="true"] .tupa-conversation-row[data-unread="true"] {
border-inline-start: 3px solid var(--tupa-navigation-selected);
}
html[data-tupa-theme-v2="true"] .tupa-community-surface button,
html[data-tupa-theme-v2="true"] .tupa-discover-page button,
html[data-tupa-theme-v2="true"] .tupa-notification-center button,
html[data-tupa-theme-v2="true"] .tupa-notification-more summary {
min-height: 44px !important;
min-width: 44px;
}
html[data-tupa-theme-v2="true"] .tupa-owner-profile {
--tupa-profile-success: var(--tupa-status-success);
}
html[data-tupa-theme-v2="true"] .tupa-owner-profile-details {
padding: clamp(0.75rem, 3vw, 1.5rem) !important;
border: var(--tupa-border-subtle) !important;
box-shadow: none !important;
}
html[data-tupa-theme-v2="true"] .tupa-owner-profile-summary {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)) !important;
}
html[data-tupa-theme-v2="true"] .tupa-owner-profile-save-note {
background: var(--tupa-surface-2) !important;
border-left: var(--tupa-border-subtle) !important;
}
html[data-tupa-theme-v2="true"] .tupa-profile-home {
gap: 1.5rem !important;
}
html[data-tupa-theme-v2="true"] .tupa-profile-row {
min-height: 56px !important;
padding: 0.8rem 0.5rem !important;
border-radius: var(--tupa-radius-sm);
}
html[data-tupa-theme-v2="true"] .tupa-profile-row:hover,
html[data-tupa-theme-v2="true"] .tupa-community-tile:not([aria-pressed="true"]):hover {
background: var(--tupa-surface-interactive) !important;
}
html[data-tupa-theme-v2="true"] .tupa-notification-center {
height: 100dvh !important;
background: var(--tupa-sheet-surface) !important;
box-shadow: var(--tupa-sheet-shadow) !important;
}
html[data-tupa-theme-v2="true"] .tupa-notification-header {
padding-top: max(1rem, env(safe-area-inset-top, 0px)) !important;
max-height: 55dvh;
overflow-y: auto;
flex-shrink: 0;
}
html[data-tupa-theme-v2="true"] .tupa-notification-header button[aria-pressed="true"] {
background: var(--tupa-brand-primary) !important;
color: var(--tupa-text-on-brand) !important;
}
html[data-tupa-theme-v2="true"] .tupa-notification-inbox {
min-height: 0;
padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
}
html[data-tupa-theme-v2="true"] .tupa-notification-item {
padding: 1rem !important;
margin-bottom: 0.5rem;
border: none !important;
border-inline-start: 3px solid transparent !important;
}
html[data-tupa-theme-v2="true"] .tupa-notification-item[data-unread="true"] {
border-inline-start-color: var(--tupa-navigation-selected) !important;
}
html[data-tupa-theme-v2="true"] .tupa-notification-title {
font-size: 1rem !important;
}
html[data-tupa-theme-v2="true"] .tupa-notification-message {
margin-top: 0.4rem !important;
font-size: 0.875rem !important;
line-height: 1.6 !important;
}
html[data-tupa-theme-v2="true"] .tupa-notification-more summary {
padding: 0.65rem 0.5rem;
color: var(--tupa-text-secondary);
font-size: 0.8rem;
cursor: pointer;
}
html[data-tupa-theme-v2="true"] .tupa-discover-page {
gap: 1.5rem !important;
}
html[data-tupa-theme-v2="true"] .tupa-discover-relevance {
font-size: 1.1rem !important;
line-height: 1.5;
}
html[data-tupa-theme-v2="true"] .tupa-discover-disclosure {
background: var(--tupa-surface-2) !important;
border: none !important;
font-size: 0.875rem !important;
line-height: 1.6 !important;
}
html[data-tupa-theme-v2="true"] .tupa-discover-card {
display: flex !important;
flex-direction: column;
box-shadow: none !important;
}
html[data-tupa-theme-v2="true"] .tupa-discover-card > button {
margin-top: auto;
}
html[data-tupa-theme-v2="true"] .tupa-discover-product-grid {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)) !important;
gap: 1rem !important;
}
/* Compatibility bridge for established components. Brand-specific legacy names
* remain truthful and are not repurposed; only generic role tokens are mapped. */
html[data-tupa-theme-v2="true"],
html[data-tupa-theme-v2="true"] body.theme-playful {
--tupa-bg-primary: var(--tupa-page-canvas);
--tupa-bg-secondary: var(--tupa-secondary-canvas);
--tupa-bg-elevated: var(--tupa-surface-elevated);
--tupa-surface-dark: var(--tupa-surface-2);
--tupa-surface-glass: var(--tupa-surface-1);
--tupa-surface-overlay: var(--tupa-surface-selected);
--tupa-text-accent: var(--tupa-navigation-selected);
--tupa-border-subtle: 1px solid var(--tupa-border-subtle-colour);
--tupa-border-medium: 1px solid var(--tupa-border-strong-colour);
--tupa-border-bright: 1px solid var(--tupa-border-selected-colour);
--tupa-border-interactive: var(--tupa-border-medium);
--tupa-border-selected: 2px solid var(--tupa-border-selected-colour);
--tupa-control-selected-border: 1px solid var(--tupa-border-selected-colour);
--tupa-status-success-surface: color-mix(in srgb, var(--tupa-status-success) 15%, transparent);
--tupa-status-warning-surface: color-mix(in srgb, var(--tupa-status-warning) 15%, transparent);
--tupa-status-error-surface: color-mix(in srgb, var(--tupa-status-error) 15%, transparent);
--tupa-status-info-surface: color-mix(in srgb, var(--tupa-status-info) 15%, transparent);
--tupa-error-surface-soft: var(--tupa-status-error-surface);
--tupa-error-border-soft: 1px solid var(--tupa-status-error);
--tupa-gradient-primary: var(--tupa-brand-secondary-strong);
--tupa-gradient-secondary: linear-gradient(135deg, var(--tupa-brand-primary), var(--tupa-brand-primary-strong));
--tupa-gradient-accent: var(--tupa-brand-secondary);
--tupa-gradient-bg: var(--tupa-page-canvas);
--tupa-shadow-sm: var(--tupa-shadow-small);
--tupa-shadow-md: var(--tupa-shadow-medium);
--tupa-shadow-lg: var(--tupa-shadow-large);
--tupa-shadow-glow: var(--tupa-shadow-medium);
--tupa-glow-coral: var(--tupa-shadow-small);
--tupa-glow-teal: var(--tupa-shadow-small);
--tupa-glow-sand: var(--tupa-shadow-small);
--tupa-glow-purple: var(--tupa-shadow-medium);
--tupa-glow-violet: var(--tupa-shadow-medium);
--tupa-glow-orange: var(--tupa-shadow-small);
--tupa-glow-gradient: var(--tupa-shadow-medium);
--tupa-overlay-dark: var(--tupa-overlay-backdrop);
--tupa-action-primary-background: var(--tupa-brand-secondary-strong);
--tupa-action-primary-text: var(--tupa-text-on-action);
--tupa-action-secondary-background: var(--tupa-gradient-secondary);
--tupa-action-secondary-text: var(--tupa-text-on-brand);
--tupa-avatar-background: var(--tupa-gradient-secondary);
--tupa-interactive-hover-transform: none;
--tupa-sticky-actions-bg: color-mix(in srgb, var(--tupa-surface-1) 94%, transparent);
--tupa-success: var(--tupa-status-success);
--tupa-warning: var(--tupa-status-warning);
--tupa-danger: var(--tupa-status-error);
--tupa-info: var(--tupa-status-info);
--tupa-radius-sm: 10px;
--tupa-radius-md: 14px;
--tupa-radius-lg: 18px;
--tupa-radius-xl: 24px;
--tupa-radius-small: var(--tupa-radius-sm);
--tupa-radius-medium: var(--tupa-radius-md);
--tupa-radius-large: var(--tupa-radius-lg);
--tupa-radius-sheet: var(--tupa-radius-xl);
--tupa-transition-fast: 0.16s ease;
--tupa-transition-normal: 0.24s ease;
--tupa-motion-fast: var(--tupa-transition-fast);
--tupa-motion-normal: var(--tupa-transition-normal);
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 0.75rem;
--space-lg: 1rem;
--space-xl: 1.5rem;
}
html[data-tupa-theme-v2="true"] body,
html[data-tupa-theme-v2="true"] #root {
background: var(--tupa-page-canvas);
}
html[data-tupa-theme-v2="true"] body {
color: var(--tupa-text-primary);
}
html[data-tupa-theme-v2="true"] :focus-visible {
outline: var(--tupa-focus-ring) !important;
outline-offset: 3px;
}
html[data-tupa-theme-v2="true"] .tupa-card-component {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html[data-tupa-theme-v2="true"] .tupa-card-gradient-border {
display: none;
}
html[data-tupa-theme-v2="true"] .tupa-button-component,
html[data-tupa-theme-v2="true"] .tupa-card-component,
html[data-tupa-theme-v2="true"] .tupa-navigation-item,
html[data-tupa-theme-v2="true"] .tupa-pet-hub-action-row {
letter-spacing: -0.005em;
}
html[data-tupa-theme-v2="true"] .tupa-button-component:hover,
html[data-tupa-theme-v2="true"] .tupa-card-component:hover {
transform: none;
}
html[data-tupa-theme-v2="true"] .tupa-input-control,
html[data-tupa-theme-v2="true"] .tupa-input,
html[data-tupa-theme-v2="true"] input:not([aria-hidden="true"]):where(
:not([type]),
[type="text"],
[type="email"],
[type="password"],
[type="search"],
[type="tel"],
[type="url"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="time"]
),
html[data-tupa-theme-v2="true"] select,
html[data-tupa-theme-v2="true"] textarea {
min-height: 48px;
border: var(--tupa-input-border) !important;
background: var(--tupa-input-background) !important;
color: var(--tupa-text-primary) !important;
box-shadow: none;
}
html[data-tupa-theme-v2="true"] .tupa-input-control[aria-invalid="true"],
html[data-tupa-theme-v2="true"] .tupa-input[aria-invalid="true"],
html[data-tupa-theme-v2="true"] input[aria-invalid="true"],
html[data-tupa-theme-v2="true"] select[aria-invalid="true"] {
border-color: var(--tupa-status-error) !important;
}
html[data-tupa-theme-v2="true"] .tupa-input-control:hover:not(:disabled),
html[data-tupa-theme-v2="true"] .tupa-input:hover:not(:disabled),
html[data-tupa-theme-v2="true"] input:not([aria-hidden="true"]):where(
:not([type]),
[type="text"],
[type="email"],
[type="password"],
[type="search"],
[type="tel"],
[type="url"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="time"]
):hover:not(:disabled),
html[data-tupa-theme-v2="true"] select:hover:not(:disabled),
html[data-tupa-theme-v2="true"] textarea:hover:not(:disabled) {
background: var(--tupa-input-hover) !important;
}
html[data-tupa-theme-v2="true"] .tupa-input-control:focus,
html[data-tupa-theme-v2="true"] .tupa-input:focus,
html[data-tupa-theme-v2="true"] input:not([aria-hidden="true"]):where(
:not([type]),
[type="text"],
[type="email"],
[type="password"],
[type="search"],
[type="tel"],
[type="url"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="time"]
):focus,
html[data-tupa-theme-v2="true"] select:focus,
html[data-tupa-theme-v2="true"] textarea:focus {
border-color: var(--tupa-input-focus) !important;
box-shadow: var(--tupa-input-focus-shadow) !important;
}
html[data-tupa-theme-v2="true"] .tupa-input-control:disabled,
html[data-tupa-theme-v2="true"] .tupa-input:disabled,
html[data-tupa-theme-v2="true"] input:disabled:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-tupa-theme-v2="true"] select:disabled,
html[data-tupa-theme-v2="true"] textarea:disabled {
background: var(--tupa-input-disabled) !important;
color: var(--tupa-text-disabled) !important;
cursor: not-allowed;
}
html[data-tupa-theme-v2="true"] .tupa-input-control::placeholder,
html[data-tupa-theme-v2="true"] .tupa-input::placeholder,
html[data-tupa-theme-v2="true"] input::placeholder,
html[data-tupa-theme-v2="true"] textarea::placeholder {
color: var(--tupa-text-muted) !important;
opacity: 1;
}
/* Remove historical playful-theme decoration only inside the V2 gate. */
html[data-tupa-theme-v2="true"] body.theme-playful section {
border-width: 0;
background-image: none;
}
html[data-tupa-theme-v2="true"] body.theme-playful .tupa-card,
html[data-tupa-theme-v2="true"] body.theme-playful .tupa-card-component {
border: var(--tupa-border-subtle);
background-image: none;
}
html[data-tupa-theme-v2="true"] body.theme-playful .tupa-button-primary:active,
html[data-tupa-theme-v2="true"] body.theme-playful .tupa-pulse-glow,
html[data-tupa-theme-v2="true"] .tupa-text-gradient-animated {
animation: none;
}
html[data-tupa-theme-v2="true"] body.theme-playful .tupa-navbar {
border-bottom: var(--tupa-border-subtle);
background: var(--tupa-navigation-background);
box-shadow: var(--tupa-shadow-small);
}
/* Shared navigation. */
html[data-tupa-theme-v2="true"] .tupa-navigation {
border-color: var(--tupa-border-subtle-colour) !important;
}
html[data-tupa-theme-v2="true"] .tupa-navigation-item {
transition: color var(--tupa-motion-fast), background var(--tupa-motion-fast);
}
html[data-tupa-theme-v2="true"] .tupa-navigation-item--action,
html[data-tupa-theme-v2="true"] .tupa-navigation-add {
filter: saturate(0.96);
}
html[data-tupa-theme-v2="true"] .tupa-navigation--bottom {
min-height: 72px;
}
/* Shared sheets and modal surfaces. */
html[data-tupa-theme-v2="true"] .tupa-feature-sheet-backdrop,
html[data-tupa-theme-v2="true"] .tupa-pet-modal__backdrop {
background: var(--tupa-overlay-backdrop);
}
html[data-tupa-theme-v2="true"] .tupa-feature-sheet-card {
border: var(--tupa-border-subtle);
background: var(--tupa-sheet-surface);
box-shadow: var(--tupa-shadow-large);
}
html[data-tupa-theme-v2="true"] .tupa-feature-sheet-header,
html[data-tupa-theme-v2="true"] .tupa-pet-modal__header {
border-bottom: var(--tupa-border-subtle) !important;
background: var(--tupa-surface-2) !important;
}
html[data-tupa-theme-v2="true"] .tupa-feature-sheet-drag-handle {
background: var(--tupa-border-strong-colour);
}
html[data-tupa-theme-v2="true"] .tupa-feature-sheet-close,
html[data-tupa-theme-v2="true"] .tupa-pet-modal__close {
border: var(--tupa-border-subtle);
background: var(--tupa-surface-interactive) !important;
}
html[data-tupa-theme-v2="true"] .tupa-feature-sheet-close:hover,
html[data-tupa-theme-v2="true"] .tupa-pet-modal__close:hover {
transform: none !important;
box-shadow: var(--tupa-shadow-small);
}
html[data-tupa-theme-v2="true"] .tupa-pet-modal__content {
padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Golden surface: unauthenticated landing and authentication. */
html[data-tupa-theme-v2="true"] .activation-page,
html[data-tupa-theme-v2="true"] .auth-page {
overflow-x: hidden;
background:
radial-gradient(
circle at 82% 12%,
color-mix(in srgb, var(--tupa-brand-primary) 14%, transparent),
transparent 34%
),
radial-gradient(
circle at 12% 88%,
color-mix(in srgb, var(--tupa-brand-secondary) 6%, transparent),
transparent 28%
),
var(--tupa-page-canvas) !important;
}
html[data-tupa-theme-v2="true"] .activation-v2 {
position: relative;
isolation: isolate;
min-height: 100dvh;
}
html[data-tupa-theme-v2="true"] .activation-v2__shell {
width: min(100%, 1160px);
min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 56px);
display: flex;
flex-direction: column;
margin-inline: auto;
}
html[data-tupa-theme-v2="true"] .activation-v2__nav,
html[data-tupa-theme-v2="true"] .activation-v2__login,
html[data-tupa-theme-v2="true"] .activation-v2__reassurance,
html[data-tupa-theme-v2="true"] .activation-v2__privacy {
display: flex;
align-items: center;
}
html[data-tupa-theme-v2="true"] .activation-v2__nav {
min-height: 48px;
flex-direction: row;
justify-content: flex-end;
gap: 1rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__login {
flex: 0 0 auto;
min-height: 44px;
gap: 0.45rem;
padding: 0.55rem 0.9rem;
border: 0;
border-radius: var(--tupa-radius-full);
background: var(--tupa-surface-interactive);
color: var(--tupa-text-primary);
font-weight: 750;
white-space: nowrap;
box-shadow: var(--tupa-shadow-small);
transition: background var(--tupa-motion-fast), color var(--tupa-motion-fast);
}
html[data-tupa-theme-v2="true"] .activation-v2__login:hover {
background: var(--tupa-surface-selected);
color: var(--tupa-navigation-selected);
}
html[data-tupa-theme-v2="true"] .activation-v2__hero {
flex: 1;
display: grid;
align-items: center;
gap: clamp(1.25rem, 5vw, 3.75rem);
padding: clamp(0.9rem, 4vw, 3.4rem) 0 1rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__copy {
min-width: 0;
display: grid;
justify-items: center;
gap: clamp(0.65rem, 2.25vw, 1rem);
text-align: center;
}
html[data-tupa-theme-v2="true"] .activation-v2__hero-logo {
width: clamp(170px, 46vw, 210px) !important;
height: clamp(170px, 46vw, 210px) !important;
max-width: 100%;
flex: 0 0 auto;
justify-self: center;
filter: drop-shadow(0 14px 26px color-mix(in srgb, var(--tupa-brand-primary) 18%, transparent));
}
html[data-tupa-theme-v2="true"] .activation-v2__hero-logo > div:first-child {
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
}
html[data-tupa-theme-v2="true"] .activation-v2__hero-logo > div + div {
display: none;
}
html[data-tupa-theme-v2="true"] .activation-v2__eyebrow {
margin: 0;
color: var(--tupa-brand-secondary-text);
font-size: 0.76rem;
font-weight: 850;
letter-spacing: 0.14em;
text-transform: uppercase;
}
html[data-tupa-theme-v2="true"] .activation-v2__title {
max-width: 640px;
margin: 0;
color: var(--tupa-text-primary);
font-size: clamp(1.75rem, 7vw, 2.6rem) !important;
font-weight: 780;
letter-spacing: -0.045em;
line-height: 1.02;
}
html[data-tupa-theme-v2="true"] .activation-v2__title span {
display: block;
color: var(--tupa-brand-secondary-text);
}
html[data-tupa-theme-v2="true"] .activation-v2__subtitle {
max-width: 610px;
margin: 0;
color: var(--tupa-text-secondary);
font-size: clamp(0.98rem, 3.5vw, 1.12rem);
line-height: 1.55;
}
html[data-tupa-theme-v2="true"] .activation-v2__actions {
width: min(100%, 390px);
display: grid;
justify-items: center;
gap: 0.75rem;
margin-top: 0.15rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__primary-action {
width: 100% !important;
min-height: 54px !important;
padding-inline: 1.4rem !important;
font-weight: 800 !important;
box-shadow: var(--tupa-shadow-medium) !important;
}
html[data-tupa-theme-v2="true"] .activation-v2__reassurance {
justify-content: center;
gap: 0.45rem;
margin: 0;
color: var(--tupa-text-tertiary);
font-size: 0.8rem;
line-height: 1.35;
}
html[data-tupa-theme-v2="true"] .activation-v2__product {
position: relative;
width: min(100%, 560px);
min-width: 0;
overflow: hidden;
display: grid;
justify-self: center;
padding: clamp(1rem, 4vw, 1.4rem);
border: 0;
border-radius: clamp(1.35rem, 5vw, 2rem);
background:
linear-gradient(
150deg,
color-mix(in srgb, var(--tupa-surface-elevated) 88%, var(--tupa-brand-primary)),
var(--tupa-surface-1) 52%,
color-mix(in srgb, var(--tupa-surface-1) 94%, var(--tupa-brand-secondary))
);
box-shadow: var(--tupa-shadow-large);
}
html[data-tupa-theme-v2="true"] .activation-v2__product::before {
position: absolute;
inset: 0 0 auto;
height: 3px;
content: "";
background: linear-gradient(
90deg,
var(--tupa-brand-primary),
var(--tupa-brand-secondary)
);
}
html[data-tupa-theme-v2="true"] .activation-v2__product-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__product-heading p {
margin: 0 0 0.25rem;
color: var(--tupa-navigation-selected);
font-size: 0.68rem;
font-weight: 850;
letter-spacing: 0.12em;
text-transform: uppercase;
}
html[data-tupa-theme-v2="true"] .activation-v2__product-heading h2 {
margin: 0;
color: var(--tupa-text-primary);
font-size: clamp(1.12rem, 4vw, 1.4rem);
letter-spacing: -0.025em;
line-height: 1.15;
}
html[data-tupa-theme-v2="true"] .activation-v2__privacy {
flex: 0 0 auto;
gap: 0.35rem;
padding: 0.4rem 0.6rem;
border: 0;
border-radius: var(--tupa-radius-full);
background: var(--tupa-surface-selected);
color: var(--tupa-navigation-selected);
font-size: 0.72rem;
font-weight: 750;
}
html[data-tupa-theme-v2="true"] .activation-v2__pet-profile {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.8rem;
margin: 1rem 0 0.35rem;
padding: 0.8rem;
border-radius: var(--tupa-radius-large);
background: color-mix(in srgb, var(--tupa-surface-2) 88%, var(--tupa-brand-primary));
}
html[data-tupa-theme-v2="true"] .activation-v2__species {
display: flex;
align-items: center;
padding-left: 0.35rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__species > span {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: -0.35rem;
border-radius: 50%;
background: var(--tupa-gradient-secondary);
color: var(--tupa-text-on-brand);
box-shadow: 0 0 0 3px var(--tupa-surface-2);
}
html[data-tupa-theme-v2="true"] .activation-v2__species > span:nth-child(even) {
background: color-mix(in srgb, var(--tupa-brand-primary) 72%, var(--tupa-brand-secondary));
}
html[data-tupa-theme-v2="true"] .activation-v2__pet-copy,
html[data-tupa-theme-v2="true"] .activation-v2__product-row > span:last-child {
min-width: 0;
display: grid;
gap: 0.15rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__pet-copy strong,
html[data-tupa-theme-v2="true"] .activation-v2__product-row strong {
color: var(--tupa-text-primary);
font-size: 0.86rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__pet-copy span,
html[data-tupa-theme-v2="true"] .activation-v2__product-row small {
color: var(--tupa-text-secondary);
font-size: 0.72rem;
line-height: 1.35;
}
html[data-tupa-theme-v2="true"] .activation-v2__product-list {
display: grid;
}
html[data-tupa-theme-v2="true"] .activation-v2__product-row {
min-width: 0;
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: center;
gap: 0.75rem;
padding: 0.7rem 0.15rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__product-row + .activation-v2__product-row {
border-top: var(--tupa-border-subtle);
}
html[data-tupa-theme-v2="true"] .activation-v2__product-icon {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: var(--tupa-brand-primary-soft);
color: var(--tupa-navigation-selected);
}
html[data-tupa-theme-v2="true"] .activation-v2__product-row--warm .activation-v2__product-icon {
background: var(--tupa-brand-secondary-soft);
color: var(--tupa-brand-secondary);
}
html[data-tupa-theme-v2="true"] body.theme-playful .activation-v2__product-row--warm .activation-v2__product-icon {
color: var(--tupa-brand-secondary-strong);
}
html[data-tupa-theme-v2="true"] .auth-card {
gap: 0.875rem;
padding: clamp(1rem, 4vw, 1.75rem) !important;
border: 0 !important;
background: var(--tupa-surface-1) !important;
box-shadow: var(--tupa-shadow-large) !important;
}
html[data-tupa-theme-v2="true"] .auth-brand {
justify-content: center;
}
html[data-tupa-theme-v2="true"] .auth-brand--hero {
margin: 0.1rem 0 0.25rem;
}
html[data-tupa-theme-v2="true"] .auth-brand-logo--hero {
width: clamp(110px, 31vw, 160px) !important;
height: clamp(110px, 31vw, 160px) !important;
flex: 0 0 auto;
filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--tupa-brand-primary) 20%, transparent));
}
html[data-tupa-theme-v2="true"] .auth-brand-logo--hero > div:first-child {
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
}
html[data-tupa-theme-v2="true"] .auth-brand-logo--hero > div + div {
display: none;
}
html[data-tupa-theme-v2="true"] .auth-back {
margin-bottom: 0 !important;
color: var(--tupa-text-secondary) !important;
}
html[data-tupa-theme-v2="true"] .auth-heading {
justify-items: center;
gap: 0.35rem;
text-align: center;
}
html[data-tupa-theme-v2="true"] .auth-heading h1 {
margin: 0 !important;
font-size: clamp(1.5rem, 5vw, 1.9rem) !important;
letter-spacing: -0.025em;
}
html[data-tupa-theme-v2="true"] .auth-heading p {
max-width: 390px;
}
html[data-tupa-theme-v2="true"] .auth-switch {
margin-top: 0.1rem;
}
html[data-tupa-theme-v2="true"] .auth-switch button,
html[data-tupa-theme-v2="true"] .auth-forgot-link {
color: var(--tupa-navigation-selected) !important;
}
html[data-tupa-theme-v2="true"] .auth-policy {
border: var(--tupa-border-subtle) !important;
background: var(--tupa-surface-2) !important;
}
html[data-tupa-theme-v2="true"] .auth-policy input {
accent-color: var(--tupa-brand-primary);
}
html[data-tupa-theme-v2="true"] .auth-message--notice {
border: 1px solid var(--tupa-status-info) !important;
background: var(--tupa-status-info-surface) !important;
color: var(--tupa-text-primary) !important;
}
html[data-tupa-theme-v2="true"] .auth-message--error {
border: 1px solid var(--tupa-status-error) !important;
background: var(--tupa-status-error-surface) !important;
color: var(--tupa-text-primary) !important;
}
html[data-tupa-theme-v2="true"] .auth-divider-line,
html[data-tupa-theme-v2="true"] .auth-footer-links {
border-color: var(--tupa-border-subtle-colour) !important;
}
html[data-tupa-theme-v2="true"] .auth-divider-line {
background: var(--tupa-border-subtle-colour) !important;
}
html[data-tupa-theme-v2="true"] .auth-provider-button {
min-height: 48px;
transition: border-color var(--tupa-motion-fast), box-shadow var(--tupa-motion-fast);
}
html[data-tupa-theme-v2="true"] .auth-provider-button:hover:not(:disabled) {
border-color: var(--tupa-border-selected-colour) !important;
box-shadow: var(--tupa-shadow-small) !important;
transform: none;
}
html[data-tupa-theme-v2="true"] .auth-provider-button--google {
border: 1px solid color-mix(in srgb, var(--tupa-tone-dark) 18%, transparent) !important;
background: var(--tupa-tone-light) !important;
color: var(--tupa-tone-dark) !important;
}
html[data-tupa-theme-v2="true"] .auth-provider-button--apple {
border: 1px solid var(--tupa-tone-dark) !important;
background: var(--tupa-tone-dark) !important;
color: var(--tupa-tone-light) !important;
}
html[data-tupa-theme-v2="true"] .auth-processing-overlay {
background: var(--tupa-overlay-backdrop) !important;
}
html[data-tupa-theme-v2="true"] .auth-processing-card {
border: var(--tupa-border-subtle) !important;
background: var(--tupa-modal-surface) !important;
}
html[data-tupa-theme-v2="true"] .auth-processing-progress {
background: var(--tupa-surface-selected) !important;
}
html[data-tupa-theme-v2="true"] .auth-processing-progress__bar {
background: var(--tupa-brand-primary) !important;
}
/* Golden screen: Home. */
html[data-tupa-theme-v2="true"] .tupa-home-v2 {
gap: 0.75rem !important;
}
html[data-tupa-theme-v2="true"] .tupa-home-v2 .tupa-card-component {
padding: clamp(0.875rem, 2vw, 1.1rem) !important;
}
html[data-tupa-theme-v2="true"] .tupa-home-pet-selector {
scrollbar-width: none;
}
html[data-tupa-theme-v2="true"] .tupa-home-pet-selector::-webkit-scrollbar {
display: none;
}
html[data-tupa-theme-v2="true"] .tupa-home-pet-option {
box-shadow: none;
transition: border-color var(--tupa-motion-fast), background var(--tupa-motion-fast);
}
html[data-tupa-theme-v2="true"] .tupa-home-pet-option--active {
color: var(--tupa-navigation-selected) !important;
}
html[data-tupa-theme-v2="true"] .tupa-home-pet-hero {
overflow: hidden;
border: var(--tupa-border-subtle) !important;
background: var(--tupa-surface-2) !important;
box-shadow: var(--tupa-shadow-medium) !important;
}
html[data-tupa-theme-v2="true"] .tupa-home-pet-hero__image {
width: clamp(112px, 31vw, 164px) !important;
height: clamp(126px, 35vw, 178px) !important;
border-radius: var(--tupa-radius-large) !important;
box-shadow: none !important;
}
html[data-tupa-theme-v2="true"] .tupa-home-pet-hero__image--photo {
width: clamp(124px, 34vw, 184px) !important;
height: clamp(140px, 39vw, 200px) !important;
}
html[data-tupa-theme-v2="true"] .tupa-home-quick-actions {
gap: 0.5rem !important;
}
html[data-tupa-theme-v2="true"] .tupa-home-quick-action {
min-height: 68px !important;
border: 0 !important;
background: var(--tupa-surface-interactive) !important;
box-shadow: none !important;
transition: background var(--tupa-motion-fast), color var(--tupa-motion-fast);
}
html[data-tupa-theme-v2="true"] .tupa-home-quick-action:hover,
html[data-tupa-theme-v2="true"] .tupa-home-discover-card:hover {
background: var(--tupa-surface-selected) !important;
}
html[data-tupa-theme-v2="true"] .tupa-home-quick-action__icon {
color: var(--tupa-navigation-selected) !important;
}
html[data-tupa-theme-v2="true"] .tupa-home-today {
border-color: transparent !important;
box-shadow: var(--tupa-shadow-small) !important;
}
html[data-tupa-theme-v2="true"] .tupa-home-care-circle,
html[data-tupa-theme-v2="true"] .tupa-home-discover-preview {
border-color: transparent !important;
box-shadow: none !important;
}
html[data-tupa-theme-v2="true"] .tupa-home-v2 .tupa-home-care-circle,
html[data-tupa-theme-v2="true"] .tupa-home-v2 .tupa-home-discover-preview {
padding: clamp(0.75rem, 2vw, 1rem) !important;
}
html[data-tupa-theme-v2="true"] .tupa-home-today-item {
border-color: var(--tupa-border-subtle-colour) !important;
}
html[data-tupa-theme-v2="true"] .tupa-home-section-link {
color: var(--tupa-navigation-selected) !important;
min-height: 44px !important;
}
html[data-tupa-theme-v2="true"] .tupa-home-discover-card {
border: 0 !important;
background: var(--tupa-surface-interactive) !important;
box-shadow: none;
}
/* Golden screen: current full-screen Pet Hub. */
html[data-tupa-theme-v2="true"] .tupa-pet-hub__header {
border-bottom: var(--tupa-border-subtle) !important;
background: var(--tupa-navigation-background) !important;
box-shadow: var(--tupa-shadow-small);
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__identity,
html[data-tupa-theme-v2="true"] .tupa-pet-hub__primary-actions,
html[data-tupa-theme-v2="true"] .tupa-pet-hub__tabs,
html[data-tupa-theme-v2="true"] .tupa-pet-hub__content {
width: min(100%, 1120px);
margin-inline: auto;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__avatar {
width: 64px !important;
height: 64px !important;
box-shadow: var(--tupa-shadow-small);
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__pet-name {
font-size: clamp(1.05rem, 3vw, 1.3rem) !important;
letter-spacing: -0.02em;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__status {
max-width: min(100%, 220px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__add-button[aria-expanded="true"] {
background: var(--tupa-action-primary-background) !important;
color: var(--tupa-action-primary-text) !important;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__add-menu {
border: var(--tupa-border-subtle) !important;
background: var(--tupa-surface-elevated) !important;
box-shadow: var(--tupa-shadow-large) !important;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__add-menu-item {
border-bottom: var(--tupa-border-subtle) !important;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__primary-action,
html[data-tupa-theme-v2="true"] .tupa-pet-hub-action-row {
border: 0 !important;
background: var(--tupa-surface-interactive) !important;
box-shadow: none;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__primary-action:hover,
html[data-tupa-theme-v2="true"] .tupa-pet-hub-action-row:hover {
background: var(--tupa-surface-selected) !important;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__tabs {
gap: 0.25rem !important;
padding-top: 0.6rem !important;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__tab {
min-height: 44px !important;
border-color: transparent !important;
border-radius: 0 !important;
background: transparent !important;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__tab--active {
border-bottom: 2px solid var(--tupa-navigation-selected) !important;
color: var(--tupa-navigation-selected) !important;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__content {
gap: 0.875rem !important;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub-card {
border: 0 !important;
background: var(--tupa-surface-1) !important;
box-shadow: var(--tupa-shadow-small);
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub-card.tupa-pet-hub-card--today {
box-shadow: var(--tupa-shadow-medium) !important;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub-card.tupa-pet-hub-card--activity {
box-shadow: none !important;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub-filter {
min-height: 44px !important;
border-color: transparent !important;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub-filter--active {
border-color: var(--tupa-border-selected-colour) !important;
color: var(--tupa-navigation-selected) !important;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__photo-overlay > div {
border: var(--tupa-border-subtle);
background: var(--tupa-modal-surface) !important;
box-shadow: var(--tupa-shadow-large) !important;
}
/* Golden screen: canonical Add Pet and onboarding. */
html[data-tupa-theme-v2="true"] .first-run-panel {
border: var(--tupa-border-subtle) !important;
background: var(--tupa-sheet-surface) !important;
box-shadow: var(--tupa-shadow-large) !important;
}
html[data-tupa-theme-v2="true"] .first-run-step-bars > div {
box-shadow: none;
}
html[data-tupa-theme-v2="true"] .tupa-add-pet-surface {
width: min(100%, 760px);
margin-inline: auto;
}
html[data-tupa-theme-v2="true"] .tupa-add-pet-surface__heading {
margin-bottom: 1.25rem !important;
}
html[data-tupa-theme-v2="true"] .pet-wizard,
html[data-tupa-theme-v2="true"] .pet-success {
gap: 1rem;
}
html[data-tupa-theme-v2="true"] .pet-wizard-fields {
gap: 0.875rem;
}
html[data-tupa-theme-v2="true"] .pet-photo-card {
border: 0;
background: var(--tupa-surface-2);
box-shadow: var(--tupa-shadow-small);
}
html[data-tupa-theme-v2="true"] .pet-image-upload__preview {
border: var(--tupa-border-interactive);
background: var(--tupa-surface-interactive);
}
html[data-tupa-theme-v2="true"] .pet-image-upload__source {
border: var(--tupa-border-subtle);
background: var(--tupa-surface-interactive);
}
html[data-tupa-theme-v2="true"] .breed-results {
border: var(--tupa-border-subtle);
background: var(--tupa-surface-elevated);
box-shadow: var(--tupa-shadow-medium);
}
html[data-tupa-theme-v2="true"] .breed-option:hover,
html[data-tupa-theme-v2="true"] .breed-option:focus-visible,
html[data-tupa-theme-v2="true"] .breed-option[aria-pressed="true"],
html[data-tupa-theme-v2="true"] .activation-selected-breed {
background: var(--tupa-surface-selected);
}
html[data-tupa-theme-v2="true"] .activation-selected-breed,
html[data-tupa-theme-v2="true"] .pet-parent-breed-chip {
border-color: var(--tupa-border-selected-colour) !important;
}
html[data-tupa-theme-v2="true"] .pet-breed-selected-mark {
color: var(--tupa-navigation-selected) !important;
}
html[data-tupa-theme-v2="true"] .tupa-required-marker {
color: var(--tupa-status-error) !important;
}
html[data-tupa-theme-v2="true"] .pet-choice input {
accent-color: var(--tupa-brand-primary);
}
html[data-tupa-theme-v2="true"] .pet-wizard-actions {
bottom: 0;
margin-top: 0.25rem;
padding: 0.875rem 0 calc(0.5rem + env(safe-area-inset-bottom, 0px));
background: var(--tupa-sticky-actions-bg);
backdrop-filter: blur(14px);
}
html[data-tupa-theme-v2="true"] .pet-success-card {
border: 0;
background: var(--tupa-surface-2);
}
@media (max-width: 599px) {
html[data-tupa-theme-v2="true"] .activation-v2__product {
margin-inline: auto;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__identity {
display: grid !important;
grid-template-columns: 44px 64px minmax(0, 1fr) 44px;
gap: 0.5rem !important;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__icon-button {
grid-column: 1;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__avatar {
grid-column: 2;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__pet-copy {
grid-column: 3;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__add-control {
grid-column: 4;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__status {
grid-column: 2 / 5;
grid-row: 2;
justify-self: start;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__primary-actions {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 380px) {
html[data-tupa-theme-v2="true"] .activation-page {
padding-right: max(12px, env(safe-area-inset-right, 0px));
padding-left: max(12px, env(safe-area-inset-left, 0px));
}
html[data-tupa-theme-v2="true"] .activation-v2__product {
padding: 0.9rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__pet-profile {
gap: 0.65rem;
padding: 0.7rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__species > span {
width: 34px;
height: 34px;
}
html[data-tupa-theme-v2="true"] .activation-v2__product-row {
padding-block: 0.6rem;
}
html[data-tupa-theme-v2="true"] .tupa-home-v2 .tupa-card-component {
padding: 0.75rem !important;
}
html[data-tupa-theme-v2="true"] .tupa-home-quick-actions {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__identity {
grid-template-columns: 44px 52px minmax(0, 1fr) 44px;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__avatar {
width: 52px !important;
height: 52px !important;
}
}
@media (max-width: 320px) {
html[data-tupa-theme-v2="true"] .activation-v2__login {
padding-inline: 0.7rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__subtitle {
font-size: 0.9rem;
}
}
@media (max-width: 599px) and (max-height: 700px) {
html[data-tupa-theme-v2="true"] .activation-v2__hero {
gap: 0.9rem;
padding-top: 0.75rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__copy {
gap: 0.6rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__actions {
gap: 0.5rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__product {
padding: 0.75rem 0.85rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__pet-profile {
margin-top: 0.65rem;
padding-block: 0.55rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__product-row {
padding-block: 0.45rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__product-row small {
display: none;
}
}
@media (min-width: 600px) {
html[data-tupa-theme-v2="true"] .activation-v2__hero-logo {
width: clamp(180px, 22vw, 230px) !important;
height: clamp(180px, 22vw, 230px) !important;
}
}
@media (min-width: 600px) and (max-width: 759px) {
html[data-tupa-theme-v2="true"] .activation-v2__hero {
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: 1.25rem;
padding-block: 1rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__copy {
width: auto;
margin-inline: 0;
justify-items: start;
text-align: left;
}
html[data-tupa-theme-v2="true"] .activation-v2__title {
font-size: clamp(2rem, 4.8vw, 2.35rem) !important;
}
html[data-tupa-theme-v2="true"] .activation-v2__actions {
justify-items: start;
}
html[data-tupa-theme-v2="true"] .activation-v2__reassurance {
justify-content: flex-start;
}
html[data-tupa-theme-v2="true"] .activation-v2__product {
width: 100%;
padding: 0.9rem;
}
}
@media (min-width: 600px) and (max-width: 759px) and (max-height: 600px) {
html[data-tupa-theme-v2="true"] .auth-card {
gap: 0.7rem;
}
html[data-tupa-theme-v2="true"] .auth-brand-logo--hero {
width: 140px !important;
height: 140px !important;
}
html[data-tupa-theme-v2="true"] .activation-v2__hero {
gap: 1rem;
padding-block: 0.65rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__copy {
gap: 0.55rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__title {
font-size: 2rem !important;
}
html[data-tupa-theme-v2="true"] .activation-v2__actions {
gap: 0.45rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__pet-profile {
margin-top: 0.65rem;
padding-block: 0.55rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__product-row {
padding-block: 0.45rem;
}
html[data-tupa-theme-v2="true"] .activation-v2__product-row small {
display: none;
}
}
@media (min-width: 760px) {
html[data-tupa-theme-v2="true"] .activation-v2__hero {
grid-template-columns: minmax(0, 0.95fr) minmax(340px, 1.05fr);
min-height: 620px;
}
html[data-tupa-theme-v2="true"] .activation-v2__copy {
justify-items: start;
text-align: left;
}
html[data-tupa-theme-v2="true"] .activation-v2__title {
font-size: clamp(2.2rem, 2.9vw, 2.4rem) !important;
}
html[data-tupa-theme-v2="true"] .activation-v2__actions {
justify-items: start;
}
html[data-tupa-theme-v2="true"] .activation-v2__reassurance {
justify-content: flex-start;
}
html[data-tupa-theme-v2="true"] .first-run-panel {
width: min(100%, 580px);
}
html[data-tupa-theme-v2="true"] .pet-photo-card {
padding: 1.25rem;
}
}
@media (min-width: 900px) {
html[data-tupa-theme-v2="true"] .tupa-home-v2:not(.tupa-home-v2--empty) {
grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
grid-template-areas:
"selector selector"
"hero quick"
"hero today"
"circle discover";
align-items: start;
}
html[data-tupa-theme-v2="true"] .tupa-home-v2--single-pet {
grid-template-areas:
"hero quick"
"hero today"
"circle discover";
}
html[data-tupa-theme-v2="true"] .tupa-home-pet-selector {
grid-area: selector;
}
html[data-tupa-theme-v2="true"] .tupa-home-pet-hero {
grid-area: hero;
align-self: stretch;
}
html[data-tupa-theme-v2="true"] .tupa-home-quick-actions {
grid-area: quick;
}
html[data-tupa-theme-v2="true"] .tupa-home-today {
grid-area: today;
}
html[data-tupa-theme-v2="true"] .tupa-home-care-circle {
grid-area: circle;
}
html[data-tupa-theme-v2="true"] .tupa-home-discover-preview {
grid-area: discover;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__overview {
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
align-items: start;
}
html[data-tupa-theme-v2="true"] .tupa-pet-hub__overview > section:last-child {
grid-column: 1 / -1;
}
}
@media (prefers-reduced-motion: reduce) {
html[data-tupa-theme-v2="true"] *,
html[data-tupa-theme-v2="true"] *::before,
html[data-tupa-theme-v2="true"] *::after {
scroll-behavior: auto !important;
}
}
/* Public acquisition only. Existing account, native and theme owners stay intact. */
.public-site {
box-sizing: border-box;
min-height: 100dvh;
width: 100%;
background: var(--tupa-gradient-bg);
color: var(--tupa-text-primary);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 1rem;
line-height: 1.65;
padding: calc(env(safe-area-inset-top, 0px) + 18px) max(18px, env(safe-area-inset-right, 0px))
calc(env(safe-area-inset-bottom, 0px) + 32px) max(18px, env(safe-area-inset-left, 0px));
}
.public-site *, .public-site *::before, .public-site *::after { box-sizing: border-box; min-width: 0; }
.public-site__shell { width: min(100%, 1180px); margin-inline: auto; }
.public-site a { color: inherit; text-underline-offset: 0.25em; }
.public-site a:focus-visible, .public-site summary:focus-visible, .public-site [tabindex]:focus-visible {
outline: var(--tupa-focus-ring); outline-offset: 4px;
}
.public-site__skip { position: absolute; top: -100px; padding: 12px; background: var(--tupa-bg-elevated); z-index: 100; }
.public-site__skip:focus { top: 12px; }
.public-site__nav, .public-site__brand, .public-site__nav-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.public-site__nav { justify-content: space-between; padding-block: 8px 18px; border-bottom: var(--tupa-border-subtle); }
.public-site__brand { gap: 10px; font-weight: 800; font-size: 1.25rem; text-decoration: none; }
.public-site__brand img { object-fit: contain; }
.public-site__nav-links { gap: 8px 20px; }
.public-site__nav-links a, .public-site__footer nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.public-site__nav-links a[aria-current] { text-decoration: underline; font-weight: 750; }
.public-site h1, .public-site h2, .public-site h3 { color: var(--tupa-text-primary); letter-spacing: -0.025em; }
/* The app's phone h1 rule is important; public headings retain their hierarchy. */
.public-site h1 { font-size: clamp(2.1rem, 5.1vw, 4.1rem) !important; line-height: 1.1; max-width: 22ch; margin: 12px 0 22px; }
.public-site h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2; margin: 10px 0 20px; }
.public-site h3 { font-size: 1.15rem; line-height: 1.4; margin: 0 0 14px; }
.public-site p { color: var(--tupa-text-secondary); margin: 0 0 18px; }
.public-site__eyebrow { color: var(--tupa-text-accent) !important; font-size: 0.79rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; }
.public-site__hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 7vw, 86px); }
.public-site__lead { font-size: clamp(1.05rem, 2vw, 1.23rem); max-width: 56ch; }
.public-site__primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: var(--tupa-radius-md); background: var(--tupa-action-primary-background, var(--tupa-gradient-primary)); color: var(--tupa-action-primary-text, var(--tupa-bg-primary)) !important; font-weight: 750; text-decoration: none; }
.public-site__secondary { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 16px; font-weight: 650; text-decoration: underline; }
.public-site__text-link { font-weight: 650; text-decoration: underline; }
.public-site__reassurance, .public-site__scope, .public-site__sources { font-size: 0.9rem; max-width: 70ch; }
.public-site__reassurance { margin-top: 16px !important; }
.public-site__scope { margin-bottom: 0 !important; }
.public-site__scope a, .public-site__reassurance a, .public-site__sources a { text-decoration: underline; }
.public-site__section { padding-block: 44px; border-top: var(--tupa-border-subtle); scroll-margin-top: 20px; }
.public-site__section > h2 { max-width: 32ch; }
.public-site__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.public-site__card { padding: clamp(20px, 3vw, 28px); margin: 0; border: var(--tupa-border-subtle); border-radius: var(--tupa-radius-lg); background: var(--tupa-bg-secondary); overflow-wrap: anywhere; }
.public-site__card > :last-child { margin-bottom: 0; }
.public-site__card--accent { border: 2px solid var(--tupa-coral); }
.public-site__handoff { box-shadow: var(--tupa-shadow-md); }
.public-site__handoff h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.public-site__handoff ul { padding-left: 22px; line-height: 2; }
.public-site__split { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.public-site__steps { padding-left: 24px; margin: 0; }
.public-site__steps li { margin-bottom: 22px; padding-left: 8px; color: var(--tupa-text-secondary); }
.public-site__steps strong { color: var(--tupa-text-primary); }
.public-site__page-heading { padding-block: 55px 32px; max-width: 850px; }
.public-site__page-heading h1 { max-width: 25ch; }
.public-site__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; }
.public-site__plans article { display: flex; flex-direction: column; align-items: start; }
.public-site__plans h2 { font-size: 1.45rem; }
.public-site__plans article > a { margin-top: auto; min-height: 48px; }
.public-site__price { color: var(--tupa-text-primary) !important; font-size: 2rem; font-weight: 800; }
.public-site__price span { display: block; font-size: 0.88rem; font-weight: 450; color: var(--tupa-text-secondary); }
.public-site__table-wrap { overflow-x: auto; max-width: 100%; margin-bottom: 22px; border: var(--tupa-border-subtle); border-radius: var(--tupa-radius-md); }
.public-site table { border-collapse: collapse; width: 100%; min-width: 540px; background: var(--tupa-bg-secondary); }
.public-site caption { padding: 16px; text-align: left; font-weight: 700; }
.public-site th, .public-site td { text-align: left; vertical-align: top; padding: 16px; border-top: var(--tupa-border-subtle); line-height: 1.55; }
.public-site th { color: var(--tupa-text-primary); }
.public-site td { color: var(--tupa-text-secondary); }
.public-site__feature-list { display: grid; gap: 22px; }
.public-site__feature-list article { scroll-margin-top: 20px; }
.public-site__feature-list article:has(figure) { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.public-site__screenshot { margin: 0; }
.public-site__screenshot img { display: block; width: 100%; height: auto; border-radius: var(--tupa-radius-lg); }
.public-site__screenshot figcaption { margin-top: 12px; font-size: 0.88rem; color: var(--tupa-text-secondary); }
.public-site__proof { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.public-site__proof small { display: block; color: var(--tupa-text-secondary); }
.public-site blockquote { margin: 0 0 18px; }
.public-site figcaption img { border-radius: var(--tupa-radius-full); vertical-align: middle; margin-right: 8px; object-fit: cover; }
.public-site__founder { display: flex; gap: 28px; align-items: start; }
.public-site__founder > img { width: min(30%, 220px); height: auto; border-radius: var(--tupa-radius-lg); }
.public-site__faq { max-width: 850px; }
.public-site__faq details { border-top: var(--tupa-border-subtle); padding: 8px 0; }
.public-site__faq summary { min-height: 48px; padding-block: 12px; cursor: pointer; font-weight: 650; }
.public-site__faq details p { padding-block: 8px; }
.public-site__footer { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; border-top: var(--tupa-border-subtle); padding-top: 32px; }
.public-site__footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
@media (max-width: 760px) {
.public-site__hero, .public-site__split, .public-site__footer, .public-site__feature-list article:has(figure) { grid-template-columns: 1fr; }
.public-site__nav { align-items: start; }
.public-site__nav-links { width: 100%; justify-content: space-between; gap: 4px 12px; }
.public-site__hero { padding-block: 36px; }
.public-site__section { padding-block: 32px; }
.public-site__primary { max-width: 100%; }
.public-site__stores img { max-width: 100%; }
.public-site__founder { flex-direction: column; }
.public-site__founder > img { width: 150px; }
}