/* ========================================================================= Unbooker - Monochrome core + optional taxi-yellow accent Trimmed, consolidated and ready to paste into assets/css/unbooker-bw.css ========================================================================= */ /* --------------------------- Variables --------------------------- */ :root { /* Fonts */ --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --heading-font: "Raleway", sans-serif; --nav-font: "Poppins", sans-serif; /* Monochrome Palette (edit here to adjust site look) */ --bg: #ffffff; --fg: #0f1720; /* near-black primary */ --muted: #6b6b6b; /* secondary text */ --edge: #e8e8e8; /* borders */ --card-bg: rgba(15, 17, 20, 0.04); --footer-bg: #0b0f14; --contrast: #ffffff; /* Accent (default neutral - toggled below) */ --accent: #111111; --accent-contrast: #ffffff; --accent-100: rgba(255, 201, 31, 0.12); /* Layout */ --radius: 10px; --container-pad: 24px; } /* Activate taxi-yellow accent by adding `use-accent` on */ body.use-accent { --accent: #FFC91F; --accent-contrast: #111111; --accent-100: rgba(255, 201, 31, 0.14); } /* --------------------------- Base --------------------------- */ html { scroll-behavior: smooth; } html, body { height: 100%; margin: 0; font-family: var(--default-font); background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--fg); text-decoration: none; transition: color .18s ease; } a:hover { color: color-mix(in srgb, var(--fg) 88%, transparent 12%); } h1, h2, h3, h4, h5, h6 { color: var(--fg); font-family: var(--heading-font); margin: 0 0 .5rem 0; line-height: 1.15; } /* --------------------------- Header (logo-only friendly) --------------------------- */ .header { position: relative; z-index: 997; padding: 16px 0; background: var(--bg); color: var(--fg); transition: all .35s ease; box-shadow: none; } .header .logo { display: flex; align-items: center; gap: 10px; line-height: 1; } .header .logo img { max-height: 56px; display: block; filter: grayscale(100%); } .scrolled .header { box-shadow: 0 6px 20px rgba(15, 17, 20, 0.06); } /* Center logo if present (desktop), revert on mobile */ .header .container-fluid, .header .container-xl { position: relative; min-height: 64px; } .header .logo.centered { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1000; } @media (max-width:1199px) { .header .logo.centered { position: static; transform: none; margin: 0 auto; } } /* --------------------------- Navigation (minimal) --------------------------- */ .navmenu ul { margin: 0; padding: 0; display: flex; gap: 10px; list-style: none; align-items: center; } .navmenu a { color: var(--nav-color, var(--fg)); font-family: var(--nav-font); font-weight: 500; padding: 8px 6px; transition: .18s; } .navmenu>ul>li>a::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; bottom: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .28s; } .navmenu li:hover>a::before, .navmenu .active>a::before { transform: scaleX(1); } /* --------------------------- Hero --------------------------- */ .hero { width: 100%; min-height: 66vh; display: flex; align-items: center; justify-content: center; padding: 80px 0; position: relative; background: var(--bg); } .hero .container { position: relative; z-index: 2; text-align: center; } .hero h1 { font-size: 48px; font-weight: 800; line-height: 1.05; color: var(--fg); margin-bottom: 12px; } .hero p { color: var(--muted); font-size: 18px; margin: 8px auto 26px; max-width: 920px; } /* hero image centered, grayscale by default */ .hero-img { text-align: center; } .hero-img img { max-width: 560px; width: 100%; height: auto; object-fit: contain; filter: grayscale(100%) contrast(105%); } /* --------------------------- Store buttons (CTA) --------------------------- */ .store-button { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 10px; background: var(--card-bg); color: var(--contrast); border: 1px solid color-mix(in srgb, var(--fg), transparent 92%); font-weight: 700; text-decoration: none; transition: transform .12s ease, box-shadow .18s ease, background .12s; } /* Accent-enabled variant (body.use-accent will set --accent) */ body.use-accent .store-button, .store-button.btn-accent { background: var(--accent); color: var(--accent-contrast); border: 0; box-shadow: 0 8px 28px var(--accent-100); } .store-button:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); } /* --------------------------- Cinematic CTA (centered, monochrome) --------------------------- */ .cta-glass { padding: 80px 0; position: relative; overflow: hidden; background: transparent; } .cta-glass .cta-glass-card { position: relative; max-width: 820px; margin: 0 auto; padding: 48px 36px; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)); box-shadow: 0 10px 40px rgba(2, 6, 23, 0.12); } .cta-glass .aurora-glow { position: absolute; left: 50%; top: 18%; transform: translate(-50%, -50%); width: 420px; height: 420px; background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 60%); filter: blur(120px); opacity: 0.45; pointer-events: none; animation: auroraFloat 8s ease-in-out infinite; } @keyframes auroraFloat { 0% { transform: translate(-50%, -50%) translateY(-6px) scale(1) } 50% { transform: translate(-50%, -50%) translateY(6px) scale(1.02) } 100% { transform: translate(-50%, -50%) translateY(-6px) scale(1) } } .cta-glass .cta-title { font-size: 40px; font-weight: 700; text-align: center; color: var(--fg); margin-bottom: 8px; } .cta-glass .cta-text { font-size: 18px; color: var(--muted); text-align: center; margin: 0 auto 18px; max-width: 680px; } .cta-glass .store-buttons-glass { display: flex; gap: 12px; justify-content: center; } /* Hide any 3D image column */ .cta-glass .cta-image-glass { display: none !important; } /* --------------------------- FAQ (light) --------------------------- */ .faq .faq-item { border: 1px solid var(--edge); border-radius: 8px; padding: 16px; margin-bottom: 12px; background: transparent; } .faq .faq-item h3 { font-size: 17px; font-weight: 600; margin: 0; cursor: pointer; } .faq .faq-content { display: none; margin-top: 10px; color: var(--muted); } .faq .faq-active .faq-content { display: block; } /* --------------------------- Footer (grayscale) --------------------------- */ .footer { color: var(--muted); background: var(--footer-bg); padding: 40px 0; } .footer .logo img { filter: grayscale(100%); max-width: 140px; display: block; } .footer a { color: rgba(255, 255, 255, 0.75); text-decoration: none; } .footer a:hover { color: var(--contrast); } /* --------------------------- Utilities & responsiveness --------------------------- */ .container { max-width: 1180px; margin: 0 auto; padding: 0 var(--container-pad); box-sizing: border-box; } .text-center { text-align: center; } @media (max-width:991px) { .hero { padding: 40px 0; min-height: 48vh; } .cta-glass .cta-glass-card { padding: 36px 20px; } .cta-glass .aurora-glow { width: 260px; height: 260px; top: 12%; opacity: 0.34; filter: blur(80px); } .cta-glass .cta-title { font-size: 32px; } } @media (max-width:767px) { .hero h1 { font-size: 32px; } .hero-img img { max-width: 320px; } .store-button { width: 100%; justify-content: center; padding: 12px 14px; } } /* Accessibility focus */ .store-button:focus { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent), transparent 85%); border-radius: 10px; } /* End - trimmed monochrome core */ /* DOWNLOAD BUTTON: yellow by default, darker when clicked/active */ :root { --download-yellow: #FFC91F; --download-yellow-press: #e6b20e; --download-contrast: #111; --download-shadow: rgba(255, 201, 31, 0.12); } /* Use on download-specific store buttons: */ .store-button.download { background: var(--download-yellow); color: var(--download-contrast); border: 0; box-shadow: 0 8px 28px var(--download-shadow); transition: transform .12s ease, box-shadow .18s ease, filter .12s ease, background .12s; } /* Hover micro interaction (still yellow) */ .store-button.download:hover { transform: translateY(-3px); filter: saturate(1.02); box-shadow: 0 12px 36px var(--download-shadow); } /* Pressed (mouse down) visual — immediate feedback */ .store-button.download:active { background: var(--download-yellow-press); transform: translateY(0); box-shadow: none; } /* Persisted clicked state (JS toggles `.clicked`) */ .store-button.download.clicked { background: var(--download-yellow-press); box-shadow: none; color: var(--download-contrast); } /* Focus (keyboard accessible) */ .store-button.download:focus { outline: none; box-shadow: 0 0 0 4px rgba(255, 201, 31, 0.14); border-radius: 10px; } /* Small-screen: make wide */ @media (max-width:767px) { .store-button.download { width: 100%; justify-content: center; } }