/* ============================================ Author: Trey Kinard Website: Domain tbd Description: Stylesheet for World View Imaging main section ... not used for client portal Last Updated: August 17, 2025 ============================================ */ /* ========== Base Reset & Typography ========== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-family: "Segoe UI", "Roboto", "Helvetica Neue", sans-serif; scroll-behavior: smooth; } body { background-color: #fff; color: #000; transition: background 0.3s ease, color 0.3s ease; } /* Page specific treatments */ .icon-link { text-decoration: none; font-size: 1.5rem; /* Optional: scale the icon */ } /* Full-size default overlay */ body.index-page::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../images/overlay/studio_index.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: var(--overlay-opacity, 0.4); z-index: -1; pointer-events: none; } @media (max-width: 768px) { body.index-page { --overlay-opacity: 0.6; /* Stronger overlay for mobile */ } body.index-page::before { background-image: url("../images/overlay/studio_index_mobile.jpg"); } } /* Tweaking of opacity index.html*/ body.index-page { --overlay-opacity: 0.20; /* adjust this value as needed */ } /* Turn off Overlay for index.html in dark mode */ [data-theme="dark"] body.index-page::before { opacity: 0 !important; } /* Target only gallery.html using a unique class on */ body.gallery-page::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../images/overlay/outside_gallery.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: var(--gallery-overlay-opacity, 0.4); /* default fallback */ z-index: -1; pointer-events: none; transition: opacity 0.4s ease; } /* allow easy tweaking of opacity on gallery.html */ body.gallery-page { --gallery-overlay-opacity: 0.15; } /* Turn off Overlay for gallery.html in dark mode */ [data-theme="dark"] body.gallery-page::before { opacity: 0 !important; } /* Target only about.html using a unique class on */ body.about-page::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../images/overlay/plants_about.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: var(--about-overlay-opacity, 0.4); /* default fallback */ z-index: -1; pointer-events: none; transition: opacity 0.4s ease; } /* allow easy tweaking of opacity on about.html */ body.about-page { --about-overlay-opacity: 0.15; } /* Turn off Overlay for about.html in dark mode */ [data-theme="dark"] body.about-page::before { opacity: 0 !important; } /* Target only contact.html using a unique class on */ body.contact-page::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../images/overlay/meet_contact.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: var(--contact-overlay-opacity, 0.4); /* default fallback */ z-index: -1; pointer-events: none; transition: opacity 0.4s ease; } /* allow easy tweaking of opacity on contact.html */ body.contact-page { --contact-overlay-opacity: 0.15; } /* Turn off Overlay for contact.html in dark mode */ [data-theme="dark"] body.contact-page::before { opacity: 0 !important; } /* ========== Dark Mode ========== */ [data-theme="dark"] body { background-color: #121212; color: #f0f0f0; } [data-theme="dark"] header, [data-theme="dark"] footer { background-color: #1e1e1e; } [data-theme="dark"] a { color: #66ccff; } [data-theme="dark"] input, [data-theme="dark"] textarea { background-color: #1e1e1e; color: #fff; border: 1px solid #555; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #ccc; } [data-theme="dark"] .contact-form button { background-color: #0077cc; /* Keep the blue */ color: #fff; /* Ensure contrast */ } [data-theme="dark"] .contact-form button:hover { background-color: #005fa3; /* Slightly darker blue on hover */ } [data-theme="dark"] .form-group label { color: #fff; } [data-theme="dark"] .slogan-box h2 { color: #000 !important; } [data-theme="dark"] .slogan-box a { color: #66ccff; } [data-theme="dark"] .customer-comments { background-color: #1e1e1e; color: #eee; border: 1px solid #333; border-radius: 6px; box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05); } [data-theme="dark"] .customer-comments blockquote { color: #eee; border-left: 4px solid #555; padding-left: 1rem; } [data-theme="dark"] .image-slider::before, [data-theme="dark"] .image-slider::after { background: none !important; content: none !important; /* Optional: fully suppress pseudo-elements */ } /* ========== Header & Navigation ========== */ .top-bar { background-color: #000; color: #fff; padding: 1rem; display: flex; justify-content: space-between; align-items: center; } .top-bar h1 { font-size: 1.8rem; } .logo img { max-width: 120px; height: auto; display: block; } .top-bar nav a { color: white; margin-left: 1rem; text-decoration: none; font-weight: 600; } .top-bar nav a:hover { text-decoration: underline; } /* ========== Image Slider ========== */ .image-slider { overflow: hidden; width: 100%; position: relative; background: transparent; } .slider-track { display: flex; flex-wrap: nowrap; align-items: center; animation: scroll-left 60s linear infinite; white-space: nowrap; width: max-content; /* 👈 This makes the track expand to fit all images */ } /* Image sizing: prevent stretching, keep consistent height */ .slider-track img { max-height: 400px; width: auto; object-fit: cover; margin-right: 20px; display: block; border-radius: 8px; vertical-align: middle; /* Helps with inline-block fallback */ } /* Scroll entire track left and reset */ @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Optional: Pause scroll on hover */ .slider-track:hover { animation-play-state: paused; } /* Optional: Fade edges for visual polish */ .image-slider::before, .image-slider::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } @media (max-width: 768px) { [data-theme="dark"] .image-slider::before, [data-theme="dark"] .image-slider::after { background: none !important; content: none !important; /* Optional: remove pseudo-elements entirely */ } } .image-slider::before { left: 0; background: linear-gradient(to right, rgba(255,255,255,1) 0%, transparent 100%); } .image-slider::after { right: 0; background: linear-gradient(to left, rgba(255,255,255,1) 0%, transparent 100%); } /* Optional: Responsive image height */ @media (max-width: 768px) { .image-slider { height: 180px; } .slider-track img { height: 160px; object-fit: cover; } } /* ========== Slogan Section ========== */ .slogan-box { background-color: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); display: inline-block; } .home-slogan { padding: 2rem; background: none; /* This removes the white bar */ text-align: center; } .slogan-box h2 { margin-bottom: 1rem; font-size: 1.4rem; font-weight: 400; } .slogan-box a { color: #0077cc; margin: 0 0.5rem; text-decoration: none; } /* ========== Thumbnail Grid ========== */ .thumbnail-grid { display: flex; flex-wrap: wrap; gap: 1rem; padding: 2rem; justify-content: center; } .thumbnail-grid a { width: 180px; text-align: center; color: inherit; } .thumbnail-grid img { width: 100%; height: auto; border-radius: 6px; } /* ========== Gallery Grid ========== */ .image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; padding: 2rem; } .image-grid img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.2); } .image-grid img { max-width: 400px !important; } } /* ========== About Page Sections ========== */ .photographer-image img { width: 100%; height: auto; object-fit: cover; } .bio-details { padding: 2rem; line-height: 1.6; } /* ========== Customer Comments ========== */ .customer-comments { background-color: #eee; padding: 2rem; } .customer-comments blockquote { font-style: italic; margin-bottom: 1rem; } /* ========== Contact Form ========== */ form { max-width: 600px; margin: 2rem auto; display: flex; flex-direction: column; gap: 1rem; transition: background 0.3s ease, color 0.3s ease; } form label { font-weight: 600; } form input, form textarea { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; } form textarea { resize: vertical; } /* Contact Section Container */ .contact-section { padding: 2rem; text-align: center; } /* Contact Form Layout */ .contact-form { max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; } /* Individual Form Groups */ .form-group { display: flex; flex-direction: column; align-items: flex-start; } /* Labels */ .form-group label { margin-bottom: 0.5rem; font-weight: bold; color: #333; } /* Inputs and Textareas */ .contact-form input, .contact-form textarea { width: 100%; max-width: 100%; padding: 1rem; font-size: 1.05rem; border: 1px solid #ccc; border-radius: 6px; background-color: #fdfdfd; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: box-shadow 0.3s ease; } .contact-form input:focus, .contact-form textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 119, 204, 0.2); } /* Submit Button (Light Mode: Black) */ .contact-form button { align-self: flex-start; padding: 0.75rem 1.5rem; background-color: #0077cc; color: #fff; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; transition: background 0.3s ease; } .contact-form button:hover { background-color: #333; } /* ========== QR code footer on index.html ========== */ .qr-img { display: block; margin: 0 auto; max-width: 80px; height: auto; } .qr-footer img { max-width: 160px; height: auto; } @media screen and (max-width: 600px) { .qr-img { max-width: 120px; } } /* ========== Floating Dark Mode Toggle ========== */ .floating-toggle { position: fixed; bottom: 1rem; right: 1rem; background: #222; color: #fff; border: none; padding: 0.6rem; border-radius: 50%; font-size: 1.2rem; cursor: pointer; z-index: 1000; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: background 0.3s ease, color 0.3s ease; } [data-theme="dark"] .floating-toggle { background: #eee; color: #121212; } /* ========== Responsive Tweaks ========== */ @media (max-width: 768px) { .logo { margin-right: 16px; /* Adjust as needed for visual balance */ margin-bottom: 16px; /* Adds space below the logo */ } .top-bar { flex-direction: column; text-align: center; } .thumbnail-grid { justify-content: center; } .image-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } @media (max-width: 768px) { .image-grid { grid-template-columns: 1fr; justify-items: center; } form { padding: 0 1rem; } }