/** * design-system.css — Wealth Legacy Lab * ───────────────────────────────────────────────────────────────────────────── * The single source of truth for all visual decisions across every Wealth Legacy * Lab module. Every module links to this file. No module hardcodes values that * are defined here. * * CONTENTS * 1. Custom Properties (Design Tokens) * 2. Colour Scheme * 3. CSS Reset & Base * 4. Typography Utility Classes * 5. Spacing Utilities * 6. Flex & Grid Utilities * 7. Visibility & Display * 8. Card System * 9. Button System * 10. Form Fields * 11. Range Slider * 12. Badges & Tags * 13. Progress Bar & Step Indicator * 14. Calculation Display * 15. Tooltip * 16. Divider * 17. Section Header * 18. Skeleton / Loading * 19. Keyframe Animations * 20. Page Layout (Header, Wrapper, Nav, Footer) * 21. Responsive Breakpoint Utilities * 22. Print / PDF * * BRAND TOKENS (quick reference) * --c-brand #243b2e Forest green (primary) * --c-accent #b08a50 Honey gold (accent / CTA) * --c-bg #eeebe6 Warm linen (page background) * * FONTS * Each module is responsible for loading its own fonts via Google Fonts * or a self-hosted equivalent. The variables --font-display / --font-body * are set here; the actual @import lives in the module's . * ───────────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ 1. CUSTOM PROPERTIES (Design Tokens) ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Colour Palette — WealthLegacy theme ──────────────────────────────── */ /* Forest Green (primary brand) */ --color-navy-900: #0c1a0f; --color-navy-800: #243b2e; /* brand primary */ --color-navy-700: #1e3323; --color-navy-600: #2d4e37; --color-navy-100: #e0ebe3; --color-navy-50: #edf4ef; /* Honey Gold (accent) */ --color-gold-700: #7a5e30; --color-gold-600: #9a7040; --color-gold-500: #b08a50; /* brand accent */ --color-gold-400: #c4a46a; --color-gold-200: #e4d0a5; --color-gold-100: #f4eddf; --color-gold-50: #faf7ee; /* Neutrals — warm undertone */ --color-neutral-900: #1c1c18; --color-neutral-800: #2e2e28; --color-neutral-700: #3f3f38; --color-neutral-500: #5e6058; --color-neutral-400: #8a8880; --color-neutral-300: #b2b0a8; --color-neutral-200: #d5d2cb; --color-neutral-100: #ebe8e2; --color-neutral-50: #eeebe6; --color-white: #ffffff; /* Semantic */ --color-success-700: #035c40; --color-success-500: #057a55; --color-success-100: #d1fae5; --color-warning-600: #c05621; --color-warning-100: #fef3c7; --color-danger-600: #b91c1c; --color-danger-100: #fee2e2; --color-info-600: #1d4ed8; --color-info-100: #dbeafe; /* ── Semantic Aliases ──────────────────────────────────────────────────── */ --c-brand: var(--color-navy-800); --c-brand-light: var(--color-navy-100); --c-accent: var(--color-gold-500); --c-accent-light: var(--color-gold-100); --c-accent-subtle: var(--color-gold-50); --c-bg: var(--color-neutral-50); --c-surface: var(--color-white); --c-surface-raised: var(--color-white); --c-border: var(--color-neutral-200); --c-border-subtle: var(--color-neutral-100); --c-text-primary: var(--color-neutral-900); --c-text-secondary: var(--color-neutral-500); --c-text-muted: var(--color-neutral-400); --c-text-inverse: var(--color-white); --c-text-accent: var(--color-gold-600); --c-text-brand: var(--color-navy-800); --c-success: var(--color-success-500); --c-warning: var(--color-warning-600); --c-danger: var(--color-danger-600); /* ── Typography ─────────────────────────────────────────────────────────── */ --font-display: 'Playfair Display', 'Georgia', serif; --font-body: 'Inter', 'Helvetica Neue', 'Arial', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ── Spacing Scale ────────────────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* ── Border Radius ────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ── Shadows ──────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(36, 59, 46, 0.05); --shadow-sm: 0 2px 8px rgba(36, 59, 46, 0.07), 0 1px 2px rgba(36, 59, 46, 0.04); --shadow-md: 0 4px 16px rgba(36, 59, 46, 0.09), 0 2px 4px rgba(36, 59, 46, 0.05); --shadow-lg: 0 8px 32px rgba(36, 59, 46, 0.11), 0 4px 8px rgba(36, 59, 46, 0.06); --shadow-xl: 0 16px 48px rgba(36, 59, 46, 0.15), 0 6px 12px rgba(36, 59, 46, 0.07); --shadow-gold: 0 4px 24px rgba(176, 138, 80, 0.22); /* ── Transitions ──────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; /* ── Layout ───────────────────────────────────────────────────────────── */ --max-width: 900px; --sidebar-width: 260px; --header-height: 72px; --progress-height: 4px; } /* ═══════════════════════════════════════════════════════════════════════════ 2. COLOUR SCHEME — always light Dark mode is planned for a future version once the full design is finalised. Forcing light ensures every colour token renders as intended. ═══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; } /* ═══════════════════════════════════════════════════════════════════════════ 3. CSS RESET & BASE ═══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--c-text-primary); background-color: var(--c-bg); min-height: 100vh; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; } button { cursor: pointer; } a { color: var(--c-accent); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--color-gold-700); } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--c-text-primary); } /* ═══════════════════════════════════════════════════════════════════════════ 4. TYPOGRAPHY UTILITY CLASSES ═══════════════════════════════════════════════════════════════════════════ */ .text-display { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); } .text-heading-1{ font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); } .text-heading-2{ font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); } .text-heading-3{ font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); } .text-body-lg { font-size: var(--text-lg); line-height: var(--leading-relaxed); } .text-body { font-size: var(--text-base); line-height: var(--leading-normal); } .text-body-sm { font-size: var(--text-sm); line-height: var(--leading-normal); } .text-caption { font-size: var(--text-xs); line-height: var(--leading-normal); } .text-primary { color: var(--c-text-primary); } .text-secondary { color: var(--c-text-secondary); } .text-muted { color: var(--c-text-muted); } .text-accent { color: var(--c-accent); } .text-brand { color: var(--c-brand); } .text-success { color: var(--c-success); } .text-warning { color: var(--c-warning); } .text-danger { color: var(--c-danger); } .font-regular { font-weight: var(--weight-regular); } .font-medium { font-weight: var(--weight-medium); } .font-semibold { font-weight: var(--weight-semibold); } .font-bold { font-weight: var(--weight-bold); } .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } .text-center { text-align: center; } .text-right { text-align: right; } /* ═══════════════════════════════════════════════════════════════════════════ 5. SPACING UTILITIES ═══════════════════════════════════════════════════════════════════════════ */ .mt-2 { margin-top: var(--space-2); } .mb-2 { margin-bottom: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mb-4 { margin-bottom: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mb-6 { margin-bottom: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-8 { margin-bottom: var(--space-8); } .gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); } .px-4 { padding-inline: var(--space-4); } .px-6 { padding-inline: var(--space-6); } .py-4 { padding-block: var(--space-4); } .py-6 { padding-block: var(--space-6); } /* ═══════════════════════════════════════════════════════════════════════════ 6. FLEX & GRID UTILITIES ═══════════════════════════════════════════════════════════════════════════ */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .flex-1 { flex: 1; } .w-full { width: 100%; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } /* ═══════════════════════════════════════════════════════════════════════════ 7. VISIBILITY & DISPLAY ═══════════════════════════════════════════════════════════════════════════ */ .hidden { display: none !important; } /* Screen-reader-only — visually hidden, accessible to assistive technology */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* ═══════════════════════════════════════════════════════════════════════════ 8. CARD SYSTEM ═══════════════════════════════════════════════════════════════════════════ */ .card { background: var(--c-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--c-border-subtle); padding: var(--space-8); transition: box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); } .card--elevated { box-shadow: var(--shadow-md); } .card--hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .card--accent { border-left: 4px solid var(--c-accent); } .card--brand { background: var(--c-brand); color: var(--c-text-inverse); border-color: transparent; } .card--gold { background: linear-gradient(135deg, var(--color-gold-50) 0%, var(--color-gold-100) 100%); border: 1px solid var(--color-gold-200); box-shadow: var(--shadow-gold); } .card--info { background: var(--color-info-100); border-color: var(--color-info-600); border-left: 4px solid var(--color-info-600); } .card--success { background: var(--color-success-100); border-left: 4px solid var(--c-success); } .card--warning { background: #fef3c7; border-left: 4px solid #c05621; color: #7c2d12; } .card__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--c-border-subtle); } .card__icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--c-accent-light); display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); flex-shrink: 0; } .card__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--c-text-primary); } .card__subtitle { font-size: var(--text-sm); color: var(--c-text-secondary); margin-top: var(--space-1); } /* ═══════════════════════════════════════════════════════════════════════════ 9. BUTTON SYSTEM ═══════════════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-semibold); font-family: var(--font-body); letter-spacing: 0.01em; border: 2px solid transparent; cursor: pointer; user-select: none; white-space: nowrap; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .btn:active { transform: scale(0.97); } .btn--primary { background: var(--c-brand); color: var(--c-text-inverse); box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--color-navy-700); box-shadow: var(--shadow-md); } .btn--accent { background: var(--c-accent); color: var(--c-text-inverse); box-shadow: var(--shadow-gold); } .btn--accent:hover { background: var(--color-gold-600); box-shadow: 0 6px 28px rgba(184, 151, 62, 0.35); } .btn--outline { background: transparent; color: var(--c-brand); border-color: var(--c-brand); } .btn--outline:hover { background: var(--c-brand-light); } .btn--ghost { background: transparent; color: var(--c-text-secondary); border-color: transparent; } .btn--ghost:hover { background: var(--c-border-subtle); color: var(--c-text-primary); } .btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); } .btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); } .btn--icon { width: 40px; height: 40px; padding: 0; } .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } /* Toggle button group (preset selectors) */ .btn-group { display: flex; flex-wrap: wrap; gap: var(--space-2); } .btn-toggle { padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 2px solid var(--c-border); background: var(--c-surface); color: var(--c-text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .btn-toggle:hover { border-color: var(--c-accent); color: var(--c-accent); } .btn-toggle.is-active { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-text-inverse); box-shadow: var(--shadow-sm); } /* ═══════════════════════════════════════════════════════════════════════════ 10. FORM FIELDS ═══════════════════════════════════════════════════════════════════════════ */ .field { display: flex; flex-direction: column; gap: var(--space-2); } .field + .field { margin-top: var(--space-6); } .label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--c-text-primary); display: flex; align-items: center; gap: var(--space-2); } .label__hint { font-weight: var(--weight-regular); color: var(--c-text-muted); font-size: var(--text-xs); } .input { width: 100%; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); color: var(--c-text-primary); font-size: var(--text-base); outline: none; appearance: none; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(176, 138, 80, 0.15); } .input:hover:not(:focus) { border-color: var(--color-neutral-300); } .input--prefix { padding-left: var(--space-10); } .field-wrapper { position: relative; } .field-prefix { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--c-text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); pointer-events: none; } .select { width: 100%; padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4); border: 1.5px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6b7a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-4) center; color: var(--c-text-primary); font-size: var(--text-base); cursor: pointer; outline: none; appearance: none; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .select:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(176, 138, 80, 0.15); } .field__help { font-size: var(--text-xs); color: var(--c-text-muted); } .field__error { font-size: var(--text-xs); color: var(--c-danger); display: flex; gap: var(--space-1); align-items: center; } /* ═══════════════════════════════════════════════════════════════════════════ 11. RANGE SLIDER ═══════════════════════════════════════════════════════════════════════════ */ .slider-field { display: flex; flex-direction: column; gap: var(--space-3); } .slider-header { display: flex; justify-content: space-between; align-items: baseline; } .slider-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--c-accent); } .slider-value__unit { font-size: var(--text-base); font-family: var(--font-body); color: var(--c-text-secondary); margin-left: var(--space-1); } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: linear-gradient( to right, var(--c-accent) 0%, var(--c-accent) var(--slider-pct, 50%), var(--c-border) var(--slider-pct, 50%), var(--c-border) 100% ); border-radius: var(--radius-full); outline: none; cursor: pointer; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--c-surface); border: 3px solid var(--c-accent); box-shadow: var(--shadow-md); cursor: pointer; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } input[type="range"]::-webkit-slider-thumb:hover, input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); box-shadow: var(--shadow-gold); } input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--c-surface); border: 3px solid var(--c-accent); box-shadow: var(--shadow-md); cursor: pointer; } .slider-ticks { display: flex; justify-content: space-between; padding: 0 2px; } .slider-tick { font-size: var(--text-xs); color: var(--c-text-muted); } /* ═══════════════════════════════════════════════════════════════════════════ 12. BADGES & TAGS ═══════════════════════════════════════════════════════════════════════════ */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.02em; text-transform: uppercase; } .badge--accent { background: var(--c-accent-light); color: var(--color-gold-700); } .badge--brand { background: var(--c-brand-light); color: var(--c-brand); } .badge--success { background: var(--color-success-100); color: var(--c-success); } .badge--warning { background: var(--color-warning-100); color: var(--c-warning); } .badge--danger { background: var(--color-danger-100); color: var(--c-danger); } .badge--neutral { background: var(--c-border-subtle); color: var(--c-text-secondary); } /* ═══════════════════════════════════════════════════════════════════════════ 13. PROGRESS BAR & STEP INDICATOR ═══════════════════════════════════════════════════════════════════════════ */ /* Thin top-of-page progress stripe */ .progress-stripe { position: fixed; top: 0; left: 0; right: 0; height: var(--progress-height); background:var(--c-border-subtle); z-index: 1000; overflow: hidden; } .progress-stripe__fill { height: 100%; background: linear-gradient(90deg, var(--c-brand), var(--c-accent)); transition: width var(--duration-slow) var(--ease-out); border-radius: 0 var(--radius-full) var(--radius-full) 0; } /* Step indicator dots */ .step-indicator { display: flex; align-items: center; justify-content: center; gap: 0; padding: var(--space-6) 0; } .step-dot { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); position: relative; flex: 1; max-width: 120px; } .step-dot::before { content: ''; position: absolute; top: 14px; left: calc(-50% + 14px); right: calc(50% + 14px); height: 2px; background: var(--c-border); transition: background var(--duration-slow) var(--ease-out); } .step-dot:first-child::before { display: none; } .step-dot.is-complete::before { background: var(--c-accent); } .step-dot__circle { width: 28px; height: 28px; border-radius: var(--radius-full); border: 2px solid var(--c-border); background: var(--c-surface); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--c-text-muted); transition: all var(--duration-normal) var(--ease-out); z-index: 1; position: relative; } .step-dot.is-active .step-dot__circle { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-text-inverse); box-shadow: var(--shadow-md); width: 32px; height: 32px; } .step-dot.is-complete .step-dot__circle { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-text-inverse); } .step-dot__label { font-size: var(--text-xs); color: var(--c-text-muted); text-align: center; max-width: 80px; line-height: var(--leading-tight); transition: color var(--duration-normal) var(--ease-out); } .step-dot.is-active .step-dot__label { color: var(--c-brand); font-weight: var(--weight-semibold); } .step-dot.is-complete .step-dot__label { color: var(--c-accent); } @media (max-width: 640px) { .step-dot__label { display: none; } .step-dot { max-width: 40px; } } /* ═══════════════════════════════════════════════════════════════════════════ 14. CALCULATION DISPLAY ═══════════════════════════════════════════════════════════════════════════ */ .calc-display { background: linear-gradient(135deg, var(--c-brand) 0%, var(--color-navy-700) 100%); color: var(--c-text-inverse); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-8); margin-top: var(--space-6); display: flex; flex-direction:column; gap: var(--space-2); } .calc-display__label { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.65); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.08em; } .calc-display__value { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-bold); color: var(--c-text-inverse); line-height: 1; transition: all var(--duration-normal) var(--ease-out); } .calc-display__sub { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.5); } .calc-row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--c-border-subtle); font-size: var(--text-sm); } .calc-row:last-child { border-bottom: none; } .calc-row__label { color: var(--c-text-secondary); } .calc-row__value { font-weight: var(--weight-semibold); color: var(--c-text-primary); font-variant-numeric: tabular-nums; } .calc-row--total .calc-row__label, .calc-row--total .calc-row__value { color: var(--c-brand); font-size: var(--text-base); font-weight: var(--weight-bold); } /* ═══════════════════════════════════════════════════════════════════════════ 15. TOOLTIP ═══════════════════════════════════════════════════════════════════════════ */ .tooltip-trigger { position: relative; display: inline-flex; align-items: center; cursor: help; } .tooltip-trigger .tooltip-content { position: absolute; bottom: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--color-neutral-900); color: var(--c-text-inverse); font-size: var(--text-xs); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); max-width: 220px; text-align: center; pointer-events: none; opacity: 0; z-index: 100; box-shadow: var(--shadow-lg); white-space: normal; transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .tooltip-trigger:hover .tooltip-content, .tooltip-trigger:focus .tooltip-content { opacity: 1; transform: translateX(-50%) translateY(0); } .tooltip-icon { width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--c-border); color: var(--c-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); display: inline-flex; align-items: center; justify-content: center; margin-left: var(--space-1); cursor: help; } /* ═══════════════════════════════════════════════════════════════════════════ 16. DIVIDER ═══════════════════════════════════════════════════════════════════════════ */ .divider { height: 1px; background: var(--c-border-subtle); margin: var(--space-6) 0; } .divider--label { display: flex; align-items: center; gap: var(--space-4); color: var(--c-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; } .divider--label::before, .divider--label::after { content: ''; flex: 1; height: 1px; background: var(--c-border-subtle); } /* ═══════════════════════════════════════════════════════════════════════════ 17. SECTION HEADER ═══════════════════════════════════════════════════════════════════════════ */ .section-header { text-align: center; padding: var(--space-10) 0 var(--space-8); max-width: 600px; margin: 0 auto; } .section-header__eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--c-accent); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--space-3); } .section-header__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--c-text-primary); margin-bottom: var(--space-3); line-height: var(--leading-tight); } .section-header__desc { font-size: var(--text-lg); color: var(--c-text-secondary); line-height: var(--leading-relaxed); } /* ═══════════════════════════════════════════════════════════════════════════ 18. SKELETON / LOADING ═══════════════════════════════════════════════════════════════════════════ */ @keyframes wll-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .skeleton { background: var(--c-border-subtle); border-radius: var(--radius-sm); animation: wll-pulse 1.5s ease-in-out infinite; } /* ═══════════════════════════════════════════════════════════════════════════ 19. KEYFRAME ANIMATIONS ═══════════════════════════════════════════════════════════════════════════ */ @keyframes wll-slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes wll-slideInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes wll-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-enter-right { animation: wll-slideInRight var(--duration-slow) var(--ease-out) both; } .animate-enter-left { animation: wll-slideInLeft var(--duration-slow) var(--ease-out) both; } .animate-fade-up { animation: wll-fadeInUp var(--duration-slow) var(--ease-out) both; } /* Staggered children */ .stagger-children > * { animation: wll-fadeInUp var(--duration-slow) var(--ease-out) both; } .stagger-children > *:nth-child(1) { animation-delay: 0ms; } .stagger-children > *:nth-child(2) { animation-delay: 80ms; } .stagger-children > *:nth-child(3) { animation-delay: 160ms; } .stagger-children > *:nth-child(4) { animation-delay: 240ms; } .stagger-children > *:nth-child(5) { animation-delay: 320ms; } .stagger-children > *:nth-child(6) { animation-delay: 400ms; } .stagger-children > *:nth-child(7) { animation-delay: 480ms; } .stagger-children > *:nth-child(8) { animation-delay: 560ms; } /* ═══════════════════════════════════════════════════════════════════════════ 20. PAGE LAYOUT ═══════════════════════════════════════════════════════════════════════════ */ /* ── Site Header ── */ .site-header { position: sticky; top: var(--progress-height); left: 0; right: 0; height: var(--header-height); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--c-border-subtle); z-index: 500; transition: box-shadow var(--duration-normal) var(--ease-out); } .site-header.is-scrolled { box-shadow: var(--shadow-sm); } .site-header__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-6); height: 100%; display: flex; align-items: center; justify-content: space-between; } .site-logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; } .site-logo__mark { width: 40px; height: 40px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--c-brand), var(--color-navy-700)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .site-logo__mark svg { width: 22px; height: 22px; } .site-logo__text { display: flex; flex-direction: column; } .site-logo__name { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--c-brand); line-height: 1.2; } .site-logo__tagline { font-size: var(--text-xs); color: var(--c-text-muted); line-height: 1.2; } .header-step-badge { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--c-text-secondary); } .header-step-badge__num { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--c-accent); } @media (max-width: 480px) { .site-logo__tagline { display: none; } .site-logo__name { font-size: var(--text-sm); } .site-header__inner { padding: 0 var(--space-4); } } /* ── Page Wrapper ── */ .page-wrapper { min-height: calc(100vh - var(--header-height) - var(--progress-height)); display: flex; flex-direction:column; } .content-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-6) var(--space-20); flex: 1; width: 100%; } @media (max-width: 640px) { .content-container { padding: 0 var(--space-4) var(--space-16); } } /* ── Step Panels ── */ .step-panel { display: none; width: 100%; } .step-panel.is-active{ display: block; } .step-nav-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 var(--space-4); } .step-nav-wrapper::-webkit-scrollbar { display: none; } /* ── Sticky Bottom Nav Bar ── */ .nav-bar { position: sticky; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--c-border-subtle); z-index: 400; padding: var(--space-4) var(--space-6); } .nav-bar__inner { max-width: var(--max-width); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); } .nav-bar__progress-text { font-size: var(--text-sm); color: #5e6058; white-space: nowrap; } .nav-bar__progress-text strong { color: #1c1c18; font-weight: var(--weight-semibold); } @media (max-width: 480px) { .nav-bar__progress-text { display: none; } .nav-bar { padding: var(--space-3) var(--space-4); } } /* ── Site Footer ── */ .site-footer { background: var(--c-brand); color: rgba(255, 255, 255, 0.6); padding: var(--space-8) var(--space-6); text-align: center; font-size: var(--text-xs); line-height: var(--leading-relaxed); margin-top: auto; } .site-footer a { color: rgba(255, 255, 255, 0.8); transition: color var(--duration-fast) var(--ease-out); } .site-footer a:hover { color: var(--c-accent); } .site-footer__inner { max-width: var(--max-width); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid rgba(255,255,255,0.15); margin-bottom: var(--space-6); } .site-footer__brand { text-align: left; } .site-footer__logo { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-bold); color: rgba(255,255,255,0.9); margin-bottom: var(--space-2); } .site-footer__tagline{ font-size: var(--text-xs); color: rgba(255,255,255,0.5); line-height: var(--leading-relaxed); max-width: 280px; } .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); } .site-footer__disclaimer { max-width: 640px; margin: 0 auto; } .site-footer__copy { margin-top: var(--space-3); opacity: 0.4; } @media (max-width: 640px) { .site-footer__inner { flex-direction: column; text-align: center; } .site-footer__brand { text-align: center; } .site-footer__links { justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════════════ 21. RESPONSIVE BREAKPOINT UTILITIES ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .hide-mobile { display: none !important; } } @media (min-width: 641px) { .show-mobile { display: none !important; } } @media (max-width: 1024px) { .hide-tablet { display: none !important; } } @media (min-width: 1025px) { .show-tablet { display: none !important; } } @media (max-width: 768px) { .section-header__title { font-size: var(--text-2xl); } .calc-display__value { font-size: var(--text-3xl); } } /* ═══════════════════════════════════════════════════════════════════════════ 22. PRINT / PDF Used by window.print() in each module's results step. Module styles add their own print rules for step-specific elements. ═══════════════════════════════════════════════════════════════════════════ */ @media print { .site-header, .nav-bar, .progress-stripe, .site-footer { display: none !important; } body, .page-wrapper { background: white !important; } .card { box-shadow: none !important; border: 1px solid #d5d2cb !important; break-inside: avoid; } #pdf-logo-header, #pdf-disclaimer { display: block !important; } .card--brand { background: #243b2e !important; color: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .card--gold { background: #f4eddf !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .card--warning { background: #fef3c7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } @page { margin: 15mm 14mm; size: A4; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } }