/* ══════════════════════════════════════════════════════════ TICK MY WORK — Product Launch Site Light · soothing · Apple-calm design system (shared) ══════════════════════════════════════════════════════════ */ /* Cross-document view transitions (card → tour morph). Chromium; graceful no-op elsewhere. */ @view-transition { navigation: auto; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Canvas */ --bg: #FBFAF8; --bg-raised: #FFFFFF; --bg-tint: #F4F2EE; --ink: #1D1D1F; --ink-soft: #52525B; --ink-dim: #86868B; --line: rgba(0,0,0,0.09); --line-soft: rgba(0,0,0,0.05); /* Default (brand / home) accent — soft slate-indigo */ --accent: #4C5B7A; --accent-2: #6D7FA6; --accent-tint: #EEF1F7; --accent-ink: #33405c; /* Product accents (used on cards + as page theme) */ --vault: #2F8C9E; --vault-tint: #E9F4F5; --vault-ink: #1f6b7a; --diary: #D9873C; --diary-tint: #FBF1E6; --diary-ink: #a9631f; --mail: #5C9A6E; --mail-tint2: #EBF4ED; --mail-ink: #3f7551; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.07); --shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 30px 70px rgba(0,0,0,0.10); --radius: 24px; --radius-sm: 14px; --maxw: 1120px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } /* Per-page product theme: etc. */ body[data-product="vault"] { --accent:var(--vault); --accent-tint:var(--vault-tint); --accent-ink:var(--vault-ink); --accent-2:#4aa7b7; } body[data-product="diary"] { --accent:var(--diary); --accent-tint:var(--diary-tint); --accent-ink:var(--diary-ink); --accent-2:#e8a15e; } body[data-product="mail"] { --accent:var(--mail); --accent-tint:var(--mail-tint2); --accent-ink:var(--mail-ink); --accent-2:#77b389; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1,h2,h3,h4 { line-height: 1.08; letter-spacing: -0.021em; font-weight: 700; color: var(--ink); } h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); } h2 { font-size: clamp(2rem, 4vw, 3.1rem); } h3 { font-size: 1.4rem; letter-spacing: -0.015em; } p { color: var(--ink-soft); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: var(--accent); color: #fff; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .section { padding: clamp(4.5rem, 9vw, 8rem) 0; } .tint { background: var(--bg-tint); } .accent-tint { background: var(--accent-tint); } .center { text-align: center; } .narrow { max-width: 640px; } .center.narrow { margin-left: auto; margin-right: auto; } /* ── Eyebrow label ── */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-tint); padding: 6px 14px; border-radius: 100px; margin-bottom: 1.2rem; } .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-soft); max-width: 620px; } .center .lead { margin-left: auto; margin-right: auto; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; padding: 14px 26px; border-radius: 100px; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .2s, color .2s; cursor: pointer; border: 1px solid transparent; white-space: nowrap; } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 45%, transparent); } .btn-ghost { background: var(--bg-raised); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-arrow { transition: transform .25s; } .btn:hover .btn-arrow { transform: translateX(3px); } /* ── Nav ── */ .nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: var(--maxw); margin: 0 auto; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } .nav-wrap { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; } .nav-wrap.scrolled { border-color: var(--line-soft); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } .nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; } .nav-logo img { height: 26px; width: auto; } .nav-links { display: flex; gap: 4px; list-style: none; } .nav-links a { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); padding: 8px 14px; border-radius: 100px; transition: color .2s, background .2s; } .nav-links a:hover, .nav-links a.active { color: var(--ink); background: var(--bg-tint); } .nav-cta { font-size: 0.95rem; font-weight: 600; padding: 9px 18px; border-radius: 100px; background: var(--accent); color: #fff; transition: transform .2s, box-shadow .2s; } .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s; } .nav-mobile { display: none; } /* ── Hero ── */ .hero { padding: clamp(3rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; } .hero-halo { position: absolute; inset: -20% 0 auto 0; height: 620px; z-index: -1; background: radial-gradient(60% 60% at 50% 0%, var(--accent-tint) 0%, transparent 70%); } .hero h1 { margin-bottom: 1.4rem; } .hero .lead { margin-bottom: 2rem; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* ── Grids ── */ .grid { display: grid; gap: 26px; } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-2 { grid-template-columns: repeat(2, 1fr); } /* ── Product cards (home) ── */ .product-card { position: relative; display: flex; flex-direction: column; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; --accent: var(--pc, #4C5B7A); } .product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .product-card::before { content:''; position:absolute; inset:0 0 auto 0; height:4px; background:var(--accent); opacity:.9; } .pc-vault { --pc: var(--vault); --accent-tint: var(--vault-tint); --accent-ink: var(--vault-ink); } .pc-diary { --pc: var(--diary); --accent-tint: var(--diary-tint); --accent-ink: var(--diary-ink); } .pc-mail { --pc: var(--mail); --accent-tint: var(--mail-tint2); --accent-ink: var(--mail-ink); } .pc-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); margin-bottom: 20px; } .pc-icon svg { width: 26px; height: 26px; } .pc-name { font-size: 1.6rem; margin-bottom: 6px; } .pc-tag { font-size: 0.82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; } .product-card > p { flex: 1; margin-bottom: 18px; font-size: 0.98rem; } .pc-hook { font-size: 0.9rem; font-weight: 600; color: var(--ink); background: var(--accent-tint); padding: 10px 14px; border-radius: 12px; margin-bottom: 20px; } .pc-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent-ink); } .pc-link .btn-arrow { transition: transform .25s; } .product-card:hover .pc-link .btn-arrow { transform: translateX(4px); } /* Chips / feature lists */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font-size: 0.85rem; font-weight: 500; color: var(--accent-ink); background: var(--accent-tint); padding: 6px 13px; border-radius: 100px; } /* ── Tour: feature clusters ── */ .cluster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; padding: clamp(3rem,6vw,5rem) 0; } .cluster:nth-child(even) .cluster-media { order: -1; } .cluster-copy .kicker { font-size: 0.85rem; font-weight: 700; letter-spacing:.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .cluster-copy h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1rem; } .feature-list { list-style: none; display: grid; gap: 14px; margin-top: 1.4rem; } .feature-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; color: var(--ink-soft); } .feature-list .fi { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; margin-top: 2px; } .feature-list .fi svg { width: 13px; height: 13px; } .feature-list b { color: var(--ink); font-weight: 600; } /* ── Mockup frames ── */ .mock { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-md); overflow: hidden; font-size: 13px; } .mock-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); background: color-mix(in srgb, var(--bg-tint) 60%, #fff); } .mock-bar .d { width: 10px; height: 10px; border-radius: 50%; } .mock-bar .t { margin-left: 8px; font-size: 12px; color: var(--ink-dim); font-weight: 500; } .mock-body { padding: 18px; } .mock-media { position: relative; } .mock-media .float { position: absolute; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); padding: 12px 14px; font-size: 12px; } /* generic mock rows */ .mrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px; margin-bottom: 8px; background: #fff; } .mrow:last-child { margin-bottom: 0; } .mrow .ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 26px; } .mbadge { margin-left: auto; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 100px; } /* Kanban */ .kanban { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } .kcol h5 { font-size: 11px; text-transform: uppercase; letter-spacing:.05em; color: var(--ink-dim); margin-bottom: 8px; font-weight: 700; } .kcard { background: #fff; border: 1px solid var(--line-soft); border-radius: 9px; padding: 9px 10px; margin-bottom: 8px; box-shadow: var(--shadow-sm); } .kcard .kbar { height: 5px; border-radius: 4px; background: var(--accent-tint); margin-bottom: 7px; } .kcard .kmeta { font-size: 11px; color: var(--ink-dim); } /* Meters / bars */ .meter { height: 7px; border-radius: 5px; background: var(--bg-tint); overflow: hidden; margin: 6px 0 12px; } .meter > i { display: block; height: 100%; border-radius: 5px; background: var(--accent); } /* ── Comparison table ── */ .compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .compare th, .compare td { text-align: left; padding: 20px 22px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } .compare thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); background: var(--bg-tint); } .compare tbody tr:last-child td { border-bottom: 0; } .compare tr:last-child td { border-bottom: 0; } .compare .prod { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 10px; } .compare .swatch { width: 12px; height: 12px; border-radius: 4px; } .compare td p { font-size: 0.92rem; margin: 0; } /* ── Stat row ── */ .stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem,5vw,4rem); } .stat .num { font-size: clamp(2rem,4vw,2.8rem); font-weight: 700; letter-spacing:-.03em; color: var(--accent-ink); } .stat .lbl { font-size: 0.9rem; color: var(--ink-dim); } /* ── CTA ── */ .cta { text-align: center; background: var(--accent-tint); border-radius: 32px; padding: clamp(3rem,7vw,5.5rem) 24px; } .cta h2 { margin-bottom: 1rem; } .cta p { margin: 0 auto 2rem; max-width: 480px; } .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ── Footer ── */ .footer { border-top: 1px solid var(--line); padding: 3.5rem 0 2.5rem; margin-top: 2rem; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; } .footer-brand p { font-size: 0.9rem; margin-top: 12px; max-width: 300px; } .footer-col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing:.06em; color: var(--ink-dim); margin-bottom: 14px; font-weight: 700; } .footer-col a { display: block; font-size: 0.92rem; color: var(--ink-soft); padding: 5px 0; transition: color .2s; } .footer-col a:hover { color: var(--accent-ink); } .footer-bottom { max-width: var(--maxw); margin: 2.5rem auto 0; padding: 1.6rem 24px 0; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.85rem; color: var(--ink-dim); } /* ── Back link (tour pages) ── */ .backlink { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; font-weight: 500; color: var(--ink-dim); margin-bottom: 1.5rem; } .backlink:hover { color: var(--accent-ink); } /* ── Scroll reveal ── */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity: 1; transform: none; } .reveal-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); } .reveal-stagger.in > * { opacity: 1; transform: none; } .reveal-stagger.in > *:nth-child(2){ transition-delay:.08s; } .reveal-stagger.in > *:nth-child(3){ transition-delay:.16s; } .reveal-stagger.in > *:nth-child(4){ transition-delay:.24s; } /* Floating drift for hero mock */ @keyframes drift { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} } .drift { animation: drift 6s ease-in-out infinite; } /* view-transition assignments set inline per element via style="view-transition-name:..." */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; } /* ── Responsive ── */ @media (max-width: 900px) { .nav-links, .nav > .nav-cta { display: none; } .nav-toggle { display: flex; } .cols-3, .cols-2 { grid-template-columns: 1fr; } .cluster { grid-template-columns: 1fr; gap: 2rem; } .cluster:nth-child(even) .cluster-media { order: 0; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .footer-brand { grid-column: 1 / -1; } .nav-mobile { display: none; position: fixed; inset: 60px 0 auto 0; background: var(--bg-raised); border-bottom: 1px solid var(--line); padding: 12px 24px 24px; z-index: 99; box-shadow: var(--shadow-md); flex-direction: column; } .nav-mobile.open { display: flex; } .nav-mobile a { padding: 12px 0; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line-soft); } .nav-mobile a:last-child { border: 0; } .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); } .compare thead { display: none; } .compare, .compare tbody, .compare tr, .compare td { display: block; width: 100%; } .compare tr { border-bottom: 1px solid var(--line); padding: 8px 0; } .compare tr:last-child { border: 0; } .compare td { border: 0; padding: 6px 22px; } } @media (max-width: 500px) { body { font-size: 16px; } .product-card, .mock-body { padding: 22px; } .footer-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════ DESIGN ELEVATION + INTERACTIVE CONSOLE KIT (Phase 2) ══════════════════════════════════════════════════════════ */ /* Scroll progress bar */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .1s linear; } /* Animated gradient-mesh hero backdrop */ .hero { position: relative; } .hero-mesh { position: absolute; inset: -30% -10% auto -10%; height: 780px; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .7; } .hero-mesh span { position: absolute; border-radius: 50%; mix-blend-mode: multiply; opacity: .5; animation: float-mesh 16s ease-in-out infinite; } .hero-mesh span:nth-child(1){ width: 42vw; height: 42vw; left: 4%; top: 0; background: var(--accent-tint); } .hero-mesh span:nth-child(2){ width: 34vw; height: 34vw; right: 6%; top: 6%; background: color-mix(in srgb, var(--accent) 22%, #fff); animation-delay: -4s; } .hero-mesh span:nth-child(3){ width: 30vw; height: 30vw; left: 34%; top: 20%; background: color-mix(in srgb, var(--accent-2) 20%, #fff); animation-delay: -8s; } @keyframes float-mesh { 0%,100%{ transform: translate(0,0) scale(1);} 33%{ transform: translate(4%,3%) scale(1.08);} 66%{ transform: translate(-3%,2%) scale(.96);} } /* Section rail (in-page nav on tour pages) */ .section-rail { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 80; display: flex; flex-direction: column; gap: 12px; } .section-rail a { width: 10px; height: 10px; border-radius: 50%; background: var(--line); transition: transform .25s, background .25s; position: relative; } .section-rail a.active { background: var(--accent); transform: scale(1.35); } .section-rail a::after { content: attr(data-label); position: absolute; right: 20px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: .78rem; font-weight: 600; color: var(--ink-soft); background: var(--bg-raised); border: 1px solid var(--line); padding: 3px 10px; border-radius: 100px; box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transition: opacity .2s; } .section-rail a:hover::after { opacity: 1; } @media (max-width: 1180px){ .section-rail { display: none; } } /* Card 3D tilt (JS-driven) */ .tilt { transition: transform .18s ease-out; transform-style: preserve-3d; will-change: transform; } /* "Interactive demo" ribbon */ .demo-ribbon { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); } .demo-ribbon .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: pulse-ring 2s infinite; } @keyframes pulse-ring { 0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);} 70%{ box-shadow: 0 0 0 10px transparent;} 100%{ box-shadow: 0 0 0 0 transparent;} } /* ── Feature grid (full-coverage sections) ── */ .feature-band { padding: clamp(3rem,6vw,5rem) 0; } .fgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .fgrid.two { grid-template-columns: repeat(2,1fr); } .fcard { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s; } .fcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .fcard .fi2 { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); margin-bottom: 14px; } .fcard .fi2 svg { width: 21px; height: 21px; } .fcard h4 { font-size: 1.06rem; margin-bottom: 6px; letter-spacing: -.01em; } .fcard p { font-size: .92rem; color: var(--ink-soft); margin: 0; } .fcard .ftag { display:inline-block; margin-top:10px; font-size:.72rem; font-weight:600; color:var(--ink-dim); } @media (max-width: 900px){ .fgrid, .fgrid.two { grid-template-columns: 1fr; } } /* Group heading for feature bands */ .fgroup-title { display:flex; align-items:center; gap:12px; margin: 2.4rem 0 1.1rem; } .fgroup-title .n { font-family: var(--font); font-size:.8rem; font-weight:700; color:var(--accent); background:var(--accent-tint); width:26px; height:26px; border-radius:8px; display:grid; place-items:center; } .fgroup-title h3 { font-size: 1.3rem; } /* ══════════════ CONSOLE / SANDBOX KIT ══════════════ */ .demo-wrap { padding: clamp(2.5rem,5vw,4rem) 0; } .demo-frame { border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: var(--bg-raised); } .demo-frame .demo-topbar { display:flex; align-items:center; gap:7px; padding: 11px 15px; background:#0f1b2e; } .demo-topbar .d { width: 11px; height: 11px; border-radius: 50%; } .demo-topbar .url { margin-left: 10px; font-size: 12px; color: #9fb0c9; font-family: var(--font); background: rgba(255,255,255,.06); padding: 4px 12px; border-radius: 7px; } .demo-hint { text-align:center; font-size:.85rem; color:var(--ink-dim); margin-top:12px; } .demo-hint b { color: var(--accent-ink); } .demo-frame { position: relative; } .console { display: grid; grid-template-columns: 210px 1fr; min-height: 500px; background: #f6f8fb; font-size: 13.5px; color:#1e293b; position: relative; } .cside { background: #12233d; color: #cdd8e8; padding: 16px 12px; display: flex; flex-direction: column; } .cside-brand { display:flex; align-items:center; gap:9px; padding: 6px 8px 16px; } .cside-brand .logo { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); display:grid; place-items:center; color:#fff; font-weight:800; } .cside-brand b { color:#fff; font-size: 15px; letter-spacing:-.01em; display:block; line-height:1.1; } .cside-brand small { color:#7f92ad; font-size: 10px; } .cside-sec { font-size: 10px; text-transform: uppercase; letter-spacing:.08em; color:#61748f; margin: 14px 8px 6px; } .cside-nav { display:flex; flex-direction:column; gap:2px; } .cside-nav button { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; color:#b9c6da; font: inherit; font-size:13px; padding: 9px 10px; border-radius: 9px; cursor:pointer; transition: background .15s, color .15s; } .cside-nav button:hover { background: rgba(255,255,255,.06); color:#fff; } .cside-nav button.active { background: var(--accent); color:#fff; font-weight:600; } .cside-nav button .ci { width:17px; height:17px; flex:0 0 17px; opacity:.9; } .cside-foot { margin-top:auto; display:flex; align-items:center; gap:8px; padding: 10px 8px 4px; font-size:11px; color:#7f92ad; } .cside-foot .dot { width:8px; height:8px; border-radius:50%; background:#3fbf7f; box-shadow:0 0 0 3px rgba(63,191,127,.18); } .cmain { padding: 20px 22px; overflow:hidden; } .cmain-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom: 16px; flex-wrap:wrap; } .cmain-head h4 { font-size: 1.15rem; color:#0f1b2e; margin-bottom:2px; } .cmain-head p { font-size: .82rem; color:#64748b; margin:0; } .cbtn { font: inherit; font-size:12.5px; font-weight:600; border:1px solid var(--line); background:#fff; color:#1e293b; padding: 8px 14px; border-radius: 9px; cursor:pointer; transition: transform .15s, box-shadow .15s, background .15s; display:inline-flex; align-items:center; gap:6px; } .cbtn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .cbtn.primary { background: var(--accent); color:#fff; border-color: transparent; } .cbtn.danger { background:#dc2626; color:#fff; border-color:transparent; } .cbtn.ghostd { background:transparent; } .cbtn.warn { background:#f59e0b; color:#fff; border-color:transparent; } .cbtn.ok { background:#16a34a; color:#fff; border-color:transparent; } .cbtn:disabled { opacity:.5; cursor:not-allowed; transform:none; } .ctiles { display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin-bottom:18px; } .ctile { background:#fff; border:1px solid var(--line); border-radius:13px; padding:13px 15px; } .ctile .v { font-size: 1.6rem; font-weight:800; letter-spacing:-.03em; color:#0f1b2e; line-height:1.1; } .ctile .l { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#8595ab; margin-top:3px; } .ctile.accent .v { color: var(--accent-ink); } .ctable { width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:13px; overflow:hidden; } .ctable th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:#8595ab; padding:11px 14px; background:#f8fafc; border-bottom:1px solid var(--line); } .ctable td { padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle; } .ctable tr:last-child td { border-bottom:0; } .ctable tr.row-danger td { background: #fef2f2; } .ctable tr.row-fade td { opacity:.5; } .cbadge { font-size:11px; font-weight:600; padding:3px 10px; border-radius:100px; white-space:nowrap; display:inline-flex; align-items:center; gap:5px; } .cbadge.ok { background:#e7f6ee; color:#1a7f4b; } .cbadge.warn { background:#fdf1e3; color:#b5751a; } .cbadge.danger { background:#fdeaea; color:#c0554f; } .cbadge.info { background: var(--accent-tint); color: var(--accent-ink); } .cbadge.muted { background:#eef2f7; color:#64748b; } .cchip { font-size:12px; font-weight:500; padding:5px 12px; border-radius:100px; background:var(--accent-tint); color:var(--accent-ink); display:inline-flex; align-items:center; gap:6px; cursor:pointer; border:1px solid transparent; user-select:none; transition: background .15s, transform .1s; } .cchip:hover { transform: translateY(-1px); } .cchip.avail { background:#eef2f7; color:#475569; } .cchip.avail::before { content:'+'; font-weight:700; } .cchip.assigned::before { content:'×'; font-weight:700; } .ctoggle { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; } .ctoggle button { font:inherit; font-size:11.5px; font-weight:600; border:0; padding:6px 13px; cursor:pointer; background:#fff; color:#64748b; } .ctoggle button.on { background:#16a34a; color:#fff; } .ctoggle button.off { background:#dc2626; color:#fff; } .ctabs { display:flex; gap:4px; margin-bottom:16px; flex-wrap:wrap; } .ctabs button { font:inherit; font-size:12.5px; font-weight:600; border:0; background:#eef2f7; color:#475569; padding:7px 14px; border-radius:100px; cursor:pointer; transition:background .15s,color .15s; } .ctabs button.active { background:var(--accent); color:#fff; } .cfeed { background:#fff; border:1px solid var(--line); border-radius:13px; padding:6px; max-height: 200px; overflow-y:auto; } .cfeed-item { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; font-size:12.5px; animation: feed-in .4s ease; } .cfeed-item + .cfeed-item { border-top:1px solid var(--line-soft); } .cfeed-item .fdot { width:8px; height:8px; border-radius:50%; flex:0 0 8px; } .cfeed-item .ftime { margin-left:auto; font-size:11px; color:#9aa8bd; } @keyframes feed-in { from{ opacity:0; transform: translateX(-8px);} to{ opacity:1; transform:none; } } .dualpane { display:grid; grid-template-columns: 1fr auto 1fr; gap:14px; align-items:stretch; } .dpane { background:#fff; border:1px solid var(--line); border-radius:13px; padding:13px; min-height:180px; } .dpane h6 { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#8595ab; margin-bottom:10px; display:flex; justify-content:space-between; } .dpane .chips { flex-wrap:wrap; } .dpane-mid { display:flex; flex-direction:column; justify-content:center; gap:8px; } .cscreen[hidden]{ display:none; } .cscreen { animation: screen-in .35s ease; } @keyframes screen-in { from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } } .cprogress { height:8px; border-radius:6px; background:#eef2f7; overflow:hidden; } .cprogress > i { display:block; height:100%; background:var(--accent); border-radius:6px; transition: width .5s cubic-bezier(.2,.8,.2,1); } /* Point-in-time slider */ .pit-slider { width:100%; -webkit-appearance:none; appearance:none; height:8px; border-radius:6px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 50%, #e2e8f0 50%); outline:none; } .pit-slider::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--accent); cursor:pointer; box-shadow: var(--shadow-sm); } .pit-slider::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--accent); cursor:pointer; } /* Compliance calendar */ .ccal { display:grid; grid-template-columns: repeat(7,1fr); gap:5px; } .ccal .cch { font-size:10.5px; text-transform:uppercase; color:#8595ab; text-align:center; padding:4px 0; font-weight:700; } .ccal .cday { background:#fff; border:1px solid var(--line-soft); border-radius:8px; min-height:56px; padding:5px; cursor:pointer; transition: box-shadow .15s, transform .1s; position:relative; } .ccal .cday:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); } .ccal .cday.empty { background:transparent; border:0; cursor:default; } .ccal .cday .dn { font-size:11px; color:#64748b; font-weight:600; } .ccal .cday .ctag { font-size:9px; font-weight:700; padding:1px 5px; border-radius:4px; margin-top:3px; display:inline-block; } .ccal .mk { position:absolute; top:4px; right:5px; font-size:10px; } /* Invoice builder */ .cinv-line { display:grid; grid-template-columns: 1.8fr .8fr .7fr .8fr auto; gap:8px; align-items:center; margin-bottom:7px; } .cinv-line input { font:inherit; font-size:12.5px; border:1px solid var(--line); border-radius:7px; padding:6px 9px; width:100%; background:#fff; } .cinv-line input:focus { outline:none; border-color:var(--accent); } .cinv-x { border:0; background:#fdeaea; color:#c0554f; width:26px; height:26px; border-radius:7px; cursor:pointer; font-weight:700; } .cinv-tot { display:flex; justify-content:space-between; padding:5px 0; font-size:13px; } .cinv-tot.grand { font-weight:800; color:var(--accent-ink); font-size:15px; border-top:1px solid var(--line); padding-top:9px; margin-top:5px; } /* Webmail three-pane */ .wm { display:grid; grid-template-columns: 150px 240px 1fr; min-height:440px; background:#fff; font-size:13px; } .wm-side { background:#f8fafc; border-right:1px solid var(--line); padding:12px 8px; } .wm-side .wm-compose { width:100%; background:var(--accent); color:#fff; border:0; font:inherit; font-weight:600; font-size:12.5px; padding:9px; border-radius:9px; cursor:pointer; margin-bottom:12px; } .wm-fold { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer; color:#475569; } .wm-fold .wc { margin-left:auto; font-size:11px; background:var(--accent); color:#fff; border-radius:100px; padding:1px 7px; } .wm-fold.active { background:var(--accent-tint); color:var(--accent-ink); font-weight:600; } .wm-list { border-right:1px solid var(--line); overflow-y:auto; max-height:440px; } .wm-msg { padding:11px 13px; border-bottom:1px solid var(--line-soft); cursor:pointer; } .wm-msg:hover { background:#f8fafc; } .wm-msg.active { background:var(--accent-tint); } .wm-msg.unread .wm-from, .wm-msg.unread .wm-subj { font-weight:700; color:#0f1b2e; } .wm-msg .wm-from { display:flex; justify-content:space-between; font-size:12.5px; color:#334155; } .wm-msg .wm-time { font-size:11px; color:#9aa8bd; font-weight:400; } .wm-msg .wm-subj { font-size:12.5px; color:#475569; margin-top:2px; } .wm-msg .wm-prev { font-size:11.5px; color:#9aa8bd; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wm-read { padding:18px; overflow-y:auto; max-height:440px; } .wm-read h5 { font-size:1.15rem; color:#0f1b2e; margin-bottom:8px; } .wm-meta { display:flex; align-items:center; gap:10px; font-size:12px; color:#64748b; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); } .wm-avatar { width:34px; height:34px; border-radius:50%; background:var(--accent-tint); color:var(--accent-ink); display:grid; place-items:center; font-weight:700; } .wm-att { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:9px; padding:7px 11px; font-size:12px; color:#475569; margin:12px 8px 0 0; } .wm-actions { display:flex; gap:8px; margin-top:18px; } /* Modal (sandbox) */ .cmodal-back { position:absolute; inset:0; background:rgba(15,27,46,.45); display:grid; place-items:center; z-index:20; padding:20px; animation: fade-in .2s; } .cmodal { background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); width:100%; max-width:440px; padding:22px; } .cmodal h5 { font-size:1.1rem; margin-bottom:14px; } .cmodal label { font-size:12px; font-weight:600; color:#475569; display:block; margin:10px 0 4px; } .cmodal input, .cmodal select, .cmodal textarea { width:100%; font:inherit; font-size:13px; border:1px solid var(--line); border-radius:9px; padding:9px 11px; } .cmodal input:focus, .cmodal select:focus { outline:none; border-color:var(--accent); } .cmodal-actions { display:flex; gap:9px; justify-content:flex-end; margin-top:18px; } @keyframes fade-in { from{opacity:0} to{opacity:1} } /* Floating time widget (Work Diary) */ .twidget { position:absolute; right:18px; bottom:18px; width:230px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); padding:15px; z-index:15; } .twidget .tw-time { font-size:1.9rem; font-weight:800; letter-spacing:-.03em; color:#0f1b2e; text-align:center; font-variant-numeric: tabular-nums; } .twidget .tw-task { text-align:center; font-size:12px; color:#64748b; margin-bottom:4px; } .twidget .tw-earn { text-align:center; font-size:13px; font-weight:700; color:var(--accent-ink); margin-bottom:12px; } .twidget .tw-actions { display:flex; gap:7px; justify-content:center; } /* Office-bot bubble */ .cbot { position:absolute; right:18px; bottom:18px; z-index:16; } .cbot-fab { width:52px; height:52px; border-radius:50%; background:var(--accent); color:#fff; border:0; cursor:pointer; box-shadow:var(--shadow-lg); font-size:22px; } .cbot-panel { position:absolute; right:0; bottom:64px; width:280px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden; } .cbot-head { background:var(--accent); color:#fff; padding:12px 15px; font-weight:600; font-size:13px; } .cbot-body { padding:13px; max-height:260px; overflow-y:auto; } .cbot-msg { background:#f1f5f9; border-radius:12px; padding:9px 12px; font-size:12.5px; color:#334155; margin-bottom:8px; } .cbot-msg.me { background:var(--accent-tint); color:var(--accent-ink); margin-left:auto; width:fit-content; } .cbot-quick { display:flex; flex-wrap:wrap; gap:6px; } .cbot-quick button { font:inherit; font-size:11.5px; border:1px solid var(--accent); color:var(--accent-ink); background:#fff; border-radius:100px; padding:5px 11px; cursor:pointer; } /* Task card list (Work Diary My Tasks) */ .tcard { display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:13px; padding:13px 15px; margin-bottom:9px; transition: box-shadow .15s; } .tcard:hover { box-shadow:var(--shadow-sm); } .tcard .tstatus { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:18px; cursor:pointer; flex:0 0 38px; background:#f1f5f9; transition: transform .15s; } .tcard .tstatus:hover { transform:scale(1.08); } .tcard .tmeta { font-size:11.5px; color:#64748b; margin-top:4px; } .tcard .tmeta span { margin-right:4px; } .tcard.done .ttitle { text-decoration:line-through; color:#94a3b8; } /* Confetti canvas */ .confetti { position:absolute; inset:0; pointer-events:none; z-index:30; } @media (max-width: 820px){ .console { grid-template-columns: 1fr; } .cside { flex-direction: row; overflow-x:auto; padding:8px; gap:6px; } .cside-brand, .cside-sec, .cside-foot { display:none; } .cside-nav { flex-direction:row; } .cside-nav button { white-space:nowrap; padding:8px 12px; } .ctiles { grid-template-columns: repeat(2,1fr); } .wm { grid-template-columns: 1fr; } .wm-side, .wm-list { border-right:0; border-bottom:1px solid var(--line); max-height:none; } .wm-list { max-height:200px; } .dualpane { grid-template-columns: 1fr; } .dpane-mid { flex-direction:row; justify-content:center; } .cinv-line { grid-template-columns: 1fr 1fr; } .twidget { position:static; width:auto; margin-top:14px; } } /* ══════════ PHASE 3: arena, tiers, editions, founders ══════════ */ body[data-product="arena"]{ --accent:#4C5B7A; --accent-tint:#EEF1F7; --accent-ink:#33405c; --accent-2:#6D7FA6; } /* Demo arena product tabs */ .arena-tabs{ display:flex; gap:8px; justify-content:center; margin-bottom:20px; flex-wrap:wrap; } .arena-tabs button{ font:inherit; font-weight:600; font-size:.95rem; border:1px solid var(--line); background:var(--bg-raised); color:var(--ink-soft); padding:10px 20px; border-radius:100px; cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s, background .2s, color .2s; } .arena-tabs button:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); } .arena-tabs button.active{ background:var(--accent); color:#fff; border-color:transparent; } /* Demo session note */ .sess-note{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:.85rem; font-weight:600; color:var(--accent-ink); background:var(--accent-tint); padding:7px 15px; border-radius:100px; } .sess-note .sess-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse-ring 2s infinite; } .sess-note b{ font-variant-numeric:tabular-nums; } /* Careers */ .careers-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .job{ text-align:left; background:var(--bg-raised); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .3s, box-shadow .3s, border-color .3s; font:inherit; color:inherit; } .job:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); } .job .dept{ font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink); } .job h4{ font-size:1.12rem; margin:8px 0 6px; } .job p{ font-size:.88rem; color:var(--ink-soft); margin:0 0 14px; } .job .soon{ display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; color:#a9631f; background:#fbf1e6; padding:4px 11px; border-radius:100px; } .job .soon::before{ content:'🚀'; } @media (max-width:900px){ .careers-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .careers-grid{ grid-template-columns:1fr; } } /* Generic modal (careers) */ .modal-back{ position:fixed; inset:0; background:rgba(15,27,46,.5); display:grid; place-items:center; z-index:300; padding:20px; animation:fade-in .2s; } .modal-back[hidden]{ display:none; } .modal-card{ background:var(--bg-raised); border-radius:20px; box-shadow:var(--shadow-lg); max-width:440px; width:100%; padding:28px; text-align:center; animation:vpop .3s both; } .modal-card .dept{ font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink); } .modal-card h3{ font-size:1.4rem; margin:8px 0 12px; } .modal-card p{ font-size:.95rem; color:var(--ink-soft); margin-bottom:20px; } .modal-card .soonbig{ display:inline-flex; align-items:center; gap:8px; font-size:.85rem; font-weight:700; color:#a9631f; background:#fbf1e6; padding:8px 16px; border-radius:100px; margin-bottom:18px; } /* Footer social */ .footer-social{ display:flex; gap:10px; } .footer-social a{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--bg-tint); color:var(--ink-soft); transition:transform .2s, background .2s, color .2s; } .footer-social a:hover{ transform:translateY(-2px); background:var(--accent); color:#fff; } .footer-social svg{ width:18px; height:18px; } /* Industry chip row */ .industries{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; } .industries .chip{ background:var(--bg-raised); border:1px solid var(--line); color:var(--ink-soft); box-shadow:var(--shadow-sm); } /* Deployment tiers */ .tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .tier{ position:relative; background:var(--bg-raised); border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:var(--shadow-sm); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; overflow:hidden; } .tier:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); } .tier.feature{ border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); } .tier.feature::before{ content:''; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); } .tier .tier-icon{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:var(--accent-tint); color:var(--accent); margin-bottom:16px; } .tier .tier-icon svg{ width:24px; height:24px; } .tier h3{ font-size:1.3rem; margin-bottom:8px; } .tier .tier-kicker{ font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:10px; } .tier p{ font-size:.95rem; } .tier ul{ list-style:none; margin-top:14px; display:grid; gap:8px; } .tier li{ font-size:.9rem; color:var(--ink-soft); display:flex; gap:9px; align-items:flex-start; } .tier li::before{ content:'✓'; color:var(--accent); font-weight:800; } .tier .flag{ position:absolute; top:16px; right:16px; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--accent); color:#fff; padding:4px 10px; border-radius:100px; } /* Editions (plan columns) */ .editions{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; } /* All four editions are "highlighted" — each gets its own tier accent, top bar, elevated card, coloured badge, checks and filled CTA. */ .edition{ position:relative; overflow:hidden; display:flex; flex-direction:column; background:var(--bg-raised); --ed:var(--accent); --ed-ink:var(--accent-ink); border:1.5px solid color-mix(in srgb, var(--ed) 42%, var(--line)); border-radius:20px; padding:26px 20px 24px; box-shadow:var(--shadow-md); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .3s; } .edition::before{ content:''; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg, var(--ed), color-mix(in srgb, var(--ed) 45%, #fff)); } .edition::after{ content:''; position:absolute; inset:0 0 auto 0; height:120px; pointer-events:none; background:linear-gradient(180deg, color-mix(in srgb, var(--ed) 9%, transparent), transparent); } .edition:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--ed) 65%, var(--line)); } .ed-basic{ --ed:var(--mail); --ed-ink:var(--mail-ink); } .ed-pro{ --ed:var(--accent);--ed-ink:var(--accent-ink); } .ed-ultra{ --ed:var(--vault); --ed-ink:var(--vault-ink); } .ed-ent{ --ed:var(--diary); --ed-ink:var(--diary-ink); } .edition .ed-name{ font-size:1.25rem; font-weight:700; letter-spacing:-.01em; color:var(--ed-ink); } .edition .ed-tag{ font-size:.85rem; color:var(--ink-dim); margin:4px 0 16px; min-height:2.4em; } .edition .ed-badge{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--ed); padding:3px 10px; border-radius:100px; margin-bottom:10px; width:fit-content; box-shadow:0 4px 12px color-mix(in srgb, var(--ed) 32%, transparent); } .edition .ed-plus{ font-size:.78rem; font-weight:700; color:var(--ed-ink); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; } .edition ul{ list-style:none; display:grid; gap:9px; flex:1; margin-bottom:18px; } .edition li{ font-size:.88rem; color:var(--ink-soft); display:flex; gap:8px; align-items:flex-start; line-height:1.4; } .edition li::before{ content:'✓'; color:var(--ed); font-weight:800; flex:0 0 auto; } .edition .btn{ width:100%; justify-content:center; font-size:.92rem; padding:11px 18px; background:var(--ed); color:#fff; border-color:transparent; box-shadow:0 6px 18px color-mix(in srgb, var(--ed) 32%, transparent); } .edition .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 26px color-mix(in srgb, var(--ed) 42%, transparent); } /* Founders */ .founders{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; max-width:1000px; margin:0 auto; } .founder{ display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--bg-raised); border:1px solid var(--line); border-radius:22px; padding:30px 24px; box-shadow:var(--shadow-sm); transition:transform .35s, box-shadow .35s; } .founder:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); } .founder .avatar{ width:124px; height:124px; border-radius:50%; display:grid; place-items:center; font-size:2rem; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); overflow:hidden; margin-bottom:16px; box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 26%, transparent); border:3px solid var(--bg-raised); outline:1px solid var(--line); transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; } .founder .avatar img{ width:100%; height:100%; object-fit:cover; object-position:50% 32%; transition:transform .5s cubic-bezier(.2,.8,.2,1); } .founder:hover .avatar{ transform:translateY(-2px); box-shadow:0 14px 32px color-mix(in srgb,var(--accent) 32%, transparent); } .founder:hover .avatar img{ transform:scale(1.06); } .founder h4{ font-size:1.2rem; } .founder .role{ font-size:.82rem; font-weight:600; color:var(--accent-ink); margin:3px 0 10px; } .founder p{ font-size:.9rem; } /* Company / address block */ .company{ display:grid; grid-template-columns:1fr 1fr; gap:22px; background:var(--accent-tint); border-radius:24px; padding:clamp(1.8rem,4vw,2.6rem); align-items:center; } .company .cinfo h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-ink); margin-bottom:6px; } .company .cinfo p{ font-size:1.02rem; color:var(--ink); font-weight:500; } .company .cinfo a{ color:var(--accent-ink); font-weight:600; } @media (max-width:920px){ .tiers{ grid-template-columns:1fr; } .editions{ grid-template-columns:1fr 1fr; } .company{ grid-template-columns:1fr; } } @media (max-width:520px){ .editions{ grid-template-columns:1fr; } } /* ══════════ Walkthrough (animated explainer + gen-z mascot "Ticky") ══════════ */ .walkthrough{ display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:center; } .wt-stage{ position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--line); background:var(--bg-raised); min-height:340px; } .wt-topbar{ display:flex; align-items:center; gap:7px; padding:11px 15px; background:#0f1b2e; } .wt-topbar .d{ width:11px; height:11px; border-radius:50%; } .wt-topbar .lab{ margin-left:8px; font-size:12px; color:#9fb0c9; } .wt-topbar .play{ margin-left:auto; background:rgba(255,255,255,.1); border:0; color:#cdd8e8; font:inherit; font-size:12px; padding:4px 11px; border-radius:7px; cursor:pointer; } .wt-screen{ position:relative; height:300px; } .wt-scene{ position:absolute; inset:0; padding:26px; display:flex; flex-direction:column; justify-content:center; gap:14px; opacity:0; transform:translateY(14px) scale(.98); transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); pointer-events:none; } .wt-scene.on{ opacity:1; transform:none; } .wt-step{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-tint); padding:5px 12px; border-radius:100px; } .wt-scene h4{ font-size:1.5rem; letter-spacing:-.02em; } .wt-scene .viz{ margin-top:4px; } .wt-caption{ font-size:.95rem; color:var(--ink-soft); } .wt-dots{ display:flex; gap:7px; position:absolute; bottom:14px; left:26px; } .wt-dots i{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:width .3s, background .3s; } .wt-dots i.on{ width:22px; background:var(--accent); } /* mascot side */ .wt-buddy{ text-align:center; } .wt-bubble{ position:relative; display:inline-block; background:var(--bg-raised); border:1px solid var(--line); border-radius:18px 18px 18px 4px; padding:14px 18px; box-shadow:var(--shadow-md); font-size:1.02rem; font-weight:600; color:var(--ink); max-width:300px; margin-bottom:14px; min-height:3.2em; display:flex; align-items:center; } .wt-bubble .txt{ transition:opacity .35s; } .mascot{ width:150px; height:150px; margin:0 auto; display:block; animation:bob 3.2s ease-in-out infinite; } .mascot .eye{ transform-origin:center; animation:blink 4.5s infinite; } .mascot .arm{ transform-origin:70% 30%; animation:wave 3.2s ease-in-out infinite; } @keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-1deg);} 50%{ transform:translateY(-9px) rotate(1deg);} } @keyframes blink{ 0%,92%,100%{ transform:scaleY(1);} 96%{ transform:scaleY(.1);} } @keyframes wave{ 0%,60%,100%{ transform:rotate(0);} 70%,90%{ transform:rotate(18deg);} 80%{ transform:rotate(4deg);} } .wt-buddy .name{ font-size:.8rem; color:var(--ink-dim); margin-top:6px; } .wt-buddy .name b{ color:var(--accent-ink); } /* scene mini-vizations */ .vzrow{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line-soft); border-radius:12px; padding:11px 14px; box-shadow:var(--shadow-sm); } .vzrow .ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:0 0 30px; } .vzrow .bar{ height:8px; border-radius:5px; background:var(--bg-tint); flex:1; overflow:hidden; } .vzrow .bar > i{ display:block; height:100%; background:var(--accent); border-radius:5px; animation:fill 1.6s ease forwards; } @keyframes fill{ from{ width:0 } to{ width:var(--w,80%) } } .vzbig{ font-size:2.4rem; font-weight:800; letter-spacing:-.03em; color:var(--accent-ink); } .vzpulse{ animation:vpulse 1.4s ease-in-out infinite; } @keyframes vpulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.06); opacity:.85 } } .vzpop{ animation:vpop .5s cubic-bezier(.2,1.4,.4,1) both; } @keyframes vpop{ from{ transform:scale(.5); opacity:0 } to{ transform:scale(1); opacity:1 } } .vzcount{ font-variant-numeric:tabular-nums; } @media (max-width:820px){ .walkthrough{ grid-template-columns:1fr; } .wt-buddy{ order:-1; } .mascot{ width:110px; height:110px; } .wt-bubble{ max-width:88%; } } /* ══════════ Mobile refinements ══════════ */ @media (max-width:640px){ .container{ padding:0 18px; } .section{ padding: clamp(3rem,10vw,4.5rem) 0; } h1{ font-size: clamp(2.05rem,8.5vw,3rem); line-height:1.12; } h2{ font-size: clamp(1.55rem,6.5vw,2.2rem); } .lead{ font-size:1rem; } .hero{ padding-top: clamp(2rem,7vw,3rem); } .hero-actions{ flex-direction:column; align-items:stretch; } .hero-actions .btn{ width:100%; justify-content:center; } .nav{ padding:12px 18px; } .nav-logo span{ font-size:1rem; } .cta{ padding: clamp(2.2rem,8vw,3.2rem) 18px; border-radius:24px; } .cta-actions{ flex-direction:column; } .cta-actions .btn{ width:100%; justify-content:center; } .arena-tabs button{ padding:9px 15px; font-size:.88rem; } .fgroup-title h3{ font-size:1.15rem; } .founder{ padding:24px 18px; } .company{ padding:24px 20px; border-radius:20px; } .wt-scene h4{ font-size:1.25rem; } .wt-scene{ padding:20px; } .wt-screen{ height:340px; } .demo-frame, .wt-stage{ border-radius:16px; } .cluster-copy h3{ font-size:1.45rem; } .eyebrow{ font-size:.72rem; } } @media (max-width:380px){ .arena-tabs{ gap:6px; } .arena-tabs button{ padding:8px 12px; font-size:.82rem; } .editions{ gap:12px; } } /* ================= Interactive motion: pointer 3D tilt + hero 3D scene ================= */ .tilt{ will-change:transform; } .tilt.tilting{ transition:transform .1s ease-out; } .tilt-glare{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; z-index:3; background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.5), transparent 60%); mix-blend-mode:soft-light; transition:opacity .3s; } .tilt.tilting .tilt-glare{ opacity:1; } .hero-3d{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; perspective:1100px; } .hero-3d .layer{ position:absolute; inset:0; will-change:transform; transition:transform .55s cubic-bezier(.2,.8,.2,1); } .orb{ position:absolute; border-radius:50%; background:radial-gradient(circle at 32% 28%, #fff, color-mix(in srgb,var(--accent) 26%,#fff) 46%, color-mix(in srgb,var(--accent) 52%,#fff)); box-shadow:0 22px 55px color-mix(in srgb,var(--accent) 28%, transparent); opacity:.5; animation:orb-float 14s ease-in-out infinite; } .orb.o1{ width:110px; height:110px; right:9%; top:16%; } .orb.o2{ width:56px; height:56px; right:30%; top:52%; animation-delay:-6s; background:radial-gradient(circle at 32% 28%,#fff,color-mix(in srgb,var(--accent-2) 38%,#fff) 55%); } .orb.o3{ width:32px; height:32px; right:40%; top:10%; animation-delay:-9s; opacity:.45; } @keyframes orb-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-24px) } } .cube-wrap{ position:absolute; right:7%; top:22%; width:124px; height:124px; perspective:820px; opacity:.9; } .cube{ position:relative; width:100%; height:100%; transform-style:preserve-3d; animation:cube-spin 24s linear infinite; } .cube .face{ position:absolute; inset:0; border:1px solid color-mix(in srgb,var(--accent) 42%,transparent); border-radius:16px; background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 15%,#fff), color-mix(in srgb,var(--accent-2) 11%,#fff)); box-shadow:inset 0 0 34px color-mix(in srgb,var(--accent) 12%,transparent); } .cube .f1{ transform:translateZ(62px) } .cube .f2{ transform:rotateY(180deg) translateZ(62px) } .cube .f3{ transform:rotateY(90deg) translateZ(62px) } .cube .f4{ transform:rotateY(-90deg) translateZ(62px) } .cube .f5{ transform:rotateX(90deg) translateZ(62px) } .cube .f6{ transform:rotateX(-90deg) translateZ(62px) } @keyframes cube-spin{ from{ transform:rotateX(-24deg) rotateY(0) } to{ transform:rotateX(-24deg) rotateY(360deg) } } @media (max-width:900px){ .hero-3d{ display:none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; } .hero-mesh span { animation: none !important; } .wt-scene{ transition:none; } .mascot, .mascot .eye, .mascot .arm { animation:none !important; } .orb, .cube { animation:none !important; } .hero-3d .layer{ transition:none !important; } .tilt{ transform:none !important; } .tilt.tilting .tilt-glare{ opacity:0 !important; } @view-transition { navigation: none; } }