/* fonts.css */ /* Self-hosted fonts: only the weights the site uses (Inter 400–700, Instrument Sans 400–600), latin + latin-ext (č ć š ž đ). Variable woff2 files cut to these weight ranges; no italics, no other scripts. */ @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/instrument-sans-latin-ext-400-600.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/assets/fonts/instrument-sans-latin-400-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin-ext-400-700.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin-400-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* base.css */ /* WordPress core inline styles */ img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px} /*# sourceURL=wp-img-auto-sizes-contain-inline-css */ :root{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;}:root{ --wp--style--global--content-size: 800px;--wp--style--global--wide-size: 1200px; }:where(body){ margin: 0; }:where(.wp-site-blocks) > *{ margin-block-start: 24px; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child{ margin-block-start: 0; }:where(.wp-site-blocks) > :last-child{ margin-block-end: 0; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 24px;}:root :where(.is-layout-grid){gap: 24px;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;} :root :where(.wp-block-icon svg){width: 24px;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} /*# sourceURL=global-styles-inline-css */ /* qi-addons-for-ui-grid-style-css */ /* qi-addons-for-ui-helper-parts-style-css */ @keyframes qi-addons-for-ui-fade-in{0%{opacity:0;visibility:hidden;z-index:102}100%{opacity:1;visibility:visible;z-index:102}}@keyframes qi-addons-for-ui-fade-out{0%{opacity:1;visibility:visible;z-index:102}100%{opacity:0;visibility:hidden;z-index:0}}@keyframes qodef-animate-underline-from-left{0%{transform:scaleX(1);transform-origin:right}37%{transform:scaleX(0);transform-origin:right}38%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}@keyframes qodef-animate-underline-from-right{0%{transform:scaleX(1);transform-origin:left}37%{transform:scaleX(0);transform-origin:left}38%{transform:scaleX(0);transform-origin:right}100%{transform:scaleX(1);transform-origin:right}}@keyframes qodef-animate-underline-multiline{0%{background-size:100% 87%;background-position-x:right}38%{background-size:0 87%;background-position-x:right}39%{background-size:0 87%;background-position-x:left}100%{background-size:100% 87%;background-position-x:left}}@keyframes qodef-animate-highlight{0%{background-size:0 100%;background-position-x:left}100%{background-size:100% 100%;background-position-x:left}}.qodef-shortcode h1 a,.qodef-shortcode h2 a,.qodef-shortcode h3 a,.qodef-shortcode h4 a,.qodef-shortcode h5 a,.qodef-shortcode h6 a{font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;line-height:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit} /* qi-addons-for-ui-style-css */ .qodef-qi-animated-text .qodef-m-title{overflow:hidden}.qodef-qi-animated-text .qodef-e-word{display:inline-block}.qodef-qi-animated-text.qodef--appear-from-bottom .qodef-e-word{opacity:0;transform:translateY(50px);transition:opacity .25s,transform .45s cubic-bezier(.26,-.14,0,1.01)}.qodef-qi-animated-text.qodef--appear-from-bottom.qodef-qi--appeared .qodef-e-word{opacity:1;transform:translateX(0) translateZ(0)}@keyframes qodef-qi-animate-underline-multiline-thick{0%{background-size:100% 93%;background-position-x:right}38%{background-size:0 93%;background-position-x:right}39%{background-size:0 93%;background-position-x:left}100%{background-size:100% 93%;background-position-x:left}}@keyframes qode-move-horizontal-normal-text-marquee{0%{transform:translateX(0) translateZ(0)}100%{transform:translateX(-100%) translateZ(0)}}@keyframes qode-move-horizontal-normal-text-marquee-copy{0%{transform:translateX(100%) translateZ(0)}100%{transform:translateX(0) translateZ(0)}}@keyframes qode-move-vertical-normal-text-marquee{0%{transform:translateY(0) translateZ(0)}100%{transform:translateY(-100%) translateZ(0)}}@keyframes qode-move-vertical-normal-text-marquee-copy{0%{transform:translateY(100%) translateZ(0)}100%{transform:translateY(0) translateZ(0)}}@keyframes qode-move-horizontal-reverse-text-marquee{0%{transform:translateX(0) translateZ(0)}100%{transform:translateX(100%) translateZ(0)}}@keyframes qode-move-horizontal-reverse-text-marquee-copy{0%{transform:translateX(-100%) translateZ(0)}100%{transform:translateX(0) translateZ(0)}}@keyframes qode-move-vertical-reverse-text-marquee{0%{transform:translateY(0) translateZ(0)}100%{transform:translateY(100%) translateZ(0)}}@keyframes qode-move-vertical-reverse-text-marquee-copy{0%{transform:translateY(-100%) translateZ(0)}100%{transform:translateY(0) translateZ(0)}} /* hello-ui-css */ html{line-height:1.15;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:border-box}body{background-color:#fff;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}h1,h2,h3,h4,h5,h6{color:inherit;font-family:inherit;font-weight:500;line-height:1.2;margin-block-end:1rem;margin-block-start:.5rem}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-block-end:.9rem;margin-block-start:0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em;white-space:pre-wrap}a{background-color:transparent;color:#c36;text-decoration:none}a:active,a:hover{color:#336}a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}abbr[title]{border-block-end:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;height:auto;max-width:100%}details{display:block}summary{display:list-item}figcaption{color:#333;font-size:16px;font-style:italic;font-weight:400;line-height:1.4}[hidden],template{display:none}@media print{*,:after,:before{background:transparent!important;box-shadow:none!important;color:#000!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{-moz-column-break-inside:avoid;border:1px solid #ccc;break-inside:avoid}thead{display:table-header-group}img,tr{-moz-column-break-inside:avoid;break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{-moz-column-break-after:avoid;break-after:avoid}}label{display:inline-block;line-height:1;vertical-align:middle}button,input,optgroup,select,textarea{font-family:inherit;font-size:1rem;line-height:1.5;margin:0}input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],select,textarea{border:1px solid #666;border-radius:3px;padding:.5rem 1rem;transition:all .3s;width:100%}input[type=date]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,select:focus,textarea:focus{border-color:#333}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;width:auto}[type=button],[type=submit],button{background-color:transparent;border:1px solid #c36;border-radius:3px;color:#c36;display:inline-block;font-size:1rem;font-weight:400;padding:.5rem 1rem;text-align:center;transition:all .3s;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}[type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover{background-color:#c36;color:#fff;text-decoration:none}[type=button]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}select{display:block}table{background-color:transparent;border-collapse:collapse;border-spacing:0;font-size:.9em;margin-block-end:15px;width:100%}table td,table th{border:1px solid hsla(0,0%,50%,.502);line-height:1.5;padding:15px;vertical-align:top}table th{font-weight:700}table tfoot th,table thead th{font-size:1em}table caption+thead tr:first-child td,table caption+thead tr:first-child th,table colgroup+thead tr:first-child td,table colgroup+thead tr:first-child th,table thead:first-child tr:first-child td,table thead:first-child tr:first-child th{border-block-start:1px solid hsla(0,0%,50%,.502)}table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th{background-color:hsla(0,0%,50%,.071)}table tbody tr:hover>td,table tbody tr:hover>th{background-color:hsla(0,0%,50%,.102)}table tbody+tbody{border-block-start:2px solid hsla(0,0%,50%,.502)}@media(max-width:767px){table table{font-size:.8em}table table td,table table th{line-height:1.3;padding:7px}table table th{font-weight:400}}dd,dl,dt,li,ol,ul{background:transparent;border:0;font-size:100%;margin-block-end:0;margin-block-start:0;outline:0;vertical-align:baseline}[tabindex]:not([tabindex="-1"]):not([contenteditable]):focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 4px #fff;outline:2px solid #000;outline-offset:2px}[tabindex]:not([tabindex="-1"]):not([contenteditable]):focus:not(:focus-visible),a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),select:focus:not(:focus-visible),textarea:focus:not(:focus-visible){box-shadow:none;outline:none} .page-content a {text-decoration:underline}.hide{display:none!important}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px;word-wrap:normal!important}.screen-reader-text:focus{background-color:#eee;clip:auto!important;clip-path:none;color:#333;display:block;font-size:1rem;height:auto;left:5px;line-height:normal;padding:12px 24px;text-decoration:none;top:5px;width:auto;z-index:100000}body:not([class*=ui-page-]) .site-main {margin-inline-end:auto;margin-inline-start:auto;width:100%}@custom-media --hello-screen-xs-and-below (width < 576px);@custom-media --hello-screen-xs-and-above (width >= 576px);@custom-media --hello-screen-xs-only (0 <= width < 576px);@custom-media --hello-screen-sm-and-below (width < 768px);@custom-media --hello-screen-sm-and-above (width >= 768px);@custom-media --hello-screen-sm-only (576px <= width < 768px);@custom-media --hello-screen-md-and-below (width < 992px);@custom-media --hello-screen-md-and-above (width >= 992px);@custom-media --hello-screen-md-only (768px <= width < 992px);@custom-media --hello-screen-xl-and-below (width < 1200px);@custom-media --hello-screen-xl-and-above (width >= 1200px);@custom-media --hello-screen-xl-only (992px <= width < 1200px);@media(max-width:575px){body:not([class*=ui-page-]) .site-main {padding-inline-end:10px;padding-inline-start:10px}}@media(min-width:576px){body:not([class*=ui-page-]) .site-main {max-width:500px}}@media(min-width:768px){body:not([class*=ui-page-]) .site-main {max-width:600px}}@media(min-width:992px){body:not([class*=ui-page-]) .site-main {max-width:800px}}@media(min-width:1200px){body:not([class*=ui-page-]) .site-main {max-width:1140px}} /* ui-frontend-css */ :root{--direction-multiplier:1}html[dir=rtl] {--direction-multiplier:-1}.ui-hidden{display:none}.screen-reader-text, .screen-reader-text span {height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;top:-10000em;width:1px;clip:rect(0,0,0,0);border:0}.ui *,.ui :after,.ui :before{box-sizing:border-box}.ui a{box-shadow:none;text-decoration:none}.ui hr{background-color:transparent;margin:0}.ui img{border:none;border-radius:0;box-shadow:none;height:auto;max-width:100%}.ui .ui-widget:not(.ui-widget-text-editor):not(.ui-widget-theme-post-content) figure{margin:0}.ui embed,.ui iframe,.ui object,.ui video{border:none;line-height:1;margin:0;max-width:100%;width:100%}.ui-widget-wrap .ui-element.ui-widget__width-auto {max-width:100%}.ui-element{--flex-direction:initial;--flex-wrap:initial;--justify-content:initial;--align-items:initial;--align-content:initial;--gap:initial;--flex-basis:initial;--flex-grow:initial;--flex-shrink:initial;--order:initial;--align-self:initial;align-self:var(--align-self);flex-basis:var(--flex-basis);flex-grow:var(--flex-grow);flex-shrink:var(--flex-shrink);order:var(--order)}.ui-element:where(.e-con-full,.ui-widget){align-content:var(--align-content);align-items:var(--align-items);flex-direction:var(--flex-direction);flex-wrap:var(--flex-wrap);gap:var(--row-gap) var(--column-gap);justify-content:var(--justify-content)}.ui-invisible{visibility:hidden}.ui-align-center{text-align:center}.ui-align-left{text-align:left}.ui-align-center .ui-button, .ui-align-left .ui-button {width:auto}@media (max-width:1024px){.ui-tablet-align-left{text-align:left}.ui-tablet-align-left .ui-button {width:auto}}@media (max-width:767px){.ui-mobile-align-justify .ui-button{width:100%}}:root{--page-title-display:block}@keyframes eicon-spin{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.ui-section{position:relative}.ui-section .ui-container{display:flex;margin-inline:auto;position:relative}@media (max-width:1024px){.ui-section .ui-container{flex-wrap:wrap}}.ui-section.ui-section-boxed>.ui-container{max-width:1140px}.ui-widget-wrap{align-content:flex-start;flex-wrap:wrap;position:relative;width:100%}.ui:not(.ui-bc-flex-widget) .ui-widget-wrap{display:flex}.ui-widget-wrap>.ui-element{width:100%}.ui-widget{position:relative}.ui-widget:not(:last-child){margin-block-end:var(--kit-widget-spacing,20px)}.ui-widget:not(:last-child).ui-widget__width-auto {margin-block-end:0}.ui-column{display:flex;min-height:1px;position:relative}.ui-column-gap-default>.ui-column>.ui-element-populated{padding:10px}.ui-inner-section .ui-column-gap-no .ui-element-populated{padding:0}@media (min-width:768px){.ui-column[data-col="10"] {width:10%}.ui-column[data-col="11"] {width:11.111%}.ui-column[data-col="12"] {width:12.5%}.ui-column[data-col="14"] {width:14.285%}.ui-column[data-col="16"] {width:16.666%}.ui-column[data-col="20"] {width:20%}.ui-column[data-col="25"] {width:25%}.ui-column[data-col="30"] {width:30%}.ui-column[data-col="33"] {width:33.333%}.ui-column[data-col="40"] {width:40%}.ui-column.ui-col-50,.ui-column[data-col="50"]{width:50%}.ui-column[data-col="60"] {width:60%}.ui-column[data-col="66"] {width:66.666%}.ui-column[data-col="70"] {width:70%}.ui-column[data-col="75"] {width:75%}.ui-column[data-col="80"] {width:80%}.ui-column[data-col="83"] {width:83.333%}.ui-column[data-col="90"] {width:90%}.ui-column.ui-col-100,.ui-column[data-col="100"]{width:100%}}@media (max-width:767px){.ui-column{width:100%}}.ui-grid{display:grid;grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.ui-grid .ui-grid-item{min-width:0}.ui-grid-3 .ui-grid{grid-template-columns:repeat(3,1fr)}@media (max-width:1024px){.ui-grid-tablet-2 .ui-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:767px){.ui-grid-mobile-1 .ui-grid{grid-template-columns:repeat(1,1fr)}}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}.ui-form-fields-wrapper{display:flex;flex-wrap:wrap}.ui-form-fields-wrapper.ui-labels-above .ui-field-group .ui-field-subgroup,.ui-form-fields-wrapper.ui-labels-above .ui-field-group>.ui-select-wrapper,.ui-form-fields-wrapper.ui-labels-above .ui-field-group>input,.ui-form-fields-wrapper.ui-labels-above .ui-field-group>textarea{flex-basis:100%;max-width:100%}.ui-field-group{align-items:center;flex-wrap:wrap}.ui-field-group.ui-field-type-submit{align-items:flex-end}.ui-field-group .ui-field-textual{background-color:transparent;border:1px solid #69727d;color:#1f2124;flex-grow:1;max-width:100%;vertical-align:middle;width:100%}.ui-field-group .ui-field-textual:focus{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);outline:0}.ui-field-group .ui-field-textual::-moz-placeholder{color:inherit;font-family:inherit;opacity:.6}.ui-field-group .ui-field-textual::placeholder{color:inherit;font-family:inherit;opacity:.6}.ui-field-group .ui-select-wrapper{display:flex;position:relative;width:100%}.ui-field-group .ui-select-wrapper select{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;flex-basis:100%;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;padding-inline-end:20px;text-transform:inherit}.ui-field-group .ui-select-wrapper:before{content:"\e92a";font-family:eicons;font-size:15px;inset-block-start:50%;inset-inline-end:10px;pointer-events:none;position:absolute;text-shadow:0 0 3px rgba(0,0,0,.3);transform:translateY(-50%)}.ui-field-subgroup{display:flex;flex-wrap:wrap}.ui-field-subgroup .ui-field-option label{display:inline-block}.ui-field-subgroup:not(.ui-subgroup-inline) .ui-field-option{flex-basis:100%}.ui-field-type-radio .ui-field-subgroup .ui-field-option input, .ui-field-type-radio .ui-field-subgroup .ui-field-option label {display:inline}.ui-field-label{cursor:pointer}.ui-mark-required .ui-field-label:after{color:red;content:"*";padding-inline-start:.2em}.ui-field-textual{border-radius:3px;font-size:15px;line-height:1.4;min-height:40px;padding:5px 14px}.ui-field-textual.ui-size-lg{border-radius:5px;font-size:18px;min-height:59px;padding:7px 20px}.ui-button-align-stretch .ui-field-type-submit:not(.e-form__buttons__wrapper) .ui-button{flex-basis:100%}.ui-button-align-stretch .e-form__buttons__wrapper{flex-basis:50%;flex-grow:1}.ui-button-align-stretch .e-form__buttons__wrapper__button{flex-basis:100%}.ui-error .ui-field{border-color:#d9534f}.ui-message{font-size:1em;line-height:1;margin:10px 0}.ui-message:before{content:"\e90e";display:inline-block;font-family:eicons;font-style:normal;font-weight:400;margin-inline-end:5px;vertical-align:middle}.ui-message.ui-message-danger{color:#d9534f}.ui-message.ui-message-danger:before{content:"\e87f"}.ui-form .ui-button{border:none;padding-block-end:0;padding-block-start:0}.ui-form .ui-button-content-wrapper,.ui-form .ui-button>span{display:flex;flex-direction:row;gap:5px;justify-content:center}.ui-form .ui-button.ui-size-sm{min-height:40px}.ui-form .ui-button.ui-size-lg{min-height:59px}.ui-element:where(:not(.e-con)):where(:not(.e-div-block-base)) .ui-widget-container,.ui-element:where(:not(.e-con)):where(:not(.e-div-block-base)):not(:has(.ui-widget-container)){transition:background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s)}.ui-button{background-color:#69727d;border-radius:3px;color:#fff;display:inline-block;fill:#fff;font-size:15px;line-height:1;padding:12px 24px;text-align:center;transition:all .3s}.ui-button:focus,.ui-button:hover,.ui-button:visited{color:#fff}.ui-button-content-wrapper{display:flex;flex-direction:row;gap:5px;justify-content:center}.ui-button-icon{align-items:center;display:flex}.ui-button-icon svg{height:auto;width:1em}.ui-button-icon .e-font-icon-svg{height:1em}.ui-button-text{display:inline-block}.ui-button.ui-size-lg{border-radius:5px;font-size:18px;padding:20px 40px}.ui-button span{text-decoration:inherit}.ui-icon{color:#69727d;display:inline-block;font-size:50px;line-height:1;text-align:center;transition:all .3s}.ui-icon:hover{color:#69727d}.ui-icon i,.ui-icon svg{display:block;height:1em;position:relative;width:1em}.ui-icon i:before,.ui-icon svg:before{left:50%;position:absolute;transform:translateX(-50%)}.animated{animation-duration:1.25s}@media (prefers-reduced-motion:reduce){.animated{animation:none!important}html *{transition-delay:0s!important;transition-duration:0s!important}}@media (max-width:767px){.ui .ui-hidden-mobile {display:none}}@media (min-width:768px) and (max-width:1024px){.ui .ui-hidden-tablet{display:none}}@media (min-width:1025px) and (max-width:99999px){.ui .ui-hidden-desktop{display:none}} /* ui-post-11-css */ .ui-kit-11{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#1A1A1A;--e-global-color-text:#C9C9C9;--e-global-color-accent:#FFFFFF;--e-global-typography-primary-font-family:"Instrument Sans";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Instrument Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:14px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:500;color:#E6E6E6;font-family:"Inter", Sans-serif;font-size:0.975rem;line-height:1.6rem;}.ui-kit-11 button,.ui-kit-11 input[type="button"],.ui-kit-11 input[type="submit"],.ui-kit-11 .ui-button{background-color:#E1FF04;font-family:"Instrument Sans", Sans-serif;font-size:1rem;color:#111111;border-radius:400px 400px 400px 400px;padding:20px 30px 20px 30px;}.ui-kit-11 button:hover,.ui-kit-11 button:focus,.ui-kit-11 input[type="button"]:hover,.ui-kit-11 input[type="button"]:focus,.ui-kit-11 input[type="submit"]:hover,.ui-kit-11 input[type="submit"]:focus,.ui-kit-11 .ui-button:hover,.ui-kit-11 .ui-button:focus{background-color:#FFFFFF;}.ui-kit-11 e-page-transition{background-color:#FFBC7D;}.ui-kit-11 a{color:#FFFFFF;font-weight:600;}.ui-kit-11 h1{color:var( --e-global-color-primary );font-family:"Instrument Sans", Sans-serif;font-size:5rem;font-weight:500;line-height:5rem;letter-spacing:-3px;}.ui-kit-11 h2{font-family:"Instrument Sans", Sans-serif;font-size:4rem;font-weight:600;line-height:4.5rem;letter-spacing:-1px;}.ui-kit-11 h3{color:var( --e-global-color-primary );font-family:"Instrument Sans", Sans-serif;font-size:2.5rem;font-weight:500;line-height:3rem;letter-spacing:-1px;}.ui-kit-11 h4{font-family:"Instrument Sans", Sans-serif;font-size:1.4rem;font-weight:500;line-height:1.9rem;letter-spacing:-0.5px;}.ui-section.ui-section-boxed > .ui-container{max-width:1140px;}.ui-widget:not(:last-child){--kit-widget-spacing:20px;}.ui-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}@media(max-width:1024px){.ui-kit-11 h1{font-size:4rem;line-height:4.5rem;letter-spacing:-2px;}.ui-kit-11 h2{font-size:3rem;line-height:3.5rem;}.ui-kit-11 h3{font-size:2rem;line-height:2.4rem;}.ui-kit-11 h4{font-size:1.2rem;line-height:1.2rem;}.ui-section.ui-section-boxed > .ui-container{max-width:1024px;}}@media(max-width:767px){.ui-kit-11 h1{font-size:3rem;line-height:3.3rem;letter-spacing:-2px;}.ui-kit-11 h2{font-size:2.5rem;line-height:3rem;}.ui-kit-11 h3{font-size:2rem;line-height:2.4rem;}.ui-kit-11 h4{font-size:1rem;line-height:1.3rem;}.ui-section.ui-section-boxed > .ui-container{max-width:767px;}} /* widget-nav-menu-css */ /*! ui-pro - v4.3.0 - 02-11-2026 */ @charset "UTF-8";.site-main .menu-navigation-container{overflow:visible}.ui-item:after,.ui-item:before{display:block;position:absolute;transition:.3s;transition-timing-function:cubic-bezier(.58,.3,.005,1)}.ui-item:not(:hover):not(:focus):not(.ui-item-active):not(.highlighted):after,.ui-item:not(:hover):not(:focus):not(.ui-item-active):not(.highlighted):before{opacity:0}.ui-item-active:after, .ui-item-active:before, .ui-item:focus:after, .ui-item:focus:before, .ui-item:hover:after, .ui-item:hover:before {transform:scale(1)}.ui-nav-menu--main .ui-nav-menu a{transition:.4s}.ui-nav-menu--main .ui-nav-menu a, .ui-nav-menu--main .ui-nav-menu a:focus, .ui-nav-menu--main .ui-nav-menu a:hover {padding:13px 20px}.ui-nav-menu--main .ui-nav-menu a.current{background:#1f2124;color:#fff}.ui-nav-menu--main .ui-nav-menu a.disabled{background:#3f444b;color:#88909b}.ui-nav-menu--main .ui-nav-menu ul{border-style:solid;border-width:0;padding:0;position:absolute;width:12em}.ui-nav-menu--layout-horizontal{display:flex}.ui-nav-menu--layout-horizontal .ui-nav-menu{display:flex;flex-wrap:wrap}.ui-nav-menu--layout-horizontal .ui-nav-menu a{flex-grow:1;white-space:nowrap}.ui-nav-menu--layout-horizontal .ui-nav-menu>li{display:flex}.ui-nav-menu--layout-horizontal .ui-nav-menu>li ul {top:100%!important}.ui-nav-menu--layout-horizontal .ui-nav-menu>li:not(:first-child)>a{margin-inline-start:var(--e-nav-menu-horizontal-menu-item-margin)}.ui-nav-menu--layout-horizontal .ui-nav-menu>li:not(:first-child)>ul {inset-inline-start:var(--e-nav-menu-horizontal-menu-item-margin)!important}.ui-nav-menu--layout-horizontal .ui-nav-menu>li:not(:last-child)>a{margin-inline-end:var(--e-nav-menu-horizontal-menu-item-margin)}.ui-nav-menu--layout-horizontal .ui-nav-menu>li:not(:last-child):after{align-self:center;border-color:var(--e-nav-menu-divider-color,#000);border-left-style:var(--e-nav-menu-divider-style,solid);border-left-width:var(--e-nav-menu-divider-width,2px);content:var(--e-nav-menu-divider-content,none);height:var(--e-nav-menu-divider-height,35%)}.ui-nav-menu__align-end .ui-nav-menu{justify-content:flex-end;margin-inline-start:auto}.ui-widget-nav-menu:not(.ui-nav-menu--toggle) .ui-menu-toggle{display:none}.ui-widget-nav-menu .ui-widget-container,.ui-widget-nav-menu:not(:has(.ui-widget-container)):not([class*=ui-hidden-]){display:flex;flex-direction:column}.ui-nav-menu{position:relative;z-index:2}.ui-nav-menu:after{clear:both;content:" ";display:block;font:0/0 serif;height:0;overflow:hidden;visibility:hidden}.ui-nav-menu,.ui-nav-menu li,.ui-nav-menu ul{display:block;line-height:normal;list-style:none;margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ui-nav-menu ul{display:none}.ui-nav-menu ul ul a,.ui-nav-menu ul ul a:active,.ui-nav-menu ul ul a:focus,.ui-nav-menu ul ul a:hover{border-left:16px solid transparent}.ui-nav-menu ul ul ul a,.ui-nav-menu ul ul ul a:active,.ui-nav-menu ul ul ul a:focus,.ui-nav-menu ul ul ul a:hover{border-left:24px solid transparent}.ui-nav-menu ul ul ul ul a,.ui-nav-menu ul ul ul ul a:active,.ui-nav-menu ul ul ul ul a:focus,.ui-nav-menu ul ul ul ul a:hover{border-left:32px solid transparent}.ui-nav-menu ul ul ul ul ul a,.ui-nav-menu ul ul ul ul ul a:active,.ui-nav-menu ul ul ul ul ul a:focus,.ui-nav-menu ul ul ul ul ul a:hover{border-left:40px solid transparent}.ui-nav-menu a,.ui-nav-menu li{position:relative}.ui-nav-menu li{border-width:0}.ui-nav-menu a{align-items:center;display:flex}.ui-nav-menu a,.ui-nav-menu a:focus,.ui-nav-menu a:hover{line-height:20px;padding:10px 20px}.ui-nav-menu a.current{background:#1f2124;color:#fff}.ui-nav-menu a.disabled{color:#88909b;cursor:not-allowed}.ui-nav-menu--dropdown .ui-item.ui-item-active, .ui-nav-menu--dropdown .ui-item:focus, .ui-nav-menu--dropdown .ui-item:hover {background-color:#3f444b;color:#fff}.ui-menu-toggle{align-items:center;background-color:rgba(0,0,0,.05);border:0 solid;border-radius:3px;color:#33373d;cursor:pointer;display:flex;font-size:var(--nav-menu-icon-size,22px);justify-content:center;padding:.25em}.ui-menu-toggle.ui-active .ui-menu-toggle__icon--open,.ui-menu-toggle:not(.ui-active) .ui-menu-toggle__icon--close{display:none}.ui-menu-toggle .e-font-icon-svg{fill:#33373d;height:1em;width:1em}.ui-menu-toggle svg{fill:var(--nav-menu-icon-color,currentColor);height:auto;width:1em}span.ui-menu-toggle__icon--close,span.ui-menu-toggle__icon--open{line-height:1}.ui-nav-menu--dropdown{background-color:#fff;font-size:13px}.ui-nav-menu--dropdown.ui-nav-menu__container{margin-top:10px;overflow-x:hidden;overflow-y:auto;transform-origin:top;transition:max-height .3s,transform .3s}.ui-nav-menu--dropdown a{color:#33373d}.ui-nav-menu--dropdown a.current{background:#1f2124;color:#fff}.ui-nav-menu--dropdown a.disabled{color:#b3b3b3}ul.ui-nav-menu--dropdown a,ul.ui-nav-menu--dropdown a:focus,ul.ui-nav-menu--dropdown a:hover{border-inline-start:8px solid transparent;text-shadow:none}.ui-nav-menu--toggle{--menu-height:100vh}.ui-nav-menu--toggle .ui-menu-toggle:not(.ui-active)+.ui-nav-menu__container{max-height:0;overflow:hidden;transform:scaleY(0)}.ui-nav-menu--toggle .ui-menu-toggle.ui-active+.ui-nav-menu__container{animation:hide-scroll .3s backwards;max-height:var(--menu-height);transform:scaleY(1)}.ui-nav-menu--stretch .ui-nav-menu__container.ui-nav-menu--dropdown{position:absolute;z-index:9997}@media (max-width:1024px){.ui-nav-menu--dropdown-tablet .ui-nav-menu--main{display:none}}@media (min-width:1025px){.ui-nav-menu--dropdown-tablet .ui-menu-toggle,.ui-nav-menu--dropdown-tablet .ui-nav-menu--dropdown{display:none}.ui-nav-menu--dropdown-tablet nav.ui-nav-menu--dropdown.ui-nav-menu__container{overflow-y:hidden}}@keyframes hide-scroll{0%,to{overflow:hidden}} /* e-animation-fadeInUp-css */ @keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}.fadeInUp{animation-name:fadeInUp} /* widget-icon-box-css */ .ui-widget-icon-box .ui-icon-box-wrapper{display:flex;flex-direction:column;text-align:center}.ui-widget-icon-box .ui-icon-box-icon{display:inline-block;flex:0 0 auto;line-height:0}.ui-widget-icon-box .ui-icon-box-content{flex-grow:1;width:100%}.ui-widget-icon-box .ui-icon-box-description{margin:0}.ui-widget-icon-box.ui-position-inline-start .ui-icon-box-wrapper{flex-direction:row;text-align:start}@media (max-width:767px){.ui-widget-icon-box.ui-mobile-position-inline-start .ui-icon-box-wrapper{flex-direction:row;text-align:start}} /* widget-image-css */ .ui-widget-image{text-align:center}.ui-widget-image a{display:inline-block}.ui-widget-image a img[src$=".svg"]{width:48px}.ui-widget-image img{display:inline-block;vertical-align:middle} /* widget-posts-css */ /*! ui-pro - v4.3.0 - 02-11-2026 */ @charset "UTF-8";.ui-widget-archive-posts:after,.ui-widget-posts:after{display:none}.ui-post__thumbnail__link{transition:none}.ui-posts-container:not(.ui-posts-masonry){align-items:stretch}.ui-posts-container .ui-post{margin:0;padding:0}.ui-posts-container .ui-post__excerpt{flex-grow:var(--read-more-alignment,0)}.ui-posts-container .ui-post__thumbnail{overflow:hidden}.ui-posts-container .ui-post__thumbnail img{display:block;max-height:none;max-width:none;transition:filter .3s;width:100%}.ui-posts-container .ui-post__thumbnail__link{display:block;position:relative;width:100%}.ui-posts-container.ui-has-item-ratio .ui-post__thumbnail{inset:0}.ui-posts-container.ui-has-item-ratio .ui-post__thumbnail img{height:auto;left:calc(50% + 1px);position:absolute;top:calc(50% + 1px);transform:scale(1.01) translate(-50%,-50%)}.ui-posts-container.ui-has-item-ratio .ui-post__thumbnail.ui-fit-height img{height:100%;width:auto}.ui-posts .ui-post{flex-direction:column;transition-duration:.25s;transition-property:background,border,box-shadow}.ui-posts .ui-post__title{font-size:18px;margin:0}.ui-posts .ui-post__excerpt{margin-bottom:10px}.ui-posts .ui-post__excerpt p{color:#777;font-size:14px;line-height:1.5em;margin:0}.ui-posts .ui-post__text{display:var(--item-display,block);flex-direction:column;flex-grow:1}.ui-posts .ui-post__thumbnail{position:relative}.ui-posts--skin-classic .ui-post{overflow:hidden}.ui-posts--thumbnail-top .ui-post__thumbnail__link{margin-bottom:20px}.ui-posts--thumbnail-top .ui-post__text{width:100%}.ui-posts .ui-post{display:flex} /* widget-form-css */ /*! ui-pro - v4.3.0 - 02-11-2026 */ .ui-button.ui-hidden,.ui-hidden{display:none}.e-form__step{width:100%}.e-form__step:not(.ui-hidden){display:flex;flex-wrap:wrap}.e-form__buttons{flex-wrap:wrap}.e-form__buttons,.e-form__buttons__wrapper{display:flex}.e-form__indicators{align-items:center;display:flex;flex-wrap:nowrap;font-size:13px;justify-content:space-between;margin-bottom:var(--e-form-steps-indicators-spacing)}.e-form__indicators__indicator{align-items:center;display:flex;flex-basis:0;flex-direction:column;justify-content:center;padding:0 var(--e-form-steps-divider-gap)}.e-form__indicators__indicator:first-child{padding-left:0}.e-form__indicators__indicator:last-child{padding-right:0}.e-form__indicators__indicator--state-inactive{color:var(--e-form-steps-indicator-inactive-primary-color,#c2cbd2)}.e-form__indicators__indicator--state-inactive [class*=indicator--shape-]:not(.e-form__indicators__indicator--shape-none){background-color:var(--e-form-steps-indicator-inactive-secondary-color,#fff)}.e-form__indicators__indicator--state-inactive object,.e-form__indicators__indicator--state-inactive svg{fill:var(--e-form-steps-indicator-inactive-primary-color,#c2cbd2)}.e-form__indicators__indicator--state-active{border-color:var(--e-form-steps-indicator-active-secondary-color,#fff);color:var(--e-form-steps-indicator-active-primary-color,#39b54a)}.e-form__indicators__indicator--state-active [class*=indicator--shape-]:not(.e-form__indicators__indicator--shape-none){background-color:var(--e-form-steps-indicator-active-secondary-color,#fff)}.e-form__indicators__indicator--state-active object,.e-form__indicators__indicator--state-active svg{fill:var(--e-form-steps-indicator-active-primary-color,#39b54a)}.e-form__indicators__indicator--state-completed{color:var(--e-form-steps-indicator-completed-secondary-color,#fff)}.e-form__indicators__indicator--state-completed [class*=indicator--shape-]:not(.e-form__indicators__indicator--shape-none){background-color:var(--e-form-steps-indicator-completed-primary-color,#39b54a)}.e-form__indicators__indicator--state-completed .e-form__indicators__indicator__label{color:var(--e-form-steps-indicator-completed-primary-color,#39b54a)}.e-form__indicators__indicator--state-completed object,.e-form__indicators__indicator--state-completed svg{fill:var(--e-form-steps-indicator-completed-secondary-color,#fff)}.e-form__indicators__indicator__number{align-items:center;border-style:solid;border-width:1px;display:flex;height:var(--e-form-steps-indicator-padding,30px);justify-content:center;margin-bottom:10px;width:var(--e-form-steps-indicator-padding,30px)}.e-form__indicators__indicator--shape-circle{border-radius:50%}.e-form__indicators__indicator__label{text-align:center}.e-form__indicators__indicator__separator{background-color:#babfc5;height:var(--e-form-steps-divider-width);width:100%}.e-form__indicators--type-number_text {align-items:flex-start}.e-form__indicators--type-number_text .e-form__indicators__indicator__separator {margin-top:calc(var(--e-form-steps-indicator-padding, 30px) / 2 - var(--e-form-steps-divider-width, 1px) / 2)}.ui-field-type-tel input{direction:inherit}.ui-form .ui-button .ui-button-content-wrapper{align-items:center}.ui-form .ui-button .ui-button-text{white-space:normal}.ui-form .ui-button svg{height:auto}.ui-form .ui-button .e-font-icon-svg{height:1em}.ui-form .ui-button .ui-button-content-wrapper{gap:5px}.ui-form .ui-button .ui-button-icon,.ui-form .ui-button .ui-button-text{flex-grow:unset;order:unset}.ui-select-wrapper .select-caret-down-wrapper{font-size:11px;inset-inline-end:10px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.ui-select-wrapper .select-caret-down-wrapper svg{aspect-ratio:unset;display:unset;fill:currentColor;overflow:visible;width:1em}.ui-select-wrapper .select-caret-down-wrapper i{font-size:19px;line-height:2}.ui-select-wrapper.remove-before:before{content:""!important} /* page-home.css */ .ui-1093 .ui-element.ui-element-eee5bd3{padding:20px 0px 60px 0px;}.ui-1093 .ui-element.ui-element-f1b10b9{padding:0% 14% 0% 14%;}.ui-1093 .ui-element.ui-element-9757513 .qodef-qi-animated-text{text-align:center;}.ui-1093 .ui-element.ui-element-3dc5a4b{padding:0% 6% 0% 6%;text-align:center;font-size:1.1rem;}.ui-1093 .ui-element.ui-element-a648bb6{padding:0% 14% 0% 18%;}.ui-1093 .ui-element.ui-element-58c2aca.ui-column > .ui-widget-wrap{justify-content:flex-end;}.ui-1093 .ui-element.ui-element-4b9ae01{width:auto;max-width:auto;}.ui-1093 .ui-element.ui-element-4b9ae01 .ui-button-content-wrapper{flex-direction:row-reverse;}.ui-1093 .ui-element.ui-element-e6d0a4d .ui-button{background-color:#075E54;fill:#FFFFFF;color:#FFFFFF;}.ui-1093 .ui-element.ui-element-e6d0a4d .ui-button:hover, .ui-1093 .ui-element.ui-element-e6d0a4d .ui-button:focus{background-color:#FFFFFF;color:#075E54;}.ui-1093 .ui-element.ui-element-e6d0a4d{width:auto;max-width:auto;}.ui-1093 .ui-element.ui-element-e6d0a4d .ui-button-content-wrapper{flex-direction:row;}.ui-1093 .ui-element.ui-element-e6d0a4d .ui-button .ui-button-content-wrapper{gap:10px;}.ui-1093 .ui-element.ui-element-e6d0a4d .ui-button:hover svg, .ui-1093 .ui-element.ui-element-e6d0a4d .ui-button:focus svg{fill:#075E54;}.ui-1093 .ui-element.ui-element-20bb94a{padding:0% 0% 0% 0%;}.ui-1093 .ui-element.ui-element-9bf525c{--grid-row-gap:10px;--grid-column-gap:7px;}.ui-1093 .ui-element.ui-element-9bf525c .ui-posts-container .ui-post__thumbnail{padding-bottom:calc( 0.8 * 100% );}.ui-1093 .ui-element.ui-element-9bf525c:after{content:"0.8";}.ui-1093 .ui-element.ui-element-9bf525c .ui-post__thumbnail__link{width:100%;}.ui-1093 .ui-element.ui-element-9bf525c .ui-post{padding:0px 0px 20px 0px;}.ui-1093 .ui-element.ui-element-9bf525c .ui-post__text{padding:0% 10% 0% 10%;}.ui-1093 .ui-element.ui-element-9bf525c .ui-post__thumbnail{border-radius:4px 4px 4px 4px;}.ui-1093 .ui-element.ui-element-9bf525c.ui-posts--thumbnail-top .ui-post__thumbnail__link{margin-bottom:30px;}.ui-1093 .ui-element.ui-element-9bf525c .ui-post__title, .ui-1093 .ui-element.ui-element-9bf525c .ui-post__title a{color:var( --e-global-color-primary );font-size:1.4rem;font-weight:600;text-transform:none;line-height:2rem;letter-spacing:-0.5px;}.ui-1093 .ui-element.ui-element-9bf525c .ui-post__title{margin-bottom:6px;}.ui-1093 .ui-element.ui-element-9bf525c .ui-post__excerpt p{color:var( --e-global-color-text );font-size:0.96rem;}.ui-1093 .ui-element.ui-element-ad6f7dc{margin-top:75px;margin-bottom:0px;}.ui-1093 .ui-element.ui-element-6c63bd8{margin-top:0px;margin-bottom:50px;padding:0% 14% 0% 14%;}.ui-1093 .ui-element.ui-element-5dab07b{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;}.ui-1093 .ui-element.ui-element-5dab07b .ui-icon-box-wrapper{align-items:center;text-align:start;gap:10px;}.ui-1093 .ui-element.ui-element-5dab07b.ui-view-default .ui-icon {fill:#E2FF09;color:#E2FF09;border-color:#E2FF09;}.ui-1093 .ui-element.ui-element-5dab07b .ui-icon{font-size:9px;}.ui-1093 .ui-element.ui-element-5dab07b .ui-icon-box-description{font-size:0.8rem;font-weight:600;text-transform:uppercase;line-height:1.4rem;color:#FFFFFF;}.ui-1093 .ui-element.ui-element-3f84315 > .ui-widget-container{margin:0px 0px 20px 0px;}.ui-1093 .ui-element.ui-element-3f84315 .qodef-qi-animated-text{text-align:left;}.ui-1093 .ui-element.ui-element-6487b92 > .ui-widget-wrap > .ui-widget:not(.ui-widget__width-auto):not(.ui-widget__width-initial):not(:last-child):not(.ui-absolute){--kit-widget-spacing:0px;}.ui-1093 .ui-element.ui-element-87b80a2{margin-top:150px;margin-bottom:0px;}.ui-1093 .ui-element.ui-element-9d84c4e{padding:0% 14% 0% 14%;}.ui-1093 .ui-element.ui-element-327ff45 > .ui-element-populated{padding:0% 20% 0% 0%;}.ui-1093 .ui-element.ui-element-6b4cb81{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;}.ui-1093 .ui-element.ui-element-6b4cb81 .ui-icon-box-wrapper{align-items:center;text-align:start;gap:10px;}.ui-1093 .ui-element.ui-element-6b4cb81.ui-view-default .ui-icon {fill:#E2FF09;color:#E2FF09;border-color:#E2FF09;}.ui-1093 .ui-element.ui-element-6b4cb81 .ui-icon{font-size:9px;}.ui-1093 .ui-element.ui-element-6b4cb81 .ui-icon-box-description{font-size:0.8rem;font-weight:600;text-transform:uppercase;line-height:1.4rem;color:#FFFFFF;}.ui-1093 .ui-element.ui-element-574ecd3{width:auto;max-width:auto;}.ui-1093 .ui-element.ui-element-574ecd3 > .ui-widget-container{margin:0px 0px 20px 0px;}.ui-1093 .ui-element.ui-element-574ecd3 .qodef-qi-animated-text{text-align:left;}.ui-1093 .ui-element.ui-element-337b4ae{margin-top:60px;margin-bottom:0px;}.ui-1093 .ui-element.ui-element-b7f69c3{padding:0% 40% 0% 0%;}.ui-1093 .ui-element.ui-element-76e32b3{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;}.ui-1093 .ui-element.ui-element-76e32b3 .ui-icon-box-wrapper{align-items:center;text-align:start;gap:10px;}.ui-1093 .ui-element.ui-element-76e32b3.ui-view-default .ui-icon {fill:#E2FF09;color:#E2FF09;border-color:#E2FF09;}.ui-1093 .ui-element.ui-element-76e32b3 .ui-icon{font-size:9px;}.ui-1093 .ui-element.ui-element-76e32b3 .ui-icon-box-description{font-size:0.8rem;font-weight:600;text-transform:uppercase;line-height:1.4rem;color:#FFFFFF;}.ui-1093 .ui-element.ui-element-a8607e8 > .ui-widget-container{margin:0px 0px 20px 0px;}.ui-1093 .ui-element.ui-element-a8607e8 .qodef-qi-animated-text{text-align:left;}body.ui-page-1093:not(.ui-motion-effects-element-type-background) {background-color:#111111;}:root{--page-title-display:none;}@media(max-width:1024px) and (min-width:768px){.ui-1093 .ui-element.ui-element-58c2aca{width:100%;}.ui-1093 .ui-element.ui-element-dc01708{width:100%;}.ui-1093 .ui-element.ui-element-327ff45{width:100%;}.ui-1093 .ui-element.ui-element-37d2def{width:100%;}}@media(max-width:1024px){.ui-1093 .ui-element.ui-element-eee5bd3{padding:0px 0px 40px 0px;}.ui-1093 .ui-element.ui-element-f1b10b9{padding:0% 5% 0% 5%;}.ui-1093 .ui-element.ui-element-9757513 .qodef-qi-animated-text{text-align:left;}.ui-1093 .ui-element.ui-element-3dc5a4b{padding:0% 0% 0% 0%;text-align:start;}.ui-1093 .ui-element.ui-element-a648bb6{padding:0% 5% 0% 5%;}.ui-1093 .ui-element.ui-element-58c2aca.ui-column > .ui-widget-wrap{justify-content:flex-start;}.ui-1093 .ui-element.ui-element-20bb94a{padding:0% 7% 0% 7%;}.ui-1093 .ui-element.ui-element-9bf525c{--grid-column-gap:10px;}.ui-1093 .ui-element.ui-element-9bf525c .ui-post__title, .ui-1093 .ui-element.ui-element-9bf525c .ui-post__title a{font-size:1.4rem;}.ui-1093 .ui-element.ui-element-ad6f7dc{margin-top:50px;margin-bottom:0px;}.ui-1093 .ui-element.ui-element-6c63bd8{padding:0% 7% 0% 7%;}.ui-1093 .ui-element.ui-element-87b80a2{margin-top:100px;margin-bottom:0px;}.ui-1093 .ui-element.ui-element-9d84c4e{padding:0% 8% 0% 8%;}.ui-1093 .ui-element.ui-element-327ff45 > .ui-element-populated{padding:0% 0% 0% 0%;}.ui-1093 .ui-element.ui-element-37d2def > .ui-element-populated{padding:20px 0px 0px 0px;}.ui-1093 .ui-element.ui-element-b7f69c3{padding:0% 5% 0% 5%;}.ui-1093 .ui-element.ui-element-2385899{padding:0% 5% 0% 5%;}}@media(max-width:767px){.ui-1093 .ui-element.ui-element-eee5bd3{padding:0px 0px 30px 0px;}.ui-1093 .ui-element.ui-element-9bf525c .ui-posts-container .ui-post__thumbnail{padding-bottom:calc( 0.8 * 100% );}.ui-1093 .ui-element.ui-element-9bf525c:after{content:"0.8";}.ui-1093 .ui-element.ui-element-9bf525c .ui-post__thumbnail__link{width:100%;}.ui-1093 .ui-element.ui-element-9bf525c .ui-post__title, .ui-1093 .ui-element.ui-element-9bf525c .ui-post__title a{font-size:1.4rem;}} /* header-en.css */ .ui-137 .ui-element.ui-element-f9108b4 > .ui-container > .ui-column > .ui-widget-wrap{align-content:center;align-items:center;}.ui-137 .ui-element.ui-element-f9108b4{padding:0px 0px 0px 0px;}.ui-137 .ui-element.ui-element-29d6cab > .ui-container > .ui-column > .ui-widget-wrap{align-content:center;align-items:center;}.ui-137 .ui-element.ui-element-29d6cab{padding:0% 2% 0% 2%;}.ui-137 .ui-element.ui-element-8bd2c2c .ui-menu-toggle{margin-left:auto;}.ui-137 .ui-element.ui-element-8bd2c2c .ui-nav-menu--main .ui-item:hover, .ui-137 .ui-element.ui-element-8bd2c2c .ui-nav-menu--main .ui-item.ui-item-active, .ui-137 .ui-element.ui-element-8bd2c2c .ui-nav-menu--main .ui-item:focus {color:#E1FF04;fill:#E1FF04;}.ui-137 .ui-element.ui-element-8bd2c2c .ui-nav-menu--main .ui-item{padding-left:10px;padding-right:10px;}.ui-137 .ui-element.ui-element-8bd2c2c div.ui-menu-toggle{color:var( --e-global-color-primary );}.ui-137 .ui-element.ui-element-8bd2c2c div.ui-menu-toggle svg{fill:var( --e-global-color-primary );}.ui-location-header:before, .ui-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.ui-137 .ui-element.ui-element-29d6cab{padding:0% 4% 0% 4%;}}@media(max-width:767px){.ui-137 .ui-element.ui-element-82a3119{width:80%;}.ui-137 .ui-element.ui-element-4a9b5da{width:20%;}} /* footer-en.css */ .ui-347 .ui-element.ui-element-3dd0f87{margin-top:75px;margin-bottom:0px;}.ui-347 .ui-element.ui-element-7b58631{padding:0% 14% 0% 14%;}.ui-347 .ui-element.ui-element-41c8f89{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;}.ui-347 .ui-element.ui-element-41c8f89 .ui-icon-box-wrapper{align-items:center;text-align:start;gap:10px;}.ui-347 .ui-element.ui-element-41c8f89.ui-view-default .ui-icon {fill:#82FF04;color:#82FF04;border-color:#82FF04;}.ui-347 .ui-element.ui-element-41c8f89 .ui-icon{font-size:9px;}.ui-347 .ui-element.ui-element-41c8f89 .ui-icon-box-description{font-size:0.8rem;font-weight:600;text-transform:uppercase;line-height:1.4rem;color:#FFFFFF;}.ui-347 .ui-element.ui-element-89f132b .qodef-qi-animated-text{text-align:center;}.ui-347 .ui-element.ui-element-89f132b .qodef-qi-animated-text .qodef-m-title{font-family:"Instrument Sans", Sans-serif;font-size:5rem;line-height:5.5rem;}.ui-347 .ui-element.ui-element-12edba9{text-align:center;}.ui-347 .ui-element.ui-element-3bbc657{padding:0% 14% 0% 14%;}.ui-347 .ui-element.ui-element-9641ea5.ui-column > .ui-widget-wrap{justify-content:flex-end;}.ui-347 .ui-element.ui-element-fecfe43{width:auto;max-width:auto;}.ui-347 .ui-element.ui-element-fecfe43 .ui-button-content-wrapper{flex-direction:row-reverse;}.ui-347 .ui-element.ui-element-a26748a .ui-button{background-color:#075E54;fill:#FFFFFF;color:#FFFFFF;}.ui-347 .ui-element.ui-element-a26748a .ui-button:hover, .ui-347 .ui-element.ui-element-a26748a .ui-button:focus{background-color:#FFFFFF;color:#075E54;}.ui-347 .ui-element.ui-element-a26748a{width:auto;max-width:auto;}.ui-347 .ui-element.ui-element-a26748a .ui-button-content-wrapper{flex-direction:row;}.ui-347 .ui-element.ui-element-a26748a .ui-button .ui-button-content-wrapper{gap:10px;}.ui-347 .ui-element.ui-element-a26748a .ui-button:hover svg, .ui-347 .ui-element.ui-element-a26748a .ui-button:focus svg{fill:#075E54;}.ui-347 .ui-element.ui-element-abe2d2b{margin:100px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;text-align:center;font-size:0.8rem;line-height:1.2rem;}.ui-location-header:before, .ui-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px) and (min-width:768px){.ui-347 .ui-element.ui-element-9641ea5{width:100%;}.ui-347 .ui-element.ui-element-c6b1211{width:100%;}}@media(max-width:1024px){.ui-347 .ui-element.ui-element-7b58631{padding:0% 5% 0% 5%;}.ui-347 .ui-element.ui-element-89f132b .qodef-qi-animated-text{text-align:left;}.ui-347 .ui-element.ui-element-89f132b .qodef-qi-animated-text .qodef-m-title{font-size:4rem;line-height:4.5rem;}.ui-347 .ui-element.ui-element-12edba9{text-align:start;}.ui-347 .ui-element.ui-element-3bbc657{padding:0% 5% 0% 5%;}.ui-347 .ui-element.ui-element-9641ea5.ui-column > .ui-widget-wrap{justify-content:flex-start;}.ui-347 .ui-element.ui-element-946a537{padding:0% 5% 0% 5%;}.ui-347 .ui-element.ui-element-abe2d2b{text-align:start;}}@media(max-width:767px){.ui-347 .ui-element.ui-element-89f132b .qodef-qi-animated-text .qodef-m-title{font-size:3.5rem;line-height:4rem;}} /* tail.css */ /* swiper */ /** * Swiper 8.4.5 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2022 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 21,2022 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:root{--swiper-navigation-size:44px}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} /* hello child theme */ /* Theme Name: Hello page builder Child Theme URI: https://github.com/ui/hello-theme-child/ Description: Hello page builder Child is a child theme of Hello page builder, created by page builder team Author: page builder Team Author URI: https://ui.com/ Template: hello-ui Version: 2.0.0 Text Domain: hello-ui-child License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready */ /* Add your custom styles here */ /* custom.css */ /* Help Class */ .reduce_bottom_margin{ margin-bottom: 10px !important; } .text-margin-bottom-fix{ margin-bottom: 7px !important; } .ui .ui-element.available_badge.text-margin-bottom-fix{ margin-bottom: 20px !important; } @media (max-width: 767px){ .ui .ui-element.available_badge.text-margin-bottom-fix{ margin-bottom: 15px !important; } } .text-margin-bottom-fix p{ margin-bottom: 0 !important; } /* Typo */ .qodef-qi-animated-text .qodef-m-title{ overflow: visible !important; } /* Button Copy */ .button_copy a{ background-color: #e1ff04; margin-left: 16px !important; font-family: "Instrument Sans", Sans-serif; font-size: 1rem; color: #111 !important; border-radius: 400px; padding: 16px 24px !important; } .button_copy a:hover{ background-color: #ffffff; color: #111 !important; transition: 0.3s all; } .button_copy a{ align-items: center; gap: 8px; } .button_copy a svg{ margin-left: 0; } /* Top Bar */ .top_bar p{ margin: 0 !important; } .top_bar p a{ transition: 0.3s all !important; } .top_bar p:hover a{ color: #E1FF04 !important; transition: 0.3s all !important; } /* Top Bar - Sticky on Scroll: transparent at the top, dark + blur once scrolled (the logo widget script adds .nn-scrolled after 10px) */ .ui-location-header{ position: sticky; top: 0; z-index: 999; background-color: transparent; border-bottom: 1px solid transparent; transition: border-color .3s ease, background-color .3s ease; } /* transparent at the very top */ .ui-location-header.nn-scrolled{ background-color: rgba(17, 17, 17, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: rgba(255, 255, 255, 0.08); } /* on phones the WP admin bar scrolls away, so no gap is needed */ /* iPhone: with viewport-fit=cover (see the PHP snippet) the header reaches the very top of the screen, and this padding keeps the logo and menu below the status bar while the header background fills it */ .ui-location-header{ padding-top: env(safe-area-inset-top, 0px); } /* Top Bar - Logo (photo, name, xjob title) */ @property --nn-ring{ syntax: ""; inherits: false; initial-value: 0deg; } @property --nn-ring-color{ syntax: ""; inherits: false; initial-value: #3a3a3a; } .nn-brand{ --nn-accent: #E1FF04; --nn-size: 48px; display: inline-flex; align-items: center; gap: 14px; min-width: 0; } .nn-brand a{ color: inherit; text-decoration: none !important; -webkit-tap-highlight-color: transparent; } .nn-brand a:focus-visible{ outline: 2px solid var(--nn-accent); outline-offset: 4px; border-radius: 6px; } .nn-brand .nn-brand-avatar-link{ display: block; flex-shrink: 0; border-radius: 50%; } .nn-brand .nn-brand-avatar{ display: block; position: relative; width: var(--nn-size); height: var(--nn-size); flex-shrink: 0; } .nn-brand .nn-brand-ring{ --nn-ring: 360deg; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, var(--nn-ring-color) var(--nn-ring), rgba(255,255,255,.1) var(--nn-ring)); transition: --nn-ring-color .3s ease; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); } .nn-brand .nn-brand-photo{ position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #2a2a2a; transition: transform .5s cubic-bezier(.34,1.56,.64,1); } .nn-brand .nn-brand-photo img{ display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; transition: transform .6s ease; } .nn-brand .nn-brand-dot{ position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--nn-accent); border: 2px solid #111; } .nn-brand .nn-brand-dot::after{ content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--nn-accent); animation: nn-pulse 2s ease-out infinite; } .nn-brand .nn-brand-text{ display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .nn-brand .nn-brand-name{ position: relative; display: inline-flex; overflow: hidden; padding: 3px 0; font-family: "Instrument Sans", sans-serif; font-weight: 600; font-size: 19px; line-height: 1.15; letter-spacing: -.01em; } .nn-brand .nn-brand-name > span{ display: inline-block; white-space: pre; color: #FFFFFF; } .nn-brand .nn-brand-role{ display: block; height: 18px; overflow: hidden; font-family: Inter, sans-serif; font-size: 13px; line-height: 18px; white-space: nowrap; } .nn-brand .nn-brand-roll{ display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.65,0,.35,1); font-weight: 500; } .nn-brand .nn-brand-roll span:first-child{ color: rgba(255,255,255,.55); } .nn-brand .nn-brand-roll span:last-child{ color: var(--nn-accent); } @media (hover: hover){ .nn-brand:hover .nn-brand-ring{ animation: nn-ring-spin 1.2s linear infinite; --nn-ring: 120deg; --nn-ring-color: var(--nn-accent); } .nn-brand:hover .nn-brand-photo{ transform: scale(.92) rotate(-6deg); } .nn-brand:hover .nn-brand-photo img{ transform: scale(1.15); } .nn-brand:hover .nn-brand-roll{ transform: translateY(-18px); } /* desktop: the "Available for new projects" line also rolls in by itself every few seconds; hovering holds it */ .nn-brand .nn-brand-roll{ animation: nn-roll-desk 8.4s cubic-bezier(.65,0,.35,1) 3s infinite; } .nn-brand:hover .nn-brand-roll{ animation: none; } } @keyframes nn-roll-desk{ 0%, 41.7% { transform: none; } 50%, 91.7% { transform: translateY(-18px); } 100% { transform: none; } } /* 3.5 s title, 0.7 s roll, 3.5 s available, 0.7 s roll */ @media (prefers-reduced-motion: reduce){ .nn-brand .nn-brand-roll{ animation: none !important; } } .nn-brand:has(:focus-visible) .nn-brand-ring{ animation: nn-ring-spin 1.2s linear infinite; --nn-ring: 120deg; --nn-ring-color: var(--nn-accent); } .nn-brand:has(:focus-visible) .nn-brand-photo{ transform: scale(.92) rotate(-6deg); } .nn-brand:has(:focus-visible) .nn-brand-roll{ transform: translateY(-18px); } @media (hover: none){ .nn-brand .nn-brand-roll{ animation: nn-roll 7s cubic-bezier(.65,0,.35,1) 2.5s infinite; } .nn-brand a:active .nn-brand-photo{ transform: scale(.92); transition-duration: .15s; } } @keyframes nn-roll{ 0%, 42% { transform: none; } 50%, 92% { transform: translateY(-18px); } 100% { transform: none; } } @keyframes nn-ring-spin{ to { transform: rotate(360deg); } } @keyframes nn-pulse{ from { transform: scale(1); opacity: .8; } to { transform: scale(2.4); opacity: 0; } } @media (max-width: 767px){ .nn-brand{ --nn-size: 40px; gap: 12px; } .nn-brand .nn-brand-name{ font-size: 17px; } .nn-brand .nn-brand-role{ font-size: 12px; } } @media (max-width: 360px){ .nn-brand{ --nn-size: 36px; gap: 10px; } .nn-brand .nn-brand-name{ font-size: 16px; } } @media (prefers-reduced-motion: reduce){ .nn-brand *, .nn-brand *::before, .nn-brand *::after{ animation: none !important; transition-duration: .01ms !important; } .nn-brand .nn-brand-ring{ --nn-ring: 360deg; } } /* Top Bar - Mobile Menu (page builder Nav Menu dropdown, tablet & phone) */ @media (max-width: 1024px){ .ui-location-header .ui-nav-menu--dropdown{ --nn-menu-top: 90px; --nn-menu-gap: 28px; --nn-menu-side: 34px; display: flex; flex-direction: column; min-height: calc(100dvh - var(--nn-menu-top)); margin-top: var(--nn-menu-gap) !important; padding: 8px var(--nn-menu-side) 32px; background-color: #111111 !important; border-top: 1px solid rgba(255, 255, 255, 0.08); box-sizing: border-box; transform: none !important; transform-origin: top; } .ui-location-header .ui-menu-toggle:not(.ui-active) + .ui-nav-menu--dropdown{ max-height: none !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s !important; } .ui-location-header .ui-menu-toggle.ui-active + .ui-nav-menu--dropdown{ max-height: calc(100dvh - var(--nn-menu-top)) !important; overflow-y: auto !important; overscroll-behavior: contain; opacity: 1; visibility: visible; transition: opacity .3s ease !important; } html:has(.ui-location-header .ui-menu-toggle.ui-active){ overflow: hidden !important; overscroll-behavior: none; } .ui-location-header .ui-nav-menu--dropdown .ui-nav-menu{ display: flex; flex-direction: column; flex: 1; width: 100% !important; margin: 0 !important; } .ui-location-header .ui-nav-menu--dropdown .menu-item{ border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .ui-location-header .ui-nav-menu--dropdown .menu-item > a{ display: flex !important; align-items: center; justify-content: space-between; padding: 22px 0 !important; background: transparent !important; color: #FFFFFF !important; font-family: "Instrument Sans", sans-serif !important; font-size: 2rem !important; font-weight: 500 !important; line-height: 1.1; letter-spacing: -.02em; transition: color .3s ease; } .ui-location-header .ui-nav-menu--dropdown .menu-item:not(.button_copy) > a::after{ content: ""; position: static !important; opacity: 1 !important; flex-shrink: 0; width: 22px !important; height: 22px !important; background: rgba(255, 255, 255, 0.3) !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; transition: background-color .3s ease, transform .3s ease; } .ui-location-header .ui-nav-menu--dropdown .menu-item:not(.button_copy) > a:hover, .ui-location-header .ui-nav-menu--dropdown .menu-item:not(.button_copy) > a.ui-item-active{ color: #E1FF04 !important; } .ui-location-header .ui-nav-menu--dropdown .menu-item:not(.button_copy) > a:hover::after{ background: #E1FF04 !important; transform: translate(2px, -2px); } .ui-location-header .ui-nav-menu--dropdown .menu-item.button_copy{ margin-top: auto; padding-top: 32px; border-bottom: 0; } .ui-location-header .ui-nav-menu--dropdown .button_copy a{ justify-content: center; gap: 8px; margin: 0 !important; padding: 20px 24px !important; border-radius: 400px; background-color: #E1FF04 !important; color: #111111 !important; font-size: 1.125rem !important; font-weight: 600 !important; letter-spacing: 0; } .ui-location-header .ui-nav-menu--dropdown .button_copy a:hover{ background-color: #FFFFFF !important; } .ui-location-header .ui-nav-menu--dropdown .button_copy a svg{ width: 18px; height: 18px; margin-left: 0; } .ui-location-header .ui-menu-toggle.ui-active + .ui-nav-menu--dropdown .menu-item{ animation: nn-menu-in .5s cubic-bezier(0.16, 1, 0.3, 1) backwards; } .ui-location-header .ui-nav-menu--dropdown .menu-item:nth-child(1){ animation-delay: .05s; } .ui-location-header .ui-nav-menu--dropdown .menu-item:nth-child(2){ animation-delay: .1s; } .ui-location-header .ui-nav-menu--dropdown .menu-item:nth-child(3){ animation-delay: .15s; } .ui-location-header .ui-nav-menu--dropdown .menu-item:nth-child(4){ animation-delay: .2s; } .ui-location-header .ui-nav-menu--dropdown .menu-item:nth-child(5){ animation-delay: .25s; } .ui-location-header .ui-nav-menu--dropdown .menu-item:nth-child(6){ animation-delay: .3s; } .ui-location-header .ui-nav-menu--dropdown .menu-item:nth-child(7){ animation-delay: .35s; } } @keyframes nn-menu-in{ from { opacity: 0; transform: translateY(16px); } } @media (prefers-reduced-motion: reduce){ .ui-location-header .ui-nav-menu--dropdown .menu-item{ animation: none !important; } } /* 1. Base State */ .projects_grid.home article.ui-post{ opacity: 0; transform: translateY(15px); transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease !important; will-change: opacity, transform; } /* 2. The Active State */ .projects_grid.home article.ui-post.is-visible{ opacity: 1 !important; transform: translateY(0) !important; } /* Projects above the fold show right away (no fade-in): first row of 3 on desktop, first project on phones */ @media (min-width: 1025px){ .projects_grid.home article.ui-post:nth-of-type(-n+3){ opacity: 1; transform: none; } } @media (max-width: 767px){ .projects_grid.home article.ui-post:nth-of-type(1){ opacity: 1; transform: none; } } /* 3. Thumbnail Container */ .projects_grid .ui-post__thumbnail__link{ display: block !important; overflow: hidden !important; position: relative !important; width: 100% !important; background: #111111; } /* 4. The Image */ .projects_grid .ui-post__thumbnail__link img{ position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transform-origin: center center !important; transform: scale(1) !important; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease !important; } /* 5. The Zoom (mouse/trackpad only, so taps on phones don't leave it stuck) */ @media (hover: hover){ .projects_grid article:hover .ui-post__thumbnail__link img{ transform: scale(1.03) !important; } } /* 6. Title & Hover Effects */ .projects_grid article .ui-post__title a{ transition: color 0.3s ease !important; } .projects_grid:has(article.ui-post:hover) article.ui-post{ transition: opacity 0.4s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important; } @media (hover: hover){ .projects_grid article:hover .ui-post__title a{ color: #E1FF04 !important; } /* while one project is hovered, the others fade a little (no blur or black & white, they stay readable) */ .projects_grid:has(article.ui-post:hover) article.ui-post:not(:hover){ opacity: 0.55 !important; } } /* Testimonials */ .nn-testimonials{ --nn-accent: #E1FF04; --nn-card: #181818; --nn-border: rgba(255, 255, 255, 0.08); --nn-muted: rgba(255, 255, 255, 0.55); width: 100%; color: #e6e6e6; font-family: Inter, sans-serif; } .nn-testimonials .nn-t-head{ display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 64px; } .nn-testimonials .nn-t-grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .nn-testimonials .nn-t-card{ grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; margin: 0; padding: 32px; background: var(--nn-card); border: 1px solid var(--nn-border); border-radius: 20px; transition: border-color .3s ease; } .nn-testimonials .nn-t-card:hover{ border-color: rgba(225, 255, 4, 0.35); } .nn-testimonials .nn-t-card blockquote{ margin: 0; padding: 0; border: 0; background: none; quotes: none; font-style: normal; color: #e6e6e6; font-family: Inter, sans-serif; font-size: 1.0625rem; line-height: 1.6; } .nn-testimonials .nn-t-card blockquote::before{ content: "\201C"; display: block; height: 28px; color: var(--nn-accent); font-family: "Instrument Sans", sans-serif; font-size: 56px; line-height: .6; } .nn-testimonials .nn-t-card--featured{ grid-column: span 4; grid-row: span 2; padding: 48px; } .nn-testimonials .nn-t-card--featured blockquote{ font-family: "Instrument Sans", sans-serif; font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; } .nn-testimonials .nn-t-card--featured blockquote::before{ height: 48px; font-size: 96px; } .nn-testimonials .nn-t-person{ display: flex; align-items: center; gap: 14px; font-style: normal; } .nn-testimonials .nn-t-person > div{ min-width: 0; } .nn-testimonials .nn-t-avatar{ display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #2a2a2a; color: #e6e6e6; font-family: "Instrument Sans", sans-serif; font-size: 15px; font-weight: 600; } .nn-testimonials img.nn-t-avatar{ display: block; max-width: none; } .nn-testimonials .nn-t-name{ color: #FFFFFF; font-family: "Instrument Sans", sans-serif; font-size: 16px; font-weight: 600; } .nn-testimonials .nn-t-role{ margin-top: 2px; color: var(--nn-muted); font-size: 13px; } .nn-testimonials .nn-t-link{ display: inline-flex; align-items: center; gap: 6px; margin-left: auto; border: 0 !important; color: #e6e6e6 !important; font-size: 13px; text-decoration: none !important; white-space: nowrap; transition: color .3s ease; } .nn-testimonials .nn-t-link::after{ content: ""; flex-shrink: 0; width: 16px; height: 16px; background: currentColor !important; opacity: 0.5; transform: rotate(-45deg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; transition: all 0.3s ease; } .nn-testimonials .nn-t-link:hover{ color: var(--nn-accent) !important; } .nn-testimonials .nn-t-link:hover::after{ opacity: 1; transform: rotate(0deg) scale(1.2); } .nn-testimonials .nn-t-social{ display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; margin-left: auto; border: 1px solid var(--nn-border); border-radius: 50%; color: var(--nn-muted) !important; text-decoration: none !important; transition: color .3s ease, background-color .3s ease, border-color .3s ease; } .nn-testimonials .nn-t-social svg{ width: 15px; height: 15px; fill: currentColor; } .nn-testimonials .nn-t-social:hover{ background-color: var(--nn-accent); border-color: var(--nn-accent); color: #111111 !important; } .nn-testimonials .nn-t-social:focus-visible{ outline: 2px solid var(--nn-accent); outline-offset: 3px; } /* Testimonials - Fade Up on Scroll (JS adds .nn-reveal to the section, then .is-visible + --nn-d delay to each card) */ .nn-testimonials.nn-reveal .nn-t-card:not(.is-visible){ opacity: 0; } .nn-testimonials.nn-reveal .nn-t-card.is-visible{ animation: nn-t-in 1s cubic-bezier(0.16, 1, 0.3, 1) var(--nn-d, 0s) backwards; } @keyframes nn-t-in{ from { opacity: 0; transform: translateY(30px); } } @media (prefers-reduced-motion: reduce){ .nn-testimonials.nn-reveal .nn-t-card:not(.is-visible){ opacity: 1; } .nn-testimonials.nn-reveal .nn-t-card.is-visible{ animation: none; } } /* Testimonials - Desktop: stretch leftover cards so the last row has no gaps */ @media (min-width: 1025px){ .nn-testimonials .nn-t-card:nth-child(n+4):last-child:nth-child(3n+1){ grid-column: 1 / -1; } .nn-testimonials .nn-t-card:nth-child(n+4):last-child:nth-child(3n+1) blockquote{ max-width: 70ch; } .nn-testimonials .nn-t-card:nth-child(n+4):nth-last-child(2):nth-child(3n+1), .nn-testimonials .nn-t-card:nth-child(n+4):last-child:nth-child(3n+2){ grid-column: span 3; } } /* Services Grid */ .home_services{ width: 100%; background-color: transparent; overflow: hidden; } .home_services .grid{ display: flex; flex-direction: column; width: 100%; } /* Base State - Background-color has NO delay (0s) */ .home_services .grid .service-link{ text-decoration: none !important; color: #ffffff; display: block; border-top: 1px solid rgba(255, 255, 255, 0.1); opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease 0s, color 0.2s ease 0s; } /* Triggered State (Scroll Entry) - Only Opacity and Transform get the delays */ .home_services .grid .service-link.is-visible:nth-child(1){ opacity: 1; transform: translateY(0); transition-delay: 0.4s, 0.4s, 0s, 0s; } .home_services .grid .service-link.is-visible:nth-child(2){ opacity: 1; transform: translateY(0); transition-delay: 0.6s, 0.6s, 0s, 0s; } .home_services .grid .service-link.is-visible:nth-child(3){ opacity: 1; transform: translateY(0); transition-delay: 0.8s, 0.8s, 0s, 0s; } .home_services .grid .service-link.is-visible:nth-child(4){ opacity: 1; transform: translateY(0); transition-delay: 1.0s, 1.0s, 0s, 0s; } .home_services .grid .service-link:last-child{ border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* Item Layout */ .home_services .grid .service-item{ padding: 50px 40px; display: flex; align-items: center; } .home_services .grid .service-number{ flex: 0 0 13%; font-size: 1rem; color: rgba(255, 255, 255, 0.3); font-family: 'Instrument Sans', sans-serif; transition: color 0.2s ease; } .home_services .grid .service-name{ margin: 0; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease; } .home_services .grid .service-arrow{ margin-left: auto; width: 40px; height: 40px; opacity: 0.2; transition: all 0.3s ease; transform: rotate(-45deg); } /* Hover States - Force 0s delay for everything on interaction */ .home_services .grid .service-link:hover{ background-color: #E1FF04 !important; color: #111111 !important; transition-delay: 0s !important; } .home_services .grid .service-link:hover .service-number{ color: rgba(17, 17, 17, 0.5) !important; transition-delay: 0s !important; } .home_services .grid .service-link:hover .service-name{ transform: translateX(25px); color: #111111 !important; transition-delay: 0s !important; } .home_services .grid .service-link:hover .service-arrow{ opacity: 1; transform: rotate(0deg) scale(1.2); stroke: #111111; transition-delay: 0s !important; } /* Stats Grid */ .stats-section{ width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; position: relative; font-family: 'Instrument Sans', sans-serif; } /* Base Card Styling */ .stat-card{ padding: 80px 60px; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; min-height: 700px; border: none; border-radius: 0; transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative; pointer-events: none; } a.stat-card{ pointer-events: auto; } /* Desktop Backgrounds */ .stat-card:nth-child(1), .stat-card:nth-child(4){ background: #171717; color: #e6e6e6; } .stat-card:nth-child(2), .stat-card:nth-child(3){ background: transparent; color: #e6e6e6; } /* Neon Hover */ .stat-card:nth-child(1):hover, .stat-card:nth-child(4):hover{ background-color: #E1FF04; color: #111111; z-index: 2; transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Typography */ .card-label{ font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05rem; opacity: 0.4; align-self: flex-start; } .card-content{ display: flex; flex-direction: column; align-items: flex-end; width: 100%; } .stat-number{ font-size: clamp(5rem, 10vw, 8.75rem); font-weight: 600; letter-spacing: -0.04rem; line-height: 0.9em; text-align: right; display: block; margin-bottom: 1.25rem; } .stat-description{ font-size: 1.1875rem; font-weight: 400 !important; line-height: 1.4; max-width: 20rem; text-align: right; opacity: 0.7; font-style: normal; } .stat-card:hover .stat-description{ opacity: 0.9; font-weight: 400 !important; } /* Fade In on Scroll (JS adds .nn-reveal to the section, then .is-visible to each card) */ .stats-section.nn-reveal .stat-card{ opacity: 0; transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .stats-section.nn-reveal .stat-card.is-visible{ opacity: 1; } .stats-section.nn-reveal .stat-card.is-visible:nth-child(even){ transition-delay: 0.3s, 0s, 0s !important; } /* Stats Grid - Mobile */ @media (max-width: 992px){ .stats-section{ grid-template-columns: 1fr; } .stat-card{ min-height: 500px; padding: 60px 40px; } .stat-card:nth-child(3){ background: #171717; } .stats-section.nn-reveal .stat-card.is-visible:nth-child(even){ transition-delay: 0s !important; } } @media (prefers-reduced-motion: reduce){ .stats-section.nn-reveal .stat-card{ opacity: 1; } } /* Work Experience Column Grid */ .my_work_experience{ width: 100%; background-color: transparent; position: relative; z-index: 1; } .my_work_experience .grid{ display: flex; flex-direction: column; width: 100%; gap: 15px; } /* Item & Button Base State - Clean Slide-in Animation */ .my_work_experience .work-item, .my_work_experience .cv-container{ text-decoration: none !important; color: #ffffff; display: block; opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1); } /* Item Border Styling - Static */ .my_work_experience .work-item{ border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; background: transparent; pointer-events: none; } /* Entrance Trigger */ .my_work_experience .work-item.is-visible, .my_work_experience .cv-container.is-visible{ opacity: 1; transform: translateY(0); } /* Staggered Entrance Delays (Scroll Only) */ .my_work_experience .work-item.is-visible:nth-child(1){ transition-delay: 0.1s; } .my_work_experience .work-item.is-visible:nth-child(2){ transition-delay: 0.2s; } .my_work_experience .work-item.is-visible:nth-child(3){ transition-delay: 0.3s; } .my_work_experience .work-item.is-visible:nth-child(4){ transition-delay: 0.4s; } .my_work_experience .work-item.is-visible:nth-child(5){ transition-delay: 0.5s; } .my_work_experience .work-item.is-visible:nth-child(6){ transition-delay: 0.6s; } .my_work_experience .work-item.is-visible:nth-child(7){ transition-delay: 0.7s; } .my_work_experience .work-item.is-visible:nth-child(8){ transition-delay: 0.8s; } .my_work_experience .work-item.is-visible:nth-child(9){ transition-delay: 0.9s; } .my_work_experience .cv-container.is-visible{ transition-delay: 1s; } /* Layout Structure */ .my_work_experience .content{ padding: 25px; display: flex; flex-direction: column; width: 100%; } .my_work_experience .meta-info{ display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .my_work_experience .company{ font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.05em; } .my_work_experience .divider{ width: 4px; height: 4px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; flex-shrink: 0; } .my_work_experience .timespan{ font-size: 0.825rem; color: rgba(255, 255, 255, 0.3); font-family: 'Instrument Sans', sans-serif; } .my_work_experience .title{ margin: 0; color: #ffffff; } /* Full Width Resume Button */ .my_work_experience .cv-container{ margin-top: 25px; width: 100%; pointer-events: auto; } .my_work_experience .button.border{ display: block; width: 100%; padding: 18px 32px; border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; color: #fff !important; text-decoration: none !important; font-family: 'Instrument Sans', sans-serif; font-size: 1rem; text-align: center; transition: all 0.3s ease; } .my_work_experience .button.border:hover{ background: #E1FF04; color: #111111 !important; border-color: #E1FF04; } /* Contact Form - fields hidden until JS adds .is-visible */ .contact_form .ui-field-group{ opacity: 0; transform: translateY(20px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important; } .contact_form .ui-field-group.is-visible{ opacity: 1; transform: translateY(0); } /* Minimalist bottom-border only style */ .contact_form input:not([type="submit"]), .contact_form textarea, .contact_form select{ background: transparent !important; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; font-size: 1.1875rem !important; color: #FFFFFF !important; transition: border-color 0.4s ease !important; } /* White border when field has information */ .contact_form input:not(:placeholder-shown):not([type="submit"]), .contact_form textarea:not(:placeholder-shown){ border-bottom-color: #FFFFFF !important; } .contact_form label span{ color: #E1FF04; } /* Hide Placeholder on Click/Focus */ .contact_form input::placeholder, .contact_form textarea::placeholder{ transition: color 0.3s ease; } .contact_form input:focus::placeholder, .contact_form textarea:focus::placeholder{ color: transparent !important; transition: color 0.3s ease; } /* Neon focus state (overrides the white border while typing) */ .contact_form input:focus, .contact_form textarea:focus{ border-bottom-color: #E1FF04 !important; outline: none !important; } .contact_form textarea{ padding-top: 20px !important; } /* Submit Button */ .contact_form .ui-button{ background-color: #E1FF04 !important; color: #111111 !important; border-radius: 400px !important; padding: 20px 30px !important; font-weight: 600 !important; font-family: "Instrument Sans", Sans-serif; transition: background-color 0.3s ease, color 0.3s ease !important; } .contact_form .ui-button:hover{ background-color: #FFFFFF !important; color: #111111 !important; } /* Available Badge */ .available_badge{ border: 1px solid #303030; border-radius: 400px; background: rgb(23, 23, 26); padding: 7px 12px; margin: auto !important; margin-bottom: 40px !important; } .available_badge.left{ margin: 0 !important; margin-bottom: 20px !important; } .available_badge.paketi-cene{ margin-bottom: 20px !important; } /* List Style */ .ui-widget-text-editor ul{ padding-left: 13px; } .ui-widget-text-editor ul li p{ font-weight: 500; color: #FFFFFF !important; } /* Copy Email */ .copy-email{ position: relative; } /* Izrada sajtova - Logo traka "Radio sam za" (ispod hero dela) */ .nn-logos{ --nn-logo-gap: 96px; padding: 8px 0; } .nn-logos-title{ margin: 0 0 28px; text-align: center; color: rgba(255,255,255,.6); font-family: 'Instrument Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .nn-logos-marquee{ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .nn-logos-track{ display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: nn-logos-scroll 45s linear infinite; } .nn-logos-item{ flex: none; display: flex; align-items: center; padding: 0 calc(var(--nn-logo-gap) / 2); color: rgba(255,255,255,.55); } .nn-logos-item svg{ display: block; width: auto; max-width: none; } @keyframes nn-logos-scroll{ to { transform: translateX(-50%); } } @media (max-width: 1024px){ .nn-logos-title{ padding-left: 52px; text-align: left; } } /* tablet: poravnato sa sekcijama (10 + 32 + 10 px) */ @media (max-width: 767px){ .nn-logos-title{ padding-left: 35px; } } /* telefon: 10 + 15 + 10 px */ @media (max-width: 767px){ .nn-logos{ --nn-logo-gap: 56px; } .nn-logos-title{ margin-bottom: 20px; font-size: 10px; } .nn-logos-item svg{ transform: scale(.8); transform-origin: center; } .nn-logos-track{ animation-duration: 32s; } } @media (prefers-reduced-motion: reduce){ .nn-logos-marquee{ -webkit-mask-image: none; mask-image: none; } .nn-logos-track{ animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 24px; } .nn-logos-item[aria-hidden="true"]{ display: none; } } .ui-728 .ui-element.ui-element-add60f0 .ui-post__excerpt p{ font-size: 0.96rem !important; } /* Portfolio Scroll Box */ .portfolio-window{ width: 100%; height: 600px; background: #ff0000; position: relative; border-radius: 8px; overflow: hidden; padding: 30px; box-sizing: border-box; } .portfolio-window img{ border-radius: 6px; } .image-scaler{ width: 100%; height: 100%; overflow: hidden; position: relative; border-radius: 6px; } .scroll-image{ width: 100%; display: block; height: auto; pointer-events: none; will-change: transform; } /* Auto scroll loop: top pause, scroll down, bottom pause, glide back up (JS sets --nn-dist and --nn-dur per image) */ /* Scrolling website screenshot: scrolls by itself (portfolio.js); the visitor can take over with wheel / trackpad / swipe */ .portfolio-window .image-scaler{ overflow-y: auto; overscroll-behavior-y: auto; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-y; } .portfolio-window .image-scaler::-webkit-scrollbar{ display: none; } .portfolio-window{ -webkit-tap-highlight-color: transparent; } /* Hint badge, bottom right */ .portfolio-window.nn-scrollable::after{ position: absolute; right: 44px; bottom: 44px; z-index: 2; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 400px; background: rgba(17, 17, 17, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.12); color: #FFFFFF !important; font-family: Inter, sans-serif; font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .02em; white-space: nowrap; pointer-events: none; content: "Scroll to explore"; transition: opacity .3s ease; } .portfolio-window.nn-scrollable.nn-manual::after{ opacity: 0; } @media (hover: none){ .portfolio-window.nn-scrollable::after{ content: "Swipe to explore"; } } .portfolio-window.provision{ background: #B09C45; } .portfolio-window.rockvilla{ background: #252525; } .portfolio-window.palazzo{ background: #BA9976; } .portfolio-window.frontier{ background: #1A204F; } .portfolio-window.gradingpro{ background: #A08869; } .portfolio-window.lcard{ background: #F3A41D; } .portfolio-window.dinkdish{ background: #002341; } .portfolio-window.elaris{ background: #2D6548; } /* Sticky Column: add class "nn-sticky-col" to an page builder column (Advanced → CSS Classes). Its content stays in view while the neighbouring column scrolls, until the section ends. Desktop & tablet only. */ @media (min-width: 768px){ .ui-column.nn-sticky-col > .ui-widget-wrap{ position: sticky; top: 160px; align-self: flex-start; height: auto; padding-bottom: 0 !important; } } .nn-sticky-col .ui-widget:last-child p:last-child{ margin-bottom: 0 !important; } @keyframes nn-pain-in{ from { opacity: 0; transform: translateY(24px); } } @keyframes nn-svb-in{ from { opacity: 0; transform: translateY(30px); } } /* Izrada Sajtova Page - Process steps (3 / 2 / 1 columns; JS adds .nn-reveal, then .is-visible + --nn-d delay, in order) */ .nn-steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; } .nn-step{ display: flex; flex-direction: column; margin: 0; padding: clamp(28px, 2.6vw, 40px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; background: #111111; } .nn-step-num{ display: block; margin-bottom: clamp(24px, 2.4vw, 36px); color: #E1FF04; font-family: 'Instrument Sans', sans-serif; font-size: clamp(40px, 3.6vw, 56px); font-weight: 400; line-height: 1; letter-spacing: -.02em; } .nn-steps .nn-step-title{ margin: 0 0 14px; color: #FFFFFF; font-family: 'Instrument Sans', sans-serif; font-size: clamp(19px, 1.5vw, 22px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; } .nn-steps .nn-step-desc{ margin: 0; color: rgba(255, 255, 255, 0.6); font-family: Inter, sans-serif; font-size: 15.5px; line-height: 1.65; } .nn-steps.nn-reveal .nn-step:not(.is-visible){ opacity: 0; } .nn-steps.nn-reveal .nn-step.is-visible{ animation: nn-step-in .9s cubic-bezier(0.16, 1, 0.3, 1) var(--nn-d, 0s) backwards; } @keyframes nn-step-in{ from { opacity: 0; transform: translateY(24px); } } @media (min-width: 1025px){ .nn-steps{ grid-template-columns: repeat(6, 1fr); } .nn-step{ grid-column: span 2; } .nn-step:nth-child(n+4){ grid-column: span 3; } } /* 5 koraka: 3 gore, 2 dole */ @media (max-width: 1024px){ .nn-steps{ grid-template-columns: repeat(2, 1fr); } .nn-step:last-child:nth-child(odd){ grid-column: 1 / -1; } } @media (max-width: 767px){ .nn-steps{ grid-template-columns: 1fr; gap: 12px; } .nn-step{ padding: 24px; border-radius: 16px; } } @media (prefers-reduced-motion: reduce){ .nn-steps.nn-reveal .nn-step:not(.is-visible){ opacity: 1; } .nn-steps.nn-reveal .nn-step.is-visible{ animation: none; } } /* Izrada Sajtova Page - Pricing (3 plans + 2 extras) */ .nn-pricing{ display: flex; flex-direction: column; gap: 16px; width: 100%; } .nn-plans{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; } .nn-plan{ display: flex; flex-direction: column; padding: clamp(28px, 2.6vw, 44px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; background: #111111; } .nn-plan--featured{ border-color: #E1FF04; background: rgb(23, 23, 26); } .nn-plan, .nn-extra{ transition: border-color .3s ease; } @media (hover: hover){ .nn-plan:hover, .nn-extra:hover{ border-color: #E1FF04; } } /* lime border on hover, like the featured plan */ .nn-plan-head{ display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; min-height: 64px; } .nn-pricing .nn-plan-name{ margin: 0; color: #FFFFFF; font-family: 'Instrument Sans', sans-serif; font-size: clamp(24px, 2vw, 30px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; } .nn-plan-sub{ display: block; margin-top: 8px; color: rgba(255, 255, 255, 0.55); font-family: Inter, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: 0; } .nn-plan-note{ color: rgba(255, 255, 255, 0.5); font-size: 14px; } .nn-plan-badge{ flex-shrink: 0; padding: 7px 12px; border-radius: 400px; background: #E1FF04; color: #111111; font-family: 'Instrument Sans', sans-serif; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; text-align: center; } .nn-pricing .nn-plan-price{ margin: clamp(24px, 2.4vw, 36px) 0; color: #FFFFFF; font-family: 'Instrument Sans', sans-serif; font-size: clamp(34px, 2.8vw, 44px); font-weight: 500; line-height: 1; letter-spacing: -.02em; white-space: nowrap; } .nn-plan-from{ margin-right: 4px; color: rgba(255, 255, 255, 0.55); font-size: 16px; font-weight: 400; letter-spacing: 0; } .nn-pricing .nn-plan-why{ margin: calc(-1 * clamp(8px, 1vw, 14px)) 0 clamp(24px, 2.4vw, 32px); color: rgba(255, 255, 255, 0.6); font-family: Inter, sans-serif; font-size: 14.5px; line-height: 1.55; } /* jedna recenica zasto se paket isplati */ .nn-plan-list{ margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.1); } .nn-plan-list li{ position: relative; margin: 0; padding: 16px 0 16px 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); font-family: Inter, sans-serif; font-size: 16px; line-height: 1.5; } .nn-plan-list li::before{ content: "+"; position: absolute; left: 2px; top: 15px; color: #E1FF04 !important; font-family: 'Instrument Sans', sans-serif; font-size: 18px; font-weight: 600; line-height: 1.4; } .nn-plan-list li:last-child{ border-bottom: 0; } .nn-plan-list{ margin-bottom: 28px !important; } .nn-pricing .nn-plan-cta{ display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 14px 22px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 400px; background: transparent; color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none !important; transition: background-color .3s ease, border-color .3s ease, color .3s ease; } .nn-pricing .nn-plan-cta::after, .nn-pricing .nn-extra-link::after{ content: ""; flex-shrink: 0; width: 16px; height: 16px; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; } .nn-pricing .nn-plan-cta:hover{ border-color: #E1FF04; background: #E1FF04; color: #111111 !important; } .nn-pricing .nn-plan-cta--primary{ border-color: #E1FF04; background: #E1FF04; color: #111111 !important; } .nn-pricing .nn-plan-cta--primary:hover{ border-color: #FFFFFF; background: #FFFFFF; } .nn-extra-side{ display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; } .nn-pricing .nn-extra-link{ display: inline-flex; align-items: center; gap: 6px; color: #E1FF04 !important; font-family: 'Instrument Sans', sans-serif; font-size: 14px; font-weight: 500; text-decoration: none !important; transition: color .3s ease; } .nn-pricing .nn-extra-link:hover{ color: #FFFFFF !important; } #kontakt{ scroll-margin-top: 110px; } .nn-extras{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .nn-extra{ display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(24px, 2.4vw, 40px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; background: #111111; } .nn-pricing .nn-extra-name{ margin: 0; color: #FFFFFF; font-family: 'Instrument Sans', sans-serif; font-size: clamp(17px, 1.3vw, 19px); font-weight: 600; line-height: 1.3; letter-spacing: 0 !important; } .nn-pricing .nn-extra-desc{ margin: 6px 0 0; color: rgba(255, 255, 255, 0.55); font-family: Inter, sans-serif; font-size: 14px; line-height: 1.5; } .nn-pricing .nn-extra-price{ flex-shrink: 0; margin: 0; color: #FFFFFF; font-family: 'Instrument Sans', sans-serif; font-size: clamp(26px, 2.2vw, 34px); font-weight: 500; line-height: 1; letter-spacing: -.02em; white-space: nowrap; text-align: right; } .nn-pricing .nn-pricing-vat{ margin: 10px 0 0 !important; color: rgba(255, 255, 255, 0.5) !important; font-family: Inter, sans-serif; font-size: 13px; line-height: 1.5; } /* VAT note under the pricing */ .nn-extra-price span{ display: block; margin-top: 6px; color: rgba(255, 255, 255, 0.55); font-family: Inter, sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0; } @media (max-width: 1024px){ .nn-plans{ grid-template-columns: 1fr; } } @media (max-width: 767px){ .nn-extras{ grid-template-columns: 1fr; } .nn-plan, .nn-extra{ border-radius: 16px; } .nn-extra{ flex-direction: column; align-items: flex-start; gap: 14px; } .nn-pricing .nn-extra-price{ text-align: left; } .nn-extra-side{ align-items: flex-start; } } /* Pricing - fade up on scroll, in order (JS adds .nn-reveal, then .is-visible + --nn-d delay) */ .nn-pricing.nn-reveal .nn-plan:not(.is-visible), .nn-pricing.nn-reveal .nn-extra:not(.is-visible){ opacity: 0; } .nn-pricing.nn-reveal .is-visible{ animation: nn-price-in .9s cubic-bezier(0.16, 1, 0.3, 1) var(--nn-d, 0s) backwards; } @keyframes nn-price-in{ from { opacity: 0; transform: translateY(24px); } } @media (prefers-reduced-motion: reduce){ .nn-pricing.nn-reveal .nn-plan:not(.is-visible), .nn-pricing.nn-reveal .nn-extra:not(.is-visible){ opacity: 1; } .nn-pricing.nn-reveal .is-visible{ animation: none; } } /* Izrada Sajtova Page - Featured projects (manual, Serbian; 2 columns, 1 on phones) */ .nn-projects{ display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(36px, 3.5vw, 56px) clamp(24px, 3vw, 44px); } .nn-projects .nn-proj{ display: flex; flex-direction: column; gap: 32px; color: #FFFFFF !important; text-decoration: none !important; } .nn-proj-media{ position: relative; display: flex; overflow: hidden; border-radius: 6px; aspect-ratio: 4 / 3; padding: clamp(14px, 2vw, 28px) clamp(20px, 3.4vw, 48px); background: var(--nn-frame, #181818); box-sizing: border-box; } .nn-projects .nn-proj-media img{ display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; transition: transform .8s cubic-bezier(0.16, 1, 0.3, 1); } /* Hint badge on scrolling projects (mouse/trackpad only): "hover" hint, then "click" hint while hovered */ @media (hover: hover){ .nn-proj-media:has(.nn-proj-scroll)::after{ content: "Pređite mišem da vidite više"; position: absolute; right: clamp(28px, 4.2vw, 60px); bottom: clamp(24px, 3vw, 40px); z-index: 2; padding: 8px 14px; border-radius: 400px; background: rgba(17, 17, 17, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.12); color: #FFFFFF !important; font-family: Inter, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .02em; white-space: nowrap; pointer-events: none; transition: background-color .3s ease, border-color .3s ease, color .3s ease; } .nn-proj:hover .nn-proj-media:has(.nn-proj-scroll)::after{ content: "Kliknite za ceo projekat"; background: #E1FF04; border-color: #E1FF04; color: #111111 !important; } } @media (hover: none){ .nn-proj-media:has(.nn-proj-scroll)::after{ content: "Dodirnite za ceo projekat"; position: absolute; right: clamp(28px, 4.2vw, 60px); bottom: clamp(24px, 3vw, 40px); z-index: 2; padding: 8px 14px; border-radius: 400px; background: #E1FF04; color: #111111 !important; font-family: Inter, sans-serif; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .02em; white-space: nowrap; pointer-events: none; } } .nn-proj-body{ display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; } .nn-proj-text{ display: flex; flex-direction: column; gap: 10px; } .nn-projects .nn-proj-cat{ margin-bottom: 8px; color: rgba(255, 255, 255, 0.5); font-family: Inter, sans-serif; font-size: 12px; font-weight: 600 !important; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; } .nn-projects .nn-proj-title{ color: #FFFFFF; font-family: 'Instrument Sans', sans-serif; font-size: clamp(22px, 2vw, 30px); font-weight: 500 !important; line-height: 1.2; letter-spacing: -.02em; transition: color .3s ease; } .nn-projects .nn-proj-desc{ margin-bottom: 10px; max-width: 620px; color: rgba(255, 255, 255, 0.6); font-family: Inter, sans-serif; font-size: 15.5px; font-weight: 400 !important; line-height: 1.65; } .nn-projects .nn-proj-link{ display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: #FFFFFF; font-family: 'Instrument Sans', sans-serif; font-size: 15px; font-weight: 500 !important; line-height: 1.2; transition: color .3s ease; } .nn-proj-link::after{ content: ""; width: 16px; height: 16px; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; } @media (hover: hover){ .nn-proj:hover .nn-proj-media img:not(.nn-proj-scroll){ transform: scale(1.03); } .nn-proj:hover .nn-proj-link{ color: #E1FF04; } } .nn-projects.nn-reveal .nn-proj:not(.is-visible){ opacity: 0; } .nn-projects.nn-reveal .nn-proj.is-visible{ animation: nn-proj-in 1s cubic-bezier(0.16, 1, 0.3, 1) var(--nn-d, 0s) backwards; } @keyframes nn-proj-in{ from { opacity: 0; transform: translateY(30px); } } @media (max-width: 767px){ .nn-projects{ grid-template-columns: 1fr; gap: 40px; } .nn-proj-media{ border-radius: 6px; } } @media (prefers-reduced-motion: reduce){ .nn-projects.nn-reveal .nn-proj:not(.is-visible){ opacity: 1; } .nn-projects.nn-reveal .nn-proj.is-visible{ animation: none; } } .nn-projects .nn-proj-media img:not(.nn-proj-scroll){ object-position: top center; } .nn-proj-media.nn-proj-media--shot{ padding: 0; } /* finished project shot (own background), fills the card */ /* Izdvojeni projekti - "Prikaži još projekata" (samo telefon, posle 4 kartice) */ .nn-projects .nn-proj-showmore{ display: none; } @media (max-width: 767px){ .nn-projects:not(.is-expanded) > .nn-proj:nth-of-type(n+5){ display: none; } .nn-projects .nn-proj-showmore{ display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; margin: 0; padding: 0 24px; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 400px; background: transparent !important; color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif; font-size: 16px; font-weight: 500 !important; line-height: 1; cursor: pointer; } .nn-projects.is-expanded .nn-proj-showmore{ display: none; } } /* Izrada Sajtova Page - Project popups (JS moves .nn-cs to , adds .is-open; html.nn-cs-lock stops page scroll) */ html.nn-cs-lock{ overflow: hidden; } .nn-cs{ position: fixed; inset: 0; z-index: 100000; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #111111; color: #FFFFFF !important; font-family: Inter, sans-serif; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; } .nn-cs[hidden]{ display: none; } .nn-cs.is-open{ opacity: 1; visibility: visible; transition: opacity .35s ease; } .nn-cs:focus{ outline: none; } .nn-cs .nn-cs-inner{ display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); max-width: 1240px; margin: 0 auto; padding: clamp(28px, 4vw, 56px) clamp(28px, 5vw, 48px) clamp(40px, 5vw, 72px); box-sizing: border-box; transform: translateY(24px); transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1); } .nn-cs.is-open .nn-cs-inner{ transform: none; } /* Top bar with the X */ .nn-cs .nn-cs-bar{ position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px max(clamp(28px, 5vw, 48px), calc((100% - 1144px) / 2)); background: rgba(17, 17, 17, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .nn-cs .nn-cs-bar-name{ color: rgba(255, 255, 255, 0.6) !important; font-family: 'Instrument Sans', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -.01em; } .nn-cs .nn-cs-close{ display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 44px; margin: 0; padding: 0 8px 0 18px !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 400px !important; background: transparent !important; color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease; } .nn-cs .nn-cs-close-x{ position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); transition: background-color .3s ease; } .nn-cs .nn-cs-close-x::before, .nn-cs .nn-cs-close-x::after{ content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; border-radius: 2px; background: #FFFFFF !important; transform: rotate(45deg); transition: background-color .3s ease; } .nn-cs .nn-cs-close-x::after{ transform: rotate(-45deg); } .nn-cs .nn-cs-close:focus-visible{ outline: 2px solid #E1FF04; outline-offset: 3px; } /* Header */ .nn-cs .nn-cs-head{ display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .nn-cs .nn-cs-tag{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 400px; background: rgb(23, 23, 26); color: #FFFFFF !important; font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; } .nn-cs .nn-cs-tag::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: #E1FF04 !important; } .nn-cs .nn-cs-title{ margin: 0 !important; color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif !important; font-size: clamp(44px, 7vw, 96px) !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: -.04em !important; } .nn-cs .nn-cs-lead{ max-width: 760px; margin: 0 !important; color: rgba(255, 255, 255, 0.6) !important; font-family: Inter, sans-serif; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; text-wrap: balance; } /* Buttons and links (lime pill / outline pill, drawn arrows) */ .nn-cs .nn-cs-ctas{ display: flex; flex-wrap: wrap; gap: 10px; } .nn-cs .nn-cs-primary, .nn-cs .nn-cs-secondary, .nn-cs .nn-cs-contact, .nn-cs .nn-cs-visit{ display: inline-flex; align-items: center; gap: 10px; padding: 19px 29px; border: 1px solid transparent; border-radius: 400px; font-family: 'Instrument Sans', sans-serif; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none !important; transition: background-color .3s ease, border-color .3s ease, color .3s ease; } .nn-cs .nn-cs-primary{ border-color: #E1FF04; background: #E1FF04; color: #111111 !important; } .nn-cs .nn-cs-secondary{ border-color: rgba(255, 255, 255, 0.22); background: transparent; color: #FFFFFF !important; } .nn-cs .nn-cs-contact{ border-color: #111111; background: #111111; color: #FFFFFF !important; } .nn-cs .nn-cs-visit{ border-color: rgba(17, 17, 17, 0.35); background: transparent; color: #111111 !important; } .nn-cs .nn-cs-primary::after, .nn-cs .nn-cs-secondary::after, .nn-cs .nn-cs-visit::after, .nn-cs .nn-cs-contact::after{ content: ""; flex-shrink: 0; width: 16px; height: 16px; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; } /* Projekti - WhatsApp dugmad: ikonica ispred teksta, bez strelice */ .nn-cs .nn-cs-primary::after, .nn-cs .nn-cs-contact::after{ content: none; } .nn-cs .nn-cs-primary::before, .nn-cs .nn-cs-contact::before{ content: ""; flex-shrink: 0; width: 16px; height: 16px; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") center / contain no-repeat; } .nn-cs .nn-cs-primary:focus-visible, .nn-cs .nn-cs-secondary:focus-visible, .nn-cs .nn-cs-contact:focus-visible, .nn-cs .nn-cs-visit:focus-visible, .nn-cs .nn-cs-nav-link:focus-visible{ outline: 2px solid #E1FF04; outline-offset: 3px; } /* Auto-scrolling homepage in a colored frame (JS moves img.nn-cs-scroll) */ .nn-cs .nn-cs-hero{ position: relative; padding: clamp(16px, 4vw, 64px); border-radius: 20px; background: var(--nn-frame, #181818); box-sizing: border-box; } .nn-cs .nn-cs-screen{ position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #FFFFFF; } .nn-cs .nn-cs-screen img{ position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; max-width: none; margin: 0; border-radius: 0; will-change: transform; } /* Intro + facts */ .nn-cs .nn-cs-intro{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 6vw, 96px); align-items: start; } .nn-cs .nn-cs-intro-text{ margin: 0 !important; color: #FFFFFF !important; font-family: Inter, sans-serif; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.55; letter-spacing: -.01em; text-wrap: pretty; } .nn-cs .nn-cs-meta{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 0; } .nn-cs .nn-cs-meta > div{ padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } .nn-cs .nn-cs-meta dt{ margin: 0; color: rgba(255, 255, 255, 0.5) !important; font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .nn-cs .nn-cs-meta dd{ margin: 6px 0 0; color: #FFFFFF !important; font-family: Inter, sans-serif; font-size: 16px; line-height: 1.4; } /* Numbered sections (Izazov / Rešenje / Rezultat) */ .nn-cs .nn-cs-sec{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 5vw, 80px); padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .nn-cs .nn-cs-sec--result{ padding-top: 0; border-top: 0; } .nn-cs .nn-cs-sec-head{ display: flex; flex-direction: column; gap: 10px; align-self: start; } .nn-cs .nn-cs-num{ color: #E1FF04 !important; font-family: Inter, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .04em; } .nn-cs .nn-cs-h{ margin: 0 !important; color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif !important; font-size: clamp(28px, 3vw, 40px) !important; font-weight: 500 !important; line-height: 1.1 !important; letter-spacing: -.03em !important; } .nn-cs .nn-cs-sec-body{ display: flex; flex-direction: column; gap: 32px; } .nn-cs .nn-cs-text{ max-width: 640px; margin: 0 !important; color: rgba(255, 255, 255, 0.6) !important; font-family: Inter, sans-serif; font-size: 17px; line-height: 1.7; text-wrap: pretty; } .nn-cs .nn-cs-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; margin: 0 !important; padding: 0 !important; list-style: none; } .nn-cs .nn-cs-list li{ display: flex; gap: 14px; margin: 0; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: rgb(23, 23, 26); color: #FFFFFF !important; font-family: Inter, sans-serif; font-size: 15px; line-height: 1.5; } .nn-cs .nn-cs-list li span{ flex: none; padding-top: 2px; color: #E1FF04 !important; font-size: 12px; font-weight: 700; } /* Desktop + phone presentation (browser window with the phone in front, on the project's color) */ .nn-cs .nn-cs-devices{ position: relative; padding: clamp(24px, 5vw, 72px) clamp(20px, 5vw, 72px) clamp(28px, 5vw, 72px); border-radius: 20px; background: var(--nn-frame, #181818); background: color-mix(in srgb, var(--nn-frame, #181818) 50%, #111111); overflow: hidden; box-sizing: border-box; } .nn-cs .nn-cs-browser{ width: 80%; margin: 0; overflow: hidden; border-radius: 10px; background: #FFFFFF; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45); } .nn-cs .nn-cs-devices.no-phone .nn-cs-browser{ width: 100%; } .nn-cs .nn-cs-browser-bar{ display: flex; gap: 6px; padding: 10px 14px; background: #ECECEE; } .nn-cs .nn-cs-browser-bar i{ width: 9px; height: 9px; border-radius: 50%; background: rgba(0, 0, 0, 0.16); } .nn-cs .nn-cs-browser-screen{ display: block; aspect-ratio: 16 / 10; overflow: hidden; } .nn-cs .nn-cs-phone{ position: absolute; right: clamp(20px, 5vw, 72px); bottom: clamp(28px, 5vw, 72px); width: 20%; margin: 0; padding: clamp(4px, 0.6vw, 8px); border-radius: clamp(20px, 2.8vw, 36px); background: #0C0C0D; box-shadow: 0 30px 60px -16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); box-sizing: border-box; } .nn-cs .nn-cs-phone-screen{ display: block; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: clamp(16px, 2.2vw, 28px); background: #FFFFFF; } .nn-cs .nn-cs-browser-screen img, .nn-cs .nn-cs-phone-screen img{ display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: top center; border-radius: 0; } /* Result card */ .nn-cs .nn-cs-result{ display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 3vw, 40px); border-radius: 20px; background: #E1FF04; } .nn-cs .nn-cs-result-big{ margin: 0 !important; color: #111111 !important; font-family: 'Instrument Sans', sans-serif; font-size: clamp(20px, 2vw, 26px); font-weight: 500; line-height: 1.4; letter-spacing: -.015em; text-wrap: pretty; } .nn-cs .nn-cs-result-text{ margin: 0 !important; color: rgba(17, 17, 17, 0.75) !important; font-family: Inter, sans-serif; font-size: 16px; line-height: 1.65; text-wrap: pretty; } .nn-cs .nn-cs-result-ctas{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; } .nn-cs .nn-cs-call{ margin-left: 8px; color: rgba(17, 17, 17, 0.75) !important; font-family: Inter, sans-serif; font-size: 15px; line-height: 1.4; text-decoration: none !important; transition: color .2s ease; } .nn-cs .nn-cs-call strong{ color: #111111; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(17, 17, 17, 0.3); text-underline-offset: 3px; transition: text-decoration-color .2s ease; } @media (hover: hover){ .nn-cs .nn-cs-call:hover strong{ text-decoration-color: #111111; } } @media (max-width: 767px){ .nn-cs .nn-cs-call{ flex-basis: 100%; margin: 6px 0 0; text-align: center; } } /* Previous / next project */ .nn-cs .nn-cs-nav{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .nn-cs .nn-cs-nav:empty{ display: none; } .nn-cs .nn-cs-nav-link{ position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 22px 64px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: rgb(23, 23, 26); color: #FFFFFF !important; text-decoration: none !important; transition: border-color .3s ease; } .nn-cs .nn-cs-nav-link--next{ align-items: flex-end; padding: 22px 64px 22px 24px; text-align: right; } .nn-cs .nn-cs-nav-link::after{ content: ""; position: absolute; top: 50%; left: 24px; width: 22px; height: 22px; margin-top: -11px; background: currentColor !important; transform: scaleX(-1); transition: transform .3s ease; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; } .nn-cs .nn-cs-nav-link--next::after{ left: auto; right: 24px; transform: none; } .nn-cs .nn-cs-nav-label{ color: rgba(255, 255, 255, 0.5) !important; font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .nn-cs .nn-cs-nav-name{ color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif; font-size: clamp(20px, 2vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; transition: color .3s ease; } @media (hover: hover){ .nn-cs .nn-cs-close:hover{ border-color: #E1FF04 !important; background: #E1FF04 !important; color: #111111 !important; } .nn-cs .nn-cs-close:hover .nn-cs-close-x{ background: rgba(17, 17, 17, 0.12); } .nn-cs .nn-cs-close:hover .nn-cs-close-x::before, .nn-cs .nn-cs-close:hover .nn-cs-close-x::after{ background: #111111 !important; } .nn-cs .nn-cs-primary:hover{ border-color: #FFFFFF; background: #FFFFFF; } .nn-cs .nn-cs-secondary:hover{ border-color: #FFFFFF; background: #FFFFFF; color: #111111 !important; } .nn-cs .nn-cs-contact:hover{ border-color: #FFFFFF; background: #FFFFFF; color: #111111 !important; } .nn-cs .nn-cs-visit:hover{ border-color: #111111; background: #111111; color: #FFFFFF !important; } .nn-cs .nn-cs-nav-link:hover{ border-color: #E1FF04; } .nn-cs .nn-cs-nav-link:hover .nn-cs-nav-name{ color: #E1FF04 !important; } .nn-cs .nn-cs-nav-link--prev:hover::after{ transform: scaleX(-1) translateX(4px); } .nn-cs .nn-cs-nav-link--next:hover::after{ transform: translateX(4px); } } @media (max-width: 1024px){ .nn-cs .nn-cs-inner{ padding-top: 68px; } } /* more room under the top bar on tablet */ @media (max-width: 767px){ .nn-cs .nn-cs-bar{ padding-top: 10px; padding-bottom: 10px; } .nn-cs .nn-cs-inner{ padding-top: 56px; } .nn-cs .nn-cs-close{ min-height: 40px; padding-left: 14px !important; font-size: 13px !important; } .nn-cs .nn-cs-head{ gap: 20px; } .nn-cs .nn-cs-hero{ border-radius: 14px; } .nn-cs .nn-cs-screen{ aspect-ratio: 1 / 1; border-radius: 6px; } .nn-cs .nn-cs-meta{ grid-template-columns: 1fr; } .nn-cs .nn-cs-text{ font-size: 16px; } .nn-cs .nn-cs-devices{ padding: 20px 16px 28px; border-radius: 14px; } .nn-cs .nn-cs-browser{ width: 84%; border-radius: 6px; } .nn-cs .nn-cs-browser-bar{ gap: 4px; padding: 6px 8px; } .nn-cs .nn-cs-browser-bar i{ width: 5px; height: 5px; } .nn-cs .nn-cs-phone{ right: 14px; bottom: 20px; width: 25%; padding: 3px; } .nn-cs .nn-cs-result{ border-radius: 16px; } .nn-cs .nn-cs-nav{ grid-template-columns: 1fr; gap: 12px; } .nn-cs .nn-cs-nav-link{ padding: 18px 20px 18px 56px; } .nn-cs .nn-cs-nav-link--next{ padding: 18px 56px 18px 20px; } .nn-cs .nn-cs-nav-link::after{ left: 20px; } .nn-cs .nn-cs-nav-link--next::after{ right: 20px; } } @media (prefers-reduced-motion: reduce){ .nn-cs, .nn-cs.is-open, .nn-cs .nn-cs-inner{ transition: none; } .nn-cs .nn-cs-inner{ transform: none; } } /* Izrada Sajtova Page - FAQ accordion (native
, same card style as the problem list, lime + / − icon) */ .nn-faq{ display: flex; flex-direction: column; gap: 18px; width: 100%; } .nn-faq-item{ margin: 0; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: transparent; transition: border-color .3s ease; } .nn-faq .nn-faq-q{ position: relative; display: block; padding: 16px 52px 16px 18px; color: #FFFFFF; font-family: 'Instrument Sans', sans-serif; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nn-faq .nn-faq-q::-webkit-details-marker{ display: none; } .nn-faq .nn-faq-q::before, .nn-faq .nn-faq-q::after{ content: ""; position: absolute; top: 50%; right: 20px; width: 13px; height: 1.5px; margin-top: -0.75px; border-radius: 2px; background: #E1FF04 !important; transition: transform .3s ease; } .nn-faq .nn-faq-q::after{ transform: rotate(90deg); } .nn-faq .nn-faq-item[open] .nn-faq-q::after{ transform: rotate(0deg); } .nn-faq .nn-faq-q:focus-visible{ outline: 2px solid #E1FF04; outline-offset: -2px; border-radius: 14px; } .nn-faq .nn-faq-a{ padding: 0 52px 16px 18px; } .nn-faq .nn-faq-a p{ margin: 0 !important; max-width: 720px; color: rgba(255, 255, 255, 0.6); font-family: Inter, sans-serif; font-size: 15px; line-height: 1.65; } .nn-faq .nn-faq-a p + p{ margin-top: 12px !important; } @media (hover: hover){ .nn-faq-item:hover{ border-color: #E1FF04; } } @media (max-width: 767px){ .nn-faq{ gap: 14px; } .nn-faq-item{ border-radius: 12px; } .nn-faq .nn-faq-q{ padding: 14px 44px 14px 16px; font-size: 1rem; } .nn-faq .nn-faq-q::before, .nn-faq .nn-faq-q::after{ right: 16px; width: 12px; } .nn-faq .nn-faq-a{ padding: 0 16px 14px; } .nn-faq .nn-faq-a p{ font-size: 14.5px; } } .nn-faq .nn-faq-item[open] .nn-faq-a{ animation: nn-faq-in .35s ease; } @keyframes nn-faq-in{ from { opacity: 0; transform: translateY(-6px); } } .nn-faq.nn-reveal .nn-faq-item:not(.is-visible){ opacity: 0; } .nn-faq.nn-reveal .nn-faq-item.is-visible{ animation: nn-faq-item-in .8s cubic-bezier(0.16, 1, 0.3, 1) var(--nn-d, 0s) backwards; } @keyframes nn-faq-item-in{ from { opacity: 0; transform: translateY(20px); } } @media (prefers-reduced-motion: reduce){ .nn-faq .nn-faq-item[open] .nn-faq-a{ animation: none; } .nn-faq.nn-reveal .nn-faq-item:not(.is-visible){ opacity: 1; } .nn-faq.nn-reveal .nn-faq-item.is-visible{ animation: none; } } /* Izrada Sajtova Page - Contact form (.izrada-sajta-forma on the page builder Form widget; generic fields covered too) */ .ui-element.izrada-sajta-forma{ padding: clamp(22px, 2.5vw, 36px) !important; border-radius: 20px; background: rgb(23, 23, 26); box-sizing: border-box; } .izrada-sajta-forma .ui-form-fields-wrapper{ row-gap: 26px !important; } .izrada-sajta-forma .ui-field-group{ margin-bottom: 0 !important; } .izrada-sajta-forma .ui-field-label, .izrada-sajta-forma label{ display: block; margin-bottom: 16px !important; color: rgba(255, 255, 255, 0.7) !important; font-family: Inter, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; } .izrada-sajta-forma .ui-mark-required .ui-field-label::after, .izrada-sajta-forma .required{ color: #E1FF04 !important; } .izrada-sajta-forma input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .izrada-sajta-forma textarea, .izrada-sajta-forma select{ width: 100%; min-height: 46px; padding: 11px 16px !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 10px !important; background-color: transparent !important; color: #FFFFFF !important; font-family: Inter, sans-serif !important; font-size: 16px !important; line-height: 1.5 !important; box-shadow: none !important; outline: none !important; transition: border-color .3s ease, background-color .3s ease; } .izrada-sajta-forma textarea{ min-height: 140px; resize: vertical; } .izrada-sajta-forma input::placeholder, .izrada-sajta-forma textarea::placeholder{ color: rgba(255, 255, 255, 0.6) !important; opacity: 1; transition: color .2s ease; } .izrada-sajta-forma input:focus::placeholder, .izrada-sajta-forma textarea:focus::placeholder{ color: transparent !important; } .izrada-sajta-forma input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):hover, .izrada-sajta-forma textarea:hover, .izrada-sajta-forma select:hover{ border-color: #E1FF04 !important; } .izrada-sajta-forma input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus, .izrada-sajta-forma textarea:focus, .izrada-sajta-forma select:focus{ border-color: #E1FF04 !important; background-color: transparent !important; } .izrada-sajta-forma select{ appearance: none; -webkit-appearance: none; padding-right: 44px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E1FF04' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 16px !important; } .izrada-sajta-forma select option{ background: #111111; color: #FFFFFF; } .izrada-sajta-forma input[type="checkbox"], .izrada-sajta-forma input[type="radio"]{ accent-color: #E1FF04; } .izrada-sajta-forma .ui-field-subgroup label, .izrada-sajta-forma .ui-field-option label{ color: rgba(255, 255, 255, 0.7) !important; font-weight: 400 !important; } .izrada-sajta-forma .ui-button, .izrada-sajta-forma button[type="submit"], .izrada-sajta-forma input[type="submit"]{ width: 100%; min-height: 56px; padding: 16px 28px !important; border: 0 !important; border-radius: 400px !important; background-color: #E1FF04 !important; color: #111111 !important; font-family: 'Instrument Sans', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer; transition: background-color .3s ease, color .3s ease; } .izrada-sajta-forma .ui-button:hover, .izrada-sajta-forma button[type="submit"]:hover, .izrada-sajta-forma input[type="submit"]:hover{ background-color: #FFFFFF !important; color: #111111 !important; } .izrada-sajta-forma .ui-button .ui-button-content-wrapper{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .izrada-sajta-forma .ui-button .ui-button-text::after{ content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -3px; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; } .izrada-sajta-forma .ui-message-danger, .izrada-sajta-forma .ui-error .ui-field{ border-color: #FF5A5A !important; } /* Contact form - Radio / Checkbox options as pills (set the field's Inline List option on) */ .izrada-sajta-forma .ui-field-subgroup{ display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 8px; } .izrada-sajta-forma .ui-field-subgroup .ui-field-option{ position: relative; flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .izrada-sajta-forma .ui-field-subgroup .ui-field-option input{ position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .izrada-sajta-forma .ui-field-subgroup .ui-field-option label{ display: inline-flex !important; align-items: center; margin: 0 !important; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 400px; color: #FFFFFF !important; font-family: Inter, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.2; cursor: pointer; transition: border-color .25s ease, background-color .25s ease, color .25s ease; } .izrada-sajta-forma .ui-field-subgroup .ui-field-option label:hover{ border-color: #E1FF04; } .izrada-sajta-forma .ui-field-subgroup .ui-field-option input:checked + label{ border-color: #E1FF04; background: #E1FF04; color: #111111 !important; font-weight: 500 !important; } .izrada-sajta-forma .ui-field-subgroup .ui-field-option input:focus-visible + label{ outline: 2px solid #E1FF04; outline-offset: 2px; } /* Contact form - success / error messages (page builder .ui-message) */ .izrada-sajta-forma .ui-message{ display: flex; align-items: flex-start; gap: 10px; margin: 28px 0 0 !important; padding: 10px 14px; border: 1px solid rgba(225, 255, 4, 0.35); border-radius: 12px; background: rgba(225, 255, 4, 0.07); color: #FFFFFF !important; font-family: Inter, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.5; } .izrada-sajta-forma .ui-message::before{ content: "" !important; flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0 !important; background: #E1FF04 !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; } .izrada-sajta-forma .ui-message.ui-message-danger{ border-color: rgba(255, 107, 107, 0.4); background: rgba(255, 107, 107, 0.08); } .izrada-sajta-forma .ui-message.ui-message-danger::before{ background: #FF6B6B !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); } .izrada-sajta-forma .ui-help-inline{ display: block; margin-top: 6px; color: #FF6B6B !important; font-family: Inter, sans-serif; font-size: 13px; line-height: 1.4; } @media (max-width: 767px){ .izrada-sajta-forma .ui-field-subgroup{ gap: 6px; } .izrada-sajta-forma .ui-field-subgroup .ui-field-option label{ padding: 6px 12px; font-size: 13px !important; } } @media (max-width: 767px){ .ui-element.izrada-sajta-forma{ padding: 18px !important; border-radius: 16px; } } @media (max-width: 767px){ .izrada-sajta-forma input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .izrada-sajta-forma textarea, .izrada-sajta-forma select{ border-radius: 8px !important; } } /* Contact form - fade up on scroll (JS adds .nn-reveal, then .is-visible) */ .ui-element.izrada-sajta-forma.nn-reveal:not(.is-visible){ opacity: 0; } .ui-element.izrada-sajta-forma.nn-reveal.is-visible{ animation: nn-form-in 1s cubic-bezier(0.16, 1, 0.3, 1) backwards; } @keyframes nn-form-in{ from { opacity: 0; transform: translateY(30px); } } @media (prefers-reduced-motion: reduce){ .ui-element.izrada-sajta-forma.nn-reveal:not(.is-visible){ opacity: 1; } .ui-element.izrada-sajta-forma.nn-reveal.is-visible{ animation: none; } } @keyframes pulse-ring{ 0% { transform: scale(.33); } 80%, 100% { opacity: 0; } } @keyframes pulse-dot{ 0%, 100% { transform: scale(.8); } 50% { transform: scale(1); } } /* Tablet & Mobile */ @media (max-width: 1024px){ .available_badge{ margin-left: 0 !important; } .card-content{ align-items: flex-start; } .stat-description{ text-align: left !important; } .nn-testimonials .nn-t-card, .nn-testimonials .nn-t-card--featured{ grid-column: span 3; grid-row: auto; } .nn-testimonials .nn-t-card--featured, .nn-testimonials .nn-t-card:last-child:nth-child(even){ grid-column: 1 / -1; } } /* Mobile */ @media (max-width: 767px){ .home_services .grid .service-item { padding: 30px 35px; } .home_services .grid .service-number { flex: 0 0 15%; } .home_services .grid .service-arrow{ width: 28px; height: 28px; } .home_services .grid .service-name{ font-size: 1.5rem; line-height: 1.4; } .my_work_experience .content{ padding: 20px; } /* Sections that only hold mobile-hidden widgets (e.g. the desktop screenshot on case studies): hide the empty content but keep the section's normal bottom spacing */ .ui-top-section:has(.ui-hidden-mobile):not(:has(.ui-widget:not(.ui-hidden-mobile))){ padding-top: 1px !important; margin-top: -1px !important; } .ui-top-section:has(.ui-hidden-mobile):not(:has(.ui-widget:not(.ui-hidden-mobile))) > .ui-container{ display: none !important; } /* Portfolio: text aligned with the photo edges */ .projects_grid .ui-post__text{ padding-left: 0 !important; padding-right: 0 !important; } /* Hero: tighter spacing so the first project peeks into view */ .ui-element-eee5bd3 .qodef-qi-animated-text .qodef-m-title{ font-size: 40px !important; line-height: 1.08 !important; margin-bottom: 0 !important; } .ui-element-eee5bd3 .ui-widget-text-editor p{ margin-bottom: 0 !important; } .ui-element-eee5bd3 .ui-inner-section .ui-column:not(:has(.ui-widget:not(.ui-hidden-mobile))){ display: none; } .ui-section.ui-element-eee5bd3{ padding-bottom: 20px !important; } .nn-testimonials .nn-t-head{ margin-bottom: 40px; } .nn-testimonials .nn-t-grid{ grid-template-columns: 1fr; } .nn-testimonials .nn-t-card, .nn-testimonials .nn-t-card--featured{ grid-column: auto; padding: 28px; } .nn-testimonials .nn-t-card--featured .nn-t-person{ flex-wrap: wrap; } .nn-testimonials .nn-t-link{ margin-left: 62px; } } /* Izrada Sajtova Page - Minimal Serbian footer (HTML widget in the "Footer (srpski)" template) */ .nn-foot{ display: flex; flex-direction: column; gap: clamp(28px, 3vw, 40px); width: 100%; padding: 40px 0 clamp(24px, 2.5vw, 32px); font-family: Inter, sans-serif; box-sizing: border-box; } .nn-foot .nn-foot-main{ display: flex; align-items: center; justify-content: space-between; gap: 32px; } .nn-foot .nn-foot-brand{ display: flex; flex-direction: column; gap: 10px; } .nn-foot .nn-foot-name{ color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif; font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; } .nn-foot .nn-foot-tag{ max-width: 640px; margin: 0 !important; color: rgba(255, 255, 255, 0.55) !important; font-size: 15px; line-height: 1.6; } .nn-foot .nn-foot-links{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; } .nn-foot .nn-foot-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border: 1px solid transparent; border-radius: 400px; font-family: 'Instrument Sans', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none !important; white-space: nowrap; transition: background-color .3s ease, border-color .3s ease, color .3s ease; } .nn-foot .nn-foot-btn--primary{ border-color: #E1FF04; background: #E1FF04; color: #111111 !important; } .nn-foot .nn-foot-btn--primary::after{ content: ""; width: 16px; height: 16px; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; } .nn-foot .nn-foot-btn--call{ display: none; border-color: rgba(255, 255, 255, 0.22); background: transparent; color: #FFFFFF !important; } .nn-foot .nn-foot-btn--call::before{ content: ""; width: 16px; height: 16px; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.62 10.79a15.1 15.1 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.62 10.79a15.1 15.1 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat; } .nn-foot .nn-foot-link{ color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif; font-size: 15px; font-weight: 500; line-height: 1.2; text-decoration: none !important; white-space: nowrap; transition: color .3s ease; } .nn-foot .nn-foot-bottom{ display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; line-height: 1.4; } .nn-foot .nn-foot-copy{ color: rgba(255, 255, 255, 0.45) !important; } .nn-foot .nn-foot-info{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .nn-foot .nn-foot-col{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .nn-foot .nn-foot-label{ margin-bottom: 4px; color: rgba(255, 255, 255, 0.45) !important; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; } .nn-foot .nn-foot-text{ color: #FFFFFF !important; font-size: 15px; line-height: 1.5; text-decoration: none !important; transition: color .3s ease; } .nn-foot .nn-foot-muted{ color: rgba(255, 255, 255, 0.55) !important; font-size: 14px; line-height: 1.5; } .nn-foot .nn-foot-legal{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; } .nn-foot .nn-foot-legal a:not(.nn-foot-up){ color: rgba(255, 255, 255, 0.75) !important; text-decoration: none !important; transition: color .3s ease; } .nn-foot .nn-foot-up{ display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.75) !important; text-decoration: none !important; transition: color .3s ease; } .nn-foot .nn-foot-up::after{ content: ""; width: 14px; height: 14px; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5m0 0l-7 7m7-7l7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5m0 0l-7 7m7-7l7 7'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s ease; } .nn-foot a:focus-visible{ outline: 2px solid #E1FF04; outline-offset: 3px; } @media (hover: hover){ .nn-foot .nn-foot-link:hover, .nn-foot .nn-foot-up:hover, .nn-foot a.nn-foot-text:hover, .nn-foot .nn-foot-legal a:hover{ color: #E1FF04 !important; } .nn-foot .nn-foot-btn--primary:hover{ border-color: #FFFFFF; background: #FFFFFF; } .nn-foot .nn-foot-up:hover::after{ transform: translateY(-3px); } } @media (max-width: 767px){ .nn-foot .nn-foot-info{ grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 1024px){ .nn-foot .nn-foot-main{ flex-direction: column; align-items: flex-start; gap: 24px; } .nn-foot .nn-foot-links{ width: 100%; gap: 12px 24px; } .nn-foot .nn-foot-btn{ width: 100%; } .nn-foot .nn-foot-btn--primary{ margin-top: 8px; } .nn-foot .nn-foot-btn--call{ display: inline-flex; } /* calling only on phones and tablets */ .nn-foot .nn-foot-bottom{ flex-direction: column; align-items: flex-start; } } /* Izrada Sajtova Page - "O meni" photo: soft deep shadow + faint outline (section class .o-meni) */ .o-meni .ui-widget-image img{ box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.75), 0 16px 32px -16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06); } /* Izrada Sajtova Page - Mobile call bar fixed at the bottom (Pozovi / Viber / WhatsApp), phones only */ .nn-callbar{ display: none; } @media (max-width: 767px){ .nn-callbar{ position: fixed; right: 0; bottom: 0; left: 0; z-index: 9990; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(17, 17, 17, 0.88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transform: translateY(110%); transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1); } .nn-callbar.is-visible{ transform: none; } html:has(.ui-location-header .ui-menu-toggle.ui-active) .nn-callbar{ transform: translateY(110%); pointer-events: none; } /* sakrij traku dok je meni otvoren */ .nn-callbar .nn-callbar-btn{ display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 46px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 400px; background: #222227; color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none !important; -webkit-tap-highlight-color: transparent; } .nn-callbar .nn-callbar-btn::before{ content: ""; flex-shrink: 0; width: 18px; height: 18px; background: currentColor !important; } .nn-callbar .nn-callbar-btn--call{ border-color: #E1FF04; background: #E1FF04; color: #111111 !important; } .nn-callbar .nn-callbar-btn--call::before{ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.1 15.1 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.1 15.1 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat; } .nn-callbar .nn-callbar-btn--viber::before{ background: #7360F2 !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11.4 0C9.473.028 5.333.344 3.02 2.467 1.302 4.187.696 6.7.633 9.817.57 12.933.488 18.776 6.12 20.36h.003l-.004 2.416s-.037.977.61 1.177c.777.242 1.234-.5 1.98-1.302.407-.44.972-1.084 1.397-1.58 3.85.326 6.812-.416 7.15-.525.776-.252 5.176-.816 5.892-6.657.74-6.02-.36-9.83-2.34-11.546-.596-.55-3.006-2.3-8.375-2.323 0 0-.395-.025-1.037-.017zm.058 1.693c.545-.004.88.017.88.017 4.542.02 6.717 1.388 7.222 1.846 1.675 1.435 2.53 4.868 1.906 9.897v.002c-.604 4.878-4.174 5.184-4.832 5.395-.28.09-2.882.737-6.153.524 0 0-2.436 2.94-3.197 3.704-.12.12-.26.167-.352.144-.13-.033-.166-.188-.165-.414l.02-4.018c-4.762-1.32-4.485-6.292-4.43-8.895.054-2.604.543-4.738 1.996-6.173 1.96-1.773 5.474-2.018 7.11-2.03zm.38 2.602c-.167 0-.303.135-.304.302 0 .167.133.303.3.305 1.624.01 2.946.537 4.028 1.592 1.073 1.046 1.62 2.468 1.633 4.334.002.167.14.3.307.3.166-.002.3-.138.3-.304-.014-1.984-.618-3.596-1.816-4.764-1.19-1.16-2.692-1.753-4.447-1.765zm-3.96.695c-.19-.032-.4.005-.616.117l-.01.002c-.43.247-.816.562-1.146.932-.002.004-.006.004-.008.008-.267.323-.42.638-.46.948-.008.046-.01.093-.007.14 0 .136.022.27.065.4l.013.01c.135.48.473 1.276 1.205 2.604.42.768.903 1.5 1.446 2.186.27.344.56.673.87.984l.132.132c.31.308.64.6.984.87.686.543 1.418 1.027 2.186 1.447 1.328.733 2.126 1.07 2.604 1.206l.01.014c.13.042.265.064.402.063.046.002.092 0 .138-.008.31-.036.627-.19.948-.46.004 0 .003-.002.008-.005.37-.33.683-.72.93-1.148l.003-.01c.225-.432.15-.842-.18-1.12-.004 0-.698-.58-1.037-.83-.36-.255-.73-.492-1.113-.71-.51-.285-1.032-.106-1.248.174l-.447.564c-.23.283-.657.246-.657.246-3.12-.796-3.955-3.955-3.955-3.955s-.037-.426.248-.656l.563-.448c.277-.215.456-.737.17-1.248-.217-.383-.454-.756-.71-1.115-.25-.34-.826-1.033-.83-1.035-.137-.165-.31-.265-.502-.297zm4.49.88c-.158.002-.29.124-.3.282-.01.167.115.312.282.324 1.16.085 2.017.466 2.645 1.15.63.688.93 1.524.906 2.57-.002.168.13.306.3.31.166.003.305-.13.31-.297.025-1.175-.334-2.193-1.067-2.994-.74-.81-1.777-1.253-3.05-1.346h-.024zm.463 1.63c-.16.002-.29.127-.3.287-.008.167.12.31.288.32.523.028.875.175 1.113.422.24.245.388.62.416 1.164.01.167.15.295.318.287.167-.008.295-.15.287-.317-.03-.644-.215-1.178-.58-1.557-.367-.378-.893-.574-1.52-.607h-.018z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11.4 0C9.473.028 5.333.344 3.02 2.467 1.302 4.187.696 6.7.633 9.817.57 12.933.488 18.776 6.12 20.36h.003l-.004 2.416s-.037.977.61 1.177c.777.242 1.234-.5 1.98-1.302.407-.44.972-1.084 1.397-1.58 3.85.326 6.812-.416 7.15-.525.776-.252 5.176-.816 5.892-6.657.74-6.02-.36-9.83-2.34-11.546-.596-.55-3.006-2.3-8.375-2.323 0 0-.395-.025-1.037-.017zm.058 1.693c.545-.004.88.017.88.017 4.542.02 6.717 1.388 7.222 1.846 1.675 1.435 2.53 4.868 1.906 9.897v.002c-.604 4.878-4.174 5.184-4.832 5.395-.28.09-2.882.737-6.153.524 0 0-2.436 2.94-3.197 3.704-.12.12-.26.167-.352.144-.13-.033-.166-.188-.165-.414l.02-4.018c-4.762-1.32-4.485-6.292-4.43-8.895.054-2.604.543-4.738 1.996-6.173 1.96-1.773 5.474-2.018 7.11-2.03zm.38 2.602c-.167 0-.303.135-.304.302 0 .167.133.303.3.305 1.624.01 2.946.537 4.028 1.592 1.073 1.046 1.62 2.468 1.633 4.334.002.167.14.3.307.3.166-.002.3-.138.3-.304-.014-1.984-.618-3.596-1.816-4.764-1.19-1.16-2.692-1.753-4.447-1.765zm-3.96.695c-.19-.032-.4.005-.616.117l-.01.002c-.43.247-.816.562-1.146.932-.002.004-.006.004-.008.008-.267.323-.42.638-.46.948-.008.046-.01.093-.007.14 0 .136.022.27.065.4l.013.01c.135.48.473 1.276 1.205 2.604.42.768.903 1.5 1.446 2.186.27.344.56.673.87.984l.132.132c.31.308.64.6.984.87.686.543 1.418 1.027 2.186 1.447 1.328.733 2.126 1.07 2.604 1.206l.01.014c.13.042.265.064.402.063.046.002.092 0 .138-.008.31-.036.627-.19.948-.46.004 0 .003-.002.008-.005.37-.33.683-.72.93-1.148l.003-.01c.225-.432.15-.842-.18-1.12-.004 0-.698-.58-1.037-.83-.36-.255-.73-.492-1.113-.71-.51-.285-1.032-.106-1.248.174l-.447.564c-.23.283-.657.246-.657.246-3.12-.796-3.955-3.955-3.955-3.955s-.037-.426.248-.656l.563-.448c.277-.215.456-.737.17-1.248-.217-.383-.454-.756-.71-1.115-.25-.34-.826-1.033-.83-1.035-.137-.165-.31-.265-.502-.297zm4.49.88c-.158.002-.29.124-.3.282-.01.167.115.312.282.324 1.16.085 2.017.466 2.645 1.15.63.688.93 1.524.906 2.57-.002.168.13.306.3.31.166.003.305-.13.31-.297.025-1.175-.334-2.193-1.067-2.994-.74-.81-1.777-1.253-3.05-1.346h-.024zm.463 1.63c-.16.002-.29.127-.3.287-.008.167.12.31.288.32.523.028.875.175 1.113.422.24.245.388.62.416 1.164.01.167.15.295.318.287.167-.008.295-.15.287-.317-.03-.644-.215-1.178-.58-1.557-.367-.378-.893-.574-1.52-.607h-.018z'/%3E%3C/svg%3E") center / contain no-repeat; } .nn-callbar .nn-callbar-btn--whatsapp::before{ background: #25D366 !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat; } .nn-callbar .nn-callbar-btn:active{ transform: scale(.97); } body:has(.nn-callbar){ padding-bottom: calc(66px + env(safe-area-inset-bottom)); } /* the bar never covers the end of the page */ } @media (max-width: 360px){ .nn-callbar{ gap: 6px; padding-right: 8px; padding-left: 8px; } .nn-callbar .nn-callbar-btn{ gap: 5px; font-size: 13px; } } @media (prefers-reduced-motion: reduce){ .nn-callbar{ transition: none; } } /* Site background - soft lime / blue glows + fine film grain over the whole page (grain never blocks clicks) */ body{ background-image: radial-gradient(60% 50% at 85% 0%, rgba(225, 255, 4, 0.07), transparent 70%), radial-gradient(50% 45% at 0% 35%, rgba(90, 110, 255, 0.07), transparent 70%); background-attachment: fixed; } body::before{ content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 220px; opacity: .06; } /* "Iz Srbije ste?" slide-in card for visitors from Serbia (created by the Custom Code script) */ .nn-srpop{ position: fixed; right: 24px; bottom: 24px; z-index: 9998; width: min(380px, calc(100vw - 32px)); padding: 24px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; background: rgba(23, 23, 26, 0.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); box-sizing: border-box; font-family: Inter, sans-serif; opacity: 0; transform: translateY(24px); transition: opacity .4s ease, transform .5s cubic-bezier(0.16, 1, 0.3, 1); } .nn-srpop.is-in{ opacity: 1; transform: none; } .nn-srpop .nn-srpop-close{ position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: rgba(255, 255, 255, 0.55) !important; cursor: pointer; transition: color .3s ease, background-color .3s ease; } .nn-srpop .nn-srpop-close::before{ content: ""; position: absolute; inset: 8px; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat; } .nn-srpop .nn-srpop-tag{ display: inline-flex; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 400px; color: rgba(255, 255, 255, 0.7) !important; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; } .nn-srpop .nn-srpop-title{ margin: 14px 0 8px !important; color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; } .nn-srpop .nn-srpop-text{ margin: 0 !important; color: rgba(255, 255, 255, 0.6) !important; font-size: 14.5px; line-height: 1.6; } .nn-srpop .nn-srpop-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 20px; } .nn-srpop .nn-srpop-cta{ display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 400px; background: #E1FF04; color: #111111 !important; font-family: 'Instrument Sans', sans-serif; font-size: 14.5px; font-weight: 600; line-height: 1.2; text-decoration: none !important; transition: background-color .3s ease; } .nn-srpop .nn-srpop-cta::after{ content: ""; width: 15px; height: 15px; background: currentColor !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; } .nn-srpop .nn-srpop-no{ margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; color: rgba(255, 255, 255, 0.55) !important; font-family: Inter, sans-serif; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: color .3s ease; } .nn-srpop button:focus-visible, .nn-srpop a:focus-visible{ outline: 2px solid #E1FF04; outline-offset: 3px; } @media (hover: hover){ .nn-srpop .nn-srpop-close:hover{ background: rgba(255, 255, 255, 0.08) !important; color: #FFFFFF !important; } .nn-srpop .nn-srpop-cta:hover{ background: #FFFFFF; } .nn-srpop .nn-srpop-no:hover{ color: #FFFFFF !important; } } @media (max-width: 767px){ .nn-srpop{ right: 35px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 35px; width: auto; padding: 20px; border-radius: 18px; } /* same side gutter as the page content on phones */ .nn-srpop .nn-srpop-title{ font-size: 22px; } .nn-srpop .nn-srpop-cta{ flex: 1 1 100%; justify-content: center; } .nn-srpop .nn-srpop-no{ flex: 1 1 100%; padding: 6px 0 !important; text-align: center; } } @media (prefers-reduced-motion: reduce){ .nn-srpop{ transition: opacity .2s ease; transform: none; } } /* ---------- Scroll hint (mobile + tablet, Izrada sajtova) ---------- */ .nn-scrollhint{ display: none; } @media (max-width: 1024px){ .nn-scrollhint{ position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; z-index: 9980; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 16px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 400px; background: rgba(23, 23, 26, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #FFFFFF; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 12px); transition: opacity .5s ease, transform .5s cubic-bezier(0.16, 1, 0.3, 1); } .nn-scrollhint.is-visible{ opacity: 1; transform: translate(-50%, 0); } .nn-scrollhint .nn-scrollhint-arrow{ width: 16px; height: 16px; background: #E1FF04 !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; animation: nn-scrollhint-bob 1.6s ease-in-out infinite; } } @keyframes nn-scrollhint-bob{ 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } } @media (prefers-reduced-motion: reduce){ .nn-scrollhint .nn-scrollhint-arrow{ animation: none; } } /* ---------- Phone line under the contact form (Izrada sajtova) ---------- */ .nn-form-phone{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 20px 0 0; color: rgba(255, 255, 255, 0.6); font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.4; text-align: center; } .nn-form-phone a{ color: #FFFFFF !important; font-weight: 600; text-decoration: none !important; transition: color .2s ease; } .nn-form-phone .nn-form-phone-num{ display: inline-flex; align-items: center; gap: 6px; } .nn-form-phone .nn-form-phone-num::before{ content: ""; width: 16px; height: 16px; background: #E1FF04 !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; } .nn-form-phone .nn-form-phone-sep{ color: rgba(255, 255, 255, 0.3); } @media (hover: hover){ .nn-form-phone a:hover{ color: #E1FF04 !important; } } .nn-form-phone.nn-reveal:not(.is-visible){ opacity: 0; } .nn-form-phone.nn-reveal.is-visible{ animation: nn-form-phone-in .9s cubic-bezier(0.16, 1, 0.3, 1) backwards; } @keyframes nn-form-phone-in{ from { opacity: 0; transform: translateY(16px); } } @media (max-width: 767px){ .nn-form-phone{ font-size: 14px; } .nn-form-phone .nn-form-phone-label{ flex-basis: 100%; } } @media (prefers-reduced-motion: reduce){ .nn-form-phone.nn-reveal.is-visible{ animation: none; } } /* Hero - prikaz projekata (prozor pregledača + telefon, projekti se smenjuju) */ .nn-show{ position: relative; width: 100%; } .nn-show-stage{ position: relative; aspect-ratio: 16 / 12; } .nn-show-browser{ position: absolute; top: 0; left: 0; width: 88%; height: 84%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: #1B1B1E; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7); } .nn-show-bar{ display: flex; flex: none; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .nn-show-bar i{ width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); } .nn-show-screen, .nn-show-phone-screen{ position: relative; flex: 1; overflow: hidden; background: #1B1B1E; } .nn-show-page{ position: absolute; top: 0; left: 0; display: block; width: 100% !important; height: auto !important; max-width: none !important; border-radius: 0 !important; opacity: 0; transition: opacity .6s ease; } .nn-show-page.is-active.is-loaded{ opacity: 1; } /* slika se pojavi tek kad se učita */ .nn-show-phone{ position: absolute; right: 0; bottom: 0; width: 25%; aspect-ratio: 9 / 19.5; padding: 6px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 28px; background: #0B0B0C; box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.8); } .nn-show-phone-screen{ height: 100%; border-radius: 22px; } .nn-show-meta{ display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; } .nn-show-label{ display: flex; flex-direction: column; gap: 4px; min-width: 0; color: #FFFFFF !important; text-decoration: none !important; } .nn-show-cat{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgba(255, 255, 255, 0.5); font-family: Inter, sans-serif; font-size: 11.5px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; } .nn-show-name{ font-family: 'Instrument Sans', sans-serif; font-size: 18px; font-weight: 500; line-height: 1.2; transition: color .3s ease; } @media (hover: hover){ .nn-show-label:hover .nn-show-name{ color: #E1FF04; } } .nn-show-dots{ display: flex; flex: none; gap: 6px; margin-left: auto; } /* poravnato sa desnom ivicom telefona */ .nn-show-stage{ touch-action: pan-y; } /* vertikalno skrolovanje strane radi normalno, horizontalni potez menja projekat */ .nn-show .nn-show-dot{ position: relative; width: 36px; height: 20px; margin: 0; padding: 0 !important; border: 0 !important; background: transparent !important; cursor: pointer; } .nn-show .nn-show-dot::before{ content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); } .nn-show .nn-show-dot span{ position: absolute; top: 9px; left: 0; width: 0; height: 3px; border-radius: 3px; background: #E1FF04; } .nn-show .nn-show-dot.is-active span{ width: 100%; } .nn-show .nn-show-dot::before{ transition: background-color .25s ease; } @media (hover: hover){ .nn-show .nn-show-dot:hover::before{ background: #FFFFFF; } } /* racunar: linija pobeli kad se predje misem */ .nn-show .nn-show-dot:focus-visible{ outline: 2px solid #E1FF04; outline-offset: 2px; border-radius: 4px; } @media (max-width: 767px){ .nn-show-stage{ aspect-ratio: 16 / 13; } .nn-show-browser{ width: 90%; height: 82%; border-radius: 10px; } .nn-show-bar{ height: 26px; padding: 0 10px; gap: 5px; } .nn-show-bar i{ width: 7px; height: 7px; } .nn-show-phone{ width: 27%; padding: 4px; border-radius: 18px; } .nn-show-phone-screen{ border-radius: 14px; } .nn-show-meta{ margin-top: 16px; } .nn-show-name{ font-size: 16px; } .nn-show .nn-show-dot{ width: 24px; } } @media (prefers-reduced-motion: reduce){ .nn-show-page{ transition: none; } } /* Izrada sajtova - hero: natpis levo, dugmad jedno pored drugog na računaru */ .ui-element.ui-element-509be84{ align-self: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; } @media (min-width: 768px){ .ui-element.ui-element-89fd52e, .ui-element.ui-element-f86dad8{ width: auto !important; max-width: none; } .ui-element.ui-element-89fd52e{ margin-right: 12px !important; } } /* Izrada sajtova - forma u 2 koraka (page builder polje "Step", tip indikatora: Number and Text) */ .izrada-sajta-forma .e-form__indicators{ display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 32px; padding: 0 0 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .izrada-sajta-forma .e-form__indicators__indicator{ display: flex; flex-direction: row; align-items: center; gap: 10px; flex: none; margin: 0; padding: 0; color: rgba(255, 255, 255, 0.45); font-family: 'Instrument Sans', sans-serif; font-size: 15px; font-weight: 500; } .izrada-sajta-forma .e-form__indicators__indicator__number{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 50%; background: transparent !important; color: rgba(255, 255, 255, 0.6) !important; font-size: 14px; font-weight: 600; line-height: 1; } .izrada-sajta-forma .e-form__indicators__indicator__label{ margin: 0 !important; padding: 0 !important; color: inherit !important; font-size: 15px !important; line-height: 1.2 !important; } /* label inace dobija margin-bottom od polja forme */ .izrada-sajta-forma .e-form__indicators__indicator--state-active{ color: #FFFFFF; } .izrada-sajta-forma .e-form__indicators__indicator--state-active .e-form__indicators__indicator__number{ border-color: #E1FF04 !important; background: #E1FF04 !important; color: #111111 !important; } .izrada-sajta-forma .e-form__indicators__indicator--state-completed .e-form__indicators__indicator__number{ border-color: #E1FF04 !important; color: #E1FF04 !important; } .izrada-sajta-forma .e-form__indicators__indicator__separator{ flex: 1; height: 1px; margin: 0; background: rgba(255, 255, 255, 0.12); } .izrada-sajta-forma .e-form__step{ row-gap: 26px; } /* isti razmak izmedju polja kao bez koraka */ .izrada-sajta-forma .e-form__buttons{ flex-wrap: wrap; row-gap: 12px; } /* razmak kad su dugmad jedno ispod drugog */ .izrada-sajta-forma .e-form__step .e-form__buttons__wrapper, .izrada-sajta-forma .e-form__step .ui-field-type-submit{ flex: 1 1 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 5px !important; } /* dugmad poravnata sa poljima, Nazad i Posaljite u istom redu */ .izrada-sajta-forma .e-form__buttons__wrapper__button{ width: 100%; min-height: 58px; padding: 16px 28px !important; border-radius: 400px !important; font-family: 'Instrument Sans', sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease; } .izrada-sajta-forma .e-form__buttons__wrapper__button-next{ border: 1px solid #E1FF04 !important; background: #E1FF04 !important; color: #111111 !important; } .izrada-sajta-forma .e-form__step .ui-field-type-submit{ flex: 1 1 100% !important; order: 10; } /* Posaljite upit preko cele sirine */ .izrada-sajta-forma .e-form__step .e-form__buttons__wrapper:has(.e-form__buttons__wrapper__button-previous){ flex: 1 1 100% !important; order: 11; justify-content: center; } /* Nazad ispod, kao link */ .izrada-sajta-forma .e-form__buttons__wrapper__button.e-form__buttons__wrapper__button-previous{ flex: 0 0 auto !important; width: auto !important; min-height: 0 !important; padding: 6px 10px !important; border: 0 !important; border-radius: 4px !important; background: transparent !important; color: rgba(255, 255, 255, 0.6) !important; font-family: Inter, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none; text-decoration-color: rgba(255, 255, 255, 0.25); text-underline-offset: 4px; } @media (hover: hover){ .izrada-sajta-forma .e-form__buttons__wrapper__button-next:hover{ border-color: #FFFFFF !important; background: #FFFFFF !important; } .izrada-sajta-forma .e-form__buttons__wrapper__button.e-form__buttons__wrapper__button-previous:hover{ color: #FFFFFF !important; text-decoration-color: #FFFFFF; } } @media (max-width: 767px){ .izrada-sajta-forma .e-form__indicators{ margin-bottom: 24px; padding-bottom: 20px; } .izrada-sajta-forma .e-form__indicators__indicator{ font-size: 14px; } } /* Case Study page - whole content in one HTML widget (.nn-csp): hero + 3x2 facts, scrolling homepage, numbered sections, framed images with captions, stats, client quote */ .nn-csp{ --nn-accent: #E1FF04; --nn-line: rgba(255, 255, 255, 0.1); --nn-muted: rgba(255, 255, 255, 0.6); --nn-card: rgb(23, 23, 26); display: flex; flex-direction: column; gap: clamp(72px, 8vw, 128px); width: 100%; color: #FFFFFF; font-family: Inter, sans-serif; } .nn-csp img{ display: block; width: 100%; height: auto; max-width: none; margin: 0; } /* Hero */ .nn-csp .nn-csp-hero{ display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .nn-csp .nn-csp-tag{ display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #303030; border-radius: 400px; background: var(--nn-card); color: #FFFFFF !important; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; } .nn-csp .nn-csp-tag::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--nn-accent) !important; } .nn-csp .nn-csp-title{ margin: 0 !important; color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif !important; font-size: clamp(40px, 4.6vw, 64px) !important; font-weight: 500 !important; line-height: 1.02 !important; letter-spacing: -.04em !important; text-wrap: balance; } .nn-csp .nn-csp-lead{ max-width: 860px; margin: 0 !important; color: var(--nn-muted) !important; font-size: clamp(16px, 1.2vw, 17px); line-height: 1.6; text-wrap: pretty; } .nn-csp .nn-csp-meta{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; width: 100%; margin: 6px 0 0 !important; } .nn-csp .nn-csp-meta > div{ padding: 14px 0; border-top: 1px solid var(--nn-line); } .nn-csp .nn-csp-meta dt{ margin: 0; color: rgba(255, 255, 255, 0.5) !important; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; } .nn-csp .nn-csp-meta dd{ margin: 6px 0 0 !important; color: #FFFFFF !important; font-size: 15px; line-height: 1.45; } /* Scrolling homepage (uses the global .portfolio-window styles and script) */ .nn-csp .portfolio-window.nn-csp-window{ height: clamp(440px, 52vw, 680px); padding: clamp(14px, 2.4vw, 30px); border-radius: 16px; margin-top: calc(clamp(28px, 3vw, 44px) - clamp(72px, 8vw, 128px)); } .nn-csp .portfolio-window.nn-csp-window img{ width: 100%; border-radius: 0; } /* Numbered sections: title left (sticks while the text scrolls), text right */ .nn-csp .nn-csp-sec{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px clamp(32px, 5vw, 80px); } .nn-csp .nn-csp-sec-head{ position: sticky; top: 140px; display: flex; flex-direction: column; gap: 12px; align-self: start; } .nn-csp .nn-csp-num{ color: var(--nn-accent) !important; font-size: 13px; font-weight: 700; letter-spacing: .04em; } .nn-csp .nn-csp-h{ margin: 0 !important; color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif !important; font-size: clamp(28px, 3vw, 40px) !important; font-weight: 500 !important; line-height: 1.1 !important; letter-spacing: -.03em !important; text-transform: none !important; } .nn-csp .nn-csp-sec-body{ display: flex; flex-direction: column; gap: 20px; max-width: 680px; } .nn-csp .nn-csp-sec-body p{ margin: 0 !important; color: var(--nn-muted) !important; font-size: 17px; line-height: 1.7; text-wrap: pretty; } .nn-csp .nn-csp-sec-body p.nn-csp-intro{ color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif; font-size: clamp(20px, 1.8vw, 24px); font-weight: 500; line-height: 1.45; letter-spacing: -.01em; } /* Images in a dark frame with a caption */ .nn-csp .nn-csp-gallery{ display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); } .nn-csp .nn-csp-fig{ display: flex; flex-direction: column; gap: 16px; margin: 0; } .nn-csp .nn-csp-frame{ padding: clamp(12px, 3vw, 40px); border: 1px solid var(--nn-line); border-radius: 20px; background: var(--nn-card); } .nn-csp .nn-csp-frame > img{ border-radius: 8px; } .nn-csp figcaption{ font-style: normal !important; } .nn-csp .nn-csp-fig figcaption{ max-width: 760px; color: var(--nn-muted) !important; font-size: 15px; line-height: 1.6; text-wrap: pretty; } .nn-csp .nn-csp-fig figcaption b{ color: #FFFFFF; font-weight: 600; } .nn-csp .nn-csp-trio{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 32px); } .nn-csp .nn-csp-trio img{ border-radius: 12px; } /* Results: text, then stats + client quote at full width (outside the grid, so the sticky title stops above them) */ .nn-csp .nn-csp-results{ display: flex; flex-direction: column; gap: 16px; } .nn-csp .nn-csp-stats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0 !important; padding: 0 !important; list-style: none; } .nn-csp .nn-csp-stats li{ display: flex; flex-direction: column; gap: 14px; margin: 0; padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--nn-line); border-radius: 20px; background: var(--nn-card); } .nn-csp .nn-csp-stats b{ color: var(--nn-accent); font-family: 'Instrument Sans', sans-serif; font-size: clamp(36px, 3.6vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -.03em; } .nn-csp .nn-csp-stats span{ color: var(--nn-muted); font-size: 15px; line-height: 1.55; } .nn-csp .nn-csp-quote{ display: flex; flex-direction: column; gap: 32px; margin: 0; padding: clamp(28px, 4vw, 56px); border: 1px solid var(--nn-line); border-radius: 20px; background: var(--nn-card); } .nn-csp .nn-csp-quote blockquote{ max-width: 900px; margin: 0; padding: 0; border: 0; background: none; quotes: none; color: #FFFFFF; font-family: 'Instrument Sans', sans-serif; font-size: clamp(22px, 2.4vw, 32px); font-style: normal; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; text-wrap: pretty; } .nn-csp .nn-csp-quote blockquote::before{ content: "\201C"; display: block; height: 44px; color: var(--nn-accent); font-size: 88px; line-height: .8; } .nn-csp .nn-csp-person{ display: flex; align-items: center; gap: 14px; } .nn-csp .nn-csp-person > span{ display: flex; flex-direction: column; gap: 2px; } .nn-csp img.nn-csp-avatar{ flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #2a2a2a; } .nn-csp .nn-csp-name{ color: #FFFFFF; font-family: 'Instrument Sans', sans-serif; font-size: 16px; font-weight: 600; } .nn-csp .nn-csp-role{ color: var(--nn-muted); font-size: 13px; } /* Case Study page - tablet & phone */ @media (max-width: 1024px){ .nn-csp .nn-csp-meta{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .nn-csp .nn-csp-sec{ grid-template-columns: 1fr; gap: 24px; } .nn-csp .nn-csp-sec-head{ position: static; } } @media (max-width: 767px){ .nn-csp .nn-csp-hero{ gap: 16px; } .nn-csp .nn-csp-meta{ gap: 0 20px; margin-top: 8px !important; } .nn-csp .nn-csp-meta > div{ padding: 14px 0; } .nn-csp .nn-csp-meta dd{ font-size: 15px; } .nn-csp .portfolio-window.nn-csp-window{ height: 480px; border-radius: 12px; } .nn-csp .nn-csp-sec-body p{ font-size: 16px; } .nn-csp .nn-csp-frame{ border-radius: 14px; } .nn-csp .nn-csp-frame > img{ border-radius: 6px; } .nn-csp .nn-csp-fig figcaption{ font-size: 14.5px; } /* phone screens: swipe sideways instead of three tiny columns */ .nn-csp .nn-csp-trio{ grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .nn-csp .nn-csp-trio::-webkit-scrollbar{ display: none; } .nn-csp .nn-csp-trio img{ scroll-snap-align: start; border-radius: 10px; } .nn-csp .nn-csp-stats{ grid-template-columns: 1fr; gap: 12px; } .nn-csp .nn-csp-stats li{ border-radius: 16px; } .nn-csp .nn-csp-quote{ border-radius: 16px; } } @media (max-width: 480px){ .nn-csp .nn-csp-meta{ grid-template-columns: 1fr; } } /* Case Study page – phones: description, then the scrolling browser, then the facts (no top border on the first row) */ @media (max-width: 767px){ .nn-csp{ row-gap: 0; } .nn-csp > *{ order: 10; margin-top: 72px; } .nn-csp > .nn-csp-hero{ display: contents; } .nn-csp .nn-csp-tag{ order: 1; align-self: flex-start; margin-top: 0; } .nn-csp .nn-csp-title{ order: 2; margin-top: 16px !important; } .nn-csp .nn-csp-lead{ order: 3; margin-top: 16px !important; } .nn-csp .portfolio-window.nn-csp-window{ order: 4; margin-top: 40px; } .nn-csp .nn-csp-meta{ order: 5; margin-top: 24px !important; } .nn-csp .nn-csp-meta > div:nth-child(-n+2){ border-top: 0; } } @media (max-width: 480px){ .nn-csp .nn-csp-meta > div:nth-child(2){ border-top: 1px solid var(--nn-line); } } /* Case Study page – less space between "02 Design Approach" and the screenshots below it */ .nn-csp > .nn-csp-gallery{ margin-top: calc(clamp(44px, 4.5vw, 64px) - clamp(72px, 8vw, 128px)); } @media (max-width: 767px){ .nn-csp > .nn-csp-gallery{ margin-top: 44px; } } /* Case Study page – space under the browser = space above it (tablet and desktop; on phones the facts sit under the browser) */ @media (min-width: 768px){ .nn-csp > .nn-csp-window + .nn-csp-sec{ margin-top: calc(clamp(44px, 4.6vw, 72px) - clamp(72px, 8vw, 128px)); } } /* "Available for new projects" badge: lime dot (same accent as the rest of the site) */ .available_badge .ui-icon{ fill: #E1FF04 !important; color: #E1FF04 !important; border-color: #E1FF04 !important; } /* Body paragraphs (page builder "Text Editor" widgets in the page content) – same style as the case study pages */ main .ui-widget-text-editor, main .ui-widget-text-editor p{ color: rgba(255, 255, 255, 0.6) !important; font-family: Inter, sans-serif !important; font-size: 17px !important; font-weight: 400; line-height: 1.6 !important; text-wrap: pretty; } @media (max-width: 767px){ main .ui-widget-text-editor, main .ui-widget-text-editor p{ font-size: 16px !important; } } /* Buttons in the page content and footer: a bit larger on tablet/desktop (header button stays compact) */ @media (min-width: 768px){ main .ui-widget-button .ui-button, footer .ui-widget-button .ui-button{ font-size: 18px !important; padding: 22px 34px !important; } main .ui-widget-button .ui-button .ui-button-text, footer .ui-widget-button .ui-button .ui-button-text{ font-size: inherit !important; } } /* Form buttons match the other buttons on tablet/desktop ("Nazad" in the Serbian form stays a small text link) */ @media (min-width: 768px){ main .ui-form .ui-button:not(.e-form__buttons__wrapper__button-previous){ min-height: 62px !important; padding-top: 22px !important; padding-bottom: 22px !important; font-size: 18px !important; } main .ui-form .ui-button:not(.e-form__buttons__wrapper__button-previous) .ui-button-text{ font-size: inherit !important; } } /* Page badge above a centred page title (e.g. "Start Your Project") – same look as "Selected Work" on /case-studies/ */ .ui .ui-element.available_badge.nn-page-badge{ width: auto; max-width: auto; margin: 0 auto 20px !important; } .available_badge.nn-page-badge .ui-icon-box-wrapper{ align-items: center; text-align: start; gap: 10px; } .available_badge.nn-page-badge .ui-icon{ font-size: 9px; } .available_badge.nn-page-badge .ui-icon-box-description{ margin: 0; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; line-height: 1.4rem; color: #FFFFFF; } @media (max-width: 767px){ .ui .ui-element.available_badge.nn-page-badge{ margin-bottom: 15px !important; } } /* ===== Typography pass: nothing on the site is smaller than it needs to be ===== */ /* Badges ("Selected Work", "Available for new projects", "Case Study" …) */ .available_badge{ padding: 9px 16px !important; } .available_badge .ui-icon{ font-size: 10px !important; } .available_badge .ui-icon-box-description{ font-size: 14px !important; letter-spacing: .06em; } .nn-csp .nn-csp-tag{ padding: 9px 16px; font-size: 14px; letter-spacing: .06em; } .nn-csp .nn-csp-tag::before{ width: 7px; height: 7px; } /* Small uppercase labels */ .nn-csp .nn-csp-meta dt{ font-size: 13px; } .nn-csp .nn-csp-meta dd{ font-size: 16px; } .nn-logos-title{ font-size: 13px !important; } .nn-plan-badge{ font-size: 12px !important; } .nn-show-cat{ font-size: 12.5px !important; } .nn-proj-cat, .nn-foot-label{ font-size: 13px !important; } .my_work_experience .company{ font-size: 13px; } /* Header menu links (the "Start Your Project" button keeps its own size) */ .ui-location-header .ui-nav-menu--main li:not(.button_copy) > .ui-item{ font-size: 15px !important; } /* Small body text */ .nn-csp .nn-csp-role, .nn-t-role, .nn-t-link{ font-size: 14px !important; } .my_work_experience .timespan { font-size: 14px !important; } .izrada-sajta-forma .ui-field-label, .izrada-sajta-forma .ui-field-subgroup .ui-field-option label{ font-size: 15px !important; } @media (max-width: 767px){ .izrada-sajta-forma .ui-field-subgroup .ui-field-option label{ font-size: 14px !important; } } .nn-pricing-vat{ font-size: 14px !important; } .nn-extra-desc{ font-size: 15px !important; } .nn-foot-copy, .nn-foot-year, .nn-foot-legal, .nn-foot-up{ font-size: 14px !important; } @media (max-width: 767px){ .available_badge .ui-icon-box-description, .nn-csp .nn-csp-tag{ font-size: 13px !important; } .nn-csp .nn-csp-meta dd{ font-size: 15px; } .nn-logos-title{ font-size: 12px !important; } } .available_badge .ui-icon-box-description{ text-wrap: balance; } /* More space between a badge and the title under it */ .nn-csp .nn-csp-tag{ margin-bottom: 14px !important; } .ui .ui-element.available_badge.left, .ui .ui-element.available_badge.text-margin-bottom-fix, .ui .ui-element.available_badge.nn-page-badge, .ui-location-footer .ui-element.available_badge{ margin-bottom: 24px !important; } @media (max-width: 767px){ .nn-csp .nn-csp-tag{ margin-bottom: 0 !important; } .nn-csp .nn-csp-title{ margin-top: 24px !important; } .ui .ui-element.available_badge.left, .ui .ui-element.available_badge.text-margin-bottom-fix, .ui .ui-element.available_badge.nn-page-badge, .ui-location-footer .ui-element.available_badge{ margin-bottom: 18px !important; } } /* Case study facts (Role, Project Type …): more space from the intro and between the items */ .nn-csp .nn-csp-meta{ margin-top: 28px !important; column-gap: clamp(32px, 4vw, 56px) !important; } .nn-csp .nn-csp-meta > div{ padding: 20px 0 22px !important; } .nn-csp .nn-csp-meta dd{ margin-top: 10px !important; } @media (max-width: 767px){ .nn-csp .nn-csp-meta{ margin-top: 24px !important; column-gap: 28px !important; } .nn-csp .nn-csp-meta > div{ padding: 16px 0 18px !important; } .nn-csp .nn-csp-meta > div:nth-child(-n+2){ padding-top: 0 !important; } } @media (max-width: 480px){ .nn-csp .nn-csp-meta > div:nth-child(2){ padding-top: 16px !important; } } /* Arrows sit closer to their text: ~7px visible space everywhere (the arrow icons have built-in side padding) */ .nn-t-link, .nn-proj-link, .nn-plan-cta, .nn-extra-link, .nn-foot-btn { gap: 4px !important; } .nn-cs .nn-cs-secondary, .nn-cs .nn-cs-visit, .nn-csp .nn-csp-visit{ gap: 3px !important; } .ui-button .ui-button-content-wrapper:has(.service-arrow){ gap: 3px !important; } .button_copy .ui-button-icon{ margin-left: 0 !important; } .button_copy .ui-button-icon svg.service-arrow{ margin-left: -4px; } .ui-location-header .ui-nav-menu--dropdown .button_copy > a{ gap: 3px !important; } /* Serbian page: the hero title is the page H1 (was an H2) – keep its original weight */ .ui-element-90284ec h1.qodef-m-title{ font-weight: 600 !important; } /* Cookie consent banner (consent.js) – bottom left, same card style as the "Iz Srbije ste?" popup */ .nn-consent{ position: fixed; left: 24px; bottom: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 16px; width: min(420px, calc(100vw - 32px)); padding: 22px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; background: rgba(23, 23, 26, 0.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); color: #FFFFFF; font-family: Inter, sans-serif; opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .35s ease; } .nn-consent.is-in{ opacity: 1; transform: none; } .nn-consent .nn-consent-text{ margin: 0 !important; color: rgba(255, 255, 255, 0.75) !important; font-size: 14px; line-height: 1.6; } .nn-consent .nn-consent-text a{ color: #FFFFFF !important; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; } .nn-consent .nn-consent-text a:hover{ text-decoration-color: #E1FF04; } .nn-consent .nn-consent-actions{ display: flex; gap: 10px; } .nn-consent .nn-consent-btn{ flex: 1; min-height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 400px; background: transparent; color: #FFFFFF; font-family: 'Instrument Sans', sans-serif; font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease; } .nn-consent .nn-consent-btn--accept{ border-color: #E1FF04; background: #E1FF04; color: #111111; } .nn-consent .nn-consent-btn--reject:hover{ border-color: #FFFFFF; } .nn-consent .nn-consent-btn--accept:hover{ background: #ECFF5C; border-color: #ECFF5C; } .nn-consent .nn-consent-btn:focus-visible, .nn-consent a:focus-visible{ outline: 2px solid #E1FF04; outline-offset: 3px; } html.nn-consent-open .nn-callbar, html.nn-consent-open .nn-scrollhint{ display: none !important; } @media (max-width: 767px){ .nn-consent{ right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px; width: auto; padding: 18px; border-radius: 18px; } } @media (prefers-reduced-motion: reduce){ .nn-consent{ transition: opacity .2s ease; transform: none; } } /* Footer: Privacy Policy + Cookie settings */ .nn-legal-links{ display: inline-flex; flex-wrap: wrap; gap: 4px 18px; } .nn-legal-links a, .nn-legal-links button{ padding: 0; border: 0; background: none; color: inherit !important; font: inherit; text-decoration: none !important; cursor: pointer; opacity: .75; transition: opacity .3s ease, color .3s ease; } .nn-legal-links a:hover, .nn-legal-links button:hover{ color: #E1FF04 !important; opacity: 1; } .nn-foot .nn-foot-legal button{ padding: 0; border: 0; background: none; color: rgba(255, 255, 255, 0.75) !important; font: inherit; font-size: 14px !important; cursor: pointer; transition: color .3s ease; } .nn-foot .nn-foot-legal button:hover{ color: #E1FF04 !important; } /* Small privacy note under the contact forms */ .nn-form-privacy{ margin: 14px 0 0 !important; color: rgba(255, 255, 255, 0.5) !important; font-size: 13px !important; line-height: 1.5 !important; } .nn-form-privacy a{ color: rgba(255, 255, 255, 0.8) !important; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; } .nn-form-privacy a:hover{ color: #E1FF04 !important; } /* Lighter body text: paragraphs 75% white (was 60%), small secondary text 62–68% (was 50–55%) */ main .ui-widget-text-editor, main .ui-widget-text-editor p{ color: rgba(255, 255, 255, 0.75) !important; } .nn-csp, .nn-csp-more{ --nn-muted: rgba(255, 255, 255, 0.75); } html body .nn-faq-a p, html body .nn-faq-a, html body .nn-step-desc, html body .nn-proj-desc, html body .nn-plan-why { color: rgba(255, 255, 255, 0.75) !important; } html body .nn-extra-desc, html body .nn-plan-sub{ color: rgba(255, 255, 255, 0.68) !important; } html body .nn-pricing-vat, html body .nn-form-privacy{ color: rgba(255, 255, 255, 0.62) !important; } html body .nn-pricing .nn-pricing-vat{ color: rgba(255, 255, 255, 0.62) !important; } /* New buttons must not pick up the theme's generic button:hover / :focus colours */ .nn-consent .nn-consent-btn--reject:hover, .nn-consent .nn-consent-btn--reject:focus{ border-color: #FFFFFF !important; background: rgba(255, 255, 255, 0.08) !important; color: #FFFFFF !important; } .nn-consent .nn-consent-btn--accept:hover, .nn-consent .nn-consent-btn--accept:focus{ border-color: #ECFF5C !important; background: #ECFF5C !important; color: #111111 !important; } .nn-legal-links button:hover, .nn-legal-links button:focus, .nn-foot .nn-foot-legal button:hover, .nn-foot .nn-foot-legal button:focus{ background: none !important; } .nn-legal .nn-legal-btn:hover, .nn-legal .nn-legal-btn:focus{ border-color: #ECFF5C !important; background: #ECFF5C !important; color: #111111 !important; } .nn-consent .nn-consent-btn:focus-visible, .nn-legal-links button:focus-visible, .nn-foot-legal button:focus-visible, .nn-legal .nn-legal-btn:focus-visible{ box-shadow: none !important; outline: 2px solid #E1FF04 !important; outline-offset: 3px !important; } /* Client logos on the English homepage: under the hero buttons, above the work grid, no title */ .nn-home-logos{ width: 100%; margin-top: 70px; margin-bottom: -48px; } .nn-home-logos .nn-logos{ padding: 0; } @media (max-width: 1024px){ .nn-home-logos{ margin-top: 56px; margin-bottom: -32px; } } @media (max-width: 767px){ .nn-home-logos{ margin-top: 40px; margin-bottom: -21px; } } /* Profile links: Toptal (featured), LinkedIn, Dribbble */ .nn-profiles{ display: flex; flex-direction: column; gap: 14px; font-family: Inter, sans-serif; } .nn-profiles--center{ align-items: center; text-align: center; } .nn-profiles .nn-profiles-label{ color: rgba(255, 255, 255, 0.62); font-size: 13px; font-weight: 600; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; } .nn-profiles .nn-profiles-list{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .nn-profiles--center .nn-profiles-list{ justify-content: center; } .nn-profiles .nn-profiles-list li{ margin: 0; padding: 0; } .nn-profiles .nn-profile{ display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid #303030; border-radius: 400px; background: rgb(23, 23, 26); color: #FFFFFF !important; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none !important; transition: border-color .3s ease; } .nn-profiles .nn-profile::after{ content: ""; flex-shrink: 0; width: 14px; height: 14px; margin-left: -2px; background: currentColor; opacity: .6; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; } .nn-profiles .nn-profile--featured::before{ content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #E1FF04; } .nn-profiles .nn-profile-note{ color: rgba(255, 255, 255, 0.62); font-weight: 500; } .nn-profiles .nn-profile:hover{ border-color: #E1FF04; } .nn-profiles .nn-profile:focus-visible{ outline: 2px solid #E1FF04; outline-offset: 3px; box-shadow: none; } .nn-about-profiles{ width: 100%; margin-top: 4px; } .nn-footer-profiles{ width: 100%; margin: 36px 0 8px; } .ui-location-footer .nn-legal-links{ margin-left: 14px; } @media (max-width: 1024px){ .nn-footer-profiles{ padding: 0 calc(5% + 10px); } .nn-footer-profiles .nn-profiles{ align-items: flex-start; text-align: left; } .nn-footer-profiles .nn-profiles-list{ justify-content: flex-start; } } @media (max-width: 767px){ .ui-location-footer .nn-legal-links{ display: flex; margin: 8px 0 0; } } /* Badge → title: a bit tighter everywhere (≈24px desktop, ≈18px phones; was 32 / 24) */ .nn-csp .nn-csp-tag{ margin-bottom: 6px !important; } .ui .ui-element.available_badge.left, .ui .ui-element.available_badge.text-margin-bottom-fix, .ui .ui-element.available_badge.nn-page-badge, .ui-location-footer .ui-element.available_badge{ margin-bottom: 16px !important; } @media (max-width: 767px){ .nn-csp .nn-csp-tag{ margin-bottom: 0 !important; } .nn-csp .nn-csp-title{ margin-top: 20px !important; } .ui .ui-element.available_badge.left, .ui .ui-element.available_badge.text-margin-bottom-fix, .ui .ui-element.available_badge.nn-page-badge, .ui-location-footer .ui-element.available_badge{ margin-bottom: 12px !important; } } /* Homepage About: the left column (title, text, profiles) stays in view while the work experience list scrolls – same as the case study sections */ @media (min-width: 1025px){ .ui-element-327ff45 > .ui-widget-wrap{ position: sticky; top: 140px; align-self: flex-start; height: auto; } } /* profile pills animate in one by one (inline-block so the fadeInUp transform applies) */ .nn-profiles .nn-profiles-label{ display: inline-block; } /* Homepage: same breathing room above "Client words" as above "About" */ .ui-1093 .ui-element.ui-element-337b4ae{ margin-top: 150px !important; } @media (max-width: 1024px){ .ui-1093 .ui-element.ui-element-337b4ae{ margin-top: 100px !important; } } /* Every page starts at the same point as /case-studies/: first element 40px under the header (50px on phones) */ .nn-cs-page .nn-csp{ padding-top: 20px; } .ui .ui-element.available_badge.nn-page-badge{ margin-top: 20px !important; } @media (max-width: 1024px){ .nn-cs-page .nn-csp{ padding-top: 20px; } } @media (max-width: 767px){ .nn-cs-page .nn-csp{ padding-top: 30px; } .ui .ui-element.available_badge.nn-page-badge{ margin-top: 30px !important; } } /* Case study grid (home + /case-studies/): rounder thumbnails, industry label above the title */ .projects_grid .ui-post__thumbnail, .projects_grid .ui-post__thumbnail__link{ border-radius: 12px !important; overflow: hidden !important; } .projects_grid .nn-post-tag{ display: block; margin: 0 0 8px; color: rgba(255, 255, 255, 0.62); font-family: Inter, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; } /* About on tablet/phone: same space above "Find me on" as below the pills (50px) */ @media (max-width: 1024px){ .nn-about-profiles{ margin-top: 0; } } /* Homepage logo slider: smaller logos (the Serbian page keeps its size) */ .nn-home-logos .nn-logos-track{ zoom: .8; } .nn-home-logos .nn-logos{ --nn-logo-gap: 165px; } @media (max-width: 767px){ .nn-home-logos .nn-logos{ --nn-logo-gap: 92px; } } /* Case study grid: "View case study" text link under the excerpt (turns lime with the title on hover) */ .projects_grid .nn-post-cta{ display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; color: #FFFFFF !important; font-family: Inter, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none !important; transition: color .3s ease; } .projects_grid .nn-post-cta::after{ content: ""; flex-shrink: 0; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0l-7-7m7 7l-7 7'/%3E%3C/svg%3E") center / contain no-repeat; } @media (hover: hover){ .projects_grid article:hover .nn-post-cta{ color: #E1FF04 !important; } } /* Header subtitle ("UX/UI Designer & Developer" / "Available for new projects →"): a bit larger and lighter */ .nn-brand .nn-brand-role{ font-size: 14px !important; } .nn-brand .nn-brand-roll span:first-child{ color: rgba(255, 255, 255, 0.65) !important; } @media (max-width: 767px){ .nn-brand .nn-brand-role{ font-size: 13px !important; } } /* Header: a little more space between the photo and the name */ .nn-brand{ gap: 18px !important; } @media (max-width: 767px){ .nn-brand{ gap: 15px !important; } } @media (max-width: 360px){ .nn-brand{ gap: 12px !important; } } /* Homepage logo slider: wider than the hero text on large screens (up to 240px more, never closer than 20px to the window edge) */ .nn-home-logos{ --nn-logos-w: max(100%, min(100% + 240px, 100vw - 40px)); flex: none; width: var(--nn-logos-w); margin-left: calc((100% - var(--nn-logos-w)) / 2); margin-right: calc((100% - var(--nn-logos-w)) / 2); } /* /case-studies/ intro: wider column on desktop so "UX/UI & Web Development Case Studies" fits on two lines; the paragraph keeps its reading width */ @media (min-width: 1025px){ .ui-728 .ui-element.ui-element-07a1e9d{ padding-right: 6% !important; } .ui-728 .ui-element-ddc9ea5 p{ max-width: 728px; } } /* ============ Start Your Project: intro + next steps on the left, form card on the right ============ */ .ui-1543 .ui-element.ui-element-3e2d7bf.nn-syp-section{ padding-left: 0 !important; padding-right: 0 !important; } .nn-syp{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-areas: "intro card" "aside card"; grid-template-rows: auto 1fr; column-gap: clamp(48px, 6vw, 96px); row-gap: 40px; align-items: start; color: #FFFFFF; font-family: Inter, sans-serif; } .nn-syp-intro{ grid-area: intro; } .nn-syp-aside{ grid-area: aside; display: flex; flex-direction: column; gap: 36px; } .nn-syp-card{ grid-area: card; position: sticky; top: 110px; padding: clamp(20px, 2.4vw, 32px); border: 1px solid #2A2A2E; border-radius: 24px; background: rgba(255, 255, 255, 0.03); } .nn-syp .ui-element.available_badge.nn-page-badge{ margin: 0 0 20px !important; } .ui-1543 .nn-syp .ui-element-a3367b7 .qodef-qi-animated-text{ text-align: left !important; } .ui-1543 .nn-syp .ui-element-a3367b7 .qodef-m-title{ font-size: clamp(42px, 4.6vw, 66px) !important; line-height: 1.02 !important; } .nn-syp p.nn-syp-lead{ margin: 20px 0 0 !important; color: rgba(255, 255, 255, 0.78) !important; font-size: 18px; line-height: 1.6; max-width: 460px; } .nn-syp .ui-element.available_badge.nn-page-badge{ width: fit-content !important; max-width: 100%; } .nn-syp h2.nn-syp-h{ margin: 0 0 16px !important; color: rgba(255, 255, 255, 0.62) !important; font-family: Inter, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: .08em !important; line-height: 1.2 !important; text-transform: uppercase; } .nn-syp-direct{ display: flex; flex-wrap: wrap; gap: 10px; } .nn-syp .nn-syp-chip{ display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 1px solid #303030; border-radius: 400px; background: rgb(23, 23, 26); color: #FFFFFF !important; font-size: 15px; font-weight: 600; text-decoration: none !important; transition: border-color .3s ease, background-color .3s ease; } .nn-syp .nn-syp-chip svg{ flex: none; width: 18px; height: 18px; } .nn-syp .nn-syp-chip--wa svg{ color: #25D366; } .nn-syp .nn-syp-chip:hover{ border-color: #E1FF04; } /* form inside the card */ .ui-1543 .nn-syp .ui-element.ui-element-fd9a2c8{ margin: 0 !important; padding: 0 !important; } .ui-1543 .nn-syp .ui-element-fd9a2c8 .ui-field-group{ margin-bottom: 22px; } .ui-1543 .nn-syp .ui-element-fd9a2c8 .ui-field-group > label{ padding-bottom: 2px; color: rgba(255, 255, 255, 0.88); font-size: 14px; font-weight: 600; } .nn-syp .nn-syp-opt{ margin-left: 4px; color: rgba(255, 255, 255, 0.45); font-size: 12px; font-style: normal; font-weight: 400; } .nn-syp .contact_form input:not([type="submit"]), .nn-syp .contact_form textarea, .nn-syp .contact_form select{ border-bottom-color: rgba(255, 255, 255, 0.2) !important; font-size: 16px !important; } .nn-syp .contact_form select:has(option[value=""]:checked){ color: rgba(255, 255, 255, 0.45) !important; } .nn-syp .contact_form select option{ color: #111111; } .nn-syp .contact_form select:focus{ border-bottom-color: #E1FF04 !important; outline: none !important; } .nn-syp .contact_form textarea{ min-height: 130px; } .nn-syp .contact_form .ui-message-danger{ display: block; margin-top: 6px; color: #FF8A80; font-size: 13px; } .nn-syp .nn-form-privacy{ margin-top: 14px !important; } /* thank-you panel shown after a successful send */ .nn-syp-done{ padding: 12px 0; text-align: left; outline: none; } .nn-syp-done[hidden]{ display: none; } .nn-syp-done-icon{ display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 22px; border-radius: 50%; background: #E1FF04; color: #111111; } .nn-syp-done-icon svg{ width: 26px; height: 26px; } .nn-syp h2.nn-syp-done-h{ margin: 0 0 12px !important; color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif !important; font-size: clamp(28px, 2.6vw, 36px) !important; font-weight: 500 !important; line-height: 1.15 !important; } .nn-syp-done p{ margin: 0 0 10px !important; color: rgba(255, 255, 255, 0.78) !important; font-size: 17px; line-height: 1.6; } .nn-syp-done b{ color: #FFFFFF; font-weight: 600; word-break: break-word; } .nn-syp-done a{ color: #FFFFFF !important; text-decoration: underline; text-decoration-color: #E1FF04; text-underline-offset: 3px; } @media (max-width: 1024px){ .nn-syp{ grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "card" "aside"; grid-template-rows: auto; row-gap: 40px; } .nn-syp-card{ position: static; } .nn-syp p.nn-syp-lead{ max-width: 620px; } } @media (max-width: 767px){ .nn-syp{ row-gap: 32px; } .nn-syp-card{ padding: 22px 18px; border-radius: 18px; } .ui-1543 .nn-syp .ui-element-fd9a2c8 .ui-field-group.ui-col-50{ width: 100%; } .nn-syp p.nn-syp-lead{ font-size: 17px; } } /* Start Your Project: content starts at the same height as the /case-studies/ header */ .nn-syp{ padding-top: 20px; } @media (max-width: 767px){ .nn-syp{ padding-top: 30px; } } /* /case-studies/ heading: "UX/UI Design" / "& Development", "&" never alone on a line */ .nn-nowrap{ white-space: nowrap; } @media (max-width: 767px){ .ui-728 .ui-element-07a1e9d .qodef-m-title{ font-size: min(48px, calc((100vw - 72px) / 6.9)) !important; } } /* Header button on /start-your-project/: WhatsApp green with the WhatsApp icon on the left */ .ui-137 .nn-menu-wa > a.ui-item{ gap: 8px !important; background-color: #25D366 !important; color: #0B1F14 !important; } .ui-137 .nn-menu-wa > a.ui-item:hover, .ui-137 .nn-menu-wa > a.ui-item:focus{ background-color: #1EBE5A !important; color: #0B1F14 !important; } .ui-137 .nn-menu-wa .nn-wa-icon{ display: inline-flex; flex: none; width: 18px; height: 18px; margin-right: 0; } .ui-137 .nn-menu-wa .nn-wa-icon svg{ width: 100%; height: 100%; } /* ============ App case studies (Veli): static hero image + rows of phone screens with a Light / Dark switch ============ */ .nn-csp .nn-csp-heroimg{ margin-top: calc(clamp(28px, 3vw, 44px) - clamp(72px, 8vw, 128px)); overflow: hidden; border-radius: 16px; } .nn-csp .nn-csp-heroimg img{ display: block; width: 100%; height: auto; border-radius: 0; } .nn-csp .nn-csp-fig--phones .nn-csp-frame{ display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); } .nn-csp .nn-csp-mode{ display: inline-flex; align-self: center; padding: 4px; border: 1px solid #303030; border-radius: 400px; background: #111111; } .nn-csp .nn-csp-mode button{ min-height: 0; padding: 9px 20px !important; border: 0 !important; border-radius: 400px !important; background: transparent !important; color: rgba(255, 255, 255, 0.7) !important; font-family: Inter, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color .3s ease, color .3s ease; } .nn-csp .nn-csp-mode button[aria-pressed="true"]{ background: #E1FF04 !important; color: #111111 !important; } .nn-csp .nn-csp-mode button:hover:not([aria-pressed="true"]){ color: #FFFFFF !important; } .nn-csp .nn-csp-mode button:focus-visible{ outline: 2px solid #E1FF04; outline-offset: 2px; } .nn-csp .nn-csp-phones{ display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(12px, 2.2vw, 28px); align-items: start; } .nn-csp .nn-csp-phones[style*="--n:2"]{ max-width: 640px; margin: 0 auto; width: 100%; } .nn-csp .nn-csp-phones[style*="--n:3"]{ max-width: 820px; margin: 0 auto; width: 100%; } /* app screens (only the Veli case study uses this gallery type) */ .nn-csp .nn-csp-phone img{ display: block; width: 100%; height: auto; border-radius: clamp(6px, 0.9vw, 12px); } .nn-csp .nn-csp-fig[data-mode="light"] .nn-csp-dark, .nn-csp .nn-csp-fig[data-mode="dark"] .nn-csp-light{ display: none; } .nn-csp .nn-csp-fig--modes .nn-csp-frame{ display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); } @media (max-width: 767px){ .nn-csp .nn-csp-heroimg{ order: 4; margin-top: 40px; border-radius: 12px; } .nn-csp .nn-csp-phones{ grid-template-columns: repeat(2, minmax(0, 1fr)); } /* three screens: swipe sideways like the website phone shots */ .nn-csp .nn-csp-phones[style*="--n:3"]{ grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .nn-csp .nn-csp-phones[style*="--n:3"]::-webkit-scrollbar{ display: none; } .nn-csp .nn-csp-phones[style*="--n:3"] .nn-csp-phone{ scroll-snap-align: start; } .nn-csp .nn-csp-mode button{ padding: 8px 16px !important; font-size: 13px; } } /* ============ Case study facts: one closed card with four facts (one row on desktop, 2 x 2 on tablet and phones) ============ */ .nn-csp .nn-csp-meta{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; column-gap: 0 !important; margin-top: 32px !important; border: 1px solid var(--nn-line); border-radius: 20px; background: var(--nn-card); overflow: hidden; } .nn-csp .nn-csp-meta > div{ padding: 22px 26px 24px !important; border-top: 0 !important; border-left: 1px solid var(--nn-line); } .nn-csp .nn-csp-meta > div:first-child{ border-left: 0; } .nn-csp .nn-csp-meta dd{ margin-top: 8px !important; } @media (max-width: 1024px){ .nn-csp .nn-csp-meta{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .nn-csp .nn-csp-meta > div:nth-child(odd){ border-left: 0; } .nn-csp .nn-csp-meta > div:nth-child(n+3){ border-top: 1px solid var(--nn-line) !important; } } @media (max-width: 767px){ .nn-csp .nn-csp-meta{ margin-top: 24px !important; border-radius: 16px; } .nn-csp .nn-csp-meta > div, .nn-csp .nn-csp-meta > div:nth-child(-n+2), .nn-csp .nn-csp-meta > div:nth-child(2){ padding: 16px 18px 18px !important; } .nn-csp .nn-csp-meta > div:nth-child(2){ border-top: 0 !important; } .nn-csp .nn-csp-meta > div:nth-child(n+3){ border-top: 1px solid var(--nn-line) !important; } } /* facts card: no fill, only the outline; same space above it (from the lead) as below it (to the hero image / browser) */ .nn-csp .nn-csp-meta{ background: transparent !important; } @media (min-width: 768px){ .nn-csp .nn-csp-meta{ margin-top: calc(clamp(28px, 3vw, 44px) - 18px) !important; } } /* facts card: smaller labels, a bit more space between label and value */ .nn-csp .nn-csp-meta dt{ font-size: 11.5px !important; } .nn-csp .nn-csp-meta dd{ margin-top: 12px !important; } /* project grids: once a card has faded in, drop its compositing layer so the screenshot is drawn at full sharpness */ .projects_grid article.ui-post.is-visible{ will-change: auto !important; } .projects_grid .ui-post__thumbnail__link img{ backface-visibility: visible; } /* Project grids: cards after the first 9 wait for "Load more" */ .projects_grid article.ui-post.nn-more-hidden{ display: none !important; } .nn-load-more-wrap{ display: flex; justify-content: center; margin-top: 32px; } .nn-load-more{ display: inline-flex; align-items: center; gap: 8px; padding: 15px 26px !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 400px !important; background: transparent !important; color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease; } .nn-load-more::after{ content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14m0 0l-6-6m6 6l6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14m0 0l-6-6m6 6l6-6'/%3E%3C/svg%3E") center / contain no-repeat; } .nn-load-more:hover, .nn-load-more:focus{ border-color: #E1FF04 !important; background: #E1FF04 !important; color: #111111 !important; } .nn-load-more:focus-visible{ outline: 2px solid #E1FF04; outline-offset: 3px; } @media (max-width: 767px){ .nn-nowrap-desk{ white-space: normal; } } /* "Book a 15-min call" (opens the Cal.com popup, see /assets/js/cal.js) */ .nn-syp button.nn-syp-chip{ cursor: pointer; font-family: Inter, sans-serif; line-height: 1.2; } .nn-syp .nn-syp-chip--cal{ background: rgb(23, 23, 26) !important; border: 1px solid #303030 !important; border-radius: 400px !important; padding: 0 18px !important; } .nn-syp .nn-syp-chip--cal svg{ color: #E1FF04; } .nn-syp .nn-syp-chip--cal:hover, .nn-syp .nn-syp-chip--cal:focus{ border-color: #E1FF04 !important; background: rgb(23, 23, 26) !important; color: #FFFFFF !important; } .nn-syp .nn-syp-chip--cal:focus-visible{ outline: 2px solid #E1FF04; outline-offset: 3px; } .nn-foot-call{ width: 100%; margin: 18px 0 0 !important; text-align: center; } .nn-foot-call button{ padding: 4px 0 !important; border: 0 !important; background: none !important; color: rgba(255, 255, 255, 0.7) !important; font-family: Inter, sans-serif; font-size: 15px !important; font-weight: 500; line-height: 1.4; cursor: pointer; } .nn-foot-call button span{ color: #FFFFFF; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(225, 255, 4, 0.6); text-underline-offset: 4px; transition: color .3s ease; } .nn-foot-call button:hover span, .nn-foot-call button:focus-visible span{ color: #E1FF04; } .nn-foot-call button:focus-visible{ outline: 2px solid #E1FF04; outline-offset: 3px; } @media (max-width: 1024px){ .nn-foot-call{ margin-top: 20px !important; padding: 0 calc(5% + 10px); text-align: left; } } /* Inner pages (case studies list, case studies, Start Your Project, privacy): the first element (badge / tag) starts at the same height as the homepage heading. Desktop +19px, tablet unchanged, phones -15px. /izrada-sajtova/ keeps its own layout. */ body:not(.home):not(.page-id-1924) main.site-main{ margin-top: 19px; } @media (max-width: 1024px){ body:not(.home):not(.page-id-1924) main.site-main{ margin-top: 0; } } @media (max-width: 767px){ body:not(.home):not(.page-id-1924) main.site-main{ margin-top: -15px; } } /* ===== Izrada sajtova: conversion changes (Nov 2026) ===== */ /* Hero, tablets/phones: WhatsApp + call buttons sit right under the text (moved into the text column) */ .ui-1924 .ui-element-79ecfaf .ui-element.ui-element-3f51a7d{ width: 100%; padding: 0 !important; margin: 0; } .ui-1924 .ui-element-79ecfaf .ui-element-3f51a7d > .ui-container{ padding: 0; } /* "Radije razgovor? Zakažite besplatan poziv od 15 min" under the hero buttons */ .nn-sr-call{ width: 100%; margin: 18px 0 0 !important; } .nn-sr-call button{ max-width: 100%; white-space: normal !important; padding: 4px 0 !important; border: 0 !important; background: none !important; color: rgba(255, 255, 255, 0.7) !important; font-family: Inter, sans-serif; font-size: 15px !important; font-weight: 500; line-height: 1.4; text-align: left; cursor: pointer; } .nn-sr-call button span{ color: #FFFFFF; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(225, 255, 4, 0.6); text-underline-offset: 4px; transition: color .3s ease; } .nn-sr-call button:hover span, .nn-sr-call button:focus-visible span{ color: #E1FF04; } .nn-sr-call button:focus-visible{ outline: 2px solid #E1FF04; outline-offset: 3px; } @media (max-width: 1024px){ .nn-sr-call{ margin-top: 16px !important; text-align: center; } .nn-sr-call button{ text-align: center; } } /* Under the contact form: "Ili zakažite poziv od 15 min" */ .nn-form-cal{ margin-top: 10px; } .nn-form-cal button.nn-form-phone-link{ padding: 0 !important; border: 0 !important; background: none !important; color: #FFFFFF !important; font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(225, 255, 4, 0.6); text-underline-offset: 4px; transition: color .2s ease; } @media (hover: hover){ .nn-form-cal button.nn-form-phone-link:hover{ color: #E1FF04 !important; } } @media (max-width: 767px){ .nn-form-cal .nn-form-phone-label{ flex-basis: auto; } } /* Client testimonials (4 cards, 2 x 2) */ .nn-sr-proof{ box-sizing: border-box; width: 100%; max-width: 1140px; margin: 120px auto 0; padding: 0 20px; } .nn-testimonials--sr .nn-t-head{ display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 20px; } @media (min-width: 1025px){ .nn-testimonials--sr .nn-t-card{ grid-column: span 3 !important; } } @media (max-width: 1024px){ .nn-sr-proof{ margin-top: 90px; padding: 0 calc(4vw + 19px); overflow-x: clip; } } @media (max-width: 767px){ .nn-sr-proof{ margin-top: 70px; } } /* Tablets and phones: WhatsApp / call bar fixed at the bottom of the screen */ .nn-sr-bar{ display: none; } @media (max-width: 1024px){ .nn-sr-bar{ position: fixed; right: 0; bottom: 0; left: 0; z-index: 900; display: flex; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(17, 17, 17, 0.92); border-top: 1px solid rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: translateY(110%); transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1); } .nn-sr-bar.is-on{ transform: none; } .nn-sr-bar-btn{ display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 8px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 400px; color: #FFFFFF !important; font-family: 'Instrument Sans', sans-serif; font-size: 16px; font-weight: 600; text-decoration: none !important; } .nn-sr-bar-btn svg{ width: 18px; height: 18px; fill: currentColor; } .nn-sr-bar-btn--wa{ flex: 1.4; background: #E1FF04; border-color: #E1FF04; color: #111111 !important; } } @media (max-width: 1024px) and (prefers-reduced-motion: reduce){ .nn-sr-bar{ transition: none; } } /* Phones: testimonials as a swipeable row (next card peeks in), so the section stays short */ @media (max-width: 767px){ .nn-testimonials--sr .nn-t-head{ margin-bottom: 28px; } .nn-testimonials--sr .nn-t-grid{ display: flex; gap: 12px; margin: 0 calc(-4vw - 19px); padding: 0 calc(4vw + 19px) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 calc(4vw + 19px); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .nn-testimonials--sr .nn-t-grid::-webkit-scrollbar{ display: none; } .nn-testimonials--sr .nn-t-card{ flex: 0 0 86%; min-width: 0; scroll-snap-align: start; gap: 28px; padding: 24px; } .nn-testimonials--sr .nn-t-person{ flex-wrap: wrap; } .nn-testimonials--sr .nn-t-link{ margin-left: 62px; } .nn-testimonials--sr .nn-t-card blockquote{ font-size: 1rem; } } /* Desktop hero: "Zakažite besplatan poziv" is the main button, so the extra call line is only for tablets/phones */ @media (min-width: 1025px){ .nn-sr-call{ margin-top: 2px !important; } } .ui-1924 .ui-element-89fd52e .ui-button svg[style]{ stroke: currentColor; } /* Serbian form: "Dalje" / "Pošaljite" less tall */ @media (min-width: 768px){ main .izrada-sajta-forma .ui-button:not(.e-form__buttons__wrapper__button-previous), main .izrada-sajta-forma .e-form__buttons__wrapper__button-next{ min-height: 54px !important; padding-top: 14px !important; padding-bottom: 14px !important; font-size: 17px !important; } } @media (max-width: 767px){ main .izrada-sajta-forma .e-form__buttons__wrapper__button-next, main .izrada-sajta-forma .ui-button:not(.e-form__buttons__wrapper__button-previous){ min-height: 50px !important; padding-top: 12px !important; padding-bottom: 12px !important; } } /* "O meni" on desktop: photo starts at the top with the text and stays in view while the text scrolls */ @media (min-width: 1025px){ .ui-1924 .ui-element-26bdc83 > .ui-container{ align-items: flex-start !important; } .ui-1924 .ui-element-26bdc83 > .ui-container > .ui-column > .ui-widget-wrap{ align-content: flex-start !important; align-items: flex-start !important; } .ui-1924 .ui-element-6db32dd{ position: sticky; top: 120px; align-self: flex-start; } } /* Izrada sajtova logo strip: same logo size and spacing as the homepage strip */ .nn-sr-logos .nn-logos-track{ zoom: .8; } .nn-sr-logos .nn-logos{ --nn-logo-gap: 165px; } @media (max-width: 767px){ .nn-sr-logos .nn-logos{ --nn-logo-gap: 92px; } } /* Izrada sajtova, desktop: shorter hero so the logo strip peeks in at the bottom of the first screen (buttons side by side, slightly flatter showcase, logo strip a bit closer) */ @media (min-width: 1025px){ .ui-1924 .ui-element.ui-element-79ecfaf > .ui-element-populated{ padding-right: 0 !important; } .ui-1924 .ui-element-79ecfaf .ui-element-90284ec, .ui-1924 .ui-element-79ecfaf .ui-element-ca0d495{ max-width: 500px; } .ui-1924 .ui-element-89fd52e{ margin-right: 12px !important; } .ui-1924 .ui-element-f86dad8{ margin-top: 25px !important; } .ui-1924 .nn-show-stage{ aspect-ratio: 16 / 11; } .nn-sr-logos{ margin-top: -24px; } } /* Izrada sajtova projects: title turns lime on hover too, like the homepage grid */ @media (hover: hover){ .nn-proj:hover .nn-projects .nn-proj-title, .nn-projects .nn-proj:hover .nn-proj-title{ color: #E1FF04; } } /* Izrada sajtova hero buttons: a bit smaller than the default page buttons */ @media (min-width: 768px){ main .ui-1924 .ui-element-89fd52e .ui-button, main .ui-1924 .ui-element-f86dad8 .ui-button, main .ui-1924 .ui-element-21b1ec3 .ui-button, main .ui-1924 .ui-element-67a5bc2 .ui-button{ display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 58px; padding: 0 28px !important; font-size: 16px !important; line-height: 1 !important; } } /* Desktop: the hero fills the screen so the logo strip is cut by the bottom edge (shows there is more below) */ @media (min-width: 1025px){ .ui-1924 .ui-element-4eae398 > .ui-container{ min-height: calc(100vh - 275px); align-items: center; } } /* "Skrolujte dole" hint, desktop only, appears after 3 s without scrolling */ .nn-scroll-hint{ display: none; } @media (min-width: 1025px){ .nn-scroll-hint{ position: fixed; right: 32px; bottom: 32px; z-index: 950; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 400px; background: rgba(23, 23, 26, 0.92) !important; color: #FFFFFF !important; font-family: Inter, sans-serif; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .4s ease, transform .4s cubic-bezier(0.16, 1, 0.3, 1), border-color .3s ease; } .nn-scroll-hint.is-on{ opacity: 1; transform: none; pointer-events: auto; } .nn-scroll-hint svg{ width: 16px; height: 16px; color: #E1FF04; animation: nn-hint-bob 1.6s ease-in-out infinite; } .nn-scroll-hint:hover{ border-color: #E1FF04 !important; } } @keyframes nn-hint-bob{ 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } } @media (prefers-reduced-motion: reduce){ .nn-scroll-hint svg{ animation: none; } } /* Secondary (outline) buttons, whole site: on hover they fill white with dark text. Lime stays reserved for the main button, so a secondary button never looks like the main one. */ @media (hover: hover){ .nn-svc .nn-svc-btn:not(.nn-svc-btn--primary):hover, .nn-csp .nn-csp-visit:hover, .nn-pricing .nn-plan-cta:not(.nn-plan-cta--primary):hover, .nn-load-more:hover, .nn-projects .nn-proj-showmore:hover, .nn-foot .nn-foot-btn--call:hover, .nn-consent .nn-consent-btn--reject:hover, .nn-cs .nn-cs-secondary:hover{ border-color: #FFFFFF !important; background: #FFFFFF !important; color: #111111 !important; } } .nn-load-more:focus-visible{ border-color: #FFFFFF !important; background: #FFFFFF !important; color: #111111 !important; } .nn-load-more:focus:not(:focus-visible){ border-color: rgba(255, 255, 255, 0.16) !important; background: transparent !important; color: #FFFFFF !important; } /* Izrada sajtova hero buttons: icon and text share one 18px row, centered in the button */ .ui-1924 :is(.ui-element-89fd52e, .ui-element-f86dad8, .ui-element-21b1ec3, .ui-element-67a5bc2) .ui-button-content-wrapper{ display: flex; align-items: center; gap: 10px; line-height: 1; } .ui-1924 :is(.ui-element-89fd52e, .ui-element-f86dad8, .ui-element-21b1ec3, .ui-element-67a5bc2) .ui-button-icon{ display: flex; align-items: center; margin: 0; line-height: 0; } .ui-1924 :is(.ui-element-89fd52e, .ui-element-f86dad8, .ui-element-21b1ec3, .ui-element-67a5bc2) .ui-button-icon svg{ display: block; width: 18px !important; height: 18px !important; } .ui-1924 :is(.ui-element-89fd52e, .ui-element-f86dad8, .ui-element-21b1ec3, .ui-element-67a5bc2) .ui-button-text{ display: block; line-height: 1 !important; } @media (max-width: 767px){ main .ui-1924 .ui-element-21b1ec3 .ui-button, main .ui-1924 .ui-element-67a5bc2 .ui-button{ display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 56px; padding: 0 24px !important; line-height: 1 !important; } } /* Phones: bigger client logos, and the same space above and below the strip (homepage) */ @media (max-width: 767px){ .nn-home-logos .nn-logos-track, .nn-sr-logos .nn-logos-track{ zoom: 1.05; } .nn-home-logos .nn-logos, .nn-sr-logos .nn-logos{ --nn-logo-gap: 104px; } .nn-home-logos{ margin-top: 30px; margin-bottom: 0; } } /* Browser autofill (Chrome/Safari paint saved name/email fields light blue): keep the field's own look, white text */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-text-fill-color: #FFFFFF !important; caret-color: #FFFFFF; /* the light blue background never arrives: its change is "animated" over a very long time */ transition: background-color 600000s 0s, color 600000s 0s !important; } input:autofill, textarea:autofill, select:autofill { filter: none !important; } /* Firefox tints autofilled fields with a filter */ /* Forms: a little more room between the button and the privacy note under it */ .ui-form .nn-form-privacy { margin-top: 26px !important; } /* ===== Phone / tablet spacing pass (Nov 2026) ===== */ @media (max-width: 767px) { /* case study: the swipeable row of three phone screens runs to the card's edges, so the cut-off screen reads as "swipe for more" and the row keeps the same inner space on both sides */ .nn-csp .nn-csp-phones[style*="--n:3"] { width: calc(100% + 26px); max-width: none; margin: 0 -13px; padding: 0 13px; scroll-padding: 0 13px; box-sizing: border-box; } /* client logo strip: bigger logos, closer together */ .nn-home-logos .nn-logos-track, .nn-sr-logos .nn-logos-track { zoom: 1.2; } .nn-home-logos .nn-logos, .nn-sr-logos .nn-logos { --nn-logo-gap: 48px; } /* homepage: the first (featured) testimonial uses the same text style as the others */ .nn-testimonials .nn-t-card--featured blockquote { font-family: Inter, sans-serif; font-size: 1.0625rem; font-weight: 400; line-height: 1.6; letter-spacing: normal; } .nn-testimonials .nn-t-card--featured blockquote::before { height: 28px; font-size: 56px; } /* footer: less empty space above the copyright line */ .ui-location-footer .ui-element.ui-element-abe2d2b { margin-top: 48px !important; } } @media (max-width: 1024px) { /* case studies list: heading, intro and the first project closer together */ .ui-728 .ui-element-41dcc17 .qodef-m-title { margin-bottom: 0 !important; } .ui-728 .ui-element-ddc9ea5 p { margin-bottom: 0 !important; } .ui-728 .ui-element.ui-element-1fa4135 { padding-bottom: 10px !important; } /* start your project: same side space as the homepage */ .nn-syp { padding-left: 5vw !important; padding-right: 5vw !important; box-sizing: border-box; } /* start your project has no footer call-to-action, so the footer can start closer */ body:has(.nn-syp) .ui-location-footer .ui-element.ui-element-3dd0f87 { margin-top: 24px !important; } body:has(.nn-syp) .nn-footer-profiles { margin-top: 0 !important; } } /* Stats cards (15+ / 140+ / 04 / 30+): shorter on tablets and phones; tablets keep the 2 x 2 grid */ @media (min-width: 768px) and (max-width: 992px) { .stats-section { grid-template-columns: repeat(2, 1fr); } .stat-card { min-height: 420px; padding: 48px 40px; } .stat-card:nth-child(3) { background: transparent; } } @media (max-width: 767px) { /* phones: the four numbers in a compact 2 x 2 grid (checkerboard like desktop), outer edges in line with the page text */ .stats-section { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-card { position: relative; min-height: 0; justify-content: flex-end; padding: 56px 18px 26px; } .stat-card:nth-child(odd) { padding-left: 39px; } .stat-card:nth-child(even) { padding-right: 39px; } .stat-card:nth-child(3) { background: transparent; } .stat-card .card-label { display: none; } .stat-number { font-size: 48px; letter-spacing: -0.03em; margin-bottom: 10px; } .stat-description { font-size: 14px; line-height: 1.45; max-width: none; } /* the two cards that are links get an arrow in the corner (phones have no hover) */ a.stat-card::after { content: ""; position: absolute; top: 20px; right: 20px; width: 18px; height: 18px; background: currentColor; opacity: .55; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat; } a.stat-card:nth-child(even)::after { right: 39px; } } /* Homepage experience list: job titles are h3 (correct heading order) but keep the look they had as h4 */ .my_work_experience h3.title { font-family: "Instrument Sans", sans-serif; font-size: 1.4rem; font-weight: 500; line-height: 1.9rem; letter-spacing: -0.5px; } @media (max-width: 1024px) { .my_work_experience h3.title { font-size: 1.2rem; line-height: 1.2rem; } } @media (max-width: 767px) { .my_work_experience h3.title { font-size: 1rem; line-height: 1.3rem; } } /* Stats (2 x 2 on every screen size): the 10+ card has no background, a soft line closes it at the bottom */ .stats-section .stat-card:nth-child(3) { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* Home hero: no extra space under the h1, the text sits closer to the title */ .ui-element-9757513 h1.qodef-m-title{ margin-bottom: 0; } .ui-widget.ui-element-9757513:not(:last-child){ margin-block-end: 30px; }