/* ========================================================================= WindTree Glass — Colors & Type Premium B2B glassmorphism design system for wind-energy SaaS. ========================================================================= */ /* ---------- Fonts ---------- */ @font-face { font-family: "Lexend"; src: url("./fonts/Lexend-VariableFont_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-display: swap; font-style: normal; } /* Pretendard was requested but its archive was not uploaded. We load it from the official CDN as a fallback; see README. */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css"); :root { /* ===================================================================== COLOR SYSTEM ===================================================================== */ /* ----------------------------------------------------------------------- LOGO GRADIENT — extracted from official mark via pixel sampling ----------------------------------------------------------------------- */ --logo-grad-top: #65A3B2; /* light teal — drop apex */ --logo-grad-mid: #316074; /* steel blue — mid body */ --logo-grad-bottom: #042C44; /* deep navy — drop base */ --logo-wordmark: #022A43; /* wordmark text color */ --logo-gradient: linear-gradient(180deg, #65A3B2 0%, #316074 50%, #042C44 100%); /* Background gradient stops (the "sky") */ --bg-sky-0: #F5FAFF; --bg-sky-1: #EAF4FF; --bg-sky-gradient: linear-gradient(180deg, var(--bg-sky-0) 0%, var(--bg-sky-1) 100%); /* Surface / glass */ --surface-glass: rgba(255, 255, 255, 0.60); --surface-glass-strong: rgba(255, 255, 255, 0.78); --surface-glass-soft: rgba(255, 255, 255, 0.42); --surface-solid: #FFFFFF; /* Borders & hairlines */ --border-hairline: #D6E8FF; --border-hairline-2: rgba(214, 232, 255, 0.55); --border-inner: rgba(255, 255, 255, 0.70); /* inner highlight on glass */ /* Accent (WindTree Blue) */ --accent: #2F80ED; --accent-600: #1F6FDC; --accent-400: #5A9CF2; --accent-200: #B8D4F8; --accent-050: #EAF2FE; --accent-tint: rgba(47, 128, 237, 0.08); /* Text */ --fg-1: #0A2540; /* primary */ --fg-2: #3C5878; /* secondary */ --fg-3: #6B82A0; /* tertiary / label */ --fg-4: #9BAEC8; /* muted */ --fg-on-accent: #FFFFFF; /* Semantic (kept calm — this is a data-first system) */ --ok: #1BB673; --ok-050: #E6F7EF; --warn: #E8A13C; --warn-050: #FBF1E1; --err: #E15B5B; --err-050: #FBE9E9; --info: var(--accent); --info-050: var(--accent-050); /* Data viz — cool, calm palette for wind dashboards */ --viz-1: #2F80ED; /* blue (primary series) */ --viz-2: #56CCF2; /* cyan (wind speed) */ --viz-3: #6FCF97; /* mint (output) */ --viz-4: #9B8CFF; /* periwinkle (forecast) */ --viz-5: #F2C94C; /* sand (sunlight) */ --viz-6: #BB6BD9; /* orchid (anomaly) */ /* ===================================================================== TYPE SYSTEM ===================================================================== */ --font-display: "Lexend", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-sans: "Pretendard", "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; /* Scale — 1280×720 slide reference; fluid for web */ --fs-display: 60px; /* slide titles (48–60) */ --fs-title: 44px; /* H1 */ --fs-h2: 32px; --fs-h3: 24px; --fs-subtitle: 22px; /* slide subtitles (20–24) */ --fs-body-lg: 18px; --fs-body: 16px; /* body (14–18) */ --fs-body-sm: 14px; --fs-label: 12px; --fs-kpi: 72px; /* KPI numerals */ --fs-kpi-sm: 44px; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.08; --lh-snug: 1.22; --lh-normal: 1.45; --lh-loose: 1.6; --tr-tight: -0.02em; --tr-snug: -0.01em; --tr-wide: 0.04em; /* ===================================================================== SPACING / RADII / ELEVATION ===================================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; /* card minimum */ --radius-lg: 20px; /* default card */ --radius-xl: 24px; /* hero card */ --radius-2xl: 32px; --radius-pill: 999px; /* Soft, stacked shadows — light, tinted with accent */ --shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.04); --shadow-sm: 0 2px 8px rgba(10, 37, 64, 0.05), 0 1px 2px rgba(10, 37, 64, 0.04); --shadow-md: 0 8px 24px rgba(10, 37, 64, 0.06), 0 2px 6px rgba(10, 37, 64, 0.04); --shadow-lg: 0 20px 48px rgba(10, 37, 64, 0.08), 0 4px 12px rgba(10, 37, 64, 0.04); --shadow-glow: 0 12px 40px rgba(47, 128, 237, 0.18); /* Glass recipe (use as a mixin pattern — see .glass below) */ --glass-blur: 24px; --glass-saturate: 140%; /* Motion */ --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0); --ease-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1.2); --dur-fast: 140ms; --dur-med: 220ms; --dur-slow: 360ms; } /* ========================================================================= SEMANTIC ELEMENT STYLES ========================================================================= */ html, body { background: var(--bg-sky-gradient); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1 { font-family: var(--font-display); font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--fg-1); text-wrap: balance; } h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--fg-1); text-wrap: balance; } h3, .h3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg-1); } .display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--fg-1); text-wrap: balance; } .subtitle { font-family: var(--font-sans); font-size: var(--fs-subtitle); font-weight: var(--fw-regular); line-height: var(--lh-snug); color: var(--fg-2); text-wrap: pretty; } p, .p { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-2); text-wrap: pretty; } .label { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: var(--fw-medium); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--fg-3); } .kpi { font-family: var(--font-display); font-size: var(--fs-kpi); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: var(--tr-tight); color: var(--fg-1); font-variant-numeric: tabular-nums; } .mono, code, kbd { font-family: var(--font-mono); font-size: 0.92em; } /* ========================================================================= GLASS PRIMITIVE (use as class) ========================================================================= */ .glass { background: var(--surface-glass); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-md), inset 0 1px 0 var(--border-inner); } .glass-strong { background: var(--surface-glass-strong); } .glass-soft { background: var(--surface-glass-soft); }