/* * Copyright 2020 Adobe. All rights reserved. * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy * of the License at http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ :root { /* Sony Music Italy — brand tokens, lifted verbatim from sony_redesign/index.html tailwind.config (dark palette — the prototype ships ). */ --color-background: #131313; --color-surface: #131313; --color-surface-dim: #131313; --color-surface-bright: #393939; --color-surface-light: #1A1A1A; --color-surface-elevated: #222222; --color-surface-container-lowest: #0e0e0e; --color-surface-container-low: #1b1b1b; --color-surface-container: #1f1f1f; --color-surface-container-high: #2a2a2a; --color-surface-container-highest: #353535; --color-surface-variant: #353535; --color-border-muted: #2A2A2A; --color-outline: #ae8784; --color-outline-variant: #5e3f3d; --color-on-background: #e2e2e2; --color-on-surface: #e2e2e2; --color-on-surface-variant: #e8bcb9; --color-inverse-surface: #e2e2e2; --color-inverse-on-surface: #303030; --color-primary: #ffb3ae; --color-primary-dim: #ffb3ae; --color-primary-fixed: #ffdad7; --color-primary-fixed-dim: #ffb3ae; --color-on-primary: #68000b; --color-on-primary-fixed: #410004; --color-on-primary-fixed-variant: #930014; --color-on-primary-container: #fff0ee; --color-primary-container: #df0024; --color-inverse-primary: #c0001d; --color-sony-red: #df0024; --color-sony-red-hover: #F00027; --color-secondary: #c8c6c5; --color-secondary-fixed: #e5e2e1; --color-secondary-fixed-dim: #c8c6c5; --color-on-secondary: #313030; --color-on-secondary-fixed: #1c1b1b; --color-on-secondary-fixed-variant: #474646; --color-on-secondary-container: #bab8b7; --color-secondary-container: #4a4949; --color-tertiary: #90cdff; --color-tertiary-fixed: #cbe6ff; --color-tertiary-fixed-dim: #90cdff; --color-on-tertiary: #003350; --color-on-tertiary-fixed: #001e30; --color-on-tertiary-fixed-variant: #004b72; --color-on-tertiary-container: #ebf4ff; --color-tertiary-container: #0075ae; --color-error: #ffb4ab; --color-on-error: #690005; --color-error-container: #93000a; --color-on-error-container: #ffdad6; --color-highlight: rgb(255 255 255 / 5%); --color-shadow: rgb(0 0 0 / 60%); /* spacing */ --space-base: 4px; --space-gutter: 32px; --space-section-v: 96px; --space-component-padding-x: 32px; --space-component-padding-y: 14px; --container-max: 1400px; /* type — Inter for everything, per the prototype's fontFamily map */ --body-font-family: "Inter", inter-fallback, sans-serif; --heading-font-family: "Inter", inter-fallback, sans-serif; /* type scale, lifted from the prototype's tailwind fontSize tokens */ --font-size-tag-featured: 13px; --font-size-display-hero: 64px; --font-size-body-sm: 14px; --font-size-headline-lg: 35px; --font-size-headline-lg-mobile: 28px; --font-size-body-lead: 18px; --font-size-card-title: 21px; --font-size-label-action: 14px; /* header total height — measured live from the prototype's rendered chrome: desktop = 23px brand strip (non-sticky) + 56px sticky nav row = 79px; mobile = 56px nav row only (strip is hidden below 768px). */ --nav-height: 56px; } @media (width >= 768px) { :root { --nav-height: 79px; } } /* fallback fonts — metric-matched to Inter (Inter Fallback calibration from fontsource) */ @font-face { font-family: inter-fallback; size-adjust: 107%; ascent-override: 90%; descent-override: 22.5%; line-gap-override: 0%; src: local('Arial'); } *, *::before, *::after { box-sizing: border-box; } * { border-radius: 0 !important; } body { display: none; margin: 0; background-color: var(--color-background); color: var(--color-on-surface); font-family: var(--body-font-family); font-size: var(--font-size-body-sm); line-height: 1.5; } body.appear { display: block; } header { height: var(--nav-height); background: #000; } header .header, footer .footer { visibility: hidden; } header .header[data-block-status="loaded"], footer .footer[data-block-status="loaded"] { visibility: visible; } h1, h2, h3, h4, h5, h6 { margin-top: 0.8em; margin-bottom: 0.25em; font-family: var(--heading-font-family); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; scroll-margin: 40px; color: var(--color-on-background); } h1 { font-size: var(--font-size-display-hero); } h2 { font-size: var(--font-size-headline-lg); } h3 { font-size: var(--font-size-card-title); font-weight: 700; letter-spacing: normal; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: var(--font-size-tag-featured); letter-spacing: 0.12em; text-transform: uppercase; } @media (width <= 767px) { h1 { font-size: var(--font-size-headline-lg-mobile); } } p, dl, ol, ul, pre, blockquote { margin-top: 0.8em; margin-bottom: 0.25em; } main > div { margin: 0; } input, textarea, select, button { font: inherit; } /* links */ a:any-link { color: var(--color-primary); text-decoration: none; overflow-wrap: break-word; } a:hover { color: var(--color-sony-red-hover); text-decoration: underline; } /* buttons — mapped onto the prototype's CTA look: solid red primary, outline secondary. Sony Music has no third accent CTA in this page. */ p.button-wrapper { display: inline-flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 12px 0; } a.button:any-link, button.button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; margin: 0; border: 1px solid transparent; padding: var(--space-component-padding-y) var(--space-component-padding-x); /* min-height 42px + line-height 1.5 (inherited from body, NOT overridden) match the source exactly: its buttons never set their own line-height, and the icon glyph (a 14px-font ligature at normal line-height) is ~20px tall, which dominates the flex row's height over the 11px/1.5 text (16.5px) — net result 42px including padding+border. Our icon is a fixed-size raster image, so pin min-height directly rather than trying to replicate that icon-font sizing accident. */ min-height: 42px; font: inherit; font-size: var(--font-size-label-action); font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } a.button.primary, button.button.primary { border-color: var(--color-primary-container); background-color: var(--color-primary-container); color: #fff; } a.button.primary:hover, a.button.primary:focus-visible, button.button.primary:hover, button.button.primary:focus-visible { border-color: var(--color-sony-red-hover); background-color: var(--color-sony-red-hover); color: #fff; text-decoration: none; } a.button.secondary, button.button.secondary { border-color: var(--color-on-surface); background-color: transparent; color: var(--color-on-surface); } a.button.secondary:hover, a.button.secondary:focus-visible, button.button.secondary:hover, button.button.secondary:focus-visible { border-color: var(--color-sony-red-hover); color: var(--color-sony-red-hover); background-color: transparent; text-decoration: none; } a.button.accent, button.button.accent { border-color: var(--color-sony-red-hover); background-color: var(--color-sony-red-hover); color: #fff; } main img { display: block; max-width: 100%; width: auto; height: auto; } .icon { display: inline-block; height: 24px; width: 24px; } .icon img { height: 100%; width: 100%; } /* sections */ main > .section { margin: 0; } /* Fixed 24px gutter (matches the prototype's px-6, used with no responsive growth anywhere in the source — every container in sony_redesign/index.html uses a single fixed px-6/px-gutter value, never a responsive jump between them). */ main > .section > div { max-width: var(--container-max); margin: auto; padding: 0 24px; } main .section:empty { display: none; } /* section-metadata style vocabulary (D1) — for default-content sections only. Block-owned sections paint themselves via their own block CSS/classes. */ main .section.dark { background-color: #000; color: var(--color-on-background); } main .section.light { background-color: #fff; color: #131313; } /* Neumorphic utilities — cross-cutting look used by header dropdowns, store filter chips, and card hover states across multiple blocks. */ .neu-extruded { box-shadow: 8px 8px 16px rgb(0 0 0 / 60%), -4px -4px 12px rgb(255 255 255 / 5%); border: 1px solid var(--color-border-muted); } .neu-recessed { box-shadow: inset 6px 6px 12px rgb(0 0 0 / 60%), inset -4px -4px 12px rgb(255 255 255 / 5%); border: 1px solid var(--color-border-muted); } .neu-card-hover:hover { box-shadow: 12px 12px 24px rgb(0 0 0 / 70%), -6px -6px 16px rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 15%); } /* Floating Spotify player widget — injected once by scripts.js#ensureSpotifyPlayerWidget(). Hidden base state lives here (eager stylesheet, present before first paint) rather than in lazy-styles.css, so the widget never flashes visible while lazy CSS is still loading. Mirrors sony_redesign/index.html L2839. */ .spotify-player-widget { position: fixed; right: 24px; bottom: 24px; z-index: 9999; width: calc(100% - 48px); max-width: 360px; transform: translateY(128px); opacity: 0; pointer-events: none; transition: transform 0.5s ease-out, opacity 0.5s ease-out; } .spotify-player-widget.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .neu-btn-recessed:active { box-shadow: inset 4px 4px 8px rgb(0 0 0 / 60%), inset -2px -2px 8px rgb(255 255 255 / 5%); }