MokoJoomHero/src/css/template.css

/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 *
 * FILE INFORMATION
 * DEFGROUP: MokoJoomHero.Template.Assets
 * INGROUP: MokoJoomHero.Template
 * REPO: https://github.com/mokoconsulting-tech/MokoJoomHero
 * PATH: /src/css/template.css
 * VERSION: 01.00.01
 * BRIEF: Main template stylesheet — base layout, typography, and module chrome
 */

/* ============================================================
   CSS Custom Properties
   ============================================================ */
:root {
	--brand-color: #1a73e8;
	--brand-color-dark: #1557b0;
	--text-color: #333;
	--text-muted: #666;
	--bg-color: #fff;
	--bg-light: #f8f9fa;
	--border-color: #dee2e6;
	--header-height: 64px;
	--sidebar-width: 260px;
	--container-max: 1200px;
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;
	--radius: 6px;
	--shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	--transition: 0.2s ease;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text-color);
	background-color: var(--bg-color);
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--brand-color);
	text-decoration: none;
}

a:hover {
	color: var(--brand-color-dark);
	text-decoration: underline;
}

/* ============================================================
   Container
   ============================================================ */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--spacing-md);
}

.container-fluid {
	width: 100%;
	padding-inline: var(--spacing-md);
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
	background: var(--bg-color);
	border-bottom: 1px solid var(--border-color);
	z-index: 100;
}

.site-header.sticky-header {
	position: sticky;
	top: 0;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-height);
	gap: var(--spacing-md);
}

.site-brand a {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	text-decoration: none;
}

.site-logo {
	height: 40px;
	width: auto;
}

.site-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text-color);
}

.site-description {
	font-size: 0.875rem;
	color: var(--text-muted);
	margin: 0;
}

/* ============================================================
   Navigation
   ============================================================ */
.site-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--spacing-sm);
}

.site-navigation a {
	display: block;
	padding: var(--spacing-sm) var(--spacing-md);
	color: var(--text-color);
	border-radius: var(--radius);
	transition: background var(--transition);
}

.site-navigation a:hover,
.site-navigation a.active {
	background: var(--bg-light);
	text-decoration: none;
	color: var(--brand-color);
}

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
	background: var(--bg-light);
	border-bottom: 1px solid var(--border-color);
	font-size: 0.875rem;
	padding: var(--spacing-xs) 0;
}

/* ============================================================
   Hero Section
   ============================================================ */
.hero-section {
	padding: var(--spacing-xl) 0;
	background: linear-gradient(135deg, var(--brand-color) 0%, var(--brand-color-dark) 100%);
	color: #fff;
}

.hero-section h1,
.hero-section h2 {
	color: #fff;
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.breadcrumbs-area {
	padding: var(--spacing-sm) 0;
	background: var(--bg-light);
	border-bottom: 1px solid var(--border-color);
	font-size: 0.875rem;
}

/* ============================================================
   Main Content Layout
   ============================================================ */
.site-main {
	padding: var(--spacing-lg) 0;
	min-height: 50vh;
}

.content-area {
	display: flex;
	gap: var(--spacing-lg);
}

.content-body {
	flex: 1;
	min-width: 0;
}

.sidebar {
	flex: 0 0 var(--sidebar-width);
}

/* ============================================================
   Module Chrome — card style
   ============================================================ */
.card {
	background: var(--bg-color);
	border: 1px solid var(--border-color);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin-bottom: var(--spacing-md);
	overflow: hidden;
}

.card .card-header {
	padding: var(--spacing-md);
	border-bottom: 1px solid var(--border-color);
	font-weight: 600;
}

.card .card-body {
	padding: var(--spacing-md);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	background: var(--bg-light);
	border-top: 1px solid var(--border-color);
	padding: var(--spacing-lg) 0;
	margin-top: var(--spacing-xl);
}

.footer-copyright {
	text-align: center;
	font-size: 0.875rem;
	color: var(--text-muted);
}

.footer-copyright p {
	margin: 0;
}

/* ============================================================
   Back to Top
   ============================================================ */
.back-to-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--brand-color);
	color: #fff;
	border-radius: 50%;
	text-decoration: none;
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition), visibility var(--transition);
	z-index: 99;
}

.back-to-top.visible {
	opacity: 1;
	visibility: visible;
}

.back-to-top:hover {
	background: var(--brand-color-dark);
	color: #fff;
	text-decoration: none;
}

/* ============================================================
   System Messages
   ============================================================ */
.alert {
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-md);
	border: 1px solid transparent;
	border-radius: var(--radius);
}

.alert-message { background: #d1ecf1; border-color: #bee5eb; color: #0c5460; }
.alert-warning { background: #fff3cd; border-color: #ffeeba; color: #856404; }
.alert-error   { background: #f8d7da; border-color: #f5c6cb; color: #721c24; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
	.header-inner {
		flex-direction: column;
		align-items: flex-start;
		padding: var(--spacing-sm) 0;
	}

	.site-navigation ul {
		flex-direction: column;
		width: 100%;
	}

	.content-area {
		flex-direction: column;
	}

	.sidebar {
		flex: 1 1 auto;
	}
}