.sgport-page{ --sgport-accent:#FBB03A; --sgport-bg:#050505; --sgport-panel:#0B0B0B; --sgport-white:#FFFFFF; --sgport-line:rgba(255,255,255,.14); } .sgport-page{ background:var(--sgport-bg); color:var(--sgport-white); font-family:Arial,Helvetica,sans-serif; overflow:hidden; } .sgport-wrap{ width:min(1180px,calc(100% - 48px)); margin:0 auto; } .sgport-hero{ min-height:620px; display:flex; align-items:center; background-color:#050505; background-size:cover; background-position:center; border-bottom:1px solid rgba(251,176,58,.22); position:relative; isolation:isolate; } .sgport-hero::after{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.48) 38%,rgba(0,0,0,.18) 72%,rgba(0,0,0,.08) 100%), linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.12)); } .sgport-kicker{ display:inline-block; color:var(--sgport-accent); font-family:Arial,Helvetica,sans-serif; font-weight:900; letter-spacing:.24em; text-transform:uppercase; font-size:13px; margin-bottom:22px; } .sgport-hero h1{ max-width:900px; margin:0 0 28px; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; opacity:1!important; font-family:Impact,'Arial Narrow','Helvetica Neue',Arial,sans-serif; font-size:clamp(72px,10vw,148px); font-weight:900; line-height:.86; letter-spacing:-.035em; text-transform:uppercase; text-shadow:none; } .sgport-hero p{ max-width:900px; margin:0; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; opacity:1!important; font-size:clamp(20px,2.3vw,30px); line-height:1.45; } .sgport-hero-line{ display:block; width:90px; height:3px; margin-top:30px; background:var(--sgport-accent); } .sgport-section{ padding:92px 0 30px; } .sgport-section-head{ max-width:860px; margin:0 0 42px; text-align:left; } .sgport-section-head h2, .sgport-cta h2{ margin:0 0 18px; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-family:Impact,'Arial Narrow','Helvetica Neue',Arial,sans-serif; font-size:clamp(42px,5.5vw,72px); font-weight:900; line-height:.94; letter-spacing:-.025em; text-transform:uppercase; } .sgport-section-head p, .sgport-cta p{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; opacity:1!important; font-size:18px; line-height:1.65; } .sgport-spotify-grid, .sgport-video-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .sgport-player-card, .sgport-video-card{ position:relative; overflow:hidden; padding:12px; background:var(--sgport-panel); border:1px solid var(--sgport-line); border-radius:5px; box-shadow:none; transition:transform .22s ease,border-color .22s ease; } .sgport-player-card:hover, .sgport-video-card:hover{ transform:translateY(-4px); border-color:var(--sgport-accent); } .sgport-player-card iframe, .sgport-video-card iframe{ display:block; width:100%; position:relative; z-index:2; } .sgport-player-card iframe{border-radius:4px!important} .sgport-video-card iframe{ aspect-ratio:16/9; height:auto; border-radius:4px; } .sgport-empty{ grid-column:1/-1; padding:28px; color:#FFFFFF!important; background:#090909; border:1px dashed rgba(251,176,58,.45); border-radius:4px; text-align:center; } .sgport-cases-section{padding-top:110px} .sgport-case{ display:grid; grid-template-columns:1.06fr .94fr; gap:38px; padding:26px; margin-bottom:26px; background:#090909; border:1px solid var(--sgport-line); border-radius:5px; box-shadow:none; position:relative; overflow:hidden; transition:transform .22s ease,border-color .22s ease; } .sgport-case:hover{ transform:translateY(-4px); border-color:var(--sgport-accent); } .sgport-case:nth-of-type(even){ grid-template-columns:.94fr 1.06fr; } .sgport-case:nth-of-type(even) .sgport-case-media{order:2} .sgport-case-media, .sgport-case-copy{ position:relative; z-index:2; } .sgport-case-photos{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; } .sgport-case-photos img, .sgport-photo-placeholder{ width:100%; height:280px; object-fit:cover; background:#111; border:1px solid rgba(255,255,255,.10); border-radius:4px; } .sgport-case-photos img{ filter:brightness(.74) contrast(1.16) saturate(.88); } .sgport-photo-placeholder{ display:flex; align-items:center; justify-content:center; color:#FFFFFF!important; } .sgport-case-embeds{ display:grid; gap:12px; min-height:0; } .sgport-case-embeds iframe{ display:block; width:100%; border-radius:4px!important; } .sgport-case-video{ width:100%; aspect-ratio:16/9; height:auto; border-radius:4px!important; } .sgport-case-copy{ display:flex; flex-direction:column; justify-content:center; padding:18px 8px; } .sgport-case-tag{ align-self:flex-start; display:inline-flex; padding:7px 10px; margin-bottom:20px; color:var(--sgport-accent)!important; background:rgba(251,176,58,.08); border:1px solid rgba(251,176,58,.34); border-radius:3px; font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; } .sgport-case-copy h3{ margin:0 0 20px; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-family:Impact,'Arial Narrow','Helvetica Neue',Arial,sans-serif; font-size:clamp(36px,4.5vw,62px); font-weight:900; line-height:.94; letter-spacing:-.025em; text-transform:uppercase; } .sgport-case-copy p{ margin:0 0 16px; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; opacity:1!important; font-size:17px; line-height:1.7; } .sgport-result{ margin-top:22px; padding:18px 20px; background:#0D0D0D; border-left:3px solid var(--sgport-accent); border-radius:0 3px 3px 0; } .sgport-result strong{ display:block; margin-bottom:8px; color:var(--sgport-accent)!important; font-size:12px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; } .sgport-result p{ margin:0; color:#FFFFFF!important; } .sgport-cta{ margin-top:70px; padding:90px 0; text-align:center; background:#0A0A0A; border-top:1px solid rgba(255,255,255,.10); } .sgport-cta p{ max-width:760px; margin:0 auto 30px; } .sgport-cta a{ display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 28px; background:var(--sgport-accent); border:1px solid var(--sgport-accent); border-radius:3px; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif; font-weight:900; text-decoration:none; text-transform:uppercase; box-shadow:none; transition:transform .2s ease,filter .2s ease; } .sgport-cta a:hover{ transform:translateY(-2px); filter:brightness(1.04); color:#FFFFFF!important; } .sgport-page p, .sgport-page li, .sgport-page span, .sgport-page small, .sgport-page strong, .sgport-page em, .sgport-page figcaption, .sgport-page blockquote{ color:#FFFFFF; } .sgport-page .sgport-kicker, .sgport-page .sgport-case-tag, .sgport-page .sgport-result strong{ color:var(--sgport-accent)!important; } @media(max-width:980px){ .sgport-spotify-grid, .sgport-video-grid{ grid-template-columns:1fr 1fr; } .sgport-case, .sgport-case:nth-of-type(even){ grid-template-columns:1fr; } .sgport-case:nth-of-type(even) .sgport-case-media{order:0} } @media(max-width:640px){ .sgport-wrap{ width:min(100% - 28px,1180px); } .sgport-hero{ min-height:500px; } .sgport-hero h1{ font-size:clamp(40px,13.5vw,72px); } .sgport-hero p{ font-size:19px; } .sgport-spotify-grid, .sgport-video-grid, .sgport-case-photos{ grid-template-columns:1fr; } .sgport-section{ padding-top:68px; } .sgport-case{ padding:16px; } .sgport-case-photos img, .sgport-photo-placeholder{ height:230px; } } .sgport-genre-filters{ display:flex; flex-wrap:wrap; gap:10px; margin:-14px 0 28px; } .sgport-genre-filter{ appearance:none; min-height:40px; padding:0 16px; border:1px solid rgba(255,255,255,.20); border-radius:3px; background:#090909; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease; } .sgport-genre-filter:hover{ transform:translateY(-1px); border-color:#FBB03A; } .sgport-genre-filter.is-active{ background:#FBB03A; border-color:#FBB03A; color:#FFFFFF!important; } .sgport-player-card[hidden]{ display:none!important; } .sgport-player-meta{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; min-height:48px; padding:4px 2px 12px; } .sgport-player-meta > div{ min-width:0; } .sgport-player-meta strong, .sgport-player-meta span{ display:block; color:#FFFFFF!important; } .sgport-player-meta strong{ font-size:15px; line-height:1.25; } .sgport-player-meta > div span{ margin-top:4px; font-size:13px; } .sgport-player-genre{ flex:0 0 auto; padding:6px 8px; border:1px solid rgba(251,176,58,.40); border-radius:3px; color:#FBB03A!important; font-size:10px!important; font-weight:900; letter-spacing:.10em; text-transform:uppercase; } @media (max-width:700px){ .sgport-genre-filters{gap:8px} .sgport-genre-filter{min-height:38px;padding:0 13px;font-size:11px} } .sgport-pagination{ display:flex; justify-content:center; align-items:center; gap:10px; margin:34px 0 8px; } .sgport-pagination[hidden]{ display:none!important; } .sgport-page-numbers{ display:flex; align-items:center; gap:8px; } .sgport-page-arrow, .sgport-page-number{ appearance:none; display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; border:1px solid rgba(255,255,255,.28); border-radius:3px; background:#090909; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif; font-size:15px; font-weight:900; cursor:pointer; transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease,opacity .18s ease; } .sgport-page-arrow{ min-width:48px; font-size:30px; line-height:1; } .sgport-page-arrow:hover:not(:disabled), .sgport-page-number:hover{ transform:translateY(-1px); border-color:#FBB03A; } .sgport-page-number.is-active{ background:#FBB03A; border-color:#FBB03A; color:#FFFFFF!important; } .sgport-page-arrow:disabled{ opacity:.35; cursor:not-allowed; } @media(max-width:700px){ .sgport-pagination{gap:7px;margin-top:26px} .sgport-page-numbers{gap:6px} .sgport-page-arrow, .sgport-page-number{min-width:38px;height:38px;padding:0 9px} .sgport-page-arrow{min-width:42px;font-size:27px} } .sgport-cta-actions{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; } .sgport-cta .sgport-cta-primary, .sgport-cta .sgport-cta-secondary{ min-width:260px; } .sgport-cta .sgport-cta-secondary{ background:transparent; border-color:#FBB03A; color:#FFFFFF!important; } .sgport-cta .sgport-cta-secondary:hover{ background:#FBB03A; color:#FFFFFF!important; } @media(max-width:640px){ .sgport-cta-actions{ flex-direction:column; align-items:stretch; } .sgport-cta .sgport-cta-primary, .sgport-cta .sgport-cta-secondary{ width:100%; min-width:0; } }
@media(max-width:640px){.sgport-section-head h2,.sgport-cta h2{font-size:clamp(30px,9vw,42px);overflow-wrap:anywhere}.sgport-case-copy h3{font-size:clamp(28px,8vw,36px);overflow-wrap:anywhere}.sgport-pagination,.sgport-page-numbers{flex-wrap:wrap}.sgport-page-numbers{justify-content:center}.sgport-player-meta{flex-wrap:wrap}.sgport-player-meta strong,.sgport-player-meta span{overflow-wrap:anywhere}}