/* Dublin College Brand Styles Typekit (add this to your HTML ): */ /* =============================== GLOBAL COLOURS & TYPOGRAPHY =============================== */ :root { --dc-blue: #0000FF; --dc-white: #FFFFFF; --dc-black: #000000; --dc-blue-rgb: 0, 0, 255; /* for rgba() */ } body { margin: 0; padding: 0; position: relative; background-color: var(--dc-blue); font-family: 'aptos', sans-serif !important; font-size: 14px; line-height: 1.5; color: var(--dc-black); min-height: 100vh; } body::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 0, 255, 0.9), rgba(0, 0, 255, 0.9)), /* top layer: semi-transparent blue */ url('../images/body-bg.png'); background-size: cover; background-attachment: fixed; z-index: -1; pointer-events: none; } /* =============================== TYPOGRAPHY =============================== */ h1, h2, h3, h4, h5, h6 { font-family: 'mokoko', sans-serif !important; font-weight: 700; text-transform: uppercase; color: var(--dc-blue); } p, li, span, label, input, textarea, select { font-family: 'aptos', sans-serif !important; font-weight: 400; color: var(--dc-black); } /* =============================== FORMS & COMPONENTS =============================== */ .formbody { background-color: var(--dc-white); border-radius: 0 0.7rem 0.7rem 0; border-left: none; box-shadow: 0 4px 8px rgba(0,0,0,0.2); transition: 0.3s; padding: 2rem; max-width: 600px; margin: 2rem auto; } .CheckBoxText label { padding-left: 1% !important; } .checkbox { margin-left: 2% !important; background-color: transparent !important; } .checkbox label { display: inline-block !important; vertical-align: middle !important; position: relative !important; padding-left: 1% !important; padding-bottom: 1% !important; } .checkbox label::before { content: ""; display: inline-block !important; position: absolute !important; width: 17px !important; height: 17px !important; left: 0 !important; margin-left: -20px !important; border: 1px solid var(--dc-black) !important; background-color: var(--dc-white) !important; transition: border 0.15s ease-in-out, color 0.15s ease-in-out !important; } .checkbox input[type="checkbox"] { opacity: 0 !important; z-index: 1 !important; } .checkbox-primary input[type="checkbox"]:checked + label::before { background-color: var(--dc-blue) !important; border-color: var(--dc-blue) !important; } .checkbox-primary input[type="checkbox"]:checked + label::after { color: var(--dc-white) !important; } /* =============================== BUTTONS (DUBLIN COLLEGE STYLE) =============================== */ .btnCss { display: inline-block; font-family: 'mokoko', sans-serif !important; font-weight: 600; text-transform: uppercase; text-align: center; padding: 0.75rem 1.5rem; border-radius: 4px; border: 2px solid var(--dc-blue); background-color: var(--dc-blue); color: var(--dc-white); cursor: pointer; transition: all 0.3s ease-in-out; } .btnCss:hover { background-color: var(--dc-white); color: var(--dc-blue); border-color: var(--dc-blue); box-shadow: inset 200px 0 0 0 var(--dc-white); } /* Alternate Button Variants */ .btn-black { background-color: var(--dc-black); border-color: var(--dc-black); color: var(--dc-white); } .btn-black:hover { background-color: var(--dc-white); color: var(--dc-black); } .btn-white { background-color: var(--dc-white); border-color: var(--dc-blue); color: var(--dc-blue); } .btn-white:hover { background-color: var(--dc-blue); color: var(--dc-white); } /* =============================== MISC STYLES =============================== */ .card { box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); border-radius: 8px; background-color: var(--dc-white); padding: .02rem; } .activeCSS { background-color: var(--dc-blue) !important; color: var(--dc-white) !important; } .dropify-wrapper { height: 120px !important; } .dropify-message p { font-size: .2em; } .fa-asterisk { font-size: 9px; color: red; vertical-align: super; } /* =============================== RESPONSIVE DESIGN =============================== */ /* For small tablets and large phones */ @media (max-width: 768px) { body { font-size: 13px; } .formbody { max-width: 90%; margin: 1.5rem auto; padding: 1.5rem; border-radius: 0.5rem; } h1, h2, h3 { font-size: 1.5rem; text-align: center; } .btnCss { width: 100%; padding: 0.75rem; font-size: 0.9rem; } .checkbox { margin-left: 0 !important; } } /* For mobile phones */ @media (max-width: 480px) { body { background-color: var(--dc-white); /* White background on mobile */ background-image: none; color: var(--dc-black); } h1, h2, h3 { font-size: 1.25rem; color: var(--dc-blue); } p, label, input, textarea, select { font-size: 0.9rem; color: var(--dc-black); } .formbody { padding: 1rem; background-color: var(--dc-white); box-shadow: none !important; /* Remove shadows */ border-radius: 0; } .card { padding: 0.75rem; background-color: var(--dc-white); box-shadow: none !important; /* 👈 Remove shadows on mobile */ } .btnCss { font-size: 0.85rem; padding: 0.65rem; border-radius: 6px; } .dropify-wrapper { height: 100px !important; } body::before { display: none; /* Hide background overlay image */ } } /* =============================== LOGO RESPONSIVENESS =============================== */ /* Default logo styling (optional, for consistency) */ .auth-brand img { height: 90px; width: auto; max-width: 100%; } /* For tablets */ @media (max-width: 768px) { .auth-brand img { height: 80px; /* Slightly smaller on tablets */ } } /* For mobile phones */ @media (max-width: 480px) { .auth-brand img { height: 70px; /* Smaller logo on mobile */ } }