/* ============================================= NORTHERN — WEB DESIGN QUIZ Style Guide & Design Tokens Montserrat + Open Sans ============================================= */ /* Google Fonts loaded via in index.php for faster first paint */ /* ============================================= COLOUR TOKENS ============================================= */ :root { --colour-bg-base: #0a0a0f; --colour-bg-surface: #111118; --colour-bg-elevated: #16161f; --colour-bg-overlay: #1c1c28; --colour-magenta: #e91e8c; --colour-purple: #7c3aed; --colour-cyan: #00d4ff; --colour-purple-light: #a855f7; --gradient-brand: linear-gradient(135deg, #e91e8c 0%, #7c3aed 50%, #00d4ff 100%); --gradient-brand-subtle: linear-gradient(135deg, rgba(233,30,140,0.15) 0%, rgba(124,58,237,0.15) 50%, rgba(0,212,255,0.15) 100%); --gradient-bg: linear-gradient(180deg, #0a0a0f 0%, #0d0d18 50%, #0a0a0f 100%); --colour-text-primary: #ffffff; --colour-text-secondary: rgba(255,255,255,0.65); --colour-text-muted: rgba(255,255,255,0.35); --colour-text-disabled: rgba(255,255,255,0.2); --colour-correct: #10b981; --colour-incorrect: #ef4444; --colour-warning: #f59e0b; --colour-info: #3b82f6; --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.1); --border-strong: rgba(255,255,255,0.2); --border-brand: rgba(233,30,140,0.4); --border-purple: rgba(124,58,237,0.4); --shadow-sm: 0 2px 4px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.4); --shadow-lg: 0 8px 40px rgba(0,0,0,0.5); --shadow-card: 0 2px 4px rgba(0,0,0,0.3), 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05); --shadow-card-hover: 0 8px 16px rgba(0,0,0,0.4), 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(124,58,237,0.4), 0 0 60px rgba(124,58,237,0.08); --shadow-brand-glow: 0 0 40px rgba(233,30,140,0.2), 0 0 80px rgba(124,58,237,0.1); --shadow-button: 0 4px 20px rgba(124,58,237,0.35); --shadow-button-green: 0 4px 20px rgba(16,185,129,0.35); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 100px; --transition-fast: all 0.15s ease; --transition-default: all 0.2s ease-out; --transition-slow: all 0.3s ease-in; --transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Font size scale — rem-based, scales with user browser settings WCAG floor: 0.75rem (12px) for uppercase tracked labels, 0.875rem (14px) for readable body text */ --fs-xs: 0.75rem; /* 12px — Montserrat labels, badges (uppercase+tracked reads ~14px) */ --fs-sm: 0.8125rem; /* 13px — tips, error text, small Open Sans */ --fs-base: 1rem; /* 16px — body default, inputs, explanations */ --fs-md: 0.9375rem; /* 15px — option descriptions, feature text */ --fs-lg: 1.125rem; /* 18px — body large, score label, buttons */ --fs-xl: 1.25rem; /* 20px — explanation result, review titles */ --fs-2xl: 1.375rem; /* 22px — option titles, logo */ } /* ============================================= RESET & BASE ============================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--colour-bg-base); background-image: var(--gradient-bg); color: var(--colour-text-primary); font-family: 'Open Sans', sans-serif; font-size: 1rem; line-height: 1.6; height: 100dvh; height: calc(var(--vh, 1vh) * 100); overflow: hidden; padding-bottom: env(safe-area-inset-bottom, 0px); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ============================================= LAYOUT ============================================= */ .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 var(--space-6); } .container-narrow { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 var(--space-6); } /* ============================================= TYPOGRAPHY — Montserrat headings ============================================= */ .heading-display { font-family: 'Montserrat', sans-serif; font-size: clamp(48px, 8vw, 96px); font-weight: 800; letter-spacing: -0.02em; line-height: 0.95; text-transform: uppercase; color: var(--colour-text-primary); } .heading-1 { font-family: 'Montserrat', sans-serif; font-size: clamp(36px, 6vw, 72px); font-weight: 700; letter-spacing: -0.01em; line-height: 1; text-transform: uppercase; } .heading-2 { font-family: 'Montserrat', sans-serif; font-size: clamp(28px, 4vw, 52px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; text-transform: uppercase; } .heading-3 { font-family: 'Montserrat', sans-serif; font-size: clamp(22px, 3vw, 36px); font-weight: 700; letter-spacing: 0em; line-height: 1.1; text-transform: uppercase; } /* ============================================= TYPOGRAPHY — Open Sans body ============================================= */ .body-lg { font-family: 'Open Sans', sans-serif; font-size: 1.125rem; line-height: 1.7; color: var(--colour-text-secondary); } .body-md { font-family: 'Open Sans', sans-serif; font-size: 1rem; line-height: 1.6; color: var(--colour-text-secondary); } .body-sm { font-family: 'Open Sans', sans-serif; font-size: 0.875rem; line-height: 1.6; color: var(--colour-text-muted); } /* ============================================= TYPOGRAPHY — Labels & special ============================================= */ .label-category { font-family: 'Montserrat', sans-serif; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--colour-magenta); } .tip-text { font-family: 'Open Sans', sans-serif; font-size: 0.9375rem; font-style: italic; line-height: 1.65; color: var(--colour-text-muted); border-left: 2px solid var(--colour-purple); padding-left: var(--space-4); margin-top: var(--space-4); } .text-gradient { background: var(--gradient-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================= HEADER ============================================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-8); background: rgba(10,10,15,0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); z-index: 100; } .logo { font-family: 'Montserrat', sans-serif; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: 0.08em; color: var(--colour-text-primary); text-decoration: none; display: flex; align-items: center; gap: var(--space-3); } .logo-img { height: 28px; width: auto; } /* ============================================= PROGRESS BAR ============================================= */ .quiz-progress-track { position: fixed; top: 64px; left: 0; right: 0; height: 3px; background: var(--border-subtle); z-index: 99; } .quiz-progress-fill { height: 100%; background: var(--gradient-brand); width: 0%; transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============================================= SIGN-UP SCREEN ============================================= */ .screen-signup { align-items: center; justify-content: center; padding: min(5vmin, 24px); padding-bottom: calc(min(5vmin, 24px) + env(safe-area-inset-bottom, 0px)); position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; } .signup-inner { width: 100%; display: flex; align-items: center; justify-content: center; } .screen-signup::before { content: ''; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; background: radial-gradient(circle, rgba(233,30,140,0.12) 0%, rgba(124,58,237,0.08) 40%, transparent 70%); pointer-events: none; } .signup-card { width: 100%; max-width: 480px; background: var(--colour-bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-12); box-shadow: var(--shadow-card); position: relative; z-index: 1; } .signup-title { font-family: 'Montserrat', sans-serif; font-size: clamp(36px, 6vw, 56px); font-weight: 800; letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; color: var(--colour-text-primary); margin-bottom: var(--space-3); text-align: center; } .signup-subtitle { font-family: 'Open Sans', sans-serif; font-size: 1.0625rem; line-height: 1.6; color: var(--colour-text-secondary); text-align: center; margin-bottom: var(--space-8); } /* ============================================= FORM ELEMENTS ============================================= */ .form-group { margin-bottom: var(--space-5); } .form-label { display: block; font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; color: var(--colour-text-secondary); margin-bottom: var(--space-2); } .form-input { width: 100%; background: var(--colour-bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 16px; color: var(--colour-text-primary); font-family: 'Open Sans', sans-serif; font-size: 1rem; transition: var(--transition-default); outline: none; } .form-input::placeholder { color: var(--colour-text-disabled); } .form-input:focus { border-color: var(--colour-purple); box-shadow: 0 0 0 3px rgba(124,58,237,0.15); background: var(--colour-bg-overlay); } .form-error { font-family: 'Open Sans', sans-serif; font-size: var(--fs-sm); color: var(--colour-incorrect); margin-top: var(--space-1); display: none; } .form-group.has-error .form-input { border-color: var(--colour-incorrect); } .form-group.has-error .form-error { display: block; } /* ============================================= BUTTONS ============================================= */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; background: var(--gradient-brand); color: white; border: none; border-radius: var(--radius-md); padding: 14px 28px; font-family: 'Montserrat', sans-serif; font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: var(--transition-fast); position: relative; overflow: hidden; } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-brand-glow); } .btn-primary:active { transform: translateY(0) scale(0.99); } .btn-primary.loading { pointer-events: none; opacity: 0.8; } .btn-primary.success { background: var(--colour-correct); box-shadow: var(--shadow-button-green); } /* ============================================= QR SHARE SECTION ============================================= */ .qr-share { display: flex; flex-direction: column; align-items: center; margin-top: var(--space-6); } .qr-divider { width: 100%; display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); } .qr-divider::before, .qr-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-default); } .qr-divider span { font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--colour-text-muted); white-space: nowrap; } .qr-code { border-radius: var(--radius-md); background: white; padding: 8px; box-shadow: var(--shadow-sm); } .qr-label { font-family: 'Open Sans', sans-serif; font-size: var(--fs-sm); color: var(--colour-text-muted); margin-top: var(--space-3); text-align: center; } .btn-ghost { display: inline-flex; align-items: center; gap: var(--space-2); background: transparent; color: var(--colour-text-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 8px 18px; font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: var(--transition-default); } .btn-ghost:hover { border-color: var(--border-strong); color: var(--colour-text-primary); background: var(--colour-bg-elevated); } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--colour-bg-elevated); color: var(--colour-text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 12px 24px; font-family: 'Montserrat', sans-serif; font-size: var(--fs-base); font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: var(--transition-default); } .btn-secondary:hover { border-color: var(--colour-purple); box-shadow: 0 0 0 1px rgba(124,58,237,0.2); background: var(--colour-bg-overlay); } /* ============================================= QUESTION SCREEN ============================================= */ .screen-question { padding: var(--space-3) var(--space-6); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); gap: var(--space-1); } .screen-question .question-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .question-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: min(1.5vmin, 8px); flex-shrink: 0; padding: min(1vmin, 4px) 0; } .question-counter { font-family: 'Montserrat', sans-serif; font-size: clamp(0.65rem, 1.6vmin, 0.75rem); font-weight: 500; letter-spacing: 0.06em; color: var(--colour-text-muted); } .question-category { font-family: 'Montserrat', sans-serif; font-size: clamp(0.6rem, 1.5vmin, 0.75rem); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--colour-magenta); background: rgba(233,30,140,0.1); border: 1px solid rgba(233,30,140,0.2); padding: 4px 12px; border-radius: var(--radius-pill); margin: 0 var(--space-2); } .progress-narrative { font-family: 'Open Sans', sans-serif; font-size: clamp(0.7rem, 1.6vmin, 0.8rem); font-style: italic; color: var(--colour-text-muted); text-align: center; flex-shrink: 0; padding: 0 0 min(1vmin, 4px); } .question-text { font-family: 'Montserrat', sans-serif; font-size: clamp(0.95rem, 2.8vmin, 1.5rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; text-transform: uppercase; color: var(--colour-text-primary); margin-bottom: min(2vmin, 12px); text-align: center; } /* ============================================= OPTION CARDS — A vs B ============================================= */ .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-8); } .options-grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-8); } @media (max-width: 640px) { .options-grid, .options-grid-4 { grid-template-columns: 1fr; } } /* New compact option buttons for viewport-contained layout */ .options-row { display: flex; align-items: center; gap: var(--space-4); padding: 0; } .options-row .vs-label { font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); font-weight: 700; color: var(--colour-text-muted); flex-shrink: 0; } @media (max-width: 768px) { .options-row { flex-direction: column; gap: var(--space-4); } .options-row .vs-label { display: none; } .options-grid-mc { grid-template-columns: 1fr; } .demo-area { flex-direction: column; } } .option-btn { flex: 1; display: flex; align-items: center; gap: var(--space-3); background: var(--colour-bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: min(2.5vmin, 14px) min(3vmin, 16px); min-height: 48px; cursor: pointer; transition: border-color 0.2s ease-out, background 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.12s ease-out; color: var(--colour-text-primary); text-align: left; font-family: inherit; font-size: inherit; position: relative; overflow: hidden; width: 100%; } .option-btn::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(124,58,237,0.25) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .option-btn:hover { border-color: var(--border-strong); background: var(--colour-bg-elevated); transform: translateY(-1px); } .option-btn:active { transform: scale(0.97); } .option-btn.selected { border-color: var(--colour-purple); background: rgba(124,58,237,0.08); box-shadow: 0 0 0 2px rgba(124,58,237,0.3); animation: cardPulse 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .option-btn.selected::after { opacity: 1; } @keyframes cardPulse { 0% { transform: scale(1); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } } .option-letter { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--colour-bg-elevated); border: 1px solid var(--border-subtle); font-family: 'Montserrat', sans-serif; font-size: var(--fs-sm); font-weight: 700; color: var(--colour-text-muted); flex-shrink: 0; } .option-btn.selected .option-letter { background: var(--colour-purple); border-color: var(--colour-purple); color: white; } .option-btn-title { font-family: 'Montserrat', sans-serif; font-size: clamp(0.8rem, 2vmin, 1rem); font-weight: 600; line-height: 1.2; } .options-grid-mc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .option-btn-mc { padding: min(2vmin, 10px) min(2.5vmin, 12px); } .option-btn-mc .option-btn-title { font-size: clamp(0.75rem, 1.8vmin, 0.9rem); } @media (max-width: 480px) { .options-grid-mc { grid-template-columns: 1fr; } } .option-card { background: var(--colour-bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-6); cursor: pointer; transition: var(--transition-default); position: relative; overflow: hidden; } .option-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--colour-bg-elevated); } .option-card.selected { border-color: var(--colour-purple); background: rgba(124,58,237,0.06); box-shadow: 0 0 0 1px rgba(124,58,237,0.3), 0 4px 20px rgba(124,58,237,0.1); } .option-card.selected-correct { border-color: var(--colour-correct); background: rgba(16,185,129,0.05); box-shadow: 0 0 0 1px rgba(16,185,129,0.3), 0 4px 20px rgba(16,185,129,0.1); } .option-card.selected-incorrect { border-color: var(--colour-incorrect); background: rgba(239,68,68,0.05); box-shadow: 0 0 0 1px rgba(239,68,68,0.3), 0 4px 20px rgba(239,68,68,0.1); } .option-card.disabled { pointer-events: none; opacity: 0.5; } .option-label { font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; color: var(--colour-text-muted); margin-bottom: var(--space-2); display: block; } .option-title { font-family: 'Montserrat', sans-serif; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.01em; color: var(--colour-text-primary); margin-bottom: var(--space-3); line-height: 1.1; } .option-desc { font-family: 'Open Sans', sans-serif; font-size: 0.9375rem; line-height: 1.6; color: var(--colour-text-secondary); } .option-demo { height: 120px; background: var(--colour-bg-base); border-radius: var(--radius-md); margin-bottom: var(--space-4); display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); overflow: hidden; } /* Progress bar */ .progress-section { flex-shrink: 0; padding: var(--space-4) var(--space-6) var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); } .progress-top { display: flex; align-items: center; gap: var(--space-2); } .exit-quiz-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-full, 50%); color: #ef4444; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); text-decoration: none; transition: background 0.2s ease, transform 0.15s ease; } .exit-quiz-btn:hover { background: rgba(239, 68, 68, 0.2); transform: scale(1.1); } .exit-quiz-btn:active { transform: scale(0.95); } .exit-quiz-btn:focus-visible { outline: 2px solid #ef4444; outline-offset: 2px; } .progress-step { font-family: 'Montserrat', sans-serif; font-size: clamp(0.7rem, 1.8vmin, 0.85rem); font-weight: 700; color: var(--colour-text-primary); } .progress-step span { color: var(--colour-text-muted); font-weight: 600; } .progress-pct { margin-left: auto; font-family: 'Montserrat', sans-serif; font-size: clamp(0.75rem, 2vmin, 0.9rem); font-weight: 700; color: var(--colour-purple-light); } .progress-wrap { width: 100%; height: 6px; background: var(--colour-bg-elevated); border-radius: 3px; overflow: hidden; } .progress-bar { height: 100%; background: var(--gradient-brand); border-radius: 3px; transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Demo area for visual questions */ .demo-area { flex: 1; min-height: 100px; max-height: 45vh; display: flex; gap: var(--space-3); padding: min(1.5vmin, 8px) 0; } .demo-side { flex: 1; background: var(--colour-bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; overflow-x: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .vs-divider { display: none; } @media (min-width: 641px) { .options-grid { grid-template-columns: 1fr auto 1fr; } .vs-divider { display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0.04em; color: var(--colour-text-muted); padding: 0 var(--space-2); } } /* ============================================= EXPLANATION PANEL ============================================= */ .explanation-panel { background: var(--colour-bg-elevated); border: 1px solid var(--border-purple); border-radius: var(--radius-lg); padding: var(--space-6); margin-top: var(--space-6); animation: slideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .explanation-result { font-family: 'Montserrat', sans-serif; font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0.02em; margin-bottom: var(--space-3); } .explanation-result.correct { color: var(--colour-correct); } .explanation-result.incorrect { color: var(--colour-incorrect); } .explanation-body { font-family: 'Open Sans', sans-serif; font-size: 1rem; line-height: 1.7; color: var(--colour-text-secondary); margin-bottom: var(--space-3); } /* ============================================= SPINNER & SKELETON ============================================= */ .spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.25); border-top-color: white; border-radius: 50%; display: inline-block; animation: spin 0.7s linear infinite; vertical-align: middle; flex-shrink: 0; } .spinner-lg { width: 32px; height: 32px; border-width: 3px; } @keyframes spin { to { transform: rotate(360deg); } } .demo-side .spinner { border-color: rgba(255,255,255,0.4); border-top-color: var(--colour-purple); } .skeleton { background: linear-gradient( 90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75% ); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================= PROCESSING SCREEN — skeleton results ============================================= */ .screen-processing { align-items: center; justify-content: center; gap: var(--space-8); } .processing-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); } .processing-text { font-family: 'Montserrat', sans-serif; font-size: var(--fs-base); font-weight: 600; color: var(--colour-text-muted); } .skeleton-rows { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: 200px; } .skeleton-score { width: 180px; height: 100px; border-radius: var(--radius-lg); } .skeleton-card { width: 280px; height: 360px; border-radius: var(--radius-lg); } .skeleton-row { width: 100%; max-width: 500px; height: 20px; border-radius: var(--radius-sm); margin-bottom: var(--space-3); } .skeleton-row-short { width: 60%; } /* ============================================= RESULTS SCREEN ============================================= */ .results-screen { min-height: 100vh; padding-top: 100px; padding-bottom: var(--space-20); } .score-display { text-align: center; padding: var(--space-16) 0 var(--space-10); } .score-number { font-family: 'Montserrat', sans-serif; font-size: clamp(80px, 15vw, 140px); font-weight: 800; line-height: 0.9; background: var(--gradient-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; } .score-label { font-family: 'Montserrat', sans-serif; font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0.1em; color: var(--colour-text-muted); margin-top: var(--space-2); } .score-message { font-family: 'Open Sans', sans-serif; font-size: 1.125rem; line-height: 1.6; color: var(--colour-text-secondary); max-width: 480px; margin: var(--space-4) auto 0; text-align: center; } /* ============================================= ANSWER REVIEW LIST ============================================= */ .review-list { list-style: none; margin: var(--space-10) 0; display: grid; gap: var(--space-5); } .review-item { position: relative; background: rgba(17,17,24,0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); box-shadow: var(--shadow-card); transition: var(--transition-default); } .review-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } .review-item.wrong { border-color: rgba(239,68,68,0.15); } .review-item.right { border-color: rgba(16,185,129,0.15); } .review-badge { position: absolute; top: var(--space-4); right: var(--space-4); font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; padding: 4px 12px; border-radius: var(--radius-pill); display: flex; align-items: center; gap: 6px; } .review-badge.wrong { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); color: var(--colour-incorrect); } .review-badge.right { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25); color: var(--colour-correct); } .review-badge-icon { font-size: var(--fs-xs); line-height: 1; } .review-q-number { font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.1em; color: var(--colour-text-muted); margin-bottom: var(--space-2); } .review-q-text { font-family: 'Montserrat', sans-serif; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; color: var(--colour-text-primary); line-height: 1.15; margin-bottom: var(--space-4); max-width: 85%; } .review-answer { font-family: 'Open Sans', sans-serif; font-size: 0.9375rem; line-height: 1.55; margin-bottom: var(--space-2); } .review-answer .you-chose { color: var(--colour-text-muted); } .review-answer .correct-was { color: var(--colour-correct); } /* ============================================= LANDING / PRICING COMPARISON SECTION ============================================= */ .landing-section { background: var(--colour-bg-surface); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding: var(--space-20) var(--space-6); text-align: center; } .landing-label { font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--colour-purple); margin-bottom: var(--space-4); } .landing-headline { font-family: 'Montserrat', sans-serif; font-size: clamp(32px, 5vw, 48px); font-weight: 700; letter-spacing: -0.01em; line-height: 1; text-transform: uppercase; color: var(--colour-text-primary); margin-bottom: var(--space-3); } .landing-subline { font-family: 'Open Sans', sans-serif; font-size: 1rem; color: var(--colour-text-muted); } .cards-comparison { display: flex; gap: var(--space-12); justify-content: center; align-items: flex-start; flex-wrap: wrap; margin-top: var(--space-12); } .card-column { display: flex; flex-direction: column; align-items: center; } .card-label { font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; margin-bottom: var(--space-3); } .card-label.wrong { color: var(--colour-incorrect); } .card-label.right { color: var(--colour-correct); } /* --- Pricing Card A: wrong answers --- */ .pricing-card-a { width: 280px; background: var(--colour-bg-elevated); border: 1px solid var(--border-subtle); border-radius: 0; padding: 8px; position: relative; } .pricing-card-a .pc-plan { font-family: 'Open Sans', sans-serif; font-size: var(--fs-lg); font-weight: 500; color: var(--colour-text-primary); margin-bottom: var(--space-2); } .pricing-card-a .pc-price { font-family: 'Open Sans', sans-serif; font-size: var(--fs-2xl); font-weight: 600; color: var(--colour-text-primary); margin-bottom: var(--space-2); } .pricing-card-a .pc-price-period { font-size: var(--fs-lg); } .pricing-card-a .pc-features { list-style: none; margin-bottom: var(--space-4); } .pricing-card-a .pc-features li { font-family: 'Open Sans', sans-serif; font-size: var(--fs-sm); line-height: 1.1; color: var(--colour-text-muted); padding: 2px 0; } /* Intentionally low contrast — this is the "wrong answers" card demonstrating bad design */ .pricing-card-a .pc-button { display: block; width: 100%; background: #2a2a3a; color: #666; border: 1px solid #3a3a4a; border-radius: var(--radius-sm); padding: 10px 20px; font-family: 'Montserrat', sans-serif; font-size: var(--fs-md); font-weight: 600; letter-spacing: 0.04em; text-align: center; cursor: default; } /* --- Pricing Card B: right answers --- */ .pricing-card-b { width: 280px; background: var(--colour-bg-surface); border: 1px solid rgba(124,58,237,0.3); border-radius: var(--radius-lg); padding: 28px; position: relative; box-shadow: var(--shadow-card); transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; } .pricing-card-b:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .pricing-card-b:not(:hover) { transition: transform 0.3s ease-in, box-shadow 0.3s ease-in; } .pricing-card-b .pc-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--colour-warning); color: #000; font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; padding: 4px 14px; border-radius: var(--radius-pill); white-space: nowrap; } .pricing-card-b .pc-plan { font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--colour-text-muted); margin-bottom: var(--space-2); } .pricing-card-b .pc-price-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: var(--space-1); } .pricing-card-b .pc-price-original { text-decoration: line-through; color: rgba(255,255,255,0.25); font-family: 'Open Sans', sans-serif; font-size: var(--fs-base); } .pricing-card-b .pc-price { font-family: 'Montserrat', sans-serif; font-size: 3.25rem; font-weight: 800; line-height: 1; color: var(--colour-text-primary); } .pricing-card-b .pc-price-period { font-family: 'Open Sans', sans-serif; font-size: var(--fs-sm); color: var(--colour-text-muted); align-self: flex-end; padding-bottom: 8px; } .pricing-card-b .pc-save { display: inline-block; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25); color: var(--colour-correct); font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; padding: 3px 10px; border-radius: var(--radius-sm); margin-top: var(--space-2); margin-bottom: var(--space-4); } .pricing-card-b .pc-features { list-style: none; margin-bottom: var(--space-5); } .pricing-card-b .pc-features li { font-family: 'Open Sans', sans-serif; font-size: var(--fs-sm); line-height: 1.6; color: var(--colour-text-secondary); display: flex; align-items: flex-start; gap: 10px; padding: 3px 0; } .pricing-card-b .pc-features li::before { content: '\2713'; color: var(--colour-correct); font-size: var(--fs-xs); margin-top: 3px; flex-shrink: 0; } .pricing-card-b .pc-button { display: block; width: 100%; background: var(--colour-correct); color: white; border: none; border-radius: var(--radius-md); padding: 14px 28px; font-family: 'Montserrat', sans-serif; font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.04em; text-align: center; cursor: pointer; transition: var(--transition-fast); margin-top: var(--space-5); } .pricing-card-b .pc-button:hover { transform: scale(1.02); background: #059669; box-shadow: var(--shadow-button-green); } .pricing-card-b .pc-button:active { transform: scale(0.98); } /* ============================================= STAT LINE — below cards ============================================= */ .stat-line { font-family: 'Open Sans', sans-serif; font-size: 0.875rem; color: var(--colour-text-muted); text-align: center; margin-top: var(--space-10); } /* ============================================= PRINCIPLE PILLS ============================================= */ .principle-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; padding: var(--space-8) 0; } .principle-pill { background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); color: var(--colour-text-muted); font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.06em; padding: 6px 14px; border-radius: var(--radius-pill); cursor: pointer; transition: var(--transition-default); } .principle-pill:hover { border-color: var(--colour-purple); color: var(--colour-purple-light); background: rgba(124,58,237,0.08); } /* ============================================= LEADERBOARD ============================================= */ .leaderboard-section { padding: var(--space-12) 0; } .leaderboard-title { font-family: 'Montserrat', sans-serif; font-size: clamp(28px, 4vw, 44px); font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; color: var(--colour-text-primary); margin-bottom: var(--space-6); text-align: center; } .leaderboard-table { width: 100%; border-collapse: collapse; } .leaderboard-table th { font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; color: var(--colour-text-muted); text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); text-transform: uppercase; } .leaderboard-table td { font-family: 'Open Sans', sans-serif; font-size: 1rem; color: var(--colour-text-secondary); padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); } .leaderboard-table tr.current-user td { color: var(--colour-text-primary); background: rgba(124,58,237,0.08); } .leaderboard-table tr.current-user td:first-child { border-left: 2px solid var(--colour-purple); } .rank-number { font-family: 'Montserrat', sans-serif; font-size: var(--fs-xl); font-weight: 700; letter-spacing: 0em; color: var(--colour-text-muted); } .rank-number.top-three { background: var(--gradient-brand); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================= FOOTER ============================================= */ .site-footer { border-top: 1px solid var(--border-subtle); padding: var(--space-8) var(--space-6); text-align: center; } .footer-brand { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-2); } .footer-logo-img { height: 20px; width: auto; opacity: 0.4; } .footer-tagline { font-family: 'Open Sans', sans-serif; font-size: var(--fs-sm); font-style: italic; color: var(--colour-text-disabled); letter-spacing: 0.05em; } /* ============================================= SCREENS — viewport-contained layout ============================================= */ .screen { height: 100dvh; height: calc(var(--vh, 1vh) * 100); display: flex; flex-direction: column; overflow: hidden; overflow-x: hidden; animation: fadeIn 0.35s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ============================================= FEEDBACK SCREEN ============================================= */ .screen-feedback { padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .screen-feedback.feedback-correct { animation: greenFlash 0.5s ease; } .screen-feedback.feedback-wrong { animation: wrongShake 0.45s ease; } @keyframes greenFlash { 0% { background-color: transparent; } 20% { background-color: rgba(16,185,129,0.06); } 100% { background-color: transparent; } } @keyframes wrongShake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-6px); } 30% { transform: translateX(5px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-1px); } } .feedback-header { text-align: center; padding-top: var(--space-4); padding-bottom: 0; flex-shrink: 0; } .feedback-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 20px; border-radius: var(--radius-pill); font-family: 'Montserrat', sans-serif; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-2); } .badge-correct { background: rgba(16,185,129,0.15); color: var(--colour-correct); border: 1px solid rgba(16,185,129,0.3); } .badge-wrong { background: rgba(239,68,68,0.18); color: #f87171; border: 1px solid rgba(248,113,113,0.4); } .feedback-question { font-family: 'Montserrat', sans-serif; font-size: clamp(0.85rem, 2.2vmin, 1.1rem); font-weight: 600; line-height: 1.2; color: var(--colour-text-secondary); text-transform: uppercase; } .feedback-answers { display: flex; gap: var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-6); flex-shrink: 0; } .feedback-answer-item { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: min(1.5vmin, 8px) min(2vmin, 12px); border-radius: var(--radius-md); background: var(--colour-bg-elevated); border: 1px solid var(--border-subtle); } .feedback-answer-item.answer-correct { border-color: rgba(16,185,129,0.3); } .feedback-answer-item.answer-wrong { border-color: rgba(239,68,68,0.3); } .feedback-answer-label { font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--colour-text-muted); } .feedback-answer-value { font-family: 'Open Sans', sans-serif; font-size: var(--fs-sm); font-weight: 600; color: var(--colour-text-primary); line-height: 1.3; } .feedback-demo { flex-shrink: 0; padding-top: 0; padding-bottom: var(--space-3); } .feedback-demo-label { display: block; font-family: 'Montserrat', sans-serif; font-size: clamp(0.6rem, 1.4vmin, 0.7rem); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--colour-correct); margin-bottom: var(--space-2); text-align: center; } .feedback-demo-box { background: var(--colour-bg-elevated); border: 1px solid rgba(16,185,129,0.2); border-radius: var(--radius-md); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; height: clamp(100px, 20vh, 180px); } .feedback-explanation { flex: 0 1 auto; overflow-y: auto; padding-top: var(--space-5); padding-bottom: var(--space-5); background: var(--colour-bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .explanation-headline { font-family: 'Open Sans', sans-serif; font-size: clamp(0.875rem, 2.2vmin, 1.05rem); line-height: 1.5; color: var(--colour-text-primary); margin-bottom: 0; } .explanation-headline strong { font-weight: 600; } .explanation-detail { display: none; margin-top: var(--space-3); } .explanation-detail.open { display: block; animation: slideUp 0.25s ease; } .explanation-detail p { font-family: 'Open Sans', sans-serif; font-size: clamp(0.8rem, 1.9vmin, 0.95rem); line-height: 1.65; color: var(--colour-text-secondary); } .explanation-toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--colour-purple-light); font-family: 'Montserrat', sans-serif; font-size: clamp(0.7rem, 1.6vmin, 0.8rem); font-weight: 600; letter-spacing: 0.03em; cursor: pointer; padding: 0; margin-top: var(--space-3); transition: color 0.15s ease; } .explanation-toggle:hover { color: var(--colour-cyan); } .toggle-chevron { display: inline-block; transition: transform 0.2s ease; font-size: 0.7em; } .explanation-toggle[aria-expanded="true"] .toggle-chevron { transform: rotate(180deg); } .feedback-explanation p { font-family: 'Open Sans', sans-serif; font-size: clamp(0.825rem, 2vmin, 1rem); line-height: 1.65; color: var(--colour-text-secondary); } .feedback-tip { display: flex; align-items: flex-start; gap: var(--space-2); padding-top: var(--space-4); padding-bottom: 0; flex-shrink: 0; color: var(--colour-warning); } .feedback-tip svg { flex-shrink: 0; margin-top: 2px; opacity: 0.7; } .feedback-tip span { font-family: 'Open Sans', sans-serif; font-size: clamp(0.75rem, 1.8vmin, 0.85rem); line-height: 1.4; color: var(--colour-text-muted); } .feedback-action { margin-top: auto; padding-top: var(--space-5); padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; } .feedback-next-btn { width: 100%; } /* ============================================= RESULTS SCREEN ============================================= */ .screen-results { padding: min(2vmin, 10px) 0; } .results-score { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: min(2vmin, 10px) 0; } .score-ring-wrap { position: relative; width: min(80px, 15vmin); height: min(80px, 15vmin); } .score-ring { width: 100%; height: 100%; transform: rotate(-90deg); } .score-ring-bg { fill: none; stroke: var(--colour-bg-elevated); stroke-width: 6; } .score-ring-fill { fill: none; stroke: url(#scoreGradient); stroke: var(--colour-correct); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s ease; } .score-ring-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; } .score-number { font-family: 'Montserrat', sans-serif; font-size: clamp(1.2rem, 4vmin, 1.8rem); font-weight: 800; color: var(--colour-text-primary); } .score-divider { font-family: 'Montserrat', sans-serif; font-size: clamp(0.65rem, 2vmin, 0.85rem); font-weight: 500; color: var(--colour-text-muted); } .score-meta { display: flex; flex-direction: column; gap: 2px; } .score-pct { font-family: 'Montserrat', sans-serif; font-size: clamp(1rem, 3vmin, 1.4rem); font-weight: 700; color: var(--colour-text-primary); } .score-time { font-family: 'Open Sans', sans-serif; font-size: var(--fs-xs); color: var(--colour-text-muted); } .results-hero { flex-shrink: 0; text-align: center; padding: 0 min(3vmin, 16px); } .persona-desc { font-family: 'Open Sans', sans-serif; font-size: clamp(0.75rem, 1.8vmin, 0.9rem); line-height: 1.5; color: var(--colour-text-secondary); max-width: 420px; margin: var(--space-1) auto var(--space-2); } .percentile-stat { font-family: 'Montserrat', sans-serif; font-size: clamp(0.65rem, 1.5vmin, 0.8rem); font-weight: 600; letter-spacing: 0.02em; color: var(--colour-text-muted); margin-bottom: var(--space-2); } .percentile-stat strong { color: var(--colour-cyan); font-weight: 700; } /* Tabs */ .results-tabs { display: flex; border-bottom: 1px solid var(--border-subtle); padding: 0 min(3vmin, 16px); flex-shrink: 0; } .tab-btn { flex: 1; background: none; border: none; border-bottom: 2px solid transparent; padding: min(1.5vmin, 8px) var(--space-2); font-family: 'Montserrat', sans-serif; font-size: clamp(0.7rem, 1.8vmin, 0.85rem); font-weight: 600; letter-spacing: 0.03em; color: var(--colour-text-muted); cursor: pointer; transition: var(--transition-fast); text-transform: uppercase; } .tab-btn:hover { color: var(--colour-text-secondary); } .tab-btn.active { color: var(--colour-text-primary); border-bottom-color: var(--colour-magenta); } .tab-panels { flex: 1; min-height: 0; position: relative; } .tab-panel { display: none; height: 100%; overflow-y: auto; padding: min(2vmin, 12px) min(3vmin, 16px); } .tab-panel.active { display: block; } .empty-state { text-align: center; padding: var(--space-8); font-family: 'Open Sans', sans-serif; font-size: var(--fs-base); color: var(--colour-text-muted); } /* Lesson tab */ .lesson-intro { text-align: center; margin-bottom: min(3vmin, 16px); } .lesson-title { font-family: 'Montserrat', sans-serif; font-size: clamp(0.9rem, 2.5vmin, 1.3rem); font-weight: 700; text-transform: uppercase; color: var(--colour-text-primary); margin-bottom: var(--space-1); } .lesson-subtitle { font-family: 'Open Sans', sans-serif; font-size: clamp(0.75rem, 1.8vmin, 0.9rem); color: var(--colour-text-muted); line-height: 1.4; } /* Review compact cards */ .review-list { display: flex; flex-direction: column; gap: var(--space-3); } .review-compact { background: var(--colour-bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: min(2vmin, 10px) min(2.5vmin, 12px); } .review-compact-header { margin-bottom: var(--space-1); } .review-compact-cat { font-family: 'Montserrat', sans-serif; font-size: clamp(0.6rem, 1.4vmin, 0.7rem); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--colour-magenta); display: block; margin-bottom: 2px; } .review-compact-q { font-family: 'Montserrat', sans-serif; font-size: clamp(0.75rem, 1.8vmin, 0.9rem); font-weight: 600; color: var(--colour-text-primary); line-height: 1.2; display: block; } .review-compact-answers { display: flex; gap: var(--space-3); margin: var(--space-1) 0; } .rc-wrong { font-family: 'Open Sans', sans-serif; font-size: clamp(0.7rem, 1.6vmin, 0.8rem); color: var(--colour-incorrect); } .rc-correct { font-family: 'Open Sans', sans-serif; font-size: clamp(0.7rem, 1.6vmin, 0.8rem); color: var(--colour-correct); } .review-compact-explain { font-family: 'Open Sans', sans-serif; font-size: clamp(0.7rem, 1.6vmin, 0.8rem); line-height: 1.4; color: var(--colour-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Leaderboard in tab */ .tab-panel .leaderboard-table { width: 100%; font-size: clamp(0.75rem, 1.8vmin, 0.9rem); } .lb-me { background: rgba(124,58,237,0.1); } .lb-challenge { text-align: center; padding: var(--space-6) var(--space-4); font-family: 'Open Sans', sans-serif; font-size: var(--fs-sm); color: var(--colour-text-muted); font-style: italic; } .lb-me td { color: var(--colour-text-primary); font-weight: 600; } /* Results footer */ .results-footer { padding: min(1.5vmin, 8px) min(3vmin, 16px) calc(min(2vmin, 12px) + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; } .results-actions { display: flex; gap: var(--space-3); align-items: stretch; } .results-actions .share-btn { flex-shrink: 0; white-space: nowrap; } .results-actions .results-retake-btn { flex: 1; text-align: center; } .share-toast { position: fixed; bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--colour-bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-5); font-family: 'Montserrat', sans-serif; font-size: var(--fs-sm); font-weight: 600; color: var(--colour-correct); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; z-index: 200; } .share-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================= RESPONSIVE ============================================= */ /* --- Tablet (768px) --- */ @media (max-width: 768px) { .site-header { padding: 0 var(--space-4); } .signup-card { padding: var(--space-8); } .cards-comparison { gap: var(--space-4); } .pricing-card-a, .pricing-card-b { width: 100%; max-width: 280px; } .leaderboard-table td { padding: var(--space-3); } } /* --- Mobile (480px) --- */ @media (max-width: 480px) { :root { --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.1875rem; --fs-2xl: 1.25rem; } .signup-card { padding: var(--space-6); border-radius: var(--radius-lg); } .question-text { font-size: clamp(0.85rem, 2.5vmin, 1.2rem); margin-bottom: min(1.5vmin, 8px); } .question-meta { flex-direction: row; gap: var(--space-2); margin-bottom: min(1vmin, 4px); } .demo-area { max-height: 40vh; min-height: 60px; } .option-btn { padding: min(2vmin, 10px) min(2.5vmin, 12px); } .pricing-card-b .pc-price { font-size: 2.75rem; } .principle-pills { gap: var(--space-2); } .principle-pill { padding: 8px 14px; } .score-display { padding: var(--space-10) 0 var(--space-8); } .leaderboard-table th, .leaderboard-table td { padding: var(--space-2) var(--space-3); } .landing-section { padding: var(--space-12) var(--space-4); } .progress-section { padding: var(--space-3) var(--space-5) var(--space-1); gap: var(--space-1); } .feedback-badge { padding: 4px 14px; font-size: var(--fs-xs); margin-bottom: var(--space-1); } .feedback-question { font-size: clamp(0.75rem, 2vmin, 0.95rem); } .feedback-answers { padding-top: var(--space-2); padding-bottom: var(--space-4); } .feedback-explanation { padding-top: var(--space-4); padding-bottom: var(--space-4); } .feedback-tip { padding-top: var(--space-3); } .feedback-action { padding-top: var(--space-4); padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); } .feedback-demo-box { height: clamp(80px, 16vh, 130px); } } /* --- Small mobile / iPhone SE (375px) --- */ @media (max-width: 380px) { :root { --fs-xs: 0.75rem; --fs-sm: 0.8125rem; } .container, .container-narrow { padding: 0 var(--space-3); } .signup-card { padding: var(--space-5); } .question-text { font-size: clamp(0.8rem, 2.2vmin, 1rem); margin-bottom: min(1vmin, 6px); } .demo-area { max-height: 35vh; min-height: 50px; gap: var(--space-2); } .option-btn { padding: 8px 10px; gap: var(--space-2); } .option-letter { width: 26px; height: 26px; font-size: var(--fs-xs); } .option-btn-title { font-size: clamp(0.7rem, 1.8vmin, 0.85rem); } .option-btn-mc .option-btn-title { font-size: clamp(0.65rem, 1.6vmin, 0.8rem); } .progress-section { padding: var(--space-2) var(--space-3) var(--space-1); gap: 2px; } .option-card { padding: var(--space-4); } .screen-question { padding: 4px var(--space-3); padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); } .feedback-header { padding-top: var(--space-2); } .feedback-answers { padding-top: var(--space-1); padding-bottom: var(--space-3); } .feedback-explanation { padding-top: var(--space-3); padding-bottom: var(--space-3); } .feedback-tip { padding-top: var(--space-2); } .feedback-action { padding-top: var(--space-3); padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); } } /* --- Very short viewports (landscape phones, short devices) --- */ @media (max-height: 600px) { .demo-area { max-height: 25vh; min-height: 50px; } .question-text { font-size: clamp(0.8rem, 2vmin, 1rem); margin-bottom: 4px; } .progress-section { padding: var(--space-1) var(--space-3) 2px; gap: 2px; } .feedback-header { padding-top: var(--space-1); } .feedback-badge { padding: 3px 12px; margin-bottom: 2px; } .feedback-answers { padding-top: var(--space-1); padding-bottom: var(--space-2); } .feedback-explanation { padding-top: var(--space-2); padding-bottom: var(--space-2); } .feedback-tip { padding-top: var(--space-2); } .feedback-action { padding-top: var(--space-2); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); } .signup-card { padding: var(--space-4); } .signup-title { font-size: clamp(24px, 7vw, 40px); margin-bottom: var(--space-2); word-break: break-word; overflow-wrap: break-word; } .signup-subtitle { margin-bottom: var(--space-4); font-size: 0.9rem; } } /* ============================================= STREAK COUNTER ============================================= */ .streak-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-family: 'Montserrat', sans-serif; font-size: clamp(0.6rem, 1.5vmin, 0.75rem); font-weight: 700; letter-spacing: 0.03em; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25); color: var(--colour-warning); animation: streakPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes streakPop { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } /* ============================================= AUTO-ADVANCE COUNTDOWN ============================================= */ .auto-advance-bar { position: relative; height: 3px; background: var(--colour-bg-elevated); border-radius: 2px; overflow: hidden; margin-bottom: var(--space-2); } .auto-advance-fill { height: 100%; background: var(--colour-correct); border-radius: 2px; animation: autoAdvance 0.8s linear forwards; } @keyframes autoAdvance { from { width: 100%; } to { width: 0%; } } .auto-advance-label { font-family: 'Montserrat', sans-serif; font-size: clamp(0.6rem, 1.4vmin, 0.7rem); font-weight: 600; letter-spacing: 0.04em; color: var(--colour-text-muted); text-align: center; display: block; margin-bottom: var(--space-1); } /* ============================================= UX PERSONA BADGE (RESULTS) ============================================= */ .persona-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 14px; border-radius: var(--radius-pill); font-family: 'Montserrat', sans-serif; font-size: clamp(0.65rem, 1.6vmin, 0.8rem); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin-top: var(--space-1); } .persona-badge.persona-legend { background: rgba(233,30,140,0.12); border: 1px solid rgba(233,30,140,0.3); color: var(--colour-magenta); } .persona-badge.persona-expert { background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.3); color: var(--colour-purple-light); } .persona-badge.persona-solid { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); color: var(--colour-correct); } .persona-badge.persona-rising { background: rgba(0,212,255,0.12); border: 1px solid rgba(0,212,255,0.3); color: var(--colour-cyan); } .persona-badge.persona-rookie { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); color: var(--colour-warning); } /* ============================================= UTILITY — SCREEN READER ONLY ============================================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================= FOCUS VISIBLE — WCAG 2.4.7 ============================================= */ :focus-visible { outline: 2px solid var(--colour-cyan); outline-offset: 2px; } .option-btn:focus-visible { border-color: var(--colour-cyan); box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.25); outline: none; } .btn-primary:focus-visible { box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.35); outline: none; } .btn-ghost:focus-visible, .btn-secondary:focus-visible { border-color: var(--colour-cyan); box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.25); outline: none; } .tab-btn:focus-visible { outline: 2px solid var(--colour-cyan); outline-offset: -2px; } .form-input:focus-visible { border-color: var(--colour-purple); box-shadow: 0 0 0 3px rgba(124,58,237,0.15); background: var(--colour-bg-overlay); outline: none; } .results-retake-btn:focus-visible { box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.35); outline: none; } /* ============================================= REDUCED MOTION — WCAG 2.3.3 ============================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }