/* ============================================================================ OMEGA DAY AND NIGHT · the skin half ---------------------------------------------------------------------------- Shanae, assets/omega-daynight.js decides the hour and writes data-theme on . This file is what makes that visible. Before it, day and night were the same page: the luxe redesign hid the two paintings, pinned the veil and forced the ground to ivory, so there was nothing left for the pill to change. Two skins live here: NIGHT, for your ordinary pages (the ones in the city, html.ocity) Your marble room with the lights down: the scenery dimmed to candlelight, a deep espresso ground, warm gold that is bright enough to read on a dark page, and the bar in its evening dress. Same layout, same type, same everything. Only the light in the room changes. DAY, for Omega World (the home page) That page is a night city by design, so day is the one that has to be written: a morning sky behind your painting, the rail in ivory and the gold deepened so it reads on a light ground. How it wins: every rule carries :not(#dn-x). That matches every page, and counts as an id, so these rules outrank the ivory luxe layers in omega-city.css and each page's own style block without anybody having to edit them. It deliberately stands aside on a page wearing one of your 20 generator palettes (html[data-pal]) - that palette owns the colour of its room and this file never argues with it. Nothing here changes a layout, a size or a position. It is colour and light. ========================================================================= */ /* ========================================================================== 1. NIGHT · your ordinary pages, lights down ========================================================================== */ html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]){ color-scheme:dark; /* --- the world's own names (omega-city.css) --- */ --ow-ink:#17130F; --ow-plum:#241D16; --ow-plum2:#1C1611; --ow-panel:#231C15; --ow-line:#4E3D24; --ow-gold:#E3C77E; --ow-gold2:#F6E7BC; --ow-gold-deep:#C9A455; --ow-violet:#E3C77E; --ow-text:#F7F0E3; --ow-muted:#C8B79A; /* --- the names your ordinary pages style themselves with --- */ --page:#17130F; --surface:#231C15; --surface-2:#1C1611; --face:#2A2219; --card:#231C15; --panel:#231C15; --panel2:#1C1611; --white:#231C15; --ivory:#231C15; --ivory-2:#1C1611; --ink:#F7F0E3; --ink-soft:#C8B79A; --text:#F7F0E3; --muted:#C8B79A; --soft:#C8B79A; --mut:#C8B79A; --heading:#FBF3E2; --edge:#4E3D24; --line:#4E3D24; --chip-bg:rgba(246,231,188,.09); --chip-ink:#F3E7CD; --lavender:#2A2219; --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.46); --shadow-lift:0 3px 8px rgba(0,0,0,.55),0 22px 50px rgba(0,0,0,.52); --lx-shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px rgba(0,0,0,.46); --lx-card:linear-gradient(165deg,#2C2319 0%,#231C15 55%,#1A1410 100%); --lx-muted:#C8B79A; --lx-line:#4E3D24; --lx-ivory:#231C15; --lx-marble:#231C15; --lx-gold:#E3C77E; --lx-gold2:#F6E7BC; } /* The luxe layer pins these with !important, and on a dark page its dark gold reads as a smudge. This is the one place that needs !important back. */ html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]){ --gold:#E3C77E !important; --gold-bright:#F6E7BC !important; --gold2:#F6E7BC !important; --violet:#E3C77E !important; --plum:#E3C77E !important; --plum2:#E3C77E !important; } /* the ground */ html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) body{ background:#17130F !important; color:#F7F0E3; } /* the scenery, dimmed to candlelight rather than swapped for another picture */ html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) #ocityScene{ background-color:#120F0C; filter:brightness(.30) saturate(.62) contrast(1.04); } html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) #ocityVeil{ opacity:1; background:linear-gradient(90deg, rgba(23,19,15,.26) 0%, rgba(23,19,15,.88) 13%, rgba(23,19,15,.94) 50%, rgba(23,19,15,.88) 87%, rgba(23,19,15,.26) 100%); } @media(max-width:1300px){ html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) #ocityVeil{ background:rgba(23,19,15,.92) } } /* the world bar along the top */ html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) .oc-bar{ background:linear-gradient(180deg,rgba(32,26,19,.97),rgba(22,18,13,.96)); border-bottom:1px solid #4E3D24; box-shadow:0 10px 30px rgba(0,0,0,.45); } html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) .oc-home{ color:#F7F0E3 } html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) .oc-where{ color:#C8B79A } html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) .oc-btn{ background:rgba(246,231,188,.08); color:#F3E7CD; border-color:#4E3D24; } html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) .oc-btn:hover{ background:rgba(227,199,126,.18); color:#FBF3E2; border-color:#E3C77E; } html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) .oc-btn[aria-pressed="true"]{ background:linear-gradient(180deg,#E3C77E,#C9A455); color:#1A1410; border-color:#E3C77E; } html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) .oc-drawer{ background:rgba(22,18,13,.97); } html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) .oc-drawer h2{ color:#FBF3E2 } html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) .oc-grid a{ background:#231C15; border-color:#4E3D24; color:#F7F0E3; box-shadow:0 6px 18px rgba(0,0,0,.4); } html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) .oc-grid a span{ color:#C8B79A } html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) .oc-grid a:hover{ background:#2C2319; border-color:#E3C77E; } /* the page's own words */ html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) h1, html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) h2, html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) h3, html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) h4{ color:#FBF3E2 } html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) a{ color:#E3C77E } html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) input, html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) select, html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) textarea{ background:#2A2219; color:#F7F0E3; border-color:#4E3D24; } html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) input::placeholder, html.ocity[data-theme="night"]:not(#dn-x):not([data-pal]) textarea::placeholder{ color:#A5947A } /* ========================================================================== 2. DAY · Omega World, the home page Her city painting is a lit city on a dark page, so day is the skin that had to be written. The painting itself is never recoloured: it keeps its own pixels and only the room around it changes. ========================================================================== */ html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-page{ background:radial-gradient(circle at top,#DCEAFB,#F3F6FB 70%); } html[data-theme="day"]:not(#dn-x):not(.ocity) body:has(.ow-page){ background:#F3F6FB; color:#121A28; } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-page{ --ow-ink:#F3F6FB; --ow-deep:#DCE6F4; --ow-gold:#9A6E14; --ow-gold2:#6E4E0C; --ow-gold-deep:#C79A3A; --ow-text:#121A28; --ow-muted:#4C5872; color:#121A28; } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-rail, html[data-theme="day"]:not(#dn-x):not(.ocity) .na{ background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(238,244,251,.96)); border-color:rgba(154,110,20,.34); box-shadow:0 18px 50px rgba(30,45,70,.14); } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-rail-name{ color:#3A2A06 } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-rail-name b{ color:#4C5872 } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-rail-brand{ border-bottom-color:rgba(154,110,20,.24) } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-rail-foot{ border-top-color:rgba(154,110,20,.24) } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-rail-link{ color:#243247 } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-rail-link:hover, html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-rail-link:focus-visible{ color:#3A2A06; background:rgba(154,110,20,.10); border-color:rgba(154,110,20,.34); } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-rail-link.is-here{ color:#201503; background:linear-gradient(135deg,#F0D28A,#C79A3A); border-color:#9A6E14; } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-rail-account{ background:rgba(154,110,20,.12); color:#3A2A06; border-color:rgba(154,110,20,.5); } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-rail-toggle{ background:#FFFFFF; color:#3F4A60; border-color:rgba(30,45,70,.18); } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-rail-toggle:hover{ color:#3A2A06; border-color:#9A6E14; } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-rail-toggle[aria-pressed="true"]{ background:linear-gradient(135deg,#F0D28A,#C79A3A); color:#201503; border-color:#9A6E14; } /* the older Omega World page (/omega-world) carries its buttons in a toolbar instead of a rail; in day they wear the same ivory as the rail's pills */ html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-btn{ background:#FFFFFF; color:#3F4A60; border-color:rgba(30,45,70,.18); } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-btn:hover{ color:#3A2A06; border-color:#9A6E14; } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-btn[aria-pressed="true"]{ background:linear-gradient(135deg,#F0D28A,#C79A3A); color:#201503; border-color:#9A6E14; } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-brand{ color:#6E4E0C } html[data-theme="day"]:not(#dn-x):not(.ocity) .na-title, html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-simple-head h1{ color:#2A1D04 } html[data-theme="day"]:not(#dn-x):not(.ocity) .na-eyebrow{ color:#7A5710 } html[data-theme="day"]:not(#dn-x):not(.ocity) .na-copy, html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-simple-head p, html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-swipe{ color:#3F4A60 } html[data-theme="day"]:not(#dn-x):not(.ocity) .na-card, html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-list a{ background:linear-gradient(180deg,#FFFFFF,#EEF3FA); border-color:rgba(154,110,20,.3); color:#1A2436; } html[data-theme="day"]:not(#dn-x):not(.ocity) .na-card h3, html[data-theme="day"]:not(#dn-x):not(.ocity) .na-card strong{ color:#2A1D04 } html[data-theme="day"]:not(#dn-x):not(.ocity) .na-card p, html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-list a span{ color:#4C5872 } html[data-theme="day"]:not(#dn-x):not(.ocity) .na-all{ color:#7A5710 } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-status{ color:#3F4A60 } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-status b{ color:#3A2A06 } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-founder{ border-color:#C79A3A } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-frame{ background:#DCE6F4; border-color:rgba(154,110,20,.4); box-shadow:0 24px 70px rgba(30,45,70,.22); } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-img, html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-live{ background:#DCE6F4 } /* a thin morning haze at the foot of the frame instead of the night wash */ html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-scrim{ background:linear-gradient(to bottom,rgba(255,255,255,0) 84%,rgba(255,255,255,.22)); } html[data-theme="day"]:not(#dn-x):not(.ocity) .ow-grid-toggle{ background:rgba(255,255,255,.9); color:#3F4A60; border-color:rgba(30,45,70,.2); } /* ========================================================================== 3. NIGHT · Omega World, after dark The home page is already dark, so night only deepens it and cools the painting the way evening light would. Her pixels are untouched. ========================================================================== */ html[data-theme="night"]:not(#dn-x):not(.ocity) .ow-img, html[data-theme="night"]:not(#dn-x):not(.ocity) .ow-live{ filter:brightness(.82) saturate(.92) hue-rotate(-6deg); } html[data-theme="night"]:not(#dn-x):not(.ocity) .ow-scrim{ background:linear-gradient(to bottom,rgba(2,7,24,.10) 0%,rgba(2,7,24,0) 40%,rgba(2,7,24,.34)); } /* ========================================================================== 4. DUSK AND DAWN · a warm horizon over the night skin Only when the page is following the clock, because a visitor who chose night asked for night, not for a sunset. ========================================================================== */ /* the city pages: the horizon goes into the veil that is already there, so no page gains an element or a stacking layer it did not have before */ html.ocity[data-daynight="auto"][data-daypart="dusk"]:not(#dn-x):not([data-pal]) #ocityVeil{ background: radial-gradient(130% 62% at 50% 116%, rgba(227,165,92,.26) 0%, rgba(227,165,92,.08) 46%, rgba(227,165,92,0) 74%), linear-gradient(90deg, rgba(23,19,15,.26) 0%, rgba(23,19,15,.88) 13%, rgba(23,19,15,.94) 50%, rgba(23,19,15,.88) 87%, rgba(23,19,15,.26) 100%); } html.ocity[data-daynight="auto"][data-daypart="dawn"]:not(#dn-x):not([data-pal]) #ocityVeil{ background: radial-gradient(130% 62% at 50% 116%, rgba(226,176,164,.24) 0%, rgba(226,176,164,.07) 46%, rgba(226,176,164,0) 74%), linear-gradient(90deg, rgba(23,19,15,.26) 0%, rgba(23,19,15,.88) 13%, rgba(23,19,15,.94) 50%, rgba(23,19,15,.88) 87%, rgba(23,19,15,.26) 100%); } /* Omega World: the same horizon, on the ground the city stands on */ html[data-daynight="auto"][data-daypart="dusk"]:not(#dn-x):not(.ocity) .ow-page{ background: radial-gradient(120% 58% at 50% 112%, rgba(227,165,92,.20), rgba(227,165,92,0) 70%), radial-gradient(circle at top,#0a1637,#010511 70%); } html[data-daynight="auto"][data-daypart="dawn"]:not(#dn-x):not(.ocity) .ow-page{ background: radial-gradient(120% 58% at 50% 112%, rgba(226,176,164,.18), rgba(226,176,164,0) 70%), radial-gradient(circle at top,#0a1637,#010511 70%); } @media (prefers-reduced-motion:reduce){ html:not(#dn-x) #ocityScene, html:not(#dn-x) .ow-img{ transition:none } } @media print{ html[data-theme="night"]:not(#dn-x) body{ background:#fff !important; color:#000 } }