build: 55712324-398e-4334-a254-fc30c84b2e47
This commit is contained in:
AppCakes
@@ -0,0 +1,869 @@
|
||||
:root {
|
||||
--ion-color-primary: #6d28d9;
|
||||
--ion-color-primary-rgb: 109, 40, 217;
|
||||
--ion-color-primary-contrast: #ffffff;
|
||||
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-primary-shade: #5b21b6;
|
||||
--ion-color-primary-tint: #7c3aed;
|
||||
|
||||
--ion-color-secondary: #0f766e;
|
||||
--ion-color-secondary-rgb: 15, 118, 110;
|
||||
--ion-color-secondary-contrast: #ffffff;
|
||||
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-secondary-shade: #115e59;
|
||||
--ion-color-secondary-tint: #14b8a6;
|
||||
|
||||
--ion-color-tertiary: #ea580c;
|
||||
--ion-color-tertiary-rgb: 234, 88, 12;
|
||||
--ion-color-tertiary-contrast: #ffffff;
|
||||
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-tertiary-shade: #c2410c;
|
||||
--ion-color-tertiary-tint: #f97316;
|
||||
|
||||
--ion-color-success: #16a34a;
|
||||
--ion-color-success-rgb: 22, 163, 74;
|
||||
--ion-color-success-contrast: #ffffff;
|
||||
--ion-color-success-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-success-shade: #15803d;
|
||||
--ion-color-success-tint: #22c55e;
|
||||
|
||||
--ion-color-warning: #f59e0b;
|
||||
--ion-color-warning-rgb: 245, 158, 11;
|
||||
--ion-color-warning-contrast: #1f2937;
|
||||
--ion-color-warning-contrast-rgb: 31, 41, 55;
|
||||
--ion-color-warning-shade: #d97706;
|
||||
--ion-color-warning-tint: #fbbf24;
|
||||
|
||||
--ion-color-danger: #dc2626;
|
||||
--ion-color-danger-rgb: 220, 38, 38;
|
||||
--ion-color-danger-contrast: #ffffff;
|
||||
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-danger-shade: #b91c1c;
|
||||
--ion-color-danger-tint: #ef4444;
|
||||
|
||||
--ion-color-dark: #111827;
|
||||
--ion-color-dark-rgb: 17, 24, 39;
|
||||
--ion-color-dark-contrast: #ffffff;
|
||||
--ion-color-dark-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-dark-shade: #030712;
|
||||
--ion-color-dark-tint: #374151;
|
||||
|
||||
--ion-color-medium: #6b7280;
|
||||
--ion-color-medium-rgb: 107, 114, 128;
|
||||
--ion-color-medium-contrast: #ffffff;
|
||||
--ion-color-medium-contrast-rgb: 255, 255, 255;
|
||||
--ion-color-medium-shade: #4b5563;
|
||||
--ion-color-medium-tint: #9ca3af;
|
||||
|
||||
--ion-color-light: #f3f4f6;
|
||||
--ion-color-light-rgb: 243, 244, 246;
|
||||
--ion-color-light-contrast: #111827;
|
||||
--ion-color-light-contrast-rgb: 17, 24, 39;
|
||||
--ion-color-light-shade: #e5e7eb;
|
||||
--ion-color-light-tint: #f9fafb;
|
||||
|
||||
--ion-background-color: #f6f7fb;
|
||||
--ion-text-color: #111827;
|
||||
--ion-border-color: #e5e7eb;
|
||||
}
|
||||
|
||||
body {
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at top left,
|
||||
rgba(168, 85, 247, 0.12),
|
||||
transparent 34%
|
||||
),
|
||||
linear-gradient(180deg, #fbf7ff 0%, #f2ecfb 100%);
|
||||
}
|
||||
|
||||
ion-toolbar {
|
||||
--background: #ffffff;
|
||||
--color: var(--ion-color-dark);
|
||||
}
|
||||
|
||||
.mono-nums {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.dashboard-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.hero-card,
|
||||
.habit-card,
|
||||
.stats-card,
|
||||
.empty-state-card,
|
||||
.inline-message,
|
||||
.auth-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #ebeef4;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.04);
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.hero-card.compact {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-block;
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--ion-color-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.hero-card h1,
|
||||
.auth-hero h1,
|
||||
.empty-state-card h2 {
|
||||
margin: 0;
|
||||
font-size: 1.9rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.04em;
|
||||
color: var(--ion-color-dark);
|
||||
}
|
||||
|
||||
.hero-card p,
|
||||
.auth-hero p,
|
||||
.inline-message p,
|
||||
.empty-state-card p,
|
||||
.stats-card p,
|
||||
.habit-copy p {
|
||||
color: var(--ion-color-medium);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.stack-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.habit-card {
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.habit-card-main {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.habit-color-pill {
|
||||
width: 10px;
|
||||
border-radius: 999px;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.habit-copy {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.habit-copy h3,
|
||||
.stats-card h3 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 1.08rem;
|
||||
font-weight: 700;
|
||||
color: var(--ion-color-dark);
|
||||
}
|
||||
|
||||
.habit-metrics-row,
|
||||
.stats-card-footer,
|
||||
.stats-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.habit-metrics-row span,
|
||||
.stats-card-footer span,
|
||||
.stats-card-header p {
|
||||
font-size: 0.85rem;
|
||||
color: var(--ion-color-medium);
|
||||
}
|
||||
|
||||
.habit-metrics-row ion-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.habit-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.empty-state-card,
|
||||
.inline-message {
|
||||
padding: 28px 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 14px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(109, 40, 217, 0.1);
|
||||
color: var(--ion-color-primary);
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.auth-shell {
|
||||
min-height: 100%;
|
||||
padding: 32px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.auth-hero {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.auth-card ion-card-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.auth-form,
|
||||
.auth-message-block,
|
||||
.habit-form-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.auth-input-item {
|
||||
--background: #f8fafc;
|
||||
--border-radius: 18px;
|
||||
}
|
||||
|
||||
.auth-feedback {
|
||||
margin: 0;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.auth-divider {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.auth-divider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: rgba(107, 114, 128, 0.22);
|
||||
}
|
||||
|
||||
.auth-divider span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 12px;
|
||||
background: #ffffff;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--ion-color-medium);
|
||||
}
|
||||
|
||||
.google-auth-button,
|
||||
.apple-auth-button {
|
||||
--border-radius: 18px;
|
||||
--border-color: rgba(17, 24, 39, 0.08);
|
||||
--background: #ffffff;
|
||||
--background-hover: #ffffff;
|
||||
--background-activated: #f8fafc;
|
||||
--color: var(--ion-color-dark);
|
||||
--box-shadow: none;
|
||||
font-weight: 700;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.apple-auth-button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: var(--ion-color-danger);
|
||||
}
|
||||
|
||||
.color-label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.habit-color-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.habit-color-dot {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
}
|
||||
|
||||
.habit-color-dot.selected {
|
||||
border-color: #111827;
|
||||
}
|
||||
|
||||
.stats-filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.stats-streak-badge {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.home-header ion-toolbar {
|
||||
--background: transparent;
|
||||
--border-color: transparent;
|
||||
--padding-start: 12px;
|
||||
--padding-end: 12px;
|
||||
}
|
||||
|
||||
.home-content {
|
||||
--background: transparent;
|
||||
}
|
||||
|
||||
.home-shell {
|
||||
padding-top: calc(var(--ion-safe-area-top) + 10px);
|
||||
padding-bottom: 32px;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.soft-icon-button {
|
||||
--background: rgba(255, 255, 255, 0.86);
|
||||
--background-hover: rgba(255, 255, 255, 0.96);
|
||||
--background-activated: rgba(255, 255, 255, 0.96);
|
||||
--border-radius: 999px;
|
||||
--box-shadow: 0 10px 24px rgba(109, 40, 217, 0.08);
|
||||
--color: #17121f;
|
||||
--padding-start: 0;
|
||||
--padding-end: 0;
|
||||
--padding-top: 0;
|
||||
--padding-bottom: 0;
|
||||
width: 46px;
|
||||
min-width: 46px;
|
||||
height: 46px;
|
||||
min-height: 46px;
|
||||
border-radius: 999px;
|
||||
margin-inline-start: 6px;
|
||||
}
|
||||
|
||||
.soft-icon-button::part(native) {
|
||||
width: 46px;
|
||||
min-width: 46px;
|
||||
height: 46px;
|
||||
min-height: 46px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.habits-hero {
|
||||
padding: 6px 4px 0;
|
||||
}
|
||||
|
||||
.habits-hero-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.hero-kicker {
|
||||
margin: 0 0 6px;
|
||||
font-size: 0.98rem;
|
||||
font-weight: 700;
|
||||
color: rgba(34, 23, 54, 0.92);
|
||||
}
|
||||
|
||||
.hero-title-wrap {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hero-title-wrap h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(3rem, 8vw, 4.2rem);
|
||||
line-height: 0.94;
|
||||
letter-spacing: -0.08em;
|
||||
font-weight: 800;
|
||||
color: #110d18;
|
||||
}
|
||||
|
||||
.hero-title-wrap span {
|
||||
font-size: clamp(2.2rem, 7vw, 3.5rem);
|
||||
line-height: 1;
|
||||
letter-spacing: -0.08em;
|
||||
font-weight: 700;
|
||||
color: rgba(26, 16, 38, 0.32);
|
||||
}
|
||||
|
||||
.hero-add-button {
|
||||
--background: rgba(255, 255, 255, 0.86);
|
||||
--background-hover: rgba(255, 255, 255, 0.96);
|
||||
--border-radius: 999px;
|
||||
--box-shadow: 0 14px 30px rgba(109, 40, 217, 0.1);
|
||||
--color: var(--ion-color-primary);
|
||||
--padding-start: 0;
|
||||
--padding-end: 0;
|
||||
--padding-top: 0;
|
||||
--padding-bottom: 0;
|
||||
width: 52px;
|
||||
min-width: 52px;
|
||||
height: 52px;
|
||||
min-height: 52px;
|
||||
border-radius: 999px;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
|
||||
.hero-add-button::part(native) {
|
||||
width: 52px;
|
||||
min-width: 52px;
|
||||
height: 52px;
|
||||
min-height: 52px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.hero-progress-track {
|
||||
margin-top: 20px;
|
||||
height: 12px;
|
||||
background: rgba(109, 40, 217, 0.12);
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-progress-fill {
|
||||
height: 100%;
|
||||
min-width: 12px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #5b21b6 0%, #c084fc 100%);
|
||||
position: relative;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.hero-progress-dot {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.hero-progress-meta {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 600;
|
||||
color: rgba(43, 31, 58, 0.74);
|
||||
}
|
||||
|
||||
.home-routine-panel,
|
||||
.home-summary-card,
|
||||
.home-inline-card,
|
||||
.home-empty-state-card,
|
||||
.habit-card--editorial {
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
border: 1px solid rgba(255, 255, 255, 0.72);
|
||||
box-shadow: 0 18px 40px rgba(106, 62, 149, 0.08);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.home-routine-panel {
|
||||
padding: 18px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.home-habit-stack {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.habit-card--editorial {
|
||||
border-radius: 24px;
|
||||
padding: 14px 12px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.habit-card--editorial.is-complete {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.habit-check-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(109, 40, 217, 0.08);
|
||||
color: rgba(109, 40, 217, 0.72);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.habit-check-button.is-complete {
|
||||
background: rgba(109, 40, 217, 0.16);
|
||||
color: var(--ion-color-primary);
|
||||
}
|
||||
|
||||
.habit-copy-topline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.habit-copy-topline .habit-color-pill {
|
||||
width: 10px;
|
||||
min-height: 10px;
|
||||
height: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.habit-card-tap-area {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.habit-card--editorial .habit-card-main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.habit-card--editorial .habit-copy h3 {
|
||||
margin: 0;
|
||||
font-size: 1.03rem;
|
||||
}
|
||||
|
||||
.habit-card--editorial .habit-copy p {
|
||||
margin: 0;
|
||||
font-size: 0.88rem;
|
||||
color: rgba(52, 41, 66, 0.7);
|
||||
}
|
||||
|
||||
.habit-card--editorial .habit-metrics-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.habit-card--editorial .habit-metrics-row span {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.habit-delete-button {
|
||||
--color: rgba(86, 68, 106, 0.72);
|
||||
--padding-start: 6px;
|
||||
--padding-end: 6px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.home-complete-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.home-section-label {
|
||||
margin: 0 4px;
|
||||
font-size: 0.88rem;
|
||||
font-weight: 700;
|
||||
color: rgba(66, 50, 84, 0.74);
|
||||
}
|
||||
|
||||
.home-summary-card {
|
||||
border-radius: 30px;
|
||||
padding: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.summary-ring {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.summary-ring-inner {
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 800;
|
||||
color: #1d1430;
|
||||
}
|
||||
|
||||
.summary-copy h3 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.summary-copy p {
|
||||
margin: 0;
|
||||
color: rgba(52, 41, 66, 0.7);
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.summary-metrics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.summary-metrics span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: rgba(42, 30, 56, 0.78);
|
||||
}
|
||||
|
||||
.home-empty-state-card {
|
||||
border-radius: 26px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.home-empty-state-button {
|
||||
--border-radius: 999px;
|
||||
--box-shadow: none;
|
||||
}
|
||||
|
||||
.account-shell {
|
||||
gap: 20px;
|
||||
padding-bottom: calc(24px + var(--ion-safe-area-bottom));
|
||||
}
|
||||
|
||||
.account-hero-card {
|
||||
overflow: hidden;
|
||||
border-radius: 30px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 16px 38px rgba(71, 45, 108, 0.08);
|
||||
}
|
||||
|
||||
.account-hero-image-wrap {
|
||||
position: relative;
|
||||
aspect-ratio: 16 / 10;
|
||||
background: #e9e1f6;
|
||||
}
|
||||
|
||||
.account-hero-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.account-hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(17, 24, 39, 0) 0%,
|
||||
rgba(17, 24, 39, 0.3) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.account-hero-content {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.account-hero-content h1 {
|
||||
margin: 0;
|
||||
font-size: 1.55rem;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.04em;
|
||||
color: var(--ion-color-dark);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.account-hero-content p {
|
||||
margin: 0;
|
||||
color: rgba(55, 65, 81, 0.76);
|
||||
}
|
||||
|
||||
.account-highlight-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.account-highlight-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(109, 40, 217, 0.1);
|
||||
color: var(--ion-color-primary);
|
||||
font-size: 0.84rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.account-highlight-chip.subtle {
|
||||
background: rgba(15, 118, 110, 0.1);
|
||||
color: var(--ion-color-secondary);
|
||||
}
|
||||
|
||||
.account-highlight-chip ion-icon,
|
||||
.account-highlight-chip svg {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.account-details-card {
|
||||
gap: 18px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.account-info-item {
|
||||
--background: #f7f5fb;
|
||||
--border-radius: 20px;
|
||||
--padding-start: 16px;
|
||||
--padding-end: 16px;
|
||||
--inner-padding-end: 0px;
|
||||
}
|
||||
|
||||
.account-info-item h2 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--ion-color-primary);
|
||||
}
|
||||
|
||||
.account-info-item p {
|
||||
margin: 0;
|
||||
color: var(--ion-color-dark);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.account-trust-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 14px;
|
||||
align-items: flex-start;
|
||||
padding: 4px 2px;
|
||||
}
|
||||
|
||||
.account-trust-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 14px;
|
||||
background: rgba(22, 163, 74, 0.12);
|
||||
color: var(--ion-color-success);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.account-trust-row h3 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--ion-color-dark);
|
||||
}
|
||||
|
||||
.account-trust-row p {
|
||||
margin: 0;
|
||||
color: rgba(55, 65, 81, 0.74);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.account-primary-button,
|
||||
.account-secondary-button {
|
||||
--border-radius: 18px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.account-primary-button {
|
||||
--background: var(--ion-color-primary);
|
||||
--box-shadow: none;
|
||||
}
|
||||
|
||||
.account-secondary-button {
|
||||
--border-width: 1px;
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.home-summary-card {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.account-hero-image-wrap {
|
||||
aspect-ratio: 4 / 3;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user