/* ──────────────────────────────────────────────────────────────────── Theme: Noir — kursikembimit.al Dark fintech aesthetic · Glassmorphism · Mint Meadow palette ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { color-scheme: dark; --bg-base: #050A14; --bg-surface: #0C1525; --bg-card: rgba(255,255,255,0.04); --border: rgba(var(--accent-rgb),0.12); --border-soft: rgba(255,255,255,0.06); --accent: #7FDDB8; --accent2: #5FD3B0; --accent-rgb: 127,221,184; --accent2-rgb: 95,211,176; --btn-from: #8FE3A0; --btn-to: #5FD3B0; --success: #00E676; --danger: #FF5370; --warning: #FFB300; --text-primary: #F0F4FF; --text-secondary:#A8B4CC; --text-muted: #6B7A99; --bg-input: rgba(255,255,255,0.04); --bg-field: rgba(0,0,0,0.3); --field-border: rgba(255,255,255,0.16); --bg-inset: rgba(0,0,0,0.2); --row-border: rgba(255,255,255,0.03); --on-accent: #06281A; --focus: #8FE3A0; --focus-ring: rgba(143,227,160,0.22); --logo-stroke: rgba(240,244,255,0.9); --sidebar-w: 300px; --radius: 14px; } /* ── Light mode ──────────────────────────────────────────────── Per-visitor, from the sidebar switch: the layout renders from the noir_mode cookie, so only the palette tokens change here -- the rules below all read them. */ html[data-theme="light"] { color-scheme: light; --bg-base: #F4F7FB; --bg-surface: #FFFFFF; --bg-card: #FFFFFF; --border: rgba(15,23,42,0.12); --border-soft: rgba(15,23,42,0.08); --accent: #1F7A5E; --accent2: #1F8A6A; --accent-rgb: 31,122,94; --accent2-rgb: 31,138,106; --btn-from: #2E9E47; --btn-to: #1F8A6A; --success: #059669; --danger: #E11D48; --warning: #D97706; --text-primary: #0F172A; --text-secondary:#475569; --text-muted: #64748B; --bg-input: #FFFFFF; --bg-field: #F8FAFC; --field-border: rgba(15,23,42,0.18); --bg-inset: #F4F7FB; --row-border: rgba(15,23,42,0.05); --on-accent: #FFFFFF; --focus: #2E9E47; --focus-ring: rgba(46,158,71,0.16); --logo-stroke: rgba(15,23,42,0.35); } html[data-theme="light"] :is( .noir-currency-card, .noir-infoeur, .noir-bank-card, .noir-converter, .noir-bank-hero, .noir-stat-box, .noir-filter-card, .noir-chart-container, .noir-top-rate, .noir-cms-content, .noir-banks-list-card, .card-glass ) { box-shadow: 0 1px 3px rgba(15,23,42,0.06); } html[data-theme="light"] :is(.noir-bank-logo, .noir-infoeur-logo, .noir-bank-hero-logo) { filter: none; opacity: 1; } html[data-theme="light"] .noir-sidebar-overlay { background: rgba(15,23,42,0.4); } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; background: var(--bg-base); color: var(--text-primary); min-height: 100vh; display: flex; overflow-x: hidden; } /* Decimal part of a number raised as superscript -- markup comes from num_sup() (Blade) / noirNumHtml() (JS). Relative offset instead of vertical-align so it never changes the line height. */ .num-dec { /* 9px floor keeps decimals legible in 11–12px table cells and badges */ font-size: max(0.62em, 9px); line-height: 0; position: relative; top: -0.5em; vertical-align: baseline; margin-left: 0.03em; } /* ── Scrollbar ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-surface); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ── Sidebar ───────────────────────────────────────────────── */ .noir-sidebar { width: var(--sidebar-w); min-height: 100vh; height: 100vh; position: fixed; top: 0; left: 0; background: var(--bg-surface); border-right: 1px solid var(--border); padding: 28px 22px; display: flex; flex-direction: column; gap: 28px; overflow-y: auto; z-index: 1000; transition: transform 0.3s ease; } .noir-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .noir-logo-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* No tile behind the mark: a fine 1px outline traced around the glyph itself (stacked drop-shadows dilate its alpha shape by one pixel). */ .noir-logo-icon img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(1px 0 0 var(--logo-stroke)) drop-shadow(-1px 0 0 var(--logo-stroke)) drop-shadow(0 1px 0 var(--logo-stroke)) drop-shadow(0 -1px 0 var(--logo-stroke)); } .noir-logo-text { font-size: 13px; font-weight: 700; color: var(--text-primary); line-height: 1.3; } .noir-logo-text small { display: block; font-size: 10px; color: var(--text-muted); font-weight: 400; } .noir-nav-label { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; color: var(--text-muted); text-transform: uppercase; padding: 0 8px; margin-bottom: 8px; } .noir-nav-list { list-style: none; display: flex; flex-direction: column; gap: 3px; } .noir-nav-list a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--text-muted); text-decoration: none; transition: all 0.2s; border-left: 2px solid transparent; } .noir-nav-list a:hover { background: rgba(var(--accent-rgb),0.08); color: var(--accent); } .noir-nav-list a.active { background: rgba(var(--accent-rgb),0.08); color: var(--accent); border-left-color: var(--accent); } .noir-nav-list a i { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; } /* ── Sidebar Converter ─────────────────────────────────────── */ .noir-converter { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; backdrop-filter: blur(10px); } .noir-converter h6 { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; } .noir-conv-field { margin-bottom: 10px; } .noir-conv-field label { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; display: block; } .noir-conv-field select, .noir-conv-field input { width: 100%; background: var(--bg-field); border: 1px solid var(--field-border); border-radius: 8px; color: var(--text-primary); padding: 8px 10px; font-size: 13px; font-family: 'Inter', sans-serif; outline: none; transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; appearance: none; } .noir-conv-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236B7A99' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; padding-right: 28px; } .noir-conv-field select:focus, .noir-conv-field input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); } .noir-conv-result { background: linear-gradient(135deg, rgba(var(--accent-rgb),0.08), rgba(var(--accent2-rgb),0.08)); border: 1px solid var(--border); border-radius: 8px; padding: 12px; text-align: center; margin-top: 10px; } .noir-conv-result .amount { font-size: 20px; font-weight: 700; color: var(--accent); } .noir-conv-result .label { font-size: 10px; color: var(--text-muted); margin-top: 2px; } .noir-btn-convert { width: 100%; background: var(--btn-bg); border: none; border-radius: 8px; color: var(--on-accent); font-weight: 700; font-size: 12px; padding: 10px; cursor: pointer; margin-top: 8px; font-family: 'Inter', sans-serif; letter-spacing: 0.5px; transition: opacity 0.2s, transform 0.15s; } .noir-btn-convert:hover { opacity: 0.92; transform: translateY(-1px); } .noir-conv-type-toggle { display: flex; gap: 4px; margin-bottom: 10px; } .noir-conv-type-toggle button { flex: 1; padding: 6px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: 'Inter', sans-serif; } .noir-conv-type-toggle button.active { background: var(--btn-bg); color: var(--on-accent); border-color: transparent; } /* ── Light / dark switch (pinned to the sidebar bottom) ────── */ .noir-mode-switch { margin-top: auto; display: flex; gap: 4px; padding: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; } .noir-mode-switch button { flex: 1; display: flex; align-items: center; justify-content: center; height: 34px; border: none; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 18px; cursor: pointer; transition: background 0.2s, color 0.2s; } .noir-mode-switch button:hover { color: var(--text-primary); } .noir-mode-switch button[aria-pressed="true"] { background: var(--btn-bg); color: var(--on-accent); } .noir-mode-switch button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ── Main content area ─────────────────────────────────────── */ .noir-main { flex: 1; /* Without this the flex item can't shrink below the nowrap ticker's intrinsic width, so main grew far past the viewport (hidden by body's overflow-x) and content ran off the right edge. */ min-width: 0; margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; } /* ── Ticker ────────────────────────────────────────────────── */ .noir-ticker { background: var(--bg-surface); border-bottom: 1px solid var(--border); overflow: hidden; padding: 9px 0; white-space: nowrap; flex-shrink: 0; position: sticky; top: 0; z-index: 90; } /* Every copy of the sequence is exactly as wide as the shift (spacing lives inside each group, not in a gap between copies), so the loop is seamless. rate-ticker.js sets --ticker-shift/--ticker-duration for a constant speed. */ .noir-ticker-inner { display: flex; width: max-content; animation: noir-ticker-scroll var(--ticker-duration, 60s) linear infinite; will-change: transform; } .noir-ticker:hover .noir-ticker-inner { animation-play-state: paused; } @keyframes noir-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(var(--ticker-shift, -50%)); } } .noir-ticker-seq { display: flex; align-items: center; flex-shrink: 0; } .noir-ticker-group { display: inline-flex; align-items: center; gap: 18px; flex-shrink: 0; padding: 0 26px; border-right: 1px solid var(--border); } .noir-ticker-provider { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .noir-ticker-provider .noir-logo-chip img { height: 16px; } .noir-ticker-kind { font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; } .noir-ticker-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-muted); } .noir-ticker-item .pair { color: var(--text-primary); font-weight: 600; } .noir-ticker-item .val { color: var(--accent); } .noir-ticker-item .slash { color: var(--text-muted); margin: 0 -2px; } .noir-ticker-item .up { color: var(--success); font-size: 11px; } .noir-ticker-item .dn { color: var(--danger); font-size: 11px; } .noir-ticker-label { font-size: 11px; font-weight: 700; color: var(--text-primary); letter-spacing: .5px; text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { .noir-ticker { overflow-x: auto; } .noir-ticker-inner { animation: none; } .noir-ticker [data-ticker-clone] { display: none; } } /* ── Top bar (topnav) ──────────────────────────────────────── */ .noir-topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px 0; } .noir-topbar-title h1 { font-size: 18px; font-weight: 700; color: var(--text-primary); } .noir-topbar-title p { font-size: 12px; color: var(--text-muted); margin-top: 3px; } .noir-topbar-right { display: flex; align-items: center; gap: 10px; } .noir-live-badge { display: flex; align-items: center; gap: 6px; background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.3); border-radius: 20px; padding: 5px 12px; font-size: 11px; color: var(--success); font-weight: 600; } .noir-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: noir-pulse 1.4s infinite; } @keyframes noir-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} } .noir-lang-toggle { display: flex; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .noir-lang-toggle a { padding: 6px 12px; font-size: 11px; font-weight: 600; text-decoration: none; color: var(--text-muted); transition: all 0.2s; } .noir-lang-toggle a.active { background: var(--btn-bg); color: var(--on-accent); } .noir-lang-toggle a:hover:not(.active) { color: var(--text-primary); } /* ── Content body ──────────────────────────────────────────── */ .noir-content { padding: 20px 32px 40px; flex: 1; } /* ── Section headers ───────────────────────────────────────── */ .noir-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; margin-bottom: 16px; } .noir-section-header h2 { font-size: 13px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .noir-section-dot { width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(var(--accent), var(--accent2)); flex-shrink: 0; } .noir-section-header .updated { font-size: 11px; color: var(--text-muted); } /* ── Top row: BSH official rates (9/12) + InfoEuro (3/12) ────── */ .noir-top-row { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: 20px; margin-bottom: 28px; } .noir-top-row--single { grid-template-columns: minmax(0, 1fr); } .noir-top-col { display: flex; flex-direction: column; min-width: 0; } /* ── BSH Currency Cards: [flag] [pair · rate · name] [change] ─── */ .noir-bsh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .noir-currency-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; backdrop-filter: blur(10px); position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; transition: border-color 0.2s, transform 0.2s; cursor: default; } .noir-currency-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); opacity: 0; transition: opacity 0.2s; } .noir-currency-card:hover { border-color: rgba(var(--accent-rgb),0.3); transform: translateY(-2px); } .noir-currency-card:hover::before { opacity: 1; } .noir-cc-flag { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: rgba(var(--accent-rgb),0.08); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; } .noir-cc-flag img { width: 28px; height: 28px; object-fit: contain; } .noir-cc-body { flex: 1 1 auto; min-width: 0; } /* No flex `gap` here: the number's text node and its decimals are separate flex items, so a gap would split "0" from ".00". */ .noir-cc-change { font-size: 11px; font-weight: 600; padding: 3px 7px; flex-shrink: 0; border-radius: 6px; display: flex; align-items: center; white-space: nowrap; } .noir-cc-change i { margin-right: 3px; } .noir-cc-change.up { background: rgba(0,230,118,0.12); color: var(--success); } .noir-cc-change.dn { background: rgba(255,83,112,0.12); color: var(--danger); } .noir-cc-code { font-size: 11px; font-weight: 500; color: var(--text-muted); } .noir-cc-rate { font-size: 22px; font-weight: 800; color: var(--text-primary); line-height: 1.2; margin: 2px 0 1px; white-space: nowrap; font-variant-numeric: tabular-nums; } .noir-cc-name { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── InfoEuro (right column): one rate per row, stretched to the height of the BSH column next to it ─────────────────────── */ .noir-infoeur { flex: 1; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; backdrop-filter: blur(10px); } .noir-infoeur-list { flex: 1; display: flex; flex-direction: column; gap: 8px; } .noir-infoeur-item { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg-inset); border: 1px solid var(--border-soft); border-radius: 10px; padding: 8px 14px; } .noir-infoeur-item .pair { font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.3px; } .noir-infoeur-item .val { font-size: 17px; font-weight: 700; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; } .noir-infoeur-updated { font-size: 10px; color: var(--text-muted); margin-top: 10px; padding: 0 2px; } .noir-infoeur-logo { height: 20px; filter: brightness(.85) saturate(.9); opacity: 0.8; } /* ── Commercial Banks Grid ─────────────────────────────────── */ .noir-banks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .noir-bank-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; backdrop-filter: blur(10px); transition: border-color 0.2s, transform 0.2s; } .noir-bank-card:hover { border-color: rgba(var(--accent-rgb),0.25); transform: translateY(-2px); } .noir-bank-card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .noir-bank-name { font-size: 13px; font-weight: 600; color: var(--text-primary); } .noir-bank-logo { height: 22px; filter: brightness(.85) saturate(.9); opacity: 0.92; max-width: 80px; object-fit: contain; } .noir-bank-table { width: 100%; border-collapse: collapse; } .noir-bank-table th { font-size: 9px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); padding: 8px 16px; text-align: left; border-bottom: 1px solid var(--border); } .noir-bank-table th:not(:first-child) { text-align: right; } .noir-bank-table td { padding: 9px 16px; font-size: 12px; color: var(--text-primary); border-bottom: 1px solid var(--row-border); } .noir-bank-table td:not(:first-child) { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .noir-bank-table td.buy-val { color: var(--success); } .noir-bank-table td.sell-val { color: var(--danger); } .noir-bank-table tr:last-child td { border-bottom: none; } .noir-bank-table tr:hover td { background: rgba(var(--accent-rgb),0.03); } .noir-currency-badge { display: inline-flex; align-items: center; gap: 8px; } .noir-currency-badge img { width: 18px; height: 18px; border-radius: 50%; object-fit: contain; } .noir-currency-badge span { font-size: 12px; font-weight: 600; } .noir-bank-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px 6px 16px; font-size: 10px; color: var(--text-muted); border-top: 1px solid var(--border-soft); } .noir-website-link { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border); color: var(--accent); font-size: 15px; text-decoration: none; transition: background 0.2s, border-color 0.2s; } .noir-website-link:hover { background: rgba(var(--accent-rgb),0.08); border-color: var(--accent); } /* Monochrome provider marks (BSH logo etc.): white on dark so they read on the dark ground; their original colours in light mode. */ .noir-mono-logo { filter: brightness(0) invert(1); opacity: 0.7; } html[data-theme="light"] .noir-mono-logo { filter: none; opacity: 1; } /* ── Footer ────────────────────────────────────────────────── */ .noir-footer { padding: 20px 32px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-muted); background: var(--bg-surface); } .noir-footer a { color: var(--text-muted); text-decoration: none; } .noir-footer a:hover { color: var(--accent); } .noir-footer-links { display: flex; gap: 20px; } /* ── Mobile Header ─────────────────────────────────────────── */ .noir-mobile-header { display: none; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--bg-surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 200; } .noir-mobile-header .noir-logo-icon { width: 28px; height: 28px; } .noir-mobile-header .noir-logo-icon img { width: 24px; height: 24px; } .noir-hamburger { background: none; border: none; color: var(--text-primary); cursor: pointer; font-size: 22px; padding: 0; } .noir-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 999; } /* ── Alert / Flash messages ─────────────────────────────────── */ .noir-alert { border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; display: flex; align-items: center; gap: 8px; } .noir-alert-success { background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.3); color: var(--success); } .noir-alert-danger { background: rgba(255,83,112,0.1); border: 1px solid rgba(255,83,112,0.3); color: var(--danger); } /* ── Responsive ─────────────────────────────────────────────── */ /* Below ~1280px the 3/12 column gets too narrow for inline BSH cards: stack InfoEuro under the official rates, its rows laid out side by side. */ @media (max-width: 1279px) { .noir-top-row { grid-template-columns: minmax(0, 1fr); } .noir-infoeur-list { flex-direction: row; flex-wrap: wrap; } .noir-infoeur-item { flex: 1 1 160px; } } @media (max-width: 1199px) { .noir-banks-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 991px) { .noir-bsh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .noir-banks-grid { grid-template-columns: 1fr; } } @media (min-width: 768px) and (max-width: 899px) { /* sidebar still visible here, leaving too little room for two inline cards */ .noir-bsh-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { /* The mobile header is an in-flow sibling of .noir-main -- stack them, or body's flex row puts the header beside main as a narrow column. */ body { flex-direction: column; } .noir-sidebar { transform: translateX(-100%); } .noir-sidebar.open { transform: translateX(0); } .noir-sidebar-overlay { display: block; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .noir-sidebar-overlay.open { opacity: 1; pointer-events: all; } .noir-mobile-header { display: flex; } .noir-main { margin-left: 0; } .noir-topbar { padding: 16px 20px 0; flex-wrap: wrap; gap: 12px; } .noir-content { padding: 16px 20px 40px; } .noir-bsh-grid { gap: 10px; } .noir-banks-grid { grid-template-columns: 1fr; } .noir-footer { flex-direction: column; gap: 12px; text-align: center; } } @media (max-width: 575px) { .noir-bsh-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 479px) { .noir-topbar-title h1 { font-size: 15px; } } /* ── Mobile bottom nav (replaces sidebar on mobile) ─────────── */ .noir-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: var(--bg-surface); border-top: 1px solid var(--border); z-index: 1001; align-items: center; justify-content: space-around; } .noir-bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: var(--text-muted); font-size: 10px; font-weight: 500; padding: 6px 12px; border-radius: 8px; transition: color 0.2s; } .noir-bottom-nav a.active { color: var(--accent); } .noir-bottom-nav a i { font-size: 18px; } @media (max-width: 767px) { .noir-bottom-nav { display: flex; } .noir-main { padding-bottom: 60px; } /* keep the mode switch clear of the fixed bottom nav in the drawer */ .noir-sidebar { padding-bottom: 88px; } } /* ── Bank show page ─────────────────────────────────────────── */ .noir-bank-hero { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; backdrop-filter: blur(10px); margin-bottom: 24px; display: flex; align-items: center; gap: 20px; } .noir-bank-hero-logo { height: 50px; filter: brightness(.85) saturate(.9); opacity: 0.95; } .noir-stat-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; backdrop-filter: blur(10px); margin-bottom: 16px; } .noir-stat-box h4 { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .noir-stat-box .val { font-size: 22px; font-weight: 700; color: var(--text-primary); } /* ── History page ────────────────────────────────────────────── */ .noir-filter-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; backdrop-filter: blur(10px); margin-bottom: 20px; } .noir-filter-card label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; display: block; } .noir-filter-card select, .noir-filter-card input[type="text"], .noir-filter-card input[type="date"] { background: var(--bg-field); border: 1px solid var(--field-border); border-radius: 8px; color: var(--text-primary); padding: 9px 12px; font-size: 13px; width: 100%; font-family: 'Inter', sans-serif; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .noir-filter-card select:focus, .noir-filter-card input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); } .noir-btn-primary { background: var(--btn-bg); border: none; border-radius: 8px; color: var(--on-accent); font-weight: 700; font-size: 13px; padding: 10px 20px; cursor: pointer; font-family: 'Inter', sans-serif; transition: opacity 0.2s; } .noir-btn-primary:hover { opacity: 0.9; } .noir-btn-outline { background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted); font-size: 12px; padding: 8px 14px; cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.2s; } .noir-btn-outline:hover { border-color: var(--accent); color: var(--accent); } /* ── Table styles (for history) ─────────────────────────────── */ .noir-table { width: 100%; border-collapse: collapse; } .noir-table th { font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-muted); padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .noir-table td { padding: 11px 16px; font-size: 13px; color: var(--text-primary); border-bottom: 1px solid var(--row-border); } .noir-table tbody tr:hover td { background: rgba(var(--accent-rgb),0.03); } .noir-table tbody tr:last-child td { border-bottom: none; } .noir-table td.buy { color: var(--success); font-weight: 600; } .noir-table td.sell { color: var(--danger); font-weight: 600; } /* ── Pagination ─────────────────────────────────────────────── */ .noir-pagination { display: flex; gap: 6px; flex-wrap: wrap; } .noir-pagination .page-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); font-size: 13px; text-decoration: none; transition: all 0.2s; } .noir-pagination .page-link:hover, .noir-pagination .page-item.active .page-link { background: var(--btn-bg); border-color: transparent; color: var(--on-accent); } .noir-pagination .page-item.disabled .page-link { opacity: 0.4; pointer-events: none; } /* ── Chart container ─────────────────────────────────────────── */ .noir-chart-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; backdrop-filter: blur(10px); margin-bottom: 20px; } /* ── Top rate cards (history page) ─────────────────────────── */ .noir-top-rate { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; backdrop-filter: blur(10px); text-align: center; } .noir-top-rate .curr { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .noir-top-rate .val { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 4px 0; } .noir-top-rate .badge-up { color: var(--success); font-size: 11px; } .noir-top-rate .badge-dn { color: var(--danger); font-size: 11px; } /* ── Contact page ────────────────────────────────────────────── */ .noir-contact-form input, .noir-contact-form textarea, .noir-contact-form select { background: var(--bg-field); border: 1px solid var(--field-border); border-radius: 8px; color: var(--text-primary); padding: 10px 14px; font-size: 13px; width: 100%; margin-bottom: 14px; font-family: 'Inter', sans-serif; outline: none; transition: border-color 0.2s, box-shadow 0.2s; resize: vertical; } .noir-contact-form input:focus, .noir-contact-form textarea:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); } .noir-contact-form label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; display: block; } /* ── CMS page (page.blade.php) ───────────────────────────────── */ .noir-cms-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; backdrop-filter: blur(10px); line-height: 1.8; color: var(--text-primary); } .noir-cms-content h2, .noir-cms-content h3 { color: var(--text-primary); margin: 24px 0 12px; } .noir-cms-content p { color: var(--text-secondary); margin-bottom: 12px; } .noir-cms-content a { color: var(--accent); } .noir-cms-content ul, .noir-cms-content ol { padding-left: 20px; color: var(--text-secondary); margin-bottom: 12px; } /* ── Banks index page ────────────────────────────────────────── */ .noir-banks-list-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: var(--text-primary); transition: border-color 0.2s, transform 0.2s; } .noir-banks-list-card:hover { border-color: rgba(var(--accent-rgb),0.3); transform: translateY(-2px); color: var(--text-primary); } /* ── Breadcrumb ─────────────────────────────────────────────── */ .noir-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-bottom: 20px; } .noir-breadcrumb a { color: var(--text-muted); text-decoration: none; } .noir-breadcrumb a:hover { color: var(--accent); } .noir-breadcrumb .sep { color: var(--border); } /* ── Utility ─────────────────────────────────────────────────── */ .text-accent { color: var(--accent); } .text-muted-nr { color: var(--text-muted); } .card-glass { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); backdrop-filter: blur(10px); } /* ── Button tokens (swap these to re-skin every solid control) ── */ :root { --btn-bg: linear-gradient(135deg, var(--btn-from), var(--btn-to)); --btn-fg: var(--on-accent); } .noir-btn-secondary, .noir-btn-solid { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 8px; font: 600 12px/1 'Inter', sans-serif; cursor: pointer; text-decoration: none; white-space: nowrap; transition: border-color 0.2s, color 0.2s, opacity 0.2s; } .noir-btn-secondary { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); } .noir-btn-secondary:hover { border-color: var(--accent); color: var(--accent); } .noir-btn-solid { background: var(--btn-bg); border: none; color: var(--btn-fg); } .noir-btn-solid:hover { opacity: 0.92; } .noir-btn-secondary i, .noir-btn-solid i { font-size: 16px; } /* Provider logos in full colour on a small light chip -- readable in both modes */ .noir-logo-chip { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; height: 26px; min-width: 26px; padding: 3px 6px; border-radius: 6px; background: #FFFFFF; border: 1px solid var(--border-soft); } .noir-logo-chip img { display: block; height: 18px; max-width: 64px; object-fit: contain; } /* ── History: filters ───────────────────────────────────────── */ .noir-hist-filter { padding: 16px 20px; display: grid; gap: 14px; } .noir-hist-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .noir-hist-row .noir-conv-field { margin: 0; } .noir-hist-period { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; } .noir-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .noir-preset { height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font: 600 12px 'Inter', sans-serif; transition: color 0.2s, border-color 0.2s; } .noir-preset:hover { color: var(--text-primary); border-color: var(--accent); } .noir-preset[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; } .noir-hist-custom { display: inline-flex; align-items: center; gap: 6px; } .noir-hist-custom[hidden] { display: none; } .noir-hist-custom input[type="date"] { height: 32px; width: 132px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--field-border); background: var(--bg-field); color: var(--text-primary); font: 600 12px 'Inter', sans-serif; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .noir-hist-custom input[type="date"]:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); } .noir-hist-custom .sep { color: var(--text-muted); font-size: 12px; } .noir-hist-actions { display: flex; gap: 8px; margin-left: auto; } /* History table: date, bank and currency read left; the numbers stay right-aligned */ .noir-hist-table th:nth-child(-n+3), .noir-hist-table td:nth-child(-n+3) { text-align: left; } /* ── History: chart ─────────────────────────────────────────── */ .noir-chart-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 20px 0; } .noir-chart-legend span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); } .noir-chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .noir-chart-wrap { position: relative; height: 300px; padding: 12px 20px 20px; } /* ── Pagination ─────────────────────────────────────────────── */ .noir-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--border-soft); } .noir-pager-summary { font-size: 12px; color: var(--text-muted); } .noir-pager-summary strong { color: var(--text-primary); font-weight: 600; } .noir-pager-list { display: flex; align-items: center; gap: 4px; list-style: none; } .noir-pager-btn, .noir-pager-page { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; color: var(--text-secondary); text-decoration: none; font: 600 12px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums; transition: background 0.2s, color 0.2s, border-color 0.2s; } .noir-pager-btn { border-color: var(--border); } .noir-pager-btn i { font-size: 14px; } a.noir-pager-btn:hover, a.noir-pager-page:hover { background: rgba(var(--accent-rgb),0.08); border-color: var(--border); color: var(--accent); } .noir-pager-page.is-current { background: var(--btn-bg); color: var(--btn-fg); } .noir-pager-btn.is-disabled { opacity: 0.4; cursor: default; } .noir-pager-ellipsis { display: inline-block; min-width: 24px; text-align: center; color: var(--text-muted); } .noir-pager-compact { display: none; padding: 0 8px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* ── Modal (native ) ────────────────────────────────── */ .noir-modal { margin: auto; width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 24px 60px rgba(0,0,0,0.35); } .noir-modal::backdrop { background: rgba(5,10,20,0.6); backdrop-filter: blur(2px); } html[data-theme="light"] .noir-modal::backdrop { background: rgba(15,23,42,0.35); } .noir-modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border-soft); } .noir-modal-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--accent-rgb),0.1); color: var(--accent); font-size: 20px; } .noir-modal-head h2 { font-size: 15px; font-weight: 700; } .noir-modal-head p { margin-top: 2px; font-size: 12px; color: var(--text-muted); } .noir-modal-close { margin-left: auto; background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; } .noir-modal-close:hover { color: var(--text-primary); } .noir-modal-body { padding: 16px 20px; } .noir-modal-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; font-size: 13px; } .noir-modal-dl dt { color: var(--text-muted); } .noir-modal-dl dd { color: var(--text-primary); font-weight: 600; text-align: right; overflow-wrap: anywhere; } .noir-modal-note { display: flex; gap: 6px; margin-top: 14px; font-size: 11px; color: var(--text-muted); } .noir-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border-soft); } .noir-modal .cf-turnstile { margin-top: 14px; } /* ── FAQ (public page + home section) ───────────────────────── */ .faq-list { display: grid; gap: 8px; } .home-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; transition: border-color 0.2s; } .faq-item[open] { border-color: rgba(var(--accent-rgb),0.3); } .faq-item summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 12px; } .faq-q { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.45; } .faq-chevron { font-size: 18px; color: var(--text-muted); transition: transform 0.2s; } .faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--accent); } .faq-a { padding: 0 18px 16px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.75; } .faq-a p { margin-bottom: 10px; } .faq-a ul, .faq-a ol { padding-left: 20px; margin-bottom: 10px; } .faq-a li { margin-bottom: 4px; } .faq-a a { color: var(--accent); } .faq-a strong { color: var(--text-primary); } .faq-a code { font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--bg-inset); color: var(--text-primary); overflow-wrap: anywhere; } @media (max-width: 991px) { .home-faq-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { .noir-hist-row { grid-template-columns: minmax(0, 1fr); } .noir-hist-actions { margin-left: 0; width: 100%; } .noir-hist-actions > * { flex: 1; } .noir-pager { justify-content: center; } .noir-pager-summary { width: 100%; text-align: center; } .noir-pager-num, .noir-pager-text { display: none; } .noir-pager-compact { display: block; } } /* ── Mobile home: compact official-rate cards (3 per row), InfoEuro on one row, and the live badge + language switch moved into the mobile header ────── */ @media (max-width: 767px) { .noir-bsh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .noir-currency-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "flag change" "body body"; align-items: center; gap: 6px; padding: 10px; } .noir-cc-flag { grid-area: flag; width: 26px; height: 26px; } .noir-cc-flag img { width: 20px; height: 20px; } .noir-cc-change { grid-area: change; justify-self: end; font-size: 9px; padding: 2px 5px; } .noir-cc-change i { margin-right: 1px; } .noir-cc-body { grid-area: body; } .noir-cc-code { font-size: 10px; } .noir-cc-rate { font-size: 17px; margin: 1px 0 0; } .noir-cc-name { display: none; } .noir-infoeur { padding: 8px; } .noir-infoeur-list { flex-direction: row; flex-wrap: nowrap; gap: 6px; } .noir-infoeur-item { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; } .noir-infoeur-item .pair { font-size: 10px; } .noir-infoeur-item .val { font-size: 14px; } .noir-topbar-right { display: none; } .noir-mobile-header { justify-content: flex-start; gap: 12px; } .noir-mobile-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; } .noir-mobile-actions .noir-live-badge { gap: 4px; padding: 3px 8px; font-size: 10px; } .noir-mobile-actions .noir-live-dot { width: 6px; height: 6px; } .noir-mobile-actions .noir-lang-toggle a { padding: 4px 8px; font-size: 10px; } } @media (min-width: 768px) { .noir-mobile-actions { display: none; } } @media (max-width: 374px) { /* very narrow phones: keep just the logo mark so the header actions fit */ .noir-mobile-header > a span:last-child { display: none; } }