/* ========================================================================= Mango ACO — Coming soon Implementation of `Coming Soon.dc.html` from the Mango ACO Design project. Every value here traces back to the artboard. Where the artboard used an inline style, it became a named rule; where it used a design token, the token is still the token. Two knobs from the artboard's prop panel survive as data attributes on (see index.html): data-accent="dusk" | "mango" — gradient on the headline phrase data-mark="on" | "off" — the oversized fruit mark Depends on tokens.css. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { /* The page shell paints --grad-paper; matching it here keeps overscroll (rubber-banding on iOS/macOS) from flashing the flat --bg-2 underneath. */ background: #fff8ee; } a { color: var(--mango-red-500); text-decoration: none; transition: color var(--dur-1) var(--ease-out); } a:hover { color: var(--neon-fuchsia-500); } :focus-visible { outline: 2px solid var(--neon-fuchsia-500); outline-offset: 2px; border-radius: var(--r-xs); } /* ------------------------------------------------------------------------- Shell ------------------------------------------------------------------------- */ .page { min-height: 100dvh; display: flex; flex-direction: column; background: var(--grad-paper); position: relative; /* Clips the fruit mark where it bleeds off the bottom-right corner. The shell is min-height, not height, so tall content still grows and scrolls rather than being cut off. */ overflow: hidden; font-family: var(--font-sans); } /* ------------------------------------------------------------------------- Decorative fruit mark The design system calls for the mark scaled past 400px as a decorative element on empty/marketing states. Purely ornamental: aria-hidden in the markup and non-interactive here. ------------------------------------------------------------------------- */ .page__mark { position: absolute; /* Artboard value was clamp(-120px, -8vw, -40px). The ceiling is -56px here so that on a 320px screen the fruit clears the footer's email line; below 700px this tucks the mark 0–16px further into the corner, and at 700px and up -8vw already exceeds -56px so nothing changes. */ right: clamp(-120px, -8vw, -56px); bottom: clamp(-140px, -10vw, -60px); width: clamp(280px, 42vw, 560px); height: auto; opacity: 0.9; animation: mango-float 9s ease-in-out infinite; pointer-events: none; user-select: none; } /* Under ~380px the footer's email line is long enough to reach the fruit even stacked, so tuck the mark further into the corner there. It costs some of the mark's presence on the smallest screens, which is the better trade against unreadable contact details. If the address gets longer again, re-check this — the clearance at 320px is only about 8px. */ @media (max-width: 380px) { .page__mark { right: -104px; } } [data-mark='off'] .page__mark { display: none; } @keyframes mango-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(-4deg); } } /* ------------------------------------------------------------------------- Header ------------------------------------------------------------------------- */ .page__header { padding: clamp(20px, 4vw, 32px) clamp(20px, 6vw, 64px); position: relative; z-index: 1; } .page__wordmark { width: clamp(120px, 18vw, 168px); height: auto; display: block; } /* ------------------------------------------------------------------------- Hero ------------------------------------------------------------------------- */ .page__main { flex: 1; display: flex; align-items: center; /* The artboard's bottom value was clamp(96px, 14vw, 64px). With a floor above its ceiling that clamp always resolves to the floor, so this is the same 96px it rendered — enough room for the copy to clear the mark on narrow screens. */ padding: clamp(24px, 6vw, 48px) clamp(20px, 6vw, 64px) 96px; position: relative; z-index: 1; } .hero { display: flex; flex-direction: column; gap: clamp(16px, 3vw, 24px); max-width: 720px; } .hero__flag { display: flex; align-items: center; gap: 10px; } .hero__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--grad-dusk); flex: none; } .hero__title { font-size: var(--fs-display-m); margin: 0; color: var(--fg-1); } /* The headline's gradient phrase. `dusk` is the default; `mango` is the other option the artboard exposed. */ .hero__accent { background: var(--grad-dusk); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-accent='mango'] .hero__accent { background: var(--grad-mango); } @media (forced-colors: active) { .hero__accent { background: none; color: CanvasText; forced-color-adjust: none; } } .hero__lead { margin: 0; max-width: 52ch; } /* ------------------------------------------------------------------------- Footer ------------------------------------------------------------------------- */ .page__footer { padding: clamp(16px, 3vw, 24px) clamp(20px, 6vw, 64px); position: relative; z-index: 1; } /* Inherit the meta row's size and tracking so the mailto link sits in the line rather than interrupting it. */ .page__footer a { font-size: inherit; letter-spacing: inherit; } /* Below ~768px the fruit mark reaches far enough up the right side that a single-line meta row runs across it — 12px --fg-3 over saturated green is about 2:1, well under the 4.5:1 that size needs. Stacking the two items keeps them in the clear left column and leaves the artwork untouched. */ @media (max-width: 767px) { /* A column flex box rather than display:block on the items — flex-start keeps each one shrink-to-fit, so the mailto stays exactly as wide as its text instead of becoming a full-width tap target. */ .page__meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); } .page__meta-sep { display: none; } } /* ------------------------------------------------------------------------- Motion preferences The float is decoration; hold the mark at its resting angle for anyone who has asked for less movement. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .page__mark { animation: none; transform: rotate(-6deg); } a { transition: none; } }