/* ========================================================================== AMEU Theme for OpenConf 8.x Alma Mater Europaea University visual identity. Loaded by modules/ameu_theme/init.inc via oc_addCSS(), which makes header.inc print it AFTER oc-base.min.css and oc.min.css. Everything here therefore wins on equal specificity - no !important is used anywhere. Tokens: vault/wiki/work/patterns/AMEU-landing-page-design-system.md Fonts are self-hosted (no Google Fonts request, no third-party IP transfer). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts OpenConf's stylesheet references exactly three families ("Source Sans Pro Web", "Merriweather Web", "Roboto Mono Web") across 236 rules. Rather than fight those rules one by one, the two text families are re-pointed at the AMEU faces: body text becomes Inter, display/serif headings become Saira. A face declared later with the same weight/style descriptors replaces the earlier one, so a single block re-skins the whole application. -------------------------------------------------------------------------- */ /* Body text -> Inter */ @font-face { font-family: "Source Sans Pro Web"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "Source Sans Pro Web"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "Source Sans Pro Web"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); } @font-face { font-family: "Source Sans Pro Web"; font-weight: 300; font-style: italic; font-display: swap; src: url("fonts/inter-italic.woff2") format("woff2"); } @font-face { font-family: "Source Sans Pro Web"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/inter-italic.woff2") format("woff2"); } @font-face { font-family: "Source Sans Pro Web"; font-weight: 700; font-style: italic; font-display: swap; src: url("fonts/inter-italic.woff2") format("woff2"); } /* Display/serif headings -> Saira */ @font-face { font-family: "Merriweather Web"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/saira-500.woff2") format("woff2"); } @font-face { font-family: "Merriweather Web"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/saira-500.woff2") format("woff2"); } @font-face { font-family: "Merriweather Web"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/saira-700.woff2") format("woff2"); } /* Named families for our own rules */ @font-face { font-family: "AMEU Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "AMEU Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/inter-500.woff2") format("woff2"); } @font-face { font-family: "AMEU Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/inter-600.woff2") format("woff2"); } @font-face { font-family: "AMEU Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/inter-italic.woff2") format("woff2"); } @font-face { font-family: "AMEU Display"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/saira-500.woff2") format("woff2"); } @font-face { font-family: "AMEU Display"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/saira-600.woff2") format("woff2"); } @font-face { font-family: "AMEU Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/saira-700.woff2") format("woff2"); } /* Latin Extended (c, s, z and the rest of the Slovenian/Croatian diacritics). Declared after the base faces and restricted by unicode-range, so they are used only for the codepoints they actually contain. */ @font-face { font-family: "Source Sans Pro Web"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/inter-400-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Source Sans Pro Web"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/inter-400-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Source Sans Pro Web"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/inter-600-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Source Sans Pro Web"; font-weight: 300; font-style: italic; font-display: swap; src: url("fonts/inter-italic-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Source Sans Pro Web"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/inter-italic-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Source Sans Pro Web"; font-weight: 700; font-style: italic; font-display: swap; src: url("fonts/inter-italic-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Merriweather Web"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/saira-500-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Merriweather Web"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/saira-500-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Merriweather Web"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/saira-700-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "AMEU Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/inter-400-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "AMEU Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/inter-500-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "AMEU Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/inter-600-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "AMEU Display"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/saira-500-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "AMEU Display"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/saira-600-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "AMEU Display"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/saira-700-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- 2. Tokens -------------------------------------------------------------------------- */ :root { --ameu-navy: #00386C; --ameu-navy-deep: #022B52; --ameu-blue: #0061AA; --ameu-red: #ED5054; --ameu-ink: #353A40; --ameu-muted: #5D6570; --ameu-line: #E3E8EE; --ameu-gray-bg: #F4F7FA; --ameu-white: #FFFFFF; --ameu-display: "AMEU Display", "Saira", "Helvetica Neue", Arial, sans-serif; --ameu-body: "AMEU Sans", "Inter", "Helvetica Neue", Arial, sans-serif; --ameu-radius: 10px; --ameu-pill: 999px; --ameu-shell: 100%; /* full-width layout (operator decision 19. 08. 2026) */ --ameu-gutter: 1.5rem; } /* -------------------------------------------------------------------------- 3. Base typography -------------------------------------------------------------------------- */ body { font-family: var(--ameu-body); color: var(--ameu-ink); background-color: var(--ameu-white); -webkit-font-smoothing: antialiased; } main { font-size: 1.0625rem; line-height: 1.65; /* Stock OpenConf lets a tinted section end mid-page and shows white below it; making main a column lets the tinted block fill the remaining height. */ display: flex; flex-direction: column; } main > [class*="bg-"] { flex-grow: 1; } h1, h2, h3, h4, h5, h6, .oc-prose > h1, .oc-prose > h2, .oc-prose > h3, .oc-prose > h4, .oc-prose > h5, .oc-prose > h6 { font-family: var(--ameu-display); font-weight: 600; color: var(--ameu-navy); letter-spacing: -0.005em; line-height: 1.25; } main h1 { font-size: 2.125rem; margin-bottom: 0.75rem; } main h2 { font-size: 1.5rem; margin-top: 2.25rem; } main h3 { font-size: 1.1875rem; margin-top: 1.75rem; } main hr { border: 0; border-top: 1px solid var(--ameu-line); margin: 2.25rem 0; } /* -------------------------------------------------------------------------- 4. Page shell - one shared content width for header, main and footer -------------------------------------------------------------------------- */ .oc-header--extended .oc-navbar, main .grid-container, .oc-footer .grid-container, .oc-footer .oc-footer__primary-container { max-width: var(--ameu-shell); margin-left: auto; margin-right: auto; padding-left: var(--ameu-gutter); padding-right: var(--ameu-gutter); } /* Only from the desktop breakpoint up is .oc-nav__inner a horizontal bar. Below it, it is the shrink-to-fit content of the off-canvas panel, where auto margins would centre the menu instead of leaving it left aligned. */ @media all and (min-width: 64em) { .oc-header--extended .oc-nav__inner { max-width: var(--ameu-shell); margin-left: auto; margin-right: auto; padding-left: var(--ameu-gutter); padding-right: var(--ameu-gutter); } } /* main is a column flex container (section 3): a flex item with auto side margins is sized to fit-content instead of being stretched, which pulled the content column in from the header and footer edge. */ main .grid-container { width: 100%; } main .grid-container { padding-top: 2.5rem; padding-bottom: 3.5rem; } /* -------------------------------------------------------------------------- 5. "Powered by OpenConf" strip - kept (attribution), toned down -------------------------------------------------------------------------- */ .oc-banner__header { background-color: var(--ameu-gray-bg); } .oc-banner .oc-banner__header-text, .oc-banner .oc-banner__header-action { color: var(--ameu-muted); } /* -------------------------------------------------------------------------- 6. Header and primary navigation -------------------------------------------------------------------------- */ .oc-header { background-color: var(--ameu-white); border-bottom: 1px solid var(--ameu-line); } .oc-header--extended .oc-navbar { padding-top: 1.25rem; padding-bottom: 1.25rem; } .oc-logo__text img { max-height: 7rem; width: auto; } .oc-header .oc-nav { background-color: var(--ameu-navy); } /* OpenConf colours these grey through ".oc-nav__primary a:not(.oc-button):not (.oc-current)", so the AMEU rule has to carry at least the same weight. */ .oc-header .oc-nav__primary a:not(.oc-button):not(.oc-current), .oc-header .oc-nav__primary > .oc-nav__primary-item > a, .oc-header .oc-nav__link { font-family: var(--ameu-display); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.015em; color: var(--ameu-white); } .oc-header .oc-nav__primary a:not(.oc-button):not(.oc-current):hover, .oc-header .oc-nav__link:hover { color: var(--ameu-white); background-color: rgba(255, 255, 255, 0.12); text-decoration: none; } /* "Sign In". The markup is identical on 8.30 and 8.50, but the core stylesheet differs (oc.min.css v8b vs v8d): 8.30 lifts this above the navy bar onto the white header, 8.50 keeps it inside the navy bar. CSS cannot tell the two apart, so the link carries its own surface - a blue pill reads as a button on white and keeps white text legible on navy, including the off-canvas panel. */ .oc-header .oc-nav__secondary .oc-nav__secondary-links a { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--ameu-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.015em; color: var(--ameu-white); background-color: var(--ameu-blue); border-radius: var(--ameu-pill); padding: 0.4rem 1rem; text-decoration: none; transition: background-color 0.15s ease; } .oc-header .oc-nav__secondary .oc-nav__secondary-links a:hover { color: var(--ameu-white); background-color: #004E8A; text-decoration: none; } /* the login glyph is an SVG sprite - make it follow the link colour */ .oc-header .oc-nav__secondary .oc-nav__secondary-links a .oc-icon { fill: currentColor; color: currentColor; } /* Off-canvas panel on small screens */ @media all and (max-width: 64em) { .oc-header .oc-nav { padding-top: 0.5rem; } .oc-header .oc-nav__primary > .oc-nav__primary-item > a { padding: 0.75rem 1rem; } /* The close glyph ships as a dark SVG, which disappears on the navy panel. */ .oc-nav__close { margin-left: auto; } .oc-nav__close img { filter: invert(1); } /* OpenConf adds a 1rem left margin to the logo only at this breakpoint, which pushed it 16px past the content and footer edge. */ .oc-navbar .oc-logo { margin-left: 0; } } /* Mobile menu button. Stock OpenConf renders a wide "MENU" pill that fills the whole height of the bar and crowds the logo, so it is drawn as a compact square with a hamburger glyph instead. The label stays in the DOM (colour and font-size hide it visually) so screen readers still announce it. */ .oc-menu-btn { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 12px; background-color: var(--ameu-navy); color: transparent; font-size: 0; background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 18px 2px; background-position: center 15px, center 21px, center 27px; background-repeat: no-repeat; transition: background-color 0.15s ease; } .oc-menu-btn:hover { background-color: var(--ameu-blue); } /* -------------------------------------------------------------------------- 7. Links -------------------------------------------------------------------------- */ main a, main .oc-link { color: var(--ameu-blue); text-underline-offset: 0.15em; text-decoration-thickness: 1px; } main a:hover, main .oc-link:hover { color: var(--ameu-navy); } /* The stock focus ring (4px #2491ff) is kept - it is the strongest indicator in the stylesheet. It only needs recolouring where it lands on a navy surface. */ .oc-nav .oc-nav__close:focus, .oc-nav .oc-nav__primary a:focus, .oc-footer a:focus { outline-color: var(--ameu-white); } /* -------------------------------------------------------------------------- 7b. Accent colour remap OpenConf marks instructional text and hint panels with the USWDS "accent-warm" palette, which renders brown (#775540 and friends) - the one colour family that clashes hardest with the AMEU navy. The 45 usages across the application are remapped here rather than page by page. -------------------------------------------------------------------------- */ /* Instructional paragraphs ("Fill in the field(s) below...", consent wording): plain body colour, so they do not read as links. */ .text-accent-warm-darker { color: var(--ameu-ink); } /* Accent glyphs and small highlights */ .text-accent-warm-dark, .text-accent-warm { color: var(--ameu-blue); } .bg-accent-warm, .bg-accent-warm-light, .bg-accent-warm-lighter { background-color: var(--ameu-gray-bg); color: var(--ameu-ink); } .border-accent-warm, .border-accent-warm-dark, .border-accent-warm-lighter { border-color: var(--ameu-line); } /* -------------------------------------------------------------------------- 8. Home page notice -------------------------------------------------------------------------- */ /* Full-width layout: the notice follows the shell, no separate reading width. */ #OC_homePageNotice > h2:first-child { font-size: 2.25rem; margin-top: 0; margin-bottom: 0.25rem; } #OC_homePageNotice > h2:first-child + h2 { font-size: 1.375rem; font-weight: 500; color: var(--ameu-muted); margin-top: 0; line-height: 1.45; } #OC_homePageNotice > hr:first-of-type { margin-top: 2rem; } /* -------------------------------------------------------------------------- 9. Buttons - AMEU pill -------------------------------------------------------------------------- */ .oc-button:not(.oc-button--unstyled) { font-family: var(--ameu-display); font-weight: 600; font-size: 1rem; line-height: 1; letter-spacing: 0.01em; border-radius: var(--ameu-pill); background-color: var(--ameu-navy); color: var(--ameu-white); padding: 0.875rem 1.75rem; border: 0; transition: background-color 0.15s ease, box-shadow 0.15s ease; } .oc-button:not(.oc-button--unstyled):hover, .oc-button:not(.oc-button--unstyled):not([disabled]):hover { background-color: var(--ameu-blue); color: var(--ameu-white); } .oc-button--outline:not(.oc-button--unstyled), .oc-button--outline:not(.oc-button--unstyled):visited { background-color: transparent; color: var(--ameu-navy); box-shadow: inset 0 0 0 2px var(--ameu-navy); } .oc-button--outline:not(.oc-button--unstyled):hover { background-color: var(--ameu-navy); color: var(--ameu-white); box-shadow: inset 0 0 0 2px var(--ameu-navy); } .oc-button--secondary:not(.oc-button--unstyled) { background-color: var(--ameu-red); } .oc-button--secondary:not(.oc-button--unstyled):hover { background-color: #D8383C; } .oc-button.oc-button--unstyled { font-family: var(--ameu-body); color: var(--ameu-blue); } /* -------------------------------------------------------------------------- 10. Forms -------------------------------------------------------------------------- */ .oc-form .field { margin-top: 1.5rem; } /* oc.min.css styles these as ".oc-form .field .oc-label" at 1.2rem/700 - matched here so the AMEU label scale actually applies. */ .oc-label, .oc-legend, .oc-form .field .oc-label, .oc-form .oc-fieldset .oc-legend { font-family: var(--ameu-body); font-size: 1rem; font-weight: 600; color: var(--ameu-ink); margin-bottom: 0.4rem; } .oc-input, .oc-select, .oc-textarea, .oc-form input[type="text"], .oc-form input[type="email"], .oc-form input[type="password"], .oc-form input[type="url"], .oc-form input[type="number"], .oc-form textarea, .oc-form select { font-family: var(--ameu-body); font-size: 1rem; color: var(--ameu-ink); border: 1px solid #C7D2E0; border-radius: var(--ameu-radius); padding: 0.625rem 0.75rem; background-color: var(--ameu-white); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .oc-input:focus, .oc-select:focus, .oc-textarea:focus, .oc-form input:focus, .oc-form textarea:focus, .oc-form select:focus { border-color: var(--ameu-blue); box-shadow: 0 0 0 3px rgba(0, 97, 170, 0.18); outline: none; } .oc-hint--required { color: var(--ameu-red); } /* contact.php prints "Contact Us" twice: once as the page

and again as the legend of its only fieldset (both hardcoded in core, lines 14 and 99). The legend is hidden visually but kept in the accessibility tree, which is the correct pattern for a fieldset that repeats the page title. */ #fs_contact-legend { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Section band that opens a fieldset (e.g. custom form groups) */ .oc-form .oc-fieldset .oc-legend-header { font-family: var(--ameu-display); font-size: 1.125rem; font-weight: 600; color: var(--ameu-navy); background-color: var(--ameu-gray-bg); border-left: 4px solid var(--ameu-navy); border-radius: 0 var(--ameu-radius) var(--ameu-radius) 0; } .oc-checkbox__label, .oc-radio__label { font-family: var(--ameu-body); color: var(--ameu-ink); } .oc-checkbox__input:checked + .oc-checkbox__label::before, .oc-radio__input:checked + .oc-radio__label::before { background-color: var(--ameu-navy); box-shadow: 0 0 0 2px var(--ameu-navy); } /* Card that wraps sign-in / sign-up / contact forms */ .oc-section .bg-white.border { border-color: var(--ameu-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(2, 43, 82, 0.04), 0 8px 24px rgba(2, 43, 82, 0.06); } /* Those cards sit in a "desktop:grid-col-4" column. With the narrower AMEU page shell a third of the row is too tight for the form, so the column is given a fixed comfortable width instead of a fraction. */ @media all and (min-width: 64em) { .oc-section .grid-row.flex-justify-center > [class*="grid-col-4"] { flex: 0 0 auto; width: 28rem; max-width: 100%; } } /* Calmer rules around the "First time here?" line */ .border-primary-light { border-color: var(--ameu-line); } .bg-base-lightest { background-color: var(--ameu-gray-bg); } /* -------------------------------------------------------------------------- 11. Tables (chair and committee screens) -------------------------------------------------------------------------- */ .oc-table thead th { font-family: var(--ameu-display); font-weight: 600; background-color: var(--ameu-gray-bg); color: var(--ameu-navy); border-bottom: 2px solid var(--ameu-line); } .oc-table td, .oc-table th { border-color: var(--ameu-line); } /* -------------------------------------------------------------------------- 12. Alerts -------------------------------------------------------------------------- */ .oc-alert .oc-alert__heading { font-family: var(--ameu-display); font-weight: 600; } .oc-alert--success { background-color: #ECF6EE; } .oc-alert--error { background-color: #FDEDEE; } .oc-alert--info { background-color: var(--ameu-gray-bg); } /* -------------------------------------------------------------------------- 13. Footer -------------------------------------------------------------------------- */ .oc-footer { background-color: var(--ameu-navy-deep); } .oc-footer__return-to-top { background-color: transparent; padding-top: 1.25rem; } .oc-footer .oc-footer__return-to-top a { color: rgba(255, 255, 255, 0.75); font-size: 0.9375rem; } .oc-footer .oc-footer__return-to-top a:hover { color: var(--ameu-white); } .oc-footer .oc-footer__primary-section { background-color: transparent; border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem; } .oc-footer .oc-footer__primary-link, .oc-footer .oc-footer__address, .oc-footer .oc-footer__address a { font-family: var(--ameu-body); color: rgba(255, 255, 255, 0.88); text-decoration: none; } .oc-footer .oc-footer__primary-link { font-weight: 500; } /* "IAP2027 Chair" - keep the chair link readable as a link */ .oc-footer .oc-footer__address a { text-decoration: underline; } .oc-footer .oc-footer__primary-link:hover, .oc-footer .oc-footer__address a:hover { color: var(--ameu-white); text-decoration: underline; } /* OpenConf copyright bar - required attribution, kept legible */ .oc_footer_bottom { background-color: #011B34; color: rgba(255, 255, 255, 0.65); } .oc_footer_bottom a { color: rgba(255, 255, 255, 0.85); } /* -------------------------------------------------------------------------- 14. Small screens -------------------------------------------------------------------------- */ @media all and (max-width: 40em) { main h1 { font-size: 1.75rem; } main h2 { font-size: 1.3125rem; } #OC_homePageNotice > h2:first-child { font-size: 1.75rem; } #OC_homePageNotice > h2:first-child + h2 { font-size: 1.125rem; } main .grid-container { padding-top: 1.75rem; padding-bottom: 2.5rem; } .oc-logo__text img { max-height: 3rem; } } @media (prefers-reduced-motion: reduce) { .oc-button, .oc-input, .oc-select, .oc-textarea { transition: none; } }