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#main_MF .css-editing-scope *{box-sizing:border-box} #SITE_CONTAINER #main_MF#main_MF .css-editing-scope html,#SITE_CONTAINER #main_MF#main_MF .css-editing-scope body{height:100%} #SITE_CONTAINER #main_MF#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#main_MF .css-editing-scope img{max-width:100%; display:block} #SITE_CONTAINER #main_MF#main_MF .css-editing-scope :focus-visible{outline:2px solid var(--chartreuse); outline-offset:3px} @media (prefers-reduced-motion: reduce){ #SITE_CONTAINER #main_MF#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#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#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#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#main_MF .css-editing-scope .wixui-h-gothic{font-family:'Cinzel','UnifrakturCook',serif; letter-spacing:.02em} #SITE_CONTAINER #main_MF#main_MF .css-editing-scope .wixui-h-sigil{font-family:'UnifrakturCook','Cinzel',serif; letter-spacing:.01em} #SITE_CONTAINER #main_MF#main_MF .css-editing-scope .wixui-lead{font-size:1.1rem; color:#e7dbff; max-width:68ch} #SITE_CONTAINER #main_MF#main_MF .css-editing-scope h1,#SITE_CONTAINER #main_MF#main_MF .css-editing-scope h2,#SITE_CONTAINER #main_MF#main_MF .css-editing-scope h3{margin:.4em 0 .25em; line-height:1.1} #SITE_CONTAINER #main_MF#main_MF .css-editing-scope h1{font:700 3rem/1 'Cinzel',serif; text-shadow: var(--glow-violet)} #SITE_CONTAINER #main_MF#main_MF .css-editing-scope h2{font:600 2rem/1.1 'Cinzel',serif} #SITE_CONTAINER #main_MF#main_MF .css-editing-scope h3{font:600 1.4rem/1.2 'Cinzel',serif} /* —————————————————————— */ /* 5) Navigation Tabs */ /* —————————————————————— */ #SITE_CONTAINER #main_MF#main_MF .css-editing-scope .wixui-nav-arcadia{display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap} #SITE_CONTAINER #main_MF#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#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#main_MF .css-editing-scope .wixui-nav-arcadia a:hover{ text-shadow: var(--glow-chartreuse) } #SITE_CONTAINER #main_MF#main_MF .css-editing-scope .wixui-nav-arcadia a:hover::after{ opacity:1; transform: scaleX(1)} /* Active state helper */ #SITE_CONTAINER #main_MF#main_MF .css-editing-scope .wixui-nav-arcadia .wixui-is-active{ color:var(--chartreuse) } /* —————————————————————— */ /* 6) Buttons */ /* —————————————————————— */ #SITE_CONTAINER #main_MF#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#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#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#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#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#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#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#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#main_MF .css-editing-scope #wixui-gateCanvas, #SITE_CONTAINER #main_MF#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#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#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#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#main_MF .css-editing-scope .wixui-center{ display:grid; place-items:center } #SITE_CONTAINER #main_MF#main_MF .css-editing-scope .wixui-stack{ display:grid; gap:1rem } #SITE_CONTAINER #main_MF#main_MF .css-editing-scope .wixui-pad-xl{ padding: clamp(1.2rem, 4vw, 3rem) } #SITE_CONTAINER #main_MF#main_MF .css-editing-scope .wixui-max-80{ max-width:80rem; margin-inline:auto } #SITE_CONTAINER #main_MF#main_MF .css-editing-scope .wixui-text-chartreuse{ color:var(--chartreuse) } /* —————————————————————— */ /* 13) Footer / Small Print */ /* —————————————————————— */ #SITE_CONTAINER #main_MF#main_MF .css-editing-scope .wixui-footer-arcadia{ color:#d7cff2; opacity:.85; font-size:.95rem } #SITE_CONTAINER #main_MF#main_MF .css-editing-scope .wixui-footer-arcadia a{ color:var(--pink-300); text-decoration:none } #SITE_CONTAINER #main_MF#main_MF .css-editing-scope .wixui-footer-arcadia a:hover{ color:var(--chartreuse); text-shadow: var(--glow-chartreuse) }
top of page

​

Project Name Four

2023

This is a paragraph. It is connected to a CMS collection through a dataset. Click “Edit Text” to update content in the connected CMS collection. The CMS can be used to store website content, or to collect data from site visitors when they submit a form. The CMS collection is already set up with some fields and content. To customize it with your own content, import a CSV file or simply edit this placeholder text from the collection. You can also add more fields, which you can then connect to other page elements to display content on your published site.

This is a paragraph. It is connected to a CMS collection through a dataset. Click “Edit Text” to update content in the connected CMS collection. The CMS can be used to store website content, or to collect data from site visitors when they submit a form. The CMS collection is already set up with some fields and content. To customize it with your own content, import a CSV file or simply edit this placeholder text from the collection. You can also add more fields, which you can then connect to other page elements to display content on your published site.

bottom of page