/* MOALIVERSE SOURCE GUIDE — css/style.css Purpose: Public site foundation: theme variables, page sections, cosmic surfaces, edge-navigation tabs, sliding panels, and responsive layout. Later rules can override earlier styles through the cascade. Reference: docs/reference/css__style.css.md (snapshot line-by-line guide). Changes: preserve existing IDs, API contracts, ownership checks, and responsive behavior. */ /* ================================================================ MOALIVERSE V2 — MAIN STYLESHEET File: /var/www/html/moaliverse-v2/css/style.css ================================================================ */ /* ================================================================ MAINTENANCE NOTE This stylesheet contains both the original Moaliverse V2 design rules and later intentional override sections. IMPORTANT: - Later CSS rules can intentionally override earlier rules. - Several selectors use !important because the design evolved through multiple visual revisions. - Do not delete an older-looking rule simply because a similar selector appears later; the cascade may rely on both sections. - The malformed orbit-guide text that previously contained stray "Go", "4x04x", and standalone "i" characters has been repaired. ================================================================ */ /* ---------------------------------------------------------------- 1. DESIGN COLORS AND SHARED SETTINGS ---------------------------------------------------------------- */ /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ :root { /* Set the reusable CSS custom property `--background` to this value. */ --background: #03040b; /* Set the reusable CSS custom property `--background-soft` to this value. */ --background-soft: #090b18; /* Set the reusable CSS custom property `--panel` to this value. */ --panel: rgba(12, 15, 34, 0.82); /* Set the reusable CSS custom property `--panel-solid` to this value. */ --panel-solid: #0b0e20; /* Set the reusable CSS custom property `--text` to this value. */ --text: #f7f7ff; /* Set the reusable CSS custom property `--text-soft` to this value. */ --text-soft: #a8acc5; /* Set the reusable CSS custom property `--border` to this value. */ --border: rgba(255, 255, 255, 0.12); /* Set the reusable CSS custom property `--purple` to this value. */ --purple: #9d5cff; /* Set the reusable CSS custom property `--purple-bright` to this value. */ --purple-bright: #c18cff; /* Set the reusable CSS custom property `--blue` to this value. */ --blue: #4d8dff; /* Set the reusable CSS custom property `--cyan` to this value. */ --cyan: #33e6ff; /* Set the reusable CSS custom property `--pink` to this value. */ --pink: #ff54c8; /* Set the reusable CSS custom property `--header-height` to this value. */ --header-height: 82px; /* Set the reusable CSS custom property `--sidebar-width` to this value. */ --sidebar-width: 230px; /* Set the reusable CSS custom property `--ease-bubbly` to this value. */ --ease-bubbly: cubic-bezier(0.22, 1, 0.36, 1); /* Close the current CSS rule, media query, or animation block. */ } /* ====================================================================== THREE FEATURED WORLDS — GAME, TECHNOLOGY, AND PROJECTS These primary category planets are intentionally larger and brighter than the Moaliverse sun, keeping them visible among the social planets. Their animation changes only light and color so it does not interfere with the JavaScript-controlled 3D orbital movement. ====================================================================== */ /* Start the CSS rule for `.universe-bubble.featured-planet`. */ .universe-bubble.featured-planet { /* Set the element's width. */ width: clamp(124px, 12vw, 164px); /* Set the element's height. */ height: clamp(124px, 12vw, 164px); /* Set the border width, style, and color. */ border: 3px solid rgba(255, 255, 255, 0.96); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50%; /* Set the text size. */ font-size: clamp(0.82rem, 1.5vw, 1.12rem); /* Set spacing between characters. */ letter-spacing: 0.035em; /* Add shadows or glow around text. */ text-shadow: 0 3px 7px rgba(0, 0, 0, 0.92), 0 0 14px white; /* Add outer or inner shadows to create depth, glow, or separation. The value continues on the following line(s). */ box-shadow: /* Continue the selector list so the following selector receives the same declarations. */ 0 0 25px 9px rgba(255, 255, 255, 0.95), /* Continue the selector list so the following selector receives the same declarations. */ 0 0 70px 25px rgba(var(--feature-glow), 0.95), /* Continue the selector list so the following selector receives the same declarations. */ 0 0 150px 52px rgba(var(--feature-glow), 0.68), /* Continue the selector list so the following selector receives the same declarations. */ inset 15px 13px 22px rgba(255, 255, 255, 0.34), /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ inset -20px -20px 30px rgba(0, 0, 0, 0.58); /* Attach an animation and define its timing, duration, and repetition. */ animation: featured-world-glow 2.15s ease-in-out infinite; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble.featured-game`. */ .universe-bubble.featured-game { /* Set the reusable CSS custom property `--feature-glow` to this value. */ --feature-glow: 176, 78, 255; /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 30% 24%, #fff 0 5%, #edc4ff 7%, #a94cff 30%, #54208e 67%, #18072f 100%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble.featured-technology`. */ .universe-bubble.featured-technology { /* Set the reusable CSS custom property `--feature-glow` to this value. */ --feature-glow: 20, 210, 255; /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 30% 24%, #fff 0 5%, #c9fbff 7%, #24d8ff 30%, #0876b0 67%, #021b43 100%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble.featured-projects`. */ .universe-bubble.featured-projects { /* Set the reusable CSS custom property `--feature-glow` to this value. */ --feature-glow: 255, 165, 32; /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 30% 24%, #fff 0 5%, #fff0ad 7%, #ffad25 31%, #c44712 68%, #401005 100%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Define the animation named featured-world-glow; the percentage blocks below describe how it changes over time. */ @keyframes featured-world-glow { /* Define this stage of the current animation. */ 0%, /* Defines style rules for the displayed selectors; properties on this line apply to those matching elements. */ 100% { /* Apply visual effects such as brightness, blur, saturation, or drop-shadow. */ filter: brightness(1.18) saturate(1.22) drop-shadow(0 0 20px rgba(var(--feature-glow), 0.95)); /* Close the current CSS rule, media query, or animation block. */ } /* Define this stage of the current animation. */ 50% { /* Apply visual effects such as brightness, blur, saturation, or drop-shadow. */ filter: brightness(1.7) saturate(1.45) drop-shadow(0 0 48px rgba(var(--feature-glow), 1)); /* Add outer or inner shadows to create depth, glow, or separation. The value continues on the following line(s). */ box-shadow: /* Continue the selector list so the following selector receives the same declarations. */ 0 0 35px 14px white, /* Continue the selector list so the following selector receives the same declarations. */ 0 0 95px 36px rgba(var(--feature-glow), 1), /* Continue the selector list so the following selector receives the same declarations. */ 0 0 210px 78px rgba(var(--feature-glow), 0.78), /* Continue the selector list so the following selector receives the same declarations. */ inset 15px 13px 22px rgba(255, 255, 255, 0.42), /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ inset -20px -20px 30px rgba(0, 0, 0, 0.48); /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (prefers-reduced-motion: reduce) { /* Start the CSS rule for `.universe-bubble.featured-planet`. */ .universe-bubble.featured-planet { /* Attach an animation and define its timing, duration, and repetition. */ animation: none; /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* ---------------------------------------------------------------- 2. BASIC RESET ---------------------------------------------------------------- */ /* Start the CSS rule for `*`. */ * { /* Choose whether borders and padding are included in the declared width and height. */ box-sizing: border-box; /* Set the outside spacing around this element. */ margin: 0; /* Set the inside spacing between this element's content and border. */ padding: 0; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `html`. */ html { /* Control whether scrolling jumps instantly or animates smoothly. */ scroll-behavior: smooth; /* Reserve space above scroll targets so fixed headers do not cover them. */ scroll-padding-top: calc(var(--header-height) + 30px); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `body`. */ body { /* Set the smallest height this element is allowed to have. */ min-height: 100vh; /* Control horizontal overflow. */ overflow-x: hidden; /* Set the foreground/text color. */ color: var(--text); /* Set this element's background layers, gradients, or color. The value continues on the following line(s). */ background: /* Continue or define the selector for the CSS rule that follows. */ radial-gradient(circle at 70% 20%, rgba(105, 64, 255, 0.13), transparent 35%), /* Continue or define the selector for the CSS rule that follows. */ radial-gradient(circle at 30% 80%, rgba(0, 183, 255, 0.09), transparent 40%), /* Continue the multi-line value started by the previous CSS declaration. */ var(--background); /* Choose the font family and fallback fonts. The value continues on the following line(s). */ font-family: /* Continue the selector list so the following selector receives the same declarations. */ Inter, /* Continue the selector list so the following selector receives the same declarations. */ ui-sans-serif, /* Continue the selector list so the following selector receives the same declarations. */ system-ui, /* Continue the selector list so the following selector receives the same declarations. */ -apple-system, /* Continue the selector list so the following selector receives the same declarations. */ BlinkMacSystemFont, /* Continue the selector list so the following selector receives the same declarations. */ "Segoe UI", /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ sans-serif; /* Set vertical spacing between lines of text. */ line-height: 1.6; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `a`. */ a { /* Set the foreground/text color. */ color: inherit; /* Control underlines and other text decorations. */ text-decoration: none; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ button, /* Start the CSS rule for `a`. */ a { /* Control the tap-highlight effect used by WebKit mobile browsers. */ -webkit-tap-highlight-color: transparent; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `button`. */ button { /* Set the foreground/text color. */ color: inherit; /* Set several font properties with one shorthand. */ font: inherit; /* Close the current CSS rule, media query, or animation block. */ } /* Set the CSS `button` property for this element. */ button:focus-visible, /* Set the CSS `a` property for this element. */ a:focus-visible { /* Draw a focus outline without affecting layout. */ outline: 3px solid var(--cyan); /* Move the focus outline away from the element edge. */ outline-offset: 4px; /* Close the current CSS rule, media query, or animation block. */ } /* ---------------------------------------------------------------- 3. ANIMATED BACKGROUND BUBBLES ---------------------------------------------------------------- */ /* Start the CSS rule for `.background-effects`. */ .background-effects { /* Choose how this element is positioned in relation to the page or its containing block. */ position: fixed; /* Set multiple edge offsets at once. */ inset: 0; /* Control this element's stacking order relative to overlapping elements. */ z-index: -2; /* Control what happens when content extends outside the element. */ overflow: hidden; /* Control whether this element can receive mouse or pointer input. */ pointer-events: none; /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .background-effects::after { /* Provide generated content for a pseudo-element. */ content: ""; /* Choose how this element is positioned in relation to the page or its containing block. */ position: absolute; /* Set multiple edge offsets at once. */ inset: 0; /* Set the element's transparency. */ opacity: 0.18; /* Set one or more background images or gradients. The value continues on the following line(s). */ background-image: /* Continue or define the selector for the CSS rule that follows. */ linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), /* Continue the multi-line value started by the previous CSS declaration. */ linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); /* Control the rendered size of the background image. */ background-size: 55px 55px; /* Use an image or gradient as an alpha mask. */ mask-image: linear-gradient(to bottom, black, transparent 90%); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.background-bubble`. */ .background-bubble { /* Choose how this element is positioned in relation to the page or its containing block. */ position: absolute; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50%; /* Apply visual effects such as brightness, blur, saturation, or drop-shadow. */ filter: blur(10px); /* Set the element's transparency. */ opacity: 0.2; /* Attach an animation and define its timing, duration, and repetition. */ animation: background-float 14s ease-in-out infinite alternate; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.bubble-one`. */ .bubble-one { /* Set the element's top offset. */ top: 10%; /* Set the element's left offset. */ left: 12%; /* Set the element's width. */ width: 280px; /* Set the element's height. */ height: 280px; /* Set this element's background layers, gradients, or color. */ background: var(--purple); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.bubble-two`. */ .bubble-two { /* Set the element's top offset. */ top: 55%; /* Set the element's left offset. */ left: 70%; /* Set the element's width. */ width: 340px; /* Set the element's height. */ height: 340px; /* Set this element's background layers, gradients, or color. */ background: var(--blue); /* Delay or offset the starting point of the animation. */ animation-delay: -4s; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.bubble-three`. */ .bubble-three { /* Set the element's top offset. */ top: 20%; /* Set the element's right offset. */ right: 4%; /* Set the element's width. */ width: 190px; /* Set the element's height. */ height: 190px; /* Set this element's background layers, gradients, or color. */ background: var(--pink); /* Delay or offset the starting point of the animation. */ animation-delay: -8s; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.bubble-four`. */ .bubble-four { /* Set the element's bottom offset. */ bottom: -80px; /* Set the element's left offset. */ left: 25%; /* Set the element's width. */ width: 230px; /* Set the element's height. */ height: 230px; /* Set this element's background layers, gradients, or color. */ background: var(--cyan); /* Delay or offset the starting point of the animation. */ animation-delay: -11s; /* Close the current CSS rule, media query, or animation block. */ } /* Define the animation named background-float; the percentage blocks below describe how it changes over time. */ @keyframes background-float { /* Define this stage of the current animation. */ from { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate3d(-20px, -10px, 0) scale(0.95); /* Close the current CSS rule, media query, or animation block. */ } /* Define this stage of the current animation. */ to { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate3d(35px, 45px, 0) scale(1.1); /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* ---------------------------------------------------------------- 4. TOP HEADER ---------------------------------------------------------------- */ /* Start the CSS rule for `.top-header`. */ .top-header { /* Choose how this element is positioned in relation to the page or its containing block. */ position: fixed; /* Set the element's top offset. */ top: 0; /* Set the element's left offset. */ left: 0; /* Set the element's right offset. */ right: 0; /* Control this element's stacking order relative to overlapping elements. */ z-index: 1000; /* Set the element's height. */ height: var(--header-height); /* Set the inside spacing between this element's content and border. */ padding: 0 32px; /* Choose the layout model used for this element. */ display: flex; /* Align child items along the cross axis. */ align-items: center; /* Distribute child items along the main axis. */ justify-content: space-between; /* Set this element's background layers, gradients, or color. */ background: rgba(3, 4, 11, 0.72); /* Set the bottom border. */ border-bottom: 1px solid var(--border); /* Apply visual effects to content visible behind this translucent element. */ backdrop-filter: blur(22px); /* Provide Safari/WebKit support for the backdrop filter. */ -webkit-backdrop-filter: blur(22px); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.brand`. */ .brand { /* Choose the layout model used for this element. */ display: inline-flex; /* Align child items along the cross axis. */ align-items: center; /* Set spacing between grid or flex children. */ gap: 12px; /* Set how bold the text appears. */ font-weight: 900; /* Set spacing between characters. */ letter-spacing: 0.13em; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.brand-icon`. */ .brand-icon { /* Set the element's width. */ width: 44px; /* Set the element's height. */ height: 44px; /* Choose the layout model used for this element. */ display: grid; /* Align grid items on both axes with one shorthand. */ place-items: center; /* Set the border width, style, and color. */ border: 1px solid rgba(255, 255, 255, 0.3); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50% 45% 52% 47%; /* Set this element's background layers, gradients, or color. The value continues on the following line(s). */ background: /* Continue or define the selector for the CSS rule that follows. */ radial-gradient(circle at 35% 25%, #ffffff 0 3%, transparent 4%), /* Continue the multi-line value started by the previous CSS declaration. */ linear-gradient(145deg, var(--purple-bright), var(--blue)); /* Add outer or inner shadows to create depth, glow, or separation. The value continues on the following line(s). */ box-shadow: /* Continue the selector list so the following selector receives the same declarations. */ 0 0 25px rgba(157, 92, 255, 0.55), /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ inset 0 0 18px rgba(255, 255, 255, 0.3); /* Attach an animation and define its timing, duration, and repetition. */ animation: logo-wobble 6s ease-in-out infinite; /* Close the current CSS rule, media query, or animation block. */ } /* Define the animation named logo-wobble; the percentage blocks below describe how it changes over time. */ @keyframes logo-wobble { /* Define this stage of the current animation. */ 0%, /* Define this stage of the current animation. */ 100% { /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50% 45% 52% 47%; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: rotate(0deg); /* Close the current CSS rule, media query, or animation block. */ } /* Define this stage of the current animation. */ 50% { /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 43% 55% 46% 54%; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: rotate(5deg); /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.top-navigation`. */ .top-navigation { /* Choose the layout model used for this element. */ display: flex; /* Align child items along the cross axis. */ align-items: center; /* Set spacing between grid or flex children. */ gap: 10px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.top-nav-button`. */ .top-nav-button { /* Set the border width, style, and color. */ border: 1px solid transparent; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 999px; /* Set the inside spacing between this element's content and border. */ padding: 10px 17px; /* Set this element's background layers, gradients, or color. */ background: transparent; /* Choose the mouse cursor shown over this element. */ cursor: pointer; /* Set the foreground/text color. */ color: var(--text-soft); /* Set how bold the text appears. */ font-weight: 700; /* Animate changes to the listed CSS properties smoothly. The value continues on the following line(s). */ transition: /* Continue the selector list so the following selector receives the same declarations. */ color 200ms ease, /* Continue the selector list so the following selector receives the same declarations. */ background 200ms ease, /* Continue the selector list so the following selector receives the same declarations. */ border-color 200ms ease, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ transform 250ms var(--ease-bubbly); /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .top-nav-button:hover { /* Set the foreground/text color. */ color: white; /* Set this element's background layers, gradients, or color. */ background: rgba(255, 255, 255, 0.07); /* Set the border color. */ border-color: var(--border); /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateY(-2px); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.sign-in-button`. */ .sign-in-button { /* Set the foreground/text color. */ color: white; /* Set the border color. */ border-color: rgba(174, 119, 255, 0.5); /* Set this element's background layers, gradients, or color. */ background: linear-gradient(135deg, /* Continue or define the selector for the CSS rule that follows. */ rgba(157, 92, 255, 0.28), /* Continue the multi-line value started by the previous CSS declaration. */ rgba(77, 141, 255, 0.18)); /* Close the current CSS rule, media query, or animation block. */ } /* ---------------------------------------------------------------- 5. LEFT NAVIGATION ---------------------------------------------------------------- */ /* Start the CSS rule for `.side-navigation`. */ .side-navigation { /* Choose how this element is positioned in relation to the page or its containing block. */ position: fixed; /* Set the element's top offset. */ top: var(--header-height); /* Set the element's bottom offset. */ bottom: 0; /* Set the element's left offset. */ left: 0; /* Control this element's stacking order relative to overlapping elements. */ z-index: 800; /* Set the element's width. */ width: var(--sidebar-width); /* Set the inside spacing between this element's content and border. */ padding: 28px 18px 50px; /* Control vertical overflow. */ overflow-y: auto; /* Set this element's background layers, gradients, or color. */ background: rgba(5, 7, 17, 0.6); /* Set the right border. */ border-right: 1px solid var(--border); /* Apply visual effects to content visible behind this translucent element. */ backdrop-filter: blur(18px); /* Provide Safari/WebKit support for the backdrop filter. */ -webkit-backdrop-filter: blur(18px); /* Choose the browser scrollbar thickness where supported. */ scrollbar-width: thin; /* Set the scrollbar thumb and track colors where supported. */ scrollbar-color: rgba(157, 92, 255, 0.5) transparent; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.side-menu-section`. */ .side-menu-section { /* Set outside spacing below this element. */ margin-bottom: 28px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.side-menu-title`. */ .side-menu-title { /* Set the outside spacing around this element. */ margin: 0 12px 9px; /* Set the foreground/text color. */ color: #737993; /* Set the text size. */ font-size: 0.7rem; /* Set how bold the text appears. */ font-weight: 900; /* Set spacing between characters. */ letter-spacing: 0.22em; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.side-menu-item`. */ .side-menu-item { /* Set the element's width. */ width: 100%; /* Set the smallest height this element is allowed to have. */ min-height: 42px; /* Set the inside spacing between this element's content and border. */ padding: 9px 12px; /* Choose the layout model used for this element. */ display: flex; /* Align child items along the cross axis. */ align-items: center; /* Set spacing between grid or flex children. */ gap: 12px; /* Set the border width, style, and color. */ border: 1px solid transparent; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 14px; /* Set this element's background layers, gradients, or color. */ background: transparent; /* Set the foreground/text color. */ color: var(--text-soft); /* Choose the mouse cursor shown over this element. */ cursor: pointer; /* Set horizontal alignment of text. */ text-align: left; /* Set how bold the text appears. */ font-weight: 650; /* Animate changes to the listed CSS properties smoothly. The value continues on the following line(s). */ transition: /* Continue the selector list so the following selector receives the same declarations. */ color 180ms ease, /* Continue the selector list so the following selector receives the same declarations. */ background 180ms ease, /* Continue the selector list so the following selector receives the same declarations. */ border-color 180ms ease, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ transform 250ms var(--ease-bubbly); /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .side-menu-item:hover, /* Start the CSS rule for `.side-menu-item.active`. */ .side-menu-item.active { /* Set the foreground/text color. */ color: white; /* Set this element's background layers, gradients, or color. */ background: rgba(255, 255, 255, 0.07); /* Set the border color. */ border-color: rgba(255, 255, 255, 0.09); /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateX(5px); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.side-dot`. */ .side-dot { /* Set the flex grow, shrink, and basis behavior. */ flex: 0 0 auto; /* Set the element's width. */ width: 8px; /* Set the element's height. */ height: 8px; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50%; /* Set this element's background layers, gradients, or color. */ background: #53586e; /* Animate changes to the listed CSS properties smoothly. The value continues on the following line(s). */ transition: /* Continue the selector list so the following selector receives the same declarations. */ background 180ms ease, /* Continue the selector list so the following selector receives the same declarations. */ box-shadow 180ms ease, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ transform 250ms var(--ease-bubbly); /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .side-menu-item:hover .side-dot, /* Start the CSS rule for `.side-menu-item.active .side-dot`. */ .side-menu-item.active .side-dot { /* Set this element's background layers, gradients, or color. */ background: var(--cyan); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 0 13px var(--cyan); /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: scale(1.35); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.side-button`. */ .side-button { /* Remove or adjust the browser's native control styling. */ appearance: none; /* Close the current CSS rule, media query, or animation block. */ } /* ---------------------------------------------------------------- 6. MAIN CONTENT ---------------------------------------------------------------- */ /* Start the CSS rule for `.main-content`. */ .main-content { /* Set outside spacing to the left of this element. */ margin-left: var(--sidebar-width); /* Set inside spacing at the top. */ padding-top: var(--header-height); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.hero-section`. */ .hero-section { /* Choose how this element is positioned in relation to the page or its containing block. */ position: relative; /* Set the smallest height this element is allowed to have. */ min-height: calc(100vh - var(--header-height)); /* Set the inside spacing between this element's content and border. */ padding: 70px clamp(28px, 5vw, 90px); /* Choose the layout model used for this element. */ display: grid; /* Define the number and width of grid columns. */ grid-template-columns: minmax(310px, 0.85fr) minmax(520px, 1.35fr); /* Align child items along the cross axis. */ align-items: center; /* Set spacing between grid or flex children. */ gap: 30px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.hero-text`. */ .hero-text { /* Choose how this element is positioned in relation to the page or its containing block. */ position: relative; /* Control this element's stacking order relative to overlapping elements. */ z-index: 10; /* Set the largest width this element is allowed to have. */ max-width: 610px; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .hero-small-label, /* Start the CSS rule for `.section-label`. */ .section-label { /* Set the foreground/text color. */ color: var(--cyan); /* Set the text size. */ font-size: 0.76rem; /* Set how bold the text appears. */ font-weight: 900; /* Set spacing between characters. */ letter-spacing: 0.25em; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.hero-title`. */ .hero-title { /* Set the outside spacing around this element. */ margin: 18px 0 22px; /* Set the text size. */ font-size: clamp(3rem, 5.6vw, 6.2rem); /* Set vertical spacing between lines of text. */ line-height: 0.98; /* Set spacing between characters. */ letter-spacing: -0.065em; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.hero-title span`. */ .hero-title span { /* Choose the layout model used for this element. */ display: block; /* Set the foreground/text color. */ color: transparent; /* Set this element's background layers, gradients, or color. */ background: linear-gradient(100deg, /* Continue the selector list so the following selector receives the same declarations. */ var(--purple-bright), /* Continue the selector list so the following selector receives the same declarations. */ var(--cyan), /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ #ffffff); /* Set the CSS `background-clip` property for this element. */ background-clip: text; /* Set the CSS `-webkit-background-clip` property for this element. */ -webkit-background-clip: text; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.hero-description`. */ .hero-description { /* Set the largest width this element is allowed to have. */ max-width: 570px; /* Set the foreground/text color. */ color: var(--text-soft); /* Set the text size. */ font-size: clamp(1rem, 1.35vw, 1.16rem); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.hero-buttons`. */ .hero-buttons { /* Set outside spacing above this element. */ margin-top: 32px; /* Choose the layout model used for this element. */ display: flex; /* Control whether flex items can wrap to another line. */ flex-wrap: wrap; /* Set spacing between grid or flex children. */ gap: 13px; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .primary-button, /* Start the CSS rule for `.secondary-button`. */ .secondary-button { /* Set the smallest height this element is allowed to have. */ min-height: 50px; /* Set the inside spacing between this element's content and border. */ padding: 13px 22px; /* Choose the layout model used for this element. */ display: inline-flex; /* Align child items along the cross axis. */ align-items: center; /* Distribute child items along the main axis. */ justify-content: center; /* Set the border width, style, and color. */ border: 1px solid var(--border); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 999px; /* Choose the mouse cursor shown over this element. */ cursor: pointer; /* Set how bold the text appears. */ font-weight: 800; /* Animate changes to the listed CSS properties smoothly. The value continues on the following line(s). */ transition: /* Continue the selector list so the following selector receives the same declarations. */ transform 250ms var(--ease-bubbly), /* Continue the selector list so the following selector receives the same declarations. */ box-shadow 250ms ease, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ background 250ms ease; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.primary-button`. */ .primary-button { /* Set the border color. */ border-color: rgba(181, 133, 255, 0.7); /* Set this element's background layers, gradients, or color. */ background: linear-gradient(135deg, var(--purple), var(--blue)); /* Add outer or inner shadows to create depth, glow, or separation. The value continues on the following line(s). */ box-shadow: /* Continue the selector list so the following selector receives the same declarations. */ 0 12px 35px rgba(111, 74, 255, 0.3), /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ inset 0 1px rgba(255, 255, 255, 0.35); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.secondary-button`. */ .secondary-button { /* Set this element's background layers, gradients, or color. */ background: rgba(255, 255, 255, 0.055); /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .primary-button:hover, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .secondary-button:hover { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateY(-4px) scale(1.03); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 18px 42px rgba(90, 103, 255, 0.35); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.hero-status`. */ .hero-status { /* Set outside spacing above this element. */ margin-top: 25px; /* Choose the layout model used for this element. */ display: flex; /* Control whether flex items can wrap to another line. */ flex-wrap: wrap; /* Set spacing between grid or flex children. */ gap: 10px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.status-pill`. */ .status-pill { /* Set the inside spacing between this element's content and border. */ padding: 7px 12px; /* Choose the layout model used for this element. */ display: inline-flex; /* Align child items along the cross axis. */ align-items: center; /* Set spacing between grid or flex children. */ gap: 8px; /* Set the border width, style, and color. */ border: 1px solid var(--border); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 999px; /* Set this element's background layers, gradients, or color. */ background: rgba(255, 255, 255, 0.035); /* Set the foreground/text color. */ color: var(--text-soft); /* Set the text size. */ font-size: 0.78rem; /* Set how bold the text appears. */ font-weight: 700; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.status-light`. */ .status-light { /* Set the element's width. */ width: 8px; /* Set the element's height. */ height: 8px; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50%; /* Set this element's background layers, gradients, or color. */ background: #5dff9b; /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 0 12px #5dff9b; /* Attach an animation and define its timing, duration, and repetition. */ animation: status-pulse 2s ease-in-out infinite; /* Close the current CSS rule, media query, or animation block. */ } /* Define the animation named status-pulse; the percentage blocks below describe how it changes over time. */ @keyframes status-pulse { /* Define this stage of the current animation. */ 50% { /* Set the element's transparency. */ opacity: 0.5; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: scale(0.75); /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* ---------------------------------------------------------------- 7. MOALIVERSE SOLAR SYSTEM ---------------------------------------------------------------- */ /* Start the CSS rule for `.universe-wrapper`. */ .universe-wrapper { /* Choose how this element is positioned in relation to the page or its containing block. */ position: relative; /* Create an independent stacking context for this element. */ isolation: isolate; /* Set the element's width. */ width: min(720px, 54vw); /* Keep the element at this width-to-height proportion. */ aspect-ratio: 1; /* Set horizontal outside spacing using the page's writing direction. */ margin-inline: auto; /* Choose the layout model used for this element. */ display: grid; /* Align grid items on both axes with one shorthand. */ place-items: center; /* Close the current CSS rule, media query, or animation block. */ } /* Decorative orbit lines */ /* Start the CSS rule for `.orbit-ring`. */ .orbit-ring { /* Choose how this element is positioned in relation to the page or its containing block. */ position: absolute; /* Set the element's left offset. */ left: 50%; /* Set the element's top offset. */ top: 50%; /* Set the border width, style, and color. */ border: 1px solid rgba(164, 179, 255, 0.13); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50%; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(-50%, -50%); /* Control whether this element can receive mouse or pointer input. */ pointer-events: none; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.orbit-ring-one`. */ .orbit-ring-one { /* Set the element's width. */ width: 46%; /* Set the element's height. */ height: 46%; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.orbit-ring-two`. */ .orbit-ring-two { /* Set the element's width. */ width: 62%; /* Set the element's height. */ height: 62%; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.orbit-ring-three`. */ .orbit-ring-three { /* Set the element's width. */ width: 78%; /* Set the element's height. */ height: 78%; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.orbit-ring-four`. */ .orbit-ring-four { /* Set the element's width. */ width: 94%; /* Set the element's height. */ height: 94%; /* Close the current CSS rule, media query, or animation block. */ } /* Large center bubble */ /* Start the CSS rule for `.moaliverse-core`. */ .moaliverse-core { /* Choose how this element is positioned in relation to the page or its containing block. */ position: absolute; /* Set the element's left offset. */ left: 50%; /* Set the element's top offset. */ top: 50%; /* Control this element's stacking order relative to overlapping elements. */ z-index: 20; /* Set the element's width. */ width: clamp(180px, 19vw, 270px); /* Keep the element at this width-to-height proportion. */ aspect-ratio: 1; /* Choose the layout model used for this element. */ display: grid; /* Align grid items on both axes with one shorthand. */ place-items: center; /* Set the border width, style, and color. */ border: 1px solid rgba(255, 255, 255, 0.38); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 48% 52% 45% 55% / 53% 45% 55% 47%; /* Set this element's background layers, gradients, or color. The value continues on the following line(s). */ background: /* Continue or define the selector for the CSS rule that follows. */ radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.7), transparent 5%), /* Continue or define the selector for the CSS rule that follows. */ radial-gradient(circle at 38% 31%, rgba(255, 255, 255, 0.16), transparent 22%), /* Continue the multi-line value started by the previous CSS declaration. */ linear-gradient(145deg, #bb7bff, #6958ff 45%, #237fdc); /* Add outer or inner shadows to create depth, glow, or separation. The value continues on the following line(s). */ box-shadow: /* Continue the selector list so the following selector receives the same declarations. */ 0 0 40px rgba(140, 88, 255, 0.55), /* Continue the selector list so the following selector receives the same declarations. */ 0 0 100px rgba(61, 130, 255, 0.28), /* Continue the selector list so the following selector receives the same declarations. */ inset -22px -25px 45px rgba(15, 12, 82, 0.42), /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ inset 18px 18px 32px rgba(255, 255, 255, 0.2); /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(-50%, -50%); /* Attach an animation and define its timing, duration, and repetition. */ animation: core-breathe 5s ease-in-out infinite; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.core-glow`. */ .core-glow { /* Choose how this element is positioned in relation to the page or its containing block. */ position: absolute; /* Set multiple edge offsets at once. */ inset: -18%; /* Control this element's stacking order relative to overlapping elements. */ z-index: -1; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50%; /* Set this element's background layers, gradients, or color. */ background: rgba(127, 80, 255, 0.24); /* Apply visual effects such as brightness, blur, saturation, or drop-shadow. */ filter: blur(24px); /* Attach an animation and define its timing, duration, and repetition. */ animation: core-glow 3.5s ease-in-out infinite alternate; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.core-content`. */ .core-content { /* Choose the layout model used for this element. */ display: flex; /* Choose the direction in which flex children are laid out. */ flex-direction: column; /* Align child items along the cross axis. */ align-items: center; /* Set horizontal alignment of text. */ text-align: center; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.core-main-text`. */ .core-main-text { /* Set the text size. */ font-size: clamp(1.2rem, 2vw, 2rem); /* Set how bold the text appears. */ font-weight: 950; /* Set spacing between characters. */ letter-spacing: 0.055em; /* Add shadows or glow around text. */ text-shadow: 0 4px 18px rgba(17, 5, 67, 0.5); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.core-small-text`. */ .core-small-text { /* Set the text size. */ font-size: clamp(0.52rem, 0.7vw, 0.7rem); /* Set how bold the text appears. */ font-weight: 850; /* Set spacing between characters. */ letter-spacing: 0.24em; /* Set the element's transparency. */ opacity: 0.75; /* Close the current CSS rule, media query, or animation block. */ } /* Define the animation named core-breathe; the percentage blocks below describe how it changes over time. */ @keyframes core-breathe { /* Define this stage of the current animation. */ 0%, /* Define this stage of the current animation. */ 100% { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(-50%, -50%) scale(1); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 48% 52% 45% 55% / 53% 45% 55% 47%; /* Close the current CSS rule, media query, or animation block. */ } /* Define this stage of the current animation. */ 50% { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(-50%, -50%) scale(1.045); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 54% 46% 53% 47% / 45% 55% 43% 57%; /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Define the animation named core-glow; the percentage blocks below describe how it changes over time. */ @keyframes core-glow { /* Define this stage of the current animation. */ to { /* Set the element's transparency. */ opacity: 0.55; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: scale(1.13); /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Individual orbiting bubbles */ /* Start the CSS rule for `.universe-bubble`. */ .universe-bubble { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 119, 91, 255; /* Choose how this element is positioned in relation to the page or its containing block. */ position: absolute; /* Set the element's left offset. */ left: 50%; /* Set the element's top offset. */ top: 50%; /* Control this element's stacking order relative to overlapping elements. */ z-index: 30; /* Choose the layout model used for this element. */ display: grid; /* Align grid items on both axes with one shorthand. */ place-items: center; /* Set the border width, style, and color. */ border: 1px solid rgba(255, 255, 255, 0.3); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 48% 52% 55% 45% / 54% 47% 53% 46%; /* Set this element's background layers, gradients, or color. The value continues on the following line(s). */ background: /* Continue or define the selector for the CSS rule that follows. */ radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.65), transparent 6%), /* Continue or define the selector for the CSS rule that follows. */ linear-gradient(145deg, /* Continue or define the selector for the CSS rule that follows. */ rgba(var(--bubble-color), 0.94), /* Continue the multi-line value started by the previous CSS declaration. */ rgba(var(--bubble-color), 0.45)); /* Add outer or inner shadows to create depth, glow, or separation. The value continues on the following line(s). */ box-shadow: /* Continue the selector list so the following selector receives the same declarations. */ 0 10px 30px rgba(var(--bubble-color), 0.28), /* Continue the selector list so the following selector receives the same declarations. */ inset 8px 8px 15px rgba(255, 255, 255, 0.16), /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ inset -10px -12px 20px rgba(0, 0, 0, 0.25); /* Choose the mouse cursor shown over this element. */ cursor: pointer; /* Set the foreground/text color. */ color: white; /* Set the text size. */ font-size: 0.72rem; /* Set how bold the text appears. */ font-weight: 850; /* Hint which properties are likely to animate so the browser can optimize rendering. */ will-change: transform; /* Animate changes to the listed CSS properties smoothly. The value continues on the following line(s). */ transition: /* Continue the selector list so the following selector receives the same declarations. */ width 250ms var(--ease-bubbly), /* Continue the selector list so the following selector receives the same declarations. */ height 250ms var(--ease-bubbly), /* Continue the selector list so the following selector receives the same declarations. */ filter 250ms ease, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ box-shadow 250ms ease; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .universe-bubble:hover, /* Start the CSS rule for `.universe-bubble.is-active`. */ .universe-bubble.is-active { /* Control this element's stacking order relative to overlapping elements. */ z-index: 50; /* Apply visual effects such as brightness, blur, saturation, or drop-shadow. */ filter: brightness(1.25); /* Add outer or inner shadows to create depth, glow, or separation. The value continues on the following line(s). */ box-shadow: /* Continue the selector list so the following selector receives the same declarations. */ 0 0 30px rgba(var(--bubble-color), 0.75), /* Continue the selector list so the following selector receives the same declarations. */ 0 15px 45px rgba(var(--bubble-color), 0.4), /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ inset 8px 8px 15px rgba(255, 255, 255, 0.2); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.bubble-large`. */ .bubble-large { /* Set the element's width. */ width: 94px; /* Set the element's height. */ height: 94px; /* Set the text size. */ font-size: 0.88rem; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.bubble-medium`. */ .bubble-medium { /* Set the element's width. */ width: 75px; /* Set the element's height. */ height: 75px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.bubble-small`. */ .bubble-small { /* Set the element's width. */ width: 60px; /* Set the element's height. */ height: 60px; /* Set the text size. */ font-size: 0.62rem; /* Close the current CSS rule, media query, or animation block. */ } /* The signed-in member receives a larger, deep-red personal planet. */ /* Start the CSS rule for `.member-planet`. */ .member-planet { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 225, 35, 55; /* Set the element's width. */ width: clamp(132px, 13vw, 174px); /* Set the element's height. */ height: clamp(132px, 13vw, 174px); /* Control what happens when content extends outside the element. */ overflow: visible; /* Create an independent stacking context for this element. */ isolation: isolate; /* Set the border width, style, and color. */ border: 2px solid rgba(255, 225, 225, 0.92); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50%; /* Set this element's background layers, gradients, or color. The value continues on the following line(s). */ background: /* Continue or define the selector for the CSS rule that follows. */ radial-gradient(circle at 32% 25%, #ffffff 0 5%, rgba(255, 240, 220, 0.95) 6%, transparent 13%), /* Continue or define the selector for the CSS rule that follows. */ radial-gradient(circle at 68% 66%, rgba(80, 0, 8, 0.48) 0 9%, transparent 10%), /* Continue or define the selector for the CSS rule that follows. */ repeating-linear-gradient(165deg, transparent 0 18px, rgba(110, 0, 12, 0.24) 19px 28px), /* Continue the multi-line value started by the previous CSS declaration. */ radial-gradient(circle at 35% 30%, #fff1d4 0, #ff7a66 20%, #ff173b 48%, #a5001e 76%, #390008 100%); /* Add outer or inner shadows to create depth, glow, or separation. The value continues on the following line(s). */ box-shadow: /* Continue the selector list so the following selector receives the same declarations. */ 0 0 22px 9px rgba(255, 250, 235, 1), /* Continue the selector list so the following selector receives the same declarations. */ 0 0 58px 22px rgba(255, 65, 72, 1), /* Continue the selector list so the following selector receives the same declarations. */ 0 0 120px 44px rgba(235, 12, 48, 0.82), /* Continue the selector list so the following selector receives the same declarations. */ 0 0 190px 65px rgba(170, 0, 30, 0.42), /* Continue the selector list so the following selector receives the same declarations. */ inset 14px 12px 20px rgba(255, 255, 255, 0.24), /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ inset -18px -18px 28px rgba(30, 0, 5, 0.62); /* Set the text size. */ font-size: clamp(0.9rem, 1.7vw, 1.25rem); /* Set spacing between characters. */ letter-spacing: 0.04em; /* Add shadows or glow around text. */ text-shadow: 0 3px 7px #240006, 0 0 12px white, 0 0 24px rgba(255, 205, 205, 0.9); /* Attach an animation and define its timing, duration, and repetition. */ animation: member-planet-glow 2.4s ease-in-out infinite; /* Close the current CSS rule, media query, or animation block. */ } /* A separate atmospheric halo makes the planet pop out from busy orbits. */ /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .member-planet::before { /* Provide generated content for a pseudo-element. */ content: ""; /* Choose how this element is positioned in relation to the page or its containing block. */ position: absolute; /* Set multiple edge offsets at once. */ inset: -32px; /* Control this element's stacking order relative to overlapping elements. */ z-index: -1; /* Set the border width, style, and color. */ border: 3px solid rgba(255, 210, 205, 0.88); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50%; /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle, rgba(255, 245, 220, 0.24) 40%, rgba(255, 45, 66, 0.68) 62%, transparent 74%); /* Apply visual effects such as brightness, blur, saturation, or drop-shadow. */ filter: blur(6px); /* Control whether this element can receive mouse or pointer input. */ pointer-events: none; /* Close the current CSS rule, media query, or animation block. */ } /* Define the animation named member-planet-glow; the percentage blocks below describe how it changes over time. */ @keyframes member-planet-glow { /* Define this stage of the current animation. */ 0%, /* Defines style rules for the displayed selectors; properties on this line apply to those matching elements. */ 100% { /* Apply visual effects such as brightness, blur, saturation, or drop-shadow. */ filter: brightness(1.18) saturate(1.2) drop-shadow(0 0 18px rgba(255, 220, 205, 1)); /* Close the current CSS rule, media query, or animation block. */ } /* Define this stage of the current animation. */ 50% { /* Apply visual effects such as brightness, blur, saturation, or drop-shadow. */ filter: brightness(1.65) saturate(1.45) drop-shadow(0 0 42px rgba(255, 235, 210, 1)); /* Add outer or inner shadows to create depth, glow, or separation. The value continues on the following line(s). */ box-shadow: /* Continue the selector list so the following selector receives the same declarations. */ 0 0 32px 13px rgba(255, 255, 238, 1), /* Continue the selector list so the following selector receives the same declarations. */ 0 0 78px 31px rgba(255, 52, 65, 1), /* Continue the selector list so the following selector receives the same declarations. */ 0 0 155px 58px rgba(225, 8, 44, 0.9), /* Continue the selector list so the following selector receives the same declarations. */ 0 0 230px 82px rgba(145, 0, 27, 0.5), /* Continue the selector list so the following selector receives the same declarations. */ inset 14px 12px 20px rgba(255, 255, 255, 0.32), /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ inset -18px -18px 28px rgba(30, 0, 5, 0.58); /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-planet[hidden]`. */ .member-planet[hidden] { /* Choose the layout model used for this element. */ display: none; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-planet span`. */ .member-planet span { /* Choose how this element is positioned in relation to the page or its containing block. */ position: relative; /* Control this element's stacking order relative to overlapping elements. */ z-index: 2; /* Set the largest width this element is allowed to have. */ max-width: 88%; /* Allow long words to wrap instead of overflowing. */ overflow-wrap: anywhere; /* Close the current CSS rule, media query, or animation block. */ } /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (prefers-reduced-motion: reduce) { /* Start the CSS rule for `.member-planet`. */ .member-planet { /* Attach an animation and define its timing, duration, and repetition. */ animation: none; /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Different colors for the bubbles */ /* Start the CSS rule for `[data-name="gaming"]`. */ [data-name="gaming"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 138, 75, 255; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="tech"]`. */ [data-name="tech"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 36, 154, 255; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="youtube"]`. */ [data-name="youtube"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 255, 42, 75; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="instagram"]`. */ [data-name="instagram"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 230, 61, 155; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="facebook"]`. */ [data-name="facebook"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 44, 103, 232; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="x"]`. */ [data-name="x"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 85, 91, 111; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="tiktok"]`. */ [data-name="tiktok"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 23, 209, 211; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="threads"]`. */ [data-name="threads"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 120, 126, 147; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="reddit"]`. */ [data-name="reddit"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 255, 78, 31; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="snapchat"]`. */ [data-name="snapchat"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 234, 211, 35; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="pinterest"]`. */ [data-name="pinterest"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 207, 31, 55; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="linkedin"]`. */ [data-name="linkedin"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 37, 119, 191; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="twitch"]`. */ [data-name="twitch"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 145, 70, 255; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="discord"]`. */ [data-name="discord"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 91, 105, 255; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="wechat"]`. */ [data-name="wechat"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 35, 194, 92; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="bilibili"]`. */ [data-name="bilibili"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 53, 186, 225; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `[data-name="douyin"]`. */ [data-name="douyin"] { /* Set the reusable CSS custom property `--bubble-color` to this value. */ --bubble-color: 225, 52, 113; /* Close the current CSS rule, media query, or animation block. */ } /* ---------------------------------------------------------------- 8. TECHNOLOGY, GAMING AND VIDEO SECTIONS ---------------------------------------------------------------- */ /* Start the CSS rule for `.content-section`. */ .content-section { /* Choose how this element is positioned in relation to the page or its containing block. */ position: relative; /* Set the inside spacing between this element's content and border. */ padding: 110px clamp(28px, 7vw, 110px); /* Set the top border. */ border-top: 1px solid var(--border); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.section-heading`. */ .section-heading { /* Set the largest width this element is allowed to have. */ max-width: 760px; /* Set outside spacing below this element. */ margin-bottom: 45px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.section-heading h2`. */ .section-heading h2 { /* Set the outside spacing around this element. */ margin: 13px 0 16px; /* Set the text size. */ font-size: clamp(2rem, 4vw, 4.5rem); /* Set vertical spacing between lines of text. */ line-height: 1.06; /* Set spacing between characters. */ letter-spacing: -0.05em; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.section-heading p`. */ .section-heading p { /* Set the foreground/text color. */ color: var(--text-soft); /* Set the text size. */ font-size: 1.05rem; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.card-grid`. */ .card-grid { /* Choose the layout model used for this element. */ display: grid; /* Define the number and width of grid columns. */ grid-template-columns: repeat(3, minmax(0, 1fr)); /* Set spacing between grid or flex children. */ gap: 18px; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .feature-card, /* Start the CSS rule for `.bubbly-card`. */ .bubbly-card { /* Set the smallest height this element is allowed to have. */ min-height: 250px; /* Set the inside spacing between this element's content and border. */ padding: 28px; /* Set the border width, style, and color. */ border: 1px solid var(--border); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 34px 28px 38px 26px; /* Set this element's background layers, gradients, or color. The value continues on the following line(s). */ background: /* Continue or define the selector for the CSS rule that follows. */ radial-gradient(circle at 85% 10%, rgba(143, 91, 255, 0.14), transparent 35%), /* Continue the multi-line value started by the previous CSS declaration. */ rgba(255, 255, 255, 0.035); /* Add outer or inner shadows to create depth, glow, or separation. The value continues on the following line(s). */ box-shadow: /* Continue the selector list so the following selector receives the same declarations. */ inset 0 1px rgba(255, 255, 255, 0.08), /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ 0 18px 60px rgba(0, 0, 0, 0.16); /* Animate changes to the listed CSS properties smoothly. The value continues on the following line(s). */ transition: /* Continue the selector list so the following selector receives the same declarations. */ transform 350ms var(--ease-bubbly), /* Continue the selector list so the following selector receives the same declarations. */ border-radius 350ms var(--ease-bubbly), /* Continue the selector list so the following selector receives the same declarations. */ border-color 250ms ease, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ background 250ms ease; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .feature-card:hover, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .bubbly-card:hover { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateY(-9px); /* Set the border color. */ border-color: rgba(169, 115, 255, 0.45); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 27px 39px 25px 41px; /* Set the element's solid background color. */ background-color: rgba(255, 255, 255, 0.06); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.card-icon`. */ .card-icon { /* Set the element's width. */ width: 54px; /* Set the element's height. */ height: 54px; /* Set outside spacing below this element. */ margin-bottom: 24px; /* Choose the layout model used for this element. */ display: grid; /* Align grid items on both axes with one shorthand. */ place-items: center; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50%; /* Set this element's background layers, gradients, or color. */ background: linear-gradient(145deg, var(--purple), var(--blue)); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 8px 24px rgba(116, 85, 255, 0.3); /* Set how bold the text appears. */ font-weight: 900; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .feature-card h3, /* Start the CSS rule for `.bubbly-card h3`. */ .bubbly-card h3 { /* Set outside spacing below this element. */ margin-bottom: 10px; /* Set the text size. */ font-size: 1.25rem; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .feature-card p, /* Start the CSS rule for `.bubbly-card p`. */ .bubbly-card p { /* Set the foreground/text color. */ color: var(--text-soft); /* Close the current CSS rule, media query, or animation block. */ } /* ---------------------------------------------------------------- 9. SLIDING PROJECTS AND ABOUT PANELS ---------------------------------------------------------------- */ /* Start the CSS rule for `.panel-overlay`. */ .panel-overlay { /* Choose how this element is positioned in relation to the page or its containing block. */ position: fixed; /* Set multiple edge offsets at once. */ inset: 0; /* Control this element's stacking order relative to overlapping elements. */ z-index: 1500; /* Control whether the element is visually shown while preserving layout space. */ visibility: hidden; /* Set the element's transparency. */ opacity: 0; /* Set this element's background layers, gradients, or color. */ background: rgba(1, 2, 8, 0.7); /* Apply visual effects to content visible behind this translucent element. */ backdrop-filter: blur(5px); /* Provide Safari/WebKit support for the backdrop filter. */ -webkit-backdrop-filter: blur(5px); /* Animate changes to the listed CSS properties smoothly. The value continues on the following line(s). */ transition: /* Continue the selector list so the following selector receives the same declarations. */ opacity 300ms ease, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ visibility 300ms ease; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .panel-overlay.is-visible, /* Start the CSS rule for `.panel-overlay.active`. */ .panel-overlay.active { /* Control whether the element is visually shown while preserving layout space. */ visibility: visible; /* Set the element's transparency. */ opacity: 1; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.sliding-panel`. */ .sliding-panel { /* Choose how this element is positioned in relation to the page or its containing block. */ position: fixed; /* Set the element's top offset. */ top: 0; /* Set the element's bottom offset. */ bottom: 0; /* Control this element's stacking order relative to overlapping elements. */ z-index: 1600; /* Set the element's width. */ width: min(520px, 92vw); /* Set the inside spacing between this element's content and border. */ padding: 30px; /* Control vertical overflow. */ overflow-y: auto; /* Set this element's background layers, gradients, or color. The value continues on the following line(s). */ background: /* Continue or define the selector for the CSS rule that follows. */ radial-gradient(circle at 30% 10%, rgba(151, 83, 255, 0.2), transparent 35%), /* Continue the multi-line value started by the previous CSS declaration. */ var(--panel-solid); /* Set the border width, style, and color. */ border: 1px solid var(--border); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 0 80px rgba(0, 0, 0, 0.65); /* Animate changes to the listed CSS properties smoothly. */ transition: transform 500ms var(--ease-bubbly); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.left-panel`. */ .left-panel { /* Set the element's left offset. */ left: 0; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 0 35px 35px 0; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateX(-105%); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.right-panel`. */ .right-panel { /* Set the element's right offset. */ right: 0; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 35px 0 0 35px; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateX(105%); /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .sliding-panel.is-open, /* Start the CSS rule for `.sliding-panel.active`. */ .sliding-panel.active { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateX(0); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.panel-close`. */ .panel-close { /* Set the element's width. */ width: 46px; /* Set the element's height. */ height: 46px; /* Set outside spacing to the left of this element. */ margin-left: auto; /* Choose the layout model used for this element. */ display: grid; /* Align grid items on both axes with one shorthand. */ place-items: center; /* Set the border width, style, and color. */ border: 1px solid var(--border); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50%; /* Set this element's background layers, gradients, or color. */ background: rgba(255, 255, 255, 0.07); /* Choose the mouse cursor shown over this element. */ cursor: pointer; /* Set the text size. */ font-size: 1.4rem; /* Animate changes to the listed CSS properties smoothly. The value continues on the following line(s). */ transition: /* Continue the selector list so the following selector receives the same declarations. */ transform 250ms var(--ease-bubbly), /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ background 200ms ease; /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .panel-close:hover { /* Set this element's background layers, gradients, or color. */ background: rgba(255, 255, 255, 0.13); /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: rotate(90deg) scale(1.08); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.panel-content`. */ .panel-content { /* Set inside spacing at the top. */ padding-top: 25px; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .panel-content h1, /* Start the CSS rule for `.panel-content h2`. */ .panel-content h2 { /* Set outside spacing below this element. */ margin-bottom: 18px; /* Set vertical spacing between lines of text. */ line-height: 1.1; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.panel-content p`. */ .panel-content p { /* Set outside spacing below this element. */ margin-bottom: 16px; /* Set the foreground/text color. */ color: var(--text-soft); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `body.panel-open`. */ body.panel-open { /* Control what happens when content extends outside the element. */ overflow: hidden; /* Close the current CSS rule, media query, or animation block. */ } /* ---------------------------------------------------------------- 10. RESPONSIVE TABLET DESIGN ---------------------------------------------------------------- */ /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (max-width: 1180px) { /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ :root { /* Set the reusable CSS custom property `--sidebar-width` to this value. */ --sidebar-width: 200px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.hero-section`. */ .hero-section { /* Define the number and width of grid columns. */ grid-template-columns: 1fr; /* Set inside spacing at the top. */ padding-top: 85px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.hero-text`. */ .hero-text { /* Set the largest width this element is allowed to have. */ max-width: 760px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-wrapper`. */ .universe-wrapper { /* Set the element's width. */ width: min(720px, 78vw); /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* ---------------------------------------------------------------- 11. RESPONSIVE PHONE DESIGN ---------------------------------------------------------------- */ /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (max-width: 760px) { /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ :root { /* Set the reusable CSS custom property `--header-height` to this value. */ --header-height: 70px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.top-header`. */ .top-header { /* Set the inside spacing between this element's content and border. */ padding: 0 15px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.brand-text`. */ .brand-text { /* Choose the layout model used for this element. */ display: none; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.brand-icon`. */ .brand-icon { /* Set the element's width. */ width: 40px; /* Set the element's height. */ height: 40px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.top-navigation`. */ .top-navigation { /* Set spacing between grid or flex children. */ gap: 4px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.top-nav-button`. */ .top-nav-button { /* Set the inside spacing between this element's content and border. */ padding: 8px 10px; /* Set the text size. */ font-size: 0.82rem; /* Close the current CSS rule, media query, or animation block. */ } /* On phones, the side navigation becomes a horizontal menu underneath the main header. */ /* Start the CSS rule for `.side-navigation`. */ .side-navigation { /* Set the element's top offset. */ top: var(--header-height); /* Set the element's bottom offset. */ bottom: auto; /* Set the element's width. */ width: 100%; /* Set the element's height. */ height: 60px; /* Set the inside spacing between this element's content and border. */ padding: 8px 12px; /* Choose the layout model used for this element. */ display: flex; /* Set spacing between grid or flex children. */ gap: 8px; /* Control horizontal overflow. */ overflow-x: auto; /* Control vertical overflow. */ overflow-y: hidden; /* Set the right border. */ border-right: 0; /* Set the bottom border. */ border-bottom: 1px solid var(--border); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.side-menu-section`. */ .side-menu-section { /* Choose the layout model used for this element. */ display: contents; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.side-menu-title`. */ .side-menu-title { /* Choose the layout model used for this element. */ display: none; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.side-menu-item`. */ .side-menu-item { /* Set the flex grow, shrink, and basis behavior. */ flex: 0 0 auto; /* Set the element's width. */ width: auto; /* Set the smallest height this element is allowed to have. */ min-height: 42px; /* Set horizontal inside spacing. */ padding-inline: 13px; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .side-menu-item:hover, /* Start the CSS rule for `.side-menu-item.active`. */ .side-menu-item.active { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateY(-2px); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.main-content`. */ .main-content { /* Set outside spacing to the left of this element. */ margin-left: 0; /* Set inside spacing at the top. */ padding-top: calc(var(--header-height) + 60px); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.hero-section`. */ .hero-section { /* Set the smallest height this element is allowed to have. */ min-height: auto; /* Set the inside spacing between this element's content and border. */ padding: 65px 20px 55px; /* Control what happens when content extends outside the element. */ overflow: hidden; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.hero-title`. */ .hero-title { /* Set the text size. */ font-size: clamp(2.7rem, 14vw, 4.5rem); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.hero-buttons`. */ .hero-buttons { /* Align child items along the cross axis. */ align-items: stretch; /* Choose the direction in which flex children are laid out. */ flex-direction: column; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .primary-button, /* Start the CSS rule for `.secondary-button`. */ .secondary-button { /* Set the element's width. */ width: 100%; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-wrapper`. */ .universe-wrapper { /* Set the element's width. */ width: 680px; /* Set the largest width this element is allowed to have. */ max-width: none; /* Set outside spacing to the left of this element. */ margin-left: 50%; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateX(-50%) scale(0.72); /* Set outside spacing above this element. */ margin-top: -70px; /* Set outside spacing below this element. */ margin-bottom: -70px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.content-section`. */ .content-section { /* Set the inside spacing between this element's content and border. */ padding: 80px 20px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.card-grid`. */ .card-grid { /* Define the number and width of grid columns. */ grid-template-columns: 1fr; /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* ---------------------------------------------------------------- 12. EXTRA-SMALL PHONE ADJUSTMENTS ---------------------------------------------------------------- */ /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (max-width: 430px) { /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .top-nav-button:not(.sign-in-button) { /* Set horizontal inside spacing. */ padding-inline: 7px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-wrapper`. */ .universe-wrapper { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateX(-50%) scale(0.58); /* Set outside spacing above this element. */ margin-top: -120px; /* Set outside spacing below this element. */ margin-bottom: -120px; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.hero-status`. */ .hero-status { /* Align child items along the cross axis. */ align-items: flex-start; /* Choose the direction in which flex children are laid out. */ flex-direction: column; /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* ---------------------------------------------------------------- 13. REDUCED-MOTION ACCESSIBILITY ---------------------------------------------------------------- */ /* If a visitor has disabled animations in their device settings, the site stops continuous motion and uses instant scrolling. */ /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (prefers-reduced-motion: reduce) { /* Start the CSS rule for `html`. */ html { /* Control whether scrolling jumps instantly or animates smoothly. */ scroll-behavior: auto; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ *, /* Continue the multi-line CSS value on the next line. */ *::before, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ *::after { /* Set how long one animation cycle takes. */ animation-duration: 0.01ms !important; /* Set how many times the animation repeats. */ animation-iteration-count: 1 !important; /* Control whether scrolling jumps instantly or animates smoothly. */ scroll-behavior: auto !important; /* Set how long transitions take. */ transition-duration: 0.01ms !important; /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* ================================================================ AUTHENTICATION POPUP AND STANDALONE PAGE STYLES ================================================================ */ /* Start the CSS rule for `.standalone-page`. */ .standalone-page { /* Set the smallest height this element is allowed to have. */ min-height: 100vh; /* Set the inside spacing between this element's content and border. */ padding: clamp(28px, 6vw, 80px); /* Choose the layout model used for this element. */ display: grid; /* Align grid items on both axes with one shorthand. */ place-items: center /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.standalone-page .panel-page-content`. */ .standalone-page .panel-page-content { /* Set the element's width. */ width: min(820px, 100%) /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .panel-page-content>h1, /* Start the CSS rule for `.auth-card>h1`. */ .auth-card>h1 { /* Set the outside spacing around this element. */ margin: 12px 0 16px; /* Set the text size. */ font-size: clamp(2.2rem, 6vw, 4.6rem); /* Set vertical spacing between lines of text. */ line-height: 1; /* Set spacing between characters. */ letter-spacing: -.055em /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.panel-page-content>p`. */ .panel-page-content>p { /* Set outside spacing below this element. */ margin-bottom: 22px; /* Set the foreground/text color. */ color: var(--text-soft) /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.panel-page-content .bubbly-card`. */ .panel-page-content .bubbly-card { /* Set the smallest height this element is allowed to have. */ min-height: 0; /* Set the outside spacing around this element. */ margin: 18px 0 /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-overlay`. */ .auth-overlay { /* Choose how this element is positioned in relation to the page or its containing block. */ position: fixed; /* Set multiple edge offsets at once. */ inset: 0; /* Control this element's stacking order relative to overlapping elements. */ z-index: 1700; /* Control whether the element is visually shown while preserving layout space. */ visibility: hidden; /* Set the element's transparency. */ opacity: 0; /* Choose the layout model used for this element. */ display: grid; /* Align grid items on both axes with one shorthand. */ place-items: center; /* Set the inside spacing between this element's content and border. */ padding: 20px; /* Set this element's background layers, gradients, or color. */ background: rgba(1, 2, 9, .78); /* Apply visual effects to content visible behind this translucent element. */ backdrop-filter: blur(12px); /* Provide Safari/WebKit support for the backdrop filter. */ -webkit-backdrop-filter: blur(12px); /* Animate changes to the listed CSS properties smoothly. */ transition: opacity 280ms ease, visibility 280ms ease /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-overlay.is-visible`. */ .auth-overlay.is-visible { /* Control whether the element is visually shown while preserving layout space. */ visibility: visible; /* Set the element's transparency. */ opacity: 1 /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-modal`. */ .auth-modal { /* Choose how this element is positioned in relation to the page or its containing block. */ position: relative; /* Set the element's width. */ width: min(500px, 100%); /* Set the largest height this element is allowed to have. */ max-height: min(820px, calc(100vh - 40px)); /* Control vertical overflow. */ overflow-y: auto; /* Set the inside spacing between this element's content and border. */ padding: clamp(26px, 5vw, 44px); /* Set the border width, style, and color. */ border: 1px solid rgba(255, 255, 255, .18); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 38px 30px 42px 28px; /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 20% 0%, rgba(160, 89, 255, .24), transparent 36%), radial-gradient(circle at 100% 100%, rgba(51, 230, 255, .12), transparent 38%), #0b0e20; /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 30px 100px rgba(0, 0, 0, .7), inset 0 1px rgba(255, 255, 255, .09); /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateY(24px) scale(.94); /* Animate changes to the listed CSS properties smoothly. */ transition: transform 420ms var(--ease-bubbly) /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-overlay.is-visible .auth-modal`. */ .auth-overlay.is-visible .auth-modal { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateY(0) scale(1) /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-close`. */ .auth-close { /* Choose how this element is positioned in relation to the page or its containing block. */ position: sticky; /* Set the element's top offset. */ top: 0; /* Control this element's stacking order relative to overlapping elements. */ z-index: 3; /* Float this element to one side so surrounding content can flow around it. */ float: right; /* Set the element's width. */ width: 44px; /* Set the element's height. */ height: 44px; /* Choose the layout model used for this element. */ display: grid; /* Align grid items on both axes with one shorthand. */ place-items: center; /* Set the border width, style, and color. */ border: 1px solid var(--border); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50%; /* Set this element's background layers, gradients, or color. */ background: rgba(255, 255, 255, .08); /* Set the foreground/text color. */ color: #fff; /* Choose the mouse cursor shown over this element. */ cursor: pointer; /* Set the text size. */ font-size: 1.45rem; /* Animate changes to the listed CSS properties smoothly. */ transition: transform 240ms var(--ease-bubbly), background 180ms ease /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .auth-close:hover { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: rotate(90deg) scale(1.08); /* Set this element's background layers, gradients, or color. */ background: rgba(255, 255, 255, .15) /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-modal-content`. */ .auth-modal-content { /* Prevent this element from wrapping beside earlier floated elements. */ clear: both /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-card`. */ .auth-card { /* Set the element's width. */ width: 100% /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-brand`. */ .auth-brand { /* Set the element's width. */ width: max-content; /* Set outside spacing below this element. */ margin-bottom: 34px /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-card .brand-text`. */ .auth-card .brand-text { /* Choose the layout model used for this element. */ display: inline /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-card>h1`. */ .auth-card>h1 { /* Set the text size. */ font-size: clamp(2.35rem, 7vw, 4rem) /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .auth-card>p, /* Start the CSS rule for `.auth-switch`. */ .auth-switch { /* Set the foreground/text color. */ color: var(--text-soft) /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-form`. */ .auth-form { /* Set outside spacing above this element. */ margin-top: 28px; /* Choose the layout model used for this element. */ display: grid; /* Set spacing between grid or flex children. */ gap: 10px /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-form label`. */ .auth-form label { /* Set outside spacing above this element. */ margin-top: 8px; /* Set the foreground/text color. */ color: #dfe2f5; /* Set the text size. */ font-size: .88rem; /* Set how bold the text appears. */ font-weight: 750 /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .auth-form input[type=text], /* Continue the selector list so the following selector receives the same declarations. */ .auth-form input[type=email], /* Start the CSS rule for `.auth-form input[type=password]`. */ .auth-form input[type=password] { /* Set the element's width. */ width: 100%; /* Set the smallest height this element is allowed to have. */ min-height: 52px; /* Set the inside spacing between this element's content and border. */ padding: 12px 16px; /* Set the border width, style, and color. */ border: 1px solid rgba(255, 255, 255, .14); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 16px; /* Draw a focus outline without affecting layout. */ outline: 0; /* Set this element's background layers, gradients, or color. */ background: rgba(255, 255, 255, .055); /* Set the foreground/text color. */ color: #fff; /* Set several font properties with one shorthand. */ font: inherit; /* Animate changes to the listed CSS properties smoothly. */ transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .auth-form input::placeholder { /* Set the foreground/text color. */ color: #777d98 /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .auth-form input:focus { /* Set the border color. */ border-color: var(--cyan); /* Set this element's background layers, gradients, or color. */ background: rgba(255, 255, 255, .08); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 0 0 4px rgba(51, 230, 255, .1) /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-form .primary-button`. */ .auth-form .primary-button { /* Set the element's width. */ width: 100%; /* Set outside spacing above this element. */ margin-top: 18px /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-options`. */ .auth-options { /* Set outside spacing above this element. */ margin-top: 8px; /* Choose the layout model used for this element. */ display: flex; /* Align child items along the cross axis. */ align-items: center; /* Distribute child items along the main axis. */ justify-content: space-between; /* Set spacing between grid or flex children. */ gap: 16px; /* Set the text size. */ font-size: .86rem /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.remember-option`. */ .remember-option { /* Choose the layout model used for this element. */ display: inline-flex; /* Align child items along the cross axis. */ align-items: center; /* Set spacing between grid or flex children. */ gap: 8px; /* Set the foreground/text color. */ color: var(--text-soft) !important; /* Choose the mouse cursor shown over this element. */ cursor: pointer /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.remember-option input`. */ .remember-option input { /* Set the accent color used by form controls such as checkboxes. */ accent-color: var(--purple) /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .auth-options a, /* Start the CSS rule for `.auth-switch a`. */ .auth-switch a { /* Set the foreground/text color. */ color: var(--cyan); /* Set how bold the text appears. */ font-weight: 800 /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .auth-options a:hover, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .auth-switch a:hover { /* Control underlines and other text decorations. */ text-decoration: underline /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-switch`. */ .auth-switch { /* Set outside spacing above this element. */ margin-top: 24px; /* Set horizontal alignment of text. */ text-align: center /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .auth-loading, /* Start the CSS rule for `.auth-error`. */ .auth-error { /* Set the inside spacing between this element's content and border. */ padding: 50px 10px; /* Set horizontal alignment of text. */ text-align: center; /* Set the foreground/text color. */ color: var(--text-soft) /* Close the current CSS rule, media query, or animation block. */ } /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media(max-width:560px) { /* Start the CSS rule for `.standalone-page`. */ .standalone-page { /* Set the inside spacing between this element's content and border. */ padding: 18px /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-overlay`. */ .auth-overlay { /* Set the inside spacing between this element's content and border. */ padding: 10px /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-modal`. */ .auth-modal { /* Set the largest height this element is allowed to have. */ max-height: calc(100vh - 20px); /* Set the inside spacing between this element's content and border. */ padding: 24px 20px 30px; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 28px 24px 30px 22px /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.auth-options`. */ .auth-options { /* Align child items along the cross axis. */ align-items: flex-start; /* Choose the direction in which flex children are laid out. */ flex-direction: column /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Existing index.html panel class compatibility. */ /* Start the CSS rule for `.slide-panel`. */ .slide-panel { /* Choose how this element is positioned in relation to the page or its containing block. */ position: fixed; /* Set the element's top offset. */ top: 0; /* Set the element's bottom offset. */ bottom: 0; /* Control this element's stacking order relative to overlapping elements. */ z-index: 1600; /* Set the element's width. */ width: min(520px, 92vw); /* Set the inside spacing between this element's content and border. */ padding: 30px; /* Control vertical overflow. */ overflow-y: auto; /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 30% 10%, rgba(151, 83, 255, .2), transparent 35%), var(--panel-solid); /* Set the border width, style, and color. */ border: 1px solid var(--border); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 0 80px rgba(0, 0, 0, .65); /* Animate changes to the listed CSS properties smoothly. */ transition: transform 500ms var(--ease-bubbly); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.slide-panel.projects-panel`. */ .slide-panel.projects-panel { /* Set the element's left offset. */ left: 0; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 0 35px 35px 0; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateX(-105%) /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.slide-panel.about-panel`. */ .slide-panel.about-panel { /* Set the element's right offset. */ right: 0; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 35px 0 0 35px; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateX(105%) /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.slide-panel.is-open`. */ .slide-panel.is-open { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateX(0) /* Close the current CSS rule, media query, or animation block. */ } /* ========================================================= HOVER-REVEAL LEFT NAVIGATION The desktop menu waits behind a visible vertical tab, then glides into view when the visitor hovers or tabs into it. ========================================================= */ /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (min-width: 901px) and (hover: hover) { /* Start the CSS rule for `.side-navigation`. */ .side-navigation { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateX(calc(-100% + 44px)); /* Animate changes to the listed CSS properties smoothly. */ transition: transform 480ms var(--ease-bubbly), box-shadow 480ms ease; /* Control this element's stacking order relative to overlapping elements. */ z-index: 1200; /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 24px 0 55px rgba(0, 0, 0, 0); /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-navigation::after { /* Provide generated content for a pseudo-element. */ content: "MENU"; /* Choose how this element is positioned in relation to the page or its containing block. */ position: absolute; /* Set the element's top offset. */ top: 50%; /* Set the element's right offset. */ right: 0; /* Set the element's width. */ width: 44px; /* Set the smallest height this element is allowed to have. */ min-height: 112px; /* Choose the layout model used for this element. */ display: grid; /* Align grid items on both axes with one shorthand. */ place-items: center; /* Set the inside spacing between this element's content and border. */ padding: 14px 0; /* Set the foreground/text color. */ color: #fff; /* Set the text size. */ font-size: .7rem; /* Set how bold the text appears. */ font-weight: 900; /* Set spacing between characters. */ letter-spacing: .18em; /* Change the direction in which text is laid out. */ writing-mode: vertical-rl; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateY(-50%); /* Choose the mouse cursor shown over this element. */ cursor: pointer; /* Set the border width, style, and color. */ border: 1px solid var(--border); /* Set the left border. */ border-left: 0; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 0 22px 22px 0; /* Set this element's background layers, gradients, or color. */ background: linear-gradient(180deg, rgba(151, 83, 255, .96), rgba(32, 199, 255, .88)); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 12px 0 35px rgba(87, 76, 255, .3); /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .side-navigation:hover, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-navigation:focus-within { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateX(0); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 24px 0 55px rgba(0, 0, 0, .48); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.main-content`. */ .main-content { /* Set outside spacing to the left of this element. */ margin-left: 0; /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Original-style compact navy navigation handle. */ /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (min-width: 901px) and (hover: hover) { /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-navigation::after { /* Provide generated content for a pseudo-element. */ content: "›"; /* Set the element's top offset. */ top: 50%; /* Set the element's right offset. */ right: 0; /* Set the element's width. */ width: 44px; /* Set the element's height. */ height: 58px; /* Set the smallest height this element is allowed to have. */ min-height: 58px; /* Set the inside spacing between this element's content and border. */ padding: 0; /* Change the direction in which text is laid out. */ writing-mode: horizontal-tb; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateY(-50%); /* Set the foreground/text color. */ color: rgba(99, 230, 255, .9); /* Set the text size. */ font-size: 1.35rem; /* Set spacing between characters. */ letter-spacing: 0; /* Set the border width, style, and color. */ border: 1px solid rgba(76, 213, 255, .2); /* Set the left border. */ border-left: 0; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 0 18px 18px 0; /* Set this element's background layers, gradients, or color. */ background: linear-gradient(145deg, rgba(12, 25, 48, .98), rgba(10, 31, 48, .98)); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 8px 0 22px rgba(0, 0, 0, .32), inset -1px 0 rgba(66, 211, 255, .08); /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .side-navigation:hover::after, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-navigation:focus-within::after { /* Set the foreground/text color. */ color: #fff; /* Set this element's background layers, gradients, or color. */ background: linear-gradient(145deg, rgba(40, 42, 91, .98), rgba(10, 52, 69, .98)); /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Individual edge tabs: Explorer left; Social and Community right. */ /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (min-width:901px) and (hover:hover) { /* Start the CSS rule for `.side-navigation`. */ .side-navigation { /* Set multiple edge offsets at once. */ inset: 82px 0 0; /* Set the element's width. */ width: auto; /* Set the element's height. */ height: auto; /* Set the inside spacing between this element's content and border. */ padding: 0; /* Control what happens when content extends outside the element. */ overflow: visible; /* Set the border width, style, and color. */ border: 0; /* Set this element's background layers, gradients, or color. */ background: transparent; /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: none; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: none !important; /* Control whether this element can receive mouse or pointer input. */ pointer-events: none /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .side-navigation::after, /* Start the CSS rule for `.side-menu-title`. */ .side-menu-title { /* Choose the layout model used for this element. */ display: none !important /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.side-menu-section`. */ .side-menu-section { /* Choose how this element is positioned in relation to the page or its containing block. */ position: absolute !important; /* Set the element's width. */ width: 178px; /* Set the outside spacing around this element. */ margin: 0 !important; /* Choose the layout model used for this element. */ display: grid; /* Set spacing between grid or flex children. */ gap: 7px; /* Control whether this element can receive mouse or pointer input. */ pointer-events: none /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-menu-section:nth-of-type(1) { /* Set the element's top offset. */ top: 54px; /* Set the element's left offset. */ left: 0 /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-menu-section:nth-of-type(2) { /* Set the element's top offset. */ top: 18px; /* Set the element's right offset. */ right: 0 /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-menu-section:nth-of-type(3) { /* Set the element's top offset. */ top: 366px; /* Set the element's right offset. */ right: 0 /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.side-navigation .side-menu-item`. */ .side-navigation .side-menu-item { /* Set the element's width. */ width: 178px; /* Set the smallest height this element is allowed to have. */ min-height: 39px; /* Set the outside spacing around this element. */ margin: 0; /* Set the inside spacing between this element's content and border. */ padding: 9px 15px; /* Control whether this element can receive mouse or pointer input. */ pointer-events: auto; /* Set the foreground/text color. */ color: var(--text-main); /* Set this element's background layers, gradients, or color. */ background: linear-gradient(145deg, rgba(11, 24, 46, .98), rgba(10, 31, 48, .98)); /* Set the border width, style, and color. */ border: 1px solid rgba(75, 211, 255, .17); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 7px 8px 22px rgba(0, 0, 0, .22); /* Animate changes to the listed CSS properties smoothly. */ transition: transform 380ms var(--ease-bubbly), background 260ms ease, border-color 260ms ease /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-menu-section:nth-of-type(1) .side-menu-item { /* Set the left border. */ border-left: 0; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 0 16px 16px 0; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateX(calc(-100% + 44px)) /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .side-menu-section:nth-of-type(2) .side-menu-item, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-menu-section:nth-of-type(3) .side-menu-item { /* Set the right border. */ border-right: 0; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 16px 0 0 16px; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateX(calc(100% - 44px)) /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .side-navigation .side-menu-item:hover, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-navigation .side-menu-item:focus-visible { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateX(0) !important; /* Set the foreground/text color. */ color: #fff; /* Set the border color. */ border-color: rgba(82, 225, 255, .42); /* Set this element's background layers, gradients, or color. */ background: linear-gradient(145deg, rgba(39, 40, 88, .99), rgba(9, 54, 70, .99)); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 10px 12px 30px rgba(0, 0, 0, .38) /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-menu-section:nth-of-type(1) .side-menu-item::after { /* Provide generated content for a pseudo-element. */ content: "›"; /* Set outside spacing to the left of this element. */ margin-left: auto; /* Set the foreground/text color. */ color: var(--cyan); /* Set the text size. */ font-size: 1.1rem /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .side-menu-section:nth-of-type(2) .side-menu-item::before, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-menu-section:nth-of-type(3) .side-menu-item::before { /* Provide generated content for a pseudo-element. */ content: "‹"; /* Set the foreground/text color. */ color: var(--cyan); /* Set the text size. */ font-size: 1.1rem; /* Set outside spacing to the right of this element. */ margin-right: 3px /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* The full-screen tab rail must never blur page content. */ /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (min-width:901px) and (hover:hover) { /* Start the CSS rule for `.side-navigation`. */ .side-navigation { /* Apply visual effects to content visible behind this translucent element. */ backdrop-filter: none; /* Provide Safari/WebKit support for the backdrop filter. */ -webkit-backdrop-filter: none /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Compact only the right-side Social and Community tabs so all fit. */ /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (min-width:901px) and (hover:hover) { /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-menu-section:nth-of-type(2) { /* Set the element's top offset. */ top: 10px; /* Set spacing between grid or flex children. */ gap: 4px /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-menu-section:nth-of-type(3) { /* Set the element's top offset. */ top: 282px; /* Set spacing between grid or flex children. */ gap: 4px /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .side-menu-section:nth-of-type(2) .side-menu-item, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-menu-section:nth-of-type(3) .side-menu-item { /* Set the element's width. */ width: 158px; /* Set the smallest height this element is allowed to have. */ min-height: 30px; /* Set the element's height. */ height: 30px; /* Set the inside spacing between this element's content and border. */ padding: 4px 11px; /* Set the text size. */ font-size: .76rem; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 13px 0 0 13px; /* Set vertical spacing between lines of text. */ line-height: 1 /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .side-menu-section:nth-of-type(2), /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-menu-section:nth-of-type(3) { /* Set the element's width. */ width: 158px /* Close the current CSS rule, media query, or animation block. */ } /* Continue the multi-line CSS value on the next line. */ .side-menu-section:nth-of-type(2) .side-menu-item, /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .side-menu-section:nth-of-type(3) .side-menu-item { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateX(calc(100% - 38px)) /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* ========================================================= THREE-DIMENSIONAL PERSONAL ORBITS Every bubble receives a dedicated ring and travels only on that ring. Perspective, depth fading and scale create the feeling of passing behind and in front of the central sun. ========================================================= */ /* Start the CSS rule for `.universe-wrapper`. */ .universe-wrapper { /* Set the viewing depth used for 3D-transformed descendants. */ perspective: 1050px; /* Control whether child elements participate in 3D transforms. */ transform-style: preserve-3d; /* Create an independent stacking context for this element. */ isolation: isolate /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.personal-orbit`. */ .personal-orbit { /* Choose how this element is positioned in relation to the page or its containing block. */ position: absolute; /* Set the element's left offset. */ left: 50%; /* Set the element's top offset. */ top: 50%; /* Set the element's width. */ width: calc(var(--orbit-radius)*2); /* Set the element's height. */ height: calc(var(--orbit-radius)*2); /* Set the border width, style, and color. */ border: 1px solid hsla(var(--orbit-hue), 88%, 72%, .22); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50%; /* Control whether this element can receive mouse or pointer input. */ pointer-events: none; /* Control whether child elements participate in 3D transforms. */ transform-style: preserve-3d; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(-50%, -50%) rotate(var(--orbit-tilt)) rotateX(68deg); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 0 12px hsla(var(--orbit-hue), 90%, 64%, .055), inset 0 0 12px hsla(var(--orbit-hue), 90%, 64%, .035) /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit::before { /* Provide generated content for a pseudo-element. */ content: ""; /* Choose how this element is positioned in relation to the page or its containing block. */ position: absolute; /* Set multiple edge offsets at once. */ inset: -2px; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: inherit; /* Set the top border. */ border-top: 2px solid hsla(var(--orbit-hue), 94%, 78%, .3); /* Apply visual effects such as brightness, blur, saturation, or drop-shadow. */ filter: drop-shadow(0 0 4px hsla(var(--orbit-hue), 90%, 68%, .25)) /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble`. */ .universe-bubble { /* Control whether child elements participate in 3D transforms. */ transform-style: preserve-3d; /* Control whether the back side of a 3D-transformed element is visible. */ backface-visibility: hidden; /* Hint which properties are likely to animate so the browser can optimize rendering. */ will-change: transform, opacity; /* Animate changes to the listed CSS properties smoothly. */ transition: filter .25s ease, box-shadow .25s ease /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.moaliverse-core`. */ .moaliverse-core { /* Control this element's stacking order relative to overlapping elements. */ z-index: 50; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translateZ(0); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 24px 70px rgba(61, 85, 255, .42) /* Close the current CSS rule, media query, or animation block. */ } /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media(max-width:900px) { /* Start the CSS rule for `.personal-orbit`. */ .personal-orbit { /* Set the element's transparency. */ opacity: .72 /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media(prefers-reduced-motion:reduce) { /* Start the CSS rule for `.personal-orbit`. */ .personal-orbit { /* Set the element's transparency. */ opacity: .35 /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble`. */ .universe-bubble { /* Animate changes to the listed CSS properties smoothly. */ transition: none /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Personal rings replace the four old shared guide rings. */ /* Start the CSS rule for `.orbit-ring`. */ .orbit-ring { /* Choose the layout model used for this element. */ display: none /* Close the current CSS rule, media query, or animation block. */ } /* Cleaner orbit treatment: quiet guide lines keep the bubbles dominant. */ /* Start the CSS rule for `.personal-orbit`. */ .personal-orbit { /* Set the element's transparency. */ opacity: .42; /* Set the border color. */ border-color: rgba(126, 180, 255, .13); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: none /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit::before { /* Choose the layout model used for this element. */ display: none /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble`. */ .universe-bubble { /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: inset 8px 9px 18px rgba(255, 255, 255, .14), inset -10px -12px 20px rgba(0, 0, 0, .18), 0 12px 28px rgba(0, 0, 0, .28) /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.moaliverse-core`. */ .moaliverse-core { /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: inset 18px 20px 38px rgba(255, 255, 255, .13), inset -24px -28px 45px rgba(14, 16, 74, .24), 0 24px 65px rgba(58, 74, 255, .36) /* Close the current CSS rule, media query, or animation block. */ } /* Smaller central sun lets bubbles pass visibly across its front. */ /* Start the CSS rule for `.moaliverse-core`. */ .moaliverse-core { /* Set the element's width. */ width: 190px !important; /* Set the element's height. */ height: 190px !important; /* Control this element's stacking order relative to overlapping elements. */ z-index: 20 !important /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.core-main-text`. */ .core-main-text { /* Set the text size. */ font-size: clamp(1rem, 2vw, 1.45rem) /* Close the current CSS rule, media query, or animation block. */ } /* Clear but restrained orbit guides. */ /* Start the CSS rule for `.personal-orbit`. */ .personal-orbit { /* Set the element's transparency. */ opacity: .78; /* Set the border width, style, and color. */ border: 1px solid rgba(118, 190, 255, .31); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 0 9px rgba(79, 123, 255, .12), inset 0 0 8px rgba(147, 88, 255, .08) /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-of-type(3n) { /* Set the border color. */ border-color: rgba(170, 112, 255, .29) /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-of-type(3n+1) { /* Set the border color. */ border-color: rgba(65, 210, 255, .28) /* Close the current CSS rule, media query, or animation block. */ } /* Force true front/back compositing above the legacy page behavior. */ /* Start the CSS rule for `.universe-bubble.orbit-front`. */ .universe-bubble.orbit-front { /* Control this element's stacking order relative to overlapping elements. */ z-index: 200 !important /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble.orbit-back`. */ .universe-bubble.orbit-back { /* Control this element's stacking order relative to overlapping elements. */ z-index: 10 !important /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.moaliverse-core`. */ .moaliverse-core { /* Control this element's stacking order relative to overlapping elements. */ z-index: 50 !important /* Close the current CSS rule, media query, or animation block. */ } /* ================================================================ REALISTIC PLANET + SUN THEME Keeps the working 3D orbit engine while replacing glass bubbles with shaded worlds and a glowing central star. ================================================================ */ /* MOALIVERSE becomes a hot sun with a bright center and orange corona. */ /* Start the CSS rule for `.moaliverse-core`. */ .moaliverse-core { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 31% 25%, rgba(255, 255, 255, .98) 0 3%, rgba(255, 246, 157, .88) 4%, transparent 16%), radial-gradient(circle at 50% 48%, #fff8b7 0%, #ffd84f 28%, #ff9b19 56%, #e64e08 80%, #8f1d03 100%) !important; /* Set the border width, style, and color. */ border: 1px solid rgba(255, 232, 132, .9) !important; /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: inset -24px -28px 42px rgba(119, 25, 0, .4), inset 16px 17px 30px rgba(255, 255, 255, .28), 0 0 26px rgba(255, 213, 73, .95), 0 0 65px rgba(255, 128, 18, .62), 0 0 115px rgba(255, 72, 12, .32) !important; /* Attach an animation and define its timing, duration, and repetition. */ animation: solar-pulse 5s ease-in-out infinite !important; /* Close the current CSS rule, media query, or animation block. */ } /* This glow makes the sun illuminate the nearby orbital space. */ /* Start the CSS rule for `.core-glow`. */ .core-glow { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle, rgba(255, 214, 65, .78), rgba(255, 103, 18, .3) 43%, transparent 72%) !important; /* Apply visual effects such as brightness, blur, saturation, or drop-shadow. */ filter: blur(18px) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .core-main-text, /* Start the CSS rule for `.core-small-text`. */ .core-small-text { /* Set the foreground/text color. */ color: #fffdf0 !important; /* Add shadows or glow around text. */ text-shadow: 0 2px 3px #8b2700, 0 0 9px rgba(255, 245, 185, .95) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Each item is a spherical planet with a lit side and night-side shadow. */ /* Start the CSS rule for `.universe-bubble`. */ .universe-bubble { /* Set the border width, style, and color. */ border: 1px solid rgba(255, 255, 255, .38) !important; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50% !important; /* Control what happens when content extends outside the element. */ overflow: hidden; /* Set the foreground/text color. */ color: #fff !important; /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: inset 11px 9px 16px rgba(255, 255, 255, .25), inset -15px -17px 22px rgba(0, 0, 0, .48), 0 8px 21px rgba(0, 0, 0, .48) !important; /* Add shadows or glow around text. */ text-shadow: 0 2px 4px rgba(0, 0, 0, .95), 0 0 5px rgba(0, 0, 0, .8) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Atmospheric highlight plus curved shading creates the round 3D shape. */ /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .universe-bubble::before { /* Provide generated content for a pseudo-element. */ content: ""; /* Choose how this element is positioned in relation to the page or its containing block. */ position: absolute; /* Set multiple edge offsets at once. */ inset: 0; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: inherit; /* Control whether this element can receive mouse or pointer input. */ pointer-events: none; /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 27% 22%, rgba(255, 255, 255, .62), transparent 19%), radial-gradient(circle at 32% 28%, transparent 0 29%, rgba(0, 0, 0, .04) 47%, rgba(0, 0, 0, .57) 100%); /* Close the current CSS rule, media query, or animation block. */ } /* Individual layered surfaces suggest gas, rock, clouds, oceans and ice. */ /* Start the CSS rule for `.universe-bubble[data-name="gaming"]`. */ .universe-bubble[data-name="gaming"] { /* Set this element's background layers, gradients, or color. */ background: repeating-linear-gradient(172deg, #9b78d5 0 7px, #573579 8px 13px, #d4a75c 14px 18px) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="tech"]`. */ .universe-bubble[data-name="tech"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 35% 30%, #baf7ff 0 8%, #27b8d4 35%, #075786 72%, #032b51) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="youtube"]`. */ .universe-bubble[data-name="youtube"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 32% 25%, #ff9b66, #d83a22 42%, #68120e 78%, #260607) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="instagram"]`. */ .universe-bubble[data-name="instagram"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 35% 25%, #ffd45b, #ef477f 38%, #8238a7 70%, #30115b) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="facebook"]`. */ .universe-bubble[data-name="facebook"] { /* Set this element's background layers, gradients, or color. */ background: repeating-linear-gradient(170deg, #5ba9ff 0 8px, #1664ba 9px 15px, #123c82 16px 20px) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="x"]`. */ .universe-bubble[data-name="x"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 35% 28%, #dfe5eb, #7d8995 46%, #323b45 76%, #11161c) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="tiktok"]`. */ .universe-bubble[data-name="tiktok"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 35% 28%, #6dfff5, #13a8a8 42%, #153a50 74%, #101622) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="threads"]`. */ .universe-bubble[data-name="threads"] { /* Set this element's background layers, gradients, or color. */ background: repeating-linear-gradient(160deg, #7450a4 0 6px, #34204f 7px 13px, #151023 14px 18px) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="reddit"]`. */ .universe-bubble[data-name="reddit"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 34% 25%, #ffd087, #eb6b25 42%, #9a2c12 72%, #4b1009) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="snapchat"]`. */ .universe-bubble[data-name="snapchat"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 33% 26%, #fff9b0, #f6d72f 46%, #a67908 79%, #513806) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="pinterest"]`. */ .universe-bubble[data-name="pinterest"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 32% 25%, #ff9b99, #cf273b 43%, #761020 75%, #340711) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="linkedin"]`. */ .universe-bubble[data-name="linkedin"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 32% 25%, #8de9ff, #238ac0 43%, #0b4778 75%, #05233f) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="twitch"]`. */ .universe-bubble[data-name="twitch"] { /* Set this element's background layers, gradients, or color. */ background: repeating-linear-gradient(168deg, #c395ff 0 7px, #7646bd 8px 14px, #342063 15px 20px) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="discord"]`. */ .universe-bubble[data-name="discord"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 32% 25%, #aebcff, #6478db 43%, #303c8d 74%, #151b49) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="wechat"]`. */ .universe-bubble[data-name="wechat"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 32% 25%, #b3ffab, #32af62 43%, #12643b 74%, #07341f) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="bilibili"]`. */ .universe-bubble[data-name="bilibili"] { /* Set this element's background layers, gradients, or color. */ background: repeating-linear-gradient(165deg, #c5fbff 0 7px, #4bc7dc 8px 14px, #187c9d 15px 20px) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="douyin"]`. */ .universe-bubble[data-name="douyin"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 30% 24%, #ff7680, #243347 38%, #111722 68%, #05080d) !important; /* Close the current CSS rule, media query, or animation block. */ } /* The sun breathes gently; this never changes any planet's orbit. */ /* Define the animation named solar-pulse; the percentage blocks below describe how it changes over time. */ @keyframes solar-pulse { /* Define this stage of the current animation. */ 0%, /* Define this stage of the current animation. */ 100% { /* Apply visual effects such as brightness, blur, saturation, or drop-shadow. */ filter: saturate(1) brightness(1); /* Close the current CSS rule, media query, or animation block. */ } /* Define this stage of the current animation. */ 50% { /* Apply visual effects such as brightness, blur, saturation, or drop-shadow. */ filter: saturate(1.08) brightness(1.07); /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Accessibility: preserve the appearance while stopping decoration motion. */ /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (prefers-reduced-motion: reduce) { /* Start the CSS rule for `.moaliverse-core`. */ .moaliverse-core { /* Attach an animation and define its timing, duration, and repetition. */ animation: none !important; /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Keep featured textures above the later planet-theme declarations. */ /* Start the CSS rule for `.universe-wrapper .universe-bubble.featured-game`. */ .universe-wrapper .universe-bubble.featured-game { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 30% 24%, #fff 0 5%, #edc4ff 7%, #a94cff 30%, #54208e 67%, #18072f 100%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-wrapper .universe-bubble.featured-technology`. */ .universe-wrapper .universe-bubble.featured-technology { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 30% 24%, #fff 0 5%, #c9fbff 7%, #24d8ff 30%, #0876b0 67%, #021b43 100%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-wrapper .universe-bubble.featured-projects`. */ .universe-wrapper .universe-bubble.featured-projects { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 30% 24%, #fff 0 5%, #fff0ad 7%, #ffad25 31%, #c44712 68%, #401005 100%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* ====================================================================== MEMBER-ONLY SECOND SOLAR SYSTEM ====================================================================== */ /* Start the CSS rule for `[data-member-tab][hidden]`. */ [data-member-tab][hidden] { /* Sets the displayed CSS property/value in css/style.css. */ display: none !important; /* Continues or closes the current CSS rule. */ } /* Start the CSS rule for `.member-galaxy[hidden]`. */ .member-galaxy[hidden] { /* Choose the layout model used for this element. */ display: none; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-galaxy`. */ .member-galaxy { /* Choose how this element is positioned in relation to the page or its containing block. */ position: relative; /* Choose the layout model used for this element. */ display: grid; /* Control inline-axis alignment of grid items. */ justify-items: center; /* Set spacing between grid or flex children. */ gap: 1rem; /* Set the inside spacing between this element's content and border. */ padding: clamp(3rem, 7vw, 6rem) 1rem; /* Control what happens when content extends outside the element. */ overflow: hidden; /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at center, rgba(255, 95, 28, 0.12), transparent 52%); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-galaxy-heading`. */ .member-galaxy-heading { /* Choose how this element is positioned in relation to the page or its containing block. */ position: relative; /* Control this element's stacking order relative to overlapping elements. */ z-index: 10; /* Set horizontal alignment of text. */ text-align: center; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-galaxy-heading span`. */ .member-galaxy-heading span { /* Set the foreground/text color. */ color: #8fe9ff; /* Set the text size. */ font-size: 0.72rem; /* Set how bold the text appears. */ font-weight: 850; /* Set spacing between characters. */ letter-spacing: 0.24em; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-galaxy-heading h2`. */ .member-galaxy-heading h2 { /* Set the outside spacing around this element. */ margin: 0.5rem 0 0; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-solar-system`. */ .member-solar-system { /* Choose how this element is positioned in relation to the page or its containing block. */ position: relative; /* Set the element's width. */ width: min(92vw, 680px); /* Set the element's height. */ height: clamp(430px, 58vw, 620px); /* Create an independent stacking context for this element. */ isolation: isolate; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .member-system-sun, /* Start the CSS rule for `.member-system-orbit`. */ .member-system-orbit { /* Choose how this element is positioned in relation to the page or its containing block. */ position: absolute; /* Set the element's left offset. */ left: 50%; /* Set the element's top offset. */ top: 50%; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-system-sun`. */ .member-system-sun { /* Control this element's stacking order relative to overlapping elements. */ z-index: 5; /* Choose the layout model used for this element. */ display: grid; /* Align grid items on both axes with one shorthand. */ place-items: center; /* Set the element's width. */ width: clamp(118px, 18vw, 180px); /* Keep the element at this width-to-height proportion. */ aspect-ratio: 1; /* Set the border width, style, and color. */ border: 2px solid rgba(255, 250, 210, 0.96); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50%; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(-50%, -50%); /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 34% 28%, #fff 0 5%, #fff6ac 9%, #ffbf28 33%, #ff5a00 65%, #7a1000 100%); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 0 28px 8px #fff4b0, 0 0 78px 30px rgba(255, 122, 0, 0.9), 0 0 155px 58px rgba(255, 55, 0, 0.42); /* Set the foreground/text color. */ color: white; /* Set how bold the text appears. */ font-weight: 950; /* Set spacing between characters. */ letter-spacing: 0.08em; /* Add shadows or glow around text. */ text-shadow: 0 2px 6px #6b1300, 0 0 12px white; /* Attach an animation and define its timing, duration, and repetition. */ animation: member-sun-pulse 2.8s ease-in-out infinite; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-system-orbit`. */ .member-system-orbit { /* Set the border width, style, and color. */ border: 2px solid rgba(105, 212, 255, 0.58); /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50%; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(-50%, -50%); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 0 14px rgba(76, 194, 255, 0.24), inset 0 0 14px rgba(120, 88, 255, 0.12); /* Control whether this element can receive mouse or pointer input. */ pointer-events: none; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-orbit-game`. */ .member-orbit-game { /* Set the element's width. */ width: 38%; /* Keep the element at this width-to-height proportion. */ aspect-ratio: 1; /* Attach an animation and define its timing, duration, and repetition. */ animation: member-orbit-spin 13s linear infinite; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-orbit-technology`. */ .member-orbit-technology { /* Set the element's width. */ width: 54%; /* Keep the element at this width-to-height proportion. */ aspect-ratio: 1; /* Choose which keyframe animation to run. */ animation-name: member-orbit-spin; /* Set how long one animation cycle takes. */ animation-duration: 17s; /* Control the animation's speed curve. */ animation-timing-function: linear; /* Set how many times the animation repeats. */ animation-iteration-count: infinite; /* Choose the direction in which animation cycles play. */ animation-direction: normal; /* Sets the displayed CSS property/value in css/style.css. */ animation-delay: -5s; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-orbit-projects`. */ .member-orbit-projects { /* Set the element's width. */ width: 70%; /* Keep the element at this width-to-height proportion. */ aspect-ratio: 1; /* Attach an animation and define its timing, duration, and repetition. */ animation: member-orbit-spin 25s linear infinite; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-orbit-user`. */ .member-orbit-user { /* Set the element's width. */ width: 86%; /* Keep the element at this width-to-height proportion. */ aspect-ratio: 1; /* Attach an animation and define its timing, duration, and repetition. */ animation: member-orbit-spin 31s linear infinite; /* Sets the displayed CSS property/value in css/style.css. */ animation-delay: -16s; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-system-world`. */ .member-system-world { /* Choose how this element is positioned in relation to the page or its containing block. */ position: absolute; /* Set the element's left offset. */ left: 100%; /* Set the element's top offset. */ top: 50%; /* Choose the layout model used for this element. */ display: grid; /* Align grid items on both axes with one shorthand. */ place-items: center; /* Set the element's width. */ width: clamp(48px, 7vw, 68px); /* Keep the element at this width-to-height proportion. */ aspect-ratio: 1; /* Set the border width, style, and color. */ border: 2px solid white; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50%; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(-50%, -50%); /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 0 22px 8px white, 0 0 70px 25px rgba(var(--world-glow), 0.92), 0 0 135px 45px rgba(var(--world-glow), 0.55); /* Set the foreground/text color. */ color: white; /* Set the text size. */ font-size: clamp(0.5rem, 0.95vw, 0.68rem); /* Set how bold the text appears. */ font-weight: 900; /* Control underlines and other text decorations. */ text-decoration: none; /* Add shadows or glow around text. */ text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 10px white; /* Control whether this element can receive mouse or pointer input. */ pointer-events: auto; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-world-game`. */ .member-world-game { /* Set the reusable CSS custom property `--world-glow` to this value. */ --world-glow: 179, 75, 255; /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 30% 25%, white, #c66dff 18%, #7024b8 58%, #21043d 100%); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-world-technology`. */ .member-world-technology { /* Set the reusable CSS custom property `--world-glow` to this value. */ --world-glow: 22, 210, 255; /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 30% 25%, white, #58edff 18%, #087aac 58%, #031d40 100%); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-world-projects`. */ .member-world-projects { /* Set the reusable CSS custom property `--world-glow` to this value. */ --world-glow: 255, 155, 25; /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 30% 25%, white, #ffd658 18%, #d75c12 58%, #421006 100%); /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.member-world-user`. */ .member-world-user { /* Set the reusable CSS custom property `--world-glow` to this value. */ --world-glow: 255, 45, 68; /* Set the inside spacing between this element's content and border. */ padding: 0.35rem; /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 30% 25%, white, #ff7c82 18%, #d7193b 58%, #42000d 100%); /* Choose the font family and fallback fonts. */ font-family: inherit; /* Choose the mouse cursor shown over this element. */ cursor: default; /* Close the current CSS rule, media query, or animation block. */ } /* Define the animation named member-orbit-spin; the percentage blocks below describe how it changes over time. */ @keyframes member-orbit-spin { /* Start the CSS rule for `to`. */ to { /* Sets the displayed CSS property/value in css/style.css. */ transform: translate(-50%, -50%) rotate(360deg); /* Continues or closes the current CSS rule. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Define the animation named member-sun-pulse; the percentage blocks below describe how it changes over time. */ @keyframes member-sun-pulse { /* Start the CSS rule for `50%`. */ 50% { /* Sets the displayed CSS property/value in css/style.css. */ filter: brightness(1.28) saturate(1.18); /* Continues or closes the current CSS rule. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (max-width: 640px) { /* Start the CSS rule for `.member-solar-system`. */ .member-solar-system { /* Sets the displayed CSS property/value in css/style.css. */ height: 430px; /* Continues or closes the current CSS rule. */ } /* Start the CSS rule for `.member-system-world`. */ .member-system-world { /* Sets the displayed CSS property/value in css/style.css. */ width: 46px; /* Sets the displayed CSS property/value in css/style.css. */ font-size: 0.48rem; /* Continues or closes the current CSS rule. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (prefers-reduced-motion: reduce) { /* Continue the selector list so the following selector receives the same declarations. */ .member-system-sun, /* Start the CSS rule for `.member-system-orbit`. */ .member-system-orbit { /* Sets the displayed CSS property/value in css/style.css. */ animation-play-state: paused; /* Continues or closes the current CSS rule. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Final realistic MOALIVERSE sun. */ /* Start the CSS rule for `.moaliverse-core`. */ .moaliverse-core { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 30% 24%, #ffffff 0 3%, #fff6a0 5%, transparent 16%), radial-gradient(circle, #fff4a8 0%, #ffd43f 27%, #ff9518 56%, #df4907 80%, #741500 100%) !important; /* Set the border color. */ border-color: rgba(255, 226, 98, .95) !important; /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: inset -24px -28px 42px rgba(110, 20, 0, .42), inset 15px 16px 25px rgba(255, 255, 255, .3), 0 0 28px #ffd34d, 0 0 70px rgba(255, 105, 10, .72), 0 0 120px rgba(255, 65, 5, .35) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Balanced solar-system proportions: compact sun and smaller planets. */ /* Start the CSS rule for `.moaliverse-core`. */ .moaliverse-core { /* Set the element's width. */ width: 150px !important; /* Set the element's height. */ height: 150px !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble`. */ .universe-bubble { /* Set the largest width this element is allowed to have. */ max-width: 66px !important; /* Set the largest height this element is allowed to have. */ max-height: 66px !important; /* Set the smallest width this element is allowed to have. */ min-width: 38px !important; /* Set the smallest height this element is allowed to have. */ min-height: 38px !important; /* Set the text size. */ font-size: clamp(.55rem, .9vw, .75rem) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.core-main-text`. */ .core-main-text { /* Set the text size. */ font-size: clamp(.9rem, 1.55vw, 1.2rem) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Align the visual sun with the geometric center of the orbit ellipses. */ /* Start the CSS rule for `.moaliverse-core`. */ .moaliverse-core { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 64px), -50%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (max-width: 700px) { /* Start the CSS rule for `.moaliverse-core`. */ .moaliverse-core { /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 34px), -50%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Orbit paths hidden for the clean, line-free preview. */ /* Continue the selector list so the following selector receives the same declarations. */ .personal-orbit, /* Start the CSS rule for `.orbit-ring`. */ .orbit-ring { /* Choose the layout model used for this element. */ display: none !important; /* Close the current CSS rule, media query, or animation block. */ } /* Seven clean guides: five circles plus two opposite tilted rings. */ /* Start the CSS rule for `.personal-orbit`. */ .personal-orbit { /* Choose the layout model used for this element. */ display: none !important; /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-last-child(-n + 7) { /* Choose the layout model used for this element. */ display: block !important; /* Set the element's left offset. */ left: 50% !important; /* Set the element's top offset. */ top: 50% !important; /* Set the element's transparency. */ opacity: .58 !important; /* Set the border width, style, and color. */ border: 1px solid rgba(82, 199, 255, .55) !important; /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 0 7px rgba(71, 141, 255, .24) !important; /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-last-child(7) { /* Set the element's width. */ width: 190px !important; /* Set the element's height. */ height: 190px !important; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 64px), -50%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-last-child(6) { /* Set the element's width. */ width: 245px !important; /* Set the element's height. */ height: 245px !important; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 64px), -50%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-last-child(5) { /* Set the element's width. */ width: 300px !important; /* Set the element's height. */ height: 300px !important; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 64px), -50%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-last-child(4) { /* Set the element's width. */ width: 355px !important; /* Set the element's height. */ height: 355px !important; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 64px), -50%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-last-child(3) { /* Set the element's width. */ width: 410px !important; /* Set the element's height. */ height: 410px !important; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 64px), -50%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-last-child(2) { /* Set the element's width. */ width: 445px !important; /* Set the element's height. */ height: 175px !important; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 64px), -50%) rotate(-34deg) !important; /* Set the border color. */ border-color: rgba(177, 110, 255, .62) !important; /* Close the current CSS rule, media query, or animation block. */ } /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-last-child(1) { /* Set the element's width. */ width: 445px !important; /* Set the element's height. */ height: 175px !important; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 64px), -50%) rotate(34deg) !important; /* Set the border color. */ border-color: rgba(255, 104, 198, .58) !important; /* Close the current CSS rule, media query, or animation block. */ } /* ================================================================ FIRST SEVEN GENERATED ORBIT GUIDES The JavaScript can generate multiple .personal-orbit elements. This section intentionally keeps only the first seven guide rings visible so the solar system remains readable instead of becoming crowded with too many overlapping orbit paths. Orbit layout: 1 = small circular orbit 2 = medium-small circular orbit 3 = medium circular orbit 4 = medium-large circular orbit 5 = large circular orbit 6 = purple tilted elliptical orbit 7 = pink tilted elliptical orbit All additional .personal-orbit elements remain hidden. ================================================================ */ /* Hide every generated personal orbit by default. */ /* Start the CSS rule for `.personal-orbit`. */ .personal-orbit { /* Choose the layout model used for this element. */ display: none !important; /* Close the current CSS rule, media query, or animation block. */ } /* Show only the first seven generated orbit guides. */ /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-child(-n + 7) { /* Choose the layout model used for this element. */ display: block !important; /* Keep the guide centered around the visual solar-system center. */ /* Set the element's left offset. */ left: 50% !important; /* Set the element's top offset. */ top: 50% !important; /* Keep the guide visible without overpowering the planets. */ /* Set the element's transparency. */ opacity: .58 !important; /* Main cyan-blue guide-line appearance. */ /* Set the border width, style, and color. */ border: 1px solid rgba(82, 199, 255, .55) !important; /* Soft outer glow for better visibility against the dark background. */ /* Add outer or inner shadows to create depth, glow, or separation. */ box-shadow: 0 0 7px rgba(71, 141, 255, .24) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Orbit 1: smallest circular guide. */ /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-child(1) { /* Set the element's width. */ width: 190px !important; /* Set the element's height. */ height: 190px !important; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 64px), -50%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Orbit 2: second circular guide. */ /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-child(2) { /* Set the element's width. */ width: 245px !important; /* Set the element's height. */ height: 245px !important; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 64px), -50%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Orbit 3: middle circular guide. */ /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-child(3) { /* Set the element's width. */ width: 300px !important; /* Set the element's height. */ height: 300px !important; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 64px), -50%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Orbit 4: medium-large circular guide. */ /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-child(4) { /* Set the element's width. */ width: 355px !important; /* Set the element's height. */ height: 355px !important; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 64px), -50%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Orbit 5: largest circular guide. */ /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-child(5) { /* Set the element's width. */ width: 410px !important; /* Set the element's height. */ height: 410px !important; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 64px), -50%) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Orbit 6: purple tilted elliptical guide. */ /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-child(6) { /* Set the element's width. */ width: 445px !important; /* Set the element's height. */ height: 175px !important; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 64px), -50%) rotate(-34deg) !important; /* Set the border color. */ border-color: rgba(177, 110, 255, .62) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Orbit 7: pink tilted elliptical guide. */ /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .personal-orbit:nth-child(7) { /* Set the element's width. */ width: 445px !important; /* Set the element's height. */ height: 175px !important; /* Move, rotate, scale, or otherwise transform the element without changing normal document flow. */ transform: translate(calc(-50% - 64px), -50%) rotate(34deg) !important; /* Set the border color. */ border-color: rgba(255, 104, 198, .58) !important; /* Close the current CSS rule, media query, or animation block. */ } /* ================================================================ REALISTIC PLANET + SUN THEME These rules keep the existing 3D orbit engine, but replace the glass-bubble appearance with shaded worlds and a glowing star. ================================================================ */ /* The MOALIVERSE core is the sun: a hot center, orange edge and corona. */ /* Start the CSS rule for `.moaliverse-core`. */ .moaliverse-core { /* Set this element's background layers, gradients, or color. The value continues on the following line(s). */ background: /* Continue or define the selector for the CSS rule that follows. */ radial-gradient(circle at 31% 25%, rgba(255, 255, 255, .98) 0 3%, rgba(255, 246, 157, .88) 4%, transparent 16%), /* Continue the multi-line value started by the previous CSS declaration. */ radial-gradient(circle at 50% 48%, #fff8b7 0%, #ffd84f 28%, #ff9b19 56%, #e64e08 80%, #8f1d03 100%) !important; /* Set the border width, style, and color. */ border: 1px solid rgba(255, 232, 132, .9) !important; /* Add outer or inner shadows to create depth, glow, or separation. The value continues on the following line(s). */ box-shadow: /* Continue the selector list so the following selector receives the same declarations. */ inset -24px -28px 42px rgba(119, 25, 0, .4), /* Continue the selector list so the following selector receives the same declarations. */ inset 16px 17px 30px rgba(255, 255, 255, .28), /* Continue the selector list so the following selector receives the same declarations. */ 0 0 26px rgba(255, 213, 73, .95), /* Continue the selector list so the following selector receives the same declarations. */ 0 0 65px rgba(255, 128, 18, .62), /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ 0 0 115px rgba(255, 72, 12, .32) !important; /* Attach an animation and define its timing, duration, and repetition. */ animation: solar-pulse 5s ease-in-out infinite !important; /* Close the current CSS rule, media query, or animation block. */ } /* Soft outer light makes the sun illuminate the nearby orbital space. */ /* Start the CSS rule for `.core-glow`. */ .core-glow { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle, rgba(255, 214, 65, .78), rgba(255, 103, 18, .3) 43%, transparent 72%) !important; /* Apply visual effects such as brightness, blur, saturation, or drop-shadow. */ filter: blur(18px) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Continue the selector list so the following selector receives the same declarations. */ .core-main-text, /* Start the CSS rule for `.core-small-text`. */ .core-small-text { /* Set the foreground/text color. */ color: #fffdf0 !important; /* Add shadows or glow around text. */ text-shadow: 0 2px 3px #8b2700, 0 0 9px rgba(255, 245, 185, .95) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Every orbiting item is now a spherical planet with a bright day side, a shadowed night side, and a small reflected-light highlight. */ /* Start the CSS rule for `.universe-bubble`. */ .universe-bubble { /* Set the border width, style, and color. */ border: 1px solid rgba(255, 255, 255, .38) !important; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: 50% !important; /* Control what happens when content extends outside the element. */ overflow: hidden; /* Set the foreground/text color. */ color: #fff !important; /* Add outer or inner shadows to create depth, glow, or separation. The value continues on the following line(s). */ box-shadow: /* Continue the selector list so the following selector receives the same declarations. */ inset 11px 9px 16px rgba(255, 255, 255, .25), /* Continue the selector list so the following selector receives the same declarations. */ inset -15px -17px 22px rgba(0, 0, 0, .48), /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ 0 8px 21px rgba(0, 0, 0, .48) !important; /* Add shadows or glow around text. */ text-shadow: 0 2px 4px rgba(0, 0, 0, .95), 0 0 5px rgba(0, 0, 0, .8) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Atmospheric shine and curved night-side shading create the 3D sphere. */ /* This line is part of the current CSS rule and contributes to the element's final appearance or behavior. */ .universe-bubble::before { /* Provide generated content for a pseudo-element. */ content: ""; /* Choose how this element is positioned in relation to the page or its containing block. */ position: absolute; /* Set multiple edge offsets at once. */ inset: 0; /* Round the element's corners; 50% creates a circle when width and height match. */ border-radius: inherit; /* Control whether this element can receive mouse or pointer input. */ pointer-events: none; /* Set this element's background layers, gradients, or color. The value continues on the following line(s). */ background: /* Continue or define the selector for the CSS rule that follows. */ radial-gradient(circle at 27% 22%, rgba(255, 255, 255, .62), transparent 19%), /* Continue the multi-line value started by the previous CSS declaration. */ radial-gradient(circle at 32% 28%, transparent 0 29%, rgba(0, 0, 0, .04) 47%, rgba(0, 0, 0, .57) 100%); /* Close the current CSS rule, media query, or animation block. */ } /* Individual planet surfaces. Layered gradients suggest clouds, land, ice, rock and gas bands without needing image files. */ /* Start the CSS rule for `.universe-bubble[data-name="gaming"]`. */ .universe-bubble[data-name="gaming"] { /* Set this element's background layers, gradients, or color. */ background: repeating-linear-gradient(172deg, #9b78d5 0 7px, #573579 8px 13px, #d4a75c 14px 18px) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="tech"]`. */ .universe-bubble[data-name="tech"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 35% 30%, #baf7ff 0 8%, #27b8d4 35%, #075786 72%, #032b51) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="youtube"]`. */ .universe-bubble[data-name="youtube"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 32% 25%, #ff9b66, #d83a22 42%, #68120e 78%, #260607) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="instagram"]`. */ .universe-bubble[data-name="instagram"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 35% 25%, #ffd45b, #ef477f 38%, #8238a7 70%, #30115b) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="facebook"]`. */ .universe-bubble[data-name="facebook"] { /* Set this element's background layers, gradients, or color. */ background: repeating-linear-gradient(170deg, #5ba9ff 0 8px, #1664ba 9px 15px, #123c82 16px 20px) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="x"]`. */ .universe-bubble[data-name="x"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 35% 28%, #dfe5eb, #7d8995 46%, #323b45 76%, #11161c) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="tiktok"]`. */ .universe-bubble[data-name="tiktok"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 35% 28%, #6dfff5, #13a8a8 42%, #153a50 74%, #101622) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="threads"]`. */ .universe-bubble[data-name="threads"] { /* Set this element's background layers, gradients, or color. */ background: repeating-linear-gradient(160deg, #7450a4 0 6px, #34204f 7px 13px, #151023 14px 18px) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="reddit"]`. */ .universe-bubble[data-name="reddit"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 34% 25%, #ffd087, #eb6b25 42%, #9a2c12 72%, #4b1009) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="snapchat"]`. */ .universe-bubble[data-name="snapchat"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 33% 26%, #fff9b0, #f6d72f 46%, #a67908 79%, #513806) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="pinterest"]`. */ .universe-bubble[data-name="pinterest"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 32% 25%, #ff9b99, #cf273b 43%, #761020 75%, #340711) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="linkedin"]`. */ .universe-bubble[data-name="linkedin"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 32% 25%, #8de9ff, #238ac0 43%, #0b4778 75%, #05233f) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="twitch"]`. */ .universe-bubble[data-name="twitch"] { /* Set this element's background layers, gradients, or color. */ background: repeating-linear-gradient(168deg, #c395ff 0 7px, #7646bd 8px 14px, #342063 15px 20px) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="discord"]`. */ .universe-bubble[data-name="discord"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 32% 25%, #aebcff, #6478db 43%, #303c8d 74%, #151b49) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="wechat"]`. */ .universe-bubble[data-name="wechat"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 32% 25%, #b3ffab, #32af62 43%, #12643b 74%, #07341f) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="bilibili"]`. */ .universe-bubble[data-name="bilibili"] { /* Set this element's background layers, gradients, or color. */ background: repeating-linear-gradient(165deg, #c5fbff 0 7px, #4bc7dc 8px 14px, #187c9d 15px 20px) !important; /* Close the current CSS rule, media query, or animation block. */ } /* Start the CSS rule for `.universe-bubble[data-name="douyin"]`. */ .universe-bubble[data-name="douyin"] { /* Set this element's background layers, gradients, or color. */ background: radial-gradient(circle at 30% 24%, #ff7680, #243347 38%, #111722 68%, #05080d) !important; /* Close the current CSS rule, media query, or animation block. */ } /* A restrained pulse makes the sun feel alive without disturbing orbits. */ /* Define the animation named solar-pulse; the percentage blocks below describe how it changes over time. */ @keyframes solar-pulse { /* Define this stage of the current animation. */ 0%, /* Define this stage of the current animation. */ 100% { /* Apply visual effects such as brightness, blur, saturation, or drop-shadow. */ filter: saturate(1) brightness(1); /* Close the current CSS rule, media query, or animation block. */ } /* Define this stage of the current animation. */ 50% { /* Apply visual effects such as brightness, blur, saturation, or drop-shadow. */ filter: saturate(1.08) brightness(1.07); /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ } /* Accessibility: keep the finished appearance but stop decorative motion. */ /* Start a responsive or accessibility media-query block; the enclosed rules apply only when this condition is true. */ @media (prefers-reduced-motion: reduce) { /* Start the CSS rule for `.moaliverse-core`. */ .moaliverse-core { /* Attach an animation and define its timing, duration, and repetition. */ animation: none !important; /* Close the current CSS rule, media query, or animation block. */ } /* Close the current CSS rule, media query, or animation block. */ }