/* ============================================================================= everfall.css — EMBERFALL. webcore site theme, 2026-08-29 (second cut). Owner-neutral in the only sense that matters here: not one colour literal, not one owner name, not one owner asset path. Every value is a role token from theme.py or a color-mix of one, so this sheet supplies STRUCTURE and the owner's `theme` block supplies the palette. Scoped in full to [data-site-theme="everfall"]: shipped to nobody who did not type it, linked on nobody's page who did not type it, and inert even if it were. ----------------------------------------------------------------------- WHY THERE IS A SECOND CUT ----------------------------------------------------------------------- The first look under this name was THE LIT MONOLITH — a carved monochrome stone face read by one raking light. The owner rejected it the evening it shipped, and the words are the brief for this one: "the website looks hurrendous ... make it fully unique ... particles should be animated fully. fully animation. website should have sounds matching its theme and animations and transition every page. make it similar designed to https://islapandora.eu/" THE REFERENCE WAS READ, NOT GUESSED AT. It was rendered at 1440 and measured before a line here was written: ground #0A0604, a warm near-black accent #FF6A00, ONE ember, used for every mark that matters type Rajdhani throughout, caps and tracked in every label hero full viewport, centred, the wordmark inside its own bloom buttons a filled accent primary beside a dark outlined secondary numbers a strip of large accent numerals over tiny tracked labels cards dark slabs on a grid, one corner cut off footer one quiet line Everfall's page set already carries a slot for every one of those, so this theme is composition and light — not new markup, and not new copy. ----------------------------------------------------------------------- THE DIRECTION CONTRACT ----------------------------------------------------------------------- THESIS: the page is a NIGHT WITH EMBERS IN IT, and the accent is a light source rather than an ink. The wordmark, the primary button, the live dot, every slab's top lip and the backdrop's own particles are the same ember at different distances. Turn `--accent` and the whole document turns, backdrop included; nothing here has to be re-tuned, because nothing here names a colour. OWN-WORLD: heat. A ground that is black but warm; the reading column laid over it in bone; one hue, spent almost entirely on four things — the name, the action, the numbers and the state of the island. Rajdhani cut wide and tracked for anything that is a heading or a label, Chakra Petch for prose, mono ONLY where a number is a measurement. STORY: a player alt-tabbed out of a dark game at night lands on a black screen with embers rising through it, sees the island's name burning in the middle of it, learns in three words what kind of server this is, reads whether it is up and how full, and opens Live or the Map. FIRST VIEWPORT: one centred column at full viewport height — the crest small and lit above the name, EVERFALL across the middle inside its own bloom, one tracked line under it, the small kind-line under that, and two actions. Nothing else. The island's numbers are the next screen down, which is the reference's own order. THE STRUCTURAL MOVE NOTHING ELSE IN THE REGISTRY MAKES: instrument rules a tab bar, fracture splits the first viewport, passage centres a ladder, signal frames each panel, hatch stacks a column, rift hangs a spine, aerosol strips each region, lair tears its headings, vanguard rules a twin edge and the monolith lit one carved face. Every one of those is a SHAPE or a LIGHT ON a shape. This one makes the page's own marks the light: there is no lamp, there is only what is burning. ----------------------------------------------------------------------- THE PAGE IS FINISHED WITHOUT THE SCRIPT ----------------------------------------------------------------------- NOTHING IN THIS SHEET STARTS AT OPACITY 0 WAITING TO BE RELEASED, and that rule is load-bearing rather than stylistic. The first cut of this theme armed its entrance animations in CSS; on the live origin the reveal never fired for the sections below the fold and the owner was served a page with a hero, a footer and two thousand pixels of nothing between them. So every displaced state here is scoped to `[data-ev-in]`, an attribute only js/everfall.js ever writes, and it writes it only once it is running. A blocked script, a 404, an old engine or a thrown exception all leave the complete page, standing still. ----------------------------------------------------------------------- WHAT IT DELETES, AND WHY EACH ONE HAD TO GO ----------------------------------------------------------------------- 1. THE EYEBROW AND THE HERO KICKER'S RULE. site.css hangs a small tracked label with a 26px accent dash above every heading; terminal.css then writes a shell prompt into its ::before at two specificities. The reference has neither, and the label says the heading again in weaker words. The kicker's TEXT is kept and re-used — it becomes the small line under the tagline, which is where the reference puts it. 2. THE NAV BRACKETS, at all four shapes terminal.css draws them — plain, grouped, current-page, and the language-picker variant. The current page is marked here the way the reference marks it: the label goes accent and an accent rule sits under it. 3. THE SECTION MARK. site.css masks the owner's own logo into the footer at 10% opacity behind the legal line; against an ember ground that is a grey smear rather than a watermark. 4. THE TYPEWRITER ENTRANCE and the brand cursor. A terminal tell, and the wrong genre entirely for this one. 5. DOT LEADERS on figures and key/value rows. A register runs a line from a label to its number; this page sets the number in the accent at three times the label's size and does not need the rule. No copy, control, number or link is lost by any of the five. ============================================================================= */ /* ============================================================================= 1. THE FIRE — tokens ============================================================================= */ :root[data-site-theme="everfall"] { /* THE BLOOM. Three radii of the accent, and every glowing thing on the page is built out of these rather than out of its own shadow list — which is what keeps the name, the button and the live dot reading as the same material at three sizes. */ /* ★ RE-MEASURED ON A PALE ACCENT (2026-08-29). These were tuned against an ORANGE accent, where a wide low-alpha wash reads as heat. On this owner's pale grey the same wash reads as a dirty rounded box behind the wordmark - a hue carries a soft gradient, a near-white does not. So the bloom is TIGHTER and weaker at its outer radius: it hugs the letters instead of filling the space around them. The token names are unchanged, so an owner on a saturated accent still gets a glow that reads as light. */ --ev-glow-near: color-mix(in srgb, var(--accent) 40%, transparent); --ev-glow-mid: color-mix(in srgb, var(--accent) 17%, transparent); --ev-glow-far: color-mix(in srgb, var(--accent) 6%, transparent); /* THE SLAB. A card is the ground lifted, not a panel floated on it, so the face is a mix of the owner's own two blacks. The lip is the one hairline that carries the accent, and it is what makes a slab look lit from above rather than outlined. */ --ev-face: color-mix(in srgb, var(--fg) 4%, var(--bg)); --ev-face-hi: color-mix(in srgb, var(--fg) 7%, var(--bg)); --ev-face-sink: color-mix(in srgb, var(--bg-deep) 60%, var(--bg)); --ev-hair: color-mix(in srgb, var(--fg) 11%, transparent); --ev-hair-hi: color-mix(in srgb, var(--accent) 34%, transparent); --ev-lip: color-mix(in srgb, var(--accent) 52%, transparent); /* THE CUT. The reference clips one corner off every card; this is the size of that cut and it is a single number so the whole grid agrees. */ --ev-cut: 16px; /* DEPTH. Offset and blur, never a zero-offset halo — except on the things that are actually emitting light, which get one on purpose. */ --ev-drop: 0 16px 38px color-mix(in srgb, var(--bg-deep) 66%, transparent); --ev-drop-2: 0 30px 66px color-mix(in srgb, var(--bg-deep) 74%, transparent); /* MEASURE AND RHYTHM. One spacing scale, and more room above a heading than below it. */ --ev-band: clamp(72px, 8.5vw, 132px); --ev-gap: clamp(16px, 2vw, 26px); --ev-track: 0.10em; --ev-track-wide: 0.30em; /* GEOMETRY. Small radii, because the reference's cards are nearly square and the CUT is the shape that carries the character. --r-round is left alone: an avatar is still a circle. */ --r: 3px; --r-s: 3px; --r-xs: 2px; --r-lg: 4px; --r-pill: 999px; /* THE ENTRANCE. One distance and one duration, read by every reveal, so the whole page enters at one speed. */ --ev-rise: 22px; --ev-in: 620ms; } /* ============================================================================= 2. THE GROUND The backdrop is theme.atmosphere `ember` (css/ember.css + js/ember.js) and this sheet does not draw it. What it does here is get out of its way: the house look lays a grain and a scan grille over `main`, and a texture over a field of moving embers is the thing that makes both look like a rendering fault. ============================================================================= */ [data-site-theme="everfall"] body::after { display: none; } /* ★ AND terminal.css's OWN LIFT OVER `main`, which the first cut missed. `main::before` is z-index:-1 and `main` is z-index:auto, so BOTH of them paint above the fixed `.night` at z-index:-2 - the lift lands on top of the particle field, not under it. Its transmission cost is only 3-4%, but it is the one layer above the canvas that is NOT near-black: it is `--edge-lit` at 4%, so it raises the black floor's luma by about 40% and takes the pop out of every small bright mark. signal.css, fracture.css and passage.css all stand it down for the same reason. */ [data-site-theme="everfall"] main::before { display: none; } [data-site-theme="everfall"] main { position: relative; } /* ============================================================================= 3. THE TYPE — one voice for headings, one for prose Rajdhani is the reference's own face and it is already in the vendored pool at 600 and 700. It has NO 400, so nothing here may ask for one: an unlisted weight is a synthesized weight, which on a squared face reads as a smear. Every display rule below states 600 or 700 explicitly. ============================================================================= */ [data-site-theme="everfall"] h1, [data-site-theme="everfall"] h2, [data-site-theme="everfall"] .page-h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--ev-track); text-transform: uppercase; line-height: 1.04; color: var(--fg); text-shadow: none; } [data-site-theme="everfall"] h3, [data-site-theme="everfall"] .card h3, [data-site-theme="everfall"] .feat h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.045em; text-transform: none; color: var(--accent-hi); } [data-site-theme="everfall"] p, [data-site-theme="everfall"] li, [data-site-theme="everfall"] .card p, [data-site-theme="everfall"] .feat p { font-family: var(--font-ui); line-height: 1.66; } /* MONO IS FOR MEASUREMENTS ONLY. The house look sets figures in mono because a register does; here a figure is the loudest thing on its screen and it is set in the display face, in the accent. Mono survives where a value really is a machine reading — coordinates, ids, hashes. */ [data-site-theme="everfall"] .num, [data-site-theme="everfall"] [data-st] { font-variant-numeric: tabular-nums; } /* ============================================================================= 4. WHAT THE HOUSE LOOK LEAVES BEHIND ============================================================================= */ /* 1. THE EYEBROW and its accent dash. The hero kicker is KEPT — section 6 re-uses it as the small line under the tagline — but its dash goes with the rest of them. */ [data-site-theme="everfall"] .eyebrow { display: none; } [data-site-theme="everfall"] .eyebrow::before, [data-site-theme="everfall"] .hero .kicker::before { content: none; display: none; } /* 2. THE NAV BRACKETS, at every shape terminal.css draws them. */ [data-site-theme="everfall"] .nav .nav-links a::before, [data-site-theme="everfall"] .nav .nav-links.grouped a::before, [data-site-theme="everfall"] .nav-links a::before, [data-site-theme="everfall"] .nav-links.grouped a::before, [data-site-theme="everfall"] .nav .nav-links a[aria-current="page"]::before, [data-site-theme="everfall"] .nav .nav-links.grouped a[aria-current="page"]::before, [data-site-theme="everfall"] .nav .nav-in:has(.nav-lang:not([hidden]):not(:empty)) .nav-links.grouped a[aria-current="page"]::before, [data-site-theme="everfall"] .nav .nav-links a::after, [data-site-theme="everfall"] .nav .nav-links.grouped a::after, [data-site-theme="everfall"] .nav-links a::after, [data-site-theme="everfall"] .nav-links.grouped a::after, [data-site-theme="everfall"] .nav-links a[aria-current="page"]::after, [data-site-theme="everfall"] .nav-links.grouped a[aria-current="page"]::after { content: none; display: none; background: none; border: 0; } /* 3. THE SECTION MARK, THE TICK LADDER and the footer watermark. ★ THE ::after HALF WAS MISSED ON THE FIRST PASS and the second render showed it: terminal.css draws a short dotted ladder under a page head as its ::after, LEFT-ALIGNED to the column. Under a CENTRED head - which is what this theme makes every head - it lands as a dotted stub off to one side of a centred title, which reads as a rendering fault rather than as a register mark. Both halves go, on both heads. */ [data-site-theme="everfall"] .sec-head::before, [data-site-theme="everfall"] .sec-head::after, [data-site-theme="everfall"] .page-head::before, [data-site-theme="everfall"] .page-head::after, [data-site-theme="everfall"] :is(.page-head, .sec-head:has(> .page-h1))::before, [data-site-theme="everfall"] :is(.page-head, .sec-head:has(> .page-h1))::after, [data-site-theme="everfall"] .foot::before { content: none; display: none; background: none; border: 0; } /* ★ THE RULE OVER THE BUTTONS. cinema.css gives `.hero-cta` a 1px top border, which under a LEFT-aligned hero is the underline of the copy above it. Under a centred one it is a short bar floating between the kicker and the buttons with nothing on either side, and it was the first thing that looked wrong on the first render of this theme. Measured, not guessed: the computed style on `.hero-cta` was `border-top: 1px solid` at 34% of the ink. */ [data-site-theme="everfall"] .hero-cta { border-top: 0; padding-top: 0; } /* 4. THE TYPEWRITER ENTRANCE and the brand cursor. */ [data-site-theme="everfall"] .brand-cursor { display: none; } [data-site-theme="everfall"] .hero h1::after { content: none; } [data-site-theme="everfall"] .hero h1, [data-site-theme="everfall"] .page-h1 { animation: none; } /* 5b. THE RULE UNDER THE LEDE. cinema.css closes the hero's lede with a 1px gradient rule as its ::after. Under a centred hero it lands between the tagline and the buttons as a short bar with nothing on either side of it - it read as a rendering fault on the first render of this theme. The reference has no such rule and neither does anything else here. */ [data-site-theme="everfall"] .hero-copy > p::after, [data-site-theme="everfall"] .hero .lede::after { content: none; display: none; } /* 5. DOT LEADERS. */ [data-site-theme="everfall"] .fig span::after, [data-site-theme="everfall"] .kv span::after, [data-site-theme="everfall"] .fig::after, [data-site-theme="everfall"] .kv::after { content: none; } /* ============================================================================= 5. THE NAV — brand left, links CENTRED, one action right The reference centres its links and that is not a detail: a left-packed nav next to a centred hero is the arrangement that reads as a template. The house nav is a flex row with `.brand { margin-right: auto }` pushing everything right, so this re-lays it as a three-column grid instead. THE BURGER IS `display: none` ABOVE 820px in site.css, and a `display:none` child occupies no grid cell, so the three columns are brand / links / util on desktop and brand / burger / util on a phone, where `.nav-links` has left the flow to become the dropdown. Both are correct with one rule. ============================================================================= */ /* ★ THE HOUSE NAV DRAWS ITS EDGE TWICE, IN PSEUDO-ELEMENTS, AND BOTH HAD TO BE MEASURED TO BE FOUND. `.nav::before` is a 1px accent gradient with its own bloom and `.nav::after` is a 2px SOLID accent bar, both pinned to `bottom: -1px` across the full width. On the house look they are a lit console edge under a dark bar. On an ember ground, with an accent that is now a fire rather than a grey, they render as a drawn orange rule across the top of every page - the single loudest mark on the site, above the wordmark it is supposed to sit under. Both go. The edge this theme wants is one hairline plus a downward bloom, which is what the rule below already ships. */ [data-site-theme="everfall"] .nav::before, [data-site-theme="everfall"] .nav::after { content: none; display: none; background: none; box-shadow: none; } /* The same mark at the other end of the page: the footer's own lit stub. */ [data-site-theme="everfall"] .foot::after { content: none; display: none; background: none; } [data-site-theme="everfall"] .nav { background-image: linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 82%, transparent), color-mix(in srgb, var(--bg-deep) 62%, transparent)); border-bottom: 1px solid var(--ev-hair); /* ONE HAIRLINE, NOT TWO. The first cut put a 34%-accent line under the border as well, and at full width that reads as a drawn orange rule across the top of the page rather than as an edge catching light. The glow is kept and the line is not: a soft downward bloom says the same thing without drawing anything. */ box-shadow: 0 10px 30px -22px var(--ev-glow-mid); } [data-site-theme="everfall"] .nav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; min-height: 64px; } [data-site-theme="everfall"] .brand { margin-right: 0; justify-self: start; } [data-site-theme="everfall"] .brand img { width: 34px; height: 34px; filter: drop-shadow(0 0 10px var(--ev-glow-mid)); } [data-site-theme="everfall"] .brand-txt b { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } [data-site-theme="everfall"] .brand-txt > span { font-family: var(--font-ui); font-size: 10.5px; letter-spacing: var(--ev-track-wide); text-transform: uppercase; color: var(--fg-mute); } [data-site-theme="everfall"] .nav-links { justify-self: center; gap: 6px; } [data-site-theme="everfall"] .nav-links a { position: relative; padding: 10px 14px; border-radius: 0; background: none; font-family: var(--font-ui); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); transition: color .18s ease; } /* THE UNDERLINE GROWS FROM THE CENTRE. It is a scaleX on a pseudo-element rather than a width change, so it is a compositor animation and it costs the same on a phone as on a desktop. */ [data-site-theme="everfall"] .nav-links a > span, [data-site-theme="everfall"] .nav-links a { --ev-uw: 0; } [data-site-theme="everfall"] .nav-links a::after { content: ""; display: block; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--accent); box-shadow: 0 0 10px var(--ev-glow-near); transform: scaleX(var(--ev-uw)); transform-origin: 50% 50%; transition: transform .22s ease; } [data-site-theme="everfall"] .nav-links a:hover, [data-site-theme="everfall"] .nav-links a:focus-visible { color: var(--fg); background: none; } [data-site-theme="everfall"] .nav-links a:hover::after, [data-site-theme="everfall"] .nav-links a:focus-visible::after { --ev-uw: 1; } [data-site-theme="everfall"] .nav-links a[aria-current="page"], [data-site-theme="everfall"] .nav-links.grouped a[aria-current="page"] { color: var(--accent); background: none; } [data-site-theme="everfall"] .nav-links a[aria-current="page"]::after, [data-site-theme="everfall"] .nav-links.grouped a[aria-current="page"]::after { content: ""; display: block; --ev-uw: 1; } [data-site-theme="everfall"] .nav-util { justify-self: end; display: flex; align-items: center; gap: 8px; } /* THE ONE FILLED THING IN THE NAV. The reference puts a single filled pill on the right and nothing else; sign-in is this site's equivalent, so it is the pill and the speaker toggle beside it stays quiet. */ [data-site-theme="everfall"] .nav-auth-btn { border-radius: var(--r-pill); border: 1px solid transparent; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--on-primary); font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; letter-spacing: 0.10em; text-transform: uppercase; padding: 9px 16px; box-shadow: 0 6px 20px -8px var(--ev-glow-near); transition: filter .18s ease, transform .18s ease, box-shadow .18s ease; } [data-site-theme="everfall"] .nav-auth-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 26px -8px var(--ev-glow-near); border-color: transparent; } /* ============================================================================= 6. THE FIRST VIEWPORT — the monument, and it is the reference's own ONE CENTRED COLUMN AT FULL VIEWPORT HEIGHT. `.hero-grid` is a two-column grid in the house look with the art on the right; this owner runs `hero_banner: false` so the art column is absent, and the remaining column is re-laid as a centred flex stack. THE DOM ORDER IS kicker / h1 / lede / cta AND THE READING ORDER IS h1 / lede / kicker / cta. That is done with `order` rather than by moving the markup, because the markup is shared with ten other owners: the h1 is still the first heading in the document, the kicker is still its label, and only the painting order changes. ============================================================================= */ [data-site-theme="everfall"] .hero.wrap { min-height: 100svh; display: grid; align-items: center; padding-block: calc(64px + var(--ev-gap)) var(--ev-band); } [data-site-theme="everfall"] .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; justify-items: center; } [data-site-theme="everfall"] .hero-copy, [data-site-theme="everfall"] .hero-grid > :not(.hero-art) { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 62ch; } /* THE CREST, LIT. site.css's hero art is a REGION this owner dropped, so the mark is drawn here as a background on the copy column's own ::before — which means it costs one paint and no extra request, the file being the same `--art-mark` the nav already loaded. */ [data-site-theme="everfall"] .hero-copy::before { content: ""; order: 0; width: clamp(58px, 7vw, 84px); aspect-ratio: 1; margin-bottom: clamp(14px, 2vw, 24px); background: var(--art-mark) center / contain no-repeat; filter: drop-shadow(0 0 22px var(--ev-glow-mid)); opacity: .92; } /* THE NAME, INSIDE ITS OWN BLOOM. The reference sets its wordmark in solid accent and puts a wide soft glow BEHIND it, and the two halves are what make it read as burning rather than as coloured text. Both are here: the fill is a tight vertical gradient from the bright accent into the base one (a flame is brighter at the top), and the bloom is three text-shadows at three radii built out of the same tokens the rest of the page glows with. NOT a gradient-clipped headline with `-webkit-background-clip`: that hands the glyphs to a paint the text-shadow cannot see, so the bloom would have to become a second absolutely-positioned copy of the word. Solid fill plus shadows is one element and one paint. */ [data-site-theme="everfall"] .hero h1 { order: 1; font-size: clamp(46px, 10.5vw, 132px); font-weight: 700; letter-spacing: 0.012em; line-height: 0.98; color: var(--accent); text-shadow: 0 0 14px var(--ev-glow-near), 0 0 40px var(--ev-glow-mid), 0 0 92px var(--ev-glow-far); text-wrap: balance; } /* THE TAGLINE. Tracked, uppercase, in the reading ink rather than the accent — the reference does exactly this, and it is what stops the hero being two oranges arguing. */ [data-site-theme="everfall"] .hero-copy > p, [data-site-theme="everfall"] .hero .lede { order: 2; margin-top: clamp(14px, 2vw, 22px); max-width: none; font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 2.1vw, 25px); letter-spacing: var(--ev-track-wide); text-transform: uppercase; color: var(--fg-dim); text-shadow: none; } /* THE KIND-LINE. The kicker's own text, moved under the tagline and set at the smallest size on the page — the slot the reference fills with "THE ISLE EVRIMA", which is the same sentence this owner's kicker already holds. */ [data-site-theme="everfall"] .hero .kicker { order: 3; display: block; margin: 10px 0 0; font-family: var(--font-ui); font-weight: 600; font-size: 11.5px; letter-spacing: var(--ev-track-wide); text-transform: uppercase; color: var(--fg-mute); } [data-site-theme="everfall"] .hero-cta { order: 4; justify-content: center; gap: 14px; margin-top: clamp(28px, 4vw, 46px); } [data-site-theme="everfall"] .hero-cta .btn { min-width: 176px; padding: 14px 26px; } /* ★ THERE IS NO SCROLL CUE, AND THERE WAS ONE FOR AN HOUR. The first screen is deliberately empty below the buttons — the reference's own composition — and an empty bottom half is the one thing a visitor can read as "the page failed to load", so a small tick was drawn at the foot of the viewport. The first render showed why it cannot be there: this site pins a LIVE BAR to the bottom of the window (#wc-livebar, fixed, 42px), so the cue landed on top of it as a stray mark against a filled strip. The live bar answers the same question better than a tick could — it is a moving readout that says the page is alive — so the tick goes and nothing replaces it. */ [data-site-theme="everfall"] .hero { position: relative; } /* ★ AND THEN IT CAME BACK, WITH THE BAR MEASURED (2026-08-29, on the owner pointing at his own Jurassic Haven site as the example). That site puts a SCROLL cue at the foot of its first screen and it is right to: a full-viewport hero whose bottom half is deliberately empty needs one mark saying the page continues. The reason it was pulled here was never the cue, it was the collision - so the collision is what gets fixed. `body` carries `.has-livebar` when the strip is on the page, and the cue is lifted clear of it by the bar's own height plus a gap. On a page with no bar the class is absent and the cue sits at the foot of the screen, which is where the example puts it. */ [data-site-theme="everfall"] .hero.wrap::after { content: ""; position: absolute; left: 50%; bottom: clamp(20px, 3.4vh, 38px); width: 1px; height: clamp(24px, 4.6vh, 44px); translate: -50% 0; background: linear-gradient(180deg, transparent, var(--ev-lip)); opacity: .75; } [data-site-theme="everfall"] body.has-livebar .hero.wrap::after { bottom: calc(var(--livebar-h, 42px) + clamp(20px, 3.4vh, 38px)); } /* --------------------------------------------------------------------------- THE LIVE BAR. A fixed strip the house look pins to the bottom of every page, in the console register: a hairline, a mono readout and a bracketed state. It is the only chrome on the site the reference has no equivalent for, and it is kept because it is the one thing on a static page that is genuinely live. What changes is that it stops being a terminal and becomes the floor of this room: the ground's own black, one accent hairline along the top, and the accent spent only on the numbers. --------------------------------------------------------------------------- */ [data-site-theme="everfall"] #wc-livebar { background-image: none; background-color: color-mix(in srgb, var(--bg-deep) 92%, transparent); border-top: 1px solid var(--ev-hair-hi); box-shadow: 0 -14px 34px -20px var(--ev-glow-far); } [data-site-theme="everfall"] #wc-livebar .lb-k { font-family: var(--font-ui); font-weight: 600; letter-spacing: var(--ev-track); text-transform: uppercase; color: var(--fg-mute); } [data-site-theme="everfall"] #wc-livebar .lb-v { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; color: var(--accent); } /* ============================================================================= 7. SECTIONS — a centred head, the reference's rhythm ============================================================================= */ [data-site-theme="everfall"] .section.wrap { padding-block: var(--ev-band) 0; } [data-site-theme="everfall"] main > .section:last-of-type { padding-bottom: var(--ev-band); } [data-site-theme="everfall"] .sec-head { text-align: center; margin-bottom: clamp(26px, 3.4vw, 44px); } [data-site-theme="everfall"] .sec-head h2 { font-size: clamp(24px, 3.6vw, 38px); letter-spacing: 0.05em; color: var(--accent); } [data-site-theme="everfall"] .sec-head p { margin: 12px auto 0; max-width: 56ch; color: var(--fg-mute); font-size: 14.5px; } /* ============================================================================= 8. THE STAT STRIP — the island's numbers, the way the reference sets them `.status` is a CARD in the house look. The reference sets the same kind of content as a bare strip: four large accent numerals over tiny tracked labels, with nothing drawn around them. So the card chrome comes off and the figures grow. THE STATE ROW STAYS A ROW, and it keeps its dot. It is the one live thing on the page; making it look like decoration would be the wrong kind of quiet. ============================================================================= */ [data-site-theme="everfall"] .status { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; } [data-site-theme="everfall"] .status::before { content: none; } [data-site-theme="everfall"] .status-top { justify-content: center; gap: 12px; padding: 0 0 clamp(22px, 3vw, 36px); margin: 0; border-bottom: 0; } [data-site-theme="everfall"] .status-label { font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: var(--ev-track); text-transform: uppercase; color: var(--fg-dim); } [data-site-theme="everfall"] .status-src { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-mute); } /* THE LIVE DOT IS THE SAME EMBER as the wordmark, one size down. It is the only place on the page where `--ok` is allowed to glow, because online is the one state that is genuinely good news. */ [data-site-theme="everfall"] .status-top .dot.ok { box-shadow: 0 0 12px var(--ok-glow); } [data-site-theme="everfall"] .status-figs { gap: clamp(18px, 3vw, 40px); align-items: start; text-align: center; } /* The hairline between figures, and it is a border rather than a separator element so a two-figure or one-figure strip cannot leave a rule hanging in space. */ [data-site-theme="everfall"] .status-figs > .fig + .fig { border-left: 1px solid var(--ev-hair); } [data-site-theme="everfall"] .fig b { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4.6vw, 52px); line-height: 1; letter-spacing: 0.01em; color: var(--accent); text-shadow: 0 0 26px var(--ev-glow-far); overflow-wrap: anywhere; } /* ★ A WORD IS NOT A NUMBER. The reference's strip is four numerals, and a numeral at 52px is a headline; this owner's third figure is the MAP NAME, which at the same size is a second title competing with the section head above it. Scoped by the readout's own data attribute rather than by position, so a strip that gains or loses a figure cannot shrink the wrong one. */ [data-site-theme="everfall"] .fig b[data-st="map"] { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.24; } [data-site-theme="everfall"] .fig span, [data-site-theme="everfall"] .kv span { margin-top: 10px; font-family: var(--font-ui); font-weight: 600; font-size: 10.5px; letter-spacing: var(--ev-track-wide); text-transform: uppercase; color: var(--fg-mute); } /* The note under the strip. site.css gives it a plate and a top border, which on a stat strip with no card around it is a box floating under three numbers that have none. Flattened to what it is: one line of text. */ [data-site-theme="everfall"] .status-note { text-align: center; margin-top: clamp(18px, 2.4vw, 28px); padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font-size: 13px; color: var(--fg-mute); } /* ============================================================================= 9. SLABS — the cut corner, and every surface on the site wears it The reference's cards have their top-right corner cut off. One clip-path, one custom property for its size, applied to every surface the page set can put on a grid — so the shape is a property of THIS SITE rather than of the home page's feature tiles. ★ clip-path CLIPS THE BORDER TOO, which is why the lip below is drawn as a ::before inside the box rather than as `border-top`: a 1px border under a clip is a border with a bite out of it. ============================================================================= */ [data-site-theme="everfall"] .card, [data-site-theme="everfall"] .feat, [data-site-theme="everfall"] .panel, [data-site-theme="everfall"] .gate, [data-site-theme="everfall"] .slot, [data-site-theme="everfall"] .item, [data-site-theme="everfall"] .lvc-card, [data-site-theme="everfall"] .lvc-well, [data-site-theme="everfall"] .hub-gauge, [data-site-theme="everfall"] .hub-plate { position: relative; background-color: var(--ev-face); background-image: linear-gradient(180deg, var(--ev-face-hi), var(--ev-face-sink)); border: 1px solid var(--ev-hair); border-radius: 0; box-shadow: var(--ev-drop); clip-path: polygon( 0 0, calc(100% - var(--ev-cut)) 0, 100% var(--ev-cut), 100% 100%, 0 100%); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } /* THE LIP. One accent hairline along the top of every slab, stopping where the cut starts — the mark that makes a slab look lit from above. */ [data-site-theme="everfall"] .card::before, [data-site-theme="everfall"] .feat::before, [data-site-theme="everfall"] .panel::before, [data-site-theme="everfall"] .lvc-card::before, [data-site-theme="everfall"] .hub-plate::before { content: ""; position: absolute; left: 0; right: var(--ev-cut); top: 0; height: 1px; background: linear-gradient(90deg, var(--ev-lip), color-mix(in srgb, var(--accent) 12%, transparent)); opacity: .85; } [data-site-theme="everfall"] .card:hover, [data-site-theme="everfall"] .feat:hover, [data-site-theme="everfall"] .item:hover { transform: translateY(-3px); background-color: var(--ev-face-hi); box-shadow: var(--ev-drop-2); border-color: var(--ev-hair-hi); } [data-site-theme="everfall"] .card { padding: clamp(20px, 2.4vw, 28px); } [data-site-theme="everfall"] .feat { padding: clamp(18px, 2.2vw, 24px); } /* THE ICON WELL. The reference gives its cards a coloured glyph and no frame; the house look gives them a bordered well. The frame goes and the glyph keeps the accent, which is the reference's reading. */ [data-site-theme="everfall"] .feat-ico { background: none; border: 0; box-shadow: none; width: 30px; height: 30px; color: var(--accent); filter: drop-shadow(0 0 12px var(--ev-glow-far)); } [data-site-theme="everfall"] .feat-ico svg { width: 24px; height: 24px; } [data-site-theme="everfall"] .grid { gap: clamp(14px, 1.8vw, 22px); } /* The reference runs three cards to a row and this owner has four tiles, so at three-up the last one sits alone. Two-up pairs them. */ [data-site-theme="everfall"] .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* THE NUMBERED STEPS. The ordinal keeps its circle — it is a number in a list rather than a badge — but it is set in the accent on the ground rather than in a bordered well, to match the icon well above. */ [data-site-theme="everfall"] .steps li::before { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--ev-hair-hi); color: var(--accent-hi); box-shadow: none; } /* ============================================================================= 10. BUTTONS — one filled ember, one dark slab ============================================================================= */ [data-site-theme="everfall"] .btn { border-radius: var(--r-s); font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: var(--ev-track); text-transform: uppercase; padding: 13px 24px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, filter .18s ease; } [data-site-theme="everfall"] .btn-primary { border: 1px solid transparent; background-image: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--on-primary); box-shadow: 0 10px 30px -12px var(--ev-glow-near); } [data-site-theme="everfall"] .btn-primary:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 16px 38px -12px var(--ev-glow-near); } [data-site-theme="everfall"] .btn-primary:active { transform: translateY(0); filter: brightness(0.98); } [data-site-theme="everfall"] .btn-ghost, [data-site-theme="everfall"] .btn:not(.btn-primary) { background-color: var(--ev-face-hi); background-image: none; border: 1px solid var(--ev-hair); color: var(--fg); } [data-site-theme="everfall"] .btn-ghost:hover, [data-site-theme="everfall"] .btn:not(.btn-primary):hover { border-color: var(--ev-hair-hi); background-color: var(--ev-face); transform: translateY(-2px); } [data-site-theme="everfall"] .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ============================================================================= 11. THE FOOTER — one quiet line The reference's footer is a single credit sentence on the floor. This one has to carry a brand row, three links and a legal block, so it keeps them and takes everything else off: no watermark, no lifted ground, one hairline and the accent spent only on the domain. ============================================================================= */ [data-site-theme="everfall"] .foot { margin-top: 0; background-image: none; background-color: color-mix(in srgb, var(--bg-deep) 78%, transparent); border-top: 1px solid var(--ev-hair); box-shadow: none; padding-block: clamp(26px, 3.4vw, 40px); } [data-site-theme="everfall"] .foot-brand b { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); } [data-site-theme="everfall"] .foot-brand span span { color: var(--accent); } [data-site-theme="everfall"] .foot-links a { font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: var(--ev-track); text-transform: uppercase; color: var(--fg-mute); } [data-site-theme="everfall"] .foot-links a:hover { color: var(--accent); } /* ============================================================================= 12. THE ENTRANCE, AND WHY EVERY RULE IN HERE IS BEHIND AN ATTRIBUTE THE FAILURE THIS SHAPE EXISTS TO PREVENT IS ON THE RECORD. The first cut of this theme put its reveal in CSS: the resting state was `opacity: 0` and an animation brought it back. On the live origin that animation did not run for the sections below the first screen, and the page the owner opened had a hero, a footer, and two thousand pixels of nothing in between — with every byte of the content present in the HTML the whole time. So the displaced state is written ONLY under `[data-ev-in]`, an attribute js/everfall.js sets on after it has started, and the reveal is armed per element by a class the same script adds and REMOVES. If the script never runs there is no selector match anywhere in this section, and the page is simply the finished page. ============================================================================= */ [data-site-theme="everfall"][data-ev-in] .ev-rise { opacity: 0; transform: translate3d(0, var(--ev-rise), 0); } [data-site-theme="everfall"][data-ev-in] .ev-rise.ev-shown { opacity: 1; transform: none; transition: opacity var(--ev-in) cubic-bezier(.16, .84, .34, 1), transform var(--ev-in) cubic-bezier(.16, .84, .34, 1); } /* THE HERO ENTERS ON LOAD rather than on an observer, because it is already on screen when the page arrives — and it enters in the reading order the `order` property set, so the name lands first and the buttons last. */ [data-site-theme="everfall"][data-ev-in="on"] .hero-copy > * { animation: ev-lift var(--ev-in) cubic-bezier(.16, .84, .34, 1) both; } [data-site-theme="everfall"][data-ev-in="on"] .hero h1 { animation-delay: 40ms; } [data-site-theme="everfall"][data-ev-in="on"] .hero-copy > p { animation-delay: 190ms; } [data-site-theme="everfall"][data-ev-in="on"] .hero .kicker { animation-delay: 280ms; } [data-site-theme="everfall"][data-ev-in="on"] .hero-cta { animation-delay: 360ms; } @keyframes ev-lift { from { opacity: 0; transform: translate3d(0, var(--ev-rise), 0); } to { opacity: 1; transform: none; } } /* THE NAME BREATHES. One long, very shallow pulse on the bloom only — the glyphs themselves never move, because a headline that moves is a headline that is hard to read. */ [data-site-theme="everfall"][data-ev-in="on"] .hero h1 { animation: ev-lift var(--ev-in) cubic-bezier(.16, .84, .34, 1) both, ev-breathe 7.5s ease-in-out 1.2s infinite; } @keyframes ev-breathe { 0%, 100% { text-shadow: 0 0 14px var(--ev-glow-near), 0 0 40px var(--ev-glow-mid), 0 0 92px var(--ev-glow-far); } 50% { text-shadow: 0 0 19px var(--ev-glow-near), 0 0 55px var(--ev-glow-mid), 0 0 120px var(--ev-glow-far); } } /* ============================================================================= 13. THE CURTAIN — the transition on every page js/everfall.js intercepts a same-origin click, runs this, and only then follows the link. The element is created by the script, so a page whose script never ran has no curtain and a plain that navigates. IT IS A WIPE OF THE GROUND, not a fade to black: the ember ground stays and a sheet of it closes over the page, which is the one transition that cannot flash a white frame on a slow paint. ============================================================================= */ [data-site-theme="everfall"] .ev-curtain { position: fixed; inset: 0; z-index: 999; pointer-events: none; background: radial-gradient(58% 42% at 50% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--bg-deep) 96%, transparent), color-mix(in srgb, var(--bg) 92%, transparent)); transform: translate3d(0, 100%, 0); transition: transform .34s cubic-bezier(.5, 0, .2, 1); } [data-site-theme="everfall"] .ev-curtain[data-on] { transform: none; } /* ============================================================================= 14. PHONE ============================================================================= */ @media (max-width: 820px) { /* THREE COLUMNS, NOT TWO, AND THE THIRD IS THE BURGER. `.nav-links` leaves the flow at this width (site.css makes it the absolute dropdown), so the row holds brand / burger / util - three items. Two columns wrapped them onto a second line and doubled the bar's height on every phone, which the first mobile render showed. Three columns, with `order` putting the burger last: it is the control that opens the menu and it belongs at the edge the thumb reaches. */ [data-site-theme="everfall"] .nav-in { grid-template-columns: 1fr auto auto; position: relative; } [data-site-theme="everfall"] .nav-util { justify-self: end; order: 2; } [data-site-theme="everfall"] .burger { order: 3; } [data-site-theme="everfall"] .nav-links { justify-self: stretch; gap: 0; } [data-site-theme="everfall"] .nav-links a { text-align: center; padding: 13px 10px; font-size: 13.5px; } [data-site-theme="everfall"] .nav-links a::after { left: 34%; right: 34%; } [data-site-theme="everfall"] .hero.wrap { min-height: 92svh; } [data-site-theme="everfall"] .hero h1 { letter-spacing: 0.006em; } [data-site-theme="everfall"] .status-figs > .fig + .fig { border-left: 0; border-top: 1px solid var(--ev-hair); padding-top: clamp(14px, 3vw, 20px); } [data-site-theme="everfall"] .grid-3 { grid-template-columns: minmax(0, 1fr); } [data-site-theme="everfall"] .hero-cta .btn { min-width: 0; } } /* ============================================================================= 15. REDUCED MOTION Everything is still drawn and everything is still visible; only the clocks stop. The reveal's resting state is the SHOWN state, so a reduced-motion reader who scrolls sees the page arrive complete rather than not at all — which is the one way an entrance can fail that a reader calls a bug. ============================================================================= */ @media (prefers-reduced-motion: reduce) { [data-site-theme="everfall"][data-ev-in] .ev-rise, [data-site-theme="everfall"][data-ev-in] .ev-rise.ev-shown { opacity: 1; transform: none; transition: none; } [data-site-theme="everfall"][data-ev-in="on"] .hero-copy > *, [data-site-theme="everfall"][data-ev-in="on"] .hero h1 { animation: none; } [data-site-theme="everfall"] .ev-curtain { transition: none; } [data-site-theme="everfall"] .nav-links a::after { transition: none; } [data-site-theme="everfall"] .btn, [data-site-theme="everfall"] .card, [data-site-theme="everfall"] .feat, [data-site-theme="everfall"] .item { transition: none; } } /* ============================================================================= 16. FORCED COLOURS A reader in forced colours has asked the OS to pick every colour. Glow is texture with no information in it, and a clip-path that cuts a corner off a `1px solid CanvasText` border is a broken-looking box rather than a styled one — so both go, and the page falls back to the house look's own forced-colours rendering. ============================================================================= */ @media (forced-colors: active) { [data-site-theme="everfall"] .card, [data-site-theme="everfall"] .feat, [data-site-theme="everfall"] .panel, [data-site-theme="everfall"] .gate, [data-site-theme="everfall"] .slot, [data-site-theme="everfall"] .item, [data-site-theme="everfall"] .lvc-card, [data-site-theme="everfall"] .lvc-well, [data-site-theme="everfall"] .hub-gauge, [data-site-theme="everfall"] .hub-plate { clip-path: none; background-image: none; box-shadow: none; } [data-site-theme="everfall"] .hero h1, [data-site-theme="everfall"] .fig b { text-shadow: none; } [data-site-theme="everfall"] .brand img, [data-site-theme="everfall"] .hero-copy::before, [data-site-theme="everfall"] .feat-ico { filter: none; } [data-site-theme="everfall"] .ev-curtain { display: none; } [data-site-theme="everfall"] .nav-links a[aria-current="page"]::after { background: Highlight; forced-color-adjust: none; } } @media print { [data-site-theme="everfall"] .ev-curtain { display: none; } [data-site-theme="everfall"] .hero.wrap { min-height: 0; } [data-site-theme="everfall"] .hero.wrap::after { display: none; } }