#tdws-header .tdws-wrapper { } #tdws-header .tdws-wrapper ul { margin-left: auto; } .clear-fix:after, .ClearFix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } body { margin: 0; padding: 0; font-family: roboto, sans-serif; z-index: 2; background: #ffffff; } a { text-decoration: none; color: #202020; } .wrapper { max-width: 1200px; padding: 0 40px; margin: 0 auto; } @media screen and (max-width:1000px) { .wrapper { padding: 0 30px; } } @media screen and (max-width:600px) { .wrapper { padding: 0 15px; } } ul, li { list-style: none; padding: 0; margin: 0; } /* -------------------------------------- Nav -------------------------------------- */ .nav-landing { background: #222222 ; overflow-x: auto; } .nav-landing-wrapper { display: flex; } .nav-landing a { display: block; color: #ffffff; font-size: 14px; height: 50px; line-height: 50px; margin-right: 25px; } .nav-landing a.active, .nav-landing a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } /* -------------------------------------- Base Headers -------------------------------------- */ .page-header-strapline { background: #dd4400; color: #ffffff; margin-bottom: 38px; } .page-header-strapline strong { font-size: 30px; } .page-header-strapline .wrapper { background: url(background.svg) no-repeat center right; padding-top: 30px; padding-bottom: 30px; } /* -------------------------------------- Base Structure -------------------------------------- */ .page-aside-frame { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 30px; } @media screen and (max-width:1000px) { .page-aside-frame { grid-template-columns: 1fr; } } .page-body { container-type: inline-size; grid-column: span 3; } .page-body h1 { font-size: 24px; line-height: 30px; margin-bottom: 10px; } .page-body hr { border: none; height: 4px; background-color: #dd4400; border-radius: 5px; margin-bottom: 38px; } .page-body article { margin-bottom: 38px; } .page-columns { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 30px; margin-bottom: 38px; align-items: center; } .column-image img { max-width: 100%; display:block; aspect-ratio: 6/4; object-fit: cover; border-radius: 6px; } @media screen and (max-width:1000px) { .page-columns { grid-template-columns: 2fr 1fr; } .column-image img { aspect-ratio: 4/3; } } @media screen and (max-width:800px) { .page-columns { grid-template-columns: 1fr; } .column-image img { aspect-ratio: 6/4; width: auto; } } /* -------------------------------------- Specific Parts -------------------------------------- */ .clip-strip { display: grid; padding: 10px; background: #f5f5f5; border-radius: 6px; margin-bottom: 38px; } .judoon-timeline-bullets { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 25px 10px; list-style: none; padding: 0; margin-bottom: 38px; } .judoon-timeline-bullets li { position: relative; padding-left: 14px; } .judoon-timeline-bullets .title { display: block; font-size: 16px; line-height: 22px; color: #3d3d3d; margin-bottom: 5px; text-decoration: none; font-weight: bold; } .judoon-timeline-bullets .date { display: block; font-size: 14px; line-height: 14px; font-weight: bold; } .judoon-timeline-bullets li:before { display: block; content: ''; width: 8px; height: 8px; border-radius: 50%; background: #3d3d3d; position: absolute; left: 0px; top: 6px; } @media screen and (max-width:1000px) { .judoon-timeline-bullets { grid-template-columns: repeat(2, 1fr); grid-gap: 20px; } } @media screen and (max-width:600px) { .judoon-timeline-bullets { grid-template-columns: 1fr; grid-gap: 30px; } } .aside-filter { background: #f5f5f5; padding: 20px; position: sticky; top: 20px; border-radius: 6px; } .aside-filter-group { display: block;} .aside-filter-group label { display: block; font-size: 14px; line-height: 14px; font-weight: bold; margin-bottom: 15px; } .aside-filter-group span { display: block; color: #3d3d3d; font-size: 14px; line-height: 14px; margin-bottom: 5px; padding: 12px; border-radius: 3px; border: 1px solid #cccccc; } .aside-filter-group a { display: block; color: #3d3d3d; font-size: 14px; line-height: 14px; margin-bottom: 5px; padding: 12px; border-radius: 3px; border: 1px solid #cccccc; } .aside-filter-group:not(:last-child) { margin-bottom: 20px; } /* -------------------------------------- Cards -------------------------------------- */ /* Generic Cards*/ .card { position: relative; } .card .card-image { display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 12px; } .card img { display: block; aspect-ratio: 6 / 4; width: 100%; object-fit: cover; height: 100%; border-radius: 6px; } .card .title { display: block; font-size: 16px; line-height: 22px; color: #dd4400; margin-bottom: 5px; text-decoration: none; font-weight: bold; } .card .date { display: block; font-size: 14px; line-height: 22px; margin-bottom: 5px; font-weight: bold; } .card .summary { display: block; font-size: 14px; line-height: 20px; color: #3d3d3d; margin-bottom: 5px; } .card.link .card-image img { transition: transform 0.3s; } .card.link:hover .card-image img { transform: scale(1.2); } .card.link a.title::before { content:''; z-index: 2; opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .card.link:hover a.title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .card-feature { position: relative; min-height: 200px;} .card-feature a:after { content: ''; border-radius: 6px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: 0.15s ease; background: linear-gradient( to bottom, rgba(126, 39, 0, 0.65), rgba(0, 0, 0, 0.75) ); } .card-feature:hover a:after { opacity: 0.85; } .card-feature .card-image { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -2; overflow: hidden; border-radius: 12px; } .card-feature .card-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; transition: transform 0.15s ease; } .card-feature .card-content { padding: 15px; height: 100%; display: flex; flex-direction: column; } .card-feature .title { transition: 0.3s; display: block; font-size: 16px; line-height: 22px; color: #ffffff; margin-bottom: 5px; text-decoration: none; font-weight: bold; } .card-feature .title:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .card-feature .summary { display: block; font-size: 14px; line-height: 20px; color: #ffffff; margin-bottom: 35px; } .card-feature a.title::before { content:''; z-index: 2; opacity: 0; transition: opacity 0.3s; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 12px; } .card-feature::after { content: "Find out more"; display: inline-flex; align-items: center; justify-content: center; width: auto; font-size: 14px; padding-right: 25px; height: 32px; position: absolute; bottom: 15px; left: 15px; color: #ffffff; border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-7-7 7 7-7 7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right; background-size: 18px; transition: transform 0.2s ease; } .card-feature:hover::after { transform: translateX(4px); } .card-cta { margin-bottom: 38px; display: grid; grid-template-columns: 2fr 1fr; padding: 25px; gap: 20px; border-radius: 12px; position: relative; border: 2px solid #cccccc; } .card-cta a.title { display: block; font-size: 16px; line-height: 22px; color: #3d3d3d; margin-bottom: 5px; text-decoration: none; font-weight: bold; } .card-cta .summary { display: block; font-size: 14px; line-height: 20px; color: #3d3d3d; margin-bottom: 5px; width: 66%; } .card-cta::after { content: "Find out more"; color: #3d3d3d; display: inline-flex; align-items: center; justify-content: center; width: auto; font-size: 14px; padding-right: 25px; height: 32px; position: absolute; bottom: 25px; left: 25px; border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d3d3d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-7-7 7 7-7 7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right; background-size: 18px; transition: transform 0.2s ease; } .card-cta:hover::after { transform: translateX(4px); } .card-cta a.title::before { content:''; z-index: 2; opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .card-cta:hover a.title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .card-cta .card-image img { display: block; aspect-ratio: 6 / 4; width: 100%; object-fit: cover; height: 100%; border-radius: 6px; } /* Card Framework */ .card-list { display: grid; grid-gap: 30px; margin-bottom: 38px; } .card-list .card { display: grid; grid-template-columns: 1fr 3fr; grid-gap: 15px; } .card-mini-list { display: grid; grid-gap: 30px; grid-template-columns: 1fr 1fr; margin-bottom: 38px; } .card-mini-list .card { display: grid; grid-template-columns: 1fr 3fr; grid-gap: 15px; } @media screen and (max-width:1000px) { .card-mini-list { grid-gap: 20px; } } @media screen and (max-width:800px) { .card-mini-list { grid-template-columns: 1fr; grid-gap: 30px; } .card-mini-list .card { display: grid; grid-template-columns: 1fr 3fr; grid-gap: 15px; } } .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 30px; margin-bottom: 60px;} .card-grid .card { display: flex; gap: 12px; flex-direction: column; } @media screen and (max-width:1000px) { .card-grid { grid-gap: 20px; } } @media screen and (max-width:800px) { .card-grid { grid-template-columns: 1fr; grid-gap: 30px; } .card-grid .card { display: grid; grid-template-columns: 1fr 3fr; grid-gap: 15px; } } .grid-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 30px; margin-bottom: 38px; } @media screen and (max-width:1000px) { .grid-features { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 15px; } } @media screen and (max-width:800px) { .grid-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Carousel */ .grid-scroll-wrapper { width: 100%; position: relative; } .grid-scroll-wrapper:not(:last-child) { margin-bottom: 30px; } .grid-scroll { overflow-x: scroll; } .scroll-list { grid-gap: 0px; display: inline-flex; align-items: stretch; width: 100%; /*Before Load*/ overflow: hidden; /*Before Load*/ opacity: 0; } .grid-scroll .scroll-list { width: auto; /*Aftr Load*/ overflow: visible; /*Aftr Load*/ opacity: 1; animation: fadeIn 0.5s; } .scroll-list > * { width: 200px; margin-right: 10px; flex-shrink: 0; } .scroll-list > *:last-child { margin-right: 100px; display: block; } .grid-scroll-arrow { width: 40px; height: 40px; background: #dd4400; position: absolute; top: 50%; transform: translateY(-50%); border-radius: 0px; cursor: pointer; z-index: 9; } .grid-scroll-arrow-prev { right: 40px; } .grid-scroll-arrow-next { right: 0; } .grid-scroll-arrow svg { fill: #ffffff; width: 40px; height: 40px; display: block; } .grid-scroll-header { position: absolute; right: 0; height: 100%; width: 80px; background: rgba(245,245,245,0.85); z-index: 90; } .grid-scroll-content { flex: 1; } .grid-scroll { -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .grid-scroll::-webkit-scrollbar { display: none; /* Safari and Chrome */ } .card-nav { width: 200px; } .card-nav img { border: 2px solid #ccc; width: 160px; height: 160px; padding: 10px; } .card-nav .title { display: block; font-size: 16px; line-height: 22px; color: #dd4400; margin-bottom: 5px; text-decoration: none; font-weight: bold; } .card-nav .date { display: block; font-size: 14px; line-height: 22px; margin-bottom: 5px; font-weight: bold; } .credits-list { list-style: none; padding: 0; margin: 0 0 30px 0; } .credits-list li:not(:last-child) { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #cccccc; } .credits-list li { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } .credits-list li strong { text-align: right; } .next-prev-buttons { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } .next-prev-buttons a { background: #f9f9f9; color: #cccccc; padding: 15px; border-radius: 6px; display: block; color:#dd4400; } .next-prev-buttons a { background: #f9f9f9; color: #cccccc; padding: 15px; border-radius: 6px; display: block; color:#dd4400; } /* -------------------------------------- Reset -------------------------------------- */ h1, h2, h3, h4, ul, li, p { font-weight: normal; padding: 0; margin: 0; list-style: none; } img { display: block; } a { text-decoration: none; } /* -------------------------------------- Content -------------------------------------- */ article h1, article h2, article h3, article h4 { font-size: 24px; line-height: 30px; font-weight: bold; color: #202020; } article h1 { font-size: 30px; line-height: 36px; } article p { font-size: 16px; line-height: 22px; } article h1:not(:last-child), article h2:not(:last-child), article h3:not(:last-child), article h4:not(:last-child), article p:not(:last-child), article blockquote:not(:last-child), article ul:not([class]):not(:last-child), article ol:not([class]):not(:last-child) { margin-bottom: 15px; } article ul:not([class]), article ol:not([class]) { font-size: 16px; line-height: 22px; margin-left: 30px; } article ul:not([class]) li, article ol:not([class]) li { list-style: square; } article ul:not([class]) li:not(:last-child), article ol:not([class]) li:not(:last-child) { margin-bottom: 4px; } article a { color: #dd4400; font-weight: bold; } article a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } article > img { display: block; max-width: 100%; margin-bottom: 20px; } article h2:not(:first-child) { margin-top: 30px; padding-top: 30px; border-top: 1px solid #555555; } article .button { padding: 10px 20px; background: #dd4400; color: #ffffff; display: inline-block; border-radius: 5px; }