/* ============================================ geetikakhurana.com — shared styles Brand system: Grow with Geetika Khurana ============================================ */ :root { --yellow: #ffe358; --yellow-tint: #fff8e0; --green: #4caf6a; --green-accent: #7ed6a3; --green-tint: #eaf8ee; --blue: #93e3ff; --blue-tint: #eaf9ff; --teal: #56f7f9; --graphite: #2e2e2e; --ink: #1a1a1a; --ink-soft: #55524c; --white: #ffffff; --line: #ececec; --radius: 22px; --radius-pill: 999px; --shadow: 0 14px 34px rgba(26, 26, 26, 0.08); --max: 1140px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--white); color: var(--ink); font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: 'Jost', 'Futura', -apple-system, sans-serif; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 0.5em; color: var(--ink); } h1 { font-size: clamp(2.5rem, 5vw, 3.8rem); font-weight: 700; } h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); } h3 { font-size: 1.3rem; font-weight: 600; } p { margin: 0 0 1em; color: var(--ink-soft); } a { color: var(--ink); text-decoration: none; } /* ---------- Scroll-reveal animations ---------- */ /* Only takes effect once nav.js confirms JS is running (see .reveal-ready on ) — so content never gets stuck invisible without JS. */ html.reveal-ready .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } html.reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); } html.reveal-ready .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } html.reveal-ready .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); } html.reveal-ready .reveal-stagger > *:nth-child(1) { transition-delay: 0s; } html.reveal-ready .reveal-stagger > *:nth-child(2) { transition-delay: 0.08s; } html.reveal-ready .reveal-stagger > *:nth-child(3) { transition-delay: 0.16s; } html.reveal-ready .reveal-stagger > *:nth-child(4) { transition-delay: 0.24s; } html.reveal-ready .reveal-stagger > *:nth-child(5) { transition-delay: 0.32s; } html.reveal-ready .reveal-stagger > *:nth-child(6) { transition-delay: 0.4s; } html.reveal-ready .reveal-stagger > *:nth-child(n+7) { transition-delay: 0.46s; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; } .eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.78rem; color: var(--green); background: var(--green-tint); padding: 6px 14px 6px 10px; border-radius: var(--radius-pill); margin-bottom: 1em; } .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); display: inline-block; } .eyebrow.blue { color: #1877a8; background: var(--blue-tint); } .eyebrow.blue .dot { background: var(--blue); } /* ---------- Highlighter marker (brand identity detail) ---------- */ .hl { position: relative; white-space: nowrap; z-index: 0; } .hl::before { content: ""; position: absolute; left: -6px; right: -6px; bottom: 0.08em; top: 0.18em; background: var(--yellow); transform: rotate(-1.2deg); border-radius: 3px 8px 4px 9px / 8px 3px 9px 4px; z-index: -1; } /* ---------- Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; max-width: var(--max); margin: 0 auto; } .nav-logo { display: flex; align-items: center; gap: 10px; font-family: 'Jost', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--ink); text-decoration: none; } .nav-logo:hover { text-decoration: none; } .nav-logo .badge { width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; } .nav-links { display: flex; gap: 4px; align-items: center; list-style: none; margin: 0; padding: 6px; background: var(--green); border-radius: var(--radius-pill); } .nav-links a { color: var(--white); font-weight: 500; font-size: 0.9rem; padding: 9px 16px; border-radius: var(--radius-pill); display: inline-block; } .nav-links a:hover { background: rgba(255,255,255,0.18); text-decoration: none; } .nav-links a.external { font-weight: 600; } .has-dropdown { position: relative; } .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 14px 8px 8px; min-width: 170px; list-style: none; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 200; } .dropdown-menu li { width: 100%; } .dropdown-menu a { display: block; color: var(--ink); font-weight: 500; padding: 8px 12px; border-radius: 8px; } .dropdown-menu a:hover { background: var(--yellow-tint, #fff6d9); text-decoration: none; } .has-dropdown:hover .dropdown-menu, .has-dropdown.open .dropdown-menu { display: block; } .nav-toggle { display: none; background: none; border: none; font-size: 1.6rem; color: var(--ink); cursor: pointer; } @media (max-width: 860px) { .nav-toggle { display: block; } .nav-links { display: none; position: absolute; top: 100%; left: 16px; right: 16px; background: var(--green); flex-direction: column; align-items: stretch; gap: 4px; padding: 12px; border-radius: 20px; margin-top: 8px; box-shadow: var(--shadow); } .nav-links.open { display: flex; } .nav-links a { width: 100%; text-align: center; } .dropdown-menu { display: block; position: static; box-shadow: none; background: transparent; padding: 0; margin: 2px 0 6px; } .dropdown-menu a { color: var(--white); font-size: 0.85rem; padding: 7px 16px; } .dropdown-menu a:hover { background: rgba(255,255,255,0.18); } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; border: 2px solid transparent; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn-primary { background: var(--yellow); color: var(--ink); box-shadow: var(--shadow); } .btn-primary:hover { background: #ffd93d; } .btn-outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); } .btn-outline:hover { background: var(--ink); color: #fff; } .btn-green { background: var(--green); color: #fff; box-shadow: var(--shadow); } .btn-green:hover { background: #3d9457; } /* ---------- Hero ---------- */ .hero { padding: 64px 0 40px; } .hero-inner { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; } .hero-inner.reverse { grid-template-columns: 1.15fr 0.85fr; } @media (max-width: 860px) { .hero-inner, .hero-inner.reverse { grid-template-columns: 1fr; } .hero-photo { order: -1; max-width: 320px; margin: 0 auto; } } .hero-photo { position: relative; } .hero-photo img { width: 100%; margin: 0 auto; object-fit: contain; } .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.6em; } /* ---------- Section ---------- */ .section { padding: 64px 0; } .section-alt { background: var(--yellow-tint); } .section-blue { background: var(--blue-tint); } .section-head { max-width: 640px; margin-bottom: 40px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } /* ---------- Offer cards ---------- */ .offer-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; } .offer-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; flex: 0 1 270px; transition: transform 0.15s ease; } .offer-card:hover { transform: translateY(-4px); } .offer-icon { width: 72px; height: 72px; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .offer-icon img { width: 100%; height: 100%; } .offer-icon.blue { background: transparent; } .offer-icon.teal { background: transparent; } .offer-icon.green { background: transparent; } .offer-card h3 { margin-bottom: 10px; } .offer-card p { flex-grow: 1; line-height: 1.7; } .offer-link { font-weight: 600; font-size: 0.92rem; margin-top: 12px; color: var(--green); } /* ---------- Quote clips (People describe me as) ---------- */ .quote-clip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; } @media (max-width: 860px) { .quote-clip-grid { grid-template-columns: 1fr; } } .quote-clip { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); } .quote-clip .mark { font-family: 'Jost', sans-serif; font-size: 2rem; font-weight: 700; color: var(--green-accent); line-height: 1; margin-bottom: 6px; } .quote-clip p { color: var(--ink); font-weight: 600; font-size: 1rem; line-height: 1.5; margin-bottom: 14px; } .quote-clip span { font-size: 0.82rem; color: var(--ink-soft); } /* ---------- Social hub (My Story) ---------- */ .youtube-embed { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--ink); } .youtube-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .social-hub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; } @media (max-width: 860px) { .social-hub-grid { grid-template-columns: repeat(2, 1fr); } } .social-hub-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px; text-align: center; box-shadow: var(--shadow); transition: transform 0.15s ease; } .social-hub-card:hover { transform: translateY(-4px); text-decoration: none; } .social-hub-card .social-hub-icon { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: var(--yellow-tint); display: flex; align-items: center; justify-content: center; color: var(--ink); } .social-hub-card .social-hub-icon svg { width: 24px; height: 24px; } .social-hub-card h4 { margin: 0 0 4px; font-size: 0.98rem; } .social-hub-card p { margin: 0; font-size: 0.8rem; color: var(--ink-soft); } .social-hub-card.linkedin .social-hub-icon { background: var(--blue-tint); } .social-hub-note { font-size: 0.85rem; color: var(--ink-soft); margin-top: 16px; text-align: center; } /* ---------- Blog card feature image ---------- */ .blog-card-img-link { display: block; margin: -34px -28px 20px; } .blog-card-img { width: calc(100% + 56px); height: 170px; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; display: block; } /* ---------- Free / paid product badges (Resources page) ---------- */ .offer-card { position: relative; } .free-badge { position: absolute; top: -10px; right: 18px; background: var(--yellow); color: var(--ink); font-family: 'Jost', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-pill); box-shadow: var(--shadow); transform: rotate(-3deg); } .soon-badge { position: absolute; top: -10px; right: 18px; background: var(--ink-soft); color: #fff; font-family: 'Jost', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--radius-pill); box-shadow: var(--shadow); transform: rotate(-3deg); } .offer-card.is-soon { opacity: 0.92; } .notify-link { display: inline-block; margin-top: 4px; } .price-tag { display: inline-flex; align-items: baseline; gap: 4px; font-family: 'Jost', sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--ink); margin-bottom: 8px; } .price-tag .was { font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); text-decoration: line-through; } .paid-card { border-color: var(--green-accent); } .checkout-row { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .checkout-row .btn { justify-content: center; width: 100%; font-size: 0.9rem; padding: 11px 20px; gap: 10px; } .checkout-row .btn .region-icon { font-size: 1.1rem; line-height: 1; } .checkout-row .btn svg.globe-icon { width: 17px; height: 17px; flex-shrink: 0; } /* ---------- Lead magnet modal ---------- */ .lm-overlay { display: none; position: fixed; inset: 0; background: rgba(26,26,26,0.55); z-index: 1000; align-items: center; justify-content: center; padding: 20px; } .lm-overlay.open { display: flex; } .lm-modal { background: #fff; border-radius: var(--radius); max-width: 420px; width: 100%; padding: 34px; position: relative; box-shadow: var(--shadow); } .lm-modal .lm-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: var(--ink-soft); line-height: 1; } .lm-modal h3 { margin-bottom: 6px; } .lm-modal p.lm-sub { margin-bottom: 20px; font-size: 0.92rem; } .lm-modal .form-field { margin-bottom: 14px; } .lm-modal .form-field input { width: 100%; font-family: 'Poppins', sans-serif; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 0.95rem; } .lm-modal .btn { width: 100%; justify-content: center; border: none; cursor: pointer; margin-top: 6px; } .lm-modal .lm-status { font-size: 0.85rem; margin-top: 10px; display: none; } /* ---------- Generic content blocks ---------- */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } @media (max-width: 780px) { .two-col { grid-template-columns: 1fr; } } .pill-list { list-style: none; padding: 0; margin: 0; } .pill-list li { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); display: flex; gap: 12px; } .pill-list li strong { color: var(--ink); } .pill-list li .check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--green-tint); color: var(--green); font-size: 0.75rem; display: flex; align-items: center; justify-content: center; font-weight: 700; } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); } .tag { display: inline-block; background: var(--blue-tint); color: var(--ink); font-size: 0.92rem; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-pill); margin: 0 8px 8px 0; } .callout { background: var(--green); color: #fff; border-radius: var(--radius); padding: 44px; text-align: center; } .callout h2, .callout p { color: #fff; } .callout .btn-primary { background: var(--yellow); color: var(--ink); } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: #f2ede0; padding: 54px 0 30px; margin-top: 40px; } .footer-inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 30px; margin-bottom: 30px; } .footer-brand { display: flex; align-items: flex-start; gap: 12px; max-width: 380px; } .footer-brand .badge { width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; margin-top: 4px; } .footer-brand h3 { color: #fff; margin-bottom: 6px; } .footer-brand p { color: #b8b4ac; } .social-links { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .social-links a { display: inline-flex; align-items: center; gap: 8px; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); padding: 9px 18px; border-radius: var(--radius-pill); font-size: 0.86rem; font-weight: 500; line-height: 1.2; white-space: nowrap; } .social-links a svg { width: 16px; height: 16px; flex-shrink: 0; } .social-links a:hover { background: var(--green); border-color: var(--green); text-decoration: none; } .footer-nav { display: flex; gap: 20px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .footer-nav a { color: #d9d5c9; font-size: 0.9rem; } .footer-nav a:hover { color: var(--yellow); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; font-size: 0.82rem; color: #8a877f; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; } .footer-bottom a { color: #8a877f; text-decoration: underline; } .footer-bottom a:hover { color: #fff; } /* ---------- Value pills (Brand DNA values) ---------- */ .value-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; } .value-card { text-align: center; padding: 26px 18px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); flex: 0 1 200px; } .value-card .letter { width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; background: var(--yellow); display: flex; align-items: center; justify-content: center; font-family: 'Jost', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--ink); } .value-card .letter.green { background: var(--green-accent); } .value-card .letter.blue { background: var(--blue); } .value-card .letter.teal { background: var(--teal); } .value-card .name { margin: 10px 0 6px; font-weight: 600; color: var(--ink); } .value-card .desc { font-size: 0.85rem; margin: 0; color: var(--ink-soft); line-height: 1.5; } /* ---------- Testimonials ---------- */ .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; } .testimonial-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); } .testimonial-card .stars { color: #f4b400; letter-spacing: 2px; margin-bottom: 12px; font-size: 0.95rem; } .testimonial-card p.quote { color: var(--ink); font-style: italic; font-size: 1rem; } .testimonial-card .who { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; } .testimonial-card .who strong { color: var(--ink); } .testimonial-card .who span { color: var(--ink-soft); font-size: 0.82rem; } .testimonial-placeholder { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 30px; text-align: center; color: var(--ink-soft); background: var(--yellow-tint); } .testimonial-placeholder strong { display: block; color: var(--ink); margin-bottom: 6px; } /* ---------- Testimonial slider / ticker ---------- */ /* Reusable single-card carousel: drop new .slider-slide divs in as more quotes come in, no other markup changes needed. JS auto-detects the count. */ .testimonial-slider { position: relative; max-width: 640px; margin: 0 auto; } .slider-track { position: relative; min-height: 220px; } .slider-slide { display: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 40px; box-shadow: var(--shadow); text-align: center; animation: slideFadeIn 0.4s ease; } .slider-slide.active { display: block; } @keyframes slideFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .slider-slide .stars { color: #f4b400; letter-spacing: 2px; margin-bottom: 14px; font-size: 0.95rem; } .slider-slide p.quote { color: var(--ink); font-style: italic; font-size: 1.1rem; line-height: 1.6; margin-bottom: 16px; } .slider-slide .who strong { color: var(--ink); display: block; } .slider-slide .who span { color: var(--ink-soft); font-size: 0.82rem; } .slider-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; } .slider-arrow { background: #fff; border: 1px solid var(--line); border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); font-size: 1rem; transition: background 0.15s ease; } .slider-arrow:hover { background: var(--yellow-tint); } .slider-dots { display: flex; gap: 8px; } .slider-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); border: none; cursor: pointer; padding: 0; transition: background 0.15s ease, transform 0.15s ease; } .slider-dot.active { background: var(--green); transform: scale(1.3); } /* ---------- Squiggle decoration ---------- */ .squiggle { position: absolute; z-index: 0; opacity: 0.9; pointer-events: none; } .squiggle.blue { color: var(--blue); } .squiggle.yellow { color: var(--yellow); } .squiggle.green { color: var(--green-accent); } /* ---------- Accordion (details/summary) ---------- */ .accordion-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 28px; margin-bottom: 16px; } .accordion-card summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 18px; } .accordion-card summary::-webkit-details-marker { display: none; } .accordion-card summary .acc-head { flex-grow: 1; } .accordion-card summary .acc-head h3 { margin: 0 0 4px; } .accordion-card summary .acc-head .tagline { color: var(--ink-soft); font-weight: 500; margin: 0; } .accordion-card summary .chevron { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--yellow-tint); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: transform 0.2s ease; } .accordion-card[open] summary .chevron { transform: rotate(45deg); } .accordion-card .acc-body { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } @media (max-width: 700px) { .accordion-card .acc-body { grid-template-columns: 1fr; } } .accordion-card .acc-body h4 { margin: 0 0 12px; font-size: 0.95rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; } .accordion-card .acc-body ul { list-style: none; margin: 0; padding: 0; } .accordion-card .acc-body li { padding: 8px 0 8px 26px; position: relative; color: var(--ink-soft); line-height: 1.5; } .accordion-card .acc-body li::before { content: '•'; position: absolute; left: 6px; color: var(--green); font-weight: 700; } .accordion-card .acc-cta { margin-top: 18px; } /* ---------- Mini grid (How I Work) ---------- */ .mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 860px) { .mini-grid { grid-template-columns: repeat(2, 1fr); } } .mini-card { text-align: center; padding: 8px; } .mini-card .offer-icon { margin: 0 auto 14px; } .mini-card h4 { margin: 0 0 8px; font-size: 1.02rem; } .mini-card p { font-size: 0.88rem; margin: 0; } /* ---------- Villain columns ---------- */ .villain-label { display: inline-block; background: var(--ink); color: #fff; font-weight: 700; font-size: 0.8rem; padding: 7px 16px; border-radius: var(--radius-pill); margin-bottom: 12px; } .villain-bullets { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; color: var(--ink-soft); } .villain-bullets li { position: relative; padding: 6px 0 6px 18px; line-height: 1.5; } .villain-bullets li::before { content: ''; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); } /* ---------- Contact form ---------- */ .contact-layout { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: 40px; align-items: start; } @media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } } .contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px; display: flex; flex-direction: column; gap: 18px; } /* Honeypot spam-trap field — kept in the tab/DOM flow but invisible and unreachable to real users; bots that auto-fill every input trip it. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-size: 0.85rem; font-weight: 600; color: var(--ink); } .form-field input, .form-field select, .form-field textarea { font-family: 'Poppins', sans-serif; font-size: 0.95rem; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; outline: none; transition: border-color 0.15s ease; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--green); } .form-field select { cursor: pointer; appearance: auto; } .form-field textarea { resize: vertical; min-height: 120px; font-family: inherit; } .contact-form .btn { align-self: flex-start; border: none; cursor: pointer; } .contact-sidebar { display: flex; flex-direction: column; gap: 20px; } .contact-sidebar .card h4 { margin: 0 0 6px; } .contact-sidebar .card p { margin: 0 0 4px; font-size: 0.92rem; } .contact-sidebar .card a.email-link { font-weight: 600; color: var(--green); font-size: 1.02rem; word-break: break-all; } .contact-sidebar .quick-links { list-style: none; margin: 0; padding: 0; } .contact-sidebar .quick-links li { border-bottom: 1px solid var(--line); } .contact-sidebar .quick-links li:last-child { border-bottom: none; } .contact-sidebar .quick-links a { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-weight: 500; color: var(--ink); } .contact-sidebar .quick-links a:hover { color: var(--green); text-decoration: none; } /* ---------- Program explorer (list + detail) ---------- */ .program-explorer { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; } .program-list { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 90px; } .program-list-item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; font-family: inherit; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .program-list-item:hover { transform: translateY(-1px); border-color: var(--green-accent); } .program-list-item .offer-icon { width: 44px; height: 44px; margin-bottom: 0; flex-shrink: 0; } .program-list-item .offer-icon img { width: 100%; height: 100%; } .program-list-item h4 { margin: 0 0 2px; font-size: 0.98rem; color: var(--ink); } .program-list-item p { margin: 0; font-size: 0.82rem; color: var(--ink-soft); line-height: 1.4; } .program-list-item.active { background: var(--green); border-color: var(--green); } .program-list-item.active h4 { color: #fff; } .program-list-item.active p { color: rgba(255,255,255,0.85); } .program-detail { min-width: 0; } .program-panel { display: none; } .program-panel.active { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 36px; } .program-panel .acc-head { display: flex; align-items: center; gap: 18px; margin-bottom: 4px; } .program-panel .acc-head h3 { margin: 0 0 4px; } .program-panel .acc-head .tagline { color: var(--ink-soft); font-weight: 500; margin: 0; } .program-panel .acc-body { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .program-panel .acc-body h4 { margin: 0 0 12px; font-size: 0.95rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; } .program-panel .acc-body ul { list-style: none; margin: 0; padding: 0; } .program-panel .acc-body li { padding: 8px 0 8px 26px; position: relative; color: var(--ink-soft); line-height: 1.5; } .program-panel .acc-body li::before { content: '•'; position: absolute; left: 6px; color: var(--green); font-weight: 700; } .program-panel .acc-cta { margin-top: 22px; } @media (max-width: 860px) { .program-explorer { grid-template-columns: 1fr; } .program-list { position: static; flex-direction: row; flex-wrap: wrap; } .program-list-item { flex: 1 1 45%; } .program-panel.active { padding: 26px 22px; } .program-panel .acc-body { grid-template-columns: 1fr; } } /* ---------- Insta banner ---------- */ .insta-banner { background: linear-gradient(135deg, var(--yellow-tint), var(--blue-tint)); border-radius: var(--radius); padding: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .insta-banner h3 { margin: 0 0 6px; } .insta-banner p { margin: 0; color: var(--ink-soft); } /* ---------- Split cards (Instagram / Blog) ---------- */ .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 780px) { .split-grid { grid-template-columns: 1fr; } } .split-card { position: relative; border-radius: var(--radius); padding: 32px; min-height: 320px; overflow: hidden; } .split-card h3 { margin: 0 0 10px; max-width: 60%; } .split-card p { max-width: 55%; margin-bottom: 20px; } .split-card-photo { position: absolute; right: 0; bottom: 0; width: 46%; max-width: 230px; pointer-events: none; } .split-card-photo img { width: 100%; display: block; } .split-card-photo-placeholder { position: absolute; right: 32px; bottom: 32px; width: auto; } .split-card-photo-placeholder .offer-icon { width: 84px; height: 84px; margin-bottom: 0; } .split-card-photo-placeholder .offer-icon img { width: 50px; height: 50px; } @media (max-width: 560px) { .split-card h3, .split-card p { max-width: 100%; } .split-card-photo { position: static; width: 60%; margin-top: 16px; } .split-card-photo-placeholder { position: static; margin-top: 16px; } }