/* Theme Name: Retro Recordings XR Theme URI: https://retrorecordings.studio Description: A music production VR studio theme - child of OceanWP. Blends vintage analog warmth with immersive XR technology. Author: Retro Recordings Author URI: https://retrorecordings.studio Template: oceanwp Version: 1.1.6 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: retrorecordings-developer Tags: music, studio, vr, xr, recording, production, dark, full-width */ /* ========================================================================== OceanWP Override: Restore Base Font Size -------------------------------------------------------------------------- OceanWP sets html { font-size: 62.5% } (= 10px) so its own rem values map 1:1 to pixels. Tailwind v4 assumes the browser default of 16px, so every rem-based utility (text-5xl, p-8, gap-6, etc.) renders ~37.5% too small without this reset. ========================================================================== */ html { font-size: 16px !important; scroll-behavior: smooth; } /* ========================================================================== OceanWP Override: Strip Default Chrome ========================================================================== */ /* * Hide OceanWP's default header and footer structures so the child theme * can provide its own via template parts and hooks. */ #site-header.top-header, #site-header #site-header-inner, #site-navigation-wrap, .oceanwp-mobile-menu-icon, #footer, #footer-bottom { display: none !important; } /* * Remove OceanWP's default top bar if active. */ #top-bar-wrap { display: none !important; } /* ========================================================================== Admin Bar — Push Fixed Nav Below WP Admin Bar -------------------------------------------------------------------------- WordPress adds .admin-bar to when a logged-in user views the site. The admin bar is 32px on desktop, 46px on mobile (≤782px). ========================================================================== */ .admin-bar .site-nav { top: 32px; } .admin-bar { padding-top: 84px !important; /* 52px nav + 32px admin bar */ } @media screen and (max-width: 782px) { .admin-bar .site-nav { top: 46px; } .admin-bar { padding-top: 98px !important; /* 52px nav + 46px admin bar */ } } /* ========================================================================== Full-Width Layout by Default ========================================================================== */ /* * Force all OceanWP content containers to full width, eliminating * the default boxed/max-width constraints. */ #outer-wrap, #wrap, #main, #content-wrap, .container, .content-area { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* * Prevent OceanWP wrappers from creating their own scroll context, * which causes a double scrollbar alongside the body's native one. */ #outer-wrap, #wrap { overflow: visible !important; } /* * Remove OceanWP's default content sidebar layout spacing. */ .content-area, .widget-area { width: 100% !important; float: none !important; } #content-wrap { margin: 0 !important; } /* ========================================================================== OceanWP Page Header Override ========================================================================== */ /* * Hide OceanWP's default page title/header bar so custom heroes * can be used per-template. */ .page-header, .page-header-overlay { display: none !important; } /* ========================================================================== Base Typography & Body Reset ========================================================================== */ /* * Ensure the body inherits our brand design tokens from brand.css. * OceanWP sets its own font-family/colors; override them here. */ body, body.oceanwp-theme { background-color: var(--color-rich-black, #1a1a1a); color: var(--color-vintage-white, #f4e4d7); font-family: var(--font-body, 'Inter', 'Helvetica Neue', sans-serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* ========================================================================== Link & Selection Defaults ========================================================================== */ a { color: var(--color-warm-brass, #d4a574); transition: color 0.3s ease; } a:hover { color: var(--color-vu-orange, #e8a054); } ::selection { background-color: rgba(232, 160, 84, 0.35); color: var(--color-vintage-white, #f4e4d7); } /* ========================================================================== Gutenberg / Block Editor Alignment -------------------------------------------------------------------------- page.php outputs .entry-content without a constraining wrapper so that alignfull Group blocks can span full viewport width with their own backgrounds. Non-full-width blocks get max-w-4xl centering by default. ========================================================================== */ /* * Default content blocks (paragraphs, headings, etc.) are constrained. */ .entry-content > *:not(.alignfull):not(.alignwide):not(section):not(div.section-rule-dark):not(div.section-rule) { max-width: 56rem; /* matches max-w-4xl (896px) */ margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } /* * Wide-width blocks get a larger max-width. */ .entry-content > .alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; } /* * Full-width blocks span the entire viewport. * Uses the 100vw negative-margin trick to break out of any parent * container that might constrain the width. */ .entry-content > .alignfull { width: 100vw !important; max-width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important; padding-left: 0; padding-right: 0; } /* ========================================================================== OceanWP Element-Level Resets -------------------------------------------------------------------------- OceanWP sets opinionated styles on headings, paragraphs, images, and structural elements. We use :where() to keep specificity at 0,0,1 (element-level only). This beats OceanWP's bare element selectors but does NOT override Tailwind utility classes (which are 0,1,0). ========================================================================== */ /* * Reset heading sizes and margins. OceanWP sets h1: 23px, margin: 0 0 20px. * :where() ensures Tailwind's .text-5xl, .mb-4, etc. still win. */ :where(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; line-height: revert; margin: 0; color: inherit; } /* * Reset paragraph margins. OceanWP sets margin: 0 0 20px on

. */ :where(p) { margin: 0; } /* * Reset blockquote margins. OceanWP sets margin: 20px 40px. */ :where(blockquote) { margin: 0; padding: 0; border: 0; font-style: inherit; } /* * Remove OceanWP's default padding on #content-wrap. * OceanWP applies padding-top: 50px and padding-bottom: 50px. */ #content-wrap { padding-top: 0 !important; padding-bottom: 0 !important; } /* * Remove OceanWP's border on .content-area (sidebar layout artifact). */ .content-area { border: 0 !important; padding: 0 !important; } /* ========================================================================== Devlog Article — Wider Content Area -------------------------------------------------------------------------- single-devlog.php sets a 70% / 1100px container. Override the default 56rem entry-content cap so blocks fill the wider parent instead. ========================================================================== */ .devlog-article .entry-content > *:not(.alignfull):not(.alignwide):not(section):not(div.section-rule-dark):not(div.section-rule) { max-width: 100%; } /* ========================================================================== Devlog / Entry Content — Image Sizing & Typography -------------------------------------------------------------------------- Constrain inline images so they don't overwhelm the text column. Adds editorial spacing to Gutenberg blocks within .entry-content. ========================================================================== */ /* * Default images: cap at 70% of the content column and centre them. * Only targets images that are direct Gutenberg block output — * NOT images inside custom HTML

blocks (photo-essay, editorial, etc.). */ .entry-content > :not(section) img:not(.alignfull):not(.alignwide) { max-width: 70%; height: auto; margin-left: auto; margin-right: auto; display: block; border-radius: 2px; } /* * WordPress image blocks wrap images in
. * Only for direct Gutenberg blocks, not custom HTML sections. */ .entry-content > :not(section) figure { margin: 2rem 0; text-align: center; } .entry-content > :not(section) figcaption { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(212, 165, 116, 0.5); margin-top: 0.75rem; } /* * Prose spacing for Gutenberg blocks (direct children only). * Sections manage their own internal spacing via brand.css. */ .entry-content > * + *:not(section):not(div.section-rule-dark):not(div.section-rule) { margin-top: 1.5rem; } .entry-content > h2, .entry-content > h3, .entry-content > h4 { font-family: 'Playfair Display', serif; color: rgba(244, 228, 215, 0.9); margin-top: 2.5rem; } .entry-content > h2 { font-size: 1.75rem; font-weight: 700; } .entry-content > h3 { font-size: 1.25rem; font-weight: 600; } .entry-content > p { color: rgba(244, 228, 215, 0.65); font-size: 1rem; line-height: 1.75; } .entry-content > ul, .entry-content > ol { color: rgba(244, 228, 215, 0.6); padding-left: 1.25rem; font-size: 0.95rem; line-height: 1.7; } .entry-content > ul { list-style-type: disc; } .entry-content > ol { list-style-type: decimal; } .entry-content > blockquote { border-left: 2px solid rgba(232, 160, 84, 0.4); padding-left: 1.5rem; font-style: italic; color: rgba(244, 228, 215, 0.55); } /* ========================================================================== Custom HTML Sections — Reset entry-content Overrides -------------------------------------------------------------------------- When using wp:html blocks with brand.css classes (editorial-spread, photo-essay, classified-card, pullquote-section, etc.), prevent entry-content and OceanWP/Gutenberg styles from interfering. ========================================================================== */ /* * Light-background sections: force dark text on all content. * WordPress strips

tags inside Custom HTML blocks, leaving naked * text nodes that inherit body's vintage-white color. Setting color * on the containers ensures ALL child content is readable. */ .entry-content .bg-vintage-white { color: #3d2a1e; } .entry-content .classified-card { color: #5a4030; } .entry-content .pullquote-section { color: #2c1810; } .entry-content .editorial-spread { color: #3d2a1e; } /* * Images inside custom sections use brand.css sizing, not 70% cap. */ .entry-content section img { max-width: 100%; border-radius: 0; margin: 0; display: block; } /* * Blockquotes inside sections use .pull-quote styling from brand.css, * not the default blue/amber left-border style. */ .entry-content section blockquote { border: 0 !important; padding: 0; margin: 0; font-style: inherit; color: inherit; } /* * Reset Gutenberg/OceanWP blockquote defaults that override .pull-quote. */ .entry-content .pull-quote { border: 0 !important; border-left: 0 !important; padding-left: 0 !important; } /* * Ensure figures inside sections don't get extra margins. */ .entry-content section figure { margin: 0; text-align: inherit; } /* ========================================================================== Hostinger Reach — Dark Theme Override -------------------------------------------------------------------------- Restyle the Reach subscription block to match the dark CTA section. ========================================================================== */ .rrxr-reach-subscribe .hostinger-reach-block-subscription-form { background: transparent !important; padding: 0 !important; } .rrxr-reach-subscribe .hostinger-reach-block-subscription-form input { background: rgba(26, 26, 26, 0.5) !important; border: 1px solid rgba(212, 165, 116, 0.3) !important; border-radius: 2px !important; color: var(--color-vintage-white, #f4e4d7) !important; font-family: 'JetBrains Mono', monospace !important; font-size: 0.875rem !important; padding: 0.75rem 1.25rem !important; min-height: 48px !important; } .rrxr-reach-subscribe .hostinger-reach-block-subscription-form input::placeholder { color: rgba(212, 165, 116, 0.4) !important; } .rrxr-reach-subscribe .hostinger-reach-block-subscription-form input:focus { border-color: rgba(232, 160, 84, 0.6) !important; outline: none !important; box-shadow: none !important; } .rrxr-reach-subscribe .hostinger-reach-block-submit, .rrxr-reach-subscribe .hostinger-reach-block-subscription-form button[type="submit"] { background: var(--color-vu-orange, #e8a054) !important; color: var(--color-deep-walnut, #2c1810) !important; font-family: 'JetBrains Mono', monospace !important; font-weight: 600 !important; font-size: 0.75rem !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; border-radius: 2px !important; padding: 0.75rem 1.5rem !important; min-height: 48px !important; transition: background 0.3s ease !important; white-space: nowrap !important; } .rrxr-reach-subscribe .hostinger-reach-block-submit:hover, .rrxr-reach-subscribe .hostinger-reach-block-subscription-form button[type="submit"]:hover { background: var(--color-warm-brass, #d4a574) !important; } .rrxr-reach-subscribe .hostinger-reach-block-subscription-form label { color: rgba(212, 165, 116, 0.5) !important; font-family: 'JetBrains Mono', monospace !important; } .rrxr-reach-subscribe .reach-subscription-message { color: var(--color-vu-orange, #e8a054) !important; font-family: 'JetBrains Mono', monospace !important; font-size: 0.75rem !important; letter-spacing: 0.1em !important; } .rrxr-reach-subscribe .hostinger-reach-block-form-fields--inline { flex-direction: row !important; gap: 0.75rem !important; } /* ========================================================================== WPForms — Dark Theme Override -------------------------------------------------------------------------- Restyle WPForms to match the deep-walnut / rich-black dark sections. ========================================================================== */ div.wpforms-container-full .wpforms-form { background: transparent !important; padding: 0 !important; } div.wpforms-container-full .wpforms-form .wpforms-field-label { color: rgba(212, 165, 116, 0.6) !important; font-family: 'JetBrains Mono', monospace !important; font-size: 0.65rem !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; font-weight: 500 !important; } div.wpforms-container-full .wpforms-form .wpforms-field-sublabel { color: rgba(212, 165, 116, 0.35) !important; font-family: 'JetBrains Mono', monospace !important; font-size: 0.6rem !important; letter-spacing: 0.1em !important; } div.wpforms-container-full .wpforms-form .wpforms-required-label { color: var(--color-vu-orange, #e8a054) !important; } div.wpforms-container-full .wpforms-form input[type="text"], div.wpforms-container-full .wpforms-form input[type="email"], div.wpforms-container-full .wpforms-form input[type="tel"], div.wpforms-container-full .wpforms-form input[type="url"], div.wpforms-container-full .wpforms-form textarea, div.wpforms-container-full .wpforms-form select { background: rgba(26, 26, 26, 0.5) !important; border: 1px solid rgba(212, 165, 116, 0.25) !important; border-radius: 2px !important; color: var(--color-vintage-white, #f4e4d7) !important; font-family: 'Inter', sans-serif !important; font-size: 0.95rem !important; padding: 0.75rem 1rem !important; transition: border-color 0.3s ease !important; } div.wpforms-container-full .wpforms-form input::placeholder, div.wpforms-container-full .wpforms-form textarea::placeholder { color: rgba(212, 165, 116, 0.3) !important; } div.wpforms-container-full .wpforms-form input:focus, div.wpforms-container-full .wpforms-form textarea:focus { border-color: rgba(232, 160, 84, 0.6) !important; outline: none !important; box-shadow: none !important; } div.wpforms-container-full .wpforms-form textarea { min-height: 140px !important; resize: vertical !important; } div.wpforms-container-full .wpforms-form .wpforms-field { padding: 8px 0 !important; } div.wpforms-container-full .wpforms-form button[type="submit"], div.wpforms-container-full .wpforms-form .wpforms-submit { background: var(--color-vu-orange, #e8a054) !important; color: var(--color-deep-walnut, #2c1810) !important; font-family: 'JetBrains Mono', monospace !important; font-weight: 600 !important; font-size: 0.75rem !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; border: none !important; border-radius: 2px !important; padding: 0.875rem 2rem !important; cursor: pointer !important; transition: background 0.3s ease !important; } div.wpforms-container-full .wpforms-form button[type="submit"]:hover, div.wpforms-container-full .wpforms-form .wpforms-submit:hover { background: var(--color-warm-brass, #d4a574) !important; } div.wpforms-container-full .wpforms-form .wpforms-error, div.wpforms-container-full .wpforms-form label.wpforms-error { color: #e87461 !important; font-family: 'JetBrains Mono', monospace !important; font-size: 0.65rem !important; letter-spacing: 0.1em !important; } div.wpforms-container-full .wpforms-form .wpforms-confirmation-container-full { background: rgba(232, 160, 84, 0.1) !important; border: 1px solid rgba(232, 160, 84, 0.3) !important; color: var(--color-vintage-white, #f4e4d7) !important; border-radius: 2px !important; padding: 1.5rem !important; } /* ========================================================================== Social Links — Icon Styling ========================================================================== */ .rrxr-social-links { display: flex; align-items: center; justify-content: center; gap: 2rem; } .rrxr-social-links a { display: flex; align-items: center; gap: 0.5rem; color: rgba(212, 165, 116, 0.5); text-decoration: none; transition: color 0.3s ease; } .rrxr-social-links a:hover { color: var(--color-vu-orange, #e8a054); } .rrxr-social-links a svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; } .rrxr-social-links a span { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; } /* ========================================================================== Mobile Navigation — Burger Menu & Collapsible Links -------------------------------------------------------------------------- brand.css doesn't include toggle logic. The button starts hidden and JS toggles .nav-open / .nav-links-open on click. We show the toggle at ≤768px, hide inline links, and slide them down as a panel when open. ========================================================================== */ @media (max-width: 768px) { .site-nav-toggle { display: flex !important; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 110; } .site-nav-logo { min-width: 0; overflow: hidden; } .site-nav-logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; } .site-nav-links { display: none !important; position: absolute; top: 52px; left: 0; right: 0; flex-direction: column; gap: 0; background: rgba(26, 26, 26, 0.96); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(212, 165, 116, 0.15); padding: 1rem 1.5rem; } .site-nav-links.nav-links-open { display: flex !important; } .site-nav-links a { padding: 0.75rem 0; border-bottom: 1px solid rgba(212, 165, 116, 0.08); font-size: 12px; } .site-nav-links a:last-child { border-bottom: none; } } @media (max-width: 480px) { .site-nav-logo span { display: none !important; } } /* ========================================================================== Logo Cycling — Fade Transition -------------------------------------------------------------------------- Uses a .logo-fading class so inline opacity doesn't fight Tailwind opacity classes (opacity-80, opacity-60, etc.) on individual logos. ========================================================================== */ .brand-logo { transition: opacity 0.5s ease; } .brand-logo.logo-fading { opacity: 0 !important; } /* ========================================================================== Logo Concept Animations -------------------------------------------------------------------------- Each concept has entrance animations triggered by adding .logo-animating to the parent . Only fires on full/hero logos (nav is too small). ========================================================================== */ /* ── Concept 1: Mic Grille Pulse ── */ @keyframes mic-grille-pulse { 0% { opacity: 0.05; } 50% { opacity: 0.8; } 100% { opacity: 0.35; } } .logo-animating .mic-grille-1 { animation: mic-grille-pulse 0.6s ease-out 0.0s; } .logo-animating .mic-grille-2 { animation: mic-grille-pulse 0.6s ease-out 0.08s; } .logo-animating .mic-grille-3 { animation: mic-grille-pulse 0.6s ease-out 0.16s; } .logo-animating .mic-grille-4 { animation: mic-grille-pulse 0.6s ease-out 0.24s; } .logo-animating .mic-grille-5 { animation: mic-grille-pulse 0.6s ease-out 0.32s; } /* ── Concept 2: Fader Slide ── */ @keyframes slide-fader-1 { from { transform: translateY(30px); } to { transform: translateY(0); } } @keyframes slide-fader-2 { from { transform: translateY(20px); } to { transform: translateY(0); } } @keyframes slide-fader-3 { from { transform: translateY(40px); } to { transform: translateY(0); } } .logo-animating .fader-cap-1 { animation: slide-fader-1 0.8s ease-out; } .logo-animating .fader-cap-2 { animation: slide-fader-2 0.8s ease-out; } .logo-animating .fader-cap-3 { animation: slide-fader-3 0.8s ease-out; } /* ── Concept 3: Tape Reel Spin ── */ @keyframes spin-reel { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .logo-animating .reel-left { animation: spin-reel 1.2s ease-out; transform-box: view-box; transform-origin: 72px 62px; } .logo-animating .reel-right { animation: spin-reel 1.2s ease-out; transform-box: view-box; transform-origin: 128px 62px; } /* ── Concept 4: Waveform Draw-in ── */ @keyframes draw-wave { from { stroke-dashoffset: 1000; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } } .logo-animating .wave-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw-wave 1.5s ease-out forwards; } /* ── Concept 5: VU Needle Bounce ── */ @keyframes vu-logo-needle-bounce { 0% { transform: rotate(-45deg); } 30% { transform: rotate(30deg); } 60% { transform: rotate(-15deg); } 80% { transform: rotate(10deg); } 100% { transform: rotate(-5deg); } } .logo-animating .vu-logo-needle { animation: vu-logo-needle-bounce 1.2s ease-out; transform-origin: 100px 78px; } /* ── Concept 6: EQ Knob Rotation ── */ @keyframes rotate-knob-1 { from { transform: rotate(-70deg); } to { transform: rotate(40deg); } } @keyframes rotate-knob-2 { from { transform: rotate(-50deg); } to { transform: rotate(60deg); } } @keyframes rotate-knob-3 { from { transform: rotate(-80deg); } to { transform: rotate(30deg); } } .logo-animating .knob-1 { animation: rotate-knob-1 0.9s ease-out; transform-origin: 55px 68px; } .logo-animating .knob-2 { animation: rotate-knob-2 0.9s ease-out; transform-origin: 100px 68px; } .logo-animating .knob-3 { animation: rotate-knob-3 0.9s ease-out; transform-origin: 145px 68px; } /* ========================================================================== Devlog Pagination — Override OceanWP Defaults -------------------------------------------------------------------------- OceanWP targets .page-numbers a/.page-numbers.current with inline-block, light-gray background, and border styles. We override with !important to ensure our brand pagination wins. ========================================================================== */ .navigation.pagination .nav-links { display: flex !important; justify-content: center !important; gap: 1rem !important; } .page-numbers a, .page-numbers span:not(.screen-reader-text) { font-family: 'JetBrains Mono', monospace !important; font-size: 0.75rem !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: var(--color-warm-brass, #d4a574) !important; text-decoration: none !important; padding: 0.5rem 1rem !important; border: 1px solid rgba(212, 165, 116, 0.3) !important; border-radius: 2px !important; background: transparent !important; min-width: auto !important; line-height: normal !important; transition: all 0.3s ease !important; } .page-numbers a:hover { border-color: var(--color-vu-orange, #e8a054) !important; color: var(--color-vu-orange, #e8a054) !important; background: transparent !important; } .page-numbers.current, .page-numbers.current:hover { background: var(--color-vu-orange, #e8a054) !important; color: var(--color-deep-walnut, #2c1810) !important; border-color: var(--color-vu-orange, #e8a054) !important; }