/* Design tokens for the LOOMA marketing site. The design is one continuous glass-over-gradient surface, so the glass recipes (blur + tint + hairline + inner highlight) are tokens too — a card that invents its own rgba() is the thing that makes a page look assembled rather than designed. */ :root { /* ---------- ink ---------- */ --c-ink: #1f2937; /* headings, strong body */ --c-body: #555353; /* paragraphs, secondary */ --c-link: #156dbe; --c-link-hover: #0e5290; /* ---------- brand ---------- */ --c-primary: #2f80cd; --c-primary-deep: #0e5290; --c-primary-light: #4a90d9; --c-steel: #6993ba; --c-green: #7cb87c; --c-purple: #b87cb8; --c-clay: #d9914a; --c-amber: #dc970b; --c-amber-strong: #ec8a00; /* ---------- page ---------- */ --c-page: #fdfeff; /* The single wash every page sits on: near-white at the masthead, deepening to periwinkle and then sky by the footer. */ --page-wash: linear-gradient( 180deg, #fdfeff 0%, #f6f7fd 12%, #e9eafa 28%, #d5d5f4 46%, #c6c4f0 60%, #b0c3f1 80%, #93b9f2 100% ); /* ---------- glass ---------- */ --glass-blur-sm: blur(14px) saturate(160%); --glass-blur-md: blur(18px) saturate(150%); --glass-blur-lg: blur(22px) saturate(160%); --glass-fill-faint: rgba(255, 255, 255, 0.42); --glass-fill-soft: rgba(255, 255, 255, 0.5); --glass-fill: rgba(255, 255, 255, 0.55); --glass-fill-strong: rgba(255, 255, 255, 0.72); --glass-edge: rgba(255, 255, 255, 0.7); --glass-edge-bright: rgba(255, 255, 255, 0.85); --glass-edge-brightest: rgba(255, 255, 255, 0.95); --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.95); /* ---------- elevation ---------- */ --sh-card: 0 8px 32px rgba(31, 41, 55, 0.08); --sh-card-lg: 0 10px 40px rgba(31, 41, 55, 0.09); --sh-panel: 0 16px 50px rgba(31, 41, 55, 0.1); --sh-panel-lg: 0 20px 60px rgba(31, 41, 55, 0.12); --sh-float: 0 40px 90px -28px rgba(31, 41, 55, 0.35); --sh-chip: 0 14px 34px -16px rgba(31, 41, 55, 0.4); --sh-raise: 0 10px 26px -14px rgba(31, 41, 55, 0.35); --sh-primary: 0 16px 34px -12px rgba(47, 128, 205, 0.75); --sh-primary-hover: 0 20px 40px -12px rgba(47, 128, 205, 0.9); --sh-amber: 0 14px 30px -14px rgba(220, 151, 11, 0.9); /* ---------- geometry ---------- */ --r-sm: 14px; --r-md: 20px; --r-lg: 22px; --r-xl: 24px; --r-2xl: 26px; --r-3xl: 32px; --r-pill: 32px; --r-phone: 48px; --shell: 1240px; /* section content width */ --shell-wide: 1280px; /* nav + footer, which sit slightly wider */ --nav-h: 74px; --gutter: 20px; /* ---------- motion ---------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 150ms; --t-med: 180ms; /* ---------- type ---------- */ --font-sans: 'Poppins', system-ui, -apple-system, sans-serif; --font-ar: 'Tajawal', 'Poppins', system-ui, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: hidden; } body { font-family: var(--font-sans); color: var(--c-ink); background: var(--c-page); -webkit-font-smoothing: antialiased; } /* Arabic gets its own face; `dir` is set on by the i18n module. */ html[dir='rtl'] body { font-family: var(--font-ar); } a { color: var(--c-link); text-decoration: none; } a:hover { color: var(--c-link-hover); } :focus-visible { outline: 2px solid var(--c-link); outline-offset: 3px; border-radius: 10px; } button, input, textarea { font-family: inherit; } button { cursor: pointer; } img { max-width: 100%; } /* ---------- glass ---------- Browsers without backdrop-filter (older Firefox, some in-app webviews) get an opaque white instead, or every glass surface reads as muddy tint. */ .glass { background: var(--glass-fill-soft); -webkit-backdrop-filter: var(--glass-blur-md); backdrop-filter: var(--glass-blur-md); border: 1px solid var(--glass-edge); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass, [data-glass] { background: rgba(255, 255, 255, 0.86) !important; } } /* ---------- layout ---------- */ .shell { max-width: var(--shell); margin: 0 auto; } .section { padding: 64px var(--gutter); } /* ---------- type ---------- */ .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .section-title { margin: 0 0 12px; font-size: clamp(30px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.025em; color: var(--c-ink); text-align: center; text-wrap: balance; } .section-sub { margin: 0 auto 44px; max-width: 540px; font-size: 17px; line-height: 1.6; color: var(--c-body); text-align: center; text-wrap: pretty; } /* The small uppercase label above a section heading. Its colour names the subject (blue for the app, amber for LOOMI, purple for the studio), so it is set per use rather than fixed here. */ .kicker { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-steel); } /* Step counter on the walkthrough pages. */ .badge-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-size: 16px; font-weight: 800; color: var(--c-primary-deep); background: rgba(255, 255, 255, 0.7); border: 1px solid var(--glass-edge-brightest); box-shadow: 0 6px 18px -8px rgba(31, 41, 55, 0.35); } /* Every pill of label text — categories, order statuses, feature tags. The three custom properties are the whole API: set them inline to retint one. */ .chip { --chip-bg: rgba(255, 255, 255, 0.5); --chip-bd: var(--glass-edge-bright); --chip-fg: var(--c-primary-deep); display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 22px; font-size: 14.5px; font-weight: 600; color: var(--chip-fg); background: var(--chip-bg); border: 1px solid var(--chip-bd); } .chip-sm { padding: 9px 15px; border-radius: 18px; font-size: 13.5px; } .chip-lg { padding: 11px 20px; border-radius: 24px; font-weight: 700; } .chip-row { display: flex; flex-wrap: wrap; gap: 9px; } /* Shop and product links are shown as literal URLs; monospace keeps them from being read as prose. */ .mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; word-break: break-all; } /* ---------- motion ---------- */ @keyframes lm-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* The background orbs: a slow, off-cycle drift so the gradient never sits perfectly still behind the glass. */ @keyframes lm-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(3%, -4%, 0) scale(1.08); } } @keyframes lm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* v-reveal (src/directives/reveal.js) sets the start state; the observer adds .is-revealed. Both live here so a page with JS disabled still shows content — the directive only ever adds the hidden state once it is running. */ .reveal-init { opacity: 0; transform: translateY(20px); transition: opacity 480ms var(--ease), transform 480ms var(--ease); } .reveal-init.is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } .btn[data-v-1243010c] { display: inline-flex; align-items: center; justify-content: center; text-align: center; border-radius: var(--r-pill); font-family: inherit; font-weight: 700; text-decoration: none; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .btn[data-v-1243010c]:active { transform: scale(0.95); } /* ---------- fills ---------- */ .btn-bright[data-v-1243010c] { color: var(--c-link); background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.95) 100%); border: 1px solid var(--glass-edge-bright); box-shadow: var(--sh-primary), var(--glass-inner); } .btn-bright[data-v-1243010c]:hover { color: var(--c-link); box-shadow: var(--sh-primary-hover), var(--glass-inner); } .btn-glass[data-v-1243010c] { color: var(--c-primary-deep); background: rgba(255, 255, 255, 0.45); -webkit-backdrop-filter: var(--glass-blur-sm); backdrop-filter: var(--glass-blur-sm); border: 1px solid var(--glass-edge-bright); box-shadow: var(--sh-raise), var(--glass-inner); } .btn-glass[data-v-1243010c]:hover { color: var(--c-primary-deep); background: rgba(255, 255, 255, 0.68); } .btn-amber[data-v-1243010c] { color: #ffffff; background: linear-gradient(180deg, var(--c-amber-strong) 0%, var(--c-amber) 100%); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: var(--sh-amber), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .btn-amber[data-v-1243010c]:hover { color: #ffffff; } /* ---------- sizes ---------- */ .btn-sm[data-v-1243010c] { padding: 11px 22px; font-size: 14.5px; } .btn-md[data-v-1243010c] { padding: 15px 28px; font-size: 16px; } .btn-lg[data-v-1243010c] { padding: 17px 32px; font-size: 17px; } .langs[data-v-e6d69015] { display: flex; align-items: center; gap: 2px; border-radius: 24px; background: var(--glass-fill-soft); border: 1px solid var(--glass-edge); box-shadow: var(--glass-inner); } .langs-sm[data-v-e6d69015] { padding: 3px; } .langs-md[data-v-e6d69015] { padding: 4px; background: rgba(255, 255, 255, 0.6); } .lang[data-v-e6d69015] { border: 0; border-radius: 20px; background: transparent; color: var(--c-body); font-family: inherit; font-weight: 700; letter-spacing: 0.04em; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .langs-sm .lang[data-v-e6d69015] { padding: 6px 11px; font-size: 12.5px; } .langs-md .lang[data-v-e6d69015] { padding: 10px 16px; font-size: 13.5px; } .lang-ar[data-v-e6d69015] { font-family: var(--font-ar); letter-spacing: 0; } .langs-sm .lang-ar[data-v-e6d69015] { font-size: 13.5px; } .langs-md .lang-ar[data-v-e6d69015] { font-size: 15px; } .lang.is-on[data-v-e6d69015] { background: #ffffff; color: var(--c-primary-deep); box-shadow: 0 2px 8px rgba(31, 41, 55, 0.1); } .nav[data-v-4bafdcdd] { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: var(--glass-fill-faint); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 2px 18px rgba(31, 41, 55, 0.04); transition: background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); } .nav.is-scrolled[data-v-4bafdcdd] { background: var(--glass-fill-strong); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); box-shadow: 0 6px 26px rgba(31, 41, 55, 0.1); } .bar[data-v-4bafdcdd] { max-width: var(--shell-wide); margin: 0 auto; padding: 0 var(--gutter); height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 18px; } .brand[data-v-4bafdcdd] { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .brand img[data-v-4bafdcdd] { display: block; } .brand-name[data-v-4bafdcdd] { font-size: 20px; font-weight: 800; letter-spacing: 0.16em; color: var(--c-ink); } .links[data-v-4bafdcdd] { display: flex; align-items: center; gap: 8px; } .link[data-v-4bafdcdd] { padding: 9px 14px; border-radius: var(--r-md); font-size: 15px; font-weight: 500; color: var(--c-ink); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .link[data-v-4bafdcdd]:hover, .link.router-link-active[data-v-4bafdcdd] { background: rgba(255, 255, 255, 0.6); color: var(--c-primary-deep); } .tail[data-v-4bafdcdd] { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .burger[data-v-4bafdcdd] { width: 46px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: var(--r-sm); background: var(--glass-fill); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: var(--glass-inner); } .burger span[data-v-4bafdcdd] { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--c-ink); } .sheet[data-v-4bafdcdd] { /* The sheet hangs off a fixed masthead, so anything past the fold is unreachable — the page behind it scrolls, the sheet does not. In landscape the whole viewport is barely taller than the sheet, so it scrolls itself. */ max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain; padding: 6px var(--gutter) 22px; background: var(--glass-fill-strong); -webkit-backdrop-filter: var(--glass-blur-lg); backdrop-filter: var(--glass-blur-lg); border-top: 1px solid rgba(255, 255, 255, 0.8); animation: lm-rise var(--t-med) var(--ease) both; } .sheet-links[data-v-4bafdcdd] { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; } .sheet-link[data-v-4bafdcdd] { padding: 14px 8px; border-radius: var(--r-sm); font-size: 17px; font-weight: 600; color: var(--c-ink); border-bottom: 1px solid rgba(255, 255, 255, 0.9); } .sheet-link[data-v-4bafdcdd]:last-child { border-bottom: 0; } .sheet-tail[data-v-4bafdcdd] { display: flex; align-items: center; gap: 10px; padding-top: 12px; } .sheet-cta[data-v-4bafdcdd] { flex: 1; } .footer[data-v-47ee55c0] { position: relative; margin-top: 40px; padding: 56px var(--gutter) 32px; background: rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); border-top: 1px solid rgba(255, 255, 255, 0.75); color: var(--c-ink); } .cols[data-v-47ee55c0] { max-width: var(--shell-wide); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px 32px; } .about[data-v-47ee55c0] { max-width: 300px; } .brand[data-v-47ee55c0] { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .brand img[data-v-47ee55c0] { display: block; } .brand-name[data-v-47ee55c0] { font-size: 19px; font-weight: 800; letter-spacing: 0.16em; color: var(--c-ink); } .tagline[data-v-47ee55c0] { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--c-body); } .domain[data-v-47ee55c0] { margin: 0; font-size: 13.5px; color: var(--c-body); } .col-title[data-v-47ee55c0] { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-primary-deep); } .col-links[data-v-47ee55c0] { display: flex; flex-direction: column; gap: 10px; } .col-links a[data-v-47ee55c0] { font-size: 15px; color: var(--c-ink); } .col-links a[data-v-47ee55c0]:hover { color: var(--c-link); } .stores[data-v-47ee55c0] { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .store[data-v-47ee55c0] { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; border-radius: var(--r-2xl); font-size: 14px; font-weight: 600; color: var(--c-primary-deep); background: rgba(255, 255, 255, 0.7); border: 1px solid var(--glass-edge-brightest); box-shadow: 0 6px 16px -8px rgba(47, 128, 205, 0.5); } .base[data-v-47ee55c0] { max-width: var(--shell-wide); margin: 36px auto 0; padding-top: 22px; border-top: 1px solid var(--glass-edge-brightest); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .loomi[data-v-47ee55c0] { display: flex; align-items: center; gap: 10px; } /* LOOMI is drawn on white; multiply drops the box without needing a cut-out. */ .loomi img[data-v-47ee55c0] { display: block; object-fit: contain; mix-blend-mode: multiply; } .loomi p[data-v-47ee55c0], .rights[data-v-47ee55c0] { margin: 0; font-size: 13.5px; color: var(--c-body); } .rights[data-v-47ee55c0] { font-size: 13px; } .page[data-v-d9c880f9] { position: relative; padding-top: var(--nav-h); background: var(--page-wash); } .page-main[data-v-d9c880f9] { position: relative; } .orbs[data-v-d9c880f9] { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .orb[data-v-d9c880f9] { position: absolute; border-radius: 50%; filter: blur(30px); animation: lm-drift 22s ease-in-out infinite; } .orb-blue[data-v-d9c880f9] { top: -120px; left: -140px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(147, 185, 242, 0.55) 0%, rgba(147, 185, 242, 0) 68%); } .orb-violet[data-v-d9c880f9] { top: 380px; right: -180px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(198, 196, 240, 0.6) 0%, rgba(198, 196, 240, 0) 68%); animation-duration: 28s; animation-direction: reverse; } .orb-white[data-v-d9c880f9] { top: 1500px; left: -120px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 70%); filter: blur(20px); animation-duration: 26s; }