/* ========== SELF-HOSTED FONTS (production: no external requests) ========== */ /* ========== RESET & BASE ========== */ .awsm3d, .awsm3d *, .awsm3d::before, .awsm3d *::before, .awsm3d::after, .awsm3d *::after{ box-sizing: border-box; margin: 0; padding: 0; } .awsm3d, .awsm3d *{ scroll-behavior: smooth; } .awsm3d{ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%23FF00FF' stroke='%230D0D0D' stroke-width='3'/%3E%3C/svg%3E"), auto; } .awsm3d ::selection{ background: #FF00FF; color: #FFE600; } .awsm3d{ background-color: #FFF8E7; overflow-x: hidden; font-family: 'Syne', sans-serif; line-height: 1.5; color: #0D0D0D; } .awsm3d img, .awsm3d svg{ max-width: 100%; display: block; } .awsm3d a{ color: inherit; text-decoration: none; } /* ========== CUSTOM PROPERTIES ========== */ .awsm3d{ --neo-yellow: #FFE600; --neo-pink: #FF00FF; --neo-blue: #00D4FF; --neo-green: #00FF88; --neo-orange: #FF6B35; --neo-red: #FF0054; --neo-purple: #9B5DE5; --neo-black: #0D0D0D; --neo-cream: #FFF8E7; } /* ========== FONT FAMILIES ========== */ .awsm3d .font-mono{ font-family: 'Space Mono', monospace; } .awsm3d .font-display{ font-family: 'Archivo Black', sans-serif; } .awsm3d .font-body{ font-family: 'Syne', sans-serif; } /* ========== LAYOUT ========== */ .awsm3d .container{ width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; } .awsm3d .mx-auto{ margin-left: auto; margin-right: auto; } .awsm3d .relative{ position: relative; } .awsm3d .absolute{ position: absolute; } .awsm3d .fixed{ position: fixed; } .awsm3d .z-10{ z-index: 10; } .awsm3d .z-40{ z-index: 40; } .awsm3d .z-50{ z-index: 50; } .awsm3d .inset-0{ top: 0; right: 0; bottom: 0; left: 0; } .awsm3d .top-0{ top: 0; } .awsm3d .left-0{ left: 0; } .awsm3d .right-8{ right: 2rem; } .awsm3d .left-8{ left: 2rem; } .awsm3d .bottom-0{ bottom: 0; } .awsm3d .bottom-8{ bottom: 2rem; } .awsm3d .top-20{ top: 5rem; } .awsm3d .top-32{ top: 8rem; } .awsm3d .top-40{ top: 10rem; } .awsm3d .top-60{ top: 15rem; } .awsm3d .top-1\/3{ top: 33.333%; } .awsm3d .left-10{ left: 2.5rem; } .awsm3d .left-20{ left: 5rem; } .awsm3d .left-1\/2{ left: 50%; } .awsm3d .left-1\/4{ left: 25%; } .awsm3d .right-10{ right: 2.5rem; } .awsm3d .right-20{ right: 5rem; } .awsm3d .right-1\/4{ right: 25%; } .awsm3d .bottom-20{ bottom: 5rem; } .awsm3d .bottom-40{ bottom: 10rem; } .awsm3d .-top-20{ top: -5rem; } .awsm3d .-bottom-20{ bottom: -5rem; } .awsm3d .-left-20{ left: -5rem; } .awsm3d .-right-20{ right: -5rem; } .awsm3d .-bottom-4{ bottom: -1rem; } /* ========== DISPLAY ========== */ .awsm3d .block{ display: block; } .awsm3d .inline-block{ display: inline-block; } .awsm3d .flex{ display: flex; } .awsm3d .grid{ display: grid; } .awsm3d .hidden{ display: none; } .awsm3d .overflow-hidden{ overflow: hidden; } /* ========== FLEXBOX ========== */ .awsm3d .flex-col{ flex-direction: column; } .awsm3d .items-center{ align-items: center; } .awsm3d .items-start{ align-items: flex-start; } .awsm3d .justify-center{ justify-content: center; } .awsm3d .justify-between{ justify-content: space-between; } .awsm3d .flex-wrap{ flex-wrap: wrap; } /* ========== GRID ========== */ .awsm3d .grid-cols-1{ grid-template-columns: repeat(1, 1fr); } .awsm3d .grid-cols-2{ grid-template-columns: repeat(2, 1fr); } .awsm3d .col-span-2{ grid-column: span 2; } .awsm3d .gap-3{ gap: 0.75rem; } .awsm3d .gap-4{ gap: 1rem; } .awsm3d .gap-6{ gap: 1.5rem; } .awsm3d .gap-8{ gap: 2rem; } .awsm3d .gap-12{ gap: 3rem; } /* ========== SPACING ========== */ .awsm3d .p-2{ padding: 0.5rem; } .awsm3d .p-4{ padding: 1rem; } .awsm3d .p-6{ padding: 1.5rem; } .awsm3d .p-8{ padding: 2rem; } .awsm3d .px-2{ padding-left: 0.5rem; padding-right: 0.5rem; } .awsm3d .px-3{ padding-left: 0.75rem; padding-right: 0.75rem; } .awsm3d .px-4{ padding-left: 1rem; padding-right: 1rem; } .awsm3d .px-6{ padding-left: 1.5rem; padding-right: 1.5rem; } .awsm3d .px-8{ padding-left: 2rem; padding-right: 2rem; } .awsm3d .px-12{ padding-left: 3rem; padding-right: 3rem; } .awsm3d .py-1{ padding-top: 0.25rem; padding-bottom: 0.25rem; } .awsm3d .py-2{ padding-top: 0.5rem; padding-bottom: 0.5rem; } .awsm3d .py-3{ padding-top: 0.75rem; padding-bottom: 0.75rem; } .awsm3d .py-4{ padding-top: 1rem; padding-bottom: 1rem; } .awsm3d .py-6{ padding-top: 1.5rem; padding-bottom: 1.5rem; } .awsm3d .py-12{ padding-top: 3rem; padding-bottom: 3rem; } .awsm3d .py-20{ padding-top: 5rem; padding-bottom: 5rem; } .awsm3d .pt-8{ padding-top: 2rem; } .awsm3d .pt-20{ padding-top: 5rem; } .awsm3d .mb-2{ margin-bottom: 0.5rem; } .awsm3d .mb-3{ margin-bottom: 0.75rem; } .awsm3d .mb-4{ margin-bottom: 1rem; } .awsm3d .mb-6{ margin-bottom: 1.5rem; } .awsm3d .mb-8{ margin-bottom: 2rem; } .awsm3d .mb-12{ margin-bottom: 3rem; } .awsm3d .mb-16{ margin-bottom: 4rem; } .awsm3d .mt-1{ margin-top: 0.25rem; } .awsm3d .mt-2{ margin-top: 0.5rem; } .awsm3d .mt-3{ margin-top: 0.75rem; } .awsm3d .mt-4{ margin-top: 1rem; } .awsm3d .mt-6{ margin-top: 1.5rem; } .awsm3d .mt-8{ margin-top: 2rem; } .awsm3d .mt-16{ margin-top: 4rem; } .awsm3d .mx-8{ margin-left: 2rem; margin-right: 2rem; } .awsm3d .space-y-2 > * + *{ margin-top: 0.5rem; } .awsm3d .space-y-3 > * + *{ margin-top: 0.75rem; } .awsm3d .space-y-6 > * + *{ margin-top: 1.5rem; } /* ========== SIZING ========== */ .awsm3d .w-full{ width: 100%; } .awsm3d .h-full{ height: 100%; } .awsm3d .w-6{ width: 1.5rem; } .awsm3d .h-6{ height: 1.5rem; } .awsm3d .w-10{ width: 2.5rem; } .awsm3d .h-10{ height: 2.5rem; } .awsm3d .w-12{ width: 3rem; } .awsm3d .h-12{ height: 3rem; } .awsm3d .w-16{ width: 4rem; } .awsm3d .h-16{ height: 4rem; } .awsm3d .w-20{ width: 5rem; } .awsm3d .h-20{ height: 5rem; } .awsm3d .w-24{ width: 6rem; } .awsm3d .h-24{ height: 6rem; } .awsm3d .w-32{ width: 8rem; } .awsm3d .h-32{ height: 8rem; } .awsm3d .w-40{ width: 10rem; } .awsm3d .h-40{ height: 10rem; } .awsm3d .w-48{ width: 12rem; } .awsm3d .h-48{ height: 12rem; } .awsm3d .w-60{ width: 15rem; } .awsm3d .h-60{ height: 15rem; } .awsm3d .w-64{ width: 16rem; } .awsm3d .h-64{ height: 16rem; } .awsm3d .w-80{ width: 20rem; } .awsm3d .h-80{ height: 20rem; } .awsm3d .h-8{ height: 2rem; } .awsm3d .min-h-screen{ min-height: 100vh; } .awsm3d .min-h-\[80vh\]{ min-height: 80vh; } .awsm3d .max-w-2xl{ max-width: 42rem; } .awsm3d .max-w-3xl{ max-width: 48rem; } .awsm3d .max-w-4xl{ max-width: 56rem; } .awsm3d .max-w-5xl{ max-width: 64rem; } .awsm3d .max-w-6xl{ max-width: 72rem; } .awsm3d .aspect-\[4\/3\]{ aspect-ratio: 4/3; } .awsm3d .aspect-\[8\/3\]{ aspect-ratio: 8/3; } /* ========== TYPOGRAPHY ========== */ .awsm3d .text-xs{ font-size: 0.75rem; line-height: 1rem; } .awsm3d .text-sm{ font-size: 0.875rem; line-height: 1.25rem; } .awsm3d .text-base{ font-size: 1rem; line-height: 1.5rem; } .awsm3d .text-lg{ font-size: 1.125rem; line-height: 1.75rem; } .awsm3d .text-xl{ font-size: 1.25rem; line-height: 1.75rem; } .awsm3d .text-2xl{ font-size: 1.5rem; line-height: 2rem; } .awsm3d .text-3xl{ font-size: 1.875rem; line-height: 2.25rem; } .awsm3d .text-4xl{ font-size: 2.25rem; line-height: 2.5rem; } .awsm3d .text-5xl{ font-size: 3rem; line-height: 1; } .awsm3d .text-6xl{ font-size: 3.75rem; line-height: 1; } .awsm3d .text-7xl{ font-size: 4.5rem; line-height: 1; } .awsm3d .text-8xl{ font-size: 6rem; line-height: 1; } .awsm3d .text-9xl{ font-size: 8rem; line-height: 1; } .awsm3d .text-\[12vw\]{ font-size: 6vw; } .awsm3d .font-bold{ font-weight: 700; } .awsm3d .text-center{ text-align: center; } .awsm3d .leading-none{ line-height: 1; } .awsm3d .leading-relaxed{ line-height: 1.625; } .awsm3d .whitespace-nowrap{ white-space: nowrap; } .awsm3d .underline{ text-decoration: underline; } /* ========== COLORS ========== */ .awsm3d .bg-neo-yellow{ background-color: var(--neo-yellow); } .awsm3d .bg-neo-pink{ background-color: var(--neo-pink); } .awsm3d .bg-neo-blue{ background-color: var(--neo-blue); } .awsm3d .bg-neo-green{ background-color: var(--neo-green); } .awsm3d .bg-neo-orange{ background-color: var(--neo-orange); } .awsm3d .bg-neo-red{ background-color: var(--neo-red); } .awsm3d .bg-neo-purple{ background-color: var(--neo-purple); } .awsm3d .bg-neo-black{ background-color: var(--neo-black); } .awsm3d .bg-neo-cream{ background-color: var(--neo-cream); } .awsm3d .bg-neo-black\/5{ background-color: rgba(13, 13, 13, 0.05); } .awsm3d .bg-neo-cream\/10{ background-color: rgba(255, 248, 231, 0.1); } .awsm3d .text-neo-yellow{ color: var(--neo-yellow); } .awsm3d .text-neo-pink{ color: var(--neo-pink); } .awsm3d .text-neo-blue{ color: var(--neo-blue); } .awsm3d .text-neo-green{ color: var(--neo-green); } .awsm3d .text-neo-orange{ color: var(--neo-orange); } .awsm3d .text-neo-red{ color: var(--neo-red); } .awsm3d .text-neo-purple{ color: var(--neo-purple); } .awsm3d .text-neo-black{ color: var(--neo-black); } .awsm3d .text-neo-cream{ color: var(--neo-cream); } .awsm3d .text-neo-cream\/60{ color: rgba(255, 248, 231, 0.6); } .awsm3d .text-neo-cream\/70{ color: rgba(255, 248, 231, 0.7); } .awsm3d .text-neo-cream\/80{ color: rgba(255, 248, 231, 0.8); } .awsm3d .border-neo-blue{ border-color: var(--neo-blue); } .awsm3d .border-neo-green{ border-color: var(--neo-green); } .awsm3d .border-neo-pink{ border-color: var(--neo-pink); } .awsm3d .border-neo-cream\/20{ border-color: rgba(255, 248, 231, 0.2); } .awsm3d .border-neo-cream\/30{ border-color: rgba(255, 248, 231, 0.3); } /* ========== BORDERS ========== */ .awsm3d .neo-border{ border: 4px solid #0D0D0D; } .awsm3d .neo-border-thick{ border: 6px solid #0D0D0D; } .awsm3d .border-8{ border-width: 8px; border-style: solid; } .awsm3d .border-t-0{ border-top-width: 0; } .awsm3d .border-b-0{ border-bottom-width: 0; } .awsm3d .border-l-0{ border-left-width: 0; } .awsm3d .border-r-0{ border-right-width: 0; } .awsm3d .border-t-4{ border-top: 4px solid; } .awsm3d .rounded-full{ border-radius: 9999px; } /* ========== SHADOWS ========== */ .awsm3d .shadow-brutal{ box-shadow: 8px 8px 0 0 #0D0D0D; } .awsm3d .shadow-brutal-lg{ box-shadow: 12px 12px 0 0 #0D0D0D; } .awsm3d .shadow-brutal-xl{ box-shadow: 16px 16px 0 0 #0D0D0D; } .awsm3d .shadow-brutal-pink{ box-shadow: 8px 8px 0 0 #FF00FF; } .awsm3d .shadow-brutal-blue{ box-shadow: 8px 8px 0 0 #00D4FF; } .awsm3d .shadow-brutal-yellow{ box-shadow: 8px 8px 0 0 #FFE600; } .awsm3d .shadow-brutal-green{ box-shadow: 8px 8px 0 0 #00FF88; } /* ========== TRANSFORMS ========== */ .awsm3d .rotate-1{ transform: rotate(1deg); } .awsm3d .rotate-2{ transform: rotate(2deg); } .awsm3d .rotate-3{ transform: rotate(3deg); } .awsm3d .rotate-12{ transform: rotate(12deg); } .awsm3d .rotate-45{ transform: rotate(45deg); } .awsm3d .-rotate-1{ transform: rotate(-1deg); } .awsm3d .-rotate-2{ transform: rotate(-2deg); } .awsm3d .-rotate-3{ transform: rotate(-3deg); } .awsm3d .-rotate-12{ transform: rotate(-12deg); } .awsm3d .-translate-x-1\/2{ transform: translateX(-50%); } /* ========== OPACITY ========== */ .awsm3d .opacity-20{ opacity: 0.2; } .awsm3d .opacity-30{ opacity: 0.3; } .awsm3d .opacity-50{ opacity: 0.5; } .awsm3d .opacity-70{ opacity: 0.7; } .awsm3d .opacity-80{ opacity: 0.8; } /* ========== TRANSITIONS ========== */ .awsm3d .transition-all{ transition: all 0.3s ease; } .awsm3d .transition-colors{ transition: color 0.3s ease, background-color 0.3s ease; } .awsm3d .transition-transform{ transition: transform 0.3s ease; } .awsm3d .duration-500{ transition-duration: 500ms; } .awsm3d .outline-none{ outline: none; } /* ========== HOVER STATES ========== */ .awsm3d .hover\:bg-neo-pink:hover{ background-color: var(--neo-pink); } .awsm3d .hover\:bg-neo-blue:hover{ background-color: var(--neo-blue); } .awsm3d .hover\:bg-neo-green:hover{ background-color: var(--neo-green); } .awsm3d .hover\:bg-neo-orange:hover{ background-color: var(--neo-orange); } .awsm3d .hover\:bg-neo-purple:hover{ background-color: var(--neo-purple); } .awsm3d .hover\:bg-neo-yellow:hover{ background-color: var(--neo-yellow); } .awsm3d .hover\:text-neo-pink:hover{ color: var(--neo-pink); } .awsm3d .hover\:text-neo-blue:hover{ color: var(--neo-blue); } .awsm3d .hover\:text-neo-green:hover{ color: var(--neo-green); } .awsm3d .hover\:text-neo-orange:hover{ color: var(--neo-orange); } .awsm3d .hover\:text-neo-cream:hover{ color: var(--neo-cream); } .awsm3d .hover\:text-neo-black:hover{ color: var(--neo-black); } .awsm3d .hover\:shadow-brutal:hover{ box-shadow: 8px 8px 0 0 #0D0D0D; } .awsm3d .group:hover .group-hover\:scale-150{ transform: scale(1.5); } /* ========== FOCUS STATES ========== */ .awsm3d .focus\:bg-neo-pink:focus{ background-color: var(--neo-pink); } .awsm3d input:focus, .awsm3d select:focus, .awsm3d textarea:focus{ outline: none; border-color: #FF00FF; } /* Readable focus (v1.3.1): keep field bg yellow + text dark on focus so the picked option stays legible; magenta remains as the focus BORDER above. !important beats the higher-specificity .focus\:bg-neo-pink:focus utility. */ .awsm3d input:focus, .awsm3d select:focus, .awsm3d textarea:focus{ background-color: var(--neo-yellow) !important; color: var(--neo-black) !important; } .awsm3d select, .awsm3d select option{ color: var(--neo-black); } .awsm3d select option{ background-color: #FFF8E7; } /* ========== TEXT EFFECTS ========== */ .awsm3d .text-stroke{ -webkit-text-stroke: 3px #0D0D0D; paint-order: stroke fill; } .awsm3d .text-stroke-thin{ -webkit-text-stroke: 2px #0D0D0D; paint-order: stroke fill; } /* ========== ANIMATIONS ========== */ @keyframes awsm-marquee{ 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* width:max-content — the row must be as wide as its CONTENT (2 copies of the sequence) so translateX(-50%) = exactly one copy and the loop is seamless. Sized to the parent (the old behavior), it snapped back after half a screen and the later services never scrolled into view. */ /* 25s over the measured 2465px sequence ≈ 99px/s — brisk enough that all five services sweep past while the hero is on screen (the original ~31px/s crawl was reviewed as too slow). Mobile overrides to 14s in the mobile block. */ .awsm3d .animate-marquee{ animation: awsm-marquee 25s linear infinite; width: max-content; } @keyframes awsm-float{ 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } } .awsm3d .animate-float{ animation: awsm-float 4s ease-in-out infinite; } .awsm3d .animate-float-delayed{ animation: awsm-float 4s ease-in-out infinite; animation-delay: 2s; } @keyframes awsm-spin-slow{ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .awsm3d .animate-spin-slow{ animation: awsm-spin-slow 20s linear infinite; } @keyframes awsm-glitch{ 0%, 100% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } } .awsm3d .hover-glitch:hover{ animation: awsm-glitch 0.3s ease-in-out infinite; } @keyframes awsm-pulse-glow{ 0%, 100% { box-shadow: 8px 8px 0 0 #0D0D0D, 0 0 0px #FF00FF; } 50% { box-shadow: 8px 8px 0 0 #0D0D0D, 0 0 30px #FF00FF; } } .awsm3d .pulse-glow{ animation: awsm-pulse-glow 2s ease-in-out infinite; } @keyframes awsm-typewriter{ from { width: 0; } to { width: 100%; } } @keyframes awsm-blink-caret{ from, to { border-color: transparent; } 50% { border-color: #FF00FF; } } .awsm3d .typewriter-text{ overflow: hidden; white-space: nowrap; border-right: 4px solid #FF00FF; animation: awsm-typewriter 3s steps(40, end), awsm-blink-caret 0.75s step-end infinite; } @keyframes awsm-rotate-text{ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .awsm3d .rotate-text{ animation: awsm-rotate-text 15s linear infinite; } @keyframes awsm-wave{ 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .awsm3d .wave-text span{ display: inline-block; animation: awsm-wave 1s ease-in-out infinite; } @keyframes awsm-ticker{ 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .awsm3d .animate-ticker{ animation: awsm-ticker 30s linear infinite; } /* ========== SCROLL REVEAL ========== */ .awsm3d .reveal{ opacity: 1; transform: none; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .awsm3d .reveal.active{ opacity: 1; transform: translateY(0) rotate(0deg); } .awsm3d .reveal-left{ opacity: 1; transform: none; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .awsm3d .reveal-left.active{ opacity: 1; transform: translateX(0) rotate(0deg); } .awsm3d .reveal-right{ opacity: 1; transform: none; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .awsm3d .reveal-right.active{ opacity: 1; transform: translateX(0) rotate(0deg); } .awsm3d .reveal-scale{ opacity: 1; transform: none; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .awsm3d .reveal-scale.active{ opacity: 1; transform: scale(1) rotate(0deg); } .awsm3d .stagger-1{ transition-delay: 0.1s; } .awsm3d .stagger-2{ transition-delay: 0.2s; } .awsm3d .stagger-3{ transition-delay: 0.3s; } .awsm3d .stagger-4{ transition-delay: 0.4s; } .awsm3d .stagger-5{ transition-delay: 0.5s; } .awsm3d .stagger-6{ transition-delay: 0.6s; } /* ========== PATTERNS ========== */ .awsm3d .diagonal-stripes{ background: repeating-linear-gradient(45deg, transparent, transparent 10px, #0D0D0D 10px, #0D0D0D 12px); } .awsm3d .checkerboard{ background-image: linear-gradient(45deg, #0D0D0D 25%, transparent 25%), linear-gradient(-45deg, #0D0D0D 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #0D0D0D 75%), linear-gradient(-45deg, transparent 75%, #0D0D0D 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; } .awsm3d .dots-pattern{ background-image: radial-gradient(#0D0D0D 2px, transparent 2px); background-size: 16px 16px; } /* ========== BUTTONS & CARDS ========== */ .awsm3d .btn-neo{ transition: all 0.15s ease; } .awsm3d .btn-neo:hover{ transform: translate(-4px, -4px); box-shadow: 12px 12px 0 0 #0D0D0D; } .awsm3d .btn-neo:active{ transform: translate(0, 0); box-shadow: 4px 4px 0 0 #0D0D0D; } .awsm3d .card-neo{ transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .awsm3d .card-neo:hover{ transform: translate(-8px, -8px) rotate(-2deg); box-shadow: 16px 16px 0 0 #0D0D0D; } /* ========== FORM FEEDBACK (applied by the demo-form JS on success/failure) ========== */ .awsm3d .bg-green-600{ background-color: var(--neo-green) !important; color: var(--neo-black) !important; } .awsm3d .bg-red-600{ background-color: var(--neo-red) !important; color: var(--neo-cream) !important; } /* ========== SECTION DIVIDER ========== */ .awsm3d .section-divider{ height: 8px; background: repeating-linear-gradient(90deg, #FFE600 0px, #FFE600 20px, #FF00FF 20px, #FF00FF 40px, #00D4FF 40px, #00D4FF 60px, #00FF88 60px, #00FF88 80px, #FF6B35 80px, #FF6B35 100px); } /* ========== MOBILE MENU ========== */ .awsm3d .mobile-menu{ max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .awsm3d .mobile-menu.open{ max-height: 400px; } /* ========== SCROLLBAR ========== */ .awsm3d ::-webkit-scrollbar{ width: 16px; } .awsm3d ::-webkit-scrollbar-track{ background: #FFE600; border-left: 4px solid #0D0D0D; } .awsm3d ::-webkit-scrollbar-thumb{ background: #FF00FF; border: 4px solid #0D0D0D; } .awsm3d ::-webkit-scrollbar-thumb:hover{ background: #00D4FF; } /* ========== ZIGZAG ========== */ .awsm3d .zigzag-top{ background: linear-gradient(135deg, #FFF8E7 33.33%, transparent 33.33%) 0 0, linear-gradient(225deg, #FFF8E7 33.33%, transparent 33.33%) 0 0; background-size: 20px 20px; background-position: top; background-repeat: repeat-x; height: 20px; } /* ========== MOBILE RESPONSIVE (max-width: 767px) ========== */ @media (max-width: 767px){ /* Scale down typography */ .awsm3d .text-9xl{ font-size: 2.5rem; line-height: 1; } .awsm3d .text-8xl{ font-size: 3.5rem; line-height: 1; } .awsm3d .text-7xl{ font-size: 1.75rem; line-height: 1.1; } .awsm3d .text-6xl{ font-size: 1.5rem; line-height: 1.1; } .awsm3d .text-5xl{ font-size: 1.25rem; line-height: 1.2; } .awsm3d .text-4xl{ font-size: 1.125rem; line-height: 1.3; } .awsm3d .text-3xl{ font-size: 1rem; line-height: 1.4; } .awsm3d .text-\[12vw\]{ font-size: 8vw; } /* Hero label - prevent overlap on mobile */ .awsm3d .hero-label-wrapper{ position: relative !important; bottom: auto !important; left: auto !important; transform: rotate(3deg) !important; text-align: center; margin-top: 0.5rem; display: flex; justify-content: center; } /* Text stroke thinner on mobile */ .awsm3d .text-stroke{ -webkit-text-stroke: 2px #0D0D0D; } .awsm3d .text-stroke-thin{ -webkit-text-stroke: 1px #0D0D0D; } /* Force single column grids */ .awsm3d .grid-cols-2{ grid-template-columns: 1fr !important; } .awsm3d .col-span-2{ grid-column: span 1; } /* Reduce gaps */ .awsm3d .gap-12{ gap: 1.5rem; } .awsm3d .gap-8{ gap: 1rem; } .awsm3d .gap-6{ gap: 0.75rem; } /* Reduce padding */ .awsm3d .py-20{ padding-top: 2.5rem; padding-bottom: 2.5rem; } .awsm3d .py-12{ padding-top: 2rem; padding-bottom: 2rem; } .awsm3d .px-12{ padding-left: 1rem; padding-right: 1rem; } .awsm3d .px-8{ padding-left: 1rem; padding-right: 1rem; } .awsm3d .p-8{ padding: 1rem; } .awsm3d .p-6{ padding: 0.75rem; } /* Reduce margins */ .awsm3d .mb-16{ margin-bottom: 2rem; } .awsm3d .mb-12{ margin-bottom: 1.5rem; } .awsm3d .mb-8{ margin-bottom: 1.25rem; } .awsm3d .mt-16{ margin-top: 2rem; } .awsm3d .mx-8{ margin-left: 0.5rem; margin-right: 0.5rem; } .awsm3d .mb-20{ margin-bottom: 2rem; } /* Hide oversized decorative elements */ .awsm3d .absolute.w-64, .awsm3d .absolute.w-60, .awsm3d .absolute.w-80, .awsm3d .absolute.h-64, .awsm3d .absolute.h-60, .awsm3d .absolute.h-80{ display: none !important; } /* Reduce shadows */ .awsm3d .shadow-brutal{ box-shadow: 4px 4px 0 0 #0D0D0D; } .awsm3d .shadow-brutal-lg{ box-shadow: 6px 6px 0 0 #0D0D0D; } .awsm3d .shadow-brutal-xl{ box-shadow: 8px 8px 0 0 #0D0D0D; } .awsm3d .shadow-brutal-pink{ box-shadow: 4px 4px 0 0 #FF00FF; } .awsm3d .shadow-brutal-blue{ box-shadow: 4px 4px 0 0 #00D4FF; } .awsm3d .shadow-brutal-yellow{ box-shadow: 4px 4px 0 0 #FFE600; } .awsm3d .shadow-brutal-green{ box-shadow: 4px 4px 0 0 #00FF88; } /* Card hover - reduce transform on mobile */ .awsm3d .card-neo:hover{ transform: translate(-4px, -4px) rotate(-1deg); box-shadow: 8px 8px 0 0 #0D0D0D; } .awsm3d .btn-neo:hover{ transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 #0D0D0D; } /* Fix container padding */ .awsm3d .container{ padding-left: 1rem; padding-right: 1rem; } /* Reduce fixed widths */ .awsm3d .w-80{ width: 100%; } .awsm3d .w-60{ width: 100%; } .awsm3d .w-48{ width: 100%; } /* Fix min-height sections */ .awsm3d .min-h-\[80vh\]{ min-height: auto; } .awsm3d .min-h-screen{ min-height: auto; } /* Reduce absolute element sizes */ .awsm3d .w-40.h-40{ width: 5rem; height: 5rem; } .awsm3d .w-32.h-32{ width: 5rem; height: 5rem; } .awsm3d .w-24.h-24{ width: 1.5rem; height: 1.5rem; } .awsm3d .w-20.h-20{ width: 1.25rem; height: 1.25rem; } /* Fix overflow */ .awsm3d section{ overflow: hidden; } /* Nav logo smaller */ .awsm3d nav .font-display.text-2xl{ font-size: 1.25rem; } /* Scrollbar simpler on mobile */ .awsm3d ::-webkit-scrollbar{ width: 8px; } .awsm3d ::-webkit-scrollbar-track{ border-left: 2px solid #0D0D0D; } .awsm3d ::-webkit-scrollbar-thumb{ border: 2px solid #0D0D0D; } /* Border reduce */ .awsm3d .neo-border-thick{ border-width: 4px; } .awsm3d .border-8{ border-width: 4px; } /* Zigzag smaller */ .awsm3d .zigzag-top{ height: 12px; background-size: 14px 14px; } /* Fix hero section spacing on mobile */ .awsm3d #hero{ padding-bottom: 5rem; } .awsm3d #hero .relative.mb-8{ margin-bottom: 3.5rem; } .awsm3d #hero .relative.mb-8 > .absolute{ bottom: -3rem !important; } /* Fix product card aspect ratio on mobile */ .awsm3d .aspect-\[4\/3\]{ aspect-ratio: 3/2; min-height: 120px; } /* Disable custom cursor on mobile for better touch */ .awsm3d, .awsm3d{ cursor: auto !important; } .awsm3d a, .awsm3d button{ touch-action: manipulation; -webkit-tap-highlight-color: rgba(255,0,255,0.2); } } /* Desktop-only: disable tel: click (opens unwanted WhatsApp popup) */ @media (min-width: 768px){ .awsm3d a[href^="tel:"]{ pointer-events: none; cursor: default; } } /* ========== SM RESPONSIVE (min-width: 640px) ========== */ @media (min-width: 640px){ .awsm3d .sm\:flex-row{ flex-direction: row; } } /* ========== MD RESPONSIVE (min-width: 768px) ========== */ @media (min-width: 768px){ .awsm3d .md\:flex{ display: flex; } .awsm3d .md\:flex-row{ flex-direction: row; } .awsm3d .md\:hidden{ display: none; } .awsm3d .md\:block{ display: block; } .awsm3d .md\:items-center{ align-items: center; } .awsm3d .md\:grid-cols-2{ grid-template-columns: repeat(2, 1fr); } .awsm3d .md\:grid-cols-3{ grid-template-columns: repeat(3, 1fr); } .awsm3d .md\:grid-cols-5{ grid-template-columns: repeat(5, 1fr); } .awsm3d .md\:col-span-2{ grid-column: span 2; } .awsm3d .md\:py-32{ padding-top: 8rem; padding-bottom: 8rem; } .awsm3d .md\:p-8{ padding: 2rem; } .awsm3d .md\:p-12{ padding: 3rem; } .awsm3d .md\:right-32{ right: 8rem; } .awsm3d .md\:w-40{ width: 10rem; } .awsm3d .md\:h-40{ height: 10rem; } .awsm3d .md\:text-sm{ font-size: 0.875rem; } .awsm3d .md\:text-base{ font-size: 1rem; } .awsm3d .md\:text-lg{ font-size: 1.125rem; } .awsm3d .md\:text-xl{ font-size: 1.25rem; } .awsm3d .md\:text-2xl{ font-size: 1.5rem; } .awsm3d .md\:text-3xl{ font-size: 1.875rem; } .awsm3d .md\:text-4xl{ font-size: 2.25rem; } .awsm3d .md\:text-5xl{ font-size: 3rem; } .awsm3d .md\:text-6xl{ font-size: 3.75rem; } .awsm3d .md\:text-7xl{ font-size: 4.5rem; } .awsm3d .md\:text-\[10vw\]{ font-size: 10vw; } .awsm3d .md\:text-base{ font-size: 1rem; line-height: 1.5rem; } .awsm3d .md\:mb-0{ margin-bottom: 0; } } /* ========== LG RESPONSIVE (min-width: 1024px) ========== */ @media (min-width: 1024px){ .awsm3d .lg\:grid-cols-3{ grid-template-columns: repeat(3, 1fr); } .awsm3d .lg\:grid-cols-4{ grid-template-columns: repeat(4, 1fr); } .awsm3d .lg\:grid-cols-5{ grid-template-columns: repeat(5, 1fr); } .awsm3d .lg\:text-8xl{ font-size: 6rem; } .awsm3d .lg\:text-9xl{ font-size: 8rem; } .awsm3d .lg\:text-\[8vw\]{ font-size: 8vw; } .awsm3d .lg\:col-span-2{ grid-column: span 2; } } /* ========== REDUCED MOTION ========== */ @media (prefers-reduced-motion: reduce){ .awsm3d, .awsm3d *, .awsm3d::before, .awsm3d *::before, .awsm3d::after, .awsm3d *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .awsm3d .reveal, .awsm3d .reveal-left, .awsm3d .reveal-right, .awsm3d .reveal-scale{ opacity: 1 !important; transform: none !important; } } /* ========== SMALL SCREENS (below 1024px): standard cursor ========== */ /* The custom image cursor flickers against the constantly-repainting 3D canvas on small windows — swap to the normal cursor there. Desktop >=1024 keeps the brand cursor. */ @media (max-width: 1023px){ .awsm3d, .awsm3d{ cursor: auto !important; } } /* ========== MOBILE TWEAKS: marquee speed + floating buttons ========== */ @media (max-width: 767px){ /* services marquee FAST on mobile (~108px/s): all five services sweep past in 14s, before the visitor scrolls on (desktop keeps its slow pace) */ .awsm3d .animate-marquee{ animation-duration: 14s; } /* floating buttons: smaller + tucked in so they cover less content */ .awsm3d .float-stack-top{ bottom: 4.6rem !important; right: 0.75rem; } .awsm3d .float-stack-bottom{ bottom: 1rem; right: 0.75rem; } .awsm3d .float-stack-top a, .awsm3d .float-stack-bottom a{ width: 3rem; height: 3rem; font-size: 1.5rem; } } /* ========== HERO BADGE (desktop) ========== */ /* Anchor to the SCREEN edge, not the 1280px container — container-anchored, the badge drifted into the headline's "AI" between ~1280 and 1920px wide. Above 1280px the container is fixed-width and centered, so screen-edge 3vw = calc(640px - 47vw) from the container's right edge. */ @media (min-width: 768px){ .awsm3d .hero-badge{ right: 3vw; } } @media (min-width: 1280px){ .awsm3d .hero-badge{ right: calc(640px - 47vw); } } /* ========== ULTRA-WIDE (min-width: 1600px) ========== */ /* Freeze the hero headline at its 1600px size (6vw @ 1600 = 96px) so it stops growing into the rotating badge on very wide screens (the inherited >=1920px overlap). */ @media (min-width: 1600px){ .awsm3d .text-\[12vw\]{ font-size: 6rem; } } /* ========== 3D HERO — STACKED MODE ========== */ /* Mobile + ANY window too narrow for the approved wide scene (the aspect gate lives in hero3d.js, which toggles this class): the robot + his product ring get a stage band at the TOP, right under the navbar, and the headline + CTA buttons follow — the whole scene and both buttons land above the fold, the same first impression wide desktops get. The old floating-head fallback and the below-the-CTAs mobile stage are gone. */ .awsm3d .hero-stage{ height: 0; width: 100%; } .awsm3d #hero.hero-stacked > .container{ padding-top: 0.75rem; } .awsm3d #hero.hero-stacked{ padding-bottom: 4.5rem !important; } /* just clears the marquee — no dead band above it */ .awsm3d #hero.hero-stacked .hero-col{ justify-content: flex-start; } .awsm3d #hero.hero-stacked .hero-stage{ height: clamp(160px, 32vh, 340px); height: clamp(160px, 32svh, 340px); } /* rotating badge rides in the stage's top-right corner (desktop parity, phone-sized) */ .awsm3d #hero.hero-stacked .hero-badge{ width: 5.5rem; height: 5.5rem; top: 1.5rem; right: clamp(0.75rem, 4vw, 3rem); } .awsm3d #hero.hero-stacked .hero-badge span{ font-size: 1.6rem; } /* Title + its body stay INTACT in the original order (design review 2026-07-10): headline, chip sentence, location badge, blurb — one unit under the robot, sized so the whole block lands above the fold. Only the gap between the headline label and the chip sentence tightens; the CTA buttons keep their original spot after the blurb (they scroll in if the screen is too short). */ /* Pull the whole text block TIGHT: on >=768px the headline label is absolute and hangs 2rem below the title box, so the margin needs a whisker more than that; the chip sentence then hugs the location badge below it. */ .awsm3d #hero.hero-stacked .hero-title-block{ margin-bottom: 2.5rem; } .awsm3d #hero.hero-stacked .hero-sub{ margin-top: 0; margin-bottom: 0; } /* KL badge hugs the sentence — only line-height slack remains */ .awsm3d .hero-sub-m{ display: none; } /* mobile sentence chips — enabled by the stacked phone media below */ .awsm3d .hero-duo{ display: none; } /* mobile robot-left row — enabled by the stacked phone media below */ @media (max-width: 767px){ /* ========== MOBILE HERO — DESKTOP-MIRROR (2026-07-13 v19) ========== */ /* The phone hero now follows the exact grammar of the approved wide layout, top to bottom: flyer strip marching under the navbar → full width headline + label (badge sticker at the right, models pass behind it like desktop) → the ROBOT ON THE LEFT RAIL with the sentence beside him as sticker-chips → location stamp → blurb → the two buttons side by side. Nothing shrunk to fit: chips wrap to two lines instead of dropping their font size, and the robot fills his whole rail. */ .awsm3d #hero.hero-stacked .hero-col{ gap: 0.7rem; } /* the stage spacer becomes the desktop-style flyer STRIP above the title */ .awsm3d #hero.hero-stacked .hero-stage{ height: 3rem; } /* the base stacked padding double-cleared the marquee here — trim so the full marquee text lands inside the first phone screen */ .awsm3d #hero.hero-stacked{ padding-bottom: 2.75rem !important; } /* headline with poster presence (base mobile sheet shrinks it to 8vw) — capped so AWESOMEREE AI always stays ONE line */ .awsm3d #hero.hero-stacked h1{ font-size: min(9.2vw, 3rem); } .awsm3d #hero.hero-stacked .hero-title-block{ margin-bottom: 0; } /* label sits just BELOW the wordmark with a sliver of breathing room (design review: no overlap with the title glyphs) */ .awsm3d #hero.hero-stacked .hero-label-wrapper{ margin-top: 0.35rem; } .awsm3d #hero.hero-stacked .hero-label-wrapper > div{ padding: 0.3rem 1rem; } .awsm3d #hero.hero-stacked .hero-label-wrapper span{ font-size: 0.78rem; } /* badge: mini sticker in the quiet pocket LEFT of the label row — the flyer strip and the robot rail are both MOVING zones, so this pocket (title above, label to the right, robot head below-right) is the one spot on the phone hero that nothing ever crosses. Top tracks the title's height so it stays centered on the label row at every width. */ .awsm3d #hero.hero-stacked .hero-badge{ width: 4.25rem; height: 4.25rem; left: 0.75rem; right: auto; top: calc(4.8rem + min(9.2vw, 3rem)); } .awsm3d #hero.hero-stacked .hero-badge span{ font-size: 1.2rem; } /* the ring text also grows WITHIN the SVG's own 100-unit viewBox — size + glyph boost together keep AI/AGENTS/DATA/SCALE readable */ .awsm3d #hero.hero-stacked .hero-badge text{ font-size: 12px; } /* sentence: swap the flowing paragraph for the robot+chips duo row */ .awsm3d #hero.hero-stacked .hero-sub{ display: none; } .awsm3d #hero.hero-stacked .hero-duo{ display: flex; align-items: center; width: 100%; gap: 0.65rem; } .awsm3d #hero.hero-stacked .hero-duo-stage{ flex: 0 0 47%; height: clamp(215px, 28vh, 280px); height: clamp(215px, 28svh, 280px); } .awsm3d #hero.hero-stacked .hero-sub-m{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; } .awsm3d #hero.hero-stacked .hero-sub-m-line{ font-size: 0.92rem; line-height: 1.45; text-align: center; margin: 0; } .awsm3d #hero.hero-stacked .hero-sub-m-mini{ display: inline-block; padding: 0 0.4rem; transform: rotate(-1.5deg); } .awsm3d #hero.hero-stacked .hero-sub-m-chip{ font-size: clamp(0.85rem, 4vw, 1rem); line-height: 1.25; text-align: center; padding: 0.5rem 0.7rem; box-shadow: 4px 4px 0 #0D0D0D; letter-spacing: 0.02em; max-width: 100%; } .awsm3d #hero.hero-stacked .hero-sub-m-chip:first-of-type{ transform: rotate(-1.6deg); } .awsm3d #hero.hero-stacked .hero-sub-m-chip:last-of-type{ transform: rotate(1.4deg); } /* location badge: centered stamp */ .awsm3d #hero.hero-stacked .hero-kl{ margin: 0; } .awsm3d #hero.hero-stacked .hero-kl span{ font-size: 0.72rem; line-height: 1.55; text-align: center; padding: 0.55rem 0.9rem; } /* blurb: quiet caption on a paper plate — at phone sizes the dot grid was the same visual weight as the 11px mono glyphs and speckled the words */ .awsm3d #hero.hero-stacked .hero-note{ margin: 0; font-size: 0.8125rem; line-height: 1.5; max-width: 22rem; color: rgba(13, 13, 13, 0.82); background: #FFF8E7; padding: 0.4rem 0.8rem; } } /* Narrow-tablet band (768-1023px): the label used to wrap to two lines and — because it is bottom-anchored — grow UPWARD over the headline glyphs, making the brand name illegible. One line, hanging below, like desktop. */ @media (min-width: 768px) and (max-width: 1023px){ .awsm3d #hero .hero-label-wrapper{ white-space: nowrap; } } @media (max-width: 639px){ /* CTAs: one confident side-by-side row */ .awsm3d #hero.hero-stacked .hero-cta-block{ flex-direction: row; gap: 0.7rem; width: 100%; max-width: 23rem; } .awsm3d #hero.hero-stacked .hero-cta-block a{ flex: 1 1 0; padding: 0.95rem 0.4rem; font-size: clamp(0.75rem, 3.5vw, 1rem); white-space: nowrap; } } /* ========== CAREERS PERKS GRID (mobile) ========== */ /* The ≤767px sheet forces .grid-cols-2 to ONE column, but FLEXIBILITY's inline grid-column:span 2 dragged a phantom content-sized implicit column into the perks grid — two visibly UNEQUAL columns. Give this grid real equal halves (FLEXIBILITY still spans both = full-width row). Scoped: the role-chip list keeps its approved single-column mobile stack. */ @media (max-width: 767px){ .awsm3d .grid.careers-perks{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ========== FLOAT BUTTONS — appear on first scroll ========== */ /* The chat + back-to-top stack is HIDDEN while the visitor is at the very top (nothing to scroll back FROM, and they covered the hero on small screens); a tiny scroll listener flips body.floats-on. Fade/slide on the WRAPPERS — the buttons' own animate-float bob lives on the child , no conflict. */ .awsm3d .float-stack-top, .awsm3d .float-stack-bottom{ opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.35s ease, transform 0.35s ease; } .awsm3d.floats-on .float-stack-top, .awsm3d.floats-on .float-stack-bottom{ opacity: 1; transform: none; pointer-events: auto; } /* ========== PRODUCT CARD STAGES (wide single-column band) ========== */ /* Between ~500-767px the product grid is still ONE column, so the full-width card ballooned its 3/2 black emoji stage into a screen-filling slab. Pin the stage to a fixed height there (full width, emoji stays centered). Phones (<500px) compute under 300px from their 3/2 ratio — approved look untouched; >=768px uses the multi-column desktop grid and never matches this rule. (A max-height alone can't do this: aspect-ratio transfers it into a max-WIDTH and the stage shrank sideways.) */ @media (min-width: 500px) and (max-width: 767px){ .awsm3d .aspect-\[4\/3\]{ aspect-ratio: auto; height: 300px; } } /* ============================================================ WORDPRESS INTEGRATION (additive - not part of the prototype) ============================================================ */ .awsm3d{ width:100vw; margin-left:calc(50% - 50vw); } body.page-template-elementor_canvas .awsm3d, body.elementor-template-canvas .awsm3d{ width:100%; margin-left:0; } body.awsm-3d-active{ overflow-x:hidden; } /* When logged in the WP admin bar covers the top of the fixed navbar - nudge it clear */ @media screen and (min-width:783px){ body.admin-bar .awsm3d nav{ top:32px !important; } body.admin-bar .awsm3d #hero{ min-height:calc(100vh - 32px); } }