@charset "UTF-8"; /* ======================================== MY_SITE.CSS - Site-Specific Styles Environmental Theme with Responsive Grid ======================================== */ /* Note: Fonts are loaded via tags in HTML for better performance */ /* ======================================== CSS VARIABLES ======================================== */ :root { /* Page */ --page-bg-color: rgba(255, 255, 255, 0.65); --max-page-width: 1300px; /* Colors - Dark Green/Blue Environmental Theme */ --color-primary: #1a7a4f; --color-primary-hover: #0d5c3a; --color-primary-active: #094a2e; --color-background: #F0FFF2; --color-text: #1e4a35; --color-text-secondary: #2d5a47; --color-text-muted: #555; --color-border: #a8c9b8; --color-focus: #1a7a4f; /* Semantic Colors */ --color-error: #d32f2f; --color-error-bg: rgba(121, 0, 0, 0.1); --color-error-border: rgba(159, 0, 0, 0.669); --color-success-bg: rgba(0, 121, 20, 0.1); --color-success-border: rgba(0, 159, 40, 0.669); --color-warning-bg: rgba(255, 193, 7, 0.1); --color-warning-border: rgba(255, 193, 7, 0.669); --color-info-bg: rgba(13, 110, 253, 0.1); --color-info-border: rgba(13, 110, 253, 0.669); /* Disabled State */ --color-disabled-bg: #e0e0e0; --color-disabled-text: #9e9e9e; /* Link Colors */ --link-color-fresh: rgba(0, 114, 105, 1); --link-color-hover: rgba(79, 177, 2, 1); --link-color-active: rgba(0, 164, 43, 1); --link-color-visited: rgba(60, 114, 0, 1); --link-color-subtle: #4466aa; /* Content Box Colors */ --content-box-border: #6FA478; --content-box-bg: #FFFAF4; --content-box-title-bg: #C6E7D2; --text-shadow-color: #8fbd96; /* Close Button */ --close-btn-bg: #e63946; --close-btn-hover: #b91c1c; /* Help Button */ --help-bg: #5ac466; --help-bg-hover: #71e28e; --help-border: #2e7b36; --help-symbol: #c82323; /* Tooltip */ --tooltip-bg: #333; --tooltip-text: #fff; /* Grid */ --grid-gap: 2px; /* Cell Styling */ --cell-border: 1px solid var(--color-border); /* Typography - Font Families */ --font-body: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-content-box: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-heading: 'Caveat Brush', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-handwritten: 'Architects Daughter', cursive; --font-help: 'Arial Black', system-ui, sans-serif; /* Typography - Fluid Scaling */ --font-size-base: clamp(0.875rem, 0.8rem + 0.4vw, 1rem); --font-size-small: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --font-size-h1: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem); --font-size-h2: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem); --font-size-h3: clamp(1.125rem, 1rem + 0.625vw, 1.5rem); --font-size-box-heading: clamp(1.125rem, 1rem + 0.2vw, 1.5rem); /* Typography - Line Heights */ --line-height-body: 1.6; /* Transitions & Animations */ --transition-speed: 0.2s; --transition-ease: ease-in-out; /* Spacing Scale */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 3rem; --space-xl: 4rem; /* Border Radius */ --border-radius-sm: 0.2em; --border-radius-md: 0.3em; --border-radius-lg: 0.5em; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-focus: 0 0 0 3px rgba(13, 92, 58, 0.25); --shadow-thumb: 1px 1px 8px 3px #aaa; --shadow-thumb-hover: 1px 1px 10px 3px rgba(26, 122, 79, 0.3); --form_label_width: 180px; } /* ======================================== BODY & PAGE LAYOUT ======================================== */ body { font-family: var(--font-body); position: relative; background-color: var(--color-background); background-attachment: scroll; min-height: 100vh; padding: 1em; font-size: var(--font-size-base); color: var(--color-text); line-height: var(--line-height-body); } #page { max-width: var(--max-page-width); border: 2px solid black; border-radius: 1.4em; margin: 0 auto; padding: 1em; background-color: var(--page-bg-color); } @media (max-width: 768px) { #page { padding: var(--space-xs); border-radius: 0.6em; } } .two_column_layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } @media (max-width: 768px) { .two_column_layout { grid-template-columns: 1fr; } } /* ======================================== TYPOGRAPHY ======================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); margin: 0.2rem 0; } h3, h4, h5, h6 { margin: 0.8rem 0 0.2rem 0; } h1, h2 { text-shadow: 1px 0px 2px var(--text-shadow-color); } h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } p { margin: 0 0 0.5rem 0; } .handwritten { font-family: var(--font-handwritten); } .small_text { font-size: 0.8em; } .attention_note { font-weight: 600; font-size: 1.3em; color: rgba(0, 103, 184, 0.872); } .more_info { font-style: italic; } .email_address { color: rgba(40, 77, 255, 1); } /* List alignment fixes */ ul, ol, li { text-align: left; } .grid_cell ul, .grid_cell ol, nav ol, nav ul, div ul, div ol { text-align: left; } /* Footnotes and source attribution */ .footnote, .source { max-width: 800px; margin: 2em auto 1em; font-family: var(--font-body); font-size: 0.75em; line-height: 1.5; color: var(--color-text-muted); text-align: left; } .footnote { border-top: 1px solid var(--color-border); padding-top: 1em; font-style: italic; } .source { border-top: none; color: var(--color-text-secondary); } .source a { color: var(--link-color-subtle); text-decoration: none; } .source a:hover { text-decoration: underline; } /* ======================================== LINK STYLES - BASE ======================================== */ a { color: var(--link-color-fresh); text-decoration: underline; text-decoration-color: rgba(0, 114, 105, 0.3); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--transition-speed) var(--transition-ease), text-decoration-color var(--transition-speed) var(--transition-ease); } a:hover { color: var(--link-color-hover); text-decoration-color: var(--link-color-hover); } a:active { color: var(--link-color-active); } a:visited { color: var(--link-color-visited); text-decoration-color: rgba(60, 114, 0, 0.3); } a:visited:hover { color: var(--link-color-hover); text-decoration-color: var(--link-color-hover); } /* Clear effects for image and div links */ a.div_link, a.img_link { text-decoration: none; } /* ======================================== ANIMATED LINK EFFECTS - UL/OL LISTS Yellow highlighter + animated green underline ======================================== */ ul a, ol a, li a { position: relative; text-decoration: underline; text-decoration-color: rgba(13, 92, 58, 0.2); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness 0.3s ease; } /* Yellow highlighter background */ ul a::before, ol a::before, li a::before { content: ''; position: absolute; left: -0.1em; bottom: -0.1em; width: 0%; height: 110%; background: linear-gradient(to right, rgba(255, 253, 130, 0.6), rgba(255, 253, 130, 0.15) ); transition: width 0.3s ease; z-index: -1; } ul a:hover::before, ol a:hover::before, li a:hover::before { width: 100%; } /* Animated green underline */ ul a::after, ol a::after, li a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0%; height: 2px; background-color: rgba(13, 92, 58, 0.6); transition: width 0.3s ease; } ul a:hover::after, ol a:hover::after, li a:hover::after { width: 100%; } /* Clear effects for image/div links in lists */ ul a.div_link, ol a.div_link, li a.div_link, ul a.img_link, ol a.img_link, li a.img_link { text-decoration: none; position: static; } ul a.div_link::before, ol a.div_link::before, li a.div_link::before, ul a.img_link::before, ol a.img_link::before, li a.img_link::before, ul a.div_link::after, ol a.div_link::after, li a.div_link::after, ul a.img_link::after, ol a.img_link::after, li a.img_link::after { content: none; } /* ======================================== NAVIGATION - VERTICAL MENU ======================================== */ .nav_vertical { list-style: none; padding: 0; margin: 0; background-color: var(--content-box-bg); border: 3px solid rgba(0, 105, 35, 0.209); border-radius: var(--border-radius-lg); overflow: hidden; width: 95%; } .nav_vertical li { margin: 0; border-bottom: 1px solid rgba(0, 105, 35, 0.1); } .nav_vertical li:last-child { border-bottom: none; } .nav_vertical li a { display: block; padding: 0.6em 1em 0.6em 2.2em; color: var(--color-primary); font-weight: 500; position: relative; text-decoration: none; transition: all var(--transition-speed) var(--transition-ease); } /* Leaf emoji indicator */ .nav_vertical li a::before { content: "🌿"; position: absolute; left: 0.8em; top: 50%; transform: translateY(-50%) translateX(-10px); opacity: 0; transition: all var(--transition-speed) var(--transition-ease); z-index: 1; background: none; width: auto; height: auto; } .nav_vertical li a::after { content: none; } .nav_vertical li a:hover { background-color: rgba(26, 122, 79, 0.08); } .nav_vertical li a:hover::before { opacity: 0.6; transform: translateY(-50%) translateX(0); } /* ======================================== CONTENT BOXES ======================================== */ .simple_box { background: white; padding: 2em; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); text-align: left; } .content_box { border: 3px solid rgba(0, 105, 35, 0.209); border-radius: var(--border-radius-md); box-shadow: var(--shadow-md); margin: 0.5em 1em; padding: 0; text-align: left; } .content_box.content_box_no_title { padding: 0.5em; } .content_box_title { font-size: var(--font-size-box-heading); font-family: var(--font-content-box); text-shadow: 1px 0px 2px var(--text-shadow-color); padding: 0.2em 0.5em; border-bottom: 3px solid rgba(0, 105, 35, 0.18); background-color: rgba(0, 62, 255, 0.067); } .content_box_title.leaf_accent::before { content: "🌿 "; font-size: 1em; opacity: 0.4; } .content_box_content { padding: 0.2em 0.5em 0.5em 0.5em; text-align: left; color: var(--color-text); line-height: var(--line-height-body); font-family: var(--font-body); } .content_box_content::after { content: ""; display: table; clear: both; } .content_box p { margin: 0.5em; } .content_box_content p { margin: 0.2em 0.5em; } .content_box_content p:first-child, .content_box p:first-child { margin-top: 0; } .content_box_content p:last-child, .content_box p:last-child { margin-bottom: 0.5em; } /* Labeled content box variant */ .labeled_content_box { border: 3px solid rgba(0, 105, 35, 0.343); border-radius: var(--border-radius-md); box-shadow: var(--shadow-md); margin: 0.5em 1em; padding: 1em 0.5em 0.5em 0.5em; text-align: left; } .labeled_content_box_heading { font-size: var(--font-size-box-heading); font-family: var(--font-content-box); text-shadow: 1px 0px 2px var(--text-shadow-color); margin: -1.4em 0 0.5em 0.3em; padding: 0.1em 0.4em; border-radius: var(--border-radius-sm); display: table; background-color: rgba(234, 239, 254, 1); border: 2px solid rgba(0, 105, 35, 0.343); } /* Page overview text */ #page_overview_text p { margin: 0 0 0.5em 1em; } #page_overview_text h2 { margin: 0 0 0 0.5em; } /* ======================================== GRID SYSTEM ======================================== */ .grid { display: grid; gap: var(--grid-gap); width: 100%; min-width: 0; } .grid > * { min-width: 0; min-height: 0; } /* Grid Templates */ .grid_1col { grid-template-columns: minmax(0, 1fr); } .grid_2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid_3col { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid_4col { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid_5col { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* Responsive breakpoints */ @media (max-width: 1200px) { .grid_5col { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 900px) { .grid_4col, .grid_5col { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 768px) { .grid_3col, .grid_4col, .grid_5col { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .grid_2col, .grid_3col, .grid_4col, .grid_5col { grid-template-columns: minmax(0, 1fr); } } /* ======================================== GRID CELLS ======================================== */ .grid_cell .grid { min-width: 0; } .grid_cell h1, .grid_cell h2, .grid_cell h3, .grid_cell h4, .grid_cell h5, .grid_cell h6 { margin-top: 0; } .grid, .grid_cell { overflow-wrap: anywhere; } .grid_cell_heading { font-size: var(--font-size-box-heading); font-family: var(--font-content-box); text-shadow: 1px 0px 2px var(--text-shadow-color); margin: -0.75em -0.75em 0.5em -0.75em; padding: 0.3em 0.5em; background-color: rgba(0, 62, 255, 0.067); border-bottom: 2px solid rgba(0, 105, 35, 0.18); } /* Cell Span Classes */ .span_2 { grid-column: span 2; } .span_3 { grid-column: span 3; } .span_4 { grid-column: span 4; } .span_5 { grid-column: span 5; } .row_span_2 { grid-row: span 2; } .row_span_3 { grid-row: span 3; } @media (max-width: 768px) { .span_2, .span_3, .span_4, .span_5 { grid-column: span 1; } } /* ======================================== IMAGES - BASE ======================================== */ img { max-width: 100%; height: auto; } .img_bullet { vertical-align: bottom; max-height: 1em; max-width: 1.5em; height: auto; width: auto; border: 0; margin-right: 0.5em; display: inline-block; } .img_responsive { width: 100%; height: auto; } .img_rounded { border-radius: var(--border-radius-md); } .img_circle { border-radius: 50%; } /* ======================================== IMAGES - TEXT FLOW ======================================== */ .img_add_border { border-radius: var(--border-radius-sm); max-width: 100%; height: auto; border: solid rgb(50, 114, 0) 3px; } .img_flow_left { float: left; margin: 0.5rem 1.5rem 1rem 0; } .img_flow_right { float: right; margin: 0.5rem 0 1rem 1.5rem; } .img_flow_top { display: block; margin: 0.5rem auto 1.5rem auto; } .img_flow_bottom { display: block; margin: 1.5rem auto 0 auto; } /* Border color modifiers */ .img_border_forest { border-color: #2d5a2d; } .img_border_light { border-color: #c8e6c8; } .img_border_gray { border-color: #999999; } .img_border_white { border-color: #ffffff; } .img_border_orange { border-color: #ec5f00; } /* Thumbnail size */ .img_scale_thumb { max-width: 110px; max-height: 110px; width: auto; height: auto; } @media (max-width: 768px) { .img_flow_left, .img_flow_right { float: none; display: block; margin: 1rem auto; max-width: 100%; } } /* ======================================== IMAGE GRID ======================================== */ .image_grid { display: grid; gap: 1rem; justify-content: center; align-items: stretch; grid-auto-rows: auto; grid-template-columns: repeat(auto-fit, 250px); margin: 0.5rem 0; } .image_cell { display: flex; flex-direction: column; height: 100%; background-color: #f5f5f5; padding: 1rem; border-radius: var(--border-radius-lg); text-align: center; } .image_cell img { max-width: 100%; max-height: 180px; width: auto; height: auto; } .image_cell .title { font-size: 1rem; } .image_cell .meta { font-size: 0.9rem; } /* ======================================== THUMBNAIL GRID ======================================== */ .thumbs_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(130px, 20vw, 200px), 1fr)); gap: 1rem; grid-auto-rows: minmax(0, auto); align-items: start; padding: 1rem; max-width: 1000px; margin: 0 auto; } .thumbs_grid > .thumb_cell { min-width: 0; } /* Featured thumbs grid variant */ #featured_thumbs_grid.thumbs_grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } #thumb_buttons { text-align: right; margin: 0 0 5px 0; } /* ======================================== THUMBNAIL CELLS ======================================== */ .thumb_cell { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; min-width: 0; font-size: 0.6em; background-color: #f5f5f5; padding: 1rem; border-radius: var(--border-radius-lg); text-align: center; page-break-inside: avoid; min-height: 0; transition: background-color 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .thumb_cell:hover { background-color: #e8f5e8; box-shadow: 0 2px 8px rgba(26, 122, 79, 0.2); } /* Thumbnail images */ .thumb_cell .thumb_img { width: 110px; max-width: 100%; height: auto; display: block; margin: 0 auto; object-fit: contain; border: 4px solid #fffffb; border-radius: 4px; box-shadow: var(--shadow-thumb); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .thumb_cell:hover .thumb_img { border-color: #c8e6c8; box-shadow: var(--shadow-thumb-hover); } .thumb_cell .thumb_img_larger { width: 200px; max-width: 100%; height: auto; border: 6px solid #fffffb; } .thumb_img_largest { border: 6px solid #fffffb; } .thumbs_grid .thumb_img { display: block; width: 100%; height: auto; } /* Thumbnail text */ h3.thumb_title, p.thumb_artist { margin: 0.3em auto 0.4em auto; padding: 0; line-height: 1em; font-weight: normal; } h3.thumb_title { font-size: 0.8rem; } p.thumb_artist { font-size: 0.6rem; } /* Thumbnail states */ .thumb_inactive { opacity: 0.3; } .thumb_restricted { border: 2px solid var(--color-error); } @media (max-width: 480px) { .thumb_cell .thumb_img { width: 96px; height: 96px; } .thumb_cell .thumb_title, .thumb_cell .thumb_artist { font-size: 0.65rem; } } /* ======================================== FORMS - TEXT INPUTS & TEXTAREA ======================================== */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], textarea { width: 300px; padding: 0.5em; font-size: 1em; font-family: inherit; color: var(--color-text); background-color: #fff; border: 2px solid rgba(13, 92, 58, 0.2); border-radius: var(--border-radius-md); transition: border-color var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease); box-sizing: border-box; margin: 0.2em 0.5em 0.2em 0.2em; } /* Hover state */ input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="url"]:hover, input[type="number"]:hover, input[type="date"]:hover, textarea:hover { border-color: rgba(13, 92, 58, 0.4); } /* Focus state */ input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="date"]:focus, textarea:focus { outline: none; border-color: var(--color-primary-hover); box-shadow: var(--shadow-focus); } input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="password"]:focus-visible, input[type="search"]:focus-visible, input[type="tel"]:focus-visible, input[type="url"]:focus-visible, input[type="number"]:focus-visible, input[type="date"]:focus-visible, textarea:focus-visible { border-color: var(--color-primary-hover); box-shadow: var(--shadow-focus); } /* Disabled state */ input[type="text"]:disabled, input[type="email"]:disabled, input[type="password"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="url"]:disabled, input[type="number"]:disabled, input[type="date"]:disabled, textarea:disabled { background-color: #f5f5f5; color: var(--color-disabled-text); cursor: not-allowed; border-color: rgba(0, 0, 0, 0.1); } /* Placeholder styling */ input::placeholder, textarea::placeholder { color: rgba(0, 0, 0, 0.4); opacity: 1; } /* Textarea specific */ textarea { min-height: 120px; resize: vertical; } /* ======================================== FORMS - SELECT/PULLDOWN ======================================== */ select { font: inherit; color: var(--color-text); box-sizing: border-box; } select[multiple] { min-height: 120px; } select:disabled { cursor: not-allowed; } /* Select wrapper */ .select_wrap { position: relative; display: inline-block; flex: 0 0 auto; min-width: 0; border: 2px solid rgba(13, 92, 58, 0.2); border-radius: var(--border-radius-md); background: #fff; padding-right: 40px; margin: 0.2em 0.5em 0.2em 0.2em; transition: border-color var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease); } .select_wrap select { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 0; background: transparent; outline: none; display: block; width: auto; min-width: 120px; max-width: 100%; padding: 0.5em 0.75em; line-height: 1.2; cursor: pointer; } .select_wrap select[multiple] { min-width: 220px; padding-right: 0; } /* Arrow */ .select_wrap::after { content: ""; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); pointer-events: none; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid rgba(13, 92, 58, 0.85); } /* Hover / Focus */ .select_wrap:hover { border-color: rgba(13, 92, 58, 0.4); } .select_wrap:focus-within { border-color: var(--color-primary-hover); box-shadow: var(--shadow-focus); } /* Disabled */ .select_wrap:has(select:disabled) { background-color: #f5f5f5; border-color: rgba(0, 0, 0, 0.1); opacity: 0.75; } .select_wrap select:disabled { color: var(--color-disabled-text); } /* Size variants */ .select_wrap.select_sm select { font-size: 0.875em; min-width: 150px; padding: 0.45em 0.65em; } .select_wrap.select_full { width: 100%; } .select_wrap.select_full select { width: 100%; min-width: 0; } /* Date pulldown widths */ .pulldown_days { width: 120px; } .pulldown_months { width: 210px; } .pulldown_years { width: 120px; } /* ======================================== FORMS - LAYOUT ======================================== */ .form_line { display: block; max-width: 100%; box-sizing: border-box; margin: 0 5px 12px 5px; } .form_label, .form_line > label { display: block; text-align: left; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; margin: 0 0 6px 0; font-weight: 500; } .form_line > .form_line_cont { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; max-width: 100%; margin: 0; } .form_line_cont > * { flex: 0 1 auto; max-width: 100%; box-sizing: border-box; } /* Prevent inputs from overflowing */ .form_line input[type="text"], .form_line input[type="email"], .form_line input[type="password"], .form_line input[type="search"], .form_line input[type="tel"], .form_line input[type="url"], .form_line input[type="number"], .form_line input[type="date"], .form_line textarea, .form_line .select_wrap { max-width: 100%; } .form_hint { font-size: 0.95em; opacity: 0.85; } .form_line input[type="radio"] { margin-right: 1em; } /* Larger screens: side-by-side grid layout */ @media (min-width: 641px) { .form_line { display: grid; grid-template-columns: var(--form_label_width) minmax(0, 1fr); row-gap: 10px; column-gap: 5px; align-items: center; } .form_label, .form_line > label { grid-column: 1; display: flex; align-items: center; justify-content: flex-end; text-align: right; margin: 0; } .form_line > .form_line_cont { grid-column: 2; } } /* Force stacked layout regardless of screen size */ .form_line.stacked { display: block; } .form_line.stacked > label, .form_line.stacked .form_label { display: block; text-align: left; justify-content: flex-start; margin: 0 0 6px 0; } .form_line.stacked > .form_line_cont { margin: 0; } .form_title { width: 100%; position: relative; text-align: left; margin-bottom: 1em; padding-left: 0.5em; z-index: 0; } .form_title::after { content: ""; position: absolute; left: 0; bottom: 0.1em; width: 100%; height: 85%; background: linear-gradient(to right, rgba(197, 230, 255, 0.519) 30%, transparent 100%); border-top-left-radius: 6px; border-bottom-left-radius: 6px; overflow: hidden; z-index: -1; } /* ======================================== BUTTONS - BASE ======================================== */ button, .button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; padding: 0.75em 1.5em; font-size: 1em; font-family: inherit; font-weight: 500; text-align: center; text-decoration: none; color: #fff; background-color: var(--color-primary-hover); border: 3px solid var(--color-primary-hover); border-radius: var(--border-radius-md); cursor: pointer; transition: all 0.3s ease; box-shadow: var(--shadow-sm); line-height: 1.2; margin: 0.3em; } /* Hover */ button:hover, .button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { background-color: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 0 5px rgba(13, 92, 58, 0.8), 0 0 10px rgba(13, 92, 58, 0.4), var(--shadow-sm); } /* Active */ button:active, .button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active { background-color: var(--color-primary-active); border-color: var(--color-primary-active); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } /* Focus (keyboard only) */ button:focus-visible, .button:focus-visible, input[type="submit"]:focus-visible, input[type="reset"]:focus-visible, input[type="button"]:focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* Disabled */ button:disabled, .button:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, input[type="button"]:disabled { background-color: var(--color-disabled-bg); border-color: var(--color-disabled-bg); color: var(--color-disabled-text); cursor: not-allowed; opacity: 0.6; box-shadow: none; } /* ======================================== BUTTONS - SECONDARY (OUTLINED) ======================================== */ .button-secondary, button.button-secondary, input[type="submit"].button-secondary, input[type="button"].button-secondary { background-color: transparent; color: var(--color-primary-hover); border: 3px solid var(--color-primary-hover); } .button-secondary:hover, button.button-secondary:hover, input[type="submit"].button-secondary:hover, input[type="button"].button-secondary:hover { background-color: rgba(13, 92, 58, 0.1); color: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 0 20px rgba(13, 92, 58, 0.6), 0 0 35px rgba(13, 92, 58, 0.3), var(--shadow-sm); } .button-secondary:active, button.button-secondary:active, input[type="submit"].button-secondary:active, input[type="button"].button-secondary:active { background-color: rgba(13, 92, 58, 0.2); border-color: var(--color-primary-active); } /* ======================================== BUTTONS - SIZE VARIANTS ======================================== */ .button-sm, button.button-sm, input[type="submit"].button-sm, input[type="button"].button-sm { padding: 0.4em 1em; font-size: 0.7em; } .button-lg, button.button-lg, input[type="submit"].button-lg, input[type="button"].button-lg { padding: 1em 2em; font-size: 1.125em; } @media (prefers-reduced-motion: reduce) { button, .button, input[type="submit"], input[type="button"] { transition: none; } } /* ======================================== BUTTONS - HELP HINT ======================================== */ button.help_hint { all: unset; position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; user-select: none; vertical-align: middle; --help-size: 20px; width: var(--help-size); height: var(--help-size); margin: 0 0.25em; background: var(--help-bg); border: 2px solid var(--help-border); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) var(--transition-ease); } button.help_hint::before { content: "?"; font-family: var(--font-help); font-weight: 900; font-size: calc(var(--help-size) * 0.7); color: var(--help-symbol); line-height: 1; } button.help_hint:hover, button.help_hint:focus-visible { background: var(--help-bg-hover); box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); } button.help_hint:active { transform: scale(0.95); } /* Tooltip via aria-label */ button.help_hint[aria-label]::after { content: attr(aria-label); position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-70%); background: var(--tooltip-bg); color: var(--tooltip-text); padding: 2px 6px; font-size: 0.75rem; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 10; } button.help_hint:hover[aria-label]::after { opacity: 1; } /* ======================================== ALERTS & MESSAGES ======================================== */ .error { background-color: var(--color-error-bg); border: 3px solid var(--color-error-border); border-radius: var(--border-radius-lg); padding: 0.5em 1em; width: 90%; margin: 0 auto; } .field_error { color: var(--color-error); font-size: 0.875em; margin-top: 0.25rem; display: block; } label.error_label { color: var(--color-error); font-weight: 600; } label.error_label::before { content: "⚠ "; margin-right: 0.25em; } .success { background-color: var(--color-success-bg); border: 3px solid var(--color-success-border); border-radius: var(--border-radius-lg); padding: 0.5em 1em; width: 90%; margin: 0 auto; } .warning { background-color: var(--color-warning-bg); border: 3px solid var(--color-warning-border); border-radius: var(--border-radius-lg); padding: 0.5em 1em; width: 90%; margin: 0 auto; } .info { background-color: var(--color-info-bg); border: 3px solid var(--color-info-border); border-radius: var(--border-radius-lg); padding: 0.5em 1em; width: 90%; margin: 0 auto; } /* ======================================== COLUMNS ======================================== */ .content_cols { column-count: 3; column-gap: 50px; margin: 0 auto; text-align: left; padding: 0.5em; } .col_section { break-inside: avoid-column; -webkit-column-break-inside: avoid; page-break-inside: avoid; } .content_cols h2 { font-size: 1.4rem; font-variant: small-caps; display: block; line-height: 1.2em; margin: 0 0 0.4em 0; padding-bottom: 0; border-bottom: 2px solid currentColor; break-after: avoid-column; -webkit-column-break-after: avoid; } .content_cols ul { font-size: 1rem; margin: 0.2em 0 0.5em 0.5em; padding-left: 1em; list-style-position: outside; } .content_cols li { list-style-type: circle; margin-left: 0; padding-left: 0; } @media (max-width: 900px) { .content_cols { column-count: 2; } } @media (max-width: 600px) { .content_cols { column-count: 1; } } /* ======================================== CLOSE BUTTON ======================================== */ .close_div_button { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--close-btn-bg); cursor: pointer; display: inline-block; z-index: 10; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: all var(--transition-speed) var(--transition-ease); box-sizing: border-box; } .close_div_button::before, .close_div_button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background: #fff; transform-origin: center; } .close_div_button::before { transform: translate(-50%, -50%) rotate(45deg); } .close_div_button::after { transform: translate(-50%, -50%) rotate(-45deg); } .close_div_button:hover { background: var(--close-btn-hover); border: 2px solid #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); } /* ======================================== GOOGLE reCAPTCHA (responsive) ======================================== */ .recaptcha_wrap{ margin: 15px 0 5px 0; transform-origin: 0 0; /* critical */ } /* desktop offset (what you already had working) */ @media (min-width: 641px){ .recaptcha_wrap > .g-recaptcha{ margin-left: 190px !important; } } /* small phones */ @media (max-width: 360px){ .recaptcha_wrap{ transform: scale(0.75); width: 228px; /* 304 * 0.75 */ } } /* mid phones */ @media (min-width: 361px) and (max-width: 640px){ .recaptcha_wrap{ transform: scale(0.85); width: 258px; /* 304 * 0.85 */ } } /* tablets / desktop */ @media (min-width: 641px){ .recaptcha_wrap{ transform: none; width: auto; } } /* ======================================== UTILITY CLASSES ======================================== */ /* Visibility */ .hidden, .is_hidden, [hidden] { display: none !important; } /* Text Alignment */ .align_center { text-align: center !important; } .align_left { text-align: left !important; } .align_right { text-align: right !important; } /* Spacing - Margin */ .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } /* Spacing - Padding */ .pt-sm { padding-top: var(--space-sm); } .pt-md { padding-top: var(--space-md); } .pt-lg { padding-top: var(--space-lg); } .pb-sm { padding-bottom: var(--space-sm); } .pb-md { padding-bottom: var(--space-md); } .pb-lg { padding-bottom: var(--space-lg); } /* Display */ .d-block { display: block; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } .d-flex { display: flex; } .d-grid { display: grid; } /* Positioning */ .parent { position: relative; } /* Smooth transitions (global) */ a, button, input, select { transition: all var(--transition-speed) var(--transition-ease); } /* ======================================== PRINT STYLES ======================================== */ @media print { body { background: white; color: black; } #page { border: none; box-shadow: none; max-width: 100%; } .hidden-print { display: none !important; } a::before, a::after { content: none; } }