/* ========================================================= digiasiat.fi — shared stylesheet Finnish-flag blue theme, lightweight, no external deps ========================================================= */ :root{ --blue-900:#00205B; --blue-800:#002F6C; --blue-700:#003580; --blue-600:#0046A6; --blue-500:#0B5FCC; --blue-100:#EAF2FB; --blue-50:#F5F9FE; --white:#FFFFFF; --ink:#151B26; --ink-soft:#4A5568; --border:#DDE6F2; --hover-grey:#E4E9F1; /* hover fill for any white/near-white clickable, so it's clearly visible */ --success:#1E8E5A; --danger:#C0392B; --warn:#B7791F; --radius:14px; --radius-sm:8px; --shadow:0 4px 18px rgba(0,47,108,.10); --shadow-lg:0 12px 34px rgba(0,32,91,.16); --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* 18px, not the more common 16px default — our customers are mostly seniors, and everything still scales from here via the A−/A+ text-size control in the Accessibility menu (0.8x–1.6x on top of this base). */ --base-size:18px; --maxw:1180px; /* Surface tokens: the page background and "card" backgrounds used to be plain #fff everywhere. They're now variables so dark mode (below) can swap them for a dark surface without having to touch every rule. */ --page-bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5F9FE; } *,*::before,*::after{box-sizing:border-box} /* overflow-x:hidden on both html and body is a safety net for Google's translate widget (see main.js): several labels/buttons across the site are deliberately white-space:nowrap so short Finnish/English/selko text stays on one line, but a translated language (Russian, Persian, etc.) can be noticeably longer and push one of those elements wider than its box. Without this, that single overflowing element widened the whole page and put a horizontal scrollbar under everything — this clips any such overflow at the viewport edge instead, without touching normal (untranslated) layout at all. Elements that intentionally scroll sideways (.table-wrap, code blocks) keep their own overflow-x:auto, which still works independently of this. */ html{font-size:var(--base-size); scroll-behavior:smooth; overflow-x:hidden} body{ margin:0; font-family:var(--font); color:var(--ink); background:var(--page-bg); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} /* Deliberately NOT display:block on svg — every raw ... Mark English text ... Body gets class "lang-mode-fi" (default) or "lang-mode-en" via JS. */ /* Default (Finnish) state: .lang-fi visible inline, .lang-en hidden. Only ever put these classes on inline-level elements (span, a) — for table cells / list markers, put the spans INSIDE the cell/li instead. NOTE: the body's own language marker uses "lang-mode-fi"/"lang-mode-en" (a DIFFERENT name) precisely so it never collides with this class-based show/hide selector — body must never carry plain "lang-en"/"lang-fi". */ .lang-en{display:none} body.lang-mode-en .lang-fi{display:none} body.lang-mode-en .lang-en{display:inline} /* Round 45: Russian, Persian and Swedish became real native languages with their own hand-written .lang-ru/.lang-fa/.lang-sv content, on the exact same show/hide pattern as .lang-en above (hidden by default; each one's lang-mode-* class hides .lang-fi and shows its own). Persian's right-to-left layout is handled separately, via the html[dir="rtl"] rules further down plus applyPageDirection() in main.js — nothing extra needed here for that. */ .lang-ru{display:none} .lang-fa{display:none} .lang-sv{display:none} body.lang-mode-ru .lang-fi{display:none} body.lang-mode-ru .lang-ru{display:inline} body.lang-mode-fa .lang-fi{display:none} body.lang-mode-fa .lang-fa{display:inline} body.lang-mode-sv .lang-fi{display:none} body.lang-mode-sv .lang-sv{display:inline} /* selko-Suomi (plain-language Finnish): a genuine third mode, additive to the two rules above so fi/en are completely untouched. Mark simplified text ... as a third sibling alongside .lang-fi/.lang-en for any block that's been rewritten in plain language. Where no .lang-selko sibling exists yet, main.js's applySelkoFallback() adds a "selko-fallback" class to that block's .lang-fi span so selko mode still shows readable (if not yet simplified) Finnish instead of nothing — see the comment above that function. */ .lang-selko{display:none} body.lang-mode-selko .lang-en{display:none} body.lang-mode-selko .lang-fi{display:none} body.lang-mode-selko .lang-fi.selko-fallback{display:inline} body.lang-mode-selko .lang-selko{display:inline} /* Russian correction layer (see applyRussianFixLayer() in main.js): a hand-written, correct-Russian sibling for a handful of specific spots, next to the existing .lang-fi/.lang-en pair. Hidden by default (fi/en still shown, as normal); main.js reveals it — and hides its fi/en siblings — only while Russian is the active Google Translate language. translate="no" keeps Google's widget from re-translating it back to the wrong wording once it's shown. */ .lang-ru-fix{display:none} /* Accessibility helpers */ .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} :focus-visible{outline:3px solid var(--blue-500);outline-offset:2px} /* Toast */ .toast{ position:fixed;left:50%;transform:translateX(-50%);bottom:90px;background:var(--blue-900);color:#fff; padding:12px 20px;border-radius:999px;z-index:500;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.25s; } .toast.show{opacity:1} /* Responsive */ @media (max-width:960px){ .hero-content{max-width:none} .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} .cal-wrap{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} } @media (max-width:720px){ /* .main-nav / .nav-toggle are the unified Menu drawer now — it already behaves the same way (fixed off-canvas panel, single toggle button) at every width, so nothing extra is needed for it here. */ .grid-3,.grid-4,.grid-2{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .hero h1{font-size:1.9rem} .chat-panel{inset-inline-end:10px} .chat-fab{inset-inline-end:66px} } /* ============ MAP (Yhteystiedot / Location) ============ */ #siteMap{position:relative} .digiasiat-map-label{ background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:4px 10px; font-weight:700;font-size:.82rem;color:var(--blue-900);box-shadow:var(--shadow); white-space:nowrap; } .digiasiat-map-label::before{border-top-color:var(--surface)} .directions-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px} .direction-chip{ display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px; background:var(--blue-50);border:1px solid var(--blue-100);color:var(--blue-800); font-weight:700;font-size:.88rem;text-decoration:none; } .direction-chip:hover{background:var(--blue-100);border-color:var(--blue-500)} .direction-icon{font-size:1.1rem} /* ============ DARK MODE ============ Toggled by JS (body.dark-mode), chosen from the Accessibility menu. "System" (the default) resolves to light or dark once in JS by checking prefers-color-scheme, then applies/removes this same class — so this file only ever needs to style ONE explicit state, not three. Most of the site already reads its colours from the variables below, so re-pointing a handful of them here re-colours the whole page. The remaining fixes are for spots that used a blue-700/800/900 shade directly as TEXT on what is now a dark surface (that navy text would otherwise vanish into the dark background) — those get one shared light-blue accent colour instead. */ /* Matched against html.dark-mode too, not just body.dark-mode: a tiny blocking script at the very top of (before body even exists) sets that class on immediately from the saved preference, so these variables — which repaint almost the entire page — are already correct before first paint. Without it, the page always painted light first and then flipped dark a moment after main.js ran, which is the "blinking and changing" Susanna reported on every page load/navigation when dark mode was active. main.js keeps both the html and body classes in sync from then on (the finer body.dark-mode-only selectors below still need the body class specifically). */ :where(html.dark-mode, body.dark-mode){ --page-bg:#10161C; --surface:#1B2330; --surface-2:#212B3E; --ink:#E7ECF4; --ink-soft:#A9B4C7; --border:#33405A; --hover-grey:#26314A; --blue-50:#16202E; --blue-100:#1C2A3D; } body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,body.dark-mode h4, body.dark-mode .logo, body.dark-mode .main-nav a:hover,body.dark-mode .main-nav a.active, body.dark-mode .primary-nav a:hover,body.dark-mode .primary-nav a.active, body.dark-mode .nav-contact-toggle,body.dark-mode .nav-contact-panel a:hover, body.dark-mode .icon-btn,body.dark-mode .nav-toggle, body.dark-mode .search-close, body.dark-mode .card .icon,body.dark-mode .card .price, body.dark-mode .tag,body.dark-mode .cond-almost-new, body.dark-mode legend, body.dark-mode .pay-icons span, body.dark-mode .account-tabs button.active, body.dark-mode .price-edit-btn:hover, body.dark-mode .digiasiat-map-label, body.dark-mode .chat-suggestion, body.dark-mode .direction-chip{ color:#9FC7FF; } /* Photos/diagrams/PDF thumbnails can look harsh at full brightness on a dark page — a small, standard dark-mode dimming, skipped for anything explicitly marked as already theme-aware (none currently) or for the admin's own edit-mode thumbnails where exact colour matters. */ body.dark-mode img:not(.no-dim){filter:brightness(.92) contrast(1.02)} /* Plain text links (the default a{color:var(--blue-600)} from near the top of this file) and the outline-button variant both used a navy shade that was only ever tested against the light page background — low contrast once the surface behind them goes dark. :where() keeps this at zero specificity so it never fights a real button's own color:var(--white) (many buttons are ) — only plain links pick it up. */ :where(body.dark-mode) a{color:#9FC7FF} body.dark-mode .btn-outline{color:#9FC7FF;border-color:#9FC7FF} body.dark-mode .chat-note a, body.dark-mode .price-edit-btn, body.dark-mode .logo .dot, body.dark-mode .product-card .ph{color:#9FC7FF} /* .btn-white keeps a literal white pill (its background/border are the unthemed --white, on purpose, so it still reads as a "white button" over a colour hero image in dark mode too) — but its :hover used the themed --hover-grey, which in dark mode is a dark navy, so the unthemed var(--blue-700) text became dark-on-dark and vanished (reported as the invisible "Varaa aika"/"Tallenna" hover text). Give it its own light hover shade instead of the page's themed hover colour. */ body.dark-mode .btn-white:hover{background:#D7E3F7;border-color:#D7E3F7;color:var(--blue-800)} /* Day-number buttons in the booking calendar and the qty +/- buttons both sit on the themed --surface/--hover-grey backgrounds but never had their own text colour set, so they inherited plain black — invisible on the dark-mode navy surface. */ body.dark-mode .cal-day:not(.disabled), body.dark-mode .qty-row button{color:#9FC7FF} body.dark-mode .cal-day.selected,body.dark-mode .cal-day.selected:hover{color:#fff} /* In light mode, an available day (--surface, white) is already lighter than a past/disabled day (--hover-grey, light grey) — that relationship flips in dark mode because the same two variables happen to invert (--surface is the darker of the two there), so past days looked lighter than available ones. Restore the same "available = lighter, past = darker/receded" relationship in dark mode too. */ body.dark-mode .cal-day:not(.disabled):not(.selected){background:var(--surface-2);border-color:var(--surface-2)} body.dark-mode .cal-day.disabled{background:var(--page-bg);border-color:var(--page-bg)} /* .link-btn-plain (tili.html "Unohditko salasanan?" and yhteystiedot.html's admin phone-change link) used to hardcode navy as an inline style, which likewise disappeared on the dark-mode surface behind it. */ body.dark-mode .link-btn-plain{color:#9FC7FF} /* ============ HIGH CONTRAST MODE ============ A stronger, plainer look for reduced vision: heavier borders everywhere (including on things that normally rely on shadow alone), no soft/muted greys, solid instead of translucent fills. Works together with dark mode (high-contrast dark) or on its own (high-contrast light). */ body.high-contrast{ --ink-soft:var(--ink); /* no pale grey text — everything reads at full strength */ --shadow:0 0 0 1px var(--ink); --shadow-lg:0 0 0 2px var(--ink); } body.high-contrast .card, body.high-contrast .site-header, body.high-contrast input,body.high-contrast textarea,body.high-contrast select, body.high-contrast .btn-outline, body.high-contrast table, body.high-contrast .cal-day,body.high-contrast .slot, body.high-contrast .chat-panel,body.high-contrast .modal-box,body.high-contrast .cookie-modal-box{ border-width:2px; } body.high-contrast .btn{border-width:2px} body.high-contrast a{text-decoration:underline} body.high-contrast :focus-visible{outline-width:4px} /* Respect the visitor's OS-level "reduce motion" setting sitewide — this site already keeps animation minimal, but the few that exist (the goal-card highlight pulse, hover transforms, etc.) should stop moving entirely for anyone who has asked their system for that, rather than only being "not too much". */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } /* ============ ABOUT-ME PHOTO UPLOAD (edit mode) ============ */ .about-photo-wrap{position:relative;flex:none} .about-photo-wrap img{border-radius:12px;border:1px solid var(--border)} .photo-upload-btn{ position:absolute;bottom:-10px;left:50%;transform:translateX(-50%); background:var(--blue-700);color:#fff;border:2px solid var(--surface);border-radius:999px; padding:5px 12px;font-size:.72rem;font-weight:700;cursor:pointer;white-space:nowrap; box-shadow:var(--shadow);display:none; } body.edit-mode .photo-upload-btn{display:inline-flex;align-items:center;gap:4px} .photo-upload-btn:hover{background:var(--blue-800)} /* ============ "STILL NEED HELP?" + PAGE-FEEDBACK BLOCK ============ Auto-inserted at the end of any page whose has data-help-block — so a person who has just read a whole help/guide/situation-check page always finds "talk to someone" and "was this useful" right there, instead of having to go hunting for the Contact page separately. */ .help-feedback-block{ margin:36px auto 0;max-width:720px;padding:22px;border:1px solid var(--border); border-radius:12px;background:var(--surface-2);text-align:center; } .help-feedback-block h3{margin:0 0 6px;font-size:1.15rem} .help-feedback-block p{margin:0 0 14px;color:var(--ink-soft)} .help-feedback-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:18px} .help-feedback-divider{border:none;border-top:1px solid var(--border);margin:18px 0} .page-feedback-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap} .page-feedback-row span{color:var(--ink-soft);font-size:.95rem} .page-feedback-btn{ background:var(--surface);border:1px solid var(--border);border-radius:8px; padding:7px 16px;font-size:1rem;cursor:pointer;font-family:inherit;color:var(--ink); } .page-feedback-btn:hover{background:var(--hover-grey)} .page-feedback-btn.chosen{background:var(--blue-100);border-color:var(--blue-600)} body.dark-mode .page-feedback-btn.chosen{background:rgba(159,199,255,.18);border-color:#9FC7FF} /* Small live "open now / closed now" status chip next to opening hours */ .hours-status{ display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.85rem; padding:2px 10px;border-radius:999px;margin-inline-start:8px;white-space:nowrap; } .hours-status.open{background:#DFF3E8;color:#146C43} .hours-status.closed{background:var(--hover-grey);color:var(--ink-soft)} body.dark-mode .hours-status.open{background:rgba(46,204,113,.18);color:#6FE3A6} body.dark-mode .hours-status.closed{background:rgba(255,255,255,.08);color:var(--ink-soft)} .hours-status .dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block} /* ============ BREADCRUMB + BACK ============ "Never make people wonder how to return" + "always show where they are" — on every page except the homepage. Injected by JS right after the header, so no page's HTML needs a placeholder for it. */ .breadcrumb-bar{background:var(--surface-2);border-bottom:1px solid var(--border)} .breadcrumb-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:9px 20px} .breadcrumb-back{ background:var(--surface);border:1px solid var(--border);border-radius:8px; padding:5px 12px;cursor:pointer;font-weight:700;color:var(--ink);font-size:.85rem; display:inline-flex;align-items:center;gap:4px; } .breadcrumb-back:hover{background:var(--hover-grey)} .breadcrumb-path{font-size:.85rem;color:var(--ink-soft);display:flex;gap:6px;align-items:center;flex-wrap:wrap} .breadcrumb-path a{color:var(--blue-700);font-weight:600} body.dark-mode .breadcrumb-path a{color:#9FC7FF} /* ============ PERSISTENT HELP BUTTON (not just the AI chat) ============ */ /* bottom:20px — level with .back-to-top and .chat-fab on the right (both also bottom:20px), per Susanna's request to have all three floating buttons share the same bottom-most row instead of Help sitting alone on a higher line. (.edit-fab shares this same inset-inline-start:20px/ bottom:20px spot, but only ever shows in edit mode, which store staff use — not visitors — so the two never actually appear at the same time.) inset-inline-start (not "left") so this leading-corner button swaps to the physical left/right along with the rest of the FAB cluster once the page reads right-to-left. */ .help-fab-wrap{position:fixed;inset-inline-start:20px;bottom:20px;z-index:150} .help-fab{ background:var(--danger);color:#fff;border:none;border-radius:999px; padding:10px 16px;font-size:.85rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow-lg); display:flex;align-items:center;gap:6px; } .help-fab:hover{filter:brightness(1.08)} .help-menu{ display:none;position:absolute;bottom:calc(100% + 8px);inset-inline-start:0;min-width:230px; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow-lg);padding:8px; } .help-menu.open{display:block} .help-menu a,.help-menu button{ display:flex;align-items:center;gap:8px;width:100%;text-align:start; background:none;border:none;padding:9px 10px;border-radius:8px;cursor:pointer; font-size:.88rem;font-weight:600;color:var(--ink);text-decoration:none; } .help-menu a:hover,.help-menu button:hover{background:var(--hover-grey);text-decoration:none} /* ============ GLOSSARY TOOLTIPS ("I don't know what this means") ============ */ .glossary-term{ border-bottom:1.5px dotted var(--blue-500);cursor:help;font-weight:600;position:relative; } .glossary-term:hover,.glossary-term:focus{background:var(--blue-50)} .glossary-term .glossary-tip{ display:none;position:absolute;inset-inline-start:0;bottom:calc(100% + 8px);z-index:60; background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:10px; box-shadow:var(--shadow-lg);padding:10px 14px;font-weight:400;font-size:.85rem; width:min(280px,80vw);white-space:normal;line-height:1.4;cursor:auto; } .glossary-term.open .glossary-tip, .glossary-term:hover .glossary-tip, .glossary-term:focus .glossary-tip, .glossary-term:focus-within .glossary-tip{display:block} /* ============ "WHAT DO YOU WANT TO DO?" GOAL BUTTONS ============ */ .goal-section{padding:36px 0} .goal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px} .goal-btn{ display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:22px 12px;text-decoration:none;color:var(--ink);font-weight:700;font-size:1rem; box-shadow:var(--shadow);transition:.15s ease; /* Some goal buttons are a