/* This file handles page styles across all pages in the website, eg. how a button or the page header looks, text size definitions, etc. UNITS: Relative (Always use these when possible): - vh: Viewport Height. αvh = α% of Viewport Height. 1vh = 1% of the viewport height. Something with height 100vh would be exactly as tall as the browser window on page load. Note that if the page is resized post-load, this value will not be recalculated. - vw: Viewport Width. αvw = α% of Viewport Width. 1vw = 1% of the viewport width. Same deal as with Viewport Height, except this is the width. Also note that there's nothing stopping you from setting an element's width to be some percentage of the height, or vice-versa. - rem: Root EM. 1rem is determined by the root (the ) tag's font size. Useful for padding around elements that looks proportionate. - em: Just EM. 5em means 5x the size of the current font. Like Root EM, this is relative, except that it inherits its value from its direct parent element. Eg. 1rem used to size somthing located within the head tag will be the exact same size as another 1rem element located within a tag with a much larger font size. Eg. 2. An element with vertical size 5em that is the direct child of an element with font size 18 will not be the same height as another element with height 5em that is the direct child of an element with font size 6. TLDR: Use rem for consistency throughout page, em for things that will look better when sized relative to their containers. - vmin: Relative to 1% of the viewport's smaller dimension. - vmax: Relative to 1% of the viewport's larger dimension. - %: Relative to the parent element. - ch: Relative to the width of the '0' character. - ex: Relative to the x-height of the current font. Absolute (best to avoid these): - px: Pixels. Note that pixel values should almost always be even since all screen sizes are an even number of pixels wide/high. Better to just not use pixels since this will scale elements based on the resolution of someone's screen. Also not always literally a pixel. Eg. Someone on a 4k screen looking at a square element 180px x 180px will see something smaller than someone with a 1920px x 1440px screen. - pt: Points. Less granular pixels, should be roughly 1/72 of an inch. (For reference, a pixel should be 1/96 of an inch.) - pc: Picas. 1pc = 12 pt. - cm: Centimeters - mm: Millimeters - in: inches */ /* The root section allows for variable definitions, variables denoted by --name. Allows for consistency throughout the file by using variables in style classes rather than concrete values. */ :root { --text: #030d16; --background: #fefbfb; /* Very light red, warmer background */ --background-alt: #fbfdfe; /* Very light cyan, colder background */ --primary: #21a9e4; --secondary: #1b5374; --accent: #449dd5; --footer: #005066; /* Footer background color #01485b, #013442 #005066;*/ --footer-accent: #ccf4ff; /* Color used in lighter portion of footer*/ /* I just took these values from one of my websites, but they can obviously be adjusted as desired. */ --margin: 0 0; /* Formatted: 'y_margin x_margin;'. Any units work, vertical should always be 0. Adjusting x will force the body content into a smaller column. */ --lh-base: 1.5; --fs-base: 1rem; /* This section calculates text sizes - p (paragraph) is the smallest normal size, through h1 (header 1) which is the largest header. Instead of changing the calculations, you can change the scale float to see more/less dramatic separation between the different text sizes.*/ --scale: 1.333; --p: var(--fs-base); --h5: calc(var(--p) * var(--scale)); --h4: calc(var(--h5) * var(--scale)); --h3: calc(var(--h4) * var(--scale)); --h2: calc(var(--h3) * var(--scale)); --h1: calc(var(--h2) * var(--scale)); --subtext: calc(var(--fs-base) * 0.875); /* This is used for very small text (eg. a copyright or disclaimer.) */ /* Border sizes determine how much space is around an element that uses a givem border. rem, or root em is a unit determined by the root tag's font size. An em unit is determined by its immediate parent element's font size. This is obvious in situations where something using em is the direct child of an element using h1 as the given value in em will be substantially larger than if the immediate parent was using p or subtext.*/ --border0: 0.0625rem; --border1: 0.125rem; --border2: 0.25rem; --border3: 0.5rem; /* Default border size */ --border4: 0.75rem; --border5: 1rem; /* Navigation stuff */ --nav-height: 6vh; /* Controls height of top navigation bar */ --footer-height: 6vh; --block-footer-height: 16vh; --logo-height: 4vh; /* Misc. */ } /* This directly modifies the base styling for the html and body tags. */ html, body { height: 100%; margin: 0; } /* This defines the body tag's styling. */ body { padding-top: 6vh; /* 6% of the view height (window height) */ display: flex; /* */ flex-direction: column; margin: var(--margin); width: auto !important; /* */ height: 100vh; /* Body height should match that of the window */ z-index: 100; /* Sets the body tag's z-index property. This is used for layering elements. */ background-color: var(--background); color: var(--text); /* Sets the body tag's text color */ overflow-x: hidden; /* justify-content: flex-start; */ } /* This forces the main tag to follow the CSS flex box model. A z-index of 90 means that the main tag's content is seen as being above the body (and anything else with a higher z-index.) This means that the main tag's content will be displayed in front of that of the body tag. */ main { flex-grow: 1; z-index: 90; color: var(--text) } /* Defines styling for the header class */ .header { position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height); box-shadow: 0 2px 5px rgba(30, 30, 30, 0.1); z-index: 1000; background-color: var(--background); color: var(--text); } /* Defines styling for the footer class */ .footer { clear: both; left: 0px; right: 0px; bottom: 0px !important; width: 100%; height: var(--footer-height); /* margin-top: auto; */ color: var(--background-alt); background-color: var(--footer); } /* This is a bit of a workaround to allow for bottom padding below the footer with minimal effort without a noticeable white bar. Basically just makes the area occupied by the footer tag have the same background color as its contents */ .footer-bg { background-color: var(--footer) !important; } .footer-content { color: var(--background-alt); } /* Font classes: */ .inter-tight-header { font-family: "Inter Tight", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .inter-body { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .montserrat-body { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .montserrat-nav { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: var(--p); } .montserrat-subtext { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: var(--subtext) } .montserrat-ital { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: italic; } /* Misc. */ .logo-img { max-height: var(--logo-height); max-width: auto; margin: 0 auto; } .h-center { margin: 0 auto !important; } .contact-footer { height: var(--block-footer-height); color: var(--background-alt) !important; background-color: var(--text) !important; } /* General case button */ .btn { background-color: var(--accent); border: none; border-radius: 12px; color: var(--background-alt); padding: var(--border1) var(--border0); text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; } /* Styles the booking button */ .book-btn { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; background-color: var(--accent); border: none; border-radius: 12px; color: var(--background-alt); padding: var(--border3) var(--border5); text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; transition-duration: 0.4s; } /* from blue-light theme: --primary-50: #eaf9fb; --secondary-900: #042b2f; */ .book-btn:hover { background-color: #eaf9fb; color: #042b2f; }