{{! Coming soon (ADR 0135): the Coming soon page's section. Centered; Text + picture (the picture fills the section's end half, Sitevari's own until one is chosen); Over a picture (the words on a darkened picture filling the section). The logo or site name, the countdown's labels and digits, and the contacts come from the page (comingSoonValues ⇄ PageContext::comingSoon); the sign-up is the Newsletter element's, sent to its handler; view.js runs the countdown. }}
<div {{@attrs}}>{{#overPicture}}<div class="sv-coming-soon__backdrop">{{#image.url}}<img class="sv-coming-soon__backdrop-img wp-image-{{image.id}}" src="{{image.url}}" alt="{{image.alt}}"{{#image.width}} width="{{image.width}}" height="{{image.height}}"{{/image.width}} decoding="async">{{/image.url}}{{^image.url}}{{#comingSoonPhoto}}<img class="sv-coming-soon__backdrop-img" src="{{comingSoonPhoto}}" alt="" width="1600" height="893" decoding="async">{{/comingSoonPhoto}}{{/image.url}}</div>{{/overPicture}}<div class="sv-coming-soon__content">{{#showLogo}}<div class="sv-coming-soon__brand">{{#csLogo.url}}<img class="sv-coming-soon__logo" src="{{csLogo.url}}" alt="{{#csLogo.alt}}{{csLogo.alt}}{{/csLogo.alt}}{{^csLogo.alt}}{{csName}}{{/csLogo.alt}}"{{#csLogo.width}} width="{{csLogo.width}}" height="{{csLogo.height}}"{{/csLogo.width}}>{{/csLogo.url}}{{^csLogo.url}}<span class="sv-coming-soon__name">{{csName}}</span>{{/csLogo.url}}</div>{{/showLogo}}<div class="sv-coming-soon__main">{{#eyebrow}}<p class="sv-coming-soon__eyebrow"{{@edit eyebrow}}>{{eyebrow}}</p>{{/eyebrow}}<{{level}} class="sv-coming-soon__title"{{@edit title}}>{{{title}}}</{{level}}>{{#message}}<p class="sv-coming-soon__message"{{@edit message}}>{{message}}</p>{{/message}}{{#showCount}}<div class="sv-coming-soon__count" role="timer" data-sv-countdown data-sv-until="{{launchDate}}" data-sv-offset="{{csOffset}}" data-sv-digits="{{csDigits}}"><div class="sv-coming-soon__unit"><span class="sv-coming-soon__number" data-sv-unit="days">{{csZero}}</span><span class="sv-coming-soon__label">{{csDays}}</span></div><div class="sv-coming-soon__unit"><span class="sv-coming-soon__number" data-sv-unit="hours">{{csZero}}</span><span class="sv-coming-soon__label">{{csHours}}</span></div><div class="sv-coming-soon__unit"><span class="sv-coming-soon__number" data-sv-unit="minutes">{{csZero}}</span><span class="sv-coming-soon__label">{{csMinutes}}</span></div><div class="sv-coming-soon__unit"><span class="sv-coming-soon__number" data-sv-unit="seconds">{{csZero}}</span><span class="sv-coming-soon__label">{{csSeconds}}</span></div></div>{{/showCount}}{{#signup}}<form class="sv-newsletter sv-newsletter--layout-row sv-coming-soon__signup" method="post" action="{{formAction}}" data-sv-newsletter data-failed="{{newsletterFailed}}"><input type="hidden" name="action" value="sitevari_newsletter"><input type="hidden" name="sv_page" value="{{pageId}}"><input type="hidden" name="sv_form" value="{{@id}}"><input type="hidden" name="sv_elapsed" value=""><label class="sv-newsletter__hidden" for="sv-{{@id}}-email">{{#placeholder}}{{placeholder}}{{/placeholder}}{{^placeholder}}{{newsletterEmail}}{{/placeholder}}</label><div class="sv-newsletter__row"><input class="sv-newsletter__field" id="sv-{{@id}}-email" name="sv_email" type="email" dir="ltr" autocomplete="email" maxlength="120" placeholder="{{#placeholder}}{{placeholder}}{{/placeholder}}{{^placeholder}}{{newsletterEmail}}{{/placeholder}}" required><div class="sv-button sv-button--variant-primary sv-button--size-md"><button class="sv-button__control" type="submit"{{@edit buttonLabel}}>{{#buttonLabel}}{{buttonLabel}}{{/buttonLabel}}{{^buttonLabel}}{{newsletterSubscribe}}{{/buttonLabel}}</button></div></div><div class="sv-newsletter__hidden" aria-hidden="true"><label for="sv-{{@id}}-website">Website</label><input id="sv-{{@id}}-website" name="sv_website" type="text" tabindex="-1" autocomplete="off"></div>{{#note}}<p class="sv-newsletter__note"{{@edit note}}>{{note}}</p>{{/note}}</form>{{/signup}}</div>{{#contacts}}{{#csHasContacts}}<div class="sv-coming-soon__contacts">{{#csPhone}}<a class="sv-coming-soon__contact" href="tel:{{csPhone}}"><svg class="sv-coming-soon__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg><span dir="ltr">{{csPhone}}</span></a>{{/csPhone}}{{#csEmail}}<a class="sv-coming-soon__contact" href="mailto:{{csEmail}}"><svg class="sv-coming-soon__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg><span dir="ltr">{{csEmail}}</span></a>{{/csEmail}}<span class="sv-coming-soon__social">{{#csSocial.facebook}}<a class="sv-coming-soon__social-link" href="{{csSocial.facebook}}" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><svg class="sv-coming-soon__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg></a>{{/csSocial.facebook}}{{#csSocial.x}}<a class="sv-coming-soon__social-link" href="{{csSocial.x}}" target="_blank" rel="noopener noreferrer" aria-label="X"><svg class="sv-coming-soon__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 4h4.5L20 20h-4.5z"/><path d="m20 4-6.6 7.2"/><path d="m4 20 6.6-7.2"/></svg></a>{{/csSocial.x}}{{#csSocial.linkedin}}<a class="sv-coming-soon__social-link" href="{{csSocial.linkedin}}" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><svg class="sv-coming-soon__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><path d="M2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg></a>{{/csSocial.linkedin}}{{#csSocial.youtube}}<a class="sv-coming-soon__social-link" href="{{csSocial.youtube}}" target="_blank" rel="noopener noreferrer" aria-label="YouTube"><svg class="sv-coming-soon__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M2.5 17a24 24 0 0 1 0-10 2 2 0 0 1 1.4-1.4 50 50 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24 24 0 0 1 0 10 2 2 0 0 1-1.4 1.4 50 50 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg></a>{{/csSocial.youtube}}{{#csSocial.instagram}}<a class="sv-coming-soon__social-link" href="{{csSocial.instagram}}" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><svg class="sv-coming-soon__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.4A4 4 0 1 1 12.6 8 4 4 0 0 1 16 11.4z"/><path d="M17.5 6.5h.01"/></svg></a>{{/csSocial.instagram}}</span></div>{{/csHasContacts}}{{/contacts}}</div>{{#pictureSide}}<div class="sv-coming-soon__media">{{#image.url}}<img class="sv-coming-soon__img wp-image-{{image.id}}" src="{{image.url}}" alt="{{image.alt}}"{{#image.width}} width="{{image.width}}" height="{{image.height}}"{{/image.width}} decoding="async">{{/image.url}}{{^image.url}}{{#comingSoonPicture}}<img class="sv-coming-soon__img" src="{{comingSoonPicture}}" alt="" width="1100" height="1365" decoding="async">{{/comingSoonPicture}}{{/image.url}}</div>{{/pictureSide}}</div>