/* The coming-soon page of the old site (WordPress plugin "Nifty Coming Soon"), in the plugin's own
   measurements (its stylesheet plus the extra CSS of the site: logo 300px wide at 52px from the top,
   the line in the orange of the house style). Measured on 10talentsunited.com on 27 September 2026 at
   1440 and 390 pixels. Loaded ONLY on the coming-soon page (PublicPageChrome.ComingSoonStylesheets).
   Colours are variables from /beheer/colors. */

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.tt-coming-soon {
    margin: 0;
    min-height: 100vh;
    font-family: Abel, sans-serif;
    font-size: 16px;
    color: var(--tt-cs-text);
    background: #000;
}

/* The photos: fixed behind everything, crossfading in two seconds, each one slowly zooming in the
   way vegas.js did ("kenburns"). Real <img> elements from a gallery in /beheer. */
.tt-cs-slides {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.tt-cs-slides__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.tt-cs-slides__img.is-active {
    opacity: 1;
    animation: tt-cs-kenburns 12s ease-out both;
}

@keyframes tt-cs-kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .tt-cs-slides__img.is-active {
        animation: none;
    }
}

/* The dot pattern over the photos, at half strength. A decoration of the plugin, not a photo. */
.tt-cs-pattern {
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: .5;
    background: url(/assets/coming-soon-pattern.png) repeat;
    pointer-events: none;
}

.nifty-main-wrapper {
    position: relative;
    z-index: 2;
}

.nifty-container {
    max-width: 1170px;
    margin-inline: auto;
    padding-inline: clamp(.938rem, .551rem + 1.93vw, 2rem);
}

.nifty-text-center {
    text-align: center;
}

.nifty-block {
    margin-block: clamp(2rem, .909rem + 5.45vw, 5rem);
    color: var(--tt-cs-text);
}

.nifty-logo {
    display: inline-block;
    width: 300px;
    max-width: 300px;
    margin: 52px auto 50px;
}

.nifty-logo a {
    display: block;
}

.nifty-logo img {
    display: inline;
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: bottom;
}

.nifty-coming-soon-message {
    margin-inline: auto;
    font-family: Lato, sans-serif;
    font-size: clamp(1.125rem, .08rem + 5.23vw, 4rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--tt-cs-text);
    text-shadow: #333 1px 1px 2px;
    -webkit-text-stroke: .2px;
}

#animated_intro {
    display: block;
    color: var(--tt-cs-message);
    animation: tt-cs-fade-in 1.5s ease-out both;
}

@keyframes tt-cs-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.nifty-slider-content {
    margin-block: clamp(2rem, 1.636rem + 1.82vw, 3rem);
}

.nifty-slider .nifty-block {
    margin-block: clamp(1.5rem, 1.136rem + 1.82vw, 2.5rem);
}

/* The two buttons above the blocks: the plugin's slider bullets (a paper plane and a map marker). */
.tt-cs-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.tt-cs-tab {
    appearance: none;
    height: 30px;
    padding: 5px;
    border: 0;
    background: none;
    color: var(--tt-cs-text);
    font-size: 12px;
    line-height: 30px;
    cursor: pointer;
}

.tt-cs-tab .tt-cs-icon {
    font-size: 1.6rem;
}

.tt-cs-tab.is-active {
    color: var(--tt-cs-active);
}

.tt-cs-tab:focus-visible {
    outline: 2px solid var(--tt-cs-text);
    outline-offset: 2px;
}

.nifty-contact-details {
    font-size: 1rem;
    color: var(--tt-cs-text);
}

.nifty-contact-details .contact-company-name {
    margin-block: clamp(.25rem, -.341rem + 2.95vw, 1.875rem);
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
}

.nifty-contact-details ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nifty-contact-details ul li {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-block: 16px;
}

.nifty-contact-details a {
    color: var(--tt-cs-text);
    text-decoration: none;
}

/* The five icons, from the icon font of the plugin (a subset: fonts/coming-soon-icons.woff2). */
.tt-cs-icon {
    font-family: "tt-coming-soon-icons";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    speak: never;
    -webkit-font-smoothing: antialiased;
}

.tt-cs-icon--paper-plane::before { content: "\f1d8"; }
.tt-cs-icon--map-marker::before { content: "\f041"; }
.tt-cs-icon--home::before { content: "\f015"; }
.tt-cs-icon--phone::before { content: "\eaca"; }
.tt-cs-icon--envelope::before { content: "\f0e0"; }

/* ---- The cookie notice on the coming-soon page ----------------------------------------------------
   ⛔ This page does not load the stylesheets of the site, so without these rules the notice sat
   unstyled in the flow of the page, UNDER the fixed photo layer, and could not be clicked away
   (valkuil 21, measured headless on 27 September 2026). It floats above everything here. */
.tt-consent {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 10;
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.1rem 1.3rem;
    border: 2px solid var(--e-global-color-accent, #f1852b);
    border-radius: 3px;
    background: #fff;
    color: #4d4d4d;
    font-family: Lato, sans-serif;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}

.tt-consent[hidden] {
    display: none;
}

.tt-consent__text {
    margin-bottom: .75rem;
}

.tt-consent__more {
    margin-left: .35rem;
    color: #4d4d4d;
}

.tt-consent__buttons {
    display: flex;
    gap: .6rem;
}

.tt-consent .button {
    padding: .5rem 1rem;
    border: 1px solid var(--e-global-color-accent, #f1852b);
    border-radius: 3px;
    background: var(--e-global-color-accent, #f1852b);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.tt-consent #tt-consent-decline {
    background: #fff;
    color: #4d4d4d;
}