/* ==========================================================================
ORA Commerce — logo motion system · v1.0
Mark: four bracket corners in a 76×76 box. Stroke 10, radius 8, arms to 28/48, round caps.
Accent (teal) is always the bottom-right corner and always arrives LAST.
Drop-in. No dependencies. Pairs with OraLogo.jsx / motion.html.
========================================================================== */
:root {
--ora-navy: #061432;
--ora-teal: #18C3B4;
--ora-teal-600: #12A899;
--ora-white: #FFFFFF;
--ora-ease-in: cubic-bezier(.2, .9, .28, 1); /* entrances */
--ora-ease-io: cubic-bezier(.4, 0, .2, 1); /* wipes, sweeps */
--ora-mark-stroke: 10;
}
/* --------------------------------------------------------------- lockup --- */
.ora-logo {
display: inline-flex;
align-items: center;
gap: 0.368em; /* locked ratio: 0.368 × mark side */
font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
line-height: 1;
color: var(--ora-navy);
font-size: 76px; /* = mark side. The ONLY thing you scale */
}
.ora-logo__mark { width: 1em; height: 1em; flex: none; overflow: visible; }
.ora-logo__corner { fill: none; stroke: currentColor; stroke-width: var(--ora-mark-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ora-logo__corner--accent { stroke: var(--ora-teal); }
.ora-logo__text { display: flex; flex-direction: column; gap: 0.03em; }
.ora-logo__word { font-weight: 700; font-size: 0.974em; letter-spacing: -0.0066em; }
.ora-logo__sub { font-weight: 500; font-size: 0.217em; letter-spacing: 0.55em; text-indent: 0.55em; text-align: justify; }
.ora-logo--dark { color: var(--ora-white); }
.ora-logo--mono .ora-logo__corner--accent { stroke: currentColor; }
/* stacked (vertical) — wordmark and sub centre under the WORDMARK block */
.ora-logo--stacked { flex-direction: column; gap: 0.22em; }
.ora-logo--stacked .ora-logo__word { font-size: 1.13em; }
.ora-logo--stacked .ora-logo__sub { font-size: 0.25em; }
/* --------------------------------------------------- intro · "the scan" ---
The four corners fly in from outside the frame and lock. Ink corners first
(30ms apart, clockwise from top-left), teal corner last. Wordmark wipes out
of the mark. Total 1.05s. Plays ONCE per session — splash, marketing hero,
onboarding step 1. Never on route change.
-------------------------------------------------------------------------- */
.ora-logo--intro .ora-logo__corner { animation: ora-corner-in 480ms var(--ora-ease-in) both; }
.ora-logo--intro .ora-logo__corner:nth-child(1) { animation-delay: 0ms; transform-origin: 5px 5px; }
.ora-logo--intro .ora-logo__corner:nth-child(2) { animation-delay: 60ms; transform-origin: 71px 5px; }
.ora-logo--intro .ora-logo__corner:nth-child(3) { animation-delay: 120ms; transform-origin: 5px 71px; }
.ora-logo--intro .ora-logo__corner--accent { animation-delay: 220ms; transform-origin: 71px 71px;
animation-name: ora-corner-in-accent; animation-duration: 560ms; }
.ora-logo--intro .ora-logo__text { animation: ora-word-wipe 420ms var(--ora-ease-io) 380ms both; }
.ora-logo--intro .ora-logo__tagline { animation: ora-tagline-up 300ms var(--ora-ease-io) 780ms both; }
@keyframes ora-corner-in {
from { opacity: 0; transform: scale(1.55); }
to { opacity: 1; transform: scale(1); }
}
@keyframes ora-corner-in-accent { /* travels a touch further, lands last */
0% { opacity: 0; transform: scale(1.85) rotate(-8deg); }
30% { opacity: 1; }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes ora-word-wipe {
from { opacity: .4; clip-path: inset(0 100% 0 0); }
to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes ora-tagline-up {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* exit (splash → app), 480ms */
.ora-logo--outro .ora-logo__tagline { animation: ora-tagline-up 150ms var(--ora-ease-io) reverse both; }
.ora-logo--outro .ora-logo__text { animation: ora-word-wipe 240ms var(--ora-ease-io) 110ms reverse both; }
.ora-logo--outro .ora-logo__corner { animation: ora-corner-out 220ms var(--ora-ease-io) 280ms both; }
@keyframes ora-corner-out { to { opacity: 0; transform: scale(1.3); } }
/* ============================== LIVE STATES ==============================
All states use viewBox "0 0 76 76" — the same four corners, no new shapes
except the scan line and the success tick.
Size with --ora-size (default 40px).
========================================================================= */
.ora-state { width: var(--ora-size, 40px); height: var(--ora-size, 40px); display: block; overflow: visible; color: var(--ora-navy); }
.ora-state--dark { color: var(--ora-white); }
.ora-state__corner { fill: none; stroke: currentColor; stroke-width: var(--ora-mark-stroke); stroke-linecap: round; stroke-linejoin: round; }
/* --- loading -------------------------------------------------------------
The frame drops to a 16% ghost and the teal corner tracks the four corner
positions clockwise, holding a beat at each. Replaces every spinner. */
.ora-loader__ghost { opacity: .16; }
.ora-loader__tracker {
fill: none; stroke: var(--ora-teal); stroke-width: var(--ora-mark-stroke);
stroke-linecap: round; stroke-linejoin: round;
transform-origin: 38px 38px;
animation: ora-track 1.6s steps(1, end) infinite;
}
@keyframes ora-track {
0%, 24% { transform: rotate(0deg); }
25%, 49% { transform: rotate(90deg); }
50%, 74% { transform: rotate(180deg); }
75%, 100% { transform: rotate(270deg); }
}
/* the smooth alternative: one corner sweeping continuously */
.ora-loader--sweep .ora-loader__tracker { animation: ora-track-smooth 1.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes ora-track-smooth { to { transform: rotate(360deg); } }
/* --- AI thinking ---------------------------------------------------------
A teal scan line sweeps the frame top→bottom and back while the corners
breathe. Use ONLY while ORA is generating. */
.ora-think__corner { animation: ora-breathe 2.2s ease-in-out infinite; }
.ora-think__corner--accent { stroke: var(--ora-teal); animation-delay: .3s; }
.ora-think__line {
stroke: var(--ora-teal); stroke-width: 4; stroke-linecap: round;
animation: ora-scanline 2.2s cubic-bezier(.45,0,.55,1) infinite;
}
.ora-think__glow { fill: var(--ora-teal); opacity: .12; animation: ora-glow 2.2s ease-in-out infinite; }
@keyframes ora-breathe { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes ora-scanline {
0% { transform: translateY(-16px); opacity: 0; }
12% { opacity: 1; }
50% { transform: translateY(16px); opacity: 1; }
88% { opacity: 1; }
100% { transform: translateY(-16px); opacity: 0; }
}
@keyframes ora-glow { 0%,100% { opacity: .06; } 50% { opacity: .18; } }
/* --- success ------------------------------------------------------------- */
.ora-success { animation: ora-success-pop 620ms cubic-bezier(.2,.9,.3,1) both; }
.ora-success__tick {
fill: none; stroke: var(--ora-teal); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 34; animation: ora-tick 400ms var(--ora-ease-io) 150ms both;
}
@keyframes ora-success-pop { 0% { transform: scale(1); } 32% { transform: scale(.88); } 62% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes ora-tick { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
/* --- error --------------------------------------------------------------- */
.ora-error { animation: ora-shake 380ms var(--ora-ease-io) both; }
@keyframes ora-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }
/* ========================= SHEEN — the idle mark =========================
A soft light band sweeps left→right across the four corners, masked so only
the strokes catch it. Teal on the ink corners, white on the accent corner.
Mark-only: the short-logo animation. In the lockup a matching light pass
crosses the letters 300ms behind. One 1.5s clock.
Markup per instance (ids MUST be unique):
… four .ora-glint-* corners …
========================================================================= */
.ora-glint-ink { fill: none; stroke: var(--ora-teal); stroke-width: var(--ora-mark-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ora-glint-accent { fill: none; stroke: var(--ora-white); stroke-width: var(--ora-mark-stroke); stroke-linecap: round; stroke-linejoin: round; }
.ora-glint-band { x: -46px; }
.ora-logo--sheen .ora-glint-band,
.ora-mark--sheen .ora-glint-band { animation: ora-band 1.5s var(--ora-ease-io) both; }
.ora-mark--sheen-loop .ora-glint-band { animation: ora-band 3.6s var(--ora-ease-io) infinite; }
@keyframes ora-band { from { x: -46px; } to { x: 84px; } }
.ora-logo--sheen .ora-logo__word,
.ora-logo--sheen .ora-logo__sub {
background-image: linear-gradient(100deg,
currentColor 0%, currentColor 42%,
var(--ora-teal) 50%, var(--ora-teal) 54%,
currentColor 62%, currentColor 100%);
background-size: 300% 100%;
-webkit-background-clip: text; background-clip: text;
color: transparent;
animation: ora-sheen 1.5s var(--ora-ease-io) 300ms both;
}
@keyframes ora-sheen { 0%, 12% { background-position: 0% 0; } 68%, 100% { background-position: 100% 0; } }
/* ========================== ACCESSIBILITY =============================== */
@media (prefers-reduced-motion: reduce) {
.ora-logo--intro *, .ora-logo--outro *,
.ora-success, .ora-success__tick, .ora-error,
.ora-glint-band, .ora-think__corner, .ora-think__line, .ora-think__glow,
.ora-logo--sheen .ora-logo__word, .ora-logo--sheen .ora-logo__sub { animation: none !important; }
.ora-logo--sheen .ora-logo__word, .ora-logo--sheen .ora-logo__sub { color: currentColor; background-image: none; }
.ora-glint-band { x: -46px !important; }
.ora-think__line, .ora-think__glow { opacity: 0 !important; }
.ora-loader__tracker { animation: ora-pulse 1.4s ease-in-out infinite !important; }
@keyframes ora-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
}
/* ==========================================================================
SITE ADAPTATION — appended; nothing above this line is edited, so the file
stays diffable against docs/Brand Package V1.0/animated/ora-motion.css.
The portal ships the same stylesheet with a near-identical block at
packages/portal-kit/src/ora-motion.css; keep the two fixes in step.
========================================================================== */
/* TYPOGRAPHY. Archivo, per the brand package. The site loads it from Google
Fonts, where the family name is plain "Archivo" — unlike the portals, which
self-host via @fontsource-variable and must name "Archivo Variable" first or
fall straight through to the backstop. Arabic keeps IBM Plex Sans Arabic as
the per-glyph backstop so AR text never falls to tofu. */
.ora-logo { font-family: "Archivo", "IBM Plex Sans Arabic", "Helvetica Neue", Arial, sans-serif; }
/* THIS SITE IS DARK EVERYWHERE. There is no `.dark` class to key off and no
light variant to preserve, so the reversed palette is the default rather than
a mode. (If a light surface is ever added, key it on `:root.dark, .dark` and
NOT on `:where(.dark)` — `:where()` contributes zero specificity and loses to
the brand file's own `:root`, which is how the mark vanished once already.)
The ACCENT corner deliberately stays teal in both cases: it is the brand. */
.ora-logo, .ora-state { color: var(--ora-white); }
/* SHEEN — the wordmark vanished.
The brand stylesheet paints the sheen with
background-image: linear-gradient(100deg, currentColor 0%, …)
color: transparent
on the SAME element. `currentColor` resolves against that element's own
`color`, so it resolves to transparent: the gradient runs transparent → teal →
transparent, and because the animation fills `both` the wordmark is left
holding the transparent end. ORA COMMERCE simply disappeared wherever
`animate="sheen"` was used — here, the nav lockup on every page.
Re-declare the gradient from an explicit ink token instead. */
:root { --ora-sheen-ink: #FFFFFF; }
.ora-logo--sheen .ora-logo__word,
.ora-logo--sheen .ora-logo__sub {
background-image: linear-gradient(100deg,
var(--ora-sheen-ink) 0%, var(--ora-sheen-ink) 42%,
var(--ora-teal) 50%, var(--ora-teal) 54%,
var(--ora-sheen-ink) 62%, var(--ora-sheen-ink) 100%);
}
@media (prefers-reduced-motion: reduce) {
.ora-logo--sheen .ora-logo__word,
.ora-logo--sheen .ora-logo__sub { color: var(--ora-sheen-ink); background-image: none; }
}
/* The site's global reduced-motion rule collapses every animation to .001ms,
which would fire the sheen's fill-mode instantly and leave the wordmark on
the gradient's end frame. The package's own reduced-motion block above kills
the animation outright and restores a flat colour, so the two agree — this
note exists so nobody "simplifies" one of them away. */