@charset "UTF-8"; /* =================================================================== * Zoon Main Stylesheet * Template Ver. 2.0.0 * 09-26-2022 * ------------------------------------------------------------------ * * 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 * ## page loaded * # FORM * ## style placeholder text * ## change autocomplete styles in Chrome * # BUTTONS * # TABLE * # COMPONENTS * ## pagination * ## alert box * ## skillbars * ## stats tabs * # PROJECT-WIDE SHARED STYLES * ## element animation classes * ## media classes * # PAGE WRAP * # SITE HEADER * ## logo * ## header social * # INTRO * ## intro background * ## intro content * ## intro sep * ## intro counter * ## subscription form * ## intro scroll down * ## intro transitions * # ABOUT * ## section header * ## list block * ## cta * # VIDEO * # FOOTER * ## footer social * ## copyright * ## go top * * ------------------------------------------------------------------ */ /* =================================================================== * # SETTINGS * * * ------------------------------------------------------------------- */ /* ------------------------------------------------------------------- * ## fonts * ------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"); :root { --font-1 : "Inter", sans-serif; --font-2 : Serif; /* monospace */ --font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace; } /* ------------------------------------------------------------------- * ## colors * ------------------------------------------------------------------- */ :root { /* color-1(#029356) * color-2(#03312E) * color-3(#DDDBCB) */ --color-1 : rgb(238, 96, 40); --color-2 : hsla(176, 88%, 10%, 1); --color-3 : hsla(53, 21%, 83%, 1); /* theme color variations */ --color-1-lighter : hsla(155, 97%, 49%, 1); --color-1-light : hsla(155, 97%, 39%, 1); --color-1-dark : hsla(155, 97%, 17%, 1); --color-1-darker : hsla(155, 97%, 9%, 1); --color-2-lighter : hsla(176, 88%, 20%, 1); --color-2-light : hsla(176, 88%, 15%, 1); --color-2-dark : hsla(176, 88%, 7%, 1); --color-2-darker : hsla(176, 88%, 1%, 1); /* 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 : #101010; --color-gray-18 : #1f2020; --color-gray-17 : #2f302f; --color-gray-16 : #3f403f; --color-gray-15 : #4f504f; --color-gray-14 : #5e5f5f; --color-gray-13 : #6e6f6f; --color-gray-12 : #7e7f7e; --color-gray-11 : #8d8f8e; --color-gray-10 : #9d9f9e; --color-gray-9 : #a7a9a8; --color-gray-8 : #b1b2b1; --color-gray-7 : #babcbb; --color-gray-6 : #c4c5c5; --color-gray-5 : #cecfcf; --color-gray-4 : #d8d9d8; --color-gray-3 : #e2e2e2; --color-gray-2 : #ebecec; --color-gray-1 : #f5f5f5; --color-white : #ffffff; /* text */ --color-text : var(--color-gray-18); --color-text-dark : var(--color-black); --color-text-light : var(--color-gray-12); --color-placeholder : var(--color-gray-12); /* link */ --color-link : var(--color-1); --color-link-hover : var(--color-1-dark); --color-link-active : var(--color-1-dark); /* buttons */ --color-btn : var(--color-gray-3); --color-btn-text : var(--color-text); --color-btn-hover : var(--color-gray-4); --color-btn-hover-text : var(--color-text); --color-btn-primary : var(--color-1); --color-btn-primary-text : var(--color-white); --color-btn-primary-hover : var(--color-1-dark); --color-btn-primary-hover-text : var(--color-white); --color-btn-stroke : var(--color-text-dark); --color-btn-stroke-text : var(--color-text-dark); --color-btn-stroke-hover : var(--color-1-dark); --color-btn-stroke-hover-text : var(--color-white); /* preloader */ --color-preloader-bg : var(--color-gray-19); --color-loader : var(--color-white); --color-loader-light : var(--color-gray-10); /* others */ --color-body : #FFFFFF; --color-border : rgba(0, 0, 0, .08); --border-radius : 5px; } /* ------------------------------------------------------------------- * ## spacing and typescale * ------------------------------------------------------------------- */ :root { /* spacing * base font size: 19px * vertical space unit : 34px */ --base-size : 62.5%; --multiplier : 1; --base-font-size : calc(1.9rem * var(--multiplier)); --space : calc(3.4rem * 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: 19px * ------------------------------------------------------- * * --text-display-3 = (81.70px) * --text-display-2 = (68.08px) * --text-display-1 = (56.73px) * --text-xxxl = (47.28px) * --text-xxl = (39.40px) * --text-xl = (32.83px) * --text-lg = (27.36px) * --text-md = (22.80px) * --text-size = (19.00px) BASE * --text-sm = (15.83px) * --text-xs = (13.19px) * * --------------------------------------------------------- */ --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; -webkit-text-decoration: underline dotted; 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 : var(--color-body); -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 : min(92%, 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.3333333333%; } .lg-2 { flex : none; width: 16.6666666667%; } .lg-3 { flex : none; width: 25%; } .lg-4 { flex : none; width: 33.3333333333%; } .lg-5 { flex : none; width: 41.6666666667%; } .lg-6 { flex : none; width: 50%; } .lg-7 { flex : none; width: 58.3333333333%; } .lg-8 { flex : none; width: 66.6666666667%; } .lg-9 { flex : none; width: 75%; } .lg-10 { flex : none; width: 83.3333333333%; } .lg-11 { flex : none; width: 91.6666666667%; } .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.3333333333%; } .md-2 { flex : none; width: 16.6666666667%; } .md-3 { flex : none; width: 25%; } .md-4 { flex : none; width: 33.3333333333%; } .md-5 { flex : none; width: 41.6666666667%; } .md-6 { flex : none; width: 50%; } .md-7 { flex : none; width: 58.3333333333%; } .md-8 { flex : none; width: 66.6666666667%; } .md-9 { flex : none; width: 75%; } .md-10 { flex : none; width: 83.3333333333%; } .md-11 { flex : none; width: 91.6666666667%; } .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.3333333333%; } .tab-2 { flex : none; width: 16.6666666667%; } .tab-3 { flex : none; width: 25%; } .tab-4 { flex : none; width: 33.3333333333%; } .tab-5 { flex : none; width: 41.6666666667%; } .tab-6 { flex : none; width: 50%; } .tab-7 { flex : none; width: 58.3333333333%; } .tab-8 { flex : none; width: 66.6666666667%; } .tab-9 { flex : none; width: 75%; } .tab-10 { flex : none; width: 83.3333333333%; } .tab-11 { flex : none; width: 91.6666666667%; } .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.3333333333%; } .mob-2 { flex : none; width: 16.6666666667%; } .mob-3 { flex : none; width: 25%; } .mob-4 { flex : none; width: 33.3333333333%; } .mob-5 { flex : none; width: 41.6666666667%; } .mob-6 { flex : none; width: 50%; } .mob-7 { flex : none; width: 58.3333333333%; } .mob-8 { flex : none; width: 66.6666666667%; } .mob-9 { flex : none; width: 75%; } .mob-10 { flex : none; width: 83.3333333333%; } .mob-11 { flex : none; width: 91.6666666667%; } .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: 900px) { .stack-on-900, .block-stack-on-900>.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-screen-reader-text { clip : rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path : inset(50%); height : 1px; width : 1px; margin : -1px; overflow : hidden; padding : 0; border : 0; position : absolute; word-wrap : normal !important; } .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: 19px * ------------------------------------------------------------------- * * --text-display-3 = (81.70px) * --text-display-2 = (68.08px) * --text-display-1 = (56.73px) * --text-xxxl = (47.28px) * --text-xxl = (39.40px) * --text-xl = (32.83px) * --text-lg = (27.36px) * --text-md = (22.80px) * --text-size = (19.00px) BASE * --text-sm = (15.83px) * --text-xs = (13.19px) * * -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- * ## 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-link); transition: all 0.3s ease-in-out; } a:focus, a:hover, a:active { color: var(--color-link-hover); } a:hover, a:active { outline: 0; } /* headings */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family : var(--font-1); font-weight : 500; 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-1); margin-bottom: var(--vspace-0_5); } h5, .h5, h6, .h6 { margin-top : var(--vspace-1_75); margin-bottom: var(--vspace-0_5); } h1, .h1 { font-size : var(--text-display-2); line-height : calc(2.25 * var(--space)); /* letter-spacing: -0.015em; */ } @media screen and (max-width: 500px) { h1, .h1 { font-size : var(--text-display-1); line-height: calc(1.875 * var(--space)); } } h2, .h2 { font-size : var(--text-xxl); line-height : var(--vspace-1_5); letter-spacing: -0.015em; } h3, .h3 { font-size : var(--text-xl); line-height: calc(1.125 * var(--space)); } 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-weight : 500; font-size : var(--text-sm); line-height : var(--vspace-0_75); text-transform: uppercase; letter-spacing: 0.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; color : var(--color-text-dark); } small { font-size : 80%; 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-dark); position : relative; } 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: "— "; } blockquote cite, blockquote cite a, blockquote cite a:visited { color : var(--color-text-light); border: none; } @media screen and (max-width: 500px) { blockquote { padding: var(--vspace-0_75) var(--vspace-0_75); } blockquote p { font-size : var(--text-md); line-height: var(--vspace-1); } } /* 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-2); overflow-x: auto; } code { font-size : var(--text-sm); line-height : 1.6rem; margin : 0 0.2rem; padding : calc((var(--vspace-1) - 1.6rem) / 2 - 0.1rem) 0.7rem; white-space : nowrap; background : var(--color-gray-2); border : 1px solid var(--color-gray-4); color : var(--color-text); 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: 0.1em; color : var(--color-text-dark); } abbr[title], dfn[title] { border-bottom : 1px dotted; cursor : help; text-decoration: none; } mark { background: var(--color-1-lighter); color : var(--color-text); } /* horizontal rule */ hr { border : solid var(--color-border); border-width: 0.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: 0.3em; } /* -------------------------------------------------------------------- * ## additional typography & helper classes * -------------------------------------------------------------------- */ .lead, .attention-getter { font-family: var(--font-1); font-weight: 300; font-size : calc(var(--text-size) * 1.2636); line-height: 1.8333; color : var(--color-text); } @media screen and (max-width: 800px) { .lead, .attention-getter { font-size: var(--text-md); } } @media screen and (max-width: 460px) { .lead, .attention-getter { font-size: 1.9rem; } } .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 : 700; 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: 0.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 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 : -0.9em; top : 11px; vertical-align: middle; } dt { margin: 0; color : var(--color-1); } dt strong { 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: * *
*
*
*
*
*
*
* * - loader class: * * * ------------------------------------------------------------------- */ #preloader { position : fixed; display : flex; flex-flow : row wrap; justify-content: center; align-items : center; background : var(--color-preloader-bg); z-index : 500; height : 100vh; width : 100%; opacity : 1; overflow : hidden; } .no-js #preloader { display: none; } #loader { position: relative; width : 4px; height : 4px; padding : 0; display : inline-block; } #loader>div { content : ""; background : var(--color-loader); width : 4px; height : 4px; position : absolute; top : 0; left : 0; border-radius: 50%; } #loader>div:nth-of-type(1) { left: 15px; } #loader>div:nth-of-type(3) { left: -15px; } /* dots jump */ .dots-jump>div { -webkit-animation : dots-jump 1.2s infinite ease; animation : dots-jump 1.2s infinite ease; -webkit-animation-delay: 0.2s; animation-delay : 0.2s; } .dots-jump>div:nth-of-type(1) { -webkit-animation-delay: 0.4s; animation-delay : 0.4s; } .dots-jump>div:nth-of-type(3) { -webkit-animation-delay: 0s; animation-delay : 0s; } @-webkit-keyframes dots-jump { 0% { top: 0; } 40% { top: -6px; } 80% { top: 0; } } @keyframes dots-jump { 0% { top: 0; } 40% { top: -6px; } 80% { top: 0; } } /* dots fade */ .dots-fade>div { -webkit-animation : dots-fade 1.6s infinite ease; animation : dots-fade 1.6s infinite ease; -webkit-animation-delay: 0.4s; animation-delay : 0.4s; } .dots-fade>div:nth-of-type(1) { -webkit-animation-delay: 0.8s; animation-delay : 0.8s; } .dots-fade>div:nth-of-type(3) { -webkit-animation-delay: 0s; animation-delay : 0s; } @-webkit-keyframes dots-fade { 0% { opacity: 1; } 40% { opacity: 0.2; } 80% { opacity: 1; } } @keyframes dots-fade { 0% { opacity: 1; } 40% { opacity: 0.2; } 80% { opacity: 1; } } /* dots pulse */ .dots-pulse>div { -webkit-animation : dots-pulse 1.2s infinite ease; animation : dots-pulse 1.2s infinite ease; -webkit-animation-delay: 0.2s; animation-delay : 0.2s; } .dots-pulse>div:nth-of-type(1) { -webkit-animation-delay: 0.4s; animation-delay : 0.4s; } .dots-pulse>div:nth-of-type(3) { -webkit-animation-delay: 0s; animation-delay : 0s; } @-webkit-keyframes dots-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 80% { transform: scale(1); } } @keyframes dots-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 80% { transform: scale(1); } } /* ------------------------------------------------------------------- * ## page loaded * ------------------------------------------------------------------- */ .ss-loaded #preloader { opacity : 0; visibility: hidden; transition: all 0.6s 0.9s ease-in-out; } .ss-loaded #preloader #loader { opacity : 0; transition: opacity 0.6s ease-in-out; } /* =================================================================== * # 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.7895); line-height : var(--input-line-height); max-width : 100%; background : transparent; border-bottom : 1px solid var(--color-text-light); transition : all 0.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 rgb(20, 20, 20); border-right : 1px solid rgb(20, 20, 20); 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 * ------------------------------------------------------------------- */ ::-moz-placeholder { /* Mozilla Firefox 19+ */ color : var(--color-placeholder); opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ 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); -webkit-transition : background-color 5000s ease-in-out 0s; 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 : 500; font-size : var(--text-sm); font-size : calc(var(--text-size) * 0.8947); height : var(--btn-height); /* line-height : calc(var(--btn-height) - 4px); */ 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 0.3s; border-radius : var(--border-radius); background-color : var(--color-btn); border : 2px 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 : 2px 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 : 2px 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; } /* =================================================================== * # 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 : 0 auto var(--vspace-1); 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 : 0.2rem 1.2rem; height : var(--pgn-num-height); margin : 0.2rem 0.2rem; color : var(--color-text-dark); border-radius: var(--border-radius); transition : all, 0.3s, ease-in-out; } .pgn__num:focus, .pgn__num:hover { background: var(--color-text-dark); color : var(--color-white); } .pgn .current, .pgn .current:focus, .pgn .current:hover { background: var(--color-text-dark); 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, 0.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: var(--color-text-dark); } .pgn__prev svg, .pgn__next svg { height : 2.4rem; width : 2.4rem; transition: all, 0.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 0.5s; } /* ------------------------------------------------------------------- * ## skillbars * ------------------------------------------------------------------- */ .skill-bars { list-style: none; margin : var(--vspace-2) 0 var(--vspace-1); } .skill-bars li { height : 0.4rem; background : var(--color-gray-5); width : 100%; margin-bottom: calc(var(--vspace-2) - 0.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); text-transform: uppercase; letter-spacing: 0.2em; font-size : var(--text-xs); line-height : var(--vspace-0_75); } .skill-bars li .progress { background: var(--color-text); 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-text); padding : var(--vspace-0_25); border-radius: 4px; position : absolute; right : 0; top : calc((var(--vspace-1) + 0.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-text, 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-dark); } .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); } .basicLightbox iframe { width : 880px; aspect-ratio: 16/9; } .body-text-sm { font-size : calc(var(--text-size) * 0.8947); line-height: calc(0.9412 * var(--space)); } .text-display-title { font-size : var(--text-xxl); line-height : 1.1844; letter-spacing: -0.015em; color : white; margin-top : 0; } /* ------------------------------------------------------------------- * ## element animation classes * ------------------------------------------------------------------- */ .ss-animate { transition-timing-function: cubic-bezier(0.28, 0.12, 0.22, 1); transition-duration : 0.8s; transition-delay : 0s; opacity : 0; } .ss-animate.animated { opacity: 1; } .ss-fade-up { transition-property: opacity, transform; transform : translate(0, 150px); } .ss-fade-up.animated { transform: translate(0, 0); } /* ------------------------------------------------------------------- * ## 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%; } /* ------------------------------------------------------------------- * responsive: * project-wide and shared styles * ------------------------------------------------------------------- */ @media screen and (max-width: 800px) { .text-display-title { font-size : var(--text-xl); line-height: calc(1.125 * var(--space)); } } /* =================================================================== * # PAGE WRAP * * * ------------------------------------------------------------------- */ .s-pagewrap { display : flex; flex-direction: column; min-height : 100%; overflow : hidden; position : relative; } /* =================================================================== * # SITE HEADER * * * ------------------------------------------------------------------- */ .s-header { --header-height : 94px; --logo-width : 102px; z-index : 100; width : 100%; background-color: transparent; position : absolute; top : var(--vspace-0_375); left : 0; } .s-header__inner { width : 97%; height: var(--header-height); } .s-header__block { z-index : 101; display : flex; align-items : center; justify-content: space-between; } /* -------------------------------------------------------------------- * ## logo * -------------------------------------------------------------------- */ .s-header__logo { z-index : 100; line-height: 1; transform : translate(0, -2px); } .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; } /* -------------------------------------------------------------------- * ## header social * -------------------------------------------------------------------- */ .s-header__social { display : flex; list-style : none; line-height: 1; margin : 0; } .s-header__social li { padding-left: 0; margin-right: 0.8rem; } .s-header__social li:last-child { margin-right: 0 } .s-header__social a { display: block; } .s-header__social svg { height: var(--vspace-0_75); width : var(--vspace-0_75); } .s-header__social svg path { fill: white; } /* ------------------------------------------------------------------- * responsive: * site-header * ------------------------------------------------------------------- */ @media screen and (max-width: 600px) { .s-header__inner { width: 100%; } .s-header__block { padding: 0; } } @media screen and (max-width: 500px) { .s-header { --logo-width: 68px; } .s-header__social li { margin-right: 0.6rem; } .s-header__social svg { height: var(--vspace-0_625); width : var(--vspace-0_625); } } @media screen and (max-width: 400px) { .s-header { --logo-width: 64px; } } /* =================================================================== * # INTRO * * * ------------------------------------------------------------------- */ .s-intro { --content-padding-top : 20vh; --content-padding-bottom: 0 !important; --content-sep-width : 900px; z-index : 2; background-color : black; width : 100%; height : 100vh; min-height : calc(20 * var(--space)); overflow : hidden; position : relative; } .s-intro__container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; /* Memungkinkan scrolling */ } /* -------------------------------------------------------------------- * ## intro background * -------------------------------------------------------------------- */ .s-intro__bg { position : fixed; top : 0; left : 0; width : 100%; height : 100%; z-index : -1; background-image : url(../images/BG.png); background-repeat : no-repeat; background-position: center; background-size : cover; will-change : transform; } .s-intro__bg::before, .s-intro__bg::after { content : ""; position : absolute; top : 0; left : 0; right : 0; bottom : 0; pointer-events: none; } /* About Section */ .s-initiator { /* min-height: 100vh; */ color: white; position: relative; z-index: 2; padding: 100px 0; } .s-about { margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 100px; /* min-height: 100vh; */ color: white; position: relative; z-index: 2; align-items: center; } .s-about__text { text-align: center; /* max-width: 1000px; */ margin: 0 auto; padding: 2rem; /* Beri jarak */ } .s-about__text h2 { color: var(--color-1); font-weight: 800; text-align: center; /* Pastikan semua elemen teks rata tengah */ margin-left: auto; margin-right: auto; } .s-about__text p { color: var(--color-white); font-size: calc(var(--text-xs) * 1.417); } .s-about__text h3, .s-about__text ul { color: white; } /* -------------------------------------------------------------------- * ## intro content * -------------------------------------------------------------------- */ .s-intro__content { --width-grid-max: var(--width-wide); z-index : 2; align-items : flex-start; height : 100%; /* min-height : 100vh; */ padding-bottom : 0 !important; margin-bottom: 0 !important; color : white; /* padding-top : var(--content-padding-top); */ /* padding-bottom : var(--content-padding-bottom); */ position : relative; } .s-intro__content-top { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; /* max-width: var(--content-sep-width); */ margin-right: auto; margin-left: auto; /* margin-bottom: var(--vspace-2_5); */ } .s-intro__content-top h1, .s-intro__content-top p { width: 100%; } @supports not (background-clip: text) { .s-intro__content-top P { color: var(--color-1) } } .s-intro__content-top h1 { font-weight: 900; font-size: calc(var(--text-display-1) * 1.4737); color: var(--color-white); margin-bottom: 10px; margin-top: 0; padding-top: 0; } .s-intro__content-top span { font-size: calc(var(--text-sm) * 1.3737); padding: 2px 15px; border-radius: 5px; background-image: linear-gradient(to top, #d44c02 30%, #e67a11 100%); } .s-intro__content-top p { font-weight: 500; font-size: calc(var(--text-xl) * 1.4737); background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; margin-top: 50px; line-height: 1.4; padding-bottom: 2px; position: relative; } .s-brand { padding: 50px 0; position: relative; z-index: 2; background: rgba(190, 186, 186, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); color: white; margin: 100px 0; } .brand-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 50px; margin: 0 auto; } .brand-container-2 { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 0 auto; } .brand-item { text-align: center; max-width: 250px; } .brand-item img { width: 150px; height: 100px; object-fit: contain; } /* ------------------------------------------------------------------- * ## intro sep * ------------------------------------------------------------------- */ .s-intro__content-sep { display : flex; align-items : center; justify-content: center; max-width : var(--content-sep-width); margin-right : auto; margin-left : auto; margin-top : var(--vspace-1_25); margin-bottom : var(--vspace-0_5); } .s-intro__content-sep span { display: inline-block; } .s-intro__content-sep span:first-child, .s-intro__content-sep span:last-child { flex : 1; height : 1px; background-color: rgba(255, 255, 255, 0.1); } .s-intro__content-sep span:nth-child(2) { font-weight : 400; font-size : calc(var(--text-size) * 0.6111); text-transform : uppercase; letter-spacing : 0.4em; background-color: rgba(0, 0, 0, 0.7); border : 1px solid rgba(255, 255, 255, 0.1); border-radius : 5px; padding : var(--vspace-0_125) var(--vspace-1); } /* -------------------------------------------------------------------- * ## intro counter * -------------------------------------------------------------------- */ .s-intro .counter { display : flex; flex-flow : row wrap; justify-content: center; } .s-intro .counter__time { justify-content: center; font-weight : 600; font-size : 15rem; text-align : center; color : white; margin-right : calc(1.125 * var(--space)); margin-left : calc(1.125 * var(--space)); margin-bottom : var(--vspace-0_5); } .s-intro .counter__time span { display : block; transition: all 0.3s ease-in-out; } .s-intro .counter__time span:first-child { letter-spacing: -0.03em; line-height : 1; } .s-intro .counter__time span:last-child { font-weight: 400; font-size : 0.14em; line-height: 1; color : rgba(255, 255, 255, 0.6); } /* ------------------------------------------------------------------- * ## subscription form * ------------------------------------------------------------------- */ .s-intro__content-subscribe { --btn-width : 200px; max-width : var(--content-sep-width); line-height : var(--vspace-0_875); text-align : center; margin-right : auto; margin-left : auto; margin-top : var(--vspace-1); margin-bottom: var(--vspace-0_5); } .s-intro__content-subscribe .mc-form { display : flex; flex-flow : row wrap; margin-top: var(--vspace-1_5); } .s-intro__content-subscribe input[type=email], .s-intro__content-subscribe input[type=submit] { margin-bottom: var(--vspace-0_5); } .s-intro__content-subscribe input[type=email] { --color-placeholder: var(--color-gray-5); width : calc(100% - var(--btn-width)); background-color : rgba(255, 255, 255, 0.155); font-size : calc(var(--text-size) * 0.8947); border : 1px solid transparent; border-right : none; border-radius : var(--border-radius) 0 0 var(--border-radius); padding : var(--input-vpadding) 2rem var(--input-vpadding) 2.4rem; box-shadow : none; color : var(--color-gray-5); text-align : left; } .s-intro__content-subscribe input[type=submit] { width : var(--btn-width); margin-right : 0; border-radius: 0 var(--border-radius) var(--border-radius) 0; } .s-intro__content-subscribe .mc-status { width : 100%; margin-top : 0; font-weight: 400; font-size : var(--text-xs); line-height: var(--vspace-0_625); color : var(--color-1); text-align : center; } /* -------------------------------------------------------------------- * ## intro scroll down * -------------------------------------------------------------------- */ .s-intro__scroll-down { z-index : 2; display : flex; align-items : center; transform : translateX(-7.6rem) rotate(90deg); transform-origin: right bottom; padding-right : var(--content-padding-bottom); position : absolute; bottom : 0; right : 0; } .s-intro__scroll-down span { font-family : var(--font-1); font-size : 9px; font-weight : 300; text-transform: uppercase; letter-spacing: 0.5em; color : white; line-height : var(--vspace-1); } .s-intro__scroll-down::before { display : block; content : ""; height : 1px; width : calc(var(--content-padding-bottom) - 1.6rem); background-color: rgba(255, 255, 255, 0.3); position : absolute; top : 50%; right : 0; } .s-intro__scroll-down:focus, .s-intro__scroll-down:hover { color: var(--color-1); } /* ------------------------------------------------------------------- * ## intro transitions * ------------------------------------------------------------------- */ .s-header__inner, .s-header__inner-dashboard, .s-intro__content-top, .s-intro__content-sep, .s-intro__content-counter, .s-intro__content-subscribe, .s-intro__scroll-down { transition-timing-function: cubic-bezier(0.28, 0.12, 0.22, 1); transition-duration : 0.8s; transition-delay : 0s; opacity : 0; } .s-header__inner, .s-header__inner-dashboard { transition-property: opacity, transform; transform : translate(0, -100%); } .s-intro__content-top, .s-intro__content-sep, .s-intro__content-counter, .s-intro__content-subscribe { transition-property: opacity, transform; transform : translate(0, 150px); } .s-intro__scroll-down { transition-property: opacity, bottom; bottom : -150px; } .no-js .s-intro__scroll-down, .ss-show .s-intro__scroll-down { opacity: 1; } .no-js .s-header__inner, .no-js .s-intro__content-top, .no-js .s-intro__content-sep, .no-js .s-intro__content-counter, .no-js .s-intro__content-subscribe, .ss-show .s-header__inner, .ss-show .s-header__inner-dashboard, .ss-show .s-intro__content-top, .ss-show .s-intro__content-sep, .ss-show .s-intro__content-counter, .ss-show .s-intro__content-subscribe { opacity : 1; transform: translate(0, 0); } .no-js .s-intro__content-sep, .ss-show .s-intro__content-sep { transition-delay: 0.3s; } .no-js .s-intro__content-counter, .ss-show .s-intro__content-counter { transition-delay: 0.6s; } .no-js .s-intro__content-subscribe, .ss-show .s-intro__content-subscribe { transition-delay: 0.9s; } .no-js .s-intro__scroll-down, .ss-show .s-intro__scroll-down { transition-delay: 1.2s; bottom : 0; } .no-js .s-header__inner, .no-js .s-header__inner-dashboard, .ss-show .s-header__inner .ss-show .s-header__inner-dashboard { transition-delay: 1.5s; } /* ------------------------------------------------------------------- * responsive: * intro * ------------------------------------------------------------------- */ @media screen and (max-width: 1400px) { .s-intro .counter__time { font-size: 11.6rem; } } @media screen and (max-width: 1200px) { .s-intro .counter__time { font-size: 10rem; } .s-intro__content-subscribe { max-width: 700px; } } @media screen and (max-width: 1000px) { .s-intro { --content-padding-top: 18vh; --content-sep-width : 600px; } .s-intro__content-top { display : block; max-width : 500px; text-align : center; margin-bottom: var(--vspace-1_5); } .s-intro__content-top>* { padding: 0; } .s-intro__content-sep span:nth-child(2) { font-size: calc(var(--text-size) * 0.5789); } .s-intro .counter__time { font-size : 9.6rem; margin-right: var(--vspace-0_75); margin-left : var(--vspace-0_75); } .s-intro__content-subscribe { --btn-width: 180px; max-width : 500px; } } @media screen and (max-width: 900px) { .s-intro .counter__time { font-size: 8.8rem; } } @media screen and (max-width: 800px) { .s-intro .counter__time { font-size: 8rem; } .s-intro .counter__time span:last-child { font-size: 1.6rem; } .s-intro__content-top { max-width: 440px; } .s-intro__content-top h1 { font-size: calc(var(--text-xxxl) * 1.2632); } .s-intro__content-top p { font-size: calc(var(--text-sm) * 1.4737); background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } .s-intro__content-subscribe { --btn-width: 160px; max-width : 420px; } } @media screen and (max-width: 700px) { .s-intro .counter__time { font-size: 6.8rem; } .s-intro__scroll-down { transform: translateX(-5.8rem) rotate(90deg); } } @media screen and (max-width: 600px) { .s-intro { min-height: calc(29 * var(--space)); } .s-intro__content-top { max-width: 400px; } .s-intro .counter__time { font-size: 6.4rem; } .s-intro__content-subscribe { --btn-width: 100%; max-width : 320px; margin-top : var(--vspace-0_5); } .s-intro__content-subscribe .mc-form { display: block; } .s-intro__content-subscribe input[type=email] { margin: 0; } .s-intro__content-subscribe input[type=email], .s-intro__content-subscribe input[type=submit] { width : 100%; text-align: center; } .s-intro__content-subscribe input[type=email] { border-radius: var(--border-radius) var(--border-radius) 0 0; } .s-intro__content-subscribe input[type=submit] { border-radius: 0 0 var(--border-radius) var(--border-radius); } } @media screen and (max-width: 500px) { .s-intro .counter__time { font-size: 6rem; } .s-intro__scroll-down { display: none; } } @media screen and (max-width: 400px) { .s-intro__content-top h1 { font-size: calc(var(--text-size) * 1.1053); } .s-intro__content-top p { font-size : calc(var(--text-size) * 0.8421); line-height: calc(0.8235 * var(--space)); } .s-intro__content-sep span:nth-child(2) { padding: var(--vspace-0_125) var(--vspace-0_5); } .s-intro .counter__time { font-size: 5.2rem; } .s-intro .counter__time span:last-child { font-size: 1.2rem; } .s-intro__content-subscribe input[type=email] { --input-height: var(--vspace-1_5); } .s-intro__content-subscribe input[type=submit] { --btn-height: var(--vspace-1_5); } } /* =================================================================== * # ABOUT * * * ------------------------------------------------------------------- */ /* .s-about { padding-top : calc(6 * var(--space)); padding-bottom : var(--vspace-5); background-color: var(--color-1); color : white; } */ .s-about .process-list, .s-about .cta-wrap { max-width: 1000px; } /* ------------------------------------------------------------------- * ## section header * ------------------------------------------------------------------- */ .section-header { max-width : 55%; margin-right : auto; margin-left : auto; /* margin-bottom: var(--vspace-2); */ margin-bottom: 0; text-align : center; } .section-header-portofolio { max-width : 95%; margin-right : auto; margin-left : auto; /* margin-bottom: var(--vspace-2); */ margin-bottom: 0; text-align : center; } .section-header-curriculum { max-width : 95%; margin-right : auto; margin-left : auto; margin-bottom: var(--vspace-2); margin-bottom: 0; text-align : center; } .section-header h1 { font-weight: 900; font-size: calc(var(--text-size) * 1.4737); background-image: linear-gradient(to top, #d44c02 30%, #e67a11 100%); margin-top: 50px; padding: 2px 15px; border-radius: 5px; display: inline-block; width: auto; } .section-header .lead { color: white; } /* ------------------------------------------------------------------- * ## list block * ------------------------------------------------------------------- */ .list-block { --gap : var(--vspace-2); --min-width : 300px; display : grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min-width), 100%), 1fr)); -moz-column-gap : var(--gap); column-gap : var(--gap); } .list-block__item { margin-bottom: var(--vspace-0_5); } .list-block__title { margin-bottom: var(--vspace-0_75); } .list-block__title h3 { font-size : calc(var(--text-size) * 0.8947); text-transform: uppercase; letter-spacing: 0.15em; color : var(--color-2-light); margin : 0; } .list-block__icon { display : inline-block; margin-bottom: var(--vspace-0_125); } .list-block__icon svg { height: var(--vspace-1); width : var(--vspace-1); } .list-block__icon svg path { fill: white; } /* -------------------------------------------------------------------- * ## cta * -------------------------------------------------------------------- */ .cta { --color-link : var(--color-2-light); --color-link-hover : var(--color-2-dark); --color-btn-primary : var(--color-2); --color-btn-primary-hover: var(--color-2-dark); display : flex; justify-content : center; padding-top : var(--vspace-3); padding-bottom : var(--vspace-1); margin-top : var(--vspace-2_5); border-top : 1px solid rgba(255, 255, 255, 0.15); text-align : center; } .cta__content { max-width: 700px; } .cta h3 { color : white; margin-bottom: var(--vspace-1); } .cta .lead { color: white; } /* ------------------------------------------------------------------- * responsive: * about * ------------------------------------------------------------------- */ @media screen and (max-width: 1200px) { .s-about { /* padding-top : var(--vspace-4_5); */ padding-bottom: var(--vspace-4); } } /* =================================================================== * # VIDEO * * * ------------------------------------------------------------------- */ .s-video-block { display : flex; justify-content: center; align-items : center; padding-top : var(--vspace-5); padding-bottom : var(--vspace-5); text-align : center; position : relative; } .s-video-block__bg-left, .s-video-block__bg-right { pointer-events : none; background-position: center; background-repeat : no-repeat; background-size : cover; position : absolute; top : 0; bottom : 0; } .s-video-block__bg-left { background-image: url(../images/video-bg-01.jpg); left : 0; right : 50%; } .s-video-block__bg-right { background-image: url(../images/video-bg-02.jpg); left : 50%; right : 0; } .s-video-block__content { position: relative; } .video-link { display : flex; justify-content : center; align-items : center; background-color: white; height : var(--vspace-3_5); width : var(--vspace-3_5); border-radius : 50%; margin-left : auto; margin-right : auto; margin-bottom : var(--vspace-1_5); } .video-link svg { height : var(--vspace-1_25); width : var(--vspace-1_25); transform: translateX(4%); } .video-link svg path { fill : var(--color-gray-19); transition: all 0.3s ease-in-out; } .video-link:focus, .video-link:hover { background-color: var(--color-2-dark); } .video-link:focus svg path, .video-link:hover svg path { fill: white; } .video-caption { font-size : calc(var(--text-size) * 0.6111); text-transform : uppercase; letter-spacing : 0.4em; color : white; background-color: var(--color-gray-19); border-radius : var(--border-radius); padding : 0.6rem 2.4rem 0.6rem 2.8rem; margin : 0; } .section-brand img{ text-align: center; max-height: 300px; margin-top: var(--vspace-3); } .section-about { background: rgba(45, 9, 57, 0.8); /* Warna dengan transparansi */ max-width: 1200px; /* Lebar maksimum container */ margin: 0 auto; /* Untuk rata tengah */ border-radius: 8px; /* Memberikan sedikit lengkungan pada sudut */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Memberikan bayangan untuk efek floating */ clip-path: polygon(25% 0%, 100% 0%, 100% 75%, 75% 100%, 0% 100%, 0% 25%);/* Memotong sudut kanan atas dan kiri bawah */ } .about-content { display: flex; /* gap: 1rem; */ align-items: center; } .about-content img { max-height: 50%; object-fit: cover; margin-bottom: 0 !important; } .sub-title-about { font-size: calc(var(--text-md) * 0.8947); text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-white); margin: 0 !important; font-weight: lighter; } .title-about { font-weight: bolder; /* letter-spacing: 0.15em; */ color: var(--color-white); margin: 20px 0 0 0; } .title-about span{ background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; font-style: italic; padding-bottom: 12px; padding-right: 12px; position: relative; } .title-about span::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60%; height: 3px; background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); /* Warna gradien underline */ } .desc-title-about { font-size: calc(var(--text-md) * 0.8947); color: var(--color-white); margin: 20px 0 0 0; font-weight: lighter; padding-right: 20px; } /* Responsif untuk perangkat mobile */ @media screen and (max-width: 768px) { .section-about { max-width: 95%; /* Lebar container pada mobile */ padding: 20px; /* Padding lebih kecil untuk mobile */ clip-path: polygon(25% 0%, 100% 0%, 100% 75%, 75% 100%, 0% 100%, 0% 25%);/* Sesuaikan potongan sudut untuk mobile */ } } @media screen and (max-width: 600px) { .s-video-block { padding-top : var(--vspace-4); padding-bottom: var(--vspace-4); } } @media screen and (max-width: 400px) { .s-video-block { padding-top : var(--vspace-3); padding-bottom: var(--vspace-3); } .video-link { height: var(--vspace-2_5); width : var(--vspace-2_5); } .video-link svg { height: var(--vspace-1); width : var(--vspace-1); } } /* =================================================================== * # FOOTER * * * ------------------------------------------------------------------- */ .s-footer { background-image: linear-gradient(to right, #401727 30%, #1F0528 100%); padding-top : var(--vspace-1); bottom: 0; width: 100%; z-index: 10; } .s-footer__main { text-align : left; margin-bottom: var(--vspace-0_125); } .s-footer__bottom { font-size : 1.5rem; color : rgba(255, 255, 255, 0.2); } .s-footer__bottom-content { text-align: left; margin-bottom : var(--vspace-0_5); } .s-footer h3 { font-size : calc(var(--text-size) * 0.8947); text-transform: uppercase; letter-spacing: 0.15em; margin-top : 0; margin-bottom : var(--vspace-2); color : white; } .s-footer .contact-email { font-weight : 500; font-size : clamp(2.4rem, 2.4rem, 2.4rem); letter-spacing: -0.05em; margin-bottom : 0 } .s-footer .contact-email img { color: white; margin: 0 10rem; max-height: 41px; /* color: var(--color-1); */ } .s-footer .contact-info { display : flex; justify-content: left; margin: 1rem 10rem; gap: 2rem; } .s-footer .s-footer__main ul { margin-bottom: 0 !important; } .s-footer .contact-info li { gap: 3rem; } .s-footer .s-footer__main ul li a img { max-height: 30px; margin-bottom: 0 !important; margin-right: 10px !important; } .s-footer .contact-info a:focus, .s-footer .contact-info a:hover { color: var(--color-gray-10) } /* ------------------------------------------------------------------- * ## footer social * ------------------------------------------------------------------- */ .s-footer__social { display : flex; justify-content: center; align-items : center; list-style : none; margin : 0.8rem 2rem; } ul, ol { list-style: none; } .s-footer__social li { padding-left: 0; margin : 0 0.4rem; } .s-footer__social li:last-child { margin-right: 0; } .s-footer__social a { display : flex; align-items: center; } .s-footer__social svg { height: 1.8rem; width : 1.8rem; } .s-footer__social svg path { fill: rgba(255, 255, 255, 0.5); } /* ------------------------------------------------------------------- * ## copyright * ------------------------------------------------------------------- */ .ss-copyright { /* margin: 1rem 10rem; */ margin-left: 10rem; margin-top: 1rem; } .ss-copyright a { color: rgba(255, 255, 255, 0.5); } .ss-copyright a:focus, .ss-copyright a:hover { color: var(--color-3); } .ss-copyright span { display: inline-block; } .ss-copyright span::after { content: "|"; display: inline-block; padding: 0 0.8rem 0 1rem; color : rgba(255, 255, 255, 0.05); } .ss-copyright span:last-child::after { display: none; } /* ------------------------------------------------------------------- * ## go top * ------------------------------------------------------------------- */ .ss-go-top { z-index : 2; opacity : 0; visibility: hidden; transform : translate(0, 200%); transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); position : absolute; bottom : 6rem; right : 4rem; } .ss-go-top a { display : flex; align-items : center; justify-content : center; text-decoration : none; border : none; height : 6rem; width : 6rem; border-radius : 50%; background-color: black; transition : all 0.3s; position : relative; } .ss-go-top svg { height: 1.8rem; width : 1.8rem; } .ss-go-top svg path { fill: white; } .ss-go-top.link-is-visible { opacity : 1; visibility: visible; transform : translate(0, 0); } /* ------------------------------------------------------------------- * responsive: * footer * ------------------------------------------------------------------- */ @media screen and (max-width: 1080px) { .ss-go-top { right : 3.6rem; bottom: 5.2rem; } .ss-go-top a { height: 5.2rem; width : 5.2rem; } .ss-go-top svg { height: 1.4rem; width : 1.4rem; } .s-footer .contact-email img { margin: 0 1rem; } .s-footer .contact-info { margin: 1rem; } .ss-copyright { margin-left: 0 } } @media screen and (max-width: 800px) { .s-footer .contact-info { font-size: calc(var(--text-sm) * 1.1053); } .ss-copyright { margin-left: 15px; } } @media screen and (max-width: 700px) { .ss-go-top { right : 3.2rem; bottom: 4.8rem; } .ss-go-top a { height: 4.8rem; width : 4.8rem; } .ss-go-top svg { height: 1.2rem; width : 1.2rem; } } @media screen and (max-width: 600px) { .s-footer .contact-email img { margin: 0 1rem; } .s-footer .contact-info { margin: 1rem; } .s-footer__bottom-content { display: block; } .ss-copyright span { display: block; } .ss-copyright span::after { display: none; } } @media screen and (max-width: 400px) { .ss-go-top { right : 2rem; bottom: 2.4rem; } .ss-go-top a { height: 4rem; width : 4rem; } .ss-go-top svg { height: 1rem; width : 1rem; } } .hero-section { position: relative; z-index: 2; align-items: center; justify-content: center; height: 100%; width: 100%; padding: 0; margin: 10rem 0; } .hero-text { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: white; padding: 0 4rem; margin: 0 auto; max-width: 80%; } .hero-image { flex: 1; display: flex; justify-content: flex-end; } .hero-image img { max-width: 100%; height: auto; background-image: url('/images/landing-page/effect.png'); background-size: cover; background-position: top left; background-repeat: no-repeat; } .hero-text h3 { background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; font-weight: 700; } .hero-text h2 { color: var(--color-white); text-align: center; width: 100%; font-weight: 900; margin-top: 0 !important; } .hero-text p { margin-bottom: 0 !important; } .text-primary-hero { background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; font-style: italic; padding-right: 12px; } .hero-description { text-align: center; width: 100%; font-weight: 100; line-height: 25px; letter-spacing: 0.5px; } .btn-hero { color: var(--color-white); background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); padding: 10px 20px; border-radius: 5px; transition: box-shadow 0.3s ease; letter-spacing: 1px; border-color: transparent; transform: scale(1.05); } .btn-hero:hover { box-shadow: 0 5px 20px var(--color-1); color: var(--color-white); } .about-child { display: flex; /* Menambahkan display flex */ align-items: center; justify-content: center; margin-top: 3rem } .pt-5 { padding-top: 5rem; /* Padding atas */ } .pb-5 { padding-bottom: 5rem; /* Padding bawah */ } .content-about-child { background: linear-gradient(to left, rgba(255, 132, 0, 0.3), rgba(74, 13, 57, 0.3)); /* Gradien dengan transparansi */ border-radius: 10px; /* Membuat sudut melengkung */ text-align: center; /* Teks rata tengah */ color: white; /* Warna teks */ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Bayangan */ flex: 1; /* Membuat elemen fleksibel */ max-width: 250px; /* Lebar maksimum */ padding: 10px 0; } .content-about-child h3 { margin: 0; padding-bottom: 0; color: var(--color-white); font-weight: bold; background: linear-gradient(to right, #f57c00, #ee6028); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; display: inline-block; } .about-child h3::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 3px; background: linear-gradient(to right, #f57c00, #ee6028); transition: width 2s ease; } .about-child h3.counted::after { width: 100%; } .content-about-child p { margin: 0; padding-top: 0; font-weight: lighter; } .s-services { margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 100px; color: white; position: relative; z-index: 2; align-items: center; } .services-text { display: flex; /* Mengaktifkan flexbox */ flex-direction: column; /* Menyusun elemen secara vertikal */ align-items: center; /* Memusatkan elemen secara horizontal */ justify-content: center; /* Memusatkan elemen secara vertikal */ text-align: center; /* Memastikan teks rata tengah */ height: 100%; } .sub-title-services { font-size: calc(var(--text-md) * 0.8947); text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-white); margin: 0 !important; font-weight: lighter; } .title-services { font-weight: bolder; /* letter-spacing: 0.15em; */ color: var(--color-white); margin: 20px 0 0 0; } .title-services span{ background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding: 0 10px 12px 10px; position: relative; } .title-services-mentor { font-weight: bolder; /* letter-spacing: 0.15em; */ color: var(--color-white); margin: 20px 0 0 0; } .title-services-mentor span{ background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; padding: 0 10px 12px 10px; position: relative; } .title-services-testimoni { font-weight: bolder; /* letter-spacing: 0.15em; */ color: var(--color-white); margin: 20px 0 0 0; } .title-services-testimoni span{ background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; padding: 0 10px 12px 10px; position: relative; } .title-services-portofolio { font-weight: bolder; /* letter-spacing: 0.15em; */ color: var(--color-white); margin: 20px 0 0 0; } .title-services-portofolio span{ background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; padding: 0 10px 12px 10px; position: relative; } .title-services-curriculum { font-weight: bolder; /* letter-spacing: 0.15em; */ color: var(--color-white); margin: 20px 0 0 0; } .title-services-curriculum span{ background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; padding: 0 10px 12px 10px; position: relative; } .services-item { display: flex; gap: 3em; justify-content: center; margin-top: 3em; } .services-item-content { position: relative; /* Mengatur posisi relatif untuk container */ text-align: center; /* Teks rata tengah */ } .services-item-content img:hover { box-shadow: 0 15px 35px #1F0528; /* Menambahkan bayangan saat hover */ transition: box-shadow 0.3s ease; /* Animasi transisi untuk efek halus */ cursor: pointer; /* Mengubah kursor saat hover */ } .services-item-content img { width: 100%; /* Pastikan gambar responsif */ display: block; margin: 0 !important; } .services-item-content h3 { position: absolute; /* Mengatur posisi absolut untuk teks */ left: 50%; /* Memusatkan secara horizontal */ transform: translateX(-50%); /* Memastikan teks benar-benar di tengah */ color: white; /* Padding untuk teks */ border-radius: 5px; /* Membuat sudut melengkung */ margin-top: 0; font-size: var(--text-md); } .first-item { bottom: 80px; /* Jarak dari bagian bawah gambar */ } .second-item { bottom: 20px; } .s-curriculum { margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 100px; color: white; position: relative; z-index: 2; align-items: center; } .section-curriculum { position: relative; z-index: 1; background-image: url('/images/landing-page/bg-curriculum.png'); } .curriculum-text { display: flex; /* Mengaktifkan flexbox */ flex-direction: column; /* Menyusun elemen secara vertikal */ align-items: center; /* Memusatkan elemen secara horizontal */ justify-content: center; /* Memusatkan elemen secara vertikal */ text-align: center; /* Memastikan teks rata tengah */ height: 100%; margin-bottom: 3em; /* position: relative; z-index: 1; background-image: url('/images/landing-page/bg-curriculum.png'); */ } .sub-title-curriculum { font-size: calc(var(--text-md) * 0.8947); text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-white); margin: 0 !important; font-weight: lighter; } .title-curriculum { font-weight: bolder; /* letter-spacing: 0.15em; */ color: var(--color-white); margin: 20px 0 0 0; } .title-curriculum span{ background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; font-style: italic; padding: 0 10px 12px 10px; position: relative; } .title-curriculum span::after { content: ""; position: absolute; left: 10px; bottom: 0; width: 60%; height: 3px; background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); /* Warna gradien underline */ } .curriculum-item { display: flex; gap: 5em; justify-content: center; margin-top: 3em; } /* ============================================================= SWIPER CSS - REMOVED (REPLACED WITH SPLIDE) Commented out for backup reference ============================================================= */ /* .swiper-slide.curriculum-item-content { position: relative; text-align: center; border-radius: 10px !important; height: 230px !important; width: 410px !important; align-items: center !important; justify-content: center !important; color: white !important; font-size: 1.5rem !important; font-weight: bold !important; margin-left: 5px !important; padding: 0 !important; transition: all 0.3s ease; z-index: 2; overflow: hidden; cursor: pointer; transition: all 0.3s ease; } */ .curriculum-item-content::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 1; opacity: 0; transition: opacity 0.3s ease; border-radius: 10px; } .curriculum-item-content:hover::before { opacity: 1; } .curriculum-item-content:hover::after { opacity: 1; transform: translate(-50%, -50%) scale(1); } .video-wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9 aspect ratio */ overflow: hidden; } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* Disable direct iframe clicks */ } .play-button-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; } .play-icon { width: 70px; height: 50px; background-color: rgba(255,0,51); border-radius: 20%; display: flex; align-items: center; justify-content: center; pointer-events: none; /* This is key - prevent the icon from capturing clicks */ position: relative; z-index: 11; } .play-icon:before { content: ''; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 25px solid #fff; margin-left: 5px; } .swiper-slide.mentor-item { position: relative; text-align: center; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; border-radius: 10px !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important; height: 200px !important; width: 200px !important; align-items: center !important; justify-content: center !important; color: white !important; font-size: 1.5rem !important; font-weight: bold !important; margin-left: 25px !important; } .swiper-slide-2.curriculum-item-content-2 { position: relative; text-align: center; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; border-radius: 10px !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important; height: 239px !important; width: 352.67px !important; align-items: center !important; justify-content: center !important; color: white !important; font-size: 1.5rem !important; font-weight: bold !important; margin-left: 5px !important; } .swiper-slide.curriculum-item-content > * { position: relative; z-index: 2; /* Memastikan konten berada di atas overlay gradasi */ } .swiper-slide.mentor-item > * { position: relative; z-index: 2; /* Memastikan konten berada di atas overlay gradasi */ } .swiper-slide-2.curriculum-item-content-2 > * { position: relative; z-index: 2; /* Memastikan konten berada di atas overlay gradasi */ } /* Slider Styles */ .swiper-container { width: 85%; /* Container mengambil 85% dari lebar parent */ margin: 0 auto; /* Pusatkan container */ overflow: hidden; /* Pastikan overflow tersembunyi */ padding: 40px 0; position: relative; } .swiper-container-2 { width: 75%; /* Match the width of the first container */ margin: 0 auto; /* Add more top/bottom margin */ overflow: hidden; /* Pastikan overflow tersembunyi */ padding-bottom: 40px; position: relative; } .swiper-container-3 { width: 80%; /* Match the width of the first container */ margin: 0 auto; /* Add more top/bottom margin */ overflow: hidden; /* Pastikan overflow tersembunyi */ padding-bottom: 100px; position: relative; } .swiper-slide.curriculum-item-content:hover, .swiper-slide-2.curriculum-item-content-2:hover { cursor: pointer; box-shadow: 0 5px 10px rgba(230, 122, 17, 0.8) !important; /* Bayangan lebih besar saat hover */ } /* .swiper-button-next, .swiper-button-prev{ color: #e67a11 !important; margin-right: 15px; } */ .video-modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.95); opacity: 0; transition: opacity 0.3s ease; } .video-modal.show { opacity: 1; display: flex; align-items: center; justify-content: center; } .modal-content { position: relative; width: 90%; max-width: 900px; margin: 0 auto; transition: transform 0.3s ease; transform: scale(0.9); } .video-modal.show .modal-content { transform: scale(1); } .close-modal { position: absolute; top: 10px; right: 10px; font-size: 28px; font-weight: bold; color: #fff; background-color: rgba(0, 0, 0, 0.6); width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 3; transition: all 0.3s ease; } .close-modal:hover { background-color: rgba(255, 0, 0, 0.8); transform: scale(1.1); } .video-container { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio */ height: 0; overflow: hidden; border-radius: 8px; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* Tombol navigasi modal */ .modal-navigation { display: flex; justify-content: space-between; position: absolute; width: 100%; top: 50%; transform: translateY(-50%); pointer-events: none; } .modal-prev, .modal-next { background: rgba(238, 96, 40, 0.7); color: white; border: none; /* border-radius: 50%; */ width: 10px; height: 50px; font-size: 24px; cursor: pointer; /* margin: 0 -25px; */ transition: background-color 0.3s, transform 0.3s; pointer-events: auto; z-index: 1002; } .modal-prev:hover, .modal-next:hover { background: rgba(238, 96, 40, 1); transform: scale(1.1); } /* * Removed Swiper buttons and responsive CSS * (Replaced with Splide implementation) */ /* .swiper-button-next, .swiper-button-next-2, .swiper-button-next-3, .swiper-button-prev, .swiper-button-prev-2, .swiper-button-prev-3 { color: #e67a11 !important; display: none !important; } @media screen and (max-width: 768px) { .swiper-container, .swiper-container-3 { width: 95%; } */ /* .swiper-container-2 { width: 85%; } */ .curriculum-item-text { position: absolute; bottom: 0; padding: 0 40px; z-index: 2; } .curriculum-item-title { color: var(--color-white); text-align: left; margin: 0; font-weight: bolder; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .curriculum-item-desc { line-height: 15px; font-weight: lighter; text-align: left; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .curriculum-item-group { display: flex; flex-direction: row; gap: 1em; } .section-login { --content-padding-top : 20vh; --content-padding-bottom: 0 !important; --content-sep-width : 900px; z-index : 2; background-color : black; width : 100%; height : 100vh; min-height : calc(20 * var(--space)); overflow : hidden; position : relative; } .section-login::before { content: ""; position: absolute; width: 600px; /* Ukuran gradien */ height: 500px; /* Ukuran gradien */ border-radius: 50%; background: linear-gradient(180deg, rgba(23, 4, 25, 0.2) 0%, rgba(255, 132, 0, 0.2) 100%); backdrop-filter: blur(10px); /* Efek blur pada latar belakang */ -webkit-backdrop-filter: blur(10px); z-index: 1; /* Pastikan berada di bawah konten utama */ opacity: 0.8; } .section-login::after { content: ""; position: absolute; width: 400px; /* Ukuran gradien */ height: 300px; /* Ukuran gradien */ border-radius: 50%; background: linear-gradient(180deg, rgba(23, 4, 25, 0.8) 0%, rgba(255, 132, 0, 0.2) 100%); backdrop-filter: blur(10px); /* Efek blur pada latar belakang */ -webkit-backdrop-filter: blur(10px); z-index: 1; /* Pastikan berada di bawah konten utama */ } .section-login::before { bottom: 0; /* Tempatkan di sudut kiri bawah */ left: 0; transform: translate(-50%, 50%); } .section-login::after { bottom: 0; /* Tempatkan di sudut kanan bawah */ right: 0; transform: translate(50%, 50%); } /* .section-login::before, .section-login::after { content: ""; position: absolute; width: 1050px; height: 250px; background-size: contain; background-repeat: no-repeat; z-index: 1; } .section-login::before { bottom: 0; left: 0; background-image: url('/images/landing-page/bg-login-left.png'); } .section-login::after { bottom: 0; right: 0; background-image: url('/images/landing-page/bg-login-right.png'); } */ .s-login { --width-grid-max: var(--width-wide); z-index: 2; display: flex; align-items: center; /* Memusatkan secara vertikal */ justify-content: center; /* Memusatkan secara horizontal */ height: 100%; min-height: 100vh; padding-bottom: 0 !important; margin-bottom: 0 !important; color: white; position: relative; } .login-logo { position: relative; top: -40px; left: 50%; transform: translateX(-50%); background-color: var(--color-1); border: 2px solid var(--color-1); /* Border untuk logo */ border-radius: 10px; /* Membuat latar belakang bulat */ padding: 10px; /* Spasi di dalam logo */ width: 137px; height: auto; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Bayangan untuk logo */ } .login-logo img { width: 107px; height: auto; margin-bottom: 0 !important; } .s-login form { margin-bottom: var(--vspace-2) !important; } /* Menambahkan style tambahan untuk form login */ .s-intro__content--login { border: 1px solid var(--color-1); /* Mengatur border lebih tipis */ border-radius: 25px; /* Menyesuaikan radius sudut */ width: 100%; max-width: 468px; padding: 10px 40px; /* Memberikan padding atas dan bawah */ background: linear-gradient(180deg, rgba(23, 4, 25, 0.8) 0%, rgba(255, 132, 0, 0.2) 100%); /* Gradien latar belakang */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Efek bayangan */ backdrop-filter: blur(10px); /* Efek blur pada latar belakang */ -webkit-backdrop-filter: blur(10px); /* Efek blur untuk browser berbasis WebKit */ color: var(--color-white); /* Warna teks */ position: relative; } .title-login { size: var(--text-md); color: var(--color-white); text-align: center; margin-top: 0 !important; } .form-field input { margin-bottom: 15px !important; height: 50px !important; } .form-field input { width: 100%; padding: 10px 15px; border-radius: 10px; border: 1px solid var(--color-1); color: var(--color-white); } .form-field input:focus { color: var(--color-white); box-shadow: 0 5px 10px var(--color-1); outline: none; } .form-field select { width: 100%; padding: 10px 15px; border-radius: 10px; border: 1px solid var(--color-1); transition: all 0.3s ease; height: 50px; color: var(--color-white); margin-bottom: 15px !important; appearance: none; /* Removes default dropdown arrow */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 16px; } .form-field select:focus { outline: none; color: var(--color-white); box-shadow: 0 5px 10px var(--color-1); } .form-field select option { background-color: #2A0926; color: white; } select option[disabled]:first-child { color: var(--color-text-light); /* Warna seperti placeholder */ } /* Styling untuk select dengan option default yang dipilih */ select:invalid, select option:first-child { color: var(--color-text-light); /* Warna seperti placeholder */ } /* Setelah pengguna memilih opsi yang valid */ select:valid { color: white; /* Warna teks normal setelah memilih */ } .form-field button { width: 100%; background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); color: white; border: none; transition: all 0.3s ease; letter-spacing: 1px; height: 52px; } .form-field a { width: 100%; padding: 10px 15px; border-radius: 10px; background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); color: white; border: none; transition: all 0.3s ease; letter-spacing: 1px; height: 50px; display: flex; align-items: center; justify-content: center; text-decoration: none; } .form-field button:hover { box-shadow: 0 5px 20px var(--color-1); transform: translateY(-2px); color: white; border-color: transparent; } .form-field a:hover { box-shadow: 0 5px 20px var(--color-1); transform: translateY(-2px); color: white; border-color: transparent; } .forget-password { text-align: end; margin-right: 30px; letter-spacing: 0.5px; } /* Error Message Styling untuk Login - Specificity tinggi */ .section-login .s-intro__content--login .error-message-container { margin: 20px 0 !important; width: 100% !important; z-index: 999 !important; } .section-login .s-intro__content--login .error-message { background: rgba(220, 53, 69, 0.15) !important; border: 1px solid rgba(220, 53, 69, 0.4) !important; border-radius: 10px !important; padding: 15px 20px !important; display: flex !important; align-items: center !important; gap: 12px !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; animation: slideInDown 0.4s ease-out !important; box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2) !important; margin-bottom: 15px !important; } .section-login .error-icon { font-size: 20px !important; flex-shrink: 0 !important; color: #ff6b6b !important; } .section-login .error-text { color: #ff6b6b !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.4px !important; line-height: 1.4 !important; text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; } /* Animation untuk error message */ @keyframes slideInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Responsive error message */ @media screen and (max-width: 768px) { .error-message { padding: 10px 12px; font-size: 13px; } .error-icon { font-size: 16px; } } .forget-password p { font-size: var(--text-xs) !important; margin-bottom: 25px !important; } .forget-password a { color: var(--color-1); cursor: pointer; } .have-account { text-align: center; letter-spacing: 0.5px; } .have-account p { font-size: var(--text-xs) !important; margin-bottom: 0 !important; } .have-account a { color: var(--color-1); cursor: pointer; } .title-signup { size: var(--text-md); color: var(--color-white); text-align: center; margin-top: 0 !important; } .s-signup { --width-grid-max: var(--width-wide); z-index: 2; display: flex; align-items: center; /* Memusatkan secara vertikal */ justify-content: center; /* Memusatkan secara horizontal */ height: 100%; min-height: 100vh; padding-bottom: 0 !important; margin-bottom: 0 !important; color: white; position: relative; } .s-signup form { margin-bottom: 0 !important; } .title-signup span { color: var(--color-1); } .flex-form { display: flex; gap: 2rem; } .s-header-dashboard { --header-height : 54px; --logo-width : 102px; z-index : 100; width : 100%; background-color: rgba(255, 255, 255, 0.1); opacity : 0.9; position : fixed; left : 0; padding: 2rem 0 0 0 ; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .s-header__inner-dashboard { width : 80%; height: var(--header-height); } @media screen and (max-width: 600px) { .s-header__inner-dashboard { width: 100%; } .s-header__block { padding: 0; } } .s-header__dashboard { display : flex; list-style : none; line-height: 1; margin : 0; align-items: center; } .s-header__dashboard li { padding-left: 0; margin-right: 3rem; } .s-header__dashboard li:last-child { margin-right: 0 } .s-header__dashboard a { display: block; } .s-header__dashboard span { display: block; color: var(--color-white); font-size: var(--text-sm); } .s-header__dashboard span:hover { color: var(--color-1); } .user-dropdown { position: relative; } .user-dropdown .user-icon img { width: 32px; /* Ukuran ikon pengguna */ height: 32px; border-radius: 50%; /* Membuat gambar berbentuk lingkaran */ cursor: pointer; margin-bottom: 0 !important; } .user-dropdown .dropdown-menu { display: none; /* Sembunyikan dropdown secara default */ position: absolute; top: 100%; /* Tempatkan di bawah ikon pengguna */ right: 0; background-color: rgba(255, 255, 255, 0.9); /* Warna latar dropdown */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Efek bayangan */ border-radius: 8px; list-style: none; padding: 10px 0; z-index: 1000; } .user-dropdown .dropdown-menu li { padding: 0; margin: 0; } .user-dropdown .dropdown-menu li a { color: #333; text-decoration: none; display: block; padding: 10px 20px; font-size: var(--text-sm); } .user-dropdown .dropdown-menu li a:hover { background-color: rgba(219,96,8, 0.8); } /* Ini adalah kode penting - hanya tampilkan dropdown ketika kelas 'active' ditambahkan */ .user-dropdown.active .dropdown-menu { display: block; } .s-dashboard { --width-grid-max: var(--width-wide); z-index: 2; display: flex; align-items: center; /* Memusatkan secara vertikal */ justify-content: center; /* Memusatkan secara horizontal */ height: 100%; min-height: 100vh; padding-bottom: 0 !important; margin-bottom: 0 !important; color: white; position: relative; } .s-dashboard > div { text-align: center; } .title-dashboard { font-weight: bolder; text-align: center; color: var(--color-white); margin-top: 0 !important; } .title-dashboard { font-weight: bold; text-align: center; color: var(--color-white); margin-top: 0 !important; } .title-dashboard span{ background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } .desc-dashboard { max-width: 70%; margin: 0 auto; font-size: calc(var(--text-md) * 0.8147); text-align: center; font-weight: 100; letter-spacing: 1px; } .benefit-dashboard { display: flex; gap: 3em; justify-content: center; font-size: calc(var(--text-md) * 0.8147); font-weight: 500; letter-spacing: 1px; margin-top: 20px; margin-bottom: 30px; } .benefit-dashboard-item { display: flex; gap: 0.5em; align-items: center; } .benefit-dashboard-item img { margin-bottom: 0 !important; } .benefit-dashboard-item p { margin-bottom: 0 !important; } .s-dashboard a { background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); color: white; border: none; transition: all 0.3s ease; letter-spacing: 1px; padding: 10px 30px; border-radius: 10px; margin-top: 35px } /* Center the button container */ .s-dashboard > div > div:last-child { text-align: center; margin-top: 20px; } /* Responsive styles */ @media screen and (max-width: 1024px) { .title-dashboard { font-size: calc(var(--text-xxxl) * 1.1); } .desc-dashboard { max-width: 75%; } } @media screen and (max-width: 768px) { .benefit-dashboard { flex-direction: column; gap: 1.5em; } .title-dashboard { font-size: calc(var(--text-xl) * 0.9); } .desc-dashboard { max-width: 90%; font-size: calc(var(--text-sm) * 1.1); } } @media screen and (max-width: 480px) { .s-dashboard { padding: 0 15px; } .title-dashboard { font-size: calc(var(--text-xxxl) * 1.1); } .desc-dashboard { max-width: 90%; font-size: calc(var(--text-md) * 0.8147); font-weight: 100; letter-spacing: 1px; } .benefit-dashboard-item { justify-content: center; } .s-dashboard a { padding: 8px 25px; } } @media screen and (max-width: 320px) { .title-dashboard { font-size: var(--text-lg); } .desc-dashboard { font-size: calc(var(--text-xs) * 1.1); } } .hero-course { z-index: 2; height: 450px; background-image: url('/images/landing-page/hero-course.png'); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; position: relative; width: 100%; } .hero-course__title { color: #ffffff; font-weight: 700; font-size: var(--text-xxxl); text-align: center; max-width: 800px; margin: 0 auto; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); line-height: 25px; } .course-search { padding: 20px 0 0 0; } /* .container-course-search, .container-category-search { position: relative; width: 80%; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 5px; } */ .course-search__input { width: 100%; max-width: 100%; display: block; margin: 0; padding: 12px 20px; padding-right: 50px; /* Make room for the button */ border: 3px solid var(--color-1); background-color: var(--color-white); color: var(--color-1); border-radius: 50px; outline: none; height: 50px; transition: all 0.3s ease; } .course-search__input:focus { box-shadow: 0 10px 20px rgba(230, 122, 17, 0.8); /* Optional: change border color when focused */ } .search-button { position: absolute; right: -2px; top: 0; height: 50px; width: 40px; border: none; border-radius: 50px; color: var(--color-1); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; background: transparent; } .search-button:hover { background: var(--color-1); color: var(--color-white); } /* .category-search__item { background-color: var(--color-white); color: var(--color-1); padding: 5px 10px; border-radius: 50px; font-size: var(--text-sm); transition: all 0.3s ease; } */ /* .category-search__item:hover { background-color: var(--color-1); color: var(--color-white); } .category-search__item:focus { background-color: var(--color-1); color: var(--color-white); } */ /* Container styles for curriculum page */ .container-course-search { position: relative; width: 85%; margin: 0 auto; display: flex; align-items: center; } .container-category-search { width: 85%; margin: 0 auto; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px 0; } .category-search__item { background-color: var(--color-white); color: var(--color-1); padding: 5px 10px; border-radius: 50px; font-size: var(--text-sm); text-decoration: none; transition: all 0.3s ease; white-space: nowrap; margin-bottom: 10px; } .category-search__item:hover, .category-search__item:focus, .category-search__item.active { background-color: var(--color-1); color: var(--color-white); text-decoration: none; } @media screen and (max-width: 992px) { .hero-course__title { font-size: var(--text-xxl); padding: 0 15px; } .container-course-search { width: 95%; } .container-category-search { width: 95%; } } /* Make Hero Course section responsive */ @media screen and (max-width: 768px) { .hero-course { height: 350px; } .hero-course__title { font-size: var(--text-xl); padding: 0 15px; } .container-course-search { width: 90%; } .container-category-search { width: 90%; } .course-search__input { height: 45px; font-size: var(--text-sm); } .search-button { height: 45px; } } @media screen and (max-width: 480px) { .hero-course { height: 250px; padding: 0 !important; } .hero-course__title { font-size: var(--text-lg); } .container-course-search { width: 90%; } .container-category-search { width: 90%; } .category-search__item { font-size: var(--text-xs); padding: 5px 10px; } .course-search { padding: 15px 0 0 0; } .category-search { padding-top: 0; } } @media screen and (max-width: 320px) { .hero-course__title { font-size: var(--text-md); } .course-search__input { height: 40px; font-size: calc(var(--text-sm) * 0.85); } .search-button { height: 40px; width: 35px; } } .curriculum { margin-top: var(--vspace-1); padding-top: 0 !important; padding-bottom: 100px; color: white; position: relative; z-index: 2; align-items: center; } .container-curriculum { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 15px; } /* Media queries untuk responsivitas */ @media screen and (max-width: 1200px) { .container-curriculum { grid-template-columns: repeat(3, 1fr); /* Tetap 3 item di layar besar */ } } @media screen and (max-width: 992px) { .container-curriculum { grid-template-columns: repeat(2, 1fr); /* 2 item per baris di tablet */ } } @media screen and (max-width: 768px) { .container-curriculum { grid-template-columns: repeat(2, 1fr); /* 2 item per baris di tablet kecil */ width: 95%; gap: 15px; } .curriculum-item-content { height: 250px !important; width: 100% !important; } .curriculum-item-content-2 { height: 250px !important; width: 100% !important; } } @media screen and (max-width: 576px) { .container-curriculum { grid-template-columns: repeat(1, 1fr); /* 1 item per baris di mobile */ width: 95%; gap: 15px; } .curriculum-item-content { height: 230px !important; width: 100% !important; } .curriculum-item-content-2 { height: 230px !important; width: 100% !important; } } .curriculum-item-content { position: relative; text-align: center; border: 1px solid var(--color-white) !important; border-radius: 10px !important; height: 285px !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: white !important; font-size: 1.5rem !important; font-weight: bold !important; overflow: hidden; transition: all 0.3s ease; padding: 0 !important; z-index: 2; } .curriculum-item-content iframe { width: 100%; height: 100%; display: block; /* Menghilangkan space dari elemen inline */ border: none; /* Menghilangkan border bawaan iframe */ margin: 0; /* Menghilangkan margin */ padding: 0; position: absolute; /* Posisi absolute untuk mengisi seluruh area */ top: 0; left: 0; right: 0; bottom: 0; } .curriculum-item-content-2 { position: relative; text-align: center; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; border: 1px solid var(--color-white) !important; border-radius: 10px !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important; height: 239px !important; width: 363.67px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: white !important; font-size: 1.5rem !important; font-weight: bold !important; overflow: hidden; transition: all 0.3s ease; } .curriculum-item-content:hover { border: 1px solid var(--color-1) !important; cursor: pointer; box-shadow: 0 10px 20px rgba(230, 122, 17, 0.8) !important; } .curriculum-item-content-2:hover { border: 1px solid var(--color-1) !important; cursor: pointer; box-shadow: 0 10px 20px rgba(230, 122, 17, 0.8) !important; } .section-detail-curriculum { padding-top: 100px; } .s-detail-curriculum { max-width: 90%; margin: 0 auto; padding: 20px; } /* Container untuk video dan daftar materi */ .content-container { display: flex; gap: 20px; /* Ruang antara video dan daftar materi */ align-items: flex-start; } .s-video__content { width: 70%; height: auto; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(230, 122, 17, 0.8); position: relative; } /* Card daftar materi */ .s-content__list { width: 30%; /* Space sebesar 20% */ height: 510px; /* Tinggi maksimal card */ background-color: white; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); padding: 10px; overflow-y: auto; /* Memungkinkan scroll vertikal */ } .s-content__list h3 { color: var(--color-1); margin-bottom: 15px; text-align: center; font-size: 1.3rem; border-bottom: 2px solid var(--color-1); padding-bottom: 10px; } .s-content__list ul { list-style: none; margin: 0; padding: 0; } .s-content__list li { padding-bottom: 5px; } .s-content__list li:last-child { margin-bottom: 0; border-bottom: none; } .s-content__list a { display: flex; color: var(--color-text-dark); text-decoration: none; padding: 8px 5px; border-radius: 5px; transition: all 0.3s ease; } .s-content__list a:hover { background-color: rgba(238, 96, 40, 0.2); color: var(--color-1); } .s-content__list a.active { background-color: rgba(238, 96, 40, 0.2); color: var(--color-1); } .s-content__list a img { width: 40%; border-radius: 5px; margin-bottom: 0; } .s-content__list-text { flex-wrap: wrap; justify-content: center; padding-left: 5px; } .s-content__list .title { font-size: var(--text-sm); line-height: 20px !important; font-weight: bold; display: -webkit-box; -webkit-line-clamp: 3; /* Membatasi teks hanya 2 baris */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; /* Menambahkan elipsis (...) di akhir */ max-height: 4.6em; margin-bottom: 5px; } .s-content__list .s-content__list-text span { padding-bottom: 5px; margin-bottom: 0; } .s-content__list .desc { font-size: var(--text-xs); line-height: 1.3; color: var(--color-gray-12); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; /* Membatasi teks hanya 2 baris */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; /* Menambahkan elipsis (...) di akhir */ max-height: 3.9em; /* Backup untuk browser yang tidak mendukung line clamp */ } /* Styling scrollbar */ .s-content__list::-webkit-scrollbar { width: 6px; } .s-content__list::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .s-content__list::-webkit-scrollbar-thumb { background: var(--color-1); border-radius: 10px; } .s-content__list::-webkit-scrollbar-thumb:hover { background: #d44c02; } /* Tambahkan style untuk video */ .s-video__content video { width: 100%; height: auto; display: block; box-shadow: 0 5px 15px rgba(230, 122, 17, 0.8); border-radius: 10px; object-fit: cover; } .s-video__content iframe { width: 100%; aspect-ratio: 16/9; border: none; border-radius: 10px; display: block; box-shadow: 0 5px 15px rgba(230, 122, 17, 0.8); } /* Responsive design */ @media screen and (max-width: 1200px) { .s-detail-curriculum { max-width: 100%; margin: 0 auto; padding: 20px; } .content-container { flex-direction: column; } .s-video__content, .s-content__list { width: 100%; } .s-content__list a img { width: 20%; padding-left: 0; } .s-content__list { height: 600px; } .s-content__list .desc { font-size: var(--text-xs); line-height: 1.3; color: var(--color-gray-12); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; /* Membatasi teks hanya 2 baris */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; /* Menambahkan elipsis (...) di akhir */ max-height: 2.6em; /* Backup untuk browser yang tidak mendukung line clamp */ } } @media screen and (max-width: 992px) { .s-detail-curriculum { max-width: 100%; margin: 0 auto; padding: 20px; } .content-container { flex-direction: column; } .s-video__content, .s-content__list { width: 100%; } .s-content__list a img { width: 30%; padding-left: 0; } .s-content__list { height: 600px; } .s-content__list .desc { font-size: var(--text-xs); line-height: 1.3; color: var(--color-gray-12); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; /* Membatasi teks hanya 2 baris */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; /* Menambahkan elipsis (...) di akhir */ max-height: 2.6em; /* Backup untuk browser yang tidak mendukung line clamp */ } } @media screen and (max-width: 768px) { .section-detail-curriculum { padding-top: 80px; /* Header mungkin lebih kecil di mobile */ } .s-content__list a img { width: 30%; } .s-content__list { height: 450px; } .s-content__list .title { font-size: var(--text-sm) } } .s-hero { --content-padding-top: 0; --content-padding-bottom: 0 !important; --content-sep-width: 900px; z-index: 2; background-color: black; width: 100%; min-height: calc(20 * var(--space)); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; } .s-hero__content { --width-grid-max: var(--width-wide); z-index: 2; height: 100%; padding-bottom: 0 !important; margin-bottom: 0 !important; color: white; position: relative; width: 100%; /* display: flex; */ align-items: center; justify-content: center; } .hero-video { width: 70%; height: auto; border-radius: 10px; overflow: hidden; border: var(--color-1) 2px solid; box-shadow: 0 5px 15px rgba(230, 122, 17, 0.8); position: relative; display: flex; /* Menambahkan display flex */ align-items: center; justify-content: center; margin: 0 auto; /* Membuat elemen terpusat secara horizontal */ max-width: 1200px; /* Menambahkan lebar maksimum */ } .hero-video iframe { width: 100%; aspect-ratio: 16/9; border: none; border-radius: 10px; display: block; /* box-shadow: 0 5px 15px rgba(230, 122, 17, 0.8); */ } .initiator-container { display: flex; justify-content: center; gap: 70px; flex-wrap: wrap; padding: 40px 0; } .initiator-item { text-align: left; width: 300px; } .initiator-image-container { width: 300px; height: 300px; overflow: hidden; border-radius: 25px; margin: 0 auto; border-style: solid; border-color: var(--color-1); transition: box-shadow 0.3s ease; position: relative; } .initiator-image-container:hover { box-shadow: 0 10px 20px var(--color-1) } .initiator-image-container:hover .initiator-image { filter: brightness(0.7) blur(2px); transition: filter 0.5s ease; } .initiator-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; background: rgba(146, 146, 146, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transform: translateY(100%); transition: all 0.5s ease; /* border-radius: 0 0 25px 25px; */ padding: 20px; box-sizing: border-box; color: white; text-align: left; font-size: var(--text-xs); line-height: 1.2; } .initiator-image-container:hover .initiator-overlay { opacity: 1; transform: translateY(0); } .initiator-image { width: 100%; height: 100%; object-fit: cover; object-position: top; } .initiator-name { font-size: calc(var(--text-xl) * 0.6111); margin: 20px 0 0 0; /* Atur margin-top saja */ font-weight: 900; background: linear-gradient(to right, #d44c02, #e67a11); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; line-height: 1; /* Ubah ke 1 untuk mengurangi spacing */ } .initiator-title { margin: 0; padding: 0; color: var(--color-white); font-size: medium; line-height: 0.8; } .quotes-initiator { display: flex; justify-content: center; align-items: center; margin: 0 auto; /* Membuat elemen terpusat secara horizontal */ max-width: 1000px; } .quotes-initiator h4 { color: var(--color-white); text-align: center; font-style: italic; } .s-behind { z-index: 2; position: relative; padding-bottom: 100px; } .behind-gif { width: 757.8px; height: 421px; border-radius: 10px; overflow: hidden; border: var(--color-1) 2px solid; box-shadow: 0 5px 15px rgba(230, 122, 17, 0.8); position: relative; display: flex; /* Menambahkan display flex */ align-items: center; justify-content: center; margin: 3rem auto; /* Membuat elemen terpusat secara horizontal */ max-width: 1200px; /* Menambahkan lebar maksimum */ } .behind-gif img{ width: 100%; object-fit: contain; border: none; border-radius: 10px; display: block; margin-bottom: 0; } /* Estilos responsivos para sección Initiator */ @media screen and (max-width: 1200px) { .s-initiator { padding: 50px 0; } .initiator-container { gap: 40px; } } @media screen and (max-width: 992px) { .s-initiator { padding: 50px 0; } .initiator-container { gap: 30px; } .initiator-item { width: 250px; } .initiator-image-container { width: 250px; height: 250px; } .quotes-initiator { max-width: 80%; margin-top: 0; } .quotes-initiator h4 { font-size: 18px; padding: 0 20px; margin-top: 0; } } @media screen and (max-width: 768px) { .s-initiator { padding: 50px 0; } .initiator-container { gap: 20px; /* flex-direction: column; */ align-items: center; padding-bottom: 0 !important; } .initiator-item { width: 300px; margin-bottom: 30px; text-align: center; } .initiator-name, .initiator-title { text-align: center; } .quotes-initiator { max-width: 90%; margin-top: 0; } } @media screen and (max-width: 480px) { .s-initiator { padding: 50px 0; } .initiator-item { width: 250px; } .initiator-image-container { width: 250px; height: 250px; } .initiator-overlay { padding: 15px; } .initiator-overlay p { font-size: 12px; } .quotes-initiator h4 { font-size: 16px; margin-top: 0; } } /* Estilos responsivos para sección Behind The Scene */ @media screen and (max-width: 992px) { .s-behind { padding-bottom: 50px; } .behind-gif { width: 80%; height: 421px; } } @media screen and (max-width: 768px) { .s-behind { padding-bottom: 50px; } .behind-gif { width: 80%; height: 421px; margin: 2rem auto; } } @media screen and (max-width: 480px) { .s-behind { padding-bottom: 50px; } .behind-gif { width: 80%; height: 221px; margin: 2rem auto; } } /* Estilos responsivos para la sección de Curriculum */ @media screen and (max-width: 992px) { .s-curriculum { padding-bottom: 60px; } } @media screen and (max-width: 768px) { .s-curriculum { padding-bottom: 40px; } .title-services { font-size: 24px; } .title-services span { padding: 0 10px 12px 10px; } } @media screen and (max-width: 480px) { .s-curriculum { padding-bottom: 30px; } .title-services { font-size: 20px; } .section-header { margin-bottom: 10px; } } /* Estilos responsivos para el hero video */ @media screen and (max-width: 1200px) { .hero-section { margin-bottom: 5rem !important; } .hero-video { width: 80%; } } @media screen and (max-width: 992px) { .hero-video { width: 90%; } } @media screen and (max-width: 768px) { .hero-section { margin-bottom: 5rem !important; } .hero-video { width: 95%; } .hero-text { padding: 0 20px; max-width: 95%; } .hero-text h2 { font-size: 24px; line-height: 30px; } .hero-text h3 { font-size: 18px; } .hero-description { font-size: 14px; line-height: 20px; } } @media screen and (max-width: 480px) { .hero-section { margin-bottom: 5rem !important; } .hero-text h2 { font-size: 20px; line-height: 30px; } .hero-text h3 { font-size: 16px; } .hero-description { font-size: 13px; line-height: 20px; } .btn-hero { padding: 8px 16px; font-size: 14px; } .about-child { margin-top: 2rem; } .content-about-child { max-width: 200px; padding: 8px 0; } } .curriculum-container { display: flex; max-width: 85%; justify-content: center; align-items: center; flex-direction: column; padding: 30px 0; gap: 30px; margin: 0 auto; } .item-curriculum { display: flex; justify-content: space-between; align-items: flex-start !important; /* Ubah dari center ke flex-start untuk posisi text di atas */ border: rgba(255, 255, 255, 0.4) 1px solid; box-shadow: 0 5px 5px rgba(255, 255, 255, 0.3); border-radius: 10px; width: 100%; position: relative; overflow: hidden; padding: 20px; gap: 20px; transition: all 0.3s ease; } .item-curriculum::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(74, 13, 57, 0.9) 0%, rgba(74, 13, 57, 0.5) 30%, rgba(74, 13, 57, 0.1) 50%, rgba(31, 5, 40, 0.1) 70%, rgba(31, 5, 40, 0.1) 100%); border-radius: 10px; z-index: 1; /* Behind content */ opacity: 0.95; transition: opacity 0.3s ease; } .item-curriculum:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(255, 255, 255, 0.4); } .item-curriculum-text { flex: 1; padding: 0 10px; max-width: 50%; z-index: 2; /* display: flex; */ gap: 12px; text-align: left !important; /* Force text alignment kiri di semua kondisi */ } /* Ensure semua text elements dalam curriculum tetap rata kiri */ .item-curriculum-title, .item-curriculum-sub-title, .item-curriculum-description { text-align: left !important; } .item-curriculum-image { flex: 1; border: rgba(255, 255, 255, 0.4) 1px solid; border-radius: 10px; max-width: 50%; max-height: 358px; overflow: hidden; display: flex; align-items: center; justify-content: center; z-index: 2; } .item-curriculum-image img { width: 100%; height: auto; max-height: 100%; object-fit: contain; border-radius: 8px; } .item-curriculum-title { font-weight: bold; /* background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); -webkit-background-clip: text; background-clip: text; color: transparent; */ color: var(--color-white); margin: 0 0 12px 0; text-align: left !important; /* Ensure always left aligned */ } .item-curriculum-sub-title { margin: 0 0 8px 0; font-weight: 500; color: var(--color-white); text-align: left !important; /* Ensure always left aligned */ } .item-curriculum-description { margin: 15px 0 0 0; font-weight: 100; line-height: 23px; text-align: left !important; /* Ensure always left aligned */ } .item-curriculum-video { color: var(--color-white); background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); padding: 5px 10px; border-radius: 5px; transition: box-shadow 0.3s ease; letter-spacing: 1px; border-color: transparent; display: inline-block; /* Makes element only as wide as its content */ width: auto; transform: scale(1.05); } .item-curriculum-video:hover { box-shadow: 0 5px 20px var(--color-1); color: var(--color-white); } /* Responsive styles for curriculum section */ @media screen and (max-width: 1200px) { .curriculum-container { max-width: 90%; } } @media screen and (max-width: 992px) { .curriculum-container { max-width: 95%; } .item-curriculum { padding: 15px; gap: 15px; align-items: flex-start !important; } .item-curriculum-image { max-height: 280px; } .item-curriculum-title { font-size: var(--text-md); } .item-curriculum-sub-title { font-size: var(--text-xs); font-weight: 700; } .item-curriculum-description { font-size: var(--text-xs); font-weight: lighter; line-height: 1.4; } } @media screen and (max-width: 768px) { .item-curriculum { gap: 20px; padding: 20px; max-width: 95%; align-items: flex-start !important; } .item-curriculum-image { max-width: 100%; max-height: 260px; } .item-curriculum-text { max-width: 100%; padding: 0; flex-direction: column; text-align: left !important; /* Pastikan tetap rata kiri di mobile */ } .item-curriculum-title { font-size: var(--text-md); margin: 5px 0; text-align: left !important; /* Force rata kiri di mobile */ } .item-curriculum-sub-title { font-size: var(--text-xs); font-weight: 700; text-align: left !important; /* Force rata kiri di mobile */ } .item-curriculum-description { font-size: var(--text-xs); font-weight: lighter; line-height: 1.4; text-align: left !important; /* Force rata kiri di mobile */ } } @media screen and (max-width: 480px) { .curriculum-container { padding: 10px 15px; } .item-curriculum { flex-direction: column; gap: 20px; padding: 20px; align-items: flex-start !important; } .item-curriculum-text{ gap: 0; } .item-curriculum { padding: 15px; } .item-curriculum-image { max-height: 200px; } .item-curriculum-title { font-size: var(--text-md); } .item-curriculum-sub-title { font-size: var(--text-xs); font-weight: 700; } .item-curriculum-video { font-size: var(--text-xs); display: inline-block; width: auto; } .item-curriculum-description { font-size: var(--text-xs); font-weight: lighter; line-height: 1.4; } } @media screen and (max-width: 320px) { .item-curriculum { padding: 12px; } .item-curriculum-image { max-height: 180px; } .item-curriculum-title { font-size: 1rem; } .item-curriculum-sub-title { font-size: 0.85rem; } .item-curriculum-video { font-size: 0.7rem; padding: 3px 6px; } .item-curriculum-description { font-size: 0.8rem; line-height: 1.3; } } /* Responsive title styles */ @media screen and (max-width: 768px) { .title-services { font-size: 24px; text-align: center; } .title-services span { padding: 0 5px 8px 5px; } .section-header { margin-bottom: 1.5rem; } } @media screen and (max-width: 480px) { .title-services { font-size: 20px; } .section-header { max-width: 85%; margin-bottom: 1rem; } } .s-value { z-index: 2; position: relative; } .value-container { display: grid; grid-template-columns: repeat(2, 1fr); /* Creates 2 columns */ max-width: 75%; gap: 30px; /* Space between items */ margin: 0 auto; padding: 30px 0; } /* Add styles for the section header */ .s-value .section-header { max-width: 85%; margin: 0 auto; padding: 0 0 20px 0; } .s-value .section-header h2 { text-align: center; } .value-item-1, .value-item-2 { border-radius: 10px; padding: 40px; transition: transform 0.3s ease; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; text-align: center; } .value-item-1 { border: rgb(255, 132, 0, 0.7) 1px solid; } .value-item-1::after, .value-item-2::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; z-index: -1; /* Behind content */ opacity: 0.95; transition: opacity 0.3s ease; } .value-item-1::after { background: linear-gradient(to top, rgba(255, 132, 0, 0.2) 0%, rgba(255, 132, 0, 0.2) 30%, rgba(255, 132, 0, 0.2) 50%, rgba(31, 5, 40, 0.4) 70%, rgba(31, 5, 40, 0.1) 100%); } .value-item-2::after { background: linear-gradient(to top, rgba(74, 13, 57, 0.9) 0%, rgba(74, 13, 57, 0.9) 30%, rgba(31, 5, 40, 0.2) 70%, rgba(31, 5, 40, 0.1) 100%); } .value-item-1:hover, .value-item-2:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2); } .value-item-1 > div, .value-item-2 > div { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Add these styles for the content */ .value-item-1 h4, .value-item-2 h4 { color: var(--color-white); font-weight: 900; margin: 0; text-align: center; width: 100%; } .value-item-1 span, .value-item-2 span { color: var(--color-white); background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); padding: 5px 10px; border-radius: 5px; transition: box-shadow 0.3s ease; letter-spacing: 1px; border-color: transparent; display: inline-block; width: auto; transform: scale(1.05); margin: 30px 0; text-align: center; } .value-item-1 p, .value-item-2 p { font-size: var(--text-sm); color: var(--color-white); font-weight: lighter; line-height: 20px; margin-bottom: 0; text-align: center; width: 100%; } .value-item-1 h4, .value-item-1 span, .value-item-1 p, .value-item-2 h4, .value-item-2 span, .value-item-2 p { position: relative; z-index: 2; } /* Make it responsive */ @media screen and (max-width: 768px) { .value-container { grid-template-columns: 1fr; /* Single column on mobile */ } } /* Make value section responsive */ @media screen and (max-width: 1200px) { .value-container { max-width: 85%; } } @media screen and (max-width: 992px) { .value-container { max-width: 90%; gap: 20px; } .value-item-1, .value-item-2 { padding: 30px; } .value-item-1 h4, .value-item-2 h4 { font-size: 1.2rem; } } @media screen and (max-width: 768px) { .value-container { grid-template-columns: repeat(2, 1fr); /* Change to 1 column on tablets */ max-width: 95%; } .value-item-1, .value-item-2 { padding: 25px; } .section-header h2.title-services { font-size: var(--text-lg); padding: 0; } .section-header h2.title-services-mentor { font-size: var(--text-lg); padding: 0 15px; } .section-header h2.title-services-testimoni { font-size: var(--text-lg); padding: 0 15px; } .section-header-portofolio h2.title-services-portofolio { font-size: var(--text-lg); padding: 0 15px; } .section-header-curriculum h2.title-services-curriculum { font-size: var(--text-lg); padding: 0 15px; } .value-item-1 h4, .value-item-2 h4 { font-size: var(--text-md) } .value-item-1 span, .value-item-2 span { margin: 15px 0; font-size: var(--text-sm); padding: 2px 4px; } .value-item-1 p, .value-item-2 p { font-size: var(--text-sm); line-height: 1.4; } } @media screen and (max-width: 480px) { .value-container { grid-template-columns: 1fr; /* Change to 1 column on tablets */ max-width: 75%; } .s-value { padding-bottom: 60px; } .value-container { padding: 20px 0; gap: 15px; } .value-item-1, .value-item-2 { padding: 20px 15px; } .value-item-1 h4, .value-item-2 h4 { font-size: var(--text-sm) } .value-item-1 span, .value-item-2 span { margin: 15px 0; font-size: var(--text-xs); padding: 2px 4px; } .value-item-1 p, .value-item-2 p { font-size: var(--text-xs); line-height: 1.4; } } @media screen and (max-width: 320px) { .value-item-1, .value-item-2 { padding: 15px 10px; } .value-item-1 h4, .value-item-2 h4 { font-size: var(--text-sm) } .value-item-1 span, .value-item-2 span { margin: 10px 0; font-size: var(--text-xs); } .value-item-1 p, .value-item-2 p { font-size: var(--text-xs); line-height: 1.3; } } .s-mentor { color: white; position: relative; z-index: 2; padding: 100px 0; } .mentors-container { display: flex; justify-content: center; flex-wrap: wrap; padding: 40px 0; max-width: 90%; margin: 0 auto; } .mentor-item { text-align: center; width: 250px; margin: 0; display: flex; flex-direction: column; align-items: center; z-index: 2; } .mentor-image-container { width: 200px; height: 200px; overflow: hidden; border-radius: 10px; border-style: solid; border-color: var(--color-1); transition: box-shadow 0.3s ease; position: relative; } .mentor-image-container:hover { box-shadow: 0 10px 20px var(--color-1) } .mentors-image { width: 100%; height: 100%; object-fit: cover; object-position: top; } .mentor-name { font-size: calc(var(--text-xl) * 0.6111); margin: 20px 0 5px 0; /* Added bottom margin */ font-weight: 900; background: linear-gradient(to right, #d44c02, #e67a11); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; z-index: 2; line-height: 1; /* Ubah ke 1 untuk mengurangi spacing */ text-align: center; /* Center text */ width: 100%; /* Full width to ensure center alignment */ } .mentor-title { margin: 0; padding: 0; color: var(--color-white); font-size: medium; font-weight: 100; line-height: 1; text-align: center; /* Center text */ width: 100%; /* Full width to ensure center alignment */ } .s-mentor .section-header { max-width: 85%; margin: 0 auto; padding: 0 0 40px 0; text-align: center; } .s-mentor .section-header h2 { text-align: center; } /* Make mentors section responsive */ @media screen and (max-width: 1200px) { .mentors-container { max-width: 90%; } } @media screen and (max-width: 992px) { .mentors-container { max-width: 95%; gap: 20px; } .mentor-item { width: 220px; margin: 0 10px; } .mentor-image-container { width: 180px; height: 180px; } } @media screen and (max-width: 768px) { .mentors-container { gap: 30px; } .mentor-item { width: 45%; margin: 0; } } @media screen and (max-width: 480px) { .s-mentor { padding: 60px 0; } .mentors-container { gap: 20px; } .mentor-item { width: 100%; margin-bottom: 20px; } } .s-portofolio { color: white; position: relative; z-index: 2; padding: 100px 0; } .s-portofolio::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(31, 5, 40, 0.9) 0%, rgba(31, 5, 40, 0.9) 30%, rgba(71, 13, 56, 0.9) 50%, rgba(71, 13, 56, 0.9) 70%, rgba(74, 13, 57, 0.9) 100%); z-index: -1; /* Changed from 1 to -1 */ opacity: 0.95; transition: opacity 0.3s ease; } /* Add this to ensure all content appears above the background */ .s-portofolio .section-header, .s-portofolio .portofolio-container { position: relative; z-index: 2; } .portofolio-container { display: flex; justify-content: center; flex-wrap: wrap; padding: 40px 0; max-width: 90%; margin: 0 auto; gap: 10px; } .portofolio-item { width: 424px; height: 239px; overflow: hidden; border-radius: 10px; border-style: solid; border-color: var(--color-1); transition: box-shadow 0.3s ease; position: relative; z-index: 2; /* Add this to ensure images appear above background */ } .portofolio-item img { width: 100%; height: 100%; object-fit: cover; } .portofolio-item iframe { width: 100%; height: 100%; } .s-testimoni { color: white; position: relative; z-index: 2; padding: 100px 0; } .s-testimoni .section-header { max-width: 95%; margin: 0 auto; text-align: center; padding-bottom: 30px; } .swiper-slide-2, .curriculum-item-content-2 { width: 100%; /* Full width within the slide */ border-radius: 10px; overflow: hidden; position: relative; background-size: cover; background-position: center; height: 250px; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.2); margin: 0; } /* Testimonial Content Styling */ .testimonial-content { position: relative; bottom: 0; left: 0; width: 100%; background: rgb(41, 3, 55); padding: 25px; border-radius: 10px; color: white; display: flex; flex-direction: column; align-items: center; /* Center horizontally */ justify-content: center; /* Center vertically */ height: 100%; text-align: center; /* Center text */ } .testimonial-text { width: 100%; display: flex; align-items: center; justify-content: center; } .testimonial-text p { font-size: 16px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: 96px; margin-bottom: 15px; text-align: center; } .testimonial-author { width: 100%; display: flex; flex-direction: column; align-items: center; /* Center the author info horizontally */ margin-top: 10px; } .testimonial-author h4 { font-size: 18px; font-weight: 600; margin: 0 !important; padding: 0 !important; color: var(--color-1); text-align: center; line-height: 1.2; } .testimonial-author p { font-size: 14px; opacity: 0.8; margin: 0 !important; padding: 0 !important; text-align: center; line-height: 1.2; } /* Responsive styles for testimonial section */ @media screen and (max-width: 1200px) { .swiper-container, .swiper-container-2, .swiper-container-3 { width: 90%; } } @media screen and (max-width: 992px) { .swiper-container, .swiper-container-2, .swiper-container-3 { width: 95%; } .swiper-slide-2, .curriculum-item-content-2 { height: 230px; } .testimonial-text p { font-size: 15px; -webkit-line-clamp: 3; line-clamp: 3; max-height: 67.5px; } } @media screen and (max-width: 768px) { .s-testimoni { padding: 60px 0; } .swiper-slide-2, .curriculum-item-content-2 { height: 210px; } .testimonial-content { padding: 20px; } .testimonial-text p { font-size: 14px; line-height: 1.4; -webkit-line-clamp: 3; line-clamp: 3; max-height: 58.8px; margin-bottom: 10px; } .testimonial-author h4 { font-size: 16px; } .testimonial-author p { font-size: 12px; } } @media screen and (max-width: 576px) { .s-testimoni { padding: 50px 0; } .s-testimoni .section-header { padding-bottom: 20px; } .swiper-container, .swiper-container-2, .swiper-container-3 { width: 100%; padding: 20px 15px; } .swiper-slide-2, .curriculum-item-content-2 { height: 200px; } .testimonial-content { padding: 15px; } .testimonial-text p { font-size: 13px; line-height: 1.3; -webkit-line-clamp: 3; line-clamp: 3; max-height: 50.7px; margin-bottom: 8px; } } @media screen and (max-width: 480px) { .s-testimoni { padding: 40px 0; } .swiper-slide-2, .curriculum-item-content-2 { height: 190px; } .testimonial-text p { font-size: 12px; line-height: 1.3; -webkit-line-clamp: 3; line-clamp: 3; max-height: 46.8px; } .testimonial-author h4 { font-size: 14px; } .testimonial-author p { font-size: 11px; } } @media screen and (max-width: 375px) { .swiper-slide-2, .curriculum-item-content-2 { height: 180px; } .testimonial-content { padding: 12px; } .testimonial-text p { font-size: 11px; line-height: 1.2; -webkit-line-clamp: 3; line-clamp: 3; max-height: 39.6px; margin-bottom: 5px; } .testimonial-author h4 { font-size: 13px; } .testimonial-author p { font-size: 10px; } } .s-package { color: white; position: relative; z-index: 2; padding: 100px 0; } .s-package::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(255, 132, 0, 0.4) 0%, rgba(255, 132, 0, 0.1) 30%, rgba(31, 5, 40, 0.4) 50%, rgba(31, 5, 40, 0.4) 70%, rgba(31, 5, 40, 0.1) 100%); z-index: -1; opacity: 0.95; transition: opacity 0.3s ease; } .package-container { display: flex; justify-content: center; flex-wrap: wrap; padding: 40px 0; max-width: 90%; margin: 0 auto; gap: 30px; } .package-item { width: 424px; height: auto; overflow: hidden; border-radius: 10px; border-style: solid; border-color: rgb(238, 96, 40); background-color: rgba(238, 96, 40, 0.4); transition: box-shadow 0.3s ease; position: relative; z-index: 2; padding: 0 30px; transition: all 0.3s ease; display: flex; flex-direction: column; align-self: flex-start; } .package-item:hover { box-shadow: 0 5px 10px var(--color-1); } .package-item > * { opacity: 1; } .package-item .package-category { font-weight: 900; margin-bottom: 0; color: var(--color-white); } .package-item .package-price { font-weight: 900; margin: 0; color: var(--color-white); padding-bottom: 7px; border-bottom: var(--color-1) 2px solid; margin-bottom: 7px; } .package-item .package-price span { font-weight: 300; font-size: var(--text-sm); } .package-item p { font-weight: 500; color: var(--color-white); margin-bottom: 0; } ol.custom-list { list-style: none; padding-left: 0; } ol.custom-list li { position: relative; padding-left: 35px; margin-bottom: 5px; } ol.custom-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border-radius: 4px; background-color:var(--color-white) } ol.custom-list li::after { content: "✓"; position: absolute; left: 4px; top: 0; color: var(--color-1); font-weight: bold; font-size: 16px; } .package-item a { color: var(--color-white); background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); padding: 5px 10px; border-radius: 5px; transition: box-shadow 0.3s ease; border-color: transparent; display: inline-block; /* Makes element only as wide as its content */ width: 100%; transform: scale(1.05); text-align: center; margin-bottom: 40px; margin-top: auto; align-self: center; } .package-item a:hover { box-shadow: 0 5px 10px var(--color-1); color: var(--color-white); } .s-faqs { color: white; position: relative; z-index: 2; padding: 100px 0; } .faqs-container { display: flex; justify-content: space-between; padding: 40px 0; max-width: 80%; margin: 0 auto; } .faqs-title { font-weight: bolder; color: var(--color-white); margin: 0; font-size: var(--text-xl); } .faqs-content { width: 70%; } .faqs-item { border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; margin-bottom: 15px; overflow: hidden; transition: all 0.3s ease; } .faqs-item:hover { border-color: var(--color-1); box-shadow: 0 5px 15px rgba(238, 96, 40, 0.3); } .faqs-question { padding: 15px 20px; margin: 0; font-weight: 500; cursor: pointer; position: relative; display: flex; justify-content: space-between; align-items: center; color: var(--color-white); transition: all 0.3s ease; } .faqs-question::after { content: "+"; font-size: 20px; font-weight: 700; color: var(--color-1); transition: transform 0.3s ease; } .faqs-item.active .faqs-question::after { content: "-"; transform: rotate(180deg); } .faqs-item.active .faqs-question { background-color: rgba(238, 96, 40, 0.2); } .faqs-answer { padding: 0 20px; max-height: 0; overflow: hidden; margin: 0; transition: all 0.3s ease; opacity: 0; color: rgba(255, 255, 255, 0.8); font-weight: 300; } .faqs-item.active .faqs-answer { padding: 0 20px 15px 20px; max-height: 1000px; opacity: 1; } /* Responsive styles */ @media screen and (max-width: 768px) { .faqs-container { max-width: 90%; } .faqs-title { font-size: var(--text-lg); } } @media screen and (max-width: 480px) { .faqs-container { max-width: 95%; } .faqs-question { font-size: 14px; padding: 12px 15px; } .faqs-answer { font-size: 13px; } } .btn-signin { color: var(--color-white); border: var(--color-white) 2px solid; background: transparent; padding: 10px 20px; border-radius: 10px; transition: color 0.3s ease; } .btn-signin span { color: var(--color-white); transition: color 0.3s ease; } .btn-signin:hover { color: var(--color-1); border: var(--color-1) 2px solid; box-shadow: var(--color-1) 0 5px 8px; } .btn-signin:hover span { color: var(--color-1); } .btn-signup { color: var(--color-white); background: linear-gradient(to top, #d44c02 30%, #e67a11 100%); padding: 10px 20px; border-radius: 10px; transition: color 0.3s ease; } .btn-signup span { color: var(--color-white); transition: color 0.3s ease; } .btn-signup:hover { box-shadow: var(--color-1) 0 5px 8px; } .btn-signup span:hover { color: var(--color-white); }