diff --git a/docs/.gitignore b/.gitignore similarity index 100% rename from docs/.gitignore rename to .gitignore diff --git a/css/hudra-legal.css b/css/hudra-legal.css new file mode 100644 index 0000000..f867c4c --- /dev/null +++ b/css/hudra-legal.css @@ -0,0 +1,127 @@ +.legal-hero { + padding: 82px 0 58px; + border-bottom: 1px solid var(--line); + background: linear-gradient(180deg, #fff 0%, #f4f7ff 100%); +} +.legal-hero .container { max-width: 920px; } +.legal-hero h1 { + max-width: 780px; + margin: 0; + color: var(--blue-950); + font-size: clamp(2.7rem, 7vw, 4.8rem); + line-height: 1; + letter-spacing: -.055em; +} +.legal-hero p { + max-width: 720px; + margin: 22px 0 0; + color: var(--muted); + font-size: 1.08rem; +} +.legal-meta { + display: flex; + flex-wrap: wrap; + gap: 10px 22px; + margin-top: 26px; + color: #71809d; + font-size: .86rem; +} +.legal-page { padding: 72px 0 105px; } +.legal-layout { + display: grid; + grid-template-columns: 230px minmax(0, 1fr); + gap: 70px; + align-items: start; +} +.legal-nav { + position: sticky; + top: 105px; + display: grid; + gap: 4px; + padding: 16px; + border: 1px solid var(--line); + border-radius: 18px; + background: #fff; + box-shadow: 0 12px 34px rgba(19, 37, 81, .06); +} +.legal-nav strong { padding: 8px 10px; color: var(--blue-950); } +.legal-nav a { + padding: 8px 10px; + color: var(--muted); + border-radius: 9px; + text-decoration: none; + font-size: .9rem; +} +.legal-nav a:hover { color: var(--blue-800); background: var(--blue-50); } +.legal-content { max-width: 760px; } +.legal-content section { scroll-margin-top: 110px; margin-bottom: 52px; } +.legal-content h2 { + margin: 0 0 16px; + color: var(--blue-950); + font-size: clamp(1.65rem, 3vw, 2.25rem); + line-height: 1.15; + letter-spacing: -.035em; +} +.legal-content h3 { margin: 28px 0 10px; color: var(--blue-950); } +.legal-content p, .legal-content li { color: #4d596f; } +.legal-content ul { padding-left: 1.25rem; } +.legal-content li + li { margin-top: 8px; } +.notice-card, .support-card { + margin: 0 0 36px; + padding: 25px 27px; + border: 1px solid #cbd8fb; + border-radius: 18px; + background: linear-gradient(145deg, #f8faff, #edf3ff); +} +.notice-card strong, .support-card strong { color: var(--blue-950); } +.notice-card p, .support-card p { margin: 8px 0 0; } +.data-table { + width: 100%; + margin-top: 18px; + border-collapse: collapse; + border: 1px solid var(--line); + border-radius: 14px; + overflow: hidden; +} +.data-table th, .data-table td { + padding: 14px 16px; + border-bottom: 1px solid var(--line); + vertical-align: top; + text-align: left; +} +.data-table th { color: var(--blue-950); background: var(--blue-50); font-size: .88rem; } +.data-table tr:last-child td { border-bottom: 0; } +.contact-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 28px 0 40px; } +.contact-card { + display: block; + padding: 24px; + border: 1px solid var(--line); + border-radius: 18px; + background: #fff; + text-decoration: none; + box-shadow: 0 12px 34px rgba(19, 37, 81, .06); +} +.contact-card:hover { border-color: #b7c8fa; transform: translateY(-2px); } +.contact-card strong { display: block; color: var(--blue-950); font-size: 1.05rem; } +.contact-card span { display: block; margin-top: 6px; color: var(--muted); font-size: .9rem; } +.code-note { + padding: 15px 17px; + border-radius: 12px; + color: #273552; + background: #f2f5fa; + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: .88rem; + overflow-wrap: anywhere; +} +@media (max-width: 820px) { + .legal-layout { grid-template-columns: 1fr; gap: 38px; } + .legal-nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } + .legal-nav strong { grid-column: 1 / -1; } +} +@media (max-width: 580px) { + .legal-hero { padding-top: 58px; } + .legal-page { padding-top: 48px; } + .contact-options { grid-template-columns: 1fr; } + .data-table { display: block; overflow-x: auto; } + .legal-nav { grid-template-columns: 1fr; } +} diff --git a/css/hudra.css b/css/hudra.css new file mode 100644 index 0000000..fe78f30 --- /dev/null +++ b/css/hudra.css @@ -0,0 +1,270 @@ +:root { + --blue-950: #06184f; + --blue-900: #082477; + --blue-800: #0a35ad; + --blue-700: #0b45d8; + --blue-600: #1358f2; + --blue-500: #2e6dff; + --blue-100: #dfe9ff; + --blue-50: #f2f6ff; + --ink: #10182c; + --muted: #5c667d; + --line: #dfe4ef; + --surface: #ffffff; + --soft: #f6f8fc; + --shadow: 0 24px 70px rgba(8, 35, 108, .16); + --radius-xl: 32px; + --radius-lg: 22px; + --radius-md: 15px; + --container: 1180px; +} + +* { box-sizing: border-box; } +html { scroll-behavior: smooth; } +body { + margin: 0; + color: var(--ink); + background: var(--surface); + font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + line-height: 1.6; + -webkit-font-smoothing: antialiased; +} +img { max-width: 100%; display: block; } +a { color: inherit; } +button, input { font: inherit; } + +.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; } +.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } +.skip-link { position: fixed; z-index: 9999; left: 16px; top: -60px; padding: 10px 14px; background: #fff; color: var(--blue-800); border-radius: 10px; box-shadow: var(--shadow); } +.skip-link:focus { top: 16px; } + +.site-header { + position: sticky; + top: 0; + z-index: 100; + border-bottom: 1px solid rgba(223, 228, 239, .75); + background: rgba(255, 255, 255, .88); + backdrop-filter: blur(18px); +} +.header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; } +.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--blue-950); text-decoration: none; font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; } +.brand img { border-radius: 11px; box-shadow: 0 8px 24px rgba(11, 69, 216, .18); } +.site-nav { display: flex; align-items: center; gap: 28px; } +.site-nav a { color: #344057; text-decoration: none; font-weight: 650; font-size: .95rem; } +.site-nav a:hover { color: var(--blue-700); } +.nav-button { padding: 10px 16px; color: #fff !important; background: var(--blue-700); border-radius: 11px; box-shadow: 0 8px 18px rgba(11, 69, 216, .22); } +.menu-button { display: none; width: 42px; height: 42px; padding: 9px; border: 1px solid var(--line); background: #fff; border-radius: 12px; } +.menu-button span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: var(--ink); border-radius: 3px; } + +.hero { position: relative; overflow: hidden; padding: 96px 0 88px; background: linear-gradient(180deg, #fff 0%, #f7f9ff 100%); } +.hero::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(#95afff 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to bottom, black, transparent 72%); } +.hero-grid { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; gap: 68px; align-items: center; } +.hero-copy h1, .section-heading h2, .privacy-grid h2, .cta-card h2 { margin: 0; font-size: clamp(2.7rem, 6vw, 5.35rem); line-height: .98; letter-spacing: -.06em; } +.hero-copy h1 em { display: block; color: var(--blue-700); font-style: normal; } +.hero-lead { max-width: 650px; margin: 28px 0 0; color: var(--muted); font-size: clamp(1.07rem, 1.7vw, 1.27rem); } +.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--blue-700); font-size: .78rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; } +.eyebrow span { width: 28px; height: 3px; background: currentColor; border-radius: 99px; } +.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } +.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 21px; border-radius: 14px; text-decoration: none; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } +.button:hover { transform: translateY(-2px); } +.button svg { width: 21px; fill: currentColor; } +.button-primary { color: #fff; background: linear-gradient(135deg, var(--blue-600), var(--blue-800)); box-shadow: 0 14px 28px rgba(11, 69, 216, .27); } +.button-secondary { color: var(--blue-900); border: 1px solid #cbd8fb; background: #fff; } +.button-light { color: var(--blue-900); background: #fff; box-shadow: 0 14px 28px rgba(0,0,0,.12); } +.microcopy { margin: 17px 0 0; color: #7a8498; font-size: .86rem; } + +.hero-visual { position: relative; min-height: 535px; display: flex; align-items: center; } +.browser-window { position: relative; z-index: 2; width: 100%; overflow: hidden; border: 1px solid rgba(154, 174, 228, .6); border-radius: 24px; background: #fff; box-shadow: var(--shadow); transform: rotate(1.2deg); } +.browser-bar { height: 60px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; padding: 0 17px; border-bottom: 1px solid var(--line); background: #f8f9fd; } +.browser-dots { display: flex; gap: 6px; } +.browser-dots span { width: 10px; height: 10px; border-radius: 50%; background: #c8ceda; } +.address-bar { height: 32px; display: flex; align-items: center; padding: 0 14px; border: 1px solid #e1e5ee; border-radius: 9px; color: #8992a3; background: #fff; font-size: .78rem; } +.browser-bar img { border-radius: 8px; } +.browser-content { min-height: 420px; display: grid; grid-template-columns: 145px 1fr; } +.canvas-sidebar { padding: 25px 18px; background: #f6f7fb; border-right: 1px solid var(--line); } +.skeleton { height: 10px; margin-bottom: 16px; border-radius: 10px; background: #dbe0ea; } +.skeleton.short { width: 62%; margin-bottom: 28px; background: #b9c8f2; } +.canvas-page { position: relative; padding: 27px 28px; } +.page-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 26px; } +.toolbar-pill { padding: 6px 11px; border-radius: 8px; color: #667188; background: #eef1f6; font-size: .72rem; font-weight: 750; } +.toolbar-pill.active { color: #fff; background: var(--blue-700); } +.page-title { width: 53%; height: 22px; border-radius: 10px; background: #202b43; } +.page-line { width: 66%; height: 9px; margin-top: 17px; border-radius: 10px; background: #d7dce7; } +.page-line.wide { width: 88%; margin-top: 22px; } +.page-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; } +.page-card { height: 108px; border: 1px solid #dde3ef; border-radius: 14px; background: linear-gradient(145deg, #f8faff, #eef3ff); } +.hudra-panel { position: absolute; right: 22px; bottom: 23px; width: 215px; padding: 16px; border: 1px solid #cdd9fb; border-radius: 16px; background: #fff; box-shadow: 0 20px 45px rgba(8, 35, 108, .18); } +.panel-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: var(--blue-950); } +.panel-heading img { border-radius: 8px; } +.hudra-panel button { width: 100%; margin-top: 8px; padding: 9px 10px; border: 1px solid #d7e0f8; border-radius: 9px; color: #29406f; background: #f5f8ff; font-size: .72rem; text-align: left; } +.floating-card { position: absolute; z-index: 3; display: grid; gap: 1px; min-width: 165px; padding: 14px 17px; border: 1px solid #dbe3f7; border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: 0 16px 35px rgba(8,35,108,.16); backdrop-filter: blur(10px); } +.floating-card strong { color: var(--blue-800); } +.floating-card span { color: var(--muted); font-size: .78rem; } +.card-fast { left: -35px; bottom: 38px; } +.card-clean { right: -25px; top: 32px; } +.hero-glow { position: absolute; border-radius: 50%; filter: blur(20px); opacity: .26; } +.hero-glow-one { width: 340px; height: 340px; right: -90px; top: 35px; background: #2d68ff; } +.hero-glow-two { width: 250px; height: 250px; left: 36%; bottom: -130px; background: #8eb0ff; } + +.trust-strip { border-block: 1px solid var(--line); background: #fff; } +.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); } +.trust-grid > div { display: grid; gap: 2px; padding: 25px 26px; border-right: 1px solid var(--line); } +.trust-grid > div:last-child { border-right: 0; } +.trust-grid strong { color: var(--blue-950); font-size: .95rem; } +.trust-grid span { color: var(--muted); font-size: .8rem; } + +.section { padding: 108px 0; } +.section-soft { background: var(--soft); } +.section-heading { max-width: 690px; margin-bottom: 50px; } +.section-heading.centered { margin-inline: auto; text-align: center; } +.section-heading.centered .eyebrow { justify-content: center; } +.section-heading h2, .privacy-grid h2, .cta-card h2 { font-size: clamp(2.35rem, 4.7vw, 4.2rem); } +.section-heading p { margin: 22px 0 0; color: var(--muted); font-size: 1.08rem; } + +.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } +.feature-card { min-height: 280px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 12px 34px rgba(19, 37, 81, .06); } +.feature-card-large { grid-row: span 2; min-height: 580px; background: linear-gradient(165deg, #fff 0%, #f1f5ff 100%); } +.feature-card-accent { grid-column: span 2; min-height: 210px; display: flex; align-items: center; gap: 30px; color: #fff; border: 0; background: linear-gradient(135deg, var(--blue-700), var(--blue-950)); } +.feature-card-accent img { flex: 0 0 auto; filter: drop-shadow(0 12px 20px rgba(0,0,0,.2)); } +.feature-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 25px; color: var(--blue-700); border-radius: 15px; background: var(--blue-50); } +.feature-icon svg { width: 27px; fill: currentColor; } +.feature-card h3 { margin: 0; font-size: 1.36rem; letter-spacing: -.025em; } +.feature-card p { margin: 13px 0 0; color: var(--muted); } +.feature-card-accent p { color: rgba(255,255,255,.78); } +.mini-ui { display: grid; gap: 12px; margin-top: 70px; } +.mini-ui span { padding: 15px 16px; color: var(--blue-900); border: 1px solid #cfdbfb; border-radius: 12px; background: #fff; font-weight: 750; box-shadow: 0 10px 25px rgba(8,35,108,.08); } + +.steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 24px; align-items: center; } +.steps article { min-height: 230px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; } +.step-number { margin-bottom: 45px; color: var(--blue-700); font-size: .8rem; font-weight: 900; letter-spacing: .16em; } +.steps h3 { margin: 0; font-size: 1.4rem; } +.steps p { margin-bottom: 0; color: var(--muted); } +.step-arrow { color: #9cabc9; font-size: 1.8rem; } + +.privacy-grid { display: grid; grid-template-columns: 1fr .85fr; gap: 80px; align-items: center; } +.privacy-lead { max-width: 650px; margin: 24px 0; color: var(--muted); font-size: 1.12rem; } +.text-link { color: var(--blue-700); text-decoration: none; font-weight: 800; } +.text-link span { display: inline-block; transition: transform .18s ease; } +.text-link:hover span { transform: translateX(4px); } +.privacy-card { padding: 33px; border: 1px solid #ccd8fa; border-radius: var(--radius-xl); background: linear-gradient(160deg, #f8faff, #edf3ff); } +.privacy-item { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid #d6def1; } +.privacy-item:first-child { padding-top: 0; } +.privacy-item:last-child { padding-bottom: 0; border-bottom: 0; } +.check { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--blue-700); font-weight: 900; } +.privacy-item strong { color: var(--blue-950); } +.privacy-item p { margin: 3px 0 0; color: var(--muted); font-size: .9rem; } + +.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 70px; } +.faq-list details { border-bottom: 1px solid #dbe0e9; } +.faq-list summary { position: relative; padding: 24px 42px 24px 0; cursor: pointer; list-style: none; font-size: 1.08rem; font-weight: 780; } +.faq-list summary::-webkit-details-marker { display: none; } +.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 20px; color: var(--blue-700); font-size: 1.6rem; font-weight: 400; } +.faq-list details[open] summary::after { content: "−"; } +.faq-list details p { margin: -8px 45px 24px 0; color: var(--muted); } + +.cta-section { padding: 42px 0 110px; background: var(--soft); } +.cta-card { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 52px 56px; color: #fff; border-radius: var(--radius-xl); background: radial-gradient(circle at 80% 20%, #396dff 0, transparent 34%), linear-gradient(135deg, var(--blue-700), var(--blue-950)); box-shadow: 0 28px 60px rgba(8,35,108,.22); } +.cta-card h2 { max-width: 780px; font-size: clamp(2.2rem, 4vw, 3.7rem); } +.cta-card p { margin: 16px 0 0; color: rgba(255,255,255,.78); } +.eyebrow.light { color: #bcd0ff; } + +.site-footer { padding: 68px 0 25px; color: #c8d1e8; background: #07132f; } +.footer-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; } +.footer-brand .brand { color: #fff; } +.footer-brand p { max-width: 420px; color: #98a6c5; } +.footer-brand small a { color: #fff; } +.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } +.footer-links div { display: grid; align-content: start; gap: 11px; } +.footer-links strong { margin-bottom: 8px; color: #fff; } +.footer-links a { color: #aeb9d1; text-decoration: none; } +.footer-links a:hover { color: #fff; } +.footer-bottom { display: flex; justify-content: space-between; gap: 30px; margin-top: 55px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); color: #7f8eaf; font-size: .78rem; } +.footer-bottom span:last-child { max-width: 670px; text-align: right; } + +@media (max-width: 980px) { + .hero-grid, .privacy-grid, .faq-layout { grid-template-columns: 1fr; } + .hero { padding-top: 70px; } + .hero-copy { max-width: 760px; } + .hero-visual { max-width: 760px; min-height: 500px; } + .feature-grid { grid-template-columns: repeat(2, 1fr); } + .feature-card-large { grid-row: auto; min-height: 360px; } + .feature-card-accent { grid-column: span 2; } + .steps { grid-template-columns: 1fr; } + .step-arrow { transform: rotate(90deg); justify-self: center; } + .trust-grid { grid-template-columns: repeat(2, 1fr); } + .trust-grid > div:nth-child(2) { border-right: 0; } + .trust-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } +} + +@media (max-width: 760px) { + .container { width: min(calc(100% - 28px), var(--container)); } + .site-nav { position: absolute; left: 14px; right: 14px; top: 68px; display: none; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 20px 45px rgba(8,35,108,.14); } + .site-nav.open { display: grid; } + .menu-button { display: block; } + .hero { padding: 58px 0 66px; } + .hero-copy h1 { font-size: clamp(2.85rem, 14vw, 4.5rem); } + .hero-visual { min-height: auto; padding-top: 38px; } + .browser-content { grid-template-columns: 84px 1fr; } + .canvas-sidebar { padding-inline: 10px; } + .canvas-page { padding: 20px 16px; } + .hudra-panel { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 20px; } + .floating-card { display: none; } + .feature-grid { grid-template-columns: 1fr; } + .feature-card, .feature-card-large { min-height: auto; } + .feature-card-accent { grid-column: auto; flex-direction: column; align-items: flex-start; } + .mini-ui { margin-top: 35px; } + .section { padding: 78px 0; } + .trust-grid { grid-template-columns: 1fr; } + .trust-grid > div { border-right: 0; border-bottom: 1px solid var(--line); } + .trust-grid > div:last-child { border-bottom: 0; } + .cta-card { align-items: flex-start; flex-direction: column; padding: 38px 28px; } + .footer-grid { grid-template-columns: 1fr; } + .footer-bottom { flex-direction: column; } + .footer-bottom span:last-child { text-align: left; } +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } +} + +/* Hudra presenter dashboard preview */ +.presentation-window { transform: rotate(1deg); } +.presenter-dashboard { min-height: 430px; padding: 16px; background: #eaf0fb; } +.dashboard-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 10px 12px; color: #fff; border-radius: 12px; background: linear-gradient(135deg, var(--blue-800), var(--blue-950)); } +.dashboard-brand { display: flex; align-items: center; gap: 9px; font-size: .82rem; } +.dashboard-brand img { border-radius: 7px; } +.dashboard-clock { font-variant-numeric: tabular-nums; font-size: .8rem; font-weight: 850; } +.dashboard-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(145px, .65fr); gap: 13px; } +.current-slide, .next-preview, .timer-card, .control-row { border: 1px solid #d2dcf2; border-radius: 13px; background: #fff; } +.current-slide { padding: 12px; } +.preview-label { display: block; margin-bottom: 8px; color: #65769b; font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } +.slide-screen { aspect-ratio: 16 / 9; padding: 22px; overflow: hidden; border-radius: 9px; background: linear-gradient(145deg, #fff, #edf3ff); box-shadow: inset 0 0 0 1px #dce4f5; } +.slide-kicker { color: var(--blue-700); font-size: .48rem; font-weight: 900; letter-spacing: .12em; } +.slide-heading { width: 72%; height: 13px; margin-top: 13px; border-radius: 5px; background: var(--blue-950); } +.slide-copy { width: 58%; height: 5px; margin-top: 8px; border-radius: 4px; background: #aab8d4; } +.slide-copy.wide { width: 87%; margin-top: 14px; } +.slide-image-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; } +.slide-image-row span { aspect-ratio: 16 / 8; border-radius: 7px; background: linear-gradient(135deg, #bcd0ff, #dce7ff); } +.presenter-sidebar { display: grid; gap: 10px; align-content: start; } +.next-preview { padding: 10px; } +.next-screen { aspect-ratio: 16 / 9; padding: 12px; border-radius: 8px; background: #f2f6ff; box-shadow: inset 0 0 0 1px #dce4f5; } +.next-screen span { display: block; height: 5px; margin-bottom: 7px; border-radius: 4px; background: #afbedb; } +.next-screen span:first-child { width: 70%; height: 8px; background: var(--blue-900); } +.next-screen span:last-child { width: 55%; } +.timer-card { display: flex; align-items: end; justify-content: space-between; padding: 13px; } +.timer-card span { color: #65769b; font-size: .65rem; font-weight: 750; } +.timer-card strong { color: var(--blue-800); font-size: 1.2rem; font-variant-numeric: tabular-nums; } +.control-row { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 7px; padding: 8px; } +.control-row button { height: 30px; color: #fff; border: 0; border-radius: 8px; background: var(--blue-700); font-weight: 900; } +.control-row span { color: #65769b; font-size: .7rem; font-weight: 800; text-align: center; } +.presentation-mini-ui span { display: flex; justify-content: space-between; gap: 18px; } +.presentation-mini-ui b { color: var(--blue-700); } + +@media (max-width: 760px) { + .presentation-window { transform: none; } + .presenter-dashboard { min-height: 350px; padding: 10px; } + .dashboard-main { grid-template-columns: 1fr; } + .presenter-sidebar { grid-template-columns: 1fr 1fr; } + .control-row { grid-column: 1 / -1; } + .slide-screen { padding: 16px; } +} diff --git a/css/napper.css b/css/napper.css new file mode 100644 index 0000000..fe3f9c7 --- /dev/null +++ b/css/napper.css @@ -0,0 +1,5 @@ +:root{--blue-950:#071b4f;--blue-900:#0a286f;--blue-800:#0b399e;--blue-700:#0b45d8;--blue-600:#2462ee;--blue-100:#dce8ff;--blue-50:#f2f6ff;--ink:#10182b;--muted:#61708e;--line:#dce3ef;--soft:#f6f8fc;--white:#fff;--container:1180px;--radius-lg:24px;--radius-xl:34px;--shadow:0 24px 70px rgba(8,35,108,.13)} +*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}.container{width:min(calc(100% - 42px),var(--container));margin-inline:auto}.skip-link{position:absolute;left:-9999px;top:10px;z-index:999;padding:10px 14px;background:#fff}.skip-link:focus{left:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(220,227,239,.85);background:rgba(255,255,255,.88);backdrop-filter:blur(16px)}.header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:inline-flex;align-items:center;gap:12px;color:var(--blue-950);font-size:1.18rem;font-weight:900;text-decoration:none;letter-spacing:-.03em}.brand-mark{width:42px;height:42px;display:grid;place-items:center;color:#fff;border-radius:13px;background:linear-gradient(145deg,var(--blue-600),var(--blue-950));box-shadow:0 10px 24px rgba(11,69,216,.22)}.site-nav{display:flex;align-items:center;gap:28px}.site-nav a{color:#3b4966;font-size:.93rem;font-weight:750;text-decoration:none}.site-nav a:hover{color:var(--blue-700)}.nav-button{padding:10px 17px;color:#fff!important;border-radius:11px;background:var(--blue-700)}.menu-button{display:none;width:44px;height:44px;padding:10px;border:0;background:transparent}.menu-button span:not(.sr-only){display:block;height:2px;margin:5px 0;background:var(--blue-950)}.hero{position:relative;overflow:hidden;padding:105px 0 96px;background:linear-gradient(180deg,#fff 0%,#f7f9ff 100%)}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:75px;align-items:center}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--blue-700);font-size:.76rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.eyebrow>span{width:26px;height:2px;background:currentColor}.hero h1,.section-heading h2,.approach-grid h2,.cta-card h2{margin:18px 0 0;color:var(--blue-950);font-size:clamp(3.5rem,6.7vw,6.4rem);line-height:.98;letter-spacing:-.065em}.hero h1 em{color:var(--blue-700);font-style:normal}.hero-lead{max-width:680px;margin:27px 0 0;color:var(--muted);font-size:1.16rem}.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border:1px solid transparent;border-radius:13px;font-weight:850;text-decoration:none}.button-primary{color:#fff;background:var(--blue-700);box-shadow:0 14px 30px rgba(11,69,216,.2)}.button-primary:hover{background:var(--blue-800)}.button-secondary{color:var(--blue-900);border-color:#ccd7ef;background:#fff}.microcopy{margin-top:19px;color:#8490a9;font-size:.82rem}.hero-visual{position:relative;min-height:500px}.product-stack{position:relative;height:500px}.stack-card{position:absolute;width:min(100%,480px);display:grid;grid-template-columns:auto 1fr;gap:19px;align-items:center;padding:25px;border:1px solid #d9e1f0;border-radius:25px;background:rgba(255,255,255,.94);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.stack-card h2{margin:3px 0 0;color:var(--blue-950);font-size:1.55rem;letter-spacing:-.04em}.stack-card p{margin:4px 0 0;color:var(--muted);font-size:.9rem}.stack-card img{border-radius:18px}.stack-hudra{right:15px;top:15px;z-index:3;transform:rotate(1.8deg)}.stack-lildra{left:0;top:178px;z-index:2;transform:rotate(-2deg)}.stack-pendra{right:20px;top:342px;z-index:1;opacity:.82;transform:rotate(1deg)}.product-glyph{width:66px;height:66px;display:grid;place-items:center;color:#fff;border-radius:18px;background:linear-gradient(145deg,#7558e8,#34206e);font-size:1.15rem;font-weight:950}.product-glyph.muted{background:linear-gradient(145deg,#4d8aa8,#24445d)}.product-glyph.large{width:84px;height:84px;border-radius:22px;font-size:1.4rem}.status{display:inline-flex;padding:4px 9px;color:#66738d;border:1px solid #d9e0eb;border-radius:999px;background:#f7f8fb;font-size:.68rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.status-live{color:#086c45;border-color:#b8e3d1;background:#eaf9f2}.status-next{color:#5738a4;border-color:#d8cef7;background:#f2efff}.hero-glow{position:absolute;border-radius:50%;filter:blur(30px);opacity:.22}.hero-glow-one{width:370px;height:370px;right:-100px;top:20px;background:#2d68ff}.hero-glow-two{width:280px;height:280px;left:38%;bottom:-160px;background:#8e75ff}.trust-strip{border-block:1px solid var(--line);background:#fff}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}.trust-grid>div{display:grid;gap:2px;padding:25px 26px;border-right:1px solid var(--line)}.trust-grid>div:last-child{border-right:0}.trust-grid strong{color:var(--blue-950);font-size:.94rem}.trust-grid span{color:var(--muted);font-size:.79rem}.section{padding:108px 0}.section-soft{background:var(--soft)}.section-heading{max-width:760px;margin-bottom:50px}.section-heading h2,.approach-grid h2,.cta-card h2{font-size:clamp(2.5rem,4.9vw,4.5rem)}.section-heading p,.approach-lead{margin:22px 0 0;color:var(--muted);font-size:1.08rem}.product-grid{display:grid;grid-template-columns:1.12fr .94fr .94fr;gap:20px}.product-card{min-height:520px;padding:30px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:0 14px 36px rgba(19,37,81,.06)}.product-card-featured{background:linear-gradient(155deg,#fff,#eff4ff)}.product-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.product-card h3{margin:34px 0 0;color:var(--blue-950);font-size:2.1rem;letter-spacing:-.05em}.product-card p{color:var(--muted)}.product-tagline{margin:3px 0 22px!important;color:var(--blue-800)!important;font-size:1.05rem;font-weight:850}.availability{margin-top:38px;padding-top:20px;border-top:1px solid var(--line);font-size:.85rem;font-weight:750}.card-actions{display:flex;align-items:center;gap:20px;margin-top:35px}.text-link{color:var(--blue-700);font-weight:850;text-decoration:none}.approach-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start}.principles{display:grid;gap:16px}.principles article{display:grid;grid-template-columns:54px 1fr;gap:19px;padding:25px;border:1px solid var(--line);border-radius:18px;background:#fff}.principles article>span{width:44px;height:44px;display:grid;place-items:center;color:var(--blue-700);border-radius:13px;background:var(--blue-50);font-size:.78rem;font-weight:950}.principles h3{margin:0;color:var(--blue-950);font-size:1.2rem}.principles p{margin:4px 0 0;color:var(--muted)}.cta-section{padding:42px 0 110px;background:var(--soft)}.cta-card{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:52px 56px;color:#fff;border-radius:var(--radius-xl);background:radial-gradient(circle at 80% 20%,#396dff 0,transparent 34%),linear-gradient(135deg,var(--blue-700),var(--blue-950));box-shadow:0 28px 60px rgba(8,35,108,.22)}.cta-card h2{color:#fff}.cta-card p{margin:16px 0 0;color:rgba(255,255,255,.78)}.eyebrow.light{color:#bcd0ff}.button-light{color:var(--blue-900);background:#fff}.site-footer{padding:68px 0 25px;color:#c8d1e8;background:#07132f}.footer-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px}.footer-brand .brand{color:#fff}.footer-brand p{max-width:420px;color:#98a6c5}.footer-links{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}.footer-links div{display:grid;align-content:start;gap:11px}.footer-links strong{margin-bottom:8px;color:#fff}.footer-links a{color:#aeb9d1;text-decoration:none}.footer-links span{color:#7482a3}.footer-bottom{display:flex;justify-content:space-between;gap:30px;margin-top:55px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);color:#7f8eaf;font-size:.78rem} +@media(max-width:980px){.hero-grid,.approach-grid{grid-template-columns:1fr}.hero-copy{max-width:800px}.hero-visual{max-width:760px}.product-grid{grid-template-columns:1fr 1fr}.product-card-featured{grid-column:span 2}.trust-grid{grid-template-columns:repeat(2,1fr)}.trust-grid>div:nth-child(2){border-right:0}.trust-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}} +@media(max-width:760px){.container{width:min(calc(100% - 28px),var(--container))}.site-nav{position:absolute;left:14px;right:14px;top:68px;display:none;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 20px 45px rgba(8,35,108,.14)}.site-nav.open{display:grid}.menu-button{display:block}.hero{padding:64px 0}.hero h1{font-size:clamp(3rem,15vw,4.8rem)}.hero-visual,.product-stack{min-height:620px;height:620px}.stack-card{width:94%;transform:none}.stack-hudra{right:0}.stack-lildra{left:0;top:210px}.stack-pendra{right:0;top:405px}.trust-grid,.product-grid{grid-template-columns:1fr}.trust-grid>div{border-right:0;border-bottom:1px solid var(--line)}.product-card-featured{grid-column:auto}.product-card{min-height:auto}.section{padding:78px 0}.cta-card{align-items:flex-start;flex-direction:column;padding:38px 28px}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.card-actions{align-items:flex-start;flex-direction:column}} +@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}} diff --git a/hudra/index.html b/hudra/index.html new file mode 100644 index 0000000..38ede23 --- /dev/null +++ b/hudra/index.html @@ -0,0 +1,318 @@ + + + + + + + + + Hudra — Present QLearn lessons beautifully + + + + + + + + + + + +
+
+
+
+ +
+
+
Classroom presentation system
+

Turn QLearn lessons into presentations.

+

+ Hudra transforms HTML and QLearn lesson pages into a clean, classroom-ready slide experience—complete with presenter controls, previews, timers and dual-screen support. +

+ + + +

Free to use · Chromium browsers · Built by an Australian educator

+
+ +
+
+
+
+
qlearn.edu.au.au
+ Hudra +
+
+
+
+ + Hudra Presenter +
+
10:42
+
+ +
+
+ Current slide +
+
TODAY'S LESSON
+
+
+
+
+
+
+ + +
+
+
+
Presenter viewCurrent and next slide previews
+
Dual screenControls for you, slides for the class
+
+
+
+ +
+
+
Presentation-firstTurns lessons into slides
+
Presenter dashboardSee what is current and next
+
Classroom-readyTimers, clock and controls
+
IndependentCreated by an educator
+
+
+ +
+
+
+
What Hudra does
+

Your lesson page becomes the slide deck.

+

Keep your lesson content in QLearn or HTML, then use Hudra to present it as a focused, navigable classroom experience.

+
+ +
+
+
+ +
+

Presenter dashboard

+

Control the lesson from a dedicated dashboard with current and next slide previews, slide position, a clock and a classroom timer.

+
+ Current Lesson introduction + Next Learning intention + Timer 08:35 +
+
+ +
+
+ +
+

Dual-screen support

+

Keep presenter controls on your screen while students see a clean, distraction-free presentation.

+
+ +
+
+ +
+

Keyboard navigation

+

Move through a lesson quickly using familiar keyboard controls while keeping your attention on the class.

+
+ +
+
+ +
+

Image-slide optimisation

+

Image-only slides are recognised and displayed to make better use of the presentation area.

+
+ +
+ +
+

Present what you already built

+

Hudra does not replace QLearn with another editor. It gives your existing lesson content a purpose-built presentation mode.

+
+
+
+
+
+ +
+
+
+
How it works
+

From lesson page to presentation.

+

Hudra works with the content you already have instead of asking you to rebuild it in a separate slide platform.

+
+ +
+
+
01
+

Install Hudra

+

Download the latest release and load the extension in a Chromium-based browser.

+
+ +
+
02
+

Open your lesson

+

Navigate to the QLearn or HTML lesson you want to present.

+
+ +
+
03
+

Launch presentation mode

+

Use Hudra's dashboard to present, navigate and manage the lesson in class.

+
+
+
+
+ +
+
+
+
Privacy by design
+

Your lesson content stays yours.

+

Hudra is designed as a presentation tool for content already open in your browser. It does not exist to collect, sell or monetise your teaching content.

+ Read Hudra's privacy policy +
+
+
+ +
No advertising

Hudra is not supported by behavioural advertising.

+
+
+ +
No sale of user data

Your information is not a product.

+
+
+ +
Focused permissions

Hudra should only request access needed to provide its presentation features.

+
+
+
+
+ +
+
+
+
Questions
+

Frequently asked.

+

The essentials about Hudra and how it fits into a QLearn workflow.

+
+ +
+
+ What is Hudra? +

Hudra is a browser extension that turns HTML and QLearn lessons into classroom presentations. It includes a presenter dashboard, current and next slide previews, timers, keyboard navigation and dual-screen support.

+
+
+ Is Hudra a QLearn page editor? +

No. Hudra is focused on presenting lesson content you have already created. It adds a classroom presentation system rather than replacing QLearn's editor.

+
+
+ Is Hudra an official Queensland Department of Education product? +

No. Hudra is an independent project and is not endorsed by or affiliated with the Queensland Department of Education or Instructure.

+
+
+ Which browsers does Hudra support? +

Hudra currently targets Chromium-based browsers such as Google Chrome and Microsoft Edge.

+
+
+ Where can I download Hudra? +

The latest packaged release and installation instructions are available from the Hudra releases page.

+
+
+
+
+ +
+
+
+
Present directly from your lesson
+

QLearn content, without the QLearn clutter.

+

Turn the lesson you already made into a polished classroom presentation.

+
+ Download Hudra +
+
+
+ + + + + + \ No newline at end of file diff --git a/hudra/privacy/index.html b/hudra/privacy/index.html new file mode 100644 index 0000000..bf0417f --- /dev/null +++ b/hudra/privacy/index.html @@ -0,0 +1,33 @@ + + + + + + Privacy Policy — Hudra + + + + + + +
+ +
+ + diff --git a/hudra/support/index.html b/hudra/support/index.html new file mode 100644 index 0000000..23ba07a --- /dev/null +++ b/hudra/support/index.html @@ -0,0 +1,54 @@ + + + + + + + + Help and Support — Hudra + + + + + + + + + +
+ + + +
+ + + + + diff --git a/hudra/terms/index.html b/hudra/terms/index.html new file mode 100644 index 0000000..90dc624 --- /dev/null +++ b/hudra/terms/index.html @@ -0,0 +1,33 @@ + + + + + + Terms of Use — Hudra + + + + + +
+ +
+ + diff --git a/img/HudraLogo128.png b/img/HudraLogo128.png new file mode 100644 index 0000000..492115c Binary files /dev/null and b/img/HudraLogo128.png differ diff --git a/img/HudraLogo16.png b/img/HudraLogo16.png new file mode 100644 index 0000000..e44bbc2 Binary files /dev/null and b/img/HudraLogo16.png differ diff --git a/img/HudraLogo32.png b/img/HudraLogo32.png new file mode 100644 index 0000000..fa87ed1 Binary files /dev/null and b/img/HudraLogo32.png differ diff --git a/img/HudraLogo48.png b/img/HudraLogo48.png new file mode 100644 index 0000000..bc38bc2 Binary files /dev/null and b/img/HudraLogo48.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..f1bd5ff --- /dev/null +++ b/index.html @@ -0,0 +1,168 @@ + + + + + + + + Napper — Focused tools for better lessons + + + + + + + + +
+
+
+
+
+
+
Built by an Australian educator
+

Small tools that make digital lessons feel better.

+

Napper creates focused browser tools that remove clutter, improve presentation and help teachers get more from the lesson content they already have.

+ +

Independent · Practical · Privacy-conscious

+
+ +
+
+
+ Hudra logo +
Available

Hudra

Turn lesson pages into a classroom presentation system.

+
+
+ +
Up next

Lildra

Strip away QLearn clutter and show only the lesson page content.

+
+
+ +
Planned

Pendra

Bring completed slide decks into QLearn more easily.

+
+
+
+
+
+ +
+
+
One clear purposeEach product solves one real problem
+
Works with existing lessonsNo unnecessary platform replacement
+
Teacher-builtCreated from classroom needs
+
LightweightUseful without becoming another system
+
+
+ +
+
+
+
Products
+

A growing family of focused lesson tools.

+

Hudra is available now. Lildra is the next product in development, with Pendra planned after it.

+
+ +
+ + +
+
+ + In development +
+

Lildra

+

QLearn content, without the QLearn clutter.

+

Lildra is a cut-down companion to Hudra. It removes the surrounding QLearn interface and keeps the lesson page content front and centre.

+

Product page and release details coming next.

+
+ +
+
+ + Planned +
+

Pendra

+

A simpler path from slides to QLearn.

+

Pendra is planned as a tool for bringing completed presentation slides into QLearn pages without rebuilding them one image at a time.

+

Planned after Lildra.

+
+
+
+
+ +
+
+
+
The approach
+

Keep the lesson. Improve the experience.

+

Napper products are designed around a simple idea: teachers should not have to rebuild good content just to make it easier to use.

+
+
+
01

Focused

A narrow purpose is a feature, not a limitation.

+
02

Familiar

Products work alongside the tools educators already use.

+
03

Transparent

Clear behaviour, clear privacy information and accessible releases.

+
+
+
+ +
+
+
+
Available now

Start with Hudra.

Turn an existing QLearn lesson page into a cleaner classroom presentation.

+ Explore Hudra +
+
+
+
+ + + + + diff --git a/js/hudra.js b/js/hudra.js new file mode 100644 index 0000000..950ea34 --- /dev/null +++ b/js/hudra.js @@ -0,0 +1,19 @@ +const menuButton = document.querySelector('.menu-button'); +const siteNav = document.querySelector('.site-nav'); + +if (menuButton && siteNav) { + menuButton.addEventListener('click', () => { + const isOpen = siteNav.classList.toggle('open'); + menuButton.setAttribute('aria-expanded', String(isOpen)); + }); + + siteNav.querySelectorAll('a').forEach((link) => { + link.addEventListener('click', () => { + siteNav.classList.remove('open'); + menuButton.setAttribute('aria-expanded', 'false'); + }); + }); +} + +const year = document.getElementById('year'); +if (year) year.textContent = new Date().getFullYear(); diff --git a/js/napper.js b/js/napper.js new file mode 100644 index 0000000..a867b36 --- /dev/null +++ b/js/napper.js @@ -0,0 +1,19 @@ +const menuButton = document.querySelector('.menu-button'); +const navigation = document.querySelector('#site-nav'); + +if (menuButton && navigation) { + menuButton.addEventListener('click', () => { + const isOpen = navigation.classList.toggle('open'); + menuButton.setAttribute('aria-expanded', String(isOpen)); + }); + + navigation.querySelectorAll('a').forEach((link) => { + link.addEventListener('click', () => { + navigation.classList.remove('open'); + menuButton.setAttribute('aria-expanded', 'false'); + }); + }); +} + +const year = document.querySelector('#year'); +if (year) year.textContent = new Date().getFullYear();