/* ================================================================================= * PROPRIETARY AND CONFIDENTIAL * --------------------------------------------------------------------------------- * File / Code Header Notice * * Copyright (R) 2026 NEURALITECH STRATEGIC SOLUTION. All Rights Reserved. * * DOKUMEN DAN KODE PROGRAM INI ADALAH MILIK SEPENUHNYA DARI NEURALITECH STRATEGIC SOLUTION. * * Dilarang keras menyalin, menggandakan, memodifikasi, mendistribusikan, mempublikasikan, * atau menggunakan sebagian maupun seluruh isi kode ini tanpa izin tertulis formal dari * NEURALITECH STRATEGIC SOLUTION. * * Setiap tindakan pencurian, penggunaan tanpa izin, atau pelanggaran hak cipta atas * kode program ini akan diproses secara hukum dan dikenakan sanksi pidana maupun perdata * berdasarkan peraturan perundang-undangan yang berlaku di Republik Indonesia: * * 1. Undang-Undang No. 28 Tahun 2014 tentang Hak Cipta: * - Pasal 113 Ayat (3): Setiap Orang yang dengan tanpa hak dan/atau tanpa izin * Pencipta atau Pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta * untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 20 Tahun * * TOC: * # SETTINGS * ## fonts * ## colors * ## spacing and typescale * ## grid variables * # NORMALIZE * # BASE SETUP * # GRID * ## large screen devices * ## medium screen devices * ## tablet devices * ## mobile devices * ## small screen devices * ## additional column stackpoints * # UTILITY CLASSES * # TYPOGRAPHY * ## base type styles * ## additional typography & helper classes * ## lists * ## spacing * # PRELOADER * # FORM * ## style placeholder text * ## change autocomplete styles in Chrome * # BUTTONS * # TABLE * # COMPONENTS * ## pagination * ## alert box * ## skillbars * ## stats tabs * # PROJECT-WIDE SHARED STYLES * ## media classes * ## swiper overrides * ## section header * ## theme-specific typography classes * # PAGE WRAP * # SITE HEADER * ## logo * ## main navigation * ## header social * ## mobile menu toggle * # INTRO * ## intro content * ## intro scroll down * ## intro about * ## intro stats * # SERVICES * ## services list * # WORKS * ## portfolio list * ## clients * ## video block * ## testimonials * # CONTACT * # FOOTER * ## contact list * ## copyright * ## go top * * ------------------------------------------------------------------ */ /* =================================================================== * # SETTINGS * * * ------------------------------------------------------------------- */ /* ------------------------------------------------------------------- * ## fonts * ------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Manrope:wght@300;400;500;600;700&display=swap"); :root { --font-1 : "Inter", sans-serif; --font-2 : "Manrope", sans-serif; /* monospace */ --font-mono : Consolas, "Andale Mono", Courier, "Courier New", monospace; } /* ------------------------------------------------------------------- * ## colors * ------------------------------------------------------------------- */ :root { /* Neuralitech Modern Color Palette * Primary: Deep Blue (#0A5FFF) * Secondary: Vibrant Cyan (#00D9FF) */ --color-1 : #0A5FFF; --color-2 : #00D9FF; /* theme color variations */ --color-1-lighter : #4D8FFF; --color-1-light : #2E77FF; --color-1-dark : #0845CC; --color-1-darker : #032999; --color-2-lighter : #4DEDFF; --color-2-light : #26E5FF; --color-2-dark : #00B8CC; --color-2-darker : #009199; /* feedback colors * color-error(#ffd1d2), color-success(#c8e675), * color-info(#d7ecfb), color-notice(#fff099) */ --color-error : hsla(359, 100%, 91%, 1); --color-success : hsla(76, 69%, 68%, 1); --color-info : hsla(205, 82%, 91%, 1); --color-notice : hsla(51, 100%, 80%, 1); --color-error-content : hsla(359, 50%, 50%, 1); --color-success-content : hsla(76, 29%, 28%, 1); --color-info-content : hsla(205, 32%, 31%, 1); --color-notice-content : hsla(51, 30%, 30%, 1); /* shades * generated using * Tint & Shade Generator * (https ://maketintsandshades.com/) */ --color-black : #000000; --color-gray-19 : #020202; --color-gray-18 : #040404; --color-gray-17 : #060607; --color-gray-16 : #080809; --color-gray-15 : #0a0b0b; --color-gray-14 : #0c0d0d; --color-gray-13 : #0e0f0f; --color-gray-12 : #101112; --color-gray-11 : #121314; --color-gray-10 : #141516; --color-gray-9 : #2c2c2d; --color-gray-8 : #434445; --color-gray-7 : #5b5b5c; --color-gray-6 : #727373; --color-gray-5 : #8a8a8b; --color-gray-4 : #a1a1a2; --color-gray-3 : #b9b9b9; --color-gray-2 : #d0d0d0; --color-gray-1 : #e8e8e8; --color-white : #ffffff; /* text */ --color-text : var(--color-gray-5); --color-text-dark : var(--color-white); --color-text-light : var(--color-gray-6); --color-placeholder : var(--color-gray-6); /* buttons */ --color-btn : var(--color-gray-9); --color-btn-text : var(--color-white); --color-btn-hover : var(--color-2); --color-btn-hover-text : var(--color-black); --color-btn-primary : var(--color-1); --color-btn-primary-text : var(--color-white); --color-btn-primary-hover : var(--color-1-light); --color-btn-primary-hover-text : var(--color-white); --color-btn-stroke : var(--color-2); --color-btn-stroke-text : var(--color-2); --color-btn-stroke-hover : var(--color-1); --color-btn-stroke-hover-text : var(--color-white); /* preloader */ --color-preloader-bg : var(--color-gray-12); --color-loader : white; --color-loader-light : rgba(255, 255, 255, 0.1); /* others */ --color-body : var(--color-black); --color-border : rgba(255, 255, 255, .05); --border-radius : 3px; } /* ------------------------------------------------------------------- * ## spacing and typescale * ------------------------------------------------------------------- */ :root { /* spacing * base font size: 18px * vertical space unit : 32px */ --base-size : 62.5%; --multiplier : 1; --base-font-size : calc(1.8rem * var(--multiplier)); --space : calc(3.2rem * var(--multiplier)); /* vertical spacing */ --vspace-0_125 : calc(0.125 * var(--space)); --vspace-0_25 : calc(0.25 * var(--space)); --vspace-0_375 : calc(0.375 * var(--space)); --vspace-0_5 : calc(0.5 * var(--space)); --vspace-0_625 : calc(0.625 * var(--space)); --vspace-0_75 : calc(0.75 * var(--space)); --vspace-0_875 : calc(0.875 * var(--space)); --vspace-1 : calc(var(--space)); --vspace-1_25 : calc(1.25 * var(--space)); --vspace-1_5 : calc(1.5 * var(--space)); --vspace-1_75 : calc(1.75 * var(--space)); --vspace-2 : calc(2 * var(--space)); --vspace-2_5 : calc(2.5 * var(--space)); --vspace-3 : calc(3 * var(--space)); --vspace-3_5 : calc(3.5 * var(--space)); --vspace-4 : calc(4 * var(--space)); --vspace-4_5 : calc(4.5 * var(--space)); --vspace-5 : calc(5 * var(--space)); /* type scale * ratio 1 :2 | base: 18px * ------------------------------------------------------- * * --text-display-3 = (77.40px) * --text-display-2 = (64.50px) * --text-display-1 = (53.75px) * --text-xxxl = (44.79px) * --text-xxl = (37.32px) * --text-xl = (31.10px) * --text-lg = (25.92px) * --text-md = (21.60px) * --text-size = (18.00px) BASE * --text-sm = (15.00px) * --text-xs = (12.50px) * * --------------------------------------------------------- */ --text-scale-ratio : 1.2; --text-size : var(--base-font-size); --text-xs : calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio)); --text-sm : calc(var(--text-xs) * var(--text-scale-ratio)); --text-md : calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio)); --text-lg : calc(var(--text-md) * var(--text-scale-ratio)); --text-xl : calc(var(--text-lg) * var(--text-scale-ratio)); --text-xxl : calc(var(--text-xl) * var(--text-scale-ratio)); --text-xxxl : calc(var(--text-xxl) * var(--text-scale-ratio)); --text-display-1 : calc(var(--text-xxxl) * var(--text-scale-ratio)); --text-display-2 : calc(var(--text-display-1) * var(--text-scale-ratio)); --text-display-3 : calc(var(--text-display-2) * var(--text-scale-ratio)); /* default button height */ --vspace-btn : var(--vspace-2); } /* on mobile devices below 600px, change the value of '--multiplier' * to adjust the values of base font size and vertical space unit. */ @media screen and (max-width: 600px) { :root { --multiplier : .875; } } /* ------------------------------------------------------------------- * ## grid variables * ------------------------------------------------------------------- */ :root { /* widths for rows and containers */ --width-full : 100%; --width-max : 1200px; --width-wide : 1400px; --width-wider : 1600px; --width-widest : 1800px; --width-narrow : 1000px; --width-narrower : 800px; --width-grid-max : var(--width-max); /* gutter */ --gutter : 2rem; } /* on medium screen devices */ @media screen and (max-width: 1200px) { :root { --gutter : 1.8rem; } } /* on mobile devices */ @media screen and (max-width: 600px) { :root { --gutter : 1rem; } } /* ==================================================================== * # NORMALIZE * * * -------------------------------------------------------------------- * normalize.css v8.0.1 | MIT License | * github.com/necolas/normalize.css * -------------------------------------------------------------------- */ html { line-height : 1.15; -webkit-text-size-adjust : 100%; } body { margin : 0; } main { display : block; } h1 { font-size : 2em; margin : 0.67em 0; } hr { box-sizing : content-box; height : 0; overflow : visible; } pre { font-family : monospace, monospace; font-size : 1em; } a { background-color : transparent; } abbr[title] { border-bottom : none; text-decoration : underline; text-decoration : underline dotted; } b, strong { font-weight : bolder; } code, kbd, samp { font-family : monospace, monospace; font-size : 1em; } small { font-size : 80%; } sub, sup { font-size : 75%; line-height : 0; position : relative; vertical-align : baseline; } sub { bottom : -0.25em; } sup { top : -0.5em; } img { border-style : none; } button, input, optgroup, select, textarea { font-family : inherit; font-size : 100%; line-height : 1.15; margin : 0; } button, input { overflow : visible; } button, select { text-transform : none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance : button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style : none; padding : 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline : 1px dotted ButtonText; } fieldset { padding : 0.35em 0.75em 0.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; } [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; } details { display : block; } summary { display : list-item; } template { display : none; } [hidden] { display : none; } /* =================================================================== * # BASE SETUP * * * ------------------------------------------------------------------- */ html { font-size : var(--base-size); box-sizing : border-box; } *, *::before, *::after { box-sizing : inherit; } html, body { height : 100%; } body { background-color : #010101; -webkit-overflow-scrolling : touch; -webkit-text-size-adjust : 100%; -webkit-tap-highlight-color : rgba(0, 0, 0, 0); -webkit-font-smoothing : antialiased; -moz-osx-font-smoothing : grayscale; } p { font-size : inherit; text-rendering : optimizeLegibility; } a { text-decoration : none; } svg, img, video { max-width : 100%; height : auto; } pre { overflow : auto; } div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin : 0; padding : 0; } input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { -webkit-appearance : none; -moz-appearance : none; appearance : none; } /* =================================================================== * # GRID v4.0.0 * * * ----------------------------------------------------------------- * - Grid breakpoints are based on MAXIMUM WIDTH media queries, * meaning they apply to that one breakpoint and ALL THOSE BELOW IT. * - Grid columns without a specified width will automatically layout * as equal width columns. * * - BLOCK GRID columns(columns inside BLOCK GRID containers) are * equally-sized columns define at parent/row level. * A BLOCK GRID container's class attribute value begins with "block-". * * ------------------------------------------------------------------- */ /* row */ .row { width : 92%; max-width : var(--width-grid-max); margin : 0 auto; display : flex; flex-flow : row wrap; } .row .row { width : auto; max-width : none; margin-left : calc(var(--gutter) * -1); margin-right : calc(var(--gutter) * -1); } /* column */ .column { display : block; flex : 1 1 0%; padding : 0 var(--gutter); } .collapse>.column, .column.collapse { padding : 0; } /* row utility classes */ .row.row-wrap { flex-wrap : wrap; } .row.row-nowrap { flex-wrap : nowrap; } .row.row-y-top { align-items : flex-start; } .row.row-y-bottom { align-items : flex-end; } .row.row-y-center { align-items : center; } .row.row-stretch { align-items : stretch; } .row.row-baseline { align-items : baseline; } .row.row-x-left { justify-content : flex-start; } .row.row-x-right { justify-content : flex-end; } .row.row-x-center { justify-content : center; } /* -------------------------------------------------------------------- * ## large screen devices * -------------------------------------------------------------------- */ .lg-1 { flex : none; width : 8.33333%; } .lg-2 { flex : none; width : 16.66667%; } .lg-3 { flex : none; width : 25%; } .lg-4 { flex : none; width : 33.33333%; } .lg-5 { flex : none; width : 41.66667%; } .lg-6 { flex : none; width : 50%; } .lg-7 { flex : none; width : 58.33333%; } .lg-8 { flex : none; width : 66.66667%; } .lg-9 { flex : none; width : 75%; } .lg-10 { flex : none; width : 83.33333%; } .lg-11 { flex : none; width : 91.66667%; } .lg-12 { flex : none; width : 100%; } .block-lg-one-eight>.column { flex : none; width : 12.5%; } .block-lg-one-sixth>.column { flex : none; width : 16.66667%; } .block-lg-one-fifth>.column { flex : none; width : 20%; } .block-lg-one-fourth>.column { flex : none; width : 25%; } .block-lg-one-third>.column { flex : none; width : 33.33333%; } .block-lg-one-half>.column { flex : none; width : 50%; } .block-lg-whole>.column { flex : none; width : 100%; } /* -------------------------------------------------------------------- * ## medium screen devices * -------------------------------------------------------------------- */ @media screen and (max-width: 1200px) { .md-1 { flex : none; width : 8.33333%; } .md-2 { flex : none; width : 16.66667%; } .md-3 { flex : none; width : 25%; } .md-4 { flex : none; width : 33.33333%; } .md-5 { flex : none; width : 41.66667%; } .md-6 { flex : none; width : 50%; } .md-7 { flex : none; width : 58.33333%; } .md-8 { flex : none; width : 66.66667%; } .md-9 { flex : none; width : 75%; } .md-10 { flex : none; width : 83.33333%; } .md-11 { flex : none; width : 91.66667%; } .md-12 { flex : none; width : 100%; } .block-md-one-eight>.column { flex : none; width : 12.5%; } .block-md-one-sixth>.column { flex : none; width : 16.66667%; } .block-md-one-fifth>.column { flex : none; width : 20%; } .block-md-one-fourth>.column { flex : none; width : 25%; } .block-md-one-third>.column { flex : none; width : 33.33333%; } .block-md-one-half>.column { flex : none; width : 50%; } .block-md-whole>.column { flex : none; width : 100%; } .hide-on-md { display : none; } } /* -------------------------------------------------------------------- * ## tablet devices * -------------------------------------------------------------------- */ @media screen and (max-width: 800px) { .tab-1 { flex : none; width : 8.33333%; } .tab-2 { flex : none; width : 16.66667%; } .tab-3 { flex : none; width : 25%; } .tab-4 { flex : none; width : 33.33333%; } .tab-5 { flex : none; width : 41.66667%; } .tab-6 { flex : none; width : 50%; } .tab-7 { flex : none; width : 58.33333%; } .tab-8 { flex : none; width : 66.66667%; } .tab-9 { flex : none; width : 75%; } .tab-10 { flex : none; width : 83.33333%; } .tab-11 { flex : none; width : 91.66667%; } .tab-12 { flex : none; width : 100%; } .block-tab-one-eight>.column { flex : none; width : 12.5%; } .block-tab-one-sixth>.column { flex : none; width : 16.66667%; } .block-tab-one-fifth>.column { flex : none; width : 20%; } .block-tab-one-fourth>.column { flex : none; width : 25%; } .block-tab-one-third>.column { flex : none; width : 33.33333%; } .block-tab-one-half>.column { flex : none; width : 50%; } .block-tab-whole>.column { flex : none; width : 100%; } .hide-on-tab { display : none; } } /* -------------------------------------------------------------------- * ## mobile devices * -------------------------------------------------------------------- */ @media screen and (max-width: 600px) { .row { width : 100%; padding-left : 6vw; padding-right : 6vw; } .row .row { padding-left : 0; padding-right : 0; } .mob-1 { flex : none; width : 8.33333%; } .mob-2 { flex : none; width : 16.66667%; } .mob-3 { flex : none; width : 25%; } .mob-4 { flex : none; width : 33.33333%; } .mob-5 { flex : none; width : 41.66667%; } .mob-6 { flex : none; width : 50%; } .mob-7 { flex : none; width : 58.33333%; } .mob-8 { flex : none; width : 66.66667%; } .mob-9 { flex : none; width : 75%; } .mob-10 { flex : none; width : 83.33333%; } .mob-11 { flex : none; width : 91.66667%; } .mob-12 { flex : none; width : 100%; } .block-mob-one-eight>.column { flex : none; width : 12.5%; } .block-mob-one-sixth>.column { flex : none; width : 16.66667%; } .block-mob-one-fifth>.column { flex : none; width : 20%; } .block-mob-one-fourth>.column { flex : none; width : 25%; } .block-mob-one-third>.column { flex : none; width : 33.33333%; } .block-mob-one-half>.column { flex : none; width : 50%; } .block-mob-whole>.column { flex : none; width : 100%; } .hide-on-mob { display : none; } } /* -------------------------------------------------------------------- * ## small screen devices * --------------------------------------------------------------------*/ /* stack columns on small screen devices */ @media screen and (max-width: 400px) { .row .row { margin-left : 0; margin-right : 0; } .block-stack>.column, .column { flex : none; width : 100%; margin-left : 0; margin-right : 0; padding : 0; } .hide-on-sm { display : none; } } /* -------------------------------------------------------------------- * ## additional column stackpoints * -------------------------------------------------------------------- */ @media screen and (max-width: 1000px) { .stack-on-1000, .block-stack-on-1000>.column { flex : none; width : 100%; margin-left : 0; margin-right : 0; } } @media screen and (max-width: 700px) { .stack-on-700, .block-stack-on-700>.column { flex : none; width : 100%; margin-left : 0; margin-right : 0; } } @media screen and (max-width: 550px) { .stack-on-550, .block-stack-on-550>.column { flex : none; width : 100%; margin-left : 0; margin-right : 0; } } /* =================================================================== * # UTILITY CLASSES * * * ------------------------------------------------------------------- */ /* flex item alignment classes */ .u-flexitem-center { margin : auto; align-self : center; } .u-flexitem-left { margin-right : auto; align-self : center; } .u-flexitem-right { margin-left : auto; align-self : center; } .u-flexitem-x-center { margin-right : auto; margin-left : auto; } .u-flexitem-x-left { margin-right : auto; } .u-flexitem-x-right { margin-left : auto; } .u-flexitem-y-center { align-self : center; } .u-flexitem-y-top { align-self : flex-start; } .u-flexitem-y-bottom { align-self : flex-end; } /* misc helper classes */ .u-clearfix:after { content : ""; display : table; clear : both; } .u-hidden { display : none; } .u-invisible { visibility : hidden; } .u-antialiased { -webkit-font-smoothing : antialiased; -moz-osx-font-smoothing : grayscale; } .u-overflow-hidden { overflow : hidden; } .u-remove-top { margin-top : 0; } .u-remove-bottom { margin-bottom : 0; } .u-add-half-bottom { margin-bottom : var(--vspace-0_5); } .u-add-bottom { margin-bottom : var(--vspace-1); } .u-no-border { border : none; } .u-fullwidth { width : 100%; } .u-pull-left { float : left; } .u-pull-right { float : right; } /* =================================================================== * # TYPOGRAPHY * * * ------------------------------------------------------------------- * type scale - ratio 1:2 | base: 18px * ------------------------------------------------------------------- * * --text-display-3 = (77.40px) * --text-display-2 = (64.50px) * --text-display-1 = (53.75px) * --text-xxxl = (44.79px) * --text-xxl = (37.32px) * --text-xl = (31.10px) * --text-lg = (25.92px) * --text-md = (21.60px) * --text-size = (18.00px) BASE * --text-sm = (15.00px) * --text-xs = (12.50px) * * -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- * ## base type styles * -------------------------------------------------------------------- */ body { font-family : var(--font-1); font-size : var(--base-font-size); font-weight : 400; line-height : var(--vspace-1); color : var(--color-text); } /* links */ a { color : var(--color-1); transition : all 0.3s ease-in-out; } a:focus, a:hover, a:active { color : var(--color-2); } a:hover, a:active { outline : 0; } /* headings */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family : var(--font-2); font-weight : 600; color : var(--color-text-dark); font-variant-ligatures : common-ligatures; text-rendering : optimizeLegibility; } h1, .h1 { margin-top : var(--vspace-2_5); margin-bottom : var(--vspace-0_75); } h2, .h2, h3, .h3, h4, .h4 { margin-top : var(--vspace-2); margin-bottom : var(--vspace-0_5); } h5, .h5, h6, .h6 { margin-top : var(--vspace-1_5); margin-bottom : var(--vspace-0_5); } h1, .h1 { font-size : var(--text-display-1); line-height : var(--vspace-2); letter-spacing : -.01em; } @media screen and (max-width: 500px) { h1, .h1 { font-size : var(--text-xxxl); line-height : calc(1.625 * var(--space)); } } h2, .h2 { font-size : var(--text-xxl); line-height : var(--vspace-1_5); } h3, .h3 { font-size : var(--text-xl); line-height : var(--vspace-1_25); } h4, .h4 { font-size : var(--text-lg); line-height : var(--vspace-1); } h5, .h5 { font-size : var(--text-md); line-height : var(--vspace-0_875); } h6, .h6 { font-family : var(--font-1); font-size : var(--text-sm); line-height : var(--vspace-0_75); text-transform : uppercase; letter-spacing : .3rem; } /* emphasis, italic, * strong, bold and small text */ em, i, strong, b { font-size : inherit; line-height : inherit; } em, i { font-style : italic; } strong, b { font-weight : 600; } small { font-size : 75%; font-weight : 400; line-height : var(--vspace-0_5); } /* blockquotes */ blockquote { margin : 0 0 var(--vspace-1) 0; padding : var(--vspace-1) var(--vspace-1_5); border-left : 2px solid var(--color-text-light); position : relative; } @media screen and (max-width: 400px) { blockquote { padding : var(--vspace-0_75) var(--vspace-0_75); } } blockquote p { font-family : var(--font-1); font-weight : 400; font-size : var(--text-lg); font-style : normal; line-height : var(--vspace-1_25); color : var(--color-text-dark); padding : 0; } blockquote cite { display : block; font-family : var(--font-1); font-weight : 400; font-size : var(--text-sm); line-height : var(--vspace-0_75); font-style : normal; } blockquote cite:before { content : "\2014 \0020"; } blockquote cite, blockquote cite a, blockquote cite a:visited { color : var(--color-text-light); border : none; } /* figures */ figure img, p img { margin : 0; vertical-align : bottom; } figure { display : block; margin-left : 0; margin-right : 0; } figure img+figcaption { margin-top : var(--vspace-1); } figcaption { font-style : italic; font-size : var(--text-sm); text-align : center; margin-bottom : 0; } /* preformatted, code */ var, kbd, samp, code, pre { font-family : var(--font-mono); } pre { padding : var(--vspace-0_75) var(--vspace-1) var(--vspace-1); background : var(--color-gray-9); overflow-x : auto; } code { font-size : var(--text-sm); line-height : 1.6rem; margin : 0 .2rem; padding : calc(((var(--vspace-1) - 1.6rem) / 2) - .1rem) calc(.8rem - .1rem); white-space : nowrap; background : var(--color-gray-9); border : 1px solid var(--color-gray-8); color : var(--color-text-dark); border-radius : 3px; } pre>code { display : block; white-space : pre; line-height : var(--vspace-1); padding : 0; margin : 0; border : none; } /* deleted text, abbreviation, * & mark text */ del { text-decoration : line-through; } abbr { font-family : var(--font-1); font-weight : 600; font-variant : small-caps; text-transform : lowercase; letter-spacing : .1em; } abbr[title], dfn[title] { border-bottom : 1px dotted; cursor : help; text-decoration : none; } mark { background : var(--color-2); color : var(--color-black); } /* horizontal rule */ hr { border : solid var(--color-border); border-width : .1rem 0 0; clear : both; margin : var(--vspace-2) 0 calc(var(--vspace-2) - 1px); height : 0; } hr.fancy { border : none; margin : var(--vspace-2) 0; height : var(--vspace-1); text-align : center; } hr.fancy::before { content : "*****"; letter-spacing : .3em; } /* -------------------------------------------------------------------- * ## additional typography & helper classes * -------------------------------------------------------------------- */ .lead, .attention-getter { font-family : var(--font-1); font-weight : 400; font-size : var(--text-md); line-height : var(--vspace-1_25); color : var(--color-text-light); } .pull-quote { position : relative; padding : 0; margin-top : 0; text-align : center; } .pull-quote blockquote { border : none; margin : 0 auto; max-width : 62rem; padding-top : var(--vspace-2_5); position : relative; } .pull-quote blockquote p { font-weight : 400; color : var(--color-text-dark); } .pull-quote blockquote:before { content : ""; display : block; height : var(--vspace-1); width : var(--vspace-1); background-repeat : no-repeat; background : center center; background-size : contain; background-image : url(../images/icons/icon-quote.svg); transform : translate(-50%, 0, 0); position : absolute; top : var(--vspace-1); left : 50%; } .drop-cap:first-letter { float : left; font-family : var(--font-1); font-weight : 600; font-size : calc(3 * var(--space)); line-height : 1; padding : 0 0.125em 0 0; text-transform : uppercase; background : transparent; color : var(--color-text-dark); } .text-center { text-align : center; } .text-left { text-align : left; } .text-right { text-align : right; } /* -------------------------------------------------------------------- * ## lists * -------------------------------------------------------------------- */ ol { list-style : decimal; } ul { list-style : disc; } li { display : list-item; } ol, ul { margin-left : 1.6rem; } ul li { padding-left : .4rem; } ul ul, ul ol, ol ol, ol ul { margin : 1.6rem 0 1.6rem 1.6rem; } ul.disc li { display : list-item; list-style : none; padding : 0 0 0 .8rem; position : relative; } ul.disc li::before { content : ""; display : inline-block; width : 8px; height : 8px; border-radius : 50%; background : var(--color-1); position : absolute; left : -.9em; top : 11px; vertical-align : middle; } dt { margin : 0; color : var(--color-1); } dd { margin : 0 0 0 2rem; } /* definition list line style */ .lining dt, .lining dd { display : inline; margin : 0; } .lining dt+dt:before, .lining dd+dt:before { content : "\A"; white-space : pre; } .lining dd+dd:before { content : ", "; } .lining dd+dd:before { content : ", "; } .lining dd:before { content : ": "; margin-left : -0.2em; } /* definition list dictionary style */ .dictionary-style dt { display : inline; counter-reset : definitions; } .dictionary-style dt+dt:before { content : ", "; margin-left : -0.2em; } .dictionary-style dd { display : block; counter-increment : definitions; } .dictionary-style dd:before { content : counter(definitions, decimal) ". "; } /* -------------------------------------------------------------------- * ## spacing * -------------------------------------------------------------------- */ fieldset, button, .btn { margin-bottom : var(--vspace-0_5); } input, textarea, select, pre, blockquote, figure, figcaption, table, p, ul, ol, dl, form, img, .video-container, .ss-custom-select { margin-bottom : var(--vspace-1); } /* =================================================================== * # PRELOADER * * * ------------------------------------------------------------------- * - markup: * *
*
*
* * ------------------------------------------------------------------- */ #preloader { position : fixed; top : 0; left : 0; width : 100vw; height : 100vh; display : flex; justify-content : center; /* Memastikan konten ada di tengah horizontal */ align-items : center; /* Memastikan konten ada di tengah vertikal */ background : var(--color-body, #000); z-index : 500; opacity : 1; } .no-js #preloader { display : none; } /* Container Pembungkus Loader & Teks */ .preloader-content { display : flex; flex-direction : column; /* Mengatur susunan loader di atas, teks di bawah */ align-items : center; /* MEMASTIKAN loader & teks persis sejajar di tengah */ justify-content : center; gap : 16px; /* Jarak antara loader dan teks */ text-align : center; width : 100%; } /* Loader Bawaan */ #loader { width : var(--vspace-2, 32px); height : var(--vspace-2, 32px); padding : 0; margin : 0 auto; /* Hilangkan margin aneh dan atur ke auto */ background-color : #808080; /* Disesuaikan dengan warna di gambar Anda */ border-radius : 50%; -webkit-animation : sk-scaleout 1.0s infinite ease-in-out; animation : sk-scaleout 1.0s infinite ease-in-out; } /* Teks Preloader */ .preloader-text { font-family : var(--font-1, 'Inter', sans-serif); font-size : 14px; font-weight : 400; color : rgba(255, 255, 255, 0.8); letter-spacing : 0.05em; margin : 0; opacity : 0; animation : fadeInHoldOut 7s ease-in-out forwards; -webkit-font-smoothing: antialiased; } /* Keyframes Loader */ @-webkit-keyframes sk-scaleout { 0% { -webkit-transform : scale(0); transform : scale(0); } 100% { -webkit-transform : scale(1); transform : scale(1); opacity : 0; } } @keyframes sk-scaleout { 0% { transform : scale(0); } 100% { transform : scale(1); opacity : 0; } } /* Keyframes Teks */ @keyframes fadeInHoldOut { 0% { opacity: 0; transform: translateY(6px); } 28.5% { opacity: 1; transform: translateY(0); } 71.4% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-6px); } } /* =================================================================== * # FORM * * * ------------------------------------------------------------------- */ fieldset { border : none; } input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { --input-height : var(--vspace-2); --input-line-height : var(--vspace-1); --input-vpadding : calc((var(--input-height) - var(--input-line-height)) / 2); display : block; height : var(--input-height); padding : var(--input-vpadding) 0 calc(var(--input-vpadding) - 1px); border : 0; outline : 0; color : var(--color-text-light); font-family : var(--font-1); font-size : calc(var(--text-size) * 0.7778); line-height : var(--input-line-height); max-width : 100%; background : transparent; border-bottom : 1px solid var(--color-border); transition : all .3s ease-in-out; } .ss-custom-select { position : relative; padding : 0; } .ss-custom-select select { -webkit-appearance : none; -moz-appearance : none; appearance : none; text-indent : 0.01px; text-overflow : ''; margin : 0; vertical-align : middle; line-height : var(--vspace-1); } .ss-custom-select select option { padding-left : 2rem; padding-right : 2rem; background-color : var(--color-body); } .ss-custom-select select::-ms-expand { display : none; } .ss-custom-select::after { border-bottom : 1px solid white; border-right : 1px solid white; content : ''; display : block; height : 8px; width : 8px; margin-top : -7px; pointer-events : none; position : absolute; right : 2.4rem; top : 50%; transition : all 0.15s ease-in-out; transform-origin : 66% 66%; transform : rotate(45deg); } textarea { min-height : calc(8 * var(--space)); } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { color : var(--color-text); border-bottom : 1px solid var(--color-1); } label, legend { font-family : var(--font-1); font-weight : 600; font-size : var(--text-sm); line-height : var(--vspace-0_5); margin-bottom : var(--vspace-0_5); color : var(--color-text-dark); display : block; } input[type="checkbox"], input[type="radio"] { display : inline; } label>.label-text { display : inline-block; margin-left : 1rem; font-family : var(--font-1); line-height : inherit; } label>input[type="checkbox"], label>input[type="radio"] { margin : 0; position : relative; top : 2px; } /* ------------------------------------------------------------------- * ## style placeholder text * ------------------------------------------------------------------- */ ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color : var(--color-placeholder); } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color : var(--color-placeholder); opacity : 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color : var(--color-placeholder); opacity : 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color : var(--color-placeholder); } ::-ms-input-placeholder { /* Microsoft Edge */ color : var(--color-placeholder); } ::placeholder { /* Most modern browsers support this now. */ color : var(--color-placeholder); } /* ------------------------------------------------------------------- * ## change autocomplete styles in Chrome * ------------------------------------------------------------------- */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, 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 : var(--color-1); transition : background-color 5000s ease-in-out 0s; } /* =================================================================== * # BUTTONS * * * ------------------------------------------------------------------- */ .btn, button, input[type="submit"], input[type="reset"], input[type="button"] { --btn-height : var(--vspace-btn); display : inline-block; font-family : var(--font-1); font-weight : 600; font-size : var(--text-xs); text-transform : uppercase; letter-spacing : .35em; height : var(--btn-height); line-height : calc(var(--btn-height) - 2px); padding : 0 3.6rem; margin : 0 0.4rem var(--vspace-0_5) 0; color : var(--color-btn-text); text-decoration : none; text-align : center; white-space : nowrap; cursor : pointer; transition : all .3s; border-radius : var(--border-radius); background-color : var(--color-btn); border : 1px solid var(--color-btn); -webkit-font-smoothing : antialiased; -moz-osx-font-smoothing : grayscale; } .btn:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus, .btn:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { background-color : var(--color-btn-hover); border-color : var(--color-btn-hover); color : var(--color-btn-hover-text); outline : 0; } /* button primary */ .btn.btn--primary, button.btn--primary, input[type="submit"].btn--primary, input[type="reset"].btn--primary, input[type="button"].btn--primary { background : var(--color-btn-primary); border-color : var(--color-btn-primary); color : var(--color-btn-primary-text); } .btn.btn--primary:focus, button.btn--primary:focus, input[type="submit"].btn--primary:focus, input[type="reset"].btn--primary:focus, input[type="button"].btn--primary:focus, .btn.btn--primary:hover, button.btn--primary:hover, input[type="submit"].btn--primary:hover, input[type="reset"].btn--primary:hover, input[type="button"].btn--primary:hover { background : var(--color-btn-primary-hover); border-color : var(--color-btn-primary-hover); color : var(--color-btn-primary-hover-text); } /* button modifiers */ .btn.u-fullwidth, button.u-fullwidth { width : 100%; margin-right : 0; } .btn--small, button.btn--small { --btn-height : calc(var(--vspace-btn) - 1.6rem); } .btn--medium, button.btn--medium { --btn-height : calc(var(--vspace-btn) + .8rem); } .btn--large, button.btn--large { --btn-height : calc(var(--vspace-btn) + 1.6rem); } .btn--stroke, button.btn--stroke { background : transparent !important; border : 1px solid var(--color-btn-stroke); color : var(--color-btn-stroke-text); } .btn--stroke:focus, button.btn--stroke:focus, .btn--stroke:hover, button.btn--stroke:hover { background : var(--color-btn-stroke-hover) !important; border : 1px solid var(--color-btn-stroke-hover); color : var(--color-btn-stroke-hover-text); } .btn--pill, button.btn--pill { padding-left : 3.2rem !important; padding-right : 3.2rem !important; border-radius : 1000px !important; } /* Custom Premium Buttons for Neuralitech */ .btn-custom-premium { font-weight : 600; font-size : 1.4rem; text-transform : none; letter-spacing : normal; padding : 1.2rem 3.2rem !important; border-radius : 8px; transition : all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow : 0 4px 15px rgba(10, 95, 255, 0.2); position : relative; overflow : hidden; margin-right : 1.2rem; } .btn-custom-premium::before { content : ''; position : absolute; top : 0; left : -100%; width : 100%; height : 100%; background : rgba(255, 255, 255, 0.15); transition : left 0.35s ease; } .btn-custom-premium:hover::before { left : 100%; } .btn-glass { background : rgba(255, 255, 255, 0.1) !important; border : 2px solid rgba(0, 217, 255, 0.5) !important; color : #ffffff !important; backdrop-filter : blur(10px); -webkit-backdrop-filter: blur(10px); } .btn-glass:hover { background : rgba(0, 217, 255, 0.2) !important; border-color : #00D9FF !important; box-shadow : 0 8px 32px rgba(0, 217, 255, 0.3) !important; } .btn-solid { background : linear-gradient(135deg, #0A5FFF 0%, #2E77FF 100%) !important; border : none !important; color : #ffffff !important; font-weight : 700; } .btn-solid:hover { background : linear-gradient(135deg, #2E77FF 0%, #0A5FFF 100%) !important; box-shadow : 0 12px 32px rgba(10, 95, 255, 0.4) !important; transform : translateY(-2px); } /* Glass Morphism Effect */ .glass-effect { background : rgba(255, 255, 255, 0.08); border : 1px solid rgba(255, 255, 255, 0.18); backdrop-filter : blur(10px); -webkit-backdrop-filter: blur(10px); border-radius : 12px; padding : 2rem; } /* =================================================================== * # TABLE * * * ------------------------------------------------------------------- */ table { border-width : 0; width : 100%; max-width : 100%; font-family : var(--font-1); border-collapse : collapse; } th, td { padding : var(--vspace-0_5) 3.2rem calc(var(--vspace-0_5) - 1px); text-align : left; border-bottom : 1px solid var(--color-border); } th { padding : var(--vspace-0_5) 3.2rem; color : var(--color-text-dark); font-family : var(--font-1); font-weight : 600; } th:first-child, td:first-child { padding-left : 0; } th:last-child, td:last-child { padding-right : 0; } .table-responsive { overflow-x : auto; -webkit-overflow-scrolling : touch; } /* =================================================================== * # COMPONENTS * * * ------------------------------------------------------------------- */ /* ------------------------------------------------------------------- * ## pagination * ------------------------------------------------------------------- */ .pgn { --pgn-num-height : calc(var(--vspace-1) + .4rem); margin : var(--vspace-1) auto; text-align : center; } .pgn ul { display : inline-flex; flex-flow : row wrap; justify-content : center; list-style : none; margin-left : 0; position : relative; padding : 0 6rem; } .pgn ul li { margin : 0; padding : 0; } .pgn__num { font-family : var(--font-1); font-weight : 600; font-size : var(--text-size); line-height : var(--vspace-1); display : block; padding : .2rem 1.2rem; height : var(--pgn-num-height); margin : .2rem .2rem; color : var(--color-text-dark); border-radius : 4px; transition : all, .3s, ease-in-out; } .pgn__num:focus, .pgn__num:hover { background : var(--color-gray-9); color : var(--color-white); } .pgn .current, .pgn .current:focus, .pgn .current:hover { background-color : var(--color-gray-9); color : var(--color-white); } .pgn .inactive, .pgn .inactive:focus, .pgn .inactive:hover { opacity : 0.4; cursor : default; } .pgn__prev, .pgn__next { display : inline-flex; flex-flow : row wrap; justify-content : center; align-items : center; height : var(--pgn-num-height); width : 4.8rem; line-height : var(--vspace-1); border-radius : 4px; padding : 0; margin : 0; opacity : 1; font : 0/0 a; text-shadow : none; color : transparent; transition : all, .3s, ease-in-out; position : absolute; top : 50%; transform : translate(0, -50%); } .pgn__prev:focus, .pgn__prev:hover, .pgn__next:focus, .pgn__next:hover { background-color : var(--color-gray-9); } .pgn__prev svg, .pgn__next svg { height : 2.4rem; width : 2.4rem; transition : all, .3s, ease-in-out; } .pgn__prev svg path, .pgn__next svg path { fill : var(--color-text-dark); } .pgn__prev:focus svg path, .pgn__prev:hover svg path, .pgn__next:focus svg path, .pgn__next:hover svg path { fill : white; } .pgn__prev { left : 0; } .pgn__next { right : 0; } .pgn__prev.inactive, .pgn__next.inactive { opacity : 0.4; cursor : default; } .pgn__prev.inactive:focus, .pgn__prev.inactive:hover, .pgn__next.inactive:focus, .pgn__next.inactive:hover { background-color : transparent; } /* ------------------------------------------------------------------- * responsive: * pagination * ------------------------------------------------------------------- */ @media screen and (max-width: 600px) { .pgn ul { padding : 0 5.2rem; } } /* ------------------------------------------------------------------- * ## alert box * ------------------------------------------------------------------- */ .alert-box { padding : var(--vspace-0_75) 4rem var(--vspace-0_75) 3.2rem; margin-bottom : var(--vspace-1); border-radius : var(--border-radius); font-family : var(--font-1); font-weight : 500; font-size : var(--text-sm); line-height : var(--vspace-0_75); opacity : 1; visibility : visible; position : relative; } .alert-box__close { position : absolute; display : block; right : 1.6rem; top : 1.6rem; cursor : pointer; width : 12px; height : 12px; } .alert-box__close::before, .alert-box__close::after { content : ''; display : inline-block; width : 1px; height : 12px; position : absolute; top : 0; left : 5px; } .alert-box__close::before { transform : rotate(45deg); } .alert-box__close::after { transform : rotate(-45deg); } .alert-box--error { background-color : var(--color-error); color : var(--color-error-content); } .alert-box--error .alert-box__close::before, .alert-box--error .alert-box__close::after { background-color : var(--color-error-content); } .alert-box--success { background-color : var(--color-success); color : var(--color-success-content); } .alert-box--success .alert-box__close::before, .alert-box--success .alert-box__close::after { background-color : var(--color-success-content); } .alert-box--info { background-color : var(--color-info); color : var(--color-info-content); } .alert-box--info .alert-box__close::before, .alert-box--info .alert-box__close::after { background-color : var(--color-info-content); } .alert-box--notice { background-color : var(--color-notice); color : var(--color-notice-content); } .alert-box--notice .alert-box__close::before, .alert-box--notice .alert-box__close::after { background-color : var(--color-notice-content); } .alert-box.hideit { opacity : 0; visibility : hidden; transition : all .5s; } /* ------------------------------------------------------------------- * ## skillbars * ------------------------------------------------------------------- */ .skill-bars { list-style : none; margin : var(--vspace-2) 0 var(--vspace-1); } .skill-bars li { height : .4rem; background : var(--color-gray-9); width : 100%; margin-bottom : calc(var(--vspace-2) - .4rem); padding : 0; position : relative; } .skill-bars li strong { position : absolute; left : 0; top : calc((var(--vspace-1) * 1.25) * -1); font-family : var(--font-1); font-weight : 600; color : var(--color-text-dark); text-transform : uppercase; letter-spacing : .2em; font-size : var(--text-xs); line-height : var(--vspace-0_75); } .skill-bars li .progress { background : var(--color-1); position : relative; height : 100%; } .skill-bars li .progress span { display : block; font-family : var(--font-1); color : white; font-size : 1rem; line-height : 1; background : var(--color-black); padding : var(--vspace-0_25); border-radius : 4px; position : absolute; right : 0; top : calc((var(--vspace-1) + .8rem) * -1); } .skill-bars li .progress span::after { position : absolute; left : 50%; bottom : -10px; margin-left : -5px; width : 0; height : 0; border : 5px solid transparent; border-top-color : var(--color-black, var(--color-black)); content : ""; } .skill-bars li .percent5 { width : 5%; } .skill-bars li .percent10 { width : 10%; } .skill-bars li .percent15 { width : 15%; } .skill-bars li .percent20 { width : 20%; } .skill-bars li .percent25 { width : 25%; } .skill-bars li .percent30 { width : 30%; } .skill-bars li .percent35 { width : 35%; } .skill-bars li .percent40 { width : 40%; } .skill-bars li .percent45 { width : 45%; } .skill-bars li .percent50 { width : 50%; } .skill-bars li .percent55 { width : 55%; } .skill-bars li .percent60 { width : 60%; } .skill-bars li .percent65 { width : 65%; } .skill-bars li .percent70 { width : 70%; } .skill-bars li .percent75 { width : 75%; } .skill-bars li .percent80 { width : 80%; } .skill-bars li .percent85 { width : 85%; } .skill-bars li .percent90 { width : 90%; } .skill-bars li .percent95 { width : 95%; } .skill-bars li .percent100 { width : 100%; } /* -------------------------------------------------------------------- * ## stats tabs * -------------------------------------------------------------------- */ .stats-tabs { padding : 0; margin : var(--vspace-1) 0; } .stats-tabs li { display : inline-block; margin : 0 1.6rem var(--vspace-0_5) 0; padding : 0 1.5rem 0 0; border-right : 1px solid var(--color-border); } .stats-tabs li:last-child { margin : 0; padding : 0; border : none; } .stats-tabs li a { display : block; font-family : var(--font-1); font-size : var(--text-lg); font-weight : 600; line-height : var(--vspace-1_5); border : none; color : var(--color-text-dark); } .stats-tabs li a:hover { color : var(--color-1); } .stats-tabs li a em { display : block; margin : 0; font-family : var(--font-1); font-size : var(--text-sm); line-height : var(--vspace-0_5); font-weight : 400; font-style : normal; color : var(--color-text-light); } /* =================================================================== * # PROJECT-WIDE SHARED STYLES * * * ------------------------------------------------------------------- */ .wide { max-width : var(--width-wide); } .wider { max-width : var(--width-wider); } .narrow { max-width : var(--width-narrow); } .body-text-sm { font-size : calc(var(--text-size) * 0.8889); line-height : calc(0.9375 * var(--space)); } .screen-reader-text { clip : rect(1px, 1px, 1px, 1px); clip-path : inset(50%); height : 1px; width : 1px; margin : -1px; overflow : hidden; padding : 0; border : 0; position : absolute; word-wrap : normal !important; } [data-animate-el] { opacity : 0; } .basicLightbox iframe { width : 880px; aspect-ratio : 16/9; } /* ------------------------------------------------------------------- * ## media classes * ------------------------------------------------------------------- */ /* floated image */ img.u-pull-right { margin : var(--vspace-0_5) 0 var(--vspace-0_5) var(--vspace-0_875); } img.u-pull-left { margin : var(--vspace-0_5) var(--vspace-0_875) var(--vspace-0_5) 0; } /* responsive video container */ .video-container { --aspect-ratio : 16/9; position : relative; height : 0; overflow : hidden; padding-bottom : calc(100%/(var(--aspect-ratio))); } .video-container iframe, .video-container object, .video-container embed, .video-container video { position : absolute; top : 0; left : 0; width : 100%; height : 100%; } /* ------------------------------------------------------------------- * ## swiper overrides * ------------------------------------------------------------------- */ .swiper-container .swiper-pagination-bullets .swiper-pagination-bullet { margin : 0 1.2rem; } .swiper-container .swiper-pagination-bullet { width : 6px; height : 6px; background : white; opacity : 1; } .swiper-container .swiper-pagination-bullet-active { background : var(--color-1); opacity : 1; } /* ------------------------------------------------------------------- * ## section header * ------------------------------------------------------------------- */ .section-header { max-width : 800px; margin-bottom : var(--vspace-1_5); text-align : center; position : relative; } .section-header.has-bottom-sep { padding-bottom : calc(var(--vspace-1_25) - 1px); position : relative; } .section-header.has-bottom-sep::before { content : ""; display : inline-block; height : 1px; width : 400px; background-color : rgba(255, 255, 255, 0.15); transform : translateX(-50%); position : absolute; bottom : 0; left : 50%; } .section-header--dark.has-bottom-sep::before { background-color : rgba(255, 255, 255, 0.05); } /* ------------------------------------------------------------------- * ## theme-specific typography classes * ------------------------------------------------------------------- */ .text-pretitle { font-family : var(--font-2); font-size : var(--text-sm); font-weight : 600; color : var(--color-body); text-transform : uppercase; letter-spacing : .3em; margin-top : 0; margin-left : .2rem; margin-bottom : 0; position : relative; } .section-header--dark .text-pretitle { color : var(--color-1); } .text-display-title { --text-display-title-size : 5.6rem; --text-multiplier : 1; font-family : var(--font-2); font-size : calc(var(--text-display-title-size) * var(--text-multiplier)); font-weight : 700; line-height : 1.2857; margin-top : 0; background : linear-gradient(135deg, #ffffff 0%, #d0d0d0 100%); -webkit-background-clip : text; background-clip : text; -webkit-text-fill-color : transparent; filter : drop-shadow(0 4px 20px rgba(10, 95, 255, 0.1)); letter-spacing : -0.02em; } /* ------------------------------------------------------------------- * responsive: * project-wide shared styles * ------------------------------------------------------------------- */ @media screen and (max-width: 1000px) { .text-display-title { --text-multiplier : .9286; } } @media screen and (max-width: 900px) { .text-display-title { --text-multiplier : .8214; } } @media screen and (max-width: 800px) { .section-header { max-width : 600px; } .text-display-title br { display : none; } } @media screen and (max-width: 600px) { .section-header.has-bottom-sep::before { width : 300px; } .text-display-title { --text-multiplier : .75; } } @media screen and (max-width: 500px) { .text-display-title { --text-multiplier : .6786; } } @media screen and (max-width: 400px) { .section-header.has-bottom-sep::before { width : 240px; } .text-pretitle { font-size : var(--text-xs); } .text-display-title { --text-multiplier : .6071; } } /* =================================================================== * # PAGE WRAP * * * ------------------------------------------------------------------- */ .s-pagewrap { --header-height : 7.2rem; display : flex; flex-direction : column; min-height : 100%; overflow : hidden; position : relative; } /* =================================================================== * # SITE HEADER * * * ------------------------------------------------------------------- */ .s-header { --logo-width : 174px; --box-shadow : 0 10px 40px rgba(0, 0, 0, 0.35); /* Diperbarui ke shadow premium */ z-index : 100; display : flex; height : var(--header-height); /* GAYA GLASSMORPHISM BARU */ background-color : rgba(2, 2, 3, 0.55) !important; backdrop-filter : var(--glass-blur); -webkit-backdrop-filter : var(--glass-blur); border-bottom : 1px solid var(--glass-border) !important; box-shadow : var(--box-shadow); transition : background-color .4s var(--ease-premium), box-shadow .4s var(--ease-premium); width : 100%; position : fixed; top : 0; left : 0; } .s-header__block { z-index : 101; } /* -------------------------------------------------------------------- * ## logo * -------------------------------------------------------------------- */ .s-header__logo { z-index : 3; position : absolute; top : 50%; /* Geser ke tengah */ transform: translateY(-50%); /* Sempurnakan posisi tengah */ left : 2rem; } .s-header__logo a { display : block; margin : 0; padding : 0; outline : 0; border : none; } .s-header__logo img { width : var(--logo-width); margin : 0; vertical-align : bottom; } /* -------------------------------------------------------------------- * ## main navigation * -------------------------------------------------------------------- */ .s-header__nav-wrap { justify-content : center; align-items : flex-start; } .s-header__nav a { display : block; font-size : 10px; font-weight : 400; line-height : calc(var(--header-height) - 1px); text-transform : uppercase; letter-spacing : .4em; color : rgba(255, 255, 255, 0.5); padding : 0 2.8rem; transition-property : color, background-color; position : relative; /* Ditambahkan untuk kebutuhan animasi ::after */ } /* Efek Animasi Underline Gradasi Baru */ .s-header__nav a::after { content : ""; position : absolute; left : 2.8rem; right : 2.8rem; bottom : .6rem; height : 1px; background : linear-gradient(90deg, var(--color-2), var(--color-1)); transform : scaleX(0); transform-origin: left; transition : transform .35s var(--ease-premium); } .s-header__nav a:focus, .s-header__nav a:hover { color : white; } /* Trigger Underline saat Hover & Aktif */ .s-header__nav a:hover::after, .s-header__nav .current a::after { transform : scaleX(1); } /* Efek Glow pada Menu Aktif */ .s-header__nav .current a { color : var(--color-white); text-shadow : 0 0 12px var(--glow-cyan); } .s-header__nav ul { list-style : none; display : flex; flex-flow : row nowrap; margin : 0; padding : 0; /* border-left dihilangkan agar sekat kotak lama tidak merusak estetika glassmorphism */ } .s-header__nav li { padding-left : 0; /* border-right dihilangkan agar sekat kotak lama tidak merusak estetika glassmorphism */ } /* -------------------------------------------------------------------- * ## header social * -------------------------------------------------------------------- */ .s-header__social { list-style : none; display : flex; margin : 0; transform : translate(0, -50%); position : absolute; top : calc(50% - .2rem); right : 2rem; } .s-header__social li { padding-left : 0; margin-right : 1rem; line-height : 1; } .s-header__social li:last-child { margin-right : 0; } .s-header__social svg { height : 2.4rem; width : 2.4rem; } .s-header__social svg path { fill : white; } /* -------------------------------------------------------------------- * ## mobile menu toggle * -------------------------------------------------------------------- */ .s-header__menu-toggle { display : none; width : 6.8rem; height : var(--header-height); position : absolute; top : 0; right : .8rem; } /* Tombol hamburger menggunakan gradasi dan glow baru */ .s-header__menu-toggle span { display : block; background : linear-gradient(90deg, var(--color-2), var(--color-1)) !important; box-shadow : 0 0 8px var(--glow-cyan); width : 22px; height : 1px; margin-top : -1px; font : 0/0 a; text-shadow : none; color : transparent; transition : background-color 0.2s ease-in-out; position : absolute; right : 23px; top : 50%; bottom : auto; left : auto; } .s-header__menu-toggle span::before, .s-header__menu-toggle span::after { content : ""; width : 100%; height : 100%; background-color : inherit; transition-duration : 0.2s, 0.2s; transition-delay : 0.2s, 0s; position : absolute; left : 0; } .s-header__menu-toggle span::before { top : -8px; transition-property : top, transform; } .s-header__menu-toggle span::after { bottom : -8px; transition-property : bottom, transform; } /* is clicked */ .s-header__menu-toggle.is-clicked span { background : transparent !important; /* Diubah menjadi transparent agar gradasi bawaan hilang saat open */ box-shadow : none; } .s-header__menu-toggle.is-clicked span::before, .s-header__menu-toggle.is-clicked span::after { background-color : white; transition-delay : 0s, 0.2s; } .s-header__menu-toggle.is-clicked span::before { top : 0; transform : rotate(45deg); } .s-header__menu-toggle.is-clicked span::after { bottom : 0; transform : rotate(-45deg); } /* ------------------------------------------------------------------- * responsive: * site-header * ------------------------------------------------------------------- */ /* ------------------------------------------------------------------- * responsive: * site-header * ------------------------------------------------------------------- */ @media screen and (max-width: 1100px) { .s-header__nav a { font-size : 9px; padding : 0 2rem; } .s-header__nav a::after { left : 2rem; right : 2rem; } } @media screen and (max-width: 971px) { .s-header { display : flex; flex-direction : column; border : none !important; background-color : transparent !important; backdrop-filter : none; -webkit-backdrop-filter : none; box-shadow : none; height : auto; } /* Block Logo pada Mobile dengan Glassmorphism */ .s-header__block { width : 100%; height : var(--header-height); background-color : rgba(2, 2, 3, 0.55) !important; backdrop-filter : var(--glass-blur); -webkit-backdrop-filter : var(--glass-blur); border-bottom : 1px solid var(--glass-border) !important; position : relative; } .s-header__logo { left : 2.8rem; } /* Wrapper Navigasi Mobile dengan Glassmorphism (sedikit lebih gelap/pekat) */ .s-header__nav-wrap { display : block; width : 100%; max-width : none; transform : scaleY(0); transform-origin : center top; padding : var(--vspace-2) 3.2rem var(--vspace-2); background-color : rgba(2, 2, 3, 0.75) !important; backdrop-filter : var(--glass-blur); -webkit-backdrop-filter : var(--glass-blur); border-bottom : 1px solid var(--glass-border) !important; box-shadow : var(--box-shadow); } .s-header__nav, .s-header__social { transform : translateY(-2rem); opacity : 0; visibility : hidden; } .s-header__nav { padding : 0 0 var(--vspace-1_5); } .s-header__nav a { font-family : var(--font-2); font-size : var(--text-lg); font-weight : 300; line-height : var(--vspace-1); text-transform : none; letter-spacing : 0; padding : var(--vspace-0_375) 0; color : white; } /* Matikan underline absolute pada tampilan mobile agar rapi */ .s-header__nav a::after { display : none; } .s-header__nav a:focus, .s-header__nav a:hover { color : rgba(255, 255, 255, 0.6); } .s-header__nav .current a { background-color : transparent; color : var(--color-1); text-shadow : 0 0 12px var(--glow-cyan); } .s-header__nav ul { display : block; background-color : transparent; text-align : left; margin : 0; border : none; } .s-header__nav ul li { display : block; border : none; } .s-header__social { position : static; } .s-header__menu-toggle { display : block; right : .8rem; } .menu-is-open .s-header { height : auto; } .menu-is-open .s-header__block { box-shadow : none; } .menu-is-open .s-header__nav-wrap { transform : scaleY(1); transition : transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay : 0s; } .menu-is-open .s-header__nav, .menu-is-open .s-header__social { transform : translateY(0); opacity : 1; visibility : visible; transition : all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); transition-delay : .4s; } } /* =================================================================== * # INTRO * * * ------------------------------------------------------------------- */ /* ========================================================================== 1. Registrasi Variabel Warna (Agar bisa dianimasikan dengan halus) ========================================================================== */ @property --grad-color-1 { syntax: ''; inherits: false; initial-value: #00203d; /* Biru awal */ } @property --grad-color-2 { syntax: ''; inherits: false; initial-value: #000000; /* Hitam awal */ } /* ========================================================================== 2. Timeline Animasi (Keyframes) ========================================================================== */ @keyframes ambientGlow { 0% { --grad-color-1: #00274b; --grad-color-2: #000000; } 50% { --grad-color-1: #000a30; /* Berubah ke biru muda terang di tengah durasi */ --grad-color-2: #000000; /* Hitam dengan sedikit hint biru gelap */ } 100% { --grad-color-1: #00274b; --grad-color-2: #000000; } } /* ========================================================================== 3. Class Utama .s-intro ========================================================================== */ .s-intro { --text-huge : 7.4rem; --text-huge-line-height : 1.158; --text-huge-multiplier : 1; padding-top : calc(var(--header-height) + var(--vspace-5)); padding-bottom : var(--vspace-5); /* Gunakan variabel yang didaftarkan di atas pada radial-gradient */ background: radial-gradient(circle, var(--grad-color-1) 20%, var(--grad-color-2) 80%); /* Jalankan animasi 'ambientGlow' selama 8 detik secara berulang terus (infinite) */ animation: ambientGlow 8s ease-in-out infinite; } /* -------------------------------------------------------------------- * ## intro content * -------------------------------------------------------------------- */ .s-intro__top-block { width : 100%; padding : 0 12%; position : relative; } .s-intro__bg { background-image : url(../images/neuralitech-picture.jpeg); background-repeat : no-repeat; background-position : center; background-size : cover; width : 100%; position : absolute; top : calc(1.5 * var(--text-huge-line-height) * var(--text-huge) * var(--text-huge-multiplier)); right : 0; bottom : 0; left : 0; border-radius : 24px; overflow : hidden; } .s-intro__bg::before { content : ""; display : block; background-color : black; opacity : .3; position : absolute; top : 0; left : 0; right : 0; bottom : 0; width : 100%; height : 100%; } .s-intro__text { font-family : var(--font-2); font-weight : 500; font-size : calc(var(--text-huge) * var(--text-huge-multiplier)); line-height : var(--text-huge-line-height); letter-spacing : normal; text-align : center; margin : 0; padding-bottom : calc(10 * var(--space)); position : relative; background-image: linear-gradient(to left, #00aeff, #0075d4, #00bfff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0px 0px 10px rgb(0, 23, 30)); } .s-intro__text span { color : var(--color-1); } /* ========================================== 1. REGISTRASI VARIABEL ANIMASI (Wajib di Atas) ========================================== */ @property --gradient-angle { syntax: ""; initial-value: 0deg; inherits: false; } /* ========================================== 2. BOX UTAMA (KONTEN & BACKGROUND) ========================================== */ .s-intro__about { z-index : 1; flex : none; width : 75%; max-width : 880px; background-color : rgba(10, 11, 11, 0.75); /* Latar belakang dalam tetap gelap */ font-weight : 300; font-size : calc(var(--text-size) * 1.1111); line-height : var(--vspace-1_25); color : var(--color-text-light); margin-top : calc(var(--vspace-3) * -1); margin-bottom : var(--vspace-3_5); padding : var(--vspace-2_5) var(--vspace-3) var(--vspace-2); position : relative; border-radius : 8px; /* Sudut melengkung halus */ } /* ========================================== 3. GARIS VERTIKAL DEKORASI (Bawaan Template) ========================================== */ .s-intro__about::before { content : ""; display : block; width : 1px; height : var(--vspace-2); background-color : var(--color-1); transform : translateX(-50%); position : absolute; top : calc(var(--vspace-1) * -1); left : 50%; z-index : 2; /* Di atas animasi border */ } /* ========================================== 4. ANIMASI BORDER BERJALAN (Trik Masking 50-50) ========================================== */ .s-intro__about::after { content: ""; position: absolute; inset: 0; border-radius: 8px; padding: 2px; /* Ketebalan garis border */ /* Susunan warna simetris berhadapan */ background: conic-gradient( from var(--gradient-angle), #00aeff 0deg, #00bfff 30deg, #005da9 60deg, transparent 90deg, transparent 180deg, #00aeff 180deg, #00bfff 210deg, #005da9 240deg, transparent 270deg, transparent 360deg ); /* Memotong bagian tengah agar warna tidak bocor ke teks */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; animation: spinBorder 4s linear infinite; } /* ========================================== 5. JUDUL DI DALAM BOX ========================================== */ .s-intro__about .s-intro__about-title { text-align : center; font-size : var(--text-lg); line-height : var(--vspace-1); margin-top : 0; margin-bottom : var(--vspace-2); position : relative; z-index : 3; /* Memastikan teks berada di paling depan */ } /* ========================================== 6. KEYFRAMES ROTASI ========================================== */ @keyframes spinBorder { 0% { --gradient-angle: 360deg; /* Dimulai dari akhir */ } 100% { --gradient-angle: 0deg; /* Mundur ke awal untuk membalik arah gerak */ } } /* -------------------------------------------------------------------- * ## intro scroll down * -------------------------------------------------------------------- */ .s-intro__scroll-down { display : flex; align-items : center; font-family : var(--font-2); font-size : 10px; font-weight : 300; text-transform : uppercase; letter-spacing : .6em; color : white; line-height : 1.6rem; padding : .8rem 0; transform : translateY(0) rotate(90deg); transform-origin : right bottom; position : absolute; bottom : 0; right : -4rem; } .s-intro__scroll-down svg { height : 1.4rem; width : 1.4rem; margin-left : 1.6rem; } .s-intro__scroll-down svg path { fill : white; } .s-intro__scroll-down:focus, .s-intro__scroll-down:hover { color : var(--color-1); } /* -------------------------------------------------------------------- * ## intro about * -------------------------------------------------------------------- */ .s-intro__about { z-index : 1; flex : none; width : 75%; max-width : 880px; background-color : rgba(10, 11, 11, 0.75); font-weight : 300; font-size : calc(var(--text-size) * 1.1111); line-height : var(--vspace-1_25); color : var(--color-text-light); margin-top : calc(var(--vspace-3) * -1); margin-bottom : var(--vspace-3_5); padding : var(--vspace-2_5) var(--vspace-3) var(--vspace-2); position : relative; } .s-intro__about::before { content : ""; display : block; width : 1px; height : var(--vspace-2); background-color : var(--color-1); transform : translateX(-50%); position : absolute; top : calc(var(--vspace-1) * -1); left : 50%; } .s-intro__about .s-intro__about-title { text-align : center; font-size : var(--text-lg); line-height : var(--vspace-1); margin-top : 0; margin-bottom : var(--vspace-2); } /* -------------------------------------------------------------------- * ## intro stats * -------------------------------------------------------------------- */ .stats__item h5 { margin-top : var(--vspace-0_75); } .stats__count { font-family : var(--font-1); font-weight : 700; font-size : calc(var(--text-size) * 5.1111); line-height : 1; background-image: linear-gradient(135deg, #00D9FF 0%, #0A5FFF 50%, #2E77FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 30px rgba(0, 217, 255, 0.3); filter: drop-shadow(0 0 8px rgba(10, 95, 255, 0.2)); } /* ------------------------------------------------------------------- * responsive: * intro * ------------------------------------------------------------------- */ @media screen and (max-width: 1400px) { .s-intro { --text-huge-multiplier : .95; } .s-intro__scroll-down { bottom : -22rem; right : 6rem; } } @media screen and (max-width: 1300px) { .s-intro { --text-huge-multiplier : .9; } .s-intro__about { font-size : calc(var(--text-size) * 1.056); line-height : calc(1.125 * var(--space)); } .stats__count { font-size : calc(var(--text-size) * 4.8889); } } @media screen and (max-width: 1200px) { .s-intro { --text-huge-multiplier : .85; padding-top : calc(var(--header-height) + var(--vspace-4)); } .s-intro__text br { display : none; } .about-stats { max-width : 920px; } } @media screen and (max-width: 1100px) { .s-intro { --text-huge-multiplier : .75; } } @media screen and (max-width: 1000px) { .s-intro { --text-huge-multiplier : .7; } .s-intro__top-block { padding : 0 8vw; } .s-intro__about { font-size : var(--text-size); padding : var(--vspace-2) var(--vspace-1_75) var(--vspace-1); } .s-intro__about .s-intro__about-title { font-size : var(--text-md); line-height : var(--vspace-0_875); margin-bottom : var(--vspace-1_5); } } @media screen and (max-width: 900px) { .s-intro { padding-top : calc(var(--header-height) + var(--vspace-3)); } .s-intro__text { padding-bottom : calc(8 * var(--space)); } .s-intro__scroll-down { display : none; } .s-intro__about { width : 82%; } } @media screen and (max-width: 800px) { .stats__count { font-size : calc(var(--text-size) * 4.4444); } } @media screen and (max-width: 700px) { .s-intro { --text-huge-multiplier : .6; } .s-intro__about { width : 85%; font-size : calc(var(--text-size) * 0.9444); line-height : var(--vspace-1); padding : var(--vspace-2) var(--vspace-1_5) var(--vspace-1); } } @media screen and (max-width: 600px) { .s-intro { --text-huge-multiplier : .5; } .s-intro__top-block { padding : 0 5vw; } .s-intro .s-intro__text { padding-bottom : calc(5 * var(--space)); } .s-intro__about { width : calc(100% - var(--gutter) * 2); margin-top : 0; padding : var(--vspace-2) var(--vspace-1_25) var(--vspace-1); } .s-intro__about::before { height : var(--vspace-1_5); top : calc(var(--vspace-0_75) * -1); } .stats__item { margin-bottom : var(--vspace-0_25); } .stats__item h5 { margin-top : var(--vspace-0_5); } .stats__count { font-size : calc(var(--text-size) * 4); } } @media screen and (max-width: 500px) { .s-intro { --text-huge-multiplier : .425; padding-top : calc(var(--header-height) + var(--vspace-2_5)); } .s-intro__about { max-width : 540px; padding : var(--vspace-2) var(--vspace-2) var(--vspace-1); position : relative; } .intro-about__buttons { display : flex; flex-wrap : wrap; gap : 1.2rem; margin-top : var(--vspace-2); align-items : center; } .s-intro__about .s-intro__about-title { font-size : var(--text-size); line-height : var(--vspace-0_75); margin-bottom : var(--vspace-1_25); } } @media screen and (max-width: 400px) { .s-intro { --text-huge-multiplier : .4; padding-top : calc(var(--header-height) + var(--vspace-2)); } .s-intro__about { width : 100%; } } @media screen and (max-width: 350px) { .s-intro { --text-huge-multiplier : .38; } .s-intro__about { padding : var(--vspace-2) var(--vspace-0_75) var(--vspace-1); } } /* =================================================================== * # SERVICES * * * ------------------------------------------------------------------- */ .s-services { padding-top : var(--vspace-5); padding-bottom : var(--vspace-5); position : relative; } .s-services::before { content : ''; position : absolute; top : 0; left : 0; right : 0; bottom : 0; background : radial-gradient(circle at 20% 50%, rgba(10, 95, 255, 0.05) 0%, transparent 50%); pointer-events : none; } /* -------------------------------------------------------------------- * ## services list * -------------------------------------------------------------------- */ /* Container Utama Grid */ .nt-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 40px; width: 100%; max-width: 1200px; margin: 40px auto; padding: 0 20px; box-sizing: border-box; } /* Komponen Kartu Premium dengan Base Glow Halus */ .nt-service-card { display: flex; align-items: flex-start; gap: 24px; background: linear-gradient( 160deg, rgba(10, 15, 20, 0.577) 0%, rgba(11, 30, 49, 0.686) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(12px); /* Border awal dengan sentuhan aqua redup */ border: 1px solid rgba(0, 242, 254, 0.12); border-radius: 16px; padding: 32px 28px; /* Durasi transisi diperhalus (cubic-bezier untuk animasi premium) */ transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, box-shadow 0.4s ease; box-sizing: border-box; width: 100%; position: relative; /* Glow tipis konstan di kegelapan */ box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); } /* =================================================================== * # INTERACTIVE HOVER STATE (GLOW & SCALE UP) * ------------------------------------------------------------------- */ .nt-service-card:hover { /* 1. Efek Membesar Sedikit (Scale Up 1.03x + Naik ke atas 4px) */ transform: translateY(-6px) scale(1.025); /* 2. Border Menyala Terang Warna Aqua */ border-color: rgba(0, 207, 254, 0.65); /* 3. Efek Multi-Layered Neon Aqua Glow (Lembut & Menyebar) */ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), /* Bayangan dasar gelap */ 0 0 20px #00f2fe26, /* Cahaya luar pertama (pekat dekat) */ 0 0 45px #00f2fe26; /* Cahaya luar kedua (memudar jauh) */ } /* Animasi khusus pada Icon saat kartu di-hover */ .nt-service-card:hover .nt-icon-wrapper { transform: rotate(5deg) scale(1.1); filter: drop-shadow(0 0 8px #fafcfc91); } /* Pembungkus Icon */ .nt-icon-wrapper { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; transition: transform 0.3s ease, filter 0.3s ease; } .nt-icon-wrapper img, .nt-icon-wrapper svg { width: 100%; height: 100%; object-fit: contain; } /* Pengaturan Teks Konten */ .nt-service-content { flex: 1; } /* Judul Layanan */ .nt-card-title { font-family: var(--font-sans, "Inter", sans-serif); font-size: 1.9rem !important; font-weight: 600 !important; margin: 0 0 12px 0 !important; line-height: 1.3 !important; letter-spacing: -0.02em; background: linear-gradient(160deg, #ffffff 0%, #ffffff 50%, #00f2fe 75%, #2c9dff 100%) !important; background-size: 250% 100% !important; background-position: 0% center !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; transition: background-position 0.4s ease-in-out !important; } .nt-service-card:hover .nt-card-title { background-position: 100% center !important; } /* Deskripsi Layanan */ .nt-card-desc { font-family: var(--font-sans, "Inter", sans-serif); font-size: 1.45rem !important; line-height: 1.6 !important; color: #ffffffcb !important; margin: 0 !important; } .service-icon { display : block; width : var(--vspace-1_75); height : var(--vspace-1_75); margin-top : .4rem; background-repeat : no-repeat; background-position : center; background-size : contain; opacity : 0.85; transition : all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); filter : drop-shadow(0 4px 12px rgba(0, 217, 255, 0.15)); } .service-item:hover .service-icon { opacity : 1; transform : scale(1.1) translateY(-4px); filter : drop-shadow(0 8px 20px rgba(0, 217, 255, 0.3)); } .service-icon--product-design { background-image : url(../images/icons/services/webdevelopment.png); } .service-icon--branding { background-image : url(../images/icons/services/appsdevelopment.png); } .service-icon--frontend { background-image : url(../images/icons/services/saasdevelopment.png); } .service-icon--research { background-image : url(../images/icons/services/Cybersecdev.png); } .service-icon--illustration { background-image : url(../images/icons/services/academy.png); } .service-icon--ecommerce { background-image : url(../images/icons/services/RND.png); } /* ------------------------------------------------------------------- * responsive: * services * ------------------------------------------------------------------- */ @media screen and (max-width: 900px) { .nt-services-grid { grid-template-columns: 1fr; gap: 24px; } } @media screen and (max-width: 480px) { .nt-service-card { padding: 24px 20px; gap: 16px; } /* Mencegah efek membesar terlalu ekstrem di layar HP yang sempit */ .nt-service-card:hover { transform: translateY(-4px) scale(1.012); } .nt-card-title { font-size: 1.7rem !important; } .nt-card-desc { font-size: 1.35rem !important; } } /* =================================================================== * # WORKS * * * ------------------------------------------------------------------- */ .s-works { padding-top : var(--vspace-5); padding-bottom : var(--vspace-4); } /* ------------------------------------------------------------------- * ## portfolio list * ------------------------------------------------------------------- */ .folio-list { margin-top : var(--vspace-2_5); margin-bottom : var(--vspace-2); } .folio-item { position : relative; overflow : hidden; } .folio-item__caption { display : none; } /* thumbnail */ .folio-item__thumb a { display : block; } .folio-item__thumb a::before { z-index : 1; content : ""; display : block; background-color : rgba(0, 0, 0, 0.85); opacity : 0; visibility : hidden; position : absolute; top : 0; left : 0; right : 0; bottom : 0; width : 100%; height : 100%; transition : all, .5s; } .folio-item__thumb a::after { z-index : 1; content : "..."; text-align : center; font-family : var(--font-1); font-weight : 300; font-size : 3rem; color : white; display : block; height : 3.2rem; width : 3.2rem; line-height : 3.2rem; margin-left : -1.6rem; margin-top : -3rem; text-align : center; opacity : 0; visibility : hidden; transform : scale(0.5); transition : all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); position : absolute; left : 50%; top : 50%; } .folio-item__thumb img { vertical-align : bottom; margin-bottom : 0; transition : all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); } /* portfolio info */ .folio-item__info { z-index : 2; padding : 0 3rem; transform : translateY(-100%); opacity : 0; visibility : hidden; transition : all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); position : absolute; left : 0; top : var(--vspace-1); } .folio-item__title { font-size : calc(var(--text-size) * 0.8889); line-height : 1.25; margin : 0; color : white; } .folio-item__cat { font-family : var(--font-2); font-size : 1.2rem; font-size : calc(var(--text-size) * 0.6667); line-height : 1.5; margin-bottom : 0.2rem; color : rgba(255, 255, 255, 0.5); } .folio-item__project-link { z-index : 2; display : block; font-weight : 400; font-size : 1.2rem; line-height : 2rem; color : white; background-color : transparent; border : 1px solid rgba(255, 255, 255, 0.3); padding : .6rem 1.2rem; opacity : 0; visibility : hidden; transform : translateX(-100%); transition : all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); position : absolute; bottom : var(--vspace-1); left : 3rem; } .folio-item__project-link::before { display : block; content : ""; height : 1px; width : 3rem; background-color : rgba(255, 255, 255, 0.3); position : absolute; top : 50%; left : -3rem; } .folio-item__project-link:focus, .folio-item__project-link:hover, .folio-item__project-link:active { background-color : white; border : 1px solid white; color : black; } /* on hover */ .folio-item:hover .folio-item__thumb img { transform : scale(1.05); } .folio-item:hover .folio-item__thumb a::before { opacity : 1; visibility : visible; } .folio-item:hover .folio-item__thumb a::after { opacity : 1; visibility : visible; transform : scale(1); } .folio-item:hover .folio-item__info { opacity : 1; visibility : visible; transform : translateY(0); } .folio-item:hover .folio-item__project-link { opacity : 1; visibility : visible; transform : translateX(0); } /* ------------------------------------------------------------------- * ## clients * ------------------------------------------------------------------- */ .clients { margin-top : var(--vspace-1_5); padding-bottom : var(--vspace-3); } .clients-outer { max-width: 1020px; } .clients-outer .text-clients-title { max-width : 640px; line-height : calc(1.375 * var(--space)); margin-left : auto; margin-right : auto; text-align : center; } /* Viewport Marquee (Full Screen Width) */ .clients-marquee-full { display: block; margin-top: var(--vspace-1_5); padding: var(--vspace-1) 0; overflow: hidden; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } /* Track Animasi Logonya */ .marquee-track { display: flex; align-items: center; width: max-content; animation: marquee-infinite 25s linear infinite; } /* Keyframe Running Text Seamless */ @keyframes marquee-infinite { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* --- KONTROL PAUSE SPESIFIK PADA IMG --- */ /* 1. DISENTUH: Pause HANYA saat kursor tepat di atas gambar (img) */ .clients-marquee-full:has(img:hover) .marquee-track { animation-play-state: paused; } /* 2. DIKLIK/DITEKAN: Pause terkunci permanen pada img saat diklik */ .marquee-track.is-paused { animation-play-state: paused !important; } /* Link Wrapper Logo */ .clients-marquee-full a { display: inline-block; margin-right: 60px; flex-shrink: 0; pointer-events: none; cursor: default; } /* Elemen Gambar Logo Client */ .clients-marquee-full img { display: block; width: 190px; height: auto; object-fit: contain; opacity: 0.5; transform: scale(0.9); cursor: pointer !important; pointer-events: auto; /* Mengaktifkan sensor kursor HANYA pada gambar */ transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); /* --- Proteksi Gambar --- */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; } /* Efek saat Kursor Tepat di Atas Gambar */ .clients-marquee-full img:hover { transform: scale(1); opacity: 1; } /* ========================================================================== RESPONSIVE DESIGN ========================================================================== */ @media screen and (max-width: 900px) { .clients-marquee-full a { margin-right: 45px; } .clients-marquee-full img { width: 150px; } } @media screen and (max-width: 600px) { .clients-marquee-full { margin-top: var(--vspace-1); padding: var(--vspace-0_5) 0; } .clients-marquee-full a { margin-right: 30px; } .clients-marquee-full img { width: 110px; } } /* ------------------------------------------------------------------- * ## video block * ------------------------------------------------------------------- */ /* Membatasi tinggi container agar tidak menciptakan ruang hitam vertikal yang terlalu besar */ .video-block { position: relative !important; width: 100% !important; height: 60vh !important; /* Mengunci tinggi maksimal di 60% layar HP/Desktop agar padat */ min-height: 350px !important; /* Menjaga batas minimum agar tidak terlalu gepeng */ display: block !important; overflow: hidden !important; padding: 0 !important; margin: 0 auto !important; background: #000000; } /* Memastikan konten video dan canvas globe berada di tengah area yang baru */ .video-block__content { position: relative !important; width: 100% !important; height: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; } .video-block__content video { width: 100% !important; height: 100% !important; object-fit: cover !important; /* Memotong video secara proporsional agar pas di container baru */ position: absolute !important; top: 0; left: 0; z-index: 1 !important; } #text-overlay { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 1 !important; /* Memastikan berada di lapisan paling atas */ width: 90% !important; /* Diperlebar sedikit agar teks panjang tidak langsung patah ke bawah */ text-align: center !important; pointer-events: none !important; /* Desain Tipografi Base */ color: #ffffff !important; font-family: var(--font-2), "Manrope", sans-serif !important; font-weight: 800 !important; /* Dibuat lebih tebal (Extra Bold) agar terlihat makin besar */ letter-spacing: -0.02em !important; /* Merapatkan huruf sedikit khas desain modern/futuristik */ text-shadow: 0px 4px 30px rgba(0, 0, 0, 1), 0px 0px 50px rgba(0, 0, 0, 0.9) !important; } /* Memastikan target teks utama dan kursornya dipaksa berukuran besar */ #typing-text, .typing-cursor { font-size: 4.5rem !important; /* Ukuran default sangat besar */ line-height: 1.2 !important; display: inline-block !important; } /* Kursor Ketik Tanpa Garis Tegak */ .typing-cursor { display: inline-block !important; color: #ffffff !important; margin-left: 4px !important; opacity: 1; } .typing-cursor.blinking { animation: blinkAnimation 0.8s step-end infinite !important; } @keyframes blinkAnimation { from, to { opacity: 1; } 50% { opacity: 0; } } /* Responsive Ukuran Huruf */ @media (min-width: 1024px) { .video-block { height: 70vh !important; } /* Sedikit lebih tinggi di desktop agar proporsional */ } @media (max-width: 767px) { .video-block { height: 50vh !important; } /* Di HP dibuat sangat ringkas agar globe langsung terlihat dekat navbar */ } /* 1. Tampilan Laptop / Desktop (Layar Lebar - Ukuran Super Besar) */ @media (min-width: 1024px) { #typing-text, .typing-cursor { font-size: 5rem !important; /* Jika masih kurang besar, naikkan menjadi 5.5rem atau 6rem */ line-height: 1.2 !important; } } /* 2. Tampilan Tablet (Layar Menengah) */ @media (min-width: 768px) and (max-width: 1023px) { #typing-text, .typing-cursor { font-size: 3.5rem !important; line-height: 1.2 !important; } } /* 3. Tampilan Mobile / HP (Layar Kecil - Disesuaikan agar tetap proporsional) */ @media (max-width: 767px) { #typing-text, .typing-cursor { font-size: 1.8rem !important; /* Ukuran besar yang aman untuk layar HP agar tidak meluber keluar video */ line-height: 1.2 !important; } } /* ------------------------------------------------------------------- * ## testimonials * ------------------------------------------------------------------- */ .testimonials { margin-top : var(--vspace-4_5); max-width : 1080px; } /* ------------------------------------------------------------------- * responsive: * works * ------------------------------------------------------------------- */ @media screen and (max-width: 800px) { .clients-outer .text-clients-title { max-width : 500px; } .clients-outer .text-clients-title br { display : none; } .testimonials { max-width : 600px; } } @media screen and (max-width: 600px) { .video-block { /* Memaksa video tetap full screen di mobile, abaikan padding bawaan */ width: 100vw; height: 100vh; padding-top: 0 !important; padding-bottom: 0 !important; } } @media screen and (max-width: 400px) { .folio-list { margin-bottom: var(--vspace-1); } .clients-outer .text-clients-title { max-width: 300px; font-size: var(--text-lg); line-height: var(--vspace-1); } .video-block { /* Memastikan tidak ada padding yang merusak tinggi 100vh di layar super kecil */ width: 100vw; height: 100vh; padding-top: 0 !important; padding-bottom: 0 !important; } /* Tetap pertahankan setingan icon video link jika kamu berniat memunculkannya kembali nanti */ .video-link { height: var(--vspace-2_5); width: var(--vspace-2_5); } .video-link svg { height: var(--vspace-1); width: var(--vspace-1); } } /* ========================================== ANIMASI GARIS PEMBATAS (VERSI KENCANG) ========================================== */ .contact-divider { position: relative; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.05); overflow: hidden; z-index: 5; } /* Sinar Berkilau Bergerak Kencang dari KANAN ke KIRI */ .contact-divider::after { content: ""; position: absolute; top: 0; left: 100%; /* Posisi awal dimulai dari kanan luar */ width: 40%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(0, 242, 254, 0.3) 30%, #00f2fe 50%, rgba(0, 242, 254, 0.3) 70%, transparent 100% ); box-shadow: 0 0 10px #00f2fe; animation: scanLineReverse 0.8s infinite linear; } /* Keyframes Gerakan KANAN ke KIRI */ @keyframes scanLineReverse { 0% { left: 100%; /* Mulai dari ujung kanan */ } 100% { left: -40%; /* Berakhir di luar ujung kiri */ } } /* =================================================================== * # CONTACT * * * ------------------------------------------------------------------- */ .s-contact { padding-top: var(--vspace-5); padding-bottom: var(--vspace-3); } .s-contact { background: linear-gradient(to bottom, #000000, #00121bb6, #001e3aa4) !important; } /* =================================================================== * # PREMIUM ONLY-FORM CONTACT INTERFACE WITH FILE UPLOAD * =================================================================== */ .s-contact__content-v3 { max-width: 800px !important; margin: 4rem auto 0 auto; padding: 0 2.4rem; } .pro-form-container { background: linear-gradient(145deg, rgba(20, 20, 24, 0.75) 0%, rgba(10, 10, 12, 0.9) 100%); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 16px; padding: 5rem; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); text-align: left !important; box-sizing: border-box !important; width: 100%; } /* Header Form */ .form-block-header { margin-bottom: 4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); padding-bottom: 2rem; } .block-title { font-size: 2.6rem; color: #ffffff; font-weight: 700; margin: 0 0 1rem 0; letter-spacing: -0.02em; } .block-subtitle { font-size: 1.5rem; color: #7b7e87; line-height: 1.6; margin: 0; } /* =================================================================== * LAYOUT ROW & GRID * =================================================================== */ .form-row { display: flex; gap: 2.4rem; align-items: flex-end !important; margin-bottom: 2.4rem; width: 100%; position: relative; z-index: 1; } .form-group { margin-bottom: 2.4rem; width: 100%; position: relative; z-index: 1; } .form-row .form-group { flex: 1; min-width: 0; /* Mencegah overflow pada flexbox */ margin-bottom: 0 !important; } .pro-label { font-size: 1.2rem; font-weight: 600; color: #9296a1; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; display: block; } /* =================================================================== * INPUT, SELECT & TEXTAREA (FIX INTERAKSI & MOBILE TOUCH) * =================================================================== */ input.pro-input, .ss-custom-select { box-sizing: border-box !important; background: rgba(0, 0, 0, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; height: 56px !important; margin-bottom: 0 !important; transform: none !important; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } /* Memaksa input bisa diklik dan diketik di semua HP */ input.pro-input, textarea.pro-input, .ss-custom-select select { pointer-events: auto !important; -webkit-user-select: text !important; -khtml-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; touch-action: manipulation !important; position: relative; z-index: 5 !important; } input.pro-input { padding: 0 2rem !important; line-height: normal !important; font-size: 1.5rem !important; color: #ffffff !important; width: 100% !important; display: block; } /* Custom Select Dropdown */ .ss-custom-select { padding: 0 !important; position: relative; display: block; width: 100% !important; } .ss-custom-select::after { top: 50% !important; transform: translateY(-50%) !important; margin-top: 0 !important; pointer-events: none; z-index: 6; } .ss-custom-select select { box-sizing: border-box !important; height: 100% !important; width: 100% !important; line-height: normal !important; padding: 0 4rem 0 2rem !important; background: transparent !important; border: none !important; color: #ffffff !important; font-size: 1.5rem !important; margin: 0 !important; vertical-align: middle !important; appearance: none; -webkit-appearance: none; cursor: pointer; } /* Textarea */ textarea.pro-input { box-sizing: border-box !important; background: rgba(0, 0, 0, 0.4) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; color: #ffffff !important; font-size: 1.5rem !important; height: auto !important; min-height: 140px !important; padding: 1.6rem 2rem !important; line-height: 1.5 !important; resize: vertical; width: 100% !important; transform: none !important; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } /* =================================================================== * BOX UPLOAD FILE (.PDF) * =================================================================== */ .pro-upload-box { position: relative; box-sizing: border-box !important; background: rgba(0, 0, 0, 0.4) !important; border: 1px dashed rgba(255, 255, 255, 0.15) !important; border-radius: 8px !important; padding: 2.5rem 2rem !important; text-align: center; cursor: pointer; display: flex; justify-content: center; align-items: center; min-height: 110px; width: 100%; transform: none !important; transition: background 0.2s ease, border-color 0.2s ease !important; z-index: 1; } .pro-upload-box input[type="file"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0 !important; padding: 0 !important; z-index: 10 !important; /* Dibatasi hanya di dalam box-nya sendiri */ pointer-events: auto !important; } .upload-box-content { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; pointer-events: none; /* Klik langsung menembus ke input file */ z-index: 2; } .upload-icon { color: #9296a1; transition: color 0.2s ease; } .upload-text { font-size: 1.4rem; color: #ffffff; font-weight: 500; } .file-upload-info { font-size: 1.2rem; color: #555964; font-weight: 500; margin: 0 !important; } /* =================================================================== * STATE HOVER, FOCUS & AUTOFILL PROTECTION * =================================================================== */ input.pro-input:focus, input.pro-input:hover, textarea.pro-input:focus, textarea.pro-input:hover, .ss-custom-select:focus-within, .ss-custom-select:hover, .pro-upload-box:hover, .pro-upload-box:focus-within { border-color: rgba(255, 255, 255, 0.25) !important; background: rgba(0, 0, 0, 0.6) !important; transform: none !important; } input.pro-input:focus, textarea.pro-input:focus, .ss-custom-select:focus-within { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important; } .pro-upload-box:hover .upload-icon { color: #ffffff; } .pro-input::placeholder { color: #484b54; } /* Autofill Fix untuk Browser Chromium / Safari */ input.pro-input:-webkit-autofill, input.pro-input:-webkit-autofill:hover, input.pro-input:-webkit-autofill:focus { -webkit-text-fill-color: #ffffff !important; -webkit-box-shadow: 0 0 0px 1000px rgba(15, 15, 18, 1) inset !important; transition: background-color 5000s ease-in-out 0s; } /* =================================================================== * UTILITY FOOTER & SUBMIT BUTTON * =================================================================== */ .form-utility { display: flex; justify-content: space-between; align-items: center; margin-top: 3.5rem; border-top: 1px solid rgba(255, 255, 255, 0.04); padding-top: 3rem; position: relative; z-index: 1; } .pro-checkbox-label { display: flex; align-items: center; cursor: pointer; margin: 0; user-select: none; pointer-events: auto !important; } .pro-checkbox { margin-right: 1rem !important; margin-bottom: 0 !important; accent-color: #ffffff; width: 18px; height: 18px; cursor: pointer; } .checkbox-text { font-size: 1.4rem; color: #7b7e87; } .pro-submit-btn { background-color: #ffffff !important; color: #000000 !important; border: none !important; border-radius: 8px !important; padding: 1.6rem 3.5rem !important; font-weight: 600 !important; font-size: 1.4rem !important; display: inline-flex; align-items: center; gap: 1rem; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease !important; line-height: 1 !important; height: auto !important; pointer-events: auto !important; } .pro-submit-btn:hover { background-color: #e5e5e5 !important; } .pro-submit-btn:active { transform: scale(0.98); } /* =================================================================== * RESPONSIVE BREAKPOINTS * =================================================================== */ /* --- TABLET (max-width: 1024px) --- */ @media screen and (max-width: 1024px) { .s-contact__content-v3 { padding: 0 2rem; } .pro-form-container { padding: 4rem 3rem; } .form-row { gap: 2rem; } .block-title { font-size: 2.4rem; } } /* --- MOBILE (max-width: 768px) --- */ @media screen and (max-width: 768px) { .s-contact__content-v3 { padding: 0 1.2rem; margin-top: 2rem; } .pro-form-container { padding: 2.5rem 1.8rem; border-radius: 12px; } .form-block-header { margin-bottom: 2.5rem; padding-bottom: 1.5rem; } .block-title { font-size: 2rem; } .block-subtitle { font-size: 1.3rem; } .form-row { flex-direction: column !important; align-items: stretch !important; gap: 2rem !important; margin-bottom: 2rem !important; } .form-row .form-group { margin-bottom: 0 !important; } /* Font-size minimal 16px (1.6rem) MENCEGAH iPhone auto-zoom saat fokus */ input.pro-input, .ss-custom-select select, textarea.pro-input { font-size: 1.6rem !important; } input.pro-input, .ss-custom-select { height: 52px !important; } .form-utility { flex-direction: column; align-items: stretch; gap: 2rem; padding-top: 2rem; margin-top: 2.5rem; } .pro-checkbox-label { padding: 0.5rem 0; } .pro-submit-btn { width: 100%; justify-content: center; padding: 1.6rem !important; font-size: 1.5rem !important; } } /* =================================================================== * # FOOTER * * * ------------------------------------------------------------------- */ /* --- RECODE VSCO FOOTER (LOGI IMAGE & EXACT LAYOUT) --- */ .custom-vsco-footer { background-color: #000000 !important; color: #ffffff !important; padding: 80px 40px 40px 40px !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-sizing: border-box; width: 100% !important; clear: both; } .custom-vsco-footer *, .custom-vsco-footer *:before, .custom-vsco-footer *:after { box-sizing: inherit; } /* Pembungkus Utama */ .footer-wrapper { max-width: 1200px; margin: 0 auto; width: 100%; } /* --- BARIS ATAS --- */ .footer-top-row { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; flex-wrap: wrap !important; gap: 40px; margin-bottom: 60px; } .footer-slogan-zone { flex: 1 1 350px; } .footer-big-slogan { font-size: 2.8rem !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -1px !important; color: #ffffff !important; margin: 0 !important; text-transform: uppercase; } /* Zona Kolom Link */ .footer-links-zone { display: flex !important; flex: 2 1 auto; justify-content: flex-start !important; gap: 80px; flex-wrap: wrap; } .footer-col { min-width: 140px; } .footer-col-title { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 2px !important; color: #ffffff !important; margin: 0 0 20px 0 !important; text-transform: uppercase; border: none !important; } .footer-static-text, .footer-list li a { font-size: 13px !important; color: #cccccc !important; display: inline-block !important; vertical-align: top !important; } .footer-list { list-style: none !important; padding: 0 !important; margin: 0 !important; /* Memastikan titik mulai teratas sama */ } .footer-list li { margin: 0 0 10px 0 !important; /* Hanya beri margin bawah untuk space antar item */ padding: 0 !important; line-height: 1.6 !important; /* Menyamakan tinggi baris teks teks biasa maupun link */ } .footer-list li a:hover { color: #ffffff !important; } /* Garis Pembatas */ .footer-divider-line { border: 0 !important; border-top: 1px solid #151515 !important; margin: 0 0 30px 0 !important; width: 100%; } /* --- BARIS BAWAH --- */ .footer-bottom-row { display: flex !important; justify-content: space-between !important; /* Dorong tombol kencang ke kanan */ align-items: center !important; flex-wrap: wrap !important; gap: 24px; } /* Kiri Bawah: Logo Gambar + Teks */ .footer-meta-left { display: flex !important; align-items: center !important; /* Memaksa logo dan teks sejajar lurus di tengah secara vertikal */ align-content: center !important; gap: 20px !important; /* Jarak horizontal antara logo dan teks */ flex-wrap: wrap !important; } .footer-logo-img { height: 32px !important; /* Sesuaikan tinggi logo Anda agar proporsional */ width: auto !important; display: block !important; /* Mengubah ke block agar tidak ada ghost margin/space bawaan inline di bawahnya */ margin: 0 !important; padding: 0 !important; } .footer-copyright-text { font-size: 13px !important; color: #555555 !important; line-height: 1 !important; /* Menghilangkan extra space dari line-height bawaan tema */ display: inline-block !important; margin: 0 !important; padding: 0 !important; } /* Kanan Bawah: Tombol Pill */ .footer-pills-right { display: flex !important; gap: 12px !important; justify-content: flex-end !important; } /* --- RECODE KHUSUS RESPONSIF BREAKPOINTS (COMPACT GAP) --- */ @media (max-width: 900px) { .custom-vsco-footer { padding: 40px 30px 30px 30px !important; /* Memangkas padding dalam footer */ } .footer-top-row { flex-direction: column !important; gap: 20px !important; /* Memotong setengah gap antar baris utama */ margin-bottom: 30px !important; /* Mengurangi jarak ke garis pembatas */ } .footer-slogan-zone { flex: none !important; width: 100% !important; margin-bottom: 10px !important; /* Jarak rapat dari slogan ke menu di bawahnya */ } .footer-big-slogan { font-size: 2.2rem !important; /* Menyesuaikan ukuran teks di tablet */ } .footer-links-zone { gap: 30px !important; /* Memperdekat jarak antar kolom COMPANY, FOLLOW US, dll */ width: 100% !important; justify-content: flex-start !important; } .footer-bottom-row { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; } .footer-pills-right { justify-content: flex-start !important; width: 100% !important; gap: 12px !important; } } @media (max-width: 500px) { .custom-vsco-footer { padding: 35px 20px 25px 20px !important; } .footer-top-row { gap: 15px !important; margin-bottom: 25px !important; } .footer-slogan-zone { margin-bottom: 5px !important; /* Gap super minimal khusus layar HP */ } .footer-big-slogan { font-size: 1.8rem !important; /* Ukuran teks di HP agar tidak terlalu memakan space */ } .footer-links-zone { flex-direction: column !important; gap: 20px !important; /* Jarak vertikal antar kolom menu dibuat rapat */ } .footer-col-title { margin: 0 0 10px 0 !important; /* Memangkas jarak judul menu ke isi link-nya */ } .footer-meta-left { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } } /* ------------------------------------------------------------------- MODIFICATION SECTION ALL MODIFIED HERE KODE !!!!! * ------------------------------------------------------------------- */ /* section Motivation */ .s-motivation { padding-top : var(--vspace-5); padding-bottom : var(--vspace-4); } .s-works, .s-contact, .custom-cr-container, .swiper-container, .pro-form-container, .pro-form-container form, .pro-form-container input, .pro-form-container textarea, .pro-form-container button { position: relative; z-index: 10 !important; pointer-events: auto !important; /* Menjamin elemen dapat menerima touch/click event */ } /* ========================================== CONTAINER UTAMA (DESKTOP & HP) ========================================== */ .intro-about__buttons { display: flex !important; justify-content: center !important; gap: 12px !important; margin-top: 30px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; flex-wrap: wrap !important; /* Izinkan membungkus */ } /* ========================================== BASE STYLE BUTTON (DESKTOP) Sengaja dibuat sangat spesifik agar tidak didepak CSS lain ========================================== */ .intro-about__buttons button.btn-custom-premium { font-family: inherit !important; font-weight: 700 !important; text-transform: uppercase !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Paksa bulat sempurna */ border-radius: 100px !important; cursor: pointer !important; outline: none !important; text-decoration: none !important; transition: all 0.3s ease-in-out !important; box-sizing: border-box !important; /* Ukuran Desktop */ height: 44px !important; padding: 0 24px !important; font-size: 11px !important; letter-spacing: 1px !important; white-space: nowrap !important; } /* --- TOMBOL 1: Contact Us (Glassmorphism) --- */ .intro-about__buttons button.btn-glass { background: rgba(255, 255, 255, 0.05) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; } .intro-about__buttons button.btn-glass:hover { background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 6px 15px rgba(255, 255, 255, 0.15) !important; } /* --- TOMBOL 2: Download Profile (Gradasi Silver-Putih) --- */ .intro-about__buttons button.btn-solid { background: linear-gradient(135deg, #8a8a8a 0%, #e0e0e0 50%, #ffffff 100%) !important; color: #000000 !important; border: none !important; box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1) !important; } .intro-about__buttons button.btn-solid:hover { background: linear-gradient(135deg, #a3a3a3 0%, #f5f5f5 50%, #ffffff 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(255, 255, 255, 0.2) !important; color: #000000 !important; } /* ========================================== RESPONSIVE UNTUK HP & TABLET (DI BAWAH 768PX) ========================================== */ @media screen and (max-width: 768px) { .intro-about__buttons { flex-direction: column !important; /* Susun vertikal ke bawah */ align-items: center !important; gap: 12px !important; padding: 0 15px !important; /* Jarak aman kanan-kiri agar tidak menabrak border biru */ } .intro-about__buttons button.btn-custom-premium { width: 100% !important; /* Lebar tombol mengikuti batas container */ max-width: 100% !important; /* KUNCI UTAMA: Agar teks panjang tidak memaksa tombol meluber keluar */ white-space: normal !important; text-align: center !important; line-height: 1.3 !important; /* Tinggi otomatis agar muat saat teks menjadi 2 baris */ height: auto !important; min-height: 42px !important; padding: 8px 16px !important; font-size: 10px !important; letter-spacing: 0.8px !important; border-radius: 100px !important; /* Amankan border-radius di mobile */ } } /* =================================================================== * # FOOTER * * * ------------------------------------------------------------------- */ /* --- RECODE VSCO FOOTER (LOGI IMAGE & EXACT LAYOUT) --- */ .custom-vsco-footer { background-color: #000000 !important; color: #ffffff !important; padding: 80px 40px 40px 40px !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-sizing: border-box; width: 100% !important; clear: both; } .custom-vsco-footer *, .custom-vsco-footer *:before, .custom-vsco-footer *:after { box-sizing: inherit; } /* Pembungkus Utama */ .footer-wrapper { max-width: 1200px; margin: 0 auto; width: 100%; } /* --- BARIS ATAS --- */ .footer-top-row { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; flex-wrap: wrap !important; gap: 40px; margin-bottom: 60px; } .footer-slogan-zone { flex: 1 1 350px; } .footer-big-slogan { font-size: 2.8rem !important; font-weight: 700 !important; line-height: 1.1 !important; letter-spacing: -1px !important; color: #ffffff !important; margin: 0 !important; text-transform: uppercase; } /* Zona Kolom Link */ .footer-links-zone { display: flex !important; flex: 2 1 auto; justify-content: flex-start !important; gap: 80px; flex-wrap: wrap; } .footer-col { min-width: 140px; } .footer-col-title { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 2px !important; color: #ffffff !important; margin: 0 0 20px 0 !important; text-transform: uppercase; border: none !important; } .footer-static-text, .footer-list li a { font-size: 13px !important; color: #cccccc !important; display: inline-block !important; vertical-align: top !important; } .footer-list { list-style: none !important; padding: 0 !important; margin: 0 !important; /* Memastikan titik mulai teratas sama */ } .footer-list li { margin: 0 0 10px 0 !important; /* Hanya beri margin bawah untuk space antar item */ padding: 0 !important; line-height: 1.6 !important; /* Menyamakan tinggi baris teks teks biasa maupun link */ } .footer-list li a:hover { color: #ffffff !important; } /* Garis Pembatas */ .footer-divider-line { border: 0 !important; border-top: 1px solid #151515 !important; margin: 0 0 30px 0 !important; width: 100%; } /* --- BARIS BAWAH --- */ .footer-bottom-row { display: flex !important; justify-content: space-between !important; /* Dorong tombol kencang ke kanan */ align-items: center !important; flex-wrap: wrap !important; gap: 24px; } /* Kiri Bawah: Logo Gambar + Teks */ .footer-meta-left { display: flex !important; align-items: center !important; /* Memaksa logo dan teks sejajar lurus di tengah secara vertikal */ align-content: center !important; gap: 20px !important; /* Jarak horizontal antara logo dan teks */ flex-wrap: wrap !important; } .footer-logo-img { height: 32px !important; /* Sesuaikan tinggi logo Anda agar proporsional */ width: auto !important; display: block !important; /* Mengubah ke block agar tidak ada ghost margin/space bawaan inline di bawahnya */ margin: 0 !important; padding: 0 !important; } .footer-copyright-text { font-size: 13px !important; color: #555555 !important; line-height: 1 !important; /* Menghilangkan extra space dari line-height bawaan tema */ display: inline-block !important; margin: 0 !important; padding: 0 !important; } /* Kanan Bawah: Tombol Pill */ .footer-pills-right { display: flex !important; gap: 12px !important; justify-content: flex-end !important; } /* --- RECODE KHUSUS RESPONSIF BREAKPOINTS (COMPACT GAP) --- */ @media (max-width: 900px) { .custom-vsco-footer { padding: 40px 30px 30px 30px !important; /* Memangkas padding dalam footer */ } .footer-top-row { flex-direction: column !important; gap: 20px !important; /* Memotong setengah gap antar baris utama */ margin-bottom: 30px !important; /* Mengurangi jarak ke garis pembatas */ } .footer-slogan-zone { flex: none !important; width: 100% !important; margin-bottom: 10px !important; /* Jarak rapat dari slogan ke menu di bawahnya */ } .footer-big-slogan { font-size: 2.2rem !important; /* Menyesuaikan ukuran teks di tablet */ } .footer-links-zone { gap: 30px !important; /* Memperdekat jarak antar kolom COMPANY, FOLLOW US, dll */ width: 100% !important; justify-content: flex-start !important; } .footer-bottom-row { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; } .footer-pills-right { justify-content: flex-start !important; width: 100% !important; gap: 12px !important; } } @media (max-width: 500px) { .custom-vsco-footer { padding: 35px 20px 25px 20px !important; } .footer-top-row { gap: 15px !important; margin-bottom: 25px !important; } .footer-slogan-zone { margin-bottom: 5px !important; /* Gap super minimal khusus layar HP */ } .footer-big-slogan { font-size: 1.8rem !important; /* Ukuran teks di HP agar tidak terlalu memakan space */ } .footer-links-zone { flex-direction: column !important; gap: 20px !important; /* Jarak vertikal antar kolom menu dibuat rapat */ } .footer-col-title { margin: 0 0 10px 0 !important; /* Memangkas jarak judul menu ke isi link-nya */ } .footer-meta-left { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } } /* ------------------------------------------------------------------- MODIFICATION SECTION ALL MODIFIED HERE KODE !!!!! * ------------------------------------------------------------------- */ /* section about */ .s-about { padding-top : var(--vspace-5); padding-bottom : var(--vspace-4); background : linear-gradient( 180deg, #000000 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 100% ); display : flow-root; position : relative; z-index : 1; } /* section Motivation */ .s-motivation { padding-top : var(--vspace-5); padding-bottom : var(--vspace-4);rgb(0, 23, 44) } .s-works, .s-contact, .custom-cr-container, .swiper-container, .pro-form-container, .pro-form-container form, .pro-form-container input, .pro-form-container textarea, .pro-form-container button { position: relative; z-index: 10 !important; pointer-events: auto !important; /* Menjamin elemen dapat menerima touch/click event */ } /* ========================================== CONTAINER UTAMA (DESKTOP & HP) ========================================== */ .intro-about__buttons { display: flex !important; justify-content: center !important; gap: 12px !important; margin-top: 30px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; flex-wrap: wrap !important; /* Izinkan membungkus */ } /* ========================================== BASE STYLE BUTTON (DESKTOP) Sengaja dibuat sangat spesifik agar tidak didepak CSS lain ========================================== */ .intro-about__buttons button.btn-custom-premium { font-family: inherit !important; font-weight: 700 !important; text-transform: uppercase !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Paksa bulat sempurna */ border-radius: 100px !important; cursor: pointer !important; outline: none !important; text-decoration: none !important; transition: all 0.3s ease-in-out !important; box-sizing: border-box !important; /* Ukuran Desktop */ height: 44px !important; padding: 0 24px !important; font-size: 11px !important; letter-spacing: 1px !important; white-space: nowrap !important; } /* --- TOMBOL 1: Contact Us (Glassmorphism) --- */ .intro-about__buttons button.btn-glass { background: rgba(255, 255, 255, 0.05) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; } .intro-about__buttons button.btn-glass:hover { background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 6px 15px rgba(255, 255, 255, 0.15) !important; } /* --- TOMBOL 2: Download Profile (Gradasi Silver-Putih) --- */ .intro-about__buttons button.btn-solid { background: linear-gradient(135deg, #8a8a8a 0%, #e0e0e0 50%, #ffffff 100%) !important; color: #000000 !important; border: none !important; box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1) !important; } .intro-about__buttons button.btn-solid:hover { background: linear-gradient(135deg, #a3a3a3 0%, #f5f5f5 50%, #ffffff 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(255, 255, 255, 0.2) !important; color: #000000 !important; } /* ========================================== RESPONSIVE UNTUK HP & TABLET (DI BAWAH 768PX) ========================================== */ @media screen and (max-width: 768px) { .intro-about__buttons { flex-direction: column !important; /* Susun vertikal ke bawah */ align-items: center !important; gap: 12px !important; padding: 0 15px !important; /* Jarak aman kanan-kiri agar tidak menabrak border biru */ } .intro-about__buttons button.btn-custom-premium { width: 100% !important; /* Lebar tombol mengikuti batas container */ max-width: 100% !important; /* KUNCI UTAMA: Agar teks panjang tidak memaksa tombol meluber keluar */ white-space: normal !important; text-align: center !important; line-height: 1.3 !important; /* Tinggi otomatis agar muat saat teks menjadi 2 baris */ height: auto !important; min-height: 42px !important; padding: 8px 16px !important; font-size: 10px !important; letter-spacing: 0.8px !important; border-radius: 100px !important; /* Amankan border-radius di mobile */ } } /* =================================================================== * # FAQ * ------------------------------------------------------------------- */ .s-faq { position: relative; z-index: 999; padding-top: var(--vspace-4); padding-bottom: var(--vspace-4); } .faq-container { width: 100%; max-width: 950px; margin: 0 auto; } .faq-item { border : 1px solid rgba(255, 255, 255, 0.08); background-color : var(--color-gray-11); margin-bottom : -1px; overflow : hidden; transition : background-color 0.25s ease, border-color 0.25s ease; } .faq-question { display : flex; align-items : center; justify-content : space-between; gap : 20px; padding : 22px 28px; cursor : pointer; user-select : none; transition : background-color 0.2s ease; } .faq-item:hover, .faq-item.active { border-color : rgba(10, 95, 255, 0.4); } .faq-item:hover .faq-question, .faq-item.active .faq-question { background-color : rgba(10, 95, 255, 0.08); } .faq-question span.q-text { font-family : var(--font-2); font-size : 17px; font-weight : 600; color : var(--color-white); } .faq-item .chevron { width : 16px; height : 16px; flex-shrink: 0; stroke : var(--color-gray-4); transition : transform 0.25s ease, stroke 0.25s ease; } .faq-item.active .chevron { stroke : var(--color-2); transform : rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; padding: 0 28px; font-family: var(--font-1, 'Inter', sans-serif); font-size: 15px; line-height: 1.75; color: var(--color-gray-4, #9ca3af); /* KEMBALI KE RATA KIRI */ text-align: left; /* Font rendering tajam & bersih */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Animasi pergeseran dan fade-in */ opacity: 0; transform: translateY(-8px); transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease-in-out, transform 0.3s ease-in-out; } /* 2. Active State (Saat FAQ Terbuka) */ .faq-item.active .faq-answer { max-height: 500px; /* DITAMBAHKAN PADDING ATAS (16px) AGAR TEKS AGAK TURUN */ padding: 16px 28px 22px 28px; opacity: 1; transform: translateY(0); } /* 3. Responsive Display (HP <= 600px) */ @media screen and (max-width: 600px) { .faq-question { padding: 16px 18px; } .faq-question span.q-text { font-size: 15px; line-height: 1.4; } .faq-answer { padding: 0 18px; font-size: 14px; line-height: 1.65; text-align: left; } .faq-item.active .faq-answer { /* Penyesuaian padding atas untuk tampilan HP */ padding: 12px 18px 18px 18px; } } /* ===================================================================== * # NEURALITECH — CYBER-TECH PREMIUM OVERHAUL v2.0 * Added on top of the base stylesheet. Nothing above this line was * removed — every rule below layers on the existing architecture, * class names, assets and JS hooks (Anime.js / PhotoSwipe / * basicLightbox / MoveTo / Swiper) exactly as already wired up. * * TOC: * 1. Tokens (glass / glow / motion) * 2. Global surface (scrollbar, selection, ambient bg, focus) * 3. Header — glassmorphism * 4. Buttons — 3D premium interaction * 5. Intro — 3D framed panel + about card * 6. Stats — floating glass tiles * 7. Services — glass cards * 8. Works / portfolio slider frame + clients strip * 9. Testimonials marquee (new component styling) * 10. FAQ — glass accordion * 11. Contact — form shell polish * 12. Footer — glass divider + pills * 13. Section headers / typography glow * 14. Responsive fluidity pass * 15. Reduced motion / accessibility * ===================================================================== */ /* --------------------------------------------------------------------- * 1. TOKENS * ------------------------------------------------------------------- */ :root { --glass-bg : rgba(255, 255, 255, 0.055); --glass-bg-strong : rgba(255, 255, 255, 0.09); --glass-border : rgba(255, 255, 255, 0.08); --glass-border-cyan : rgba(0, 217, 255, 0.35); --glass-blur : blur(16px); --glow-blue : rgba(10, 95, 255, 0.28); --glow-cyan : rgba(0, 217, 255, 0.28); --shadow-depth-1 : 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(10, 95, 255, 0.12); --shadow-depth-2 : 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(0, 217, 255, 0.16); --ease-premium : cubic-bezier(0.16, 1, 0.3, 1); --tilt : perspective(1200px) rotateX(4deg) rotateY(-4deg) translateY(-6px) translateZ(0); } /* --------------------------------------------------------------------- * 2. GLOBAL SURFACE * ------------------------------------------------------------------- */ ::selection { background : var(--color-2); color : #001018; } ::-webkit-scrollbar { width : 10px; height : 10px; } ::-webkit-scrollbar-track { background : #000000; } ::-webkit-scrollbar-thumb { background : linear-gradient(180deg, var(--color-1), var(--color-2)); border-radius : 10px; border : 2px solid #000; } html { scrollbar-color : var(--color-1) #000; scrollbar-width : thin; } a:focus-visible, button:focus-visible, .smoothscroll:focus-visible { outline : 2px solid var(--color-2); outline-offset : 3px; border-radius : 4px; } /* fixed ambient glow layers sitting behind the whole page — pure CSS, * no markup required, does not affect document flow/height */ body { position : relative; } body::before, body::after { content : ""; position : fixed; z-index : -3; pointer-events : none; border-radius : 50%; filter : blur(120px); opacity : .55; } body::before { width : 60vw; height : 60vw; top : -20vw; left : -15vw; background : radial-gradient(circle, rgba(10, 96, 255, 0.733), transparent 70%); } body::after { width : 55vw; height : 55vw; bottom : -25vw; right : -15vw; background : radial-gradient(circle, rgba(0, 217, 255, 0.727), transparent 70%); } .s-pagewrap { position : relative; background-image : linear-gradient(#ffffff11 1px, transparent 1px), linear-gradient(90deg, #ffffff11 1px, transparent 1px); background-size : 64px 64px; background-position : center top; } /* --------------------------------------------------------------------- * 4. BUTTONS — 3D PREMIUM INTERACTION * ------------------------------------------------------------------- */ .btn-custom-premium, .vsco-btn-pill { transform-style : preserve-3d; will-change : transform; } /* Efek kemiringan 3D Premium saat di-hover */ .btn-custom-premium:hover, .vsco-btn-pill:hover { transform : perspective(600px) translateY(-3px) translateZ(8px) rotateX(6deg); } /* =================================================================== * # CAPSULE BUTTON COMPONENTS (BASE STRUCTURE) * ------------------------------------------------------------------- */ .vsco-btn-pill { display: inline-flex !important; align-items: center; justify-content: center; padding: 0 36px !important; /* Disesuaikan lebar padding agar proporsional */ border-radius: 50px !important; font-family: var(--font-1, "Inter", sans-serif); font-size: 11px !important; font-weight: 700 !important; /* Tebal disesuaikan untuk uppercase premium */ letter-spacing: 1.5px !important; /* Meningkatkan rongga teks kapital */ text-decoration: none !important; text-transform: uppercase; height: 46px; /* Ditingkatkan sedikit dari 38px agar lebih elegan & premium */ box-sizing: border-box; /* Sinkronisasi Efek Transisi Premium Anda */ backdrop-filter : blur(8px); -webkit-backdrop-filter : blur(8px); transition : transform .35s var(--ease-premium, cubic-bezier(0.25, 1, 0.5, 1)), box-shadow .35s var(--ease-premium, cubic-bezier(0.25, 1, 0.5, 1)), background .35s ease, border-color .35s ease, color .35s ease; } /* =================================================================== * # VARIANT 1: CONTACT US (Outline/Glass Variant) * ------------------------------------------------------------------- */ .btn-outline-vsco { border : 1px solid rgba(255, 255, 255, 0.15) !important; background : rgba(22, 25, 30, 0.7) !important; /* Background gelap semi-transparan */ color : #ffffff !important; } .btn-outline-vsco:hover { border-color: rgba(0, 217, 255, 0.5) !important; /* Berubah ke cyan saat hover */ box-shadow : 0 12px 30px var(--glow-cyan, rgba(0, 217, 255, 0.25)) !important; } /* =================================================================== * # VARIANT 2: DOWNLOAD COMPANY PROFILE (Solid Premium Gradient) * ------------------------------------------------------------------- */ .btn-solid-vsco { border : none !important; /* Menghilangkan border 333 bawaan agar gradasi bersih */ background : linear-gradient(90deg, #9ca0a6 0%, #e2e4e7 45%, #ffffff 100%) !important; color : #000000 !important; /* Tulisan hitam tegas */ box-shadow : var(--shadow-depth-1, 0 8px 24px rgba(0, 0, 0, 0.35)); } .btn-solid-vsco:hover { /* Gradasi sedikit lebih terang saat di-hover */ background : linear-gradient(90deg, #b0b4b9 0%, #f0f2f5 50%, #ffffff 100%) !important; box-shadow : 0 16px 36px rgba(10, 95, 255, 0.35), 0 0 25px rgba(255, 255, 255, 0.15) !important; } /* --------------------------------------------------------------------- * 5. INTRO — 3D FRAMED PANEL * ------------------------------------------------------------------- */ .s-intro__top-block { perspective : 1400px; } .s-intro__bg { border : 1px solid var(--glass-border); box-shadow : var(--shadow-depth-2), inset 0 0 0 1px rgba(255, 255, 255, 0.03); transform : rotateX(1.2deg); transform-origin : bottom center; transition : transform .6s var(--ease-premium), box-shadow .6s var(--ease-premium); } .s-intro__bg:hover { transform : rotateX(0deg) translateY(-4px); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 50px var(--glow-blue); } .s-intro__about { backdrop-filter : var(--glass-blur); -webkit-backdrop-filter : var(--glass-blur); box-shadow : var(--shadow-depth-1); border : 1px solid var(--glass-border); } .intro-about__buttons { display : flex; flex-wrap : wrap; gap : 1.2rem; justify-content : center; margin-top : var(--vspace-1); } .intro-about__buttons .btn-custom-premium { margin-right : 0; } /* --------------------------------------------------------------------- * 6. STATS — FLOATING GLASS TILES * ------------------------------------------------------------------- */ .about-stats.stats { perspective : 1200px; } /* --------------------------------------------------------------------- * 7. SERVICES — GLASS CARDS * ------------------------------------------------------------------- */ .service-item { background : var(--glass-bg); border : 1px solid var(--glass-border); border-radius : 14px; padding : var(--vspace-1_25); backdrop-filter : blur(10px); -webkit-backdrop-filter : blur(10px); box-shadow : 0 14px 30px rgba(0, 0, 0, 0.35); transition : transform .45s var(--ease-premium), box-shadow .45s var(--ease-premium), border-color .45s ease, background .45s ease; } .service-item:hover { transform : perspective(1200px) rotateX(3deg) rotateY(-2deg) translateY(-6px); box-shadow : var(--shadow-depth-2); border-color : var(--glass-border-cyan); background : var(--glass-bg-strong); } /* --------------------------------------------------------------------- * 8. WORKS — CLIENTS STRIP * (the .custom-cr-section / .custom-cr-container / .swiper-slide sizing * and the whole testimonials marquee component are the site's own * authored rules — migrated verbatim from index.php's inline