/* ============================================================ SuperCamDigitals — styles.css Framework : Bulma 1.0.4 Mapped to : index.php (index.html) Author : SuperCamDigitals ============================================================ */ /* ── Google Font Import ──────────────────────────────────── */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap"); /* ── CSS Custom Properties ───────────────────────────────── */ :root { /* Brand palette */ --primary: #8a2be2; --accent: #da70d6; --secondary: #fdbe02; --light: #f8f9fa; --dark: #2c2c2c; --shadow: rgba(0, 0, 0, 0.08); --success: #daa970; /* Bulma 1.0.4 CSS variable overrides — these actually change Bulma components */ --bulma-primary: #8a2be2; --bulma-primary-h: 272deg; --bulma-primary-s: 76%; --bulma-primary-l: 52%; --bulma-link: #8a2be2; --bulma-footer-background-color: #8a2be2; } /* ── Base — minimal reset, Bulma-safe ────────────────────── */ /* NOTE: No global * { margin:0; padding:0 } — that fights Bulma's Normalize */ *, *::before, *::after { box-sizing: border-box; } /* body.LPage — the class on your tag */ body.LPage { font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.125rem; line-height: 1.7; color: var(--dark); background: linear-gradient(135deg, #f3e8ff 0%, #dcb6f5 100%); background-attachment: fixed; overflow-x: hidden; /* Push all content below the fixed navbar on ALL screen sizes */ padding-top: 72px; } /* ── NAVBAR ──────────────────────────────────────────────── */ /* Structure reminder: nav.navbar div.navbar-brand.is-inline-flex.is-flex-direction-row.is-align-items-center a.navbar-item (logo) p.subtitle.is-3.is-hidden-mobile (brand name) a.navbar-burger ← sits OUTSIDE navbar-brand, intentionally div#navbarMenu.navbar-menu div.navbar-start span.social-icons (4 social icon links) div.navbar-end div.navbar-item.has-dropdown.is-hoverable a.navbar-item#open-consult-modal */ .navbar { background: linear-gradient( to right, var(--primary), var(--accent), var(--secondary) ); box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3); min-height: 72px; } /* The brand div — flex utilities from HTML handle internal layout */ .navbar-brand { min-height: 72px; } /* Logo image inside navbar — no border-radius, no hover scale */ .navbar-brand .navbar-item img { max-height: 60px; border-radius: 0; transition: none; } .navbar-brand .navbar-item img:hover { transform: none; } /* Brand name text */ .navbar-brand .subtitle.is-3 { color: #fff; font-weight: 700; margin: 0; line-height: 1; white-space: nowrap; } /* ── Navbar burger — positioned correctly for custom structure ── */ /* The burger sits outside .navbar-brand as a sibling. Bulma's default burger rule uses margin-left:auto inside navbar-brand. Since this burger is a sibling of navbar-brand inside the flex .navbar container, we handle it here. */ .navbar-burger { color: #fff; width: 3.25rem; height: 72px; display: none; /* hidden on desktop — shown via media query below */ flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; flex-shrink: 0; margin-left: auto; align-self: stretch; border: none; background: transparent; } .navbar-burger span { display: block; width: 22px; height: 2px; background-color: #fff; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } /* Animated X when burger is active */ .navbar-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar-burger.is-active span:nth-child(2) { opacity: 0; } .navbar-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Navbar menu ─────────────────────────────────────────── */ /* Social icons span wrapper */ .navbar-start .social-icons { display: inline-flex; align-items: center; justify-content: center; } /* Social icon images — no border-radius, no hover scale */ .navbar-start .social-icons img, .navbar-start .navbar-item img { border-radius: 0; transition: opacity 0.2s; } .navbar-start .social-icons img:hover, .navbar-start .navbar-item img:hover { transform: none; opacity: 0.8; } /* Navbar items and links */ .navbar-item, .navbar-link { color: #fff !important; font-weight: 600; font-family: "Montserrat", sans-serif; font-size: 0.9rem; } .navbar-item:hover, .navbar-link:hover { background-color: rgba(0, 0, 0, 0.15) !important; color: #fff !important; } /* Dropdown */ .navbar-dropdown { background-color: #fff; border-top: 3px solid var(--primary); border-radius: 0 0 8px 8px; box-shadow: 0 8px 24px rgba(138, 43, 226, 0.15); } .navbar-dropdown .navbar-item { color: var(--dark) !important; font-weight: 500; } .navbar-dropdown .navbar-item:hover { background-color: #f3e8ff !important; color: var(--primary) !important; } /* Book Consultation CTA in navbar */ #open-consult-modal { background: rgba(255, 255, 255, 0.15); border-radius: 6px; font-weight: 700; transition: background 0.2s; } #open-consult-modal:hover { background: rgba(255, 255, 255, 0.28) !important; color: #fff !important; } /* Mobile navbar menu background */ @media screen and (max-width: 1023px) { /* Show burger on mobile */ .navbar-burger { display: flex; } /* Mobile navbar layout — keep brand + burger on one row */ .navbar { display: flex; flex-wrap: wrap; align-items: stretch; min-height: 72px; } /* Brand takes up available space, burger sits right */ .navbar-brand { flex: 1 1 auto; display: flex; align-items: center; } /* Collapsed menu */ .navbar-menu { display: none; width: 100%; background: linear-gradient(160deg, var(--primary), var(--accent)); padding: 0.5rem 0; box-shadow: 0 8px 16px rgba(138, 43, 226, 0.2); } .navbar-menu.is-active { display: block; } /* Social icons stack nicely on mobile */ .navbar-start .social-icons { flex-wrap: wrap; padding: 0.25rem 0.75rem; } .navbar-end { padding: 0.25rem 0; } /* Dropdown behaves correctly on mobile */ .navbar-dropdown { background: rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0; box-shadow: none; } .navbar-dropdown .navbar-item { color: #fff !important; } .navbar-dropdown .navbar-item:hover { background-color: rgba(255, 255, 255, 0.15) !important; color: #fff !important; } } /* ── HERO SECTION (#home) ────────────────────────────────── */ /* section#home.hero.is-fullwidth */ #home.hero { background: transparent; /* body gradient shows through */ padding: 2rem 0; } /* Hero image — floating animation */ .hero img.flywebdev { animation: float 5s ease-in-out infinite; will-change: transform; border-radius: 12px; } /* figure.fwd — gradient background behind hero image */ figure.fwd { background: linear-gradient( to right, var(--primary), var(--accent), var(--secondary) ); border-radius: 8px; padding: 1rem; box-shadow: 0 8px 24px rgba(138, 43, 226, 0.5); } /* ── CONTAINERS — scoped, NOT global ──────────────────────── The original global .container rule was breaking the navbar. We scope it to actual content sections only. */ .section > .container, .hero-body > .container, #about > .container, #faq > .container { background: var(--light); border-radius: 16px; box-shadow: 0 10px 30px var(--shadow); padding: 2.5rem 3.5rem; margin: 0.5rem auto; } p { color: var(--dark); line-height: 1.6; padding-left: 16px; } /* is-fluid containers should not have fixed padding override */ .container.is-fluid { background: transparent; border-radius: 0; box-shadow: none; padding: 0 1.5rem; margin: 0; } /* ── BOXES ───────────────────────────────────────────────── */ /* Used in: testimonials, solutions, roi-calculator, email-capture */ .box { border: 3px solid var(--primary); border-radius: 16px; box-shadow: 0 10px 25px var(--shadow); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s; background: #fff; } .box:hover { transform: translateY(-8px); box-shadow: 0 20px 45px rgba(138, 43, 226, 0.18); border-color: var(--secondary); } /* ── TESTIMONIALS (#testimonials) ────────────────────────── */ /* section.section#testimonials — 3 .box cards */ #testimonials { padding: 3rem 1.5rem; } #testimonials .title.is-2 { color: var(--primary); margin-bottom: 2rem; } #testimonials .box p:first-child { font-style: italic; color: var(--dark); margin-bottom: 0.75rem; line-height: 1.7; } #testimonials .box .has-text-right { font-weight: 700; color: var(--primary); font-size: 0.9rem; } /* ── SOLUTIONS (#solutions) ──────────────────────────────── */ /* section.hero.is-small.has-shadow#solutions */ #solutions { background: transparent; } #solutions .title.is-2 { color: var(--primary); margin-bottom: 2rem; } /* Images inside solution boxes — allow border-radius */ #solutions .box figure img { border-radius: 8px; transition: transform 0.3s; } #solutions .box figure img:hover { transform: scale(1.04); } /* ── ROI CALCULATOR (#roi-calculator) ────────────────────── */ /* section.hero.is-large#roi-calculator */ #roi-calculator { background: transparent; padding: 3rem 0; } #roi-calculator .title.is-2 { color: var(--primary); } /* The Alpine.js box */ #roi-calculator .box { background: #fff; } /* Results block that appears after calculation */ #roi-calculator .mt-5 h5 { color: var(--primary); } /* Calculate ROI button — ripple-ready */ .button.is-primary.is-fullwidth { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; background: linear-gradient(to right, var(--primary), var(--accent)); border: none; font-weight: 700; color: #fff; border-radius: 8px; transition: transform 0.2s, box-shadow 0.2s; } .button.is-primary.is-fullwidth:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(138, 43, 226, 0.35); } /* Ripple effect element injected by scripts.js */ .btn-ripple { position: absolute; border-radius: 50%; width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; background: rgba(255, 255, 255, 0.45); transform: scale(0); opacity: 1; pointer-events: none; animation: roi-ripple-expand 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes roi-ripple-expand { to { transform: scale(4); opacity: 0; } } /* ── CONSULTATION (#consultation) ────────────────────────── */ /* section.section.is-medium#consultation */ #consultation { padding: 3rem 1.5rem; } #consultation .image img { border-radius: 12px; box-shadow: 0 8px 24px var(--shadow); } /* Book Now button in consultation section */ #consultation-cta { margin-top: 2rem; } /* ── EMAIL CAPTURE (#email-capture) ──────────────────────── */ /* section.section.is-medium#email-capture */ /* Contains a .box with email form + thumbnail images */ #email-capture { padding: 3rem 1.5rem; } #email-capture .title.is-4 { color: var(--primary); } /* Thumbnail images (.is-96x96 figures with .is-rounded imgs) */ #email-capture figure.image img { border-radius: 50%; /* respects .is-rounded on those images */ transition: transform 0.3s; } #email-capture figure.image img:hover { transform: scale(1.06); } /* Subscribe button */ #email-capture .button.is-info { font-weight: 700; transition: transform 0.2s; } #email-capture .button.is-info:hover { transform: translateY(-1px); } /* ── FAQ (#faq) ──────────────────────────────────────────── */ /* section.section#faq — ol.content inside div.content */ #faq { padding: 3rem 1.5rem; } #faq .title.is-2 { color: var(--primary); margin-bottom: 2rem; } /* Scope .content background only to the FAQ section */ #faq .content { background-color: #f3f1f3; padding: 1.5rem; border-radius: 12px; } #faq ol li { margin-bottom: 1.25rem; line-height: 1.7; } #faq ol li strong { color: var(--primary); } /* ── CONTACT (#contact) ──────────────────────────────────── */ /* section.hero.is-medium#contact */ #contact { background: linear-gradient(135deg, #f3e8ff 0%, #e8d4f8 100%); } #contact .title.is-3 { color: var(--primary); margin-bottom: 2rem; } /* Contact form inputs */ #contact .input:focus, #contact .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 0.3em rgba(138, 43, 226, 0.2); } /* Send Message button */ #contact .button.is-primary { background: linear-gradient(to right, var(--primary), var(--accent)); border: none; font-weight: 700; padding: 0.85rem 2rem; transition: transform 0.2s, box-shadow 0.2s; } #contact .button.is-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(138, 43, 226, 0.35); } /* ── ABOUT (#about) ──────────────────────────────────────── */ /* section.section#about */ #about { padding: 3rem 1.5rem; } #about .title.is-3 { color: var(--primary); margin-bottom: 1.5rem; } #about .subtitle.is-4 { line-height: 1.8; color: var(--dark); } /* ── BUTTONS — global CTA styles ─────────────────────────── */ /* .button.is-primary.is-rounded — used for hero CTAs and modal Book Now */ .button.is-primary.is-rounded { background: linear-gradient(to right, var(--primary), var(--accent)); border: none; font-weight: 700; padding: 1rem 2.5rem; color: #fff; animation: pulse 2.5s infinite; transition: transform 0.2s; } .button.is-primary.is-rounded:hover { transform: scale(1.05); color: #fff; } /* .button.is-success.is-rounded — "See your potential ROI" */ .button.is-success.is-rounded { font-weight: 700; transition: transform 0.2s; } .button.is-success.is-rounded:hover { transform: scale(1.04); } /* ── MODAL (#consult-modal) ──────────────────────────────── */ /* IMPORTANT: Do NOT override Bulma's modal with opacity/visibility. Bulma uses display:none / display:flex. We only add aesthetics here. */ .modal-card { border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(138, 43, 226, 0.25); } .modal-card-header.has-background-primary-dark { background: linear-gradient( to right, var(--primary), var(--accent) ) !important; border-bottom: none; padding: 1.25rem 1.5rem; } .modal-card-title { color: #fff !important; font-weight: 700 !important; font-family: "Montserrat", sans-serif !important; } /* Close button in modal header */ .modal-card-header .delete { background: rgba(255, 255, 255, 0.25); } .modal-card-header .delete:hover { background: rgba(255, 255, 255, 0.4); } /* Modal body */ .modal-card-body { padding: 2rem 1.5rem; } .modal-card-body .label { font-weight: 600; color: var(--dark); } .modal-card-body .input:focus { border-color: var(--primary); box-shadow: 0 0 0 0.3em rgba(138, 43, 226, 0.2); } /* Modal footer */ .modal-card-foot { background: #f8f5fd; border-top: 1px solid #e8d4f8; padding: 1.25rem 1.5rem; gap: 0.75rem; } /* Book Now button inside modal */ #submit-consult { font-weight: 700; } /* Cancel button inside modal */ .cancel-modal { font-weight: 500; } /* ── FOOTER ──────────────────────────────────────────────── */ /* footer.footer.is-flex.is-justify-content-space-between.has-text-centered div.content (logo + copyright) div.content (nav links + social links) */ footer.footer { background: var(--primary); color: #fff; padding: 3rem 2rem; gap: 2rem; } /* Scope .content inside footer — override background only here */ footer.footer .content { background: transparent; padding: 0; color: #fff; } /* Footer logo image */ footer.footer img.image { border-radius: 8px; margin-bottom: 0.75rem; } /* Footer logo hover — no scale */ footer.footer img:hover { transform: none; } footer.footer p { color: #fff; margin-bottom: 0.5rem; } footer.footer strong { color: #fff; } footer.footer a { color: #fff; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s; } footer.footer a:hover { color: var(--secondary); } /* ── IMAGES — scoped, not global ─────────────────────────── */ /* Only content images get border-radius and hover scale. Navbar images and footer images are excluded via their scoped rules above. */ .hero img, .box img, .section img, .hero-body img { border-radius: 12px; transition: transform 0.3s ease; } .hero img:hover, .box img:hover, .section img:hover, .hero-body img:hover { transform: scale(1.04); } /* Prevent hover scale on images that should stay static */ .navbar img:hover, footer img:hover, .modal img:hover { transform: none !important; } /* ── ANIMATIONS ──────────────────────────────────────────── */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(138, 43, 226, 0.6); } 70% { box-shadow: 0 0 0 22px rgba(138, 43, 226, 0); } } /* ── FORM INPUTS — global ────────────────────────────────── */ .input:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 0.3em rgba(138, 43, 226, 0.18); } /* ── UTILITY ─────────────────────────────────────────────── */ .has-shadow { box-shadow: 0 10px 30px var(--shadow) !important; } /* ── RESPONSIVE ──────────────────────────────────────────── */ @media screen and (max-width: 1023px) { /* Slightly reduce body padding-top on mobile since the navbar may wrap to 2 rows momentarily */ body.LPage { padding-top: 72px; } /* Container padding tighter on mobile */ .section > .container, .hero-body > .container { padding: 1.5rem 1.25rem; } /* ROI calculator columns stack */ #roi-calculator .columns { flex-direction: column; } /* Solutions grid: 2-col on tablet */ #solutions .column.is-4 { flex: 0 0 50%; max-width: 50%; } } @media screen and (max-width: 768px) { body.LPage { font-size: 1rem; } /* Solutions grid: 1-col on mobile */ #solutions .column.is-4 { flex: 0 0 100%; max-width: 100%; } /* Footer stacks vertically */ footer.footer { flex-direction: column; align-items: center; text-align: center; } /* Hero image smaller on mobile */ figure.fwd { padding: 0.5rem; } /* Boxes less dramatic hover on touch devices */ .box:hover { transform: translateY(-4px); } /* Consultation columns stack */ #consultation .columns { flex-direction: column; } } /* ── REDUCED MOTION ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .hero img.flywebdev { animation: none !important; } .button.is-primary.is-rounded { animation: none !important; } .btn-ripple { animation: none !important; opacity: 0 !important; } * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }