/* Lisää tämä -osioon HTML-tiedostossa:
*/
html {
}
body {
background-color: rgb(247 236 231);
padding-bottom: 15%;
font-family: "Times New Roman", Times, serif;
font-size: 2rem;
color: rgb(37 106 100);
padding-left: 2em;
padding-right: 2em;
}
.kauan-container {
max-width: 1600px;
margin: auto;
}
p {
text-align: left;
}
.hyphenate {
hyphens: auto;
-webkit-hyphens: auto;
-moz-hyphens: auto;
word-break: break-word;
}
h1 {
font-weight: normal;
font-style: normal;
margin-top: 0;
margin-bottom: 0;
}
.text-h1 {
font-size: 1.8em;
}
h2 {
max-width: inherit;
font-weight: normal;
font-style: normal;
text-align: left;
margin-top: 0;
margin-bottom: 0;
}
.text-h2 {
font-size: 1em;
}
.text-basic {
font-size: 1em;
}
.text-small,
.text-medium {
font-size: 0.72em;
line-height: normal;
}
.navbar {
margin: 0 0 1.7em 0;
padding-top: 4em;
box-sizing: border-box;
display: flex;
justify-content: center;
gap: 2.5em;
align-items: baseline;
}
.main_container {
}
.main-container-medium {
max-width: 70%;
margin: auto;
margin-bottom: 5em;
}
.main-container-medium .contact-area {
margin-top: 4em;
}
.main-container-narrow {
max-width: 50%;
margin: auto;
margin-bottom: 5em;
}
.footer {
margin-top: 3em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.8em;
}
.footer-sub {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5em;
}
.text-footer-big {
font-size: 1.1em;
}
.text-footer-small {
font-size: 0.72em;
}
.introduction {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 0.8em;
margin-top: -0.5em;
}
.full-width-image.first-image {
margin-top: 2.5em; /* yläreuna tekstin jälkeen */
margin-bottom: 5em; /* säilytetään alkuperäinen ala */
}
.image-grid {
margin: 0;
width: 100%;
padding: 5%;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 1.7em;
row-gap: 1.2em;
justify-content: center;
align-items: center;
}
.image-grid .center-last {
grid-column: 2 / 3; /* keskimmäiseen sarakkeeseen */
}
.image-caption {
margin-top: 0em;
font-size: 0.8em;
opacity: 1;
transition: opacity 750ms;
text-align: center;
}
.image-effect {
transition: 300ms;
filter: grayscale(0);
}
.image-effect:hover {
transition: 300ms;
filter: grayscale(1);
}
.image img {
max-width: 100%;
aspect-ratio: 1 / 1;
object-fit: fill;
margin: 0 auto;
}
.full-width-image {
grid-column: 1 / -1;
margin-bottom: 5em;
}
.full-width-image img {
max-width: 100%;
}
.nice-image {
width: 60%;
}
.nice-image img {
max-width: 100%;
}
.story-container {
margin-bottom: 5em;
width: inherit;
}
.toimisto {
}
.suunnittelijat {
margin-top: 3em;
}
.kilpailut {
margin-bottom: 3em;
margin-top: 3em;
}
.story-toimisto {
margin: 1em 0;
width: 100%;
}
.competition {
margin-top: 1em;
}
.competition::first-line {
font-weight: bold;
}
.two-column {
column-count: 2;
column-gap: 3em;
}
.story-part {
margin-top: 1em;
margin-bottom: 3em;
}
.details {
display: flex;
flex: 1;
flex-direction: column;
}
.detail-item {
display: flex;
gap: 1rem;
}
.detail-item-field {
width: 40%;
}
.image {
flex: 1;
}
.text_bigger {
font-size: 2rem;
}
.transparent {
opacity: 0.30;
}
.contact {
width: 35%;
}
.contact-area {
display: flex;
}
.contact-info {
}
.navigation {
color: rgb(37 106 100);
font-weight: normal;
font-style: normal;
text-decoration: none;
}
a.navigation {
position: relative;
text-decoration: none;
color: rgb(37 106 100);
}
a.navigation::after {
content: "";
position: absolute;
left: 0;
bottom: -0.15em; /* etäisyys tekstistä */
width: 100%;
height: 3px; /* viivan paksuus */
background-color: rgb(37 106 100);
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms ease;
}
a.navigation:hover::after {
transform: scaleX(1);
}
/* --- RESPONSIVE STYLES --- */
@media (max-width: 1200px) {
body {
font-size: max(2.5vw, 20px);
}
.two-column {
column-count: 1;
}
}
@media (max-width: 1100px) {
.navbar {
flex-wrap: wrap;
gap: 1em;
}
.contact-area {
flex-direction: column-reverse;
}
.nice-image {
width: 100%;
}
.image img {
width: 100%;
max-width: 400px;
height: auto;
}
}
/* --- Mobiilimuutos: etusivun grid-kuvat allekkain --- */
@media (max-width: 800px) {
.image-grid {
grid-template-columns: 1fr !important; /* yksi sarake */
justify-items: center;
}
.image-grid .center-last {
grid-column: auto !important; /* ei keskitystä */
}
.image img {
width: 100%;
max-width: 100%;
height: auto;
}
}
@media (max-width: 600px) {
body {
padding-left: 1em;
padding-right: 1em;
font-size: 1.1rem;
}
.main-container-medium,
.main-container-narrow {
max-width: 95%;
padding: 0;
}
.text-h1 {
font-size: 1.4em;
}
.text-h2,
.text-basic,
.text-footer-big {
font-size: 1em;
}
.text-small,
.text-medium,
.text-footer-small {
font-size: 0.85em;
}
.contact {
width: 100%;
}
}