/* ----------------------------------------------------------------------------- Author: bitsEverywhere DOO ----------------------------------------------------------------------------- */ /* eFTI Connect additive layer over the Soft template — reveal animations + brand tweaks */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } [data-reveal].reveal-visible { opacity: 1; transform: none; } [data-reveal="2"] { transition-delay: .12s; } [data-reveal="3"] { transition-delay: .24s; } [data-reveal="4"] { transition-delay: .36s; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* JS unavailable → never hide content (SEO + no-JS safety) */ .no-js [data-reveal] { opacity: 1; transform: none; } .dropdown-menu .dropdown-item.active { font-weight: 700; } /* No-JS contact-form fallback: server redirects to #sent / #sent-error; only the matching anchor target is shown (see lib/contact.js). */ .cf-note { display: none; } .cf-note:target { display: block; } /* Footer in dark Microsoft-Teams violet (matches primary #5b5fc7); the contact page's bg-dark strip merges into the footer, so it follows. */ footer.bg-dark, .bg-dark.min-h-150px { background-color: #383966 !important; } /* brand slogan (kept in English across locales, like in the app header) */ .brand-tagline { letter-spacing: .14em; } /* Billing toggle: the section owns the mode, CSS does the hiding. Scoped to html:not(.no-js) so that without JS both variants stay visible and the toggle is hidden instead of sitting there doing nothing. Deliberately not the [hidden] attribute — style.css declares [hidden]{display:none!important}, which no .no-js rule could override. */ html:not(.no-js) [data-billing-mode="monthly"] .plan-price[data-billing="yearly"], html:not(.no-js) [data-billing-mode="yearly"] .plan-price[data-billing="monthly"] { display: none; } .no-js [data-billing-toggle] { display: none; } /* Launch-offer heading. The two-line split itself is structural — the heading is authored as two sentences and each renders as its own block (see the offer card in templates/_macros.njk), so it does not depend on this rule. `balance` only governs what happens when one of those sentences has to wrap again on a narrow viewport: it evens that wrap instead of leaving one word stranded. Browsers without support (pre-2023) fall back to ordinary wrapping. */ [data-launch-offer] .card-header h3 { text-wrap: balance; } /* Ratification-table status marks: green tick = ratified, amber clock = in progress, red cross = not yet. Semantic colours rather than brand violet, because the marks mean done / waiting / no, not "eFTI Connect". None of the three is the theme's own token: --bs-success (#2dca8c), --bs-warning (#ff9f1c) and --bs-danger (#ff5c75) reach only 2.0-2.8:1 against these rows, under the 3:1 WCAG 1.4.11 floor for a meaningful graphic and simply hard to see — which would defeat the emphasis. Each keeps its theme hue, darkened until it clears that floor on the striped rows. The pending mark sits at hue 45deg — yellow, not the orange it was — and that costs contrast: yellow is the lightest hue there is, so on a white row it can only stay visible as a dark gold. 3.16:1 is the yellowest reading that still clears the floor; anything brighter drops to ~2:1 and starts to disappear. A genuinely bright yellow would need a dark chip behind it, not a bare glyph. Colour is reinforcement only: the marks are aria-hidden and every cell states its status in words, so nothing is lost when the colours cannot be seen or told apart. */ .icon-ratified { color: #118557; } /* 4.41:1 — theme mint, darkened */ .icon-pending { color: #b28600; } /* 3.16:1 — gold at hue 45deg (see above) */ .icon-not-yet { color: #d3323f; } /* 4.64:1 — theme red, darkened */ /* Hero screenshot carousel. The vendored Bootstrap is 5.0.0-beta1, which still expects the OLD carousel markup: for the controls and
  • for the indicators. The template uses the modern