/* * Author: Manoj Mathangadeera * Website: https://codemmhub.github.io/ * Project: USRI Web Development V2027 * File Name: components.css * File Description: Reusable building blocks (buttons, sections, page hero, breadcrumb, icons, image placeholders) used across all page types. */ /* --------------------------------------------------------------------------- BUTTONS Yellow is for the main call to action only. Blue is the standard button. --------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 3rem; padding: 0.7rem 1.6rem; font-family: var(--font-head); font-weight: 700; font-size: 1.1875rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border: 2px solid transparent; border-radius: var(--radius); transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: none; } .btn--yellow { background: var(--yellow); color: var(--ink); } .btn--yellow:hover { background: var(--white); } .btn--blue { background: var(--blue); color: var(--white); } .btn--blue:hover { background: var(--blue-deep); } /* Outline for light backgrounds. */ .btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--outline:hover { background: var(--ink); color: var(--white); } /* Ghost for dark backgrounds. */ .btn--ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.6); } .btn--ghost:hover { background: var(--white); color: var(--ink); } .btn--sm { min-height: 2.5rem; padding: 0.45rem 1.1rem; font-size: 1rem; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); } /* --------------------------------------------------------------------------- SECTIONS A page is a stack of .section blocks. Modifiers set the background. .section--dark and .on-dark switch text to white and tune focus rings. --------------------------------------------------------------------------- */ .section { padding-block: var(--section-pad); } .section--platinum { background: var(--platinum); } .section--dark { background: var(--ink); color: var(--white); } .section--blue { background: var(--blue); color: var(--white); } .section--dark .eyebrow, .section--blue .eyebrow { color: var(--yellow); } /* Optional background image behind a section, with an overlay you can tune per section. The image comes from --bg-image (and a smaller --bg-image-sm for phones), both set by bg_var() in helpers.php. If the file does not exist they are unset and the section keeps its plain colour. Two layers: ::before holds the picture, ::after holds a flat tint on top of it. The tint is split into a colour (--overlay-rgb, as "r, g, b") and an opacity (--overlay-alpha, 0 to 1), so a page file can change either one on its own: style="" Why a strong default: the background photos are sharp and detailed, so on their own they would fight the text. The defaults (0.86 light, 0.82 dark) keep body text at 9:1 or better in the worst pixel of every background image, far above the 4.5:1 minimum. Lower values let more of the picture through. Measured safe floors for normal body text (worst pixel, 4.5:1 or better), keep a little above them for margin: bg-workshop-light 0.55 (busiest light image) bg-road-light 0.45 bg-blueprint-light 0.40 bg-aluminium-light 0.40 bg-steel-dark 0.65 bg-sparks-dark 0.65 Large headings only need 3:1, so they can go lower than these floors. Re-measure if a background image is ever replaced. */ .section--image { --overlay-rgb: 244, 246, 249; --overlay-alpha: 0.86; position: relative; isolation: isolate; } /* platinum tint on light sections */ .section--dark.section--image { --overlay-rgb: 35, 31, 32; --overlay-alpha: 0.82; } /* ink tint on dark sections */ .section--blue.section--image { --overlay-rgb: 31, 78, 161; --overlay-alpha: 0.86; } /* brand blue tint on blue sections */ .section--image::before, .section--image::after { content: ""; position: absolute; inset: 0; z-index: -1; } .section--image::before { background: var(--bg-image, none) center / cover no-repeat; } .section--image::after { background: rgba(var(--overlay-rgb), var(--overlay-alpha)); } /* Phones get the 800 px picture, a fraction of the download, when one exists. */ @media (max-width: 800px) { .section--image::before { background-image: var(--bg-image-sm, var(--bg-image, none)); } } /* --------------------------------------------------------------------------- PAGE HERO (top of every inside page) --------------------------------------------------------------------------- */ .page-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); color: var(--white); padding-block: clamp(2.5rem, 2rem + 4vw, 5.5rem); } /* Blueprint grid motif, drawn in CSS so it needs no image. It echoes the dimension diagrams on the model pages. */ .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 2.5rem 2.5rem; mask-image: linear-gradient(120deg, #000 10%, transparent 85%); -webkit-mask-image: linear-gradient(120deg, #000 10%, transparent 85%); } /* A thick yellow tab at the base, the site's signature accent. */ .page-hero::after { content: ""; position: absolute; left: 0; bottom: 0; width: clamp(4rem, 12vw, 9rem); height: 6px; background: var(--yellow); } .page-hero h1 { margin-top: var(--s-3); max-width: 20ch; } .page-hero .lead { margin-top: var(--s-4); max-width: 46rem; color: rgba(255, 255, 255, 0.9); } .page-hero .eyebrow { color: var(--yellow); } /* --------------------------------------------------------------------------- BREADCRUMB --------------------------------------------------------------------------- */ .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; font-size: 0.9375rem; } .breadcrumb li { display: flex; align-items: center; gap: 0.6rem; } .breadcrumb li + li::before { content: "/"; opacity: 0.5; } .breadcrumb a { text-decoration: none; opacity: 0.85; } .breadcrumb a:hover { opacity: 1; text-decoration: underline; } .breadcrumb [aria-current] { font-weight: 600; } /* --------------------------------------------------------------------------- IMAGES AND ICONS --------------------------------------------------------------------------- */ .img { width: 100%; height: auto; } /* Neutral stand in for an image file that does not exist yet. It keeps the exact shape of the real image, so the layout never jumps when the file arrives. */ .img-ph { width: 100%; background: repeating-linear-gradient(135deg, rgba(35, 31, 32, 0.04) 0 12px, transparent 12px 24px), var(--alice); border-radius: var(--radius); } .icon { display: inline-flex; width: 1.5rem; height: 1.5rem; flex: none; } .icon svg { width: 100%; height: 100%; } /* Stand in for an icon file that has not been added yet: a plain outlined circle. */ .icon--ph::before { content: ""; width: 100%; height: 100%; border: 2px solid currentColor; border-radius: 50%; opacity: 0.55; } /* --------------------------------------------------------------------------- DEVELOPER NOTE (only ever rendered on stand in pages, on developer machines) --------------------------------------------------------------------------- */ .dev-note { padding: var(--s-4) var(--s-5); background: var(--platinum); border-left: 4px solid var(--yellow); font-size: var(--fs-small); } .dev-note code { background: var(--alice); padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.9em; }