2026-03-03 20:47:56 +01:00
<!DOCTYPE html>
< html lang = "de" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2026-04-25 11:24:20 +02:00
< title > DocuMentor — Industrielle XSL-Transformationskontrolle< / title >
< link rel = "stylesheet" href = "fonts/fonts.css" >
2026-03-03 20:47:56 +01:00
< style >
2026-04-25 11:24:20 +02:00
/* ============================================================
RESET & BASE
============================================================ */
2026-03-03 20:47:56 +01:00
* , * :: before , * :: after {
margin : 0 ;
padding : 0 ;
box-sizing : border-box ;
}
: root {
2026-04-25 11:24:20 +02:00
--concrete-dark : #1a1a1a ;
--concrete-mid : #2a2a2a ;
--concrete-light : #3a3a3a ;
--concrete-surface : #444444 ;
--warning-yellow : #f0c030 ;
--warning-yellow-dim : #e8b800 ;
--safety-orange : #e05020 ;
--steel-text : #b0b0b0 ;
--steel-bright : #d0d0d0 ;
--white : #f0efe8 ;
--grid-line : rgba ( 240 , 192 , 48 , 0.07 ) ;
--grid-dot : rgba ( 240 , 192 , 48 , 0.12 ) ;
--blueprint-line : rgba ( 240 , 192 , 48 , 0.15 ) ;
--led-green : #30e060 ;
--led-red : #e03030 ;
2026-03-03 20:47:56 +01:00
}
html {
scroll-behavior : smooth ;
2026-04-25 11:24:20 +02:00
font-size : 16 px ;
2026-03-03 20:47:56 +01:00
}
body {
2026-04-25 11:24:20 +02:00
font-family : 'Barlow' , sans-serif ;
background-color : var ( - - concrete - dark ) ;
color : var ( - - steel - text ) ;
line-height : 1.6 ;
2026-03-03 20:47:56 +01:00
overflow-x : hidden ;
2026-04-25 11:24:20 +02:00
/* Concrete texture via noise-like gradient */
background-image :
repeating-linear-gradient (
0 deg ,
transparent ,
transparent 2 px ,
rgba ( 255 , 255 , 255 , 0.008 ) 2 px ,
rgba ( 255 , 255 , 255 , 0.008 ) 4 px
) ,
repeating-linear-gradient (
90 deg ,
transparent ,
transparent 2 px ,
rgba ( 255 , 255 , 255 , 0.005 ) 2 px ,
rgba ( 255 , 255 , 255 , 0.005 ) 4 px
) ;
}
/* ============================================================
GLOBAL GRID OVERLAY
============================================================ */
2026-03-03 20:47:56 +01:00
body :: before {
content : '' ;
position : fixed ;
2026-04-25 11:24:20 +02:00
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
2026-03-03 20:47:56 +01:00
pointer-events : none ;
2026-04-25 11:24:20 +02:00
z-index : 0 ;
background-image :
radial-gradient ( circle , var ( - - grid - dot ) 1 px , transparent 1 px ) ;
background-size : 40 px 40 px ;
opacity : 0.5 ;
}
/* ============================================================
UTILITY CLASSES
============================================================ */
. container {
max-width : 1200 px ;
margin : 0 auto ;
padding : 0 2 rem ;
position : relative ;
z-index : 1 ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
section {
position : relative ;
z-index : 1 ;
}
/* ============================================================
STENCIL SECTION LABELS
============================================================ */
. section-label {
font-family : 'Oswald' , sans-serif ;
font-weight : 700 ;
font-size : 0.75 rem ;
letter-spacing : 0.3 em ;
text-transform : uppercase ;
color : var ( - - warning - yellow - dim ) ;
display : flex ;
align-items : center ;
gap : 1 rem ;
margin-bottom : 0.75 rem ;
}
. section-label :: before {
content : attr ( data - num ) ;
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.65 rem ;
color : var ( - - concrete - surface ) ;
border : 1 px dashed var ( - - concrete - surface ) ;
padding : 0.15 rem 0.4 rem ;
letter-spacing : 0.1 em ;
}
. section-title {
font-family : 'Oswald' , sans-serif ;
font-weight : 700 ;
font-size : 2.5 rem ;
color : var ( - - white ) ;
text-transform : uppercase ;
letter-spacing : 0.05 em ;
line-height : 1.1 ;
margin-bottom : 1 rem ;
}
. section-subtitle {
font-family : 'Barlow' , sans-serif ;
font-weight : 300 ;
font-size : 1.1 rem ;
color : var ( - - steel - text ) ;
max-width : 700 px ;
margin-bottom : 3 rem ;
}
/* ============================================================
HAZARD STRIPE
============================================================ */
. hazard-stripe {
height : 6 px ;
background : repeating-linear-gradient (
-45 deg ,
var ( - - warning - yellow ) ,
var ( - - warning - yellow ) 8 px ,
var ( - - concrete - dark ) 8 px ,
var ( - - concrete - dark ) 16 px
) ;
width : 100 % ;
}
. hazard-stripe-thin {
height : 3 px ;
background : repeating-linear-gradient (
-45 deg ,
var ( - - warning - yellow - dim ) ,
var ( - - warning - yellow - dim ) 5 px ,
var ( - - concrete - mid ) 5 px ,
var ( - - concrete - mid ) 10 px
) ;
opacity : 0.5 ;
}
/* ============================================================
CORNER BRACKETS (for cards and panels)
============================================================ */
. corner-brackets {
position : relative ;
}
. corner-brackets :: before ,
. corner-brackets :: after {
content : '' ;
position : absolute ;
width : 16 px ;
height : 16 px ;
pointer-events : none ;
}
. corner-brackets :: before {
top : -1 px ;
left : -1 px ;
border-top : 2 px solid var ( - - warning - yellow - dim ) ;
border-left : 2 px solid var ( - - warning - yellow - dim ) ;
}
. corner-brackets :: after {
bottom : -1 px ;
right : -1 px ;
border-bottom : 2 px solid var ( - - warning - yellow - dim ) ;
border-right : 2 px solid var ( - - warning - yellow - dim ) ;
}
/* ============================================================
RIVET DECORATIONS
============================================================ */
. riveted {
position : relative ;
}
. riveted . rivet {
position : absolute ;
width : 8 px ;
height : 8 px ;
border-radius : 50 % ;
background : radial-gradient ( circle at 35 % 35 % , #555 , #2a2a2a 60 % , #1a1a1a ) ;
box-shadow : inset 0 1 px 1 px rgba ( 255 , 255 , 255 , 0.15 ) , 0 1 px 2 px rgba ( 0 , 0 , 0 , 0.5 ) ;
}
. riveted . rivet-tl { top : 10 px ; left : 10 px ; }
. riveted . rivet-tr { top : 10 px ; right : 10 px ; }
. riveted . rivet-bl { bottom : 10 px ; left : 10 px ; }
. riveted . rivet-br { bottom : 10 px ; right : 10 px ; }
/* ============================================================
LED INDICATOR
============================================================ */
. led {
display : inline-block ;
width : 8 px ;
height : 8 px ;
border-radius : 50 % ;
margin-right : 6 px ;
vertical-align : middle ;
box-shadow : 0 0 4 px currentColor ;
}
. led-green {
background-color : var ( - - led - green ) ;
color : var ( - - led - green ) ;
}
. led-yellow {
background-color : var ( - - warning - yellow ) ;
color : var ( - - warning - yellow ) ;
}
. led-orange {
background-color : var ( - - safety - orange ) ;
color : var ( - - safety - orange ) ;
}
/* ============================================================
SCROLL REVEAL
============================================================ */
. reveal {
opacity : 0 ;
transform : translateY ( 30 px ) ;
transition : opacity 0.6 s linear , transform 0.6 s linear ;
}
. reveal . from-left {
transform : translateX ( -40 px ) ;
}
. reveal . from-right {
transform : translateX ( 40 px ) ;
}
. reveal . from-bottom {
transform : translateY ( 40 px ) ;
}
. reveal . visible {
opacity : 1 ;
transform : translate ( 0 , 0 ) ;
}
/* Staggered delays for children */
. reveal-delay-1 { transition-delay : 0.1 s ; }
. reveal-delay-2 { transition-delay : 0.2 s ; }
. reveal-delay-3 { transition-delay : 0.3 s ; }
. reveal-delay-4 { transition-delay : 0.4 s ; }
. reveal-delay-5 { transition-delay : 0.5 s ; }
. reveal-delay-6 { transition-delay : 0.6 s ; }
/* ============================================================
NAVBAR
============================================================ */
. navbar {
2026-03-03 20:47:56 +01:00
position : fixed ;
top : 0 ;
left : 0 ;
2026-04-25 11:24:20 +02:00
width : 100 % ;
z-index : 1000 ;
background : rgba ( 26 , 26 , 26 , 0.92 ) ;
backdrop-filter : blur ( 10 px ) ;
border-bottom : 1 px solid rgba ( 240 , 192 , 48 , 0.12 ) ;
}
. navbar-inner {
2026-03-03 20:47:56 +01:00
display : flex ;
align-items : center ;
justify-content : space-between ;
2026-04-25 11:24:20 +02:00
padding : 0 2 rem ;
height : 56 px ;
max-width : 1200 px ;
margin : 0 auto ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. navbar-brand {
display : flex ;
align-items : center ;
gap : 0.5 rem ;
text-decoration : none ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. navbar-brand-icon {
width : 28 px ;
height : 28 px ;
border : 2 px solid var ( - - warning - yellow ) ;
display : flex ;
align-items : center ;
justify-content : center ;
font-family : 'Oswald' , sans-serif ;
font-weight : 700 ;
font-size : 0.85 rem ;
color : var ( - - warning - yellow ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. navbar-brand-text {
font-family : 'Oswald' , sans-serif ;
font-weight : 600 ;
font-size : 1.1 rem ;
color : var ( - - white ) ;
letter-spacing : 0.1 em ;
text-transform : uppercase ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. navbar-links {
2026-03-03 20:47:56 +01:00
display : flex ;
2026-04-25 11:24:20 +02:00
gap : 2 rem ;
2026-03-03 20:47:56 +01:00
list-style : none ;
}
2026-04-25 11:24:20 +02:00
. navbar-links a {
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.75 rem ;
color : var ( - - steel - text ) ;
2026-03-03 20:47:56 +01:00
text-decoration : none ;
text-transform : uppercase ;
2026-04-25 11:24:20 +02:00
letter-spacing : 0.15 em ;
padding : 0.25 rem 0 ;
border-bottom : 1 px solid transparent ;
transition : color 0.2 s linear , border-color 0.2 s linear ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. navbar-links a : hover {
color : var ( - - warning - yellow ) ;
border-bottom-color : var ( - - warning - yellow ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. navbar-mobile-toggle {
display : none ;
background : none ;
border : 1 px solid var ( - - concrete - surface ) ;
color : var ( - - steel - text ) ;
padding : 0.4 rem 0.6 rem ;
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.75 rem ;
cursor : pointer ;
text-transform : uppercase ;
letter-spacing : 0.1 em ;
}
/* ============================================================
HERO SECTION
============================================================ */
2026-03-03 20:47:56 +01:00
. hero {
min-height : 100 vh ;
display : flex ;
align-items : center ;
2026-04-25 11:24:20 +02:00
padding-top : 56 px ;
2026-03-03 20:47:56 +01:00
position : relative ;
2026-04-25 11:24:20 +02:00
overflow : hidden ;
background :
linear-gradient ( 135 deg , var ( - - concrete - dark ) 0 % , var ( - - concrete - mid ) 50 % , var ( - - concrete - dark ) 100 % ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
/* Blueprint grid background for hero */
2026-03-03 20:47:56 +01:00
. hero :: before {
content : '' ;
position : absolute ;
2026-04-25 11:24:20 +02:00
inset : 0 ;
background-image :
linear-gradient ( var ( - - grid - line ) 1 px , transparent 1 px ) ,
linear-gradient ( 90 deg , var ( - - grid - line ) 1 px , transparent 1 px ) ;
background-size : 80 px 80 px ;
opacity : 0.8 ;
}
/* Crosshair in hero */
. hero :: after {
content : '+' ;
position : absolute ;
top : 50 % ;
2026-03-03 20:47:56 +01:00
left : 50 % ;
2026-04-25 11:24:20 +02:00
transform : translate ( -50 % , -50 % ) ;
font-family : 'Share Tech Mono' , monospace ;
font-size : 12 rem ;
color : rgba ( 240 , 192 , 48 , 0.03 ) ;
2026-03-03 20:47:56 +01:00
pointer-events : none ;
}
2026-04-25 11:24:20 +02:00
. hero-content {
position : relative ;
z-index : 2 ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. hero-panel {
background : rgba ( 26 , 26 , 26 , 0.85 ) ;
border : 1 px solid rgba ( 240 , 192 , 48 , 0.2 ) ;
padding : 3 rem 3.5 rem ;
position : relative ;
max-width : 750 px ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. hero-system-tag {
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.7 rem ;
color : var ( - - concrete - surface ) ;
letter-spacing : 0.2 em ;
2026-03-03 20:47:56 +01:00
margin-bottom : 1.5 rem ;
2026-04-25 11:24:20 +02:00
display : flex ;
align-items : center ;
gap : 0.75 rem ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. hero-system-tag . led {
animation : led-blink 2 s infinite ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
@ keyframes led-blink {
0 % , 100 % { opacity : 1 ; }
50 % { opacity : 0.4 ; }
}
. hero-title {
font-family : 'Oswald' , sans-serif ;
font-weight : 700 ;
font-size : 4.5 rem ;
color : var ( - - white ) ;
text-transform : uppercase ;
letter-spacing : 0.08 em ;
line-height : 1 ;
margin-bottom : 0.5 rem ;
}
. hero-title span {
color : var ( - - warning - yellow ) ;
}
. hero-tagline {
font-family : 'Barlow Condensed' , sans-serif ;
font-weight : 400 ;
font-size : 1.5 rem ;
color : var ( - - steel - bright ) ;
letter-spacing : 0.05 em ;
margin-bottom : 0.75 rem ;
}
. hero-desc {
font-family : 'Barlow' , sans-serif ;
font-weight : 300 ;
font-size : 1 rem ;
color : var ( - - steel - text ) ;
margin-bottom : 2 rem ;
max-width : 550 px ;
line-height : 1.7 ;
2026-03-03 20:47:56 +01:00
}
. hero-actions {
display : flex ;
gap : 1 rem ;
2026-04-25 11:24:20 +02:00
flex-wrap : wrap ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
/* BUTTONS */
2026-03-03 20:47:56 +01:00
. btn-primary {
display : inline-flex ;
align-items : center ;
gap : 0.5 rem ;
2026-04-25 11:24:20 +02:00
font-family : 'Oswald' , sans-serif ;
2026-03-03 20:47:56 +01:00
font-weight : 600 ;
2026-04-25 11:24:20 +02:00
font-size : 0.9 rem ;
text-transform : uppercase ;
letter-spacing : 0.15 em ;
padding : 0.85 rem 2 rem ;
background : var ( - - warning - yellow ) ;
color : var ( - - concrete - dark ) ;
2026-03-03 20:47:56 +01:00
border : none ;
cursor : pointer ;
text-decoration : none ;
2026-04-25 11:24:20 +02:00
position : relative ;
transition : background 0.15 s linear , transform 0.1 s linear , box-shadow 0.15 s linear ;
2026-03-03 20:47:56 +01:00
}
. btn-primary : hover {
2026-04-25 11:24:20 +02:00
background : var ( - - warning - yellow - dim ) ;
2026-03-03 20:47:56 +01:00
transform : translateY ( -1 px ) ;
2026-04-25 11:24:20 +02:00
box-shadow : 0 4 px 16 px rgba ( 240 , 192 , 48 , 0.25 ) ;
}
. btn-primary : active {
transform : translateY ( 1 px ) ;
box-shadow : none ;
2026-03-03 20:47:56 +01:00
}
. btn-secondary {
display : inline-flex ;
align-items : center ;
gap : 0.5 rem ;
2026-04-25 11:24:20 +02:00
font-family : 'Oswald' , sans-serif ;
font-weight : 600 ;
font-size : 0.9 rem ;
text-transform : uppercase ;
letter-spacing : 0.15 em ;
2026-03-03 20:47:56 +01:00
padding : 0.85 rem 2 rem ;
background : transparent ;
2026-04-25 11:24:20 +02:00
color : var ( - - steel - bright ) ;
border : 1 px solid var ( - - concrete - surface ) ;
2026-03-03 20:47:56 +01:00
cursor : pointer ;
text-decoration : none ;
2026-04-25 11:24:20 +02:00
transition : border-color 0.15 s linear , color 0.15 s linear , transform 0.1 s linear ;
2026-03-03 20:47:56 +01:00
}
. btn-secondary : hover {
2026-04-25 11:24:20 +02:00
border-color : var ( - - warning - yellow - dim ) ;
color : var ( - - warning - yellow ) ;
transform : translateY ( -1 px ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. btn-secondary : active {
transform : translateY ( 1 px ) ;
}
/* Hero measurement marks */
. hero-measure {
2026-03-03 20:47:56 +01:00
position : absolute ;
2026-04-25 11:24:20 +02:00
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.55 rem ;
color : rgba ( 240 , 192 , 48 , 0.2 ) ;
letter-spacing : 0.1 em ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. hero-measure-top {
top : -20 px ;
left : 0 ;
display : flex ;
align-items : flex-end ;
gap : 0.5 rem ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. hero-measure-top :: before {
content : '' ;
display : block ;
width : 200 px ;
height : 1 px ;
background : rgba ( 240 , 192 , 48 , 0.15 ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. hero-measure-right {
top : 0 ;
right : -30 px ;
writing-mode : vertical - rl ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
/* ============================================================
FEATURES SECTION
============================================================ */
. features {
padding : 6 rem 0 ;
background : var ( - - concrete - mid ) ;
position : relative ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. features :: before {
content : '' ;
position : absolute ;
inset : 0 ;
background-image :
radial-gradient ( circle , var ( - - grid - dot ) 1 px , transparent 1 px ) ;
background-size : 30 px 30 px ;
opacity : 0.3 ;
2026-03-03 20:47:56 +01:00
}
. features-grid {
display : grid ;
grid-template-columns : repeat ( 3 , 1 fr ) ;
2026-04-25 11:24:20 +02:00
gap : 1.5 rem ;
position : relative ;
z-index : 1 ;
2026-03-03 20:47:56 +01:00
}
. feature-card {
2026-04-25 11:24:20 +02:00
background : var ( - - concrete - dark ) ;
border : 1 px dashed rgba ( 240 , 192 , 48 , 0.15 ) ;
padding : 2 rem 1.5 rem ;
2026-03-03 20:47:56 +01:00
position : relative ;
2026-04-25 11:24:20 +02:00
transition : border-color 0.2 s linear , box-shadow 0.2 s linear ;
2026-03-03 20:47:56 +01:00
}
. feature-card : hover {
2026-04-25 11:24:20 +02:00
border-color : rgba ( 240 , 192 , 48 , 0.4 ) ;
box-shadow : 0 0 20 px rgba ( 240 , 192 , 48 , 0.05 ) ;
}
. feature-card : hover . feature-icon {
border-color : var ( - - warning - yellow ) ;
color : var ( - - warning - yellow ) ;
}
. feature-number {
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.6 rem ;
color : var ( - - concrete - surface ) ;
position : absolute ;
top : 8 px ;
right : 10 px ;
letter-spacing : 0.1 em ;
2026-03-03 20:47:56 +01:00
}
. feature-icon {
width : 44 px ;
height : 44 px ;
2026-04-25 11:24:20 +02:00
border : 1 px solid var ( - - concrete - surface ) ;
2026-03-03 20:47:56 +01:00
display : flex ;
align-items : center ;
justify-content : center ;
2026-04-25 11:24:20 +02:00
margin-bottom : 1.25 rem ;
font-size : 1.3 rem ;
color : var ( - - steel - text ) ;
transition : border-color 0.2 s linear , color 0.2 s linear ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. feature-name {
font-family : 'Barlow Condensed' , sans-serif ;
font-weight : 600 ;
font-size : 1.15 rem ;
color : var ( - - steel - bright ) ;
text-transform : uppercase ;
letter-spacing : 0.05 em ;
margin-bottom : 0.5 rem ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. feature-desc {
font-family : 'Barlow' , sans-serif ;
font-weight : 300 ;
2026-03-03 20:47:56 +01:00
font-size : 0.9 rem ;
2026-04-25 11:24:20 +02:00
color : var ( - - steel - text ) ;
line-height : 1.6 ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
/* ============================================================
WORKFLOW SECTION
============================================================ */
. workflow {
padding : 6 rem 0 ;
background : var ( - - concrete - dark ) ;
2026-03-03 20:47:56 +01:00
position : relative ;
}
. workflow-steps {
display : grid ;
2026-04-25 11:24:20 +02:00
grid-template-columns : repeat ( 4 , 1 fr ) ;
2026-03-03 20:47:56 +01:00
gap : 0 ;
position : relative ;
}
2026-04-25 11:24:20 +02:00
/* Connecting line */
. workflow-steps :: before {
content : '' ;
position : absolute ;
top : 36 px ;
left : 10 % ;
right : 10 % ;
height : 2 px ;
background : repeating-linear-gradient (
90 deg ,
var ( - - warning - yellow - dim ) 0 ,
var ( - - warning - yellow - dim ) 8 px ,
transparent 8 px ,
transparent 16 px
) ;
opacity : 0.3 ;
z-index : 0 ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. workflow-step {
text-align : center ;
position : relative ;
z-index : 1 ;
padding : 0 1 rem ;
2026-03-03 20:47:56 +01:00
}
. step-number {
2026-04-25 11:24:20 +02:00
width : 72 px ;
height : 72 px ;
margin : 0 auto 1.5 rem ;
background : var ( - - concrete - mid ) ;
border : 2 px solid var ( - - concrete - surface ) ;
display : flex ;
align-items : center ;
justify-content : center ;
font-family : 'Oswald' , sans-serif ;
font-weight : 700 ;
font-size : 1.8 rem ;
color : var ( - - steel - text ) ;
position : relative ;
transition : border-color 0.3 s linear , color 0.3 s linear ;
2026-03-03 20:47:56 +01:00
}
. workflow-step : hover . step-number {
2026-04-25 11:24:20 +02:00
border-color : var ( - - warning - yellow ) ;
color : var ( - - warning - yellow ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. step-number :: after {
content : '' ;
position : absolute ;
bottom : -12 px ;
left : 50 % ;
transform : translateX ( -50 % ) ;
width : 2 px ;
height : 12 px ;
background : var ( - - concrete - surface ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. step-title {
font-family : 'Barlow Condensed' , sans-serif ;
font-weight : 600 ;
font-size : 1.05 rem ;
color : var ( - - steel - bright ) ;
text-transform : uppercase ;
letter-spacing : 0.05 em ;
margin-bottom : 0.5 rem ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. step-desc {
font-family : 'Barlow' , sans-serif ;
font-weight : 300 ;
font-size : 0.85 rem ;
color : var ( - - steel - text ) ;
line-height : 1.5 ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
/* ============================================================
SCREENSHOT / DEMO SECTION
============================================================ */
. demo {
padding : 6 rem 0 ;
background : var ( - - concrete - mid ) ;
position : relative ;
2026-03-03 20:47:56 +01:00
overflow : hidden ;
2026-04-25 11:24:20 +02:00
}
. demo-frame {
background : var ( - - concrete - dark ) ;
border : 1 px solid rgba ( 240 , 192 , 48 , 0.15 ) ;
padding : 0 ;
2026-03-03 20:47:56 +01:00
position : relative ;
2026-04-25 11:24:20 +02:00
max-width : 960 px ;
margin : 0 auto ;
2026-03-03 20:47:56 +01:00
}
. demo-titlebar {
display : flex ;
align-items : center ;
2026-04-25 11:24:20 +02:00
gap : 0.75 rem ;
padding : 0.6 rem 1 rem ;
background : rgba ( 42 , 42 , 42 , 0.9 ) ;
border-bottom : 1 px solid rgba ( 240 , 192 , 48 , 0.1 ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. demo-titlebar-dots {
display : flex ;
gap : 6 px ;
}
. demo-titlebar-dot {
width : 10 px ;
height : 10 px ;
2026-03-03 20:47:56 +01:00
border-radius : 50 % ;
2026-04-25 11:24:20 +02:00
border : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. demo-titlebar-dot . red { background : #e03030 ; }
. demo-titlebar-dot . yellow { background : var ( - - warning - yellow ) ; }
. demo-titlebar-dot . green { background : var ( - - led - green ) ; }
2026-03-03 20:47:56 +01:00
2026-04-25 11:24:20 +02:00
. demo-titlebar-text {
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.7 rem ;
color : var ( - - concrete - surface ) ;
letter-spacing : 0.1 em ;
2026-03-03 20:47:56 +01:00
}
. demo-content {
2026-04-25 11:24:20 +02:00
display : flex ;
2026-03-03 20:47:56 +01:00
min-height : 420 px ;
}
2026-04-25 11:24:20 +02:00
/* Sidebar mockup */
2026-03-03 20:47:56 +01:00
. demo-sidebar {
2026-04-25 11:24:20 +02:00
width : 240 px ;
border-right : 1 px solid rgba ( 240 , 192 , 48 , 0.08 ) ;
padding : 1 rem ;
flex-shrink : 0 ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. demo-sidebar-label {
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.6 rem ;
color : var ( - - concrete - surface ) ;
2026-03-03 20:47:56 +01:00
text-transform : uppercase ;
2026-04-25 11:24:20 +02:00
letter-spacing : 0.2 em ;
margin-bottom : 0.75 rem ;
padding-bottom : 0.5 rem ;
border-bottom : 1 px dashed rgba ( 240 , 192 , 48 , 0.1 ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. tree-item {
padding : 0.3 rem 0 ;
padding-left : 0 ;
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.72 rem ;
color : var ( - - steel - text ) ;
display : flex ;
align-items : center ;
gap : 0.4 rem ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. tree-item . level-1 { padding-left : 1 rem ; }
. tree-item . level-2 { padding-left : 2 rem ; }
. tree-icon {
color : var ( - - warning - yellow - dim ) ;
font-size : 0.65 rem ;
width : 14 px ;
text-align : center ;
flex-shrink : 0 ;
}
. tree-item . active {
color : var ( - - warning - yellow ) ;
background : rgba ( 240 , 192 , 48 , 0.05 ) ;
margin : 0 -0.5 rem ;
padding-left : 2.5 rem ;
padding-right : 0.5 rem ;
}
/* Main panels mockup */
. demo-panels {
flex : 1 ;
display : grid ;
grid-template-columns : 1 fr 1 fr 1 fr ;
gap : 0 ;
}
. demo-panel {
border-right : 1 px solid rgba ( 240 , 192 , 48 , 0.06 ) ;
display : flex ;
flex-direction : column ;
position : relative ;
}
. demo-panel : last-child {
border-right : none ;
}
. demo-panel-header {
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.6 rem ;
color : var ( - - concrete - surface ) ;
text-transform : uppercase ;
letter-spacing : 0.15 em ;
padding : 0.5 rem 0.75 rem ;
border-bottom : 1 px solid rgba ( 240 , 192 , 48 , 0.06 ) ;
2026-03-03 20:47:56 +01:00
display : flex ;
align-items : center ;
gap : 0.5 rem ;
2026-04-25 11:24:20 +02:00
}
. demo-panel-body {
flex : 1 ;
display : flex ;
align-items : center ;
justify-content : center ;
position : relative ;
overflow : hidden ;
}
/* Simulated PDF pages */
. mock-pdf {
width : 70 % ;
height : 80 % ;
background : #f5f5f0 ;
box-shadow : 0 2 px 12 px rgba ( 0 , 0 , 0 , 0.3 ) ;
padding : 12 % ;
display : flex ;
flex-direction : column ;
gap : 6 px ;
}
. mock-pdf-line {
height : 3 px ;
background : #c0c0c0 ;
border-radius : 1 px ;
}
. mock-pdf-line . short { width : 60 % ; }
. mock-pdf-line . medium { width : 80 % ; }
. mock-pdf-line . long { width : 95 % ; }
. mock-pdf-line . gap { height : 8 px ; background : transparent ; }
. mock-pdf-line . diff-add {
background : rgba ( 48 , 224 , 96 , 0.4 ) ;
}
. mock-pdf-line . diff-remove {
background : rgba ( 224 , 48 , 48 , 0.3 ) ;
}
. mock-pdf-line . diff-change {
background : rgba ( 240 , 192 , 48 , 0.4 ) ;
}
/* Middle diff panel overlay */
. demo-panel . diff . mock-pdf {
background : #f0ece0 ;
}
/* ============================================================
TECH STACK SECTION
============================================================ */
. techstack {
padding : 6 rem 0 ;
background : var ( - - concrete - dark ) ;
position : relative ;
}
. tech-grid {
display : flex ;
flex-wrap : wrap ;
gap : 1 rem ;
justify-content : center ;
}
. tech-badge {
display : flex ;
align-items : center ;
gap : 0.6 rem ;
padding : 0.7 rem 1.2 rem ;
background : var ( - - concrete - mid ) ;
border : 1 px solid rgba ( 240 , 192 , 48 , 0.1 ) ;
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.8 rem ;
color : var ( - - steel - text ) ;
letter-spacing : 0.05 em ;
transition : border-color 0.2 s linear , color 0.2 s linear , transform 0.15 s linear ;
2026-03-03 20:47:56 +01:00
cursor : default ;
2026-04-25 11:24:20 +02:00
position : relative ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. tech-badge : hover {
border-color : var ( - - warning - yellow - dim ) ;
color : var ( - - warning - yellow ) ;
transform : translateY ( -2 px ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. tech-badge . led {
flex-shrink : 0 ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. tech-category {
font-family : 'Oswald' , sans-serif ;
font-weight : 600 ;
font-size : 0.7 rem ;
text-transform : uppercase ;
letter-spacing : 0.2 em ;
color : var ( - - concrete - surface ) ;
text-align : center ;
width : 100 % ;
margin-top : 1 rem ;
margin-bottom : 0.5 rem ;
display : flex ;
align-items : center ;
gap : 1 rem ;
justify-content : center ;
}
. tech-category :: before ,
. tech-category :: after {
content : '' ;
height : 1 px ;
width : 40 px ;
background : var ( - - concrete - surface ) ;
}
/* ============================================================
DOWNLOAD / GETTING STARTED
============================================================ */
. download {
padding : 6 rem 0 ;
background : var ( - - concrete - mid ) ;
position : relative ;
}
. download-panel {
background : var ( - - concrete - dark ) ;
border : 1 px solid rgba ( 240 , 192 , 48 , 0.15 ) ;
padding : 3 rem ;
max-width : 800 px ;
margin : 0 auto ;
position : relative ;
}
. install-steps {
display : flex ;
flex-direction : column ;
gap : 1 rem ;
}
. install-step {
display : flex ;
align-items : stretch ;
gap : 1 rem ;
}
. install-step-num {
font-family : 'Oswald' , sans-serif ;
font-weight : 700 ;
font-size : 0.9 rem ;
color : var ( - - concrete - surface ) ;
width : 28 px ;
display : flex ;
align-items : center ;
justify-content : center ;
flex-shrink : 0 ;
border-right : 2 px solid var ( - - concrete - surface ) ;
padding-right : 0.75 rem ;
}
. install-step-content {
flex : 1 ;
}
. install-step-label {
font-family : 'Barlow Condensed' , sans-serif ;
font-weight : 500 ;
font-size : 0.85 rem ;
color : var ( - - steel - text ) ;
text-transform : uppercase ;
letter-spacing : 0.1 em ;
margin-bottom : 0.4 rem ;
}
. code-block {
background : rgba ( 26 , 26 , 26 , 0.8 ) ;
border : 1 px solid rgba ( 240 , 192 , 48 , 0.08 ) ;
padding : 0.75 rem 1 rem ;
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.85 rem ;
color : var ( - - warning - yellow ) ;
overflow-x : auto ;
position : relative ;
}
. code-block . prompt {
color : var ( - - concrete - surface ) ;
user-select : none ;
}
. code-block : hover {
border-color : rgba ( 240 , 192 , 48 , 0.25 ) ;
}
. download-binaries {
margin-top : 2.5 rem ;
padding-top : 2 rem ;
border-top : 1 px dashed rgba ( 240 , 192 , 48 , 0.15 ) ;
}
. download-binaries-label {
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.65 rem ;
color : var ( - - concrete - surface ) ;
text-transform : uppercase ;
letter-spacing : 0.2 em ;
margin-bottom : 1 rem ;
display : flex ;
align-items : center ;
gap : 0.75 rem ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. download-binaries-label :: before {
content : '' ;
display : block ;
width : 30 px ;
height : 1 px ;
background : var ( - - concrete - surface ) ;
}
2026-03-03 20:47:56 +01:00
2026-04-25 11:24:20 +02:00
. download-cards {
2026-03-03 20:47:56 +01:00
display : grid ;
2026-04-25 11:24:20 +02:00
grid-template-columns : 1 fr 1 fr ;
2026-03-03 20:47:56 +01:00
gap : 1 rem ;
}
2026-04-25 11:24:20 +02:00
. download-card {
background : rgba ( 42 , 42 , 42 , 0.6 ) ;
border : 1 px solid rgba ( 240 , 192 , 48 , 0.12 ) ;
padding : 1.25 rem 1.5 rem ;
display : flex ;
flex-direction : column ;
gap : 0.75 rem ;
position : relative ;
transition : border-color 0.2 s linear , box-shadow 0.2 s linear ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. download-card : hover {
border-color : rgba ( 240 , 192 , 48 , 0.35 ) ;
box-shadow : 0 0 16 px rgba ( 240 , 192 , 48 , 0.06 ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. download-card-header {
2026-03-03 20:47:56 +01:00
display : flex ;
align-items : center ;
2026-04-25 11:24:20 +02:00
justify-content : space-between ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. download-card-format {
font-family : 'Oswald' , sans-serif ;
font-weight : 700 ;
font-size : 1.1 rem ;
color : var ( - - steel - bright ) ;
text-transform : uppercase ;
letter-spacing : 0.05 em ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. download-card-badge {
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.6 rem ;
color : var ( - - warning - yellow - dim ) ;
border : 1 px solid var ( - - warning - yellow - dim ) ;
padding : 0.15 rem 0.5 rem ;
letter-spacing : 0.1 em ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. download-card-desc {
font-family : 'Barlow' , sans-serif ;
font-weight : 300 ;
font-size : 0.85 rem ;
color : var ( - - steel - text ) ;
line-height : 1.5 ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. download-card-meta {
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.65 rem ;
color : var ( - - concrete - surface ) ;
letter-spacing : 0.05 em ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. btn-download {
display : inline-flex ;
align-items : center ;
gap : 0.5 rem ;
font-family : 'Oswald' , sans-serif ;
font-weight : 600 ;
font-size : 0.8 rem ;
text-transform : uppercase ;
letter-spacing : 0.15 em ;
padding : 0.65 rem 1.5 rem ;
background : transparent ;
color : var ( - - warning - yellow ) ;
border : 1 px solid var ( - - warning - yellow - dim ) ;
cursor : pointer ;
text-decoration : none ;
transition : background 0.15 s linear , color 0.15 s linear , transform 0.1 s linear ;
align-self : flex-start ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. btn-download : hover {
background : var ( - - warning - yellow ) ;
color : var ( - - concrete - dark ) ;
transform : translateY ( -1 px ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. btn-download : active {
transform : translateY ( 1 px ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. download-or-divider {
display : flex ;
align-items : center ;
gap : 1 rem ;
margin : 2 rem 0 0.5 rem ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. download-or-divider :: before ,
. download-or-divider :: after {
2026-03-03 20:47:56 +01:00
content : '' ;
2026-04-25 11:24:20 +02:00
flex : 1 ;
height : 1 px ;
background : rgba ( 240 , 192 , 48 , 0.1 ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. download-or-divider span {
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.65 rem ;
color : var ( - - concrete - surface ) ;
letter-spacing : 0.2 em ;
text-transform : uppercase ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. requirements-note {
2026-03-03 20:47:56 +01:00
margin-top : 2 rem ;
2026-04-25 11:24:20 +02:00
padding : 1 rem 1.25 rem ;
border-left : 3 px solid var ( - - safety - orange ) ;
background : rgba ( 224 , 80 , 32 , 0.05 ) ;
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.75 rem ;
color : var ( - - steel - text ) ;
line-height : 1.6 ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. requirements-note strong {
color : var ( - - safety - orange ) ;
font-weight : 400 ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
/* ============================================================
FOOTER
============================================================ */
. footer {
padding : 3 rem 0 2 rem ;
background : var ( - - concrete - dark ) ;
border-top : 1 px solid rgba ( 240 , 192 , 48 , 0.08 ) ;
position : relative ;
z-index : 1 ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. footer-inner {
display : flex ;
justify-content : space-between ;
align-items : center ;
flex-wrap : wrap ;
gap : 1 rem ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. footer-brand {
display : flex ;
align-items : center ;
gap : 0.5 rem ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. footer-brand-icon {
width : 22 px ;
height : 22 px ;
border : 1.5 px solid var ( - - warning - yellow - dim ) ;
2026-03-03 20:47:56 +01:00
display : flex ;
align-items : center ;
2026-04-25 11:24:20 +02:00
justify-content : center ;
font-family : 'Oswald' , sans-serif ;
font-weight : 700 ;
font-size : 0.7 rem ;
color : var ( - - warning - yellow - dim ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. footer-brand-text {
font-family : 'Oswald' , sans-serif ;
font-weight : 500 ;
font-size : 0.85 rem ;
color : var ( - - steel - text ) ;
letter-spacing : 0.1 em ;
text-transform : uppercase ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. footer-meta {
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.65 rem ;
color : var ( - - concrete - surface ) ;
letter-spacing : 0.1 em ;
text-align : right ;
2026-03-03 20:47:56 +01:00
}
. footer-links {
display : flex ;
2026-04-25 11:24:20 +02:00
gap : 1.5 rem ;
2026-03-03 20:47:56 +01:00
list-style : none ;
}
. footer-links a {
2026-04-25 11:24:20 +02:00
font-family : 'Share Tech Mono' , monospace ;
font-size : 0.7 rem ;
color : var ( - - steel - text ) ;
2026-03-03 20:47:56 +01:00
text-decoration : none ;
2026-04-25 11:24:20 +02:00
letter-spacing : 0.1 em ;
transition : color 0.2 s linear ;
2026-03-03 20:47:56 +01:00
}
. footer-links a : hover {
2026-04-25 11:24:20 +02:00
color : var ( - - warning - yellow ) ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
/* ============================================================
DIVIDER
============================================================ */
2026-03-03 20:47:56 +01:00
. section-divider {
height : 1 px ;
2026-04-25 11:24:20 +02:00
background : linear-gradient ( 90 deg ,
transparent 0 % ,
rgba ( 240 , 192 , 48 , 0.2 ) 20 % ,
rgba ( 240 , 192 , 48 , 0.2 ) 80 % ,
transparent 100 %
) ;
}
/* ============================================================
RESPONSIVE
============================================================ */
@ media ( max-width : 1024px ) {
. features-grid {
grid-template-columns : repeat ( 2 , 1 fr ) ;
}
. workflow-steps {
grid-template-columns : repeat ( 2 , 1 fr ) ;
gap : 2 rem ;
}
2026-03-03 20:47:56 +01:00
2026-04-25 11:24:20 +02:00
. workflow-steps :: before {
display : none ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. demo-content {
flex-direction : column ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. demo-sidebar {
width : 100 % ;
border-right : none ;
border-bottom : 1 px solid rgba ( 240 , 192 , 48 , 0.08 ) ;
max-height : 180 px ;
overflow : hidden ;
}
2026-03-03 20:47:56 +01:00
2026-04-25 11:24:20 +02:00
. demo-panels {
grid-template-columns : repeat ( 3 , 1 fr ) ;
min-height : 300 px ;
}
2026-03-03 20:47:56 +01:00
2026-04-25 11:24:20 +02:00
section {
padding-top : 4 rem ;
padding-bottom : 4 rem ;
}
2026-03-03 20:47:56 +01:00
2026-04-25 11:24:20 +02:00
. features , . workflow , . demo , . techstack , . download {
padding : 4 rem 0 ;
}
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
@ media ( max-width : 768px ) {
. navbar-links {
display : none ;
position : absolute ;
top : 56 px ;
left : 0 ;
width : 100 % ;
background : rgba ( 26 , 26 , 26 , 0.97 ) ;
flex-direction : column ;
padding : 1 rem 2 rem ;
gap : 0.75 rem ;
border-bottom : 1 px solid rgba ( 240 , 192 , 48 , 0.12 ) ;
}
. navbar-links . open {
display : flex ;
}
. navbar-mobile-toggle {
display : block ;
}
. hero-title {
font-size : 2.8 rem ;
}
. hero-tagline {
font-size : 1.2 rem ;
}
. hero-panel {
padding : 2 rem 1.5 rem ;
}
. hero-measure {
display : none ;
}
. section-title {
font-size : 2 rem ;
}
2026-03-03 20:47:56 +01:00
. features-grid {
grid-template-columns : 1 fr ;
}
2026-04-25 11:24:20 +02:00
. workflow-steps {
2026-03-03 20:47:56 +01:00
grid-template-columns : 1 fr ;
}
2026-04-25 11:24:20 +02:00
. demo-panels {
grid-template-columns : 1 fr ;
min-height : auto ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. demo-panel {
border-right : none ;
border-bottom : 1 px solid rgba ( 240 , 192 , 48 , 0.06 ) ;
min-height : 200 px ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. download-panel {
padding : 2 rem 1.5 rem ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. footer-inner {
2026-03-03 20:47:56 +01:00
flex-direction : column ;
text-align : center ;
}
2026-04-25 11:24:20 +02:00
. footer-links {
flex-wrap : wrap ;
justify-content : center ;
}
. footer-meta {
text-align : center ;
}
. features , . workflow , . demo , . techstack , . download {
padding : 3 rem 0 ;
2026-03-03 20:47:56 +01:00
}
2026-04-25 11:24:20 +02:00
. section-subtitle {
margin-bottom : 2 rem ;
}
. code-block {
font-size : 0.75 rem ;
word-break : break-all ;
}
. download-cards {
grid-template-columns : 1 fr ;
2026-03-03 20:47:56 +01:00
}
}
2026-04-25 11:24:20 +02:00
@ media ( max-width : 480px ) {
. container {
padding : 0 1 rem ;
}
. hero-title {
font-size : 2.2 rem ;
}
. hero-tagline {
font-size : 1.1 rem ;
}
. hero-panel {
padding : 1.5 rem 1.25 rem ;
2026-03-03 20:47:56 +01:00
}
. hero-actions {
flex-direction : column ;
}
. btn-primary , . btn-secondary {
2026-04-25 11:24:20 +02:00
width : 100 % ;
2026-03-03 20:47:56 +01:00
justify-content : center ;
}
2026-04-25 11:24:20 +02:00
. section-title {
font-size : 1.6 rem ;
}
. section-subtitle {
font-size : 0.95 rem ;
}
. download-panel {
padding : 1.5 rem 1 rem ;
}
. install-step {
flex-direction : column ;
gap : 0.5 rem ;
}
. install-step-num {
border-right : none ;
border-bottom : 1 px solid var ( - - concrete - surface ) ;
padding-right : 0 ;
padding-bottom : 0.5 rem ;
width : auto ;
justify-content : flex-start ;
}
. tech-badge {
font-size : 0.7 rem ;
padding : 0.5 rem 0.8 rem ;
}
. features , . workflow , . demo , . techstack , . download {
padding : 2.5 rem 0 ;
}
. navbar-inner {
padding : 0 1 rem ;
}
2026-03-03 20:47:56 +01:00
}
< / style >
< / head >
< body >
2026-04-25 11:24:20 +02:00
<!-- ============================================================
NAVBAR
============================================================ -->
< nav class = "navbar" >
< div class = "navbar-inner" >
< a href = "#hero" class = "navbar-brand" >
< div class = "navbar-brand-icon" > D< / div >
< span class = "navbar-brand-text" > DocuMentor< / span >
2026-03-03 20:47:56 +01:00
< / a >
2026-04-25 11:24:20 +02:00
< button class = "navbar-mobile-toggle" id = "navToggle" > MENU< / button >
< ul class = "navbar-links" id = "navLinks" >
< li > < a href = "#features" > Features< / a > < / li >
< li > < a href = "#workflow" > Workflow< / a > < / li >
< li > < a href = "#demo" > Demo< / a > < / li >
< li > < a href = "#techstack" > Technik< / a > < / li >
< li > < a href = "#download" > Download< / a > < / li >
< / ul >
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
< / nav >
2026-03-03 20:47:56 +01:00
2026-04-25 11:24:20 +02:00
<!-- ============================================================
HERO
============================================================ -->
< section class = "hero" id = "hero" >
< div class = "container" >
< div class = "hero-content" >
< div class = "hero-panel corner-brackets riveted reveal" >
< span class = "rivet rivet-tl" > < / span >
< span class = "rivet rivet-tr" > < / span >
< span class = "rivet rivet-bl" > < / span >
< span class = "rivet rivet-br" > < / span >
< div class = "hero-measure hero-measure-top" > 750px< / div >
< div class = "hero-measure hero-measure-right" > CTRL-PANEL-01< / div >
< div class = "hero-system-tag" >
< span class = "led led-green" > < / span >
SYSTEM AKTIV — XSL TRANSFORMATIONS-KONTROLLE v2.0
< / div >
< h1 class = "hero-title" > Docu< span > Mentor< / span > < / h1 >
< p class = "hero-tagline" > Industrielle XSL-Transformationskontrolle< / p >
< p class = "hero-desc" >
Desktop-Anwendung zur Verwaltung und Validierung von XSL-Transformationen.
Erkennen Sie jede Auswirkung Ihrer XSL-Änderungen — bevor es zu spät ist.
PDF-Generierung, Vergleich und Qualitätssicherung in einem Werkzeug.
< / p >
< div class = "hero-actions" >
< a href = "#download" class = "btn-primary" >
▼ Installation starten
< / a >
< a href = "#features" class = "btn-secondary" >
▶ Features erkunden
< / a >
< / div >
< / div >
< / div >
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
< / section >
2026-03-03 20:47:56 +01:00
2026-04-25 11:24:20 +02:00
< div class = "hazard-stripe" > < / div >
<!-- ============================================================
FEATURES
============================================================ -->
< section class = "features" id = "features" >
< div class = "container" >
< div class = "section-label reveal" data-num = "SEC-01" > Features< / div >
< h2 class = "section-title reveal" > Kontrollraum-< br > Funktionen< / h2 >
< p class = "section-subtitle reveal" > Sechs Kernmodule für die lückenlose Überwachung Ihrer XSL-Transformationen und PDF-Ergebnisse.< / p >
< div class = "features-grid" >
<!-- Feature 1 -->
< div class = "feature-card corner-brackets reveal from-bottom reveal-delay-1" >
< span class = "feature-number" > F-001< / span >
< div class = "feature-icon" > ☰ < / div >
< div class = "feature-name" > Hierarchische Baumstruktur< / div >
< p class = "feature-desc" > Organisieren Sie Ihre XSL- und XML-Dateien in einer intuitiven Baumstruktur mit TreeNodes. Drag-and-Drop, Kontextmenüs und Vererbungsdarstellung inklusive.< / p >
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
<!-- Feature 2 -->
< div class = "feature-card corner-brackets reveal from-bottom reveal-delay-2" >
< span class = "feature-number" > F-002< / span >
< div class = "feature-icon" > ▩ < / div >
< div class = "feature-name" > PDF-Diff-Vergleich< / div >
< p class = "feature-desc" > Drei-Panel-Ansicht mit Referenz-, Diff- und Neu-Darstellung. Alpha-Blending, Zoom und Pan für präzise visuelle Qualitätskontrolle.< / p >
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
<!-- Feature 3 -->
< div class = "feature-card corner-brackets reveal from-bottom reveal-delay-3" >
< span class = "feature-number" > F-003< / span >
< div class = "feature-icon" > #< / div >
< div class = "feature-name" > Änderungsverfolgung< / div >
< p class = "feature-desc" > Blake2b-Hashing für jede XML-Datei. Automatische Berechnung im Hintergrund erkennt sofort, welche Dateien sich verändert haben.< / p >
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
<!-- Feature 4 -->
< div class = "feature-card corner-brackets reveal from-bottom reveal-delay-4" >
< span class = "feature-number" > F-004< / span >
< div class = "feature-icon" > ⇄ < / div >
< div class = "feature-name" > Asynchrone Verarbeitung< / div >
< p class = "feature-desc" > Hintergrund-Threads für Hash-Berechnungen und Datenbankabfragen. Die Benutzeroberfläche bleibt stets reaktionsfähig.< / p >
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
<!-- Feature 5 -->
< div class = "feature-card corner-brackets reveal from-bottom reveal-delay-5" >
< span class = "feature-number" > F-005< / span >
< div class = "feature-icon" > ⎓ < / div >
< div class = "feature-name" > PostgreSQL-Integration< / div >
< p class = "feature-desc" > Direkte Datenbankanbindung mit SSL-Unterstützung. SQL-Abfragen via ConnectorX und Polars DataFrames für schnelle Datenverarbeitung.< / p >
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
<!-- Feature 6 -->
< div class = "feature-card corner-brackets reveal from-bottom reveal-delay-6" >
< span class = "feature-number" > F-006< / span >
< div class = "feature-icon" > ⚙ < / div >
< div class = "feature-name" > Toolchain-Konfiguration< / div >
< p class = "feature-desc" > Flexible Verwaltung von Saxon, Apache FOP und diff-pdf. Mehrere Versionen parallel konfigurierbar mit ID-basiertem Referenzsystem.< / p >
2026-03-03 20:47:56 +01:00
< / div >
< / div >
< / div >
< / section >
< div class = "section-divider" > < / div >
2026-04-25 11:24:20 +02:00
<!-- ============================================================
WORKFLOW
============================================================ -->
< section class = "workflow" id = "workflow" >
< div class = "container" >
< div class = "section-label reveal" data-num = "SEC-02" > Workflow< / div >
< h2 class = "section-title reveal" > Arbeitsablauf< / h2 >
< p class = "section-subtitle reveal" > Vier Schritte von der XSL-Änderung bis zur verifizierten PDF — wiederholbar und zuverlässig.< / p >
< div class = "workflow-steps" >
< div class = "workflow-step reveal from-left reveal-delay-1" >
< div class = "step-number" > 01< / div >
< div class = "step-title" > XSL-Dateien bearbeiten< / div >
< p class = "step-desc" > Führen Sie die benötigten Änderungen an Ihren XSL-Stylesheets durch. DocuMentor Überwacht die Abhängigkeiten.< / p >
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
< div class = "workflow-step reveal from-left reveal-delay-2" >
< div class = "step-number" > 02< / div >
< div class = "step-title" > Transformation starten< / div >
< p class = "step-desc" > Starten Sie die Transformation direkt aus DocuMentor. Saxon und Apache FOP werden automatisch orchestriert.< / p >
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
< div class = "workflow-step reveal from-right reveal-delay-3" >
< div class = "step-number" > 03< / div >
< div class = "step-title" > PDF-Diff begutachten< / div >
< p class = "step-desc" > Vergleichen Sie Referenz- und neue PDF in der Drei-Panel-Ansicht. Abweichungen werden sofort sichtbar.< / p >
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
< div class = "workflow-step reveal from-right reveal-delay-4" >
< div class = "step-number" > 04< / div >
< div class = "step-title" > Ergebnis verifizieren< / div >
< p class = "step-desc" > Prüfen Sie, ob nur die erwarteten PDF-Dateien geändert wurden und das Ergebnis korrekt ist.< / p >
2026-03-03 20:47:56 +01:00
< / div >
< / div >
< / div >
< / section >
2026-04-25 11:24:20 +02:00
< div class = "hazard-stripe-thin" > < / div >
<!-- ============================================================
DEMO / SCREENSHOT
============================================================ -->
< section class = "demo" id = "demo" >
< div class = "container" >
< div class = "section-label reveal" data-num = "SEC-03" > Interface< / div >
< h2 class = "section-title reveal" > Kontrollstation< / h2 >
< p class = "section-subtitle reveal" > Überblick über die Anwendungsoberfläche — Baumstruktur links, PDF-Vergleich rechts.< / p >
< div class = "demo-frame reveal from-bottom" >
< div class = "demo-titlebar" >
< div class = "demo-titlebar-dots" >
< span class = "demo-titlebar-dot red" > < / span >
< span class = "demo-titlebar-dot yellow" > < / span >
< span class = "demo-titlebar-dot green" > < / span >
< / div >
< span class = "demo-titlebar-text" > DocuMentor — Projekt: Flexnow Urkunden 2026< / span >
< span style = "margin-left:auto;" class = "demo-titlebar-text" > < span class = "led led-green" > < / span > BEREIT< / span >
< / div >
< div class = "demo-content" >
<!-- Sidebar -->
< div class = "demo-sidebar" >
< div class = "demo-sidebar-label" > Projektbaum< / div >
< div class = "tree-item" >
< span class = "tree-icon" > ▼ < / span > Urkunden
< / div >
< div class = "tree-item level-1" >
< span class = "tree-icon" > ▼ < / span > Bachelor
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
< div class = "tree-item level-2" >
< span class = "tree-icon" > ▶ < / span > urkunde_ba.xsl
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
< div class = "tree-item level-2 active" >
< span class = "tree-icon" > ▶ < / span > testdaten_ba.xml
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
< div class = "tree-item level-1" >
< span class = "tree-icon" > ▼ < / span > Master
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
< div class = "tree-item level-2" >
< span class = "tree-icon" > ▶ < / span > urkunde_ma.xsl
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
< div class = "tree-item level-2" >
< span class = "tree-icon" > ▶ < / span > testdaten_ma.xml
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
< div class = "tree-item" >
< span class = "tree-icon" > ▼ < / span > Zeugnisse
2026-03-03 20:47:56 +01:00
< / div >
2026-04-25 11:24:20 +02:00
< div class = "tree-item level-1" >
< span class = "tree-icon" > ▶ < / span > zeugnis_base.xsl
< / div >
< div class = "tree-item level-1" >
< span class = "tree-icon" > ▶ < / span > layout_common.xsl
2026-03-03 20:47:56 +01:00
< / div >
< / div >
2026-04-25 11:24:20 +02:00
<!-- Panels -->
< div class = "demo-panels" >
< div class = "demo-panel" >
< div class = "demo-panel-header" > < span class = "led led-green" > < / span > Referenz-PDF< / div >
< div class = "demo-panel-body" >
< div class = "mock-pdf" >
< div class = "mock-pdf-line long" > < / div >
< div class = "mock-pdf-line medium" > < / div >
< div class = "mock-pdf-line long" > < / div >
< div class = "mock-pdf-line gap" > < / div >
< div class = "mock-pdf-line short" > < / div >
< div class = "mock-pdf-line long" > < / div >
< div class = "mock-pdf-line medium" > < / div >
< div class = "mock-pdf-line gap" > < / div >
< div class = "mock-pdf-line long" > < / div >
< div class = "mock-pdf-line short" > < / div >
< div class = "mock-pdf-line long" > < / div >
< div class = "mock-pdf-line medium" > < / div >
< / div >
2026-03-03 20:47:56 +01:00
< / div >
< / div >
2026-04-25 11:24:20 +02:00
< div class = "demo-panel diff" >
< div class = "demo-panel-header" > < span class = "led led-yellow" > < / span > Diff-Ansicht< / div >
< div class = "demo-panel-body" >
< div class = "mock-pdf" >
< div class = "mock-pdf-line long" > < / div >
< div class = "mock-pdf-line medium diff-change" > < / div >
< div class = "mock-pdf-line long" > < / div >
< div class = "mock-pdf-line gap" > < / div >
< div class = "mock-pdf-line short diff-remove" > < / div >
< div class = "mock-pdf-line long diff-add" > < / div >
< div class = "mock-pdf-line medium" > < / div >
< div class = "mock-pdf-line gap" > < / div >
< div class = "mock-pdf-line long diff-change" > < / div >
< div class = "mock-pdf-line short" > < / div >
< div class = "mock-pdf-line long" > < / div >
< div class = "mock-pdf-line medium diff-add" > < / div >
< / div >
2026-03-03 20:47:56 +01:00
< / div >
< / div >
2026-04-25 11:24:20 +02:00
< div class = "demo-panel" >
< div class = "demo-panel-header" > < span class = "led led-orange" > < / span > Neue PDF< / div >
< div class = "demo-panel-body" >
< div class = "mock-pdf" >
< div class = "mock-pdf-line long" > < / div >
< div class = "mock-pdf-line long" > < / div >
< div class = "mock-pdf-line long" > < / div >
< div class = "mock-pdf-line gap" > < / div >
< div class = "mock-pdf-line medium" > < / div >
< div class = "mock-pdf-line long" > < / div >
< div class = "mock-pdf-line medium" > < / div >
< div class = "mock-pdf-line gap" > < / div >
< div class = "mock-pdf-line long" > < / div >
< div class = "mock-pdf-line short" > < / div >
< div class = "mock-pdf-line long" > < / div >
< div class = "mock-pdf-line long" > < / div >
< / div >
2026-03-03 20:47:56 +01:00
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
< div class = "section-divider" > < / div >
2026-04-25 11:24:20 +02:00
<!-- ============================================================
TECH STACK
============================================================ -->
< section class = "techstack" id = "techstack" >
< div class = "container" >
< div class = "section-label reveal" data-num = "SEC-04" > Technologie< / div >
< h2 class = "section-title reveal" > Tech-Stack< / h2 >
< p class = "section-subtitle reveal" > Bewährte Industriekomponenten für maximale Zuverlässigkeit.< / p >
< div class = "tech-grid reveal from-bottom" >
2026-04-25 20:25:00 +02:00
<!-- <div class="tech - category">Kern</div>
2026-04-25 11:24:20 +02:00
<div class="tech - badge"><span class="led led - green"></span> Python 3</div>
<div class="tech - badge"><span class="led led - green"></span> PySide6 / Qt</div>
2026-04-25 20:25:00 +02:00
<div class="tech - badge"><span class="led led - green"></span> Pydantic</div> -->
2026-04-25 11:24:20 +02:00
2026-04-25 20:25:00 +02:00
<!-- <div class="tech - category">Transformation</div> -->
2026-04-25 11:24:20 +02:00
< div class = "tech-badge" > < span class = "led led-yellow" > < / span > Saxon XSLT< / div >
< div class = "tech-badge" > < span class = "led led-yellow" > < / span > Apache FOP< / div >
< div class = "tech-badge" > < span class = "led led-yellow" > < / span > diff-pdf< / div >
2026-04-25 20:25:00 +02:00
<!-- <div class="tech - category">Daten</div>
2026-04-25 11:24:20 +02:00
<div class="tech - badge"><span class="led led - orange"></span> PostgreSQL</div>
<div class="tech - badge"><span class="led led - orange"></span> Polars</div>
<div class="tech - badge"><span class="led led - orange"></span> ConnectorX</div>
<div class="tech - category">Werkzeuge</div>
<div class="tech - badge"><span class="led led - green"></span> blake2b</div>
2026-04-25 20:25:00 +02:00
<div class="tech - badge"><span class="led led - green"></span> PyInstaller</div> -->
2026-03-03 20:47:56 +01:00
< / div >
< / div >
< / section >
2026-04-25 11:24:20 +02:00
< div class = "hazard-stripe" > < / div >
<!-- ============================================================
DOWNLOAD / GETTING STARTED
============================================================ -->
< section class = "download" id = "download" >
< div class = "container" >
< div class = "section-label reveal" data-num = "SEC-05" > Installation< / div >
< h2 class = "section-title reveal" > Inbetriebnahme< / h2 >
< p class = "section-subtitle reveal" > Windows-Pakete für den sofortigen Einsatz — oder drei Befehle aus dem Quellcode.< / p >
< div class = "download-panel corner-brackets riveted reveal from-bottom" >
< span class = "rivet rivet-tl" > < / span >
< span class = "rivet rivet-tr" > < / span >
< span class = "rivet rivet-bl" > < / span >
< span class = "rivet rivet-br" > < / span >
<!-- 1. Windows Binaries -->
< div class = "download-binaries" style = "margin-top: 0; padding-top: 0; border-top: none;" >
< div class = "download-binaries-label" > Windows — Vorkompilierte Pakete< / div >
< div class = "download-cards" >
< div class = "download-card corner-brackets" >
< div class = "download-card-header" >
< span class = "download-card-format" > ▾ MSI-Installer< / span >
< span class = "download-card-badge" > EMPFOHLEN< / span >
< / div >
< p class = "download-card-desc" > Windows-Installer mit automatischer Einrichtung. Erstellt Startmenü-Einträge und ermöglicht saubere Deinstallation über die Systemsteuerung.< / p >
2026-04-25 20:25:00 +02:00
< span class = "download-card-meta" > DocuMentor-1.6.3.msi — ca. 255 MB< / span >
< a href = "https://code.vitaligraf.de/info/xsl-validator/releases/download/1.6.3/DocuMentor-1.6.3.msi" class = "btn-download" > ▼ MSI herunterladen< / a >
2026-04-25 11:24:20 +02:00
< / div >
< div class = "download-card corner-brackets" >
< div class = "download-card-header" >
< span class = "download-card-format" > ▾ ZIP-Archiv< / span >
< span class = "download-card-badge" > PORTABEL< / span >
< / div >
< p class = "download-card-desc" > Portable Version ohne Installation. Entpacken und direkt starten — ideal für eingeschränkte Umgebungen ohne Administratorrechte.< / p >
2026-04-25 20:25:00 +02:00
< span class = "download-card-meta" > DocuMentor-1.6.3.zip — ca. 315 MB< / span >
< a href = "https://code.vitaligraf.de/info/xsl-validator/releases/download/1.6.3/DocuMentor-1.6.3.zip" class = "btn-download" > ▼ ZIP herunterladen< / a >
2026-04-25 11:24:20 +02:00
< / div >
< / div >
< / div >
<!-- 2. Hinweis Windows -->
< div class = "requirements-note" >
2026-04-25 20:25:00 +02:00
< strong > HINWEIS:< / strong > Die Windows-Pakete enthalten alle Abhängigkeiten inklusive Python-Runtime. Lediglich eine < strong > Java Runtime< / strong > (für Saxon und Apache FOP) muss separat installiert werden. Für die volle Performance der Pool-Worker wird ein < strong > Java JDK< / strong > (statt nur JRE) empfohlen.
2026-04-25 11:24:20 +02:00
< / div >
<!-- 3. Quellcode -->
< div class = "download-or-divider" > < span > oder aus Quellcode< / span > < / div >
< div class = "install-steps" >
< div class = "install-step" >
< div class = "install-step-num" > 01< / div >
< div class = "install-step-content" >
< div class = "install-step-label" > Repository klonen< / div >
2026-04-25 20:25:00 +02:00
< div class = "code-block" > < span class = "prompt" > $ < / span > git clone https://code.vitaligraf.de/info/xsl-validator.git< / div >
2026-04-25 11:24:20 +02:00
< / div >
< / div >
< div class = "install-step" >
< div class = "install-step-num" > 02< / div >
< div class = "install-step-content" >
< div class = "install-step-label" > Abhängigkeiten installieren< / div >
< div class = "code-block" > < span class = "prompt" > $ < / span > uv sync< / div >
< / div >
< / div >
< div class = "install-step" >
< div class = "install-step-num" > 03< / div >
< div class = "install-step-content" >
< div class = "install-step-label" > Anwendung starten< / div >
< div class = "code-block" > < span class = "prompt" > $ < / span > uv run python src/main.py< / div >
< / div >
< / div >
< / div >
<!-- 4. Hinweis Quellcode -->
< div class = "requirements-note" >
2026-04-25 20:25:00 +02:00
< strong > HINWEIS:< / strong > Erfordert Python 3.13+, Java Runtime (für Saxon und Apache FOP) und den Paketmanager < strong > uv< / strong > . Für die volle Performance der Pool-Worker wird ein < strong > Java JDK< / strong > (statt nur JRE) empfohlen.
2026-04-25 11:24:20 +02:00
< / div >
2026-03-03 20:47:56 +01:00
< / div >
< / div >
< / section >
2026-04-25 11:24:20 +02:00
< div class = "hazard-stripe-thin" > < / div >
<!-- ============================================================
FOOTER
============================================================ -->
< footer class = "footer" >
< div class = "container" >
< div class = "footer-inner" >
< div class = "footer-brand" >
< div class = "footer-brand-icon" > D< / div >
< span class = "footer-brand-text" > DocuMentor< / span >
< / div >
< ul class = "footer-links" >
< li > < a href = "#features" > Features< / a > < / li >
< li > < a href = "#workflow" > Workflow< / a > < / li >
< li > < a href = "#techstack" > Technik< / a > < / li >
< li > < a href = "#download" > Download< / a > < / li >
2026-04-25 20:25:00 +02:00
< li > < a href = "impressum.html" > Impressum< / a > < / li >
< li > < a href = "datenschutz.html" > Datenschutz< / a > < / li >
2026-04-25 11:24:20 +02:00
< / ul >
< div class = "footer-meta" >
SYSTEM // DOCUMENTOR // BUILD 2026.02< br >
PySide6 Desktop-Anwendung // Open Source
< / div >
< / div >
< / div >
2026-03-03 20:47:56 +01:00
< / footer >
2026-04-25 11:24:20 +02:00
<!-- ============================================================
JAVASCRIPT
============================================================ -->
2026-03-03 20:47:56 +01:00
< script >
2026-04-25 11:24:20 +02:00
// ============================================================
// Mobile Navigation Toggle
// ============================================================
( function ( ) {
const toggle = document . getElementById ( 'navToggle' ) ;
const links = document . getElementById ( 'navLinks' ) ;
if ( toggle && links ) {
toggle . addEventListener ( 'click' , function ( ) {
links . classList . toggle ( 'open' ) ;
toggle . textContent = links . classList . contains ( 'open' ) ? 'CLOSE' : 'MENU' ;
} ) ;
// Close on link click
links . querySelectorAll ( 'a' ) . forEach ( function ( a ) {
a . addEventListener ( 'click' , function ( ) {
links . classList . remove ( 'open' ) ;
toggle . textContent = 'MENU' ;
} ) ;
} ) ;
}
} ) ( ) ;
// ============================================================
// Scroll Reveal (mechanical, linear)
// ============================================================
( function ( ) {
const reveals = document . querySelectorAll ( '.reveal' ) ;
const observer = new IntersectionObserver ( function ( entries ) {
entries . forEach ( function ( entry ) {
2026-03-03 20:47:56 +01:00
if ( entry . isIntersecting ) {
entry . target . classList . add ( 'visible' ) ;
2026-04-25 11:24:20 +02:00
observer . unobserve ( entry . target ) ;
2026-03-03 20:47:56 +01:00
}
} ) ;
2026-04-25 11:24:20 +02:00
} , {
threshold : 0.12 ,
rootMargin : '0px 0px -40px 0px'
} ) ;
2026-03-03 20:47:56 +01:00
2026-04-25 11:24:20 +02:00
reveals . forEach ( function ( el ) {
observer . observe ( el ) ;
2026-03-03 20:47:56 +01:00
} ) ;
2026-04-25 11:24:20 +02:00
} ) ( ) ;
// ============================================================
// Navbar background on scroll
// ============================================================
( function ( ) {
const navbar = document . querySelector ( '.navbar' ) ;
let ticking = false ;
window . addEventListener ( 'scroll' , function ( ) {
if ( ! ticking ) {
requestAnimationFrame ( function ( ) {
if ( window . scrollY > 80 ) {
navbar . style . borderBottomColor = 'rgba(240, 192, 48, 0.25)' ;
} else {
navbar . style . borderBottomColor = 'rgba(240, 192, 48, 0.12)' ;
}
ticking = false ;
} ) ;
ticking = true ;
}
} ) ;
} ) ( ) ;
// ============================================================
// Smooth scroll for anchor links
// ============================================================
document . querySelectorAll ( 'a[href^="#"]' ) . forEach ( function ( anchor ) {
anchor . addEventListener ( 'click' , function ( e ) {
e . preventDefault ( ) ;
var target = document . querySelector ( this . getAttribute ( 'href' ) ) ;
if ( target ) {
var offset = 56 ; // navbar height
var top = target . getBoundingClientRect ( ) . top + window . pageYOffset - offset ;
window . scrollTo ( { top : top , behavior : 'smooth' } ) ;
}
} ) ;
} ) ;
2026-03-03 20:47:56 +01:00
< / script >
< / body >
< / html >
