/* ========================================================================
KOSIS · Brand stylesheet · v1.0
Drop this into your main CSS. Apply the class names listed below to
your existing PHP templates — no full rewrite needed.
======================================================================== */
/* ----- 1. FONT IMPORTS ------------------------------------------------ */
/* Add to of every page (or include via PHP layout):
*/
/* ----- 2. DESIGN TOKENS (CSS variables) ------------------------------ */
:root {
/* Core palette */
--ks-navy: #1F2952;
--ks-gold: #D4A955;
--ks-sage: #4A6F5C;
--ks-cream: #FDFAF1;
--ks-parchment: #FDF3DA;
--ks-slate: #6B7480;
/* Extended */
--ks-navy-lift: #2A3868;
--ks-sage-light: #8AA898;
--ks-border: #E8DFC4;
--ks-muted: #A5B0BC;
/* Status — "Shared / collaborative" (Piece D practice lists).
A lively teal: carries the communicative/connected meaning of sharing,
distinct from sage (primary action) and navy (secondary), while staying
in the warm-cool family. --ks-shared-soft is its tint for backgrounds. */
--ks-shared: #2E9CA8;
--ks-shared-soft: #E1F2F3;
/* Typography */
--ks-font-serif: 'Cinzel', Georgia, 'Times New Roman', serif;
--ks-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
/* Spacing */
--ks-space-xs: 4px;
--ks-space-sm: 8px;
--ks-space-md: 16px;
--ks-space-lg: 24px;
--ks-space-xl: 32px;
/* Radius */
--ks-radius-input: 4px;
--ks-radius-sm: 6px;
--ks-radius-md: 10px;
/* Letter-spacing */
--ks-track-wide: 3px;
--ks-track-mid: 2px;
--ks-track-tight: 1.2px;
/* Shadow (subtle, used on hero cards) */
--ks-shadow-card: 0 1px 2px rgba(31, 41, 82, 0.04), 0 2px 8px rgba(31, 41, 82, 0.04);
}
/* ----- 3. RESET & BASE ----------------------------------------------- */
body {
background: var(--ks-cream);
color: var(--ks-navy);
font-family: var(--ks-font-sans);
font-size: 14px;
line-height: 1.5;
margin: 0;
-webkit-font-smoothing: antialiased;
}
a { color: var(--ks-sage); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ----- 4. LAYOUT (sidebar + content) --------------------------------- */
.ks-app {
display: grid;
grid-template-columns: 220px 1fr;
min-height: 100vh;
}
.ks-sidebar {
background: var(--ks-navy);
color: var(--ks-cream);
padding: 0;
display: flex;
flex-direction: column;
}
.ks-content {
padding: var(--ks-space-lg);
background: var(--ks-cream);
}
/* ----- 5. SIDEBAR BRAND AREA ---------------------------------------- */
.ks-brand {
padding: 22px 20px 14px 20px;
display: flex;
align-items: center;
gap: 12px;
}
.ks-brand__mark {
width: 50px;
height: 50px;
flex-shrink: 0;
/* Place /assets/brand/kosis-sidebar.svg as background or ![]()
*/
}
.ks-brand__wordmark {
font-family: var(--ks-font-serif);
font-size: 19px;
font-weight: 500;
letter-spacing: var(--ks-track-wide);
color: var(--ks-cream);
display: block;
line-height: 1;
margin-bottom: 4px;
}
.ks-brand__tagline {
font-family: var(--ks-font-serif);
font-size: 9px;
letter-spacing: var(--ks-track-mid);
color: var(--ks-gold);
display: block;
}
/* Decorative dashed divider under brand */
.ks-brand-divider {
height: 1px;
margin: 0 20px 14px 20px;
position: relative;
background: linear-gradient(to right,
rgba(212, 169, 85, 0.35) 0%, rgba(212, 169, 85, 0.35) 40%,
transparent 40%, transparent 50%,
rgba(212, 169, 85, 0.35) 50%, rgba(212, 169, 85, 0.35) 100%);
}
.ks-brand-divider::after {
content: "";
position: absolute;
top: -1.5px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 3px;
background: var(--ks-gold);
border-radius: 50%;
opacity: 0.6;
}
/* ----- 6. SIDEBAR USER + PROFILE CARDS ------------------------------ */
.ks-sidebar-card {
margin: 0 14px 10px 14px;
padding: 8px 12px;
border-radius: var(--ks-radius-sm);
display: flex;
align-items: center;
gap: 12px;
}
.ks-sidebar-card--director {
background: var(--ks-navy-lift);
}
.ks-sidebar-card--profile {
background: transparent;
border: 0.5px solid #3A4878;
}
.ks-sidebar-card__avatar {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--ks-gold);
color: var(--ks-navy);
font-weight: 600;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ks-sidebar-card__label {
font-size: 10px;
color: var(--ks-muted);
display: block;
}
.ks-sidebar-card__value {
font-size: 12px;
color: var(--ks-cream);
font-weight: 500;
}
/* ----- 7. SIDEBAR NAV ----------------------------------------------- */
.ks-nav {
list-style: none;
padding: 0;
margin: 18px 0 0 0;
flex-grow: 1;
}
.ks-nav__item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px 10px 18px;
margin: 0 14px 4px 14px;
border-radius: var(--ks-radius-sm);
color: var(--ks-muted);
font-size: 13px;
cursor: pointer;
position: relative;
transition: background 120ms;
}
.ks-nav__item:hover {
background: rgba(255, 255, 255, 0.04);
}
.ks-nav__item--active {
background: var(--ks-navy-lift);
color: var(--ks-cream);
font-weight: 500;
}
.ks-nav__item--active::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--ks-gold);
border-top-left-radius: var(--ks-radius-sm);
border-bottom-left-radius: var(--ks-radius-sm);
}
.ks-nav__item--active .ks-nav__icon {
color: var(--ks-gold);
}
/* Sidebar nav icon: inherits currentColor so it picks up muted/gold states */
.ks-nav__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: var(--ks-muted); /* default: subdued */
transition: color 120ms;
}
.ks-nav__item:hover .ks-nav__icon {
color: var(--ks-cream);
}
.ks-nav__item--active .ks-nav__icon {
color: var(--ks-gold);
}
/* Wrap any anchor inside nav items to inherit alignment */
.ks-nav__item a {
display: flex;
align-items: center;
gap: 12px;
color: inherit;
text-decoration: none;
flex-grow: 1;
}
.ks-nav__item a:hover { text-decoration: none; }
/* ----- 8. SIDEBAR FOOTER VERSE -------------------------------------- */
.ks-sidebar-footer {
border-top: 0.5px solid rgba(212, 169, 85, 0.25);
margin: 20px 20px 24px 20px;
padding-top: 16px;
text-align: center;
}
.ks-sidebar-footer__quote {
font-family: var(--ks-font-serif);
font-style: italic;
font-size: 9px;
color: var(--ks-muted);
display: block;
margin-bottom: 4px;
}
.ks-sidebar-footer__ref {
font-family: var(--ks-font-serif);
font-size: 9px;
letter-spacing: 1px;
color: var(--ks-gold);
text-transform: uppercase;
}
/* ----- 9. HEADINGS WITH GOLD UNDERLINE ------------------------------ */
.ks-h1, .ks-h2, .ks-h3 {
font-family: var(--ks-font-serif);
font-weight: 500;
color: var(--ks-navy);
margin: 0 0 var(--ks-space-md) 0;
position: relative;
padding-bottom: 8px;
}
.ks-h1 { font-size: 22px; }
.ks-h2 { font-size: 18px; }
.ks-h3 { font-size: 14px; }
.ks-h1::after, .ks-h2::after, .ks-h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 32px;
height: 1.5px;
background: var(--ks-gold);
}
/* Heading inverted for use on navy cards */
.ks-h1--invert, .ks-h2--invert, .ks-h3--invert { color: var(--ks-cream); }
/* ----- 10. CARDS ----------------------------------------------------- */
.ks-card {
background: #ffffff;
border: 0.5px solid var(--ks-border);
border-radius: var(--ks-radius-md);
padding: var(--ks-space-lg);
margin-bottom: var(--ks-space-md);
}
.ks-card--hero {
background: var(--ks-navy);
color: var(--ks-cream);
border: none;
position: relative;
overflow: hidden;
}
.ks-card--hero p,
.ks-card--hero .ks-card__body { color: var(--ks-muted); }
.ks-card--scripture {
background: var(--ks-parchment);
text-align: center;
font-family: var(--ks-font-serif);
font-style: italic;
padding: var(--ks-space-md);
}
.ks-card--scripture .ks-card__ref {
font-style: normal;
color: var(--ks-gold);
font-size: 11px;
letter-spacing: var(--ks-track-mid);
margin-top: 8px;
display: block;
}
.ks-card--empty {
background: transparent;
border: 0.8px dashed var(--ks-border);
text-align: center;
color: var(--ks-slate);
padding: var(--ks-space-md);
}
/* Decorative watermark in corner of hero cards */
.ks-card--hero::after {
content: "";
position: absolute;
top: 14px;
right: 14px;
width: 40px;
height: 40px;
background-image: url('/assets/brand/kosis-sidebar.svg');
background-size: contain;
background-repeat: no-repeat;
opacity: 0.12;
}
/* Italic gold pull-quote inside any card */
.ks-quote {
font-family: var(--ks-font-serif);
font-style: italic;
font-size: 11px;
color: var(--ks-gold);
margin-top: var(--ks-space-md);
display: block;
}
/* ----- 11. BUTTONS --------------------------------------------------- */
.ks-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 20px;
border-radius: var(--ks-radius-input);
font-family: var(--ks-font-sans);
font-size: 12px;
font-weight: 500;
cursor: pointer;
border: none;
transition: filter 120ms;
}
.ks-btn:hover { filter: brightness(0.96); }
.ks-btn--primary { background: var(--ks-sage); color: var(--ks-cream); }
.ks-btn--highlight { background: var(--ks-gold); color: var(--ks-navy); }
.ks-btn--secondary {
background: transparent;
color: var(--ks-navy);
border: 0.8px solid var(--ks-navy);
}
.ks-btn--ghost-light {
background: transparent;
color: var(--ks-gold);
border: 0.8px solid var(--ks-gold);
}
.ks-btn--block { width: 100%; }
/* ----- 12. FORM CONTROLS -------------------------------------------- */
.ks-input,
.ks-textarea {
width: 100%;
padding: 9px 14px;
background: var(--ks-cream);
border: 0.5px solid var(--ks-border);
border-radius: var(--ks-radius-input);
font-family: var(--ks-font-sans);
font-size: 12px;
color: var(--ks-navy);
box-sizing: border-box;
}
.ks-input::placeholder,
.ks-textarea::placeholder { color: var(--ks-muted); }
.ks-input:focus,
.ks-textarea:focus {
outline: none;
border-color: var(--ks-sage);
}
.ks-label {
display: block;
font-size: 10px;
letter-spacing: var(--ks-track-tight);
color: var(--ks-slate);
text-transform: uppercase;
margin-bottom: 6px;
}
/* ----- 13. SCRIPTURE FOOTER BAND ------------------------------------ */
.ks-footer-scripture {
background: var(--ks-parchment);
border: 0.5px solid var(--ks-border);
border-radius: var(--ks-radius-md);
padding: var(--ks-space-md);
text-align: center;
margin-top: var(--ks-space-lg);
}
.ks-footer-scripture__quote {
font-family: var(--ks-font-serif);
font-style: italic;
font-size: 13px;
color: var(--ks-navy);
margin: 0 0 6px 0;
}
.ks-footer-scripture__ref {
font-family: var(--ks-font-serif);
font-size: 11px;
letter-spacing: var(--ks-track-mid);
color: var(--ks-gold);
text-transform: uppercase;
}
/* ----- 14. UTILITY: GRID -------------------------------------------- */
.ks-grid { display: grid; gap: var(--ks-space-md); }
.ks-grid--2 { grid-template-columns: 1fr 1fr; }
.ks-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ks-grid--sidebar-content { grid-template-columns: 2fr 1fr; }
/* ----- 15. RESPONSIVE / MOBILE -------------------------------------- */
@media (max-width: 768px) {
.ks-app {
grid-template-columns: 1fr;
}
.ks-sidebar {
position: fixed;
top: 0;
left: -220px;
width: 220px;
height: 100vh;
z-index: 100;
transition: left 240ms ease-out;
box-shadow: 0 0 32px rgba(0,0,0,0.2);
}
.ks-sidebar--open {
left: 0;
}
.ks-mobile-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--ks-navy);
color: var(--ks-cream);
position: sticky;
top: 0;
z-index: 90;
}
.ks-mobile-topbar__brand {
font-family: var(--ks-font-serif);
font-size: 16px;
letter-spacing: 2px;
}
.ks-grid--2, .ks-grid--3, .ks-grid--sidebar-content {
grid-template-columns: 1fr;
}
.ks-content {
padding: var(--ks-space-md);
}
}
@media (min-width: 769px) {
.ks-mobile-topbar { display: none; }
}
/* ----- Required-field marker (Session 70) ---------------------------
A small brick-red asterisk placed after a label's text to mark a
field as required ("must"). Reusable across every form on every page
(public auth, in-app modals, polls, set lists, songs, messages…).
Usage:
And, optionally, a legend under the form:
* Required fields
*/
.ks-req {
color: #B85450; /* brand brick */
font-weight: 700;
margin-left: 1px;
}
.ks-req-note {
font-family: var(--ks-font-sans);
font-size: 12px;
color: var(--ks-slate);
margin: 4px 0 12px;
}