/* ===================================================================== Apex Print Co. — ELEVATE Art-direction layer loaded after each page's inline styles. Transforms the design-system base into a bespoke, agency-grade aesthetic: luxury serif display type, asymmetric editorial layouts, a consistent spacing scale, refined cards, sparing glassmorphism, and soft grain. Link this LAST in so it wins the cascade. ===================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600&display=swap"); :root { /* Consistent 8-pt spacing scale */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --ease-lux: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- Luxury display typography ---------- */ .hero h1, .section-head h2, .phead h1, .head h1, .cta-card h2, .final-card h2, .quote-copy h2, .quality h2, .story-copy h2, .mv-card h3, .hv-main h3, .success h2, .form-card h3 { font-family: var(--font-display) !important; font-optical-sizing: auto; font-weight: 600 !important; letter-spacing: -0.018em; line-height: 1.04; text-wrap: balance; } .hero h1 { font-weight: 600 !important; } /* Body refinement */ body { letter-spacing: -0.003em; } p { text-wrap: pretty; } /* ---------- Elegant, generous spacing ---------- */ .container { max-width: 1240px; } .pad { padding-block: clamp(5rem, 10vw, 9.5rem); } .section-head { margin-bottom: var(--s-8); } /* ---------- Asymmetric, editorial section headers ---------- */ /* Left-aligned with a hairline gradient kicker — reads bespoke, not centered-template. */ .section-head { max-width: 48rem; margin-left: auto; margin-right: auto; text-align: center; } .section-head .eyebrow { margin-bottom: var(--s-3); } .section-head h2 { padding-top: var(--s-5); position: relative; } /* centered gradient kicker above the heading */ .section-head h2::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; border-radius: 3px; background: var(--grad-brand); } /* Centered promo banners stay centered (they are not .section-head). */ /* ---------- Hero → balanced, centered composition (home) ---------- */ .hero-inner { max-width: 58rem; margin-left: auto; margin-right: auto; text-align: center; } .hero-actions, .hero-stats, .hero-trust { justify-content: center; } .hero-stats { gap: clamp(2rem, 5vw, 3.5rem); margin-top: var(--s-8); } .hero p.lead { margin-left: auto; margin-right: auto; } .hero .hero-badge { margin-inline: auto; } /* ---------- Modern cards: hairline borders, soft radius, refined depth ---------- */ .svc-card, .why-card, .step, .quote, .mv-card, .val, .member, .cert, .ind-card, .tl-card, .info, .faq-item, .t-card, .trust-card, .comm, .eq, .hours, .card, .form-card, .booking-detail, .emerg { border-radius: 22px; } .svc-card, .step, .quote, .mv-card, .val, .member, .cert, .ind-card, .info, .faq-item, .comm, .hours { border-color: rgba(10, 14, 23, 0.07); box-shadow: 0 1px 0 rgba(13, 19, 32, 0.02), 0 22px 48px -30px rgba(13, 19, 32, 0.22); } /* ---------- High-end hover easing (slower, more refined) ---------- */ .svc-card, .ind-card, .member, .val, .cert, .step, .quote, .mv-card, .tile, .m-item, .proj, .comm, .eq, .info, .type, .opt { transition: transform 0.6s var(--ease-lux), box-shadow 0.6s var(--ease-lux), border-color 0.4s ease, background 0.4s ease !important; } .svc-card:hover, .ind-card:hover, .member:hover, .val:hover, .cert:hover, .mv-card:hover, .comm:hover { transform: translateY(-10px); } /* ---------- Glassmorphism — used sparingly (dark feature cards only) ---------- */ .why-card, .trust-card, .t-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-color: rgba(255, 255, 255, 0.12); } /* ---------- Softer gradients & buttons ---------- */ .btn-primary { box-shadow: 0 14px 34px -16px rgba(37, 99, 255, 0.55); } .eyebrow { backdrop-filter: blur(6px); } /* ---------- Premium iconography (slightly lighter, more elegant strokes) ---------- */ .svc-ic svg, .why-card .ic svg, .ind-ic svg, .val .ic svg, .trust-card .ic svg, .mv-card .ic svg { stroke-width: 1.6; } /* ---------- Subtle film grain for depth (very sparing) ---------- */ body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.025; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* ---------- Refined focus & selection ---------- */ ::selection { background: rgba(37, 99, 255, 0.18); } @media (prefers-reduced-motion: reduce) { .svc-card, .ind-card, .member, .val, .cert, .step, .quote, .mv-card, .tile, .m-item, .proj, .comm, .eq, .info, .type, .opt { transition: none !important; } } /* ---------- Responsive: keep hero readable on small screens ---------- */ /* kicker stays centered at every breakpoint */ /* ===================================================================== BRAND PALETTE — Red / White / Black / Gray (matches the J&I logo) Redefines the design-system color tokens (loaded last, so it wins), then recolors the hard-coded blue/teal glows, gradient text & tiles. ===================================================================== */ :root { --brand: #d61f26; --brand-2: #ef4a50; --accent: #e23b3b; --accent2: #e23b3b; --grad-brand: linear-gradient(135deg, #e22a30 0%, #b3151c 55%, #7d0f15 120%); --grad-brand-soft: linear-gradient(135deg, rgba(214, 31, 38, 0.12), rgba(125, 15, 21, 0.10)); --shadow-brand: 0 18px 40px -14px rgba(214, 31, 38, 0.5); --ring: #d61f26; } /* Dark-section colored glows → red + gray */ .hero-mesh { background: radial-gradient(45% 55% at 78% 12%, rgba(214, 31, 38, 0.55), transparent 60%), radial-gradient(40% 50% at 12% 18%, rgba(125, 15, 21, 0.5), transparent 60%), radial-gradient(50% 60% at 25% 100%, rgba(120, 120, 126, 0.28), transparent 60%), radial-gradient(45% 55% at 100% 80%, rgba(214, 31, 38, 0.3), transparent 60%), linear-gradient(160deg, #0a0b0f, #0d0d10 60%, #0a0b0f) !important; } .why::before, .testi::before, .trust::before, .quality::before, .quote-sec::before { background: radial-gradient(80% 80% at 90% 10%, rgba(214, 31, 38, 0.22), transparent 55%), radial-gradient(60% 60% at 0% 90%, rgba(120, 120, 126, 0.13), transparent 55%) !important; } .hero::before { background: radial-gradient(50% 70% at 82% 0%, rgba(214, 31, 38, 0.4), transparent 55%), radial-gradient(45% 60% at 5% 100%, rgba(120, 120, 126, 0.2), transparent 55%) !important; } .story-visual::before { background: radial-gradient(60% 60% at 70% 20%, rgba(214, 31, 38, 0.42), transparent 60%), radial-gradient(50% 50% at 10% 90%, rgba(120, 120, 126, 0.28), transparent 60%) !important; } /* Eyebrows on dark sections */ .why .eyebrow, .testi .eyebrow, .trust .eyebrow, .quality .eyebrow, .quote-copy .eyebrow, .svc-hero .eyebrow, .hero .eyebrow { color: #ff8a8e !important; background: rgba(214, 31, 38, 0.14) !important; border-color: rgba(214, 31, 38, 0.3) !important; } /* Gradient text / stat numbers → red (use background-image so the shorthand doesn't reset background-clip; clip + text-fill must be !important) */ .hero h1 .gt, .hero-stat .v, .stat .num, .gt { background-image: linear-gradient(120deg, #ff6166, #d61f26) !important; background-color: transparent !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } /* Light-blue helper text on dark → soft red */ .foot-col a[style*="9fbcff"] { color: #ff8a8e !important; } /* Work-showcase / project / team tiles → red, black & gray */ .g1, .pg1, .tg1 { background: linear-gradient(150deg, #7d0f15, #e22a30) !important; } .g2, .pg2, .tg2 { background: linear-gradient(150deg, #3a3d44, #6b7079) !important; } .g3, .pg3, .tg3 { background: linear-gradient(150deg, #17181d, #45484f) !important; } .g4, .pg4, .tg4 { background: linear-gradient(150deg, #b3151c, #ff5a5f) !important; } .g5, .pg5, .tg5 { background: linear-gradient(150deg, #0b0c10, #2a2d34) !important; } .g6, .pg6, .tg6 { background: linear-gradient(150deg, #9e0b12, #d61f26) !important; } .pg7, .tg7 { background: linear-gradient(150deg, #4a4e57, #9aa0a8) !important; } .pg8, .tg8 { background: linear-gradient(150deg, #5a0a0e, #c01a22) !important; } /* ===================================================================== DESKTOP REFINEMENT — make wide screens read as *designed*, not as an enlarged mobile. Mobile (<1024px) is untouched. ===================================================================== */ @media (min-width: 1024px) { /* Use the wide canvas, but keep a comfortable reading measure */ .container { max-width: 1280px; } /* Tame fluid type so it looks intentional, not blown-up */ .hero h1 { font-size: clamp(3.2rem, 4vw, 4.2rem) !important; line-height: 1.05; } .hero p.lead { font-size: 1.18rem; max-width: 600px; } .section-head { max-width: 46rem; margin-bottom: 3.5rem; } .section-head h2 { font-size: clamp(2rem, 3vw, 2.85rem); } .section-head p { font-size: 1.05rem; } /* Balanced vertical rhythm (less cavernous than scaled-up mobile) */ .pad { padding-block: clamp(5rem, 6.5vw, 7.5rem); } .hero { min-height: 90vh; } /* Tighter, more composed grids on desktop */ .why-grid { gap: 22px; } .svc-compact { gap: 20px; } /* Services: cap the big editorial cards so they don't feel oversized */ .svc-card2 { min-height: 440px; } .svc-card2 .svc-bd2 { padding: 52px 56px; } /* Testimonials read better with a slightly tighter quote measure */ .slider { max-width: 820px; } } @media (min-width: 1600px) { .container { max-width: 1340px; } .hero h1 { font-size: 4.4rem !important; } } /* ---------- Brand logo (header + footer) ---------- */ .brand-logo { height: 54px; width: auto; display: block; transition: height 0.4s ease; } header.nav.scrolled .brand-logo { height: 44px; } .brand-logo-foot { height: 60px; } @media (max-width: 600px) { .brand-logo { height: 44px; } .brand-logo-foot { height: 50px; } } /* ---------- Image-backed page headers (sub-pages) ---------- */ /* Gives portfolio / contact / quote / consultation headers a printing-themed background image, like the sample site — text stays legible via the overlay. Drop your own photo at images/header.jpg to swap (see note below). */ .phead, .head { position: relative; max-width: none; margin: 0 auto 2.75rem; padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 3.5rem); border-radius: 28px; overflow: hidden; color: #fff; background-image: linear-gradient(180deg, rgba(7, 10, 18, 0.58), rgba(7, 10, 18, 0.8)), url("https://images.unsplash.com/photo-1562155695-fb6e1f95fcfd?auto=format&fit=crop&w=2000&q=70"), url("services-bg.svg"); background-size: cover, cover, cover; background-position: center, center, center; background-repeat: no-repeat, no-repeat, no-repeat; box-shadow: var(--shadow-lg); } .phead h1, .head h1 { color: #fff; } .phead p, .head p { color: #cdd8ea; } .phead .eyebrow, .head .eyebrow { color: #9fbcff; background: rgba(122, 166, 255, 0.12); border-color: rgba(122, 166, 255, 0.24); }