tags and need this chrome; pages that design their own sections (index.php etc.) use classed sections and must NOT be repainted — this global rule silently killed the homepage's alternating backgrounds once main.css started loading site-wide. */ section:not([class]) { display: inline-block; width: 100%; padding: 150px 0; background: var(--nd-bg-light); color: var(--nd-text-primary); } /* Homepage blueprint sections stay transparent (so the fixed .drafting-grid shows through). This overrides only the bare `section` element rule's opaque background + inline-block display; each section's own padding/layout is kept by its specific rules in index_style.css. */ .hero-section, .participation-section, .timeline-section, .features-section, .program-section, .ambassador-section, .newsletter-section { display: block; background: transparent; } @media only screen and (max-width: 1200px) {section { padding: 15vw 0; }} .section-transparent { background: transparent; } /* Modern section container */ .panel { min-height: auto; width: 100%; display: block; position: relative; padding: 100px 5%; box-sizing: border-box; } .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 1; } .content-wrapper { display: inline-block; width: 900px; text-align: justify; font-size: 18px; /* text-shadow: 1px 1px 1px hsla(0,0%,0%,1); */ line-height: 35px; } @media only screen and (max-width: 1200px) {.content-wrapper { width: 90%; font-size: 5vw; line-height: 8vw; text-align: left; }} section .content-wrapper p { margin-bottom: 55px; /* text-shadow: 1px 1px 2px black; */ } @media only screen and (max-width: 1200px) {section .content-wrapper p { margin-bottom: 15vw; }} .content-wrapper a { border-bottom: 1px solid #c5c5c5; padding-bottom: 2px; font-weight: 300; transition: 0.2s padding, 0.2s color; } .content-wrapper a:hover { border-bottom: 1px solid #7ea7d6; padding-bottom: 4px; color: #7ea7d6; } .content-wrapper a { /* font-weight: 400; */ /* color: hsl(220,80%,70%); */ } /* @media only screen and (max-width: 1200px) {.content-wrapper a { font-size: 3vw; }} */ .content-wrapper a:hover { /* text-decoration: underline; */ } section .content-wrapper .subsection { font-weight: 400; text-align: center; margin-bottom: 65px; } /* Deadline Info Box Style */ .deadline-color { display: inline-block; background: linear-gradient(135deg, rgba(198, 40, 40, 0.08) 0%, rgba(244, 67, 54, 0.05) 100%); border: 1px solid rgba(198, 40, 40, 0.25); border-left: 4px solid #c62828; border-radius: 6px; padding: 0.75rem 1.3rem; color: #b71c1c; font-weight: 600; position: relative; margin: 1.5rem 0; } @media only screen and (max-width: 1200px) { .deadline-color { display: block; padding: 3vw 4vw; font-size: 4.5vw; margin: 3vw 0; } } h2 { font-size: 50px; margin: 0; margin-top: 50px; line-height: 60px; font-family: var(--nd-font-heading); font-weight: 700; } @media only screen and (max-width: 1200px) {h2 { font-size: 12vw; line-height: 15vw; margin-top: 20vw; }} /* Section Title Styling */ .section-title { font-family: var(--nd-font-heading); font-size: 3rem; margin-bottom: 1rem; text-align: center; font-weight: 700; color: var(--nd-text-primary); } .section-title small { font-size: 1.2rem; color: var(--nd-text-secondary); display: block; margin-top: 0.5rem; font-weight: 400; } .section-subtitle { font-size: 1.1rem; color: var(--nd-text-secondary); max-width: 700px; margin: 0 auto 3rem; text-align: center; line-height: 1.8; } .section-header { margin-bottom: 3rem; } h3 { font-size: 30px; margin: 0; text-align: center; font-family: var(--nd-font-heading); font-weight: 600; } @media only screen and (max-width: 1200px) {h3 { font-size: 7vw; padding-bottom: 7vw; margin-top: 5vw; }} h4 { font-size: inherit; margin: 3px 0; font-family: var(--nd-font-heading); font-weight: 600; } @media only screen and (max-width: 1200px) {h4 { font-size: 6vw; }} h4 i { padding-right: 4px; } @media only screen and (max-width: 1200px) {h4 i { font-size: 5.5vw; padding-right: 2vw; }} .icon-padding { padding-right: 4px; } @media only screen and (max-width: 1200px) {.icon-padding { font-size: 3vw; padding-right: 3vw; }} @media only screen and (max-width: 1200px) {i .fa-question-circle, b .fa-ban, b .fa-check-circle { padding-right: 30px; }} /* Creative Wave Separator */ .horizontal-bar-inline { display: inline-block; width: 120px; height: 20px; margin: 30px 0; position: relative; overflow: visible; } .horizontal-bar-inline::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 3px; /* background: linear-gradient(90deg, transparent 0%, var(--nd-accent-primary) 15%, var(--nd-accent-primary) 85%, transparent 100% ); */ border-radius: 2px; } .horizontal-bar-inline::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6 Q15 0, 30 6 T60 6 T90 6 T120 6' stroke='%23D69E2E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center; background-size: contain; } form .horizontal-bar-inline { transform: translateX(-20px); } @media only screen and (max-width: 1200px) { .horizontal-bar-inline { width: 25vw; height: 5vw; margin: 7vw 0; } } .center-wrapper { text-align: center; } .text-emphasis { font-weight: bold; color: hsl(0deg 0% 19.94%); /* background: hsl(0deg 0% 0% / 17%); */ padding: 5px 10px; font-weight: 400 !important; } @media only screen and (max-width: 1200px) {.text-emphasis { font-size: 5vw; }} /* ---------------- Section : PROCESS AND ROUNDS ---------------- */ #process { padding-bottom: 0px; } #process h3 { margin-bottom: 50px; } #process h4 { } .process-step { display: inline-block; width: 900px; margin-bottom: 80px; color: var(--nd-text-primary); } .process-step-no { float: left; padding: 38px 40px; font-size: 50px; border-radius: 1000px; font-weight: 600; border: 2px solid var(--nd-accent-primary); position: relative; isolation: isolate; /* keeps the z-index:-1 photo (:after) inside this circle instead of behind the page background */ background: var(--nd-gradient-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--nd-font-heading); } @media only screen and (max-width: 1200px) {.process-step-no { font-size: 11vw; padding-right: 4vw; border-radius: 100vw; padding: 5vw; font-size: 14vw; }} #process-step-no1:after {background-image: url('../src/step1.jpg');} #process-step-no2:after {background-image: url('../src/step2.jpg');} #process-step-no3:after {background-image: url('../src/step3.jpg');} .process-step-no:after { border-radius: 1000px; content : ""; display: block; position: absolute; top: 0; left: 0; background-position: center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%; opacity : 0.6; z-index: -1; } .process-step-content { display: inline-block; width: 700px; margin-left: 50px; margin-top: 0px; text-align: justify; padding: 20px 25px; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--nd-glass-border); border-radius: 8px; color: var(--nd-text-primary); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); border-left: 4px solid var(--nd-accent-primary); } @media only screen and (max-width: 1200px) {.process-step-content { width: 60vw; font-size: 4.5vw; line-height: 7vw; text-align: left; margin-left: 2vw; }} .interview-h4 { font-size: 23px; } @media only screen and (max-width: 1200px) {.interview-h4 { font-size: 5vw; }} .process-step-content .timer-content { font-weight: 400; } @media only screen and (max-width: 1200px) {.process-step-content .competition-button { font-size: 4vw; padding: 2vw 11vw; margin-left: 0vw; width: 890vw; }} /* ---------------- Section : QUALIFICATION ROUND ---------------- */ .timer { text-align: center; margin: 40px 0; } .timer span { font-weight: 400; font-size: 35px; background: hsla(0,0%,0%,0.45); padding: 5px 35px; border-radius: 100px; } @media only screen and (max-width: 1200px) {.timer span { font-size: 5.5vw; }} .iframe-wrapper { text-align: center; margin: 40px 0; } .iframe-wrapper iframe { display: inline-block; width: 80%; height: 700px; } @media only screen and (max-width: 1200px) {.iframe-wrapper iframe { /* height: 100vw; */ display: none; }} .p-button-wrapper { text-align: center; margin-top: 40px; } @media only screen and (max-width: 1200px) {.p-button-wrapper { margin-top: 10vw; }} #qualification .competition-button { padding: 10px 50px; margin-top: 30px; font-size: 20px; } @media only screen and (max-width: 1200px) {#qualification .competition-button { }} /* ---------------- Section : FAQ ---------------- */ #faq h4 { margin-top: 40px; margin-bottom: 20px; font-size: 25px; } @media only screen and (max-width: 1200px) {#faq h4 { font-size: 6vw; }} .question-wrapper { background: hsla(0, 0%, 0%, 0.65); padding: 10px 20px; border-radius: 5px; margin-bottom: 15px; max-height: 60px; overflow: hidden; transition: max-height 0.4s ease, background 0.3s ease; cursor: pointer; } .question-wrapper:hover { background: hsla(0, 0%, 0%, 0.75); } .question-wrapper.expanded { max-height: 2000px; transition: max-height 0.6s ease; } @media only screen and (max-width: 1200px) { .question-wrapper { font-size: 4.5vw; max-height: 14vw; line-height: 6vw; } .question-wrapper.expanded { max-height: 5000px; } } .question { cursor: pointer; transition: color 0.2s ease; font-weight: 500; user-select: none; } .question:before { content: "+ "; display: inline-block; width: 20px; font-weight: bold; transition: transform 0.3s ease; } .question-wrapper.expanded .question:before { content: "- "; } .question:hover { color: hsl(220, 80%, 80%); } .answer { max-height: 0; overflow: hidden; opacity: 0; transition: opacity 0.4s ease, max-height 0.4s ease; margin-top: 10px; padding-top: 10px; border-top: 1px solid hsla(0, 0%, 100%, 0.1); line-height: 1.6; } .question-wrapper.expanded .answer { max-height: 2000px; opacity: 1; } /* ---------------- Section : MATERIALS ---------------- */ #materials a { color: white; font-weight: 400; text-decoration: none; } #materials a:hover { text-decoration: none; } .content-wrapper .document { background: hsla(0,0%,0%,0.4); display: inline-block; padding: 5px 10px; margin: 6px 4px; cursor: pointer; transition: 0.1s background, 0.1s transform; } @media only screen and (max-width: 1200px) {.content-wrapper .document { width: 90%; font-size: 4.5vw; padding: 2vw 0; margin: 1vw 0; }} .document:hover { transform: scale(1.05); } #materials .content-wrapper { text-align: center; } /* ---------------- TEACHER, AMBASSADOR ---------------- */ @media only screen and (max-width: 1200px) {#teachers .competition-button, #ambassador .competition-button { }} /* ---------------- SUBMISSION FORM ---------------- */ .submission-form { /* background: hsla(0,0%,0%,0.5); */ padding: 50px; border-radius: 5px; width: 700px; } @media only screen and (max-width: 1200px) {.submission-form { width: 90%; padding: 5%; }} .submission-form h3 { font-size: 1.1rem; font-weight: 400; margin: 20px 0; line-height: 1.7; color: var(--nd-text-secondary); font-family: var(--nd-font-body); text-align: left; background: linear-gradient(135deg, rgba(214, 158, 46, 0.06) 0%, rgba(255, 255, 255, 0) 100%); border-left: 4px solid var(--nd-accent-primary); padding: 1.2rem 1.5rem; border-radius: 0 8px 8px 0; } .submission-form h3 a { color: var(--nd-accent-primary); font-weight: 500; transition: color 0.2s ease; } .submission-form h3 a:hover { color: var(--nd-text-primary); } @media only screen and (max-width: 1200px) {.submission-form h3 { font-size: 4.2vw; line-height: 7vw; padding: 4vw 5vw; }} .submission-form .horizontal-bar-inline { margin-top: 40px; margin-bottom: 0px; width: 160px; } .submission-form h4 { margin-top: 15px; margin-bottom: 10px; font-size: 20px; } @media only screen and (max-width: 1200px) {.submission-form h4 { font-size: 5vw; }} .submission-form input, .submission-form select { width: 100%; font-size: 18px; box-sizing: border-box; } @media only screen and (max-width: 1200px) {.submission-form input, .submission-form select { font-size: 5vw; }} .submission-form input[type='file'] { width: 100%; box-sizing: border-box; } @media only screen and (max-width: 1200px) {.submission-form input[type='file'] { padding: 2vw; }} .submission-form input[type='submit'] { width: 400px; } @media only screen and (max-width: 1200px) {.submission-form input[type='submit'] { width: 90%; /* height: 10vw; */ }} .submission-form input[type='checkbox'] { width: 30px; height: 15px; float: left; margin-top: 6px; box-shadow: none; } @media only screen and (max-width: 1200px) {.submission-form input[type='checkbox'] { height: 5vw; }} .submission-form textarea { max-width: 98%; min-width: 98%; height: 100px; margin-bottom: 10px; border: 1px solid #000000; box-shadow: 5px 5px 0 0 black; outline: none; padding: 1%; font-family: Roboto; font-size: 16px; } @media only screen and (max-width: 1200px) {.submission-form textarea { height: 20vw; }} .submission-form select { width: 100%; box-sizing: border-box; } .submission-form p { font-size: 0.9rem; line-height: 1.6; color: var(--nd-text-secondary); margin-bottom: 35px; margin-top: 12px; padding: 1rem 1.25rem; background: rgba(0, 0, 0, 0.02); border: 1px solid var(--nd-glass-border); border-radius: 8px; font-family: var(--nd-font-body); position: relative; } .submission-form p b { color: var(--nd-text-primary); font-weight: 600; } .submission-form p a { color: var(--nd-accent-primary); font-weight: 500; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .submission-form p a:hover { border-bottom-color: var(--nd-accent-primary); } .submission-form p i { color: var(--nd-accent-primary); margin-right: 0.3rem; } @media only screen and (max-width: 1200px) {.submission-form p { font-size: 3.8vw; line-height: 6vw; padding: 4vw 5vw; margin-bottom: 8vw; }} .submission-form .select-birth { width: 31%; } .interface-box .select-birth { width: 31%; } .rules-check-span { float: left; width: 90%; } @media only screen and (max-width: 1200px) {.rules-check-span { font-size: 4vw; padding-left: 2vw; float: none; }} .recaptcha-wrapper { text-align: center; } .g-recaptcha { display: inline-block; } @media only screen and (max-width: 1200px) {.g-recaptcha { margin-top: 6vw; /* transform: scale(2); */ }} section .fail-msg { border-left: 1px solid hsl(0 80% 66% / 1) !important; color: hsl(0 80% 65% / 1) !important; background: #ff000024 !important; } .flag_inline { height: 12px; margin-right: 10px; } .login-footer { position: fixed; bottom: 0; width: 100%; } .login-footer span { margin-right: 20px; } .login-box { width: 450px; background: var(--nd-bg-light); border: 1px solid var(--nd-glass-border); border-radius: 8px; padding: 40px; font-size: 16px; text-align: left; font-weight: 300; font-family: var(--nd-font-body); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); } @media only screen and (max-width: 1200px) {.login-box { width: 90%; padding: 5%; font-size: 6vw; line-height: 12vw; margin-top: 7.3vw; margin-bottom: 20vw; }} .login-box h3 { font-size: 2rem; margin-bottom: 2rem; font-family: var(--nd-font-heading); font-weight: 700; color: var(--nd-text-primary); text-align: center; } @media only screen and (max-width: 1200px) {.login-box h3 { font-size: 10vw; }} .login-box form { /* text-align: left; */ } .login-box input, .login-box select { width: 91.5%; margin-bottom: 10px; } @media only screen and (max-width: 1200px) {.login-box input, .login-box select { width: 94%; font-size: 7vw; }} .login-box select { width: 100%; } .login-box input[type='submit'], .login-box .competition-button { width: 98%; margin: 0; margin-top: 10px; margin-bottom: 30px; } @media only screen and (max-width: 1200px) {.login-box input[type='submit'], .login-box .competition-button { padding: 1vw; width: 100%; /* border: 2px solid white; */ }} .login-box span { font-size: 13px; /* color: hsl(220,80%,80%); */ margin-bottom: 30px; } @media only screen and (max-width: 1200px) {.login-box span { font-size: 5vw; }} .login-box span i { font-size: 13px; } @media only screen and (max-width: 1200px) {.login-box span i { font-size: 4vw; }} .login-box .or-line { border-bottom: 1px solid #000000; height: 12px; width: 80px; /* float: left; */ display: inline-block; margin-bottom: 5px; } @media only screen and (max-width: 1200px) {.login-box .or-line { width: 35.5vw; border-bottom: 0.4vw solid rgb(0, 0, 0); height: 6vw; }} .login-box .or-or { /* float: left; */ display: inline; padding: 0 8px; font-weight: 400; } @media only screen and (max-width: 1200px) {.login-box .or-or { width: 15vw; padding: 0 1.6vw; }} .login-box .competition-button { /* font-size: 14px; */ margin: 0 !important; /* padding-left: 70px !important; */ /* padding-right: 70px !important; */ width: 60%; } @media only screen and (max-width: 1200px) {.login-box .competition-button { /* font-size: 7vw; */ /* padding: 1.5vw 15vw; */ }} .login-box .competition-button i { /* font-size: 12px; */ } @media only screen and (max-width: 1200px) {.login-box .competition-button i { /* font-size: 6vw; */ }} section .login-box p { margin-bottom: 0px; } .error-message { color: #a31010; text-align: center; margin-bottom: 15px; } .success-message { color: green; text-align: center; margin-bottom: 15px; } /* ---------------- INTERFACE ---------------- */ .interface-box { background: rgba(255, 255, 255, 0.95); padding: 50px; border-radius: 12px; width: 700px; border: 1px solid var(--nd-glass-border); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); } @media only screen and (max-width: 1200px) {.interface-box { width: 90%; padding: 5%; font-size: 5vw; line-height: 8vw; margin-top: 19vw; }} .interface-box .interface-title { font-weight: 700; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 2px solid var(--nd-accent-primary); font-size: 1.4rem; font-family: var(--nd-font-heading); color: var(--nd-text-primary); } @media only screen and (max-width: 1200px) {.interface-box .interface-title { font-weight: bold; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 2px solid var(--nd-accent-primary); font-size: 6vw; }} .interface-title span { float: right; font-weight: 500; cursor: pointer; font-family: var(--nd-font-body); color: var(--nd-accent-primary); transition: color 0.3s ease; } .interface-title span:hover { color: var(--nd-accent-secondary); } @media only screen and (max-width: 1200px) {.interface-title span { width: 100%; text-align:right; }} .interface-title span i { font-size: 15px; padding-left: 5px; } @media only screen and (max-width: 1200px) {.interface-title span { font-size: 4vw; } .interface-title span i { font-size: 4vw; }} .interface-box .participant-info { width: 230px; display: inline-block; font-weight: 500; line-height: 35px; color: var(--nd-text-secondary); } @media only screen and (max-width: 1200px) {.interface-box .participant-info { width: 100%; margin-top: 6vw; line-height: 8vw; }} .interface-box .new-round { border-top: 1px solid var(--nd-glass-border); margin-bottom: 10px; font-size: 15px; line-height: 1.55; /* padding-top: 15px; */ /* margin-top: 20px; */ } section .interface-box i { padding-right: 4px !important; color: var(--nd-accent-primary); } .participant-info i { width: 20px; text-align: center; } @media only screen and (max-width: 1200px) {.participant-info i { width: 5vw; }} .interface-box .status-positive { color: #16a34a; font-weight: 600; font-size: 15px; line-height: 1.55; display: block; border: 1px solid rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.1); border-left: 4px solid #16a34a; border-radius: 4px; padding: 12px 18px; text-align: left; box-shadow: none; } .interface-box .status-yellow { color: #f57c00; font-weight: 600; } .interface-box .status-yellow-bg { color: #f57c00; margin: 10px 0; padding: 12px 15px; font-size: 15px; line-height: 1.55; background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); border-left: 4px solid #f57c00; border-radius: 4px; box-shadow: none; } .status-red-bg { color: #c62828; margin: 10px 0; padding: 12px 15px; font-size: 15px; line-height: 1.55; background: rgba(244, 67, 54, 0.1); border: 1px solid rgba(244, 67, 54, 0.3); border-left: 4px solid #c62828; border-radius: 4px; } .interface-box .status-yellow-bg-small { color: #f57c00; margin: 8px 0; padding: 10px 12px; font-size: 15px; background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); border-left: 4px solid #f57c00; border-radius: 4px; box-shadow: none; } .interface-box .status-green-bg-small { color: #16a34a; margin: 8px 0; padding: 10px 12px; font-size: 15px; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-left: 4px solid #16a34a; border-radius: 4px; } .interface-box .round-certificate { padding: 8px 16px; color: var(--nd-accent-primary); border: 1px solid var(--nd-accent-primary); border-radius: 4px; text-decoration: none !important; cursor: pointer; transition: all 0.3s ease; font-weight: 500; display: inline-block; } .interface-box .round-certificate:hover { background: var(--nd-accent-primary); color: #000; box-shadow: 0 4px 15px rgba(214, 158, 46, 0.3); } .interface-box .round-certificate:hover i { color: #000; } @media only screen and (max-width: 1200px) {.interface-box .round-certificate { padding: 8px 24px; font-weight: 500; } .interface-box .round-certificate i { display: none; }} .interface-box .round-certificate i { font-size: 15px; margin-left: 5px; cursor: pointer; } .interface-box .list-element { background: var(--nd-glass-bg); padding: 12px 16px; margin: 12px 0; text-align: left; border: 1px solid var(--nd-glass-border); border-radius: 6px; transition: all 0.2s ease; } .interface-box .list-element:hover { background: rgba(214, 158, 46, 0.05); border-color: rgba(214, 158, 46, 0.3); } @media only screen and (max-width: 1200px) {.interface-box .list-element { padding: 3vw 4vw; font-size: 5vw; margin: 4vw 0; }} @media only screen and (max-width: 1200px) {.interface-box .list-element i { font-size: 4vw; /* margin-right: 2vw; */ }} .interface-box .list-element span { display: inline-block; width: 20px; padding-left: 3px; font-weight: 500; } @media only screen and (max-width: 1200px) {.interface-box .list-element span { width: 7vw; }} .interface-box .list-element form { text-align: left; font-size: 15px; } @media only screen and (max-width: 1200px) {.interface-box .list-element form { font-size: 5vw; }} .interface-box .list-element input { width: 95%; } @media only screen and (max-width: 1200px) {.interface-box .list-element input { font-size: 4.5vw; padding: 1.5vw; }} .interface-box .list-element input[type='submit'] { width: 50%; margin-bottom: 10px; } @media only screen and (max-width: 1200px) {.interface-box .list-element input[type='submit'] { width: 90%; }} .interface-box .list-element select { width: 98.1%; } @media only screen and (max-width: 1200px) {.interface-box .list-element select { font-size: 4vw; padding: 1.5vw; font-weight: 300; }} .interface-box .list-element .delete-activity { float: right; font-size: 15px; color: #c62828; border: none; transition: color 0.2s ease; } .interface-box .list-element .delete-activity:hover { color: #f44336; } @media only screen and (max-width: 1200px) {.interface-box .list-element .delete-activity { font-size: 4vw; float: none; margin-left: 2vw; }} .interface-box .add-element { cursor: pointer; margin-top: 15px; color: var(--nd-accent-primary); transition: color 0.2s ease; } .interface-box .add-element:hover { color: var(--nd-accent-secondary); } @media only screen and (max-width: 1200px) {.inline-form input { font-size: 5vw; width: 100%; box-sizing: border-box; margin-bottom: 0.5vw; padding-top: 2vw; padding-bottom: 2vw; }} .final-exam-form select { width: 37px; padding: 2px; margin-right: 8px; } .final-exam-form td { text-align: right; padding-bottom: 10px; } /* ---------------- INTERFACE ---------------- */ .interface-body { overflow: hidden; } .interface-control-bar { width: 20%; height: 100vh; float: left; background: #0000009c; } .interface-control-bar img { width: 40%; height: 7vw; margin: 1vw; } .interface-name { color: white; font-size: 1.5vw; font-weight: bold; border-bottom: 1px solid #a4a4a4; padding-bottom: 0.5vw; margin-bottom: 1vw; } .interface-control-bar .competition-button { font-size: 1vw; padding: 0.5vw; margin: 0.8vw; transition: background 0.05s, color 0.05s; } .interface-control-bar .competition-button i { margin-right: 0.2vw; margin-left: 0.2vw; } .interface-control-bar .save-button { border: 1px dashed white; } .interface-control-bar .smaller-button { margin-right: 0; width: 50%; margin: 0.1vw; margin-right: 0.1vw; padding: 0.3vw; display: inline-block; } .button-was-selected { background: white; color: black !important; } .interface-control-bar select { font-size: 0.9vw; width: 20%; padding: 0.3vw; display: inline-block; } .interface-control-bar .score-information { color: white; font-size: 2vw; border: 1px dashed white; margin-left: 5vw; margin-right: 5vw; } .interface-control-bar .pf-score-information { margin-bottom: 0.5vw; } .interface-control-bar .go-back-link { color: white; font-size: 0.8vw; margin-bottom: 1.5vw; display: block; } .interface-main { width: 80%; height: 100vh; float: left; } .interface-main .tmp-information { background: black; float: left; width: 100%; color: white; font-size: 1vw; padding-top: 1vh; height: 3.5vh; } .interface-main .tmp-information i { margin-left: 1.4vw; margin-right: 0.2vw; font-size: 0.9vw; } .interface-main iframe { background: black; width: 100%; height: 95vh; } /* ---------------- TEAM AND AMBASSADOR PAGE ---------------- */ .team-member { display: inline-block; width: 180px; margin: 30px; font-size: 13px; color: hsl(0,0%,70%); line-height: 22px; } @media only screen and (max-width: 1200px) {.team-member { width: 38vw; margin: 3vw; font-size: 2.5vw; line-height: 6vw; }} .team-member img { filter: grayscale(100%); width: 180px; height: 180px; margin-bottom: 10px; box-shadow: 2px 1px 5px black; } @media only screen and (max-width: 1200px) {.team-member img { width: 38vw; height: 38vw; }} .ambassador-img { width: 300px; border: 1px solid black; box-shadow: 5px 5px 0 0 black; margin-top: 80px; } @media only screen and (max-width: 1200px) { .ambassador-img { margin-top: 100px; } .team-member-profile-p i { display: inline-block; padding-right: 20px; } } /* REGISTRATION AND PAYMENT */ .registration-form input[type='text'] { width: 97%; } .pay-method-selector { padding: 10px; border: 1px solid hsl(200, 56%, 25%); margin-bottom: 10px; height: 40px; outline: 1px solid transparent; background: hsla(210, 56%, 0%,0.3); } .pay-method-selector:hover { outline: 2px solid hsl(210, 36%, 45%); cursor: pointer; background: hsla(210, 56%, 0%,0.4); } .pay-method-selector:hover > .pm-name { } .pay-method-selector img { height: 40px; } .pay-method-selector i { height: 40px; font-size: 25px; margin-top: 8px; margin-left: 3px; } .pay-method-selector .pm-icon { width: 190px; display: inline-block; text-align: center; float: left; } .pay-method-selector .pm-name { float: left; margin-left: 20px; margin-top: 8px; } .pay-method-selector-selected { outline: 2px solid hsl(210, 36%, 45%); background: hsla(210, 56%, 0%,0.6); font-weight: 400; } .pay-method-selector-selected:hover { background: hsla(210, 56%, 0%,0.6); } @media only screen and (max-width: 1200px) { .pay-method-selector { height: 170px; text-align: center; } .pay-method-selector .pm-icon { width: 100%; /* background: red; */ padding-top: 5px; } .pay-method-selector .pm-name { /* background: red; */ width: 100%; padding: 0; margin: 0; } .pay-method-selector i { margin: 5px !important; font-size: 33px; } .pay-method-selector .pm-icon { margin-top: 15px; } .pay-method-selector .pm-icon img { /* margin-top: 18px; */ } .pay-method-selector .pm-name { margin-top: 10px; } .pay-method-selector-one-line-text .pm-icon { margin-top: 30px; } } .stripe-checkout-button, .paypal-button { background-color: hsl(221, 70%, 28%); color: white; padding: 13px 0; border: 0; border-radius: 4px; font-size: 15px; font-weight: bold; width: 100%; cursor: pointer; } .stripe-checkout-button:hover, .paypal-button:hover { background-color: hsl(221, 70%, 32%); } @media only screen and (max-width: 1200px) { .stripe-checkout-button, .paypal-button { padding: 30px 0; border-radius: 10px; font-size: 25px; line-height: 40px; } } .rec-mobile { display: none; } @media only screen and (max-width: 1200px) { .rec-non-mobile { display: none; } .rec-mobile { display: inline; } } /* Group Payment */ .gp_info_error { color: hsla(0, 100%, 45%, 1); } .gp_info_ok { color: hsla(120, 70%, 40%, 1); } .gp_input a { font-size: 15px; color: gray; cursor: pointer; } .gp_table td { padding: 0px 10px; } /* ---------------- Subsites ---------------- */ section .content-wrapper table td, .section .content-wrapper table th { line-height: 50px; font-weight: 400; padding-right: 10px; } section .content-wrapper table td img { height: 13px; margin-right: 5px; } @media only screen and (max-width: 1200px) { section .content-wrapper table td, section .content-wrapper table th { float: left; width: 100%; line-height: 12vw; font-size: 5vw; } section .content-wrapper table td img { height: 4vw; margin-right: 3vw; } } .cheating_not_allowed { color: red; } .cheating_allowed { color: green; } .support-button { width: 250px; display: inline-block; text-align: left; } .support-button i { width: 20px; text-align: center; } @media only screen and (max-width: 1200px) { .support-button { /* width: 90%; */ font-size: 5vw; padding: 2vw 2vw; } .support-button i { width: 4vw; text-align: right; } } .support-content { max-height: 0px; transition: 0.5s max-height; overflow: hidden; } @media only screen and (max-width: 1200px) { .support-content { font-size: 4vw; } } .support-content a { cursor: pointer; } section .content-wrapper .partnerbox { text-align: center; } section .content-wrapper .partnerbox img { width: 200px; } @media only screen and (max-width: 1200px) {section .content-wrapper .partnerbox img { width: 60%; }} /* Addr */ #address_preview { background: #00000087; width: 530px; padding: 10px; margin: 10px; line-height: 19px; font-size: 16px; font-family: 'Courier New', Courier, monospace; } /* About */ .intext-img { height: 190px; display: inline-block; } @media only screen and (max-width: 1200px) { .intext-img { height: 20vw; } } /* Orga */ .orgaimg { float: left; width: 130px; filter: grayscale(1.0); margin-left: 50px; } .orgatext { display: inline-block; width: 650px; margin-left: 20px; } .orgatext img, .orgabox_small img { height: 12px; margin-left: 5px; } .orgarole { font-weight: 600; } .orgabox span { display: inline-block; font-size: 16px; color: #878787; font-style: italic; } .orgabox_small { margin-left: 50px; margin-bottom: 30px; } .orgaamb_wrapper { width: 850px; margin-left: 45px; } .orgaamb { filter: grayscale(1.0); width: 80px; margin: 5px; } @media only screen and (max-width: 1200px) { .orgaimg { width: 20%; margin: 0; } .orgatext { width: 74%; margin-left: 5%; font-size: 4vw; } .orgatext img, .orgabox_small img { margin-left: 1.4vw; height: 2.7vw; } .orgaamb_wrapper { width: 100%; margin: 0; } .orgaamb { width: 14%; margin: 1%; } } /* Index Elements */ .index-poster { width: 110px; margin: 0 15px; } @media only screen and (max-width: 1200px) { .index-poster { width: 40%; margin: 0 4%; margin-top: 6vw; } } .stats-box { font-size: 16px; text-align: center; color: #c3c3c3; margin: 80px 0; } .part-counter { font-size: 28px; font-weight: 400; margin-bottom: 10px; color: white; } @media only screen and (max-width: 1200px) { .stats-box { font-size: inherit; margin: 20vw 0; } .part-counter { font-size: 7vw; margin-bottom: 3vw; } } /* Prt */ .prt-wrapper { text-align: center; border-bottom: 1px solid var(--nd-glass-border); margin-bottom: 60px; min-height: 120px; padding-bottom: 40px; } .prt-text{ color: var(--nd-text-secondary); } .prt-logo { width: 120px; transition: opacity 0.3s ease; } .prt-logo:hover { opacity: 0.8; } @media only screen and (max-width: 1200px) { .prt-wrapper { text-align: center; border-bottom: 1px solid var(--nd-glass-border); margin-bottom: 5vw; } .prt-text{ float: none; text-align: center; margin-bottom: 5vw; margin-top: 5vw; } .prt-logo { width: 40%; margin-bottom: 5vw; } } /* OTHER UPDATED */ .inline-flag-address { height: 15px; } /* #localgroups .content-wrapper { text-align: center; } */ .image-wrapper { display: inline-block; width: 250px; text-align: center; } .image-wrapper img { height: 150px; } .image-wrapper small { color: grey; display: inline-block; font-size: 13px; } @media only screen and (max-width: 1200px) { .image-wrapper { width: 100%; } .image-wrapper img { height: auto; width: 40%; } .image-wrapper small { display: block; font-size: 3.5vw; margin-bottom: 5vw; } } /* Language Stuff */ /* Lanugage Screen */ .language_screen { position: fixed; top: 0; left: 0; z-index: 1000; background: var(--background-section-color); color: white; width: 80%; height: 100vh; overflow-y: scroll; padding: 10%; padding-top: 5%; font-size: 40px; font-weight: bold; /* display: none; */ } .language_screen img { width: 150px; } .language_screen span { display: block; margin-top: 30px; margin-bottom: 50px; font-weight: 400; font-size: 25px; color: hsl(0,0%,50%); } .language_screen .button { color: white; border: 2.5px solid white; margin: 20px; padding: 10px 20px; font-size: 30px; display: inline-block; box-shadow: 5px 5px 0 0 white; } .language_screen .button:hover { background: white; color: black; } .bottom_space { width: 100%; height: 30vw; } @media only screen and (max-width: 1200px) { .language_screen { font-size: 9vw; } .language_screen img { width: 35vw; margin-top: 8vw; } .language_screen span { font-size: 5vw; margin-top: 6vw; margin-bottom: 4vw; } .language_screen .button { border: 0.4vw solid white; display: block; padding: 3vw 0px; margin-bottom: 9vw; } .bottom_space { width: 100%; height: 40vw; } } = /* Language Selection */ .languages { background: black; color: hsl(0, 0%, 50%); font-weight: bold; font-size: 12px; padding: 7px; } .languages a { color: hsl(0, 0%, 70%); padding-left: 40px; } .languages a:hover { text-decoration: underline; } @media only screen and (max-width: 1200px) { .languages { display: none; } } /* Arabic (RTL) formatting */ html[dir="rtl"], html[lang="ar"] { direction: rtl; unicode-bidi: embed; } body[dir="rtl"], body[lang="ar"] { direction: rtl; text-align: right; unicode-bidi: embed; } /* Fix for submenu items */ html[dir="rtl"] .menu ul li ul li, html[lang="ar"] .menu ul li ul li { display: block; float: none; text-align: right; padding: 7px 15px; padding-left: 0px; /* Add more padding on the left side */ width: 80%; } html[dir="rtl"] .process-step-no, html[lang="ar"] .process-step-no { float: right; /* Process step numbers should float right in RTL */ } html[dir="rtl"] .process-step-content, html[lang="ar"] .process-step-content { margin-right: 50px; margin-left: 0; text-align: right; } html[dir="rtl"] .interface-title span, html[lang="ar"] .interface-title span { float: left; } html[dir="rtl"] .footer-column, html[lang="ar"] .footer-column { float: right; } html[dir="rtl"] #footer-footer span, html[lang="ar"] #footer-footer span { float: left; } html[dir="rtl"] .rules-check-span, html[lang="ar"] .rules-check-span { float: right; } html[dir="rtl"] .submission-form input[type='checkbox'], html[lang="ar"] .submission-form input[type='checkbox'] { float: right; } html[dir="rtl"] h4 i, html[lang="ar"] h4 i { padding-right: 0; padding-left: 4px; } @media only screen and (max-width: 1200px) { [dir="rtl"] .content-wrapper, html[lang="ar"] .content-wrapper { text-align: right !important; } [dir="rtl"] .menu ul .menu-bars, html[lang="ar"] .menu ul .menu-bars { float: left; } [dir="rtl"] .mobile-menu ul, html[lang="ar"] .mobile-menu ul { text-align: right; } } /* OTHER */ .financial-support-ambassadors-table { text-align: center; } .financial-support-ambassadors-table table { display: inline-block; text-align: center; /* border: 1px solid white; */ padding: 10px; } .financial-support-ambassadors-table table td { text-align: center; border-bottom: 1px dashed white; padding: 0 20px; margin: 5px; } @media only screen and (max-width: 1200px) { .financial-support-ambassadors-table { width: 90%; } } .ambassador_orgabox { margin-left: 190px; } .ambassador_orgabox .orgatext { width: 400px; } @media only screen and (max-width: 1200px) { .ambassador_orgabox { margin-left: auto; } .ambassador_orgabox .orgatext { width: 75%; } } .ambassador-info-h4 { margin-bottom: 10px; padding-bottom: 5px; border-bottom: 0.5px dotted grey; } .ambassador-title-h4 { border-bottom: 2px solid var(--nd-accent-primary); margin: 10px 0; padding-bottom: 5px; color: var(--nd-text-primary); } .ambassador-box { border-top: 1px solid var(--nd-glass-border); padding: 15px; border-radius: 8px; margin-top: 15px; padding-top: 0; background: var(--nd-glass-bg); } .ambassador-box .ambassador-title-h4 { margin-top: 0; padding-top: 0; } .ambassador-activities-element { font-size: 15px; /* color: #e8e8e8; */ } .ambassador-activities-date { font-weight: 400; } .ambassador-participant-details { font-size: 13px; color: grey; /* margin-left: 27px; */ } .ambassador-participant-details img { height: 12px; margin-right: 3px; } .ambassador-participant-details span { float: right; font-size: 16px; } .ambassador-participant-points { width: auto !important; float: right; font-weight: 100 !important; font-size: 14px; color: grey; } .ambassador-participant-certificates { padding: 0; margin: 0; } .ambassador-participant-certificates { width: auto !important; } @media only screen and (max-width: 1200px) { .ambassador-participant-details { font-size: 3.5vw; } .ambassador-participant-details i { font-size: 3.5vw !important; } .ambassador-participant-points { font-size: 3.4vw; } .ambassador-participant-certificates { width: auto !important; } } .logout-button { margin-top: 4px; } @media only screen and (max-width: 1200px) { .timer-content-mobile-NEU { padding: 0 !important; background: none !important; font-size: 8.5vw !important; line-height: 14vw; } .less-margin-mobile { margin-bottom: 0 !important; } } /* National Ambassadors */ .ambassador-national-picture img { width: 80px; float: left; /* filter: grayscale(100%); */ } .ambassador-national-box { margin-left: 95px; } .joined-date { font-size: 15px; color: #b8b8b8; } .ambassador-national-activities-seperator { border-top: 1px dashed grey; margin-top: 10px; padding-bottom: 10px; } .ambassador-national-activity { background: #00000096; padding: 5px 10px; font-size: 11px; border-radius: 8px; line-height: 15px; margin-bottom: 8px; } .ambassador-national-activity-date { display: inline; color: #b8b8b8; } .ambassador-national-emails { font-size: 12px; color: grey; line-height: 16px; text-align: left; border: 1px dotted grey; padding: 10px; border-radius: 5px; } .ambassadors-national-statistics-box { font-size: 40px; width: 30.5%; display: inline-block; border: 1px solid white; border-radius: 15px; text-align: center; padding: 30px 0; margin: 0 1%; margin-top: 30px; } .ambassadors-national-statistics-box small { font-size: 15px; display: block; margin-top: 15px; } .ambassadors-national-statistics-box small div { /* color: grey; */ color: #00a500; } @media only screen and (max-width: 1200px) { .ambassadors-national-statistics-box { width: 100%; } } .list-element-participant { display: inline-block; width: 96%; border: 1px solid var(--nd-glass-border); border-radius: 8px; background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .list-element-participant:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); border-color: var(--nd-accent-primary); } .teacher-list-element-name-wrapper { width: 47%; margin-right: 3%; float: left; line-break:anywhere; } .teacher-list-element-results-wrapper { width: 50%; /* float: left; */ display: inline-block; } .teacher-list-element-result-box { width: 33%; float: left; } .list-element-legend { padding: 0; margin: 0 !important; margin-top: 20px !important; line-height: 15px; background: transparent !important; } .teacher-list-element-result-box small { font-size: 13px; color: var(--nd-accent-primary); } .certificate_icon_in_table { color: var(--nd-accent-primary); } .teacher-list-element-result-box { font-size: 12px; } @media only screen and (max-width: 1200px) { .list-element-participant { width: 90%; } .teacher-list-element-name-wrapper { width: 100%; margin-right: 0%; margin-bottom: 4vw; } .teacher-list-element-results-wrapper { width: 100%; } .list-element-legend { line-height: 3.5vw; } .teacher-list-element-result-box small { font-size: 3.5vw; } .teacher-list-element-result-box { font-size: 3vw; } } .submission-form input[type='radio'] { width: 40px; box-shadow: none; } .student-entry { border: 1px solid var(--nd-glass-border); border-radius: 10px; padding: 30px; margin-bottom: 50px; background: var(--nd-glass-bg); transition: all 0.3s ease; } .student-entry:hover { border-color: rgba(214, 158, 46, 0.3); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } .student-entry h4 { margin-top: 0; color: var(--nd-text-primary); } .student-entry label { display: block; text-align: left; margin-top: 10px; font-size: 16px; color: var(--nd-text-secondary); } .small_input_block { width: 32.5%; /* float: left; */ display: inline-block; } .small_input_block select, .small_input_block input { margin: 0; padding: 3px 5px; width: 90%; font-size: 14px; } .small_input_block select { width: 95%; padding: 2px 5px; } .small_input_block label { font-size: 14px; } .add_student_bulk_button { background: var(--nd-gradient-gold); border: none; padding: 8px 20px; font-size: 15px; border-radius: 6px; cursor: pointer; color: #000; font-weight: 600; transition: all 0.3s ease; } .add_student_bulk_button:hover { box-shadow: 0 4px 15px rgba(214, 158, 46, 0.3); transform: translateY(-2px); } .add_student_bulk_button_csv { background: transparent; border: 1px solid var(--nd-accent-primary); padding: 8px 20px; font-size: 15px; border-radius: 6px; cursor: pointer; color: var(--nd-accent-primary); font-weight: 500; transition: all 0.3s ease; } .add_student_bulk_button_csv:hover { background: var(--nd-accent-primary); color: #000; } .csv_import_info { border-top: 1px dashed var(--nd-glass-border); padding-top: 15px; border-bottom: none !important; } .sudent_entry_success { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); } .student_entry_info_success { margin-top: 30px; color: #16a34a; font-weight: 600; font-size: 22px; } .sudent_entry_error { background: rgba(244, 67, 54, 0.1); border-color: rgba(244, 67, 54, 0.3); } .student_entry_info_error { margin-top: 30px; color: #c62828; font-weight: 600; font-size: 22px; } .confirmation_email_check { display: inline-block !important; float: none !important; /* width: 20px !important; */ } .prizes_table td { vertical-align: top; line-height: inherit !important; } .qualified_students_box { border: 1px solid var(--nd-glass-border); border-radius: 8px; padding: 20px; background: var(--nd-glass-bg); border-left: 4px solid var(--nd-accent-primary); } .direct-bank-info { display: inline-block; width: 140px; font-weight: 400; margin-left: 30px; } .final_round_table { border-collapse: collapse; border-radius: 8px; overflow: hidden; } .final_round_table td, .final_round_table th { padding: 12px 16px; border: 1px solid var(--nd-glass-border) !important; border-collapse: collapse; } .final_round_table th { background: var(--nd-glass-bg); font-weight: 600; font-family: var(--nd-font-heading); } .winner_table th, .winner_table td { vertical-align: top; line-height: 30px !important; } .winner_table td { padding-left: 10px; padding-bottom: 10px; } .winner_table td small { color: grey; } /* ---------------- SHOP STYLES ---------------- */ .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 20px; margin-right: 320px; } @media only screen and (max-width: 1200px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-right: 0; padding: 5vw; } } .product-card { background: hsla(0,0%,0%,0.75); border: 1px solid white; padding: 15px; border-radius: 5px; color: white; } .product-image { width: 100%; height: 400px; object-fit: cover; border-radius: 4px; } .product-title { font-weight: 400; margin: 10px 0; font-size: 18px; } .product-description { color: hsl(0,0%,80%); margin: 10px 0; } .variant-select, .quantity-input { width: 100%; margin: 10px 0; } .add-to-cart { width: 100%; margin-top: 10px; } .cart-overlay { position: fixed; top: 0; right: 0; width: 300px; height: 100vh; background: hsla(0,0%,0%,0.95); border-left: 2px solid white; z-index: 1000; padding: 20px; overflow-y: auto; color: white; } @media only screen and (max-width: 1200px) { .cart-overlay { width: 100vw; padding: 5vw; } } .cart-header { font-weight: 400; font-size: 20px; margin-bottom: 20px; text-align: center; border-bottom: 2px solid white; padding-bottom: 10px; } .cart-item { border-bottom: 1px solid hsl(0,0%,30%); padding: 15px 0; font-size: 14px; } .cart-item:last-child { border-bottom: none; } .cart-total { font-weight: 400; font-size: 20px; margin: 20px 0; text-align: center; } .checkout-btn { width: 100%; font-size: 16px; padding: 15px; } .quantity-input { width: 60px; text-align: center; display: inline-block; } .remove-item { margin-left: 10px; padding: 5px 10px; font-size: 12px; } .empty-cart { text-align: center; color: hsl(0,0%,60%); padding: 40px 0; } /* ---------------- ORDER CONFIRMATION STYLES ---------------- */ .order-success-icon { color: #4CAF50; font-size: 64px; margin-bottom: 20px; text-align: center; } .detail-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid hsl(0,0%,30%); align-items: flex-start; } @media only screen and (max-width: 1200px) { .detail-row { flex-direction: column; gap: 1vw; } } .detail-row:last-child { border-bottom: none; } .status-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; color: white; font-size: 12px; text-transform: uppercase; font-weight: 400; } @media only screen and (max-width: 1200px) { .status-badge { font-size: 3vw; padding: 1vw 3vw; } } .status-pending { background-color: #ff9800; } .status-in_production { background-color: #2196f3; } .status-fulfilled { background-color: #4caf50; } .status-cancelled { background-color: #f44336; } .order-line-item { background: hsla(0,0%,0%,0.4); padding: 15px; margin: 10px 0; border-radius: 5px; } .tracking-info { border-left: 4px solid #2196f3; } .next-steps { border-left: 4px solid #4caf50; } .next-steps ul { text-align: left; margin: 15px 0; padding-left: 20px; } @media only screen and (max-width: 1200px) { .next-steps ul { padding-left: 5vw; } } .next-steps li { margin-bottom: 10px; line-height: 1.5; } .school_submit_link_long { display: inline-block; max-width: 450px; line-height: 18px; word-break:break-all; /* background: red; */ } @media only screen and (max-width: 1200px) { .school_submit_link_long { width: 100%; display: block; word-break:break-all; } } .subscribe-index-box { font-size: 19px; /* text-shadow: 1px 1px 4px black; */ background: #00000052; /* border: 1px dashed #ffffffe3; */ /* border-radius: 8px; */ /* width: 35%; */ /* display: inline-block; */ padding: 30px; } .resource_link_box { border: 1px solid var(--nd-glass-border); border-radius: 8px; margin-bottom: 30px; padding: 20px 25px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--nd-accent-primary); transition: all 0.3s ease; } .resource_link_box:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } /* ============================================ MODERN BUTTON STYLES - NEW DESIGN ============================================ */ .competition-button, input[type='submit'], button.primary-button { position: relative; padding: 1rem 2.5rem; background: var(--nd-gradient-gold); color: #000; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; border: none; cursor: pointer; font-family: var(--nd-font-heading); font-size: 0.9rem; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(214, 158, 46, 0.3); display: inline-block; } .competition-button:hover, input[type='submit']:hover, button.primary-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(214, 158, 46, 0.4); background: linear-gradient(135deg, #E0A82E 0%, #C7891F 100%); } /* Neon button variant for dark backgrounds */ .neon-button { position: relative; padding: 1.2rem 3rem; background: transparent; color: var(--nd-accent-primary); text-decoration: none; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; border: 1px solid var(--nd-accent-primary); overflow: hidden; transition: all 0.3s; display: inline-block; font-family: var(--nd-font-heading); } .neon-button:hover { background: var(--nd-accent-primary); color: #000; box-shadow: 0 0 30px var(--nd-accent-primary); } .neon-button.secondary { color: #fff; border-color: #fff; } .neon-button.secondary:hover { background: #fff; color: #000; box-shadow: 0 0 30px #fff; } .neon-button.small { padding: 0.8rem 2rem; font-size: 0.85rem; } .neon-button span { position: relative; z-index: 1; } .neon-button i { margin-right: 0.5rem; } /* Link styling for modern design */ .content-wrapper a, section p a { color: var(--nd-accent-primary); font-weight: 500; transition: all 0.2s ease; position: relative; text-decoration: none; border-bottom: 1px solid rgba(214, 158, 46, 0.3); padding-bottom: 2px; } .content-wrapper a:hover, section p a:hover { color: var(--nd-accent-secondary); border-bottom-color: var(--nd-accent-secondary); padding-bottom: 4px; } /* Card link styling */ .card-link { color: var(--nd-accent-primary); font-weight: 600; text-decoration: none; transition: color 0.3s; display: inline-block; margin-top: 1rem; } .card-link:hover { color: var(--nd-accent-secondary); } .card-link i { margin-left: 0.5rem; transition: transform 0.3s; } .card-link:hover i { transform: translateX(5px); } /* ============================================ MODERN CARD STYLES - NEW DESIGN ============================================ */ /* Glass panel effect */ .glass-panel { background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); border: 1px solid var(--nd-glass-border); padding: 2.5rem; border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .glass-panel:hover { transform: translateY(-5px); box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12); border-color: var(--nd-accent-primary); } /* Modern info boxes */ .info-box-modern { background: var(--nd-glass-bg); border: 1px solid var(--nd-glass-border); border-radius: 8px; padding: 1.5rem; margin: 1.5rem 0; border-left: 4px solid var(--nd-accent-primary); } .info-box-modern.warning { border-left-color: #ff9800; background: rgba(255, 152, 0, 0.05); } .info-box-modern.success { border-left-color: #4caf50; background: rgba(76, 175, 80, 0.05); } .info-box-modern.error { border-left-color: #f44336; background: rgba(244, 67, 54, 0.05); } /* ============================================ FORM STYLING - NEW DESIGN ============================================ */ input[type='text'], input[type='email'], input[type='password'], input[type='file'], select, textarea { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--nd-glass-border); background: var(--nd-bg-light); color: var(--nd-text-primary); font-family: var(--nd-font-body); font-size: 1rem; border-radius: 4px; transition: all 0.3s ease; box-sizing: border-box; } input[type='text']:focus, input[type='email']:focus, input[type='password']:focus, select:focus, textarea:focus { outline: none; border-color: var(--nd-accent-primary); box-shadow: 0 0 0 3px rgba(214, 158, 46, 0.1); } /* Modern submission form styling */ .submission-form { background: var(--nd-bg-light); border: 1px solid var(--nd-glass-border); border-radius: 8px; padding: 50px; width: 700px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); } @media only screen and (max-width: 1200px) { .submission-form { width: 90%; padding: 5%; } } .submission-form h3 { font-family: var(--nd-font-heading); font-size: 1.2rem; font-weight: 600; margin: 20px 0; color: var(--nd-text-primary); } .submission-form h4 { font-family: var(--nd-font-heading); margin-top: 15px; margin-bottom: 10px; font-size: 1.1rem; color: var(--nd-text-primary); } .submission-form p { border-left: 2px solid var(--nd-accent-primary); padding: 10px 15px; font-size: 0.9rem; background: var(--nd-glass-bg); color: var(--nd-text-secondary); margin-bottom: 20px; line-height: 1.6; border-radius: 0 4px 4px 0; } /* ============================================ STATUS BADGES - NEW DESIGN ============================================ */ .status-badge { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 5px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .status-badge.open { background: rgba(34, 197, 94, 0.1); color: #16a34a; border: 1px solid rgba(34, 197, 94, 0.3); } .status-badge.locked { background: rgba(0, 0, 0, 0.05); color: var(--nd-text-secondary); border: 1px solid rgba(0, 0, 0, 0.1); } .status-positive { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #16a34a; font-size: 15px; line-height: 1.55; padding: 10px 15px; border-radius: 4px; border-left: 4px solid #16a34a; } .status-yellow-bg { background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); color: #f57c00; font-size: 15px; line-height: 1.55; padding: 10px 15px; border-radius: 4px; border-left: 4px solid #f57c00; } .status-red-bg { background: rgba(244, 67, 54, 0.1); border: 1px solid rgba(244, 67, 54, 0.3); color: #c62828; font-size: 15px; line-height: 1.55; padding: 10px 15px; border-radius: 4px; border-left: 4px solid #c62828; } /* ============================================ AWARD TABLE - PAPER AND INK ============================================ */ .award-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 2rem 0; background: var(--paper-2); border-radius: 10px; overflow: hidden; box-shadow: 0 18px 36px -28px rgba(26, 27, 30, 0.28); border: 1px solid var(--line-strong); } .award-table tr:hover { background: rgba(26, 27, 30, 0.018); } .award-table td { padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.5; } .award-table tr:last-child td { border-bottom: none; } /* The label column is neutral. Blue is reserved for small accents elsewhere. */ .award-table td:first-child { width: 34%; min-width: 190px; white-space: nowrap; background: rgba(26, 27, 30, 0.025); border-right: 1px solid var(--line); color: var(--ink); font-family: 'Schibsted Grotesk', 'Inter', sans-serif; font-weight: 640; } .award-table td:last-child { color: var(--ink-dim); font-weight: 400; } .award-table .award-group-start td { border-top: 2px solid var(--line-strong); } @media only screen and (max-width: 720px) { .award-table td { padding: 0.8rem 1rem; font-size: 0.95rem; display: block; width: 100%; box-sizing: border-box; } .award-table td:first-child { min-width: 0; border-right: none; border-bottom: none; background: rgba(26, 27, 30, 0.025); padding-bottom: 0.35rem; } .award-table td:last-child { padding-top: 0.35rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); } .award-table tr:last-child td:last-child { border-bottom: none; } } /* ============================================ PARAGRAPH H4 HEADERS - DISTINCT STYLING ============================================ */ /* h4 inside paragraphs - section headers */ p h4, .content-wrapper p h4 { display: flex; align-items: center; gap: 0.75rem; font-family: var(--nd-font-heading); font-size: 1.4rem; font-weight: 700; color: var(--nd-text-primary); margin: 0 0 1rem 0; padding-bottom: 0.75rem; border-bottom: 2px solid transparent; background: linear-gradient(90deg, var(--nd-accent-primary) 0%, var(--nd-accent-primary) 100%) left bottom no-repeat; background-size: 60px 2px; position: relative; } p h4::before, .content-wrapper p h4::before { content: ''; display: inline-block; width: 4px; height: 1.4rem; background: var(--nd-gradient-gold); border-radius: 2px; flex-shrink: 0; } p h4 i, .content-wrapper p h4 i { color: var(--nd-accent-primary); font-size: 1.2rem; width: auto; margin-right: 0; padding-right: 0; } /* Hover effect for interactivity */ p h4:hover, .content-wrapper p h4:hover { background-size: 100% 2px; transition: background-size 0.4s ease; } @media only screen and (max-width: 1200px) { p h4, .content-wrapper p h4 { font-size: 5.5vw; gap: 2vw; padding-bottom: 2vw; margin-bottom: 3vw; } p h4::before, .content-wrapper p h4::before { width: 1vw; height: 5vw; } p h4 i, .content-wrapper p h4 i { font-size: 5vw; } } /* ============================================ RESPONSIVE ADJUSTMENTS ============================================ */ @media (max-width: 768px) { .section-title { font-size: 2rem; } .section-subtitle { font-size: 1rem; } .competition-button, .neon-button { padding: 0.8rem 1.5rem; font-size: 0.8rem; } .glass-panel { padding: 1.5rem; } } .info_title { display: block; background: #d7a1362e; border-radius: 8px; padding: 3px 13px; margin-bottom: 5px; } .competition-button i { color: black !important; } /* ================================================================= IMLC PAPER-AND-INK OVERRIDES (appended last so these win) Re-themes older page-content components to match index_style.css. ================================================================= */ /* Page body uses the same paper, ink and type as the homepage. */ html, body { font-family: 'Inter', sans-serif; color: var(--bp-dark); } body { background: var(--bp-paper); } /* Content-page sections: light paper + top padding to clear the fixed nav. Scoped to UNCLASSED sections only: the ported content pages use bare

tags; any page that designs its own sections (index.php's alternating bg-white/transparent bands) uses classed sections and must not be repainted. (The old :not(.hero-section):not(...) list had specificity (0,7,1) and crushed the homepage's .bg-white utility.) */ section:not([class]) { background: var(--bp-paper); color: var(--bp-dark); padding: 8rem 0 5rem; } .section-transparent { background: transparent; padding-top: 8rem; } /* Headings use the homepage display face. */ h1, h2, h3, h4, h5 { font-family: 'Schibsted Grotesk', 'Inter', sans-serif; color: var(--bp-dark); } h2 { text-transform: none; letter-spacing: -0.022em; } .content-wrapper h4, h4 { font-family: var(--bp-mono); color: var(--bp-dark); } /* Content links -> blue-ink underline. */ .content-wrapper a { color: var(--bp-blue); border-bottom: 1px solid rgba(0, 68, 204, 0.35); } .content-wrapper a:hover { color: var(--bp-blue); border-bottom: 1px solid var(--bp-blue); } /* Section divider -> blueprint accent tick. */ /* Title accent bar under centered

s. A single short blue-ink tick, centered. Kills the old ichc decoration (a grey line + an orange SVG squiggle rendered via ::before / ::after) that was doubling up. / .horizontal-bar-inline { display: inline-block; / centered by the .center-wrapper's text-align:center / vertical-align: middle; width: 64px; height: 3px; background: var(--bp-blue); border: 0; border-radius: 0; margin: 1.25rem auto 2.5rem; overflow: visible; } .horizontal-bar-inline::before, .horizontal-bar-inline::after { content: none !important; display: none !important; background: none !important; } / When it sits inside a left-aligned form (not a centered header), keep it left-aligned instead of centered. / form .horizontal-bar-inline, .submission-form .horizontal-bar-inline { margin-left: 0; transform: none; } / Primary buttons / submits -> homepage "ghost" button (see .btn-ghost in index_style.css, used by the "Bring IMLC to your classroom" section), but with a WHITE fill so it lifts off the beige paper as a small card. Ink label, hairline border, subtle shadow; hover darkens the border and lifts slightly. Note: buttons are often inside .content-wrapper, so the ".content-wrapper a" link rule would otherwise repaint/underline the label. The .content-wrapper qualifier + a:link/visited here beat that. / .competition-button, .content-wrapper a.competition-button, .content-wrapper a.competition-button:link, .content-wrapper a.competition-button:visited, input[type='submit'], button.primary-button, .submit-login, .checkout-btn { background: #fff; color: var(--bp-dark); font-family: var(--bp-mono); font-weight: 500; text-transform: none; letter-spacing: 0.02em; border: 1px solid #d6d1c4; / line-strong hairline (also cancels link underline border) / border-radius: 6px; box-shadow: 0 1px 2px rgba(26, 27, 30, 0.06); / Center the label as one line. The generic ".content-wrapper a" rule forces padding-bottom:2px (underline links), which pushed the text to the bottom. Restore even padding and vertically center the contents. / display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.85rem 1.6rem; margin: 0.5rem 0; / own vertical breathing room, independent of inline
/ transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .content-wrapper a.competition-button:hover, .competition-button:hover, input[type='submit']:hover, button.primary-button:hover, .submit-login:hover, .checkout-btn:hover { color: var(--bp-dark); background: #fff; border-color: var(--bp-dark); box-shadow: 0 4px 12px rgba(26, 27, 30, 0.10); transform: translateY(-1px); } .competition-button i { color: var(--bp-dark) !important; / override the trailing rule that forced black/white / } / Centered blocks inside content (buttons, sub-titles) get even vertical room so spacing no longer depends on ad-hoc
tags in the page markup. / .content-wrapper .center-wrapper { margin: 2rem 0; } / The centered
section title + its accent tick sit as one header block. / .content-wrapper .center-wrapper h2 { margin-top: 1rem; } / "gold" emphasis text used across info pages -> blue-ink. / .gold, b.gold, .deadline-color { color: var(--bp-blue); } / Login / form boxes -> blueprint card. / .login-box, .info-box-modern, .interface-box, .glass-panel { background: #fff; border: 1px solid var(--bp-grid); border-radius: 0; } / Inputs across pages -> blueprint field. / .content-wrapper input[type='text'], .content-wrapper input[type='email'], .content-wrapper input[type='password'], .content-wrapper select, .content-wrapper textarea, .login-box input { border: 1px solid var(--bp-grid); border-radius: 0; font-family: 'Jost', sans-serif; } .content-wrapper input:focus, .login-box input:focus, .content-wrapper select:focus, .content-wrapper textarea:focus { outline: none; border-color: var(--bp-blue); box-shadow: 0 0 0 2px rgba(0, 68, 204, 0.12); } / Tables use the same quiet borders as homepage cards. / .award-table, .gp_table, table.final_round_table { border-color: var(--bp-grid); } / Error / status banners keep semantics but in blueprint palette. / .error-message { border: 1px solid var(--bp-alert); border-left: 4px solid var(--bp-alert); background: #fff5f3; color: var(--bp-dark); } / Login page logo bar -> centered near the top. Tailwind's preflight makes img display:block, so center via margin, not text-align alone. / .login-menu { text-align: center; padding: 2rem 0 0; } .login-menu img { height: 56px; width: auto; margin: 0 auto; } @media only screen and (max-width: 1200px) { .login-menu { padding: 1.5rem 0 0; } .login-menu img { height: 46px; } } / Logo-only pages (login, verify, status, ...) have no fixed nav: the login-menu bar sits in normal flow above the section, so the section needs far less top clearance than the nav pages' 8rem. The bottom padding is what keeps the card off the footer. / .login-menu ~ section.section-transparent { padding-top: 3rem; padding-bottom: 7rem; } @media only screen and (max-width: 1200px) {.login-menu ~ section.section-transparent { padding-top: 2rem; padding-bottom: 4rem; }} / The basic footer was position:fixed, so it floated over the page bottom instead of ending it. Normal flow, so the section padding above is a real gap on every logo-only page. / .login-footer { position: static; } / Login card: was a 530px-wide block with 16px body text and a 32px heading, which read as an oversized overlay. Tighter card, smaller type. / .login-box { width: 380px; max-width: 100%; padding: 2.25rem 2rem; font-size: 0.95rem; line-height: 1.6; box-shadow: 0 1px 2px rgba(26, 27, 30, 0.06); } .login-box h3 { font-size: 1.35rem; margin-bottom: 1.75rem; letter-spacing: -0.01em; } / Field labels are bare text nodes in the form, so they inherit the card size. Quiet them down and unify the control widths (they were 91.5% / 98% / 60%, so nothing lined up). / .login-box form { font-size: 0.85rem; color: var(--ink-dim, #55565c); } .login-box input, .login-box select { width: 100%; margin-top: 0.35rem; margin-bottom: 1.1rem; font-size: 0.95rem; } .login-box input[type='submit'], .login-box .competition-button { width: 100%; margin: 0.5rem 0 0; } .login-box span { display: block; font-size: 0.8rem; margin-bottom: 0; } / Tighten the OR-divider -> registration button gap. The markup stacks a .center-wrapper (OR row) +

+ .center-wrapper (button), so the 2rem center-wrapper margins and the two
s added up to a big void. / .login-box .center-wrapper { margin: 0.75rem 0; } .login-box br { line-height: 0.5; } @media only screen and (max-width: 1200px) { .login-box { width: 100%; padding: 1.75rem 1.5rem; font-size: 0.95rem; line-height: 1.6; margin: 0; } .login-box h3 { font-size: 1.25rem; } .login-box input, .login-box select { font-size: 1rem; } .login-box span { font-size: 0.85rem; } } / ================================================================= Content-wrapper typography: give info pages real structure, spacing and hierarchy (the ichc default was a cramped, justified wall of tiny bullets). Blueprint look, generous rhythm. ================================================================= / .content-wrapper { text-align: left; font-size: 1.02rem; line-height: 1.7; color: var(--bp-dark); } / Section sub-heading (h4) becomes a clear labelled break. Extra space above so each subsection opens with clear separation from the block before it. / .content-wrapper h4 { font-family: var(--bp-mono); font-size: 1.05rem; color: var(--bp-dark); margin: 3.25rem 0 1.1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--bp-grid); letter-spacing: 0.3px; } .content-wrapper h4 i { color: var(--bp-blue); margin-right: 0.5rem; } / h2 section titles: reset the old inline ::before/::after and space them. / .content-wrapper h2 { font-size: 2.2rem; line-height: 1.15; margin: 0 0 0.25rem; } / Paragraph rhythm (ichc used a huge 55px bottom margin; calm it down). / .content-wrapper p, section .content-wrapper p { margin: 0 0 1.4rem; } / Lists: spacing, indent, and readable markers. / .content-wrapper ul, .content-wrapper ol { margin: 0.5rem 0 1.4rem; padding-left: 1.5rem; } .content-wrapper li { margin-bottom: 0.55rem; line-height: 1.6; } .content-wrapper ul > li { list-style: none; position: relative; padding-left: 1.1rem; } .content-wrapper ul > li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--bp-blue); border-radius: 0; / square blueprint marker / } .content-wrapper ol > li { margin-bottom: 0.7rem; } / Nested lists: indent, lighter marker, tighter top gap. / .content-wrapper ul ul, .content-wrapper ol ul { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; } .content-wrapper ul ul > li::before { background: var(--bp-light); width: 5px; height: 5px; } / A top-level
that introduces a sub-list (the six domains): treat its bold lead-in as a mini-heading and give the block breathing room. / .content-wrapper > ul > li, .content-wrapper p > ul > li { margin-bottom: 1.1rem; } .content-wrapper li > b:first-child, .content-wrapper li > strong:first-child { color: var(--bp-dark); } / Numbered prep-tips list: bold lead-ins already; add separation. / .content-wrapper ol.ol_bold > li { margin-bottom: 1.1rem; } .content-wrapper ol.ol_bold > li strong, .content-wrapper ol.ol_bold > li b { color: var(--bp-blue); font-family: var(--bp-mono); font-weight: 700; } / The subsection intro line under a title. / .content-wrapper .subsection { color: var(--bp-light); font-size: 1.05rem; } / MathJax inline formulas shouldn't crowd the text. / .content-wrapper mjx-container { margin: 0 0.15rem; } / Simple content tables use readable spacing. Award tables have a card style. / .content-wrapper table:not(.award-table) { border-collapse: collapse; margin: 0.5rem 0 1.25rem; width: 100%; } .content-wrapper table:not(.award-table) td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--bp-grid); vertical-align: top; } @media only screen and (max-width: 1200px) { .content-wrapper { font-size: 1rem; line-height: 1.65; } } / ============================================================ Support / FAQ page (blueprint design) ============================================================ / .faq-page { padding: 9rem 0 5rem; } / Intro subtitle under the page heading: muted, constrained, with breathing room before the search box below it. / .section-sub { color: var(--light-ink); max-width: 720px; margin: 0.75rem 0 2.75rem; font-size: 1.05rem; line-height: 1.6; } .section-sub a { color: var(--blue-ink); } .faq-toolbar { max-width: 760px; margin: 0 auto 2rem; } .faq-search { position: relative; } .faq-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--light-ink); pointer-events: none; } .faq-search input { width: 100%; box-sizing: border-box; padding: 0.9rem 1rem 0.9rem 2.7rem; font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 1px; color: var(--dark-ink); background: #fff; border: 2px solid var(--dark-ink); outline: none; } .faq-search input:focus { border-color: var(--blue-ink); box-shadow: 6px 6px 0 rgba(0, 68, 204, 0.08); } .faq-search input::placeholder { color: var(--light-ink); } .faq-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; max-width: 900px; margin: 0 auto 3rem; } .faq-tag { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--light-ink); background: #fff; border: 1px solid var(--grid-line); padding: 0.45rem 0.9rem; cursor: pointer; text-decoration: none; } .faq-tag i { margin-right: 0.45rem; color: var(--blue-ink); } .faq-tag:hover { border-color: var(--blue-ink); color: var(--blue-ink); } .faq-panel { position: relative; background: #fff; border: 2px solid var(--dark-ink); box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.05); max-width: 900px; margin: 0 auto 2.2rem; scroll-margin-top: 110px; } .faq-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--dark-ink); color: #fff; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; padding: 0.75rem 1.2rem; cursor: pointer; user-select: none; } .faq-head-right { display: flex; align-items: center; gap: 0.8rem; white-space: nowrap; } .faq-count { color: rgba(255, 255, 255, 0.55); } .faq-caret { transition: transform 0.25s; font-size: 0.8rem; } .faq-panel.collapsed .faq-panel-body { display: none; } .faq-panel.collapsed .faq-caret { transform: rotate(-90deg); } .faq-item { border-top: 1px solid var(--grid-line); } .faq-item:first-child { border-top: none; } .faq-q { display: flex; width: 100%; align-items: baseline; gap: 0.8rem; text-align: left; padding: 0.95rem 1.2rem; background: none; border: none; cursor: pointer; font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: var(--dark-ink); } .faq-q:hover { color: var(--blue-ink); } .faq-marker { font-family: var(--font-mono); color: var(--blue-ink); flex: 0 0 auto; display: inline-block; transition: transform 0.2s; } .faq-item.open .faq-q { color: var(--blue-ink); } .faq-item.open .faq-marker { transform: rotate(45deg); } .faq-a { display: none; padding: 0 1.2rem 1.2rem 3rem; color: var(--dark-ink); line-height: 1.65; } .faq-item.open .faq-a { display: block; } .faq-a a { color: var(--blue-ink); text-decoration: underline; } .faq-a ul, .faq-a ol { margin: 0.6rem 0 0.6rem 1.4rem; } .faq-noresults { display: none; text-align: center; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 1px; color: var(--light-ink); margin: 0 0 2rem; } .faq-noresults a { color: var(--blue-ink); } .faq-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 1.2rem; } .faq-doc { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; border: 1px solid var(--grid-line); background: #fafbfc; font-family: var(--font-mono); font-size: 0.85rem; color: var(--dark-ink); text-decoration: none; } .faq-doc i { color: var(--blue-ink); } .faq-doc:hover { border-color: var(--blue-ink); color: var(--blue-ink); } .faq-contact-body { padding: 1.5rem 1.2rem; text-align: center; } .faq-contact-body .faq-mail { font-family: var(--font-mono); font-size: 1.05rem; color: var(--blue-ink); margin-top: 0.6rem; } @media only screen and (max-width: 768px) { .faq-page { padding-top: 7rem; } .faq-docs { grid-template-columns: 1fr; } .faq-a { padding-left: 1.2rem; } } / ============================================================ Home page compact FAQ (#faq) — questions hidden until a category chip is clicked or a search matches ============================================================ / .home-faq-section { padding: 6rem 0; background: var(--paper-bg); } .home-faq-search { position: relative; max-width: 620px; margin: 0 auto 1.8rem; } .home-faq-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--light-ink); pointer-events: none; } .home-faq-search input { width: 100%; box-sizing: border-box; padding: 0.85rem 1rem 0.85rem 2.6rem; font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 1px; color: var(--dark-ink); background: #fff; border: 2px solid var(--dark-ink); outline: none; } .home-faq-search input:focus { border-color: var(--blue-ink); box-shadow: 6px 6px 0 rgba(0, 68, 204, 0.08); } .home-faq-search input::placeholder { color: var(--light-ink); } .home-faq-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; max-width: 900px; margin: 0 auto; } .home-faq-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--light-ink); background: #fff; border: 1px solid var(--grid-line); padding: 0.45rem 0.85rem; cursor: pointer; } .home-faq-tag i { color: var(--blue-ink); } .home-faq-tag:hover { border-color: var(--blue-ink); color: var(--blue-ink); } .home-faq-tag.active { background: var(--dark-ink); color: #fff; border-color: var(--dark-ink); } .home-faq-tag.active i { color: #fff; } .home-faq-tag-count { font-size: 0.7rem; color: var(--light-ink); border-left: 1px solid var(--grid-line); padding-left: 0.5rem; } .home-faq-tag.active .home-faq-tag-count { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.25); } .home-faq-noresults { display: none; text-align: center; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.5px; color: var(--light-ink); margin: 1.5rem auto 0; } .home-faq-noresults a { color: var(--blue-ink); } .home-faq-lists { max-width: 820px; margin: 0 auto; } / Categories are hidden by default; shown when their chip is active or a search matches. */ .home-faq-cat { display: none; margin-top: 1.5rem; border: 1px solid var(--grid-line); background: #fff; } .home-faq-cat.shown { display: block; } .home-faq-item { border-top: 1px solid var(--grid-line); } .home-faq-item:first-child { border-top: none; } .home-faq-q { display: flex; width: 100%; align-items: baseline; gap: 0.75rem; text-align: left; padding: 0.85rem 1.1rem; background: none; border: none; cursor: pointer; font-family: var(--font-heading); font-weight: 500; font-size: 0.98rem; color: var(--dark-ink); } .home-faq-q:hover { color: var(--blue-ink); } .home-faq-marker { font-family: var(--font-mono); color: var(--blue-ink); flex: 0 0 auto; transition: transform 0.2s; } .home-faq-item.open .home-faq-q { color: var(--blue-ink); } .home-faq-item.open .home-faq-marker { transform: rotate(45deg); } .home-faq-a { display: none; padding: 0 1.1rem 1.1rem 2.75rem; color: var(--dark-ink); line-height: 1.65; } .home-faq-item.open .home-faq-a { display: block; } .home-faq-a a { color: var(--blue-ink); text-decoration: underline; } .home-faq-a ul, .home-faq-a ol { margin: 0.6rem 0 0.6rem 1.4rem; } .home-faq-more { text-align: center; margin-top: 2.2rem; } @media only screen and (max-width: 768px) { .home-faq-section { padding: 4rem 0; } .home-faq-a { padding-left: 1.1rem; } }