/** * Yental Platform — Global Design System * ======================================== * Version : 1.0.0 * Author : Yental Engineering * * This file owns the entire visual language of the platform: * - Brand colour tokens as CSS custom properties * - Light + dark mode semantic mappings * - Shared component classes (.yt-card, .yt-btn-*) * - Utility animations * - Base resets * * USAGE: * Every HTML page imports this file in before any * page-specific styles. Tailwind utility classes reference * the extended colour tokens defined in each page's * tailwind.config block (which mirrors these values). * * DARK MODE: * Toggle class="dark" on . All semantic tokens flip * automatically. No JS required beyond the toggle itself. */ /* ───────────────────────────────────────────────────────────── FONTS ───────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ───────────────────────────────────────────────────────────── BRAND COLOUR CONSTANTS (raw palette — do not use directly) ───────────────────────────────────────────────────────────── */ :root { --yt-blue: #065F8F; /* Ocean blue — primary brand */ --yt-navy: #1A4B69; /* Deep navy — depth / weight */ --yt-rose: #DCBEBC; /* Dusty rose — warmth / soft */ --yt-terra: #B25B51; /* Terracotta — action / energy */ --yt-cream: #F6ECEA; /* Cream — warmth / space */ } /* ───────────────────────────────────────────────────────────── LIGHT MODE (default) ───────────────────────────────────────────────────────────── */ :root { /* Surfaces */ --bg-page: #F6ECEA; --bg-surface: #FFFFFF; --bg-card: #FFFFFF; --bg-subtle: #F2F2F2; --bg-hover: #EAEAEA; /* Text */ --text-primary: #1A4B69; --text-secondary: #065F8F; --text-muted: rgba(26, 75, 105, 0.48); --text-inverse: #F6ECEA; /* Borders */ --border: #D8D8D8; --border-strong: #BFBFBF; /* Interactive */ --btn-primary: #B25B51; --btn-primary-hover: #9a4d44; --btn-secondary: #065F8F; --btn-secondary-hover:#054f79; --link: #065F8F; --link-hover: #1A4B69; /* Accent */ --accent: #065F8F; --accent-soft: rgba(6, 95, 143, 0.10); --accent-rose: rgba(220, 190, 188, 0.35); /* Status */ --status-ok: #1e7a50; --status-ok-bg: rgba(30, 122, 80, 0.08); --status-warn: #B25B51; --status-warn-bg: rgba(178, 91, 81, 0.08); --status-error: #c0392b; --status-error-bg:rgba(192, 57, 43, 0.08); /* Shadows */ --shadow-sm: 0 1px 4px rgba(26, 75, 105, 0.08); --shadow-md: 0 4px 16px rgba(26, 75, 105, 0.10); --shadow-lg: 0 12px 40px rgba(26, 75, 105, 0.12); } /* ───────────────────────────────────────────────────────────── DARK MODE (class="dark" on ) Dark palette uses navy family as surfaces — NOT pure black. ───────────────────────────────────────────────────────────── */ .dark { /* Surfaces */ --bg-page: #091520; --bg-surface: #112233; --bg-card: #1A4B69; --bg-subtle: #1C1C1E; --bg-hover: #242426; /* Text */ --text-primary: #F6ECEA; --text-secondary: #DCBEBC; --text-muted: rgba(246, 236, 234, 0.40); --text-inverse: #1A4B69; /* Borders */ --border: #3E3E40; --border-strong: #585858; /* Interactive */ --btn-primary: #B25B51; --btn-primary-hover: #c4665b; --btn-secondary: #065F8F; --btn-secondary-hover:#0a72ab; --link: #DCBEBC; --link-hover: #F6ECEA; /* Accent */ --accent: #065F8F; --accent-soft: rgba(6, 95, 143, 0.22); --accent-rose: rgba(220, 190, 188, 0.15); /* Status */ --status-ok: #3aaf76; --status-ok-bg: rgba(58, 175, 118, 0.12); --status-warn: #DCBEBC; --status-warn-bg: rgba(220, 190, 188, 0.10); --status-error: #e05c4b; --status-error-bg:rgba(224, 92, 75, 0.12); /* Shadows */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.30); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.40); } /* ───────────────────────────────────────────────────────────── BASE RESETS + GLOBAL ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--bg-page); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; transition: background-color 0.3s ease, color 0.3s ease; margin: 0; } .mono { font-family: 'JetBrains Mono', 'Courier New', monospace; } /* Scrollbar suppression */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* ───────────────────────────────────────────────────────────── SHARED COMPONENT CLASSES Use these in any HTML page for consistent styling. ───────────────────────────────────────────────────────────── */ /* Card */ .yt-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06); transition: box-shadow 0.22s ease, border-color 0.22s ease; } .yt-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); } /* Primary button — terracotta */ .yt-btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; border-radius: 12px; padding: 12px 24px; cursor: pointer; border: none; transition: background 0.18s ease, transform 0.1s ease, opacity 0.18s; text-decoration: none; } .yt-btn:active { transform: scale(0.97); } .yt-btn-primary { background: var(--btn-primary); color: #FFFFFF; } .yt-btn-primary:hover { background: var(--btn-primary-hover); } .yt-btn-secondary { background: transparent; color: var(--text-primary); border: 1.5px solid var(--border-strong); } .yt-btn-secondary:hover { background: var(--bg-hover); } .yt-btn-ghost { background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border); } .yt-btn-ghost:hover { background: var(--bg-hover); } /* Input */ .yt-input { width: 100%; background: var(--bg-surface); border: 1.5px solid var(--border); border-radius:12px; padding: 10px 14px; font-size: 14px; font-family: 'Inter', sans-serif; color: var(--text-primary); outline: none; transition: border-color 0.18s ease; } .yt-input::placeholder { color: var(--text-muted); } .yt-input:focus { border-color: var(--accent); } /* Section label */ .yt-label { font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); } /* Status badges */ .yt-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 800; letter-spacing:0.12em; text-transform:uppercase; padding: 4px 10px; border-radius: 99px; border: 1px solid transparent; } .yt-badge-ok { background: var(--status-ok-bg); color: var(--status-ok); border-color: var(--status-ok); } .yt-badge-warn { background: var(--status-warn-bg); color: var(--status-warn); border-color: var(--status-warn); } .yt-badge-error { background: var(--status-error-bg); color: var(--status-error); border-color: var(--status-error); } /* Nav */ .yt-nav { position: fixed; top: 0; width: 100%; z-index: 40; background: rgba(246, 236, 234, 0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); transition: background 0.3s; } .dark .yt-nav { background: rgba(9, 21, 32, 0.88); } /* Divider */ .yt-divider { height: 1px; background: var(--border); border: none; margin: 0; } /* ───────────────────────────────────────────────────────────── ANIMATIONS ───────────────────────────────────────────────────────────── */ @keyframes yt-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes yt-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes yt-shimmer { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.85; } } @keyframes yt-pulse-ring { 0%,100% { box-shadow: 0 0 0 0 rgba(6, 95, 143, 0.25); } 60% { box-shadow: 0 0 0 10px rgba(6, 95, 143, 0); } } .dark @keyframes yt-pulse-ring { 0%,100% { box-shadow: 0 0 0 0 rgba(220, 190, 188, 0.20); } 60% { box-shadow: 0 0 0 10px rgba(220, 190, 188, 0); } } @keyframes yt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .yt-fade-up { animation: yt-fade-up 0.44s cubic-bezier(0.34, 1.06, 0.64, 1) both; } .yt-fade-in { animation: yt-fade-in 0.3s ease both; } .yt-skeleton { animation: yt-shimmer 1.4s ease-in-out infinite; background: var(--border); border-radius: 8px; } .yt-pulse { animation: yt-pulse-ring 2.5s infinite; } .yt-float { animation: yt-float 6s ease-in-out infinite; } .yt-float-fast { animation: yt-float 4s ease-in-out infinite; }