/* ========================================================================= alanen.app landing page Uses the SAME design system as Mira / Cuoco / Codex: - Colours are space-separated RGB channels consumed via rgb(var(--x) / a), matching the apps' tokens (see each app's globals.css). - Typeface: Manrope (loaded in index.html), the shared --font. - Dark mode is class-based (.dark on ), like the apps. - Neutrals (linen bg, paper surface, warm ink, slate accent) are shared; the three panels are tinted with the palette's own hues — slate (primary), teal and gold (secondaries) — so the page reads as one family. ========================================================================= */ /* Self-hosted Manrope (variable weight axis 200–800), same typeface as the apps. Files live in www/fonts/; paths are relative to this stylesheet. */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* shared neutral tokens (light) */ --bg: 246 242 235; --surface: 255 255 255; --surface-2: 250 247 241; --ink: 35 33 30; --muted: 124 118 108; --line: 232 227 217; --accent: 85 110 142; /* slate blue — default accent (header, links) */ --tile: 255 255 255; /* Mira's layered-card logomark neutrals (from the shared brand palette) */ --lm-back: #dee3eb; --lm-mid: #f5f0e8; --lm-detail: #ffffff; /* shared elevation */ --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.06); --shadow-float: 0 4px 12px rgb(0 0 0 / 0.08), 0 12px 40px rgb(0 0 0 / 0.12); --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .dark { --bg: 24 23 20; --surface: 35 34 31; --surface-2: 30 29 26; --ink: 236 232 224; --muted: 154 147 134; --line: 52 50 46; --accent: 85 110 142; --tile: 44 43 39; --lm-back: #46506a; --lm-mid: #5b6680; --lm-detail: #eef2fb; --shadow-card: 0 1px 2px rgb(0 0 0 / 0.30), 0 4px 16px rgb(0 0 0 / 0.40); --shadow-float: 0 4px 12px rgb(0 0 0 / 0.35), 0 16px 44px rgb(0 0 0 / 0.55); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font); color: rgb(var(--ink)); background: radial-gradient(1100px 480px at 50% -8%, rgb(var(--accent) / 0.08), transparent 70%), rgb(var(--bg)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .3s ease, color .3s ease; } /* ---------------- header ---------------- */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(18px, 5vw, 48px); } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: rgb(var(--ink)); text-decoration: none; } .brand__mark { display: block; flex-shrink: 0; } .brand__tld { color: rgb(var(--muted)); font-weight: 700; } .theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); color: rgb(var(--ink)); cursor: pointer; box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .2s ease, background-color .3s ease; } .theme-toggle:hover { transform: translateY(-1px); box-shadow: var(--shadow-float); } .icon-moon { display: none; } .dark .icon-sun { display: none; } .dark .icon-moon { display: block; } .header-actions { display: flex; align-items: center; gap: 10px; } .lang { display: inline-flex; border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-card); } .lang__btn { padding: 7px 11px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: rgb(var(--muted)); background: transparent; border: 0; cursor: pointer; transition: background-color .2s ease, color .2s ease; } .lang__btn + .lang__btn { border-left: 1px solid rgb(var(--line)); } .lang__btn:hover { color: rgb(var(--ink)); } .lang__btn[aria-pressed="true"] { background: rgb(var(--accent)); color: #fff; } /* ---------------- hero ---------------- */ .hero { text-align: center; padding: clamp(24px, 6vw, 56px) 20px clamp(20px, 4vw, 36px); max-width: 720px; margin: 0 auto; } .hero h1 { margin: 0 0 14px; font-size: clamp(30px, 6vw, 52px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; } .hero p { margin: 0 auto; max-width: 46ch; font-size: clamp(15px, 2.2vw, 18px); line-height: 1.55; color: rgb(var(--muted)); } .hero strong { color: rgb(var(--ink)); font-weight: 700; } /* ---------------- panels (one continuous band, three tinted regions) ---- */ .panels { display: grid; grid-template-columns: repeat(4, 1fr); /* four apps per row → wraps to a tidy 2×4 */ width: min(1180px, calc(100% - clamp(32px, 8vw, 80px))); margin: clamp(18px, 4vw, 40px) auto clamp(28px, 5vw, 56px); border-radius: 20px; background: rgb(var(--surface)); box-shadow: var(--shadow-card); overflow: hidden; /* rounds the outer corners */ } /* Alphabetical display order (keeps the DOM/original card markup untouched). */ .panel[data-app="cifra"] { order: 1; } .panel[data-app="codex"] { order: 2; } .panel[data-app="cuoco"] { order: 3; } .panel[data-app="facio"] { order: 4; } .panel[data-app="folio"] { order: 5; } .panel[data-app="mira"] { order: 6; } .panel[data-app="orbis"] { order: 7; } .panel[data-app="verba"] { order: 8; } .panel { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 3vw, 44px) clamp(22px, 2.4vw, 34px); text-decoration: none; color: inherit; isolation: isolate; opacity: 0; animation: fade-in .5s ease forwards; } .panel:nth-child(1) { animation-delay: .05s; } .panel:nth-child(2) { animation-delay: .13s; } .panel:nth-child(3) { animation-delay: .21s; } @keyframes fade-in { to { opacity: 1; } } /* Slanted tint band. Internal panels use inset:0 so neighbours meet on an exact diagonal seam (equal skew ⇒ shared edge, no gap, no overlap); the first/last panels overhang outward to fill the container's corner triangles. Because there is no internal overlap, translucent rgb(var(--accent)/a) tints don't double. */ .panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgb(var(--accent) / 0.09), rgb(var(--accent) / 0.17)); transition: filter .25s ease; } .dark .panel::before { background: linear-gradient(160deg, rgb(var(--accent) / 0.20), rgb(var(--accent) / 0.30)); } .panel:hover::before { filter: brightness(1.06); } .panel:focus-visible { outline: 3px solid rgb(var(--accent)); outline-offset: -4px; } .panel__body { display: flex; flex-direction: column; } /* icon tile */ .tile { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 18px; background: rgb(var(--tile)); box-shadow: var(--shadow-card); margin-bottom: 22px; } /* logomark colourisation (per-panel via --accent) */ .lm .lm-front { fill: rgb(var(--accent)); } .lm .lm-detail { fill: var(--lm-detail); } .lm .lm-back { fill: var(--lm-back); } .lm .lm-mid { fill: var(--lm-mid); } .panel__name { margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.02em; } .panel__rule { display: block; width: 34px; height: 4px; border-radius: 999px; background: rgb(var(--accent)); margin: 12px 0 16px; } .panel__desc { margin: 0; font-size: 15px; line-height: 1.6; color: rgb(var(--muted)); max-width: 34ch; } .panel__foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgb(var(--line)); /* Stack the "Open" link and the badge so every card is identical, regardless of app-name / label width (an inline row wrapped only on some cards). */ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .panel__open { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; color: rgb(var(--accent)); } /* "Invitation only" pill — shown by app.js when the identity policy marks the app invitation-only. Tinted with the panel's own accent. */ .panel__badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; color: rgb(var(--accent)); background: rgb(var(--accent) / 0.12); white-space: nowrap; } .panel__badge[hidden] { display: none; } .panel__badge svg { display: block; } .panel__open svg { transition: transform .2s ease; } .panel:hover .panel__open svg { transform: translate(2px, -2px); } /* ---------------- footer ---------------- */ .site-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 22px 20px 34px; font-size: 13px; color: rgb(var(--muted)); } .site-footer__sep { opacity: .5; } /* ---------------- responsive ---------------- */ /* Two per row on medium screens before stacking on phones. */ @media (max-width: 1024px) { .panels { grid-template-columns: repeat(2, 1fr); } } /* Phones: stack into separate cards. */ @media (max-width: 760px) { .panels { grid-template-columns: 1fr; gap: 16px; overflow: visible; background: none; box-shadow: none; border-radius: 0; } .panel::before, .panel:first-child::before, .panel:last-child::before { inset: 0; /* each stacked panel is its own card */ transform: none; /* straight edges, not slanted */ border-radius: 20px; box-shadow: var(--shadow-card); } .panel__desc { max-width: none; } } @media (prefers-reduced-motion: reduce) { .panel { animation: none; opacity: 1; } * { transition: none !important; } }