From 03d25b7694814aa12688067e785013de18523d79 Mon Sep 17 00:00:00 2001 From: Aman Kashyap Date: Fri, 31 Oct 2025 07:03:12 +0000 Subject: [PATCH 1/7] postcss build completed --- css/main.css | 4370 +++++--------------------------------------- css/tailwind.css | 3 + package.json | 19 + postcss.config.js | 6 + tailwind.config.js | 13 + 5 files changed, 512 insertions(+), 3899 deletions(-) create mode 100644 css/tailwind.css create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 tailwind.config.js diff --git a/css/main.css b/css/main.css index 7ba232d..ab96d73 100755 --- a/css/main.css +++ b/css/main.css @@ -1,4046 +1,618 @@ -@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&family=Lato:wght@100;300;400;700;900&display=swap'); -/* =================================================================== - * - * Glint v1.0 Main Stylesheet - * 11-20-2017 - * ------------------------------------------------------------------ - * - * TOC: - * # base style overrides - * ## links - * # typography & general theme styles - * ## Lists - * ## responsive video container - * ## floated image - * ## tables - * ## Spacing - * ## pace.js styles - minimal - * # preloader - * # forms - * ## style placeholder text - * ## change autocomplete styles in chrome - * # buttons - * # additional components - * ## alert box - * ## additional typo styles - * ## skillbars - * # reusable and common theme styles - * ## display headings - * ## section header - * ## slick slider - * # header styles - * ## header logo - * ## main navigation - * ## mobile menu toggle - * # home - * ## home content - * ## home social - * ## home animations - * # about - * ## about stats - * # services - * ## services list - * # works - * ## bricks/masonry - * # clients - * ## slider - * ## testimonials - * # contact - * ## loader animation - * # footer - * ## footer main - * ## footer bottom - * ## go to top - * - * - * =================================================================== */ - - -/* =================================================================== - * # base style overrides - * - * ------------------------------------------------------------------- */ -html { - font-size: 10px; -} - -@media only screen and (max-width: 400px) { - html { - font-size: 9.411764705882353px; - } -} - -html, body { - height: 100%; -} +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +}/* +! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com +*//* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; /* 1 */ + border-width: 0; /* 2 */ + border-style: solid; /* 2 */ + border-color: #e5e7eb; /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS +*/ + +html, +:host { + line-height: 1.5; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -moz-tab-size: 4; /* 3 */ + -o-tab-size: 4; + tab-size: 4; /* 3 */ + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ + font-feature-settings: normal; /* 5 */ + font-variation-settings: normal; /* 6 */ + -webkit-tap-highlight-color: transparent; /* 7 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ body { - background: #ffffff; - font-family: 'Inconsolata', monospace; - font-size: 2rem; - font-style: normal; - font-weight: normal; - line-height: 1.765; - color: #000000; - margin: 0; - padding: 0; - /* overflow: hidden; */ - -} - - -/* ------------------------------------------------------------------- - * ## links - * ------------------------------------------------------------------- */ -a { - color: #0087cc; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; -} - -a:hover, a:focus, a:active { - color: #ff904d; -} - -a:hover, a:active { - outline: 0; -} - - - -/* =================================================================== - * # typography & general theme styles - * - * ------------------------------------------------------------------- */ -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 { - font-family: 'Lato', sans-serif; - color: rgb(47 43 40);; - font-style: normal; - font-weight: normal; - text-rendering: optimizeLegibility; -} - -h1, .h1, h2, .h2, h3, .h3, h4, .h4 { - margin-top: 6rem; - margin-bottom: 1.8rem; + margin: 0; /* 1 */ + line-height: inherit; /* 2 */ } -@media only screen and (max-width: 600px) { - h1, .h1, h2, .h2, h3, .h3, h4, .h4 { - margin-top: 5.1rem; - } -} - -h5, .h5, h6, .h6 { - margin-top: 4.2rem; - margin-bottom: 1.5rem; -} - -@media only screen and (max-width: 600px) { - h5, .h5, h6, .h6 { - margin-top: 3.6rem; - margin-bottom: 0.9rem; - } -} - -h1, .h1 { - font-size: 3.6rem; - line-height: 1.25; - letter-spacing: -.1rem; -} - -@media only screen and (max-width: 600px) { - h1, .h1 { - font-size: 3.3rem; - letter-spacing: -.07rem; - } -} - -h2, .h2 { - font-size: 26px; - line-height: 1.3; -} - -h3, .h3 { - font-size: 2.4rem; - line-height: 1.25; -} - -h4, .h4 { - font-size: 2.1rem; - line-height: 1.286; -} +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ -h5, .h5 { - font-size: 1.6rem; - line-height: 1.313; -} - -h6, .h6 { - font-size: 1.3rem; - line-height: 1.385; - text-transform: uppercase; - letter-spacing: .16rem; -} - -p img { - margin: 0; -} - -p.lead { - font-family: "montserrat-regular", sans-serif; - font-size: 2rem; - font-weight: 300; - line-height: 1.8; - margin-bottom: 3.6rem; - color: #6f0a0d; -} - -@media only screen and (max-width: 800px) { - p.lead { - font-size: 1.8rem; - } -} - -em, i, strong, b { - font-size: inherit; - line-height: inherit; - font-style: normal; - font-weight: normal; -} - -em, i { - font-family: "lora-italic", serif; -} - -strong, b { - font-family: 'Lato', sans-serif; - font-weight: 600; +hr { + height: 0; /* 1 */ + color: inherit; /* 2 */ + border-top-width: 1px; /* 3 */ } -small { - font-size: 1.2rem; - line-height: inherit; -} +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ -blockquote { - margin: 3.9rem 0; - padding-left: 4.5rem; - position: relative; +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; } -blockquote:before { - content: "\201C"; - font-size: 10rem; - line-height: 0px; - margin: 0; - color: rgba(0, 0, 0, 0.25); - font-family: arial, sans-serif; - position: absolute; - top: 3.6rem; - left: 0; -} +/* +Remove the default font size and weight for headings. +*/ -blockquote p { - font-family: "montserrat-regular", sans-serif; - padding: 0; - font-size: 2.1rem; - line-height: 1.857; - color: #6f0a0d; +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; } -blockquote cite { - display: block; - font-family: "montserrat-regular", sans-serif; - font-size: 1.4rem; - font-style: normal; - line-height: 1.5; -} +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ -blockquote cite:before { - content: "\2014 \0020"; +a { + color: inherit; + text-decoration: inherit; } -blockquote cite a, blockquote cite a:visited { - color: #6f0a0d; - border: none; -} +/* +Add the correct font weight in Edge and Safari. +*/ -abbr { - font-family: "lora-bold", serif; - font-variant: small-caps; - text-transform: lowercase; - letter-spacing: .05rem; - color: #6f0a0d; +b, +strong { + font-weight: bolder; } -var, kbd, samp, code, pre { - font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; -} +/* +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. +*/ +code, +kbd, +samp, pre { - padding: 2.4rem 3rem 3rem; - background: #F1F1F1; - overflow-x: auto; -} - -code { - font-size: 1.4rem; - margin: 0 .2rem; - padding: .3rem .6rem; - white-space: nowrap; - background: #F1F1F1; - border: 1px solid #E1E1E1; - border-radius: 3px; -} - -pre > code { - display: block; - white-space: pre; - line-height: 2; - padding: 0; - margin: 0; -} - -pre.prettyprint > code { - border: none; -} - -del { - text-decoration: line-through; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ + font-feature-settings: normal; /* 2 */ + font-variation-settings: normal; /* 3 */ + font-size: 1em; /* 4 */ } -abbr[title], dfn[title] { - border-bottom: 1px dotted; - cursor: help; - text-decoration: none; -} - -mark { - background: #ffd900; - color: #6f0a0d; -} - -hr { - border: solid rgba(0, 0, 0, 0.1); - border-width: 1px 0 0; - clear: both; - margin: 2.4rem 0 1.5rem; - height: 0; -} - - -/* ------------------------------------------------------------------- - * ## Lists - * ------------------------------------------------------------------- */ -ol { - list-style: decimal; -} - -ul { - list-style: disc; -} - -li { - display: list-item; -} - -ol, ul { - margin-left: 1.7rem; -} +/* +Add the correct font size in all browsers. +*/ -ul li { - padding-left: .4rem; -} - -ul ul, ul ol, ol ol, ol ul { - margin: .6rem 0 .6rem 1.7rem; -} - -ul.disc li { - display: list-item; - list-style: none; - padding: 0 0 0 .8rem; - position: relative; -} - -ul.disc li::before { - content: ""; - display: inline-block; - width: 8px; - height: 8px; - border-radius: 50%; - background: #ff904d; - position: absolute; - left: -17px; - top: 11px; - vertical-align: middle; -} - -dt { - margin: 0; - color: #ff904d; -} - -dd { - margin: 0 0 0 2rem; +small { + font-size: 80%; } +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ -/* ------------------------------------------------------------------- - * ## responsive video container - * ------------------------------------------------------------------- */ -.video-container { - position: relative; - padding-bottom: 56.25%; - height: 0; - overflow: hidden; -} - -.video-container iframe, -.video-container object, -.video-container embed, -.video-container video { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } - -/* ------------------------------------------------------------------- - * ## floated image - * ------------------------------------------------------------------- */ -img.pull-right { - margin: 1.5rem 0 0 3rem; +sub { + bottom: -0.25em; } -img.pull-left { - margin: 1.5rem 3rem 0 0; +sup { + top: -0.5em; } +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ -/* ------------------------------------------------------------------- - * ## tables - * ------------------------------------------------------------------- */ table { - border-width: 0; - width: 100%; - max-width: 100%; - font-family: "lora-regular", serif; + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ + border-collapse: collapse; /* 3 */ } -th, td { - padding: 1.5rem 3rem; - text-align: left; - border-bottom: 1px solid #E8E8E8; -} - -th { - color: #6f0a0d; - font-family: "montserrat-bold", sans-serif; -} - -td { - line-height: 1.5; -} - -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; -} - - -/* ------------------------------------------------------------------- - * ## Spacing - * ------------------------------------------------------------------- */ -button, .btn { - margin-bottom: 1.2rem; -} - -fieldset { - margin-bottom: 1.5rem; -} +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ +button, input, -textarea, +optgroup, select, -pre, -blockquote, -figure, -table, -p, -ul, -ol, -dl, -form, -.video-container, -.cl-custom-select { - margin-bottom: 3rem; -} - - -/* ------------------------------------------------------------------- - * ## pace.js styles - minimal - * ------------------------------------------------------------------- */ -.pace { - -webkit-pointer-events: none; - pointer-events: none; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -.pace-inactive { - display: none; -} - -.pace .pace-progress { - background: #ff904d; - position: fixed; - z-index: 900; - top: 0; - right: 100%; - width: 100%; - height: 4px; -} - -.oldie .pace { - display: none; -} - - - -/* =================================================================== - * # preloader - * - * ------------------------------------------------------------------- */ -#preloader { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: #050505; - z-index: 9999999; - height: 100%; - width: 100%; - display: table; -} - -.no-js #preloader, .oldie #preloader { - display: none; -} - -#loader { - display: table-cell; - text-align: center; - vertical-align: middle; -} - -.line-scale-pulse-out > div { - background-color: #ff904d; - width: 4px; - height: 35px; - border-radius: 2px; - margin: 2px; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - display: inline-block; - -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); - animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); -} - -.line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) { - -webkit-animation-delay: -0.4s !important; - animation-delay: -0.4s !important; -} - -.line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) { - -webkit-animation-delay: -0.2s !important; - animation-delay: -0.2s !important; -} - -@-webkit-keyframes line-scale-pulse-out { - 0% { - -webkit-transform: scaley(1); - transform: scaley(1); - } - 50% { - -webkit-transform: scaley(0.4); - transform: scaley(0.4); - } - 100% { - -webkit-transform: scaley(1); - transform: scaley(1); - } -} - -@keyframes line-scale-pulse-out { - 0% { - -webkit-transform: scaley(1); - transform: scaley(1); - } - 50% { - -webkit-transform: scaley(0.4); - transform: scaley(0.4); - } - 100% { - -webkit-transform: scaley(1); - transform: scaley(1); - } -} - - - -/* =================================================================== - * # forms - * - * ------------------------------------------------------------------- */ -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 { - display: block; - height: 6rem; - padding: 1.5rem 0; - border: 0; - outline: none; - color: #333333; - font-family: "montserrat-light", sans-serif; - font-size: 1.4rem; - line-height: 3rem; - max-width: 100%; - background: transparent; - border-bottom: 2px solid rgba(0, 0, 0, 0.15); - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; -} - -.cl-custom-select { - position: relative; - padding: 0; -} - -.cl-custom-select select { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - -o-appearance: none; - appearance: none; - text-indent: 0.01px; - text-overflow: ''; - margin: 0; - line-height: 3rem; - vertical-align: middle; -} - -.cl-custom-select select option { - padding-left: 2rem; - padding-right: 2rem; -} - -.cl-custom-select select::-ms-expand { - display: none; -} - -.cl-custom-select::after { - border-bottom: 2px solid rgba(0, 0, 0, 0.5); - border-right: 2px solid rgba(0, 0, 0, 0.5); - content: ''; - display: block; - height: 8px; - width: 8px; - margin-top: -7px; - pointer-events: none; - position: absolute; - right: 2.4rem; - top: 50%; - -webkit-transform-origin: 66% 66%; - -ms-transform-origin: 66% 66%; - transform-origin: 66% 66%; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transition: all 0.15s ease-in-out; - transition: all 0.15s ease-in-out; -} - - -/* IE9 and below */ - -.oldie .cl-custom-select::after { - display: none; -} - textarea { - min-height: 25rem; -} - -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: #6f0a0d; - border-bottom: 2px solid #6f0a0d; -} - -label, legend { - font-family: "montserrat-regular", sans-serif; - font-size: 1.4rem; - font-weight: bold; - margin-bottom: .9rem; - line-height: 1.714; - color: #6f0a0d; - display: block; -} - -input[type="checkbox"], input[type="radio"] { - display: inline; -} - -label > .label-text { - display: inline-block; - margin-left: 1rem; - font-family: "montserrat-regular", sans-serif; - font-weight: normal; - line-height: inherit; -} - -label > input[type="checkbox"], -label > input[type="radio"] { - margin: 0; - position: relative; - top: .15rem; -} - - -/* ------------------------------------------------------------------- - * ## style placeholder text - * ------------------------------------------------------------------- */ -::-webkit-input-placeholder { - color: #6f0a0d; -} - -:-moz-placeholder { - color: #6f0a0d; - /* Firefox 18- */ -} - -::-moz-placeholder { - color: #6f0a0d; - /* Firefox 19+ */ -} - -:-ms-input-placeholder { - color: #6f0a0d; -} - -.placeholder { - color: #6f0a0d !important; -} - + font-family: inherit; /* 1 */ + font-feature-settings: inherit; /* 1 */ + font-variation-settings: inherit; /* 1 */ + font-size: 100%; /* 1 */ + font-weight: inherit; /* 1 */ + line-height: inherit; /* 1 */ + letter-spacing: inherit; /* 1 */ + color: inherit; /* 1 */ + margin: 0; /* 2 */ + padding: 0; /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ -/* ------------------------------------------------------------------- - * ## change autocomplete styles in chrome - * ------------------------------------------------------------------- */ -input:-webkit-autofill, -input:-webkit-autofill:hover, -input:-webkit-autofill:focus input:-webkit-autofill, -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: #ff904d; - transition: background-color 5000s ease-in-out 0s; -} - - - -/* =================================================================== - * # buttons - * - * ------------------------------------------------------------------- */ -.btn, button, -input[type="submit"], -input[type="reset"], -input[type="button"] { - display: inline-block; - font-family: "Inconsolata", monospace; - font-size: 1.8rem; - font-weight: 600; - /* text-transform: uppercase; */ - letter-spacing: .3rem; - height: 5.4rem; - line-height: calc(5.4rem - .4rem); - padding: 0 3rem; - margin: 0 .3rem 1.2rem 0; - color: #6f0a0d; - text-decoration: none; - text-align: center; - white-space: nowrap; - cursor: pointer; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; - background-color: #6f0a0d; - border: .2rem solid #6f0a0d; -} - -.btn:hover, -button:hover, -input[type="submit"]:hover, -input[type="reset"]:hover, -input[type="button"]:hover, -.btn:focus, -button:focus, -input[type="submit"]:focus, -input[type="reset"]:focus, -input[type="button"]:focus { - background-color: #b8b8b8; - border-color: #b8b8b8; - color: #6f0a0d; - 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: #ff904d; - border-color: #ff904d; - color: #FFFFFF; -} - -.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, -.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 { - background: #33a242; - border-color: #33a242; -} - - -/* button modifiers - * ------------------------------------------------- */ - -.btn.full-width, button.full-width { - width: 100%; - margin-right: 0; -} - -.btn--medium, button.btn--medium { - height: 5.7rem !important; - line-height: calc(5.7rem - .4rem) !important; -} - -.btn--large, button.btn--large { - height: 6rem !important; - line-height: calc(6rem - .4rem) !important; -} - -.btn--stroke, button.btn--stroke { - /* background: transparent !important; */ - border: 0.2rem solid #ff904d; - color: #ff904d; -} - -.btn--stroke:hover, button.btn--stroke:hover { - border: 0.2rem solid #6f0a0d; - color: #6f0a0d; -} - -.btn--pill, button.btn--pill { - padding-left: 3rem !important; - padding-right: 3rem !important; - border-radius: 1000px !important; -} - -button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; -} - - -/* =================================================================== - * # additional components - * - * ------------------------------------------------------------------- */ - - -/* ------------------------------------------------------------------- - * ## alert box - * ------------------------------------------------------------------- */ -.alert-box { - padding: 2.1rem 4rem 2.1rem 3rem; - position: relative; - margin-bottom: 3rem; - border-radius: 3px; - font-family: "montserrat-regular", sans-serif; - font-size: 1.5rem; - line-height: 1.6; -} - -.alert-box__close { - position: absolute; - right: 1.8rem; - top: 1.8rem; - cursor: pointer; -} - -.alert-box__close.fa { - font-size: 12px; -} - -.alert-box--error { - background-color: #ffd1d2; - color: #e65153; -} - -.alert-box--success { - background-color: #c8e675; - color: #758c36; -} - -.alert-box--info { - background-color: #d7ecfb; - color: #4a95cc; -} - -.alert-box--notice { - background-color: #fff099; - color: #bba31b; -} - - -/* ------------------------------------------------------------------- - * ## additional typo styles - * ------------------------------------------------------------------- */ - - -/* drop cap - * ----------------------------------------------- */ -.drop-cap:first-letter { - float: left; - margin: 0; - padding: 1.5rem .6rem 0 0; - font-size: 8.4rem; - font-family: "montserrat-regular", sans-serif; - font-weight: bold; - line-height: 6rem; - text-indent: 0; - background: transparent; - color: #6f0a0d; -} - - -/* line definition 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; -} - - -/* dictionary definition 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) ". "; -} - - -/** - * Pull Quotes - * ----------- - * markup: - * - * - * - * --------------------------------------------------------------------- */ - -.pull-quote { - position: relative; - padding: 2.1rem 3rem 2.1rem 0px; -} - -.pull-quote:before, .pull-quote:after { - height: 1em; - position: absolute; - font-size: 10rem; - font-family: Arial, Sans-Serif; - color: rgba(0, 0, 0, 0.25); -} - -.pull-quote:before { - content: "\201C"; - top: -3.6rem; - left: 0; -} - -.pull-quote:after { - content: '\201D'; - bottom: 3.6rem; - right: 0; -} - -.pull-quote blockquote { - margin: 0; -} - -.pull-quote blockquote:before { - content: none; -} - - -/** - * Stats Tab - * --------- - * markup: - * - * - * - * Extend this object into your markup. - * - * --------------------------------------------------------------------- */ - -.stats-tabs { - padding: 0; - margin: 3rem 0; -} - -.stats-tabs li { - display: inline-block; - margin: 0 1.5rem 3rem 0; - padding: 0 1.5rem 0 0; - border-right: 1px solid rgba(0, 0, 0, 0.1); -} - -.stats-tabs li:last-child { - margin: 0; - padding: 0; - border: none; -} - -.stats-tabs li a { - display: inline-block; - font-size: 2.5rem; - font-family: "montserrat-regular", sans-serif; - font-weight: bold; - border: none; - color: #6f0a0d; -} - -.stats-tabs li a:hover { - color: #ff904d; -} - -.stats-tabs li a em { - display: block; - margin: .6rem 0 0 0; - font-size: 1.4rem; - font-family: "montserrat-regular", sans-serif; - color: #6f0a0d; -} - - -/* ------------------------------------------------------------------- - * ## skillbars - * ------------------------------------------------------------------- */ -.skill-bars { - list-style: none; - margin: 6rem 0 3rem; -} - -.skill-bars li { - height: .6rem; - background: #c9c9c9; - width: 100%; - margin-bottom: 6.9rem; - padding: 0; - position: relative; -} - -.skill-bars li strong { - position: absolute; - left: 0; - top: -3rem; - font-family: "montserrat-bold", sans-serif; - color: #6f0a0d; - text-transform: uppercase; - letter-spacing: .2rem; - font-size: 1.4rem; - line-height: 2.4rem; -} - -.skill-bars li .progress { - background: #6f0a0d; - position: relative; - height: 100%; -} - -.skill-bars li .progress span { - position: absolute; - right: 0; - top: -3.6rem; - display: block; - font-family: "montserrat-regular", sans-serif; - color: #FFFFFF; - font-size: 1.1rem; - line-height: 1; - background: #6f0a0d; - padding: .6rem .6rem; - border-radius: 3px; -} - -.skill-bars li .progress span::after { - position: absolute; - left: 50%; - bottom: -5px; - margin-left: -5px; - border-right: 5px solid transparent; - border-left: 5px solid transparent; - border-top: 5px solid #6f0a0d; - 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%; } - - - -/* =================================================================== - * # reusable and common theme styles - * - * ------------------------------------------------------------------- */ -.wide { - max-width: 1400px; -} - -.narrow { - max-width: 800px; -} - - -/* ------------------------------------------------------------------- - * ## display headings - * ------------------------------------------------------------------- */ -.display-1 { - font-family: 'Lato', sans-serif; - font-size: 6.3rem; - line-height: 1.25; - color: #6f0a0d; - margin-top: 0; -} - -.display-1--light { - color: #F89559; -} - -.display-2 { - font-family: 'Lato', sans-serif; - font-size: 6.3rem; - line-height: 1.255; - color: #F89559; - margin-top: 0; -} - -.display-2--light { - color: rgb(239 130 63); -} - -.subhead + .display-2 { - margin-top: .6rem; -} - -.subhead { - font-family: 'Inconsolata', monospace; - font-size: 1.7rem; - line-height: 1.333; - text-transform: uppercase; - letter-spacing: .25rem; - color: #ff7559; - margin-top: 0; - margin-bottom: 0; -} - -.subhead--dark { - color: #6f0a0d; -} - - -/* ------------------------------------------------------------------- - * responsive: - * display headings - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1200px) { - .display-1 { - font-size: 7.2rem; - } - .display-2 { - font-size: 4.4rem; - } -} - -@media only screen and (max-width: 800px) { - .display-1 { - font-size: 6.5rem; - } - .display-2 { - font-size: 4rem; - } -} - -@media only screen and (max-width: 600px) { - .display-1 { - font-size: 5rem; - } - .display-2 { - font-size: 3.3rem; - } - .subhead { - font-size: 1.5rem; - } -} - -@media only screen and (max-width: 400px) { - .display-1 { - font-size: 4.2rem; - } - .display-2 { - font-size: 3rem; - } -} - - -/* ------------------------------------------------------------------- - * ## section header - * ------------------------------------------------------------------- */ -.section-header { - text-align: center; - position: relative; - margin-bottom: 3.6rem; - max-width: 960px; -} - -.section-header.has-bottom-sep { - padding-bottom: 2.1rem; - position: relative; -} - -.section-header.has-bottom-sep::before { - content: ""; - display: inline-block; - height: 1px; - width: 550px; - background-color: rgba(0, 0, 0, 0.1); - position: absolute; - bottom: 0; - left: 50%; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%); -} - -.section-header.has-bottom-sep.light-sep::before { - background-color: rgba(255, 255, 255, 0.05); -} - - -/* ------------------------------------------------------------------- - * responsive: - * section-header - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1200px) { - .section-header { - max-width: 800px; - } -} - -@media only screen and (max-width: 900px) { - .section-header { - max-width: 700px; - } -} - -@media only screen and (max-width: 800px) { - .s-clients { - padding-bottom: 17.4rem; - } - .section-header.has-bottom-sep::before { - width: 400px; - } -} - -@media only screen and (max-width: 600px) { - .section-header.has-bottom-sep { - padding-bottom: 0; - } - .section-header.has-bottom-sep::before { - width: 250px; - } -} - - -/* ------------------------------------------------------------------- - * ## slick slider - * ------------------------------------------------------------------- */ -.slick-slider .slick-slide { - outline: none; -} - -.slick-slider .slick-dots { - display: block; - list-style: none; - width: 100%; - padding: 0; - margin: 3rem 0 0 0; - text-align: center; - position: absolute; - top: 100%; - left: 0; -} - -.slick-slider .slick-dots li { - display: inline-block; - width: 27px; - height: 27px; - margin: 0; - padding: 9px; - cursor: pointer; -} - -.slick-slider .slick-dots li button { - display: block; - width: 10px; - height: 10px; - border-radius: 50%; - background: white; - border: none; - line-height: 10px; - padding: 0; - margin: 0; - cursor: pointer; - font: 0/0 a; - text-shadow: none; - color: transparent; -} - -.slick-slider .slick-dots li button:hover, -.slick-slider .slick-dots li button:focus { - outline: none; -} - -.slick-slider .slick-dots li.slick-active button, -.slick-slider .slick-dots li:hover button { - background: #ff904d; -} - - - -/* =================================================================== - * # header styles - * - * ------------------------------------------------------------------- */ -.s-header { - width: 100%; - height: 96px; - background-color: transparent; - position: absolute; - top: 0; - z-index: 500; -} - - -/* ------------------------------------------------------------------- - * ## header logo - * ------------------------------------------------------------------- */ -.header-logo { - display: inline-block; - position: absolute; - margin: 0; - padding: 0; - left: 40px; - top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); - z-index: 501; -} - -.header-logo a { - display: block; - margin: 9px 0 0 0; - padding: 0; - outline: 0; - border: none; - width: 80px; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; -} - - -/* ------------------------------------------------------------------- - * ## main navigation - * ------------------------------------------------------------------- */ -.header-nav { - /* background: white; */ - background: rgba(255,255,255,0.8); - border: 1px solid black; - backdrop-filter: blur(10px); - color: rgba(255, 255, 255, 0.25); - font-family: "montserrat-light", sans-serif; - font-size: 1.3rem; - line-height: 1.846; - padding: 3.6rem 3rem 3.6rem 3.6rem; - height: 100%; - width: 280px; - position: fixed; - right: 0; - top: 0; - z-index: 700; - overflow-y: auto; - overflow-x: hidden; - -webkit-transition: all 0.5s ease; - transition: all 0.5s ease; - -webkit-transform: translateZ(0); - -webkit-backface-visibility: hidden; - -webkit-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - visibility: hidden; -} - -.header-nav a, .header-nav a:visited { - color: rgba(255, 255, 255, 0.5); -} - -.header-nav a:hover, -.header-nav a:focus, -.header-nav a:active { - color: orange; -} - -.header-nav h3 { - font-family: "Inconsolata-semibold", monospace; - font-size: 26 px; - font-weight: bold; - line-height: 0.5; - text-transform: normal; - letter-spacing: .25rem; - margin-bottom: 2.8rem; - margin-top: .9rem; - color: #E35134; -} - -.header-nav p { - margin-bottom: 2.7rem; -} - -.header-nav__content { - position: relative; - left: 50px; - opacity: 0; - visibility: hidden; -} - -.header-nav__list { - font-family: 'Inconsolata', monospace; - font-size: 2rem; - margin: 3.6rem 0 3rem 0; - padding: 0 0 1.8rem 0; - list-style: none; -} - -.header-nav__list li { - padding-left: 0; - line-height: 4.5rem; -} - -.header-nav__list a, -.header-nav__list a:visited { - color: #6f0a0d; -} - -.header-nav__social { - list-style: none; - display: inline-block; - margin: 0; - font-size: 1.8rem; -} - -.header-nav__social li { - margin-right: 12px; - padding-left: 0; - display: inline-block; -} - -.header-nav__social li a { - color: #6f0a0d !important; -} - -.header-nav__social li a:hover, -.header-nav__social li a:focus { - color: #ff904d !important; -} - -.header-nav__social li:last-child { - margin: 0; -} - -.header-nav__close { - display: block; - height: 30px; - width: 30px; - border-radius: 3px; - background-color: rgba(0, 0, 0, 0.3); - position: absolute; - top: 36px; - right: 30px; - font: 0/0 a; - text-shadow: none; - color: transparent; - z-index: 800; -} - -.header-nav__close span::before, -.header-nav__close span::after { - content: ""; - display: block; - height: 2px; - width: 12px; - background-color: #6f0a0d ; - position: absolute; - top: 50%; - left: 9px; - margin-top: -1px; -} - -.header-nav__close span::before { - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -.header-nav__close span::after { - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} - - -/* menu is open - * ----------------------------------------------- */ -.menu-is-open .header-nav { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - visibility: visible; - -webkit-overflow-scrolling: touch; -} - -.menu-is-open .header-nav .header-nav__content { - opacity: 1; - visibility: visible; - -webkit-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.5s; - transition-duration: 0.5s; - -webkit-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; - -webkit-transition-delay: 0.3s; - transition-delay: 0.3s; - left: 0; -} - - -/* ------------------------------------------------------------------- - * ## mobile menu toggle - * ------------------------------------------------------------------- */ -.header-menu-toggle { - position: fixed; - right: 38px; - top: 24px; - height: 42px; - width: 42px; - line-height: 42px; - font-family: 'Inconsolata', monospace; - font-size: 1.6rem; - font-weight: 800; - text-transform: uppercase; - letter-spacing: .3rem; - color: #00163D; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; -} - -.header-menu-toggle.opaque { - background-color: #ffffff - ; -} - -.header-menu-toggle.opaque .header-menu-text { - background-color: #ffffff ; -} - -.header-menu-toggle:hover, .header-menu-toggle:focus { - color: #00163D; -} - -.header-menu-text { - display: block; - position: absolute; - top: 0; - left: -70px; - width: 70px; - padding-left: 12px; -} - -.header-menu-icon { - display: block; - width: 22px; - height: 2px; - margin-top: -1px; - position: absolute; - left: 10px; - top: 50%; - right: auto; - bottom: auto; - background-color: #121212; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; -} - -.header-menu-icon::before, .header-menu-icon::after { - content: ''; - width: 100%; - height: 100%; - background-color: inherit; - position: absolute; - left: 0; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; -} - -.header-menu-icon::before { - top: -9px; -} - -.header-menu-icon::after { - bottom: -9px; -} - - -/* ------------------------------------------------------------------- - * responsive: - * header - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 600px) { - .s-header { - height: 90px; - } - .header-logo { - left: 30px; - } - .header-menu-toggle { - right: 25px; - } -} - -@media only screen and (max-width: 400px) { - .header-menu-text { - display: none; - } -} - - - -/* =================================================================== - * # home - * - * ------------------------------------------------------------------- */ -.s-home { - width: 100%; - height: 100%; - min-height: 786px; - background-color: transparent; - position: relative; - display: table; -} - -.s-home .shadow-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: .4; - background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 100%); - background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 100%); - background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.8) 100%); - filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#6f0a0d00', endColorstr='#cc000000', GradientType=0); -} - -.s-home .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: .6; - background-color: #FFFFFF; -} - -.no-js .s-home { - background: #6f0a0d; -} - - -/* ------------------------------------------------------------------- - * ## home content - * ------------------------------------------------------------------- */ -.home-content { - display: table-cell; - width: 100%; - height: 100%; - vertical-align: middle; - padding-bottom: 15.6rem; - position: relative; - overflow: hidden; -} - -.home-content h3 { - font-family: 'Insolata', monospace; - font-size: 1.6rem; - color: #121212; - /* text-transform: uppercase; */ - letter-spacing: .3rem; - position: relative; - margin-top: 0; - margin-bottom: 1.2rem; - margin-left: 6px; - font-weight: normal; -} - -.home-content h1 { - font-family: 'Lato', sans-serif; - font-size: 6.3rem; - line-height: 1.333; - margin-top: 0; - color: #FF914D; - font-weight: 800; -} - -.home-content__main { - padding-top: 24rem; - position: relative; -} - -.home-content__buttons { - padding-top: 3rem; - text-align: left; -} - -.home-content__buttons .btn { - width: 215px; - border-color: #121212; - color: #00163D; - margin: 1.5rem 1.5rem 0 0; - letter-spacing: .25rem; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; -} - -.btn2 { - width: 215px; - border-color: #121212; - color: #00163D; - margin: 1.5rem 1.5rem 0 0; - letter-spacing: .25rem; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; -} - -.home-content__buttons .btn:last-child { - margin-right: 0; -} - -.home-content__buttons .btn:hover, -.home-content__buttons .btn:focus { - background: #FFFFFF !important; - color: #6f0a0d; -} - -.home-content__scroll { - position: absolute; - right: 9.5rem; - bottom: 8.4rem; - font-weight: 800; -} - -.home-content__scroll a { - font-family: 'Inconsolata', monospace; - font-size: 1.3rem; - text-transform: uppercase; - letter-spacing: .3rem; - color: #00163D; - position: relative; - display: inline-block; - line-height: 3rem; - padding-left: 2.5rem; -} - -.home-content__scroll a::before { - border-bottom: 2px solid #121212; - border-right: 2px solid #121212; - content: ''; - display: block; - height: 8px; - width: 8px; - margin-top: -6px; - pointer-events: none; - position: absolute; - left: 0; - top: 50%; - -webkit-transform-origin: 66% 66%; - -ms-transform-origin: 66% 66%; - transform-origin: 66% 66%; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transition: all 0.15s ease-in-out; - transition: all 0.15s ease-in-out; -} - -.home-content__line { - display: block; - width: 2px; - height: 10.2rem; - background-color: #ff904d; - position: absolute; - right: 7.2rem; - bottom: 0; -} - -.bunny { - margin: 0; - position: absolute; - top: 52%; - right: 20.4rem; - -webkit-transform: translate3d(0, -50%, 0); - -ms-transform: translate3d(0, -50%, 0); - transform: translate3d(0, -50%, 0); -} - -/* ------------------------------------------------------------------- - * ## home social - * ------------------------------------------------------------------- */ -.home-social { - font-family: "Inconsolata", monospace; - list-style: none; - margin: 0; - position: absolute; - top: 50%; - right: 5.4rem; - -webkit-transform: translate3d(0, -50%, 0); - -ms-transform: translate3d(0, -50%, 0); - transform: translate3d(0, -50%, 0); -} - -.home-social a { - color: rgb(0, 0, 0); - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; -} - -.home-social li { - position: relative; - padding: .9rem 0; -} - -.home-social li a { - display: block; - width: 33px; - height: 33px; -} - -.home-social i, .home-social span { - position: absolute; - top: 0; - line-height: 33px; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; -} - -.home-social i { - font-size: 14px; - right: 0; - text-align: center; - display: inline-block; - width: 33px; - height: 33px; - line-height: calc(33px - 4px); - border: 2px solid #000000; - border-radius: 50%; -} - -.home-social span { - color: #00163D; - right: 4.5rem; - font-size: 1.5rem; - opacity: 0; - visibility: hidden; - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - -webkit-transform-origin: 100% 50%; - -ms-transform-origin: 100% 50%; - transform-origin: 100% 50%; -} - -.home-social li:hover span { - opacity: 1; - visibility: visible; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} - - -/* animate .home-content__main - * ------------------------------------------------------------------- */ -html.cl-preload .home-content__main { - opacity: 0; -} - -html.cl-loaded .home-content__main { - animation-duration: 1s; - -webkit-animation-name: fadeIn; - animation-name: fadeIn; -} - -html.no-csstransitions .home-content__main { - opacity: 1; -} - - -/* ------------------------------------------------------------------- - * ## home animations - * ------------------------------------------------------------------- */ - - -/* fade in */ - -@-webkit-keyframes fadeIn { - from { - opacity: 0; - -webkit-transform: translate3d(0, 150%, 0); - -ms-transform: translate3d(0, 150%, 0); - transform: translate3d(0, 150%, 0); - } - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes fadeIn { - from { - opacity: 0; - -webkit-transform: translate3d(0, 150%, 0); - -ms-transform: translate3d(0, 150%, 0); - transform: translate3d(0, 150%, 0); - } - to { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - - -/* fade out */ - -@-webkit-keyframes fadeOut { - from { - opacity: 1; - } - to { - opacity: 0; - -webkit-transform: translate3d(0, -150%, 0); - -ms-transform: translate3d(0, -150%, 0); - transform: translate3d(0, -150%, 0); - } -} - -@keyframes fadeOut { - from { - opacity: 1; - } - to { - opacity: 0; - -webkit-transform: translate3d(0, -150%, 0); - -ms-transform: translate3d(0, -150%, 0); - transform: translate3d(0, -150%, 0); - } -} - - -/* ------------------------------------------------------------------- - * responsive: - * home - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1500px) { - .home-content h1 { - font-size: 6rem; - } - .home-content__main { - max-width: 1000px; - } -} - -@media only screen and (max-width: 1200px) { - .home-content h1 { - font-size: 5.5rem; - } - .home-content__main { - max-width: 800px; - } -} - -@media only screen and (max-width: 1000px) { - .home-content h1 { - font-size: 4.6rem; - } - .home-content br { - display: none; - } - .home-content__main { - padding-top: 21rem; - padding-right: 80px; - max-width: 680px; - } -} - -@media only screen and (max-width: 800px) { - .home-content h3 { - font-size: 1.5rem; - } - .home-content h1 { - font-size: 4rem; - } - .home-content__main { - padding-right: 70px; - max-width: 550px; - } -} - -@media only screen and (max-width: 700px) { - .home-content__main { - max-width: 490px; - } - .home-content__buttons { - padding-top: 1.2rem; - text-align: center; - } - .home-content__buttons .btn { - display: block; - width: 70%; - margin: 1.5rem 0 0 0; - } - .home-social { - right: 4rem; - } - .home-content__scroll { - right: 7.5rem; - } - .home-content__line { - right: 5.5rem; - } -} - -@media only screen and (max-width: 600px) { - .home-content h1 { - font-size: 3.8rem; - } - .home-social { - right: 2rem; - } - .home-social li { - padding: .6rem 0; - } - .home-social i { - font-size: 17px; - border: none; - } - .home-social span { - display: none; - } - .home-content__scroll { - bottom: 5.4rem; - } - .home-content__line { - height: 7.2rem; - } -} - -@media only screen and (max-width: 500px) { - .s-home { - min-height: 642px; - } - .home-content h1 { - font-size: 3.5rem; - } - .home-content__main { - text-align: center; - max-width: none; - padding-top: 15rem; - padding-right: 25px; - width: 85%; - } - .home-content__buttons { - padding-top: 1.2rem; - } - .home-content__buttons .btn { - width: auto; - margin: 1.5rem 0 0 0; - } - .home-social { - display: none; - } -} - -@media only screen and (max-width: 450px) { - .home-content h1 { - font-size: 3.3rem; - } -} - -@media only screen and (max-width: 400px) { - .s-home { - min-height: 630px; - } - .home-content h1 { - font-size: 3.2rem; - } - .home-content__main { - padding-top: 16.2rem; - width: auto; - } -} - - - -/* =================================================================== - * # about - * - * ------------------------------------------------------------------- */ -.s-about { - padding-top: 16.2rem; - padding-bottom: 15rem; - background-color: #FFFFFF; - color: #010507; - position: relative; -} - -.s-about .section-header.has-bottom-sep::before { - background-color: rgba(255, 255, 255, 0.25); -} - -.about-desc { - font-size: 2.4rem; - line-height: 1.75; - text-align: center; - max-width: 1024px; -} - - -/* ------------------------------------------------------------------- - * ## about stats - * ------------------------------------------------------------------- */ -.about-stats { - text-align: center; -} - -.stats__col { - margin: 5.4rem 0; - padding: 0 2rem; - position: relative; - overflow: hidden; - white-space: nowrap; - border-right: 1px solid rgba(255, 255, 255, 0.25); -} - -.stats__col:last-child { - border-right: none; -} - -.stats__count { - font-family: "montserrat-bold", sans-serif; - font-size: 8.4rem; - line-height: 1; - color: #FFFFFF; - position: relative; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.stats h5 { - font-family: "montserrat-semibold", sans-serif; - margin-top: 1.8rem; - color: #6f0a0d; - font-size: 1.8rem; - line-height: 1.333; - position: relative; -} - -.about__line { - display: block; - width: 2px; - height: 10.2rem; - background-color: #FFFFFF; - position: absolute; - right: 7.2rem; - top: 0; -} - - -/* ------------------------------------------------------------------- - * responsive: - * about - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1200px) { - .about-desc { - font-size: 2.2rem; - max-width: 940px; - } - .about-stats { - padding-top: 3rem; - padding-bottom: 3.9rem; - } - .about-stats { - max-width: 800px; - } - .stats__col { - margin: 1.5rem 0; - } - .stats__col:nth-child(n) { - border: none; - } - .stats__col:nth-child(2n+1) { - border-right: 1px solid rgba(255, 255, 255, 0.25); - } -} - -@media only screen and (max-width: 800px) { - .about-desc { - font-size: 2rem; - max-width: 600px; - } - .stats__count { - font-size: 8rem; - } - .stats h5 { - margin-top: 1.2rem; - } -} - -@media only screen and (max-width: 700px) { - .about__line { - right: 5.5rem; - } -} - -@media only screen and (max-width: 600px) { - .s-about { - padding-top: 12rem; - } - .about-desc { - font-size: 1.9rem; - } - .about-stats { - padding-top: 0; - } - .stats__col { - margin: 0; - padding-top: 3rem; - padding-bottom: 3rem; - position: relative; - } - .stats__col::after { - content: ""; - display: block; - height: 1px; - width: 250px; - background-color: rgba(255, 255, 255, 0.25); - position: absolute; - bottom: 0; - left: 50%; - margin-left: -125px; - } - .stats__col:last-child::after { - display: none; - } - .stats__col:nth-child(n) { - border: none; - } - .about__line { - height: 7.2rem; - } -} - -@media only screen and (max-width: 400px) { - .about-desc { - font-size: 1.8rem; - } - .stats__count { - font-size: 7.8rem; - } -} - - - -/* =================================================================== - * # services - * - * ------------------------------------------------------------------- */ -.s-services { - padding-top: 16.2rem; - padding-bottom: 15.2rem; - background-color: #FFFFFF; - color: #000000; - position: relative; -} - - -/* ------------------------------------------------------------------- - * ## services list - * ------------------------------------------------------------------- */ -.services-list { - margin-top: 2rem; -} - -/* .services-list .service-item { - margin-bottom: .9rem; -} - -.services-list .service-item h3 { - margin-top: 0; -} - -.services-list .service-item:nth-child(2n+1) { - padding-right: 50px; -} - -.services-list .service-item:nth-child(2n+2) { - padding-left: 50px; -} - -.services-list .service-text { - margin-left: 7.8rem; -} - -.services-list .service-icon { - float: left; - color: #ff904d; - font-size: 4.8rem; - margin-top: -.6rem; -} */ - -.services-list .service-item{ - display: flex; - flex-direction: column; - text-align: center; -} - -.services-list .service-text{ - margin-top: -20px; -} - -/* ------------------------------------------------------------------- - * responsive: - * services - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1200px) { - .services-list { - max-width: 1000px; - } - .services-list .service-item:nth-child(2n+1) { - padding-right: 30px; - } - .services-list .service-item:nth-child(2n+2) { - padding-left: 30px; - } -} - -@media only screen and (max-width: 1000px) { - .services-list h3 { - font-size: 2.5rem; - } - .services-list .service-item:nth-child(2n+1) { - padding-right: 20px; - } - .services-list .service-item:nth-child(2n+2) { - padding-left: 20px; - } -} - -@media only screen and (max-width: 800px) { - .services-list { - margin-top: 4.2rem; - max-width: 500px; - text-align: center; - } - .services-list .service-item:nth-child(n) { - padding-right: 15px; - padding-left: 15px; - } - .services-list h3 { - font-size: 3rem; - } - .services-list .service-text { - margin-left: 0; - } - .services-list .service-icon { - font-size: 4.5rem; - float: none; - margin-top: 0; - } -} - -@media only screen and (max-width: 600px) { - .s-services { - padding-top: 12rem; - } - .services-list .service-item:nth-child(n) { - padding-right: 10px; - padding-left: 10px; - } - .services-list h3 { - font-size: 2.5rem; - } -} - -@media only screen and (max-width: 400px) { - .services-list .service-item:nth-child(n) { - padding-right: 0; - padding-left: 0; - } - .services-list h3 { - font-size: 2.5rem; - } -} - - - -/* =================================================================== - * # works - * - * ------------------------------------------------------------------- */ -.s-works { - background: #FFFFFF; - padding: 0 0 0rem 0; - min-height: 800px; - position: relative; - display: none; -} -@media only screen and (min-width:991px){ - .s-works{ - display: block; - } -} - -.s-works .intro-wrap { - padding: 15rem 0 25.2rem; - background: #6f0a0d; -} - -.works-content { - max-width: 1160px; - margin-top: -23.4rem; -} - - -/* ------------------------------------------------------------------- - * ## bricks/masonry - * ------------------------------------------------------------------- */ -.masonry:after { - content: ""; - display: table; - clear: both; -} - -.masonry .grid-sizer, .masonry__brick { - width: 50%; -} - -.masonry__brick { - float: left; - padding: 0; -} - -.item-folio { - position: relative; - overflow: hidden; -} - -.item-folio__thumb img { - vertical-align: bottom; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; -} - -.item-folio__thumb a { - display: block; -} - -.item-folio__thumb a::before { - display: block; - background-color: rgba(0, 0, 0, 0.8); - content: ""; - opacity: 0; - visibility: hidden; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; - z-index: 1; -} - -.item-folio__thumb a::after { - content: "+"; - font-family: georgia, serif; - font-size: 2.7rem; - display: block; - height: 30px; - width: 30px; - line-height: 30px; - margin-left: -15px; - margin-top: -15px; - position: absolute; - left: 50%; - top: 50%; - text-align: center; - color: rgba(255, 255, 255, 0.8); - opacity: 0; - visibility: hidden; - -webkit-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; - -webkit-transform: scale(0.5); - -ms-transform: scale(0.5); - transform: scale(0.5); - z-index: 1; -} - -.item-folio__text { - position: absolute; - left: 0; - bottom: 3.6rem; - padding: 0 3.3rem; - z-index: 2; - opacity: 0; - visibility: hidden; - -webkit-transform: translate3d(0, 100%, 0); - -ms-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; -} - -.item-folio__title { - font-family: "montserrat-semibold", sans-serif; - font-size: 1.4rem; - line-height: 1.286; - color: #FFFFFF; - text-transform: uppercase; - letter-spacing: .2rem; - margin: 0 0 .3rem 0; -} - -.item-folio__cat { - color: rgba(255, 255, 255, 0.5); - font-family: "montserrat-light", sans-serif; - font-size: 1.4rem; - line-height: 1.714; - margin-bottom: 0; -} - -.item-folio__caption { - display: none; -} - -.item-folio__project-link { - display: block; - color: #FFFFFF; - box-shadow: 0 0 0 1px #FFFFFF; - border-radius: 50%; - height: 4.2rem; - width: 4.2rem; - text-align: center; - z-index: 500; - position: absolute; - top: 3rem; - left: 3rem; - opacity: 0; - visibility: hidden; - -webkit-transform: translate3d(0, -100%, 0); - -ms-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); -} - -.item-folio__project-link i { - font-size: 1.8rem; - line-height: 4.2rem; -} - -.item-folio__project-link::before { - display: block; - content: ""; - height: 3rem; - width: 1px; - background-color: rgba(255, 255, 255, 0.1); - position: absolute; - top: -3rem; - left: 50%; -} - -.item-folio__project-link:hover, -.item-folio__project-link:focus, -.item-folio__project-link:active { - background-color: #FFFFFF; - color: #6f0a0d; -} - - -/* on hover - * ----------------------------------------------- */ -.item-folio:hover .item-folio__thumb a::before { - opacity: 1; - visibility: visible; -} - -.item-folio:hover .item-folio__thumb a::after { - opacity: 1; - visibility: visible; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} - -.item-folio:hover .item-folio__thumb img { - -webkit-transform: scale(1.05); - -ms-transform: scale(1.05); - transform: scale(1.05); -} - -.item-folio:hover .item-folio__project-link, -.item-folio:hover .item-folio__text { - opacity: 1; - visibility: visible; - -webkit-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} - - -/* ------------------------------------------------------------------- - * responsive: - * works - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 800px) { - .item-folio__title, .item-folio__cat { - font-size: 1.3rem; - } -} - -@media only screen and (max-width: 600px) { - .s-works { - padding-bottom: 12rem; - } - .s-works .intro-wrap { - padding: 12rem 0 25.2rem; - } - .works-content { - margin-top: -25.2rem; - } - .masonry__brick { - float: none; - width: 100%; - } - .item-folio__title, .item-folio__cat { - font-size: 1.4rem; - } -} - - - -/* =================================================================== - * # clients - * - * ------------------------------------------------------------------- */ -.s-clients { - padding-top: 16.2rem; - padding-bottom: 16.8rem; - background-color: white; - color: #757575; - position: relative; - display: none; -} -@media only screen and (max-width:792px){ - .s-clients{ - display: block; - } -} - -/* ------------------------------------------------------------------- - * ## slider - * ------------------------------------------------------------------- */ -.clients-outer { - margin-top: 3.6rem; - padding-bottom: 9rem; - text-align: center; - position: relative; -} - -.clients__slide { - display: block; - opacity: .55; - padding: 1.5rem 2.8rem; - -webkit-transition: opacity 0.5s ease-in-out; - transition: opacity 0.5s ease-in-out; -} - -.clients__slide:hover, .clients__slide:focus { - opacity: 1; -} - - -/* ------------------------------------------------------------------- - * ## testimonials - * ------------------------------------------------------------------- */ -.clients-testimonials { - margin-top: 4.2rem; - padding-top: 7.2rem; - text-align: center; - position: relative; -} - -.clients-testimonials::before { - content: ""; - display: block; - height: 1px; - width: 550px; - background-color: rgba(0, 0, 0, 0.1); - text-align: center; - position: absolute; - top: 0; - left: 50%; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%); -} - -.clients-testimonials .testimonials { - margin: 0 10%; -} - -.clients-testimonials .testimonials p { - font-family: "lora-regular", serif; - font-size: 3rem; - line-height: 1.8; - color: #555555; - margin-bottom: 6rem; -} - -.clients-testimonials .testimonials__slide { - padding: 0 0 3rem 0; -} - -.clients-testimonials .testimonials__avatar { - height: 8.4rem; - width: 8.4rem; - border-radius: 50%; - margin: 0 auto 1.2rem auto; -} - -.clients-testimonials .testimonials__name, -.clients-testimonials .testimonials__pos { - display: block; -} - -.clients-testimonials .testimonials__name { - font-family: "montserrat-semibold", sans-serif; - color: #6f0a0d; -} - -.clients-testimonials .testimonials__pos { - font-family: "montserrat-light", sans-serif; - font-size: 1.4rem; -} - -.clients-testimonials .testimonials .slick-arrow { - position: absolute; - top: 7.2rem; - width: 66px; - height: 66px; - margin: 0; - padding: 0; - background-color: transparent; - background-repeat: no-repeat; - background-size: 22px 15px; - background-position: center; - border: none; - cursor: pointer; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; - font: 0/0 a; - text-shadow: none; - color: transparent; - z-index: 2; -} - -.clients-testimonials .testimonials .slick-prev { - left: -130px; - background-image: url("../images/left-arrow.png"); -} - -.clients-testimonials .testimonials .slick-next { - right: -130px; - background-image: url("../images/right-arrow.png"); -} - -.clients-testimonials .testimonials .slick-dots { - margin-top: -0.6px; -} - - -/* ------------------------------------------------------------------- - * responsive: - * clients - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1200px) { - .clients-testimonials .testimonials { - margin: 0 12%; - } - .clients-testimonials .testimonials p { - font-size: 2.6rem; - } - .clients-testimonials .testimonials .slick-prev { - left: -100px; - } - .clients-testimonials .testimonials .slick-next { - right: -100px; - } -} - -@media only screen and (max-width: 1000px) { - .clients-testimonials .testimonials p { - font-size: 2.2rem; - } -} - -@media only screen and (max-width: 800px) { - .clients-testimonials::before { - width: 400px; - } - .clients-testimonials .testimonials { - margin: 0 2rem; - } - .clients-testimonials .testimonials .slick-arrow { - top: auto; - bottom: 3rem; - } - .clients-testimonials .testimonials .slick-prev { - left: 0; - } - .clients-testimonials .testimonials .slick-next { - right: 0; - } -} - -@media only screen and (max-width: 600px) { - .s-clients { - padding-top: 12rem; - } - .clients-testimonials::before { - width: 250px; - } - .clients-testimonials .testimonials { - margin: 0; - } - .clients-testimonials .testimonials p { - font-size: 2rem; - } -} - -@media only screen and (max-width: 400px) { - .clients-testimonials .testimonials p { - font-size: 1.9rem; - } -} - - - -/* =================================================================== - * # contact - * - * ------------------------------------------------------------------- */ -.s-contact { - background-color: #ffffff; - /* background-image: url("../images/contact-bg.jpg"); */ - background-repeat: no-repeat; - background-position: center, center; - padding-top: 15rem; - padding-bottom: 12rem; - color: rgba(255, 255, 255, 0.5); - position: relative; -} - -.s-contact .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: .8; - background-color: #FFFFFF; -} - -.s-contact .form-field { - position: relative; -} - -.s-contact .form-field:after { - content: ""; - display: table; - clear: both; -} - -.s-contact .form-field label { - font-family: "montserrat-light", sans-serif; - font-size: 1rem; - line-height: 2.4rem; - position: absolute; - bottom: -0.3rem; - right: .6rem; - text-transform: uppercase; - letter-spacing: .1rem; - padding: 0 2rem; - margin: 0; - color: #FFFFFF; - background: #ff904d; -} - -.s-contact .form-field label::after { - content: ""; - position: absolute; - left: -5px; - top: 50%; - margin-top: -6px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-right: 5px solid #ff904d; -} - -.contact__line { - display: block; - width: 2px; - height: 20.4rem; - background-color: #ff904d; - position: absolute; - left: 50%; - top: -10.2rem; - margin-left: -1px; -} - -.contact-content { - max-width: 1000px; - background-color: rgba(0, 0, 0, 0.2); - color: rgba(255, 255, 255, 0.4); - padding-top: 6rem; - padding-bottom: 6rem; - font-family: "montserrat-light", sans-serif; - font-size: 1.5rem; - line-height: 2; - position: relative; -} - -.contact-content h3 { - margin-top: 0; - margin-bottom: 6.6rem; - color: #00163D; -} - -.contact-content h5 { - margin-top: 0; - color: #ff904d; -} - -.contact-content input[type="email"], -.contact-content input[type="number"], -.contact-content input[type="search"], -.contact-content input[type="text"], -.contact-content input[type="tel"], -.contact-content input[type="url"], -.contact-content input[type="password"], -.contact-content textarea, -.contact-content select { - color: rgba(255, 255, 255, 0.6); - border-bottom: 1px solid rgba(255, 255, 255, 0.07); - margin-bottom: .9rem; +select { + text-transform: none; } -.contact-content input[type="email"]:focus, -.contact-content input[type="number"]:focus, -.contact-content input[type="search"]:focus, -.contact-content input[type="text"]:focus, -.contact-content input[type="tel"]:focus, -.contact-content input[type="url"]:focus, -.contact-content input[type="password"]:focus, -.contact-content textarea:focus, -.contact-content select:focus { - color: #FFFFFF; - border-bottom: 1px solid #ff904d; -} +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ -.contact-content button, -.contact-content .btn { - margin-top: 3.6rem; -} -.contact-content input::-webkit-input-placeholder, -.contact-content select::-webkit-input-placeholder, -.contact-content textarea::-webkit-input-placeholder { - color: #4f4f4f; -} - -.contact-content input:-moz-placeholder, -.contact-content select:-moz-placeholder, -.contact-content textarea:-moz-placeholder { - color: #4f4f4f; /* Firefox 18- */ +button, +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { + -webkit-appearance: button; /* 1 */ + background-color: transparent; /* 2 */ + background-image: none; /* 2 */ } -.contact-content input::-moz-placeholder, -.contact-content select::-moz-placeholder, -.contact-content textarea::-moz-placeholder { - color: #4f4f4f; /* Firefox 19+ */ -} +/* +Use the modern Firefox focus style for all focusable elements. +*/ -.contact-content input:-ms-input-placeholder, -.contact-content select:-ms-input-placeholder, -.contact-content textarea:-ms-input-placeholder { - color: #4f4f4f; +:-moz-focusring { + outline: auto; } -.contact-content input.placeholder, -.contact-content select.placeholder, -.contact-content textarea.placeholder { - color: #4f4f4f !important; -} -.contact-primary, .contact-secondary { - float: left; - padding: 0 5rem; -} +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ -.contact-primary { - width: 65%; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; +:-moz-ui-invalid { + box-shadow: none; } -.contact-primary #contactForm { - margin-top: -1.5rem; -} +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ -.contact-secondary { - width: 35%; +progress { + vertical-align: baseline; } -.contact-secondary::before { - content: ""; - display: block; - width: 35%; - position: absolute; - top: 0; - bottom: 0; - right: 0; - background-color: #00163D; -} +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ -.contact-secondary .contact-info { - position: relative; +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; } -.contact-secondary .cinfo { - margin-bottom: 4.8rem; -} +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ -.contact-social { - list-style: none; - display: inline-block; - margin: 0; - font-size: 2rem; +[type='search'] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ } -.contact-social li { - margin-right: 15px; - padding-left: 0; - display: inline-block; -} +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ -.contact-social li a { - color: white; +::-webkit-search-decoration { + -webkit-appearance: none; } -.contact-social li a:hover, -.contact-social li a:focus { - color: #6f0a0d; -} +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ -.contact-social li:last-child { - margin: 0; +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ } -.message-warning, -.message-success { - display: none; - background: #6f0a0d; - font-size: 1.5rem; - line-height: 2; - padding: 3rem; - margin-bottom: 3.6rem; - width: 100%; -} +/* +Add the correct display in Chrome and Safari. +*/ -.message-warning { - color: #ff6163; +summary { + display: list-item; } -.message-success { - color: #ff904d; -} +/* +Removes the default spacing and border for appropriate elements. +*/ -.message-warning i, .message-success i { - margin-right: 10px; - font-size: 1.2rem; +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; } - -/* form loader - * ----------------------------------------------- */ -.submit-loader { - display: none; - position: relative; - left: 0; - top: 1.8rem; - width: 100%; - text-align: center; - margin-bottom: 3rem; +fieldset { + margin: 0; + padding: 0; } -.submit-loader .text-loader { - display: none; - font-family: "montserrat-regular", sans-serif; - font-size: 1.3rem; - font-weight: bold; - line-height: 1.846; - color: #FFFFFF; - letter-spacing: .2rem; - text-transform: uppercase; +legend { + padding: 0; } -.oldie .submit-loader .s-loader { - display: none; +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; } -.oldie .submit-loader .text-loader { - display: block; +/* +Reset default styling for dialogs. +*/ +dialog { + padding: 0; } +/* +Prevent resizing textareas horizontally by default. +*/ -/* --------------------------------------------------------------- - * ## loader animation - * --------------------------------------------------------------- */ -.s-loader { - margin: 1.2rem auto 3rem; - width: 70px; - text-align: center; - -webkit-transform: translateX(0.45rem); - -ms-transform: translateX(0.45rem); - transform: translateX(0.45rem); +textarea { + resize: vertical; } -.s-loader > div { - width: 9px; - height: 9px; - background-color: #FFFFFF; - border-radius: 100%; - display: inline-block; - margin-right: .9rem; - -webkit-animation: bouncedelay 1s infinite ease-in-out both; - animation: bouncedelay 1s infinite ease-in-out both; -} +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ -.s-loader .bounce1 { - -webkit-animation-delay: -0.32s; - animation-delay: -0.32s; +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; /* 1 */ + color: #9ca3af; /* 2 */ } -.s-loader .bounce2 { - -webkit-animation-delay: -0.16s; - animation-delay: -0.16s; -} - -@-webkit-keyframes bouncedelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - } - 40% { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - } -} - -@keyframes bouncedelay { - 0%, 80%, 100% { - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - } - 40% { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - } -} - - -/* ------------------------------------------------------------------- - * responsive: - * contact - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 1200px) { - .contact-content { - max-width: 900px; - } -} - -@media only screen and (max-width: 1000px) { - .contact-content { - max-width: 700px; - } - .contact-primary, .contact-secondary { - float: none; - width: 100%; - } - .contact-primary #contactForm { - margin-top: -1.5rem; - margin-bottom: 7.2rem; - } - .contact-secondary .hide-on-fullwidth { - display: none; - } - .contact-secondary::before { - display: none; - } - .message-warning, .message-success { - margin-bottom: 6rem; - } -} - -@media only screen and (max-width: 800px) { - .contact-content h3 { - text-align: center; - } -} - -@media only screen and (max-width: 600px) { - .s-contact { - padding-top: 12rem; - padding-bottom: 0; - } - .contact__line { - height: 14.4rem; - top: -7.2rem; - } - .contact-content { - padding-bottom: 12rem; - text-align: center; - } - .contact-primary, .contact-secondary { - padding: 0 20px; - } -} - -@media only screen and (max-width: 400px) { - .contact-primary, .contact-secondary { - padding: 0 5px; - } -} - - -/* ------------------------------------------------------------------- - * ## go to top - * ------------------------------------------------------------------- */ -.go-top { - position: fixed; - bottom: 30px; - right: 30px; - z-index: 600; - display: none; -} - -.go-top a, .go-top a:visited { - text-decoration: none; - border: 0 none; - display: block; - height: 60px; - width: 60px; - line-height: 60px; - text-align: center; - background: #6f0a0d; - color: rgba(255, 255, 255, 0.5); - text-align: center; - text-transform: uppercase; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; -} - -.go-top a i, .go-top a:visited i { - font-size: 18px; - line-height: inherit; -} - -.go-top a:hover, .go-top a:focus { - color: #FFFFFF; -} - - -.input-group { - display: flex; - flex-direction: row; +input::placeholder, +textarea::placeholder { + opacity: 1; /* 1 */ + color: #9ca3af; /* 2 */ } -.impress_area { - /*background-image: url(../img/banner/dot-background.svg);*/ - /*background-size: cover;*/ - margin-bottom: -100px; - margin-top: -10px; - padding-top: 80px; - /* background-image:url('https://raw.githubusercontent.com/keploy/website/f37829d39b80993698f1fb019d369440c96f72d6/img/banner/dot-background.svg') ; */ - background-image:url('../images/dot-background.png') ; - image-resolution: 300dpi; -} -.impress_area .impress_inner { - text-align: center; - max-width: 780px; - margin: auto; -} -.impress_area .impress_inner h2 { - color: #6f0a0d; - font-size: 36px; - -webkit-font-smoothing: antialiased; - font-family: 'Lato', sans-serif; - font-weight: bold; -} -.impress_area .impress_inner p { - color: #6f0a0d; - margin-bottom: 35px; -} -.impress_area .impress_inner .primary_btn { - border: double 2px #ff904d; - background: #ffffff; - width: auto; - font-size: 15px; - box-shadow: -14.142px 14.142px 20px 0px rgba(0, 0, 0, 0.1); -} -.impress_area .impress_inner .primary_btn:hover { - color: #ffffff; - background: #ff904d; -} -.impress_area .impress_inner .primary_btn:hover:after { - border-image: -webkit-linear-gradient(0deg, #fff, #fff); - border-image: -moz-linear-gradient(0deg, #fff, #fff); - border-image: -o-linear-gradient(0deg, #fff, #fff); - border-image: linear-gradient(0deg, #fff, #fff); -} - -.impress_area .input-group input { - height: 40px; - background: #fff; - border-radius: 10px 0px 0px 10px; - width: 50%; - border: double 2px #E35134; - padding: 0px 15px; - font-size: 14px; - -webkit-font-smoothing: antialiased; - font-family: "TT Norms Pro", sans-serif; - color: #6f0a0d; - outline: none; - box-shadow: none; -} +/* +Set the default cursor for buttons. +*/ -.justify-content-center { - -ms-flex-pack: center !important; - justify-content: center !important; -} - -.impress_area .input-group input.placeholder { - font-size: 14px; - font-family: "Roboto", sans-serif; - font-weight: normal; - color: #cccccc; -} -.impress_area .input-group input::-webkit-input-placeholder { - font-size: 14px; - font-family: "Roboto", sans-serif; - font-weight: normal; - color: #cccccc; -} -.impress_area .input-group .sub-btn { - border-radius: 0; - border-top-right-radius: 10px; - border-bottom-right-radius: 10px; - background-image: linear-gradient(to right, #E35134 0%, #e27762 100%), - radial-gradient(circle at top left, #E35134, #e27762); - background-image: -webkit-linear-gradient(to right, #E35134 0%, #e27762 100%), - -webkit-radial-gradient(circle at top left, #E35134, #e27762); - background-image: -moz-linear-gradient(to right, #E35134 0%, #e27762 100%), - -moz-radial-gradient(circle at top left, #E35134, #e27762); - background-image: -ms-linear-gradient(to right, #E35134 0%, #e27762 100%), - -ms-radial-gradient(circle at top left, #E35134, #e27762); - background-image: -o-linear-gradient(to right, #E35134 0%, #e27762 100%), - -o-radial-gradient(circle at top left, #E35134, #e27762); - outline: none !important; - box-shadow: none !important; - padding: 0px; - width: 42px; - height: 40px; +button, +[role="button"] { cursor: pointer; - color: #ffffff; -} - -/* End Impress Area css -============================================================================================ */ -/*---------------------------------------------------- */ - -/* =================================================================== - * # footer - * - * ------------------------------------------------------------------- */ -/* Footer Area css - ============================================================================================ */ -.footer_area .f_title { - margin-bottom: 20px; -} - -.footer-bottom { - text-align: center; } -.footer-bottom .footer-social { - text-align: center; - margin-top: 15px; -} - -/* End End Footer Area css - ============================================================================================ */ - -/* Footer Area css -============================================================================================ */ -.footer_area { - background-image: url('../images/dot-background.png'); - background-size: cover; - padding-top: 120px; - padding-bottom: 120px; +/* +Make sure disabled buttons don't get the pointer cursor. +*/ +:disabled { + cursor: default; } -.f_title { - margin-bottom: 35px; -} -.f_title h3 { - color: #6f0a0d; - font-size: 20px; - font-weight: bold; - -webkit-font-smoothing: antialiased; - font-family: 'Lato', sans-serif; - margin-bottom: 0px; -} +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ -.ab_widget p { - font-size: 15px; - line-height: 24px; - -webkit-font-smoothing: antialiased; - font-family: 'Inconsolata', monospace; - color: #6f0a0d; - font-weight: 500; - margin-bottom: 30px; - margin-left: -10px; -} -.ab_widget p a { - color: #8252fa; -} -.ab_widget p + p { - margin-bottom: 0px; +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; /* 1 */ + vertical-align: middle; /* 2 */ } -.news_widget p { - font-size: 14px; - line-height: 24px; - font-family: "Roboto", sans-serif; - color: #6f0a0d; - font-weight: 500; - margin-bottom: 15px; -} +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ -.news_widget .input-group { - position: relative; - width: 25rem; -} -.news_widget .input { - border: double 2px #E35134; -} -.news_widget .input-group input { - height: 50px; - background: #fff; - border-radius: 50px; - width: 100%; - /* border: none; */ - padding: 0px 15px; - font-size: 14px; - font-family: "Roboto", sans-serif; - color: #cccccc; - outline: none; - box-shadow: none; -} -.news_widget .input-group .input.placeholder { - font-size: 14px; - font-family: "Roboto", sans-serif; - font-weight: normal; - color: #cccccc; -} - -.news_widget .input-group .input::-webkit-input-placeholder { - font-size: 14px; - font-family: "Roboto", sans-serif; - font-weight: normal; - color: #cccccc; -} -.news_widget .input-group .sub-btn { - position: absolute; - right: 4px; - top: 2px; - border-radius: 50px; - outline: none !important; - box-shadow: none !important; - padding: 0px; - width: 46px; - height: 46px; - cursor: pointer; - color: #fff; -} - -.social_widget p { - font-size: 14px; - line-height: 24px; - -webkit-font-smoothing: antialiased; - font-family: "TT Norms Pro", sans-serif; - color: #6f0a0d; - font-weight: 500; - margin-bottom: 10px; -} -.social_widget .list li { - display: inline-block; -} -.social_widget .list li a { - color: #E35134; - font-size: 20px; - -webkit-transition: all 0.4s ease 0s; - -moz-transition: all 0.4s ease 0s; - -o-transition: all 0.4s ease 0s; - transition: all 0.4s ease 0s; -} -.social_widget .list li:last-child { - margin-right: 0px; -} -.social_widget .list li:hover a { - color: #fa9e53; +img, +video { + max-width: 100%; + height: auto; } -.copy_right_text { - text-align: center; - margin-top: 60px; -} -.copy_right_text p a { - color: #fa9e53; -} - -.submit-btn { - background-image: linear-gradient(to right, #E35134 0%, #e27762 100%), - radial-gradient(circle at top left, #E35134, #e27762); - background-image: -webkit-linear-gradient(to right, #E35134 0%, #e27762 100%), - -webkit-radial-gradient(circle at top left, #E35134, #e27762); - background-image: -moz-linear-gradient(to right, #E35134 0%, #e27762 100%), - -moz-radial-gradient(circle at top left, #E35134, #e27762); - background-image: -ms-linear-gradient(to right, #E35134 0%, #e27762 100%), - -ms-radial-gradient(circle at top left, #E35134, #e27762); - background-image: -o-linear-gradient(to right, #E35134 0%, #e27762 100%), - -o-radial-gradient(circle at top left, #E35134, #e27762); - - line-height: 1.5; - width: auto; -} - - - - - -/* End Footer Area css -============================================================================================ */ -/*---------------------------------------------------- */ - -/* ------------------------------------------------------------------- - * ## go to top - * ------------------------------------------------------------------- */ -.go-top { - position: fixed; - bottom: 30px; - right: 30px; - z-index: 600; +/* Make elements with the HTML hidden attribute stay hidden by default */ +[hidden]:where(:not([hidden="until-found"])) { display: none; } - -.go-top a, -.go-top a:visited { - text-decoration: none; - border: 0 none; - display: block; - height: 60px; - width: 60px; - line-height: 60px; - text-align: center; - background: #6f0a0d; - color: rgba(255, 255, 255, 0.5); - text-align: center; - text-transform: uppercase; - -webkit-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; -} - -.go-top a i, -.go-top a:visited i { - font-size: 18px; - line-height: inherit; -} - -.go-top a:hover, -.go-top a:focus { - color: #ffffff; +.container { + width: 100%; } +@media (min-width: 640px) { -/* ------------------------------------------------------------------- - * responsive: - * footer - * ------------------------------------------------------------------- */ -@media only screen and (max-width: 900px) { - .footer-main .left { - padding-right: 20px; - } - .footer-main .right { - padding-left: 20px; - } - .news_widget .input-group { - position: relative; - width: 25rem; + .container { + max-width: 640px; } } +@media (min-width: 768px) { -@media only screen and (max-width: 800px) { - footer .row { - max-width: 600px; - } - .footer-main .left { - padding-right: 15px; - margin-bottom: 4.2rem; - } - .footer-main .right { - padding-left: 15px; - } - .news_widget .input-group { - position: relative; - width: 25rem; + .container { + max-width: 768px; } } +@media (min-width: 1024px) { -@media only screen and (max-width: 600px) { - .footer-main .left { - padding-right: 10px; - } - .footer-main .right { - padding-left: 10px; - } - .footer-logo { - margin: -0.6rem auto 3.6rem; - } - .footer-bottom { - padding-bottom: 0.6rem; - } - .footer-bottom .copyright span { - display: block; - } - .footer-bottom .copyright span::after { - display: none; - } - .go-top { - right: 0; - bottom: 0; + .container { + max-width: 1024px; } } +@media (min-width: 1280px) { -@media only screen and (max-width: 500px) { - .footer-subscribe #mc-form input[type="email"] { - padding: 1.2rem 20px 1.2rem; - background: rgba(0, 0, 0, 0.1); - text-align: center; - } - .footer-subscribe #mc-form input[type="submit"] { - position: static; - width: 100%; - margin-bottom: 1.8rem; - } - .footer-subscribe #mc-form label { - text-align: center; - } - .news_widget .input-group { - position: relative; - width: 25rem; + .container { + max-width: 1280px; } } +@media (min-width: 1536px) { -@media only screen and (max-width: 400px) { - .footer-main .left { - padding-right: 0; - } - .footer-main .right { - padding-left: 0; - } - .news_widget .input-group { - position: relative; - width: 25rem; + .container { + max-width: 1536px; } } - -/*# sourceMappingURL=main.css.map */ - -@media (min-width: 992px) { - .col-lg-5 { - -ms-flex: 0 0 41.666667%; - flex: 0 0 41.666667%; - max-width: 41.666667%; - } - .col-lg-2 { - -ms-flex: 0 0 16.666667%; - flex: 0 0 16.666667%; - max-width: 16.666667%; - } - .news_widget .input-group { - position: relative; - width: 25rem; - } +.visible { + visibility: visible; } - -@media only screen and (max-width: 1120px) and (min-width: 601px) { - .innerdiv { - transform: scale(0.7); - } - - .div1 { - background-position-x: 10rem; - } - .innerdiv { - display: flex; - flex-direction: column; - transform: scale(1); - margin: 2rem; - margin-bottom: 5rem; - } - .attribution { - position: relative; - } - - .s-home { - max-height: 900px; - min-height: 800px; - } - - .outerdiv { - margin-top: 0; - padding-top: 0; - } +.static { + position: static; } - -.col-lg-2, -.col-lg-5 { - position: relative; - width: 100%; - min-height: 1px; - padding-right: 15px; - padding-left: 15px; +.fixed { + position: fixed; +} +.absolute { + position: absolute; } -.col-sm-6 { +.relative { position: relative; - width: 100%; - min-height: 1px; - padding-right: 15px; - padding-left: 15px; } - -.d-flex { - display: -ms-flexbox !important; - display: flex !important; +.sticky { + position: sticky; } - -@media screen and (prefers-reduced-motion: reduce) { - .btn { - transition: none; - } +.m-1 { + margin: 0.25rem; } - -.join-btn{ - margin:0 auto; - background-color: #00163D; - border-radius: 5px; - color:#FF914D; - outline: none; - border:0px; +.mt-10 { + margin-top: 2.5rem; } - -.join-btn a{ - color:white +.block { + display: block; } - -.countdown-timer{ - pointer-events: none; +.inline-block { + display: inline-block; } - -.modal{ - height: 100vh; - width: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: absolute; - z-index: 99; +.inline { + display: inline; } - -.modal-body{ - width: 80%; - height: 80%; - border: 1px solid black; - /* background-image: url('https://media.licdn.com/dms/image/D4D22AQHJDENz9W2rxA/feedshare-shrink_800/0/1681714706793?e=1684368000&v=beta&t=XhxZW4l2cZSrhc46UMIk9tLtp34QmQn0oI98OSOjgpc'); */ - /* background-size: contain; */ - /* background-position: center; */ - /* background-repeat: no-repeat; */ +.flex { + display: flex; } -.modal-close{ - position: absolute; - /* top: 0; */ - /* right: 1px; */ - text-align: right; - z-index: 1; - width:80%; - padding:10px; +.table { + display: table; } - -.modal-close button{ - color:#f37d36; - background-color: white; +.grid { + display: grid; } - -.modal-img{ - height:100%; - width: 100%; - position: relative; +.contents { + display: contents; } - -.modal-img-mob{ - display: none; - height:100%; - width: 100%; - position: relative; +.hidden { + display: none; } - -@media screen and (max-width:992px){ - .modal-img-mob{ - display: block; - } - - .modal-img{ - display: none; - } +.h-1 { + height: 0.25rem; } - - - - - -.process-wrapper{ - padding: 0 40rem; +.flex-shrink { + flex-shrink: 1; } -@media screen and (max-width: 1920px) { - .process-wrapper{ - padding: 0 25rem; - } +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } -@media screen and (max-width: 1600px) { - .process-wrapper{ - padding: 0 12rem; - } +.resize { + resize: both; } -@media screen and (max-width: 1440px) { - .process-wrapper{ - padding: 0 10rem; - } +.flex-row { + flex-direction: row; } -@media screen and (max-width: 1280px) { - .process-wrapper{ - padding: 0 6rem; - } +.flex-wrap { + flex-wrap: wrap; } -@media screen and (max-width: 1024px) { - .process-wrapper{ - padding: 0 4rem; - } +.border { + border-width: 1px; } - - -.based-on-application{ - font-family: 'Lato', sans-serif; - width: 58%; - margin-left: auto; - margin-right: auto; - font-size: 26px; - line-height: 1.286; - color: #000; - margin-bottom: 40px; +.text-center { + text-align: center; } - -.listed-criteria { - margin-top: 50px; - width: 60%; - margin-left: auto; - margin-right: auto; - font-size: 2rem; - line-height: 1.286; - color: #000; - line-height: 25px; +.blur { + --tw-blur: blur(8px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } - -.criteria-list { - /* margin-top: 20px; */ - margin-bottom: 40px; +.filter { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; } \ No newline at end of file diff --git a/css/tailwind.css b/css/tailwind.css new file mode 100644 index 0000000..bd6213e --- /dev/null +++ b/css/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..ee088ee --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "name": "keploy-contribution", + "version": "1.0.0", + "description": "

\"keploy

", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "build:css": "npx postcss css/tailwind.css -o css/main.css" + }, + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "autoprefixer": "^10.4.21", + "postcss": "^8.5.6", + "postcss-cli": "^11.0.1", + "tailwindcss": "^3.4.18" + } +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..12a703d --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..cd18711 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,13 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + darkMode: 'class', + content: [ + "./index.html", + "./styles.html", + "./js/**/*.js" + ], + theme: { + extend: {}, + }, + plugins: [], +} From fac4b84b9bdfe8b657ad8f099bca848adc711a4c Mon Sep 17 00:00:00 2001 From: Aman Kashyap Date: Sat, 1 Nov 2025 10:29:23 +0000 Subject: [PATCH 2/7] dark mode implemented (now need to fix some more things) --- css/main.css | 4370 +++++++++++++++++++++++++++++++++++++++----- css/tailwind.css | 79 +- css/tw.css | 247 +++ index.html | 31 +- js/theme-toggle.js | 40 + package.json | 4 +- styles.html | 32 +- tailwind.config.js | 12 +- 8 files changed, 4334 insertions(+), 481 deletions(-) create mode 100644 css/tw.css create mode 100644 js/theme-toggle.js diff --git a/css/main.css b/css/main.css index ab96d73..7ba232d 100755 --- a/css/main.css +++ b/css/main.css @@ -1,618 +1,4046 @@ -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -}/* -! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com -*//* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; /* 1 */ - border-width: 0; /* 2 */ - border-style: solid; /* 2 */ - border-color: #e5e7eb; /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -7. Disable tap highlights on iOS -*/ - -html, -:host { - line-height: 1.5; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ - -moz-tab-size: 4; /* 3 */ - -o-tab-size: 4; - tab-size: 4; /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ - font-feature-settings: normal; /* 5 */ - font-variation-settings: normal; /* 6 */ - -webkit-tap-highlight-color: transparent; /* 7 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ +@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700;800;900&family=Lato:wght@100;300;400;700;900&display=swap'); +/* =================================================================== + * + * Glint v1.0 Main Stylesheet + * 11-20-2017 + * ------------------------------------------------------------------ + * + * TOC: + * # base style overrides + * ## links + * # typography & general theme styles + * ## Lists + * ## responsive video container + * ## floated image + * ## tables + * ## Spacing + * ## pace.js styles - minimal + * # preloader + * # forms + * ## style placeholder text + * ## change autocomplete styles in chrome + * # buttons + * # additional components + * ## alert box + * ## additional typo styles + * ## skillbars + * # reusable and common theme styles + * ## display headings + * ## section header + * ## slick slider + * # header styles + * ## header logo + * ## main navigation + * ## mobile menu toggle + * # home + * ## home content + * ## home social + * ## home animations + * # about + * ## about stats + * # services + * ## services list + * # works + * ## bricks/masonry + * # clients + * ## slider + * ## testimonials + * # contact + * ## loader animation + * # footer + * ## footer main + * ## footer bottom + * ## go to top + * + * + * =================================================================== */ + + +/* =================================================================== + * # base style overrides + * + * ------------------------------------------------------------------- */ +html { + font-size: 10px; +} + +@media only screen and (max-width: 400px) { + html { + font-size: 9.411764705882353px; + } +} + +html, body { + height: 100%; +} body { - margin: 0; /* 1 */ - line-height: inherit; /* 2 */ + background: #ffffff; + font-family: 'Inconsolata', monospace; + font-size: 2rem; + font-style: normal; + font-weight: normal; + line-height: 1.765; + color: #000000; + margin: 0; + padding: 0; + /* overflow: hidden; */ + } -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ -hr { - height: 0; /* 1 */ - color: inherit; /* 2 */ - border-top-width: 1px; /* 3 */ +/* ------------------------------------------------------------------- + * ## links + * ------------------------------------------------------------------- */ +a { + color: #0087cc; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; } -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ +a:hover, a:focus, a:active { + color: #ff904d; +} -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; +a:hover, a:active { + outline: 0; } -/* -Remove the default font size and weight for headings. -*/ -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; + +/* =================================================================== + * # typography & general theme styles + * + * ------------------------------------------------------------------- */ +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + font-family: 'Lato', sans-serif; + color: rgb(47 43 40);; + font-style: normal; + font-weight: normal; + text-rendering: optimizeLegibility; } -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ +h1, .h1, h2, .h2, h3, .h3, h4, .h4 { + margin-top: 6rem; + margin-bottom: 1.8rem; +} -a { - color: inherit; - text-decoration: inherit; +@media only screen and (max-width: 600px) { + h1, .h1, h2, .h2, h3, .h3, h4, .h4 { + margin-top: 5.1rem; + } } -/* -Add the correct font weight in Edge and Safari. -*/ +h5, .h5, h6, .h6 { + margin-top: 4.2rem; + margin-bottom: 1.5rem; +} -b, -strong { - font-weight: bolder; +@media only screen and (max-width: 600px) { + h5, .h5, h6, .h6 { + margin-top: 3.6rem; + margin-bottom: 0.9rem; + } } -/* -1. Use the user's configured `mono` font-family by default. -2. Use the user's configured `mono` font-feature-settings by default. -3. Use the user's configured `mono` font-variation-settings by default. -4. Correct the odd `em` font sizing in all browsers. -*/ +h1, .h1 { + font-size: 3.6rem; + line-height: 1.25; + letter-spacing: -.1rem; +} -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ - font-feature-settings: normal; /* 2 */ - font-variation-settings: normal; /* 3 */ - font-size: 1em; /* 4 */ +@media only screen and (max-width: 600px) { + h1, .h1 { + font-size: 3.3rem; + letter-spacing: -.07rem; + } +} + +h2, .h2 { + font-size: 26px; + line-height: 1.3; +} + +h3, .h3 { + font-size: 2.4rem; + line-height: 1.25; } -/* -Add the correct font size in all browsers. -*/ +h4, .h4 { + font-size: 2.1rem; + line-height: 1.286; +} + +h5, .h5 { + font-size: 1.6rem; + line-height: 1.313; +} + +h6, .h6 { + font-size: 1.3rem; + line-height: 1.385; + text-transform: uppercase; + letter-spacing: .16rem; +} + +p img { + margin: 0; +} + +p.lead { + font-family: "montserrat-regular", sans-serif; + font-size: 2rem; + font-weight: 300; + line-height: 1.8; + margin-bottom: 3.6rem; + color: #6f0a0d; +} + +@media only screen and (max-width: 800px) { + p.lead { + font-size: 1.8rem; + } +} + +em, i, strong, b { + font-size: inherit; + line-height: inherit; + font-style: normal; + font-weight: normal; +} + +em, i { + font-family: "lora-italic", serif; +} + +strong, b { + font-family: 'Lato', sans-serif; + font-weight: 600; +} small { - font-size: 80%; + font-size: 1.2rem; + line-height: inherit; } -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ +blockquote { + margin: 3.9rem 0; + padding-left: 4.5rem; + position: relative; +} -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; +blockquote:before { + content: "\201C"; + font-size: 10rem; + line-height: 0px; + margin: 0; + color: rgba(0, 0, 0, 0.25); + font-family: arial, sans-serif; + position: absolute; + top: 3.6rem; + left: 0; } -sub { - bottom: -0.25em; +blockquote p { + font-family: "montserrat-regular", sans-serif; + padding: 0; + font-size: 2.1rem; + line-height: 1.857; + color: #6f0a0d; } -sup { - top: -0.5em; +blockquote cite { + display: block; + font-family: "montserrat-regular", sans-serif; + font-size: 1.4rem; + font-style: normal; + line-height: 1.5; } -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ +blockquote cite:before { + content: "\2014 \0020"; +} -table { - text-indent: 0; /* 1 */ - border-color: inherit; /* 2 */ - border-collapse: collapse; /* 3 */ +blockquote cite a, blockquote cite a:visited { + color: #6f0a0d; + border: none; } -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ +abbr { + font-family: "lora-bold", serif; + font-variant: small-caps; + text-transform: lowercase; + letter-spacing: .05rem; + color: #6f0a0d; +} -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-feature-settings: inherit; /* 1 */ - font-variation-settings: inherit; /* 1 */ - font-size: 100%; /* 1 */ - font-weight: inherit; /* 1 */ - line-height: inherit; /* 1 */ - letter-spacing: inherit; /* 1 */ - color: inherit; /* 1 */ - margin: 0; /* 2 */ - padding: 0; /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ +var, kbd, samp, code, pre { + font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; +} -button, -select { - text-transform: none; +pre { + padding: 2.4rem 3rem 3rem; + background: #F1F1F1; + overflow-x: auto; +} + +code { + font-size: 1.4rem; + margin: 0 .2rem; + padding: .3rem .6rem; + white-space: nowrap; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 3px; } -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ +pre > code { + display: block; + white-space: pre; + line-height: 2; + padding: 0; + margin: 0; +} -button, -input:where([type='button']), -input:where([type='reset']), -input:where([type='submit']) { - -webkit-appearance: button; /* 1 */ - background-color: transparent; /* 2 */ - background-image: none; /* 2 */ +pre.prettyprint > code { + border: none; } -/* -Use the modern Firefox focus style for all focusable elements. -*/ +del { + text-decoration: line-through; +} -:-moz-focusring { - outline: auto; +abbr[title], dfn[title] { + border-bottom: 1px dotted; + cursor: help; + text-decoration: none; } -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ +mark { + background: #ffd900; + color: #6f0a0d; +} -:-moz-ui-invalid { - box-shadow: none; +hr { + border: solid rgba(0, 0, 0, 0.1); + border-width: 1px 0 0; + clear: both; + margin: 2.4rem 0 1.5rem; + height: 0; +} + + +/* ------------------------------------------------------------------- + * ## Lists + * ------------------------------------------------------------------- */ +ol { + list-style: decimal; +} + +ul { + list-style: disc; +} + +li { + display: list-item; +} + +ol, ul { + margin-left: 1.7rem; +} + +ul li { + padding-left: .4rem; +} + +ul ul, ul ol, ol ol, ol ul { + margin: .6rem 0 .6rem 1.7rem; } -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ +ul.disc li { + display: list-item; + list-style: none; + padding: 0 0 0 .8rem; + position: relative; +} -progress { - vertical-align: baseline; +ul.disc li::before { + content: ""; + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; + background: #ff904d; + position: absolute; + left: -17px; + top: 11px; + vertical-align: middle; } -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ +dt { + margin: 0; + color: #ff904d; +} -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; +dd { + margin: 0 0 0 2rem; } -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ -[type='search'] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ +/* ------------------------------------------------------------------- + * ## responsive video container + * ------------------------------------------------------------------- */ +.video-container { + position: relative; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; +} + +.video-container iframe, +.video-container object, +.video-container embed, +.video-container video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ -::-webkit-search-decoration { - -webkit-appearance: none; +/* ------------------------------------------------------------------- + * ## floated image + * ------------------------------------------------------------------- */ +img.pull-right { + margin: 1.5rem 0 0 3rem; +} + +img.pull-left { + margin: 1.5rem 3rem 0 0; } -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ +/* ------------------------------------------------------------------- + * ## tables + * ------------------------------------------------------------------- */ +table { + border-width: 0; + width: 100%; + max-width: 100%; + font-family: "lora-regular", serif; +} + +th, td { + padding: 1.5rem 3rem; + text-align: left; + border-bottom: 1px solid #E8E8E8; } -/* -Add the correct display in Chrome and Safari. -*/ +th { + color: #6f0a0d; + font-family: "montserrat-bold", sans-serif; +} -summary { - display: list-item; +td { + line-height: 1.5; } -/* -Removes the default spacing and border for appropriate elements. -*/ +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; +} + + +/* ------------------------------------------------------------------- + * ## Spacing + * ------------------------------------------------------------------- */ +button, .btn { + margin-bottom: 1.2rem; +} + +fieldset { + margin-bottom: 1.5rem; +} + +input, +textarea, +select, +pre, blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, figure, +table, p, -pre { - margin: 0; +ul, +ol, +dl, +form, +.video-container, +.cl-custom-select { + margin-bottom: 3rem; } -fieldset { - margin: 0; - padding: 0; + +/* ------------------------------------------------------------------- + * ## pace.js styles - minimal + * ------------------------------------------------------------------- */ +.pace { + -webkit-pointer-events: none; + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.pace-inactive { + display: none; } -legend { - padding: 0; +.pace .pace-progress { + background: #ff904d; + position: fixed; + z-index: 900; + top: 0; + right: 100%; + width: 100%; + height: 4px; +} + +.oldie .pace { + display: none; +} + + + +/* =================================================================== + * # preloader + * + * ------------------------------------------------------------------- */ +#preloader { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #050505; + z-index: 9999999; + height: 100%; + width: 100%; + display: table; +} + +.no-js #preloader, .oldie #preloader { + display: none; +} + +#loader { + display: table-cell; + text-align: center; + vertical-align: middle; +} + +.line-scale-pulse-out > div { + background-color: #ff904d; + width: 4px; + height: 35px; + border-radius: 2px; + margin: 2px; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + display: inline-block; + -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); + animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); +} + +.line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) { + -webkit-animation-delay: -0.4s !important; + animation-delay: -0.4s !important; +} + +.line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) { + -webkit-animation-delay: -0.2s !important; + animation-delay: -0.2s !important; +} + +@-webkit-keyframes line-scale-pulse-out { + 0% { + -webkit-transform: scaley(1); + transform: scaley(1); + } + 50% { + -webkit-transform: scaley(0.4); + transform: scaley(0.4); + } + 100% { + -webkit-transform: scaley(1); + transform: scaley(1); + } } -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; +@keyframes line-scale-pulse-out { + 0% { + -webkit-transform: scaley(1); + transform: scaley(1); + } + 50% { + -webkit-transform: scaley(0.4); + transform: scaley(0.4); + } + 100% { + -webkit-transform: scaley(1); + transform: scaley(1); + } } -/* -Reset default styling for dialogs. -*/ -dialog { - padding: 0; + + +/* =================================================================== + * # forms + * + * ------------------------------------------------------------------- */ +fieldset { + border: none; } -/* -Prevent resizing textareas horizontally by default. -*/ +input[type="email"], +input[type="number"], +input[type="search"], +input[type="text"], +input[type="tel"], +input[type="url"], +input[type="password"], +textarea, +select { + display: block; + height: 6rem; + padding: 1.5rem 0; + border: 0; + outline: none; + color: #333333; + font-family: "montserrat-light", sans-serif; + font-size: 1.4rem; + line-height: 3rem; + max-width: 100%; + background: transparent; + border-bottom: 2px solid rgba(0, 0, 0, 0.15); + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +.cl-custom-select { + position: relative; + padding: 0; +} + +.cl-custom-select select { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + appearance: none; + text-indent: 0.01px; + text-overflow: ''; + margin: 0; + line-height: 3rem; + vertical-align: middle; +} + +.cl-custom-select select option { + padding-left: 2rem; + padding-right: 2rem; +} + +.cl-custom-select select::-ms-expand { + display: none; +} + +.cl-custom-select::after { + border-bottom: 2px solid rgba(0, 0, 0, 0.5); + border-right: 2px solid rgba(0, 0, 0, 0.5); + content: ''; + display: block; + height: 8px; + width: 8px; + margin-top: -7px; + pointer-events: none; + position: absolute; + right: 2.4rem; + top: 50%; + -webkit-transform-origin: 66% 66%; + -ms-transform-origin: 66% 66%; + transform-origin: 66% 66%; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; +} + + +/* IE9 and below */ + +.oldie .cl-custom-select::after { + display: none; +} textarea { - resize: vertical; + min-height: 25rem; +} + +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: #6f0a0d; + border-bottom: 2px solid #6f0a0d; +} + +label, legend { + font-family: "montserrat-regular", sans-serif; + font-size: 1.4rem; + font-weight: bold; + margin-bottom: .9rem; + line-height: 1.714; + color: #6f0a0d; + display: block; +} + +input[type="checkbox"], input[type="radio"] { + display: inline; +} + +label > .label-text { + display: inline-block; + margin-left: 1rem; + font-family: "montserrat-regular", sans-serif; + font-weight: normal; + line-height: inherit; +} + +label > input[type="checkbox"], +label > input[type="radio"] { + margin: 0; + position: relative; + top: .15rem; } -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; /* 1 */ - color: #9ca3af; /* 2 */ +/* ------------------------------------------------------------------- + * ## style placeholder text + * ------------------------------------------------------------------- */ +::-webkit-input-placeholder { + color: #6f0a0d; } -input::placeholder, -textarea::placeholder { - opacity: 1; /* 1 */ - color: #9ca3af; /* 2 */ +:-moz-placeholder { + color: #6f0a0d; + /* Firefox 18- */ } -/* -Set the default cursor for buttons. -*/ +::-moz-placeholder { + color: #6f0a0d; + /* Firefox 19+ */ +} + +:-ms-input-placeholder { + color: #6f0a0d; +} +.placeholder { + color: #6f0a0d !important; +} + + +/* ------------------------------------------------------------------- + * ## change autocomplete styles in chrome + * ------------------------------------------------------------------- */ +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus input:-webkit-autofill, +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: #ff904d; + transition: background-color 5000s ease-in-out 0s; +} + + + +/* =================================================================== + * # buttons + * + * ------------------------------------------------------------------- */ +.btn, button, -[role="button"] { +input[type="submit"], +input[type="reset"], +input[type="button"] { + display: inline-block; + font-family: "Inconsolata", monospace; + font-size: 1.8rem; + font-weight: 600; + /* text-transform: uppercase; */ + letter-spacing: .3rem; + height: 5.4rem; + line-height: calc(5.4rem - .4rem); + padding: 0 3rem; + margin: 0 .3rem 1.2rem 0; + color: #6f0a0d; + text-decoration: none; + text-align: center; + white-space: nowrap; + cursor: pointer; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + background-color: #6f0a0d; + border: .2rem solid #6f0a0d; +} + +.btn:hover, +button:hover, +input[type="submit"]:hover, +input[type="reset"]:hover, +input[type="button"]:hover, +.btn:focus, +button:focus, +input[type="submit"]:focus, +input[type="reset"]:focus, +input[type="button"]:focus { + background-color: #b8b8b8; + border-color: #b8b8b8; + color: #6f0a0d; + 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: #ff904d; + border-color: #ff904d; + color: #FFFFFF; +} + +.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, +.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 { + background: #33a242; + border-color: #33a242; +} + + +/* button modifiers + * ------------------------------------------------- */ + +.btn.full-width, button.full-width { + width: 100%; + margin-right: 0; +} + +.btn--medium, button.btn--medium { + height: 5.7rem !important; + line-height: calc(5.7rem - .4rem) !important; +} + +.btn--large, button.btn--large { + height: 6rem !important; + line-height: calc(6rem - .4rem) !important; +} + +.btn--stroke, button.btn--stroke { + /* background: transparent !important; */ + border: 0.2rem solid #ff904d; + color: #ff904d; +} + +.btn--stroke:hover, button.btn--stroke:hover { + border: 0.2rem solid #6f0a0d; + color: #6f0a0d; +} + +.btn--pill, button.btn--pill { + padding-left: 3rem !important; + padding-right: 3rem !important; + border-radius: 1000px !important; +} + +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; +} + + +/* =================================================================== + * # additional components + * + * ------------------------------------------------------------------- */ + + +/* ------------------------------------------------------------------- + * ## alert box + * ------------------------------------------------------------------- */ +.alert-box { + padding: 2.1rem 4rem 2.1rem 3rem; + position: relative; + margin-bottom: 3rem; + border-radius: 3px; + font-family: "montserrat-regular", sans-serif; + font-size: 1.5rem; + line-height: 1.6; +} + +.alert-box__close { + position: absolute; + right: 1.8rem; + top: 1.8rem; + cursor: pointer; +} + +.alert-box__close.fa { + font-size: 12px; +} + +.alert-box--error { + background-color: #ffd1d2; + color: #e65153; +} + +.alert-box--success { + background-color: #c8e675; + color: #758c36; +} + +.alert-box--info { + background-color: #d7ecfb; + color: #4a95cc; +} + +.alert-box--notice { + background-color: #fff099; + color: #bba31b; +} + + +/* ------------------------------------------------------------------- + * ## additional typo styles + * ------------------------------------------------------------------- */ + + +/* drop cap + * ----------------------------------------------- */ +.drop-cap:first-letter { + float: left; + margin: 0; + padding: 1.5rem .6rem 0 0; + font-size: 8.4rem; + font-family: "montserrat-regular", sans-serif; + font-weight: bold; + line-height: 6rem; + text-indent: 0; + background: transparent; + color: #6f0a0d; +} + + +/* line definition 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; +} + + +/* dictionary definition 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) ". "; +} + + +/** + * Pull Quotes + * ----------- + * markup: + * + * + * + * --------------------------------------------------------------------- */ + +.pull-quote { + position: relative; + padding: 2.1rem 3rem 2.1rem 0px; +} + +.pull-quote:before, .pull-quote:after { + height: 1em; + position: absolute; + font-size: 10rem; + font-family: Arial, Sans-Serif; + color: rgba(0, 0, 0, 0.25); +} + +.pull-quote:before { + content: "\201C"; + top: -3.6rem; + left: 0; +} + +.pull-quote:after { + content: '\201D'; + bottom: 3.6rem; + right: 0; +} + +.pull-quote blockquote { + margin: 0; +} + +.pull-quote blockquote:before { + content: none; +} + + +/** + * Stats Tab + * --------- + * markup: + * + * + * + * Extend this object into your markup. + * + * --------------------------------------------------------------------- */ + +.stats-tabs { + padding: 0; + margin: 3rem 0; +} + +.stats-tabs li { + display: inline-block; + margin: 0 1.5rem 3rem 0; + padding: 0 1.5rem 0 0; + border-right: 1px solid rgba(0, 0, 0, 0.1); +} + +.stats-tabs li:last-child { + margin: 0; + padding: 0; + border: none; +} + +.stats-tabs li a { + display: inline-block; + font-size: 2.5rem; + font-family: "montserrat-regular", sans-serif; + font-weight: bold; + border: none; + color: #6f0a0d; +} + +.stats-tabs li a:hover { + color: #ff904d; +} + +.stats-tabs li a em { + display: block; + margin: .6rem 0 0 0; + font-size: 1.4rem; + font-family: "montserrat-regular", sans-serif; + color: #6f0a0d; +} + + +/* ------------------------------------------------------------------- + * ## skillbars + * ------------------------------------------------------------------- */ +.skill-bars { + list-style: none; + margin: 6rem 0 3rem; +} + +.skill-bars li { + height: .6rem; + background: #c9c9c9; + width: 100%; + margin-bottom: 6.9rem; + padding: 0; + position: relative; +} + +.skill-bars li strong { + position: absolute; + left: 0; + top: -3rem; + font-family: "montserrat-bold", sans-serif; + color: #6f0a0d; + text-transform: uppercase; + letter-spacing: .2rem; + font-size: 1.4rem; + line-height: 2.4rem; +} + +.skill-bars li .progress { + background: #6f0a0d; + position: relative; + height: 100%; +} + +.skill-bars li .progress span { + position: absolute; + right: 0; + top: -3.6rem; + display: block; + font-family: "montserrat-regular", sans-serif; + color: #FFFFFF; + font-size: 1.1rem; + line-height: 1; + background: #6f0a0d; + padding: .6rem .6rem; + border-radius: 3px; +} + +.skill-bars li .progress span::after { + position: absolute; + left: 50%; + bottom: -5px; + margin-left: -5px; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + border-top: 5px solid #6f0a0d; + 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%; } + + + +/* =================================================================== + * # reusable and common theme styles + * + * ------------------------------------------------------------------- */ +.wide { + max-width: 1400px; +} + +.narrow { + max-width: 800px; +} + + +/* ------------------------------------------------------------------- + * ## display headings + * ------------------------------------------------------------------- */ +.display-1 { + font-family: 'Lato', sans-serif; + font-size: 6.3rem; + line-height: 1.25; + color: #6f0a0d; + margin-top: 0; +} + +.display-1--light { + color: #F89559; +} + +.display-2 { + font-family: 'Lato', sans-serif; + font-size: 6.3rem; + line-height: 1.255; + color: #F89559; + margin-top: 0; +} + +.display-2--light { + color: rgb(239 130 63); +} + +.subhead + .display-2 { + margin-top: .6rem; +} + +.subhead { + font-family: 'Inconsolata', monospace; + font-size: 1.7rem; + line-height: 1.333; + text-transform: uppercase; + letter-spacing: .25rem; + color: #ff7559; + margin-top: 0; + margin-bottom: 0; +} + +.subhead--dark { + color: #6f0a0d; +} + + +/* ------------------------------------------------------------------- + * responsive: + * display headings + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1200px) { + .display-1 { + font-size: 7.2rem; + } + .display-2 { + font-size: 4.4rem; + } +} + +@media only screen and (max-width: 800px) { + .display-1 { + font-size: 6.5rem; + } + .display-2 { + font-size: 4rem; + } +} + +@media only screen and (max-width: 600px) { + .display-1 { + font-size: 5rem; + } + .display-2 { + font-size: 3.3rem; + } + .subhead { + font-size: 1.5rem; + } +} + +@media only screen and (max-width: 400px) { + .display-1 { + font-size: 4.2rem; + } + .display-2 { + font-size: 3rem; + } +} + + +/* ------------------------------------------------------------------- + * ## section header + * ------------------------------------------------------------------- */ +.section-header { + text-align: center; + position: relative; + margin-bottom: 3.6rem; + max-width: 960px; +} + +.section-header.has-bottom-sep { + padding-bottom: 2.1rem; + position: relative; +} + +.section-header.has-bottom-sep::before { + content: ""; + display: inline-block; + height: 1px; + width: 550px; + background-color: rgba(0, 0, 0, 0.1); + position: absolute; + bottom: 0; + left: 50%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); +} + +.section-header.has-bottom-sep.light-sep::before { + background-color: rgba(255, 255, 255, 0.05); +} + + +/* ------------------------------------------------------------------- + * responsive: + * section-header + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1200px) { + .section-header { + max-width: 800px; + } +} + +@media only screen and (max-width: 900px) { + .section-header { + max-width: 700px; + } +} + +@media only screen and (max-width: 800px) { + .s-clients { + padding-bottom: 17.4rem; + } + .section-header.has-bottom-sep::before { + width: 400px; + } +} + +@media only screen and (max-width: 600px) { + .section-header.has-bottom-sep { + padding-bottom: 0; + } + .section-header.has-bottom-sep::before { + width: 250px; + } +} + + +/* ------------------------------------------------------------------- + * ## slick slider + * ------------------------------------------------------------------- */ +.slick-slider .slick-slide { + outline: none; +} + +.slick-slider .slick-dots { + display: block; + list-style: none; + width: 100%; + padding: 0; + margin: 3rem 0 0 0; + text-align: center; + position: absolute; + top: 100%; + left: 0; +} + +.slick-slider .slick-dots li { + display: inline-block; + width: 27px; + height: 27px; + margin: 0; + padding: 9px; + cursor: pointer; +} + +.slick-slider .slick-dots li button { + display: block; + width: 10px; + height: 10px; + border-radius: 50%; + background: white; + border: none; + line-height: 10px; + padding: 0; + margin: 0; + cursor: pointer; + font: 0/0 a; + text-shadow: none; + color: transparent; +} + +.slick-slider .slick-dots li button:hover, +.slick-slider .slick-dots li button:focus { + outline: none; +} + +.slick-slider .slick-dots li.slick-active button, +.slick-slider .slick-dots li:hover button { + background: #ff904d; +} + + + +/* =================================================================== + * # header styles + * + * ------------------------------------------------------------------- */ +.s-header { + width: 100%; + height: 96px; + background-color: transparent; + position: absolute; + top: 0; + z-index: 500; +} + + +/* ------------------------------------------------------------------- + * ## header logo + * ------------------------------------------------------------------- */ +.header-logo { + display: inline-block; + position: absolute; + margin: 0; + padding: 0; + left: 40px; + top: 50%; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + z-index: 501; +} + +.header-logo a { + display: block; + margin: 9px 0 0 0; + padding: 0; + outline: 0; + border: none; + width: 80px; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + + +/* ------------------------------------------------------------------- + * ## main navigation + * ------------------------------------------------------------------- */ +.header-nav { + /* background: white; */ + background: rgba(255,255,255,0.8); + border: 1px solid black; + backdrop-filter: blur(10px); + color: rgba(255, 255, 255, 0.25); + font-family: "montserrat-light", sans-serif; + font-size: 1.3rem; + line-height: 1.846; + padding: 3.6rem 3rem 3.6rem 3.6rem; + height: 100%; + width: 280px; + position: fixed; + right: 0; + top: 0; + z-index: 700; + overflow-y: auto; + overflow-x: hidden; + -webkit-transition: all 0.5s ease; + transition: all 0.5s ease; + -webkit-transform: translateZ(0); + -webkit-backface-visibility: hidden; + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + visibility: hidden; +} + +.header-nav a, .header-nav a:visited { + color: rgba(255, 255, 255, 0.5); +} + +.header-nav a:hover, +.header-nav a:focus, +.header-nav a:active { + color: orange; +} + +.header-nav h3 { + font-family: "Inconsolata-semibold", monospace; + font-size: 26 px; + font-weight: bold; + line-height: 0.5; + text-transform: normal; + letter-spacing: .25rem; + margin-bottom: 2.8rem; + margin-top: .9rem; + color: #E35134; +} + +.header-nav p { + margin-bottom: 2.7rem; +} + +.header-nav__content { + position: relative; + left: 50px; + opacity: 0; + visibility: hidden; +} + +.header-nav__list { + font-family: 'Inconsolata', monospace; + font-size: 2rem; + margin: 3.6rem 0 3rem 0; + padding: 0 0 1.8rem 0; + list-style: none; +} + +.header-nav__list li { + padding-left: 0; + line-height: 4.5rem; +} + +.header-nav__list a, +.header-nav__list a:visited { + color: #6f0a0d; +} + +.header-nav__social { + list-style: none; + display: inline-block; + margin: 0; + font-size: 1.8rem; +} + +.header-nav__social li { + margin-right: 12px; + padding-left: 0; + display: inline-block; +} + +.header-nav__social li a { + color: #6f0a0d !important; +} + +.header-nav__social li a:hover, +.header-nav__social li a:focus { + color: #ff904d !important; +} + +.header-nav__social li:last-child { + margin: 0; +} + +.header-nav__close { + display: block; + height: 30px; + width: 30px; + border-radius: 3px; + background-color: rgba(0, 0, 0, 0.3); + position: absolute; + top: 36px; + right: 30px; + font: 0/0 a; + text-shadow: none; + color: transparent; + z-index: 800; +} + +.header-nav__close span::before, +.header-nav__close span::after { + content: ""; + display: block; + height: 2px; + width: 12px; + background-color: #6f0a0d ; + position: absolute; + top: 50%; + left: 9px; + margin-top: -1px; +} + +.header-nav__close span::before { + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.header-nav__close span::after { + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} + + +/* menu is open + * ----------------------------------------------- */ +.menu-is-open .header-nav { + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + visibility: visible; + -webkit-overflow-scrolling: touch; +} + +.menu-is-open .header-nav .header-nav__content { + opacity: 1; + visibility: visible; + -webkit-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + -webkit-transition-delay: 0.3s; + transition-delay: 0.3s; + left: 0; +} + + +/* ------------------------------------------------------------------- + * ## mobile menu toggle + * ------------------------------------------------------------------- */ +.header-menu-toggle { + position: fixed; + right: 38px; + top: 24px; + height: 42px; + width: 42px; + line-height: 42px; + font-family: 'Inconsolata', monospace; + font-size: 1.6rem; + font-weight: 800; + text-transform: uppercase; + letter-spacing: .3rem; + color: #00163D; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; +} + +.header-menu-toggle.opaque { + background-color: #ffffff + ; +} + +.header-menu-toggle.opaque .header-menu-text { + background-color: #ffffff ; +} + +.header-menu-toggle:hover, .header-menu-toggle:focus { + color: #00163D; +} + +.header-menu-text { + display: block; + position: absolute; + top: 0; + left: -70px; + width: 70px; + padding-left: 12px; +} + +.header-menu-icon { + display: block; + width: 22px; + height: 2px; + margin-top: -1px; + position: absolute; + left: 10px; + top: 50%; + right: auto; + bottom: auto; + background-color: #121212; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; +} + +.header-menu-icon::before, .header-menu-icon::after { + content: ''; + width: 100%; + height: 100%; + background-color: inherit; + position: absolute; + left: 0; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; +} + +.header-menu-icon::before { + top: -9px; +} + +.header-menu-icon::after { + bottom: -9px; +} + + +/* ------------------------------------------------------------------- + * responsive: + * header + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 600px) { + .s-header { + height: 90px; + } + .header-logo { + left: 30px; + } + .header-menu-toggle { + right: 25px; + } +} + +@media only screen and (max-width: 400px) { + .header-menu-text { + display: none; + } +} + + + +/* =================================================================== + * # home + * + * ------------------------------------------------------------------- */ +.s-home { + width: 100%; + height: 100%; + min-height: 786px; + background-color: transparent; + position: relative; + display: table; +} + +.s-home .shadow-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: .4; + background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 100%); + background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 100%); + background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.8) 100%); + filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#6f0a0d00', endColorstr='#cc000000', GradientType=0); +} + +.s-home .overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: .6; + background-color: #FFFFFF; +} + +.no-js .s-home { + background: #6f0a0d; +} + + +/* ------------------------------------------------------------------- + * ## home content + * ------------------------------------------------------------------- */ +.home-content { + display: table-cell; + width: 100%; + height: 100%; + vertical-align: middle; + padding-bottom: 15.6rem; + position: relative; + overflow: hidden; +} + +.home-content h3 { + font-family: 'Insolata', monospace; + font-size: 1.6rem; + color: #121212; + /* text-transform: uppercase; */ + letter-spacing: .3rem; + position: relative; + margin-top: 0; + margin-bottom: 1.2rem; + margin-left: 6px; + font-weight: normal; +} + +.home-content h1 { + font-family: 'Lato', sans-serif; + font-size: 6.3rem; + line-height: 1.333; + margin-top: 0; + color: #FF914D; + font-weight: 800; +} + +.home-content__main { + padding-top: 24rem; + position: relative; +} + +.home-content__buttons { + padding-top: 3rem; + text-align: left; +} + +.home-content__buttons .btn { + width: 215px; + border-color: #121212; + color: #00163D; + margin: 1.5rem 1.5rem 0 0; + letter-spacing: .25rem; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; +} + +.btn2 { + width: 215px; + border-color: #121212; + color: #00163D; + margin: 1.5rem 1.5rem 0 0; + letter-spacing: .25rem; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; +} + +.home-content__buttons .btn:last-child { + margin-right: 0; +} + +.home-content__buttons .btn:hover, +.home-content__buttons .btn:focus { + background: #FFFFFF !important; + color: #6f0a0d; +} + +.home-content__scroll { + position: absolute; + right: 9.5rem; + bottom: 8.4rem; + font-weight: 800; +} + +.home-content__scroll a { + font-family: 'Inconsolata', monospace; + font-size: 1.3rem; + text-transform: uppercase; + letter-spacing: .3rem; + color: #00163D; + position: relative; + display: inline-block; + line-height: 3rem; + padding-left: 2.5rem; +} + +.home-content__scroll a::before { + border-bottom: 2px solid #121212; + border-right: 2px solid #121212; + content: ''; + display: block; + height: 8px; + width: 8px; + margin-top: -6px; + pointer-events: none; + position: absolute; + left: 0; + top: 50%; + -webkit-transform-origin: 66% 66%; + -ms-transform-origin: 66% 66%; + transform-origin: 66% 66%; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; +} + +.home-content__line { + display: block; + width: 2px; + height: 10.2rem; + background-color: #ff904d; + position: absolute; + right: 7.2rem; + bottom: 0; +} + +.bunny { + margin: 0; + position: absolute; + top: 52%; + right: 20.4rem; + -webkit-transform: translate3d(0, -50%, 0); + -ms-transform: translate3d(0, -50%, 0); + transform: translate3d(0, -50%, 0); +} + +/* ------------------------------------------------------------------- + * ## home social + * ------------------------------------------------------------------- */ +.home-social { + font-family: "Inconsolata", monospace; + list-style: none; + margin: 0; + position: absolute; + top: 50%; + right: 5.4rem; + -webkit-transform: translate3d(0, -50%, 0); + -ms-transform: translate3d(0, -50%, 0); + transform: translate3d(0, -50%, 0); +} + +.home-social a { + color: rgb(0, 0, 0); + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; +} + +.home-social li { + position: relative; + padding: .9rem 0; +} + +.home-social li a { + display: block; + width: 33px; + height: 33px; +} + +.home-social i, .home-social span { + position: absolute; + top: 0; + line-height: 33px; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; +} + +.home-social i { + font-size: 14px; + right: 0; + text-align: center; + display: inline-block; + width: 33px; + height: 33px; + line-height: calc(33px - 4px); + border: 2px solid #000000; + border-radius: 50%; +} + +.home-social span { + color: #00163D; + right: 4.5rem; + font-size: 1.5rem; + opacity: 0; + visibility: hidden; + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + -webkit-transform-origin: 100% 50%; + -ms-transform-origin: 100% 50%; + transform-origin: 100% 50%; +} + +.home-social li:hover span { + opacity: 1; + visibility: visible; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} + + +/* animate .home-content__main + * ------------------------------------------------------------------- */ +html.cl-preload .home-content__main { + opacity: 0; +} + +html.cl-loaded .home-content__main { + animation-duration: 1s; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} + +html.no-csstransitions .home-content__main { + opacity: 1; +} + + +/* ------------------------------------------------------------------- + * ## home animations + * ------------------------------------------------------------------- */ + + +/* fade in */ + +@-webkit-keyframes fadeIn { + from { + opacity: 0; + -webkit-transform: translate3d(0, 150%, 0); + -ms-transform: translate3d(0, 150%, 0); + transform: translate3d(0, 150%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes fadeIn { + from { + opacity: 0; + -webkit-transform: translate3d(0, 150%, 0); + -ms-transform: translate3d(0, 150%, 0); + transform: translate3d(0, 150%, 0); + } + to { + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } +} + + +/* fade out */ + +@-webkit-keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -150%, 0); + -ms-transform: translate3d(0, -150%, 0); + transform: translate3d(0, -150%, 0); + } +} + +@keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -150%, 0); + -ms-transform: translate3d(0, -150%, 0); + transform: translate3d(0, -150%, 0); + } +} + + +/* ------------------------------------------------------------------- + * responsive: + * home + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1500px) { + .home-content h1 { + font-size: 6rem; + } + .home-content__main { + max-width: 1000px; + } +} + +@media only screen and (max-width: 1200px) { + .home-content h1 { + font-size: 5.5rem; + } + .home-content__main { + max-width: 800px; + } +} + +@media only screen and (max-width: 1000px) { + .home-content h1 { + font-size: 4.6rem; + } + .home-content br { + display: none; + } + .home-content__main { + padding-top: 21rem; + padding-right: 80px; + max-width: 680px; + } +} + +@media only screen and (max-width: 800px) { + .home-content h3 { + font-size: 1.5rem; + } + .home-content h1 { + font-size: 4rem; + } + .home-content__main { + padding-right: 70px; + max-width: 550px; + } +} + +@media only screen and (max-width: 700px) { + .home-content__main { + max-width: 490px; + } + .home-content__buttons { + padding-top: 1.2rem; + text-align: center; + } + .home-content__buttons .btn { + display: block; + width: 70%; + margin: 1.5rem 0 0 0; + } + .home-social { + right: 4rem; + } + .home-content__scroll { + right: 7.5rem; + } + .home-content__line { + right: 5.5rem; + } +} + +@media only screen and (max-width: 600px) { + .home-content h1 { + font-size: 3.8rem; + } + .home-social { + right: 2rem; + } + .home-social li { + padding: .6rem 0; + } + .home-social i { + font-size: 17px; + border: none; + } + .home-social span { + display: none; + } + .home-content__scroll { + bottom: 5.4rem; + } + .home-content__line { + height: 7.2rem; + } +} + +@media only screen and (max-width: 500px) { + .s-home { + min-height: 642px; + } + .home-content h1 { + font-size: 3.5rem; + } + .home-content__main { + text-align: center; + max-width: none; + padding-top: 15rem; + padding-right: 25px; + width: 85%; + } + .home-content__buttons { + padding-top: 1.2rem; + } + .home-content__buttons .btn { + width: auto; + margin: 1.5rem 0 0 0; + } + .home-social { + display: none; + } +} + +@media only screen and (max-width: 450px) { + .home-content h1 { + font-size: 3.3rem; + } +} + +@media only screen and (max-width: 400px) { + .s-home { + min-height: 630px; + } + .home-content h1 { + font-size: 3.2rem; + } + .home-content__main { + padding-top: 16.2rem; + width: auto; + } +} + + + +/* =================================================================== + * # about + * + * ------------------------------------------------------------------- */ +.s-about { + padding-top: 16.2rem; + padding-bottom: 15rem; + background-color: #FFFFFF; + color: #010507; + position: relative; +} + +.s-about .section-header.has-bottom-sep::before { + background-color: rgba(255, 255, 255, 0.25); +} + +.about-desc { + font-size: 2.4rem; + line-height: 1.75; + text-align: center; + max-width: 1024px; +} + + +/* ------------------------------------------------------------------- + * ## about stats + * ------------------------------------------------------------------- */ +.about-stats { + text-align: center; +} + +.stats__col { + margin: 5.4rem 0; + padding: 0 2rem; + position: relative; + overflow: hidden; + white-space: nowrap; + border-right: 1px solid rgba(255, 255, 255, 0.25); +} + +.stats__col:last-child { + border-right: none; +} + +.stats__count { + font-family: "montserrat-bold", sans-serif; + font-size: 8.4rem; + line-height: 1; + color: #FFFFFF; + position: relative; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.stats h5 { + font-family: "montserrat-semibold", sans-serif; + margin-top: 1.8rem; + color: #6f0a0d; + font-size: 1.8rem; + line-height: 1.333; + position: relative; +} + +.about__line { + display: block; + width: 2px; + height: 10.2rem; + background-color: #FFFFFF; + position: absolute; + right: 7.2rem; + top: 0; +} + + +/* ------------------------------------------------------------------- + * responsive: + * about + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1200px) { + .about-desc { + font-size: 2.2rem; + max-width: 940px; + } + .about-stats { + padding-top: 3rem; + padding-bottom: 3.9rem; + } + .about-stats { + max-width: 800px; + } + .stats__col { + margin: 1.5rem 0; + } + .stats__col:nth-child(n) { + border: none; + } + .stats__col:nth-child(2n+1) { + border-right: 1px solid rgba(255, 255, 255, 0.25); + } +} + +@media only screen and (max-width: 800px) { + .about-desc { + font-size: 2rem; + max-width: 600px; + } + .stats__count { + font-size: 8rem; + } + .stats h5 { + margin-top: 1.2rem; + } +} + +@media only screen and (max-width: 700px) { + .about__line { + right: 5.5rem; + } +} + +@media only screen and (max-width: 600px) { + .s-about { + padding-top: 12rem; + } + .about-desc { + font-size: 1.9rem; + } + .about-stats { + padding-top: 0; + } + .stats__col { + margin: 0; + padding-top: 3rem; + padding-bottom: 3rem; + position: relative; + } + .stats__col::after { + content: ""; + display: block; + height: 1px; + width: 250px; + background-color: rgba(255, 255, 255, 0.25); + position: absolute; + bottom: 0; + left: 50%; + margin-left: -125px; + } + .stats__col:last-child::after { + display: none; + } + .stats__col:nth-child(n) { + border: none; + } + .about__line { + height: 7.2rem; + } +} + +@media only screen and (max-width: 400px) { + .about-desc { + font-size: 1.8rem; + } + .stats__count { + font-size: 7.8rem; + } +} + + + +/* =================================================================== + * # services + * + * ------------------------------------------------------------------- */ +.s-services { + padding-top: 16.2rem; + padding-bottom: 15.2rem; + background-color: #FFFFFF; + color: #000000; + position: relative; +} + + +/* ------------------------------------------------------------------- + * ## services list + * ------------------------------------------------------------------- */ +.services-list { + margin-top: 2rem; +} + +/* .services-list .service-item { + margin-bottom: .9rem; +} + +.services-list .service-item h3 { + margin-top: 0; +} + +.services-list .service-item:nth-child(2n+1) { + padding-right: 50px; +} + +.services-list .service-item:nth-child(2n+2) { + padding-left: 50px; +} + +.services-list .service-text { + margin-left: 7.8rem; +} + +.services-list .service-icon { + float: left; + color: #ff904d; + font-size: 4.8rem; + margin-top: -.6rem; +} */ + +.services-list .service-item{ + display: flex; + flex-direction: column; + text-align: center; +} + +.services-list .service-text{ + margin-top: -20px; +} + +/* ------------------------------------------------------------------- + * responsive: + * services + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1200px) { + .services-list { + max-width: 1000px; + } + .services-list .service-item:nth-child(2n+1) { + padding-right: 30px; + } + .services-list .service-item:nth-child(2n+2) { + padding-left: 30px; + } +} + +@media only screen and (max-width: 1000px) { + .services-list h3 { + font-size: 2.5rem; + } + .services-list .service-item:nth-child(2n+1) { + padding-right: 20px; + } + .services-list .service-item:nth-child(2n+2) { + padding-left: 20px; + } +} + +@media only screen and (max-width: 800px) { + .services-list { + margin-top: 4.2rem; + max-width: 500px; + text-align: center; + } + .services-list .service-item:nth-child(n) { + padding-right: 15px; + padding-left: 15px; + } + .services-list h3 { + font-size: 3rem; + } + .services-list .service-text { + margin-left: 0; + } + .services-list .service-icon { + font-size: 4.5rem; + float: none; + margin-top: 0; + } +} + +@media only screen and (max-width: 600px) { + .s-services { + padding-top: 12rem; + } + .services-list .service-item:nth-child(n) { + padding-right: 10px; + padding-left: 10px; + } + .services-list h3 { + font-size: 2.5rem; + } +} + +@media only screen and (max-width: 400px) { + .services-list .service-item:nth-child(n) { + padding-right: 0; + padding-left: 0; + } + .services-list h3 { + font-size: 2.5rem; + } +} + + + +/* =================================================================== + * # works + * + * ------------------------------------------------------------------- */ +.s-works { + background: #FFFFFF; + padding: 0 0 0rem 0; + min-height: 800px; + position: relative; + display: none; +} +@media only screen and (min-width:991px){ + .s-works{ + display: block; + } +} + +.s-works .intro-wrap { + padding: 15rem 0 25.2rem; + background: #6f0a0d; +} + +.works-content { + max-width: 1160px; + margin-top: -23.4rem; +} + + +/* ------------------------------------------------------------------- + * ## bricks/masonry + * ------------------------------------------------------------------- */ +.masonry:after { + content: ""; + display: table; + clear: both; +} + +.masonry .grid-sizer, .masonry__brick { + width: 50%; +} + +.masonry__brick { + float: left; + padding: 0; +} + +.item-folio { + position: relative; + overflow: hidden; +} + +.item-folio__thumb img { + vertical-align: bottom; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; +} + +.item-folio__thumb a { + display: block; +} + +.item-folio__thumb a::before { + display: block; + background-color: rgba(0, 0, 0, 0.8); + content: ""; + opacity: 0; + visibility: hidden; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; + z-index: 1; +} + +.item-folio__thumb a::after { + content: "+"; + font-family: georgia, serif; + font-size: 2.7rem; + display: block; + height: 30px; + width: 30px; + line-height: 30px; + margin-left: -15px; + margin-top: -15px; + position: absolute; + left: 50%; + top: 50%; + text-align: center; + color: rgba(255, 255, 255, 0.8); + opacity: 0; + visibility: hidden; + -webkit-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + z-index: 1; +} + +.item-folio__text { + position: absolute; + left: 0; + bottom: 3.6rem; + padding: 0 3.3rem; + z-index: 2; + opacity: 0; + visibility: hidden; + -webkit-transform: translate3d(0, 100%, 0); + -ms-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +.item-folio__title { + font-family: "montserrat-semibold", sans-serif; + font-size: 1.4rem; + line-height: 1.286; + color: #FFFFFF; + text-transform: uppercase; + letter-spacing: .2rem; + margin: 0 0 .3rem 0; +} + +.item-folio__cat { + color: rgba(255, 255, 255, 0.5); + font-family: "montserrat-light", sans-serif; + font-size: 1.4rem; + line-height: 1.714; + margin-bottom: 0; +} + +.item-folio__caption { + display: none; +} + +.item-folio__project-link { + display: block; + color: #FFFFFF; + box-shadow: 0 0 0 1px #FFFFFF; + border-radius: 50%; + height: 4.2rem; + width: 4.2rem; + text-align: center; + z-index: 500; + position: absolute; + top: 3rem; + left: 3rem; + opacity: 0; + visibility: hidden; + -webkit-transform: translate3d(0, -100%, 0); + -ms-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); +} + +.item-folio__project-link i { + font-size: 1.8rem; + line-height: 4.2rem; +} + +.item-folio__project-link::before { + display: block; + content: ""; + height: 3rem; + width: 1px; + background-color: rgba(255, 255, 255, 0.1); + position: absolute; + top: -3rem; + left: 50%; +} + +.item-folio__project-link:hover, +.item-folio__project-link:focus, +.item-folio__project-link:active { + background-color: #FFFFFF; + color: #6f0a0d; +} + + +/* on hover + * ----------------------------------------------- */ +.item-folio:hover .item-folio__thumb a::before { + opacity: 1; + visibility: visible; +} + +.item-folio:hover .item-folio__thumb a::after { + opacity: 1; + visibility: visible; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} + +.item-folio:hover .item-folio__thumb img { + -webkit-transform: scale(1.05); + -ms-transform: scale(1.05); + transform: scale(1.05); +} + +.item-folio:hover .item-folio__project-link, +.item-folio:hover .item-folio__text { + opacity: 1; + visibility: visible; + -webkit-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + + +/* ------------------------------------------------------------------- + * responsive: + * works + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 800px) { + .item-folio__title, .item-folio__cat { + font-size: 1.3rem; + } +} + +@media only screen and (max-width: 600px) { + .s-works { + padding-bottom: 12rem; + } + .s-works .intro-wrap { + padding: 12rem 0 25.2rem; + } + .works-content { + margin-top: -25.2rem; + } + .masonry__brick { + float: none; + width: 100%; + } + .item-folio__title, .item-folio__cat { + font-size: 1.4rem; + } +} + + + +/* =================================================================== + * # clients + * + * ------------------------------------------------------------------- */ +.s-clients { + padding-top: 16.2rem; + padding-bottom: 16.8rem; + background-color: white; + color: #757575; + position: relative; + display: none; +} +@media only screen and (max-width:792px){ + .s-clients{ + display: block; + } +} + +/* ------------------------------------------------------------------- + * ## slider + * ------------------------------------------------------------------- */ +.clients-outer { + margin-top: 3.6rem; + padding-bottom: 9rem; + text-align: center; + position: relative; +} + +.clients__slide { + display: block; + opacity: .55; + padding: 1.5rem 2.8rem; + -webkit-transition: opacity 0.5s ease-in-out; + transition: opacity 0.5s ease-in-out; +} + +.clients__slide:hover, .clients__slide:focus { + opacity: 1; +} + + +/* ------------------------------------------------------------------- + * ## testimonials + * ------------------------------------------------------------------- */ +.clients-testimonials { + margin-top: 4.2rem; + padding-top: 7.2rem; + text-align: center; + position: relative; +} + +.clients-testimonials::before { + content: ""; + display: block; + height: 1px; + width: 550px; + background-color: rgba(0, 0, 0, 0.1); + text-align: center; + position: absolute; + top: 0; + left: 50%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); +} + +.clients-testimonials .testimonials { + margin: 0 10%; +} + +.clients-testimonials .testimonials p { + font-family: "lora-regular", serif; + font-size: 3rem; + line-height: 1.8; + color: #555555; + margin-bottom: 6rem; +} + +.clients-testimonials .testimonials__slide { + padding: 0 0 3rem 0; +} + +.clients-testimonials .testimonials__avatar { + height: 8.4rem; + width: 8.4rem; + border-radius: 50%; + margin: 0 auto 1.2rem auto; +} + +.clients-testimonials .testimonials__name, +.clients-testimonials .testimonials__pos { + display: block; +} + +.clients-testimonials .testimonials__name { + font-family: "montserrat-semibold", sans-serif; + color: #6f0a0d; +} + +.clients-testimonials .testimonials__pos { + font-family: "montserrat-light", sans-serif; + font-size: 1.4rem; +} + +.clients-testimonials .testimonials .slick-arrow { + position: absolute; + top: 7.2rem; + width: 66px; + height: 66px; + margin: 0; + padding: 0; + background-color: transparent; + background-repeat: no-repeat; + background-size: 22px 15px; + background-position: center; + border: none; + cursor: pointer; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + font: 0/0 a; + text-shadow: none; + color: transparent; + z-index: 2; +} + +.clients-testimonials .testimonials .slick-prev { + left: -130px; + background-image: url("../images/left-arrow.png"); +} + +.clients-testimonials .testimonials .slick-next { + right: -130px; + background-image: url("../images/right-arrow.png"); +} + +.clients-testimonials .testimonials .slick-dots { + margin-top: -0.6px; +} + + +/* ------------------------------------------------------------------- + * responsive: + * clients + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1200px) { + .clients-testimonials .testimonials { + margin: 0 12%; + } + .clients-testimonials .testimonials p { + font-size: 2.6rem; + } + .clients-testimonials .testimonials .slick-prev { + left: -100px; + } + .clients-testimonials .testimonials .slick-next { + right: -100px; + } +} + +@media only screen and (max-width: 1000px) { + .clients-testimonials .testimonials p { + font-size: 2.2rem; + } +} + +@media only screen and (max-width: 800px) { + .clients-testimonials::before { + width: 400px; + } + .clients-testimonials .testimonials { + margin: 0 2rem; + } + .clients-testimonials .testimonials .slick-arrow { + top: auto; + bottom: 3rem; + } + .clients-testimonials .testimonials .slick-prev { + left: 0; + } + .clients-testimonials .testimonials .slick-next { + right: 0; + } +} + +@media only screen and (max-width: 600px) { + .s-clients { + padding-top: 12rem; + } + .clients-testimonials::before { + width: 250px; + } + .clients-testimonials .testimonials { + margin: 0; + } + .clients-testimonials .testimonials p { + font-size: 2rem; + } +} + +@media only screen and (max-width: 400px) { + .clients-testimonials .testimonials p { + font-size: 1.9rem; + } +} + + + +/* =================================================================== + * # contact + * + * ------------------------------------------------------------------- */ +.s-contact { + background-color: #ffffff; + /* background-image: url("../images/contact-bg.jpg"); */ + background-repeat: no-repeat; + background-position: center, center; + padding-top: 15rem; + padding-bottom: 12rem; + color: rgba(255, 255, 255, 0.5); + position: relative; +} + +.s-contact .overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: .8; + background-color: #FFFFFF; +} + +.s-contact .form-field { + position: relative; +} + +.s-contact .form-field:after { + content: ""; + display: table; + clear: both; +} + +.s-contact .form-field label { + font-family: "montserrat-light", sans-serif; + font-size: 1rem; + line-height: 2.4rem; + position: absolute; + bottom: -0.3rem; + right: .6rem; + text-transform: uppercase; + letter-spacing: .1rem; + padding: 0 2rem; + margin: 0; + color: #FFFFFF; + background: #ff904d; +} + +.s-contact .form-field label::after { + content: ""; + position: absolute; + left: -5px; + top: 50%; + margin-top: -6px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-right: 5px solid #ff904d; +} + +.contact__line { + display: block; + width: 2px; + height: 20.4rem; + background-color: #ff904d; + position: absolute; + left: 50%; + top: -10.2rem; + margin-left: -1px; +} + +.contact-content { + max-width: 1000px; + background-color: rgba(0, 0, 0, 0.2); + color: rgba(255, 255, 255, 0.4); + padding-top: 6rem; + padding-bottom: 6rem; + font-family: "montserrat-light", sans-serif; + font-size: 1.5rem; + line-height: 2; + position: relative; +} + +.contact-content h3 { + margin-top: 0; + margin-bottom: 6.6rem; + color: #00163D; +} + +.contact-content h5 { + margin-top: 0; + color: #ff904d; +} + +.contact-content input[type="email"], +.contact-content input[type="number"], +.contact-content input[type="search"], +.contact-content input[type="text"], +.contact-content input[type="tel"], +.contact-content input[type="url"], +.contact-content input[type="password"], +.contact-content textarea, +.contact-content select { + color: rgba(255, 255, 255, 0.6); + border-bottom: 1px solid rgba(255, 255, 255, 0.07); + margin-bottom: .9rem; +} + +.contact-content input[type="email"]:focus, +.contact-content input[type="number"]:focus, +.contact-content input[type="search"]:focus, +.contact-content input[type="text"]:focus, +.contact-content input[type="tel"]:focus, +.contact-content input[type="url"]:focus, +.contact-content input[type="password"]:focus, +.contact-content textarea:focus, +.contact-content select:focus { + color: #FFFFFF; + border-bottom: 1px solid #ff904d; +} + +.contact-content button, +.contact-content .btn { + margin-top: 3.6rem; +} +.contact-content input::-webkit-input-placeholder, +.contact-content select::-webkit-input-placeholder, +.contact-content textarea::-webkit-input-placeholder { + color: #4f4f4f; +} + +.contact-content input:-moz-placeholder, +.contact-content select:-moz-placeholder, +.contact-content textarea:-moz-placeholder { + color: #4f4f4f; /* Firefox 18- */ +} + +.contact-content input::-moz-placeholder, +.contact-content select::-moz-placeholder, +.contact-content textarea::-moz-placeholder { + color: #4f4f4f; /* Firefox 19+ */ +} + +.contact-content input:-ms-input-placeholder, +.contact-content select:-ms-input-placeholder, +.contact-content textarea:-ms-input-placeholder { + color: #4f4f4f; +} + +.contact-content input.placeholder, +.contact-content select.placeholder, +.contact-content textarea.placeholder { + color: #4f4f4f !important; +} +.contact-primary, .contact-secondary { + float: left; + padding: 0 5rem; +} + +.contact-primary { + width: 65%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.contact-primary #contactForm { + margin-top: -1.5rem; +} + +.contact-secondary { + width: 35%; +} + +.contact-secondary::before { + content: ""; + display: block; + width: 35%; + position: absolute; + top: 0; + bottom: 0; + right: 0; + background-color: #00163D; +} + +.contact-secondary .contact-info { + position: relative; +} + +.contact-secondary .cinfo { + margin-bottom: 4.8rem; +} + +.contact-social { + list-style: none; + display: inline-block; + margin: 0; + font-size: 2rem; +} + +.contact-social li { + margin-right: 15px; + padding-left: 0; + display: inline-block; +} + +.contact-social li a { + color: white; +} + +.contact-social li a:hover, +.contact-social li a:focus { + color: #6f0a0d; +} + +.contact-social li:last-child { + margin: 0; +} + +.message-warning, +.message-success { + display: none; + background: #6f0a0d; + font-size: 1.5rem; + line-height: 2; + padding: 3rem; + margin-bottom: 3.6rem; + width: 100%; +} + +.message-warning { + color: #ff6163; +} + +.message-success { + color: #ff904d; +} + +.message-warning i, .message-success i { + margin-right: 10px; + font-size: 1.2rem; +} + + +/* form loader + * ----------------------------------------------- */ +.submit-loader { + display: none; + position: relative; + left: 0; + top: 1.8rem; + width: 100%; + text-align: center; + margin-bottom: 3rem; +} + +.submit-loader .text-loader { + display: none; + font-family: "montserrat-regular", sans-serif; + font-size: 1.3rem; + font-weight: bold; + line-height: 1.846; + color: #FFFFFF; + letter-spacing: .2rem; + text-transform: uppercase; +} + +.oldie .submit-loader .s-loader { + display: none; +} + +.oldie .submit-loader .text-loader { + display: block; +} + + +/* --------------------------------------------------------------- + * ## loader animation + * --------------------------------------------------------------- */ +.s-loader { + margin: 1.2rem auto 3rem; + width: 70px; + text-align: center; + -webkit-transform: translateX(0.45rem); + -ms-transform: translateX(0.45rem); + transform: translateX(0.45rem); +} + +.s-loader > div { + width: 9px; + height: 9px; + background-color: #FFFFFF; + border-radius: 100%; + display: inline-block; + margin-right: .9rem; + -webkit-animation: bouncedelay 1s infinite ease-in-out both; + animation: bouncedelay 1s infinite ease-in-out both; +} + +.s-loader .bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; +} + +.s-loader .bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; +} + +@-webkit-keyframes bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} + +@keyframes bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } +} + + +/* ------------------------------------------------------------------- + * responsive: + * contact + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 1200px) { + .contact-content { + max-width: 900px; + } +} + +@media only screen and (max-width: 1000px) { + .contact-content { + max-width: 700px; + } + .contact-primary, .contact-secondary { + float: none; + width: 100%; + } + .contact-primary #contactForm { + margin-top: -1.5rem; + margin-bottom: 7.2rem; + } + .contact-secondary .hide-on-fullwidth { + display: none; + } + .contact-secondary::before { + display: none; + } + .message-warning, .message-success { + margin-bottom: 6rem; + } +} + +@media only screen and (max-width: 800px) { + .contact-content h3 { + text-align: center; + } +} + +@media only screen and (max-width: 600px) { + .s-contact { + padding-top: 12rem; + padding-bottom: 0; + } + .contact__line { + height: 14.4rem; + top: -7.2rem; + } + .contact-content { + padding-bottom: 12rem; + text-align: center; + } + .contact-primary, .contact-secondary { + padding: 0 20px; + } +} + +@media only screen and (max-width: 400px) { + .contact-primary, .contact-secondary { + padding: 0 5px; + } +} + + +/* ------------------------------------------------------------------- + * ## go to top + * ------------------------------------------------------------------- */ +.go-top { + position: fixed; + bottom: 30px; + right: 30px; + z-index: 600; + display: none; +} + +.go-top a, .go-top a:visited { + text-decoration: none; + border: 0 none; + display: block; + height: 60px; + width: 60px; + line-height: 60px; + text-align: center; + background: #6f0a0d; + color: rgba(255, 255, 255, 0.5); + text-align: center; + text-transform: uppercase; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +.go-top a i, .go-top a:visited i { + font-size: 18px; + line-height: inherit; +} + +.go-top a:hover, .go-top a:focus { + color: #FFFFFF; +} + + +.input-group { + display: flex; + flex-direction: row; +} + +.impress_area { + /*background-image: url(../img/banner/dot-background.svg);*/ + /*background-size: cover;*/ + margin-bottom: -100px; + margin-top: -10px; + padding-top: 80px; + /* background-image:url('https://raw.githubusercontent.com/keploy/website/f37829d39b80993698f1fb019d369440c96f72d6/img/banner/dot-background.svg') ; */ + background-image:url('../images/dot-background.png') ; + image-resolution: 300dpi; +} +.impress_area .impress_inner { + text-align: center; + max-width: 780px; + margin: auto; +} +.impress_area .impress_inner h2 { + color: #6f0a0d; + font-size: 36px; + -webkit-font-smoothing: antialiased; + font-family: 'Lato', sans-serif; + font-weight: bold; +} +.impress_area .impress_inner p { + color: #6f0a0d; + margin-bottom: 35px; +} +.impress_area .impress_inner .primary_btn { + border: double 2px #ff904d; + background: #ffffff; + width: auto; + font-size: 15px; + box-shadow: -14.142px 14.142px 20px 0px rgba(0, 0, 0, 0.1); +} +.impress_area .impress_inner .primary_btn:hover { + color: #ffffff; + background: #ff904d; +} +.impress_area .impress_inner .primary_btn:hover:after { + border-image: -webkit-linear-gradient(0deg, #fff, #fff); + border-image: -moz-linear-gradient(0deg, #fff, #fff); + border-image: -o-linear-gradient(0deg, #fff, #fff); + border-image: linear-gradient(0deg, #fff, #fff); +} + +.impress_area .input-group input { + height: 40px; + background: #fff; + border-radius: 10px 0px 0px 10px; + width: 50%; + border: double 2px #E35134; + padding: 0px 15px; + font-size: 14px; + -webkit-font-smoothing: antialiased; + font-family: "TT Norms Pro", sans-serif; + color: #6f0a0d; + outline: none; + box-shadow: none; +} + +.justify-content-center { + -ms-flex-pack: center !important; + justify-content: center !important; +} + +.impress_area .input-group input.placeholder { + font-size: 14px; + font-family: "Roboto", sans-serif; + font-weight: normal; + color: #cccccc; +} +.impress_area .input-group input::-webkit-input-placeholder { + font-size: 14px; + font-family: "Roboto", sans-serif; + font-weight: normal; + color: #cccccc; +} +.impress_area .input-group .sub-btn { + border-radius: 0; + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; + background-image: linear-gradient(to right, #E35134 0%, #e27762 100%), + radial-gradient(circle at top left, #E35134, #e27762); + background-image: -webkit-linear-gradient(to right, #E35134 0%, #e27762 100%), + -webkit-radial-gradient(circle at top left, #E35134, #e27762); + background-image: -moz-linear-gradient(to right, #E35134 0%, #e27762 100%), + -moz-radial-gradient(circle at top left, #E35134, #e27762); + background-image: -ms-linear-gradient(to right, #E35134 0%, #e27762 100%), + -ms-radial-gradient(circle at top left, #E35134, #e27762); + background-image: -o-linear-gradient(to right, #E35134 0%, #e27762 100%), + -o-radial-gradient(circle at top left, #E35134, #e27762); + outline: none !important; + box-shadow: none !important; + padding: 0px; + width: 42px; + height: 40px; cursor: pointer; + color: #ffffff; +} + +/* End Impress Area css +============================================================================================ */ +/*---------------------------------------------------- */ + +/* =================================================================== + * # footer + * + * ------------------------------------------------------------------- */ +/* Footer Area css + ============================================================================================ */ +.footer_area .f_title { + margin-bottom: 20px; +} + +.footer-bottom { + text-align: center; } -/* -Make sure disabled buttons don't get the pointer cursor. -*/ -:disabled { - cursor: default; +.footer-bottom .footer-social { + text-align: center; + margin-top: 15px; } -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ +/* End End Footer Area css + ============================================================================================ */ + +/* Footer Area css +============================================================================================ */ +.footer_area { + background-image: url('../images/dot-background.png'); + background-size: cover; + padding-top: 120px; + padding-bottom: 120px; +} -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; /* 1 */ - vertical-align: middle; /* 2 */ +.f_title { + margin-bottom: 35px; +} +.f_title h3 { + color: #6f0a0d; + font-size: 20px; + font-weight: bold; + -webkit-font-smoothing: antialiased; + font-family: 'Lato', sans-serif; + margin-bottom: 0px; } -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ +.ab_widget p { + font-size: 15px; + line-height: 24px; + -webkit-font-smoothing: antialiased; + font-family: 'Inconsolata', monospace; + color: #6f0a0d; + font-weight: 500; + margin-bottom: 30px; + margin-left: -10px; +} +.ab_widget p a { + color: #8252fa; +} +.ab_widget p + p { + margin-bottom: 0px; +} -img, -video { - max-width: 100%; - height: auto; +.news_widget p { + font-size: 14px; + line-height: 24px; + font-family: "Roboto", sans-serif; + color: #6f0a0d; + font-weight: 500; + margin-bottom: 15px; } -/* Make elements with the HTML hidden attribute stay hidden by default */ -[hidden]:where(:not([hidden="until-found"])) { - display: none; +.news_widget .input-group { + position: relative; + width: 25rem; +} +.news_widget .input { + border: double 2px #E35134; } -.container { +.news_widget .input-group input { + height: 50px; + background: #fff; + border-radius: 50px; width: 100%; + /* border: none; */ + padding: 0px 15px; + font-size: 14px; + font-family: "Roboto", sans-serif; + color: #cccccc; + outline: none; + box-shadow: none; +} +.news_widget .input-group .input.placeholder { + font-size: 14px; + font-family: "Roboto", sans-serif; + font-weight: normal; + color: #cccccc; } -@media (min-width: 640px) { - .container { - max-width: 640px; - } +.news_widget .input-group .input::-webkit-input-placeholder { + font-size: 14px; + font-family: "Roboto", sans-serif; + font-weight: normal; + color: #cccccc; +} +.news_widget .input-group .sub-btn { + position: absolute; + right: 4px; + top: 2px; + border-radius: 50px; + outline: none !important; + box-shadow: none !important; + padding: 0px; + width: 46px; + height: 46px; + cursor: pointer; + color: #fff; } -@media (min-width: 768px) { - .container { - max-width: 768px; - } +.social_widget p { + font-size: 14px; + line-height: 24px; + -webkit-font-smoothing: antialiased; + font-family: "TT Norms Pro", sans-serif; + color: #6f0a0d; + font-weight: 500; + margin-bottom: 10px; +} +.social_widget .list li { + display: inline-block; +} +.social_widget .list li a { + color: #E35134; + font-size: 20px; + -webkit-transition: all 0.4s ease 0s; + -moz-transition: all 0.4s ease 0s; + -o-transition: all 0.4s ease 0s; + transition: all 0.4s ease 0s; +} +.social_widget .list li:last-child { + margin-right: 0px; +} +.social_widget .list li:hover a { + color: #fa9e53; } -@media (min-width: 1024px) { - .container { - max-width: 1024px; +.copy_right_text { + text-align: center; + margin-top: 60px; +} +.copy_right_text p a { + color: #fa9e53; +} + +.submit-btn { + background-image: linear-gradient(to right, #E35134 0%, #e27762 100%), + radial-gradient(circle at top left, #E35134, #e27762); + background-image: -webkit-linear-gradient(to right, #E35134 0%, #e27762 100%), + -webkit-radial-gradient(circle at top left, #E35134, #e27762); + background-image: -moz-linear-gradient(to right, #E35134 0%, #e27762 100%), + -moz-radial-gradient(circle at top left, #E35134, #e27762); + background-image: -ms-linear-gradient(to right, #E35134 0%, #e27762 100%), + -ms-radial-gradient(circle at top left, #E35134, #e27762); + background-image: -o-linear-gradient(to right, #E35134 0%, #e27762 100%), + -o-radial-gradient(circle at top left, #E35134, #e27762); + + line-height: 1.5; + width: auto; +} + + + + + +/* End Footer Area css +============================================================================================ */ +/*---------------------------------------------------- */ + +/* ------------------------------------------------------------------- + * ## go to top + * ------------------------------------------------------------------- */ +.go-top { + position: fixed; + bottom: 30px; + right: 30px; + z-index: 600; + display: none; +} + +.go-top a, +.go-top a:visited { + text-decoration: none; + border: 0 none; + display: block; + height: 60px; + width: 60px; + line-height: 60px; + text-align: center; + background: #6f0a0d; + color: rgba(255, 255, 255, 0.5); + text-align: center; + text-transform: uppercase; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +.go-top a i, +.go-top a:visited i { + font-size: 18px; + line-height: inherit; +} + +.go-top a:hover, +.go-top a:focus { + color: #ffffff; +} + +/* ------------------------------------------------------------------- + * responsive: + * footer + * ------------------------------------------------------------------- */ +@media only screen and (max-width: 900px) { + .footer-main .left { + padding-right: 20px; + } + .footer-main .right { + padding-left: 20px; + } + .news_widget .input-group { + position: relative; + width: 25rem; } } -@media (min-width: 1280px) { - .container { - max-width: 1280px; +@media only screen and (max-width: 800px) { + footer .row { + max-width: 600px; + } + .footer-main .left { + padding-right: 15px; + margin-bottom: 4.2rem; + } + .footer-main .right { + padding-left: 15px; + } + .news_widget .input-group { + position: relative; + width: 25rem; } } -@media (min-width: 1536px) { - .container { - max-width: 1536px; +@media only screen and (max-width: 600px) { + .footer-main .left { + padding-right: 10px; + } + .footer-main .right { + padding-left: 10px; + } + .footer-logo { + margin: -0.6rem auto 3.6rem; + } + .footer-bottom { + padding-bottom: 0.6rem; + } + .footer-bottom .copyright span { + display: block; + } + .footer-bottom .copyright span::after { + display: none; + } + .go-top { + right: 0; + bottom: 0; } } -.visible { - visibility: visible; + +@media only screen and (max-width: 500px) { + .footer-subscribe #mc-form input[type="email"] { + padding: 1.2rem 20px 1.2rem; + background: rgba(0, 0, 0, 0.1); + text-align: center; + } + .footer-subscribe #mc-form input[type="submit"] { + position: static; + width: 100%; + margin-bottom: 1.8rem; + } + .footer-subscribe #mc-form label { + text-align: center; + } + .news_widget .input-group { + position: relative; + width: 25rem; + } } -.static { - position: static; + +@media only screen and (max-width: 400px) { + .footer-main .left { + padding-right: 0; + } + .footer-main .right { + padding-left: 0; + } + .news_widget .input-group { + position: relative; + width: 25rem; + } } -.fixed { - position: fixed; + +/*# sourceMappingURL=main.css.map */ + +@media (min-width: 992px) { + .col-lg-5 { + -ms-flex: 0 0 41.666667%; + flex: 0 0 41.666667%; + max-width: 41.666667%; + } + .col-lg-2 { + -ms-flex: 0 0 16.666667%; + flex: 0 0 16.666667%; + max-width: 16.666667%; + } + .news_widget .input-group { + position: relative; + width: 25rem; + } } -.absolute { - position: absolute; + +@media only screen and (max-width: 1120px) and (min-width: 601px) { + .innerdiv { + transform: scale(0.7); + } + + .div1 { + background-position-x: 10rem; + } + .innerdiv { + display: flex; + flex-direction: column; + transform: scale(1); + margin: 2rem; + margin-bottom: 5rem; + } + .attribution { + position: relative; + } + + .s-home { + max-height: 900px; + min-height: 800px; + } + + .outerdiv { + margin-top: 0; + padding-top: 0; + } } -.relative { + +.col-lg-2, +.col-lg-5 { position: relative; + width: 100%; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; } -.sticky { - position: sticky; +.col-sm-6 { + position: relative; + width: 100%; + min-height: 1px; + padding-right: 15px; + padding-left: 15px; } -.m-1 { - margin: 0.25rem; + +.d-flex { + display: -ms-flexbox !important; + display: flex !important; } -.mt-10 { - margin-top: 2.5rem; + +@media screen and (prefers-reduced-motion: reduce) { + .btn { + transition: none; + } } -.block { - display: block; + +.join-btn{ + margin:0 auto; + background-color: #00163D; + border-radius: 5px; + color:#FF914D; + outline: none; + border:0px; } -.inline-block { - display: inline-block; + +.join-btn a{ + color:white } -.inline { - display: inline; + +.countdown-timer{ + pointer-events: none; } -.flex { - display: flex; + +.modal{ + height: 100vh; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: absolute; + z-index: 99; } -.table { - display: table; + +.modal-body{ + width: 80%; + height: 80%; + border: 1px solid black; + /* background-image: url('https://media.licdn.com/dms/image/D4D22AQHJDENz9W2rxA/feedshare-shrink_800/0/1681714706793?e=1684368000&v=beta&t=XhxZW4l2cZSrhc46UMIk9tLtp34QmQn0oI98OSOjgpc'); */ + /* background-size: contain; */ + /* background-position: center; */ + /* background-repeat: no-repeat; */ } -.grid { - display: grid; +.modal-close{ + position: absolute; + /* top: 0; */ + /* right: 1px; */ + text-align: right; + z-index: 1; + width:80%; + padding:10px; } -.contents { - display: contents; + +.modal-close button{ + color:#f37d36; + background-color: white; } -.hidden { - display: none; + +.modal-img{ + height:100%; + width: 100%; + position: relative; } -.h-1 { - height: 0.25rem; + +.modal-img-mob{ + display: none; + height:100%; + width: 100%; + position: relative; } -.flex-shrink { - flex-shrink: 1; + +@media screen and (max-width:992px){ + .modal-img-mob{ + display: block; + } + + .modal-img{ + display: none; + } } -.transform { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + + + + + +.process-wrapper{ + padding: 0 40rem; } -.resize { - resize: both; +@media screen and (max-width: 1920px) { + .process-wrapper{ + padding: 0 25rem; + } } -.flex-row { - flex-direction: row; +@media screen and (max-width: 1600px) { + .process-wrapper{ + padding: 0 12rem; + } } -.flex-wrap { - flex-wrap: wrap; +@media screen and (max-width: 1440px) { + .process-wrapper{ + padding: 0 10rem; + } } -.border { - border-width: 1px; +@media screen and (max-width: 1280px) { + .process-wrapper{ + padding: 0 6rem; + } } -.text-center { - text-align: center; +@media screen and (max-width: 1024px) { + .process-wrapper{ + padding: 0 4rem; + } } -.blur { - --tw-blur: blur(8px); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + + +.based-on-application{ + font-family: 'Lato', sans-serif; + width: 58%; + margin-left: auto; + margin-right: auto; + font-size: 26px; + line-height: 1.286; + color: #000; + margin-bottom: 40px; } -.filter { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + +.listed-criteria { + margin-top: 50px; + width: 60%; + margin-left: auto; + margin-right: auto; + font-size: 2rem; + line-height: 1.286; + color: #000; + line-height: 25px; } -.transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; + +.criteria-list { + /* margin-top: 20px; */ + margin-bottom: 40px; } \ No newline at end of file diff --git a/css/tailwind.css b/css/tailwind.css index bd6213e..ad9059d 100644 --- a/css/tailwind.css +++ b/css/tailwind.css @@ -1,3 +1,78 @@ -@tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; + +/* Dark mode overrides - scoped to body and specific elements */ +.dark body { + background-color: #0b1220 !important; + color: #e5e7eb !important; +} + +/* Dark mode for sections and major containers */ +.dark .s-home, +.dark .s-about, +.dark .s-services, +.dark .s-contact { + background-color: #0b1220 !important; + color: #e5e7eb !important; +} + +.dark .s-header { + background-color: rgba(11, 18, 32, 0.95) !important; +} + +/* Override inline dark text colors for readability in dark mode */ +.dark [style*="color: #00163D"], +.dark [style*="color:#00163D"], +.dark [style*="color: #121212"], +.dark [style*="color:#121212"], +.dark [style*="color: #000000"], +.dark [style*="color:#000000"] { + color: #e5e7eb !important; +} + +/* Headings in dark mode */ +.dark h1, +.dark h2, +.dark h3, +.dark h4, +.dark h5, +.dark h6 { + color: #e5e7eb !important; +} + +/* Paragraphs without specific classes */ +.dark p { + color: #d1d5db !important; +} + +/* Make sure links are visible in dark mode */ +.dark a:not(.btn) { + color: #93c5fd !important; +} + +.dark a:not(.btn):hover { + color: #bfdbfe !important; +} + +/* Buttons in dark mode */ +.dark .btn--stroke { + background: transparent !important; + border-color: #e5e7eb !important; + color: #e5e7eb !important; +} + +.dark .btn--stroke:hover { + background-color: #e5e7eb !important; + color: #0b1220 !important; +} + +/* Keep hero overlay adjusted for dark mode */ +.dark .overlay { + background: rgba(0, 0, 0, 0.85) !important; +} + +/* Footer in dark mode */ +.dark .footer_area { + background-color: #050a14 !important; + color: #e5e7eb !important; +} \ No newline at end of file diff --git a/css/tw.css b/css/tw.css new file mode 100644 index 0000000..5c68d49 --- /dev/null +++ b/css/tw.css @@ -0,0 +1,247 @@ +.container { + width: 100%; +} +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} +.visible { + visibility: visible; +} +.static { + position: static; +} +.fixed { + position: fixed; +} +.absolute { + position: absolute; +} +.relative { + position: relative; +} +.sticky { + position: sticky; +} +.m-1 { + margin: 0.25rem; +} +.mt-10 { + margin-top: 2.5rem; +} +.block { + display: block; +} +.inline-block { + display: inline-block; +} +.inline { + display: inline; +} +.flex { + display: flex; +} +.inline-flex { + display: inline-flex; +} +.table { + display: table; +} +.grid { + display: grid; +} +.contents { + display: contents; +} +.hidden { + display: none; +} +.h-1 { + height: 0.25rem; +} +.flex-shrink { + flex-shrink: 1; +} +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); +} +.resize { + resize: both; +} +.flex-row { + flex-direction: row; +} +.flex-wrap { + flex-wrap: wrap; +} +.items-center { + align-items: center; +} +.gap-2 { + gap: 0.5rem; +} +.rounded { + border-radius: 0.25rem; +} +.border { + border-width: 1px; +} +.border-transparent { + border-color: transparent; +} +.bg-transparent { + background-color: transparent; +} +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +.text-center { + text-align: center; +} +.text-slate-700 { + --tw-text-opacity: 1; + color: rgb(51 65 85 / var(--tw-text-opacity, 1)); +} +.blur { + --tw-blur: blur(8px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.filter { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +/* Dark mode overrides - scoped to body and specific elements */ +.dark body { + background-color: #0b1220 !important; + color: #e5e7eb !important; +} + +/* Dark mode for sections and major containers */ +.dark .s-home, +.dark .s-about, +.dark .s-services, +.dark .s-contact { + background-color: #0b1220 !important; + color: #e5e7eb !important; +} + +.dark .s-header { + background-color: rgba(11, 18, 32, 0.95) !important; +} + +/* Override inline dark text colors for readability in dark mode */ +.dark [style*="color: #00163D"], +.dark [style*="color:#00163D"], +.dark [style*="color: #121212"], +.dark [style*="color:#121212"], +.dark [style*="color: #000000"], +.dark [style*="color:#000000"] { + color: #e5e7eb !important; +} + +/* Headings in dark mode */ +.dark h1, +.dark h2, +.dark h3, +.dark h4, +.dark h5, +.dark h6 { + color: #e5e7eb !important; +} + +/* Paragraphs without specific classes */ +.dark p { + color: #d1d5db !important; +} + +/* Make sure links are visible in dark mode */ +.dark a:not(.btn) { + color: #93c5fd !important; +} + +.dark a:not(.btn):hover { + color: #bfdbfe !important; +} + +/* Buttons in dark mode */ +.dark .btn--stroke { + background: transparent !important; + border-color: #e5e7eb !important; + color: #e5e7eb !important; +} + +.dark .btn--stroke:hover { + background-color: #e5e7eb !important; + color: #0b1220 !important; +} + +/* Keep hero overlay adjusted for dark mode */ +.dark .overlay { + background: rgba(0, 0, 0, 0.85) !important; +} + +/* Footer in dark mode */ +.dark .footer_area { + background-color: #050a14 !important; + color: #e5e7eb !important; +} +.hover\:border-slate-300:hover { + --tw-border-opacity: 1; + border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); +} +.dark\:inline:is(.dark *) { + display: inline; +} +.dark\:hidden:is(.dark *) { + display: none; +} +.dark\:text-slate-200:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(226 232 240 / var(--tw-text-opacity, 1)); +} +.dark\:hover\:border-slate-600:hover:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(71 85 105 / var(--tw-border-opacity, 1)); +} \ No newline at end of file diff --git a/index.html b/index.html index 9d7394a..2cf0e3d 100755 --- a/index.html +++ b/index.html @@ -27,8 +27,22 @@ rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" /> - + + + + + @@ -207,6 +221,17 @@

Navigation