/* ((((((((((((((((((((((((( (((((((((((((((((((((((((((((((((((( (((((((((((((((((((((((((((((((((((((((((((( ((((((((((((((((((((((((((((((((((((((((((((((((( //(((((((((((((((((((((((((((((((((((((((((((((( ... /(((((((((((((((((((((((((((((((( (((((((((((((( .. ((((((((((((((((((((((((((( ((((((((((((((((( #%%%%%%%%%%%%* /((((((((((((((((((((((( .((((((((((((((((( %%%%%%%%%%%%%%%%%%%* (((((((((((((((((((( ((((((((((((((((( *%%%%%%%%%%%%%%%%%%%%%%%. ,(((((((((((((((( (((((((((((((((((( %%%%%%%%%%%%%%%%%%%%%%%%%%%% ((((((((((((( (((((((((((((((((( %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ((((((((( (( (((((((((((((((((( %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%. (((((( ((((( *((((((((((((((((( %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ((((((( *((((((((((((((((( %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ((((((((( ((((((((((((((((( %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ,(((((((((( ((((((((((((((((( %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% /(((((((((((( /((((((((((((((((* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% (((((((((((((( ((((((((((((((((( %%%%%%%%%%%%%%%%%%%%%%%%%%%%% ((((((((((((((((( (((((((((((((((( *%%%%%%%%%%%%%%%%%%%%%%%% ((((((((((((((((((( (((((((((((((((( %%%%%%%%%%%%%%%%%%% (((((((((((((((((((((( (((((((((((((((/ %%%%%%%%%% (((((((((((((((((((((((((/ .((((((((((((((/ /(((((((((((((((((((((((((((((( ((((((((((((((( .(((((((((((((((((((((((((((((((((((((( /((((((((((((( ((((((((((((((((((((((((((((((((((((( (((((((((((( (((((((((((((((((((((((((((((((((* (((((((((( (((((((((((((((((((((((((((((. ((((((( ((((((((((((((((((((((( ((((((((((((( */ /* Thrive Mental Health 2025 - Designed & Developed by James Hill Parker (Summer24) james.parker@thrive.uk.com / hello@jhpdigital.co.uk v1.14 Published 041024. */ /* This is the activities.css file - "This file contains the activities.html specific styles.." */ /*------------------------------------------*/ /* Base mobile-first styles */ /*------------------------------------------*/ /* * * * * Activities Page * * * * * */ .activitieshero { width: 100vw; height: 86svh; display: flex; position: relative; z-index: 4; flex-direction: column; /* justify-content: center; */ padding: 6em 0em; } .activities-div { width: auto; height: auto; position: relative; z-index: 12; display: block; padding: 5vh 1vw; box-sizing: border-box; /* margin: 2em; */ text-align: center; color: #000000; top: 16em; background-clip: none; } /* General Layout for Section List */ .sectionlistitem { display: flex; align-items: center; justify-content: space-between; background-color: #fff; border-radius: 99px; padding: 0em 0.6em 0em 1em; box-shadow: 0px 4px 20px #00000016; } /* Slitemtxt container for text and icon */ .slitemtxt { flex: 1; display: flex; align-items: center; } .slitemtxt h4 { margin-left: 10px; } /* Waveform section */ #waveform-calm, #waveform-muscle, #waveform-suggestion, #waveform-meditation { width: 30%; height: auto; background-color: #ffffff; border-radius: 5px; } /* Play/Pause Button */ button { padding: 1.6em; background-color: #000; color: white; border: none; border-radius: 99%; cursor: pointer; transition: background-color 0.3s ease; font-size: 0.6em; width: 4em; height: 4em; } button:hover { background-color: #30D6BE; } button:focus { outline: none; } button:active { background-color: #537FF2; } /* Font 'Awesome' Play Icon */ button .fa { font-size: 1.5em; vertical-align: middle; position: relative; top: -0.2em; } .coldynamic { width: auto; /* Define the width of colTwo */ max-width: 100%; /* Optional: limits it to the viewport width for responsiveness */ position: relative; overflow: hidden; top: 4em; /* Ensures images don't exceed this container */ } .coldynamic img { width: 100%; /* Make images fill the container width */ height: auto; /* Maintain aspect ratio */ object-fit: contain; /* Scale image within the container without cropping */ opacity: 0; /* Start with opacity 0 for fade-in */ transition: opacity 0.5s ease; /* Smooth fade-in/out effect */ position: relative; } .audiomodule { display: block; position: relative; top: 4em; } .audiomodule .buttonlist{ gap: 1em; } /* Super-Medium devices (Super Large phones, around 428px) */ @media (min-width: 428px) { .activities-div { top: 18em; } .activitieshero { height: 100svh; } @media (min-width: 834px) { .activitieshero { width: 100vw; height: 100vh; } .activities-div { top: 20em; } .audiomodule { display: block; position: relative; padding-bottom: 8em; /* top: 16em; */ } .coldynamic { max-width: 48vw; } .coldynamic img { width: 96%; } } @media (min-width: 1240px) { .audiomodule { top: 12em; } .coldynamic { top: 0em; }} @media (min-width: 1920px) {} @media (min-width: 2560px) {}