/* VALLSTEIN CORPORATE WEBSITE ONE STYLESHEET FOR THE WHOLE SITE. NO BOOTSTRAP, NO DEVEXTREME. THE PALETTE IS THE ORIGINAL ONE. THE STRUCTURE IS BUILT WITH LIGHT AND SPACE INSTEAD OF RULES AND BOXES: NO GRID LINES, NO CELL DIVIDERS, NO OUTLINED CARDS. */ /* THE BRAND FACE. THREE COMPETING src LINES USED TO CANCEL EACH OTHER OUT, AND THE .eot FALLBACK ONLY EVER MATTERED FOR INTERNET EXPLORER. ONE DECLARATION IS ENOUGH. TO RUN THE WHOLE SITE ON IT, POINT --font AT --font-brand BELOW */ @font-face { font-family: 'RotisSansSerif'; src: local('Rotis Semi Sans Std'), url('/fonts/Rotis SemiSans 55.otf') format('opentype'), url('/fonts/Rotis SemiSans 55.ttf') format('truetype'); /* THE FILE CARRIES ONE WEIGHT ONLY, 500 BY ITS OWN OS/2 TABLE. DECLARING THE RANGE LETS THE BROWSER USE IT FOR EVERY WEIGHT THE DESIGN ASKS FOR AND SYNTHESISE THE BOLDER STEPS, INSTEAD OF FALLING BACK TO SEGOE UI ON EVERY HEADING */ font-weight: 400 700; font-display: swap; } :root { --orange: #F47F24; /* THE SAME ORANGE, ONE STEP LIGHTER, FOR ORANGE USED AS TEXT. THE BRAND COLOUR IS 6.8:1 ON THE NIGHT BACKGROUND, WHICH IS THIN FOR A 12px UPPERCASE LABEL. THIS TINT IS 8.5:1 AT THE SAME HUE AND SATURATION, SO IT READS AS THE SAME ORANGE. SURFACES, RULES, DOTS AND THE BUTTON GRADIENT KEEP --orange UNTOUCHED */ --orange-text: #FF9A4D; --blue: #54ABCE; --night: #15171B; --night-2: #1A1D22; --raise: rgba(255,255,255,.045); --raise-2: rgba(255,255,255,.075); --edge: rgba(255,255,255,.07); --edge-2: rgba(255,255,255,.13); /* THE SECONDARY GREY. IT WAS #9C9894, 6.3:1 ON THE NIGHT BACKGROUND: INSIDE THE STANDARD, BUT READ AS TOO DARK. AT #D2CECA IT IS 11.5:1 AND STILL A STEP BELOW --text AT 15.2:1, WHICH IS WHAT KEEPS THE TWO LEVELS OF READING APART */ --mute: #D2CECA; --text: #EEECE9; --max: 1240px; --pad: clamp(22px, 4vw, 44px); --r: 20px; --r-sm: 14px; --r-btn: 11px; --shadow: 0 40px 80px -52px rgba(0,0,0,.95); /* THE BRAND FACE RUNS THE WHOLE SITE, AS IT DID BEFORE THE REDESIGN. --font-system IS THE FALLBACK STACK, KEPT SO THE SWITCH IS ONE LINE EITHER WAY */ --font-brand: "RotisSansSerif", "Segoe UI", Arial, sans-serif; --font-system: "Segoe UI", Inter, -apple-system, Arial, sans-serif; --font: var(--font-brand); --nav-h: 78px; --ease: cubic-bezier(.22,.61,.36,1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--night); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; position: relative; /* clip, NOT hidden: overflow-x: hidden turns the body into a scroll container and that is the other classic way of killing position: sticky on the header */ overflow-x: clip; } /* ---------- ATMOSPHERE: SLOW DRIFTING LIGHT, PLUS A FILM OF GRAIN ---------- */ .sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .sky i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; } .sky i:nth-child(1) { width: 62vw; height: 62vw; left: -14vw; top: -22vw; background: radial-gradient(circle, rgba(244,127,36,.30), transparent 65%); animation: drift-a 34s var(--ease) infinite alternate; } .sky i:nth-child(2) { width: 54vw; height: 54vw; right: -16vw; top: -8vw; background: radial-gradient(circle, rgba(84,171,206,.24), transparent 66%); animation: drift-b 42s var(--ease) infinite alternate; } .sky i:nth-child(3) { width: 70vw; height: 70vw; left: 24vw; bottom: -46vw; background: radial-gradient(circle, rgba(84,171,206,.14), transparent 68%); animation: drift-c 50s var(--ease) infinite alternate; } .sky::after { content: ""; position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @keyframes drift-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(7vw,5vw,0) scale(1.16); } } @keyframes drift-b { from { transform: translate3d(0,0,0) scale(1.06); } to { transform: translate3d(-6vw,8vw,0) scale(1); } } @keyframes drift-c { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-9vw,-6vw,0) scale(1.2); } } /* THE CONTENT SITS ABOVE THE DRIFTING LIGHT. THE HEADER IS LEFT OUT ON PURPOSE: body > .top BEATS .top ON SPECIFICITY AND WOULD OVERRIDE ITS position: sticky */ body > main, body > .bottom { position: relative; z-index: 1; } img { max-width: 100%; height: auto; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); } /* ---------- NAV ---------- */ /* A NAVIGATION BAR IS NOT A DOCUMENT: CLICKING OR DRAGGING ON IT SHOULD NOT PLACE A TEXT CARET NOR SELECT THE LABELS. THE CONTENT OF THE PAGE STAYS SELECTABLE */ .top { position: sticky; top: 0; z-index: 60; user-select: none; -webkit-user-select: none; cursor: default; transition: background .3s, backdrop-filter .3s, box-shadow .3s; } .top a, .top button { cursor: pointer; } .top.scrolled { background: rgba(21,23,27,.72); backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 1px 0 var(--edge), 0 18px 40px -34px rgba(0,0,0,.9); } .nav { display: flex; align-items: center; height: var(--nav-h); gap: 44px; transition: height .3s var(--ease); } .top.scrolled .nav { height: 66px; } /* THE LOGO IS DRAWN FOR A DARK BACKGROUND ALREADY: WHITE WORDMARK, COLOURED BALL. NEVER FILTER IT TO WHITE, THAT IS WHAT KILLS THE BALL */ .nav .logo { height: 44px; display: block; transition: transform .3s var(--ease), height .3s var(--ease); } .top.scrolled .nav .logo { height: 36px; } .nav a:hover .logo { transform: scale(1.04); } /* THE