/* ========================================================== Homepage v30 (FINAL_JB_Site5.psb) - homepage only - Trump Int'l Golf Club + Lab Stripping side-by-side band - Headline: FROM THE COURT ROOM TO STRIPPING IN THE LABORATORY. Design canvas: 1366 x 374 ========================================================== */ .ryan-cancer .court-lab-band { box-sizing: border-box; position: relative; left: 50%; transform: translateX(-50%); width: 100vw; aspect-ratio: 1366 / 374; margin: 0; background: #000 url("../images/cancer-study/court-lab-band.jpg") center / 100% 100% no-repeat; font-family: "Inter", Arial, Helvetica, sans-serif; text-align: center; } .ryan-cancer .cl-trump { position: absolute; left: 0; top: 0; width: 50%; height: 100%; } .ryan-cancer .cl-text { position: absolute; left: 15.4%; width: 74.1%; top: 23.5%; /* 105..611px of 1366, text starts at y 400 */ } .ryan-cancer .court-lab-band .t-line { font-size: clamp(11px, 1.333vw, 24px) !important; line-height: 1.3 !important; letter-spacing: .02em !important; } .ryan-cancer .court-lab-band .t-logo { width: 100% !important; max-width: none !important; margin: .85vw auto .9vw !important; } .ryan-cancer .cl-lab { display: none; } .ryan-cancer .court-lab-band::after { content: ""; position: absolute; top: 0; bottom: 0; left: 53.9%; width: 1px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55) 20%, rgba(255,255,255,.55) 80%, rgba(255,255,255,0)); transform: skewX(-11.8deg); transform-origin: top; } .ryan-cancer .as-seen-on + .jb-hr + .court-lab-band { margin-top: 0; } /* Phones: Trump block on top, Lab Stripping artwork underneath */ @media (max-width: 700px) { .ryan-cancer .court-lab-band { aspect-ratio: auto; background: #000; } .ryan-cancer .cl-trump { position: relative; width: 100%; height: auto; padding: 34px 16px 30px; box-sizing: border-box; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45)), url("../images/cancer-study/court-lab-band-trump.jpg") 30% center / cover no-repeat; } .ryan-cancer .cl-text { position: static; width: auto; } .ryan-cancer .court-lab-band .t-line { font-size: 15px !important; } .ryan-cancer .court-lab-band .t-logo { width: min(330px, 92%) !important; margin: 10px auto 8px !important; } .ryan-cancer .cl-lab { display: block; width: 100%; height: auto; } .ryan-cancer .court-lab-band::after { display: none; } } /* Headline: two lines, side rules aligned with the first line */ .ryan-cancer .watch-trial .jb-rule-title.two-line > span { font-size: clamp(14px, 1.87vw, 25.5px) !important; line-height: 1.25 !important; letter-spacing: 0 !important; } .ryan-cancer .jb-rule-title.two-line .pink { color: #f71e87; } .ryan-cancer .court-lab-band + .watch-trial { margin-top: -1.55vw; position: relative; z-index: 2; } .ryan-cancer .watch-trial .jb-rule-title.two-line { margin-bottom: clamp(12px, .85vw, 14px) !important; } .ryan-cancer .watch-trial .jb-rule-title.two-line > span { background: transparent !important; } .ryan-cancer .jb-rule-title.two-line::before { background: none !important; } .ryan-cancer .jb-rule-title.two-line { display: flex !important; align-items: flex-start; gap: 14px; } .ryan-cancer .jb-rule-title.two-line::before, .ryan-cancer .jb-rule-title.two-line::after { content: ""; position: static !important; display: block; flex: 1 1 0; min-width: 20px; height: 1px; margin-top: .62em; font-size: clamp(14px, 1.87vw, 25.5px); } .ryan-cancer .jb-rule-title.two-line::before { background: linear-gradient(90deg, #e83e8c, #b25aa8) !important; } .ryan-cancer .jb-rule-title.two-line::after { background: linear-gradient(90deg, #6f8fc4, #2fc3d2) !important; } .ryan-cancer .jb-rule-title.two-line > span { flex: 0 0 auto; } @media (max-width: 700px) { .ryan-cancer .court-lab-band + .watch-trial { margin-top: 18px; } .ryan-cancer .jb-rule-title.two-line::before, .ryan-cancer .jb-rule-title.two-line::after { display: none !important; } .ryan-cancer .jb-rule-title.two-line { display: block !important; } .ryan-cancer .watch-trial .jb-rule-title.two-line > span { display: block !important; white-space: normal !important; font-size: 15px !important; line-height: 1.35 !important; } .ryan-cancer .watch-trial .jb-rule-title.two-line > span { padding: 0 6px; } } /* ========================================================== Phones only (max 700px): homepage sequence 1 As Seen in the Film 2 Trump International 3 Short Trial Film (video) 4 From the court room... headline 5 Lab Stripping artwork 6 The Short Film (video) Desktop/tablet layout is unchanged. ========================================================== */ @media (max-width: 700px) { .ryan-cancer header.avastin-intro { display: flex !important; flex-direction: column; } .ryan-cancer header.avastin-intro > * { order: 20; } .ryan-cancer header.avastin-intro .court-lab-band, .ryan-cancer header.avastin-intro .watch-trial, .ryan-cancer header.avastin-intro .watch-trial .videos { display: contents !important; } .ryan-cancer header.avastin-intro > .as-seen-on { order: 1; } .ryan-cancer header.avastin-intro > .as-seen-on + .jb-hr { order: 2; } .ryan-cancer header.avastin-intro .cl-trump { order: 3; } .ryan-cancer header.avastin-intro .video-card:nth-child(1) { order: 4; } .ryan-cancer header.avastin-intro .watch-trial .jb-rule-title { order: 5; } .ryan-cancer header.avastin-intro .cl-lab { order: 6; } .ryan-cancer header.avastin-intro .video-card:nth-child(2) { order: 7; } /* full-width pieces (the wrappers no longer give them full width) */ .ryan-cancer header.avastin-intro .cl-trump, .ryan-cancer header.avastin-intro .cl-lab { box-sizing: border-box; position: relative; left: 50%; transform: translateX(-50%); width: 100vw !important; max-width: none; } .ryan-cancer header.avastin-intro .video-card:nth-child(1) { margin-top: 22px; } .ryan-cancer header.avastin-intro .watch-trial .jb-rule-title { margin: 30px 0 16px !important; } .ryan-cancer header.avastin-intro .video-card:nth-child(2) { margin-top: 18px; margin-bottom: 34px; } }