/* ============================================================ AT UNION — DESIGN LAB OPTION C : "MODERN RUGBY TALENT HOUSE" Dark charcoal base / electric green accent / condensed display ============================================================ */ :root{ --ink: #0E0F11; /* base near-black charcoal */ --ink-deep: #060708; /* spec panel / deepest wells */ --card: #16181C; /* card surface */ --raised: #1C1F24; /* raised surface / inputs */ --line: #2C3037; /* hairlines */ --text: #F2F3F5; /* primary text (17.3:1 on --ink) */ --muted: #B9BEC7; /* secondary text (10.3:1 on --ink) */ --green-core: #427040; /* brand green — fills/borders/large only */ --green: #74CC6F; /* derived electric green (9.7:1 on ink) */ --blue-core: #153383; /* brand royal blue — fill w/ white text */ --blue: #8FA3E8; /* derived light blue accent (7.8:1) */ } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--ink); color:var(--text); font-family:'Barlow',Arial,sans-serif; font-size:17px;line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,video{display:block;max-width:100%} a{color:var(--green)} .wrap{max-width:1280px;margin:0 auto;padding:0 32px} .skip{position:absolute;left:-999px;top:0;background:var(--green);color:var(--ink);padding:10px 18px;font-weight:700;z-index:200} .skip:focus{left:0} /* ---------- type scale ---------- */ .display{font-family:'Archivo Black',sans-serif;text-transform:uppercase;line-height:.95;letter-spacing:-.01em} .kicker{ font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase; letter-spacing:.32em;font-size:14px;color:var(--green);display:flex;align-items:center;gap:14px; } .kicker::before{content:"";width:34px;height:3px;background:var(--green-core)} .sec-index{ font-family:'Barlow Condensed',sans-serif;font-weight:700; font-size:clamp(90px,12vw,170px);line-height:.8; color:transparent;-webkit-text-stroke:1.5px rgba(242,243,245,.16); user-select:none;pointer-events:none; } .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px;flex-wrap:wrap} .sec-head h2{font-size:clamp(34px,4.6vw,62px)} .sec-head .kicker{margin-bottom:14px} /* ---------- buttons : blocky, uppercase, aggressive ---------- */ .btn{ display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700; text-transform:uppercase;letter-spacing:.14em;font-size:17px;text-decoration:none; padding:16px 34px;border:2px solid transparent;cursor:pointer; transition:transform .12s ease,background .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--green);color:var(--ink)} .btn-primary:hover,.btn-primary:focus{background:var(--text);color:var(--ink);box-shadow:0 0 0 3px var(--green-core)} .btn-secondary{background:transparent;color:var(--text);border-color:var(--text)} .btn-secondary:hover,.btn-secondary:focus{background:var(--green);border-color:var(--green);color:var(--ink)} .btn-ghost{background:transparent;color:var(--green);border-color:var(--green-core)} .btn-ghost:hover,.btn-ghost:focus{border-color:var(--green);background:rgba(116,204,111,.12)} /* ---------- header ---------- */ header{ position:sticky;top:0;z-index:100; background:rgba(14,15,17,.94);backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .nav-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 32px;max-width:1380px;margin:0 auto} .logo img{height:40px;width:auto} .nav-links{display:flex;align-items:center;gap:28px;list-style:none} .nav-links a:not(.btn){ font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase; letter-spacing:.16em;font-size:15px;color:var(--text);text-decoration:none; padding:6px 0;border-bottom:3px solid transparent; } .nav-links a:not(.btn):hover,.nav-links a:not(.btn):focus{color:var(--green);border-bottom-color:var(--green)} .nav-links .btn{padding:11px 22px;font-size:15px} #nav-check{position:absolute;opacity:0;width:0;height:0} .nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border:1px solid var(--line)} .nav-burger span{display:block;width:24px;height:3px;background:var(--text);transition:transform .2s,opacity .2s} @media (max-width:980px){ .nav-burger{display:flex} .nav-links{ position:fixed;inset:73px 0 auto 0;flex-direction:column;align-items:stretch;gap:0; background:var(--ink-deep);border-bottom:3px solid var(--green-core); max-height:0;overflow:hidden;transition:max-height .25s ease; } .nav-links li{border-top:1px solid var(--line)} .nav-links a:not(.btn){display:block;padding:16px 32px;border-bottom:none;font-size:18px} .nav-links .btn{margin:16px 32px 22px} #nav-check:checked ~ .nav-links{max-height:520px} #nav-check:checked ~ .nav-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)} #nav-check:checked ~ .nav-burger span:nth-child(2){opacity:0} #nav-check:checked ~ .nav-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} } /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)} .hero-bg-word{ position:absolute;top:30px;left:-10px;font-family:'Archivo Black',sans-serif; font-size:clamp(120px,22vw,330px);line-height:1;text-transform:uppercase; color:transparent;-webkit-text-stroke:1px rgba(242,243,245,.07);white-space:nowrap; user-select:none;pointer-events:none; } .hero-slash{ position:absolute;top:0;right:-12%;width:54%;height:100%; background:linear-gradient(160deg,var(--green-core) 0%,#2c4d2b 60%,rgba(21,51,131,.55) 100%); transform:skewX(-12deg);opacity:.5; } .hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;align-items:end;padding-top:72px} .hero-copy{padding-bottom:96px} .hero-copy h1{font-size:clamp(42px,6.2vw,92px);margin:26px 0 24px} .hero-copy h1 .gl{color:var(--green)} .hero-copy p{max-width:560px;color:var(--muted);font-size:18px} .hero-ctas{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap} .hero-figure{position:relative;min-height:420px} .hero-figure img{ position:absolute;bottom:0;right:0;width:min(100%,520px); filter:drop-shadow(0 30px 50px rgba(0,0,0,.65)); } .hero-num{ position:absolute;bottom:-30px;right:8%; font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(160px,20vw,300px); line-height:1;color:transparent;-webkit-text-stroke:2px rgba(116,204,111,.35); user-select:none;pointer-events:none; } /* about-us hero: the Eben (Sharks) crop is wider/shorter than the others, so at the default width he reads small. Scale him up so he towers like the specimen he is — scoped to this page's hero only (GOO-128), other pages unaffected. */ .hero-figure img.hero-xl{width:660px;max-width:none} @media (max-width:980px){ .hero-figure img.hero-xl{width:min(100%,470px);max-width:100%} } /* trust strip (scoreboard) */ .trust-strip{position:relative;background:var(--ink-deep);border-top:3px solid var(--green-core);clip-path:polygon(0 0,100% 24px,100% 100%,0 100%);margin-top:-24px} .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)} .trust-cell{background:var(--ink-deep);padding:36px 32px 32px;text-align:left} .trust-cell .big{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(38px,4.4vw,58px);line-height:1;color:var(--green);letter-spacing:.02em} .trust-cell .lbl{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:13px;color:var(--muted);margin-top:10px;line-height:1.5} /* ---------- sections shared ---------- */ section{padding:96px 0} .sec-rule{border:none;border-top:1px solid var(--line)} /* ---------- films ---------- */ .films{background:linear-gradient(180deg,var(--ink) 0%,#101319 100%)} .films-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:24px} .film{position:relative;background:var(--card);border:1px solid var(--line);overflow:hidden} .film video{width:100%;height:100%;object-fit:cover} .film-tall{grid-row:span 2;aspect-ratio:9/16;max-height:760px} .film-wide{aspect-ratio:16/9} .film-tag{ position:absolute;top:0;left:0;z-index:2;background:var(--green);color:var(--ink); font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase; letter-spacing:.16em;font-size:13px;padding:7px 16px; } .film-play{ position:absolute;inset:0;z-index:3;width:100%;height:100%; background:rgba(14,15,17,.34);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background .15s ease; } .film-play:hover,.film-play:focus{background:rgba(14,15,17,.18)} .film-play .tri{ width:78px;height:78px;background:var(--green);clip-path:polygon(8px 8px,8px 70px,70px 39px); transition:transform .15s ease; } .film-play:hover .tri{transform:scale(1.08)} .film.playing .film-play{background:transparent} .film.playing .film-play .tri{opacity:0} .film.playing .film-play:hover .tri,.film.playing .film-play:focus .tri{opacity:1;clip-path:polygon(14px 12px,30px 12px,30px 66px,14px 66px);background:var(--text)} /* ---------- roster wall ---------- */ .roster{position:relative} .roster-cats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px} .cat-chip{ font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase; letter-spacing:.16em;font-size:14px;padding:10px 22px;border:2px solid var(--line);color:var(--muted); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); } .cat-chip.on{border-color:var(--green);color:var(--green)} .roster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .pcard{ position:relative;background:linear-gradient(180deg,var(--raised) 0%,var(--card) 70%); border:1px solid var(--line);overflow:hidden; clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%); transition:transform .15s ease,border-color .15s ease; } .pcard:hover{transform:translateY(-6px);border-color:var(--green-core)} .pcard .ph{aspect-ratio:3/4;overflow:hidden;position:relative;background:radial-gradient(120% 90% at 50% 10%,#23272e 0%,var(--card) 70%)} .pcard .ph img{width:100%;height:100%;object-fit:cover;object-position:top center} .pcard .idx{ position:absolute;top:6px;left:12px;z-index:2;font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(242,243,245,.4); } .pcard .meta{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-top:3px solid var(--green-core);background:var(--ink-deep)} .pcard .tag{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:var(--green)} .pcard .tag.blue{color:var(--blue)} .pcard .dot{width:8px;height:8px;background:var(--green-core)} .roster-note{margin-top:28px;color:var(--muted);font-size:15px} /* ---------- services ---------- */ .services{background:#101319;clip-path:polygon(0 56px,100% 0,100% 100%,0 100%);padding-top:150px} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .svc{ background:var(--card);border:1px solid var(--line);padding:34px 30px 38px;position:relative;overflow:hidden; transition:border-color .15s ease,transform .15s ease; } .svc:hover{border-color:var(--green-core);transform:translateY(-4px)} .svc .n{ font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:76px;line-height:1; color:transparent;-webkit-text-stroke:1.5px var(--green);display:block;margin-bottom:18px; } .svc h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:27px;margin-bottom:14px;line-height:1.1} .svc p{color:var(--muted);font-size:16px} .svc::after{content:"";position:absolute;right:-14px;bottom:-14px;width:48px;height:48px;background:var(--green-core);transform:rotate(45deg);opacity:0;transition:opacity .15s ease} .svc:hover::after{opacity:1} /* ---------- agency / trust ---------- */ .agency-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center} .agency-copy p{color:var(--muted);margin-bottom:20px;font-size:17px} .agency-copy p strong{color:var(--text)} .agency-img{position:relative} .agency-img img{width:100%;border:1px solid var(--line);clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),calc(100% - 34px) 100%,0 100%)} .agency-img::before{content:"";position:absolute;top:-18px;left:-18px;width:120px;height:120px;border-top:4px solid var(--green-core);border-left:4px solid var(--green-core)} .cred-band{ margin-top:72px;background:var(--blue-core); clip-path:polygon(0 0,100% 18px,100% 100%,0 calc(100% - 18px)); padding:46px 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px; } .cred-band .c .big{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:42px;line-height:1;color:#FFFFFF} .cred-band .c .lbl{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:13px;color:#FFFFFF;opacity:1;margin-top:8px;line-height:1.5} .tbc-slot{ margin-top:24px;border:2px dashed var(--line);padding:36px 32px;text-align:center; } .tbc-slot .t{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:15px;color:var(--muted)} .tbc-logos{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:22px} .tbc-logos span{width:110px;height:44px;background:var(--card);border:1px solid var(--line)} /* ---------- contact ---------- */ .contact{background:linear-gradient(180deg,#101319 0%,var(--ink) 100%);border-top:1px solid var(--line)} .contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start} .contact-copy h2{font-size:clamp(36px,4.6vw,60px);margin:24px 0} .contact-copy p{color:var(--muted);max-width:480px} .form-card{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--green-core);padding:40px} .form-card label{ display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase; letter-spacing:.18em;font-size:13px;color:var(--muted);margin:22px 0 8px; } .form-card label:first-of-type{margin-top:0} .form-card input,.form-card textarea{ width:100%;background:var(--raised);border:1px solid var(--line);color:var(--text); font-family:'Barlow',sans-serif;font-size:17px;padding:14px 16px; } .form-card input:focus,.form-card textarea:focus{outline:2px solid var(--green);outline-offset:0;border-color:var(--green)} .form-card textarea{min-height:140px;resize:vertical} .form-card .btn{margin-top:28px;width:100%;text-align:center} .form-note{margin-top:14px;font-size:14px;color:var(--muted);text-align:center} .form-note::before{content:"\26A0\FE0E ";color:var(--green)} /* ---------- footer ---------- */ footer{background:var(--ink-deep);border-top:3px solid var(--green-core);padding:72px 0 40px} .foot-grid{display:grid;grid-template-columns:1.2fr 2fr;gap:56px} .foot-brand img{height:44px;width:auto;margin-bottom:18px} .foot-brand p{color:var(--muted);font-size:15px;max-width:300px} .team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 32px} .tm .nm{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:19px} .tm .rl{color:var(--green);font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:13px;margin:2px 0 6px} .tm .ct{color:var(--muted);font-size:15px;line-height:1.55} .tm .ct a{color:var(--muted);text-decoration:underline} .tm .ct a:hover{color:var(--green)} .foot-base{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:56px;padding-top:28px} .foot-base p,.foot-base a{color:var(--muted);font-size:14px} .foot-base a{text-decoration:underline} .socials{display:flex;align-items:center;gap:10px} .socials span.sq{width:34px;height:34px;border:1px solid var(--line);background:var(--card)} .socials .lbl{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--muted)} /* ---------- spec panel ---------- */ .spec{background:var(--ink-deep);border-top:6px solid var(--green);padding:72px 0 88px} .spec h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.3em;font-size:22px;color:var(--green);margin-bottom:8px} .spec .sub{color:var(--muted);margin-bottom:48px;font-size:15px} .spec h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:16px;color:var(--text);margin:44px 0 18px;border-bottom:1px solid var(--line);padding-bottom:10px} .swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px} .sw{border:1px solid var(--line)} .sw .c{height:64px} .sw .i{padding:10px 12px;background:var(--card);font-size:13px;color:var(--muted);line-height:1.5} .sw .i b{color:var(--text);display:block;font-family:'Barlow Condensed',sans-serif;letter-spacing:.06em;text-transform:uppercase} .type-demo{display:grid;gap:18px} .type-demo .row{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;border-bottom:1px dashed var(--line);padding-bottom:16px} .type-demo .who{min-width:240px;font-size:13px;color:var(--muted)} .btn-demo{display:flex;gap:18px;flex-wrap:wrap;align-items:center} .spec p.body{color:var(--muted);max-width:880px;font-size:16px} /* ---------- responsive ---------- */ @media (max-width:1100px){ .roster-grid{grid-template-columns:repeat(3,1fr)} .svc-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:920px){ section{padding:72px 0} .hero-grid{grid-template-columns:1fr;align-items:start} .hero-copy{padding-bottom:24px} .hero-figure{min-height:340px;margin-top:-10px} .hero-figure img{position:relative;margin:0 auto;width:min(100%,420px)} .hero-num{display:none} .films-grid{grid-template-columns:1fr} .film-tall{grid-row:auto;max-width:420px;margin:0 auto;width:100%} .agency-grid,.contact-grid,.foot-grid{grid-template-columns:1fr} .trust-grid,.cred-band{grid-template-columns:1fr;gap:24px} .trust-grid{gap:1px} } @media (max-width:680px){ .wrap{padding:0 20px} .nav-bar{padding:14px 20px} .roster-grid{grid-template-columns:repeat(2,1fr);gap:12px} .svc-grid{grid-template-columns:1fr} .team-grid{grid-template-columns:1fr} .pcard .idx{font-size:44px} .form-card{padding:28px 22px} .cred-band{padding:36px 24px} .sec-index{font-size:84px} } /* Mobile overflow hardening (GOO-128 Kendra-review prep): force footer + team grids to a single column on phones so no card is pushed past the viewport edge, and guard the root against any decorative bleed. Content-preserving (nothing is clipped). */ @media (max-width:680px){ .foot-grid{grid-template-columns:1fr !important} .team-grid{grid-template-columns:1fr !important} .contact-grid{grid-template-columns:1fr !important} } html{overflow-x:hidden} /* ===== Kendra finalisation additions (2026-06-22) ===== */ /* Named cards: player name in the meta bar (white, not the green category tag) */ .tag.nm{color:var(--text);font-size:14px;letter-spacing:.03em;line-height:1.15} /* Springbok home roster — smaller cards, more per row */ .roster-grid.sb{grid-template-columns:repeat(6,1fr);gap:14px} .roster-grid.sb .pcard{clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)} .roster-grid.sb .meta{padding:10px 12px} .roster-grid.sb .tag.nm{font-size:13px} /* Media — Reels & Videos */ .vid-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-auto-rows:minmax(150px,1fr);gap:16px} .vcard{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px; background:linear-gradient(180deg,var(--raised) 0%,var(--card) 70%);border:1px solid var(--line); min-height:220px;overflow:hidden;text-decoration:none;color:var(--text);transition:transform .15s ease,border-color .15s ease} .vcard:hover{transform:translateY(-4px);border-color:var(--green-core)} .vcard.yt{grid-row:span 2} .vthumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5} .vplay{position:absolute;inset:0;width:100%;height:100%;background:rgba(14,15,17,.32);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center} .vplay:hover,.vplay:focus{background:rgba(14,15,17,.18)} .vplay .tri{width:72px;height:72px;background:var(--green);clip-path:polygon(8px 8px,8px 64px,64px 36px);transition:transform .15s ease} .vplay:hover .tri{transform:scale(1.08)} .vcard.playing iframe{width:100%;height:100%;min-height:320px;border:0;display:block} .vcard.ig{padding:24px;text-align:center} .ig-ico{color:var(--green)} .ig-cap{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:18px} .vbadge{position:absolute;top:12px;left:12px;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--ink);background:var(--green);padding:4px 10px;z-index:3} .vbadge.ig{background:transparent;color:var(--green);left:auto;right:12px;border:1px solid var(--green-core)} /* Footer real Instagram link (replaces TBC placeholder) */ .socials a.ig-link{display:inline-flex;align-items:center;gap:9px;color:var(--muted);text-decoration:none; font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:15px} .socials a.ig-link:hover{color:var(--green)} .socials a.ig-link svg{color:var(--green);flex:none} @media (max-width:1024px){ .roster-grid.sb{grid-template-columns:repeat(4,1fr)} .vid-grid{grid-template-columns:1fr 1fr} .vcard.yt{grid-row:span 1;aspect-ratio:16/9;min-height:0} } @media (max-width:680px){ .roster-grid.sb{grid-template-columns:repeat(3,1fr);gap:10px} /* Long Springbok names (e.g. "Sacha Feinberg-Mngomezulu") were breaking at the hyphen on narrow cards. Shrink slightly + suppress hyphen-break so the surname stays intact and wraps at the space instead. */ .roster-grid.sb .tag.nm{font-size:11px;letter-spacing:.01em;hyphens:none;text-wrap:balance} .vid-grid{grid-template-columns:1fr} .vcard.yt{grid-column:auto} } @media (max-width:430px){ .roster-grid.sb{grid-template-columns:repeat(2,1fr)} } /* Native video modules (media page) */ .nvid-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start} .nvid{margin:0;border:1px solid var(--line);background:var(--card);overflow:hidden; clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%); transition:border-color .15s ease} .nvid:hover{border-color:var(--green-core)} .nvid video{width:100%;display:block;background:#000;aspect-ratio:16/9;object-fit:contain} .nvid.tall video{aspect-ratio:9/16;max-height:600px;margin:0 auto} .nvid.wide{grid-column:span 2} .nvid figcaption{padding:13px 16px;border-top:3px solid var(--green-core);background:var(--ink-deep)} @media (max-width:680px){ .nvid-grid{grid-template-columns:1fr} .nvid.wide{grid-column:auto} } /* Home: Media & Brand Partnerships teaser cards (link to Media page) */ .part-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .part-card{position:relative;display:block;border:1px solid var(--line);overflow:hidden;text-decoration:none; clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);transition:transform .15s ease,border-color .15s ease} .part-card:hover{transform:translateY(-4px);border-color:var(--green-core)} .part-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .part-cap{position:absolute;left:0;bottom:0;width:100%;padding:12px 16px;background:linear-gradient(180deg,transparent,rgba(8,10,12,.9)); color:var(--text);font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:15px} @media (max-width:680px){.part-grid{grid-template-columns:1fr}} /* Cloudflare Stream player modules (media page) */ .svid-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start} .svid{margin:0;border:1px solid var(--line);background:#000;overflow:hidden; clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);transition:border-color .15s ease} .svid:hover{border-color:var(--green-core)} /* Unified square cards so every video tile is the same size regardless of the source clip's orientation (GOO-128: Kendra wanted size-consistent video cards). The Stream player / native