.cs-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; position: relative; overflow: hidden; } .cs-doodle { position: absolute; z-index: 0; opacity: 0.9; } .cs-doodle.d1 { width: 90px; top: 8%; left: 8%; transform: rotate(-12deg); } .cs-doodle.d2 { width: 80px; bottom: 10%; right: 9%; transform: rotate(160deg) scaleX(-1); } .cs-card { position: relative; z-index: 1; background: #fff; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 12px 12px 0 var(--marker-blue); max-width: 560px; width: 100%; padding: 48px 44px 40px; text-align: center; transform: rotate(-0.6deg); } .cs-logo { height: 100px; width: auto; margin: 0 auto 22px; } .cs-badge { display: inline-block; background: var(--highlight); border: 2px solid var(--ink); padding: 8px 18px; border-radius: 20px; font-family: 'Caveat', cursive; font-weight: 700; font-size: 19px; transform: rotate(-3deg); margin-bottom: 22px; box-shadow: 4px 4px 0 var(--ink); } .cs-card h1 { font-family: 'Archivo Black', sans-serif; font-size: clamp(22px, 5.5vw, 32px); line-height: 1.1; letter-spacing: -0.5px; margin-bottom: 18px; } .cs-circle-wrap { position: relative; display: inline-block; color: var(--marker-red); } .cs-circle-doodle { position: absolute; left: -10%; top: -24%; width: 120%; height: 150%; pointer-events: none; } .cs-sub { font-size: 16px; color: var(--ink-soft); max-width: 420px; margin: 0 auto 30px; line-height: 1.2; } .cs-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 26px; } .cs-contact-link { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--ink); border-radius: 4px; padding: 12px 20px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: var(--ink); background: #fff; box-shadow: 4px 4px 0 var(--ink); transition: transform 0.15s ease, box-shadow 0.15s ease; } .cs-contact-link:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } .cs-contact-link.cs-phone { box-shadow: 4px 4px 0 var(--marker-red); } .cs-contact-link.cs-phone:hover { box-shadow: 6px 6px 0 var(--marker-red); } .cs-footer-note { font-family: 'Caveat', cursive; font-size: 16px; color: var(--ink-soft); border-top: 2px dashed var(--paper-2); padding-top: 18px; } /* pre-hide targets only when JS is present (html.gsap-init, set synchronously in ), so content stays visible if JS/GSAP never runs */ .gsap-init .cs-card, .gsap-init .cs-doodle { opacity: 0; } @media (max-width: 480px) { .cs-card { padding: 38px 26px 32px; } .cs-doodle { display: none; } }