/* EYOX Scan phone-case DESIGN LANGUAGES. Not placements of one wordmark: twelve different visual systems, each built from the real EYOX brand vocabulary (the rising-dome mark, its glow circle, its fanning ray field), plus typography and texture. All stay inside the brand palette (teal-dominant, navy as accent) and carry the product name "Scan" plus the eyox logo, per KJ. Shown on the premium phone mockup. Layering: .skin holds the all-over treatment and is clipped to the rounded case; .camera and .logo sit above it; the .phone::after rim sits on top. */ :root { --t-a: #52808A; --t-b: #4A737D; --t-c: #416670; /* signature teal surface */ --t-deep: #34565E; --t-deeper: #2C4952; --navy: #1B4079; --glow-a: #E4F4F7; --glow-b: #BFE6EC; /* the mark's horizon glow */ --mist: #CFE0E4; --stone: #E7E3DA; --ink-lo: rgba(255,255,255,0.10); --ink-mid: rgba(255,255,255,0.18); } /* ---- shared layering ---- */ .skin { position: absolute; inset: 0; border-radius: 46px; overflow: hidden; z-index: 0; } .phone > .camera { z-index: 3; } .phone > .logo, .phone > .plate, .phone > .vtype { z-index: 4; } .phone::after { z-index: 5; } /* camera housing tint per surface (mockup.css only tints .cw-* cameras) */ .surf-teal .camera { background: linear-gradient(150deg, #4C7A84, #3C616B); } .surf-deep .camera { background: linear-gradient(150deg, #2C4E58, #1B353D); } /* white wordmark/product name on any teal or deep surface unless overridden */ .surf-teal .logo .pn, .surf-deep .logo .pn { color: rgba(255,255,255,0.90); } /* base teal surface used by most skins */ .surf-teal { background: radial-gradient(130% 100% at 28% 10%, rgba(255,255,255,0.16), rgba(255,255,255,0) 46%), linear-gradient(158deg, var(--t-a) 0%, var(--t-b) 42%, var(--t-c) 100%); } .surf-deep { background: radial-gradient(130% 100% at 28% 10%, rgba(255,255,255,0.10), rgba(255,255,255,0) 46%), linear-gradient(158deg, #2F535B 0%, #274850 42%, #1F3C44 100%); } /* a small white engraved lockup: eyox wordmark + Scan */ .logo.mini { gap: 8px; } .logo.mini .wm { width: 96px; } .logo.mini .pn { font-size: 21px; } /* ===================================================================== 01 — MARK HERO. The actual EYOX mark, large, with the wordmark beneath. The signature: the brand's own graphic, not a corner logo. ===================================================================== */ .d01 .mark { position: absolute; left: 50%; top: 132px; transform: translateX(-50%); width: 172px; } .d01 .logo { top: 420px; } .d01 .logo .wm { width: 118px; } .d01 .logo .pn { color: rgba(255,255,255,0.70); font-size: 25px; text-shadow: 0 1px 0 rgba(0,0,0,0.12); } /* ===================================================================== 02 — RAY FIELD. The mark's fanning horizontal rays, blown up as an all-over abstract texture, with the glow circle where they converge. ===================================================================== */ .d02 .rays { position: absolute; left: 0; right: 0; top: 232px; bottom: 96px; clip-path: polygon(4% 0, 96% 0, 68% 100%, 32% 100%); background: repeating-linear-gradient(180deg, rgba(255,255,255,0.22) 0 2px, rgba(255,255,255,0) 2px 13px); } .d02 .rayglow { position: absolute; left: 50%; top: 196px; transform: translate(-50%,-50%); width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle at 42% 38%, var(--glow-a), var(--glow-b) 70%, rgba(191,230,236,0) 100%); filter: blur(0.4px); } .d02 .logo { top: auto; bottom: 44px; } /* ===================================================================== 03 — RISING DOME. A poster: a large navy dome rising from the base, the glow circle on its horizon, wordmark set on the field. Minimal. ===================================================================== */ .d03 .dome { position: absolute; left: 50%; transform: translateX(-50%); bottom: -70px; width: 340px; height: 340px; border-radius: 50%; background: linear-gradient(180deg, #315C64 0%, #274850 62%, #20404A 100%); box-shadow: inset 0 2px 0 rgba(27,64,121,0.9); } .d03 .domeglow { position: absolute; left: 42%; bottom: 214px; transform: translate(-50%,50%); width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #EAF6F9, var(--glow-b) 66%, rgba(191,230,236,0) 100%); } .d03 .logo { top: auto; bottom: 120px; } .d03 .logo .wm { width: 128px; } .d03 .logo .pn { color: #EAF6F9; font-size: 26px; } /* ===================================================================== 04 — MONOGRAM CANVAS. The mark shrunk and tiled tone-on-tone as a subtle branded canvas, with one clear lockup in the centre. ===================================================================== */ .d04 .canvas { position: absolute; inset: -20px; background-image: url("assets/eyox-mark.png"); background-repeat: space; background-size: 46px 46px; opacity: 0.12; filter: brightness(0) invert(1); transform: rotate(-18deg) scale(1.35); transform-origin: center; } .d04 .logo { top: 300px; } .d04 .logo .wm { width: 118px; } .d04 .logo .pn { color: rgba(255,255,255,0.72); font-size: 25px; } /* ===================================================================== 05 — CAMERA HALO. Concentric hairline rings radiate from the camera module, so the hardware becomes the centre of the mark. ===================================================================== */ .d05 .halo { position: absolute; inset: 0; background: repeating-radial-gradient(circle at 76px 76px, rgba(255,255,255,0) 0 38px, rgba(255,255,255,0.14) 38px 39.4px, rgba(255,255,255,0) 39.4px 74px); } .d05 .logo { top: auto; bottom: 52px; } .d05 .logo .wm { width: 112px; } .d05 .logo .pn { color: rgba(255,255,255,0.70); font-size: 24px; } /* ===================================================================== 06 — OVERSIZED WORD. "Scan" set huge and ghosted, cropped by the right edge; the eyox wordmark small and quiet at the base. ===================================================================== */ .d06 .big { position: absolute; left: 50%; top: 300px; transform: translate(-50%,-50%); font-family: var(--font); font-weight: 700; font-size: 104px; letter-spacing: -0.03em; line-height: 0.9; white-space: nowrap; text-align: center; color: rgba(255,255,255,0.22); } .d06 .logo { top: auto; bottom: 46px; left: 30px; right: auto; justify-content: flex-start; } .d06 .logo .wm { width: 96px; } .d06 .logo .pn { display: none; } /* ===================================================================== 07 — VERTICAL LABEL. "EYOX · SCAN" in tracked-out caps running up the left edge, fashion-label style; the mark small opposite. ===================================================================== */ .d07 .vtype { position: absolute; left: 30px; top: 0; bottom: 0; display: flex; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font); font-weight: 600; font-size: 22px; letter-spacing: 0.42em; color: rgba(255,255,255,0.82); text-transform: uppercase; } .d07 .mark { position: absolute; left: 30px; bottom: 46px; width: 46px; opacity: 0.95; } /* ===================================================================== 08 — CLINICAL LABEL. A small precise specimen-style plate: hairline frame, wordmark, a fine spec line. Leans into the healthcare identity. ===================================================================== */ .d08 .plate { position: absolute; left: 44px; right: 44px; top: 250px; border: 1px solid rgba(255,255,255,0.42); border-radius: 8px; padding: 18px 18px 15px; text-align: left; background: rgba(255,255,255,0.05); } .d08 .plate .wm { width: 104px; display: block; } .d08 .plate .pn { display: block; margin-top: 3px; font-family: var(--font); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; color: #fff; } .d08 .plate .spec { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.24); font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 0.14em; color: rgba(255,255,255,0.66); text-transform: uppercase; } /* ===================================================================== 09 — HALFTONE. A dot field that fades across the case; the lockup small and quiet. Print-craft texture. ===================================================================== */ .d09 .dots { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.55) 1.7px, rgba(255,255,255,0) 2.1px); background-size: 15px 15px; -webkit-mask-image: radial-gradient(130% 100% at 82% 92%, #000 8%, rgba(0,0,0,0) 72%); mask-image: radial-gradient(130% 100% at 82% 92%, #000 8%, rgba(0,0,0,0) 72%); } .d09 .logo { top: 170px; } .d09 .logo .wm { width: 108px; } .d09 .logo .pn { color: rgba(255,255,255,0.72); font-size: 23px; } /* ===================================================================== 10 — HORIZON. The case split by the mark's horizon line; teal above, deep field below, the glow circle sitting on the seam. Wordmark below. ===================================================================== */ .d10 .lower { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; background: linear-gradient(180deg, #305A62 0%, #26474F 100%); border-top: 1.5px solid rgba(27,64,121,0.95); /* navy hairline as the accent */ } .d10 .seamglow { /* soft light bloom on the seam, not a sphere */ position: absolute; left: 50%; top: 332px; transform: translate(-50%,-50%); width: 240px; height: 62px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(234,246,249,0.55), rgba(234,246,249,0) 70%); filter: blur(2px); } .d10 .logo { top: 402px; } .d10 .logo .wm { width: 118px; } .d10 .logo .pn { color: #EAF6F9; font-size: 25px; } /* ===================================================================== 11 — TERRAZZO. A quiet speckle of brand-tone flecks over teal; tactile and premium. Small centred lockup. ===================================================================== */ .d11 .terra { position: absolute; inset: 0; background-image: url("data:image/svg+xml,"); background-size: 118px 118px; opacity: 0.5; } .d11 .logo { top: 300px; } .d11 .logo .wm { width: 116px; } .d11 .logo .pn { color: rgba(255,255,255,0.72); font-size: 25px; } /* ===================================================================== 12 — BLAUWDRUK. A fine technical grid tone-on-tone (minor + major rules), with the wordmark quiet in the lower-left. Clinical, precise, texture-led; not a recolour of anything else. ===================================================================== */ .d12 .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.16) 1px, transparent 1px); background-size: 25px 25px, 25px 25px, 125px 125px, 125px 125px; background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px; } .d12 .logo { top: auto; bottom: 50px; left: 32px; right: auto; justify-content: flex-start; } .d12 .logo .wm { width: 104px; } .d12 .logo .pn { color: rgba(255,255,255,0.80); font-size: 22px; } /* ===================================================================== FLAT COLOUR CASES + COLOURED LOGO (for the chosen designs 01 and 04) A plain flat case colour with the logo in brand navy and no product name. A coloured logo reads on a light case; a deep/teal case would need a light logo instead. ===================================================================== */ .flat-white { background: #FFFFFF; } .flat-stone { background: #ECE8DF; } .flat-mist { background: #DEECEF; } .flat-teal { background: #CFE0E4; } .flat-white .camera, .flat-stone .camera, .flat-mist .camera, .flat-teal .camera { background: linear-gradient(150deg, #D6DDE1, #BFC9CE); } .flat-white.phone::after, .flat-stone.phone::after, .flat-mist.phone::after, .flat-teal.phone::after { box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.7), inset 0 -3px 8px rgba(0,0,0,0.05), inset 0 0 0 1px rgba(0,0,0,0.06); } /* design 04 canvas: navy tone-on-tone on a light case (drop the white invert) */ .d04.flat-white .canvas, .d04.flat-stone .canvas, .d04.flat-mist .canvas, .d04.flat-teal .canvas { filter: none; opacity: 0.10; }