/* ══════════════════════════════════════════════ DEPARTURE — shared stylesheet v3 THEME: data-theme="solari" (default base below) HEADER: data-header="amber-strip" (used with data-theme="solari") To preview: ══════════════════════════════════════════════ */ /* ── VARIABLES & THEMES ── */ :root { --amber: #E8B84B; --amber-dim: #C8A030; --amber-lo: #6A5420; --amber-sub: #A89040; --bg: #080600; --bg-2: #0D0A00; --bg-3: #050400; --rule: #1E1E1E; --rule-hi: #2A2A2A; --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); } /* 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: #111111; --bg-2: #181818; --bg-3: #0D0D0D; --rule: #1E1E1E; --rule-hi: #2A2A2A; --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: #080600; --flap-shadow: rgba(0,0,0,.65); } /* ── BASE & RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--body-bg); color: var(--text-main); font-family: 'Barlow Condensed', sans-serif; min-height: 100vh; overflow-x: hidden; } /* ── HEADER & NAV ── */ .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; } .nav { padding: 0 32px; display: flex; gap: 24px; align-items: center; background: var(--bg); border-bottom: 1px solid var(--rule); } .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; } .nav-link:hover { color: var(--amber); } .nav-link.active { color: var(--amber); 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-x: auto; overflow-y: hidden; background: var(--cell-bg); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 24px 70px rgba(0,0,0,.3); min-width: 960px; } /* 7 columns: icon · time · operator · route · duration · price · remarks */ .board-cols { display: grid; grid-template-columns: 60px 110px 205px minmax(170px, 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(170px, 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-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); } .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; } /* REMARKS cell */ .remarks-val { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; font-weight: 700; text-align: left; } .remarks-deal { color: var(--red); } .remarks-new { color: var(--amber); } .remarks-limited { color: #D4820A; } @keyframes remarksFadeIn { from { opacity: 0; } to { opacity: 1; } } .remarks-val { animation: remarksFadeIn 0.5s ease forwards; opacity: 0; } @media (prefers-reduced-motion: reduce) { .remarks-val { animation: none; opacity: 1; } } .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; } .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; } /* ── SKELETON ── */ .skeleton-row { display: grid; grid-template-columns: 60px 110px 205px minmax(170px, 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;} } /* ── 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; } .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); } @media(max-width: 1000px) { .board-wrap { display: none; } .mobile-cards { display: flex; } .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); } .panel-price-local { font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .02em; color: var(--text-body); line-height: 1.3; margin-top: 4px; } .panel-route-map { margin: 18px 0 0; border: 1px solid var(--border-hi); border-radius: 2px; overflow: hidden; position: relative; } #pRouteMap { width: 100%; height: 180px; border-radius: 2px; overflow: hidden; background: var(--bg-3); } #pRouteMap .maplibregl-canvas { outline: none; } #pRouteMap .maplibregl-ctrl-bottom-right { right: 0; bottom: 0; } #pRouteMap .maplibregl-ctrl-logo { display: none !important; } #pRouteMap .maplibregl-ctrl-attrib { background: rgba(5,4,0,.55); border-radius: 0; padding: 2px 6px; margin: 0; } #pRouteMap .maplibregl-ctrl-attrib, #pRouteMap .maplibregl-ctrl-attrib a { font-family: 'DM Mono', monospace; font-size: 7px; letter-spacing: .06em; color: var(--text-lbl); text-transform: uppercase; } #pRouteMap .maplibregl-ctrl-attrib-button { display: none; } .route-map-lbl { position: absolute; top: 10px; left: 14px; z-index: 2; font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .2em; color: rgba(255,255,255,.55); text-transform: uppercase; background: rgba(5,4,0,.55); padding: 3px 8px; border-radius: 2px; } .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 & FOOTER ── */ .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; } .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; } /* ── OPERATOR PAGES ── */ .hero { position: relative; width: 100%; aspect-ratio: 21/8; background: #0A0800; overflow: hidden; } .hero-img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(8,6,0,.5) 70%, rgba(8,6,0,.92) 100%); } .hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 32px; } .hero-eyebrow { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .22em; color: var(--text-lbl); text-transform: uppercase; margin-bottom: 8px; } .hero-name { font-weight: 800; font-size: clamp(36px, 6vw, 72px); color: var(--amber); letter-spacing: .04em; text-transform: uppercase; line-height: .95; margin-bottom: 10px; min-height: 1em; display: block; } .hero-desc { font-family: 'Barlow', sans-serif; font-weight: 300; font-style: italic; font-size: 14px; color: var(--text-body); max-width: 520px; line-height: 1.5; } .hero-credit { position: absolute; bottom: 10px; right: 16px; font-family: 'DM Mono', monospace; font-size: 7px; letter-spacing: .1em; color: var(--text-lbl); text-transform: uppercase; } .facts-strip { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--border-hi); background: var(--board-bg); } @media(max-width:799px){ .facts-strip { grid-template-columns: repeat(3,1fr); } } @media(max-width:499px){ .facts-strip { grid-template-columns: repeat(2,1fr); } } .fact { padding: 14px 18px; border-right: 1px solid var(--border); } .fact:last-child { border-right: none; } .fact-lbl { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--text-lbl); text-transform: uppercase; margin-bottom: 5px; } .fact-val { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 17px; color: var(--text-main); letter-spacing: .03em; text-transform: uppercase; line-height: 1.2; min-height: 1em; display: block; } .fact-val.good { color: var(--green-hi); } .page-body { max-width: 1100px; margin: 0 auto; padding: 0 32px; } @media(max-width:599px){ .page-body { padding: 0 18px; } } .op-gap { height: 32px; } @media(max-width:699px){ .op-gap { height: 20px; } } .op-sec-lbl { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .22em; color: var(--text-lbl); text-transform: uppercase; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .op-sec-lbl::after { content: ''; flex: 1; height: 1px; background: var(--border-hi); } .editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-hi); border: 1px solid var(--border-hi); border-radius: 2px; margin: 28px 0; overflow: hidden; } @media(max-width:699px){ .editorial { grid-template-columns: 1fr; } } .ed-block { background: var(--cell-bg); padding: 24px 26px; } .ed-block-lbl { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .22em; color: var(--text-lbl); text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; } .ed-block-lbl::after { content: ''; flex: 1; height: 1px; background: var(--border-hi); } .ed-block-head { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; color: var(--amber); letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; margin-bottom: 10px; } .ed-block-txt { font-family: 'Barlow', sans-serif; font-weight: 300; font-size: 15px; color: var(--text-body); line-height: 1.78; } .booking-steps { border: 1px solid var(--border-hi); border-radius: 2px; overflow: hidden; background: var(--cell-bg); } .booking-step { display: flex; border-bottom: 1px solid var(--border); } .booking-step:last-child { border-bottom: none; } .step-num { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .22em; color: var(--text-lbl); text-transform: uppercase; display: flex; align-items: flex-start; gap: 10px; padding: 20px 18px; border-right: 1px solid var(--border); min-width: 52px; } .step-body { padding: 16px 20px; } .step-head { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; color: var(--amber); letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; margin-bottom: 10px; } .step-txt { font-family: 'Barlow', sans-serif; font-weight: 300; font-size: 15px; color: var(--text-body); line-height: 1.78; } .related-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--border-hi); border: 1px solid var(--border-hi); border-radius: 2px; overflow: hidden; width: 100%; } @media(max-width:699px){ .related-grid { grid-template-columns: 1fr; } } .related-card { background: var(--cell-bg); padding: 18px 20px; transition: background .12s; text-decoration: none; display: block; text-align: center; } .related-card:hover { background: var(--board-bg); } .related-glyph { font-size: 28px; margin-bottom: 10px; line-height: 1; } .related-lbl { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .1em; color: var(--text-lbl); text-transform: uppercase; margin-bottom: 5px; } .related-name { font-weight: 700; font-size: 20px; color: var(--text-main); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 5px; line-height: 1.1; } .related-route { font-family: 'Barlow', sans-serif; font-weight: 300; font-style: italic; font-size: 13px; color: var(--text-body); } .op-board-cols { display: grid; grid-template-columns: 56px 120px 1fr 130px 140px 130px; background: var(--board-bg); border-bottom: 1px solid var(--border-hi); } .op-board-row { display: grid; grid-template-columns: 56px 120px 1fr 130px 140px 130px; border-bottom: 1px solid var(--border); min-height: 68px; cursor: pointer; transition: background .12s; } .op-board-row:last-child { border-bottom: none; } .op-board-row:hover { background: var(--hover-bg); } .op-skeleton-row { display: grid; grid-template-columns: 56px 120px 1fr 130px 140px 130px; border-bottom: 1px solid var(--border); min-height: 68px; } /* ── OPERATORS INDEX ── */ .ops-header { padding: 40px 32px 28px; background: var(--body-bg); } .ops-eyebrow { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .18em; color: var(--text-lbl); text-transform: uppercase; margin-bottom: 10px; } .ops-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 56px; letter-spacing: .04em; color: var(--text-main); line-height: 1; } .ops-subtitle { font-family: 'Barlow', sans-serif; font-style: italic; font-weight: 300; font-size: 16px; color: var(--text-body); margin-top: 8px; } @media(max-width: 699px) { .ops-header { padding: 28px 20px 22px; } .ops-title { font-size: 40px; } } .operator-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-hi); } @media(max-width: 699px) { .operator-grid { grid-template-columns: 1fr; } } .operator-card { display: block; background: var(--bg-3); border: 1px solid var(--border-hi); text-decoration: none; transition: background .15s; } .operator-card:hover { background: var(--bg-2); } .operator-card-placeholder { cursor: default; } .operator-hero { position: relative; aspect-ratio: 16/9; overflow: hidden; } .operator-hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .operator-hero-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--bg-2); } .operator-hatch { position: absolute; inset: 0; background: repeating-linear-gradient( 45deg, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 1px, transparent 10px ); } .operator-placeholder-caption { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .16em; color: var(--text-lbl); text-transform: uppercase; z-index: 1; } .operator-body { padding: 20px 22px 24px; } .operator-eyebrow { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .16em; color: var(--text-lbl); text-transform: uppercase; margin-bottom: 10px; } .operator-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: .02em; color: #EDEAE0; text-transform: uppercase; line-height: 1.1; } .operator-desc { font-family: 'Barlow', sans-serif; font-style: italic; font-weight: 300; font-size: 14px; color: var(--text-body); margin-top: 8px; } .operator-link { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .1em; color: var(--text-lbl); text-transform: uppercase; margin-top: 16px; } /* ── 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:#0D0D0D; border-bottom-color:#181818; } [data-theme="solari"] .wordmark { color:var(--amber); font-size:26px; } [data-theme="solari"] .currency-toggle { display: flex; align-items: center; gap: 6px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } [data-theme="solari"] .currency-btn { background: none; border: none; cursor: pointer; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.32); padding: 0; transition: color .15s; } [data-theme="solari"] .currency-btn.active { color: var(--amber); } [data-theme="solari"] .currency-btn:hover { color: rgba(255,255,255,.7); } [data-theme="solari"] .currency-sep { color: rgba(255,255,255,.2); } /* Nav */ [data-theme="solari"] .nav { background:#0D0D0D; 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,.45); 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"][data-header="amber-strip"] .op-board-cols { background: var(--amber); } [data-theme="solari"][data-header="amber-strip"] .op-board-cols .col-lbl { color: #3A2800; 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-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,.4); font-size:9px; } [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,.38); 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:#0D0D0D; border-top-color:#141414; } [data-theme="solari"] .board-ftr-txt { color:rgba(255,255,255,.4); } /* Panel */ [data-theme="solari"] .panel { background:#111111; border-left-color:#1E1E1E; } [data-theme="solari"] .panel-header { background:#111111; 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:#111111; } [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:#0D0D0D; 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:#0D0D0D; 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:#111111; } [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:#181818; border-color:#1E1E1E; } [data-theme="solari"] .email-in::placeholder { color:rgba(255,255,255,.35); } [data-theme="solari"] .site-footer { background:#0D0D0D; border-top-color:#141414; } [data-theme="solari"] .ftr-txt { color:rgba(255,255,255,.4); } /* Mobile cards */ [data-theme="solari"] .m-card { background:#111111; border-color:#1E1E1E; } [data-theme="solari"] .m-card:hover { background:#181818; } [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; } /* Operator profile page — amber reserved for price only */ [data-theme="solari"] .fact-val { color: var(--amber); } [data-theme="solari"] .step-head { color: var(--amber); } [data-theme="solari"] .fact-val.good { color: var(--green-hi); } [data-theme="solari"] .hero-name { color: var(--amber); } [data-theme="solari"] .ops-title { color: var(--amber); } [data-theme="solari"] .fact-lbl { color: rgba(255,255,255,.55); } [data-theme="solari"] .ed-block-lbl, [data-theme="solari"] .step-num { color: rgba(255,255,255,.55); } [data-theme="solari"] .op-sec-lbl { color: rgba(255,255,255,.55); } /* ── FLAP TILES ── */ .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-inline-space { display: inline-block; flex-shrink: 0; width: .35em; } .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: 2px; background: var(--flap-seam); opacity: .35; transform: translateY(-.5px); } /* ── FLAP ANIMATION ── */ @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; }