block, or paste into Wix Studio/Editor X “Custom CSS”). Palette: pastel purples, deep violets, smoky pinks, with chartreuse highlights. Features: animated aurora sky, drifting clouds, gothic nav, glowing buttons, glyph cursor (Devil’s Eye), portal/canvas styling, weave preview. Tips for Wix: - Regular Wix Editor: Add → Embed Code → Embed a Widget → HTML → paste . - Wix Studio / Editor X: Site Styles → Custom CSS → paste this file. - Fonts: This sheet @imports Google Fonts; if blocked, add through Wix Fonts. */ /* —————————————————————— */ /* 0) Fonts */ /* —————————————————————— */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=UnifrakturCook:wght@700&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap'); /* —————————————————————— */ /* 1) Design Tokens */ /* —————————————————————— */ :root{ /* Core hues */ --violet-900:#2a0f3b; /* deep violet */ --violet-700:#4b1d68; /* royal violet */ --violet-500:#7d3fd3; /* electric violet */ --pink-400:#e667b1; /* smoky pink */ --pink-300:#f2a1d6; /* pastel rose */ --blue-400:#6aa7ff; /* sky blue */ --blue-300:#9bc5ff; /* mist blue */ --green-300:#9afc87; /* meadow green */ --chartreuse:#d3ff49; /* arcadian pop */ /* Neutrals / overlays */ --ink:#0b0a11; --fog:#f7f5ff; --veil:rgba(255,255,255,.06); --shadow:rgba(0,0,0,.35); /* Glows */ --glow-violet:0 0 22px rgba(125,63,211,.65), 0 0 48px rgba(125,63,211,.25); --glow-chartreuse:0 0 14px rgba(211,255,73,.85), 0 0 36px rgba(211,255,73,.35); /* Radiance gradient for highlights */ --radiance: conic-gradient(from 210deg at 50% 50%, rgba(211,255,73,.85), rgba(122,63,211,.85), rgba(246,166,222,.85), rgba(155,197,255,.85), rgba(211,255,73,.85)); /* Sky gradient keyframes use these */ --sky-a:#2a0f3b; /* deep */ --sky-b:#5a1f7a; /* dusky */ --sky-c:#a14fca; /* bloom */ --sky-d:#f2a1d6; /* smoky pink */ --sky-e:#6aa7ff; /* blue break */ } /* —————————————————————— */ /* 2) Base + Accessibility */ /* —————————————————————— */ #SITE_CONTAINER #main_MF .css-editing-scope *{box-sizing:border-box} #SITE_CONTAINER #main_MF .css-editing-scope html,#SITE_CONTAINER #main_MF .css-editing-scope body{height:100%} #SITE_CONTAINER #main_MF .css-editing-scope body{ margin:0; color:#efe9ff; background:var(--violet-900); font-family:'EB Garamond', ui-serif, Georgia, serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } #SITE_CONTAINER #main_MF .css-editing-scope img{max-width:100%; display:block} #SITE_CONTAINER #main_MF .css-editing-scope :focus-visible{outline:2px solid var(--chartreuse); outline-offset:3px} @media (prefers-reduced-motion: reduce){ #SITE_CONTAINER #main_MF .css-editing-scope *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important} } /* —————————————————————— */ /* 3) Sky + Clouds (apply .arcadia-sky to a full‑bleed section) */ /* —————————————————————— */ #SITE_CONTAINER #main_MF .css-editing-scope .wixui-arcadia-sky{ position:relative; isolation:isolate; min-height:100vh; overflow:hidden; background: radial-gradient(120% 160% at 80% 10%, var(--sky-e) 0%, transparent 35%), radial-gradient(140% 120% at 0% 100%, var(--sky-d) 0%, transparent 45%), linear-gradient(120deg, var(--sky-a), var(--sky-b), var(--sky-c)); background-size: 200% 200%; animation: aurora 16s ease-in-out infinite alternate; } /* Soft moving haze */ #SITE_CONTAINER #main_MF .css-editing-scope .wixui-arcadia-sky::before{ content:""; position:absolute; inset:-20% -10%; z-index:-1; background: radial-gradient(60% 40% at 20% 10%, rgba(255,255,255,.06) 0%, transparent 60%), radial-gradient(70% 50% at 80% 30%, rgba(255,255,255,.05) 0%, transparent 70%), radial-gradient(60% 60% at 50% 80%, rgba(0,0,0,.25) 0%, transparent 70%); filter: blur(30px); animation: drift 40s linear infinite; } /* Cloud bands (smoky veils) */ #SITE_CONTAINER #main_MF .css-editing-scope .wixui-arcadia-sky::after{ content:""; position:absolute; inset:-10% -10%; pointer-events:none; background: repeating-linear-gradient( to right, rgba(255,255,255,.06) 0 12px, rgba(255,255,255,0) 12px 38px ), repeating-linear-gradient( to right, rgba(0,0,0,.05) 0 24px, rgba(0,0,0,0) 24px 72px ); mix-blend-mode: screen; filter: blur(8px) saturate(120%); transform: translate3d(0,0,0); animation: clouds 90s linear infinite; } @keyframes aurora{ 0%{background-position: 0% 50%} 100%{background-position: 100% 50%} } @keyframes drift{ to{ transform: translateX(5%) translateY(-2%) }} @keyframes clouds{ to{ background-position: 4000px 0 } } /* —————————————————————— */ /* 4) Typography & Headings */ /* —————————————————————— */ #SITE_CONTAINER #main_MF .css-editing-scope .wixui-h-gothic{font-family:'Cinzel','UnifrakturCook',serif; letter-spacing:.02em} #SITE_CONTAINER #main_MF .css-editing-scope .wixui-h-sigil{font-family:'UnifrakturCook','Cinzel',serif; letter-spacing:.01em} #SITE_CONTAINER #main_MF .css-editing-scope .wixui-lead{font-size:1.1rem; color:#e7dbff; max-width:68ch} #SITE_CONTAINER #main_MF .css-editing-scope h1,#SITE_CONTAINER #main_MF .css-editing-scope h2,#SITE_CONTAINER #main_MF .css-editing-scope h3{margin:.4em 0 .25em; line-height:1.1} #SITE_CONTAINER #main_MF .css-editing-scope h1{font:700 3rem/1 'Cinzel',serif; text-shadow: var(--glow-violet)} #SITE_CONTAINER #main_MF .css-editing-scope h2{font:600 2rem/1.1 'Cinzel',serif} #SITE_CONTAINER #main_MF .css-editing-scope h3{font:600 1.4rem/1.2 'Cinzel',serif} /* —————————————————————— */ /* 5) Navigation Tabs */ /* —————————————————————— */ #SITE_CONTAINER #main_MF .css-editing-scope .wixui-nav-arcadia{display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap} #SITE_CONTAINER #main_MF .css-editing-scope .wixui-nav-arcadia a{ position:relative; padding:.55rem .9rem; text-decoration:none; color:#f7f5ff; font:600 1rem 'Cinzel',serif; letter-spacing:.06em; text-transform:uppercase; } #SITE_CONTAINER #main_MF .css-editing-scope .wixui-nav-arcadia a::after{ content:""; position:absolute; left:12%; right:12%; bottom:.2rem; height:2px; background:linear-gradient(90deg, transparent, var(--chartreuse), transparent); opacity:.0; transform: scaleX(.8); transition: all .35s ease; } #SITE_CONTAINER #main_MF .css-editing-scope .wixui-nav-arcadia a:hover{ text-shadow: var(--glow-chartreuse) } #SITE_CONTAINER #main_MF .css-editing-scope .wixui-nav-arcadia a:hover::after{ opacity:1; transform: scaleX(1)} /* Active state helper */ #SITE_CONTAINER #main_MF .css-editing-scope .wixui-nav-arcadia .wixui-is-active{ color:var(--chartreuse) } /* —————————————————————— */ /* 6) Buttons */ /* —————————————————————— */ #SITE_CONTAINER #main_MF .css-editing-scope .wixui-btn-arcadia{ --pad-y:.8rem; --pad-x:1.2rem; display:inline-flex; align-items:center; gap:.55rem; padding:var(--pad-y) var(--pad-x); border-radius:16px; background: linear-gradient( to right, rgba(125,63,211,.85), rgba(246,161,214,.65) ); border:1px solid rgba(255,255,255,.18); color:white; text-decoration:none; font:600 1rem 'Cinzel',serif; box-shadow: 0 8px 24px var(--shadow), var(--glow-violet); transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; } #SITE_CONTAINER #main_MF .css-editing-scope .wixui-btn-arcadia:hover{ transform: translateY(-1px); filter: saturate(115%); box-shadow: 0 10px 28px var(--shadow), var(--glow-chartreuse) } #SITE_CONTAINER #main_MF .css-editing-scope .wixui-btn-arcadia.wixui-is-ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22) } /* —————————————————————— */ /* 7) Cards / Panels */ /* —————————————————————— */ #SITE_CONTAINER #main_MF .css-editing-scope .wixui-card-arcadia{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.16); border-radius:20px; padding:1.1rem 1.2rem; box-shadow: 0 10px 30px var(--shadow); backdrop-filter: blur(10px) saturate(120%); } #SITE_CONTAINER #main_MF .css-editing-scope .wixui-card-arcadia h3{ margin-top:.1rem } /* —————————————————————— */ /* 8) Glyph Cursor — Devil’s Eye */ /* —————————————————————— */ /* You can toggle the custom cursor by adding .cursor-arcadia to */ /* —————————————————————— */ /* 9) “Enter Arcadia” Hero */ /* —————————————————————— */ #SITE_CONTAINER #main_MF .css-editing-scope .wixui-hero-center{ min-height: 70vh; display:grid; place-items:center; text-align:center; padding:4rem 1rem; } #SITE_CONTAINER #main_MF .css-editing-scope .wixui-hero-title{ font:700 clamp(2.4rem, 5vw, 4rem) 'Cinzel',serif; text-shadow: var(--glow-violet) } #SITE_CONTAINER #main_MF .css-editing-scope .wixui-hero-sub{ font-size:1.15rem; opacity:.9; max-width:70ch; margin:.6rem auto 1.4rem } /* —————————————————————— */ /* 10) The Gate — Canvas / Portal */ /* —————————————————————— */ #SITE_CONTAINER #main_MF .css-editing-scope #wixui-gateCanvas, #SITE_CONTAINER #main_MF .css-editing-scope .wixui-gate-canvas{ width: min(100%, 960px); height: min(70vh, 560px); background: radial-gradient(120% 100% at 50% 50%, rgba(125,63,211,.20), rgba(0,0,0,.35)), repeating-conic-gradient(from 0deg, rgba(211,255,73,.06) 0 20deg, transparent 20deg 40deg); border:1px solid rgba(255,255,255,.22); border-radius:24px; overflow:hidden; box-shadow: 0 12px 36px var(--shadow), 0 0 0 2px rgba(211,255,73,.15) inset; } /* Portal ring */ #SITE_CONTAINER #main_MF .css-editing-scope .wixui-gate-ring{ position:relative; width:220px; height:220px; border-radius:50%; background: var(--radiance); filter: blur(2px) saturate(115%); box-shadow: var(--glow-chartreuse); animation: breathe 3.8s ease-in-out infinite; } @keyframes breathe{ 0%{transform:scale(.98)} 50%{transform:scale(1.02)} 100%{transform:scale(.98)} } /* —————————————————————— */ /* 11) Weave Preview — Flowing Strip */ /* —————————————————————— */ #SITE_CONTAINER #main_MF .css-editing-scope .wixui-weave-strip{ --h:120px; --w: 64vw; width:var(--w); height:var(--h); border-radius: 18px; position:relative; overflow:hidden; background: linear-gradient(90deg, rgba(246,161,214,.85), rgba(125,63,211,.85), rgba(155,197,255,.85), rgba(211,255,73,.75)); background-size: 300% 100%; animation: flow 10s linear infinite; box-shadow: 0 16px 40px var(--shadow), 0 0 0 2px rgba(255,255,255,.14) inset; } #SITE_CONTAINER #main_MF .css-editing-scope .wixui-weave-strip::after{ content:""; position:absolute; inset:-40% -10%; background: repeating-linear-gradient( to bottom, rgba(255,255,255,.16) 0 2px, rgba(255,255,255,0) 2px 8px ); mix-blend-mode: overlay; filter: blur(1px); animation: shimmer 3s ease-in-out infinite; } @keyframes flow{ to{ background-position: -300% 0 } } @keyframes shimmer{ 50%{ opacity:.6 } } /* —————————————————————— */ /* 12) Utility Classes */ /* —————————————————————— */ #SITE_CONTAINER #main_MF .css-editing-scope .wixui-center{ display:grid; place-items:center } #SITE_CONTAINER #main_MF .css-editing-scope .wixui-stack{ display:grid; gap:1rem } #SITE_CONTAINER #main_MF .css-editing-scope .wixui-pad-xl{ padding: clamp(1.2rem, 4vw, 3rem) } #SITE_CONTAINER #main_MF .css-editing-scope .wixui-max-80{ max-width:80rem; margin-inline:auto } #SITE_CONTAINER #main_MF .css-editing-scope .wixui-text-chartreuse{ color:var(--chartreuse) } /* —————————————————————— */ /* 13) Footer / Small Print */ /* —————————————————————— */ #SITE_CONTAINER #main_MF .css-editing-scope .wixui-footer-arcadia{ color:#d7cff2; opacity:.85; font-size:.95rem } #SITE_CONTAINER #main_MF .css-editing-scope .wixui-footer-arcadia a{ color:var(--pink-300); text-decoration:none } #SITE_CONTAINER #main_MF .css-editing-scope .wixui-footer-arcadia a:hover{ color:var(--chartreuse); text-shadow: var(--glow-chartreuse) }

top of page

da5f6fb9-c3a8-4ca5-b437-9734b34d041b.jpg.JPG

fiber art

Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.

ChatGPT Image May 15, 2025, 11_07_24 PM.png

tech and art

Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.

f5316e16-a01e-4b78-8873-59c669d1438a.jpg.JPG

vintage and artisan fabric art

Add paragraph text. Click “Edit Text” to update the font, size and more. To change and reuse text themes, go to Site Styles.

My Portfolio

Add paragraph text. Click “Edit Text” to update the font, size and more.

bottom of page