/* ============================================================ MONROE MEDIA -- HOMEPAGE STYLES Homepage of a planned multi-page site. Shared stylesheet: keep selectors generic so services.html / work.html / about.html can reuse this file without a rewrite. Design language mirrors premiermarketingus.com: Space Grotesk headings, Plus Jakarta Sans body, indigo-violet accent, near-black darks, off-white rounded panels. Swap --accent + --accent-2 to re-skin the whole site. ============================================================ */ /* ============================================================ TOKENS ============================================================ */ :root { --accent: #6D28D9; /* indigo-violet -- buttons, links, highlights */ --accent-2: #A855F7; /* gradient end / hover (violet) */ --accent-rgb: 109, 40, 217; --accent-soft: #EDE4FF; /* pale violet tint on light */ --accent-glow: rgba(109, 40, 217, 0.35); --gold: #E0B23C; /* rating stars */ --ink: #120F14; /* primary dark background */ --ink-2: #1A151E; /* raised dark surface */ --ink-3: #221E24; /* dark card */ --line-dark: #2E2833; --paper: #F9F7FA; /* off-white panel */ --paper-2: #EEECEF; /* light divider / chip */ --line-light: #E4E0E8; --text-on-dark: #F3F0F5; --text-on-dark-muted: #B7B0C0; --text-on-light: #2A2630; --text-on-light-muted: #6B6473; --font-h: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-b: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --container: 1240px; --header-h: 112px; /* nav height + hero top offset; steps down on tablet/mobile */ --radius: 32px; --radius-md: 20px; --radius-sm: 14px; } /* ============================================================ RESET + BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } body { font-family: var(--font-b); background: var(--ink); color: var(--text-on-dark); line-height: 1.6; font-size: 1.0625rem; /* 17px -> 16px at <=1024 (see RESPONSIVE) */ -webkit-font-smoothing: antialiased; overflow-x: clip; /* contain full-bleed sections without making a scroll container */ } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ul { list-style: none; } :focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 3px; } h1, h2, h3, h4 { font-family: var(--font-h); font-weight: 600; line-height: 1.06; letter-spacing: -0.05em; } /* Desktop type. Tablet + mobile are stepped to premiermarketingus.com's exact values in the RESPONSIVE block (Premier holds a flat size across each band rather than scaling fluidly): Premier tablet (<=1024): H1 42 H2 27 H3 18 body 16 Premier mobile (<=768): H1 34 H2 22 H3 15 body 16 */ h1 { font-size: clamp(2.75rem, 5vw, 4.2rem); } h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -0.028em; } h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 600; letter-spacing: -0.033em; line-height: 1.2; } p { font-size: clamp(1rem, 1.2vw, 1.0625rem); } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); /* ~20px mobile -> ~48px desktop (Premier ~50) */ } .section { padding-block: clamp(2.75rem, 5.5vw, 5rem); } /* Premier: 80px desktop, ~5% tablet/mobile */ /* eyebrow -- single liquid-glass pill, one violet-tinted color */ .eyebrow { display: inline-block; margin-bottom: 1.4rem; padding: 0.4rem 0.95rem; border-radius: 999px; font-family: var(--font-b); font-size: 0.75rem; /* 12px -- matches Premier's overline */ font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-2); background: rgba(var(--accent-rgb), 0.14); border: 1px solid rgba(var(--accent-rgb), 0.30); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 6px 18px rgba(var(--accent-rgb), 0.14); } .eyebrow span { display: inline; } /* collapse any legacy split markup */ .eyebrow span + span::before { content: " "; } .panel-light .eyebrow { color: var(--accent); background: rgba(var(--accent-rgb), 0.10); border-color: rgba(var(--accent-rgb), 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 16px rgba(var(--accent-rgb), 0.10); } .section-head { max-width: 680px; margin-bottom: 3rem; } /* Premier centres section headings from tablet down */ @media (max-width: 1024px) { .section-head { margin-inline: auto; text-align: center; } .section-head p { margin-inline: auto; } } .section-head--center { margin-inline: auto; text-align: center; } .section-head p { margin-top: 1.1rem; color: var(--text-on-dark-muted); } .panel-light .section-head p { color: var(--text-on-light-muted); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.95rem 1.7rem; font-family: var(--font-b); font-size: 1.0625rem; font-weight: 600; border: 0; border-radius: 999px; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease; white-space: nowrap; } .btn--accent { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); color: #fff; box-shadow: 0 14px 40px var(--accent-glow); } .btn--accent:hover { transform: translateY(-2px); box-shadow: 0 20px 54px var(--accent-glow); } .btn--outline-dark { background: transparent; border: 1.5px solid var(--line-dark); color: var(--text-on-dark); } .btn--outline-dark:hover { background: #fff; color: var(--ink); border-color: #fff; } .arrowlink { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; padding-bottom: 2px; border-bottom: 1.5px solid currentColor; } .arrowlink:hover { color: var(--accent-2); } /* ============================================================ HEADER / PILL NAV ============================================================ */ /* floating header -- no bar, no background; sits over the hero */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; border-bottom: 0; } .nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); } /* nav-pill sits dead-center regardless of logo / right-side width */ .nav > .nav-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .wordmark { display: inline-flex; align-items: center; } .wordmark img { height: 5.55rem; width: auto; display: block; } /* compact square mark -- swapped in for the wordmark on mobile */ .wordmark .wordmark-icon { display: none; } .nav-pill { display: flex; align-items: center; gap: 0.25rem; padding: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(18, 15, 20, 0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background 0.3s ease, border-color 0.3s ease; } .nav-pill a { padding: 0.55rem 1.05rem; border-radius: 999px; font-size: 0.98rem; font-weight: 600; color: var(--text-on-dark-muted); transition: color 0.15s ease, background 0.15s ease; } .nav-pill a:hover { color: #fff; } .nav-pill a.is-active { background: rgba(255, 255, 255, 0.1); color: #fff; } .nav-right { display: flex; align-items: center; gap: 1.4rem; } .nav-phone { font-weight: 700; color: #fff; transition: color 0.3s ease; } /* the floating header has no bar of its own, so when it drifts over the light services panel its contents flip to dark ink (class toggled in main.js) */ .nav-phone, .nav-pill a, .nav-toggle span { transition: color 0.3s ease, background 0.3s ease; } /* logo: always the white wordmark -- no scroll-triggered recolor. A soft drop-shadow gives it edge definition if it drifts over a light panel. */ .wordmark img { transition: height 0.2s ease; } /* soft edge so the white wordmark still reads if it floats over a light panel; the purple icon PNG is left untouched */ .wordmark .wordmark-full { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.28)); } .site-header.on-light .nav-phone { color: var(--text-on-light); } .site-header.on-light .nav-pill { background: rgba(255, 255, 255, 0.72); border-color: var(--line-light); } .site-header.on-light .nav-pill a { color: var(--text-on-light-muted); } .site-header.on-light .nav-pill a:hover { color: var(--text-on-light); } .site-header.on-light .nav-pill a.is-active { background: rgba(0, 0, 0, 0.08); color: var(--text-on-light); } .site-header.on-light .nav-toggle span { background: var(--text-on-light); } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: 0; } .nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; transition: transform 0.2s ease, opacity 0.2s ease; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; text-align: center; /* header is fixed/out of flow now -- pad the hero by its height */ padding-block: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)) 0; /* dark at the top; a tall violet glow rises out of the bottom edge and protrudes well up into the hero. Its alpha at the bottom edge (~0.33) is matched by .intro's first stop so the two sections share one plateau. */ background: radial-gradient(160% 120% at 50% 124%, rgba(var(--accent-rgb), 0.52) 0%, rgba(var(--accent-rgb), 0.33) 20%, rgba(var(--accent-rgb), 0.12) 40%, rgba(var(--accent-rgb), 0.03) 58%, transparent 72%), var(--ink); overflow: hidden; } /* network-graphic bg image, kept behind the glowing gradient + content */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: url("assets/mm-hero-bg (1920 x 1080 px).png") no-repeat right bottom / cover; opacity: 0.14; /* keep the graphic in the corner AND dissolve it well before the bottom edge so it doesn't hard-cut at the hero/about seam */ -webkit-mask-image: radial-gradient(150% 130% at 100% 95%, #000 12%, transparent 72%), linear-gradient(to bottom, #000 45%, transparent 92%); -webkit-mask-composite: source-in; mask-image: radial-gradient(150% 130% at 100% 95%, #000 12%, transparent 72%), linear-gradient(to bottom, #000 45%, transparent 92%); mask-composite: intersect; pointer-events: none; } /* faint starfield */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,0.5) 0, transparent 100%), radial-gradient(1.5px 1.5px at 78% 12%, rgba(255,255,255,0.35) 0, transparent 100%), radial-gradient(1.5px 1.5px at 62% 38%, rgba(255,255,255,0.3) 0, transparent 100%), radial-gradient(1.5px 1.5px at 30% 60%, rgba(255,255,255,0.25) 0, transparent 100%), radial-gradient(1.5px 1.5px at 88% 54%, rgba(255,255,255,0.3) 0, transparent 100%), radial-gradient(1.5px 1.5px at 45% 8%, rgba(255,255,255,0.3) 0, transparent 100%); pointer-events: none; } .hero .container { position: relative; z-index: 1; } .hero h1 { max-width: 16ch; margin-inline: auto; /* brushed-metal / chrome sheen: alternating highlight + shadow bands with a bright specular streak just above the midline */ background: linear-gradient( 177deg, #f6f7fa 0%, #d4d8e0 18%, #a6abba 36%, #ffffff 50%, #bfc4d0 60%, #8c92a3 80%, #eceef3 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35)); } .hero-sub { margin: 1.5rem auto 0; max-width: 60ch; color: var(--text-on-dark-muted); font-size: clamp(1rem, 1.5vw, 1.15rem); /* Premier hero body: 17px -> 16px */ } /* liquid-glass trust badge */ .trust-pill { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2rem; padding: 0.62rem 1.25rem; border-radius: 999px; font-size: 0.95rem; font-weight: 600; color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.017) 0%, rgba(255, 255, 255, 0) 100%); border: 1px solid rgba(255, 255, 255, 0); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.256), inset 0 -10px 18px rgba(255, 255, 255, 0.04), 0 12px 34px rgba(0, 0, 0, 0.4); } .trust-pill::before { /* glossy top highlight */ content: ""; position: absolute; inset: 0 0 52% 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.161), rgba(255, 255, 255, 0)); pointer-events: none; } .trust-pill::after { /* diagonal specular streak */ content: ""; position: absolute; top: -60%; left: -20%; width: 32%; height: 220%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.21), transparent); transform: rotate(18deg); pointer-events: none; } /* review ratings -- three separate glass pills in one centred row */ .review-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 1.15rem auto 0; max-width: max-content; } .review-bar .cell { flex: 0 1 auto; display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 22px rgba(0, 0, 0, 0.28); } .review-tile { width: 24px; height: 24px; border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .review-tile svg { width: 14px; height: 14px; } .review-meta { display: flex; flex-direction: column; line-height: 1.2; } .review-score { display: flex; align-items: center; gap: 0.3rem; } .review-score strong { font-family: var(--font-h); font-size: 0.9rem; font-weight: 700; color: #fff; } .review-score .stars { color: var(--gold); font-size: 0.6rem; letter-spacing: 0.5px; } .review-name { text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.62rem; font-weight: 600; color: var(--text-on-dark-muted); } .hero-actions { display: flex; align-items: center; justify-content: center; gap: 1.75rem; margin-top: 2.5rem; flex-wrap: wrap; } /* full-width project carousel under the hero */ .hero-carousel { position: relative; z-index: 1; width: 100%; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: 3rem; } /* ============================================================ INTRO PARAGRAPH ============================================================ */ .intro { position: relative; text-align: center; padding-block: clamp(2.75rem, 6vw, 5.5rem); /* a RADIAL glow (not linear) that mirrors the hero's -- same centre-bright, edges-dim falloff -- so at the seam it matches the hero at every x, not just dead centre. Centre sits just above the intro, continuing the hero. */ background: radial-gradient(170% 900px at 50% -14%, rgba(var(--accent-rgb), 0.33) 0%, rgba(var(--accent-rgb), 0.20) 24%, rgba(var(--accent-rgb), 0.07) 46%, transparent 70%); } .intro p { max-width: 40ch; margin-inline: auto; font-family: var(--font-h); font-weight: 500; font-size: clamp(1.25rem, 3vw, 1.9rem); /* 20 -> ~30px, tracks Premier's statement line */ line-height: 1.25; letter-spacing: -0.03em; color: #fff; } .intro .muted { color: var(--text-on-dark-muted); } /* ============================================================ SOLUTIONS STRIP -- horizontal service marquee (uses .marquee below) ============================================================ */ .solutions { padding-block: clamp(1.75rem, 4vw, 3rem); border-block: 1px solid var(--line-dark); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ CURSOR RING -- purple circle trailing the pointer (desktop only, created + positioned by main.js) ============================================================ */ .cursor-ring { position: fixed; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--accent-2); background: rgba(var(--accent-rgb), 0.10); pointer-events: none; z-index: 99999; opacity: 0; transform: translate3d(-100px, -100px, 0) scale(0.7); transition: opacity 0.3s ease, background 0.2s ease, border-color 0.2s ease; will-change: transform; } .cursor-ring.is-visible { opacity: 1; } @media (hover: none), (pointer: coarse) { .cursor-ring { display: none; } } @media (prefers-reduced-motion: reduce) { .cursor-ring { display: none; } } .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; width: max-content; gap: 3rem; animation: marquee 26s linear infinite; } /* the services strip scrolls slower than the partners logo strip */ .solutions .marquee-track { animation-duration: 55s; } .marquee-track span { font-family: var(--font-h); font-weight: 500; font-size: 1.1rem; color: var(--text-on-dark-muted); white-space: nowrap; } .marquee-track span::after { content: "•"; margin-left: 3rem; color: var(--accent); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================================ PANEL: LIGHT (rounded-top, sits over the dark section above) ============================================================ */ .panel-light { background: var(--paper); color: var(--text-on-light); border-radius: var(--radius) var(--radius) 0 0; position: relative; z-index: 2; } .panel-light .section-head h2 { color: var(--text-on-light); } /* ============================================================ SERVICES (stacked wide rows) ============================================================ */ .svc-row { display: grid; grid-template-columns: 300px 1fr 310px; border: 1px solid var(--line-light); border-radius: var(--radius-md); overflow: hidden; background: #fff; box-shadow: 0 14px 60px rgba(0, 0, 0, 0.05); } .svc-row + .svc-row { margin-top: 1.25rem; } .svc-row[hidden] { display: none; } .svc-media { position: relative; overflow: hidden; background: var(--ink); min-height: 260px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.25rem; color: var(--text-on-dark-muted); font-size: 0.85rem; background-image: repeating-linear-gradient(45deg, #1c1622 0 14px, #171320 14px 28px); } .svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } /* hover anywhere on the row -> the row's image scales + a light shimmer sweeps it */ .svc-row:hover .svc-media:has(img) img { transform: scale(1.08); } .svc-media:has(img)::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%); transform: skewX(-14deg); opacity: 0; pointer-events: none; } .svc-row:hover .svc-media:has(img)::after { animation: svc-shimmer 0.9s ease; } @keyframes svc-shimmer { 0% { left: -70%; opacity: 0; } 12% { opacity: 1; } 100% { left: 130%; opacity: 0; } } .svc-body { padding: 2.4rem; position: relative; } .svc-tag { display: inline-block; padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 1.1rem; } .svc-arrow { position: absolute; top: 2.2rem; right: 2.2rem; color: var(--text-on-light-muted); } .svc-body h3 { margin-bottom: 0.7rem; } .svc-body p { color: var(--text-on-light-muted); } .svc-body .arrowlink { margin-top: 1.3rem; color: var(--accent); } .svc-feats { border-left: 1px solid var(--line-light); padding: 2.4rem; display: flex; flex-direction: column; gap: 0.9rem; align-self: stretch; } .svc-feats li { font-size: 0.98rem; font-weight: 500; color: var(--text-on-light); } .svc-feats li::before { content: "#"; color: var(--accent); font-weight: 700; margin-right: 0.55rem; } /* ============================================================ WHY WE ARE DIFFERENT ============================================================ */ .diff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .diff-card { position: relative; border: 1px solid var(--line-dark); border-radius: var(--radius-md); /* top padding clears the absolutely-positioned icon/number so every h3 starts at the same height regardless of body length */ padding: 5rem 1.6rem 1.6rem; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-start; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease; } .diff-card:hover { transform: translateY(-6px); border-color: var(--accent); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), rgba(255, 255, 255, 0)); box-shadow: 0 22px 55px rgba(var(--accent-rgb), 0.20); } .diff-card:hover .diff-num { color: var(--accent-2); } .diff-icon { position: absolute; top: 1.5rem; left: 1.5rem; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: var(--accent-2); display: flex; align-items: center; justify-content: center; transition: background 0.28s ease, color 0.28s ease; } .diff-card:hover .diff-icon { background: rgba(var(--accent-rgb), 0.22); color: #fff; } .diff-num { transition: color 0.28s ease; } .diff-num { position: absolute; top: 1.4rem; right: 1.6rem; font-family: var(--font-h); font-size: 1.2rem; color: var(--text-on-dark-muted); } .diff-card h3 { margin-bottom: 0.55rem; } .diff-card p { color: var(--text-on-dark-muted); font-size: 0.95rem; } /* ============================================================ PROJECT CAROUSELS (hero + "How We Helped") continuous CSS marquee -- cards are cloned once by main.js so translateX(-50%) wraps with no visible seam. Pauses on hover. ============================================================ */ .carousel { position: relative; overflow: hidden; } /* full-bleed carousel: lives outside .container so it spans the viewport */ .carousel--bleed { width: 100%; } .carousel--bleed .cases { padding-inline: clamp(1rem, 4vw, 3rem); } .cases { display: flex; width: max-content; animation: cases-scroll 60s linear infinite; } .carousel:hover .cases, .cases:focus-within { animation-play-state: paused; } @keyframes cases-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .cases { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; overflow-x: auto; } } /* margin (not gap) so total width == 2 x one full set -> translateX(-50%) lands exactly on a card edge and the loop has no seam */ .case { flex: 0 0 clamp(280px, 40vw, 440px); margin-right: 1.25rem; } .case-media { aspect-ratio: 16 / 10; border-radius: var(--radius-md); border: 1px solid var(--line-dark); overflow: hidden; margin-bottom: 1rem; background: repeating-linear-gradient(45deg, #1c1622 0 16px, #171320 16px 32px); } .case-media video { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .case h3 { margin-bottom: 0.35rem; } .case p { color: var(--text-on-dark-muted); font-size: 0.9rem; } /* ============================================================ FAQ (floating light panel) ============================================================ */ .faq-panel { background: var(--paper); color: var(--text-on-light); border-radius: var(--radius); padding: clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: 320px 1fr; gap: 3rem; } .faq-panel h2 { color: var(--text-on-light); } .faq-panel .arrowlink { margin-top: 1.75rem; color: var(--accent); } .faq-list { align-self: start; } .faq-item { border: 1px solid var(--line-light); border-radius: var(--radius-sm); background: #fff; margin-bottom: 1rem; } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.35rem 1.5rem; background: none; border: 0; text-align: left; font-family: var(--font-b); font-size: 1.05rem; font-weight: 700; color: var(--text-on-light); } .faq-q .chev { flex-shrink: 0; transition: transform 0.2s ease; color: var(--accent); } .faq-q[aria-expanded="true"] .chev { transform: rotate(90deg); } .faq-a { overflow: hidden; max-height: 0; transition: max-height 0.25s ease; } .faq-a p { padding: 0 1.5rem 1.4rem; color: var(--text-on-light-muted); max-width: 60ch; } .faq-a .arrowlink { margin: 0 1.5rem 1.4rem; font-size: 0.95rem; } /* ============================================================ PARTNERS / TECH STACK ============================================================ */ .partners { text-align: center; } .partners h2 { margin-bottom: 2.5rem; } .partners .marquee-track { gap: 4.5rem; align-items: center; } /* brand logo lockups -- brand color, slightly dimmed at rest, full on hover */ .partners .logo { display: inline-flex; align-items: center; gap: 0.8rem; font-family: var(--font-h); font-weight: 600; font-size: 1.55rem; letter-spacing: -0.01em; white-space: nowrap; color: var(--text-on-dark); opacity: 0.82; transition: opacity 0.25s ease; } .partners .logo svg { width: 2.5rem; height: 2.5rem; flex-shrink: 0; fill: currentColor; } /* Premier's brand-logo lockups (icon + wordmark, white on transparent). Taller than the icon+text lockups to even out their built-in padding. */ .partners .logo img { height: 2.6rem; width: auto; flex-shrink: 0; } .partners .logo--word { font-size: 1.6rem; letter-spacing: -0.02em; } .marquee:hover .logo { opacity: 0.9; } .partners .logo:hover { opacity: 1; } .partners .marquee-track span::after { content: none; } /* ============================================================ LET'S BUILD YOUR STRATEGY (contact) ============================================================ */ .build { text-align: center; background: radial-gradient(110% 90% at 50% 120%, #241457 0%, #100B2C 55%, var(--ink) 90%); border-top: 1px solid var(--line-dark); } .build h2 { max-width: 12ch; margin-inline: auto; } .build-feats { display: flex; justify-content: center; gap: 2.25rem; flex-wrap: wrap; margin-top: 1.75rem; } .build-feats span { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-on-dark-muted); font-weight: 600; } .build-feats svg { color: var(--accent-2); } .build-methods { /* cards size to their content and the pair is centered above the form */ display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; max-width: 640px; margin: 3rem auto 0; } .method { flex: 0 1 auto; min-width: 240px; border: 1px solid var(--line-dark); border-radius: var(--radius-md); padding: 1.75rem; background: rgba(255, 255, 255, 0.03); } .method .lbl { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 0.82rem; font-weight: 600; color: var(--text-on-dark-muted); margin-bottom: 1rem; } .method .val { font-family: var(--font-h); font-size: 1.05rem; font-weight: 600; white-space: nowrap; } .build-form { max-width: 640px; margin: 2.5rem auto 0; text-align: left; background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: var(--radius-md); padding: 2.25rem; } .field { margin-bottom: 1.1rem; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .field-row .field { margin-bottom: 1.1rem; } @media (max-width: 480px) { .field-row { grid-template-columns: 1fr; gap: 0; } } /* spam honeypot -- kept in the DOM, hidden from humans. Uses the "visually hidden" clip pattern (not left:-9999px) so it can never add scrollable width on narrow/mobile viewports. */ .hp-field { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; } .field label { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 0.4rem; } .field label .opt { font-weight: 400; color: var(--text-on-dark-muted); font-size: 0.85rem; } .field input, .field textarea, .field select { width: 100%; background: #100D13; border: 1.5px solid var(--line-dark); border-radius: 10px; padding: 0.8rem 1rem; color: #fff; font-family: inherit; font-size: 1rem; } .field textarea { min-height: 130px; resize: vertical; } .field select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B7B0C0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; } .field select option { color: #111; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent-2); background-color: #17121C; } .build-form .btn { width: 100%; justify-content: center; margin-top: 0.25rem; } .form-note { margin-top: 0.9rem; font-size: 0.9rem; color: var(--text-on-dark-muted); } .form-status { margin-top: 1rem; font-weight: 600; color: var(--accent-2); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: #0C0A0E; border-top: 1px solid var(--line-dark); color: var(--text-on-dark-muted); padding-block: 4rem 2rem; font-size: 0.95rem; } .footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.8fr; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-dark); } .footer-cols h4 { font-family: var(--font-b); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; } .footer-cols li { margin-bottom: 0.55rem; } .footer-cols a:hover { color: var(--accent-2); } .footer-mid { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-block: 2rem; border-bottom: 1px solid var(--line-dark); } .ask-ai { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .ask-ai .chips { display: flex; gap: 0.5rem; flex-wrap: wrap; } .ask-ai .chips a { padding: 0.4rem 0.9rem; border: 1px solid var(--line-dark); border-radius: 999px; font-weight: 600; color: var(--text-on-dark); } .ask-ai .chips a:hover { border-color: var(--accent); color: var(--accent-2); } .footer-social { display: flex; gap: 0.9rem; } .footer-social a:hover { color: var(--accent-2); } .footer-offices { padding-block: 2rem; } .footer-offices h4 { font-family: var(--font-h); color: #fff; font-size: 1rem; margin-bottom: 0.4rem; letter-spacing: -0.02em; } .footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; } .footer-bottom .legal { display: flex; gap: 1.5rem; } /* ============================================================ RESPONSIVE ============================================================ */ /* ---- NARROW DESKTOP: the centre-pinned pill would collide with the phone / CTA before the hamburger takes over, so let the nav flow and drop the phone ---- */ @media (max-width: 1120px) { /* pill flows in-line (auto margins keep it centred and it can no longer sit on top of the phone / CTA); the phone drops to make room */ .nav > .nav-pill { position: static; transform: none; margin-inline: auto; } .nav-phone { display: none; } .nav-pill a { padding: 0.5rem 0.9rem; font-size: 0.92rem; } } /* ---- TABLET (Elementor's <=1024 breakpoint on premiermarketingus.com) ---- */ @media (max-width: 1024px) { :root { --header-h: 96px; } body { font-size: 1rem; } /* 17px -> 16px, as Premier */ .wordmark img { height: 4.6rem; } /* Premier's tablet type scale (flat across the whole 768-1024 band) */ h1 { font-size: 2.625rem; line-height: 1.02; letter-spacing: -0.052em; } /* 42 */ h2 { font-size: 1.6875rem; line-height: 1.07; letter-spacing: -0.03em; } /* 27 */ h3 { font-size: 1.125rem; letter-spacing: -0.033em; } /* 18 */ .hero-sub { font-size: 1rem; } .intro p { font-size: 1.375rem; } .diff-grid { grid-template-columns: repeat(2, 1fr); } .footer-cols { grid-template-columns: repeat(3, 1fr); } /* service rows go single-column -- the 3-col row can't breathe below ~1024 */ .svc-row { grid-template-columns: 1fr; } .svc-media { min-height: 190px; } .svc-arrow { display: none; } .svc-feats { border-left: 0; border-top: 1px solid var(--line-light); } .svc-body, .svc-feats { padding: 2rem; } .faq-panel { grid-template-columns: 1fr; gap: 2.5rem; padding: clamp(1.75rem, 5vw, 3rem); } .build-methods { grid-template-columns: 1fr; } .build-feats { gap: 1.25rem 2rem; } .diff-card { min-height: 258px; padding: 4.5rem 1.5rem 1.5rem; } .section-head { margin-bottom: 2.75rem; } .partners h2 { margin-bottom: 2rem; } .partners .marquee-track { gap: 3.25rem; } .partners .logo { font-size: 1.35rem; } .partners .logo--word { font-size: 1.4rem; } .partners .logo svg { width: 2.1rem; height: 2.1rem; } } /* ---- MOBILE (Elementor's <=767 breakpoint; kept at 768 to match the nav) ---- */ @media (max-width: 768px) { :root { --header-h: 82px; } /* swap the wordmark for the square node mark */ .wordmark .wordmark-full { display: none; } .wordmark .wordmark-icon { display: block; height: 2.6rem; width: 2.6rem; } /* Premier's mobile type scale */ h1 { font-size: 2.125rem; line-height: 1.03; letter-spacing: -0.053em; } /* 34 */ h2 { font-size: 1.375rem; line-height: 1.09; letter-spacing: -0.027em; } /* 22 */ h3 { font-size: 0.9375rem; letter-spacing: -0.033em; } /* 15 */ .intro p { font-size: 1.25rem; } /* 20 */ .nav-pill, .nav-right .btn--accent, .nav-phone { display: none; } .nav-toggle { display: flex; } .nav > .nav-pill { position: static; transform: none; } /* undo desktop centering */ /* full-width dark panel below the bar: left-aligned rows with hairline dividers -- mirrors premiermarketingus.com's mobile menu */ .nav-pill.open { display: flex; position: fixed; inset: var(--header-h) 0 0; transform: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 0.5rem 1.5rem 2rem; border: 0; border-radius: 0; background: var(--ink); overflow-y: auto; z-index: 999; } .nav-pill.open a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.15rem 0; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: none; font-family: var(--font-b); font-size: 1.125rem; font-weight: 500; color: var(--text-on-dark); } .nav-pill.open a:last-child { border-bottom: 0; } .nav-pill.open a.is-active { background: none; color: var(--accent-2); } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .diff-grid { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr 1fr; } /* keep all three review pills on one row -- drop the platform label to fit */ .review-bar { gap: 0.4rem; } .review-bar .cell { padding: 0.32rem 0.6rem; gap: 0.35rem; } .review-tile { width: 20px; height: 20px; } .review-name { display: none; } .review-score strong { font-size: 0.82rem; } .hero-actions { gap: 1rem; } .btn { width: 100%; justify-content: center; } .section-head { margin-bottom: 2rem; } .hero-carousel { padding-bottom: 2rem; } .trust-pill { margin-top: 1.5rem; padding: 0.4rem 0.85rem; font-size: 0.75rem; /* 12px -- matches Premier's mobile badge */ max-width: 100%; } .svc-media { min-height: 150px; } .svc-body, .svc-feats { padding: 1.6rem; } .svc-tag { margin-bottom: 0.9rem; } /* extra top padding = breathing room beneath the absolutely-placed icon before the heading, applied uniformly to all three cards */ .diff-card { min-height: 0; padding: 4.85rem 1.35rem 1.5rem; } .diff-icon { top: 1.2rem; left: 1.2rem; } .diff-num { top: 1.15rem; right: 1.3rem; } .faq-panel { padding: 1.5rem 1.2rem; border-radius: var(--radius-md); } .faq-q { padding: 1.1rem 1.15rem; font-size: 1rem; } .faq-a p { padding: 0 1.15rem 1.2rem; } .faq-a .arrowlink { margin: 0 1.15rem 1.2rem; } .build-feats { flex-direction: column; align-items: center; gap: 0.7rem; } .method { padding: 1.4rem; } .build-form { padding: 1.5rem; } .marquee-track span { font-size: 1rem; } .partners .marquee-track { gap: 2.5rem; } .partners .logo { font-size: 1.15rem; gap: 0.6rem; } .partners .logo--word { font-size: 1.2rem; } .partners .logo svg { width: 1.8rem; height: 1.8rem; } .footer-mid { flex-direction: column; align-items: flex-start; gap: 1rem; } .footer-bottom { flex-direction: column; } } @media (max-width: 480px) { .footer-cols { grid-template-columns: 1fr; } .hero-actions { width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee-track { animation: none; } *, *::before, *::after { transition-duration: 0.01ms !important; } } /* ============================================================ LEGAL PAGES (privacy.html, terms.html) Standalone dark pages; reuse the site tokens + .container. ============================================================ */ .legal-page { background: var(--ink); color: var(--text-on-dark); min-height: 100vh; } .legal-header { border-bottom: 1px solid var(--line-dark); } .legal-header .container { display: flex; align-items: center; justify-content: space-between; height: 84px; } .legal-header .wordmark img { height: 3rem; width: auto; display: block; } .legal-header .back { font-weight: 600; font-size: 0.95rem; color: var(--text-on-dark-muted); } .legal-header .back:hover { color: #fff; } .legal-body { max-width: 760px; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) 0 5rem; } .legal-body h1 { font-size: clamp(2rem, 5vw, 2.9rem); letter-spacing: -0.03em; margin-bottom: 0.5rem; } .legal-body .eff { color: var(--text-on-dark-muted); font-size: 0.95rem; margin-bottom: 2.5rem; } .legal-body h2 { font-size: 1.3rem; letter-spacing: -0.02em; margin-top: 2.6rem; margin-bottom: 0.8rem; padding-top: 1.7rem; border-top: 1px solid var(--line-dark); } .legal-body h3 { font-size: 1.05rem; color: #fff; margin-top: 1.6rem; margin-bottom: 0.5rem; } .legal-body p, .legal-body li { color: var(--text-on-dark-muted); line-height: 1.75; } .legal-body p { margin-bottom: 1rem; } .legal-body ul { margin: 0 0 1rem; padding-left: 1.25rem; list-style: disc; } .legal-body li { margin-bottom: 0.4rem; } .legal-body strong { color: var(--text-on-dark); } .legal-body a { color: var(--accent-2); text-decoration: underline; } .legal-foot { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line-dark); font-size: 0.9rem; color: var(--text-on-dark-muted); } /* ============================================================ SPLASH SCREEN 1.5s intro overlay: logo + typed "Web Design | Google Ads | Meta Ads | SEO" main.js adds .is-hiding then removes #splash from the DOM. ============================================================ */ #splash { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--ink); opacity: 1; overflow: hidden; /* fixed layer -- body's overflow-x:clip can't contain it, so clip here */ transition: opacity 0.3s ease; } #splash.is-hiding { opacity: 0; } .splash-inner { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 1.25rem; text-align: center; } .splash-logo { width: clamp(260px, 62vw, 384px); height: auto; opacity: 0; transform: translateY(6px) scale(0.94); animation: splash-logo-in 0.35s ease forwards; } .splash-type { font-family: var(--font-h); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(0.95rem, 4vw, 1.9rem); color: var(--text-on-dark); white-space: nowrap; min-height: 1.4em; display: flex; align-items: center; justify-content: center; } .splash-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; background: var(--accent-2); animation: splash-caret-blink 0.6s steps(1) infinite; } .splash-caret.is-done { animation: none; opacity: 0; } @keyframes splash-logo-in { to { opacity: 1; transform: translateY(0); } } @keyframes splash-caret-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .splash-logo { animation: none; opacity: 1; transform: none; } .splash-caret { animation: none; } } /* ============================================================ ENTRANCE ANIMATION -- fade-in-up on important elements main.js tags targets with .reveal and flips .is-visible via IntersectionObserver. Skipped entirely for reduced-motion. ============================================================ */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } } /* ============================================================ MOBILE FLOATING TAP-TO-CALL Sits above the Go High Level chat bubble; jiggles every 5s. ============================================================ */ .fab-phone { display: none; } @media (max-width: 768px) { .fab-phone { position: fixed; right: 18px; bottom: 92px; /* clears the GHL chat bubble below it */ z-index: 998; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.45); animation: fab-jiggle 5s ease-in-out infinite; } .fab-phone svg { width: 24px; height: 24px; } .fab-phone:active { transform: scale(0.94); } } @keyframes fab-jiggle { 0%, 86%, 100% { transform: rotate(0); } 88% { transform: rotate(-13deg); } 90% { transform: rotate(11deg); } 92% { transform: rotate(-8deg); } 94% { transform: rotate(6deg); } 96% { transform: rotate(-3deg); } 98% { transform: rotate(1deg); } } @media (prefers-reduced-motion: reduce) { .fab-phone { animation: none; } }