@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Forum&family=Lobster&family=Open+Sans+Condensed:wght@300;700&family=Signika:wght@400;700&family=Varela+Round&display=swap'); :root { --blue: #0099FF; --yellow: #FFDB4C; --dark-navy: #003254; --near-white: #F3F3F3; --dark-grey: #4A4A4A; --medium-grey: #717070; --light-grey: #AAA8A8; --cream: #FFEEAA; --pale-yellow: #FFE680; --cta-gold: #FFE680; --highlight: #FFCC00; --white: #FFFFFF; --black: #000000; --font-heading: 'Amatic SC', cursive; --font-body: 'Forum', Arial, Helvetica, sans-serif; --font-special: 'Lobster', cursive; --font-footer: 'Amatic SC', 'Nimbus Sans TW01 Con', Helvetica, sans-serif; --font-button: 'Amatic SC', cursive; --container-width: 980px; --header-height: 76px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { /* the off-canvas mobile nav is parked at right:-300px, which would otherwise widen the page and allow sideways scrolling. Kept off so it does not turn the root into a fixed-height scroll container. */ overflow-x: hidden; font-family: var(--font-body); font-size: 18px; color: var(--near-white); background: var(--blue); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; cursor: pointer; } img { max-width: 100%; height: auto; } .container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; } /* ====== HEADER ====== */ /* Header matches the original: logo centred on its own row, with the nav bar centred directly beneath it (logo 170x76 at y=0, nav y=87 h=65). */ .site-header { background: var(--blue); padding: 0; position: relative; z-index: 100; } .header-inner { max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; } .logo img { width: 170px; height: 76px; display: block; } /* Hamburger Menu */ .hamburger { display: none; flex-direction: column; cursor: pointer; background: none; border: none; padding: 8px; gap: 5px; } .hamburger span { display: block; width: 28px; height: 3px; background: var(--near-white); border-radius: 2px; transition: all 0.3s ease; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); } /* ====== NAVIGATION ====== */ .main-nav { display: flex; justify-content: center; margin-top: 11px; width: var(--container-width); max-width: 100%; } .main-nav a { flex: 1 1 auto; justify-content: center; font-family: var(--font-heading); font-size: 28px; font-weight: 400; color: var(--white); height: 65px; display: flex; align-items: center; padding: 0 27px; border-left: 1px solid rgba(255, 255, 255, 0.45); transition: color 0.3s ease; white-space: nowrap; } .main-nav a:first-child { border-left: none; } .main-nav a:hover { color: var(--yellow); } /* Active item is a solid yellow block with dark blue text */ .main-nav a.active { color: #0065a9; background: var(--yellow); } .mobile-nav-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 200; } .mobile-nav { position: fixed; top: 0; right: -300px; width: 280px; height: 100%; background: var(--blue); z-index: 201; overflow-y: auto; transition: right 0.3s ease; padding: 80px 20px 20px; } .mobile-nav.open { right: 0; } .mobile-nav a { display: block; font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--near-white); padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-nav a:hover { color: var(--yellow); } /* the original's mobile menu marks the current page in yellow */ .mobile-nav a.active { color: var(--yellow); } .mobile-nav-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: var(--near-white); font-size: 32px; cursor: pointer; } /* ====== BUTTONS (Wix Replica) ====== */ .wix-button { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-button); font-size: 35px; font-weight: 400; color: var(--dark-navy); background: var(--yellow); padding: 0 30px; height: 80px; min-width: 200px; text-align: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); border: none; cursor: pointer; transition: background-color 0.4s ease, color 0.4s ease; line-height: 1.4; } .wix-button:hover { background: var(--cream); color: var(--dark-navy); } .wix-button.small { height: 74px; } .wix-button.outline { background: transparent; color: var(--near-white); border: 2px solid var(--near-white); box-shadow: none; font-family: var(--font-heading); font-size: 28px; font-weight: 700; height: 60px; } .wix-button.outline:hover { background: var(--near-white); color: var(--blue); } /* ====== LANDING PAGE ====== */ /* Splash geometry from the original at 1440x900: buttons 386x80 at x=261 y=175 (26px apart), heading at x=726 y=255. */ .landing-page { min-height: 100vh; display: flex; align-items: flex-start; padding: 175px 20px 40px; } .landing-content { max-width: var(--container-width); margin: 0 auto; width: 100%; display: flex; flex-wrap: wrap; gap: 79px; padding-left: 31px; } .landing-buttons { flex: 0 0 386px; display: flex; flex-direction: column; gap: 26px; padding-top: 0; } .landing-buttons .wix-button { width: 100%; } .landing-buttons .wix-button:first-child { animation: slideReveal 1.15s 0.4s both; } .landing-buttons .wix-button:nth-child(2) { animation: slideReveal 1.05s 0.8s both; } .landing-buttons .wix-button:nth-child(3) { animation: slideReveal 1s 1s both; } .landing-heading { flex: 1; min-width: 280px; display: flex; align-items: flex-start; padding-top: 80px; } .landing-heading h1 { font-family: var(--font-heading); font-size: 66px; font-weight: 700; color: var(--near-white); line-height: 1.25; white-space: nowrap; } @keyframes slideReveal { from { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } to { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } } /* ====== HOME PAGE (/home) ====== */ /* Home geometry from the original: hero 856x321 at y=193, buttons 248x64 at y=565 with a 75px gap, footer starting at y=692. */ .home-page { display: flex; align-items: flex-start; justify-content: center; text-align: center; padding-top: 41px; } .home-page .home-content { display: flex; flex-direction: column; align-items: center; gap: 51px; max-width: 1100px; width: 100%; padding: 0 40px; } .home-page .home-hero-img { width: 856px; max-width: 100%; height: auto; } .home-page .home-buttons { display: flex; gap: 75px; flex-wrap: wrap; justify-content: center; margin-bottom: 63px; } .home-page .home-buttons .wix-button { width: 248px; min-width: 0; height: 64px; } /* ====== PAGE HEADER ====== */ .page-header { padding: 35px 0 25px; text-align: center; background: var(--blue); } .page-header h1 { font-family: var(--font-heading); font-size: 45px; font-weight: 400; color: var(--near-white); } .page-header h1 .gold, .page-header .subtitle .gold { color: var(--yellow); } .page-header-gold h1 { color: var(--yellow); } .page-header .subtitle { font-family: var(--font-body); font-size: 16px; font-weight: bold; color: var(--near-white); margin-top: 10px; opacity: 0.9; } /* ====== CONTENT PAGES ====== */ /* Content pages sit on a 980px-wide tinted panel that starts at the top of the nav bar and runs to the bottom of the content, as on the original. */ .content-page { padding-bottom: 60px; background: rgba(0, 101, 169, 0.4); max-width: var(--container-width); margin: 0 auto; } body.has-panel .main-nav { background: rgba(0, 101, 169, 0.4); } .content-section { max-width: 800px; margin: 0 auto; padding: 30px 20px; } .content-section h2 { font-family: var(--font-heading); font-size: 30px; font-weight: 400; color: var(--yellow); margin-bottom: 20px; } .content-section h3 { font-family: var(--font-heading); font-size: 24px; font-weight: 400; color: var(--near-white); margin: 30px 0 15px; } .content-section p { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--near-white); margin-bottom: 15px; } .body-text p { font-size: 18px; line-height: 1.8; margin-bottom: 24px; text-align: center; } .body-text strong { color: var(--yellow); font-weight: 700; } .body-text a { color: var(--near-white); text-decoration: none; font-weight: 700; } .body-text a:hover { color: var(--yellow); } .content-section .service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 30px 0; } @media (max-width: 768px) { .content-section .service-grid { grid-template-columns: 1fr; } } .content-section .service-card { background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 25px; } .content-section .service-card h3 { font-family: var(--font-heading); font-size: 32px; color: var(--yellow); margin-top: 0; } .content-section .service-card p { font-size: 14px; margin-bottom: 0; } .content-section .cta-section { text-align: center; padding: 40px 0; } .content-section .cta-section p { font-family: var(--font-heading); font-size: 30px; font-weight: 400; color: var(--cream); margin-bottom: 20px; } /* ====== TEAM PAGE ====== */ .team-member { margin-bottom: 40px; } .team-member h2 { color: var(--yellow); margin-bottom: 5px; } .team-member .role { font-family: var(--font-heading); font-size: 22px; color: var(--near-white); margin-bottom: 15px; opacity: 0.8; } .team-member p { line-height: 1.7; } /* ====== CONTACT PAGE ====== */ .contact-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1100px; margin: 0 auto; padding: 20px 20px 40px; } .contact-left { display: flex; flex-direction: column; gap: 20px; } .contact-map { border-radius: 0; overflow: hidden; } .contact-map iframe { display: block; width: 100%; height: 250px; } .contact-methods { display: flex; flex-direction: column; gap: 15px; padding: 10px 0; } .contact-method { display: flex; align-items: center; gap: 15px; } .contact-icon { font-size: 32px; color: var(--near-white); width: 40px; text-align: center; } .contact-method p { font-size: 16px; color: var(--near-white); margin-bottom: 4px; } .contact-right { display: flex; flex-direction: column; gap: 30px; } .contact-form { background: none; border-radius: 0; padding: 0; margin: 0; max-width: none; } .contact-form label { display: block; font-family: var(--font-body); font-size: 14px; color: var(--near-white); margin-bottom: 4px; font-weight: normal; } .contact-form input, .contact-form textarea { width: 100%; padding: 10px 14px; margin-bottom: 14px; border: none; border-radius: 0; font-family: var(--font-body); font-size: 14px; background: var(--dark-navy); color: var(--near-white); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: transparent; } .contact-form textarea { height: 140px; resize: vertical; } .contact-form button { font-family: var(--font-button); font-size: 28px; color: var(--dark-navy); background: var(--yellow); border: none; padding: 10px 40px; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); transition: background 0.3s; display: block; margin: 0 auto; } .contact-form button:hover { background: var(--cream); } .contact-offices { display: flex; flex-direction: column; gap: 20px; } .contact-office { display: flex; align-items: flex-start; gap: 15px; } .office-icon { font-size: 28px; color: var(--near-white); width: 30px; text-align: center; flex-shrink: 0; } .contact-office h3 { font-family: var(--font-heading); font-size: 22px; color: var(--near-white); margin-bottom: 5px; font-weight: 400; } .contact-office p { font-size: 15px; line-height: 1.6; margin-bottom: 0; } @media (max-width: 768px) { .contact-two-col { grid-template-columns: 1fr; } } .form-success { display: none; font-family: var(--font-heading); font-size: 24px; color: var(--near-white); margin: 20px 0; } /* ====== WORK FOR US ====== */ .questions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0; } @media (max-width: 600px) { .questions-grid { grid-template-columns: 1fr; } } .question-item { font-family: var(--font-heading); font-size: 28px; color: var(--yellow); padding: 15px; background: rgba(255, 255, 255, 0.05); border-radius: 6px; } .question-item::before { content: '? '; } /* ====== PORTFOLIO PAGES ====== */ .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin: 30px 0; } .portfolio-item { background: rgba(255, 255, 255, 0.1); border-radius: 6px; overflow: hidden; text-align: center; padding: 15px; } .portfolio-item img { width: 100%; height: 180px; object-fit: cover; border-radius: 4px; } .portfolio-item p { margin-top: 10px; font-size: 14px; font-weight: bold; } /* ====== FOOTER ====== */ /* Footer sits in normal flow (not pinned) with three columns: social icons left, Webmaster Login centred, copyright right — as on the original. */ .site-footer { background: var(--blue); padding: 0 0 20px; border-top: none; } .footer-inner { max-width: var(--container-width); margin: 0 auto; padding: 0 6px; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 15px; } .footer-left { display: flex; align-items: center; gap: 12px; } .footer-social img { width: 29px; height: 29px; display: block; transition: opacity 0.3s; } .footer-social:hover img { opacity: 0.8; } .footer-admin { font-family: 'Open Sans Condensed', Arial, sans-serif; font-size: 12px; color: var(--blue); background: transparent; border: none; cursor: pointer; transition: color 0.3s; padding: 4px 8px; } .footer-admin:hover { color: var(--yellow); } .footer-right { text-align: right; } .footer-right p { font-family: 'Signika', Arial, sans-serif; font-size: 13px; color: var(--near-white); line-height: 1.2; } .footer-right a { text-decoration: underline; } .footer-right a:hover { color: var(--yellow); } /* ====== 404 ====== */ .error-page { min-height: calc(100vh - var(--header-height)); display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; } .error-page h1 { font-family: var(--font-heading); font-size: 80px; color: var(--yellow); } .error-page p { font-family: var(--font-heading); font-size: 32px; margin: 20px 0; } /* ====== RESPONSIVE ====== */ @media (max-width: 900px) { .landing-content { flex-direction: column; align-items: center; text-align: center; } .landing-buttons { flex: none; width: 100%; max-width: 400px; padding-top: 30px; } .landing-heading { padding-top: 40px; justify-content: center; } .landing-heading h1 { font-size: 42px; } .hamburger { display: flex; } .main-nav { display: none; } .mobile-nav-overlay.open { display: block; } .header-inner { padding: 0 15px; } .footer-inner { flex-direction: column; text-align: center; } .footer-left { justify-content: center; } .footer-right { text-align: center; } .home-page .home-buttons { flex-direction: column; align-items: center; } } @media (max-width: 480px) { .landing-heading h1 { font-size: 32px; } .wix-button { font-size: 28px; height: 64px; min-width: 160px; } .wix-button.small { height: 58px; } .page-header h1 { font-size: 40px; } .content-section h2 { font-size: 32px; } } /* ====== WHO WE ARE PAGE ====== */ .whoweare-cta { display: flex; align-items: center; justify-content: center; gap: 20px; } .whoweare-cta .cta-arrow { font-size: 28px; color: var(--yellow); } .whoweare-cta .cta-text { font-family: var(--font-button); font-size: 32px; font-weight: 400; color: var(--yellow); } .whoweare-cta .cta-character { width: 150px; } .whoweare-cta .cta-character img { width: 100%; height: auto; } /* ====== LET'S TALK PAGE ====== */ .letstalk-page { padding-bottom: 40px; } .letstalk-intro { font-family: 'Open Sans Condensed', 'Signika', Arial, sans-serif; font-size: 22px; font-weight: 400; color: var(--cream); padding: 38px 0 26px 40px; text-align: left; } .letstalk-container { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1100px; margin: 0 auto; padding: 0 40px; } @media (max-width: 768px) { .letstalk-container { grid-template-columns: 1fr; } } .letstalk-left { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .letstalk-map { border-radius: 0; overflow: hidden; } .letstalk-map iframe { display: block; width: 100%; height: 200px; } .letstalk-contact-info { display: flex; flex-direction: column; gap: 15px; } .letstalk-contact-row { display: flex; align-items: center; gap: 15px; } .letstalk-icon { font-size: 32px; color: var(--near-white); width: 40px; text-align: center; } .letstalk-svg-icon { width: 48px; height: 48px; flex-shrink: 0; } .letstalk-contact-row p { font-family: 'Open Sans Condensed', 'Signika', Arial, sans-serif; font-size: 22px; line-height: 25px; color: var(--cream); margin-bottom: 0; } /* the email line is a touch larger than the phone numbers in the original */ .letstalk-contact-row:last-child p { font-size: 24px; } .letstalk-right { display: flex; flex-direction: column; gap: 30px; } /* The original's form sits directly on the panel: translucent blue fields, no card, no borders, placeholders instead of visible labels. */ .letstalk-form-container { background: transparent; padding: 0; } .letstalk-form { display: flex; flex-direction: column; gap: 4px; } .letstalk-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .letstalk-form input, .letstalk-form textarea { width: 323px; max-width: 100%; height: 29px; padding: 4px 8px; border: none; border-radius: 0; background: rgba(0, 153, 255, 0.32); color: var(--near-white); font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin-bottom: 10px; } .letstalk-form ::placeholder { color: var(--near-white); opacity: 1; } .letstalk-form input:focus, .letstalk-form textarea:focus { outline: 1px solid rgba(243, 243, 243, 0.6); } .letstalk-form textarea { height: 118px; resize: vertical; } .letstalk-submit { width: 135px; height: 25px; align-self: flex-start; margin-left: 188px; padding: 0; background: var(--yellow); color: var(--dark-navy); border: none; border-radius: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; cursor: pointer; transition: background 0.3s; } .letstalk-submit:hover { background: var(--cream); } .letstalk-offices { display: flex; flex-direction: column; gap: 20px; } .letstalk-office { display: flex; align-items: flex-start; gap: 15px; } .letstalk-office-icon { font-size: 28px; color: var(--near-white); width: 30px; text-align: center; flex-shrink: 0; } .letstalk-office-svg { width: 40px; height: 40px; flex-shrink: 0; } .letstalk-office h3 { font-family: 'Open Sans Condensed', 'Signika', Arial, sans-serif; font-size: 22px; line-height: 25px; color: var(--cream); margin-bottom: 0; font-weight: 700; } .letstalk-office p { font-family: 'Open Sans Condensed', 'Signika', Arial, sans-serif; font-size: 22px; line-height: 25px; color: var(--cream); margin-bottom: 0; } /* ====== SOCIAL MEDIA PAGE ====== */ .social-media-page { background: var(--blue); text-align: center; } .sm-header { padding: 40px 20px 20px; } .sm-header h1 { font-family: var(--font-button); font-size: 36px; font-weight: 400; color: var(--cream); line-height: 1.3; } .sm-header .gold { color: var(--yellow); } .sm-hero { max-width: 700px; margin: 0 auto; padding: 20px; } .sm-hero-image { width: 100%; height: auto; display: block; } .sm-thumbs { display: flex; gap: 8px; justify-content: center; margin-top: 10px; } .sm-thumb { width: 80px; height: 50px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.2); } .sm-collaterals { padding: 40px 20px; } .sm-collaterals h2 { font-family: var(--font-button); font-size: 32px; font-weight: 400; color: var(--cream); margin-bottom: 30px; } .sm-tablet-illustration { max-width: 600px; margin: 0 auto; } .sm-tablet-illustration img { width: 100%; height: auto; } .sm-cta { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 30px 20px 50px; } .sm-cta .cta-arrow { font-size: 28px; color: var(--yellow); } .sm-cta .cta-text { font-family: var(--font-button); font-size: 28px; font-weight: 400; color: var(--yellow); } .sm-cta .cta-character { width: 100px; } .sm-cta .cta-character img { width: 100%; height: auto; } /* ====== WORK FOR US PAGE ====== */ .workforus-page { background: var(--blue); text-align: center; } .workforus-header { padding: 30px 20px 20px; display: flex; align-items: center; justify-content: center; gap: 15px; } .workforus-logo-icon { width: 50px; height: auto; } .workforus-header h1 { font-family: var(--font-button); font-size: 32px; font-weight: 700; color: var(--yellow); } .workforus-illustration { max-width: 900px; margin: 0 auto; padding: 20px; position: relative; } .workforus-illustration img { width: 100%; height: auto; display: block; } .speech-bubble { position: absolute; background: #fff; border-radius: 20px; padding: 12px 15px; text-align: center; font-family: 'Amatic SC', cursive; font-size: 14px; font-weight: 700; color: #000; line-height: 1.3; box-shadow: 0 2px 8px rgba(0,0,0,0.15); width: 150px; display: flex; align-items: center; justify-content: center; } .speech-bubble::after { content: ''; position: absolute; width: 0; height: 0; border: 8px solid transparent; } .bubble-1 { top: 2%; left: 45%; } .bubble-1::after { bottom: -16px; left: 50%; transform: translateX(-50%); border-top-color: #fff; } .bubble-2 { top: 15%; left: 2%; } .bubble-2::after { bottom: -16px; right: 20px; border-top-color: #fff; } .bubble-3 { top: 10%; right: 2%; } .bubble-3::after { bottom: -16px; left: 20px; border-top-color: #fff; } .bubble-4 { top: 55%; left: 0; } .bubble-4::after { right: -16px; top: 50%; transform: translateY(-50%); border-left-color: #fff; } .bubble-5 { top: 48%; right: 0; } .bubble-5::after { left: -16px; top: 50%; transform: translateY(-50%); border-right-color: #fff; } @media (max-width: 768px) { .speech-bubble { display: none; } .workforus-illustration { max-width: 100%; } } .workforus-content { padding: 20px 20px 40px; } .workforus-text { font-family: var(--font-heading); font-size: 24px; color: var(--yellow); margin-bottom: 20px; line-height: 1.4; } /* ====== WHAT WE CREATE PAGE ====== */ .what-we-create-page { /* no background here: it would paint over the .content-page tint panel */ } .wwc-header { text-align: center; padding: 40px 20px 20px; } .wwc-header h1 { font-family: var(--font-button); font-size: 36px; font-weight: 400; color: var(--yellow); line-height: 1.3; } .wwc-header .gold { color: var(--yellow); } .wwc-services { max-width: 800px; margin: 0 auto; padding: 20px 20px 40px; } .wwc-service { text-align: center; margin-bottom: 40px; } .wwc-icon { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 15px; } .wwc-service h2 { font-family: var(--font-button); font-size: 28px; font-weight: 700; color: var(--yellow); margin-bottom: 10px; } .wwc-service p { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--near-white); text-align: center; } .wwc-cta { text-align: center; padding: 20px 0 40px; } .wwc-cta-illustration { display: inline-block; } .wwc-cta-illustration img { max-width: 300px; height: auto; } /* ====== OUR WORK PAGE ====== */ .our-work-page { /* no background here: it would paint over the .content-page tint panel */ } /* Scoped under .content-section so these beat `.content-section p`, which is more specific than a bare class and was silently pulling the body font in. Sizes and colours are the original's: 45px heading, 22px yellow subheading, both Amatic SC. */ .content-section .our-work-header { font-family: var(--font-button); font-size: 45px; font-weight: 400; color: var(--yellow); margin-bottom: 10px; } .content-section .our-work-subheader { font-family: var(--font-button); font-size: 22px; font-weight: 400; color: var(--yellow); text-transform: none; letter-spacing: normal; } /* The form sits directly on the blue, not on a white card, and the title is a light rounded sans rather than the body face. */ .portfolio-form-container { max-width: 600px; margin: 40px auto 0; text-align: left; background: transparent; padding: 0; border-radius: 0; box-shadow: none; } .content-section .portfolio-form-title { font-family: 'Varela Round', Arial, Helvetica, sans-serif; font-size: 45px; font-weight: 400; color: var(--near-white); border-bottom: 2px solid rgba(243, 243, 243, 0.85); padding-bottom: 14px; margin-bottom: 22px; } .portfolio-form { display: flex; flex-direction: column; gap: 4px; } .portfolio-form label { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: var(--near-white); margin-bottom: 4px; } .portfolio-form .required { color: #ff4444; } .portfolio-form input, .portfolio-form select, .portfolio-form textarea { width: 100%; padding: 4px 8px; border: none; border-radius: 0; background: rgba(0, 153, 255, 0.32); color: var(--near-white); font-family: var(--font-body); font-size: 14px; margin-bottom: 12px; } .portfolio-form input:focus, .portfolio-form select:focus, .portfolio-form textarea:focus { outline: none; border-color: #999; } .portfolio-form textarea { height: 100px; resize: vertical; } .portfolio-form .submit-btn { width: 100%; padding: 14px; background: #2CB1BC; color: var(--white); border: none; border-radius: 2px; font-family: var(--font-body); font-size: 16px; cursor: pointer; margin-top: 8px; transition: background 0.3s; } .portfolio-form .submit-btn:hover { background: #25a0aa; } /* ====== QUOTE FORM ====== */ .quote-page { /* no background here: it would paint over the .content-page tint panel */ } .quote-header { font-family: var(--font-button); font-size: 32px; font-weight: 400; color: var(--yellow); margin-bottom: 30px; line-height: 1.4; } .quote-form-container { max-width: 600px; margin: 0 auto; text-align: left; background: var(--white); padding: 30px 40px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .quote-form-title { font-family: var(--font-body); font-size: 24px; font-weight: 400; color: #333; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 20px; } .quote-form { display: flex; flex-direction: column; gap: 4px; } .quote-form label { font-family: var(--font-body); font-size: 14px; color: #333; margin-bottom: 4px; font-weight: 600; } .quote-form .required { color: #ff4444; } .quote-form .name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .quote-form input, .quote-form select, .quote-form textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 2px; background: #f8f8f8; color: #333; font-family: var(--font-body); font-size: 14px; margin-bottom: 12px; } .quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { outline: none; border-color: #999; } .quote-form textarea { height: 100px; resize: vertical; } .quote-form .field-hint { font-size: 12px; color: #777; margin-bottom: 4px; margin-top: -8px; } .quote-form .budget-row { display: flex; align-items: center; margin-bottom: 12px; } .quote-form .currency-prefix { padding: 10px 12px; border: 1px solid #ddd; border-right: none; background: #f0f0f0; color: #333; font-size: 14px; } /* Currency is a select joined to the amount field, so the two read as one control. Width is fixed so INR and AED do not shift the amount field. */ .quote-form .budget-row { align-items: stretch; margin-bottom: 14px; } .quote-form select.currency-prefix { flex: 0 0 76px; width: 76px; margin-bottom: 0; padding: 10px 8px 10px 12px; border: 1px solid rgba(255, 255, 255, 0.55); border-right: none; border-radius: 2px 0 0 2px; background: rgba(0, 50, 84, 0.42); color: var(--white); font-family: Arial, Helvetica, sans-serif; font-size: 15px; cursor: pointer; } .quote-form .budget-row input { margin-bottom: 0; border-radius: 0 2px 2px 0; } .quote-form .budget-row input { flex: 1; margin-bottom: 0; } .quote-form .submit-btn { width: 100%; padding: 14px; background: #2CB1BC; color: var(--white); border: none; border-radius: 2px; font-family: var(--font-body); font-size: 16px; cursor: pointer; margin-top: 8px; transition: background 0.3s; } .quote-form .submit-btn:hover { background: #25a0aa; } /* ====== WEBSITES PAGE ====== */ .websites-page { min-height: calc(100vh - var(--header-height)); background: var(--blue); } .websites-content { max-width: 900px; margin: 0 auto; padding: 40px 20px; text-align: center; } .websites-instruction { font-family: var(--font-button); font-size: 36px; font-weight: 400; color: var(--yellow); margin-bottom: 40px; line-height: 1.4; } .laptop-mockup { margin: 0 auto 60px; max-width: 600px; } .laptop-mockup img { width: 100%; height: auto; display: block; } .websites-cta { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; } .cta-arrow { font-size: 28px; color: var(--yellow); } .cta-text { font-family: var(--font-button); font-size: 32px; font-weight: 400; color: var(--yellow); } .cta-character { width: 120px; } .cta-character img { width: 100%; height: auto; } /* ====== SCROLL TO TOP ====== */ .scroll-to-top { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.2); border: none; color: var(--near-white); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 20px; display: none; align-items: center; justify-content: center; transition: background 0.3s; z-index: 50; } .scroll-to-top.visible { display: flex; } .scroll-to-top:hover { background: rgba(255, 255, 255, 0.3); } /* ====== GRAPHIC DESIGN PAGE ====== */ .gd-hero-img { display: none; } .gd-hero-img.active { display: block; } .gd-hero-thumb.active { border-color: var(--yellow) !important; } .gd-carousel-btn:hover { background: rgba(0,0,0,0.6) !important; } /* ====== BRAND IDENTITY PAGE ====== */ .bi-hero-img { display: none; } .bi-hero-img.active { display: block; } /* ====== ANIMATION PAGE ====== */ .anim-hero-img { display: none; } .anim-hero-img.active { display: block; } /* ====== OUR VIDEOS PAGE ====== */ .vid-hero-img { display: none; } .vid-hero-img.active { display: block; } /* ====== WHAT WE CREATE ====== */ /* Geometry taken from the original: title 45px at y=190, service icons 148px square, section titles 30px, body copy 18px centred on an ~800px measure. */ .wwc-inner { padding: 38px 0 0; } .wwc-title { font-family: var(--font-heading); font-size: 45px; font-weight: 700; color: var(--yellow); line-height: 1.27; max-width: 580px; margin: 0 auto; } .svc { text-align: center; margin-top: 31px; } .svc img { width: 148px; height: 148px; display: block; margin: 0 auto; } .svc h2 { font-family: var(--font-heading); font-size: 30px; font-weight: 700; color: var(--yellow); line-height: 1.23; } .svc p { font-family: 'Open Sans Condensed', 'Signika', Arial, sans-serif; font-size: 18px; line-height: 21px; color: var(--cream); max-width: 800px; margin: 27px auto 0; } /* Shared CTA row. Geometry from the original at 1440px: arrow 41x27, label Amatic SC 30px #FFE680, sign 160x72 #FFDB4C rotated -9deg with Amatic SC 35px #003254, character 128x215 tucked under the sign so the sign covers the swatter head. Offsets are measured from the sign's top edge. */ .cta-row { display: flex; align-items: flex-start; justify-content: center; padding-top: 30px; } .cta-arrow { width: 41px; height: 27px; margin-top: 33px; } .cta-label { font-family: var(--font-heading); font-size: 30px; color: var(--pale-yellow); line-height: 37px; margin: 28px 0 0 9px; white-space: nowrap; } .cta-sign { width: 160px; height: 72px; flex: 0 0 160px; display: flex; align-items: center; justify-content: center; background: var(--yellow); color: var(--dark-navy); font-family: var(--font-heading); font-size: 35px; transform: rotate(-9deg); margin-left: 31px; position: relative; z-index: 2; } .cta-character { width: 128px; height: 215px; margin: 14px 0 0 -81px; position: relative; z-index: 1; } /* The original does not centre these rows: on Who We Are the group sits hard to the right of the panel, on What We Create just right of centre. */ .cta-row.cta-right { justify-content: flex-end; padding-right: 9px; } .cta-row.cta-nudge { padding-left: 76px; } /* ====== WHO STARTED IT ====== */ /* Original geometry: title 48px at y=190; founder photo ~92x162 at x=300, name at x=407, bio justified on a 728px measure starting at x=414. */ .wsi-inner { padding: 38px 0 0; } .wsi-title { font-family: var(--font-heading); font-size: 48px; font-weight: 700; color: var(--yellow); text-align: center; line-height: 1.27; } .founder { display: flex; gap: 22px; padding: 0 68px 0 70px; margin-top: 62px; } .founder-photo { width: 92px; height: 162px; object-fit: cover; flex-shrink: 0; display: block; } .founder-body { flex: 1; } .founder-body h2 { font-family: var(--font-heading); font-size: 30px; font-weight: 700; color: var(--near-white); line-height: 1.23; } .founder-body h2 .role { font-size: 22px; font-weight: 400; } .founder-body p { font-family: 'Open Sans Condensed', 'Signika', Arial, sans-serif; font-size: 18px; line-height: 21px; color: var(--cream); text-align: justify; margin-top: 2px; } .founder-follow { display: inline-flex; align-items: center; gap: 6px; background: #000; color: #fff; padding: 5px 13px; border-radius: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin-top: 14px; } /* Request a Quote button on Let's Talk — 178x51 in the original */ .letstalk-quote { display: inline-flex; align-items: center; justify-content: center; width: 178px; height: 51px; margin-top: 30px; background: var(--yellow); color: var(--dark-navy); font-family: var(--font-button); font-size: 28px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } /* The CTA row is built from the original's fixed desktop measurements, which are wider than a phone; let it wrap and shed the overlap on small screens. */ @media (max-width: 600px) { .cta-row, .cta-row.cta-right, .cta-row.cta-nudge { flex-wrap: wrap; justify-content: center; padding-left: 10px; padding-right: 10px; } .cta-label { white-space: normal; text-align: center; } .cta-sign { margin-left: 14px; } .cta-character { margin-left: -40px; } } /* ====== MOBILE: match the original's phone layout ====== */ /* The original reflows the splash on phones — heading first, buttons stacked beneath — and drops the CTA character entirely, shrinking the sign. */ @media (max-width: 600px) { .landing-page { min-height: auto; padding: 60px 20px 40px; } .landing-content { flex-direction: column-reverse; align-items: center; gap: 34px; padding-left: 0; } .landing-heading { padding-top: 0; justify-content: center; width: 100%; } .landing-heading h1 { font-size: 40px; white-space: normal; text-align: center; } .landing-buttons { flex: 0 0 auto; width: 311px; max-width: 100%; gap: 24px; } .landing-buttons .wix-button, .landing-buttons .wix-button.small { height: 67px; font-size: 30px; } .cta-character { display: none; } .cta-sign { width: 123px; height: 41px; flex: 0 0 123px; font-size: 26px; margin-left: 14px; } .cta-label { font-size: 24px; line-height: 28px; margin-top: 8px; } .cta-arrow { margin-top: 14px; } } /* Footer: the original sits Webmaster Login right of the container centre and lifts the copyright a few px above the social row. */ .footer-center { transform: translateX(52px); } .footer-right { margin-top: -7px; } /* ====== WHO WE ARE panel ====== */ /* Was inline: content-section 40px/20px plus an inner box at 60px, leaving a ~230px text column on a phone. The inner box is transparent so the page shows a single panel like the original, not a box inside a box. */ .ww-section { max-width: 900px; margin: 0 auto; padding: 40px 20px 0; } .ww-box { background: transparent; padding: 50px 60px 40px; } .ww-text { max-width: 660px; margin: 0 auto; text-align: center; font-family: var(--font-body); font-size: 18px; line-height: 1.6; } /* ====== Forms: legible fields on the brand palette ====== */ /* The quote form was a white card with a teal button; the portfolio form used fields so translucent they disappeared into the background. Both now use a defined field on the blue, with the brand yellow for actions. */ .quote-form-container { background: transparent; padding: 0; border-radius: 0; box-shadow: none; } .content-section .quote-form-title { font-family: 'Varela Round', Arial, Helvetica, sans-serif; font-size: 45px; font-weight: 400; color: var(--near-white); border-bottom: 2px solid rgba(243, 243, 243, 0.85); padding-bottom: 14px; margin-bottom: 22px; } .quote-form label, .portfolio-form label { font-family: 'Open Sans Condensed', 'Signika', Arial, sans-serif; font-size: 17px; font-weight: 700; color: var(--cream); margin-bottom: 6px; } .quote-form .required, .portfolio-form .required { color: var(--yellow); } .quote-form input, .quote-form select, .quote-form textarea, .portfolio-form input, .portfolio-form select, .portfolio-form textarea { width: 100%; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 2px; background: rgba(0, 50, 84, 0.25); color: var(--white); font-family: Arial, Helvetica, sans-serif; font-size: 15px; margin-bottom: 14px; } .quote-form ::placeholder, .portfolio-form ::placeholder { color: rgba(255, 255, 255, 0.7); } .quote-form option, .portfolio-form option { color: #003254; background: #FFFFFF; } .quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus, .portfolio-form input:focus, .portfolio-form select:focus, .portfolio-form textarea:focus { outline: none; border-color: var(--yellow); } .quote-form .field-hint { color: rgba(255, 255, 255, 0.75); } .quote-form .currency-prefix { border: 1px solid rgba(255, 255, 255, 0.55); border-right: none; background: rgba(0, 50, 84, 0.35); color: var(--white); } .quote-form .submit-btn, .portfolio-form .submit-btn { background: var(--yellow); color: var(--dark-navy); border: none; border-radius: 0; padding: 12px 30px; font-family: var(--font-button); font-size: 28px; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .quote-form .submit-btn:hover, .portfolio-form .submit-btn:hover { background: var(--cream); color: var(--dark-navy); } @media (max-width: 600px) { .ww-section { padding: 24px 10px 0; } .ww-box { padding: 26px 14px 30px; } /* Who Started It keeps the original's side-by-side layout on phones, but the desktop 70px gutters left a ~138px text column and the justified copy tore into rivers. The original runs a ~62%-of-width column with a smaller photo; these values reproduce that. */ .founder { padding: 0 20px 0 30px; gap: 15px; margin-top: 44px; } .founder-photo { width: 79px; height: 140px; } .wsi-inner { padding-top: 24px; } /* The sign was squeezed against the right edge beside the label. Block layout rather than flex here, so the arrow and label flow inline and the sign always drops to its own centred line. */ .cta-row, .cta-row.cta-right, .cta-row.cta-nudge { display: block; text-align: center; padding-left: 10px; padding-right: 10px; } .cta-arrow, .cta-label { display: inline-block; vertical-align: middle; margin: 0 5px; } .cta-sign { display: flex; width: 160px; max-width: 160px; flex: 0 0 auto; margin: 18px auto 0; } } /* Honeypot: positioned off-screen rather than display:none, because some bots skip fields that are explicitly hidden. Not focusable and hidden from assistive tech, so nobody using the site will ever reach it. */ .hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* The footer sat flush against the tinted panel, so the social icons read as part of the box. Scoped to panelled pages so Home and the splash keep the footer position measured off the original. */ body.has-panel .site-footer { padding-top: 26px; } /* ====== Quote / portfolio forms: use the site's own language ====== */ /* These were styled after the Wix embed — a rounded sans heading and a full-bleed button. Headings now match the site's other page titles, and the submit button matches the yellow blocks used everywhere else. */ .content-section .quote-form-title, .content-section .portfolio-form-title { font-family: var(--font-heading); font-size: 45px; font-weight: 700; color: var(--yellow); border-bottom: 2px solid rgba(255, 219, 76, 0.55); padding-bottom: 10px; margin-bottom: 24px; } .quote-form .submit-btn, .portfolio-form .submit-btn { width: 248px; height: 64px; align-self: flex-start; padding: 0 30px; font-size: 35px; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .quote-form .currency-prefix { display: flex; align-items: center; } /* WhatsApp: one link per region, sharing the contact column's left edge. */ .letstalk-whatsapp { display: flex; flex-wrap: wrap; gap: 10px; } .letstalk-whatsapp a { display: inline-flex; align-items: center; padding: 5px 14px; background: rgba(0, 50, 84, 0.28); border: 1px solid rgba(255, 255, 255, 0.5); color: var(--cream); font-family: 'Open Sans Condensed', 'Signika', Arial, sans-serif; font-size: 19px; line-height: 22px; transition: background-color 0.3s ease, color 0.3s ease; } .letstalk-whatsapp a:hover { background: var(--yellow); border-color: var(--yellow); color: var(--dark-navy); }