/* * Skyline Theme Fix - Main Styles * * This file adds a city skyline background image to the hero section with a gentle * sky-inspired color palette. It uses CSS variables and relative image paths to ensure * compatibility when the site is hosted from a repository subpath. * * USAGE: * Add this link tag in your HTML AFTER css/styles.css: * * * OPTIONAL JS Enhancement: * To enable per-city skyline images, add this line in your JavaScript initialization: * document.documentElement.style.setProperty('--skyline-image', 'url(../images/phoenix-skyline.jpg)'); */ :root { /* Sky-inspired color palette */ --sky-blue-light: #7fc8ff; --sky-blue-dark: #0f89ff; --warm-cream: #f1e6d6; --warm-accent: #d8a86f; --sky-muted: #9fb5c9; --text-dark: #213547; /* Skyline background image - uses relative path from css/ folder */ --skyline-image: url('../images/skyline.jpg'); } /* Apply skyline background to hero section */ .hero, .hero--skyline, .hero.hero--skyline { position: relative; background-image: var(--skyline-image); background-size: cover; background-position: center top; background-repeat: no-repeat; min-height: 44vh; color: #ffffff; } /* Gentle overlay to improve text contrast while keeping skyline visible */ .hero::before, .hero--skyline::before, .hero.hero--skyline::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(15, 137, 255, 0.10) 0%, rgba(241, 230, 214, 0.30) 60%, rgba(255, 255, 255, 0.50) 100% ); pointer-events: none; z-index: 1; } /* Ensure hero content sits above the overlay */ .hero .container, .hero--skyline .container, .hero.hero--skyline .container { position: relative; z-index: 2; } /* Update body background to complement skyline theme */ body { background: linear-gradient(180deg, var(--warm-cream) 0%, #ffffff 100%); color: var(--text-dark); } /* Memo carousel styling to work with skyline background */ .memo-viewport { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.92) ); border-radius: 10px; box-shadow: 0 8px 26px rgba(33, 53, 71, 0.12); border: 1px solid rgba(33, 53, 71, 0.04); } .memo-viewport .memo { color: var(--text-dark); font-weight: 600; } /* Navigation buttons for memo carousel */ .memo-prev, .memo-next, .memos-carousel .memo-prev, .memos-carousel .memo-next { background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(33, 53, 71, 0.08); color: var(--text-dark); box-shadow: 0 4px 12px rgba(33, 53, 71, 0.08); } .memo-prev:hover, .memo-next:hover, .memos-carousel .memo-prev:hover, .memos-carousel .memo-next:hover { background: rgba(255, 255, 255, 0.95); transform: translateY(-2px); } /* Header styling to blend with skyline theme */ .site-header { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.95), rgba(241, 230, 214, 0.85) ); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Link colors matching sky palette */ a { color: var(--sky-blue-dark); } a:hover { color: var(--warm-accent); } /* Button primary style with sky gradient */ .btn-primary { background: linear-gradient(90deg, var(--sky-blue-dark), var(--sky-blue-light)); color: #ffffff; box-shadow: 0 6px 18px rgba(15, 137, 255, 0.14); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(15, 137, 255, 0.20); }