/* ============================================================ XLII360 — Brand Design System ============================================================ */ @font-face { font-family: 'Cormorant Garamond'; font-weight: 300; font-style: normal; font-display: swap; src: url('/assets/fonts/CormorantGaramond-Light.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-weight: 200; font-style: normal; font-display: swap; src: url('/assets/fonts/BarlowCondensed-ExtraLight.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-weight: 300; font-style: normal; font-display: swap; src: url('/assets/fonts/BarlowCondensed-Light.woff2') format('woff2'); } @font-face { font-family: 'Barlow Condensed'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/BarlowCondensed-Regular.woff2') format('woff2'); } :root { /* Brand colours */ --c1: #003366; /* Prussian Blue — primary */ --c2: #2C2824; /* Warm Charcoal — secondary */ --white: #FFFFFF; /* Chart palette */ --c3: #5B8DB8; --c4: #B8863C; --c5: #4A6E8A; --c6: #9A9080; --c7: #0D4D7A; --c8: #2E8B6E; --c9: #8BAABF; --c10: #8AAF8A; --c11: #C4A97A; --c12: #C8C4BC; /* Site tones — dark (default) */ --bg-deep: #060D1A; --bg-dark: #0A1628; --bg-mid: #102038; --bg-surface: #152840; --border: rgba(0, 51, 102, 0.2); --border-dim: rgba(255,255,255,0.06); /* Typography */ --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Barlow Condensed', sans-serif; } /* Light mode tokens — activated only when [data-theme="light"] is set on . Only the intranet dashboard sets this attribute; other pages stay dark. */ [data-theme="light"] { --bg-deep: #FFFFFF; --bg-dark: #FAFAF8; --bg-mid: #F6F5F3; --bg-surface: #FFFFFF; --border: rgba(0, 51, 102, 0.18); --border-dim: rgba(44, 40, 36, 0.10); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-sans); font-weight: 300; background: var(--bg-deep); color: var(--white); min-height: 100vh; } [data-theme="light"] body { color: var(--c2); } /* ── LOGO COMPONENT ── */ .xlii-logo { display: flex; flex-direction: column; gap: 0; } .xlii-logo-mark { display: flex; align-items: baseline; gap: 0; line-height: 1; } .xlii-logo-xlii { font-family: var(--font-serif); font-weight: 300; color: var(--c2); letter-spacing: -0.02em; } .xlii-logo-rule { width: 1px; background: var(--c1); align-self: stretch; margin: 0 0.18em; flex-shrink: 0; } .xlii-logo-360 { font-family: var(--font-sans); font-weight: 200; color: var(--c1); letter-spacing: 0; } .xlii-logo-subtitle { font-family: var(--font-sans); font-weight: 300; color: rgba(255,255,255,0.55); letter-spacing: 0.35em; text-transform: uppercase; margin-top: 0.4em; } [data-theme="light"] .xlii-logo-subtitle { color: rgba(44, 40, 36, 0.55); } /* On light backgrounds */ .xlii-logo.light .xlii-logo-xlii { color: var(--c2); } .xlii-logo.light .xlii-logo-subtitle { color: #b0a898; } /* ── NAV ── */ .xlii-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 24px 48px; background: rgba(4, 9, 15, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-dim); } [data-theme="light"] .xlii-nav { background: rgba(255,255,255,0.85); } .xlii-nav-logo .xlii-logo-xlii { font-size: 28px; color: #d8d4cc; } .xlii-nav-logo .xlii-logo-360 { font-size: 22px; } .xlii-nav-logo .xlii-logo-rule { margin: 0.1em 0.15em; } [data-theme="light"] .xlii-nav-logo .xlii-logo-xlii { color: var(--c2); } .xlii-nav-links { display: flex; align-items: center; gap: 36px; list-style: none; } .xlii-nav-links a { font-family: var(--font-sans); font-size: 11px; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.3s; } .xlii-nav-links a:hover { color: var(--c1); } .xlii-nav-links a.active { color: rgba(255,255,255,0.9); } [data-theme="light"] .xlii-nav-links a { color: rgba(44, 40, 36, 0.6); } [data-theme="light"] .xlii-nav-links a:hover { color: var(--c1); } [data-theme="light"] .xlii-nav-links a.active { color: var(--c2); } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-weight: 300; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; padding: 12px 28px; border: none; cursor: pointer; transition: all 0.3s; } .btn-primary { background: var(--c1); color: #fff; } .btn-primary:hover { background: #004488; } .btn-ghost { background: transparent; color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.25); } .btn-ghost:hover { color: rgba(255,255,255,0.95); border-color: rgba(255,255,255,0.45); } [data-theme="light"] .btn-ghost { color: rgba(44, 40, 36, 0.7); border: 1px solid rgba(44, 40, 36, 0.25); } [data-theme="light"] .btn-ghost:hover { color: var(--c2); border-color: rgba(44, 40, 36, 0.5); } /* ── SECTION LABEL ── */ .section-label { font-size: 9px; letter-spacing: 5px; text-transform: uppercase; color: rgba(91, 141, 184, 0.85); font-weight: 300; } [data-theme="light"] .section-label { color: rgba(0, 51, 102, 0.7); } /* ── CARDS ── */ .xlii-card { background: var(--bg-surface); border: 1px solid var(--border-dim); padding: 28px 32px; transition: border-color 0.3s, transform 0.3s; } .xlii-card:hover { border-color: rgba(0, 51, 102, 0.4); transform: translateY(-2px); } [data-theme="light"] .xlii-card { background: var(--bg-mid); } /* ── ANIMATIONS ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .fade-up { animation: fadeUp 1s ease forwards; } .fade-in { animation: fadeIn 1s ease forwards; } /* Staggered delays */ .delay-1 { animation-delay: 0.3s; opacity: 0; } .delay-2 { animation-delay: 0.7s; opacity: 0; } .delay-3 { animation-delay: 1.1s; opacity: 0; } .delay-4 { animation-delay: 1.5s; opacity: 0; } .delay-5 { animation-delay: 1.9s; opacity: 0; } /* ============================================================ NPB — Neue Privat Bank brand overlay ------------------------------------------------------------ Activated only on the 42turicum.com mirror, via data-brand="npb" on (set by the early hostname script in each shared-brand page, which also sets data-theme="light" — NPB is light-only). Appended LAST so it wins specificity ties against the XLII360 :root and [data-theme="light"] blocks above. ============================================================ */ @font-face { font-family: 'Corporate S'; font-weight: 400; font-style: normal; font-display: swap; src: url('/assets/fonts/NPB/CorporateS-Regular.otf') format('opentype'); } @font-face { font-family: 'Corporate S'; font-weight: 700; font-style: normal; font-display: swap; src: url('/assets/fonts/NPB/CorporateS-Bold.otf') format('opentype'); } @font-face { font-family: 'Corporate S'; font-weight: 400; font-style: italic; font-display: swap; src: url('/assets/fonts/NPB/CorporateS-Italic.otf') format('opentype'); } @font-face { font-family: 'Corporate S'; font-weight: 700; font-style: italic; font-display: swap; src: url('/assets/fonts/NPB/CorporateS-BoldItalic.otf') format('opentype'); } [data-brand="npb"] { /* NPB palette (Brand Kit v2.0) */ --c1: #d0043c; /* NPB red — primary accent */ --c2: #605548; /* body text brown-grey */ --c3: #d0043c; /* accent echoes red */ /* Warm off-white surfaces (override the light-theme whites above) */ --bg-deep: #fafaf8; --bg-dark: #fafaf8; --bg-mid: #f4f3f0; --bg-surface: #ffffff; --border: #d4cfca; --border-dim: rgba(96, 85, 72, 0.12); /* Corporate S replaces Barlow/Cormorant across the board */ --font-serif: 'Corporate S', Arial, 'Helvetica Neue', sans-serif; --font-sans: 'Corporate S', Arial, 'Helvetica Neue', sans-serif; } /* Base text/background on NPB (defensive — independent of data-theme). */ [data-brand="npb"] body { color: var(--c2); background: var(--bg-deep); } /* Accents that referenced the XLII360 blue */ [data-brand="npb"] .section-label { color: var(--c1); } [data-brand="npb"] .xlii-nav-links a:hover { color: var(--c1); } [data-brand="npb"] .xlii-card:hover { border-color: rgba(208, 4, 60, 0.35); } /* ── Logo swap ── Pages add beside the XLII wordmark. Default (XLII360) hides the NPB mark; NPB hides the wordmark glyphs and shows the mark. */ .npb-logo { display: none; } [data-brand="npb"] .xlii-logo-xlii, [data-brand="npb"] .xlii-logo-360, [data-brand="npb"] .xlii-logo-rule { display: none; } [data-brand="npb"] .npb-logo { display: inline-block; }