/* Theme Name: AJK Keski-Suomi Theme URI: https://www.ajk-keskisuomi.fi Author: Autojoukkojen Keski-Suomen Kilta ry Description: Autojoukkojen Keski-Suomen Kilta ry:n virallinen verkkosivuteema. Version: 1.4.1 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 8.0 License: GNU General Public License v2 or later Text Domain: ajk-keskisuomi */ /* ===================================================== CSS-MUUTTUJAT ===================================================== */ :root { /* Pääväri — syvä sininen */ --ajk-primary-darkest: #042C53; --ajk-primary-dark: #0C447C; --ajk-primary: #185FA5; --ajk-primary-light: #85B7EB; --ajk-primary-lightest:#B5D4F4; --ajk-primary-bg: #E6F1FB; /* Aksentti — keltainen (logosta) */ --ajk-accent: #FAC775; --ajk-accent-dark: #412402; /* Neutraalit */ --ajk-white: #ffffff; --ajk-cream: #f8f7f3; --ajk-stone: #f5f5f2; --ajk-text: #1a1a1a; --ajk-text-secondary: #6b6b6b; --ajk-border: rgba(0, 0, 0, 0.08); /* Semanttiset */ --ajk-success: #3B6D11; --ajk-success-bg: #EAF3DE; --ajk-warning: #BA7517; --ajk-warning-bg: #FAEEDA; --ajk-danger: #A32D2D; --ajk-danger-bg: #FCEBEB; /* Typografia */ --ajk-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ajk-font-serif: Georgia, "Times New Roman", serif; /* Pyöristykset */ --ajk-radius-sm: 4px; --ajk-radius-md: 6px; --ajk-radius-lg: 12px; /* Varjo */ --ajk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --ajk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --ajk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* Kontainerin maksimileveys */ --ajk-container: 1280px; } /* * Tekstikoko-tasot — JS asettaa * body-zoom skaalaa yhdellä säännöllä KAIKEN sisällön (tekstit, painikkeet, * kuvat, ikonit, kortit, paddingit ja marginit). */ html[data-ajk-tekstikoko="1"] body { zoom: 1.15; } html[data-ajk-tekstikoko="2"] body { zoom: 1.30; } /* ===================================================== RESET JA PERUSTYYLIT ===================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background-color: var(--ajk-primary-darkest); } body { font-family: var(--ajk-font-sans); font-size: 16px; line-height: 1.6; color: var(--ajk-text); background-color: var(--ajk-primary-darkest); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Sisältöalue pysyy valkoisella pohjalla — header/footer ovat siniset */ main#paa-sisalto { background-color: var(--ajk-white); } /* Saavutettavuus: ohita-linkki */ .ohita-navigaatio { position: absolute; top: -100%; left: 0; background: var(--ajk-primary); color: var(--ajk-white); padding: 8px 16px; z-index: 9999; text-decoration: none; border-radius: 0 0 var(--ajk-radius-sm) 0; transition: top 0.2s; } .ohita-navigaatio:focus { top: 0; } img { max-width: 100%; height: auto; display: block; } a { color: var(--ajk-primary); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; } /* ===================================================== KONTAINERI ===================================================== */ .ajk-container { width: 100%; max-width: var(--ajk-container); margin-inline: auto; padding-inline: 20px; } @media (min-width: 768px) { .ajk-container { padding-inline: 32px; } } /* ===================================================== TYPOGRAFIA ===================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--ajk-font-sans); font-weight: 500; line-height: 1.2; color: var(--ajk-text); } h1 { font-size: 26px; } h2 { font-size: 22px; } h3 { font-size: 19px; } h4 { font-size: 17px; } @media (min-width: 768px) { h1 { font-size: 32px; } h2 { font-size: 26px; } h3 { font-size: 21px; } } @media (min-width: 1024px) { h1 { font-size: 36px; } h2 { font-size: 28px; } } p { margin-bottom: 1em; } p:last-child { margin-bottom: 0; } /* Pieni label-teksti */ .ajk-label { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: 1.2px; color: var(--ajk-text-secondary); text-transform: uppercase; } .ajk-label--sininen { color: var(--ajk-primary); } .ajk-label--keltainen { color: var(--ajk-accent-dark); } /* ===================================================== NAPIT ===================================================== */ .ajk-nappi { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border-radius: var(--ajk-radius-md); font-size: 15px; font-weight: 500; text-decoration: none; transition: opacity 0.15s, transform 0.15s; cursor: pointer; border: none; font-family: inherit; line-height: 1.4; } .ajk-nappi:hover { opacity: 0.88; text-decoration: none; transform: translateY(-1px); } .ajk-nappi:active { transform: translateY(0); } .ajk-nappi--keltainen { background: var(--ajk-accent); color: var(--ajk-accent-dark); } .ajk-nappi--sininen { background: var(--ajk-primary-dark); color: var(--ajk-white); } .ajk-nappi--lapinakyva { background: transparent; color: var(--ajk-white); border: 1px solid rgba(255, 255, 255, 0.5); } .ajk-nappi--lapinakyva:hover { border-color: var(--ajk-white); background: rgba(255, 255, 255, 0.08); } .ajk-nappi--kehys { background: transparent; color: var(--ajk-primary); border: 0.5px solid var(--ajk-primary-light); } /* ===================================================== RUUDUKKO-APULUOKAT ===================================================== */ .ajk-grid-2 { display: grid; grid-template-columns: 1fr; gap: 24px; } .ajk-grid-3 { display: grid; grid-template-columns: 1fr; gap: 20px; } .ajk-grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (min-width: 768px) { .ajk-grid-2 { grid-template-columns: 1fr 1fr; } .ajk-grid-3 { grid-template-columns: 1fr 1fr; } .ajk-grid-4 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .ajk-grid-3 { grid-template-columns: repeat(3, 1fr); } } /* ===================================================== BADGE / PILLERI ===================================================== */ .ajk-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 100px; font-size: 12px; font-weight: 500; line-height: 1.4; } .ajk-badge--sininen { background: var(--ajk-primary-bg); color: var(--ajk-primary-dark); } .ajk-badge--keltainen { background: rgba(250, 199, 117, 0.2); color: var(--ajk-accent-dark); } /* ===================================================== KORTTI ===================================================== */ .ajk-kortti { background: var(--ajk-white); border: 0.5px solid var(--ajk-border); border-radius: var(--ajk-radius-lg); overflow: hidden; } /* ===================================================== VIRHESIVU JA FALLBACK ===================================================== */ .ajk-ei-loytynyt { text-align: center; padding: 80px 20px; } .ajk-ei-loytynyt h1 { font-size: 64px; color: var(--ajk-primary-light); font-weight: 300; margin-bottom: 8px; }