/* ============================================
FONT MAPPINGS FOR PORTFOLIO 2026
Add this CSS to Portfolio_2026_cleaned.html
============================================ */
/* Google Fonts - Add to HTML :
*/
/* ============================================
TYPOGRAPHY
============================================ */
/* H1 uses Syne */
h1,
h1.qodef-m-title,
.qodef-h1 {
font-family: 'Syne', sans-serif !important;
}
/* H2-H4 use Epilogue */
h2,
h3,
h4,
h2.qodef-m-title,
h3.qodef-m-title,
h4.qodef-m-title,
h5.qodef-m-title,
.qodef-h2,
.qodef-h3,
.qodef-h4,
.qodef-h5,
p.qodef-m-title {
font-family: 'Epilogue', sans-serif !important;
}
/* H6 and body text use system fonts */
h5, h6,
body,
p,
a,
span,
div,
.qodef-h6 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* Ensure WordPress/Elementor classes also follow the rules */
.elementor-heading-title.elementor-size-default {
font-family: inherit !important;
}
/* Marquee text uses Epilogue (it's a heading-style element) */
.qodef-m-text,
.qodef-m-text-item {
font-family: 'Epilogue', sans-serif !important;
}
/* About Me / How I Work Section */
.about-how-section {
padding: 100px 100px;
background: linear-gradient(135deg, #F5EFE0 0%, #EBE3D0 100%);
color: #1A1A1A;
}
.about-how-container {
max-width: 1400px;
margin: 0 auto;
}
.about-how-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
}
.about-column h3,
.how-column h3 {
font-size: clamp(12px, 1.5vw, 14px);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 20px;
color: #666666;
font-weight: 600;
}
.about-column h2,
.how-column h2 {
font-size: clamp(32px, 4vw, 48px);
font-weight: 700;
line-height: 1.2;
margin-bottom: 30px;
color: #1A1A1A;
}
.about-column p,
.how-column p {
font-size: clamp(15px, 1.6vw, 16px);
line-height: 1.7;
margin-bottom: 20px;
color: #1A1A1A;
opacity: 0.85;
}
.about-column p:last-child,
.how-column p:last-child {
margin-bottom: 0;
}
.how-column strong {
color: #1A1A1A;
font-weight: 600;
}
@media (max-width: 968px) {
.about-how-grid {
grid-template-columns: 1fr;
gap: 60px;
}
.about-how-section {
padding: 80px 20px;
}
}
/* Photo Grid - TWO COLUMN LAYOUT */
.photo-grid {
/* background: linear-gradient(135deg, #8B7CB6 0%, #7565A3 100%) !important; */
color: #FFFFFF !important;
padding: 0px 140px 0px 0px;
border-bottom: 1px solid #ffffff;
}
/* Two Column Container */
.photo-grid-container {
display: grid;
grid-template-columns: 65% 35%;
gap: 60px;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
/* Left Column - Large Image */
.photo-grid-image {
width: 100%;
height: auto;
/* border-radius: 12px; */
overflow: hidden;
}
.photo-grid-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Right Column - Content */
.photo-grid-content h3 {
font-size: clamp(12px, 1.5vw, 14px);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 20px;
color: #E5DEFF !important;
font-weight: 600;
}
.photo-grid-content h2 {
font-size: clamp(24px, 3vw, 36px);
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
color: #FFFFFF !important;
}
.photo-grid-content p {
font-size: clamp(14px, 1.6vw, 16px);
line-height: 1.7;
color: #FFFFFF !important;
opacity: 0.9;
}
@media (max-width: 968px) {
.photo-grid {
padding: 80px 40px !important;
}
.photo-grid-container {
grid-template-columns: 1fr;
gap: 40px;
}
.photo-grid-image {
order: 2;
}
.photo-grid-content {
order: 1;
}
}
@media (max-width: 640px) {
.photo-grid {
padding: 60px 20px !important;
}
.photo-grid-container {
gap: 30px;
}
.elementor-190 .elementor-element.elementor-element-f3db43e {
padding: 0 30px !important;
text-align: center;
}
/* case study titles */
.cl-case-study .qodef-m-title,
.elementor-190 .elementor-element.elementor-element-8a4000a .qodef-qi-section-title .qodef-m-title,
.elementor-190 .elementor-element.elementor-element-29d034d .qodef-qi-section-title .qodef-m-title,
.elementor-190 .elementor-element.elementor-element-5c4e2a2 .qodef-qi-section-title .qodef-m-title {
font-size: 48px;
text-transform: none;
line-height: 52px;
}
}
/* Mosaic Grid - 2 rows, 8 columns, No Gaps */
.photo-grid-mosaic {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 0;
width: 100%;
}
.photo-grid-mosaic img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
aspect-ratio: 1;
}
/* Case Study Hard Shadows */
.section-1 .case-study-image,
.section-2 .case-study-image,
.section-3 .case-study-image,
section:nth-of-type(3) .case-study-image,
section:nth-of-type(4) .case-study-image,
section:nth-of-type(5) .case-study-image {
box-shadow: 12px 12px 0 0 #ffffff !important;
}
.case-study-image img,
.elementor-element-8293827 img,
.elementor-element-b4bf19b img,
.elementor-element-c2a2f24 img {
box-shadow: 12px 12px 0 0 #ffffff !important;
}
/* ============================================
CHET ADDED
============================================ */
section ul {
list-style-position: outside;
margin-left: 2.25em;
margin-top: .75em;
padding-right: .75em;
}
#qodef-page-content > div > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-a0bc48c.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.qodef-elementor-content-no > div > div.elementor-column.elementor-col-50.elementor-top-column.elementor-element.elementor-element-3e05f22.qodef-sticky-column--yes.qodef-sticky-column-disable.qodef-sticky-column-disable--768 > div > div > div {
padding: 12.5% 13% 25% 0%;
}
h5{
font-size: 16px;
opacity: 70%;
padding-bottom: 10px;
}
h6{
font-size: 13px;
font-weight: 600;
line-height: 18px;
opacity: 70%;
}
.qodef-e-text {
padding-bottom: 64px;
}
.elementor-190 .elementor-element.elementor-element-2dacf6d{
padding-top: 50px;
}
/* page subtitle */
#qodef-page-content > div > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-5c468d2.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.qodef-elementor-content-no > div > div > div > div.elementor-element.elementor-element-3f2cd5e.elementor-widget.elementor-widget-text-editor > p{
color: #FF6B7A;
font-size: 35px;
/* font-family: 'Epilogue' !important; */
font-weight: 400;
letter-spacing: 5px;
text-transform: uppercase;
}
/* header content */
#qodef-page-content > div > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-5c468d2.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.qodef-elementor-content-no > div > div > div > div.elementor-element.elementor-element-43eb816.e-grid.e-con-boxed.qodef-elementor-content-no.e-con.e-parent.e-lazyloaded > div{
padding-bottom: 60px;
/* padding-top: 40px; */
}
/* header content left */
#qodef-page-content > div > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-5c468d2.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.qodef-elementor-content-no > div > div > div > div.elementor-element.elementor-element-43eb816.e-grid.e-con-boxed.qodef-elementor-content-no.e-con.e-parent.e-lazyloaded > div > div.elementor-element.elementor-element-f3db43e.elementor-widget.elementor-widget-text-editor > p {
font-size: 24px;
line-height: 30px;
}
#qodef-page-content > div > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-5c468d2.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.qodef-elementor-content-no > div > div > div > div.elementor-element.elementor-element-43eb816.e-grid.e-con-boxed.qodef-elementor-content-no.e-con.e-parent.e-lazyloaded > div > div.elementor-element.elementor-element-f3db43e.elementor-widget.elementor-widget-text-editor{
padding-right: 10px;
}
/* header content right */
#qodef-page-content > div > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-5c468d2.elementor-section-full_width.elementor-section-height-default.elementor-section-height-default.qodef-elementor-content-no > div > div > div > div.elementor-element.elementor-element-43eb816.e-grid.e-con-boxed.qodef-elementor-content-no.e-con.e-parent.e-lazyloaded > div > div.elementor-element.elementor-element-ba8c43d.elementor-widget.elementor-widget-text-editor{
padding-left: 10px;
}
.how-column ul {
color: #1A1A1A;
margin: 0px;
}
.how-column ul li{
border-bottom: 1px solid burlywood;
list-style-type: none;
padding: 10px 0;
font-size: 19px;
font-weight: 300;
line-height: 32px;
}
.how-column ul :first-child {
padding-top: 0px;
}