/* SITE styles */ /* MAIN BODY ELEMENTS */ body { box-sizing: border-box; /* include padding in width calculation */ height: 100%; margin: 0; background-color: #f8f6f4; /* warm off-white to complement forest */ padding: 20px 0; /* vertical padding only */ padding-top: env(safe-area-inset-top, 20px); overflow-x: hidden; /* prevent horizontal scrolling */ font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; text-align: center; color: #3d3530; /* warm dark brown for text */ } body, .transitioning #transitionContent { background-image: url("./images/mos/background.png"); background-repeat: repeat-y; background-position: top center; background-size: 100% auto; } body.transitioning { background-image: none; overflow-y: hidden; } /* during a transition, the fixed bottom right class is inside #transitionContent */ #fixedToBody, .transitioning #fixedDuringTransition { z-index: 2000; position: fixed; right: 0; bottom: 0; background-image: url("./images/mos/page-corner.png"); background-repeat: no-repeat; background-position: center; background-size: 100%; padding: 60px; } #fixedToBody { opacity: 1; } .transitioning #fixedToBody { opacity: 0; } #fixedDuringTransition { z-index: 1999; display: none; background-image: url("./images/mos/page-corner-transition.png"); } .transitioning #fixedDuringTransition { display: block; } /* here is the actual transition */ .transitioning #transitionContent { position: absolute; width: 100%; height: 100%; overflow: hidden; animation: contentTransition 3s ease; } #transitionOverlay { z-index: 3000; position: absolute; top: 50%; left: 50%; display: none; overflow: hidden; opacity: 0; transform: translate(-50%, -50%); } .transitioning #transitionOverlay { display: block; animation: overlayTransition 3s ease; } /* prettier-ignore */ @keyframes contentTransition { /* slide content to top left */ 0% { transform: translate(0,0); } 4% { opacity: 1; transform: translate(0,0); } 60% { opacity: 0; transform: translate(-100%,-100%); } 60.00001% { opacity: 0; transform: translate(50%,50%); } 100% { opacity: 1; transform: translate(0%, 0%); } } /* prettier-ignore */ @keyframes overlayTransition { /* fade in */ 0% { opacity: 0; } 12% { opacity: 0; } 28% { opacity: 1; } 65% { opacity: 1; } 86% { opacity: 0; } 100% { opacity: 0; } } /* format the fixed-bottom-right */ #fixedToBody > div:first-child, #fixedDuringTransition > div:first-child { position: absolute; right: 4px; bottom: 12px; padding: 35px 4px 4px 30px; } /* on mobile always use a special non-transparent picture */ .mosIsMobile .fixed-bottom-right > div:first-child { opacity: 1; } /* MENU AND BUTTONS */ .menu-container { box-sizing: border-box; width: 100%; margin: 15px 0; padding: 0 20px; transition: all 0.3s; } .button-container { z-index: 10; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 15px; box-sizing: border-box; width: 100%; margin: 10px 0; padding: 0 10px; transition: all 0.3s; } .menu { display: flex; flex-flow: row wrap; justify-content: center; gap: 15px; box-sizing: border-box; width: 100%; margin: 0 auto; } .button-behavior, .menu-item, .site-button, .styled-link { cursor: pointer; opacity: 0.9; transition: all 0.25s; } .menu-item, .site-button { box-sizing: border-box; margin: 0; border: 2px solid rgba(139, 125, 107, 0.8); /* warm brown-gray border */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* softer shadow for light theme */ background-color: rgba(242, 237, 230, 0.9); /* warm birch bark cream */ font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.2; text-decoration: none; white-space: nowrap; /* prevent text wrapping */ color: #3d3530; /* warm dark brown text */ } .menu-item { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; min-width: 200px; max-width: 250px; height: auto; max-height: 60px; border-radius: 8px; padding: 4px 10px; } .site-button { position: relative; flex-shrink: 1; /* allow buttons to shrink if needed */ min-width: 120px; border-radius: 30px; padding: 8px 19px; } .styled-link { display: inline-block; margin: 8px; background-size: cover; background-position: center; background-repeat: no-repeat; /* Shadow follows the image shape, not the box */ filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15)); } html:not(.mosIsMobile) .menu-item:hover, html:not(.mosIsMobile) .site-button:hover, .menu-item:active, .site-button:active { border-color: #8b7d6b; /* solid warm brown-gray */ box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); background-color: #ede6dc; /* slightly darker warm cream on hover */ opacity: 1; } html:not(.mosIsMobile) .button-behavior:hover, .button-behavior:active { opacity: 1; } html:not(.mosIsMobile) .menu-item:active, html:not(.mosIsMobile) .site-button:active, html:not(.mosIsMobile) .button-behavior:active, html:not(.mosIsMobile) .styled-link:active { transform: translateY(1px); } .menu-item.disabled, .site-button.disabled, .styled-link.disabled { cursor: default; pointer-events: none; /* do not react to clicks */ filter: drop-shadow(0); opacity: 0.25 !important; /* important necessary for Firefox */ transform: none !important; /* important necessary for Firefox */ } .styled-link:hover { filter: drop-shadow(0 3px 6px rgba(165, 130, 80, 0.8)); /* dark burlywood */ opacity: 1; } .menu-title { margin-bottom: 2px; font-size: 15px; line-height: 1.2; } .menu-sub { margin: 0; font-size: 11px; line-height: 1; opacity: 0.7; /* slightly more visible on light background */ } /* small mobile device optimizations */ @media (max-width: 768px) { .mosIsMobile .menu { gap: 10px; } .mosIsMobile .menu-item { min-width: 250px; max-width: 90%; padding: 8px 15px; font-size: 16px; } .mosIsMobile .site-button { padding: 12px 24px; font-size: 16px; } .mosIsMobile .menu-title { font-size: 18px; } .mosIsMobile .menu-sub { font-size: 13px; } } @media (max-width: 480px) { .mosIsMobile .button-container { flex-direction: row; /* force row direction even on small screens */ justify-content: center; padding: 0 5px; } .mosIsMobile .site-button { min-width: 0; /* allow buttons to be smaller on mobile */ padding: 10px 15px; font-size: 14px; } } /* for standalone web app mode specifically */ @media (display-mode: standalone) { .mosIsMobile .button-container { flex-direction: row !important; /* force row layout in standalone mode */ } } /* languages */ html:not(.en) div.en, html:not(.en) span.en { display: none; } html:not(.nl) div.nl, html:not(.nl) span.nl { display: none; } /* hidden SEO content */ .hidden-seo-image { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); } .seo-content { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; color: transparent; clip: rect(0, 0, 0, 0); } /* TYPOGRAPHY */ h1, h2, h3, h4, h5, h6, p, li { text-align: left; margin: 15px 10%; } li { margin: 6px 10%; } h1, h2 { font-family: "Bodoni 72 Oldstyle", "Bodoni 72", Didot, "Times New Roman", serif; font-weight: normal; line-height: 1.2; color: #3d3530; margin-top: 30px; } h1 { font-size: 2.5rem; letter-spacing: -0.02em; } h2 { font-size: 2rem; letter-spacing: -0.01em; } h3, h4, h5, h6 { font-weight: bold; line-height: 1.3; color: #3d3530; } h1, h3, h4, h5, h6 { font-variant: small-caps; } /* Regular paragraph links */ p a, li a, section a { color: #5a4d3a; /* Warm brown-gray */ font-weight: bold; text-decoration: underline; text-decoration-color: rgba(139, 125, 107, 0.85); /* Subtle underline */ transition: all 0.3s ease; } /* Hover state */ html:not(.mosIsMobile) p a:hover, html:not(.mosIsMobile) li a:hover, html:not(.mosIsMobile) section a:hover { color: #3d3530; /* Darker brown on hover */ text-shadow: 0 0 3px rgba(222, 184, 135, 0.8); /* light Burlywood color */ } /* Active state */ p a:active, li a:active, section a:active { color: #000000; text-decoration-color: #000000: } /* Add a subtle external link indicator */ /* Excludes anchors with .styled-link class and visited links */ a[target="external-sites"]:not(.styled-link)::after, a[target="_blank"]:not(.styled-link)::after { content: "\00A0\29C9"; /* \00A0 is a non-breaking space, ⧉ is Two joined squares (new window) */ filter: drop-shadow(0px 0px 1px rgba(165, 130, 80, 0.3)); /* dark Burlywood color */ } a[href^="tel:"] { font-size: 0.9em; } a[href^="tel:"]:not(.styled-link)::before { content: "\1F4DE\00A0"; /* \260E = ☎ telephone, \1F4DE = 📞 */ font-size: 0.8em; filter: drop-shadow(0px 0px 2px rgba(165, 130, 80, 1)); } a[href^="mailto:"]:not(.styled-link)::before { content: "\2709\00A0"; /* ✉ envelope with thin space */ font-size: 0.9em; filter: drop-shadow(0px 0px 2px rgba(165, 130, 80, 1)); /* this reveals the nearly invisible icon on iOS */ } /* END OF SITE STYLES (c)2025 Master Object AB */