/* Shared landing page system — theme variables set per page on */ .lp-page { --lp-accent: #3B82F6; --lp-accent-2: #93C5FD; --lp-glow: rgba(59,130,246,0.22); --lp-surface: rgba(15,23,42,0.55); max-width: 100%; overflow-x: clip; } .lp-page .container { width: min(100% - clamp(2rem, 6vw, 5rem), 1200px); margin-inline: auto; } .lp-page img, .generated-page img { max-width: 100%; height: auto; } /* Cover media must fill the framed visual — override the generic img rule above */ .lp-page .lp-visual img.lp-media, .lp-page .lp-port-thumb img.lp-media, .generated-page .lp-visual img.lp-media, .generated-page .lp-port-thumb img.lp-media { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .lp-page .btn, .lp-page button, .lp-page input, .lp-page select, .lp-page textarea, .generated-page .btn, .generated-page button, .generated-page input, .generated-page select, .generated-page textarea { min-height: 44px; } .lp-hero { position: relative; padding: calc(var(--nav-h, 72px) + 3.5rem) 0 4rem; overflow: hidden; border-bottom: 1px solid var(--border); isolation: isolate; } .lp-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 55% 45% at 85% 10%, var(--lp-glow), transparent 55%), linear-gradient(180deg, #070B14 0%, #0A0F1E 100%); } .lp-hero[data-pattern="grid"]::after, .lp-hero[data-pattern="hex"]::after, .lp-hero[data-pattern="dots"]::after, .lp-hero[data-pattern="bars"]::after, .lp-hero[data-pattern="waves"]::after, .lp-hero[data-pattern="circuit"]::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35; } .lp-hero[data-pattern="grid"]::after { background-image: linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%); } .lp-hero[data-pattern="dots"]::after { background-image: radial-gradient(rgba(148,163,184,0.18) 1px, transparent 1px); background-size: 22px 22px; } .lp-hero[data-pattern="bars"]::after { background: repeating-linear-gradient(-12deg, transparent, transparent 14px, rgba(255,255,255,0.03) 14px, rgba(255,255,255,0.03) 15px); } .lp-hero[data-pattern="waves"]::after { background: radial-gradient(circle at 20% 80%, var(--lp-glow), transparent 35%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.04), transparent 30%); } .lp-hero[data-pattern="hex"]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%2394A3B8' fill-opacity='0.08'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .lp-hero[data-pattern="circuit"]::after { background-image: linear-gradient(90deg, rgba(148,163,184,0.05) 1px, transparent 1px), linear-gradient(rgba(148,163,184,0.05) 1px, transparent 1px); background-size: 64px 64px; } .lp-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; align-items: center; } .lp-kicker { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-accent-2); margin-bottom: 1rem; } .lp-hero h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 4.8vw, 3.4rem); font-weight: 700; letter-spacing: var(--heading-tracking, -0.02em); line-height: var(--heading-line-height, 1.18); margin: 0 0 1rem; max-width: 16ch; } .lp-hero h1 em { font-style: normal; color: var(--lp-accent-2); } .lp-lead { color: var(--slate); font-size: 1.08rem; line-height: 1.75; max-width: 42ch; margin: 0 0 1.75rem; } .lp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; } .lp-actions .btn-primary { background: linear-gradient(135deg, var(--lp-accent), color-mix(in srgb, var(--lp-accent) 70%, #000)) !important; border: none; } .lp-visual { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 30px 70px rgba(0,0,0,0.45), 0 0 40px var(--lp-glow); aspect-ratio: 16 / 10; background: linear-gradient(145deg, rgba(255,255,255,0.04), transparent 40%), radial-gradient(circle at 30% 20%, var(--lp-glow), transparent 50%), #0b1220; transition: transform 0.35s ease; } .lp-media-skeleton { background-color: #111827; background-image: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.08) 50%, transparent 65%); background-size: 220% 100%; animation: lpMediaSkeleton 1.5s ease-in-out infinite; } .lp-media { display: block; width: 100%; height: 100%; object-fit: cover; } .lp-media-fade { opacity: 0; transition: opacity 0.35s ease; } .lp-media-fade.is-loaded { opacity: 1; } /* Fallback if onload is missed for cached images */ .lp-media-fade:not(.is-loaded) { animation: lpMediaReveal 0.2s ease 0.8s forwards; } @keyframes lpMediaReveal { to { opacity: 1; } } .lp-media-skeleton:has(.lp-media-fade.is-loaded) { animation: none; background-image: none; } .lp-media-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(rgba(7,11,20,0.35), rgba(7,11,20,0.55)); } @keyframes lpMediaSkeleton { to { background-position-x: -220%; } } .lp-visual:hover { transform: translateY(-6px) scale(1.01); } .lp-visual-inner { text-align: center; padding: 1.5rem; } .lp-visual-icon { font-size: 3rem; margin-bottom: 0.75rem; filter: drop-shadow(0 8px 24px var(--lp-glow)); animation: lpFloat 4s ease-in-out infinite; } @keyframes lpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .lp-visual-label { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; } .lp-visual-sub { color: var(--slate); font-size: 0.9rem; margin-top: 0.35rem; } .lp-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .lp-chip { font-size: 0.75rem; font-weight: 600; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid rgba(148,163,184,0.2); color: var(--slate-light); background: rgba(255,255,255,0.03); } .lp-section-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: var(--heading-tracking, -0.02em); line-height: var(--heading-line-height, 1.18); margin-bottom: 0.75rem; } .lp-section-sub { color: var(--slate); max-width: 54ch; line-height: 1.7; margin-bottom: 1.75rem; } .lp-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .lp-benefit { background: var(--lp-surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem; transition: border-color 0.25s, transform 0.25s; } .lp-benefit:hover { border-color: color-mix(in srgb, var(--lp-accent) 55%, transparent); transform: translateY(-4px); } .lp-benefit h3 { font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 0.4rem; } .lp-benefit p { color: var(--slate); font-size: 0.9rem; line-height: 1.6; margin: 0; } .lp-process { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.65rem; } .lp-step { border-top: 2px solid color-mix(in srgb, var(--lp-accent) 70%, transparent); padding-top: 0.85rem; } .lp-step .num { font-family: var(--font-display); font-weight: 800; color: var(--lp-accent-2); font-size: 0.85rem; } .lp-step h3 { font-size: 0.92rem; margin: 0.35rem 0; font-family: var(--font-display); } .lp-step p { color: var(--slate); font-size: 0.8rem; line-height: 1.5; margin: 0; } .lp-tech { display: flex; flex-wrap: wrap; gap: 0.55rem; } .lp-tech span { padding: 0.55rem 0.9rem; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); font-size: 0.85rem; font-weight: 600; } .lp-port-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .lp-port-card { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--card2); display: flex; flex-direction: column; } .lp-port-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .lp-port-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; } .lp-port-body h3 { font-family: var(--font-display); font-size: 1rem; margin: 0; } .lp-port-body p { color: var(--slate); font-size: 0.85rem; margin: 0; flex: 1; } .lp-cta-band { text-align: center; padding: 4.5rem 0; border-block: 1px solid var(--border); background: radial-gradient(ellipse at 50% 0%, var(--lp-glow), transparent 55%), var(--navy2); } .lp-cta-band h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 0.75rem; } .lp-cta-band p { color: var(--slate); max-width: 42ch; margin: 0 auto 1.5rem; } .lp-mini-form { max-width: 520px; margin: 0 auto; text-align: left; background: rgba(10,15,30,0.55); border: 1px solid var(--border); border-radius: 16px; padding: 1.35rem; } .lp-mini-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .lp-mini-form .row > div { position: relative; min-width: 0; } .lp-mini-form label { display: block; font-size: 0.78rem; color: var(--slate-light); margin-bottom: 0.3rem; } .lp-mini-form input, .lp-mini-form textarea, .lp-mini-form select { width: 100%; padding: 0.7rem 0.85rem; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--white); font: inherit; } .lp-mini-form textarea { min-height: 90px; resize: vertical; } .lp-mini-form .full { grid-column: 1 / -1; } .lp-hint { font-size: 0.8rem; color: var(--slate); margin-top: 0.65rem; } .lp-mini-form .onairo-field-status { top: 2rem; } .lp-mini-form .onairo-field-error { grid-column: 1 / -1; } @media (max-width: 1000px) { .lp-hero-grid, .lp-benefit-grid, .lp-port-grid { grid-template-columns: 1fr 1fr; } .lp-process { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 720px) { .lp-hero-grid, .lp-benefit-grid, .lp-port-grid, .lp-process, .lp-mini-form .row { grid-template-columns: 1fr; } .lp-actions .btn { width: 100%; justify-content: center; } .lp-page .container { width: min(100% - 2rem, 1200px); } } @media (prefers-reduced-motion: reduce) { .lp-media-skeleton { animation: none; } .lp-media-fade { transition: none; animation: none !important; opacity: 1; } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Mood accents — industry/service identity beyond accent colour */ .lp-page[data-mood="education"] .lp-benefit { border-radius: 18px 6px; } .lp-page[data-mood="legal"] .lp-hero h1 { letter-spacing: -0.02em; max-width: 18ch; } .lp-page[data-mood="legal"] .lp-step { border-top-width: 1px; } .lp-page[data-mood="clinical"] .lp-visual, .lp-page[data-mood="medical"] .lp-visual, .lp-page[data-mood="dental"] .lp-visual, .lp-page[data-mood="healthcare"] .lp-visual { border-radius: 28px; } .lp-page[data-mood="fitness"] .lp-hero h1, .lp-page[data-mood="gym"] .lp-hero h1 { text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(1.9rem, 4.2vw, 3rem); } .lp-page[data-mood="travel"] .lp-visual { border-radius: 8px 32px; } .lp-page[data-mood="hospitality"] .lp-chip, .lp-page[data-mood="hotel"] .lp-chip { border-radius: 4px; } .lp-page[data-mood="restaurant"] .lp-benefit-grid { gap: 1.25rem; } .lp-page[data-mood="construction"] .lp-benefit { border-radius: 4px; } .lp-page[data-mood="realestate"] .lp-port-card { border-radius: 4px; } .lp-page[data-mood="automotive"] .lp-visual { clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%); border-radius: 0; } .lp-page[data-mood="tech"] .lp-tech span, .lp-page[data-mood="technology"] .lp-tech span { font-family: ui-monospace, monospace; font-size: 0.8rem; } .lp-page[data-mood="beauty"] .lp-visual, .lp-page[data-mood="salon"] .lp-visual { border-radius: 40% 12px; } .lp-page[data-mood="barber"] .lp-hero::before { background: radial-gradient(ellipse 50% 40% at 80% 15%, var(--lp-glow), transparent 55%), repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 41px), linear-gradient(180deg, #070B14 0%, #0A0F1E 100%); } .lp-page[data-mood="finance"] .lp-benefit h3 { font-variant-numeric: tabular-nums; } .lp-page[data-mood="fashion"] .lp-hero h1 { font-weight: 700; max-width: 14ch; } .lp-page[data-mood="hex"] .lp-visual { clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); } .lp-page[data-mood="circuit"] .lp-chip { border-radius: 2px; font-family: ui-monospace, monospace; } .lp-page[data-mood] .lp-cta-band { animation: lpGlowPulse 8s ease-in-out infinite; } @keyframes lpGlowPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.04); } }