/* Theme Name: Pohtek Theme URI: https://valakia.fi Description: Pohjanmaan Teknologiateollisuus ry:n lapsiteema. Pohjana Twenty Twenty-Five ja Valakian blueprint. Author: Valakia Author URI: https://valakia.fi Template: twentytwentyfive Version: 1.17.6 Requires at least: 6.7 Requires PHP: 8.0 Text Domain: pohtek */ /* ================================================================ Perusasetukset ================================================================ */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Sivu reunasta reunaan: TT5:n juuritason sisennykset pois */ .wp-site-blocks { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; } .wp-site-blocks > .wp-block-template-part, .wp-site-blocks > .wp-block-group { max-width: none; margin-left: 0; margin-right: 0; } /* Ei lohkoväliä ylätunnisteen, sisällön ja alatunnisteen välissä */ .wp-site-blocks > * + * { margin-block-start: 0 !important; } /* ================================================================ Välit: osioiden ylä- ja alavälit tulevat teemasta, eivät sivujen lohkoista. Arvot ovat theme.json:n välikokoja (Erittäin pieni ... Osio). ================================================================ */ :root { --ptt-hero-top: clamp(2rem, 4vw, 3.5rem); --ptt-hero-bottom: clamp(2.5rem, 5vw, 4rem); } /* Jokainen täysleveä sisältöosio, myös itse lisätyt */ .wp-block-post-content > .wp-block-group.alignfull, .site-main > .wp-block-group.alignfull { padding-block: var(--wp--preset--spacing--section); } /* Alasivujen hero */ .wp-block-group.alignfull.ptt-page-hero { padding-block: var(--ptt-hero-top) var(--ptt-hero-bottom); } /* Etusivun hero matalampi, jotta seuraava osio näkyy jo ensimmäisessä näkymässä */ .wp-block-group.alignfull.ptt-hero:not(.ptt-page-hero) { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem); } /* Etusivun uutiset heti heron alla */ .wp-block-group.alignfull.ptt-news-section { padding-top: clamp(2.5rem, 5vw, 4rem); } /* Alasivun ensimmäinen osio heron jälkeen */ .wp-block-group.alignfull:is(.ptt-news-archive, .ptt-privacy, .ptt-404, .ptt-article) { padding-top: var(--wp--preset--spacing--xl); } .wp-block-group.alignfull.ptt-follow { padding-block: 3rem; } /* ================================================================ Ylätunniste ja alatunniste ================================================================ */ .site-header__bar { gap: 24px; } /* Alareuna varjona, jotta ylätunniste on tasan --ptt-hdr korkea */ .site-header { box-shadow: inset 0 -1px 0 var(--wp--preset--color--line); } .site-header__logo { margin: 0; flex: none; } .site-header__logo img { width: clamp(190px, 22vw, 270px) !important; height: auto; } /* Hyvin kapea näkymä (esim. 400 % zoom): logo pienemmäksi, jotta ylätunniste ei leviä */ @media (max-width: 340px) { .site-header__logo img { width: 160px !important; } .site-header__bar { gap: 12px; } } .site-header__nav { gap: 20px; } .site-header .wp-block-navigation { font-weight: 600; font-size: 16px; gap: 28px; } .site-header .wp-block-navigation a { text-decoration: none; } /* Syaani alleviivaus: kasvaa hoverissa ja fokuksessa, näkyy aina nykyisellä sivulla (uutisissa Ajankohtaista) */ .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content { position: relative; } .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--wp--preset--color--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.16, 1, .3, 1); } .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:is(:hover, :focus-visible, [aria-current="page"])::after, .single-post .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) a[href$="/ajankohtaista/"]::after, .archive .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) a[href$="/ajankohtaista/"]::after { transform: none; } @media (prefers-reduced-motion: reduce) { .site-header .wp-block-navigation-item__content::after { transition: none !important; } } .site-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent) !important; } .site-header .wp-block-social-links { gap: 0; } .site-header .wp-block-social-link { border: 0; border-radius: 0; padding: 0; } .site-header .wp-block-social-link:hover { transform: none; } .site-header .wp-block-social-link:hover svg { fill: var(--wp--preset--color--accent); } .site-header .wp-block-social-link a { padding: 10px !important; } /* Kiinteä ylätunniste */ :root { --ptt-hdr: 88px; } .site-header__bar { min-height: var(--ptt-hdr); } .wp-site-blocks > .wp-block-template-part:first-child { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; } .site-header { transition: background-color .35s ease, box-shadow .35s ease; } .site-header .site-header__logo img { transition: filter .35s ease; } .site-header .wp-block-navigation a, .site-header .wp-block-social-link, .site-header .wp-block-navigation__responsive-container-open { transition: color .35s ease, border-color .35s ease, fill .35s ease; } .site-header.is-scrolled { box-shadow: inset 0 -1px 0 var(--wp--preset--color--line), 0 6px 24px rgba(23, 20, 46, .08); } /* Heron päällä (body.ptt-overlay): läpinäkyvä tausta, valkoinen logo ja tekstit */ .ptt-overlay .wp-site-blocks > .wp-block-template-part:first-child { margin-bottom: calc(var(--ptt-hdr) * -1); } .ptt-overlay .ptt-hero { padding-top: calc(var(--ptt-hdr) + clamp(2rem, 4vw, 3.5rem)) !important; } .ptt-overlay .ptt-hero:not(.ptt-page-hero) { padding-top: calc(var(--ptt-hdr) + clamp(1rem, 2vw, 2rem)) !important; } .ptt-overlay .site-header:not(.is-scrolled) { background-color: transparent !important; box-shadow: none; } .ptt-overlay .site-header:not(.is-scrolled) .site-header__logo img { filter: brightness(0) invert(1); } .ptt-overlay .site-header:not(.is-scrolled) .wp-block-navigation__responsive-container:not(.is-menu-open) a, .ptt-overlay .site-header:not(.is-scrolled) .wp-block-navigation__responsive-container-open { color: #fff !important; } .ptt-overlay .site-header:not(.is-scrolled) .wp-block-social-link { color: #fff !important; } .ptt-overlay .site-header:not(.is-scrolled) .wp-block-social-link svg { fill: #fff; } .ptt-overlay .site-header:not(.is-scrolled) .wp-block-social-link:hover svg { fill: var(--wp--preset--color--accent); } .ptt-overlay .site-header:not(.is-scrolled) .wp-block-navigation__responsive-container:not(.is-menu-open) a:hover { color: var(--wp--preset--color--accent) !important; } @media (max-width: 781px) { :root { --ptt-hdr: 72px; } } @media (prefers-reduced-motion: reduce) { .site-header, .site-header .site-header__logo img, .site-header .wp-block-navigation a { transition: none; } } /* Alatunniste: neljä yhtä leveää saraketta (logo, Yhteystiedot, Sivut, Seuraa) samassa jaossa kuin sivujen neljän sarakkeen osiot; mobiilissa kaksi. Tekijärivi (©, Tietosuojaseloste, Valakia) tulee functions.php:stä. */ .site-footer { padding-block: clamp(2.5rem, 5vw, 3.5rem) 2.5rem; } .site-footer .wp-block-columns { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--wp--preset--spacing--m); align-items: start; margin-bottom: 0; } .site-footer .wp-block-column { flex-basis: auto !important; min-width: 0; } .site-footer .wp-block-image { margin: 0; } .site-footer__title { font-size: 15px !important; font-weight: 700; letter-spacing: 0; margin: 0 0 12px; } .site-footer__contact { font-size: 15px; line-height: 1.7; margin: 0; } .site-footer__contact a { text-decoration: none; } .site-footer__links { list-style: none; padding: 0; margin: 0; font-size: 15px; line-height: 1.7; } .site-footer__links li + li { margin-top: 4px; } .site-footer__links a { color: var(--wp--preset--color--bg-1) !important; text-decoration: none; } .site-footer__links a:hover { color: var(--wp--preset--color--accent) !important; } /* Syaani alleviivaus kuten ylävalikossa: kasvaa vasemmalta hoverissa ja fokuksessa */ .site-footer__links a, .site-footer__credit-link { position: relative; } .site-footer__links a::after, .site-footer__credit-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--wp--preset--color--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.16, 1, .3, 1); } .site-footer__links a:is(:hover, :focus-visible)::after, .site-footer__credit-link:is(:hover, :focus-visible)::after { transform: none; } @media (prefers-reduced-motion: reduce) { .site-footer__links a::after, .site-footer__credit-link::after { transition: none; } } .site-footer__links a[href*="linkedin.com"] { display: inline-flex; align-items: center; gap: 8px; } .site-footer__links a[href*="linkedin.com"]::before { content: ""; flex: none; width: 15px; height: 15px; background-color: currentColor; -webkit-mask: var(--ptt-linkedin) center / contain no-repeat; mask: var(--ptt-linkedin) center / contain no-repeat; } @media (max-width: 781px) { /* Isompi kosketusalue footerin linkeille */ .site-footer__links a, .site-footer__credit-link { display: inline-block; padding-block: 6px; } .site-footer__links a[href*="linkedin.com"] { display: inline-flex; } .site-footer__links li + li { margin-top: 0; } .site-footer .wp-block-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 1.25rem; } .site-footer .wp-block-column:first-child, .site-footer .wp-block-column:nth-child(4) { grid-column: 1 / -1; } } :root { --ptt-linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E"); } /* Tekijärivi (functions.php): sama indigo ja leveys kuin alatunnisteella, erotettu ohuella viivalla */ .site-footer__credit { background-color: var(--wp--preset--color--primary-dark); color: var(--wp--preset--color--soft); padding: 0 var(--wp--style--root--padding-right) 1.75rem var(--wp--style--root--padding-left); } .site-footer__credit-inner { max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / .14); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .site-footer__credit { --ptt-focus: var(--wp--preset--color--accent); } /* Alatunnisteen sisällä (functions.php lisää