/* ============================================================ Mediaology — Components Reusable UI: nav, footer, page header, buttons, cards, FAQ. ============================================================ */ /* ============================================================ 1. BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 14px 28px; font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: var(--fw-medium); line-height: 1; letter-spacing: 0.02em; border-radius: var(--radius-pill); cursor: pointer; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); white-space: nowrap; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand-primary); color: var(--brand-white); } .btn-primary:hover { background: var(--brand-primary-dark); } .btn-outline-light { background: transparent; color: var(--brand-white); border: var(--border-medium) solid rgba(255, 255, 255, 0.5); } .btn-outline-light:hover { border-color: var(--brand-white); background: rgba(255, 255, 255, 0.08); } .btn-outline-dark { background: transparent; color: var(--brand-black); border: var(--border-medium) solid var(--brand-black); } .btn-outline-dark:hover { background: var(--brand-black); color: var(--brand-white); } .btn-text-link { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: inherit; } .btn-text-link .arrow-circle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: var(--border-medium) solid currentColor; border-radius: 50%; transition: transform var(--duration-base) var(--ease-out); } .btn-text-link:hover .arrow-circle { transform: translateX(4px); } .btn-text-link svg { width: 12px; height: 12px; fill: currentColor; } /* Arrow icon — used in btns and elsewhere */ .icon-arrow-right { width: 14px; height: 14px; flex-shrink: 0; } /* ============================================================ 2. TOP NAVIGATION (Section 0.7) ============================================================ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav); padding: var(--space-4) 0; background: transparent; transition: background-color var(--duration-base) var(--ease-out), backdrop-filter var(--duration-base) var(--ease-out), padding var(--duration-base) var(--ease-out); } .site-nav.is-scrolled { background: rgba(0, 0, 0, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: var(--space-3) 0; } /* On pages where the top of the page is white (sub-service detail pages), make the nav opaque-dark from the start so white text stays readable. */ body.services-detail .site-nav { background: rgba(0, 0, 0, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); position: relative; } .site-nav__logo { display: flex; align-items: center; flex-shrink: 0; height: 40px; } .site-nav__logo img, .site-nav__logo svg { height: 100%; width: auto; } /* ============================================================ CUSTOM BRAND LOGO — kills the flash-of-default by hiding the default SVG until JS confirms which logo should render. Three states: - default (no class on ): visibility:hidden — layout reserved but nothing paints. Used as the safe initial state for visitors with no localStorage; replaced ~50-200ms later by site.js when content.json arrives. - .has-brand-logo: SVG display:none + ::before / background paints the uploaded logo via var(--brand-logo-url). - .show-default-logo: SVG visibility:visible — the original Mediaology mark is shown. The inline script in each HTML file picks one of those two classes synchronously when localStorage is populated, so admin users never see a flash; site.js re-applies the same class after content.json fetches for everyone else. ============================================================ */ a.site-nav__logo > svg, .site-footer__brand > svg.site-footer__logo { visibility: hidden; } html.show-default-logo a.site-nav__logo > svg, html.show-default-logo .site-footer__brand > svg.site-footer__logo { visibility: visible; } html.has-brand-logo a.site-nav__logo > svg, html.has-brand-logo .site-footer__brand > svg.site-footer__logo { display: none !important; } html.has-brand-logo a.site-nav__logo { background-image: var(--brand-logo-url); background-size: contain; background-position: left center; background-repeat: no-repeat; width: var(--brand-logo-width, 200px); height: 40px; } html.has-brand-logo .site-footer__brand::before { content: ''; display: block; background-image: var(--brand-logo-url); background-size: contain; background-position: left center; background-repeat: no-repeat; height: 56px; width: var(--brand-logo-width, 200px); margin-bottom: var(--space-3); } .site-nav__menu { display: flex; align-items: center; gap: var(--space-8); /* Absolutely positioned at the true geometric center of the nav bar so the menu stays balanced regardless of how wide the logo or CTA button on either side happen to be. The hidden mobile state (display:none below 960px) is unaffected. */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0; } .site-nav__link { position: relative; font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: var(--fw-regular); color: var(--text-on-dark-primary); padding: var(--space-2) 0; display: inline-flex; align-items: center; gap: 4px; transition: color var(--duration-base) var(--ease-out); } .site-nav__link:hover { color: var(--brand-primary); } .site-nav__link.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--brand-primary); } .site-nav__link .caret { width: 10px; height: 10px; opacity: 0.7; transition: transform var(--duration-base) var(--ease-out); } /* Services dropdown */ .site-nav__dropdown { position: relative; } .site-nav__dropdown-panel { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-8px); min-width: 880px; background: rgba(10, 10, 10, 0.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base); } /* Invisible bridge to prevent hover loss when cursor crosses the 12px gap */ .site-nav__dropdown-panel::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; /* No visible background — just hover real estate */ } .site-nav__dropdown.is-open > .site-nav__dropdown-panel, .site-nav__dropdown:hover > .site-nav__dropdown-panel, .site-nav__dropdown:focus-within > .site-nav__dropdown-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s; } .site-nav__dropdown.is-open .caret, .site-nav__dropdown:hover .caret { transform: rotate(180deg); } /* Smaller variant for menus with just a few items (About) */ .site-nav__dropdown-panel--small { min-width: 220px !important; display: block !important; grid-template-columns: none !important; padding: var(--space-3) !important; } /* Flat-list variant — used by the Industries dropdown so it shows only the 8 categories (no sub-niches). Two columns × 4 rows. */ .site-nav__dropdown-panel--list { min-width: 480px !important; max-width: calc(100vw - 32px); grid-template-columns: repeat(2, 1fr) !important; gap: 0 var(--space-3) !important; padding: var(--space-3) !important; } .site-nav__dropdown-list { list-style: none; margin: 0; padding: 0; } .site-nav__dropdown-list li { list-style: none; margin: 0; } .site-nav__dropdown-list a { display: block; padding: var(--space-2) var(--space-3); font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--text-on-dark-secondary); text-decoration: none; border-radius: var(--radius-sm); transition: background-color var(--duration-fast), color var(--duration-fast); } .site-nav__dropdown-list a:hover { background: rgba(236, 26, 100, 0.1); color: var(--brand-primary); } .site-nav__dropdown-mini { list-style: none; margin: 0; padding: 0; } .site-nav__dropdown-mini li { list-style: none; margin: 0; } .site-nav__dropdown-mini a { display: block; padding: var(--space-2) var(--space-3); font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--text-on-dark-secondary); text-decoration: none; border-radius: var(--radius-sm); transition: background-color var(--duration-fast), color var(--duration-fast); } .site-nav__dropdown-mini a:hover { background: rgba(236, 26, 100, 0.1); color: var(--brand-primary); } .site-nav__dropdown-col h4 { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-primary); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid rgba(255, 255, 255, 0.1); white-space: nowrap; } .site-nav__dropdown-col h4 a { color: inherit; text-decoration: none; display: inline-block; transition: opacity var(--duration-fast) var(--ease-out); } .site-nav__dropdown-col h4 a:hover { opacity: 0.7; } .site-nav__dropdown-col ul { display: flex; flex-direction: column; gap: 2px; /* Pull the list flush to the column's content edge so the hover box visually aligns with the column heading rather than floating in the middle. */ margin-left: calc(-1 * var(--space-3)); margin-right: calc(-1 * var(--space-3)); } .site-nav__dropdown-col ul a { /* Same hover treatment as the About dropdown (.site-nav__dropdown-mini a) — pink highlight box on hover with a colour shift to brand-primary, rather than the text-only translate that used to live here. Scoped to ul a so it doesn't leak into the column-heading h4 anchors. */ display: block; font-size: var(--fs-caption); color: var(--text-on-dark-secondary); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); transition: background-color var(--duration-fast), color var(--duration-fast); } .site-nav__dropdown-col ul a:hover { background: rgba(236, 26, 100, 0.1); color: var(--brand-primary); } /* "See all N →" link inside Industries dropdown columns — slightly visually distinct from the regular niche items so the user immediately reads it as "shows the full list". */ .site-nav__dropdown-more { color: var(--brand-primary) !important; font-weight: var(--fw-medium); border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 4px; padding-top: var(--space-2) !important; } .site-nav__cta { flex-shrink: 0; } /* Mobile menu */ .site-nav__hamburger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; } .site-nav__hamburger-bars { position: relative; width: 22px; height: 16px; } .site-nav__hamburger-bars span { display: block; position: absolute; left: 0; right: 0; height: 2px; background: var(--brand-white); transition: transform var(--duration-base) var(--ease-out), top var(--duration-base) var(--ease-out), opacity var(--duration-fast); } .site-nav__hamburger-bars span:nth-child(1) { top: 0; } .site-nav__hamburger-bars span:nth-child(2) { top: 7px; } .site-nav__hamburger-bars span:nth-child(3) { top: 14px; } .site-nav.is-mobile-open .site-nav__hamburger-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); } .site-nav.is-mobile-open .site-nav__hamburger-bars span:nth-child(2) { opacity: 0; } .site-nav.is-mobile-open .site-nav__hamburger-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); } .site-nav__mobile-panel { display: none; position: fixed; top: 64px; left: 0; right: 0; /* Use dynamic viewport height so the panel doesn't get cut off by mobile browser chrome (address bar, etc.) */ height: calc(100vh - 64px); height: calc(100dvh - 64px); background: var(--surface-black); padding: var(--space-8) var(--container-px) var(--space-12); overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; z-index: calc(var(--z-nav) - 1); transition: opacity var(--duration-base) var(--ease-out); } @media (max-width: 960px) { .site-nav__mobile-panel { display: block; visibility: hidden; transition: opacity var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base); } } .site-nav.is-mobile-open .site-nav__mobile-panel { display: block; opacity: 1; visibility: visible; transition-delay: 0s; } .site-nav__mobile-panel ul { display: flex; flex-direction: column; gap: var(--space-2); } .site-nav__mobile-panel a { display: block; font-family: var(--font-display); font-size: var(--fs-h2); color: var(--text-on-dark-primary); padding: var(--space-3) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .site-nav__mobile-cta { margin-top: var(--space-8); display: flex; justify-content: center; } .site-nav__mobile-cta .btn { width: auto; min-width: 240px; text-align: center; justify-content: center; } /* Mobile nested dropdown for Services */ .mobile-services { display: block; } .mobile-services__trigger { display: flex; align-items: center; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .mobile-services__label { flex: 1; display: block; padding: var(--space-3) 0 !important; font-family: var(--font-display) !important; font-size: var(--fs-h2) !important; color: var(--text-on-dark-primary) !important; text-decoration: none; border-bottom: none !important; } .mobile-services__caret { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; background: none; border: none; border-left: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-on-dark-primary); cursor: pointer; flex-shrink: 0; } .mobile-services__caret .caret { width: 14px; height: 14px; transition: transform var(--duration-base) var(--ease-out); } .mobile-services.is-open > .mobile-services__trigger .mobile-services__caret .caret { transform: rotate(180deg); } .mobile-services__panel { max-height: 0; overflow: hidden; transition: max-height var(--duration-slow) var(--ease-out); } .mobile-services.is-open > .mobile-services__panel { max-height: 2400px; } .mobile-cat { border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .mobile-cat__trigger { display: flex; align-items: center; width: 100%; } .mobile-cat__label { flex: 1; display: block; padding: var(--space-3) var(--space-4) !important; font-family: var(--font-body) !important; font-size: var(--fs-body-lg) !important; font-weight: var(--fw-medium) !important; color: var(--text-on-dark-secondary) !important; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: none !important; } .mobile-cat__caret { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background: none; border: none; border-left: 1px solid rgba(255, 255, 255, 0.06); color: var(--text-on-dark-secondary); cursor: pointer; flex-shrink: 0; } .mobile-cat__caret .caret { width: 12px; height: 12px; transition: transform var(--duration-base) var(--ease-out); } /* Defensive: any svg.caret inside any mobile-cat trigger is forced to icon size, prevents giant SVG render if older markup variant is present. */ .mobile-cat__trigger svg.caret, .mobile-services__trigger svg.caret { width: 12px; height: 12px; flex-shrink: 0; } .mobile-cat.is-open > .mobile-cat__trigger .mobile-cat__label { color: var(--brand-primary) !important; } .mobile-cat.is-open > .mobile-cat__trigger .mobile-cat__caret { color: var(--brand-primary); } .mobile-cat.is-open > .mobile-cat__trigger .mobile-cat__caret .caret { transform: rotate(180deg); } .mobile-cat__panel { max-height: 0; overflow: hidden; transition: max-height var(--duration-base) var(--ease-out); } .mobile-cat.is-open > .mobile-cat__panel { max-height: 600px; } .mobile-cat__list { display: flex !important; flex-direction: column; padding: 0 var(--space-4) var(--space-3); gap: 0 !important; } .mobile-cat__list li { list-style: none; } .mobile-cat__list a { display: block; padding: var(--space-2) var(--space-4); font-family: var(--font-body) !important; font-size: var(--fs-body) !important; color: var(--text-on-dark-secondary) !important; text-decoration: none; border-bottom: none !important; border-left: 2px solid transparent; transition: border-color var(--duration-fast), color var(--duration-fast); } .mobile-cat__list a:hover { color: var(--brand-primary) !important; border-left-color: var(--brand-primary); } @media (max-width: 960px) { .site-nav__menu { display: none; } .site-nav__cta { display: none; } .site-nav__hamburger { display: inline-flex; } } /* ============================================================ 3. PAGE HEADER (Section 0.8) Used on every page except Home. ============================================================ */ .page-header { position: relative; min-height: 480px; padding: 160px 0 80px; background-size: cover; background-position: center; background-color: var(--surface-black); /* fallback */ color: var(--text-on-dark-primary); overflow: hidden; } .page-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.7) 100%); pointer-events: none; } .page-header__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: calc(480px - 240px); max-width: 960px; margin: 0 auto; } .page-header__eyebrow { margin-bottom: var(--space-6); } .page-header__title { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw + 0.5rem, 4.5rem); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--text-on-dark-primary); margin-bottom: var(--space-6); } .page-header__subhead { font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-on-dark-secondary); max-width: 720px; margin-left: auto; margin-right: auto; } @media (max-width: 768px) { .page-header { min-height: 320px; padding: 96px 0 48px; } .page-header__inner { min-height: 0; } /* Smaller floor for the responsive title clamp on small screens so a long uppercase headline like "INDUSTRIES WE SERVE DEEPLY" fits comfortably on a phone instead of breaking onto five lines. */ .page-header__title { font-size: clamp(1.6rem, 7vw, 2.5rem); margin-bottom: var(--space-4); } .page-header__subhead { font-size: var(--fs-body); } .page-header__eyebrow { margin-bottom: var(--space-4); } } /* ============================================================ 4. FOOTER (Section 0.5) ============================================================ */ .site-footer { background: var(--surface-black); color: var(--text-on-dark-primary); padding: var(--space-20) 0 var(--space-8); } .site-footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: var(--space-8); margin-bottom: var(--space-16); } .site-footer__brand p { margin-top: var(--space-4); font-size: var(--fs-body-sm); color: var(--text-on-dark-secondary); max-width: 280px; } .site-footer__logo { height: 36px; width: auto; } .site-footer__col h4 { font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-medium); margin-bottom: var(--space-4); color: var(--text-on-dark-primary); } .site-footer__col ul { display: flex; flex-direction: column; gap: var(--space-3); } .site-footer__col a, .site-footer__col p { font-size: var(--fs-body-sm); color: var(--text-on-dark-secondary); transition: color var(--duration-fast) var(--ease-out); } .site-footer__col a:hover { color: var(--brand-primary); } .site-footer__col a.email-link { border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 1px; } .site-footer__socials { display: flex; gap: var(--space-3); margin-top: var(--space-2); } .site-footer__socials a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; color: var(--text-on-dark-primary); transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .site-footer__socials a:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-white); /* override the column hover rule so the SVG stays white */ } .site-footer__socials svg { width: 16px; height: 16px; fill: currentColor; } .site-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--fs-caption); color: var(--text-on-dark-tertiary); } .site-footer__legal { display: flex; gap: var(--space-6); } .site-footer__legal a:hover { color: var(--text-on-dark-primary); } @media (max-width: 960px) { .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-10) var(--space-6); } .site-footer__brand { grid-column: 1 / -1; } } @media (max-width: 600px) { .site-footer__top { grid-template-columns: 1fr; } .site-footer__bottom { flex-direction: column; gap: var(--space-4); text-align: center; } } /* ============================================================ 5. SERVICE CATEGORY CARD Reusable card: image top + eyebrow + headline + description. Used on Home Section 4, Services hub, etc. ============================================================ */ .service-card { display: flex; flex-direction: column; gap: var(--space-4); cursor: pointer; transition: transform var(--duration-base) var(--ease-out); text-decoration: none; color: inherit; } .service-card:hover { transform: translateY(-4px); } .service-card__image { aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-off-white); } .service-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); } .service-card:hover .service-card__image img { transform: scale(1.04); } .service-card__label { position: relative; display: inline-block; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-primary); padding-bottom: var(--space-3); border-bottom: 1px solid currentColor; align-self: flex-start; } .service-card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--brand-primary); } .service-card__description { font-size: var(--fs-body); line-height: var(--lh-relaxed); } /* ============================================================ 6. FAQ ACCORDION (used on Home, About, Services, Contact) ============================================================ */ .faq-list { display: flex; flex-direction: column; } .faq-item { border-bottom: 1px solid var(--surface-card-border); } .faq-item__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; text-align: left; font-family: var(--font-body); font-size: var(--fs-body-lg); font-weight: var(--fw-medium); color: var(--text-on-light-primary); transition: color var(--duration-base) var(--ease-out); } .faq-item__trigger:hover { color: var(--brand-primary); } .faq-item__icon { flex-shrink: 0; width: 24px; height: 24px; position: relative; transition: transform var(--duration-base) var(--ease-out); } .faq-item__icon::before, .faq-item__icon::after { content: ''; position: absolute; background: currentColor; transition: transform var(--duration-base) var(--ease-out); } .faq-item__icon::before { top: 11px; left: 4px; right: 4px; height: 2px; } /* horizontal */ .faq-item__icon::after { left: 11px; top: 4px; bottom: 4px; width: 2px; } /* vertical */ .faq-item.is-open .faq-item__icon::after { transform: scaleY(0); } .faq-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-base) var(--ease-out); } .faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; } .faq-item__panel-inner { overflow: hidden; } .faq-item__panel-content { padding: 0 0 var(--space-5); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--text-on-light-secondary); max-width: 640px; } /* ============================================================ 7. CTA BANNER (used on About, Services, etc.) ============================================================ */ .cta-banner { background: var(--surface-black); color: var(--text-on-dark-primary); padding: var(--space-20) 0; text-align: center; } .cta-banner__title { font-family: var(--font-display); font-size: var(--fs-display-md); font-weight: var(--fw-medium); line-height: var(--lh-tight); margin-bottom: var(--space-4); } .cta-banner__subhead { font-size: var(--fs-body-lg); color: var(--text-on-dark-secondary); margin-bottom: var(--space-8); max-width: 580px; margin-inline: auto; } .cta-banner__actions { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; } /* ============================================================ 8. CONNECT CARDS (2x2 "How to Connect" grid) ============================================================ */ .connect-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } .connect-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--surface-card-border); border-radius: var(--radius-lg); background: var(--surface-white); transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); text-decoration: none; color: inherit; } .connect-card:hover { transform: translateY(-3px); border-color: var(--brand-primary); } .connect-card__icon { color: var(--brand-primary); width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; } .connect-card__icon svg { width: 100%; height: 100%; fill: currentColor; } .connect-card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-medium); margin-top: var(--space-2); } .connect-card__body { font-size: var(--fs-body-sm); color: var(--text-on-light-secondary); line-height: var(--lh-relaxed); } .connect-card__body strong { color: var(--text-on-light-primary); font-weight: var(--fw-medium); } @media (max-width: 600px) { .connect-cards { grid-template-columns: 1fr; } } /* ============================================================ 9. SCROLL-FADE-UP (intersection observer driven) ============================================================ */ .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); } .fade-up.is-visible { opacity: 1; transform: translateY(0); } /* Stagger children */ .fade-up-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); } .fade-up-stagger.is-visible > * { opacity: 1; transform: translateY(0); } .fade-up-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; } .fade-up-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; } .fade-up-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; } .fade-up-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; } .fade-up-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; } .fade-up-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; } @media (prefers-reduced-motion: reduce) { .fade-up, .fade-up-stagger > * { opacity: 1; transform: none; transition: none; } } /* ============================================================ 10. CUSTOM CURSOR (public site only — body class .has-custom-cursor) Two layers: outer ring (gray, lags behind) + inner dot (white, follows). On hover over interactive elements, both grow and turn pink. ============================================================ */ /* Only enable on devices with a fine pointer (mouse/trackpad). Keep native cursor on touch. */ @media (hover: hover) and (pointer: fine) { .has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button, .has-custom-cursor [role="button"], .has-custom-cursor input, .has-custom-cursor textarea, .has-custom-cursor select, .has-custom-cursor label { cursor: none; } .cursor-ring, .cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; will-change: transform; transform: translate3d(-100px, -100px, 0); } .cursor-ring { width: 36px; height: 36px; border: 1.5px solid rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); border-radius: 50%; margin: -18px 0 0 -18px; transition: width var(--duration-base) var(--ease-out), height var(--duration-base) var(--ease-out), margin var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); } .cursor-dot { width: 6px; height: 6px; background: var(--brand-primary); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; margin: -3px 0 0 -3px; } /* Hover state: grow + pink */ .has-custom-cursor.is-hovering .cursor-ring { width: 60px; height: 60px; margin: -30px 0 0 -30px; border-color: var(--brand-primary); background: rgba(236, 26, 100, 0.15); } .has-custom-cursor.is-hovering .cursor-dot { background: var(--brand-primary); border-color: var(--brand-white); } /* Hide cursors when window loses focus or user leaves */ .cursor-ring.is-hidden, .cursor-dot.is-hidden { opacity: 0; } } /* Reduced motion: no transitions on the ring (still tracks but doesn't animate size changes) */ @media (prefers-reduced-motion: reduce) { .cursor-ring { transition: none; } } /* ============================================================ SECTION — Testimonials (3-COLUMN VERTICAL MARQUEE) Black background, columns scroll up/down/up with fade top/bottom ============================================================ */ .testimonials-section { background: var(--surface-black); color: var(--brand-white); padding: var(--space-20) 0 var(--space-16); position: relative; overflow: hidden; } /* Old --light/--dark variants now both render same: black background. */ .testimonials-section--light, .testimonials-section--dark { background: var(--surface-black); color: var(--brand-white); } .testimonials-section__intro { text-align: center; max-width: 720px; margin: 0 auto var(--space-10); } .testimonials-section__eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-primary); margin-bottom: var(--space-3); } .testimonials-section__title { font-family: var(--font-display); font-size: clamp(2rem, 4vw + 0.5rem, 3rem); font-weight: var(--fw-medium); line-height: 1.1; letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--brand-white); } /* Vertical scrolling marquee -- 3 columns */ .testimonials-marquee { position: relative; height: 640px; overflow: hidden; /* Mask: fade in/out at top and bottom edges */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .testimonials-marquee__col { position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; } .testimonials-marquee__track { display: flex; flex-direction: column; gap: var(--space-5); will-change: transform; } /* Outer columns scroll UP, middle scrolls DOWN. Animation runs the duplicated track from 0 → -50% (UP) or -50% → 0 (DOWN). */ .testimonials-marquee__col:nth-child(1) .testimonials-marquee__track, .testimonials-marquee__col:nth-child(3) .testimonials-marquee__track { animation: testimonials-scroll-up 38s linear infinite; } .testimonials-marquee__col:nth-child(2) .testimonials-marquee__track { animation: testimonials-scroll-down 44s linear infinite; } /* IMPORTANT: do NOT pause on hover. Per spec, marquee keeps moving. */ @keyframes testimonials-scroll-up { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes testimonials-scroll-down { from { transform: translateY(-50%); } to { transform: translateY(0); } } /* Card */ .testimonial-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); color: var(--brand-white); flex-shrink: 0; } .testimonial-card__top { display: flex; justify-content: space-between; align-items: flex-start; } .testimonial-card__quote-icon { width: 28px; height: 28px; color: var(--brand-white); opacity: 0.5; flex-shrink: 0; } .testimonial-card__stars { display: flex; gap: 2px; color: var(--brand-primary); } .testimonial-card__stars svg { width: 12px; height: 12px; fill: currentColor; } .testimonial-card__quote { font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--text-on-dark-secondary); margin: 0; } .testimonial-card__author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; } .testimonial-card__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #EC1A64, #AD144F); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.75rem; font-weight: var(--fw-medium); color: var(--brand-white); flex-shrink: 0; background-size: cover; background-position: center; } .testimonial-card__name { font-family: var(--font-display); font-size: 0.8125rem; font-weight: var(--fw-medium); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2px; color: var(--brand-white); } .testimonial-card__role { font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--text-on-dark-tertiary); } /* Tablet: 2 columns (hide 3rd column on smaller screens) */ @media (max-width: 900px) { .testimonials-marquee { grid-template-columns: 1fr 1fr; height: 560px; } .testimonials-marquee__col:nth-child(3) { display: none; } } /* Mobile: 1 column, still constrained height + still scrolls */ @media (max-width: 600px) { .testimonials-marquee { grid-template-columns: 1fr; height: 520px; } .testimonials-marquee__col:nth-child(2), .testimonials-marquee__col:nth-child(3) { display: none; } } @media (prefers-reduced-motion: reduce) { .testimonials-marquee__track { animation: none !important; } } /* Old grid kept as fallback if needed (legacy class) */ .testimonials-grid { display: none; } /* ============================================================ PROJECTS PAGE — Phase 7 Hero, filter tabs, four category grids each tuned to its content's aspect ratio, and the lift-on-hover tile pattern. ============================================================ */ .projects-hero { background-image: linear-gradient(135deg, #0F0A1A 0%, #2A0820 50%, #0A0A0A 100%); color: var(--text-on-dark-primary); padding: var(--space-32) 0 var(--space-24); position: relative; overflow: hidden; } .projects-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(236, 26, 100, 0.18) 0%, transparent 70%); pointer-events: none; } .projects-hero__inner { position: relative; z-index: 1; max-width: 720px; } .projects-hero__eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-primary); margin-bottom: var(--space-4); } .projects-hero__title { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw + 0.5rem, 4.5rem); font-weight: var(--fw-medium); line-height: 1.05; margin-bottom: var(--space-5); } .projects-hero__subhead { font-size: var(--fs-body-lg); color: var(--text-on-dark-secondary); line-height: var(--lh-relaxed); } /* Filter tabs (light theme on white background) */ .projects-tabs { background: var(--surface-white); border-bottom: 1px solid var(--surface-card-border); padding: var(--space-6) 0; position: sticky; top: 64px; z-index: 5; /* When site.js calls tabsEl.scrollIntoView() after a tab tap, this offset pads the scroll so the bar lands just under the sticky main nav instead of being clipped behind it. */ scroll-margin-top: 64px; } .projects-tabs__row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .projects-tabs__row::-webkit-scrollbar { display: none; } .projects-tab { flex-shrink: 0; font-family: var(--font-body); font-size: 13px; font-weight: var(--fw-medium); letter-spacing: 0.04em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--surface-card-border); background: var(--surface-white); color: var(--text-on-light-secondary); cursor: pointer; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .projects-tab:hover { color: var(--text-on-light-primary); border-color: #B8B8BA; } .projects-tab.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-white); box-shadow: 0 4px 16px rgba(236, 26, 100, 0.25); } /* ============================================================ Case Studies — "Real Wins for Real Brands" Shared between About page and Projects page so editing on About flows through to Projects (same data-edit keys). Dark surface, pink-tinted radial gradient, hover lift. ============================================================ */ .about-results { background: var(--surface-near-black); color: var(--brand-white); padding: var(--section-py) 0; position: relative; overflow: hidden; } .about-results::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 50% 100%, rgba(236, 26, 100, 0.1) 0%, transparent 60%); pointer-events: none; } .about-results__inner { position: relative; } .about-results__intro { text-align: center; max-width: 720px; margin: 0 auto var(--space-16); } .about-results__eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-primary); margin-bottom: var(--space-3); } .about-results__title { font-family: var(--font-display); font-size: clamp(2rem, 4vw + 0.5rem, 3rem); font-weight: var(--fw-medium); line-height: 1.1; letter-spacing: var(--tracking-tight); text-transform: uppercase; margin-bottom: var(--space-4); } .about-results__subtitle { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--text-on-dark-secondary); } .about-results__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .case-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out); } .case-card:hover { border-color: rgba(236, 26, 100, 0.32); background: rgba(236, 26, 100, 0.05); transform: translateY(-3px); } .case-card__industry { font-family: var(--font-body); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-primary); margin-bottom: var(--space-2); } .case-card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: 1.15; margin-bottom: var(--space-5); } .case-card__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: var(--space-5); } .case-metric { display: flex; flex-direction: column; gap: var(--space-1); } .case-metric__value { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: var(--fw-medium); color: var(--brand-primary); line-height: 1; } .case-metric__label { font-size: 0.6875rem; color: var(--text-on-dark-tertiary); letter-spacing: 0.04em; text-transform: uppercase; } .case-card__body { font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--text-on-dark-secondary); } @media (max-width: 900px) { .about-results__grid { grid-template-columns: 1fr; } .case-card__metrics { grid-template-columns: 1fr 1fr; } } /* Section per category (white background, dark text). Padding kept tight so the four grids sit close together — generous spacing inside the tiles already gives each section visual room. */ .projects-section { background: var(--surface-white); color: var(--text-on-light-primary); padding: var(--space-8) 0 var(--space-6); } .projects-section[hidden] { display: none; } .projects-section__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-5); gap: var(--space-4); } .projects-section__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem); font-weight: var(--fw-medium); color: var(--text-on-light-primary); } .projects-section__count { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-on-light-secondary); } /* Category-specific grids — tuned per aspect ratio */ .projects-grid { display: grid; gap: var(--space-4); } .projects-grid--reels { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .projects-grid--websites { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .projects-grid--graphic { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .projects-grid--logos { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .projects-grid--logo-animations { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .projects-grid--photography { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .projects-grid--product-videos { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* Tile — shared lift-on-hover pattern (light page, subtle border + shadow) */ .project-tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-off-white); border: 1px solid var(--surface-card-border); text-decoration: none; color: inherit; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .project-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(236, 26, 100, 0.18); border-color: rgba(236, 26, 100, 0.3); } .project-tile__media { position: relative; width: 100%; background: var(--surface-off-white); background-size: cover; background-position: center; } .projects-grid--reels .project-tile__media { aspect-ratio: 9 / 16; } .projects-grid--websites .project-tile__media { aspect-ratio: 16 / 10; } .projects-grid--graphic .project-tile__media { aspect-ratio: 1 / 1; } .projects-grid--logos .project-tile__media { aspect-ratio: 1 / 1; background: #FFFFFF; } .projects-grid--logo-animations .project-tile__media { aspect-ratio: 9 / 16; } .projects-grid--photography .project-tile__media { aspect-ratio: 1 / 1; } .projects-grid--product-videos .project-tile__media { aspect-ratio: 1 / 1; } .project-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .projects-grid--logos .project-tile__media img { object-fit: contain; padding: 18%; } /* Hover overlay — centered pink pill with the project name + brief below. Replaces the bottom-gradient pattern so labels stay legible on white website screenshots and over busy graphic-post imagery. */ .project-tile__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--space-4); background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity var(--duration-base) var(--ease-out); } .project-tile:hover .project-tile__overlay { opacity: 1; } .project-tile__name { display: inline-block; font-family: var(--font-display); font-size: 0.95rem; font-weight: var(--fw-medium); color: var(--brand-white); background: var(--brand-primary); padding: 10px 20px; border-radius: 999px; box-shadow: 0 6px 18px rgba(236, 26, 100, 0.4); line-height: 1.2; max-width: 90%; } .project-tile__brief { font-family: var(--font-body); font-size: 12px; color: rgba(255, 255, 255, 0.88); line-height: 1.45; margin-top: 12px; max-width: 85%; } /* Reels: small persistent play badge in the upper-right corner so the tile reads as a video at a glance. The centered pill on hover is the click target; the badge is visual only. */ .project-tile__play { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(236, 26, 100, 0.92); display: flex; align-items: center; justify-content: center; color: var(--brand-white); pointer-events: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .project-tile__play svg { width: 12px; height: 12px; fill: currentColor; margin-left: 2px; } /* Hide play badge for non-reel tiles */ .projects-grid--websites .project-tile__play, .projects-grid--graphic .project-tile__play, .projects-grid--logos .project-tile__play, .projects-grid--photography .project-tile__play { display: none; } /* Empty-state when an admin list is empty (no items rendered yet) */ .projects-grid:empty::before { content: 'No projects yet — add some via the Admin panel.'; display: block; grid-column: 1 / -1; color: var(--text-on-light-secondary); font-size: 14px; padding: var(--space-12); text-align: center; border: 1px dashed var(--surface-card-border); border-radius: var(--radius-lg); } /* ============================================================ VIDEO LIGHTBOX — used by reels tiles with YouTube URLs ============================================================ */ .video-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--space-6); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease-out), visibility 0.25s; } .video-lightbox.is-open { opacity: 1; visibility: visible; } .video-lightbox__frame { position: relative; width: min(90vw, 1200px); aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); } /* Vertical for YouTube Shorts */ .video-lightbox--vertical .video-lightbox__frame { width: auto; height: min(85vh, 900px); aspect-ratio: 9 / 16; max-width: 90vw; } .video-lightbox__frame iframe { width: 100%; height: 100%; border: 0; display: block; } .video-lightbox__close { position: absolute; top: max(16px, calc(env(safe-area-inset-top, 0px) + 16px)); right: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border: none; cursor: pointer; color: var(--brand-white); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-base) var(--ease-out); z-index: 1; } .video-lightbox__close:hover { background: rgba(255, 255, 255, 0.25); } .video-lightbox__close svg { width: 22px; height: 22px; fill: currentColor; } /* ============================================================ IMAGE LIGHTBOX — used by Photography + Logo Designs tiles Same fullscreen-overlay pattern as video-lightbox, plus prev/next nav arrows and an optional caption. ============================================================ */ .image-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--space-6); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease-out), visibility 0.25s; } .image-lightbox.is-open { opacity: 1; visibility: visible; } .image-lightbox__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin: 0; max-width: min(90vw, 1100px); max-height: 90vh; } .image-lightbox__inner img { display: block; max-width: 100%; max-height: calc(90vh - 80px); width: auto; height: auto; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); background: #1a1a1a; } .image-lightbox__caption { text-align: center; color: var(--brand-white); max-width: 540px; padding: 0 var(--space-4); } .image-lightbox__name { font-family: var(--font-display); font-size: 16px; font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight); margin-bottom: 4px; } .image-lightbox__brief { font-size: 13px; color: rgba(255, 255, 255, 0.7); line-height: 1.5; } .image-lightbox__counter { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); font-size: 11px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.08em; } /* Close button — same visual treatment as the video close. */ .image-lightbox__close { position: absolute; top: max(16px, calc(env(safe-area-inset-top, 0px) + 16px)); right: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border: none; cursor: pointer; color: var(--brand-white); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-base) var(--ease-out); z-index: 2; } .image-lightbox__close:hover { background: rgba(255, 255, 255, 0.25); } .image-lightbox__close svg { width: 22px; height: 22px; fill: currentColor; } /* Prev/next nav arrows — anchored to the viewport edges so they're always reachable regardless of how big the image is. */ .image-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); border: none; cursor: pointer; color: var(--brand-white); display: flex; align-items: center; justify-content: center; transition: background-color var(--duration-base) var(--ease-out), opacity 0.15s; z-index: 2; } .image-lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); } .image-lightbox__nav svg { width: 32px; height: 32px; fill: currentColor; } .image-lightbox__nav--prev { left: max(16px, calc(env(safe-area-inset-left, 0px) + 16px)); } .image-lightbox__nav--next { right: max(16px, calc(env(safe-area-inset-right, 0px) + 16px)); } /* When the lightbox holds only one item, the JS toggles this class so the arrows disappear cleanly without leaving an awkward gap. */ .image-lightbox--single .image-lightbox__nav { display: none; } /* Make logo-design lightbox images sit on white the same way they do in the grid — transparent PNG marks need a light backdrop. */ .image-lightbox--logos .image-lightbox__inner img { background: #FFFFFF; padding: 8%; } @media (max-width: 600px) { .image-lightbox__nav { width: 44px; height: 44px; } .image-lightbox__nav svg { width: 24px; height: 24px; } .image-lightbox__nav--prev { left: 8px; } .image-lightbox__nav--next { right: 8px; } } /* ============================================================ CONTACT PAGE — Phase 8A Hero, two-column form + info block, full-width Calendly embed, newsletter signup, footer. ============================================================ */ .contact-hero { background-image: linear-gradient(135deg, #1A0008 0%, #2A0820 50%, #0A0A0A 100%); color: var(--text-on-dark-primary); padding: var(--space-32) 0 var(--space-24); position: relative; overflow: hidden; } .contact-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 30% 100%, rgba(236, 26, 100, 0.18) 0%, transparent 70%); pointer-events: none; } .contact-hero__inner { position: relative; z-index: 1; max-width: 720px; } .contact-hero__eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-primary); margin-bottom: var(--space-4); } .contact-hero__title { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw + 0.5rem, 4.5rem); font-weight: var(--fw-medium); line-height: 1.05; margin-bottom: var(--space-5); } .contact-hero__subhead { font-size: var(--fs-body-lg); color: var(--text-on-dark-secondary); line-height: var(--lh-relaxed); } /* Quick-ways row — 4 horizontal cards (Email, Phone, Location, Hours) */ .contact-quickways { background: var(--surface-white); padding: var(--space-12) 0 0; } .contact-quickways__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .contact-quickway { display: flex; flex-direction: column; gap: 6px; padding: var(--space-5) var(--space-5); background: var(--surface-off-white); border: 1px solid var(--surface-card-border); border-radius: var(--radius-lg); text-decoration: none; color: var(--text-on-light-primary); transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .contact-quickway:hover:not(.contact-quickway--static) { transform: translateY(-3px); border-color: rgba(236, 26, 100, 0.3); box-shadow: 0 14px 30px rgba(236, 26, 100, 0.12); } .contact-quickway__icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(236, 26, 100, 0.1); color: var(--brand-primary); margin-bottom: var(--space-2); } .contact-quickway__icon svg { width: 18px; height: 18px; } .contact-quickway__label { font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-on-light-secondary); } .contact-quickway__value { font-family: var(--font-display); font-size: 1rem; font-weight: var(--fw-medium); line-height: 1.3; color: var(--text-on-light-primary); word-break: break-word; } @media (max-width: 900px) { .contact-quickways__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .contact-quickways__grid { grid-template-columns: 1fr; } } /* Form section — two-column on desktop, stacked on mobile */ .contact-form-section { background: var(--surface-white); padding: var(--space-12) 0 var(--space-20); scroll-margin-top: 80px; } .contact-form-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; } .contact-form-section__calendly-col { display: flex; flex-direction: column; } .contact-form-section__calendly-col .calendly-inline-widget { margin-top: var(--space-2); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-off-white); border: 1px solid var(--surface-card-border); } .contact-form-section__title { font-family: var(--font-display); font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem); font-weight: var(--fw-medium); line-height: 1.15; margin-bottom: var(--space-3); color: var(--text-on-light-primary); } .contact-form-section__intro { font-size: var(--fs-body); color: var(--text-on-light-secondary); line-height: var(--lh-relaxed); margin-bottom: var(--space-8); } /* The contact form itself */ .contact-form { display: flex; flex-direction: column; gap: var(--space-5); } .contact-form__honeypot { display: none; } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .contact-form__field { display: flex; flex-direction: column; gap: 6px; } .contact-form__label { font-family: var(--font-body); font-size: 13px; font-weight: var(--fw-medium); color: var(--text-on-light-primary); letter-spacing: 0.01em; } .contact-form__optional { font-weight: var(--fw-regular); color: var(--text-on-light-secondary); font-size: 12px; margin-left: 4px; } .contact-form__required { color: var(--brand-primary); margin-left: 3px; font-weight: var(--fw-medium); } .contact-form__hint { font-family: var(--font-body); font-size: 12px; color: var(--text-on-light-secondary); margin: 0; } .contact-form input, .contact-form select, .contact-form textarea { font-family: var(--font-body); font-size: 15px; padding: 12px 14px; border: 1px solid var(--surface-card-border); border-radius: 8px; background: var(--surface-white); color: var(--text-on-light-primary); transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(236, 26, 100, 0.15); } .contact-form textarea { resize: vertical; min-height: 120px; } .contact-form select { cursor: pointer; } .contact-form__submit { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; font-size: var(--fs-body); margin-top: var(--space-2); } /* Inline success state shown after submit */ .contact-form-success { background: rgba(31, 138, 79, 0.08); border: 1px solid rgba(31, 138, 79, 0.25); border-radius: var(--radius-lg); padding: var(--space-8); text-align: center; } .contact-form-success__icon { width: 56px; height: 56px; margin: 0 auto var(--space-4); border-radius: 50%; background: rgba(31, 138, 79, 0.18); color: #1F8A4F; display: flex; align-items: center; justify-content: center; } .contact-form-success h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--fw-medium); margin-bottom: var(--space-2); color: var(--text-on-light-primary); } .contact-form-success p { color: var(--text-on-light-secondary); line-height: var(--lh-relaxed); } .contact-form-success a { color: var(--brand-primary); text-decoration: underline; } /* Side info block */ .contact-info { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 90px; } .contact-info__card { background: var(--surface-off-white); border: 1px solid var(--surface-card-border); border-radius: var(--radius-lg); padding: var(--space-6); } .contact-info__title { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-on-light-secondary); margin-bottom: var(--space-5); } .contact-info__list { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; } .contact-info__row dt { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-on-light-secondary); margin-bottom: 4px; } .contact-info__row dd { margin: 0; font-size: 15px; color: var(--text-on-light-primary); } .contact-info__row dd a { color: inherit; text-decoration: none; transition: color var(--duration-base) var(--ease-out); } .contact-info__row dd a:hover { color: var(--brand-primary); } .contact-info__card--dark { background: var(--surface-near-black); border: 1px solid #232323; color: var(--text-on-dark-primary); position: relative; overflow: hidden; } .contact-info__card--dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 70% 100%, rgba(236, 26, 100, 0.25) 0%, transparent 70%); pointer-events: none; } .contact-info__card--dark > * { position: relative; z-index: 1; } .contact-info__card--dark h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--fw-medium); margin-bottom: var(--space-3); } .contact-info__card--dark p { font-size: 14px; color: var(--text-on-dark-secondary); line-height: var(--lh-relaxed); margin-bottom: var(--space-5); } .contact-info__cta { width: 100%; justify-content: center; } @media (max-width: 900px) { .contact-form-section__grid { grid-template-columns: 1fr; gap: var(--space-10); } .contact-info { position: static; } .contact-form__row { grid-template-columns: 1fr; } } /* Calendly section */ .contact-calendly { background: var(--surface-off-white); padding: var(--space-20) 0; scroll-margin-top: 80px; } .contact-calendly__head { max-width: 720px; margin: 0 auto var(--space-10); text-align: center; } .contact-calendly__eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-primary); margin-bottom: var(--space-4); } .contact-calendly__title { font-family: var(--font-display); font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem); font-weight: var(--fw-medium); line-height: 1.15; margin-bottom: var(--space-3); color: var(--text-on-light-primary); } .contact-calendly__subhead { font-size: var(--fs-body); color: var(--text-on-light-secondary); line-height: var(--lh-relaxed); } .contact-calendly__frame-wrap { background: var(--surface-white); border: 1px solid var(--surface-card-border); border-radius: var(--radius-lg); overflow: hidden; min-height: 700px; position: relative; display: flex; align-items: stretch; } .contact-calendly__frame { width: 100%; height: 700px; border: 0; display: block; } .contact-calendly__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8); text-align: center; color: var(--text-on-light-secondary); background: var(--surface-off-white); } .contact-calendly__placeholder svg { color: var(--surface-card-border); } .contact-calendly__placeholder p { margin: 0; font-size: 14px; line-height: var(--lh-relaxed); max-width: 320px; } .contact-calendly__frame-wrap.has-url .contact-calendly__placeholder { display: none; } .contact-calendly__frame-wrap:not(.has-url) .contact-calendly__frame { display: none; } /* Newsletter section (dark) */ .contact-newsletter { background: var(--surface-black); color: var(--text-on-dark-primary); padding: var(--space-20) 0; position: relative; overflow: hidden; } .contact-newsletter::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 80% 50%, rgba(236, 26, 100, 0.2) 0%, transparent 70%); pointer-events: none; } .contact-newsletter__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-12); align-items: center; } .contact-newsletter__eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-primary); margin-bottom: var(--space-4); } .contact-newsletter__title { font-family: var(--font-display); font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.5rem); font-weight: var(--fw-medium); line-height: 1.15; margin-bottom: var(--space-4); } .contact-newsletter__subhead { font-size: var(--fs-body); color: var(--text-on-dark-secondary); line-height: var(--lh-relaxed); } .contact-newsletter__form-wrap { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-lg); padding: var(--space-6); min-height: 200px; } .contact-newsletter__form-wrap iframe { width: 100%; min-height: 200px; border: 0; background: transparent; } .contact-newsletter__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-on-dark-secondary); min-height: 160px; } .contact-newsletter__placeholder svg { color: rgba(255, 255, 255, 0.2); } .contact-newsletter__placeholder p { margin: 0; font-size: 14px; line-height: var(--lh-relaxed); max-width: 320px; } .contact-newsletter__placeholder strong { color: var(--text-on-dark-primary); } @media (max-width: 900px) { .contact-newsletter__inner { grid-template-columns: 1fr; gap: var(--space-8); } } /* ============================================================ BLOG PAGE — Phase 8B Single page handles two views: index (cards) + single-post (cover hero + body). View toggling lives in site.js. ============================================================ */ .blog-hero { background-image: linear-gradient(135deg, #001020 0%, #08183A 50%, #0A0A0A 100%); color: var(--text-on-dark-primary); padding: var(--space-32) 0 var(--space-24); position: relative; overflow: hidden; } .blog-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(236, 26, 100, 0.18) 0%, transparent 70%); pointer-events: none; } .blog-hero__inner { position: relative; z-index: 1; max-width: 760px; } .blog-hero__eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--brand-primary); margin-bottom: var(--space-4); } .blog-hero__title { font-family: var(--font-display); font-size: clamp(2.25rem, 5vw + 0.5rem, 4.5rem); font-weight: var(--fw-medium); line-height: 1.05; margin-bottom: var(--space-5); } .blog-hero__subhead { font-size: var(--fs-body-lg); color: var(--text-on-dark-secondary); line-height: var(--lh-relaxed); } .blog-list { background: var(--surface-white); padding: var(--space-16) 0 var(--space-24); } .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-8); } .blog-card { background: var(--surface-white); border: 1px solid var(--surface-card-border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .blog-card:hover { transform: translateY(-4px); border-color: rgba(236, 26, 100, 0.3); box-shadow: 0 20px 40px rgba(236, 26, 100, 0.12); } .blog-card__cover { width: 100%; aspect-ratio: 16 / 9; background: var(--surface-off-white); background-size: cover; background-position: center; overflow: hidden; } .blog-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .blog-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .blog-card__meta { font-family: var(--font-body); font-size: 12px; font-weight: var(--fw-medium); color: var(--text-on-light-secondary); letter-spacing: 0.02em; } .blog-card__meta-sep { margin: 0 6px; opacity: 0.5; } .blog-card__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: var(--fw-medium); line-height: 1.25; color: var(--text-on-light-primary); } .blog-card__excerpt { font-size: 14px; color: var(--text-on-light-secondary); line-height: var(--lh-relaxed); flex: 1; } .blog-card__cta { font-family: var(--font-body); font-size: 12px; font-weight: var(--fw-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-primary); margin-top: var(--space-3); transition: gap var(--duration-base) var(--ease-out); } .blog-card:hover .blog-card__cta { letter-spacing: 0.06em; } /* ============================================================ SINGLE-POST VIEW Hero: cover image as background with a dark gradient overlay for legibility (original pattern). Body sits in a 70/30 grid: main reading column on the left, sticky "More from the blog" sidebar on the right. Editorial typography lives in the body block (drop cap, H2 underline, magazine blockquote). ============================================================ */ .blog-post-hero { position: relative; background: var(--surface-near-black); color: var(--text-on-dark-primary); padding: var(--space-32) 0 var(--space-16); overflow: hidden; isolation: isolate; } .blog-post-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.45; z-index: -2; } .blog-post-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 10, 0.4) 0%, rgba(10, 10, 10, 0.85) 100%); z-index: -1; } .blog-post-hero__inner { max-width: 800px; } .blog-post-hero__back { display: inline-block; font-family: var(--font-body); font-size: 13px; color: var(--text-on-dark-secondary); text-decoration: none; margin-bottom: var(--space-6); transition: color var(--duration-base) var(--ease-out); } .blog-post-hero__back:hover { color: var(--text-on-dark-primary); } .blog-post-hero__meta { font-family: var(--font-body); font-size: 13px; color: var(--text-on-dark-secondary); letter-spacing: 0.02em; margin-bottom: var(--space-4); } .blog-post-hero__meta-sep { margin: 0 8px; opacity: 0.5; } .blog-post-hero__title { font-family: var(--font-display); font-size: clamp(2rem, 4vw + 0.5rem, 3.5rem); font-weight: var(--fw-medium); line-height: 1.1; margin-bottom: var(--space-5); } .blog-post-hero__excerpt { font-size: var(--fs-body-lg); color: var(--text-on-dark-secondary); line-height: var(--lh-relaxed); } /* 70/30 grid that wraps the body + the sticky sidebar. The main column auto-fills (minmax 0 1fr) so it can shrink past the intrinsic content width, the sidebar is a fixed 300px. Below 900px the sidebar drops underneath the post body. */ .blog-post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-12); max-width: 1180px; margin: 0 auto; align-items: start; } .blog-post-layout__main { min-width: 0; } .blog-post-layout__sidebar { position: sticky; top: var(--space-6); align-self: start; } .blog-post-sidebar__head { margin-bottom: var(--space-4); } .blog-post-sidebar__eyebrow { display: block; font-family: var(--font-display); font-size: 11px; font-weight: var(--fw-medium); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-primary); padding-bottom: var(--space-3); border-bottom: 1px solid var(--surface-card-border); } .blog-post-sidebar__list { display: flex; flex-direction: column; gap: var(--space-5); } .blog-post-sidebar__card { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: inherit; transition: transform var(--duration-base) var(--ease-out); } .blog-post-sidebar__card:hover { transform: translateY(-2px); } .blog-post-sidebar__card-cover { aspect-ratio: 16 / 10; border-radius: var(--radius-md); background-size: cover; background-position: center; background-color: #1A0A2A; } .blog-post-sidebar__card-meta { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.04em; color: var(--text-on-light-secondary); text-transform: uppercase; } .blog-post-sidebar__card-title { font-family: var(--font-display); font-size: 16px; font-weight: var(--fw-medium); line-height: 1.3; letter-spacing: var(--tracking-tight); color: var(--text-on-light-primary); transition: color var(--duration-base) var(--ease-out); } .blog-post-sidebar__card:hover .blog-post-sidebar__card-title { color: var(--brand-primary); } /* Body */ .blog-post-body { background: var(--surface-white); padding: var(--space-20) 0 var(--space-24); } .blog-post-body__content { /* Main column inside the 70/30 grid — fills its column. */ font-family: var(--font-body); font-size: 18px; line-height: 1.75; color: var(--text-on-light-primary); } .blog-post-body__content > * + * { margin-top: var(--space-5); } /* Drop cap — magazine-style first letter on the first paragraph. Branded pink, Display font, generous size, floats so following text wraps cleanly around it. */ .blog-post-body__content > p:first-child::first-letter { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 4.6rem; line-height: 0.85; float: left; padding: 6px 14px 0 0; color: var(--brand-primary); } .blog-post-body__content h2, .blog-post-body__content h3 { font-family: var(--font-display); font-weight: var(--fw-medium); line-height: 1.2; letter-spacing: var(--tracking-tight); margin-top: var(--space-12); color: var(--text-on-light-primary); } .blog-post-body__content h2 { font-size: 2rem; /* Pink underline accent under each H2 */ position: relative; padding-bottom: var(--space-3); } .blog-post-body__content h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 56px; height: 3px; background: var(--brand-primary); border-radius: 2px; } .blog-post-body__content h3 { font-size: 1.4rem; margin-top: var(--space-8); } .blog-post-body__content p { font-size: 18px; line-height: 1.75; } .blog-post-body__content a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .blog-post-body__content a:hover { color: var(--brand-primary-dark); text-decoration-thickness: 2px; } .blog-post-body__content ul, .blog-post-body__content ol { padding-left: var(--space-6); } .blog-post-body__content li + li { margin-top: var(--space-2); } .blog-post-body__content ul li::marker { color: var(--brand-primary); } .blog-post-body__content strong { color: var(--text-on-light-primary); font-weight: 600; } /* Magazine-style blockquote with an oversized opening quote glyph */ .blog-post-body__content blockquote { position: relative; margin: var(--space-10) 0; padding: var(--space-6) var(--space-8) var(--space-6) var(--space-12); font-family: var(--font-display); font-size: 1.4rem; font-weight: var(--fw-medium); line-height: 1.4; color: var(--text-on-light-primary); background: var(--surface-off-white); border-radius: var(--radius-lg); border-left: 4px solid var(--brand-primary); } .blog-post-body__content blockquote::before { content: '“'; position: absolute; top: -10px; left: 16px; font-family: 'Times New Roman', Georgia, serif; font-size: 6rem; line-height: 1; color: var(--brand-primary); opacity: 0.85; pointer-events: none; } .blog-post-body__content code { background: var(--surface-off-white); padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.92em; } .blog-post-body__content pre { background: var(--surface-near-black); color: var(--text-on-dark-primary); padding: var(--space-5); border-radius: var(--radius-md); overflow-x: auto; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 14px; line-height: 1.6; } .blog-post-body__content pre code { background: transparent; padding: 0; } .blog-post-body__content img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--space-8) 0; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); } .blog-post-body__content hr { border: 0; height: 1px; background: var(--surface-card-border); margin: var(--space-10) auto; max-width: 200px; } /* Share row sits at the bottom of the main column inside the 70/30 grid — let it fill the column instead of capping width. */ .blog-post-body__share { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--surface-card-border); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .blog-post-body__share-label { font-family: var(--font-display); font-size: 12px; font-weight: var(--fw-medium); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-on-light-secondary); } .blog-post-body__share-buttons { display: flex; gap: var(--space-2); } .blog-post-body__share-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-off-white); border: 1px solid var(--surface-card-border); color: var(--text-on-light-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .blog-post-body__share-btn:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--brand-white); } .blog-post-body__share-btn.is-copied { background: #1F8A4F; border-color: #1F8A4F; color: var(--brand-white); } /* Sidebar drops below the main column on narrower screens, and body type tightens for phones. */ @media (max-width: 900px) { .blog-post-layout { grid-template-columns: 1fr; gap: var(--space-10); max-width: 760px; } .blog-post-layout__sidebar { position: static; } } @media (max-width: 600px) { .blog-post-body__content { font-size: 17px; } .blog-post-body__content > p:first-child::first-letter { font-size: 3.6rem; } .blog-post-body__content blockquote { font-size: 1.15rem; padding-left: var(--space-10); } .blog-post-body__share { flex-direction: column; align-items: flex-start; } } /* "No post found" / 404-style state */ .blog-not-found { max-width: 600px; margin: 0 auto; text-align: center; padding: var(--space-16) var(--space-4); background: var(--surface-off-white); border: 1px dashed var(--surface-card-border); border-radius: var(--radius-lg); } .blog-not-found h2 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: var(--space-3); } .blog-not-found p { color: var(--text-on-light-secondary); margin-bottom: var(--space-6); }