/* ============================================================ user.css — Cassiopeia 5 ArcticAi 2026 Color Palette ============================================================ */ /* ============================================================ 0. KEVYT RESET — EI rikota moduuleja ============================================================ */ html, body { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; } /* ============================================================ CASSIOPEIA / BOOTSTRAP CARD OVERRIDE Poistaa borderin kaikista .card-elementeistä ============================================================ */ .card { border: none !important; box-shadow: none !important; } /* ============================================================ Offline-sivun header ja kortit, joissa on tumma tausta Kun ollaan offline-sivulla, vaihdetaan globaalin leipätekstin muuttujan arvo vaaleaksi ============================================================ */ .offline-card { --color-text-body: var(--color-text-light); } /* ============================================================ 1. GLOBAALIT VÄRIT (EI DARK MODEA) ============================================================ */ /* ============================================================ ARCTIC AI TEEMA – Syvä tummansininen paletti ============================================================ */ :root { /* ======================================================== CASSIOPEIA OVERRIDE ======================================================== */ --cassiopeia-color-primary: var(--color-button-bg); --cassiopeia-color-hover: var(--color-button-bg-hover); /* ======================================================== TAUSTAT ======================================================== */ --color-bg-page: #17577A; --color-bg-topbar: #216D97; --color-bg-footer: #216D97; /* Vaaleat sisältötaustat */ --color-bg-soft: #EEF8FF; /* ======================================================== TEKSTIT ======================================================== */ --color-text-main: #252525; --color-text-muted: #7FB4D9; --color-text-light: #ffffff; --color-text-body: var(--color-text-main); /* ======================================================== LINKIT ======================================================== */ --color-link: #7FB4D9; --color-link-hover: #A3C9E6; --color-link-visited: #7FB4D9; /* ======================================================== NAPIT ======================================================== */ --color-button-bg: #12395A; --color-button-bg-hover: #1A4A72; --color-button-text: #ffffff; --color-button-disabled-bg: rgba(255,255,255,0.12); --color-button-disabled-text: #8C9AA8; /* ======================================================== REUNAT JA VARJOT ======================================================== */ --color-border-soft: rgba(255,255,255,0.12); /* ======================================================== BURGER MENU ======================================================== */ --color-burger-link: var(--color-link); --color-burger-hover: var(--color-link-hover); --color-burger-active: var(--color-link-visited); --color-burger-bg-hover: #EEF8FF; --color-burger-bg-active: #D9EAF5; } /* ============================================================ 2. TYPOGRAFIA — GLOBAALI ============================================================ */ body { color: var(--color-text-body); /* Käyttää muuttujaa */ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: inherit; color: var(--color-text-body); /* Otsikot perivät saman */ font-weight: 600; } h1 { font-size: 2.1rem; } h2 { font-size: 1.8rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1.05rem; } h6 { font-size: 0.9rem; } p { font-size: 0.95rem; color: var(--color-text-body); /* Kappaleet käyttävät muuttujaa */ } small, span.small { font-size: 0.8rem; color: var(--color-text-muted); } /* ============================================================ 3. GLOBAALI LINKKITYYLI ============================================================ */ /* Normaali linkki */ a:not(.btn) { color: var(--color-link); text-decoration: none; font-weight: 600; } /* Hover */ a:not(.btn) :hover { color: var(--color-link-hover); text-decoration: underline; } /* Klikattu linkki (visited) */ a:not(.btn) :visited { color: var(--color-link-visited); } /* ============================================================ 4. BUTTONIT — GLOBAALI Perustyylit napeille ja linkkinapeille ============================================================ */ .btn, button, input[type="submit"], input[type="button"], input[type="reset"] { background-color: var(--color-button-bg); color: var(--color-button-text); border: 1px solid var(--color-button-bg); border-radius: 0.375rem; padding: 0.375rem 0.75rem; font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; display: inline-block; } .btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover { background-color: var(--color-button-bg-hover); border-color: var(--color-button-bg-hover); color: var(--color-button-text); } /* Link-buttons () */ a.btn { background-color: var(--color-button-bg) !important; border-color: var(--color-button-bg) !important; color: var(--color-button-text) !important; font-weight: 600 !important; display: inline-block !important; } a.btn:hover { background-color: var(--color-button-bg-hover) !important; border-color: var(--color-button-bg-hover) !important; color: var(--color-button-text) !important; } /* ============================================================ 4A BOOTSTRAP 5 BUTTON VARIANTS — TÄYSI OVERRIDE Yliajaa Cassiopeian sinisen + kaikki Bootstrap-värit ============================================================ */ /* Solid variants */ .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark, a.btn-primary, a.btn-secondary, a.btn-success, a.btn-danger, a.btn-warning, a.btn-info, a.btn-light, a.btn-dark { background-color: var(--color-button-bg) !important; border-color: var(--color-button-bg) !important; color: var(--color-button-text) !important; /* Override Bootstrap + Cassiopeia CSS variables */ --bs-btn-bg: var(--color-button-bg) !important; --bs-btn-border-color: var(--color-button-bg) !important; --bs-btn-color: var(--color-button-text) !important; --bs-btn-hover-bg: var(--color-button-bg-hover) !important; --bs-btn-hover-border-color: var(--color-button-bg-hover) !important; --bs-btn-hover-color: var(--color-button-text) !important; } .btn-primary:hover, .btn-secondary:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover, .btn-light:hover, .btn-dark:hover, a.btn-primary:hover, a.btn-secondary:hover, a.btn-success:hover, a.btn-danger:hover, a.btn-warning:hover, a.btn-info:hover, a.btn-light:hover, a.btn-dark:hover { background-color: var(--color-button-bg-hover) !important; border-color: var(--color-button-bg-hover) !important; color: var(--color-button-text) !important; } /* Outline variants */ .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-light, .btn-outline-dark, a.btn-outline-primary, a.btn-outline-secondary, a.btn-outline-success, a.btn-outline-danger, a.btn-outline-warning, a.btn-outline-info, a.btn-outline-light, a.btn-outline-dark { color: var(--color-button-bg) !important; border-color: var(--color-button-bg) !important; --bs-btn-color: var(--color-button-bg) !important; --bs-btn-border-color: var(--color-button-bg) !important; --bs-btn-hover-bg: var(--color-button-bg) !important; --bs-btn-hover-border-color: var(--color-button-bg) !important; --bs-btn-hover-color: var(--color-button-text) !important; } .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-warning:hover, .btn-outline-info:hover, .btn-outline-light:hover, .btn-outline-dark:hover, a.btn-outline-primary:hover, a.btn-outline-secondary:hover, a.btn-outline-success:hover, a.btn-outline-danger:hover, a.btn-outline-warning:hover, a.btn-outline-info:hover, a.btn-outline-light:hover, a.btn-outline-dark:hover { background-color: var(--color-button-bg) !important; border-color: var(--color-button-bg) !important; color: var(--color-button-text) !important; } /* ============================================================ 6. HEADER ============================================================ */ .container-header { background-color: var(--color-bg-page) !important; background-image: none !important; position: sticky; top: 0; z-index: 9999; padding: 20px 0; transition: padding 0.25s ease, box-shadow 0.25s ease; } body.header-shrink .container-header { padding: 6px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.15); } @media (min-width: 992px) { .container-header .navbar { display: flex !important; justify-content: center !important; width: 100% !important; } .container-header .mod-menu { display: flex !important; justify-content: center !important; align-items: center !important; gap: 30px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; text-align: center !important; } .container-header a, .container-header .nav-link, .container-header .mod-menu li a { color: #212529 !important; font-weight: 600 !important; } } /* ============================================================ ARCTICAI NAVI — toimii Cassiopeian headerissa ============================================================ */ @media (min-width: 992px) { .container-header .container-nav .mod-menu > li > a { color: var(--color-link) !important; font-weight: 600 !important; font-size: 1rem !important; padding: 8px 4px !important; text-decoration: none !important; } .container-header .container-nav .mod-menu > li > a:hover, .container-header .container-nav .mod-menu > li > a:focus { color: var(--color-link-hover) !important; } .container-header .container-nav .mod-menu > li.current > a, .container-header .container-nav .mod-menu > li.active > a { color: var(--color-link) !important; } } /* ============================================================ 8. MOBIILIVALIKKO — BURGER MENU (korjattu keskitys + spacing) ============================================================ */ @media (max-width: 991.98px) { .container-header .navbar { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; } .container-header .navbar-collapse { background-color: #ffffff !important; padding: 0px 0 !important; /*poistetaan kaikki välit ympäriltä*/ margin-top: 5px !important; /*väli itse burger ikonin ja avautuvan valikon välissä*/ border-top: 1px solid rgba(0,0,0,0.1); width: 100% !important; border-radius: 5px !important; /* kulmien pyöristys */ } .container-header .navbar-collapse ul.mod-menu { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; padding-left: 0 !important; margin: 0 auto !important; gap: 0 !important; } .container-header .navbar-collapse ul.mod-menu li { width: 100% !important; text-align: center !important; } .container-header .navbar-collapse ul.mod-menu li a { color: var(--color-burger-link) !important; font-size: 1.1rem !important; font-weight: 600 !important; padding: 5px 10px !important; /* ★ tasaisempi spacing */ display: block !important; text-decoration: none !important; transition: all 0.25s ease !important; border-radius: 5px !important; /* kulmien pyöristys */ text-align: center !important; /* ★ keskitys */ justify-content: center !important; /* ★ keskitys flexissä */ } /* Hover */ .container-header .navbar-collapse ul.mod-menu li a:hover { background-color: var(--color-burger-bg-hover) !important; color: var(--color-burger-hover) !important; } /* Active */ .container-header .navbar-collapse ul.mod-menu li.current > a, .container-header .navbar-collapse ul.mod-menu li.active > a { background-color: var(--color-burger-bg-active) !important; color: var(--color-burger-active) !important; } /*BURGER-IKONI*/ .container-header .navbar-toggler-icon, .container-header button.navbar-toggler * { display: none !important; opacity: 0 !important; visibility: hidden !important; } .container-header button.navbar-toggler { display: inline-block !important; width: 44px !important; height: 38px !important; border: 2px solid var(--color-burger-link) !important; border-radius: 4px !important; cursor: pointer !important; background-color: transparent !important; background-image: none !important; position: relative !important; padding: 0 !important; } .container-header button.navbar-toggler::before { content: "" !important; display: block !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 22px !important; height: 2.5px !important; background-color: var(--color-burger-link) !important; box-shadow: 0 -7px 0 var(--color-burger-link), 0 7px 0 var(--color-burger-link) !important; } .container-header button.navbar-toggler::after { display: none !important; } } .container-header button.navbar-toggler:hover::before { background-color: var(--color-burger-hover) !important; box-shadow: 0 -7px 0 var(--color-burger-hover), 0 7px 0 var(--color-burger-hover) !important; transition: all 0.25s ease-in-out !important; } .container-header button.navbar-toggler:hover { color: var(--color-burger-hover) !important; } /* ============================================================ 10C: INTERACTION STATES Active, Focus, and Disabled tilat napeille ============================================================ */ /* Active State */ .btn:active, button:active, input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active, a.btn:active { background-color: var(--color-button-bg-hover); border-color: var(--color-button-bg-hover); opacity: 0.85; } /* Focus State - Remove Bootstrap's default focus ring (Cassiopeia compatibility) */ .btn:focus, button:focus, input[type="submit"]:focus, input[type="button"]:focus, input[type="reset"]:focus, a.btn:focus { outline: none !important; box-shadow: none !important; } /* Disabled State - All Buttons */ .btn:disabled, button:disabled, input[type="submit"]:disabled, input[type="button"]:disabled, input[type="reset"]:disabled, a.btn:disabled { background-color: var(--color-button-disabled-bg) !important; border-color: var(--color-button-disabled-bg) !important; color: var(--color-button-disabled-text) !important; opacity: 0.6; cursor: not-allowed; } /* ============================================================ 11: MOBILE TOUCH TARGET - Bootstrap 5 mobile ============================================================ */ @media (max-width: 767.98px) { .btn, button, input[type="submit"], input[type="button"], input[type="reset"], a.btn { min-height: 2.5rem; min-width: 2.5rem; padding: 0.5rem 1rem; } } /* --- 12. MOBIILI-OPTIMOINTI — EI MUUTA VÄREJÄ, EI MUUTA MITÄÄN MUUTA --- */ @media (max-width: 768px) { /* Cassiopeia lisää mobiilissa valkoisen card-body taustan → poistetaan */ .mod-bg-soft .card-body { background-color: #FFF8F3 !important; /* sama väri kuin desktop */ } /* Varmistetaan että card wrapper ei vuoda valkoista */ .mod-bg-soft.card, .mod-bg-soft .card { background-color: #FFF8F3 !important; } } /* ============================================================ BOTTOM-B – moduulipaikkakohtainen täysleveys ============================================================ */ /* Täysleveä bottom-b grid-child */ .grid-child.container-bottom-b { width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; position: relative; left: 50%; transform: translateX(-50%); } /* Poistetaan kortin valkoinen tausta ja min-height */ .grid-child.container-bottom-b .bottom-b.card { background: transparent !important; min-height: 0 !important; line-height: 0 !important; border: none !important; box-shadow: none !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; } /* Poistetaan card-body sisäinen väli */ .grid-child.container-bottom-b .bottom-b.card .card-body { background: transparent !important; min-height: 0 !important; line-height: 0 !important; padding: 0 !important; margin: 0 !important; }