/* ========================================================= Hylki — hylki.hyprlab.co Bright, cheery, GNOME/Adwaita-flavored landing page. Palette: amber icon (yellow) set against complementary purple + blue so the icon pops. ========================================================= */ /* --------------------------------------------------------- Cantarell — GNOME's actual UI font, the official variable release from cantarell.gnome.org (cantarell-fonts 0.311), NOT the stale Google Fonts fork. Subset to Latin and served as a single variable woff2 (weight axis 100–800). Copyright the Cantarell Authors, SIL Open Font License 1.1 (see fonts/cantarell/OFL.txt). No local() on purpose: on Linux, browsers resolve local() through fontconfig, which substitutes a fallback for an unknown family and reports a false match, so the embed would never load. The ?v= suffix busts any stale cache entries. --------------------------------------------------------- */ @font-face { font-family: "Cantarell"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("fonts/cantarell/cantarell-vf-latin.woff2?v=2") format("woff2"); } :root { /* Brand / accents */ --hylki-yellow: #f6b40a; /* the app icon's amber */ --hylki-yellow-d: #e09e00; --purple: #004eff; /* primary accent (links, buttons, focus) */ --purple-d: #003ad1; --blue: #3584e4; /* GNOME blue */ --blue-d: #1c71d8; --green: #2ec27e; /* GNOME green */ --teal: #00b0b5; --pink: #e56db1; /* Surfaces */ --bg: #ffffff; /* clean white base */ --bg-tint: #eef3ff; /* faint blue wash for alternating sections */ --surface: #ffffff; --ink: #241a34; /* deep plum-charcoal */ --ink-soft: #5b5170; --line: #e2e9fb; --tint-strong: #f2f4f6; /* footer + tinted sections */ /* Two soft blobs (brand blue, icon gold) on a transparent ground, so the hero dissolves into the page rather than sitting on its own slab. */ --hero-bg: radial-gradient(ellipse 48% 420px at 16% 60px, rgba(0, 78, 255, .15), transparent 66%), radial-gradient(ellipse 42% 400px at 86% 140px, rgba(246, 180, 10, .18), transparent 66%); --band-bg: #004eff; /* the royal blue the hero wore until 1.23 */ --code-bg: #241a34; --code-fg: #f4eefc; --backdrop: rgba(36, 26, 52, .55); --ghost-bg: #ffffff; --ghost-border: rgba(36,26,52,.16); --ghost-border-hover: rgba(36,26,52,.3); --status-ok-fg: #12704a; --status-warn-fg:#855800; --ink-inverse: #ffffff; /* text on an ink-coloured surface */ color-scheme: light; --radius: 18px; --radius-lg: 26px; --shadow-sm: 0 1px 2px rgba(36,26,52,.06), 0 3px 10px rgba(36,26,52,.05); --shadow-md: 0 10px 30px rgba(74,45,120,.10), 0 2px 8px rgba(36,26,52,.05); --shadow-lg: 0 24px 60px rgba(74,45,120,.18); --maxw: 1120px; --font: "Cantarell"; } /* Theme. A stored choice (data-theme on , set by the toggle in the header) wins; without one the OS preference applies. The tokens are listed twice so the OS path still works with scripts off. */ :root[data-theme="dark"] { /* Dark: shades of deep blue and purple, never neutral grey. Accents are lifted a step so links and buttons keep their contrast on the dark ground. */ --purple: #7d97ff; --purple-d: #6a86f5; --blue: #5c9ff0; --blue-d: #4a8de3; --bg: #0d0b1f; --bg-tint: #15123a; --surface: #171440; --ink: #ece8ff; --ink-soft: #b1a9d8; --line: #2b2660; --tint-strong: #0f0d2a; --hero-bg: radial-gradient(ellipse 48% 420px at 16% 60px, rgba(125, 151, 255, .22), transparent 66%), radial-gradient(ellipse 42% 400px at 86% 140px, rgba(246, 180, 10, .12), transparent 66%); --band-bg: linear-gradient(160deg, #1b2b8f, #0b3fbe); /* blue end to end, like the light mode band */ --code-bg: #07061a; --code-fg: #e8e2ff; --backdrop: rgba(4, 3, 14, .7); --ghost-bg: var(--surface); --ghost-border: rgba(255,255,255,.14); --ghost-border-hover: rgba(255,255,255,.3); --status-ok-fg: #7fe0b2; --status-warn-fg:#ffd36b; --ink-inverse: #0d0b1f; --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.3); --shadow-md: 0 10px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3); --shadow-lg: 0 24px 60px rgba(0,0,0,.6); color-scheme: dark; } :root[data-theme="dark"] .hero__rename { background: rgba(125,151,255,.14) !important; } :root[data-theme="dark"] .card__icon--yellow svg { fill: #3a2b00; } :root[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: none; } :root[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Dark: shades of deep blue and purple, never neutral grey. Accents are lifted a step so links and buttons keep their contrast on the dark ground. */ --purple: #7d97ff; --purple-d: #6a86f5; --blue: #5c9ff0; --blue-d: #4a8de3; --bg: #0d0b1f; --bg-tint: #15123a; --surface: #171440; --ink: #ece8ff; --ink-soft: #b1a9d8; --line: #2b2660; --tint-strong: #0f0d2a; --hero-bg: radial-gradient(ellipse 48% 420px at 16% 60px, rgba(125, 151, 255, .22), transparent 66%), radial-gradient(ellipse 42% 400px at 86% 140px, rgba(246, 180, 10, .12), transparent 66%); --band-bg: linear-gradient(160deg, #1b2b8f, #0b3fbe); /* blue end to end, like the light mode band */ --code-bg: #07061a; --code-fg: #e8e2ff; --backdrop: rgba(4, 3, 14, .7); --ghost-bg: var(--surface); --ghost-border: rgba(255,255,255,.14); --ghost-border-hover: rgba(255,255,255,.3); --status-ok-fg: #7fe0b2; --status-warn-fg:#ffd36b; --ink-inverse: #0d0b1f; --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.3); --shadow-md: 0 10px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3); --shadow-lg: 0 24px 60px rgba(0,0,0,.6); color-scheme: dark; } :root:not([data-theme="light"]) .hero__rename { background: rgba(125,151,255,.14) !important; } :root:not([data-theme="light"]) .card__icon--yellow svg { fill: #3a2b00; } :root:not([data-theme="light"]) .theme-toggle .theme-toggle__sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .theme-toggle__moon { display: block; } } /* Header day/night toggle. */ .theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-right: 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; } .theme-toggle:hover { color: var(--purple); border-color: color-mix(in srgb, var(--purple) 30%, var(--line)); } .theme-toggle svg { width: 20px; height: 20px; fill: currentColor; display: block; } .theme-toggle .theme-toggle__moon { display: none; } /* ----------------------------- base ----------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--purple); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; } .eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--purple); margin: 0 0 14px; } .eyebrow--light { color: rgba(255,255,255,.9); } /* ----------------------------- buttons -------------------------- */ .btn { --btn-bg: var(--purple); --btn-fg: #fff; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1; color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid transparent; box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; white-space: nowrap; cursor: pointer; } .btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); } .btn--sm { padding: 10px 18px; font-size: .92rem; } .btn--primary { --btn-bg: linear-gradient(180deg, #ffc21f, var(--hylki-yellow)); --btn-fg: #3a2b00; border-color: rgba(0,0,0,.06); } .btn--primary:hover { --btn-bg: linear-gradient(180deg, #ffca3d, #ffb700); } .btn--ghost { --btn-bg: var(--surface); --btn-fg: var(--ink); border-color: var(--line); } .btn--ghost:hover { --btn-bg: var(--bg-tint); } .btn--dark { --btn-bg: var(--ink); --btn-fg: var(--ink-inverse); } /* Buy Me a Coffee brand yellow. */ .btn--coffee { --btn-bg: #ffdd00; --btn-fg: #23211c; border-color: rgba(0,0,0,.08); } .btn--coffee:hover { --btn-bg: #ffe74d; } /* Discord brand blurple. */ .btn--discord { --btn-bg: #5865f2; --btn-fg: #fff; border-color: rgba(0,0,0,.06); } .btn--discord:hover { --btn-bg: #6a75f3; } .btn__icon { width: 20px; height: 20px; fill: currentColor; } /* ------------------------------ nav ----------------------------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); } .nav__inner { display: flex; align-items: center; gap: 20px; height: 92px; } .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); } .brand:hover { text-decoration: none; } /* Transparent PNG — shown as-is, no shadow, background, or rounding. */ .brand__icon { display: block; height: auto; } .brand__name { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; } .footer .brand__wordmark { width: 100px; height: auto; } .brand__wordmark { display: block; width: 48px; height: auto; } /* Header shows the wordmark alone, a little larger (footer keeps icon + name). */ /* Sized by height: the dark-mode wordmark is the lettering alone, a different aspect, so a shared height keeps the two the same size. */ .nav .brand__wordmark { height: 40px; width: auto; } .nav__links { display: flex; gap: 26px; margin-left: auto; } .nav__links a { color: var(--ink-soft); font-weight: 600; font-size: .96rem; } .nav__links a:hover { color: var(--purple); text-decoration: none; } /* Icon-only nav links (GitHub, Discord): the glyph is the label. */ .nav__links .nav__icon { display: inline-flex; align-items: center; } .nav__links .nav__icon svg { width: 22px; height: 22px; fill: currentColor; display: block; } .nav__cta { margin-left: 8px; } @media (max-width: 760px) { .nav .brand__wordmark { height: 32px; } .nav__links { display: none; } .nav__cta { margin-left: auto; } } /* ------------------------------ hero ---------------------------- */ .hero { --nav-h: 92px; /* .nav__inner height */ --hero-pad: 48px; --peek: 240px; /* how much of the app window shows on the first screen */ position: relative; text-align: center; padding: var(--hero-pad) 0 0; color: var(--ink); /* No slab: just the blue and gold blobs, fading into the page. */ background: var(--hero-bg); } .hero__inner { position: relative; max-width: 820px; margin-inline: auto; /* Fill the first screen down to the top of the peeking window, and centre the copy in that room. On short screens the copy simply takes its own height and the window starts right beneath it. */ min-height: calc(100svh - var(--nav-h) - var(--hero-pad) - var(--peek)); padding-bottom: 32px; display: flex; flex-direction: column; justify-content: center; } @media (max-width: 760px) { .hero { --hero-pad: 40px; --peek: 150px; } .hero__inner { padding-bottom: 32px; } } .hero__art { position: relative; display: block; width: fit-content; margin: 0 auto 26px; } .hero__icon { position: relative; /* The web icon is a 1024×828 crop of the envelope: width rules, height follows. */ width: 200px; height: auto; animation: floaty 6s ease-in-out infinite; } /* Glow removed — the hero is a flat color. */ .hero__glow { display: none; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .hero__icon { animation: none; } html { scroll-behavior: auto; } } .hero__title { font-size: clamp(2.2rem, 5.4vw, 3.6rem); font-weight: 800; margin-bottom: 18px; color: var(--ink); } .hero__sub { font-size: clamp(1.05rem, 2.2vw, 1.24rem); color: var(--ink-soft); max-width: 620px; margin: 0 auto 30px; } .hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; } /* Secondary buttons on the light hero: white cards with a soft outline. */ .hero .btn--ghost { --btn-bg: var(--ghost-bg); --btn-fg: var(--ink); border-color: var(--ghost-border); } .hero .btn--ghost:hover { --btn-bg: var(--ghost-bg); border-color: var(--ghost-border-hover); } /* The rename pill, on the light ground: a faint blue wash, ink text. */ .hero__rename { background: rgba(0,78,255,.08) !important; color: var(--ink) !important; } .hero__rename a { color: var(--purple) !important; } .hero__badges { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; color: var(--ink-soft); font-weight: 600; font-size: .92rem; } .hero__badges li { display: inline-flex; align-items: center; gap: 8px; } .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 3px rgba(36,26,52,.08); } .dot--green { background: var(--green); } .dot--blue { background: var(--purple); } .dot--yellow { background: var(--hylki-yellow); } /* ---------------------------- sections -------------------------- */ .section { padding: 84px 0; } #features { padding-top: 64px; } .section--tint { background: var(--tint-strong); } .section__head { text-align: center; max-width: 680px; margin: 0 auto 52px; } .section__title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 800; } .section__lead { color: var(--ink-soft); font-size: 1.1rem; margin: 14px 0 0; } /* ---------------------------- hero screenshot ------------------- */ /* The app window at the foot of the hero. The stage carries the perspective; the image leans back by --shot-tilt (set per frame by the script in index.html, 16° at the bottom of the screen down to 0° once it has climbed about two thirds of the way up) and grows from 94% to full size. */ .shot { margin: 0 auto; max-width: 1000px; padding-inline: 20px; } .shot__stage { perspective: 1400px; perspective-origin: 50% 0%; } .shot__img { display: block; width: 100%; height: auto; transform-origin: 50% 50%; transform: rotateX(var(--shot-tilt, 0deg)) scale(var(--shot-scale, 1)); will-change: transform; /* The glow is the same brand blue as the blur at the top of the hero (rgba(0,78,255,...)); the tight second shadow keeps the window grounded. */ filter: drop-shadow(0 30px 50px rgba(0,78,255,.22)) drop-shadow(0 4px 12px rgba(36,26,52,.10)); } :root[data-theme="dark"] .shot__img { filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)) drop-shadow(0 4px 12px rgba(0,0,0,.4)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shot__img { filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)) drop-shadow(0 4px 12px rgba(0,0,0,.4)); } } @media (prefers-reduced-motion: reduce) { .shot__img { transform: none; will-change: auto; } } /* ---------------------------- scroll reveals -------------------- */ /* Added by script only (so no JavaScript means nothing is ever hidden). A block waits translucent and a little low, then rises into place when it enters the screen; the script staggers neighbours left to right. On the way back up a block keeps its place until it drops into the bottom tenth of the screen, where it fades away evenly (no stagger) and is re-armed for the next scroll down. Blocks leaving through the top stay as they are. The offset uses the `translate` property rather than `transform`, so it composes with the hover lift on .card instead of fighting it. */ .reveal { opacity: 0; translate: 0 36px; } /* Two classes deep so these win over .card's own transition list (which would otherwise make the fade-out snap). The .18s entries keep the card hover lift smooth while the block is shown. */ .reveal:not(.is-in) { transition: opacity .45s ease, translate .45s ease; } .reveal.is-in { opacity: 1; translate: 0 0; transition: opacity .8s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms), translate .8s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms), transform .18s ease, box-shadow .18s ease, border-color .18s ease; } /* ---------------------------- feature grid ---------------------- */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 960px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .grid { grid-template-columns: 1fr; } } /* Two framed screenshots under the feature grid (the first-run wizard and Settings). The figures dissolve into the grid so the two frames share row one (and so one height, whatever their captions run to) and the captions row two. The columns are in the ratio of the images' aspects (0.87 and 1.17), so the shots come out about the same size. */ .duo { display: grid; grid-template-columns: 1fr 1.325fr; gap: 14px 20px; margin-top: 52px; } .duo__item { display: contents; } .duo__item:nth-child(1) .duo__frame { grid-area: 1 / 1; } .duo__item:nth-child(1) figcaption { grid-area: 2 / 1; } .duo__item:nth-child(2) .duo__frame { grid-area: 1 / 2; } .duo__item:nth-child(2) figcaption { grid-area: 2 / 2; } .duo__frame { display: flex; align-items: center; background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); /* Lifts under the pointer exactly like the .card grid above it. */ transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .duo__frame:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--purple) 22%, var(--line)); } .duo__frame img { display: block; width: 100%; height: auto; } .duo figcaption { color: var(--ink-soft); font-size: .98rem; line-height: 1.5; margin: 0 8px; } .duo figcaption strong { color: var(--ink); } @media (max-width: 760px) { .duo { grid-template-columns: 1fr; gap: 12px; } .duo__item:nth-child(1) .duo__frame { grid-area: 1 / 1; } .duo__item:nth-child(1) figcaption { grid-area: 2 / 1; margin-bottom: 20px; } .duo__item:nth-child(2) .duo__frame { grid-area: 3 / 1; } .duo__item:nth-child(2) figcaption { grid-area: 4 / 1; } } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--purple) 22%, var(--line)); } .card h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 8px; } .card p { margin: 0; color: var(--ink-soft); font-size: .97rem; } .card__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; } .card__icon svg { width: 26px; height: 26px; fill: #fff; } .card__icon--purple { background: linear-gradient(160deg, #4d7bff, var(--purple)); } .card__icon--blue { background: linear-gradient(160deg, #5aa0ef, var(--blue)); } .card__icon--green { background: linear-gradient(160deg, #4dd79b, var(--green)); } .card__icon--yellow { background: linear-gradient(160deg, #ffcb45, var(--hylki-yellow)); } .card__icon--yellow svg { fill: #4a3600; } .card__icon--pink { background: linear-gradient(160deg, #f18cc6, var(--pink)); } .card__icon--teal { background: linear-gradient(160deg, #2fcfd3, var(--teal)); } /* ------------------------------ band ---------------------------- */ .band { padding: 84px 0; } .band--privacy { color: #fff; background: var(--band-bg); } .band__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; } @media (max-width: 820px) { .band__inner { grid-template-columns: 1fr; } } .band__title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 800; } .band__lead { color: rgba(255,255,255,.9); font-size: 1.1rem; margin: 14px 0 24px; } .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .checklist li { display: flex; gap: 14px; align-items: flex-start; } .checklist__mark { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--hylki-yellow); color: #3a2b00; font-weight: 900; display: grid; place-items: center; margin-top: 2px; box-shadow: 0 4px 12px rgba(246,180,10,.4); } .checklist strong { display: block; font-size: 1.05rem; } .checklist p { margin: 2px 0 0; color: rgba(255,255,255,.82); font-size: .96rem; } .band__aside { display: grid; place-items: center; } .stat-card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-lg); padding: 40px 34px; text-align: center; backdrop-filter: blur(6px); box-shadow: var(--shadow-lg); } .stat-card__big { display: block; font-size: clamp(5rem, 16vw, 8rem); font-weight: 900; line-height: 1; color: var(--hylki-yellow); text-shadow: 0 8px 24px rgba(0,0,0,.25); } .stat-card__label { display: block; margin-top: 10px; color: rgba(255,255,255,.9); font-weight: 600; max-width: 220px; } /* --------------------------- open source ------------------------ */ .os { max-width: 720px; margin: 0 auto; text-align: center; } .os__badge { width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 20px; background: linear-gradient(160deg, #4d7bff, var(--purple)); display: grid; place-items: center; box-shadow: var(--shadow-md); } .os__badge svg { width: 44px; height: 44px; fill: #fff; } .os__lead { margin-bottom: 28px; } .os__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ------------------------------ cta ----------------------------- */ .cta { max-width: 640px; margin: 0 auto; text-align: center; } .cta__icon { width: 84px; height: auto; margin: 0 auto 20px; } .cta__lead { margin-bottom: 28px; } .cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .cta__note { color: var(--ink-soft); font-size: .98rem; max-width: 560px; margin: 40px auto 20px; } /* System requirements panel in the CTA section. */ .reqs { text-align: left; max-width: 560px; margin: 40px auto 0; background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; } .reqs__title { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; font-weight: 800; margin: 0 0 16px; } .reqs__title svg { width: 20px; height: 20px; fill: var(--purple); } .reqs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .reqs__list li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--ink-soft); } .reqs__list strong { color: var(--ink); font-weight: 700; } .reqs__mark { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: linear-gradient(160deg, #4d7bff, var(--purple)); color: #fff; font-size: .72rem; font-weight: 900; display: grid; place-items: center; } .reqs__note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-soft); } /* ----------------------------- footer --------------------------- */ .footer { background: var(--tint-strong); border-top: 1px solid var(--line); padding: 48px 0 28px; } .footer__inner { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; } .footer__tag { margin: 10px 0 0; color: var(--ink-soft); font-size: .95rem; } .footer__links { display: flex; flex-wrap: wrap; gap: 12px 22px; } .footer__links a { color: var(--ink-soft); font-weight: 600; white-space: nowrap; } .footer__links a:hover { color: var(--purple); text-decoration: none; } /* Stack the footer on small screens so the link row can't overflow. */ @media (max-width: 620px) { .footer__inner { flex-direction: column; align-items: flex-start; gap: 22px; } .footer__links { gap: 10px 18px; } } .footer__made { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .92rem; font-weight: 600; } /* Hyprlab wordmark shown exactly as supplied — never recolored/inverted. The footer swaps in the white-text version Hyprlab provides for dark. */ .footer__made img { opacity: .9; transition: opacity .15s ease; } .footer__made a:hover img { opacity: 1; } /* The Discord + coffee buttons hang in the footer's bottom-right corner, above the legal divider, WITHOUT taking a row of their own: the holder is zero-height and the button group is lifted out of flow, so the left-side elements keep their height and nothing wraps around it. */ .footer__coffee { position: relative; height: 0; } .footer__corner { position: absolute; right: 24px; /* match .container's padding-inline so it lines up with content */ bottom: 0; display: flex; gap: 10px; } /* Stacked mobile footer: give it a normal in-flow row instead — the absolute corner would collide with the stacked left-aligned blocks. */ @media (max-width: 620px) { .footer__coffee { height: auto; margin-top: 20px; display: flex; justify-content: flex-start; } .footer__corner { position: static; flex-wrap: wrap; } } .footer__legal { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); } .footer__legal p { margin: 0; color: var(--ink-soft); font-size: .86rem; } /* --------------------------- legal pages ------------------------ */ .legal-page { padding: 56px 0 84px; } .legal { max-width: 820px; } .legal__meta { color: var(--ink-soft); font-size: .92rem; margin-top: -6px; } /* ------------------------------ docs ---------------------------- */ .docs-page { padding: 56px 0 84px; } .docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; } @media (max-width: 760px) { .docs-layout { grid-template-columns: 1fr; } } .docs-nav { position: sticky; top: 88px; } @media (max-width: 760px) { .docs-nav { position: static; } } .docs-nav__title { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px; } .docs-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .docs-nav a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--ink-soft); font-weight: 600; font-size: .95rem; } .docs-nav a:hover { background: var(--bg-tint); color: var(--purple); text-decoration: none; } .docs-nav a.is-active { background: color-mix(in srgb, var(--purple) 12%, transparent); color: var(--purple); } /* Markdown prose */ .prose { max-width: 760px; color: var(--ink); } .prose h1 { font-size: 2rem; font-weight: 800; margin: 0 0 18px; } .prose h2 { font-size: 1.4rem; font-weight: 700; margin: 36px 0 12px; } .prose h3 { font-size: 1.12rem; font-weight: 700; margin: 26px 0 8px; } .prose p, .prose li { color: var(--ink-soft); } .prose a { color: var(--purple); font-weight: 600; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin: 6px 0; } .prose code { background: var(--bg-tint); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: .9em; } .prose pre { background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; overflow-x: auto; } .prose pre code { background: none; border: none; padding: 0; } .prose hr { border: none; border-top: 1px solid var(--line); margin: 32px 0; } .prose blockquote { margin: 18px 0; padding: 4px 18px; border-left: 3px solid var(--purple); color: var(--ink-soft); } /* --------------------------- install modal ---------------------- */ .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; } .modal__backdrop { position: absolute; inset: 0; background: var(--backdrop); backdrop-filter: blur(3px); animation: modal-fade .18s ease; } .modal__dialog { position: relative; width: 100%; max-width: 560px; max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 34px 32px 32px; animation: modal-pop .2s ease; /* Auto-hiding scrollbar: invisible until the dialog is hovered (Firefox). */ scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .25s ease; } .modal__dialog:hover, .modal__dialog:focus-within { scrollbar-color: color-mix(in srgb, var(--ink) 28%, transparent) transparent; } /* Auto-hiding scrollbar for WebKit/Blink — thumb fades in on hover. */ .modal__dialog::-webkit-scrollbar { width: 8px; } .modal__dialog::-webkit-scrollbar-track { background: transparent; } .modal__dialog::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; transition: background .25s ease; } .modal__dialog:hover::-webkit-scrollbar-thumb, .modal__dialog:focus-within::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 22%, transparent); } .modal__dialog::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 42%, transparent); } .modal__dialog:focus { outline: none; } @keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .modal__backdrop, .modal__dialog { animation: none; } } .modal__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: grid; place-items: center; border: none; border-radius: 50%; background: var(--bg-tint); color: var(--ink-soft); cursor: pointer; transition: background .15s ease, color .15s ease; } .modal__close:hover { background: var(--line); color: var(--ink); } .modal__close svg { width: 18px; height: 18px; fill: currentColor; } .modal__head { text-align: center; margin-bottom: 24px; } .modal__icon { width: 64px; height: auto; margin: 0 auto 14px; } .modal__title { font-size: 1.6rem; font-weight: 800; } .modal__sub { color: var(--ink-soft); font-size: 1rem; margin: 10px auto 0; max-width: 440px; } .install-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 24px; background: var(--surface); } .install-block--primary { border-color: color-mix(in srgb, var(--purple) 30%, var(--line)); background: var(--bg-tint); } .install-block > p { margin: 0 0 16px; color: var(--ink-soft); font-size: .97rem; } .install-block__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .install-block__head h3 { font-size: 1.15rem; font-weight: 800; } .install-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: linear-gradient(180deg, #ffc21f, var(--hylki-yellow)); color: #3a2b00; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .install-block .btn { width: 100%; justify-content: center; } .install-note { font-size: .88rem; color: var(--ink-soft); margin: 14px 0 0; } /* Give the note under the download button a touch more breathing room. */ .install-block--primary .btn + .install-note { margin-top: 1rem; } .install-note code { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: .92em; } /* "or" divider */ .install-or { display: flex; align-items: center; gap: 14px; margin: 18px 0; color: var(--ink-soft); font-size: .86rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .install-or::before, .install-or::after { content: ""; flex: 1; height: 1px; background: var(--line); } .install-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; /* minmax(0,1fr) lets the column shrink below its content's min-width, so the long command scrolls inside its own box instead of blowing out the modal. */ grid-template-columns: minmax(0, 1fr); gap: 18px; } .install-steps li { position: relative; min-width: 0; padding-left: 40px; color: var(--ink-soft); font-size: .97rem; } .install-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(160deg, #4d7bff, var(--purple)); color: #fff; font-weight: 800; font-size: .92rem; } .install-steps strong { color: var(--ink); } .install-steps code { background: var(--bg-tint); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: .9em; } /* Copyable command block */ .code-copy { display: flex; align-items: stretch; gap: 8px; min-width: 0; margin: 10px 0 0; } .code-copy code { flex: 1; min-width: 0; display: block; background: var(--code-bg); color: var(--code-fg); border-radius: 12px; padding: 12px 14px; font-size: .86rem; line-height: 1.5; overflow-x: auto; white-space: nowrap; } .code-copy__btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-family: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .code-copy__btn:hover { background: var(--bg-tint); border-color: color-mix(in srgb, var(--purple) 30%, var(--line)); } .code-copy__btn svg { width: 16px; height: 16px; fill: currentColor; } .code-copy__btn.is-copied { background: var(--green); border-color: var(--green); color: #fff; } @media (max-width: 520px) { .modal__dialog { padding: 30px 20px 26px; } .code-copy { flex-direction: column; } .code-copy__btn { padding: 10px; justify-content: center; } } /* ----------------------------- lightbox ------------------------- */ /* Every screenshot marked [data-zoom] opens here at full size. A click on the image (or the magnifier) switches between fit-to-screen and 1:1, where the stage scrolls — drag with the mouse, or scroll/pinch on a touchpad or phone — so the app's small print can actually be read. */ [data-zoom] { cursor: zoom-in; } [data-zoom]:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; } .lightbox[hidden] { display: none; } .lightbox { position: fixed; inset: 0; z-index: 200; } .lightbox__backdrop { position: absolute; inset: 0; background: var(--backdrop); backdrop-filter: blur(6px); animation: modal-fade .18s ease; } /* The scrolling room. Clicking its empty space closes, like a backdrop. `safe center` keeps the image centred until it outgrows the stage, then falls back to the top-left corner so no part of it becomes unreachable. */ .lightbox__stage { position: absolute; inset: 0; overflow: auto; display: flex; align-items: safe center; justify-content: safe center; padding: clamp(14px, 3.5vw, 48px); overscroll-behavior: contain; } /* Room for the caption pill, so a tall shot never sits under it. */ .lightbox.has-caption .lightbox__stage { padding-bottom: 92px; } .lightbox__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.45); animation: modal-pop .2s ease; } .lightbox.is-zoomable .lightbox__img { cursor: zoom-in; } .lightbox.is-zoomed .lightbox__img { max-width: none; max-height: none; width: var(--lightbox-zoom-w, auto); cursor: zoom-out; animation: none; } .lightbox.is-panning .lightbox__img { cursor: grabbing; } .lightbox__tools { position: absolute; top: 16px; right: 16px; z-index: 2; display: flex; gap: 8px; } .lightbox__btn { width: 40px; height: 40px; display: grid; place-items: center; border: none; border-radius: 50%; background: rgba(20,16,32,.62); backdrop-filter: blur(6px); color: #fff; cursor: pointer; transition: background .15s ease; } .lightbox__btn:hover { background: rgba(20,16,32,.88); } .lightbox__btn svg { width: 20px; height: 20px; fill: currentColor; } /* The magnifier shows the move the next click makes: + to zoom in, - to go back to fit. It is hidden outright when the shot is already life-size. */ .lightbox__btn--zoom .lightbox__icon--out, .lightbox.is-zoomed .lightbox__btn--zoom .lightbox__icon--in { display: none; } .lightbox.is-zoomed .lightbox__btn--zoom .lightbox__icon--out { display: block; } .lightbox:not(.is-zoomable) .lightbox__btn--zoom { display: none; } /* Listed first: the display below would otherwise beat the UA [hidden] rule. */ .lightbox__caption[hidden] { display: none; } .lightbox__caption { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; max-width: min(720px, calc(100% - 32px)); margin: 0; padding: 9px 18px; border-radius: 16px; background: rgba(20,16,32,.62); backdrop-filter: blur(6px); color: #fff; font-size: .92rem; line-height: 1.45; text-align: center; pointer-events: none; } /* Long captions are trimmed rather than allowed to eat the screen. The clamp lives on the inner span: the pill is absolutely positioned, and that blockifies its display, which would drop -webkit-box on the floor. */ .lightbox__caption span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 560px) { .lightbox__caption { bottom: 12px; padding: 7px 14px; font-size: .84rem; } .lightbox__caption span { -webkit-line-clamp: 2; } .lightbox__btn { width: 36px; height: 36px; } } /* Once zoomed the caption would sit on top of what the visitor came to read. */ .lightbox.is-zoomed .lightbox__caption { display: none; } @media (prefers-reduced-motion: reduce) { .lightbox__backdrop, .lightbox__img { animation: none; } } /* ------------------- OS compatibility tabs ---------------------- */ .oscompat { text-align: left; max-width: 560px; margin: 22px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow-sm); } .oscompat__title { display: flex; align-items: center; gap: 9px; font-size: 1.05rem; font-weight: 800; margin: 0 0 16px; } .oscompat__title svg { width: 20px; height: 20px; fill: var(--purple); } .oscompat__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .ostab { appearance: none; border: 1px solid var(--line); background: var(--bg-tint); color: var(--ink-soft); font-family: inherit; font-weight: 700; font-size: .9rem; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .ostab:hover { border-color: color-mix(in srgb, var(--purple) 30%, var(--line)); color: var(--ink); } .ostab.is-active { background: linear-gradient(160deg, #4d7bff, var(--purple)); border-color: transparent; color: #fff; } .ospanel { display: none; } .ospanel.is-active { display: block; animation: osfade .18s ease; } @keyframes osfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .ospanel p { color: var(--ink-soft); font-size: .95rem; margin: 0 0 14px; } .ospanel strong { color: var(--ink); } .ospanel p code { background: var(--bg-tint); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: .9em; } .os-status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; letter-spacing: .01em; margin-bottom: 14px; } .os-status svg { width: 15px; height: 15px; flex: none; } .os-status--ready { background: color-mix(in srgb, var(--green) 15%, var(--surface)); color: var(--status-ok-fg); } .os-status--ready svg { fill: var(--green); } .os-status--setup { background: color-mix(in srgb, var(--hylki-yellow) 22%, var(--surface)); color: var(--status-warn-fg); } .os-status--setup svg { fill: var(--hylki-yellow-d); } .ospanel__steps-title { font-weight: 800; color: var(--ink) !important; font-size: 1rem; margin: 20px 0 10px !important; padding-top: 16px; border-top: 1px solid var(--line); } .ospanel__sub { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: .95rem; color: var(--ink-soft); } .ospanel__sub em { color: var(--ink); font-style: normal; font-weight: 700; }