/* ContSoft Landing Page Design System Based on PythonC/c.css - Corporate styling with brand colors */ /* ── Boot paint-gate release — see CLAUDE.md → "No load flash" ───────── Every hides in its inline critical block so a browser that paints before the stylesheets arrive shows the branded canvas instead of raw unstyled HTML. This sheet IS the module's styling, so the moment it applies the page is safe to show. Keep this rule in every stylesheet that carries the module's @font-face, and nowhere else — putting it in a shared or decorative sheet would reveal the page before the layout exists. */ body { visibility: visible; animation: none; } /* Inter — self-hosted, inlined to avoid @import waterfall */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: optional; src: url(/shared/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: optional; src: url(/shared/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light dark; /* Corporate Brand Colors */ --brand-red: #e00102; --brand-red-hover: #c40102; --brand-red-light: #fef2f2; --brand-rgb: 224, 1, 2; --brand-font: #ffffff; --brand-dark: #1c1c1c; /* Light mode colors */ --bg-primary: #ffffff; --bg-secondary: #f7f7f7; --bg-tertiary: #f2f2f2; --bg-elevated: #ffffff; --text-primary: #1c1c1c; --text-secondary: #505050; --text-tertiary: #7a7a7a; --border-color: #e5e5e5; --border-hover: #c2c2c2; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12); --accent-primary: var(--brand-red); --accent-primary-hover: var(--brand-red-hover); --accent-primary-light: var(--brand-red-light); --accent-green: #35c14e; --accent-green-light: #ecfdf5; /* ── Interactive accent — ALWAYS the tenant brand, never a hardcoded blue ── `--accent-blue` used to be literal #2563eb here and it drives every primary button, link and active state, so the whole app painted Tailwind blue whatever the tenant's brand colour was. It now resolves to the brand. Two variants, because one colour cannot do both jobs: --accent-interactive a solid FILL (button / dot / avatar background). The label on top is --brand-font, which branding.py already picks for contrast, so a dark brand works. --accent-interactive-text the same accent used as TEXT, an icon or a border directly on the canvas. Identical in light mode; in dark mode it swaps to --brand-on-dark — the brand lifted in HSL lightness (hue and saturation kept) until it clears 4.5:1 on the dark surfaces. Needed: canary2's #A01530 scores 2.2:1 as dark-mode text, and the Grafit preset 1.7:1. --accent-blue/-hover stay as aliases of the FILL so any rule or inline template style still pointing at the old name is branded too. */ --accent-interactive: var(--accent-primary); --accent-interactive-hover: var(--accent-primary-hover); --accent-interactive-text: var(--accent-primary); --accent-interactive-text-hover: var(--accent-primary-hover); --accent-blue: var(--accent-interactive); --accent-blue-hover: var(--accent-interactive-hover); /* Semantic "information" blue — the ONLY blue left in the UI. It is a STATUS colour (in-progress pills, info callouts) and deliberately not the brand: it must stay distinguishable from the accent on a red-branded tenant and from the green/amber/red status colours next to it. */ /* Semantic DANGER — like --accent-info, deliberately independent of the brand. `.btn.danger` used to be var(--brand-red), which meant destructive actions were the brand colour: indistinguishable from the primary button on a red tenant (canary2's "Cég törlése" next to "Projekt létrehozása"), and not red at all on a blue or green one. White on #dc2626 clears 4.5:1; the #ef4444 the other sheets used does not. */ --accent-danger: #dc2626; --accent-danger-hover: #b91c1c; --accent-danger-text: #dc2626; --accent-danger-surface: rgba(220, 38, 38, 0.08); --accent-danger-border: rgba(220, 38, 38, 0.28); --accent-info: #2563eb; --accent-info-hover: #1d4ed8; --accent-info-surface: rgba(37, 99, 235, 0.08); --accent-info-border: rgba(37, 99, 235, 0.25); --input-bg: #ffffff; --input-border: #d4d4d4; --input-focus-border: var(--brand-red); --input-focus-ring: rgba(var(--brand-rgb), 0.12); --header-accent: var(--brand-red); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-primary: #1a1a1a; --bg-secondary: #0f0f0f; --bg-tertiary: #262626; --bg-elevated: #262626; --text-primary: #f5f5f5; --text-secondary: #a3a3a3; --text-tertiary: #737373; --border-color: #363636; --border-hover: #525252; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); --accent-primary-light: rgba(var(--brand-rgb), 0.15); --accent-green: #4ade80; --accent-green-light: rgba(34, 197, 94, 0.15); /* Dark mode: the FILL stays the true brand (its label is --brand-font), but the TEXT variant lifts to --brand-on-dark so links and accent glyphs stay legible on #262626/#1a1a1a/#0f0f0f. The fallback is the default brand's own lifted value, for a page whose predates the --brand-on-dark injection. */ --accent-interactive-text: var(--brand-on-dark, #fe494a); --accent-interactive-text-hover: var(--brand-on-dark, #fe494a); --accent-danger-text: #f87171; --accent-danger-surface: rgba(239, 68, 68, 0.15); --accent-danger-border: rgba(239, 68, 68, 0.38); --accent-info: #60a5fa; --accent-info-hover: #93c5fd; --accent-info-surface: rgba(96, 165, 250, 0.15); --accent-info-border: rgba(96, 165, 250, 0.32); --input-bg: #262626; --input-border: #404040; --input-focus-ring: rgba(var(--brand-rgb), 0.2); } } /* V2-08: explicit dark theme — keep in sync with the media block above */ :root[data-theme="dark"] { --bg-primary: #1a1a1a; --bg-secondary: #0f0f0f; --bg-tertiary: #262626; --bg-elevated: #262626; --text-primary: #f5f5f5; --text-secondary: #a3a3a3; --text-tertiary: #737373; --border-color: #363636; --border-hover: #525252; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); --accent-primary-light: rgba(var(--brand-rgb), 0.15); --accent-green: #4ade80; --accent-green-light: rgba(34, 197, 94, 0.15); /* Dark mode: the FILL stays the true brand (its label is --brand-font), but the TEXT variant lifts to --brand-on-dark so links and accent glyphs stay legible on #262626/#1a1a1a/#0f0f0f. The fallback is the default brand's own lifted value, for a page whose predates the --brand-on-dark injection. */ --accent-interactive-text: var(--brand-on-dark, #fe494a); --accent-interactive-text-hover: var(--brand-on-dark, #fe494a); --accent-danger-text: #f87171; --accent-danger-surface: rgba(239, 68, 68, 0.15); --accent-danger-border: rgba(239, 68, 68, 0.38); --accent-info: #60a5fa; --accent-info-hover: #93c5fd; --accent-info-surface: rgba(96, 165, 250, 0.15); --accent-info-border: rgba(96, 165, 250, 0.32); --input-bg: #262626; --input-border: #404040; --input-focus-ring: rgba(var(--brand-rgb), 0.2); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; height: 100%; } body { margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg-secondary); min-height: 100%; color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; font-weight: 400; letter-spacing: -0.011em; overflow-x: hidden; overflow-y: auto; } .container { max-width: 960px; margin: 0 auto; padding: 48px 24px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; } /* Compact layout for short viewports */ @media (max-height: 900px) { .container { padding: 20px 24px; justify-content: flex-start; } .container--login { justify-content: center; } .card { padding: 24px 32px; } .hub-header { margin-bottom: 12px; padding-bottom: 10px; } .header-logo { margin-bottom: 12px; } .welcome-section { margin-bottom: 16px; } .module-grid { gap: 10px; } .module-card { padding: 14px 20px; min-height: auto; } .section-divider { margin: 14px 0 12px; } .footer { padding: 12px 0 4px; } } /* Very short viewports - further compact */ @media (max-height: 600px) { .container { padding: 12px 24px; justify-content: flex-start; } .card { padding: 16px 24px; } .hub-header { margin-bottom: 8px; padding-bottom: 8px; } .header-logo { margin-bottom: 8px; } .welcome-section { margin-bottom: 10px; } .welcome-section h2 { font-size: 22px; } .module-grid { gap: 8px; } .module-card { padding: 10px 16px; min-height: auto; } .module-icon { width: 36px; height: 36px; min-width: 36px; } .module-icon svg { width: 18px; height: 18px; } .section-divider { margin: 10px 0 8px; } .footer { padding: 8px 0 4px; } } @media (max-width: 480px) { .container { padding: 32px 16px; } } /* Ultrawide / very wide viewports - use extra space */ @media (min-aspect-ratio: 21/9) { .container { max-width: 1200px; } .module-grid { grid-template-columns: repeat(2, 1fr); } .module-grid--admin { grid-template-columns: repeat(2, 1fr); max-width: none; } } /* Super ultrawide (32:9 etc) */ @media (min-aspect-ratio: 32/9) { .container { max-width: 1400px; } } .card { background: var(--bg-primary); border-radius: 16px; padding: 40px 44px; border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } /* Corporate header accent - solid brand color */ .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--brand-red); border-radius: 16px 16px 0 0; } @media (max-width: 480px) { .card { padding: 28px 20px; border-radius: 12px; } .card::before { border-radius: 12px 12px 0 0; } } h2 { font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 4px 0; color: var(--text-primary); } h3 { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; margin: 0; color: var(--text-primary); } p { margin: 8px 0; line-height: 1.6; color: var(--text-secondary); } label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; min-width: 180px; } input, textarea, select { font-family: inherit; font-size: 15px; padding: 12px 14px; border-radius: 8px; border: 2px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); transition: all 0.15s ease; outline: none; -webkit-appearance: none; appearance: none; } input:hover, textarea:hover, select:hover { border-color: var(--border-hover); } input:focus, textarea:focus, select:focus { border-color: var(--input-focus-border); box-shadow: 0 0 0 3px var(--input-focus-ring); } input::placeholder, textarea::placeholder { color: var(--text-tertiary); font-weight: 400; } /* Primary Button - Blue */ button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-size: 15px; font-weight: 600; padding: 12px 28px; border-radius: 8px; border: none; background: var(--brand-red); color: var(--brand-font); cursor: pointer; transition: all 0.15s ease; outline: none; letter-spacing: 0.01em; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } button:hover { background: var(--brand-red-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.17); } button:active { transform: translateY(0); box-shadow: none; } button:focus, button:focus-visible { outline: none; box-shadow: none; } .small { font-size: 13px; color: var(--text-secondary); line-height: 1.5; } /* Links - no blue/purple hyperlink styling */ a { color: var(--text-secondary); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--accent-interactive-text); } a:visited { color: var(--text-secondary); } .error { color: var(--accent-danger-text); font-weight: 500; padding: 12px 16px; background: var(--accent-danger-surface); border-radius: 8px; margin: 16px 0; border-left: 3px solid var(--accent-danger); display: flex; align-items: center; gap: 8px; font-size: 14px; } .error::before { content: '!'; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--accent-danger); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 700; flex-shrink: 0; } /* Footer */ .footer { text-align: center; padding: 24px 0 8px; font-size: 12px; color: var(--text-tertiary); letter-spacing: 0.02em; } /* Header Logo */ .header-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .logo-icon { width: 32px; height: 32px; object-fit: contain; } .logo-full { height: 36px; width: auto; object-fit: contain; } .logo-text { font-size: 20px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; } /* =========================================== Module Hub Styles =========================================== */ .hub-card { max-width: 1200px; margin: 0 auto; } .hub-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); } .hub-me { display: flex; align-items: center; gap: 16px; min-width: 0; } .hub-me .me-chip { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; } .hub-me .me-chip .name { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; } .hub-me .me-chip .meta { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; } /* WP-21: "Kijelentkezés" is a