admin/dog_training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Merged layouts for core and dog sections as much as possible.

Browse Source
This commit is contained in:
Teddy Middleton-Smith
2025-07-31 16:37:11 +01:00
parent 2d1f7269e0
commit 4b1fac2dcb
53 changed files with 697 additions and 920 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
static/css/pages/core/home.css
View File

@@ -1,4 +1,7 @@
/* Common */
section {
padding: 2rem;
}
p {
width: 100%;
font-size: 16px;
@@ -14,31 +17,23 @@ ul li {
font-size: 16px;
}
section.benefits,
section.social-proof {
padding: 4rem 0;
background: var(--colour-text-background);
}
section.benefits .card.benefits,
section.social-proof .card.social-proof {
padding: 2rem;
background: var(--colour-page-background);
border-radius: 8px;
transition: transform 0.3s ease;
display: block;
section.social-proof .card.social-proof {
display: flex;
}
section.problem,
section.benefits,
section.solution,
section.testimonial {
padding: 4rem 0;
padding: 4rem 2rem;
background: var(--colour-page-background-1);
}
section.problem .card.problem,
section.benefits .card.benefits,
section.solution .card.solution,
section.testimonial .card.testimonial {
background: var(--colour-text-background);
padding: 2rem;
border-radius: 8px;
max-width: 800px;
margin: 3rem auto 0;
@@ -46,40 +41,50 @@ section.testimonial .card.testimonial {
}
section.problem ul li {
list-style: none;
}
/* Hero Section */
.hero {
padding: 8rem 0 4rem;
padding: 8rem 2rem 4rem;
background: linear-gradient(45deg, var(--colour-page-background-1), var(--colour-page-background-2)); /* linear-gradient(45deg, #f8fafc, #eff6ff); */
}
.hero-content {
max-width: 600px;
}
.hero h1 {
font-size: 3rem;
line-height: 1.2;
margin-bottom: 1.5rem;
color: var(--colour-text);
}
.hero p {
font-size: 1.25rem;
margin-bottom: 2rem;
color: var(--colour-secondary);
}
section.hero .button {
margin: 1vh auto;
margin: 0 auto;
margin-bottom: 2vh;
display: block;
background-color: var(--colour-success-title);
color: var(--colour-text-background);
}
section.hero .button:hover {
background-color: var(--colour-success-highlight);
color: var(--colour-success-title);
}
/* Problem Section */
section.problem {
background-color: var(--colour-error-highlight);
}
section.problem h2 {
color: var(--colour-error-title);
}
section.problem .card {
border-left: 4px solid var(--colour-error-accent);
}
section.problem ul li {
list-style: none;
}
/*
@@ -98,9 +103,6 @@ section.problem ul li::before {
left: 0;
}
*/
section.problem ul li {
list-style: none;
}
/* Benefits Section * /
@@ -109,15 +111,20 @@ section.benefits .section-subtitle {
font-weight: bold;
}
*/
section.benefits {
background-color: var(--colour-success-highlight);
}
section.benefits .container .card .container {
min-width: 250px;
}
/* Solution Section */
section.benefits .card.benefits,
section.social-proof .card.social-proof {
display: flex;
section.benefits h2 {
color: var(--colour-success);
}
section.benefits .card {
border-left: 4px solid var(--colour-success);
}
/* Solution Section */
section.solution .container .card {
margin-top: 1vh;
max-width: min(2000px, 80vw);
@@ -137,6 +144,13 @@ section.solution .project-thumbnail img {
border-radius: 1vh;
}
section.solution .project-thumbnail img {
overflow: hidden;
transition: transform 0.3s ease;
}
section.solution .project-thumbnail:hover {
transform: scale(1.75);
}
/* Social Proof Section * /
section.social-proof {
@@ -166,8 +180,15 @@ section.social-proof ul li {
font-size: 14px;
}
*/
section.social-proof .card.social-proof {
padding: 0;
section.social-proof {
padding: 4rem 0;
background: var(--colour-text-background);
}
section.social-proof .card.social-proof {
background: var(--colour-page-background);
border-radius: 8px;
transition: transform 0.3s ease;
padding: 1.5vh;
}
section.social-proof .section-title {
font-weight: bold;
@@ -178,8 +199,11 @@ section.social-proof .section-subtitle {
margin: 1vh 1vw;
}
section.social-proof .container {
max-width: min(600px, 90vw);
width: fit-content;
margin: 0 2vw;
}
section.social-proof > .container {
max-width: min(600px, 90vw);
margin: 1vh auto;
}
@@ -224,8 +248,8 @@ section.testimonial h2 {
/* CTA Section */
.cta-1,
.cta-2 {
padding: 6rem 0;
background: var(--colour-primary);
padding: 6rem 2rem;
background: linear-gradient(135deg, var(--colour-primary), var(--colour-text-link-visited));
color: white;
text-align: center;
}
@@ -240,13 +264,14 @@ section.cta-2 .card .container {
background-color: var(--colour-page-background);
color: var(--colour-primary);
border-radius: 1vh;
padding: 2vh 1vw;
padding: 1.5vh 3vw;
margin: 1vh;
min-width: 200px;
}
section.cta-2 .card .container h3 {
margin: 0 auto;
}
section.cta-2 .card .container p {
section.cta-2 .container p {
margin-top: 1vh;
}
/* FAQs * /
@@ -255,11 +280,6 @@ section.faq .button {
}
*/
@media screen and (max-width: 640px) {
header .navbar .nav-links {
display: none;
}
}
/* Animations */
/* Fallback styles to ensure content is visible without JS */
@@ -295,16 +315,14 @@ section.faq .button {
.delay-4 { animation-delay: 0.4s; }
/* Buttons */
.topnav .nav-links .button {
padding: 0.5vh 0.75vh;
}
.button {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: 6px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
width: fit-content;
margin: 0.75rem;
font-size: 18px;
/* border-radius: 6px; * /
margin: 0.75rem; */
font-size: 1.2rem;
}
.button-primary {