/* ============================================================ OOH Sim — Landing Page stylesheet Design system: white base, navy accent, bright-blue CTA. Two overall directions toggled via [data-direction] on . ============================================================ */ :root { /* ---- Brand color tokens (overridable via Tweaks) ---- */ --navy: #14274A; /* base navy: headings, dark sections */ --navy-deep: #0E1D38; /* deepest navy for final CTA band */ --navy-soft: #2A3E63; /* secondary navy text */ --cta: #3B82F6; /* bright CTA blue */ --cta-hover: #2563EB; --cta-ring: rgba(59,130,246,.30); /* ---- Neutrals ---- */ --ink: #16203A; /* primary text */ --ink-2: #51607A; /* muted text */ --ink-3: #8A95A8; /* faint text / captions */ --line: #E4E9F1; /* hairline borders */ --line-strong: #D3DBE8; --white: #FFFFFF; /* ---- Surface backgrounds ---- */ --bg: #FFFFFF; --bg-gray: #F5F7FB; /* light gray section */ --bg-blue: #EEF4FF; /* light blue section */ --bg-blue-soft: #F4F8FF; --surface: #FFFFFF; /* card surface */ /* ---- Radii (overridable via Tweaks) ---- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; /* ---- Shadows ---- */ --shadow-sm: 0 1px 2px rgba(20,39,74,.06), 0 1px 3px rgba(20,39,74,.05); --shadow-md: 0 6px 18px rgba(20,39,74,.08), 0 2px 6px rgba(20,39,74,.05); --shadow-lg: 0 24px 60px rgba(20,39,74,.14), 0 8px 20px rgba(20,39,74,.08); --shadow-cta: 0 8px 20px rgba(59,130,246,.28); /* ---- Type ---- */ --font: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --font-head: var(--font); /* ---- Layout ---- */ --maxw: 1200px; --gutter: 24px; --section-y: 104px; /* card surface tuning per direction */ --card-bg: #FFFFFF; --card-border: 1px solid var(--line); --card-shadow: var(--shadow-sm); --card-radius: var(--r-md); } /* ============================================================ DIRECTION B — "ストラクチャード・トラスト" Navy-forward, denser, defined borders, tighter radii. ============================================================ */ :root[data-direction="b"] { --bg-gray: #F1F4F9; --bg-blue: #E9F0FB; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --section-y: 96px; --card-border: 1px solid var(--line-strong); --card-shadow: none; --card-radius: var(--r-md); --shadow-lg: 0 18px 44px rgba(14,29,56,.16), 0 6px 16px rgba(14,29,56,.10); } /* ============================================================ Reset / base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: hidden; } body { overflow-x: hidden; margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 16px; line-height: 1.75; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; line-height: 1.32; letter-spacing: .01em; color: var(--navy); font-weight: 700; } p { margin: 0; } ::selection { background: var(--cta); color: #fff; } /* ============================================================ Layout helpers ============================================================ */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--section-y) 0; } .section--gray { background: var(--bg-gray); } .section--blue { background: var(--bg-blue); } .section--tight { padding: calc(var(--section-y) * .82) 0; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--cta); text-transform: uppercase; white-space: nowrap; margin-bottom: 18px; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--cta); border-radius: 2px; } .section-head { max-width: 760px; } .section-head--center { margin: 0 auto; text-align: center; } .section-title { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.38; letter-spacing: .005em; font-weight: 700; } .section-lead { margin-top: 20px; font-size: 17px; color: var(--ink-2); line-height: 1.9; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; line-height: 1; padding: 15px 26px; border-radius: var(--r-md); border: 1px solid transparent; transition: transform .16s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease; white-space: nowrap; } .btn--cta { background: var(--cta); color: #fff; box-shadow: var(--shadow-cta); } .btn--cta:hover { background: var(--cta-hover); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(59,130,246,.34); } .btn--cta:active { transform: translateY(0); } .btn--ghost { background: #fff; color: var(--navy); border-color: var(--line-strong); } .btn--ghost:hover { border-color: var(--cta); color: var(--cta); transform: translateY(-1px); } .btn--navy { background: var(--navy); color: #fff; } .btn--navy:hover { background: var(--navy-deep); transform: translateY(-2px); } .btn--light { background: #fff; color: var(--navy); } .btn--light:hover { background: #eef4ff; transform: translateY(-2px); } .btn--block { width: 100%; } .btn--lg { padding: 18px 32px; font-size: 16px; } .btn--sm { padding: 11px 18px; font-size: 14px; } .hint { font-size: 13px; color: var(--ink-3); margin-top: 14px; display: flex; align-items: center; gap: 7px; } /* ============================================================ Header ============================================================ */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; } .header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 2px 14px rgba(20,39,74,.06); } .header__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; } .logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: var(--navy); letter-spacing: .01em; } .logo__mark { width: 30px; height: 30px; border-radius: 8px; background: var(--navy); color: #fff; display: grid; place-items: center; position: relative; flex: none; } .logo__mark::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 4px; background: var(--cta); border: 2px solid #fff; } .nav { display: flex; align-items: center; gap: 30px; } .nav__links { display: flex; align-items: center; gap: 28px; } .nav__link { font-size: 14.5px; font-weight: 500; color: var(--navy-soft); transition: color .18s ease; position: relative; } .nav__link:hover { color: var(--cta); } .nav__login { font-size: 14.5px; font-weight: 600; color: var(--navy); } .nav__login:hover { color: var(--cta); } .nav__cta { padding: 11px 20px; font-size: 14px; } .menu-btn { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: #fff; align-items: center; justify-content: center; flex-direction: column; gap: 4px; } .menu-btn span { width: 18px; height: 2px; background: var(--navy); border-radius: 2px; } .mobile-nav { display: none; } /* ============================================================ Hero ============================================================ */ .hero { padding-top: 140px; padding-bottom: 96px; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(1100px 540px at 88% -8%, var(--bg-blue) 0%, rgba(238,244,255,0) 60%), linear-gradient(180deg, var(--bg-blue-soft) 0%, #fff 46%); } .hero__grid { display: grid; grid-template-columns: 1.02fr 1.08fr; gap: 56px; align-items: center; } .hero__copy { max-width: 560px; min-width: 0; } .hero__visual { min-width: 0; overflow: hidden; } .hero h1 { font-size: clamp(30px, 3.9vw, 46px); line-height: 1.42; letter-spacing: .005em; font-weight: 800; } .hero h1 .accent { color: var(--cta); } .hero__sub { margin-top: 26px; font-size: 17px; color: var(--ink-2); line-height: 1.95; } .hero__cta-row { margin-top: 34px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .hero__badges { margin-top: 40px; display: flex; gap: 26px; flex-wrap: wrap; } .hero__badge { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--navy-soft); font-weight: 500; } .hero__badge svg { color: var(--cta); flex: none; } /* ============================================================ App-window mock chrome (shared) ============================================================ */ .win { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .win__bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: #fff; } .win__dots { display: flex; gap: 6px; } .win__dots i { width: 11px; height: 11px; border-radius: 50%; background: #E2E7F0; display: block; } .win__dots i:nth-child(1){ background:#F2C0BE;} .win__dots i:nth-child(2){ background:#F4DDB0;} .win__dots i:nth-child(3){ background:#BFE3C5;} .win__url { flex: 1; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; background: var(--bg-gray); border-radius: 7px; font-size: 12px; color: var(--ink-3); } .win__body { padding: 18px; } /* field + sim row inside hero mock */ .sim__field { display: flex; gap: 10px; flex-wrap: wrap; } .sim__input { flex: 1; display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: #fff; font-size: 13.5px; color: var(--ink); } .sim__input svg { color: var(--ink-3); flex: none; } .sim__input .caret { width: 1.5px; height: 16px; background: var(--cta); animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .sim__go { flex: none; height: 46px; padding: 0 18px; } .ba { margin-top: 16px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; } .ba__arrow { width: 38px; height: 38px; border-radius: 50%; background: var(--cta); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-cta); } .ba__label { font-size: 11.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 7px; display: flex; align-items: center; gap: 6px; white-space: nowrap; } .ba__label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); } .ba__label.is-after .dot { background: #25B07A; } /* ============================================================ Before/After Slider (.bas) ============================================================ */ .bas { margin-top: 16px; position: relative; border-radius: var(--r-md); overflow: hidden; user-select: none; -webkit-user-select: none; } .bas__layer { display: block; } .bas__layer--after { position: absolute; inset: 0; will-change: clip-path; } .bas__layer--after .bb--scene { width: 100%; height: 100%; } .bas__line { position: absolute; top: 0; bottom: 0; width: 2px; background: white; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 8px rgba(0,0,0,.25); z-index: 10; } .bas__handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: white; box-shadow: 0 2px 10px rgba(0,0,0,.22); display: grid; place-items: center; pointer-events: none; } .bas__handle svg { display: block; } .bas__img { display: block; width: 100%; height: auto; pointer-events: none; } .bas__badge { position: absolute; top: 10px; font-size: 11px; font-weight: 700; color: var(--ink-2); background: rgba(255,255,255,.88); backdrop-filter: blur(4px); padding: 3px 8px; border-radius: var(--r-pill); display: flex; align-items: center; gap: 5px; transition: opacity .2s; pointer-events: none; z-index: 9; white-space: nowrap; } .bas__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex-shrink: 0; } .bas__badge--before { left: 10px; } .bas__badge--after { right: 10px; } .bas__badge--after .dot { background: #25B07A; } .bas__ai-tag { display: flex; align-items: center; gap: 3px; background: var(--cta); color: white; padding: 1px 6px; border-radius: var(--r-pill); font-size: 10px; } /* ============================================================ Billboard placeholder (labeled, swappable) ============================================================ */ .bb { position: relative; aspect-ratio: 16/10; border-radius: var(--r-sm); overflow: hidden; background: #EDF1F7; border: 1px solid var(--line); } .bb--scene { background: linear-gradient(180deg, #DCE6F2 0%, #C6D4E6 52%, #B7C5DA 52%, #AEBDD2 100%); } .bb__sky { position: absolute; inset: 0; } /* simple skyline silhouettes */ .bb__city { position: absolute; left: 0; right: 0; bottom: 30%; height: 34%; display: flex; align-items: flex-end; gap: 4px; padding: 0 8px; opacity: .5; } .bb__city i { flex: 1; background: #9DB0CB; border-radius: 2px 2px 0 0; } .bb__post { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 10px; height: 34%; background: linear-gradient(180deg,#8190AB,#6B7993); } .bb__frame { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); width: 72%; height: 50%; border-radius: 4px; border: 4px solid #6B7993; background: #F4F7FC; display: grid; place-items: center; overflow: hidden; } .bb__plate { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #8A99B3; font-size: 12px; font-weight: 600; text-align: center; padding: 8px; } .bb__plate code { font-size: 11px; color: #A6B2C8; background: rgba(255,255,255,.6); padding: 2px 8px; border-radius: 5px; letter-spacing: .02em; } /* after-state synthetic creative */ .creative { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 9% 9%; color: #fff; text-align: left; background: linear-gradient(135deg, var(--navy) 0%, #21407a 100%); } .creative__brand { font-size: 10px; font-weight: 800; letter-spacing: .14em; opacity: .85; } .creative__head { font-size: clamp(13px, 2.2vw, 19px); font-weight: 800; line-height: 1.28; white-space: pre-line; } .creative__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .creative__cta { font-size: 9px; font-weight: 700; background: var(--cta); padding: 5px 10px; border-radius: 5px; } .creative__logo { width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 11px; font-weight: 800; } .tag { position: absolute; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: var(--r-pill); background: #fff; color: var(--navy); box-shadow: var(--shadow-md); z-index: 3; } .tag svg { width: 12px; height: 12px; } .tag--ai { top: 10px; left: 10px; color: var(--cta); } .tag--edit { bottom: 10px; right: 10px; color: var(--navy); } .tag--green { color: #1C9A6A; } /* generic labeled placeholder */ .ph { position: relative; display: grid; place-items: center; text-align: center; background: repeating-linear-gradient(45deg, #F4F7FC 0 10px, #EFF3F9 10px 20px); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); color: var(--ink-3); min-height: 120px; padding: 18px; } .ph__inner { display: flex; flex-direction: column; align-items: center; gap: 8px; } .ph__icon { color: var(--ink-3); opacity: .8; } .ph__label { font-size: 12.5px; font-weight: 600; color: var(--navy-soft); } .ph__code { font-size: 11px; color: var(--ink-3); background: #fff; padding: 2px 8px; border-radius: 5px; border: 1px solid var(--line); } /* ============================================================ Problem cards ============================================================ */ .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; } .pcard { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 32px 28px; box-shadow: var(--card-shadow); transition: transform .2s ease, box-shadow .2s ease; } .pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .pcard__icon { width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--bg-blue); color: var(--cta); display: grid; place-items: center; margin-bottom: 20px; } .pcard__n { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .08em; margin-bottom: 8px; } .pcard h3 { font-size: 19px; font-weight: 700; margin-bottom: 12px; } .pcard p { font-size: 14.5px; color: var(--ink-2); line-height: 1.85; } .pcard__ba { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .pcard__before, .pcard__after { display: flex; flex-direction: column; gap: 3px; font-size: 14px; font-weight: 700; padding: 10px 12px; border-radius: var(--r-sm); line-height: 1.5; } .pcard__before { background: #F1F4F9; color: var(--ink-2); } .pcard__before span { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); } .pcard__after { background: #EEF4FF; color: var(--cta); } .pcard__after span { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--cta); opacity: .7; } .pcard__arrow { color: var(--ink-3); display: flex; justify-content: center; } /* ============================================================ Solution Before/After (large) ============================================================ */ .solve { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; margin-top: 56px; } .solve__col { } .solve__cap { text-align: center; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; } .solve__cap .pill { font-size: 11px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--bg-gray); color: var(--ink-2); } .solve__cap.is-after .pill { background: #E4F6EE; color: #1C9A6A; } .solve__mid { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 220px; text-align: center; } .solve__arrow { width: 60px; height: 60px; border-radius: 50%; background: var(--cta); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-cta); } .solve__midtext { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.5; } .solve__note { margin-top: 46px; max-width: 760px; margin-left: auto; margin-right: auto; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: 24px 28px; display: flex; gap: 16px; align-items: flex-start; box-shadow: var(--card-shadow); } .solve__note .ic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--bg-blue); color: var(--cta); display: grid; place-items: center; } .solve__note p { font-size: 14.5px; color: var(--ink-2); line-height: 1.85; } .solve__note strong { color: var(--navy); font-weight: 700; } /* ============================================================ Features (2x2) ============================================================ */ .feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 54px; } .fcard { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; display: flex; flex-direction: column; } .fcard__head { padding: 30px 32px 22px; } .fcard__n { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--cta); letter-spacing: .06em; margin-bottom: 14px; } .fcard__n b { width: 24px; height: 24px; border-radius: 7px; background: var(--bg-blue); display: grid; place-items: center; } .fcard h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; } .fcard__head p { font-size: 14.5px; color: var(--ink-2); line-height: 1.8; } .fcard__demo { padding: 4px 32px 30px; } .demo-surface { background: var(--bg-gray); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; } /* edit buttons demo */ .editbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .editbtn { display: flex; align-items: center; gap: 9px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; font-weight: 600; color: var(--navy); transition: border-color .15s, color .15s; } .editbtn:hover { border-color: var(--cta); color: var(--cta); } .editbtn svg { color: var(--cta); flex: none; } .editbtn--regen { grid-column: 1 / -1; justify-content: center; background: var(--navy); color: #fff; border-color: var(--navy); } .editbtn--regen svg { color: #fff; } .editbtn--regen:hover { background: var(--navy-deep); color: #fff; } /* inventory cards demo */ .inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .inv { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; } .inv__thumb { height: 56px; border-radius: 6px; background: linear-gradient(135deg,#DCE6F2,#C6D4E6); position: relative; margin-bottom: 9px; overflow: hidden; } .inv__thumb .mini-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 56%; height: 44%; border: 2px solid #8190AB; border-radius: 3px; background: #f4f7fc; } .inv__name { font-size: 12px; font-weight: 700; color: var(--navy); } .inv__meta { font-size: 11px; color: var(--ink-3); margin-bottom: 8px; } .inv__try { width: 100%; padding: 7px; font-size: 11.5px; font-weight: 700; border-radius: 6px; background: var(--bg-blue); color: var(--cta); border: none; transition: background .15s; } .inv__try:hover { background: #DCE8FF; } /* qr embed demo (feature 4) */ .embed { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; } .embed__board { position: relative; } .qr { width: 100%; aspect-ratio: 1; border-radius: 8px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; padding: 10px; } .qr svg { width: 100%; height: 100%; } .phone { width: 116px; height: 176px; border-radius: 20px; background: var(--navy); padding: 7px; box-shadow: var(--shadow-md); flex: none; } .phone__screen { width: 100%; height: 100%; border-radius: 14px; background: #fff; overflow: hidden; display: flex; flex-direction: column; } .phone__top { height: 26px; background: var(--bg-blue); display: flex; align-items: center; padding: 0 10px; font-size: 8px; font-weight: 700; color: var(--cta); } .phone__body { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 6px; } .phone__board { flex: 1; border-radius: 6px; background: linear-gradient(135deg, var(--navy), #21407a); position: relative; } .phone__board::after { content: "AD"; position: absolute; left: 8px; top: 8px; font-size: 8px; font-weight: 800; color: #fff; opacity: .8; } .phone__cta { height: 22px; border-radius: 6px; background: var(--cta); } /* ============================================================ Use cases (3) ============================================================ */ .uc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 52px; } .uc { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; } .uc__media { aspect-ratio: 4/3; background: linear-gradient(135deg, #E7EEF7, #D7E2F0); position: relative; } .uc__step { position: absolute; top: 14px; left: 14px; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--navy); padding: 5px 12px; border-radius: var(--r-pill); white-space: nowrap; } .uc__body { padding: 24px 26px 28px; } .uc__body h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; } .uc__body p { font-size: 14px; color: var(--ink-2); line-height: 1.8; } /* person illustration placeholder */ .person { position: absolute; inset: 0; display: grid; place-items: center; } .person__ph { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--navy-soft); } .person__ph code { font-size: 11px; background: rgba(255,255,255,.7); padding: 2px 9px; border-radius: 5px; color: var(--ink-2); } /* ============================================================ QR feature band ============================================================ */ .qrband { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .qrband__visual { position: relative; } .qr-scene { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; align-items: center; } .qr-board { position: relative; } .qr-tag { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); background: #fff; border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 8px; width: 64px; height: 64px; } .qr-tag svg { width: 100%; height: 100%; } .qr-phone { display: flex; justify-content: center; } /* ============================================================ Pricing (4) ============================================================ */ .price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 54px; align-items: stretch; } .plan { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 24px; display: flex; flex-direction: column; box-shadow: var(--card-shadow); transition: transform .2s ease, box-shadow .2s ease; } .plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .plan--featured { border: 1.5px solid var(--cta); box-shadow: 0 18px 44px rgba(59,130,246,.18); position: relative; transform: translateY(-6px); } .plan--featured:hover { transform: translateY(-9px); } .plan__flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--cta); color: #fff; font-size: 11.5px; font-weight: 700; padding: 5px 16px; border-radius: var(--r-pill); white-space: nowrap; box-shadow: var(--shadow-cta); } .plan__name { font-size: 15px; font-weight: 700; color: var(--navy); } .plan__price { margin: 16px 0 6px; display: flex; align-items: baseline; gap: 4px; } .plan__price .amt { font-size: 30px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; white-space: nowrap; flex: none; } .plan__price .unit { font-size: 13px; font-weight: 600; color: var(--ink-3); } .plan__price .free { font-size: 30px; font-weight: 800; color: var(--cta); white-space: nowrap; flex: none; } .plan__desc { font-size: 13px; color: var(--ink-2); line-height: 1.75; min-height: 60px; } .plan__btn { margin-top: 22px; } .plan__list { margin: 22px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; list-style: none; } .plan__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--navy-soft); line-height: 1.5; } .plan__list svg { flex: none; color: var(--cta); margin-top: 2px; } /* ============================================================ Final CTA (navy band) ============================================================ */ .finalcta { background: var(--navy-deep); color: #fff; position: relative; overflow: hidden; } .finalcta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 360px at 16% 8%, rgba(59,130,246,.28) 0%, rgba(59,130,246,0) 60%), radial-gradient(620px 320px at 92% 96%, rgba(59,130,246,.18) 0%, rgba(59,130,246,0) 58%); } .finalcta__grid { position: relative; text-align: center; max-width: 760px; margin: 0 auto; } .finalcta h2 { color: #fff; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.4; font-weight: 800; } .finalcta p { margin-top: 22px; font-size: 17px; color: rgba(255,255,255,.82); line-height: 1.9; } .finalcta__btn { margin-top: 34px; } .finalcta__feats { margin-top: 34px; display: flex; justify-content: center; gap: 14px 30px; flex-wrap: wrap; } .finalcta__feat { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.9); font-weight: 500; } .finalcta__feat svg { color: #7FB0FF; flex: none; } /* ============================================================ FAQ accordion ============================================================ */ .faq { max-width: 820px; margin: 52px auto 0; display: flex; flex-direction: column; gap: 14px; } .acc { background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; } .acc__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; background: none; border: none; text-align: left; font-size: 16px; font-weight: 700; color: var(--navy); } .acc__q:hover { color: var(--cta); } .acc__icon { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-blue); color: var(--cta); display: grid; place-items: center; transition: transform .28s ease, background .2s; } .acc.is-open .acc__icon { transform: rotate(45deg); } .acc__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .acc__a-inner { padding: 0 26px 24px; font-size: 14.5px; color: var(--ink-2); line-height: 1.9; } /* ============================================================ Footer ============================================================ */ .footer { background: var(--navy-deep); color: rgba(255,255,255,.7); padding: 56px 0 36px; } .footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12); } .footer .logo { color: #fff; } .footer .logo__mark { background: #fff; color: var(--navy); } .footer .logo__mark::after { border-color: var(--navy-deep); } .footer__tag { margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,.55); max-width: 300px; line-height: 1.7; } .footer__links { display: flex; gap: 30px; flex-wrap: wrap; } .footer__links a { font-size: 14px; color: rgba(255,255,255,.78); transition: color .15s; } .footer__links a:hover { color: #fff; } .footer__bottom { padding-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.5); } /* ============================================================ Reveal — visible by default (no animation gating). ============================================================ */ .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .sim__input .caret { animation: none; } } /* ============================================================ Responsive ============================================================ */ @media (max-width: 980px) { .nav__links, .nav__login { display: none; } .menu-btn { display: flex; } .hero__grid { grid-template-columns: 1fr; gap: 44px; } .hero__copy { max-width: 620px; } .qrband { grid-template-columns: 1fr; gap: 40px; } .feat-grid { grid-template-columns: 1fr; } .uc-grid { grid-template-columns: 1fr 1fr; } .price-grid { grid-template-columns: 1fr 1fr; } .plan--featured { transform: none; } .plan--featured:hover { transform: translateY(-3px); } } @media (max-width: 760px) { :root { --section-y: 72px; --gutter: 20px; } .hero { padding-top: 120px; } .cards-3 { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; } .uc-grid { grid-template-columns: 1fr; } .solve { grid-template-columns: 1fr; gap: 22px; } .solve__mid { width: 100%; flex-direction: row; justify-content: center; } .solve__arrow { transform: rotate(90deg); } .price-grid { grid-template-columns: 1fr; } .mobile-nav.is-open { display: block; } .hero__cta-row .btn { width: 100%; } .hero__cta-row { gap: 12px; } } /* mobile dropdown nav */ .mobile-nav { position: fixed; top: 72px; left: 0; right: 0; z-index: 99; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 14px var(--gutter) 22px; } .mobile-nav a { display: block; padding: 13px 4px; font-size: 15px; font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--line); } .mobile-nav a:last-of-type { border-bottom: none; } .mobile-nav .btn { width: 100%; margin-top: 14px; }