/*
Theme Name: D102 Website (New Brand 2026)
Theme URI: 
Author: Alastair Mogford & Leo Bowyer  
Author URI: 
Description: 
Version: 1.0
License: 
License URI: 
Tags: 
Text Domain: d102
*/



/* =================================== 
NOTE: This stylesheet contains CSS for the D102 website only. Components and elements that are shared with the wider D102 brand are contained in the D102 Design System (already enqueued into all front-end pages via d102-design-system plugin). Notes have been added to this stylesheet to indicate where the D102 Design System is being used, and where custom CSS has been added for the D102 website only.
===================================- */



/*  ================================================ 
    RESET
    Contained in d102-design-system
    ================================================ */



/*  ================================================ 
    COLOURS
    Contained in d102-design-system

    - CSS variables for brand colours, includes tints
    - semantic/contextual colours that adapt to light/dark mode
    - utility classes for background and text colours
    ================================================ */


/*  ================================================ 
    TYPOGRAPHY
    Contained in d102-design-system

    - headings
    - main body text (paragraphs, lists)
    - links and focus states
    ================================================ */


/*  ================================================ 
    LAYOUT
    Contained in d102-design-system

    - containers & wrappers
    - standardised breakpoints (1440, 1280, 960, 720, 480)
    - grid layouts
    - flex utilities
    - section wrappers (padding block)
    - spacing and padding utility classes
    - dividers
    ================================================ */









/*  ================================================ 
    HEADER
    ================================================ */

 
header{
    width: 100%;
    background-color: var(--d102-black); 
}


/* - - - Flex layout - - -  */

header .d102-header-upper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 5rem;
    gap: var(--d102-sp-8);
}

/* - - - Logo strap - - -  */

.d102-header-strap{
    display: flex;
    align-items: center;
    gap: var(--d102-sp-4);
    font-size: 1.875rem;
}

a.d102-header-strap__logo{
    color: var(--d102-hex-yellow-100);
    font-weight: 800;
    text-decoration: none;
}

a.d102-header-strap__logo:hover{
    color: var(--d102-hex-yellow-60);
    text-decoration: underline;
}

.d102-header-strap__strapline{
    color: white;
    font-weight: 500;
}



/* hide the strapline on the front page */
body.page-template-front-page .d102-header-strap__strapline{
    display: none;
}

body.page-template-front-page .d102-header-strap{
    font-size: 2.75rem;
}




/* - - - Nav - - -  */

.d102-nav{
    display: flex;
    gap: var(--d102-sp-6);
    align-items: center;
}



nav.d102-nav ul, 
nav.d102-nav li{
    list-style: none;
    padding: 0;
    margin: 0;
}

nav.d102-nav ul{
    display: flex;
    gap: var(--d102-sp-6);
    font-size: 1.25rem;
    font-weight: 500;
}

nav.d102-nav ul a{
    color: white;
    text-decoration: none;
}

nav.d102-nav ul a:hover{
    color: var(--d102-hex-yellow-100);
    text-decoration: underline;
}

nav.d102-nav ul a:focus-visible{
    color: var(--d102-black);
}

/* - - - Nav additional icons - - -  */

.d102-nav__additional-icons{
    display: flex;
    gap: var(--d102-sp-6);
    align-items: center;
}


a.d102-nav__icon__link{
    display: block;
}

.d102-nav__icon__link a:hover{
    background-color: var(--d102-hex-yellow-100);
}


a.d102-nav__icon__link > div[class*="d102-nav__icon__"]{
    display: block;
    background-color: white;
    width: 1.5em; height: 1.5em;

    mask-image: var(--icon_search);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-image: var(--icon_search);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
}


.d102-nav__icon__search{
    --icon_search: url(/wp-content/plugins/d102-design-system/assets/icons/custom/custom-search.svg);
    margin-bottom: 2px;

}
.d102-nav__icon__settings{
    --icon_search: url(/wp-content/plugins/d102-design-system/assets/icons/material-symbols-light/MaterialSymbolsLightSettingsOutlineRounded.svg);
    margin-top: 1px;
}

a.d102-nav__icon__link:focus-visible > div[class*="d102-nav__icon__"]{
    background-color: var(--d102-black);
}



/* responsive header and nav */


@media (min-width: 920px) and (max-width: 1080px) {
    .d102-header-strap__strapline{
        font-size: 1.2rem;
    }
}
@media (min-width: 641px) and (max-width: 919px) {
    .d102-header-strap__strapline{
        display: none;
    }
}
@media (max-width: 640px) {
    header .d102-header-upper{
        flex-direction: column;
        align-items: flex-start;
        gap: var(--d102-sp-3);
        padding-block: var(--d102-sp-2);
    }
    .d102-header-strap{
        font-size: 1.45rem;
    }
}
@media (max-width: 480px) {
    .d102-header-strap{
        font-size: 1.125rem;
    }
    nav.d102-nav ul{
        font-size: 1rem;
    }
    nav.d102-nav ul,
    .d102-nav,
    .d102-nav__additional-icons{
        gap: var(--d102-sp-4);
    }
}
@media (max-width: 390px) {
    .d102-header-strap{
        font-size: 1.75rem;
        line-height: 1em;
    }
    .d102-header-strap__strapline{
        display: none;
    }

    nav.d102-nav ul{
        font-size: 0.875rem;
    }
    nav.d102-nav ul,
    .d102-nav,
    .d102-nav__additional-icons{
        gap: var(--d102-sp-3);
        flex-wrap: wrap;
    }
}







/* - - - Focus box shadow change to yellow for all header elements - - - -  */

.d102-header-upper a:focus-visible{
    box-shadow: 0 0 0px 2px white, 0 0 0px 4px var(--d102-focus-black), 0 0 0px 8px var(--d102-focus-yellow);
}


/* make the accessibility link active state the same as the focus */

a.d102-nav__icon__link[aria-expanded="true"]{
    outline: 3px solid transparent;
    color: var(--d102-focus-black);
    background-color: white;
    box-shadow: 0 0 0px 2px white, 0 0 0px 4px var(--d102-focus-black), 0 0 0px 8px var(--d102-focus-yellow);
    border-radius: 1px;
    text-decoration: none;
}

a.d102-nav__icon__link[aria-expanded="true"] > div[class*="d102-nav__icon__"]{
    background-color: var(--d102-black);
}

/* - - - Menu toggle - - - - */

.d102-menu-toggle{
    display: none;
}




/* - - - Lower Menu : Accessibility / display settings - - - - */


.d102-header-lower:has(div[aria-hidden="false"]){
    border-bottom: 1px solid var(--d102-border);
}

.d102-header-lower{
    background-color: var(--d102-surface);
}

.d102-header-lower__settings{
    padding-block: var(--d102-sp-6);
    display: flex;
    justify-content: space-between;
    gap: var(--d102-sp-6);
}

.d102-header-lower__label{
    font-weight: 600;
}

@media (min-width: 640px) and (max-width: 960px) {
    .d102-header-lower__settings{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .d102-header-lower__label{
        /* grid-column: span 2; */
        grid-column: 1/2;
    }
    .d102-header-lower__close{
        grid-column: 2/3;
        grid-row: 1/2;
        text-align: right;
    }
}

@media (max-width: 640px){
    .d102-header-lower__settings{
        flex-direction: column;
    }

}



/*  ================================================ 
    FOOTER
    ================================================ */


footer.d102-website-footer{
    background-color: var(--d102-hex-yellow-100);
    color: var(--d102-hex-black-100);
    padding-block: var(--d102-sp-10)
}

body[data-theme="dark"]{
    background-color: var(--d102-surface);
}


/* - - - Footer flex layout - - -  */


footer.d102-website-footer .d102-container{
    display: flex;
    justify-content: space-between;
    gap: var(--d102-sp-4);
}


/* - - - Stacked logo - - -  */


.footer__logo{
    flex-shrink: 0;
}

.d102-footer-logo-stacked{
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 1rem;
}

a.d102-footer-logo-stacked__logo{
    font-weight: 800;
    text-decoration: none;
    font-size: 5.4em;
    color: var(--d102-hex-black-100);
    line-height: 1;
}

a.d102-footer-logo-stacked__logo:hover{
    color: var(--d102-link);
    text-decoration: none;
}

.d102-footer-logo-stacked__strapline{
    color: var(--d102-hex-black-100);
    font-size: 1.75em;
    font-weight: 500;
}


/* - - - Social links - - -  */

.d102-website-footer__social{
    /* margin-top: var(--d102-sp-6); */
    display: flex;
    flex-direction: column;
    gap: var(--d102-sp-2);
}

.d102-website-footer__social ul,
.d102-website-footer__social li{
    list-style: none;
    padding: 0;
    margin: 0;    
}

.d102-website-footer__social ul{
    display: flex;
    flex-direction: column;
    gap: var(--d102-sp-2);
}

.d102-website-footer__social strong{
    font-weight: 700;
}

.d102-website-footer__social a{
    color: var(--d102-black);
}


/* - - - Address - - -  */

.d102-website-footer__address{
    margin-top: var(--d102-sp-6);
}


/* - - - Footer nav - - -  */

nav.footer__nav{

}

nav.footer__nav ul,
nav.footer__nav li{
    list-style: none;
    padding: 0;
    margin: 0;    
}

nav.footer__nav ul{
    display: flex;
    flex-direction: column;
    gap: var(--d102-sp-2);
}


nav.footer__nav a{
    color: var(--d102-black);
}


/* - - - Copyright logo - - -  */


.d102-footer__copyright-logo {
  display: inline-block;
  min-width: 125px;
  padding-top: 112px;
  background-image: url("images/icons/govuk-crest/govuk-crest.svg");
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 125px 102px;
  text-align: center;
  white-space: nowrap;
  color: var(--d102-black);
}


/* - - - Responsive - - -  */

@media (min-width: 640px) and (max-width: 960px) {
    .d102-footer-logo-stacked{
        font-size: 0.8rem;
    }
    footer.d102-website-footer .d102-container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--d102-sp-8) var(--d102-sp-4);
    }
    footer.d102-website-footer .d102-container > .d102-website-footer__col:nth-child(1){
        grid-column: span 3;
        display: flex;
        justify-content: space-between;
        gap: var(--d102-sp-8);
        align-items: flex-end;
    }
    .d102-website-footer__address{
        margin-top: 0;
    }
    .footer__copyright {
        text-align: right;
    }
}

@media (min-width: 480px) and (max-width: 640px) {
    .d102-footer-logo-stacked{
        font-size: 0.8rem;
    }
    footer.d102-website-footer .d102-container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--d102-sp-8) var(--d102-sp-4);
    }
    footer.d102-website-footer .d102-container > .d102-website-footer__col:nth-child(1){
        grid-column: span 3;
    }
    .footer__copyright {
        text-align: right;
    }

}

@media (max-width: 480px) {
    .d102-footer-logo-stacked{
        font-size: 0.75rem;
    }
    .d102-website-footer__address{
        font-size: 0.875rem;
    }
    footer.d102-website-footer .d102-container{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--d102-sp-8) var(--d102-sp-4);
    }
    footer.d102-website-footer .d102-container > .d102-website-footer__col:nth-child(1),
    footer.d102-website-footer .d102-container > .d102-website-footer__col:nth-child(4){
        grid-column: span 2;
    }
    .footer__copyright {
        text-align: center;
    }


}
@media (max-width: 380px) {
    .d102-footer-logo-stacked{
        font-size: 0.6rem;
    }
}



/*  ================================================ 
    HERO
    ================================================ */

/* - - - HERO - - -  */

.d102-website-hero{
    padding-block: var(--d102-sp-8);
}


.d102-website-hero [class*="d102-heading-"]{
    color: var(--d102-white);
    max-width: 70rem;
}

/* specific font size for homepage */
body.page-template-front-page .d102-website-hero [class*="d102-heading-"]{
    font-size: 5rem;
    transition: all 200ms;
}

@media (max-width: 720px) {
    body.page-template-front-page .d102-website-hero [class*="d102-heading-"]{
        font-size: 4rem;
    }
}
@media (max-width: 480px) {
    body.page-template-front-page .d102-website-hero [class*="d102-heading-"]{
        font-size: 3rem;
    }
}



.d102-website-hero span{
    color: var(--d102-hex-yellow-100);
}


.d102-website-hero__text{
    font-size: 2rem;
    max-width: 53rem;
    text-wrap: pretty; 
}

@media (max-width: 480px) {
    .d102-website-hero__text{
        font-size: 1.5rem;
    }
}


/*  ================================================ 
    FRONT PAGE
    ================================================ */




/* - - - Video - - -  */



.video-hero{
    background-color: black;
    max-height: 720px;
    overflow: hidden;
    position: relative;
}

.video-wrapper{
    padding: 0;
    max-width: 2000px;
    margin-inline: auto;
}

@media (min-width: 1280px) {
    .video-wrapper {
        transform: translateY(calc(-1 * (var(--video-embed-height) - 720px) / 2 ));
    }
    
}

.video-buttons{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #000000;
    background: linear-gradient(0deg,rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    min-height: 70px;
}

.video-buttons .d102-container{
    display: flex;
    justify-content: flex-end;
}

.video-buttons button.d102-button--dark-grey{
    background-color: hsl(0deg 0% 20% / 70%);
}


video-player,
video-skin {
    --media-border-radius: 0;
    border-radius: 0 !important;
}


/*  - - - - Fallback image - - - - */


.static-hero{
    padding:56.25% 0 0 0; 
    position:relative;
    /* background-color: grey; */
    display: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}



/*  ================================================ 
    SECTIONS
    ================================================ */


.d102-website-section{
    padding-block: var(--d102-sp-10);
}

@media (max-width: 640px){
    .d102-website-section{
        padding-block: var(--d102-sp-6);
    }
}


.d102-website-section--bg{
    background-color: var(--d102-bg);
}
.d102-website-section--surface{
    background-color: var(--d102-surface);
}
.d102-website-section--surface-2{
    background-color: var(--d102-surface-2);
}
.d102-website-section--yellow{
    background-color: var(--d102-yellow-hex-100);
}
.d102-website-section--black{
    background-color: var(--d102-hex-black-100);
    color: var(--d102-white);
}







/*  ================================================ 
    FRONT PAGE SECTIONS
    ================================================ */


/* - - - - ABOUT - - - - */

body.page-template-front-page section#about .d102-grid--33-66:first-child .col{
    margin-bottom: var(--d102-sp-10);
}

body.page-template-front-page section#about .d102-grid--33-66 .d102-body-lead{
    font-size: 2rem;
    padding-right: var(--d102-sp-10);
}

@media (max-width: 960px) {
    body.page-template-front-page section#about .d102-grid--33-66:first-child .col{
        margin-bottom: 0;
    }
    body.page-template-front-page section#about .d102-grid--33-66 .d102-heading-s{
        font-size: 1.5rem;
    }
    body.page-template-front-page section#about .d102-grid--33-66 .d102-body-lead{
        font-size: 1.5rem;
        padding-right: 0;
    }
    body.page-template-front-page section#about .d102-grid--33-66:first-child{
        margin-bottom: var(--d102-sp-6);
    }
}

/* - - - - HIGHLIGHTS - - - - */

@media (max-width: 960px) {
    body.page-template-front-page section#work .d102-heading-s{
        font-size: 1.5rem;
    }
}

/*  ================================================ 
    CONTACT STRIP
    ================================================ */


section#contact-strip [class*="d102-heading-"]{
    color: var(--d102-white);
    text-wrap: pretty;
}

@media (max-width: 960px) {
    section#contact-strip [class*="d102-heading-"]{
        font-size: 1.5rem;
    }
}

section#contact-strip .content{
    max-width: 53rem;
}


/*  ================================================ 
    BLOCKQUOTE
    ================================================ */


.d102-blockquote{
    max-width: 53rem;
    transition: opacity 220ms ease;
}

.d102-blockquote--fading{
    opacity: 0;
}

.d102-blockquote__quote{
    font-size: 2rem;
    margin-bottom: var(--d102-sp-4);
}

@media (max-width: 960px) {
    .d102-blockquote__quote{
        font-size: 1.5rem;
    }
}

.d102-blockquote__cite{
    font-style: normal;
    font-size: 1.25rem;
}
.d102-blockquote__cite::before{
    content: '– ';
}

.d102-quote-refresher{
    position: relative;
    padding-right: 3rem;
}

.d102-quote-refresh{
    position: absolute;
    top: 0;
    right: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.45;
    transition: opacity 150ms, transform 300ms;
    padding: 0;
    color: inherit;
    font-family: inherit;
}

.d102-quote-refresh:hover{
    opacity: 1;
}

.d102-quote-refresh:focus-visible{
    outline: 3px solid var(--govuk-focus);
    outline-offset: 2px;
    opacity: 1;
}

.d102-quote-refresh:active svg{
    transform: rotate(180deg);
}





/*  ================================================ 
    WORK PAGE - PROJECTS FILTERS & GRID
    ================================================ */

.d102-website-section-work-filters{
    padding-top: var(--d102-sp-6);
    padding-bottom: 0;

}


.d102-project-filters{
    display: flex;
    gap: var(--d102-sp-4);
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .d102-website-section-work-filters .d102-container{
        padding-inline: 0;
    }
    .d102-project-filters{
        padding-inline: var(--d102-container-padding);
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .d102-project-filters > *{
        flex-shrink: 0;
    }
}





/* Loading indicator */

.d102-projects-loading:not([hidden]) {
    display: flex;
    align-items: center;
    gap: var(--d102-sp-3);
    padding: var(--d102-sp-4) 0;
}

.d102-projects-loading__spinner {
    display: block;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    /* border: 2px solid var(--d102-hex-yellow-40, #fef3a2);
    border-top-color: var(--d102-hex-yellow-100, #FDE70A); */
    border-radius: 50%;
    animation: d102-spin 0.6s linear infinite;
}

body[data-theme="light"] .d102-projects-loading__spinner {
    border: 2px solid var(--d102-hex-blue-40, #A6B1D2);
    border-top-color: var(--d102-hex-blue-100, #203b8e);
}

body[data-theme="dark"] .d102-projects-loading__spinner {
    border: 2px solid var(--d102-hex-black-60);
    border-top-color: var(--d102-hex-yellow-100, #FDE70A);
}

@keyframes d102-spin {
    to { transform: rotate(360deg); }
}


/* Grid fade on filter transition */

#d102-projects-grid-wrapper {
    transition: opacity 100ms ease;
}

#d102-projects-grid-wrapper.is-loading {
    opacity: 0;
}





/*  ================================================
    PROJECT CARDS
    ================================================ */





a.d102-project-card{
    display: block;
    text-decoration: none;
    color: inherit;
    height: fit-content;
}

.d102-project-card__thumb{
    width: 100%;
    height: auto;
    background-color: var(--d102-surface-2);
    margin-bottom: var(--d102-sp-4);
    overflow: hidden;
}

.d102-project-card__thumb-img,
.d102-project-card__thumb-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 200ms;
}

.d102-project-card__title{
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--d102-text);
}
.d102-project-card__client{
    color: var(--d102-text-muted);
    font-size: 1rem;
}

.d102-project-card__service{
    display: flex;
    flex-wrap: wrap;
    gap: var(--d102-sp-3);
}


/* hover */
a.d102-project-card:hover .d102-project-card__thumb > *,
a.d102-project-card:focus-visible .d102-project-card__thumb > *{
    transform: scale(1.05);
}

a.d102-project-card:hover .d102-project-card__title,
a.d102-project-card:focus-visible .d102-project-card__title{
    text-decoration: underline;
}


/* thumbnail dimensions */
.d102-project-card__thumb--landscape{
    aspect-ratio: 4/3;
}

.d102-project-card__thumb--square{
    aspect-ratio: 1/1;
}

.d102-project-card__thumb--vertical{
    aspect-ratio: 3/4;
} 



/* hide videos with motion reduced setting */
body[data-motion="reduced"] video.d102-project-card__thumb-video[autoplay] {
    display: none;
}

.d102-project-card__thumb-fallback{
    display: none; /* hide normally */
}

body[data-motion="reduced"] .d102-project-card__thumb-fallback{
    display: block;
}


/*  ================================================
    PROJECT CARD SCROLL ANIMATIONS
    (values driven by --d102-card-anim-* custom properties set via JS config)
    ================================================ */

.d102-cards-js .d102-project-card {
    opacity: 0;
    transform: translateY(var(--d102-card-anim-slide, 100px));
    transition: opacity  var(--d102-card-anim-duration, 500ms) ease,
                transform var(--d102-card-anim-duration, 500ms) ease;
}

.d102-cards-js .d102-project-card.is-animated {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .d102-cards-js .d102-project-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

body[data-motion="reduced"] .d102-cards-js .d102-project-card {
    opacity: 1;
    transform: none;
    transition: none;
}







/*  ================================================
    CASE STUDY PROJECT PAGES
    ================================================ */


section#case-study-top .d102-container{
    padding-block: var(--d102-sp-8);
} 

section#case-study-top h1{
    margin-bottom: 0;
}

section#case-study-top .d102-project-tagline.d102-body-lead{
    margin-bottom: 0;
    margin-top: var(--d102-sp-6);
    max-width: 53rem;
    text-wrap: pretty;
}

/* 
body.single-project .page-content h2{
    font-size: 3rem;
} */

body.single-project .page-content p{
    font-size: 1.25rem;
}

/* images add margin block */
body.single-project .page-content .wp-block-image,
body.editor-styles-wrapper .wp-block-image{
    margin-block: var(--d102-sp-8);
}


/* remove margin on first hero item */
body.single-project .page-content > *:first-child{
    margin-top: 0;
}



/* 

Ideal image format sizes

FULL WIDTH IMAGES

Each case study should have at least one full width image, this is to display as the hero image at the top of the case study page. Additional full-width images can be used further doen the page. 

These display at 1232px wide (max width of content area). The height can vary depending on the image content, however for consistency best to use the following aspect ratios: 

16:9 (displays 1232px x 693px) - best for video/animation stills
2.35:1 (displays 1232px x 524px) - best for video cinematic stills
2:1 (displays 1232px x 616px) - widest landscape view

Square or portrait images are not recommended for full width images, as they'll create too much scrolling for the user. 

The pixel dimensions above are based on a 150dpi export for web use. For example, the 1232px x 693px image size exported at 150dpi will actually output at 2567px x 1444px.

CASE STUDY IMAGES

Other supporting case study images will be displayed as non-full width, and typically in a 2-column layout and/or grid. The following aspect ratios are recommended for consistency:

16:9 (displays at approximately 640px x 360px)
3:4 (displays at approximately 640px x 853px)
4:3 (displays at approximately 640px x 480px)
1:1 (displays at approximately 640px x 640px)

Where we intend to display multiple supporting case study images in a grid, all aspect ratios on the same row should be the same.  

THUMBNAILS

All case studys must have a thumbnail image, which is used in the case study grid on the work page. The aspect ratio options for the thumbnails are:

3:4
1:1
4:3 

For these thubmnails, you do not need to provide an exact aspect ratio or pixel dimension in the export, as WordPress will automatically apply a crop to the relevent size. 

The thumbnails are best as stylised mockup images with full bleed, they want to feel natural and not too contrived. 

Even if a case study is to have an animated thumbnail (see below), a fallback image thumbnail is still required. 

ANIMATED THUMBNAILS

Thunbmails can instead be animated instead of being static. 

They still need to confirm to the same aspect ratio options (3:4, 1:1, 4:3), designed to loop, maximum 5 secs duration.

The animation should be simple and subtle, not too complex. We don't need build in/out transitions.


*/









/*  ================================================ 
    ABOUT PAGE
    ================================================ */


/* override showreel details to white */
body.page-template-page-about section.d102-website-hero .d102-details__summary {
    color: var(--d102-white);
}
body.page-template-page-about section.d102-website-hero .d102-details__summary:focus-visible {
    color: var(--d102-focus-black);
}

/* first para bigger */
body.page-template-page-about section#what-we-do .d102-col > .d102-body-lead:nth-child(1){
    font-size: 1.5rem;
    font-weight: 700;
}


/* quotes - moving the refresh button to left hand side */
body.page-template-page-about section#gallery-quotes .d102-quote-refresh{
    left: 0;
    right: unset;
}

#why-work-with-us .d102-list--none li{
    font-size: 2rem;
    font-weight: 700;
}



body[data-theme="dark"] #satisfaction-scores {
    background-color: var(--d102-black);
}



/* d102-satisfaction-stat-container */

.d102-satisfaction-stat-container .d102-block-case-study-statistic .number {
    font-weight: 800;
    color: var(--d102-yellow);
}


.d102-satisfaction-stat-container .d102-block-case-study-statistic.size-l{
    padding-block: var(--d102-sp-8);
}


.d102-satisfaction-stat-container .d102-block-case-study-statistic.size-l .number {
    font-size: 7rem;
    line-height: 0.9em;
}


.d102-satisfaction-stat-container .d102-block-case-study-statistic.size-l .label {
    font-size: 2rem;
    margin-top: var(--d102-sp-4);
}




/*  ================================================ 
    SERVICES PAGE
    ================================================ */


/* - - - Main Services Grid - - -  */

.d102-grid.d102-website-services-grid{
    gap: var(--d102-sp-8);
}

.d102-website-service-card__title a{
    color: var(--d102-text);
    text-decoration: none;
}

.d102-website-service-card__title a:hover{
    text-decoration: underline;
}

.d102-website-service-card__excerpt{
    text-wrap: pretty;
}



/* - - - Discover, develop, deliver Grid/Flex - - -  */

.d102-website-services-ddd-grid{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--d102-sp-12);
    transition: all 200ms;

}



/*  ================================================ 
    D CONTAINER - used in stats
    ================================================ */


.d102-d-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    background-color: var(--d102-black);
    color: white;
    padding: 
        var(--d102-sp-10)
        var(--d102-sp-10)
        var(--d102-sp-10)
        var(--d102-sp-6)
    ;
    transition: all 200ms;
}

.d102-d-container.d102-d-container--center{
    justify-content: center;
}

/* dark mode */
body[data-theme="dark"] section#how-we-work{
    background-color: var(--d102-hex-black-100);
}

body[data-theme="dark"] .d102-d-container{
    background-color: var(--d102-surface-2);
    color: var(--d102-text);
}

.d102-d-container [class*="d102-heading-"]{
    color: var(--d102-hex-yellow-100);
    margin: 0;
    margin-bottom: var(--d102-sp-4);
}


@media (max-width: 1280px) {
    .d102-website-services-ddd-grid{
        gap: var(--d102-sp-10);
    }
    .d102-d-container{
        border-top-right-radius: 10rem;
        border-bottom-right-radius: 10rem;
    }
}


@media (max-width: 960px) {
    .d102-website-services-ddd-grid{
        gap: var(--d102-sp-8);
    }
    .d102-d-container{
        border-top-right-radius: 8rem;
        border-bottom-right-radius: 8rem;
        padding: 
            var(--d102-sp-8)
            var(--d102-sp-10)
            var(--d102-sp-8)
            var(--d102-sp-6)
        ;

    }
}

@media (max-width: 800px) {
    .d102-website-services-ddd-grid{
        gap: var(--d102-sp-4);
        flex-direction: column;
    }
    .d102-d-container{
        aspect-ratio: unset;
        border-top-right-radius: 4rem;
        border-bottom-right-radius: 4rem;
        padding: 
            var(--d102-sp-6)
            var(--d102-sp-10)
            var(--d102-sp-6)
            var(--d102-sp-6)
        ;

    }
}







/*  ================================================ 
    IMAGE GALLERY - used on about page
    ================================================ */



.d102-image-gallery{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--d102-sp-6);
}

.d102-gallery-image-container > img{
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* - - - Layout Options - - - */

.d102-image-gallery--layout-3 > .d102-gallery-image-container:nth-child(1){
    grid-row: span 2;
}



/* - - - Balck and White - - -  */

.d102-image-gallery--bw img{
    filter: grayscale(1);
}






/*  ================================================ 
    CONTACT PAGE
    ================================================ */


body.page-template-page-contact section#contact-us .d102-body-lead{
    font-size: 1.5rem;
    font-weight: 700;
}

body.page-template-page-contact section#contact-us a {
    color: var(--d102-text);
}






/*  ================================================
    SEARCH
    ================================================ */


section#search-hero{
    background-color: var(--d102-yellow);
}

body[data-theme="dark"] section#search-hero{
    background-color: var(--d102-surface);
}

section#search-results{
    background-color: var(--d102-bg);
}


.d102-search-form{
    display: flex;
    gap: var(--d102-sp-4);
    align-items: center;
}

.d102-search-form > label{
    width: 100%;
}

.d102-search-form > label > .d102-input{
    width: 100%;
}

.d102-search-results-grid{
    display: grid;
    gap: var(--d102-sp-4);
}


a.d102-website-search-result{
    background-color: var(--d102-surface);
    border-radius: var(--d102-sp-2);
    padding: var(--d102-sp-4);
    text-decoration: none;
    color: inherit;   
    display: block;
    transition: all 200ms;
}

a.d102-website-search-result:hover{
    background-color: var(--d102-surface-2);
}

a.d102-website-search-result:hover [class*="d102-heading-"]{
    text-decoration: underline;
}



a.d102-website-search-result:has(.d102-project-card__thumb){
    display: flex;
    gap: var(--d102-sp-6);
    flex-wrap: nowrap;
}

a.d102-website-search-result > .d102-project-card__thumb{
    max-width: 14rem;
    margin-bottom: 0;
}


/*  ================================================
    SEARCH PAGE - FILTERS, RESULTS INDICATOR & PAGINATION
    ================================================ */

.d102-search-filters__count{
    color: var(--d102-text-muted);
}

.search-results-indicator{
    padding-bottom: var(--d102-sp-4);
}

#d102-search-results-wrapper{
    transition: opacity 100ms ease;
}

#d102-search-results-wrapper.is-loading{
    opacity: 0;
}

.pagination .nav-links{
    display: flex;
    align-items: center;
    gap: var(--d102-sp-3);
    flex-wrap: wrap;
    padding-top: var(--d102-sp-6);
}

.pagination .page-numbers.current{
    font-weight: 700;
    text-decoration: underline;
}







/*  ================================================ 
    STANDARD DEFAULT PAGE
    ================================================ */



/* ----------- HERO ------------- */



/* subtle grey */
.d102-page-layout-hero--grey{
    background-color: var(--d102-surface);
    color: var(--d102-text);
}
body[data-theme="dark"] .d102-page-layout-hero--grey{
    background-color: var(--d102-black);
}

/* yellow */
.d102-page-layout-hero--yellow{
    background-color: var(--d102-yellow);
    color: var(--d102-text);
}
body[data-theme="dark"] .d102-page-layout-hero--yellow{
    background-color: var(--d102-black);
}
body[data-theme="dark"] .d102-page-layout-hero--yellow [class*="d102-heading-"]{
    color: var(--d102-yellow);
}

/* black */
.d102-page-layout-hero--black{
    background-color: var(--d102-black);
    color: var(--d102-white);
}
.d102-page-layout-hero--black [class*="d102-heading-"]{
    color: var(--d102-white);
}
body[data-theme="dark"] .d102-page-layout-hero--black [class*="d102-heading-"]{
    color: var(--d102-yellow);
}



/* ----------- LEAD PARA / EXCERPT ------------- */

.d102-page-layout-hero--lead-container{
    max-width: 53rem;
}



/* ----------- BREADCRUMBS ------------- */

.breadcrumb{
    margin-top: 0;
    margin-bottom: var(--d102-sp-8);
    position: relative;
}

.container-breadcrumb{
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.breadcrumb-separator{
    display: block;
    width: 1rem; height: 1rem;
    background-color: var(--d102-link);
    --_breadcrumb-icon: url('https://api.iconify.design/akar-icons:triangle-right-fill.svg');
    mask-image: var(--_breadcrumb-icon);
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center;
    -webkit-mask-image: var(--_breadcrumb-icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -webkit-mask-position: center;
}

.breadcrumb a{
    color: var(--d102-link);
}

/* alter breadcrumb colours depending on hero bg */

.d102-page-layout-hero--yellow .breadcrumb a{
    color: var(--d102-text);
}
.d102-page-layout-hero--yellow .breadcrumb-separator{
    background-color: var(--d102-text);
}


.d102-page-layout-hero--black .breadcrumb a{
    color: var(--d102-white);
}
.d102-page-layout-hero--black .breadcrumb-separator{
    background-color: var(--d102-white);
}


/* ----------- LAYOUT ------------- */


/* widen gutter between cols */
section.d102-page-layout-main .d102-grid{
    gap: var(--d102-sp-10);
}




/* ----------- SWAP COLUMNS IF SIDEBAR ON RIGHT ------------- */

@media (min-width: 961px) {
    section.d102-page-layout-main .d102-grid--reverse .page-content{
        grid-column: 1/2;
        grid-row: 1/2;
    }
    section.d102-page-layout-main .d102-grid--reverse .d102-page-layout-sidebar{
        grid-column: 2/3;
        grid-row: 1/2;
    }
}
@media (max-width: 960px) {
    section.d102-page-layout-main .d102-grid--reverse{
        grid-template-columns: 1fr;
    }
}


/* ----------- STICKY SIDEBAR ------------- */


.d102-page-layout--sidebar_sticky{
    position: sticky;
    top: var(--d102-sp-8);
}





/* ----------------- TABLE OF CONTENTS ----------------- */



ul.toc-list, 
ul.toc-list li{
    list-style: none;
    padding: 0;
}

ul.toc-list{
    display: grid;
    gap: 2px;
}

ul.toc-list li{
    position: relative;
}

ul.toc-list li.h2-heading a{
    display: block;
    padding-block: 0.2rem;
    /* padding-inline: 0.5rem; */
    position: relative;
    /* margin-top: 20px; */
    font-weight: 700;
    color: var(--d102-link);
}

ul.toc-list li.h3-heading a{
    display: block;
    padding-block: 4px;
    padding-left: 2rem;
    position: relative;
    color: var(--d102-link);

}

ul.toc-list li.h3-heading a::before{
    content: '';
    position: absolute;
    top: calc(50% - 1px); 
    left: 0.5rem;
    width: 1rem;
    height: 1px;
    background-color: var(--d102-text-muted);
} 



ul.toc-list li.current-heading a{
    color: var(--casey-grey-950);
    text-decoration: none;
}

ul.toc-list li.current-heading::before{
    --_bar: 4px;
    content: '';
    position: absolute;
    height: 100%;
    left: calc((var(--_bar) * -1) - 0.5rem);
    top: 0;
    width: var(--_bar);
    background-color: var(--d102-yellow);
}






body.wp-theme-d102-website .wp-block-table{
    margin-block: var(--d102-sp-8);
}

body.wp-theme-d102-website .wp-block-table thead{
    border-bottom: unset;
}

body.wp-theme-d102-website .wp-block-table td,
body.wp-theme-d102-website .wp-block-table th{
    border: 0;
}