/* ============================================ Conflenti.com — Main Stylesheet ============================================ */ @import url('variables.css'); /* Google Fonts loaded directly via in each page's for parallel/preconnect support. */ /* ---------- Reset ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--color-near-black); background: var(--color-white); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--color-near-black); } h1 { font-size: clamp(2rem, 5vw, 3.25rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); } h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); } h4 { font-size: 1.125rem; } p { margin-bottom: var(--space-sm); } p:last-child { margin-bottom: 0; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); } .section { padding: var(--space-2xl) 0; } .section--gray { background: var(--color-light-gray); } .section--navy { background: var(--color-navy); color: var(--color-white); } .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--color-white); } /* Override mid-gray text inside navy sections so it stays readable */ .section--navy .cta-block p, .section--navy p { color: rgba(255, 255, 255, 0.85); } /* ---------- Navigation ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: var(--color-navy); z-index: 1000; transition: box-shadow var(--transition); } .nav.scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); } .nav__logo img { height: 56px; width: auto; filter: brightness(0) invert(1); } .nav__links { display: flex; align-items: center; gap: var(--space-md); } .nav__links a { color: var(--color-white); font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transition: color var(--transition); white-space: nowrap; } .nav__links a:hover, .nav__links a.active { color: var(--color-orange); } .nav__links a[target="_blank"]::after { content: ''; } .nav__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; } .nav__hamburger span { display: block; width: 24px; height: 2px; background: var(--color-white); transition: var(--transition); } /* ---------- Mobile Nav ---------- */ .nav__mobile { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; background: var(--color-navy); padding: var(--space-lg) var(--space-md); z-index: 999; overflow-y: auto; } .nav__mobile.open { display: flex; flex-direction: column; gap: var(--space-sm); } .nav__mobile a { color: var(--color-white); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: var(--space-xs) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: color var(--transition); } .nav__mobile a:hover, .nav__mobile a.active { color: var(--color-orange); } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; margin-top: var(--nav-height); overflow: hidden; } .hero--short { min-height: 40vh; } .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center top; background-repeat: no-repeat; } .hero__bg::after { content: ''; position: absolute; inset: 0; background: rgba(27, 42, 74, 0.7); } .hero__content { position: relative; z-index: 1; max-width: 800px; padding: var(--space-xl) var(--space-md); color: var(--color-white); } .hero__content h1 { color: var(--color-white); margin-bottom: var(--space-sm); } .hero__content p { font-size: 1.15rem; line-height: 1.8; opacity: 0.9; } .hero__tagline { font-family: var(--font-heading); font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 600; color: var(--color-orange); margin-bottom: var(--space-xs); } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 0.85rem 2rem; font-family: var(--font-heading); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: var(--border-radius); border: none; cursor: pointer; transition: all var(--transition); text-align: center; } .btn--teal { background: var(--color-teal-text); color: var(--color-white); } .btn--teal:hover { background: #0c5959; transform: translateY(-1px); } .btn--dark { background: var(--color-near-black); color: var(--color-white); } .btn--dark:hover { background: #333; transform: translateY(-1px); } .btn--outline { background: transparent; color: var(--color-white); border: 2px solid var(--color-white); } .btn--outline:hover { background: var(--color-white); color: var(--color-navy); } /* ---------- Cards ---------- */ .card { background: var(--color-white); border-radius: var(--border-radius); padding: var(--space-lg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .card--gray { background: var(--color-light-gray); box-shadow: none; } .card h3 { margin-bottom: var(--space-xs); } .card p { color: var(--color-mid-gray); } /* ---------- Service / Project Cards ---------- */ .project-card { padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-border); } .project-card:last-child { border-bottom: none; } .project-card__label { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-teal); margin-bottom: var(--space-xs); } .project-card__title { margin-bottom: var(--space-sm); } .project-card__body { max-width: 720px; } .project-card__result { margin-top: var(--space-sm); padding: 0.75rem 1rem; background: rgba(42, 191, 191, 0.08); border-left: 3px solid var(--color-teal); border-radius: 0 var(--border-radius) var(--border-radius) 0; font-size: 0.95rem; color: var(--color-near-black); } .project-card__image { margin-top: var(--space-md); border-radius: var(--border-radius); overflow: hidden; } /* ---------- Grid ---------- */ .grid { display: grid; gap: var(--space-lg); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } /* ---------- Pull Quote ---------- */ .pullquote { background: var(--color-light-gray); padding: var(--space-lg); border-left: 4px solid var(--color-orange); margin: var(--space-lg) 0; font-style: italic; font-size: 1.15rem; line-height: 1.8; color: var(--color-near-black); } /* ---------- CTA Block ---------- */ .cta-block { text-align: center; padding: var(--space-xl) var(--space-md); } .cta-block h2 { margin-bottom: var(--space-xs); } .cta-block p { color: var(--color-mid-gray); margin-bottom: var(--space-md); max-width: 600px; margin-left: auto; margin-right: auto; } /* ---------- Social Links ---------- */ .social-row { display: flex; justify-content: center; gap: var(--space-sm); padding: var(--space-lg) 0; flex-wrap: wrap; } .social-row a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.2rem; background: var(--color-navy); color: var(--color-white); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 50px; transition: all var(--transition); } .social-row a:hover { background: var(--color-orange); transform: translateY(-1px); } /* ---------- Footer ---------- */ .footer { background: var(--color-navy); color: rgba(255, 255, 255, 0.7); padding: var(--space-xl) 0 var(--space-lg); } .footer__inner { text-align: center; } .footer__logo { margin: 0 auto var(--space-md); } .footer__logo img { height: 48px; width: auto; margin: 0 auto; filter: brightness(0) invert(1); opacity: 0.85; } .footer__nav { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); } .footer__nav a { font-size: 0.85rem; transition: color var(--transition); } .footer__nav a:hover { color: var(--color-white); } .footer__legal { font-size: 0.8rem; line-height: 1.8; } .footer__legal a { text-decoration: underline; transition: color var(--transition); } .footer__legal a:hover { color: var(--color-white); } /* ---------- Contact Form ---------- */ .form { max-width: 600px; margin: 0 auto; } .form__group { margin-bottom: var(--space-md); } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); } .form label { display: block; font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; color: var(--color-near-black); } .form input, .form textarea { width: 100%; padding: 0.75rem 1rem; font-family: var(--font-body); font-size: 1rem; border: 1px solid var(--color-border); border-radius: var(--border-radius); transition: border-color var(--transition); background: var(--color-white); color: var(--color-near-black); } .form input:focus, .form textarea:focus { outline: none; border-color: var(--color-teal); } .form textarea { min-height: 150px; resize: vertical; } .form__status { text-align: center; margin-top: var(--space-sm); font-weight: 500; } .form__status--success { color: #16a34a; } .form__status--error { color: #dc2626; } /* ---------- Credential / Highlight Cards ---------- */ .credential { padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); } .credential:last-child { border-bottom: none; } .credential__year { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: var(--color-orange-text); text-transform: uppercase; letter-spacing: 0.05em; } .credential__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; margin: 0.25rem 0; } .credential__desc { color: var(--color-mid-gray); font-size: 0.95rem; } /* ---------- Photo Grid ---------- */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-sm); margin: var(--space-lg) 0; } .photo-grid img { width: 100%; height: 380px; object-fit: cover; object-position: top center; border-radius: var(--border-radius); } /* ---------- Bullet List ---------- */ .bullet-list { list-style: none; padding: 0; } .bullet-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; } .bullet-list li::before { content: ''; position: absolute; left: 0; top: 0.7rem; width: 8px; height: 8px; background: var(--color-teal); border-radius: 50%; } /* ---------- Spotify Embed ---------- */ .spotify-embed { margin: var(--space-md) 0; border-radius: var(--border-radius); overflow: hidden; } .spotify-embed iframe { width: 100%; border: none; } /* ---------- Video Embed ---------- */ .video-embed { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden; border-radius: var(--border-radius); } .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .video-embed__placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-navy); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-md); } .video-embed__label { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-orange); margin-bottom: var(--space-xs); } .video-embed__cta { color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; } /* ---------- Process Steps ---------- */ .process-step { text-align: center; padding: var(--space-lg) var(--space-md); } .process-step__number { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--color-navy); color: var(--color-white); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; margin-bottom: var(--space-sm); } .process-step__title { margin-bottom: var(--space-xs); } .process-step p { color: var(--color-mid-gray); font-size: 0.95rem; } /* ---------- Credibility Bar ---------- */ .credibility-bar { padding: var(--space-lg) 0; } .credibility-bar__split { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-xl); } .credibility-bar__group { flex: 1; text-align: center; } .credibility-bar__divider { width: 1px; min-height: 80px; background: var(--color-border); flex-shrink: 0; align-self: stretch; } .credibility-bar__label { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-mid-gray); margin-bottom: var(--space-sm); } .credibility-bar__items { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); flex-wrap: wrap; } .credibility-bar__item img { height: 32px; width: auto; opacity: 0.4; filter: grayscale(100%); transition: all var(--transition); } .credibility-bar__item img:hover { opacity: 0.75; filter: grayscale(0%); } .credibility-bar__item--text { display: flex; flex-direction: column; align-items: center; line-height: 1; opacity: 0.75; transition: opacity var(--transition); } .credibility-bar__item--text:hover { opacity: 1; } .credibility-bar__item--text span { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; color: var(--color-near-black); } .credibility-bar__item--text small { font-family: var(--font-heading); font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-mid-gray); margin-top: 2px; } .credibility-bar__text { margin-top: var(--space-sm); font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600; color: var(--color-mid-gray); letter-spacing: 0.02em; } /* ---------- Testimonials ---------- */ .testimonial { background: var(--color-white); border-radius: var(--border-radius); padding: var(--space-lg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; justify-content: space-between; } .testimonial__quote { font-size: 1.05rem; font-style: italic; line-height: 1.7; color: var(--color-near-black); margin-bottom: var(--space-md); position: relative; padding-left: 1.25rem; border-left: 3px solid var(--color-orange); } .testimonial__author { margin-top: auto; } .testimonial__name { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--color-near-black); margin-bottom: 0; } .testimonial__role { font-size: 0.85rem; color: var(--color-mid-gray); margin-bottom: 0; } /* ---------- Hero Split (for portrait images — legacy, kept for compatibility) ---------- */ .hero--split { min-height: 70vh; margin-top: var(--nav-height); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: var(--color-navy); } .hero--split .hero__text { display: flex; flex-direction: column; justify-content: center; padding: var(--space-2xl) var(--space-xl) var(--space-2xl) var(--space-2xl); color: var(--color-white); } .hero--split .hero__text h1 { color: var(--color-white); margin-bottom: var(--space-sm); } .hero--split .hero__text p { font-size: 1.15rem; opacity: 0.9; } .hero--split .hero__tagline { font-family: var(--font-heading); font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 600; color: var(--color-orange); margin-bottom: var(--space-xs); } .hero--split .hero__image { position: relative; overflow: hidden; } .hero--split .hero__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .hero--split-reverse { direction: ltr; } .hero--split-reverse .hero__image { order: -1; } .hero--split-reverse .hero__text { padding: var(--space-2xl) var(--space-2xl) var(--space-2xl) var(--space-xl); } /* ---------- Low-res hero overlay boost ---------- */ .hero__bg--low-res::after { background: rgba(27, 42, 74, 0.78); } /* ---------- Hero Home (premium portrait hero) ---------- */ .hero--home { margin-top: var(--nav-height); min-height: calc(100vh - var(--nav-height)); display: grid; grid-template-columns: 1fr 520px; background: var(--color-navy); overflow: hidden; position: relative; } /* Subtle diagonal accent behind text */ .hero--home::before { content: ''; position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient(135deg, #243660 0%, var(--color-navy) 60%); pointer-events: none; } .hero--home .hero__text { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--space-2xl) var(--space-xl) var(--space-2xl) var(--space-2xl); color: var(--color-white); } .hero--home .hero__eyebrow { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-teal); margin-bottom: var(--space-sm); display: flex; align-items: center; gap: 0.6rem; } .hero--home .hero__eyebrow::before { content: ''; display: block; width: 32px; height: 2px; background: var(--color-teal); flex-shrink: 0; } .hero--home .hero__text h1 { color: var(--color-white); font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1.1; margin-bottom: var(--space-md); font-weight: 800; } .hero--home .hero__text h1 em { font-style: normal; color: var(--color-orange); } .hero--home .hero__subtext { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.7; opacity: 0.85; max-width: 520px; margin-bottom: var(--space-lg); } .hero--home .hero__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; } .hero--home .hero__image { position: relative; overflow: hidden; align-self: stretch; } .hero--home .hero__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* Gradient blend from image into navy on the left edge */ .hero--home .hero__image::before { content: ''; position: absolute; top: 0; left: 0; width: 80px; height: 100%; background: linear-gradient(to right, var(--color-navy), transparent); z-index: 1; pointer-events: none; } /* Subtle bottom fade so image meets page cleanly */ .hero--home .hero__image::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to top, var(--color-navy), transparent); z-index: 1; pointer-events: none; } /* ---------- Hero Page (inner page banner — no image) ---------- */ .hero--page { margin-top: var(--nav-height); background: var(--color-navy); padding: var(--space-xl) 0; position: relative; overflow: hidden; } /* Decorative horizontal rule accent */ .hero--page::before { content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--color-orange), var(--color-teal), transparent); } /* Subtle geometric background texture */ .hero--page::after { content: ''; position: absolute; top: -60px; right: -60px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(42, 191, 191, 0.06) 0%, transparent 70%); pointer-events: none; } .hero--page .hero__page-inner { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-md); } .hero--page .hero__page-eyebrow { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-orange); margin-bottom: 0.6rem; } .hero--page .hero__page-title { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; color: var(--color-white); line-height: 1.15; margin-bottom: 0; } .hero--page .hero__page-subtitle { margin-top: 0.75rem; font-size: 1.05rem; line-height: 1.7; color: rgba(255, 255, 255, 0.72); max-width: 640px; margin-bottom: 0; } /* ---------- Utility Classes ---------- */ /* Centered section heading with bottom spacing */ .section-heading--centered { text-align: center; margin-bottom: var(--space-xl); } /* Section heading with just bottom spacing */ .section-heading--spaced { margin-bottom: var(--space-xl); } /* Lead paragraph — max-width 720px + bottom spacing */ .section-lead { max-width: 720px; margin-bottom: var(--space-lg); } /* Intro paragraph — larger font + max-width */ .section-intro { max-width: 720px; font-size: 1.1rem; margin-bottom: var(--space-lg); } /* Smaller intro paragraph */ .section-intro-sm { font-size: 1.1rem; } /* Body paragraph — max-width only */ .section-body { max-width: 720px; margin-bottom: var(--space-md); } /* Closing paragraph — top spacing + max-width */ .section-closing { max-width: 720px; margin-top: var(--space-lg); } /* Break heading — used mid-page for a subhead with top spacing */ .section-break-heading { margin-top: var(--space-xl); } /* Centered container */ .container--centered { text-align: center; } /* Narrow container (760px max-width) */ .container--narrow { max-width: 760px; } /* Trusted-by label */ .trusted-by-label { color: var(--color-mid-gray); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-md); } /* Trusted-by list */ .trusted-by-list { max-width: 720px; margin: 0 auto; font-size: 1.05rem; } /* Card link row — link at bottom of card with top spacing */ .card__link-row { margin-top: var(--space-sm); } /* Card CTA row — button at bottom of card with top spacing */ .card__cta { margin-top: var(--space-md); } /* Centered card */ .card--centered { text-align: center; } /* Teal inline link */ .link--teal { color: var(--color-teal-text); font-weight: 600; } .link--teal:hover { color: #0c5959; text-decoration: underline; } /* Medium-weight teal link */ .link--medium { font-weight: 500; } /* Full-width button */ .btn--full { width: 100%; } /* Bullet list with top spacing */ .bullet-list--spaced { margin-top: var(--space-md); } /* Centered bullet list — block is centered (via max-width + margin auto) but text inside each li stays left-aligned so bullets and text read naturally */ .bullet-list--centered { text-align: left; } /* CTA note — small muted text below a CTA button */ .cta-note { margin-top: var(--space-sm); font-size: 0.9rem; color: var(--color-mid-gray); } /* CTA note on dark background */ .cta-note--light { margin-top: var(--space-sm); color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; } /* CTA body text on dark background */ .cta-block__body--light { color: rgba(255, 255, 255, 0.8); max-width: 600px; margin: 0 auto var(--space-md); } /* Contact page elements */ .contact-email { margin-top: var(--space-sm); } .contact-agency { margin-top: var(--space-xl); } .contact-agency--secondary { margin-top: var(--space-lg); } /* Policy page heading */ .policy-heading { margin-top: var(--space-lg); } /* Project card accent variant — teal top border */ .project-card--accent { border-top: 2px solid var(--color-teal); } /* Photo grid compact variant — no top margin, flush bottom */ .photo-grid--compact { margin-top: var(--space-sm); margin-bottom: 0; } /* Photo grid top spacing variant */ .photo-grid--top { margin-top: var(--space-lg); } /* License info lines (real estate page) */ .license-line { margin-bottom: var(--space-xs); } .license-note { margin-bottom: var(--space-md); } /* Instagram embed wrapper — mobile safe */ .instagram-embed-wrap { margin-top: var(--space-md); max-width: 540px; overflow: hidden; } /* ---------- Blog Styles ---------- */ /* Blog index — post list */ .blog-list { max-width: 720px; margin: 0 auto; } .blog-card { padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border); } .blog-card:first-child { padding-top: 0; } .blog-card:last-child { border-bottom: none; } .blog-card__meta { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: 0.6rem; flex-wrap: wrap; } .blog-card__category { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-teal); } .blog-card__date { font-size: 0.85rem; color: var(--color-mid-gray); } .blog-card__title { font-size: clamp(1.2rem, 2.5vw, 1.5rem); font-weight: 700; line-height: 1.3; margin-bottom: 0.6rem; transition: color var(--transition); } .blog-card__title a { color: var(--color-near-black); } .blog-card__title a:hover { color: var(--color-navy); } .blog-card__excerpt { color: var(--color-mid-gray); font-size: 0.975rem; line-height: 1.7; margin-bottom: var(--space-sm); max-width: 640px; } .blog-card__read-more { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-orange); transition: color var(--transition); } .blog-card__read-more:hover { color: var(--color-navy); } /* Blog index empty state / coming soon note */ .blog-coming-soon { max-width: 600px; margin: var(--space-xl) auto; text-align: center; color: var(--color-mid-gray); font-size: 0.95rem; line-height: 1.8; } .blog-coming-soon a { color: var(--color-teal); font-weight: 600; } /* ---------- Blog Post (article page) ---------- */ /* Back link at top */ .blog-post__back { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-mid-gray); margin-bottom: var(--space-lg); transition: color var(--transition); } .blog-post__back:hover { color: var(--color-navy); } .blog-post__back::before { content: '←'; font-size: 0.9rem; } /* Article header */ .blog-post__header { margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); } .blog-post__category { font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-teal); margin-bottom: 0.75rem; } .blog-post__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: var(--space-sm); } .blog-post__meta { display: flex; align-items: center; gap: var(--space-sm); font-size: 0.875rem; color: var(--color-mid-gray); flex-wrap: wrap; } .blog-post__meta-sep { opacity: 0.4; } /* Article body */ .blog-post__body { font-size: 1.05rem; line-height: 1.8; color: var(--color-near-black); } .blog-post__body p { margin-bottom: 1.5rem; } .blog-post__body p:last-child { margin-bottom: 0; } .blog-post__body h2 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); font-weight: 700; margin-top: var(--space-xl); margin-bottom: var(--space-sm); padding-top: var(--space-sm); border-top: 2px solid var(--color-border); color: var(--color-near-black); } .blog-post__body h3 { font-size: clamp(1.1rem, 2vw, 1.25rem); font-weight: 700; margin-top: var(--space-lg); margin-bottom: var(--space-xs); color: var(--color-near-black); } .blog-post__body ul, .blog-post__body ol { list-style: none; padding: 0; margin-bottom: 1.5rem; } .blog-post__body ul li, .blog-post__body ol li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; line-height: 1.7; } .blog-post__body ul li::before { content: ''; position: absolute; left: 0; top: 0.65rem; width: 7px; height: 7px; background: var(--color-teal); border-radius: 50%; } .blog-post__body ol { counter-reset: blog-counter; } .blog-post__body ol li { counter-increment: blog-counter; } .blog-post__body ol li::before { content: counter(blog-counter) '.'; position: absolute; left: 0; top: 0; font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; color: var(--color-orange); } .blog-post__body blockquote { margin: var(--space-lg) 0; padding: var(--space-md) var(--space-lg); background: var(--color-light-gray); border-left: 4px solid var(--color-orange); border-radius: 0 var(--border-radius) var(--border-radius) 0; font-style: italic; font-size: 1.1rem; line-height: 1.8; color: var(--color-near-black); } .blog-post__body blockquote p { margin-bottom: 0; } .blog-post__body blockquote cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.875rem; font-weight: 600; color: var(--color-mid-gray); } /* Full-width image in post */ .blog-post__image { margin: var(--space-lg) 0; border-radius: var(--border-radius); overflow: hidden; } .blog-post__image img { width: 100%; height: auto; display: block; } .blog-post__image figcaption { margin-top: 0.5rem; font-size: 0.825rem; color: var(--color-mid-gray); text-align: center; font-style: italic; } /* Inline image (left/right float) */ .blog-post__image--inline { max-width: 380px; float: right; margin: 0 0 var(--space-md) var(--space-lg); } /* Code block */ .blog-post__body pre { background: #1e293b; color: #e2e8f0; padding: var(--space-md); border-radius: var(--border-radius); overflow-x: auto; font-size: 0.875rem; line-height: 1.7; margin-bottom: 1.5rem; } .blog-post__body code { font-family: 'Courier New', Courier, monospace; font-size: 0.875em; background: var(--color-light-gray); padding: 0.15em 0.4em; border-radius: 3px; } .blog-post__body pre code { background: none; padding: 0; font-size: inherit; } /* Divider */ .blog-post__divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-xl) 0; } /* Author card */ .blog-post__author { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-lg); background: var(--color-light-gray); border-radius: var(--border-radius); margin-top: var(--space-xl); } .blog-post__author-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top center; flex-shrink: 0; } .blog-post__author-name { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; margin-bottom: 0.2rem; color: var(--color-near-black); } .blog-post__author-bio { font-size: 0.9rem; color: var(--color-mid-gray); line-height: 1.6; margin-bottom: 0; } .blog-post__author-bio a { color: var(--color-teal); font-weight: 600; } /* Post layout wrapper — single column, max 720px */ .blog-post { max-width: 720px; margin: 0 auto; padding: var(--space-xl) var(--space-md); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .credibility-bar__split { flex-direction: column; align-items: center; gap: var(--space-lg); } .credibility-bar__divider { width: 60px; min-height: 0; height: 1px; } .grid--3 { grid-template-columns: 1fr; } .grid--2 { grid-template-columns: 1fr; } .nav__links { display: none; } .nav__hamburger { display: flex; } .hero { min-height: 50vh; } .hero--short { min-height: 35vh; } /* Legacy split hero */ .hero--split { grid-template-columns: 1fr; min-height: unset; } .hero--split .hero__text { padding: var(--space-xl) var(--space-md); } .hero--split .hero__image { position: relative; min-height: 50vw; } .hero--split-reverse .hero__image { order: 2; } .hero--split-reverse .hero__text { order: 1; padding: var(--space-xl) var(--space-md); } /* Home hero — stack on tablet */ .hero--home { grid-template-columns: 1fr; min-height: unset; } .hero--home .hero__text { padding: var(--space-xl) var(--space-md) var(--space-lg); } .hero--home .hero__image { position: relative; height: 55vw; min-height: 280px; } .hero--home .hero__image img { position: absolute; } /* On mobile, image comes after text — no left blend needed */ .hero--home .hero__image::before { display: none; } /* Page hero */ .hero--page { padding: var(--space-lg) 0; } .hero--page::after { display: none; } } @media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } .social-row a { padding: 0.4rem 1rem; font-size: 0.75rem; } .photo-grid img { height: 260px; } .hero--home .hero__text h1 { font-size: clamp(1.875rem, 8vw, 2.5rem); } .hero--home .hero__actions { flex-direction: column; } .hero--home .hero__actions .btn { text-align: center; } /* Blog mobile adjustments */ .blog-post { padding: var(--space-lg) var(--space-sm); } .blog-post__body h2 { margin-top: var(--space-lg); } .blog-post__image--inline { float: none; max-width: 100%; margin: var(--space-md) 0; } .blog-post__author { flex-direction: column; text-align: center; } .instagram-embed-wrap { max-width: 100%; } }