:root{ --green: #1c8249; --green-dark: #1a623a; --yellow: #fad514; --red: #ec202a; --blue: #0482ee; --lighter: rgba(255,255,255,.05); --lightest: rgba(255,255,255,.5); --darker: rgba(0,0,0,.05); --white: #fff; --black:#000; --grey: #F8F9FA; --dark-grey: #efefef; --darker-grey: rgb(63 73 64) } /*rebrand*/ :root { --color-primary: #00806f; /* Deep Teal */ --color-primary-light: #92cdc6; /* Medium Teal (used in icons/links) */ --color-primary-hover: #00524b; /* Darker shade for hover states */ --color-primary-light2: #b9dfda; /* */ --color-accent: #e64b25; /* Vibrant Coral/Orange */ --color-accent-hover: #c4391a; /* Darker orange for hover */ --color-bg-main: #dbeeec; /* Very soft mint/teal gray */ --color-surface: #ffffff; /* Pure White for cards/containers */ --color-text-dark: #4c4c4c; /* Charcoal/Off-Black */ --color-text-muted: #555555; /* Medium Gray for secondary text */ --color-text-light: #ffffff; /* White for dark backgrounds */ --color-border: #ccdcd9; /* Light gray-teal for borders */ } /*rebrand*/ /*override UsomeBuzz*/ /* 1. Kill their global font hijack and reset margins/transitions */ * { font-family: inherit; /* Falls back to whatever font you set on or */ letter-spacing: normal; /* Removes their tight letter spacing */ transition: none; /* Stops everything on your site from lagging/animating on load */ } /* 2. Fix the global image breaking rule */ img { width: auto; /* Restores default image width behavior */ max-width: 100%; /* Keeps images responsive without stretching small icons to 100% */ } /*override UsomeBuzz*/ html, body { /*overflow-x: hidden;*/ } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Barlow", sans-serif; color:var(--color-primary)!important; } body:not(.modal-open){ padding-right: 0px !important; } *{ letter-spacing: -0.3px !important; } .green { color: var(--green)!important; } .green-dark { color: var(--green-dark)!important; } .yellow { color: var(--yellow) !important; } .red { color: var(--red) !important; } .white { color: var(--white) !important; } .dark-grey{ color: var(--dark-grey) !important; } .darker-grey{ color: var(--darker-grey) !important; } .black{ color: var(--black) !important; } .bg-green { background: var(--green) !important; } .bg-green-dark { background: var(--green-dark) !important; } .bg-yellow { background: var(--yellow) !important; } .bg-red { background: var(--red) !important; } .bg-blue { background: var(--blue) !important; } .bg-lighter { background: var(--lighter); } .bg-lightest { background: var(--lightest); } .bg-darker { background: var(--darker); } .bg-grey{ background: var(--grey); } a { text-decoration: none; color: inherit; } a:hover{ color: inherit; opacity: .9; } a:active{ scale: .99; } .dropdown-item:active{ color: inherit; background: inherit; opacity: .7; } .dropdown-toggle:after { content: none } .btn-white{background-color:var(--white);color: var(--black)}.btn-white:hover{color: var(--black)} .btn-white-duotone{background-color:var(--white);color: var(--black)} .btn-white-duotone i{color:var(--green)}.btn-white-duotone:hover{color: var(--black)} .btn-light{background-color:var(--grey);color: var(--black)}.btn-light:hover{color: var(--black)} .btn-green{background-color:var(--green);color:var(--white)}.btn-green:hover{color:var(--white)} .btn-green-dark{background-color:var(--green-dark);color:var(--white)}.btn-green:hover{color:var(--white)} .btn-yellow{background-color:var(--yellow); color: var(--black)}.btn-yellow:hover{background-color:var(--yellow);color: var(--black);opacity: 0.9;} .btn-red{background-color:var(--red);color: var(--white)}.btn-red:hover{background-color:var(--red);color: var(--white);opacity: 0.9;} .rounded{ border-radius: 10px !important; } /* Lines */ .assuria-line{ height: 3px; } /* Header */ .header { position: fixed; top: 0; right: 0; left: 0; z-index: 50; } .header::before { content: ""; width: 100%; position: fixed; top: 0; left: 0; right: 0; height: 150px; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0)); } .header-location-flag{ width: 18px; height: 14px; } .header_v2::before { content: ""; width: 100%; position: fixed; top: 0; left: 0; right: 0; height: 0px; pointer-events: none; background: none !important; } /*### 2. The CSS Transition Engine Add these rules to your stylesheet. We use `max-width` alongside `opacity` and `transform` to slide the item out horizontally without breaking the neighboring flex items. ```css*/ /* Base state: completely tucked away and invisible */ .sticky-logo-wrap { display: inline-flex; align-items: center; max-width: 0; opacity: 0; transform: translateX(-10px); overflow: hidden; transition: max-width 0.4s ease, opacity 0.3s ease, transform 0.4s ease; pointer-events: none; /* Can't click it while hidden */ } /* Adjust height to fit comfortably inside your py-2 bar */ .sticky-logo-img { /*height: 24px;*/ /*width: auto;*/ } /* Active state: when the header gets the scrolled class */ .header-scrolled .sticky-logo-wrap { max-width: 120px; /* Adjust this to match your logo's natural proportional width */ opacity: 1; transform: translateX(0); pointer-events: auto; } .sub-navigation>a, .sub-navigation button{ font-size: .9rem; } .navigation>a{ font-size: .95rem; } .myassuria-portal-a, .ai-a{ height: 34px; } .ai-b-text{ height: 24px; line-height: 24px; font-size: .9rem; } .ai-a-text{ height: 24px; line-height: 24px; font-size: .6rem; } .header-content{ position: relative; z-index: 51; } .logo{ height: 70px; padding: 0 15px; border-radius: 0 0 10px 10px; } .logo>img{ height: 50px; } /* Navigation */ .nav-menu button{ background: transparent; } .nav-menu .dropdown-menu::before{ content: ""; display: block; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid #fff; position: absolute; top: -11px; right: 10px; position: absolute; } .nav-menu .dropdown-menu{ min-width: 325px; margin-right: -5px !important; border-radius: 10px; border-width: 0; border-color: #efefef; box-shadow: 0 0 50px rgba(0,0,0,.3); } .nav-menu .dropdown-menu a{ border-radius: 10px; } .chat-block{ } /* Footer */ .footer-slogan{ height: 35px; } .footer-logo{ } .footer-end{ border-top-color: rgba(0,0,0,.2) !important; } /* Hero */ .hero-container { height: 650px; } .hero-modal { position: absolute; bottom: 10px; left: 0; } /*.banner-item{ background-size: cover; background-position: center; }*/ .banner-item::before { content: ""; width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0)); } /* Content */ .content { z-index: 5; }db .claim-item{ /*min-height: 110px;*/ position: relative; } .ass-texture{ top: 0; right: 0; bottom: 0; z-index: 0; opacity: .25; } p a, .editor-content li a{color:var(--green)} /* Insurance items hero */ .insurance-arrow { width: 30px; height: 30px; } .insurance-options { max-width: 375px; /* max-width: 425px; */ } /* Portal */ .myassuria-portal{ flex: 1; } .myassuria-portal-image{ width: 250px; height: 200px; } /* Ad-space */ .ad-space { overflow: hidden; min-height: 250px; background-size: cover; background-position: center; } .ad-space::before { content: ""; width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); } .topButton {font-size:1rem!important;} .topButton i{font-size:0.7rem;} .topButton .insurance-arrow{width:20px;height:20px;} .contactBtn i{font-size:0.9rem;} .btn-light.contactBtn i{color:var(--green);} .insuranceList a .iconBg i{color:var(--white)} .insuranceList a .iconBg, .directRegelenBtn .iconBg{width:43px!important;text-align:center;} .directRegelenBtn .iconBg i{} .umbraco-forms-form input.text{width:100%!important;} .umbraco-forms-form textarea{width:100%!important;max-width:100%!important;} .prsnOverviewCalcProperty small{font-size:0.7em;font-weight:normal!important;} .form-switch .form-check-input { background-color:var(--gray); background-image: url("data:image/svg+xml,"); } /*.form-switch .form-check-input:focus { border-color:var(--grey); }*/ .form-check-input:checked {background-color: var(--green); border-color: var(--green);} .form-check-input:focus {box-shadow: 0 0 0 .25rem rgba(28,130,73,.25)} table.dataTable thead tr th { background-color: var(--color-primary) !important; color:var(--white); } table.dataTable tbody tr td{background-color:var(--dark-grey)!important;} table.dataTable tbody tr td:first-child, table.dataTable thead tr th:first-child { border-top-left-radius: 0rem; border-bottom-left-radius: 0rem; } table.dataTable tbody tr td:last-child, table.dataTable thead tr th:last-child { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; } table.dataTable.stripe > tbody > tr:nth-child(odd) > *, table.dataTable.display > tbody > tr:nth-child(odd) > * { box-shadow: none !important } table.dataTable tbody tr { border-bottom: 7px solid var(--white); border-top: 7px solid var(--white) } .claimToggle{ background-color: var(--color-accent);color:var(--white)} .claimToggle:hover { background-color: var(--color-accent-hover); color: var(--white) } .claimToggle.active{ background-color: var(--white)!important;color:var(--red)} #carouselLatestNews .carousel-indicators button{background-color:var(--green)!important;} .btn-secondary.btn-ribbon { font-size: 12px !important; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); position: fixed; right: -44px; top: 45%; z-index: 99; box-shadow: none; padding: 6px 16px; } .btn-secondary.btn-ribbon { color: #0e0e0e; background-color: #fcd851; background-image: linear-gradient(-180deg, #fbd20c 0, #d0b42d 100%); box-shadow: 0 2px 0 0 #836c00; } .btn-secondary.btn-ribbon svg { width: 20px; } /* currency column: fixed width, right-aligned */ .calc-curr{ display:inline-block; width:3.5ch; /* fits SRD/USD/EUR */ text-align:right; margin-right:.4rem; } /* amount column: right align numbers with tabular digits */ .calc-amt{ display:inline-block; min-width:8ch; text-align:right; font-variant-numeric: tabular-nums; /* or font-feature-settings:'tnum' 1; */ } /* when it's plain text (no currency), span behaves like a text cell */ .calc-amt.is-text{ min-width:0; text-align:left; /* change to right if you prefer */ } @media (max-width: 1023px) { #assuriaframeDesktop{display:none;} #assuriaframeMobile{display:block;} } @media (min-width: 1024px) { .btn-secondary.btn-ribbon { font-size: 15px !important; right: -57px; padding: 10px 24px; } #assuriaframeDesktop{display:block;} #assuriaframeMobile{display:none;} } .contenttabel td { border-bottom: 1px solid #e8e8e8;padding: 10.66667px 0; } .contenttabel2 td { border: 1px solid #e8e8e8;padding: 8px 5px; } .shipping-popped-modal .modalContent .modalbody .bottomTextContent .modal-button-group .button-group .shopping-button .benifitButton {background-color:#1A623A!important;} .shipping-popped-modal .modalContent .close{color:#1A623A!important;} .shipping-popped-modal .modalContent .close:hover{background-color:#1A623A!important;color:#fff!important;} .badgeBg{width:48px;height:48px;} .description-preview { max-height: 200px; overflow: hidden; position: relative; } .description-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff); } .photo-grid img { cursor: pointer; } .photo-grid .row, .photo-grid .col-md-6, .photo-grid .col-6 { min-height: 100%; } .object-fit-cover { object-fit: cover; } .carousel-main-image { max-height: 70vh; object-fit: contain; } .thumbnail-button { border: 0; padding: 0; background: transparent; } .thumbnail-button img { width: 120px; height: 90px; object-fit: cover; border-radius: 0px; } @media (max-width: 767px) { .photo-thumbnails { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; padding: 0.75rem; justify-content: flex-start !important; } .thumbnail-button { flex: 0 0 auto; } } .leaflet-container a{text-wrap-mode: nowrap; color:var(--color-primary)!important;} /*rebrand*/ .primary { color: var(--color-primary); } .dark { color: var(--color-text-dark); } .accent{color:var(--color-accent);} .bg-primary { background: var(--color-primary) !important; } .bg-primary-light { background: var(--color-primary-light) !important; } .bg-primary-light2 { background: var(--color-primary-light2) !important; } .bg-main { background: var(--color-bg-main); } header body.bg-main { margin: 0; /* 1. Ensure the body is at least as tall as the screen, but can grow infinitely */ min-height: 100vh; /* 2. Stack your backgrounds */ background: url('/assets/bg/assuria_bg2.png') right bottom 337px no-repeat, var(--color-bg-main) url('/assets/bg/assuri_bg1.png') left 530px no-repeat; } /* 4. The Query checking the HTML element's total height */ @container (height >= 300px) { body.bg-main { background:red; /*background: url('/assets/bg/assuria_bg2.png') right bottom 337px no-repeat, var(--color-bg-main) url('/assets/bg/assuri_bg1.png') left 530px no-repeat;*/ } } .bg-main.home { background: var(--color-bg-main) url('/assets/bg/assuri_bg1.png') left 650px no-repeat; } .bg-accent { background: var(--color-accent) !important; } .border-primary{ border-color: var(--color-primary)!important; } .clean-steps { --container-width: 100vw; --left-margin: calc((100vw - var(--container-width)) / 2); /* Divide the left margin into 3 equal steps */ --step: calc(var(--left-margin) / 3); background: linear-gradient( to right, var(--color-primary) 0px, var(--color-primary) var(--step), var(--color-accent) var(--step), var(--color-accent) calc(var(--step) * 2), var(--color-primary-light) calc(var(--step) * 2), var(--color-primary-light) 100% ); } .btn-white-duotone i { color: var(--color-primary) } .btn-white-duotone_v2 { color: var(--color-primary); } .btn-green.btn-white-duotone_v2 { background: var(--color-primary); color: var(--white); } .btn-light { background-color: var(--color-surface); color: var(--color-primary) } .btn-light:hover { color: var(--color-primary-hover) } .btn-light.contactBtn i { color: var(--color-primary) } #carouselLatestNews .carousel-indicators { bottom: 10px; left:355px; } .bannerLogo{margin-top:90px;} .bannerLogo img{width:150px;} .category-content p a, .category-content li a { color: var(--color-accent) } .category-content p a:hover, .category-content li a:hover { color: var(--color-accent-hover) } .accordion-item:first-of-type, .accordion-item:first-of-type .accordion-button { border-top-left-radius: 0; border-top-right-radius: 0; } .accordion-item:last-of-type { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .accordion-button::after{ color:var(--color-primary) !important; } .accordion-button:not(.collapsed) { color: var(--color-primary); background-color: var(--color-primary-light2); box-shadow: none; } .form-control { border-radius:0!important; border-color:var(--color-primary)!important; color:var(--color-primary)!important; } .input-group-text { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; color: var(--color-surface) !important; border-radius: 0 !important; } /* Update the container width variable based on Bootstrap 5 Breakpoints */ /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { .clean-steps { --container-width: 720px; } } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { .clean-steps { --container-width: 960px; } .bannerLogo { margin-top: 50px; } .bannerLogo img { width: 200px; } } /* X-Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { .clean-steps { --container-width: 1140px; } } /* XX-Large devices (larger desktops, 1400px and up) */ @media (min-width: 1400px) { .clean-steps { --container-width: 1320px; } } @media (max-width: 1023px){ /* ========================================================================== 1. BASE LOGO STYLES & MOBILE OVERRIDES (Screens less than 1024px) ========================================================================== */ .sticky-logo-wrap { display: inline-flex; align-items: center; max-width: 120px; /* Always visible on mobile/tablet */ opacity: 1; /* Always visible on mobile/tablet */ transform: translateX(0); overflow: hidden; transition: max-width 0.4s ease, opacity 0.3s ease, transform 0.4s ease; pointer-events: auto; margin-right: auto !important; } .sticky-logo-img { /*height: 24px; width: auto;*/ } /* ========================================================================== 2. DESKTOP ANIMATION ENGINE (Screens 1024px and wider) ========================================================================== */ @media (min-width: 1024px) { /* Hide the logo by default on desktops on initial load */ .sticky-logo-wrap { max-width: 0; opacity: 0; transform: translateX(-10px); pointer-events: none; } /* Reveal the logo on desktop only when scrolled */ .header-scrolled .sticky-logo-wrap { max-width: 120px; /* Match your desktop logo width */ opacity: 1; transform: translateX(0); pointer-events: auto; } } } /*rebrand*/