/* ============================================================ CliffPop - Logo Wordmark Direction 03: DM Serif Display, all caps, flat ellipsis, "Pop" + ellipsis in brand pop pink, animated wave on the dots. Required font (load in of the host page): Brand colors used: --cliffpop-cream : #F6F1E7 (the "Cliff" portion / on dark bg) --cliffpop-pop : #FF3D6E (the "Pop" portion + ellipsis) On a light/cream background, swap .cliffpop-logo .cliff to a dark ink color (see .cliffpop-logo--inverted modifier below). ============================================================ */ :root { --cliffpop-cream: #F6F1E7; --cliffpop-pop: #FF3D6E; --cliffpop-ink: #16161E; } .cliffpop-logo { /* Sizing: scale the whole lockup by setting font-size on this element. Recommended: - hero : 84px–120px - header : 28px - nav : 22px - footer : 20px */ display: inline-flex; align-items: baseline; gap: 0; font-family: "DM Serif Display", "Fraunces", Georgia, serif; font-weight: 400; font-style: normal; font-size: 28px; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--cliffpop-cream); user-select: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .cliffpop-logo .cliff { color: inherit; } .cliffpop-logo .pop { color: var(--cliffpop-pop); } .cliffpop-logo .dots { display: inline-flex; align-items: baseline; margin-left: 0.1em; letter-spacing: -0.05em; color: var(--cliffpop-pop); } /* Light-background modifier */ .cliffpop-logo--inverted { color: var(--cliffpop-ink); } /* Static (non-animated) form - use as fallback or for print/email */ .cliffpop-logo--static .dots .dot { transform: none !important; animation: none !important; } /* ───────── Animated wavy ellipsis ───────── Each dot bobs vertically on a sine offset. Gentle (8px @ hero size, scales with em via translateY in em). Phase-shifted so they ripple left → right. Respects prefers-reduced-motion. */ .cliffpop-logo .dots .dot { display: inline-block; animation: cliffpopDotWave 1.8s ease-in-out infinite; will-change: transform; } .cliffpop-logo .dots .dot:nth-child(1) { animation-delay: 0s; } .cliffpop-logo .dots .dot:nth-child(2) { animation-delay: 0.18s; } .cliffpop-logo .dots .dot:nth-child(3) { animation-delay: 0.36s; } @keyframes cliffpopDotWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.18em); } } @media (prefers-reduced-motion: reduce) { .cliffpop-logo .dots .dot { animation: none; transform: none; } } /* ───────── Optional: hover-triggered wave (for non-header uses) ───────── Add class .cliffpop-logo--hoverwave to make the wave run only on hover. */ .cliffpop-logo--hoverwave .dots .dot { animation-play-state: paused; } .cliffpop-logo--hoverwave:hover .dots .dot { animation-play-state: running; }