/***********************/ /*** LOST BORDERS BRANDING ***/ /* Team 50391 - School of Lost Borders */ /* Overrides interface-base.css variables */ .interface-layout[data-team="50391"] { --color-body: #27282A; --color-primary: #27282A; --color-secondary: #F9CB9C; --color-tertiary: #FF9900; --color-rfv: #FF4A11; --color-icons: #FF4A11; --color-links: #FF4A11; --color-links-hover: #F9CB9C; --font-headings: optima-lt-pro, sans-serif; --font-subheadings: muli, sans-serif; --font-primary: muli, sans-serif; --font-secondary: muli, sans-serif; --font-controls: normal 1em muli, sans-serif; /* !important defends against /api/team-brand/50391.css, which fetches the legacy _custom.css and loads LAST in with --color-buttons: #F9CB9C. Without !important, the peach value wins the cascade and the buttons fade. */ --color-buttons: #FF9900 !important; --color-buttons-hover: #F9CB9C !important; --color-buttons-text: #FFFFFF; --color-buttons-text-hover: #FFFFFF; --font-buttons: optima-lt-pro, sans-serif; --shadow: 0 2px 12px 0 rgba(40,40,40,.09); } .interface-layout[data-team="50391"] h1 {font-size: 400%; color: var(--color-primary)} .interface-layout[data-team="50391"] h2 {font-size: 275%; color: var(--color-tertiary)} .interface-layout[data-team="50391"] h3 {font-size: 150%; color: var(--color-primary)} .interface-layout[data-team="50391"] .event-banner {background-color: var(--color-tertiary); color: #FFFFFF; padding: 1.25rem 1.5rem; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap} .interface-layout[data-team="50391"] .event-banner strong {color: #FFFFFF} .interface-layout[data-team="50391"] .event-banner-info {flex: 1 1 auto; min-width: 0} .interface-layout[data-team="50391"] .event-banner-btn {display: inline-flex; align-items: center; padding: .7rem 1.4rem; background: #FFAD33; color: #FFFFFF; border: none; border-radius: 3px; font-family: muli, sans-serif; font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: all .25s cubic-bezier(.4,0,.2,1); flex: 0 0 auto} .interface-layout[data-team="50391"] .event-banner-btn:hover {background: #646464; color: #FFFFFF; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.18)} .interface-layout[data-team="50391"] .event-banner-btn:active {transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.12)} /* Document buttons: filled vibrant orange by default (no muted outlined look) */ .interface-layout[data-team="50391"] .doc-btn {background: var(--color-buttons); border-color: var(--color-buttons)} .interface-layout[data-team="50391"] .doc-btn .doc-btn-icon, .interface-layout[data-team="50391"] .doc-btn .doc-btn-label, .interface-layout[data-team="50391"] .doc-btn .doc-btn-arrow {color: #FFFFFF} .interface-layout[data-team="50391"] .doc-btn .doc-btn-arrow {opacity: .85} .interface-layout[data-team="50391"] .doc-btn:hover {background: var(--color-buttons); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.18); filter: brightness(.92)} .interface-layout[data-team="50391"] .doc-btn:hover .doc-btn-icon, .interface-layout[data-team="50391"] .doc-btn:hover .doc-btn-label, .interface-layout[data-team="50391"] .doc-btn:hover .doc-btn-arrow {color: #FFFFFF} /* Opened state: filled green so it still reads as a real button, not greyed out */ .interface-layout[data-team="50391"] .doc-btn-opened {background: #00CC78 !important; border-color: #00CC78 !important} .interface-layout[data-team="50391"] .doc-btn-opened .doc-btn-icon, .interface-layout[data-team="50391"] .doc-btn-opened .doc-btn-label, .interface-layout[data-team="50391"] .doc-btn-opened .doc-btn-arrow {color: #FFFFFF} .interface-layout[data-team="50391"] .doc-btn-opened:hover {background: #00CC78 !important; filter: brightness(.92)} .interface-layout[data-team="50391"] .doc-btn-opened:hover .doc-btn-icon, .interface-layout[data-team="50391"] .doc-btn-opened:hover .doc-btn-label, .interface-layout[data-team="50391"] .doc-btn-opened:hover .doc-btn-arrow {color: #FFFFFF} .interface-layout[data-team="50391"] .review-section {border: 1px solid #e5e5e5; border-radius: 8px; margin-bottom: 1.25rem; overflow: hidden; background: #FFFFFF} .interface-layout[data-team="50391"] .review-section-header {display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.25rem; background: #fafafa; border-bottom: 1px solid #eee} .interface-layout[data-team="50391"] .review-section-header h4 {margin: 0; font-family: var(--font-headings); font-size: 1.15rem; color: var(--color-primary); font-weight: 600} .interface-layout[data-team="50391"] .review-section-header h4 i {color: var(--color-tertiary); margin-right: .5rem} .interface-layout[data-team="50391"] .review-edit-btn {display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; background: transparent; color: var(--color-tertiary); border: 1.5px solid var(--color-tertiary); border-radius: 3px; font-family: muli, sans-serif; font-weight: 600; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: all .2s ease} .interface-layout[data-team="50391"] .review-edit-btn:hover {background: var(--color-tertiary); color: #FFFFFF} .interface-layout[data-team="50391"] .review-edit-btn i {font-size: .75rem} .interface-layout[data-team="50391"] .review-body {padding: 1rem 1.25rem} .interface-layout[data-team="50391"] .review-row {display: flex; padding: .45rem 0; border-bottom: 1px solid #f3f3f3; gap: 1rem} .interface-layout[data-team="50391"] .review-row:last-child {border-bottom: none} .interface-layout[data-team="50391"] .review-row-stack {flex-direction: column; gap: .25rem} .interface-layout[data-team="50391"] .review-label {flex: 0 0 180px; color: #666; font-weight: 600; font-size: .9rem} .interface-layout[data-team="50391"] .review-row-stack .review-label {flex: 1 1 auto} .interface-layout[data-team="50391"] .review-value {flex: 1 1 auto; color: var(--color-primary); font-size: .95rem; word-break: break-word} .interface-layout[data-team="50391"] .review-value-wrap {white-space: pre-wrap; background: #fafafa; padding: .6rem .8rem; border-radius: 4px; border-left: 3px solid var(--color-secondary)} @media (max-width: 640px) { .interface-layout[data-team="50391"] .review-row {flex-direction: column; gap: .2rem} .interface-layout[data-team="50391"] .review-label {flex: 1 1 auto} .interface-layout[data-team="50391"] .review-section-header {flex-wrap: wrap; gap: .5rem} } @media (max-width: 992px) { .interface-layout[data-team="50391"] .interface-header {height: 10em} .interface-layout[data-team="50391"] .interface-logo {height: 120px !important; max-height: none !important} .interface-layout[data-team="50391"] .interface-main {padding-top: 10em} } @media (min-width: 992.1px) { .interface-layout[data-team="50391"] .interface-header {height: 11em} .interface-layout[data-team="50391"] .interface-logo {height: 150px !important; max-height: none !important} .interface-layout[data-team="50391"] .interface-main {padding-top: 12em} } /* International registrant option on the State field (no U.S. state). Stamps the *Unknown state (PkState=1). */ .interface-layout[data-team="50391"] .intl-no-state-btn {display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; padding: .4rem .8rem; background: transparent; color: var(--color-tertiary); border: 1.5px solid var(--color-tertiary); border-radius: 4px; font-family: muli, sans-serif; font-weight: 600; font-size: .82rem; line-height: 1.2; cursor: pointer; text-decoration: none; transition: all .2s ease} .interface-layout[data-team="50391"] .intl-no-state-btn:hover {background: var(--color-tertiary); color: #FFFFFF} .interface-layout[data-team="50391"] .intl-no-state-btn i {font-size: .85rem; text-decoration: none} .interface-layout[data-team="50391"] .intl-no-state-chip {display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; padding: .6rem .85rem; background: #E9F9F1; border: 1.5px solid #00CC78; border-radius: 6px; color: #1D7A52; font-size: .9rem; font-weight: 600} .interface-layout[data-team="50391"] .intl-no-state-chip > i {color: #00CC78; font-size: 1rem} .interface-layout[data-team="50391"] .intl-no-state-chip span {flex: 1 1 auto} .interface-layout[data-team="50391"] .intl-no-state-undo {background: transparent; border: none; padding: 0; color: var(--color-tertiary); font-family: muli, sans-serif; font-weight: 600; font-size: .82rem; text-decoration: underline; cursor: pointer; flex: 0 0 auto} .interface-layout[data-team="50391"] .intl-no-state-undo:hover {color: var(--color-links-hover)}