/* ============================================================ OneFilm — shared chrome for the text pages (/privacy, /support). Tokens mirror OneFilmTheme / AccentColor in the app; the landing page carries its own copy inline because it is self-contained. ============================================================ */ :root { color-scheme: dark; --bg: #050917; --bg-elev: #091125; --surface: #0e1834; --coral: #ff5d48; --coral-lift: #ff806b; --ultramarine: #2841e0; --lilac: #bfb5ff; --violet: #7668ff; --cream: #f6f2e8; --muted: #a0a6c0; --line: rgba(255, 255, 255, .09); --line-soft: rgba(255, 255, 255, .05); --radius: 22px; --ease: cubic-bezier(.22, 1, .36, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); } /* NB: the base colour lives on only — a background on paints above the negative-z backdrop and would hide it. */ body { margin: 0; color: var(--cream); font: 17px/1.68 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: var(--coral-lift); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } ::selection { background: rgba(255, 93, 72, .32); } .wrap { width: min(100%, 820px); margin: 0 auto; padding: 0 24px; } /* ---------- backdrop ---------- */ .backdrop { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; } .glow { position: absolute; border-radius: 50%; filter: blur(105px); will-change: transform; animation: drift 24s ease-in-out infinite alternate; } .glow.coral { width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(circle, rgba(255, 93, 72, .34), transparent 68%); top: -22vw; left: -24vw; } .glow.blue { width: 76vw; height: 76vw; max-width: 1000px; max-height: 1000px; background: radial-gradient(circle, rgba(40, 65, 224, .42), transparent 68%); top: 6vh; right: -34vw; animation-duration: 31s; animation-delay: -11s; } @keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(5vw, 4vh, 0) scale(1.2); } } .rays { position: absolute; top: -25vh; right: -8vw; width: 78vw; height: 120vh; background: conic-gradient(from 196deg at 100% 0%, transparent 0deg, rgba(150, 178, 255, .10) 7deg, transparent 13deg, transparent 21deg, rgba(150, 178, 255, .08) 27deg, transparent 34deg); filter: blur(6px); animation: rays 18s ease-in-out infinite alternate; } @keyframes rays { from { opacity: .5; transform: rotate(-2.5deg); } to { opacity: 1; transform: rotate(3.5deg); } } .strip { position: absolute; width: 170px; height: 190vh; top: -30vh; left: -6vw; transform: rotate(-19deg); opacity: .55; background: repeating-linear-gradient(to bottom, transparent 0 26px, rgba(255, 255, 255, .05) 26px 40px), linear-gradient(to right, rgba(255, 255, 255, .035) 0 18px, transparent 18px calc(100% - 18px), rgba(255, 255, 255, .035) calc(100% - 18px) 100%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent); } .grain { position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml;utf8,"); } /* ---------- nav ---------- */ header.bar { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease; } header.bar.stuck { background: rgba(5, 9, 23, .74); border-bottom-color: var(--line-soft); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); } header.bar .wrap { width: min(100%, 1120px); } nav { display: flex; align-items: center; gap: 13px; padding: 15px 0; } nav .mark { display: flex; align-items: center; gap: 12px; } nav .mark img { width: 36px; height: 36px; border-radius: 11px; box-shadow: 0 6px 18px rgba(0,0,0,.45); } nav .name { font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--cream); } nav .mark:hover { text-decoration: none; } nav .spacer { flex: 1; } nav a.mini { font-size: 15px; font-weight: 600; color: var(--muted); padding: 8px 13px; border-radius: 11px; transition: color .2s ease, background .2s ease; } nav a.mini:hover { color: var(--cream); background: rgba(255, 255, 255, .06); text-decoration: none; } nav .get { font-size: 14.5px; font-weight: 700; color: var(--cream); padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255, 93, 72, .45); background: linear-gradient(140deg, rgba(255, 93, 72, .22), rgba(118, 104, 255, .18)); transition: transform .25s var(--ease), box-shadow .25s ease, border-color .25s ease; } nav .get:hover { transform: translateY(-1px); text-decoration: none; border-color: rgba(255, 93, 72, .85); box-shadow: 0 10px 30px rgba(255, 93, 72, .28); } @media (max-width: 620px) { nav a.mini { display: none; } } /* ---------- page head ---------- */ .page-head { padding: 62px 0 34px; } .eyebrow { display: inline-flex; align-items: center; gap: 11px; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--coral); margin: 0 0 20px; } .eyebrow::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: currentColor; } .page-head h1 { font-size: clamp(38px, 6vw, 58px); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; margin: 0 0 14px; } .page-head .stamp { color: var(--muted); font-size: 15px; margin: 0; } .page-head .intro { color: var(--muted); font-size: 19px; margin: 20px 0 0; max-width: 40em; } /* ---------- prose ---------- */ .prose { padding-bottom: 40px; } .prose h2 { font-size: 21px; line-height: 1.25; letter-spacing: -.02em; font-weight: 750; margin: 46px 0 12px; padding-left: 16px; position: relative; } .prose h2::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--coral), var(--violet)); } .prose p { margin: 0 0 16px; color: rgba(246, 242, 232, .82); } .prose ul { margin: 0 0 16px; padding-left: 0; list-style: none; display: grid; gap: 12px; } .prose ul li { position: relative; padding-left: 26px; color: rgba(246, 242, 232, .82); } .prose ul li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 12px rgba(255, 93, 72, .6); } .prose strong { color: var(--cream); font-weight: 650; } .prose .note { color: var(--muted); font-size: 14.5px; } /* ---------- cards ---------- */ .facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 34px 0 8px; } .fact { background: linear-gradient(180deg, rgba(14, 24, 52, .7), rgba(9, 17, 37, .55)); border: 1px solid var(--line); border-radius: 18px; padding: 18px 16px; } .fact b { display: block; font-size: 15px; letter-spacing: -.01em; margin-bottom: 3px; } .fact span { color: var(--muted); font-size: 13.5px; line-height: 1.45; display: block; } @media (max-width: 820px) { .facts { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .facts { grid-template-columns: 1fr; } } .panel { background: linear-gradient(180deg, rgba(14, 24, 52, .72), rgba(9, 17, 37, .58)); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 24px; transition: transform .35s var(--ease), border-color .35s ease; } .panel + .panel { margin-top: 14px; } .panel:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .17); } .panel b { display: block; font-size: 18px; letter-spacing: -.02em; margin-bottom: 6px; } .panel p { margin: 0; color: var(--muted); font-size: 15.5px; } .contact { position: relative; overflow: hidden; border-radius: 28px; padding: 40px 32px; margin: 8px 0 12px; border: 1px solid rgba(255, 255, 255, .14); background: radial-gradient(70% 150% at 2% 0%, rgba(255, 93, 72, .8), transparent 56%), radial-gradient(75% 150% at 100% 100%, rgba(40, 65, 224, .8), transparent 56%), linear-gradient(160deg, #191534, #070b1c); box-shadow: 0 30px 90px rgba(255, 93, 72, .14); } .contact h2 { margin: 0 0 8px; font-size: 25px; letter-spacing: -.03em; font-weight: 800; } .contact p { margin: 0 0 22px; color: rgba(246, 242, 232, .84); } .mail-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--cream); color: #0a0a0c; font-weight: 650; font-size: 16px; padding: 12px 22px; border-radius: 14px; box-shadow: 0 14px 36px rgba(0, 0, 0, .4); transition: transform .3s var(--ease), box-shadow .3s ease; } .mail-btn:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 20px 46px rgba(0, 0, 0, .5); } .mail-btn svg { width: 19px; height: 19px; } /* ---------- footer ---------- */ footer { padding: 46px 0 60px; margin-top: 40px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line-soft); } footer .links { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 18px; } footer .links a { color: var(--cream); font-weight: 650; } footer .links a:hover { color: var(--coral); text-decoration: none; } footer .attr { max-width: 48em; line-height: 1.55; } /* the backdrop is sized in vw, so on a phone the glows drift off-canvas and the film strip reads as grey bands. Re-anchor and soften both. */ @media (max-width: 900px) { .page-head { padding: 44px 0 28px; } .strip { opacity: .3; left: -22vw; } .glow.coral { width: 130vw; height: 130vw; top: -34vw; left: -45vw; } .glow.blue { width: 140vw; height: 140vw; top: 10vh; right: -60vw; } .contact { padding: 32px 24px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .glow, .rays { animation: none !important; } }