9cef9b8d57
Merge _configs/ into config/ for single configuration directory. Update all path references. Changes: - Move _configs/* to config/ - Update .gitignore for new patterns - No code references to _configs/ found Impact: -1 root directory (layout_conventions.md compliance)
1288 lines
45 KiB
HTML
1288 lines
45 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>SYNTAXIS - Branding Showcase</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Sans+Pro:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="assets/header-shared.css">
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
/* Colors - Updated with Balanced Gray */
|
||
--syntaxis-blue: #2C5F8E;
|
||
--syntaxis-gray: #757773;
|
||
--syntaxis-gold: #D97706;
|
||
--syntaxis-green: #059669;
|
||
--syntaxis-purple: #7C3AED;
|
||
|
||
/* RGB & CMYK variants for display */
|
||
--blue-rgb: 44, 95, 142;
|
||
--gray-rgb: 117, 119, 115;
|
||
--gold-rgb: 217, 119, 6;
|
||
--green-rgb: 5, 150, 105;
|
||
--purple-rgb: 124, 58, 237;
|
||
|
||
/* Typography */
|
||
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
--font-secondary: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||
|
||
/* Spacing */
|
||
--space-xs: 0.25rem;
|
||
--space-sm: 0.5rem;
|
||
--space-md: 1rem;
|
||
--space-lg: 1.5rem;
|
||
--space-xl: 2rem;
|
||
--space-2xl: 3rem;
|
||
}
|
||
|
||
/* Light Mode (Default) */
|
||
body {
|
||
font-family: var(--font-secondary);
|
||
background: #ffffff;
|
||
color: #1F2937;
|
||
transition: background 0.3s ease, color 0.3s ease;
|
||
}
|
||
|
||
body.dark-mode {
|
||
background: #1a1a1a;
|
||
color: #F1F5F9;
|
||
}
|
||
|
||
/* Header */
|
||
header {
|
||
background: var(--syntaxis-blue);
|
||
color: white;
|
||
padding: var(--space-2xl) var(--space-xl);
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
body.dark-mode header {
|
||
background: linear-gradient(135deg, var(--syntaxis-blue) 0%, #1E3A5F 100%);
|
||
}
|
||
|
||
header h1 {
|
||
font-family: var(--font-primary);
|
||
font-size: 2rem;
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-sm);
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
header p {
|
||
font-size: 0.95rem;
|
||
opacity: 0.95;
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.header-controls {
|
||
display: flex;
|
||
gap: var(--space-md);
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
|
||
.select-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
background: rgba(255,255,255,0.15);
|
||
padding: var(--space-sm) var(--space-md);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.select-group label {
|
||
font-size: 0.85rem;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.select-group select {
|
||
background: rgba(255,255,255,0.2);
|
||
color: white;
|
||
border: 1px solid rgba(255,255,255,0.3);
|
||
padding: 0.5rem 0.75rem;
|
||
border-radius: 4px;
|
||
font-family: var(--font-secondary);
|
||
font-size: 0.85rem;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.select-group select:hover,
|
||
.select-group select:focus {
|
||
background: rgba(255,255,255,0.25);
|
||
border-color: rgba(255,255,255,0.5);
|
||
outline: none;
|
||
}
|
||
|
||
.select-group select option {
|
||
background: var(--syntaxis-blue);
|
||
color: white;
|
||
}
|
||
|
||
.toggle-btn {
|
||
background: rgba(255,255,255,0.2);
|
||
color: white;
|
||
border: 1px solid rgba(255,255,255,0.3);
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-family: var(--font-secondary);
|
||
font-size: 0.85rem;
|
||
font-weight: 500;
|
||
transition: all 0.2s;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.toggle-btn:hover,
|
||
.toggle-btn.active {
|
||
background: rgba(255,255,255,0.3);
|
||
border-color: rgba(255,255,255,0.5);
|
||
}
|
||
|
||
.container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 0 var(--space-xl) var(--space-2xl) var(--space-xl);
|
||
}
|
||
|
||
/* Section */
|
||
.section {
|
||
margin-bottom: var(--space-2xl);
|
||
}
|
||
|
||
.section h2 {
|
||
font-family: var(--font-primary);
|
||
font-size: 1.75rem;
|
||
font-weight: 700;
|
||
color: var(--syntaxis-blue);
|
||
margin-bottom: var(--space-lg);
|
||
letter-spacing: -0.01em;
|
||
border-bottom: 3px solid var(--syntaxis-gold);
|
||
padding-bottom: var(--space-md);
|
||
}
|
||
|
||
body.dark-mode .section h2 {
|
||
color: #60A5FA;
|
||
}
|
||
|
||
/* Logo Variants Title - Styled like header */
|
||
#logoVariantsTitle {
|
||
font-size: 1.2rem !important;
|
||
color: #9CA3AF !important;
|
||
border-bottom: 2px solid #9CA3AF !important;
|
||
}
|
||
|
||
body.dark-mode #logoVariantsTitle {
|
||
color: #9CA3AF !important;
|
||
}
|
||
|
||
/* Logo Grid */
|
||
.logo-gallery {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||
gap: var(--space-lg);
|
||
margin-top: var(--space-lg);
|
||
}
|
||
|
||
.logo-card {
|
||
background: white;
|
||
border: 2px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
|
||
body.dark-mode .logo-card {
|
||
background: #252525;
|
||
border-color: #404040;
|
||
}
|
||
|
||
.logo-card:hover {
|
||
box-shadow: 0 8px 16px rgba(44, 95, 142, 0.15);
|
||
transform: translateY(-4px);
|
||
border-color: var(--syntaxis-blue);
|
||
}
|
||
|
||
.logo-preview {
|
||
background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
|
||
padding: var(--space-2xl);
|
||
height: 200px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
body.dark-mode .logo-preview {
|
||
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
|
||
}
|
||
|
||
.logo-preview.dark {
|
||
background: #1a1a1a;
|
||
}
|
||
|
||
.logo-preview img,
|
||
.logo-preview svg {
|
||
max-width: 90%;
|
||
height: auto;
|
||
max-height: 160px;
|
||
}
|
||
|
||
.logo-info {
|
||
padding: var(--space-lg);
|
||
border-top: 1px solid #E5E7EB;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-grow: 1;
|
||
}
|
||
|
||
body.dark-mode .logo-info {
|
||
border-top-color: #334155;
|
||
}
|
||
|
||
.logo-name {
|
||
font-family: var(--font-primary);
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: var(--syntaxis-blue);
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
body.dark-mode .logo-name {
|
||
color: #60A5FA;
|
||
}
|
||
|
||
.logo-description {
|
||
font-size: 0.85rem;
|
||
color: #6B7280;
|
||
margin-bottom: var(--space-md);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
body.dark-mode .logo-description {
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
.logo-meta {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
color: #9CA3AF;
|
||
margin-bottom: var(--space-md);
|
||
background: #F9FAFB;
|
||
padding: var(--space-sm);
|
||
border-radius: 4px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
body.dark-mode .logo-meta {
|
||
background: #334155;
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
.logo-action {
|
||
display: flex;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.btn {
|
||
flex: 1;
|
||
padding: 0.5rem 1rem;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-family: var(--font-secondary);
|
||
font-size: 0.85rem;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #F3F4F6;
|
||
color: var(--syntaxis-blue);
|
||
border: 2px solid var(--syntaxis-blue);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #E5E7EB;
|
||
box-shadow: 0 4px 8px rgba(44, 95, 142, 0.3);
|
||
}
|
||
|
||
body.dark-mode .btn-primary {
|
||
background: #3a4555;
|
||
color: #9ab8d9;
|
||
border-color: #9ab8d9;
|
||
}
|
||
|
||
body.dark-mode .btn-primary:hover {
|
||
background: #4a5a75;
|
||
color: #b0d0f0;
|
||
border-color: #b0d0f0;
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #F3F4F6;
|
||
color: var(--syntaxis-blue);
|
||
border: 1px solid #E5E7EB;
|
||
}
|
||
|
||
body.dark-mode .btn-secondary {
|
||
background: #334155;
|
||
color: #60A5FA;
|
||
border-color: #475569;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #E5E7EB;
|
||
}
|
||
|
||
body.dark-mode .btn-secondary:hover {
|
||
background: #475569;
|
||
}
|
||
|
||
/* Color Palette */
|
||
.color-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: var(--space-lg);
|
||
margin-top: var(--space-lg);
|
||
}
|
||
|
||
.color-card {
|
||
background: white;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
body.dark-mode .color-card {
|
||
background: #1E293B;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.color-card:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.color-swatch {
|
||
width: 100%;
|
||
height: 120px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.color-details {
|
||
padding: var(--space-lg);
|
||
}
|
||
|
||
.color-name {
|
||
font-family: var(--font-primary);
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: var(--syntaxis-blue);
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
body.dark-mode .color-name {
|
||
color: #60A5FA;
|
||
}
|
||
|
||
.color-code {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.85rem;
|
||
line-height: 1.6;
|
||
background: #F9FAFB;
|
||
padding: var(--space-md);
|
||
border-radius: 4px;
|
||
border-left: 3px solid var(--syntaxis-blue);
|
||
}
|
||
|
||
body.dark-mode .color-code {
|
||
background: #334155;
|
||
border-left-color: #60A5FA;
|
||
color: #E5E7EB;
|
||
}
|
||
|
||
.color-code-line {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.color-code-line:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.color-label {
|
||
color: #6B7280;
|
||
font-weight: 500;
|
||
}
|
||
|
||
body.dark-mode .color-label {
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
.color-value {
|
||
font-weight: 600;
|
||
color: var(--syntaxis-blue);
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
body.dark-mode .color-value {
|
||
color: #60A5FA;
|
||
}
|
||
|
||
/* Typography */
|
||
.typography-showcase {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: var(--space-lg);
|
||
margin-top: var(--space-lg);
|
||
}
|
||
|
||
.typography-item {
|
||
background: white;
|
||
padding: var(--space-lg);
|
||
border-radius: 8px;
|
||
border: 1px solid #E5E7EB;
|
||
}
|
||
|
||
body.dark-mode .typography-item {
|
||
background: #252525;
|
||
border-color: #404040;
|
||
}
|
||
|
||
.typography-item h3 {
|
||
font-family: var(--font-primary);
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--syntaxis-gold);
|
||
margin-bottom: var(--space-md);
|
||
padding-bottom: var(--space-md);
|
||
border-bottom: 2px solid #E5E7EB;
|
||
}
|
||
|
||
body.dark-mode .typography-item h3 {
|
||
border-bottom-color: #334155;
|
||
}
|
||
|
||
.typography-example {
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.typography-example.headline {
|
||
font-family: var(--font-primary);
|
||
font-size: 1.75rem;
|
||
font-weight: 700;
|
||
line-height: 1.2;
|
||
letter-spacing: -0.01em;
|
||
color: var(--syntaxis-blue);
|
||
}
|
||
|
||
body.dark-mode .typography-example.headline {
|
||
color: #60A5FA;
|
||
}
|
||
|
||
.typography-example.body {
|
||
font-family: var(--font-secondary);
|
||
font-size: 1rem;
|
||
font-weight: 400;
|
||
line-height: 1.6;
|
||
color: #4B5563;
|
||
}
|
||
|
||
body.dark-mode .typography-example.body {
|
||
color: #E5E7EB;
|
||
}
|
||
|
||
.typography-example.code {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.875rem;
|
||
font-weight: 400;
|
||
color: #7C3AED;
|
||
background: #F9FAFB;
|
||
padding: 0.5rem;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
body.dark-mode .typography-example.code {
|
||
background: #334155;
|
||
color: #A78BFA;
|
||
}
|
||
|
||
.font-stack {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.75rem;
|
||
color: #6B7280;
|
||
margin-top: var(--space-sm);
|
||
padding: var(--space-sm);
|
||
background: #F9FAFB;
|
||
border-radius: 4px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
body.dark-mode .font-stack {
|
||
background: #334155;
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
/* Modal */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0,0,0,0.5);
|
||
z-index: 1000;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: var(--space-md);
|
||
}
|
||
|
||
.modal.active {
|
||
display: flex;
|
||
}
|
||
|
||
.modal-content {
|
||
background: white;
|
||
border-radius: 12px;
|
||
max-width: 600px;
|
||
max-height: 90vh;
|
||
overflow: auto;
|
||
padding: var(--space-2xl);
|
||
position: relative;
|
||
animation: slideIn 0.3s ease;
|
||
}
|
||
|
||
body.dark-mode .modal-content {
|
||
background: #1E293B;
|
||
color: #F1F5F9;
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
transform: translateY(-20px);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.modal-close {
|
||
position: absolute;
|
||
top: var(--space-lg);
|
||
right: var(--space-lg);
|
||
background: #E5E7EB;
|
||
border: none;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
font-size: 1.2rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
body.dark-mode .modal-close {
|
||
background: #334155;
|
||
color: #E5E7EB;
|
||
}
|
||
|
||
.modal-close:hover {
|
||
background: #D1D5DB;
|
||
}
|
||
|
||
body.dark-mode .modal-close:hover {
|
||
background: #475569;
|
||
}
|
||
|
||
.modal h2 {
|
||
font-family: var(--font-primary);
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
color: var(--syntaxis-blue);
|
||
margin-bottom: var(--space-lg);
|
||
margin-top: 0;
|
||
}
|
||
|
||
body.dark-mode .modal h2 {
|
||
color: #60A5FA;
|
||
}
|
||
|
||
/* Utilities */
|
||
.text-center {
|
||
text-align: center;
|
||
}
|
||
|
||
.mt-lg {
|
||
margin-top: var(--space-lg);
|
||
}
|
||
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
padding: var(--space-lg) var(--space-md);
|
||
}
|
||
|
||
header h1 {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.header-controls {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.select-group {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.logo-gallery {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.color-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.typography-showcase {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* Category Labels */
|
||
.category-label {
|
||
display: inline-block;
|
||
font-family: var(--font-mono);
|
||
font-size: 0.7rem;
|
||
text-transform: uppercase;
|
||
font-weight: 600;
|
||
letter-spacing: 0.05em;
|
||
background: transparent;
|
||
color: var(--syntaxis-gold);
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: 3px;
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.category-label.static {
|
||
background: transparent;
|
||
color: var(--syntaxis-blue);
|
||
}
|
||
|
||
.category-label.animated {
|
||
background: transparent;
|
||
color: var(--syntaxis-purple);
|
||
}
|
||
|
||
/* Font Selection */
|
||
.font-selector {
|
||
margin-top: var(--space-lg);
|
||
padding: var(--space-lg);
|
||
background: #F9FAFB;
|
||
border-radius: 8px;
|
||
border: 1px solid #E5E7EB;
|
||
}
|
||
|
||
body.dark-mode .font-selector {
|
||
background: #252525;
|
||
border-color: #404040;
|
||
}
|
||
|
||
.font-selector h4 {
|
||
font-family: var(--font-primary);
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
color: var(--syntaxis-blue);
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
body.dark-mode .font-selector h4 {
|
||
color: #60A5FA;
|
||
}
|
||
|
||
.font-options {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.font-option {
|
||
padding: var(--space-md);
|
||
background: white;
|
||
border: 2px solid #E5E7EB;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
body.dark-mode .font-option {
|
||
background: #334155;
|
||
border-color: #475569;
|
||
}
|
||
|
||
.font-option:hover {
|
||
border-color: var(--syntaxis-blue);
|
||
}
|
||
|
||
.font-option.active {
|
||
background: var(--syntaxis-blue);
|
||
color: white;
|
||
border-color: var(--syntaxis-blue);
|
||
}
|
||
|
||
.font-option-name {
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.font-option-preview {
|
||
font-size: 0.8rem;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.font-option.active .font-option-preview {
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* Info Box */
|
||
.info-box {
|
||
background: transparent;
|
||
border-left: 4px solid var(--syntaxis-blue);
|
||
padding: var(--space-lg);
|
||
border-radius: 4px;
|
||
margin-bottom: var(--space-lg);
|
||
font-size: 0.9rem;
|
||
color: #6B7280;
|
||
}
|
||
|
||
body.dark-mode .info-box {
|
||
background: transparent;
|
||
color: #9CA3AF;
|
||
border-left-color: #60A5FA;
|
||
}
|
||
|
||
.info-box strong {
|
||
color: #6B7280;
|
||
}
|
||
|
||
body.dark-mode .info-box strong {
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
/* Scalability Test */
|
||
.scalability-container {
|
||
background: transparent;
|
||
padding: 2rem;
|
||
border-radius: 8px;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.scalability-item {
|
||
text-align: center;
|
||
background: transparent;
|
||
padding: 1rem;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.scalability-icon {
|
||
display: inline-block;
|
||
padding: 0.75rem;
|
||
background: white;
|
||
border: 2px solid #E5E7EB;
|
||
border-radius: 8px;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
body.dark-mode .scalability-icon {
|
||
background: #252525;
|
||
border-color: #404040;
|
||
}
|
||
|
||
/* Make SVG preview clickable */
|
||
.logo-preview,
|
||
.main-logo-preview {
|
||
cursor: pointer;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.logo-preview:hover,
|
||
.main-logo-preview:hover {
|
||
opacity: 0.85;
|
||
transition: opacity 0.2s;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="shared-header">
|
||
<div class="header-content">
|
||
<div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
|
||
<div style="display: flex; align-items: center; gap: 2rem; justify-content: center;">
|
||
<h1 class="header-title">
|
||
<div class="header-logo">
|
||
<object data="syntax_logo_a.svg" type="image/svg+xml"></object>
|
||
</div>
|
||
</h1>
|
||
<div style="text-align: left; border-left: 2px solid #9CA3AF; padding-left: 2rem;">
|
||
<h2 style="margin: 0; font-size: 1.2rem; font-weight: 600; color: #9CA3AF;">🎨 Static Logos</h2>
|
||
<p style="margin: 0.5rem 0 0 0; font-size: 0.8rem; color: #9CA3AF;">Branding & Guidelines</p>
|
||
</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<p style="margin: 0; font-size: 0.9rem; color: #9CA3AF;">Systematic Orchestration, Perfectly Arranged</p>
|
||
</div>
|
||
</div>
|
||
<div class="header-nav">
|
||
<a class="nav-btn active" data-nav-button="branding" href="syntaxis-branding-showcase.html">🎨 Static Gallery</a>
|
||
<a class="nav-btn" data-nav-button="animated" href="syntaxis-animated-showcase.html">🎬 Animated Gallery</a>
|
||
<button class="header-btn" data-toggle="dark-mode" onclick="toggleDarkMode()">🌙 Dark Mode</button>
|
||
<a href="syntaxis-palette-fonts.html" target="_blank" class="header-btn" style="text-decoration: none; display: inline-flex; align-items: center;">🎨 Palette & Fonts</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Content -->
|
||
<div class="container">
|
||
<div class="info-box">
|
||
<strong>💡 Branding Guidelines:</strong> Click any logo to open it in a new tab. All logos are available in multiple formats and sizes. For animated versions, visit the Animated Gallery. Maintain proper spacing and sizing for best results.
|
||
</div>
|
||
|
||
<!-- Main Logo Showcase Section -->
|
||
<section class="main-logo-showcase">
|
||
<h2>🎯 Main Logos - Quick Access</h2>
|
||
|
||
<!-- Primary Logo Variations -->
|
||
<h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.2rem;">Primary Logo Variations</h3>
|
||
<div class="main-logo-grid" style="grid-template-columns: repeat(4, 1fr);">
|
||
<!-- Full Logo Static -->
|
||
<div class="main-logo-card">
|
||
<a href="syntax_logo.svg" target="_blank" class="main-logo-preview">
|
||
<object data="syntax_logo.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
||
</a>
|
||
<div class="main-logo-info">
|
||
<span class="main-logo-badge">STATIC</span>
|
||
<div class="main-logo-title">Horizontal Lockup</div>
|
||
<div class="main-logo-description">Complete logo with icon, wordmark, and tagline. Use for headers, documents, and marketing materials.</div>
|
||
<div class="main-logo-meta">syntax_logo.svg • 800×200px</div>
|
||
<div class="main-logo-action">
|
||
<button class="main-logo-btn" onclick="window.open('syntax_logo.svg', '_blank')">
|
||
🔗 Open SVG
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Compact Logo Static -->
|
||
<div class="main-logo-card">
|
||
<a href="syntaxis_logo_c.svg" target="_blank" class="main-logo-preview">
|
||
<object data="syntaxis_logo_c.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
||
</a>
|
||
<div class="main-logo-info">
|
||
<span class="main-logo-badge">STATIC</span>
|
||
<div class="main-logo-title">Compact Horizontal</div>
|
||
<div class="main-logo-description">Horizontal logo without tagline for narrow spaces. Ideal for toolbars, navigation, and reduced-space contexts.</div>
|
||
<div class="main-logo-meta">syntaxis_logo_c.svg • 400×100px</div>
|
||
<div class="main-logo-action">
|
||
<button class="main-logo-btn" onclick="window.open('syntaxis_logo_c.svg', '_blank')">
|
||
🔗 Open SVG
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Vertical Stack Static -->
|
||
<div class="main-logo-card">
|
||
<a href="syntax_logo_vertical.svg" target="_blank" class="main-logo-preview">
|
||
<object data="syntax_logo_vertical.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
||
</a>
|
||
<div class="main-logo-info">
|
||
<span class="main-logo-badge">STATIC</span>
|
||
<div class="main-logo-title">Vertical Stack</div>
|
||
<div class="main-logo-description">Icon stacked above text. Perfect for social media profiles, mobile apps, and square layouts.</div>
|
||
<div class="main-logo-meta">syntax_logo_vertical.svg • 250×380px</div>
|
||
<div class="main-logo-action">
|
||
<button class="main-logo-btn" onclick="window.open('syntax_logo_vertical.svg', '_blank')">
|
||
🔗 Open SVG
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Compact Vertical Static -->
|
||
<div class="main-logo-card">
|
||
<a href="syntax_logo_vertical_c.svg" target="_blank" class="main-logo-preview">
|
||
<object data="syntax_logo_vertical_c.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
||
</a>
|
||
<div class="main-logo-info">
|
||
<span class="main-logo-badge">STATIC</span>
|
||
<div class="main-logo-title">Compact Vertical</div>
|
||
<div class="main-logo-description">Vertical logo without tagline for compact spaces. Ideal for icons, app headers, and minimal layouts.</div>
|
||
<div class="main-logo-meta">syntax_logo_vertical_c.svg • 200×280px</div>
|
||
<div class="main-logo-action">
|
||
<button class="main-logo-btn" onclick="window.open('syntax_logo_vertical_c.svg', '_blank')">
|
||
🔗 Open SVG
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Icon & Monogram -->
|
||
<h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.2rem;">Icon & Monogram</h3>
|
||
<div class="main-logo-grid" style="grid-template-columns: repeat(2, 1fr);">
|
||
<!-- Main Icon -->
|
||
<div class="main-logo-card">
|
||
<a href="syntax_icon.svg" target="_blank" class="main-logo-preview" style="background: transparent;">
|
||
<object data="syntax_icon.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
||
</a>
|
||
<div class="main-logo-info">
|
||
<span class="main-logo-badge">ICON</span>
|
||
<div class="main-logo-title">Main Icon</div>
|
||
<div class="main-logo-description">Primary geometric icon with accent color. Perfect for app icons and interface elements. Minimum 32px recommended.</div>
|
||
<div class="main-logo-meta">syntax_icon.svg • 200×200px</div>
|
||
<div class="main-logo-action">
|
||
<button class="main-logo-btn" onclick="window.open('syntax_icon.svg', '_blank')">
|
||
🔗 Open SVG
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Favicon -->
|
||
<div class="main-logo-card">
|
||
<a href="syntax_favicon.svg" target="_blank" class="main-logo-preview" style="background: transparent;">
|
||
<object data="syntax_favicon.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
||
</a>
|
||
<div class="main-logo-info">
|
||
<span class="main-logo-badge">FAVICON</span>
|
||
<div class="main-logo-title">Favicon</div>
|
||
<div class="main-logo-description">Optimized icon for browser tabs and bookmarks. Available in SVG, and in ICO (32×32, 16×16) and PNG formats upon request.</div>
|
||
<div class="main-logo-meta">syntax_favicon.svg • 200×200px</div>
|
||
<div class="main-logo-action">
|
||
<button class="main-logo-btn" onclick="window.open('syntax_favicon.svg', '_blank')">
|
||
🔗 Open SVG
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Monochrome Versions -->
|
||
<h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.2rem;">Monochrome Versions</h3>
|
||
<div class="main-logo-grid">
|
||
<!-- Horizontal Lockup - Blanco y Negro -->
|
||
<div class="main-logo-card">
|
||
<a href="syntax_logo_bn.svg" target="_blank" class="main-logo-preview">
|
||
<object data="syntax_logo_bn.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
||
</a>
|
||
<div class="main-logo-info">
|
||
<span class="main-logo-badge">STATIC</span>
|
||
<div class="main-logo-title">Horizontal Lockup (B&W)</div>
|
||
<div class="main-logo-description">Complete logo in black and white. Perfect for print, high-contrast designs, and monochrome applications.</div>
|
||
<div class="main-logo-meta">syntax_logo_bn.svg • 800×200px</div>
|
||
<div class="main-logo-action">
|
||
<button class="main-logo-btn" onclick="window.open('syntax_logo_bn.svg', '_blank')">
|
||
🔗 Open SVG
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Compact - Blanco y Negro -->
|
||
<div class="main-logo-card">
|
||
<a href="syntaxis_logo_bn_c.svg" target="_blank" class="main-logo-preview">
|
||
<object data="syntaxis_logo_bn_c.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
||
</a>
|
||
<div class="main-logo-info">
|
||
<span class="main-logo-badge">STATIC</span>
|
||
<div class="main-logo-title">Compact Horizontal (B&W)</div>
|
||
<div class="main-logo-description">Horizontal logo without tagline in black and white. Ideal for small spaces and monochrome contexts.</div>
|
||
<div class="main-logo-meta">syntaxis_logo_bn_c.svg • 400×100px</div>
|
||
<div class="main-logo-action">
|
||
<button class="main-logo-btn" onclick="window.open('syntaxis_logo_bn_c.svg', '_blank')">
|
||
🔗 Open SVG
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Vertical Stack - Blanco y Negro -->
|
||
<div class="main-logo-card">
|
||
<a href="syntax_logo_vertical_bn.svg" target="_blank" class="main-logo-preview">
|
||
<object data="syntax_logo_vertical_bn.svg" type="image/svg+xml" style="width: 100%; max-height: 180px;"></object>
|
||
</a>
|
||
<div class="main-logo-info">
|
||
<span class="main-logo-badge">STATIC</span>
|
||
<div class="main-logo-title">Vertical Stack (B&W)</div>
|
||
<div class="main-logo-description">Stacked layout in black and white. Perfect for square spaces and monochrome layouts.</div>
|
||
<div class="main-logo-meta">syntax_logo_vertical_bn.svg • 250×380px</div>
|
||
<div class="main-logo-action">
|
||
<button class="main-logo-btn" onclick="window.open('syntax_logo_vertical_bn.svg', '_blank')">
|
||
🔗 Open SVG
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scalability Test -->
|
||
<h3 style="margin-top: 2rem; margin-bottom: 1rem; font-size: 1.2rem;">Scalability Test</h3>
|
||
<div class="scalability-container">
|
||
<p style="margin-bottom: 1.5rem; color: #9CA3AF;">The icon maintains clarity and proportions at various sizes. Recommended minimum size is 32px for interface elements.</p>
|
||
<div style="display: flex; gap: 2rem; align-items: flex-end; flex-wrap: wrap; justify-content: center;">
|
||
<div class="scalability-item">
|
||
<object data="syntax_icon_simple.svg" type="image/svg+xml" class="scalability-icon" style="width: 16px; height: 16px;"></object>
|
||
<div style="font-size: 0.75rem; color: #9CA3AF;">16×16px</div>
|
||
</div>
|
||
<div class="scalability-item">
|
||
<object data="syntax_icon_simple.svg" type="image/svg+xml" class="scalability-icon" style="width: 32px; height: 32px;"></object>
|
||
<div style="font-size: 0.75rem; color: #9CA3AF;">32×32px</div>
|
||
</div>
|
||
<div class="scalability-item">
|
||
<object data="syntax_icon_simple.svg" type="image/svg+xml" class="scalability-icon" style="width: 64px; height: 64px;"></object>
|
||
<div style="font-size: 0.75rem; color: #9CA3AF;">64×64px</div>
|
||
</div>
|
||
<div class="scalability-item">
|
||
<object data="syntax_icon_simple.svg" type="image/svg+xml" class="scalability-icon" style="width: 128px; height: 128px;"></object>
|
||
<div style="font-size: 0.75rem; color: #9CA3AF;">128×128px</div>
|
||
</div>
|
||
<div class="scalability-item">
|
||
<object data="syntax_icon_simple.svg" type="image/svg+xml" class="scalability-icon" style="width: 256px; height: 256px;"></object>
|
||
<div style="font-size: 0.75rem; color: #9CA3AF;">256×256px</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Logos Section -->
|
||
<section class="section">
|
||
<h2 id="logoVariantsTitle">Logos - Available Variants</h2>
|
||
<div class="logo-gallery" id="logoGallery">
|
||
<!-- Logos se cargarán dinámicamente -->
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<script>
|
||
// Data
|
||
const LOGOS = {
|
||
static: [
|
||
{
|
||
name: 'syntaxis-logo-icon.svg',
|
||
category: 'Icon',
|
||
description: 'Main geometric icon - Favicon, app icon, profile',
|
||
dimensions: '200×200px',
|
||
uses: 'Minimum 32px, ideal for iconography',
|
||
type: 'static',
|
||
path: 'syntaxis_logo_static_files/'
|
||
},
|
||
{
|
||
name: 'syntaxis-logo-horizontal.svg',
|
||
category: 'Full Horizontal',
|
||
description: 'Complete logo with icon, wordmark and tagline',
|
||
dimensions: '500×120px',
|
||
uses: 'Web headers, business cards, marketing materials',
|
||
type: 'static',
|
||
path: 'syntaxis_logo_static_files/'
|
||
},
|
||
{
|
||
name: 'syntaxis-logo-compact.svg',
|
||
category: 'Compact Horizontal',
|
||
description: 'Horizontal logo without tagline',
|
||
dimensions: '400×100px',
|
||
uses: 'Toolbars, navigation, reduced spaces',
|
||
type: 'static',
|
||
path: 'syntaxis_logo_static_files/'
|
||
},
|
||
{
|
||
name: 'syntaxis-logo-vertical.svg',
|
||
category: 'Vertical',
|
||
description: 'Stacked layout with icon above text',
|
||
dimensions: '300×300px',
|
||
uses: 'Square spaces, mobile layouts, posters',
|
||
type: 'static',
|
||
path: 'syntaxis_logo_static_files/'
|
||
},
|
||
{
|
||
name: 'syntaxis-logo-monogram.svg',
|
||
category: 'Monogram',
|
||
description: 'Geometric construction of the letter "S"',
|
||
dimensions: '200×200px',
|
||
uses: 'Watermarks, very small sizes',
|
||
type: 'static',
|
||
path: 'syntaxis_logo_static_files/'
|
||
},
|
||
{
|
||
name: 'syntaxis-logo-mono-light.svg',
|
||
category: 'Monochromatic - Light',
|
||
description: 'Black shapes for light backgrounds',
|
||
dimensions: '200×200px',
|
||
uses: 'Print, high contrast, accessibility',
|
||
type: 'static',
|
||
path: 'syntaxis_logo_static_files/'
|
||
},
|
||
{
|
||
name: 'syntaxis-logo-mono-dark.svg',
|
||
category: 'Monochromatic - Dark',
|
||
description: 'White shapes for dark backgrounds',
|
||
dimensions: '200×200px',
|
||
uses: 'Dark themes, presentations, dark interface',
|
||
type: 'static',
|
||
path: 'syntaxis_logo_static_files/'
|
||
}
|
||
],
|
||
animated: [
|
||
{
|
||
name: 'syntaxis-logo-icon-animated.svg',
|
||
category: 'Entry - Assembly',
|
||
description: 'Pieces appear from the center, rotating to position',
|
||
duration: '~1.2s (one time)',
|
||
uses: 'Splash screens, hero sections, presentation intros',
|
||
type: 'animated',
|
||
path: 'syntax_logos_anim/'
|
||
},
|
||
{
|
||
name: 'syntaxis-logo-icon-construction.svg',
|
||
category: 'Entry - Construction',
|
||
description: 'Pieces slide from top, bottom, left and right',
|
||
duration: '~1.4s (one time)',
|
||
uses: 'Explainer videos, "How it works", onboarding',
|
||
type: 'animated',
|
||
path: 'syntax_logos_anim/'
|
||
},
|
||
{
|
||
name: 'syntaxis-logo-horizontal-animated.svg',
|
||
category: 'Full Animated Logo',
|
||
description: 'Icon assembles → text appears → tagline fade in',
|
||
duration: '~1.4s (one time)',
|
||
uses: 'Web headers, video intros, brand presentations',
|
||
type: 'animated',
|
||
path: 'syntax_logos_anim/'
|
||
},
|
||
{
|
||
name: 'syntaxis-logo-icon-pulse.svg',
|
||
category: 'Loop - Pulse',
|
||
description: 'Central triangle pulses and glows softly',
|
||
duration: '2s infinite loop',
|
||
uses: 'Active status indicators, CTAs, dashboard widgets',
|
||
type: 'animated',
|
||
path: 'syntax_logos_anim/'
|
||
},
|
||
{
|
||
name: 'syntaxis-logo-loading.svg',
|
||
category: 'Loop - Loading Spinner',
|
||
description: 'Diamonds orbit, squares rotate',
|
||
duration: '3s loop (orbit) + 2s (fade)',
|
||
uses: 'Loading indicators, "processing" states, work in progress',
|
||
type: 'animated',
|
||
path: 'syntax_logos_anim/'
|
||
},
|
||
{
|
||
name: 'syntaxis-logo-icon-ambient.svg',
|
||
category: 'Loop - Ambient',
|
||
description: 'Subtle expansion/contraction + floating',
|
||
duration: '4-6s infinite loop',
|
||
uses: 'Decorative elements, section headers, subtle backgrounds',
|
||
type: 'animated',
|
||
path: 'syntax_logos_anim/'
|
||
},
|
||
{
|
||
name: 'syntaxis-logo-icon-hover.svg',
|
||
category: 'Interactive - Hover',
|
||
description: 'Shapes grow and change color on hover',
|
||
duration: '0.3s transition',
|
||
uses: 'Clickable logos, buttons, interactive links',
|
||
type: 'animated',
|
||
path: 'syntax_logos_anim/'
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
// Helper Functions
|
||
function openLogoInNewTab(filename, path) {
|
||
const fullPath = `${path}${filename}`;
|
||
window.open(fullPath, '_blank');
|
||
}
|
||
|
||
|
||
// Render Functions
|
||
function renderLogos() {
|
||
const gallery = document.getElementById('logoGallery');
|
||
const logos = [...LOGOS.static, ...LOGOS.animated];
|
||
|
||
gallery.innerHTML = logos.map(logo => `
|
||
<div class="logo-card">
|
||
<div class="logo-preview ${logo.type === 'animated' ? 'dark' : ''}">
|
||
<img src="${logo.path}${logo.name}" alt="${logo.name}" onerror="this.style.display='none'">
|
||
</div>
|
||
<div class="logo-info">
|
||
<div class="category-label ${logo.type}">${logo.type.toUpperCase()}</div>
|
||
<div class="logo-name">${logo.category}</div>
|
||
<div class="logo-description">${logo.description}</div>
|
||
<div class="logo-meta">📄 ${logo.name}</div>
|
||
<div class="logo-meta">📐 ${logo.dimensions}</div>
|
||
<div class="logo-meta">💡 ${logo.uses}</div>
|
||
<div class="logo-action">
|
||
<button class="btn btn-primary" onclick="openLogoInNewTab('${logo.name}', '${logo.path}')">
|
||
Open in New Tab
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
|
||
// Initialize
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
renderLogos();
|
||
});
|
||
</script>
|
||
|
||
<script src="assets/header-shared.js"></script>
|
||
</body>
|
||
</html>
|