/*
Theme Name: John Lewis Partnership
Theme URI: https://www.johnlewispartnership.co.uk/
Author: Supersonic Playground
Author URI: https://www.supersonicplayground.com/
Description: Custom theme for John Lewis Partnership.
Version: 3.4.4
Template: hello-elementor
Text Domain: john-lewis
*/
/*
Use: Import all styles
Scope: All devices
Theme: John Lewis Partnership
Author: Supersonic Playground
Copyrights: © 2025 John Lewis Partnership
*/
@import url("./styles/styles-global.css");
@import url("./styles/styles-login.css");
@import url("./styles/styles-header.css");
@import url("./styles/styles-hero-section.css");
@import url("./styles/styles-footer.css");
@import url("./styles/styles-form.css");
@import url("./styles/styles-accordion-tabs.css");
@import url("./styles/styles-auto-animations.css");
@import url("./styles/styles-jagged-edges.css");
@import url("./styles/styles-shape-divider.css");
/* ------------------------------
FOOTER
--------------------------------*/
.page-id-222 footer .e-con-inner > div{
justify-content:space-between;
}
/* ------------------------------
ICON LISTS
--------------------------------*/
.item-list .elementor-icon-list-icon {
order: 3;
}
.item-list a {
justify-content: space-between;
}
/* ------------------------------
TEXT EDITOR / WIDGETS
--------------------------------*/
.elementor-widget-text-editor p:last-child,
.textwidget p:last-child {
margin-bottom: 0;
}
/* ------------------------------
BUTTONS
--------------------------------*/
.elementor-button{
font-size:16px!important;
}
.elementor .elementor-button-content-wrapper:has(.elementor-button-icon),
.e-n-tab-title {
display: flex;
align-items: center;
justify-content: space-between !important;
text-align: left;
}
.elementor-shape-circle .elementor-icon-wrapper {
display: flex;
align-items: center;
text-align: center;
}
.elementor-button,
.elementor-button-link,
.elementor-nav-menu a {
text-decoration: none !important;
}
/* ------------------------------
TAGS
--------------------------------*/
.elementor-post-info__terms-list-item {
text-transform: uppercase;
padding: 5px 15px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
}
.elementor-post-info__terms-list-item{
background-color: #b7e0cb;
}
.elementor-post-info__terms-list-item.finance {
background-color: #f6deca;
}
.elementor-post-info__terms-list-item.scheme {
background-color: #b7e0cb;
}
/* ------------------------------
BREADCRUMBS
--------------------------------*/
.breadcrumb_last {
font-weight: bold;
text-decoration: underline;
margin:0 5px;
}
#breadcrumbs a {
text-decoration: none !important;
font-size: 16px;
font-weight: normal;
margin: 0 5px;
}
#breadcrumbs a:first-of-type {
margin-left: 10px;
}
/* ------------------------------
PAGE HEADER BACKGROUNDS
--------------------------------*/
.page-id-239 header > div,
.page-id-12 header > div,
.page-id-152 header > div,
.page-id-248 header > div,
.postid-370 header > div {
background-color: #FBF2EA !important;
}
.page-id-148 header > div,
.parent-pageid-148 header > div,
.page-id-245 header > div,
.parent-pageid-245 header > div {
background-color: var(--e-global-color-8987142) !important;
}
.page-id-115 header > div,
.parent-pageid-115 header > div,
.page-id-241 header > div,
.parent-pageid-241 header > div {
background-color: #e2f3ea !important;
}
.postid-167 header > div,
.page-id-173 header > div,
.single-post header > div {
background: #fff !important;
}
/* ------------------------------
MAIN MENU
--------------------------------*/
header ul.elementor-nav-menu--dropdown a, ul.elementor-nav-menu--dropdown a:focus, ul.elementor-nav-menu--dropdown a:hover{
border-inline-start: 0 solid transparent;
}
@media (min-width: 768px){
header .elementor-nav-menu .sub-arrow{
margin-left:20px;
}
.menu-dc:first-of-type ul {
margin-left: -10px !important;
}
.menu-db:first-of-type ul {
margin-left: 10px !important;
}
header .elementor-nav-menu > li:first-child > a{
margin-left: 25px;
}
header .elementor-nav-menu > li:first-child > .elementor-nav-menu--dropdown {
margin-left: -10px;
}
li:nth-child(1 of .menu-dc) > a, li:nth-child(1 of .menu-db) > a {
margin-left: 0px !important;
}
li:nth-child(1 of .menu-db) > ul {
margin-left: 0px !important;
}
li:nth-child(1 of .menu-dc) > ul{
margin-left:-10px!important;
}
header .elementor-item-active, .current-menu-ancestor .has-submenu {
position: relative;
}
header .elementor-nav-menu .menu-item-has-children > .elementor-item-active::after {
content: "";
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 10px;
background: url('data:image/svg+xml,') no-repeat center center!important;
background-size: contain;
transition: transform 0.3s ease;
}
header .elementor-nav-menu .menu-item-has-children > a::after {
content: "";
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 10px;
background: url('data:image/svg+xml,') no-repeat center center;
background-size: contain;
transition: transform 0.3s ease;
}
header .elementor-nav-menu .menu-item-has-children > a:hover::after {
transform: translateY(-50%) rotate(180deg);
background: url('data:image/svg+xml,') no-repeat center center;
background-size: contain;
}
}
header .elementor-nav-menu .menu-item-has-children > a::after {
opacity: 1 !important;
background-color:transparent!important;
}
header .elementor-nav-menu .menu-item-has-children > a {
position: relative;
}
header .elementor-nav-menu--dropdown li:last-child {
border:none!important;
}
.menu-item:is(.menu-db,.menu-dc) a, .menu-hover a{
border-radius:26px;
}
@media (min-width: 768px) {
.menu-item:is(.menu-db, .menu-dc) a:not(.elementor-item-active):hover,
.menu-hover a:not(.elementor-item-active):hover {
background: black;
border-radius: 26px;
color: white !important;
}
header .menu-item:is(.menu-db, .menu-dc) a.elementor-item-active,
header .menu-hover a.elementor-item-active {
background: #222;
border-radius: 26px;
color: white !important;
}
}
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after {
background-color: unset!important;
}
/* ------------------------------
MENU LOGIC (DC/DB)
--------------------------------*/
.menu-dc,
.menu-db {
display: none;
}
.menu-ready .menu-dc,
.menu-ready .menu-db {
display: block;
}
.elementor-nav-menu {
opacity: 0;
transition: opacity 0.2s ease-in;
}
.menu-ready .elementor-nav-menu {
opacity: 1;
}
/* ------------------------------
PAGE SPECIFIC OVERRIDES
--------------------------------*/
.page-id-153 .e-loop-item > div {
padding: 0;
}
/* ------------------------------
CUSTOM DROPDOWN
--------------------------------*/
.custom-dropdown {
position: relative;
display: inline-block;
}
.active-text .elementor-button-link {
width: 225px !important;
}
.dropdown-menu {
display: none !important;
position: absolute !important;
left: 0;
z-index: 999;
margin-left: 20px;
}
.custom-dropdown.open + .dropdown-menu {
display: block !important;
}
.dropdown-menu .option {
cursor: pointer;
text-align: left !important;
}
.custom-dropdown .elementor-button-icon svg {
fill: #000000;
}
.custom-dropdown.open .elementor-button-icon svg {
fill: #ffffff;
}
.custom-dropdown .elementor-button-icon svg {
transition: transform 0.3s ease, color 0.3s ease;
transform: rotate(0deg);
}
.custom-dropdown.open .elementor-button-icon svg {
transform: rotate(180deg);
}
.dropdown-menu .option.selected {
position: relative;
}
.dropdown-menu .option.selected::after {
content: "";
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
width: 16px;
height: 13px;
background: url('data:image/svg+xml,');
background-size: contain;
}
.option.selected:hover::after {
background: url('data:image/svg+xml,');
}
.dropdown-menu a.elementor-button{
position: initial!important;
overflow: initial!important;
transform: none !important;
}
.dropdown-menu .elementor-button::before, .dropdown-menu .elementor-button::after{
content:none!important;
}
.custom-dropdown.open .elementor-button{
background-color: var(--e-global-color-primary)!important;
color:white!important;
}
/* ------------------------------
NEWS SECTION
--------------------------------*/
.news-card{
height:100%;
text-decoration:none!important;
border-radius: 20px !important;
}
.news-archive .e-loop-item .e-con-inner {
padding: 0;
}
@media (min-width: 1025px) {
.news-archive .elementor-loop-container.elementor-grid .e-loop-item:nth-child(-n+3) {
grid-column: span 3;
}
.news-archive .elementor-loop-container.elementor-grid .e-loop-item:nth-child(n+4) {
grid-column: span 2;
}
}
/* ------------------------------
NAVIGATION CARD SECTION
--------------------------------*/
.navigation-card-section > a {
text-decoration: none;
}
.navigation-card-section .elementor-button{
text-decoration:underline!important;
}
/* ------------------------------
RESOURCE SECTION
--------------------------------*/
.resource-card {
text-decoration: none !important;
}
/* ------------------------------
FAQ SECTION
--------------------------------*/
.faq-button a {
font-size: 18px !important;
}
.faq-button .elementor-button-icon svg{
width: 10px;
}
/* ------------------------------
ANIMATION OVERRIDES - HIGH PRIORITY
--------------------------------*/
/* Force shape animations */
.elementor-shape svg {
animation: shapeFloat 15s ease-in-out infinite !important;
will-change: transform !important;
}
.elementor-shape .elementor-shape-fill {
animation: shapeFill 8s ease-in-out infinite !important;
will-change: transform !important;
}
/* Force accordion animations */
.e-n-accordion-item-content {
opacity: 0 !important;
transform: translateY(-10px) !important;
transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
will-change: opacity, transform !important;
}
.e-n-accordion-item[open] .e-n-accordion-item-content {
opacity: 1 !important;
transform: translateY(0) !important;
}
.e-n-accordion-item-title-icon {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.e-n-accordion-item .e-n-accordion-item-title-icon {
transform: rotate(90deg) !important;
}
.e-n-accordion-item[open] .e-n-accordion-item-title-icon {
transform: rotate(-90deg) !important;
}
/* Force section animations */
.elementor-section {
opacity: 0 !important;
transform: translateY(20px) !important;
animation: sectionReveal 1s cubic-bezier(0.4, 0, 0.2, 1) both !important;
animation-play-state: paused !important;
}
.elementor-section.is-in-viewport {
animation-play-state: running !important;
}
/* Force image animations */
.elementor-widget-image img {
transform: scale(1) !important;
animation: imageReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) both !important;
animation-play-state: paused !important;
}
.elementor-widget-image.is-in-viewport img {
animation-play-state: running !important;
opacity:1!important;
}
@keyframes shapeFloat {
0%, 100% {
transform: translateX(-50%) translateY(0) !important;
}
50% {
transform: translateX(-50%) translateY(-8px) !important;
}
}
@keyframes shapeFill {
0%, 100% {
transform: scaleY(1) !important;
}
50% {
transform: scaleY(1.05) !important;
}
}
@keyframes sectionReveal {
to {
opacity: 1 !important;
transform: translateY(0) !important;
}
}
@keyframes imageReveal {
to {
opacity: 1 !important;
transform: scale(1) !important;
}
}