/* ============================================================================ DVH Member Surface CSS Loaded via on DVH member pages only. Plain CSS only — all @apply converted to plain CSS. ============================================================================ */ @import "./member-shared.css"; /* ─── DVH Brand Vars ─── */ :root { --color-primary: #003478; --color-secondary: #000000; --color-tertiary: #1D4ED8; --color-accent: #f9f9f9; --dvh-main-button-color: var(--color-primary); --dvh-secondary-button-color: var(--color-tertiary); --dvh-main-text-color: var(--color-secondary); --dvh-background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent) 100%); --dvh-accent-surface: color-mix(in srgb, var(--color-tertiary) 12%, white); --dvh-accent-shadow: color-mix(in srgb, var(--color-tertiary) 50%, transparent); } /* ============================================================================ From styles.css (was orphaned — never imported) ============================================================================ */ /* ─── Title utilities (converted from @apply) ─── */ .title-lg { margin-top: 0; font-weight: 600; font-size: 1.875rem; line-height: 2.5rem; } @media (min-width: 640px) { .title-lg { font-size: 3rem; line-height: 1; } } .title-sm { font-size: 1.25rem; font-weight: 700; } @media (min-width: 640px) { .title-sm { font-size: 1.5rem; } } @media (min-width: 768px) { .title-sm { font-size: 1.875rem; } } /* ─── DVH Buttons & Cards ─── */ .bg-dvh { border-radius: 5px; border: 1px solid var(--dvh-secondary-button-color); background: var(--dvh-main-button-color); box-shadow: 1.219px -1.219px 1.219px 0px rgba(165, 165, 165, 0.32) inset, -1.219px 1.219px 1.219px 0px rgba(255, 255, 255, 0.32) inset; backdrop-filter: blur(2.804421901702881px); color: white !important; } .dvh-outline { border-radius: 5px; border: 0.907px solid var(--dvh-main-button-color); background: var(--dvh-background); box-shadow: 0px 0px 3.628px 0px rgba(0, 0, 0, 0.25); padding: 10px 20px; font-family: var(--font-poppins, 'Poppins', sans-serif); font-size: 12px; color: var(--dvh-main-text-color); text-align: center; font-weight: 500; font-style: normal; line-height: normal; } .dvh-tertiary { border-radius: 5px; background: var(--dvh-accent-surface); box-shadow: 0px 0px 1px 0px var(--dvh-accent-shadow) inset; color: var(--color-tertiary); text-align: center; } .dvh-card { border-radius: 5px; background: var(--dvh-background); box-shadow: 0px 0px 8px 0px rgba(130, 130, 130, 0.32); } .dvh-cta { border-radius: 5px; background: var(--dvh-main-button-color); box-shadow: 1.219px -1.219px 1.219px 0px rgba(165, 165, 165, 0.32) inset, -1.219px 1.219px 1.219px 0px rgba(255, 255, 255, 0.32) inset; backdrop-filter: blur(2.804421901702881px); color: white; padding: 10px 20px; font-family: var(--font-poppins, 'Poppins', sans-serif); font-size: 12px; font-style: normal; font-weight: 500; line-height: normal; } .dvh-cta-only { font-family: var(--font-poppins, 'Poppins', sans-serif); font-size: 12px; font-style: normal; font-weight: 500; line-height: normal; } .border-dvh { border: 1px solid; border-image-source: linear-gradient(168.35deg, var(--color-tertiary) 0%, var(--color-primary) 49.2%, var(--color-secondary) 99.43%); } .text-dvh { background: linear-gradient(168.35deg, var(--color-tertiary) 0%, var(--color-primary) 49.2%, var(--color-secondary) 99.43%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .dvh-dropdown { border-radius: 7.255px; background: var(--color-accent); box-shadow: 0px 0px 1px 0.907px rgba(0, 0, 0, 0.1) inset; } .dvh-bg-gr { background: var(--dvh-background); } .dvh-accent { border-radius: 5px; background: var(--dvh-accent-surface); box-shadow: 0px 0px 1px 0px var(--dvh-accent-shadow) inset; text-align: center; font-family: var(--font-poppins, 'Poppins', sans-serif); font-size: 12px; font-style: normal; font-weight: 500; line-height: normal; color: var(--color-tertiary) !important; } /* ─── Form inputs (converted from @apply) ─── */ .form-submit-btn { width: 15rem; } @media (min-width: 768px) { .form-submit-btn { width: 20rem; } } .form-label { font-weight: 400; } .form-field { height: 3rem; font-weight: 600; } .tools-form-field { height: 3rem; font-weight: 400; } /* ─── Table scrollbar ─── */ .table ::-webkit-scrollbar { width: 0; background: transparent; } .table ::-webkit-scrollbar-thumb { background: #ff0000; } /* ─── Scrollbar utilities ─── */ @media (min-width: 768px) { .scroll-bar-x { overflow-x: scroll; padding-bottom: 2px; } .scroll-bar-x::-webkit-scrollbar { width: 80px; height: 8px; } .scroll-bar-x::-webkit-scrollbar-thumb { width: 80px; border-radius: 25px; -webkit-box-shadow: inset 0 0 10px #c6c3c3; } .scroll-bar-y { overflow-x: scroll; padding-bottom: 2px; } .scroll-bar-y::-webkit-scrollbar { width: 8px; height: 8px; } .scroll-bar-y::-webkit-scrollbar-thumb { width: 8px; border-radius: 25px; -webkit-box-shadow: inset 0 0 10px #c6c3c3; } } .custom-scrollbar::-webkit-scrollbar { width: 1px; height: 4px; } .custom-scrollbar::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .custom-scrollbar::-webkit-scrollbar-thumb { background-color: var(--color-secondary); border-radius: 100px; } .progress-ring__circle { transition: stroke-dashoffset 0.35s; transform: rotate(-90deg); transform-origin: 50% 50%; } /* ============================================================================ From typography.css (was orphaned — never imported) ============================================================================ */ /* ─── Shared base for DVH typography ─── */ .h2, .h3, .h4, .h4-regular, .h4-semibold, .body, .body-medium, .body2, .cta, .cta-only, .field { font-family: var(--font-poppins, 'Poppins', sans-serif); color: var(--dvh-main-text-color); font-style: normal; line-height: normal; } /* ─── Mobile sizes ─── */ .h2 { font-size: 22px; font-weight: 700; line-height: 108.4%; } .h3 { font-size: 18px; font-weight: 700; } .h4 { font-size: 16px; font-weight: 700; } .h4-regular { font-size: 16px; font-weight: 400; } .h4-semibold { font-size: 16px; font-weight: 600; } .body { font-size: 14px; font-weight: 400; } .body-medium { font-size: 14px; font-weight: 500; } .body2 { font-size: 12px; font-weight: 400; } .cta { font-size: 12px; font-weight: 500; } .cta-only { font-size: 12px; font-weight: 500; } .cta-tertiary { font-size: 12px; font-weight: 400; } .field { font-size: 12px; font-weight: 500; } /* ─── Tablet+ overrides (430px+) ─── */ @media screen and (min-width: 430px) { .h2 { font-size: 26px; } .h3 { font-size: 22px; } .h4 { font-size: 20px; } .h4-regular { font-size: 20px; line-height: 120%; } .h4-semibold { font-size: 20px; line-height: 120%; } .body { font-size: 18px; } .body-medium { font-size: 18px; } .body2 { font-size: 16px; } .cta { font-size: 16px; font-weight: 700; } .cta-tertiary { font-size: 16px; } .field { font-size: 16px; } } /* ─── .cta button properties ─── */ .cta { border-radius: 5px; background: var(--dvh-main-button-color); box-shadow: 1.219px -1.219px 1.219px 0px rgba(165, 165, 165, 0.32) inset, -1.219px 1.219px 1.219px 0px rgba(255, 255, 255, 0.32) inset; backdrop-filter: blur(2.804421901702881px); color: white; padding: 10px 20px; } /* ─── .cta-tertiary text decoration ─── */ .cta-tertiary { text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } /* ─── .field placeholder (converted from @apply) ─── */ .field::placeholder { font-size: 12px; color: hsl(215.4, 16.3%, 46.9%); } @media screen and (min-width: 430px) { .field::placeholder { font-size: 16px; } }