303 lines
6.0 KiB
CSS
303 lines
6.0 KiB
CSS
/**
|
|
* Global Base Styles
|
|
* Uses theme variables defined in theme.css
|
|
*/
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
min-width: 320px;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-family-base);
|
|
font-size: var(--font-size-base);
|
|
line-height: var(--line-height-normal);
|
|
color: var(--color-text-primary);
|
|
background:
|
|
radial-gradient(circle at top left, rgba(15, 118, 110, 0.14), transparent 34%),
|
|
radial-gradient(circle at top right, rgba(245, 158, 11, 0.14), transparent 28%),
|
|
linear-gradient(180deg, #faf8f3 0%, var(--color-bg-body) 42%, #efe8dc 100%);
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
[data-theme="dark"] body,
|
|
body.dark-mode {
|
|
background:
|
|
radial-gradient(circle at top left, rgba(45, 212, 191, 0.12), transparent 28%),
|
|
radial-gradient(circle at top right, rgba(251, 191, 36, 0.08), transparent 24%),
|
|
linear-gradient(180deg, #101823 0%, var(--color-bg-body) 44%, #0b1220 100%);
|
|
}
|
|
|
|
#root {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
a {
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
transition: color var(--transition-base), opacity var(--transition-base);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--color-primary-hover);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0;
|
|
font-family: var(--font-family-heading);
|
|
line-height: var(--line-height-tight);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea {
|
|
width: 100%;
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
font: inherit;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.page-shell {
|
|
width: min(100%, var(--page-max-width));
|
|
margin: 0 auto;
|
|
padding: clamp(1rem, 2vw, 1.75rem);
|
|
}
|
|
|
|
.page-shell--narrow {
|
|
max-width: 560px;
|
|
}
|
|
|
|
.page-shell--center {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.page-panel {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
border: 1px solid var(--color-border-light);
|
|
border-radius: var(--border-radius-xl);
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88)),
|
|
var(--color-bg-surface);
|
|
box-shadow: var(--shadow-xl);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
[data-theme="dark"] .page-panel,
|
|
body.dark-mode .page-panel {
|
|
background:
|
|
linear-gradient(180deg, rgba(20, 29, 42, 0.96), rgba(15, 23, 34, 0.9)),
|
|
var(--color-bg-surface);
|
|
}
|
|
|
|
.page-panel::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0 auto auto 0;
|
|
width: 100%;
|
|
height: 10px;
|
|
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.page-panel-inner {
|
|
padding: clamp(1.25rem, 3vw, 2.4rem);
|
|
}
|
|
|
|
.page-panel--compact .page-panel-inner {
|
|
padding: clamp(1.4rem, 4vw, 2.1rem);
|
|
}
|
|
|
|
.page-hero {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.65rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.page-eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
width: fit-content;
|
|
padding: 0.45rem 0.8rem;
|
|
border-radius: var(--border-radius-full);
|
|
background: var(--color-primary-light);
|
|
color: var(--color-primary-dark);
|
|
font-size: 0.78rem;
|
|
font-weight: var(--font-weight-bold);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: clamp(2rem, 4vw, 3.2rem);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.page-subtitle {
|
|
max-width: 44rem;
|
|
color: var(--color-text-secondary);
|
|
font-size: 1.02rem;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.page-tabs {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.6rem;
|
|
padding: 0.45rem;
|
|
border: 1px solid var(--color-border-light);
|
|
border-radius: var(--border-radius-full);
|
|
background: rgba(255, 255, 255, 0.62);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
[data-theme="dark"] .page-tabs,
|
|
body.dark-mode .page-tabs {
|
|
background: rgba(15, 23, 34, 0.72);
|
|
}
|
|
|
|
.page-tab {
|
|
min-width: 120px;
|
|
padding: 0.75rem 1.15rem;
|
|
border: none;
|
|
border-radius: var(--border-radius-full);
|
|
background: transparent;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
cursor: pointer;
|
|
transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
|
|
}
|
|
|
|
.page-tab:hover {
|
|
background: rgba(15, 118, 110, 0.08);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.page-tab.active {
|
|
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
|
|
color: var(--color-text-inverse);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.surface-note {
|
|
border: 1px solid var(--color-border-light);
|
|
border-radius: var(--border-radius-lg);
|
|
background: rgba(255, 255, 255, 0.64);
|
|
padding: 1rem 1.1rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
[data-theme="dark"] .surface-note,
|
|
body.dark-mode .surface-note {
|
|
background: rgba(15, 23, 34, 0.72);
|
|
}
|
|
|
|
.error-message,
|
|
.success-message {
|
|
margin-bottom: 1rem;
|
|
padding: 0.9rem 1rem;
|
|
border-radius: var(--border-radius-md);
|
|
border: 1px solid;
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.error-message {
|
|
color: var(--color-danger);
|
|
background: var(--color-danger-light);
|
|
border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
|
|
}
|
|
|
|
.success-message {
|
|
color: var(--color-success);
|
|
background: var(--color-success-light);
|
|
border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
|
|
}
|
|
|
|
.auth-shell {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.auth-card {
|
|
width: min(100%, 30rem);
|
|
}
|
|
|
|
.auth-card .page-hero {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.auth-subtitle {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.auth-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
.auth-footer {
|
|
margin-top: 1.25rem;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.page-shell {
|
|
padding: 0.85rem;
|
|
}
|
|
|
|
.page-tabs {
|
|
width: 100%;
|
|
}
|
|
|
|
.page-tab {
|
|
flex: 1 1 calc(50% - 0.6rem);
|
|
min-width: 0;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: clamp(1.8rem, 8vw, 2.4rem);
|
|
}
|
|
}
|