/* ======================================================= */ /* 1. CUSTOM CURSORS (Eyeballs & Orange Dot Fallback) */ /* ======================================================= */ /* Default Site Cursor: Orange Dot -> Native Auto */ html, body, *, [id], .page, .page-content, .thumbnail, img { cursor: url("data:image/svg+xml;charset=utf8,") 8 8, auto !important; } /* Outlined Orange Dot for Orange Backgrounds (Footer) */ .studio-footer, .studio-footer * { cursor: url("data:image/svg+xml;charset=utf8,") 8 8, auto !important; } /* Interactive Hover Cursor: Native Eyeball Emoji -> Orange Dot -> Native Pointer */ /* (The asterisks ensure inner shapes like SVG icons also get the eyeballs) */ a, button, [onclick], [role='button'], .cta-button, .social-icon-link, .thumbnail.linked, .footer-large-text, a *, button *, [onclick] *, [role='button'] *, .cta-button *, .social-icon-link *, .thumbnail.linked *, .footer-large-text * { cursor: url("data:image/svg+xml;charset=utf8,") 16 16, url("data:image/svg+xml;charset=utf8,") 8 8, pointer !important; } /* ======================================================= */ /* 2. CARGO VARIABLES & BASE STYLES */ /* ======================================================= */ html { --mobile-scale: 1; --mobile-padding-offset: 0.29; } body { --swatch-1: rgba(0, 0, 0, 0.85); --swatch-2: rgba(0, 0, 0, 0.75); --swatch-3: rgba(0, 0, 0, 0.6); --swatch-4: rgba(0, 0, 0, 0.4); --swatch-5: rgba(0, 0, 0, 0.25); --swatch-6: #FF6B00; --swatch-7: rgba(255, 107, 0, 0.85); text-align: center !important; overflow-y: scroll !important; overflow-x: hidden !important; } a:active, .linked:active, .zoomable::part(media):active { opacity: 0.7; } .page a.active { color: rgba(0, 0, 0, 0.4); } sub { position: relative; vertical-align: baseline; top: 0.3em; } sup { position: relative; vertical-align: baseline; top: -0.4em; } .small-caps { font-variant: small-caps; text-transform: lowercase; } ol { margin: 0; padding: 0 0 0 2.5em; } ul { margin: 0; padding: 0 0 0 2.0em; } ul.lineated { margin: 0; padding: 0; list-style-type: none; margin: 0 0 0 3em; text-indent: -3em; } blockquote { margin: 0; padding: 0 0 0 2em; } hr { background: rgba(0, 0, 0, 0.75); border: 0; height: 1px; display: block; } .content { border-color: rgba(0,0,0,.85); } /* ======================================================= */ /* 3. TYPOGRAPHY & CUSTOM CLASSES */ /* ======================================================= */ /* --- FIX: Kills Cargo's default

margins that cause invisible gaps --- */ .project-header p, .project-type p, .mid-project-name p, .project-body p, .awards-body p { margin: 0 !important; padding: 0 !important; } bodycopy { font-size: 1.55rem; font-weight: 400; color: rgba(0, 0, 0, 0.85); font-family: "Diatype Variable"; line-height: 1.4; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; } bodycopy a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } h1 { font-family: 'Arial Black', Arial, sans-serif; font-weight: 900; margin: 0; font-size: 32.20rem; line-height: 0.5; color: rgba(0, 0, 0, 0.85); letter-spacing: -0.051em; } .mobile h1 { font-size: 8.15rem; } h1 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } h2 { font-family: "Diatype Variable"; font-weight: 700; margin: 0; color: rgba(0, 0, 0, 0.75); font-size: 1.70rem; line-height: 1.6; font-variation-settings: 'slnt' 0, 'MONO' 0; } .mobile h2 { font-size: 2.50rem; } h2 a { color: rgba(0, 0, 0, 0.75); text-decoration: none; } .caption { font-size: 1.40rem; font-weight: 700; color: rgba(0, 0, 0, 0); font-family: "ROM Variable"; line-height: 0.5; display: block; font-variation-settings: 'slnt' 0; } .mobile .caption { font-size: 0.50rem; } .caption a { color: rgba(0, 0, 0, 0); text-decoration: none; } /* Custom Site Texts */ .about-me-headline { font-size: 1.40rem; font-weight: 500; color: #FF6B00; font-family: "EB Garamond"; line-height: 0.8; display: block; } .marque { font-size: 1.55rem; color: #ff6b00; font-family: "VCR OSD Mono"; line-height: 0.9; letter-spacing: 0.032em; display: block; } .about-body { font-size: 1.65rem; font-family: "Diatype Variable"; line-height: 1.15; display: block; } .contact-header { font-size: 1.55rem; font-weight: 600; font-family: "IBM Plex Mono"; line-height: 0.5; display: block; } .contact-body { font-size: 1.35rem; font-family: "IBM Plex Mono"; line-height: 0.5; display: block; } .awards-header { font-size: 1.55rem; font-weight: 700; color: rgba(0, 0, 0, 0.5); font-family: "Diatype Variable"; line-height: 1.4; display: block; } .awards-body { font-size: 0.95rem; color: #0c0101; font-family: "Diatype Variable"; line-height: 1.4; display: block; } .mobile .awards-body { font-size: 1rem; } .footer-connect-button { font-size: 1.90rem; font-weight: 700; font-family: "Neue Haas Grotesk"; line-height: 0.5; display: block; } .nav { font-size: 1.20rem; color: rgba(255, 255, 255, 0.85); font-family: "Favorit Variable"; line-height: 1.4; display: block; } .name-about { font-size: 1.40rem; font-weight: 300; font-family: "Diatype Variable"; line-height: 1.4; display: block; } .project-name { font-size: 1.55rem; font-weight: 800; font-family: "Diatype Variable"; line-height: 1.4; display: block; } .project-type { font-size: 1.55rem; font-weight: 300; font-family: "Diatype Variable"; line-height: 1.4; display: block; font-variation-settings: 'slnt' -12, 'MONO' 0; } .mid-project-name { font-size: 1.65rem; font-weight: 800; font-family: "Monument Grotesk Variable"; line-height: 1.05; display: block; } .project-body { font-size: 1.10rem; font-family: HelveticaNeue-Light, Helvetica Neue Light; line-height: 1.65; display: block; margin-top: 0 !important; } .mobile .project-body { font-size: 1.45rem; } .timeline { font-size: 0.80rem; font-weight: 200; font-family: "Diatype Variable"; line-height: 1.4; display: block; } .award-body-light { font-size: 0.95rem; font-weight: 300; font-family: "Diatype Variable"; line-height: 1.4; display: block; } .archieved-work { font-size: 1.55rem; font-family: "Diatype Variable"; line-height: 1.4; display: block; } .about-body-new { font-size: 1.00rem; font-family: "Diatype Variable"; line-height: 1.4; display: block; } .nav-bar { font-size: 1.7rem; font-family: "Walter Neue Variable"; line-height: 1.2; display: block; } .footer { font-size: 1.15rem; font-family: "Gravity Variable"; line-height: 0.5; display: block; font-feature-settings: "ss03", "ss05", "ss06", "ss07", "ss09", "ss12"; } .footer-small-tiny-copy { font-size: 0.95rem; font-family: "Diatype Variable"; line-height: 1.2; display: block; } .thanks-footer-ends { font-size: 3.8rem; font-family: "Diatype Variable"; line-height: 1; display: block; } .button-footer { font-size: 1.7rem; font-weight: 300; color: #ffffff; font-family: "Diatype Variable"; line-height: 1.2; display: block; } .bold-footer-type { font-size: 1.35rem; font-weight: 500; font-family: "Neue Haas Grotesk"; line-height: 1.2; display: block; } .footer-body { font-size: 2.25rem; font-family: "Neue Haas Grotesk"; line-height: 1.2; display: block; } .location-footer { font-size: 1.00rem; color: rgba(0, 0, 0, 0.42); font-family: "Neue Haas Grotesk"; line-height: 1.1; display: block; font-weight: 400; } .mobile .location-footer { font-size: 1.20rem; } .symbols { font-size: 2.10rem; font-family: "Diatype Variable"; line-height: 0.5; display: block; } .mobile-symbols { font-size: 3.70rem; font-family: "Diatype Variable"; line-height: 0.5; display: block; } .spotify-page { font-size: 1.85rem; color: rgba(255, 107, 0, 0.85); font-family: "VCR OSD Mono"; line-height: 0.5; display: block; } /* Link resets for custom typography */ .about-me-headline a, .marque a, .about-body a, .contact-header a, .contact-body a, .awards-header a, .awards-body a, .footer-connect-button a, .nav a, .name-about a, .project-name a, .project-type a, .mid-project-name a, .project-body a, .timeline a, .award-body-light a, .archieved-work a, .about-body-new a, .nav-bar a, .footer a, .footer-small-tiny-copy a, .thanks-footer-ends a, .button-footer a, .bold-footer-type a, .footer-body a, .location-footer a, .symbols a, .mobile-symbols a, .spotify-page a { text-decoration: none; color: inherit; } /* --- FIX: Link Hover Colors --- */ a.awards-body:hover, .awards-body a:hover { color: #FF6B00 !important; transition: color 0.3s ease; } /* ======================================================= */ /* 4. CARGO MODULES (Audio, Shop, Quick View, Galleries) */ /* ======================================================= */ media-item .caption { margin-top: .5em; } gallery-grid .caption, gallery-columnized .caption, gallery-justify .caption { margin-bottom: 2em; } [thumbnail-index] .caption { text-align: center; } [thumbnail-index] .caption .tags { margin-top: 0.25em; } .page { justify-content: center; } .page-content { padding: 0rem; text-align: left; padding-top: 0.0rem; } .page-layout { align-items: flex-start; max-width: 100%; padding: 0.0rem; } media-item::part(media) { border-radius: 1.5rem; border: 0; padding: 0; } .quick-view { height: 100%; width: 100%; padding: 0rem; margin: auto; } .quick-view-background { background-color: #ffffff; } .quick-view .caption { color: rgba(255, 255, 255, 1.0); padding: 20px 0; text-align: center; transition: 100ms opacity ease-in-out; position: absolute; bottom: 0; left: 0; right: 0; } .quick-view .caption-background { padding: 0.5rem 1rem; display: inline-block; background: rgba(0, 0, 0, 0.5); border-radius: .5rem; text-align: left; max-width: 50rem; } .mobile .quick-view { width: 100%; height: 100%; margin: 0; padding: 10px; } .mobile .quick-view .caption { padding: 10px 0; } .mobile .quick-view .caption-background { max-width: 100vw; } ::part(slideshow-nav) { --button-size: 30px; --button-inset: 20px; --button-icon-color: rgba(255, 255, 255, 0.9); --button-icon-stroke-width: 1.5px; --button-background-color: rgba(87, 87, 87, 0.35); --button-background-radius: 50%; --button-active-opacity: 0.7; } gallery-slideshow::part(slideshow-nav) { --button-inset: 15px; } .mobile ::part(slideshow-nav) { --button-inset: 10px; } .mobile .quick-view::part(slideshow-nav) { --button-inset: 25px; } shop-product { font-size: 1.2rem; max-width: 22rem; font-family: "Diatype Variable"; font-weight: 400; margin-bottom: 1em; font-variation-settings: 'slnt' 0, 'MONO' 0;} shop-product::part(price) { color: rgba(0, 0, 0, 0.75); line-height: 1.1; margin-bottom: 0.5em; } shop-product::part(dropdown) { width: 100%; color: rgba(0, 0, 0, 0.85); border: 1px solid rgba(0, 0, 0, 0.2); background-color: rgba(255, 255, 255, 0.0); background-image: url(https://static.cargo.site/assets/images/select-line-arrows.svg); background-repeat: no-repeat; background-position: top 0em right .1em; line-height: 1.2; padding: 0.58em 2em 0.55em 0.9em; border-radius: 10em; margin-bottom: 0.5em; } shop-product::part(button) { background: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.75); text-align: left; padding: 0.5em 1em; cursor: pointer; border-radius: 10em; } shop-product::part(button):active { opacity: .7; } audio-player { --text-color: rgba(0, 0, 0, 0.85); --text-padding: 0 1.2em 0 1.0em; --background-color: rgba(255, 255, 255, 0); --buffer-background-color: rgba(0, 0, 0, 0.03); --progress-background-color: rgba(0, 0, 0, 0.075); --border-lines: 1px solid rgba(0, 0, 0, 0.2); font-size: 1.2rem; width: 32rem; height: 2.75em; font-family: "Diatype Variable"; margin-bottom: 0.5em; border-radius: 10em; } audio-player::part(button) { --icon-color: rgba(0, 0, 0, 0.85); --icon-size: 32%; width: 3.15em; display: inline-flex; justify-content: center; cursor: pointer; } audio-player::part(play-icon) { padding-left: 0.6em; } audio-player::part(pause-icon) { padding-left: 0.4em; } audio-player::part(progress-indicator) { border-right: 1px solid rgba(0, 0, 0, 0); height: 100%; cursor: ew-resize; } audio-player::part(separator) { border-right: var(--border-lines); } body.mobile audio-player { max-width: 100%; } /* ======================================================= */ /* 5. SITE ALIGNMENT & MAIN LAYOUT */ /* ======================================================= */ [id="V3411458091"].page { position: static !important; transform: none !important; margin: 0 auto !important; width: 100% !important; max-width: none !important; } [id="V34111458091"] .page-content { text-align: center !important; margin: 0 auto !important; width: 100% !important; } [id="V3411458091"] .page-layout { position: static !important; transform: none !important; margin: 0 auto !important; max-width: 100% !important; } /* Aggressive Index Spacing Reset */ .main-page-content *, .thumbnails, column-set, column-unit { margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.2 !important; } .main-page-content { padding: 30px 20px 30px 20px !important; } /* Restore Vertical Gutter Between Thumbnail Rows */ .thumbnails li { margin-top: 0 !important; margin-bottom: 2rem !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ======================================================= */ /* 6. HEADER ASSEMBLY */ /* ======================================================= */ .site-header { position: fixed !important; top: 0; left: 0; width: 100%; height: 60px; background-color: #ffffff; display: flex; justify-content: space-between; align-items: center; padding: 0 4vw; z-index: 1000 !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .header-left { display: flex; align-items: center; min-width: 160px; } .logo-placeholder { width: 40px; height: 40px; background-color: #000000; border-radius: 4px; } .site-name { font-weight: 700; font-size: 1.2rem; color: #000000; flex-grow: 1; text-align: center !important; margin: 0 !important; } .header-nav { display: flex; gap: 20px; font-size: 0.9rem; text-align: right; min-width: 160px; } .header-nav a { text-decoration: none; color: #000000; font-weight: 500; padding: 5px 0; transition: color 0.2s; } .header-nav a:hover { color: #FF6B00; } .content-spacer { height: 60px; width: 100%; } /* ======================================================= */ /* 7. INDEX HOVER EFFECT (Darken & Reveal) */ /* ======================================================= */ .thumbnail.linked { position: relative !important; overflow: hidden; } .thumbnail.linked figcaption { position: absolute !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 100% !important; display: flex !important; flex-direction: column; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0); color: #ffffff !important; padding: 0 !important; text-align: center; opacity: 0; transition: all 0.3s ease; z-index: 15; border-radius: 12px; box-sizing: border-box !important; } .thumbnail.linked img { transition: filter 0.3s ease, transform 0.3s ease; filter: brightness(100%); display: block; width: 100%; height: auto; } .thumbnail.linked:hover figcaption { background: rgba(0, 0, 0, 0.6) !important; opacity: 1 !important; } .thumbnail.linked:hover img { transform: scale(1.01); filter: brightness(100%) !important; } .thumbnail.linked figcaption h2, .thumbnail.linked figcaption .tags { position: relative !important; top: auto !important; left: auto !important; transform: none !important; width: 100% !important; display: block !important; align-self: center !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; text-align: center; transition: none; } .project-header { --text-style: "Project Header"; font-size: 2.45rem; font-weight: 900; color: rgba(0, 0, 0, 0.85); font-family: "Diatype Variable"; line-height: 0.5; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; font-style: normal; } .project-header a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .project-about { --text-style: "Project about"; font-size: 1.45rem; font-weight: 266; color: rgba(0, 0, 0, 0.85); font-family: "Diatype Variable"; line-height: 0.85; display: block; font-variation-settings: 'slnt' -9.5, 'MONO' 0; font-style: normal; } .project-about a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .middle-of-project-headline { --text-style: "Middle of Project Headline"; font-size: 2.00rem; font-weight: 900; color: rgba(0, 0, 0, 0.85); font-family: "Diatype Variable"; line-height: 0.5; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; font-style: normal; } .middle-of-project-headline a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .project-body-copy { --text-style: "project body copy"; font-size: 0.95rem; font-weight: 400; color: rgba(0, 0, 0, 0.85); font-family: "Diatype Variable"; line-height: 1.4; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; font-style: normal; } .mobile .project-body-copy { font-size: 1.95rem; } .project-body-copy a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .collumn-headers { --text-style: "Collumn Headers"; font-size: 1.10rem; font-weight: 700; color: #000000; font-family: "Diatype Variable"; line-height: 1.4; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; font-style: normal; } .mobile .collumn-headers { font-size: 1.50rem; } .collumn-headers a { color: #000000; text-decoration: none; } .collumn-info { --text-style: "Collumn Info"; font-size: 0.75rem; font-weight: 400; color: rgba(0, 0, 0, 0.65); font-family: "Diatype Variable"; line-height: 1.2; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; font-style: normal; } .mobile .collumn-info { font-size: 1.40rem; } .collumn-info a { color: rgba(0, 0, 0, 0.65); text-decoration: none; } .emoji-collum-award { --text-style: "Emoji Collum award"; font-size: 1.55rem; font-weight: 400; color: rgba(0, 0, 0, 0.85); font-family: "Diatype Variable"; line-height: 1.4; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; } .emoji-collum-award a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .collumn-sub-head { --text-style: "Collumn Sub head"; font-size: 1.15rem; font-weight: 400; color: #000000; font-family: "Diatype Variable"; line-height: 1.15; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; font-style: normal; } .mobile .collumn-sub-head { font-size: 1.60rem; } .collumn-sub-head a { color: #000000; text-decoration: none; } .henry-hughes { --text-style: "Henry Hughes"; font-size: 1.70rem; font-weight: 700; color: rgba(0, 0, 0, 0.85); font-family: "Repro Variable"; line-height: 1.4; display: block; font-style: normal; letter-spacing: -0.048em; font-variation-settings: 'slnt' 0; } .henry-hughes a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .index-text { --text-style: "Index Text"; font-size: 1.90rem; font-weight: 500; color: rgba(0, 0, 0, 0.85); font-family: "Diatype Variable"; line-height: 1.15; display: block; font-style: normal; letter-spacing: 0; font-variation-settings: 'slnt' 0, 'MONO' 0; } .index-text a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .nav-bar-text { --text-style: "Nav bar text"; font-size: 1.15rem; font-weight: 400; color: rgba(0, 0, 0, 0.85); font-family: "Repro Variable"; line-height: 0.5; display: block; font-variation-settings: 'slnt' 0; font-style: normal; letter-spacing: 0; } .nav-bar-text a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .judge-notes { --text-style: "Judge Notes"; font-size: 0.80rem; font-weight: 400; color: rgba(0, 0, 0, 0.51); font-family: "Diatype Variable"; line-height: 2.2; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; font-style: normal; } .mobile .judge-notes { font-size: 1.50rem; } .judge-notes a { color: rgba(0, 0, 0, 0.51); text-decoration: none; } .button-4 { --text-style: "button 4"; font-size: 1.05rem; font-weight: 400; font-family: "Diatype Variable"; line-height: 1.4; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #ff6b00; display: inline-block; border-radius: 999rem; padding-top: 0.6rem; padding-right: 1.4rem; padding-bottom: 0.6rem; padding-left: 1.3rem; border-width: 0.08rem; font-style: normal; border-color: #ff6b00; border-style: solid; } .mobile .button-4 { font-size: 2.15rem; } .button-4 a { color: #ff6b00; text-decoration: none; text-decoration-color: #ffffff; } .button-4 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4 a:hover { } .button-4-1 { --text-style: "button 4-1"; font-size: 1.55rem; font-weight: 400; font-family: "Diatype Variable"; line-height: 1.4; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #000000; display: inline-block; border-color: rgba(0, 0, 0, 0.85); border-style: solid; border-radius: 999rem; padding-top: 0.6rem; padding-right: 1.4rem; padding-bottom: 0.6rem; padding-left: 1.3rem; border-width: 0.2rem; } .button-4-1 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4-1 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4-1 a:hover { } /* ======================================================= */ /* 8. FOOTER & "THANKS" SECTION */ /* ======================================================= */ .studio-footer { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; border: none !important; box-shadow: none !important; background-color: #FF6B00 !important; color: #000000; padding: 20px 4vw !important; overflow: hidden; font-family: 'Arial', sans-serif; text-align: center; } .studio-footer *, hr { border-top: none !important; border-bottom: none !important; box-shadow: none !important; } .large-text-wrapper { position: relative; width: 100%; margin-bottom: -50px !important; padding-bottom: 0 !important; padding-top: 0 !important; border-top: 2px solid #000000 !important; overflow: hidden; } .footer-large-text { width: 310vw; position: relative; left: 50%; transform: translateX(-50%); text-align: center !important; white-space: nowrap; font-size: 26vw !important; line-height: 0.7 !important; font-weight: 900; text-transform: uppercase; color: #000000; transition: transform 0.4s ease-in-out; z-index: 5; pointer-events: auto; } .footer-large-text:hover { transform: translateX(-50%) scale(1.08); color: #000000 !important; opacity: 1 !important; } .large-text-wrapper a:active, .footer-large-text:active { transform: translateX(-50%) scale(1.08) !important; font-size: 26vw !important; color: #000000 !important; opacity: 1 !important; } .footer-top-content-wrapper { margin-top: -20px; position: relative; z-index: 10; padding: 20px 0 20px 0 !important; display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; } .footer-contact { text-align: left; grid-column: 1 / 2; padding: 0 20px !important; } .footer-right-column-content { grid-column: 2 / 3; display: flex; flex-direction: column; align-items: flex-end; margin-left: auto !important; gap: 10px; width: 100%; padding: 0 20px !important; } .footer-cta { text-align: right; width: 100%; } .cta-button { text-decoration: none !important; display: inline-block !important; padding: 10px 20px !important; border: 1px solid #000000 !important; border-radius: 999px !important; color: #000; font-weight: bold; } .social-icons-wrapper { width: 100%; } .social-icons { display: flex; justify-content: flex-end; gap: 15px; } .social-icon-link { display: block; color: #333; font-size: 30px; transition: color 0.3s; } .social-icon-link:hover { color: #555; } column-set { display: flex !important; justify-content: space-around !important; align-items: center !important; padding-top: 10px !important; padding-bottom: 10px !important; padding-left: 5vw !important; padding-right: 5vw !important; width: 100% !important; margin: 0 !important; } column-unit { display: block !important; flex-grow: 1 !important; margin: 0 !important; padding: 0 !important; text-align: center !important; } .mobile-symbols, text-icon { margin: 0 !important; padding: 0 !important; line-height: 1 !important; vertical-align: top !important; } .contact-row { display: flex; justify-content: space-between; width: 100%; margin-top: 15px; margin-bottom: 0; padding: 0 5vw; box-sizing: border-box; font-size: 11px; line-height: 1.2; } .contact-item { flex: 1; padding: 0 5px; white-space: nowrap; text-align: left; } .contact-item.center { text-align: center; } .contact-item.right { text-align: right; } .footer-top-section { width: 100% !important; border-bottom: none !important; padding-top: 15px !important; padding-bottom: 5px !important; margin-bottom: 0 !important; text-align: center; } /* ======================================================= */ /* 9. PROJECT LAYOUT FIXES (Video, Awards, Layouts) */ /* ======================================================= */ /* --- Custom Video Wrapper --- */ .custom-video-wrapper { max-width: 80%; margin: 40px auto 60px auto; } .custom-video-wrapper iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; display: block; border: none; border-radius: 12px; } /* --- Awards Wrapper Alignment --- */ .awards-roles-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 40px !important; align-items: flex-start !important; width: 100% !important; } .awards-roles-wrapper > div { flex: 1 1 0px !important; width: 100% !important; box-sizing: border-box !important; } /* ======================================================= */ /* 10. MOBILE MEDIA QUERIES */ /* ======================================================= */ @media (max-width: 768px) { .footer-large-text { font-size: 35vw !important; transform: translateX(-50%) !important; } .footer-top-content-wrapper { margin-top: -100px; grid-template-columns: 1fr; } .footer-contact, .footer-right-column-content { grid-column: 1 / -1; margin-bottom: 15px; padding: 0 !important; } .footer-contact { text-align: center; } .footer-right-column-content { align-items: center; text-align: center; } .footer-cta { text-align: center; } .social-icons { justify-content: center; margin: 0; } .mobile-large-text-wrapper { position: relative; width: 100%; margin-bottom: 0; padding-top: 20px; padding-bottom: 0; overflow: hidden; } /* --- FIX: Project Mobile Layouts --- */ .custom-video-wrapper { max-width: 100% !important; margin-bottom: 40px !important; } .intro-spread-container { flex-direction: column !important; gap: 20px !important; margin-bottom: 40px !important; } .intro-left-col, .intro-right-col { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .intro-right-col * { text-align: left !important; } .intro-left-col * { text-align: center !important; } .awards-roles-wrapper { flex-direction: column !important; align-items: center !important; gap: 30px !important; margin-bottom: 40px !important; } .awards-roles-wrapper > div { width: 100% !important; margin: 0 !important; flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; } .awards-roles-wrapper * { text-align: center !important; } }