/* ============================================================ IPSecure Studio — design system Minimal editorial portfolio (inspirado no template Beaumont) ============================================================ */ /* ============================================================ Design tokens — Claude Design "Modernist" (day) / "Nocturne" (night) Toggle by setting data-theme="night" on (see main.js). ============================================================ */ :root{ --bg: #f3f2f2; --bg-soft: #eae9e9; --surface: #eae9e9; --border: #cfcbca; --border-soft: #ddd9d8; --text: #201e1d; --text-dim: #514e4c; --text-faint: #837f7d; --accent: #ec3013; --accent-strong: #ae1800; --accent-soft: #fff2ef; --maxw: 1320px; --maxw-text: 640px; --font-display: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif; --font-weight-heading: 800; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; color-scheme: light; } html[data-theme="night"]{ --bg: #161826; --bg-soft: #232532; --surface: #232532; --border: #35374a; --border-soft: #2b2d3d; --text: #e9e9ed; --text-dim: #b1b1ba; --text-faint: #83838f; --accent: #9184d9; --accent-strong: #b5abfc; --accent-soft: #2b2741; --font-display: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-weight-heading: 600; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; color-scheme: dark; } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height:1.6; -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } ::selection{ background: color-mix(in srgb, var(--accent) 30%, transparent); } :focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; text-underline-offset:3px; } h1,h2,h3,h4{ font-family: var(--font-display); line-height:1.15; margin:0 0 .5em; font-weight:var(--font-weight-heading); letter-spacing:-.015em; } p{ margin:0 0 1em; color: var(--text-dim); } ul{ margin:0; padding:0; list-style:none; } button{ font-family:inherit; } .skip-link{ position:absolute; left:-999px; top:0; background:var(--text); color:#ffffff; padding:.6em 1em; z-index:1000; } .skip-link:focus{ left:0; } .wrap{ max-width: var(--maxw); margin:0 auto; padding:0 40px; } /* ---------- Reveal on scroll (subtle) ---------- */ html.has-js .reveal{ opacity:0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease; } html.has-js .reveal.is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ html.has-js .reveal{ opacity:1; transform:none; transition:none; } } /* ---------- Header ---------- */ .site-header{ position: sticky; top:0; z-index:200; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:96px; gap:24px; } .brand{ display:flex; flex-direction:column; align-items:flex-start; font-family: var(--font-display); font-weight:var(--font-weight-heading); font-size:1.3rem; white-space:nowrap; } .brand-logo{ display:block; height:28px; width:auto; flex-shrink:0; } .brand-logo-night{ display:none; } html[data-theme="night"] .brand-logo-day{ display:none; } html[data-theme="night"] .brand-logo-night{ display:block; } .brand small{ font-family: var(--font-body); font-weight:400; color: var(--text-faint); font-size:.66rem; letter-spacing:.03em; margin-top:6px; } .main-nav{ display:flex; align-items:center; gap:30px; flex:1; justify-content:center; } .main-nav a{ color: var(--text-dim); font-size:.88rem; padding:4px 0; white-space:nowrap; border-bottom:1px solid transparent; transition: color .15s, border-color .15s; } .main-nav a:hover, .main-nav a:focus-visible{ color:var(--accent); border-color: var(--accent); } .main-nav a.active{ color: var(--accent); border-color: var(--accent); } .header-actions{ display:flex; align-items:center; gap:14px; } .header-actions .btn-ghost{ display:none; } .icon-toggle{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; background:transparent; color:var(--text-dim); border:1px solid var(--border); border-radius:var(--radius-md); cursor:pointer; font-size:.72rem; font-weight:700; letter-spacing:.02em; transition: color .15s, border-color .15s; } .icon-toggle:hover{ color:var(--accent); border-color:var(--accent); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family: var(--font-display); font-weight:var(--font-weight-heading); font-size:.85rem; cursor:pointer; white-space:nowrap; border-radius:var(--radius-md); transition: opacity .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease; } .btn-primary{ background: var(--accent); color:var(--bg); padding:12px 22px; border:1px solid var(--accent); } .btn-primary:hover{ background:var(--accent-strong); border-color:var(--accent-strong); } html[data-theme="night"] .btn-primary{ background:transparent; color:var(--accent); } html[data-theme="night"] .btn-primary:hover{ background:color-mix(in srgb, var(--accent) 14%, transparent); border-color:var(--accent); } .btn-ghost{ background: transparent; color: var(--accent); border-bottom:1px solid var(--accent); padding-bottom:2px; } .btn-ghost:hover{ opacity:.7; } .btn-outline{ background: transparent; color: var(--text); border:1px solid var(--border); padding:11px 22px; } .btn-outline:hover{ border-color: var(--accent); color:var(--accent); } .btn-sm{ font-size:.78rem; } .btn-block{ width:100%; } .nav-toggle{ display:none; background:none; border:none; color:var(--text); padding:8px; cursor:pointer; } @media (max-width: 900px){ .main-nav{ display:none; } .header-actions .btn-primary{ display:none; } .nav-toggle{ display:flex; } .site-header .wrap{ height:80px; } } /* mobile nav drawer */ .mobile-nav{ display:none; position:fixed; inset:80px 0 0 0; background: var(--bg); z-index:190; padding:24px 40px; overflow-y:auto; } .mobile-nav.open{ display:block; } .mobile-nav a{ display:block; padding:18px 0; font-size:1.2rem; font-family:var(--font-display); border-bottom:1px solid var(--border); color:var(--text); } .mobile-nav .btn{ margin-top:24px; width:100%; } .mobile-nav .mobile-nav-toggles{ display:flex; gap:10px; margin-top:20px; } /* ---------- Hero ---------- */ .hero{ padding:64px 0 56px; border-bottom:1px solid var(--border); } .eyebrow{ display:inline-flex; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--accent); margin-bottom:24px; font-weight:700; border:1px solid var(--accent); border-radius:20px; padding:5px 14px; } .hero h1{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); max-width:20ch; margin-bottom:.45em; font-weight:var(--font-weight-heading); letter-spacing:-.01em; } .hero .lede{ font-size:1.08rem; max-width:60ch; color: var(--text-dim); } .hr{ height:2px; border:0; margin:32px 0; background:var(--border); } html[data-theme="night"] .hr{ height:1px; background: linear-gradient(to right, transparent, var(--border) 48px, var(--border) calc(100% - 48px), transparent); } .stat-row{ display:flex; flex-wrap:wrap; gap:40px; margin-top:40px; } .stat{ padding:0; } .stat b{ display:block; font-family: var(--font-display); font-size:clamp(2.3rem, 3.6vw, 3.4rem); color:var(--accent); font-weight:var(--font-weight-heading); line-height:1.05; } .stat span{ font-size:.82rem; color: var(--text-faint); letter-spacing:.02em; } .hero-grid{ margin-top:48px; display:grid; grid-template-columns:repeat(5, 1fr); gap:2px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--border); } .hero-grid-item{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-soft); } .hero-grid-item img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; } @media (max-width:900px){ .hero-grid{ grid-template-columns:repeat(3, 1fr); } } @media (max-width:560px){ .hero-grid{ grid-template-columns:repeat(2, 1fr); } } /* ---------- Filters ---------- */ .filters-section{ padding:56px 0 28px; } .filters-title{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; } .filters-title h2{ font-size:1.9rem; font-weight:var(--font-weight-heading); margin:0; } .filter-count{ color: var(--text-faint); font-size:.85rem; } .seg{ display:inline-flex; flex-wrap:wrap; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-md); } .seg-opt{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; font-size:.82rem; cursor:pointer; border-left:1px solid var(--border); transition: background-color .15s, color .15s; } .seg-opt:first-child{ border-left:none; } .seg-opt input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; } .seg-opt:hover{ background: color-mix(in srgb, var(--text) 6%, transparent); } .seg-opt.is-active{ background:var(--accent); color:var(--bg); } .seg-opt.is-active:hover{ background:var(--accent); } /* ---------- Work grid (home) ---------- */ .project-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:56px 48px; padding:32px 0 96px; } @media (max-width: 780px){ .project-grid{ grid-template-columns: 1fr; gap:44px; } } .pcard{ display:block; } .pcard-cover{ aspect-ratio: 4/3; position:relative; overflow:hidden; background: var(--bg-soft); border:1px solid var(--border-soft); border-radius:var(--radius-md); } .pcard-body{ padding:16px 0 0; display:flex; flex-direction:column; gap:2px; } .pcard-tags{ display:none; } .pcard h3{ font-size:1.2rem; margin:0; font-weight:500; } .pcard .desc{ display:none; } .pcard .work-meta{ font-size:.76rem; color:var(--text-faint); letter-spacing:.04em; text-transform:uppercase; } .techs{ display:none; } .pcard-actions{ display:none; } /* ---------- Work image (plain, no browser chrome) ---------- */ .work-image{ width:100%; height:100%; position:relative; overflow:hidden; } .work-image img{ transition: transform .6s cubic-bezier(.16,1,.3,1); } .work-image .cover-shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; } .work-image .cover-logo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } .pcard:hover .work-image img{ transform: scale(1.04); } /* ---------- Product showcase (zigzag, home) ---------- */ .showcase-list{ display:flex; flex-direction:column; } .showcase-row{ --pc: var(--text-dim); display:grid; grid-template-columns: 1.15fr 1fr; gap:5vw; align-items:center; padding:72px 0; border-top:1px solid var(--border); } .showcase-row:first-child{ border-top:none; padding-top:8px; } .showcase-row.reverse .showcase-media{ order:2; } .showcase-row.reverse .showcase-content{ order:1; } .showcase-media{ display:block; } .showcase-media .pcard-cover{ aspect-ratio: 5/4; position:relative; overflow:hidden; background: var(--bg-soft); border:1px solid var(--border-soft); border-radius:var(--radius-md); } .showcase-content{ max-width:46ch; } .showcase-row.reverse .showcase-content{ justify-self:end; } .showcase-index{ display:flex; align-items:center; gap:12px; margin-bottom:18px; } .showcase-index .num{ font-family:var(--font-display); font-size:1rem; color:var(--pc); } .showcase-index .work-meta{ font-size:.76rem; color:var(--text-faint); letter-spacing:.04em; text-transform:uppercase; } .showcase-index::before{ content:""; width:28px; height:1px; background:var(--pc); display:block; flex:none; } .showcase-content h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:500; margin:0 0 .45em; } .showcase-content h3 a{ color:inherit; text-decoration:none; } .showcase-content h3 a:hover{ text-decoration:underline; text-underline-offset:4px; } .showcase-desc{ font-size:.98rem; line-height:1.6; color:var(--text-dim); margin:0 0 20px; } .showcase-row .tech-pills{ margin-bottom:26px; } .showcase-actions{ display:flex; gap:14px; flex-wrap:wrap; } @media (max-width: 860px){ .showcase-row{ grid-template-columns:1fr; gap:28px; padding:48px 0; } .showcase-row.reverse .showcase-media, .showcase-row.reverse .showcase-content{ order:initial; } .showcase-content, .showcase-row.reverse .showcase-content{ max-width:none; justify-self:auto; } } /* ---------- Product card grid (home, replaces zigzag) ---------- */ .grid-cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; align-items:stretch; } .card{ background:var(--bg); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:16px; display:flex; flex-direction:column; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } a.card{ cursor:pointer; } a.card:hover, a.card:focus-visible{ border-color:var(--accent); transform:translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--text) 10%, transparent); } a.card:hover .card-cta{ color:var(--accent-strong); } a.card:hover .card-cta::after{ transform:translateX(3px); } .card.elev-sm{ box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent); } .card .pcard-cover{ margin-bottom:14px; flex:none; } .card .pcard-body{ flex:1 1 auto; min-height:0; } .card-meta{ font-size:.76rem; color:var(--text-faint); letter-spacing:.04em; text-transform:uppercase; margin-bottom:6px; } .card-title{ font-family:var(--font-display); font-weight:var(--font-weight-heading); font-size:1.15rem; margin:0 0 8px; } .card-desc{ font-size:.92rem; line-height:1.55; color:var(--text-dim); margin:0 0 14px; flex:1; } .tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; } .card-cta{ display:inline-flex; align-items:center; gap:4px; font-size:.82rem; font-weight:600; color:var(--accent); } .card-cta::after{ content:"→"; transition:transform .18s ease; } @media (max-width:900px){ .grid-cards{ grid-template-columns: repeat(2,1fr); } } @media (max-width:600px){ .grid-cards{ grid-template-columns:1fr; } } /* ---------- Sections generic ---------- */ section{ padding:96px 0; } .section-head{ max-width:640px; margin:0 auto 48px; } .section-head h2{ font-size:clamp(1.7rem,3vw,2.2rem); font-weight:500; } /* Process */ .process-strip{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .process-steps{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:32px 24px; } .pstep{ padding:0; } .pstep .num{ font-family:var(--font-display); font-size:1.1rem; color:var(--text-faint); margin-bottom:10px; display:block; } .pstep h4{ font-size:1rem; margin-bottom:6px; font-weight:500; } .pstep p{ font-size:.86rem; color:var(--text-faint); margin:0; } .process-note{ max-width:680px; margin:40px 0 0; color:var(--text-faint); font-size:.9rem; } /* About (Rafael Braz) */ .about-me-grid{ display:grid; grid-template-columns: 400px 1fr; gap:64px; align-items:start; } @media (max-width: 860px){ .about-me-grid{ grid-template-columns: 1fr; gap:32px; } .about-me-photo{ max-width:300px; margin:0 auto; } } .about-me-photo img{ width:100%; height:auto; display:block; border-radius:var(--radius-lg); border:1px solid var(--border-soft); box-shadow: 0 20px 48px -24px rgba(20,20,15,.28); } .about-me-content h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:.4em; } .about-lede{ font-family:var(--font-display); font-size:1.3rem; line-height:1.45; color:var(--text); margin-bottom:1em; } .about-highlight{ font-family:var(--font-display); font-size:1.3rem; line-height:1.4; color:var(--text); margin:1.2em 0 .3em; } .about-highlight-sm{ font-size:.92rem; color:var(--text-faint); margin:0 0 1.4em; } .about-bio p{ font-size:.98rem; } .about-bio p.about-highlight-sm{ font-family:var(--font-display); font-size:1.15rem; line-height:1.4; color:var(--text); margin:1.2em 0 0; padding-top:1.2em; border-top:1px solid var(--border); } .about-links{ display:flex; gap:22px; flex-wrap:wrap; margin-top:22px; } .about-stats{ margin-top:32px; padding-top:28px; border-top:1px solid var(--border); } .area-tags{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:14px 0 0; } .area-tags span{ font-size:.78rem; color:var(--text-dim); border:1px solid var(--border-soft); border-radius:20px; padding:5px 14px; } .skills-head{ margin-top:80px; } .skills-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:40px 32px; } .skill-card{ border-top:1px solid var(--border); padding-top:20px; } .skill-card .num{ font-family:var(--font-display); font-size:1rem; color:var(--text-faint); display:block; margin-bottom:10px; } .skill-card h3{ font-size:1.1rem; margin:0 0 8px; font-weight:500; } .skill-card p{ font-size:.88rem; color:var(--text-dim); margin:0 0 14px; } .skill-items{ display:flex; flex-wrap:wrap; gap:6px 8px; list-style:none; margin:0; padding:0; } .skill-items li{ font-size:.76rem; color:var(--text-dim); border:1px solid var(--border-soft); border-radius:20px; padding:4px 12px; } .about-cta{ border-top:1px solid var(--border); margin-top:64px; padding-top:40px; } .about-cta h3{ font-size:1.4rem; margin:0 0 10px; font-weight:500; } .about-cta p{ max-width:60ch; margin:0 0 22px; } /* Final CTA */ .final-cta{ border-top:1px solid var(--border); } .final-cta h2{ font-size:clamp(1.8rem,4vw,2.4rem); max-width:22ch; margin:0 0 .3em; font-weight:500; } .final-cta p{ max-width:56ch; margin:0 0 32px; font-size:1.02rem; } .cta-actions{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; } /* Footer */ .site-footer{ border-top:1px solid var(--border); padding:44px 0; } .footer-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:var(--text-faint); font-size:.82rem; } .footer-links{ display:flex; gap:22px; flex-wrap:wrap; } .footer-links a:hover{ color:var(--text); } /* ---------- Project detail page ---------- */ .crumb{ font-size:.82rem; color:var(--text-faint); padding:28px 0 0; } .crumb a:hover{ color:var(--text); } .p-hero{ padding:36px 0 48px; border-bottom:1px solid var(--border); } .p-hero-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; } .p-hero h1{ font-size:clamp(2rem,4.2vw,3rem); margin:.25em 0 .3em; font-weight:500; } .p-hero .cat{ color:var(--text-faint); font-weight:500; letter-spacing:.08em; text-transform:uppercase; font-size:.76rem; } .p-hero .lede{ font-size:1.05rem; max-width:62ch; } .p-hero-actions{ display:flex; gap:26px; flex-wrap:wrap; align-items:center; margin-top:22px; } .status-banner{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--text-faint); } .status-banner::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; } .status-banner.published{ color:#3f7a4f; } .status-banner.development{ color:#a06a1e; } .p-cover{ margin-top:32px; overflow:hidden; border:1px solid var(--border-soft); border-radius:var(--radius-md); aspect-ratio: 16/10; background:var(--bg-soft); } .content-grid{ display:grid; grid-template-columns: 1.7fr 1fr; gap:64px; align-items:start; } @media (max-width: 900px){ .content-grid{ grid-template-columns:1fr; } } .content-grid h2{ font-size:1.3rem; margin-top:2.4em; font-weight:500; } .content-grid h2:first-child{ margin-top:0; } .content-grid .lead-p{ font-size:1.02rem; color:var(--text-dim); } .feature-list li{ position:relative; padding-left:22px; margin-bottom:12px; color:var(--text-dim); font-size:.96rem; } .feature-list li::before{ content:"—"; position:absolute; left:0; color:var(--text-faint); } .side-card{ border-top:1px solid var(--border); padding:20px 0; } .side-card h3{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin-bottom:12px; font-family:var(--font-body); font-weight:600; } .tech-pills{ display:flex; flex-wrap:wrap; gap:8px 10px; } .tech-pills span{ color:var(--text-dim); font-size:.86rem; } .tech-pills span:not(:last-child)::after{ content:"·"; margin-left:10px; color:var(--text-faint); } .state-note{ font-size:.95rem; color:var(--text-dim); } .related{ border-top:1px solid var(--border); padding-top:64px; margin-top:16px; } .related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:40px; } .related-grid .pcard-cover{ aspect-ratio: 4/3; } .unconfirmed{ font-size:.85rem; color:var(--text-faint); border-top:1px dashed var(--border); padding-top:16px; margin-top:22px; } /* Real screenshots gallery */ .shot-gallery{display:grid;grid-template-columns:1fr;gap:40px;margin:24px 0 6px;} .shot{margin:0;} .shot img{display:block;width:100%;height:auto;border:1px solid var(--border-soft);} .shot figcaption{padding-top:10px;color:var(--text-faint);font-size:.85rem;line-height:1.5;} @media (min-width:760px){.shot-gallery.two{grid-template-columns:1fr 1fr;}} /* Ecosystem connection band on project pages */ .eco-band{ padding:0 0 8px; } .eco-card{ border-top:1px solid var(--border); padding-top:24px; } .eco-card .eco-eyebrow{ display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px; } .eco-card h2{ font-size:1.4rem; margin:0 0 12px; font-weight:500; } .eco-card p{ margin:0; color:var(--text-dim); line-height:1.75; max-width:74ch; } /* Ecosystem strip on home */ .eco-strip{ padding:0 0 96px; } .eco-strip-inner{ border-top:1px solid var(--border); padding-top:36px; max-width: var(--maxw-text); } .eco-strip .eco-eyebrow{ display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px; } .eco-strip h2{ font-size:clamp(1.5rem,2.6vw,1.9rem); margin:0 0 12px; font-weight:500; } .eco-strip p{ margin:0; color:var(--text-dim); line-height:1.75; } @media (max-width: 640px){ .wrap{ padding:0 22px; } section{ padding:64px 0; } } /* ============================================================ Braz AI Music Project — subpágina dedicada ============================================================ */ .music-hero{ padding:40px 0 0; border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--bg-soft),var(--bg) 60%); } .ai-badge{ display:inline-flex; align-items:center; gap:8px; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); border:1px solid var(--border); border-radius:20px; padding:6px 14px 6px 10px; margin-bottom:24px; font-weight:500; } .ai-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--pc,var(--text)); flex:none; } .ai-badge .badge-en{ color:var(--text-faint); font-weight:400; text-transform:none; letter-spacing:0; } .music-hero h1{ font-size:clamp(2.2rem,4.8vw,3.6rem); margin:.15em 0 .25em; font-weight:500; letter-spacing:-.01em; } .music-hero .sub{ font-family:var(--font-display); font-size:1.25rem; color:var(--text); margin:0 0 .6em; font-weight:500; } .music-hero .lede{ font-size:1.03rem; max-width:66ch; } .music-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin:30px 0 40px; } .music-hero-media{ aspect-ratio:21/9; overflow:hidden; border-top:1px solid var(--border); background:var(--bg-soft); } .music-hero-media img{ width:100%; height:100%; object-fit:cover; } @media (max-width:640px){ .music-hero-media{ aspect-ratio:4/3; } } /* Waveform decorative divider */ .waveform{ display:flex; align-items:flex-end; gap:3px; height:36px; margin:0 0 40px; overflow:hidden; } .waveform span{ width:3px; flex:none; background:var(--pc,var(--text)); border-radius:2px; opacity:.35; } /* Process (reuses .process-steps/.pstep) */ .pstep-tool{ display:inline-block; margin-top:10px; font-size:.74rem; color:var(--text-faint); border-top:1px solid var(--border-soft); padding-top:8px; letter-spacing:.02em; } /* Discography */ .album-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:40px; margin:8px 0 52px; } .album-cover{ aspect-ratio:1/1; overflow:hidden; border:1px solid var(--border-soft); background:var(--bg-soft); margin-bottom:16px; } .album-cover img{ width:100%; height:100%; object-fit:cover; } .album-card h3{ font-size:1.1rem; margin:0 0 4px; font-weight:500; } .album-meta{ font-size:.78rem; color:var(--text-faint); letter-spacing:.03em; text-transform:uppercase; display:block; margin-bottom:12px; } .album-desc{ font-size:.9rem; margin:0 0 14px; } .album-badge{ display:inline-block; font-size:.72rem; color:var(--text-faint); border:1px solid var(--border-soft); border-radius:20px; padding:4px 12px; margin-top:4px; } .single-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:24px; } .single-card .album-cover{ aspect-ratio:1/1; margin-bottom:10px; } .single-card h4{ font-size:.92rem; margin:0 0 2px; font-weight:500; } .placeholder-card{ border:1px dashed var(--border); border-radius:var(--radius-lg); padding:40px 24px; text-align:center; color:var(--text-faint); font-size:.9rem; line-height:1.6; } /* ---------- Tags / chips ---------- */ .tag{ display:inline-flex; align-items:center; font-size:.72rem; letter-spacing:.02em; padding:4px 12px; border-radius:20px; } .tag-accent{ background:var(--accent-soft); color:var(--accent-strong); } .tag-outline{ border:1px solid var(--accent); color:var(--accent); } .tag-neutral{ background:var(--bg-soft); color:var(--text-dim); border:1px solid var(--border-soft); } /* ---------- Contact form ---------- */ .contact-form{ display:flex; flex-direction:column; gap:16px; } .field label{ display:block; font-size:.78rem; margin-bottom:6px; color:var(--text-dim); } .input{ width:100%; min-height:42px; padding:10px 12px; font:inherit; font-size:.92rem; color:var(--text); background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-md); } .input:hover{ border-color:var(--text-faint); } .input:focus-visible{ border-color:var(--accent); outline-offset:0; } textarea.input{ min-height:110px; resize:vertical; font-family:inherit; } .form-note{ font-size:.78rem; color:var(--text-faint); margin:0; } .grid-contact{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:start; } @media (max-width:780px){ .grid-contact{ grid-template-columns:1fr; } } /* Videos */ .video-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:32px; } .video-card{ border:1px solid var(--border-soft); } .video-frame{ aspect-ratio:16/9; position:relative; background:#100d16; overflow:hidden; border-radius:var(--radius-md); } .video-facade{ position:absolute; inset:0; width:100%; height:100%; border:none; padding:0; margin:0; cursor:pointer; background:none; display:block; } .video-facade img{ width:100%; height:100%; object-fit:cover; display:block; } .video-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.05)); } .video-play span{ width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; transition:transform .2s ease; } .video-facade:hover .video-play span{ transform:scale(1.08); } .video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .video-body{ padding:18px 20px 22px; } .video-body h3{ font-size:1rem; margin:0 0 6px; font-weight:500; } .video-tools{ font-size:.78rem; color:var(--text-faint); display:block; margin-bottom:14px; } /* Platforms */ .platform-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:32px; } .platform-card{ border-top:1px solid var(--border); padding-top:22px; } .platform-card h3{ font-size:1.05rem; margin:0 0 8px; font-weight:500; } .platform-card p{ font-size:.88rem; margin:0 0 18px; } @media (max-width: 640px){ .album-grid, .video-grid, .platform-grid{ gap:24px; } }