/* ===================================================================== template.css — THEME TOKENS + APP-WIDE LAYOUT/COMPONENTS Usage: Pages reference color tokens via --color-* ===================================================================== */ /* -------------------- Global sizing vars -------------------- */ :root { --app-header-height: 50px; --app-footer-height: 45px; } /* -------------------- Color tokens (fallback = dark) -------------------- */ :root { /* Core */ --color-bg: #1c1c1c; --color-text: #eeeeee; --color-muted: #b8c2cc; --color-link: #4da6ff; --color-link-hover: #0080ff; --color-focus: #22d3ee; /* Header/Footer */ --color-header-bg: #2c3e50; --color-header-bg-image: none; --color-header-text: #ecf0f1; --color-footer-bg: #2c3e50; --color-footer-text: #ecf0f1; /* Surfaces */ --color-surface-1-bg: #232323;/*#4f4f4f; /**/ --color-surface-1-border: #585858; /*#2b2b2b;*/ /* Tiles / Cards */ --color-tile-bg: rgba(255,255,255,0.25); --color-tile-border: rgba(255,255,255,0.10); --color-tile-text: rgba(236,240,241,0.90); --color-tile-muted: #c8d0d9; --color-tile-title: #4da6ff; --shadow-tile: none; /* CTA / Buttons */ --color-cta-bg: #4da6ff; --color-cta-hover: #0080ff; --color-cta-text: #ffffff; /* Accents */ --color-accent-primary: #4da6ff; --color-accent-secondary: #e67e22; --color-accent-neutral: #95a5a6; --color-accent-success: #27ae60; } /* -------------------- DARK -------------------- */ body[data-theme="dark"] { --color-bg: #1c1c1c; --color-text: #eeeeee; --color-muted: #c8d0d9; --color-link: #4da6ff; --color-link-hover: #0080ff; --color-focus: #22d3ee; --color-header-bg: #2c3e50; --color-header-bg-image: none; --color-header-text: #ecf0f1; --color-footer-bg: #2c3e50; --color-footer-text: #ecf0f1; /*--color-surface-1-bg: #4f4f4f; */ --color-surface-1-bg: #333; / --color-surface-1-border: #eee; /*#2b2b2b;*/ --color-tile-bg: rgba(255,255,255,0.25); --color-tile-border: rgba(255,255,255,0.10); --color-tile-text: rgba(236,240,241,0.90); --color-tile-muted: #c8d0d9; --color-tile-title: #4da6ff; --shadow-tile: none; /* default for dark */ --color-cta-bg: #4da6ff; --color-cta-hover: #0080ff; --color-cta-text: #ffffff; --color-accent-primary: #4da6ff; --color-accent-secondary: #e67e22; --color-accent-neutral: #95a5a6; --color-accent-success: #27ae60; } /* -------------------- LIGHT -------------------- */ body[data-theme="light"] { --color-bg: #f9f9f9; --color-text: #222222; --color-muted: #555555; --color-link: #0066cc; --color-link-hover: #004080; --color-focus: #0ea5e9; --color-header-bg: #e0e0e0; --color-header-bg-image: none; --color-header-text: #222222; --color-footer-bg: #e0e0e0; --color-footer-text: #222222; --color-surface-1-bg: #ffffff; --color-surface-1-border: #dcdcdc; --color-tile-bg: rgba(0,0,0,0.08); --color-tile-border: rgba(0,0,0,0.16); --color-tile-text: rgba(34,34,34,0.90); --color-tile-muted: #555555; --color-tile-title: #0066cc; --shadow-tile: 0 6px 18px rgba(0,0,0,0.10); --color-cta-bg: #0066cc; --color-cta-hover: #004080; --color-cta-text: #ffffff; --color-accent-primary: #0066cc; --color-accent-secondary: #e67e22; --color-accent-neutral: #95a5a6; --color-accent-success: #27ae60; } /* -------------------- MODERN (Young Colors) -------------------- */ body[data-theme="modern"] { --color-bg: #f0f4ff; --color-text: #2d264d; --color-muted: #4b4766; --color-link: #e95793; --color-link-hover: #c42a6d; --color-focus: #22d3ee; --color-header-bg: #7b4dff; --color-header-bg-image: linear-gradient(90deg, #7b4dff, #e95793, #ff9500); --color-header-text: #ffffff; --color-footer-bg: #7b4dff; --color-footer-text: #ffffff; --color-surface-1-bg: #ffffff; --color-surface-1-border: #d4d9ff; --color-tile-bg: rgba(255,255,255,0.85); --color-tile-border: #d4d9ff; --color-tile-text: rgba(45,38,77,0.92); --color-tile-muted: #4b4766; --color-tile-title: #c42a6d; --shadow-tile: 0 8px 24px rgba(0,0,0,0.12); --color-cta-bg: #e95793; --color-cta-hover: #c42a6d; --color-cta-text: #ffffff; --color-accent-primary: #e95793; --color-accent-secondary: #7b4dff; --color-accent-neutral: #95a5a6; --color-accent-success: #27ae60; } /* -------------------- AURORA (Indigo + Cyan) -------------------- */ body[data-theme="aurora"] { --color-bg: #f7f8fc; --color-text: #0f172a; --color-muted: #475569; --color-link: #6366f1; --color-link-hover: #4f46e5; --color-focus: #06b6d4; --color-header-bg: #1f2937; --color-header-bg-image: linear-gradient(90deg, #4f46e5, #06b6d4); --color-header-text: #ffffff; --color-footer-bg: #1f2937; --color-footer-text: #ffffff; --color-surface-1-bg: #ffffff; --color-surface-1-border: #e5e7eb; --color-tile-bg: #ffffff; --color-tile-border: rgba(0,0,0,0.16); /*--color-tile-border: #e6e9f5;*/ --color-tile-text: rgba(15,23,42,0.92); --color-tile-muted: #475569; --color-tile-title: #4f46e5; --shadow-tile: 0 8px 24px rgba(15,23,42,0.12); --color-cta-bg: #6366f1; --color-cta-hover: #4f46e5; --color-cta-text: #ffffff; --color-accent-primary: #4f46e5; --color-accent-secondary: #06b6d4; --color-accent-neutral: #95a5a6; --color-accent-success: #27ae60; } /* ===================================================================== APP-WIDE LAYOUT & COMPONENTS (theme-aware via tokens above) ===================================================================== */ /* Base */ html, body { height: 100%; } body { background: var(--color-bg); color: var(--color-text); margin: 0; font-family: 'Georgia', 'Times New Roman', serif; } body.menu-open { overflow: hidden; } a { color: var(--color-link); } a:hover { color: var(--color-link-hover); } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* Header */ .header { background-color: var(--color-header-bg); background-image: var(--color-header-bg-image); color: var(--color-header-text); display: flex; justify-content: space-between; align-items: center; height: var(--app-header-height); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 0 16px; font-family: 'Archivo Narrow', Arial, sans-serif; } .logo { font-size: 1.5rem; font-weight: bold; } /* Hamburger */ .hamburger { background: none; border: none; color: inherit; font-size: 1.8rem; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; } .hamburger:hover { background-color: rgba(255,255,255,0.12); } /* Main content (padding to avoid fixed header/footer overlap) */ .main-content { max-width: 1200px; margin: 0 auto; padding: calc(var(--app-header-height) + 20px) 20px calc(var(--app-footer-height) + 20px); min-height: calc(100vh - (var(--app-header-height) + var(--app-footer-height))); } /* Footer */ .footer { background-color: var(--color-header-bg); background-image: var(--color-header-bg-image); color: var(--color-header-text); position: fixed; left: 0; right: 0; bottom: 0; height: var(--app-footer-height); display: flex; align-items: center; justify-content: center; font-family: 'Archivo Narrow', Arial, sans-serif; z-index: 999; font-size: 0.9rem; } /* Slide menu (hamburger) */ .slide-menu { position: fixed; inset: 0; background-color: var(--color-header-bg); background-image: var(--color-header-bg-image); color: var(--color-header-text); display: flex; flex-direction: column; align-items: center; padding: 80px 20px 40px; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .3s ease, opacity .3s ease, visibility .3s ease; z-index: 998; } .slide-menu[aria-hidden="false"] { transform: translateY(0); opacity: 1; visibility: visible; } .slide-menu ul { list-style: none; margin: 16px 0 0; padding: 0; text-align: center; width: 80%; max-width: 500px; } .slide-menu li { margin: 12px 0; } .slide-menu a { color: var(--color-header-text); text-decoration: none; font-family: 'Archivo Narrow', Arial, sans-serif; font-size: 1.4rem; } .slide-menu a:hover { text-decoration: underline; } /* Quick Theme section in menu */ .menu-section { width: 80%; max-width: 500px; margin: 0 auto 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.25); } .menu-section-title { font-family: 'Archivo Narrow', Arial, sans-serif; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; opacity: .9; margin-bottom: 6px; } .theme-switcher { display: flex; gap: 12px; justify-content: center; } .theme-switcher label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; } .theme-switcher input[type="radio"] { accent-color: var(--color-link); } /* Responsive tweaks */ @media (max-width: 767px) { :root { --app-header-height: 56px; --app-footer-height: 56px; } .slide-menu a { font-size: 1.2rem; } }