/* ============================================================ workshop.css edgeRunnerWorks — Workshop registration page Page-level styles ONLY. Loads on top of shared.css. Tokens, nav, footer, buttons, and cta-strip come from shared.css — do not redeclare them here. ============================================================ */ /* NOTE: overflow-x on only. Setting it on breaks position:sticky on the nav. */ html { overflow-x: hidden; max-width: 100vw; } /* ── HERO ── */ .hero { position: relative; background: linear-gradient(150deg, #c2dcff 0%, #deeeff 28%, #f5f9ff 58%, #F6F8FA 100%); border-bottom: 1px solid var(--border); padding: 48px 60px 64px; overflow: hidden; } .blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; } .blob-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(24,200,255,0.10) 0%, transparent 70%); top: -160px; right: -80px; } .blob-2 { width: 340px; height: 340px; background: radial-gradient(circle, rgba(31,52,71,0.06) 0%, transparent 70%); bottom: -80px; left: -60px; } .hero-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; } .hero-label { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-dark); display: block; margin-bottom: 18px; } .hero h1 { font-family: var(--font-serif); font-size: clamp(2.8rem, 4.5vw, 4rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 10px; } .hero h1 em { font-style: italic; color: inherit; } .hero-hook { font-size: 1.05rem; color: var(--ink-mid); line-height: 1.85; margin-bottom: 20px; max-width: 720px; } .hero-package { border-left: 3px solid var(--teal); padding: 10px 0 10px 18px; font-size: 0.95rem; font-weight: 600; color: var(--teal-dark); line-height: 1.6; margin-bottom: 28px; max-width: 800px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } /* ── REGISTER BAND ── */ .register-band { background: var(--bg); border-bottom: 1px solid var(--border); padding: 80px 60px; } .register-band-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 380px 1fr; gap: 60px; align-items: start; } .register-intro { padding-top: 4px; } .register-subtitle { font-size: 1rem; color: var(--ink-mid); line-height: 1.8; margin-bottom: 20px; } .register-price { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1.1; color: var(--teal-dark); } /* ── REGISTRATION FORM ── */ .register-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; background: var(--bg-soft); border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: var(--radius-md); padding: 36px 32px; box-shadow: var(--shadow-md); } /* Netlify honeypot — must stay in the DOM and out of sight. */ .register-hp { display: none; } /* The one field that is not required, marked so nobody hunts for a validation error. */ .field-optional { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-light); font-weight: 400; } .register-form label { display: flex; flex-direction: column; gap: 8px; } .register-form label > span { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mid); } .register-form input, .register-form select { width: 100%; min-height: 50px; padding: 12px 14px; font-family: var(--font-sans); font-size: 0.95rem; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color 0.15s, box-shadow 0.15s; } .register-form input::placeholder { color: var(--ink-light); } .register-form input:focus, .register-form select:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,184,166,0.18); } .register-form select { appearance: none; cursor: pointer; padding-right: 40px; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235a7a96' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } .register-actions { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 4px; } .register-button { border: 0; cursor: pointer; padding: 16px 32px; font-size: 0.95rem; } .register-note { font-size: 0.82rem; color: var(--ink-light); line-height: 1.6; } /* ── DETAILS ── */ .details-section { background: var(--bg-soft); border-bottom: 1px solid var(--border); padding: 80px 60px; } .section-inner { max-width: 1200px; margin: 0 auto; } .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .detail-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 32px 28px; border-top: 3px solid var(--teal); } .detail-num { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; color: var(--teal); display: block; margin-bottom: 14px; } .detail-card h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 14px; line-height: 1.35; } .detail-card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .detail-card li { font-size: 0.92rem; color: var(--ink-mid); line-height: 1.6; padding-left: 18px; position: relative; } .detail-card li::before { content: "\2022"; position: absolute; left: 0; color: var(--teal); font-weight: 700; } .page-footnote { text-align: center; margin-top: 40px; font-size: 0.88rem; color: var(--ink-light); font-style: italic; } /* ── RESPONSIVE — 900px ── */ @media (max-width: 900px) { .register-band-inner { grid-template-columns: 1fr; gap: 36px; } .cards-grid { grid-template-columns: repeat(2, 1fr); } } /* ── RESPONSIVE — 768px ── */ @media (max-width: 768px) { .hero { padding: 40px 20px 48px; } .hero h1 { font-size: clamp(2rem, 8vw, 2.8rem); } .register-band { padding: 56px 20px; } .register-form { grid-template-columns: 1fr; padding: 26px 22px; } .register-actions { align-items: stretch; } .register-button { width: 100%; justify-content: center; } .details-section { padding: 56px 20px; } .cards-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }