/* Theme Name: EchoNest Recording Theme URI: https://echonestrecording.com Author: EchoNest Recording Description: Content site for EchoNest Recording Studio — Koreatown, Los Angeles. Warm dark theme with amber accents, ported from the studio's React design. Pairs with the React booking app served at /book. Version: 1.1.0 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: echonest */ /* ========================================================================== Design tokens and layout are ported verbatim from wordpress/preview/styles.css, which Randy reviewed and approved as a faithful match for the base44 design. The Google Fonts @import that lived at the top of that file is intentionally gone — functions.php enqueues the same three families properly instead. ========================================================================== */ :root { --background: hsl(30 5% 6%); --foreground: hsl(40 20% 95%); --card: hsl(30 5% 9%); --primary: hsl(38 90% 55%); --primary-foreground: hsl(30 5% 6%); --secondary: hsl(30 5% 14%); --secondary-foreground: hsl(40 15% 80%); --muted-foreground: hsl(30 10% 50%); --border: hsl(30 8% 18%); --radius: 0.75rem; --font-sans: 'Inter', sans-serif; --font-display: 'Playfair Display', serif; --font-brand: 'Big Shoulders Display', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); line-height: 1.5; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ---- layout helpers ---- */ .wrap-5xl { max-width: 64rem; margin: 0 auto; } .wrap-3xl { max-width: 48rem; margin: 0 auto; } .wrap-6xl { max-width: 72rem; margin: 0 auto; } .px { padding-left: 1.5rem; padding-right: 1.5rem; } .text-primary { color: var(--primary); } .text-muted { color: var(--muted-foreground); } .eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .25em; color: var(--primary); font-weight: 500; } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; font-size: 1rem; border-radius: 9999px; cursor: pointer; padding: 1rem 2rem; transition: all .2s ease; border: 1px solid transparent; } .btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 10px 25px -5px hsl(38 90% 55% / .25); } .btn-primary:hover { background: hsl(38 90% 50%); } .btn-outline { background: transparent; border-color: var(--border); color: var(--foreground); } .btn-outline:hover { background: var(--secondary); } .btn-lg { padding: 1.1rem 2.5rem; } /* ---- top nav (About / Contact / Return Policy) ---- */ .topbar { border-bottom: 1px solid hsl(30 8% 18% / .6); padding: 1rem 1.5rem; } .topbar .inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .topbar .brand-word { font-family: var(--font-brand); font-size: 1.5rem; font-weight: 700; letter-spacing: .08em; } .topbar img.logo { height: 51px; width: auto; } .topbar nav { display: flex; align-items: center; gap: 1.5rem; } .topbar nav a { font-size: .875rem; color: var(--muted-foreground); transition: color .2s; } .topbar nav a:hover { color: var(--primary); } .topbar nav a.active { color: var(--primary); font-weight: 500; } /* ---- hero (Home) ---- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; } .hero .bg { position: absolute; inset: 0; z-index: 0; } .hero .bg img { width: 100%; height: 100%; object-fit: cover; } .hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, hsl(30 5% 6% / .9), hsl(30 5% 6% / .7), hsl(30 5% 6%)); } .hero .content { position: relative; z-index: 10; max-width: 64rem; padding: 4rem 1.5rem; } .hero img.logo { height: 200px; width: auto; margin: 0 auto .5rem; border-radius: .5rem; } .pill { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 9999px; border: 1px solid hsl(38 90% 55% / .3); background: hsl(38 90% 55% / .1); margin-bottom: 2rem; } .pill .dot { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--primary); } .pill span { font-size: .875rem; font-weight: 500; color: var(--primary); } .hero h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 1.5rem; font-size: clamp(3rem, 8vw, 6rem); } .hero p.lead { font-size: 1.125rem; color: var(--muted-foreground); max-width: 42rem; margin: 0 auto 2.5rem; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 4rem; } .feature-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 48rem; margin: 0 auto; } .feature { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1.5rem; border-radius: 1rem; background: hsl(30 5% 9% / .6); border: 1px solid hsl(30 8% 18% / .5); backdrop-filter: blur(4px); } .feature .ico { width: 3rem; height: 3rem; border-radius: .75rem; background: hsl(38 90% 55% / .1); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .feature .label { font-weight: 600; font-size: .875rem; } .feature .desc { font-size: .75rem; color: var(--muted-foreground); margin-top: .25rem; } /* ---- section headings ---- */ .section { padding: 6rem 1.5rem; } .section h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 5vw, 3rem); margin-bottom: 1rem; } .section .sub { color: var(--muted-foreground); font-size: 1.125rem; max-width: 36rem; margin: 0 auto; } .center { text-align: center; } /* ---- pricing ---- */ .price-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 48rem; margin: 4rem auto 0; } .price-card { position: relative; padding: 2rem; border-radius: 1.5rem; border: 1px solid hsl(30 8% 18% / .6); background: var(--card); transition: border-color .2s; } .price-card:hover { border-color: hsl(38 90% 55% / .4); } .price-card.featured { border: 2px solid hsl(38 90% 55% / .6); box-shadow: 0 10px 25px -5px hsl(38 90% 55% / .1); } .price-card .tier { font-size: .875rem; font-weight: 500; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; } .price-card.featured .tier { color: var(--primary); } .price-card .amount { font-size: 3rem; font-weight: 700; color: var(--primary); line-height: 1; } .price-card .per { color: var(--muted-foreground); } .price-card .range { font-size: .875rem; color: var(--muted-foreground); margin-top: .5rem; } .price-feats { margin: 1.5rem 0 2rem; display: flex; flex-direction: column; gap: .75rem; } .price-feats div { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: var(--secondary-foreground); } .price-feats .chk { color: var(--primary); font-weight: 700; } .badge-best { position: absolute; top: -.75rem; left: 2rem; display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .75rem; background: var(--primary); color: var(--primary-foreground); border-radius: 9999px; font-size: .75rem; font-weight: 700; } .btn-block { width: 100%; padding: 1.1rem; } .eng-addon { margin: 2rem auto 0; max-width: 48rem; padding: 1.5rem; border-radius: 1rem; border: 1px solid hsl(30 8% 18% / .6); background: hsl(30 5% 9% / .5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .eng-addon .left { display: flex; align-items: center; gap: 1rem; } .eng-addon .ico { width: 3rem; height: 3rem; border-radius: .75rem; background: hsl(38 90% 55% / .1); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; } .eng-addon .price { font-size: 1.5rem; font-weight: 700; color: var(--primary); } .eng-addon .price small { font-size: .875rem; color: var(--muted-foreground); font-weight: 400; } /* ---- CTA ---- */ .cta { padding: 6rem 1.5rem; text-align: center; } .cta h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 5vw, 3rem); margin-bottom: 1rem; } .cta p { color: var(--muted-foreground); font-size: 1.125rem; margin: 0 auto 2rem; max-width: 32rem; } /* ---- footer ---- */ footer.site { border-top: 1px solid hsl(30 8% 18% / .4); padding: 2.5rem 1.5rem; } footer.site .cols { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; } footer.site img.logo { height: 51px; width: auto; margin: 0 auto .25rem; } footer.site .addr { font-size: .875rem; color: var(--muted-foreground); } footer.site .links { display: flex; align-items: center; gap: 1.5rem; } footer.site .links a { font-size: .875rem; color: var(--muted-foreground); transition: color .2s; } footer.site .links a:hover { color: var(--foreground); } footer.site .copy { max-width: 64rem; margin: 1.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid hsl(30 8% 18% / .3); text-align: center; font-size: .75rem; color: var(--muted-foreground); } .footer-mini { border-top: 1px solid hsl(30 8% 18% / .4); padding: 2rem 1.5rem; text-align: center; font-size: .75rem; color: var(--muted-foreground); } /* ---- About ---- */ .about-hero { position: relative; height: 40vh; min-height: 280px; overflow: hidden; } .about-hero img { width: 100%; height: 100%; object-fit: cover; } .about-hero .overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, hsl(0 0% 0% / .6), hsl(0 0% 0% / .4), var(--background)); } .about-hero .caption { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 1.5rem; } .about-hero .caption .loc { font-size: .75rem; text-transform: uppercase; letter-spacing: .3em; color: var(--primary); font-weight: 500; margin-bottom: .75rem; } .about-hero .caption h1 { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: clamp(3rem, 7vw, 3.75rem); } .story { padding: 4rem 1.5rem; max-width: 48rem; margin: 0 auto; text-align: center; } .story h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1.15; margin-bottom: 1.5rem; } .story p { color: var(--muted-foreground); font-size: 1.125rem; line-height: 1.7; } .divider { max-width: 20rem; margin: 0 auto; border-top: 1px solid hsl(30 8% 18% / .4); } .gallery-sec { padding-top: 3rem; padding-bottom: 4rem; } .gallery { display: flex; gap: .75rem; overflow-x: auto; padding: 0 1rem 1rem; scroll-snap-type: x mandatory; } .gallery::-webkit-scrollbar { display: none; } .gallery { scrollbar-width: none; } .gallery .shot { flex: none; width: 18rem; height: 16rem; border-radius: .75rem; overflow: hidden; background: var(--secondary); scroll-snap-align: start; } .gallery .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .gallery .shot img:hover { transform: scale(1.05); } .eng-sec { padding: 3rem 1.5rem 6rem; max-width: 72rem; margin: 0 auto; } .eng-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .eng-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid hsl(30 8% 18% / .6); border-radius: 1rem; overflow: hidden; transition: border-color .3s; } .eng-card:hover { border-color: hsl(38 90% 55% / .4); } .eng-card .photo { aspect-ratio: 3/4; overflow: hidden; background: var(--secondary); } .eng-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; } .eng-card:hover .photo img { transform: scale(1.05); } .eng-card .info { padding: 1.25rem; } .eng-card .info h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.2; } .eng-card .info .role { font-size: .75rem; color: var(--primary); font-weight: 500; letter-spacing: .02em; margin: .15rem 0 .75rem; } /* ---- Contact ---- */ .contact-wrap { max-width: 48rem; margin: 0 auto; padding: 4rem 1.5rem; } .contact-head { text-align: center; margin-bottom: 3rem; } .contact-head .eyebrow2 { color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: .15em; font-size: .875rem; } .contact-head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 5vw, 3rem); margin: 1rem 0; } .contact-head p { color: var(--muted-foreground); font-size: 1.125rem; } .contact-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } .contact-card { padding: 1.5rem; border-radius: 1rem; background: var(--card); border: 1px solid hsl(30 8% 18% / .5); transition: border-color .2s; } a.contact-card:hover { border-color: hsl(38 90% 55% / .5); } .contact-card .k { color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: .15em; font-size: .75rem; } .contact-card .v { font-weight: 600; font-size: 1.125rem; margin: .5rem 0 .25rem; } .contact-card .note { font-size: .875rem; color: var(--muted-foreground); } .contact-cta { text-align: center; margin-top: 3rem; } /* ---- Return Policy ---- */ .policy-wrap { max-width: 48rem; margin: 0 auto; padding: 2.5rem 1.5rem; } .policy-wrap > .intro { margin-bottom: 2.5rem; } .policy-wrap .intro h2 { font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; margin-bottom: .5rem; } .policy-wrap .intro p { font-size: .875rem; color: var(--muted-foreground); } .policy-section { margin-bottom: 2.5rem; } .policy-section h3 { font-size: 1.125rem; font-weight: 600; color: var(--primary); border-bottom: 1px solid hsl(30 8% 18% / .4); padding-bottom: .5rem; margin-bottom: 1rem; } .policy-item { margin-bottom: 1rem; } .policy-item .h { font-weight: 600; margin-bottom: .25rem; } .policy-item p { font-size: .875rem; color: var(--muted-foreground); line-height: 1.6; } .policy-foot { padding-top: 1rem; border-top: 1px solid hsl(30 8% 18% / .4); font-size: .75rem; color: var(--muted-foreground); } .back-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted-foreground); } .back-link:hover { color: var(--foreground); } /* ---- responsive ---- */ @media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } .price-grid { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: repeat(2, 1fr); } .eng-grid { grid-template-columns: repeat(2, 1fr); } footer.site .cols { flex-direction: row; justify-content: space-between; text-align: left; } footer.site img.logo { margin-left: 0; } .gallery .shot { width: 24rem; height: 20rem; } } @media (min-width: 1024px) { .eng-grid { grid-template-columns: repeat(4, 1fr); } } /* ========================================================================== WordPress-specific additions — not in the static preview, but required once content comes from the block editor and the admin bar is present. ========================================================================== */ /* Prose rendered via the_content() inherits the surrounding section's styling, but editor output needs its own link/list/emphasis rules. */ .entry-content a { color: var(--primary); text-decoration: underline; } .entry-content a:hover { color: hsl(38 90% 65%); } .entry-content p + p { margin-top: 1rem; } .entry-content ul, .entry-content ol { margin: 1rem 0 1rem 1.5rem; } .entry-content li { margin-bottom: .5rem; } .entry-content strong { color: var(--foreground); font-weight: 600; } .entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--font-display); margin: 1.5rem 0 .75rem; } /* Standard WP media alignment classes. */ .alignleft { float: left; margin: 0 1.5rem 1rem 0; } .alignright { float: right; margin: 0 0 1rem 1.5rem; } .aligncenter { display: block; margin: 1rem auto; } .alignwide, .alignfull { max-width: 100%; } .wp-caption { max-width: 100%; } .wp-caption-text { font-size: .75rem; color: var(--muted-foreground); text-align: center; margin-top: .5rem; } /* Accessibility: visually hidden but available to screen readers, and a skip link that becomes visible on keyboard focus. */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .skip-link:focus { clip-path: none; background: var(--primary); color: var(--primary-foreground); height: auto; width: auto; padding: 1rem 1.5rem; left: 1rem; top: 1rem; z-index: 100000; font-weight: 600; border-radius: .5rem; } /* The fixed admin bar would otherwise cover the full-height hero. */ .admin-bar .hero { min-height: calc(100vh - 32px); } @media screen and (max-width: 782px) { .admin-bar .hero { min-height: calc(100vh - 46px); } } /* 404 */ .notfound-wrap { max-width: 48rem; margin: 0 auto; padding: 6rem 1.5rem; text-align: center; } .notfound-wrap h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 5vw, 3rem); margin-bottom: 1rem; } .notfound-wrap p { color: var(--muted-foreground); font-size: 1.125rem; margin-bottom: 2rem; } /* wp_nav_menu emits