/* ===================================================================
*
* Epitome Main Stylesheet
* Template Ver. 1.0.0
* 04-22-2019
* ------------------------------------------------------------------
*
* 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
* ## additional typo styles
* ## skillbars
* ## alert box
* ## pagination
* # Common and Reusable Styles
* # header
* ## header logo
* ## main navigation
* ## menu trigger
* # intro
* # about
* ## timeline
* # services
* # CTA
* # works
* # testimonials
* # contact
* # footer
* ## copyright
* ## go to top
* # IE10/IE11 Specific
*
* =================================================================== */
/* ===================================================================
* # base style overrides
*
* ------------------------------------------------------------------- */
html {
font-size: 10px;
}
@media screen and (max-width:400px) {
html {
font-size: 9.411764705882353px;
}
}
html,
body {
height: 100%;
}
body {
background: #050505;
font-family: "Lora", serif;
font-size: 1.7rem;
font-style: normal;
font-weight: normal;
line-height: 1.882;
color: #000000;
margin: 0;
padding: 0;
}
/* -------------------------------------------------------------------
* ## links
* ------------------------------------------------------------------- */
a {
color: #cf1767;
transition: all 0.3s ease-in-out;
}
a:hover,
a:focus,
a:active {
color: #000000;
}
a:hover,
a:active {
outline: 0;
}
/*extra adition by nj*/
.about-me__text h1,
.about-me__text .about-greeting {
margin: 0;
padding: 0;
margin-bottom: 35px;
font-size: 80px;
font-family: "Frank Ruhl Libre", serif;
font-weight: 600;
line-height: 1.1;
}
/* ===================================================================
* # typography & general theme styles
*
* ------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "Frank Ruhl Libre", serif;
font-weight: 500;
font-style: normal;
color: #000000;
font-variant-ligatures: common-ligatures;
text-rendering: optimizeLegibility;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
margin-top: 6rem;
margin-bottom: 1.6rem;
}
@media screen and (max-width:600px) {
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
margin-top: 6rem;
}
}
h5, .h5, h6, .h6 {
margin-top: 4.8rem;
margin-bottom: 1.2rem;
}
@media screen and (max-width:600px) {
h5, .h5, h6, .h6 {
margin-top: 4rem;
margin-bottom: 0.8rem;
}
}
h1, .h1 {
font-size: 3.6rem;
line-height: 1.222;
letter-spacing: -.1rem;
}
@media screen and (max-width:600px) {
h1, .h1 {
font-size: 3.3rem;
letter-spacing: -.07rem;
}
}
h2, .h2 {
font-size: 3rem;
line-height: 1.2;
}
h3, .h3 {
font-size: 2.4rem;
line-height: 1.1667;
}
h4, .h4 {
font-size: 2.1rem;
line-height: 1.286;
}
h5, .h5 {
font-size: 1.8rem;
line-height: 1.333;
}
h6, .h6 {
font-size: 1.6rem;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: .16rem;
}
p img {
margin: 0;
}
p.lead {
font-family: "Lora", serif;
font-weight: 300;
font-size: 2.4rem;
line-height: 1.833;
margin-bottom: 3.6rem;
color: #000000;
}
@media screen and (max-width:1200px) {
p.lead {
font-size: 2.2rem;
}
}
em,
i,
strong,
b {
font-size: inherit;
line-height: inherit;
}
em,
i {
font-family: "Lora", serif;
font-style: italic;
}
strong,
b {
font-family: "Lora", serif;
font-weight: 700;
}
small {
font-size: 1.2rem;
line-height: inherit;
}
blockquote {
margin: 4rem 0;
padding-left: 4.8rem;
position: relative;
}
blockquote:before {
content: "\201C";
font-size: 11.2rem;
line-height: 0px;
margin: 0;
color: rgba(0, 0, 0, 0.2);
font-family: arial, sans-serif;
position: absolute;
top: 4.8rem;
left: 0;
}
blockquote p {
font-family: "Frank Ruhl Libre", serif;
font-weight: 400;
padding: 0;
font-size: 2.1rem;
line-height: 1.905;
color: #000000;
}
blockquote cite {
display: block;
font-family: "Roboto", sans-serif;
font-size: 1.4rem;
font-style: normal;
line-height: 1.429;
}
blockquote cite:before {
content: "\2014 \0020";
}
blockquote cite,
blockquote cite a,
blockquote cite a:visited {
color: #7e7e7e;
border: none;
}
abbr {
font-family: "Lora", serif;
font-weight: 700;
font-variant: small-caps;
text-transform: lowercase;
letter-spacing: .05rem;
color: #7e7e7e;
}
var,
kbd,
samp,
code,
pre {
font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}
pre {
padding: 2.4rem 3.2rem 3.2rem;
background: #e0e0e0;
overflow-x: auto;
}
code {
font-size: 1.4rem;
margin: 0 .2rem;
padding: .4rem .8rem;
white-space: nowrap;
background: #e0e0e0;
border: 1px solid #c3c3c3;
color: #000000;
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;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none;
}
mark {
background: #fff099;
color: #000000;
}
hr {
border: solid #e0e0e0;
border-width: 1px 0 0;
clear: both;
margin: 2.4rem 0 1.6rem;
height: 0;
}
/* -------------------------------------------------------------------
* ## Lists
* ------------------------------------------------------------------- */
ol {
list-style: decimal;
}
ul {
list-style: disc;
}
li {
display: list-item;
}
ol,
ul {
margin-left: 1.6rem;
}
ul li {
padding-left: .4rem;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: .8rem 0 .8rem 1.6rem;
}
ul.disc li {
display: list-item;
list-style: none;
padding: 0 0 0 .8rem;
position: relative;
}
ul.disc li::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #cf1767;
position: absolute;
left: -16px;
top: 11px;
vertical-align: middle;
}
dt {
margin: 0;
color: #cf1767;
}
dd {
margin: 0 0 0 2rem;
}
/* -------------------------------------------------------------------
* ## 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%;
}
/* -------------------------------------------------------------------
* ## floated image
* ------------------------------------------------------------------- */
img.pull-right {
margin: 1.2rem 0 0 2.8rem;
}
img.pull-left {
margin: 1.2rem 2.8rem 0 0;
}
/* -------------------------------------------------------------------
* ## tables
* ------------------------------------------------------------------- */
table {
border-width: 0;
width: 100%;
max-width: 100%;
font-family: "Lora", serif;
border-collapse: collapse;
}
th,
td {
padding: 1.5rem 3.2rem;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
th {
color: #000000;
font-family: "Lora", serif;
font-weight: 700;
}
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.6rem;
}
fieldset {
margin-bottom: 1.6rem;
}
input,
textarea,
select,
pre,
blockquote,
figure,
table,
p,
ul,
ol,
dl,
form,
.video-container,
.ss-custom-select {
margin-bottom: 3.2rem;
}
/* -------------------------------------------------------------------
* ## 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: #cf1767;
position: fixed;
z-index: 501;
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: 500;
height: 100vh;
width: 100%;
}
.no-js #preloader,
.oldie #preloader {
display: none;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
width: 60px;
height: 60px;
padding: 0;
margin-left: -30px;
margin-top: -30px;
}
#loader:before {
content: "";
border-top: 6px solid rgba(255, 255, 255, 0.1);
border-right: 6px solid rgba(255, 255, 255, 0.1);
border-bottom: 6px solid rgba(255, 255, 255, 0.1);
border-left: 6px solid #cf1767;
-webkit-animation: load 1.1s infinite linear;
animation: load 1.1s infinite linear;
display: block;
border-radius: 50%;
width: 60px;
height: 60px;
}
@-webkit-keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* ===================================================================
* # 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: 6.4rem;
padding: 1.6rem 0 1.5rem;
border: 0;
outline: none;
color: #000000;
font-family: "Roboto", sans-serif;
font-size: 1.6rem;
line-height: 3.2rem;
max-width: 100%;
background: transparent;
border-bottom: 1px solid #c3c3c3;
transition: all .3s ease-in-out;
}
.ss-custom-select {
position: relative;
padding: 0;
}
.ss-custom-select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: '';
margin: 0;
line-height: 3rem;
vertical-align: middle;
}
.ss-custom-select select option {
padding-left: 2rem;
padding-right: 2rem;
}
.ss-custom-select select::-ms-expand {
display: none;
}
.ss-custom-select::after {
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
content: '';
display: block;
height: 8px;
width: 8px;
margin-top: -7px;
pointer-events: none;
position: absolute;
right: 2.4rem;
top: 50%;
transition: all 0.15s ease-in-out;
-webkit-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
textarea {
min-height: 25.6rem;
}
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: #000000;
border-bottom: 1px solid #000000;
}
label,
legend {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 1.4rem;
margin-bottom: .8rem;
line-height: 1.714;
color: #000000;
display: block;
}
input[type="checkbox"],
input[type="radio"] {
display: inline;
}
label > .label-text {
display: inline-block;
margin-left: 1rem;
font-family: "Roboto", sans-serif;
line-height: inherit;
}
label > input[type="checkbox"],
label > input[type="radio"] {
margin: 0;
position: relative;
top: .2rem;
}
/* -------------------------------------------------------------------
* ## Style Placeholder Text
* ------------------------------------------------------------------- */
::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #8c8c8c;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #8c8c8c;
opacity: 1;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #8c8c8c;
opacity: 1;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #8c8c8c;
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: #8c8c8c;
}
::placeholder {
/* Most modern browsers support this now. */
color: #8c8c8c;
}
.placeholder {
color: #8c8c8c !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: #cf1767;
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: "Roboto", sans-serif;
font-weight: 700;
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: .5rem;
height: 6rem;
line-height: 5.6rem;
padding: 0 3.2rem;
margin: 0 .4rem 1.6rem 0;
color: #000000;
text-decoration: none;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: all .3s ease-in-out;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #d3d3d3;
border: 0.2rem solid #d3d3d3;
}
.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: #c3c3c3;
border-color: #c3c3c3;
color: #000000;
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: #000000;
border-color: #000000;
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: #cf1767;
border-color: #cf1767;
}
/* button modifiers
* ------------------------------------------------- */
.btn.full-width,
button.full-width {
width: 100%;
margin-right: 0;
}
.btn--medium,
button.btn--medium {
height: 6.4rem !important;
line-height: 6rem !important;
}
.btn--large,
button.btn--large {
height: 6.8rem !important;
line-height: 6.4rem !important;
}
.btn--stroke,
button.btn--stroke {
background: transparent !important;
border: 0.2rem solid #000000;
color: #000000;
}
.btn--stroke:hover,
button.btn--stroke:hover {
background: #000000 !important;
border: 0.2rem solid #000000;
color: #ffffff;
}
.btn--pill,
button.btn--pill {
padding-left: 3.2rem !important;
padding-right: 3.2rem !important;
border-radius: 1000px !important;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* ===================================================================
* # additional components
*
* ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
* ## additional typo styles
* ------------------------------------------------------------------- */
/* drop cap
* ----------------------------------------------- */
.drop-cap:first-letter {
float: left;
margin: 0;
padding: 1.6rem .8rem 0 0;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 8.4rem;
line-height: 6rem;
text-indent: 0;
background: transparent;
color: #000000;
}
/* 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.4rem 3.2rem 2.4rem 0px;
}
.pull-quote:before,
.pull-quote:after {
height: 1em;
position: absolute;
font-size: 11.2rem;
font-family: Arial, Sans-Serif;
color: rgba(0, 0, 0, 0.2);
}
.pull-quote:before {
content: "\201C";
top: -3.4rem;
left: 0;
}
.pull-quote:after {
content: '\201D';
bottom: 3.4rem;
right: 0;
}
.pull-quote blockquote {
margin: 0;
padding-left: 4.8rem;
padding-right: 0;
position: relative;
}
.pull-quote blockquote p {
font-family: "Frank Ruhl Libre", serif;
font-weight: 400;
padding: 0;
font-size: 2.1rem;
line-height: 1.905;
color: #000000;
}
.pull-quote blockquote:before {
content: none;
}
/**
* Stats Tab
* ---------
* markup:
*
*
*
* Extend this object into your markup.
*
* --------------------------------------------------------------------- */
.stats-tabs {
padding: 0;
margin: 3.2rem 0;
}
.stats-tabs li {
display: inline-block;
margin: 0 1.6rem 3.2rem 0;
padding: 0 1.5rem 0 0;
border-right: 1px solid #d3d3d3;
}
.stats-tabs li:last-child {
margin: 0;
padding: 0;
border: none;
}
.stats-tabs li a {
display: inline-block;
font-size: 2.5rem;
font-family: "Roboto", sans-serif;
font-weight: 700;
border: none;
color: #000000;
}
.stats-tabs li a:hover {
color: #cf1767;
}
.stats-tabs li a em {
display: block;
margin: .8rem 0 0 0;
font-family: "Roboto", sans-serif;
font-size: 1.5rem;
font-weight: normal;
font-style: normal;
color: #7e7e7e;
}
/* -------------------------------------------------------------------
* ## skillbars
* ------------------------------------------------------------------- */
.skill-bars {
list-style: none;
margin: 6.8rem 0 3.2rem;
}
.skill-bars li {
height: .4rem;
background: #c3c3c3;
width: 100%;
margin-bottom: 6.8rem;
padding: 0;
position: relative;
}
.skill-bars li strong {
position: absolute;
left: 0;
top: -4rem;
font-family: "Roboto", sans-serif;
font-weight: 700;
color: #000000;
text-transform: uppercase;
letter-spacing: .2rem;
font-size: 1.4rem;
line-height: 2.4rem;
}
.skill-bars li .progress {
background: #000000;
position: relative;
height: 100%;
}
.skill-bars li .progress span {
position: absolute;
right: 0;
top: -3.6rem;
display: block;
font-family: "Roboto", sans-serif;
color: #ffffff;
font-size: 1.1rem;
line-height: 1;
background: #000000;
padding: .8rem .8rem;
border-radius: 3px;
}
.skill-bars li .progress span::after {
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -5px;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #000000;
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%;
}
/* -------------------------------------------------------------------
* ## alert box
* ------------------------------------------------------------------- */
.alert-box {
padding: 2.4rem 4rem 2.4rem 3.2rem;
position: relative;
margin-bottom: 3.2rem;
border-radius: 3px;
font-family: "Roboto", sans-serif;
font-weight: 600;
font-size: 1.5rem;
line-height: 1.6;
}
.alert-box__close {
position: absolute;
display: block;
right: 1.6rem;
top: 1.6rem;
cursor: pointer;
width: 12px;
height: 12px;
}
.alert-box__close::before,
.alert-box__close::after {
content: '';
position: absolute;
display: inline-block;
width: 2px;
height: 12px;
top: 0;
left: 5px;
}
.alert-box__close::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.alert-box__close::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.alert-box--error {
background-color: #ffd1d2;
color: #dd4043;
}
.alert-box--error .alert-box__close::before,
.alert-box--error .alert-box__close::after {
background-color: #dd4043;
}
.alert-box--success {
background-color: #c8e675;
color: #637533;
}
.alert-box--success .alert-box__close::before,
.alert-box--success .alert-box__close::after {
background-color: #637533;
}
.alert-box--info {
background-color: #d5ebfb;
color: #387fb2;
}
.alert-box--info .alert-box__close::before,
.alert-box--info .alert-box__close::after {
background-color: #387fb2;
}
.alert-box--notice {
background-color: #fff099;
color: #827217;
}
.alert-box--notice .alert-box__close::before,
.alert-box--notice .alert-box__close::after {
background-color: #827217;
}
/* -------------------------------------------------------------------
* ## pagination
* ------------------------------------------------------------------- */
.pgn {
margin: 3.2rem auto;
text-align: center;
}
.pgn ul {
display: inline-block;
list-style: none;
margin-left: 0;
position: relative;
padding: 0 6rem;
}
.pgn ul li {
display: inline-block;
margin: 0;
padding: 0;
}
.pgn__num {
font-family: "Lora", serif;
font-weight: 700;
font-size: 1.7rem;
line-height: 3.2rem;
display: inline-block;
padding: .2rem 1.2rem;
height: 3.6rem;
margin: .2rem .2rem;
color: #000000;
border-radius: 4px;
transition: all, .3s, ease-in-out;
}
.pgn__num:hover {
background: #d3d3d3;
color: #000000;
}
.pgn .current,
.pgn .current:hover {
background-color: #cf1767;
color: white;
}
.pgn .inactive,
.pgn .inactive:hover {
opacity: 0.4;
cursor: default;
}
.pgn__prev,
.pgn__next {
display: block;
background-repeat: no-repeat;
background-size: 24px 11px;
background-position: center;
height: 3.6rem;
width: 4.8rem;
line-height: 2rem;
border-radius: 3px;
padding: 0;
margin: 0;
opacity: 1;
font: 0/0 a;
text-shadow: none;
color: transparent;
transition: all, .2s, ease-in-out;
position: absolute;
top: 50%;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
.pgn__prev:hover,
.pgn__next:hover {
background-color: #d3d3d3;
}
.pgn__prev {
background-image: url("../images/icons/icon-arrow-left.svg");
left: 0;
}
.pgn__next {
background-image: url("../images/icons/icon-arrow-right.svg");
right: 0;
}
.pgn__prev.inactive,
.pgn__next.inactive {
opacity: 0.4;
cursor: default;
}
.pgn__prev.inactive:hover,
.pgn__next.inactive:hover {
background-color: transparent;
}
/* -------------------------------------------------------------------
* responsive:
* pagination
* ------------------------------------------------------------------- */
@media screen and (max-width:600px) {
.pgn ul {
padding: 0 5.2rem;
}
}
/* ===================================================================
* # Common and Reusable Styles
*
* ------------------------------------------------------------------- */
.wide {
max-width: 1400px;
}
.narrow {
max-width: 1000px;
}
.heading-block {
position: relative;
}
.heading-block--center {
max-width: 940px;
text-align: center;
}
.section-heading {
font-family: "Roboto", sans-serif;
font-weight: 600;
font-size: 1.7rem;
line-height: 1.176;
text-transform: uppercase;
letter-spacing: .5rem;
margin-top: 0;
padding-top: 3.2rem;
margin-bottom: 8rem;
position: relative;
}
.section-heading::before {
content: "";
display: block;
width: 150px;
height: 2px;
background-color: #cf1767;
position: absolute;
top: 0;
left: 0;
}
.section-heading--centerbottom {
text-align: center;
padding-top: 0;
padding-bottom: 3.2rem;
}
.section-heading--centerbottom::before {
margin-left: -75px;
top: auto;
bottom: 0;
left: 50%;
}
.section-desc {
font-family: "Frank Ruhl Libre", serif;
font-size: 5.4rem;
font-weight: 400;
line-height: 1.259;
letter-spacing: -0.05rem;
color: #000000;
}
.item-title {
font-family: "Frank Ruhl Libre", serif;
font-size: 3.6rem;
font-weight: 500;
line-height: 1.222;
margin-top: 0;
color: #000000;
}
.ss-dark .section-heading,
.ss-dark .section-desc {
color: #ffffff;
}
/* -------------------------------------------------------------------
* responsive:
* common and reusable styles
* ------------------------------------------------------------------- */
@media screen and (max-width:1200px) {
.item-title {
font-size: 3rem;
}
}
@media screen and (max-width:1024px) {
.heading-block {
max-width: 800px;
}
.section-desc {
font-size: 4.8rem;
}
}
@media screen and (max-width:800px) {
.heading-block {
max-width: 600px;
}
.section-heading {
font-size: 1.6rem;
padding-top: 0;
padding-bottom: 3.2rem;
text-align: center;
}
.section-heading::before {
top: auto;
bottom: 0;
left: 50%;
margin-left: -75px;
}
}
@media screen and (max-width:600px) {
.section-heading {
margin-bottom: 6.8rem;
}
.section-desc {
font-size: 4rem;
}
}
@media screen and (max-width:400px) {
.section-desc {
font-size: 3.4rem;
}
.item-title {
font-size: 2.8rem;
}
}
/* ===================================================================
* # header
*
* ------------------------------------------------------------------- */
.s-header {
position: absolute;
top: 2rem;
left: 0;
width: 100%;
height: 78px;
text-align: center;
z-index: 100;
}
.s-header.sticky {
background-color: #050505;
position: fixed;
top: 0;
left: 0;
}
/* -------------------------------------------------------------------
* ## header logo
* ------------------------------------------------------------------- */
.header-logo {
display: inline-block;
margin: 6px 0 0 0;
padding: 0;
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
position: absolute;
top: 50%;
left: 40px;
}
.header-logo a {
display: block;
margin: 0;
padding: 0;
outline: 0;
border: none;
transition: all .3s;
}
.header-logo img {
width: 180px;
height: 55px;
margin: 0;
}
/* -------------------------------------------------------------------
* ## main navigation
* ------------------------------------------------------------------- */
.header-nav-wrap {
display: inline-block;
}
.header-nav-wrap ul {
display: inline-block;
list-style: none;
margin-left: 0;
margin-top: 18px;
}
.header-nav-wrap li {
display: inline-block;
padding-left: 0;
}
.header-nav-wrap li a {
display: block;
line-height: calc(78px - (18px * 2));
}
.header-main-nav {
font-family: "Roboto", sans-serif;
font-size: 13px;
text-transform: uppercase;
letter-spacing: .3rem;
color: rgba(255, 255, 255, 0.5);
margin: 0 0 0 4px;
z-index: 2;
position: static;
}
.header-main-nav li {
margin: 0 2rem;
}
.header-main-nav a {
color: rgba(255, 255, 255, 0.5);
position: relative;
}
.header-main-nav a:hover,
.header-main-nav a:focus,
.header-main-nav a:active {
color: #ffffff;
}
.header-main-nav .current a {
color: #ffffff;
}
.header-social {
font-size: 2rem;
margin: 0;
position: absolute;
top: 0;
right: 40px;
}
.header-social li {
margin-right: 1rem;
}
.header-social li:last-child {
margin-right: 0;
}
.header-social li a {
color: #ffffff;
}
/* -------------------------------------------------------------------
* ## menu trigger
* ------------------------------------------------------------------- */
.header-menu-toggle {
display: none;
height: 42px;
width: 42px;
line-height: 42px;
font-family: "Lora", serif;
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: .2rem;
color: rgba(255, 255, 255, 0.5);
transition: all .3s;
position: absolute;
right: 32px;
top: 18px;
}
.header-menu-toggle:hover,
.header-menu-toggle:focus {
color: #ffffff;
}
.header-menu-toggle span {
display: block;
width: 24px;
height: 2px;
margin-top: -1px;
background-color: #ffffff;
transition: all .5s;
font: 0/0 a;
text-shadow: none;
color: transparent;
position: absolute;
top: 50%;
left: 9px;
right: auto;
bottom: auto;
}
.header-menu-toggle span::before,
.header-menu-toggle span::after {
content: '';
width: 100%;
height: 100%;
background-color: inherit;
position: absolute;
left: 0;
transition: all .5s;
}
.header-menu-toggle span::before {
top: -9px;
}
.header-menu-toggle span::after {
bottom: -9px;
}
.header-menu-toggle.is-clicked span {
background-color: rgba(255, 255, 255, 0);
transition: all .1s;
}
.header-menu-toggle.is-clicked span::before,
.header-menu-toggle.is-clicked span::after {
background-color: white;
}
.header-menu-toggle.is-clicked span::before {
top: 0;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.header-menu-toggle.is-clicked span::after {
bottom: 0;
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
/* -------------------------------------------------------------------
* responsive:
* header
* ------------------------------------------------------------------- */
@media screen and (max-width:1200px) {
.header-main-nav {
font-size: 12px;
}
.header-main-nav li {
margin: 0 1.4rem;
}
}
@media screen and (max-width:1000px) {
.s-header {
text-align: right;
}
.header-nav-wrap {
margin-right: 36px;
}
.header-nav-wrap .header-social {
display: none;
}
}
@media screen and (max-width:800px) {
.s-header {
background-color: #050505;
position: fixed;
top: 0;
}
.header-logo img {
width: 128px;
height: 30px;
}
.header-nav-wrap {
display: none;
text-align: left;
height: auto;
width: 100%;
background-color: #050505;
padding: 120px 44px 64px;
}
.header-nav-wrap .header-main-nav {
display: block;
padding-left: 0;
height: auto;
margin: 0 0 4rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.header-nav-wrap .header-main-nav li {
display: block;
margin: 0;
padding: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.header-nav-wrap .header-main-nav li a {
padding: 18px 0;
line-height: 20px;
}
.header-nav-wrap .header-social {
display: block;
position: static;
}
.header-nav-wrap .header-social li {
font-size: 1.8rem;
margin-right: 1.6rem;
}
.header-nav-wrap .header-social li a {
line-height: 36px;
}
.header-menu-toggle {
display: block;
}
}
@media screen and (max-width:600px) {
.header-logo {
left: 35px;
}
}
/* -------------------------------------------------------------------
* make sure the menu is visible on larger screens
* ------------------------------------------------------------------- */
@media only screen and (min-width:801px) {
.header-nav-wrap {
display: block !important;
}
}
/* ===================================================================
* # intro
*
* ------------------------------------------------------------------- */
.s-intro {
width: 100%;
height: 100vh;
min-height: 792px;
background-color: #050505;
}
.intro-content {
height: 100%;
max-width: 1140px;
padding-top: 20vh;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.intro-pic {
background-color: #02182c;
background-repeat: no-repeat;
background-position: top center;
background-image: url(../images/hero-pic.jpg);
background-size: cover;
position: absolute;
top: 20%;
right: 0;
bottom: 0;
left: 50%;
}
.intro-pic::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: .2;
}
.intro-grid {
background-image: url(../images/pattern-dot-grid.svg);
background-size: 24px 24px;
opacity: .15;
position: absolute;
top: 30%;
right: 0;
bottom: 0;
left: 30%;
}
.intro-text {
-webkit-transform: translate3d(0, -3.6rem, 0);
transform: translate3d(0, -3.6rem, 0);
position: static;
z-index: 1;
}
.intro-text h3 {
font-family: "Roboto", sans-serif;
font-size: 2.4rem;
font-weight: 500;
line-height: 1.333;
color: #cf1767;
margin-top: 0;
}
.intro-text h1 {
font-size: 7.8rem;
font-weight: 500;
line-height: 1.179;
color: #ffffff;
margin-top: 0;
}
.intro-scroll {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 1.2rem;
line-height: 2;
text-transform: uppercase;
letter-spacing: .3rem;
position: absolute;
bottom: 8rem;
left: 24px;
z-index: 1;
}
.intro-scroll a {
display: inline-block;
color: rgba(255, 255, 255, 0.3);
position: relative;
padding-right: 8.8rem;
}
.intro-scroll a::after {
content: "";
position: absolute;
top: 50%;
right: 0;
height: 1px;
width: 72px;
background-color: #cf1767;
}
/* -------------------------------------------------------------------
* responsive:
* intro
* ------------------------------------------------------------------- */
@media screen and (max-width:1400px) {
.intro-text h3 {
font-size: 2.2rem;
}
.intro-text h1 {
font-size: 7.2rem;
}
}
@media screen and (max-width:1200px) {
.intro-content {
max-width: 1000px;
}
.intro-text h3 {
font-size: 2rem;
}
.intro-text h1 {
font-size: 7rem;
}
}
@media screen and (max-width:1024px) {
.s-intro {
max-height: 800px;
}
.intro-text h1 {
font-size: 6.2rem;
}
}
@media screen and (max-width:900px) {
.intro-text h1 {
font-size: 6rem;
}
.intro-text br {
display: none;
}
}
@media screen and (max-width:800px) {
.intro-content {
width: 88%;
padding-top: 8rem;
}
.intro-pic {
top: 12%;
left: 40%;
}
.intro-pic::before {
opacity: .4;
}
.intro-grid {
top: 20%;
opacity: .1;
}
.intro-text h3 {
font-size: 1.8rem;
}
.intro-text h1 {
font-size: 5.6rem;
}
}
@media screen and (max-width:700px) {
.intro-text h1 {
font-size: 5rem;
}
.intro-pic {
left: 30%;
}
.intro-grid {
left: 15%;
}
}
@media screen and (max-width:600px) {
.s-intro {
max-height: none;
}
.intro-content {
width: auto;
}
.intro-pic {
left: 20%;
}
.intro-grid {
left: 10%;
}
.intro-text {
-webkit-transform: translate3d(0, -4.8rem, 0);
transform: translate3d(0, -4.8rem, 0);
}
.intro-text h1 {
font-size: 4.8rem;
}
.intro-scroll {
font-size: 1.1rem;
left: 30px;
}
}
@media screen and (max-width:400px) {
.s-intro {
min-height: 656px;
}
.intro-text h1 {
font-size: 4.5rem;
}
}
@media screen and (max-width:350px) {
.intro-text h1 {
font-size: 4.2rem;
}
}
/* ===================================================================
* # about
*
* ------------------------------------------------------------------- */
.s-about {
padding-top: 19.2rem;
padding-bottom: 16.8rem;
background-color: #ffffff;
}
.s-about .row {
max-width: 1140px;
}
.s-about > [class*="about-"] {
margin-bottom: 15.2rem;
}
.s-about > [class*="about-"]:last-child {
margin-bottom: 0;
}
.about-me__text {
-webkit-columns: 2 360px;
-moz-columns: 2 360px;
columns: 2 360px;
column-gap: 64px;
}
.about-me__buttons {
margin-top: 4.8rem;
}
.about-me__buttons .column:first-child {
padding-right: 32px;
}
.about-me__buttons .column:last-child {
padding-left: 32px;
}
/* -------------------------------------------------------------------
* ## timeline
* ------------------------------------------------------------------- */
.about-experience__timeline {
margin-top: 1.6rem;
}
.about-experience__timeline .column:first-child {
padding-right: 40px;
}
.about-experience__timeline .column:last-child {
padding-left: 40px;
}
.timeline {
padding-top: 4.8rem;
position: relative;
}
.timeline::before {
content: "";
display: block;
width: 1px;
height: 100%;
background-color: rgba(0, 0, 0, 0.12);
position: absolute;
left: 0;
top: 0;
}
.timeline::after {
content: "";
display: block;
width: 5.6rem;
height: 1px;
background-color: rgba(0, 0, 0, 0.12);
position: absolute;
left: 1px;
top: 0;
}
.timeline__icon-wrap {
display: block;
width: 6rem;
height: 6rem;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.25);
position: absolute;
top: -2.2rem;
left: 5.6rem;
}
.timeline__icon {
display: block;
width: 2.5rem;
height: 2.5rem;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
position: absolute;
left: 50%;
top: 50%;
}
.timeline__icon--work {
background-image: url(../images/icons/icon-briefcase.svg);
}
.timeline__icon--education {
background-image: url(../images/icons/icon-education.svg);
}
.timeline__block {
position: relative;
padding-left: 5.6rem;
padding-bottom: .8rem;
margin-top: 2.8rem;
min-height: 35.6rem;
}
.timeline .timeline__block:last-child {
padding-bottom: 0;
}
.timeline__bullet {
content: "";
display: block;
width: 3px;
height: 4.8rem;
background-color: #000000;
position: absolute;
left: -1px;
top: 8px;
}
.timeline__header {
margin-bottom: 3.2rem;
}
.timeline__header .timeline__timeframe,
.timeline__header h5 {
font-family: "Roboto", sans-serif;
}
.timeline__header .timeline__timeframe {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.714;
text-transform: uppercase;
letter-spacing: .3rem;
margin-bottom: .8rem;
color: #000000;
}
.timeline__header h3 {
margin-bottom: 0;
}
.timeline__header h5 {
font-size: 2.1rem;
font-weight: 400;
line-height: 1.333;
margin-top: 0;
}
/* -------------------------------------------------------------------
* responsive:
* about
* ------------------------------------------------------------------- */
@media screen and (max-width:1200px) {
.s-about {
padding-top: 17.2rem;
padding-bottom: 15.6rem;
}
.about-experience__timeline .column:first-child {
padding-right: 30px;
}
.about-experience__timeline .column::last-child {
padding-left: 30px;
}
.timeline::after {
width: 4.4rem;
}
.timeline__icon-wrap {
left: 4.4rem;
}
.timeline__block {
padding-left: 4.4rem;
}
.timeline__header h5 {
font-size: 1.8rem;
}
}
@media screen and (max-width:1024px) {
.about-me__text {
column-gap: 40px;
}
.about-me__buttons .column:first-child {
padding-right: 20px;
}
.about-me__buttons .column:last-child {
padding-left: 20px;
}
.about-experience__timeline .column:first-child {
padding-right: 16px;
}
.about-experience__timeline .column:last-child {
padding-left: 16px;
}
}
@media screen and (max-width:900px) {
.s-about .row {
max-width: 700px;
}
.about-me__buttons .column:first-child {
padding-right: 16px;
}
.about-me__buttons .column:last-child {
padding-left: 16px;
}
.about-experience__timeline .column {
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.about-experience__timeline .column:first-child {
margin-bottom: 9.6rem;
}
.timeline::after {
width: 5.6rem;
}
.timeline__icon-wrap {
left: 5.6rem;
}
.timeline__block {
min-height: 0;
padding-left: 5.6rem;
}
}
@media screen and (max-width:800px) {
.s-about {
padding-top: 16rem;
}
.s-about .row {
max-width: 600px;
}
}
@media screen and (max-width:600px) {
.about-me__buttons .column:first-child,
.about-experience__timeline .column:first-child {
padding-right: 10px;
}
.about-me__buttons .column:last-child,
.about-experience__timeline .column:last-child {
padding-left: 10px;
}
.timeline::after {
width: 4.4rem;
}
.timeline__icon-wrap {
left: 4.4rem;
}
.timeline__block {
padding-left: 4.4rem;
}
.timeline__header h5 {
font-size: 1.8rem;
}
}
@media screen and (max-width:400px) {
.s-about > [class*="about-"] {
margin-bottom: 14rem;
}
.about-me__buttons .column:first-child,
.about-experience__timeline .column:first-child {
padding-right: 0;
}
.about-me__buttons .column:last-child,
.about-experience__timeline .column:last-child {
padding-left: 0;
}
.timeline::after {
width: 2.8rem;
}
.timeline__icon-wrap {
left: 2.8rem;
}
.timeline__block {
padding-left: 2.8rem;
}
}
/* ===================================================================
* # services
*
* ------------------------------------------------------------------- */
.s-services {
padding-top: 19.2rem;
padding-bottom: 16rem;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-image: url(../images/services-bg.jpg);
color: rgba(255, 255, 255, 0.7);
position: relative;
}
.s-services .shadow-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .3;
background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, black 80%);
}
.s-services::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #050505;
opacity: .85;
}
.s-services h4 {
font-weight: 400;
color: #ffffff;
}
.s-services a {
color: #cf1767;
}
.s-services a:hover,
.s-services a:focus,
.s-services a:active {
color: #ffffff;
}
.services-list {
max-width: 1240px;
margin-top: 8.8rem;
counter-reset: ctr;
position: relative;
}
.services-list .item-service {
margin-bottom: 2.4rem;
padding: 0 30px;
min-height: 44.8rem;
}
.services-list .item-service__content {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 3.6rem;
}
.services-list .item-service__content::before {
display: block;
content: counter(ctr, decimal-leading-zero) ".";
counter-increment: ctr;
margin-bottom: 4.8rem;
font-family: "Roboto", sans-serif;
font-weight: 300;
font-size: 8rem;
line-height: 1;
color: #cf1767;
}
/* -------------------------------------------------------------------
* responsive:
* services
* ------------------------------------------------------------------- */
@media screen and (max-width:1400px) {
.services-list .item-service {
padding: 0 20px;
}
.services-list .item-service__content::before {
font-size: 7.2rem;
}
}
@media screen and (max-width:1200px) {
.services-list {
max-width: 900px;
}
.services-list .item-service__content::before {
font-size: 6.8rem;
}
}
@media screen and (max-width:800px) {
.s-services {
padding-top: 16rem;
padding-bottom: 16rem;
}
.services-list {
max-width: 600px;
margin-top: 8rem;
}
.services-list .item-service {
padding: 0 16px;
min-height: 0;
}
.services-list .item-service__content::before {
font-size: 5.4rem;
}
}
@media screen and (max-width:600px) {
.services-list .item-service {
padding: 0 10px;
}
}
@media screen and (max-width:400px) {
.services-list .item-service {
padding: 0;
}
.services-list .item-service__content::before {
font-size: 4.8rem;
}
}
/* ===================================================================
* # CTA
*
* ------------------------------------------------------------------- */
.s-cta {
padding-top: 1rem;
padding-bottom: 13.6rem;
background-color: #000000;
border-top: 1px solid rgba(255, 255, 255, 0.03);
font-size: 2.4rem;
line-height: 1.833;
color: rgba(255, 255, 255, 0.5);
text-align: center;
}
.s-cta a {
color: #ffffff;
}
.s-cta a:hover,
.s-cta a:focus,
.s-cta a:active {
color: #cf1767;
}
.s-cta .section-desc {
margin-top: 0;
}
.cta-content {
max-width: 800px;
}
.cta-content .btn {
max-width: 600px;
background-color: #cf1767;
border: 0.2rem solid #cf1767;
}
.cta-content .btn:hover,
.cta-content .btn:focus {
background-color: #ffffff;
border: 0.2rem solid #ffffff;
color: #000000;
}
/* -------------------------------------------------------------------
* responsive:
* cta
* ------------------------------------------------------------------- */
@media screen and (max-width:800px) {
.s-cta {
font-size: 2.2rem;
}
.cta-content {
max-width: 600px;
}
}
@media screen and (max-width:600px) {
.s-cta {
font-size: 2rem;
}
}
@media screen and (max-width:600px) {
.s-cta {
font-size: 1.8rem;
}
}
/* ===================================================================
* # works
*
* ------------------------------------------------------------------- */
.s-works {
padding-top: 19.2rem;
padding-bottom: 16rem;
background-color: #ffffff;
}
.masonry-wrap {
width: 89%;
max-width: 1400px;
margin-top: 11.2rem;
margin-right: auto;
margin-left: auto;
}
.masonry .grid-sizer,
.masonry__brick {
width: 50%;
}
.masonry__brick {
float: left;
padding: 0 30px;
margin-bottom: 60px;
}
.item-folio {
text-align: center;
padding: 60px;
background-color: #EFEFEF;
transition: all 0.5s ease-in-out;
}
/* item-folio thumb
* -------------------------------------- */
.item-folio__thumb {
position: relative;
overflow: hidden;
}
.item-folio__thumb .thumb-link {
display: block;
position: relative;
}
.item-folio__thumb .thumb-link::before,
.item-folio__thumb .thumb-link::after,
.item-folio__thumb .thumb-link .item-folio__project-link {
transition: all 0.5s ease-in-out;
}
.item-folio__thumb .thumb-link::before {
display: block;
content: "";
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
}
.item-folio__thumb .thumb-link::after {
display: block;
content: "";
width: 3.6rem;
height: 3.6rem;
background-repeat: no-repeat;
background-position: center center;
background-size: 80%;
background-image: url(../images/icons/icon-plus.svg);
opacity: 0;
visibility: hidden;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
}
.item-folio__thumb img {
vertical-align: bottom;
}
.item-folio__thumb .item-folio__project-link {
display: block;
width: 6.4rem;
height: 6.4rem;
background-color: #cf1767;
background-repeat: no-repeat;
background-position: center center;
background-size: 30%;
background-image: url(../images/icons/icon-link.svg);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
z-index: 2;
position: absolute;
bottom: 0;
right: 0;
}
/* item-folio thumb on hover
* ----------------------------------------------- */
.item-folio__thumb:hover a::before,
.item-folio__thumb:hover a::after {
opacity: 1;
visibility: visible;
}
.item-folio__thumb:hover .item-folio__project-link {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* item-folio text
* ------------------------------------------------ */
.item-folio__text {
margin-top: 8.92%;
}
.item-folio__text,
.item-folio__title,
.item-folio__cat {
display: inline-block;
}
.item-folio__title,
.item-folio__cat {
font-family: "Roboto", sans-serif;
font-size: 1.7rem;
margin-top: 0;
margin-bottom: 0;
line-height: 2rem;
}
.item-folio__title {
font-weight: 500;
color: #000000;
}
.item-folio__cat {
font-weight: 300;
color: rgba(0, 0, 0, 0.7);
}
.item-folio__cat::before {
content: "-";
margin: 0 .4rem;
}
.item-folio__caption {
display: none;
}
/* -------------------------------------------------------------------
* responsive:
* works
* ------------------------------------------------------------------- */
@media screen and (max-width:1200px) {
.masonry__brick {
padding: 0 24px;
margin-bottom: 48px;
}
.item-folio {
padding: 48px;
}
.item-folio__thumb .thumb-link::after {
width: 3rem;
height: 3rem;
}
.item-folio__thumb .item-folio__project-link {
width: 5.6rem;
height: 5.6rem;
}
.item-folio__title,
.item-folio__cat {
font-size: 1.5rem;
}
}
@media screen and (max-width:1024px) {
.masonry__brick {
padding: 0 20px;
margin-bottom: 40px;
}
.item-folio {
padding: 40px;
}
}
@media screen and (max-width:900px) {
.masonry__brick {
padding: 0 16px;
margin-bottom: 32px;
}
.item-folio {
padding: 32px;
}
}
@media screen and (max-width:800px) {
.s-works {
padding-top: 16rem;
}
.masonry-wrap {
margin-top: 7.2rem;
}
.masonry .grid-sizer,
.masonry__brick {
width: 100%;
}
.masonry__brick {
float: none;
margin-bottom: 60px;
}
.item-folio {
padding: 8.92% 8.92% 8.92%;
}
.item-folio__thumb .thumb-link::after {
width: 3.6rem;
height: 3.6rem;
}
.item-folio__thumb .item-folio__project-link {
width: 6.4rem;
height: 6.4rem;
}
.item-folio__title,
.item-folio__cat {
font-size: 1.7rem;
}
}
@media screen and (max-width:600px) {
.masonry-wrap {
width: auto;
padding-left: 25px;
padding-right: 25px;
}
.masonry__brick {
padding: 0 10px;
margin-bottom: 44px;
}
.item-folio__thumb .thumb-link::after {
width: 3rem;
height: 3rem;
}
.item-folio__thumb .item-folio__project-link {
width: 5.6rem;
height: 5.6rem;
}
.item-folio__title,
.item-folio__cat {
font-size: 1.5rem;
}
}
@media screen and (max-width:500px) {
.masonry__brick {
margin-bottom: 3.6rem;
}
}
@media screen and (max-width:400px) {
.masonry__brick {
padding: 0;
margin-bottom: 3.2rem;
}
}
/* ===================================================================
* # testimonials
*
* ------------------------------------------------------------------- */
.s-testimonials {
padding-top: 18.4rem;
padding-bottom: 16rem;
background-color: #efefef;
}
.testimonials {
position: relative;
}
.testimonials p {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 4rem;
line-height: 1.8;
color: #000000;
}
.testimonials__slider {
position: relative;
}
.testimonials__slider .slick-slide {
outline: none;
}
.testimonials__slider .slick-dots {
display: block;
list-style: none;
padding: 0;
margin: 0;
position: absolute;
bottom: 3.6rem;
right: 4rem;
}
/* Sticky-header logo visibility and mobile overflow containment */
@media screen and (max-width: 800px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden !important;
}
.s-header,
.s-header.sticky {
top: 0;
width: 100%;
height: 9.2rem;
overflow: visible;
}
.header-logo,
.s-header.sticky .header-logo {
top: 50%;
left: 50%;
height: 6.4rem;
margin: 0;
padding: .4rem 0;
overflow: visible;
line-height: 0;
transform: translate(-50%, -50%);
}
.header-logo a,
.s-header.sticky .header-logo a {
width: 17.5rem;
height: 5.6rem;
overflow: visible;
}
.header-logo img,
.s-header.sticky .header-logo img {
width: 17.5rem;
height: 5.45rem;
max-width: none;
max-height: none;
object-fit: contain;
object-position: center;
}
.header-menu-toggle { top: 2.5rem; }
.header-nav-wrap { max-width: 100vw; overflow-x: hidden; }
.intro-content { padding-top: 14rem; }
main,
section,
footer,
.s-intro,
.s-about,
.s-services,
.s-cta,
.s-packages,
.s-process,
.s-local-services,
.s-testimonials,
.s-message-form,
.s-contact {
max-width: 100%;
overflow-x: hidden;
}
.row,
[class*="block-"],
.packages-grid,
.process-grid,
.services-list,
.local-service-grid,
.testimonials,
.nj-form-wrap {
max-width: 100%;
box-sizing: border-box;
}
.column,
.package-card,
.process-step,
.local-service-card,
.testimonials__slide,
.testimonial-card,
.nj-contact-form {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
img,
svg { max-width: 100%; }
[data-aos] { max-width: 100%; }
.package-modal { width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
}
@media screen and (max-width: 380px) {
.header-logo a,
.s-header.sticky .header-logo a,
.header-logo img,
.s-header.sticky .header-logo img { width: 16rem; }
}
@media screen and (max-width: 700px) {
.heading-block,
.heading-block--center,
.testimonial-heading,
.s-packages .heading-block,
.s-process .heading-block {
text-align: left;
}
.section-heading,
.section-heading.section-heading--centerbottom {
text-align: left;
}
.section-heading::before,
.section-heading--centerbottom::before {
right: auto;
left: 0;
margin-left: 0;
}
.section-desc,
.s-packages .section-desc,
.s-process .section-desc,
.testimonial-heading .section-desc {
margin-left: 0;
margin-right: 0;
text-align: left;
}
}
.testimonials__slider .slick-dots li {
display: inline-block;
width: 27px;
height: 27px;
margin: 0;
padding: 9px;
cursor: pointer;
}
.testimonials__slider .slick-dots li button {
display: block;
width: 10px;
height: 10px;
line-height: 10px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.4);
border: none;
padding: 0;
margin: 0;
cursor: pointer;
font: 0/0 a;
text-shadow: none;
color: transparent;
}
.testimonials__slider .slick-dots li button:hover,
.testimonials__slider .slick-dots li button:focus {
outline: none;
}
.testimonials__slider .slick-dots li.slick-active button,
.testimonials__slider .slick-dots li:hover button {
background: #cf1767;
}
.testimonials__slide {
position: relative;
}
.testimonials__info {
height: 7.2rem;
margin-top: 8rem;
padding-left: 10rem;
position: relative;
}
.testimonials__avatar {
width: 7.2rem;
height: 7.2rem;
border-radius: 100%;
outline: none;
position: absolute;
top: 0;
left: 0;
}
.testimonials__cite {
display: block;
}
.testimonials__cite strong,
.testimonials__cite span {
font-family: "Roboto", sans-serif;
font-style: normal;
}
.testimonials__cite strong {
font-size: 2.4rem;
line-height: 1.5;
}
.testimonials__cite span {
display: block;
font-size: 1.8rem;
line-height: 1.333;
color: rgba(0, 0, 0, 0.7);
}
/* -------------------------------------------------------------------
* responsive:
* testimonials
* ------------------------------------------------------------------- */
@media screen and (max-width:1400px) {
.testimonials p {
font-size: 3.8rem;
}
}
@media screen and (max-width:1200px) {
.testimonials {
max-width: 1000px;
}
.testimonials p {
font-size: 3.6rem;
}
.testimonials__info {
height: 6.8rem;
padding-left: 9.4rem;
}
.testimonials__avatar {
width: 6.8rem;
height: 6.8rem;
}
.testimonials__cite strong {
font-size: 2.2rem;
}
.testimonials__cite span {
font-size: 1.7rem;
}
}
@media screen and (max-width:1000px) {
.testimonials {
max-width: 800px;
}
.testimonials p {
font-size: 3.2rem;
}
.testimonials__cite strong {
font-size: 2rem;
}
.testimonials__cite span {
font-size: 1.6rem;
}
}
@media screen and (max-width:900px) {
.testimonials p {
font-size: 3rem;
}
}
@media screen and (max-width:800px) {
.s-testimonials {
padding-top: 16rem;
text-align: center;
}
.testimonials p {
font-size: 2.8rem;
}
.testimonials__slider .slick-dots {
margin-top: 4rem;
position: static;
}
.testimonials__info {
display: inline-block;
height: 6.4rem;
padding-left: 9rem;
}
.testimonials__avatar {
width: 6.4rem;
height: 6.4rem;
}
.testimonials__cite strong {
font-size: 1.8rem;
}
.testimonials__cite span {
font-size: 1.6rem;
}
}
@media screen and (max-width:600px) {
.s-testimonials {
padding-top: 13.6rem;
padding-bottom: 13.6rem;
}
.testimonials p {
font-size: 2.6rem;
}
}
@media screen and (max-width:400px) {
.testimonials p {
font-size: 2.4rem;
}
}
/* ===================================================================
* # contact
*
* ------------------------------------------------------------------- */
.s-contact {
padding-top: 18.4rem;
padding-bottom: 6.4rem;
background-color: #050505;
}
.contact-main a {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: inline-block;
}
.contact-main a:hover,
.contact-main a:focus,
.contact-main a:active {
color: #cf1767;
border-bottom: 1px solid white;
}
.contact-email {
font-family: "Roboto", sans-serif;
font-size: 9rem;
font-weight: 400;
line-height: 1;
margin: 5.6rem 0 8rem;
}
.contact-infos {
margin-top: 12.8rem;
font-family: "Frank Ruhl Libre", serif;
font-weight: 400;
font-size: 4.2rem;
line-height: 1.333;
}
.contact-infos .column {
margin-bottom: 1.6rem;
}
.contact-infos h4 {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 2.4rem;
line-height: 1.333;
margin-top: 0;
margin-bottom: .8rem;
color: rgba(255, 255, 255, 0.35);
}
.contact-infos a {
color: #ffffff;
}
.contact-infos a:hover,
.contact-infos a:focus,
.contact-infos a:active {
color: #cf1767;
}
.contact-social ul {
list-style: none;
margin-left: 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.contact-social ul li {
padding-left: 0;
}
.contact-social ul li::before {
content: "/";
color: #ffffff;
margin-left: 4px;
margin-right: 4px;
}
.contact-social ul li:first-child::before {
display: none;
}
/* -------------------------------------------------------------------
* responsive:
* contact
* ------------------------------------------------------------------- */
@media screen and (max-width:1300px) {
.contact-email {
font-size: 10rem;
}
.contact-infos {
font-size: 4rem;
}
.contact-infos h4 {
font-size: 2rem;
}
}
@media screen and (max-width:1200px) {
.contact-email {
font-size: 9rem;
}
.contact-infos {
margin-top: 9.6rem;
}
}
@media screen and (max-width:1024px) {
.contact-email {
font-size: 7.2rem;
}
.contact-infos {
font-size: 3.8rem;
}
.contact-infos h4 {
font-size: 1.8rem;
}
}
@media screen and (max-width:800px) {
.s-contact {
padding-top: 16rem;
}
.contact-email {
font-size: 9vw;
}
.contact-infos {
font-size: 3.6rem;
}
}
@media screen and (max-width:600px) {
.contact-social ul li {
margin-right: 1.2rem;
}
.contact-social ul li::before {
display: none;
}
}
@media screen and (max-width:400px) {
.contact-infos {
font-size: 3rem;
}
}
/* ===================================================================
* # footer
*
* ------------------------------------------------------------------- */
footer {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-size: 1.6rem;
line-height: 2;
padding-top: 0;
padding-bottom: 6.4rem;
border-top: 1px solid rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.3);
position: relative;
}
footer a,
footer a:visited {
color: #ffffff;
}
/* -------------------------------------------------------------------
* ## copyright
* ------------------------------------------------------------------- */
.ss-copyright {
margin-top: 2rem;
padding-right: 80px;
}
.ss-copyright span {
font-size: 14px;
display: inline-block;
}
.ss-copyright span::after {
content: "|";
display: inline-block;
padding: 0 1rem 0 1.2rem;
color: rgba(255, 255, 255, 0.1);
}
.ss-copyright span:last-child::after {
display: none;
}
/* -------------------------------------------------------------------
* ## go to top
* ------------------------------------------------------------------- */
.ss-go-top {
position: absolute;
top: -1px;
right: 6rem;
z-index: 2;
}
.ss-go-top a {
display: block;
background: rgba(255, 255, 255, 0.05);
text-decoration: none;
margin: 0;
padding: 0;
border: 0 none;
height: 60px;
width: 60px;
line-height: 60px;
text-align: center;
color: white;
text-transform: uppercase;
transition: all .3s;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../images/icons/icon-arrow-up.svg);
background-size: 10px 16px;
position: relative;
}
.ss-go-top a:hover,
.ss-go-top a:focus {
background-color: #cf1767;
color: #ffffff;
}
.ss-go-top::before {
content: "";
display: block;
width: 1px;
height: 100px;
background-color: rgba(255, 255, 255, 0.05);
position: absolute;
top: -115px;
left: 50%;
}
.ss-go-top::after {
content: "back to top";
display: block;
float: left;
width: 120px;
font-size: 1.2rem;
line-height: 30px;
text-transform: uppercase;
letter-spacing: .2rem;
color: rgba(255, 255, 255, 0.15);
transition: all 0.5s;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
position: absolute;
left: calc(30px + 15px);
top: -165px;
}
/* -------------------------------------------------------------------
* responsive:
* footer
* ------------------------------------------------------------------- */
@media screen and (max-width:1200px) {
.ss-go-top {
right: 3rem;
}
}
@media screen and (max-width:900px) {
.ss-go-top {
right: 0;
}
.ss-go-top::before,
.ss-go-top::after {
display: none;
}
}
@media screen and (max-width:600px) {
.ss-copyright {
margin-top: 9rem;
padding: 0;
text-align: center;
}
.ss-copyright span {
display: block;
}
.ss-copyright span::after {
display: none;
}
.ss-go-top {
right: 50%;
margin-right: -30px;
}
}
@media screen and (max-width:400px) {
.ss-copyright span {
font-size: 13px;
}
}
/* ===================================================================
* # IE10/IE11 Specific
*
* ------------------------------------------------------------------- */
html[data-useragent*='MSIE 10.0'] .ss-go-top::before,
html[data-useragent*='MSIE 10.0'] .ss-go-top::after,
html[data-useragent*='rv:11.0'] .ss-go-top::before,
html[data-useragent*='rv:11.0'] .ss-go-top::after {
display: none;
}
/*# sourceMappingURL=main.css.map */
/* -------------------------------------------------------------------
* Creative CTA polish - added May 2026
* ------------------------------------------------------------------- */
.header-main-nav .header-cta {
margin-left: 1.2rem;
}
.header-main-nav .header-cta a {
align-items: center;
background: #cf1767;
border: 1px solid #cf1767;
border-radius: 999px;
box-shadow: 0 10px 28px rgba(207, 23, 103, 0.28);
color: #ffffff !important;
display: inline-flex;
letter-spacing: .22rem;
line-height: 1;
min-height: 42px;
overflow: hidden;
padding: 0 2rem;
position: relative;
transform: translateZ(0);
transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
.header-main-nav .header-cta a::before {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
content: "";
height: 100%;
left: -85%;
position: absolute;
top: 0;
transform: skewX(-20deg);
width: 58%;
}
.header-main-nav .header-cta a::after {
background: rgba(255, 255, 255, .95);
border-radius: 50%;
content: "";
height: 6px;
margin-left: 1.1rem;
position: relative;
width: 6px;
box-shadow: 0 0 0 0 rgba(255, 255, 255, .36);
animation: njCtaDotPulse 1.8s ease-out infinite;
}
.header-main-nav .header-cta a:hover,
.header-main-nav .header-cta a:focus {
background: #ffffff;
border-color: #ffffff;
box-shadow: 0 16px 44px rgba(207, 23, 103, .42);
color: #050505 !important;
transform: translateY(-2px);
}
.header-main-nav .header-cta a:hover::before,
.header-main-nav .header-cta a:focus::before {
animation: njHeaderShine .75s ease;
}
.cta-content .btn {
border-radius: 999px;
box-shadow: 0 18px 48px rgba(207, 23, 103, .34);
overflow: hidden;
position: relative;
transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease, color .28s ease;
}
.cta-content .btn::before {
background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
content: "";
height: 100%;
left: -80%;
position: absolute;
top: 0;
transform: skewX(-20deg);
width: 55%;
}
.cta-content .btn:hover,
.cta-content .btn:focus {
transform: translateY(-4px) scale(1.015);
box-shadow: 0 28px 72px rgba(207, 23, 103, .42);
}
.cta-content .btn:hover::before,
.cta-content .btn:focus::before {
animation: njHeaderShine .75s ease;
}
@keyframes njHeaderShine {
to { left: 130%; }
}
@keyframes njCtaDotPulse {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .36); }
70% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media screen and (max-width:1200px) {
.header-main-nav .header-cta {
margin-left: .6rem;
}
.header-main-nav .header-cta a {
letter-spacing: .16rem;
padding: 0 1.55rem;
}
}
@media screen and (max-width:800px) {
.header-nav-wrap .header-main-nav .header-cta {
border-bottom: 0;
padding-top: 2rem;
}
.header-nav-wrap .header-main-nav .header-cta a {
justify-content: center;
line-height: 1;
margin-top: .8rem;
min-height: 5.4rem;
padding: 0 2.4rem;
width: 100%;
}
}
/* ===================================================================
* Local lead-generation and SEO content
* ------------------------------------------------------------------- */
.intro-local-copy {
max-width: 64rem;
margin: 2.4rem 0 2.8rem;
color: rgba(255, 255, 255, 0.78);
font-size: 1.8rem;
line-height: 1.65;
}
.intro-actions {
display: flex;
flex-wrap: wrap;
gap: 1.2rem;
position: relative;
z-index: 2;
}
.intro-actions .btn {
margin: 0;
}
.intro-actions .btn--stroke {
color: #fff;
border-color: rgba(255, 255, 255, 0.65);
}
.s-local-services {
padding: 15rem 0 12rem;
background: #f4f4f4;
}
.s-local-services .section-desc {
max-width: 94rem;
}
.local-service-grid {
display: flex;
flex-wrap: wrap;
row-gap: 2.4rem;
margin-top: 5rem;
}
.local-service-card {
margin-bottom: 2.4rem;
}
.local-service-card h3 {
margin-top: 0;
font-size: 2.4rem;
}
.local-service-card p {
margin-bottom: 0;
}
.faq-wrap {
margin-top: 7rem;
}
.faq-wrap h2 {
margin-bottom: 3rem;
}
.faq-wrap details {
padding: 2.2rem 0;
border-top: 1px solid rgba(0, 0, 0, 0.16);
}
.faq-wrap details:last-child {
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.faq-wrap summary {
cursor: pointer;
color: #111;
font-family: "Frank Ruhl Libre", serif;
font-size: 2.2rem;
font-weight: 600;
line-height: 1.35;
}
.faq-wrap details p {
max-width: 84rem;
margin: 1.5rem 0 0;
}
@media screen and (max-width: 800px) {
.intro-local-copy {
font-size: 1.6rem;
}
.intro-actions {
gap: 0.8rem;
}
.intro-actions .btn {
width: 100%;
padding-left: 1.6rem;
padding-right: 1.6rem;
}
.s-local-services {
padding: 11rem 0 9rem;
}
}
/* -------------------------------------------------------------------
* Website packages and floating WhatsApp CTA
* ------------------------------------------------------------------- */
.s-packages {
padding: 15rem 0 12rem;
background: #fff;
}
.packages-kicker {
margin: 0 0 1.2rem;
color: #cc147f;
font-size: 1.4rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
}
.s-packages .section-desc {
max-width: 82rem;
margin-left: auto;
margin-right: auto;
}
.packages-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.4rem;
margin-top: 6rem;
align-items: stretch;
}
.package-card {
position: relative;
display: flex;
flex-direction: column;
padding: 4rem 3.2rem 3.2rem;
border: 1px solid #e2e2e2;
border-radius: 1.6rem;
background: #fff;
box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, .06);
}
.package-card--featured {
border: 2px solid #cc147f;
transform: translateY(-1.2rem);
box-shadow: 0 2rem 5rem rgba(204, 20, 127, .14);
}
.package-popular {
position: absolute;
top: 0;
left: 50%;
padding: .6rem 1.8rem;
border-radius: 0 0 1rem 1rem;
background: #cc147f;
color: #fff;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
transform: translateX(-50%);
}
.package-label {
display: inline-block;
margin-bottom: 1.5rem;
font-size: 1.3rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.package-label--starter { color: #178b55; }
.package-label--business { color: #1d62c9; }
.package-label--premium { color: #803dc5; }
.package-card h3 { margin: 0 0 1rem; font-size: 2.7rem; line-height: 1.2; }
.package-fit { min-height: 5.4rem; margin-bottom: 2rem; font-size: 1.6rem; line-height: 1.55; }
.package-price { margin: 0; color: #111; font-family: "Frank Ruhl Libre", serif; font-size: 5rem; font-weight: 600; line-height: 1; }
.package-price span, .package-price small { font-size: 2.4rem; }
.package-price-note { margin: .8rem 0 2.5rem; color: #777; font-size: 1.3rem; }
.package-features {
flex: 1;
margin: 0 0 2.5rem;
padding: 2.5rem 0 0;
border-top: 1px solid #ededed;
list-style: none;
}
.package-features li { position: relative; margin-bottom: 1.1rem; padding-left: 2.6rem; font-size: 1.5rem; line-height: 1.5; }
.package-features li::before { content: "✓"; position: absolute; left: 0; color: #178b55; font-weight: 700; }
.package-delivery { margin: 0 0 2rem; font-size: 1.4rem; }
.package-card .btn { margin: 0; padding-left: 1.4rem; padding-right: 1.4rem; }
.package-help {
margin-top: 6rem;
padding: 4.5rem;
border-radius: 1.6rem;
background: #111;
color: rgba(255, 255, 255, .72);
text-align: center;
}
.package-help h3 { margin: 0 0 1rem; color: #fff; }
.package-help p { max-width: 72rem; margin: 0 auto 2.5rem; }
.package-help__actions { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; }
.package-help__actions .btn { margin: 0; }
.whatsapp-float {
position: fixed;
z-index: 700;
right: 2.4rem;
bottom: 2.4rem;
display: flex;
align-items: center;
gap: .9rem;
min-height: 5.6rem;
padding: 0 1.8rem;
border-radius: 999px;
background: #25d366;
color: #fff;
box-shadow: 0 .8rem 2.8rem rgba(0, 0, 0, .25);
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float i { font-size: 2.6rem; }
.whatsapp-float:hover, .whatsapp-float:focus { color: #fff; transform: translateY(-3px); box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, .3); }
.whatsapp-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media screen and (max-width: 1000px) {
.packages-grid { grid-template-columns: 1fr; max-width: 68rem; }
.package-card--featured { transform: none; }
.package-fit { min-height: 0; }
}
@media screen and (max-width: 600px) {
.s-packages { padding: 10rem 0 8rem; }
.package-card { padding: 3.5rem 2.2rem 2.4rem; }
.package-price { font-size: 4.3rem; }
.package-help { padding: 3.5rem 2rem; }
.package-help__actions .btn { width: 100%; }
.whatsapp-float { right: 1.6rem; bottom: 1.6rem; width: 5.8rem; padding: 0; justify-content: center; }
.whatsapp-float__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* -------------------------------------------------------------------
* Final typography, component and accessibility refinements
* ------------------------------------------------------------------- */
html { font-size: 10px; }
body {
font-family: "Roboto", Arial, sans-serif;
font-size: 1.7rem;
line-height: 1.7;
letter-spacing: 0;
}
p, li, label, input, textarea, select { letter-spacing: 0; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.015em; }
.section-heading { letter-spacing: .02em; }
.section-desc { font-size: clamp(1.8rem, 2vw, 2.2rem); line-height: 1.6; }
.btn,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
border-radius: 999px;
font-size: 1.35rem;
letter-spacing: .12em;
line-height: 1.25;
white-space: normal;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn.btn--primary, button.btn--primary { color: #fff !important; }
.ss-dark .btn:not(.btn--primary):not(.btn--stroke),
.cta-content .btn { background: #fff; border-color: #fff; color: #111 !important; }
.intro-actions .btn--stroke { color: #fff !important; }
.package-help .btn--stroke { border-color: #fff; color: #fff; }
.package-help .btn--stroke:hover, .package-help .btn--stroke:focus { background: #fff !important; border-color: #fff; color: #111; }
.package-card .btn { min-height: 6rem; height: auto; border-radius: 999px; }
/* process */
.s-process { padding: 15rem 0 13rem; background: #0b0b0d; color: rgba(255,255,255,.7); }
.s-process .section-heading, .s-process h3 { color: #fff; }
.s-process .section-desc { max-width: 78rem; margin-left: auto; margin-right: auto; color: rgba(255,255,255,.68); }
.process-kicker, .testimonial-kicker { margin: 0 0 1.2rem; color: #cf1767; font-size: 1.35rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.process-grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem; margin-top: 6rem; }
.process-grid::before { content: ""; position: absolute; top: 5.2rem; left: 9%; right: 9%; height: 2px; background: linear-gradient(90deg, #cf1767, #803dc5); opacity: .45; }
.process-step { position: relative; z-index: 1; padding: 3rem 2rem; border: 1px solid rgba(255,255,255,.11); border-radius: 1.6rem; background: #151519; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.process-step:hover { transform: translateY(-8px); border-color: rgba(207,23,103,.65); box-shadow: 0 2rem 4rem rgba(0,0,0,.3); }
.process-number { position: absolute; top: 1.8rem; right: 2rem; color: rgba(255,255,255,.18); font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; }
.process-icon { display: flex; width: 7rem; height: 7rem; margin-bottom: 2.5rem; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #cf1767, #803dc5); color: #fff; font-size: 2.6rem; box-shadow: 0 1rem 3rem rgba(207,23,103,.25); animation: processFloat 4s ease-in-out infinite; }
.process-icon svg {
width: 3.2rem;
height: 3.2rem;
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.process-step:nth-child(2) .process-icon { animation-delay: .25s; }.process-step:nth-child(3) .process-icon { animation-delay: .5s; }.process-step:nth-child(4) .process-icon { animation-delay: .75s; }.process-step:nth-child(5) .process-icon { animation-delay: 1s; }
.process-step h3 { margin: 0 0 1.2rem; font-size: 2.2rem; line-height: 1.25; }
.process-step p { margin: 0; font-size: 1.5rem; line-height: 1.65; }
@keyframes processFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* testimonials */
.s-testimonials { padding: 13rem 0 12rem; background: #f5f5f7; }
.testimonial-heading { margin-bottom: 5rem; }
.testimonial-heading .section-desc { max-width: 75rem; margin-left: auto; margin-right: auto; }
.testimonial-card { position: relative; margin: 0 1.2rem 5rem; padding: 5rem; border: 1px solid #e4e4e7; border-radius: 1.8rem; background: #fff; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.07); overflow: hidden; }
.testimonial-quote { position: absolute; top: .5rem; right: 2.5rem; color: rgba(207,23,103,.1); font-family: Georgia, serif; font-size: 12rem; line-height: 1; }
.testimonials .testimonial-card > p { position: relative; margin: 0 0 3rem; font-size: clamp(2rem, 2.5vw, 2.8rem); line-height: 1.55; }
.testimonials__info { margin-top: 0; }
.testimonials__avatar { border: 3px solid #fff; box-shadow: 0 0 0 2px #cf1767; }
.testimonials__slider .slick-dots { right: 50%; bottom: 0; transform: translateX(50%); }
/* package enquiry modal */
.modal-open { overflow: hidden; }
.package-modal[hidden] { display: none; }
.package-modal { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 2rem; }
.package-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.76); backdrop-filter: blur(5px); }
.package-modal__dialog { position: relative; width: min(68rem, 100%); max-height: calc(100vh - 4rem); overflow-y: auto; padding: 4.5rem; border-radius: 1.8rem; background: #fff; box-shadow: 0 2.5rem 8rem rgba(0,0,0,.35); }
.package-modal__close { position: absolute; top: 1.4rem; right: 1.4rem; width: 4.2rem; height: 4.2rem; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: #f0f0f2; color: #111; font-size: 2.6rem; letter-spacing: 0; line-height: 1; }
.package-modal__close:hover { background: #111; color: #fff; }
.package-modal__kicker { margin: 0 0 .8rem; color: #cf1767; font-size: 1.3rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.package-modal h2 { margin: 0 4rem 1rem 0; font-size: 3.5rem; }
.package-modal__intro { margin: 0 0 2.5rem; font-size: 1.6rem; }
.package-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.package-modal__field { margin-bottom: 1.5rem; }
.package-modal__field label { display: block; margin-bottom: .6rem; color: #222; font-size: 1.4rem; font-weight: 700; }
.package-modal__field input, .package-modal__field textarea { width: 100%; margin: 0; border: 1px solid #d7d7db; border-radius: .8rem; background: #fafafa; color: #111; font-family: "Roboto", Arial, sans-serif; font-size: 1.6rem; }
.package-modal__field input { height: 5.2rem; padding: 0 1.5rem; }
.package-modal__field textarea { min-height: 11rem; padding: 1.2rem 1.5rem; }
.package-modal__field input:focus, .package-modal__field textarea:focus { border-color: #cf1767; background: #fff; box-shadow: 0 0 0 3px rgba(207,23,103,.1); }
.package-modal__status { min-height: 2.4rem; margin: 1.2rem 0 0; font-size: 1.4rem; font-weight: 600; text-align: center; }
.package-modal__status.is-success { color: #147a46; }
.package-modal__status.is-error { color: #b42318; }
/* compact WhatsApp icon and centered footer */
.whatsapp-float { width: 5.8rem; height: 5.8rem; min-height: 5.8rem; padding: 0; justify-content: center; }
.ss-copyright { float: none; width: 100%; text-align: center; }
.ss-copyright span { display: inline-block; }
@media screen and (max-width: 1100px) { .process-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .process-grid::before { display: none; } }
@media screen and (max-width: 700px) {
body { font-size: 1.6rem; }
.process-grid { grid-template-columns: 1fr; }
.s-process, .s-testimonials { padding: 10rem 0 8rem; }
.testimonial-card { margin-left: 0; margin-right: 0; padding: 3.2rem 2.4rem; }
.package-modal { padding: 1rem; }
.package-modal__dialog { max-height: calc(100vh - 2rem); padding: 3.5rem 2rem 2.5rem; }
.package-modal h2 { font-size: 2.8rem; }
.package-modal__grid { grid-template-columns: 1fr; gap: 0; }
.btn { letter-spacing: .08em; }
}
/* Service icons, package consultation panel and scroll CTA */
.services-list .item-service__content::before { display: none; }
.service-icon {
display: inline-flex;
width: 6.4rem;
height: 6.4rem;
margin: 0 0 3rem;
align-items: center;
justify-content: center;
border: 1px solid rgba(204, 20, 127, .55);
border-radius: 50%;
color: #e5369b;
}
.service-icon svg {
width: 3rem;
height: 3rem;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.services-list .item-service { min-height: 39rem; }
.package-help { background: #cc147f; color: rgba(255,255,255,.9); }
.package-help h3, .package-help p { color: #fff; }
.package-help .btn--primary { background: #111; border-color: #111; color: #fff !important; }
.package-help .btn--primary:hover, .package-help .btn--primary:focus { background: #fff; border-color: #fff; color: #111 !important; }
.package-help .btn--stroke { border-color: #fff; color: #fff; }
.package-help .btn--stroke:hover, .package-help .btn--stroke:focus { background: #fff !important; border-color: #fff; color: #cc147f; }
.sticky-contact-cta {
position: fixed;
z-index: 850;
left: 50%;
bottom: 1.6rem;
display: flex;
width: min(76rem, calc(100% - 3.2rem));
min-height: 7.2rem;
padding: 1rem 1.2rem 1rem 2.4rem;
align-items: center;
justify-content: space-between;
gap: 2rem;
border: 1px solid rgba(255,255,255,.12);
border-radius: 999px;
background: rgba(15,15,17,.96);
box-shadow: 0 1.6rem 5rem rgba(0,0,0,.34);
opacity: 0;
pointer-events: none;
transform: translate(-50%, calc(100% + 4rem));
transition: opacity .28s ease, transform .35s ease;
backdrop-filter: blur(12px);
}
.sticky-contact-cta.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.sticky-contact-cta p { margin: 0; color: #fff; font-size: 1.5rem; line-height: 1.35; }
.sticky-contact-cta p strong, .sticky-contact-cta p span { display: block; }
.sticky-contact-cta p span { color: rgba(255,255,255,.62); font-size: 1.3rem; }
.sticky-contact-cta__actions { display: flex; gap: .8rem; }
.sticky-cta-btn {
display: inline-flex;
min-height: 5rem;
padding: 0 2rem;
align-items: center;
justify-content: center;
gap: .8rem;
border-radius: 999px;
color: #fff;
font-family: var(--font-body);
font-size: 1.4rem;
font-weight: 700;
line-height: 1;
}
.sticky-cta-btn i { font-size: 1.7rem; font-weight: normal; }
.sticky-cta-btn .fas { font-weight: 900; }
.sticky-cta-btn--call { background: #cc147f; }
.sticky-cta-btn--whatsapp { background: #25d366; }
.sticky-cta-btn:hover, .sticky-cta-btn:focus { color: #fff; filter: brightness(.9); transform: translateY(-1px); }
.sticky-cta-visible .whatsapp-float { opacity: 0; pointer-events: none; transform: translateY(2rem); }
@media screen and (max-width: 700px) {
.services-list .item-service { min-height: 0; }
.service-icon { width: 5.6rem; height: 5.6rem; margin-bottom: 2.2rem; }
.sticky-contact-cta { bottom: .8rem; width: calc(100% - 1.6rem); min-height: 6.4rem; padding: .7rem; border-radius: 1.6rem; }
.sticky-contact-cta p { display: none; }
.sticky-contact-cta__actions { width: 100%; }
.sticky-cta-btn { flex: 1; min-height: 5rem; padding: 0 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .sticky-contact-cta { transition: none; } }
/* Complete mobile layout pass */
@media screen and (max-width: 700px) {
html { font-size: 10px; scroll-padding-bottom: 8rem; }
body { overflow-x: hidden; font-size: 1.6rem; line-height: 1.65; }
.row { width: calc(100% - 3.2rem); max-width: none; }
.s-about,
.s-services,
.s-cta,
.s-packages,
.s-process,
.s-local-services,
.s-testimonials,
.s-message-form,
.s-contact { padding-top: 8rem; padding-bottom: 8rem; }
.heading-block,
.heading-block--center { width: 100%; max-width: none; }
.section-heading,
.section-heading.section-heading--centerbottom {
max-width: 100%;
margin-bottom: 2rem;
padding-bottom: 2rem;
font-size: clamp(3rem, 9vw, 3.6rem);
line-height: 1.18;
overflow-wrap: anywhere;
}
.section-heading:not(.section-heading--centerbottom) { padding-top: 2rem; padding-bottom: 0; }
.section-heading::before { width: 8rem; margin-left: -4rem; }
.section-heading:not(.section-heading--centerbottom)::before { left: 0; margin-left: 0; }
.section-desc,
.s-cta .section-desc,
.s-process .section-desc { font-size: 1.8rem; line-height: 1.6; }
.s-intro { min-height: 68rem; height: auto; max-height: none; }
.intro-content { width: calc(100% - 3.2rem); padding-top: 13rem; padding-bottom: 8rem; }
.intro-text { transform: none; }
.intro-text h1 { max-width: 100%; font-size: clamp(3.8rem, 11vw, 4.8rem); line-height: 1.1; overflow-wrap: break-word; }
.intro-text h3 { font-size: 1.4rem; line-height: 1.45; letter-spacing: .06em; }
.intro-local-copy { margin: 2rem 0 2.4rem; font-size: 1.7rem; line-height: 1.6; }
.intro-actions { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.intro-actions .btn { width: 100%; min-height: 5.6rem; height: auto; margin: 0; padding: 1.4rem 1.6rem; }
.about-me__text .about-greeting { font-size: 4rem; }
.about-me__text p,
.about-me__text p.lead { font-size: 1.7rem; line-height: 1.7; }
.about-me__buttons .column { margin-bottom: 1rem; }
.about-me__buttons .btn { min-height: 5.6rem; height: auto; margin: 0; padding: 1.4rem; }
.services-list { width: 100%; margin-top: 5rem; }
.services-list .item-service { padding: 0; margin-bottom: 4.5rem; }
.services-list .item-service:last-child { margin-bottom: 0; }
.services-list .item-service__content { padding-top: 2.8rem; }
.item-service .item-title { margin-bottom: 1.4rem; font-size: 2.5rem; }
.item-service p { font-size: 1.6rem; line-height: 1.7; }
.s-cta .heading-block { margin-bottom: 0; }
.s-cta .section-desc { font-family: var(--font-heading); font-size: 3.2rem; line-height: 1.2; }
.cta-content p { font-size: 1.7rem; line-height: 1.6; }
.cta-content .btn { min-height: 5.6rem; height: auto; padding: 1.4rem; }
.packages-grid { width: calc(100% - 3.2rem); margin-top: 4.5rem; gap: 2rem; }
.package-card,
.package-card--featured { width: 100%; padding: 3.5rem 2rem 2.4rem; transform: none; }
.package-card h3 { font-size: 2.5rem; }
.package-features li { font-size: 1.55rem; line-height: 1.55; }
.package-help { width: calc(100% - 3.2rem); margin-top: 4rem; padding: 3.2rem 2rem; }
.package-help h3 { font-size: 2.6rem; }
.package-help p { font-size: 1.6rem; }
.process-grid { width: calc(100% - 3.2rem); margin-top: 4rem; gap: 1.6rem; }
.process-step { padding: 2.6rem 2rem; }
.process-step h3 { font-size: 2.4rem; }
.process-step p { font-size: 1.55rem; }
.local-service-grid { display: block; margin-top: 4rem; }
.local-service-card { width: 100%; margin-bottom: 3rem; padding: 0; }
.local-service-card h3 { font-size: 2.4rem; }
.faq-wrap { margin-top: 5rem; }
.faq-wrap h2 { font-size: 3rem; }
.faq-wrap summary { padding-right: .5rem; font-size: 1.9rem; line-height: 1.45; }
.testimonial-heading { margin-bottom: 3.5rem; }
.testimonials { width: calc(100% - 3.2rem); }
.testimonial-card { margin: 0 0 5rem; padding: 3rem 2rem; }
.testimonials .testimonial-card > p { font-size: 1.9rem; line-height: 1.6; }
.testimonial-quote { right: 1.5rem; font-size: 8rem; }
.testimonials__info { display: flex; align-items: center; }
.nj-form-wrap { width: calc(100% - 3.2rem); padding: 2.5rem 1.6rem; }
.nj-form-copy,
.nj-form-wrap .large-7 { width: 100%; padding-left: 0; padding-right: 0; }
.nj-form-copy h3 { font-size: 2.6rem; }
.nj-contact-mini a { overflow-wrap: anywhere; }
.nj-field-grid { grid-template-columns: 1fr; gap: 0; }
.nj-contact-form input,
.nj-contact-form textarea { font-size: 1.6rem; }
.nj-submit-btn { width: 100%; }
.contact-email { margin: 3rem 0 4rem; font-size: clamp(2.3rem, 7.5vw, 3.4rem); line-height: 1.25; overflow-wrap: anywhere; }
.contact-main .section-desc { font-size: 1.7rem; }
.contact-infos { margin-top: 5rem; font-size: 1.8rem; }
.contact-infos .column { width: 100%; margin-bottom: 3rem; }
.contact-social ul { gap: 1.2rem; }
.contact-social li { margin: 0; }
footer { padding-bottom: 10rem; }
.ss-copyright { padding: 0 5rem; font-size: 1.3rem; line-height: 1.5; }
.ss-go-top { right: 1.6rem; }
.package-modal__dialog { width: 100%; padding: 4.5rem 1.8rem 2.4rem; }
.package-modal h2 { margin-right: 2.5rem; font-size: 2.8rem; }
.package-modal__intro { font-size: 1.5rem; }
.package-modal__field input { height: 5rem; }
}
@media screen and (max-width: 380px) {
.row,
.intro-content,
.packages-grid,
.process-grid,
.testimonials,
.nj-form-wrap { width: calc(100% - 2.4rem); }
.intro-text h1 { font-size: 3.6rem; }
.sticky-cta-btn { padding: 0 .8rem; font-size: 1.25rem; }
.sticky-cta-btn i { font-size: 1.5rem; }
}
/* Mobile header logo and bottom contact bar refinements */
@media screen and (max-width: 800px) {
.s-header { height: 8rem; }
.header-logo {
top: 50%;
left: 50%;
width: auto;
margin: 0;
transform: translate(-50%, -50%);
}
.header-logo a { display: flex; align-items: center; justify-content: center; }
.header-logo img {
display: block;
width: 17.5rem;
height: auto;
max-height: 5.4rem;
object-fit: contain;
}
.header-menu-toggle { right: 1.6rem; top: 1.9rem; }
.header-nav-wrap { padding-top: 10rem; }
.sticky-contact-cta {
right: .8rem;
bottom: max(.8rem, env(safe-area-inset-bottom));
left: .8rem;
width: auto;
max-width: none;
min-height: 6.4rem;
padding: .7rem;
transform: translateY(calc(100% + 4rem));
box-sizing: border-box;
}
.sticky-contact-cta.is-visible { transform: translateY(0); }
.sticky-contact-cta__actions {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
width: 100%;
gap: .7rem;
}
.sticky-cta-btn {
width: 100%;
min-width: 0;
min-height: 5rem;
margin: 0;
padding: .8rem 1rem;
gap: .7rem;
box-sizing: border-box;
font-size: 1.35rem;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
}
.sticky-cta-btn i { flex: 0 0 auto; font-size: 1.7rem; }
.sticky-cta-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media screen and (max-width: 380px) {
.header-logo img { width: 16rem; }
.header-menu-toggle { right: .8rem; }
.sticky-cta-btn { padding-left: .7rem; padding-right: .7rem; font-size: 1.25rem; }
}
.testimonials__slider .slick-dots {
right: auto;
left: 50%;
bottom: 0;
width: max-content;
margin: 0;
text-align: center;
transform: translateX(-50%);
}
@media (prefers-reduced-motion: reduce) { .process-icon { animation: none; } .process-step { transition: none; } }
/* ===================================================================
* Unified typography system
* One scale and two typefaces across every section.
* ------------------------------------------------------------------- */
:root {
--font-heading: "Frank Ruhl Libre", Georgia, serif;
--font-body: "Roboto", Arial, sans-serif;
--text-body: 1.7rem;
--text-small: 1.4rem;
--text-lead: 2rem;
--heading-1: clamp(4.6rem, 6vw, 6.8rem);
--heading-2: clamp(3.6rem, 4vw, 4.6rem);
--heading-3: clamp(2.5rem, 2.5vw, 3rem);
--heading-4: 2.1rem;
}
body,
input,
textarea,
select,
button {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 400;
line-height: 1.7;
letter-spacing: 0;
}
p,
li,
summary,
.about-me__text p,
.item-service p,
.local-service-card p,
.process-step p,
.package-features li,
.package-fit,
.package-delivery,
.nj-form-intro,
.nj-form-copy p,
.contact-main .section-desc {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 400;
line-height: 1.7;
letter-spacing: 0;
}
strong,
b {
font-family: inherit;
font-weight: 700;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.item-title,
.package-price {
font-family: var(--font-heading);
font-style: normal;
font-weight: 600;
letter-spacing: -.02em;
}
h1, .h1 { font-size: var(--heading-1); line-height: 1.08; }
h2, .h2 { font-size: var(--heading-2); line-height: 1.15; }
h3, .h3 { font-size: var(--heading-3); line-height: 1.25; }
h4, .h4 { font-size: var(--heading-4); line-height: 1.35; }
h5, .h5 { font-size: 1.8rem; line-height: 1.4; }
h6, .h6 { font-family: var(--font-body); font-size: 1.5rem; line-height: 1.4; letter-spacing: .08em; }
.section-heading,
.section-heading.section-heading--centerbottom {
margin: 0 0 2.4rem;
padding: 0 0 2.5rem;
font-family: var(--font-heading);
font-size: var(--heading-2);
font-weight: 600;
line-height: 1.15;
letter-spacing: -.02em;
text-transform: none;
}
.section-heading:not(.section-heading--centerbottom) { padding-top: 2.5rem; padding-bottom: 0; }
.section-heading:not(.section-heading--centerbottom)::before { top: 0; }
.section-desc,
.s-cta .section-desc,
.s-packages .section-desc,
.s-process .section-desc,
.testimonial-heading .section-desc {
font-family: var(--font-body);
font-size: var(--text-lead);
font-weight: 400;
line-height: 1.65;
letter-spacing: 0;
}
.intro-text h1 {
font-family: var(--font-heading);
font-size: var(--heading-1);
font-weight: 600;
line-height: 1.08;
letter-spacing: -.025em;
}
.intro-text h3 {
font-family: var(--font-body);
font-size: 1.8rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: .08em;
text-transform: uppercase;
}
.intro-local-copy { font-size: var(--text-lead); line-height: 1.65; }
.about-me__text .about-greeting {
margin-bottom: 2.4rem;
font-family: var(--font-heading);
font-size: clamp(4rem, 5vw, 5.6rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.02em;
}
p.lead,
.about-me__text p.lead {
font-family: var(--font-body);
font-size: 2.1rem;
font-weight: 400;
line-height: 1.7;
}
.item-title,
.item-service .item-title,
.local-service-card h3,
.process-step h3,
.package-card h3,
.nj-form-copy h3,
.package-help h3 {
font-family: var(--font-heading);
font-size: 2.7rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: -.015em;
}
.packages-kicker,
.process-kicker,
.testimonial-kicker,
.nj-form-kicker,
.package-modal__kicker,
.package-label,
.package-popular {
font-family: var(--font-body);
font-size: 1.3rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: .1em;
}
.package-price { font-size: 5rem; line-height: 1; }
.package-price-note { font-family: var(--font-body); font-size: 1.3rem; line-height: 1.5; letter-spacing: 0; }
.faq-wrap h2 { font-size: 3.6rem; }
.faq-wrap summary { font-family: var(--font-heading); font-size: 2.1rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.testimonials .testimonial-card > p { font-family: var(--font-body); font-size: 2.3rem; font-weight: 400; line-height: 1.6; }
.testimonials__cite strong { font-family: var(--font-body); font-size: 1.6rem; font-weight: 700; letter-spacing: 0; }
.testimonials__cite span { font-family: var(--font-body); font-size: 1.4rem; font-weight: 400; letter-spacing: 0; }
.package-modal h2 { font-size: 3.6rem; line-height: 1.2; }
.package-modal__intro,
.package-modal__field input,
.package-modal__field textarea { font-size: 1.6rem; line-height: 1.6; }
.package-modal__field label { font-size: 1.4rem; line-height: 1.4; }
.contact-email { font-family: var(--font-body); font-size: clamp(2.8rem, 5vw, 5.4rem); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.contact-infos { font-family: var(--font-body); font-size: 2rem; font-weight: 400; line-height: 1.5; }
.contact-infos h4 { font-family: var(--font-body); font-size: 1.5rem; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.ss-copyright { font-family: var(--font-body); font-size: 1.4rem; font-weight: 400; letter-spacing: 0; }
.header-main-nav a,
.header-social a,
.btn,
button,
input[type="submit"] {
font-family: var(--font-body);
font-weight: 700;
}
.header-main-nav a { font-size: 1.4rem; letter-spacing: .04em; }
.btn, button, input[type="submit"] { font-size: 1.35rem; line-height: 1.25; letter-spacing: .08em; }
@media screen and (max-width: 700px) {
:root { --text-body: 1.6rem; --text-lead: 1.8rem; --heading-1: 4.2rem; --heading-2: 3.3rem; --heading-3: 2.5rem; }
.section-heading, .section-heading.section-heading--centerbottom { margin-bottom: 2rem; }
.intro-text h3 { font-size: 1.5rem; letter-spacing: .07em; }
p.lead, .about-me__text p.lead { font-size: 1.9rem; }
.item-title, .item-service .item-title, .local-service-card h3, .process-step h3, .package-card h3, .nj-form-copy h3, .package-help h3 { font-size: 2.4rem; }
.testimonials .testimonial-card > p { font-size: 2rem; }
.package-price { font-size: 4.3rem; }
.faq-wrap h2, .package-modal h2 { font-size: 3rem; }
}
/* Final mobile viewport and sticky-header safeguards */
@media screen and (max-width: 800px) {
html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; }
.s-header, .s-header.sticky { top: 0; width: 100%; height: 9.2rem; overflow: visible; }
.header-logo, .s-header.sticky .header-logo {
top: 50%; left: 50%; width: 17.5rem; height: 6.4rem; margin: 0; padding: .4rem 0;
overflow: visible; line-height: 0; transform: translate(-50%, -50%);
}
.header-logo a, .s-header.sticky .header-logo a {
display: flex; width: 17.5rem; height: 5.6rem; align-items: center; justify-content: center; overflow: visible;
}
.header-logo img, .s-header.sticky .header-logo img {
display: block; width: 17.5rem; height: 5.45rem; max-width: none; max-height: none;
object-fit: contain; object-position: center;
}
.header-menu-toggle { top: 2.5rem; right: 1.6rem; }
.header-nav-wrap { max-width: 100vw; padding-top: 11rem; overflow-x: hidden; }
.intro-content { padding-top: 14rem; }
section, footer, .row, [class*="block-"], .packages-grid, .process-grid,
.services-list, .local-service-grid, .testimonials, .nj-form-wrap,
.column, .package-card, .process-step, .local-service-card,
.testimonials__slide, .testimonial-card, .nj-contact-form {
min-width: 0; max-width: 100%; box-sizing: border-box;
}
section, footer { overflow-x: hidden; }
img, svg { max-width: 100%; }
[data-aos] { max-width: 100%; }
.package-modal { width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
}
@media screen and (max-width: 700px) {
.heading-block, .heading-block--center, .testimonial-heading,
.s-packages .heading-block, .s-process .heading-block,
.section-heading, .section-heading.section-heading--centerbottom,
.section-desc, .s-packages .section-desc, .s-process .section-desc,
.testimonial-heading .section-desc {
margin-left: 0; margin-right: 0; text-align: left;
}
.section-heading::before, .section-heading--centerbottom::before {
right: auto; left: 0; margin-left: 0;
}
}
@media screen and (max-width: 380px) {
.header-logo, .s-header.sticky .header-logo,
.header-logo a, .s-header.sticky .header-logo a,
.header-logo img, .s-header.sticky .header-logo img { width: 16rem; }
.header-menu-toggle { right: .8rem; }
}