/* ============================================================ PR BY NAZ — Global Stylesheet Design: Clean Editorial Light Palette: Warm near-white #F8F8F6, near-black #111111, pink #E8186D Typography: Sora (headings) + Manrope (body) ============================================================ */ /* ---- Google Fonts are loaded in the of each page ---- */ /* ---- CSS Reset & Base ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Manrope', system-ui, sans-serif; background: #F8F8F6; color: #111111; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: 'Sora', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; } /* ---- CSS Custom Properties (Brand Tokens) ---- */ :root { --pink: #E8186D; --pink-dark: #c01059; --pink-light: #f0559a; --dark: #0F0F0F; --charcoal: #1a1a1a; --warm-white: #F8F8F6; --off-white: #F2F2F0; --mid-grey: #888888; --light-grey: #e8e8e8; --border: #ebebeb; --radius: 4px; --shadow-card: 0 4px 24px rgba(0,0,0,0.07); --shadow-hover: 0 8px 32px rgba(232,24,109,0.12); --transition: 0.25s ease; } /* ---- Container ---- */ .container { width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } /* ---- Utility Classes ---- */ .brand-pink { color: var(--pink); } .bg-brand-pink { background-color: var(--pink); } .bg-brand-dark { background-color: var(--dark); } .bg-brand-warm { background-color: var(--warm-white); } .text-white { color: #fff; } .text-muted { color: var(--mid-grey); } .font-sora { font-family: 'Sora', sans-serif; } .font-manrope { font-family: 'Manrope', sans-serif; } /* ---- Section Label (eyebrow) ---- */ .section-label { display: block; font-family: 'Manrope', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink); margin-bottom: 1rem; } /* ---- Heading Accent (pink underline bar) ---- */ .heading-accent { position: relative; display: inline-block; padding-bottom: 0.6rem; } .heading-accent::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: 3px; background: var(--pink); border-radius: 2px; } /* ---- Scroll Reveal ---- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } .reveal-delay-5 { transition-delay: 0.5s; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 0.875rem; letter-spacing: 0.03em; padding: 0.8rem 1.75rem; border-radius: var(--radius); border: 2px solid transparent; transition: background var(--transition), color var(--transition), border-color var(--transition), transform 0.15s ease; text-decoration: none; cursor: pointer; white-space: nowrap; } .btn-pink { background: var(--pink); color: #fff; border-color: var(--pink); } .btn-pink:hover { background: var(--pink-dark); border-color: var(--pink-dark); transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--dark); border-color: var(--dark); } .btn-outline:hover { background: var(--dark); color: #fff; transform: translateY(-1px); } .btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.65); } .btn-outline-white:hover { background: rgba(255,255,255,0.12); border-color: #fff; transform: translateY(-1px); } /* ---- Icon Tile ---- */ .icon-tile { width: 3rem; height: 3rem; border-radius: 8px; background: linear-gradient(135deg, var(--pink), var(--pink-dark)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon-tile svg { width: 1.25rem; height: 1.25rem; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---- Stat Number ---- */ .stat-number { font-family: 'Sora', sans-serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; color: var(--pink); line-height: 1; } /* ============================================================ HEADER ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(248,248,246,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(0,0,0,0.07); transition: box-shadow 0.3s ease; } .site-header.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,0.1); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; } .header-logo img { height: 46px; width: auto; object-fit: contain; } .header-nav { display: flex; align-items: center; gap: 1.75rem; } .nav-link { position: relative; font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 0.875rem; color: #111; text-decoration: none; padding-bottom: 2px; transition: color var(--transition); } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--pink); transition: width 0.25s ease; } .nav-link:hover { color: var(--pink); } .nav-link:hover::after { width: 100%; } .nav-link.active { color: var(--pink); } .nav-link.active::after{ width: 100%; } .header-right { display: flex; align-items: center; gap: 1rem; } .header-phone { display: flex; align-items: center; gap: 0.4rem; font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 500; color: #111; text-decoration: none; transition: color var(--transition); } .header-phone:hover { color: var(--pink); } .header-phone svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Hamburger — hidden on desktop */ .header-hamburger { display: none; background: none; border: none; padding: 0.25rem; color: #111; cursor: pointer; } .header-hamburger svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---- Mobile Menu ---- */ .mobile-menu { position: fixed; inset: 0; background: var(--dark); z-index: 200; display: flex; flex-direction: column; padding: 2rem 1.5rem; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-menu.open { transform: translateX(0); } .mobile-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; } .mobile-menu-header img { height: 36px; width: auto; } .mobile-close { background: none; border: none; color: #fff; cursor: pointer; padding: 0.25rem; } .mobile-close svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mobile-nav { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .mobile-nav a { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.75rem; color: rgba(255,255,255,0.88); text-decoration: none; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); transition: color var(--transition); } .mobile-nav a:hover, .mobile-nav a.active { color: var(--pink); } .mobile-menu-footer { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; } .mobile-menu-footer .btn { justify-content: center; } .mobile-menu-phone { display: flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.6); font-size: 0.875rem; font-family: 'Manrope', sans-serif; text-decoration: none; } .mobile-menu-phone svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================ CLIENT LOGO STRIP ============================================================ */ .client-logo-strip { background-color: #F8F8F6; padding: 3rem 0; border-top: 1px solid var(--border); } .logo-strip-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3rem 4rem; } .logo-strip-inner img { max-height: 50px; max-width: 160px; object-fit: contain; filter: grayscale(100%) opacity(60%); transition: filter var(--transition), transform var(--transition); } .logo-strip-inner img:hover { filter: grayscale(0%) opacity(100%); transform: scale(1.05); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--dark); color: rgba(255,255,255,0.75); } .footer-top { padding: 5rem 0 3rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; } .footer-brand p { font-size: 0.875rem; line-height: 1.7; margin-top: 1.25rem; max-width: 280px; } .footer-logo { height: 40px; width: auto; margin-bottom: 0; } .footer-col h4 { font-family: 'Sora', sans-serif; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 1.25rem; } .footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; } .footer-col ul li a { font-size: 0.875rem; color: rgba(255,255,255,0.65); text-decoration: none; transition: color var(--transition); } .footer-col ul li a:hover { color: var(--pink); } .footer-contact-item { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.875rem; color: rgba(255,255,255,0.65); margin-bottom: 0.75rem; text-decoration: none; transition: color var(--transition); } .footer-contact-item:hover { color: rgba(255,255,255,0.9); } .footer-contact-item svg { width: 14px; height: 14px; stroke: var(--pink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 2px; } .footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.08); } .footer-bottom { padding: 1.5rem 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-bottom p { font-size: 0.8rem; color: rgba(255,255,255,0.4); } .footer-social { display: flex; gap: 0.75rem; } .footer-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); transition: border-color var(--transition), color var(--transition), background var(--transition); } .footer-social a:hover { border-color: var(--pink); color: var(--pink); background: rgba(232,24,109,0.08); } .footer-social a svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .footer-w4b { font-size: 0.8rem; color: rgba(255,255,255,0.35); text-decoration: none; transition: color var(--transition); } .footer-w4b:hover { color: rgba(255,255,255,0.65); } /* ============================================================ PAGE HERO (inner pages) ============================================================ */ .page-hero { padding: 9rem 0 5rem; background: var(--dark); position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(-55deg, var(--pink) 0px, var(--pink) 8px, transparent 8px, transparent 22px); opacity: 0.07; pointer-events: none; } .page-hero .section-label { color: rgba(232,24,109,0.9); } .page-hero h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 4rem); max-width: 700px; } .page-hero p { color: rgba(255,255,255,0.7); font-size: 1.1rem; max-width: 600px; margin-top: 1.25rem; line-height: 1.75; } /* ============================================================ HOME — HERO CAROUSEL ============================================================ */ .hero { position: relative; height: 100vh; min-height: 580px; max-height: 900px; overflow: hidden; background: var(--dark); } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; } .hero-slide.active { opacity: 1; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(15,15,15,0.78) 0%, rgba(15,15,15,0.3) 60%, transparent 100%); } .hero-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 1.5rem; max-width: 1320px; margin: 0 auto; left: 0; right: 0; } .hero-eyebrow { font-family: 'Manrope', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 1.25rem; } .hero-content h1 { font-size: clamp(2.5rem, 5.5vw, 4.5rem); color: #fff; max-width: 680px; margin-bottom: 1.25rem; } .hero-content p { font-size: 1.05rem; color: rgba(255,255,255,0.75); max-width: 520px; line-height: 1.75; margin-bottom: 2rem; } .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; } /* Carousel dots */ .hero-dots { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 10; } .hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.35); border: none; cursor: pointer; transition: background var(--transition), transform var(--transition); } .hero-dot.active { background: var(--pink); transform: scale(1.3); } /* Carousel arrows */ .hero-arrows { position: absolute; bottom: 1.5rem; right: 2rem; display: flex; gap: 0.5rem; z-index: 10; } .hero-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition), border-color var(--transition); } .hero-arrow:hover { background: var(--pink); border-color: var(--pink); } .hero-arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================ HOME — STATS BAR ============================================================ */ .stats-bar { background: #fff; border-bottom: 1px solid var(--border); padding: 2.5rem 0; } .stats-bar-inner { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; align-items: center; } .stat-item { text-align: center; } .stat-item .stat-number { font-size: clamp(1.5rem, 3vw, 2.25rem); } .stat-item p { font-size: 0.75rem; color: var(--mid-grey); margin-top: 0.25rem; font-weight: 500; } .stat-divider { width: 1px; height: 40px; background: var(--border); margin: 0 auto; } /* ============================================================ HOME — SERVICES GRID ============================================================ */ .services-section { padding: 6rem 0; background: var(--warm-white); } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; } .service-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem 1.75rem; transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); } .service-card:hover { box-shadow: var(--shadow-hover); border-color: var(--pink); transform: translateY(-3px); } .service-card h3 { font-size: 1.05rem; margin: 1rem 0 0.5rem; } .service-card p { font-size: 0.875rem; color: var(--mid-grey); line-height: 1.65; } /* ============================================================ HOME — ADVANTAGE (dark section) ============================================================ */ .advantage-section { padding: 6rem 0; background: var(--dark); position: relative; overflow: hidden; } .advantage-section::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(-55deg, var(--pink) 0px, var(--pink) 8px, transparent 8px, transparent 22px); opacity: 0.07; pointer-events: none; } .advantage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .advantage-items { display: flex; flex-direction: column; gap: 2rem; margin-top: 2.5rem; } .advantage-item { display: flex; gap: 1.25rem; align-items: flex-start; } .advantage-item h4 { font-size: 1rem; color: #fff; margin-bottom: 0.35rem; } .advantage-item p { font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.65; } /* ============================================================ HOME — WORK HIGHLIGHTS ============================================================ */ .work-section { padding: 6rem 0; background: var(--warm-white); } .work-grid-home { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 3rem; } .work-card { overflow: hidden; border-radius: var(--radius); background: var(--dark); position: relative; cursor: pointer; } .work-card video, .work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; } .work-card:hover video, .work-card:hover img { transform: scale(1.04); } .work-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,15,15,0.88) 0%, rgba(15,15,15,0.2) 55%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; color: #fff; } .work-card-overlay .section-label { color: rgba(232,24,109,0.9); margin-bottom: 0.4rem; } .work-card-overlay h3 { font-size: 1.1rem; color: #fff; } .work-card-overlay p { font-size: 0.8rem; color: rgba(255,255,255,0.65); margin-top: 0.25rem; } /* ============================================================ HOME — INFLUENCER STATS ============================================================ */ .influencer-section { padding: 6rem 0; background: var(--dark); } .influencer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .influencer-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; } .influencer-stat-item .stat-number { font-size: clamp(2rem, 4vw, 3rem); } .influencer-stat-item p { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin-top: 0.25rem; font-weight: 500; } /* ============================================================ HOME — ABOUT PREVIEW ============================================================ */ .about-preview { padding: 6rem 0; background: var(--warm-white); } .about-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .about-preview-image { position: relative; } .about-preview-image img { width: 100%; height: 520px; object-fit: cover; object-position: center top; border-radius: var(--radius); } .about-preview-image::after { content: ''; position: absolute; bottom: -1.5rem; right: -1.5rem; width: 60%; height: 60%; border: 3px solid var(--pink); border-radius: var(--radius); z-index: -1; } .about-preview-text h2 { font-size: clamp(2rem, 3.5vw, 2.75rem); margin-bottom: 1.5rem; } .about-preview-text p { color: #444; line-height: 1.8; margin-bottom: 1rem; } /* ============================================================ HOME — PRESS PREVIEW ============================================================ */ .press-preview { padding: 6rem 0; background: #fff; } .press-preview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; } .press-tile { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; transition: box-shadow var(--transition), transform var(--transition); } .press-tile:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.1); transform: translateY(-3px); } .press-tile-body { padding: 1.25rem; } .press-tile-outlet { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink); margin-bottom: 0.5rem; } .press-tile h4 { font-size: 0.9rem; line-height: 1.4; color: #111; } /* ============================================================ WORK PAGE ============================================================ */ .work-page-grid { display: flex; flex-direction: column; gap: 5rem; padding: 5rem 0; } .work-item { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .work-item.reverse { direction: rtl; } .work-item.reverse > * { direction: ltr; } .work-item-media { border-radius: var(--radius); overflow: hidden; background: var(--dark); aspect-ratio: 16/10; } .work-item-media video, .work-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .work-item-content .section-label { margin-bottom: 0.75rem; } .work-item-content h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 1rem; } .work-item-content p { color: #444; line-height: 1.8; margin-bottom: 1rem; } .work-item-content ul { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; } .work-item-content ul li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.875rem; color: #444; } .work-item-content ul li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); flex-shrink: 0; margin-top: 6px; } /* ============================================================ SERVICES PAGE ============================================================ */ .services-page { padding: 5rem 0; } .services-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .service-card-full { padding: 2.25rem; } .service-card-full h3 { font-size: 1.1rem; margin: 1rem 0 0.75rem; } .service-card-full p { font-size: 0.875rem; color: var(--mid-grey); line-height: 1.65; margin-bottom: 1rem; } .service-card-full ul { display: flex; flex-direction: column; gap: 0.4rem; } .service-card-full ul li { font-size: 0.8rem; color: #555; padding-left: 1rem; position: relative; } .service-card-full ul li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--pink); } .process-section { padding: 6rem 0; background: var(--dark); } .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 3rem; } .process-step { text-align: center; } .process-step-num { font-family: 'Sora', sans-serif; font-size: 3rem; font-weight: 800; color: var(--pink); opacity: 0.4; line-height: 1; margin-bottom: 1rem; } .process-step h4 { color: #fff; font-size: 1rem; margin-bottom: 0.5rem; } .process-step p { font-size: 0.875rem; color: rgba(255,255,255,0.55); line-height: 1.65; } /* ============================================================ INFLUENCERS PAGE ============================================================ */ .influencers-page { padding: 5rem 0; } .platform-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; } .platform-stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; transition: box-shadow var(--transition), transform var(--transition); } .platform-stat-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } .platform-stat-card .stat-number { font-size: clamp(1.75rem, 3vw, 2.5rem); } .platform-stat-card p { font-size: 0.8rem; color: var(--mid-grey); margin-top: 0.35rem; font-weight: 500; } .platform-stat-card .platform-name { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink); margin-bottom: 0.5rem; } .creator-categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; } .creator-cat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; transition: box-shadow var(--transition), transform var(--transition); } .creator-cat-card:hover { box-shadow: var(--shadow-hover); border-color: var(--pink); transform: translateY(-3px); } .creator-cat-card h3 { font-size: 1rem; margin: 0.75rem 0 0.5rem; } .creator-cat-card p { font-size: 0.875rem; color: var(--mid-grey); line-height: 1.65; } /* ============================================================ CLIENTS PAGE ============================================================ */ .clients-page { padding: 5rem 0; } .clients-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; } .client-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; transition: box-shadow var(--transition), transform var(--transition); } .client-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } .client-card-icon { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--pink-dark)); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; } .client-card-icon svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .client-card h3 { font-size: 0.95rem; margin-bottom: 0.35rem; } .client-card p { font-size: 0.8rem; color: var(--mid-grey); } .sectors-section { padding: 5rem 0; background: var(--warm-white); } .sectors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; } .sector-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); } .sector-card:hover { box-shadow: var(--shadow-hover); border-color: var(--pink); transform: translateY(-3px); } .sector-card h3 { font-size: 1rem; margin: 0.75rem 0 0.5rem; } .sector-card p { font-size: 0.875rem; color: var(--mid-grey); line-height: 1.65; } /* ============================================================ PRESS PAGE ============================================================ */ .press-page { padding: 5rem 0; } .press-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 4rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .press-featured-image img { width: 100%; height: 360px; object-fit: cover; object-position: top; display: block; } .press-featured-content { padding: 2.5rem 2.5rem 2.5rem 0; } .press-featured-content .section-label { margin-bottom: 0.75rem; } .press-featured-content h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: 1rem; } .press-featured-content p { color: #444; line-height: 1.8; margin-bottom: 1.5rem; } .press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .press-outlets { padding: 5rem 0; background: var(--warm-white); } .outlets-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem; margin-top: 3rem; align-items: center; } .outlet-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; text-align: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.9rem; color: #333; transition: box-shadow var(--transition), transform var(--transition); } .outlet-item:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); } /* ============================================================ ABOUT PAGE ============================================================ */ .about-page { padding: 5rem 0; } .about-intro-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: start; } .about-intro-image { position: relative; } .about-intro-image img { width: 100%; height: 580px; object-fit: cover; object-position: center top; border-radius: var(--radius); } .about-intro-image::after { content: ''; position: absolute; bottom: -1.5rem; right: -1.5rem; width: 55%; height: 55%; border: 3px solid var(--pink); border-radius: var(--radius); z-index: -1; } .about-intro-text h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: 1.5rem; } .about-intro-text p { color: #444; line-height: 1.85; margin-bottom: 1.25rem; } .values-section { padding: 5rem 0; background: var(--warm-white); } .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; } .value-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); } .value-card:hover { box-shadow: var(--shadow-hover); border-color: var(--pink); transform: translateY(-3px); } .value-card h3 { font-size: 1rem; margin: 0.75rem 0 0.5rem; } .value-card p { font-size: 0.875rem; color: var(--mid-grey); line-height: 1.65; } .community-section { padding: 5rem 0; background: var(--dark); position: relative; overflow: hidden; } .community-section::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(-55deg, var(--pink) 0px, var(--pink) 8px, transparent 8px, transparent 22px); opacity: 0.07; pointer-events: none; } .community-section h2 { color: #fff; font-size: clamp(2rem, 3.5vw, 2.75rem); max-width: 600px; margin-bottom: 1.5rem; } .community-section p { color: rgba(255,255,255,0.65); line-height: 1.8; max-width: 640px; margin-bottom: 1rem; } .community-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 1; } .community-image { height: 100%; min-height: 400px; } /* ============================================================ CONTACT PAGE ============================================================ */ .contact-page { padding: 5rem 0; } .contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 5rem; align-items: start; } .contact-info h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 1.5rem; } .contact-info p { color: #444; line-height: 1.8; margin-bottom: 2rem; } .contact-detail { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; } .contact-detail-icon { width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, var(--pink), var(--pink-dark)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-detail-icon svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .contact-detail h4 { font-size: 0.8rem; font-weight: 600; color: var(--mid-grey); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.2rem; } .contact-detail a, .contact-detail p { font-size: 0.95rem; color: #111; text-decoration: none; transition: color var(--transition); } .contact-detail a:hover { color: var(--pink); } .contact-social { display: flex; gap: 0.75rem; margin-top: 2rem; } .contact-social a { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; color: #555; transition: border-color var(--transition), color var(--transition), background var(--transition); } .contact-social a:hover { border-color: var(--pink); color: var(--pink); background: rgba(232,24,109,0.06); } .contact-social a svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Contact Form */ .contact-form { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem; } .contact-form h3 { font-size: 1.25rem; margin-bottom: 2rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; } .form-group label { font-size: 0.8rem; font-weight: 600; color: #333; letter-spacing: 0.04em; } .form-input { width: 100%; background: #fff; border: 1.5px solid #e0e0e0; border-radius: 3px; padding: 0.875rem 1rem; font-family: 'Manrope', sans-serif; font-size: 0.9rem; color: #111; transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(232,24,109,0.1); } .form-input::placeholder { color: #aaa; } textarea.form-input { resize: vertical; min-height: 130px; } .form-success { display: none; background: #f0fdf4; border: 1px solid #86efac; border-radius: var(--radius); padding: 1rem 1.25rem; color: #166534; font-size: 0.9rem; margin-top: 1rem; } .form-error { display: none; background: #fef2f2; border: 1px solid #fca5a5; border-radius: var(--radius); padding: 1rem 1.25rem; color: #991b1b; font-size: 0.9rem; margin-top: 1rem; } /* ============================================================ CTA BANNER ============================================================ */ .cta-banner { padding: 6rem 0; background: var(--pink); text-align: center; } .cta-banner h2 { font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin-bottom: 1rem; } .cta-banner p { color: rgba(255,255,255,0.85); font-size: 1.05rem; max-width: 560px; margin: 0 auto 2.5rem; line-height: 1.75; } .cta-banner .btn-outline-white { font-size: 1rem; padding: 1rem 2.5rem; } /* ============================================================ TESTIMONIALS ============================================================ */ .testimonials-section { padding: 6rem 0; background: var(--warm-white); } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; } .testimonial-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; } .testimonial-card blockquote { font-size: 0.9rem; color: #444; line-height: 1.75; font-style: italic; margin-bottom: 1.25rem; } .testimonial-card blockquote::before { content: '\201C'; font-size: 2rem; color: var(--pink); line-height: 0; vertical-align: -0.5rem; margin-right: 0.25rem; } .testimonial-author { font-size: 0.8rem; font-weight: 700; color: #111; } .testimonial-role { font-size: 0.75rem; color: var(--mid-grey); margin-top: 0.15rem; } /* ============================================================ MOBILE RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .footer-top { grid-template-columns: 1fr 1fr; } .stats-bar-inner { grid-template-columns: repeat(3, 1fr); } .stat-divider { display: none; } .services-grid { grid-template-columns: repeat(2, 1fr); } .services-page-grid { grid-template-columns: repeat(2, 1fr); } .process-steps { grid-template-columns: repeat(2, 1fr); } .platform-stats { grid-template-columns: repeat(2, 1fr); } .clients-grid { grid-template-columns: repeat(3, 1fr); } .outlets-grid { grid-template-columns: repeat(3, 1fr); } .press-preview-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .header-nav { display: none; } .header-phone { display: none; } .header-cta { display: none; } .header-hamburger { display: flex; } .footer-top { grid-template-columns: 1fr; gap: 2rem; } .footer-bottom { flex-direction: column; text-align: center; } .hero-content h1 { font-size: clamp(2rem, 8vw, 3rem); } .hero-content p { font-size: 0.95rem; } .stats-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .services-grid { grid-template-columns: 1fr; } .advantage-grid { grid-template-columns: 1fr; gap: 2.5rem; } .work-grid-home { grid-template-columns: 1fr; } .influencer-grid { grid-template-columns: 1fr; gap: 2.5rem; } .influencer-stats { grid-template-columns: repeat(2, 1fr); } .about-preview-grid { grid-template-columns: 1fr; gap: 2.5rem; } .press-preview-grid { grid-template-columns: 1fr; } .work-grid-home { grid-template-columns: 1fr; gap: 2rem; } .work-card { height: 320px !important; } .work-item { grid-template-columns: 1fr; gap: 2rem; } .work-item.reverse { direction: ltr; } .services-page-grid { grid-template-columns: 1fr; } .process-steps { grid-template-columns: 1fr; } .platform-stats { grid-template-columns: repeat(2, 1fr); } .creator-categories { grid-template-columns: 1fr; } .clients-grid { grid-template-columns: repeat(2, 1fr); } .sectors-grid { grid-template-columns: 1fr; } .testimonials-grid { grid-template-columns: 1fr; } .press-featured { grid-template-columns: 1fr; } .press-featured-content { padding: 1.5rem; } .press-grid { grid-template-columns: 1fr; } .outlets-grid { grid-template-columns: repeat(2, 1fr); } .about-intro-grid { grid-template-columns: 1fr; gap: 2.5rem; } .about-intro-image::after { display: none; } .values-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; } .form-row { grid-template-columns: 1fr; } .about-preview-image::after { display: none; } .about-preview-image img { height: 320px; } .about-intro-image img { height: 360px; } .page-hero { padding: 7rem 0 3.5rem; } .page-hero h1 { font-size: clamp(2rem, 8vw, 2.75rem); } .community-grid { grid-template-columns: 1fr; gap: 3rem; } .community-image { min-height: 300px; } .logo-strip-inner { gap: 2rem; } .logo-strip-inner img { max-height: 40px; max-width: 120px; } } @media (max-width: 480px) { .clients-grid { grid-template-columns: 1fr; } .platform-stats { grid-template-columns: 1fr; } .hero-buttons { flex-direction: column; } .hero-buttons .btn { width: 100%; justify-content: center; } }