/* ═══════════════════════════════════════════════
Keowee Key Staff Apps — Shared Stylesheet
Import this on every tool page:
═══════════════════════════════════════════════ */
/* ── Google Fonts (also include in ) ─────
─────────────────────────────────────────────── */
/* ── Design Tokens ── */
:root {
--primary: #2a2b39;
--secondary: #032741;
--accent: #E3DCBD;
--accent-dark: #c8c09e;
--bg: #f5f4f0;
--surface: #FFFFFF;
--surface-2: #faf9f6;
--text: #2a2b39;
--muted: #6b7280;
--border: #e5e3db;
--border-strong: #ccc9be;
--success-bg: #dcfce7;
--success-fg: #166534;
--warn-bg: #fef9c3;
--warn-fg: #854d0e;
--error-bg: #fee2e2;
--error-fg: #991b1b;
--info-bg: #dbeafe;
--info-fg: #1e40af;
--shadow: 0 1px 3px rgba(42,43,57,.06), 0 6px 20px rgba(42,43,57,.07);
--shadow-md: 0 4px 24px rgba(3,39,65,.13);
--radius: 14px;
--radius-sm: 8px;
--radius-xs: 5px;
}
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { -webkit-text-size-adjust: 100%; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
min-height: 100vh;
}
/* ══════════════════════════════════════════════
TOP BAR (.topbar)
══════════════════════════════════════════════ */
.topbar {
background: var(--primary);
border-bottom: 4px solid var(--accent);
padding: 0 32px;
display: flex;
align-items: center;
gap: 16px;
height: 72px;
position: sticky;
top: 0;
z-index: 100;
}
.topbar-logo {
width: 42px; height: 42px;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: .95;
flex-shrink: 0;
}
.topbar-text { flex: 1; min-width: 0; }
.topbar-text h1 {
font-family: 'Merriweather', Georgia, serif;
font-size: 1.15rem;
font-weight: 400;
color: #fff;
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar-text p {
color: rgba(255,255,255,.45);
font-size: 0.76rem;
margin-top: 1px;
}
/* ── Back Button (shown on every tool page, hidden on index) ── */
.topbar-back {
display: inline-flex;
align-items: center;
gap: 7px;
color: rgba(255,255,255,.75);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
text-decoration: none;
background: rgba(255,255,255,.08);
border: 1.5px solid rgba(255,255,255,.14);
border-radius: 999px;
padding: 7px 16px 7px 12px;
flex-shrink: 0;
transition: background .15s, color .15s, border-color .15s;
}
.topbar-back:hover {
background: rgba(255,255,255,.16);
border-color: rgba(255,255,255,.3);
color: #fff;
}
.topbar-back svg {
width: 14px; height: 14px;
stroke: currentColor;
flex-shrink: 0;
transition: transform .15s;
}
.topbar-back:hover svg { transform: translateX(-2px); }
/* ══════════════════════════════════════════════
PAGE LAYOUT
══════════════════════════════════════════════ */
.page {
max-width: 900px;
margin: 0 auto;
padding: 52px 24px 80px;
}
.page--wide { max-width: 1100px; }
.page--narrow { max-width: 680px; }
/* ── Page Header ── */
.page-header { margin-bottom: 40px; }
.page-header h2 {
font-family: 'Merriweather', Georgia, serif;
font-size: 1.75rem;
font-weight: 400;
color: var(--primary);
margin-bottom: 8px;
}
.page-header p {
color: var(--muted);
font-size: 1rem;
}
/* ── Breadcrumb hint (optional, below page header) ── */
.breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.8rem;
color: var(--muted);
margin-bottom: 32px;
}
.breadcrumb a {
color: var(--secondary);
text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { opacity: .4; }
/* ══════════════════════════════════════════════
TOOL GRID (index page)
══════════════════════════════════════════════ */
.tool-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
margin-bottom: 48px;
}
/* ── Tool Card ── */
.tool-card {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 28px 26px 24px;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color .18s, box-shadow .18s, transform .15s;
}
.tool-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent);
transition: background .18s;
}
.tool-card:hover {
border-color: var(--secondary);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.tool-card:hover::before { background: var(--secondary); }
.tool-icon {
width: 44px; height: 44px;
background: var(--surface-2);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
flex-shrink: 0;
}
.tool-name {
font-family: 'Merriweather', Georgia, serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--primary);
line-height: 1.3;
}
.tool-desc {
font-size: 0.88rem;
color: var(--muted);
line-height: 1.5;
flex: 1;
}
.tool-arrow {
position: absolute;
bottom: 22px; right: 22px;
font-size: 1.1rem;
color: var(--border-strong);
transition: color .15s, transform .15s;
}
.tool-card:hover .tool-arrow { color: var(--secondary); transform: translateX(3px); }
/* ══════════════════════════════════════════════
BADGES
══════════════════════════════════════════════ */
.tool-badge {
display: inline-flex;
align-items: center;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 999px;
align-self: flex-start;
}
.badge-live { background: var(--success-bg); color: var(--success-fg); }
.badge-beta { background: var(--info-bg); color: var(--info-fg); }
.badge-soon { background: var(--warn-bg); color: var(--warn-fg); }
/* ══════════════════════════════════════════════
FORM COMPONENTS (used in tool pages)
══════════════════════════════════════════════ */
/* Section card wrapping a group of form fields */
.form-section {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 28px 28px 24px;
margin-bottom: 20px;
}
.form-section-title {
font-family: 'Merriweather', Georgia, serif;
font-size: 1rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
/* Field row */
.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field label {
display: block;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 7px;
}
.field label .req {
color: #dc2626;
margin-left: 2px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field select,
.field textarea {
width: 100%;
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 0.95rem;
color: var(--text);
background: var(--surface-2);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
padding: 10px 14px;
outline: none;
transition: border-color .15s, box-shadow .15s;
appearance: none;
-webkit-appearance: none;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
border-color: var(--secondary);
box-shadow: 0 0 0 3px rgba(3,39,65,.09);
background: var(--surface);
}
.field .field-hint {
font-size: 0.78rem;
color: var(--muted);
margin-top: 5px;
}
/* Two-column field row */
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* ══════════════════════════════════════════════
BUTTONS
══════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: 'Lato', Helvetica, Arial, sans-serif;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
border: none;
border-radius: var(--radius-sm);
padding: 11px 24px;
cursor: pointer;
text-decoration: none;
transition: background .15s, box-shadow .15s, transform .1s, opacity .15s;
}
.btn:active { transform: scale(.98); }
.btn-primary {
background: var(--secondary);
color: #fff;
box-shadow: 0 2px 8px rgba(3,39,65,.22);
}
.btn-primary:hover {
background: #053455;
box-shadow: 0 4px 16px rgba(3,39,65,.3);
}
.btn-secondary {
background: var(--surface);
color: var(--secondary);
border: 1.5px solid var(--border-strong);
}
.btn-secondary:hover {
background: var(--surface-2);
border-color: var(--secondary);
}
.btn-accent {
background: var(--accent);
color: var(--primary);
}
.btn-accent:hover { background: var(--accent-dark); }
.btn-ghost {
background: transparent;
color: var(--secondary);
border: 1.5px solid transparent;
}
.btn-ghost:hover {
background: rgba(3,39,65,.06);
border-color: var(--border);
}
.btn-danger {
background: #dc2626;
color: #fff;
}
.btn-danger:hover { background: #b91c1c; }
.btn:disabled,
.btn[disabled] {
opacity: .45;
pointer-events: none;
}
.btn-sm { font-size: 0.78rem; padding: 7px 16px; }
.btn-lg { font-size: 1rem; padding: 14px 32px; }
.btn-full { width: 100%; }
/* ══════════════════════════════════════════════
STEP INDICATOR (multi-step flows)
══════════════════════════════════════════════ */
.steps {
display: flex;
align-items: center;
gap: 0;
margin-bottom: 40px;
}
.step {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
position: relative;
}
.step:not(:last-child)::after {
content: '';
flex: 1;
height: 2px;
background: var(--border);
margin: 0 8px;
transition: background .3s;
}
.step.done:not(:last-child)::after { background: var(--secondary); }
.step-num {
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.8rem; font-weight: 700;
flex-shrink: 0;
transition: background .2s, color .2s, border-color .2s;
border: 2px solid var(--border-strong);
color: var(--muted);
background: var(--surface);
}
.step.active .step-num {
background: var(--secondary);
border-color: var(--secondary);
color: #fff;
}
.step.done .step-num {
background: var(--success-bg);
border-color: #86efac;
color: var(--success-fg);
}
.step-label {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
white-space: nowrap;
}
.step.active .step-label { color: var(--primary); }
.step.done .step-label { color: var(--success-fg); }
/* ══════════════════════════════════════════════
ALERTS / BANNERS
══════════════════════════════════════════════ */
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
border-radius: var(--radius-sm);
font-size: 0.88rem;
line-height: 1.5;
margin-bottom: 20px;
}
.alert-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.alert-success { background: var(--success-bg); color: var(--success-fg); }
.alert-warn { background: var(--warn-bg); color: var(--warn-fg); }
.alert-error { background: var(--error-bg); color: var(--error-fg); }
.alert-info { background: var(--info-bg); color: var(--info-fg); }
/* ══════════════════════════════════════════════
PREVIEW PANEL
══════════════════════════════════════════════ */
.preview-panel {
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.preview-panel-header {
background: var(--surface-2);
border-bottom: 1px solid var(--border);
padding: 14px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.preview-panel-title {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--muted);
}
.preview-panel-body {
padding: 28px;
}
/* ══════════════════════════════════════════════
DIVIDER
══════════════════════════════════════════════ */
.divider {
border: none;
border-top: 1px solid var(--border);
margin: 32px 0;
}
/* ══════════════════════════════════════════════
PAGE FOOTER
══════════════════════════════════════════════ */
.page-footer {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--border);
font-size: 0.8rem;
color: var(--muted);
text-align: center;
}
.page-footer a {
color: var(--secondary);
text-decoration: none;
}
.page-footer a:hover { text-decoration: underline; }
/* ══════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 600px) {
.topbar { padding: 0 16px; gap: 10px; }
.topbar-text h1 { font-size: 0.95rem; }
.topbar-back span { display: none; } /* show only icon on mobile */
.topbar-back { padding: 7px 10px; }
.page { padding: 32px 16px 60px; }
.page-header h2 { font-size: 1.4rem; }
.field-row { grid-template-columns: 1fr; }
.steps { gap: 4px; }
.step-label { display: none; }
.step:not(:last-child)::after { margin: 0 4px; }
.form-section { padding: 20px 18px; }
.preview-panel-body { padding: 18px; }
}