/* ========================================================= SK STUDIO MAIN STYLESHEET ========================================================= */ /* ========================================================= VARIABLES ========================================================= */ :root { --green: #00e686; --green-dark: #00b96b; --mint: #e8fff5; --black: #0a0d0c; --white: #ffffff; --pad: clamp(20px, 3vw, 48px); --border: 1px solid rgba(10, 13, 12, .15); --dark-border: 1px solid rgba(232, 255, 245, .18); --ease: cubic-bezier(.22, 1, .36, 1); } /* ========================================================= RESET ========================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--mint); } body { background: var(--mint); color: var(--black); font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.2; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font-family: inherit; } ::selection { background: var(--green); color: var(--black); } .container { width: 100%; padding-left: var(--pad); padding-right: var(--pad); } .mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; } 

/* ========================================================= HEADER ========================================================= */ header { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 24px var(--pad); } .logo { font-size: clamp(24px, 2.1vw, 32px); font-weight: 600; letter-spacing: -.035em; line-height: 1; white-space: nowrap; } nav { display: flex; align-items: center; gap: 26px; } nav a { position: relative; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; } nav a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px; background: var(--black); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); } nav a:hover::after { transform: scaleX(1); transform-origin: left; } 
/* ========================================================= HERO ========================================================= */ 
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 150px; padding-bottom: 40px; } .hero-intro-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 55px; } .hero-intro { max-width: 390px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.4; letter-spacing: -.015em; } .hero-location { text-align: right; font-size: 14px; line-height: 1.45; } .hero-title { font-size: clamp(64px, 11.5vw, 175px); font-weight: 550; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; } .hero-title .line { display: block; opacity: 0; transform: translateY(50px); animation: heroReveal 1s var(--ease) forwards; } .hero-title .line:nth-child(2) { animation-delay: .08s; } .hero-title .line:nth-child(3) { animation-delay: .16s; } .hero-title .accent { display: inline-block; color: var(--green-dark); } @keyframes heroReveal { to { opacity: 1; transform: translateY(0); } } .hero-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 48px; } .hero-services { display: flex; gap: 9px; font-size: 11px; text-transform: uppercase; } .hero-services span:not(:last-child)::after { content: "/"; margin-left: 9px; opacity: .35; } .scroll-indicator { display: flex; align-items: center; gap: 9px; font-size: 10px; text-transform: uppercase; } .scroll-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; } /* ========================================================= SECTION LABEL ========================================================= */ .section-label { display: flex; align-items: flex-start; justify-content: space-between; padding-top: 16px; border-top: var(--border); margin-bottom: 70px; } .section-label h2 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; } .section-label span { font-size: 10px; } 

/* ========================================================= ABOUT ========================================================= */ 
.about { padding-top: 160px; padding-bottom: 150px; } .about-grid { display: grid; grid-template-columns: minmax(150px, .65fr) minmax(300px, 1.35fr); gap: 40px; } .about-statement { max-width: 1000px; font-size: clamp(32px, 4.6vw, 68px); font-weight: 450; line-height: 1.03; letter-spacing: -.025em; } .about-statement span { color: var(--green-dark); } .about-copy { max-width: 470px; margin-top: 65px; font-size: 16px; line-height: 1.55; color: rgba(10, 13, 12, .72); }

/* ========================================================= SERVICES ========================================================= */ .services { padding-top: 150px; padding-bottom: 170px; background: var(--black); color: var(--mint); } .services .section-label { border-color: rgba(232, 255, 245, .18); } .services-heading { max-width: 900px; margin-bottom: 90px; } .services-heading h2 { font-size: clamp(40px, 5.8vw, 80px); font-weight: 450; line-height: 1; letter-spacing: -.03em; } .services-heading h2 span { color: var(--green); } .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: var(--dark-border); border-left: var(--dark-border); } .service-card { min-height: 390px; padding: 24px; border-right: var(--dark-border); border-bottom: var(--dark-border); display: flex; flex-direction: column; } .service-number { color: var(--green); font-size: 11px; margin-bottom: auto; } .service-card h3 { font-size: clamp(30px, 3.3vw, 50px); font-weight: 450; line-height: 1; letter-spacing: -.025em; margin-bottom: 22px; } .service-card p { max-width: 420px; font-size: 14px; line-height: 1.55; color: rgba(232, 255, 245, .65); margin-bottom: 30px; } .service-card a { align-self: flex-start; color: var(--green); font-size: 11px; text-transform: uppercase; } .service-card a:hover { text-decoration: underline; } 

/* ========================================================= WORK ========================================================= */ 

.work { padding-top: 160px; padding-bottom: 170px; background: #ffffff;} .work-heading { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 16px; border-top: var(--border); margin-bottom: 65px; } .background: #dff8eb; .work-heading h2 { font-size: clamp(42px, 5vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -.025em; } .work-count { font-size: 10px; text-transform: uppercase; } 

/* ========================================================= PROJECT GRID ========================================================= */ .projects-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .project { min-width: 0; transition: transform .5s var(--ease); } .project:hover { transform: translateY(-5px); } 


/* ========================================================= PROJECT VISUAL ========================================================= */
.project-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin-bottom: 20px;

    background: #dff8eb;

    text-decoration: none;
}

/* =========================================================
   BROWSER PREVIEW
========================================================= */

.browser-preview {
    position: relative;
    width: 82%;
    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 18px 45px rgba(10, 13, 12, .16);

    transform: translateY(8px);
    transition:
        transform .6s var(--ease),
        box-shadow .6s var(--ease);
}


/* =========================================================
   BROWSER BAR
========================================================= */

.browser-bar {
    display: flex;
    align-items: center;
    gap: 5px;

    height: 24px;
    padding: 0 9px;

    background: #f2f2f2;
    border-bottom: 1px solid rgba(10, 13, 12, .08);
}

.browser-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(10, 13, 12, .28);
}


/* =========================================================
   WEBSITE SCREEN
========================================================= */

.browser-screen {
    position: relative;
    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;
    background: #ffffff;
}

.project-image {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    transition: transform .8s var(--ease);
}


/* =========================================================
   HOVER
========================================================= */

.project:hover .browser-preview {
    transform: translateY(-4px) scale(1.025);

    box-shadow:
        0 24px 55px rgba(10, 13, 12, .20);
}

.project:hover .project-image {
    transform: scale(1.025);
}


/* =========================================================
   PROJECT OVERLAY
========================================================= */

.project-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    padding: 18px;

    background: rgba(10, 13, 12, .08);

    opacity: 0;

    transition: opacity .4s var(--ease);
}

.project:hover .project-overlay {
    opacity: 1;
}

.project-overlay span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 10px 13px;

    background: var(--black);
    color: var(--mint);

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* =========================================================PROJECT INFORMATION ========================================================= */ 
.project-header { display: grid; grid-template-columns: 35px 1fr auto; align-items: baseline; gap: 10px; margin-bottom: 13px; } .project-number { font-size: 10px; color: rgba(10, 13, 12, .55); } .project-name { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .015em; } .project-type { font-size: 9px; text-align: right; text-transform: uppercase; color: rgba(10, 13, 12, .5); } .project-title { font-size: clamp(22px, 2vw, 30px); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 12px; } .project-description { max-width: 350px; font-size: 13px; line-height: 1.5; color: rgba(10, 13, 12, .62); } .project-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .project-link span { transition: transform .35s var(--ease); } .project-link:hover span { transform: translate(4px, -3px); } 

/* ========================================================= PRICING ========================================================= */ .pricing { padding-top: 150px; padding-bottom: 170px; background: #dffff0; } .pricing-heading { max-width: 900px; margin-bottom: 80px; } .pricing-heading h2 { font-size: clamp(40px, 5.8vw, 80px); font-weight: 450; line-height: 1; letter-spacing: -.025em; } .pricing-heading h2 span { color: var(--green-dark); } .pricing-heading p { max-width: 570px; margin-top: 30px; font-size: 15px; line-height: 1.55; color: rgba(10, 13, 12, .65); } /* ========================================================= PRICING CARDS ========================================================= */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); 
	gap: 15px; } .price-card { min-height: 560px; padding: 28px; display: flex; flex-direction: column; background: var(--white); color: var(--black); border: var(--border); } .price-top { margin-bottom: 80px; font-size: 10px; letter-spacing: .07em; color: var(--green-dark); } .price-card h3 { font-size: clamp(28px, 3vw, 43px); font-weight: 450; line-height: 1; letter-spacing: -.025em; margin-bottom: 25px; } .price { font-size: clamp(42px, 5vw, 68px); font-weight: 500; letter-spacing: -.035em; margin-bottom: 25px; } .price span { font-size: 18px; letter-spacing: 0; } .price-card > p { max-width: 350px; font-size: 14px; line-height: 1.5; color: rgba(10, 13, 12, .65); margin-bottom: 30px; } .price-card ul { list-style: none; display: grid; gap: 10px; font-size: 13px; line-height: 1.4; } .price-button { display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: auto; background: var(--black); color: var(--mint); font-size: 11px; text-transform: uppercase; transition: background .3s ease, color .3s ease; } .price-button:hover { background: var(--green); color: var(--black); } 

/* ========================================================= EXTRA SERVICES ========================================================= */ .extra-services { display: grid; grid-template-columns: 1fr 1fr; margin-top: 15px; border-top: var(--border); border-bottom: var(--border); } .extra-services div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 13px; } .extra-services div + div { padding-left: 25px; border-left: var(--border); } .extra-services span { color: rgba(10, 13, 12, .55); } 

/* ========================================================= CONTACT ========================================================= */ .contact { padding-top: 150px; padding-bottom: 120px; background: var(--green); } .contact-heading { max-width: 1100px; margin-bottom: 90px; } .contact-heading h2 { font-size: clamp(48px, 7vw, 105px); font-weight: 550; line-height: .98; letter-spacing: -.025em; } .contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding-top: 35px; border-top: 1px solid rgba(10, 13, 12, .25); } .contact-intro { max-width: 380px; font-size: 18px; line-height: 1.45; letter-spacing: -.015em; } .contact-email { display: inline-block; margin-top: 35px; font-size: 20px; text-decoration: underline; text-underline-offset: 5px; } 

/* ========================================================= CONTACT FORM ========================================================= */ .contact-form { display: grid; gap: 18px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; } .field input, .field textarea, .field select { width: 100%; padding: 17px 0; border: none; border-bottom: 1px solid rgba(10, 13, 12, .35); outline: none; background: transparent; color: var(--black); font-size: 15px; border-radius: 0; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--black); } .field textarea { min-height: 130px; resize: vertical; } .submit-button { width: 100%; min-height: 58px; margin-top: 10px; border: 1px solid var(--black); background: var(--black); color: var(--mint); cursor: pointer; font-size: 11px; text-transform: uppercase; transition: background .3s ease, color .3s ease; } .submit-button:hover { background: transparent; color: var(--black); } .form-message { display: none; font-size: 13px; line-height: 1.4; } 

/* ========================================================= FOOTER ========================================================= */ footer { display: flex; align-items: center; justify-content: space-between; padding: 22px var(--pad); background: var(--black); color: var(--mint); font-size: 10px; text-transform: uppercase; } 

/* ========================================================= SCROLL REVEALS ========================================================= */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.visible { opacity: 1; transform: translateY(0); } 

/* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { nav { gap: 16px; } nav a { font-size: 9px; } .about-grid { grid-template-columns: 1fr; } .about-copy { margin-top: 20px; } .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project:last-child { grid-column: 1 / -1; width: calc(50% - 9px); } .pricing-grid { grid-template-columns: 1fr; } } 

/* ========================================================= MOBILE ========================================================= */ 
@media (max-width: 650px) { :root { --pad: 18px; } header { padding-top: 18px; } .logo { font-size: 22px; } nav { gap: 11px; } nav a { font-size: 12px; } /* HERO */ .hero { min-height: 92svh; padding-top: 130px; } .hero-intro-row { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 45px; } .hero-location { text-align: left; } .hero-title { font-size: clamp(54px, 15vw, 95px); line-height: .94; } .hero-bottom { align-items: flex-start; flex-direction: column; gap: 25px; } .scroll-indicator { display: none; } /* ABOUT */ .about { padding-top: 100px; padding-bottom: 100px; } .about-statement { font-size: clamp(34px, 9vw, 58px); } /* SERVICES */ .services { padding-top: 100px; padding-bottom: 100px; } .services-grid { grid-template-columns: 1fr; } .service-card { min-height: 320px; } 
	
	/* WORK */ 
	
	.work { padding-top: 100px; padding-bottom: 100px; } .work-heading { margin-bottom: 45px; } .work-heading h2 { font-size: 46px; } .projects-grid { grid-template-columns: 1fr; gap: 60px; } .project:last-child { grid-column: auto; width: 100%; } .project-visual { aspect-ratio: 4 / 3; } /* Touch devices don't have hover, so keep the visual clean. */ .project-overlay { display: none; } /* PRICING */ .pricing { padding-top: 100px; padding-bottom: 100px; } .price-card { min-height: 500px; } .extra-services { grid-template-columns: 1fr; } .extra-services div + div { padding-left: 0; border-left: none; border-top: var(--border); } /* CONTACT */ .contact { padding-top: 100px; padding-bottom: 80px; } .contact-heading { margin-bottom: 65px; } .contact-heading h2 { font-size: clamp(52px, 13vw, 90px); } .contact-grid { grid-template-columns: 1fr; gap: 60px; } .form-row { grid-template-columns: 1fr; } /* FOOTER */ footer { align-items: flex-start; flex-direction: column; gap: 12px; } }

.services,
.work {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

.services *,
.work * {
    visibility: visible !important;
    opacity: 1 !important;
}

.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}