.elementor-17 .elementor-element.elementor-element-8ef5dfe{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-17 .elementor-element.elementor-element-cfa6f13{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-17 .elementor-element.elementor-element-3769a63{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--z-index:0;}.elementor-17 .elementor-element.elementor-element-c813408{width:100%;max-width:100%;z-index:-1;}.elementor-17 .elementor-element.elementor-element-fb066e5{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;}.elementor-17 .elementor-element.elementor-element-fb066e5:not(.elementor-motion-effects-element-type-background), .elementor-17 .elementor-element.elementor-element-fb066e5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EDE6DD;}.elementor-17 .elementor-element.elementor-element-fb066e5.e-con{--align-self:center;}.elementor-17 .elementor-element.elementor-element-745824b{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-17 .elementor-element.elementor-element-524ffb1{--display:flex;}body.elementor-page-17:not(.elementor-motion-effects-element-type-background), body.elementor-page-17 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F6EBD9E0;}@media(max-width:1024px){.elementor-17 .elementor-element.elementor-element-745824b{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}@media(max-width:767px){.elementor-17 .elementor-element.elementor-element-fb066e5{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for html, class: .elementor-element-cfa6f13 */ Hero v2 /* ============================================================ Famo.me — Hero v2, no glass card WHY THE CARD GOES Measured from your screenshot: paper behind the card #F1E3CE luminance 225 inside the card #DFD3C0 luminance 209 The card is DARKER than the art it sits on, so it reads as a grey patch over the best part of the illustration. Frosted glass only earns its keep over busy pixels. Here the paper is calm (stdev 3.1) so the type can sit straight on it. WHERE: Appearance → Customize → Additional CSS CLASSES hero SECTION → famo-hero text CONTAINER → famo-hero-copy Remove famo-glass from the container. ============================================================ */ /* ---------- the section ---------- */ .famo-hero { position: relative !important; isolation: isolate !important; overflow: hidden !important; min-height: 88vh !important; display: flex !important; align-items: center !important; background-color: #EFE3D0 !important; background-size: cover !important; background-position: right center !important; background-repeat: no-repeat !important; } /* seam eraser + a soft place for type to live. Cream, so it lifts the paper instead of dulling it. */ .famo-hero::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: linear-gradient( 100deg, #F3E8D6 0%, #F3E8D6 14%, rgba(243, 232, 214, 0.97) 26%, rgba(244, 234, 217, 0.88) 36%, rgba(245, 236, 220, 0.62) 45%, rgba(246, 238, 223, 0.26) 54%, rgba(246, 238, 223, 0.00) 64% ) !important; } /* one warm bloom, top-left, so the flat area has some light in it */ .famo-hero::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient( 62% 70% at 16% 28%, rgba(255, 250, 240, 0.55) 0%, rgba(255, 250, 240, 0.18) 42%, rgba(255, 250, 240, 0.00) 72% ) !important; } /* ---------- the copy block ---------- */ .famo-hero-copy { position: relative !important; z-index: 2 !important; /* no background, no border, no shadow — the art is the backdrop */ background: transparent !important; border: 0 !important; box-shadow: none !important; width: 100% !important; max-width: 560px !important; padding: 0 !important; margin-left: clamp(24px, 6vw, 104px) !important; } /* a rule instead of a box: quieter, and it points into the art */ .famo-hero-copy::before { content: "" !important; display: block !important; width: 52px !important; height: 1px !important; margin: 0 0 34px !important; background: linear-gradient(90deg, #B08968, rgba(176, 137, 104, 0)) !important; } /* ---------- entrance, staggered ---------- */ .famo-hero-copy > * { opacity: 0 !important; transform: translateY(16px) !important; animation: famoRise 900ms cubic-bezier(0.22, 0.68, 0.24, 1) forwards !important; } .famo-hero-copy > *:nth-child(1) { animation-delay: 120ms !important; } .famo-hero-copy > *:nth-child(2) { animation-delay: 260ms !important; } .famo-hero-copy > *:nth-child(3) { animation-delay: 400ms !important; } .famo-hero-copy > *:nth-child(4) { animation-delay: 540ms !important; } @keyframes famoRise { to { opacity: 1 !important; transform: translateY(0) !important; } } /* the rule draws itself in */ .famo-hero-copy::before { animation: famoRule 800ms cubic-bezier(0.22, 0.68, 0.24, 1) 60ms backwards !important; } @keyframes famoRule { from { width: 0 !important; opacity: 0 !important; } to { width: 52px !important; opacity: 1 !important; } } /* ---------- slow drift on the artwork ---------- */ /* 40s, 3% of travel — you never catch it moving, but it is alive */ @media (min-width: 768px) { .famo-hero { background-size: 106% auto !important; animation: famoDrift 44s ease-in-out infinite alternate !important; } @keyframes famoDrift { from { background-position: 100% 50% !important; } to { background-position: 94% 47% !important; } } } /* ---------- scroll cue ---------- */ .famo-hero-cue { position: absolute !important; left: clamp(24px, 6vw, 104px) !important; bottom: 40px !important; z-index: 2 !important; display: flex !important; align-items: center !important; gap: 12px !important; font-family: Inter, Arial, sans-serif !important; font-size: 10px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: rgba(90, 78, 66, 0.62) !important; opacity: 0 !important; animation: famoRise 900ms ease 900ms forwards !important; } .famo-hero-cue::after { content: "" !important; display: block !important; width: 46px !important; height: 1px !important; background: rgba(90, 78, 66, 0.4) !important; transform-origin: left center !important; animation: famoPull 2.6s ease-in-out infinite !important; } @keyframes famoPull { 0%, 100% { transform: scaleX(0.55) !important; opacity: 0.5 !important; } 50% { transform: scaleX(1) !important; opacity: 1 !important; } } /* ---------- responsive ---------- */ @media (max-width: 1024px) { .famo-hero-copy { max-width: 480px !important; } } @media (max-width: 767px) { .famo-hero { min-height: 0 !important; padding: 96px 0 72px !important; align-items: flex-start !important; background-position: 72% center !important; } .famo-hero::before { background: linear-gradient( to bottom, rgba(243, 232, 214, 0.96) 0%, rgba(243, 232, 214, 0.90) 42%, rgba(244, 234, 217, 0.55) 66%, rgba(245, 236, 220, 0.10) 88%, rgba(245, 236, 220, 0.00) 100% ) !important; } .famo-hero-copy { max-width: 100% !important; margin-left: 0 !important; padding: 0 24px !important; } .famo-hero-copy::before { margin-bottom: 24px !important; } .famo-hero-cue { display: none !important; } } @media (prefers-reduced-motion: reduce) { .famo-hero, .famo-hero-copy > *, .famo-hero-copy::before, .famo-hero-cue, .famo-hero-cue::after { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ============================================================ THE BIGGER WIN — worth more than any CSS here 1. LET IT BREATHE Your hero is 2.6:1. That is a letterbox, not a hero. The eye has no room to travel. Set the section to min-height 88vh and the crowd gets scale and the walk gets distance. 2. THE LONE FIGURE IS YOUR STORY One person has stopped and asked "where are we going?" while the crowd streams past. That is exactly what your copy says. Right now they are tiny and cropped low. Position the artwork so that figure sits near the lower third, roughly opposite the end of your last line of type. 3. LOSE THE SECOND CENTRE Your type is centre-aligned inside a left-hand box, which gives the eye two competing axes. Left-align it. The ragged right edge will point into the empty paper and toward the crowd — the composition starts doing work. ============================================================ */
no card · left-aligned · slow drift

Writer • Researcher • Ceramic Artist

Being born human
is only the beginning.

The rest is the slow practice of becoming.

Start reading
Scroll

The page continues here.

/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-745824b */width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); min-height: 100vh;/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fb066e5 */.elementor-17 .elementor-element.elementor-element-fb066e5 { position: relative; background: #1B1610; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Warm lamp glow nearby, barely visible */ .elementor-17 .elementor-element.elementor-element-fb066e5::before { content: ''; position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); width: 75%; height: 55%; background: radial-gradient(ellipse, rgba(184, 131, 46, 0.035) 0%, transparent 70%); pointer-events: none; z-index: 1; } /* Noise texture */ .elementor-17 .elementor-element.elementor-element-fb066e5::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.015'/%3E%3C/svg%3E"); opacity: 0.5; pointer-events: none; z-index: 2; }/* End custom CSS */