/* ================================================================== ADE KICKOFF 2026 Built to match nowifi-music.com: one flat colour, black type, Inter Tight, centred column, hand-drawn scribbles. No framework. ------------------------------------------------------------------ Reference values pulled from nowifi-music.com: ground #8E9BFF → here #3FBF63 (violet moved off-hue, same tonal weight: 0.36 vs 0.39 luminance) ink #0B0B0B → unchanged type Inter Tight, tracked-caps labels, 3px underlines button ink block, ground-coloured text, weight 900, no radius ================================================================== */ :root { --ground: #3FBF63; --ink: #0B0B0B; --ink-30: rgba(11, 11, 11, 0.30); --ink-55: rgba(11, 11, 11, 0.55); --ink-12: rgba(11, 11, 11, 0.12); --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif; --wrap: 620px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; padding: 40px 22px 64px; } ::selection { background: var(--ink); color: var(--ground); } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } img, svg { max-width: 100%; display: block; } img { height: auto; } .wrap { max-width: var(--wrap); margin: 0 auto; text-align: center; } /* ---------- masthead ---------- */ .mast { font-weight: 900; font-size: clamp(2.6rem, 12vw, 5.2rem); line-height: 0.88; letter-spacing: -0.045em; text-transform: lowercase; } .mast em { font-style: normal; display: block; } .byline { margin-top: 6px; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55); } .tagline { margin-top: 14px; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; } /* ---------- the facts, plainly ---------- */ .facts { margin-top: 30px; font-size: 1.0625rem; line-height: 1.75; } .facts b { font-weight: 800; } .facts .muted { color: var(--ink-55); } /* ---------- scribbled call to action ---------- */ .cta-wrap { position: relative; margin: 46px auto 0; width: max-content; max-width: 100%; } .arrow { position: absolute; top: -40px; left: 50%; margin-left: -118px; width: 52px; pointer-events: none; } /* inset defines the box; max-width:none stops the global svg reset clamping it back to the button's width and shunting it off-centre */ .ellipse { position: absolute; inset: -14px -40px; width: auto; height: auto; max-width: none; pointer-events: none; } .cta { position: relative; background: none; border: 0; font-family: inherit; color: var(--ink); cursor: pointer; padding: 16px 30px; display: block; } .cta .cta-main { display: block; font-weight: 900; font-size: clamp(1.15rem, 4.6vw, 1.6rem); letter-spacing: -0.02em; text-transform: uppercase; } .cta .cta-sub { display: block; margin-top: 3px; font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; } /* ---------- panel that opens ---------- */ /* Open by default so the form and photos survive with JavaScript off. The .js class is set by an inline script in , so the collapse happens before first paint and there is no flash of open content. */ .panel { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .38s ease, opacity .28s ease; } .panel > div { overflow: hidden; } .js .panel.shut { grid-template-rows: 0fr; opacity: 0; } @media (prefers-reduced-motion: reduce) { .panel { transition: none; } } /* ---------- form ---------- */ .form { margin-top: 34px; text-align: left; } .field { margin-bottom: 26px; } .field > label, .legend { display: block; font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 4px; } .opt { color: var(--ink-55); font-weight: 600; } .field input[type=text], .field input[type=email], .field input[type=url] { width: 100%; font-family: inherit; font-size: 1.375rem; font-weight: 600; color: var(--ink); background: none; border: 0; border-bottom: 3px solid var(--ink-30); border-radius: 0; padding: 6px 0 10px; min-height: 46px; } .field input::placeholder { color: var(--ink-30); text-transform: uppercase; font-weight: 600; } .field input:focus { border-bottom-color: var(--ink); outline: none; } .field input[aria-invalid="true"] { border-bottom-color: var(--ink); } .help { margin-top: 7px; font-size: 0.8125rem; color: var(--ink-55); max-width: 46ch; } .err { display: none; margin-top: 8px; background: var(--ink); color: var(--ground); font-size: 0.8125rem; font-weight: 600; padding: 5px 9px; width: fit-content; } .err.show { display: block; } /* skill slider */ .skill-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 6px; } .skill-label { font-weight: 800; font-size: 1.125rem; } .skill-num { font-weight: 900; font-size: 2rem; line-height: 1; } input[type=range].skill { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: none; cursor: pointer; margin-top: 2px; } input[type=range].skill::-webkit-slider-runnable-track { height: 3px; background: var(--ink-30); } input[type=range].skill::-moz-range-track { height: 3px; background: var(--ink-30); } input[type=range].skill::-moz-range-progress { height: 3px; background: var(--ink); } input[type=range].skill::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 999px; background: var(--ink); border: 3px solid var(--ground); } input[type=range].skill::-moz-range-thumb { width: 26px; height: 26px; border-radius: 999px; background: var(--ink); border: 3px solid var(--ground); } .scale { display: flex; justify-content: space-between; font-size: 0.6875rem; font-weight: 700; color: var(--ink-55); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--ground); font-family: inherit; font-weight: 900; font-size: 1.25rem; border: 0; border-radius: 0; cursor: pointer; padding: 18px 26px; min-height: 46px; width: 100%; justify-content: center; } .btn:disabled { opacity: .55; cursor: not-allowed; } .linkbtn { background: none; border: 0; font-family: inherit; cursor: pointer; color: var(--ink); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 14px 4px; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; } /* ---------- photos ---------- */ .more { margin-top: 54px; } .shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 22px; } @media (min-width: 620px) { .shots { grid-template-columns: repeat(3, 1fr); } } .shots img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } .credit { margin-top: 14px; font-size: 0.8125rem; color: var(--ink-55); } /* ---------- states ---------- */ .done { margin-top: 34px; border: 3px solid var(--ink); padding: 28px 22px; text-align: left; } .done h2 { font-weight: 900; font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; } .done p { margin-top: 14px; } .done .row { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; } .done .row a, .done .row button { font-family: inherit; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; border: 3px solid var(--ink); background: none; color: var(--ink); padding: 12px 16px; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; } .done .row a.solid { background: var(--ink); color: var(--ground); } /* ---------- footer ---------- */ .foot { margin-top: 60px; font-size: 0.8125rem; line-height: 2; } .foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; } /* standalone footer links need the 44px tap floor; the inline photo credit is exempt as a link inside a sentence */ .foot p:first-child a { display: inline-block; padding: 14px 6px; } .foot .sep { color: var(--ink-30); } /* consent line sits directly above the submit button, where the data is taken */ .consent { margin: -6px 0 22px; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-55); max-width: 52ch; } .consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* standalone footer links need the 44px tap floor */ .foot .legal { margin-top: 2px; } .foot .legal a { display: inline-block; padding: 14px 6px; } .foot .fine { margin-top: 14px; color: var(--ink-55); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }