/* ------------------------------------------------------ */ /* FONTIT (lataa nämä HTML:n -osaan) */ /* ------------------------------------------------------ */ /* */ /* Perusrunko + taustaväri teeman mukaan */ body { margin: 0; font-family: 'Montserrat', Arial, sans-serif; background: #f7f2f2; /* oletustausta */ background: var(--bg-color); /* teeman tausta (myös gradientit) */ } /* ------------------------------------------------------ */ /* VÄRITEEMAT (valittavissa body-luokalla) */ /* ------------------------------------------------------ */ /* 1) Klassinen punainen */ .theme-red { --title-color: #c3192f; --subtitle-color: #a30f16; --title-hover: #7d0b12; --bg-color: linear-gradient(180deg, #fff5f5 0%, #f7e3e3 100%); --box-color: (#fff5f5); } /* 2) Tumma tekninen */ .theme-dark { --title-color: #f2f2f2; /* kirkas otsikkoteksti */ --subtitle-color: #d0d0d0; /* vaalea leipäteksti */ --title-hover: #00b7ff; /* neon-sininen korostus */ /* Pehmeä gradientti taustalle */ --bg-color: linear-gradient(180deg, #1a1a1a 0%, #111 100%); --box-color: (#1a1a1a); } /* 3) Retro offroad */ .theme-olive { --title-color: #556b2f; --subtitle-color: #6f8f3d; --title-hover: #3e4f1f; --bg-color: linear-gradient(180deg, #f7f9f3 0%, #e8eedf 100%); --box-color: (#f7f9f3); } /* 4) GTi Neon */ .theme-gti { --title-color: #00eaff; /* kirkas neon-sininen otsikko */ --subtitle-color: #b8eaff; /* vaalea sinertävä leipäteksti */ --title-hover: #00b7ff; /* syvempi neon hover */ /* Neon-tyylinen tumma gradientti */ --bg-color: linear-gradient(180deg, #0d0d0f 0%, #000000 100%); --box-color: (#0d0d0f); } /* ------------------------------------------------------ */ /* GTi: neon-hehku */ /* ------------------------------------------------------ */ .theme-gti .main-title, .theme-gti .top-box h1, .theme-gti .Heading-box h2 { text-shadow: 0 0 8px rgba(0, 234, 255, 0.8), 0 0 16px rgba(0, 234, 255, 0.6), 0 0 24px rgba(0, 234, 255, 0.4); } .theme-gti a:hover { color: #00eaff; text-shadow: 0 0 6px rgba(0, 234, 255, 0.8); } .theme-gti .gallery img, .theme-gti .photo-frame img { box-shadow: 0 0 12px rgba(0, 234, 255, 0.4), 0 0 24px rgba(0, 234, 255, 0.2); } .theme-gti .gallery img:hover, .theme-gti .photo-frame img:hover { box-shadow: 0 0 16px rgba(0, 234, 255, 0.8), 0 0 32px rgba(0, 234, 255, 0.6); transform: scale(1.04); } .theme-gti .photo-nav-left, .theme-gti .photo-nav-right { background: rgba(0, 234, 255, 0.15); border: 2px solid rgba(0, 234, 255, 0.6); box-shadow: 0 0 10px rgba(0, 234, 255, 0.5); } .theme-gti .photo-nav-left:hover, .theme-gti .photo-nav-right:hover { background: rgba(0, 234, 255, 0.3); box-shadow: 0 0 16px rgba(0, 234, 255, 0.9); } .theme-gti .Heading-box { border: 1px solid rgba(0, 234, 255, 0.4); box-shadow: 0 0 12px rgba(0, 234, 255, 0.3); } /* ------------------------------------------------------ */ /* KIELIVALITSIN */ /* ------------------------------------------------------ */ .language-switch { position: fixed; top: 10px; right: 15px; background: rgba(255, 255, 255, 0.85); padding: 8px 12px; border-radius: 8px; font-size: 1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.15); z-index: 1000; } .language-switch a { color: var(--title-color); text-decoration: none; font-weight: bold; } .language-switch a:hover { text-decoration: underline; } /* ------------------------------------------------------ */ /* PÄÄSIVUN OTSIKOT */ /* ------------------------------------------------------ */ .main-title { text-align: center; font-size: 3rem; font-family: 'Bebas Neue', sans-serif; color: var(--title-color); margin: 2rem 0 1rem 0; } .main-title-sub { text-align: center; font-size: 1.2rem; font-family: 'Montserrat', sans-serif; color: var(--subtitle-color); margin-bottom: 2rem; } /* ------------------------------------------------------ */ /* YLÄLAATIKKO (otsikko + linkki) */ /* ------------------------------------------------------ */ .top-box { width: 100%; background: rgba(255,255,255, 0.9); text-align: center; padding: 1.5rem 1rem; box-shadow: 0 2px 10px rgba(0,0,0,0.15); position: sticky; top: 0; z-index: 900; } .top-box h1 { margin: 0; color: var(--title-color); font-size: 2.5rem; font-family: 'Orbitron', sans-serif; font-weight: 700; } .top-box a { color: var(--subtitle-color); font-size: 1rem; text-decoration: none; } /* ------------------------------------------------------ */ /* TAUSTAKUVA */ /* ------------------------------------------------------ */ .hero { position: relative; width: 100%; } .hero img { width: 100%; height: auto; display: block; } /* ------------------------------------------------------ */ /* KELLUVA OTSIKKOLAATIKKO */ /* ------------------------------------------------------ */ .Heading-box { position: absolute; top: 5%; left: 5%; width: 40%; min-width: 250px; background: rgba(255,255,255, 0.85); padding: 2rem; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); } .Heading-box h2 { margin: 0; font-size: 2.2rem; font-family: 'Orbitron', sans-serif; color: var(--title-color); font-weight: 700; } .Heading-box p { color: var(--subtitle-color); font-size: 1.1rem; margin-top: 0.5rem; } .Heading-box a { color: var(--subtitle-color); text-decoration: none; } /* ------------------------------------------------------ */ /* SISÄLTÖLAATIKKO (FLOAT-LAYOUT SIVUILLE, EI GALLERIAAN) */ /* ------------------------------------------------------ */ .content-box { position: absolute; top: 20%; left: 5%; width: 40%; min-width: 250px; background: rgba(255, 255, 255, 0.85); padding: 1.5rem; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); } .content-box p { color: var(--subtitle-color); font-size: 1.1rem; margin-top: 0; } .content-box a { color: var(--subtitle-color); text-decoration: none; } /* ------------------------------------------------------ */ /* KUVAGALLERIA */ /* ------------------------------------------------------ */ .gallery { width: 90%; max-width: 1200px; margin: 2rem auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; } .gallery img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: pointer; } .gallery img:hover { transform: scale(1.03); box-shadow: 0 6px 20px rgba(0,0,0,0.3); } /* ------------------------------------------------------ */ /* YKSITTÄISEN KUVAN SIVU */ /* ------------------------------------------------------ */ .photo-frame { width: 90%; max-width: 1000px; margin: 2rem auto; text-align: center; } .photo-frame img { width: 100%; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .photo-nav { text-align: center; margin-top: 1rem; font-size: 1.1rem; } .photo-nav a { margin: 0 1rem; color: var(--title-color); text-decoration: none; font-weight: bold; } .photo-nav a:hover { color: var(--title-hover); } /* ------------------------------------------------------ */ /* YKSITTÄISEN KUVAN NÄKYMÄ – UUSI NAVIGOINTI */ /* ------------------------------------------------------ */ .photo-wrapper { position: relative; width: 90%; max-width: 1000px; margin: 2rem auto; text-align: center; } .photo-wrapper img { width: 100%; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } /* Vasemman ja oikean reunan navigointinuolet */ .photo-nav-left, .photo-nav-right { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2.5rem; font-weight: bold; color: var(--title-color); text-decoration: none; padding: 0.5rem 1rem; background: rgba(255,255,255,0.6); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); transition: background 0.2s ease, transform 0.2s ease; } .photo-nav-left:hover, .photo-nav-right:hover { background: rgba(255,255,255,0.9); transform: translateY(-50%) scale(1.1); } .photo-nav-left { left: -60px; } .photo-nav-right { right: -60px; } /* Paluu galleriaan */ .back-to-gallery { text-align: center; margin: 2rem 0; } .back-to-gallery a { color: var(--title-color); font-weight: bold; text-decoration: none; font-size: 1.2rem; } .back-to-gallery a:hover { color: var(--title-hover); } /* Kuvateksti */ .photo-caption { width: 90%; max-width: 900px; margin: 1.5rem auto; text-align: center; color: var(--subtitle-color); font-size: 1.1rem; line-height: 1.5rem; } /* Mobiili */ @media (max-width: 700px) { .photo-nav-left { left: -10px; } .photo-nav-right { right: -10px; } } /* ------------------------------------------------------ */ /* MOBIILI */ /* ------------------------------------------------------ */ @media (max-width: 700px) { .Heading-box { width: 90%; left: 50%; transform: translateX(-50%); top: 10%; } .content-box { width: 90%; left: 50%; transform: translateX(-50%); top: 30%; } .main-title { font-size: 2rem; } }