/* =========================================================== TwistyMoto – Centrale stylesheet Huisstijl: neon-groen (var(--tm-accent)) / antraciet (#1C1C1C) =========================================================== */ /* ---------- Basisvariabelen kleurcodes ==============================================*/ :root { /* Accent theme (default: neon green) */ --tm-accent: #39FF14; --tm-accent-soft: #2DDC0D; --tm-accent-rgb: 57 255 20; /* for rgba(var(--tm-accent-rgb)/alpha) */ /* Core surfaces */ --tm-bg: #1C1C1C; --tm-bg-dark: #121212; --tm-surface-2: #161616; --tm-surface-3: #181818; --tm-surface-alt: #111111; /* Typography */ --tm-text: #E0E0E0; --tm-text-bright: #F5F5F5; --tm-text-dim: #D7D7D7; --tm-text-bright-2: #E6E6E6; --tm-text-muted: #AAAAAA; --tm-text-muted-2: #BDBDBD; --tm-text-muted-3: #BBBBBB; --tm-text-muted-4: #CCCCCC; --tm-text-on-accent: #111111; /* Lines / borders */ --tm-border: #2B2B2B; --tm-border-muted: #6B7280; --tm-border-soft: #777777; /* Status */ --tm-error: #FF4B4B; --tm-success: #2FFF8F; --tm-success-soft: #E5FFE5; --tm-warning: #FF8C00; --tm-warning-soft: #FFC266; --tm-info: #6ECBFF; /* Buttons */ --tm-btn-secondary-bg: #4A4A4A; --tm-btn-secondary-border: #777777; --tm-btn-secondary-text: #F5F5F5; /* Misc */ --tm-white: #FFFFFF; --tm-black: #000000; --tm-radius: 8px; } /* ---------- Thema-variant: blauw (activeren door class op ) ---------- */ /* Neon sky blue */ /* body.tm-theme--blue { --tm-accent: #4CCBFF; --tm-accent-soft: #7FDBFF; --tm-accent-muted: #A9E7FF; --tm-accent-rgb: 76 203 255; --tm-bg: #1C1C1C; --tm-bg-dark: #141A20; --tm-text: #E0E0E0; --tm-text-muted: #AFC7D8; --tm-border: #2A3440; --tm-success: #2FD8A0; --tm-error: #FF4B4B; } */ /* Variant deep neon blue */ /* body.tm-theme--blue { --tm-accent: #2FB7FF; --tm-accent-soft: #5FCCFF; --tm-accent-muted: #8AD9FF; --tm-accent-rgb: 47 183 255; --tm-bg: #1C1C1C; --tm-bg-dark: #141A20; --tm-text: #E0E0E0; --tm-text-muted: #AFC7D8; --tm-border: #2A3440; --tm-success: #2FD8A0; --tm-error: #FF4B4B; } */ /* Variant Electric Neon Blue */ body.tm-theme--blue { /* Electric Neon Blue accents */ --tm-accent: #1FAEFF; /* primary electric blue */ --tm-accent-soft: #4BC1FF; /* hover / active */ --tm-accent-muted: #79D3FF; /* subtle accents */ --tm-accent-rgb: 31 174 255; /* Backgrounds (koel, donker) */ --tm-bg: #1C1C1C; --tm-bg-dark: #141A20; /* Typography */ --tm-text: #E0E0E0; --tm-text-muted: #AFC7D8; /* Borders */ --tm-border: #2A3440; /* Status */ --tm-success: #2FD8A0; --tm-error: #FF4B4B; } /* Routekaart – eigen kleuren, los van algemeen accent */ :root { --tm-route-line: #1FAEFF; --tm-route-line-glow-rgb: 31 174 255; --tm-route-start-bg: #1FAEFF; --tm-route-start-fg: #FFFFFF; --tm-route-finish-bg: #FFFFFF; --tm-route-finish-fg: #111111; } body.tm-theme--blue { --tm-route-line: #1FAEFF; --tm-route-line-glow-rgb: 31 174 255; --tm-route-start-bg: #1FAEFF; --tm-route-start-fg: #FFFFFF; --tm-route-finish-bg: #FFFFFF; --tm-route-finish-fg: #111111; } /* ---------- Algemene layout ---------- */ body { background: var(--tm-bg-dark); background-color: var(--tm-bg-dark); color: var(--tm-text); font-family: "Montserrat", "Poppins", system-ui, sans-serif; line-height: 1.6; } /* Basis link-styling: neon tekst, geen stippels, underline via border-bottom */ a { color: var(--tm-accent); text-decoration: none; border-bottom: 1px solid transparent; } a:hover, a:focus { text-decoration: none; border-bottom: 1px solid currentColor; } /* =========================================================== KNOPPEN – PRIMAIR vs SECUNDAIR =========================================================== */ /* Primair: echt belangrijke acties – o.a. submitknoppen, GPX-download, login, filteren */ .tm-btn, input[type="submit"] { display: inline-block; background: var(--tm-accent); color: var(--tm-bg); border: 1px solid var(--tm-accent); border-radius: var(--tm-radius); font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 18px; cursor: pointer; transition: box-shadow 0.2s ease, transform 0.12s ease; border-bottom: none; /* nooit een underline op knoppen */ } .tm-btn:hover, input[type="submit"]:hover { box-shadow: 0 0 18px rgba(var(--tm-accent-rgb) / 0.55); transform: scale(1.03); } /* Secundair: alle “helper”-knoppen – grijs, iets subtieler en NIET groter dan primair */ .tm-btn-secondary, .twistymoto-form .acf-button, .twistymoto-form .acf-actions .acf-button, .twistymoto-form a.button, .twistymoto-form .button, .twistymoto-form input[type="file"]::file-selector-button, .twistymoto-form input[type="file"]::-webkit-file-upload-button { background: var(--tm-btn-secondary-bg) !important; border-color: var(--tm-btn-secondary-border) !important; color: var(--tm-btn-secondary-text) !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 0.9rem !important; padding: 10px 14px !important; text-decoration: none !important; cursor: pointer; transition: box-shadow 0.2s ease, transform 0.12s ease; border-bottom: none !important; /* geen underline op secundaire knoppen */ } .tm-btn-secondary:hover, .twistymoto-form .acf-button:hover, .twistymoto-form .acf-actions .acf-button:hover, .twistymoto-form a.button:hover, .twistymoto-form .button:hover, .twistymoto-form input[type="file"]:hover::file-selector-button, .twistymoto-form input[type="file"]::-webkit-file-upload-button:hover { box-shadow: 0 0 12px rgba(0, 0, 0, 0.6) !important; transform: scale(1.03); } /* Specifiek: secundaire knoppen in routepagina (bijv. Route bewerken) */ .tm-btn.tm-btn-secondary { background: var(--tm-btn-secondary-bg) !important; border-color: var(--tm-btn-secondary-border) !important; color: var(--tm-btn-secondary-text) !important; box-shadow: none !important; } /* Basis-