/* ═══ UPSIDE DOWN ═══ */ /* Overlay — red vignette during build-up */ .ud-overlay { position: fixed; inset: 0; z-index: var(--z-theme-buildup); pointer-events: none; } /* Warning overlay */ .ud-warning { position: fixed; inset: 0; z-index: var(--z-theme-warning); display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.88); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .ud-warning.visible { opacity: 1; } .ud-warning-content { text-align: center; max-width: 440px; padding: 2rem; } .ud-warning-icon { font-size: 2.5rem; margin-bottom: 1rem; animation: ud-glitch 0.3s infinite; } .ud-warning-title { font-family: "DM Mono", monospace; font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase; color: #dd3737; margin-bottom: 1rem; animation: ud-glitch-text 2s infinite; } .ud-warning-sub { font-family: "DM Mono", monospace; font-size: 0.75rem; font-weight: 300; color: rgba(255, 100, 100, 0.6); line-height: 1.8; margin-bottom: 1.5rem; } .ud-warning-hint { font-family: "DM Mono", monospace; font-size: 0.65rem; letter-spacing: 0.15em; color: rgba(255, 60, 60, 0.4); animation: ud-pulse 1.5s ease infinite; } /* Transition flash */ .ud-wipe { position: fixed; inset: 0; z-index: var(--z-theme-wipe); pointer-events: none; background: radial-gradient( ellipse at center, rgba(180, 0, 0, 0.3) 0%, #1a0505 60% ); } .ud-wipe-return { background: radial-gradient( ellipse at center, rgba(var(--theme-glow), 0.3) 0%, #051020 60% ); } @keyframes ud-glitch { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-2px, 1px); } 40% { transform: translate(2px, -1px); } 60% { transform: translate(-1px, -2px); } 80% { transform: translate(1px, 2px); } } @keyframes ud-glitch-text { 0%, 92%, 100% { transform: none; opacity: 1; } 93% { transform: translate(-3px, 0) skewX(-5deg); opacity: 0.8; } 94% { transform: translate(3px, 0) skewX(5deg); opacity: 0.6; } 95% { transform: none; opacity: 1; } 97% { transform: translate(-2px, 1px); opacity: 0.7; } 98% { transform: none; opacity: 1; } } @keyframes ud-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.7; } } /* Upside Down — structural rules (always apply when flipped) */ body.upside-down .page { transform: scaleY(-1); } /* Click shudder — composes with the flip by baking scaleY(-1) into each keyframe so the page stays upside-down while it shakes. */ body.upside-down .page.ud-shudder { animation: ud-shudder 0.25s ease-in-out; } @keyframes ud-shudder { 0%, 100% { transform: scaleY(-1) translateX(0) rotate(0); } 25% { transform: scaleY(-1) translateX(-2px) rotate(-0.5deg); } 75% { transform: scaleY(-1) translateX(2px) rotate(0.5deg); } } /* Nav is moved out of .page during flip so sticky isn't broken by the transform. Pin it to the visual bottom, flipped to match the upside-down world. */ body.upside-down > nav { position: fixed; bottom: 0; top: auto; left: 0; right: 0; transform: scaleY(-1); } /* Opt-in flip for elements that sit outside `.page` (fixed overlays, the shared canvas) and need to mirror with the page when upside-down is active. Adding this class to a new overlay is preferred over reading `body.upside-down` from JS or doing manual y-axis math at draw time — the renderer stays in plain canvas-pixel coords and CSS handles the visual inversion. */ body.upside-down .flips-with-page { transform: scaleY(-1); } /* ══════════════════════════════════════════════════════════════ Theme contract ══════════════════════════════════════════════════════════════ A theme sets these tokens on body[data-active-theme=""]; everything else cascades from base. Required: --theme-primary Solid accent color, used where chrome wants a flat color that may diverge from --theme-glow (logo accent default, paper's chrome). --theme-glow RGB triplet for halos, cursor, chrome accent. Used inside rgba(...) by any-alpha consumers. Optional: --theme-bg Page background. --logo-text-color, --logo-accent-color --sky-3, --sky-4, --sky-5, --sky-6 Override brand palette stops --cursor-dot-clip, --cursor-dot-radius --cursor-ring-radius, --cursor-ring-style, --cursor-ring-width, --cursor-ring-animation Beyond tokens, themes are free to override any selector for theme- defining art (hero gradients, button gradients, feature blocks like .frost-card or .pixel-card, custom cursor shapes). Don't override what the cascade already provides. ══════════════════════════════════════════════════════════════ */ /* Upside Down — visual theme (only when active theme) */ body[data-active-theme="upside-down"] { --sky-3: #e87d7d; --sky-4: #dd3838; --sky-5: #a81a1a; --sky-6: #720c0c; --theme-primary: #e04050; --theme-glow: 221, 55, 55; --cursor-ring-style: dashed; --cursor-ring-width: 1.5px; --cursor-ring-animation: cursor-spin 6s linear infinite; --theme-bg: #280a0a; --theme-hero-line2-bg: linear-gradient( 135deg, #f7b5b5 0%, var(--sky-4) 50%, var(--sky-3) 100% ); --theme-heading-em-bg: linear-gradient(135deg, #f7b5b5, var(--sky-4)); } body[data-active-theme="upside-down"] #bg-canvas { filter: hue-rotate(160deg) saturate(1.3) brightness(0.6); } body[data-active-theme="upside-down"] #cursor { background: var(--sky-3); box-shadow: 2px -1px 0 rgba(255, 50, 50, 0.5), -2px 1px 0 rgba(80, 120, 255, 0.4); } /* Card gravity-defying hover — cards float up in the flipped world. The page is flipped via scaleY(-1), so positive translateY in CSS renders as upward motion on screen. Shadow offsets are also inverted. */ body[data-active-theme="upside-down"] .service-card { transition: background 0.4s, box-shadow 0.5s ease, translate 0.5s ease; } body[data-active-theme="upside-down"] .service-card:hover { translate: 0 8px; box-shadow: 0 -16px 40px rgba(var(--theme-glow), 0.12), 0 -6px 16px rgba(0, 0, 0, 0.15); } body[data-active-theme="upside-down"] .nav-cta { color: var(--sky-3); } body[data-active-theme="upside-down"] .nav-cta:hover { border-color: var(--sky-3); } body[data-active-theme="upside-down"] .contact-card { background: linear-gradient( 135deg, rgba(var(--theme-glow), 0.08) 0%, rgba(40, 10, 10, 0.9) 100% ); } body[data-active-theme="upside-down"]::after { opacity: 0.04; }