/* Start custom CSS for html, class: .elementor-element-08a8c95 *//* =========================================================
LIFEHUB — ABOUT PAGE
========================================================= */
/* =========================================================
VARIABLES
========================================================= */
:root {
--background: #faf9f7;
--white: #ffffff;
--dark: #1d1d21;
--text: #29282d;
--muted: #77747b;
--purple: #7567d9;
--purple-light: #eeeaff;
--pink: #f8e7ee;
--blue: #e7f0ff;
--cream: #f7efe2;
--border: #e7e3df;
--shadow:
0 20px 60px rgba(30, 30, 35, 0.10);
}
/* =========================================================
RESET
========================================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "DM Sans", sans-serif;
background: var(--background);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
img {
display: block;
max-width: 100%;
}
::selection {
background: var(--purple);
color: white;
}
/* =========================================================
COMMON
========================================================= */
section {
width: min(1180px, 90%);
margin-left: auto;
margin-right: auto;
}
.section-tag {
color: var(--purple);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.18em;
margin-bottom: 18px;
}
/* =========================================================
HERO
========================================================= */
.about-hero {
min-height: 780px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 80px;
padding: 80px 0 110px;
}
/* =========================================================
HERO TEXT
========================================================= */
.hero-content {
max-width: 560px;
}
.hero-content h1 {
font-family: "Playfair Display", serif;
font-size: clamp(4rem, 7vw, 6.8rem);
line-height: 0.95;
letter-spacing: -0.06em;
font-weight: 600;
margin-bottom: 30px;
}
.hero-content h1 span {
display: block;
color: var(--purple);
}
.hero-description {
max-width: 510px;
color: var(--muted);
font-size: 1.03rem;
line-height: 1.85;
margin-bottom: 35px;
}
/* =========================================================
BUTTONS
========================================================= */
.hero-buttons {
display: flex;
align-items: center;
gap: 25px;
flex-wrap: wrap;
}
.primary-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 15px 24px;
background: var(--dark);
color: white;
border-radius: 50px;
font-size: 0.82rem;
font-weight: 600;
transition: all 0.3s ease;
}
.primary-button:hover {
background: var(--purple);
transform: translateY(-3px);
box-shadow:
0 12px 30px rgba(117, 103, 217, 0.25);
}
.text-button {
font-size: 0.82rem;
font-weight: 600;
transition: 0.3s ease;
}
.text-button:hover {
color: var(--purple);
}
/* =========================================================
IMAGE AREA
========================================================= */
.hero-image-area {
min-height: 620px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* =========================================================
PROFILE FRAME
========================================================= */
.profile-frame {
width: min(450px, 90%);
padding: 14px;
background: var(--white);
border-radius: 34px;
box-shadow: var(--shadow);
position: relative;
transform: rotate(2deg);
transition: 0.5s ease;
}
.profile-frame:hover {
transform: rotate(0deg) translateY(-8px);
box-shadow:
0 30px 80px rgba(30, 30, 35, 0.16);
}
/* =========================================================
PROFILE IMAGE
========================================================= */
.profile-image {
width: 100%;
height: 560px;
overflow: hidden;
border-radius: 25px;
background: var(--pink);
}
.profile-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.7s ease;
}
.profile-frame:hover .profile-image img {
transform: scale(1.03);
}
/* =========================================================
IMAGE DECORATIONS
========================================================= */
.image-star,
.image-heart {
position: absolute;
width: 52px;
height: 52px;
display: grid;
place-items: center;
background: white;
border-radius: 50%;
box-shadow: var(--shadow);
z-index: 5;
}
.image-star {
color: var(--purple);
font-size: 1.2rem;
}
.image-heart {
color: #d27596;
font-size: 1.4rem;
}
.star-one {
top: -22px;
right: 35px;
}
.heart-one {
bottom: 40px;
left: -25px;
}
.star-two {
bottom: 80px;
right: -25px;
}
/* =========================================================
FLOATING CARDS
========================================================= */
.floating-card {
position: absolute;
z-index: 10;
display: flex;
align-items: center;
gap: 12px;
background: white;
padding: 13px 18px;
border-radius: 50px;
box-shadow: var(--shadow);
animation: float 4s ease-in-out infinite;
}
.floating-icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
background: var(--purple-light);
color: var(--purple);
border-radius: 50%;
}
.pink-icon {
background: var(--pink);
color: #d27596;
}
.floating-card strong {
display: block;
font-size: 0.75rem;
}
.floating-card small {
display: block;
color: var(--muted);
font-size: 0.63rem;
}
.card-one {
top: 18%;
left: -3%;
}
.card-two {
right: -3%;
bottom: 15%;
animation-delay: 1s;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* =========================================================
INTRODUCTION
========================================================= */
.intro-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
padding: 130px 0;
border-top: 1px solid var(--border);
}
.intro-heading h2,
.section-heading h2,
.approach-left h2,
.personal-note h2,
.cta-section h2 {
font-family: "Playfair Display", serif;
font-weight: 600;
font-size: clamp(2.8rem, 5vw, 4.8rem);
line-height: 1.05;
letter-spacing: -0.05em;
}
.intro-heading h2 span,
.section-heading h2 span,
.approach-left h2 span,
.personal-note h2 span,
.cta-section h2 span {
color: var(--purple);
}
.intro-content {
padding-top: 35px;
}
.intro-content p {
color: var(--muted);
font-size: 1rem;
line-height: 1.9;
margin-bottom: 22px;
}
/* =========================================================
JOURNEY
========================================================= */
.journey-section {
padding: 70px 0 130px;
}
.section-heading {
margin-bottom: 60px;
}
.section-heading > p:last-child {
color: var(--muted);
margin-top: 18px;
}
.timeline {
max-width: 900px;
margin: auto;
position: relative;
}
.timeline::before {
content: "";
position: absolute;
left: 34px;
top: 20px;
bottom: 20px;
width: 1px;
background: var(--border);
}
.timeline-item {
display: grid;
grid-template-columns: 68px 1fr;
gap: 30px;
padding-bottom: 50px;
position: relative;
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-number {
width: 68px;
height: 68px;
border-radius: 50%;
background: var(--pink);
color: #a35f79;
display: grid;
place-items: center;
font-size: 0.72rem;
font-weight: 700;
border: 7px solid var(--background);
z-index: 2;
}
.timeline-number.lavender {
background: var(--purple-light);
color: var(--purple);
}
.timeline-number.blue {
background: var(--blue);
color: #5377ad;
}
.timeline-number.yellow {
background: #f7efc8;
color: #a38631;
}
.timeline-content {
padding-top: 8px;
}
.timeline-content small {
color: var(--purple);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.13em;
}
.timeline-content h3 {
font-family: "Playfair Display", serif;
font-size: 1.8rem;
margin: 5px 0 8px;
}
.timeline-content p {
max-width: 650px;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.75;
}
/* =========================================================
INTERESTS
========================================================= */
.interest-section {
padding: 80px 0 130px;
border-top: 1px solid var(--border);
}
.interest-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.interest-card {
min-height: 330px;
padding: 32px;
border-radius: 22px;
transition: 0.4s ease;
}
.interest-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow);
}
.interest-card.pink {
background: var(--pink);
}
.interest-card.lavender {
background: var(--purple-light);
}
.interest-card.blue {
background: var(--blue);
}
.interest-card.cream {
background: var(--cream);
}
.interest-icon {
width: 50px;
height: 50px;
display: grid;
place-items: center;
background: white;
border-radius: 50%;
color: var(--purple);
margin-bottom: 28px;
font-size: 1.2rem;
}
.interest-card h3 {
font-family: "Playfair Display", serif;
font-size: 1.45rem;
margin-bottom: 13px;
}
.interest-card p {
color: var(--muted);
font-size: 0.84rem;
line-height: 1.7;
margin-bottom: 20px;
}
.interest-card a {
color: var(--purple);
font-size: 0.75rem;
font-weight: 700;
}
/* =========================================================
APPROACH
========================================================= */
.approach-section {
padding: 70px 0 130px;
}
.approach-box {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
padding: 80px;
background: var(--dark);
color: white;
border-radius: 30px;
overflow: hidden;
position: relative;
}
.approach-box::after {
content: "✦";
position: absolute;
right: 30px;
top: -50px;
font-size: 13rem;
color: rgba(255,255,255,0.04);
}
.approach-left {
position: relative;
z-index: 2;
}
.approach-left .section-tag {
color: #a99ff0;
}
.approach-left h2 span {
color: #a99ff0;
}
.approach-right {
position: relative;
z-index: 2;
}
.approach-right > p {
color: #c5c2c9;
font-size: 0.95rem;
line-height: 1.8;
margin-bottom: 20px;
}
.approach-points {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 35px;
}
.approach-points div {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.approach-points span {
color: #a99ff0;
font-size: 0.7rem;
font-weight: 700;
}
.approach-points strong {
font-size: 0.8rem;
}
/* =========================================================
PERSONAL NOTE
========================================================= */
.personal-note {
text-align: center;
padding: 130px 20px;
}
.note-symbol {
font-size: 5rem;
color: rgba(117, 103, 217, 0.13);
margin-bottom: 10px;
}
.personal-note h2 {
max-width: 850px;
margin: auto;
}
.note-text {
max-width: 600px;
margin: 30px auto;
color: var(--muted);
line-height: 1.8;
}
.signature {
font-family: "Playfair Display", serif;
color: var(--purple);
font-size: 1.1rem;
}
/* =========================================================
CTA
========================================================= */
.cta-section {
width: 100%;
max-width: none;
text-align: center;
padding: 130px 20px;
background: var(--purple-light);
}
.cta-section h2 {
max-width: 800px;
margin: auto;
}
.cta-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-top: 35px;
}
.outline-button {
padding: 14px 23px;
border: 1px solid var(--dark);
border-radius: 50px;
font-size: 0.82rem;
font-weight: 600;
transition: 0.3s ease;
}
.outline-button:hover {
background: var(--dark);
color: white;
transform: translateY(-3px);
}
/* =========================================================
FOOTER
========================================================= */
footer {
background: var(--dark);
color: white;
text-align: center;
padding: 60px 20px;
}
.footer-logo {
font-size: 1.7rem;
font-weight: 700;
margin-bottom: 10px;
}
.footer-logo span {
color: #a99ff0;
}
footer > p {
color: #aaa7b0;
font-size: 0.85rem;
margin-bottom: 25px;
}
.footer-links,
.social-links {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 22px;
}
.footer-links {
margin-bottom: 22px;
}
.footer-links a {
color: #d5d2d8;
font-size: 0.78rem;
transition: 0.3s ease;
}
.footer-links a:hover {
color: #a99ff0;
}
.social-links {
margin-bottom: 28px;
gap: 12px;
}
.social-links a {
padding: 8px 15px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 50px;
color: #d5d2d8;
font-size: 0.75rem;
transition: 0.3s ease;
}
.social-links a:hover {
color: #a99ff0;
border-color: #a99ff0;
}
footer small {
color: #77747a;
font-size: 0.7rem;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.about-hero {
grid-template-columns: 1fr;
gap: 50px;
padding-top: 60px;
}
.hero-content {
max-width: 750px;
}
.hero-image-area {
min-height: 650px;
}
.intro-section {
gap: 50px;
}
.interest-grid {
grid-template-columns: repeat(2, 1fr);
}
.approach-box {
padding: 60px;
gap: 50px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
section {
width: 88%;
}
/* HERO */
.about-hero {
min-height: auto;
padding: 55px 0 90px;
}
.hero-content h1 {
font-size: clamp(3.5rem, 17vw, 5rem);
}
.hero-description {
font-size: 0.95rem;
}
.hero-buttons {
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
/* IMAGE */
.hero-image-area {
min-height: 540px;
}
.profile-frame {
width: 88%;
}
.profile-image {
height: 470px;
}
.card-one {
left: -5px;
top: 10%;
}
.card-two {
right: -5px;
bottom: 8%;
}
.floating-card {
padding: 10px 13px;
}
.floating-icon {
width: 34px;
height: 34px;
}
/* INTRO */
.intro-section {
grid-template-columns: 1fr;
gap: 15px;
padding: 90px 0;
}
.intro-content {
padding-top: 10px;
}
/* JOURNEY */
.journey-section {
padding: 70px 0 90px;
}
.timeline-item {
grid-template-columns: 55px 1fr;
gap: 18px;
}
.timeline-number {
width: 55px;
height: 55px;
}
.timeline::before {
left: 27px;
}
.timeline-content h3 {
font-size: 1.5rem;
}
/* INTERESTS */
.interest-section {
padding: 70px 0 90px;
}
.interest-grid {
grid-template-columns: 1fr;
}
.interest-card {
min-height: auto;
}
/* APPROACH */
.approach-section {
padding: 50px 0 90px;
}
.approach-box {
grid-template-columns: 1fr;
padding: 45px 30px;
gap: 35px;
}
/* PERSONAL */
.personal-note {
padding: 90px 20px;
}
/* CTA */
.cta-section {
padding: 90px 20px;
}
.cta-buttons {
flex-direction: column;
}
.cta-buttons .primary-button,
.cta-buttons .outline-button {
width: 100%;
max-width: 270px;
text-align: center;
}
/* FOOTER */
footer {
padding: 50px 20px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 450px) {
.hero-content h1 {
font-size: 3.3rem;
}
.profile-frame {
width: 92%;
}
.profile-image {
height: 430px;
}
.image-star,
.image-heart {
width: 43px;
height: 43px;
}
.star-one {
right: 20px;
}
.heart-one {
left: -18px;
}
.star-two {
right: -18px;
}
.intro-heading h2,
.section-heading h2,
.approach-left h2,
.personal-note h2,
.cta-section h2 {
font-size: 2.6rem;
}
}
```css
/* =====================================================
MY LEARNING JOURNEY LINKS
Added without changing existing About page design
===================================================== */
.journey-story-link {
display: inline-block;
margin-top: 18px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
color: inherit;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.journey-story-link:hover {
opacity: 0.7;
transform: translateX(5px);
}
/* =====================================================
JOURNEY SECTION LINK
===================================================== */
.journey-section .section-heading .journey-story-link {
margin-top: 16px;
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 600px) {
.journey-story-link {
font-size: 13px;
margin-top: 14px;
}
}
```/* End custom CSS */