* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
background: #010204;
}
body {
margin: 0;
overflow-x: hidden;
background: #010204;
color: #edf7f8;
font-family:
Arial,
Helvetica,
sans-serif;
}
::selection {
background: rgba(120,240,255,.2);
}
#machine {
position: fixed;
inset: 0;
z-index: 0;
}
#machine canvas {
display: block;
width: 100%;
height: 100%;
}
.grain,
.vignette,
.scan {
position: fixed;
inset: 0;
pointer-events: none;
}
.grain {
z-index: 2;
opacity: .12;
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
.vignette {
z-index: 3;
background:
radial-gradient(
circle at center,
transparent 15%,
rgba(0,0,0,.16) 55%,
rgba(0,0,0,.78) 100%
);
}
.scan {
z-index: 4;
opacity: .11;
background:
repeating-linear-gradient(
0deg,
transparent 0,
transparent 3px,
rgba(160,245,255,.025) 4px
);
}
/* BOOT */
#boot {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
background: #010204;
transition:
opacity 1.2s ease,
visibility 1.2s ease;
}
#boot.done {
opacity: 0;
visibility: hidden;
}
.boot-terminal {
width: min(780px, 84vw);
}
.boot-code,
.boot-line,
.boot-enter {
font-size: 9px;
letter-spacing: .28em;
color: rgba(150,235,245,.48);
}
.boot-code {
margin-bottom: 30px;
color: rgba(180,250,255,.8);
}
.boot-line {
margin: 12px 0;
opacity: 0;
transform: translateX(-10px);
}
.boot-brand {
margin-top: 55px;
font-size: clamp(70px,15vw,190px);
line-height: .75;
font-weight: 900;
letter-spacing: -.08em;
opacity: 0;
}
.boot-sub {
margin-top: 18px;
font-size: 11px;
letter-spacing: .48em;
color: rgba(180,245,250,.65);
opacity: 0;
}
.boot-enter {
margin-top: 55px;
opacity: 0;
}
/* HEADER */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
height: 76px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0 34px;
border-bottom:
1px solid rgba(130,235,245,.08);
background:
linear-gradient(
rgba(1,3,5,.76),
rgba(1,3,5,.16)
);
backdrop-filter: blur(10px);
}
.brand strong,
.brand span {
display: block;
}
.brand strong {
font-size: 19px;
letter-spacing: -.04em;
}
.brand span {
margin-top: 3px;
font-size: 7px;
letter-spacing: .35em;
color: rgba(170,235,240,.48);
}
.header-center {
font-size: 8px;
letter-spacing: .32em;
color: rgba(160,235,240,.32);
}
.status {
justify-self: end;
display: flex;
align-items: center;
gap: 10px;
font-size: 8px;
letter-spacing: .25em;
color: rgba(180,245,250,.55);
}
.status i {
width: 5px;
height: 5px;
border-radius: 50%;
background: #aefaff;
box-shadow: 0 0 12px #7eeeff;
}
/* HUD */
.hud {
position: fixed;
z-index: 40;
top: 110px;
display: grid;
gap: 25px;
pointer-events: none;
}
.hud-left {
left: 34px;
}
.hud-right {
right: 34px;
text-align: right;
}
.hud span,
.hud strong {
display: block;
}
.hud span {
font-size: 7px;
letter-spacing: .27em;
color: rgba(150,225,235,.28);
}
.hud strong {
margin-top: 5px;
font-size: 9px;
letter-spacing: .17em;
color: rgba(185,245,250,.52);
}
/* SCENES */
main {
position: relative;
z-index: 10;
}
.scene {
position: relative;
min-height: 145vh;
display: flex;
align-items: center;
padding: 16vh 8vw;
overflow: hidden;
}
.content {
width: min(760px, 76vw);
position: relative;
}
.content.right {
margin-left: auto;
}
.content.center {
margin: auto;
text-align: center;
width: min(1100px, 86vw);
}
.eyebrow {
margin-bottom: 25px;
font-size: 9px;
letter-spacing: .34em;
color: rgba(145,235,245,.58);
}
.scene h2 {
margin: 0;
font-size:
clamp(58px, 8vw, 125px);
line-height: .82;
letter-spacing: -.065em;
text-shadow:
0 15px 40px rgba(0,0,0,.8);
}
.scene h2 span {
color: transparent;
-webkit-text-stroke:
1px rgba(190,245,250,.42);
}
.scene p {
max-width: 650px;
margin-top: 35px;
font-size: 16px;
line-height: 1.75;
color: rgba(225,240,245,.56);
}
.content.center p {
margin-left: auto;
margin-right: auto;
}
/* HERO */
.hero {
min-height: 150vh;
}
.hero-content {
margin: auto;
text-align: center;
width: min(1200px,90vw);
}
.hero h1 {
margin: 0;
font-size:
clamp(85px, 18vw, 270px);
line-height: .7;
letter-spacing: -.085em;
text-shadow:
0 25px 70px rgba(0,0,0,.85),
0 0 70px rgba(100,230,255,.06);
}
.hero-sub {
margin-top: 25px;
font-size: 11px;
letter-spacing: .65em;
color: rgba(190,245,250,.62);
}
.hero h2 {
margin-top: 100px;
font-size:
clamp(45px, 6vw, 90px);
}
.hero p {
margin-left: auto;
margin-right: auto;
}
.hero-line {
width: min(850px,90%);
margin: 55px auto 0;
display: flex;
align-items: center;
font-size: 8px;
letter-spacing: .22em;
color: rgba(160,235,240,.46);
}
.hero-line i {
height: 1px;
flex: 1;
margin: 0 20px;
background:
linear-gradient(
90deg,
transparent,
rgba(120,235,245,.35),
transparent
);
}
.enter,
.connect {
display: inline-block;
margin-top: 55px;
padding: 16px 22px;
border:
1px solid rgba(140,240,250,.28);
color: rgba(220,250,252,.85);
text-decoration: none;
font-size: 9px;
letter-spacing: .28em;
background:
rgba(100,225,240,.025);
transition:
background .3s ease,
box-shadow .3s ease;
}
.enter:hover,
.connect:hover {
background:
rgba(100,225,240,.07);
box-shadow:
0 0 35px rgba(100,230,245,.08);
}
/* DECLARATION */
.declaration h3 {
margin-top: 35px;
font-size:
clamp(22px,2.5vw,40px);
line-height: 1.05;
letter-spacing: -.03em;
}
/* SYSTEM */
.system-scene {
min-height: 175vh;
}
.system-number {
position: absolute;
top: 12vh;
left: 8vw;
font-size: 8px;
letter-spacing: .3em;
color: rgba(150,235,240,.34);
}
.system-name {
margin-bottom: 35px;
font-size:
clamp(70px, 12vw, 180px);
font-weight: 900;
line-height: .72;
letter-spacing: -.075em;
text-shadow:
0 20px 60px rgba(0,0,0,.9);
}
.system-scene .lead {
font-size:
clamp(21px,2vw,31px);
line-height: 1.25;
color: rgba(235,248,250,.8);
}
.modules {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 35px;
}
.modules span {
padding: 10px 13px;
border:
1px solid rgba(130,235,245,.16);
background:
rgba(110,225,240,.02);
font-size: 8px;
letter-spacing: .18em;
color: rgba(190,240,245,.65);
}
.sector-label {
position: absolute;
right: -2vw;
bottom: 8vh;
font-size:
clamp(90px, 18vw, 300px);
font-weight: 900;
letter-spacing: -.08em;
color: rgba(230,250,250,.018);
pointer-events: none;
}
/* BLACKOUT */
.blackout {
min-height: 120vh;
}
.blackout::before {
content: "";
position: absolute;
inset: 0;
background:
rgba(0,0,0,.50);
z-index: -1;
}
/* CONVERGENCE */
.convergence {
min-height: 160vh;
}
.convergence-map {
margin: 70px auto 0;
width: min(950px,100%);
display: flex;
align-items: center;
}
.convergence-map div {
min-width: 180px;
}
.convergence-map strong,
.convergence-map small {
display: block;
}
.convergence-map strong {
font-size: 14px;
letter-spacing: .14em;
}
.convergence-map small {
margin-top: 8px;
font-size: 7px;
letter-spacing: .27em;
color: rgba(150,235,240,.42);
}
.convergence-map i {
flex: 1;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(130,235,245,.45),
transparent
);
}
/* FINAL */
.final {
min-height: 170vh;
}
.final-pre {
margin-bottom: 60px;
font-size: 10px;
letter-spacing: .35em;
color: rgba(170,240,245,.52);
}
.final-brand {
font-size:
clamp(80px, 14vw, 190px);
font-weight: 900;
line-height: .72;
letter-spacing: -.075em;
}
.final-sub {
margin-top: 22px;
font-size: 10px;
letter-spacing: .55em;
color: rgba(180,240,245,.55);
}
.final h2 {
margin-top: 100px;
}
/* MOBILE */
@media (max-width: 760px) {
header {
padding: 0 18px;
grid-template-columns: 1fr 1fr;
}
.header-center {
display: none;
}
.hud {
display: none;
}
.scene {
min-height: 125vh;
padding:
14vh 7vw;
}
.content,
.content.right,
.content.center {
width: 100%;
margin-left: 0;
}
.system-name {
font-size:
clamp(58px,19vw,100px);
}
.hero h1 {
font-size:
clamp(75px,25vw,145px);
}
.hero-line {
display: grid;
gap: 14px;
}
.hero-line i {
display: none;
}
.convergence-map {
flex-direction: column;
gap: 30px;
}
.convergence-map i {
flex: none;
width: 1px;
height: 45px;
}
.sector-label {
font-size: 25vw;
}
}
/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
#boot {
display: none;
}
}
/* ==========================================================
CRETE // V6.1 HARD TYPE
INDUSTRIAL TECHNOLOGY TYPOGRAPHY SYSTEM
========================================================== */
/* ----------------------------------------------------------
GLOBAL TECHNICAL LETTER CHARACTER
---------------------------------------------------------- */
:root {
--crete-hard-white: #f4f7f8;
--crete-steel: #aab5ba;
--crete-dim: #667279;
}
body {
font-feature-settings:
"kern" 1,
"liga" 0,
"ss01" 1;
text-rendering: geometricPrecision;
}
/* ----------------------------------------------------------
PRIMARY CRETE WORDMARK
---------------------------------------------------------- */
.hero h1,
.final-wordmark {
position: relative;
font-family:
"Arial Narrow",
"Roboto Condensed",
"Helvetica Neue",
Arial,
sans-serif;
font-weight: 900;
font-stretch: condensed;
letter-spacing: -.075em;
line-height: .74;
text-transform: uppercase;
color: var(--crete-hard-white);
text-shadow:
0 0 1px rgba(255,255,255,.9),
0 0 24px rgba(150,220,235,.08),
18px 0 60px rgba(80,150,170,.035);
filter:
contrast(1.12);
}
/* razor line through major CRETE lettering */
.hero h1::after,
.final-wordmark::after {
content: "";
position: absolute;
left: -2%;
right: -2%;
top: 52%;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.12) 10%,
rgba(255,255,255,.48) 48%,
rgba(255,255,255,.12) 90%,
transparent
);
box-shadow:
0 0 8px rgba(160,220,235,.12);
pointer-events: none;
}
/* ----------------------------------------------------------
TECHNOLOGY GROUP
---------------------------------------------------------- */
.hero .outline,
.final-wordmark .outline {
color: transparent;
-webkit-text-stroke:
1px rgba(210,225,230,.58);
text-shadow:
0 0 22px rgba(150,210,225,.045);
letter-spacing: -.055em;
}
/* ----------------------------------------------------------
SYSTEM TITLES
NORA / FRONT LINE / SENTINEL
---------------------------------------------------------- */
.system-title {
position: relative;
display: inline-block;
font-family:
"Arial Narrow",
"Roboto Condensed",
"Helvetica Neue",
Arial,
sans-serif;
font-weight: 900;
font-stretch: condensed;
letter-spacing: -.065em;
line-height: .82;
text-transform: uppercase;
color: #f3f6f7;
text-shadow:
0 0 1px rgba(255,255,255,.8),
0 0 28px rgba(130,200,215,.06);
}
/* mechanical registration mark */
.system-title::before {
content: "";
position: absolute;
width: 34px;
height: 3px;
left: 2px;
top: -15px;
background: rgba(220,235,240,.68);
box-shadow:
42px 0 0 rgba(220,235,240,.18),
50px 0 0 rgba(220,235,240,.18);
}
/* ----------------------------------------------------------
BIG DECLARATIONS
---------------------------------------------------------- */
.declaration h2,
.compute-copy h2,
.blackout h2,
.convergence h2,
.final h2 {
font-family:
"Arial Narrow",
"Roboto Condensed",
"Helvetica Neue",
Arial,
sans-serif;
font-weight: 900;
font-stretch: condensed;
text-transform: uppercase;
letter-spacing: -.045em;
line-height: .86;
color: #eef3f5;
text-shadow:
0 0 1px rgba(255,255,255,.65),
0 0 32px rgba(120,190,210,.045);
}
/* ----------------------------------------------------------
TECH LABELS
---------------------------------------------------------- */
.eyebrow,
.system-number,
.system-class,
.hud,
.boot-terminal,
.module,
.final-kicker {
font-family:
"Courier New",
"Lucida Console",
monospace;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
.eyebrow,
.system-number,
.system-class,
.final-kicker {
position: relative;
padding-left: 18px;
}
.eyebrow::before,
.system-number::before,
.system-class::before,
.final-kicker::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 8px;
height: 1px;
background: currentColor;
}
/* ----------------------------------------------------------
MODULE CHIPS
---------------------------------------------------------- */
.module {
position: relative;
overflow: hidden;
border-radius: 0 !important;
clip-path:
polygon(
0 0,
calc(100% - 8px) 0,
100% 8px,
100% 100%,
8px 100%,
0 calc(100% - 8px)
);
letter-spacing: .11em;
}
.module::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -80%;
width: 38%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.055),
transparent
);
transform: skewX(-18deg);
animation:
creteModuleSweep 7s linear infinite;
}
@keyframes creteModuleSweep {
0% {
left: -80%;
}
70%,
100% {
left: 150%;
}
}
/* ----------------------------------------------------------
HARD SUBHEADS
---------------------------------------------------------- */
.system-statement {
font-family:
"Arial Narrow",
"Roboto Condensed",
"Helvetica Neue",
Arial,
sans-serif;
font-weight: 800;
letter-spacing: -.025em;
line-height: .95;
text-transform: uppercase;
}
/* ----------------------------------------------------------
MACHINE REGISTRATION DETAILS
---------------------------------------------------------- */
.system-copy::after {
content:
"CTG // SYSTEM ARCHITECTURE // VERIFIED";
display: block;
margin-top: 34px;
padding-top: 12px;
border-top:
1px solid rgba(200,220,225,.10);
font-family:
"Courier New",
monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: .20em;
color: rgba(180,205,212,.34);
text-transform: uppercase;
}
/* ----------------------------------------------------------
SUBTLE TEXT INTERFERENCE
---------------------------------------------------------- */
@keyframes creteHardSignal {
0%,
94%,
100% {
transform: translateX(0);
text-shadow:
0 0 1px rgba(255,255,255,.65);
}
95% {
transform: translateX(-1px);
text-shadow:
2px 0 rgba(140,205,220,.14);
}
96% {
transform: translateX(1px);
}
97% {
transform: translateX(0);
}
}
.system-title {
animation:
creteHardSignal 9s steps(1,end) infinite;
}
/* ----------------------------------------------------------
BUTTONS / ENTRY POINTS
---------------------------------------------------------- */
.cta,
.final a {
border-radius: 0 !important;
clip-path:
polygon(
0 0,
calc(100% - 12px) 0,
100% 12px,
100% 100%,
12px 100%,
0 calc(100% - 12px)
);
font-family:
"Courier New",
monospace;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 760px) {
.hero h1,
.final-wordmark {
letter-spacing: -.055em;
line-height: .80;
}
.system-title {
letter-spacing: -.045em;
}
}
/* ----------------------------------------------------------
REDUCED MOTION
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.system-title,
.module::after {
animation: none !important;
}
}
/* CRETE-V61-HARD-TYPE */
/* ==========================================================
CRETE // V6.3 CONVERGENCE TYPOGRAPHY
========================================================== */
[data-sector="CRETE"] {
position: relative;
isolation: isolate;
}
[data-sector="CRETE"]::before {
content: "";
position: absolute;
width: min(78vw, 1050px);
height: min(78vw, 1050px);
left: 50%;
top: 50%;
transform:
translate(-50%, -50%);
border:
1px solid rgba(
190,
225,
232,
.055
);
border-radius: 50%;
box-shadow:
0 0 0 90px
rgba(
180,
220,
228,
.018
),
0 0 0 180px
rgba(
180,
220,
228,
.012
),
0 0 140px
rgba(
120,
195,
210,
.045
);
pointer-events: none;
z-index: -1;
}
[data-sector="CRETE"]
.final-wordmark {
position: relative;
z-index: 3;
filter:
contrast(1.16);
text-shadow:
0 0 1px
rgba(
255,
255,
255,
.95
),
0 0 28px
rgba(
170,
225,
235,
.075
),
0 20px 80px
rgba(
0,
0,
0,
.75
);
}
/* technical manufacturer line */
[data-sector="CRETE"]
.final-wordmark::before {
content:
"CTG // INTELLIGENCE // NETWORK FABRIC // SOVEREIGN SYSTEMS";
position: absolute;
left: 50%;
top: -38px;
transform:
translateX(-50%);
width: 100%;
text-align: center;
font-family:
"Courier New",
monospace;
font-size:
clamp(
8px,
.72vw,
11px
);
font-weight: 700;
line-height: 1.3;
letter-spacing: .20em;
color:
rgba(
185,
215,
222,
.46
);
-webkit-text-stroke: 0;
text-shadow: none;
white-space: nowrap;
}
/* enormous quiet registration mark */
[data-sector="CRETE"]::after {
content: "CTG";
position: absolute;
left: 50%;
top: 50%;
transform:
translate(
-50%,
-52%
);
font-family:
"Arial Narrow",
Arial,
sans-serif;
font-weight: 900;
font-size:
min(
42vw,
720px
);
line-height: .7;
letter-spacing:
-.09em;
color: transparent;
-webkit-text-stroke:
1px rgba(
200,
225,
230,
.025
);
pointer-events: none;
z-index: -1;
}
/* CRETE statement becomes the last command */
[data-sector="CRETE"]
.final h2 {
margin-top:
clamp(
32px,
5vw,
70px
);
letter-spacing:
-.035em;
}
/* quiet everything immediately around
the manufacturer mark */
[data-sector="CRETE"]
.final {
position: relative;
z-index: 2;
}
@media (
max-width: 760px
) {
[data-sector="CRETE"]
.final-wordmark::before {
white-space: normal;
width: 90vw;
top: -48px;
letter-spacing: .12em;
}
}
/* CRETE-V63-CONVERGENCE-TYPE */
/* ==========================================================
CRETE TECHNOLOGY GROUP
V6.4A // PRODUCTION FOUNDATION
========================================================== */
/*
* Selection stays consistent with the machine.
*/
::selection {
background:
rgba(
190,
235,
242,
.92
);
color:
#050708;
}
/*
* Keyboard navigation.
*
* Mouse users don't receive unnecessary outlines,
* keyboard users retain a strong visible indicator.
*/
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
outline:
1px solid
rgba(
205,
242,
248,
.95
);
outline-offset:
6px;
box-shadow:
0 0 0 4px
rgba(
170,
225,
235,
.08
);
}
/*
* Links/buttons receive a tiny mechanical response.
*/
a {
-webkit-tap-highlight-color:
transparent;
}
a[href],
button {
touch-action:
manipulation;
}
/*
* Prevent huge headings from generating
* accidental horizontal scrolling.
*/
html,
body {
max-width: 100%;
overflow-x: hidden;
}
/*
* Improve text rendering without changing
* the established HARD TYPE aesthetic.
*/
body {
text-rendering:
optimizeLegibility;
-webkit-font-smoothing:
antialiased;
-moz-osx-font-smoothing:
grayscale;
}
/*
* Keep long technical words and labels from
* breaking narrow screens.
*/
section,
.scene,
.system-copy,
.final {
min-width: 0;
}
p,
.system-copy,
.module,
.module-chip {
overflow-wrap:
break-word;
}
/*
* Mobile production pass.
*/
@media (max-width: 760px) {
/*
* Prevent the cinematic sections from becoming
* absurdly tall on a small phone.
*/
section {
min-height:
115svh;
}
/*
* Better spacing around touch targets.
*/
a[href] {
min-height:
42px;
}
/*
* The technical manufacturer line remains readable
* without colliding with the final wordmark.
*/
[data-sector="CRETE"]
.final-wordmark::before {
max-width:
92vw;
line-height:
1.6;
}
}
/*
* Short landscape displays.
*/
@media (
max-height: 600px
) and (
orientation: landscape
) {
section {
min-height:
135vh;
}
}
/*
* Accessibility:
* retain the MONSTER composition while eliminating
* unnecessary motion when the operating system requests it.
*/
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior:
auto !important;
}
*,
*::before,
*::after {
animation-duration:
.001ms !important;
animation-iteration-count:
1 !important;
transition-duration:
.001ms !important;
}
}
/* CRETE-V64A-PRODUCTION-CSS */
/* ==========================================================
CRETE TECHNOLOGY GROUP
V6.4B // CTG NAVIGATION SYSTEM
========================================================== */
.ctg-nav {
position: fixed;
top: 82px;
right: 34px;
z-index: 100;
display: flex;
align-items: center;
gap: 6px;
padding: 6px;
border:
1px solid
rgba(
190,
225,
232,
.10
);
background:
rgba(
3,
6,
8,
.58
);
backdrop-filter:
blur(14px);
-webkit-backdrop-filter:
blur(14px);
clip-path:
polygon(
0 0,
calc(100% - 9px) 0,
100% 9px,
100% 100%,
9px 100%,
0 calc(100% - 9px)
);
}
.ctg-nav-link {
position: relative;
display: flex;
align-items: center;
gap: 9px;
min-height: 34px;
padding:
0 12px;
color:
rgba(
205,
222,
226,
.52
);
text-decoration: none;
font-family:
"Courier New",
monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
transition:
color .25s ease,
background .25s ease,
border-color .25s ease;
}
.ctg-nav-link::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background:
rgba(
190,
235,
242,
.0
);
transition:
background .25s ease;
}
.ctg-nav-link:hover,
.ctg-nav-link:focus-visible {
color:
rgba(
235,
249,
251,
.96
);
background:
rgba(
180,
225,
234,
.055
);
}
.ctg-nav-link:hover::before,
.ctg-nav-link:focus-visible::before {
background:
rgba(
195,
237,
244,
.65
);
}
.ctg-nav-code {
color:
rgba(
155,
194,
201,
.32
);
font-size: 8px;
letter-spacing: .08em;
}
.ctg-nav-link.active {
color:
#eefcff;
background:
rgba(
180,
225,
234,
.075
);
}
.ctg-nav-link.active::before {
background:
rgba(
211,
246,
250,
.82
);
box-shadow:
0 0 9px
rgba(
180,
230,
238,
.22
);
}
.ctg-nav-link.active
.ctg-nav-code {
color:
rgba(
215,
246,
250,
.75
);
}
.ctg-nav-connect {
margin-left: 5px;
border-left:
1px solid
rgba(
190,
225,
232,
.10
);
padding-left: 17px;
}
/*
* Hide navigation during boot.
* The machine gets the first word.
*/
body:not(.crete-ready)
.ctg-nav {
opacity: 0;
pointer-events: none;
transform:
translateY(-8px);
}
/*
* When the page is ready, let it enter quietly.
*/
.ctg-nav {
transition:
opacity .6s ease,
transform .6s ease,
background .25s ease;
}
/*
* Smaller displays.
*/
@media (max-width: 1050px) {
.ctg-nav {
top: auto;
bottom: 22px;
left: 50%;
right: auto;
transform:
translateX(-50%);
max-width:
calc(100vw - 24px);
overflow-x: auto;
scrollbar-width: none;
}
.ctg-nav::-webkit-scrollbar {
display: none;
}
}
@media (max-width: 700px) {
.ctg-nav {
gap: 3px;
padding: 4px;
bottom: 12px;
}
.ctg-nav-link {
min-height: 32px;
padding:
0 9px;
font-size: 8px;
letter-spacing: .09em;
}
.ctg-nav-code {
display: none;
}
.ctg-nav-connect {
margin-left: 2px;
padding-left: 10px;
}
}
/*
* Reduced motion.
*/
@media (prefers-reduced-motion: reduce) {
.ctg-nav {
transition: none;
}
}
/* CRETE-V64B-NAV-CSS */
/* ==========================================================
CRETE TECHNOLOGY GROUP
V6.4C // NORA LINUX OS
========================================================== */
.nora-os {
position: relative;
}
/*
* NORA OS gets an operating-system character:
* more architectural, less organic than NORA AI.
*/
.nora-os .system-name {
letter-spacing:
.055em;
}
.nora-os .eyebrow {
opacity:
.78;
}
.nora-os .content {
border-left:
1px solid
rgba(
190,
230,
238,
.10
);
padding-left:
clamp(
18px,
3vw,
42px
);
}
.nora-os .modules {
position: relative;
}
.nora-os .modules span {
border-color:
rgba(
190,
230,
238,
.16
);
}
.nora-os .sector-label {
letter-spacing:
.18em;
}
/*
* Mobile.
*/
@media (max-width: 760px) {
.nora-os .content {
border-left:
0;
border-top:
1px solid
rgba(
190,
230,
238,
.10
);
padding-left:
0;
padding-top:
22px;
}
}
/* CRETE-V64C-NORA-OS-CSS */
/* ==========================================================
CRETE TECHNOLOGY GROUP
V6.4D // CRETE TECH MARK
========================================================== */
/*
* The CRETE wordmark is deliberately built from the
* existing typography rather than importing a generic
* logo font.
*/
.ctg-tech-mark {
position: relative;
display: inline-flex;
align-items: baseline;
white-space: nowrap;
font-family:
"Arial Narrow",
"Helvetica Neue",
Arial,
sans-serif;
font-weight:
900;
text-transform:
uppercase;
letter-spacing:
-.055em;
}
/*
* Individual letter construction.
*/
.ctg-tech-mark .mark-letter {
position: relative;
display: inline-block;
transform:
scaleX(.91);
transform-origin:
center;
text-shadow:
0 0 0 transparent;
transition:
transform .35s ease,
text-shadow .35s ease;
}
/*
* Engineered spacing between letter groups.
*/
.ctg-tech-mark .mark-letter:nth-child(1) {
margin-right:
.025em;
}
.ctg-tech-mark .mark-letter:nth-child(2) {
margin-right:
-.005em;
}
.ctg-tech-mark .mark-letter:nth-child(3) {
margin-right:
.015em;
}
.ctg-tech-mark .mark-letter:nth-child(4) {
margin-right:
-.005em;
}
/*
* The final E gets a subtle extended terminal.
* It makes the mark feel designed rather than typed.
*/
.ctg-tech-mark .mark-letter:last-child {
margin-right:
.035em;
}
/*
* Thin technical edge.
*/
.ctg-tech-mark::after {
content:
"";
position:
absolute;
left:
.02em;
right:
.035em;
bottom:
-.08em;
height:
1px;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(210,245,249,.52) 12%,
rgba(210,245,249,.14) 50%,
rgba(210,245,249,.52) 88%,
transparent 100%
);
opacity:
.55;
transform:
scaleX(.96);
}
/*
* Tiny machined offset.
*
* This is intentionally extremely subtle.
*/
.ctg-tech-mark::before {
content:
attr(data-mark);
position:
absolute;
inset:
0;
color:
rgba(
185,
235,
241,
.08
);
transform:
translate(
2px,
1px
);
pointer-events:
none;
mix-blend-mode:
screen;
}
/*
* Main hero gets the strongest treatment.
*/
.hero h1.ctg-tech-mark {
letter-spacing:
-.065em;
line-height:
.78;
}
.hero h1.ctg-tech-mark
.mark-letter {
transform:
scaleX(.89);
}
/*
* Final wordmark is slightly more monumental.
*/
.final-brand.ctg-tech-mark {
letter-spacing:
-.065em;
}
.final-brand.ctg-tech-mark
.mark-letter {
transform:
scaleX(.90);
}
/*
* Boot mark stays compact and precise.
*/
.boot-brand.ctg-tech-mark {
letter-spacing:
-.045em;
}
.boot-brand.ctg-tech-mark
.mark-letter {
transform:
scaleX(.92);
}
/*
* Hover/focus response where applicable.
*/
.ctg-tech-mark:hover
.mark-letter {
transform:
scaleX(.91)
translateY(-1px);
text-shadow:
0 0 24px
rgba(
190,
235,
242,
.10
);
}
/*
* Mobile:
* keep the letters engineered without causing overflow.
*/
@media (max-width: 760px) {
.hero h1.ctg-tech-mark {
letter-spacing:
-.055em;
}
.final-brand.ctg-tech-mark {
letter-spacing:
-.055em;
}
.ctg-tech-mark .mark-letter {
transform:
scaleX(.90);
}
}
/*
* Reduced motion.
*/
@media (prefers-reduced-motion: reduce) {
.ctg-tech-mark .mark-letter {
transition:
none;
}
}
/* CRETE-V64D-TECH-MARK */
/* ==========================================================
CRETE TECHNOLOGY GROUP
V6.4E // CRETE SYSTEM IDENTITY
========================================================== */
/*
* CRETE's technical expansion.
*
* This is intentionally treated as a system identifier,
* not as a conventional marketing slogan.
*/
.crete-system-identity {
margin-top:
24px;
color:
rgba(
185,
225,
231,
.42
);
font-family:
"Courier New",
monospace;
font-size:
8px;
font-weight:
700;
line-height:
1.9;
letter-spacing:
.20em;
text-transform:
uppercase;
}
/*
* Hero identity.
*/
.crete-identity-line {
display:
flex;
align-items:
center;
flex-wrap:
wrap;
gap:
9px;
margin-top:
28px;
color:
rgba(
205,
232,
236,
.42
);
font-family:
"Courier New",
monospace;
font-size:
8px;
font-weight:
700;
letter-spacing:
.12em;
text-transform:
uppercase;
}
.crete-identity-line span {
color:
rgba(
222,
248,
251,
.82
);
font-size:
10px;
}
.crete-identity-line i {
width:
18px;
height:
1px;
background:
rgba(
195,
235,
241,
.18
);
}
/*
* Final signature.
*/
.crete-final-identity {
max-width:
720px;
margin:
28px auto 0;
color:
rgba(
195,
232,
237,
.48
);
font-family:
"Courier New",
monospace;
font-size:
clamp(
8px,
1vw,
10px
);
font-weight:
700;
line-height:
1.8;
letter-spacing:
.18em;
text-transform:
uppercase;
}
/*
* Small technical illumination.
*/
.crete-identity-line span,
.crete-final-identity {
text-shadow:
0 0 18px
rgba(
175,
230,
238,
.08
);
}
/*
* Mobile.
*/
@media (max-width: 760px) {
.crete-identity-line {
gap:
6px;
line-height:
2;
letter-spacing:
.08em;
}
.crete-identity-line i {
width:
10px;
}
.crete-final-identity {
max-width:
92vw;
letter-spacing:
.10em;
}
}
/*
* Reduced motion doesn't affect this identity,
* but keeping the rule here makes the block self-contained.
*/
@media (prefers-reduced-motion: reduce) {
.crete-system-identity,
.crete-identity-line,
.crete-final-identity {
transition:
none;
}
}
/* CRETE-V64E-IDENTITY */
/* ==========================================================
CRETE TECHNOLOGY GROUP
V6.4E.1 // IDENTITY AMPLIFIER
========================================================== */
/*
* CRETE
*
* C COMPUTE
* R RESEARCH
* E ENGINEERING
* T TECHNOLOGY
* E ECOSYSTEM
*
* This is now a secondary brand statement,
* not diagnostic microtext.
*/
/* ----------------------------------------------------------
HERO IDENTITY
---------------------------------------------------------- */
.hero .crete-identity-line {
position: relative;
display: grid;
grid-template-columns:
repeat(5, minmax(0, 1fr));
width:
min(100%, 980px);
gap:
0;
margin-top:
clamp(30px, 4vw, 52px);
padding:
18px 0 16px;
border-top:
1px solid
rgba(
195,
230,
236,
.16
);
border-bottom:
1px solid
rgba(
195,
230,
236,
.08
);
font-size:
clamp(
10px,
.9vw,
14px
);
line-height:
1;
letter-spacing:
.10em;
color:
rgba(
220,
238,
241,
.62
);
}
/*
* Each CRETE initial becomes a structural marker.
*/
.hero .crete-identity-line span {
display: inline-block;
margin-right:
7px;
font-family:
"Arial Narrow",
"Helvetica Neue",
Arial,
sans-serif;
font-size:
clamp(
22px,
2.1vw,
34px
);
font-weight:
900;
line-height:
.75;
letter-spacing:
-.04em;
color:
rgba(
239,
253,
255,
.98
);
text-shadow:
0 0 24px
rgba(
180,
230,
238,
.14
);
}
/*
* Existing separator elements become vertical
* engineering registration lines.
*/
.hero .crete-identity-line i {
position: absolute;
top:
10px;
bottom:
10px;
width:
1px;
height:
auto;
background:
linear-gradient(
180deg,
transparent,
rgba(190,230,237,.20),
transparent
);
}
/*
* We don't need the original inline separators in
* grid mode, so hide them and generate divisions
* using the text positions visually.
*/
.hero .crete-identity-line i {
display:
none;
}
/*
* Give the entire identity a subtle system rail.
*/
.hero .crete-identity-line::before {
content:
"CTG // SYSTEM IDENTITY";
position:
absolute;
left:
0;
top:
-19px;
font-family:
"Courier New",
monospace;
font-size:
8px;
font-weight:
700;
letter-spacing:
.22em;
color:
rgba(
175,
215,
222,
.38
);
}
/*
* Small illuminated endpoint.
*/
.hero .crete-identity-line::after {
content:
"";
position:
absolute;
right:
0;
top:
-4px;
width:
38px;
height:
1px;
background:
rgba(
215,
247,
250,
.55
);
box-shadow:
0 0 12px
rgba(
180,
230,
238,
.18
);
}
/* ----------------------------------------------------------
BOOT IDENTITY
---------------------------------------------------------- */
.crete-system-identity {
margin-top:
27px;
font-size:
clamp(
9px,
.75vw,
12px
);
line-height:
2;
letter-spacing:
.24em;
color:
rgba(
205,
235,
240,
.60
);
}
/* ----------------------------------------------------------
FINAL CRETE SIGNATURE
---------------------------------------------------------- */
.crete-final-identity {
position:
relative;
width:
min(92vw, 1000px);
max-width:
none;
margin:
38px auto 0;
padding:
18px 20px;
border-top:
1px solid
rgba(
195,
232,
238,
.14
);
border-bottom:
1px solid
rgba(
195,
232,
238,
.07
);
font-size:
clamp(
11px,
1.15vw,
16px
);
font-weight:
700;
line-height:
1.7;
letter-spacing:
.19em;
color:
rgba(
224,
243,
246,
.70
);
text-shadow:
0 0 22px
rgba(
175,
230,
238,
.10
);
}
/*
* Manufacturer registration line.
*/
.crete-final-identity::before {
content:
"CRETE // TECHNOLOGY ARCHITECTURE";
position:
absolute;
left:
50%;
top:
-19px;
transform:
translateX(-50%);
font-size:
8px;
letter-spacing:
.25em;
color:
rgba(
175,
215,
222,
.36
);
white-space:
nowrap;
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 760px) {
.hero .crete-identity-line {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap:
20px 12px;
width:
100%;
padding:
22px 0 18px;
font-size:
10px;
line-height:
1.25;
letter-spacing:
.07em;
}
.hero .crete-identity-line span {
font-size:
25px;
margin-right:
5px;
}
.crete-system-identity {
font-size:
9px;
letter-spacing:
.14em;
}
.crete-final-identity {
width:
92vw;
padding:
18px 8px;
font-size:
10px;
line-height:
1.9;
letter-spacing:
.11em;
}
.crete-final-identity::before {
width:
100%;
white-space:
normal;
line-height:
1.5;
}
}
/* CRETE-V64E1-IDENTITY-AMPLIFIER */
/* ==========================================================
CRETE TECHNOLOGY GROUP
V6.4E.2 // IDENTITY GRID ALIGNMENT
========================================================== */
/*
* Five exact engineering columns.
*
* C R E T E
* COMPUTE RESEARCH ENGINEER TECHNOLOGY ECOSYSTEM
*/
.hero .crete-identity-line {
display: grid !important;
grid-template-columns:
repeat(5, minmax(0, 1fr)) !important;
align-items:
end !important;
width:
min(100%, 1080px) !important;
column-gap:
0 !important;
row-gap:
0 !important;
}
/*
* Existing separator nodes don't participate
* in the alignment grid.
*/
.hero .crete-identity-line > i {
display:
none !important;
}
/*
* Every letter starts an exact column.
*
* Because the current HTML contains:
*
* span + text + i
*
* CSS grid normally treats the loose text as anonymous
* grid items. Instead of letting those items drift,
* explicitly align the complete sequence.
*/
.hero .crete-identity-line {
text-align:
center !important;
}
/*
* Strong vertical registration rails.
*/
.hero .crete-identity-line::after {
content:
"" !important;
position:
absolute !important;
left:
0 !important;
right:
0 !important;
top:
0 !important;
bottom:
0 !important;
width:
auto !important;
height:
auto !important;
pointer-events:
none !important;
background:
linear-gradient(
90deg,
transparent 19.9%,
rgba(190,230,237,.10) 20%,
transparent 20.1%,
transparent 39.9%,
rgba(190,230,237,.10) 40%,
transparent 40.1%,
transparent 59.9%,
rgba(190,230,237,.10) 60%,
transparent 60.1%,
transparent 79.9%,
rgba(190,230,237,.10) 80%,
transparent 80.1%
) !important;
box-shadow:
none !important;
}
/*
* Keep initials visually identical.
*/
.hero .crete-identity-line span {
display:
inline-block !important;
min-width:
1em;
margin:
0 .18em 0 0 !important;
vertical-align:
middle;
text-align:
center;
}
/*
* Give the rail more room so the identity feels
* intentional rather than cramped.
*/
.hero .crete-identity-line {
padding:
24px 12px 22px !important;
font-size:
clamp(10px, .82vw, 13px) !important;
line-height:
1.3 !important;
}
/*
* System identifier remains registered to left edge.
*/
.hero .crete-identity-line::before {
left:
0 !important;
text-align:
left !important;
}
/* ----------------------------------------------------------
FINAL SIGNATURE ALIGNMENT
---------------------------------------------------------- */
.crete-final-identity {
display:
flex !important;
justify-content:
center !important;
align-items:
center !important;
text-align:
center !important;
width:
min(92vw, 1080px) !important;
margin-left:
auto !important;
margin-right:
auto !important;
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 760px) {
.hero .crete-identity-line {
grid-template-columns:
1fr !important;
text-align:
left !important;
padding:
24px 14px 20px !important;
line-height:
2.2 !important;
}
.hero .crete-identity-line::after {
display:
none !important;
}
.hero .crete-identity-line span {
width:
34px;
margin-right:
10px !important;
text-align:
left;
}
.crete-final-identity {
text-align:
center !important;
}
}
/* CRETE-V64E2-GRID-ALIGNMENT */
/* ==========================================================
CRETE TECHNOLOGY GROUP
V6.4E.3 // PROFESSIONAL IDENTITY
========================================================== */
/*
* Final presentation:
*
* CRETE
* TECHNOLOGY GROUP
*
* COMPUTE • RESEARCH • ENGINEERING • TECHNOLOGY • ECOSYSTEM
*
* Clean corporate technology identity.
*/
/* ----------------------------------------------------------
HERO
---------------------------------------------------------- */
.hero .crete-identity-line {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
grid-template-columns: none !important;
width: auto !important;
max-width: 1000px !important;
margin-top: 30px !important;
padding: 16px 0 !important;
gap: 0 !important;
border-top:
1px solid rgba(205,235,240,.12) !important;
border-bottom:
1px solid rgba(205,235,240,.07) !important;
font-family:
"Arial Narrow",
"Helvetica Neue",
Arial,
sans-serif !important;
font-size:
clamp(10px, .82vw, 13px) !important;
font-weight:
700 !important;
line-height:
1 !important;
letter-spacing:
.12em !important;
text-align:
left !important;
text-transform:
uppercase !important;
white-space:
nowrap !important;
color:
rgba(215,235,239,.62) !important;
}
/*
* Initial letters are part of the word,
* not separate giant design elements.
*/
.hero .crete-identity-line span {
display: inline !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: 900 !important;
line-height: inherit !important;
letter-spacing: inherit !important;
vertical-align: baseline !important;
transform: none !important;
color:
rgba(240,250,252,.94) !important;
text-shadow: none !important;
}
/*
* Simple professional separators.
*/
.hero .crete-identity-line i {
position: static !important;
display: inline-block !important;
flex: 0 0 auto !important;
width: 3px !important;
height: 3px !important;
margin: 0 16px !important;
border-radius: 50% !important;
background:
rgba(205,235,240,.40) !important;
}
/*
* Remove the experimental technical overlays.
*/
.hero .crete-identity-line::before,
.hero .crete-identity-line::after {
display: none !important;
content: none !important;
}
/* ----------------------------------------------------------
BOOT
---------------------------------------------------------- */
.crete-system-identity {
margin-top:
20px !important;
font-family:
"Arial Narrow",
"Helvetica Neue",
Arial,
sans-serif !important;
font-size:
9px !important;
font-weight:
700 !important;
line-height:
1.8 !important;
letter-spacing:
.16em !important;
color:
rgba(195,225,230,.48) !important;
}
/* ----------------------------------------------------------
FINAL COMPANY SIGNATURE
---------------------------------------------------------- */
.crete-final-identity {
position: relative !important;
display: block !important;
width: auto !important;
max-width: 1000px !important;
margin:
32px auto 0 !important;
padding:
17px 24px !important;
border-top:
1px solid rgba(205,235,240,.12) !important;
border-bottom:
1px solid rgba(205,235,240,.07) !important;
font-family:
"Arial Narrow",
"Helvetica Neue",
Arial,
sans-serif !important;
font-size:
clamp(10px, .9vw, 13px) !important;
font-weight:
700 !important;
line-height:
1.5 !important;
letter-spacing:
.14em !important;
text-align:
center !important;
text-transform:
uppercase !important;
color:
rgba(220,239,242,.68) !important;
text-shadow:
none !important;
}
.crete-final-identity::before,
.crete-final-identity::after {
display: none !important;
content: none !important;
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 760px) {
.hero .crete-identity-line {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: 8px 0 !important;
white-space: normal !important;
padding:
15px 0 !important;
font-size:
9px !important;
line-height:
1.6 !important;
letter-spacing:
.08em !important;
}
.hero .crete-identity-line i {
display:
inline-block !important;
width:
2px !important;
height:
2px !important;
margin:
0 9px !important;
}
.crete-final-identity {
width:
92% !important;
padding:
15px 8px !important;
font-size:
9px !important;
line-height:
1.8 !important;
letter-spacing:
.09em !important;
}
}
/* CRETE-V64E3-PROFESSIONAL-IDENTITY */
/* ==========================================================
CRETE TECHNOLOGY GROUP
V6.4F // DATA LANGUAGE
========================================================== */
/*
* Real machine-language telemetry.
*
* Binary -> ASCII -> hexadecimal.
*
* Extremely low visual priority.
* This should be discovered, not shouted.
*/
.ctg-data-language {
position:
fixed;
inset:
0;
z-index:
2;
overflow:
hidden;
pointer-events:
none;
user-select:
none;
opacity:
1;
font-family:
"Courier New",
Courier,
monospace;
}
/*
* Individual telemetry rails.
*/
.ctg-data-rail {
position:
absolute;
width:
max-content;
white-space:
nowrap;
font-size:
clamp(
7px,
.48vw,
9px
);
font-weight:
400;
line-height:
1;
letter-spacing:
.16em;
color:
rgba(
175,
225,
232,
.075
);
text-shadow:
0 0 10px
rgba(
160,
220,
230,
.025
);
will-change:
transform;
}
/*
* CRETE
*/
.ctg-data-rail.rail-a {
top:
18%;
left:
-10%;
animation:
ctg-data-drift-right
42s
linear
infinite;
}
/*
* NORA
*/
.ctg-data-rail.rail-b {
top:
37%;
right:
-15%;
color:
rgba(
175,
225,
232,
.055
);
animation:
ctg-data-drift-left
55s
linear
infinite;
}
/*
* CTG
*/
.ctg-data-rail.rail-c {
top:
57%;
left:
8%;
color:
rgba(
190,
230,
236,
.065
);
animation:
ctg-data-pulse
11s
ease-in-out
infinite;
}
/*
* SYSTEM
*/
.ctg-data-rail.rail-d {
top:
73%;
left:
-18%;
color:
rgba(
175,
225,
232,
.050
);
animation:
ctg-data-drift-right
63s
linear
infinite;
}
/*
* COMPUTE
*/
.ctg-data-rail.rail-e {
top:
88%;
right:
-12%;
color:
rgba(
175,
225,
232,
.045
);
animation:
ctg-data-drift-left
70s
linear
infinite;
}
/* ----------------------------------------------------------
MOVEMENT
---------------------------------------------------------- */
@keyframes ctg-data-drift-right {
from {
transform:
translate3d(
-8vw,
0,
0
);
}
to {
transform:
translate3d(
32vw,
0,
0
);
}
}
@keyframes ctg-data-drift-left {
from {
transform:
translate3d(
10vw,
0,
0
);
}
to {
transform:
translate3d(
-32vw,
0,
0
);
}
}
@keyframes ctg-data-pulse {
0%,
100% {
opacity:
.35;
transform:
translateX(0);
}
50% {
opacity:
1;
transform:
translateX(12px);
}
}
/* ----------------------------------------------------------
EDGE TELEMETRY
---------------------------------------------------------- */
.ctg-data-language::before {
content:
"ASCII // 7-BIT CHARACTER SYSTEM | BINARY // BASE-2 | HEX // BASE-16";
position:
absolute;
left:
18px;
bottom:
22px;
font-size:
7px;
font-weight:
700;
letter-spacing:
.18em;
color:
rgba(
180,
225,
232,
.075
);
}
/*
* Right-side machine address.
*/
.ctg-data-language::after {
content:
"CTG::43.52.45.54.45";
position:
absolute;
right:
18px;
top:
50%;
transform:
rotate(90deg)
translateX(50%);
transform-origin:
right center;
font-size:
7px;
font-weight:
700;
letter-spacing:
.22em;
color:
rgba(
190,
230,
236,
.065
);
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 760px) {
.ctg-data-rail {
font-size:
6px;
letter-spacing:
.10em;
}
.ctg-data-rail.rail-b,
.ctg-data-rail.rail-d {
display:
none;
}
.ctg-data-language::before {
display:
none;
}
.ctg-data-language::after {
opacity:
.65;
}
}
/* ----------------------------------------------------------
ACCESSIBILITY
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.ctg-data-rail {
animation:
none !important;
}
}
/* CRETE-V64F-DATA-LANGUAGE-CSS */
/* ==========================================================
CRETE V6.4F // BOOT ASCII HANDSHAKE
========================================================== */
.boot-ascii {
margin:
10px 0 18px;
font-family:
"Courier New",
Courier,
monospace;
font-size:
8px;
font-weight:
700;
line-height:
1.7;
letter-spacing:
.13em;
color:
rgba(
180,
225,
232,
.38
);
}
.boot-ascii span {
display:
inline-block;
margin-left:
12px;
color:
rgba(
220,
245,
248,
.62
);
}
/* CRETE-V64F-BOOT-ASCII */
/* ==========================================================
CRETE TECHNOLOGY GROUP
V6.5 // FOUNDER TRANSMISSION
========================================================== */
.founder-transmission {
position: relative;
min-height: 150vh;
display: flex;
align-items: center;
padding:
clamp(120px, 16vh, 220px)
clamp(24px, 8vw, 140px);
overflow: hidden;
background:
linear-gradient(
180deg,
rgba(2,5,6,.12),
rgba(2,5,6,.82) 20%,
rgba(1,3,4,.96) 52%,
rgba(2,5,6,.84) 82%,
rgba(2,5,6,.15)
);
}
/*
* Quiet machine-grid background.
*/
.founder-transmission::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(
rgba(180,225,232,.022) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(180,225,232,.018) 1px,
transparent 1px
);
background-size:
70px 70px;
mask-image:
linear-gradient(
transparent,
black 20%,
black 80%,
transparent
);
}
.founder-atmosphere {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.founder-binary {
position: absolute;
white-space: nowrap;
font-family:
"Courier New",
monospace;
font-size:
clamp(8px, .65vw, 11px);
letter-spacing: .22em;
color:
rgba(190,230,236,.055);
}
.binary-one {
top: 18%;
right: -3%;
}
.binary-two {
bottom: 14%;
left: 5%;
}
.founder-shell {
position: relative;
z-index: 3;
width: min(100%, 1050px);
margin: 0 auto;
}
.founder-auth {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
font-family:
"Courier New",
monospace;
font-size:
clamp(8px, .65vw, 10px);
font-weight: 700;
letter-spacing: .24em;
color:
rgba(205,238,243,.66);
}
.auth-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background:
rgba(210,245,248,.9);
box-shadow:
0 0 10px
rgba(180,235,242,.45);
animation:
founder-auth-pulse
2.4s
ease-in-out
infinite;
}
@keyframes founder-auth-pulse {
0%,
100% {
opacity: .3;
}
50% {
opacity: 1;
}
}
.founder-origin {
font-size:
clamp(10px, .8vw, 13px);
font-weight: 700;
letter-spacing: .18em;
color:
rgba(175,205,211,.42);
}
.founder-rule {
width: 100%;
height: 1px;
margin:
clamp(28px, 4vw, 52px)
0
clamp(48px, 7vw, 90px);
background:
linear-gradient(
90deg,
rgba(195,230,236,.5),
rgba(195,230,236,.08) 60%,
transparent
);
}
.founder-statement {
max-width: 900px;
}
.founder-statement p {
max-width: 780px;
margin:
0
0
clamp(34px, 5vw, 64px);
font-size:
clamp(20px, 2vw, 31px);
font-weight: 400;
line-height: 1.55;
letter-spacing: -.018em;
color:
rgba(220,232,235,.70);
}
.founder-statement
.founder-lead {
max-width: 900px;
font-size:
clamp(34px, 4.4vw, 68px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -.045em;
color:
rgba(238,247,248,.96);
}
.founder-system-thoughts {
margin:
clamp(70px, 9vw, 130px)
0;
border-top:
1px solid
rgba(190,225,231,.14);
border-bottom:
1px solid
rgba(190,225,231,.14);
}
.founder-system-thoughts div {
display: grid;
grid-template-columns:
55px 1fr;
gap: 20px;
padding:
clamp(20px, 3vw, 34px)
0;
border-bottom:
1px solid
rgba(190,225,231,.07);
font-size:
clamp(16px, 1.45vw, 23px);
color:
rgba(220,235,238,.74);
}
.founder-system-thoughts
div:last-child {
border-bottom: 0;
}
.founder-system-thoughts span {
font-family:
"Courier New",
monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
color:
rgba(170,220,229,.42);
}
.founder-statement
.founder-architecture {
margin-top:
clamp(80px, 10vw, 150px);
font-size:
clamp(30px, 3.5vw, 55px);
line-height: 1.15;
color:
rgba(230,242,244,.86);
}
.founder-architecture strong {
display: block;
margin-top: 10px;
color:
rgba(244,250,251,.98);
}
.founder-final-thought {
margin:
clamp(120px, 15vw, 220px)
0
clamp(100px, 12vw, 180px);
}
.founder-final-thought span,
.founder-final-thought strong {
display: block;
font-size:
clamp(38px, 5.6vw, 84px);
line-height: 1.02;
letter-spacing: -.055em;
}
.founder-final-thought span {
color:
rgba(205,220,224,.42);
}
.founder-final-thought strong {
margin-top: 12px;
color:
rgba(242,249,250,.98);
}
.founder-signature {
position: relative;
padding:
clamp(34px, 5vw, 60px)
0
0;
border-top:
1px solid
rgba(190,230,236,.18);
}
.founder-name {
font-size:
clamp(22px, 2.4vw, 36px);
font-weight: 800;
letter-spacing: -.025em;
color:
rgba(240,248,249,.94);
}
.founder-role,
.founder-location,
.founder-hex {
margin-top: 8px;
font-family:
"Courier New",
monospace;
font-size:
9px;
font-weight: 700;
letter-spacing: .19em;
color:
rgba(170,205,211,.48);
}
.founder-hex {
margin-top: 24px;
color:
rgba(185,225,232,.26);
}
/*
* Mobile refinement.
*/
@media (max-width: 760px) {
.founder-transmission {
min-height: auto;
padding:
120px 24px;
}
.founder-system-thoughts div {
grid-template-columns:
35px 1fr;
}
.founder-final-thought {
margin:
110px 0;
}
}
/*
* Accessibility.
*/
@media (prefers-reduced-motion: reduce) {
.auth-dot {
animation: none;
}
}
/* CRETE-V65-FOUNDER-CSS */