/* ========================================================================== Digital Farmers client-area skin (theme: farmers) Rebrands the base Lagom layout to the DF huisstijl. Loaded LAST in , so it wins over theme.css and any injected vars. DF huisstijl: blauw #1f3c88 | oranje #E68404 | groen #79A134 | creme #fff8ee Font: Fira Sans (Google Fonts, geladen via in head.tpl) ========================================================================== */ :root { /* ---- Primary = DF blauw ---- */ --brand-primary: #1f3c88; --brand-primary-lighter: #E68404; /* oranje pop op hover-states */ --brand-primary-lighter-2: #c9d3ea; --brand-primary-lighter-3: #dde3f2; --brand-primary-lighter-4: #eef1f8; --brand-primary-darker: #142a5f; --brand-primary-gradient-start: #1f3c88; --brand-primary-gradient-end: #2f52ad; /* ---- Secondary = diepblauw (structuurblokken/sidebar) ---- */ --brand-secondary: #142a5f; --brand-secondary-lighter: #4b5f8f; --brand-secondary-darker: #0e1f47; --brand-secondary-gradient-start:#142a5f; --brand-secondary-gradient-end: #1f3c88; /* ---- Success = DF groen ---- */ --brand-success: #79A134; --brand-success-lighter: #93b95a; --brand-success-lighter-2: #dce7c6; --brand-success-lighter-3: #e7efd8; --brand-success-lighter-4: #f1f6e8; --brand-success-darker: #61832a; --brand-success-gradient-start: #61832a; --brand-success-gradient-end: #79A134; /* ---- Achtergrond = creme ---- */ --body-bg: #fff8ee; /* ---- Typografie = Fira Sans ---- */ --font-family-base: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-family-heading: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Belt-and-suspenders: dwing font + creme achtergrond af, ook als vars ergens overschreven worden door ingespoten thema-CSS. */ html body, body.lagom, .login, .main-body, .page-body { font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } body.lagom-not-portal, body.page-login { background-color: #fff8ee; } /* ---- Login: strak, premium, DF ---- */ .login .login-wrapper, .login-body { border-radius: 14px; } .login-title { font-weight: 600; letter-spacing: -0.01em; color: #1f3c88; } .login .logo img, .login-header .logo img { max-height: 46px; width: auto; } /* Primaire knop: DF blauw, oranje bij hover/focus */ .btn-primary { background-color: #1f3c88; border-color: #1f3c88; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #E68404; border-color: #E68404; color: #fff; } /* Links */ a { color: #1f3c88; } a:hover, a:focus { color: #E68404; } /* Focus-ring in DF-oranje voor toegankelijkheid */ .form-control:focus, .btn:focus { border-color: #E68404; box-shadow: 0 0 0 3px rgba(230, 132, 4, 0.18); outline: none; } /* Verwijder eventuele "Powered by" / thema-credit tells, mochten ze ergens in een footer-layout verschijnen. */ .footer-powered, .powered-by, [class*="lagom-credit"], a[href*="whmcs.com"], a[href*="rsstudio"], a[href*="lagom"] { display: none !important; } /* ========================================================================== DF frontend-skin: navbar (surface-header) + footer + kaarten + velden Toegevoegd voor de "farmers" afwerking. Overschrijft de Lagom-defaults. ========================================================================== */ /* ---- Header: lichte surface (creme/wit), ink #152a5e, oranje hover ------- */ .app-nav, .app-nav-header, .app-nav-menu, .df-nav-menu { background: #ffffff !important; background-color: #ffffff !important; border: 0; } .app-nav { border-bottom: 1px solid rgba(0, 0, 0, .06) !important; box-shadow: 0 1px 2px rgba(20, 42, 95, .04), 0 6px 20px rgba(20, 42, 95, .05); } .sticky-navigation.is-affixed .app-nav, .app-nav.sticky-navigation { backdrop-filter: saturate(1.1); } .app-nav-header .container, .df-nav-menu .container { display: flex; align-items: center; gap: 1.25rem; } /* Logo netjes op de lichte balk */ .logo.df-logo img, .app-nav-header .logo img, .logo img { max-height: 42px; width: auto; } /* ---- Primaire DF-nav: ink, oranje hover, subtiel onderlijn-accent ------- */ .df-menu-primary { display: flex; align-items: center; gap: .35rem; margin: 0; padding: 0; list-style: none; } .df-menu-primary > li { list-style: none; } .df-menu-primary > li > .nav-link, .menu-primary > li > a { position: relative; display: inline-flex; align-items: center; padding: .65rem .95rem; color: #152a5e !important; font-weight: 500; font-size: .975rem; letter-spacing: -0.01em; border-radius: .5rem; text-decoration: none; transition: color .18s ease, background-color .18s ease; } .df-menu-primary > li > .nav-link::after { content: ""; position: absolute; left: .95rem; right: .95rem; bottom: .4rem; height: 2px; background: #E68404; border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform .2s cubic-bezier(.16,1,.3,1); } .df-menu-primary > li > .nav-link:hover, .df-menu-primary > li > .nav-link:focus, .menu-primary > li > a:hover, .menu-primary > li > a:focus { color: #E68404 !important; background: rgba(230, 132, 4, .07); } .df-menu-primary > li > .nav-link:hover::after, .df-menu-primary > li.active > .nav-link::after { transform: scaleX(1); } /* ---- Account/login menu rechts (top-nav = secondaryNavbar) -------------- */ .top-nav > li > a, .top-nav .dropdown-toggle { color: #1f3c88 !important; font-weight: 500; transition: color .18s ease; } .top-nav > li > a:hover, .top-nav > li > a:focus, .top-nav .dropdown-toggle:hover { color: #E68404 !important; } .top-nav .item-text { color: inherit; } .top-nav .dropdown-menu a:hover { color: #E68404 !important; background: rgba(230, 132, 4, .07); } /* Hamburger-strepen in DF-blauw op lichte balk */ .app-nav-toggle .icon-bar { background-color: #1f3c88 !important; } /* ---- DF Footer ---------------------------------------------------------- */ .df-footer { background: #fff8ee; margin-top: 3rem; } .df-footer-info { background: #fff8ee; border-top: 1px solid rgba(0, 0, 0, .06); padding: 2.25rem 0; } .df-footer-info .container { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem 2rem; } .df-footer-brand img { height: 46px; width: auto; display: block; } .df-footer-nav { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin-left: auto; } .df-footer-nav a { color: #152a5e; font-weight: 500; font-size: .95rem; text-decoration: none; transition: color .18s ease; } .df-footer-nav a:hover, .df-footer-nav a:focus { color: #E68404; } .df-footer-socials { display: flex; align-items: center; gap: .6rem; margin: 0; padding: 0; list-style: none; } .df-footer-socials li { list-style: none; } .df-footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(20, 42, 95, .18); border-radius: 50%; color: #152a5e; background: #ffffff; transition: color .18s ease, border-color .18s ease, transform .18s ease; } .df-footer-socials a:hover, .df-footer-socials a:focus { color: #E68404; border-color: #E68404; transform: translateY(-2px); } .df-footer-legal { background: #fff8ee; border-top: 1px solid rgba(0, 0, 0, .06); padding: 1rem 0 1.25rem; } .df-footer-legal .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; } .df-footer-copy { color: #475569; font-size: .875rem; } .df-footer-legal-links { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin: 0; padding: 0; list-style: none; } .df-footer-legal-links li { list-style: none; } .df-footer-legal-links a { color: #475569; font-size: .875rem; text-decoration: none; transition: color .18s ease; } .df-footer-legal-links a:hover, .df-footer-legal-links a:focus { color: #E68404; } /* ---- Kaarten / panels: wit, zachte schaduw op creme, DF-radius --------- */ .card, .panel, .rs-card, .login-body, .login-wrapper { background: #ffffff; border: 1px solid rgba(0, 0, 0, .06); border-radius: .75rem; box-shadow: 0 1px 2px rgba(20, 42, 95, .04), 0 10px 30px rgba(20, 42, 95, .06); } .panel-heading, .card-header { border-top-left-radius: .75rem; border-top-right-radius: .75rem; } /* ---- Headings in Fira Sans + ink ---------------------------------------- */ h1, h2, h3, h4, h5, h6, .main-header-title, .login-title, .section-title { font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #152a5e; letter-spacing: -0.01em; } /* ---- Formuliervelden: net, DF-radius, oranje focus --------------------- */ .form-control, .input-group .form-control, select.form-control { border-radius: .6rem; border-color: rgba(20, 42, 95, .16); color: #152a5e; } .form-control::placeholder { color: #94a3b8; } /* ---- Knoppen: DF-blauw, oranje hover (aanvulling) ---------------------- */ .btn-primary, .btn-cta, .nav-item-btn > a { background-color: #1f3c88; border-color: #1f3c88; border-radius: .6rem; font-weight: 500; } .btn-primary:hover, .btn-primary:focus, .btn-cta:hover, .nav-item-btn > a:hover { background-color: #E68404; border-color: #E68404; color: #fff; } .btn-secondary, .btn-default { border-radius: .6rem; } /* ---- Responsive footer ------------------------------------------------- */ @media (max-width: 767px) { .df-footer-info .container { flex-direction: column; align-items: flex-start; } .df-footer-nav { margin-left: 0; } .df-footer-legal .container { flex-direction: column; align-items: flex-start; } }