@charset "UTF-8"; /* ========================================================================== OURSON — Coming Soon Brand: warm, minimal, dependable, editorial. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts Acumin Pro (English) is an Adobe Fonts family and LBC (Arabic) is licensed separately — neither can be redistributed here. Enable ONE of the two options below once the licences are in place. Until then the stacks below fall back to the closest available neo-grotesque / naskh faces. Option A — Adobe Fonts (Acumin Pro). Add to before this file: Option B — self-host. Drop the webfonts in /assets/fonts/ and uncomment: @font-face{font-family:"Acumin Pro";src:url("../fonts/acumin-pro-regular.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Acumin Pro";src:url("../fonts/acumin-pro-bold.woff2")format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"LBC";src:url("../fonts/lbc-regular.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"LBC";src:url("../fonts/lbc-semibold.woff2")format("woff2");font-weight:600;font-style:normal;font-display:swap} -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 2. Tokens -------------------------------------------------------------------------- */ :root { /* Brand primaries — sampled from the OURSON brand profile */ --slate: #2b2b2b; --beige: #f6f1e8; --brown: #5b4033; /* Supporting muted tints only */ --clay: #a5735e; --taupe: #dbd7d1; --grey: #5b5b5b; /* Text on the dark hero scrim (all ≥ 4.5:1 against the scrimmed image) */ --ink-1: #f6f1e8; --ink-2: rgba(246, 241, 232, 0.88); --ink-3: rgba(246, 241, 232, 0.72); /* Type */ --font-en: "Acumin Pro", "Acumin Variable Concept", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-ar: "LBC", "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, "Arial Unicode MS", sans-serif; --font: var(--font-en); /* Large rounded corners — a recurring brand detail */ --r-lg: 28px; --r-md: 16px; --r-pill: 999px; /* Motion */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.33, 0.05, 0.2, 1); /* Layout */ --gutter: clamp(1.375rem, 5.5vw, 6.5rem); --measure: 33rem; } /* -------------------------------------------------------------------------- 3. Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; font-family: var(--font); font-weight: 400; color: var(--ink-1); background-color: var(--slate); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, picture { display: block; max-width: 100%; } h1, p { margin: 0; } button { font: inherit; color: inherit; } :where(:lang(ar)) { --font: var(--font-ar); } /* Arabic is a joined script — tracking breaks the letter connections. Reset it everywhere the Latin scale adds letter-spacing. */ [dir="rtl"] .eyebrow, [dir="rtl"] .headline, [dir="rtl"] .lede, [dir="rtl"] .secondary, [dir="rtl"] .btn, [dir="rtl"] .note, [dir="rtl"] .error, [dir="rtl"] .done, [dir="rtl"] .footer, [dir="rtl"] .skip-link, .lang--ar { letter-spacing: normal; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Visible keyboard focus, everywhere */ :focus-visible { outline: 2px solid var(--beige); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 60; padding: 0.625rem 1rem; background: var(--beige); color: var(--slate); border-radius: var(--r-pill); font-size: 0.8125rem; letter-spacing: 0.02em; text-decoration: none; transform: translateY(-160%); transition: transform 0.3s var(--ease); } .skip-link:focus-visible { transform: translateY(0); } /* -------------------------------------------------------------------------- 4. Backdrop — photography, scrim, bear motif, paper grain -------------------------------------------------------------------------- */ .backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background-color: #726557; /* average of the hero frame: paints before the image */ } .backdrop__media { position: absolute; inset: 0; /* Headroom so the parallax translate never exposes an edge */ scale: 1.06; will-change: transform; } .backdrop__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; animation: settle 2.6s var(--ease-soft) both; } /* Restrained slate-black overlay, weighted toward the content corner. The last layer is a warm brown wash so the frame stays in the brand's temperature instead of going neutral grey. */ .backdrop__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(43, 43, 43, 0.94) 0%, rgba(43, 43, 43, 0.62) 34%, rgba(43, 43, 43, 0.34) 62%, rgba(43, 43, 43, 0.46) 100%), linear-gradient(to right, rgba(43, 43, 43, 0.68) 0%, rgba(43, 43, 43, 0.28) 52%, rgba(43, 43, 43, 0.42) 100%), linear-gradient(rgba(91, 64, 51, 0.16), rgba(91, 64, 51, 0.16)); } /* Slow, low-opacity drift of the baby-bear "o" motif */ .backdrop__motif { position: absolute; inset: -12%; opacity: 0.038; overflow: hidden; } .backdrop__motif::before { content: ""; position: absolute; inset: 0; background-image: url("../brand/bear-pattern.svg"); background-repeat: repeat; background-size: 208px 317px; animation: drift 170s linear infinite; } /* Gentle paper grain */ .backdrop__grain { position: absolute; inset: 0; opacity: 0.055; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 200px 200px; } @keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-208px, -317px, 0); } } @keyframes settle { from { transform: scale(1.035); } to { transform: scale(1); } } /* -------------------------------------------------------------------------- 5. Reveal — soft upward fade, sequenced. Pure CSS so it survives no-JS. -------------------------------------------------------------------------- */ @keyframes reveal { from { opacity: 0; transform: translate3d(0, 15px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .reveal { animation: reveal 0.95s var(--ease) both; animation-delay: var(--d, 0s); } /* -------------------------------------------------------------------------- 6. Header — wordmark + language toggle -------------------------------------------------------------------------- */ .masthead { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.5rem, 3.4vw, 2.75rem) var(--gutter); } .wordmark { display: block; width: clamp(122px, 12.5vw, 176px); color: var(--beige); } .wordmark svg { width: 100%; height: auto; } .langs { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; letter-spacing: 0.1em; } .langs__sep { color: rgba(246, 241, 232, 0.42); font-size: 0.8125rem; } .lang { appearance: none; background: none; border: 0; padding: 0.375rem 0.25rem; cursor: pointer; color: rgba(246, 241, 232, 0.6); letter-spacing: inherit; text-transform: uppercase; transition: color 0.35s var(--ease); } .lang:hover { color: var(--ink-1); } .lang[aria-pressed="true"] { color: var(--ink-1); } .lang--ar { font-family: var(--font-ar); font-size: 0.9375rem; text-transform: none; } /* -------------------------------------------------------------------------- 7. Hero content — lower-left -------------------------------------------------------------------------- */ .hero { position: relative; z-index: 10; display: flex; align-items: flex-end; padding: clamp(2rem, 6vw, 3.5rem) var(--gutter) clamp(1rem, 3vw, 2rem); } .hero__inner { width: 100%; max-width: var(--measure); } .eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ink-3); } :lang(ar) .eyebrow { font-weight: 600; } .headline { margin-top: 0.9rem; font-size: clamp(2.45rem, 6.4vw, 4.6rem); font-weight: 400; line-height: 1.03; letter-spacing: -0.022em; text-wrap: balance; color: var(--ink-1); } :lang(ar) .headline { line-height: 1.24; } /* Thin dark-brown line, drawn left to right */ .rule { height: 2px; margin-top: clamp(1.35rem, 2.6vw, 1.9rem); border-radius: 2px; background: linear-gradient(to right, var(--clay) 0%, #7a5442 48%, rgba(122, 84, 66, 0) 100%); transform: scaleX(0); transform-origin: left center; animation: draw 1.15s var(--ease) both; animation-delay: var(--d, 0s); } [dir="rtl"] .rule { transform-origin: right center; background: linear-gradient(to left, var(--clay) 0%, #7a5442 48%, rgba(122, 84, 66, 0) 100%); } @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } .lede { margin-top: clamp(1.35rem, 2.6vw, 1.9rem); max-width: 30rem; font-size: clamp(1rem, 1.15vw, 1.0625rem); line-height: 1.66; color: var(--ink-2); } :lang(ar) .lede { line-height: 1.9; } .secondary { margin-top: 0.85rem; font-size: 0.9375rem; letter-spacing: 0.005em; color: var(--ink-3); } /* -------------------------------------------------------------------------- 8. Sign-up -------------------------------------------------------------------------- */ .signup { margin-top: clamp(1.9rem, 3.6vw, 2.5rem); } .signup__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; max-width: 32rem; } .field { flex: 1 1 13rem; min-width: 0; height: 3.5rem; padding: 0 1.375rem; font: inherit; font-size: 1rem; color: var(--ink-1); background: rgba(246, 241, 232, 0.08); border: 1px solid rgba(246, 241, 232, 0.3); border-radius: var(--r-pill); transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease); } .field::placeholder { color: rgba(246, 241, 232, 0.66); opacity: 1; } .field:hover { border-color: rgba(246, 241, 232, 0.46); } .field:focus { outline: none; background: rgba(246, 241, 232, 0.13); border-color: var(--beige); } .field:focus-visible { outline: 2px solid var(--beige); outline-offset: 2px; } .field[aria-invalid="true"] { border-color: var(--clay); } /* Primary button — inverts slate → dark brown on hover */ .btn { flex: 0 0 auto; height: 3.5rem; padding: 0 1.75rem; cursor: pointer; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase; white-space: nowrap; color: var(--beige); background: var(--slate); border: 1px solid rgba(246, 241, 232, 0.24); border-radius: var(--r-pill); transition: background-color 0.45s var(--ease-soft), border-color 0.45s var(--ease-soft), color 0.45s var(--ease-soft); } .btn:hover, .btn:focus-visible { background: var(--brown); border-color: var(--brown); color: var(--beige); } .btn[data-busy="true"] { opacity: 0.72; cursor: progress; } :lang(ar) .btn { text-transform: none; font-weight: 600; } .note { margin-top: 0.95rem; font-size: 0.8125rem; line-height: 1.55; color: var(--ink-3); } .error { margin-top: 0.7rem; font-size: 0.8125rem; color: #e6bda9; } .error:empty { display: none; } /* Success state replaces the form */ .done { margin-top: clamp(1.9rem, 3.6vw, 2.5rem); display: flex; align-items: center; gap: 0.875rem; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); letter-spacing: -0.005em; color: var(--ink-1); animation: reveal 0.8s var(--ease) both; } .done__mark { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: var(--beige); background: var(--brown); border-radius: var(--r-pill); } .done__mark svg { width: 1.125rem; height: 1.125rem; } /* -------------------------------------------------------------------------- 9. Footer -------------------------------------------------------------------------- */ .footer { position: relative; z-index: 10; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; padding: clamp(1.25rem, 3vw, 2.25rem) var(--gutter) clamp(1.5rem, 3vw, 2.25rem); font-size: 0.75rem; letter-spacing: 0.04em; color: rgba(246, 241, 232, 0.62); } /* -------------------------------------------------------------------------- 10. Responsive -------------------------------------------------------------------------- */ @media (min-width: 900px) { .hero { padding-bottom: clamp(2rem, 5vh, 4rem); } .footer { font-size: 0.75rem; } } /* Tall / narrow: give the content room and keep the logo prominent */ @media (max-width: 640px) { :root { --measure: 100%; } .backdrop__media img { object-position: 50% 30%; } .backdrop__motif { opacity: 0.03; } .masthead { padding-top: 1.75rem; align-items: flex-start; } .wordmark { width: 132px; } .hero { padding-top: 2.5rem; } .headline { font-size: clamp(2.3rem, 10.5vw, 3rem); } .lede { font-size: 1rem; max-width: 34ch; } /* One-handed: full-width stacked controls, thumb-reachable. flex must be reset — in a column track `flex-basis` would size the height. */ .signup__row { flex-direction: column; align-items: stretch; gap: 0.75rem; } .field, .btn { flex: 0 0 auto; width: 100%; height: 3.625rem; } .btn { padding: 0 1.25rem; } .footer { gap: 0.75rem 1.25rem; } } /* Laptop-height windows: tighten the vertical rhythm so the page still fits on one screen without scrolling. */ @media (min-width: 641px) and (max-height: 900px) { .hero { padding-top: 1.75rem; } .signup { margin-top: 1.6rem; } .footer { padding-top: 1.1rem; padding-bottom: 1.4rem; } } /* Short landscape phones — let the page scroll rather than crush the layout */ @media (max-height: 620px) and (min-width: 641px) { .hero { align-items: center; padding-top: 1.5rem; } .headline { font-size: clamp(2rem, 4.6vw, 3rem); } } /* -------------------------------------------------------------------------- 11. Reduced motion — drop every decorative animation -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .reveal, .done { animation: none !important; opacity: 1; transform: none; } .rule { animation: none !important; transform: scaleX(1); } .backdrop__media img { animation: none !important; } .backdrop__motif::before { animation: none !important; } .backdrop__media { scale: 1; } .field, .btn, .lang, .skip-link { transition-duration: 1ms; } }