/* LUTable marketing site — Notion-style light theme + scrollable layout. * * Loaded after base.css. Overrides: * - default theme → light (color-scheme: light, light token palette) * - body overflow:hidden → auto (scrollable marketing page) * - new layout primitives: mega menu, hero, feature sections, footer * * Co-exists with the dashboard tokens — dashboard pages keep using the dark * default by NOT loading this file. Marketing pages add this stylesheet. */ /* ═══════════════════════════════════════════════════════════════ LIGHT MODE AS DEFAULT FOR MARKETING PAGES ═══════════════════════════════════════════════════════════════ */ html.marketing { color-scheme: light; /* Light surface palette */ --lt-bg: #fbfaf7; /* warm cream-white */ --lt-bg-soft: #f4f1ea; /* slightly darker cream */ --lt-bg-warm: #eceadfi; --lt-bg-warm: #ece9df; --lt-panel: rgba(255, 255, 255, 0.78); --lt-panel-warm: rgba(244, 241, 234, 0.86); --lt-panel-strong: rgba(255, 255, 255, 0.96); --lt-line: rgba(60, 50, 40, 0.09); --lt-line-strong: rgba(60, 50, 40, 0.16); --lt-line-warm: rgba(120, 90, 50, 0.14); --lt-grid: rgba(60, 50, 40, 0.04); --lt-text: #1f1c17; /* warm near-black */ --lt-text-soft: #54514a; --lt-muted: #8a857b; --lt-faint: #b8b3a6; --lt-cream: #1f1c17; /* on light, "cream" highlight = primary text */ --lt-cream-soft: #54514a; /* Light-mode brand — single mint hue, Notion-style flat tone. * Previously a 3-color mint→sage→wheat gradient which read tacky * ("촌스러워"); now everything stays in one hue family so the brand * reads as a clean, calm accent rather than a rainbow. */ --lt-mint: hsl(168 45% 38%); --lt-mint-deep: hsl(170 44% 28%); --lt-sage: hsl(100 28% 42%); --lt-wheat: hsl(42 55% 52%); --lt-brand: hsl(168 45% 38%); --lt-accent: var(--lt-mint); --lt-amber: hsl(38 60% 52%); --lt-rose: hsl(342 42% 56%); --lt-violet: hsl(258 34% 62%); /* Tight single-hue gradient (deep→mid mint) — only used for the logo * glyph and the hero headline accent, where a whisper of depth helps. * Buttons and bands use solid --lt-mint-deep instead. */ --lt-brand-gradient: linear-gradient(165deg, hsl(170 44% 30%) 0%, hsl(168 46% 40%) 100%); --lt-danger: hsl(8 38% 50%); /* Light hover/overlay tokens (some referenced from dashboard tokens) */ --lt-hover-bg: rgba(60, 50, 40, 0.05); --lt-active-bg: rgba(60, 50, 40, 0.09); --lt-overlay-1: rgba(255, 255, 255, 0.6); --lt-overlay-2: rgba(244, 241, 234, 0.7); --lt-overlay-3: rgba(255, 255, 255, 0.9); --lt-overlay-4: rgba(60, 50, 40, 0.04); --lt-overlay-5: rgba(60, 50, 40, 0.07); --lt-overlay-6: rgba(60, 50, 40, 0.12); --lt-cream-overlay-1: rgba(120, 90, 50, 0.05); --lt-cream-overlay-2: rgba(120, 90, 50, 0.08); --lt-cream-overlay-3: rgba(120, 90, 50, 0.12); --lt-grain-opacity: 0.08; --lt-popover-bg: #ffffff; font-family: var(--lt-font-sans); background: var(--lt-bg); color: var(--lt-text); } /* Marketing pages need a scrollable document. base.css pins `html, body` * to height:100% + overflow:hidden for the dashboard's single-viewport * app shell — that rule blocks scroll on long marketing pages. The * `.marketing` class is only on the marketing , so dashboard and * canvas pages (no class) keep the locked viewport. */ html.marketing, html.marketing body { height: auto; min-height: 100vh; overflow: visible; overflow-y: auto; } html.marketing body { background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(120, 90, 50, 0.04), transparent 70%), radial-gradient(ellipse 60% 40% at 90% 110%, hsla(168, 30%, 36%, 0.03), transparent 70%), var(--lt-bg); background-size: auto, auto, auto; background-position: 0 0, 0 0, 0 0; background-attachment: scroll; letter-spacing: -0.011em; } /* Marketing body has scroll — kill the grid pattern + grain that fight it */ html.marketing body::before { display: none; } /* ═══════════════════════════════════════════════════════════════ MEGA HEADER NAV ═══════════════════════════════════════════════════════════════ */ .mkHeader { position: sticky; top: 0; z-index: 50; background: rgba(251, 250, 247, 0.88); backdrop-filter: blur(20px); border-bottom: 1px solid transparent; transition: border-color 200ms ease, background 200ms ease; } .mkHeader.scrolled { border-bottom-color: var(--lt-line); } /* No justify-content here: we want brand+nav grouped on the LEFT and only * the CTAs pushed right (via margin-left:auto on .mkNavCtas). * space-between was splitting the three children into left/center/right, * which made the nav float loose in the middle — looked broken. */ .mkHeaderInner { max-width: 1280px; margin: 0 auto; height: 64px; padding: 0 32px; display: flex; align-items: center; gap: 28px; } .mkBrand { display: inline-flex; align-items: baseline; gap: 1px; font-family: var(--lt-font-display); letter-spacing: -0.055em; font-weight: 900; font-size: 22px; line-height: 1; color: var(--lt-text); } .mkBrand .lut { background: var(--lt-brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mkBrand .able { color: var(--lt-text); font-weight: 800; } .mkNav { display: flex; align-items: center; gap: 4px; margin-left: 40px; } .mkNavItem { position: relative; } .mkNavLink { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: var(--lt-r-md); color: var(--lt-text); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; transition: background 150ms ease; } /* No background/border change on hover or active — the link stays calm. * The chevron rotation is the only hover signal, plus the open dropdown. */ .mkNavLink:hover { background: transparent; } .mkNavLink.active { background: transparent; } .mkNavLink:hover .chev { opacity: 0.85; } .mkNavLink .chev { width: 12px; height: 12px; opacity: 0.5; transition: transform 200ms ease, opacity 150ms ease; } .mkNavItem[data-open="true"] .mkNavLink .chev { transform: rotate(180deg); opacity: 0.85; } .mkNavCtas { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* Mega dropdown panel. * The invisible ::before bridge extends hover from the nav link down to the * panel — without it, the gap between link and panel is a dead zone that * closes the menu mid-travel. pointer-events:auto on the bridge keeps the * hover state alive while pointer crosses it. */ .mkMega { position: absolute; top: 100%; left: 0; /* 12px invisible bridge above the panel, plus the visible panel below */ padding-top: 12px; min-width: 560px; max-width: 720px; pointer-events: none; } .mkMega::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px; /* hover bridge */ } /* The visible panel — applies the card styling. We can't use a wrapper, so * the panel styling lives directly on .mkMega via background/border/etc * inset by a background-origin trick: use a ::after for the card. */ .mkMega { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; } .mkNavItem[data-open="true"] .mkMega { pointer-events: auto; } /* The visible card is drawn with ::after so the bridge stays invisible. */ .mkMega::after { content: ""; position: absolute; top: 12px; /* below the bridge */ left: 0; right: 0; bottom: 0; background: var(--lt-panel-strong); border: 1px solid var(--lt-line); border-radius: var(--lt-r-xl); box-shadow: 0 24px 60px rgba(60, 50, 40, 0.12), 0 4px 12px rgba(60, 50, 40, 0.05); backdrop-filter: blur(20px); opacity: 0; transform: translateY(-4px); transition: opacity 180ms ease, transform 180ms ease; z-index: -1; } .mkNavItem[data-open="true"] .mkMega::after { opacity: 1; transform: translateY(0); } /* Real content sits above the ::after card */ .mkMega > * { position: relative; z-index: 1; padding: 24px; opacity: 0; transform: translateY(-4px); transition: opacity 180ms ease, transform 180ms ease; } .mkNavItem[data-open="true"] .mkMega > * { opacity: 1; transform: translateY(0); } .mkMegaGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .mkMegaItem { display: flex; gap: 12px; padding: 12px; border-radius: var(--lt-r-md); cursor: pointer; transition: background 150ms ease; } .mkMegaItem:hover { background: var(--lt-hover-bg); } .mkMegaIcon { flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--lt-r-md); background: var(--lt-overlay-4); font-size: 18px; } .mkMegaIcon.mint { background: hsla(168, 45%, 42%, 0.14); color: var(--lt-mint); } .mkMegaIcon.sage { background: hsla(98, 18%, 45%, 0.12); color: var(--lt-sage); } .mkMegaIcon.wheat { background: hsla(45, 38%, 50%, 0.14); color: var(--lt-wheat); } .mkMegaIcon.amber { background: hsla(38, 42%, 50%, 0.14); color: var(--lt-amber); } .mkMegaIcon.rose { background: hsla(340, 32%, 55%, 0.12); color: var(--lt-rose); } .mkMegaIcon.violet { background: hsla(258, 28%, 60%, 0.12); color: var(--lt-violet); } .mkMegaText { flex: 1; min-width: 0; } .mkMegaTitle { font-size: 14px; font-weight: 600; color: var(--lt-text); margin-bottom: 2px; letter-spacing: -0.01em; } .mkMegaDesc { font-size: 12.5px; color: var(--lt-text-soft); line-height: 1.45; } .mkMegaFoot { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--lt-line); display: flex; gap: 16px; flex-wrap: wrap; } .mkMegaFoot a { font-size: 13px; color: var(--lt-mint-deep); font-weight: 600; } .mkMegaFoot a:hover { text-decoration: underline; text-underline-offset: 2px; } /* Mobile menu toggle */ .mkMobileToggle { display: none; width: 40px; height: 40px; border-radius: var(--lt-r-md); background: transparent; border: none; cursor: pointer; color: var(--lt-text); align-items: center; justify-content: center; } /* ═══════════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════════ */ .mkHero { max-width: 1280px; margin: 0 auto; padding: 80px 32px 64px; text-align: center; position: relative; } .mkEyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--lt-overlay-4); border: 1px solid var(--lt-line); color: var(--lt-text-soft); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 24px; } .mkEyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lt-mint); } .mkEyebrow .new { padding: 1px 6px; border-radius: 4px; background: var(--lt-mint); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; } .mkHero h1 { font-family: var(--lt-font-display); font-size: clamp(48px, 6.8vw, 84px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; color: var(--lt-text); margin: 0 auto 24px; max-width: 960px; } .mkHero h1 .grad { background: var(--lt-brand-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mkHero .mkLead { max-width: 640px; margin: 0 auto 36px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--lt-text-soft); letter-spacing: -0.005em; } .mkCtaRow { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .mkCtaRow .btn-pill { height: 48px; padding: 0 24px; font-size: 15px; font-weight: 600; border-radius: var(--lt-r-lg); } /* Primary CTA — solid deep mint (flat, Notion-style). The old rainbow * gradient read tacky; a single-tone button is calmer and more premium. */ .mkCtaRow .btn-pill.primary, .mkHero .mkCtaRow .btn-pill.primary { background: var(--lt-mint-deep); color: #fff; border-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 1px 2px rgba(60, 50, 40, 0.10); } .mkCtaRow .btn-pill.primary:hover { background: hsl(170 46% 24%); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 4px 12px hsla(170, 44%, 28%, 0.20); } /* Outline CTA — subtle border, lifts on hover instead of flooding. */ .mkCtaRow .btn-pill.outline { border-color: var(--lt-line-strong); background: rgba(255, 255, 255, 0.5); color: var(--lt-text); backdrop-filter: blur(8px); } .mkCtaRow .btn-pill.outline:hover { background: #fff; border-color: var(--lt-mint); color: var(--lt-mint-deep); box-shadow: 0 4px 12px rgba(60, 50, 40, 0.06); } /* Header small primary ("무료로 시작") — solid mint, compact. */ html.marketing .btn-pill.primary { background: var(--lt-mint-deep); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(60, 50, 40, 0.10); } html.marketing .btn-pill.primary:hover { background: hsl(170 46% 24%); color: #fff; } /* Hero visual placeholder (screenshot / video frame mock) */ .mkHeroVisual { max-width: 1180px; margin: 56px auto 0; padding: 12px; border-radius: 18px; background: var(--lt-panel-strong); border: 1px solid var(--lt-line); box-shadow: 0 40px 80px rgba(60, 50, 40, 0.12), 0 8px 20px rgba(60, 50, 40, 0.06); position: relative; overflow: hidden; } .mkHeroVisual .mkHeroMock { aspect-ratio: 16 / 9; background: linear-gradient(135deg, hsla(168, 45%, 42%, 0.10), hsla(45, 38%, 50%, 0.08)), var(--lt-bg-soft); border-radius: 12px; display: grid; place-items: center; position: relative; overflow: hidden; } .mkHeroMock .mkMockGrid { position: absolute; inset: 0; background-image: linear-gradient(rgba(60, 50, 40, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 50, 40, 0.04) 1px, transparent 1px); background-size: 44px 44px; } .mkHeroMock .mkMockCaption { position: relative; z-index: 2; text-align: center; } .mkHeroMock .mkMockCaption .mkMockLabel { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--lt-muted); text-transform: uppercase; margin-bottom: 8px; } .mkHeroMock .mkMockCaption .mkMockTitle { font-family: var(--lt-font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -0.03em; color: var(--lt-text); } /* ═══════════════════════════════════════════════════════════════ LOGO BAR ═══════════════════════════════════════════════════════════════ */ .mkLogoBar { max-width: 1280px; margin: 0 auto; padding: 40px 32px 64px; text-align: center; } .mkLogoBar .mkLogoLabel { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--lt-muted); text-transform: uppercase; margin-bottom: 24px; } .mkLogoRow { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 56px; opacity: 0.65; } .mkLogoRow .mkLogo { font-family: var(--lt-font-display); font-weight: 700; font-size: 18px; color: var(--lt-text-soft); letter-spacing: -0.02em; } /* ═══════════════════════════════════════════════════════════════ FEATURE SECTION (alternating colors, alternating image side) ═══════════════════════════════════════════════════════════════ */ .mkFeature { max-width: 1280px; margin: 0 auto; padding: 96px 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .mkFeature.flip { direction: rtl; } .mkFeature.flip > * { direction: ltr; } .mkFeatureText { max-width: 540px; } .mkFeatureEyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 20px; } .mkFeatureEyebrow.mint { background: hsla(168, 45%, 42%, 0.12); color: var(--lt-mint-deep); } .mkFeatureEyebrow.sage { background: hsla(98, 18%, 45%, 0.10); color: var(--lt-sage); } .mkFeatureEyebrow.wheat { background: hsla(45, 38%, 50%, 0.12); color: var(--lt-wheat); } .mkFeatureEyebrow.amber { background: hsla(38, 42%, 50%, 0.12); color: var(--lt-amber); } .mkFeatureEyebrow.rose { background: hsla(340, 32%, 55%, 0.10); color: var(--lt-rose); } .mkFeatureEyebrow.violet { background: hsla(258, 28%, 60%, 0.10); color: var(--lt-violet); } .mkFeature h2 { font-family: var(--lt-font-display); font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; color: var(--lt-text); margin-bottom: 20px; } .mkFeature .mkFeatureLead { font-size: 17px; line-height: 1.6; color: var(--lt-text-soft); margin-bottom: 24px; } .mkFeatureList { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 12px; } .mkFeatureList li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--lt-text); } .mkFeatureList li::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--lt-mint); background-image: linear-gradient(45deg, transparent 45%, #fff 45%, #fff 60%, transparent 60%), linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 60%, transparent 60%); background-size: 8px 8px, 8px 8px; background-position: 5px 7px, 5px 7px; background-repeat: no-repeat; } .mkFeatureLink { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--lt-mint-deep); } .mkFeatureLink:hover { text-decoration: underline; text-underline-offset: 2px; } /* Feature visual block */ .mkFeatureVisual { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; background: var(--lt-panel-strong); border: 1px solid var(--lt-line); overflow: hidden; box-shadow: 0 24px 60px rgba(60, 50, 40, 0.10); display: grid; place-items: center; } .mkFeatureVisual .mkMockGrid { position: absolute; inset: 0; background-image: linear-gradient(rgba(60, 50, 40, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 50, 40, 0.04) 1px, transparent 1px); background-size: 24px 24px; } .mkFeatureVisual .mkVizContent { position: relative; z-index: 2; text-align: center; padding: 32px; } .mkFeatureVisual .mkVizIcon { font-size: 48px; margin-bottom: 12px; } .mkFeatureVisual .mkVizLabel { font-size: 13px; font-weight: 600; color: var(--lt-text-soft); letter-spacing: -0.01em; } /* ═══════════════════════════════════════════════════════════════ STAT BAND ═══════════════════════════════════════════════════════════════ */ /* Stat band — single deep mint wash, no rainbow. The old mint→sage→wheat * 3-stop band was the loudest tacky element on the page. */ .mkStatBand { background: hsl(170 42% 24%); color: #fff; padding: 96px 32px; } .mkStatBandInner { max-width: 1280px; margin: 0 auto; text-align: center; } .mkStatBand h2 { font-family: var(--lt-font-display); font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; margin-bottom: 16px; } .mkStatBand p { font-size: 18px; opacity: 0.9; max-width: 640px; margin: 0 auto 56px; } .mkStatGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; max-width: 1080px; margin: 0 auto; } .mkStat { text-align: center; } .mkStat .num { font-family: var(--lt-font-display); font-size: clamp(36px, 4vw, 56px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; } .mkStat .label { font-size: 14px; opacity: 0.85; letter-spacing: -0.005em; } /* ═══════════════════════════════════════════════════════════════ TESTIMONIAL / CASE GRID ═══════════════════════════════════════════════════════════════ */ .mkCases { max-width: 1280px; margin: 0 auto; padding: 96px 32px; } .mkSectionHead { text-align: center; max-width: 720px; margin: 0 auto 56px; } .mkSectionHead .mkEyebrow { margin-bottom: 16px; } .mkSectionHead h2 { font-family: var(--lt-font-display); font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; color: var(--lt-text); margin-bottom: 16px; } .mkSectionHead p { font-size: 17px; line-height: 1.55; color: var(--lt-text-soft); } .mkCaseGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .mkCase { padding: 32px; border-radius: 16px; background: var(--lt-panel-strong); border: 1px solid var(--lt-line); display: flex; flex-direction: column; gap: 16px; transition: transform 200ms ease, box-shadow 200ms ease; } .mkCase:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(60, 50, 40, 0.08); } .mkCaseQuote { font-size: 16px; line-height: 1.55; color: var(--lt-text); flex: 1; } .mkCaseAuthor { display: flex; align-items: center; gap: 12px; } .mkCaseAvatar { width: 40px; height: 40px; border-radius: 50%; background: var(--lt-overlay-4); display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--lt-text); } .mkCaseAvatar.mint { background: hsla(168, 45%, 42%, 0.20); color: var(--lt-mint-deep); } .mkCaseAvatar.sage { background: hsla(98, 18%, 45%, 0.18); color: var(--lt-sage); } .mkCaseAvatar.wheat { background: hsla(45, 38%, 50%, 0.20); color: var(--lt-wheat); } .mkCaseAvatar.amber { background: hsla(38, 42%, 50%, 0.18); color: var(--lt-amber); } .mkCaseMeta { flex: 1; min-width: 0; } .mkCaseMeta .name { font-size: 14px; font-weight: 600; color: var(--lt-text); } .mkCaseMeta .role { font-size: 12.5px; color: var(--lt-text-soft); } /* ═══════════════════════════════════════════════════════════════ CTA SECTION (bottom) ═══════════════════════════════════════════════════════════════ */ .mkCtaBand { max-width: 1280px; margin: 0 auto; padding: 96px 32px; text-align: center; } .mkCtaBand h2 { font-family: var(--lt-font-display); font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; color: var(--lt-text); margin-bottom: 24px; } .mkCtaBand p { font-size: 18px; line-height: 1.55; color: var(--lt-text-soft); max-width: 560px; margin: 0 auto 40px; } /* ═══════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════ */ .mkFooter { background: var(--lt-bg-soft); border-top: 1px solid var(--lt-line); padding: 64px 32px 32px; } .mkFooterInner { max-width: 1280px; margin: 0 auto; } .mkFooterTop { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; margin-bottom: 48px; } .mkFooterBrand .mkBrand { margin-bottom: 16px; } .mkFooterBrand p { font-size: 14px; line-height: 1.55; color: var(--lt-text-soft); max-width: 280px; margin-bottom: 20px; } .mkFooterSocial { display: flex; gap: 10px; } .mkFooterSocial a { width: 32px; height: 32px; border-radius: var(--lt-r-md); background: var(--lt-overlay-4); display: grid; place-items: center; color: var(--lt-text-soft); font-size: 14px; transition: background 150ms ease, color 150ms ease; } .mkFooterSocial a:hover { background: var(--lt-overlay-6); color: var(--lt-text); } .mkFooterCol h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--lt-text); text-transform: uppercase; margin-bottom: 16px; } .mkFooterCol ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .mkFooterCol a { font-size: 14px; color: var(--lt-text-soft); transition: color 150ms ease; } .mkFooterCol a:hover { color: var(--lt-text); } .mkFooterBottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 32px; border-top: 1px solid var(--lt-line); font-size: 13px; color: var(--lt-muted); } .mkFooterBottom .mkFooterLegal { display: flex; gap: 24px; } .mkFooterBottom a { color: var(--lt-muted); transition: color 150ms ease; } .mkFooterBottom a:hover { color: var(--lt-text); } /* ═══════════════════════════════════════════════════════════════ SUB-PAGE LAYOUT (Product, Solutions, Pricing, etc.) ═══════════════════════════════════════════════════════════════ */ .mkSubHero { max-width: 1080px; margin: 0 auto; padding: 96px 32px 56px; text-align: center; } .mkSubHero h1 { font-family: var(--lt-font-display); font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; color: var(--lt-text); margin-bottom: 20px; } .mkSubHero p { max-width: 640px; margin: 0 auto; font-size: 18px; line-height: 1.55; color: var(--lt-text-soft); } .mkSubBody { max-width: 1080px; margin: 0 auto; padding: 0 32px 96px; } /* Pricing */ .mkPriceGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; } .mkPriceCard { padding: 32px; border-radius: 16px; background: var(--lt-panel-strong); border: 1px solid var(--lt-line); display: flex; flex-direction: column; } .mkPriceCard.featured { border-color: var(--lt-mint); box-shadow: 0 16px 40px hsla(168, 45%, 38%, 0.14), 0 0 0 4px hsla(168, 45%, 38%, 0.06); position: relative; } .mkPriceCard.featured::before { content: "Most popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: var(--lt-mint-deep); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .mkPriceTier { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--lt-mint-deep); text-transform: uppercase; margin-bottom: 8px; } .mkPriceAmt { font-family: var(--lt-font-display); font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: var(--lt-text); margin-bottom: 4px; } .mkPriceAmt .per { font-size: 14px; font-weight: 500; color: var(--lt-text-soft); letter-spacing: 0; } .mkPriceDesc { font-size: 14px; color: var(--lt-text-soft); line-height: 1.5; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--lt-line); } .mkPriceFeatures { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 10px; flex: 1; } .mkPriceFeatures li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--lt-text); } .mkPriceFeatures li::before { content: "✓"; color: var(--lt-mint); font-weight: 700; } .mkPriceCta { width: 100%; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--lt-r-lg); font-weight: 600; font-size: 14px; cursor: pointer; transition: all 150ms ease; text-decoration: none; } .mkPriceCta.primary { background: var(--lt-mint-deep); color: #fff; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(60, 50, 40, 0.10); } .mkPriceCta.primary:hover { background: hsl(170 46% 24%); color: #fff; } .mkPriceCta.outline { background: transparent; border: 1px solid var(--lt-line-strong); color: var(--lt-text); } .mkPriceCta.outline:hover { background: var(--lt-hover-bg); } /* FAQ accordion */ .mkFaq { max-width: 760px; margin: 64px auto 0; } .mkFaqItem { border-bottom: 1px solid var(--lt-line); } .mkFaqItem summary { padding: 20px 0; font-size: 17px; font-weight: 600; color: var(--lt-text); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; } .mkFaqItem summary::-webkit-details-marker { display: none; } .mkFaqItem summary::after { content: "+"; font-size: 24px; font-weight: 300; color: var(--lt-text-soft); transition: transform 200ms ease; } .mkFaqItem[open] summary::after { transform: rotate(45deg); } .mkFaqItem .answer { padding: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--lt-text-soft); } /* Resource/blog card grid */ .mkResourceGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; } .mkResourceCard { border-radius: 16px; background: var(--lt-panel-strong); border: 1px solid var(--lt-line); overflow: hidden; display: flex; flex-direction: column; transition: transform 200ms ease, box-shadow 200ms ease; text-decoration: none; color: inherit; } .mkResourceCard:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(60, 50, 40, 0.08); } .mkResourceThumb { aspect-ratio: 16 / 9; background: var(--lt-overlay-4); display: grid; place-items: center; position: relative; } .mkResourceThumb.mint { background: linear-gradient(135deg, hsla(168, 45%, 42%, 0.20), hsla(170, 42%, 34%, 0.12)); } .mkResourceThumb.sage { background: linear-gradient(135deg, hsla(98, 18%, 45%, 0.18), hsla(98, 22%, 38%, 0.10)); } .mkResourceThumb.wheat { background: linear-gradient(135deg, hsla(45, 38%, 50%, 0.20), hsla(45, 42%, 42%, 0.10)); } .mkResourceThumb.amber { background: linear-gradient(135deg, hsla(38, 42%, 50%, 0.18), hsla(38, 46%, 42%, 0.10)); } .mkResourceThumb .mkResourceTag { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: var(--lt-text); text-transform: uppercase; } .mkResourceBody { padding: 24px; flex: 1; display: flex; flex-direction: column; } .mkResourceMeta { font-size: 12px; color: var(--lt-muted); letter-spacing: 0.04em; margin-bottom: 8px; text-transform: uppercase; } .mkResourceBody h3 { font-size: 18px; font-weight: 700; color: var(--lt-text); letter-spacing: -0.015em; margin-bottom: 8px; line-height: 1.35; } .mkResourceBody p { font-size: 14px; color: var(--lt-text-soft); line-height: 1.5; flex: 1; } .mkResourceBody .mkResourceLink { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--lt-mint-deep); } /* Prose for content pages */ .mkProse { max-width: 760px; margin: 48px auto 0; } .mkProse h2 { font-family: var(--lt-font-display); font-size: 32px; font-weight: 800; letter-spacing: -0.025em; color: var(--lt-text); margin: 48px 0 16px; line-height: 1.2; } .mkProse h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--lt-text); margin: 32px 0 12px; } .mkProse p { font-size: 17px; line-height: 1.7; color: var(--lt-text-soft); margin-bottom: 20px; } .mkProse ul, .mkProse ol { padding-left: 24px; margin-bottom: 20px; } .mkProse li { font-size: 17px; line-height: 1.7; color: var(--lt-text-soft); margin-bottom: 8px; } .mkProse code { font-family: var(--lt-font-mono); font-size: 0.92em; padding: 2px 6px; border-radius: 4px; background: var(--lt-overlay-4); color: var(--lt-text); } .mkProse strong { color: var(--lt-text); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .mkFeature { grid-template-columns: 1fr; gap: 40px; padding: 64px 24px; } .mkFeature.flip { direction: ltr; } .mkStatGrid { grid-template-columns: repeat(2, 1fr); } .mkCaseGrid { grid-template-columns: 1fr; } .mkPriceGrid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } .mkResourceGrid { grid-template-columns: repeat(2, 1fr); } .mkFooterTop { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .mkHeaderInner { padding: 0 20px; } .mkNav { display: none; } .mkMobileToggle { display: inline-flex; } .mkNavCtas .btn-pill.h-md:not(.primary):not(.outline) { display: none; } .mkHero { padding: 56px 20px 48px; } .mkLogoBar { padding: 32px 20px 48px; } .mkStatBand { padding: 64px 20px; } .mkCases, .mkCtaBand { padding: 64px 20px; } .mkSubHero { padding: 64px 20px 40px; } .mkSubBody { padding: 0 20px 64px; } .mkFooter { padding: 48px 20px 24px; } .mkFooterTop { grid-template-columns: 1fr; gap: 32px; } .mkResourceGrid { grid-template-columns: 1fr; } .mkFooterBottom { flex-direction: column; align-items: flex-start; } .mkCtaRow { flex-direction: column; align-items: stretch; } .mkCtaRow .btn-pill { width: 100%; } } /* Mobile drawer */ .mkMobileMenu { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: var(--lt-panel-strong); backdrop-filter: blur(20px); z-index: 40; padding: 24px; overflow-y: auto; } .mkMobileMenu.open { display: block; } .mkMobileMenu .mkMobileSection { border-bottom: 1px solid var(--lt-line); padding: 16px 0; } .mkMobileMenu .mkMobileSection h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lt-muted); margin-bottom: 12px; } .mkMobileMenu ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .mkMobileMenu a { display: block; padding: 8px 0; font-size: 15px; color: var(--lt-text); font-weight: 500; }