/*! * KNACSS Reborn: Just keep it simple! * @author: Alsacreations * v1.0.0 2020/11 * Licence WTFPL http://www.wtfpl.net/ */ /* ----------------------------- */ /* ==Reset (base) */ /* ----------------------------- */ /* * 1. Switch to border-box model for all elements * 2. Avoid min-width: auto and min-height: auto on flex and grid children */ *, *::before, *::after { box-sizing: border-box; /* 1 */ min-width: 0; /* 2 */ min-height: 0; /* 2 */ } /* * 1. Remove the grey highlight on links in iOS * 2. Prevent orientation font changes in iOS * 3. Breaks words to prevent overflow in all browsers */ html { font-size: 62.5%; -webkit-tap-highlight-color: transparent; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ overflow-wrap: break-word; /* 3 */ } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1.6rem; line-height: 1.5; background-color: #ffffff; color: #212529; } /* * Headings */ h1, .h1-like, h2, .h2-like, h3, .h3-like, h4, .h4-like, h5, .h5-like, h6, .h6-like { color: #212529; } /* * Links */ a { color: #454d5d; text-decoration: underline; } a:focus, a:hover, a:active { color: #212529; text-decoration: underline; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /* * Vertical rythm */ h1, .h1-like, h2, .h2-like { margin-top: 0; margin-bottom: 2rem; } p, address, ol, ul, dl, blockquote, pre, h3, .h3-like, h4, .h4-like, h5, .h5-like, h6, .h6-like, dt, dd { margin-top: 0; margin-bottom: 1rem; } /* * Nested elements */ ol ol, ol ul, ul ol, ul ul, li ul, li ol, nav ul, nav ol, li p, li .p-like { margin-top: 0; margin-bottom: 0; } /* * Lists */ ul, ol { padding-left: 2rem; } nav ul, nav ol { list-style: none; padding: 0; } /* * Embed content */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } img, table, td, blockquote, pre, code, input, textarea, select, video, svg, iframe { max-width: 100%; } iframe, img, input, select, textarea { height: auto; } img { border-style: none; } /** * Remove the border on iframes in all browsers */ iframe { border-style: none; } /* * Fill color matching to text color */ svg:not([fill]) { fill: currentColor; } /* * Hide the overflow in IE */ svg:not(:root) { overflow: hidden; } /* * Tables */ table { border-collapse: collapse; } /* * Rulers */ hr { box-sizing: content-box; height: 0; overflow: visible; border: 0; border-top: 1px solid; margin: 2rem 0; clear: both; color: inherit; } /* * table styles */ table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; vertical-align: top; margin-bottom: 2rem; } /* * Hidden but not for an assistive technology like a screen reader, Yahoo! method */ .visually-hidden { position: absolute !important; border: 0 !important; height: 1px !important; width: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; } /* * Disable animations styles when reduced motion is enabled */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* * Change the cursor on busy elements in all browsers. */ [aria-busy="true"] { cursor: progress; } /* * Change the cursor on control elements in all browsers. */ [aria-controls] { cursor: pointer; } /* * Change the cursor on disabled, not-editable, or otherwise * inoperable elements in all browsers. */ [aria-disabled="true"], [disabled] { cursor: not-allowed; } /* * Change the display on visually hidden accessible elements * in all browsers. */ [aria-hidden="false"][hidden] { display: initial; } [aria-hidden="false"][hidden]:not(:focus) { clip: rect(0, 0, 0, 0); position: absolute; } /* ----------------------------- */ /* ==Reset (forms) */ /* ----------------------------- */ /* * Remove the tapping delay on clickable elements in all browsers . */ a, area, button, input, label, select, summary, textarea, [tabindex] { touch-action: manipulation; } /* * 1. Change the inconsistent appearance in all browsers. * 2. Add typography inheritance in all browsers. */ button, input, select, textarea { margin: 0; background-color: transparent; /* 1 */ color: inherit; /* 1 */ font-family: inherit; /* 2 */ font-size: inherit; /* 2 */ line-height: inherit; /* 2 */ letter-spacing: inherit; /* 2 */ vertical-align: middle; } /* * Basic User Interface reset */ button, input:not([type="radio"]):not([type="checkbox"]), select, textarea { border: 0; } /* * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre, code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } pre { -moz-tab-size: 2; tab-size: 2; white-space: pre-wrap; line-height: normal; overflow: auto; -ms-overflow-style: scrollbar; } /* * Show overflow in IE/Edge */ button, input { overflow: visible; } /* * Remove the inheritance of text transform in Firefox */ button, select { text-transform: none; } /* * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } form, fieldset { border: none; } fieldset { margin: 0; padding: 2rem; } legend { display: table; max-width: 100%; padding: 0 0.5rem; border: 0; color: inherit; white-space: normal; } label { display: inline-block; cursor: pointer; } textarea { overflow: auto; vertical-align: top; resize: vertical; white-space: pre-wrap; } progress { display: inline-block; width: 100%; vertical-align: baseline; } output { display: inline-block; } summary { display: list-item; } template { display: none; } /* ----------------------------- */ /* Form oddities */ /* ----------------------------- */ /* * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* * Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /* * Remove the inner padding in Chrome, Edge, and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* * 1. Correct the inability to style upload buttons in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* * Remove the inner border and padding of focus outlines in Firefox. */ ::-moz-focus-inner { border-style: none; padding: 0; } /* * Restore the focus outline styles unset by the previous rule in Firefox. */ :-moz-focusring { outline: 1px dotted ButtonText; } /* * Remove the additional :invalid styles in Firefox. */ :-moz-ui-invalid { box-shadow: none; } /* ----------------------------- */ /* ==Print (quick print reset) */ /* ----------------------------- */ @media print { * { background: transparent !important; box-shadow: none !important; text-shadow: none !important; } body { width: auto; margin: auto; font-family: serif; font-size: 12pt; } p, .p-like, h1, .h1-like, h2, .h2-like, h3, .h3-like, h4, .h4-like, h5, .h5-like, h6, .h6-like, blockquote, label, ul, ol { color: #000; margin: auto; } .print { display: block; } .no-print { display: none; } /* no orphans, no widows */ p, .p-like, blockquote { orphans: 3; widows: 3; } /* no breaks inside these elements */ blockquote, ul, ol { page-break-inside: avoid; } /* page break before main headers h1, .h1-like { page-break-before: always; } */ /* no breaks after these elements */ h1, .h1-like, h2, .h2-like, h3, .h3-like, caption { page-break-after: avoid; } a { color: #000; } /* displaying URLs a[href]::after { content: " (" attr(href) ")"; } */ a[href^="javascript:"]::after, a[href^="#"]::after { content: ""; } } /* ---------------------------- */ /* ==Layout classes */ /* ----------------------------- */ /* Global container */ .layout-maxed { display: grid; } @media (min-width: 576px) { .layout-maxed { grid-template-columns: minmax(1rem, 1fr) minmax(auto, 576px) minmax(1rem, 1fr); } } @media (min-width: 768px) { .layout-maxed { grid-template-columns: minmax(1rem, 1fr) minmax(auto, 768px) minmax(1rem, 1fr); } } @media (min-width: 1024px) { .layout-maxed { grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1024px) minmax(1rem, 1fr); } } @media (min-width: 1330px) { .layout-maxed { grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1330px) minmax(1rem, 1fr); } } /* Center all children */ .layout-maxed > * { grid-column: 2; } /* Hero box */ .layout-hero { grid-column: 1 / -1; display: grid; grid-template-columns: inherit; } .layout-hero > * { grid-column: 2; } /* Hero image */ .layout-hero-img { grid-column: 1 / -1; justify-self: center; max-width: 100%; }