/* Rice Purity Test — design tokens & custom utilities */ /* Google Fonts loaded via in for better performance */ :root { --background: 210 40% 98%; --foreground: 222 47% 11%; --card: 0 0% 100%; --card-foreground: 222 47% 11%; --popover: 0 0% 100%; --popover-foreground: 222 47% 11%; --primary: 199 89% 48%; --primary-foreground: 210 40% 98%; --primary-glow: 187 92% 60%; --secondary: 262 83% 58%; --secondary-foreground: 210 40% 98%; --muted: 210 40% 96%; --muted-foreground: 215 16% 47%; --accent: 152 76% 44%; --accent-foreground: 210 40% 98%; --destructive: 0 84% 60%; --destructive-foreground: 210 40% 98%; --warning: 38 92% 50%; --success: 142 71% 45%; --border: 214 32% 91%; --input: 214 32% 91%; --ring: 199 89% 48%; --radius: 1rem; --gradient-primary: linear-gradient(135deg, hsl(199 89% 48%), hsl(187 92% 60%)); --gradient-hero: linear-gradient(135deg, hsl(199 89% 48%) 0%, hsl(262 83% 58%) 50%, hsl(330 81% 60%) 100%); --gradient-success: linear-gradient(135deg, hsl(152 76% 44%), hsl(142 71% 45%)); --gradient-warning: linear-gradient(135deg, hsl(38 92% 50%), hsl(0 84% 60%)); --gradient-card: linear-gradient(180deg, hsl(0 0% 100%), hsl(210 40% 98%)); --shadow-sm: 0 1px 2px hsl(222 47% 11% / 0.04); --shadow-md: 0 4px 12px -2px hsl(222 47% 11% / 0.08); --shadow-lg: 0 12px 32px -8px hsl(222 47% 11% / 0.12); --shadow-glow: 0 0 40px hsl(199 89% 48% / 0.35); --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dark { --background: 222 47% 6%; --foreground: 210 40% 98%; --card: 222 47% 9%; --card-foreground: 210 40% 98%; --popover: 222 47% 9%; --popover-foreground: 210 40% 98%; --primary: 187 92% 60%; --primary-foreground: 222 47% 11%; --primary-glow: 199 89% 48%; --secondary: 262 83% 68%; --secondary-foreground: 222 47% 11%; --muted: 217 33% 14%; --muted-foreground: 215 20% 65%; --accent: 152 76% 50%; --accent-foreground: 222 47% 11%; --destructive: 0 84% 60%; --destructive-foreground: 210 40% 98%; --border: 217 33% 18%; --input: 217 33% 18%; --ring: 187 92% 60%; --gradient-primary: linear-gradient(135deg, hsl(187 92% 60%), hsl(199 89% 48%)); --gradient-hero: linear-gradient(135deg, hsl(187 92% 60%) 0%, hsl(262 83% 68%) 50%, hsl(330 81% 60%) 100%); --gradient-card: linear-gradient(180deg, hsl(222 47% 9%), hsl(222 47% 7%)); --shadow-glow: 0 0 50px hsl(187 92% 60% / 0.35); } html { scroll-behavior: smooth; } *, *::before, *::after { border-color: hsl(var(--border)); box-sizing: border-box; } html, body { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; } body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11","ss01"; margin: 0; } /* Custom utility classes */ .gradient-hero { background: var(--gradient-hero); } .gradient-primary { background: var(--gradient-primary); } .gradient-card { background: var(--gradient-card); } .text-gradient { background: var(--gradient-hero); -webkit-background-clip: text; background-clip: text; color: transparent; } .shadow-glow { box-shadow: var(--shadow-glow); } .shadow-elegant { box-shadow: var(--shadow-lg); } .transition-smooth { transition: var(--transition-smooth); } .sr-only-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Question items */ .question-item.hidden { display: none; } .question-group[data-hidden="true"] { display: none; } /* Checkbox styling */ .q-checkbox { width: 1rem; height: 1rem; flex-shrink: 0; cursor: pointer; border-radius: 0.25rem; border: 1.5px solid hsl(var(--border)); background: transparent; accent-color: hsl(var(--primary)); margin-top: 2px; } .q-checkbox:checked { accent-color: hsl(var(--primary)); } /* Label checked state */ label.checked-label { background-color: hsl(var(--primary) / 0.05); } label.checked-label .q-text { text-decoration: line-through; color: hsl(var(--muted-foreground)); } /* Accordion panel */ .question-list { display: block; } .question-list.collapsed { display: none; } /* Chevron rotation */ .chevron-open { transform: rotate(180deg); } .chevron-icon { transition: transform 0.3s ease; } /* Progress bar */ .progress-bar-fill { height: 100%; background: var(--gradient-primary); border-radius: 9999px; transition: width 0.3s ease; } /* Score ring */ .score-ring-stroke { transition: stroke-dashoffset 0.6s cubic-bezier(0.4,0,0.2,1); } /* Modal overlay */ .modal-overlay { display: none; position: fixed; inset: 0; z-index: 50; background: hsl(222 47% 11% / 0.6); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 1rem; } .modal-overlay.open { display: flex; } /* Toast */ #toast-container { position: fixed; bottom: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; } .toast { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 0.75rem; padding: 0.75rem 1rem; box-shadow: var(--shadow-lg); font-size: 0.875rem; min-width: 240px; animation: slideIn 0.2s ease; } .toast-title { font-weight: 600; margin-bottom: 0.125rem; } .toast-desc { color: hsl(var(--muted-foreground)); font-size: 0.8rem; } @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* Switch toggle */ .switch { position: relative; display: inline-block; width: 2.25rem; height: 1.25rem; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch-slider { position: absolute; cursor: pointer; inset: 0; background: hsl(var(--muted)); border-radius: 9999px; transition: background 0.2s; } .switch-slider::before { content: ''; position: absolute; left: 2px; top: 2px; width: 1rem; height: 1rem; border-radius: 50%; background: white; transition: transform 0.2s; } .switch input:checked + .switch-slider { background: hsl(var(--primary)); } .switch input:checked + .switch-slider::before { transform: translateX(1rem); } /* AI report card */ .ai-report-section { animation: fadeIn 0.4s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Scrollable modal body */ .modal-scroll { max-height: 60vh; overflow-y: auto; } /* Category badge counter */ .cat-count-badge { min-width: 2.25rem; min-height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; font-weight: 700; font-size: 0.875rem; background: var(--gradient-primary); color: hsl(var(--primary-foreground)); box-shadow: var(--shadow-sm); flex-shrink: 0; } /* Animate result card in */ @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .animate-scale-in { animation: scaleIn 0.3s ease forwards; } /* Banner badge */ .badge-pill { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; padding: 0.375rem 1rem; font-size: 0.75rem; font-weight: 600; } /* ── Mobile sticky score bar ─────────────────────────────────────────────── */ .mobile-score-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: hsl(var(--card)); border-top: 1px solid hsl(var(--border)); box-shadow: 0 -4px 20px hsl(222 47% 11% / 0.10); padding-bottom: env(safe-area-inset-bottom, 0px); } .mobile-score-bar.hidden { display: none !important; } .mobile-score-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 1rem; } .mobile-score-info { display: flex; align-items: center; gap: 0.625rem; min-width: 0; } .mobile-score-num { font-size: 1.75rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; background: var(--gradient-hero); -webkit-background-clip: text; background-clip: text; color: transparent; } .mobile-score-label { display: block; font-size: 0.75rem; font-weight: 600; color: hsl(var(--primary)); line-height: 1.2; } .mobile-score-count { display: block; font-size: 0.7rem; color: hsl(var(--muted-foreground)); line-height: 1.2; } .mobile-submit-btn { flex-shrink: 0; background: var(--gradient-primary); color: hsl(var(--primary-foreground)); font-size: 0.8rem; font-weight: 700; padding: 0.55rem 1rem; border-radius: 0.75rem; border: 0; cursor: pointer; transition: opacity 0.2s; white-space: nowrap; } .mobile-submit-btn:hover { opacity: 0.9; } .mobile-score-progress { height: 3px; background: hsl(var(--muted)); margin: 0; } .mobile-score-progress-fill { height: 100%; background: var(--gradient-primary); transition: width 0.3s ease; border-radius: 0 9999px 9999px 0; } @media (max-width: 1023px) { .mobile-score-bar { display: block; } /* Push content up so the bar doesn't overlap */ main { padding-bottom: 5rem; } } /* ── Larger touch targets on mobile ──────────────────────────────────────── */ @media (max-width: 1023px) { /* Question rows: taller tap area */ .question-item label { min-height: 48px; padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } /* Bigger checkboxes */ .q-checkbox { width: 1.25rem; height: 1.25rem; } /* Accordion headers: taller */ .question-group > button { min-height: 56px; } /* Nav buttons: bigger tap area */ header nav button, header nav a { min-height: 40px; min-width: 40px; } /* Toast: left-aligned, wider on small screens */ #toast-container { left: 1rem; right: 1rem; } .toast { min-width: unset; width: 100%; } /* Hero: tighter on mobile */ section.text-center.max-w-3xl { margin-bottom: 1.5rem !important; } } /* ── Nav text: hide on very small screens ────────────────────────────────── */ @media (max-width: 479px) { .nav-label { display: none; } header nav button { padding: 0.4rem 0.5rem; } } /* ── Performance: lazy-render off-screen heavy sections ─────────────────── */ .lazy-section { content-visibility: auto; contain-intrinsic-size: auto 600px; } /* ── Site icon in header/footer ──────────────────────────────────────────── */ .site-icon { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; flex-shrink: 0; } /* ── Lazy-loaded section fade-in ─────────────────────────────────────────── */ .reveal-section { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal-section.visible { opacity: 1; transform: none; }