/* ══════════════════════════════════════════════ DEPARTURE — shared stylesheet v3 THEME: data-theme="light" | "solari" (default base below) HEADER: data-header="amber-strip" (used with data-theme="solari") To preview: ══════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── BASE / DEFAULT THEME ── */ :root { --amber: #E8B84B; --amber-dim: #C8A030; --amber-lo: #6A5420; --amber-mid: #C8A848; --amber-sub: #A89040; --bg: #080600; --bg-2: #0D0A00; --bg-3: #050400; --rule: #221A00; --rule-hi: #2E2400; --red: #C41E3A; --green-hi: #3DAA6A; --cream: #F0EDE4; --lbl: #C0A050; --cell-bg: var(--bg-3); --board-bg: var(--bg-2); --hover-bg: rgba(232,184,75,.05); --body-bg: var(--bg); --text-main: var(--amber); --text-body: var(--amber-sub); --text-lbl: var(--lbl); --border: var(--rule); --border-hi: var(--rule-hi); --input-bg: var(--bg-2); --input-ph: #3A3000; --footer-bg: var(--bg-3); --flap-tile: #140F00; --flap-seam: #000000; --flap-shadow: rgba(0,0,0,.55); } /* ── SOLARI THEME — white text, black board, amber price column only ── */ [data-theme="solari"] { --amber: #E8B84B; /* price + accents only */ --amber-dim: #C8A030; --amber-lo: #6A5420; --bg: #080600; --bg-2: #0D0B02; --bg-3: #050400; --rule: #1C1C1C; --rule-hi: #282828; --red: #C41E3A; --green-hi: #3DAA6A; --cream: #F0EDE4; --lbl: #606060; --cell-bg: var(--bg-3); --board-bg: var(--bg-2); --hover-bg: rgba(255,255,255,.04); --body-bg: var(--bg); --text-main: #EDEAE0; /* near-white — operator, route, date */ --text-body: #A8A8A0; /* mid-grey — subtitles, descriptions */ --text-lbl: #585850; /* dim grey — column labels */ --border: #1C1C1C; --border-hi: #282828; --input-bg: var(--bg-2); --input-ph: #383838; --footer-bg: var(--bg-3); --flap-tile: #121212; --flap-seam: #000000; --flap-shadow: rgba(0,0,0,.65); } /* ── LIGHT THEME ── */ [data-theme="light"] { --amber: #E8B84B; /* kept for accents */ --amber-dim: #C8A030; --amber-lo: #6A5420; --amber-mid: #3A3420; --amber-sub: #5A5440; --bg: #F5F2EB; --bg-2: #EDEAE2; --bg-3: #E6E2D8; --rule: #CECAB8; --rule-hi: #C0BBB0; --red: #C41E3A; --green-hi: #2A7A48; --cream: #F0EDE4; --lbl: #7A7460; --cell-bg: var(--bg-2); --board-bg: var(--bg-3); --hover-bg: rgba(0,0,0,.03); --body-bg: var(--bg); --text-main: #1A1700; --text-body: #5A5440; --text-lbl: #7A7460; --border: #CECAB8; --border-hi: #C0BBB0; --input-bg: var(--bg-2); --input-ph: #9A9080; --footer-bg: var(--bg); --flap-tile: #FBF9F3; --flap-seam: rgba(20,15,0,.18); --flap-shadow: rgba(0,0,0,.07); } html, body { background: var(--body-bg); color: var(--text-main); font-family: 'Barlow Condensed', sans-serif; min-height: 100vh; overflow-x: hidden; } /* ════════════════════════════════════════════ HEADER — three variants ════════════════════════════════════════════ */ /* DEFAULT: dark header */ .header { display: flex; align-items: center; justify-content: space-between; padding: 22px 32px 20px; border-bottom: 1px solid var(--rule); background: var(--bg); } .wordmark { font-weight: 800; font-size: 24px; letter-spacing: .28em; color: var(--amber); text-transform: uppercase; } .wordmark em { color: var(--red); font-style: normal; } .header-meta { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--lbl); text-transform: uppercase; text-align: right; line-height: 2; } /* LIGHT THEME: cream header */ [data-theme="light"] .header { background: var(--bg); border-bottom-color: var(--rule-hi); } [data-theme="light"] .wordmark { color: var(--text-main); } [data-theme="light"] .header-meta { color: var(--lbl); } /* ── NAV ── */ .nav { padding: 0 32px; display: flex; gap: 24px; align-items: center; background: var(--bg); border-bottom: 1px solid var(--rule); } [data-theme="light"] .nav { background: var(--bg); border-bottom-color: var(--rule-hi); } .nav-link { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .16em; color: var(--lbl); text-transform: uppercase; text-decoration: none; padding: 11px 0; border-bottom: 2px solid transparent; transition: all .15s; } [data-theme="light"] .nav-link { color: var(--lbl); } .nav-link:hover { color: var(--amber); } [data-theme="light"] .nav-link:hover { color: var(--text-main); } .nav-link.active { color: var(--amber); border-bottom-color: var(--red); } [data-theme="light"] .nav-link.active { color: var(--text-main); border-bottom-color: var(--red); } /* ── EYEBROW ── */ .eyebrow { padding: 16px 32px 14px; display: flex; align-items: center; gap: 14px; background: var(--body-bg); } .eyebrow-text { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .18em; color: var(--text-lbl); text-transform: uppercase; white-space: nowrap; } .eyebrow-rule { flex: 1; height: 1px; background: var(--border-hi); } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex-shrink: 0; animation: pulse 2.4s ease-in-out infinite; } .live-dot-inline { display: inline-block; margin-right: 7px; vertical-align: middle; } @keyframes pulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(196,30,58,.5); } 50% { opacity:.6; box-shadow:0 0 0 5px rgba(196,30,58,0); } } /* ════════════════════════════════════════════ BOARD ════════════════════════════════════════════ */ .board-wrap { padding: 0 22px; max-width: 1160px; margin: 0 auto; } .board { border: 1px solid var(--border-hi); border-radius: 2px; overflow: hidden; background: var(--cell-bg); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 24px 70px rgba(0,0,0,.3); } /* 7 columns: icon · time · operator · route · duration · price · remarks */ .board-cols { display: grid; grid-template-columns: 60px 110px 205px minmax(120px, 1fr) 145px 145px 120px; background: var(--board-bg); border-bottom: 1px solid var(--border-hi); } .col-lbl { padding: 11px 14px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .14em; color: var(--text-lbl); text-transform: uppercase; border-right: 1px solid var(--border); } .col-lbl:last-child { border-right: none; } .board-row { display: grid; grid-template-columns: 60px 110px 205px minmax(120px, 1fr) 145px 145px 120px; border-bottom: 1px solid var(--border); min-height: 68px; cursor: pointer; transition: background .12s; } .board-row:last-child { border-bottom: none; } .board-row:hover { background: var(--hover-bg); } .cell { padding: 0 14px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border); overflow: hidden; } .cell:last-child { border-right: none; } .cell-icon { align-items: center; justify-content: center; padding: 0 10px; } .cell-lbl { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .13em; color: var(--text-lbl); text-transform: uppercase; margin-bottom: 5px; line-height: 1; } .cell-val { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; color: var(--text-main); letter-spacing: .03em; text-transform: uppercase; line-height: 1; min-height: 1em; } .cell-val.sm { font-size: 13px; font-weight: 700; } .cell-val.date { font-size: 14px; font-weight: 700; line-height: 1.15; } /* PRICE cell — amber highlight in all themes */ .cell-price { background: rgba(232,184,75,.07); } [data-theme="light"] .cell-price { background: rgba(232,184,75,.15); } .price-from { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .12em; color: var(--text-lbl); text-transform: uppercase; margin-bottom: 3px; } .price-val { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px; color: var(--amber); letter-spacing: .03em; text-transform: uppercase; line-height: 1; } [data-theme="light"] .price-val { color: #8A5C00; } /* REMARKS cell */ .remarks-val { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; font-weight: 500; } .remarks-deal { color: var(--red); } .remarks-new { color: var(--amber); } .remarks-limited { color: #D4820A; } .op-name-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .op-page-link { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .1em; color: var(--text-lbl); text-transform: uppercase; text-decoration: none; margin-top: 3px; display: inline-block; transition: color .15s; } .op-page-link:hover { color: var(--red); } .mode-pill { display: flex; flex-direction: column; align-items: center; gap: 3px; } .mode-glyph { font-size: 26px; line-height: 1; } .mode-tag { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .08em; color: var(--text-lbl); text-transform: uppercase; text-align: center; } .cell-year { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; color: var(--text-lbl); text-transform: uppercase; text-align: left; margin-top: 3px; } /* ── SKELETON ── */ .skeleton-row { display: grid; grid-template-columns: 60px 110px 205px minmax(120px, 1fr) 145px 145px 120px; border-bottom: 1px solid var(--border); min-height: 68px; } .skeleton-cell { padding: 0 14px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border); gap: 7px; } .skeleton-cell:last-child { border-right: none; } .skeleton-bar { height: 11px; border-radius: 2px; background: linear-gradient(90deg, var(--border) 25%, var(--border-hi) 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.6s infinite; } .skeleton-bar.wide{width:80%;} .skeleton-bar.mid{width:55%;} .skeleton-bar.short{width:35%;} @keyframes shimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} } .board-error { padding: 28px 20px; text-align: center; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--red); text-transform: uppercase; } .board-footer { background: var(--cell-bg); border-top: 1px solid var(--border); padding: 10px 16px; display: flex; justify-content: space-between; } .board-ftr-txt { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--text-lbl); letter-spacing: .1em; text-transform: uppercase; } /* ── MOBILE CARDS ── */ .mobile-cards { display: none; padding: 0 20px; flex-direction: column; gap: 10px; max-width: 600px; margin: 0 auto; } .m-card { background: var(--cell-bg); border: 1px solid var(--border-hi); border-radius: 3px; overflow: hidden; cursor: pointer; transition: background .12s; } .m-card:hover { background: var(--board-bg); } .m-card-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px 11px; border-bottom: 1px solid var(--border); } .m-card-mode { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; min-width: 36px; } .m-card-glyph { font-size: 20px; line-height: 1; } .m-card-type { font-family: 'DM Mono', monospace; font-size: 7px; color: var(--text-lbl); letter-spacing: .08em; text-transform: uppercase; } .m-card-operator { flex: 1; min-width: 0; overflow: hidden; font-weight: 800; font-size: 16px; color: var(--text-main); letter-spacing: .03em; text-transform: uppercase; line-height: 1; min-height: 1em; } .badge { flex-shrink: 0; } .badge-new { font-family: 'DM Mono', monospace; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 10px; background: rgba(232,184,75,.15); color: var(--amber); } .m-card-bottom { display: grid; grid-template-columns: 1fr 1fr; } .m-cell { padding: 10px 18px 14px; border-right: 1px solid var(--border); } .m-cell:nth-child(2n) { border-right: none; } .m-cell:nth-child(n+3) { border-top: 1px solid var(--border); } .m-cell-lbl { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .14em; color: var(--text-lbl); text-transform: uppercase; margin-bottom: 5px; } .m-cell-val { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; color: var(--text-main); letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; } .m-cell-val.price-val { font-size: 21px; font-weight: 800; color: var(--amber); } [data-theme="light"] .m-cell-val.price-val { color: #8A5C00; } /* ── RESPONSIVE ── */ @media(max-width: 699px) { .board-wrap { display: none; } .mobile-cards { display: flex; } .header-meta { display: none; } .header { padding: 18px 20px; } .eyebrow { padding: 13px 20px 11px; } .nav { padding: 0 20px; } } /* ════════════════════════════════════════════ PANEL ════════════════════════════════════════════ */ .overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 50; backdrop-filter: blur(3px); } .overlay.open { display: block; } .panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(540px, 100vw); background: var(--bg-2); border-left: 1px solid var(--border-hi); z-index: 51; transform: translateX(100%); transition: transform .32s cubic-bezier(.22,1,.36,1); overflow-y: auto; display: flex; flex-direction: column; } .panel.open { transform: translateX(0); } @media(max-width: 699px) { .panel { top: auto; right: 0; bottom: 0; left: 0; width: 100%; border-left: none; border-top: 1px solid var(--border-hi); border-radius: 10px 10px 0 0; transform: translateY(100%); max-height: 92vh; } .panel.open { transform: translateY(0); } } .panel-handle { display: none; width: 40px; height: 4px; border-radius: 2px; background: var(--border-hi); margin: 12px auto 0; } @media(max-width: 699px) { .panel-handle { display: block; } } .panel-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 26px 18px; border-bottom: 1px solid var(--border-hi); position: sticky; top: 0; background: var(--bg-2); z-index: 2; } .panel-mode { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .18em; color: var(--text-lbl); text-transform: uppercase; margin-bottom: 5px; } .panel-operator { font-weight: 800; font-size: 28px; color: var(--text-main); letter-spacing: .04em; text-transform: uppercase; line-height: 1; min-height: 1em; } .panel-close { background: none; border: 1px solid var(--border-hi); border-radius: 2px; color: var(--text-lbl); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .1em; padding: 7px 12px; cursor: pointer; flex-shrink: 0; margin-left: 16px; margin-top: 2px; transition: all .15s; } /* HERO */ .panel-hero { width: 100%; aspect-ratio: 16/7; overflow: hidden; position: relative; background: #0A0800; flex-shrink: 0; } .panel-hero-img { width: 100%; height: 100%; object-fit: cover; display: none; opacity: .92; } .panel-hero-img.active { display: block; } .panel-hero-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #0D0A00 0%, #181200 50%, #0A0800 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: absolute; inset: 0; } .panel-hero-placeholder.hidden { display: none; } .panel-hero-placeholder::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(232,184,75,.015) 20px, rgba(232,184,75,.015) 21px); } .panel-hero-icon { font-size: 36px; opacity: .2; position: relative; } .panel-hero-caption { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .14em; color: #8A7030; text-transform: uppercase; text-align: center; line-height: 1.9; position: relative; } .panel-hero-credit { position: absolute; bottom: 10px; right: 14px; font-family: 'DM Mono', monospace; font-size: 7px; letter-spacing: .1em; color: rgba(232,184,75,.4); text-transform: uppercase; z-index: 1; } .panel-body { padding: 0 26px 40px; flex: 1; } .panel-route-block { padding: 18px 0 16px; border-bottom: 1px solid var(--border-hi); } .panel-route { font-weight: 800; font-size: 21px; color: var(--text-main); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 5px; min-height: 1em; } .panel-subtitle { font-family: 'Barlow', sans-serif; font-weight: 300; font-style: italic; font-size: 14px; color: var(--text-body); line-height: 1.6; } .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-hi); border: 1px solid var(--border-hi); border-radius: 2px; margin: 18px 0 0; overflow: hidden; } .panel-grid-cell { background: var(--cell-bg); padding: 14px 16px; } .panel-grid-lbl { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .14em; color: var(--text-lbl); text-transform: uppercase; margin-bottom: 6px; } .panel-grid-val { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; color: var(--text-main); letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; } .panel-grid-val.big { font-size: 26px; font-weight: 800; color: var(--amber); } [data-theme="light"] .panel-grid-val.big { color: #8A5C00; } .panel-route-map { margin: 18px 0 0; border: 1px solid var(--border-hi); border-radius: 2px; background: var(--cell-bg); padding: 16px 20px; overflow: hidden; } .panel-route-map svg { width: 100%; display: block; } .route-map-lbl { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .2em; color: var(--text-lbl); text-transform: uppercase; margin-bottom: 12px; } .panel-sec-lbl { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .2em; color: var(--text-lbl); text-transform: uppercase; margin: 22px 0 12px; display: flex; align-items: center; gap: 10px; } .panel-sec-lbl::after { content: ''; flex: 1; height: 1px; background: var(--border-hi); } .panel-desc { font-family: 'Barlow', sans-serif; font-weight: 300; font-size: 15px; color: var(--text-body); line-height: 1.78; } .panel-notice { background: var(--cell-bg); border: 1px solid var(--border-hi); border-radius: 2px; padding: 14px 16px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .07em; color: var(--text-lbl); line-height: 1.75; margin: 22px 0; } .panel-cta { display: block; width: 100%; background: var(--red); border: none; border-radius: 2px; padding: 15px; color: var(--cream); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .15s; text-align: center; text-decoration: none; margin-bottom: 10px; } .panel-cta:hover { background: #A0182E; } .panel-op-link, .panel-secondary { display: block; width: 100%; background: transparent; border: 1px solid var(--border-hi); border-radius: 2px; padding: 12px; color: var(--text-lbl); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: all .15s; text-align: center; } .panel-op-link { text-decoration: none; margin-bottom: 10px; } .panel-close:hover, .panel-op-link:hover, .panel-secondary:hover { border-color: var(--amber-lo); color: var(--text-main); } /* ── LOWER ── */ .lower { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--border-hi); border-top: 1px solid var(--border-hi); } @media(max-width: 699px) { .lower { grid-template-columns: 1fr; margin-top: 16px; } } .info-block { background: var(--body-bg); padding: 24px 28px 28px; } @media(max-width: 699px) { .info-block { padding: 18px 20px 22px; } } .info-lbl { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .2em; color: var(--text-lbl); text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .info-lbl::after { content: ''; flex: 1; height: 1px; background: var(--border-hi); } .info-txt { font-family: 'Barlow', sans-serif; font-weight: 300; font-size: 15px; color: var(--text-body); line-height: 1.72; } .email-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; } .email-in { background: var(--input-bg); border: 1px solid var(--border-hi); border-radius: 2px; padding: 10px 13px; color: var(--text-main); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .06em; outline: none; transition: border-color .15s; } .email-in::placeholder { color: var(--input-ph); } .email-in:focus { border-color: var(--amber-lo); } .email-btn { background: var(--red); border: none; border-radius: 2px; padding: 10px; color: var(--cream); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .15s; } .email-btn:hover { background: #A0182E; } /* ── FOOTER ── */ .site-footer { padding: 16px 32px; border-top: 1px solid var(--border); background: var(--footer-bg); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; } .ftr-txt { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--lbl); letter-spacing: .1em; text-transform: uppercase; } [data-theme="light"] .ftr-txt { color: var(--lbl); } /* ════════════════════════════════════════════ SOLARI THEME OVERRIDES Two colours. White text. Amber price. Done. WHITE → all primary data (full opacity) WHITE → labels / secondary (28% opacity) AMBER → price column only (solid bg, dark text) RED → live dot only ════════════════════════════════════════════ */ /* Header */ [data-theme="solari"] .header { background:#060500; border-bottom-color:#181818; } [data-theme="solari"] .wordmark { color:var(--amber); font-size:26px; } [data-theme="solari"] .header-meta { color:rgba(255,255,255,.6); font-size:10px; } /* Nav */ [data-theme="solari"] .nav { background:#060500; border-bottom-color:#181818; } [data-theme="solari"] .nav-link { color:rgba(255,255,255,.32); } [data-theme="solari"] .nav-link:hover { color:rgba(255,255,255,.8); } [data-theme="solari"] .nav-link.active { color:#fff; border-bottom-color:var(--amber); } /* Eyebrow */ [data-theme="solari"] .eyebrow-text { color:rgba(255,255,255,.6); font-size:10px; } [data-theme="solari"] .eyebrow-rule { background:#1E1E1E; } /* Board shell */ [data-theme="solari"] .board { border-color:#1E1E1E; box-shadow:0 0 0 1px rgba(0,0,0,1),0 32px 80px rgba(0,0,0,.98); } [data-theme="solari"] .board-cols { background:#0A0900; } [data-theme="solari"] .col-lbl { color:rgba(255,255,255,.7); font-size:12px; font-weight:600; letter-spacing:.16em; border-right-color:#1A1A1A; } /* SOLARI + AMBER-STRIP: solid amber header band over the board columns */ [data-theme="solari"][data-header="amber-strip"] .board-cols { background:var(--amber); } [data-theme="solari"][data-header="amber-strip"] .col-lbl { color:#3A2800; font-size:12px; font-weight:600; letter-spacing:.16em; border-right-color:#C8900A; } [data-theme="solari"] .board-row { border-bottom-color:#141414; min-height:68px; } [data-theme="solari"] .board-row:hover { background:rgba(255,255,255,.03); } [data-theme="solari"] .cell { border-right-color:#141414; } /* Cell text — white, period */ [data-theme="solari"] .cell-lbl { color:rgba(255,255,255,.65); font-size:9px; } [data-theme="solari"] .cell-val { color:#fff; } [data-theme="solari"] .cell-val.sm { color:#fff; } [data-theme="solari"] .cell-val.date { color:#fff; } [data-theme="solari"] .mode-glyph { opacity:.9; filter: grayscale(1) brightness(1.4); } [data-theme="solari"] .mode-tag { color:rgba(255,255,255,.65); } [data-theme="solari"] .cell-year { color:rgba(255,255,255,.5); } [data-theme="solari"] .op-page-link { color:rgba(255,255,255,.5); } [data-theme="solari"] .op-page-link:hover { color:rgba(255,255,255,.7); } /* Price column — solid amber background, near-black text */ [data-theme="solari"] .cell-price { background: transparent; } [data-theme="solari"] .price-from { color:rgba(232,184,75,.5); font-size:8px; } [data-theme="solari"] .price-val { color:var(--amber); } /* Remarks — red for DEAL, everything else white-dim. No other colours. */ [data-theme="solari"] .remarks-val { color:rgba(255,255,255,.65); font-size:10px; } [data-theme="solari"] .remarks-deal { color:var(--red); font-size:10px; font-weight:600; } [data-theme="solari"] .remarks-new, [data-theme="solari"] .remarks-limited { color:rgba(255,255,255,.65); } /* Board footer */ [data-theme="solari"] .board-footer { background:#060500; border-top-color:#141414; } [data-theme="solari"] .board-ftr-txt { color:rgba(255,255,255,.4); } /* Panel */ [data-theme="solari"] .panel { background:#080700; border-left-color:#1E1E1E; } [data-theme="solari"] .panel-header { background:#080700; border-bottom-color:#1E1E1E; } [data-theme="solari"] .panel-mode { color:rgba(255,255,255,.6); } [data-theme="solari"] .panel-operator { color:#fff; } [data-theme="solari"] .panel-close { color:rgba(255,255,255,.5); border-color:#1E1E1E; } [data-theme="solari"] .panel-close:hover, [data-theme="solari"] .panel-op-link:hover, [data-theme="solari"] .panel-secondary:hover { color:#fff; border-color:#3A3A3A; } [data-theme="solari"] .panel-route { color:#fff; } [data-theme="solari"] .panel-subtitle { color:rgba(255,255,255,.45); } [data-theme="solari"] .panel-route-block { border-bottom-color:#1E1E1E; } [data-theme="solari"] .panel-grid { background:#111; border-color:#1E1E1E; } [data-theme="solari"] .panel-grid-cell { background:#080700; } [data-theme="solari"] .panel-grid-lbl { color:rgba(255,255,255,.65); } [data-theme="solari"] .panel-grid-val { color:#fff; } [data-theme="solari"] .panel-grid-val.big { color:var(--amber); font-size:28px; } [data-theme="solari"] .panel-route-map { background:#060500; border-color:#1E1E1E; } [data-theme="solari"] .route-map-lbl { color:rgba(255,255,255,.65); } [data-theme="solari"] .panel-sec-lbl { color:rgba(255,255,255,.65); } [data-theme="solari"] .panel-sec-lbl::after { background:#1E1E1E; } [data-theme="solari"] .panel-desc { color:rgba(255,255,255,.55); } [data-theme="solari"] .panel-notice { color:rgba(255,255,255,.45); background:#060500; border-color:#1E1E1E; } [data-theme="solari"] .panel-op-link { color:rgba(255,255,255,.5); border-color:#1E1E1E; } [data-theme="solari"] .panel-secondary { color:rgba(255,255,255,.5); border-color:#1E1E1E; } /* Lower + Footer */ [data-theme="solari"] .lower { background:#1A1A1A; } [data-theme="solari"] .info-block { background:#080700; } [data-theme="solari"] .info-lbl { color:rgba(255,255,255,.65); } [data-theme="solari"] .info-lbl::after { background:#1E1E1E; } [data-theme="solari"] .info-txt { color:rgba(255,255,255,.5); } [data-theme="solari"] .email-in { color:#fff; background:#0D0C02; border-color:#1E1E1E; } [data-theme="solari"] .email-in::placeholder { color:rgba(255,255,255,.35); } [data-theme="solari"] .site-footer { background:#060500; border-top-color:#141414; } [data-theme="solari"] .ftr-txt { color:rgba(255,255,255,.4); } /* Mobile cards */ [data-theme="solari"] .m-card { background:#080700; border-color:#1E1E1E; } [data-theme="solari"] .m-card:hover { background:#0D0C02; } [data-theme="solari"] .m-card-top { border-bottom-color:#1A1A1A; } [data-theme="solari"] .m-card-operator { color:#fff; } [data-theme="solari"] .m-cell { border-color:#1A1A1A; } [data-theme="solari"] .m-cell-lbl { color:rgba(255,255,255,.65); } [data-theme="solari"] .m-cell-val { color:#fff; } [data-theme="solari"] .m-cell-val.price-val { color:var(--amber); background:transparent; } /* ════════════════════════════════════════════ FLAP TILES — per-character split-flap cells ════════════════════════════════════════════ */ .flap-word { display: flex; flex-wrap: wrap; align-content: center; gap: .45em; letter-spacing: 0; } .flap-group { display: inline-flex; flex-wrap: nowrap; flex-shrink: 0; gap: 2px; } .flap-gap { flex-shrink: 0; width: 0; } .flap-char { display: inline-flex; align-items: center; justify-content: center; position: relative; box-sizing: content-box; min-width: .74em; height: 1.3em; padding: 0 .07em; background: var(--flap-tile); border-radius: 1px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -3px 4px var(--flap-shadow); font-family: 'DM Mono', monospace; font-weight: 500; font-size: 1em; letter-spacing: 0; color: inherit; } .flap-char::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--flap-seam); opacity: .85; transform: translateY(-.5px); } /* ── FLAP ── */ @keyframes flapFlicker { 0% { opacity: .5; transform: scaleY(.82) translateY(-2px); } 60% { opacity: .9; transform: scaleY(.97); } 100% { opacity: 1; transform: scaleY(1) translateY(0); } } .flapping { animation: flapFlicker .065s ease forwards; }