/* ========================================================================== Visioina — one stylesheet, two themes. The light "studio" theme is the default (home, practice, articles, contact). App pages add class="theme-space" to , which swaps the colour variables for the dark space palette the apps are drawn in. Every component below is written against the variables, so both themes come out of the same markup. Palette comes from the app itself: petrol #114E5E is the App Store screenshot background, mint #66EBC7 is the colour Otus is drawn in. ========================================================================== */ :root { /* brand constants — identical in both themes */ --petrol: #114E5E; --petrol-deep: #0A3542; --mint: #66EBC7; --stardust: #FFD14A; --flame: #FF7333; /* light theme (default) */ --bg: #FFFFFF; --bg-alt: #F4F7F8; --bg-page: #FFFFFF; --surface: #FFFFFF; --surface-alt: #F4F7F8; --ink: #0E1A1F; --muted: #4A5C63; --accent: #114E5E; --accent-ink: #FFFFFF; --border: rgba(17, 78, 94, 0.14); --border-soft: rgba(17, 78, 94, 0.08); --shadow: 0 1px 2px rgba(14, 26, 31, .04), 0 8px 28px rgba(14, 26, 31, .06); --shadow-lg: 0 2px 4px rgba(14, 26, 31, .05), 0 24px 60px rgba(14, 26, 31, .10); --font-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif; --wide: 1080px; --prose: 700px; --radius: 18px; } /* dark space theme — app pages */ body.theme-space { --bg: #050719; --bg-alt: #0B0D28; --bg-page: transparent; --surface: rgba(255, 255, 255, 0.06); --surface-alt: rgba(255, 255, 255, 0.04); --ink: #F2F2F7; --muted: rgba(242, 242, 247, 0.62); --accent: #66EBC7; --accent-ink: #04121C; --border: rgba(255, 255, 255, 0.12); --border-soft: rgba(255, 255, 255, 0.07); --shadow: none; --shadow-lg: 0 24px 60px rgba(0, 0, 0, .45); background: linear-gradient(180deg, #050719 0%, #10123A 55%, #17123D 100%); background-attachment: fixed; } /* --------------------------------------------------------------- base ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.65; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover { text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-round); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; } h1 { font-size: clamp(2rem, 5vw, 3rem); } h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); } h3 { font-size: 1.12rem; letter-spacing: -0.01em; } p, li { text-wrap: pretty; } ::selection { background: var(--mint); color: #04121C; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; left: -9999px; background: var(--accent); color: var(--accent-ink); padding: 10px 18px; border-radius: 0 0 10px 0; z-index: 100; font-weight: 600; } .skip-link:focus { left: 0; top: 0; } /* ------------------------------------------------------------ layout ---- */ .wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 22px; } .prose { width: 100%; max-width: var(--prose); margin-inline: auto; padding-inline: 22px; } main { flex: 1 0 auto; } section.band { padding: clamp(56px, 9vw, 96px) 0; } section.band.tint { background: var(--bg-alt); } body.theme-space section.band.tint { background: rgba(255, 255, 255, 0.03); } .eyebrow { font-family: var(--font-round); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .lede { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--muted); max-width: 62ch; } /* ------------------------------------------------------------ header ---- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border-soft); } body.theme-space .site-header { background: rgba(5, 7, 25, 0.72); } .site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 66px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-round); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; margin-right: auto; } .brand svg, .brand img { width: 28px; height: 28px; flex: none; } .brand .sub { font-weight: 500; font-size: .82rem; color: var(--muted); border-left: 1px solid var(--border); padding-left: 10px; margin-left: 2px; } .site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .site-nav a { font-family: var(--font-round); font-size: .92rem; font-weight: 600; color: var(--muted); text-decoration: none; padding: 7px 11px; border-radius: 9px; } .site-nav a:hover { color: var(--ink); background: var(--surface-alt); } body.theme-space .site-nav a:hover { background: rgba(255,255,255,.08); } .site-nav a[aria-current="page"] { color: var(--accent); } /* ------------------------------------------------------------ buttons --- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-round); font-weight: 700; font-size: .98rem; padding: 13px 24px; border-radius: 13px; text-decoration: none; border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); } .btn-primary:hover { box-shadow: var(--shadow-lg); } body.theme-space .btn-primary { box-shadow: 0 8px 30px rgba(102,235,199,.30); } .btn-ghost { border-color: var(--border); color: var(--ink); background: var(--surface); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-quiet { background: var(--surface-alt); color: var(--muted); border-color: var(--border-soft); cursor: default; } .btn-quiet:hover { transform: none; } .btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; } /* --------------------------------------------------------------- hero --- */ .hero { padding: clamp(60px, 10vw, 120px) 0 clamp(40px, 6vw, 72px); } .hero-mark { width: 62px; height: 62px; margin-bottom: 26px; } .hero h1 { font-size: clamp(2.3rem, 6.2vw, 3.9rem); max-width: 16ch; } .hero h1 .accent { color: var(--accent); } .hero .lede { margin-top: 20px; font-size: clamp(1.08rem, 2.2vw, 1.3rem); } /* -------------------------------------------------------------- cards --- */ .grid { display: grid; gap: 18px; } /* auto-fill, not auto-fit: a single app keeps a card-sized card instead of stretching across the whole page */ .grid-2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; } .card h3 { margin-bottom: 2px; } .card p { color: var(--muted); font-size: .95rem; } .card .card-icon { font-size: 1.6rem; line-height: 1; margin-bottom: 6px; } .card-link { text-decoration: none; color: inherit; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); } .card .more { margin-top: auto; padding-top: 12px; font-family: var(--font-round); font-weight: 700; font-size: .92rem; color: var(--accent); } /* ------------------------------------------------- featured app block --- */ .feature-app { display: grid; gap: clamp(28px, 5vw, 56px); grid-template-columns: 1.05fr .95fr; align-items: center; background: linear-gradient(150deg, var(--petrol-deep), #0d2c3a 45%, #102341); border-radius: 26px; padding: clamp(30px, 5vw, 56px); color: #F2F2F7; overflow: hidden; position: relative; } .feature-app::after { content: ""; position: absolute; inset: auto -10% -55% auto; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(102,235,199,.20), transparent 68%); pointer-events: none; } .feature-app h2 { color: #FFF; } .feature-app p { color: rgba(242,242,247,.76); margin-top: 12px; } .feature-app .eyebrow { color: var(--mint); } .feature-app .app-id { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .feature-app .app-id img { width: 58px; height: 58px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.35); } .feature-app .app-id .name { font-family: var(--font-round); font-weight: 700; font-size: 1.3rem; } .feature-app .app-id .tag { color: var(--mint); font-size: .9rem; } .feature-app .btn-primary { background: var(--mint); color: #04121C; } .feature-app .shot { position: relative; z-index: 1; justify-self: center; max-width: 260px; filter: drop-shadow(0 26px 50px rgba(0,0,0,.5)); border-radius: 20px; } @media (max-width: 760px) { .feature-app { grid-template-columns: 1fr; } .feature-app .shot { max-width: 210px; } } /* ----------------------------------------------------------- articles --- */ .article-list { display: flex; flex-direction: column; gap: 2px; } .article-item { display: block; text-decoration: none; color: inherit; padding: 22px 0; border-bottom: 1px solid var(--border-soft); } .article-item:first-child { border-top: 1px solid var(--border-soft); } .article-item:hover h3 { color: var(--accent); } .article-item .meta { font-size: .82rem; color: var(--muted); letter-spacing: .02em; } .article-item h3 { margin: 5px 0 6px; } .article-item p { color: var(--muted); font-size: .95rem; max-width: 68ch; } .article-head { padding: clamp(44px, 7vw, 76px) 0 8px; } .article-head .meta { color: var(--muted); font-size: .88rem; margin-bottom: 14px; } .article-head h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); } .article-body { padding-bottom: 40px; font-size: 1.05rem; } .article-body > * + * { margin-top: 1.15em; } .article-body h2 { margin-top: 2.2em; font-size: 1.35rem; } .article-body h3 { margin-top: 1.8em; } .article-body ul, .article-body ol { padding-left: 1.4em; } .article-body li + li { margin-top: .4em; } .article-body blockquote { border-left: 3px solid var(--accent); padding-left: 18px; color: var(--muted); font-style: italic; } .article-body img { border-radius: 14px; margin-block: 1.6em; } .disclaimer { margin-top: 48px; padding: 20px 22px; background: var(--bg-alt); border: 1px solid var(--border-soft); border-radius: 14px; font-size: .88rem; color: var(--muted); line-height: 1.6; } .disclaimer strong { color: var(--ink); } .back-link { display: inline-block; margin-top: 40px; font-family: var(--font-round); font-weight: 600; font-size: .92rem; text-decoration: none; } /* --------------------------------------------------------- app pages --- */ .app-hero { text-align: center; padding: clamp(48px, 8vw, 88px) 0 clamp(28px, 4vw, 48px); } .app-hero .icon { width: 88px; height: 88px; border-radius: 21px; margin: 0 auto 18px; box-shadow: 0 14px 40px rgba(0,0,0,.45); } .app-hero .mascot { width: 168px; margin: 0 auto 4px; } .app-hero h1 { font-size: clamp(2.4rem, 7vw, 3.4rem); margin-inline: auto; } .app-hero .tagline { color: var(--mint); font-family: var(--font-round); font-size: clamp(1.1rem, 2.6vw, 1.35rem); font-weight: 700; margin-top: 8px; } .app-hero .lede { margin: 16px auto 0; text-align: center; } .app-hero .btn-row { justify-content: center; } /* horizontal screenshot rail */ .shots { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 22px 26px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .shots img { width: 236px; flex: none; scroll-snap-align: center; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 18px 44px rgba(0,0,0,.42); } @media (max-width: 560px) { .shots img { width: 190px; } } .tier-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .tier { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; } .tier.free { border-color: rgba(102,235,199,.45); } .tier.pro { border-color: rgba(255,209,74,.45); } .tier h3 { display: flex; align-items: center; gap: 8px; } .tier p, .tier li { color: var(--muted); font-size: .95rem; } .tier ul { padding-left: 1.15em; margin-top: 10px; } .tier li + li { margin-top: .35em; } .tier .price { font-family: var(--font-round); font-weight: 700; color: var(--ink); margin-top: 14px; font-size: .95rem; } .applinks { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; padding-top: 8px; } .applinks a { font-family: var(--font-round); font-weight: 600; font-size: .93rem; text-decoration: none; } .applinks a:hover { text-decoration: underline; } /* app legal/support docs: same dark shell, prose width */ .doc { padding: clamp(40px, 6vw, 70px) 0 30px; } .doc h1 { font-size: clamp(1.9rem, 4.4vw, 2.5rem); } .doc .updated { color: var(--muted); font-size: .88rem; margin-top: 10px; } .doc-body { font-size: 1rem; } .doc-body > * + * { margin-top: 1.1em; } .doc-body h2 { color: var(--accent); font-size: 1.22rem; margin-top: 2.1em; } .doc-body h3 { margin-top: 1.7em; font-size: 1.02rem; } .doc-body p, .doc-body li { color: var(--muted); } .doc-body strong, .doc-body em { color: var(--ink); } .doc-body ul, .doc-body ol { padding-left: 1.4em; } .doc-body li + li { margin-top: .35em; } /* ------------------------------------------------------------ contact --- */ .contact-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; background: var(--bg-alt); border: 1px solid var(--border-soft); border-radius: 22px; padding: 30px clamp(24px, 4vw, 40px); } .contact-strip h2 { flex: 1 1 260px; } .contact-strip .btn { flex: none; } .detail-list { display: grid; gap: 14px; margin-top: 26px; } .detail-list div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: baseline; } .detail-list dt, .detail-list .k { font-family: var(--font-round); font-weight: 700; font-size: .88rem; color: var(--muted); letter-spacing: .02em; } @media (max-width: 520px) { .detail-list div { grid-template-columns: 1fr; gap: 2px; } } /* ------------------------------------------------------------- footer --- */ .site-footer { flex: none; margin-top: clamp(60px, 8vw, 100px); border-top: 1px solid var(--border-soft); padding: 38px 0 46px; font-size: .88rem; color: var(--muted); } body.theme-space .site-footer { background: rgba(0,0,0,.22); } .site-footer .wrap { display: grid; gap: 30px 22px; grid-template-columns: 1.6fr 1fr 1fr; } @media (max-width: 700px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } } @media (max-width: 420px) { .site-footer .wrap { grid-template-columns: 1fr; } } .site-footer .legal { line-height: 1.75; } .site-footer .legal strong { color: var(--ink); font-family: var(--font-round); } .site-footer nav { display: flex; flex-direction: column; gap: 7px; align-items: start; } .site-footer .col-head { font-family: var(--font-round); font-weight: 700; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); opacity: .55; margin-bottom: 3px; } .site-footer a { color: var(--muted); text-decoration: none; } .site-footer a:hover { color: var(--accent); text-decoration: underline; } /* --------------------------------------------------------------- misc --- */ .notice { border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--bg-alt); border-radius: 12px; padding: 18px 20px; font-size: .95rem; color: var(--muted); } .notice strong { color: var(--ink); } .pill { display: inline-block; font-family: var(--font-round); font-weight: 700; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--surface-alt); color: var(--muted); border: 1px solid var(--border-soft); } .center { text-align: center; } .stack > * + * { margin-top: 18px; } .section-head { margin-bottom: 34px; } .section-head p { color: var(--muted); max-width: 60ch; margin-top: 8px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }