/* ============================================================ theme-elyisius.css, ELYISIUS Client values for saas-layout. Obsidian ground, Horizon blue accent, set off the brand values already in the live site's styles-redesign.css (--midnight #101a33, --ember #e46712, --ivory #f2efe8, Fraunces plus Inter). Nothing invented. WHY THE GROUND WENT DARKER THAN THE OLD SITE The old site sat on #101a33 with a #B0A68F tan field under half the page. Six live dark tech leaders were measured on 2026-08-05 and not one of them puts a mid tone under a full page of body copy: Linear rgb(8,9,10), Resend rgb(0,0,0), Railway rgb(19,17,28), and the light three sit at rgb(247,247,248) or above. Values and method are banked in Elyisius/Website-Agent/patterns/03-dark-tech-saas.md. This ground is #0b0d14, near black carrying the brand's blue cast, so Obsidian is still the ground and the tan is gone. THE ONE RULE THAT MAKES IT WORK Blue appears on exactly one kind of thing, the primary button, plus the eyebrow, the card index and the outcome line. Not on headings, not on body copy, not on borders. The primary button is the only filled block on the page. WHY THIS BLUE AND NOT THE BRAND SLATE The brand file carries slate #42597a. Filled, it measures 2.72:1 against this ground, so the button shape itself nearly disappears on near black and only its label reads. #6f9bd8 is the same hue lifted until the BLOCK reads, 6.8:1 on the ground, and it takes the ground colour as its label at the same 6.8:1. Slate stays available as a quiet surface and is not used as the act. TYPE, tracking is not optional here The same six sites all set negative tracking on display type, the measured range being -0.96px to -3.84px, and four of six run line height at or below 1.0. The old site ran default tracking at 64px, which is the loudest amateur tell in this lane. --display-tracking is -0.022em. CONTRAST, measured not guessed, on ground #0b0d14 fg #f2efe8 .................. 16.9 : 1 headings ink-soft #c6c3bc ........... 11.03 : 1 body copy ink-faint #8c8a85 ........... 5.63 : 1 captions, fine print accent #6f9bd8 .............. 6.8 : 1 eyebrow, index, outcome accent-bright #8ab4ea ...... 9.06 : 1 hover, links on dark ground on accent ............ 6.8 : 1 primary button label On tint #131826: fg 15.41, ink-soft 10.06, ink-faint 5.13. AND OVER THE MARK BACKDROP, which is the real worst case. At --markdrop-opacity 0.13 the mark's lightest pixel lifts the ground to #2b2c33. Measured there: fg 12.1, ink-soft 7.9, accent 4.87, and ink-faint at its old #8c8a85 fell to 4.03, which is a FAIL. That is why ink-faint moved to #a3a19b, 5.38 over the mark and 7.51 over bare ground. All clear AA. ============================================================ */ :root { /* --- the page's own ground and text --- */ --ground: #0b0b0c; /* neutral, the blue cast was reading as a wash */ --fg: #f2efe8; --paper: #f2efe8; --paper-soft: #c6c3bc; --paper-faint: #d6d3cd; --tint: #141415; /* the quiet band, one step off ground */ /* NO FILL AT ALL, Seth's call 2026-08-05, he wanted the tiles to look like they hover over nothing. Even #ffffff08 is a pane of glass laid over the mark, and nine of them in a row cut the mark into nine rectangles. A card is now a hairline and its own type, nothing else. Safe because the contrast was already measured against the mark's lightest pixel, #2b2c33, where body copy holds 7.9:1 and fine print 5.38:1. */ --card-bg: transparent; --ink: #141415; --ink-deep: #060607; /* hero, close and footer, the darkest */ --ink-soft: #c6c3bc; --ink-faint: #d6d3cd; /* lifted again for markdrop 0.24 */ /* --- the ACT. Horizon blue, set 2026-08-05 on Seth's call after ember was cut and an ivory only pass was too quiet for him. Lifted out of the brand's own slate rather than picked fresh, see the header note for the measurement that forced the lift. The primary button is the only filled block on the page. Break that and the page loses its only signpost. The WORDMARK keeps its own ember and is never restyled. --- */ --accent: #6f9bd8; --accent-bright: #8ab4ea; --accent-deep: #4d7cc7; --accent-ink: #0b0b0c; --accent-on-dark:#a8c8f0; --btn-on-dark-bg: #6f9bd8; --btn-on-dark-hover: #8ab4ea; --btn-on-dark-ink: #0b0b0c; /* --- rules --- */ --rule: #ffffff1c; --rule-strong: #ffffff40; --rule-on-dark: #ffffff2b; /* --- header --- */ --header-bg: #0b0b0cf2; --header-h: 5rem; --mark-size: 2.4rem; /* --- hero. THE ART IS THE WORDMARK NOW, not a photograph, on Seth's call 2026-08-05. Because the art is lettering and not a picture, the scrim has to almost let go: a wash heavy enough to protect type over a photograph turns white lettering into grey mud. It is light and even, and the wordmark carries its own low opacity instead, set below. `contain` because a lockup cropped by `cover` loses its first and last letter at some viewport. --- */ --hero-scrim: linear-gradient(180deg, #0b0b0c26 0%, #0b0b0c14 45%, #0b0b0c3d 100%); --hero-media-fit: contain; --hero-media-pos: center center; --hero-media-inset: clamp(1rem, 3vw, 2.5rem); --hero-media-mask: none; /* --- EVERYTHING CENTRED, Seth's call 2026-08-05. He did not want the left indentation. These six tokens are the whole switch, the same one theme-ocf.css throws, so no markup changed to do it. The mirrored eyebrow rule only draws when the eyebrow is centred, which is why --eyebrow-rule-lead goes back up: left ranged it is capped at 0 and never appears. Body measure stays capped at --measure-text so a centred paragraph never runs long enough to lose the eye on the return sweep. --- */ --head-inline: auto; --head-align: center; --head-justify: center; --eyebrow-rule-lead: 4.5rem; --card-align: center; --card-items: center; /* --- partner logos, when there are any to show --- */ --partner-h: 2.6rem; --partner-filter: grayscale(1) brightness(1.7); --partner-opacity: 0.7; /* --- the mark backdrop. RAISED from 0.05 to 0.13 on Seth's call 2026-08-05, he wanted the floating wordmark to read rather than sit almost black. 0.13 lifts its lightest pixel to #2b2c33, which is the ground this page's contrast is really measured against, and it is what moved ink-faint off #8c8a85. Past about 0.16 the fine print fails AA over the mark no matter which grey it uses, so 0.13 is the ceiling this palette can carry. --- */ --markdrop-opacity: 0.24; /* THE MARK KEEPS ITS OWN EMBER, Seth's call 2026-08-05. It was flattened to grey for one pass and he asked for the orange back. This is the ONE place ember is allowed on the page, and it is the logo, which is never restyled. The act is still blue and still the only filled block, so the two do not compete: one is a signpost, the other is a watermark. */ --markdrop-filter: none; --markdrop-vw: 150vw; --markdrop-cap: 1180px; /* --- THE LINE FIELD IS BLUE, Seth's call 2026-08-05. It was ivory, which is the page's brightest ink, drawn at 0.1 to 0.2 stroke opacity behind every band of body copy. Safe to change and safe to brighten the travelling few, because blue is DARKER in luminance than ivory at the same opacity: this hue lands around 0.21 relative luminance against ivory's 0.86, so a stroke that lifts the local ground less than the old one cannot break a contrast figure the old one already passed. --- */ --field-line: #6f9bd8; /* --- THE PAGE'S WEATHER. The hero shader again, run at 0.28 speed and held at this opacity behind every band on the page. THIS NUMBER IS A CONTRAST CEILING, NOT A TASTE SETTING, the same way the markdrop opacity was. The rule that governs it is the one this build already learned: the ceiling is set by the SMALLEST INK on the page, which here is 13px fine print at #d6d3cd. MEASURED, not estimated: the page was rendered with all its content hidden and the whole backdrop sampled. The brightest pixel the cloud reaches is rgb(22,27,36). Against that, fine print #d6d3cd holds 11.56, body copy #c6c3bc holds 9.81, the eyebrow blue #a8c8f0 holds 10.02 and the filled button holds 6.05. All clear AA with room to spare, which is what says 0.10 is not the ceiling, only where it sits today. Raising this is not free. Every step up is paid for by every word on the page, so re measure before touching it. --- */ --pagefx-opacity: 0.1; /* --- the credit mark in the footer line. The layout's 1.05em default is drawn for a compact square mark, and this is a WIDE wordmark at 6.7 to 1, so it is sized by height and the width follows. 1.45em on a 13px line renders about 19 by 126, which is small enough to read as a signature and big enough for the letters to hold. The full lockup sat here at 2.1em for one round and the ember E did not survive the size. --- */ --built-by-h: 1.45em; /* --- the nine problem tiles, borders lit on Seth's call 2026-08-05. Their resting rule steps up from --rule #ffffff1c to #ffffff42, so the grid reads as nine defined boxes instead of nine suggestions. The lit state is the accent at a third strength plus the faintest possible wash, #6f9bd812, which is about 7 percent. That is under the 0.10 pane-of-glass line the card fill note draws, so it lifts the ground far too little to move any contrast figure on the page and the mark still shows through. --- */ /* --- SILVER, Seth's call 2026-08-05, for the wordmark and the line above it. Metal is not a colour, it is a sequence of bands: a bright top, a dark waist where the surface turns away, a hot specular line just below it, then a lift back to bright at the foot. Six stops is the fewest that reads as polished rather than as a plain gradient. Every stop is a neutral off the page's own ivory, so the mark stays in the palette instead of going blue with the field behind it. --- */ --mark-metal: linear-gradient( 177deg, #ffffff 0%, #e8e5df 20%, #8f8d87 46%, #fbfaf7 57%, #b5b2ab 74%, #f7f5f0 100%); /* --- the same metal, drawn for SMALL TYPE. The ramp above is measured across a 95px capital and its dark waist reads as shading there. A 38px line only samples a slice of that waist, so the whole line came out muddy brown instead of silver, which is a measured fact off a render and not an opinion. This version keeps the same sequence and moves every stop up: the darkest is #b9b6ae rather than #8f8d87, and the dark band is half as wide. Same effect, drawn at the size it is used. --- */ --metal-type: linear-gradient( 177deg, #ffffff 0%, #f3f1ec 26%, #b9b6ae 47%, #ffffff 56%, #dbd8d1 76%, #ffffff 100%); --prob-rule: #ffffff42; --prob-rule-lit: #6f9bd8; --prob-bg-lit: #6f9bd812; /* --- type. Brand guidelines p26, Three voices: Fraunces is the WORDMARK ONLY, w500 tracked 0.2em, and Inter carries everything else, display headings at 200, sub-heads at 400. The site wore Fraunces 600 on every heading until 2026-08-08, which put the wordmark's face on copy it never belonged to. The wordmark pin lives on .lockup__name at the foot of this file. --- */ --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --display-weight: 200; --subhead-weight: 400; --display-tracking: -0.022em; /* --- rhythm --- */ --band-space: clamp(3rem, 5.6vw, 5.25rem); --hero-space-top: clamp(4.5rem, 10vw, 7.5rem); /* --- measure --- */ --measure-wide: 78rem; --measure-tight: 64rem; --measure-text: 44rem; /* --- shape --- */ --radius-btn: 8px; --radius-card: 14px; /* --- the hero capture band, added 2026-08-05 when the assessment was cut and the form became the page's only act. THE BAND ITSELF IS INVISIBLE, Seth's call. Ground and top rule both transparent, so what shows is the fields and the button, not a slab holding them. The reason that is safe here and would not have been before the frame went in: the logo is now inside its own framed picture ABOVE the band, so nothing sits behind this type except the page ground and the line field. Worst case behind it is a line stroke lifting the local ground to about #1e1e1f. Measured there: paper 14.5, paper-soft 9.4, accent-on-dark 9.7. All clear AA. The FIELDS keep an opaque fill, because an input the eye cannot find is not a field, and its own rule is lifted to carry the edge the band gave up. The submit button keeps --btn-on-dark-bg, which makes it the only filled block left on the page. --- */ --capture-ground: transparent; --capture-rule: transparent; --field-ground: #17171a; --field-rule: #ffffff3d; /* --- the hero stage. The ground the shader card settles to once the intro has left. Deliberately the page's darkest ink rather than the page ground, so the card still reads as a separate piece after the art is gone and the mark is all that is left on it. --- */ --stage-ground: #060607; /* --- the hero picture frame. CUT on Seth's call 2026-08-05, same day it went in. It did its job, the hero stopped drifting, and then the drawn edge was the wrong way to hold it: the mark carries its own three drop shadows, so it was already sitting in space, and a rectangle around it read as a second object competing with the logo. The frame's SPACING is kept, only the ink is gone, which is why this is transparent rather than a deleted border. Put a value back here to see it again. --- */ --hero-frame-rule: transparent; --shadow-btn: 0 8px 22px #00000045; } /* Fraunces ships a few variable axes. Flatten the whimsical one, keep a little optical warmth at display sizes. */ h1, h2, .pull__quote, .founder__quote, .tier__amount, .fact__n { font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 40; } /* If the ivory only, no accent pass is ever wanted back it was: accent #f2efe8 · accent-bright #ffffff · accent-deep #ffffff accent-on-dark #f2efe8 · btn-on-dark-bg #f2efe8 If the ember accent is ever wanted back it was: accent #e46712 · accent-bright #ef8b44 · accent-deep #b04e0b accent-on-dark #ef8b44 · btn-on-dark-bg #e46712 Measured 5.77:1 on this ground, which passes, and was cut on preference 2026-08-05, not on contrast. */ /* THE EYEBROW RUNS OVER THE MARK, SO IT CANNOT USE THE BUTTON'S BLUE. --accent is the filled button, where the blue is a background and its label is dark. The eyebrow is 13px TYPE sitting straight on the mark, and #6f9bd8 measures 3.79:1 against the mark's lightest pixel at 0.24, a fail. --accent-on-dark is the lifted blue, 5.48:1 there. The button keeps the deeper blue because a filled block does not need the lift. */ .eyebrow { color: var(--accent-on-dark); } /* THE HERO WORDMARK IS A MARK, NOT A BACKGROUND. `contain` on a full bleed media layer stretched it to the whole band, where it read as a wall rather than a logo. It is sized off the viewport now and centred in the band. Smaller means it can carry more opacity and still stay behind the headline, which is the only thing in a hero allowed to be the brightest object. */ .hero__media { display: flex; align-items: center; justify-content: center; } /* THE LETTER MASKS LIVE HERE, NOT IN THE MARKUP. A url() inside a custom property resolves against the STYLESHEET that ends up using it, not against the page, so eight inline `--src` values written as `assets/img/mark/E.png` were fetched as `assets/css/assets/img/mark/E.png` and 404ed, sixteen times over. Declaring them here means the paths are relative to this file, which is where the artwork sits. It is also the correct floor for them: these are client assets and this is the client theme. */ .mark__p--e { --src: url(../img/mark/E.png); } .mark__p--l { --src: url(../img/mark/L.png); } .mark__p--y { --src: url(../img/mark/Y.png); } .mark__p--i1 { --src: url(../img/mark/I1.png); } .mark__p--s1 { --src: url(../img/mark/S1.png); } .mark__p--i2 { --src: url(../img/mark/I2.png); } .mark__p--u { --src: url(../img/mark/U.png); } .mark__p--s2 { --src: url(../img/mark/S2.png); } /* THE FULL LOGO IS A DIFFERENT SHAPE TO THE WORDMARK. Letters only ran 6.7:1, the lockup with the ember E runs 3.6:1, so the same width is nearly twice the height. Left at 1240 the mark alone filled the first screen and pushed the capture form under the fold, which is the one thing a hero form cannot afford. Capped so both land above it. */ .hero--capture .hero__media > img { width: min(88vw, 880px); } .hero__media > img { width: min(94vw, 1240px); height: auto; object-fit: contain; opacity: 1; /* DEPTH, three stacked drop-shadows, Seth's call 2026-08-05. A flat PNG at low opacity reads as a stain. drop-shadow follows the alpha channel rather than the box, so it traces the letterforms: a hairline of light on the TOP edge, a hairline of black on the bottom, then one long soft cast underneath. Light above, mass below, which is the whole of what makes a shape look raised. box-shadow cannot do this, it would draw a rectangle. */ filter: drop-shadow(0 -1px 0 #ffffff59) drop-shadow(0 2px 1px #000000b3) drop-shadow(0 26px 44px #000000d9); /* The mark fades as it falls away, so the light reads as coming from above the page rather than from the screen. */ -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, #000000bf 100%); mask-image: linear-gradient(180deg, #000 0%, #000 72%, #000000bf 100%); } /* THE LINE FIELD SITS HIGHER. Seth asked for it up 2026-08-05. The svg anchors to the top of the viewport with xMidYMin, and this lifts the whole layer another fifth of a screen so the curves cross the upper bands rather than pooling at the fold. */ .markdrop { align-items: flex-start; } .markdrop .paths { transform: translateY(-18vh) scale(1.15); } /* At 390 the wordmark lands directly behind the body paragraph rather than around it, because a wide lockup contained into a narrow frame sits at the vertical middle where the copy also is. Measured on a real 390 render, the letterforms were cutting through the lede. It drops to a whisper there. */ @media (max-width: 52rem) { .hero__media > img { width: min(92vw, 420px); opacity: 1; } } /* THE HERO GROUND GOES SEE THROUGH, Seth's call 2026-08-05. The band shipped on a solid --ink-deep, which sealed the line field out of the first screen entirely. Transparent lets the field run behind the wordmark, and the scrim above is now a whisper rather than a wash, because the only thing it still has to do is keep the headline the brightest object in the frame. */ .hero { background: transparent; } /* The hero copy came out on Seth's call 2026-08-05, so the band's height was being set by padding alone and the wordmark was clipping against the header. The band now holds its own height and the mark sits in the middle of it with air on both sides. */ .hero__inner { min-height: 38vh; } /* THE HEADER ROW CAME BACK IN, Seth's call 2026-08-05, reversing the edge anchored version from earlier the same day. It shares the page measure with every band again, so the wordmark lines up with the left edge of the card grid and the last nav link lines up with its right edge. The tagline stays off. Anchoring a row to the corner only reads as deliberate when something else on the page is also at the corner, and after the hero art was framed and then unframed there is nothing out there for it to agree with. */ .site-header__inner { width: min(100% - 2.5rem, var(--measure-wide)); max-width: none; } /* THE WORDMARK IS THE ONLY FRAUNCES ON THE SITE. Brand guidelines p26, Three voices: Fraunces carries the wordmark alone. --font-display went to Inter for that, and the generated headers set the wordmark in live type, so the lockup pins its own face here. 500 with 0.2em tracking is the brand's wordmark drawing, and the 500 instance is requested in both fonts URLs because 400 plus 600 alone would render this as 400. */ .lockup__name { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: 0.2em; } /* THE MENU HOVER BLUE IS BRIGHTER THAN THE PAGE'S, Seth's call 2026-08-08. The layout's hover uses --accent-on-dark #a8c8f0, which is tuned to sit over the mark backdrop and reads muted inside the solid #0f0f11 panel. This lifts it for the dropdown only, 11.9:1 there, the eyebrows and the rest of the page keep their measured value. */ .nav-drop__panel a:hover, .nav-drop__panel a:focus-visible { color: #b8d8ff; }