/******************************************************************** THE ONA FOUNDATION COLORS Ported from the classic-ASP site's own 02.SiteColors.css so the NamtiraWeb layout keeps the look the site has now: the nebula photo fixed behind everything, a translucent maroon sidebar with maroon buttons in pale yellow, and white content panels whose headings are navy script. ONA's sheet used an older set of variable names and left several at the template's debugging values (red text, orange links) that nothing on the site ever displayed. Only the values that actually render are carried over; the rest are given real ones. *********************************************************************/ :root { /**************************************************************** NESTED PANEL DEPTH White on the maroon panel is 7.5:1, so there is room to lighten a nested panel further than Michael's palette allows before the text stops clearing WCAG AA (4.5:1 at 20%). ****************************************************************/ --detail-lighten-base: 8%; --detail-lighten-step: 4%; /**************************************************************** THEME IMAGES Background.jpg is 2048x1533 and is deliberately NOT scaled: it is centred at natural size and cropped by the viewport, which is how the site has always shown it. Logo.png is the 278x121 wordmark, pinned 10px in from the header's top left exactly where the old template placed it as an . ****************************************************************/ --img_Body_Background: url('/Design/Images/Background.jpg'); --img_Body_Background_Position: center; --img_Body_Background_Repeat: no-repeat; --img_Body_Background_Size: auto; --img_Header_Banner: url('/Design/Images/Logo.png'); --img_Header_Banner_Position: 10px 10px; --Header_Height: 228px; /**************************************************************** BODY White shows anywhere the nebula does not reach. ****************************************************************/ --clr_Body_Background_Top: white; --clr_Body_Background_Bottom: #D6DBDF; --clr_Body_Background_Color: white; --clr_Body_Background_Image: var(--img_Body_Background); /* AI: ONA's sheet left these at the template's debugging red. Nothing on the site renders directly on -- every heading, link and paragraph is inside the header, sidebar, article or a panel -- so they are set to the content values rather than left as a trap. */ --clr_Body_Heading: navy; --clr_Body_Text: black; --clr_Body_Link: blue; --clr_Body_Accent: gray; /**************************************************************** HEADER Logo.png carries the branding and the header is transparent, so the nebula behind the body shows through it. The page title is white script with a heavy black shadow to hold up against whatever part of the photo lands behind it. ****************************************************************/ --clr_Header_Background: transparent; --clr_Header_SiteTitle: black; --clr_Header_PageTitle: white; --clr_Header_Heading: white; --clr_Header_Text: white; --clr_Header_Link: LightSkyBlue; --clr_Header_Visited: LightSkyBlue; --clr_Header_Accent: LightSkyBlue; --clr_Header_Shadow: black; /**************************************************************** NAVIGATION The nav pills are images; only the label colour is CSS. On the black pill LightBlue reads 9.4:1, and on the blue hover pill 4.6:1 -- both clear AA, which the original's lightblue-on-blue only just did. ****************************************************************/ --clr_Nav_Background: transparent; --clr_Nav_Link: LightBlue; --clr_Nav_Visited: var(--clr_Nav_Link); --clr_Nav_Hover: white; /**************************************************************** SIDEBAR A translucent maroon wash over the nebula, text in white, and the gateway buttons in solid maroon with pale yellow labels (7.4:1). Hovered, the button lightens and the label goes white. ****************************************************************/ --clr_Sidebar_Background: rgba(128, 65, 77, 0.25); --clr_Sidebar_Heading: DarkOrange; --clr_Sidebar_Text: white; --clr_Sidebar_Link: WhiteSmoke; --clr_Sidebar_Accent: DarkOrange; --clr_Sidebar_Button: #80414D; --clr_Sidebar_Button_Link: LightYellow; --clr_Sidebar_Button_Hover: #A05463; --clr_Sidebar_Button_Hover_Link: white; /**************************************************************** CONTENT ****************************************************************/ --clr_Content_Background: white; --clr_Content_Heading: navy; --clr_Content_Text: black; --clr_Content_Link: blue; --clr_Content_Visited: #551A8B; /* AI: The pronunciation spans that mark every occurrence of "ONA" take this colour. ONA's sheet said "gray", which is 3.9:1 on white and under AA for body-size text; this is the same grey a shade darker, at 4.7:1. */ --clr_Content_Accent: #6B6B6B; /**************************************************************** CODE BLOCKS ****************************************************************/ --clr_Code_Background: black; --clr_Code_Text: greenyellow; /**************************************************************** PANELS ONA's panels -- asides, pagebars, sitemap nodes, details blocks -- are the maroon the sidebar buttons use. ****************************************************************/ --clr_Panel_Background: #80414D; --clr_Panel_Background_Light: #FF828A; --clr_Panel_Text: white; /* AI: Used by the pagebar hover states, which fill with the maroon, so this has to be light. ONA's #90C0D8 is only 3.8:1 there; lifting it to this pale blue reaches 4.8:1 and still reads as the same colour. */ --clr_Panel_Text_Light: #B0D4E8; --clr_Panel_Link: #D2E1F5; --clr_Panel_Heading: LightYellow; --clr_Panel_Accent: var(--clr_Panel_Heading); /**************************************************************** PAGE BARS ONA's bars fade from the maroon panel colour at the top to the white content panel at the bottom, and fill solid on hover. 59.Pagebars.css does that from the panel variables above, so these only need to agree with it. ****************************************************************/ --clr_PageBar_Top: var(--clr_Panel_Background); --clr_PageBar_Bottom: var(--clr_Content_Background); --clr_PageBar_Edge: LightYellow; /**************************************************************** TABLES ****************************************************************/ --clr_Table_Background: #E4D5D8; --clr_Table_Background_Light: #F2EAEC; --clr_Table_MainText: black; --clr_Table_AccentText: #80414D; } /******************************************************************** BASE COLOR APPLICATION *********************************************************************/ body { color: var(--clr_Body_Text); } a { color: var(--clr_Body_Link); } a:visited { color: var(--clr_Content_Visited); } a:hover, a:active { color: var(--clr_Body_Accent); } /* AI: ONA's header is the logo artwork over the nebula, so nothing paints behind it. */ header { background-color: var(--clr_Header_Background); color: var(--clr_Header_Text); } h1 { color: var(--clr_Header_SiteTitle); } h2, h3 { color: var(--clr_Header_PageTitle); } /* AI: The footer sits directly on the nebula, as the old Trailer did. */ footer { background-color: transparent; color: var(--clr_Sidebar_Text); } footer p.Copyright { color: var(--clr_Sidebar_Text); }