/* ========================================================================== Ownix marketing website — shared design system Brand palette mirrors the app (logo pink / coral / blue on a light slate UI). The Ownix QR page opts into an orange accent via . ========================================================================== */ :root { /* Brand (from the app logo) */ --pink: #ff4b8d; --coral: #ff6a6a; --blue: #5ba7e9; --accent: var(--pink); --accent-soft: #ffd8e4; --gradient: linear-gradient(135deg, #ff4b8d 0%, #ff6a6a 55%, #5ba7e9 130%); /* Neutrals (slate) */ --bg: #f8fafc; --bg-alt: #ffffff; --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --card: #ffffff; /* Shape & depth */ --radius: 18px; --radius-lg: 28px; --radius-premium: 28px 8px 28px 8px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08); --shadow: 0 10px 30px -12px rgba(15, 23, 42, .18); --shadow-lg: 0 30px 60px -20px rgba(255, 75, 141, .28); --maxw: 1140px; } /* QR sub-brand — amber/gold to match the yellow Ownix QR stickers. The gradient stays deep enough (amber-600/700) for white text to stay legible. */ body.theme-qr { --accent: #b45309; /* amber 700 — readable on light backgrounds */ --accent-soft: #fef3c7; /* amber 100 */ --gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #b45309 120%); --shadow-lg: 0 30px 60px -20px rgba(217, 119, 6, .30); } /* ------------------------------ Base ------------------------------------ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: "Outfit", "Inter", system-ui, sans-serif; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); margin: 0 0 .5em; } h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 800; } h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; } h3 { font-size: 1.25rem; font-weight: 700; } p { margin: 0 0 1rem; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } /* Offset anchored sections so they don't hide under the sticky header. */ section[id], [id] { scroll-margin-top: 90px; } .section { padding: 88px 0; } .section-tight { padding: 56px 0; } .center { text-align: center; } .muted { color: var(--muted); } .eyebrow { display: inline-block; font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; } .lead { font-size: 1.15rem; color: var(--muted); max-width: 620px; } .center .lead { margin-left: auto; margin-right: auto; } .gradient-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ------------------------------ Buttons --------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 1rem; padding: 13px 26px; border-radius: 14px; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; text-decoration: none; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn-primary { background: var(--gradient); color: #fff; box-shadow: var(--shadow); } .btn-primary:hover { box-shadow: var(--shadow-lg); } .btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* App-store style badges */ .store-badges { display: flex; flex-wrap: wrap; gap: 14px; } .center .store-badges { justify-content: center; } .badge { display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; padding: 11px 20px; border-radius: 14px; box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .2s ease; } .badge:hover { transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow-lg); } .badge svg { width: 26px; height: 26px; flex: none; } .badge .b-top { display: block; font-size: .68rem; opacity: .8; line-height: 1.1; } .badge .b-bot { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.15; font-family: "Outfit", sans-serif; } .badge.amazon { background: #ff9900; color: #131921; } /* ------------------------------ Header ---------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(248, 250, 252, .82); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; height: 70px; } .brand { display: flex; align-items: center; gap: 10px; } .brand img { height: 30px; width: auto; } .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; } .nav-links a { color: var(--ink); font-weight: 500; font-size: .98rem; } .nav-links a:hover { color: var(--accent); text-decoration: none; } .nav-cta { display: flex; align-items: center; gap: 14px; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; transition: .2s; } /* ------------------------------ Hero ------------------------------------ */ .hero { position: relative; overflow: hidden; padding: 84px 0 72px; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 80% 0%, rgba(91, 167, 233, .18), transparent 70%), radial-gradient(55% 55% at 12% 10%, rgba(255, 75, 141, .16), transparent 70%); } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .hero h1 { margin-bottom: .35em; } .hero .lead { font-size: 1.22rem; margin-bottom: 30px; } .hero-art { background: var(--gradient); border-radius: var(--radius-premium); padding: 36px; box-shadow: var(--shadow-lg); color: #fff; } .hero-art .phone { background: #fff; border-radius: 22px; padding: 22px; color: var(--ink); box-shadow: 0 20px 40px -16px rgba(15, 23, 42, .35); } /* ------------------------------ Cards / grids --------------------------- */ .grid { display: grid; gap: 22px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; } .card .ico { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 16px; } .card .ico svg { width: 26px; height: 26px; } .card h3 { margin-bottom: 8px; } .card p { color: var(--muted); margin: 0; font-size: .96rem; } /* Step list (how it works) */ .steps { counter-reset: step; display: grid; gap: 20px; } .step { display: flex; gap: 18px; align-items: flex-start; } .step .num { counter-increment: step; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-family: "Outfit", sans-serif; color: #fff; background: var(--gradient); box-shadow: var(--shadow); } .step .num::before { content: counter(step); } .step h3 { margin-bottom: 4px; } .step p { margin: 0; color: var(--muted); } /* Pills / callouts */ .note { display: flex; gap: 14px; align-items: center; background: var(--accent-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius); padding: 16px 20px; font-weight: 500; } .note svg { width: 26px; height: 26px; color: var(--accent); flex: none; } .cta-band { background: var(--gradient); color: #fff; border-radius: var(--radius-lg); padding: 56px; text-align: center; box-shadow: var(--shadow-lg); } .cta-band h2, .cta-band p { color: #fff; } .cta-band .badge { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); } .cta-band .badge.amazon { background: #131921; border-color: transparent; } /* ------------------------------ Legal pages ----------------------------- */ .legal { max-width: 820px; margin: 0 auto; } .legal .updated { color: var(--accent); font-weight: 700; font-size: .9rem; } .legal h2 { font-size: 1.3rem; margin-top: 2em; } .legal h3 { font-size: 1.08rem; margin-top: 1.6em; } .legal p, .legal li { color: #334155; } .legal ul { padding-left: 1.2em; } .legal li { margin-bottom: .5em; } /* ------------------------------ Footer ---------------------------------- */ .site-footer { background: var(--ink); color: #cbd5e1; padding: 56px 0 28px; } .site-footer a { color: #cbd5e1; } .site-footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; margin-bottom: 36px; } .site-footer .brand img { height: 28px; filter: brightness(0) invert(1); } .footer-col h4 { color: #fff; font-size: .95rem; margin-bottom: 14px; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 10px; font-size: .95rem; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .88rem; color: #94a3b8; } /* ------------------------------ Responsive ------------------------------ */ /* Landscape tablets: 4-up feature grid is too cramped — step down to 3. */ @media (max-width: 1040px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } } /* Portrait tablets & large phones: single-column hero, 2-up grids, burger nav. */ @media (max-width: 900px) { .section { padding: 64px 0; } .section-tight { padding: 48px 0; } .hero { padding: 56px 0 48px; } .hero-grid { grid-template-columns: 1fr; gap: 36px; } .hero .lead { font-size: 1.12rem; } .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .nav-links, .nav-cta .btn-ghost { display: none; } .nav-toggle { display: block; } .nav[data-open="true"] .nav-links { display: flex; position: absolute; left: 0; right: 0; top: 70px; flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 24px 18px; } .nav[data-open="true"] .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--line); } /* Stack split cards (QR teaser): text on top, image centered below. */ .split-card { grid-template-columns: 1fr; gap: 24px; padding: 32px 26px; text-align: center; } .split-card .eyebrow { align-self: center; } .split-card .lead, .split-card .center .lead { margin-left: auto; margin-right: auto; } .split-card .product-img { max-width: 340px; margin: 0 auto; } } /* Phones: everything single-column, tighter spacing. */ @media (max-width: 560px) { .section { padding: 52px 0; } .section-tight { padding: 40px 0; } .container { padding: 0 18px; } .grid-4, .grid-3, .grid-2, .footer-grid { grid-template-columns: 1fr; } .cta-band { padding: 36px 22px; } .hero-art { padding: 32px 22px; } .nav-cta .btn-primary { padding: 10px 16px; font-size: .92rem; } .store-badges { gap: 10px; } .badge { padding: 10px 16px; } } /* ========================================================================== Additions: consistent header, phone frames, screenshot gallery, product images, "coming soon" badge, and the floating bottom product dock. ========================================================================== */ /* Header stays brand-consistent on EVERY page (never adopts the QR theme). */ .site-header .btn-primary { background: linear-gradient(135deg, #ff4b8d 0%, #ff6a6a 55%, #5ba7e9 130%); } .site-header .nav-links a:hover { color: #ff4b8d; } /* Device frame for app screenshots (shots are 500×932). */ .phone-frame { width: 270px; max-width: 100%; margin: 0 auto; background: #0f172a; border: 10px solid #0f172a; border-radius: 38px; box-shadow: var(--shadow-lg); overflow: hidden; line-height: 0; } .phone-frame img { width: 100%; display: block; } .hero-shot { display: grid; place-items: center; position: relative; } .hero-shot::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: var(--gradient); filter: blur(60px); opacity: .35; z-index: 0; } .hero-shot .phone-frame { position: relative; z-index: 1; } /* Horizontal screenshot gallery. */ .shots { display: flex; gap: 26px; overflow-x: auto; padding: 10px 4px 24px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .shots::-webkit-scrollbar { height: 8px; } .shots::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; } .shots .shot { flex: 0 0 auto; width: 230px; scroll-snap-align: center; text-align: center; } .shots .shot .phone-frame { width: 230px; border-width: 8px; border-radius: 30px; } .shots .shot h3 { font-size: 1rem; margin: 16px 0 2px; } .shots .shot p { color: var(--muted); font-size: .88rem; margin: 0; } /* Two-column "split" card (e.g. the Ownix QR teaser on the home page). */ .split-card { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; padding: 40px; overflow: hidden; } /* Full-bleed product image (Ownix QR marketing art / stickers). */ .product-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; border: 1px solid var(--line); line-height: 0; } .product-img img { width: 100%; display: block; } /* "Coming soon" badge — looks like a store badge but is disabled. */ .badge.soon { background: #94a3b8; cursor: default; } .badge.soon:hover { transform: none; box-shadow: var(--shadow); } .badge.soon .b-top { opacity: .9; } .cta-band .badge.soon { background: rgba(255,255,255,.22); border: 1px dashed rgba(255,255,255,.5); } /* Floating bottom product dock (Ownix Home ⇄ Ownix QR), on every page. */ .site-footer { padding-bottom: 110px; } /* clear the floating dock */ .dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 60; display: flex; gap: 6px; padding: 6px; background: rgba(15, 23, 42, .92); backdrop-filter: blur(12px); border-radius: 999px; box-shadow: 0 18px 44px -12px rgba(15, 23, 42, .55); } .dock a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; color: #cbd5e1; font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; transition: background .2s ease, color .2s ease; } .dock a:hover { color: #fff; text-decoration: none; } .dock a.active { background: #fff; color: #0f172a; } .dock a.active.qr { background: #f5b400; color: #0f172a; } .dock a svg { width: 18px; height: 18px; } @media (max-width: 560px) { .dock a { padding: 10px 16px; font-size: .88rem; } } /* Center the CTA-band sub-headline. */ .cta-band .lead { margin-left: auto; margin-right: auto; } /* 404 / error page. */ .error-page { max-width: 620px; margin: 0 auto; padding: 24px 0; } .error-page .lead { margin-left: auto; margin-right: auto; } .error-code { font-family: "Outfit", sans-serif; font-weight: 800; line-height: 1; font-size: clamp(5rem, 22vw, 9rem); letter-spacing: -.04em; margin: 6px 0 10px; } .error-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; } @media (max-width: 420px) { .error-actions { flex-direction: column; } .error-actions .btn { width: 100%; justify-content: center; } } /* Screenshot carousel (arrows + autoscroll). */ .carousel { position: relative; } .carousel .shots { scroll-behavior: smooth; } .carousel-btn { position: absolute; top: 44%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: var(--shadow); font-size: 24px; line-height: 1; transition: transform .15s ease, color .2s ease, border-color .2s ease; } .carousel-btn:hover { color: #ff4b8d; border-color: #ff4b8d; transform: translateY(-50%) scale(1.08); } .carousel-btn.prev { left: -10px; } .carousel-btn.next { right: -10px; } @media (max-width: 640px) { .carousel-btn { display: none; } }