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
bottom of page
