/* ===================== SHARED DESIGN TOKENS ===================== */ :root { /* Accent — purple; used for btn-primary, btn-purple, and focus rings */ --color-accent: #6741d9; --color-accent-hover: #7a59de; /* Fixed text for elements on coloured backgrounds */ --color-text-on-dark: #ffffff; --color-text-on-light: #303030; /* Shadow */ --color-shadow-default: rgba(0, 0, 0, 0.12); /* Page-header banner — same on both sites */ --color-bg-page-header: #415090; /* Typography */ --font-body: Arial, sans-serif; --font-size-sm: 14px; --font-size-base: 16px; --font-size-lg: 20px; --font-size-xl: 28px; --font-size-hero: 42px; --line-height-base: 1.6; --line-height-loose: 1.8; /* Layout */ --max-width: 1080px; --nav-height: 60px; --section-pad: 64px 24px; --spacing-section-title: 40px; --radius: 8px; --transition: all 0.2s ease; } /* ===================== DARK THEME (U3D V3) Apply class="theme-dark" to Dark nav + light content body ===================== */ .theme-dark { --color-nav-bg: #0c112a; --color-bg-hero: #0c112a; --color-bg-dark: #eeeeee; --color-bg-mid: #d6d6d6; --color-bg-light: #ffffff; --color-text-default: #303030; --color-text-muted: #666666; --color-link: #303030; --color-link-hover: blue; --color-border-subtle: rgba(0, 0, 0, 0.1); --color-border-nav: rgba(255, 255, 255, 0.15); --color-btn-outline-hover: rgba(255, 255, 255, 0.1); --color-surface-glass: rgba(0, 0, 0, 0.04); } /* ===================== LIGHT THEME (UPC V2) Apply class="theme-light" to ===================== */ .theme-light { --color-nav-bg: #ffffff; --color-bg-hero: #ffffff; --color-bg-dark: #f4f4f8; --color-bg-mid: #ebebeb; --color-bg-light: #ffffff; --color-text-default: #303030; --color-text-muted: #888888; --color-link: #444444; --color-link-hover: blue; --color-border-subtle: rgba(0, 0, 0, 0.1); --color-border-nav: rgba(0, 0, 0, 0.1); --color-btn-outline-hover: rgba(0, 0, 0, 0.06); --color-surface-glass: rgba(0, 0, 0, 0.03); } /* ===================== RESET & BASE ===================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } table, thead, tbody, tr, th, td { margin: revert; padding: revert; } body { overflow-x: hidden; font-family: var(--font-body); font-size: var(--font-size-base); color: var(--color-text-on-light); line-height: var(--line-height-base); } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } /* ===================== LAYOUT HELPERS ===================== */ .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; } .section-inner { max-width: var(--max-width); margin: 0 auto; padding: var(--section-pad); } .section-title { font-size: var(--font-size-xl); margin-bottom: var(--spacing-section-title); text-align: center; color: var(--color-text-default); } /* ===================== BUTTONS ===================== */ .btn { display: inline-block; padding: 0.5em 1.4em; border-radius: var(--radius); font-size: var(--font-size-base); font-weight: 500; transition: var(--transition); cursor: pointer; } .btn-primary, .btn-purple { background-color: var(--color-accent); color: var(--color-text-on-dark); border: 2px solid var(--color-accent); } .btn-primary:hover, .btn-purple:hover { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); } .btn-outline { background-color: transparent; border: 2px solid currentColor; } .theme-dark .btn-outline { color: #ffffff; } .theme-light .btn-outline { color: var(--color-text-default); } .btn-outline:hover { background-color: var(--color-btn-outline-hover); } /* ===================== NAV ===================== */ .site-nav { position: fixed; top: 0; left: 0; width: 100vw; height: var(--nav-height); background-color: var(--color-nav-bg); z-index: 1000; border-bottom: 1px solid var(--color-border-nav); } .nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; height: 100%; position: relative; display: flex; align-items: center; justify-content: flex-end; } .nav-logo { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; z-index: 0; } .nav-logo img { height: 100%; width: auto; max-width: none; } .nav-links { position: relative; z-index: 1; display: flex; gap: 24px; } .nav-links a { color: var(--color-text-default); font-size: var(--font-size-sm); font-weight: 500; opacity: 0.85; transition: var(--transition); white-space: nowrap; } .theme-dark .nav-links a { color: #ffffff; } .nav-links a:hover { opacity: 1; color: #ffffff; } .theme-light .nav-links a:hover { color: blue; } .nav-links a[aria-current="page"] { opacity: 1; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .nav-toggle { display: none; background: none; border: none; color: var(--color-text-default); font-size: 0; cursor: pointer; line-height: 1; flex-shrink: 0; position: relative; z-index: 1; } .nav-toggle::before { content: '\2630'; font-size: 24px; line-height: 1; } .nav-toggle[aria-expanded="true"]::before { content: '\2715'; } .theme-dark .nav-toggle { color: #ffffff; } /* ===================== HERO ===================== */ .hero { background-color: var(--color-bg-hero); padding-top: calc(var(--nav-height) + 80px); padding-bottom: 80px; text-align: center; } .hero-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; } .hero-splash { display: block; margin: 0 auto 32px; max-width: 600px; } .hero-video-wrap { position: relative; max-width: 832px; margin: 0 auto 32px; } .hero-video-wrap .hero-splash { width: 100%; max-width: none; margin: 0; } .hero-video-main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.75); font-size: clamp(1.5rem, 5.5vw, 3.5rem); font-weight: 700; text-align: center; pointer-events: none; white-space: nowrap; } .hero-subtitle-brand { color: rgba(255, 255, 255, 1); } .hero-video-subtitle { position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.75); font-size: clamp(0.7rem, 1.8vw, 1rem); font-style: italic; font-weight: 400; text-align: center; pointer-events: none; white-space: nowrap; } .hero-tagline { color: var(--color-text-on-dark); font-size: var(--font-size-lg); margin-bottom: 32px; opacity: 0.9; } .theme-light .hero-tagline { color: var(--color-text-default); } .hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ===================== ABOUT ===================== */ .about { background-color: var(--color-bg-light); color: var(--color-text-default); } .about-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } .about-text h2 { font-size: var(--font-size-xl); color: var(--color-text-default); margin-bottom: 16px; } .about-text p { color: var(--color-text-default); line-height: var(--line-height-loose); } .about-image img { border-radius: var(--radius); box-shadow: 0 4px 24px var(--color-shadow-default); } /* ===================== HIGHLIGHTS ===================== */ .highlights { background-color: var(--color-bg-dark); color: var(--color-text-default); } .highlights .section-title { color: var(--color-text-default); } .cards { display: grid; grid-template-columns: 1fr; gap: 24px; } .card { background-color: var(--color-surface-glass); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); padding: 28px; } .card h3 { font-size: var(--font-size-lg); color: var(--color-text-default); margin-bottom: 12px; } .card p { color: var(--color-text-muted); font-size: var(--font-size-base); margin-bottom: 16px; } .card a { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; transition: var(--transition); } .card a:hover { color: var(--color-text-default); } /* ===================== SCREENSHOTS ===================== */ .screenshots { background-color: var(--color-bg-light); color: var(--color-text-default); } .screenshot-figure { max-width: 960px; margin: 0 auto; text-align: center; } .screenshot-figure img { border-radius: var(--radius); box-shadow: 0 4px 24px var(--color-shadow-default); width: 100%; } .screenshot-figure figcaption { margin-top: 12px; font-size: var(--font-size-sm); color: var(--color-text-muted); font-style: italic; } /* ===================== NEWS ===================== */ .news { background-color: var(--color-bg-dark); color: var(--color-text-default); text-align: center; } .news .section-title { color: var(--color-text-default); } .news p { color: var(--color-text-muted); margin-bottom: 24px; } .text-link { color: var(--color-text-muted); font-weight: 500; transition: var(--transition); } .text-link:hover { color: var(--color-text-default); } /* ===================== FOOTER ===================== */ .site-footer { background-color: var(--color-nav-bg); color: var(--color-text-on-dark); } .theme-light .site-footer { background-color: #000000; } .footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 32px 24px; display: grid; grid-template-columns: 1fr; gap: 16px; text-align: center; } .footer-col { color: rgba(255, 255, 255, 0.85); } .footer-col a { color: rgba(255, 255, 255, 0.85); font-size: var(--font-size-sm); transition: var(--transition); } .footer-col a:hover { color: #ffffff; } .footer-center p { font-size: var(--font-size-sm); color: rgba(255, 255, 255, 0.85); line-height: var(--line-height-loose); } /* ===================== FOCUS STYLES (accessibility) ===================== */ .nav-toggle:focus-visible, .nav-links a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .nav-links a:focus-visible { opacity: 1; } .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .card a:focus-visible, .text-link:focus-visible, .footer-col a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ===================== RESPONSIVE — TABLET (640px+) ===================== */ @media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } } /* ===================== RESPONSIVE — DESKTOP (1080px+) ===================== */ @media (min-width: 1080px) { .about-grid { grid-template-columns: 1fr 1fr; } .cards { grid-template-columns: repeat(4, 1fr); } } /* ===================== MOBILE NAV (below 1080px) ===================== */ @media (max-width: 1079.98px) { .nav-toggle { display: block; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); } .hero-splash { max-width: 100%; } .nav-links { display: none; position: absolute; z-index: 1000; top: var(--nav-height); left: 0; right: 0; background-color: var(--color-nav-bg); flex-direction: column; padding: 16px 24px 24px; gap: 16px; border-top: 1px solid var(--color-border-nav); } .nav-links.open { display: flex; } } /* ===================== PAGE HEADER BANNER ===================== */ .page-header { background-color: var(--color-bg-page-header); padding-top: calc(var(--nav-height) + 48px); padding-bottom: 48px; text-align: center; } .page-header h1 { color: var(--color-text-on-dark); font-size: var(--font-size-xl); font-weight: 600; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* ===================== CONTENT PAGE ===================== */ .content-page { background-color: var(--color-bg-light); color: var(--color-text-default); } .content-page h2 { font-size: var(--font-size-xl); color: var(--color-text-default); margin-top: 40px; margin-bottom: 16px; } .content-page h3 { font-size: var(--font-size-lg); color: var(--color-text-default); margin-top: 28px; margin-bottom: 12px; } .content-page p { line-height: var(--line-height-loose); margin-bottom: 16px; } .content-page a { color: var(--color-link); text-decoration: underline; transition: var(--transition); } .content-page a:hover { color: var(--color-link-hover); } .content-page .btn { text-decoration: none; } .content-page .btn-primary, .content-page .btn-primary:hover { color: var(--color-text-on-dark); } .content-page .btn-outline { color: var(--color-text-default); } .content-page hr { border: none; border-top: 1px solid var(--color-border-subtle); margin: 32px 0; } .content-page img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 8px 0; } .content-page strong, .content-page b { font-weight: 600; } /* Prevent content-page link styles bleeding into legacy table cells */ .content-page .boldheader4 a, .content-page .boldheader2 a, .content-page .order4 a, .content-page .order2 a, .content-page .rowborder4 a, .content-page .rowborder2 a { color: inherit; text-decoration: none; } /* ===================== FORMATS TABLE ===================== */ .formats-table td, .formats-table th { text-align: center; } /* ===================== NEWS HEADER ROW ===================== */ .news-header { width: 100%; background-color: #415090; color: #ffffff; } /* ===================== BUY TABLE ===================== */ .tableborder2, .tableborder4 { border-width: 2px; border-style: solid; border-color: #000000; border-collapse: collapse; } .tableborder2 td, .tableborder4 td { padding: 0; } .ordertableborder2, .ordertableborder4 { border-style: solid; border-color: #000000; border-bottom: 0px solid black; border-top: 0px solid black; border-left: 0px solid black; border-right: 0px solid black; border-collapse: collapse; } .boldheader2 { color: #ffffff; background-color: var(--color-bg-page-header); font-family: arial, sans-serif; font-size: 12pt; font-weight: bold; } .boldheader4 { color: #ffffff; background-color: #415090; font-family: arial, sans-serif; font-size: 12pt; font-weight: bold; } .rowborder2, .rowborder4 { border-style: solid; border-color: #000000; border-top: 1px solid black; border-bottom: 0px solid black; border-left: 0px solid black; border-right: 0px solid black; border-collapse: collapse; } .ordertext2, .ordertext4 { font-family: arial, sans-serif; font-size: 12pt; } .order2, .order4 { color: #000000; font-weight: bold; font-family: arial, sans-serif; font-size: 12pt; } .order2 input[type="image"], .order4 input[type="image"] { display: block; margin: 0 auto; } .order-mobile { display: none; } @media (max-width: 600px) { .order-desktop { display: none; } .order-mobile { display: block; } } /* ===================== DOWNLOAD TABLE ===================== */ .downtext2, .downtext4, .dropdown2, .dropdown4 { font-family: arial, sans-serif; font-size: 12pt; } .buttonpadding2, .buttonpadding4 { padding-top: 5px; padding-bottom: 5px; } .formbutton2, .formbutton4 { font-family: arial, sans-serif; font-size: 12pt; font-weight: bold; color: #ffffff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); width: 200px; padding: 10px 40px; border: 0px solid #000000; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); background: #f78d1d; background: linear-gradient(to bottom, #faa51a, #f47a20); cursor: pointer; } .formbutton2:hover, .formbutton4:hover { background: #f47c20; background: linear-gradient(to bottom, #f88e11, #f06015); } /* ===================== CODE BLOCKS ===================== */ pre.code2, pre.code4 { background-color: #D6D6D6; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 13px; padding: 10px 14px; color: #000000; border-radius: 4px; overflow-x: auto; } .code2, .code4 { background-color: #D6D6D6; font-family: courier; font-size: 10pt; padding: 4px; color: #AA3030; border-style: solid; border-width: 1px; border-color: #AA3030; } /* ===================== FORMS ===================== */ .myform2, .myform4 { margin: 0; } .optionseparator { background-color: #E5E5E5; color: blue; } /* ===================== BUY BUTTON ===================== */ .buybutton4 { font-family: arial, sans-serif; font-size: 12pt; font-weight: bold; color: #ffffff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); padding: 10px 40px; border: 0px #da7c0c; text-decoration: none; width: 200px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); background: #f78d1d; background: linear-gradient(to bottom, #faa51a, #f47a20); } .buybutton4:hover { cursor: pointer; background: #f47c20; background: linear-gradient(to bottom, #f88e11, #f06015); }