/* ISTARIUM — smart solutions Sovereign dark landing. Self-contained: fonts + logo are local (relative paths). Palette: brand navy #2B2E83, warm ember #E94E1B. Type: Roboto (Light-led). */ /* ---- Fonts (local woff2, resolved relative to this stylesheet) ---- */ @font-face{font-family:"Roboto";font-style:normal;font-weight:300;font-display:swap;src:url("Roboto-Light.woff2") format("woff2");} @font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("Roboto-Medium.woff2") format("woff2");} /* ---- Tokens ---- */ :root{ --sky-top:#080915; --sky-mid:#101229; --sky-low:#1a1d45; --navy:#2B2E83; --ember:#E94E1B; --ember-soft:#f0693b; --text:#edeef6; --muted:#9698ba; /* 4.55:1 on the footer #080915 — clears WCAG AA for the legal text and the brand line. Lifted from #6d6f93 (4.10:1) on 2026-07-17. Consumers on LIGHTER panels (.scrollcue on the hero's #1a1d45 bottom, .contact__hint[checking] on #0d0f24) still sit under 4.5:1 — improved by this lift, but not yet fixed. */ --faint:#74769e; --line:rgba(237,238,246,.12); --line-strong:rgba(237,238,246,.24); --ease:cubic-bezier(.22,.61,.36,1); /* Height of the conditional legacy-brand notice bar (see index.html). 0 unless the bar is shown; then set once, in px, on by the notice script. Everything that must yield to the bar reads THIS — never a hardcoded number — so a 2-line wrap on narrow phones reserves its real space automatically. */ --icg-notice-h:0px; /* The page gutter: the single horizontal inset every full-width element starts at. The topbar logo, the hero logo and the .wrap content column all sit on this line, so anything that must align with the logo reads THIS, never a copy of the clamp. */ --gutter:clamp(22px,6vw,72px); } *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} body{ margin:0; font-family:"Roboto",system-ui,-apple-system,Segoe UI,Arial,sans-serif; font-weight:300; color:var(--text); background:var(--sky-top); line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ::selection{background:rgba(233,78,27,.32);color:#fff;} /* Focus visibility (a11y floor) */ :focus-visible{outline:2px solid var(--ember-soft);outline-offset:3px;border-radius:2px;} /* ---- Shell / rhythm ---- */ .wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--gutter);} .eyebrow{ font-size:12px;font-weight:500;letter-spacing:.34em;text-transform:uppercase; color:var(--ember);margin:0 0 clamp(20px,3vw,34px); display:inline-flex;align-items:center;gap:14px; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--ember);opacity:.75;} /* ---- Top bar ---- */ /* Absolute against the initial containing block (document top), so it overlays the hero artwork. The notice bar is in normal flow ABOVE it, so the bar's height is exactly the topbar's start offset — logo and bar can never collide. */ .topbar{ position:absolute;top:var(--icg-notice-h);left:0;right:0;z-index:6; display:flex;align-items:center;justify-content:space-between; padding:clamp(20px,3.4vw,34px) var(--gutter); } .topbar__mark img{height:22px;width:auto;opacity:.92;} .lang{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.16em;color:var(--faint);} .lang a{padding:2px 2px;transition:color .3s var(--ease);} .lang a:hover{color:var(--text);} .lang a[aria-current="true"]{color:var(--text);} .lang span{opacity:.4;} /* ================= HERO ================= */ .hero{ position:relative; /* The notice bar consumes real space at the top of the document, so the hero shrinks by exactly that much: bar + hero still equal one fold, never more. */ min-height:calc(100svh - var(--icg-notice-h)); display:flex;flex-direction:column;justify-content:center; overflow:hidden; isolation:isolate; /* Sky depth gradient — always present, reads as pre-dawn navy sky */ background: radial-gradient(120% 88% at 50% 118%, rgba(43,46,131,.55) 0%, rgba(43,46,131,0) 46%), linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-low) 100%); } /* (1) OPTIONAL licensed photograph goes here — drop an INDUSTRIAL/plant key-visual (a production complex / works on the horizon) and it slots straight in beneath the atmosphere overlays; no layout changes needed. Uncomment and set the file: .hero__photo{ background-image:url("hero.jpg"); } */ .hero__photo{ position:absolute;inset:0;z-index:-3; background-size:cover;background-position:center 62%;background-repeat:no-repeat; /* background-image: none; <-- set a licensed INDUSTRIAL/plant photo here later */ } /* (2) Ember dawn glow rising off the horizon */ .hero__glow{ position:absolute;left:50%;bottom:-6%;z-index:-2; width:min(1400px,150%);height:62%;transform:translateX(-50%); background: radial-gradient(60% 100% at 50% 102%, rgba(233,78,27,.55) 0%, rgba(233,78,27,.22) 30%, rgba(233,78,27,0) 64%), radial-gradient(38% 78% at 50% 102%, rgba(246,140,80,.6) 0%, rgba(246,140,80,0) 58%), radial-gradient(24% 52% at 50% 104%, rgba(255,196,150,.5) 0%, rgba(255,196,150,0) 60%); filter:blur(5px); pointer-events:none; animation:dawn 14s ease-in-out infinite; } /* (3) Soft fog bands drifting above the skyline */ .hero__fog{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;} .hero__fog span{ position:absolute;left:-10%;right:-10%;height:120px;border-radius:50%; background:radial-gradient(closest-side, rgba(180,186,225,.10), rgba(180,186,225,0)); filter:blur(10px); } .hero__fog span:nth-child(1){bottom:22%;height:180px;opacity:.8;} .hero__fog span:nth-child(2){bottom:30%;left:8%;right:24%;height:120px;opacity:.55;} .hero__fog span:nth-child(3){bottom:14%;left:-6%;right:40%;height:150px;opacity:.5;} /* (4) Layered industrial silhouette: pale far plant in fog + darker near plant */ .hero__ridge{ position:absolute;left:0;right:0;bottom:0;z-index:-1; width:100%;height:min(46vh,420px); pointer-events:none; } .hero__ridge svg{width:100%;height:100%;display:block;} /* (5) Legibility scrim */ .hero::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg, rgba(8,9,21,.55) 0%, rgba(8,9,21,0) 26%, rgba(8,9,21,0) 60%, rgba(8,9,21,.28) 100%); } /* Hero content */ .hero__inner{position:relative;z-index:2;} .hero__logo{ height:clamp(46px,8.4vw,116px);width:auto; filter:drop-shadow(0 6px 30px rgba(0,0,0,.45)); } .lockup{ margin:clamp(18px,2.4vw,30px) 0 0; font-weight:300;color:var(--ember-soft); font-size:clamp(15px,2.3vw,26px); letter-spacing:.26em;text-transform:lowercase; } .promise{ margin:clamp(26px,4vw,44px) 0 0; font-weight:300;color:var(--text); font-size:clamp(19px,2.7vw,31px); line-height:1.4;letter-spacing:.005em; max-width:22ch; } /* Discreet scroll cue */ .scrollcue{ position:absolute;left:var(--gutter);bottom:clamp(26px,4vw,44px);z-index:3; display:inline-flex;flex-direction:column;align-items:center;gap:10px; font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint); transition:color .35s var(--ease); } .scrollcue:hover{color:var(--muted);} .scrollcue i{width:1px;height:56px;background:linear-gradient(var(--faint),transparent);display:block;} .scrollcue i::after{ content:"";position:absolute;left:50%;top:0;width:1px;height:18px;background:var(--ember); transform:translateX(-50%);animation:trickle 3.4s var(--ease) infinite; } .scrollcue span{writing-mode:vertical-rl;} /* ================= SECTIONS ================= */ .band{position:relative;padding-block:clamp(96px,17vh,190px);} .band--essence{ background:linear-gradient(180deg,var(--sky-low) 0%, #14163a 55%, #101228 100%); border-top:1px solid var(--line); } .band--work{background:linear-gradient(180deg,#101228 0%, #0e1024 100%);border-top:1px solid var(--line);} .band--contact{background:#0d0f24;border-top:1px solid var(--line);} /* Use cases — cryptic, sparse. A bold name + one quiet line each. */ .uses{list-style:none;margin:0;padding:0;max-width:min(94%,720px);display:grid;gap:0;} .uses li{ display:grid;gap:8px; padding-block:clamp(22px,3vw,32px); border-bottom:1px solid var(--line); } .uses li:first-child{padding-top:0;} .uses li:last-child{border-bottom:0;} /* Die Überschrift IST der Auslöser des Zugangsdialogs — als