.elementor-kit-13{--e-global-color-primary:#307EA5;--e-global-color-secondary:#ED6E50;--e-global-color-text:#245C79;--e-global-color-accent:#E8CD53;--e-global-color-unlbrandb:#3282AA;--e-global-color-unlbrandc:#F27052;--e-global-color-unlgrey:#E1DCDC;--e-global-color-unlmauve:#B88596;--e-global-color-unlyelt:#EED97C;--e-global-color-unlwhite:#FFFFFF;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:700;--e-global-typography-5d11618-font-family:"Instrument Sans";--e-global-typography-5d11618-font-size:56px;--e-global-typography-5d11618-font-weight:500;--e-global-typography-5d11618-text-transform:none;--e-global-typography-5d11618-line-height:1.1em;--e-global-typography-5d11618-letter-spacing:-1.2px;--e-global-typography-c0c00e9-font-family:"Instrument Sans";--e-global-typography-c0c00e9-font-size:48px;--e-global-typography-c0c00e9-font-weight:500;--e-global-typography-c0c00e9-text-transform:none;--e-global-typography-c0c00e9-line-height:1.2em;--e-global-typography-c0c00e9-letter-spacing:-1.1px;--e-global-typography-973c7a1-font-family:"Instrument Sans";--e-global-typography-973c7a1-font-size:40px;--e-global-typography-973c7a1-font-weight:500;--e-global-typography-973c7a1-text-transform:none;--e-global-typography-973c7a1-line-height:1.2em;--e-global-typography-973c7a1-letter-spacing:-0.9px;--e-global-typography-2a9a9cf-font-family:"Instrument Sans";--e-global-typography-2a9a9cf-font-size:32px;--e-global-typography-2a9a9cf-font-weight:500;--e-global-typography-2a9a9cf-text-transform:none;--e-global-typography-2a9a9cf-line-height:1.2em;--e-global-typography-2a9a9cf-letter-spacing:-0.8px;--e-global-typography-8e643e6-font-family:"Instrument Sans";--e-global-typography-8e643e6-font-size:24px;--e-global-typography-8e643e6-font-weight:500;--e-global-typography-8e643e6-text-transform:none;--e-global-typography-8e643e6-line-height:1.2em;--e-global-typography-8e643e6-letter-spacing:-0.7px;--e-global-typography-ed1c829-font-family:"Instrument Sans";--e-global-typography-ed1c829-font-size:20px;--e-global-typography-ed1c829-font-weight:500;--e-global-typography-ed1c829-text-transform:none;--e-global-typography-ed1c829-line-height:1.2em;--e-global-typography-ed1c829-letter-spacing:-0.4px;--e-global-typography-63ff56c-font-family:"Public Sans";--e-global-typography-63ff56c-font-size:14px;--e-global-typography-63ff56c-font-weight:500;--e-global-typography-63ff56c-letter-spacing:0.6px;--e-global-typography-dbc0204-font-family:"Public Sans";--e-global-typography-dbc0204-font-size:14px;--e-global-typography-dbc0204-font-weight:500;--e-global-typography-dbc0204-line-height:1.1em;--e-global-typography-dbc0204-letter-spacing:0.1px;--e-global-typography-0c74ed6-font-family:"Public Sans";--e-global-typography-0c74ed6-font-size:14px;--e-global-typography-0c74ed6-font-weight:400;--e-global-typography-0c74ed6-text-transform:none;--e-global-typography-0c74ed6-line-height:1.5em;--e-global-typography-f12db44-font-family:"Public Sans";--e-global-typography-f12db44-font-size:18px;--e-global-typography-f12db44-font-weight:400;--e-global-typography-f12db44-text-transform:none;--e-global-typography-f12db44-line-height:1.4em;--e-global-typography-f12db44-letter-spacing:-0.2px;--e-global-typography-227eb91-font-family:"Public Sans";--e-global-typography-227eb91-font-size:16px;--e-global-typography-227eb91-font-weight:600;--e-global-typography-227eb91-line-height:1.2em;--e-global-typography-227eb91-letter-spacing:-0.1px;color:#245C79;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );background-position:center center;background-repeat:repeat-y;background-size:1220px auto;}.elementor-kit-13 e-page-transition{background-color:#FFBC7D;}.elementor-kit-13 h1{font-family:var( --e-global-typography-5d11618-font-family ), Sans-serif;font-size:var( --e-global-typography-5d11618-font-size );font-weight:var( --e-global-typography-5d11618-font-weight );text-transform:var( --e-global-typography-5d11618-text-transform );line-height:var( --e-global-typography-5d11618-line-height );letter-spacing:var( --e-global-typography-5d11618-letter-spacing );word-spacing:var( --e-global-typography-5d11618-word-spacing );}.elementor-kit-13 h2{font-family:var( --e-global-typography-c0c00e9-font-family ), Sans-serif;font-size:var( --e-global-typography-c0c00e9-font-size );font-weight:var( --e-global-typography-c0c00e9-font-weight );text-transform:var( --e-global-typography-c0c00e9-text-transform );line-height:var( --e-global-typography-c0c00e9-line-height );letter-spacing:var( --e-global-typography-c0c00e9-letter-spacing );word-spacing:var( --e-global-typography-c0c00e9-word-spacing );}.elementor-kit-13 h3{font-family:var( --e-global-typography-973c7a1-font-family ), Sans-serif;font-size:var( --e-global-typography-973c7a1-font-size );font-weight:var( --e-global-typography-973c7a1-font-weight );text-transform:var( --e-global-typography-973c7a1-text-transform );line-height:var( --e-global-typography-973c7a1-line-height );letter-spacing:var( --e-global-typography-973c7a1-letter-spacing );word-spacing:var( --e-global-typography-973c7a1-word-spacing );}.elementor-kit-13 h4{font-family:var( --e-global-typography-2a9a9cf-font-family ), Sans-serif;font-size:var( --e-global-typography-2a9a9cf-font-size );font-weight:var( --e-global-typography-2a9a9cf-font-weight );text-transform:var( --e-global-typography-2a9a9cf-text-transform );line-height:var( --e-global-typography-2a9a9cf-line-height );letter-spacing:var( --e-global-typography-2a9a9cf-letter-spacing );word-spacing:var( --e-global-typography-2a9a9cf-word-spacing );}.elementor-kit-13 h5{font-family:var( --e-global-typography-8e643e6-font-family ), Sans-serif;font-size:var( --e-global-typography-8e643e6-font-size );font-weight:var( --e-global-typography-8e643e6-font-weight );text-transform:var( --e-global-typography-8e643e6-text-transform );line-height:var( --e-global-typography-8e643e6-line-height );letter-spacing:var( --e-global-typography-8e643e6-letter-spacing );word-spacing:var( --e-global-typography-8e643e6-word-spacing );}.elementor-kit-13 h6{font-family:var( --e-global-typography-ed1c829-font-family ), Sans-serif;font-size:var( --e-global-typography-ed1c829-font-size );font-weight:var( --e-global-typography-ed1c829-font-weight );text-transform:var( --e-global-typography-ed1c829-text-transform );line-height:var( --e-global-typography-ed1c829-line-height );letter-spacing:var( --e-global-typography-ed1c829-letter-spacing );word-spacing:var( --e-global-typography-ed1c829-word-spacing );}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{font-family:var( --e-global-typography-dbc0204-font-family ), Sans-serif;font-size:var( --e-global-typography-dbc0204-font-size );font-weight:var( --e-global-typography-dbc0204-font-weight );line-height:var( --e-global-typography-dbc0204-line-height );letter-spacing:var( --e-global-typography-dbc0204-letter-spacing );word-spacing:var( --e-global-typography-dbc0204-word-spacing );border-style:solid;border-width:0px 0px 0px 0px;border-radius:100px 100px 100px 100px;}.elementor-kit-13 label{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-13 input:not([type="button"]):not([type="submit"]),.elementor-kit-13 textarea,.elementor-kit-13 .elementor-field-textual{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );border-style:solid;border-width:1px 1px 1px 1px;border-radius:12px 12px 12px 12px;}.elementor-kit-13 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-13 textarea:focus,.elementor-kit-13 .elementor-field-textual:focus{border-style:solid;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1560px;}.e-con{--container-max-width:1560px;--container-default-padding-top:24px;--container-default-padding-right:24px;--container-default-padding-bottom:24px;--container-default-padding-left:24px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-13{--e-global-typography-5d11618-font-size:44px;--e-global-typography-5d11618-line-height:1.1em;--e-global-typography-c0c00e9-font-size:40px;--e-global-typography-c0c00e9-line-height:1.2em;--e-global-typography-973c7a1-font-size:28px;--e-global-typography-973c7a1-line-height:1.2em;--e-global-typography-2a9a9cf-font-size:24px;--e-global-typography-2a9a9cf-line-height:1.2em;--e-global-typography-8e643e6-font-size:22px;--e-global-typography-8e643e6-line-height:1.1em;--e-global-typography-ed1c829-font-size:16px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );background-size:calc(100vw - 60px) auto;}.elementor-kit-13 h1{font-size:var( --e-global-typography-5d11618-font-size );line-height:var( --e-global-typography-5d11618-line-height );letter-spacing:var( --e-global-typography-5d11618-letter-spacing );word-spacing:var( --e-global-typography-5d11618-word-spacing );}.elementor-kit-13 h2{font-size:var( --e-global-typography-c0c00e9-font-size );line-height:var( --e-global-typography-c0c00e9-line-height );letter-spacing:var( --e-global-typography-c0c00e9-letter-spacing );word-spacing:var( --e-global-typography-c0c00e9-word-spacing );}.elementor-kit-13 h3{font-size:var( --e-global-typography-973c7a1-font-size );line-height:var( --e-global-typography-973c7a1-line-height );letter-spacing:var( --e-global-typography-973c7a1-letter-spacing );word-spacing:var( --e-global-typography-973c7a1-word-spacing );}.elementor-kit-13 h4{font-size:var( --e-global-typography-2a9a9cf-font-size );line-height:var( --e-global-typography-2a9a9cf-line-height );letter-spacing:var( --e-global-typography-2a9a9cf-letter-spacing );word-spacing:var( --e-global-typography-2a9a9cf-word-spacing );}.elementor-kit-13 h5{font-size:var( --e-global-typography-8e643e6-font-size );line-height:var( --e-global-typography-8e643e6-line-height );letter-spacing:var( --e-global-typography-8e643e6-letter-spacing );word-spacing:var( --e-global-typography-8e643e6-word-spacing );}.elementor-kit-13 h6{font-size:var( --e-global-typography-ed1c829-font-size );line-height:var( --e-global-typography-ed1c829-line-height );letter-spacing:var( --e-global-typography-ed1c829-letter-spacing );word-spacing:var( --e-global-typography-ed1c829-word-spacing );}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{font-size:var( --e-global-typography-dbc0204-font-size );line-height:var( --e-global-typography-dbc0204-line-height );letter-spacing:var( --e-global-typography-dbc0204-letter-spacing );word-spacing:var( --e-global-typography-dbc0204-word-spacing );}.elementor-kit-13 label{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-13 input:not([type="button"]):not([type="submit"]),.elementor-kit-13 textarea,.elementor-kit-13 .elementor-field-textual{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:640px){.elementor-kit-13{--e-global-typography-5d11618-font-size:36px;--e-global-typography-c0c00e9-font-size:32px;--e-global-typography-973c7a1-font-size:24px;--e-global-typography-2a9a9cf-font-size:22px;--e-global-typography-8e643e6-font-size:18px;--e-global-typography-f12db44-font-size:18px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );background-size:calc(100vw - 40px) auto;}.elementor-kit-13 h1{font-size:var( --e-global-typography-5d11618-font-size );line-height:var( --e-global-typography-5d11618-line-height );letter-spacing:var( --e-global-typography-5d11618-letter-spacing );word-spacing:var( --e-global-typography-5d11618-word-spacing );}.elementor-kit-13 h2{font-size:var( --e-global-typography-c0c00e9-font-size );line-height:var( --e-global-typography-c0c00e9-line-height );letter-spacing:var( --e-global-typography-c0c00e9-letter-spacing );word-spacing:var( --e-global-typography-c0c00e9-word-spacing );}.elementor-kit-13 h3{font-size:var( --e-global-typography-973c7a1-font-size );line-height:var( --e-global-typography-973c7a1-line-height );letter-spacing:var( --e-global-typography-973c7a1-letter-spacing );word-spacing:var( --e-global-typography-973c7a1-word-spacing );}.elementor-kit-13 h4{font-size:var( --e-global-typography-2a9a9cf-font-size );line-height:var( --e-global-typography-2a9a9cf-line-height );letter-spacing:var( --e-global-typography-2a9a9cf-letter-spacing );word-spacing:var( --e-global-typography-2a9a9cf-word-spacing );}.elementor-kit-13 h5{font-size:var( --e-global-typography-8e643e6-font-size );line-height:var( --e-global-typography-8e643e6-line-height );letter-spacing:var( --e-global-typography-8e643e6-letter-spacing );word-spacing:var( --e-global-typography-8e643e6-word-spacing );}.elementor-kit-13 h6{font-size:var( --e-global-typography-ed1c829-font-size );line-height:var( --e-global-typography-ed1c829-line-height );letter-spacing:var( --e-global-typography-ed1c829-letter-spacing );word-spacing:var( --e-global-typography-ed1c829-word-spacing );}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{font-size:var( --e-global-typography-dbc0204-font-size );line-height:var( --e-global-typography-dbc0204-line-height );letter-spacing:var( --e-global-typography-dbc0204-letter-spacing );word-spacing:var( --e-global-typography-dbc0204-word-spacing );}.elementor-kit-13 label{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );word-spacing:var( --e-global-typography-secondary-word-spacing );}.elementor-kit-13 input:not([type="button"]):not([type="submit"]),.elementor-kit-13 textarea,.elementor-kit-13 .elementor-field-textual{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ===================================================================== UNLIKE website: custom styles (one place for all custom CSS) Where: Elementor > Site Settings > Custom CSS Owner: Novel Digital. Started 10 Nov 2026. Rule: content and layout live in Elementor widgets. This file only adds what the widget controls cannot do (motion, a few layout details). Every class below starts with "unlike-" and is set in the widget's Advanced > CSS Classes field, so you can search for it in the editor. ===================================================================== */ /* --------------------------------------------------------------------- 1. HOMEPAGE HERO (video, colour curtains, words rising) Widgets: container "unlike-hero" (background video set in Style > Background), three containers "unlike-hero-curtain", text container "unlike-hero-text". The intro plays once on page load. The word split is done by the Custom Code snippet "UNLIKE motion". --------------------------------------------------------------------- */ .unlike-hero { position: relative; overflow: hidden; } /* The background video starts close and pulls back. */ .unlike-hero .elementor-background-video-container { transform-origin: 46% 70%; animation: unlike-pull-back 1.3s cubic-bezier(.16, .8, .2, 1) .3s both; } /* Colour curtains: coral (with "Question the obvious."), yellow, blue. They cover the video, then lift one after the other. */ .unlike-hero > .unlike-hero-curtain { position: absolute !important; inset: 0; z-index: 5; pointer-events: none; animation: unlike-curtain-lift .6s cubic-bezier(.7, 0, .2, 1) both; } .unlike-hero > .unlike-hero-curtain-blue { animation-delay: .42s; } .unlike-hero > .unlike-hero-curtain-yellow { animation-delay: .36s; } .unlike-hero > .unlike-hero-curtain-coral { animation-delay: .30s; } .unlike-hero-curtain-line { animation: unlike-fade-in .3s ease both; } /* The text block sits in the upper part, over the sand. */ .unlike-hero > .unlike-hero-text { position: absolute !important; top: 0; left: 0; right: 0; height: 62%; z-index: 2; } /* Keep the main line on two lines on desktop: "... can still be / the wrong one." */ .unlike-hero-words .elementor-heading-title { max-width: 1120px; margin: 0 auto; } /* Each word rises in turn (spans added by the snippet, delay in --unlike-delay). */ .unlike-word { display: inline-block; opacity: 0; animation: unlike-rise .5s cubic-bezier(.2, .8, .2, 1) var(--unlike-delay, .55s) both; } /* Supporting lines and buttons follow the words. */ .unlike-hero .unlike-reveal { opacity: 0; animation: unlike-rise .5s cubic-bezier(.2, .8, .2, 1) 1.1s both; } .unlike-hero .unlike-reveal-late { animation-delay: 1.22s; } @keyframes unlike-curtain-lift { from { transform: none; } to { transform: translateY(-101%); } } @keyframes unlike-pull-back { from { transform: scale(1.5); } to { transform: scale(1.08); } } @keyframes unlike-rise { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } } @keyframes unlike-fade-in { from { opacity: 0; } to { opacity: 1; } } /* --------------------------------------------------------------------- 2. BRACES { } around a heading (approved brand device) Add class "unlike-braces" to a Heading widget. Braces are blue on coral sections; add "unlike-braces-coral" on blue sections (footer). --------------------------------------------------------------------- */ .unlike-braces .elementor-heading-title::before { content: "{"; margin-right: .28em; color: #307EA5; } .unlike-braces .elementor-heading-title::after { content: "}"; margin-left: .28em; color: #307EA5; } .unlike-braces-coral .elementor-heading-title::before, .unlike-braces-coral .elementor-heading-title::after { color: #ED6E50; } /* With motion on, the braces close in around the words as the heading appears. */ .unlike-braces .elementor-heading-title::before, .unlike-braces .elementor-heading-title::after { display: inline-block; transition: transform .5s cubic-bezier(.2, .8, .2, 1); } .unlike-motion .unlike-braces:not(.is-in) .elementor-heading-title::before { transform: translateX(-.35em); } .unlike-motion .unlike-braces:not(.is-in) .elementor-heading-title::after { transform: translateX(.35em); } /* --------------------------------------------------------------------- 3. TEXT WIDTHS (comfortable line length for long paragraphs) --------------------------------------------------------------------- */ .unlike-measure-780 { max-width: 780px; } .unlike-measure-960 { max-width: 960px; } .unlike-measure-880 { max-width: 880px; } .unlike-measure-760 { max-width: 760px; } .unlike-measure-620 { max-width: 620px; } .unlike-measure-680 { max-width: 680px; } .unlike-measure-640 { max-width: 640px; } .unlike-measure-440 { max-width: 440px; } .unlike-measure-620 { max-width: 620px; } .unlike-measure-560 { max-width: 560px; } .unlike-measure-520 { max-width: 520px; } /* --------------------------------------------------------------------- 4. LINKS AND BUTTONS (small interaction details) --------------------------------------------------------------------- */ .unlike-underline-link a { text-decoration: underline; text-underline-offset: 6px; } .elementor-heading-title a:hover { opacity: .75; } .elementor-button { transition: background-color .2s ease, color .2s ease, transform .15s ease; } .elementor-button:active { transform: translateY(1px); } /* ASK FIRST covers lift slightly on hover. */ .unlike-episode-cover img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); } .unlike-episode-cover:hover img { transform: translateY(-6px); } /* --------------------------------------------------------------------- 5. "BUSINESS QUESTIONS" TABS Nested Tabs widget "unlike-question-tabs": titles as a list on the left, the white card on the right (colours are set in the widget). --------------------------------------------------------------------- */ .unlike-question-tabs .e-n-tab-title { justify-content: flex-start; text-align: left; min-height: 64px; } .unlike-question-card .unlike-question-cta { align-self: flex-start; } /* The card's question fades in when a topic is chosen. */ .unlike-question-tabs .e-n-tabs-content > .e-con.e-active { animation: unlike-fade-in .18s ease both; } .unlike-question-tabs .e-n-tab-title { transition: background-color .18s ease, color .18s ease; } /* Only the selected topic is blue; the others stay quiet. */ .unlike-question-tabs .e-n-tab-title[aria-selected="false"] { background-color: transparent !important; color: #245C79 !important; } .unlike-question-tabs .e-n-tab-title[aria-selected="false"]:hover { background-color: rgba(48, 126, 165, .12) !important; } .unlike-question-tabs .e-n-tab-title[aria-selected="true"] { background-color: #307EA5 !important; color: #FFFFFF !important; } .unlike-question-tabs .e-n-tab-title:focus-visible { outline: 2px solid #245C79; outline-offset: 3px; } /* --------------------------------------------------------------------- 6. CONTACT FORM STATES (Elementor Pro Form "unlike-contact-form") Messages, errors and focus in brand colours instead of the defaults. --------------------------------------------------------------------- */ .unlike-contact-form .elementor-message-success { color: #245C79; font-weight: 600; } .unlike-contact-form .elementor-message-danger { color: #245C79; } .unlike-contact-form .elementor-error .elementor-field { outline: 2px solid #ED6E50; } .unlike-contact-form .elementor-field:focus { outline: 2px solid #245C79; outline-offset: 3px; } .unlike-contact-form .elementor-field-textual, .unlike-contact-form select.elementor-field { min-height: 56px; padding-top: 14px; padding-bottom: 14px; } .unlike-contact-form textarea.elementor-field { min-height: 144px; } .unlike-contact-form .elementor-field-textual, .unlike-contact-form select.elementor-field { padding-left: 18px; padding-right: 18px; font-size: 18px; } .unlike-contact-form .elementor-field-type-submit { margin-top: 16px; } .unlike-contact-form .elementor-button[disabled] { opacity: .7; } /* --------------------------------------------------------------------- 7. SCROLL REVEALS (set up by the Custom Code snippet "UNLIKE motion") Each widget rises 12px and fades in when it enters the screen, one after the other within a section. Only runs when motion is allowed. --------------------------------------------------------------------- */ .unlike-motion .unlike-reveal-item { opacity: 0; transform: translateY(12px); transition: opacity .45s cubic-bezier(.2, .8, .2, 1), transform .45s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--unlike-stagger, 0s); } .unlike-motion .unlike-reveal-item.is-in { opacity: 1; transform: none; } /* Images settle from a slightly larger size instead of moving up. */ .unlike-motion .elementor-widget-image.unlike-reveal-item { transform: scale(1.03); } .unlike-motion .elementor-widget-image.unlike-reveal-item.is-in { transform: none; } /* --------------------------------------------------------------------- 8. HEADER (Theme Builder template "UNLIKE header", sticky) Gets slimmer with a hairline once the page scrolls. --------------------------------------------------------------------- */ .unlike-header { transition: padding .2s ease, box-shadow .2s ease; } .unlike-header.is-scrolled { padding-top: 14px !important; padding-bottom: 14px !important; box-shadow: 0 1px 0 rgba(36, 92, 121, .12); } .unlike-header .unlike-logo img { transition: width .2s ease; } .unlike-header.is-scrolled .unlike-logo img { width: 120px; } .unlike-nav .elementor-nav-menu--main .elementor-item.elementor-item-active:not(:hover)::after { opacity: 0; } /* --------------------------------------------------------------------- 9. FOOTER (Theme Builder template "UNLIKE footer") Colour blocks from the coming soon page: coral 2x2, yellow, grey, grey, sitting on the bottom edge. Grid areas set here. --------------------------------------------------------------------- */ .unlike-blocks { grid-template-columns: 2fr 1fr 1fr !important; grid-template-rows: 1fr 1fr !important; flex-shrink: 0; } .unlike-block-coral { grid-column: 1; grid-row: 1 / span 2; } .unlike-block-yellow { grid-column: 2; grid-row: 1; } .unlike-block-grey { grid-column: 3; grid-row: 1; } .unlike-block-grey-2 { grid-column: 2; grid-row: 2; } /* Header and footer line up with the 1200px content column of the page sections. */ @media (min-width: 1025px) { .unlike-header { padding-left: max(64px, calc((100% - 1200px) / 2)) !important; padding-right: max(64px, calc((100% - 1200px) / 2)) !important; } .unlike-footer { padding-left: max(64px, calc((100% - 1200px) / 2)) !important; padding-right: 0 !important; } } .unlike-footer-label .elementor-heading-title { opacity: .8; } .unlike-footer-links a:hover .elementor-icon-list-text { text-decoration: underline; text-underline-offset: 4px; } /* --------------------------------------------------------------------- 12. TAP TARGETS, ANCHORS AND SMALL ALIGNMENT FIXES (audit round 1) --------------------------------------------------------------------- */ /* Every link and control is at least 44px tall. */ .unlike-nav .elementor-nav-menu--main .elementor-item { min-height: 44px; display: flex; align-items: center; } .unlike-footer-links .elementor-icon-list-item > a { display: inline-flex; align-items: center; min-height: 44px; } .unlike-footer .elementor-heading-title a, .unlike-hero .elementor-heading-title a, .unlike-underline-link a, #contact .elementor-heading-title a { display: inline-flex; align-items: center; min-height: 44px; } /* Menu links land below the sticky header. */ [id] { scroll-margin-top: 96px; } @media (max-width: 767px) { [id] { scroll-margin-top: 80px; } } /* Counters line up with their captions. */ .unlike-stat .elementor-counter, .unlike-stat .elementor-counter-number-wrapper { justify-content: flex-start; text-align: left; } .unlike-stat .elementor-counter-title { display: none; } .unlike-stat .elementor-counter-number-prefix, .unlike-stat .elementor-counter-number-suffix { flex-grow: 0; } /* The founder photo fills its column to the bottom (no white strip). */ .unlike-founder-photo { flex-grow: 1; } .unlike-founder-photo, .unlike-founder-photo .elementor-widget-container, .unlike-founder-photo img { height: 100% !important; } /* Lines that must not break. */ .unlike-nowrap .elementor-heading-title, .elementor-button-text { white-space: nowrap; } /* Video pause control (wired by the "UNLIKE motion" snippet). */ .unlike-video-toggle .elementor-button { min-height: 44px; } /* --------------------------------------------------------------------- 13. PHONE (up to 767px) --------------------------------------------------------------------- */ @media (max-width: 767px) { .unlike-hero > .unlike-hero-text { height: 64%; } .unlike-question-tabs .e-n-tab-title { min-height: 48px; } .unlike-blocks { align-self: flex-end; margin-right: -24px; } /* ASK FIRST covers scroll sideways on phones. */ .unlike-episode-covers { overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -24px; padding-right: 24px; } .unlike-episode-covers > .elementor-element { flex: 0 0 72% !important; scroll-snap-align: start; } } /* --------------------------------------------------------------------- 14. REDUCED MOTION (visitor's system setting): no intro, everything visible. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .unlike-hero > .unlike-hero-curtain { display: none; } .unlike-hero .elementor-background-video-container { display: none; } .unlike-hero .elementor-background-video-container, .unlike-word, .unlike-hero .unlike-reveal, .unlike-hero-curtain-line, .unlike-reveal-item, .unlike-episode-cover img { animation: none; opacity: 1; transform: none; } } /* END UNLIKE custom styles *//* End custom CSS */